separate print layout from draft layout. add better buttons

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

@@ -2,27 +2,15 @@ import { useEffect, useRef} from 'react'
 import Svg from '../../draft/svg'
 import Defs from '../../draft/defs'
 import Part from './part'
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
 
 const Draft = props => {
-  if (!props.gistReady) {return null}
-  const { patternProps, gist, updateGist ,app, bgProps={} } = props
-  const { layout=false } = gist
+  const { patternProps, gist, updateGist, app, bgProps={}, fitLayoutPart = false, layoutType="printLayout"} = props
 
+  let layout = {...props.layout}
   const svgRef = useRef(null);
 
-  useEffect(() => {
-    if (!layout) {
-      // On the initial draft, core does the layout, so we set the layout to the auto-layout
-      // After this, core won't handle layout anymore. It's up to the user from this point onwards
-      updateGist(['layout'], {
-        ...patternProps.autoLayout,
-        width: patternProps.width,
-        height: patternProps.height
-      }, false)
-    }
-  }, [layout])
-
-  if (!patternProps || !layout) return null
+  if (!patternProps) return null
 
   // Helper method to update part layout and re-calculate width * height
   const updateLayout = (name, config, history=true) => {
@@ -34,7 +22,9 @@ const Draft = props => {
     let topLeft = {x: 0, y: 0}
     let bottomRight = {x: 0, y: 0}
     for (const [pname, part] of Object.entries(patternProps.parts)) {
+      if (pname == props.layoutPart && !fitLayoutPart) continue
       let partLayout = newLayout.parts[pname];
+
       // Pages part does not have its topLeft and bottomRight set by core since it's added post-draft
       if (partLayout?.tl) {
         // set the pattern extremes
@@ -49,7 +39,13 @@ const Draft = props => {
     newLayout.height = bottomRight.y - topLeft.y
     newLayout.bottomRight = bottomRight
     newLayout.topLeft = topLeft
-    updateGist(['layout'], newLayout, history)
+
+    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
+      layout = newLayout
+    }
   }
 
 
@@ -60,19 +56,25 @@ const Draft = props => {
 
   return (
     <div className="my-8 w-11/12 m-auto border-2 border-dotted border-base-content shadow">
+    <TransformWrapper
+      minScale={0.1}
+      centerZoomedOut={true}
+      wheel={{ activationKeys: ['Control'] }}
+    >
+      <TransformComponent>
       <Svg {...patternProps}
         embed={gist.embed}
         ref={svgRef}
         viewBox={layout.topLeft ? `${layout.topLeft.x} ${layout.topLeft.y} ${layout.width} ${layout.height}` :  false}
-        style={{maxHeight: '100vh'}}
+        style={{height: '90vh'}}
       >
         <Defs {...patternProps} />
         <style>{`:root { --pattern-scale: ${gist.scale || 1}}`}</style>
         <g>
-          <rect x="0" y="0" width={patternProps.width} height={patternProps.height} {...bgProps} />
+          <rect x="0" y="0" width={layout.width} height={layout.height} {...bgProps} />
           {[
-            partList.filter(name => name === 'pages'),
-            partList.filter(name => name !== 'pages'),
+            partList.filter(name => name === props.layoutPart),
+            partList.filter(name => name !== props.layoutPart),
           ].map(list => list.map(name => (
             <Part {...{
               key:name,
@@ -82,10 +84,13 @@ const Draft = props => {
               app,
               gist,
               updateLayout,
+              isLayoutPart: name === props.layoutPart
             }}/>
           )))}
         </g>
       </Svg>
+      </TransformComponent>
+    </TransformWrapper>
     </div>
   )
 }