complete cursor

packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-22 16:55:10
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-23 20:43:27
+ * @LastEditTime: 2021-07-26 11:10:48
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\calcWithRotate.ts
  */
 
@@ -37,28 +37,28 @@ export function getRect(
 	symmetricPoint: Point
 ) {
 	switch (direction) {
-		case 'topleft':
+		case 'lt':
 			calculateTopLeft(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'right':
+		case 'r':
 			calculateRight(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'bottom':
+		case 'b':
 			calculateBottom(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'left':
+		case 'l':
 			calculateLeft(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'top':
+		case 't':
 			calculateTop(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'bottomright':
+		case 'rb':
 			calculateBottomRight(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'topright':
+		case 'rt':
 			calculateTopRight(item, rotate, curPositon, symmetricPoint);
 			break;
-		case 'bottomleft':
+		case 'lb':
 			calculateBottomLeft(item, rotate, curPositon, symmetricPoint);
 			break;
 		default:

packages/dooringx-lib/src/core/resizeHandler/cursor.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-26 10:55:23
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-26 11:12:23
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\cursor.ts
+ */
+
+import { directionArr } from './state';
+
+const initialAngle: Record<string, number> = {
+	lt: 0,
+	t: 45,
+	rt: 90,
+	r: 135,
+	rb: 180,
+	b: 225,
+	lb: 270,
+	l: 315,
+};
+
+const angleToCursor = [
+	{ start: 338, end: 23, cursor: 'nw' },
+	{ start: 23, end: 68, cursor: 'n' },
+	{ start: 68, end: 113, cursor: 'ne' },
+	{ start: 113, end: 158, cursor: 'e' },
+	{ start: 158, end: 203, cursor: 'se' },
+	{ start: 203, end: 248, cursor: 's' },
+	{ start: 248, end: 293, cursor: 'sw' },
+	{ start: 293, end: 338, cursor: 'w' },
+];
+
+function mod360(deg: number) {
+	return (deg + 360) % 360;
+}
+
+export function getCursor(curRotate: number) {
+	const rotate = mod360(curRotate);
+	const result: Record<string, string> = {};
+	let lastMatchIndex = -1;
+	directionArr.forEach((point) => {
+		const angle = mod360(initialAngle[point] + rotate);
+		const len = angleToCursor.length;
+		while (true) {
+			lastMatchIndex = (lastMatchIndex + 1) % len;
+			const angleLimit = angleToCursor[lastMatchIndex];
+			if (angle < 23 || angle >= 338) {
+				result[point] = 'nw-resize';
+				return;
+			}
+			if (angleLimit.start <= angle && angle < angleLimit.end) {
+				result[point] = angleLimit.cursor + '-resize';
+				return;
+			}
+		}
+	});
+
+	return result;
+}

packages/dooringx-lib/src/core/resizeHandler/index.tsx

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 import styles from '../../index.less';
 import UserConfig from '../../config';
 import { getRect } from './calcWithRotate';
-import { DirectionType, resizeState } from './state';
+import { directionArr, DirectionType, resizeState } from './state';
+import { getCursor } from './cursor';
 interface BlockResizerProps {
 	data: IBlockType;
 	rect: RefObject<HTMLDivElement>;
@@ -107,36 +108,36 @@ export const changePosition = (
 	let tmpy = height / scale - durY;
 	let tmpx = width / scale - durX;
 	switch (direction) {
-		case 'right':
+		case 'r':
 			v.width = width / scale + durX;
 			break;
-		case 'bottom':
+		case 'b':
 			v.height = height / scale + durY;
 			break;
-		case 'left':
+		case 'l':
 			v.left = width / scale > 0 ? v.left + durX : v.left;
 			v.width = tmpx > 0 ? tmpx : 0;
 			break;
-		case 'top':
+		case 't':
 			v.top = height / scale > 0 ? v.top + durY : v.top;
 			v.height = tmpy > 0 ? tmpy : 0;
 			break;
-		case 'bottomright':
+		case 'rb':
 			v.width = width / scale + durX;
 			v.height = height / scale + durY;
 			break;
-		case 'topright':
+		case 'rt':
 			v.width = width / scale + durX;
 			v.top = height / scale > 0 ? v.top + durY : v.top;
 			v.height = tmpy > 0 ? tmpy : 0;
 			break;
-		case 'topleft':
+		case 'lt':
 			v.top = height / scale > 0 ? v.top + durY : v.top;
 			v.height = tmpy > 0 ? tmpy : 0;
 			v.left = width / scale > 0 ? v.left + durX : v.left;
 			v.width = tmpx > 0 ? tmpx : 0;
 			break;
-		case 'bottomleft':
+		case 'lb':
 			v.left = width / scale > 0 ? v.left + durX : v.left;
 			v.width = tmpx > 0 ? tmpx : 0;
 			v.height = height / scale + durY;
@@ -176,7 +177,6 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
 		};
 
 		const symmetricPoint = resizeState.symmetricPoint;
-		console.log(symmetricPoint, 'cc');
 		const clonedata = deepCopy(store.getData());
 		const id = resizeState.item.id;
 		const newblock: IBlockType[] = clonedata.block.map((v: IBlockType) => {
@@ -190,19 +190,9 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
 		store.setData({ ...clonedata, block: newblock });
 	}
 };
-
-const directionArr: DirectionType[] = [
-	'top',
-	'topleft',
-	'left',
-	'topright',
-	'bottomleft',
-	'bottom',
-	'right',
-	'bottomright',
-];
-
 export function BlockResizer(props: BlockResizerProps) {
+	const rotate = props.data.rotate.value;
+	const cursorMap = getCursor(rotate);
 	const render = useMemo(() => {
 		if (props.data.focus && props.data.resize) {
 			return (
@@ -210,6 +200,9 @@ export function BlockResizer(props: BlockResizerProps) {
 					{directionArr.map((v) => {
 						return (
 							<div
+								style={{
+									cursor: cursorMap[v],
+								}}
 								key={v}
 								className={classnames(styles.resizepoint, styles[v])}
 								onMouseDown={(e) => {
@@ -226,7 +219,7 @@ export function BlockResizer(props: BlockResizerProps) {
 		} else {
 			return null;
 		}
-	}, [props.config, props.data, props.rect]);
+	}, [cursorMap, props.config, props.data, props.rect]);
 
 	return <>{render}</>;
 }

packages/dooringx-lib/src/core/resizeHandler/state.ts

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-23 20:31:30
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-23 20:32:23
+ * @LastEditTime: 2021-07-26 11:12:02
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\state.ts
  */
 
@@ -26,21 +26,15 @@ interface resizeStateType {
 	symmetricPoint: Point;
 	curPosition: Point;
 }
-export type DirectionType =
+export type DirectionType = 'lt' | 't' | 'rt' | 'r' | 'rb' | 'b' | 'lb' | 'l';
-	| 'top'
+export const directionArr: DirectionType[] = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'];
-	| 'topleft'
+
-	| 'topright'
-	| 'left'
-	| 'bottomleft'
-	| 'bottom'
-	| 'bottomright'
-	| 'right';
 export const resizeState: resizeStateType = {
 	startX: 0,
 	startY: 0,
 	item: null,
 	isResize: false,
-	direction: 'bottom',
+	direction: 'b',
 	ref: null,
 	current: 0,
 	currentTarget: null,

packages/dooringx-lib/src/index.less

@@ -90,7 +90,7 @@
 	cursor: pointer;
 	border-radius: 50%;
 
-	&.left {
+	&.l {
 		left: -6px;
 		top: calc(50% - 3px);
 
@@ -99,7 +99,7 @@
 		}
 	}
 
-	&.right {
+	&.r {
 		right: -6px;
 		top: calc(50% - 3px);
 
@@ -108,7 +108,7 @@
 		}
 	}
 
-	&.top {
+	&.t {
 		top: -6px;
 		left: calc(50% - 3px);
 
@@ -117,7 +117,7 @@
 		}
 	}
 
-	&.bottom {
+	&.b {
 		bottom: -6px;
 		left: calc(50% - 3px);
 
@@ -126,7 +126,7 @@
 		}
 	}
 
-	&.topleft {
+	&.lt {
 		top: -6px;
 		left: -6px;
 
@@ -135,7 +135,7 @@
 		}
 	}
 
-	&.bottomleft {
+	&.lb {
 		bottom: -6px;
 		left: -6px;
 
@@ -144,7 +144,7 @@
 		}
 	}
 
-	&.bottomright {
+	&.rb {
 		bottom: -6px;
 		right: -6px;
 
@@ -153,7 +153,7 @@
 		}
 	}
 
-	&.topright {
+	&.rt {
 		top: -6px;
 		right: -6px;