diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx index 810b6a4..fae0302 100644 --- a/packages/dooringx-lib/src/components/blocks.tsx +++ b/packages/dooringx-lib/src/components/blocks.tsx @@ -182,7 +182,7 @@ function Blocks(props: PropsWithChildren) { 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, }} > diff --git a/packages/dooringx-lib/src/core/markline/resizeMarkline.ts b/packages/dooringx-lib/src/core/markline/resizeMarkline.ts index 61b4631..e5d25d9 100644 --- a/packages/dooringx-lib/src/core/markline/resizeMarkline.ts +++ b/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'; diff --git a/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts b/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts index 8b07d00..2b16535 100644 --- a/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts +++ b/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) { -// const { symmetricPoint } = pointInfo -// let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) -// let newTopRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) -// let newBottomLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) +function calculateTopRight( + item: IBlockType, + rotate: number, + curPositon: Point, + 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 newHeight = newBottomLeftPoint.y - newTopRightPoint.y + let newWidth = newTopRightPoint.x - newBottomLeftPoint.x; + let newHeight = newBottomLeftPoint.y - newTopRightPoint.y; -// if (newWidth > 0 && newHeight > 0) { -// style.width = Math.round(newWidth) -// style.height = Math.round(newHeight) -// style.left = Math.round(newBottomLeftPoint.x) -// style.top = Math.round(newTopRightPoint.y) -// } -// } + if (newWidth > 0 && newHeight > 0) { + item.width = Math.round(newWidth); + item.height = Math.round(newHeight); + item.left = Math.round(newBottomLeftPoint.x); + item.top = Math.round(newTopRightPoint.y); + } +} -// function calculateRightBottom(style, curPositon, pointInfo) { -// const { symmetricPoint } = pointInfo -// let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) -// let newTopLeftPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) -// let newBottomRightPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) +function calculateBottomRight( + item: IBlockType, + rotate: number, + curPositon: Point, + 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 newHeight = newBottomRightPoint.y - newTopLeftPoint.y + let newWidth = newBottomRightPoint.x - newTopLeftPoint.x; + let newHeight = newBottomRightPoint.y - newTopLeftPoint.y; -// if (newWidth > 0 && newHeight > 0) { -// style.width = Math.round(newWidth) -// style.height = Math.round(newHeight) -// style.left = Math.round(newTopLeftPoint.x) -// style.top = Math.round(newTopLeftPoint.y) -// } -// } + 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); + } +} -// function calculateLeftBottom(style, curPositon, pointInfo) { -// const { symmetricPoint } = pointInfo -// let newCenterPoint = getCenterPoint(curPositon, symmetricPoint) -// let newTopRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate) -// let newBottomLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate) +function calculateBottomLeft( + item: IBlockType, + rotate: number, + curPositon: Point, + 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 newHeight = newBottomLeftPoint.y - newTopRightPoint.y + let newWidth = newTopRightPoint.x - newBottomLeftPoint.x; + let newHeight = newBottomLeftPoint.y - newTopRightPoint.y; -// if (newWidth > 0 && newHeight > 0) { -// style.width = Math.round(newWidth) -// style.height = Math.round(newHeight) -// style.left = Math.round(newBottomLeftPoint.x) -// style.top = Math.round(newTopRightPoint.y) -// } -// } + if (newWidth > 0 && newHeight > 0) { + item.width = Math.round(newWidth); + item.height = Math.round(newHeight); + item.left = Math.round(newBottomLeftPoint.x); + item.top = Math.round(newTopRightPoint.y); + } +} -// function calculateTop(style, curPositon, pointInfo) { -// const { symmetricPoint, curPoint } = pointInfo -// let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) -// let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({ -// x: curPoint.x, -// y: rotatedcurPositon.y, -// }, curPoint, style.rotate) +function calculateTop(item: IBlockType, rotate: number, curPositon: Point, symmetricPoint: Point) { + const curPoint = resizeState.curPosition; + let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); + let rotatedTopMiddlePoint = calculateRotatedPointCoordinate( + { + x: curPoint.x, + 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) { -// const newCenter = { -// x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2, -// y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.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); + } + } +} -// 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 calculateRight( + item: IBlockType, + rotate: number, + curPositon: Point, + symmetricPoint: Point +) { + 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) { -// const { symmetricPoint, curPoint } = pointInfo -// const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) -// const rotatedRightMiddlePoint = calculateRotatedPointCoordinate({ -// x: rotatedcurPositon.x, -// y: curPoint.y, -// }, curPoint, style.rotate) + let newWidth = Math.sqrt( + (rotatedRightMiddlePoint.x - symmetricPoint.x) ** 2 + + (rotatedRightMiddlePoint.y - symmetricPoint.y) ** 2 + ); + if (newWidth > 0) { + const newCenter = { + 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) -// if (newWidth > 0) { -// const newCenter = { -// x: rotatedRightMiddlePoint.x - (rotatedRightMiddlePoint.x - symmetricPoint.x) / 2, -// y: rotatedRightMiddlePoint.y + (symmetricPoint.y - rotatedRightMiddlePoint.y) / 2, -// } +function calculateBottom( + item: IBlockType, + rotate: number, + curPositon: Point, + 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 -// style.width = Math.round(newWidth) -// style.top = Math.round(newCenter.y - (style.height / 2)) -// style.left = Math.round(newCenter.x - (newWidth / 2)) -// } -// } +function calculateLeft(item: IBlockType, rotate: number, curPositon: Point, symmetricPoint: Point) { + const curPoint = resizeState.curPosition; + const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -rotate); + const rotatedLeftMiddlePoint = calculateRotatedPointCoordinate( + { + x: rotatedcurPositon.x, + y: curPoint.y, + }, + curPoint, + rotate + ); -// function calculateBottom(style, curPositon, pointInfo) { -// const { symmetricPoint, curPoint } = pointInfo -// const rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate) -// const rotatedBottomMiddlePoint = calculateRotatedPointCoordinate({ -// x: curPoint.x, -// y: rotatedcurPositon.y, -// }, curPoint, style.rotate) - -// 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, -// } - -// 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)) -// } -// } + 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, + }; + 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); + } + } +} diff --git a/packages/dooringx-lib/src/core/resizeHandler/index.tsx b/packages/dooringx-lib/src/core/resizeHandler/index.tsx index 212e6e2..019c275 100644 --- a/packages/dooringx-lib/src/core/resizeHandler/index.tsx +++ b/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; config: UserConfig; } -interface resizeStateType { - startX: number; - startY: number; - item: null | IBlockType; - isResize: boolean; - direction: DirectionType; - ref: RefObject | 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(); - const centerX = rect.left + rect.width / 2; - const centerY = rect.top + rect.height / 2; - // const durX = (moveX - startX) / scale; - // const durY = (moveY - startY) / scale; - // rect经过旋转后 - // const { realStartX, realStartY } = getRealStart(rect); + + let container = document.querySelector('#yh-container'); + if (!container) { + container = document.querySelector('#yh-container-iframe'); + } + if (!container) { + return; + } + const containerRect = container.getBoundingClientRect(); const rotate = resizeState.item.rotate.value; - const curPositon = { - x: startX, - y: startY, - }; - const symmetricPoint = { - x: centerX - (startX - centerX), - y: centerY - (startY - centerY), + + const movePoint = { + x: (moveX - containerRect.left) / scale, + y: (moveY - containerRect.top) / scale, }; - 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; }); diff --git a/packages/dooringx-lib/src/core/resizeHandler/state.ts b/packages/dooringx-lib/src/core/resizeHandler/state.ts new file mode 100644 index 0000000..8db1f93 --- /dev/null +++ b/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 | 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, + }, +};