vislite 0.7.0-alpha.0 → 0.7.0

package/src/Matrix4/transform.ts

@@ -1,64 +1,64 @@
-/**
- * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
- * 计算出两个变换矩阵
- * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
- */
-export default function (a1: number, b1: number, c1: number, a2: number, b2: number, c2: number) {
-
-    if (typeof a1 === 'number' && typeof b1 === 'number') {
-
-        // 如果设置两个点
-        // 表示二维上围绕某个点旋转
-        if (typeof c1 !== 'number') {
-            c1 = 0
-            a2 = a1
-            b2 = b1
-            c2 = 1
-        }
-        // 只设置三个点(设置不足六个点都认为只设置了三个点)
-        // 表示围绕从原点出发的射线旋转
-        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-            a2 = a1
-            b2 = b1
-            c2 = c1
-            a1 = 0
-            b1 = 0
-            c1 = 0
-        }
-
-        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
-
-        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
-            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
-            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
-
-            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
-            c = c2 - c1,
-
-            sqrt2 = Math.sqrt(b * b + c * c),
-            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
-            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
-
-        return [
-
-            // 任意射线变成OZ轴变换矩阵
-            [
-                cos1, cos2 * sin1, sin1 * sin2, 0,
-                -sin1, cos1 * cos2, cos1 * sin2, 0,
-                0, -sin2, cos2, 0,
-                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-            ],
-
-            // OZ轴变回原来的射线的变换矩阵
-            [
-                cos1, -sin1, 0, 0,
-                cos2 * sin1, cos2 * cos1, -sin2, 0,
-                sin1 * sin2, cos1 * sin2, cos2, 0,
-                a1, b1, c1, 1
-            ]
-
-        ]
-    } else {
-        throw new Error('a1 and b1 is required!')
-    }
-}
+/**
+ * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
+ * 计算出两个变换矩阵
+ * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
+ */
+export default function (a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
+
+    if (typeof a1 === 'number' && typeof b1 === 'number') {
+
+        // 如果设置两个点
+        // 表示二维上围绕某个点旋转
+        if (typeof c1 !== 'number') {
+            c1 = 0
+            a2 = a1
+            b2 = b1
+            c2 = 1
+        }
+        // 只设置三个点(设置不足六个点都认为只设置了三个点)
+        // 表示围绕从原点出发的射线旋转
+        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
+            a2 = a1
+            b2 = b1
+            c2 = c1
+            a1 = 0
+            b1 = 0
+            c1 = 0
+        }
+
+        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
+
+        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
+            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
+            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
+
+            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
+            c = c2 - c1,
+
+            sqrt2 = Math.sqrt(b * b + c * c),
+            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
+            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
+
+        return [
+
+            // 任意射线变成OZ轴变换矩阵
+            [
+                cos1, cos2 * sin1, sin1 * sin2, 0,
+                -sin1, cos1 * cos2, cos1 * sin2, 0,
+                0, -sin2, cos2, 0,
+                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
+            ],
+
+            // OZ轴变回原来的射线的变换矩阵
+            [
+                cos1, -sin1, 0, 0,
+                cos2 * sin1, cos2 * cos1, -sin2, 0,
+                sin1 * sin2, cos1 * sin2, cos2, 0,
+                a1, b1, c1, 1
+            ]
+
+        ]
+    } else {
+        throw new Error('a1 and b1 is required!')
+    }
+}

package/src/WebGL.ts

@@ -1,67 +1,67 @@
-import type WebGLOptionType from '../types/WebGLOption'
-import type WebGLType from '../types/WebGL'
-
-import OralWebGL from './common/webgl/index'
-import mergeOption from './common/mergeOption'
-
-class WebGL extends OralWebGL implements WebGLType {
-    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
-        if (!el) {
-            throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = mergeOption(option, {
-            region: true
-        })
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-
-            if (option.region) {
-
-                RegionCanvas = document.createElement('canvas')
-                el.appendChild(RegionCanvas)
-
-                RegionCanvas.style.position = 'absolute'
-                RegionCanvas.style.zIndex = "-1"
-                RegionCanvas.style.opacity = "0"
-
-            }
-
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'WebGL')
-        }
-
-        // 设置画布大小
-        for (const canvas of [ViewCanvas, RegionCanvas]) {
-
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', width + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', height + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas)
-    }
-}
-
+import type WebGLOptionType from '../types/WebGLOption'
+import type WebGLType from '../types/WebGL'
+
+import OralWebGL from './common/webgl/index'
+import mergeOption from './common/mergeOption'
+
+class WebGL extends OralWebGL implements WebGLType {
+    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
+        if (!el) {
+            throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = mergeOption(option, {
+            region: true
+        })
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+
+            if (option.region) {
+
+                RegionCanvas = document.createElement('canvas')
+                el.appendChild(RegionCanvas)
+
+                RegionCanvas.style.position = 'absolute'
+                RegionCanvas.style.zIndex = "-1"
+                RegionCanvas.style.opacity = "0"
+
+            }
+
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'WebGL')
+        }
+
+        // 设置画布大小
+        for (const canvas of [ViewCanvas, RegionCanvas]) {
+
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', width + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', height + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas)
+    }
+}
+
 export default WebGL

package/src/common/assemble.ts

@@ -1,23 +1,23 @@
-export default function (begin: number, end: number, step: number, count: number) {
-    const val = []
-    for (let index = 0; index < count; index++) val[index] = begin
-
-    // 非常类似进制数，每次调用都+1
-    return function () {
-        for (let i = 0; i < count; i++) {
-
-            // 如果当前位可以进1
-            if (val[i] + step < end) {
-                val[i] = +(val[i] + step).toFixed(7)
-                break
-            }
-
-            // 如果当前位不可以，那当前位归0，尝试下一位
-            else if (i < count - 1) {
-                val[i] = begin
-            }
-        }
-
-        return val
-    }
+export default function (begin: number, end: number, step: number, count: number) {
+    const val: Array<number> = []
+    for (let index = 0; index < count; index++) val[index] = begin
+
+    // 非常类似进制数，每次调用都+1
+    return function () {
+        for (let i = 0; i < count; i++) {
+
+            // 如果当前位可以进1
+            if (val[i] + step < end) {
+                val[i] = +(val[i] + step).toFixed(7)
+                break
+            }
+
+            // 如果当前位不可以，那当前位归0，尝试下一位
+            else if (i < count - 1) {
+                val[i] = begin
+            }
+        }
+
+        return val
+    }
 }

package/src/common/canvas/index.ts

@@ -1,177 +1,177 @@
-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'
-
-// 属性名向下兼容
-const oldAttrName = {
-    "font-size": "fontSize",
-    "font-family": "fontFamily",
-    "font-weight": "fontWeight",
-    "font-style": "fontStyle",
-    "arc-start-cap": "arcStartCap",
-    "arc-end-cap": "arcEndCap",
-}
-
-class Canvas extends PainterRender {
-    readonly name: string = "Canvas"
-
-    private __regionList = {} //区域映射表
-
-    // 步长由1改为10是为了优化区域计算有时候出错问题
-    // 2023年7月6日 于南京
-    private __regionAssemble = assemble(0, 255, 10, 3)
-
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement, opts: CanvasOptsType = {}) {
-        super(
-            ViewCanvas,
-            opts,
-            RegionCanvas ? new PainterRender(RegionCanvas, {
-                willReadFrequently: true,
-            }) : null, true
-        )
-
-        this.setRegion("")
-    }
-
-    config(configs: CanvasConfigType) {
-        for (const key in configs) {
-            const _key = oldAttrName[key] || key
-            this.useConfig(_key, configs[key])
-        }
-
-        return this
-    }
-
-    // 是否绘制的内容只需要进行区域记录
-    onlyRegion(flag: boolean) {
-        this.__onlyRegion = 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,
-            height: this.painter.canvas.height
-        }
-    }
-
-    // 线性渐变
-    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) {
-        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 } from "./gradient"
+import { initText } from './config'
+
+// 属性名向下兼容
+const oldAttrName = {
+    "font-size": "fontSize",
+    "font-family": "fontFamily",
+    "font-weight": "fontWeight",
+    "font-style": "fontStyle",
+    "arc-start-cap": "arcStartCap",
+    "arc-end-cap": "arcEndCap",
+}
+
+class Canvas extends PainterRender {
+    readonly name: string = "Canvas"
+
+    private __regionList = {} //区域映射表
+
+    // 步长由1改为10是为了优化区域计算有时候出错问题
+    // 2023年7月6日 于南京
+    private __regionAssemble = assemble(0, 255, 10, 3)
+
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}) {
+        super(
+            ViewCanvas,
+            opts,
+            RegionCanvas ? new PainterRender(RegionCanvas, {
+                willReadFrequently: true,
+            }) : undefined, true
+        )
+
+        this.setRegion("")
+    }
+
+    config(configs: CanvasConfigType) {
+        for (const key in configs) {
+            const _key = oldAttrName[key] || key
+            this.useConfig(_key, configs[key])
+        }
+
+        return this
+    }
+
+    // 是否绘制的内容只需要进行区域记录
+    onlyRegion(flag: boolean) {
+        this.__onlyRegion = 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,
+            height: this.painter.canvas.height
+        }
+    }
+
+    // 线性渐变
+    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) {
+        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