vislite 1.1.0 → 1.2.0-alpha.1

package/miniprogram/ui-canvas/index.js

@@ -1,115 +1,115 @@
-import RawCanvas from "../../lib/RawCanvas/index.es.min.js";
-import drawImage from "./drawImage.js";
-
-let dpr = wx.getSystemInfoSync().pixelRatio;
-
-Component({
-    properties: {
-        width: {
-            type: Number,
-            default: 300
-        },
-        height: {
-            type: Number,
-            default: 150
-        },
-        region: {
-            type: Boolean,
-            default: true
-        }
-    },
-    data: {
-        help: {}
-    },
-    lifetimes: {
-        ready() {
-
-        }
-    },
-    methods: {
-        fetch() {
-            return new Promise((resolve, reject) => {
-
-                let getCanvasContext = (idName, doback) => {
-                    if (idName != 'region' || this.data.region) {
-                        const query = wx.createSelectorQuery().in(this);
-                        query.select('#' + idName)
-                            .fields({ node: true, size: true })
-                            .exec((res) => {
-                                const canvas = res[0].node;
-                                const ctx = canvas.getContext('2d');
-
-                                canvas.width = res[0].width * (idName == "region" ? 1 : dpr);
-                                canvas.height = res[0].height * (idName == "region" ? 1 : dpr);
-
-                                if (idName != "region") {
-                                    ctx.scale(dpr, dpr);
-                                }
-
-                                doback(ctx, idName != 'region' ? canvas : null);
-                            });
-                    } else {
-                        doback(null);
-                    }
-                };
-
-                getCanvasContext("painter", (painter, panvas) => {
-                    getCanvasContext("region", region => {
-                        this.data.help.instance = new RawCanvas({
-                            getContext() {
-                                return painter;
-                            }
-                        }, this.data.region ? {
-                            getContext() {
-                                return region;
-                            }
-                        } : null);
-
-                        this.data.help.instance.toDataURL = () => {
-                            return new Promise((resolveUrl) => {
-                                if (panvas.toDataURL) {
-                                    resolveUrl(panvas.toDataURL());
-                                } else {
-                                    wx.canvasToTempFilePath({
-                                        canvasId: "painter",
-                                        success: function (e) {
-                                            resolveUrl(e.tempFilePath);
-                                        },
-                                        fail: function (e) {
-                                            console.log(e)
-                                        }
-                                    }, this);
-                                }
-                            });
-                        };
-
-                        this.data.help.instance.drawImage = drawImage(
-                            this.data.help.instance,
-                            this.data.help.instance.drawImage,
-                            panvas
-                        );
-
-                        resolve(this.data.help.instance);
-                    });
-                });
-
-            });
-        },
-        doit(event) {
-            let x = event.touches[0].x;
-            let y = event.touches[0].y;
-
-            this.data.help.instance.getRegion(x, y).then((regionName) => {
-                this.triggerEvent('dotouchstart', {
-                    name: regionName,
-                    x: x,
-                    y: y
-                })
-            });
-        },
-        doitstart(event) {
-            this.doit(event);
-        }
-    }
-
-});
+import RawCanvas from "../../lib/RawCanvas/index.es.min.js";
+import drawImage from "./drawImage.js";
+
+let dpr = wx.getSystemInfoSync().pixelRatio;
+
+Component({
+    properties: {
+        width: {
+            type: Number,
+            default: 300
+        },
+        height: {
+            type: Number,
+            default: 150
+        },
+        region: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data: {
+        help: {}
+    },
+    lifetimes: {
+        ready() {
+
+        }
+    },
+    methods: {
+        fetch() {
+            return new Promise((resolve, reject) => {
+
+                let getCanvasContext = (idName, doback) => {
+                    if (idName != 'region' || this.data.region) {
+                        const query = wx.createSelectorQuery().in(this);
+                        query.select('#' + idName)
+                            .fields({ node: true, size: true })
+                            .exec((res) => {
+                                const canvas = res[0].node;
+                                const ctx = canvas.getContext('2d');
+
+                                canvas.width = res[0].width * (idName == "region" ? 1 : dpr);
+                                canvas.height = res[0].height * (idName == "region" ? 1 : dpr);
+
+                                if (idName != "region") {
+                                    ctx.scale(dpr, dpr);
+                                }
+
+                                doback(ctx, idName != 'region' ? canvas : null);
+                            });
+                    } else {
+                        doback(null);
+                    }
+                };
+
+                getCanvasContext("painter", (painter, panvas) => {
+                    getCanvasContext("region", region => {
+                        this.data.help.instance = new RawCanvas({
+                            getContext() {
+                                return painter;
+                            }
+                        }, this.data.region ? {
+                            getContext() {
+                                return region;
+                            }
+                        } : null);
+
+                        this.data.help.instance.toDataURL = () => {
+                            return new Promise((resolveUrl) => {
+                                if (panvas.toDataURL) {
+                                    resolveUrl(panvas.toDataURL());
+                                } else {
+                                    wx.canvasToTempFilePath({
+                                        canvasId: "painter",
+                                        success: function (e) {
+                                            resolveUrl(e.tempFilePath);
+                                        },
+                                        fail: function (e) {
+                                            console.log(e)
+                                        }
+                                    }, this);
+                                }
+                            });
+                        };
+
+                        this.data.help.instance.drawImage = drawImage(
+                            this.data.help.instance,
+                            this.data.help.instance.drawImage,
+                            panvas
+                        );
+
+                        resolve(this.data.help.instance);
+                    });
+                });
+
+            });
+        },
+        doit(event) {
+            let x = event.touches[0].x;
+            let y = event.touches[0].y;
+
+            this.data.help.instance.getRegion(x, y).then((regionName) => {
+                this.triggerEvent('dotouchstart', {
+                    name: regionName,
+                    x: x,
+                    y: y
+                })
+            });
+        },
+        doitstart(event) {
+            this.doit(event);
+        }
+    }
+
+});

package/package/RawCanvas/index.ts

@@ -1,3 +1,3 @@
-import RawCanvas from "../../src/common/canvas/index"
-
+import RawCanvas from "../../src/common/canvas/index"
+
 export default RawCanvas

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "vislite",
-  "version": "1.1.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": {
-    "init": "npm install && devby --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",
-    "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-typescript": "^11.1.0",
-    "@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",
-    "karma-jasmine": "^4.0.1",
-    "karma-webpack": "^5.0.0",
-    "pageby": "^0.1.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"
-  }
-}
+{
+  "name": "vislite",
+  "version": "1.2.0-alpha.1",
+  "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": {
+    "init": "npm install && devby --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",
+    "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-typescript": "^11.1.0",
+    "@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",
+    "karma-jasmine": "^4.0.1",
+    "karma-webpack": "^5.0.0",
+    "pageby": "^0.1.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"
+  }
+}

package/src/Canvas.ts

@@ -6,6 +6,7 @@ import mergeOption from './common/mergeOption'
 
 class Canvas extends OralCanvas implements CanvasType {
     private __canvas: HTMLCanvasElement
+    private __el: HTMLElement
     constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
         if (!el) {
             throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
@@ -61,6 +62,7 @@ class Canvas extends OralCanvas implements CanvasType {
         }, 2)
 
         this.__canvas = ViewCanvas
+        this.__el = el
         this.painter.scale(2, 2)
     }
 
@@ -69,6 +71,15 @@ class Canvas extends OralCanvas implements CanvasType {
             resolve(this.__canvas.toDataURL())
         })
     }
+
+    bind(eventName: string, callback: (regionName: string) => void) {
+        this.__el.addEventListener(eventName, (event: any) => {
+            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
+                callback(regionName)
+            })
+        })
+        return this
+    }
 }
 
 export default Canvas