diff --git a/packages/freesewing.lab/package.json b/packages/freesewing.lab/package.json
index 030ede5f49a..a9780d68c36 100644
--- a/packages/freesewing.lab/package.json
+++ b/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",
diff --git a/packages/freesewing.shared/components/workbench/layout/draft.js b/packages/freesewing.shared/components/workbench/layout/draft.js
index dd0434c6857..c17e87e4296 100644
--- a/packages/freesewing.shared/components/workbench/layout/draft.js
+++ b/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 ? (
+
+ ) : null
+
+ return (
+
+ {grid}
+ {
+ props.gist?._state?.xray?.enabled &&
+ props.gist?._state?.xray?.reveal?.[partName]
+ &&
+ }
+ {Object.keys(part.paths).map((pathName) => (
+
+ ))}
+ {Object.keys(props.part.points).map((pointName) => (
+
+ ))}
+ {Object.keys(props.part.snippets).map((snippetName) => (
+
+ ))}
+
+
+ )
+}
+
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 (