documenting code

sites/shared/components/workbench/layout/draft/index.js

@@ -5,9 +5,15 @@ import Part from './part'
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
 
 const Draft = props => {
-  const { patternProps, gist, updateGist, app, bgProps={}, fitLayoutPart = false, layoutType="printLayout"} = props
+  const { draft, patternProps, gist, updateGist, app, bgProps={}, fitLayoutPart = false, layoutType="printingLayout"} = props
+
+  // keep a fresh copy of the layout because we might manipulate it without saving to the gist
+  let layout = draft.settings.layout === true ? {
+      ...patternProps.autoLayout,
+      width: patternProps.width,
+      height: patternProps.height
+    } : {...draft.settings.layout}
 
-  let layout = {...props.layout}
   const svgRef = useRef(null);
 
   if (!patternProps) return null
@@ -43,7 +49,7 @@ const Draft = props => {
     if (history) {
       updateGist(['layouts', layoutType], newLayout, history)
     } else {
-      // we don't put it in the gist if it shouldn't contribute to history because we need some the data calculated here for rendering purposes on the initial layout, but we don't want to actually save a layout until the user manipulates it
+      // we don't put it in the gist if it shouldn't contribute to history because we need some of the data calculated here for rendering purposes on the initial layout, but we don't want to actually save a layout until the user manipulates it. This is what allows the layout to respond appropriately to settings changes. Once the user has starting playing with the layout, all bets are off
       layout = newLayout
     }
   }

sites/shared/components/workbench/layout/draft/part.js

@@ -70,6 +70,7 @@ const Part = props => {
 
   // update the layout on mount
   useEffect(() => {
+    // only update if there's a rendered part and it's not the pages or fabric part
     if (partRef.current && !props.isLayoutPart) {
       updateLayout(false)
     }
@@ -77,6 +78,7 @@ const Part = props => {
 
   // Initialize drag handler
   useEffect(() => {
+    // don't drag the pages
     if (props.isLayoutPart) return
     handleDrag(select(partRef.current))
   }, [rotate, partRef, partLayout])
@@ -124,6 +126,7 @@ const Part = props => {
 
       if (rotate) {
         let newRotation = getRotation(event);
+        // shift key to snap the rotation
         if (event.sourceEvent.shiftKey) {
           newRotation = Math.ceil(newRotation/15) * 15
         }
@@ -138,41 +141,53 @@ const Part = props => {
         translateY = event.y
       }
 
+      // a drag happened, so we should update the layout when we're done
       didDrag = true;
       setTransforms()
     })
     .on('end', function(event) {
-      // save to gist
+      // save to gist if anything actually changed
       if (didDrag) updateLayout()
 
       didDrag = false
     })
 
+  /** reset the part's transforms */
   const resetPart = (event) => {
     rotation = 0
     flipX = 0
     flipY = 0
     updateLayout()
   }
+
+  /** toggle between dragging and rotating */
   const toggleDragRotate = () => {
+    // only respond if the part should be able to drag/rotate
     if (!partRef.current || props.isLayoutPart) {return}
-    updateLayout()
+
     setRotate(!rotate)
   }
 
+  /** update the layout either locally or in the gist */
   const updateLayout = (history=true) => {
+    /** don't mess with what we don't lay out */
     if (!partRef.current || props.isLayoutPart) return
 
+    // set the transforms on the part in order to calculate from the latest position
     setTransforms()
+
+    // get the bounding box and the svg's current transform matrix
     const partRect = innerRef.current.getBoundingClientRect();
     const matrix = innerRef.current.ownerSVGElement.getScreenCTM().inverse();
 
+    // a function to convert dom space to svg space
     const domToSvg = (point) => DOMPointReadOnly.fromPoint(point).matrixTransform(matrix)
 
     // include the new top left and bottom right to ease calculating the pattern width and height
     const tl = domToSvg({x: partRect.left, y: partRect.top});
     const br = domToSvg({x: partRect.right, y: props.isLayoutPart ? 0 : partRect.bottom});
 
+    // update it on the draft component
     props.updateLayout(partName, {
       move: {
         x: translateX,
@@ -186,13 +201,14 @@ const Part = props => {
     }, history)
   }
 
-  // Method to flip (mirror) the part along the X or Y axis
+  /** Method to flip (mirror) the part along the X or Y axis */
   const flip = axis => {
     if (axis === 'x') flipX = !flipX
     else flipY = !flipY
     updateLayout()
   }
 
+  /** method to rotate 90 degrees */
   const rotate90 = (direction = 1) => {
     if (flipX) direction *= -1
     if (flipY) direction *= -1
@@ -202,6 +218,7 @@ const Part = props => {
     updateLayout()
   }
 
+  // don't render if the part is empty
   if (Object.keys(part.snippets).length === 0 && Object.keys(part.paths).length === 0) return null;
 
   return (

sites/shared/components/workbench/layout/print/index.js

@@ -1,10 +1,11 @@
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 import Settings from './settings'
 import Draft from '../draft/index'
 import pluginBuilder from './plugin'
 
 const PrintLayout = props => {
+  // disable xray
   useEffect(() => {
     if (props.gist?._state?.xray?.enabled) props.updateGist(
       ['_state', 'xray', 'enabled'],
@@ -15,20 +16,18 @@ const PrintLayout = props => {
   const { t } = useTranslation(['workbench'])
 
   const draft = props.draft
+  // add the pages plugin to the draft
   draft.use(pluginBuilder(
     props.gist?._state?.layout?.forPrinting?.page?.size,
     props.gist?._state?.layout?.forPrinting?.page?.orientation,
   ))
+
   let patternProps
   let layout
   try {
+    // draft the pattern
     draft.draft()
     patternProps = draft.getRenderProps()
-    layout = draft.settings.layout === true ? {
-      ...patternProps.autoLayout,
-      width: patternProps.width,
-      height: patternProps.height
-    } : draft.settings.layout
   } catch(err) {
     console.log(err, props.gist)
   }
@@ -54,7 +53,6 @@ const PrintLayout = props => {
         bgProps={bgProps}
         gistReady={props.gistReady}
         layoutPart="pages"
-        layout={layout}
       />
     </div>
   )

sites/shared/components/workbench/layout/print/settings.js

@@ -26,7 +26,7 @@ const PrintLayoutSettings = props => {
       </div>
       <button
         key="reset"
-        onClick={() => props.unsetGist(['layouts', 'printLayout'])}
+        onClick={() => props.unsetGist(['layouts', 'printingLayout'])}
         className="btn btn-primary btn-outline"
       >
         <ClearIcon className="h-6 w-6 mr-2"/>