From 7328374b1f8875709e928c997897f90882119a2e Mon Sep 17 00:00:00 2001 From: hufeixiong <673632758@qq.com> Date: Mon, 26 Jul 2021 11:27:55 +0800 Subject: [PATCH] complete cursor --- .../src/core/resizeHandler/calcWithRotate.ts | 18 +++--- .../src/core/resizeHandler/cursor.ts | 59 +++++++++++++++++++ .../src/core/resizeHandler/index.tsx | 39 +++++------- .../src/core/resizeHandler/state.ts | 16 ++--- packages/dooringx-lib/src/index.less | 16 ++--- 5 files changed, 97 insertions(+), 51 deletions(-) create mode 100644 packages/dooringx-lib/src/core/resizeHandler/cursor.ts diff --git a/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts b/packages/dooringx-lib/src/core/resizeHandler/calcWithRotate.ts index 2b16535..c3e5abc 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-23 20:43:27 + * @LastEditTime: 2021-07-26 11:10:48 * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\calcWithRotate.ts */ @@ -37,28 +37,28 @@ export function getRect( symmetricPoint: Point ) { switch (direction) { - case 'topleft': + case 'lt': calculateTopLeft(item, rotate, curPositon, symmetricPoint); break; - case 'right': + case 'r': calculateRight(item, rotate, curPositon, symmetricPoint); break; - case 'bottom': + case 'b': calculateBottom(item, rotate, curPositon, symmetricPoint); break; - case 'left': + case 'l': calculateLeft(item, rotate, curPositon, symmetricPoint); break; - case 'top': + case 't': calculateTop(item, rotate, curPositon, symmetricPoint); break; - case 'bottomright': + case 'rb': calculateBottomRight(item, rotate, curPositon, symmetricPoint); break; - case 'topright': + case 'rt': calculateTopRight(item, rotate, curPositon, symmetricPoint); break; - case 'bottomleft': + case 'lb': calculateBottomLeft(item, rotate, curPositon, symmetricPoint); break; default: diff --git a/packages/dooringx-lib/src/core/resizeHandler/cursor.ts b/packages/dooringx-lib/src/core/resizeHandler/cursor.ts new file mode 100644 index 0000000..73743b4 --- /dev/null +++ b/packages/dooringx-lib/src/core/resizeHandler/cursor.ts @@ -0,0 +1,59 @@ +/* + * @Author: yehuozhili + * @Date: 2021-07-26 10:55:23 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-07-26 11:12:23 + * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\cursor.ts + */ + +import { directionArr } from './state'; + +const initialAngle: Record = { + lt: 0, + t: 45, + rt: 90, + r: 135, + rb: 180, + b: 225, + lb: 270, + l: 315, +}; + +const angleToCursor = [ + { start: 338, end: 23, cursor: 'nw' }, + { start: 23, end: 68, cursor: 'n' }, + { start: 68, end: 113, cursor: 'ne' }, + { start: 113, end: 158, cursor: 'e' }, + { start: 158, end: 203, cursor: 'se' }, + { start: 203, end: 248, cursor: 's' }, + { start: 248, end: 293, cursor: 'sw' }, + { start: 293, end: 338, cursor: 'w' }, +]; + +function mod360(deg: number) { + return (deg + 360) % 360; +} + +export function getCursor(curRotate: number) { + const rotate = mod360(curRotate); + const result: Record = {}; + let lastMatchIndex = -1; + directionArr.forEach((point) => { + const angle = mod360(initialAngle[point] + rotate); + const len = angleToCursor.length; + while (true) { + lastMatchIndex = (lastMatchIndex + 1) % len; + const angleLimit = angleToCursor[lastMatchIndex]; + if (angle < 23 || angle >= 338) { + result[point] = 'nw-resize'; + return; + } + if (angleLimit.start <= angle && angle < angleLimit.end) { + result[point] = angleLimit.cursor + '-resize'; + return; + } + } + }); + + return result; +} diff --git a/packages/dooringx-lib/src/core/resizeHandler/index.tsx b/packages/dooringx-lib/src/core/resizeHandler/index.tsx index 019c275..aecaf79 100644 --- a/packages/dooringx-lib/src/core/resizeHandler/index.tsx +++ b/packages/dooringx-lib/src/core/resizeHandler/index.tsx @@ -6,7 +6,8 @@ import classnames from 'classnames'; import styles from '../../index.less'; import UserConfig from '../../config'; import { getRect } from './calcWithRotate'; -import { DirectionType, resizeState } from './state'; +import { directionArr, DirectionType, resizeState } from './state'; +import { getCursor } from './cursor'; interface BlockResizerProps { data: IBlockType; rect: RefObject; @@ -107,36 +108,36 @@ export const changePosition = ( let tmpy = height / scale - durY; let tmpx = width / scale - durX; switch (direction) { - case 'right': + case 'r': v.width = width / scale + durX; break; - case 'bottom': + case 'b': v.height = height / scale + durY; break; - case 'left': + case 'l': v.left = width / scale > 0 ? v.left + durX : v.left; v.width = tmpx > 0 ? tmpx : 0; break; - case 'top': + case 't': v.top = height / scale > 0 ? v.top + durY : v.top; v.height = tmpy > 0 ? tmpy : 0; break; - case 'bottomright': + case 'rb': v.width = width / scale + durX; v.height = height / scale + durY; break; - case 'topright': + case 'rt': v.width = width / scale + durX; v.top = height / scale > 0 ? v.top + durY : v.top; v.height = tmpy > 0 ? tmpy : 0; break; - case 'topleft': + case 'lt': v.top = height / scale > 0 ? v.top + durY : v.top; v.height = tmpy > 0 ? tmpy : 0; v.left = width / scale > 0 ? v.left + durX : v.left; v.width = tmpx > 0 ? tmpx : 0; break; - case 'bottomleft': + case 'lb': v.left = width / scale > 0 ? v.left + durX : v.left; v.width = tmpx > 0 ? tmpx : 0; v.height = height / scale + durY; @@ -176,7 +177,6 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => { }; 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) => { @@ -190,19 +190,9 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => { store.setData({ ...clonedata, block: newblock }); } }; - -const directionArr: DirectionType[] = [ - 'top', - 'topleft', - 'left', - 'topright', - 'bottomleft', - 'bottom', - 'right', - 'bottomright', -]; - export function BlockResizer(props: BlockResizerProps) { + const rotate = props.data.rotate.value; + const cursorMap = getCursor(rotate); const render = useMemo(() => { if (props.data.focus && props.data.resize) { return ( @@ -210,6 +200,9 @@ export function BlockResizer(props: BlockResizerProps) { {directionArr.map((v) => { return (
{ @@ -226,7 +219,7 @@ export function BlockResizer(props: BlockResizerProps) { } else { return null; } - }, [props.config, props.data, props.rect]); + }, [cursorMap, props.config, props.data, props.rect]); return <>{render}; } diff --git a/packages/dooringx-lib/src/core/resizeHandler/state.ts b/packages/dooringx-lib/src/core/resizeHandler/state.ts index 8db1f93..254268a 100644 --- a/packages/dooringx-lib/src/core/resizeHandler/state.ts +++ b/packages/dooringx-lib/src/core/resizeHandler/state.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-23 20:31:30 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-23 20:32:23 + * @LastEditTime: 2021-07-26 11:12:02 * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\state.ts */ @@ -26,21 +26,15 @@ interface resizeStateType { symmetricPoint: Point; curPosition: Point; } -export type DirectionType = - | 'top' - | 'topleft' - | 'topright' - | 'left' - | 'bottomleft' - | 'bottom' - | 'bottomright' - | 'right'; +export type DirectionType = 'lt' | 't' | 'rt' | 'r' | 'rb' | 'b' | 'lb' | 'l'; +export const directionArr: DirectionType[] = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']; + export const resizeState: resizeStateType = { startX: 0, startY: 0, item: null, isResize: false, - direction: 'bottom', + direction: 'b', ref: null, current: 0, currentTarget: null, diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index c52a56c..9d50d91 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -90,7 +90,7 @@ cursor: pointer; border-radius: 50%; - &.left { + &.l { left: -6px; top: calc(50% - 3px); @@ -99,7 +99,7 @@ } } - &.right { + &.r { right: -6px; top: calc(50% - 3px); @@ -108,7 +108,7 @@ } } - &.top { + &.t { top: -6px; left: calc(50% - 3px); @@ -117,7 +117,7 @@ } } - &.bottom { + &.b { bottom: -6px; left: calc(50% - 3px); @@ -126,7 +126,7 @@ } } - &.topleft { + &.lt { top: -6px; left: -6px; @@ -135,7 +135,7 @@ } } - &.bottomleft { + &.lb { bottom: -6px; left: -6px; @@ -144,7 +144,7 @@ } } - &.bottomright { + &.rb { bottom: -6px; right: -6px; @@ -153,7 +153,7 @@ } } - &.topright { + &.rt { top: -6px; right: -6px;