diff --git a/packages/dooringx-doc/README.md b/packages/dooringx-doc/README.md
index 82510ca..8710f91 100644
--- 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制作。
\ No newline at end of file
diff --git a/packages/dooringx-example/src/plugin/registComponents/button.tsx b/packages/dooringx-example/src/plugin/registComponents/button.tsx
index 6d44a64..19853a9 100644
--- 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 ;
diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx
index fae0302..5a8beed 100644
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -73,8 +73,7 @@ function Blocks(props: PropsWithChildren) {
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) {
props.data.top,
props.data.width,
props.data.fixed,
- props.data.rotate,
]);
const animatecss = useMemo(() => {
diff --git a/packages/dooringx-lib/src/core/components/abstract.ts b/packages/dooringx-lib/src/core/components/abstract.ts
index 26ba323..b95d40c 100644
--- 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';
diff --git a/packages/dooringx-lib/src/core/markline/calcRender.ts b/packages/dooringx-lib/src/core/markline/calcRender.ts
index b6fc550..c0a6ac4 100644
--- 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);
diff --git a/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts b/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts
index c3e5abc..ba31820 100644
--- 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;
- 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);
- }
+ 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 - 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,13 +228,11 @@ 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;
- 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);
- }
+ const height = typeof item.height === 'number' ? item.height : itemWH.height;
+ item.height = height;
+ item.width = Math.round(newWidth);
+ item.top = Math.round(newCenter.y - height / 2);
+ item.left = Math.round(newCenter.x - newWidth / 2);
}
}
@@ -224,7 +240,11 @@ 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;
- 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);
- }
+ 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 - 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;
- 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);
- }
+ const height = typeof item.height === 'number' ? item.height : itemWH.height;
+ item.height = height;
+ item.width = Math.round(newWidth);
+ item.top = Math.round(newCenter.y - height / 2);
+ item.left = Math.round(newCenter.x - newWidth / 2);
}
}
diff --git a/packages/dooringx-lib/src/core/resizeHandler/index.tsx b/packages/dooringx-lib/src/core/resizeHandler/index.tsx
index aecaf79..a94eb1b 100644
--- 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;
});
diff --git a/packages/dooringx-lib/src/core/transfer/index.ts b/packages/dooringx-lib/src/core/transfer/index.ts
index 879cadc..e30da81 100644
--- 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;