vislite 1.7.0-alpha.0 → 1.7.0

package/src/common/svg/default.ts

@@ -1,30 +1,30 @@
-import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
-
-export default function () {
-    return {
-        // 颜色
-        fillStyle: "rgb(0,0,0)",
-        strokeStyle: "rgb(0,0,0)",
-
-        // 文字对齐方式
-        textAlign: <textAlignType>"left",
-        textBaseline: <textBaselineType>"middle",
-
-        // 文字
-        "fontSize": 16,
-        "fontFamily": "sans-serif",
-
-        // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
-        "arcStartCap": <arcCapType>"butt",
-        "arcEndCap": <arcCapType>"butt",
-
-        // 线条
-        lineDash: [],
-        lineWidth: 1,
-        lineCap: <lineCapType>"butt",
-        lineJoin: <lineJoinType>"miter",
-
-        // 矩形圆角半径
-        "rectRadius": []
-    }
+import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
+
+export default function () {
+    return {
+        // 颜色
+        fillStyle: "rgb(0,0,0)",
+        strokeStyle: "rgb(0,0,0)",
+
+        // 文字对齐方式
+        textAlign: <textAlignType>"left",
+        textBaseline: <textBaselineType>"middle",
+
+        // 文字
+        "fontSize": 16,
+        "fontFamily": "sans-serif",
+
+        // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
+        "arcStartCap": <arcCapType>"butt",
+        "arcEndCap": <arcCapType>"butt",
+
+        // 线条
+        lineDash: [],
+        lineWidth: 1,
+        lineCap: <lineCapType>"butt",
+        lineJoin: <lineJoinType>"miter",
+
+        // 矩形圆角半径
+        "rectRadius": []
+    }
 }

package/src/common/svg/gradient.ts

@@ -1,53 +1,53 @@
-import { initDefs } from './config'
-import { toNode, setAttribute } from "./tool"
-
-const enhanceGradient = function (gradient: SVGElement, gradientId: string) {
-    const enhanceGradient = {
-        "value": function () {
-            return "url(#" + gradientId + ")"
-        },
-        "setColor": function (stop: number, color: string) {
-
-            const stopEl = toNode("stop")
-            gradient.appendChild(stopEl)
-            setAttribute(stopEl, "offset", (stop * 100) + "%")
-            setAttribute(stopEl, "style", "stop-color:" + color + ";")
-
-            return enhanceGradient
-        }
-    }
-    return enhanceGradient
-}
-
-// 线性渐变
-export const linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
-
-    const defs = initDefs(el)
-    const gradientId = "visliteLg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0)
-
-    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 + "%")
-
-    return enhanceGradient(linearGradient, gradientId)
-}
-
-// 环形渐变
-export const radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
-
-    const defs = initDefs(el)
-    const gradientId = "visliteRg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0)
-
-    const radialGradient = toNode("radialGradient")
-    defs.appendChild(radialGradient)
-    setAttribute(radialGradient, "id", gradientId)
-    setAttribute(radialGradient, "cx", cx + "%")
-    setAttribute(radialGradient, "cy", cy + "%")
-    setAttribute(radialGradient, "r", r + "%")
-
-    return enhanceGradient(radialGradient, gradientId)
-}
+import { initDefs } from './config'
+import { toNode, setAttribute } from "./tool"
+
+const enhanceGradient = function (gradient: SVGElement, gradientId: string) {
+    const enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")"
+        },
+        "setColor": function (stop: number, color: string) {
+
+            const stopEl = toNode("stop")
+            gradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}
+
+// 线性渐变
+export const linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
+
+    const defs = initDefs(el)
+    const gradientId = "visliteLg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0)
+
+    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 + "%")
+
+    return enhanceGradient(linearGradient, gradientId)
+}
+
+// 环形渐变
+export const radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
+
+    const defs = initDefs(el)
+    const gradientId = "visliteRg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0)
+
+    const radialGradient = toNode("radialGradient")
+    defs.appendChild(radialGradient)
+    setAttribute(radialGradient, "id", gradientId)
+    setAttribute(radialGradient, "cx", cx + "%")
+    setAttribute(radialGradient, "cy", cy + "%")
+    setAttribute(radialGradient, "r", r + "%")
+
+    return enhanceGradient(radialGradient, gradientId)
+}

package/src/common/svg/index.ts

@@ -19,6 +19,10 @@ class SVG {
     private __path: string = ""
     private __currentPosition: number[] = []
 
+    // 变换（和canvas2D的类似，内部维护了用于记录）
+    private __transform_history: Array<string> = []
+    private __transform_current = ""
+
     protected __svg: SVGElement
     constructor(svg: SVGElement) {
         this.__svg = svg
@@ -85,7 +89,7 @@ class SVG {
                     path: "path",
                     arc: "path",
                     circle: "circle",
-                    rect: "rect",
+                    rect: "path",
                 }[el] || ""
 
         if (_el == "") throw new Error("Unsupported drawing method:" + el)
@@ -128,18 +132,27 @@ class SVG {
     // deg表示文字旋转角度，是角度值，不是弧度
     fillText(text: string, x: number, y: number, deg: number = 0) {
         initText(this.__useEl, this.__config, x, y, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         this.__useEl.textContent = text
         fill(this.__useEl, this.__config)
         return this
     }
     strokeText(text: string, x: number, y: number, deg: number = 0) {
         initText(this.__useEl, this.__config, x, y, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         this.__useEl.textContent = text
         stroke(this.__useEl, this.__config)
         return this
     }
     fullText(text: string, x: number, y: number, deg: number = 0) {
         initText(this.__useEl, this.__config, x, y, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         this.__useEl.textContent = text
         full(this.__useEl, this.__config)
         return this
@@ -155,6 +168,9 @@ class SVG {
         deg: number
     ) {
         initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
@@ -167,6 +183,9 @@ class SVG {
         deg: number
     ) {
         initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
@@ -179,6 +198,9 @@ class SVG {
         deg: number
     ) {
         initArc(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
@@ -186,16 +208,25 @@ class SVG {
     // 圆形
     fillCircle(cx: number, cy: number, r: number) {
         initCircle(this.__useEl, cx, cy, r)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
     strokeCircle(cx: number, cy: number, r: number) {
         initCircle(this.__useEl, cx, cy, r)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
     fullCircle(cx: number, cy: number, r: number) {
         initCircle(this.__useEl, cx, cy, r)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
@@ -203,16 +234,25 @@ class SVG {
     // 矩形
     fillRect(x: number, y: number, width: number, height: number) {
         initRect(this.__useEl, this.__config, x, y, width, height)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
     strokeRect(x: number, y: number, width: number, height: number) {
         initRect(this.__useEl, this.__config, x, y, width, height)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
     fullRect(x: number, y: number, width: number, height: number) {
         initRect(this.__useEl, this.__config, x, y, width, height)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
@@ -241,20 +281,38 @@ class SVG {
     }
     fill() {
         initPath(this.__useEl, this.__path)
+        this.attr({
+            transform: this.__transform_current
+        })
         fill(this.__useEl, this.__config)
         return this
     }
     stroke() {
         initPath(this.__useEl, this.__path)
+        this.attr({
+            transform: this.__transform_current
+        })
         stroke(this.__useEl, this.__config)
         return this
     }
     full() {
         initPath(this.__useEl, this.__path)
+        this.attr({
+            transform: this.__transform_current
+        })
         full(this.__useEl, this.__config)
         return this
     }
 
+    save() {
+        this.__transform_history.push(this.__transform_current);
+        return this
+    }
+    restore() {
+        if (this.__transform_history.length > 0) this.__transform_current = this.__transform_history.pop() as string;
+        return this
+    }
+
     arc(x: number, y: number, r: number, beginDeg: number, deg: number) {
         const begPosition = rotate(x, y, (beginDeg / 180) * Math.PI, x + r, y)
         const endPosition = rotate(
@@ -317,7 +375,6 @@ class SVG {
         return this
     }
 
-
     // 线性渐变
     createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
         return linearGradient(this.__svg, x0, y0, x1, y1)
@@ -327,6 +384,36 @@ class SVG {
     createRadialGradient(cx: number, cy: number, r: number) {
         return radialGradient(this.__svg, cx, cy, r)
     }
+
+    // 转换画布
+    translate(dx: number, dy: number) {
+        this.__transform_current += ' translate(' + dx + ',' + dy + ')'
+        return this
+    }
+    rotate(deg: number) {
+        this.__transform_current += ' rotate(' + deg + ')'
+        return this
+    }
+
+    // 扩展绘制方法
+    install(methods: {
+        [key: string]: Function
+    }): any {
+        for (const key in methods) {
+
+            if (key in this) {
+                throw new Error("VISLite SVG:Method already exists and cannot be overwritten.")
+            } else {
+                (this as any)[key] = (...args: any) => {
+                    const value = methods[key].apply(this, args)
+                    if (value != void 0) return value
+                    return this
+                }
+            }
+
+        }
+        return this
+    }
 }
 
 export default SVG

package/src/common/svg/tool.ts

@@ -1,52 +1,52 @@
-import type SVGConfigType from '../../../types/SVGConfig'
-
-import { XLINK_ATTRIBUTE } from "./dictionary"
-
-const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
-    setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
-    setAttribute(el, "stroke-width", config.lineWidth + "")
-    setAttribute(el, "stroke-linecap", config.lineCap + "")
-    setAttribute(el, "stroke-linejoin", config.lineJoin + "")
-}
-
-// 新建节点
-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) {
-    setLineAttr(el, config)
-    _setAttribute(el, "stroke", config.strokeStyle as string)
-    _setAttribute(el, "fill", config.fillStyle as string)
-}
-
-export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle as string)
-}
-
-export function stroke(el: SVGElement, config: SVGConfigType) {
-    setLineAttr(el, config)
-    _setAttribute(el, "stroke", config.strokeStyle as string)
-    _setAttribute(el, "fill", "none")
+import type SVGConfigType from '../../../types/SVGConfig'
+
+import { XLINK_ATTRIBUTE } from "./dictionary"
+
+const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
+    setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
+    setAttribute(el, "stroke-width", config.lineWidth + "")
+    setAttribute(el, "stroke-linecap", config.lineCap + "")
+    setAttribute(el, "stroke-linejoin", config.lineJoin + "")
+}
+
+// 新建节点
+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) {
+    setLineAttr(el, config)
+    _setAttribute(el, "stroke", config.strokeStyle as string)
+    _setAttribute(el, "fill", config.fillStyle as string)
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle as string)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    setLineAttr(el, config)
+    _setAttribute(el, "stroke", config.strokeStyle as string)
+    _setAttribute(el, "fill", "none")
 }

package/src/common/tree/index.ts

@@ -1,26 +1,26 @@
-import type TreeConfigType from '../../../types/TreeConfig'
-import type { TreeResultType } from '../../../types/Tree'
-
-import toPlainTree from './toPlainTree'
-import { initOption } from '../option'
-
-class Tree {
-    readonly name: string = 'Tree'
-
-    private __config: TreeConfigType
-
-    constructor(config: TreeConfigType = {}) {
-        this.__config = initOption(config, {
-            root: (initTree: any) => initTree,
-            children: (parentTree: any) => parentTree.children,
-            id: (treedata: any) => treedata.name
-        })
-    }
-
-    use(initTree: any, noOpens = {}): TreeResultType {
-        return toPlainTree(initTree, this.__config, noOpens)
-    }
-
-}
-
+import type TreeConfigType from '../../../types/TreeConfig'
+import type { TreeResultType } from '../../../types/Tree'
+
+import toPlainTree from './toPlainTree'
+import { initOption } from '../option'
+
+class Tree {
+    readonly name: string = 'Tree'
+
+    private __config: TreeConfigType
+
+    constructor(config: TreeConfigType = {}) {
+        this.__config = initOption(config, {
+            root: (initTree: any) => initTree,
+            children: (parentTree: any) => parentTree.children,
+            id: (treedata: any) => treedata.name
+        })
+    }
+
+    use(initTree: any, noOpens = {}): TreeResultType {
+        return toPlainTree(initTree, this.__config, noOpens)
+    }
+
+}
+
 export default Tree

package/src/common/tree/toInnerTree.ts

@@ -1,62 +1,62 @@
-import type { default as TreeConfigType, rootType, childrenType, idType } 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: {
-        [key: string]: any
-    } = {}
-
-    // 根结点
-    const temp = (config.root as rootType)(initTree)
-    let id: number | string, rid: number | string
-    id = rid = (config.id as idType)(temp)
-    tempTree[id] = {
-        "data": temp,
-        "pid": null,
-        "id": id,
-        "isOpen": true,
-        "show": true,
-        "deg": 0,
-        "children": []
-    }
-
-    let num: number = 1
-
-        // 根据传递的原始数据，生成内部统一结构
-        ; (function createTree(pdata: any, pid: number | string) {
-            const children = (config.children as childrenType)(pdata, initTree)
-            num += children ? children.length : 0
-            for (let flag = 0; children && flag < children.length; flag++) {
-                id = (config.id as idType)(children[flag])
-                tempTree[pid].children.push(id);
-                tempTree[id] = {
-                    "data": children[flag],
-                    "pid": pid,
-                    "id": id,
-                    "isOpen": true,
-                    "show": true,
-                    "deg": 0,
-                    "children": []
-                }
-                createTree(children[flag], id)
-            }
-        })(temp, id)
-
-    return {
-        rid,
-        value: tempTree,
-        num
-    }
-
+import type { default as TreeConfigType, rootType, childrenType, idType } 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: {
+        [key: string]: any
+    } = {}
+
+    // 根结点
+    const temp = (config.root as rootType)(initTree)
+    let id: number | string, rid: number | string
+    id = rid = (config.id as idType)(temp)
+    tempTree[id] = {
+        "data": temp,
+        "pid": null,
+        "id": id,
+        "isOpen": true,
+        "show": true,
+        "deg": 0,
+        "children": []
+    }
+
+    let num: number = 1
+
+        // 根据传递的原始数据，生成内部统一结构
+        ; (function createTree(pdata: any, pid: number | string) {
+            const children = (config.children as childrenType)(pdata, initTree)
+            num += children ? children.length : 0
+            for (let flag = 0; children && flag < children.length; flag++) {
+                id = (config.id as idType)(children[flag])
+                tempTree[pid].children.push(id);
+                tempTree[id] = {
+                    "data": children[flag],
+                    "pid": pid,
+                    "id": id,
+                    "isOpen": true,
+                    "show": true,
+                    "deg": 0,
+                    "children": []
+                }
+                createTree(children[flag], id)
+            }
+        })(temp, id)
+
+    return {
+        rid,
+        value: tempTree,
+        num
+    }
+
 }