jmgraph 3.2.2 → 3.2.3

package/src/lib/earcut.md

@@ -0,0 +1,73 @@
+在前端开发中，很多时候需要对复杂的多边形进行分割，以便更好地进行渲染和处理。这时候，我们可以使用一些工具来进行分割操作。其中，一个非常实用的工具就是 npm 包 earcut。
+
+本文将详细介绍 npm 包 earcut 的使用方法，包括安装、基本用法和示例代码等方面。
+
+安装
+要使用 npm 包 earcut，我们首先需要进行安装。在命令行中执行以下命令即可完成安装：
+
+`npm install earcut`
+
+基本用法
+安装完成后，我们就可以在项目代码中使用 earcut 了。下面是一个基本示例：
+
+```js
+const earcut = require('earcut');
+
+// 定义多边形坐标点数组
+const coords = [
+    100, 100,
+    200, 150,
+    150, 200,
+    50, 150
+];
+
+// 进行多边形分割
+const triangles = earcut(coords);
+
+console.log(triangles); // [1, 0, 3, 3, 2, 1]
+
+```
+
+在这个示例中，我们使用 earcut 对一个四边形多边形进行了分割，并将分割结果输出到控制台。
+
+earcut 在进行分割时，需要我们将多边形的坐标点以一定的格式传入。具体格式如下：
+
+坐标点数组中，每两项表示一个坐标点的 x、y 值。
+坐标点数组中的所有坐标点按顺序构成了一个多边形。
+如果多边形包含内部空洞，需要将空洞内部的坐标按顺序插入到坐标点数组中。
+使用 earcut 进行多边形分割后，分割结果将会是一个数字数组。其中，每三个数字表示一个三角形的三个顶点在坐标点数组中的索引。
+
+示例代码
+下面是一个更为复杂的示例，展示了如何使用 earcut 进行多个带空洞的多边形的分割：
+```js
+const earcut = require('earcut');
+
+// 定义多边形坐标点数组（按照序号连接即组成完整图形，后两组为同一空洞）
+const coords = [
+    100, 0,
+    0, 100,
+    100, 200,
+    200, 100,   
+
+    50, 50,
+    100, 100, 
+    150, 50
+];
+
+// 定义多边形顶点索引数组，每个多边形用三个数字表示
+const polygonIndices = [
+    0, 1, 2,
+    0, 2, 3, 
+
+    4, 5, 6
+];
+
+// 进行多边形分割
+const triangles = earcut(coords, polygonIndices);
+
+console.log(triangles); // [2, 0, 3, 6, 4, 5, 1, 0, 8, 7, 6, 5]
+```
+在这个示例中，我们定义了两个多边形。第一个多边形是一个正方形，带有一个内部的小正方形空洞。第二个多边形是一个三角形，没有空洞。通过传入多边形坐标点数组和多边形顶点索引数组到 earcut 函数，我们将多个多边形同时进行了分割。程序输出的结果则是所有分割后的三角形的顶点在坐标点数组中的索引。
+
+结语
+本文介绍了 npm 包 earcut 的基本使用方法和示例代码。通过本文的学习，相信读者已经了解了 earcut 的基本功能和用法，并可以在自己的项目中灵活运用它进行多边形分割操作。

package/src/lib/webgl/base.js

@@ -0,0 +1,201 @@
+
+import earcut from '../earcut.js';
+import webglGradient from './gradient.js';
+import {
+    createProgram,
+    useProgram,
+    writeVertexAttrib,
+    disableVertexAttribArray
+} from './core/program.js';
+
+import {
+    createFloat32Buffer,
+    createUint16Buffer,
+    deleteBuffer,
+} from './core/buffer.js';
+
+import {
+    create2DTexture,
+    createImgTexture,
+    createDataTexture,
+    deleteTexture
+} from './core/texture.js';
+
+class WeblBase {
+    constructor(graph, option) {
+        this.graph = graph;
+        this.option = option || {};
+        this.style = {
+            globalAlpha: 1
+        };
+    }
+
+    get context() {
+        if(this.graph) return this.graph.context;
+    }
+
+    // 创建程序
+    createProgram(vertexSrc, fragmentSrc) {
+        return createProgram(this.context, vertexSrc, fragmentSrc);
+    }
+
+    // 指定使用某个程序
+    useProgram(program=this.program) {
+        program = program.program || program;
+        if(this.context.__curent_program === program) return program;
+        useProgram(this.context, program.program || program);
+        this.context.__curent_program = program;
+        return program;
+    }
+
+    getAttribLocation(name) {
+        return this.context.getAttribLocation(this.program.program, name);
+    }
+    
+    getUniformLocation(name) {
+        return this.context.getUniformLocation(this.program.program, name);
+    }
+
+    // 把缓冲区的值写入变量
+    // buffer: 缓冲区
+    // size: 组成数量，必须是1，2，3或4.  每个单元由多少个数组成
+    // strip: 步长 数组中一行长度，0 表示数据是紧密的没有空隙，让OpenGL决定具体步长
+    // offset: 字节偏移量，必须是类型的字节长度的倍数。
+    // dataType: 每个元素的数据类型
+    writeVertexAttrib(buffer, attr, size=2, strip=0, offset=0, dataType=this.context.FLOAT) {
+        buffer.attr = attr;
+        return writeVertexAttrib(this.context, buffer, attr, size, strip, offset, dataType);
+    }
+
+    // 禁用attri
+    disableVertexAttribArray(attr) {
+        try{
+            if(!attr) return attr;
+            return disableVertexAttribArray(this.context, attr);
+        }
+        catch(e) {
+            console.error(e);
+        }
+        return attr;
+    }
+
+    // 创建float32的buffer
+    createFloat32Buffer(data, type=this.context.ARRAY_BUFFER, drawType=this.context.STATIC_DRAW) {
+        const buffer = createFloat32Buffer(this.context, data, type, drawType);
+        return {
+            data,
+            ...buffer
+        };
+    }
+
+    createUint16Buffer(data, type=this.context.ARRAY_BUFFER, drawType=this.context.STATIC_DRAW) {
+        const buffer = createUint16Buffer(this.context, data, type, drawType);
+        return {
+            data,
+            ...buffer
+        };
+    }
+
+    // 释放
+    deleteBuffer(buffer) {
+        try {
+            if(!buffer) return;
+            const bufferHandler = buffer.buffer || buffer;
+            if(bufferHandler) return deleteBuffer(this.context, bufferHandler);
+        }
+        catch(e) {
+            console.log(buffer);
+            console.error(e);
+        }
+        return buffer;
+    }
+
+    // 生成纹理
+    create2DTexture() { 
+        return create2DTexture(this.context);
+    }
+
+    // 创建图片纹理
+    createImgTexture(img) {
+        return createImgTexture(this.context, img);
+    }
+
+    // 根根像素值生成纹理
+    createDataTexture(data) {
+        return createDataTexture(this.context, data);
+    }
+
+    // 删除纹理
+    deleteTexture(texture) {
+        try {
+            return deleteTexture(this.context, texture.texture || texture);
+        }
+        catch(e) {
+            console.error(e);
+        }
+        return texture;
+    }
+
+    // 多边切割, 得到三角形顶点索引数组
+    // polygonIndices 顶点索引，
+    earCutPoints(points) {
+        const arr = this.pointsToArray(points);
+        const ps = earcut(arr);// 切割得到3角色顶点索引，
+        return ps;
+    }
+
+    // 多边切割, 得到三角形顶点
+    // polygonIndices 顶点索引，
+    earCutPointsToTriangles(points) {
+        const ps = this.earCutPoints(points);// 切割得到3角色顶点索引，
+        const triangles = [];
+        // 用顶点索引再组合成坐标数组
+        for(let i=0;i<ps.length; i+=3) {
+            const p1 = points[ps[i]];
+            const p2 = points[ps[i+1]];
+            const p3 = points[ps[i+2]];
+
+            triangles.push([p1, p2, p3]);// 每三个顶点构成一个三角
+        }
+        return triangles;
+    }
+
+    // 点坐标数组转为一维数组
+    pointsToArray(points) {
+        return [].concat(...points.map(p=>[p.x,p.y]));// 把x,y转为数组元素
+    }
+    // 每2位表示坐标x,y转为坐标点对象
+    arrayToPoints(arr) {
+        const points = [];
+        for(let i=0;i<arr.length; i+=2) {
+            points.push({
+                x: arr[i],
+                y: arr[i+1]
+            });
+        }
+        return points;
+    }
+
+    // 创建线性渐变
+    createLinearGradient(x1, y1, x2, y2, bounds) {
+        return new webglGradient('linear', {
+            x1, y1, x2, y2, bounds,
+            control: this
+        });
+    }
+    // 创建放射性渐变
+    createRadialGradient(x1, y1, r1, x2, y2, r2, bounds) {
+        return new webglGradient('radial', {
+            x1, y1, r1,
+            x2, y2, r2,
+            bounds,
+            control: this
+        });
+    }
+    // 判断是否是一个渐变对象
+    isGradient(obj) {
+        return obj && obj instanceof webglGradient;
+    }
+}
+
+export default WeblBase;

package/src/lib/webgl/core/buffer.js

@@ -0,0 +1,48 @@
+
+// 创建缓冲区
+function createBuffer(gl, data, type=gl.ARRAY_BUFFER, drawType=gl.STATIC_DRAW) {
+    //先创建一个缓存对象
+    const buffer = gl.createBuffer();
+    if(!buffer) {
+        throw Error('创建缓冲区对象失败');
+    }
+    //说明缓存对象保存的类型
+    gl.bindBuffer(type, buffer);
+    //写入坐标数据
+    // 因为会将数据发送到 GPU，为了省去数据解析，这里使用 Float32Array 直接传送数据
+    gl.bufferData(type, data, drawType); // 表示缓冲区的内容不会经常更改
+    return {
+        type,
+        drawType,
+        buffer,
+        // 获取到数组中单个元素的字节数
+        unitSize: data.BYTES_PER_ELEMENT
+    };
+}
+
+// 创建float32的buffer
+function createFloat32Buffer(gl, data, type=gl.ARRAY_BUFFER, drawType=gl.STATIC_DRAW) {
+    const vertices = new Float32Array(data);
+    const buffer = createBuffer(gl, vertices, type, drawType);
+    return buffer;
+}
+
+// 创建uint16的bugger
+function createUint16Buffer(gl, data, type=gl.ARRAY_BUFFER, drawType=gl.STATIC_DRAW) {
+    const vertices = new Uint16Array(data);
+    const buffer = createBuffer(gl, vertices, type, drawType);
+    return buffer;
+}
+
+// 释放
+function deleteBuffer(gl, buffer) {
+    gl.deleteBuffer(buffer.buffer || buffer);
+}
+
+
+export {
+    createBuffer,
+    createUint16Buffer,
+    createFloat32Buffer,
+    deleteBuffer,
+}

package/src/lib/webgl/core/mapSize.js

@@ -0,0 +1,40 @@
+
+const GLSL_TO_SIZE = {
+    'float':    1,
+    'vec2':     2,
+    'vec3':     3,
+    'vec4':     4,
+
+    'int':      1,
+    'ivec2':    2,
+    'ivec3':    3,
+    'ivec4':    4,
+
+    'bool':     1,
+    'bvec2':    2,
+    'bvec3':    3,
+    'bvec4':    4,
+
+    'mat2':     4,
+    'mat3':     9,
+    'mat4':     16,
+
+    'sampler2D':  1
+};
+
+/**
+ * @class
+ * @memberof PIXI.glCore.shader
+ * @param type {String}
+ * @return {Number}
+ */
+const mapSize = function(type) { 
+    return GLSL_TO_SIZE[type];
+};
+
+
+
+
+export {
+    mapSize
+}

package/src/lib/webgl/core/mapType.js

@@ -0,0 +1,43 @@
+
+var GL_TABLE = null;
+
+const GL_TO_GLSL_TYPES = {
+  'FLOAT':       'float',
+  'FLOAT_VEC2':  'vec2',
+  'FLOAT_VEC3':  'vec3',
+  'FLOAT_VEC4':  'vec4',
+
+  'INT':         'int',
+  'INT_VEC2':    'ivec2',
+  'INT_VEC3':    'ivec3',
+  'INT_VEC4':    'ivec4',
+  
+  'BOOL':        'bool',
+  'BOOL_VEC2':   'bvec2',
+  'BOOL_VEC3':   'bvec3',
+  'BOOL_VEC4':   'bvec4',
+  
+  'FLOAT_MAT2':  'mat2',
+  'FLOAT_MAT3':  'mat3',
+  'FLOAT_MAT4':  'mat4',
+  
+  'SAMPLER_2D':  'sampler2D'  
+};
+
+const mapType = function(gl, type) {
+    if(!GL_TABLE) {
+        const typeNames = Object.keys(GL_TO_GLSL_TYPES);
+        GL_TABLE = {};
+        for(let i = 0; i < typeNames.length; ++i) {
+            const tn = typeNames[i];
+            GL_TABLE[ gl[tn] ] = GL_TO_GLSL_TYPES[tn];
+        }
+    }
+
+  return GL_TABLE[type];
+};
+
+
+export {
+  mapType
+}

package/src/lib/webgl/core/program.js

@@ -0,0 +1,139 @@
+import {
+    createShader
+} from './shader.js';
+import {
+    mapSize
+} from './mapSize.js';
+import {
+    mapType
+} from './mapType.js';
+
+// 创建程序
+function createProgram(gl, vertexSrc, fragmentSrc) {
+    // 创建顶点着色器
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSrc);
+    // 创建片段着色器
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSrc);
+
+    const program = gl.createProgram() // 创建一个程序
+    gl.attachShader(program, vertexShader) // 添加顶点着色器
+    gl.attachShader(program, fragmentShader) // 添加片元着色器
+    gl.linkProgram(program) // 连接 program 中的着色器
+
+    // 检查程序链接状态
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error('PError: Could not initialize shader.');
+        console.error('gl.VALIDATE_STATUS', gl.getProgramParameter(program, gl.VALIDATE_STATUS));
+        console.error('gl.getError()', gl.getError());
+
+        // if there is a program info log, log it
+        if (gl.getProgramInfoLog(program) !== '') {
+            console.warn('Warning: gl.getProgramInfoLog()', gl.getProgramInfoLog(program));
+        }
+
+        gl.deleteProgram(program);
+    }
+
+    useProgram(gl, program);
+
+    // clean up some shaders
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+
+    const attrs = extractAttributes(gl, program);
+    const uniforms = extractUniforms(gl, program);
+    
+    return {
+        program,
+        attrs,
+        uniforms
+    };
+}
+
+// 采用program
+function useProgram(gl, program) {
+    return gl.useProgram(program); // 告诉 webgl 用这个 program 进行渲染
+}
+
+function extractAttributes(gl, program) {
+    const attributes = {};
+
+    const count = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+
+    for (let i = 0; i < count; i++){
+        const attribData = gl.getActiveAttrib(program, i);
+        const type = mapType(gl, attribData.type);
+        attributes[attribData.name] = {
+            attribData,
+            size: mapSize(type),
+            type,
+            location: gl.getAttribLocation(program, attribData.name),            
+        };
+    }
+
+    return attributes;
+}
+
+function extractUniforms(gl, program) {
+	const uniforms = {};
+
+    const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+
+    for (let i = 0; i < count; i++) {
+    	const uniformData = gl.getActiveUniform(program, i);
+    	const name = uniformData.name.replace(/\[.*?\]/, "");
+        const type = mapType(gl, uniformData.type );
+
+    	uniforms[name] = {
+            uniformData,
+    		type: type,
+    		size: uniformData.size,
+    		location: gl.getUniformLocation(program, name),
+    	};
+    }
+
+	return uniforms;
+};
+
+
+// 把缓冲区的值写入变量
+// size: 组成数量，必须是1，2，3或4.  每个单元由多少个数组成
+// strip: 步长 数组中一行长度，0 表示数据是紧密的没有空隙，让OpenGL决定具体步长
+// offset: 字节偏移量，必须是类型的字节长度的倍数。
+// dataType: 每个元素的数据类型
+function writeVertexAttrib(gl, buffer, attr, size=2,strip=0,offset=0,dataType=gl.FLOAT) {
+    gl.bindBuffer(buffer.type, buffer.buffer);
+    gl.vertexAttribPointer( // 告诉 OpenGL 如何从 Buffer 中获取数据
+            attr.location, // 顶点属性的索引
+            size, // 组成数量，必须是1，2，3或4。我们只提供了 x 和 y
+            dataType,
+            false, // 是否归一化到特定的范围，对 FLOAT 类型数据设置无效
+            strip * buffer.unitSize,
+            offset
+        )
+    gl.enableVertexAttribArray(attr.location);
+    return buffer;
+}
+
+function disableVertexAttribArray(gl, attr) {
+    return gl.disableVertexAttribArray(attr.location);
+}
+
+function getAttribLocation(gl, program, name) {
+    return gl.getAttribLocation(program, name);
+}
+
+function getUniformLocation(gl, program, name) {
+    return gl.getUniformLocation(program, name);
+}
+
+export {
+    createProgram,
+    useProgram,
+    getAttribLocation,
+    getUniformLocation,
+    extractAttributes,
+    extractUniforms,
+    writeVertexAttrib,
+    disableVertexAttribArray
+}

package/src/lib/webgl/core/shader.js

@@ -0,0 +1,14 @@
+// 生成着色器
+// type: gl.VERTEX_SHADER 顶点着色器  , gl.FRAGMENT_SHADER  片段着色器
+// src: 着色器代码
+function createShader(gl, type, src) {
+    const shader = gl.createShader(type) // 创建一个顶点着色器
+    gl.shaderSource(shader, src); // 编写顶点着色器代码
+    gl.compileShader(shader); // 编译着色器
+
+    return shader;
+}
+
+export  {
+    createShader
+}

package/src/lib/webgl/core/texture.js

@@ -0,0 +1,61 @@
+
+// 生成纹理
+function create2DTexture(gl) {
+    const texture = gl.createTexture();
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 图像反转Y轴
+    gl.activeTexture(gl.TEXTURE0) // 激活纹理单元
+    gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象
+    
+    
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) // 竖直平铺方式
+
+    
+    return texture;
+}
+
+// 创建图片纹理
+function createImgTexture(gl, img) {
+    const texture = create2DTexture(gl);
+
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img) // 配置纹理图像
+    return {
+        texture
+    };
+}
+
+// 用像素值来绘制纹理
+function createDataTexture(gl, pixels) {
+    const data = new Uint8Array(pixels.data || pixels);
+
+    const texture = create2DTexture(gl);
+
+    gl.texImage2D(
+        gl.TEXTURE_2D, // 纹理目标
+        0, // 细节级别,指定详细级别。0 级是基本图像等级，n 级是第 n 个金字塔简化级。
+        gl.RGBA, // 纹理内部格式
+        pixels.width || 1, // 指定纹理的宽度
+        pixels.height || 1, // 指定纹理的高度
+        0, // 指定纹理的边框宽度。必须为 0。
+        gl.RGBA, // 源图像数据格式
+        gl.UNSIGNED_BYTE, // 纹理数据类型
+        data // 数据
+      );
+    return {
+        texture
+    };
+}
+
+// 删除纹理
+function deleteTexture(gl, texture) {
+    return gl.deleteTexture(texture);
+}
+
+export {
+    create2DTexture,
+    createImgTexture,
+    createDataTexture,
+    deleteTexture
+}