vislite 1.2.0-alpha.1 → 1.2.0-alpha.3

package/src/common/canvas/index.ts

@@ -1,177 +1,182 @@
-import type CanvasConfigType from "../../../types/CanvasConfig"
-import type CanvasOptsType from '../../../types/CanvasOpts'
-
-import PainterRender from "./painter"
-import assemble from "../assemble"
-import { linearGradient, radialGradient } from "./gradient"
-import { initText } from './config'
-
-class Canvas extends PainterRender {
-    readonly name: string = "Canvas"
-
-    private __regionList = {} //区域映射表
-    private __scaleSize
-
-    // 步长由1改为10是为了优化区域计算有时候出错问题
-    // 2023年7月6日 于南京
-    private __regionAssemble = assemble(0, 255, 10, 3)
-
-    // 添加scaleSize参数是为了适配画布缩放后的处理
-    // 2024年1月17日 于南京
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}, scaleSize = 1) {
-        super(
-            ViewCanvas,
-            opts,
-            RegionCanvas ? new PainterRender(RegionCanvas, {
-                willReadFrequently: true,
-            }) : undefined, true, scaleSize
-        )
-
-        this.__scaleSize = scaleSize
-        this.setRegion("")
-    }
-
-    config(configs: CanvasConfigType) {
-        for (const key in configs) {
-            this.useConfig(key, configs[key])
-        }
-
-        return this
-    }
-
-    // 是否绘制的内容只需要进行区域记录
-    onlyRegion(flag: boolean) {
-        this.__onlyRegion = flag
-        return this
-    }
-
-    onlyView(flag: boolean) {
-        this.__onlyView = flag
-        return this
-    }
-
-    // 设置当前绘制区域名称
-    setRegion(regionName: string | number) {
-        if (this.__region) {
-            if (regionName) {
-                if (this.__regionList[regionName] == void 0) {
-                    const tempColor = this.__regionAssemble()
-                    this.__regionList[regionName] =
-                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
-                }
-
-                this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                    this.__region.useConfig("strokeStyle", this.__regionList[regionName])
-            } else {
-                this.__region.useConfig("fillStyle", "#000000") &&
-                    this.__region.useConfig("strokeStyle", "#000000")
-            }
-        }
-        return this
-    }
-
-    // 获取当前事件触发的区域名称
-    getRegion(x: number, y: number): Promise<string> {
-        return new Promise((resolve) => {
-            const imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
-                data: [0, 0, 0, 0]
-            }
-
-            // 获取点击点的颜色
-            let currentRGBA = imgData.data
-
-            const doit = () => {
-                if (this.__region) {
-
-                    // 查找当前点击的区域
-                    for (const key in this.__regionList) {
-                        if (
-                            "rgb(" +
-                            currentRGBA[0] +
-                            "," +
-                            currentRGBA[1] +
-                            "," +
-                            currentRGBA[2] +
-                            ")" ==
-                            this.__regionList[key]
-                        ) {
-                            resolve(key)
-                            break
-                        }
-                    }
-                }
-
-                resolve("")
-            }
-
-            // 如果有值
-            if (currentRGBA) {
-                doit()
-            }
-
-            // 否则就是在Promise中
-            else {
-                (imgData as any).then((data: Uint8ClampedArray) => {
-                    currentRGBA = data
-                    doit()
-                })
-            }
-        })
-    }
-
-    textWidth(text: string) {
-        this.painter.save()
-
-        initText(this.painter, this.__specialConfig, 0, 0, 0)
-
-        // 虽然我们限制了只可以输入字符串，可是不代表所有环境都可以保证，为了确保方法不失效，强转成字符串
-        const width = this.painter.measureText(text + "").width
-
-        this.painter.restore()
-
-        return width
-    }
-
-    // 获取原始画笔
-    getContext(isRegion = false) {
-        return isRegion ? (this.__region ? this.__region.painter : null) : this.painter
-    }
-
-    // 获取画布信息
-    getInfo() {
-        return {
-            width: this.painter.canvas.width / this.__scaleSize,
-            height: this.painter.canvas.height / this.__scaleSize
-        }
-    }
-
-    // 线性渐变
-    createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
-        return linearGradient(this.painter, x0, y0, x1, y1)
-    }
-
-    // 环形渐变
-    createRadialGradient(cx: number, cy: number, r: number) {
-        return radialGradient(this.painter, cx, cy, r)
-    }
-
-    // 获取指定位置颜色
-    getColor(x: number, y: number) {
-        x *= this.__scaleSize
-        y *= this.__scaleSize
-        const currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
-        return (
-            "rgba(" +
-            currentRGBA[0] +
-            "," +
-            currentRGBA[1] +
-            "," +
-            currentRGBA[2] +
-            "," +
-            currentRGBA[3] +
-            ")"
-        )
-    }
-}
-
-export default Canvas
+import type CanvasConfigType from "../../../types/CanvasConfig"
+import type CanvasOptsType from '../../../types/CanvasOpts'
+
+import PainterRender from "./painter"
+import assemble from "../assemble"
+import { linearGradient, radialGradient, conicGradient } from "./gradient"
+import { initText } from './config'
+
+class Canvas extends PainterRender {
+    readonly name: string = "Canvas"
+
+    private __regionList = {} //区域映射表
+    private __scaleSize
+
+    // 步长由1改为10是为了优化区域计算有时候出错问题
+    // 2023年7月6日 于南京
+    private __regionAssemble = assemble(0, 255, 10, 3)
+
+    // 添加scaleSize参数是为了适配画布缩放后的处理
+    // 2024年1月17日 于南京
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}, scaleSize = 1) {
+        super(
+            ViewCanvas,
+            opts,
+            RegionCanvas ? new PainterRender(RegionCanvas, {
+                willReadFrequently: true,
+            }) : undefined, true, scaleSize
+        )
+
+        this.__scaleSize = scaleSize
+        this.setRegion("")
+    }
+
+    config(configs: CanvasConfigType) {
+        for (const key in configs) {
+            this.useConfig(key, configs[key])
+        }
+
+        return this
+    }
+
+    // 是否绘制的内容只需要进行区域记录
+    onlyRegion(flag: boolean) {
+        this.__onlyRegion = flag
+        return this
+    }
+
+    onlyView(flag: boolean) {
+        this.__onlyView = flag
+        return this
+    }
+
+    // 设置当前绘制区域名称
+    setRegion(regionName: string | number) {
+        if (this.__region) {
+            if (regionName) {
+                if (this.__regionList[regionName] == void 0) {
+                    const tempColor = this.__regionAssemble()
+                    this.__regionList[regionName] =
+                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
+                }
+
+                this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
+                    this.__region.useConfig("strokeStyle", this.__regionList[regionName])
+            } else {
+                this.__region.useConfig("fillStyle", "#000000") &&
+                    this.__region.useConfig("strokeStyle", "#000000")
+            }
+        }
+        return this
+    }
+
+    // 获取当前事件触发的区域名称
+    getRegion(x: number, y: number): Promise<string> {
+        return new Promise((resolve) => {
+            const imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
+                data: [0, 0, 0, 0]
+            }
+
+            // 获取点击点的颜色
+            let currentRGBA = imgData.data
+
+            const doit = () => {
+                if (this.__region) {
+
+                    // 查找当前点击的区域
+                    for (const key in this.__regionList) {
+                        if (
+                            "rgb(" +
+                            currentRGBA[0] +
+                            "," +
+                            currentRGBA[1] +
+                            "," +
+                            currentRGBA[2] +
+                            ")" ==
+                            this.__regionList[key]
+                        ) {
+                            resolve(key)
+                            break
+                        }
+                    }
+                }
+
+                resolve("")
+            }
+
+            // 如果有值
+            if (currentRGBA) {
+                doit()
+            }
+
+            // 否则就是在Promise中
+            else {
+                (imgData as any).then((data: Uint8ClampedArray) => {
+                    currentRGBA = data
+                    doit()
+                })
+            }
+        })
+    }
+
+    textWidth(text: string) {
+        this.painter.save()
+
+        initText(this.painter, this.__specialConfig, 0, 0, 0)
+
+        // 虽然我们限制了只可以输入字符串，可是不代表所有环境都可以保证，为了确保方法不失效，强转成字符串
+        const width = this.painter.measureText(text + "").width
+
+        this.painter.restore()
+
+        return width
+    }
+
+    // 获取原始画笔
+    getContext(isRegion = false) {
+        return isRegion ? (this.__region ? this.__region.painter : null) : this.painter
+    }
+
+    // 获取画布信息
+    getInfo() {
+        return {
+            width: this.painter.canvas.width / this.__scaleSize,
+            height: this.painter.canvas.height / this.__scaleSize
+        }
+    }
+
+    // 线性渐变
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
+        return linearGradient(this.painter, x0, y0, x1, y1)
+    }
+
+    // 环形渐变
+    createRadialGradient(cx: number, cy: number, r: number) {
+        return radialGradient(this.painter, cx, cy, r)
+    }
+
+    // 角度渐变
+    createConicGradient(cx: number, cy: number, beginDeg: number, deg?: number) {
+        return conicGradient(this.painter, cx, cy, beginDeg, deg)
+    }
+
+    // 获取指定位置颜色
+    getColor(x: number, y: number) {
+        x *= this.__scaleSize
+        y *= this.__scaleSize
+        const currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
+        return (
+            "rgba(" +
+            currentRGBA[0] +
+            "," +
+            currentRGBA[1] +
+            "," +
+            currentRGBA[2] +
+            "," +
+            currentRGBA[3] +
+            ")"
+        )
+    }
+}
+
+export default Canvas

package/src/common/option.ts

@@ -0,0 +1,30 @@
+import { isPlainObject } from "./type"
+
+// 初始化配置
+export function initOption(setOption: any, defaultOption: any) {
+    for (const key in setOption) {
+        defaultOption[key] = setOption[key]
+    }
+
+    return defaultOption
+}
+
+// 合并配置
+export function mergeOption(oldOption: any, newOption: any) {
+    (function doit(oldOption, newOption) {
+
+        for (const key in newOption) {
+            const value = newOption[key]
+
+            if (isPlainObject(value)) {
+                if (!oldOption[key]) oldOption[key] = {}
+
+                doit(oldOption[key], newOption[key])
+            } else {
+                oldOption[key] = value
+            }
+
+        }
+
+    })(oldOption, newOption)
+}

package/src/common/tree/index.ts

@@ -2,7 +2,7 @@ import type TreeConfigType from '../../../types/TreeConfig'
 import type { TreeResultType } from '../../../types/Tree'
 
 import toPlainTree from './toPlainTree'
-import mergeOption from '../mergeOption'
+import { initOption } from '../option'
 
 class Tree {
     readonly name: string = 'Tree'
@@ -10,7 +10,7 @@ class Tree {
     private __config: TreeConfigType
 
     constructor(config: TreeConfigType = {}) {
-        this.__config = mergeOption(config, {
+        this.__config = initOption(config, {
             root: (initTree: any) => initTree,
             children: (parentTree: any) => parentTree.children,
             id: (treedata: any) => treedata.name

package/src/common/type.ts

@@ -0,0 +1,27 @@
+let toString = Object.prototype.toString
+
+// 获取一个值的类型字符串[object type]
+export function getType(value: any) {
+    if (value == null) {
+        return value === undefined ? '[object Undefined]' : '[object Null]'
+    }
+    return toString.call(value)
+}
+
+// 判断一个值是不是一个朴素的'对象'
+export function isPlainObject(value: any) {
+    if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
+        return false
+    }
+
+    // 如果原型为null
+    if (Object.getPrototypeOf(value) === null) {
+        return true
+    }
+
+    let proto = value
+    while (Object.getPrototypeOf(proto) !== null) {
+        proto = Object.getPrototypeOf(proto)
+    }
+    return Object.getPrototypeOf(value) === proto
+}

package/src/layout/TreeLayout.ts

@@ -3,7 +3,7 @@ import type { TreeResultType } from '../../types/Tree'
 import type TreeOptionType from '../../types/TreeOption'
 
 import Tree from '../common/tree/index'
-import mergeOption from '../common/mergeOption'
+import { initOption } from '../common/option'
 import animation from '../animation'
 import rotate from '../rotate'
 
@@ -30,7 +30,7 @@ class TreeLayout extends Tree implements TreeLayoutType {
     private __noOpens = {}
 
     setOption(option: TreeOptionType) {
-        mergeOption(option, this.__option)
+        initOption(option, this.__option)
         return this
     }
 

package/src/throttle.ts

@@ -1,11 +1,11 @@
 import type throttleOptionType from '../types/throttleOption'
 
-import mergeOption from './common/mergeOption'
+import { initOption } from './common/option'
 
 export default function (callback: Function, option: throttleOptionType = {}) {
 
     // 校对缺省值
-    option = mergeOption(option, <throttleOptionType>{
+    option = initOption(option, <throttleOptionType>{
         time: 200,
         keep: false,
         opportunity: "end"

package/types/Canvas.d.ts

@@ -297,6 +297,15 @@ export default interface CanvasType {
      */
     createRadialGradient(cx: number, cy: number, r: number): GradientType<CanvasGradient>
 
+    /**
+     * 创建角度渐变
+     * @param cx 中心
+     * @param cy
+     * @param beginDeg 开始弧度
+     * @param deg 跨越弧度，可选，默认2PI
+     */
+    createConicGradient(cx: number, cy: number, beginDeg: number, deg?: number): GradientType<CanvasGradient>
+
     /**
      * 获取指定位置颜色
      * @param x
@@ -326,5 +335,5 @@ export default interface CanvasType {
      * @param eventName 事件名称
      * @param callback 回调函数
      */
-    bind(eventName: string, callback: (regionName: string) => void): this
+    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void): this
 }

package/types/assemble.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 步进生成器
+ */
+export default interface assembleType {
+    (begin: number, end: number, step: number, count: number): () => Array<number>
+}