vislite 1.9.0-alpha.2 → 1.9.1

package/src/common/canvas/index.ts

@@ -1,189 +1,189 @@
-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'
-import defaultFactory from "./default"
-import { initOption } from "../option"
-
-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 as any)[key])
-        }
-
-        return this
-    }
-
-    reset(config: CanvasConfigType = {}) {
-        this.config(initOption(config, defaultFactory() as CanvasConfigType))
-        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 as any)[regionName] == void 0) {
-                    const tempColor = this.__regionAssemble();
-                    (this.__regionList as any)[regionName] =
-                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
-                }
-
-                this.__region.useConfig("fillStyle", (this.__regionList as any)[regionName]) &&
-                    this.__region.useConfig("strokeStyle", (this.__regionList as any)[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 as any)[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
+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'
+import defaultFactory from "./default"
+import { initOption } from "../option"
+
+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 as any)[key])
+        }
+
+        return this
+    }
+
+    reset(config: CanvasConfigType = {}) {
+        this.config(initOption(config, defaultFactory() as CanvasConfigType))
+        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 as any)[regionName] == void 0) {
+                    const tempColor = this.__regionAssemble();
+                    (this.__regionList as any)[regionName] =
+                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
+                }
+
+                this.__region.useConfig("fillStyle", (this.__regionList as any)[regionName]) &&
+                    this.__region.useConfig("strokeStyle", (this.__regionList as any)[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 as any)[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/canvas/texts.ts

@@ -1,19 +1,19 @@
-export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
-
-    let lineNumber = 0, content = ""
-    for (let i = 0; i < contents.length; i++) {
-        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
-            lineNumber += 1
-            doback(content, (lineNumber - 0.5) * height)
-
-            content = contents[i]
-        } else if (i == contents.length - 1) {
-            lineNumber += 1
-            doback(content + contents[i], (lineNumber - 0.5) * height)
-        } else {
-            content += contents[i]
-        }
-    }
-
-    return lineNumber * height
+export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
+
+    let lineNumber = 0, content = ""
+    for (let i = 0; i < contents.length; i++) {
+        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
+            lineNumber += 1
+            doback(content, (lineNumber - 0.5) * height)
+
+            content = contents[i]
+        } else if (i == contents.length - 1) {
+            lineNumber += 1
+            doback(content + contents[i], (lineNumber - 0.5) * height)
+        } else {
+            content += contents[i]
+        }
+    }
+
+    return lineNumber * height
 }

package/src/common/map/getBoundary.ts

@@ -1,16 +1,16 @@
-import { mllData } from "./tool"
-
-export default function (...geos: any[]) {
-    let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
-
-    for (const geoJson of geos) {
-        const [_minLongitude, _maxLongitude, _minLatitude, _maxLatitude] = mllData(geoJson)
-
-        if (minLongitude == void 0 || _minLongitude < minLongitude) minLongitude = _minLongitude
-        if (maxLongitude == void 0 || _maxLongitude > maxLongitude) maxLongitude = _maxLongitude
-        if (minLatitude == void 0 || _minLatitude < minLatitude) minLatitude = _minLatitude
-        if (maxLatitude == void 0 || _maxLatitude > maxLatitude) maxLatitude = _maxLatitude
-    }
-
-    return [minLongitude, maxLongitude, minLatitude, maxLatitude]
+import { mllData } from "./tool"
+
+export default function (...geos: any[]) {
+    let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
+
+    for (const geoJson of geos) {
+        const [_minLongitude, _maxLongitude, _minLatitude, _maxLatitude] = mllData(geoJson)
+
+        if (minLongitude == void 0 || _minLongitude < minLongitude) minLongitude = _minLongitude
+        if (maxLongitude == void 0 || _maxLongitude > maxLongitude) maxLongitude = _maxLongitude
+        if (minLatitude == void 0 || _minLatitude < minLatitude) minLatitude = _minLatitude
+        if (maxLatitude == void 0 || _maxLatitude > maxLatitude) maxLatitude = _maxLatitude
+    }
+
+    return [minLongitude, maxLongitude, minLatitude, maxLatitude]
 }

package/src/common/map/tool.ts

@@ -1,30 +1,30 @@
-export function mllData(geoJson: any) {
-    let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
-
-    const forPolygon = function (coordinates: any) {
-        for (let j = 0; j < coordinates.length; j++) {
-            for (let k = 0; k < coordinates[j].length; k++) {
-                const longitude = coordinates[j][k][0], latitude = coordinates[j][k][1]
-
-                if (minLongitude == void 0 || minLongitude > longitude) minLongitude = longitude
-                if (maxLongitude == void 0 || maxLongitude < longitude) maxLongitude = longitude
-
-                if (minLatitude == void 0 || minLatitude > latitude) minLatitude = latitude
-                if (maxLatitude == void 0 || maxLatitude < latitude) maxLatitude = latitude
-            }
-        }
-    };
-
-    const features = geoJson.features
-    for (let i = 0; i < features.length; i++) {
-        if (features[i].geometry.type == "Polygon") {
-            forPolygon(features[i].geometry.coordinates)
-        } else if (features[i].geometry.type == "MultiPolygon") {
-            for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
-                forPolygon(features[i].geometry.coordinates[j])
-            }
-        }
-    }
-
-    return [minLongitude, maxLongitude, minLatitude, maxLatitude]
+export function mllData(geoJson: any) {
+    let minLongitude: any = null, maxLongitude: any = null, minLatitude: any = null, maxLatitude: any = null
+
+    const forPolygon = function (coordinates: any) {
+        for (let j = 0; j < coordinates.length; j++) {
+            for (let k = 0; k < coordinates[j].length; k++) {
+                const longitude = coordinates[j][k][0], latitude = coordinates[j][k][1]
+
+                if (minLongitude == void 0 || minLongitude > longitude) minLongitude = longitude
+                if (maxLongitude == void 0 || maxLongitude < longitude) maxLongitude = longitude
+
+                if (minLatitude == void 0 || minLatitude > latitude) minLatitude = latitude
+                if (maxLatitude == void 0 || maxLatitude < latitude) maxLatitude = latitude
+            }
+        }
+    };
+
+    const features = geoJson.features
+    for (let i = 0; i < features.length; i++) {
+        if (features[i].geometry.type == "Polygon") {
+            forPolygon(features[i].geometry.coordinates)
+        } else if (features[i].geometry.type == "MultiPolygon") {
+            for (let j = 0; j < features[i].geometry.coordinates.length; j++) {
+                forPolygon(features[i].geometry.coordinates[j])
+            }
+        }
+    }
+
+    return [minLongitude, maxLongitude, minLatitude, maxLatitude]
 }

package/src/common/option.ts

@@ -1,30 +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)
+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/setStyle.ts

@@ -1,6 +1,6 @@
-// 修改样式
-export default function (el: HTMLElement | SVGElement, styles: any) {
-    for (const key in styles) {
-        el.style[key as any] = styles[key]
-    }
+// 修改样式
+export default function (el: HTMLElement | SVGElement, styles: any) {
+    for (const key in styles) {
+        el.style[key as any] = styles[key]
+    }
 }