fix:修改 topology 源码 删除创建的节点以及给节点创建的对应的事件

This commit is contained in:
zhangyu
2022-07-14 09:55:10 +08:00
parent 739fa3e82f
commit 73b71d578f
186 changed files with 5955 additions and 6025 deletions

File diff suppressed because one or more lines are too long

View File

@@ -60,10 +60,10 @@ export default {
if (res2.length == 0) { if (res2.length == 0) {
this.topologyLoading = false this.topologyLoading = false
} }
// res2.forEach(item => { res2.forEach(item => {
// temp.push(item) temp.push(item)
// }) })
temp.push(res2[2]) // temp.push(res2[2])
this.allProject = JSON.parse(JSON.stringify(temp)) this.allProject = JSON.parse(JSON.stringify(temp))
temp = null temp = null
axiosAll = null axiosAll = null
@@ -101,6 +101,9 @@ export default {
}, },
mounted () { mounted () {
this.queryAllProjectData() this.queryAllProjectData()
},
beforeDestroy () {
this.allProject = []
} }
} }
</script> </script>

View File

@@ -28,7 +28,7 @@ import { formatScientificNotation, getMetricTypeValue } from '@/components/commo
import chartDataFormat from '@/components/chart/chartDataFormat' import chartDataFormat from '@/components/chart/chartDataFormat'
import { initColor } from '@/components/chart/chart/tools' import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash' import lodash from 'lodash'
import bus from "@/libs/bus"; import bus from '@/libs/bus'
export default { export default {
name: 'chart-bar', name: 'chart-bar',

View File

@@ -293,7 +293,6 @@ export default {
} }
}, },
mounted () { mounted () {
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}` this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
}, },
beforeDestroy () { beforeDestroy () {

View File

@@ -496,7 +496,7 @@ export default {
xhr.responseType = '' xhr.responseType = ''
// 创建一个 post 请求,采用异步 // 创建一个 post 请求,采用异步
xhr.open('get', 'http://192.168.44.100/' + nowUrl, true) 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) { xhr.onload = function (e) {
if (this.status == 200 || this.status == 304) { if (this.status == 200 || this.status == 304) {
@@ -504,7 +504,7 @@ export default {
resolve(JSON.parse(this.responseText)) resolve(JSON.parse(this.responseText))
} }
} }
xhr.onerror = function(e) { console.log(e) }; xhr.onerror = function (e) { console.log(e) }
// 发送数据 // 发送数据
xhr.send() xhr.send()
}) })

View File

@@ -1,6 +1,6 @@
export * from './src/final'; export * from './src/final'
export * from './src/fork'; export * from './src/fork'
export * from './src/swimlaneH'; export * from './src/swimlaneH'
export * from './src/swimlaneV'; export * from './src/swimlaneV'
export * from './src/register'; export * from './src/register'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,10 +1,10 @@
export function activityFinal(ctx, node) { export function activityFinal (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); 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.stroke()
ctx.beginPath(); ctx.beginPath()
ctx.fillStyle = ctx.strokeStyle; 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.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.fill()
} }
//# sourceMappingURL=final.js.map // # sourceMappingURL=final.js.map

View File

@@ -1,11 +1,11 @@
import { Rect } from '@topology/core'; import { Rect } from '@topology/core'
export function activityFinalIconRect(node) { export function activityFinalIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function activityFinalTextRect(node) { export function activityFinalTextRect (node) {
var w = (node.rect.width * 5) / 7; const w = (node.rect.width * 5) / 7
var h = (node.rect.height * 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.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; node.fullTextRect = node.textRect
} }
//# sourceMappingURL=final.rect.js.map // # sourceMappingURL=final.rect.js.map

View File

@@ -1,3 +1,3 @@
export * from './final'; export * from './final'
export * from './final.rect'; export * from './final.rect'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,28 +1,28 @@
import { Point, Direction } from '@topology/core'; import { Point, Direction } from '@topology/core'
export function forkHAnchors(node) { 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.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)); node.anchors.push(new Point(node.rect.ex, node.rect.y + node.rect.height / 2, Direction.Right))
var dis = 5; const dis = 5
for (var i = dis; node.rect.x + i < node.rect.ex; i = i + dis) { for (let 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); const 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); const pt2 = new Point(node.rect.x + i, node.rect.ey, Direction.Bottom)
pt1.hidden = true; pt1.hidden = true
pt2.hidden = true; pt2.hidden = true
node.anchors.push(pt1); node.anchors.push(pt1)
node.anchors.push(pt2); node.anchors.push(pt2)
} }
} }
export function forkVAnchors(node) { 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.y, Direction.Up))
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.ey, Direction.Bottom)); node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.ey, Direction.Bottom))
var dis = 5; const dis = 5
for (var i = dis; node.rect.y + i < node.rect.ey; i = i + dis) { for (let 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); const 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); const pt2 = new Point(node.rect.ex, node.rect.y + i, Direction.Right)
pt1.hidden = true; pt1.hidden = true
pt2.hidden = true; pt2.hidden = true
node.anchors.push(pt1); node.anchors.push(pt1)
node.anchors.push(pt2); node.anchors.push(pt2)
} }
} }
//# sourceMappingURL=fork.anchor.js.map // # sourceMappingURL=fork.anchor.js.map

View File

@@ -1,25 +1,25 @@
export function fork(ctx, node) { export function fork (ctx, node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + r, node.rect.y); 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.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.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.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.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=fork.js.map // # sourceMappingURL=fork.js.map

View File

@@ -1,9 +1,9 @@
import { Rect } from '@topology/core'; import { Rect } from '@topology/core'
export function forkIconRect(node) { export function forkIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function forkTextRect(node) { export function forkTextRect (node) {
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height); node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height)
node.fullTextRect = node.textRect; node.fullTextRect = node.textRect
} }
//# sourceMappingURL=fork.rect.js.map // # sourceMappingURL=fork.rect.js.map

View File

@@ -1,4 +1,4 @@
export * from './fork'; export * from './fork'
export * from './fork.rect'; export * from './fork.rect'
export * from './fork.anchor'; export * from './fork.anchor'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,13 +1,13 @@
import { registerNode } from '@topology/core'; import { registerNode } from '@topology/core'
import { activityFinal, activityFinalIconRect, activityFinalTextRect } from './final'; import { activityFinal, activityFinalIconRect, activityFinalTextRect } from './final'
import { fork, forkHAnchors, forkVAnchors, forkIconRect, forkTextRect } from './fork'; import { fork, forkHAnchors, forkVAnchors, forkIconRect, forkTextRect } from './fork'
import { swimlaneH, swimlaneHIconRect, swimlaneHTextRect } from './swimlaneH'; import { swimlaneH, swimlaneHIconRect, swimlaneHTextRect } from './swimlaneH'
import { swimlaneV, swimlaneVIconRect, swimlaneVTextRect } from './swimlaneV'; import { swimlaneV, swimlaneVIconRect, swimlaneVTextRect } from './swimlaneV'
export function register() { export function register () {
registerNode('activityFinal', activityFinal, null, activityFinalIconRect, activityFinalTextRect); registerNode('activityFinal', activityFinal, null, activityFinalIconRect, activityFinalTextRect)
registerNode('swimlaneV', swimlaneV, null, swimlaneVIconRect, swimlaneVTextRect); registerNode('swimlaneV', swimlaneV, null, swimlaneVIconRect, swimlaneVTextRect)
registerNode('swimlaneH', swimlaneH, null, swimlaneHIconRect, swimlaneHTextRect); registerNode('swimlaneH', swimlaneH, null, swimlaneHIconRect, swimlaneHTextRect)
registerNode('forkH', fork, forkHAnchors, forkIconRect, forkTextRect); registerNode('forkH', fork, forkHAnchors, forkIconRect, forkTextRect)
registerNode('forkV', fork, forkVAnchors, forkIconRect, forkTextRect); registerNode('forkV', fork, forkVAnchors, forkIconRect, forkTextRect)
} }
//# sourceMappingURL=register.js.map // # sourceMappingURL=register.js.map

View File

@@ -1,3 +1,3 @@
export * from './swimlaneH'; export * from './swimlaneH'
export * from './swimlaneH.rect'; export * from './swimlaneH.rect'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,27 +1,27 @@
export function swimlaneH(ctx, node) { export function swimlaneH (ctx, node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + r, node.rect.y); 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.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.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.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.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
ctx.closePath(); ctx.closePath()
ctx.moveTo(node.rect.x + 40, node.rect.y); ctx.moveTo(node.rect.x + 40, node.rect.y)
ctx.lineTo(node.rect.x + 40, node.rect.ey); ctx.lineTo(node.rect.x + 40, node.rect.ey);
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=swimlaneH.js.map // # sourceMappingURL=swimlaneH.js.map

View File

@@ -1,9 +1,9 @@
import { Rect } from '@topology/core'; import { Rect } from '@topology/core'
export function swimlaneHIconRect(node) { export function swimlaneHIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function swimlaneHTextRect(node) { export function swimlaneHTextRect (node) {
node.textRect = new Rect(node.rect.x + 10, node.rect.y, 20, node.rect.height); node.textRect = new Rect(node.rect.x + 10, node.rect.y, 20, node.rect.height)
node.fullTextRect = node.textRect; node.fullTextRect = node.textRect
} }
//# sourceMappingURL=swimlaneH.rect.js.map // # sourceMappingURL=swimlaneH.rect.js.map

View File

@@ -1,3 +1,3 @@
export * from './swimlaneV'; export * from './swimlaneV'
export * from './swimlaneV.rect'; export * from './swimlaneV.rect'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,27 +1,27 @@
export function swimlaneV(ctx, node) { export function swimlaneV (ctx, node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + r, node.rect.y); 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.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.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.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.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
ctx.closePath(); ctx.closePath()
ctx.moveTo(node.rect.x, node.rect.y + 40); ctx.moveTo(node.rect.x, node.rect.y + 40)
ctx.lineTo(node.rect.ex, node.rect.y + 40); ctx.lineTo(node.rect.ex, node.rect.y + 40);
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=swimlaneV.js.map // # sourceMappingURL=swimlaneV.js.map

View File

@@ -1,9 +1,9 @@
import { Rect } from '@topology/core'; import { Rect } from '@topology/core'
export function swimlaneVIconRect(node) { export function swimlaneVIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function swimlaneVTextRect(node) { export function swimlaneVTextRect (node) {
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40); node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40)
node.fullTextRect = node.textRect; node.fullTextRect = node.textRect
} }
//# sourceMappingURL=swimlaneV.rect.js.map // # sourceMappingURL=swimlaneV.rect.js.map

View File

@@ -1,3 +1,3 @@
export * from './src/echarts'; export * from './src/echarts'
export * from './src/register'; export * from './src/register'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,44 +1,44 @@
import { s8, createDiv, rectangle } from '@topology/core'; import { s8, createDiv, rectangle } from '@topology/core'
export var echartsObjs = {}; export var echartsObjs = {}
export function echarts(ctx, node) { export function echarts (ctx, node) {
// 绘制一个底图,类似于占位符。 // 绘制一个底图,类似于占位符。
rectangle(ctx, node); rectangle(ctx, node)
// tslint:disable-next-line:no-shadowed-variable // tslint:disable-next-line:no-shadowed-variable
var echarts = echartsObjs.echarts || window.echarts; const echarts = echartsObjs.echarts || window.echarts
if (!node.data || !echarts) { if (!node.data || !echarts) {
return; return
} }
if (typeof node.data === 'string') { if (typeof node.data === 'string') {
node.data = JSON.parse(node.data); node.data = JSON.parse(node.data)
} }
if (!node.data.echarts) { if (!node.data.echarts) {
return; return
} }
if (!node.elementId) { if (!node.elementId) {
node.elementId = s8(); node.elementId = s8()
} }
if (!node.elementLoaded) { if (!node.elementLoaded) {
echartsObjs[node.id] = { echartsObjs[node.id] = {
div: createDiv(node), div: createDiv(node)
}; }
node.elementLoaded = true; node.elementLoaded = true
document.body.appendChild(echartsObjs[node.id].div); document.body.appendChild(echartsObjs[node.id].div)
// 添加当前节点到div层 // 添加当前节点到div层
node.addToDiv(); node.addToDiv()
echartsObjs[node.id].chart = echarts.init(echartsObjs[node.id].div, node.data.echarts.theme); echartsObjs[node.id].chart = echarts.init(echartsObjs[node.id].div, node.data.echarts.theme)
node.elementRendered = false; node.elementRendered = false
// 等待父div先渲染完成避免初始图表控件太大 // 等待父div先渲染完成避免初始图表控件太大
setTimeout(function () { setTimeout(function () {
echartsObjs[node.id].chart.resize(); echartsObjs[node.id].chart.resize()
}); })
} }
if (!node.elementRendered) { if (!node.elementRendered) {
// 初始化时等待父div先渲染完成避免初始图表控件太大。 // 初始化时等待父div先渲染完成避免初始图表控件太大。
setTimeout(function () { setTimeout(function () {
echartsObjs[node.id].chart.setOption(node.data.echarts.option); echartsObjs[node.id].chart.setOption(node.data.echarts.option)
echartsObjs[node.id].chart.resize(); echartsObjs[node.id].chart.resize()
node.elementRendered = true; node.elementRendered = true
}); })
} }
} }
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,10 +1,10 @@
import { registerNode, loadJS } from '@topology/core'; import { registerNode, loadJS } from '@topology/core'
import { echarts, echartsObjs } from './echarts'; import { echarts, echartsObjs } from './echarts'
export function register(_echarts) { export function register (_echarts) {
echartsObjs.echarts = _echarts; echartsObjs.echarts = _echarts
if (!echartsObjs.echarts && !window.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 // # sourceMappingURL=register.js.map

View File

@@ -1,3 +1,3 @@
export * from './src/class'; export * from './src/class'
export * from './src/register'; export * from './src/register'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,56 +1,56 @@
export function simpleClass(ctx, node) { export function simpleClass (ctx, node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + r, node.rect.y); 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.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.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.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.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
ctx.closePath(); ctx.closePath()
ctx.moveTo(node.rect.x, node.rect.y + 40); ctx.moveTo(node.rect.x, node.rect.y + 40)
ctx.lineTo(node.rect.ex, node.rect.y + 40); ctx.lineTo(node.rect.ex, node.rect.y + 40);
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
export function interfaceClass(ctx, node) { export function interfaceClass (ctx, node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + r, node.rect.y); 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.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.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.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.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
ctx.closePath(); ctx.closePath()
ctx.moveTo(node.rect.x, node.rect.y + 40); ctx.moveTo(node.rect.x, node.rect.y + 40)
ctx.lineTo(node.rect.ex, node.rect.y + 40); ctx.lineTo(node.rect.ex, node.rect.y + 40)
var height = node.rect.y + 20 + node.rect.height / 2; const height = node.rect.y + 20 + node.rect.height / 2
ctx.moveTo(node.rect.x, height); ctx.moveTo(node.rect.x, height)
ctx.lineTo(node.rect.ex, height); ctx.lineTo(node.rect.ex, height);
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=class.js.map // # sourceMappingURL=class.js.map

View File

@@ -1,16 +1,16 @@
import { Rect } from '@topology/core'; import { Rect } from '@topology/core'
export function simpleClassIconRect(node) { export function simpleClassIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function simpleClassTextRect(node) { export function simpleClassTextRect (node) {
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40); node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40)
node.fullTextRect = node.textRect; node.fullTextRect = node.textRect
} }
export function interfaceClassIconRect(node) { export function interfaceClassIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function interfaceClassTextRect(node) { export function interfaceClassTextRect (node) {
node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40); node.textRect = new Rect(node.rect.x, node.rect.y, node.rect.width, 40)
node.fullTextRect = node.textRect; node.fullTextRect = node.textRect
} }
//# sourceMappingURL=class.rect.js.map // # sourceMappingURL=class.rect.js.map

View File

@@ -1,3 +1,3 @@
export * from './class'; export * from './class'
export * from './class.rect'; export * from './class.rect'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,7 +1,7 @@
import { registerNode } from '@topology/core'; import { registerNode } from '@topology/core'
import { simpleClass, simpleClassIconRect, simpleClassTextRect, interfaceClass, interfaceClassIconRect, interfaceClassTextRect } from './class'; import { simpleClass, simpleClassIconRect, simpleClassTextRect, interfaceClass, interfaceClassIconRect, interfaceClassTextRect } from './class'
export function register() { export function register () {
registerNode('simpleClass', simpleClass, null, simpleClassIconRect, simpleClassTextRect); registerNode('simpleClass', simpleClass, null, simpleClassIconRect, simpleClassTextRect)
registerNode('interfaceClass', interfaceClass, null, interfaceClassIconRect, interfaceClassTextRect); registerNode('interfaceClass', interfaceClass, null, interfaceClassIconRect, interfaceClassTextRect)
} }
//# sourceMappingURL=register.js.map // # sourceMappingURL=register.js.map

View File

@@ -1,6 +1,6 @@
export * from './src/core'; export * from './src/core'
export * from './src/options'; export * from './src/options'
export * from './src/utils'; export * from './src/utils'
export * from './src/models'; export * from './src/models'
export * from './src/middles'; export * from './src/middles'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -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) { var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || ({ __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]; }; function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
return extendStatics(d, b); return extendStatics(d, b)
}; }
return function (d, b) { return function (d, b) {
extendStatics(d, b); extendStatics(d, b)
function __() { this.constructor = d; } function __ () { this.constructor = d }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
}; }
})(); })()
import { Store } from 'le5le-store'; const AnimateLayer = /** @class */ (function (_super) {
import { PenType } from './models/pen'; __extends(AnimateLayer, _super)
import { Node } from './models/node'; function AnimateLayer (options, TID) {
import { Line } from './models/line'; if (options === void 0) { options = {} }
import { Layer } from './layer'; const _this = _super.call(this, TID) || this
import { s8 } from './utils/uuid'; _this.options = options
import { find } from './utils/canvas'; _this.pens = new Map()
var AnimateLayer = /** @class */ (function (_super) { _this.lastNow = 0
__extends(AnimateLayer, _super); Store.set(_this.generateStoreKey('LT:AnimateLayer'), _this)
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 (!_this.options.animateColor) { if (!_this.options.animateColor) {
_this.options.animateColor = '#ff6600'; _this.options.animateColor = '#ff6600'
} }
_this.subscribeUpdate = Store.subscribe(_this.generateStoreKey('LT:updateLines'), function (lines) { _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) { _this.subscribePlay = Store.subscribe(_this.generateStoreKey('LT:AnimatePlay'), function (params) {
if (params.stop) { if (params.stop) {
if (params.tag) { if (params.tag) {
var pens = find(params.tag, _this.data.pens); const pens = find(params.tag, _this.data.pens)
pens.forEach(function (item) { pens.forEach(function (item) {
if (_this.pens.has(item.id)) { 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)) { 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 (params.pen) {
if (_this.pens.has(params.pen.id)) { if (_this.pens.has(params.pen.id)) {
_this.pens.get(params.pen.id).animateStart = Date.now(); _this.pens.get(params.pen.id).animateStart = Date.now()
} } else {
else {
if (params.pen.type) { if (params.pen.type) {
_this.pens.set(params.pen.id, _this.getAnimateLine(params.pen)); _this.pens.set(params.pen.id, _this.getAnimateLine(params.pen))
} } else {
else { _this.pens.set(params.pen.id, params.pen)
_this.pens.set(params.pen.id, params.pen);
} }
} }
} }
if (params.tag) { if (params.tag) {
_this.readyPlay(params.tag, false); _this.readyPlay(params.tag, false)
} }
} }
_this.animate(); _this.animate()
}); })
return _this; return _this
} }
AnimateLayer.prototype.getAnimateLine = function (item) { AnimateLayer.prototype.getAnimateLine = function (item) {
var l = new Line(item); const l = new Line(item)
l.data = l.id; l.data = l.id
l.id = s8(); l.id = s8()
l.setTID(this.TID); l.setTID(this.TID)
l.isAnimate = true; l.isAnimate = true
l.toArrow = ''; l.toArrow = ''
if (l.fromArrow && l.fromArrow.indexOf('line') < 0) { 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) { 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.animateStart = item.animateStart
l.lineCap = 'round'; l.lineCap = 'round'
l.fillStyle = '#fff'; l.fillStyle = '#fff'
l.strokeStyle = l.animateColor || this.options.animateColor; l.strokeStyle = l.animateColor || this.options.animateColor
l.length = l.getLen(); l.length = l.getLen()
if (!l.fromArrowColor) { 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) { 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) { AnimateLayer.prototype.findLine = function (pen) {
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) { for (let _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
if (item.id === pen.data) { if (item.id === pen.data) {
return item; return item
}
} }
} }
};
AnimateLayer.prototype.readyPlay = function (tag, auto, pens) { AnimateLayer.prototype.readyPlay = function (tag, auto, pens) {
var _this = this; const _this = this
var readyPens = new Map(); const readyPens = new Map()
if (!pens) { if (!pens) {
pens = this.data.pens; pens = this.data.pens
} }
pens.forEach(function (pen) { pens.forEach(function (pen) {
pen.setTID(_this.TID); pen.setTID(_this.TID)
if (!pen.visible || readyPens.get(pen.id)) { if (!pen.visible || readyPens.get(pen.id)) {
return; return
} }
if ((auto && pen.animatePlay) || (tag && pen.tags.indexOf(tag) > -1)) { if ((auto && pen.animatePlay) || (tag && pen.tags.indexOf(tag) > -1)) {
if (!pen.animateStart || pen.animateStart < 1) { if (!pen.animateStart || pen.animateStart < 1) {
pen.animateStart = Date.now(); pen.animateStart = Date.now()
} }
} }
if (pen instanceof Node) { if (pen instanceof Node) {
if (pen.animateStart > 0) { if (pen.animateStart > 0) {
if (!pen.animateReady) { if (!pen.animateReady) {
pen.initAnimate(); pen.initAnimate()
} }
readyPens.set(pen.id, pen); readyPens.set(pen.id, pen)
} }
if (pen.children && pen.children.length) { if (pen.children && pen.children.length) {
_this.readyPlay(tag, auto, pen.children); _this.readyPlay(tag, auto, pen.children)
} }
} } else {
else {
if (pen.animateStart > 0) { if (pen.animateStart > 0) {
readyPens.set(pen.id, _this.getAnimateLine(pen)); readyPens.set(pen.id, _this.getAnimateLine(pen))
} } else if (_this.pens.has(pen.id)) {
else if (_this.pens.has(pen.id)) { _this.pens.get(pen.id).animateStart = 0
_this.pens.get(pen.id).animateStart = 0;
} }
} }
}); })
readyPens.forEach(function (pen) { readyPens.forEach(function (pen) {
if (pen.type) { 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 () { AnimateLayer.prototype.animate = function () {
var _this = this; const _this = this
if (this.timer) { if (this.timer) {
cancelAnimationFrame(this.timer); cancelAnimationFrame(this.timer)
} }
this.timer = requestAnimationFrame(function () { this.timer = requestAnimationFrame(function () {
var now = Date.now(); const now = Date.now()
if (now - _this.lastNow < _this.options.refresh) { if (now - _this.lastNow < _this.options.refresh) {
_this.animate(); _this.animate()
return; return
} }
_this.lastNow = now; _this.lastNow = now
var animated = false; let animated = false
_this.pens.forEach(function (pen) { _this.pens.forEach(function (pen) {
if (!pen.animateStart || pen.animateStart < 1) { if (!pen.animateStart || pen.animateStart < 1) {
if (pen.type) { if (pen.type) {
_this.pens.delete(pen.data); _this.pens.delete(pen.data)
var line = _this.findLine(pen); var line = _this.findLine(pen)
if (line) { if (line) {
line.animateStart = 0; line.animateStart = 0
line.animatePos = pen.animatePos; line.animatePos = pen.animatePos
} }
} else {
_this.pens.delete(pen.id)
} }
else { return
_this.pens.delete(pen.id);
}
return;
} }
if (pen.animateStart > now) { if (pen.animateStart > now) {
return; return
} }
if (pen.animateFn) { if (pen.animateFn) {
if (typeof pen.animateFn === 'function') { if (typeof pen.animateFn === 'function') {
pen.animateFn(); pen.animateFn()
} } else if (window && window[pen.animateFn]) {
else if (window && window[pen.animateFn]) { window[pen.animateFn]()
window[pen.animateFn](); } else {
}
else {
// pen.render(); // pen.render();
} }
} } else {
else { pen.animate(now)
pen.animate(now);
} }
if (pen.animateStart < 1) { if (pen.animateStart < 1) {
if (pen.type) { if (pen.type) {
_this.pens.delete(pen.data); _this.pens.delete(pen.data)
} } else {
else { _this.pens.delete(pen.id)
_this.pens.delete(pen.id);
} }
if (pen.type === PenType.Line) { if (pen.type === PenType.Line) {
var line = _this.findLine(pen); var line = _this.findLine(pen)
if (line) { if (line) {
line.animateStart = 0; line.animateStart = 0
line.animatePos = pen.animatePos; line.animatePos = pen.animatePos
} }
} }
if (pen.nextAnimate) { if (pen.nextAnimate) {
_this.readyPlay(pen.nextAnimate, false); _this.readyPlay(pen.nextAnimate, false)
} }
} }
animated = true; animated = true
}); })
if (animated) { if (animated) {
Store.set(_this.generateStoreKey('LT:render'), true); Store.set(_this.generateStoreKey('LT:render'), true)
_this.animate(); _this.animate()
}
})
} }
});
};
AnimateLayer.prototype.updateLines = function (lines) { AnimateLayer.prototype.updateLines = function (lines) {
this.pens.forEach(function (line, key) { this.pens.forEach(function (line, key) {
if (!(line instanceof Line)) { if (!(line instanceof Line)) {
return; return
} }
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) { for (let _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
var item = lines_1[_i]; const item = lines_1[_i]
if (line.data === item.id) { if (line.data === item.id) {
line.from = item.from; line.from = item.from
line.to = item.to; line.to = item.to
line.controlPoints = item.controlPoints; line.controlPoints = item.controlPoints
line.length = line.getLen(); line.length = line.getLen()
} }
} }
}); })
}; }
AnimateLayer.prototype.render = function (ctx) { AnimateLayer.prototype.render = function (ctx) {
var _this = this; const _this = this
this.pens.forEach(function (line, key) { this.pens.forEach(function (line, key) {
if (line.visible && line instanceof Line) { if (line.visible && line instanceof Line) {
if (!line.getTID()) { if (!line.getTID()) {
line.setTID(_this.TID); line.setTID(_this.TID)
} }
line.render(ctx); line.render(ctx)
}
})
} }
});
};
AnimateLayer.prototype.stop = function () { AnimateLayer.prototype.stop = function () {
this.pens.clear(); this.pens.clear()
if (this.timer) { if (this.timer) {
cancelAnimationFrame(this.timer); cancelAnimationFrame(this.timer)
this.timer = null; this.timer = null
}
} }
};
AnimateLayer.prototype.destroy = function () { AnimateLayer.prototype.destroy = function () {
this.stop(); this.stop()
this.subscribeUpdate.unsubscribe(); this.subscribeUpdate.unsubscribe()
this.subscribePlay.unsubscribe(); this.subscribePlay.unsubscribe()
}; this.subscribeUpdate = null
return AnimateLayer; this.subscribePlay = null
}(Layer)); this.pens = null
export { AnimateLayer }; }
//# sourceMappingURL=animateLayer.js.map return AnimateLayer
}(Layer))
export { AnimateLayer }
// # sourceMappingURL=animateLayer.js.map

View File

@@ -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) { var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || ({ __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]; }; function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
return extendStatics(d, b); return extendStatics(d, b)
}; }
return function (d, b) { return function (d, b) {
extendStatics(d, b); extendStatics(d, b)
function __() { this.constructor = d; } function __ () { this.constructor = d }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
}; }
})(); })()
import { Store } from 'le5le-store'; const Canvas = /** @class */ (function (_super) {
import { Layer } from './layer'; __extends(Canvas, _super)
var Canvas = /** @class */ (function (_super) { function Canvas (parentElem, options, TID) {
__extends(Canvas, _super); if (options === void 0) { options = {} }
function Canvas(parentElem, options, TID) { const _this = _super.call(this, TID) || this
if (options === void 0) { options = {}; } _this.parentElem = parentElem
var _this = _super.call(this, TID) || this; _this.options = options
_this.parentElem = parentElem; _this.canvas = document.createElement('canvas')
_this.options = options; _this.width = 0
_this.canvas = document.createElement('canvas'); _this.height = 0
_this.width = 0;
_this.height = 0;
_this.subcribe = Store.subscribe(_this.generateStoreKey('topology-data'), function (val) { _this.subcribe = Store.subscribe(_this.generateStoreKey('topology-data'), function (val) {
_this.data = val; _this.data = val
}); })
_this.canvas.style.position = 'absolute'; _this.canvas.style.position = 'absolute'
_this.canvas.style.left = '0'; _this.canvas.style.left = '0'
_this.canvas.style.top = '0'; _this.canvas.style.top = '0'
_this.canvas.style.outline = 'none'; _this.canvas.style.outline = 'none'
if (!Canvas.dpiRatio) { if (!Canvas.dpiRatio) {
if (!options.extDpiRatio && options.extDpiRatio !== 0) { if (!options.extDpiRatio && options.extDpiRatio !== 0) {
if (window && window.devicePixelRatio > 1) { if (window && window.devicePixelRatio > 1) {
options.extDpiRatio = 0.25; options.extDpiRatio = 0.25
} } else {
else { options.extDpiRatio = 0
options.extDpiRatio = 0;
} }
} }
Canvas.dpiRatio = (window ? window.devicePixelRatio : 0) + options.extDpiRatio; Canvas.dpiRatio = (window ? window.devicePixelRatio : 0) + options.extDpiRatio
if (Canvas.dpiRatio < 1) { if (Canvas.dpiRatio < 1) {
Canvas.dpiRatio = 1; Canvas.dpiRatio = 1
} }
} }
return _this; return _this
} }
Canvas.prototype.resize = function (size) { Canvas.prototype.resize = function (size) {
if (size) { if (size) {
this.width = size.width | 0; this.width = size.width | 0
this.height = size.height | 0; this.height = size.height | 0
} } else {
else {
if (this.options.width && this.options.width !== 'auto') { if (this.options.width && this.options.width !== 'auto') {
this.width = +this.options.width; this.width = +this.options.width
} } else {
else { this.width = this.parentElem.clientWidth
this.width = this.parentElem.clientWidth;
} }
if (this.options.height && this.options.height !== 'auto') { if (this.options.height && this.options.height !== 'auto') {
this.height = +this.options.height; this.height = +this.options.height
} } else {
else { this.height = this.parentElem.clientHeight
this.height = this.parentElem.clientHeight;
} }
} }
this.canvas.style.width = this.width + 'px'; this.canvas.style.width = this.width + 'px'
this.canvas.style.height = this.height + 'px'; this.canvas.style.height = this.height + 'px'
this.canvas.width = (this.width * Canvas.dpiRatio) | 0; this.canvas.width = (this.width * Canvas.dpiRatio) | 0
this.canvas.height = (this.height * Canvas.dpiRatio) | 0; this.canvas.height = (this.height * Canvas.dpiRatio) | 0
this.canvas.getContext('2d').scale(Canvas.dpiRatio, Canvas.dpiRatio); this.canvas.getContext('2d').scale(Canvas.dpiRatio, Canvas.dpiRatio)
Store.set(this.generateStoreKey('LT:size'), { width: this.canvas.width, height: this.canvas.height }); Store.set(this.generateStoreKey('LT:size'), { width: this.canvas.width, height: this.canvas.height })
}; }
Canvas.prototype.render = function () { Canvas.prototype.render = function () {
var ctx = this.canvas.getContext('2d'); const ctx = this.canvas.getContext('2d')
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
}; }
Canvas.prototype.getDpiRatio = function () { Canvas.prototype.getDpiRatio = function () {
return Canvas.dpiRatio; return Canvas.dpiRatio
}; }
Canvas.prototype.destroy = function () { Canvas.prototype.destroy = function () {
this.subcribe.unsubscribe(); this.subcribe.unsubscribe()
}; this.activeLayer = null
Canvas.dpiRatio = 0; this.hoverLayer = null
return Canvas; this.animateLayer = null
}(Layer)); this.subcribe = null
export { Canvas }; this.options = null
//# sourceMappingURL=canvas.js.map 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

View File

@@ -86,6 +86,7 @@ const Topology = /** @class */ (function () {
} }
timer = setTimeout(function () { timer = setTimeout(function () {
_this.resize() _this.resize()
timer = null
}, 100) }, 100)
} }
this.calibrateMouse = function (pt) { this.calibrateMouse = function (pt) {
@@ -819,17 +820,17 @@ const Topology = /** @class */ (function () {
Store.set(this.generateStoreKey('LT:fontColor'), this.options.fontColor || '#222222') Store.set(this.generateStoreKey('LT:fontColor'), this.options.fontColor || '#222222')
this.setupDom(parent) this.setupDom(parent)
this.setupSubscribe() this.setupSubscribe()
this.setupMouseEvent() // this.setupMouseEvent()
// Wait for parent dom load // Wait for parent dom load
setTimeout(function () { // setTimeout(function () {
_this.canvasPos = _this.divLayer.canvas.getBoundingClientRect() // _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
}, 500) // }, 500)
setTimeout(function () { // setTimeout(function () {
_this.canvasPos = _this.divLayer.canvas.getBoundingClientRect() // _this.canvasPos = _this.divLayer.canvas.getBoundingClientRect()
}, 1000) // }, 1000)
this.cache() // this.cache()
window.topology = this window.topology = this
this.dispatch('loaded') // this.dispatch('loaded')
} }
Object.defineProperty(Topology.prototype, 'ramCaches', { Object.defineProperty(Topology.prototype, 'ramCaches', {
// 内存中的 caches 数量 // 内存中的 caches 数量
@@ -1917,7 +1918,7 @@ const Topology = /** @class */ (function () {
return offset return offset
} }
Topology.prototype.cache = function () { 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) { 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) this.caches.list.splice(this.caches.index + 1, this.caches.list.length - this.caches.index - 1)
// 删除 indexDB 的值 // 删除 indexDB 的值
@@ -2964,7 +2965,7 @@ const Topology = /** @class */ (function () {
this.activeLayer.destroy() this.activeLayer.destroy()
this.hoverLayer.destroy() this.hoverLayer.destroy()
this.offscreen.destroy() this.offscreen.destroy()
document.body.removeChild(this.tipMarkdown) // document.body.removeChild(this.tipMarkdown)
window.removeEventListener('resize', this.winResize) window.removeEventListener('resize', this.winResize)
this.parentElem.removeEventListener('scroll', this.onScroll) this.parentElem.removeEventListener('scroll', this.onScroll)
window.removeEventListener('scroll', this.onScroll) window.removeEventListener('scroll', this.onScroll)
@@ -2987,9 +2988,6 @@ const Topology = /** @class */ (function () {
this.data = null this.data = null
console.log(this.options) console.log(this.options)
window.topology = null window.topology = null
createCacheTable()
this.divLayer.clear()
this.activeLayer = null
this.activeLayer = null this.activeLayer = null
this.hoverLayer = null this.hoverLayer = null
this.animateLayer = null this.animateLayer = null
@@ -3001,11 +2999,18 @@ const Topology = /** @class */ (function () {
this.subcribeAnimateMoved = null this.subcribeAnimateMoved = null
this.subcribeEmit = null this.subcribeEmit = null
this.offscreen = null this.offscreen = null
this.parentElem.onresize = null
this.parentElem = null this.parentElem = null
this.input = null
this.data = null this.data = null
this.caches = null this.caches = null
this.clipboard = 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 return Topology
}()) }())

View File

@@ -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) { var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || ({ __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]; }; function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
return extendStatics(d, b); return extendStatics(d, b)
}; }
return function (d, b) { return function (d, b) {
extendStatics(d, b); extendStatics(d, b)
function __() { this.constructor = d; } function __ () { this.constructor = d }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
}; }
})(); })()
import { Store } from 'le5le-store'; let videos = {}
import { Lock } from './models/status'; const DivLayer = /** @class */ (function (_super) {
import { images, PenType } from './models/pen'; __extends(DivLayer, _super)
import { Layer } from './layer'; function DivLayer (parentElem, options, TID) {
import { find } from './utils'; if (options === void 0) { options = {} }
var videos = {}; const _this = _super.call(this, TID) || this
var DivLayer = /** @class */ (function (_super) { _this.parentElem = parentElem
__extends(DivLayer, _super); _this.options = options
function DivLayer(parentElem, options, TID) { _this.canvas = document.createElement('div')
if (options === void 0) { options = {}; } _this.player = document.createElement('div')
var _this = _super.call(this, TID) || this; _this.audios = {}
_this.parentElem = parentElem; _this.iframes = {}
_this.options = options; _this.elements = {}
_this.canvas = document.createElement('div'); _this.gifs = {}
_this.player = document.createElement('div');
_this.audios = {};
_this.iframes = {};
_this.elements = {};
_this.gifs = {};
_this.addDiv = function (node) { _this.addDiv = function (node) {
if (node.audio) { if (node.audio) {
if (_this.audios[node.id] && _this.audios[node.id].media.src !== 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 () { 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 (node.video) {
if (videos[node.id] && videos[node.id].media.src !== 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 () { 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 (node.iframe) {
if (!_this.iframes[node.id]) { if (!_this.iframes[node.id]) {
_this.addIframe(node); _this.addIframe(node)
setTimeout(function () { setTimeout(function () {
_this.addDiv(node); _this.addDiv(node)
}); })
} } else {
else {
if (_this.iframes[node.id].src !== node.iframe) { 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 (node.elementId) {
if (!_this.elements[node.id]) { 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]) { 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.gif) {
if (node.image.indexOf('.gif') < 0) { if (node.image.indexOf('.gif') < 0) {
node.gif = false; node.gif = false
_this.canvas.removeChild(_this.gifs[node.id]); _this.canvas.removeChild(_this.gifs[node.id])
_this.gifs[node.id] = undefined; _this.gifs[node.id] = undefined
} } else if (node.img) {
else if (node.img) {
if (_this.gifs[node.id] && _this.gifs[node.id].src !== node.image) { 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) { if (node.children) {
for (var _i = 0, _a = node.children; _i < _a.length; _i++) { for (let _i = 0, _a = node.children; _i < _a.length; _i++) {
var child = _a[_i]; const child = _a[_i]
if (child.type === PenType.Line) { if (child.type === PenType.Line) {
continue; continue
}
_this.addDiv(child)
} }
_this.addDiv(child);
} }
} }
};
_this.createPlayer = function () { _this.createPlayer = function () {
_this.player.style.position = 'fixed'; _this.player.style.position = 'fixed'
_this.player.style.outline = 'none'; _this.player.style.outline = 'none'
_this.player.style.top = '-99999px'; _this.player.style.top = '-99999px'
_this.player.style.height = '40px'; _this.player.style.height = '40px'
_this.player.style.padding = '10px 15px'; _this.player.style.padding = '10px 15px'
_this.player.style.background = 'rgba(200,200,200,.1)'; _this.player.style.background = 'rgba(200,200,200,.1)'
_this.player.style.display = 'flex'; _this.player.style.display = 'flex'
_this.player.style.alignItems = 'center'; _this.player.style.alignItems = 'center'
_this.player.style.userSelect = 'initial'; _this.player.style.userSelect = 'initial'
_this.player.style.pointerEvents = 'initial'; _this.player.style.pointerEvents = 'initial'
_this.player.style.zIndex = '1'; _this.player.style.zIndex = '1'
_this.playBtn = document.createElement('i'); _this.playBtn = document.createElement('i')
_this.currentTime = document.createElement('span'); _this.currentTime = document.createElement('span')
_this.progress = document.createElement('div'); _this.progress = document.createElement('div')
_this.progressCurrent = document.createElement('div'); _this.progressCurrent = document.createElement('div')
_this.loop = document.createElement('i'); _this.loop = document.createElement('i')
var fullScreen = document.createElement('i'); _this.myfullScreen = document.createElement('i')
_this.playBtn.className = _this.options.playIcon; _this.playBtn.className = _this.options.playIcon
_this.playBtn.style.fontSize = '18px'; _this.playBtn.style.fontSize = '18px'
_this.playBtn.style.lineHeight = '20px'; _this.playBtn.style.lineHeight = '20px'
_this.playBtn.style.cursor = 'pointer'; _this.playBtn.style.cursor = 'pointer'
_this.currentTime.style.padding = '0 10px'; _this.currentTime.style.padding = '0 10px'
_this.currentTime.innerText = '0 / 0'; _this.currentTime.innerText = '0 / 0'
_this.progress.style.position = 'relative'; _this.progress.style.position = 'relative'
_this.progress.style.flexGrow = '1'; _this.progress.style.flexGrow = '1'
_this.progress.style.top = '0'; _this.progress.style.top = '0'
_this.progress.style.height = '4px'; _this.progress.style.height = '4px'
_this.progress.style.background = '#ccc'; _this.progress.style.background = '#ccc'
_this.progress.style.borderRadius = '2px'; _this.progress.style.borderRadius = '2px'
_this.progress.style.overflow = 'hidden'; _this.progress.style.overflow = 'hidden'
_this.progress.style.cursor = 'pointer'; _this.progress.style.cursor = 'pointer'
_this.progressCurrent.style.position = 'absolute'; _this.progressCurrent.style.position = 'absolute'
_this.progressCurrent.style.left = '0'; _this.progressCurrent.style.left = '0'
_this.progressCurrent.style.top = '0'; _this.progressCurrent.style.top = '0'
_this.progressCurrent.style.bottom = '0'; _this.progressCurrent.style.bottom = '0'
_this.progressCurrent.style.width = '0'; _this.progressCurrent.style.width = '0'
_this.progressCurrent.style.background = '#52c41a'; _this.progressCurrent.style.background = '#52c41a'
_this.loop.style.margin = '0 10px'; _this.loop.style.margin = '0 10px'
_this.loop.style.padding = '2px 5px'; _this.loop.style.padding = '2px 5px'
_this.loop.style.borderRadius = '2px'; _this.loop.style.borderRadius = '2px'
_this.loop.className = _this.options.loopIcon; _this.loop.className = _this.options.loopIcon
_this.loop.style.fontSize = '18px'; _this.loop.style.fontSize = '18px'
_this.loop.style.lineHeight = '20px'; _this.loop.style.lineHeight = '20px'
_this.loop.style.cursor = 'pointer'; _this.loop.style.cursor = 'pointer'
fullScreen.className = _this.options.fullScreenIcon; _this.myfullScreen.className = _this.options.fullScreenIcon
fullScreen.style.fontSize = '17px'; _this.myfullScreen.style.fontSize = '17px'
fullScreen.style.lineHeight = '20px'; _this.myfullScreen.style.lineHeight = '20px'
fullScreen.style.cursor = 'pointer'; _this.myfullScreen.style.cursor = 'pointer'
_this.player.appendChild(_this.playBtn); _this.player.appendChild(_this.playBtn)
_this.player.appendChild(_this.currentTime); _this.player.appendChild(_this.currentTime)
_this.player.appendChild(_this.progress); _this.player.appendChild(_this.progress)
_this.progress.appendChild(_this.progressCurrent); _this.progress.appendChild(_this.progressCurrent)
_this.player.appendChild(_this.loop); _this.player.appendChild(_this.loop)
_this.player.appendChild(fullScreen); _this.player.appendChild(_this.myfullScreen)
_this.playBtn.onclick = function () { _this.playBtn.onclick = function () {
if (_this.media.paused) { if (_this.media.paused) {
_this.media.play(); _this.media.play()
_this.playBtn.className = _this.options.pauseIcon; _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.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.loop.onclick = function () {
_this.media.loop = !_this.media.loop; _this.media.loop = !_this.media.loop
_this.curNode.playLoop = _this.media.loop; _this.curNode.playLoop = _this.media.loop
if (_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 () { _this.getMediaCurrent = function () {
if (!_this.media) { if (!_this.media) {
return; return
} }
_this.currentTime.innerText = _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.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) { _this.addMedia = function (node, type) {
var player = document.createElement('div'); let player = document.createElement('div')
var current = document.createElement('div'); let current = document.createElement('div')
var media = document.createElement(type); let media = document.createElement(type)
player.id = node.id; player.id = node.id
current.style.position = 'absolute'; current.style.position = 'absolute'
current.style.outline = 'none'; current.style.outline = 'none'
current.style.left = '0'; current.style.left = '0'
current.style.bottom = '0'; current.style.bottom = '0'
current.style.height = '2px'; current.style.height = '2px'
current.style.background = '#52c41a'; current.style.background = '#52c41a'
media.style.position = 'absolute'; media.style.position = 'absolute'
media.style.outline = 'none'; media.style.outline = 'none'
media.style.left = '0'; media.style.left = '0'
media.style.right = '0'; media.style.right = '0'
media.style.top = '0'; media.style.top = '0'
media.style.bottom = '0'; media.style.bottom = '0'
if (type === 'video') { if (type === 'video') {
media.style.width = node.rect.width + 'px'; media.style.width = node.rect.width + 'px'
media.style.height = node.rect.height + 'px'; media.style.height = node.rect.height + 'px'
} }
player.style.background = 'transparent'; player.style.background = 'transparent'
if (node.playType === 1) { if (node.playType === 1) {
media.autoplay = true; media.autoplay = true
} }
media.loop = node.playLoop; media.loop = node.playLoop
media.ontimeupdate = function () { media.ontimeupdate = function () {
current.style.width = (media.currentTime / media.duration) * node.rect.width + 'px'; current.style.width = (media.currentTime / media.duration) * node.rect.width + 'px'
_this.getMediaCurrent(); _this.getMediaCurrent()
if (_this.media === media) { if (_this.media === media) {
if (node.playLoop) { if (node.playLoop) {
media.loop = true; media.loop = true
_this.loop.style.background = '#ddd'; _this.loop.style.background = '#ddd'
} } else {
else { media.loop = false
media.loop = false; _this.loop.style.background = 'none'
_this.loop.style.background = 'none'; }
} }
} }
};
media.onended = function () { media.onended = function () {
Store.set(_this.generateStoreKey('mediaEnd'), node); Store.set(_this.generateStoreKey('mediaEnd'), node)
if (_this.media === media) { 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 () { media.onloadedmetadata = function () {
_this.getMediaCurrent(); _this.getMediaCurrent()
}; }
media.src = node[type]; media.src = node[type]
player.appendChild(media); player.appendChild(media)
player.appendChild(current); player.appendChild(current)
if (type === 'video') { if (type === 'video') {
videos[node.id] = { videos[node.id] = {
player: player, player: player,
current: current, current: current,
media: media, media: media
};
} }
else { } else {
_this.audios[node.id] = { _this.audios[node.id] = {
player: player, player: player,
current: current, 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) { _this.setElemPosition = function (node, elem) {
if (!elem) { if (!elem) {
return; return
} }
elem.style.position = 'absolute'; elem.style.position = 'absolute'
elem.style.outline = 'none'; elem.style.outline = 'none'
elem.style.left = node.rect.x + _this.data.x + 'px'; elem.style.left = node.rect.x + _this.data.x + 'px'
elem.style.top = node.rect.y + _this.data.y + 'px'; elem.style.top = node.rect.y + _this.data.y + 'px'
elem.style.width = node.rect.width + 'px'; elem.style.width = node.rect.width + 'px'
elem.style.height = node.rect.height + 'px'; elem.style.height = node.rect.height + 'px'
elem.style.display = node.visible ? 'inline' : 'none'; // 是否隐藏元素 elem.style.display = node.visible ? 'inline' : 'none' // 是否隐藏元素
if (node.rotate || node.offsetRotate) { 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) { if (node.video && videos[node.id] && videos[node.id].media) {
videos[node.id].media.style.width = '100%'; videos[node.id].media.style.width = '100%'
videos[node.id].media.style.height = '100%'; videos[node.id].media.style.height = '100%'
} }
if (_this.data.locked > Lock.None || node.locked > Lock.None) { if (_this.data.locked > Lock.None || node.locked > Lock.None) {
elem.style.userSelect = 'initial'; elem.style.userSelect = 'initial'
elem.style.pointerEvents = '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) { _this.removeDiv = function (item) {
if (_this.curNode && item.id === _this.curNode.id) { if (_this.curNode && item.id === _this.curNode.id) {
_this.curNode = undefined; _this.curNode = undefined
_this.media = undefined; _this.media = undefined
_this.player.style.top = '-99999px'; _this.player.style.top = '-99999px'
} }
if (item.audio) { if (item.audio) {
_this.canvas.removeChild(_this.audios[item.id].player); _this.canvas.removeChild(_this.audios[item.id].player)
_this.audios[item.id] = undefined; _this.audios[item.id] = undefined
} }
if (item.video) { if (item.video) {
_this.canvas.removeChild(videos[item.id].player); _this.canvas.removeChild(videos[item.id].player)
videos[item.id] = undefined; videos[item.id] = undefined
} }
if (item.iframe) { if (item.iframe) {
_this.canvas.removeChild(_this.iframes[item.id]); _this.canvas.removeChild(_this.iframes[item.id])
_this.iframes[item.id] = undefined; _this.iframes[item.id] = undefined
} }
if (item.elementId) { if (item.elementId) {
_this.canvas.removeChild(_this.elements[item.id]); _this.canvas.removeChild(_this.elements[item.id])
_this.elements[item.id] = undefined; _this.elements[item.id] = undefined
item.elementId = ''; item.elementId = ''
} }
if (item.gif) { if (item.gif) {
_this.canvas.removeChild(_this.gifs[item.id]); _this.canvas.removeChild(_this.gifs[item.id])
_this.gifs[item.id] = undefined; _this.gifs[item.id] = undefined
} }
if (item.children) { if (item.children) {
for (var _i = 0, _a = item.children; _i < _a.length; _i++) { for (let _i = 0, _a = item.children; _i < _a.length; _i++) {
var child = _a[_i]; const child = _a[_i]
if (child.type === PenType.Line) { if (child.type === PenType.Line) {
continue; continue
}
_this.removeDiv(child)
} }
_this.removeDiv(child);
} }
} }
};
if (!_this.options.playIcon) { if (!_this.options.playIcon) {
_this.options.playIcon = 't-icon t-play'; _this.options.playIcon = 't-icon t-play'
} }
if (!_this.options.pauseIcon) { if (!_this.options.pauseIcon) {
_this.options.pauseIcon = 't-icon t-pause'; _this.options.pauseIcon = 't-icon t-pause'
} }
if (!_this.options.fullScreenIcon) { if (!_this.options.fullScreenIcon) {
_this.options.fullScreenIcon = 't-icon t-full-screen'; _this.options.fullScreenIcon = 't-icon t-full-screen'
} }
if (!_this.options.loopIcon) { 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.position = 'absolute'
_this.canvas.style.left = '0'; _this.canvas.style.left = '0'
_this.canvas.style.top = '0'; _this.canvas.style.top = '0'
_this.canvas.style.outline = 'none'; _this.canvas.style.outline = 'none'
_this.canvas.style.background = 'transparent'; _this.canvas.style.background = 'transparent'
parentElem.appendChild(_this.canvas); parentElem.appendChild(_this.canvas)
parentElem.appendChild(_this.player); parentElem.appendChild(_this.player)
_this.createPlayer(); _this.createPlayer()
_this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv); _this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv)
_this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:removeDiv'), _this.removeDiv); _this.subcribeDiv = Store.subscribe(_this.generateStoreKey('LT:removeDiv'), _this.removeDiv)
_this.subcribePlay = Store.subscribe(_this.generateStoreKey('LT:play'), function (e) { _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) { _this.subcribeNode = Store.subscribe(_this.generateStoreKey('LT:activeNode'), function (node) {
if (!node || (!node.video && !node.audio)) { if (!node || (!node.video && !node.audio)) {
_this.player.style.top = '-99999px'; _this.player.style.top = '-99999px'
return; return
} }
if (node.audio && _this.audios[node.id]) { 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.curNode = node
_this.media = videos[node.id].media; const rect = _this.parentElem.getBoundingClientRect()
} _this.player.style.top = rect.top + _this.parentElem.clientHeight - 40 + 'px'
else { _this.player.style.left = rect.left + 'px'
return; _this.player.style.width = _this.parentElem.clientWidth + 'px'
} _this.getMediaCurrent()
_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();
if (_this.media.paused) { 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; _this.fullscreenchange = function (e) {
}
});
document.addEventListener('fullscreenchange', function (e) {
if (!_this.media) { if (!_this.media) {
return; return
} }
if (document.fullscreen) { if (document.fullscreen) {
_this.media.controls = true; _this.media.controls = true
_this.media.style.userSelect = 'initial'; _this.media.style.userSelect = 'initial'
_this.media.style.pointerEvents = '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;
} }
}); document.addEventListener('fullscreenchange', _this.fullscreenchange)
return _this; return _this
} }
DivLayer.prototype.play = function (idOrTag, pause) { DivLayer.prototype.play = function (idOrTag, pause) {
var _this = this; const _this = this
if (!idOrTag) { if (!idOrTag) {
return; return
} }
var pens = find(idOrTag, this.data.pens); const pens = find(idOrTag, this.data.pens)
pens.forEach(function (item) { pens.forEach(function (item) {
_this.playOne(item, pause); _this.playOne(item, pause)
}); })
}; }
DivLayer.prototype.playOne = function (item, pause) { DivLayer.prototype.playOne = function (item, pause) {
if (item.audio && this.audios[item.id] && this.audios[item.id].media) { if (item.audio && this.audios[item.id] && this.audios[item.id].media) {
if (pause) { 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) { } else if (item.video && videos[item.id].media) {
this.audios[item.id].media.play();
}
}
else if (item.video && videos[item.id].media) {
if (pause) { if (pause) {
videos[item.id].media.pause(); videos[item.id].media.pause()
} } else if (videos[item.id].media.paused) {
else if (videos[item.id].media.paused) { videos[item.id].media.play()
videos[item.id].media.play(); }
} }
} }
};
DivLayer.prototype.addIframe = function (node) { DivLayer.prototype.addIframe = function (node) {
var iframe = document.createElement('iframe'); const iframe = document.createElement('iframe')
iframe.scrolling = 'no'; iframe.scrolling = 'no'
iframe.frameBorder = '0'; iframe.frameBorder = '0'
iframe.src = node.iframe; iframe.src = node.iframe
this.iframes[node.id] = iframe; this.iframes[node.id] = iframe
this.canvas.appendChild(iframe); this.canvas.appendChild(iframe)
return iframe; return iframe
}; }
DivLayer.prototype.addGif = function (node) { DivLayer.prototype.addGif = function (node) {
this.gifs[node.id] = node.img; this.gifs[node.id] = node.img
this.canvas.appendChild(node.img); this.canvas.appendChild(node.img)
return node.img; }
};
DivLayer.prototype.clear = function (shallow) { DivLayer.prototype.clear = function (shallow) {
this.canvas.innerHTML = ''; this.canvas.innerHTML = ''
this.audios = {}; this.audios = {}
videos = {}; videos = {}
this.iframes = {}; this.iframes = {}
this.elements = {}; this.elements = {}
this.gifs = {}; this.gifs = {}
if (!shallow) { if (!shallow) {
// tslint:disable-next-line:forin // tslint:disable-next-line:forin
for (var key in images) { for (const key in images) {
delete images[key]; delete images[key]
} }
} }
this.player.style.top = '-99999px'; this.player.style.top = '-99999px'
}; }
DivLayer.prototype.formatSeconds = function (seconds) { DivLayer.prototype.formatSeconds = function (seconds) {
var h = Math.floor(seconds / 3600); const h = Math.floor(seconds / 3600)
var m = Math.floor(seconds / 60) % 60; const m = Math.floor(seconds / 60) % 60
var s = Math.floor(seconds % 60); const s = Math.floor(seconds % 60)
var txt = s + ''; let txt = s + ''
if (m) { if (m) {
txt = m + ':' + s; txt = m + ':' + s
} } else {
else { txt = '0:' + s
txt = '0:' + s;
} }
if (h) { if (h) {
txt = h + ':' + m + ':' + s; txt = h + ':' + m + ':' + s
}
return txt
} }
return txt;
};
DivLayer.prototype.resize = function (size) { DivLayer.prototype.resize = function (size) {
if (size) { if (size) {
this.canvas.style.width = size.width + 'px'; this.canvas.style.width = size.width + 'px'
this.canvas.style.height = size.height + 'px'; this.canvas.style.height = size.height + 'px'
} } else {
else {
if (this.options.width && this.options.width !== 'auto') { if (this.options.width && this.options.width !== 'auto') {
this.canvas.style.width = this.options.width + 'px'; this.canvas.style.width = this.options.width + 'px'
} } else {
else { this.canvas.style.width = this.parentElem.clientWidth + 'px'
this.canvas.style.width = this.parentElem.clientWidth + 'px';
} }
if (this.options.height && this.options.height !== 'auto') { if (this.options.height && this.options.height !== 'auto') {
this.canvas.style.height = this.options.height + 'px'; this.canvas.style.height = this.options.height + 'px'
} } else {
else { this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px'
this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px'; }
} }
} }
};
DivLayer.prototype.render = function () { DivLayer.prototype.render = function () {
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) { for (let _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
if (!item.getTID()) { if (!item.getTID()) {
item.setTID(this.TID); item.setTID(this.TID)
}
this.addDiv(item)
} }
this.addDiv(item);
} }
};
DivLayer.prototype.destroy = function () { DivLayer.prototype.destroy = function () {
_super.prototype.destroy.call(this); _super.prototype.destroy.call(this)
this.clear(); this.clear()
this.subcribeDiv.unsubscribe(); this.subcribeDiv.unsubscribe()
this.subcribeNode.unsubscribe(); this.subcribeNode.unsubscribe()
this.subcribePlay.unsubscribe(); this.subcribePlay.unsubscribe()
}; this.parentElem.removeChild(this.canvas)
return DivLayer; this.parentElem.removeChild(this.player)
}(Layer)); document.removeEventListener('fullscreenchange', this.fullscreenchange)
export { DivLayer }; Object.keys(this.audios).forEach(key => {
//# sourceMappingURL=divLayer.js.map 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

View File

@@ -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) { var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || ({ __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]; }; function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
return extendStatics(d, b); return extendStatics(d, b)
}; }
return function (d, b) { return function (d, b) {
extendStatics(d, b); extendStatics(d, b)
function __() { this.constructor = d; } function __ () { this.constructor = d }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
}; }
})(); })()
import { PenType } from './models/pen'; const HoverLayer = /** @class */ (function (_super) {
import { Store } from 'le5le-store'; __extends(HoverLayer, _super)
import { Lock } from './models/status'; function HoverLayer (options, TID) {
import { Layer } from './layer'; if (options === void 0) { options = {} }
import { rgba } from './utils/math'; const _this = _super.call(this, TID) || this
var HoverLayer = /** @class */ (function (_super) { _this.options = options
__extends(HoverLayer, _super); _this.hoverAnchorIndex = -1
function HoverLayer(options, TID) { _this.dockLineX = 0
if (options === void 0) { options = {}; } _this.dockLineY = 0
var _this = _super.call(this, TID) || this; Store.set(_this.generateStoreKey('LT:HoverLayer'), _this)
_this.options = options; return _this
_this.hoverAnchorIndex = -1;
_this.dockLineX = 0;
_this.dockLineY = 0;
Store.set(_this.generateStoreKey('LT:HoverLayer'), _this);
return _this;
} }
HoverLayer.prototype.lineTo = function (to, toArrow) { HoverLayer.prototype.lineTo = function (to, toArrow) {
if (toArrow === void 0) { toArrow = 'triangleSolid'; } if (toArrow === void 0) { toArrow = 'triangleSolid' }
if (!this.line || this.line.locked) { 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) { 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) { HoverLayer.prototype.lineFrom = function (from) {
if (this.line.locked) { 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) { 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) { HoverLayer.prototype.render = function (ctx) {
var _this = this; const _this = this
if (this.data.locked === Lock.NoEvent || this.options.hoverColor === 'transparent') { if (this.data.locked === Lock.NoEvent || this.options.hoverColor === 'transparent') {
return; return
} }
ctx.fillStyle = this.options.hoverColor; ctx.fillStyle = this.options.hoverColor
ctx.save(); ctx.save()
// anchors // anchors
if (this.options.alwaysAnchor) { if (this.options.alwaysAnchor) {
this.data.pens.forEach(function (pen) { this.data.pens.forEach(function (pen) {
if (pen.type === PenType.Line) { if (pen.type === PenType.Line) {
return; return
} }
if (pen.hideAnchor) { if (pen.hideAnchor) {
return; return
} }
for (var _i = 0, _a = pen.rotatedAnchors; _i < _a.length; _i++) { for (let _i = 0, _a = pen.rotatedAnchors; _i < _a.length; _i++) {
var anchor = _a[_i]; const anchor = _a[_i]
if (anchor.hidden) { if (anchor.hidden) {
continue; continue
} }
ctx.beginPath(); ctx.beginPath()
ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2); ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2)
ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor; ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor
ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle; ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle
ctx.fill(); ctx.fill()
ctx.stroke(); ctx.stroke()
} }
if (_this.options.autoAnchor) { if (_this.options.autoAnchor) {
ctx.beginPath(); ctx.beginPath()
ctx.arc(pen.rect.center.x, pen.rect.center.y, pen.rect.center.radius || _this.options.anchorRadius, 0, Math.PI * 2); 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.strokeStyle = _this.options.hoverColor
ctx.fillStyle = _this.options.anchorFillStyle; ctx.fillStyle = _this.options.anchorFillStyle
ctx.fill(); ctx.fill()
ctx.stroke(); ctx.stroke()
} }
}); })
} }
ctx.restore(); ctx.restore()
if (this.node && !this.data.locked) { if (this.node && !this.data.locked) {
if (!this.node.getTID()) { 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) { if (this.root) {
ctx.save(); ctx.save()
ctx.strokeStyle = this.options.dragColor; ctx.strokeStyle = this.options.dragColor
ctx.globalAlpha = 0.2; ctx.globalAlpha = 0.2
if (this.root.rotate) { if (this.root.rotate) {
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.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.beginPath(); ctx.beginPath()
ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height); ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height)
ctx.restore(); ctx.restore()
} }
if (!this.options.hideAnchor) { 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 || if (this.node.locked ||
this.node.hideAnchor || this.node.hideAnchor ||
(this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) { (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
continue; continue
} }
ctx.beginPath(); 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.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.strokeStyle = this.node.rotatedAnchors[i].strokeStyle || this.options.hoverColor
ctx.fillStyle = this.node.rotatedAnchors[i].fillStyle || this.options.anchorFillStyle; ctx.fillStyle = this.node.rotatedAnchors[i].fillStyle || this.options.anchorFillStyle
ctx.fill(); ctx.fill()
ctx.stroke(); ctx.stroke()
} }
} }
if (this.options.autoAnchor) { if (this.options.autoAnchor) {
ctx.beginPath(); 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.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.strokeStyle = this.options.hoverColor
ctx.fillStyle = this.options.anchorFillStyle; ctx.fillStyle = this.options.anchorFillStyle
ctx.fill(); ctx.fill()
ctx.stroke(); ctx.stroke()
} }
} }
if (this.line && !this.data.locked) { if (this.line && !this.data.locked) {
this.root = this.getRoot(this.line); this.root = this.getRoot(this.line)
if (this.root) { if (this.root) {
ctx.save(); ctx.save()
ctx.strokeStyle = this.options.dragColor; ctx.strokeStyle = this.options.dragColor
ctx.globalAlpha = 0.2; ctx.globalAlpha = 0.2
if (this.root.rotate) { if (this.root.rotate) {
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.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.beginPath(); ctx.beginPath()
ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height); ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height)
ctx.restore(); ctx.restore()
} }
} }
if (this.dockAnchor) { if (this.dockAnchor) {
ctx.save(); ctx.save()
ctx.beginPath(); ctx.beginPath()
ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2); ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2)
ctx.strokeStyle = this.options.dockStrokeStyle; ctx.strokeStyle = this.options.dockStrokeStyle
ctx.fillStyle = this.options.dockFillStyle; ctx.fillStyle = this.options.dockFillStyle
ctx.fill(); ctx.fill()
ctx.stroke(); ctx.stroke()
ctx.restore(); ctx.restore()
} }
if (this.hoverLineCP) { if (this.hoverLineCP) {
ctx.beginPath(); ctx.beginPath()
ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2); ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2)
ctx.fill(); ctx.fill()
} }
ctx.strokeStyle = rgba(0.5, this.options.hoverColor); ctx.strokeStyle = rgba(0.5, this.options.hoverColor)
ctx.lineWidth = 1; ctx.lineWidth = 1
if (this.dockLineX > 0) { if (this.dockLineX > 0) {
var size = Store.get(this.generateStoreKey('LT:size')); var size = Store.get(this.generateStoreKey('LT:size'))
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(this.dockLineX, -this.data.y); ctx.moveTo(this.dockLineX, -this.data.y)
ctx.lineTo(this.dockLineX, size.height); ctx.lineTo(this.dockLineX, size.height)
ctx.stroke(); ctx.stroke()
} }
if (this.dockLineY > 0) { if (this.dockLineY > 0) {
var size = Store.get(this.generateStoreKey('LT:size')); var size = Store.get(this.generateStoreKey('LT:size'))
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(-this.data.x, this.dockLineY); ctx.moveTo(-this.data.x, this.dockLineY)
ctx.lineTo(size.width, this.dockLineY); ctx.lineTo(size.width, this.dockLineY)
ctx.stroke(); ctx.stroke()
} }
// Select nodes by drag. // Select nodes by drag.
if (this.dragRect) { if (this.dragRect) {
ctx.fillStyle = rgba(0.2, this.options.dragColor); ctx.fillStyle = rgba(0.2, this.options.dragColor)
ctx.strokeStyle = this.options.dragColor; ctx.strokeStyle = this.options.dragColor
ctx.beginPath(); ctx.beginPath()
ctx.strokeRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height); 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.fillRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height)
}
} }
};
HoverLayer.prototype.getRoot = function (pen) { HoverLayer.prototype.getRoot = function (pen) {
if (!pen.parentId) { if (!pen.parentId) {
return null; return null
} }
for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) { for (let _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
if (item.id === pen.parentId) { if (item.id === pen.parentId) {
var n = this.getRoot(item); const n = this.getRoot(item)
return n ? n : item; return n || item
} }
} }
return null; return null
}; }
HoverLayer.prototype.clear = function () { HoverLayer.prototype.clear = function () {
this.node = undefined; this.node = undefined
this.line = undefined; this.line = undefined
}; }
return HoverLayer; return HoverLayer
}(Layer)); }(Layer))
export { HoverLayer }; export { HoverLayer }
//# sourceMappingURL=hoverLayer.js.map // # sourceMappingURL=hoverLayer.js.map

View File

@@ -1,19 +1,20 @@
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
var Layer = /** @class */ (function () { const Layer = /** @class */ (function () {
function Layer(TID) { function Layer (TID) {
var _this = this; const _this = this
this.TID = TID; this.TID = TID
this.subcribe = Store.subscribe(this.generateStoreKey('topology-data'), function (val) { this.subcribe = Store.subscribe(this.generateStoreKey('topology-data'), function (val) {
_this.data = val; _this.data = val
}); })
} }
Layer.prototype.generateStoreKey = function (key) { Layer.prototype.generateStoreKey = function (key) {
return this.TID + "-" + key; return this.TID + '-' + key
}; }
Layer.prototype.destroy = function () { Layer.prototype.destroy = function () {
this.subcribe.unsubscribe(); this.subcribe.unsubscribe()
}; this.subcribe = null
return Layer; }
}()); return Layer
export { Layer }; }())
//# sourceMappingURL=layer.js.map export { Layer }
// # sourceMappingURL=layer.js.map

View File

@@ -1,24 +1,23 @@
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
export function circleSolid(ctx, from, to, size, fillStyle) { export function circleSolid (ctx, from, to, size, fillStyle) {
size += ctx.lineWidth * 3; size += ctx.lineWidth * 3
var r = size / 2; const r = size / 2
if (ctx.lineWidth < 2) { if (ctx.lineWidth < 2) {
ctx.lineWidth = 2; ctx.lineWidth = 2
} }
ctx.translate(to.x, to.y); ctx.translate(to.x, to.y)
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x)); ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
ctx.translate(-to.x, -to.y - ctx.lineWidth / 10); 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.arc(to.x - r - ctx.lineWidth / 2, to.y, r, 0, 2 * Math.PI)
ctx.stroke(); ctx.stroke()
if (fillStyle) { if (fillStyle) {
ctx.fillStyle = fillStyle; ctx.fillStyle = fillStyle
} else {
ctx.fillStyle = ctx.strokeStyle
} }
else { ctx.fill()
ctx.fillStyle = ctx.strokeStyle;
}
ctx.fill();
} }
export function circle(ctx, from, to, size) { 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 // # sourceMappingURL=circle.js.map

View File

@@ -1,32 +1,31 @@
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
export function diamondSolid(ctx, from, to, size, fillStyle) { export function diamondSolid (ctx, from, to, size, fillStyle) {
size += ctx.lineWidth * 3; size += ctx.lineWidth * 3
var r = size / 2; const r = size / 2
var arrowWidth = ctx.lineWidth / 10; let arrowWidth = ctx.lineWidth / 10
if (ctx.lineWidth < 2) { if (ctx.lineWidth < 2) {
ctx.lineWidth = 2; ctx.lineWidth = 2
arrowWidth = 0; arrowWidth = 0
} }
ctx.translate(to.x, to.y); ctx.translate(to.x, to.y)
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x)); ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y); ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y)
ctx.moveTo(to.x, to.y + arrowWidth); ctx.moveTo(to.x, to.y + arrowWidth)
ctx.lineTo(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 - 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 - size, to.y + arrowWidth); ctx.lineTo(to.x - size, to.y + arrowWidth)
ctx.lineTo(to.x - r, to.y + r / 2); ctx.lineTo(to.x - r, to.y + r / 2)
ctx.closePath(); ctx.closePath()
ctx.stroke(); ctx.stroke()
if (fillStyle) { if (fillStyle) {
ctx.fillStyle = fillStyle; ctx.fillStyle = fillStyle
} else {
ctx.fillStyle = ctx.strokeStyle
} }
else { ctx.fill()
ctx.fillStyle = ctx.strokeStyle;
}
ctx.fill();
} }
export function diamond(ctx, from, to, size) { 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 // # sourceMappingURL=diamond.js.map

View File

@@ -1,42 +1,40 @@
export function line(ctx, from, to, size) { export function line (ctx, from, to, size) {
size += ctx.lineWidth * 3; size += ctx.lineWidth * 3
ctx.translate(to.x, to.y); ctx.translate(to.x, to.y)
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x)); 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.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5)
ctx.moveTo(to.x, to.y); ctx.moveTo(to.x, to.y)
ctx.lineTo(to.x - size, to.y - size / 3); ctx.lineTo(to.x - size, to.y - size / 3)
ctx.moveTo(to.x, to.y); ctx.moveTo(to.x, to.y)
ctx.lineTo(to.x - size, to.y + size / 3); ctx.lineTo(to.x - size, to.y + size / 3)
ctx.stroke(); ctx.stroke()
} }
export function lineUp(ctx, from, to, size) { export function lineUp (ctx, from, to, size) {
size += ctx.lineWidth * 3; size += ctx.lineWidth * 3
ctx.translate(to.x, to.y); ctx.translate(to.x, to.y)
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x)); 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.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5)
if (to.x > from.x) { if (to.x > from.x) {
ctx.moveTo(to.x, to.y); ctx.moveTo(to.x, to.y)
ctx.lineTo(to.x - size, to.y - size / 3); 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.stroke()
ctx.moveTo(to.x, to.y);
ctx.lineTo(to.x - size, to.y + size / 3);
}
ctx.stroke();
} }
export function lineDown(ctx, from, to, size) { export function lineDown (ctx, from, to, size) {
size += ctx.lineWidth * 3; size += ctx.lineWidth * 3
ctx.translate(to.x, to.y); ctx.translate(to.x, to.y)
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x)); 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.translate(-to.x - ctx.lineWidth / 5, -to.y - ctx.lineWidth / 5)
if (to.x < from.x) { if (to.x < from.x) {
ctx.moveTo(to.x, to.y); ctx.moveTo(to.x, to.y)
ctx.lineTo(to.x - size, to.y - size / 3); 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.stroke()
ctx.moveTo(to.x, to.y);
ctx.lineTo(to.x - size, to.y + size / 3);
}
ctx.stroke();
} }
//# sourceMappingURL=line.js.map // # sourceMappingURL=line.js.map

View File

@@ -1,29 +1,28 @@
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
export function triangleSolid(ctx, from, to, size, fillStyle) { export function triangleSolid (ctx, from, to, size, fillStyle) {
size += ctx.lineWidth * 3; size += ctx.lineWidth * 3
var arrowWidth = ctx.lineWidth / 10; let arrowWidth = ctx.lineWidth / 10
if (ctx.lineWidth < 2) { if (ctx.lineWidth < 2) {
ctx.lineWidth = 2; ctx.lineWidth = 2
arrowWidth = 0; arrowWidth = 0
} }
ctx.translate(to.x, to.y); ctx.translate(to.x, to.y)
ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x)); ctx.rotate(Math.atan2(to.y - from.y, to.x - from.x))
ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y); ctx.translate(-to.x - ctx.lineWidth + arrowWidth * 5, -to.y)
ctx.moveTo(to.x, to.y + arrowWidth); ctx.moveTo(to.x, to.y + arrowWidth)
ctx.lineTo(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.lineTo(to.x - size, to.y + size / 3); ctx.lineTo(to.x - size, to.y + size / 3)
ctx.closePath(); ctx.closePath()
ctx.stroke(); ctx.stroke()
if (fillStyle) { if (fillStyle) {
ctx.fillStyle = fillStyle; ctx.fillStyle = fillStyle
} else {
ctx.fillStyle = ctx.strokeStyle
} }
else { ctx.fill()
ctx.fillStyle = ctx.strokeStyle;
}
ctx.fill();
} }
export function triangle(ctx, from, to, size) { 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 // # sourceMappingURL=triangle.js.map

View File

@@ -1,9 +1,9 @@
import { Point } from '../models/point'; import { Point } from '../models/point'
import { Direction } from '../models/direction'; import { Direction } from '../models/direction'
export function defaultAnchors(node) { 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.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 / 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, 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 / 2, node.rect.y + node.rect.height, Direction.Bottom))
} }
//# sourceMappingURL=default.anchor.js.map // # sourceMappingURL=default.anchor.js.map

View File

@@ -1,213 +1,213 @@
import { rectangle } from './nodes/rectangle'; import { rectangle } from './nodes/rectangle'
import { circle } from './nodes/circle'; import { circle } from './nodes/circle'
import { triangle } from './nodes/triangle'; import { triangle } from './nodes/triangle'
import { diamond } from './nodes/diamond'; import { diamond } from './nodes/diamond'
import { leftArrow, rightArrow, twowayArrow } from './nodes/arrow'; import { leftArrow, rightArrow, twowayArrow } from './nodes/arrow'
import { text } from './nodes/text'; import { text } from './nodes/text'
import { line as nodeLine } from './nodes/line'; import { line as nodeLine } from './nodes/line'
import { triangleAnchors } from './nodes/triangle.anchor'; import { triangleAnchors } from './nodes/triangle.anchor'
import { arrowAnchors } from './nodes/arrow.anchor'; import { arrowAnchors } from './nodes/arrow.anchor'
import { lineAnchors } from './nodes/line.anchor'; import { lineAnchors } from './nodes/line.anchor'
import { circleIconRect, circleTextRect } from './nodes/circle.rect'; import { circleIconRect, circleTextRect } from './nodes/circle.rect'
import { triangleIconRect, triangleTextRect } from './nodes/triangle.rect'; import { triangleIconRect, triangleTextRect } from './nodes/triangle.rect'
import { diamondIconRect, diamondTextRect } from './nodes/diamond.rect'; import { diamondIconRect, diamondTextRect } from './nodes/diamond.rect'
import { twowayArrowIconRect, twowayArrowTextRect, leftArrowIconRect, leftArrowTextRect, rightArrowIconRect, rightArrowTextRect, } from './nodes/arrow.rect'; import { twowayArrowIconRect, twowayArrowTextRect, leftArrowIconRect, leftArrowTextRect, rightArrowIconRect, rightArrowTextRect } from './nodes/arrow.rect'
import { lineIconRect, lineTextRect } from './nodes/line.rect'; import { lineIconRect, lineTextRect } from './nodes/line.rect'
import { line, lineControlPoints, calcLineControlPoints } from './lines/line'; import { line, lineControlPoints, calcLineControlPoints } from './lines/line'
import { polyline, polylineControlPoints, pointInPolyline, calcPolylineControlPoints, dockPolylineControlPoint, } from './lines/polyline'; import { polyline, polylineControlPoints, pointInPolyline, calcPolylineControlPoints, dockPolylineControlPoint } from './lines/polyline'
import { curve, curveControlPoints, pointInCurve, calcCurveControlPoints, } from './lines/curve'; import { curve, curveControlPoints, pointInCurve, calcCurveControlPoints } from './lines/curve'
import { calcMindControlPoints, } from './lines/mind'; import { calcMindControlPoints } from './lines/mind'
import { triangleSolid, triangle as arrowTriangle } from './arrows/triangle'; import { triangleSolid, triangle as arrowTriangle } from './arrows/triangle'
import { diamondSolid, diamond as arrowDiamond } from './arrows/diamond'; import { diamondSolid, diamond as arrowDiamond } from './arrows/diamond'
import { circleSolid, circle as arrowCircle } from './arrows/circle'; import { circleSolid, circle as arrowCircle } from './arrows/circle'
import { circleAnchors } from './nodes/circle.anchor'; import { circleAnchors } from './nodes/circle.anchor'
import { lineUp, lineDown, line as arrowLine } from './arrows/line'; import { lineUp, lineDown, line as arrowLine } from './arrows/line'
import { pentagon } from './nodes/pentagon'; import { pentagon } from './nodes/pentagon'
import { pentagonIconRect, pentagonTextRect } from './nodes/pentagon.rect'; import { pentagonIconRect, pentagonTextRect } from './nodes/pentagon.rect'
import { pentagonAnchors } from './nodes/pentagon.anchor'; import { pentagonAnchors } from './nodes/pentagon.anchor'
import { hexagon } from './nodes/hexagon'; import { hexagon } from './nodes/hexagon'
import { hexagonAnchors } from './nodes/hexagon.anchor'; import { hexagonAnchors } from './nodes/hexagon.anchor'
import { hexagonIconRect, hexagonTextRect } from './nodes/hexagon.rect'; import { hexagonIconRect, hexagonTextRect } from './nodes/hexagon.rect'
import { pentagram } from './nodes/pentagram'; import { pentagram } from './nodes/pentagram'
import { pentagramAnchors } from './nodes/pentagram.anchor'; import { pentagramAnchors } from './nodes/pentagram.anchor'
import { pentagramIconRect, pentagramTextRect } from './nodes/pentagram.rect'; import { pentagramIconRect, pentagramTextRect } from './nodes/pentagram.rect'
import { cloud } from './nodes/cloud'; import { cloud } from './nodes/cloud'
import { cloudAnchors } from './nodes/cloud.anchor'; import { cloudAnchors } from './nodes/cloud.anchor'
import { cloudIconRect, cloudTextRect } from './nodes/cloud.rect'; import { cloudIconRect, cloudTextRect } from './nodes/cloud.rect'
import { message } from './nodes/message'; import { message } from './nodes/message'
import { messageIconRect, messageTextRect } from './nodes/message.rect'; import { messageIconRect, messageTextRect } from './nodes/message.rect'
import { messageAnchors } from './nodes/message.anchor'; import { messageAnchors } from './nodes/message.anchor'
import { file } from './nodes/file'; import { file } from './nodes/file'
import { imageIconRect, imageTextRect } from './nodes/image.rect'; import { imageIconRect, imageTextRect } from './nodes/image.rect'
import { imageAnchors } from './nodes/image.anchor'; import { imageAnchors } from './nodes/image.anchor'
import { cube } from './nodes/cube'; import { cube } from './nodes/cube'
import { cubeAnchors } from './nodes/cube.anchor'; import { cubeAnchors } from './nodes/cube.anchor'
import { cubeIconRect, cubeTextRect } from './nodes/cube.rect'; import { cubeIconRect, cubeTextRect } from './nodes/cube.rect'
import { people } from './nodes/people'; import { people } from './nodes/people'
import { peopleIconRect, peopleTextRect } from './nodes/people.rect'; import { peopleIconRect, peopleTextRect } from './nodes/people.rect'
import { rectangleIconRect, rectangleTextRect } from './nodes/rectangle.rect'; import { rectangleIconRect, rectangleTextRect } from './nodes/rectangle.rect'
import { graffiti } from './nodes/graffiti'; import { graffiti } from './nodes/graffiti'
import { graffitiAnchors } from './nodes/graffiti.anchor'; import { graffitiAnchors } from './nodes/graffiti.anchor'
import { mindNodeAnchors } from './nodes/mindNode.anchor'; import { mindNodeAnchors } from './nodes/mindNode.anchor'
import { mindLine } from './nodes/mindLine'; import { mindLine } from './nodes/mindLine'
import { mindLineAnchors } from './nodes/mindLine.anchor'; import { mindLineAnchors } from './nodes/mindLine.anchor'
import { lines } from './nodes/lines'; import { lines } from './nodes/lines'
// Functions of drawing a node. // Functions of drawing a node.
export var drawNodeFns = {}; export var drawNodeFns = {}
// Calc the occupy rect of icon. // Calc the occupy rect of icon.
export var iconRectFns = {}; export var iconRectFns = {}
// Calc the occupy rect of text. // Calc the occupy rect of text.
export var textRectFns = {}; export var textRectFns = {}
// Calc the anchors of node. // Calc the anchors of node.
export var anchorsFns = {}; export var anchorsFns = {}
// Functions of drawing a line. // Functions of drawing a line.
export var drawLineFns = {}; export var drawLineFns = {}
// Functions of drawing a arrow. // Functions of drawing a arrow.
export var drawArrowFns = {}; export var drawArrowFns = {}
function init() { function init () {
// ********Default nodes.******* // ********Default nodes.*******
// Combine // Combine
drawNodeFns.combine = rectangle; drawNodeFns.combine = rectangle
// Div // Div
drawNodeFns.div = rectangle; drawNodeFns.div = rectangle
// graffiti // graffiti
drawNodeFns.graffiti = graffiti; drawNodeFns.graffiti = graffiti
anchorsFns.graffiti = graffitiAnchors; anchorsFns.graffiti = graffitiAnchors
// lines // lines
drawNodeFns.lines = lines; drawNodeFns.lines = lines
// Square // Square
drawNodeFns.square = rectangle; drawNodeFns.square = rectangle
// Rectangle // Rectangle
drawNodeFns.rectangle = rectangle; drawNodeFns.rectangle = rectangle
iconRectFns.rectangle = rectangleIconRect; iconRectFns.rectangle = rectangleIconRect
textRectFns.rectangle = rectangleTextRect; textRectFns.rectangle = rectangleTextRect
// Ciricle // Ciricle
drawNodeFns.circle = circle; drawNodeFns.circle = circle
iconRectFns.circle = circleIconRect; iconRectFns.circle = circleIconRect
textRectFns.circle = circleTextRect; textRectFns.circle = circleTextRect
anchorsFns.circle = circleAnchors; anchorsFns.circle = circleAnchors
// Triangle // Triangle
drawNodeFns.triangle = triangle; drawNodeFns.triangle = triangle
anchorsFns.triangle = triangleAnchors; anchorsFns.triangle = triangleAnchors
iconRectFns.triangle = triangleIconRect; iconRectFns.triangle = triangleIconRect
textRectFns.triangle = triangleTextRect; textRectFns.triangle = triangleTextRect
// Diamond // Diamond
drawNodeFns.diamond = diamond; drawNodeFns.diamond = diamond
iconRectFns.diamond = diamondIconRect; iconRectFns.diamond = diamondIconRect
textRectFns.diamond = diamondTextRect; textRectFns.diamond = diamondTextRect
// Hexagon // Hexagon
drawNodeFns.hexagon = hexagon; drawNodeFns.hexagon = hexagon
iconRectFns.hexagon = hexagonIconRect; iconRectFns.hexagon = hexagonIconRect
textRectFns.hexagon = hexagonTextRect; textRectFns.hexagon = hexagonTextRect
anchorsFns.hexagon = hexagonAnchors; anchorsFns.hexagon = hexagonAnchors
// Pentagon // Pentagon
drawNodeFns.pentagon = pentagon; drawNodeFns.pentagon = pentagon
iconRectFns.pentagon = pentagonIconRect; iconRectFns.pentagon = pentagonIconRect
textRectFns.pentagon = pentagonTextRect; textRectFns.pentagon = pentagonTextRect
anchorsFns.pentagon = pentagonAnchors; anchorsFns.pentagon = pentagonAnchors
// Pentagram // Pentagram
drawNodeFns.pentagram = pentagram; drawNodeFns.pentagram = pentagram
iconRectFns.pentagram = pentagramIconRect; iconRectFns.pentagram = pentagramIconRect
textRectFns.pentagram = pentagramTextRect; textRectFns.pentagram = pentagramTextRect
anchorsFns.pentagram = pentagramAnchors; anchorsFns.pentagram = pentagramAnchors
// Left arrow // Left arrow
drawNodeFns.leftArrow = leftArrow; drawNodeFns.leftArrow = leftArrow
anchorsFns.leftArrow = arrowAnchors; anchorsFns.leftArrow = arrowAnchors
iconRectFns.leftArrow = leftArrowIconRect; iconRectFns.leftArrow = leftArrowIconRect
textRectFns.leftArrow = leftArrowTextRect; textRectFns.leftArrow = leftArrowTextRect
// Right arrow // Right arrow
drawNodeFns.rightArrow = rightArrow; drawNodeFns.rightArrow = rightArrow
anchorsFns.rightArrow = arrowAnchors; anchorsFns.rightArrow = arrowAnchors
iconRectFns.rightArrow = rightArrowIconRect; iconRectFns.rightArrow = rightArrowIconRect
textRectFns.rightArrow = rightArrowTextRect; textRectFns.rightArrow = rightArrowTextRect
// Two-way arrow // Two-way arrow
drawNodeFns.twowayArrow = twowayArrow; drawNodeFns.twowayArrow = twowayArrow
anchorsFns.twowayArrow = arrowAnchors; anchorsFns.twowayArrow = arrowAnchors
iconRectFns.twowayArrow = twowayArrowIconRect; iconRectFns.twowayArrow = twowayArrowIconRect
textRectFns.twowayArrow = twowayArrowTextRect; textRectFns.twowayArrow = twowayArrowTextRect
// Cloud // Cloud
drawNodeFns.cloud = cloud; drawNodeFns.cloud = cloud
anchorsFns.cloud = cloudAnchors; anchorsFns.cloud = cloudAnchors
iconRectFns.cloud = cloudIconRect; iconRectFns.cloud = cloudIconRect
textRectFns.cloud = cloudTextRect; textRectFns.cloud = cloudTextRect
// Message // Message
drawNodeFns.message = message; drawNodeFns.message = message
anchorsFns.message = messageAnchors; anchorsFns.message = messageAnchors
iconRectFns.message = messageIconRect; iconRectFns.message = messageIconRect
textRectFns.message = messageTextRect; textRectFns.message = messageTextRect
// File // File
drawNodeFns.file = file; drawNodeFns.file = file
// Text // Text
drawNodeFns.text = text; drawNodeFns.text = text
iconRectFns.text = lineIconRect; iconRectFns.text = lineIconRect
// Line // Line
drawNodeFns.line = nodeLine; drawNodeFns.line = nodeLine
anchorsFns.line = lineAnchors; anchorsFns.line = lineAnchors
iconRectFns.line = lineIconRect; iconRectFns.line = lineIconRect
textRectFns.line = lineTextRect; textRectFns.line = lineTextRect
// Image // Image
drawNodeFns.image = function (ctx, node) { }; drawNodeFns.image = function (ctx, node) { }
iconRectFns.image = imageIconRect; iconRectFns.image = imageIconRect
textRectFns.image = imageTextRect; textRectFns.image = imageTextRect
anchorsFns.image = imageAnchors; anchorsFns.image = imageAnchors
// Cube // Cube
drawNodeFns.cube = cube; drawNodeFns.cube = cube
anchorsFns.cube = cubeAnchors; anchorsFns.cube = cubeAnchors
iconRectFns.cube = cubeIconRect; iconRectFns.cube = cubeIconRect
textRectFns.cube = cubeTextRect; textRectFns.cube = cubeTextRect
// People // People
drawNodeFns.people = people; drawNodeFns.people = people
iconRectFns.people = peopleIconRect; iconRectFns.people = peopleIconRect
textRectFns.people = peopleTextRect; textRectFns.people = peopleTextRect
// MindNode // MindNode
drawNodeFns.mindNode = rectangle; drawNodeFns.mindNode = rectangle
anchorsFns.mindNode = mindNodeAnchors; anchorsFns.mindNode = mindNodeAnchors
iconRectFns.mindNode = rectangleIconRect; iconRectFns.mindNode = rectangleIconRect
textRectFns.mindNode = rectangleTextRect; textRectFns.mindNode = rectangleTextRect
// MindLine // MindLine
drawNodeFns.mindLine = mindLine; drawNodeFns.mindLine = mindLine
anchorsFns.mindLine = mindLineAnchors; anchorsFns.mindLine = mindLineAnchors
// ********end******** // ********end********
// ********Default lines.******* // ********Default lines.*******
drawLineFns.line = { drawLineFns.line = {
drawFn: line, drawFn: line,
drawControlPointsFn: lineControlPoints, drawControlPointsFn: lineControlPoints,
controlPointsFn: calcLineControlPoints, controlPointsFn: calcLineControlPoints,
pointIn: pointInPolyline, pointIn: pointInPolyline
}; }
drawLineFns.polyline = { drawLineFns.polyline = {
drawFn: polyline, drawFn: polyline,
drawControlPointsFn: polylineControlPoints, drawControlPointsFn: polylineControlPoints,
controlPointsFn: calcPolylineControlPoints, controlPointsFn: calcPolylineControlPoints,
dockControlPointFn: dockPolylineControlPoint, dockControlPointFn: dockPolylineControlPoint,
pointIn: pointInPolyline, pointIn: pointInPolyline
}; }
drawLineFns.curve = { drawLineFns.curve = {
drawFn: curve, drawFn: curve,
drawControlPointsFn: curveControlPoints, drawControlPointsFn: curveControlPoints,
controlPointsFn: calcCurveControlPoints, controlPointsFn: calcCurveControlPoints,
pointIn: pointInCurve, pointIn: pointInCurve
}; }
drawLineFns.mind = { drawLineFns.mind = {
drawFn: curve, drawFn: curve,
drawControlPointsFn: curveControlPoints, drawControlPointsFn: curveControlPoints,
controlPointsFn: calcMindControlPoints, controlPointsFn: calcMindControlPoints,
pointIn: pointInCurve, pointIn: pointInCurve
}; }
// ********end******** // ********end********
// ********Default nodes.******* // ********Default nodes.*******
drawArrowFns.triangleSolid = triangleSolid; drawArrowFns.triangleSolid = triangleSolid
drawArrowFns.triangle = arrowTriangle; drawArrowFns.triangle = arrowTriangle
drawArrowFns.diamondSolid = diamondSolid; drawArrowFns.diamondSolid = diamondSolid
drawArrowFns.diamond = arrowDiamond; drawArrowFns.diamond = arrowDiamond
drawArrowFns.circleSolid = circleSolid; drawArrowFns.circleSolid = circleSolid
drawArrowFns.circle = arrowCircle; drawArrowFns.circle = arrowCircle
drawArrowFns.line = arrowLine; drawArrowFns.line = arrowLine
drawArrowFns.lineUp = lineUp; drawArrowFns.lineUp = lineUp
drawArrowFns.lineDown = lineDown; drawArrowFns.lineDown = lineDown
// ********end******** // ********end********
} }
init(); init()
// registerNode: Register a custom node. // registerNode: Register a custom node.
// name - The name of node. // name - The name of node.
// drawFn - How to draw. // drawFn - How to draw.
@@ -215,16 +215,16 @@ init();
// iconRectFn - How to get the icon rect. // iconRectFn - How to get the icon rect.
// textRectFn - How to get the text rect. // textRectFn - How to get the text rect.
// protect - No overwirte the node if exists. // protect - No overwirte the node if exists.
export function registerNode(name, drawFn, anchorsFn, iconRectFn, textRectFn, protect) { export function registerNode (name, drawFn, anchorsFn, iconRectFn, textRectFn, protect) {
// Exist // Exist
if (drawNodeFns[name] && protect) { if (drawNodeFns[name] && protect) {
return false; return false
} }
drawNodeFns[name] = drawFn; drawNodeFns[name] = drawFn
anchorsFns[name] = anchorsFn; anchorsFns[name] = anchorsFn
iconRectFns[name] = iconRectFn; iconRectFns[name] = iconRectFn
textRectFns[name] = textRectFn; textRectFns[name] = textRectFn
return true; return true
} }
// registerLine: Register a custom line. // registerLine: Register a custom line.
// name - The name of line. // name - The name of line.
@@ -233,11 +233,11 @@ export function registerNode(name, drawFn, anchorsFn, iconRectFn, textRectFn, pr
// controlPointsFn - How to get the controlPoints. // controlPointsFn - How to get the controlPoints.
// dockControlPointFn - Dock a point to horizontal/vertial or related position. // dockControlPointFn - Dock a point to horizontal/vertial or related position.
// force - Overwirte the node if exists. // force - Overwirte the node if exists.
export function registerLine(name, drawFn, drawControlPointsFn, controlPointsFn, dockControlPointFn, pointInFn, getLength, getCenter, getPointByPos, force) { 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 // Exist
if (drawLineFns[name] && !force) { if (drawLineFns[name] && !force) {
return false; return false
} }
drawLineFns[name] = { drawLineFns[name] = {
drawFn: drawFn, drawFn: drawFn,
@@ -247,22 +247,22 @@ export function registerLine(name, drawFn, drawControlPointsFn, controlPointsFn,
pointIn: pointInFn, pointIn: pointInFn,
getLength: getLength, getLength: getLength,
getCenter: getCenter, getCenter: getCenter,
getPointByPos: getPointByPos, getPointByPos: getPointByPos
}; }
return true; return true
} }
// registerArrow: Register a custom arrow. // registerArrow: Register a custom arrow.
// name - the name of arrow. // name - the name of arrow.
// drawFn - how to draw. // drawFn - how to draw.
// force - Overwirte the node if exists. // force - Overwirte the node if exists.
export function registerArrow(name, drawFn, protect) { export function registerArrow (name, drawFn, protect) {
// Exist // Exist
if (drawArrowFns[name] && protect) { if (drawArrowFns[name] && protect) {
return false; return false
} }
drawArrowFns[name] = drawFn; drawArrowFns[name] = drawFn
return true; return true
} }
window.registerTopologyNode = registerNode; window.registerTopologyNode = registerNode
window.registerTopologyLine = registerLine; window.registerTopologyLine = registerLine
//# sourceMappingURL=default.js.map // # sourceMappingURL=default.js.map

View File

@@ -1,19 +1,17 @@
import { Rect } from '../models/rect'; import { Rect } from '../models/rect'
export function defaultIconRect(node) { export function defaultIconRect (node) {
if (node.image && node.imageWidth) { 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.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.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);
} }
export function defaultTextRect(node) { export function defaultTextRect (node) {
var height = node.rect.height - node.paddingTopNum - node.paddingBottomNum; 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.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); 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 // # sourceMappingURL=default.rect.js.map

View File

@@ -1,4 +1,4 @@
export * from './default'; export * from './default'
export * from './nodes/rectangle'; export * from './nodes/rectangle'
export * from './nodes/text'; export * from './nodes/text'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -1,130 +1,128 @@
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
import { pointInLine } from '../../utils/canvas'; import { pointInLine } from '../../utils/canvas'
import { rgba } from '../../utils/math'; import { rgba } from '../../utils/math'
var distance = 80; const distance = 80
export function curve(ctx, l) { export function curve (ctx, l) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(l.from.x, l.from.y); 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.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.stroke()
} }
export function curveControlPoints(ctx, l) { export function curveControlPoints (ctx, l) {
ctx.save(); ctx.save()
ctx.fillStyle = rgba(0.5, ctx.strokeStyle + ''); ctx.fillStyle = rgba(0.5, ctx.strokeStyle + '')
ctx.lineWidth = 1; ctx.lineWidth = 1
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(l.from.x, l.from.y); ctx.moveTo(l.from.x, l.from.y)
ctx.lineTo(l.controlPoints[0].x, l.controlPoints[0].y); ctx.lineTo(l.controlPoints[0].x, l.controlPoints[0].y)
ctx.stroke(); ctx.stroke()
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(l.to.x, l.to.y); ctx.moveTo(l.to.x, l.to.y)
ctx.lineTo(l.controlPoints[1].x, l.controlPoints[1].y); ctx.lineTo(l.controlPoints[1].x, l.controlPoints[1].y)
ctx.stroke(); ctx.stroke()
ctx.fillStyle = '#fff'; ctx.fillStyle = '#fff'
ctx.lineWidth = 2; ctx.lineWidth = 2
for (var _i = 0, _a = l.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
ctx.beginPath(); ctx.beginPath()
ctx.arc(item.x, item.y, 4, 0, Math.PI * 2); ctx.arc(item.x, item.y, 4, 0, Math.PI * 2)
ctx.stroke(); ctx.stroke()
ctx.fill(); ctx.fill()
} }
ctx.restore(); ctx.restore()
} }
export function calcCurveControlPoints(l) { export function calcCurveControlPoints (l) {
if (!l.from.direction) { if (!l.from.direction) {
l.from.direction = Direction.Bottom; l.from.direction = Direction.Bottom
} }
if (!l.to.direction) { if (!l.to.direction) {
l.to.direction = (l.from.direction + 2) % 4; l.to.direction = (l.from.direction + 2) % 4
if (!l.to.direction) { 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)]; l.controlPoints = [getControlPt(l.from, l.to), getControlPt(l.to, l.from)]
Store.set(generateStoreKey(l, 'pts-') + l.id, undefined); Store.set(generateStoreKey(l, 'pts-') + l.id, undefined)
} }
export function pointInCurve(point, l) { 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) { if (!points) {
points = [l.from]; points = [l.from]
if (l.controlPoints) { if (l.controlPoints) {
for (var i = 0.01; i < 1; i += 0.01) { 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); points.push(l.to)
Store.set(generateStoreKey(l, 'pts-') + l.id, points); 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) { for (var i = 0; i < cnt; ++i) {
if (pointInLine(point, points[i], points[i + 1])) { if (pointInLine(point, points[i], points[i + 1])) {
return true; return true
} }
} }
return false; return false
} }
// Get a point in bezier. // Get a point in bezier.
// pos - The position of point in bezier. It is expressed as a percentage(0 - 1). // pos - The position of point in bezier. It is expressed as a percentage(0 - 1).
export function getBezierPoint(pos, from, cp1, cp2, to) { export function getBezierPoint (pos, from, cp1, cp2, to) {
var x1 = from.x, y1 = from.y; const x1 = from.x; const y1 = from.y
var x2 = to.x, y2 = to.y; const x2 = to.x; const y2 = to.y
var cx1 = cp1.x, cy1 = cp1.y; const cx1 = cp1.x; const cy1 = cp1.y
var cx2 = cp2.x, cy2 = cp2.y; const cx2 = cp2.x; const cy2 = cp2.y
var x = x1 * (1 - pos) * (1 - pos) * (1 - pos) + const x = x1 * (1 - pos) * (1 - pos) * (1 - pos) +
3 * cx1 * pos * (1 - pos) * (1 - pos) + 3 * cx1 * pos * (1 - pos) * (1 - pos) +
3 * cx2 * pos * pos * (1 - pos) + 3 * cx2 * pos * pos * (1 - pos) +
x2 * pos * pos * pos; x2 * pos * pos * pos
var y = y1 * (1 - pos) * (1 - pos) * (1 - pos) + const y = y1 * (1 - pos) * (1 - pos) * (1 - pos) +
3 * cy1 * pos * (1 - pos) * (1 - pos) + 3 * cy1 * pos * (1 - pos) * (1 - pos) +
3 * cy2 * pos * pos * (1 - pos) + 3 * cy2 * pos * pos * (1 - pos) +
y2 * pos * pos * pos; y2 * pos * pos * pos
return new Point(x, y); return new Point(x, y)
} }
export function getControlPt(pt, to) { export function getControlPt (pt, to) {
var point = new Point(pt.x, pt.y, pt.direction, pt.anchorIndex, pt.id); const point = new Point(pt.x, pt.y, pt.direction, pt.anchorIndex, pt.id)
var dis = window.topologyControlPtDistance || distance; let dis = window.topologyControlPtDistance || distance
if ((pt.direction === Direction.Up || pt.direction === Direction.Bottom) && Math.abs(pt.x - to.x) < 3) { if ((pt.direction === Direction.Up || pt.direction === Direction.Bottom) && Math.abs(pt.x - to.x) < 3) {
if (to.y > pt.y) { if (to.y > pt.y) {
dis = Math.round((to.y - pt.y) / 3); dis = Math.round((to.y - pt.y) / 3)
point.y += dis; point.y += dis
} else {
dis = Math.round((pt.y - to.y) / 3)
point.y -= dis
} }
else { return point
dis = Math.round((pt.y - to.y) / 3);
point.y -= dis;
}
return point;
} }
if ((pt.direction === Direction.Left || pt.direction === Direction.Right) && Math.abs(pt.y - to.y) < 3) { if ((pt.direction === Direction.Left || pt.direction === Direction.Right) && Math.abs(pt.y - to.y) < 3) {
if (to.x > pt.x) { if (to.x > pt.x) {
dis = Math.round((to.x - pt.x) / 3); dis = Math.round((to.x - pt.x) / 3)
point.x += dis; point.x += dis
} else {
dis = Math.round((pt.x - to.x) / 3)
point.x -= dis
} }
else { return point
dis = Math.round((pt.x - to.x) / 3);
point.x -= dis;
}
return point;
} }
switch (pt.direction) { switch (pt.direction) {
case Direction.Up: case Direction.Up:
point.y -= dis; point.y -= dis
break; break
case Direction.Right: case Direction.Right:
point.x += dis; point.x += dis
break; break
case Direction.Bottom: case Direction.Bottom:
point.y += dis; point.y += dis
break; break
case Direction.Left: case Direction.Left:
point.x -= dis; point.x -= dis
break; break
} }
return point; return point
} }
export function generateStoreKey(pen, key) { export function generateStoreKey (pen, key) {
return pen.getTID() + "-" + key; return pen.getTID() + '-' + key
} }
//# sourceMappingURL=curve.js.map // # sourceMappingURL=curve.js.map

View File

@@ -1,11 +1,11 @@
export function line(ctx, l) { export function line (ctx, l) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(l.from.x, l.from.y); ctx.moveTo(l.from.x, l.from.y)
ctx.lineTo(l.to.x, l.to.y); ctx.lineTo(l.to.x, l.to.y)
ctx.stroke(); ctx.stroke()
} }
export function lineControlPoints(ctx, l) { } export function lineControlPoints (ctx, l) { }
export function calcLineControlPoints(l) { export function calcLineControlPoints (l) {
l.controlPoints = []; l.controlPoints = []
} }
//# sourceMappingURL=line.js.map // # sourceMappingURL=line.js.map

View File

@@ -1,32 +1,32 @@
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
import { generateStoreKey } from './curve'; import { generateStoreKey } from './curve'
var distance = 20; const distance = 20
export function calcMindControlPoints(l) { export function calcMindControlPoints (l) {
if (!l.from.direction) { if (!l.from.direction) {
l.from.direction = Direction.Bottom; l.from.direction = Direction.Bottom
} }
if (!l.to.direction) { if (!l.to.direction) {
l.to.direction = (l.from.direction + 2) % 4; l.to.direction = (l.from.direction + 2) % 4
if (!l.to.direction) { if (!l.to.direction) {
l.to.direction = Direction.Left; l.to.direction = Direction.Left
} }
} }
switch (l.from.direction) { switch (l.from.direction) {
case Direction.Up: case Direction.Up:
l.controlPoints = [new Point(l.from.x, l.from.y - distance), new Point(l.from.x, l.to.y)]; l.controlPoints = [new Point(l.from.x, l.from.y - distance), new Point(l.from.x, l.to.y)]
break; break
case Direction.Right: case Direction.Right:
l.controlPoints = [new Point(l.from.x + distance, l.from.y), new Point(l.from.x, l.to.y)]; l.controlPoints = [new Point(l.from.x + distance, l.from.y), new Point(l.from.x, l.to.y)]
break; break
case Direction.Bottom: case Direction.Bottom:
l.controlPoints = [new Point(l.from.x, l.from.y + distance), new Point(l.from.x, l.to.y)]; l.controlPoints = [new Point(l.from.x, l.from.y + distance), new Point(l.from.x, l.to.y)]
break; break
case Direction.Left: case Direction.Left:
l.controlPoints = [new Point(l.from.x - distance, l.from.y), new Point(l.from.x, l.to.y)]; l.controlPoints = [new Point(l.from.x - distance, l.from.y), new Point(l.from.x, l.to.y)]
break; break
} }
Store.set(generateStoreKey(l, 'pts-') + l.id, undefined); Store.set(generateStoreKey(l, 'pts-') + l.id, undefined)
} }
//# sourceMappingURL=mind.js.map // # sourceMappingURL=mind.js.map

View File

@@ -1,309 +1,285 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
import { pointInLine } from '../../utils/canvas'; import { pointInLine } from '../../utils/canvas'
var minDistance = 50; const minDistance = 50
export function polyline(ctx, l) { export function polyline (ctx, l) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(l.from.x, l.from.y); ctx.moveTo(l.from.x, l.from.y)
for (var _i = 0, _a = l.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
ctx.lineTo(item.x, item.y); ctx.lineTo(item.x, item.y)
} }
ctx.lineTo(l.to.x, l.to.y); ctx.lineTo(l.to.x, l.to.y)
ctx.stroke(); ctx.stroke()
} }
export function polylineControlPoints(ctx, l) { export function polylineControlPoints (ctx, l) {
ctx.save(); ctx.save()
ctx.fillStyle = '#fff'; ctx.fillStyle = '#fff'
ctx.lineWidth = 2; ctx.lineWidth = 2
for (var _i = 0, _a = l.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = l.controlPoints; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
ctx.beginPath(); ctx.beginPath()
ctx.arc(item.x, item.y, 4, 0, Math.PI * 2); ctx.arc(item.x, item.y, 4, 0, Math.PI * 2)
ctx.stroke(); ctx.stroke()
ctx.fill(); ctx.fill()
} }
ctx.restore(); ctx.restore()
} }
export function calcPolylineControlPoints(l) { export function calcPolylineControlPoints (l) {
l.controlPoints = []; l.controlPoints = []
var from = getDirectionPoint(l.from, l.to); const from = getDirectionPoint(l.from, l.to)
if (l.from.direction) { if (l.from.direction) {
l.controlPoints.push(from); l.controlPoints.push(from)
} }
var to = getDirectionPoint(l.to, l.from); const to = getDirectionPoint(l.to, l.from)
var pts; let pts
switch (from.direction) { switch (from.direction) {
case Direction.Up: case Direction.Up:
pts = getNextPointByUp(from, to); pts = getNextPointByUp(from, to)
break; break
case Direction.Right: case Direction.Right:
pts = getNextPointByRight(from, to); pts = getNextPointByRight(from, to)
break; break
case Direction.Bottom: case Direction.Bottom:
pts = getNextPointByBottom(from, to); pts = getNextPointByBottom(from, to)
break; break
case Direction.Left: case Direction.Left:
pts = getNextPointByLeft(from, to); pts = getNextPointByLeft(from, to)
break; break
} }
l.controlPoints.push.apply(l.controlPoints, pts); l.controlPoints.push.apply(l.controlPoints, pts)
if (l.to.direction) { if (l.to.direction) {
l.controlPoints.push(to); l.controlPoints.push(to)
} }
} }
export function pointInPolyline(point, l) { export function pointInPolyline (point, l) {
if (!l.controlPoints || !l.controlPoints.length) { 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])) { if (pointInLine(point, l.from, l.controlPoints[0])) {
return true; return true
} }
if (pointInLine(point, l.to, l.controlPoints[l.controlPoints.length - 1])) { 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])) { if (pointInLine(point, l.controlPoints[i], l.controlPoints[i + 1])) {
return true; return true
} }
} }
return false; return false
} }
export function dockPolylineControlPoint(point, l) { export function dockPolylineControlPoint (point, l) {
var pts = [l.from]; const pts = [l.from]
pts.push.apply(pts, l.controlPoints); pts.push.apply(pts, l.controlPoints)
pts.push(l.to); pts.push(l.to)
for (var _i = 0, pts_1 = pts; _i < pts_1.length; _i++) { for (let _i = 0, pts_1 = pts; _i < pts_1.length; _i++) {
var item = pts_1[_i]; const item = pts_1[_i]
if (Math.abs(point.x - item.x) < 7) { if (Math.abs(point.x - item.x) < 7) {
point.x = item.x; point.x = item.x
} }
if (Math.abs(point.y - item.y) < 7) { if (Math.abs(point.y - item.y) < 7) {
point.y = item.y; point.y = item.y
} }
} }
} }
function getDirectionPoint(pt, to) { function getDirectionPoint (pt, to) {
var point = pt.clone(); const point = pt.clone()
switch (pt.direction) { switch (pt.direction) {
case Direction.Up: case Direction.Up:
if (to.y < pt.y) { 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 { break
point.y -= minDistance;
}
break;
case Direction.Right: case Direction.Right:
if (to.x > pt.x) { 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 { break
point.x += minDistance;
}
break;
case Direction.Bottom: case Direction.Bottom:
if (to.y > pt.y) { 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 { break
point.y += minDistance;
}
break;
case Direction.Left: case Direction.Left:
if (to.x < pt.x) { 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 { break
point.x -= minDistance;
} }
break; return point
}
return point;
} }
function getNextPointByUp(from, to) { function getNextPointByUp (from, to) {
if (from.x === to.x || from.y === to.y) { if (from.x === to.x || from.y === to.y) {
return []; return []
} }
// The to point above the from point. // The to point above the from point.
if (from.y > to.y) { if (from.y > to.y) {
if (to.direction === Direction.Up && from.y - to.y > 3 * minDistance) { if (to.direction === Direction.Up && from.y - to.y > 3 * minDistance) {
if (from.x < to.x) { if (from.x < to.x) {
if (to.x - from.x < minDistance) { 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)]; return [new Point(from.x, to.y)]
} } else {
else {
if (from.x - to.x < minDistance) { 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 // Left top
if ((to.direction === Direction.Left && from.x > to.x) || (to.direction === Direction.Right && from.x < to.x)) { 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. // The to point below the from point.
} } else {
else {
if (to.direction === Direction.Bottom) { if (to.direction === Direction.Bottom) {
if (from.x < to.x) { 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 { } else {
var pts = getHorizontalPoints(to, from); return [new Point(to.x, from.y)]
return [pts[1], pts[0]];
}
}
else {
return [new Point(to.x, from.y)];
} }
} }
} }
function getNextPointByBottom(from, to) { function getNextPointByBottom (from, to) {
if (from.x === to.x || from.y === to.y) { if (from.x === to.x || from.y === to.y) {
return []; return []
} }
// The to point below the from point. // The to point below the from point.
if (from.y < to.y) { if (from.y < to.y) {
if (to.direction === Direction.Bottom && to.y - from.y > 3 * minDistance) { if (to.direction === Direction.Bottom && to.y - from.y > 3 * minDistance) {
if (from.x < to.x) { if (from.x < to.x) {
if (to.x - from.x < minDistance) { 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)]; return [new Point(from.x, to.y)]
} } else {
else {
if (from.x - to.x < minDistance) { 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)) { 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. // The to point below the from point.
} } else {
else {
if (to.direction === Direction.Up) { if (to.direction === Direction.Up) {
if (from.x < to.x) { 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 { } else {
var pts = getHorizontalPoints(to, from); return [new Point(to.x, from.y)]
return [pts[1], pts[0]];
}
}
else {
return [new Point(to.x, from.y)];
} }
} }
} }
function getNextPointByLeft(from, to) { function getNextPointByLeft (from, to) {
if (from.x === to.x || from.y === to.y) { if (from.x === to.x || from.y === to.y) {
return []; return []
} }
// The to point is on the left. // The to point is on the left.
if (from.x > to.x) { if (from.x > to.x) {
if (to.direction === Direction.Left && from.x - to.x > 3 * minDistance) { if (to.direction === Direction.Left && from.x - to.x > 3 * minDistance) {
if (from.y < to.y) { if (from.y < to.y) {
if (to.y - from.y < minDistance) { 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)]; return [new Point(to.x, from.y)]
} } else {
else {
if (from.y - to.y < minDistance) { 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 || if (to.direction === Direction.Left ||
(to.direction === Direction.Up && from.y < to.y) || (to.direction === Direction.Up && from.y < to.y) ||
(to.direction === Direction.Bottom && 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. // The to point is on the right.
} } else {
else {
if (to.direction === Direction.Right) { if (to.direction === Direction.Right) {
if (from.y < to.y) { 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 { } else {
var pts = getVerticalPoints(to, from); return [new Point(from.x, to.y)]
return [pts[1], pts[0]];
}
}
else {
return [new Point(from.x, to.y)];
} }
} }
} }
function getNextPointByRight(from, to) { function getNextPointByRight (from, to) {
if (from.x === to.x || from.y === to.y) { if (from.x === to.x || from.y === to.y) {
return []; return []
} }
// The to point is on the right. // The to point is on the right.
if (from.x < to.x) { if (from.x < to.x) {
if (to.direction === Direction.Right && to.x - from.x > 3 * minDistance) { if (to.direction === Direction.Right && to.x - from.x > 3 * minDistance) {
if (from.y < to.y) { if (from.y < to.y) {
if (to.y - from.y < minDistance) { 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)]; return [new Point(to.x, from.y)]
} } else {
else {
if (from.y - to.y < minDistance) { 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 || if (to.direction === Direction.Right ||
(to.direction === Direction.Up && from.y < to.y) || (to.direction === Direction.Up && from.y < to.y) ||
(to.direction === Direction.Bottom && 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. // The to point is on the left.
} } else {
else {
if (to.direction === Direction.Left) { if (to.direction === Direction.Left) {
if (from.y < to.y) { 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 { } else {
var pts = getVerticalPoints(to, from); return [new Point(from.x, to.y)]
return [pts[1], pts[0]];
}
}
else {
return [new Point(from.x, to.y)];
} }
} }
} }
function getHorizontalPoints(left, right) { function getHorizontalPoints (left, right) {
var x = left.x + (right.x - left.x) / 2; const x = left.x + (right.x - left.x) / 2
return [new Point(x, left.y), new Point(x, right.y)]; return [new Point(x, left.y), new Point(x, right.y)]
} }
function getVerticalPoints(up, bottom) { function getVerticalPoints (up, bottom) {
var y = up.y + (bottom.y - up.y) / 2; const y = up.y + (bottom.y - up.y) / 2
return [new Point(up.x, y), new Point(bottom.x, y)]; return [new Point(up.x, y), new Point(bottom.x, y)]
} }
//# sourceMappingURL=polyline.js.map // # sourceMappingURL=polyline.js.map

View File

@@ -1,7 +1,7 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function arrowAnchors(node) { 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.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.width, node.rect.y + node.rect.height / 2, Direction.Right))
} }
//# sourceMappingURL=arrow.anchor.js.map // # sourceMappingURL=arrow.anchor.js.map

View File

@@ -1,45 +1,45 @@
export function leftArrow(ctx, node) { export function leftArrow (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 2); 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)
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3); 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 / 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.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.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 * 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)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
export function rightArrow(ctx, node) { export function rightArrow (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 3); 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 + 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.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.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)
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.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.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 3)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
export function twowayArrow(ctx, node) { export function twowayArrow (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 2); 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)
ctx.lineTo(node.rect.x + node.rect.height / 2, node.rect.y + node.rect.height / 3); 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 + 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.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.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)
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.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)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=arrow.js.map // # sourceMappingURL=arrow.js.map

View File

@@ -1,23 +1,23 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function leftArrowIconRect(node) { export function leftArrowIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function leftArrowTextRect(node) { 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.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.fullTextRect = node.textRect
} }
export function rightArrowIconRect(node) { export function rightArrowIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function rightArrowTextRect(node) { 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.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.fullTextRect = node.textRect
} }
export function twowayArrowIconRect(node) { export function twowayArrowIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function twowayArrowTextRect(node) { 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.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.fullTextRect = node.textRect
} }
//# sourceMappingURL=arrow.rect.js.map // # sourceMappingURL=arrow.rect.js.map

View File

@@ -1,18 +1,18 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function circleAnchors(node) { 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.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 / 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, 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 / 2, node.rect.y + node.rect.height, Direction.Bottom))
for (var i = 5; i < 360; i += 5) { for (let i = 5; i < 360; i += 5) {
if (i % 90 === 0) { if (i % 90 === 0) {
continue; continue
} }
var direction = Math.round(i / 90); const 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); 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; pt.hidden = true
node.anchors.push(pt); node.anchors.push(pt)
} }
} }
//# sourceMappingURL=circle.anchor.js.map // # sourceMappingURL=circle.anchor.js.map

View File

@@ -1,7 +1,7 @@
export function circle(ctx, node) { 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); 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(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=circle.js.map // # sourceMappingURL=circle.js.map

View File

@@ -1,27 +1,26 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function circleIconRect(node) { export function circleIconRect (node) {
var w = node.rect.width / 2; let w = node.rect.width / 2
var h = node.rect.height / 2; let h = node.rect.height / 2
if (w > h) { if (w > h) {
w = h; w = h
} else {
h = w
} }
else { let top = node.rect.height / 10
h = w;
}
var top = node.rect.height / 10;
if (top < 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) { export function circleTextRect (node) {
var bottom = node.rect.height / 20; let bottom = node.rect.height / 20
if (bottom < 5) { 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); 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; const w = (node.rect.width * 5) / 7
var h = (node.rect.height * 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); 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 // # sourceMappingURL=circle.rect.js.map

View File

@@ -1,9 +1,9 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function cloudAnchors(node) { 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.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 / 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, 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.width / 2, node.rect.y + (node.rect.height * 4) / 5, Direction.Bottom))
} }
//# sourceMappingURL=cloud.anchor.js.map // # sourceMappingURL=cloud.anchor.js.map

View File

@@ -1,11 +1,11 @@
export function cloud(ctx, node) { export function cloud (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + node.rect.width / 5, node.rect.y + (node.rect.height * 13) / 16); 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 / 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 / 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.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(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=cloud.js.map // # sourceMappingURL=cloud.js.map

View File

@@ -1,9 +1,9 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function cloudIconRect(node) { export function cloudIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function cloudTextRect(node) { 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.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.fullTextRect = node.textRect
} }
//# sourceMappingURL=cloud.rect.js.map // # sourceMappingURL=cloud.rect.js.map

View File

@@ -1,10 +1,10 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function cubeAnchors(node) { export function cubeAnchors (node) {
var offset = node.z * Math.sin((45 * Math.PI) / 180); 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.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.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.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)); 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 // # sourceMappingURL=cube.anchor.js.map

View File

@@ -1,5 +1,5 @@
import { Cube } from './cube.model'; import { Cube } from './cube.model'
export function cube(ctx, node) { 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 // # sourceMappingURL=cube.js.map

View File

@@ -1,64 +1,63 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { pSBC } from '../../utils/math'; import { pSBC } from '../../utils/math'
var Surface = /** @class */ (function () { const Surface = /** @class */ (function () {
function Surface(pt1, pt2, pt3, pt4, fillStyle, strokeStyle) { function Surface (pt1, pt2, pt3, pt4, fillStyle, strokeStyle) {
if (fillStyle === void 0) { fillStyle = ''; } if (fillStyle === void 0) { fillStyle = '' }
if (strokeStyle === void 0) { strokeStyle = ''; } if (strokeStyle === void 0) { strokeStyle = '' }
this.points = []; this.points = []
this.fillStyle = ''; this.fillStyle = ''
this.strokeStyle = ''; this.strokeStyle = ''
this.points.push(pt1); this.points.push(pt1)
this.points.push(pt2); this.points.push(pt2)
this.points.push(pt3); this.points.push(pt3)
this.points.push(pt4); this.points.push(pt4)
this.fillStyle = fillStyle; this.fillStyle = fillStyle
this.strokeStyle = strokeStyle || fillStyle; this.strokeStyle = strokeStyle || fillStyle
} }
Surface.prototype.render = function (ctx) { Surface.prototype.render = function (ctx) {
ctx.save(); ctx.save()
ctx.fillStyle = this.fillStyle; ctx.fillStyle = this.fillStyle
ctx.strokeStyle = this.strokeStyle; ctx.strokeStyle = this.strokeStyle
ctx.beginPath(); ctx.beginPath()
for (var i = 0; i < this.points.length; ++i) { for (let i = 0; i < this.points.length; ++i) {
if (i) { if (i) {
ctx.lineTo(this.points[i].x, this.points[i].y); ctx.lineTo(this.points[i].x, this.points[i].y)
} } else {
else { ctx.moveTo(this.points[i].x, this.points[i].y)
ctx.moveTo(this.points[i].x, this.points[i].y);
} }
} }
ctx.closePath(); ctx.closePath()
this.fillStyle && ctx.fill(); this.fillStyle && ctx.fill()
ctx.stroke(); ctx.stroke()
ctx.restore(); ctx.restore()
}; }
return Surface; return Surface
}()); }())
export { Surface }; export { Surface }
var Cube = /** @class */ (function () { const Cube = /** @class */ (function () {
function Cube(rect, z, zRotate, fillStyle, strokeStyle) { function Cube (rect, z, zRotate, fillStyle, strokeStyle) {
if (fillStyle === void 0) { fillStyle = '#ddd'; } if (fillStyle === void 0) { fillStyle = '#ddd' }
if (strokeStyle === void 0) { strokeStyle = '#ccc'; } if (strokeStyle === void 0) { strokeStyle = '#ccc' }
this.surfaces = []; this.surfaces = []
var offset = z * Math.sin((45 * Math.PI) / 180); const offset = z * Math.sin((45 * Math.PI) / 180)
var p1 = new Point(rect.x, rect.y + offset); const p1 = new Point(rect.x, rect.y + offset)
var p2 = new Point(rect.ex - offset, rect.y + offset); const p2 = new Point(rect.ex - offset, rect.y + offset)
var p3 = new Point(rect.ex - offset, rect.ey); const p3 = new Point(rect.ex - offset, rect.ey)
var p4 = new Point(rect.x, rect.ey); const p4 = new Point(rect.x, rect.ey)
// front // front
this.surfaces.push(new Surface(p1, p2, p3, p4, fillStyle, strokeStyle)); this.surfaces.push(new Surface(p1, p2, p3, p4, fillStyle, strokeStyle))
// up // 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 // 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) { Cube.prototype.render = function (ctx) {
for (var _i = 0, _a = this.surfaces; _i < _a.length; _i++) { for (let _i = 0, _a = this.surfaces; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
item.render(ctx); item.render(ctx)
} }
}; }
return Cube; return Cube
}()); }())
export { Cube }; export { Cube }
//# sourceMappingURL=cube.model.js.map // # sourceMappingURL=cube.model.js.map

View File

@@ -1,11 +1,11 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function cubeIconRect(node) { export function cubeIconRect (node) {
node.fullIconRect = node.fullTextRect; node.fullIconRect = node.fullTextRect
node.iconRect = new Rect(node.fullIconRect.x, node.fullIconRect.y, node.fullIconRect.width, (node.fullIconRect.height * 2) / 3); node.iconRect = new Rect(node.fullIconRect.x, node.fullIconRect.y, node.fullIconRect.width, (node.fullIconRect.height * 2) / 3)
} }
export function cubeTextRect(node) { export function cubeTextRect (node) {
var offset = node.z * Math.sin((45 * Math.PI) / 180); 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.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); 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 // # sourceMappingURL=cube.rect.js.map

View File

@@ -1,11 +1,11 @@
export function diamond(ctx, node) { export function diamond (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y); 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, 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.width / 2, node.rect.y + node.rect.height)
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2); ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=diamond.js.map // # sourceMappingURL=diamond.js.map

View File

@@ -1,27 +1,26 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function diamondIconRect(node) { export function diamondIconRect (node) {
var w = node.rect.width / 3; let w = node.rect.width / 3
var h = node.rect.height / 3; let h = node.rect.height / 3
if (w > h) { if (w > h) {
w = h; w = h
} else {
h = w
} }
else { let top = node.rect.width / 5
h = w;
}
var top = node.rect.width / 5;
if (top < 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 diamondTextRect(node) { export function diamondTextRect (node) {
var bottom = node.rect.height / 10; let bottom = node.rect.height / 10
if (bottom < 5) { 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); 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; const w = node.rect.width / 2
var h = (node.rect.height * 1) / 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); 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 // # sourceMappingURL=diamond.rect.js.map

View File

@@ -1,16 +1,16 @@
export function file(ctx, node) { export function file (ctx, node) {
ctx.beginPath(); ctx.beginPath()
var offsetX = node.rect.width / 6; const offsetX = node.rect.width / 6
ctx.moveTo(node.rect.x, node.rect.y); ctx.moveTo(node.rect.x, node.rect.y)
ctx.lineTo(node.rect.ex - offsetX, 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.y + offsetX);
ctx.lineTo(node.rect.ex, node.rect.ey); (node.fillStyle || node.bkType) && ctx.fill()
ctx.lineTo(node.rect.x, node.rect.ey); ctx.stroke()
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();
} }
//# sourceMappingURL=file.js.map // # sourceMappingURL=file.js.map

View File

@@ -1,18 +1,17 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function graffitiAnchors(node) { export function graffitiAnchors (node) {
if (!node.points || !node.points.length) { if (!node.points || !node.points.length) {
return; return
} }
var pt1 = node.points[0]; const pt1 = node.points[0]
var pt2 = node.points[node.points.length - 1]; const pt2 = node.points[node.points.length - 1]
if (pt1.x < pt2.x) { if (pt1.x < pt2.x) {
node.anchors.push(new Point(pt1.x, pt1.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)); node.anchors.push(new Point(pt2.x, pt2.y, Direction.Right))
} } else {
else { node.anchors.push(new Point(pt1.x, pt1.y, Direction.Right))
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(pt2.x, pt2.y, Direction.Left));
} }
} }
//# sourceMappingURL=graffiti.anchor.js.map // # sourceMappingURL=graffiti.anchor.js.map

View File

@@ -1,14 +1,14 @@
export function graffiti(ctx, node) { export function graffiti (ctx, node) {
if (!node.points || !node.points[0]) { if (!node.points || !node.points[0]) {
return; return
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.points[0].x, node.points[0].y); ctx.moveTo(node.points[0].x, node.points[0].y)
node.points.forEach(function (pt) { node.points.forEach(function (pt) {
ctx.lineTo(pt.x, pt.y); ctx.lineTo(pt.x, pt.y)
}); })
node['closePath'] && !node['doing'] && ctx.closePath(); node.closePath && !node.doing && ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=graffiti.js.map // # sourceMappingURL=graffiti.js.map

View File

@@ -1,21 +1,21 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function hexagonAnchors(node) { 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 / 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, 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 / 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.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); const ptLT = new Point(node.rect.x + node.rect.width / 10, node.rect.y + node.rect.height / 4, Direction.Left)
ptLT.hidden = true; ptLT.hidden = true
node.anchors.push(ptLT); 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); const ptRT = new Point(node.rect.x + node.rect.width / 10, node.rect.y + (node.rect.height * 3) / 4, Direction.Left)
ptRT.hidden = true; ptRT.hidden = true
node.anchors.push(ptRT); 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); const ptLB = new Point(node.rect.x + (node.rect.width * 9) / 10, node.rect.y + node.rect.height / 4, Direction.Right)
ptLB.hidden = true; ptLB.hidden = true
node.anchors.push(ptLB); 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); 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; ptRB.hidden = true
node.anchors.push(ptRB); node.anchors.push(ptRB)
} }
//# sourceMappingURL=hexagon.anchor.js.map // # sourceMappingURL=hexagon.anchor.js.map

View File

@@ -1,14 +1,14 @@
export function hexagon(ctx, node) { export function hexagon (ctx, node) {
ctx.beginPath(); ctx.beginPath()
var pos = node.rect.width / 5; const pos = node.rect.width / 5
ctx.moveTo(node.rect.x + pos, node.rect.y); 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 - 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, 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 + 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 + pos, node.rect.y + node.rect.height)
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2); ctx.lineTo(node.rect.x, node.rect.y + node.rect.height / 2)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=hexagon.js.map // # sourceMappingURL=hexagon.js.map

View File

@@ -1,14 +1,14 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function hexagonIconRect(node) { export function hexagonIconRect (node) {
var w = (node.rect.width * 3) / 5; const w = (node.rect.width * 3) / 5
var h = (node.rect.height * 3) / 4; 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.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); 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) { export function hexagonTextRect (node) {
var w = (node.rect.width * 3) / 5; const w = (node.rect.width * 3) / 5
var h = node.rect.height / 4; 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.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); 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 // # sourceMappingURL=hexagon.rect.js.map

View File

@@ -1,19 +1,18 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function imageAnchors(node) { export function imageAnchors (node) {
var textWidth = 0; let textWidth = 0
var textHeight = 0; let textHeight = 0
if (node.text) { if (node.text) {
if (node.paddingRightNum) { if (node.paddingRightNum) {
textWidth = node.paddingRightNum; textWidth = node.paddingRightNum
} } else {
else { textHeight = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1)
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.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) / 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, 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.width - textWidth) / 2, node.rect.y + node.rect.height - textHeight, Direction.Bottom))
} }
//# sourceMappingURL=image.anchor.js.map // # sourceMappingURL=image.anchor.js.map

View File

@@ -1,27 +1,25 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function imageIconRect(node) { export function imageIconRect (node) {
var textWidth = 0; let textWidth = 0
var textHeight = 0; let textHeight = 0
if (node.text) { if (node.text) {
if (node.paddingRightNum) { if (node.paddingRightNum) {
textWidth = node.paddingRightNum; textWidth = node.paddingRightNum
} } else {
else { textHeight = node.paddingBottomNum || node.lineHeight * node.fontSize * (node.textMaxLine || 1)
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.iconRect = new Rect(node.rect.x, node.rect.y, node.rect.width - textWidth, node.rect.height - textHeight)
node.fullIconRect = node.rect; node.fullIconRect = node.rect
} }
export function imageTextRect(node) { export function imageTextRect (node) {
if (node.paddingRightNum) { if (node.paddingRightNum) {
var width = node.paddingRightNum - 5; 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); 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 { node.fullTextRect = node.rect
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;
} }
//# sourceMappingURL=image.rect.js.map // # sourceMappingURL=image.rect.js.map

View File

@@ -1,14 +1,14 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function lineAnchors(node) { export function lineAnchors (node) {
var y = node.rect.y + node.rect.height / 2; 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, y, Direction.Left))
node.anchors.push(new Point(node.rect.x + node.rect.width, y, Direction.Right)); node.anchors.push(new Point(node.rect.x + node.rect.width, y, Direction.Right))
var scale = topology.data.scale || 1; // 取全局的 scale 属性 const scale = topology.data.scale || 1 // 取全局的 scale 属性
for (var i = node.rect.x + 5 * scale; i < node.rect.ex; i += 5 * scale) { for (let i = node.rect.x + 5 * scale; i < node.rect.ex; i += 5 * scale) {
var pt = new Point(i, y, Direction.Bottom); const pt = new Point(i, y, Direction.Bottom)
pt.hidden = true; pt.hidden = true
node.anchors.push(pt); node.anchors.push(pt)
} }
} }
//# sourceMappingURL=line.anchor.js.map // # sourceMappingURL=line.anchor.js.map

View File

@@ -1,8 +1,8 @@
export function line(ctx, node) { export function line (ctx, node) {
ctx.beginPath(); ctx.beginPath()
var y = node.rect.y + node.rect.height / 2; const y = node.rect.y + node.rect.height / 2
ctx.moveTo(node.rect.x, y); ctx.moveTo(node.rect.x, y)
ctx.lineTo(node.rect.x + node.rect.width, y); ctx.lineTo(node.rect.x + node.rect.width, y)
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=line.js.map // # sourceMappingURL=line.js.map

View File

@@ -1,9 +1,9 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function lineIconRect(node) { export function lineIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function lineTextRect(node) { 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.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.textRect = node.fullTextRect
} }
//# sourceMappingURL=line.rect.js.map // # sourceMappingURL=line.rect.js.map

View File

@@ -1,27 +1,25 @@
export function lines(ctx, node) { export function lines (ctx, node) {
if (!node.points || !node.points[1]) { if (!node.points || !node.points[1]) {
return; return
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.points[0].x, node.points[0].y); ctx.moveTo(node.points[0].x, node.points[0].y)
for (var i = 1; i < node.points.length;) { for (let i = 1; i < node.points.length;) {
// curve 控制点 // curve 控制点
if (node.points[i].data) { if (node.points[i].data) {
if (node.points[i + 2]) { 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); 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; i += 2
} else {
break
} }
else { } else {
break; ctx.lineTo(node.points[i].x, node.points[i].y)
++i
} }
} }
else { node.closePath && !node.doing && ctx.closePath();
ctx.lineTo(node.points[i].x, node.points[i].y); (node.fillStyle || node.bkType) && ctx.fill()
++i; ctx.stroke()
}
}
node['closePath'] && !node['doing'] && ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill();
ctx.stroke();
} }
//# sourceMappingURL=lines.js.map // # sourceMappingURL=lines.js.map

View File

@@ -1,9 +1,9 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function messageAnchors(node) { 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.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 / 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, 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.width / 4, node.rect.ey, Direction.Bottom))
} }
//# sourceMappingURL=message.anchor.js.map // # sourceMappingURL=message.anchor.js.map

View File

@@ -1,14 +1,14 @@
export function message(ctx, node) { export function message (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x, node.rect.y); 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)
ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + (node.rect.height * 3) / 4); 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 * 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 / 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.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.lineTo(node.rect.x, node.rect.y + (node.rect.height * 3) / 4)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=message.js.map // # sourceMappingURL=message.js.map

View File

@@ -1,10 +1,10 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function messageIconRect(node) { export function messageIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
node.fullIconRect = node.iconRect; node.fullIconRect = node.iconRect
} }
export function messageTextRect(node) { 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.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.fullTextRect = node.textRect
} }
//# sourceMappingURL=message.rect.js.map // # sourceMappingURL=message.rect.js.map

View File

@@ -1,6 +1,6 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
export function mindLineAnchors(node) { 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.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.width, node.rect.y + node.rect.height, 2))
} }
//# sourceMappingURL=mindLine.anchor.js.map // # sourceMappingURL=mindLine.anchor.js.map

View File

@@ -1,8 +1,8 @@
export function mindLine(ctx, node) { export function mindLine (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x, node.rect.y + node.rect.height); 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.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height)
ctx.closePath(); ctx.closePath()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=mindLine.js.map // # sourceMappingURL=mindLine.js.map

View File

@@ -1,72 +1,68 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function mindNodeAnchors(node) { 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++) { for (var i = 0; i < topN; i++) {
if (i === 2) { if (i === 2) {
continue; continue
} }
var x = node.rect.x + (node.rect.width * (i + 1)) / (topN + 1); var x = node.rect.x + (node.rect.width * (i + 1)) / (topN + 1)
var y = node.rect.y; var y = node.rect.y
if (x < node.rect.x + r) { if (x < node.rect.x + r) {
// 在左侧圆角 // 在左侧圆角
y = getYByCircle(node.rect.x + r, y + r, x, r, -1); y = getYByCircle(node.rect.x + r, y + r, x, r, -1)
} } else if (x > node.rect.x + node.rect.width - r) {
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++) { for (var i = 0; i < rightN; i++) {
var y = node.rect.y + (node.rect.height * (i + 1)) / (rightN + 1); var y = node.rect.y + (node.rect.height * (i + 1)) / (rightN + 1)
var x = node.rect.x + node.rect.width; var x = node.rect.x + node.rect.width
if (y < node.rect.y + r) { if (y < node.rect.y + r) {
// 在上侧圆角以内 // 在上侧圆角以内
x = getXByCircle(x - r, node.rect.y + r, y, r); x = getXByCircle(x - r, node.rect.y + r, y, r)
} } else if (y > node.rect.y + node.rect.height - 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++) { for (var i = 0; i < bottomN; i++) {
if (i === 2) { if (i === 2) {
continue; continue
} }
var x = node.rect.x + (node.rect.width * (i + 1)) / (bottomN + 1); var x = node.rect.x + (node.rect.width * (i + 1)) / (bottomN + 1)
var y = node.rect.y + node.rect.height; var y = node.rect.y + node.rect.height
if (x < node.rect.x + r) { if (x < node.rect.x + r) {
// 在左侧圆角 // 在左侧圆角
y = getYByCircle(node.rect.x + r, y - r, x, r); y = getYByCircle(node.rect.x + r, y - r, x, r)
} } else if (x > node.rect.x + node.rect.width - 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++) { for (var i = 0; i < leftN; i++) {
var y = node.rect.y + (node.rect.height * (i + 1)) / (leftN + 1); var y = node.rect.y + (node.rect.height * (i + 1)) / (leftN + 1)
var x = node.rect.x; var x = node.rect.x
if (y < node.rect.y + r) { if (y < node.rect.y + r) {
// 在上侧圆角以内 // 在上侧圆角以内
x = getXByCircle(x + r, node.rect.y + r, y, r, -1); x = getXByCircle(x + r, node.rect.y + r, y, r, -1)
} } else if (y > node.rect.y + node.rect.height - r) {
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))
} }
} }
/** /**
@@ -74,21 +70,21 @@ export function mindNodeAnchors(node) {
* @param node 元素 * @param node 元素
* @returns 元素实际半径 * @returns 元素实际半径
*/ */
function borderRadius(node) { function borderRadius (node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
return r; return r
} }
/** /**
* 获取圆的 x 坐标 * 获取圆的 x 坐标
@@ -98,9 +94,9 @@ function borderRadius(node) {
* @param r 半径 * @param r 半径
* @param sqrt 点可能在左侧,左侧填-1右侧1默认值 * @param sqrt 点可能在左侧,左侧填-1右侧1默认值
*/ */
function getXByCircle(ox, oy, y, r, sqrt) { function getXByCircle (ox, oy, y, r, sqrt) {
if (sqrt === void 0) { sqrt = 1; } if (sqrt === void 0) { sqrt = 1 }
return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((y - oy), 2)) + ox; return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((y - oy), 2)) + ox
} }
/** /**
* 获取圆的 y 坐标 * 获取圆的 y 坐标
@@ -110,8 +106,8 @@ function getXByCircle(ox, oy, y, r, sqrt) {
* @param r 半径 * @param r 半径
* @param sqrt 点可以在上侧,也可能在下侧,上侧-1下侧1默认 * @param sqrt 点可以在上侧,也可能在下侧,上侧-1下侧1默认
*/ */
function getYByCircle(ox, oy, x, r, sqrt) { function getYByCircle (ox, oy, x, r, sqrt) {
if (sqrt === void 0) { sqrt = 1; } if (sqrt === void 0) { sqrt = 1 }
return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((x - ox), 2)) + oy; return sqrt * Math.sqrt(Math.pow(r, 2) - Math.pow((x - ox), 2)) + oy
} }
//# sourceMappingURL=mindNode.anchor.js.map // # sourceMappingURL=mindNode.anchor.js.map

View File

@@ -1,10 +1,10 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function pentagonAnchors(node) { 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 / 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, 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 * 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.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.y + (node.rect.height * 2) / 5, Direction.Left))
} }
//# sourceMappingURL=pentagon.anchor.js.map // # sourceMappingURL=pentagon.anchor.js.map

View File

@@ -1,12 +1,12 @@
export function pentagon(ctx, node) { export function pentagon (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y); 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, 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 * 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.width / 5, node.rect.y + node.rect.height)
ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 5); ctx.lineTo(node.rect.x, node.rect.y + (node.rect.height * 2) / 5)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=pentagon.js.map // # sourceMappingURL=pentagon.js.map

View File

@@ -1,23 +1,22 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function pentagonIconRect(node) { export function pentagonIconRect (node) {
var w = node.rect.width / 2; let w = node.rect.width / 2
var h = node.rect.height / 2; let h = node.rect.height / 2
if (w > h) { if (w > h) {
w = h; w = h
} else {
h = w
} }
else { let top = node.rect.height / 7
h = w;
}
var top = node.rect.height / 7;
if (top < 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 pentagonTextRect(node) { 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); 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; const w = (node.rect.width * 3) / 5
var h = (node.rect.height * 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); 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 // # sourceMappingURL=pentagon.rect.js.map

View File

@@ -1,10 +1,10 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function pentagramAnchors(node) { 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 / 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) / 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 * 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 * 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 + 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 // # sourceMappingURL=pentagram.anchor.js.map

View File

@@ -1,11 +1,11 @@
export function pentagram(ctx, node) { export function pentagram (ctx, node) {
ctx.beginPath(); ctx.beginPath()
for (var i = 0; i < 5; ++i) { 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(((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.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(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=pentagram.js.map // # sourceMappingURL=pentagram.js.map

View File

@@ -1,11 +1,11 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function pentagramIconRect(node) { export function pentagramIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function pentagramTextRect(node) { export function pentagramTextRect (node) {
var w = (node.rect.width * 2) / 5; const w = (node.rect.width * 2) / 5
var h = (node.rect.height * 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.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; node.textRect = node.fullTextRect
} }
//# sourceMappingURL=pentagram.rect.js.map // # sourceMappingURL=pentagram.rect.js.map

View File

@@ -1,17 +1,17 @@
export function people(ctx, node) { export function people (ctx, node) {
ctx.beginPath(); ctx.beginPath()
var r = node.rect.width / 4; const r = node.rect.width / 4
var middle = node.rect.x + node.rect.width / 2; const middle = node.rect.x + node.rect.width / 2
ctx.arc(middle, node.rect.y + r, r, 0, Math.PI * 2); ctx.arc(middle, node.rect.y + r, r, 0, Math.PI * 2)
ctx.moveTo(node.rect.x, node.rect.y + r * 3); ctx.moveTo(node.rect.x, node.rect.y + r * 3)
ctx.lineTo(node.rect.ex, node.rect.y + r * 3); ctx.lineTo(node.rect.ex, node.rect.y + r * 3)
ctx.moveTo(middle, node.rect.y + r * 2); ctx.moveTo(middle, node.rect.y + r * 2)
ctx.lineTo(middle, node.rect.y + r * 4); ctx.lineTo(middle, node.rect.y + r * 4)
ctx.moveTo(middle, node.rect.y + r * 4); ctx.moveTo(middle, node.rect.y + r * 4)
ctx.lineTo(node.rect.x, node.rect.ey); ctx.lineTo(node.rect.x, node.rect.ey)
ctx.moveTo(middle, node.rect.y + r * 4); ctx.moveTo(middle, node.rect.y + r * 4)
ctx.lineTo(node.rect.ex, node.rect.ey); ctx.lineTo(node.rect.ex, node.rect.ey);
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=people.js.map // # sourceMappingURL=people.js.map

View File

@@ -1,9 +1,9 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function peopleIconRect(node) { export function peopleIconRect (node) {
node.iconRect = new Rect(0, 0, 0, 0); node.iconRect = new Rect(0, 0, 0, 0)
} }
export function peopleTextRect(node) { export function peopleTextRect (node) {
node.textRect = undefined; node.textRect = undefined
node.fullTextRect = node.textRect; node.fullTextRect = node.textRect
} }
//# sourceMappingURL=people.rect.js.map // # sourceMappingURL=people.rect.js.map

View File

@@ -1,25 +1,25 @@
export function rectangle(ctx, node) { export function rectangle (ctx, node) {
var wr = node.borderRadius; let wr = node.borderRadius
var hr = node.borderRadius; let hr = node.borderRadius
if (node.borderRadius < 1) { if (node.borderRadius < 1) {
wr = node.rect.width * node.borderRadius; wr = node.rect.width * node.borderRadius
hr = node.rect.height * 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) { if (node.rect.width < 2 * r) {
r = node.rect.width / 2; r = node.rect.width / 2
} }
if (node.rect.height < 2 * r) { if (node.rect.height < 2 * r) {
r = node.rect.height / 2; r = node.rect.height / 2
} }
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + r, node.rect.y); 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.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.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.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.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=rectangle.js.map // # sourceMappingURL=rectangle.js.map

View File

@@ -1,11 +1,11 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function rectangleIconRect(node) { 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.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.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) { export function rectangleTextRect (node) {
var height = node.rect.height - node.paddingTopNum - node.paddingBottomNum; 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.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); 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 // # sourceMappingURL=rectangle.rect.js.map

View File

@@ -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. // getWords: Get the word array from text. A single Chinese character is a word.
export function getWords(txt) { export function getWords (txt) {
var words = []; const words = []
var word = ''; let word = ''
if (!txt) { if (!txt) {
txt = ''; txt = ''
} }
for (var i = 0; i < txt.length; ++i) { for (let i = 0; i < txt.length; ++i) {
var ch = txt.charCodeAt(i); const ch = txt.charCodeAt(i)
if (ch < 33 || ch > 126) { if (ch < 33 || ch > 126) {
if (word) { if (word) {
words.push(word); words.push(word)
word = ''; word = ''
} }
words.push(txt[i]); words.push(txt[i])
continue; continue
} } else {
else { word += txt[i]
word += txt[i];
} }
} }
if (word) { if (word) {
words.push(word); words.push(word)
} }
return words; return words
} }
// getWrapLines: Get the lines by wrap. // getWrapLines: Get the lines by wrap.
// words - the word array of text, to avoid spliting a word. // words - the word array of text, to avoid spliting a word.
// maxWidth - the max width of the rect. // maxWidth - the max width of the rect.
export function getWrapLines(ctx, words, maxWidth, fontSize) { export function getWrapLines (ctx, words, maxWidth, fontSize) {
var lines = []; const lines = []
var currentLine = words[0] || ''; let currentLine = words[0] || ''
for (var i = 1; i < words.length; ++i) { for (let i = 1; i < words.length; ++i) {
var word = words[i] || ''; const word = words[i] || ''
var text_1 = currentLine + word; const text_1 = currentLine + word
var chinese = text_1.match(/[\u4e00-\u9fa5]/g) || ''; const chinese = text_1.match(/[\u4e00-\u9fa5]/g) || ''
var chineseLen = chinese.length; const chineseLen = chinese.length
if ((text_1.length - chineseLen) * fontSize * 0.5 + chineseLen * fontSize < maxWidth) { if ((text_1.length - chineseLen) * fontSize * 0.5 + chineseLen * fontSize < maxWidth) {
currentLine += word; currentLine += word
} } else {
else { lines.push(currentLine)
lines.push(currentLine); currentLine = word
currentLine = word;
} }
} }
lines.push(currentLine); lines.push(currentLine)
return lines; return lines
} }
export function getLines(ctx, pen) { export function getLines (ctx, pen) {
if (pen.text && !pen.text.split) { if (pen.text && !pen.text.split) {
pen.text += ''; pen.text += ''
} }
var lines = []; let lines = []
switch (pen.whiteSpace) { switch (pen.whiteSpace) {
case 'nowrap': case 'nowrap':
lines.push(pen.text); lines.push(pen.text)
break; break
case 'pre-line': case 'pre-line':
lines = pen.text.split(/[\n]/g); lines = pen.text.split(/[\n]/g)
break; break
default: default:
var textRect = pen.getTextRect(); var textRect = pen.getTextRect()
var paragraphs = pen.text.split(/[\n]/g); var paragraphs = pen.text.split(/[\n]/g)
for (var i = 0; i < paragraphs.length; ++i) { for (let i = 0; i < paragraphs.length; ++i) {
var l = getWrapLines(ctx, getWords(paragraphs[i]), textRect.width, pen.fontSize); const l = getWrapLines(ctx, getWords(paragraphs[i]), textRect.width, pen.fontSize)
lines.push.apply(lines, l); lines.push.apply(lines, l)
} }
break; break
} }
return lines; return lines
} }
export function calcTextRect(ctx, pen) { export function calcTextRect (ctx, pen) {
var lines = getLines(ctx, pen); const lines = getLines(ctx, pen)
var width = 0; let width = 0
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) { for (let _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
var item = lines_1[_i]; const item = lines_1[_i]
ctx.font = (pen.fontStyle || 'normal') + " normal " + (pen.fontWeight || 'normal') + " " + pen.fontSize + "px/" + pen.lineHeight + " " + pen.fontFamily; ctx.font = (pen.fontStyle || 'normal') + ' normal ' + (pen.fontWeight || 'normal') + ' ' + pen.fontSize + 'px/' + pen.lineHeight + ' ' + pen.fontFamily
var r = ctx.measureText(item); const r = ctx.measureText(item)
var w = r.width; const w = r.width
if (w > width) { if (w > width) {
width = w; width = w
} }
} }
return { return {
width: width, 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;
} }
var w = ctx.measureText(str).width; }
ctx.save(); function textBk (ctx, str, x, y, height, color) {
ctx.fillStyle = color; if (!str || !color) {
var l = x - w / 2; return
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) { switch (ctx.textAlign) {
case 'left': case 'left':
l = x; l = x
break; break
case 'right': case 'right':
l = x - w; l = x - w
break; break
} }
switch (ctx.textBaseline) { switch (ctx.textBaseline) {
case 'top': case 'top':
t = y; t = y
break; break
case 'bottom': case 'bottom':
t = y - height; t = y - height
break; break
} }
ctx.fillRect(l, t, w, height); ctx.fillRect(l, t, w, height)
ctx.restore(); ctx.restore()
} }
export function fillText(ctx, lines, x, y, width, height, lineHeight, maxLineLen, bk) { export function fillText (ctx, lines, x, y, width, height, lineHeight, maxLineLen, bk) {
if (!maxLineLen || maxLineLen > lines.length) { if (!maxLineLen || maxLineLen > lines.length) {
maxLineLen = lines.length; maxLineLen = lines.length
} else {
maxLineLen = Math.ceil(maxLineLen)
} }
else { for (let i = 0; i < maxLineLen - 1; ++i) {
maxLineLen = Math.ceil(maxLineLen);
}
for (var i = 0; i < maxLineLen - 1; ++i) {
if (bk) { 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) { if (maxLineLen < lines.length) {
var str = (lines[maxLineLen - 1] || '') + '...'; let str = (lines[maxLineLen - 1] || '') + '...'
if (lines[maxLineLen - 1] && ctx.measureText(str).width > width) { 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) { 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); ctx.fillText(str, x, y + (maxLineLen - 1) * lineHeight)
} } else {
else {
if (bk) { 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) { export function text (ctx, node) {
if (!node.text) { if (!node.text) {
return; return
} }
if (!node.text.split) { if (!node.text.split) {
node.text += ''; node.text += ''
} }
ctx.save(); ctx.save()
ctx.beginPath(); ctx.beginPath()
delete ctx.shadowColor; delete ctx.shadowColor
delete ctx.shadowBlur; delete ctx.shadowBlur
ctx.font = (node.fontStyle || 'normal') + " normal " + (node.fontWeight || 'normal') + " " + node.fontSize + "px/" + node.lineHeight + " " + node.fontFamily; ctx.font = (node.fontStyle || 'normal') + ' normal ' + (node.fontWeight || 'normal') + ' ' + node.fontSize + 'px/' + node.lineHeight + ' ' + node.fontFamily
if (node.fontColor) { if (node.fontColor) {
ctx.fillStyle = node.fontColor; ctx.fillStyle = node.fontColor
} } else {
else { ctx.fillStyle = Store.get(node.generateStoreKey('LT:fontColor'))
ctx.fillStyle = Store.get(node.generateStoreKey('LT:fontColor'));
} }
if (node.textAlign) { if (node.textAlign) {
ctx.textAlign = node.textAlign; ctx.textAlign = node.textAlign
} }
if (node.textBaseline) { if (node.textBaseline) {
ctx.textBaseline = node.textBaseline; ctx.textBaseline = node.textBaseline
} }
var textRect = node.getTextRect(); const textRect = node.getTextRect()
if (!textRect) { if (!textRect) {
ctx.restore(); ctx.restore()
return; return
} }
var lines = getLines(ctx, node); const lines = getLines(ctx, node)
var lineHeight = node.fontSize * node.lineHeight; const lineHeight = node.fontSize * node.lineHeight
var maxLineLen = node.textMaxLine > 0 && node.textMaxLine < lines.length ? node.textMaxLine : lines.length; const maxLineLen = node.textMaxLine > 0 && node.textMaxLine < lines.length ? node.textMaxLine : lines.length
// By default, the text is center aligned. // By default, the text is center aligned.
var x = textRect.x + textRect.width / 2; let x = textRect.x + textRect.width / 2
var y = textRect.y + (textRect.height - lineHeight * maxLineLen) / 2 + (lineHeight * 4) / 7; let y = textRect.y + (textRect.height - lineHeight * maxLineLen) / 2 + (lineHeight * 4) / 7
switch (ctx.textAlign) { switch (ctx.textAlign) {
case 'left': case 'left':
x = textRect.x; x = textRect.x
break; break
case 'right': case 'right':
x = textRect.x + textRect.width; x = textRect.x + textRect.width
break; break
} }
switch (ctx.textBaseline) { switch (ctx.textBaseline) {
case 'top': case 'top':
y = textRect.y + (lineHeight - node.fontSize) / 2; y = textRect.y + (lineHeight - node.fontSize) / 2
break; break
case 'bottom': case 'bottom':
y = textRect.ey - lineHeight * maxLineLen + lineHeight; y = textRect.ey - lineHeight * maxLineLen + lineHeight
break; break
} }
fillText(ctx, lines, x + node.textOffsetX, y + node.textOffsetY, textRect.width, textRect.height, lineHeight, maxLineLen, node.textBackground); fillText(ctx, lines, x + node.textOffsetX, y + node.textOffsetY, textRect.width, textRect.height, lineHeight, maxLineLen, node.textBackground)
ctx.restore(); ctx.restore()
} }
export function iconfont(ctx, node) { export function iconfont (ctx, node) {
ctx.save(); ctx.save()
ctx.textAlign = 'center'; ctx.textAlign = 'center'
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle'
var iconRect = node.getIconRect(); const iconRect = node.getIconRect()
var x = iconRect.x + iconRect.width / 2; let x = iconRect.x + iconRect.width / 2
var y = iconRect.y + iconRect.height / 2; let y = iconRect.y + iconRect.height / 2
switch (node.imageAlign) { switch (node.imageAlign) {
case 'top': case 'top':
y = iconRect.y; y = iconRect.y
ctx.textBaseline = 'top'; ctx.textBaseline = 'top'
break; break
case 'bottom': case 'bottom':
y = iconRect.ey; y = iconRect.ey
ctx.textBaseline = 'bottom'; ctx.textBaseline = 'bottom'
break; break
case 'left': case 'left':
x = iconRect.x; x = iconRect.x
ctx.textAlign = 'left'; ctx.textAlign = 'left'
break; break
case 'right': case 'right':
x = iconRect.ex; x = iconRect.ex
ctx.textAlign = 'right'; ctx.textAlign = 'right'
break; break
case 'left-top': case 'left-top':
x = iconRect.x; x = iconRect.x
y = iconRect.y; y = iconRect.y
ctx.textAlign = 'left'; ctx.textAlign = 'left'
ctx.textBaseline = 'top'; ctx.textBaseline = 'top'
break; break
case 'right-top': case 'right-top':
x = iconRect.ex; x = iconRect.ex
y = iconRect.y; y = iconRect.y
ctx.textAlign = 'right'; ctx.textAlign = 'right'
ctx.textBaseline = 'top'; ctx.textBaseline = 'top'
break; break
case 'left-bottom': case 'left-bottom':
x = iconRect.x; x = iconRect.x
y = iconRect.ey; y = iconRect.ey
ctx.textAlign = 'left'; ctx.textAlign = 'left'
ctx.textBaseline = 'bottom'; ctx.textBaseline = 'bottom'
break; break
case 'right-bottom': case 'right-bottom':
x = iconRect.ex; x = iconRect.ex
y = iconRect.ey; y = iconRect.ey
ctx.textAlign = 'right'; ctx.textAlign = 'right'
ctx.textBaseline = 'bottom'; ctx.textBaseline = 'bottom'
break; break
} }
if (node.iconSize > 0) { 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.fillStyle = node.iconColor || Store.get(node.generateStoreKey('LT:iconColor')) || node.fontColor
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;
if (node.iconRotate) { if (node.iconRotate) {
ctx.translate(iconRect.center.x, iconRect.center.y); ctx.translate(iconRect.center.x, iconRect.center.y)
ctx.rotate((node.iconRotate * Math.PI) / 180); ctx.rotate((node.iconRotate * Math.PI) / 180)
ctx.translate(-iconRect.center.x, -iconRect.center.y); ctx.translate(-iconRect.center.x, -iconRect.center.y)
} }
ctx.beginPath(); ctx.beginPath()
ctx.fillText(node.icon, x, y); ctx.fillText(node.icon, x, y)
ctx.restore(); ctx.restore()
} }
//# sourceMappingURL=text.js.map // # sourceMappingURL=text.js.map

View File

@@ -1,9 +1,9 @@
import { Point } from '../../models/point'; import { Point } from '../../models/point'
import { Direction } from '../../models/direction'; import { Direction } from '../../models/direction'
export function triangleAnchors(node) { 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 / 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 * 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 / 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 / 4, node.rect.y + node.rect.height / 2, Direction.Left))
} }
//# sourceMappingURL=triangle.anchor.js.map // # sourceMappingURL=triangle.anchor.js.map

View File

@@ -1,10 +1,10 @@
export function triangle(ctx, node) { export function triangle (ctx, node) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(node.rect.x + node.rect.width / 2, node.rect.y); 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.width, node.rect.y + node.rect.height)
ctx.lineTo(node.rect.x, node.rect.y + node.rect.height); ctx.lineTo(node.rect.x, node.rect.y + node.rect.height)
ctx.closePath(); ctx.closePath();
(node.fillStyle || node.bkType) && ctx.fill(); (node.fillStyle || node.bkType) && ctx.fill()
ctx.stroke(); ctx.stroke()
} }
//# sourceMappingURL=triangle.js.map // # sourceMappingURL=triangle.js.map

View File

@@ -1,23 +1,22 @@
import { Rect } from '../../models/rect'; import { Rect } from '../../models/rect'
export function triangleIconRect(node) { export function triangleIconRect (node) {
var w = (node.rect.width * 2) / 7; let w = (node.rect.width * 2) / 7
var h = (node.rect.height * 2) / 7; let h = (node.rect.height * 2) / 7
if (w > h) { if (w > h) {
w = h; w = h
} else {
h = w
} }
else { let top = w
h = w;
}
var top = w;
if (top < 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 triangleTextRect(node) { 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); 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; const w = node.rect.width / 2
var h = (node.rect.height * 3) / 7; 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); 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 // # sourceMappingURL=triangle.rect.js.map

View File

@@ -1,11 +1,11 @@
import { Node } from './node'; import { Node } from './node'
import { Line } from './line'; import { Line } from './line'
import { Lock } from './status'; import { Lock } from './status'
import { s8 } from '../utils'; import { s8 } from '../utils'
import { Store } from 'le5le-store'; import { Store } from 'le5le-store'
import { Rect } from './rect'; import { Rect } from './rect'
export function createData(json, tid) { export function createData (json, tid) {
var data = { let data = {
pens: [], pens: [],
lineName: 'curve', lineName: 'curve',
fromArrow: '', fromArrow: '',
@@ -13,55 +13,52 @@ export function createData(json, tid) {
scale: 1, scale: 1,
locked: Lock.None, locked: Lock.None,
x: 0, x: 0,
y: 0, y: 0
};
if (typeof json === 'string') {
json = JSON.parse(json);
} }
data = Object.assign(data, json); if (typeof json === 'string') {
data.pens = []; json = JSON.parse(json)
}
data = Object.assign(data, json)
data.pens = []
if (json) { if (json) {
// for old data. // for old data.
if (json.nodes) { if (json.nodes) {
for (var _i = 0, _a = json.nodes; _i < _a.length; _i++) { for (let _i = 0, _a = json.nodes; _i < _a.length; _i++) {
var item = _a[_i]; var item = _a[_i]
item.TID = tid; item.TID = tid
data.pens.push(new Node(item)); data.pens.push(new Node(item))
} }
for (var _b = 0, _c = json.lines; _b < _c.length; _b++) { for (let _b = 0, _c = json.lines; _b < _c.length; _b++) {
var item = _c[_b]; var item = _c[_b]
item.TID = tid; item.TID = tid
data.pens.push(new Line(item)); data.pens.push(new Line(item))
} }
} }
// end. // end.
json.pens && json.pens.forEach(function (item) { json.pens && json.pens.forEach(function (item) {
tid && (item.TID = tid); tid && (item.TID = tid)
if (!item.type) { 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) { 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) { if (data.mqttOptions) {
var opts = ''; let opts = ''
if (typeof data.mqttOptions === 'object') { if (typeof data.mqttOptions === 'object') {
opts = JSON.stringify(data.mqttOptions); opts = JSON.stringify(data.mqttOptions)
} else {
opts = data.mqttOptions + ''
} }
else { data.mqttOptions = JSON.parse(opts)
opts = data.mqttOptions + ''; } else {
data.mqttOptions = { clientId: s8() }
} }
data.mqttOptions = JSON.parse(opts); tid && Store.set(tid + '-topology-data', data)
} return data
else {
data.mqttOptions = { clientId: s8() };
}
tid && Store.set(tid + '-topology-data', data);
return data;
} }
//# sourceMappingURL=data.js.map // # sourceMappingURL=data.js.map

View File

@@ -1,9 +1,9 @@
export var Direction; export var Direction;
(function (Direction) { (function (Direction) {
Direction[Direction["None"] = 0] = "None"; Direction[Direction.None = 0] = 'None'
Direction[Direction["Up"] = 1] = "Up"; Direction[Direction.Up = 1] = 'Up'
Direction[Direction["Right"] = 2] = "Right"; Direction[Direction.Right = 2] = 'Right'
Direction[Direction["Bottom"] = 3] = "Bottom"; Direction[Direction.Bottom = 3] = 'Bottom'
Direction[Direction["Left"] = 4] = "Left"; Direction[Direction.Left = 4] = 'Left'
})(Direction || (Direction = {})); })(Direction || (Direction = {}))
//# sourceMappingURL=direction.js.map // # sourceMappingURL=direction.js.map

View File

@@ -1,21 +1,21 @@
export var EventType; export var EventType;
(function (EventType) { (function (EventType) {
EventType[EventType["Click"] = 0] = "Click"; EventType[EventType.Click = 0] = 'Click'
EventType[EventType["DblClick"] = 1] = "DblClick"; EventType[EventType.DblClick = 1] = 'DblClick'
EventType[EventType["WebSocket"] = 2] = "WebSocket"; EventType[EventType.WebSocket = 2] = 'WebSocket'
EventType[EventType["Mqtt"] = 3] = "Mqtt"; EventType[EventType.Mqtt = 3] = 'Mqtt'
EventType[EventType["MoveIn"] = 4] = "MoveIn"; EventType[EventType.MoveIn = 4] = 'MoveIn'
EventType[EventType["MoveOut"] = 5] = "MoveOut"; EventType[EventType.MoveOut = 5] = 'MoveOut'
})(EventType || (EventType = {})); })(EventType || (EventType = {}))
export var EventAction; export var EventAction;
(function (EventAction) { (function (EventAction) {
EventAction[EventAction["Link"] = 0] = "Link"; EventAction[EventAction.Link = 0] = 'Link'
EventAction[EventAction["StartAnimate"] = 1] = "StartAnimate"; EventAction[EventAction.StartAnimate = 1] = 'StartAnimate'
EventAction[EventAction["Function"] = 2] = "Function"; EventAction[EventAction.Function = 2] = 'Function'
EventAction[EventAction["WindowFn"] = 3] = "WindowFn"; EventAction[EventAction.WindowFn = 3] = 'WindowFn'
EventAction[EventAction["SetProps"] = 4] = "SetProps"; EventAction[EventAction.SetProps = 4] = 'SetProps'
EventAction[EventAction["PauseAnimate"] = 5] = "PauseAnimate"; EventAction[EventAction.PauseAnimate = 5] = 'PauseAnimate'
EventAction[EventAction["StopAnimate"] = 6] = "StopAnimate"; EventAction[EventAction.StopAnimate = 6] = 'StopAnimate'
EventAction[EventAction["Emit"] = 7] = "Emit"; EventAction[EventAction.Emit = 7] = 'Emit'
})(EventAction || (EventAction = {})); })(EventAction || (EventAction = {}))
//# sourceMappingURL=event.js.map // # sourceMappingURL=event.js.map

View File

@@ -1,10 +1,10 @@
export * from './data'; export * from './data'
export * from './pen'; export * from './pen'
export * from './node'; export * from './node'
export * from './line'; export * from './line'
export * from './direction'; export * from './direction'
export * from './point'; export * from './point'
export * from './rect'; export * from './rect'
export * from './status'; export * from './status'
export * from './event'; export * from './event'
//# sourceMappingURL=index.js.map // # sourceMappingURL=index.js.map

View File

@@ -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) { var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf || extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || ({ __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]; }; function (d, b) { for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p] }
return extendStatics(d, b); return extendStatics(d, b)
}; }
return function (d, b) { return function (d, b) {
extendStatics(d, b); extendStatics(d, b)
function __() { this.constructor = d; } function __ () { this.constructor = d }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __())
}; }
})(); })()
import { Pen, PenType } from './pen'; const Line = /** @class */ (function (_super) {
import { Point } from './point'; __extends(Line, _super)
import { drawLineFns, drawArrowFns } from '../middles'; function Line (json) {
import { getBezierPoint } from '../middles/lines/curve'; const _this = _super.call(this) || this
import { Store } from 'le5le-store'; const defaultData = {
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);
function Line(json) {
var _this = _super.call(this) || this;
var defaultData = {
name: 'curve', name: 'curve',
fromArrow: '', fromArrow: '',
toArrow: '', toArrow: '',
@@ -39,513 +39,500 @@ var Line = /** @class */ (function (_super) {
animateToSize: 0, animateToSize: 0,
animateDotSize: 3, animateDotSize: 3,
textBackground: '#ffffff' textBackground: '#ffffff'
}; }
_this.fromData(defaultData, json); _this.fromData(defaultData, json)
_this.type = PenType.Line; _this.type = PenType.Line
if (json.from) { 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) { 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)) { if (json.name === 'mind' && (!json.controlPoints || json.controlPoints.length > 2)) {
json.controlPoints = undefined; json.controlPoints = undefined
_this.calcControlPoints(true); _this.calcControlPoints(true)
} }
// end // end
else if (json.controlPoints) { else if (json.controlPoints) {
_this.controlPoints = []; _this.controlPoints = []
for (var _i = 0, _a = json.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = json.controlPoints; _i < _a.length; _i++) {
var item = _a[_i]; const item = _a[_i]
_this.controlPoints.push(new Point(item.x, item.y, item.direction, item.anchorIndex, item.id)); _this.controlPoints.push(new Point(item.x, item.y, item.direction, item.anchorIndex, item.id))
} }
} }
if (json.children) { if (json.children) {
_this.children = []; _this.children = []
json.children.forEach(function (item) { 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) { Line.prototype.setFrom = function (from, fromArrow) {
if (fromArrow === void 0) { fromArrow = ''; } if (fromArrow === void 0) { fromArrow = '' }
this.from = from; this.from = from
this.fromArrow = fromArrow; this.fromArrow = fromArrow
this.textRect = undefined; this.textRect = undefined
}; }
Line.prototype.setTo = function (to, toArrow) { Line.prototype.setTo = function (to, toArrow) {
if (toArrow === void 0) { toArrow = 'triangleSolid'; } if (toArrow === void 0) { toArrow = 'triangleSolid' }
this.to = to; this.to = to
this.toArrow = toArrow; this.toArrow = toArrow
this.textRect = undefined; this.textRect = undefined
}; }
Line.prototype.calcControlPoints = function (force) { Line.prototype.calcControlPoints = function (force) {
if (this.name !== 'line' && this.manualCps && !force) { if (this.name !== 'line' && this.manualCps && !force) {
return; return
} }
this.textRect = undefined; this.textRect = undefined
if (this.from && this.to && drawLineFns[this.name]) { if (this.from && this.to && drawLineFns[this.name]) {
drawLineFns[this.name].controlPointsFn(this); drawLineFns[this.name].controlPointsFn(this)
}
} }
};
Line.prototype.draw = function (ctx) { Line.prototype.draw = function (ctx) {
if (this.animateDot) { if (this.animateDot) {
ctx.fillStyle = ctx.strokeStyle; ctx.fillStyle = ctx.strokeStyle
if (this.animateType === 'dot') { if (this.animateType === 'dot') {
ctx.beginPath(); ctx.beginPath()
ctx.arc(this.animateDot.x, this.animateDot.y, this.animateDotSize, 0, 2 * Math.PI, false); ctx.arc(this.animateDot.x, this.animateDot.y, this.animateDotSize, 0, 2 * Math.PI, false)
ctx.fill(); ctx.fill()
return; 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') { ctx.restore()
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();
} }
} }
if (!this.isAnimate && this.borderWidth > 0 && this.borderColor) { if (!this.isAnimate && this.borderWidth > 0 && this.borderColor) {
ctx.save(); ctx.save()
if (this.lineJoin) { if (this.lineJoin) {
ctx.lineJoin = this.lineJoin; ctx.lineJoin = this.lineJoin
} }
ctx.lineWidth = this.lineWidth + this.borderWidth; ctx.lineWidth = this.lineWidth + this.borderWidth
ctx.strokeStyle = this.borderColor; ctx.strokeStyle = this.borderColor
if (drawLineFns[this.name]) { if (drawLineFns[this.name]) {
drawLineFns[this.name].drawFn(ctx, this); drawLineFns[this.name].drawFn(ctx, this)
} }
ctx.restore(); ctx.restore()
} }
switch (this.strokeType) { switch (this.strokeType) {
case 1: case 1:
this.strokeLinearGradient(ctx); this.strokeLinearGradient(ctx)
break; break
} }
if ((!this.isAnimate || this.animateType !== 'comet') && drawLineFns[this.name]) { if ((!this.isAnimate || this.animateType !== 'comet') && drawLineFns[this.name]) {
if (this.lineJoin) { 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]) { if (this.fromArrow && drawArrowFns[this.fromArrow]) {
ctx.save(); ctx.save()
ctx.beginPath(); ctx.beginPath()
ctx.lineDashOffset = 0; ctx.lineDashOffset = 0
ctx.setLineDash([]); ctx.setLineDash([])
ctx.fillStyle = this.fromArrowColor || ctx.strokeStyle; ctx.fillStyle = this.fromArrowColor || ctx.strokeStyle
ctx.strokeStyle = ctx.fillStyle; ctx.strokeStyle = ctx.fillStyle
var f = this.to; var f = this.to
if (this.name === 'curve') { 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) { drawArrowFns[this.fromArrow](ctx, f, this.from, this.fromArrowSize * scale)
f = this.controlPoints[0]; ctx.restore()
}
drawArrowFns[this.fromArrow](ctx, f, this.from, this.fromArrowSize * scale);
ctx.restore();
} }
if (this.toArrow && drawArrowFns[this.toArrow]) { if (this.toArrow && drawArrowFns[this.toArrow]) {
ctx.save(); ctx.save()
ctx.beginPath(); ctx.beginPath()
ctx.lineDashOffset = 0; ctx.lineDashOffset = 0
ctx.setLineDash([]); ctx.setLineDash([])
ctx.fillStyle = this.toArrowColor || ctx.strokeStyle; ctx.fillStyle = this.toArrowColor || ctx.strokeStyle
ctx.strokeStyle = ctx.fillStyle; ctx.strokeStyle = ctx.fillStyle
var f = this.from; var f = this.from
if (this.name === 'curve') { 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') { drawArrowFns[this.toArrow](ctx, f, this.to, this.toArrowSize * scale)
f = getBezierPoint(0.96 - this.lineWidth / 100, this.from, this.controlPoints[0], this.controlPoints[1], this.to); ctx.restore()
}
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();
} }
if (this.text && !this.isAnimate) { if (this.text && !this.isAnimate) {
if (!this.textRect) { if (!this.textRect) {
this.calcTextRect(); this.calcTextRect()
}
text(ctx, this)
} }
text(ctx, this);
} }
};
Line.prototype.pointIn = function (pt) { Line.prototype.pointIn = function (pt) {
return drawLineFns[this.name].pointIn(pt, this); return drawLineFns[this.name].pointIn(pt, this)
}; }
Line.prototype.getLen = function () { Line.prototype.getLen = function () {
switch (this.name) { switch (this.name) {
case 'line': case 'line':
return lineLen(this.from, this.to); return lineLen(this.from, this.to)
case 'polyline': case 'polyline':
if (!this.controlPoints || !this.controlPoints.length) { if (!this.controlPoints || !this.controlPoints.length) {
return lineLen(this.from, this.to); return lineLen(this.from, this.to)
} }
var len = 0; var len = 0
var curPt = this.from; var curPt = this.from
for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
var pt = _a[_i]; const pt = _a[_i]
len += lineLen(curPt, pt); len += lineLen(curPt, pt)
curPt = pt; curPt = pt
} }
len += lineLen(curPt, this.to); len += lineLen(curPt, this.to)
return len | 0; return len | 0
case 'curve': case 'curve':
case 'mind': 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: default:
if (drawLineFns[this.name].getLength) { 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) { Line.prototype.strokeLinearGradient = function (ctx) {
if (!this.lineGradientFromColor || !this.lineGradientToColor) { if (!this.lineGradientFromColor || !this.lineGradientToColor) {
return; return
} }
var from = this.from; const from = this.from
var to = this.to; const to = this.to
// contributor: https://github.com/sunnyguohua/topology // contributor: https://github.com/sunnyguohua/topology
var grd = ctx.createLinearGradient(from.x, from.y, to.x, to.y); const grd = ctx.createLinearGradient(from.x, from.y, to.x, to.y)
grd.addColorStop(0, this.lineGradientFromColor); grd.addColorStop(0, this.lineGradientFromColor)
grd.addColorStop(1, this.lineGradientToColor); grd.addColorStop(1, this.lineGradientToColor)
ctx.strokeStyle = grd; ctx.strokeStyle = grd
}; }
Line.prototype.calcTextRect = function () { Line.prototype.calcTextRect = function () {
var center = this.getCenter(); const center = this.getCenter()
var width = Math.abs(this.from.x - this.to.x); let width = Math.abs(this.from.x - this.to.x)
if (width < 100) { if (width < 100) {
width = 100; width = 100
} }
if (this.text && !this.text.split) { if (this.text && !this.text.split) {
this.text += ''; this.text += ''
} }
var height = this.lineHeight * const height = this.lineHeight *
this.fontSize * this.fontSize *
(this.textMaxLine || (this.text && this.text.split('\n').length) || 1); (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.textRect = new Rect(center.x - width / 2, center.y - height / 2, width, height)
}; }
Line.prototype.getTextRect = function () { Line.prototype.getTextRect = function () {
// calc every time just in case text line is changed. // calc every time just in case text line is changed.
this.calcTextRect(); this.calcTextRect()
return this.textRect; return this.textRect
}; }
Line.prototype.getCenter = function () { 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) { switch (this.name) {
case 'line': case 'line':
center = this.getLineCenter(this.from, this.to); center = this.getLineCenter(this.from, this.to)
break; break
case 'polyline': case 'polyline':
var i = Math.round(this.controlPoints.length / 2); var i = Math.round(this.controlPoints.length / 2)
center = this.getLineCenter(this.controlPoints[i - 1] || this.from, this.controlPoints[i] || this.to); center = this.getLineCenter(this.controlPoints[i - 1] || this.from, this.controlPoints[i] || this.to)
break; break
case 'curve': case 'curve':
center = getBezierPoint(0.5, this.to, this.controlPoints[1], this.controlPoints[0], this.from); center = getBezierPoint(0.5, this.to, this.controlPoints[1], this.controlPoints[0], this.from)
break; break
default: default:
if (drawLineFns[this.name].getCenter) { 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) { 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) { Line.prototype.getPointByPos = function (pos) {
if (pos <= 0) { if (pos <= 0) {
return this.from; return this.from
} }
switch (this.name) { switch (this.name) {
case 'line': case 'line':
return this.getLinePtByPos(this.from, this.to, pos); return this.getLinePtByPos(this.from, this.to, pos)
case 'polyline': case 'polyline':
if (!this.controlPoints || !this.controlPoints.length) { if (!this.controlPoints || !this.controlPoints.length) {
return this.getLinePtByPos(this.from, this.to, pos); return this.getLinePtByPos(this.from, this.to, pos)
} } else {
else { const points = [].concat(this.controlPoints, this.to)
var points = [].concat(this.controlPoints, this.to); let curPt = this.from
var curPt = this.from; for (let _i = 0, points_1 = points; _i < points_1.length; _i++) {
for (var _i = 0, points_1 = points; _i < points_1.length; _i++) { const pt = points_1[_i]
var pt = points_1[_i]; const l = lineLen(curPt, pt)
var l = lineLen(curPt, pt);
if (pos > l) { if (pos > l) {
pos -= l; pos -= l
curPt = pt; curPt = pt
} } else {
else { return this.getLinePtByPos(curPt, pt, pos)
return this.getLinePtByPos(curPt, pt, pos);
} }
} }
return this.to; return this.to
} }
case 'curve': 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: default:
if (drawLineFns[this.name].getPointByPos) { 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) { Line.prototype.getPointByReversePos = function (pos) {
if (pos <= 0) { if (pos <= 0) {
return this.to; return this.to
} }
switch (this.name) { switch (this.name) {
case 'line': case 'line':
return this.getLinePtByPos(this.to, this.from, pos); return this.getLinePtByPos(this.to, this.from, pos)
case 'polyline': case 'polyline':
if (!this.controlPoints || !this.controlPoints.length) { if (!this.controlPoints || !this.controlPoints.length) {
return this.getLinePtByPos(this.to, this.from, pos); return this.getLinePtByPos(this.to, this.from, pos)
} } else {
else { const points_3 = []
var points_3 = [];
this.controlPoints.forEach(function (item) { this.controlPoints.forEach(function (item) {
points_3.unshift(item); points_3.unshift(item)
}); })
points_3.unshift(this.to); points_3.unshift(this.to)
var curPt = this.to; let curPt = this.to
for (var _i = 0, points_2 = points_3; _i < points_2.length; _i++) { for (let _i = 0, points_2 = points_3; _i < points_2.length; _i++) {
var pt = points_2[_i]; const pt = points_2[_i]
var l = lineLen(curPt, pt); const l = lineLen(curPt, pt)
if (pos > l) { if (pos > l) {
pos -= l; pos -= l
curPt = pt; curPt = pt
} } else {
else { return this.getLinePtByPos(curPt, pt, pos)
return this.getLinePtByPos(curPt, pt, pos);
} }
} }
return this.from; return this.from
} }
case 'curve': 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: default:
if (drawLineFns[this.name].getPointByReversePos) { 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) { Line.prototype.getLinePtByPos = function (from, to, pos) {
var length = lineLen(from, to); const length = lineLen(from, to)
if (pos <= 0) { if (pos <= 0) {
return from; return from
} }
if (pos >= length) { 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) { Line.prototype.calcRectInParent = function (parent) {
var parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum; const parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum
var parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum; const parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum
this.rectInParent = { this.rectInParent = {
x: ((this.from.x - parent.rect.x - parent.paddingLeftNum) * 100) / parentW + '%', x: ((this.from.x - parent.rect.x - parent.paddingLeftNum) * 100) / parentW + '%',
y: ((this.from.y - parent.rect.y - parent.paddingTopNum) * 100) / parentH + '%', y: ((this.from.y - parent.rect.y - parent.paddingTopNum) * 100) / parentH + '%',
width: 0, width: 0,
height: 0, height: 0,
rotate: 0, rotate: 0
}; }
}; }
// 根据父节点rect计算自己子节点的rect // 根据父节点rect计算自己子节点的rect
Line.prototype.calcRectByParent = function (parent) { Line.prototype.calcRectByParent = function (parent) {
if (!this.rectInParent) { if (!this.rectInParent) {
return; return
} }
var parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum; const parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum
var parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum; const parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum
var x = parent.rect.x + let x = parent.rect.x +
parent.paddingLeftNum + parent.paddingLeftNum +
abs(parentW, this.rectInParent.x) + abs(parentW, this.rectInParent.x) +
abs(parentW, this.rectInParent.marginLeft); abs(parentW, this.rectInParent.marginLeft)
var y = parent.rect.y + let y = parent.rect.y +
parent.paddingTopNum + parent.paddingTopNum +
abs(parentH, this.rectInParent.y) + abs(parentH, this.rectInParent.y) +
abs(parentW, this.rectInParent.marginTop); abs(parentW, this.rectInParent.marginTop)
if (this.rectInParent.marginLeft === undefined && this.rectInParent.marginRight) { 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) { 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 () { Line.prototype.initAnimate = function () {
this.animateStart = 0; this.animateStart = 0
this.animateDot = undefined; this.animateDot = undefined
this.animatePos = 0; this.animatePos = 0
}; }
Line.prototype.pauseAnimate = function () { Line.prototype.pauseAnimate = function () {
Store.set(this.generateStoreKey('LT:AnimatePlay'), { Store.set(this.generateStoreKey('LT:AnimatePlay'), {
pen: this, pen: this,
stop: true, stop: true
}); })
}; }
Line.prototype.stopAnimate = function () { Line.prototype.stopAnimate = function () {
var _this = this; const _this = this
this.pauseAnimate(); this.pauseAnimate()
this.initAnimate(); this.initAnimate()
setTimeout(function () { setTimeout(function () {
Store.set(_this.generateStoreKey('LT:render'), { Store.set(_this.generateStoreKey('LT:render'), {
pen: _this, pen: _this,
stop: true, stop: true
}); })
}, 50); }, 50)
}; }
Line.prototype.animate = function (now) { Line.prototype.animate = function (now) {
this.animatePos += this.animateSpan; this.animatePos += this.animateSpan
switch (this.animateType) { switch (this.animateType) {
case 'beads': case 'beads':
if (this.animateReverse) { if (this.animateReverse) {
this.lineDashOffset = this.animatePos; this.lineDashOffset = this.animatePos
} else {
this.lineDashOffset = -this.animatePos
} }
else { var len = this.lineWidth
this.lineDashOffset = -this.animatePos;
}
var len = this.lineWidth;
if (len < 5) { if (len < 5) {
len = 5; len = 5
} }
if (this.animateLineDash) { if (this.animateLineDash) {
this.lineDash = this.animateLineDash; this.lineDash = this.animateLineDash
} else {
this.lineDash = [len, len * 2]
} }
else { break
this.lineDash = [len, len * 2];
}
break;
case 'dot': case 'dot':
case 'comet': case 'comet':
this.lineDash = undefined; this.lineDash = undefined
var pos = void 0; var pos = void 0
if (this.animateReverse) { 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 { this.animateDot = pos
pos = this.getPointByPos(this.animatePos + this.animateFromSize); break
}
this.animateDot = pos;
break;
default: default:
if (this.animateReverse) { 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 { break
this.lineDash = [this.animatePos, this.length - this.animatePos + 1];
}
break;
} }
if (this.animatePos > this.length + this.animateSpan - this.animateFromSize - this.animateToSize) { if (this.animatePos > this.length + this.animateSpan - this.animateFromSize - this.animateToSize) {
if (++this.animateCycleIndex >= this.animateCycle && this.animateCycle > 0) { if (++this.animateCycleIndex >= this.animateCycle && this.animateCycle > 0) {
this.animateStart = 0; this.animateStart = 0
this.initAnimate(); this.initAnimate()
Store.set(this.generateStoreKey('animateEnd'), this); Store.set(this.generateStoreKey('animateEnd'), this)
return; return
}
this.animatePos = this.animateSpan
} }
this.animatePos = this.animateSpan;
} }
};
Line.prototype.getBubbles = function () { Line.prototype.getBubbles = function () {
var bubbles = []; const bubbles = []
for (var i = 0; i < 30 && this.animatePos - i > 0; ++i) { for (let i = 0; i < 30 && this.animatePos - i > 0; ++i) {
if (this.animateReverse) { if (this.animateReverse) {
bubbles.push({ bubbles.push({
pos: this.getPointByReversePos(this.animatePos - i * 2 + this.animateToSize), pos: this.getPointByReversePos(this.animatePos - i * 2 + this.animateToSize),
a: 1 - i * 0.03, a: 1 - i * 0.03,
r: this.lineWidth - i * 0.01, r: this.lineWidth - i * 0.01
}); })
} } else {
else {
bubbles.push({ bubbles.push({
pos: this.getPointByPos(this.animatePos - i * 2 + this.animateFromSize), pos: this.getPointByPos(this.animatePos - i * 2 + this.animateFromSize),
a: 1 - i * 0.03, 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 () { Line.prototype.round = function () {
this.from.round(); this.from.round()
this.to.round(); this.to.round()
}; }
Line.prototype.translate = function (x, y) { Line.prototype.translate = function (x, y) {
if (this.from) { if (this.from) {
this.from.x += x; this.from.x += x
this.from.y += y; this.from.y += y
this.to.x += x; this.to.x += x
this.to.y += y; this.to.y += y
if (this.text) { if (this.text) {
this.textRect = undefined; this.textRect = undefined
} }
for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
var pt = _a[_i]; const pt = _a[_i]
pt.x += x; pt.x += x
pt.y += y; pt.y += y
} }
} }
if (this.children) { if (this.children) {
for (var _b = 0, _c = this.children; _b < _c.length; _b++) { for (let _b = 0, _c = this.children; _b < _c.length; _b++) {
var item = _c[_b]; const item = _c[_b]
item.translate(x, y); 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) { Line.prototype.scale = function (scale, center) {
if (this.from) { if (this.from) {
this.from.x = center.x - (center.x - this.from.x) * scale; this.from.x = center.x - (center.x - this.from.x) * scale
this.from.y = center.y - (center.y - this.from.y) * 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.x = center.x - (center.x - this.to.x) * scale
this.to.y = center.y - (center.y - this.to.y) * scale; this.to.y = center.y - (center.y - this.to.y) * scale
this.lineWidth *= scale; this.lineWidth *= scale
this.borderWidth *= scale; this.borderWidth *= scale
this.fontSize *= scale; this.fontSize *= scale
if (this.text) { if (this.text) {
this.textRect = undefined; this.textRect = undefined
} }
this.textOffsetX *= scale; this.textOffsetX *= scale
this.textOffsetY *= scale; this.textOffsetY *= scale
for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) { for (let _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
var pt = _a[_i]; const pt = _a[_i]
pt.x = center.x - (center.x - pt.x) * scale; pt.x = center.x - (center.x - pt.x) * scale
pt.y = center.y - (center.y - pt.y) * scale; pt.y = center.y - (center.y - pt.y) * scale
} }
} }
if (this.children) { if (this.children) {
for (var _b = 0, _c = this.children; _b < _c.length; _b++) { for (let _b = 0, _c = this.children; _b < _c.length; _b++) {
var item = _c[_b]; const item = _c[_b]
item.scale(scale, center); 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) { 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)) { if (this.from.hit(pt, padding) || this.to.hit(pt, padding)) {
return this; return this
}
} }
};
Line.prototype.clone = function () { Line.prototype.clone = function () {
return new Line(this); return new Line(this)
}; }
return Line; return Line
}(Pen)); }(Pen))
export { Line }; export { Line }
//# sourceMappingURL=line.js.map // # sourceMappingURL=line.js.map

Some files were not shown because too many files have changed in this diff Show More