jmgraph 3.2.7 → 3.2.9

package/src/shapes/jmResize.js

@@ -20,6 +20,9 @@ export default class jmResize extends jmRect {
 		this.rectSize = params.rectSize || 8;
 		this.style.close = this.style.close || true;
 
+		// 方块鼠标指针方向
+		this.rectCursors = ['w-resize','nw-resize','n-resize','ne-resize','e-resize','se-resize','s-resize','sw-resize'];
+
 		this.init(params);
 	}
 	/**
@@ -67,9 +70,9 @@ export default class jmResize extends jmRect {
 		rectStyle.close = true;
 		rectStyle.fill = rectStyle.fill || 'transparent';
 		
-		for(let i = 0;i<8;i++) {
+		for(let i = 0; i<8; i++) {
 			//生成改变大小方块
-			let r = (this.graph || params.graph).createShape(jmRect,{
+			const r = (this.graph || params.graph).createShape(jmRect,{
 					position:{x:0,y:0},
 					width: rs,
 					height: rs,
@@ -95,9 +98,9 @@ export default class jmResize extends jmRect {
 	 */
 	bindRectEvents() {		
 		for(let i =0; i<this.resizeRects.length; i++) {
-			let r = this.resizeRects[i];		
+			const r = this.resizeRects[i];		
 			//小方块移动监听
-			r.on('move',function(arg) {				
+			r.on('move',function(arg) {					
 				let px=0, py=0, dx=0, dy=0;
 				if(this.index == 0) {				
 					dx = - arg.offsetX;
@@ -135,15 +138,66 @@ export default class jmResize extends jmRect {
 					dy = arg.offsetY;				
 				}
 				//重新定位
-				this.parent.reset(px,py,dx,dy);
+				this.parent.reset(px, py, dx, dy);
 				this.needUpdate = true;
 			});
 			//鼠标指针
-			r.bind('mousemove',function() {	
-				let rectCursors = ['w-resize','nw-resize','n-resize','ne-resize','e-resize','se-resize','s-resize','sw-resize'];		
-				this.cursor = rectCursors[this.index];
+			r.bind('mousemove', function() {	
+				// 如果有旋转方位，则重新定义小块的作用
+				const rotation = this.parent.getRotation();	
+				let cursor = this.parent.rectCursors[this.index];
+
+				// 旋转一定角度后的位置
+				const position = rotation && rotation.angle? this.graph.utils.rotatePoints(this.graph.utils.clone(this.position), rotation, rotation.angle): this.position;
+				const center = {
+					x: this.parent.width / 2,
+					y: this.parent.height / 2
+				};
+
+				this.rotationAngleByCenter = Math.atan((position.y - center.y) / (position.x - center.x));// 与中心连线和x轴的夹角
+				// 把90度分割成三个区域，不同的指针
+				const angleSplit1 = Math.atan(center.y / center.x) / 2;
+				const angleSplit2 = angleSplit1 * 2 + Math.PI / 4;
+
+				// 如果在左边，
+				if(position.x < center.x) {
+					if(this.rotationAngleByCenter >= -angleSplit1 && this.rotationAngleByCenter <= angleSplit1) {
+						cursor = this.parent.rectCursors[0];
+					}
+					else if(this.rotationAngleByCenter > angleSplit1 && this.rotationAngleByCenter < angleSplit2) {
+						cursor = this.parent.rectCursors[1];
+					}
+					else if(this.rotationAngleByCenter >= angleSplit2) {
+						cursor = this.parent.rectCursors[2];
+					}
+					else if(this.rotationAngleByCenter <= -angleSplit1 && this.rotationAngleByCenter > -angleSplit2) {
+						cursor = this.parent.rectCursors[7];
+					}
+					else if(this.rotationAngleByCenter <= -angleSplit2) {
+						cursor = this.parent.rectCursors[6];
+					}
+				}
+				else {
+					if(this.rotationAngleByCenter >= -angleSplit1 && this.rotationAngleByCenter <= angleSplit1) {
+						cursor = this.parent.rectCursors[4];
+					}
+					else if(this.rotationAngleByCenter > angleSplit1 && this.rotationAngleByCenter < angleSplit2) {
+						cursor = this.parent.rectCursors[5];
+					}
+					else if(this.rotationAngleByCenter >= angleSplit2) {
+						cursor = this.parent.rectCursors[6];
+					}
+					else if(this.rotationAngleByCenter <= -angleSplit1 && this.rotationAngleByCenter > -angleSplit2) {
+						cursor = this.parent.rectCursors[3];
+					}
+					else if(this.rotationAngleByCenter <= -angleSplit2) {
+						cursor = this.parent.rectCursors[2];
+					}
+				}
+						
+				this.cursor = cursor;
 			});
-			r.bind('mouseleave',function() {
+			r.bind('mouseleave', function() {
 				this.cursor = 'default';
 			});
 		}
@@ -192,13 +246,13 @@ export default class jmResize extends jmRect {
 	 * @param {number} dy 大小y轴偏移
 	 */
 	reset(px, py, dx, dy) {
-		let minWidth = typeof this.style.minWidth=='undefined'?5:this.style.minWidth;
-		let minHeight = typeof this.style.minHeight=='undefined'?5:this.style.minHeight;
+		const minWidth = typeof this.style.minWidth=='undefined'?5:this.style.minWidth;
+		const minHeight = typeof this.style.minHeight=='undefined'?5:this.style.minHeight;
 
-		let location = this.getLocation();
+		const location = this.getLocation();
 		if(dx != 0 || dy != 0) {
-			let w = location.width + dx;
-			let h = location.height + dy;
+			const w = location.width + dx;
+			const h = location.height + dy;
 			if(w >= minWidth || h >= minHeight) {
 				if(w >= minWidth) {
 					this.width = w;
@@ -216,7 +270,7 @@ export default class jmResize extends jmRect {
 				}
 				//如果当前控件能移动才能改变其位置
 				if(this.movable !== false && (px||py)) {
-					let p = this.position;
+					const p = this.position;
 					p.x = location.left + px;
 					p.y = location.top + py;
 					this.position = p;
@@ -227,7 +281,7 @@ export default class jmResize extends jmRect {
 		}
 
 		for(let i in this.resizeRects) {
-			let r = this.resizeRects[i];
+			const r = this.resizeRects[i];
 			switch(r.index) {
 				case 0: {
 					r.position.x = -r.width / 2;