fix:修改 topology 源码 删除创建的节点以及给节点创建的对应的事件
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -60,10 +60,10 @@ export default {
|
||||
if (res2.length == 0) {
|
||||
this.topologyLoading = false
|
||||
}
|
||||
// res2.forEach(item => {
|
||||
// temp.push(item)
|
||||
// })
|
||||
temp.push(res2[2])
|
||||
res2.forEach(item => {
|
||||
temp.push(item)
|
||||
})
|
||||
// temp.push(res2[2])
|
||||
this.allProject = JSON.parse(JSON.stringify(temp))
|
||||
temp = null
|
||||
axiosAll = null
|
||||
@@ -101,6 +101,9 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.queryAllProjectData()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.allProject = []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -28,7 +28,7 @@ import { formatScientificNotation, getMetricTypeValue } from '@/components/commo
|
||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||
import { initColor } from '@/components/chart/chart/tools'
|
||||
import lodash from 'lodash'
|
||||
import bus from "@/libs/bus";
|
||||
import bus from '@/libs/bus'
|
||||
|
||||
export default {
|
||||
name: 'chart-bar',
|
||||
|
||||
@@ -293,7 +293,6 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
@@ -496,7 +496,7 @@ export default {
|
||||
xhr.responseType = ''
|
||||
// 创建一个 post 请求,采用异步
|
||||
xhr.open('get', 'http://192.168.44.100/' + nowUrl, true)
|
||||
xhr.setRequestHeader('Authorization', localStorage.getItem('nz-token'));
|
||||
xhr.setRequestHeader('Authorization', localStorage.getItem('nz-token'))
|
||||
// 注册相关事件回调处理函数
|
||||
xhr.onload = function (e) {
|
||||
if (this.status == 200 || this.status == 304) {
|
||||
@@ -504,7 +504,7 @@ export default {
|
||||
resolve(JSON.parse(this.responseText))
|
||||
}
|
||||
}
|
||||
xhr.onerror = function(e) { console.log(e) };
|
||||
xhr.onerror = function (e) { console.log(e) }
|
||||
// 发送数据
|
||||
xhr.send()
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export * from './src/final';
|
||||
export * from './src/fork';
|
||||
export * from './src/swimlaneH';
|
||||
export * from './src/swimlaneV';
|
||||
export * from './src/register';
|
||||
export * from './src/final'
|
||||
export * from './src/fork'
|
||||
export * from './src/swimlaneH'
|
||||
export * from './src/swimlaneV'
|
||||
export * from './src/register'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
export function activityFinal (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 2, node.rect.width / 2, node.rect.height / 2, 0, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = ctx.strokeStyle;
|
||||
ctx.ellipse(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 2, node.rect.width / 4, node.rect.height / 4, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 2, node.rect.width / 2, node.rect.height / 2, 0, 0, Math.PI * 2)
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.fillStyle = ctx.strokeStyle
|
||||
ctx.ellipse(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 2, node.rect.width / 4, node.rect.height / 4, 0, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
}
|
||||
// # sourceMappingURL=final.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Rect } from '@topology/core';
|
||||
import { Rect } from '@topology/core'
|
||||
export function activityFinalIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function activityFinalTextRect (node) {
|
||||
var w = (node.rect.width * 5) / 7;
|
||||
var h = (node.rect.height * 5) / 7;
|
||||
node.textRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + (node.rect.height - h) / 2, w, h);
|
||||
node.fullTextRect = node.textRect;
|
||||
const w = (node.rect.width * 5) / 7
|
||||
const h = (node.rect.height * 5) / 7
|
||||
node.textRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + (node.rect.height - h) / 2, w, h)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=final.rect.js.map
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './final';
|
||||
export * from './final.rect';
|
||||
export * from './final'
|
||||
export * from './final.rect'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,28 +1,28 @@
|
||||
import { Point, Direction } from '@topology/core';
|
||||
import { Point, Direction } from '@topology/core'
|
||||
export function forkHAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.ex, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
var dis = 5;
|
||||
for (var i = dis; node.rect.x + i < node.rect.ex; i = i + dis) {
|
||||
var pt1 = new Point(node.rect.x + i, node.rect.y, Direction.Up);
|
||||
var pt2 = new Point(node.rect.x + i, node.rect.ey, Direction.Bottom);
|
||||
pt1.hidden = true;
|
||||
pt2.hidden = true;
|
||||
node.anchors.push(pt1);
|
||||
node.anchors.push(pt2);
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.ex, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
const dis = 5
|
||||
for (let i = dis; node.rect.x + i < node.rect.ex; i = i + dis) {
|
||||
const pt1 = new Point(node.rect.x + i, node.rect.y, Direction.Up)
|
||||
const pt2 = new Point(node.rect.x + i, node.rect.ey, Direction.Bottom)
|
||||
pt1.hidden = true
|
||||
pt2.hidden = true
|
||||
node.anchors.push(pt1)
|
||||
node.anchors.push(pt2)
|
||||
}
|
||||
}
|
||||
export function forkVAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.ey, Direction.Bottom));
|
||||
var dis = 5;
|
||||
for (var i = dis; node.rect.y + i < node.rect.ey; i = i + dis) {
|
||||
var pt1 = new Point(node.rect.x, node.rect.y + i, Direction.Left);
|
||||
var pt2 = new Point(node.rect.ex, node.rect.y + i, Direction.Right);
|
||||
pt1.hidden = true;
|
||||
pt2.hidden = true;
|
||||
node.anchors.push(pt1);
|
||||
node.anchors.push(pt2);
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.ey, Direction.Bottom))
|
||||
const dis = 5
|
||||
for (let i = dis; node.rect.y + i < node.rect.ey; i = i + dis) {
|
||||
const pt1 = new Point(node.rect.x, node.rect.y + i, Direction.Left)
|
||||
const pt2 = new Point(node.rect.ex, node.rect.y + i, Direction.Right)
|
||||
pt1.hidden = true
|
||||
pt2.hidden = true
|
||||
node.anchors.push(pt1)
|
||||
node.anchors.push(pt2)
|
||||
}
|
||||
}
|
||||
// # sourceMappingURL=fork.anchor.js.map
|
||||
@@ -1,25 +1,25 @@
|
||||
export function fork (ctx, node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=fork.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Rect } from '@topology/core';
|
||||
import { Rect } from '@topology/core'
|
||||
export function forkIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function forkTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=fork.rect.js.map
|
||||
@@ -1,4 +1,4 @@
|
||||
export * from './fork';
|
||||
export * from './fork.rect';
|
||||
export * from './fork.anchor';
|
||||
export * from './fork'
|
||||
export * from './fork.rect'
|
||||
export * from './fork.anchor'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,13 +1,13 @@
|
||||
import { registerNode } from '@topology/core';
|
||||
import { activityFinal, activityFinalIconRect, activityFinalTextRect } from './final';
|
||||
import { fork, forkHAnchors, forkVAnchors, forkIconRect, forkTextRect } from './fork';
|
||||
import { swimlaneH, swimlaneHIconRect, swimlaneHTextRect } from './swimlaneH';
|
||||
import { swimlaneV, swimlaneVIconRect, swimlaneVTextRect } from './swimlaneV';
|
||||
import { registerNode } from '@topology/core'
|
||||
import { activityFinal, activityFinalIconRect, activityFinalTextRect } from './final'
|
||||
import { fork, forkHAnchors, forkVAnchors, forkIconRect, forkTextRect } from './fork'
|
||||
import { swimlaneH, swimlaneHIconRect, swimlaneHTextRect } from './swimlaneH'
|
||||
import { swimlaneV, swimlaneVIconRect, swimlaneVTextRect } from './swimlaneV'
|
||||
export function register () {
|
||||
registerNode('activityFinal', activityFinal, null, activityFinalIconRect, activityFinalTextRect);
|
||||
registerNode('swimlaneV', swimlaneV, null, swimlaneVIconRect, swimlaneVTextRect);
|
||||
registerNode('swimlaneH', swimlaneH, null, swimlaneHIconRect, swimlaneHTextRect);
|
||||
registerNode('forkH', fork, forkHAnchors, forkIconRect, forkTextRect);
|
||||
registerNode('forkV', fork, forkVAnchors, forkIconRect, forkTextRect);
|
||||
registerNode('activityFinal', activityFinal, null, activityFinalIconRect, activityFinalTextRect)
|
||||
registerNode('swimlaneV', swimlaneV, null, swimlaneVIconRect, swimlaneVTextRect)
|
||||
registerNode('swimlaneH', swimlaneH, null, swimlaneHIconRect, swimlaneHTextRect)
|
||||
registerNode('forkH', fork, forkHAnchors, forkIconRect, forkTextRect)
|
||||
registerNode('forkV', fork, forkVAnchors, forkIconRect, forkTextRect)
|
||||
}
|
||||
// # sourceMappingURL=register.js.map
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './swimlaneH';
|
||||
export * from './swimlaneH.rect';
|
||||
export * from './swimlaneH'
|
||||
export * from './swimlaneH.rect'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,27 +1,27 @@
|
||||
export function swimlaneH (ctx, node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(node.rect.x + 40, node.rect.y);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
|
||||
ctx.closePath()
|
||||
ctx.moveTo(node.rect.x + 40, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + 40, node.rect.ey);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=swimlaneH.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Rect } from '@topology/core';
|
||||
import { Rect } from '@topology/core'
|
||||
export function swimlaneHIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function swimlaneHTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + 10, node.rect.y, 20, node.rect.height);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x + 10, node.rect.y, 20, node.rect.height)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=swimlaneH.rect.js.map
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './swimlaneV';
|
||||
export * from './swimlaneV.rect';
|
||||
export * from './swimlaneV'
|
||||
export * from './swimlaneV.rect'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,27 +1,27 @@
|
||||
export function swimlaneV (ctx, node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + 40);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
|
||||
ctx.closePath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + 40)
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + 40);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=swimlaneV.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Rect } from '@topology/core';
|
||||
import { Rect } from '@topology/core'
|
||||
export function swimlaneVIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function swimlaneVTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=swimlaneV.rect.js.map
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './src/echarts';
|
||||
export * from './src/register';
|
||||
export * from './src/echarts'
|
||||
export * from './src/register'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,44 +1,44 @@
|
||||
import { s8, createDiv, rectangle } from '@topology/core';
|
||||
export var echartsObjs = {};
|
||||
import { s8, createDiv, rectangle } from '@topology/core'
|
||||
export var echartsObjs = {}
|
||||
export function echarts (ctx, node) {
|
||||
// 绘制一个底图,类似于占位符。
|
||||
rectangle(ctx, node);
|
||||
rectangle(ctx, node)
|
||||
// tslint:disable-next-line:no-shadowed-variable
|
||||
var echarts = echartsObjs.echarts || window.echarts;
|
||||
const echarts = echartsObjs.echarts || window.echarts
|
||||
if (!node.data || !echarts) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (typeof node.data === 'string') {
|
||||
node.data = JSON.parse(node.data);
|
||||
node.data = JSON.parse(node.data)
|
||||
}
|
||||
if (!node.data.echarts) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (!node.elementId) {
|
||||
node.elementId = s8();
|
||||
node.elementId = s8()
|
||||
}
|
||||
if (!node.elementLoaded) {
|
||||
echartsObjs[node.id] = {
|
||||
div: createDiv(node),
|
||||
};
|
||||
node.elementLoaded = true;
|
||||
document.body.appendChild(echartsObjs[node.id].div);
|
||||
div: createDiv(node)
|
||||
}
|
||||
node.elementLoaded = true
|
||||
document.body.appendChild(echartsObjs[node.id].div)
|
||||
// 添加当前节点到div层
|
||||
node.addToDiv();
|
||||
echartsObjs[node.id].chart = echarts.init(echartsObjs[node.id].div, node.data.echarts.theme);
|
||||
node.elementRendered = false;
|
||||
node.addToDiv()
|
||||
echartsObjs[node.id].chart = echarts.init(echartsObjs[node.id].div, node.data.echarts.theme)
|
||||
node.elementRendered = false
|
||||
// 等待父div先渲染完成,避免初始图表控件太大
|
||||
setTimeout(function () {
|
||||
echartsObjs[node.id].chart.resize();
|
||||
});
|
||||
echartsObjs[node.id].chart.resize()
|
||||
})
|
||||
}
|
||||
if (!node.elementRendered) {
|
||||
// 初始化时,等待父div先渲染完成,避免初始图表控件太大。
|
||||
setTimeout(function () {
|
||||
echartsObjs[node.id].chart.setOption(node.data.echarts.option);
|
||||
echartsObjs[node.id].chart.resize();
|
||||
node.elementRendered = true;
|
||||
});
|
||||
echartsObjs[node.id].chart.setOption(node.data.echarts.option)
|
||||
echartsObjs[node.id].chart.resize()
|
||||
node.elementRendered = true
|
||||
})
|
||||
}
|
||||
}
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
import { registerNode, loadJS } from '@topology/core';
|
||||
import { echarts, echartsObjs } from './echarts';
|
||||
import { registerNode, loadJS } from '@topology/core'
|
||||
import { echarts, echartsObjs } from './echarts'
|
||||
export function register (_echarts) {
|
||||
echartsObjs.echarts = _echarts;
|
||||
echartsObjs.echarts = _echarts
|
||||
if (!echartsObjs.echarts && !window.echarts) {
|
||||
loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js', null, true);
|
||||
loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js', null, true)
|
||||
}
|
||||
registerNode('echarts', echarts, null, null, null);
|
||||
registerNode('echarts', echarts, null, null, null)
|
||||
}
|
||||
// # sourceMappingURL=register.js.map
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './src/class';
|
||||
export * from './src/register';
|
||||
export * from './src/class'
|
||||
export * from './src/register'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,56 +1,56 @@
|
||||
export function simpleClass (ctx, node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + 40);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
|
||||
ctx.closePath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + 40)
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + 40);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
export function interfaceClass (ctx, node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + 40);
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + 40);
|
||||
var height = node.rect.y + 20 + node.rect.height / 2;
|
||||
ctx.moveTo(node.rect.x, height);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
|
||||
ctx.closePath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + 40)
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + 40)
|
||||
const height = node.rect.y + 20 + node.rect.height / 2
|
||||
ctx.moveTo(node.rect.x, height)
|
||||
ctx.lineTo(node.rect.ex, height);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=class.js.map
|
||||
@@ -1,16 +1,16 @@
|
||||
import { Rect } from '@topology/core';
|
||||
import { Rect } from '@topology/core'
|
||||
export function simpleClassIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function simpleClassTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
export function interfaceClassIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function interfaceClassTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=class.rect.js.map
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './class';
|
||||
export * from './class.rect';
|
||||
export * from './class'
|
||||
export * from './class.rect'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,7 +1,7 @@
|
||||
import { registerNode } from '@topology/core';
|
||||
import { simpleClass, simpleClassIconRect, simpleClassTextRect, interfaceClass, interfaceClassIconRect, interfaceClassTextRect } from './class';
|
||||
import { registerNode } from '@topology/core'
|
||||
import { simpleClass, simpleClassIconRect, simpleClassTextRect, interfaceClass, interfaceClassIconRect, interfaceClassTextRect } from './class'
|
||||
export function register () {
|
||||
registerNode('simpleClass', simpleClass, null, simpleClassIconRect, simpleClassTextRect);
|
||||
registerNode('interfaceClass', interfaceClass, null, interfaceClassIconRect, interfaceClassTextRect);
|
||||
registerNode('simpleClass', simpleClass, null, simpleClassIconRect, simpleClassTextRect)
|
||||
registerNode('interfaceClass', interfaceClass, null, interfaceClassIconRect, interfaceClassTextRect)
|
||||
}
|
||||
// # sourceMappingURL=register.js.map
|
||||
@@ -1,6 +1,6 @@
|
||||
export * from './src/core';
|
||||
export * from './src/options';
|
||||
export * from './src/utils';
|
||||
export * from './src/models';
|
||||
export * from './src/middles';
|
||||
export * from './src/core'
|
||||
export * from './src/options'
|
||||
export * from './src/utils'
|
||||
export * from './src/models'
|
||||
export * from './src/middles'
|
||||
// # sourceMappingURL=index.js.map
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,264 +1,256 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
import { Store } from 'le5le-store'
|
||||
import { PenType } from './models/pen'
|
||||
import { Node } from './models/node'
|
||||
import { Line } from './models/line'
|
||||
import { Layer } from './layer'
|
||||
import { s8 } from './utils/uuid'
|
||||
import { find } from './utils/canvas'
|
||||
const __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b }) ||
|
||||
function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
|
||||
return extendStatics(d, b)
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
import { Store } from 'le5le-store';
|
||||
import { PenType } from './models/pen';
|
||||
import { Node } from './models/node';
|
||||
import { Line } from './models/line';
|
||||
import { Layer } from './layer';
|
||||
import { s8 } from './utils/uuid';
|
||||
import { find } from './utils/canvas';
|
||||
var AnimateLayer = /** @class */ (function (_super) {
|
||||
__extends(AnimateLayer, _super);
|
||||
extendStatics(d, b)
|
||||
function __ () { this.constructor = d }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
|
||||
}
|
||||
})()
|
||||
const AnimateLayer = /** @class */ (function (_super) {
|
||||
__extends(AnimateLayer, _super)
|
||||
function AnimateLayer (options, TID) {
|
||||
if (options === void 0) { options = {}; }
|
||||
var _this = _super.call(this, TID) || this;
|
||||
_this.options = options;
|
||||
_this.pens = new Map();
|
||||
_this.lastNow = 0;
|
||||
Store.set(_this.generateStoreKey('LT:AnimateLayer'), _this);
|
||||
if (options === void 0) { options = {} }
|
||||
const _this = _super.call(this, TID) || this
|
||||
_this.options = options
|
||||
_this.pens = new Map()
|
||||
_this.lastNow = 0
|
||||
Store.set(_this.generateStoreKey('LT:AnimateLayer'), _this)
|
||||
if (!_this.options.animateColor) {
|
||||
_this.options.animateColor = '#ff6600';
|
||||
_this.options.animateColor = '#ff6600'
|
||||
}
|
||||
_this.subscribeUpdate = Store.subscribe(_this.generateStoreKey('LT:updateLines'), function (lines) {
|
||||
_this.updateLines(lines);
|
||||
});
|
||||
_this.updateLines(lines)
|
||||
})
|
||||
_this.subscribePlay = Store.subscribe(_this.generateStoreKey('LT:AnimatePlay'), function (params) {
|
||||
if (params.stop) {
|
||||
if (params.tag) {
|
||||
var pens = find(params.tag, _this.data.pens);
|
||||
const pens = find(params.tag, _this.data.pens)
|
||||
pens.forEach(function (item) {
|
||||
if (_this.pens.has(item.id)) {
|
||||
_this.pens.get(item.id).animateStart = 0;
|
||||
_this.pens.get(item.id).animateStart = 0
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
if (params.pen && _this.pens.has(params.pen.id)) {
|
||||
_this.pens.get(params.pen.id).animateStart = 0;
|
||||
_this.pens.get(params.pen.id).animateStart = 0
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (params.pen) {
|
||||
if (_this.pens.has(params.pen.id)) {
|
||||
_this.pens.get(params.pen.id).animateStart = Date.now();
|
||||
}
|
||||
else {
|
||||
_this.pens.get(params.pen.id).animateStart = Date.now()
|
||||
} else {
|
||||
if (params.pen.type) {
|
||||
_this.pens.set(params.pen.id, _this.getAnimateLine(params.pen));
|
||||
}
|
||||
else {
|
||||
_this.pens.set(params.pen.id, params.pen);
|
||||
_this.pens.set(params.pen.id, _this.getAnimateLine(params.pen))
|
||||
} else {
|
||||
_this.pens.set(params.pen.id, params.pen)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (params.tag) {
|
||||
_this.readyPlay(params.tag, false);
|
||||
_this.readyPlay(params.tag, false)
|
||||
}
|
||||
}
|
||||
_this.animate();
|
||||
});
|
||||
return _this;
|
||||
_this.animate()
|
||||
})
|
||||
return _this
|
||||
}
|
||||
AnimateLayer.prototype.getAnimateLine = function (item) {
|
||||
var l = new Line(item);
|
||||
l.data = l.id;
|
||||
l.id = s8();
|
||||
l.setTID(this.TID);
|
||||
l.isAnimate = true;
|
||||
l.toArrow = '';
|
||||
const l = new Line(item)
|
||||
l.data = l.id
|
||||
l.id = s8()
|
||||
l.setTID(this.TID)
|
||||
l.isAnimate = true
|
||||
l.toArrow = ''
|
||||
if (l.fromArrow && l.fromArrow.indexOf('line') < 0) {
|
||||
l.animateFromSize = l.fromArrowSize + l.lineWidth * 5;
|
||||
l.animateFromSize = l.fromArrowSize + l.lineWidth * 5
|
||||
}
|
||||
if (l.toArrow && l.toArrow.indexOf('line') < 0) {
|
||||
l.animateToSize = l.toArrowSize + l.lineWidth * 5;
|
||||
l.animateToSize = l.toArrowSize + l.lineWidth * 5
|
||||
}
|
||||
l.animateStart = item.animateStart;
|
||||
l.lineCap = 'round';
|
||||
l.fillStyle = '#fff';
|
||||
l.strokeStyle = l.animateColor || this.options.animateColor;
|
||||
l.length = l.getLen();
|
||||
l.animateStart = item.animateStart
|
||||
l.lineCap = 'round'
|
||||
l.fillStyle = '#fff'
|
||||
l.strokeStyle = l.animateColor || this.options.animateColor
|
||||
l.length = l.getLen()
|
||||
if (!l.fromArrowColor) {
|
||||
l.fromArrowColor = l.strokeStyle || Store.get(this.generateStoreKey('LT:color'));
|
||||
l.fromArrowColor = l.strokeStyle || Store.get(this.generateStoreKey('LT:color'))
|
||||
}
|
||||
if (!l.toArrowColor) {
|
||||
l.toArrowColor = l.strokeStyle || Store.get(this.generateStoreKey('LT:color'));
|
||||
l.toArrowColor = l.strokeStyle || Store.get(this.generateStoreKey('LT:color'))
|
||||
}
|
||||
return l
|
||||
}
|
||||
return l;
|
||||
};
|
||||
AnimateLayer.prototype.findLine = function (pen) {
|
||||
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
for (let _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
if (item.id === pen.data) {
|
||||
return item;
|
||||
return item
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
AnimateLayer.prototype.readyPlay = function (tag, auto, pens) {
|
||||
var _this = this;
|
||||
var readyPens = new Map();
|
||||
const _this = this
|
||||
const readyPens = new Map()
|
||||
if (!pens) {
|
||||
pens = this.data.pens;
|
||||
pens = this.data.pens
|
||||
}
|
||||
pens.forEach(function (pen) {
|
||||
pen.setTID(_this.TID);
|
||||
pen.setTID(_this.TID)
|
||||
if (!pen.visible || readyPens.get(pen.id)) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if ((auto && pen.animatePlay) || (tag && pen.tags.indexOf(tag) > -1)) {
|
||||
if (!pen.animateStart || pen.animateStart < 1) {
|
||||
pen.animateStart = Date.now();
|
||||
pen.animateStart = Date.now()
|
||||
}
|
||||
}
|
||||
if (pen instanceof Node) {
|
||||
if (pen.animateStart > 0) {
|
||||
if (!pen.animateReady) {
|
||||
pen.initAnimate();
|
||||
pen.initAnimate()
|
||||
}
|
||||
readyPens.set(pen.id, pen);
|
||||
readyPens.set(pen.id, pen)
|
||||
}
|
||||
if (pen.children && pen.children.length) {
|
||||
_this.readyPlay(tag, auto, pen.children);
|
||||
_this.readyPlay(tag, auto, pen.children)
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (pen.animateStart > 0) {
|
||||
readyPens.set(pen.id, _this.getAnimateLine(pen));
|
||||
}
|
||||
else if (_this.pens.has(pen.id)) {
|
||||
_this.pens.get(pen.id).animateStart = 0;
|
||||
readyPens.set(pen.id, _this.getAnimateLine(pen))
|
||||
} else if (_this.pens.has(pen.id)) {
|
||||
_this.pens.get(pen.id).animateStart = 0
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
readyPens.forEach(function (pen) {
|
||||
if (pen.type) {
|
||||
_this.pens.set(pen.data, pen);
|
||||
_this.pens.set(pen.data, pen)
|
||||
} else {
|
||||
_this.pens.set(pen.id, pen)
|
||||
}
|
||||
else {
|
||||
_this.pens.set(pen.id, pen);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
AnimateLayer.prototype.animate = function () {
|
||||
var _this = this;
|
||||
const _this = this
|
||||
if (this.timer) {
|
||||
cancelAnimationFrame(this.timer);
|
||||
cancelAnimationFrame(this.timer)
|
||||
}
|
||||
this.timer = requestAnimationFrame(function () {
|
||||
var now = Date.now();
|
||||
const now = Date.now()
|
||||
if (now - _this.lastNow < _this.options.refresh) {
|
||||
_this.animate();
|
||||
return;
|
||||
_this.animate()
|
||||
return
|
||||
}
|
||||
_this.lastNow = now;
|
||||
var animated = false;
|
||||
_this.lastNow = now
|
||||
let animated = false
|
||||
_this.pens.forEach(function (pen) {
|
||||
if (!pen.animateStart || pen.animateStart < 1) {
|
||||
if (pen.type) {
|
||||
_this.pens.delete(pen.data);
|
||||
var line = _this.findLine(pen);
|
||||
_this.pens.delete(pen.data)
|
||||
var line = _this.findLine(pen)
|
||||
if (line) {
|
||||
line.animateStart = 0;
|
||||
line.animatePos = pen.animatePos;
|
||||
line.animateStart = 0
|
||||
line.animatePos = pen.animatePos
|
||||
}
|
||||
} else {
|
||||
_this.pens.delete(pen.id)
|
||||
}
|
||||
else {
|
||||
_this.pens.delete(pen.id);
|
||||
}
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (pen.animateStart > now) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (pen.animateFn) {
|
||||
if (typeof pen.animateFn === 'function') {
|
||||
pen.animateFn();
|
||||
}
|
||||
else if (window && window[pen.animateFn]) {
|
||||
window[pen.animateFn]();
|
||||
}
|
||||
else {
|
||||
pen.animateFn()
|
||||
} else if (window && window[pen.animateFn]) {
|
||||
window[pen.animateFn]()
|
||||
} else {
|
||||
// pen.render();
|
||||
}
|
||||
}
|
||||
else {
|
||||
pen.animate(now);
|
||||
} else {
|
||||
pen.animate(now)
|
||||
}
|
||||
if (pen.animateStart < 1) {
|
||||
if (pen.type) {
|
||||
_this.pens.delete(pen.data);
|
||||
}
|
||||
else {
|
||||
_this.pens.delete(pen.id);
|
||||
_this.pens.delete(pen.data)
|
||||
} else {
|
||||
_this.pens.delete(pen.id)
|
||||
}
|
||||
if (pen.type === PenType.Line) {
|
||||
var line = _this.findLine(pen);
|
||||
var line = _this.findLine(pen)
|
||||
if (line) {
|
||||
line.animateStart = 0;
|
||||
line.animatePos = pen.animatePos;
|
||||
line.animateStart = 0
|
||||
line.animatePos = pen.animatePos
|
||||
}
|
||||
}
|
||||
if (pen.nextAnimate) {
|
||||
_this.readyPlay(pen.nextAnimate, false);
|
||||
_this.readyPlay(pen.nextAnimate, false)
|
||||
}
|
||||
}
|
||||
animated = true;
|
||||
});
|
||||
animated = true
|
||||
})
|
||||
if (animated) {
|
||||
Store.set(_this.generateStoreKey('LT:render'), true);
|
||||
_this.animate();
|
||||
Store.set(_this.generateStoreKey('LT:render'), true)
|
||||
_this.animate()
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
AnimateLayer.prototype.updateLines = function (lines) {
|
||||
this.pens.forEach(function (line, key) {
|
||||
if (!(line instanceof Line)) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
|
||||
var item = lines_1[_i];
|
||||
for (let _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
|
||||
const item = lines_1[_i]
|
||||
if (line.data === item.id) {
|
||||
line.from = item.from;
|
||||
line.to = item.to;
|
||||
line.controlPoints = item.controlPoints;
|
||||
line.length = line.getLen();
|
||||
line.from = item.from
|
||||
line.to = item.to
|
||||
line.controlPoints = item.controlPoints
|
||||
line.length = line.getLen()
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
AnimateLayer.prototype.render = function (ctx) {
|
||||
var _this = this;
|
||||
const _this = this
|
||||
this.pens.forEach(function (line, key) {
|
||||
if (line.visible && line instanceof Line) {
|
||||
if (!line.getTID()) {
|
||||
line.setTID(_this.TID);
|
||||
line.setTID(_this.TID)
|
||||
}
|
||||
line.render(ctx);
|
||||
line.render(ctx)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
AnimateLayer.prototype.stop = function () {
|
||||
this.pens.clear();
|
||||
this.pens.clear()
|
||||
if (this.timer) {
|
||||
cancelAnimationFrame(this.timer);
|
||||
this.timer = null;
|
||||
cancelAnimationFrame(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
};
|
||||
AnimateLayer.prototype.destroy = function () {
|
||||
this.stop();
|
||||
this.subscribeUpdate.unsubscribe();
|
||||
this.subscribePlay.unsubscribe();
|
||||
};
|
||||
return AnimateLayer;
|
||||
}(Layer));
|
||||
export { AnimateLayer };
|
||||
this.stop()
|
||||
this.subscribeUpdate.unsubscribe()
|
||||
this.subscribePlay.unsubscribe()
|
||||
this.subscribeUpdate = null
|
||||
this.subscribePlay = null
|
||||
this.pens = null
|
||||
}
|
||||
return AnimateLayer
|
||||
}(Layer))
|
||||
export { AnimateLayer }
|
||||
// # sourceMappingURL=animateLayer.js.map
|
||||
@@ -1,89 +1,96 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
import { Store } from 'le5le-store'
|
||||
import { Layer } from './layer'
|
||||
const __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b }) ||
|
||||
function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
|
||||
return extendStatics(d, b)
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
import { Store } from 'le5le-store';
|
||||
import { Layer } from './layer';
|
||||
var Canvas = /** @class */ (function (_super) {
|
||||
__extends(Canvas, _super);
|
||||
extendStatics(d, b)
|
||||
function __ () { this.constructor = d }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
|
||||
}
|
||||
})()
|
||||
const Canvas = /** @class */ (function (_super) {
|
||||
__extends(Canvas, _super)
|
||||
function Canvas (parentElem, options, TID) {
|
||||
if (options === void 0) { options = {}; }
|
||||
var _this = _super.call(this, TID) || this;
|
||||
_this.parentElem = parentElem;
|
||||
_this.options = options;
|
||||
_this.canvas = document.createElement('canvas');
|
||||
_this.width = 0;
|
||||
_this.height = 0;
|
||||
if (options === void 0) { options = {} }
|
||||
const _this = _super.call(this, TID) || this
|
||||
_this.parentElem = parentElem
|
||||
_this.options = options
|
||||
_this.canvas = document.createElement('canvas')
|
||||
_this.width = 0
|
||||
_this.height = 0
|
||||
_this.subcribe = Store.subscribe(_this.generateStoreKey('topology-data'), function (val) {
|
||||
_this.data = val;
|
||||
});
|
||||
_this.canvas.style.position = 'absolute';
|
||||
_this.canvas.style.left = '0';
|
||||
_this.canvas.style.top = '0';
|
||||
_this.canvas.style.outline = 'none';
|
||||
_this.data = val
|
||||
})
|
||||
_this.canvas.style.position = 'absolute'
|
||||
_this.canvas.style.left = '0'
|
||||
_this.canvas.style.top = '0'
|
||||
_this.canvas.style.outline = 'none'
|
||||
if (!Canvas.dpiRatio) {
|
||||
if (!options.extDpiRatio && options.extDpiRatio !== 0) {
|
||||
if (window && window.devicePixelRatio > 1) {
|
||||
options.extDpiRatio = 0.25;
|
||||
}
|
||||
else {
|
||||
options.extDpiRatio = 0;
|
||||
options.extDpiRatio = 0.25
|
||||
} else {
|
||||
options.extDpiRatio = 0
|
||||
}
|
||||
}
|
||||
Canvas.dpiRatio = (window ? window.devicePixelRatio : 0) + options.extDpiRatio;
|
||||
Canvas.dpiRatio = (window ? window.devicePixelRatio : 0) + options.extDpiRatio
|
||||
if (Canvas.dpiRatio < 1) {
|
||||
Canvas.dpiRatio = 1;
|
||||
Canvas.dpiRatio = 1
|
||||
}
|
||||
}
|
||||
return _this;
|
||||
return _this
|
||||
}
|
||||
Canvas.prototype.resize = function (size) {
|
||||
if (size) {
|
||||
this.width = size.width | 0;
|
||||
this.height = size.height | 0;
|
||||
}
|
||||
else {
|
||||
this.width = size.width | 0
|
||||
this.height = size.height | 0
|
||||
} else {
|
||||
if (this.options.width && this.options.width !== 'auto') {
|
||||
this.width = +this.options.width;
|
||||
}
|
||||
else {
|
||||
this.width = this.parentElem.clientWidth;
|
||||
this.width = +this.options.width
|
||||
} else {
|
||||
this.width = this.parentElem.clientWidth
|
||||
}
|
||||
if (this.options.height && this.options.height !== 'auto') {
|
||||
this.height = +this.options.height;
|
||||
}
|
||||
else {
|
||||
this.height = this.parentElem.clientHeight;
|
||||
this.height = +this.options.height
|
||||
} else {
|
||||
this.height = this.parentElem.clientHeight
|
||||
}
|
||||
}
|
||||
this.canvas.style.width = this.width + 'px';
|
||||
this.canvas.style.height = this.height + 'px';
|
||||
this.canvas.width = (this.width * Canvas.dpiRatio) | 0;
|
||||
this.canvas.height = (this.height * Canvas.dpiRatio) | 0;
|
||||
this.canvas.getContext('2d').scale(Canvas.dpiRatio, Canvas.dpiRatio);
|
||||
Store.set(this.generateStoreKey('LT:size'), { width: this.canvas.width, height: this.canvas.height });
|
||||
};
|
||||
this.canvas.style.width = this.width + 'px'
|
||||
this.canvas.style.height = this.height + 'px'
|
||||
this.canvas.width = (this.width * Canvas.dpiRatio) | 0
|
||||
this.canvas.height = (this.height * Canvas.dpiRatio) | 0
|
||||
this.canvas.getContext('2d').scale(Canvas.dpiRatio, Canvas.dpiRatio)
|
||||
Store.set(this.generateStoreKey('LT:size'), { width: this.canvas.width, height: this.canvas.height })
|
||||
}
|
||||
Canvas.prototype.render = function () {
|
||||
var ctx = this.canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
};
|
||||
const ctx = this.canvas.getContext('2d')
|
||||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||||
}
|
||||
Canvas.prototype.getDpiRatio = function () {
|
||||
return Canvas.dpiRatio;
|
||||
};
|
||||
return Canvas.dpiRatio
|
||||
}
|
||||
Canvas.prototype.destroy = function () {
|
||||
this.subcribe.unsubscribe();
|
||||
};
|
||||
Canvas.dpiRatio = 0;
|
||||
return Canvas;
|
||||
}(Layer));
|
||||
export { Canvas };
|
||||
this.subcribe.unsubscribe()
|
||||
this.activeLayer = null
|
||||
this.hoverLayer = null
|
||||
this.animateLayer = null
|
||||
this.subcribe = null
|
||||
this.options = null
|
||||
this.parentElem = null
|
||||
this.data = null
|
||||
this.offscreen = null
|
||||
this.canvas = null
|
||||
this.bkImg = null
|
||||
this.render = null
|
||||
}
|
||||
Canvas.dpiRatio = 0
|
||||
return Canvas
|
||||
}(Layer))
|
||||
export { Canvas }
|
||||
// # sourceMappingURL=canvas.js.map
|
||||
@@ -86,6 +86,7 @@ const Topology = /** @class */ (function () {
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
_this.resize()
|
||||
timer = null
|
||||
}, 100)
|
||||
}
|
||||
this.calibrateMouse = function (pt) {
|
||||
@@ -819,17 +820,17 @@ const Topology = /** @class */ (function () {
|
||||
Store.set(this.generateStoreKey('LT:fontColor'), this.options.fontColor || '#222222')
|
||||
this.setupDom(parent)
|
||||
this.setupSubscribe()
|
||||
this.setupMouseEvent()
|
||||
// this.setupMouseEvent()
|
||||
// Wait for parent dom load
|
||||
setTimeout(function () {
|
||||
_this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
|
||||
}, 500)
|
||||
setTimeout(function () {
|
||||
_this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
|
||||
}, 1000)
|
||||
this.cache()
|
||||
// setTimeout(function () {
|
||||
// _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
|
||||
// }, 500)
|
||||
// setTimeout(function () {
|
||||
// _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
|
||||
// }, 1000)
|
||||
// this.cache()
|
||||
window.topology = this
|
||||
this.dispatch('loaded')
|
||||
// this.dispatch('loaded')
|
||||
}
|
||||
Object.defineProperty(Topology.prototype, 'ramCaches', {
|
||||
// 内存中的 caches 数量
|
||||
@@ -1917,7 +1918,7 @@ const Topology = /** @class */ (function () {
|
||||
return offset
|
||||
}
|
||||
Topology.prototype.cache = function () {
|
||||
if (this.options.cacheLen == 0 || this.data.locked) { return }
|
||||
if (this.options.cacheLen == 0 || this.data && this.data.locked) { return }
|
||||
if (this.caches.index < this.caches.list.length - 1) {
|
||||
this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1)
|
||||
// 删除 indexDB 的值
|
||||
@@ -2964,7 +2965,7 @@ const Topology = /** @class */ (function () {
|
||||
this.activeLayer.destroy()
|
||||
this.hoverLayer.destroy()
|
||||
this.offscreen.destroy()
|
||||
document.body.removeChild(this.tipMarkdown)
|
||||
// document.body.removeChild(this.tipMarkdown)
|
||||
window.removeEventListener('resize', this.winResize)
|
||||
this.parentElem.removeEventListener('scroll', this.onScroll)
|
||||
window.removeEventListener('scroll', this.onScroll)
|
||||
@@ -2987,9 +2988,6 @@ const Topology = /** @class */ (function () {
|
||||
this.data = null
|
||||
console.log(this.options)
|
||||
window.topology = null
|
||||
createCacheTable()
|
||||
this.divLayer.clear()
|
||||
this.activeLayer = null
|
||||
this.activeLayer = null
|
||||
this.hoverLayer = null
|
||||
this.animateLayer = null
|
||||
@@ -3001,11 +2999,18 @@ const Topology = /** @class */ (function () {
|
||||
this.subcribeAnimateMoved = null
|
||||
this.subcribeEmit = null
|
||||
this.offscreen = null
|
||||
this.parentElem.onresize = null
|
||||
this.parentElem = null
|
||||
this.input = null
|
||||
this.data = null
|
||||
this.caches = null
|
||||
this.clipboard = null
|
||||
this.gifs = {}
|
||||
this.gifs = null
|
||||
this.tipMarkdown = null
|
||||
this.tipMarkdownContent = null
|
||||
this.tipMarkdownArrowUp = null
|
||||
this.tipMarkdownArrowDown = null
|
||||
delete this
|
||||
}
|
||||
return Topology
|
||||
}())
|
||||
|
||||
@@ -1,502 +1,527 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
import { Store } from 'le5le-store'
|
||||
import { Lock } from './models/status'
|
||||
import { images, PenType } from './models/pen'
|
||||
import { Layer } from './layer'
|
||||
import { find } from './utils'
|
||||
const __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b }) ||
|
||||
function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
|
||||
return extendStatics(d, b)
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
import { Store } from 'le5le-store';
|
||||
import { Lock } from './models/status';
|
||||
import { images, PenType } from './models/pen';
|
||||
import { Layer } from './layer';
|
||||
import { find } from './utils';
|
||||
var videos = {};
|
||||
var DivLayer = /** @class */ (function (_super) {
|
||||
__extends(DivLayer, _super);
|
||||
extendStatics(d, b)
|
||||
function __ () { this.constructor = d }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
|
||||
}
|
||||
})()
|
||||
let videos = {}
|
||||
const DivLayer = /** @class */ (function (_super) {
|
||||
__extends(DivLayer, _super)
|
||||
function DivLayer (parentElem, options, TID) {
|
||||
if (options === void 0) { options = {}; }
|
||||
var _this = _super.call(this, TID) || this;
|
||||
_this.parentElem = parentElem;
|
||||
_this.options = options;
|
||||
_this.canvas = document.createElement('div');
|
||||
_this.player = document.createElement('div');
|
||||
_this.audios = {};
|
||||
_this.iframes = {};
|
||||
_this.elements = {};
|
||||
_this.gifs = {};
|
||||
if (options === void 0) { options = {} }
|
||||
const _this = _super.call(this, TID) || this
|
||||
_this.parentElem = parentElem
|
||||
_this.options = options
|
||||
_this.canvas = document.createElement('div')
|
||||
_this.player = document.createElement('div')
|
||||
_this.audios = {}
|
||||
_this.iframes = {}
|
||||
_this.elements = {}
|
||||
_this.gifs = {}
|
||||
_this.addDiv = function (node) {
|
||||
if (node.audio) {
|
||||
if (_this.audios[node.id] && _this.audios[node.id].media.src !== node.audio) {
|
||||
_this.audios[node.id].media.src = node.audio;
|
||||
_this.audios[node.id].media.src = node.audio
|
||||
}
|
||||
setTimeout(function () {
|
||||
_this.setElemPosition(node, (_this.audios[node.id] && _this.audios[node.id].player) || _this.addMedia(node, 'audio'));
|
||||
});
|
||||
_this.setElemPosition(node, (_this.audios[node.id] && _this.audios[node.id].player) || _this.addMedia(node, 'audio'))
|
||||
})
|
||||
}
|
||||
if (node.video) {
|
||||
if (videos[node.id] && videos[node.id].media.src !== node.video) {
|
||||
videos[node.id].media.src = node.video;
|
||||
videos[node.id].media.src = node.video
|
||||
}
|
||||
setTimeout(function () {
|
||||
_this.setElemPosition(node, (videos[node.id] && videos[node.id].player) || _this.addMedia(node, 'video'));
|
||||
});
|
||||
_this.setElemPosition(node, (videos[node.id] && videos[node.id].player) || _this.addMedia(node, 'video'))
|
||||
})
|
||||
}
|
||||
if (node.iframe) {
|
||||
if (!_this.iframes[node.id]) {
|
||||
_this.addIframe(node);
|
||||
_this.addIframe(node)
|
||||
setTimeout(function () {
|
||||
_this.addDiv(node);
|
||||
});
|
||||
}
|
||||
else {
|
||||
_this.addDiv(node)
|
||||
})
|
||||
} else {
|
||||
if (_this.iframes[node.id].src !== node.iframe) {
|
||||
_this.iframes[node.id].src = node.iframe;
|
||||
_this.iframes[node.id].src = node.iframe
|
||||
}
|
||||
_this.setElemPosition(node, _this.iframes[node.id]);
|
||||
_this.setElemPosition(node, _this.iframes[node.id])
|
||||
}
|
||||
}
|
||||
if (node.elementId) {
|
||||
if (!_this.elements[node.id]) {
|
||||
_this.elements[node.id] = document.getElementById(node.elementId);
|
||||
_this.elements[node.id] = document.getElementById(node.elementId)
|
||||
if (_this.elements[node.id]) {
|
||||
_this.canvas.appendChild(_this.elements[node.id]);
|
||||
_this.canvas.appendChild(_this.elements[node.id])
|
||||
}
|
||||
}
|
||||
_this.setElemPosition(node, _this.elements[node.id]);
|
||||
_this.setElemPosition(node, _this.elements[node.id])
|
||||
}
|
||||
if (node.gif) {
|
||||
if (node.image.indexOf('.gif') < 0) {
|
||||
node.gif = false;
|
||||
_this.canvas.removeChild(_this.gifs[node.id]);
|
||||
_this.gifs[node.id] = undefined;
|
||||
}
|
||||
else if (node.img) {
|
||||
node.gif = false
|
||||
_this.canvas.removeChild(_this.gifs[node.id])
|
||||
_this.gifs[node.id] = undefined
|
||||
} else if (node.img) {
|
||||
if (_this.gifs[node.id] && _this.gifs[node.id].src !== node.image) {
|
||||
_this.gifs[node.id].src = node.image;
|
||||
_this.gifs[node.id].src = node.image
|
||||
}
|
||||
if (_this.gifs[node.id]) {
|
||||
_this.setElemPosition(node, _this.gifs[node.id])
|
||||
} else {
|
||||
_this.addGif(node)
|
||||
_this.setElemPosition(node, node.id)
|
||||
}
|
||||
_this.setElemPosition(node, _this.gifs[node.id] || _this.addGif(node));
|
||||
}
|
||||
}
|
||||
if (node.children) {
|
||||
for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
|
||||
var child = _a[_i];
|
||||
for (let _i = 0, _a = node.children; _i < _a.length; _i++) {
|
||||
const child = _a[_i]
|
||||
if (child.type === PenType.Line) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
_this.addDiv(child)
|
||||
}
|
||||
_this.addDiv(child);
|
||||
}
|
||||
}
|
||||
};
|
||||
_this.createPlayer = function () {
|
||||
_this.player.style.position = 'fixed';
|
||||
_this.player.style.outline = 'none';
|
||||
_this.player.style.top = '-99999px';
|
||||
_this.player.style.height = '40px';
|
||||
_this.player.style.padding = '10px 15px';
|
||||
_this.player.style.background = 'rgba(200,200,200,.1)';
|
||||
_this.player.style.display = 'flex';
|
||||
_this.player.style.alignItems = 'center';
|
||||
_this.player.style.userSelect = 'initial';
|
||||
_this.player.style.pointerEvents = 'initial';
|
||||
_this.player.style.zIndex = '1';
|
||||
_this.playBtn = document.createElement('i');
|
||||
_this.currentTime = document.createElement('span');
|
||||
_this.progress = document.createElement('div');
|
||||
_this.progressCurrent = document.createElement('div');
|
||||
_this.loop = document.createElement('i');
|
||||
var fullScreen = document.createElement('i');
|
||||
_this.playBtn.className = _this.options.playIcon;
|
||||
_this.playBtn.style.fontSize = '18px';
|
||||
_this.playBtn.style.lineHeight = '20px';
|
||||
_this.playBtn.style.cursor = 'pointer';
|
||||
_this.currentTime.style.padding = '0 10px';
|
||||
_this.currentTime.innerText = '0 / 0';
|
||||
_this.progress.style.position = 'relative';
|
||||
_this.progress.style.flexGrow = '1';
|
||||
_this.progress.style.top = '0';
|
||||
_this.progress.style.height = '4px';
|
||||
_this.progress.style.background = '#ccc';
|
||||
_this.progress.style.borderRadius = '2px';
|
||||
_this.progress.style.overflow = 'hidden';
|
||||
_this.progress.style.cursor = 'pointer';
|
||||
_this.progressCurrent.style.position = 'absolute';
|
||||
_this.progressCurrent.style.left = '0';
|
||||
_this.progressCurrent.style.top = '0';
|
||||
_this.progressCurrent.style.bottom = '0';
|
||||
_this.progressCurrent.style.width = '0';
|
||||
_this.progressCurrent.style.background = '#52c41a';
|
||||
_this.loop.style.margin = '0 10px';
|
||||
_this.loop.style.padding = '2px 5px';
|
||||
_this.loop.style.borderRadius = '2px';
|
||||
_this.loop.className = _this.options.loopIcon;
|
||||
_this.loop.style.fontSize = '18px';
|
||||
_this.loop.style.lineHeight = '20px';
|
||||
_this.loop.style.cursor = 'pointer';
|
||||
fullScreen.className = _this.options.fullScreenIcon;
|
||||
fullScreen.style.fontSize = '17px';
|
||||
fullScreen.style.lineHeight = '20px';
|
||||
fullScreen.style.cursor = 'pointer';
|
||||
_this.player.appendChild(_this.playBtn);
|
||||
_this.player.appendChild(_this.currentTime);
|
||||
_this.player.appendChild(_this.progress);
|
||||
_this.progress.appendChild(_this.progressCurrent);
|
||||
_this.player.appendChild(_this.loop);
|
||||
_this.player.appendChild(fullScreen);
|
||||
_this.player.style.position = 'fixed'
|
||||
_this.player.style.outline = 'none'
|
||||
_this.player.style.top = '-99999px'
|
||||
_this.player.style.height = '40px'
|
||||
_this.player.style.padding = '10px 15px'
|
||||
_this.player.style.background = 'rgba(200,200,200,.1)'
|
||||
_this.player.style.display = 'flex'
|
||||
_this.player.style.alignItems = 'center'
|
||||
_this.player.style.userSelect = 'initial'
|
||||
_this.player.style.pointerEvents = 'initial'
|
||||
_this.player.style.zIndex = '1'
|
||||
_this.playBtn = document.createElement('i')
|
||||
_this.currentTime = document.createElement('span')
|
||||
_this.progress = document.createElement('div')
|
||||
_this.progressCurrent = document.createElement('div')
|
||||
_this.loop = document.createElement('i')
|
||||
_this.myfullScreen = document.createElement('i')
|
||||
_this.playBtn.className = _this.options.playIcon
|
||||
_this.playBtn.style.fontSize = '18px'
|
||||
_this.playBtn.style.lineHeight = '20px'
|
||||
_this.playBtn.style.cursor = 'pointer'
|
||||
_this.currentTime.style.padding = '0 10px'
|
||||
_this.currentTime.innerText = '0 / 0'
|
||||
_this.progress.style.position = 'relative'
|
||||
_this.progress.style.flexGrow = '1'
|
||||
_this.progress.style.top = '0'
|
||||
_this.progress.style.height = '4px'
|
||||
_this.progress.style.background = '#ccc'
|
||||
_this.progress.style.borderRadius = '2px'
|
||||
_this.progress.style.overflow = 'hidden'
|
||||
_this.progress.style.cursor = 'pointer'
|
||||
_this.progressCurrent.style.position = 'absolute'
|
||||
_this.progressCurrent.style.left = '0'
|
||||
_this.progressCurrent.style.top = '0'
|
||||
_this.progressCurrent.style.bottom = '0'
|
||||
_this.progressCurrent.style.width = '0'
|
||||
_this.progressCurrent.style.background = '#52c41a'
|
||||
_this.loop.style.margin = '0 10px'
|
||||
_this.loop.style.padding = '2px 5px'
|
||||
_this.loop.style.borderRadius = '2px'
|
||||
_this.loop.className = _this.options.loopIcon
|
||||
_this.loop.style.fontSize = '18px'
|
||||
_this.loop.style.lineHeight = '20px'
|
||||
_this.loop.style.cursor = 'pointer'
|
||||
_this.myfullScreen.className = _this.options.fullScreenIcon
|
||||
_this.myfullScreen.style.fontSize = '17px'
|
||||
_this.myfullScreen.style.lineHeight = '20px'
|
||||
_this.myfullScreen.style.cursor = 'pointer'
|
||||
_this.player.appendChild(_this.playBtn)
|
||||
_this.player.appendChild(_this.currentTime)
|
||||
_this.player.appendChild(_this.progress)
|
||||
_this.progress.appendChild(_this.progressCurrent)
|
||||
_this.player.appendChild(_this.loop)
|
||||
_this.player.appendChild(_this.myfullScreen)
|
||||
_this.playBtn.onclick = function () {
|
||||
if (_this.media.paused) {
|
||||
_this.media.play();
|
||||
_this.playBtn.className = _this.options.pauseIcon;
|
||||
_this.media.play()
|
||||
_this.playBtn.className = _this.options.pauseIcon
|
||||
} else {
|
||||
_this.media.pause()
|
||||
_this.playBtn.className = _this.options.playIcon
|
||||
}
|
||||
else {
|
||||
_this.media.pause();
|
||||
_this.playBtn.className = _this.options.playIcon;
|
||||
}
|
||||
};
|
||||
_this.progress.onclick = function (e) {
|
||||
_this.media.currentTime = (e.offsetX / _this.progress.clientWidth) * _this.media.duration;
|
||||
};
|
||||
_this.media.currentTime = (e.offsetX / _this.progress.clientWidth) * _this.media.duration
|
||||
}
|
||||
_this.loop.onclick = function () {
|
||||
_this.media.loop = !_this.media.loop;
|
||||
_this.curNode.playLoop = _this.media.loop;
|
||||
_this.media.loop = !_this.media.loop
|
||||
_this.curNode.playLoop = _this.media.loop
|
||||
if (_this.media.loop) {
|
||||
_this.loop.style.background = '#ddd';
|
||||
_this.loop.style.background = '#ddd'
|
||||
} else {
|
||||
_this.loop.style.background = 'none'
|
||||
}
|
||||
}
|
||||
_this.myfullScreen.onclick = function () {
|
||||
_this.media.requestFullscreen()
|
||||
}
|
||||
else {
|
||||
_this.loop.style.background = 'none';
|
||||
}
|
||||
};
|
||||
fullScreen.onclick = function () {
|
||||
_this.media.requestFullscreen();
|
||||
};
|
||||
};
|
||||
_this.getMediaCurrent = function () {
|
||||
if (!_this.media) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
_this.currentTime.innerText =
|
||||
_this.formatSeconds(_this.media.currentTime) + ' / ' + _this.formatSeconds(_this.media.duration);
|
||||
_this.formatSeconds(_this.media.currentTime) + ' / ' + _this.formatSeconds(_this.media.duration)
|
||||
_this.progressCurrent.style.width =
|
||||
(_this.media.currentTime / _this.media.duration) * _this.progress.clientWidth + 'px';
|
||||
};
|
||||
(_this.media.currentTime / _this.media.duration) * _this.progress.clientWidth + 'px'
|
||||
}
|
||||
_this.addMedia = function (node, type) {
|
||||
var player = document.createElement('div');
|
||||
var current = document.createElement('div');
|
||||
var media = document.createElement(type);
|
||||
player.id = node.id;
|
||||
current.style.position = 'absolute';
|
||||
current.style.outline = 'none';
|
||||
current.style.left = '0';
|
||||
current.style.bottom = '0';
|
||||
current.style.height = '2px';
|
||||
current.style.background = '#52c41a';
|
||||
media.style.position = 'absolute';
|
||||
media.style.outline = 'none';
|
||||
media.style.left = '0';
|
||||
media.style.right = '0';
|
||||
media.style.top = '0';
|
||||
media.style.bottom = '0';
|
||||
let player = document.createElement('div')
|
||||
let current = document.createElement('div')
|
||||
let media = document.createElement(type)
|
||||
player.id = node.id
|
||||
current.style.position = 'absolute'
|
||||
current.style.outline = 'none'
|
||||
current.style.left = '0'
|
||||
current.style.bottom = '0'
|
||||
current.style.height = '2px'
|
||||
current.style.background = '#52c41a'
|
||||
media.style.position = 'absolute'
|
||||
media.style.outline = 'none'
|
||||
media.style.left = '0'
|
||||
media.style.right = '0'
|
||||
media.style.top = '0'
|
||||
media.style.bottom = '0'
|
||||
if (type === 'video') {
|
||||
media.style.width = node.rect.width + 'px';
|
||||
media.style.height = node.rect.height + 'px';
|
||||
media.style.width = node.rect.width + 'px'
|
||||
media.style.height = node.rect.height + 'px'
|
||||
}
|
||||
player.style.background = 'transparent';
|
||||
player.style.background = 'transparent'
|
||||
if (node.playType === 1) {
|
||||
media.autoplay = true;
|
||||
media.autoplay = true
|
||||
}
|
||||
media.loop = node.playLoop;
|
||||
media.loop = node.playLoop
|
||||
media.ontimeupdate = function () {
|
||||
current.style.width = (media.currentTime / media.duration) * node.rect.width + 'px';
|
||||
_this.getMediaCurrent();
|
||||
current.style.width = (media.currentTime / media.duration) * node.rect.width + 'px'
|
||||
_this.getMediaCurrent()
|
||||
if (_this.media === media) {
|
||||
if (node.playLoop) {
|
||||
media.loop = true;
|
||||
_this.loop.style.background = '#ddd';
|
||||
}
|
||||
else {
|
||||
media.loop = false;
|
||||
_this.loop.style.background = 'none';
|
||||
media.loop = true
|
||||
_this.loop.style.background = '#ddd'
|
||||
} else {
|
||||
media.loop = false
|
||||
_this.loop.style.background = 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
media.onended = function () {
|
||||
Store.set(_this.generateStoreKey('mediaEnd'), node);
|
||||
Store.set(_this.generateStoreKey('mediaEnd'), node)
|
||||
if (_this.media === media) {
|
||||
_this.playBtn.className = _this.options.playIcon;
|
||||
_this.playBtn.className = _this.options.playIcon
|
||||
}
|
||||
_this.play(node.nextPlay)
|
||||
}
|
||||
_this.play(node.nextPlay);
|
||||
};
|
||||
media.onloadedmetadata = function () {
|
||||
_this.getMediaCurrent();
|
||||
};
|
||||
media.src = node[type];
|
||||
player.appendChild(media);
|
||||
player.appendChild(current);
|
||||
_this.getMediaCurrent()
|
||||
}
|
||||
media.src = node[type]
|
||||
player.appendChild(media)
|
||||
player.appendChild(current)
|
||||
if (type === 'video') {
|
||||
videos[node.id] = {
|
||||
player: player,
|
||||
current: current,
|
||||
media: media,
|
||||
};
|
||||
media: media
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
_this.audios[node.id] = {
|
||||
player: player,
|
||||
current: current,
|
||||
media: media,
|
||||
};
|
||||
media: media
|
||||
}
|
||||
}
|
||||
_this.canvas.appendChild(player)
|
||||
setTimeout(() => {
|
||||
player = null
|
||||
current = null
|
||||
media = null
|
||||
}, 100)
|
||||
return player
|
||||
}
|
||||
_this.canvas.appendChild(player);
|
||||
return player;
|
||||
};
|
||||
_this.setElemPosition = function (node, elem) {
|
||||
if (!elem) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
elem.style.position = 'absolute';
|
||||
elem.style.outline = 'none';
|
||||
elem.style.left = node.rect.x + _this.data.x + 'px';
|
||||
elem.style.top = node.rect.y + _this.data.y + 'px';
|
||||
elem.style.width = node.rect.width + 'px';
|
||||
elem.style.height = node.rect.height + 'px';
|
||||
elem.style.display = node.visible ? 'inline' : 'none'; // 是否隐藏元素
|
||||
elem.style.position = 'absolute'
|
||||
elem.style.outline = 'none'
|
||||
elem.style.left = node.rect.x + _this.data.x + 'px'
|
||||
elem.style.top = node.rect.y + _this.data.y + 'px'
|
||||
elem.style.width = node.rect.width + 'px'
|
||||
elem.style.height = node.rect.height + 'px'
|
||||
elem.style.display = node.visible ? 'inline' : 'none' // 是否隐藏元素
|
||||
if (node.rotate || node.offsetRotate) {
|
||||
elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
|
||||
elem.style.transform = 'rotate(' + (node.rotate + node.offsetRotate) + 'deg)'
|
||||
}
|
||||
if (node.video && videos[node.id] && videos[node.id].media) {
|
||||
videos[node.id].media.style.width = '100%';
|
||||
videos[node.id].media.style.height = '100%';
|
||||
videos[node.id].media.style.width = '100%'
|
||||
videos[node.id].media.style.height = '100%'
|
||||
}
|
||||
if (_this.data.locked > Lock.None || node.locked > Lock.None) {
|
||||
elem.style.userSelect = 'initial';
|
||||
elem.style.pointerEvents = 'initial';
|
||||
elem.style.userSelect = 'initial'
|
||||
elem.style.pointerEvents = 'initial'
|
||||
} else {
|
||||
elem.style.userSelect = 'none'
|
||||
elem.style.pointerEvents = 'none'
|
||||
}
|
||||
else {
|
||||
elem.style.userSelect = 'none';
|
||||
elem.style.pointerEvents = 'none';
|
||||
}
|
||||
};
|
||||
_this.removeDiv = function (item) {
|
||||
if (_this.curNode && item.id === _this.curNode.id) {
|
||||
_this.curNode = undefined;
|
||||
_this.media = undefined;
|
||||
_this.player.style.top = '-99999px';
|
||||
_this.curNode = undefined
|
||||
_this.media = undefined
|
||||
_this.player.style.top = '-99999px'
|
||||
}
|
||||
if (item.audio) {
|
||||
_this.canvas.removeChild(_this.audios[item.id].player);
|
||||
_this.audios[item.id] = undefined;
|
||||
_this.canvas.removeChild(_this.audios[item.id].player)
|
||||
_this.audios[item.id] = undefined
|
||||
}
|
||||
if (item.video) {
|
||||
_this.canvas.removeChild(videos[item.id].player);
|
||||
videos[item.id] = undefined;
|
||||
_this.canvas.removeChild(videos[item.id].player)
|
||||
videos[item.id] = undefined
|
||||
}
|
||||
if (item.iframe) {
|
||||
_this.canvas.removeChild(_this.iframes[item.id]);
|
||||
_this.iframes[item.id] = undefined;
|
||||
_this.canvas.removeChild(_this.iframes[item.id])
|
||||
_this.iframes[item.id] = undefined
|
||||
}
|
||||
if (item.elementId) {
|
||||
_this.canvas.removeChild(_this.elements[item.id]);
|
||||
_this.elements[item.id] = undefined;
|
||||
item.elementId = '';
|
||||
_this.canvas.removeChild(_this.elements[item.id])
|
||||
_this.elements[item.id] = undefined
|
||||
item.elementId = ''
|
||||
}
|
||||
if (item.gif) {
|
||||
_this.canvas.removeChild(_this.gifs[item.id]);
|
||||
_this.gifs[item.id] = undefined;
|
||||
_this.canvas.removeChild(_this.gifs[item.id])
|
||||
_this.gifs[item.id] = undefined
|
||||
}
|
||||
if (item.children) {
|
||||
for (var _i = 0, _a = item.children; _i < _a.length; _i++) {
|
||||
var child = _a[_i];
|
||||
for (let _i = 0, _a = item.children; _i < _a.length; _i++) {
|
||||
const child = _a[_i]
|
||||
if (child.type === PenType.Line) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
_this.removeDiv(child)
|
||||
}
|
||||
_this.removeDiv(child);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!_this.options.playIcon) {
|
||||
_this.options.playIcon = 't-icon t-play';
|
||||
_this.options.playIcon = 't-icon t-play'
|
||||
}
|
||||
if (!_this.options.pauseIcon) {
|
||||
_this.options.pauseIcon = 't-icon t-pause';
|
||||
_this.options.pauseIcon = 't-icon t-pause'
|
||||
}
|
||||
if (!_this.options.fullScreenIcon) {
|
||||
_this.options.fullScreenIcon = 't-icon t-full-screen';
|
||||
_this.options.fullScreenIcon = 't-icon t-full-screen'
|
||||
}
|
||||
if (!_this.options.loopIcon) {
|
||||
_this.options.loopIcon = 't-icon t-loop';
|
||||
_this.options.loopIcon = 't-icon t-loop'
|
||||
}
|
||||
_this.canvas.style.position = 'absolute';
|
||||
_this.canvas.style.left = '0';
|
||||
_this.canvas.style.top = '0';
|
||||
_this.canvas.style.outline = 'none';
|
||||
_this.canvas.style.background = 'transparent';
|
||||
parentElem.appendChild(_this.canvas);
|
||||
parentElem.appendChild(_this.player);
|
||||
_this.createPlayer();
|
||||
_this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
|
||||
_this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:removeDiv'), _this.removeDiv);
|
||||
_this.canvas.style.position = 'absolute'
|
||||
_this.canvas.style.left = '0'
|
||||
_this.canvas.style.top = '0'
|
||||
_this.canvas.style.outline = 'none'
|
||||
_this.canvas.style.background = 'transparent'
|
||||
parentElem.appendChild(_this.canvas)
|
||||
parentElem.appendChild(_this.player)
|
||||
_this.createPlayer()
|
||||
_this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv)
|
||||
_this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:removeDiv'), _this.removeDiv)
|
||||
_this.subcribePlay = Store.subscribe(_this.generateStoreKey('LT:play'), function (e) {
|
||||
_this.playOne(e.pen, e.pause);
|
||||
});
|
||||
_this.playOne(e.pen, e.pause)
|
||||
})
|
||||
_this.subcribeNode = Store.subscribe(_this.generateStoreKey('LT:activeNode'), function (node) {
|
||||
if (!node || (!node.video && !node.audio)) {
|
||||
_this.player.style.top = '-99999px';
|
||||
return;
|
||||
_this.player.style.top = '-99999px'
|
||||
return
|
||||
}
|
||||
if (node.audio && _this.audios[node.id]) {
|
||||
_this.media = _this.audios[node.id].media;
|
||||
_this.media = _this.audios[node.id].media
|
||||
} else if (node.video && videos[node.id]) {
|
||||
_this.media = videos[node.id].media
|
||||
} else {
|
||||
return
|
||||
}
|
||||
else if (node.video && videos[node.id]) {
|
||||
_this.media = videos[node.id].media;
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
_this.curNode = node;
|
||||
var rect = _this.parentElem.getBoundingClientRect();
|
||||
_this.player.style.top = rect.top + _this.parentElem.clientHeight - 40 + 'px';
|
||||
_this.player.style.left = rect.left + 'px';
|
||||
_this.player.style.width = _this.parentElem.clientWidth + 'px';
|
||||
_this.getMediaCurrent();
|
||||
_this.curNode = node
|
||||
const rect = _this.parentElem.getBoundingClientRect()
|
||||
_this.player.style.top = rect.top + _this.parentElem.clientHeight - 40 + 'px'
|
||||
_this.player.style.left = rect.left + 'px'
|
||||
_this.player.style.width = _this.parentElem.clientWidth + 'px'
|
||||
_this.getMediaCurrent()
|
||||
if (_this.media.paused) {
|
||||
_this.playBtn.className = _this.options.playIcon;
|
||||
_this.playBtn.className = _this.options.playIcon
|
||||
} else {
|
||||
_this.playBtn.className = _this.options.pauseIcon
|
||||
}
|
||||
else {
|
||||
_this.playBtn.className = _this.options.pauseIcon;
|
||||
}
|
||||
});
|
||||
document.addEventListener('fullscreenchange', function (e) {
|
||||
})
|
||||
_this.fullscreenchange = function (e) {
|
||||
if (!_this.media) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (document.fullscreen) {
|
||||
_this.media.controls = true;
|
||||
_this.media.style.userSelect = 'initial';
|
||||
_this.media.style.pointerEvents = 'initial';
|
||||
_this.media.controls = true
|
||||
_this.media.style.userSelect = 'initial'
|
||||
_this.media.style.pointerEvents = 'initial'
|
||||
} else {
|
||||
_this.media.style.userSelect = 'none'
|
||||
_this.media.style.pointerEvents = 'none'
|
||||
_this.media.controls = false
|
||||
}
|
||||
else {
|
||||
_this.media.style.userSelect = 'none';
|
||||
_this.media.style.pointerEvents = 'none';
|
||||
_this.media.controls = false;
|
||||
}
|
||||
});
|
||||
return _this;
|
||||
document.addEventListener('fullscreenchange', _this.fullscreenchange)
|
||||
return _this
|
||||
}
|
||||
DivLayer.prototype.play = function (idOrTag, pause) {
|
||||
var _this = this;
|
||||
const _this = this
|
||||
if (!idOrTag) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
var pens = find(idOrTag, this.data.pens);
|
||||
const pens = find(idOrTag, this.data.pens)
|
||||
pens.forEach(function (item) {
|
||||
_this.playOne(item, pause);
|
||||
});
|
||||
};
|
||||
_this.playOne(item, pause)
|
||||
})
|
||||
}
|
||||
DivLayer.prototype.playOne = function (item, pause) {
|
||||
if (item.audio && this.audios[item.id] && this.audios[item.id].media) {
|
||||
if (pause) {
|
||||
this.audios[item.id].media.pause();
|
||||
this.audios[item.id].media.pause()
|
||||
} else if (this.audios[item.id].media.paused) {
|
||||
this.audios[item.id].media.play()
|
||||
}
|
||||
else if (this.audios[item.id].media.paused) {
|
||||
this.audios[item.id].media.play();
|
||||
}
|
||||
}
|
||||
else if (item.video && videos[item.id].media) {
|
||||
} else if (item.video && videos[item.id].media) {
|
||||
if (pause) {
|
||||
videos[item.id].media.pause();
|
||||
}
|
||||
else if (videos[item.id].media.paused) {
|
||||
videos[item.id].media.play();
|
||||
videos[item.id].media.pause()
|
||||
} else if (videos[item.id].media.paused) {
|
||||
videos[item.id].media.play()
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
DivLayer.prototype.addIframe = function (node) {
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.scrolling = 'no';
|
||||
iframe.frameBorder = '0';
|
||||
iframe.src = node.iframe;
|
||||
this.iframes[node.id] = iframe;
|
||||
this.canvas.appendChild(iframe);
|
||||
return iframe;
|
||||
};
|
||||
const iframe = document.createElement('iframe')
|
||||
iframe.scrolling = 'no'
|
||||
iframe.frameBorder = '0'
|
||||
iframe.src = node.iframe
|
||||
this.iframes[node.id] = iframe
|
||||
this.canvas.appendChild(iframe)
|
||||
return iframe
|
||||
}
|
||||
DivLayer.prototype.addGif = function (node) {
|
||||
this.gifs[node.id] = node.img;
|
||||
this.canvas.appendChild(node.img);
|
||||
return node.img;
|
||||
};
|
||||
this.gifs[node.id] = node.img
|
||||
this.canvas.appendChild(node.img)
|
||||
}
|
||||
DivLayer.prototype.clear = function (shallow) {
|
||||
this.canvas.innerHTML = '';
|
||||
this.audios = {};
|
||||
videos = {};
|
||||
this.iframes = {};
|
||||
this.elements = {};
|
||||
this.gifs = {};
|
||||
this.canvas.innerHTML = ''
|
||||
this.audios = {}
|
||||
videos = {}
|
||||
this.iframes = {}
|
||||
this.elements = {}
|
||||
this.gifs = {}
|
||||
if (!shallow) {
|
||||
// tslint:disable-next-line:forin
|
||||
for (var key in images) {
|
||||
delete images[key];
|
||||
for (const key in images) {
|
||||
delete images[key]
|
||||
}
|
||||
}
|
||||
this.player.style.top = '-99999px';
|
||||
};
|
||||
this.player.style.top = '-99999px'
|
||||
}
|
||||
DivLayer.prototype.formatSeconds = function (seconds) {
|
||||
var h = Math.floor(seconds / 3600);
|
||||
var m = Math.floor(seconds / 60) % 60;
|
||||
var s = Math.floor(seconds % 60);
|
||||
var txt = s + '';
|
||||
const h = Math.floor(seconds / 3600)
|
||||
const m = Math.floor(seconds / 60) % 60
|
||||
const s = Math.floor(seconds % 60)
|
||||
let txt = s + ''
|
||||
if (m) {
|
||||
txt = m + ':' + s;
|
||||
}
|
||||
else {
|
||||
txt = '0:' + s;
|
||||
txt = m + ':' + s
|
||||
} else {
|
||||
txt = '0:' + s
|
||||
}
|
||||
if (h) {
|
||||
txt = h + ':' + m + ':' + s;
|
||||
txt = h + ':' + m + ':' + s
|
||||
}
|
||||
return txt
|
||||
}
|
||||
return txt;
|
||||
};
|
||||
DivLayer.prototype.resize = function (size) {
|
||||
if (size) {
|
||||
this.canvas.style.width = size.width + 'px';
|
||||
this.canvas.style.height = size.height + 'px';
|
||||
}
|
||||
else {
|
||||
this.canvas.style.width = size.width + 'px'
|
||||
this.canvas.style.height = size.height + 'px'
|
||||
} else {
|
||||
if (this.options.width && this.options.width !== 'auto') {
|
||||
this.canvas.style.width = this.options.width + 'px';
|
||||
}
|
||||
else {
|
||||
this.canvas.style.width = this.parentElem.clientWidth + 'px';
|
||||
this.canvas.style.width = this.options.width + 'px'
|
||||
} else {
|
||||
this.canvas.style.width = this.parentElem.clientWidth + 'px'
|
||||
}
|
||||
if (this.options.height && this.options.height !== 'auto') {
|
||||
this.canvas.style.height = this.options.height + 'px';
|
||||
}
|
||||
else {
|
||||
this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px';
|
||||
this.canvas.style.height = this.options.height + 'px'
|
||||
} else {
|
||||
this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
DivLayer.prototype.render = function () {
|
||||
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
for (let _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
if (!item.getTID()) {
|
||||
item.setTID(this.TID);
|
||||
item.setTID(this.TID)
|
||||
}
|
||||
this.addDiv(item)
|
||||
}
|
||||
this.addDiv(item);
|
||||
}
|
||||
};
|
||||
DivLayer.prototype.destroy = function () {
|
||||
_super.prototype.destroy.call(this);
|
||||
this.clear();
|
||||
this.subcribeDiv.unsubscribe();
|
||||
this.subcribeNode.unsubscribe();
|
||||
this.subcribePlay.unsubscribe();
|
||||
};
|
||||
return DivLayer;
|
||||
}(Layer));
|
||||
export { DivLayer };
|
||||
_super.prototype.destroy.call(this)
|
||||
this.clear()
|
||||
this.subcribeDiv.unsubscribe()
|
||||
this.subcribeNode.unsubscribe()
|
||||
this.subcribePlay.unsubscribe()
|
||||
this.parentElem.removeChild(this.canvas)
|
||||
this.parentElem.removeChild(this.player)
|
||||
document.removeEventListener('fullscreenchange', this.fullscreenchange)
|
||||
Object.keys(this.audios).forEach(key => {
|
||||
this.audios[key] = null
|
||||
})
|
||||
this.myfullScreen.onclick = null
|
||||
this.playBtn.onclick = null
|
||||
this.progress.onclick = null
|
||||
this.loop.onclick = null
|
||||
this.subcribeDiv = null
|
||||
this.subcribeNode = null
|
||||
this.subcribePlay = null
|
||||
this.parentElem = null
|
||||
this.options = null
|
||||
this.canvas = null
|
||||
this.player = null
|
||||
this.audios = null
|
||||
this.iframes = null
|
||||
this.elements = null
|
||||
this.gifs = null
|
||||
this.playBtn = null
|
||||
this.currentTime = null
|
||||
this.progress = null
|
||||
this.progressCurrent = null
|
||||
this.loop = null
|
||||
videos = null
|
||||
this.iframes = null
|
||||
this.elements = null
|
||||
this.gifs = null
|
||||
this.addDiv = null
|
||||
this.createPlayer = null
|
||||
this.setElemPosition = null
|
||||
}
|
||||
return DivLayer
|
||||
}(Layer))
|
||||
export { DivLayer }
|
||||
// # sourceMappingURL=divLayer.js.map
|
||||
@@ -1,211 +1,211 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
import { PenType } from './models/pen'
|
||||
import { Store } from 'le5le-store'
|
||||
import { Lock } from './models/status'
|
||||
import { Layer } from './layer'
|
||||
import { rgba } from './utils/math'
|
||||
const __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b }) ||
|
||||
function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
|
||||
return extendStatics(d, b)
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
import { PenType } from './models/pen';
|
||||
import { Store } from 'le5le-store';
|
||||
import { Lock } from './models/status';
|
||||
import { Layer } from './layer';
|
||||
import { rgba } from './utils/math';
|
||||
var HoverLayer = /** @class */ (function (_super) {
|
||||
__extends(HoverLayer, _super);
|
||||
extendStatics(d, b)
|
||||
function __ () { this.constructor = d }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
|
||||
}
|
||||
})()
|
||||
const HoverLayer = /** @class */ (function (_super) {
|
||||
__extends(HoverLayer, _super)
|
||||
function HoverLayer (options, TID) {
|
||||
if (options === void 0) { options = {}; }
|
||||
var _this = _super.call(this, TID) || this;
|
||||
_this.options = options;
|
||||
_this.hoverAnchorIndex = -1;
|
||||
_this.dockLineX = 0;
|
||||
_this.dockLineY = 0;
|
||||
Store.set(_this.generateStoreKey('LT:HoverLayer'), _this);
|
||||
return _this;
|
||||
if (options === void 0) { options = {} }
|
||||
const _this = _super.call(this, TID) || this
|
||||
_this.options = options
|
||||
_this.hoverAnchorIndex = -1
|
||||
_this.dockLineX = 0
|
||||
_this.dockLineY = 0
|
||||
Store.set(_this.generateStoreKey('LT:HoverLayer'), _this)
|
||||
return _this
|
||||
}
|
||||
HoverLayer.prototype.lineTo = function (to, toArrow) {
|
||||
if (toArrow === void 0) { toArrow = 'triangleSolid'; }
|
||||
if (toArrow === void 0) { toArrow = 'triangleSolid' }
|
||||
if (!this.line || this.line.locked) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.line.setTo(to, toArrow);
|
||||
this.line.setTo(to, toArrow)
|
||||
if (this.line.from.id || this.line.to.id) {
|
||||
this.line.calcControlPoints();
|
||||
this.line.calcControlPoints()
|
||||
}
|
||||
Store.set(this.generateStoreKey('pts-') + this.line.id, undefined)
|
||||
Store.set(this.generateStoreKey('LT:updateLines'), [this.line])
|
||||
}
|
||||
Store.set(this.generateStoreKey('pts-') + this.line.id, undefined);
|
||||
Store.set(this.generateStoreKey('LT:updateLines'), [this.line]);
|
||||
};
|
||||
HoverLayer.prototype.lineFrom = function (from) {
|
||||
if (this.line.locked) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.line.setFrom(from, this.line.fromArrow);
|
||||
this.line.setFrom(from, this.line.fromArrow)
|
||||
if (this.line.from.id || this.line.to.id) {
|
||||
this.line.calcControlPoints();
|
||||
this.line.calcControlPoints()
|
||||
}
|
||||
Store.set(this.generateStoreKey('pts-') + this.line.id, undefined)
|
||||
Store.set(this.generateStoreKey('LT:updateLines'), [this.line])
|
||||
}
|
||||
Store.set(this.generateStoreKey('pts-') + this.line.id, undefined);
|
||||
Store.set(this.generateStoreKey('LT:updateLines'), [this.line]);
|
||||
};
|
||||
HoverLayer.prototype.render = function (ctx) {
|
||||
var _this = this;
|
||||
const _this = this
|
||||
if (this.data.locked === Lock.NoEvent || this.options.hoverColor === 'transparent') {
|
||||
return;
|
||||
return
|
||||
}
|
||||
ctx.fillStyle = this.options.hoverColor;
|
||||
ctx.save();
|
||||
ctx.fillStyle = this.options.hoverColor
|
||||
ctx.save()
|
||||
// anchors
|
||||
if (this.options.alwaysAnchor) {
|
||||
this.data.pens.forEach(function (pen) {
|
||||
if (pen.type === PenType.Line) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (pen.hideAnchor) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
for (var _i = 0, _a = pen.rotatedAnchors; _i < _a.length; _i++) {
|
||||
var anchor = _a[_i];
|
||||
for (let _i = 0, _a = pen.rotatedAnchors; _i < _a.length; _i++) {
|
||||
const anchor = _a[_i]
|
||||
if (anchor.hidden) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor;
|
||||
ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor
|
||||
ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
if (_this.options.autoAnchor) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(pen.rect.center.x, pen.rect.center.y, pen.rect.center.radius || _this.options.anchorRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = _this.options.hoverColor;
|
||||
ctx.fillStyle = _this.options.anchorFillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.arc(pen.rect.center.x, pen.rect.center.y, pen.rect.center.radius || _this.options.anchorRadius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = _this.options.hoverColor
|
||||
ctx.fillStyle = _this.options.anchorFillStyle
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
ctx.restore();
|
||||
ctx.restore()
|
||||
if (this.node && !this.data.locked) {
|
||||
if (!this.node.getTID()) {
|
||||
this.node.setTID(this.TID);
|
||||
this.node.setTID(this.TID)
|
||||
}
|
||||
this.root = this.getRoot(this.node) || this.node;
|
||||
this.root = this.getRoot(this.node) || this.node
|
||||
if (this.root) {
|
||||
ctx.save();
|
||||
ctx.strokeStyle = this.options.dragColor;
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.save()
|
||||
ctx.strokeStyle = this.options.dragColor
|
||||
ctx.globalAlpha = 0.2
|
||||
if (this.root.rotate) {
|
||||
ctx.translate(this.root.rect.center.x, this.root.rect.center.y);
|
||||
ctx.rotate(((this.root.rotate + this.root.offsetRotate) * Math.PI) / 180);
|
||||
ctx.translate(-this.root.rect.center.x, -this.root.rect.center.y);
|
||||
ctx.translate(this.root.rect.center.x, this.root.rect.center.y)
|
||||
ctx.rotate(((this.root.rotate + this.root.offsetRotate) * Math.PI) / 180)
|
||||
ctx.translate(-this.root.rect.center.x, -this.root.rect.center.y)
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height);
|
||||
ctx.restore();
|
||||
ctx.beginPath()
|
||||
ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height)
|
||||
ctx.restore()
|
||||
}
|
||||
if (!this.options.hideAnchor) {
|
||||
for (var i = 0; i < this.node.rotatedAnchors.length; ++i) {
|
||||
for (let i = 0; i < this.node.rotatedAnchors.length; ++i) {
|
||||
if (this.node.locked ||
|
||||
this.node.hideAnchor ||
|
||||
(this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || this.options.anchorRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = this.node.rotatedAnchors[i].strokeStyle || this.options.hoverColor;
|
||||
ctx.fillStyle = this.node.rotatedAnchors[i].fillStyle || this.options.anchorFillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || this.options.anchorRadius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = this.node.rotatedAnchors[i].strokeStyle || this.options.hoverColor
|
||||
ctx.fillStyle = this.node.rotatedAnchors[i].fillStyle || this.options.anchorFillStyle
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
if (this.options.autoAnchor) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.node.rect.center.x, this.node.rect.center.y, this.node.rect.center.radius || this.options.anchorRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = this.options.hoverColor;
|
||||
ctx.fillStyle = this.options.anchorFillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.node.rect.center.x, this.node.rect.center.y, this.node.rect.center.radius || this.options.anchorRadius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = this.options.hoverColor
|
||||
ctx.fillStyle = this.options.anchorFillStyle
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
if (this.line && !this.data.locked) {
|
||||
this.root = this.getRoot(this.line);
|
||||
this.root = this.getRoot(this.line)
|
||||
if (this.root) {
|
||||
ctx.save();
|
||||
ctx.strokeStyle = this.options.dragColor;
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.save()
|
||||
ctx.strokeStyle = this.options.dragColor
|
||||
ctx.globalAlpha = 0.2
|
||||
if (this.root.rotate) {
|
||||
ctx.translate(this.root.rect.center.x, this.root.rect.center.y);
|
||||
ctx.rotate(((this.root.rotate + this.root.offsetRotate) * Math.PI) / 180);
|
||||
ctx.translate(-this.root.rect.center.x, -this.root.rect.center.y);
|
||||
ctx.translate(this.root.rect.center.x, this.root.rect.center.y)
|
||||
ctx.rotate(((this.root.rotate + this.root.offsetRotate) * Math.PI) / 180)
|
||||
ctx.translate(-this.root.rect.center.x, -this.root.rect.center.y)
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height);
|
||||
ctx.restore();
|
||||
ctx.beginPath()
|
||||
ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height)
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
if (this.dockAnchor) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = this.options.dockStrokeStyle;
|
||||
ctx.fillStyle = this.options.dockFillStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = this.options.dockStrokeStyle
|
||||
ctx.fillStyle = this.options.dockFillStyle
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
}
|
||||
if (this.hoverLineCP) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.strokeStyle = rgba(0.5, this.options.hoverColor);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeStyle = rgba(0.5, this.options.hoverColor)
|
||||
ctx.lineWidth = 1
|
||||
if (this.dockLineX > 0) {
|
||||
var size = Store.get(this.generateStoreKey('LT:size'));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(this.dockLineX, -this.data.y);
|
||||
ctx.lineTo(this.dockLineX, size.height);
|
||||
ctx.stroke();
|
||||
var size = Store.get(this.generateStoreKey('LT:size'))
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(this.dockLineX, -this.data.y)
|
||||
ctx.lineTo(this.dockLineX, size.height)
|
||||
ctx.stroke()
|
||||
}
|
||||
if (this.dockLineY > 0) {
|
||||
var size = Store.get(this.generateStoreKey('LT:size'));
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-this.data.x, this.dockLineY);
|
||||
ctx.lineTo(size.width, this.dockLineY);
|
||||
ctx.stroke();
|
||||
var size = Store.get(this.generateStoreKey('LT:size'))
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(-this.data.x, this.dockLineY)
|
||||
ctx.lineTo(size.width, this.dockLineY)
|
||||
ctx.stroke()
|
||||
}
|
||||
// Select nodes by drag.
|
||||
if (this.dragRect) {
|
||||
ctx.fillStyle = rgba(0.2, this.options.dragColor);
|
||||
ctx.strokeStyle = this.options.dragColor;
|
||||
ctx.beginPath();
|
||||
ctx.strokeRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
|
||||
ctx.fillRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
|
||||
ctx.fillStyle = rgba(0.2, this.options.dragColor)
|
||||
ctx.strokeStyle = this.options.dragColor
|
||||
ctx.beginPath()
|
||||
ctx.strokeRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height)
|
||||
ctx.fillRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height)
|
||||
}
|
||||
}
|
||||
};
|
||||
HoverLayer.prototype.getRoot = function (pen) {
|
||||
if (!pen.parentId) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
for (let _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
if (item.id === pen.parentId) {
|
||||
var n = this.getRoot(item);
|
||||
return n ? n : item;
|
||||
const n = this.getRoot(item)
|
||||
return n || item
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return null
|
||||
}
|
||||
HoverLayer.prototype.clear = function () {
|
||||
this.node = undefined;
|
||||
this.line = undefined;
|
||||
};
|
||||
return HoverLayer;
|
||||
}(Layer));
|
||||
export { HoverLayer };
|
||||
this.node = undefined
|
||||
this.line = undefined
|
||||
}
|
||||
return HoverLayer
|
||||
}(Layer))
|
||||
export { HoverLayer }
|
||||
// # sourceMappingURL=hoverLayer.js.map
|
||||
@@ -1,19 +1,20 @@
|
||||
import { Store } from 'le5le-store';
|
||||
var Layer = /** @class */ (function () {
|
||||
import { Store } from 'le5le-store'
|
||||
const Layer = /** @class */ (function () {
|
||||
function Layer (TID) {
|
||||
var _this = this;
|
||||
this.TID = TID;
|
||||
const _this = this
|
||||
this.TID = TID
|
||||
this.subcribe = Store.subscribe(this.generateStoreKey('topology-data'), function (val) {
|
||||
_this.data = val;
|
||||
});
|
||||
_this.data = val
|
||||
})
|
||||
}
|
||||
Layer.prototype.generateStoreKey = function (key) {
|
||||
return this.TID + "-" + key;
|
||||
};
|
||||
return this.TID + '-' + key
|
||||
}
|
||||
Layer.prototype.destroy = function () {
|
||||
this.subcribe.unsubscribe();
|
||||
};
|
||||
return Layer;
|
||||
}());
|
||||
export { Layer };
|
||||
this.subcribe.unsubscribe()
|
||||
this.subcribe = null
|
||||
}
|
||||
return Layer
|
||||
}())
|
||||
export { Layer }
|
||||
// # sourceMappingURL=layer.js.map
|
||||
@@ -1,24 +1,23 @@
|
||||
import { Store } from 'le5le-store';
|
||||
import { Store } from 'le5le-store'
|
||||
export function circleSolid (ctx, from, to, size, fillStyle) {
|
||||
size += ctx.lineWidth * 3;
|
||||
var r = size / 2;
|
||||
size += ctx.lineWidth * 3
|
||||
const r = size / 2
|
||||
if (ctx.lineWidth < 2) {
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineWidth = 2
|
||||
}
|
||||
ctx.translate(to.x, to.y);
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
|
||||
ctx.translate(-to.x, -to.y - ctx.lineWidth / 10);
|
||||
ctx.arc(to.x - r - ctx.lineWidth / 2, to.y, r, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
ctx.translate(to.x, to.y)
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
|
||||
ctx.translate(-to.x, -to.y - ctx.lineWidth / 10)
|
||||
ctx.arc(to.x - r - ctx.lineWidth / 2, to.y, r, 0, 2 * Math.PI)
|
||||
ctx.stroke()
|
||||
if (fillStyle) {
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillStyle = fillStyle
|
||||
} else {
|
||||
ctx.fillStyle = ctx.strokeStyle
|
||||
}
|
||||
else {
|
||||
ctx.fillStyle = ctx.strokeStyle;
|
||||
}
|
||||
ctx.fill();
|
||||
ctx.fill()
|
||||
}
|
||||
export function circle (ctx, from, to, size) {
|
||||
circleSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff');
|
||||
circleSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff')
|
||||
}
|
||||
// # sourceMappingURL=circle.js.map
|
||||
@@ -1,32 +1,31 @@
|
||||
import { Store } from 'le5le-store';
|
||||
import { Store } from 'le5le-store'
|
||||
export function diamondSolid (ctx, from, to, size, fillStyle) {
|
||||
size += ctx.lineWidth * 3;
|
||||
var r = size / 2;
|
||||
var arrowWidth = ctx.lineWidth / 10;
|
||||
size += ctx.lineWidth * 3
|
||||
const r = size / 2
|
||||
let arrowWidth = ctx.lineWidth / 10
|
||||
if (ctx.lineWidth < 2) {
|
||||
ctx.lineWidth = 2;
|
||||
arrowWidth = 0;
|
||||
ctx.lineWidth = 2
|
||||
arrowWidth = 0
|
||||
}
|
||||
ctx.translate(to.x, to.y);
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
|
||||
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y);
|
||||
ctx.moveTo(to.x, to.y + arrowWidth);
|
||||
ctx.lineTo(to.x, to.y - arrowWidth);
|
||||
ctx.lineTo(to.x - r, to.y - r / 2);
|
||||
ctx.lineTo(to.x - size, to.y - arrowWidth);
|
||||
ctx.lineTo(to.x - size, to.y + arrowWidth);
|
||||
ctx.lineTo(to.x - r, to.y + r / 2);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
ctx.translate(to.x, to.y)
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
|
||||
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y)
|
||||
ctx.moveTo(to.x, to.y + arrowWidth)
|
||||
ctx.lineTo(to.x, to.y - arrowWidth)
|
||||
ctx.lineTo(to.x - r, to.y - r / 2)
|
||||
ctx.lineTo(to.x - size, to.y - arrowWidth)
|
||||
ctx.lineTo(to.x - size, to.y + arrowWidth)
|
||||
ctx.lineTo(to.x - r, to.y + r / 2)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
if (fillStyle) {
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillStyle = fillStyle
|
||||
} else {
|
||||
ctx.fillStyle = ctx.strokeStyle
|
||||
}
|
||||
else {
|
||||
ctx.fillStyle = ctx.strokeStyle;
|
||||
}
|
||||
ctx.fill();
|
||||
ctx.fill()
|
||||
}
|
||||
export function diamond (ctx, from, to, size) {
|
||||
diamondSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff');
|
||||
diamondSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff')
|
||||
}
|
||||
// # sourceMappingURL=diamond.js.map
|
||||
@@ -1,42 +1,40 @@
|
||||
export function line (ctx, from, to, size) {
|
||||
size += ctx.lineWidth * 3;
|
||||
ctx.translate(to.x, to.y);
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
|
||||
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5);
|
||||
ctx.moveTo(to.x, to.y);
|
||||
ctx.lineTo(to.x - size, to.y - size / 3);
|
||||
ctx.moveTo(to.x, to.y);
|
||||
ctx.lineTo(to.x - size, to.y + size / 3);
|
||||
ctx.stroke();
|
||||
size += ctx.lineWidth * 3
|
||||
ctx.translate(to.x, to.y)
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
|
||||
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5)
|
||||
ctx.moveTo(to.x, to.y)
|
||||
ctx.lineTo(to.x - size, to.y - size / 3)
|
||||
ctx.moveTo(to.x, to.y)
|
||||
ctx.lineTo(to.x - size, to.y + size / 3)
|
||||
ctx.stroke()
|
||||
}
|
||||
export function lineUp (ctx, from, to, size) {
|
||||
size += ctx.lineWidth * 3;
|
||||
ctx.translate(to.x, to.y);
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
|
||||
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5);
|
||||
size += ctx.lineWidth * 3
|
||||
ctx.translate(to.x, to.y)
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
|
||||
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5)
|
||||
if (to.x > from.x) {
|
||||
ctx.moveTo(to.x, to.y);
|
||||
ctx.lineTo(to.x - size, to.y - size / 3);
|
||||
ctx.moveTo(to.x, to.y)
|
||||
ctx.lineTo(to.x - size, to.y - size / 3)
|
||||
} else {
|
||||
ctx.moveTo(to.x, to.y)
|
||||
ctx.lineTo(to.x - size, to.y + size / 3)
|
||||
}
|
||||
else {
|
||||
ctx.moveTo(to.x, to.y);
|
||||
ctx.lineTo(to.x - size, to.y + size / 3);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.stroke()
|
||||
}
|
||||
export function lineDown (ctx, from, to, size) {
|
||||
size += ctx.lineWidth * 3;
|
||||
ctx.translate(to.x, to.y);
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
|
||||
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5);
|
||||
size += ctx.lineWidth * 3
|
||||
ctx.translate(to.x, to.y)
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
|
||||
ctx.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5)
|
||||
if (to.x < from.x) {
|
||||
ctx.moveTo(to.x, to.y);
|
||||
ctx.lineTo(to.x - size, to.y - size / 3);
|
||||
ctx.moveTo(to.x, to.y)
|
||||
ctx.lineTo(to.x - size, to.y - size / 3)
|
||||
} else {
|
||||
ctx.moveTo(to.x, to.y)
|
||||
ctx.lineTo(to.x - size, to.y + size / 3)
|
||||
}
|
||||
else {
|
||||
ctx.moveTo(to.x, to.y);
|
||||
ctx.lineTo(to.x - size, to.y + size / 3);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=line.js.map
|
||||
@@ -1,29 +1,28 @@
|
||||
import { Store } from 'le5le-store';
|
||||
import { Store } from 'le5le-store'
|
||||
export function triangleSolid (ctx, from, to, size, fillStyle) {
|
||||
size += ctx.lineWidth * 3;
|
||||
var arrowWidth = ctx.lineWidth / 10;
|
||||
size += ctx.lineWidth * 3
|
||||
let arrowWidth = ctx.lineWidth / 10
|
||||
if (ctx.lineWidth < 2) {
|
||||
ctx.lineWidth = 2;
|
||||
arrowWidth = 0;
|
||||
ctx.lineWidth = 2
|
||||
arrowWidth = 0
|
||||
}
|
||||
ctx.translate(to.x, to.y);
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x));
|
||||
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y);
|
||||
ctx.moveTo(to.x, to.y + arrowWidth);
|
||||
ctx.lineTo(to.x, to.y - arrowWidth);
|
||||
ctx.lineTo(to.x - size, to.y - size / 3);
|
||||
ctx.lineTo(to.x - size, to.y + size / 3);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
ctx.translate(to.x, to.y)
|
||||
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
|
||||
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y)
|
||||
ctx.moveTo(to.x, to.y + arrowWidth)
|
||||
ctx.lineTo(to.x, to.y - arrowWidth)
|
||||
ctx.lineTo(to.x - size, to.y - size / 3)
|
||||
ctx.lineTo(to.x - size, to.y + size / 3)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
if (fillStyle) {
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillStyle = fillStyle
|
||||
} else {
|
||||
ctx.fillStyle = ctx.strokeStyle
|
||||
}
|
||||
else {
|
||||
ctx.fillStyle = ctx.strokeStyle;
|
||||
}
|
||||
ctx.fill();
|
||||
ctx.fill()
|
||||
}
|
||||
export function triangle (ctx, from, to, size) {
|
||||
triangleSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff');
|
||||
triangleSolid(ctx, from, to, size, Store.get('LT:bkColor') || '#fff')
|
||||
}
|
||||
// # sourceMappingURL=triangle.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Point } from '../models/point';
|
||||
import { Direction } from '../models/direction';
|
||||
import { Point } from '../models/point'
|
||||
import { Direction } from '../models/direction'
|
||||
export function defaultAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
}
|
||||
// # sourceMappingURL=default.anchor.js.map
|
||||
@@ -1,213 +1,213 @@
|
||||
import { rectangle } from './nodes/rectangle';
|
||||
import { circle } from './nodes/circle';
|
||||
import { triangle } from './nodes/triangle';
|
||||
import { diamond } from './nodes/diamond';
|
||||
import { leftArrow, rightArrow, twowayArrow } from './nodes/arrow';
|
||||
import { text } from './nodes/text';
|
||||
import { line as nodeLine } from './nodes/line';
|
||||
import { triangleAnchors } from './nodes/triangle.anchor';
|
||||
import { arrowAnchors } from './nodes/arrow.anchor';
|
||||
import { lineAnchors } from './nodes/line.anchor';
|
||||
import { circleIconRect, circleTextRect } from './nodes/circle.rect';
|
||||
import { triangleIconRect, triangleTextRect } from './nodes/triangle.rect';
|
||||
import { diamondIconRect, diamondTextRect } from './nodes/diamond.rect';
|
||||
import { twowayArrowIconRect, twowayArrowTextRect, leftArrowIconRect, leftArrowTextRect, rightArrowIconRect, rightArrowTextRect, } from './nodes/arrow.rect';
|
||||
import { lineIconRect, lineTextRect } from './nodes/line.rect';
|
||||
import { line, lineControlPoints, calcLineControlPoints } from './lines/line';
|
||||
import { polyline, polylineControlPoints, pointInPolyline, calcPolylineControlPoints, dockPolylineControlPoint, } from './lines/polyline';
|
||||
import { curve, curveControlPoints, pointInCurve, calcCurveControlPoints, } from './lines/curve';
|
||||
import { calcMindControlPoints, } from './lines/mind';
|
||||
import { triangleSolid, triangle as arrowTriangle } from './arrows/triangle';
|
||||
import { diamondSolid, diamond as arrowDiamond } from './arrows/diamond';
|
||||
import { circleSolid, circle as arrowCircle } from './arrows/circle';
|
||||
import { circleAnchors } from './nodes/circle.anchor';
|
||||
import { lineUp, lineDown, line as arrowLine } from './arrows/line';
|
||||
import { pentagon } from './nodes/pentagon';
|
||||
import { pentagonIconRect, pentagonTextRect } from './nodes/pentagon.rect';
|
||||
import { pentagonAnchors } from './nodes/pentagon.anchor';
|
||||
import { hexagon } from './nodes/hexagon';
|
||||
import { hexagonAnchors } from './nodes/hexagon.anchor';
|
||||
import { hexagonIconRect, hexagonTextRect } from './nodes/hexagon.rect';
|
||||
import { pentagram } from './nodes/pentagram';
|
||||
import { pentagramAnchors } from './nodes/pentagram.anchor';
|
||||
import { pentagramIconRect, pentagramTextRect } from './nodes/pentagram.rect';
|
||||
import { cloud } from './nodes/cloud';
|
||||
import { cloudAnchors } from './nodes/cloud.anchor';
|
||||
import { cloudIconRect, cloudTextRect } from './nodes/cloud.rect';
|
||||
import { message } from './nodes/message';
|
||||
import { messageIconRect, messageTextRect } from './nodes/message.rect';
|
||||
import { messageAnchors } from './nodes/message.anchor';
|
||||
import { file } from './nodes/file';
|
||||
import { imageIconRect, imageTextRect } from './nodes/image.rect';
|
||||
import { imageAnchors } from './nodes/image.anchor';
|
||||
import { cube } from './nodes/cube';
|
||||
import { cubeAnchors } from './nodes/cube.anchor';
|
||||
import { cubeIconRect, cubeTextRect } from './nodes/cube.rect';
|
||||
import { people } from './nodes/people';
|
||||
import { peopleIconRect, peopleTextRect } from './nodes/people.rect';
|
||||
import { rectangleIconRect, rectangleTextRect } from './nodes/rectangle.rect';
|
||||
import { graffiti } from './nodes/graffiti';
|
||||
import { graffitiAnchors } from './nodes/graffiti.anchor';
|
||||
import { mindNodeAnchors } from './nodes/mindNode.anchor';
|
||||
import { mindLine } from './nodes/mindLine';
|
||||
import { mindLineAnchors } from './nodes/mindLine.anchor';
|
||||
import { lines } from './nodes/lines';
|
||||
import { rectangle } from './nodes/rectangle'
|
||||
import { circle } from './nodes/circle'
|
||||
import { triangle } from './nodes/triangle'
|
||||
import { diamond } from './nodes/diamond'
|
||||
import { leftArrow, rightArrow, twowayArrow } from './nodes/arrow'
|
||||
import { text } from './nodes/text'
|
||||
import { line as nodeLine } from './nodes/line'
|
||||
import { triangleAnchors } from './nodes/triangle.anchor'
|
||||
import { arrowAnchors } from './nodes/arrow.anchor'
|
||||
import { lineAnchors } from './nodes/line.anchor'
|
||||
import { circleIconRect, circleTextRect } from './nodes/circle.rect'
|
||||
import { triangleIconRect, triangleTextRect } from './nodes/triangle.rect'
|
||||
import { diamondIconRect, diamondTextRect } from './nodes/diamond.rect'
|
||||
import { twowayArrowIconRect, twowayArrowTextRect, leftArrowIconRect, leftArrowTextRect, rightArrowIconRect, rightArrowTextRect } from './nodes/arrow.rect'
|
||||
import { lineIconRect, lineTextRect } from './nodes/line.rect'
|
||||
import { line, lineControlPoints, calcLineControlPoints } from './lines/line'
|
||||
import { polyline, polylineControlPoints, pointInPolyline, calcPolylineControlPoints, dockPolylineControlPoint } from './lines/polyline'
|
||||
import { curve, curveControlPoints, pointInCurve, calcCurveControlPoints } from './lines/curve'
|
||||
import { calcMindControlPoints } from './lines/mind'
|
||||
import { triangleSolid, triangle as arrowTriangle } from './arrows/triangle'
|
||||
import { diamondSolid, diamond as arrowDiamond } from './arrows/diamond'
|
||||
import { circleSolid, circle as arrowCircle } from './arrows/circle'
|
||||
import { circleAnchors } from './nodes/circle.anchor'
|
||||
import { lineUp, lineDown, line as arrowLine } from './arrows/line'
|
||||
import { pentagon } from './nodes/pentagon'
|
||||
import { pentagonIconRect, pentagonTextRect } from './nodes/pentagon.rect'
|
||||
import { pentagonAnchors } from './nodes/pentagon.anchor'
|
||||
import { hexagon } from './nodes/hexagon'
|
||||
import { hexagonAnchors } from './nodes/hexagon.anchor'
|
||||
import { hexagonIconRect, hexagonTextRect } from './nodes/hexagon.rect'
|
||||
import { pentagram } from './nodes/pentagram'
|
||||
import { pentagramAnchors } from './nodes/pentagram.anchor'
|
||||
import { pentagramIconRect, pentagramTextRect } from './nodes/pentagram.rect'
|
||||
import { cloud } from './nodes/cloud'
|
||||
import { cloudAnchors } from './nodes/cloud.anchor'
|
||||
import { cloudIconRect, cloudTextRect } from './nodes/cloud.rect'
|
||||
import { message } from './nodes/message'
|
||||
import { messageIconRect, messageTextRect } from './nodes/message.rect'
|
||||
import { messageAnchors } from './nodes/message.anchor'
|
||||
import { file } from './nodes/file'
|
||||
import { imageIconRect, imageTextRect } from './nodes/image.rect'
|
||||
import { imageAnchors } from './nodes/image.anchor'
|
||||
import { cube } from './nodes/cube'
|
||||
import { cubeAnchors } from './nodes/cube.anchor'
|
||||
import { cubeIconRect, cubeTextRect } from './nodes/cube.rect'
|
||||
import { people } from './nodes/people'
|
||||
import { peopleIconRect, peopleTextRect } from './nodes/people.rect'
|
||||
import { rectangleIconRect, rectangleTextRect } from './nodes/rectangle.rect'
|
||||
import { graffiti } from './nodes/graffiti'
|
||||
import { graffitiAnchors } from './nodes/graffiti.anchor'
|
||||
import { mindNodeAnchors } from './nodes/mindNode.anchor'
|
||||
import { mindLine } from './nodes/mindLine'
|
||||
import { mindLineAnchors } from './nodes/mindLine.anchor'
|
||||
import { lines } from './nodes/lines'
|
||||
// Functions of drawing a node.
|
||||
export var drawNodeFns = {};
|
||||
export var drawNodeFns = {}
|
||||
// Calc the occupy rect of icon.
|
||||
export var iconRectFns = {};
|
||||
export var iconRectFns = {}
|
||||
// Calc the occupy rect of text.
|
||||
export var textRectFns = {};
|
||||
export var textRectFns = {}
|
||||
// Calc the anchors of node.
|
||||
export var anchorsFns = {};
|
||||
export var anchorsFns = {}
|
||||
// Functions of drawing a line.
|
||||
export var drawLineFns = {};
|
||||
export var drawLineFns = {}
|
||||
// Functions of drawing a arrow.
|
||||
export var drawArrowFns = {};
|
||||
export var drawArrowFns = {}
|
||||
function init () {
|
||||
// ********Default nodes.*******
|
||||
// Combine
|
||||
drawNodeFns.combine = rectangle;
|
||||
drawNodeFns.combine = rectangle
|
||||
// Div
|
||||
drawNodeFns.div = rectangle;
|
||||
drawNodeFns.div = rectangle
|
||||
// graffiti
|
||||
drawNodeFns.graffiti = graffiti;
|
||||
anchorsFns.graffiti = graffitiAnchors;
|
||||
drawNodeFns.graffiti = graffiti
|
||||
anchorsFns.graffiti = graffitiAnchors
|
||||
// lines
|
||||
drawNodeFns.lines = lines;
|
||||
drawNodeFns.lines = lines
|
||||
// Square
|
||||
drawNodeFns.square = rectangle;
|
||||
drawNodeFns.square = rectangle
|
||||
// Rectangle
|
||||
drawNodeFns.rectangle = rectangle;
|
||||
iconRectFns.rectangle = rectangleIconRect;
|
||||
textRectFns.rectangle = rectangleTextRect;
|
||||
drawNodeFns.rectangle = rectangle
|
||||
iconRectFns.rectangle = rectangleIconRect
|
||||
textRectFns.rectangle = rectangleTextRect
|
||||
// Ciricle
|
||||
drawNodeFns.circle = circle;
|
||||
iconRectFns.circle = circleIconRect;
|
||||
textRectFns.circle = circleTextRect;
|
||||
anchorsFns.circle = circleAnchors;
|
||||
drawNodeFns.circle = circle
|
||||
iconRectFns.circle = circleIconRect
|
||||
textRectFns.circle = circleTextRect
|
||||
anchorsFns.circle = circleAnchors
|
||||
// Triangle
|
||||
drawNodeFns.triangle = triangle;
|
||||
anchorsFns.triangle = triangleAnchors;
|
||||
iconRectFns.triangle = triangleIconRect;
|
||||
textRectFns.triangle = triangleTextRect;
|
||||
drawNodeFns.triangle = triangle
|
||||
anchorsFns.triangle = triangleAnchors
|
||||
iconRectFns.triangle = triangleIconRect
|
||||
textRectFns.triangle = triangleTextRect
|
||||
// Diamond
|
||||
drawNodeFns.diamond = diamond;
|
||||
iconRectFns.diamond = diamondIconRect;
|
||||
textRectFns.diamond = diamondTextRect;
|
||||
drawNodeFns.diamond = diamond
|
||||
iconRectFns.diamond = diamondIconRect
|
||||
textRectFns.diamond = diamondTextRect
|
||||
// Hexagon
|
||||
drawNodeFns.hexagon = hexagon;
|
||||
iconRectFns.hexagon = hexagonIconRect;
|
||||
textRectFns.hexagon = hexagonTextRect;
|
||||
anchorsFns.hexagon = hexagonAnchors;
|
||||
drawNodeFns.hexagon = hexagon
|
||||
iconRectFns.hexagon = hexagonIconRect
|
||||
textRectFns.hexagon = hexagonTextRect
|
||||
anchorsFns.hexagon = hexagonAnchors
|
||||
// Pentagon
|
||||
drawNodeFns.pentagon = pentagon;
|
||||
iconRectFns.pentagon = pentagonIconRect;
|
||||
textRectFns.pentagon = pentagonTextRect;
|
||||
anchorsFns.pentagon = pentagonAnchors;
|
||||
drawNodeFns.pentagon = pentagon
|
||||
iconRectFns.pentagon = pentagonIconRect
|
||||
textRectFns.pentagon = pentagonTextRect
|
||||
anchorsFns.pentagon = pentagonAnchors
|
||||
// Pentagram
|
||||
drawNodeFns.pentagram = pentagram;
|
||||
iconRectFns.pentagram = pentagramIconRect;
|
||||
textRectFns.pentagram = pentagramTextRect;
|
||||
anchorsFns.pentagram = pentagramAnchors;
|
||||
drawNodeFns.pentagram = pentagram
|
||||
iconRectFns.pentagram = pentagramIconRect
|
||||
textRectFns.pentagram = pentagramTextRect
|
||||
anchorsFns.pentagram = pentagramAnchors
|
||||
// Left arrow
|
||||
drawNodeFns.leftArrow = leftArrow;
|
||||
anchorsFns.leftArrow = arrowAnchors;
|
||||
iconRectFns.leftArrow = leftArrowIconRect;
|
||||
textRectFns.leftArrow = leftArrowTextRect;
|
||||
drawNodeFns.leftArrow = leftArrow
|
||||
anchorsFns.leftArrow = arrowAnchors
|
||||
iconRectFns.leftArrow = leftArrowIconRect
|
||||
textRectFns.leftArrow = leftArrowTextRect
|
||||
// Right arrow
|
||||
drawNodeFns.rightArrow = rightArrow;
|
||||
anchorsFns.rightArrow = arrowAnchors;
|
||||
iconRectFns.rightArrow = rightArrowIconRect;
|
||||
textRectFns.rightArrow = rightArrowTextRect;
|
||||
drawNodeFns.rightArrow = rightArrow
|
||||
anchorsFns.rightArrow = arrowAnchors
|
||||
iconRectFns.rightArrow = rightArrowIconRect
|
||||
textRectFns.rightArrow = rightArrowTextRect
|
||||
// Two-way arrow
|
||||
drawNodeFns.twowayArrow = twowayArrow;
|
||||
anchorsFns.twowayArrow = arrowAnchors;
|
||||
iconRectFns.twowayArrow = twowayArrowIconRect;
|
||||
textRectFns.twowayArrow = twowayArrowTextRect;
|
||||
drawNodeFns.twowayArrow = twowayArrow
|
||||
anchorsFns.twowayArrow = arrowAnchors
|
||||
iconRectFns.twowayArrow = twowayArrowIconRect
|
||||
textRectFns.twowayArrow = twowayArrowTextRect
|
||||
// Cloud
|
||||
drawNodeFns.cloud = cloud;
|
||||
anchorsFns.cloud = cloudAnchors;
|
||||
iconRectFns.cloud = cloudIconRect;
|
||||
textRectFns.cloud = cloudTextRect;
|
||||
drawNodeFns.cloud = cloud
|
||||
anchorsFns.cloud = cloudAnchors
|
||||
iconRectFns.cloud = cloudIconRect
|
||||
textRectFns.cloud = cloudTextRect
|
||||
// Message
|
||||
drawNodeFns.message = message;
|
||||
anchorsFns.message = messageAnchors;
|
||||
iconRectFns.message = messageIconRect;
|
||||
textRectFns.message = messageTextRect;
|
||||
drawNodeFns.message = message
|
||||
anchorsFns.message = messageAnchors
|
||||
iconRectFns.message = messageIconRect
|
||||
textRectFns.message = messageTextRect
|
||||
// File
|
||||
drawNodeFns.file = file;
|
||||
drawNodeFns.file = file
|
||||
// Text
|
||||
drawNodeFns.text = text;
|
||||
iconRectFns.text = lineIconRect;
|
||||
drawNodeFns.text = text
|
||||
iconRectFns.text = lineIconRect
|
||||
// Line
|
||||
drawNodeFns.line = nodeLine;
|
||||
anchorsFns.line = lineAnchors;
|
||||
iconRectFns.line = lineIconRect;
|
||||
textRectFns.line = lineTextRect;
|
||||
drawNodeFns.line = nodeLine
|
||||
anchorsFns.line = lineAnchors
|
||||
iconRectFns.line = lineIconRect
|
||||
textRectFns.line = lineTextRect
|
||||
// Image
|
||||
drawNodeFns.image = function (ctx, node) { };
|
||||
iconRectFns.image = imageIconRect;
|
||||
textRectFns.image = imageTextRect;
|
||||
anchorsFns.image = imageAnchors;
|
||||
drawNodeFns.image = function (ctx, node) { }
|
||||
iconRectFns.image = imageIconRect
|
||||
textRectFns.image = imageTextRect
|
||||
anchorsFns.image = imageAnchors
|
||||
// Cube
|
||||
drawNodeFns.cube = cube;
|
||||
anchorsFns.cube = cubeAnchors;
|
||||
iconRectFns.cube = cubeIconRect;
|
||||
textRectFns.cube = cubeTextRect;
|
||||
drawNodeFns.cube = cube
|
||||
anchorsFns.cube = cubeAnchors
|
||||
iconRectFns.cube = cubeIconRect
|
||||
textRectFns.cube = cubeTextRect
|
||||
// People
|
||||
drawNodeFns.people = people;
|
||||
iconRectFns.people = peopleIconRect;
|
||||
textRectFns.people = peopleTextRect;
|
||||
drawNodeFns.people = people
|
||||
iconRectFns.people = peopleIconRect
|
||||
textRectFns.people = peopleTextRect
|
||||
// MindNode
|
||||
drawNodeFns.mindNode = rectangle;
|
||||
anchorsFns.mindNode = mindNodeAnchors;
|
||||
iconRectFns.mindNode = rectangleIconRect;
|
||||
textRectFns.mindNode = rectangleTextRect;
|
||||
drawNodeFns.mindNode = rectangle
|
||||
anchorsFns.mindNode = mindNodeAnchors
|
||||
iconRectFns.mindNode = rectangleIconRect
|
||||
textRectFns.mindNode = rectangleTextRect
|
||||
// MindLine
|
||||
drawNodeFns.mindLine = mindLine;
|
||||
anchorsFns.mindLine = mindLineAnchors;
|
||||
drawNodeFns.mindLine = mindLine
|
||||
anchorsFns.mindLine = mindLineAnchors
|
||||
// ********end********
|
||||
// ********Default lines.*******
|
||||
drawLineFns.line = {
|
||||
drawFn: line,
|
||||
drawControlPointsFn: lineControlPoints,
|
||||
controlPointsFn: calcLineControlPoints,
|
||||
pointIn: pointInPolyline,
|
||||
};
|
||||
pointIn: pointInPolyline
|
||||
}
|
||||
drawLineFns.polyline = {
|
||||
drawFn: polyline,
|
||||
drawControlPointsFn: polylineControlPoints,
|
||||
controlPointsFn: calcPolylineControlPoints,
|
||||
dockControlPointFn: dockPolylineControlPoint,
|
||||
pointIn: pointInPolyline,
|
||||
};
|
||||
pointIn: pointInPolyline
|
||||
}
|
||||
drawLineFns.curve = {
|
||||
drawFn: curve,
|
||||
drawControlPointsFn: curveControlPoints,
|
||||
controlPointsFn: calcCurveControlPoints,
|
||||
pointIn: pointInCurve,
|
||||
};
|
||||
pointIn: pointInCurve
|
||||
}
|
||||
drawLineFns.mind = {
|
||||
drawFn: curve,
|
||||
drawControlPointsFn: curveControlPoints,
|
||||
controlPointsFn: calcMindControlPoints,
|
||||
pointIn: pointInCurve,
|
||||
};
|
||||
pointIn: pointInCurve
|
||||
}
|
||||
// ********end********
|
||||
// ********Default nodes.*******
|
||||
drawArrowFns.triangleSolid = triangleSolid;
|
||||
drawArrowFns.triangle = arrowTriangle;
|
||||
drawArrowFns.diamondSolid = diamondSolid;
|
||||
drawArrowFns.diamond = arrowDiamond;
|
||||
drawArrowFns.circleSolid = circleSolid;
|
||||
drawArrowFns.circle = arrowCircle;
|
||||
drawArrowFns.line = arrowLine;
|
||||
drawArrowFns.lineUp = lineUp;
|
||||
drawArrowFns.lineDown = lineDown;
|
||||
drawArrowFns.triangleSolid = triangleSolid
|
||||
drawArrowFns.triangle = arrowTriangle
|
||||
drawArrowFns.diamondSolid = diamondSolid
|
||||
drawArrowFns.diamond = arrowDiamond
|
||||
drawArrowFns.circleSolid = circleSolid
|
||||
drawArrowFns.circle = arrowCircle
|
||||
drawArrowFns.line = arrowLine
|
||||
drawArrowFns.lineUp = lineUp
|
||||
drawArrowFns.lineDown = lineDown
|
||||
// ********end********
|
||||
}
|
||||
init();
|
||||
init()
|
||||
// registerNode: Register a custom node.
|
||||
// name - The name of node.
|
||||
// drawFn - How to draw.
|
||||
@@ -218,13 +218,13 @@ init();
|
||||
export function registerNode (name, drawFn, anchorsFn, iconRectFn, textRectFn, protect) {
|
||||
// Exist
|
||||
if (drawNodeFns[name] && protect) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
drawNodeFns[name] = drawFn;
|
||||
anchorsFns[name] = anchorsFn;
|
||||
iconRectFns[name] = iconRectFn;
|
||||
textRectFns[name] = textRectFn;
|
||||
return true;
|
||||
drawNodeFns[name] = drawFn
|
||||
anchorsFns[name] = anchorsFn
|
||||
iconRectFns[name] = iconRectFn
|
||||
textRectFns[name] = textRectFn
|
||||
return true
|
||||
}
|
||||
// registerLine: Register a custom line.
|
||||
// name - The name of line.
|
||||
@@ -234,10 +234,10 @@ export function registerNode(name, drawFn, anchorsFn, iconRectFn, textRectFn, pr
|
||||
// dockControlPointFn - Dock a point to horizontal/vertial or related position.
|
||||
// force - Overwirte the node if exists.
|
||||
export function registerLine (name, drawFn, drawControlPointsFn, controlPointsFn, dockControlPointFn, pointInFn, getLength, getCenter, getPointByPos, force) {
|
||||
if (force === void 0) { force = true; }
|
||||
if (force === void 0) { force = true }
|
||||
// Exist
|
||||
if (drawLineFns[name] && !force) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
drawLineFns[name] = {
|
||||
drawFn: drawFn,
|
||||
@@ -247,9 +247,9 @@ export function registerLine(name, drawFn, drawControlPointsFn, controlPointsFn,
|
||||
pointIn: pointInFn,
|
||||
getLength: getLength,
|
||||
getCenter: getCenter,
|
||||
getPointByPos: getPointByPos,
|
||||
};
|
||||
return true;
|
||||
getPointByPos: getPointByPos
|
||||
}
|
||||
return true
|
||||
}
|
||||
// registerArrow: Register a custom arrow.
|
||||
// name - the name of arrow.
|
||||
@@ -258,11 +258,11 @@ export function registerLine(name, drawFn, drawControlPointsFn, controlPointsFn,
|
||||
export function registerArrow (name, drawFn, protect) {
|
||||
// Exist
|
||||
if (drawArrowFns[name] && protect) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
drawArrowFns[name] = drawFn;
|
||||
return true;
|
||||
drawArrowFns[name] = drawFn
|
||||
return true
|
||||
}
|
||||
window.registerTopologyNode = registerNode;
|
||||
window.registerTopologyLine = registerLine;
|
||||
window.registerTopologyNode = registerNode
|
||||
window.registerTopologyLine = registerLine
|
||||
// # sourceMappingURL=default.js.map
|
||||
@@ -1,19 +1,17 @@
|
||||
import { Rect } from '../models/rect';
|
||||
import { Rect } from '../models/rect'
|
||||
export function defaultIconRect (node) {
|
||||
if (node.image && node.imageWidth) {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.imageWidth, node.imageHeight);
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.imageWidth, node.imageHeight)
|
||||
} else if (node.icon && node.iconSize) {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.iconSize, node.iconSize)
|
||||
} else {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, (node.rect.height * 3) / 4 - node.paddingTopNum - node.paddingBottomNum)
|
||||
}
|
||||
else if (node.icon && node.iconSize) {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.iconSize, node.iconSize);
|
||||
}
|
||||
else {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, (node.rect.height * 3) / 4 - node.paddingTopNum - node.paddingBottomNum);
|
||||
}
|
||||
node.fullIconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
||||
node.fullIconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum)
|
||||
}
|
||||
export function defaultTextRect (node) {
|
||||
var height = node.rect.height - node.paddingTopNum - node.paddingBottomNum;
|
||||
node.textRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum + (height * 3) / 4, node.rect.width - node.paddingLeftNum - node.paddingRightNum, height / 4);
|
||||
node.fullTextRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, height);
|
||||
const height = node.rect.height - node.paddingTopNum - node.paddingBottomNum
|
||||
node.textRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum + (height * 3) / 4, node.rect.width - node.paddingLeftNum - node.paddingRightNum, height / 4)
|
||||
node.fullTextRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, height)
|
||||
}
|
||||
// # sourceMappingURL=default.rect.js.map
|
||||
@@ -1,4 +1,4 @@
|
||||
export * from './default';
|
||||
export * from './nodes/rectangle';
|
||||
export * from './nodes/text';
|
||||
export * from './default'
|
||||
export * from './nodes/rectangle'
|
||||
export * from './nodes/text'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,130 +1,128 @@
|
||||
import { Store } from 'le5le-store';
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { pointInLine } from '../../utils/canvas';
|
||||
import { rgba } from '../../utils/math';
|
||||
var distance = 80;
|
||||
import { Store } from 'le5le-store'
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
import { pointInLine } from '../../utils/canvas'
|
||||
import { rgba } from '../../utils/math'
|
||||
const distance = 80
|
||||
export function curve (ctx, l) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(l.from.x, l.from.y);
|
||||
ctx.bezierCurveTo(l.controlPoints[0].x, l.controlPoints[0].y, l.controlPoints[1].x, l.controlPoints[1].y, l.to.x, l.to.y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.from.x, l.from.y)
|
||||
ctx.bezierCurveTo(l.controlPoints[0].x, l.controlPoints[0].y, l.controlPoints[1].x, l.controlPoints[1].y, l.to.x, l.to.y)
|
||||
ctx.stroke()
|
||||
}
|
||||
export function curveControlPoints (ctx, l) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = rgba(0.5, ctx.strokeStyle + '');
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(l.from.x, l.from.y);
|
||||
ctx.lineTo(l.controlPoints[0].x, l.controlPoints[0].y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(l.to.x, l.to.y);
|
||||
ctx.lineTo(l.controlPoints[1].x, l.controlPoints[1].y);
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.lineWidth = 2;
|
||||
for (var _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
ctx.beginPath();
|
||||
ctx.arc(item.x, item.y, 4, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
ctx.save()
|
||||
ctx.fillStyle = rgba(0.5, ctx.strokeStyle + '')
|
||||
ctx.lineWidth = 1
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.from.x, l.from.y)
|
||||
ctx.lineTo(l.controlPoints[0].x, l.controlPoints[0].y)
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.to.x, l.to.y)
|
||||
ctx.lineTo(l.controlPoints[1].x, l.controlPoints[1].y)
|
||||
ctx.stroke()
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.lineWidth = 2
|
||||
for (let _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
ctx.beginPath()
|
||||
ctx.arc(item.x, item.y, 4, 0, Math.PI * 2)
|
||||
ctx.stroke()
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.restore();
|
||||
ctx.restore()
|
||||
}
|
||||
export function calcCurveControlPoints (l) {
|
||||
if (!l.from.direction) {
|
||||
l.from.direction = Direction.Bottom;
|
||||
l.from.direction = Direction.Bottom
|
||||
}
|
||||
if (!l.to.direction) {
|
||||
l.to.direction = (l.from.direction + 2) % 4;
|
||||
l.to.direction = (l.from.direction + 2) % 4
|
||||
if (!l.to.direction) {
|
||||
l.to.direction = Direction.Left;
|
||||
l.to.direction = Direction.Left
|
||||
}
|
||||
}
|
||||
l.controlPoints = [getControlPt(l.from, l.to), getControlPt(l.to, l.from)];
|
||||
Store.set(generateStoreKey(l, 'pts-') + l.id, undefined);
|
||||
l.controlPoints = [getControlPt(l.from, l.to), getControlPt(l.to, l.from)]
|
||||
Store.set(generateStoreKey(l, 'pts-') + l.id, undefined)
|
||||
}
|
||||
export function pointInCurve (point, l) {
|
||||
var points = Store.get(generateStoreKey(l, 'pts-') + l.id);
|
||||
let points = Store.get(generateStoreKey(l, 'pts-') + l.id)
|
||||
if (!points) {
|
||||
points = [l.from];
|
||||
points = [l.from]
|
||||
if (l.controlPoints) {
|
||||
for (var i = 0.01; i < 1; i += 0.01) {
|
||||
points.push(getBezierPoint(i, l.from, l.controlPoints[0], l.controlPoints[1], l.to));
|
||||
points.push(getBezierPoint(i, l.from, l.controlPoints[0], l.controlPoints[1], l.to))
|
||||
}
|
||||
}
|
||||
points.push(l.to);
|
||||
Store.set(generateStoreKey(l, 'pts-') + l.id, points);
|
||||
points.push(l.to)
|
||||
Store.set(generateStoreKey(l, 'pts-') + l.id, points)
|
||||
}
|
||||
var cnt = points.length - 1;
|
||||
const cnt = points.length - 1
|
||||
for (var i = 0; i < cnt; ++i) {
|
||||
if (pointInLine(point, points[i], points[i + 1])) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
// Get a point in bezier.
|
||||
// pos - The position of point in bezier. It is expressed as a percentage(0 - 1).
|
||||
export function getBezierPoint (pos, from, cp1, cp2, to) {
|
||||
var x1 = from.x, y1 = from.y;
|
||||
var x2 = to.x, y2 = to.y;
|
||||
var cx1 = cp1.x, cy1 = cp1.y;
|
||||
var cx2 = cp2.x, cy2 = cp2.y;
|
||||
var x = x1 * (1 - pos) * (1 - pos) * (1 - pos) +
|
||||
const x1 = from.x; const y1 = from.y
|
||||
const x2 = to.x; const y2 = to.y
|
||||
const cx1 = cp1.x; const cy1 = cp1.y
|
||||
const cx2 = cp2.x; const cy2 = cp2.y
|
||||
const x = x1 * (1 - pos) * (1 - pos) * (1 - pos) +
|
||||
3 * cx1 * pos * (1 - pos) * (1 - pos) +
|
||||
3 * cx2 * pos * pos * (1 - pos) +
|
||||
x2 * pos * pos * pos;
|
||||
var y = y1 * (1 - pos) * (1 - pos) * (1 - pos) +
|
||||
x2 * pos * pos * pos
|
||||
const y = y1 * (1 - pos) * (1 - pos) * (1 - pos) +
|
||||
3 * cy1 * pos * (1 - pos) * (1 - pos) +
|
||||
3 * cy2 * pos * pos * (1 - pos) +
|
||||
y2 * pos * pos * pos;
|
||||
return new Point(x, y);
|
||||
y2 * pos * pos * pos
|
||||
return new Point(x, y)
|
||||
}
|
||||
export function getControlPt (pt, to) {
|
||||
var point = new Point(pt.x, pt.y, pt.direction, pt.anchorIndex, pt.id);
|
||||
var dis = window.topologyControlPtDistance || distance;
|
||||
const point = new Point(pt.x, pt.y, pt.direction, pt.anchorIndex, pt.id)
|
||||
let dis = window.topologyControlPtDistance || distance
|
||||
if ((pt.direction === Direction.Up || pt.direction === Direction.Bottom) && Math.abs(pt.x - to.x) < 3) {
|
||||
if (to.y > pt.y) {
|
||||
dis = Math.round((to.y - pt.y) / 3);
|
||||
point.y += dis;
|
||||
dis = Math.round((to.y - pt.y) / 3)
|
||||
point.y += dis
|
||||
} else {
|
||||
dis = Math.round((pt.y - to.y) / 3)
|
||||
point.y -= dis
|
||||
}
|
||||
else {
|
||||
dis = Math.round((pt.y - to.y) / 3);
|
||||
point.y -= dis;
|
||||
}
|
||||
return point;
|
||||
return point
|
||||
}
|
||||
if ((pt.direction === Direction.Left || pt.direction === Direction.Right) && Math.abs(pt.y - to.y) < 3) {
|
||||
if (to.x > pt.x) {
|
||||
dis = Math.round((to.x - pt.x) / 3);
|
||||
point.x += dis;
|
||||
dis = Math.round((to.x - pt.x) / 3)
|
||||
point.x += dis
|
||||
} else {
|
||||
dis = Math.round((pt.x - to.x) / 3)
|
||||
point.x -= dis
|
||||
}
|
||||
else {
|
||||
dis = Math.round((pt.x - to.x) / 3);
|
||||
point.x -= dis;
|
||||
}
|
||||
return point;
|
||||
return point
|
||||
}
|
||||
switch (pt.direction) {
|
||||
case Direction.Up:
|
||||
point.y -= dis;
|
||||
break;
|
||||
point.y -= dis
|
||||
break
|
||||
case Direction.Right:
|
||||
point.x += dis;
|
||||
break;
|
||||
point.x += dis
|
||||
break
|
||||
case Direction.Bottom:
|
||||
point.y += dis;
|
||||
break;
|
||||
point.y += dis
|
||||
break
|
||||
case Direction.Left:
|
||||
point.x -= dis;
|
||||
break;
|
||||
point.x -= dis
|
||||
break
|
||||
}
|
||||
return point;
|
||||
return point
|
||||
}
|
||||
export function generateStoreKey (pen, key) {
|
||||
return pen.getTID() + "-" + key;
|
||||
return pen.getTID() + '-' + key
|
||||
}
|
||||
// # sourceMappingURL=curve.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
export function line (ctx, l) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(l.from.x, l.from.y);
|
||||
ctx.lineTo(l.to.x, l.to.y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.from.x, l.from.y)
|
||||
ctx.lineTo(l.to.x, l.to.y)
|
||||
ctx.stroke()
|
||||
}
|
||||
export function lineControlPoints (ctx, l) { }
|
||||
export function calcLineControlPoints (l) {
|
||||
l.controlPoints = [];
|
||||
l.controlPoints = []
|
||||
}
|
||||
// # sourceMappingURL=line.js.map
|
||||
@@ -1,32 +1,32 @@
|
||||
import { Store } from 'le5le-store';
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { generateStoreKey } from './curve';
|
||||
var distance = 20;
|
||||
import { Store } from 'le5le-store'
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
import { generateStoreKey } from './curve'
|
||||
const distance = 20
|
||||
export function calcMindControlPoints (l) {
|
||||
if (!l.from.direction) {
|
||||
l.from.direction = Direction.Bottom;
|
||||
l.from.direction = Direction.Bottom
|
||||
}
|
||||
if (!l.to.direction) {
|
||||
l.to.direction = (l.from.direction + 2) % 4;
|
||||
l.to.direction = (l.from.direction + 2) % 4
|
||||
if (!l.to.direction) {
|
||||
l.to.direction = Direction.Left;
|
||||
l.to.direction = Direction.Left
|
||||
}
|
||||
}
|
||||
switch (l.from.direction) {
|
||||
case Direction.Up:
|
||||
l.controlPoints = [new Point(l.from.x, l.from.y - distance), new Point(l.from.x, l.to.y)];
|
||||
break;
|
||||
l.controlPoints = [new Point(l.from.x, l.from.y - distance), new Point(l.from.x, l.to.y)]
|
||||
break
|
||||
case Direction.Right:
|
||||
l.controlPoints = [new Point(l.from.x + distance, l.from.y), new Point(l.from.x, l.to.y)];
|
||||
break;
|
||||
l.controlPoints = [new Point(l.from.x + distance, l.from.y), new Point(l.from.x, l.to.y)]
|
||||
break
|
||||
case Direction.Bottom:
|
||||
l.controlPoints = [new Point(l.from.x, l.from.y + distance), new Point(l.from.x, l.to.y)];
|
||||
break;
|
||||
l.controlPoints = [new Point(l.from.x, l.from.y + distance), new Point(l.from.x, l.to.y)]
|
||||
break
|
||||
case Direction.Left:
|
||||
l.controlPoints = [new Point(l.from.x - distance, l.from.y), new Point(l.from.x, l.to.y)];
|
||||
break;
|
||||
l.controlPoints = [new Point(l.from.x - distance, l.from.y), new Point(l.from.x, l.to.y)]
|
||||
break
|
||||
}
|
||||
Store.set(generateStoreKey(l, 'pts-') + l.id, undefined);
|
||||
Store.set(generateStoreKey(l, 'pts-') + l.id, undefined)
|
||||
}
|
||||
// # sourceMappingURL=mind.js.map
|
||||
@@ -1,309 +1,285 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { pointInLine } from '../../utils/canvas';
|
||||
var minDistance = 50;
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
import { pointInLine } from '../../utils/canvas'
|
||||
const minDistance = 50
|
||||
export function polyline (ctx, l) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(l.from.x, l.from.y);
|
||||
for (var _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
ctx.lineTo(item.x, item.y);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.from.x, l.from.y)
|
||||
for (let _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
ctx.lineTo(item.x, item.y)
|
||||
}
|
||||
ctx.lineTo(l.to.x, l.to.y);
|
||||
ctx.stroke();
|
||||
ctx.lineTo(l.to.x, l.to.y)
|
||||
ctx.stroke()
|
||||
}
|
||||
export function polylineControlPoints (ctx, l) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.lineWidth = 2;
|
||||
for (var _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
ctx.beginPath();
|
||||
ctx.arc(item.x, item.y, 4, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
ctx.save()
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.lineWidth = 2
|
||||
for (let _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
ctx.beginPath()
|
||||
ctx.arc(item.x, item.y, 4, 0, Math.PI * 2)
|
||||
ctx.stroke()
|
||||
ctx.fill()
|
||||
}
|
||||
ctx.restore();
|
||||
ctx.restore()
|
||||
}
|
||||
export function calcPolylineControlPoints (l) {
|
||||
l.controlPoints = [];
|
||||
var from = getDirectionPoint(l.from, l.to);
|
||||
l.controlPoints = []
|
||||
const from = getDirectionPoint(l.from, l.to)
|
||||
if (l.from.direction) {
|
||||
l.controlPoints.push(from);
|
||||
l.controlPoints.push(from)
|
||||
}
|
||||
var to = getDirectionPoint(l.to, l.from);
|
||||
var pts;
|
||||
const to = getDirectionPoint(l.to, l.from)
|
||||
let pts
|
||||
switch (from.direction) {
|
||||
case Direction.Up:
|
||||
pts = getNextPointByUp(from, to);
|
||||
break;
|
||||
pts = getNextPointByUp(from, to)
|
||||
break
|
||||
case Direction.Right:
|
||||
pts = getNextPointByRight(from, to);
|
||||
break;
|
||||
pts = getNextPointByRight(from, to)
|
||||
break
|
||||
case Direction.Bottom:
|
||||
pts = getNextPointByBottom(from, to);
|
||||
break;
|
||||
pts = getNextPointByBottom(from, to)
|
||||
break
|
||||
case Direction.Left:
|
||||
pts = getNextPointByLeft(from, to);
|
||||
break;
|
||||
pts = getNextPointByLeft(from, to)
|
||||
break
|
||||
}
|
||||
l.controlPoints.push.apply(l.controlPoints, pts);
|
||||
l.controlPoints.push.apply(l.controlPoints, pts)
|
||||
if (l.to.direction) {
|
||||
l.controlPoints.push(to);
|
||||
l.controlPoints.push(to)
|
||||
}
|
||||
}
|
||||
export function pointInPolyline (point, l) {
|
||||
if (!l.controlPoints || !l.controlPoints.length) {
|
||||
return pointInLine(point, l.from, l.to, l.lineWidth / 2);
|
||||
return pointInLine(point, l.from, l.to, l.lineWidth / 2)
|
||||
}
|
||||
if (pointInLine(point, l.from, l.controlPoints[0])) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
if (pointInLine(point, l.to, l.controlPoints[l.controlPoints.length - 1])) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
for (var i = 0; i < l.controlPoints.length - 1; ++i) {
|
||||
for (let i = 0; i < l.controlPoints.length - 1; ++i) {
|
||||
if (pointInLine(point, l.controlPoints[i], l.controlPoints[i + 1])) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
export function dockPolylineControlPoint (point, l) {
|
||||
var pts = [l.from];
|
||||
pts.push.apply(pts, l.controlPoints);
|
||||
pts.push(l.to);
|
||||
for (var _i = 0, pts_1 = pts; _i < pts_1.length; _i++) {
|
||||
var item = pts_1[_i];
|
||||
const pts = [l.from]
|
||||
pts.push.apply(pts, l.controlPoints)
|
||||
pts.push(l.to)
|
||||
for (let _i = 0, pts_1 = pts; _i < pts_1.length; _i++) {
|
||||
const item = pts_1[_i]
|
||||
if (Math.abs(point.x - item.x) < 7) {
|
||||
point.x = item.x;
|
||||
point.x = item.x
|
||||
}
|
||||
if (Math.abs(point.y - item.y) < 7) {
|
||||
point.y = item.y;
|
||||
point.y = item.y
|
||||
}
|
||||
}
|
||||
}
|
||||
function getDirectionPoint (pt, to) {
|
||||
var point = pt.clone();
|
||||
const point = pt.clone()
|
||||
switch (pt.direction) {
|
||||
case Direction.Up:
|
||||
if (to.y < pt.y) {
|
||||
point.y -= Math.round((pt.y - to.y) / 2);
|
||||
point.y -= Math.round((pt.y - to.y) / 2)
|
||||
} else {
|
||||
point.y -= minDistance
|
||||
}
|
||||
else {
|
||||
point.y -= minDistance;
|
||||
}
|
||||
break;
|
||||
break
|
||||
case Direction.Right:
|
||||
if (to.x > pt.x) {
|
||||
point.x += Math.round((to.x - pt.x) / 2);
|
||||
point.x += Math.round((to.x - pt.x) / 2)
|
||||
} else {
|
||||
point.x += minDistance
|
||||
}
|
||||
else {
|
||||
point.x += minDistance;
|
||||
}
|
||||
break;
|
||||
break
|
||||
case Direction.Bottom:
|
||||
if (to.y > pt.y) {
|
||||
point.y += Math.round((to.y - pt.y) / 2);
|
||||
point.y += Math.round((to.y - pt.y) / 2)
|
||||
} else {
|
||||
point.y += minDistance
|
||||
}
|
||||
else {
|
||||
point.y += minDistance;
|
||||
}
|
||||
break;
|
||||
break
|
||||
case Direction.Left:
|
||||
if (to.x < pt.x) {
|
||||
point.x -= Math.round((pt.x - to.x) / 2);
|
||||
point.x -= Math.round((pt.x - to.x) / 2)
|
||||
} else {
|
||||
point.x -= minDistance
|
||||
}
|
||||
else {
|
||||
point.x -= minDistance;
|
||||
break
|
||||
}
|
||||
break;
|
||||
}
|
||||
return point;
|
||||
return point
|
||||
}
|
||||
function getNextPointByUp (from, to) {
|
||||
if (from.x === to.x || from.y === to.y) {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
// The to point above the from point.
|
||||
if (from.y > to.y) {
|
||||
if (to.direction === Direction.Up && from.y - to.y > 3 * minDistance) {
|
||||
if (from.x < to.x) {
|
||||
if (to.x - from.x < minDistance) {
|
||||
return [new Point(from.x - 2 * minDistance, from.y), new Point(from.x - 2 * minDistance, to.y)];
|
||||
return [new Point(from.x - 2 * minDistance, from.y), new Point(from.x - 2 * minDistance, to.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
}
|
||||
else {
|
||||
return [new Point(from.x, to.y)]
|
||||
} else {
|
||||
if (from.x - to.x < minDistance) {
|
||||
return [new Point(from.x + 2 * minDistance, from.y), new Point(from.x + 2 * minDistance, to.y)];
|
||||
return [new Point(from.x + 2 * minDistance, from.y), new Point(from.x + 2 * minDistance, to.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// Left top
|
||||
if ((to.direction === Direction.Left && from.x > to.x) || (to.direction === Direction.Right && from.x < to.x)) {
|
||||
return [new Point(to.x, from.y)];
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
// The to point below the from point.
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (to.direction === Direction.Bottom) {
|
||||
if (from.x < to.x) {
|
||||
return getHorizontalPoints(from, to);
|
||||
return getHorizontalPoints(from, to)
|
||||
} else {
|
||||
const pts = getHorizontalPoints(to, from)
|
||||
return [pts[1], pts[0]]
|
||||
}
|
||||
else {
|
||||
var pts = getHorizontalPoints(to, from);
|
||||
return [pts[1], pts[0]];
|
||||
}
|
||||
}
|
||||
else {
|
||||
return [new Point(to.x, from.y)];
|
||||
} else {
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
}
|
||||
}
|
||||
function getNextPointByBottom (from, to) {
|
||||
if (from.x === to.x || from.y === to.y) {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
// The to point below the from point.
|
||||
if (from.y < to.y) {
|
||||
if (to.direction === Direction.Bottom && to.y - from.y > 3 * minDistance) {
|
||||
if (from.x < to.x) {
|
||||
if (to.x - from.x < minDistance) {
|
||||
return [new Point(from.x - 2 * minDistance, from.y), new Point(from.x - 2 * minDistance, to.y)];
|
||||
return [new Point(from.x - 2 * minDistance, from.y), new Point(from.x - 2 * minDistance, to.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
}
|
||||
else {
|
||||
return [new Point(from.x, to.y)]
|
||||
} else {
|
||||
if (from.x - to.x < minDistance) {
|
||||
return [new Point(from.x + 2 * minDistance, from.y), new Point(from.x + 2 * minDistance, to.y)];
|
||||
return [new Point(from.x + 2 * minDistance, from.y), new Point(from.x + 2 * minDistance, to.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if ((to.direction === Direction.Left && from.x > to.x) || (to.direction === Direction.Right && from.x < to.x)) {
|
||||
return [new Point(to.x, from.y)];
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
// The to point below the from point.
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (to.direction === Direction.Up) {
|
||||
if (from.x < to.x) {
|
||||
return getHorizontalPoints(from, to);
|
||||
return getHorizontalPoints(from, to)
|
||||
} else {
|
||||
const pts = getHorizontalPoints(to, from)
|
||||
return [pts[1], pts[0]]
|
||||
}
|
||||
else {
|
||||
var pts = getHorizontalPoints(to, from);
|
||||
return [pts[1], pts[0]];
|
||||
}
|
||||
}
|
||||
else {
|
||||
return [new Point(to.x, from.y)];
|
||||
} else {
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
}
|
||||
}
|
||||
function getNextPointByLeft (from, to) {
|
||||
if (from.x === to.x || from.y === to.y) {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
// The to point is on the left.
|
||||
if (from.x > to.x) {
|
||||
if (to.direction === Direction.Left && from.x - to.x > 3 * minDistance) {
|
||||
if (from.y < to.y) {
|
||||
if (to.y - from.y < minDistance) {
|
||||
return [new Point(from.x, from.y + 2 * minDistance), new Point(to.x, from.y + 2 * minDistance)];
|
||||
return [new Point(from.x, from.y + 2 * minDistance), new Point(to.x, from.y + 2 * minDistance)]
|
||||
}
|
||||
return [new Point(to.x, from.y)];
|
||||
}
|
||||
else {
|
||||
return [new Point(to.x, from.y)]
|
||||
} else {
|
||||
if (from.y - to.y < minDistance) {
|
||||
return [new Point(from.x, from.y - 2 * minDistance), new Point(to.x, from.y - 2 * minDistance)];
|
||||
return [new Point(from.x, from.y - 2 * minDistance), new Point(to.x, from.y - 2 * minDistance)]
|
||||
}
|
||||
return [new Point(to.x, from.y)];
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (to.direction === Direction.Left ||
|
||||
(to.direction === Direction.Up && from.y < to.y) ||
|
||||
(to.direction === Direction.Bottom && from.y > to.y)) {
|
||||
return [new Point(to.x, from.y)];
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
// The to point is on the right.
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (to.direction === Direction.Right) {
|
||||
if (from.y < to.y) {
|
||||
return getVerticalPoints(from, to);
|
||||
return getVerticalPoints(from, to)
|
||||
} else {
|
||||
const pts = getVerticalPoints(to, from)
|
||||
return [pts[1], pts[0]]
|
||||
}
|
||||
else {
|
||||
var pts = getVerticalPoints(to, from);
|
||||
return [pts[1], pts[0]];
|
||||
}
|
||||
}
|
||||
else {
|
||||
return [new Point(from.x, to.y)];
|
||||
} else {
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
}
|
||||
}
|
||||
function getNextPointByRight (from, to) {
|
||||
if (from.x === to.x || from.y === to.y) {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
// The to point is on the right.
|
||||
if (from.x < to.x) {
|
||||
if (to.direction === Direction.Right && to.x - from.x > 3 * minDistance) {
|
||||
if (from.y < to.y) {
|
||||
if (to.y - from.y < minDistance) {
|
||||
return [new Point(from.x, from.y - 2 * minDistance), new Point(to.x, from.y - 2 * minDistance)];
|
||||
return [new Point(from.x, from.y - 2 * minDistance), new Point(to.x, from.y - 2 * minDistance)]
|
||||
}
|
||||
return [new Point(to.x, from.y)];
|
||||
}
|
||||
else {
|
||||
return [new Point(to.x, from.y)]
|
||||
} else {
|
||||
if (from.y - to.y < minDistance) {
|
||||
return [new Point(from.x, from.y + 2 * minDistance), new Point(to.x, from.y + 2 * minDistance)];
|
||||
return [new Point(from.x, from.y + 2 * minDistance), new Point(to.x, from.y + 2 * minDistance)]
|
||||
}
|
||||
return [new Point(to.x, from.y)];
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (to.direction === Direction.Right ||
|
||||
(to.direction === Direction.Up && from.y < to.y) ||
|
||||
(to.direction === Direction.Bottom && from.y > to.y)) {
|
||||
return [new Point(to.x, from.y)];
|
||||
return [new Point(to.x, from.y)]
|
||||
}
|
||||
return [new Point(from.x, to.y)];
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
// The to point is on the left.
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (to.direction === Direction.Left) {
|
||||
if (from.y < to.y) {
|
||||
return getVerticalPoints(from, to);
|
||||
return getVerticalPoints(from, to)
|
||||
} else {
|
||||
const pts = getVerticalPoints(to, from)
|
||||
return [pts[1], pts[0]]
|
||||
}
|
||||
else {
|
||||
var pts = getVerticalPoints(to, from);
|
||||
return [pts[1], pts[0]];
|
||||
}
|
||||
}
|
||||
else {
|
||||
return [new Point(from.x, to.y)];
|
||||
} else {
|
||||
return [new Point(from.x, to.y)]
|
||||
}
|
||||
}
|
||||
}
|
||||
function getHorizontalPoints (left, right) {
|
||||
var x = left.x + (right.x - left.x) / 2;
|
||||
return [new Point(x, left.y), new Point(x, right.y)];
|
||||
const x = left.x + (right.x - left.x) / 2
|
||||
return [new Point(x, left.y), new Point(x, right.y)]
|
||||
}
|
||||
function getVerticalPoints (up, bottom) {
|
||||
var y = up.y + (bottom.y - up.y) / 2;
|
||||
return [new Point(up.x, y), new Point(bottom.x, y)];
|
||||
const y = up.y + (bottom.y - up.y) / 2
|
||||
return [new Point(up.x, y), new Point(bottom.x, y)]
|
||||
}
|
||||
// # sourceMappingURL=polyline.js.map
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function arrowAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
}
|
||||
// # sourceMappingURL=arrow.anchor.js.map
|
||||
@@ -1,45 +1,45 @@
|
||||
export function leftArrow (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 3)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 2) / 3)
|
||||
// ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + (node.rect.height * 2) / 3)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + (node.rect.height * 2) / 3)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
export function rightArrow (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 3);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height / 3);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 3)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height / 3)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + (node.rect.height * 2) / 3)
|
||||
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 3)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
export function twowayArrow (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height / 3);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + (node.rect.height * 2) / 3);
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height / 3)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width - node.rect.height / 2), node.rect.y + (node.rect.height * 2) / 3)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + (node.rect.height * 2) / 3)
|
||||
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=arrow.js.map
|
||||
@@ -1,23 +1,23 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function leftArrowIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function leftArrowTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3, node.rect.width - node.rect.height / 2, node.rect.height / 3);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3, node.rect.width - node.rect.height / 2, node.rect.height / 3)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
export function rightArrowIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function rightArrowTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y + node.rect.height / 3, node.rect.width - node.rect.height / 2, node.rect.height / 3);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y + node.rect.height / 3, node.rect.width - node.rect.height / 2, node.rect.height / 3)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
export function twowayArrowIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function twowayArrowTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3, node.rect.width - node.rect.height, node.rect.height / 3);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3, node.rect.width - node.rect.height, node.rect.height / 3)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=arrow.rect.js.map
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function circleAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
for (var i = 5; i < 360; i += 5) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
for (let i = 5; i < 360; i += 5) {
|
||||
if (i % 90 === 0) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
var direction = Math.round(i / 90);
|
||||
var pt = new Point(node.rect.center.x + (Math.sin((i / 180) * Math.PI) * node.rect.width) / 2, node.rect.center.y + (Math.cos((i / 180) * Math.PI) * node.rect.height) / 2, direction);
|
||||
pt.hidden = true;
|
||||
node.anchors.push(pt);
|
||||
const direction = Math.round(i / 90)
|
||||
const pt = new Point(node.rect.center.x + (Math.sin((i / 180) * Math.PI) * node.rect.width) / 2, node.rect.center.y + (Math.cos((i / 180) * Math.PI) * node.rect.height) / 2, direction)
|
||||
pt.hidden = true
|
||||
node.anchors.push(pt)
|
||||
}
|
||||
}
|
||||
// # sourceMappingURL=circle.anchor.js.map
|
||||
@@ -1,7 +1,7 @@
|
||||
export function circle (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.beginPath()
|
||||
ctx.ellipse(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 2, node.rect.width / 2, node.rect.height / 2, 0, 0, Math.PI * 2);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=circle.js.map
|
||||
@@ -1,27 +1,26 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function circleIconRect (node) {
|
||||
var w = node.rect.width / 2;
|
||||
var h = node.rect.height / 2;
|
||||
let w = node.rect.width / 2
|
||||
let h = node.rect.height / 2
|
||||
if (w > h) {
|
||||
w = h;
|
||||
w = h
|
||||
} else {
|
||||
h = w
|
||||
}
|
||||
else {
|
||||
h = w;
|
||||
}
|
||||
var top = node.rect.height / 10;
|
||||
let top = node.rect.height / 10
|
||||
if (top < 10) {
|
||||
top = 10;
|
||||
top = 10
|
||||
}
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h);
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h)
|
||||
}
|
||||
export function circleTextRect (node) {
|
||||
var bottom = node.rect.height / 20;
|
||||
let bottom = node.rect.height / 20
|
||||
if (bottom < 5) {
|
||||
bottom = 0;
|
||||
bottom = 0
|
||||
}
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 4, node.rect.y + (node.rect.height * 2) / 3 - bottom, node.rect.width / 2, node.rect.height / 3 - 5);
|
||||
var w = (node.rect.width * 5) / 7;
|
||||
var h = (node.rect.height * 5) / 7;
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + (node.rect.height - h) / 2, w, h);
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 4, node.rect.y + (node.rect.height * 2) / 3 - bottom, node.rect.width / 2, node.rect.height / 3 - 5)
|
||||
const w = (node.rect.width * 5) / 7
|
||||
const h = (node.rect.height * 5) / 7
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + (node.rect.height - h) / 2, w, h)
|
||||
}
|
||||
// # sourceMappingURL=circle.rect.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function cloudAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height * 3) / 5, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 9, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 5, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + (node.rect.height * 4) / 5, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height * 3) / 5, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height / 9, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 5, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + (node.rect.height * 4) / 5, Direction.Bottom))
|
||||
}
|
||||
// # sourceMappingURL=cloud.anchor.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
export function cloud (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 13) / 16);
|
||||
ctx.bezierCurveTo(node.rect.x - node.rect.width / 15, node.rect.y + (node.rect.height * 13) / 16, node.rect.x - node.rect.width / 15, node.rect.y + (node.rect.height * 7) / 16, node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 7) / 16);
|
||||
ctx.bezierCurveTo(node.rect.x + node.rect.width / 5, node.rect.y, node.rect.x + (node.rect.width * 4) / 5, node.rect.y, node.rect.x + (node.rect.width * 4) / 5, node.rect.y + (node.rect.height * 7) / 16);
|
||||
ctx.bezierCurveTo(node.rect.x + (node.rect.width * 16) / 15, node.rect.y + (node.rect.height * 7) / 16, node.rect.x + (node.rect.width * 16) / 15, node.rect.y + (node.rect.height * 13) / 16, node.rect.x + (node.rect.width * 4) / 5, node.rect.y + (node.rect.height * 13) / 16);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 13) / 16)
|
||||
ctx.bezierCurveTo(node.rect.x - node.rect.width / 15, node.rect.y + (node.rect.height * 13) / 16, node.rect.x - node.rect.width / 15, node.rect.y + (node.rect.height * 7) / 16, node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 7) / 16)
|
||||
ctx.bezierCurveTo(node.rect.x + node.rect.width / 5, node.rect.y, node.rect.x + (node.rect.width * 4) / 5, node.rect.y, node.rect.x + (node.rect.width * 4) / 5, node.rect.y + (node.rect.height * 7) / 16)
|
||||
ctx.bezierCurveTo(node.rect.x + (node.rect.width * 16) / 15, node.rect.y + (node.rect.height * 7) / 16, node.rect.x + (node.rect.width * 16) / 15, node.rect.y + (node.rect.height * 13) / 16, node.rect.x + (node.rect.width * 4) / 5, node.rect.y + (node.rect.height * 13) / 16)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=cloud.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function cloudIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function cloudTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 4, node.rect.y + node.rect.height / 4, node.rect.width / 2, (node.rect.height * 6) / 11);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 4, node.rect.y + node.rect.height / 4, node.rect.width / 2, (node.rect.height * 6) / 11)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=cloud.rect.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function cubeAnchors (node) {
|
||||
var offset = node.z * Math.sin((45 * Math.PI) / 180);
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.ey - (node.rect.height - offset) / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + offset / 2, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.ex - offset / 2, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width - offset) / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
const offset = node.z * Math.sin((45 * Math.PI) / 180)
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.ey - (node.rect.height - offset) / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + offset / 2, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.ex - offset / 2, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width - offset) / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
}
|
||||
// # sourceMappingURL=cube.anchor.js.map
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Cube } from './cube.model';
|
||||
import { Cube } from './cube.model'
|
||||
export function cube (ctx, node) {
|
||||
new Cube(node.rect, node.z, node.zRotate, node.fillStyle, node.strokeStyle).render(ctx);
|
||||
new Cube(node.rect, node.z, node.zRotate, node.fillStyle, node.strokeStyle).render(ctx)
|
||||
}
|
||||
// # sourceMappingURL=cube.js.map
|
||||
@@ -1,64 +1,63 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { pSBC } from '../../utils/math';
|
||||
var Surface = /** @class */ (function () {
|
||||
import { Point } from '../../models/point'
|
||||
import { pSBC } from '../../utils/math'
|
||||
const Surface = /** @class */ (function () {
|
||||
function Surface (pt1, pt2, pt3, pt4, fillStyle, strokeStyle) {
|
||||
if (fillStyle === void 0) { fillStyle = ''; }
|
||||
if (strokeStyle === void 0) { strokeStyle = ''; }
|
||||
this.points = [];
|
||||
this.fillStyle = '';
|
||||
this.strokeStyle = '';
|
||||
this.points.push(pt1);
|
||||
this.points.push(pt2);
|
||||
this.points.push(pt3);
|
||||
this.points.push(pt4);
|
||||
this.fillStyle = fillStyle;
|
||||
this.strokeStyle = strokeStyle || fillStyle;
|
||||
if (fillStyle === void 0) { fillStyle = '' }
|
||||
if (strokeStyle === void 0) { strokeStyle = '' }
|
||||
this.points = []
|
||||
this.fillStyle = ''
|
||||
this.strokeStyle = ''
|
||||
this.points.push(pt1)
|
||||
this.points.push(pt2)
|
||||
this.points.push(pt3)
|
||||
this.points.push(pt4)
|
||||
this.fillStyle = fillStyle
|
||||
this.strokeStyle = strokeStyle || fillStyle
|
||||
}
|
||||
Surface.prototype.render = function (ctx) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = this.fillStyle;
|
||||
ctx.strokeStyle = this.strokeStyle;
|
||||
ctx.beginPath();
|
||||
for (var i = 0; i < this.points.length; ++i) {
|
||||
ctx.save()
|
||||
ctx.fillStyle = this.fillStyle
|
||||
ctx.strokeStyle = this.strokeStyle
|
||||
ctx.beginPath()
|
||||
for (let i = 0; i < this.points.length; ++i) {
|
||||
if (i) {
|
||||
ctx.lineTo(this.points[i].x, this.points[i].y);
|
||||
}
|
||||
else {
|
||||
ctx.moveTo(this.points[i].x, this.points[i].y);
|
||||
ctx.lineTo(this.points[i].x, this.points[i].y)
|
||||
} else {
|
||||
ctx.moveTo(this.points[i].x, this.points[i].y)
|
||||
}
|
||||
}
|
||||
ctx.closePath();
|
||||
this.fillStyle && ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
};
|
||||
return Surface;
|
||||
}());
|
||||
export { Surface };
|
||||
var Cube = /** @class */ (function () {
|
||||
ctx.closePath()
|
||||
this.fillStyle && ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
}
|
||||
return Surface
|
||||
}())
|
||||
export { Surface }
|
||||
const Cube = /** @class */ (function () {
|
||||
function Cube (rect, z, zRotate, fillStyle, strokeStyle) {
|
||||
if (fillStyle === void 0) { fillStyle = '#ddd'; }
|
||||
if (strokeStyle === void 0) { strokeStyle = '#ccc'; }
|
||||
this.surfaces = [];
|
||||
var offset = z * Math.sin((45 * Math.PI) / 180);
|
||||
var p1 = new Point(rect.x, rect.y + offset);
|
||||
var p2 = new Point(rect.ex - offset, rect.y + offset);
|
||||
var p3 = new Point(rect.ex - offset, rect.ey);
|
||||
var p4 = new Point(rect.x, rect.ey);
|
||||
if (fillStyle === void 0) { fillStyle = '#ddd' }
|
||||
if (strokeStyle === void 0) { strokeStyle = '#ccc' }
|
||||
this.surfaces = []
|
||||
const offset = z * Math.sin((45 * Math.PI) / 180)
|
||||
const p1 = new Point(rect.x, rect.y + offset)
|
||||
const p2 = new Point(rect.ex - offset, rect.y + offset)
|
||||
const p3 = new Point(rect.ex - offset, rect.ey)
|
||||
const p4 = new Point(rect.x, rect.ey)
|
||||
// front
|
||||
this.surfaces.push(new Surface(p1, p2, p3, p4, fillStyle, strokeStyle));
|
||||
this.surfaces.push(new Surface(p1, p2, p3, p4, fillStyle, strokeStyle))
|
||||
// up
|
||||
this.surfaces.push(new Surface(p1, new Point(rect.x + offset, rect.y), new Point(rect.ex, rect.y), p2, pSBC(0.5, fillStyle), strokeStyle));
|
||||
this.surfaces.push(new Surface(p1, new Point(rect.x + offset, rect.y), new Point(rect.ex, rect.y), p2, pSBC(0.5, fillStyle), strokeStyle))
|
||||
// right
|
||||
this.surfaces.push(new Surface(p2, new Point(rect.ex, rect.y), new Point(rect.ex, rect.ey - offset), p3, pSBC(0.6, fillStyle), strokeStyle));
|
||||
this.surfaces.push(new Surface(p2, new Point(rect.ex, rect.y), new Point(rect.ex, rect.ey - offset), p3, pSBC(0.6, fillStyle), strokeStyle))
|
||||
}
|
||||
Cube.prototype.render = function (ctx) {
|
||||
for (var _i = 0, _a = this.surfaces; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
item.render(ctx);
|
||||
for (let _i = 0, _a = this.surfaces; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
item.render(ctx)
|
||||
}
|
||||
};
|
||||
return Cube;
|
||||
}());
|
||||
export { Cube };
|
||||
}
|
||||
return Cube
|
||||
}())
|
||||
export { Cube }
|
||||
// # sourceMappingURL=cube.model.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function cubeIconRect (node) {
|
||||
node.fullIconRect = node.fullTextRect;
|
||||
node.iconRect = new Rect(node.fullIconRect.x, node.fullIconRect.y, node.fullIconRect.width, (node.fullIconRect.height * 2) / 3);
|
||||
node.fullIconRect = node.fullTextRect
|
||||
node.iconRect = new Rect(node.fullIconRect.x, node.fullIconRect.y, node.fullIconRect.width, (node.fullIconRect.height * 2) / 3)
|
||||
}
|
||||
export function cubeTextRect (node) {
|
||||
var offset = node.z * Math.sin((45 * Math.PI) / 180);
|
||||
node.fullTextRect = new Rect(node.rect.x, node.rect.y + offset, node.rect.width - offset, node.rect.height - offset);
|
||||
node.textRect = new Rect(node.fullTextRect.x + 10, node.fullTextRect.y + (node.fullTextRect.height * 2) / 3, node.fullTextRect.width - 20, node.fullTextRect.height / 3 - 5);
|
||||
const offset = node.z * Math.sin((45 * Math.PI) / 180)
|
||||
node.fullTextRect = new Rect(node.rect.x, node.rect.y + offset, node.rect.width - offset, node.rect.height - offset)
|
||||
node.textRect = new Rect(node.fullTextRect.x + 10, node.fullTextRect.y + (node.fullTextRect.height * 2) / 3, node.fullTextRect.width - 20, node.fullTextRect.height / 3 - 5)
|
||||
}
|
||||
// # sourceMappingURL=cube.rect.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
export function diamond (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=diamond.js.map
|
||||
@@ -1,27 +1,26 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function diamondIconRect (node) {
|
||||
var w = node.rect.width / 3;
|
||||
var h = node.rect.height / 3;
|
||||
let w = node.rect.width / 3
|
||||
let h = node.rect.height / 3
|
||||
if (w > h) {
|
||||
w = h;
|
||||
w = h
|
||||
} else {
|
||||
h = w
|
||||
}
|
||||
else {
|
||||
h = w;
|
||||
}
|
||||
var top = node.rect.width / 5;
|
||||
let top = node.rect.width / 5
|
||||
if (top < 10) {
|
||||
top = 10;
|
||||
top = 10
|
||||
}
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h);
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h)
|
||||
}
|
||||
export function diamondTextRect (node) {
|
||||
var bottom = node.rect.height / 10;
|
||||
let bottom = node.rect.height / 10
|
||||
if (bottom < 5) {
|
||||
bottom = 0;
|
||||
bottom = 0
|
||||
}
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 3, node.rect.y + (node.rect.height * 2) / 3 - bottom, node.rect.width / 3, node.rect.height / 3 - 5);
|
||||
var w = node.rect.width / 2;
|
||||
var h = (node.rect.height * 1) / 2;
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 4, w, h);
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 3, node.rect.y + (node.rect.height * 2) / 3 - bottom, node.rect.width / 3, node.rect.height / 3 - 5)
|
||||
const w = node.rect.width / 2
|
||||
const h = (node.rect.height * 1) / 2
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 4, w, h)
|
||||
}
|
||||
// # sourceMappingURL=diamond.rect.js.map
|
||||
@@ -1,16 +1,16 @@
|
||||
export function file (ctx, node) {
|
||||
ctx.beginPath();
|
||||
var offsetX = node.rect.width / 6;
|
||||
ctx.moveTo(node.rect.x, node.rect.y);
|
||||
ctx.lineTo(node.rect.ex - offsetX, node.rect.y);
|
||||
ctx.beginPath()
|
||||
const offsetX = node.rect.width / 6
|
||||
ctx.moveTo(node.rect.x, node.rect.y)
|
||||
ctx.lineTo(node.rect.ex - offsetX, node.rect.y)
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + offsetX)
|
||||
ctx.lineTo(node.rect.ex, node.rect.ey)
|
||||
ctx.lineTo(node.rect.x, node.rect.ey)
|
||||
ctx.closePath()
|
||||
ctx.moveTo(node.rect.ex - offsetX, node.rect.y)
|
||||
ctx.lineTo(node.rect.ex - offsetX, node.rect.y + offsetX)
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + offsetX);
|
||||
ctx.lineTo(node.rect.ex, node.rect.ey);
|
||||
ctx.lineTo(node.rect.x, node.rect.ey);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(node.rect.ex - offsetX, node.rect.y);
|
||||
ctx.lineTo(node.rect.ex - offsetX, node.rect.y + offsetX);
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + offsetX);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=file.js.map
|
||||
@@ -1,18 +1,17 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function graffitiAnchors (node) {
|
||||
if (!node.points || !node.points.length) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
var pt1 = node.points[0];
|
||||
var pt2 = node.points[node.points.length - 1];
|
||||
const pt1 = node.points[0]
|
||||
const pt2 = node.points[node.points.length - 1]
|
||||
if (pt1.x < pt2.x) {
|
||||
node.anchors.push(new Point(pt1.x, pt1.y, Direction.Left));
|
||||
node.anchors.push(new Point(pt2.x, pt2.y, Direction.Right));
|
||||
}
|
||||
else {
|
||||
node.anchors.push(new Point(pt1.x, pt1.y, Direction.Right));
|
||||
node.anchors.push(new Point(pt2.x, pt2.y, Direction.Left));
|
||||
node.anchors.push(new Point(pt1.x, pt1.y, Direction.Left))
|
||||
node.anchors.push(new Point(pt2.x, pt2.y, Direction.Right))
|
||||
} else {
|
||||
node.anchors.push(new Point(pt1.x, pt1.y, Direction.Right))
|
||||
node.anchors.push(new Point(pt2.x, pt2.y, Direction.Left))
|
||||
}
|
||||
}
|
||||
// # sourceMappingURL=graffiti.anchor.js.map
|
||||
@@ -1,14 +1,14 @@
|
||||
export function graffiti (ctx, node) {
|
||||
if (!node.points || !node.points[0]) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.points[0].x, node.points[0].y);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.points[0].x, node.points[0].y)
|
||||
node.points.forEach(function (pt) {
|
||||
ctx.lineTo(pt.x, pt.y);
|
||||
});
|
||||
node['closePath'] && !node['doing'] && ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.lineTo(pt.x, pt.y)
|
||||
})
|
||||
node.closePath && !node.doing && ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=graffiti.js.map
|
||||
@@ -1,21 +1,21 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function hexagonAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
var ptLT = new Point(node.rect.x + node.rect.width / 10, node.rect.y + node.rect.height / 4, Direction.Left);
|
||||
ptLT.hidden = true;
|
||||
node.anchors.push(ptLT);
|
||||
var ptRT = new Point(node.rect.x + node.rect.width / 10, node.rect.y + (node.rect.height * 3) / 4, Direction.Left);
|
||||
ptRT.hidden = true;
|
||||
node.anchors.push(ptRT);
|
||||
var ptLB = new Point(node.rect.x + (node.rect.width * 9) / 10, node.rect.y + node.rect.height / 4, Direction.Right);
|
||||
ptLB.hidden = true;
|
||||
node.anchors.push(ptLB);
|
||||
var ptRB = new Point(node.rect.x + (node.rect.width * 9) / 10, node.rect.y + (node.rect.height * 3) / 4, Direction.Right);
|
||||
ptRB.hidden = true;
|
||||
node.anchors.push(ptRB);
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
const ptLT = new Point(node.rect.x + node.rect.width / 10, node.rect.y + node.rect.height / 4, Direction.Left)
|
||||
ptLT.hidden = true
|
||||
node.anchors.push(ptLT)
|
||||
const ptRT = new Point(node.rect.x + node.rect.width / 10, node.rect.y + (node.rect.height * 3) / 4, Direction.Left)
|
||||
ptRT.hidden = true
|
||||
node.anchors.push(ptRT)
|
||||
const ptLB = new Point(node.rect.x + (node.rect.width * 9) / 10, node.rect.y + node.rect.height / 4, Direction.Right)
|
||||
ptLB.hidden = true
|
||||
node.anchors.push(ptLB)
|
||||
const ptRB = new Point(node.rect.x + (node.rect.width * 9) / 10, node.rect.y + (node.rect.height * 3) / 4, Direction.Right)
|
||||
ptRB.hidden = true
|
||||
node.anchors.push(ptRB)
|
||||
}
|
||||
// # sourceMappingURL=hexagon.anchor.js.map
|
||||
@@ -1,14 +1,14 @@
|
||||
export function hexagon (ctx, node) {
|
||||
ctx.beginPath();
|
||||
var pos = node.rect.width / 5;
|
||||
ctx.moveTo(node.rect.x + pos, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width - pos, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo(node.rect.x + node.rect.width - pos, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x + pos, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2);
|
||||
ctx.beginPath()
|
||||
const pos = node.rect.width / 5
|
||||
ctx.moveTo(node.rect.x + pos, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width - pos, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo(node.rect.x + node.rect.width - pos, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x + pos, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=hexagon.js.map
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function hexagonIconRect (node) {
|
||||
var w = (node.rect.width * 3) / 5;
|
||||
var h = (node.rect.height * 3) / 4;
|
||||
node.iconRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, h - node.paddingTopNum - node.paddingBottomNum);
|
||||
node.fullIconRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
||||
const w = (node.rect.width * 3) / 5
|
||||
const h = (node.rect.height * 3) / 4
|
||||
node.iconRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, h - node.paddingTopNum - node.paddingBottomNum)
|
||||
node.fullIconRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum)
|
||||
}
|
||||
export function hexagonTextRect (node) {
|
||||
var w = (node.rect.width * 3) / 5;
|
||||
var h = node.rect.height / 4;
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.rect.height - h + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, h);
|
||||
node.fullTextRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
||||
const w = (node.rect.width * 3) / 5
|
||||
const h = node.rect.height / 4
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.rect.height - h + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, h)
|
||||
node.fullTextRect = new Rect(node.rect.x + node.rect.width / 5 + node.paddingLeftNum, node.rect.y + node.paddingTopNum, w - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum)
|
||||
}
|
||||
// # sourceMappingURL=hexagon.rect.js.map
|
||||
@@ -1,19 +1,18 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function imageAnchors (node) {
|
||||
var textWidth = 0;
|
||||
var textHeight = 0;
|
||||
let textWidth = 0
|
||||
let textHeight = 0
|
||||
if (node.text) {
|
||||
if (node.paddingRightNum) {
|
||||
textWidth = node.paddingRightNum;
|
||||
}
|
||||
else {
|
||||
textHeight = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1);
|
||||
textWidth = node.paddingRightNum
|
||||
} else {
|
||||
textHeight = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1)
|
||||
}
|
||||
}
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height - textHeight) / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width - textWidth) / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width - textWidth, node.rect.y + (node.rect.height - textHeight) / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width - textWidth) / 2, node.rect.y + node.rect.height - textHeight, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height - textHeight) / 2, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width - textWidth) / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width - textWidth, node.rect.y + (node.rect.height - textHeight) / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width - textWidth) / 2, node.rect.y + node.rect.height - textHeight, Direction.Bottom))
|
||||
}
|
||||
// # sourceMappingURL=image.anchor.js.map
|
||||
@@ -1,27 +1,25 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function imageIconRect (node) {
|
||||
var textWidth = 0;
|
||||
var textHeight = 0;
|
||||
let textWidth = 0
|
||||
let textHeight = 0
|
||||
if (node.text) {
|
||||
if (node.paddingRightNum) {
|
||||
textWidth = node.paddingRightNum;
|
||||
}
|
||||
else {
|
||||
textHeight = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1);
|
||||
textWidth = node.paddingRightNum
|
||||
} else {
|
||||
textHeight = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1)
|
||||
}
|
||||
}
|
||||
node.iconRect = new Rect(node.rect.x, node.rect.y, node.rect.width - textWidth, node.rect.height - textHeight);
|
||||
node.fullIconRect = node.rect;
|
||||
node.iconRect = new Rect(node.rect.x, node.rect.y, node.rect.width - textWidth, node.rect.height - textHeight)
|
||||
node.fullIconRect = node.rect
|
||||
}
|
||||
export function imageTextRect (node) {
|
||||
if (node.paddingRightNum) {
|
||||
var width = node.paddingRightNum - 5;
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width - width, node.rect.y, width, node.rect.height - node.textOffsetY * 2);
|
||||
const width = node.paddingRightNum - 5
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width - width, node.rect.y, width, node.rect.height - node.textOffsetY * 2)
|
||||
} else {
|
||||
const height = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1)
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y + node.rect.height - height, node.rect.width - node.textOffsetX * 2, height)
|
||||
}
|
||||
else {
|
||||
var height = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1);
|
||||
node.textRect = new Rect(node.rect.x, node.rect.y + node.rect.height - height, node.rect.width - node.textOffsetX * 2, height);
|
||||
}
|
||||
node.fullTextRect = node.rect;
|
||||
node.fullTextRect = node.rect
|
||||
}
|
||||
// # sourceMappingURL=image.rect.js.map
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function lineAnchors (node) {
|
||||
var y = node.rect.y + node.rect.height / 2;
|
||||
node.anchors.push(new Point(node.rect.x, y, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, y, Direction.Right));
|
||||
var scale = topology.data.scale || 1; // 取全局的 scale 属性
|
||||
for (var i = node.rect.x + 5 * scale; i < node.rect.ex; i += 5 * scale) {
|
||||
var pt = new Point(i, y, Direction.Bottom);
|
||||
pt.hidden = true;
|
||||
node.anchors.push(pt);
|
||||
const y = node.rect.y + node.rect.height / 2
|
||||
node.anchors.push(new Point(node.rect.x, y, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, y, Direction.Right))
|
||||
const scale = topology.data.scale || 1 // 取全局的 scale 属性
|
||||
for (let i = node.rect.x + 5 * scale; i < node.rect.ex; i += 5 * scale) {
|
||||
const pt = new Point(i, y, Direction.Bottom)
|
||||
pt.hidden = true
|
||||
node.anchors.push(pt)
|
||||
}
|
||||
}
|
||||
// # sourceMappingURL=line.anchor.js.map
|
||||
@@ -1,8 +1,8 @@
|
||||
export function line (ctx, node) {
|
||||
ctx.beginPath();
|
||||
var y = node.rect.y + node.rect.height / 2;
|
||||
ctx.moveTo(node.rect.x, y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
const y = node.rect.y + node.rect.height / 2
|
||||
ctx.moveTo(node.rect.x, y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, y)
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=line.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function lineIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function lineTextRect (node) {
|
||||
node.fullTextRect = new Rect(node.rect.x + 10, node.rect.y + node.rect.height / 2 - 20, node.rect.width - 20, 20);
|
||||
node.textRect = node.fullTextRect;
|
||||
node.fullTextRect = new Rect(node.rect.x + 10, node.rect.y + node.rect.height / 2 - 20, node.rect.width - 20, 20)
|
||||
node.textRect = node.fullTextRect
|
||||
}
|
||||
// # sourceMappingURL=line.rect.js.map
|
||||
@@ -1,27 +1,25 @@
|
||||
export function lines (ctx, node) {
|
||||
if (!node.points || !node.points[1]) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.points[0].x, node.points[0].y);
|
||||
for (var i = 1; i < node.points.length;) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.points[0].x, node.points[0].y)
|
||||
for (let i = 1; i < node.points.length;) {
|
||||
// curve 控制点
|
||||
if (node.points[i].data) {
|
||||
if (node.points[i + 2]) {
|
||||
ctx.bezierCurveTo(node.points[i].x, node.points[i].y, node.points[i + 1].x, node.points[i + 1].y, node.points[i + 2].x, node.points[i + 2].y);
|
||||
i += 2;
|
||||
ctx.bezierCurveTo(node.points[i].x, node.points[i].y, node.points[i + 1].x, node.points[i + 1].y, node.points[i + 2].x, node.points[i + 2].y)
|
||||
i += 2
|
||||
} else {
|
||||
break
|
||||
}
|
||||
else {
|
||||
break;
|
||||
} else {
|
||||
ctx.lineTo(node.points[i].x, node.points[i].y)
|
||||
++i
|
||||
}
|
||||
}
|
||||
else {
|
||||
ctx.lineTo(node.points[i].x, node.points[i].y);
|
||||
++i;
|
||||
}
|
||||
}
|
||||
node['closePath'] && !node['doing'] && ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
node.closePath && !node.doing && ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=lines.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function messageAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height * 3) / 8, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 8, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 4, node.rect.ey, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height * 3) / 8, Direction.Left))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 8, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 4, node.rect.ey, Direction.Bottom))
|
||||
}
|
||||
// # sourceMappingURL=message.anchor.js.map
|
||||
@@ -1,14 +1,14 @@
|
||||
export function message (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 4);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width * 8) / 16, node.rect.y + (node.rect.height * 3) / 4);
|
||||
ctx.lineTo(node.rect.x + node.rect.width / 4, node.rect.ey);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width * 5) / 16, node.rect.y + (node.rect.height * 3) / 4);
|
||||
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 3) / 4);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 4)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width * 8) / 16, node.rect.y + (node.rect.height * 3) / 4)
|
||||
ctx.lineTo(node.rect.x + node.rect.width / 4, node.rect.ey)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width * 5) / 16, node.rect.y + (node.rect.height * 3) / 4)
|
||||
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 3) / 4)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=message.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function messageIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.fullIconRect = node.iconRect;
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
node.fullIconRect = node.iconRect
|
||||
}
|
||||
export function messageTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, (node.rect.height * 3) / 4 - node.paddingTopNum - node.paddingBottomNum);
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, (node.rect.height * 3) / 4 - node.paddingTopNum - node.paddingBottomNum)
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=message.rect.js.map
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Point } from '../../models/point'
|
||||
export function mindLineAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height, 4));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height, 2));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height, 4))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height, 2))
|
||||
}
|
||||
// # sourceMappingURL=mindLine.anchor.js.map
|
||||
@@ -1,8 +1,8 @@
|
||||
export function mindLine (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=mindLine.js.map
|
||||
@@ -1,72 +1,68 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function mindNodeAnchors (node) {
|
||||
var r = borderRadius(node);
|
||||
const r = borderRadius(node)
|
||||
// 上四
|
||||
var topN = 5; // 上方节点个数,控制位置,实际节点数依然是 4 个
|
||||
const topN = 5 // 上方节点个数,控制位置,实际节点数依然是 4 个
|
||||
for (var i = 0; i < topN; i++) {
|
||||
if (i === 2) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
var x = node.rect.x + (node.rect.width * (i + 1)) / (topN + 1);
|
||||
var y = node.rect.y;
|
||||
var x = node.rect.x + (node.rect.width * (i + 1)) / (topN + 1)
|
||||
var y = node.rect.y
|
||||
if (x < node.rect.x + r) {
|
||||
// 在左侧圆角
|
||||
y = getYByCircle(node.rect.x + r, y + r, x, r, -1);
|
||||
}
|
||||
else if (x > node.rect.x + node.rect.width - r) {
|
||||
y = getYByCircle(node.rect.x + r, y + r, x, r, -1)
|
||||
} else if (x > node.rect.x + node.rect.width - r) {
|
||||
// 在右侧圆角
|
||||
y = getYByCircle(node.rect.x + node.rect.width - r, y + r, x, r, -1);
|
||||
y = getYByCircle(node.rect.x + node.rect.width - r, y + r, x, r, -1)
|
||||
}
|
||||
node.anchors.push(new Point(x, y, Direction.Up));
|
||||
node.anchors.push(new Point(x, y, Direction.Up))
|
||||
}
|
||||
// 右三
|
||||
var rightN = 3; // 右侧节点数
|
||||
const rightN = 3 // 右侧节点数
|
||||
for (var i = 0; i < rightN; i++) {
|
||||
var y = node.rect.y + (node.rect.height * (i + 1)) / (rightN + 1);
|
||||
var x = node.rect.x + node.rect.width;
|
||||
var y = node.rect.y + (node.rect.height * (i + 1)) / (rightN + 1)
|
||||
var x = node.rect.x + node.rect.width
|
||||
if (y < node.rect.y + r) {
|
||||
// 在上侧圆角以内
|
||||
x = getXByCircle(x - r, node.rect.y + r, y, r);
|
||||
}
|
||||
else if (y > node.rect.y + node.rect.height - r) {
|
||||
x = getXByCircle(x - r, node.rect.y + r, y, r)
|
||||
} else if (y > node.rect.y + node.rect.height - r) {
|
||||
// 下侧圆角
|
||||
x = getXByCircle(x - r, node.rect.y + node.rect.height - r, y, r);
|
||||
x = getXByCircle(x - r, node.rect.y + node.rect.height - r, y, r)
|
||||
}
|
||||
node.anchors.push(new Point(x, y, Direction.Right));
|
||||
node.anchors.push(new Point(x, y, Direction.Right))
|
||||
}
|
||||
// 下四
|
||||
var bottomN = 5; // 下侧节点数
|
||||
const bottomN = 5 // 下侧节点数
|
||||
for (var i = 0; i < bottomN; i++) {
|
||||
if (i === 2) {
|
||||
continue;
|
||||
continue
|
||||
}
|
||||
var x = node.rect.x + (node.rect.width * (i + 1)) / (bottomN + 1);
|
||||
var y = node.rect.y + node.rect.height;
|
||||
var x = node.rect.x + (node.rect.width * (i + 1)) / (bottomN + 1)
|
||||
var y = node.rect.y + node.rect.height
|
||||
if (x < node.rect.x + r) {
|
||||
// 在左侧圆角
|
||||
y = getYByCircle(node.rect.x + r, y - r, x, r);
|
||||
}
|
||||
else if (x > node.rect.x + node.rect.width - r) {
|
||||
y = getYByCircle(node.rect.x + r, y - r, x, r)
|
||||
} else if (x > node.rect.x + node.rect.width - r) {
|
||||
// 在右侧圆角
|
||||
y = getYByCircle(node.rect.x + node.rect.width - r, y - r, x, r);
|
||||
y = getYByCircle(node.rect.x + node.rect.width - r, y - r, x, r)
|
||||
}
|
||||
node.anchors.push(new Point(x, y, Direction.Bottom));
|
||||
node.anchors.push(new Point(x, y, Direction.Bottom))
|
||||
}
|
||||
// 左三
|
||||
var leftN = 3; // 左侧节点数
|
||||
const leftN = 3 // 左侧节点数
|
||||
for (var i = 0; i < leftN; i++) {
|
||||
var y = node.rect.y + (node.rect.height * (i + 1)) / (leftN + 1);
|
||||
var x = node.rect.x;
|
||||
var y = node.rect.y + (node.rect.height * (i + 1)) / (leftN + 1)
|
||||
var x = node.rect.x
|
||||
if (y < node.rect.y + r) {
|
||||
// 在上侧圆角以内
|
||||
x = getXByCircle(x + r, node.rect.y + r, y, r, -1);
|
||||
}
|
||||
else if (y > node.rect.y + node.rect.height - r) {
|
||||
x = getXByCircle(x + r, node.rect.y + r, y, r, -1)
|
||||
} else if (y > node.rect.y + node.rect.height - r) {
|
||||
// 下侧圆角
|
||||
x = getXByCircle(x + r, node.rect.y + node.rect.height - r, y, r, -1);
|
||||
x = getXByCircle(x + r, node.rect.y + node.rect.height - r, y, r, -1)
|
||||
}
|
||||
node.anchors.push(new Point(x, y, Direction.Left));
|
||||
node.anchors.push(new Point(x, y, Direction.Left))
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -75,20 +71,20 @@ export function mindNodeAnchors(node) {
|
||||
* @returns 元素实际半径
|
||||
*/
|
||||
function borderRadius (node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
return r;
|
||||
return r
|
||||
}
|
||||
/**
|
||||
* 获取圆的 x 坐标
|
||||
@@ -99,8 +95,8 @@ function borderRadius(node) {
|
||||
* @param sqrt 点可能在左侧,左侧填-1,右侧1(默认值)
|
||||
*/
|
||||
function getXByCircle (ox, oy, y, r, sqrt) {
|
||||
if (sqrt === void 0) { sqrt = 1; }
|
||||
return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((y - oy), 2)) + ox;
|
||||
if (sqrt === void 0) { sqrt = 1 }
|
||||
return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((y - oy), 2)) + ox
|
||||
}
|
||||
/**
|
||||
* 获取圆的 y 坐标
|
||||
@@ -111,7 +107,7 @@ function getXByCircle(ox, oy, y, r, sqrt) {
|
||||
* @param sqrt 点可以在上侧,也可能在下侧,上侧-1,下侧1(默认)
|
||||
*/
|
||||
function getYByCircle (ox, oy, x, r, sqrt) {
|
||||
if (sqrt === void 0) { sqrt = 1; }
|
||||
return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((x - ox), 2)) + oy;
|
||||
if (sqrt === void 0) { sqrt = 1 }
|
||||
return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((x - ox), 2)) + oy
|
||||
}
|
||||
// # sourceMappingURL=mindNode.anchor.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function pentagonAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 2) / 5, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width * 4) / 5, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 5, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height * 2) / 5, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 2) / 5, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width * 4) / 5, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 5, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + (node.rect.height * 2) / 5, Direction.Left))
|
||||
}
|
||||
// # sourceMappingURL=pentagon.anchor.js.map
|
||||
@@ -1,12 +1,12 @@
|
||||
export function pentagon (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 2) / 5);
|
||||
ctx.lineTo(node.rect.x + (node.rect.width * 4) / 5, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x + node.rect.width / 5, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 5);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 2) / 5)
|
||||
ctx.lineTo(node.rect.x + (node.rect.width * 4) / 5, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x + node.rect.width / 5, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 5)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=pentagon.js.map
|
||||
@@ -1,23 +1,22 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function pentagonIconRect (node) {
|
||||
var w = node.rect.width / 2;
|
||||
var h = node.rect.height / 2;
|
||||
let w = node.rect.width / 2
|
||||
let h = node.rect.height / 2
|
||||
if (w > h) {
|
||||
w = h;
|
||||
w = h
|
||||
} else {
|
||||
h = w
|
||||
}
|
||||
else {
|
||||
h = w;
|
||||
}
|
||||
var top = node.rect.height / 7;
|
||||
let top = node.rect.height / 7
|
||||
if (top < 10) {
|
||||
top = 10;
|
||||
top = 10
|
||||
}
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h);
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h)
|
||||
}
|
||||
export function pentagonTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 5) / 7, (node.rect.width * 3) / 5, node.rect.height / 4);
|
||||
var w = (node.rect.width * 3) / 5;
|
||||
var h = (node.rect.height * 3) / 5;
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 4, w, h);
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 5) / 7, (node.rect.width * 3) / 5, node.rect.height / 4)
|
||||
const w = (node.rect.width * 3) / 5
|
||||
const h = (node.rect.height * 3) / 5
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 4, w, h)
|
||||
}
|
||||
// # sourceMappingURL=pentagon.rect.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function pentagramAnchors (node) {
|
||||
node.anchors.push(new Point((Math.cos((18 / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin((18 / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Up));
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72 * 2) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * 2) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72 * 3) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * 3) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Bottom));
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72 * 4) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * 4) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Bottom));
|
||||
node.anchors.push(new Point((Math.cos((18 / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin((18 / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Up))
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72 * 2) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * 2) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72 * 3) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * 3) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Bottom))
|
||||
node.anchors.push(new Point((Math.cos(((18 + 72 * 4) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * 4) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2, Direction.Bottom))
|
||||
}
|
||||
// # sourceMappingURL=pentagram.anchor.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
export function pentagram (ctx, node) {
|
||||
ctx.beginPath();
|
||||
for (var i = 0; i < 5; ++i) {
|
||||
ctx.lineTo((Math.cos(((18 + 72 * i) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * i) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2);
|
||||
ctx.lineTo((Math.cos(((54 + 72 * i) / 180) * Math.PI) * node.rect.width) / 4 + node.rect.x + node.rect.width / 2, (-Math.sin(((54 + 72 * i) / 180) * Math.PI) * node.rect.width) / 4 + node.rect.y + node.rect.height / 2);
|
||||
ctx.beginPath()
|
||||
for (let i = 0; i < 5; ++i) {
|
||||
ctx.lineTo((Math.cos(((18 + 72 * i) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.x + node.rect.width / 2, (-Math.sin(((18 + 72 * i) / 180) * Math.PI) * node.rect.width) / 2 + node.rect.y + node.rect.height / 2)
|
||||
ctx.lineTo((Math.cos(((54 + 72 * i) / 180) * Math.PI) * node.rect.width) / 4 + node.rect.x + node.rect.width / 2, (-Math.sin(((54 + 72 * i) / 180) * Math.PI) * node.rect.width) / 4 + node.rect.y + node.rect.height / 2)
|
||||
}
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=pentagram.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function pentagramIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function pentagramTextRect (node) {
|
||||
var w = (node.rect.width * 2) / 5;
|
||||
var h = (node.rect.height * 2) / 5;
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + (node.rect.height - h) / 2, w, h);
|
||||
node.textRect = node.fullTextRect;
|
||||
const w = (node.rect.width * 2) / 5
|
||||
const h = (node.rect.height * 2) / 5
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + (node.rect.height - h) / 2, w, h)
|
||||
node.textRect = node.fullTextRect
|
||||
}
|
||||
// # sourceMappingURL=pentagram.rect.js.map
|
||||
@@ -1,17 +1,17 @@
|
||||
export function people (ctx, node) {
|
||||
ctx.beginPath();
|
||||
var r = node.rect.width / 4;
|
||||
var middle = node.rect.x + node.rect.width / 2;
|
||||
ctx.arc(middle, node.rect.y + r, r, 0, Math.PI * 2);
|
||||
ctx.moveTo(node.rect.x, node.rect.y + r * 3);
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + r * 3);
|
||||
ctx.moveTo(middle, node.rect.y + r * 2);
|
||||
ctx.lineTo(middle, node.rect.y + r * 4);
|
||||
ctx.moveTo(middle, node.rect.y + r * 4);
|
||||
ctx.lineTo(node.rect.x, node.rect.ey);
|
||||
ctx.moveTo(middle, node.rect.y + r * 4);
|
||||
ctx.beginPath()
|
||||
const r = node.rect.width / 4
|
||||
const middle = node.rect.x + node.rect.width / 2
|
||||
ctx.arc(middle, node.rect.y + r, r, 0, Math.PI * 2)
|
||||
ctx.moveTo(node.rect.x, node.rect.y + r * 3)
|
||||
ctx.lineTo(node.rect.ex, node.rect.y + r * 3)
|
||||
ctx.moveTo(middle, node.rect.y + r * 2)
|
||||
ctx.lineTo(middle, node.rect.y + r * 4)
|
||||
ctx.moveTo(middle, node.rect.y + r * 4)
|
||||
ctx.lineTo(node.rect.x, node.rect.ey)
|
||||
ctx.moveTo(middle, node.rect.y + r * 4)
|
||||
ctx.lineTo(node.rect.ex, node.rect.ey);
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=people.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function peopleIconRect (node) {
|
||||
node.iconRect = new Rect(0, 0, 0, 0);
|
||||
node.iconRect = new Rect(0, 0, 0, 0)
|
||||
}
|
||||
export function peopleTextRect (node) {
|
||||
node.textRect = undefined;
|
||||
node.fullTextRect = node.textRect;
|
||||
node.textRect = undefined
|
||||
node.fullTextRect = node.textRect
|
||||
}
|
||||
// # sourceMappingURL=people.rect.js.map
|
||||
@@ -1,25 +1,25 @@
|
||||
export function rectangle (ctx, node) {
|
||||
var wr = node.borderRadius;
|
||||
var hr = node.borderRadius;
|
||||
let wr = node.borderRadius
|
||||
let hr = node.borderRadius
|
||||
if (node.borderRadius < 1) {
|
||||
wr = node.rect.width * node.borderRadius;
|
||||
hr = node.rect.height * node.borderRadius;
|
||||
wr = node.rect.width * node.borderRadius
|
||||
hr = node.rect.height * node.borderRadius
|
||||
}
|
||||
var r = wr < hr ? wr : hr;
|
||||
let r = wr < hr ? wr : hr
|
||||
if (node.rect.width < 2 * r) {
|
||||
r = node.rect.width / 2;
|
||||
r = node.rect.width / 2
|
||||
}
|
||||
if (node.rect.height < 2 * r) {
|
||||
r = node.rect.height / 2;
|
||||
r = node.rect.height / 2
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + r, node.rect.y)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r)
|
||||
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=rectangle.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function rectangleIconRect (node) {
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
||||
node.fullIconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
||||
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum)
|
||||
node.fullIconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum)
|
||||
}
|
||||
export function rectangleTextRect (node) {
|
||||
var height = node.rect.height - node.paddingTopNum - node.paddingBottomNum;
|
||||
node.textRect = new Rect(node.rect.x + node.paddingLeftNum + height, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum - height, height);
|
||||
node.fullTextRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, height);
|
||||
const height = node.rect.height - node.paddingTopNum - node.paddingBottomNum
|
||||
node.textRect = new Rect(node.rect.x + node.paddingLeftNum + height, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum - height, height)
|
||||
node.fullTextRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, height)
|
||||
}
|
||||
// # sourceMappingURL=rectangle.rect.js.map
|
||||
@@ -1,270 +1,263 @@
|
||||
import { Store } from 'le5le-store';
|
||||
import { Store } from 'le5le-store'
|
||||
// getWords: Get the word array from text. A single Chinese character is a word.
|
||||
export function getWords (txt) {
|
||||
var words = [];
|
||||
var word = '';
|
||||
const words = []
|
||||
let word = ''
|
||||
if (!txt) {
|
||||
txt = '';
|
||||
txt = ''
|
||||
}
|
||||
for (var i = 0; i < txt.length; ++i) {
|
||||
var ch = txt.charCodeAt(i);
|
||||
for (let i = 0; i < txt.length; ++i) {
|
||||
const ch = txt.charCodeAt(i)
|
||||
if (ch < 33 || ch > 126) {
|
||||
if (word) {
|
||||
words.push(word);
|
||||
word = '';
|
||||
words.push(word)
|
||||
word = ''
|
||||
}
|
||||
words.push(txt[i]);
|
||||
continue;
|
||||
}
|
||||
else {
|
||||
word += txt[i];
|
||||
words.push(txt[i])
|
||||
continue
|
||||
} else {
|
||||
word += txt[i]
|
||||
}
|
||||
}
|
||||
if (word) {
|
||||
words.push(word);
|
||||
words.push(word)
|
||||
}
|
||||
return words;
|
||||
return words
|
||||
}
|
||||
// getWrapLines: Get the lines by wrap.
|
||||
// words - the word array of text, to avoid spliting a word.
|
||||
// maxWidth - the max width of the rect.
|
||||
export function getWrapLines (ctx, words, maxWidth, fontSize) {
|
||||
var lines = [];
|
||||
var currentLine = words[0] || '';
|
||||
for (var i = 1; i < words.length; ++i) {
|
||||
var word = words[i] || '';
|
||||
var text_1 = currentLine + word;
|
||||
var chinese = text_1.match(/[\u4e00-\u9fa5]/g) || '';
|
||||
var chineseLen = chinese.length;
|
||||
const lines = []
|
||||
let currentLine = words[0] || ''
|
||||
for (let i = 1; i < words.length; ++i) {
|
||||
const word = words[i] || ''
|
||||
const text_1 = currentLine + word
|
||||
const chinese = text_1.match(/[\u4e00-\u9fa5]/g) || ''
|
||||
const chineseLen = chinese.length
|
||||
if ((text_1.length - chineseLen) * fontSize * 0.5 + chineseLen * fontSize < maxWidth) {
|
||||
currentLine += word;
|
||||
}
|
||||
else {
|
||||
lines.push(currentLine);
|
||||
currentLine = word;
|
||||
currentLine += word
|
||||
} else {
|
||||
lines.push(currentLine)
|
||||
currentLine = word
|
||||
}
|
||||
}
|
||||
lines.push(currentLine);
|
||||
return lines;
|
||||
lines.push(currentLine)
|
||||
return lines
|
||||
}
|
||||
export function getLines (ctx, pen) {
|
||||
if (pen.text && !pen.text.split) {
|
||||
pen.text += '';
|
||||
pen.text += ''
|
||||
}
|
||||
var lines = [];
|
||||
let lines = []
|
||||
switch (pen.whiteSpace) {
|
||||
case 'nowrap':
|
||||
lines.push(pen.text);
|
||||
break;
|
||||
lines.push(pen.text)
|
||||
break
|
||||
case 'pre-line':
|
||||
lines = pen.text.split(/[\n]/g);
|
||||
break;
|
||||
lines = pen.text.split(/[\n]/g)
|
||||
break
|
||||
default:
|
||||
var textRect = pen.getTextRect();
|
||||
var paragraphs = pen.text.split(/[\n]/g);
|
||||
for (var i = 0; i < paragraphs.length; ++i) {
|
||||
var l = getWrapLines(ctx, getWords(paragraphs[i]), textRect.width, pen.fontSize);
|
||||
lines.push.apply(lines, l);
|
||||
var textRect = pen.getTextRect()
|
||||
var paragraphs = pen.text.split(/[\n]/g)
|
||||
for (let i = 0; i < paragraphs.length; ++i) {
|
||||
const l = getWrapLines(ctx, getWords(paragraphs[i]), textRect.width, pen.fontSize)
|
||||
lines.push.apply(lines, l)
|
||||
}
|
||||
break;
|
||||
break
|
||||
}
|
||||
return lines;
|
||||
return lines
|
||||
}
|
||||
export function calcTextRect (ctx, pen) {
|
||||
var lines = getLines(ctx, pen);
|
||||
var width = 0;
|
||||
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
|
||||
var item = lines_1[_i];
|
||||
ctx.font = (pen.fontStyle || 'normal') + " normal " + (pen.fontWeight || 'normal') + " " + pen.fontSize + "px/" + pen.lineHeight + " " + pen.fontFamily;
|
||||
var r = ctx.measureText(item);
|
||||
var w = r.width;
|
||||
const lines = getLines(ctx, pen)
|
||||
let width = 0
|
||||
for (let _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
|
||||
const item = lines_1[_i]
|
||||
ctx.font = (pen.fontStyle || 'normal') + ' normal ' + (pen.fontWeight || 'normal') + ' ' + pen.fontSize + 'px/' + pen.lineHeight + ' ' + pen.fontFamily
|
||||
const r = ctx.measureText(item)
|
||||
const w = r.width
|
||||
if (w > width) {
|
||||
width = w;
|
||||
width = w
|
||||
}
|
||||
}
|
||||
return {
|
||||
width: width,
|
||||
height: lines.length * pen.fontSize * pen.lineHeight,
|
||||
};
|
||||
height: lines.length * pen.fontSize * pen.lineHeight
|
||||
}
|
||||
}
|
||||
function textBk (ctx, str, x, y, height, color) {
|
||||
if (!str || !color) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
var w = ctx.measureText(str).width;
|
||||
ctx.save();
|
||||
ctx.fillStyle = color;
|
||||
var l = x - w / 2;
|
||||
var t = y - height / 2;
|
||||
const w = ctx.measureText(str).width
|
||||
ctx.save()
|
||||
ctx.fillStyle = color
|
||||
let l = x - w / 2
|
||||
let t = y - height / 2
|
||||
switch (ctx.textAlign) {
|
||||
case 'left':
|
||||
l = x;
|
||||
break;
|
||||
l = x
|
||||
break
|
||||
case 'right':
|
||||
l = x - w;
|
||||
break;
|
||||
l = x - w
|
||||
break
|
||||
}
|
||||
switch (ctx.textBaseline) {
|
||||
case 'top':
|
||||
t = y;
|
||||
break;
|
||||
t = y
|
||||
break
|
||||
case 'bottom':
|
||||
t = y - height;
|
||||
break;
|
||||
t = y - height
|
||||
break
|
||||
}
|
||||
ctx.fillRect(l, t, w, height);
|
||||
ctx.restore();
|
||||
ctx.fillRect(l, t, w, height)
|
||||
ctx.restore()
|
||||
}
|
||||
export function fillText (ctx, lines, x, y, width, height, lineHeight, maxLineLen, bk) {
|
||||
if (!maxLineLen || maxLineLen > lines.length) {
|
||||
maxLineLen = lines.length;
|
||||
maxLineLen = lines.length
|
||||
} else {
|
||||
maxLineLen = Math.ceil(maxLineLen)
|
||||
}
|
||||
else {
|
||||
maxLineLen = Math.ceil(maxLineLen);
|
||||
}
|
||||
for (var i = 0; i < maxLineLen - 1; ++i) {
|
||||
for (let i = 0; i < maxLineLen - 1; ++i) {
|
||||
if (bk) {
|
||||
textBk(ctx, lines[i], x, y + i * lineHeight, lineHeight, bk);
|
||||
textBk(ctx, lines[i], x, y + i * lineHeight, lineHeight, bk)
|
||||
}
|
||||
ctx.fillText(lines[i], x, y + i * lineHeight);
|
||||
ctx.fillText(lines[i], x, y + i * lineHeight)
|
||||
}
|
||||
if (maxLineLen < lines.length) {
|
||||
var str = (lines[maxLineLen - 1] || '') + '...';
|
||||
let str = (lines[maxLineLen - 1] || '') + '...'
|
||||
if (lines[maxLineLen - 1] && ctx.measureText(str).width > width) {
|
||||
str = lines[maxLineLen - 1].substr(0, lines[maxLineLen - 1].length - 2) + '...';
|
||||
str = lines[maxLineLen - 1].substr(0, lines[maxLineLen - 1].length - 2) + '...'
|
||||
}
|
||||
if (bk) {
|
||||
textBk(ctx, str, x, y + (maxLineLen - 1) * lineHeight, lineHeight, bk);
|
||||
textBk(ctx, str, x, y + (maxLineLen - 1) * lineHeight, lineHeight, bk)
|
||||
}
|
||||
ctx.fillText(str, x, y + (maxLineLen - 1) * lineHeight);
|
||||
}
|
||||
else {
|
||||
ctx.fillText(str, x, y + (maxLineLen - 1) * lineHeight)
|
||||
} else {
|
||||
if (bk) {
|
||||
textBk(ctx, lines[maxLineLen - 1], x, y + (maxLineLen - 1) * lineHeight, lineHeight, bk);
|
||||
textBk(ctx, lines[maxLineLen - 1], x, y + (maxLineLen - 1) * lineHeight, lineHeight, bk)
|
||||
}
|
||||
ctx.fillText(lines[maxLineLen - 1], x, y + (maxLineLen - 1) * lineHeight);
|
||||
ctx.fillText(lines[maxLineLen - 1], x, y + (maxLineLen - 1) * lineHeight)
|
||||
}
|
||||
}
|
||||
export function text (ctx, node) {
|
||||
if (!node.text) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (!node.text.split) {
|
||||
node.text += '';
|
||||
node.text += ''
|
||||
}
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
delete ctx.shadowColor;
|
||||
delete ctx.shadowBlur;
|
||||
ctx.font = (node.fontStyle || 'normal') + " normal " + (node.fontWeight || 'normal') + " " + node.fontSize + "px/" + node.lineHeight + " " + node.fontFamily;
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
delete ctx.shadowColor
|
||||
delete ctx.shadowBlur
|
||||
ctx.font = (node.fontStyle || 'normal') + ' normal ' + (node.fontWeight || 'normal') + ' ' + node.fontSize + 'px/' + node.lineHeight + ' ' + node.fontFamily
|
||||
if (node.fontColor) {
|
||||
ctx.fillStyle = node.fontColor;
|
||||
}
|
||||
else {
|
||||
ctx.fillStyle = Store.get(node.generateStoreKey('LT:fontColor'));
|
||||
ctx.fillStyle = node.fontColor
|
||||
} else {
|
||||
ctx.fillStyle = Store.get(node.generateStoreKey('LT:fontColor'))
|
||||
}
|
||||
if (node.textAlign) {
|
||||
ctx.textAlign = node.textAlign;
|
||||
ctx.textAlign = node.textAlign
|
||||
}
|
||||
if (node.textBaseline) {
|
||||
ctx.textBaseline = node.textBaseline;
|
||||
ctx.textBaseline = node.textBaseline
|
||||
}
|
||||
var textRect = node.getTextRect();
|
||||
const textRect = node.getTextRect()
|
||||
if (!textRect) {
|
||||
ctx.restore();
|
||||
return;
|
||||
ctx.restore()
|
||||
return
|
||||
}
|
||||
var lines = getLines(ctx, node);
|
||||
var lineHeight = node.fontSize * node.lineHeight;
|
||||
var maxLineLen = node.textMaxLine > 0 && node.textMaxLine < lines.length ? node.textMaxLine : lines.length;
|
||||
const lines = getLines(ctx, node)
|
||||
const lineHeight = node.fontSize * node.lineHeight
|
||||
const maxLineLen = node.textMaxLine > 0 && node.textMaxLine < lines.length ? node.textMaxLine : lines.length
|
||||
// By default, the text is center aligned.
|
||||
var x = textRect.x + textRect.width / 2;
|
||||
var y = textRect.y + (textRect.height - lineHeight * maxLineLen) / 2 + (lineHeight * 4) / 7;
|
||||
let x = textRect.x + textRect.width / 2
|
||||
let y = textRect.y + (textRect.height - lineHeight * maxLineLen) / 2 + (lineHeight * 4) / 7
|
||||
switch (ctx.textAlign) {
|
||||
case 'left':
|
||||
x = textRect.x;
|
||||
break;
|
||||
x = textRect.x
|
||||
break
|
||||
case 'right':
|
||||
x = textRect.x + textRect.width;
|
||||
break;
|
||||
x = textRect.x + textRect.width
|
||||
break
|
||||
}
|
||||
switch (ctx.textBaseline) {
|
||||
case 'top':
|
||||
y = textRect.y + (lineHeight - node.fontSize) / 2;
|
||||
break;
|
||||
y = textRect.y + (lineHeight - node.fontSize) / 2
|
||||
break
|
||||
case 'bottom':
|
||||
y = textRect.ey - lineHeight * maxLineLen + lineHeight;
|
||||
break;
|
||||
y = textRect.ey - lineHeight * maxLineLen + lineHeight
|
||||
break
|
||||
}
|
||||
fillText(ctx, lines, x + node.textOffsetX, y + node.textOffsetY, textRect.width, textRect.height, lineHeight, maxLineLen, node.textBackground);
|
||||
ctx.restore();
|
||||
fillText(ctx, lines, x + node.textOffsetX, y + node.textOffsetY, textRect.width, textRect.height, lineHeight, maxLineLen, node.textBackground)
|
||||
ctx.restore()
|
||||
}
|
||||
export function iconfont (ctx, node) {
|
||||
ctx.save();
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
var iconRect = node.getIconRect();
|
||||
var x = iconRect.x + iconRect.width / 2;
|
||||
var y = iconRect.y + iconRect.height / 2;
|
||||
ctx.save()
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
const iconRect = node.getIconRect()
|
||||
let x = iconRect.x + iconRect.width / 2
|
||||
let y = iconRect.y + iconRect.height / 2
|
||||
switch (node.imageAlign) {
|
||||
case 'top':
|
||||
y = iconRect.y;
|
||||
ctx.textBaseline = 'top';
|
||||
break;
|
||||
y = iconRect.y
|
||||
ctx.textBaseline = 'top'
|
||||
break
|
||||
case 'bottom':
|
||||
y = iconRect.ey;
|
||||
ctx.textBaseline = 'bottom';
|
||||
break;
|
||||
y = iconRect.ey
|
||||
ctx.textBaseline = 'bottom'
|
||||
break
|
||||
case 'left':
|
||||
x = iconRect.x;
|
||||
ctx.textAlign = 'left';
|
||||
break;
|
||||
x = iconRect.x
|
||||
ctx.textAlign = 'left'
|
||||
break
|
||||
case 'right':
|
||||
x = iconRect.ex;
|
||||
ctx.textAlign = 'right';
|
||||
break;
|
||||
x = iconRect.ex
|
||||
ctx.textAlign = 'right'
|
||||
break
|
||||
case 'left-top':
|
||||
x = iconRect.x;
|
||||
y = iconRect.y;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
break;
|
||||
x = iconRect.x
|
||||
y = iconRect.y
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'top'
|
||||
break
|
||||
case 'right-top':
|
||||
x = iconRect.ex;
|
||||
y = iconRect.y;
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'top';
|
||||
break;
|
||||
x = iconRect.ex
|
||||
y = iconRect.y
|
||||
ctx.textAlign = 'right'
|
||||
ctx.textBaseline = 'top'
|
||||
break
|
||||
case 'left-bottom':
|
||||
x = iconRect.x;
|
||||
y = iconRect.ey;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'bottom';
|
||||
break;
|
||||
x = iconRect.x
|
||||
y = iconRect.ey
|
||||
ctx.textAlign = 'left'
|
||||
ctx.textBaseline = 'bottom'
|
||||
break
|
||||
case 'right-bottom':
|
||||
x = iconRect.ex;
|
||||
y = iconRect.ey;
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'bottom';
|
||||
break;
|
||||
x = iconRect.ex
|
||||
y = iconRect.ey
|
||||
ctx.textAlign = 'right'
|
||||
ctx.textBaseline = 'bottom'
|
||||
break
|
||||
}
|
||||
if (node.iconSize > 0) {
|
||||
ctx.font = node.iconSize + "px " + node.iconFamily;
|
||||
ctx.font = node.iconSize + 'px ' + node.iconFamily
|
||||
} else if (iconRect.width > iconRect.height) {
|
||||
ctx.font = iconRect.height + 'px ' + node.iconFamily
|
||||
} else {
|
||||
ctx.font = iconRect.width + 'px ' + node.iconFamily
|
||||
}
|
||||
else if (iconRect.width > iconRect.height) {
|
||||
ctx.font = iconRect.height + "px " + node.iconFamily;
|
||||
}
|
||||
else {
|
||||
ctx.font = iconRect.width + "px " + node.iconFamily;
|
||||
}
|
||||
ctx.fillStyle = node.iconColor || Store.get(node.generateStoreKey('LT:iconColor')) || node.fontColor;
|
||||
ctx.fillStyle = node.iconColor || Store.get(node.generateStoreKey('LT:iconColor')) || node.fontColor
|
||||
if (node.iconRotate) {
|
||||
ctx.translate(iconRect.center.x, iconRect.center.y);
|
||||
ctx.rotate((node.iconRotate * Math.PI) / 180);
|
||||
ctx.translate(-iconRect.center.x, -iconRect.center.y);
|
||||
ctx.translate(iconRect.center.x, iconRect.center.y)
|
||||
ctx.rotate((node.iconRotate * Math.PI) / 180)
|
||||
ctx.translate(-iconRect.center.x, -iconRect.center.y)
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.fillText(node.icon, x, y);
|
||||
ctx.restore();
|
||||
ctx.beginPath()
|
||||
ctx.fillText(node.icon, x, y)
|
||||
ctx.restore()
|
||||
}
|
||||
// # sourceMappingURL=text.js.map
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Point } from '../../models/point';
|
||||
import { Direction } from '../../models/direction';
|
||||
import { Point } from '../../models/point'
|
||||
import { Direction } from '../../models/direction'
|
||||
export function triangleAnchors (node) {
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width * 3) / 4, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 4, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
|
||||
node.anchors.push(new Point(node.rect.x + (node.rect.width * 3) / 4, node.rect.y + node.rect.height / 2, Direction.Right))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 4, node.rect.y + node.rect.height / 2, Direction.Left))
|
||||
}
|
||||
// # sourceMappingURL=triangle.anchor.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
export function triangle (ctx, node) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y);
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height);
|
||||
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height);
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y)
|
||||
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height)
|
||||
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height)
|
||||
ctx.closePath();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill()
|
||||
ctx.stroke()
|
||||
}
|
||||
// # sourceMappingURL=triangle.js.map
|
||||
@@ -1,23 +1,22 @@
|
||||
import { Rect } from '../../models/rect';
|
||||
import { Rect } from '../../models/rect'
|
||||
export function triangleIconRect (node) {
|
||||
var w = (node.rect.width * 2) / 7;
|
||||
var h = (node.rect.height * 2) / 7;
|
||||
let w = (node.rect.width * 2) / 7
|
||||
let h = (node.rect.height * 2) / 7
|
||||
if (w > h) {
|
||||
w = h;
|
||||
w = h
|
||||
} else {
|
||||
h = w
|
||||
}
|
||||
else {
|
||||
h = w;
|
||||
}
|
||||
var top = w;
|
||||
let top = w
|
||||
if (top < 10) {
|
||||
top = 10;
|
||||
top = 10
|
||||
}
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h);
|
||||
node.iconRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + top, w, h)
|
||||
}
|
||||
export function triangleTextRect (node) {
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 4, node.rect.y + (node.rect.height * 2) / 3, node.rect.width / 2, node.rect.height / 3 - 5);
|
||||
var w = node.rect.width / 2;
|
||||
var h = (node.rect.height * 3) / 7;
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 2 - 5, w, h);
|
||||
node.textRect = new Rect(node.rect.x + node.rect.width / 4, node.rect.y + (node.rect.height * 2) / 3, node.rect.width / 2, node.rect.height / 3 - 5)
|
||||
const w = node.rect.width / 2
|
||||
const h = (node.rect.height * 3) / 7
|
||||
node.fullTextRect = new Rect(node.rect.x + (node.rect.width - w) / 2, node.rect.y + node.rect.height / 2 - 5, w, h)
|
||||
}
|
||||
// # sourceMappingURL=triangle.rect.js.map
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Node } from './node';
|
||||
import { Line } from './line';
|
||||
import { Lock } from './status';
|
||||
import { s8 } from '../utils';
|
||||
import { Store } from 'le5le-store';
|
||||
import { Rect } from './rect';
|
||||
import { Node } from './node'
|
||||
import { Line } from './line'
|
||||
import { Lock } from './status'
|
||||
import { s8 } from '../utils'
|
||||
import { Store } from 'le5le-store'
|
||||
import { Rect } from './rect'
|
||||
export function createData (json, tid) {
|
||||
var data = {
|
||||
let data = {
|
||||
pens: [],
|
||||
lineName: 'curve',
|
||||
fromArrow: '',
|
||||
@@ -13,55 +13,52 @@ export function createData(json, tid) {
|
||||
scale: 1,
|
||||
locked: Lock.None,
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
if (typeof json === 'string') {
|
||||
json = JSON.parse(json);
|
||||
y: 0
|
||||
}
|
||||
data = Object.assign(data, json);
|
||||
data.pens = [];
|
||||
if (typeof json === 'string') {
|
||||
json = JSON.parse(json)
|
||||
}
|
||||
data = Object.assign(data, json)
|
||||
data.pens = []
|
||||
if (json) {
|
||||
// for old data.
|
||||
if (json.nodes) {
|
||||
for (var _i = 0, _a = json.nodes; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
item.TID = tid;
|
||||
data.pens.push(new Node(item));
|
||||
for (let _i = 0, _a = json.nodes; _i < _a.length; _i++) {
|
||||
var item = _a[_i]
|
||||
item.TID = tid
|
||||
data.pens.push(new Node(item))
|
||||
}
|
||||
for (var _b = 0, _c = json.lines; _b < _c.length; _b++) {
|
||||
var item = _c[_b];
|
||||
item.TID = tid;
|
||||
data.pens.push(new Line(item));
|
||||
for (let _b = 0, _c = json.lines; _b < _c.length; _b++) {
|
||||
var item = _c[_b]
|
||||
item.TID = tid
|
||||
data.pens.push(new Line(item))
|
||||
}
|
||||
}
|
||||
// end.
|
||||
json.pens && json.pens.forEach(function (item) {
|
||||
tid && (item.TID = tid);
|
||||
tid && (item.TID = tid)
|
||||
if (!item.type) {
|
||||
data.pens.push(new Node(item));
|
||||
data.pens.push(new Node(item))
|
||||
} else {
|
||||
data.pens.push(new Line(item))
|
||||
}
|
||||
else {
|
||||
data.pens.push(new Line(item));
|
||||
}
|
||||
});
|
||||
})
|
||||
if (json.bkImageRect) {
|
||||
data.bkImageRect = new Rect(json.bkImageRect.x, json.bkImageRect.y, json.bkImageRect.width, json.bkImageRect.height);
|
||||
data.bkImageRect = new Rect(json.bkImageRect.x, json.bkImageRect.y, json.bkImageRect.width, json.bkImageRect.height)
|
||||
}
|
||||
}
|
||||
if (data.mqttOptions) {
|
||||
var opts = '';
|
||||
let opts = ''
|
||||
if (typeof data.mqttOptions === 'object') {
|
||||
opts = JSON.stringify(data.mqttOptions);
|
||||
opts = JSON.stringify(data.mqttOptions)
|
||||
} else {
|
||||
opts = data.mqttOptions + ''
|
||||
}
|
||||
else {
|
||||
opts = data.mqttOptions + '';
|
||||
data.mqttOptions = JSON.parse(opts)
|
||||
} else {
|
||||
data.mqttOptions = { clientId: s8() }
|
||||
}
|
||||
data.mqttOptions = JSON.parse(opts);
|
||||
}
|
||||
else {
|
||||
data.mqttOptions = { clientId: s8() };
|
||||
}
|
||||
tid && Store.set(tid + '-topology-data', data);
|
||||
return data;
|
||||
tid && Store.set(tid + '-topology-data', data)
|
||||
return data
|
||||
}
|
||||
// # sourceMappingURL=data.js.map
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
export var Direction;
|
||||
(function (Direction) {
|
||||
Direction[Direction["None"] = 0] = "None";
|
||||
Direction[Direction["Up"] = 1] = "Up";
|
||||
Direction[Direction["Right"] = 2] = "Right";
|
||||
Direction[Direction["Bottom"] = 3] = "Bottom";
|
||||
Direction[Direction["Left"] = 4] = "Left";
|
||||
})(Direction || (Direction = {}));
|
||||
Direction[Direction.None = 0] = 'None'
|
||||
Direction[Direction.Up = 1] = 'Up'
|
||||
Direction[Direction.Right = 2] = 'Right'
|
||||
Direction[Direction.Bottom = 3] = 'Bottom'
|
||||
Direction[Direction.Left = 4] = 'Left'
|
||||
})(Direction || (Direction = {}))
|
||||
// # sourceMappingURL=direction.js.map
|
||||
@@ -1,21 +1,21 @@
|
||||
export var EventType;
|
||||
(function (EventType) {
|
||||
EventType[EventType["Click"] = 0] = "Click";
|
||||
EventType[EventType["DblClick"] = 1] = "DblClick";
|
||||
EventType[EventType["WebSocket"] = 2] = "WebSocket";
|
||||
EventType[EventType["Mqtt"] = 3] = "Mqtt";
|
||||
EventType[EventType["MoveIn"] = 4] = "MoveIn";
|
||||
EventType[EventType["MoveOut"] = 5] = "MoveOut";
|
||||
})(EventType || (EventType = {}));
|
||||
EventType[EventType.Click = 0] = 'Click'
|
||||
EventType[EventType.DblClick = 1] = 'DblClick'
|
||||
EventType[EventType.WebSocket = 2] = 'WebSocket'
|
||||
EventType[EventType.Mqtt = 3] = 'Mqtt'
|
||||
EventType[EventType.MoveIn = 4] = 'MoveIn'
|
||||
EventType[EventType.MoveOut = 5] = 'MoveOut'
|
||||
})(EventType || (EventType = {}))
|
||||
export var EventAction;
|
||||
(function (EventAction) {
|
||||
EventAction[EventAction["Link"] = 0] = "Link";
|
||||
EventAction[EventAction["StartAnimate"] = 1] = "StartAnimate";
|
||||
EventAction[EventAction["Function"] = 2] = "Function";
|
||||
EventAction[EventAction["WindowFn"] = 3] = "WindowFn";
|
||||
EventAction[EventAction["SetProps"] = 4] = "SetProps";
|
||||
EventAction[EventAction["PauseAnimate"] = 5] = "PauseAnimate";
|
||||
EventAction[EventAction["StopAnimate"] = 6] = "StopAnimate";
|
||||
EventAction[EventAction["Emit"] = 7] = "Emit";
|
||||
})(EventAction || (EventAction = {}));
|
||||
EventAction[EventAction.Link = 0] = 'Link'
|
||||
EventAction[EventAction.StartAnimate = 1] = 'StartAnimate'
|
||||
EventAction[EventAction.Function = 2] = 'Function'
|
||||
EventAction[EventAction.WindowFn = 3] = 'WindowFn'
|
||||
EventAction[EventAction.SetProps = 4] = 'SetProps'
|
||||
EventAction[EventAction.PauseAnimate = 5] = 'PauseAnimate'
|
||||
EventAction[EventAction.StopAnimate = 6] = 'StopAnimate'
|
||||
EventAction[EventAction.Emit = 7] = 'Emit'
|
||||
})(EventAction || (EventAction = {}))
|
||||
// # sourceMappingURL=event.js.map
|
||||
@@ -1,10 +1,10 @@
|
||||
export * from './data';
|
||||
export * from './pen';
|
||||
export * from './node';
|
||||
export * from './line';
|
||||
export * from './direction';
|
||||
export * from './point';
|
||||
export * from './rect';
|
||||
export * from './status';
|
||||
export * from './event';
|
||||
export * from './data'
|
||||
export * from './pen'
|
||||
export * from './node'
|
||||
export * from './line'
|
||||
export * from './direction'
|
||||
export * from './point'
|
||||
export * from './rect'
|
||||
export * from './status'
|
||||
export * from './event'
|
||||
// # sourceMappingURL=index.js.map
|
||||
@@ -1,30 +1,30 @@
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
import { Pen, PenType } from './pen'
|
||||
import { Point } from './point'
|
||||
import { drawLineFns, drawArrowFns } from '../middles'
|
||||
import { getBezierPoint } from '../middles/lines/curve'
|
||||
import { Store } from 'le5le-store'
|
||||
import { lineLen, curveLen } from '../utils/canvas'
|
||||
import { text } from '../middles/nodes/text'
|
||||
import { Rect } from './rect'
|
||||
import { abs } from '../utils/math'
|
||||
const __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b }) ||
|
||||
function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
|
||||
return extendStatics(d, b)
|
||||
}
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
import { Pen, PenType } from './pen';
|
||||
import { Point } from './point';
|
||||
import { drawLineFns, drawArrowFns } from '../middles';
|
||||
import { getBezierPoint } from '../middles/lines/curve';
|
||||
import { Store } from 'le5le-store';
|
||||
import { lineLen, curveLen } from '../utils/canvas';
|
||||
import { text } from '../middles/nodes/text';
|
||||
import { Rect } from './rect';
|
||||
import { abs } from '../utils/math';
|
||||
var Line = /** @class */ (function (_super) {
|
||||
__extends(Line, _super);
|
||||
extendStatics(d, b)
|
||||
function __ () { this.constructor = d }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
|
||||
}
|
||||
})()
|
||||
const Line = /** @class */ (function (_super) {
|
||||
__extends(Line, _super)
|
||||
function Line (json) {
|
||||
var _this = _super.call(this) || this;
|
||||
var defaultData = {
|
||||
const _this = _super.call(this) || this
|
||||
const defaultData = {
|
||||
name: 'curve',
|
||||
fromArrow: '',
|
||||
toArrow: '',
|
||||
@@ -39,513 +39,500 @@ var Line = /** @class */ (function (_super) {
|
||||
animateToSize: 0,
|
||||
animateDotSize: 3,
|
||||
textBackground: '#ffffff'
|
||||
};
|
||||
_this.fromData(defaultData, json);
|
||||
_this.type = PenType.Line;
|
||||
}
|
||||
_this.fromData(defaultData, json)
|
||||
_this.type = PenType.Line
|
||||
if (json.from) {
|
||||
_this.from = new Point(json.from.x, json.from.y, json.from.direction, json.from.anchorIndex, json.from.id, json.autoAnchor);
|
||||
_this.from = new Point(json.from.x, json.from.y, json.from.direction, json.from.anchorIndex, json.from.id, json.autoAnchor)
|
||||
}
|
||||
if (json.to) {
|
||||
_this.to = new Point(json.to.x, json.to.y, json.to.direction, json.to.anchorIndex, json.to.id, json.autoAnchor);
|
||||
_this.to = new Point(json.to.x, json.to.y, json.to.direction, json.to.anchorIndex, json.to.id, json.autoAnchor)
|
||||
}
|
||||
// 暂时兼容老数据
|
||||
if (json.name === 'mind' && (!json.controlPoints || json.controlPoints.length > 2)) {
|
||||
json.controlPoints = undefined;
|
||||
_this.calcControlPoints(true);
|
||||
json.controlPoints = undefined
|
||||
_this.calcControlPoints(true)
|
||||
}
|
||||
// end
|
||||
else if (json.controlPoints) {
|
||||
_this.controlPoints = [];
|
||||
for (var _i = 0, _a = json.controlPoints; _i < _a.length; _i++) {
|
||||
var item = _a[_i];
|
||||
_this.controlPoints.push(new Point(item.x, item.y, item.direction, item.anchorIndex, item.id));
|
||||
_this.controlPoints = []
|
||||
for (let _i = 0, _a = json.controlPoints; _i < _a.length; _i++) {
|
||||
const item = _a[_i]
|
||||
_this.controlPoints.push(new Point(item.x, item.y, item.direction, item.anchorIndex, item.id))
|
||||
}
|
||||
}
|
||||
if (json.children) {
|
||||
_this.children = [];
|
||||
_this.children = []
|
||||
json.children.forEach(function (item) {
|
||||
_this.children.push(new Line(item));
|
||||
});
|
||||
_this.children.push(new Line(item))
|
||||
})
|
||||
}
|
||||
return _this;
|
||||
return _this
|
||||
}
|
||||
Line.prototype.setFrom = function (from, fromArrow) {
|
||||
if (fromArrow === void 0) { fromArrow = ''; }
|
||||
this.from = from;
|
||||
this.fromArrow = fromArrow;
|
||||
this.textRect = undefined;
|
||||
};
|
||||
if (fromArrow === void 0) { fromArrow = '' }
|
||||
this.from = from
|
||||
this.fromArrow = fromArrow
|
||||
this.textRect = undefined
|
||||
}
|
||||
Line.prototype.setTo = function (to, toArrow) {
|
||||
if (toArrow === void 0) { toArrow = 'triangleSolid'; }
|
||||
this.to = to;
|
||||
this.toArrow = toArrow;
|
||||
this.textRect = undefined;
|
||||
};
|
||||
if (toArrow === void 0) { toArrow = 'triangleSolid' }
|
||||
this.to = to
|
||||
this.toArrow = toArrow
|
||||
this.textRect = undefined
|
||||
}
|
||||
Line.prototype.calcControlPoints = function (force) {
|
||||
if (this.name !== 'line' && this.manualCps && !force) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.textRect = undefined;
|
||||
this.textRect = undefined
|
||||
if (this.from && this.to && drawLineFns[this.name]) {
|
||||
drawLineFns[this.name].controlPointsFn(this);
|
||||
drawLineFns[this.name].controlPointsFn(this)
|
||||
}
|
||||
}
|
||||
};
|
||||
Line.prototype.draw = function (ctx) {
|
||||
if (this.animateDot) {
|
||||
ctx.fillStyle = ctx.strokeStyle;
|
||||
ctx.fillStyle = ctx.strokeStyle
|
||||
if (this.animateType === 'dot') {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.animateDot.x, this.animateDot.y, this.animateDotSize, 0, 2 * Math.PI, false);
|
||||
ctx.fill();
|
||||
return;
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.animateDot.x, this.animateDot.y, this.animateDotSize, 0, 2 * Math.PI, false)
|
||||
ctx.fill()
|
||||
return
|
||||
} else if (this.animateType === 'comet') {
|
||||
const bulles = this.getBubbles()
|
||||
ctx.save()
|
||||
for (let _i = 0, bulles_1 = bulles; _i < bulles_1.length; _i++) {
|
||||
const item = bulles_1[_i]
|
||||
ctx.globalAlpha = item.a
|
||||
ctx.beginPath()
|
||||
ctx.arc(item.pos.x, item.pos.y, item.r, 0, 2 * Math.PI, false)
|
||||
ctx.fill()
|
||||
}
|
||||
else if (this.animateType === 'comet') {
|
||||
var bulles = this.getBubbles();
|
||||
ctx.save();
|
||||
for (var _i = 0, bulles_1 = bulles; _i < bulles_1.length; _i++) {
|
||||
var item = bulles_1[_i];
|
||||
ctx.globalAlpha = item.a;
|
||||
ctx.beginPath();
|
||||
ctx.arc(item.pos.x, item.pos.y, item.r, 0, 2 * Math.PI, false);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
if (!this.isAnimate && this.borderWidth > 0 && this.borderColor) {
|
||||
ctx.save();
|
||||
ctx.save()
|
||||
if (this.lineJoin) {
|
||||
ctx.lineJoin = this.lineJoin;
|
||||
ctx.lineJoin = this.lineJoin
|
||||
}
|
||||
ctx.lineWidth = this.lineWidth + this.borderWidth;
|
||||
ctx.strokeStyle = this.borderColor;
|
||||
ctx.lineWidth = this.lineWidth + this.borderWidth
|
||||
ctx.strokeStyle = this.borderColor
|
||||
if (drawLineFns[this.name]) {
|
||||
drawLineFns[this.name].drawFn(ctx, this);
|
||||
drawLineFns[this.name].drawFn(ctx, this)
|
||||
}
|
||||
ctx.restore();
|
||||
ctx.restore()
|
||||
}
|
||||
switch (this.strokeType) {
|
||||
case 1:
|
||||
this.strokeLinearGradient(ctx);
|
||||
break;
|
||||
this.strokeLinearGradient(ctx)
|
||||
break
|
||||
}
|
||||
if ((!this.isAnimate || this.animateType !== 'comet') && drawLineFns[this.name]) {
|
||||
if (this.lineJoin) {
|
||||
ctx.lineJoin = this.lineJoin;
|
||||
ctx.lineJoin = this.lineJoin
|
||||
}
|
||||
drawLineFns[this.name].drawFn(ctx, this);
|
||||
drawLineFns[this.name].drawFn(ctx, this)
|
||||
}
|
||||
var scale = Store.get(this.generateStoreKey('LT:scale')) || 1;
|
||||
const scale = Store.get(this.generateStoreKey('LT:scale')) || 1
|
||||
if (this.fromArrow && drawArrowFns[this.fromArrow]) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.lineDashOffset = 0;
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = this.fromArrowColor || ctx.strokeStyle;
|
||||
ctx.strokeStyle = ctx.fillStyle;
|
||||
var f = this.to;
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.lineDashOffset = 0
|
||||
ctx.setLineDash([])
|
||||
ctx.fillStyle = this.fromArrowColor || ctx.strokeStyle
|
||||
ctx.strokeStyle = ctx.fillStyle
|
||||
var f = this.to
|
||||
if (this.name === 'curve') {
|
||||
f = getBezierPoint(0.95 - this.lineWidth / 100, this.to, this.controlPoints[1], this.controlPoints[0], this.from);
|
||||
f = getBezierPoint(0.95 - this.lineWidth / 100, this.to, this.controlPoints[1], this.controlPoints[0], this.from)
|
||||
} else if (this.name !== 'line' && this.controlPoints.length) {
|
||||
f = this.controlPoints[0]
|
||||
}
|
||||
else if (this.name !== 'line' && this.controlPoints.length) {
|
||||
f = this.controlPoints[0];
|
||||
}
|
||||
drawArrowFns[this.fromArrow](ctx, f, this.from, this.fromArrowSize * scale);
|
||||
ctx.restore();
|
||||
drawArrowFns[this.fromArrow](ctx, f, this.from, this.fromArrowSize * scale)
|
||||
ctx.restore()
|
||||
}
|
||||
if (this.toArrow && drawArrowFns[this.toArrow]) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.lineDashOffset = 0;
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = this.toArrowColor || ctx.strokeStyle;
|
||||
ctx.strokeStyle = ctx.fillStyle;
|
||||
var f = this.from;
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.lineDashOffset = 0
|
||||
ctx.setLineDash([])
|
||||
ctx.fillStyle = this.toArrowColor || ctx.strokeStyle
|
||||
ctx.strokeStyle = ctx.fillStyle
|
||||
var f = this.from
|
||||
if (this.name === 'curve') {
|
||||
f = getBezierPoint(0.95 - this.lineWidth / 100, this.from, this.controlPoints[0], this.controlPoints[1], this.to);
|
||||
f = getBezierPoint(0.95 - this.lineWidth / 100, this.from, this.controlPoints[0], this.controlPoints[1], this.to)
|
||||
} else if (this.name === 'mind') {
|
||||
f = getBezierPoint(0.96 - this.lineWidth / 100, this.from, this.controlPoints[0], this.controlPoints[1], this.to)
|
||||
} else if (this.name !== 'line' && this.controlPoints.length) {
|
||||
f = this.controlPoints[this.controlPoints.length - 1]
|
||||
}
|
||||
else if (this.name === 'mind') {
|
||||
f = getBezierPoint(0.96 - this.lineWidth / 100, this.from, this.controlPoints[0], this.controlPoints[1], this.to);
|
||||
}
|
||||
else if (this.name !== 'line' && this.controlPoints.length) {
|
||||
f = this.controlPoints[this.controlPoints.length - 1];
|
||||
}
|
||||
drawArrowFns[this.toArrow](ctx, f, this.to, this.toArrowSize * scale);
|
||||
ctx.restore();
|
||||
drawArrowFns[this.toArrow](ctx, f, this.to, this.toArrowSize * scale)
|
||||
ctx.restore()
|
||||
}
|
||||
if (this.text && !this.isAnimate) {
|
||||
if (!this.textRect) {
|
||||
this.calcTextRect();
|
||||
this.calcTextRect()
|
||||
}
|
||||
text(ctx, this)
|
||||
}
|
||||
text(ctx, this);
|
||||
}
|
||||
};
|
||||
Line.prototype.pointIn = function (pt) {
|
||||
return drawLineFns[this.name].pointIn(pt, this);
|
||||
};
|
||||
return drawLineFns[this.name].pointIn(pt, this)
|
||||
}
|
||||
Line.prototype.getLen = function () {
|
||||
switch (this.name) {
|
||||
case 'line':
|
||||
return lineLen(this.from, this.to);
|
||||
return lineLen(this.from, this.to)
|
||||
case 'polyline':
|
||||
if (!this.controlPoints || !this.controlPoints.length) {
|
||||
return lineLen(this.from, this.to);
|
||||
return lineLen(this.from, this.to)
|
||||
}
|
||||
var len = 0;
|
||||
var curPt = this.from;
|
||||
for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
|
||||
var pt = _a[_i];
|
||||
len += lineLen(curPt, pt);
|
||||
curPt = pt;
|
||||
var len = 0
|
||||
var curPt = this.from
|
||||
for (let _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
|
||||
const pt = _a[_i]
|
||||
len += lineLen(curPt, pt)
|
||||
curPt = pt
|
||||
}
|
||||
len += lineLen(curPt, this.to);
|
||||
return len | 0;
|
||||
len += lineLen(curPt, this.to)
|
||||
return len | 0
|
||||
case 'curve':
|
||||
case 'mind':
|
||||
return curveLen(this.from, this.controlPoints[0], this.controlPoints[1], this.to);
|
||||
return curveLen(this.from, this.controlPoints[0], this.controlPoints[1], this.to)
|
||||
default:
|
||||
if (drawLineFns[this.name].getLength) {
|
||||
return drawLineFns[this.name].getLength(this);
|
||||
return drawLineFns[this.name].getLength(this)
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
return 0
|
||||
}
|
||||
Line.prototype.strokeLinearGradient = function (ctx) {
|
||||
if (!this.lineGradientFromColor || !this.lineGradientToColor) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
var from = this.from;
|
||||
var to = this.to;
|
||||
const from = this.from
|
||||
const to = this.to
|
||||
// contributor: https://github.com/sunnyguohua/topology
|
||||
var grd = ctx.createLinearGradient(from.x, from.y, to.x, to.y);
|
||||
grd.addColorStop(0, this.lineGradientFromColor);
|
||||
grd.addColorStop(1, this.lineGradientToColor);
|
||||
ctx.strokeStyle = grd;
|
||||
};
|
||||
const grd = ctx.createLinearGradient(from.x, from.y, to.x, to.y)
|
||||
grd.addColorStop(0, this.lineGradientFromColor)
|
||||
grd.addColorStop(1, this.lineGradientToColor)
|
||||
ctx.strokeStyle = grd
|
||||
}
|
||||
Line.prototype.calcTextRect = function () {
|
||||
var center = this.getCenter();
|
||||
var width = Math.abs(this.from.x - this.to.x);
|
||||
const center = this.getCenter()
|
||||
let width = Math.abs(this.from.x - this.to.x)
|
||||
if (width < 100) {
|
||||
width = 100;
|
||||
width = 100
|
||||
}
|
||||
if (this.text && !this.text.split) {
|
||||
this.text += '';
|
||||
this.text += ''
|
||||
}
|
||||
var height = this.lineHeight *
|
||||
const height = this.lineHeight *
|
||||
this.fontSize *
|
||||
(this.textMaxLine || (this.text && this.text.split('\n').length) || 1);
|
||||
this.textRect = new Rect(center.x - width / 2, center.y - height / 2, width, height);
|
||||
};
|
||||
(this.textMaxLine || (this.text && this.text.split('\n').length) || 1)
|
||||
this.textRect = new Rect(center.x - width / 2, center.y - height / 2, width, height)
|
||||
}
|
||||
Line.prototype.getTextRect = function () {
|
||||
// calc every time just in case text line is changed.
|
||||
this.calcTextRect();
|
||||
return this.textRect;
|
||||
};
|
||||
this.calcTextRect()
|
||||
return this.textRect
|
||||
}
|
||||
Line.prototype.getCenter = function () {
|
||||
var center = new Point(this.from.x, this.from.y);
|
||||
let center = new Point(this.from.x, this.from.y)
|
||||
switch (this.name) {
|
||||
case 'line':
|
||||
center = this.getLineCenter(this.from, this.to);
|
||||
break;
|
||||
center = this.getLineCenter(this.from, this.to)
|
||||
break
|
||||
case 'polyline':
|
||||
var i = Math.round(this.controlPoints.length / 2);
|
||||
center = this.getLineCenter(this.controlPoints[i - 1] || this.from, this.controlPoints[i] || this.to);
|
||||
break;
|
||||
var i = Math.round(this.controlPoints.length / 2)
|
||||
center = this.getLineCenter(this.controlPoints[i - 1] || this.from, this.controlPoints[i] || this.to)
|
||||
break
|
||||
case 'curve':
|
||||
center = getBezierPoint(0.5, this.to, this.controlPoints[1], this.controlPoints[0], this.from);
|
||||
break;
|
||||
center = getBezierPoint(0.5, this.to, this.controlPoints[1], this.controlPoints[0], this.from)
|
||||
break
|
||||
default:
|
||||
if (drawLineFns[this.name].getCenter) {
|
||||
center = drawLineFns[this.name].getCenter(this);
|
||||
center = drawLineFns[this.name].getCenter(this)
|
||||
}
|
||||
}
|
||||
return center;
|
||||
};
|
||||
return center
|
||||
}
|
||||
Line.prototype.getLineCenter = function (from, to) {
|
||||
return new Point((from.x + to.x) / 2, (from.y + to.y) / 2);
|
||||
};
|
||||
return new Point((from.x + to.x) / 2, (from.y + to.y) / 2)
|
||||
}
|
||||
Line.prototype.getPointByPos = function (pos) {
|
||||
if (pos <= 0) {
|
||||
return this.from;
|
||||
return this.from
|
||||
}
|
||||
switch (this.name) {
|
||||
case 'line':
|
||||
return this.getLinePtByPos(this.from, this.to, pos);
|
||||
return this.getLinePtByPos(this.from, this.to, pos)
|
||||
case 'polyline':
|
||||
if (!this.controlPoints || !this.controlPoints.length) {
|
||||
return this.getLinePtByPos(this.from, this.to, pos);
|
||||
}
|
||||
else {
|
||||
var points = [].concat(this.controlPoints, this.to);
|
||||
var curPt = this.from;
|
||||
for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
|
||||
var pt = points_1[_i];
|
||||
var l = lineLen(curPt, pt);
|
||||
return this.getLinePtByPos(this.from, this.to, pos)
|
||||
} else {
|
||||
const points = [].concat(this.controlPoints, this.to)
|
||||
let curPt = this.from
|
||||
for (let _i = 0, points_1 = points; _i < points_1.length; _i++) {
|
||||
const pt = points_1[_i]
|
||||
const l = lineLen(curPt, pt)
|
||||
if (pos > l) {
|
||||
pos -= l;
|
||||
curPt = pt;
|
||||
}
|
||||
else {
|
||||
return this.getLinePtByPos(curPt, pt, pos);
|
||||
pos -= l
|
||||
curPt = pt
|
||||
} else {
|
||||
return this.getLinePtByPos(curPt, pt, pos)
|
||||
}
|
||||
}
|
||||
return this.to;
|
||||
return this.to
|
||||
}
|
||||
case 'curve':
|
||||
return getBezierPoint(pos / this.getLen(), this.from, this.controlPoints[0], this.controlPoints[1], this.to);
|
||||
return getBezierPoint(pos / this.getLen(), this.from, this.controlPoints[0], this.controlPoints[1], this.to)
|
||||
default:
|
||||
if (drawLineFns[this.name].getPointByPos) {
|
||||
return drawLineFns[this.name].getPointByPos(pos, this);
|
||||
return drawLineFns[this.name].getPointByPos(pos, this)
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return null
|
||||
}
|
||||
Line.prototype.getPointByReversePos = function (pos) {
|
||||
if (pos <= 0) {
|
||||
return this.to;
|
||||
return this.to
|
||||
}
|
||||
switch (this.name) {
|
||||
case 'line':
|
||||
return this.getLinePtByPos(this.to, this.from, pos);
|
||||
return this.getLinePtByPos(this.to, this.from, pos)
|
||||
case 'polyline':
|
||||
if (!this.controlPoints || !this.controlPoints.length) {
|
||||
return this.getLinePtByPos(this.to, this.from, pos);
|
||||
}
|
||||
else {
|
||||
var points_3 = [];
|
||||
return this.getLinePtByPos(this.to, this.from, pos)
|
||||
} else {
|
||||
const points_3 = []
|
||||
this.controlPoints.forEach(function (item) {
|
||||
points_3.unshift(item);
|
||||
});
|
||||
points_3.unshift(this.to);
|
||||
var curPt = this.to;
|
||||
for (var _i = 0, points_2 = points_3; _i < points_2.length; _i++) {
|
||||
var pt = points_2[_i];
|
||||
var l = lineLen(curPt, pt);
|
||||
points_3.unshift(item)
|
||||
})
|
||||
points_3.unshift(this.to)
|
||||
let curPt = this.to
|
||||
for (let _i = 0, points_2 = points_3; _i < points_2.length; _i++) {
|
||||
const pt = points_2[_i]
|
||||
const l = lineLen(curPt, pt)
|
||||
if (pos > l) {
|
||||
pos -= l;
|
||||
curPt = pt;
|
||||
}
|
||||
else {
|
||||
return this.getLinePtByPos(curPt, pt, pos);
|
||||
pos -= l
|
||||
curPt = pt
|
||||
} else {
|
||||
return this.getLinePtByPos(curPt, pt, pos)
|
||||
}
|
||||
}
|
||||
return this.from;
|
||||
return this.from
|
||||
}
|
||||
case 'curve':
|
||||
return getBezierPoint(pos / this.getLen(), this.to, this.controlPoints[1], this.controlPoints[0], this.from);
|
||||
return getBezierPoint(pos / this.getLen(), this.to, this.controlPoints[1], this.controlPoints[0], this.from)
|
||||
default:
|
||||
if (drawLineFns[this.name].getPointByReversePos) {
|
||||
return drawLineFns[this.name].getPointByReversePos(pos, this);
|
||||
return drawLineFns[this.name].getPointByReversePos(pos, this)
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return null
|
||||
}
|
||||
Line.prototype.getLinePtByPos = function (from, to, pos) {
|
||||
var length = lineLen(from, to);
|
||||
const length = lineLen(from, to)
|
||||
if (pos <= 0) {
|
||||
return from;
|
||||
return from
|
||||
}
|
||||
if (pos >= length) {
|
||||
return to;
|
||||
return to
|
||||
}
|
||||
let x, y
|
||||
x = from.x + (to.x - from.x) * (pos / length)
|
||||
y = from.y + (to.y - from.y) * (pos / length)
|
||||
return new Point(x, y)
|
||||
}
|
||||
var x, y;
|
||||
x = from.x + (to.x - from.x) * (pos / length);
|
||||
y = from.y + (to.y - from.y) * (pos / length);
|
||||
return new Point(x, y);
|
||||
};
|
||||
Line.prototype.calcRectInParent = function (parent) {
|
||||
var parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum;
|
||||
var parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum;
|
||||
const parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum
|
||||
const parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum
|
||||
this.rectInParent = {
|
||||
x: ((this.from.x - parent.rect.x - parent.paddingLeftNum) * 100) / parentW + '%',
|
||||
y: ((this.from.y - parent.rect.y - parent.paddingTopNum) * 100) / parentH + '%',
|
||||
width: 0,
|
||||
height: 0,
|
||||
rotate: 0,
|
||||
};
|
||||
};
|
||||
rotate: 0
|
||||
}
|
||||
}
|
||||
// 根据父节点rect计算自己(子节点)的rect
|
||||
Line.prototype.calcRectByParent = function (parent) {
|
||||
if (!this.rectInParent) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
var parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum;
|
||||
var parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum;
|
||||
var x = parent.rect.x +
|
||||
const parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum
|
||||
const parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum
|
||||
let x = parent.rect.x +
|
||||
parent.paddingLeftNum +
|
||||
abs(parentW, this.rectInParent.x) +
|
||||
abs(parentW, this.rectInParent.marginLeft);
|
||||
var y = parent.rect.y +
|
||||
abs(parentW, this.rectInParent.marginLeft)
|
||||
let y = parent.rect.y +
|
||||
parent.paddingTopNum +
|
||||
abs(parentH, this.rectInParent.y) +
|
||||
abs(parentW, this.rectInParent.marginTop);
|
||||
abs(parentW, this.rectInParent.marginTop)
|
||||
if (this.rectInParent.marginLeft === undefined && this.rectInParent.marginRight) {
|
||||
x -= abs(parentW, this.rectInParent.marginRight);
|
||||
x -= abs(parentW, this.rectInParent.marginRight)
|
||||
}
|
||||
if (this.rectInParent.marginTop === undefined && this.rectInParent.marginBottom) {
|
||||
y -= abs(parentW, this.rectInParent.marginBottom);
|
||||
y -= abs(parentW, this.rectInParent.marginBottom)
|
||||
}
|
||||
this.translate(x - this.from.x, y - this.from.y)
|
||||
}
|
||||
this.translate(x - this.from.x, y - this.from.y);
|
||||
};
|
||||
Line.prototype.initAnimate = function () {
|
||||
this.animateStart = 0;
|
||||
this.animateDot = undefined;
|
||||
this.animatePos = 0;
|
||||
};
|
||||
this.animateStart = 0
|
||||
this.animateDot = undefined
|
||||
this.animatePos = 0
|
||||
}
|
||||
Line.prototype.pauseAnimate = function () {
|
||||
Store.set(this.generateStoreKey('LT:AnimatePlay'), {
|
||||
pen: this,
|
||||
stop: true,
|
||||
});
|
||||
};
|
||||
stop: true
|
||||
})
|
||||
}
|
||||
Line.prototype.stopAnimate = function () {
|
||||
var _this = this;
|
||||
this.pauseAnimate();
|
||||
this.initAnimate();
|
||||
const _this = this
|
||||
this.pauseAnimate()
|
||||
this.initAnimate()
|
||||
setTimeout(function () {
|
||||
Store.set(_this.generateStoreKey('LT:render'), {
|
||||
pen: _this,
|
||||
stop: true,
|
||||
});
|
||||
}, 50);
|
||||
};
|
||||
stop: true
|
||||
})
|
||||
}, 50)
|
||||
}
|
||||
Line.prototype.animate = function (now) {
|
||||
this.animatePos += this.animateSpan;
|
||||
this.animatePos += this.animateSpan
|
||||
switch (this.animateType) {
|
||||
case 'beads':
|
||||
if (this.animateReverse) {
|
||||
this.lineDashOffset = this.animatePos;
|
||||
this.lineDashOffset = this.animatePos
|
||||
} else {
|
||||
this.lineDashOffset = -this.animatePos
|
||||
}
|
||||
else {
|
||||
this.lineDashOffset = -this.animatePos;
|
||||
}
|
||||
var len = this.lineWidth;
|
||||
var len = this.lineWidth
|
||||
if (len < 5) {
|
||||
len = 5;
|
||||
len = 5
|
||||
}
|
||||
if (this.animateLineDash) {
|
||||
this.lineDash = this.animateLineDash;
|
||||
this.lineDash = this.animateLineDash
|
||||
} else {
|
||||
this.lineDash = [len, len * 2]
|
||||
}
|
||||
else {
|
||||
this.lineDash = [len, len * 2];
|
||||
}
|
||||
break;
|
||||
break
|
||||
case 'dot':
|
||||
case 'comet':
|
||||
this.lineDash = undefined;
|
||||
var pos = void 0;
|
||||
this.lineDash = undefined
|
||||
var pos = void 0
|
||||
if (this.animateReverse) {
|
||||
pos = this.getPointByReversePos(this.animatePos + this.animateToSize);
|
||||
pos = this.getPointByReversePos(this.animatePos + this.animateToSize)
|
||||
} else {
|
||||
pos = this.getPointByPos(this.animatePos + this.animateFromSize)
|
||||
}
|
||||
else {
|
||||
pos = this.getPointByPos(this.animatePos + this.animateFromSize);
|
||||
}
|
||||
this.animateDot = pos;
|
||||
break;
|
||||
this.animateDot = pos
|
||||
break
|
||||
default:
|
||||
if (this.animateReverse) {
|
||||
this.lineDash = [0, this.length - this.animatePos + 1, this.animatePos];
|
||||
this.lineDash = [0, this.length - this.animatePos + 1, this.animatePos]
|
||||
} else {
|
||||
this.lineDash = [this.animatePos, this.length - this.animatePos + 1]
|
||||
}
|
||||
else {
|
||||
this.lineDash = [this.animatePos, this.length - this.animatePos + 1];
|
||||
}
|
||||
break;
|
||||
break
|
||||
}
|
||||
if (this.animatePos > this.length + this.animateSpan - this.animateFromSize - this.animateToSize) {
|
||||
if (++this.animateCycleIndex >= this.animateCycle && this.animateCycle > 0) {
|
||||
this.animateStart = 0;
|
||||
this.initAnimate();
|
||||
Store.set(this.generateStoreKey('animateEnd'), this);
|
||||
return;
|
||||
this.animateStart = 0
|
||||
this.initAnimate()
|
||||
Store.set(this.generateStoreKey('animateEnd'), this)
|
||||
return
|
||||
}
|
||||
this.animatePos = this.animateSpan
|
||||
}
|
||||
this.animatePos = this.animateSpan;
|
||||
}
|
||||
};
|
||||
Line.prototype.getBubbles = function () {
|
||||
var bubbles = [];
|
||||
for (var i = 0; i < 30 && this.animatePos - i > 0; ++i) {
|
||||
const bubbles = []
|
||||
for (let i = 0; i < 30 && this.animatePos - i > 0; ++i) {
|
||||
if (this.animateReverse) {
|
||||
bubbles.push({
|
||||
pos: this.getPointByReversePos(this.animatePos - i * 2 + this.animateToSize),
|
||||
a: 1 - i * 0.03,
|
||||
r: this.lineWidth - i * 0.01,
|
||||
});
|
||||
}
|
||||
else {
|
||||
r: this.lineWidth - i * 0.01
|
||||
})
|
||||
} else {
|
||||
bubbles.push({
|
||||
pos: this.getPointByPos(this.animatePos - i * 2 + this.animateFromSize),
|
||||
a: 1 - i * 0.03,
|
||||
r: this.lineWidth - i * 0.01,
|
||||
});
|
||||
r: this.lineWidth - i * 0.01
|
||||
})
|
||||
}
|
||||
}
|
||||
return bubbles;
|
||||
};
|
||||
return bubbles
|
||||
}
|
||||
Line.prototype.round = function () {
|
||||
this.from.round();
|
||||
this.to.round();
|
||||
};
|
||||
this.from.round()
|
||||
this.to.round()
|
||||
}
|
||||
Line.prototype.translate = function (x, y) {
|
||||
if (this.from) {
|
||||
this.from.x += x;
|
||||
this.from.y += y;
|
||||
this.to.x += x;
|
||||
this.to.y += y;
|
||||
this.from.x += x
|
||||
this.from.y += y
|
||||
this.to.x += x
|
||||
this.to.y += y
|
||||
if (this.text) {
|
||||
this.textRect = undefined;
|
||||
this.textRect = undefined
|
||||
}
|
||||
for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
|
||||
var pt = _a[_i];
|
||||
pt.x += x;
|
||||
pt.y += y;
|
||||
for (let _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
|
||||
const pt = _a[_i]
|
||||
pt.x += x
|
||||
pt.y += y
|
||||
}
|
||||
}
|
||||
if (this.children) {
|
||||
for (var _b = 0, _c = this.children; _b < _c.length; _b++) {
|
||||
var item = _c[_b];
|
||||
item.translate(x, y);
|
||||
for (let _b = 0, _c = this.children; _b < _c.length; _b++) {
|
||||
const item = _c[_b]
|
||||
item.translate(x, y)
|
||||
}
|
||||
}
|
||||
Store.set(this.generateStoreKey('pts-') + this.id, undefined);
|
||||
};
|
||||
Store.set(this.generateStoreKey('pts-') + this.id, undefined)
|
||||
}
|
||||
Line.prototype.scale = function (scale, center) {
|
||||
if (this.from) {
|
||||
this.from.x = center.x - (center.x - this.from.x) * scale;
|
||||
this.from.y = center.y - (center.y - this.from.y) * scale;
|
||||
this.to.x = center.x - (center.x - this.to.x) * scale;
|
||||
this.to.y = center.y - (center.y - this.to.y) * scale;
|
||||
this.lineWidth *= scale;
|
||||
this.borderWidth *= scale;
|
||||
this.fontSize *= scale;
|
||||
this.from.x = center.x - (center.x - this.from.x) * scale
|
||||
this.from.y = center.y - (center.y - this.from.y) * scale
|
||||
this.to.x = center.x - (center.x - this.to.x) * scale
|
||||
this.to.y = center.y - (center.y - this.to.y) * scale
|
||||
this.lineWidth *= scale
|
||||
this.borderWidth *= scale
|
||||
this.fontSize *= scale
|
||||
if (this.text) {
|
||||
this.textRect = undefined;
|
||||
this.textRect = undefined
|
||||
}
|
||||
this.textOffsetX *= scale;
|
||||
this.textOffsetY *= scale;
|
||||
for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
|
||||
var pt = _a[_i];
|
||||
pt.x = center.x - (center.x - pt.x) * scale;
|
||||
pt.y = center.y - (center.y - pt.y) * scale;
|
||||
this.textOffsetX *= scale
|
||||
this.textOffsetY *= scale
|
||||
for (let _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
|
||||
const pt = _a[_i]
|
||||
pt.x = center.x - (center.x - pt.x) * scale
|
||||
pt.y = center.y - (center.y - pt.y) * scale
|
||||
}
|
||||
}
|
||||
if (this.children) {
|
||||
for (var _b = 0, _c = this.children; _b < _c.length; _b++) {
|
||||
var item = _c[_b];
|
||||
item.scale(scale, center);
|
||||
for (let _b = 0, _c = this.children; _b < _c.length; _b++) {
|
||||
const item = _c[_b]
|
||||
item.scale(scale, center)
|
||||
}
|
||||
}
|
||||
Store.set(this.generateStoreKey('pts-') + this.id, undefined);
|
||||
};
|
||||
Store.set(this.generateStoreKey('pts-') + this.id, undefined)
|
||||
}
|
||||
Line.prototype.hit = function (pt, padding) {
|
||||
if (padding === void 0) { padding = 0; }
|
||||
if (padding === void 0) { padding = 0 }
|
||||
if (this.from.hit(pt, padding) || this.to.hit(pt, padding)) {
|
||||
return this;
|
||||
return this
|
||||
}
|
||||
}
|
||||
};
|
||||
Line.prototype.clone = function () {
|
||||
return new Line(this);
|
||||
};
|
||||
return Line;
|
||||
}(Pen));
|
||||
export { Line };
|
||||
return new Line(this)
|
||||
}
|
||||
return Line
|
||||
}(Pen))
|
||||
export { Line }
|
||||
// # sourceMappingURL=line.js.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user