vislite 1.4.0 → 1.5.0-alpha.0

package/package.json

@@ -1,75 +1,75 @@
-{
-  "name": "vislite",
-  "version": "1.4.0",
-  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
-  "main": "./lib/index.umd.min.js",
-  "typings": "./types/index.d.ts",
-  "unpkg": "./lib/index.umd.min.js",
-  "jsdelivr": "./lib/index.umd.min.js",
-  "sideEffects": false,
-  "scripts": {
-    "dev": "webpack serve --config ./build/webpack.config.js",
-    "build": "oipage-cli disk -d ./lib && node ./build/pkg.js",
-    "test": "karma start ./build/karma.config.js",
-    "lint": "eslint src/**/*.ts --fix"
-  },
-  "miniprogram": ".",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/oi-contrib/VISLite.git"
-  },
-  "keywords": [
-    "svg",
-    "webgl",
-    "typescript",
-    "canvas",
-    "vue",
-    "uniapp",
-    "miniprogram",
-    "image2d",
-    "image3d",
-    "oi-contrib",
-    "vislite",
-    "d3",
-    "zxl20070701",
-    "three",
-    "echarts",
-    "datav",
-    "webgpu",
-    "layout",
-    "algorithm"
-  ],
-  "author": {
-    "name": "zxl20070701",
-    "url": "https://zxl20070701.github.io/notebook/home.html"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/oi-contrib/VISLite/issues"
-  },
-  "homepage": "https://oi-contrib.github.io/VISLite",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.0",
-    "@types/jasmine": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "^8.56.0",
-    "karma": "^6.3.10",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-jasmine": "^4.0.1",
-    "karma-webpack": "^5.0.0",
-    "rollup": "^3.20.6",
-    "terser": "^5.17.1",
-    "ts-loader": "^9.2.8",
-    "tslib": "^2.5.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
-  },
-  "dependencies": {
-    "oipage": "^1.3.0"
-  }
-}
+{
+  "name": "vislite",
+  "version": "1.5.0-alpha.0",
+  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
+  "main": "./lib/index.umd.min.js",
+  "typings": "./types/index.d.ts",
+  "unpkg": "./lib/index.umd.min.js",
+  "jsdelivr": "./lib/index.umd.min.js",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "webpack serve --config ./build/webpack.config.js",
+    "build": "oipage-cli disk -d ./lib && node ./build/pkg.js",
+    "test": "karma start ./build/karma.config.js",
+    "lint": "eslint src/**/*.ts --fix"
+  },
+  "miniprogram": ".",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oi-contrib/VISLite.git"
+  },
+  "keywords": [
+    "svg",
+    "webgl",
+    "typescript",
+    "canvas",
+    "vue",
+    "uniapp",
+    "miniprogram",
+    "image2d",
+    "image3d",
+    "oi-contrib",
+    "vislite",
+    "d3",
+    "zxl20070701",
+    "three",
+    "echarts",
+    "datav",
+    "webgpu",
+    "layout",
+    "algorithm"
+  ],
+  "author": {
+    "name": "zxl20070701",
+    "url": "https://zxl20070701.github.io/notebook/home.html"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/oi-contrib/VISLite/issues"
+  },
+  "homepage": "https://oi-contrib.github.io/VISLite",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@types/jasmine": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "eslint": "^8.56.0",
+    "karma": "^6.3.10",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^4.0.1",
+    "karma-webpack": "^5.0.0",
+    "rollup": "^3.20.6",
+    "terser": "^5.17.1",
+    "ts-loader": "^9.2.8",
+    "tslib": "^2.5.0",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "dependencies": {
+    "oipage": "^1.3.0"
+  }
+}

package/src/Canvas.ts

@@ -13,6 +13,11 @@ class Canvas extends OralCanvas implements CanvasType {
         }
 
         option = initOption(option, {
+
+            // 对外暴露自定义缩放倍率（为满足特殊场景，以简化使用）
+            // 2025年7月25日 于秦皇岛
+            scale: 2,
+
             region: true,
             willReadFrequently: false
         })
@@ -50,20 +55,20 @@ class Canvas extends OralCanvas implements CanvasType {
             const canvas = canvasArray[index]
             if (canvas) {
                 canvas.style.width = width + "px"
-                canvas.setAttribute('width', (index * width + width) + "")
+                canvas.setAttribute('width', ((index === 1 ? option.scale as number : 1) * width) + "")
 
                 canvas.style.height = height + "px"
-                canvas.setAttribute('height', (index * height + height) + "")
+                canvas.setAttribute('height', ((index === 1 ? option.scale as number : 1) * height) + "")
             }
         }
 
         super(ViewCanvas, RegionCanvas, {
             willReadFrequently: option.willReadFrequently,
-        }, 2)
+        }, option.scale)
 
         this.__canvas = ViewCanvas
         this.__el = el
-        this.painter.scale(2, 2)
+        this.painter.scale(option.scale as number, option.scale as number)
     }
 
     toDataURL(): Promise<string> {

package/src/SVG.ts

@@ -1,56 +1,56 @@
-import type SVGType from '../types/SVG'
-
-import OralSVG from './common/svg/index'
-
-class SVG extends OralSVG implements SVGType {
-    private __el: HTMLElement
-    constructor(el: HTMLElement | null) {
-        if (!el) {
-            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
-        el.appendChild(ViewSVG)
-
-        ViewSVG.setAttribute("width", width + "")
-        ViewSVG.setAttribute("height", height + "")
-
-        ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
-
-        super(ViewSVG)
-
-        this.__el = el
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            const width = this.__el.clientWidth, height = this.__el.clientHeight
-
-            let img = document.createElement('img');
-
-            img.setAttribute('width', width + "");
-            img.setAttribute('height', height + "");
-            let base64_svg = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" + this.__svg.innerHTML.replace(/"/g, "'") + "</svg>";
-            img.setAttribute('src', base64_svg);
-
-            setTimeout(function () {
-
-                // 准备画布
-                let canvas = document.createElement('canvas');
-                canvas.setAttribute('width', width + "");
-                canvas.setAttribute('height', height + "");
-
-                let painter = canvas.getContext('2d');
-
-                // 绘制截图
-                if (painter) painter.drawImage(img, 0, 0, width, height);
-
-                resolve(canvas.toDataURL());
-            }, 100);
-        })
-    }
-}
-
+import type SVGType from '../types/SVG'
+
+import OralSVG from './common/svg/index'
+
+class SVG extends OralSVG implements SVGType {
+    private __el: HTMLElement
+    constructor(el: HTMLElement | null) {
+        if (!el) {
+            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
+        el.appendChild(ViewSVG)
+
+        ViewSVG.setAttribute("width", width + "")
+        ViewSVG.setAttribute("height", height + "")
+
+        ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
+
+        super(ViewSVG)
+
+        this.__el = el
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            const width = this.__el.clientWidth, height = this.__el.clientHeight
+
+            let img = document.createElement('img');
+
+            img.setAttribute('width', width + "");
+            img.setAttribute('height', height + "");
+            let base64_svg = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" + this.__svg.innerHTML.replace(/"/g, "'") + "</svg>";
+            img.setAttribute('src', base64_svg);
+
+            setTimeout(function () {
+
+                // 准备画布
+                let canvas = document.createElement('canvas');
+                canvas.setAttribute('width', width + "");
+                canvas.setAttribute('height', height + "");
+
+                let painter = canvas.getContext('2d');
+
+                // 绘制截图
+                if (painter) painter.drawImage(img, 0, 0, width, height);
+
+                resolve(canvas.toDataURL());
+            }, 100);
+        })
+    }
+}
+
 export default SVG

package/src/common/canvas/gradient.ts

@@ -1,32 +1,32 @@
-const enhanceGradient = function (gradient: CanvasGradient, calcStop?: Function) {
-    const enhanceGradient = {
-        "value": function () {
-            return gradient
-        },
-        "setColor": function (stop: number, color: string) {
-            gradient.addColorStop(calcStop ? calcStop(stop) : stop, color)
-            return enhanceGradient
-        }
-    };
-    return enhanceGradient
-}
-
-// 线性渐变
-export const linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
-    const gradient = painter.createLinearGradient(x0, y0, x1, y1)
-    return enhanceGradient(gradient)
-}
-
-// 环形渐变
-export const radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
-    const gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
-    return enhanceGradient(gradient)
-}
-
-// 角度渐变
-export const conicGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, startDeg: number, deg?: number) {
-    const gradient = painter.createConicGradient(startDeg, cx, cy)
-    return enhanceGradient(gradient, deg ? (stop: number) => {
-        return deg / (Math.PI * 2) * stop
-    } : void 0)
+const enhanceGradient = function (gradient: CanvasGradient, calcStop?: Function) {
+    const enhanceGradient = {
+        "value": function () {
+            return gradient
+        },
+        "setColor": function (stop: number, color: string) {
+            gradient.addColorStop(calcStop ? calcStop(stop) : stop, color)
+            return enhanceGradient
+        }
+    };
+    return enhanceGradient
+}
+
+// 线性渐变
+export const linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
+    const gradient = painter.createLinearGradient(x0, y0, x1, y1)
+    return enhanceGradient(gradient)
+}
+
+// 环形渐变
+export const radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
+    const gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
+    return enhanceGradient(gradient)
+}
+
+// 角度渐变
+export const conicGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, startDeg: number, deg?: number) {
+    const gradient = painter.createConicGradient(startDeg, cx, cy)
+    return enhanceGradient(gradient, deg ? (stop: number) => {
+        return deg / (Math.PI * 2) * stop
+    } : void 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)
+}