vislite 1.2.1-alpha.0 → 1.2.1

package/lib/throttle/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of VISLite JavaScript Library v1.2.1-alpha.0
+* throttle of VISLite JavaScript Library v1.2.1
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function t(t,e){var n={time:200,keep:!1,opportunity:"end"};if(e)for(var p in e)n[p]=e[p];var r,i=!1,o=!1,a=!1;return function(){const e=this;if(r=arguments,i)o=!0,a=!0;else{"end"!=n.opportunity&&t.apply(e,r),i=!0;var p=setInterval((()=>{o?n.keep||t.apply(e,r):("begin"!=n.opportunity&&(a||"end"==n.opportunity)&&t.apply(e,r),i=!1,a=!1,clearInterval(p)),o=!1}),n.time)}}}export{t as default};

package/package/animation/index.ts

@@ -1,3 +1,3 @@
-import { animation } from "@oipage/core.js/src/animation/index"
+import { animation } from "oipage/corejs/animation/index"
 
 export default animation

package/package/throttle/index.ts

@@ -1,3 +1,3 @@
-import { throttle } from "@oipage/core.js/src/throttle/index"
+import { throttle } from "oipage/corejs/throttle/index"
 
 export default throttle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "1.2.1-alpha.0",
+  "version": "1.2.1",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",
@@ -8,9 +8,9 @@
   "jsdelivr": "./lib/index.umd.min.js",
   "sideEffects": false,
   "scripts": {
-    "init": "npm install && devby --copy ./node_modules/pageby/dist/pageby.min.js ./docs/js/min/pageby.min.js",
+    "init": "npm install && oipage-cli --copy ./node_modules/pageby/dist/pageby.min.js ./docs/js/min/pageby.min.js",
     "dev": "webpack serve --config ./build/webpack.config.js",
-    "build": "devby --delete ./lib && node ./build/pkg.js",
+    "build": "oipage-cli --delete ./lib && node ./build/pkg.js",
     "test": "karma start ./build/karma.config.js",
     "lint": "eslint src/**/*.ts --fix"
   },
@@ -56,7 +56,6 @@
     "@types/jasmine": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "devby": "^0.4.6",
     "eslint": "^8.56.0",
     "karma": "^6.3.10",
     "karma-chrome-launcher": "^3.1.0",
@@ -73,6 +72,6 @@
     "webpack-dev-server": "^4.7.4"
   },
   "dependencies": {
-    "@oipage/core.js": "^0.1.0"
+    "oipage": "^0.1.0"
   }
 }

package/src/common/canvas/default.ts

@@ -2,7 +2,7 @@ import type { arcCapType } from '../../../types/painterConfig'
 
 export default function (type?: string) {
 
-    let special = {
+    const special = {
         // 文字大小
         "fontSize": 16,
 
@@ -22,7 +22,7 @@ export default function (type?: string) {
         "arcEndCap": <arcCapType>'butt'
     }
 
-    let init = {
+    const init = {
         // 填充色或图案
         "fillStyle": 'black',
 

package/src/common/canvas/gradient.ts

@@ -1,4 +1,4 @@
-let enhanceGradient = function (gradient: CanvasGradient, calcStop?: Function) {
+const enhanceGradient = function (gradient: CanvasGradient, calcStop?: Function) {
     const enhanceGradient = {
         "value": function () {
             return gradient

package/src/common/canvas/painter.ts

@@ -411,13 +411,13 @@ class Painter {
     install(methods: {
         [key: string]: Function
     }): any {
-        for (let key in methods) {
+        for (const key in methods) {
 
             if (key in this) {
                 throw new Error("VISLite Canvas:Method already exists and cannot be overwritten.")
             } else {
                 (this as any)[key] = (...args: any) => {
-                    let value = methods[key].apply(this, args)
+                    const value = methods[key].apply(this, args)
                     if (value != void 0) return value
                     return this
                 }

package/src/common/svg/gradient.ts

@@ -1,7 +1,7 @@
 import { initDefs } from './config'
 import { toNode, setAttribute } from "./tool"
 
-let enhanceGradient = function (gradient: SVGElement, gradientId: string) {
+const enhanceGradient = function (gradient: SVGElement, gradientId: string) {
     const enhanceGradient = {
         "value": function () {
             return "url(#" + gradientId + ")";

package/src/common/tree/toInnerTree.ts

@@ -1,60 +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,
-        "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,
-                    "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
+    }
+
 }

package/src/common/type.ts

@@ -1,4 +1,4 @@
-let toString = Object.prototype.toString
+const toString = Object.prototype.toString
 
 // 获取一个值的类型字符串[object type]
 export function getType(value: any) {

package/src/layout/TreeLayout.ts

@@ -1,189 +1,195 @@
-import type TreeLayoutType from '../../types/TreeLayout'
-import type { TreeResultType } from '../../types/Tree'
-import type TreeOptionType from '../../types/TreeOption'
-
-import Tree from '../common/tree/index'
-import { initOption } from '../common/option'
-import { animation } from "@oipage/core.js/src/animation/index"
-import rotate from '../rotate'
-
-class TreeLayout extends Tree implements TreeLayoutType {
-    readonly name: string = 'TreeLayout'
-
-    private __option = {
-        offsetX: 0,
-        offsetY: 0,
-        duration: 500,
-        type: "plain",
-        direction: "LR",
-        x: 100,
-        y: 100,
-        width: 100,
-        height: 100,
-        radius: 100
-    }
-
-    private __rback: (tree: TreeResultType) => void
-    private __oralTree: any
-    private __preTree: TreeResultType | null
-
-    private __noOpens = {}
-
-    setOption(option: TreeOptionType) {
-        initOption(option, this.__option)
-        return this
-    }
-
-    use(initTree: any, noOpens = {}) {
-        const tree = super.use(initTree, noOpens)
-
-        // 校对偏差
-        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
-            for (const key in tree.node) {
-                if (!tree.node[key].show) {
-
-                    let deep = 0, pid = key
-                    do {
-                        pid = tree.node[pid].pid
-                        deep++
-                    } while (!tree.node[pid].show)
-
-                    tree.node[key].left += this.__option.offsetX * deep
-                    tree.node[key].top += this.__option.offsetY * deep
-                }
-            }
-        }
-
-        if (this.__option.type == 'rect') {
-            if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
-
-                const perW = this.__option.height / tree.size
-                const perD = this.__option.width / (tree.deep - 1)
-
-                const balanceW = this.__option.y - this.__option.height * 0.5
-                const flag = this.__option.direction == 'LR' ? 1 : -1
-
-                for (const key in tree.node) {
-                    if (tree.deep == 1) {
-                        tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
-                        tree.node[key].top = this.__option.y
-                    } else {
-                        tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
-                        tree.node[key].top = tree.node[key].top * perW + balanceW
-                    }
-                }
-            } else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
-
-                const perW = this.__option.width / tree.size
-                const perD = this.__option.height / (tree.deep - 1)
-
-                const balanceW = this.__option.x - this.__option.width * 0.5
-                const flag = this.__option.direction == 'TB' ? 1 : -1
-
-                for (const key in tree.node) {
-                    if (tree.deep == 1) {
-                        tree.node[key].left = this.__option.x
-                        tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
-                    } else {
-                        const left = tree.node[key].left
-
-                        tree.node[key].left = tree.node[key].top * perW + balanceW
-                        tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
-                    }
-                }
-
-            }
-
-        } else if (this.__option.type == 'circle') {
-            const cx = this.__option.x, cy = this.__option.y
-            const deg = Math.PI * 2 / tree.size
-            const per = this.__option.radius / (tree.deep - 1)
-
-            for (const key in tree.node) {
-                if (tree.node[key].left == 0.5) {
-                    tree.node[key].left = cx
-                    tree.node[key].top = cy
-                } else {
-                    const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
-
-                    tree.node[key].left = position[0]
-                    tree.node[key].top = position[1]
-                }
-            }
-        }
-
-        return tree
-    }
-
-    bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
-        this.__rback = renderBack
-        this.__oralTree = initTree
-        this.__noOpens = noOpens
-
-        this.__preTree = this.use(this.__oralTree, this.__noOpens)
-        this.__rback(this.__preTree)
-
-        return this
-    }
-
-    unbind() {
-        this.__rback = () => null
-        this.__oralTree = null
-        this.__preTree = null
-        this.__noOpens = {}
-        return this
-    }
-
-    private doUpdate() {
-        const newTree = this.use(this.__oralTree, this.__noOpens)
-
-        const cacheTree = JSON.parse(JSON.stringify(newTree))
-
-        animation((deep) => {
-
-            if (this.__preTree) {
-                for (const key in cacheTree.node) {
-                    if (newTree.node[key].show || this.__preTree.node[key].show) {
-                        cacheTree.node[key].show = true
-
-                        cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
-                        cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
-                    }
-                }
-            }
-            this.__rback(cacheTree)
-
-
-        }, this.__option.duration, () => {
-            this.__preTree = newTree
-            this.__rback(this.__preTree)
-        })
-    }
-
-    closeNode(id: string) {
-        if (!this.__preTree) return this
-        this.__noOpens[id] = true
-
-        this.doUpdate()
-        return this
-    }
-
-    openNode(id: string) {
-        if (!this.__preTree) return this
-        this.__noOpens[id] = false
-
-        this.doUpdate()
-        return this
-    }
-
-    toggleNode(id: string) {
-        if (!this.__preTree) return this
-        this.__noOpens[id] = !this.__noOpens[id]
-
-        this.doUpdate()
-        return this
-    }
-
-}
-
+import type TreeLayoutType from '../../types/TreeLayout'
+import type { TreeResultType } from '../../types/Tree'
+import type TreeOptionType from '../../types/TreeOption'
+
+import Tree from '../common/tree/index'
+import { initOption } from '../common/option'
+import { animation } from "oipage/corejs/animation/index"
+import rotate from '../rotate'
+
+class TreeLayout extends Tree implements TreeLayoutType {
+    readonly name: string = 'TreeLayout'
+
+    private __option = {
+        offsetX: 0,
+        offsetY: 0,
+        duration: 500,
+        type: "plain",
+        direction: "LR",
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        radius: 100
+    }
+
+    private __rback: (tree: TreeResultType) => void
+    private __oralTree: any
+    private __preTree: TreeResultType | null
+
+    private __noOpens = {}
+
+    setOption(option: TreeOptionType) {
+        initOption(option, this.__option)
+        return this
+    }
+
+    use(initTree: any, noOpens = {}) {
+        const tree = super.use(initTree, noOpens)
+
+        // 校对偏差
+        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
+            for (const key in tree.node) {
+                if (!tree.node[key].show) {
+
+                    let deep = 0, pid = key
+                    do {
+                        pid = tree.node[pid].pid
+                        deep++
+                    } while (!tree.node[pid].show)
+
+                    tree.node[key].left += this.__option.offsetX * deep
+                    tree.node[key].top += this.__option.offsetY * deep
+                }
+            }
+        }
+
+        if (this.__option.type == 'rect') {
+            if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
+
+                const perW = this.__option.height / tree.size
+                const perD = this.__option.width / (tree.deep - 1)
+
+                const balanceW = this.__option.y - this.__option.height * 0.5
+                const flag = this.__option.direction == 'LR' ? 1 : -1
+
+                for (const key in tree.node) {
+                    if (tree.deep == 1) {
+                        tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
+                        tree.node[key].top = this.__option.y
+                    } else {
+                        tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
+                        tree.node[key].top = tree.node[key].top * perW + balanceW
+                    }
+                }
+            } else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
+
+                const perW = this.__option.width / tree.size
+                const perD = this.__option.height / (tree.deep - 1)
+
+                const balanceW = this.__option.x - this.__option.width * 0.5
+                const flag = this.__option.direction == 'TB' ? 1 : -1
+
+
+
+                for (const key in tree.node) {
+                    tree.node[key].deg = this.__option.direction == 'TB' ? Math.PI * 0.5 : Math.PI * -0.5
+
+                    if (tree.deep == 1) {
+                        tree.node[key].left = this.__option.x
+                        tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
+                    } else {
+                        const left = tree.node[key].left
+                        tree.node[key].left = tree.node[key].top * perW + balanceW
+                        tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
+                    }
+                }
+
+            }
+
+        } else if (this.__option.type == 'circle') {
+            const cx = this.__option.x, cy = this.__option.y
+            const deg = Math.PI * 2 / tree.size
+            const per = this.__option.radius / (tree.deep - 1)
+
+            for (const key in tree.node) {
+                if (tree.node[key].left == 0.5) {
+                    tree.node[key].left = cx
+                    tree.node[key].top = cy
+                } else {
+                    const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
+
+                    tree.node[key].deg = deg * tree.node[key].top
+                    tree.node[key].left = position[0]
+                    tree.node[key].top = position[1]
+                }
+            }
+        }
+
+        return tree
+    }
+
+    bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
+        this.__rback = renderBack
+        this.__oralTree = initTree
+        this.__noOpens = noOpens
+
+        this.__preTree = this.use(this.__oralTree, this.__noOpens)
+        this.__rback(this.__preTree)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralTree = null
+        this.__preTree = null
+        this.__noOpens = {}
+        return this
+    }
+
+    doUpdate() {
+        const newTree = this.use(this.__oralTree, this.__noOpens)
+
+        const cacheTree = JSON.parse(JSON.stringify(newTree))
+
+        animation((deep) => {
+
+            if (this.__preTree) {
+                for (const key in cacheTree.node) {
+                    if (newTree.node[key].show || this.__preTree.node[key].show) {
+                        cacheTree.node[key].show = true
+
+                        cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
+                        cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
+                    }
+                }
+            }
+            this.__rback(cacheTree)
+
+
+        }, this.__option.duration, () => {
+            this.__preTree = newTree
+            this.__rback(this.__preTree)
+        })
+
+        return this
+    }
+
+    closeNode(id: string) {
+        if (!this.__preTree) return this
+        this.__noOpens[id] = true
+
+        this.doUpdate()
+        return this
+    }
+
+    openNode(id: string) {
+        if (!this.__preTree) return this
+        this.__noOpens[id] = false
+
+        this.doUpdate()
+        return this
+    }
+
+    toggleNode(id: string) {
+        if (!this.__preTree) return this
+        this.__noOpens[id] = !this.__noOpens[id]
+
+        this.doUpdate()
+        return this
+    }
+
+}
+
 export default TreeLayout