need judge

packages/dooringx-lib/src/components/blocks.tsx

@@ -182,7 +182,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						height: previewState.height,
 						zIndex: props.data.zIndex,
 						display: props.data.display,
-						transform: `rotate(${props.data.rotate}deg)`,
+						transform: `rotate(${props.data.rotate.value}deg)`,
 						...animateCount,
 					}}
 				>

packages/dooringx-lib/src/core/markline/resizeMarkline.ts

@@ -2,11 +2,11 @@
  * @Author: yehuozhili
  * @Date: 2021-02-18 11:52:38
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 20:54:50
+ * @LastEditTime: 2021-07-23 20:37:17
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\resizeMarkline.ts
  */
 
-import { resizeState } from '../resizeHandler';
+import { resizeState } from '../resizeHandler/state';
 import { LinesTypes } from './calcRender';
 import { switchMarklineResizeDisplay } from './normalMode';
 import { marklineConfig } from './marklineConfig';

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

@@ -2,19 +2,14 @@
  * @Author: yehuozhili
  * @Date: 2021-07-22 16:55:10
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-22 20:48:19
+ * @LastEditTime: 2021-07-23 20:43:27
  * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\calcWithRotate.ts
  */
 
-import { DirectionType } from '.';
+import { DirectionType, Point, resizeState } from './state';
 import { IBlockType } from '../store/storetype';
 import { angleToRadian } from '../utils';
 
-interface Point {
-	x: number;
-	y: number;
-}
-
 function getCenterPoint(p1: Point, p2: Point) {
 	return {
 		x: p1.x + (p2.x - p1.x) / 2,
@@ -45,6 +40,27 @@ export function getRect(
 		case 'topleft':
 			calculateTopLeft(item, rotate, curPositon, symmetricPoint);
 			break;
+		case 'right':
+			calculateRight(item, rotate, curPositon, symmetricPoint);
+			break;
+		case 'bottom':
+			calculateBottom(item, rotate, curPositon, symmetricPoint);
+			break;
+		case 'left':
+			calculateLeft(item, rotate, curPositon, symmetricPoint);
+			break;
+		case 'top':
+			calculateTop(item, rotate, curPositon, symmetricPoint);
+			break;
+		case 'bottomright':
+			calculateBottomRight(item, rotate, curPositon, symmetricPoint);
+			break;
+		case 'topright':
+			calculateTopRight(item, rotate, curPositon, symmetricPoint);
+			break;
+		case 'bottomleft':
+			calculateBottomLeft(item, rotate, curPositon, symmetricPoint);
+			break;
 		default:
 			break;
 	}
@@ -63,161 +79,210 @@ function calculateTopLeft(
 		newCenterPoint,
 		-rotate
 	);
-
 	let newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
 	let newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
-	console.log(curPositon, symmetricPoint);
-	console.log(newWidth, newHeight);
 	if (newWidth > 0 && newHeight > 0) {
 		item.width = Math.round(newWidth);
 		item.height = Math.round(newHeight);
 		item.left = Math.round(newTopLeftPoint.x);
 		item.top = Math.round(newTopLeftPoint.y);
 	}
-	console.log(item.width, item.height, item.left, item.top);
 }
 
-// function calculateRightTop(style, curPositon, pointInfo) {
+function calculateTopRight(
-//     const { symmetricPoint } = pointInfo
+	item: IBlockType,
-//     let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+	rotate: number,
-//     let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+	curPositon: Point,
-//     let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+	symmetricPoint: Point
+) {
+	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
+	let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
 
-//     let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+	let newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
-//     let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+	let newHeight = newBottomLeftPoint.y - newTopRightPoint.y;
 
-//     if (newWidth > 0 && newHeight > 0) {
+	if (newWidth > 0 && newHeight > 0) {
-//         style.width = Math.round(newWidth)
+		item.width = Math.round(newWidth);
-//         style.height = Math.round(newHeight)
+		item.height = Math.round(newHeight);
-//         style.left = Math.round(newBottomLeftPoint.x)
+		item.left = Math.round(newBottomLeftPoint.x);
-//         style.top = Math.round(newTopRightPoint.y)
+		item.top = Math.round(newTopRightPoint.y);
-//     }
+	}
-// }
+}
 
-// function calculateRightBottom(style, curPositon, pointInfo) {
+function calculateBottomRight(
-//     const { symmetricPoint } = pointInfo
+	item: IBlockType,
-//     let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+	rotate: number,
-//     let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+	curPositon: Point,
-//     let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+	symmetricPoint: Point
+) {
+	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
+	let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
 
-//     let newWidth = newBottomRightPoint.x - newTopLeftPoint.x
+	let newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
-//     let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
+	let newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
 
-//     if (newWidth > 0 && newHeight > 0) {
+	if (newWidth > 0 && newHeight > 0) {
-//         style.width = Math.round(newWidth)
+		item.width = Math.round(newWidth);
-//         style.height = Math.round(newHeight)
+		item.height = Math.round(newHeight);
-//         style.left = Math.round(newTopLeftPoint.x)
+		item.left = Math.round(newTopLeftPoint.x);
-//         style.top = Math.round(newTopLeftPoint.y)
+		item.top = Math.round(newTopLeftPoint.y);
-//     }
+	}
-// }
+}
 
-// function calculateLeftBottom(style, curPositon, pointInfo) {
+function calculateBottomLeft(
-//     const { symmetricPoint } = pointInfo
+	item: IBlockType,
-//     let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
+	rotate: number,
-//     let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
+	curPositon: Point,
-//     let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)
+	symmetricPoint: Point
+) {
+	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
+	let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
 
-//     let newWidth = newTopRightPoint.x - newBottomLeftPoint.x
+	let newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
-//     let newHeight = newBottomLeftPoint.y - newTopRightPoint.y
+	let newHeight = newBottomLeftPoint.y - newTopRightPoint.y;
 
-//     if (newWidth > 0 && newHeight > 0) {
+	if (newWidth > 0 && newHeight > 0) {
-//         style.width = Math.round(newWidth)
+		item.width = Math.round(newWidth);
-//         style.height = Math.round(newHeight)
+		item.height = Math.round(newHeight);
-//         style.left = Math.round(newBottomLeftPoint.x)
+		item.left = Math.round(newBottomLeftPoint.x);
-//         style.top = Math.round(newTopRightPoint.y)
+		item.top = Math.round(newTopRightPoint.y);
-//     }
+	}
-// }
+}
 
-// function calculateTop(style, curPositon, pointInfo) {
+function calculateTop(item: IBlockType, rotate: number, curPositon: Point, symmetricPoint: Point) {
-//     const { symmetricPoint, curPoint } = pointInfo
+	const curPoint = resizeState.curPosition;
-//     let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+	let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
-//     let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
+	let rotatedTopMiddlePoint = calculateRotatedPointCoordinate(
-//         x: curPoint.x,
+		{
-//         y: rotatedcurPositon.y,
+			x: curPoint.x,
-//     }, curPoint, style.rotate)
+			y: rotatedcurPositon.y,
+		},
+		curPoint,
+		rotate
+	);
 
-//     let newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
+	let newHeight = Math.sqrt(
+		(rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 +
+			(rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2
+	);
 
-//     if (newHeight > 0) {
+	if (newHeight > 0) {
-//         const newCenter = {
+		const newCenter = {
-//             x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
+			x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
-//             y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
+			y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
-//         }
+		};
+		if (typeof item.width === 'number') {
+			let width = item.width;
+			item.width = width;
+			item.height = Math.round(newHeight);
+			item.top = Math.round(newCenter.y - newHeight / 2);
+			item.left = Math.round(newCenter.x - item.width / 2);
+		}
+	}
+}
 
-//         let width = style.width
+function calculateRight(
-//         // 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
+	item: IBlockType,
-//         style.width = width
+	rotate: number,
-//         style.height = Math.round(newHeight)
+	curPositon: Point,
-//         style.top = Math.round(newCenter.y - (newHeight / 2))
+	symmetricPoint: Point
-//         style.left = Math.round(newCenter.x - (style.width / 2))
+) {
-//     }
+	const curPoint = resizeState.curPosition;
-// }
+	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
+	const rotatedRightMiddlePoint = calculateRotatedPointCoordinate(
+		{
+			x: rotatedcurPositon.x,
+			y: curPoint.y,
+		},
+		curPoint,
+		rotate
+	);
 
-// function calculateRight(style, curPositon, pointInfo) {
+	let newWidth = Math.sqrt(
-//     const { symmetricPoint, curPoint } = pointInfo
+		(rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 +
-//     const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+			(rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2
-//     const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({
+	);
-//         x: rotatedcurPositon.x,
+	if (newWidth > 0) {
-//         y: curPoint.y,
+		const newCenter = {
-//     }, curPoint, style.rotate)
+			x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
+			y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
+		};
+		if (typeof item.height === 'number') {
+			let height = item.height;
+			item.height = height;
+			item.width = Math.round(newWidth);
+			item.top = Math.round(newCenter.y - item.height / 2);
+			item.left = Math.round(newCenter.x - newWidth / 2);
+		}
+	}
+}
 
-//     let newWidth = Math.sqrt((rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2)
+function calculateBottom(
-//     if (newWidth > 0) {
+	item: IBlockType,
-//         const newCenter = {
+	rotate: number,
-//             x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
+	curPositon: Point,
-//             y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
+	symmetricPoint: Point
-//         }
+) {
+	const curPoint = resizeState.curPosition;
+	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
+	const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate(
+		{
+			x: curPoint.x,
+			y: rotatedcurPositon.y,
+		},
+		curPoint,
+		rotate
+	);
 
-//         let height = style.height
+	const newHeight = Math.sqrt(
+		(rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 +
+			(rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2
+	);
+	if (newHeight > 0) {
+		const newCenter = {
+			x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
+			y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
+		};
+		if (typeof item.width === 'number') {
+			let width = item.width;
+			item.width = width;
+			item.height = Math.round(newHeight);
+			item.top = Math.round(newCenter.y - newHeight / 2);
+			item.left = Math.round(newCenter.x - item.width / 2);
+		}
+	}
+}
 
-//         style.height = height
+function calculateLeft(item: IBlockType, rotate: number, curPositon: Point, symmetricPoint: Point) {
-//         style.width = Math.round(newWidth)
+	const curPoint = resizeState.curPosition;
-//         style.top = Math.round(newCenter.y - (style.height / 2))
+	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
-//         style.left = Math.round(newCenter.x - (newWidth / 2))
+	const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate(
-//     }
+		{
-// }
+			x: rotatedcurPositon.x,
+			y: curPoint.y,
+		},
+		curPoint,
+		rotate
+	);
 
-// function calculateBottom(style, curPositon, pointInfo) {
+	const newWidth = Math.sqrt(
-//     const { symmetricPoint, curPoint } = pointInfo
+		(rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 +
-//     const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
+			(rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2
-//     const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({
+	);
-//         x: curPoint.x,
+	if (newWidth > 0) {
-//         y: rotatedcurPositon.y,
+		const newCenter = {
-//     }, curPoint, style.rotate)
+			x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
-
+			y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
-//     const newHeight = Math.sqrt((rotatedBottomMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedBottomMiddlePoint.y - symmetricPoint.y) ** 2)
+		};
-//     if (newHeight > 0) {
+		if (typeof item.height === 'number') {
-//         const newCenter = {
+			let height = item.height;
-//             x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
+			item.height = height;
-//             y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
+			item.width = Math.round(newWidth);
-//         }
+			item.top = Math.round(newCenter.y - item.height / 2);
-
+			item.left = Math.round(newCenter.x - newWidth / 2);
-//         let width = style.width
+		}
-//         style.width = width
+	}
-//         style.height = Math.round(newHeight)
+}
-//         style.top = Math.round(newCenter.y - (newHeight / 2))
-//         style.left = Math.round(newCenter.x - (style.width / 2))
-//     }
-// }
-
-// function calculateLeft(style, curPositon, pointInfo) {
-//     const { symmetricPoint, curPoint } = pointInfo
-//     const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
-//     const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate({
-//         x: rotatedcurPositon.x,
-//         y: curPoint.y,
-//     }, curPoint, style.rotate)
-
-//     const newWidth = Math.sqrt((rotatedLeftMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedLeftMiddlePoint.y - symmetricPoint.y) ** 2)
-//     if (newWidth > 0) {
-//         const newCenter = {
-//             x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
-//             y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
-//         }
-//         let height = style.height
-//         style.height = height
-//         style.width = Math.round(newWidth)
-//         style.top = Math.round(newCenter.y - (style.height / 2))
-//         style.left = Math.round(newCenter.x - (newWidth / 2))
-//     }
-// }

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

@@ -6,38 +6,12 @@ import classnames from 'classnames';
 import styles from '../../index.less';
 import UserConfig from '../../config';
 import { getRect } from './calcWithRotate';
+import { DirectionType, resizeState } from './state';
 interface BlockResizerProps {
 	data: IBlockType;
 	rect: RefObject<HTMLDivElement>;
 	config: UserConfig;
 }
-interface resizeStateType {
-	startX: number;
-	startY: number;
-	item: null | IBlockType;
-	isResize: boolean;
-	direction: DirectionType;
-	ref: RefObject<HTMLDivElement> | null;
-	current: number;
-}
-export type DirectionType =
-	| 'top'
-	| 'topleft'
-	| 'topright'
-	| 'left'
-	| 'bottomleft'
-	| 'bottom'
-	| 'bottomright'
-	| 'right';
-export const resizeState: resizeStateType = {
-	startX: 0,
-	startY: 0,
-	item: null,
-	isResize: false,
-	direction: 'bottom',
-	ref: null,
-	current: 0,
-};
 
 const onMouseDown = (
 	e: React.MouseEvent,
@@ -55,6 +29,42 @@ const onMouseDown = (
 	resizeState.direction = direction;
 	resizeState.ref = ref;
 	resizeState.current = store.getIndex();
+	resizeState.currentTarget = e.nativeEvent.target as HTMLDivElement;
+	const curDiv = resizeState.ref.current;
+	let container = document.querySelector('#yh-container');
+	if (!container) {
+		container = document.querySelector('#yh-container-iframe');
+	}
+	if (!container) {
+		return;
+	}
+	if (curDiv && ref.current) {
+		const containerRect = container.getBoundingClientRect();
+		const scale = config.getScaleState().value;
+		const centerX = curDiv.offsetLeft + curDiv.offsetWidth / 2;
+		const centerY = curDiv.offsetTop + curDiv.offsetHeight / 2;
+		const poffsetLeft = resizeState.currentTarget.getBoundingClientRect().left - containerRect.left;
+		const poffsetTop = resizeState.currentTarget.getBoundingClientRect().top - containerRect.top;
+		//点相对于画布位置 未缩放
+		const curPosition = {
+			x: poffsetLeft / scale,
+			y: poffsetTop / scale,
+		};
+
+		console.log(
+			curPosition,
+			'ww',
+			centerX,
+			centerY,
+			resizeState.currentTarget.getBoundingClientRect().top,
+			containerRect.top
+		);
+		resizeState.symmetricPoint = {
+			x: centerX - (curPosition.x - centerX),
+			y: centerY - (curPosition.y - centerY),
+		};
+		resizeState.curPosition = curPosition;
+	}
 };
 
 export const resizerMouseUp = (config: UserConfig) => {
@@ -136,81 +146,42 @@ export const changePosition = (
 	}
 };
 
-// export const getRealStart = (rect: DOMRect): { realStartX: number; realStartY: number } => {
-// 	const direction = resizeState.direction;
-// 	switch (direction) {
-// 		case 'left':
-// 			return {
-// 				realStartX: rect.left,
-// 				realStartY: rect.top + rect.height / 2,
-// 			};
-// 		case 'top':
-// 			return {
-// 				realStartX: rect.left + rect.width / 2,
-// 				realStartY: rect.top,
-// 			};
-// 		case 'right':
-// 			return {
-// 				realStartX: rect.left + rect.width,
-// 				realStartY: rect.top + rect.height / 2,
-// 			};
-// 		case 'bottom':
-// 			return {
-// 				realStartX: rect.left + rect.width / 2,
-// 				realStartY: rect.top + rect.height,
-// 			};
-// 		case 'topleft':
-// 			return {
-// 				realStartX: rect.left,
-// 				realStartY: rect.top,
-// 			};
-// 		case 'topright':
-// 			return {
-// 				realStartX: rect.left + rect.width,
-// 				realStartY: rect.top,
-// 			};
-// 		case 'bottomleft':
-// 			break;
-// 		case 'bottomright':
-// 			break;
-// 		default:
-// 			break;
-// 	}
-// };
-
 export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
 	//根据direction修改位置
 	const scaleState = config.getScaleState();
 	const store = config.getStore();
-	if (resizeState.isResize && resizeState.item && resizeState.ref?.current) {
+	if (
+		resizeState.isResize &&
+		resizeState.item &&
+		resizeState.ref?.current &&
+		resizeState.currentTarget
+	) {
 		let { clientX: moveX, clientY: moveY } = e;
-		const { startX, startY } = resizeState;
 		const scale = scaleState.value;
-		console.log(scale);
+
-		const rect = resizeState.ref.current.getBoundingClientRect();
+		let container = document.querySelector('#yh-container');
-		const centerX = rect.left + rect.width / 2;
+		if (!container) {
-		const centerY = rect.top + rect.height / 2;
+			container = document.querySelector('#yh-container-iframe');
-		// const durX = (moveX - startX) / scale;
+		}
-		// const durY = (moveY - startY) / scale;
+		if (!container) {
-		// rect经过旋转后
+			return;
-		// const { realStartX, realStartY } = getRealStart(rect);
+		}
+		const containerRect = container.getBoundingClientRect();
 
 		const rotate = resizeState.item.rotate.value;
-		const curPositon = {
+
-			x: startX,
+		const movePoint = {
-			y: startY,
+			x: (moveX - containerRect.left) / scale,
-		};
+			y: (moveY - containerRect.top) / scale,
-		const symmetricPoint = {
-			x: centerX - (startX - centerX),
-			y: centerY - (startY - centerY),
 		};
 
-		console.log(centerX, centerY);
+		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) => {
 			if (v.id === id) {
-				getRect(resizeState.direction, v, rotate, curPositon, symmetricPoint);
+				getRect(resizeState.direction, v, rotate, movePoint, symmetricPoint);
 			}
 			return v;
 		});

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

@@ -0,0 +1,55 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-23 20:31:30
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2021-07-23 20:32:23
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\state.ts
+ */
+
+import { RefObject } from 'react';
+import { IBlockType } from '../store/storetype';
+
+export interface Point {
+	x: number;
+	y: number;
+}
+
+interface resizeStateType {
+	startX: number;
+	startY: number;
+	item: null | IBlockType;
+	isResize: boolean;
+	direction: DirectionType;
+	ref: RefObject<HTMLDivElement> | null;
+	current: number;
+	currentTarget: HTMLDivElement | null;
+	symmetricPoint: Point;
+	curPosition: Point;
+}
+export type DirectionType =
+	| 'top'
+	| 'topleft'
+	| 'topright'
+	| 'left'
+	| 'bottomleft'
+	| 'bottom'
+	| 'bottomright'
+	| 'right';
+export const resizeState: resizeStateType = {
+	startX: 0,
+	startY: 0,
+	item: null,
+	isResize: false,
+	direction: 'bottom',
+	ref: null,
+	current: 0,
+	currentTarget: null,
+	symmetricPoint: {
+		x: 0,
+		y: 0,
+	},
+	curPosition: {
+		x: 0,
+		y: 0,
+	},
+};