jmgraph 3.2.2 → 3.2.3

package/src/shapes/jmArc.js

@@ -1,4 +1,5 @@
 import {jmPath} from "../core/jmPath.js";
+
 /**
  * 圆弧图型 继承自jmPath
  *
@@ -10,6 +11,9 @@ export default class jmArc extends jmPath {
 
 	constructor(params, t='jmArc') {
 		if(!params) params = {};
+		params.isRegular = params.isRegular === false? false: true;// 规则的
+		params.needCut = params.needCut === true? true: false;// 规则的
+		
 		super(params, t);
 
 		this.center = params.center || {x:0,y:0};
@@ -30,11 +34,11 @@ export default class jmArc extends jmPath {
 	 * @type {point}
 	 */
 	get center() {
-		return this.__pro('center');
+		return this.property('center');
 	}
 	set center(v) {
 		this.needUpdate = true;
-		return this.__pro('center', v);
+		return this.property('center', v);
 	}
 
 	/**
@@ -43,11 +47,11 @@ export default class jmArc extends jmPath {
 	 * @type {number}
 	 */
 	get radius() {
-		return this.__pro('radius');
+		return this.property('radius');
 	}
 	set radius(v) {
 		this.needUpdate = true;
-		return this.__pro('radius', v);
+		return this.property('radius', v);
 	}
 
 	/**
@@ -56,11 +60,11 @@ export default class jmArc extends jmPath {
 	 * @type {number}
 	 */
 	get startAngle() {
-		return this.__pro('startAngle');
+		return this.property('startAngle');
 	}
 	set startAngle(v) {
 		this.needUpdate = true;
-		return this.__pro('startAngle', v);
+		return this.property('startAngle', v);
 	}
 
 	/**
@@ -69,11 +73,11 @@ export default class jmArc extends jmPath {
 	 * @type {number}
 	 */
 	get endAngle() {
-		return this.__pro('endAngle');
+		return this.property('endAngle');
 	}
 	set endAngle(v) {
 		this.needUpdate = true;
-		return this.__pro('endAngle', v);
+		return this.property('endAngle', v);
 	}
 
 	/**
@@ -83,11 +87,11 @@ export default class jmArc extends jmPath {
 	 * @type {boolean}
 	 */
 	get anticlockwise() {
-		return this.__pro('anticlockwise');
+		return this.property('anticlockwise');
 	}
 	set anticlockwise(v) {
 		this.needUpdate = true;
-		return this.__pro('anticlockwise', v);
+		return this.property('anticlockwise', v);
 	}
 
 
@@ -137,7 +141,7 @@ export default class jmArc extends jmPath {
 			if(step > 0 && r > end) r = end;
 			else if(step < 0 && r < end) r = end;
 
-			let p = {
+			const p = {
 				x : Math.cos(r) * mw + cx,
 				y : Math.sin(r) * mh + cy
 			};

package/src/shapes/jmArrow.js

@@ -29,11 +29,11 @@ export default class jmArrow extends jmPath {
 	 * @type {point}
 	 */
 	get start() {
-		return this.__pro('start');
+		return this.property('start');
 	}
 	set start(v) {
 		this.needUpdate = true;
-		return this.__pro('start', v);
+		return this.property('start', v);
 	}
 
 	/**
@@ -44,11 +44,11 @@ export default class jmArrow extends jmPath {
 	 * @type {point} 结束点
 	 */
 	get end() {
-		return this.__pro('end');
+		return this.property('end');
 	}
 	set end(v) {
 		this.needUpdate = true;
-		return this.__pro('end', v);
+		return this.property('end', v);
 	}
 
 	/**
@@ -59,11 +59,11 @@ export default class jmArrow extends jmPath {
 	 * @type {number} 箭头角度
 	 */
 	get angle() {
-		return this.__pro('angle');
+		return this.property('angle');
 	}
 	set angle(v) {
 		this.needUpdate = true;
-		return this.__pro('angle', v);
+		return this.property('angle', v);
 	}
 
 	/**
@@ -74,11 +74,11 @@ export default class jmArrow extends jmPath {
 	 * @type {number}
 	 */
 	get offsetX() {
-		return this.__pro('offsetX');
+		return this.property('offsetX');
 	}
 	set offsetX(v) {
 		this.needUpdate = true;
-		return this.__pro('offsetX', v);
+		return this.property('offsetX', v);
 	}
 
 	/**
@@ -89,11 +89,11 @@ export default class jmArrow extends jmPath {
 	 * @type {number}
 	 */
 	get offsetY() {
-		return this.__pro('offsetY');
+		return this.property('offsetY');
 	}
 	set offsetY(v) {
 		this.needUpdate = true;
-		return this.__pro('offsetY', v);
+		return this.property('offsetY', v);
 	}
 
 	/**

package/src/shapes/jmBezier.js

@@ -27,11 +27,11 @@ export default class jmBezier extends jmPath {
 	 * @type {array}
 	 */
 	get cpoints() {
-		return this.__pro('cpoints');
+		return this.property('cpoints');
 	}
 	set cpoints(v) {
 		this.needUpdate = true;
-		return this.__pro('cpoints', v);
+		return this.property('cpoints', v);
 	}
 	
 	/**

package/src/shapes/jmCircle.js

@@ -9,6 +9,7 @@ import {jmArc} from "./jmArc.js";
 export default class jmCircle extends jmArc {		
 	
 	constructor(params, t='jmCircle') {
+		params.isRegular = true;// 规则的
 		super(params, t);		
 	}
 	/**
@@ -18,7 +19,10 @@ export default class jmCircle extends jmArc {
 	 * @private
 	 * @for jmCircle
 	 */
-	initPoints() {			
+	initPoints() {		
+		if(this.graph.mode === 'webgl') {
+			return super.initPoints();
+		}	
 		let location = this.getLocation();
 		
 		if(!location.radius) {
@@ -37,6 +41,9 @@ export default class jmCircle extends jmArc {
 	 * @method draw
 	 */
 	draw() {
+		if(this.graph.mode === 'webgl') {
+			return super.draw();
+		}
 		let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;	
 		let location = this.getLocation();
 		

package/src/shapes/jmHArc.js

@@ -10,6 +10,8 @@ import {jmArc} from "./jmArc.js";
 export default class jmHArc extends jmArc {
 		
 	constructor(params, t='jmHArc') {
+		params.isRegular = true;// 规则的
+		params.needCut = true;
 		super(params, t);
 
 		this.minRadius = params.minRadius || this.style.minRadius || 0;
@@ -24,11 +26,11 @@ export default class jmHArc extends jmArc {
 	 * @type {number} 
 	 */
 	get minRadius() {
-		return this.__pro('minRadius');
+		return this.property('minRadius');
 	}
 	set minRadius(v) {
 		this.needUpdate = true;
-		return this.__pro('minRadius', v);
+		return this.property('minRadius', v);
 	}
 
 	/**
@@ -39,11 +41,11 @@ export default class jmHArc extends jmArc {
 	 * @type {number} 
 	 */
 	get maxRadius() {
-		return this.__pro('maxRadius');
+		return this.property('maxRadius');
 	}
 	set maxRadius(v) {
 		this.needUpdate = true;
-		return this.__pro('maxRadius', v);
+		return this.property('maxRadius', v);
 	}
 
 	/**
@@ -53,18 +55,18 @@ export default class jmHArc extends jmArc {
 	 * @private
 	 */
 	initPoints() {	
-		let location = this.getLocation();	
+		const location = this.getLocation();	
 		//如果设定了半径。则以半径为主
-		let minr = this.minRadius;
-		let maxr = this.maxRadius;
+		const minr = this.minRadius;
+		const maxr = this.maxRadius;
 		
 		let start = this.startAngle;
 		let end = this.endAngle;
-		let anticlockwise = this.anticlockwise;
+		const anticlockwise = this.anticlockwise;
 
 		//如果是逆时针绘制，则角度为负数，并且结束角为2Math.PI-end
 		if(anticlockwise) {
-			let p2 =  Math.PI*2;
+			const p2 =  Math.PI*2;
 			start = p2 - start;
 			end = p2 - end;
 		}
@@ -72,8 +74,8 @@ export default class jmHArc extends jmArc {
 		let step = 0.1;
 		if(start > end) step = -step;
 
-		let minps = [];
-		let maxps = [];
+		const minps = [];
+		const maxps = [];
 		//椭圆方程x=a*cos(r) ,y=b*sin(r)
 		for(let r=start;;r += step) {
 			if(step > 0 && r > end) {
@@ -83,13 +85,13 @@ export default class jmHArc extends jmArc {
 				r = end;
 			}
 
-			let cos = Math.cos(r);
-			let sin = Math.sin(r);
-			let p1 = {
+			const cos = Math.cos(r);
+			const sin = Math.sin(r);
+			const p1 = {
 				x : cos * minr + location.center.x,
 				y : sin * minr + location.center.y
 			};
-			let p2 = {
+			const p2 = {
 				x : cos * maxr + location.center.x,
 				y : sin * maxr + location.center.y
 			};

package/src/shapes/jmImage.js

@@ -12,6 +12,7 @@ export default class jmImage extends jmControl {
 
 	constructor(params, t) {
 		params = params || {};
+		params.isRegular = true;// 规则的
 		super(params, t||'jmImage');
 
 		this.style.fill = this.fill || 'transparent';//默认指定一个fill，为了可以鼠标选中
@@ -29,10 +30,10 @@ export default class jmImage extends jmControl {
 	 * @type {point}
 	 */
 	get sourcePosition() {
-		return this.__pro('sourcePosition');
+		return this.property('sourcePosition');
 	}
 	set sourcePosition(v) {
-		return this.__pro('sourcePosition', v);
+		return this.property('sourcePosition', v);
 	}
 
 	/**
@@ -42,11 +43,11 @@ export default class jmImage extends jmControl {
 	 * @type {number}
 	 */
 	get sourceWidth() {
-		return this.__pro('sourceWidth');
+		return this.property('sourceWidth');
 	}
 	set sourceWidth(v) {
 		this.needUpdate = true;
-		return this.__pro('sourceWidth', v);
+		return this.property('sourceWidth', v);
 	}
 
 	/**
@@ -56,11 +57,11 @@ export default class jmImage extends jmControl {
 	 * @type {number}
 	 */
 	get sourceHeight() {
-		return this.__pro('sourceHeight');
+		return this.property('sourceHeight');
 	}
 	set sourceHeight(v) {
 		this.needUpdate = true;
-		return this.__pro('sourceHeight', v);
+		return this.property('sourceHeight', v);
 	}
 
 	/**
@@ -70,11 +71,11 @@ export default class jmImage extends jmControl {
 	 * @type {img}
 	 */
 	get image() {
-		return this.__pro('image');
+		return this.property('image');
 	}
 	set image(v) {
 		this.needUpdate = true;
-		return this.__pro('image', v);
+		return this.property('image', v);
 	}
 
 	/**
@@ -84,23 +85,9 @@ export default class jmImage extends jmControl {
 	 * @method draw
 	 */
 	draw() {	
-		try {
-			
-			let img = this.getImage();
-			if(this.graph.isWXMiniApp && this.graph.canvas && typeof img === 'string') {
-				// 图片对象
-				const image = this.graph.canvas.createImage();
-				// 图片加载完成回调
-				image.onload = () => {
-					// 将图片绘制到 canvas 上
-					this.drawImg(image);
-				}
-				// 设置图片src
-				image.src = img;
-			}
-			else {
-				this.drawImg(img);
-			}
+		try {			
+			const img = this.getImage();	
+			this.drawImg(img);
 		}
 		catch(e) {
 			console.error && console.error(e);
@@ -109,42 +96,72 @@ export default class jmImage extends jmControl {
 
 	// 绘制
 	drawImg(img) {
-		if(!img) {
+		if(!img || !img.complete) {
 			console.warn('image is empty');
 			return;
 		}
 		let bounds = this.parent && this.parent.absoluteBounds?this.parent.absoluteBounds:this.absoluteBounds;
 		if(!bounds) bounds = this.parent && this.parent.getAbsoluteBounds?this.parent.getAbsoluteBounds():this.getAbsoluteBounds();
-		let p = this.getLocation();
-		p.left += bounds.left;
-		p.top += bounds.top;
+
+		let p = this.getLocation();		
 
 		let sp = this.sourcePosition;
 		let sw = this.sourceWidth;
 		let sh = this.sourceHeight;
 
+		const ctx = this.webglControl || this.context;
+		if(this.webglControl) {
+			ctx.setParentBounds && ctx.setParentBounds(bounds);
+			const localBounds = this.getBounds();
+			// 给图片给定顶点
+			ctx.draw([
+				{
+					x: localBounds.left,
+					y: localBounds.top
+				},
+				{
+					x: localBounds.left + localBounds.width,
+					y: localBounds.top
+				},
+				{
+					x: localBounds.left + localBounds.width,
+					y: localBounds.top + localBounds.height
+				},
+				 {
+					x: localBounds.left, 
+					y: localBounds.top + localBounds.height
+				 }
+			], bounds);
+			ctx.drawImage(img, localBounds.left, localBounds.top, localBounds.width, localBounds.height);
+			return;
+		}
+
+		// 计算绝对定位
+		p.left += bounds.left;
+		p.top += bounds.top;
+
 		if(sp || typeof sw != 'undefined' || typeof sh != 'undefined') {	
 			if(typeof sw == 'undefined') sw= p.width || img.width || 0;
 			if(typeof sh == 'undefined') sh= p.height || img.height || 0;
 			sp = sp || {x:0, y:0};
 
-			if(p.width && p.height) this.context.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,p.width,p.height);
+			if(p.width && p.height) ctx.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,p.width,p.height);
 			else if(p.width) {
-				this.context.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,p.width,sh);
+				ctx.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,p.width,sh);
 			}		
 			else if(p.height) {
-				this.context.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,sw,p.height);
+				ctx.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,sw,p.height);
 			}		
-			else this.context.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,sw,sh);		
+			else ctx.drawImage(img,sp.x,sp.y,sw,sh,p.left,p.top,sw,sh);		
 		}
 		else if(p) {
-			if(p.width && p.height) this.context.drawImage(img,p.left,p.top,p.width,p.height);
-			else if(p.width) this.context.drawImage(img,p.left,p.top,p.width,img.height);
-			else if(p.height) this.context.drawImage(img,p.left,p.top,img.width,p.height);
-			else this.context.drawImage(img,p.left,p.top);
+			if(p.width && p.height) ctx.drawImage(img,p.left,p.top,p.width,p.height);
+			else if(p.width) ctx.drawImage(img,p.left,p.top,p.width,img.height);
+			else if(p.height) ctx.drawImage(img,p.left,p.top,img.width,p.height);
+			else ctx.drawImage(img,p.left,p.top);
 		}
 		else {
-			this.context.drawImage(img);
+			ctx.drawImage(img);
 		}
 	}
 
@@ -185,11 +202,24 @@ export default class jmImage extends jmControl {
 		}
 		else if(typeof document !== 'undefined' && document.createElement) {
 			this.__img = document.createElement('img');
+			this.__img.onload = ()=>{
+				this.needUpdate = true;
+			};
 			if(src && typeof src == 'string') this.__img.src = src;
 		}
+		else if(this.graph.isWXMiniApp && this.graph.canvas && typeof src === 'string') {
+			// 图片对象
+			this.__img = this.graph.canvas.createImage();
+			this.__img.onload = ()=>{
+				this.needUpdate = true;
+			};
+			// 设置图片src
+			this.__img.src = src;
+		}
 		else {
 			this.__img = src;
 		}
+		this.image = this.__img.src;
 		return this.__img;
 	}
 }

package/src/shapes/jmLabel.js

@@ -10,6 +10,7 @@ export default class jmLabel extends jmControl {
 
 	constructor(params, t) {
 		params = params || {};
+		params.isRegular = true;// 规则的
 		super(params, t||'jmLabel');
 
 		this.style.font = this.style.font || "15px Arial";
@@ -32,11 +33,11 @@ export default class jmLabel extends jmControl {
 	 * @type {string}
 	 */
 	get text() {
-		return this.__pro('text');
+		return this.property('text');
 	}
 	set text(v) {
 		this.needUpdate = true;
-		return this.__pro('text', v);
+		return this.property('text', v);
 	}
 
 	/**
@@ -46,11 +47,11 @@ export default class jmLabel extends jmControl {
 	 * @type {point}
 	 */
 	get center() {
-		return this.__pro('center');
+		return this.property('center');
 	}
 	set center(v) {
 		this.needUpdate = true;
-		return this.__pro('center', v);
+		return this.property('center', v);
 	}	
 
 	/**
@@ -59,11 +60,11 @@ export default class jmLabel extends jmControl {
 	 * @type {point}
 	 */
 	get position() {
-		return this.__pro('position');
+		return this.property('position');
 	}
 	set position(v) {
 		this.needUpdate = true;
-		return this.__pro('position', v);
+		return this.property('position', v);
 	}
 
 	/**
@@ -114,7 +115,7 @@ export default class jmLabel extends jmControl {
 	testSize() {
 		if(this.__size) return this.__size;
 		
-		this.context.save();
+		this.context.save && this.context.save();
 		// 修改字体，用来计算
 		this.setStyle({
 			font: this.style.font || (this.style.fontSize + 'px ' + this.style.fontFamily)
@@ -123,7 +124,7 @@ export default class jmLabel extends jmControl {
 		this.__size = this.context.measureText?
 							this.context.measureText(this.text):
 							{width:15};
-		this.context.restore();
+		this.context.restore && this.context.restore();
 		this.__size.height = this.style.fontSize?this.style.fontSize:15;
 		if(!this.width) this.width = this.__size.width;
 		if(!this.height) this.height = this.__size.height;
@@ -192,7 +193,7 @@ export default class jmLabel extends jmControl {
 		if(this.style.border) {
 			//如果指定了边框样式
 			if(this.style.border.style) {
-				this.context.save();
+				this.context.save && this.context.save();
 				this.setStyle(this.style.border.style);
 			}
 			this.context.moveTo(this.points[0].x + bounds.left,this.points[0].y + bounds.top);
@@ -216,7 +217,7 @@ export default class jmLabel extends jmControl {
 			}
 			//如果指定了边框颜色
 			if(this.style.border.style) {
-				this.context.restore();
+				this.context.restore && this.context.restore();
 			}	
 		}		
 	}

package/src/shapes/jmLine.js

@@ -9,12 +9,16 @@ import {jmPath} from "../core/jmPath.js";
 export default class jmLine extends jmPath {	
 	
 	constructor(params, t='jmLine') {
+		
+		params.isRegular = true;// 规则的
+
 		super(params, t);
 
 		this.start = params.start || {x:0,y:0};
 		this.end = params.end || {x:0,y:0};
 		this.style.lineType = this.style.lineType || 'solid';
 		this.style.dashLength = this.style.dashLength || 4;
+		this.style.close = false;
 	}	
 
 	/**
@@ -25,11 +29,11 @@ export default class jmLine extends jmPath {
 	 * @type {point}
 	 */
 	get start() {
-		return this.__pro('start');
+		return this.property('start');
 	}
 	set start(v) {
 		this.needUpdate = true;
-		return this.__pro('start', v);
+		return this.property('start', v);
 	}
 
 	/**
@@ -40,11 +44,11 @@ export default class jmLine extends jmPath {
 	 * @type {point}
 	 */
 	get end() {
-		return this.__pro('end');
+		return this.property('end');
 	}
 	set end(v) {
 		this.needUpdate = true;
-		return this.__pro('end', v);
+		return this.property('end', v);
 	}
 
 	/**
@@ -53,30 +57,34 @@ export default class jmLine extends jmPath {
 	 * @private
 	 */
 	initPoints() {	
-		let start = this.start;
-		let end = this.end;
+		const start = this.start;
+		const end = this.end;
 		this.points = [];	
 		this.points.push(start);
 
 		if(this.style.lineType === 'dotted') {			
 			let dx = end.x - start.x;
 			let dy = end.y - start.y;
-			let lineLen = Math.sqrt(dx * dx + dy * dy);
+			const lineLen = Math.sqrt(dx * dx + dy * dy);
 			dx = dx / lineLen;
 			dy = dy / lineLen;
 			let dottedstart = false;
 
-			let dashLen = this.style.dashLength || 5;
-			let dottedsp = dashLen / 2;
+			const dashLen = this.style.dashLength || 5;
+			const dottedsp = dashLen / 2;
 			for(let l=dashLen; l<=lineLen;) {
-				if(dottedstart == false) {
-					this.points.push({x: start.x + dx * l, y: start.y + dy * l});
+				const p = {
+					x: start.x + dx * l, 
+					y: start.y + dy * l
+				};
+				if(dottedstart === false) {					
 					l += dottedsp;
 				}
 				else {				
-					this.points.push({x: start.x + dx * l, y: start.y+ dy * l, m: true});
+					p.m = true;// 移动到当时坐标
 					l += dashLen;
 				}
+				this.points.push(p);
 				dottedstart = !dottedstart;				
 			}
 		}

package/src/shapes/jmPrismatic.js

@@ -9,6 +9,8 @@ import {jmPath} from "../core/jmPath.js";
 export default class jmPrismatic extends jmPath {	
 	
 	constructor(params, t='jmPrismatic') {
+		params.isRegular = true;// 规则的
+		
 		super(params, t);
 		this.style.close = typeof this.style.close == 'undefined'? true : this.style.close;
 
@@ -26,11 +28,11 @@ export default class jmPrismatic extends jmPath {
 	 * @type {point}
 	 */
 	get center() {
-		return this.__pro('center');
+		return this.property('center');
 	}
 	set center(v) {
 		this.needUpdate = true;
-		return this.__pro('center', v);
+		return this.property('center', v);
 	}
 	
 	/**