From 25db0fbd65437893bfe7c6efe95e43d67dec3f8e Mon Sep 17 00:00:00 2001 From: graphemecluster Date: Wed, 14 Apr 2021 14:45:04 +0800 Subject: [PATCH 1/4] Fix cursor on the "southeast" control point of flipped parts --- src/components/ControlPoint.css | 5 ++++- src/components/SelectionControl.tsx | 15 ++++++++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/ControlPoint.css b/src/components/ControlPoint.css index c95fcdc..15d25e0 100644 --- a/src/components/ControlPoint.css +++ b/src/components/ControlPoint.css @@ -21,6 +21,9 @@ .controlpoint-rect.east, .controlpoint-rect.west { cursor: ew-resize; } -.controlpoint-rect.southeast { +.controlpoint-rect.southeast, .controlpoint-rect.northwest { cursor: nwse-resize; } +.controlpoint-rect.southwest, .controlpoint-rect.northeast { + cursor: nesw-resize; +} diff --git a/src/components/SelectionControl.tsx b/src/components/SelectionControl.tsx index e1128de..0763733 100644 --- a/src/components/SelectionControl.tsx +++ b/src/components/SelectionControl.tsx @@ -135,6 +135,11 @@ const SelectionControl = () => { }); }, [dispatch, pointControl]); + const controlPointNorth = !rectControl || rectControl.coords[0] < rectControl.coords[2] ? 'north' : 'south'; + const controlPointSouth = !rectControl || rectControl.coords[0] < rectControl.coords[2] ? 'south' : 'north'; + const controlPointWest = !rectControl || rectControl.coords[1] < rectControl.coords[3] ? 'west' : 'east'; + const controlPointEast = !rectControl || rectControl.coords[1] < rectControl.coords[3] ? 'east' : 'west'; + return <> {rectControl && <> { } From ce86b113b2f33b714e321d396468ab807cd5ecbf Mon Sep 17 00:00:00 2001 From: graphemecluster Date: Wed, 14 Apr 2021 14:45:04 +0800 Subject: [PATCH 2/4] Add the remaining 3 control points to the selection rectangle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 選択長方形に残りの３つの制御点を追加 --- src/actions/drag.ts | 3 +++ src/components/SelectionControl.tsx | 30 +++++++++++++++++++++++++++++ src/selectors/draggedGlyph.ts | 24 +++++++++++++++++++++++ 3 files changed, 57 insertions(+) diff --git a/src/actions/drag.ts b/src/actions/drag.ts index a69fd0d..c004b52 100644 --- a/src/actions/drag.ts +++ b/src/actions/drag.ts @@ -7,6 +7,9 @@ export enum RectPointPosition { east, west, southeast, + southwest, + northeast, + northwest, } const actionCreator = actionCreatorFactory('EDITOR'); diff --git a/src/components/SelectionControl.tsx b/src/components/SelectionControl.tsx index 0763733..1fca774 100644 --- a/src/components/SelectionControl.tsx +++ b/src/components/SelectionControl.tsx @@ -127,6 +127,18 @@ const SelectionControl = () => { (evt: React.MouseEvent) => handleMouseDownRectControl(evt, RectPointPosition.southeast), [handleMouseDownRectControl] ); + const handleMouseDownSouthwestPoint = useCallback( + (evt: React.MouseEvent) => handleMouseDownRectControl(evt, RectPointPosition.southwest), + [handleMouseDownRectControl] + ); + const handleMouseDownNortheastPoint = useCallback( + (evt: React.MouseEvent) => handleMouseDownRectControl(evt, RectPointPosition.northeast), + [handleMouseDownRectControl] + ); + const handleMouseDownNorthwestPoint = useCallback( + (evt: React.MouseEvent) => handleMouseDownRectControl(evt, RectPointPosition.northwest), + [handleMouseDownRectControl] + ); const handleMouseDownPointControls = useMemo(() => { return pointControl.map((_control, pointIndex) => (evt: React.MouseEvent) => { @@ -179,6 +191,24 @@ const SelectionControl = () => { className={controlPointSouth + controlPointEast} handleMouseDown={handleMouseDownSoutheastPoint} /> + + + } {pointControl.map(({ x, y, className }, index) => ( { })(position); @@ -65,6 +77,18 @@ export const resizeSelected = (glyph: Glyph, selection: number[], position: Rect newBBX[2] = Math.max(newBBX[2] + dx, newBBX[0] + minSize); newBBX[3] = Math.max(newBBX[3] + dy, newBBX[1] + minSize); break; + case RectPointPosition.southwest: + newBBX[0] = Math.min(newBBX[0] + dx, newBBX[2] - minSize); + newBBX[3] = Math.max(newBBX[3] + dy, newBBX[1] + minSize); + break; + case RectPointPosition.northeast: + newBBX[2] = Math.max(newBBX[2] + dx, newBBX[0] + minSize); + newBBX[1] = Math.min(newBBX[1] + dy, newBBX[3] - minSize); + break; + case RectPointPosition.northwest: + newBBX[0] = Math.min(newBBX[0] + dx, newBBX[2] - minSize); + newBBX[1] = Math.min(newBBX[1] + dy, newBBX[3] - minSize); + break; default: // exhaustive? ((_x: never) => { })(position); From 078e2a724fc2d0d01dc06caf324f5695015e9beb Mon Sep 17 00:00:00 2001 From: Kurogoma Date: Sat, 7 Oct 2023 20:01:24 +0900 Subject: [PATCH 3/4] Extract flipped flags --- src/components/SelectionControl.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionControl.tsx b/src/components/SelectionControl.tsx index 1fca774..7d08a19 100644 --- a/src/components/SelectionControl.tsx +++ b/src/components/SelectionControl.tsx @@ -147,10 +147,12 @@ const SelectionControl = () => { }); }, [dispatch, pointControl]); - const controlPointNorth = !rectControl || rectControl.coords[0] < rectControl.coords[2] ? 'north' : 'south'; - const controlPointSouth = !rectControl || rectControl.coords[0] < rectControl.coords[2] ? 'south' : 'north'; - const controlPointWest = !rectControl || rectControl.coords[1] < rectControl.coords[3] ? 'west' : 'east'; - const controlPointEast = !rectControl || rectControl.coords[1] < rectControl.coords[3] ? 'east' : 'west'; + const verticallyFlipped = !!rectControl && rectControl.coords[0] > rectControl.coords[2]; + const horizontallyFlipped = !!rectControl && rectControl.coords[1] > rectControl.coords[3]; + const controlPointNorth = verticallyFlipped ? 'south' : 'north'; + const controlPointSouth = verticallyFlipped ? 'north' : 'south'; + const controlPointWest = horizontallyFlipped ? 'east' : 'west'; + const controlPointEast = horizontallyFlipped ? 'west' : 'east'; return <> {rectControl && <> From 51ff9c6158bb5aa04e31e9034681ad3f0c4e949e Mon Sep 17 00:00:00 2001 From: Kurogoma Date: Sat, 7 Oct 2023 20:05:07 +0900 Subject: [PATCH 4/4] Append classname to const names --- src/components/SelectionControl.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/SelectionControl.tsx b/src/components/SelectionControl.tsx index 7d08a19..9bb72a5 100644 --- a/src/components/SelectionControl.tsx +++ b/src/components/SelectionControl.tsx @@ -149,10 +149,10 @@ const SelectionControl = () => { const verticallyFlipped = !!rectControl && rectControl.coords[0] > rectControl.coords[2]; const horizontallyFlipped = !!rectControl && rectControl.coords[1] > rectControl.coords[3]; - const controlPointNorth = verticallyFlipped ? 'south' : 'north'; - const controlPointSouth = verticallyFlipped ? 'north' : 'south'; - const controlPointWest = horizontallyFlipped ? 'east' : 'west'; - const controlPointEast = horizontallyFlipped ? 'west' : 'east'; + const controlPointNorthClassName = verticallyFlipped ? 'south' : 'north'; + const controlPointSouthClassName = verticallyFlipped ? 'north' : 'south'; + const controlPointWestClassName = horizontallyFlipped ? 'east' : 'west'; + const controlPointEastClassName = horizontallyFlipped ? 'west' : 'east'; return <> {rectControl && <> @@ -166,49 +166,49 @@ const SelectionControl = () => { }