guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: resize bug

Browse Source
This commit is contained in:
hufeixiong
2021-07-26 14:05:23 +08:00
parent 7328374b1f
commit 8a178c82f0
8 changed files with 116 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/dooringx-doc/README.md
View File

@@ -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); 用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.

8
packages/dooringx-example/src/plugin/registComponents/button.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-07 14:35:38 * @Date: 2021-07-07 14:35:38
* @LastEditors: yehuozhili * @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 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
*/ */
@@ -125,6 +125,12 @@ const MButton = new ComponentItemFactory(
fontWeight: 'normal', fontWeight: 'normal',
}, },
}, },
width: 100, // 绝对定位元素初始必须有宽高，否则适配会有问题。
height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
rotate: {
canRotate: true,
value: 0,
},
}, },
(data, context, store, config) => { (data, context, store, config) => {
return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>; return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;

4
packages/dooringx-lib/src/components/blocks.tsx
View File

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

4
packages/dooringx-lib/src/core/components/abstract.ts
View File

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

15
packages/dooringx-lib/src/core/markline/calcRender.ts
View File

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

151
packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-22 16:55:10 * @Date: 2021-07-22 16:55:10
* @LastEditors: yehuozhili * @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 * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\calcWithRotate.ts
*/ */
@@ -34,23 +34,27 @@ export function getRect(
item: IBlockType, item: IBlockType,
rotate: number, rotate: number,
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point,
itemWH: {
width: number;
height: number;
}
) { ) {
switch (direction) { switch (direction) {
case 'lt': case 'lt':
calculateTopLeft(item, rotate, curPositon, symmetricPoint); calculateTopLeft(item, rotate, curPositon, symmetricPoint);
break; break;
case 'r': case 'r':
calculateRight(item, rotate, curPositon, symmetricPoint); calculateRight(item, rotate, curPositon, symmetricPoint, itemWH);
break; break;
case 'b': case 'b':
calculateBottom(item, rotate, curPositon, symmetricPoint); calculateBottom(item, rotate, curPositon, symmetricPoint, itemWH);
break; break;
case 'l': case 'l':
calculateLeft(item, rotate, curPositon, symmetricPoint); calculateLeft(item, rotate, curPositon, symmetricPoint, itemWH);
break; break;
case 't': case 't':
calculateTop(item, rotate, curPositon, symmetricPoint); calculateTop(item, rotate, curPositon, symmetricPoint, itemWH);
break; break;
case 'rb': case 'rb':
calculateBottomRight(item, rotate, curPositon, symmetricPoint); calculateBottomRight(item, rotate, curPositon, symmetricPoint);
@@ -72,15 +76,15 @@ function calculateTopLeft(
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point
) { ) {
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint); const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate); const newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
let newBottomRightPoint = calculateRotatedPointCoordinate( const newBottomRightPoint = calculateRotatedPointCoordinate(
symmetricPoint, symmetricPoint,
newCenterPoint, newCenterPoint,
-rotate -rotate
); );
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x; const newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y; const newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
if (newWidth > 0 && newHeight > 0) { if (newWidth > 0 && newHeight > 0) {
item.width = Math.round(newWidth); item.width = Math.round(newWidth);
item.height = Math.round(newHeight); item.height = Math.round(newHeight);
@@ -95,12 +99,16 @@ function calculateTopRight(
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point
) { ) {
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint); const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate); const newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate); const newBottomLeftPoint = calculateRotatedPointCoordinate(
symmetricPoint,
newCenterPoint,
-rotate
);
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x; const newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y; const newHeight = newBottomLeftPoint.y - newTopRightPoint.y;
if (newWidth > 0 && newHeight > 0) { if (newWidth > 0 && newHeight > 0) {
item.width = Math.round(newWidth); item.width = Math.round(newWidth);
@@ -116,12 +124,12 @@ function calculateBottomRight(
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point
) { ) {
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint); const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate); const newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate); const newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
let newWidth = newBottomRightPoint.x - newTopLeftPoint.x; const newWidth = newBottomRightPoint.x - newTopLeftPoint.x;
let newHeight = newBottomRightPoint.y - newTopLeftPoint.y; const newHeight = newBottomRightPoint.y - newTopLeftPoint.y;
if (newWidth > 0 && newHeight > 0) { if (newWidth > 0 && newHeight > 0) {
item.width = Math.round(newWidth); item.width = Math.round(newWidth);
@@ -137,12 +145,12 @@ function calculateBottomLeft(
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point
) { ) {
let newCenterPoint = getCenterPoint(curPositon, symmetricPoint); const newCenterPoint = getCenterPoint(curPositon, symmetricPoint);
let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate); const newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -rotate);
let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate); const newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -rotate);
let newWidth = newTopRightPoint.x - newBottomLeftPoint.x; const newWidth = newTopRightPoint.x - newBottomLeftPoint.x;
let newHeight = newBottomLeftPoint.y - newTopRightPoint.y; const newHeight = newBottomLeftPoint.y - newTopRightPoint.y;
if (newWidth > 0 && newHeight > 0) { if (newWidth > 0 && newHeight > 0) {
item.width = Math.round(newWidth); 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; const curPoint = resizeState.curPosition;
let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
let rotatedTopMiddlePoint = calculateRotatedPointCoordinate( const rotatedTopMiddlePoint = calculateRotatedPointCoordinate(
{ {
x: curPoint.x, x: curPoint.x,
y: rotatedcurPositon.y, y: rotatedcurPositon.y,
@@ -164,23 +181,20 @@ function calculateTop(item: IBlockType, rotate: number, curPositon: Point, symme
rotate rotate
); );
let newHeight = Math.sqrt( const newHeight = Math.sqrt(
(rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 +
(rotatedTopMiddlePoint.y - symmetricPoint.y) ** 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') { const width = typeof item.width === 'number' ? item.width : itemWH.width;
let width = item.width; item.width = width;
item.width = width; item.height = Math.round(newHeight);
item.height = Math.round(newHeight); item.top = Math.round(newCenter.y - newHeight / 2);
item.top = Math.round(newCenter.y - newHeight / 2); item.left = Math.round(newCenter.x - width / 2);
item.left = Math.round(newCenter.x - item.width / 2);
}
} }
} }
@@ -188,7 +202,11 @@ function calculateRight(
item: IBlockType, item: IBlockType,
rotate: number, rotate: number,
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point,
itemWH: {
width: number;
height: number;
}
) { ) {
const curPoint = resizeState.curPosition; const curPoint = resizeState.curPosition;
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
@@ -201,7 +219,7 @@ function calculateRight(
rotate rotate
); );
let newWidth = Math.sqrt( const newWidth = Math.sqrt(
(rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 +
(rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2 (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2
); );
@@ -210,13 +228,11 @@ function calculateRight(
x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2, y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2,
}; };
if (typeof item.height === 'number') { const height = typeof item.height === 'number' ? item.height : itemWH.height;
let height = item.height; item.height = height;
item.height = height; item.width = Math.round(newWidth);
item.width = Math.round(newWidth); item.top = Math.round(newCenter.y - height / 2);
item.top = Math.round(newCenter.y - item.height / 2); item.left = Math.round(newCenter.x - newWidth / 2);
item.left = Math.round(newCenter.x - newWidth / 2);
}
} }
} }
@@ -224,7 +240,11 @@ function calculateBottom(
item: IBlockType, item: IBlockType,
rotate: number, rotate: number,
curPositon: Point, curPositon: Point,
symmetricPoint: Point symmetricPoint: Point,
itemWH: {
width: number;
height: number;
}
) { ) {
const curPoint = resizeState.curPosition; const curPoint = resizeState.curPosition;
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
@@ -246,17 +266,24 @@ function calculateBottom(
x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedBottomMiddlePoint.x - (rotatedBottomMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2, y: rotatedBottomMiddlePoint.y + (symmetricPoint.y - rotatedBottomMiddlePoint.y) / 2,
}; };
if (typeof item.width === 'number') { const width = typeof item.width === 'number' ? item.width : itemWH.width;
let width = item.width; item.width = width;
item.width = width; item.height = Math.round(newHeight);
item.height = Math.round(newHeight); item.top = Math.round(newCenter.y - newHeight / 2);
item.top = Math.round(newCenter.y - newHeight / 2); item.left = Math.round(newCenter.x - width / 2);
item.left = Math.round(newCenter.x - item.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 curPoint = resizeState.curPosition;
const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate);
const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate( const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate(
@@ -277,12 +304,10 @@ function calculateLeft(item: IBlockType, rotate: number, curPositon: Point, symm
x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2, x: rotatedLeftMiddlePoint.x - (rotatedLeftMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2, y: rotatedLeftMiddlePoint.y + (symmetricPoint.y - rotatedLeftMiddlePoint.y) / 2,
}; };
if (typeof item.height === 'number') { const height = typeof item.height === 'number' ? item.height : itemWH.height;
let height = item.height; item.height = height;
item.height = height; item.width = Math.round(newWidth);
item.width = Math.round(newWidth); item.top = Math.round(newCenter.y - height / 2);
item.top = Math.round(newCenter.y - item.height / 2); item.left = Math.round(newCenter.x - newWidth / 2);
item.left = Math.round(newCenter.x - newWidth / 2);
}
} }
} }

17
packages/dooringx-lib/src/core/resizeHandler/index.tsx
View File

@@ -51,15 +51,6 @@ const onMouseDown = (
x: poffsetLeft / scale, x: poffsetLeft / scale,
y: poffsetTop / scale, y: poffsetTop / scale,
}; };
console.log(
curPosition,
'ww',
centerX,
centerY,
resizeState.currentTarget.getBoundingClientRect().top,
containerRect.top
);
resizeState.symmetricPoint = { resizeState.symmetricPoint = {
x: centerX - (curPosition.x - centerX), x: centerX - (curPosition.x - centerX),
y: centerY - (curPosition.y - centerY), y: centerY - (curPosition.y - centerY),
@@ -176,12 +167,18 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
y: (moveY - containerRect.top) / scale, y: (moveY - containerRect.top) / scale,
}; };
const itemRef = resizeState.ref.current.getBoundingClientRect();
const itemWH = {
width: itemRef.width,
height: itemRef.height,
};
const symmetricPoint = resizeState.symmetricPoint; const symmetricPoint = resizeState.symmetricPoint;
const clonedata = deepCopy(store.getData()); const clonedata = deepCopy(store.getData());
const id = resizeState.item.id; const id = resizeState.item.id;
const newblock: IBlockType[] = clonedata.block.map((v: IBlockType) => { const newblock: IBlockType[] = clonedata.block.map((v: IBlockType) => {
if (v.id === id) { if (v.id === id) {
getRect(resizeState.direction, v, rotate, movePoint, symmetricPoint); getRect(resizeState.direction, v, rotate, movePoint, symmetricPoint, itemWH);
} }
return v; return v;
}); });

6
packages/dooringx-lib/src/core/transfer/index.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-04-21 22:59:57 * @Date: 2021-04-21 22:59:57
* @LastEditors: yehuozhili * @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 * @FilePath: \dooringx\packages\dooringx-lib\src\core\transfer\index.ts
*/ */
@@ -22,10 +22,8 @@ export function transfer(
left: number, left: number,
height: string | number | undefined, height: string | number | undefined,
width: string | number | undefined, width: string | number | undefined,
isFixed: boolean, isFixed: boolean
rotate: number
) { ) {
console.log(rotate);
if (isFixed) { if (isFixed) {
// 由于是375x667基准，所以top大于667的，那么top为底部高度 // 由于是375x667基准，所以top大于667的，那么top为底部高度
let newtop = 0; let newtop = 0;