jmgraph 3.2.7 → 3.2.8

package/src/core/jmControl.js

@@ -4,7 +4,7 @@ import {jmList} from "./jmList.js";
 import {jmGradient} from "./jmGradient.js";
 import {jmShadow} from "./jmShadow.js";
 import {jmProperty} from "./jmProperty.js";
-//import WebglPath from "../lib/webgl/path.js";
+import WebglPath from "../lib/webgl/path.js";
 
 //样式名称，也当做白名单使用		
 const jmStyleMap = {
@@ -55,16 +55,17 @@ export default class jmControl extends jmProperty {
 
 		this.graph = params.graph || null;
 		this.zIndex = params.zIndex || 0;
-		this.interactive = typeof params.interactive == 'undefined'? true : params.interactive;
+		this.interactive = typeof params.interactive == 'undefined'? false : params.interactive;
 
 		// webgl模式
-		/*if(this.mode === 'webgl') {
+		if(this.mode === 'webgl') {
 			this.webglControl = new WebglPath(this.graph, {
 				style: this.style,
+				control: this,
 				isRegular: params.isRegular,
 				needCut: params.needCut
 			});
-		}*/
+		}
 
 		this.initializing();	
 		
@@ -142,7 +143,7 @@ export default class jmControl extends jmProperty {
 	 * @type {boolean}
 	 */
 	get interactive() {
-		let s = this.property('interactive');
+		const s = this.property('interactive');
 		return s;
 	}
 	set interactive(v) {
@@ -205,7 +206,6 @@ export default class jmControl extends jmProperty {
 		return s;
 	}
 	set zIndex(v) {
-		this.needUpdate = true;
 		this.property('zIndex', v);
 		this.children.sort();//层级发生改变，需要重新排序
 		this.needUpdate = true;
@@ -389,11 +389,6 @@ export default class jmControl extends jmProperty {
 				else if(mpname) {
 					
 					if(this.webglControl) {
-						//只有存在白名单中才处理
-						//颜色转换
-						if(t == 'string' && ['fillStyle', 'strokeStyle', 'shadowColor'].indexOf(mpname) > -1) {
-							styleValue = jmUtils.hexToRGBA(styleValue);
-						}
 
 						this.webglControl.setStyle(mpname, styleValue);
 					}
@@ -422,41 +417,36 @@ export default class jmControl extends jmProperty {
 						}
 						//平移
 						case 'translate' : {
-							this.context.translate && this.context.translate(styleValue.x, styleValue.y);
 							break;
 						}
 						//旋转
 						case 'rotation' : {	
-							if(!styleValue.angle) break;							
-							//旋 转先移位偏移量
-							let tranX = 0;
-							let tranY = 0;
+							if(typeof styleValue.angle === 'undefined' || isNaN(styleValue.angle)) break;	
+							styleValue = this.getRotation(styleValue);
+							
 							//旋转，则移位，如果有中心位则按中心旋转，否则按左上角旋转
 							//这里只有style中的旋转才能生效，不然会导至子控件多次旋转
-							if(styleValue.point) {
-								let bounds = this.absoluteBounds?this.absoluteBounds:this.getAbsoluteBounds();
-								styleValue = this.getRotation(styleValue);
-								
-								tranX = styleValue.rotateX + bounds.left;
-								tranY = styleValue.rotateY + bounds.top;	
-							}
-												
-							if(tranX!=0 || tranY != 0) this.context.translate && this.context.translate(tranX,tranY);
-							this.context.rotate(styleValue.angle);
-							if(tranX!=0 || tranY != 0) this.context.translate && this.context.translate(-tranX,-tranY);
+							styleValue = this.toAbsolutePoint(styleValue);
+									
+							this.context.translate && this.context.translate(styleValue.x, styleValue.y);							
+							this.context.rotate && this.context.rotate(styleValue.angle);
+							this.context.translate && this.context.translate(-styleValue.x, -styleValue.y);							
 							break;
 						}
 						case 'transform' : {
+							if(!this.context.transform) break;
 							if(Array.isArray(styleValue)) {
 								this.context.transform.apply(this.context, styleValue);
 							}
 							else if(typeof styleValue == 'object') {
-								this.context.transform(styleValue.scaleX,//水平缩放
-								styleValue.skewX,//水平倾斜
-								styleValue.skewY,//垂直倾斜
-								styleValue.scaleY,//垂直缩放
-								styleValue.offsetX,//水平位移
-								styleValue.offsetY);//垂直位移
+								this.context.transform(
+									styleValue.scaleX || 1,//水平缩放
+									styleValue.skewX || 0,//水平倾斜
+									styleValue.skewY || 0,//垂直倾斜
+									styleValue.scaleY || 1,//垂直缩放
+									styleValue.offsetX || 0,//水平位移
+									styleValue.offsetY || 0//垂直位移
+								);
 							}								
 							break;
 						}
@@ -523,8 +513,7 @@ export default class jmControl extends jmProperty {
 			}
 		}
 		else if(this.points && this.points.length > 0) {		
-			for(let i in this.points) {
-				let p = this.points[i];
+			for(const p of this.points) {
 				if(typeof rect.left === 'undefined' || rect.left > p.x) {
 					rect.left = p.x;
 				}
@@ -555,6 +544,7 @@ export default class jmControl extends jmProperty {
 		if(!rect.bottom) rect.bottom = 0; 
 		rect.width = rect.right - rect.left;
 		rect.height = rect.bottom - rect.top;
+		
 		return this.bounds=rect;
 	}
 
@@ -579,7 +569,7 @@ export default class jmControl extends jmProperty {
 		local.width = this.width;
 		local.height = this.height;
 
-		let margin = jmUtils.clone(this.style.margin, {});
+		const margin = jmUtils.clone(this.style.margin, {});
 		margin.left = (margin.left || 0);
 		margin.top = (margin.top || 0);
 		margin.right = (margin.right || 0);
@@ -595,38 +585,39 @@ export default class jmControl extends jmProperty {
 			local.top = margin.top;
 		}
 
-		if(!this.parent) return local;//没有父节点则直接返回
-		let parentBounds = this.parent.getBounds();	
+		if(this.parent) {
+			const parentBounds = this.parent.getBounds();	
 
-		//处理百分比参数
-		if(jmUtils.checkPercent(local.left)) {
-			local.left = jmUtils.percentToNumber(local.left) * parentBounds.width;
-		}
-		if(jmUtils.checkPercent(local.top)) {
-			local.top = jmUtils.percentToNumber(local.top) * parentBounds.height;
-		}
-		
-		//如果没有指定宽度或高度，则按百分之百计算其父宽度或高度
-		if(jmUtils.checkPercent(local.width)) {
-			local.width = jmUtils.percentToNumber(local.width) * parentBounds.width;
-		}
-		if(jmUtils.checkPercent(local.height)) {
-			local.height = jmUtils.percentToNumber(local.height) * parentBounds.height;
-		}
-		//处理中心点
-		if(local.center) {
 			//处理百分比参数
-			if(jmUtils.checkPercent(local.center.x)) {
-				local.center.x = jmUtils.percentToNumber(local.center.x) * parentBounds.width;
+			if(jmUtils.checkPercent(local.left)) {
+				local.left = jmUtils.percentToNumber(local.left) * parentBounds.width;
 			}
-			if(jmUtils.checkPercent(local.center.y)) {
-				local.center.y = jmUtils.percentToNumber(local.center.y) * parentBounds.height;
+			if(jmUtils.checkPercent(local.top)) {
+				local.top = jmUtils.percentToNumber(local.top) * parentBounds.height;
 			}
-		}
-		if(local.radius) {
-			//处理百分比参数
-			if(jmUtils.checkPercent(local.radius)) {
-				local.radius = jmUtils.percentToNumber(local.radius) * Math.min(parentBounds.width, parentBounds.height);
+			
+			//如果没有指定宽度或高度，则按百分之百计算其父宽度或高度
+			if(jmUtils.checkPercent(local.width)) {
+				local.width = jmUtils.percentToNumber(local.width) * parentBounds.width;
+			}
+			if(jmUtils.checkPercent(local.height)) {
+				local.height = jmUtils.percentToNumber(local.height) * parentBounds.height;
+			}
+			//处理中心点
+			if(local.center) {
+				//处理百分比参数
+				if(jmUtils.checkPercent(local.center.x)) {
+					local.center.x = jmUtils.percentToNumber(local.center.x) * parentBounds.width;
+				}
+				if(jmUtils.checkPercent(local.center.y)) {
+					local.center.y = jmUtils.percentToNumber(local.center.y) * parentBounds.height;
+				}
+			}
+			if(local.radius) {
+				//处理百分比参数
+				if(jmUtils.checkPercent(local.radius)) {
+					local.radius = jmUtils.percentToNumber(local.radius) * Math.min(parentBounds.width, parentBounds.height);
+				}
 			}
 		}
 		return local;
@@ -636,34 +627,54 @@ export default class jmControl extends jmProperty {
 	 * 获取当前控制的旋转信息
 	 * @returns {object} 旋转中心和角度
 	 */
-	getRotation(rotation) {
-		rotation = rotation || this.style.rotation;
+	getRotation(rotation, bounds = null) {
+		rotation = rotation || jmUtils.clone(this.style.rotation);
+
 		if(!rotation) {
 			//如果本身没有，则可以继承父级的
 			rotation = this.parent && this.parent.getRotation?this.parent.getRotation():null;
 			//如果父级有旋转，则把坐标转换为当前控件区域
 			if(rotation) {
-				let bounds = this.getBounds();
-				rotation.rotateX -= bounds.left;
-				rotation.rotateY -= bounds.top;
+				bounds = bounds || this.getBounds();
+				rotation.x -= bounds.left;
+				rotation.y -= bounds.top;
 			}
 		}
 		else {
-			let bounds = this.getBounds();
-			rotation.rotateX = rotation.point.x;
-			if(jmUtils.checkPercent(rotation.rotateX)) {
-				rotation.rotateX  = jmUtils.percentToNumber(rotation.rotateX) * bounds.width;
+			bounds = bounds || this.getBounds();
+			if(typeof rotation.x === 'undefined') rotation.x = '50%';
+			if(typeof rotation.y === 'undefined') rotation.y = '50%';
+			if(jmUtils.checkPercent(rotation.x)) {
+				rotation.x  = jmUtils.percentToNumber(rotation.x) * bounds.width;
 			}
-
-			rotation.rotateY = rotation.point.y;
-			if(jmUtils.checkPercent(rotation.rotateY)) {
-				rotation.rotateY  = jmUtils.percentToNumber(rotation.rotateY) * bounds.height;
+			if(jmUtils.checkPercent(rotation.y)) {
+				rotation.y  = jmUtils.percentToNumber(rotation.y) * bounds.height;
 			}
 		}
 		return rotation;
 
 	}
 
+	// 计算位移偏移量
+	getTranslate(translate, bounds = null) {
+		translate = translate || this.style.translate;
+		if(!translate) return {x: 0, y: 0};
+		const result = {
+			x: translate.x || 0,
+			y: translate.y || 0
+		}
+		
+		if(jmUtils.checkPercent(result.x)) {
+			if(!bounds && this.parent) bounds = this.parent.getBounds();
+			result.x  = jmUtils.percentToNumber(result.x) * bounds.width;
+		}
+		if(jmUtils.checkPercent(result.y)) {
+			if(!bounds && this.parent) bounds = this.parent.getBounds();
+			result.y  = jmUtils.percentToNumber(result.y) * bounds.height;
+		}
+		return result;
+	}
+
 	/**
 	 * 移除当前控件
 	 * 如果是VML元素，则调用其删除元素
@@ -794,6 +805,22 @@ export default class jmControl extends jmProperty {
 		return rec;
 	}
 
+	/**
+	 * 把当前控制内部坐标转为canvas绝对定位坐标
+	 * 
+	 * @method toAbsolutePoint
+	 * @param {x: number, y: number} 内部坐标
+	 */
+	toAbsolutePoint(point) {
+		if(point.x || point.y) {
+			const bounds = this.absoluteBounds?this.absoluteBounds:this.getAbsoluteBounds();
+			
+			point.x = (point.x||0) + bounds.left;
+			point.y = (point.y||0) + bounds.top;	
+		}
+		return point;
+	}
+
 	/**
 	 * 画控件前初始化
 	 * 执行beginPath开始控件的绘制
@@ -803,7 +830,7 @@ export default class jmControl extends jmProperty {
 	beginDraw() {	
 		this.getLocation(true);//重置位置信息
 		this.context.beginPath && this.context.beginPath();		
-		//if(this.webglControl && this.webglControl.beginDraw) this.webglControl.beginDraw();
+		if(this.webglControl && this.webglControl.beginDraw) this.webglControl.beginDraw();
 	}
 
 	/**
@@ -814,24 +841,24 @@ export default class jmControl extends jmProperty {
 	endDraw() {
 		//如果当前为封闭路径
 		if(this.style.close) {
-			//if(this.webglControl) this.webglControl.closePath();
+			if(this.webglControl) this.webglControl.closePath();
 			this.context.closePath && this.context.closePath();
 		}
 		
 		const fill = this.style['fill'] || this.style['fillStyle'];
 		if(fill) {
-			/*if(this.webglControl) {
+			if(this.webglControl) {
 				const bounds = this.getBounds();
 				this.webglControl.fill(bounds);
-			}*/
+			}
 			this.context.fill && this.context.fill();
 		}
 		if(this.style['stroke'] || (!fill && !this.is('jmGraph'))) {
-			//if(this.webglControl) this.webglControl.stroke();
+			if(this.webglControl) this.webglControl.stroke();
 			this.context.stroke && this.context.stroke();
 		}
 
-		//if(this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
+		if(this.webglControl && this.webglControl.endDraw) this.webglControl.endDraw();
 
 		this.needUpdate = false;
 	}
@@ -846,13 +873,13 @@ export default class jmControl extends jmProperty {
 		if(this.points && this.points.length > 0) {
 			//获取当前控件的绝对位置
 			const bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
-			/*if(this.webglControl) {
+			if(this.webglControl) {
 				this.webglControl.setParentBounds(bounds);
 				this.webglControl.draw([
 					...this.points
 				]);
-			}*/
-			if(this.context && this.context.moveTo) {
+			}
+			else if(this.context && this.context.moveTo) {
 				this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
 				let len = this.points.length;			
 				for(let i=1; i < len;i++) {
@@ -1038,8 +1065,8 @@ export default class jmControl extends jmProperty {
 			return true;
 		}
 		
-		let bounds = this.getBounds();	
-		let rotation = this.getRotation();//获取当前旋转参数
+		const bounds = this.getBounds();	
+		const rotation = this.getRotation(null, bounds);//获取当前旋转参数
 		let ps = this.points;
 		//如果不是路径组成，则采用边界做为顶点
 		if(!ps || !ps.length) {
@@ -1059,27 +1086,27 @@ export default class jmControl extends jmProperty {
 				ps = jmUtils.clone(ps, true);//拷贝一份数据
 				//rotateX ,rotateY 是相对当前控件的位置
 				ps = jmUtils.rotatePoints(ps, {
-					x: rotation.rotateX + bounds.left,
-					y: rotation.rotateY + bounds.top
+					x: rotation.x + bounds.left,
+					y: rotation.y + bounds.top
 				}, rotation.angle);
 			}
 			//如果当前路径不是实心的
 			//就只用判断点是否在边上即可	
 			if(ps.length > 2 && (!this.style['fill'] || this.style['stroke'])) {
 				let i = 0;
-				let count = ps.length;
+				const count = ps.length;
 				for(let j = i+1; j <= count; j = (++i + 1)) {
 					//如果j超出最后一个
 					//则当为封闭图形时跟第一点连线处理.否则直接返回false
 					if(j == count) {
 						if(this.style.close) {
-							let r = jmUtils.pointInPolygon(p,[ps[i],ps[0]], pad);
+							const r = jmUtils.pointInPolygon(p,[ps[i],ps[0]], pad);
 							if(r) return true;
 						}
 					} 
 					else {
 						//判断是否在点i,j连成的线上
-						let s = jmUtils.pointInPolygon(p,[ps[i],ps[j]], pad);
+						const s = jmUtils.pointInPolygon(p,[ps[i],ps[j]], pad);
 						if(s) return true;
 					}			
 				}
@@ -1087,7 +1114,7 @@ export default class jmControl extends jmProperty {
 				if(!this.style['fill']) return false;
 			}
 
-			let r = jmUtils.pointInPolygon(p,ps, pad);		
+			const r = jmUtils.pointInPolygon(p,ps, pad);		
 			return r;
 		}
 
@@ -1117,7 +1144,7 @@ export default class jmControl extends jmProperty {
 
 			const srcElement = args.srcElement || args.target;			
 			
-			const position = jmUtils.getEventPosition(args, graph.scaleSize);//初始化事件位置
+			const position = jmUtils.getEventPosition(args);//初始化事件位置
 		
 			args = {
 				position: position,
@@ -1388,6 +1415,8 @@ export default class jmControl extends jmProperty {
 			graph.unbind('touchend',this.__mvMonitor.mu);
 			this.unbind('touchstart',this.__mvMonitor.md);	
 		}
+
+		this.interactive = true;// 如果可以移动，则响应事件
 		return this;
 	}
 };

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

@@ -91,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));
@@ -109,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) {
@@ -210,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;
 	}
 
 	/**
@@ -507,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})`);
 	}
 
 	/**
@@ -537,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 + ')';