cutting layout view

sites/shared/components/workbench/pattern/movable/stack.mjs

@@ -43,25 +43,23 @@
  *  I've sort of left it at this because I'm starting to wonder if we should perhaps re-think
  *  how custom layouts are supported in the core. And I would like to discuss this with the core team.
  */
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useCallback } from 'react'
 import { generateStackTransform, getTransformedBounds } from '@freesewing/core'
-import { Stack } from 'pkgs/react-components/src/pattern/stack.mjs'
 import { getProps, angle } from 'pkgs/react-components/src/pattern/utils.mjs'
 import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import { Buttons } from './transform-buttons.mjs'
-import get from 'lodash.get'
 
 export const MovableStack = ({
   stackName,
   stack,
-  settings,
   components,
   t,
   movable = true,
   layout,
   updateLayout,
   showButtons,
+  settings,
 }) => {
   const stackExists = !movable || typeof layout?.move?.x !== 'undefined'
 
@@ -72,100 +70,80 @@ export const MovableStack = ({
   // State variable to switch between moving or rotating the part
   const [rotate, setRotate] = useState(false)
 
-  // update the layout on mount
-  useEffect(() => {
-    // only update if there's a rendered part and it's not the pages or fabric part
-    if (stackRef.current && movable) {
-      updateStacklayout(false)
-    }
-  }, [stackRef, layout])
-
-  // Initialize drag handler
-  useEffect(() => {
-    // don't drag the pages
-    if (!movable || !stackExists) return
-    handleDrag(select(stackRef.current))
-  }, [rotate, stackRef, layout])
-
-  // // Don't just assume this makes sense
-  if (!stackExists) return null
-
-  if (!movable) return <Stack {...{ stackName, stack, settings, components, t }} />
-
-  // These are kept as vars because re-rendering on drag would kill performance
+  // This is kept as state to avoid re-rendering on drag, which would kill performance
+  // It's a bit of an anti-pattern, but we'll directly manipulate the properties instead of updating the state
   // Managing the difference between re-render and direct DOM updates makes this
   // whole thing a bit tricky to wrap your head around
-  let translateX = layout.move.x
-  let translateY = layout.move.y
-  let stackRotation = layout.rotate || 0
-  let rotation = stackRotation
-  let flipX = !!layout.flipX
-  let flipY = !!layout.flipY
+  const stackRotation = layout?.rotate || 0
+  const [liveTransforms] = useState({
+    translateX: layout?.move.x,
+    translateY: layout?.move.y,
+    rotation: stackRotation,
+    flipX: !!layout?.flipX,
+    flipY: !!layout?.flipY,
+  })
 
-  const center = {
+  const center = stack.topLeft && {
     x: stack.topLeft.x + (stack.bottomRight.x - stack.topLeft.x) / 2,
     y: stack.topLeft.y + (stack.bottomRight.y - stack.topLeft.y) / 2,
   }
 
-  /** get the delta rotation from the start of the drag event to now */
-  const getRotation = (event) =>
-    angle(center, event.subject) - angle(center, { x: event.x, y: event.y })
-
-  const setTransforms = () => {
+  const setTransforms = useCallback(() => {
     // get the transform attributes
+    const { translateX, translateY, rotation, flipX, flipY } = liveTransforms
     const transforms = generateStackTransform(translateX, translateY, rotation, flipX, flipY, stack)
 
     const me = select(stackRef.current)
     me.attr('transform', transforms.join(' '))
 
     return transforms
-  }
+  }, [liveTransforms, stackRef, stack])
 
-  let didDrag = false
-  const handleDrag = drag()
-    // subject allows us to save data from the start of the event to use throughout event handing
-    .subject(function (event) {
-      return rotate
-        ? // if we're rotating, the subject is the mouse position
-          { x: event.x, y: event.y }
-        : // if we're moving, the subject is the part's x,y coordinates
-          { x: translateX, y: translateY }
-    })
-    .on('drag', function (event) {
-      if (!event.dx && !event.dy) return
+  /** update the layout either locally or in the gist */
+  const updateStacklayout = useCallback(
+    (history = true) => {
+      /** don't mess with what we don't lay out */
+      if (!stackRef.current || !movable) return
 
-      if (rotate) {
-        let newRotation = getRotation(event)
-        // shift key to snap the rotation
-        if (event.sourceEvent.shiftKey) {
-          newRotation = Math.ceil(newRotation / 15) * 15
-        }
-        // reverse the rotation direction one time per flip. if we're flipped both directions, rotation will be positive again
-        if (flipX) newRotation *= -1
-        if (flipY) newRotation *= -1
+      // set the transforms on the stack in order to calculate from the latest position
+      const transforms = setTransforms()
 
-        rotation = stackRotation + newRotation
-      } else {
-        translateX = event.x
-        translateY = event.y
-      }
+      // apply the transforms to the bounding box to get the new extents of the stack
+      const { tl, br } = getTransformedBounds(stack, transforms)
 
-      // a drag happened, so we should update the layout when we're done
-      didDrag = true
-      setTransforms()
-    })
-    .on('end', function () {
-      // save to gist if anything actually changed
-      if (didDrag) updateStacklayout()
+      // update it on the draft component
+      updateLayout(
+        stackName,
+        {
+          move: {
+            x: liveTransforms.translateX,
+            y: liveTransforms.translateY,
+          },
+          rotate: liveTransforms.rotation % 360,
+          flipX: liveTransforms.flipX,
+          flipY: liveTransforms.flipY,
+          tl,
+          br,
+        },
+        history
+      )
+    },
+    [stackRef, setTransforms, updateLayout, liveTransforms, movable, stack, stackName]
+  )
 
-      didDrag = false
-    })
+  // update the layout on mount
+  useEffect(() => {
+    // only update if there's a rendered part and it's not an imovable part
+    if (stackRef.current && movable) {
+      updateStacklayout(false)
+    }
+  }, [stackRef, movable, updateStacklayout])
 
   /** reset the part's transforms */
   const resetPart = () => {
-    rotation = 0
-    flipX = 0
-    flipY = 0
+    liveTransforms.rotation = 0
+    liveTransforms.flipX = 0
+    liveTransforms.flipY = 0
     updateStacklayout()
   }
 
@@ -179,58 +157,85 @@ export const MovableStack = ({
     setRotate(!rotate)
   }
 
-  /** update the layout either locally or in the gist */
-  const updateStacklayout = (history = true) => {
-    /** don't mess with what we don't lay out */
-    if (!stackRef.current || !movable) return
-
-    // set the transforms on the stack in order to calculate from the latest position
-    const transforms = setTransforms()
-
-    // apply the transforms to the bounding box to get the new extents of the stack
-    const { tl, br } = getTransformedBounds(stack, transforms)
-
-    // update it on the draft component
-    updateLayout(
-      stackName,
-      {
-        move: {
-          x: translateX,
-          y: translateY,
-        },
-        rotate: rotation % 360,
-        flipX,
-        flipY,
-        tl,
-        br,
-      },
-      history
-    )
-  }
-
   /** Method to flip (mirror) the part along the X or Y axis */
   const flip = (axis) => {
-    if (axis === 'x') flipX = !flipX
-    else flipY = !flipY
+    if (axis === 'x') liveTransforms.flipX = !liveTransforms.flipX
+    else liveTransforms.flipY = !liveTransforms.flipY
     updateStacklayout()
   }
 
   /** method to rotate 90 degrees */
   const rotate90 = (direction = 1) => {
-    if (flipX) direction *= -1
-    if (flipY) direction *= -1
+    if (liveTransforms.flipX) direction *= -1
+    if (liveTransforms.flipY) direction *= -1
 
-    rotation += 90 * direction
+    liveTransforms.rotation += 90 * direction
 
     updateStacklayout()
   }
 
+  /** get the delta rotation from the start of the drag event to now */
+  const getRotation = (event) =>
+    angle(center, event.subject) - angle(center, { x: event.x, y: event.y })
+
+  let didDrag = false
+  const handleDrag =
+    movable &&
+    drag()
+      // subject allows us to save data from the start of the event to use throughout event handing
+      .subject(function (event) {
+        return rotate
+          ? // if we're rotating, the subject is the mouse position
+            { x: event.x, y: event.y }
+          : // if we're moving, the subject is the part's x,y coordinates
+            { x: liveTransforms.translateX, y: liveTransforms.translateY }
+      })
+      .on('drag', function (event) {
+        if (!event.dx && !event.dy) return
+
+        if (rotate) {
+          let newRotation = getRotation(event)
+          // shift key to snap the rotation
+          if (event.sourceEvent.shiftKey) {
+            newRotation = Math.ceil(newRotation / 15) * 15
+          }
+          // reverse the rotation direction one time per flip. if we're flipped both directions, rotation will be positive again
+          if (liveTransforms.flipX) newRotation *= -1
+          if (liveTransforms.flipY) newRotation *= -1
+
+          liveTransforms.rotation = stackRotation + newRotation
+        } else {
+          liveTransforms.translateX = event.x
+          liveTransforms.translateY = event.y
+        }
+
+        // a drag happened, so we should update the layout when we're done
+        didDrag = true
+        setTransforms()
+      })
+      .on('end', function () {
+        // save to gist if anything actually changed
+        if (didDrag) updateStacklayout()
+
+        didDrag = false
+      })
+
+  // Initialize drag handler
+  useEffect(() => {
+    // don't drag the pages
+    if (!movable || !stackExists) return
+    handleDrag(select(stackRef.current))
+  }, [stackRef, movable, stackExists, handleDrag])
+
+  // // Don't just assume this makes sense
+  if (!stackExists) return null
+
   const { Group, Part } = components
   return (
     <Group id={`stack-${stackName}`} {...getProps(stack)} ref={stackRef}>
       <Group id={`stack-inner-${stackName}`} ref={innerRef}>
         {[...stack.parts].map((part, key) => (
-          <Part {...{ settings, components, t, part, stackName, key }} />
+          <Part {...{ components, t, part, stackName, settings }} key={key} />
         ))}
       </Group>
       {movable && (
@@ -246,9 +251,11 @@ export const MovableStack = ({
           />
           {showButtons ? (
             <Buttons
-              transform={`translate(${center.x}, ${center.y}) rotate(${-rotation}) scale(${
-                flipX ? -1 : 1
-              },${flipY ? -1 : 1})`}
+              transform={`translate(${center.x}, ${
+                center.y
+              }) rotate(${-liveTransforms.rotation}) scale(${liveTransforms.flipX ? -1 : 1},${
+                liveTransforms.flipY ? -1 : 1
+              })`}
               flip={flip}
               rotate={rotate}
               setRotate={setRotate}