vislite 0.4.1-alpha.2 → 0.4.1-beta.0

package/src/common/tree/toInnerTree.ts

@@ -0,0 +1,57 @@
+import type TreeConfigType from '../../../types/TreeConfig'
+
+/**
+ * 根据配置的层次关系（配置的id,child,root）把原始数据变成内部结构，方便后期位置计算
+ *
+ * tempTree[id] = {
+ *  "data": 原始数据,
+ *  "pid": 父亲ID,
+ *  "id": 唯一标识ID,
+ *  "show": boolean,
+ *  "isOpen": boolean,
+ *  "children": [cid1、cid2、...]
+ * }
+ */
+export default (initTree: any, config: TreeConfigType) => {
+    let tempTree = {}
+
+    // 根结点
+    let temp = config.root(initTree), id: number | string, rid: number | string
+    id = rid = config.id(temp)
+    tempTree[id] = {
+        "data": temp,
+        "pid": null,
+        "id": id,
+        "isOpen": true,
+        "show": true,
+        "children": []
+    }
+
+    let num: number = 1
+
+        // 根据传递的原始数据，生成内部统一结构
+        ; (function createTree(pdata: any, pid: number | string) {
+            var children = config.children(pdata, initTree)
+            num += children ? children.length : 0
+            for (let flag = 0; children && flag < children.length; flag++) {
+                id = config.id(children[flag])
+                tempTree[pid].children.push(id);
+                tempTree[id] = {
+                    "data": children[flag],
+                    "pid": pid,
+                    "id": id,
+                    "isOpen": true,
+                    "show": true,
+                    "children": []
+                }
+                createTree(children[flag], id)
+            }
+        })(temp, id)
+
+    return {
+        rid,
+        value: tempTree,
+        num
+    }
+
+}

package/src/common/tree/toPlainTree.ts

@@ -0,0 +1,132 @@
+import type TreeConfigType from '../../../types/TreeConfig'
+
+import toInnerTree from './toInnerTree'
+
+// 可以传递任意格式的树原始数据
+// 只要配置对应的解析方法即可
+export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
+    let treeData = toInnerTree(initTree, config)
+
+    let alltreedata = treeData.value // 维护的树
+    let rootid = treeData.rid // 根结点ID
+
+    if (treeData.num == 1) {
+        alltreedata[rootid].left = 0.5
+        alltreedata[rootid].top = 0.5
+        alltreedata[rootid].show = true
+        return {
+            deep: 1,
+            node: alltreedata,
+            root: rootid,
+            size: 1
+        }
+    } else {
+
+        let beforeDis = [], size = 0, maxDeep = 0
+
+        if (noOpens[rootid]) {
+            alltreedata[rootid].left = 0.5
+            alltreedata[rootid].top = 0.5
+            alltreedata[rootid].show = true
+
+            size = 1
+        } else {
+            ; (function positionCalc(pNode, deep) {
+
+                if (deep > maxDeep) maxDeep = deep
+
+                let flag: number = 0
+                if (!noOpens[pNode.id]) {
+
+                    for (flag = 0; flag < pNode.children.length; flag++)
+
+                        // 因为全部的子结点的位置确定了，父结点的y位置就是子结点的中间位置
+                        // 因此有子结点的，先计算子结点
+                        positionCalc(alltreedata[pNode.children[flag]], deep + 1)
+
+                }
+
+                // left的位置比较简单，deep从0开始编号
+                // 比如deep=0，第一层，left=0+0.5=0.5，也就是根结点
+                alltreedata[pNode.id].left = deep + 0.5
+                if (flag == 0) {
+
+                    // beforeDis是一个数组，用以记录每一层此刻top下边缘（每一层是从上到下）
+                    // 比如一层的第一个，top值最小可以取top=0.5
+                    // 为了方便计算，beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
+                    // 因此设置最低上边缘为-0.5
+                    if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
+                    // 父边缘同意的进行初始化
+                    if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
+
+                    // 添加的新结点top值第一种求法：本层上边缘+1（比如上边缘是-0.5，那么top最小是top=-0.5+1=0.5）
+                    alltreedata[pNode.id].top = beforeDis[deep] + 1
+
+                    let pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
+                    // 计算的原则是：如果第一种可行，选择第一种，否则必须选择第二种
+                    // 判断第一种是否可行的方法就是：如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
+                    if (pTop - 1 < beforeDis[deep - 1])
+                        // 必须保证父亲结点和父亲的前一个兄弟保存1的距离，至少
+                        // 添加的新结点top值的第二种求法：根据孩子取孩子结点的中心top
+                        alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
+
+                } else {
+
+                    // 此刻flag!=0
+                    // 意味着结点有孩子，那么问题就解决了，直接取孩子的中间即可
+                    // 其实，flag==0的分支计算的就是孩子，是没有孩子的叶结点，那是关键
+                    alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
+                }
+
+                // 因为计算孩子的时候
+                // 无法掌握父辈兄弟的情况
+                // 可能会出现父亲和兄弟重叠问题
+                if (alltreedata[pNode.id].top <= beforeDis[deep]) {
+                    let needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
+                        (function doUp(_pid: number | string, _deep: number) {
+                            alltreedata[_pid].top += needUp;
+                            if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
+
+                            for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
+                                doUp(alltreedata[_pid].children[_flag], _deep + 1)
+                            }
+                        })(pNode.id, deep)
+                }
+
+                // 计算好一个结点后，需要更新此刻该层的上边缘
+                beforeDis[deep] = alltreedata[pNode.id].top
+
+                // size在每次计算一个结点后更新，是为了最终绘图的时候知道树有多宽（此处应该叫高）
+                if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
+
+            })(alltreedata[rootid], 0)
+
+        }
+        // 对于不显示的，需要标记一下
+        for (let key in noOpens) {
+            if (noOpens[key]) {
+                alltreedata[key].isOpen = false
+                    ; (function updateHidden(pid, left, top) {
+                        for (let index = 0; index < alltreedata[pid].children.length; index++) {
+                            alltreedata[alltreedata[pid].children[index]].left = left
+                            alltreedata[alltreedata[pid].children[index]].top = top
+                            alltreedata[alltreedata[pid].children[index]].show = false
+
+                            updateHidden(alltreedata[pid].children[index], left, top)
+                        }
+                    })(key, alltreedata[key].left, alltreedata[key].top)
+            }
+        }
+
+        // 传递的参数分别表示：记录了位置信息的树结点集合、根结点ID和树的宽
+        return {
+            "node": alltreedata,
+            "root": rootid,
+            "size": size,
+            "deep": maxDeep + 1
+        }
+
+    }
+
+
+}

package/src/common/webgl/doDraw.ts

@@ -60,6 +60,8 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
         let size = (mesh.material.cube.right.image.value as any).width
 
+        painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
+
         getTexture(type, painter, 'cube').useCube([
             mesh.material.cube.right.image.value,
             mesh.material.cube.left.image.value,

package/src/common/webgl/getShader.ts

@@ -1,72 +1,45 @@
+import type { meshType } from '../../../types/Object3D'
+
 import ShaderObject from './shader'
 
-import { meshType } from '../../../types/Object3D'
+import vsColor from '../../shader/vsColor.c'
+import vsColors from '../../shader/vsColors.c'
+import vsImage from '../../shader/vsImage.c'
+import vsCube from '../../shader/vsCube.c'
+
+import fsColor from '../../shader/fsColor.c'
+import fsColors from '../../shader/fsColors.c'
+import fsImage from '../../shader/fsImage.c'
+import fsCube from '../../shader/fsCube.c'
 
 let shaders = {}
 export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
 
     let uniqueName = type +
-        (mesh.geometry.attributes.normal ? "1" : "0") +
-        (mesh.material.image ? "1" : "0") +
         (mesh.material.color ? "1" : "0") +
         (mesh.material.colors ? "1" : "0") +
+        (mesh.material.image ? "1" : "0") +
         (mesh.material.cube ? "1" : "0")
     if (shaders[uniqueName]) return shaders[uniqueName].use()
 
     // 顶点着色器
-    let vertexShader = `
-    attribute vec4 a_position;
-
-     ${mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : ''}
-
+    let vertexShader = {
+        [type + "1000"]: vsColor,
+        [type + "0100"]: vsColors,
+        [type + "0010"]: vsImage,
+        [type + "0001"]: vsCube
+    }[uniqueName].replace(/uniform +mat4 +u_matrix;/, `
     uniform mat4 u_matrix_world;
     uniform mat4 u_matrix_mesh;
-    uniform mat4 u_matrix_proporion;
-
-    ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
-
-    ${mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : ''}
-
-    void main(){
-        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));' : ''}
-        ${mesh.material.image ? 'v_textcoord = a_textcoord;' : ''}
-        ${mesh.material.colors ? 'v_color=a_color;' : ''}
-     }
- `
+    uniform mat4 u_matrix_proporion;`).replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position")
 
     // 片段（元）着色器
-    let fragmentShader = `
-    precision mediump float;
-
-    ${mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : ''}
-    ${mesh.material.color ? 'uniform vec4 u_color;' : ''}
-    ${mesh.material.cube ? 'uniform samplerCube u_texture;' : ''}
-    ${mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : ''}
-    ${mesh.material.colors ? 'varying vec4 v_color;' : ''}
-
-    void main(){
-        ${mesh.material.color ? 'gl_FragColor = u_color;' : ''}
-        ${mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : ''}
-        ${mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : ''}
-        ${mesh.material.colors ? 'gl_FragColor=v_color;' : ''}
-    }
- `
+    let fragmentShader = {
+        [type + "1000"]: fsColor,
+        [type + "0100"]: fsColors,
+        [type + "0010"]: fsImage,
+        [type + "0001"]: fsCube
+    }[uniqueName]
 
     // 启用着色器
     let shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()

package/src/common/webgl/index.ts

@@ -1,6 +1,7 @@
+import type Object3DType from '../../../types/Object3D'
+import type Scene3DType from '../../../types/Scene3D'
+
 import getWebGLContext from './getWebGLContext'
-import Object3DType from '../../../types/Object3D'
-import Scene3DType from '../../../types/Scene3D'
 import getColorFactory from './getColorFactory'
 import Matrix4 from '../../Matrix4/index'
 import doDraw from './doDraw'
@@ -186,7 +187,7 @@ class WebGL {
         this.__regionName = regionName + ""
 
         if (regionName) {
-            if (this.__regionList[regionName] == undefined) {
+            if (this.__regionList[regionName] == void 0) {
                 this.__regionList[regionName] = [... this.__regionAssemble(), 1]
             }
             this.__regionColor = this.__regionList[regionName]

package/src/common/webgl/texture.ts

@@ -7,11 +7,8 @@ let initTexture = (painter: WebGLRenderingContext, type: number, unit: number) =
     // 创建纹理对象
     let texture = painter.createTexture()
 
-    if (type == painter.TEXTURE_2D) {
-
-        // 开启纹理单元，unit表示开启的编号
-        painter.activeTexture(painter['TEXTURE' + unit])
-    }
+    // 开启纹理单元，unit表示开启的编号
+    painter.activeTexture(painter['TEXTURE' + unit])
 
     // 绑定纹理对象到目标上
     painter.bindTexture(type, texture)

package/src/formatColor.ts

@@ -0,0 +1,45 @@
+let toHex = (value: number) => {
+    let hex = value.toString(16)
+    return hex.length == 1 ? ("0" + hex) : hex
+}
+
+export default function (color: string, format: string) {
+
+    let colorNode = document.getElementsByTagName('head')[0]
+    colorNode.style['color'] = color
+
+    // 获取结点的全部样式
+    let allStyle = document.defaultView && document.defaultView.getComputedStyle ?
+        document.defaultView.getComputedStyle(colorNode, null) :
+        (colorNode as any).currentStyle
+
+    let oralFormat = allStyle.getPropertyValue('color').replace(/rgba?\(/, '').replace(")", "").split(',')
+    for (let index = 0; index < oralFormat.length; index++) {
+        oralFormat[index] = +oralFormat[index]
+    }
+    oralFormat.push(1)
+
+    switch (format) {
+        case "3d": {
+            return [
+                oralFormat[0] / 255,
+                oralFormat[1] / 255,
+                oralFormat[2] / 255,
+                oralFormat[3]
+            ]
+        }
+        case "rgba": {
+            return `rgba(${oralFormat[0]}, ${oralFormat[1]}, ${oralFormat[2]}, ${oralFormat[3]})`
+        }
+        case "rgb": {
+            return `rgb(${oralFormat[0]}, ${oralFormat[1]}, ${oralFormat[2]})`
+        }
+        case "hexAlpha": {
+            return `#${toHex(oralFormat[0])}${toHex(oralFormat[1])}${toHex(oralFormat[2])}${toHex(+(oralFormat[3] * 255).toFixed(0))}`
+        }
+        case "hex": {
+            return `#${toHex(oralFormat[0])}${toHex(oralFormat[1])}${toHex(oralFormat[2])}`
+        }
+    }
+    throw new Error("Unsupported color format: " + format)
+}

package/src/interpolation/Cardinal.ts

@@ -9,7 +9,8 @@
  * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
  */
 
-import CardinalType from '../../types/Cardinal'
+import type CardinalType from '../../types/Cardinal'
+
 import Hermite from './Hermite'
 
 class Cardinal implements CardinalType {

package/src/interpolation/Hermite.ts

@@ -1,4 +1,4 @@
-import HermiteType from '../../types/Hermite'
+import type HermiteType from '../../types/Hermite'
 
 class Hermite implements HermiteType {
     readonly name: string = 'Hermite'

package/src/resizeObserver.ts

@@ -0,0 +1,37 @@
+let observer: ResizeObserver
+
+let attrValueToCallback = {}, uniqueid = 0
+
+export default function (el: HTMLElement | null, callback: Function) {
+
+    try {
+
+        if (!observer) {
+            observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    attrValueToCallback[(entry.target as any)._resize_observer_]()
+                }
+            })
+        }
+
+        uniqueid++
+
+        (el as any)._resize_observer_ = uniqueid
+        attrValueToCallback[uniqueid] = callback
+
+        observer.observe(el)
+
+        return function () {
+            if (observer) {
+                observer.unobserve(el)
+                delete attrValueToCallback[(el as any)._resize_observer_]
+            }
+        }
+
+    } catch (e) {
+        callback()
+
+        // 如果浏览器不支持此接口
+        console.error('ResizeObserver undefined!')
+    }
+}

package/src/ruler.ts

@@ -1,6 +1,6 @@
 // 刻度尺刻度求解
 
-import { rulerOptionType } from '../types/ruler'
+import type { rulerOptionType } from '../types/ruler'
 
 // 需要注意的是，实际的间距个数可能是 num-1 或 num 或 num+1 或 1
 export default function (maxValue: number, minValue: number, num: number, option?: rulerOptionType) {

package/src/shader/fsColor.c

@@ -0,0 +1,8 @@
+precision mediump float;
+
+uniform vec4 u_color;
+
+void main()
+{
+    gl_FragColor = u_color;
+}

package/src/shader/fsColors.c

@@ -0,0 +1,8 @@
+precision mediump float;
+
+varying vec4 v_color;
+
+void main()
+{
+    gl_FragColor = v_color;
+}

package/src/shader/fsCube.c

@@ -0,0 +1,9 @@
+precision mediump float;
+
+varying vec3 v_normal;
+uniform samplerCube u_texture;
+
+void main()
+{
+    gl_FragColor = textureCube(u_texture, normalize(v_normal));
+}

package/src/shader/fsImage.c

@@ -0,0 +1,9 @@
+precision mediump float;
+
+uniform sampler2D u_sampler;
+varying vec2 v_textcoord;
+
+void main()
+{
+    gl_FragColor = texture2D(u_sampler, v_textcoord);
+}

package/src/shader/vsColor.c

@@ -0,0 +1,18 @@
+attribute vec4 a_position;
+uniform mat4 u_matrix;
+
+void main()
+{
+    vec4 temp = u_matrix * a_position;
+
+    // 把原生的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));
+}

package/src/shader/vsColors.c

@@ -0,0 +1,14 @@
+attribute vec4 a_position;
+uniform mat4 u_matrix;
+attribute vec4 a_color;
+varying vec4 v_color;
+
+void main()
+{
+    vec4 temp = u_matrix * a_position;
+    temp.z = -1.0 * temp.z;
+    float dist = 4.0;
+    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));
+
+    v_color = a_color;
+}

package/src/shader/vsCube.c

@@ -0,0 +1,14 @@
+attribute vec4 a_position;
+uniform mat4 u_matrix;
+attribute vec4 a_normal;
+varying vec3 v_normal;
+
+void main()
+{
+    vec4 temp = u_matrix * a_position;
+    temp.z = -1.0 * temp.z;
+    float dist = 4.0;
+    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));
+
+    v_normal = normalize(vec3(a_normal));
+}

package/src/shader/vsImage.c

@@ -0,0 +1,14 @@
+attribute vec4 a_position;
+uniform mat4 u_matrix;
+attribute vec2 a_textcoord;
+varying vec2 v_textcoord;
+
+void main()
+{
+    vec4 temp = u_matrix * a_position;
+    temp.z = -1.0 * temp.z;
+    float dist = 4.0;
+    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));
+
+    v_textcoord = a_textcoord;
+}

package/src/throttle.ts

@@ -0,0 +1,50 @@
+import type throttleOptionType from '../types/throttleOption'
+
+import mergeOption from './common/mergeOption'
+
+export default function (callback: Function, option: throttleOptionType = {}) {
+
+    // 校对缺省值
+    option = mergeOption(option, {
+        time: 200,
+        keep: false,
+        opportunity: "end"
+    })
+
+    let hadInterval = false
+    let hadClick = false
+    let oneClick = false
+
+    return function () {
+        let _this = this, arg = arguments
+
+        // 如果前置任务都完成了
+        if (!hadInterval) {
+            if (option.opportunity != 'end') {
+                callback.apply(_this, arg)
+            }
+            hadInterval = true
+
+            let interval = setInterval(() => {
+                if (hadClick) {
+                    if (!option.keep) {
+                        callback.apply(_this, arg)
+                    }
+                } else {
+                    if (option.opportunity != 'begin') {
+                        if (oneClick || option.opportunity == 'end') callback.apply(_this, arg)
+                    }
+                    hadInterval = false
+                    oneClick = false
+                    clearInterval(interval)
+                }
+                hadClick = false
+            }, option.time)
+        } else {
+            hadClick = true
+            oneClick = true
+        }
+
+    }
+
+}

package/src/viewHandler.ts

@@ -1,4 +1,4 @@
-import { callbackFun } from '../types/viewHandler'
+import type { callbackFun } from '../types/viewHandler'
 
 let mousePosition = (el: HTMLElement, event: any) => {
     let bounding = el.getBoundingClientRect()

package/types/Canvas.d.ts

@@ -236,6 +236,11 @@ export default interface CanvasType {
    */
   clearRect(x: number, y: number, w: number, h: number): this
 
+  /**
+   * 是否绘制的内容只需要进行区域记录
+   */
+  onlyRegion(flag: boolean): this
+
   /**
    * 设置区域
    */
@@ -285,4 +290,11 @@ export default interface CanvasType {
    * @param y
    */
   getColor(x: number, y: number): string
+
+  /**
+   * 渲染绘制（uniapp独有）
+   * @param reserve 是否保留当前画布上的内容
+   * @param callback 绘制完成后回调
+   */
+  draw(reserve?: boolean, callback?: Function): void
 }

package/types/CanvasOption.d.ts

@@ -1,8 +1,8 @@
 export default interface CanvasOptionType {
 
     /**
-    * 是否支持区域管理，默认true
-    */
+     * 是否支持区域管理，默认true
+     */
     region?: boolean
 
 }

package/types/Shader.d.ts

@@ -13,4 +13,10 @@ export default interface ShaderType {
      */
     compile(vshaderSource: string, fshaderSource: string): this
 
+    /**
+     * 编译内置定义好的着色器程序
+     * @param shaderName 着色器名称
+     */
+    compile(shaderName: string): this
+
 }