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 (
@@ -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} diff --git a/packages/freesewing.shared/components/workbench/layout/print/index.js b/packages/freesewing.shared/components/workbench/layout/print/index.js index 6979f940671..4e7d93d9c52 100644 --- a/packages/freesewing.shared/components/workbench/layout/print/index.js +++ b/packages/freesewing.shared/components/workbench/layout/print/index.js @@ -48,6 +48,7 @@ const PrintLayout = props => { diff --git a/packages/freesewing.shared/components/workbench/layout/print/plugin.js b/packages/freesewing.shared/components/workbench/layout/print/plugin.js index c947efcd6e2..3242b225bfb 100644 --- a/packages/freesewing.shared/components/workbench/layout/print/plugin.js +++ b/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`]) diff --git a/packages/freesewing.shared/components/workbench/layout/print/settings.js b/packages/freesewing.shared/components/workbench/layout/print/settings.js index 10b197dad4e..98f94ae8bc6 100644 --- a/packages/freesewing.shared/components/workbench/layout/print/settings.js +++ b/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 diff --git a/packages/freesewing.shared/package.json b/packages/freesewing.shared/package.json index b7e381aad88..8176acf3003 100644 --- a/packages/freesewing.shared/package.json +++ b/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", diff --git a/packages/freesewing.shared/styles/svg-freesewing-draft.css b/packages/freesewing.shared/styles/svg-freesewing-draft.css index 1181f246fb3..9b8c6dcf2fe 100644 --- a/packages/freesewing.shared/styles/svg-freesewing-draft.css +++ b/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 */ diff --git a/packages/freesewing.shared/themes/hax0r.js b/packages/freesewing.shared/themes/hax0r.js index 9b5770f00c1..b2c31016475 100644 --- a/packages/freesewing.shared/themes/hax0r.js +++ b/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'], diff --git a/yarn.lock b/yarn.lock index d037349c801..4644cdfc66a 100644 --- a/yarn.lock +++ b/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==