vislite 0.2.0-alpha.7 → 0.2.0

package/lib/viewHandler/index.umd.js

@@ -1,16 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.2.0-alpha.7
+* VISLite JavaScript Library v0.2.0
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 * 
-* 本版本系测试版本，请认真阅读下述说明再使用：
-*
-*【测试版本细则】
-* alpha：内测版本，仅供开发人员提供测试环境而发布，后续的修改可能极具破坏性，非有明确了解前请勿直接用于项目中
-* beta：外测版本，正式发布前的确认测试，或者新功能紧急发布，一般可以直接用于实际项目，因为即使后续发现了问题，直接使用正式版即可，不会有破坏性
+* Publish Date: Sat Jun 03 2023 09:32:28 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -71,10 +67,10 @@
             if (mouseP == null)
                 return;
             var tempMouseP = mousePosition(el, event);
-            var normal = [tempMouseP.x - mouseP.x, mouseP.y - tempMouseP.y];
+            var normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y];
             var rotateNormal = [
                 normal[1],
-                normal[0] * -1,
+                normal[0],
                 0
             ];
             if (rotateNormal[0] == 0 && rotateNormal[1] == 0)

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

@@ -1,15 +1,11 @@
 /*!
-* VISLite JavaScript Library v0.2.0-alpha.7
+* VISLite JavaScript Library v0.2.0
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 * 
-* 本版本系测试版本，请认真阅读下述说明再使用：
-*
-*【测试版本细则】
-* alpha：内测版本，仅供开发人员提供测试环境而发布，后续的修改可能极具破坏性，非有明确了解前请勿直接用于项目中
-* beta：外测版本，正式发布前的确认测试，或者新功能紧急发布，一般可以直接用于实际项目，因为即使后续发现了问题，直接使用正式版即可，不会有破坏性
+* Publish Date: Sat Jun 03 2023 09:32:28 GMT+0800 (中国标准时间)
 */
-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}):"down"==t?n({type:"lookDown",normal:[],value:.1}):"left"==t?n({type:"lookLeft",normal:[],value:.1}):"right"==t&&n({type:"lookRight",normal:[],value:.1})}));var o=null,i=function(i){if(null!=o){var u=e(t,i),l=[u.x-o.x,o.y-u.y],a=[l[1],-1*l[0],0];0==a[0]&&0==a[1]||(n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y))}),o=u)}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(e){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(e){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[]})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail)}),!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();
+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}):"down"==t?n({type:"lookDown",normal:[],value:.1}):"left"==t?n({type:"lookLeft",normal:[],value:.1}):"right"==t&&n({type:"lookRight",normal:[],value:.1})}));var o=null,i=function(i){if(null!=o){var u=e(t,i),l=[u.x-o.x,u.y-o.y],a=[l[1],l[0],0];0==a[0]&&0==a[1]||(n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y))}),o=u)}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(e){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(e){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[]})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail)}),!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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "0.2.0-alpha.7",
+  "version": "0.2.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",

package/src/common/webgl/getShader.ts

@@ -25,12 +25,20 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
 
     void main(){
-        vec4 temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position;
+        vec4 temp = a_position;
+
+        // 应用变换矩阵：屏幕比调平矩阵、世界矩阵、物体矩阵
+        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;
+
+        // 把原生的WebGL使用的左手坐标系变成了右手坐标系
+        temp.z = -1.0 * temp.z;
 
         // 表示眼睛距离vec4(0.0,0.0,1.0)的距离
         float dist = 4.0;
 
         // 使用投影直接计算
+        // 为保证纹理和相对位置正确
+        // x、y、z的改变满足线性变换
         gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));
 
         ${mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : ''}

package/src/common/webgl/index.ts

@@ -2,7 +2,7 @@ import getWebGLContext from './getWebGLContext'
 import Object3DType from '../../../types/Object3D'
 import Scene3DType from '../../../types/Scene3D'
 import getColorFactory from './getColorFactory'
-import Matrix4 from '../../Matrix4/index'
+import Matrix4 from '..//../Matrix4/index'
 import doDraw from './doDraw'
 import assemble from '../assemble'
 
@@ -32,7 +32,7 @@ class WebGL {
         matrix: new Matrix4([
             1, 0, 0, 0,
             0, 1, 0, 0,
-            0, 0, -1, 0,
+            0, 0, 1, 0,
             0, 0, 0, scale
         ])
     }
@@ -131,13 +131,14 @@ class WebGL {
                         }
                     }
                 }, meshWorld, globalWorld)
+
+                this.__getColor = getColorFactory(this.__regionPainter)
             } else {
                 // 画布上
                 doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld)
             }
         }
 
-        this.__getColor = getColorFactory(this.__regionPainter)
     }
 
     render(object3D: Object3DType) {

package/src/common/webgl/texture.ts

@@ -78,6 +78,7 @@ class TextureObject {
 
         // 配置纹理
         painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
+        painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
         painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
         painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
     }

package/src/viewHandler.ts

@@ -71,12 +71,12 @@ export default function (callback: callbackFun) {
         let tempMouseP = mousePosition(el, event)
 
         // 先求解出轨迹向量
-        let normal = [tempMouseP.x - mouseP.x, mouseP.y - tempMouseP.y]
+        let normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y]
 
         // 方向向量旋转90deg得到旋转向量
         let rotateNormal = [
             normal[1],
-            normal[0] * -1,
+            normal[0],
             0
         ]
 

package/types/Object3D.d.ts

@@ -37,7 +37,8 @@ export interface meshType {
         }
 
         // 点、线、还是三角形
-        type: string // "POINTS" | "LINES" | "INE_STRIP" | "LINE_LOOP" | "TRIANGLES" | "TRIANGLE_STRIP" | "TRIANGLE_FAN"
+        // "POINTS" | "LINES" | "INE_STRIP" | "LINE_LOOP" | "TRIANGLES" | "TRIANGLE_STRIP" | "TRIANGLE_FAN"
+        type: string
     }
 
     // 材质
@@ -95,7 +96,7 @@ export interface meshType {
 
 export default interface Object3D {
 
-    // 区域名称，如果设置为空字符串，表示此区域无需记录
+    // 区域名称，不设置或设置为空字符串，表示此区域无需记录
     region?: string
 
     // 变换矩阵

package/types/WebGL.d.ts

@@ -26,4 +26,14 @@ export default interface WebGLType {
      */
     getObject3D(): Object3DType[]
 
+    /**
+     * 设置区域
+     */
+    setRegion(regionName: string | number): this
+
+    /**
+     * 获取区域
+     */
+    getRegion(x: number, y: number): Promise<string>
+
 }

package/uni-app/ui-canvas.vue

@@ -57,10 +57,10 @@ export default {
       help: {},
       viewImg: "",
       // #ifdef H5
-      isH5: true
+      isH5: true,
       // #endif
       // #ifndef H5
-      isH5: false
+      isH5: false,
       // #endif
     };
   },
@@ -75,26 +75,27 @@ export default {
     },
     touchstart: {
       type: Function,
-      default: () => { },
+      default: () => {},
     },
     cover: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   methods: {
     fetch() {
+      let painter, region, painterid, regionid;
       // #ifdef MP-WEIXIN
-      let painter = uni.createCanvasContext("painter", this);
-      let region = uni.createCanvasContext("region", this);
-      let painterid = "painter";
-      let regionid = "region";
+      painter = uni.createCanvasContext("painter", this);
+      region = uni.createCanvasContext("region", this);
+      painterid = "painter";
+      regionid = "region";
       // #endif
       // #ifndef MP-WEIXIN
-      let painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
-      let region = uni.createCanvasContext("region-" + this.uniqueid, this);
-      let painterid = "painter-" + this.uniqueid;
-      let regionid = "region-" + this.uniqueid;
+      painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
+      region = uni.createCanvasContext("region-" + this.uniqueid, this);
+      painterid = "painter-" + this.uniqueid;
+      regionid = "region-" + this.uniqueid;
       // #endif
 
       let _this = this;
@@ -106,6 +107,9 @@ export default {
         },
         {
           getContext() {
+            // #ifdef MP-ALIPAY
+            let getImageData = region.getImageData;
+            // #endif
             region.getImageData = (x, y, width, height) => {
               return new Promise((resolve, reject) => {
                 let options = {
@@ -123,7 +127,7 @@ export default {
                 };
 
                 // #ifdef MP-ALIPAY
-                region.getImageData(options, _this);
+                getImageData(options, _this);
                 // #endif
                 // #ifndef MP-ALIPAY
                 uni.canvasGetImageData(options, _this);
@@ -140,14 +144,16 @@ export default {
 
         // 如果不使用原生渲染
         if (!this.cover && !this.isH5) {
-          uni.canvasToTempFilePath({
-            canvasId: painterid,
-            success: (e) => {
-              this.viewImg = e.tempFilePath;
-            }
-          }, this);
+          uni.canvasToTempFilePath(
+            {
+              canvasId: painterid,
+              success: (e) => {
+                this.viewImg = e.tempFilePath;
+              },
+            },
+            this
+          );
         }
-
       };
       return new Promise((resolve, reject) => {
         this.help.instance.toDataURL = () => {
@@ -171,7 +177,7 @@ export default {
       let doRun = (x, y) => {
         this.help.instance.getRegion(x, y).then((regionName) => {
           // 兼容旧语法
-          if (doback) doback(regionName);
+          if (typeof doback == "function") doback(regionName);
 
           this.$emit("dotouchstart", {
             name: regionName,
@@ -182,30 +188,27 @@ export default {
       };
 
       if (this.cover || this.isH5) {
-
-        // #ifdef MP-ALIPAY
+        let x = event.touches[0].x;
+        let y = event.touches[0].y;
+        doRun(x, y);
+      } else {
         uni
           .createSelectorQuery()
           .selectViewport()
           .scrollOffset()
           .exec((ret) => {
-            let x = event.touches[0].x + ret[0].scrollLeft;
-            let y = event.touches[0].y + ret[0].scrollTop;
-            doRun(x, y);
+            uni
+              .createSelectorQuery()
+              .in(this)
+              .select(".view-" + this.uniqueid)
+              .boundingClientRect((data) => {
+                doRun(
+                  event.touches[0].pageX - data.left - ret[0].scrollLeft,
+                  event.touches[0].pageY - data.top - ret[0].scrollTop
+                );
+              })
+              .exec();
           });
-        // #endif
-        // #ifndef MP-ALIPAY
-        let x = event.touches[0].x;
-        let y = event.touches[0].y;
-        doRun(x, y);
-        // #endif
-
-      } else {
-
-        uni.createSelectorQuery().in(this).select('.view-' + this.uniqueid).boundingClientRect(data => {
-          doRun(event.touches[0].pageX - data.left, event.touches[0].pageY - data.top);
-        }).exec()
-
       }
     },
     doitstart(event) {