vislite 0.8.0 → 0.8.1-alpha.0

package/lib/viewHandler/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.8.0
+* VISLite JavaScript Library v0.8.1-alpha.0
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Mar 02 2024 12:41:38 GMT+0800 (中国标准时间)
+* Publish Date:  Tue Apr 02 2024 14:46:44 GMT+0800 (China Standard Time)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -14,124 +14,124 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite_viewHandler = factory());
 })(this, (function () { 'use strict';
 
-    var mousePosition = function (el, event) {
-        var bounding = el.getBoundingClientRect();
-        return {
-            "x": event.clientX - bounding.left,
-            "y": event.clientY - bounding.top
-        };
-    };
-    var getKeyString = function (event) {
-        return {
-            37: "left",
-            38: "up",
-            39: "right",
-            40: "down",
-        }[event.keyCode || event.which];
-    };
-    function viewHandler (callback) {
-        var el = document.getElementsByTagName('body')[0];
-        el.addEventListener("keydown", function (event) {
-            var keyCode = getKeyString(event);
-            if (keyCode == 'up') {
-                callback({
-                    type: "lookUp",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'down') {
-                callback({
-                    type: "lookDown",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'left') {
-                callback({
-                    type: "lookLeft",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'right') {
-                callback({
-                    type: "lookRight",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-        });
-        var mouseP = null;
-        var doMove = function (event) {
-            if (mouseP == null) {
-                callback({
-                    type: "hover",
-                    normal: [],
-                    value: 0,
-                    event: event
-                });
-            }
-            else {
-                var tempMouseP = mousePosition(el, event);
-                var normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y];
-                var rotateNormal = [
-                    normal[1],
-                    normal[0],
-                    0
-                ];
-                if (rotateNormal[0] == 0 && rotateNormal[1] == 0)
-                    return;
-                callback({
-                    type: "rotate",
-                    normal: rotateNormal,
-                    value: (Math.abs(tempMouseP.x - mouseP.x) + Math.abs(tempMouseP.y - mouseP.y)) * 0.01,
-                    event: event
-                });
-                mouseP = tempMouseP;
-            }
-        };
-        el.addEventListener("mousedown", function (event) {
-            mouseP = mousePosition(el, event);
-        });
-        el.addEventListener("mouseup", function () {
-            mouseP = null;
-        });
-        el.addEventListener("mousemove", function (event) {
-            doMove(event);
-        });
-        el.addEventListener("touchend", function () {
-            mouseP = null;
-        });
-        el.addEventListener("touchstart", function (event) {
-            mouseP = mousePosition(el, event);
-        });
-        el.addEventListener("touchmove", function (event) {
-            doMove(event.touches[0]);
-        });
-        var doScale = function (value, event) {
-            if (value == 0)
-                return;
-            var baseTimes = 0.899;
-            callback({
-                type: "scale",
-                value: value < 0 ? baseTimes : 2 - baseTimes,
-                normal: [],
-                event: event
-            });
-        };
-        el.addEventListener("mousewheel", function (event) {
-            doScale(event.wheelDelta, event);
-        });
-        if (window.addEventListener) {
-            window.addEventListener('DOMMouseScroll', function (event) {
-                doScale(-1 * event.detail, event);
-            }, false);
-        }
+    var mousePosition = function (el, event) {
+        var bounding = el.getBoundingClientRect();
+        return {
+            "x": event.clientX - bounding.left,
+            "y": event.clientY - bounding.top
+        };
+    };
+    var getKeyString = function (event) {
+        return {
+            37: "left",
+            38: "up",
+            39: "right",
+            40: "down",
+        }[event.keyCode || event.which];
+    };
+    function viewHandler (callback) {
+        var el = document.getElementsByTagName('body')[0];
+        el.addEventListener("keydown", function (event) {
+            var keyCode = getKeyString(event);
+            if (keyCode == 'up') {
+                callback({
+                    type: "lookUp",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+            else if (keyCode == 'down') {
+                callback({
+                    type: "lookDown",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+            else if (keyCode == 'left') {
+                callback({
+                    type: "lookLeft",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+            else if (keyCode == 'right') {
+                callback({
+                    type: "lookRight",
+                    normal: [],
+                    value: 0.1,
+                    event: event
+                });
+            }
+        });
+        var mouseP = null;
+        var doMove = function (event) {
+            if (mouseP == null) {
+                callback({
+                    type: "hover",
+                    normal: [],
+                    value: 0,
+                    event: event
+                });
+            }
+            else {
+                var tempMouseP = mousePosition(el, event);
+                var normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y];
+                var rotateNormal = [
+                    normal[1],
+                    normal[0],
+                    0
+                ];
+                if (rotateNormal[0] == 0 && rotateNormal[1] == 0)
+                    return;
+                callback({
+                    type: "rotate",
+                    normal: rotateNormal,
+                    value: (Math.abs(tempMouseP.x - mouseP.x) + Math.abs(tempMouseP.y - mouseP.y)) * 0.01,
+                    event: event
+                });
+                mouseP = tempMouseP;
+            }
+        };
+        el.addEventListener("mousedown", function (event) {
+            mouseP = mousePosition(el, event);
+        });
+        el.addEventListener("mouseup", function () {
+            mouseP = null;
+        });
+        el.addEventListener("mousemove", function (event) {
+            doMove(event);
+        });
+        el.addEventListener("touchend", function () {
+            mouseP = null;
+        });
+        el.addEventListener("touchstart", function (event) {
+            mouseP = mousePosition(el, event);
+        });
+        el.addEventListener("touchmove", function (event) {
+            doMove(event.touches[0]);
+        });
+        var doScale = function (value, event) {
+            if (value == 0)
+                return;
+            var baseTimes = 0.899;
+            callback({
+                type: "scale",
+                value: value < 0 ? baseTimes : 2 - baseTimes,
+                normal: [],
+                event: event
+            });
+        };
+        el.addEventListener("mousewheel", function (event) {
+            doScale(event.wheelDelta, event);
+        });
+        if (window.addEventListener) {
+            window.addEventListener('DOMMouseScroll', function (event) {
+                doScale(-1 * event.detail, event);
+            }, false);
+        }
     }
 
     return viewHandler;

package/lib/viewHandler/index.umd.min.js

@@ -1,11 +1,11 @@
 /*!
-* VISLite JavaScript Library v0.8.0
+* VISLite JavaScript Library v0.8.1-alpha.0
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Mar 02 2024 12:41:38 GMT+0800 (中国标准时间)
+* Publish Date:  Tue Apr 02 2024 14:46:44 GMT+0800 (China Standard Time)
 */
 var e,n;e=this,n=function(){"use strict";var e=function(e,n){var t=e.getBoundingClientRect();return{x:n.clientX-t.left,y:n.clientY-t.top}};return function(n){var t=document.getElementsByTagName("body")[0];t.addEventListener("keydown",(function(e){var t=function(e){return{37:"left",38:"up",39:"right",40:"down"}[e.keyCode||e.which]}(e);"up"==t?n({type:"lookUp",normal:[],value:.1,event:e}):"down"==t?n({type:"lookDown",normal:[],value:.1,event:e}):"left"==t?n({type:"lookLeft",normal:[],value:.1,event:e}):"right"==t&&n({type:"lookRight",normal:[],value:.1,event:e})}));var o=null,i=function(i){if(null==o)n({type:"hover",normal:[],value:0,event:i});else{var u=e(t,i),l=[u.x-o.x,u.y-o.y],a=[l[1],l[0],0];if(0==a[0]&&0==a[1])return;n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y)),event:i}),o=u}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e,t){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[],event:t})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta,e)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail,e)}),!1)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).VISLite_viewHandler=n();

package/miniprogram/ui-canvas/drawImage.js

@@ -0,0 +1,34 @@
+export default function (_this, drawImage, canvas) {
+    return function (imgUrl, x, y, w, h) {
+        return new Promise((resolve) => {
+
+            let doit = (imgsrc) => {
+                if (canvas.createImage) {
+                    let img = canvas.createImage();
+                    img.onload = function () {
+                        drawImage.call(_this, img, x, y, w, h, true);
+                        resolve({});
+                    };
+                    img.src = imgsrc;
+                }
+
+                // 低版本兼容
+                else {
+                    drawImage.call(_this, imgsrc, x, y, w, h, true);
+                    resolve({});
+                }
+            };
+
+            if (/^http/.test(imgUrl)) {
+                wx.downloadFile({
+                    url: imgUrl,
+                    success: function (res) {
+                        doit(res.tempFilePath);
+                    },
+                })
+            } else {
+                doit(imgUrl);
+            }
+        });
+    };
+};

package/miniprogram/ui-canvas/index.js

@@ -1,4 +1,5 @@
 import OralCanvas from "../../lib/OralCanvas/index.es.js";
+import drawImage from "./drawImage.js";
 
 let dpr = wx.getSystemInfoSync().pixelRatio;
 
@@ -49,14 +50,14 @@ Component({
                                     ctx.scale(dpr, dpr);
                                 }
 
-                                doback(ctx);
+                                doback(ctx, idName != 'region' ? canvas : null);
                             });
                     } else {
                         doback(null);
                     }
                 };
 
-                getCanvasContext("painter", painter => {
+                getCanvasContext("painter", (painter, panvas) => {
                     getCanvasContext("region", region => {
                         this.data.help.instance = new OralCanvas({
                             getContext() {
@@ -78,6 +79,13 @@ Component({
                                 }, this);
                             })
                         };
+
+                        this.data.help.instance.drawImage = drawImage(
+                            this.data.help.instance,
+                            this.data.help.instance.drawImage,
+                            panvas
+                        );
+
                         resolve(this.data.help.instance);
                     });
                 });

package/package/getWebGLContext/index.ts

@@ -1,41 +1,41 @@
-import getWebGLContext from "../../src/common/webgl/getWebGLContext"
-import type { WebGLmodeType } from "../../types/getWebGLContext"
-
-export default (el: HTMLElement | null, scale: number = 1, mode?: WebGLmodeType) => {
-    if (!el) {
-        throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
-    }
-
-    let width = el.clientWidth, height = el.clientHeight
-
-    let ViewCanvas: HTMLCanvasElement
-
-    let _el = el as any
-
-    // 如果已经初始化过了
-    if (_el._vislite_canvas_) {
-        ViewCanvas = _el._vislite_canvas_
-    }
-
-    // 否则就初始化
-    else {
-
-        ViewCanvas = document.createElement('canvas')
-        el.appendChild(ViewCanvas)
-
-        _el._vislite_canvas_ = ViewCanvas
-
-        el.setAttribute('vislite', 'WebGL')
-
-    }
-
-    // 设置画布大小
-
-    ViewCanvas.style.width = width + "px"
-    ViewCanvas.setAttribute('width', width + "")
-
-    ViewCanvas.style.height = height + "px"
-    ViewCanvas.setAttribute('height', height + "")
-
-    return getWebGLContext(ViewCanvas, scale, {}, mode)
+import getWebGLContext from "../../src/common/webgl/getWebGLContext"
+import type { WebGLmodeType } from "../../types/getWebGLContext"
+
+export default (el: HTMLElement | null, scale: number = 1, mode?: WebGLmodeType) => {
+    if (!el) {
+        throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
+    }
+
+    let width = el.clientWidth, height = el.clientHeight
+
+    let ViewCanvas: HTMLCanvasElement
+
+    let _el = el as any
+
+    // 如果已经初始化过了
+    if (_el._vislite_canvas_) {
+        ViewCanvas = _el._vislite_canvas_
+    }
+
+    // 否则就初始化
+    else {
+
+        ViewCanvas = document.createElement('canvas')
+        el.appendChild(ViewCanvas)
+
+        _el._vislite_canvas_ = ViewCanvas
+
+        el.setAttribute('vislite', 'WebGL')
+
+    }
+
+    // 设置画布大小
+
+    ViewCanvas.style.width = width + "px"
+    ViewCanvas.setAttribute('width', width + "")
+
+    ViewCanvas.style.height = height + "px"
+    ViewCanvas.setAttribute('height', height + "")
+
+    return getWebGLContext(ViewCanvas, scale, {}, mode)
 }

package/package.json

@@ -1,70 +1,70 @@
-{
-  "name": "vislite",
-  "version": "0.8.0",
-  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
-  "main": "./lib/index.umd.min.js",
-  "typings": "./types/index.d.ts",
-  "unpkg": "./lib/index.umd.min.js",
-  "sideEffects": false,
-  "scripts": {
-    "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",
-    "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": "0.8.1-alpha.0",
+  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
+  "main": "./lib/index.umd.min.js",
+  "typings": "./types/index.d.ts",
+  "unpkg": "./lib/index.umd.min.js",
+  "sideEffects": false,
+  "scripts": {
+    "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",
+    "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"
+  }
+}