fix: resize bug

2021-07-26 14:05:23 +08:00
parent 7328374b1f
commit 8a178c82f0
8 changed files with 116 additions and 128 deletions
--- a/packages/dooringx-doc/README.md
+++ b/packages/dooringx-doc/README.md
@@ -1,38 +1,3 @@
-# create-svelte
+# dooringx-lib文档

-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm init svelte@next
-
-# create a new project in my-app
-npm init svelte@next my-app
-```
-
-> Note: the `@next` is temporary
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
-
-```bash
-npm run build
-```
-
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+用svelte制作。
--- a/packages/dooringx-example/src/plugin/registComponents/button.tsx
+++ b/packages/dooringx-example/src/plugin/registComponents/button.tsx
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-07-07 14:35:38
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-10 23:04:56
+ * @LastEditTime: 2021-07-26 14:03:01
 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
 */

@@ -125,6 +125,12 @@ const MButton = new ComponentItemFactory(
 				fontWeight: 'normal',
 			},
 		},
+		width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		rotate: {
+			canRotate: true,
+			value: 0,
+		},
 	},
 	(data, context, store, config) => {
 		return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -73,8 +73,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 				props.data.left,
 				props.data.height,
 				props.data.width,
-				props.data.fixed,
-				props.data.rotate.value
+				props.data.fixed
 			);

 			setPreviewState({ top, left, width, height });
@@ -94,7 +93,6 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 		props.data.top,
 		props.data.width,
 		props.data.fixed,
-		props.data.rotate,
 	]);

 	const animatecss = useMemo(() => {
--- a/packages/dooringx-lib/src/core/components/abstract.ts
+++ b/packages/dooringx-lib/src/core/components/abstract.ts
@@ -2,8 +2,8 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-04-04 23:14:00
- * @FilePath: \dooringv2\src\core\components\abstract.ts
+ * @LastEditTime: 2021-07-26 12:06:00
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\abstract.ts
 */
 import { ComponentItem } from './componentItem';

--- a/packages/dooringx-lib/src/core/markline/calcRender.ts
+++ b/packages/dooringx-lib/src/core/markline/calcRender.ts
@@ -2,11 +2,10 @@
 * @Author: yehuozhili
 * @Date: 2021-03-14 04:29:09
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 20:56:02
+ * @LastEditTime: 2021-07-26 11:38:11
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\markline\calcRender.ts
 */
 import { innerDragState } from '../innerDrag/state';
-import { grideModeRender, gridModeDisplay } from './gridMode';
 import { switchMarklineDisplay } from './normalMode';
 import { resizeCurrentCalculate } from './resizeMarkline';
 import { marklineConfig } from './marklineConfig';
@@ -65,14 +64,14 @@ export function marklineCalRender(config: UserConfig) {
 				}
 			}
 		});
-		if (marklineConfig.mode === 'grid' && marklineConfig.isAbsorb) {
-			gridModeDisplay(left, top, focus, config);
-		}
+		// if (marklineConfig.mode === 'grid' && marklineConfig.isAbsorb) {
+		// 	gridModeDisplay(left, top, focus, config);该模式暂废弃
+		// }
 	}

-	if (marklineConfig.mode === 'grid') {
-		grideModeRender(lines, config);
-	}
+	// if (marklineConfig.mode === 'grid') {
+	// 	grideModeRender(lines, config);该模式暂废弃
+	// }

 	resizeCurrentCalculate(lines, config);

--- a/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts
+++ b/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-26 11:10:48
+ * @LastEditTime: 2021-07-26 14:01:14
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\calcWithRotate.ts
 */

@@ -34,23 +34,27 @@ export function getRect(
 	item: IBlockType,
 	rotate: number,
 	curPositon: Point,
-	symmetricPoint: Point
+	symmetricPoint: Point,
+	itemWH: {
+		width: number;
+		height: number;
+	}
 ) {
 	switch (direction) {
 		case 'lt':
 			calculateTopLeft(item, rotate, curPositon, symmetricPoint);
 			break;
 		case 'r':
-			calculateRight(item, rotate, curPositon, symmetricPoint);
+			calculateRight(item, rotate, curPositon, symmetricPoint, itemWH);
 			break;
 		case 'b':
-			calculateBottom(item, rotate, curPositon, symmetricPoint);
+			calculateBottom(item, rotate, curPositon, symmetricPoint, itemWH);
 			break;
 		case 'l':
-			calculateLeft(item, rotate, curPositon, symmetricPoint);
+			calculateLeft(item, rotate, curPositon, symmetricPoint, itemWH);
 			break;
 		case 't':
-			calculateTop(item, rotate, curPositon, symmetricPoint);
+			calculateTop(item, rotate, curPositon, symmetricPoint, itemWH);
 			break;
 		case 'rb':
 			calculateBottomRight(item, rotate, curPositon, symmetricPoint);
@@ -72,15 +76,15 @@ function calculateTopLeft(
 	curPositon: Point,
 	symmetricPoint: Point
 ) {
-	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
-	let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
-	let newBottomRightPoint = calculateRotatedPointCoordinate(
+	const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	const newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
+	const newBottomRightPoint = calculateRotatedPointCoordinate(
 		symmetricPoint,
 		newCenterPoint,
 		-rotate
 	);
-	let newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
-	let newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
+	const newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
+	const newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
 	if (newWidth > 0 && newHeight > 0) {
 		item.width = Math.round(newWidth);
 		item.height = Math.round(newHeight);
@@ -95,12 +99,16 @@ function calculateTopRight(
 	curPositon: Point,
 	symmetricPoint: Point
 ) {
-	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
-	let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
-	let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
+	const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	const newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
+	const newBottomLeftPoint = calculateRotatedPointCoordinate(
+		symmetricPoint,
+		newCenterPoint,
+		-rotate
+	);

-	let newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
-	let newHeight = newBottomLeftPoint.y - newTopRightPoint.y;
+	const newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
+	const newHeight = newBottomLeftPoint.y - newTopRightPoint.y;

 	if (newWidth > 0 && newHeight > 0) {
 		item.width = Math.round(newWidth);
@@ -116,12 +124,12 @@ function calculateBottomRight(
 	curPositon: Point,
 	symmetricPoint: Point
 ) {
-	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
-	let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
-	let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
+	const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	const newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
+	const newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);

-	let newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
-	let newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
+	const newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
+	const newHeight = newBottomRightPoint.y - newTopLeftPoint.y;

 	if (newWidth > 0 && newHeight > 0) {
 		item.width = Math.round(newWidth);
@@ -137,12 +145,12 @@ function calculateBottomLeft(
 	curPositon: Point,
 	symmetricPoint: Point
 ) {
-	let newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
-	let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
-	let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
+	const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
+	const newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
+	const newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);

-	let newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
-	let newHeight = newBottomLeftPoint.y - newTopRightPoint.y;
+	const newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
+	const newHeight = newBottomLeftPoint.y - newTopRightPoint.y;

 	if (newWidth > 0 && newHeight > 0) {
 		item.width = Math.round(newWidth);
@@ -152,10 +160,19 @@ function calculateBottomLeft(
 	}
 }

-function calculateTop(item: IBlockType, rotate: number, curPositon: Point, symmetricPoint: Point) {
+function calculateTop(
+	item: IBlockType,
+	rotate: number,
+	curPositon: Point,
+	symmetricPoint: Point,
+	itemWH: {
+		width: number;
+		height: number;
+	}
+) {
 	const curPoint = resizeState.curPosition;
-	let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
-	let rotatedTopMiddlePoint = calculateRotatedPointCoordinate(
+	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
+	const rotatedTopMiddlePoint = calculateRotatedPointCoordinate(
 		{
 			x: curPoint.x,
 			y: rotatedcurPositon.y,
@@ -164,23 +181,20 @@ function calculateTop(item: IBlockType, rotate: number, curPositon: Point, symme
 		rotate
 	);

-	let newHeight = Math.sqrt(
+	const newHeight = Math.sqrt(
 		(rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 +
 			(rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2
 	);
-
 	if (newHeight > 0) {
 		const newCenter = {
 			x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
 			y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
 		};
-		if (typeof item.width === 'number') {
-			let width = item.width;
+		const width = typeof item.width === 'number' ? item.width : itemWH.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);
-		}
+		item.left = Math.round(newCenter.x - width / 2);
 	}
 }

@@ -188,7 +202,11 @@ function calculateRight(
 	item: IBlockType,
 	rotate: number,
 	curPositon: Point,
-	symmetricPoint: Point
+	symmetricPoint: Point,
+	itemWH: {
+		width: number;
+		height: number;
+	}
 ) {
 	const curPoint = resizeState.curPosition;
 	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
@@ -201,7 +219,7 @@ function calculateRight(
 		rotate
 	);

-	let newWidth = Math.sqrt(
+	const newWidth = Math.sqrt(
 		(rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 +
 			(rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2
 	);
@@ -210,21 +228,23 @@ function calculateRight(
 			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;
+		const height = typeof item.height === 'number' ? item.height : itemWH.height;
 		item.height = height;
 		item.width = Math.round(newWidth);
-			item.top = Math.round(newCenter.y - item.height / 2);
+		item.top = Math.round(newCenter.y - height / 2);
 		item.left = Math.round(newCenter.x - newWidth / 2);
 	}
-	}
 }

 function calculateBottom(
 	item: IBlockType,
 	rotate: number,
 	curPositon: Point,
-	symmetricPoint: Point
+	symmetricPoint: Point,
+	itemWH: {
+		width: number;
+		height: number;
+	}
 ) {
 	const curPoint = resizeState.curPosition;
 	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
@@ -246,17 +266,24 @@ function calculateBottom(
 			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;
+		const width = typeof item.width === 'number' ? item.width : itemWH.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);
-		}
+		item.left = Math.round(newCenter.x - width / 2);
 	}
 }

-function calculateLeft(item: IBlockType, rotate: number, curPositon: Point, symmetricPoint: Point) {
+function calculateLeft(
+	item: IBlockType,
+	rotate: number,
+	curPositon: Point,
+	symmetricPoint: Point,
+	itemWH: {
+		width: number;
+		height: number;
+	}
+) {
 	const curPoint = resizeState.curPosition;
 	const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
 	const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate(
@@ -277,12 +304,10 @@ function calculateLeft(item: IBlockType, rotate: number, curPositon: Point, symm
 			x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
 			y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
 		};
-		if (typeof item.height === 'number') {
-			let height = item.height;
+		const height = typeof item.height === 'number' ? item.height : itemWH.height;
 		item.height = height;
 		item.width = Math.round(newWidth);
-			item.top = Math.round(newCenter.y - item.height / 2);
+		item.top = Math.round(newCenter.y - height / 2);
 		item.left = Math.round(newCenter.x - newWidth / 2);
 	}
-	}
 }
--- a/packages/dooringx-lib/src/core/resizeHandler/index.tsx
+++ b/packages/dooringx-lib/src/core/resizeHandler/index.tsx
@@ -51,15 +51,6 @@ const onMouseDown = (
 			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),
@@ -176,12 +167,18 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
 			y: (moveY - containerRect.top) / scale,
 		};

+		const itemRef = resizeState.ref.current.getBoundingClientRect();
+		const itemWH = {
+			width: itemRef.width,
+			height: itemRef.height,
+		};
+
 		const symmetricPoint = resizeState.symmetricPoint;
 		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, movePoint, symmetricPoint);
+				getRect(resizeState.direction, v, rotate, movePoint, symmetricPoint, itemWH);
 			}
 			return v;
 		});
--- a/packages/dooringx-lib/src/core/transfer/index.ts
+++ b/packages/dooringx-lib/src/core/transfer/index.ts
@@ -2,7 +2,7 @@
 * @Author: yehuozhili
 * @Date: 2021-04-21 22:59:57
 * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-21 14:33:57
+ * @LastEditTime: 2021-07-26 11:47:19
 * @FilePath: \dooringx\packages\dooringx-lib\src\core\transfer\index.ts
 */

@@ -22,10 +22,8 @@ export function transfer(
 	left: number,
 	height: string | number | undefined,
 	width: string | number | undefined,
-	isFixed: boolean,
-	rotate: number
+	isFixed: boolean
 ) {
-	console.log(rotate);
 	if (isFixed) {
 		// 由于是375x667基准，所以top大于667的，那么top为底部高度
 		let newtop = 0;