Merge pull request #48 from kurgm/full-control-points

Add the remaining 3 control points to the selection rectangle
kurgm · Oct 15, 2023 · 290ecfb · 290ecfb
2 parents 573fed9 + 51ff9c6
commit 290ecfb
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 6 deletions.
diff --git 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/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
@@ -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) => {
@@ -135,6 +147,13 @@ const SelectionControl = () => {
     });
   }, [dispatch, pointControl]);
 
+  const verticallyFlipped = !!rectControl && rectControl.coords[0] > rectControl.coords[2];
+  const horizontallyFlipped = !!rectControl && rectControl.coords[1] > rectControl.coords[3];
+  const controlPointNorthClassName = verticallyFlipped ? 'south' : 'north';
+  const controlPointSouthClassName = verticallyFlipped ? 'north' : 'south';
+  const controlPointWestClassName = horizontallyFlipped ? 'east' : 'west';
+  const controlPointEastClassName = horizontallyFlipped ? 'west' : 'east';
+
   return <>
     {rectControl && <>
       <rect
@@ -147,33 +166,51 @@ const SelectionControl = () => {
       <ControlPoint
         x={(rectControl.coords[0] + rectControl.coords[2]) / 2}
         y={rectControl.coords[1]}
-        className='north'
+        className={controlPointNorthClassName}
         handleMouseDown={handleMouseDownNorthPoint}
       />
       <ControlPoint
         x={rectControl.coords[0]}
         y={(rectControl.coords[1] + rectControl.coords[3]) / 2}
-        className='west'
+        className={controlPointWestClassName}
         handleMouseDown={handleMouseDownWestPoint}
       />
       <ControlPoint
         x={(rectControl.coords[0] + rectControl.coords[2]) / 2}
         y={rectControl.coords[3]}
-        className='south'
+        className={controlPointSouthClassName}
         handleMouseDown={handleMouseDownSouthPoint}
       />
       <ControlPoint
         x={rectControl.coords[2]}
         y={(rectControl.coords[1] + rectControl.coords[3]) / 2}
-        className='east'
+        className={controlPointEastClassName}
         handleMouseDown={handleMouseDownEastPoint}
       />
       <ControlPoint
         x={rectControl.coords[2]}
         y={rectControl.coords[3]}
-        className='southeast'
+        className={controlPointSouthClassName + controlPointEastClassName}
         handleMouseDown={handleMouseDownSoutheastPoint}
       />
+      <ControlPoint
+        x={rectControl.coords[0]}
+        y={rectControl.coords[3]}
+        className={controlPointSouthClassName + controlPointWestClassName}
+        handleMouseDown={handleMouseDownSouthwestPoint}
+      />
+      <ControlPoint
+        x={rectControl.coords[2]}
+        y={rectControl.coords[1]}
+        className={controlPointNorthClassName + controlPointEastClassName}
+        handleMouseDown={handleMouseDownNortheastPoint}
+      />
+      <ControlPoint
+        x={rectControl.coords[0]}
+        y={rectControl.coords[1]}
+        className={controlPointNorthClassName + controlPointWestClassName}
+        handleMouseDown={handleMouseDownNorthwestPoint}
+      />
     </>}
     {pointControl.map(({ x, y, className }, index) => (
       <ControlPoint

diff --git a/src/selectors/draggedGlyph.ts b/src/selectors/draggedGlyph.ts
@@ -34,6 +34,18 @@ export const resizeSelected = (glyph: Glyph, selection: number[], position: Rect
             newValue[5] = Math.round(newValue[5] + dx);
             newValue[6] = Math.round(newValue[6] + dy);
             break;
+          case RectPointPosition.southwest:
+            newValue[3] = Math.round(newValue[3] + dx);
+            newValue[6] = Math.round(newValue[6] + dy);
+            break;
+          case RectPointPosition.northeast:
+            newValue[5] = Math.round(newValue[5] + dx);
+            newValue[4] = Math.round(newValue[4] + dy);
+            break;
+          case RectPointPosition.northwest:
+            newValue[3] = Math.round(newValue[3] + dx);
+            newValue[4] = Math.round(newValue[4] + dy);
+            break;
           default:
             // exhaustive?
             ((_x: never) => { })(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);