wip(lab): Working on layout feature

packages/freesewing.lab/package.json

@@ -22,6 +22,9 @@
     "@mdx-js/runtime": "next",
     "@tailwindcss/typography": "^0.5.0",
     "algoliasearch": "^4.11.0",
+    "d3-dispatch": "^3.0.1",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
     "daisyui": "^2.0.6",
     "lodash.get": "^4.4.2",
     "lodash.orderby": "^4.6.0",

packages/freesewing.shared/components/workbench/layout/draft.js

@@ -1,10 +1,120 @@
+import { useEffect, useRef, useState } from 'react'
 import Svg from '../draft/svg'
 import Defs from '../draft/defs'
-import Part from '../draft/part'
+import Path from '../draft/path'
+import Point from '../draft/point'
+import Snippet from '../draft/snippet'
+import { getProps } from '../draft/utils'
+import { drag } from 'd3-drag'
+import { select } from 'd3-selection'
+import { event } from 'd3-dispatch'
+
+const Part = props => {
+  if (typeof props.autoLayout?.move?.x === 'undefined') return null
+
+  const groupRef = useRef(null)
+  const [layout, setLayout] = useState({
+    move: {
+      x: props.autoLayout.move.x,
+      y: props.autoLayout.move.y,
+    },
+    rotate: 0,
+    flipX: false,
+    flipY: false,
+  })
+
+  useEffect(() => {
+    handleDrag(select(groupRef.current))
+  }, [])
+
+  let translateX = 0;
+  let translateY = 0;
+  const handleDrag = drag()
+    .subject(function() {
+      const me = select(this);
+      return { x: translateX, y: translateY }
+    })
+    .on('drag', function(event) {
+      const me = select(this);
+      const transform = `translate(${event.x}, ${event.y})`;
+      translateX = event.x;
+      translateY = event.y;
+      me.attr('transform', transform);
+    });
+
+  const { partName, part, app, gist, updateGist } = props
+
+  const grid = gist.paperless ? (
+    <rect
+      x={part.topLeft.x}
+      y={part.topLeft.y}
+      width={part.width}
+      height={part.height}
+      className="grid"
+      fill={'url(#grid-' + partName + ')'}
+    />
+  ) : null
+
+  return (
+    <g {...getProps(part)} id={`part-${partName}`} ref={groupRef}>
+      {grid}
+      {
+        props.gist?._state?.xray?.enabled &&
+        props.gist?._state?.xray?.reveal?.[partName]
+        && <XrayPart {...props} />
+      }
+      {Object.keys(part.paths).map((pathName) => (
+        <Path
+          key={pathName}
+          pathName={pathName}
+          path={part.paths[pathName]}
+          topLeft={props.part.topLeft}
+          bottomRight={props.part.bottomRight}
+          {...props}
+        />
+      ))}
+      {Object.keys(props.part.points).map((pointName) => (
+        <Point
+          key={pointName}
+          pointName={pointName}
+          point={props.part.points[pointName]}
+          topLeft={props.part.topLeft}
+          bottomRight={props.part.bottomRight}
+          {...props}
+        />
+      ))}
+      {Object.keys(props.part.snippets).map((snippetName) => (
+        <Snippet
+          key={snippetName}
+          snippetName={snippetName}
+          snippet={props.part.snippets[snippetName]}
+          {...props}
+        />
+      ))}
+      <rect
+        x={part.topLeft.x}
+        y={part.topLeft.y}
+        width={part.width}
+        height={part.height}
+        className="fill-accent"
+        style={{fillOpacity: 0.1}}
+      />
+    </g>
+  )
+}
+
 
 const Draft = props => {
   const { patternProps, gist, app, updateGist, unsetGist, bgProps={} } = props
 
+  //useEffect(() => {
+  //  if (!props.gist.layout) {
+  //    //updateGist(['layout'], patternProps.autoLayout)
+  //    console.log(patternProps.autoLayout)
+  //  }
+  //}, [])
+
+  console.log(gist)
   return (
     <div className="my-8 w-11/12 m-auto">
       <Svg {...patternProps} embed={gist.embed}>
@@ -17,6 +127,7 @@ const Draft = props => {
               key={name}
               partName={name}
               part={patternProps.parts[name]}
+              autoLayout={patternProps.autoLayout[name]}
               app={app}
               gist={gist}
               updateGist={updateGist}

packages/freesewing.shared/components/workbench/layout/print/index.js

@@ -48,6 +48,7 @@ const PrintLayout = props => {
       <Draft
         draft={draft}
         gist={props.gist}
+        updateGist={props.updateGist}
         patternProps={patternProps}
         bgProps={bgProps}
       />

packages/freesewing.shared/components/workbench/layout/print/plugin.js

@@ -51,10 +51,10 @@ const pagesPlugin = (size='a4', orientation='portrait') => ({
           points[`_pages__row${row}-col${col}-bl`] = new Point(x,y+h)
           points[`_pages__row${row}-col${col}-circle`] = new Point(x+w/2,y+h/2-24)
             .attr('data-circle', 42)
-            .attr('data-circle-class', 'stroke-4xl muted')
+            .attr('data-circle-class', 'stroke-4xl muted fabric')
           points[`_pages__row${row}-col${col}-text`] = new Point(x+w/2,y+h/2)
             .attr('data-text', `${count}`)
-            .attr('data-text-class', 'text-4xl center bold muted')
+            .attr('data-text-class', 'text-4xl center bold muted fill-fabric')
 
           paths[`_pages__row${row}-col${col}`] = new Path()
             .move(points[`_pages__row${row}-col${col}-tl`])

packages/freesewing.shared/components/workbench/layout/print/settings.js

@@ -5,6 +5,7 @@ import PrintIcon from 'shared/components/icons/print'
 import RightIcon from 'shared/components/icons/right'
 
 const PrintLayoutSettings = props => {
+  if (!props.draft?.parts?.pages?.pages) return null
   const settingsProps = {
     gist: props.gist,
     updateGist: props.updateGist

packages/freesewing.shared/package.json

@@ -14,6 +14,9 @@
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.0",
+    "d3-dispatch": "^3.0.1",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
     "daisyui": "^2.0.6",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.4.0",

packages/freesewing.shared/styles/svg-freesewing-draft.css

@@ -59,7 +59,7 @@ svg.freesewing.pattern {
 
   /* muted page numbers */
   .muted {
-    opacity: 0.1;
+    opacity: 0.15;
   }
 
   /* Developer view */

packages/freesewing.shared/themes/hax0r.js

@@ -66,7 +66,7 @@ module.exports = {
   '--code-font-weight-property': 'bold',
 
   '--pattern-bg': colors.lime['900'],
-  '--pattern-fabric': colors.neutral['700'],
+  '--pattern-fabric': colors.neutral['400'],
   '--pattern-lining': colors.emerald['500'],
   '--pattern-interfacing': colors.neutral['400'],
   '--pattern-canvas': colors.amber['600'],

yarn.lock

@@ -8625,7 +8625,7 @@ commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
-commander@^8.3.0:
+commander@^8.1.0, commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
@@ -9517,6 +9517,24 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+"d3-dispatch@1 - 3", d3-dispatch@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+d3-drag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+d3-selection@3, d3-selection@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -11856,7 +11874,7 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-file-saver@^2.0.2:
+file-saver@^2.0.2, file-saver@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
   integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==