jmgraph 3.2.6 → 3.2.8

package/src/core/jmEvents.js

@@ -99,7 +99,7 @@ class jmMouseEvent {
 			//}				
 		});
 		
-		this.eventEvents['mousedown'] = jmUtils.bindEvent(this.target,'mousemove',function(evt) {	
+		this.eventEvents['mousemove'] = jmUtils.bindEvent(this.target,'mousemove',function(evt) {	
 			evt = evt || window.event;		
 			evt.eventName = 'mousemove';
 			let target = evt.target || evt.srcElement;
@@ -112,7 +112,7 @@ class jmMouseEvent {
 			}				
 		});
 		
-		this.eventEvents['mousedown'] = jmUtils.bindEvent(this.target,'mouseover',function(evt) {
+		this.eventEvents['mouseover'] = jmUtils.bindEvent(this.target,'mouseover',function(evt) {
 			evt = evt || window.event;	
 			evt.eventName = 'mouseover';
 			container.raiseEvent('mouseover',evt);

package/src/core/jmGradient.js

@@ -13,8 +13,12 @@ export default class jmGradient {
 
 		if(opt && typeof opt == 'object') {
 			for(let k in opt) {
+				if(k === 'stops') continue;
 				this[k] = opt[k];
 			}
+			if(opt.stops && Array.isArray(opt.stops)) {
+				this.stops.push(...opt.stops);
+			}
 		}
 		//解析字符串格式
 		//linear-gradient(direction, color-stop1, color-stop2, ...);
@@ -87,6 +91,7 @@ export default class jmGradient {
 		if(this.type === 'linear') {
 			if(control.mode === 'webgl' && control.webglControl) {
 				gradient = control.webglControl.createLinearGradient(x1, y1, x2, y2, bounds);
+				gradient.key = this.toString();
 			}	
 			else {		
 				context.createLinearGradient && (gradient = context.createLinearGradient(sx1, sy1, sx2, sy2));
@@ -105,6 +110,7 @@ export default class jmGradient {
 			}
 			if(control.mode === 'webgl' && control.webglControl) {
 				gradient = control.webglControl.createRadialGradient(x1, y1, r1, x2, y2, r2, bounds);
+				gradient.key = this.toString();
 			}	
 			//offsetLine = Math.abs(r2 - r1);//二圆半径差
 			else if(context.createRadialGradient) {
@@ -206,14 +212,14 @@ export default class jmGradient {
 	toString() {
 		let str = this.type + '-gradient(';
 		if(this.type == 'linear') {
-			str += this.x1.toFixed(2) + ' ' + this.y1.toFixed(2) + ' ' + this.x2.toFixed(2) + ' ' + this.y2.toFixed(2);
+			str += this.x1 + ' ' + this.y1 + ' ' + this.x2 + ' ' + this.y2;
 		}
 		else {
-			str += this.x1.toFixed(2) + ' ' + this.y1.toFixed(2) + ' ' + this.r1.toFixed(2) + ' ' + this.x2.toFixed(2) + ' ' + this.y2.toFixed(2) + ' ' + this.r2.toFixed(2);
+			str += this.x1 + ' ' + this.y1 + ' ' + this.r1 + ' ' + this.x2 + ' ' + this.y2 + ' ' + this.r2;
 		}
 		//颜色渐变
 		this.stops.each(function(i,s) {	
-			str += ',' + s.color + ' ' + s.offset.toFixed(2);
+			str += ',' + s.color + ' ' + s.offset;
 		});
 		return str + ')';
 	}

package/src/core/jmGraph.js

@@ -27,7 +27,7 @@ export default class jmGraph extends jmControl {
 		}
 	
 		option = option || {};
-		option.mode = '2d'; // webgl | 2d 暂不支持webgl
+		//option.mode = '2d'; // webgl | 2d 暂不支持webgl
 		option.interactive = true;
 		option.isRegular = true;// 规则的
 
@@ -170,20 +170,7 @@ export default class jmGraph extends jmControl {
 		}
 
 		this.context.viewport && this.context.viewport(0, 0, w, h);
-	}
-
-	/**
-	 * 内部坐标转为页面坐标，这里主要是有devicePixelRatio倍数问题
-	 * @param {x, y} point 内部坐标
-	 */
-	pointToPixes(point) {
-		if(this.dprScaleSize && this.dprScaleSize !== 1) {
-			point = Object.assign({}, point, {
-				x: point.x / this.dprScaleSize,
-				y: point.y / this.dprScaleSize
-			});
-		}
-		return point;
+		this.needUpdate = true;
 	}
 
 	/**
@@ -304,13 +291,14 @@ export default class jmGraph extends jmControl {
 	 * @param {number} y2 线性渐变结束点Y坐标
 	 * @return {jmGradient} 线性渐变对象
 	 */
-	createLinearGradient(x1, y1, x2, y2) {
+	createLinearGradient(x1, y1, x2, y2, stops=[]) {
 		const gradient = new jmGradient({
 			type:'linear',
 			x1: x1,
 			y1: y1,
 			x2: x2,
-			y2: y2
+			y2: y2,
+			stops
 		});
 		return gradient;
 	}
@@ -327,7 +315,7 @@ export default class jmGraph extends jmControl {
 	 * @param {number} r2 放射渐变大圆半径
 	 * @return {jmGradient} 放射渐变对象
 	 */
-	createRadialGradient(x1, y1, r1, x2, y2, r2) {	
+	createRadialGradient(x1, y1, r1, x2, y2, r2, stops=[]) {	
 		const gradient = new jmGradient({
 			type:'radial',
 			x1: x1,
@@ -335,7 +323,8 @@ export default class jmGraph extends jmControl {
 			r1: r1,
 			x2: x2,
 			y2: y2,
-			r2: r2
+			r2: r2,
+			stops
 		});
 		return gradient;
 	}
@@ -505,14 +494,14 @@ export default class jmGraph extends jmControl {
 			};		
 		}
 		
-		this.context.scale(dx,dy);
+		//this.context.scale && this.context.scale(dx,dy);
 		if(!this.scaleSize) {
-			this.scaleSize = {x:dx,y:dy};
+			this.scaleSize = {x: 1,y: 1};
 		}
 		else {
-			this.scaleSize = {x:dx * this.scaleSize.x, y:dy * this.scaleSize.y};
+			this.scaleSize = {x: dx * this.scaleSize.x, y: dy * this.scaleSize.y};
 		}
-		this.refresh();
+		this.canvas.style && (this.canvas.style.transform = `scale(${this.scaleSize.x}, ${this.scaleSize.y})`);
 	}
 
 	/**
@@ -535,14 +524,17 @@ export default class jmGraph extends jmControl {
 		const self = this;
 		this.___isAutoRefreshing = true;
 		
+		const refreshStartTime = Date.now();
 		function update() {
 			if(self.destroyed) {
 				self.___isAutoRefreshing = false;
 				return;// 已销毁
 			}
 			if(self.needUpdate) self.redraw();
+
+			const time = Date.now() - refreshStartTime;
 			// 触发刷新事件
-			self.emit('update');
+			self.emit('update', time);
 
 			self.__requestAnimationFrameFunHandler && self.cancelAnimationFrame(self.__requestAnimationFrameFunHandler);
 			self.__requestAnimationFrameFunHandler = self.requestAnimationFrame(update);

package/src/core/jmPath.js

@@ -13,7 +13,6 @@ export default class jmPath extends jmControl {
 	constructor(params, t='jmPath') {
 		super(params, t);		
 		this.points = params && params.points ? params.points : [];	
-		this.polygonIndices = params && params.polygonIndices ? params.polygonIndices : [];	
 	}
 	
 	/**
@@ -29,22 +28,7 @@ export default class jmPath extends jmControl {
 	set points(v) {
 		this.needUpdate = true;
 		return this.property('points', v);
-	}
-
-	/**
-	 * 顶点数组索引，对应points中的顶点
-	 * @property polygonIndices
-	 * @type {array} 
-	 */
-	get polygonIndices() {
-		let s = this.property('polygonIndices');
-		return s;
-	}
-	set polygonIndices(v) {
-		this.needUpdate = true;
-		return this.property('polygonIndices', v);
-	}
-	
+	}	
 	
 }
 

package/src/core/jmUtils.js

@@ -883,6 +883,12 @@ export default class jmUtils {
             b = typeof color.b !== 'undefined'? color.b: b;
             a = typeof color.a !== 'undefined'? color.a: a;
         }
+        if(r && typeof r === 'object') {
+            g = r.g;
+            b = r.b;
+            a = r.a || 1;
+            r = r.r;
+        }
         if(typeof r != 'undefined' && typeof g != 'undefined' && typeof b != 'undefined') {
             if(typeof a != 'undefined') {            
                 return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';

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;