jmgraph 3.1.77 → 3.1.90

package/index.js

@@ -1,14 +1,14 @@
 
 
 import {jmArc} from "./src/shapes/jmArc.js";
-import {jmArraw} from "./src/shapes/jmArraw.js";
+import {jmArrow} from "./src/shapes/jmArrow.js";
 import {jmBezier} from "./src/shapes/jmBezier.js";
 import {jmCircle} from "./src/shapes/jmCircle.js";
 import {jmHArc} from "./src/shapes/jmHArc.js";
 import {jmLine} from "./src/shapes/jmLine.js";
 import {jmPrismatic} from "./src/shapes/jmPrismatic.js";
 import {jmRect} from "./src/shapes/jmRect.js";
-import {jmArrawLine} from "./src/shapes/jmArrawLine.js";
+import {jmArrowLine} from "./src/shapes/jmArrowLine.js";
 import {jmImage} from "./src/shapes/jmImage.js";
 import {jmLabel} from "./src/shapes/jmLabel.js";
 import {jmResize} from "./src/shapes/jmResize.js";
@@ -25,14 +25,14 @@ import { jmGraph as jmGraphCore,
 
 const shapes = {
     "arc": jmArc,
-    "arraw": jmArraw,
+    "arrow": jmArrow,
     "bezier": jmBezier,
     "circle": jmCircle,
     "harc": jmHArc,
     "line": jmLine,
     "prismatic": jmPrismatic,
     "rect": jmRect,
-    "arrawline": jmArrawLine,
+    "arrowline": jmArrowLine,
     "image": jmImage,
     "img": jmImage,
     "label": jmLabel,
@@ -41,9 +41,15 @@ const shapes = {
 
 export default class jmGraph extends jmGraphCore {
     constructor(canvas, option, callback) {
+        
+        const targetType = new.target;
 
+        // 合并shapes
+        option = Object.assign({}, option);
+        option.shapes = Object.assign(shapes, option.shapes||{});
+        
         //不是用new实例化的话，返回一个promise
-		if(new.target !== jmGraph) {
+		if(!targetType || !(targetType.prototype instanceof jmGraphCore)) {
 			return new Promise(function(resolve, reject){				
 				var g = new jmGraph(canvas, option, callback);
 				if(resolve) resolve(g);				
@@ -53,12 +59,7 @@ export default class jmGraph extends jmGraphCore {
         if(typeof option == 'function') {
 			callback = option;
 			option = {};
-        }        
-        
-
-        // 合并shapes
-        option = Object.assign({}, option);
-        option.shapes = Object.assign(shapes, option.shapes||{});
+        } 
         
         super(canvas, option, callback);
     }
@@ -77,14 +78,14 @@ export {
     jmShadow,
     jmGradient,
 	jmArc,
-	jmArraw,
+	jmArrow,
 	jmBezier,
 	jmCircle,
 	jmHArc,
 	jmLine,
 	jmPrismatic,
 	jmRect,
-	jmArrawLine,
+	jmArrowLine,
 	jmImage,
 	jmLabel,
     jmResize,

package/package.json

@@ -1,7 +1,7 @@
 {
   "family": "jmgraph",
   "name": "jmgraph",
-  "version": "3.1.77",
+  "version": "3.1.90",
   "description": "一个简单的canvas画图库",
   "homepage": "http://graph.jm47.com/",
   "keywords": [
@@ -10,7 +10,8 @@
   ],
   "author": "jiamao<haofefe@163.com>",
   "engines": {},
-  "dependencies": {},
+  "dependencies": {
+  },
   "devDependencies": {
     "@commitlint/cli": "^7.6.1",
     "@commitlint/config-conventional": "^7.6.0",

package/src/core/jmControl.js

@@ -59,7 +59,7 @@ export default class jmControl extends jmProperty {
 		
 		this.on = this.bind;
 		
-		this.options = params;
+		this.option = params;
 	}
 
 	//# region 定义属性
@@ -1110,22 +1110,22 @@ export default class jmControl extends jmProperty {
 	raiseEvent(name, args) {
 		if(this.visible === false) return ;//如果不显示则不响应事件	
 		if(!args.position) {		
-			let graph = this.graph;
+			const graph = this.graph;
 
-			let srcElement = args.srcElement || args.target;			
+			const srcElement = args.srcElement || args.target;			
 			
-			let position = jmUtils.getEventPosition(args, graph.scaleSize);//初始化事件位置		
+			const position = jmUtils.getEventPosition(args, graph.scaleSize);//初始化事件位置		
 
 			// 如果有指定scale高清处理，需要对坐标处理
 			// 因为是对canvas放大N倍，再把style指定为当前大小，所以坐标需要放大N    && srcElement === graph.canvas      
 			if(graph.devicePixelRatio > 0) {
-				position.x = position.offsetX = position.x * devicePixelRatio;
-				position.y = position.offsetY = position.y * devicePixelRatio;
+				position.x = position.offsetX = position.x * graph.devicePixelRatio;
+				position.y = position.offsetY = position.y * graph.devicePixelRatio;
 			}
 		
 			args = {
 				position: position,
-				button: args.button == 0||position.isTouch?1:args.button,
+				button: args.button == 0 || position.isTouch? 1: args.button,
 				keyCode: args.keyCode || args.charCode || args.which,
 				ctrlKey: args.ctrlKey,
 				cancel : false,

package/src/core/jmEvents.js

@@ -16,6 +16,7 @@ export default class jmEvents {
 
 	touchStart(evt) {
 		evt = evt || window.event;
+		evt.eventName = 'touchstart';
 		this.container.raiseEvent('touchstart',evt);
 		let t = evt.target || evt.srcElement;
 		if(t == this.target) {
@@ -26,6 +27,7 @@ export default class jmEvents {
 
 	touchMove(evt) {
 		evt = evt || window.event;
+		evt.eventName = 'touchmove';
 		this.container.raiseEvent('touchmove',evt);
 		let t = evt.target || evt.srcElement;
 		if(t == this.target) {
@@ -36,6 +38,7 @@ export default class jmEvents {
 
 	touchEnd(evt) {
 		evt = evt || window.event;
+		evt.eventName = 'touchend';
 		
 		this.container.raiseEvent('touchend',evt);
 		let t = evt.target || evt.srcElement;
@@ -47,6 +50,7 @@ export default class jmEvents {
 
 	touchCancel(evt) {
 		evt = evt || window.event;
+		evt.eventName = 'touchcancel';
 		
 		this.container.raiseEvent('touchcancel',evt);
 		let t = evt.target || evt.srcElement;
@@ -87,6 +91,7 @@ class jmMouseEvent {
 
 		this.eventEvents['mousedown'] = jmUtils.bindEvent(this.target,'mousedown',function(evt) {
 			evt = evt || window.event;
+			evt.eventName = 'mousedown';
 			let r = container.raiseEvent('mousedown',evt);
 			//if(r === false) {
 				//if(evt.preventDefault) evt.preventDefault();
@@ -96,6 +101,7 @@ class jmMouseEvent {
 		
 		this.eventEvents['mousedown'] = jmUtils.bindEvent(this.target,'mousemove',function(evt) {	
 			evt = evt || window.event;		
+			evt.eventName = 'mousemove';
 			let target = evt.target || evt.srcElement;
 			if(target == canvas) {
 				let r = container.raiseEvent('mousemove',evt);
@@ -107,19 +113,23 @@ class jmMouseEvent {
 		});
 		
 		this.eventEvents['mousedown'] = jmUtils.bindEvent(this.target,'mouseover',function(evt) {
-			evt = evt || window.event;
+			evt = evt || window.event;	
+			evt.eventName = 'mouseover';
 			container.raiseEvent('mouseover',evt);
 		});
 		this.eventEvents['mouseleave'] = jmUtils.bindEvent(this.target,'mouseleave',function(evt) {
-			evt = evt || window.event;
+			evt = evt || window.event;	
+			evt.eventName = 'mouseleave';
 			container.raiseEvent('mouseleave',evt);
 		});			
 		this.eventEvents['mouseout'] = jmUtils.bindEvent(this.target,'mouseout',function(evt) {
-			evt = evt || window.event;
+			evt = evt || window.event;	
+			evt.eventName = 'mouseout';
 			container.raiseEvent('mouseout',evt);
 		});
 		doc && (this.eventEvents['mouseup'] = jmUtils.bindEvent(doc,'mouseup',function(evt) {
-			evt = evt || window.event;
+			evt = evt || window.event;	
+			evt.eventName = 'mouseup';
 			//let target = evt.target || evt.srcElement;
 			//if(target == canvas) {						
 				let r = container.raiseEvent('mouseup',evt);
@@ -132,33 +142,40 @@ class jmMouseEvent {
 		
 		this.eventEvents['dblclick'] = jmUtils.bindEvent(this.target,'dblclick',function(evt) {
 			evt = evt || window.event;
+			evt.eventName = 'dblclick';
 			container.raiseEvent('dblclick',evt);
 		});
 		this.eventEvents['click'] = jmUtils.bindEvent(this.target,'click',function(evt) {
 			evt = evt || window.event;
+			evt.eventName = 'click';
 			container.raiseEvent('click',evt);
 		});
 
 		doc && (this.eventEvents['resize'] = jmUtils.bindEvent(doc,'resize',function(evt) {
 			evt = evt || window.event;
+			evt.eventName = 'resize';
 			return container.raiseEvent('resize',evt);
 		}));
 
 		// passive: false 为了让浏览器不告警并且preventDefault有效
 		// 另一种处理：touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
 		this.eventEvents['touchstart'] = jmUtils.bindEvent(this.target,'touchstart', function(evt) {
+			evt.eventName = 'touchstart';
 			return instance.touchStart(evt);
 		},{ passive: false });
 
 		this.eventEvents['touchmove'] = jmUtils.bindEvent(this.target,'touchmove', function(evt) {
+			evt.eventName = 'touchmove';
 			return instance.touchMove(evt);
 		},{ passive: false });
 
 		doc && (this.eventEvents['touchend'] = jmUtils.bindEvent(doc,'touchend', function(evt) {
+			evt.eventName = 'touchend';
 			return instance.touchEnd(evt);
 		},{ passive: false }));
 
 		doc && (this.eventEvents['touchcancel'] = jmUtils.bindEvent(doc,'touchcancel', function(evt) {
+			evt.eventName = 'touchcancel';
 			return instance.touchCancel(evt);
 		},{ passive: false }));
 	}
@@ -213,7 +230,7 @@ class jmKeyEvent {
 			return true;
 		}
 
-		doc && (this.eventEvents['touchcancel'] = jmUtils.bindEvent(doc,'keypress',function(evt) {
+		doc && (this.eventEvents['keypress'] = jmUtils.bindEvent(doc,'keypress',function(evt) {
 			evt = evt || window.event;
 			if(!checkKeyEvent(evt)) return;//如果事件为其它输入框，则不响应
 			let r = container.raiseEvent('keypress',evt);
@@ -221,7 +238,7 @@ class jmKeyEvent {
 				evt.preventDefault();
 			return r;
 		}));
-		doc && (this.eventEvents['touchcancel'] = jmUtils.bindEvent(doc,'keydown',function(evt) {
+		doc && (this.eventEvents['keydown'] = jmUtils.bindEvent(doc,'keydown',function(evt) {
 			evt = evt || window.event;
 			if(!checkKeyEvent(evt)) return;//如果事件为其它输入框，则不响应
 			let r = container.raiseEvent('keydown',evt);
@@ -229,7 +246,7 @@ class jmKeyEvent {
 				evt.preventDefault();
 			return r;
 		}));
-		doc && (this.eventEvents['touchcancel'] = jmUtils.bindEvent(doc,'keyup',function(evt) {
+		doc && (this.eventEvents['keyup'] = jmUtils.bindEvent(doc,'keyup',function(evt) {
 			evt = evt || window.event;
 			if(!checkKeyEvent(evt)) return;//如果事件为其它输入框，则不响应
 			let r = container.raiseEvent('keyup',evt);

package/src/core/jmGraph.js

@@ -27,7 +27,7 @@ export default class jmGraph extends jmControl {
 		}
 	
 		option = option || {};
-		
+		option.mode = option.mode || '2d'; // webgl | 2d
 		option.interactive = true;
 		
 		super(option, 'jmGraph');
@@ -47,6 +47,7 @@ export default class jmGraph extends jmControl {
 		if(typeof wx != 'undefined' && wx.createCanvasContext) {
 			this.context = wx.createCanvasContext(canvas);
 			canvas = wx.createSelectorQuery().select('#' + canvas);
+			this.isWXMiniApp = true;// 微信小程序平台
 		}
 		else {
 			if(typeof canvas === 'string' && typeof document != 'undefined') {
@@ -66,8 +67,7 @@ export default class jmGraph extends jmControl {
 			}	
 			else {
 				this.container = canvas.parentElement;
-			}
-
+			}			
 			this.context = canvas.getContext('2d');
 		}
 		this.canvas = canvas;
@@ -379,7 +379,7 @@ export default class jmGraph extends jmControl {
 	* @param {string} value 样式值
 	*/
 	css(name, value) {
-		if(this.canvas) {
+		if(this.canvas && this.canvas.style) {
 			if(typeof value != 'undefined') this.canvas.style[name] = value;
 			return this.canvas.style[name];
 		}
@@ -495,16 +495,19 @@ export default class jmGraph extends jmControl {
 		if(this.___isAutoRefreshing) return;
 		const self = this;
 		this.___isAutoRefreshing = true;
+		
 		function update() {
 			if(self.destoryed) {
 				self.___isAutoRefreshing = false;
 				return;// 已销毁
 			}
 			if(self.needUpdate) self.redraw();
-			requestAnimationFrame(update);
+			self.__requestAnimationFrameFunHandler && jmUtils.cancelAnimationFrame(self.__requestAnimationFrameFunHandler);
+			self.__requestAnimationFrameFunHandler = jmUtils.requestAnimationFrame(update);
 			if(callback) callback();
 		}
-		requestAnimationFrame(update);
+		self.__requestAnimationFrameFunHandler && jmUtils.cancelAnimationFrame(self.__requestAnimationFrameFunHandler);
+		self.__requestAnimationFrameFunHandler = jmUtils.requestAnimationFrame(update);
 		return this;
 	}
 

package/src/core/jmUtils.js

@@ -169,7 +169,7 @@ export default class jmUtils {
         let isTouch = false;
         let touches = evt.changedTouches || evt.targetTouches || evt.touches;
         let target = evt.target || evt.srcElement;
-        if(touches) {
+        if(touches && touches.length) {
             evt = touches[0];//兼容touch事件
             if(!evt.target) evt.target = target;
             isTouch = true;
@@ -702,5 +702,22 @@ export default class jmUtils {
         }
         return r;
     }
+    // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
+    static requestAnimationFrame(callback) {
+        if(typeof requestAnimationFrame === 'undefined') {
+			return setTimeout(callback, 20);
+		}
+		else {
+			return requestAnimationFrame(callback);
+		}
+    }
+    static cancelAnimationFrame(handler) {
+        if(typeof requestAnimationFrame === 'undefined') {
+			return clearTimeout(handler);
+		}
+		else {
+			return cancelAnimationFrame(handler);
+		}
+    }	
 }
 export { jmUtils };

package/src/shapes/{jmArraw.js → jmArrow.js}

@@ -3,13 +3,13 @@ import {jmUtils} from "../core/jmUtils.js";
 /**
  * 画箭头,继承自jmPath
  *
- * @class jmArraw
+ * @class jmArrow
  * @extends jmPath
  * @param {object} 生成箭头所需的参数
  */
-export default class jmArraw extends jmPath {	
+export default class jmArrow extends jmPath {	
 
-	constructor(params, t='jmArraw') {
+	constructor(params, t='jmArrow') {
 		super(params, t);
 		this.style.lineJoin = 'miter';
 		this.style.lineCap = 'square';
@@ -25,7 +25,7 @@ export default class jmArraw extends jmPath {
 	 * 控制起始点
 	 *
 	 * @property start
-	 * @for jmArraw
+	 * @for jmArrow
 	 * @type {point}
 	 */
 	get start() {
@@ -40,7 +40,7 @@ export default class jmArraw extends jmPath {
 	 * 控制结束点
 	 *
 	 * @property end
-	 * @for jmArraw
+	 * @for jmArrow
 	 * @type {point} 结束点
 	 */
 	get end() {
@@ -55,7 +55,7 @@ export default class jmArraw extends jmPath {
 	 * 箭头角度
 	 *
 	 * @property angle
-	 * @for jmArraw
+	 * @for jmArrow
 	 * @type {number} 箭头角度
 	 */
 	get angle() {
@@ -70,7 +70,7 @@ export default class jmArraw extends jmPath {
 	 * 箭头X偏移量
 	 *
 	 * @property offsetX
-	 * @for jmArraw
+	 * @for jmArrow
 	 * @type {number}
 	 */
 	get offsetX() {
@@ -85,7 +85,7 @@ export default class jmArraw extends jmPath {
 	 * 箭头Y偏移量
 	 *
 	 * @property offsetY
-	 * @for jmArraw
+	 * @for jmArrow
 	 * @type {number}
 	 */
 	get offsetY() {
@@ -102,7 +102,7 @@ export default class jmArraw extends jmPath {
 	 * @method initPoint
 	 * @private
 	 * @param {boolean} solid 是否为实心的箭头
-	 * @for jmArraw
+	 * @for jmArrow
 	 */
 	initPoints(solid) {	
 		let rotate = this.angle;
@@ -157,4 +157,4 @@ export default class jmArraw extends jmPath {
 
 }
 
-export { jmArraw };
+export { jmArrow };

package/src/shapes/{jmArrawLine.js → jmArrowLine.js}

@@ -1,22 +1,22 @@
 import {jmLine} from "./jmLine.js";
-import {jmArraw} from "./jmArraw.js";
+import {jmArrow} from "./jmArrow.js";
 /**
  * 带箭头的直线,继承jmPath
  *
- * @class jmArrawLine
+ * @class jmArrowLine
  * @extends jmLine
  * @param {object} params 生成当前直线的参数对象，(style=当前线条样式,start=直线起始点,end=直线终结点)
  */	
-export default class jmArrawLine extends jmLine {	
+export default class jmArrowLine extends jmLine {	
 
 	constructor(params, t) {
 
 		params.start = params.start || {x:0,y:0};
 		params.end = params.end || {x:0,y:0};
 
-		super(params, t||'jmArrawLine');
+		super(params, t||'jmArrowLine');
 		this.style.lineJoin = this.style.lineJoin || 'miter';
-		this.arraw = new jmArraw(params);
+		this.arrow = new jmArrow(params);
 	}
 
 	/**
@@ -27,11 +27,11 @@ export default class jmArrawLine extends jmLine {
 	 */
 	initPoints() {	
 		this.points = super.initPoints();
-		if(this.arrawVisible !== false) {
-			this.points = this.points.concat(this.arraw.initPoints());
+		if(this.arrowVisible !== false) {
+			this.points = this.points.concat(this.arrow.initPoints());
 		}
 		return this.points;
 	}
 }
 
-export { jmArrawLine };
+export { jmArrowLine };

package/src/shapes/jmHArc.js

@@ -12,8 +12,8 @@ export default class jmHArc extends jmArc {
 	constructor(params, t='jmHArc') {
 		super(params, t);
 
-		this.minRadius = params.minRadius || style.minRadius || 0;
-		this.maxRadius = params.maxRadius || style.maxRadius || 0;
+		this.minRadius = params.minRadius || this.style.minRadius || 0;
+		this.maxRadius = params.maxRadius || this.style.maxRadius || 0;
 	}
 
 	/**