chore(resizer): cleanup

packages/react/src/hooks/useMoveSelectedNodes.ts

@@ -8,7 +8,7 @@ const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) =>
   n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
 
 /**
- * Hook for updating node positions with keyboard presses
+ * Hook for updating node positions by passing a direction and factor
  *
  * @internal
  * @returns function for updating node positions

packages/system/src/xyresizer/XYResizer.ts

@@ -3,7 +3,7 @@ import { select } from 'd3-selection';
 
 import { getControlDirection, getDimensionsAfterResize, getResizeDirection } from './utils';
 import { getPointerPosition } from '../utils';
-import type { CoordinateExtent, NodeBase, NodeLookup, Transform } from '../types';
+import type { CoordinateExtent, NodeBase, NodeLookup, Transform, XYPosition } from '../types';
 import type { OnResize, OnResizeEnd, OnResizeStart, ResizeDragEvent, ShouldResize, ControlPosition } from './types';
 
 const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
@@ -30,10 +30,7 @@ export type XYResizerChange = typeof initChange;
 
 export type XYResizerChildChange = {
   id: string;
-  position: {
+  position: XYPosition;
-    x: number;
-    y: number;
-  };
   extent?: 'parent' | CoordinateExtent;
 };
 
@@ -144,6 +141,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
           // Determine largest minimal extent the parent node is allowed to resize to
           childNodes = [];
           childExtent = undefined;
+
           for (const [childId, child] of nodeLookup) {
             if (child.parentNode === nodeId) {
               childNodes.push({
@@ -151,8 +149,10 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
                 position: { ...child.position },
                 extent: child.extent,
               });
+
               if (child.extent === 'parent' || child.expandParent) {
                 const extent = nodeToChildExtent(child, node!);
+
                 if (childExtent) {
                   childExtent = [
                     [Math.min(extent[0][0], childExtent[0][0]), Math.min(extent[0][1], childExtent[0][1])],
@@ -171,8 +171,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
       .on('drag', (event: ResizeDragEvent) => {
         const { transform, snapGrid, snapToGrid } = getStoreItems();
         const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-
+        const childChanges: XYResizerChildChange[] = [];
-        let childChanges: XYResizerChildChange[] = [];
 
         if (node) {
           const change = { ...initChange };

packages/system/src/xyresizer/utils.ts

@@ -1,5 +1,5 @@
 import { CoordinateExtent } from '../types';
-import { clamp, getPointerPosition } from '../utils';
+import { getPointerPosition } from '../utils';
 import { ControlPosition } from './types';
 
 type GetResizeDirectionParams = {
@@ -107,7 +107,7 @@ function xor(a: boolean, b: boolean) {
  * @param pointerPosition - the current pointer position corrected for snapping
  * @param boundaries - minimum and maximum dimensions of the node
  * @param keepAspectRatio - prevent changes of asprect ratio
- * @returns width: new width of node, height: new height of node
+ * @returns x, y, width and height of the node after resize
  */
 export function getDimensionsAfterResize(
   startValues: StartValues,
@@ -129,8 +129,8 @@ export function getDimensionsAfterResize(
   let distX = Math.floor(isHorizontal ? xSnapped - startValues.pointerX : 0);
   let distY = Math.floor(isVertical ? ySnapped - startValues.pointerY : 0);
 
-  let newWidth = startWidth + (affectsX ? -distX : distX);
+  const newWidth = startWidth + (affectsX ? -distX : distX);
-  let newHeight = startHeight + (affectsY ? -distY : distY);
+  const newHeight = startHeight + (affectsY ? -distY : distY);
 
   // Check if maxWidth, minWWidth, maxHeight, minHeight are restricting the resize
   let clampX = getSizeClamp(newWidth, minWidth, maxWidth);
@@ -258,16 +258,10 @@ export function getDimensionsAfterResize(
     }
   }
 
-  let width = startWidth + (affectsX ? -distX : distX);
-  let height = startHeight + (affectsY ? -distY : distY);
-
-  let x = affectsX ? startX + distX : startX;
-  let y = affectsY ? startY + distY : startY;
-
   return {
-    width,
+    width: startWidth + (affectsX ? -distX : distX),
-    height,
+    height: startHeight + (affectsY ? -distY : distY),
-    x,
+    x: affectsX ? startX + distX : startX,
-    y,
+    y: affectsY ? startY + distY : startY,
   };
 }