jmgraph 3.2.7 → 3.2.8

package/src/lib/webgl/base.js

@@ -21,6 +21,85 @@ import {
     deleteTexture
 } from './core/texture.js';
 
+// 把canvas坐标转为webgl坐标系
+const convertPointSource = `
+    vec4 translatePosition(vec4 point, float x, float y) {
+        point.x = (point.x-x)/x;
+        point.y = (y-point.y)/y;
+        return point;
+    }`;
+// 把纹理的canvas坐标转为纹理的坐标系
+const convertTexturePosition = `
+    vec2 translateTexturePosition(in vec2 point, vec4 bounds) {
+        point.x = (point.x-bounds.x)/bounds.z; // 离左上角位置的X长比上纹理宽 0-1
+        point.y = 1.0-(point.y-bounds.y)/bounds.w; // 离左上角位置的Y长比上高，因为纹理坐标是左下角起，所以要用1-
+        return point;
+    }`;
+
+// path顶点着色器源码
+const pathVertexSource = `
+    attribute vec4 a_position;
+    attribute vec4 a_color;
+    attribute vec2 a_text_coord;
+    uniform vec2 a_center_point; // 当前canvas的中心位置
+    uniform float a_point_size; // 点的大小
+    uniform int a_type;
+    varying vec4 v_color;
+    varying vec2 v_text_coord;
+    varying float v_type;
+
+    ${convertPointSource}
+
+    void main() {
+        gl_PointSize = a_point_size == 0.0? 1.0 : a_point_size;
+        v_type = float(a_type);
+        vec4 pos = translatePosition(a_position, a_center_point.x, a_center_point.y);
+        gl_Position = pos;
+        v_color = a_color;
+        if(a_type == 2) {
+            v_text_coord = a_text_coord;
+        }
+    }
+`;
+// path 片段着色器源码
+const pathFragmentSource = `
+    precision mediump float;
+    uniform sampler2D u_sample;
+    uniform vec4 v_texture_bounds; // 纹理的左上坐标和大小 x,y,z,w
+    uniform vec4 v_single_color;
+    varying float v_type;
+    varying vec4 v_color;
+    varying vec2 v_text_coord;
+
+    ${convertTexturePosition}
+
+    void main() {
+        // 如果是fill，则直接填充颜色
+        if(v_type == 1.0) {
+            gl_FragColor = v_single_color;
+        }
+        // 渐变色
+        else if(v_type == 3.0) {
+            gl_FragColor = v_color;
+        }
+        else if(v_type == 2.0) {
+            vec2 pos = translateTexturePosition(v_text_coord, v_texture_bounds);
+            gl_FragColor = texture2D(u_sample, pos);
+        }
+        else {
+            float r = distance(gl_PointCoord, vec2(0.5, 0.5));
+            //根据距离设置片元
+            if(r <= 0.5){
+                // 方形区域片元距离几何中心半径小于0.5，像素颜色设置红色
+                gl_FragColor = v_single_color;
+            }else {
+                // 方形区域距离几何中心半径不小于0.5的片元剪裁舍弃掉：
+                discard;
+            }
+        }
+    }
+`;
+
 class WeblBase {
     constructor(graph, option) {
         this.graph = graph;
@@ -34,8 +113,89 @@ class WeblBase {
         if(this.graph) return this.graph.context;
     }
 
+    // 纹理绘制canvas
+    get textureCanvas() {
+        let canvas = this.graph.textureCanvas;
+        if(!canvas) {
+            if(typeof document === 'undefined') return null;
+            canvas = this.graph.textureCanvas = document.createElement('canvas');
+        }
+        return canvas;
+    }
+    // 纹理绘制canvas ctx
+    get textureContext() {
+        const ctx = this.textureCanvas.ctx || (this.textureCanvas.ctx = this.textureCanvas.getContext('2d', {
+            willReadFrequently: true
+        }));
+        return ctx;
+    }
+
+    // i当前程序
+    get program() {
+        // 默认所有path用同一个编译好的program
+        return this.graph.context.pathProgram || (this.graph.context.pathProgram=this.createProgram(pathVertexSource, pathFragmentSource));
+    }
+
+    // 设置样式
+    setStyle(style = this.style, value = '') {
+
+        if(typeof style === 'string') {
+            const obj = {};
+            obj[style] = value;
+            style = obj;
+        }
+       /*
+        // 设置线条颜色或填充色
+        if(style.strokeStyle) {
+            let color = style.strokeStyle;
+            if(typeof color === 'string') color = this.graph.utils.hexToRGBA(color);
+            this.style.strokeStyle = this.graph.utils.rgbToDecimal(color);
+            delete style.strokeStyle;
+        }
+        else if(style.fillStyle) {
+            let color = style.fillStyle;
+            if(this.isGradient(color)) {
+                this.style.fillStyle = color;
+            }
+            else {
+                if(typeof color === 'string') color = this.graph.utils.hexToRGBA(color);
+                this.style.fillStyle =  this.graph.utils.rgbToDecimal(color);
+            }
+            delete style.fillStyle;
+        } */       
+
+        this.style = {
+            ...this.style,
+            ...style
+        }
+    }
+
+    // 把传统颜色转为webgl识别的
+    convertColor(color) {
+        if(this.isGradient(color)) return color;
+        if(typeof color === 'string') color = this.graph.utils.hexToRGBA(color);
+        return this.graph.utils.rgbToDecimal(color);
+    }
+
+    setTextureStyle(style, value='') {
+        
+        if(typeof style === 'string') {
+            if(['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(style) > -1) {
+                value = this.graph.utils.toColor(value);
+            }
+            this.textureContext[style] = value;
+        }
+        else {
+            for(const name in style) {
+                if(name === 'constructor') continue;
+                this.setTextureStyle(name, style[name]);
+            }
+        }
+    }
+
     // 创建程序
-    createProgram(vertexSrc, fragmentSrc) {
+    createProgram(vertexSrc, fragmentSrc) {        
+        this.context.lineWidth(1);
         return createProgram(this.context, vertexSrc, fragmentSrc);
     }
 
@@ -196,6 +356,98 @@ class WeblBase {
     isGradient(obj) {
         return obj && obj instanceof webglGradient;
     }
+
+    /**
+	 * 测试获取文本所占大小
+	 *
+	 * @method testSize
+	 * @return {object} 含文本大小的对象
+	 */
+	testSize(text, style=this.style) {
+		
+		this.textureContext.save && this.textureContext.save();
+		// 修改字体，用来计算
+		if(style.font || style.fontSize) this.textureContext.font = style.font || (style.fontSize + 'px ' + style.fontFamily);
+		
+		//计算宽度
+		const size = this.textureContext.measureText?
+                        this.textureContext.measureText(text):
+							{width:15};
+        this.textureContext.restore &&this.textureContext.restore();
+		size.height = this.style.fontSize? this.style.fontSize: 15;
+		return size;
+	}
+
+    // 使用纹理canvas生成图，
+    // 填充可以是颜色或渐变对象
+    // 如果指定了points，则表明要绘制不规则的图形
+    toFillTexture(fillStyle, bounds, points=null) {
+        const canvas = this.textureCanvas;
+        if(!canvas) {
+            return fillStyle;
+        }
+        canvas.width = bounds.width;
+        canvas.height = bounds.height;
+
+        if(!canvas.width || !canvas.height) {
+            return fillStyle;
+        }
+
+        this.textureContext.clearRect(0, 0, canvas.width, canvas.height);
+
+        this.textureContext.fillStyle = fillStyle;
+
+        this.textureContext.beginPath();
+        if(!points || !points.length) {
+            points = [];
+            points.push({
+                x: bounds.left,
+                y: bounds.top
+            });
+            points.push({
+                x: bounds.left + bounds.width,
+                y: bounds.top
+            });
+            points.push({
+                x: bounds.left + bounds.width,
+                y: bounds.top + bounds.height
+            });
+            points.push({
+                x: bounds.left,
+                y: bounds.top + bounds.height
+            });
+            points.push({
+                x: bounds.left,
+                y: bounds.top
+            });
+        }
+        if(points && points.length) {
+            for(const p of points) {
+                //移至当前坐标
+                if(p.m) {
+                    this.textureContext.moveTo(p.x - bounds.left, p.y - bounds.top);
+                }
+                else {
+                    this.textureContext.lineTo(p.x - bounds.left, p.y - bounds.top);
+                }			
+            }	
+        }
+        else {
+            this.textureContext.moveTo(0, 0);
+            this.textureContext.lineTo(bounds.width, 0);
+            this.textureContext.lineTo(bounds.width, bounds.height);
+            this.textureContext.lineTo(0, bounds.height);
+            this.textureContext.lineTo(0, 0);
+        }
+        this.textureContext.closePath();
+        this.textureContext.fill();
+
+        const data = this.textureContext.getImageData(0, 0, canvas.width, canvas.height);
+        return {
+            data,
+            points
+        };
+    }
 }
 
 export default WeblBase;

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

@@ -10,7 +10,8 @@ function createBuffer(gl, data, type=gl.ARRAY_BUFFER, drawType=gl.STATIC_DRAW) {
     gl.bindBuffer(type, buffer);
     //写入坐标数据
     // 因为会将数据发送到 GPU，为了省去数据解析，这里使用 Float32Array 直接传送数据
-    gl.bufferData(type, data, drawType); // 表示缓冲区的内容不会经常更改
+    // data.buffer这里要使用data.buffer，否则在edge下可能导至数据发生较大的改变
+    gl.bufferData(type, data.buffer || data, drawType); // 表示缓冲区的内容不会经常更改
     return {
         type,
         drawType,

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

@@ -101,7 +101,7 @@ function extractUniforms(gl, program) {
 // strip: 步长 数组中一行长度，0 表示数据是紧密的没有空隙，让OpenGL决定具体步长
 // offset: 字节偏移量，必须是类型的字节长度的倍数。
 // dataType: 每个元素的数据类型
-function writeVertexAttrib(gl, buffer, attr, size=2,strip=0,offset=0,dataType=gl.FLOAT) {
+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, // 顶点属性的索引
@@ -110,7 +110,7 @@ function writeVertexAttrib(gl, buffer, attr, size=2,strip=0,offset=0,dataType=gl
             false, // 是否归一化到特定的范围，对 FLOAT 类型数据设置无效
             strip * buffer.unitSize,
             offset
-        )
+        );
     gl.enableVertexAttribArray(attr.location);
     return buffer;
 }

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

@@ -2,15 +2,15 @@
 // 生成纹理
 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.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) // 竖直平铺方式
+    //gl.generateMipmap(gl.TEXTURE_2D);
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // 放大处理方式  // LINEAR  / NEAREST
+    gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); // 缩小处理方式
+    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;

package/src/lib/webgl/gradient.js

@@ -1,6 +1,6 @@
 const WebglGradientTextureCache = {};
 // 渐变
-class WeblGradient {
+class WebglGradient {
     // type:[linear= 线性渐变,radial=放射性渐变] 
     constructor(type='linear', params={}) {
         this.type = type || 'linear';
@@ -52,54 +52,27 @@ class WeblGradient {
     }
 
     // 转为渐变为纹理
-    toImageData(control, bounds) {
-        const key = this.toString() + `-${bounds.width.toFixed(4)}x${bounds.height.toFixed(4)}`;
-        if(WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
-
-        let canvas = control.graph.textureCanvas;
-        if(!canvas) {
-            canvas = control.graph.textureCanvas = document.createElement('canvas');
-        }
-        canvas.width = bounds.width;
-        canvas.height = bounds.height;
-
-        if(!canvas.width || !canvas.height) {
+    toImageData(control, bounds, points=null) {
+        //const key = this.key || this.toString();
+        //if(WebglGradientTextureCache[key]) return WebglGradientTextureCache[key];
+        if(!control.textureContext) {
             return null;
         }
-
-        const ctx = canvas.getContext('2d', {
-            willReadFrequently: true
-        });
-
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
         let gradient = null;
         if(this.type === 'linear') {
-            gradient = ctx.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
+            gradient = control.textureContext.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
         }
         else {
-            gradient = ctx.createRadialGradient(this.x1, this.y1, this.r1, this.x2, this.y2, this.r2);
+            gradient = control.textureContext.createRadialGradient(this.x1, this.y1, this.r1, this.x2, this.y2, this.r2);
         }
         this.stops.forEach(function(s, i) {	
             const c = control.graph.utils.toColor(s.color);
             gradient && gradient.addColorStop(s.offset, c);		
         });
-        ctx.fillStyle = gradient;
-
-        ctx.beginPath();
-
-        ctx.moveTo(0, 0);
-        ctx.lineTo(bounds.width, 0);
-        ctx.lineTo(bounds.width, bounds.height);
-        ctx.lineTo(0, bounds.height);
-        ctx.lineTo(0, 0);
-
-        ctx.closePath();
-        ctx.fill();
-
-        const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        
+        const data = control.toFillTexture(gradient, bounds, points);
 
-        WebglGradientTextureCache[key] = data;
+        //WebglGradientTextureCache[key] = data;
 
         return data;
     }
@@ -193,4 +166,4 @@ class WeblGradient {
 	}
 }
 
-export default WeblGradient;
+export default WebglGradient;