vislite 0.6.0 → 0.7.0-alpha.0

package/src/common/svg/gradient.ts

@@ -1,63 +1,63 @@
-import { initDefs } from './config'
-import { toNode, setAttribute } from "./tool"
-
-// 线性渐变
-export const linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
-
-    const defs = initDefs(el)
-    const gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random()
-
-    const linearGradient = toNode("linearGradient")
-    defs.appendChild(linearGradient)
-    setAttribute(linearGradient, "id", gradientId)
-    setAttribute(linearGradient, "x1", x0 + "%")
-    setAttribute(linearGradient, "y1", y0 + "%")
-    setAttribute(linearGradient, "x2", x1 + "%")
-    setAttribute(linearGradient, "y2", y1 + "%")
-
-    const enhanceGradient = {
-        "value": function () {
-            return "url(#" + gradientId + ")";
-        },
-        "setColor": function (stop: number, color: string) {
-
-            const stopEl = toNode("stop")
-            linearGradient.appendChild(stopEl)
-            setAttribute(stopEl, "offset", (stop * 100) + "%")
-            setAttribute(stopEl, "style", "stop-color:" + color + ";")
-
-            return enhanceGradient
-        }
-    }
-    return enhanceGradient
-}
-
-// 环形渐变
-export const radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
-
-    const defs = initDefs(el)
-    const gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random()
-
-    const radialGradient = toNode("radialGradient")
-    defs.appendChild(radialGradient)
-    setAttribute(radialGradient, "id", gradientId)
-    setAttribute(radialGradient, "cx", cx + "%")
-    setAttribute(radialGradient, "cy", cy + "%")
-    setAttribute(radialGradient, "r", r + "%")
-
-    const enhanceGradient = {
-        "value": function () {
-            return "url(#" + gradientId + ")";
-        },
-        "setColor": function (stop: number, color: string) {
-
-            const stopEl = toNode("stop")
-            radialGradient.appendChild(stopEl)
-            setAttribute(stopEl, "offset", (stop * 100) + "%")
-            setAttribute(stopEl, "style", "stop-color:" + color + ";")
-
-            return enhanceGradient
-        }
-    }
-    return enhanceGradient
-}
+import { initDefs } from './config'
+import { toNode, setAttribute } from "./tool"
+
+// 线性渐变
+export const linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
+
+    const defs = initDefs(el)
+    const gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random()
+
+    const linearGradient = toNode("linearGradient")
+    defs.appendChild(linearGradient)
+    setAttribute(linearGradient, "id", gradientId)
+    setAttribute(linearGradient, "x1", x0 + "%")
+    setAttribute(linearGradient, "y1", y0 + "%")
+    setAttribute(linearGradient, "x2", x1 + "%")
+    setAttribute(linearGradient, "y2", y1 + "%")
+
+    const enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")";
+        },
+        "setColor": function (stop: number, color: string) {
+
+            const stopEl = toNode("stop")
+            linearGradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}
+
+// 环形渐变
+export const radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
+
+    const defs = initDefs(el)
+    const gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random()
+
+    const radialGradient = toNode("radialGradient")
+    defs.appendChild(radialGradient)
+    setAttribute(radialGradient, "id", gradientId)
+    setAttribute(radialGradient, "cx", cx + "%")
+    setAttribute(radialGradient, "cy", cy + "%")
+    setAttribute(radialGradient, "r", r + "%")
+
+    const enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")";
+        },
+        "setColor": function (stop: number, color: string) {
+
+            const stopEl = toNode("stop")
+            radialGradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}

package/src/common/svg/index.ts

@@ -1,4 +1,4 @@
-import type SVGConfigType from "../../../types/SVGConfig"
+import type { default as SVGConfigType, svgElType, svgBoardType } from "../../../types/SVGConfig"
 import type { arcCapType, textAlignType, textBaselineType } from "../../../types/painterConfig"
 
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
@@ -86,7 +86,7 @@ class SVG {
     // el可以是结点或字符串，字符串的话表示节点名称
     // context可选，表示追加位置，可选，默认根svg
     // 此外，和appendBoard等操作一样，执行后新加入的结点会自动变成应用节点
-    appendEl(el: string | SVGElement, context?: SVGElement) {
+    appendEl(el: svgElType, context?: SVGElement) {
         context = context || this.__svg
 
         if (typeof el == "string") el = toNode(el)
@@ -99,8 +99,8 @@ class SVG {
     // 追加绘制板
     // 参数和appendEl类似，只是el如果是字符串的话，表示需要绘制对应什么内容，
     // 比如el = “arc”，表示画弧（不是路径arc），那么我们会创建path节点，因为我们是使用path实现的
-    appendBoard(el: string | SVGElement, context?: SVGElement) {
-        let _el = el
+    appendBoard(el: svgBoardType, context?: SVGElement) {
+        let _el: svgBoardType | string = el
 
         if (typeof el == "string")
             _el =
@@ -113,7 +113,7 @@ class SVG {
                 }[el] || ""
 
         if (_el == "") throw new Error("Unsupported drawing method:" + el)
-        return this.appendEl(_el, context)
+        return this.appendEl(_el as svgElType, context)
     }
 
     // 删除当前维护的节点

package/src/common/svg/tool.ts

@@ -1,45 +1,45 @@
-import type SVGConfigType from '../../../types/SVGConfig'
-
-import { XLINK_ATTRIBUTE } from "./dictionary"
-
-// 新建节点
-export function toNode(tagname: string) {
-    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
-}
-
-// 设置属性
-const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
-
-    // 需要使用xlink命名空间的xml属性
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
-    }
-
-    // 否则
-    else {
-        el.setAttribute(key, value + "")
-    }
-}
-export const setAttribute = _setAttribute
-
-// 获取属性
-export function getAttribute(el: SVGElement, key: string) {
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
-    return el.getAttribute(key)
-}
-
-export function full(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", config.fillStyle)
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
-}
-
-export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle)
-}
-
-export function stroke(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+import type SVGConfigType from '../../../types/SVGConfig'
+
+import { XLINK_ATTRIBUTE } from "./dictionary"
+
+// 新建节点
+export function toNode(tagname: string) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
+}
+
+// 设置属性
+const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
+
+    // 需要使用xlink命名空间的xml属性
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
+        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
+    }
+
+    // 否则
+    else {
+        el.setAttribute(key, value + "")
+    }
+}
+export const setAttribute = _setAttribute
+
+// 获取属性
+export function getAttribute(el: SVGElement, key: string) {
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
+    return el.getAttribute(key)
+}
+
+export function full(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", config.fillStyle)
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", "none")
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
 }

package/src/common/tree/toInnerTree.ts

@@ -1,58 +1,58 @@
-import type TreeConfigType from '../../../types/TreeConfig'
-
-/**
- * 根据配置的层次关系（配置的id,child,root）把原始数据变成内部结构，方便后期位置计算
- *
- * tempTree[id] = {
- *  "data": 原始数据,
- *  "pid": 父亲ID,
- *  "id": 唯一标识ID,
- *  "show": boolean,
- *  "isOpen": boolean,
- *  "children": [cid1、cid2、...]
- * }
- */
-export default (initTree: any, config: TreeConfigType) => {
-    const tempTree = {}
-
-    // 根结点
-    const temp = config.root(initTree)
-    let id: number | string, rid: number | string
-    id = rid = config.id(temp)
-    tempTree[id] = {
-        "data": temp,
-        "pid": null,
-        "id": id,
-        "isOpen": true,
-        "show": true,
-        "children": []
-    }
-
-    let num: number = 1
-
-        // 根据传递的原始数据，生成内部统一结构
-        ; (function createTree(pdata: any, pid: number | string) {
-            const children = config.children(pdata, initTree)
-            num += children ? children.length : 0
-            for (let flag = 0; children && flag < children.length; flag++) {
-                id = config.id(children[flag])
-                tempTree[pid].children.push(id);
-                tempTree[id] = {
-                    "data": children[flag],
-                    "pid": pid,
-                    "id": id,
-                    "isOpen": true,
-                    "show": true,
-                    "children": []
-                }
-                createTree(children[flag], id)
-            }
-        })(temp, id)
-
-    return {
-        rid,
-        value: tempTree,
-        num
-    }
-
+import type TreeConfigType from '../../../types/TreeConfig'
+
+/**
+ * 根据配置的层次关系（配置的id,child,root）把原始数据变成内部结构，方便后期位置计算
+ *
+ * tempTree[id] = {
+ *  "data": 原始数据,
+ *  "pid": 父亲ID,
+ *  "id": 唯一标识ID,
+ *  "show": boolean,
+ *  "isOpen": boolean,
+ *  "children": [cid1、cid2、...]
+ * }
+ */
+export default (initTree: any, config: TreeConfigType) => {
+    const tempTree = {}
+
+    // 根结点
+    const temp = config.root(initTree)
+    let id: number | string, rid: number | string
+    id = rid = config.id(temp)
+    tempTree[id] = {
+        "data": temp,
+        "pid": null,
+        "id": id,
+        "isOpen": true,
+        "show": true,
+        "children": []
+    }
+
+    let num: number = 1
+
+        // 根据传递的原始数据，生成内部统一结构
+        ; (function createTree(pdata: any, pid: number | string) {
+            const children = config.children(pdata, initTree)
+            num += children ? children.length : 0
+            for (let flag = 0; children && flag < children.length; flag++) {
+                id = config.id(children[flag])
+                tempTree[pid].children.push(id);
+                tempTree[id] = {
+                    "data": children[flag],
+                    "pid": pid,
+                    "id": id,
+                    "isOpen": true,
+                    "show": true,
+                    "children": []
+                }
+                createTree(children[flag], id)
+            }
+        })(temp, id)
+
+    return {
+        rid,
+        value: tempTree,
+        num
+    }
+
 }

package/src/common/tree/toPlainTree.ts

@@ -1,133 +1,133 @@
-import type TreeConfigType from '../../../types/TreeConfig'
-
-import toInnerTree from './toInnerTree'
-
-// 可以传递任意格式的树原始数据
-// 只要配置对应的解析方法即可
-export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
-    const treeData = toInnerTree(initTree, config)
-
-    const alltreedata = treeData.value // 维护的树
-    const rootid = treeData.rid // 根结点ID
-
-    if (treeData.num == 1) {
-        alltreedata[rootid].left = 0.5
-        alltreedata[rootid].top = 0.5
-        alltreedata[rootid].show = true
-        return {
-            deep: 1,
-            node: alltreedata,
-            root: rootid,
-            size: 1
-        }
-    } else {
-
-        const beforeDis = []
-        let size = 0, maxDeep = 0
-
-        if (noOpens[rootid]) {
-            alltreedata[rootid].left = 0.5
-            alltreedata[rootid].top = 0.5
-            alltreedata[rootid].show = true
-
-            size = 1
-        } else {
-            ; (function positionCalc(pNode, deep) {
-
-                if (deep > maxDeep) maxDeep = deep
-
-                let flag: number = 0
-                if (!noOpens[pNode.id]) {
-
-                    for (flag = 0; flag < pNode.children.length; flag++)
-
-                        // 因为全部的子结点的位置确定了，父结点的y位置就是子结点的中间位置
-                        // 因此有子结点的，先计算子结点
-                        positionCalc(alltreedata[pNode.children[flag]], deep + 1)
-
-                }
-
-                // left的位置比较简单，deep从0开始编号
-                // 比如deep=0，第一层，left=0+0.5=0.5，也就是根结点
-                alltreedata[pNode.id].left = deep + 0.5
-                if (flag == 0) {
-
-                    // beforeDis是一个数组，用以记录每一层此刻top下边缘（每一层是从上到下）
-                    // 比如一层的第一个，top值最小可以取top=0.5
-                    // 为了方便计算，beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
-                    // 因此设置最低上边缘为-0.5
-                    if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
-                    // 父边缘同意的进行初始化
-                    if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
-
-                    // 添加的新结点top值第一种求法：本层上边缘+1（比如上边缘是-0.5，那么top最小是top=-0.5+1=0.5）
-                    alltreedata[pNode.id].top = beforeDis[deep] + 1
-
-                    const pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
-                    // 计算的原则是：如果第一种可行，选择第一种，否则必须选择第二种
-                    // 判断第一种是否可行的方法就是：如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
-                    if (pTop - 1 < beforeDis[deep - 1])
-                        // 必须保证父亲结点和父亲的前一个兄弟保存1的距离，至少
-                        // 添加的新结点top值的第二种求法：根据孩子取孩子结点的中心top
-                        alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
-
-                } else {
-
-                    // 此刻flag!=0
-                    // 意味着结点有孩子，那么问题就解决了，直接取孩子的中间即可
-                    // 其实，flag==0的分支计算的就是孩子，是没有孩子的叶结点，那是关键
-                    alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
-                }
-
-                // 因为计算孩子的时候
-                // 无法掌握父辈兄弟的情况
-                // 可能会出现父亲和兄弟重叠问题
-                if (alltreedata[pNode.id].top <= beforeDis[deep]) {
-                    const needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
-                        (function doUp(_pid: number | string, _deep: number) {
-                            alltreedata[_pid].top += needUp;
-                            if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
-
-                            for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
-                                doUp(alltreedata[_pid].children[_flag], _deep + 1)
-                            }
-                        })(pNode.id, deep)
-                }
-
-                // 计算好一个结点后，需要更新此刻该层的上边缘
-                beforeDis[deep] = alltreedata[pNode.id].top
-
-                // size在每次计算一个结点后更新，是为了最终绘图的时候知道树有多宽（此处应该叫高）
-                if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
-
-            })(alltreedata[rootid], 0)
-
-        }
-        // 对于不显示的，需要标记一下
-        for (const key in noOpens) {
-            if (noOpens[key]) {
-                alltreedata[key].isOpen = false
-                    ; (function updateHidden(pid, left, top) {
-                        for (let index = 0; index < alltreedata[pid].children.length; index++) {
-                            alltreedata[alltreedata[pid].children[index]].left = left
-                            alltreedata[alltreedata[pid].children[index]].top = top
-                            alltreedata[alltreedata[pid].children[index]].show = false
-
-                            updateHidden(alltreedata[pid].children[index], left, top)
-                        }
-                    })(key, alltreedata[key].left, alltreedata[key].top)
-            }
-        }
-
-        // 传递的参数分别表示：记录了位置信息的树结点集合、根结点ID和树的宽
-        return {
-            "node": alltreedata,
-            "root": rootid,
-            "size": size,
-            "deep": maxDeep + 1
-        }
-
-    }
-
-
+import type TreeConfigType from '../../../types/TreeConfig'
+
+import toInnerTree from './toInnerTree'
+
+// 可以传递任意格式的树原始数据
+// 只要配置对应的解析方法即可
+export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
+    const treeData = toInnerTree(initTree, config)
+
+    const alltreedata = treeData.value // 维护的树
+    const rootid = treeData.rid // 根结点ID
+
+    if (treeData.num == 1) {
+        alltreedata[rootid].left = 0.5
+        alltreedata[rootid].top = 0.5
+        alltreedata[rootid].show = true
+        return {
+            deep: 1,
+            node: alltreedata,
+            root: rootid,
+            size: 1
+        }
+    } else {
+
+        const beforeDis = []
+        let size = 0, maxDeep = 0
+
+        if (noOpens[rootid]) {
+            alltreedata[rootid].left = 0.5
+            alltreedata[rootid].top = 0.5
+            alltreedata[rootid].show = true
+
+            size = 1
+        } else {
+            ; (function positionCalc(pNode, deep) {
+
+                if (deep > maxDeep) maxDeep = deep
+
+                let flag: number = 0
+                if (!noOpens[pNode.id]) {
+
+                    for (flag = 0; flag < pNode.children.length; flag++)
+
+                        // 因为全部的子结点的位置确定了，父结点的y位置就是子结点的中间位置
+                        // 因此有子结点的，先计算子结点
+                        positionCalc(alltreedata[pNode.children[flag]], deep + 1)
+
+                }
+
+                // left的位置比较简单，deep从0开始编号
+                // 比如deep=0，第一层，left=0+0.5=0.5，也就是根结点
+                alltreedata[pNode.id].left = deep + 0.5
+                if (flag == 0) {
+
+                    // beforeDis是一个数组，用以记录每一层此刻top下边缘（每一层是从上到下）
+                    // 比如一层的第一个，top值最小可以取top=0.5
+                    // 为了方便计算，beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
+                    // 因此设置最低上边缘为-0.5
+                    if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
+                    // 父边缘同意的进行初始化
+                    if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
+
+                    // 添加的新结点top值第一种求法：本层上边缘+1（比如上边缘是-0.5，那么top最小是top=-0.5+1=0.5）
+                    alltreedata[pNode.id].top = beforeDis[deep] + 1
+
+                    const pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
+                    // 计算的原则是：如果第一种可行，选择第一种，否则必须选择第二种
+                    // 判断第一种是否可行的方法就是：如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
+                    if (pTop - 1 < beforeDis[deep - 1])
+                        // 必须保证父亲结点和父亲的前一个兄弟保存1的距离，至少
+                        // 添加的新结点top值的第二种求法：根据孩子取孩子结点的中心top
+                        alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
+
+                } else {
+
+                    // 此刻flag!=0
+                    // 意味着结点有孩子，那么问题就解决了，直接取孩子的中间即可
+                    // 其实，flag==0的分支计算的就是孩子，是没有孩子的叶结点，那是关键
+                    alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
+                }
+
+                // 因为计算孩子的时候
+                // 无法掌握父辈兄弟的情况
+                // 可能会出现父亲和兄弟重叠问题
+                if (alltreedata[pNode.id].top <= beforeDis[deep]) {
+                    const needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
+                        (function doUp(_pid: number | string, _deep: number) {
+                            alltreedata[_pid].top += needUp;
+                            if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
+
+                            for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
+                                doUp(alltreedata[_pid].children[_flag], _deep + 1)
+                            }
+                        })(pNode.id, deep)
+                }
+
+                // 计算好一个结点后，需要更新此刻该层的上边缘
+                beforeDis[deep] = alltreedata[pNode.id].top
+
+                // size在每次计算一个结点后更新，是为了最终绘图的时候知道树有多宽（此处应该叫高）
+                if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
+
+            })(alltreedata[rootid], 0)
+
+        }
+        // 对于不显示的，需要标记一下
+        for (const key in noOpens) {
+            if (noOpens[key]) {
+                alltreedata[key].isOpen = false
+                    ; (function updateHidden(pid, left, top) {
+                        for (let index = 0; index < alltreedata[pid].children.length; index++) {
+                            alltreedata[alltreedata[pid].children[index]].left = left
+                            alltreedata[alltreedata[pid].children[index]].top = top
+                            alltreedata[alltreedata[pid].children[index]].show = false
+
+                            updateHidden(alltreedata[pid].children[index], left, top)
+                        }
+                    })(key, alltreedata[key].left, alltreedata[key].top)
+            }
+        }
+
+        // 传递的参数分别表示：记录了位置信息的树结点集合、根结点ID和树的宽
+        return {
+            "node": alltreedata,
+            "root": rootid,
+            "size": size,
+            "deep": maxDeep + 1
+        }
+
+    }
+
+
 }