diff --git a/packages/react-components/src/pattern/group.mjs b/packages/react-components/src/pattern/group.mjs index 92d04df3de2..51690f21ecb 100644 --- a/packages/react-components/src/pattern/group.mjs +++ b/packages/react-components/src/pattern/group.mjs @@ -1,3 +1,7 @@ -import React from 'react' +import { forwardRef } from 'react' -export const Group = (props) => {props.children} +export const Group = forwardRef((props, ref) => ( + + {props.children} + +)) diff --git a/packages/react-components/src/pattern/index.mjs b/packages/react-components/src/pattern/index.mjs index ce185800aa1..2c211f3f366 100644 --- a/packages/react-components/src/pattern/index.mjs +++ b/packages/react-components/src/pattern/index.mjs @@ -1,4 +1,4 @@ -import React from 'react' +import { forwardRef } from 'react' // Components that can be swizzled import { Svg as DefaultSvg } from './svg.mjs' import { Defs as DefaultDefs } from './defs.mjs' @@ -10,6 +10,7 @@ import { Snippet as DefaultSnippet } from './snippet.mjs' import { Path as DefaultPath } from './path.mjs' import { Grid as DefaultGrid } from './grid.mjs' import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs' +import { Circle as DefaultCircle } from './circle.mjs' /* * Allow people to swizzle these components @@ -26,55 +27,60 @@ const defaultComponents = { Grid: DefaultGrid, Text: DefaultText, TextOnPath: DefaultTextOnPath, + Circle: DefaultCircle, } -export const Pattern = ({ - renderProps = false, - t = (string) => string, - components = {}, - children = false, - className = 'freesewing pattern', - ref = false, -}) => { - if (!renderProps) return null +export const Pattern = forwardRef( + ( + { + renderProps = false, + t = (string) => string, + components = {}, + children = false, + className = 'freesewing pattern', + }, + ref + ) => { + if (!renderProps) return null - // Merge default and swizzled components - components = { - ...defaultComponents, - ...components, + // Merge default and swizzled components + components = { + ...defaultComponents, + ...components, + } + + const { Svg, Defs, Stack, Group } = components + + const optionalProps = {} + if (className) optionalProps.className = className + + return ( + + + + + {children + ? children + : Object.keys(renderProps.stacks).map((stackName) => ( + + ))} + + + ) } - - const { Svg, Defs, Stack, Group } = components - - const optionalProps = {} - if (ref) optionalProps.ref = ref - if (className) optionalProps.className = className - - return ( - - - - - {children - ? children - : Object.keys(renderProps.stacks).map((stackName) => ( - - ))} - - - ) -} +) diff --git a/packages/react-components/src/pattern/utils.mjs b/packages/react-components/src/pattern/utils.mjs index faf9fed0605..4c7a88e6ac3 100644 --- a/packages/react-components/src/pattern/utils.mjs +++ b/packages/react-components/src/pattern/utils.mjs @@ -1,5 +1,3 @@ -import React from 'react' - export const getProps = (obj) => { /** I can't believe it but there seems to be no method on NPM todo this */ const cssKey = (key) => { @@ -38,6 +36,16 @@ export const getProps = (obj) => { return props } +export const dx = (pointA, pointB) => pointB.x - pointA.x +export const dy = (pointA, pointB) => pointB.y - pointA.y +export const rad2deg = (radians) => radians * 57.29577951308232 +export const angle = (pointA, pointB) => { + let rad = Math.atan2(-1 * dy(pointA, pointB), dx(pointA, pointB)) + while (rad < 0) rad += 2 * Math.PI + + return rad2deg(rad) +} + export const withinPartBounds = (point, part) => point.x >= part.topLeft.x && point.x <= part.bottomRight.x && diff --git a/sites/shared/components/workbench/index.mjs b/sites/shared/components/workbench/index.mjs index 5a1ef70cb10..03b4fc03c32 100644 --- a/sites/shared/components/workbench/index.mjs +++ b/sites/shared/components/workbench/index.mjs @@ -84,8 +84,9 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) = viewContent = break default: { + const layout = ui.layouts?.[view] || settings.layout || true // Generate the pattern here so we can pass it down to both the view and the options menu - const pattern = settings.measurements !== undefined && new Design(settings) + const pattern = settings.measurements !== undefined && new Design({ layout, ...settings }) // Return early if the pattern is not initialized yet if (typeof pattern.getConfig !== 'function') return null @@ -107,7 +108,7 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) = } } const View = views[view] - viewContent = + viewContent = } } diff --git a/sites/shared/components/workbench/pan-zoom-pattern.mjs b/sites/shared/components/workbench/pan-zoom-pattern.mjs index 0fcf71ea339..6e149cc5f27 100644 --- a/sites/shared/components/workbench/pan-zoom-pattern.mjs +++ b/sites/shared/components/workbench/pan-zoom-pattern.mjs @@ -58,7 +58,7 @@ export const PanZoomPattern = forwardRef((props, ref) => { >
- +
diff --git a/sites/shared/components/workbench/pattern/movable/index.mjs b/sites/shared/components/workbench/pattern/movable/index.mjs new file mode 100644 index 00000000000..058c14342f5 --- /dev/null +++ b/sites/shared/components/workbench/pattern/movable/index.mjs @@ -0,0 +1,113 @@ +import { useRef } from 'react' +import { Stack } from './stack.mjs' +// import { SvgWrapper } from '../../pattern/svg.mjs' +// import { PartInner } from '../../pattern/part.mjs' +import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs' +import { MovableStack } from './stack.mjs' +import get from 'lodash.get' + +export const MovablePattern = ({ + design, + pattern, + renderProps, + patternConfig, + settings, + ui, + update, + bgProps = {}, + fitImmovable = false, + immovable = [], + layoutPath, +}) => { + const svgRef = useRef(null) + if (!renderProps) return null + + // keep a fresh copy of the layout because we might manipulate it without saving to the gist + let layout = + renderProps.settings[0].layout === true + ? { + ...renderProps.autoLayout, + width: renderProps.width, + height: renderProps.height, + } + : renderProps.settings[0].layout + + // Helper method to update part layout and re-calculate width * height + const updateLayout = (name, config, history = true) => { + // Start creating new layout + const newLayout = { ...layout } + newLayout.stacks[name] = config + + // Pattern topLeft and bottomRight + let topLeft = { x: 0, y: 0 } + let bottomRight = { x: 0, y: 0 } + for (const pname in renderProps.stacks) { + if (immovable.includes(pname) && !fitImmovable) continue + let partLayout = newLayout.stacks[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 + topLeft.x = Math.min(topLeft.x, partLayout.tl.x) + topLeft.y = Math.min(topLeft.y, partLayout.tl.y) + bottomRight.x = Math.max(bottomRight.x, partLayout.br.x) + bottomRight.y = Math.max(bottomRight.y, partLayout.br.y) + } + } + + newLayout.width = bottomRight.x - topLeft.x + newLayout.height = bottomRight.y - topLeft.y + newLayout.bottomRight = bottomRight + newLayout.topLeft = topLeft + + if (history) { + update.ui(layoutPath, newLayout) + } else { + // 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 + } + } + + const viewBox = layout.topLeft + ? `${layout.topLeft.x} ${layout.topLeft.y} ${layout.width} ${layout.height}` + : false + + const sortedStacks = {} + Object.keys(renderProps.stacks) + .sort((a, b) => { + const hasA = immovable.includes(a) + const hasB = immovable.includes(b) + if (hasA && !hasB) return -1 + if (!hasA && hasB) return 1 + return 0 + }) + .forEach((s) => (sortedStacks[s] = renderProps.stacks[s])) + + const sortedRenderProps = { ...renderProps, stacks: sortedStacks } + + const Stack = ({ stackName, stack, settings, components, t }) => ( + + ) + + return ( + + ) +} diff --git a/sites/shared/components/workbench/pattern/movable/stack.mjs b/sites/shared/components/workbench/pattern/movable/stack.mjs new file mode 100644 index 00000000000..3da5d3f856f --- /dev/null +++ b/sites/shared/components/workbench/pattern/movable/stack.mjs @@ -0,0 +1,264 @@ +/* + * This React component is a long way from perfect, but it's a start for + * handling custom layouts. + * + * There are a few reasons that (at least in my opinion) implementing this is non-trivial: + * + * 1) React re-render vs DOM updates + * + * For performance reasons, we can't re-render with React when the user drags a + * pattern part (or rotates it). It would kill performance. + * So, we don't re-render with React upon dragging/rotating, but instead manipulate + * the DOM directly. + * + * So far so good, but of course we don't want a pattern that's only correctly laid + * out in the DOM. We want to update the pattern gist so that the new layout is stored. + * For this, we re-render with React on the end of the drag (or rotate). + * + * Handling this balance between DOM updates and React re-renders is a first contributing + * factor to why this component is non-trivial + * + * 2) SVG vs DOM coordinates + * + * When we drag or rotate with the mouse, all the events are giving us coordinates of + * where the mouse is in the DOM. + * + * The layout uses coordinates from the embedded SVG which are completely different. + * + * We run `getScreenCTM().inverse()` on the svg element to pass to `matrixTransform` on a `DOMPointReadOnly` for dom to svg space conversions. + * + * 3) Part-level transforms + * + * All parts use their center as the transform-origin to simplify transforms, especially flipping and rotating. + * + * 4) Bounding box + * + * We use `getBoundingClientRect` rather than `getBBox` because it provides more data and factors in the transforms. + * We then use our `domToSvg` function to move the points back into the SVG space. + * + * + * Known issues + * - currently none + * + * I've sort of left it at this because I'm starting to wonder if we should perhaps re-think + * how custom layouts are supported in the core. And I would like to discuss this with the core team. + */ +import { useRef, useState, useEffect } from 'react' +import { generateStackTransform, getTransformedBounds } from '@freesewing/core' +import { Stack } from 'pkgs/react-components/src/pattern/stack.mjs' +import { getProps, angle } from 'pkgs/react-components/src/pattern/utils.mjs' +import { drag } from 'd3-drag' +import { select } from 'd3-selection' +import { Buttons } from './transform-buttons.mjs' +import get from 'lodash.get' + +export const MovableStack = ({ + stackName, + stack, + settings, + components, + t, + movable = true, + layout, + updateLayout, + showButtons, +}) => { + const stackExists = !movable || typeof layout?.move?.x !== 'undefined' + + // Use a ref for direct DOM manipulation + const stackRef = useRef(null) + const innerRef = useRef(null) + + // State variable to switch between moving or rotating the part + const [rotate, setRotate] = useState(false) + + // update the layout on mount + useEffect(() => { + // only update if there's a rendered part and it's not the pages or fabric part + if (stackRef.current && movable) { + updateStacklayout(false) + } + }, [stackRef, layout]) + + // Initialize drag handler + useEffect(() => { + // don't drag the pages + if (!movable || !stackExists) return + handleDrag(select(stackRef.current)) + }, [rotate, stackRef, layout]) + + // // Don't just assume this makes sense + if (!stackExists) return null + + if (!movable) return + + // These are kept as vars because re-rendering on drag would kill performance + // Managing the difference between re-render and direct DOM updates makes this + // whole thing a bit tricky to wrap your head around + let translateX = layout.move.x + let translateY = layout.move.y + let stackRotation = layout.rotate || 0 + let rotation = stackRotation + let flipX = !!layout.flipX + let flipY = !!layout.flipY + + const center = { + x: stack.topLeft.x + (stack.bottomRight.x - stack.topLeft.x) / 2, + y: stack.topLeft.y + (stack.bottomRight.y - stack.topLeft.y) / 2, + } + + /** get the delta rotation from the start of the drag event to now */ + const getRotation = (event) => + angle(center, event.subject) - angle(center, { x: event.x, y: event.y }) + + const setTransforms = () => { + // get the transform attributes + const transforms = generateStackTransform(translateX, translateY, rotation, flipX, flipY, stack) + + const me = select(stackRef.current) + me.attr('transform', transforms.join(' ')) + + return transforms + } + + let didDrag = false + const handleDrag = drag() + // subject allows us to save data from the start of the event to use throughout event handing + .subject(function (event) { + return rotate + ? // if we're rotating, the subject is the mouse position + { x: event.x, y: event.y } + : // if we're moving, the subject is the part's x,y coordinates + { x: translateX, y: translateY } + }) + .on('drag', function (event) { + if (!event.dx && !event.dy) return + + if (rotate) { + let newRotation = getRotation(event) + // shift key to snap the rotation + if (event.sourceEvent.shiftKey) { + newRotation = Math.ceil(newRotation / 15) * 15 + } + // reverse the rotation direction one time per flip. if we're flipped both directions, rotation will be positive again + if (flipX) newRotation *= -1 + if (flipY) newRotation *= -1 + + rotation = stackRotation + newRotation + } else { + translateX = event.x + translateY = event.y + } + + // a drag happened, so we should update the layout when we're done + didDrag = true + setTransforms() + }) + .on('end', function () { + // save to gist if anything actually changed + if (didDrag) updateStacklayout() + + didDrag = false + }) + + /** reset the part's transforms */ + const resetPart = () => { + rotation = 0 + flipX = 0 + flipY = 0 + updateStacklayout() + } + + /** toggle between dragging and rotating */ + const toggleDragRotate = () => { + // only respond if the part should be able to drag/rotate + if (!stackRef.current || !movable) { + return + } + + setRotate(!rotate) + } + + /** update the layout either locally or in the gist */ + const updateStacklayout = (history = true) => { + /** don't mess with what we don't lay out */ + if (!stackRef.current || !movable) return + + // set the transforms on the stack in order to calculate from the latest position + const transforms = setTransforms() + + // apply the transforms to the bounding box to get the new extents of the stack + const { tl, br } = getTransformedBounds(stack, transforms) + + // update it on the draft component + updateLayout( + stackName, + { + move: { + x: translateX, + y: translateY, + }, + rotate: rotation % 360, + flipX, + flipY, + tl, + br, + }, + history + ) + } + + /** Method to flip (mirror) the part along the X or Y axis */ + const flip = (axis) => { + if (axis === 'x') flipX = !flipX + else flipY = !flipY + updateStacklayout() + } + + /** method to rotate 90 degrees */ + const rotate90 = (direction = 1) => { + if (flipX) direction *= -1 + if (flipY) direction *= -1 + + rotation += 90 * direction + + updateStacklayout() + } + + const { Group, Part } = components + return ( + + + {[...stack.parts].map((part, key) => ( + + ))} + + {movable && ( + <> + + {showButtons ? ( + + ) : null} + + )} + + ) +} diff --git a/sites/shared/components/workbench/pattern/movable/transform-buttons.mjs b/sites/shared/components/workbench/pattern/movable/transform-buttons.mjs new file mode 100644 index 00000000000..84562e672a3 --- /dev/null +++ b/sites/shared/components/workbench/pattern/movable/transform-buttons.mjs @@ -0,0 +1,123 @@ +import { useTranslation } from 'next-i18next' +import { ClearIcon } from 'shared/components/icons.mjs' +import get from 'lodash.get' + +const Triangle = ({ transform = 'translate(0,0)', fill = 'currentColor' }) => ( + +) + +const Line = () => ( + +) + +const FlipIconInner = ({ x = 0, y = 0, rotate = 0, ...style }) => ( + + + + + + +) + +const RotateIconInner = ({ flipX = false }) => ( + +) + +const rectSize = 24 + +const Button = ({ onClickCb, transform, Icon, children }) => { + const _onClick = (event) => { + event.stopPropagation() + onClickCb(event) + } + + return ( + + + + {children} + + + ) +} + +export const ShowButtonsToggle = ({ gist, layoutSetType, updateGist }) => { + const { t } = useTranslation('workbench') + const path = ['_state', 'layout', layoutSetType, 'showButtons'] + const showButtons = get(gist, path, true) + const setShowButtons = () => updateGist(path, !showButtons) + + return ( + + ) +} + +/** buttons for manipulating the part */ +export const Buttons = ({ transform, flip, rotate, resetPart, rotate90 }) => { + const { t } = useTranslation('workbench') + return ( + + {rotate ? ( + + ) : ( + + )} + + + + + + + ) +} diff --git a/sites/shared/components/workbench/views/print/index.mjs b/sites/shared/components/workbench/views/print/index.mjs index 49c959fee9c..bd1de68a83c 100644 --- a/sites/shared/components/workbench/views/print/index.mjs +++ b/sites/shared/components/workbench/views/print/index.mjs @@ -2,26 +2,19 @@ import { useEffect, useState } from 'react' import { useTranslation } from 'next-i18next' // import { PrintLayoutSettings } from './settings.mjs' // import { Draft } from '../draft/index.mjs' -import { pagesPlugin } from 'shared/components/workbench/layout/plugin-layout-part.mjs' +import { pagesPlugin } from 'shared/plugins/plugin-layout-part.mjs' // import { // handleExport, // defaultPdfSettings, // } from 'shared/components/workbench/exporting/export-handler.mjs' // import { Popout } from 'shared/components/popout.mjs' import get from 'lodash.get' -import { PanZoomPattern as ShowPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs' +import { MovablePattern } from 'shared/components/workbench/pattern/movable/index.mjs' import { PrintMenu, ns as menuNs } from './menu.mjs' +import { defaultPrintSettings } from './config.mjs' const viewNs = ['print'] -export const ns = [...viewNs, ...menuNs] - -const defaultPdfSettings = { - size: 'a4', - orientation: 'portrait', - margin: 10, - coverPage: true, - cutlist: true, -} +export const ns = [...viewNs] export const PrintView = ({ design, @@ -35,27 +28,23 @@ export const PrintView = ({ account, DynamicDocs, }) => { - // disable xray - // useEffect(() => { - // if (props.gist?._state?.xray?.enabled) props.updateGist(['_state', 'xray', 'enabled'], false) - // }) - const { t } = useTranslation(viewNs) const [error, setError] = useState(false) + const defaultSettings = defaultPrintSettings(settings.units) // add the pages plugin to the draft const layoutSettings = { - ...defaultPdfSettings, - ...get(ui, ['layout', 'print', 'page']), + ...defaultSettings, + ...get(ui, ['print', 'page']), } pattern.use(pagesPlugin(layoutSettings)) - let patternProps + let renderProps try { // draft the pattern pattern.draft() - patternProps = pattern.getRenderProps() + renderProps = pattern.getRenderProps() } catch (err) { console.log(err) } @@ -80,7 +69,9 @@ export const PrintView = ({

{t('layoutThing', { thing: name }) + ': ' + t('forPrinting')}

- +