print layout renders and remembers changes
This commit is contained in:
Enoch Riese
parent
8dfc54e141
commit
2e2cbf70d2
6 changed files with 445 additions and 402 deletions
|
|
@ -1,13 +1,14 @@
|
|||
import Part from './part'
|
||||
import { getProps } from './utils'
|
||||
|
||||
const Stack = props => {
|
||||
const { stack, gist, app, updateGist, unsetGist, showInfo } = props
|
||||
const Stack = (props) => {
|
||||
const { stack, gist, updateGist, unsetGist, showInfo } = props
|
||||
|
||||
return (
|
||||
<g {...getProps(stack)}>
|
||||
{[...stack.parts].map((part) => (
|
||||
<Part {...{ app, gist, updateGist, unsetGist, showInfo }}
|
||||
<Part
|
||||
{...{ gist, updateGist, unsetGist, showInfo }}
|
||||
key={part.name}
|
||||
partName={part.name}
|
||||
part={part}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { SizeMe } from 'react-sizeme'
|
||||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
|
||||
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
|
||||
import Svg from './svg'
|
||||
import Defs from './defs'
|
||||
import Stack from './stack'
|
||||
import { forwardRef } from 'react'
|
||||
|
||||
/* What's with all the wrapping?
|
||||
*
|
||||
|
|
@ -25,25 +26,32 @@ import Stack from './stack'
|
|||
* Also still to see how this will work with SSR
|
||||
*/
|
||||
|
||||
const SvgWrapper = props => {
|
||||
const { patternProps=false, gist, app, updateGist, unsetGist, showInfo } = props
|
||||
const SvgWrapper = forwardRef((props, ref) => {
|
||||
const { patternProps = false, gist, updateGist, unsetGist, showInfo, viewBox } = props
|
||||
|
||||
if (!patternProps) return null
|
||||
console.log(props.children)
|
||||
|
||||
return <SizeMe>{({ size }) => (
|
||||
return (
|
||||
<SizeMe>
|
||||
{({ size }) => (
|
||||
<TransformWrapper
|
||||
minScale={0.1}
|
||||
centerZoomedOut={true}
|
||||
wheel={{ activationKeys: ['Control'] }}
|
||||
>
|
||||
<TransformComponent>
|
||||
<div style={{ width: size.width+'px', }}>
|
||||
<Svg {...patternProps} embed={gist.embed}>
|
||||
<div style={{ width: size.width + 'px' }}>
|
||||
<Svg {...patternProps} viewBox={viewBox} embed={gist.embed} ref={ref}>
|
||||
<Defs {...patternProps} />
|
||||
<style>{`:root { --pattern-scale: ${gist.scale || 1}} ${patternProps.svg.style}`}</style>
|
||||
<style>{`:root { --pattern-scale: ${gist.scale || 1}} ${
|
||||
patternProps.svg.style
|
||||
}`}</style>
|
||||
<g>
|
||||
{Object.keys(patternProps.stacks).map((stackName) => (
|
||||
<Stack {...{ app, gist, updateGist, unsetGist, showInfo, patternProps }}
|
||||
{props.children ||
|
||||
Object.keys(patternProps.stacks).map((stackName) => (
|
||||
<Stack
|
||||
{...{ gist, updateGist, unsetGist, showInfo, patternProps }}
|
||||
key={stackName}
|
||||
stackName={stackName}
|
||||
stack={patternProps.stacks[stackName]}
|
||||
|
|
@ -54,8 +62,9 @@ const SvgWrapper = props => {
|
|||
</div>
|
||||
</TransformComponent>
|
||||
</TransformWrapper>
|
||||
)}</SizeMe>
|
||||
}
|
||||
)}
|
||||
</SizeMe>
|
||||
)
|
||||
})
|
||||
|
||||
export default SvgWrapper
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,43 @@
|
|||
import { 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"
|
||||
import Stack from './part'
|
||||
import SvgWrapper from '../../draft/svg-wrapper'
|
||||
import { getProps } from '../../draft/utils'
|
||||
|
||||
const Draft = props => {
|
||||
const { draft, patternProps, gist, updateGist, app, bgProps={}, fitLayoutPart = false, layoutType="printingLayout"} = props
|
||||
const Draft = (props) => {
|
||||
const {
|
||||
draft,
|
||||
patternProps,
|
||||
gist,
|
||||
updateGist,
|
||||
app,
|
||||
bgProps = {},
|
||||
fitLayoutPart = false,
|
||||
layoutType = 'printingLayout',
|
||||
} = props
|
||||
|
||||
const svgRef = useRef(null);
|
||||
const svgRef = useRef(null)
|
||||
if (!patternProps) return null
|
||||
// keep a fresh copy of the layout because we might manipulate it without saving to the gist
|
||||
let layout = draft.settings.layout === true ? {
|
||||
let layout = draft.settings[0].layouts?.printingLayout || {
|
||||
...patternProps.autoLayout,
|
||||
width: patternProps.width,
|
||||
height: patternProps.height
|
||||
} : {...draft.settings.layout}
|
||||
|
||||
|
||||
height: patternProps.height,
|
||||
}
|
||||
|
||||
// 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.parts[name] = config
|
||||
newLayout.stacks[name] = config
|
||||
|
||||
// Pattern topLeft and bottomRight
|
||||
let topLeft = { x: 0, y: 0 }
|
||||
let bottomRight = { x: 0, y: 0 }
|
||||
for (const [pname, part] of Object.entries(patternProps.parts)) {
|
||||
for (const [pname, part] of Object.entries(patternProps.stacks)) {
|
||||
if (pname == props.layoutPart && !fitLayoutPart) continue
|
||||
let partLayout = newLayout.parts[pname];
|
||||
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) {
|
||||
|
|
@ -37,7 +45,7 @@ const Draft = props => {
|
|||
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);
|
||||
bottomRight.y = Math.max(bottomRight.y, partLayout.br.y)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,52 +62,41 @@ const Draft = props => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// We need to make sure the `pages` part is at the bottom of the pile
|
||||
// so we can drag-drop all parts on top of it.
|
||||
// Bottom in SVG means we need to draw it first
|
||||
const partList = Object.keys(patternProps.parts)
|
||||
const viewBox = layout.topLeft
|
||||
? `${layout.topLeft.x} ${layout.topLeft.y} ${layout.width} ${layout.height}`
|
||||
: false
|
||||
|
||||
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={{height: '90vh'}}
|
||||
>
|
||||
<Defs {...patternProps} />
|
||||
<style>{`:root { --pattern-scale: ${gist.scale || 1}}`}</style>
|
||||
<g>
|
||||
<rect x="0" y="0" width={layout.width} height={layout.height} {...bgProps} />
|
||||
{[
|
||||
partList.filter(name => name === props.layoutPart),
|
||||
partList.filter(name => name !== props.layoutPart),
|
||||
].map(list => list.map(name => (
|
||||
<Part {...{
|
||||
key:name,
|
||||
partName: name,
|
||||
part: patternProps.parts[name],
|
||||
const stacks = []
|
||||
for (var stackName in patternProps.stacks) {
|
||||
let stack = patternProps.stacks[stackName]
|
||||
|
||||
const stackPart = (
|
||||
<Stack
|
||||
{...{
|
||||
key: stackName,
|
||||
stackName,
|
||||
stack,
|
||||
layout,
|
||||
app,
|
||||
gist,
|
||||
updateLayout,
|
||||
isLayoutPart: name === props.layoutPart
|
||||
}}/>
|
||||
)))}
|
||||
</g>
|
||||
</Svg>
|
||||
</TransformComponent>
|
||||
</TransformWrapper>
|
||||
</div>
|
||||
isLayoutPart: stackName === props.layoutPart,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
stacks[stack === props.layoutPart ? 'unshift' : 'push'](stackPart)
|
||||
}
|
||||
|
||||
return (
|
||||
<SvgWrapper {...{ patternProps, gist, viewBox }} ref={svgRef}>
|
||||
<rect x="0" y="0" width={layout.width} height={layout.height} {...bgProps} />
|
||||
{stacks}
|
||||
</SvgWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default Draft
|
||||
|
||||
|
|
|
|||
|
|
@ -43,25 +43,24 @@
|
|||
* 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 {PartInner} from '../../draft/part'
|
||||
import { generatePartTransform } from '@freesewing/core'
|
||||
import Part from '../../draft/part'
|
||||
import { generateStackTransform } from '@freesewing/core'
|
||||
import { getProps, angle } from '../../draft/utils'
|
||||
import { drag } from 'd3-drag'
|
||||
import { select } from 'd3-selection'
|
||||
import { useRef, useState, useEffect } from 'react'
|
||||
import Buttons from './buttons'
|
||||
|
||||
const Stack = (props) => {
|
||||
const { layout, stack, stackName, gist } = props
|
||||
|
||||
const Part = props => {
|
||||
const { layout, part, partName} = props
|
||||
const stackLayout = layout.stacks?.[stackName]
|
||||
|
||||
const partLayout = layout.parts?.[partName]
|
||||
|
||||
// Don't just assume this makes sense
|
||||
if (typeof partLayout?.move?.x === 'undefined') return null
|
||||
// // Don't just assume this makes sense
|
||||
if (typeof stackLayout?.move?.x === 'undefined') return null
|
||||
|
||||
// Use a ref for direct DOM manipulation
|
||||
const partRef = useRef(null)
|
||||
const stackRef = useRef(null)
|
||||
const centerRef = useRef(null)
|
||||
const innerRef = useRef(null)
|
||||
|
||||
|
|
@ -71,61 +70,62 @@ const Part = props => {
|
|||
// update the layout on mount
|
||||
useEffect(() => {
|
||||
// only update if there's a rendered part and it's not the pages or fabric part
|
||||
if (partRef.current && !props.isLayoutPart) {
|
||||
if (stackRef.current && !props.isLayoutPart) {
|
||||
updateLayout(false)
|
||||
}
|
||||
}, [partRef, partLayout])
|
||||
}, [stackRef, stackLayout])
|
||||
|
||||
// Initialize drag handler
|
||||
useEffect(() => {
|
||||
// don't drag the pages
|
||||
if (props.isLayoutPart) return
|
||||
handleDrag(select(partRef.current))
|
||||
}, [rotate, partRef, partLayout])
|
||||
handleDrag(select(stackRef.current))
|
||||
}, [rotate, stackRef, stackLayout])
|
||||
|
||||
// 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 = partLayout.move.x
|
||||
let translateY = partLayout.move.y
|
||||
let partRotation = partLayout.rotate || 0;
|
||||
let rotation = partRotation;
|
||||
let flipX = !!partLayout.flipX
|
||||
let flipY = !!partLayout.flipY
|
||||
let translateX = stackLayout.move.x
|
||||
let translateY = stackLayout.move.y
|
||||
let stackRotation = stackLayout.rotate || 0
|
||||
let rotation = stackRotation
|
||||
let flipX = !!stackLayout.flipX
|
||||
let flipY = !!stackLayout.flipY
|
||||
|
||||
const center = {
|
||||
x: part.topLeft.x + (part.bottomRight.x - part.topLeft.x)/2,
|
||||
y: part.topLeft.y + (part.bottomRight.y - part.topLeft.y)/2,
|
||||
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 getRotation = (event) =>
|
||||
angle(center, event.subject) - angle(center, { x: event.x, y: event.y })
|
||||
|
||||
const setTransforms = () => {
|
||||
// get the transform attributes
|
||||
const transforms = generatePartTransform(translateX, translateY, rotation, flipX, flipY, part);
|
||||
const transforms = generateStackTransform(translateX, translateY, rotation, flipX, flipY, stack)
|
||||
|
||||
const me = select(partRef.current);
|
||||
const me = select(stackRef.current)
|
||||
for (var t in transforms) {
|
||||
me.attr(t, transforms[t])
|
||||
}
|
||||
}
|
||||
|
||||
let didDrag = false;
|
||||
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
|
||||
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);
|
||||
let newRotation = getRotation(event)
|
||||
// shift key to snap the rotation
|
||||
if (event.sourceEvent.shiftKey) {
|
||||
newRotation = Math.ceil(newRotation / 15) * 15
|
||||
|
|
@ -134,15 +134,14 @@ const Part = props => {
|
|||
if (flipX) newRotation *= -1
|
||||
if (flipY) newRotation *= -1
|
||||
|
||||
rotation = partRotation + newRotation
|
||||
}
|
||||
else {
|
||||
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;
|
||||
didDrag = true
|
||||
setTransforms()
|
||||
})
|
||||
.on('end', function (event) {
|
||||
|
|
@ -163,7 +162,9 @@ const Part = props => {
|
|||
/** toggle between dragging and rotating */
|
||||
const toggleDragRotate = () => {
|
||||
// only respond if the part should be able to drag/rotate
|
||||
if (!partRef.current || props.isLayoutPart) {return}
|
||||
if (!stackRef.current || props.isLayoutPart) {
|
||||
return
|
||||
}
|
||||
|
||||
setRotate(!rotate)
|
||||
}
|
||||
|
|
@ -171,14 +172,14 @@ const Part = props => {
|
|||
/** update the layout either locally or in the gist */
|
||||
const updateLayout = (history = true) => {
|
||||
/** don't mess with what we don't lay out */
|
||||
if (!partRef.current || props.isLayoutPart) return
|
||||
if (!stackRef.current || props.isLayoutPart) return
|
||||
|
||||
// set the transforms on the part in order to calculate from the latest position
|
||||
setTransforms()
|
||||
|
||||
// get the bounding box and the svg's current transform matrix
|
||||
const partRect = innerRef.current.getBoundingClientRect();
|
||||
const matrix = innerRef.current.ownerSVGElement.getScreenCTM().inverse();
|
||||
const stackRect = innerRef.current.getBoundingClientRect()
|
||||
const matrix = innerRef.current.ownerSVGElement.getScreenCTM().inverse()
|
||||
|
||||
// a function to convert dom space to svg space
|
||||
const domToSvg = (point) => {
|
||||
|
|
@ -187,11 +188,13 @@ const Part = props => {
|
|||
}
|
||||
|
||||
// include the new top left and bottom right to ease calculating the pattern width and height
|
||||
const tl = domToSvg({x: partRect.left, y: partRect.top});
|
||||
const br = domToSvg({x: partRect.right, y: props.isLayoutPart ? 0 : partRect.bottom});
|
||||
const tl = domToSvg({ x: stackRect.left, y: stackRect.top })
|
||||
const br = domToSvg({ x: stackRect.right, y: props.isLayoutPart ? 0 : stackRect.bottom })
|
||||
|
||||
// update it on the draft component
|
||||
props.updateLayout(partName, {
|
||||
props.updateLayout(
|
||||
stackName,
|
||||
{
|
||||
move: {
|
||||
x: translateX,
|
||||
y: translateY,
|
||||
|
|
@ -200,12 +203,14 @@ const Part = props => {
|
|||
flipX,
|
||||
flipY,
|
||||
tl,
|
||||
br
|
||||
}, history)
|
||||
br,
|
||||
},
|
||||
history
|
||||
)
|
||||
}
|
||||
|
||||
/** Method to flip (mirror) the part along the X or Y axis */
|
||||
const flip = axis => {
|
||||
const flip = (axis) => {
|
||||
if (axis === 'x') flipX = !flipX
|
||||
else flipY = !flipY
|
||||
updateLayout()
|
||||
|
|
@ -222,39 +227,42 @@ const Part = props => {
|
|||
}
|
||||
|
||||
// don't render if the part is empty
|
||||
if (Object.keys(part.snippets).length === 0 && Object.keys(part.paths).length === 0) return null;
|
||||
// if (Object.keys(part.snippets).length === 0 && Object.keys(part.paths).length === 0) return null;
|
||||
|
||||
return (
|
||||
<g
|
||||
id={`part-${partName}`}
|
||||
ref={partRef}
|
||||
{...getProps(part)}
|
||||
>
|
||||
<PartInner {...props} ref={innerRef}/>
|
||||
{!props.isLayoutPart && <>
|
||||
<g id={`stack-${stackName}`} {...getProps(stack)} ref={stackRef}>
|
||||
<g id={`stack-inner-${stackName}`} ref={innerRef}>
|
||||
{stack.parts.map((part) => (
|
||||
<Part {...{ part, partName: part.name, gist }} key={part.name}></Part>
|
||||
))}
|
||||
</g>
|
||||
{!props.isLayoutPart && (
|
||||
<>
|
||||
<text x={center.x} y={center.y} ref={centerRef} />
|
||||
<rect
|
||||
ref={partRef}
|
||||
x={part.topLeft.x}
|
||||
y={part.topLeft.y}
|
||||
width={part.width}
|
||||
height={part.height}
|
||||
x={stack.topLeft.x}
|
||||
y={stack.topLeft.y}
|
||||
width={stack.width}
|
||||
height={stack.height}
|
||||
className={`layout-rect ${rotate ? 'rotate' : 'move'}`}
|
||||
id={`${partName}-layout-rect`}
|
||||
id={`${stackName}-layout-rect`}
|
||||
onClick={toggleDragRotate}
|
||||
/>
|
||||
<Buttons
|
||||
transform={`translate(${center.x}, ${center.y}) rotate(${-rotation}) scale(${flipX ? -1 : 1},${flipY ? -1 : 1})`}
|
||||
transform={`translate(${center.x}, ${center.y}) rotate(${-rotation}) scale(${
|
||||
flipX ? -1 : 1
|
||||
},${flipY ? -1 : 1})`}
|
||||
flip={flip}
|
||||
rotate={rotate}
|
||||
setRotate={setRotate}
|
||||
resetPart={resetPart}
|
||||
rotate90={rotate90}
|
||||
partName={partName}
|
||||
partName={stackName}
|
||||
/>
|
||||
</>}
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
export default Part
|
||||
export default Stack
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ import { useTranslation } from 'next-i18next'
|
|||
import Settings from './settings'
|
||||
import Draft from '../draft/index'
|
||||
import { pagesPlugin } from './plugin'
|
||||
import {handleExport, defaultPdfSettings} from 'shared/components/workbench/exporting/export-handler'
|
||||
import {
|
||||
handleExport,
|
||||
defaultPdfSettings,
|
||||
} from 'shared/components/workbench/exporting/export-handler'
|
||||
import Popout from 'shared/components/popout'
|
||||
|
||||
const PrintLayout = props => {
|
||||
const PrintLayout = (props) => {
|
||||
// disable xray
|
||||
useEffect(() => {
|
||||
if (props.gist?._state?.xray?.enabled) props.updateGist(
|
||||
['_state', 'xray', 'enabled'],
|
||||
false
|
||||
)
|
||||
if (props.gist?._state?.xray?.enabled) props.updateGist(['_state', 'xray', 'enabled'], false)
|
||||
}, [])
|
||||
|
||||
const { t } = useTranslation(['workbench'])
|
||||
|
|
@ -23,45 +23,44 @@ const PrintLayout = props => {
|
|||
// add the pages plugin to the draft
|
||||
const layoutSettings = {
|
||||
...defaultPdfSettings,
|
||||
...props.gist?._state?.layout?.forPrinting?.page
|
||||
...props.gist?._state?.layout?.forPrinting?.page,
|
||||
}
|
||||
draft.use(pagesPlugin(
|
||||
layoutSettings
|
||||
))
|
||||
draft.use(pagesPlugin(layoutSettings))
|
||||
|
||||
let patternProps
|
||||
try {
|
||||
// draft the pattern
|
||||
draft.draft()
|
||||
patternProps = draft.getRenderProps()
|
||||
console.log(patternProps)
|
||||
} catch (err) {
|
||||
console.log(err, props.gist)
|
||||
}
|
||||
const bgProps = { fill: "url(#page)" }
|
||||
const bgProps = { fill: 'url(#page)' }
|
||||
|
||||
const exportIt = () => {
|
||||
setError(false)
|
||||
handleExport('pdf', props.gist, props.design, t, props.app, (e) => setError(false), (e) => setError(true))
|
||||
handleExport(
|
||||
'pdf',
|
||||
props.gist,
|
||||
props.design,
|
||||
t,
|
||||
props.app,
|
||||
(e) => setError(false),
|
||||
(e) => setError(true)
|
||||
)
|
||||
}
|
||||
|
||||
let name = props.design.designConfig.data.name
|
||||
name = name.replace('@freesewing/', '')
|
||||
return (
|
||||
<div>
|
||||
<h2 className="capitalize">
|
||||
{
|
||||
t('layoutThing', { thing: name })
|
||||
+ ': '
|
||||
+ t('forPrinting')
|
||||
}
|
||||
</h2>
|
||||
<h2 className="capitalize">{t('layoutThing', { thing: name }) + ': ' + t('forPrinting')}</h2>
|
||||
<div className="m-4">
|
||||
<Settings {...{ ...props, exportIt, layoutSettings }} draft={draft} />
|
||||
{error && (
|
||||
<Popout warning compact>
|
||||
<span className="font-bold mr-4 uppercase text-sm">
|
||||
{t('error')}:
|
||||
</span>
|
||||
<span className="font-bold mr-4 uppercase text-sm">{t('error')}:</span>
|
||||
{t('somethingWentWrong')}
|
||||
</Popout>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -19,25 +19,28 @@ const indexStr = (i) => {
|
|||
let quotient = i / 26
|
||||
let result
|
||||
|
||||
if (i <= 26) {return indexLetter(i)} //Number is within single digit bounds of our encoding letter alphabet
|
||||
if (i <= 26) {
|
||||
return indexLetter(i)
|
||||
} //Number is within single digit bounds of our encoding letter alphabet
|
||||
|
||||
if (quotient >= 1) {
|
||||
//This number was bigger than the alphabet, recursively perform this function until we're done
|
||||
if (index === 0) {quotient--} //Accounts for the edge case of the last letter in the dictionary string
|
||||
if (index === 0) {
|
||||
quotient--
|
||||
} //Accounts for the edge case of the last letter in the dictionary string
|
||||
result = indexStr(quotient)
|
||||
}
|
||||
|
||||
if (index === 0) {index = 26} //Accounts for the edge case of the final letter; avoids getting an empty string
|
||||
if (index === 0) {
|
||||
index = 26
|
||||
} //Accounts for the edge case of the final letter; avoids getting an empty string
|
||||
|
||||
return result + indexLetter(index)
|
||||
}
|
||||
/**
|
||||
* A plugin to add printer pages
|
||||
* */
|
||||
export const pagesPlugin = ({
|
||||
size='a4',
|
||||
...settings
|
||||
}) => {
|
||||
export const pagesPlugin = ({ size = 'a4', ...settings }) => {
|
||||
const ls = settings.orientation === 'landscape'
|
||||
let sheetHeight = sizes[size][ls ? 0 : 1]
|
||||
let sheetWidth = sizes[size][ls ? 1 : 0]
|
||||
|
|
@ -56,10 +59,10 @@ const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
|||
|
||||
// get the position of the part
|
||||
let partLayout = layout.parts[p]
|
||||
let partMinX = (partLayout.tl?.x || (partLayout.move.x + part.topLeft.x))
|
||||
let partMinY = (partLayout.tl?.y || (partLayout.move.y + part.topLeft.y))
|
||||
let partMaxX = (partLayout.br?.x || (partMinX + part.width))
|
||||
let partMaxY = (partLayout.br?.y || (partMinY + part.height))
|
||||
let partMinX = partLayout.tl?.x || partLayout.move.x + part.topLeft.x
|
||||
let partMinY = partLayout.tl?.y || partLayout.move.y + part.topLeft.y
|
||||
let partMaxX = partLayout.br?.x || partMinX + part.width
|
||||
let partMaxY = partLayout.br?.y || partMinY + part.height
|
||||
|
||||
// check if the part overlaps the page extents
|
||||
if (
|
||||
|
|
@ -73,14 +76,15 @@ const doScanForBlanks = (parts, layout, x, y, w, h) => {
|
|||
partMaxY > y
|
||||
) {
|
||||
// the part has content inside the page
|
||||
hasContent = true;
|
||||
hasContent = true
|
||||
// so we stop looking
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return hasContent
|
||||
}
|
||||
|
||||
/**
|
||||
* The base plugin for adding a layout helper part like pages or fabric
|
||||
* sheetWidth: the width of the helper part
|
||||
|
|
@ -93,58 +97,72 @@ const basePlugin = ({
|
|||
sheetWidth,
|
||||
sheetHeight,
|
||||
boundary = false,
|
||||
partName="pages",
|
||||
partName = 'pages',
|
||||
responsiveColumns = true,
|
||||
printStyle = false,
|
||||
scanForBlanks = true,
|
||||
renderBlanks = true,
|
||||
setPatternSize=false
|
||||
setPatternSize = false,
|
||||
}) => ({
|
||||
name,
|
||||
version,
|
||||
hooks: {
|
||||
postLayout: function(pattern) {
|
||||
// Add part
|
||||
pattern.parts[partName] = pattern.Part(partName)
|
||||
// Keep part out of layout
|
||||
pattern.parts[partName].layout = false
|
||||
preDraft: function (pattern) {
|
||||
// But add the part to the autoLayout property
|
||||
pattern.autoLayout.parts[partName] = {
|
||||
move: { x: 0, y: 0 }
|
||||
}
|
||||
// pattern.autoLayout.parts[partName] = {
|
||||
// move: { x: 0, y: 0 }
|
||||
// }
|
||||
|
||||
// TODO migrate this to v3 parts adding
|
||||
// Add pages
|
||||
const { macro } = pattern.parts[partName].shorthand()
|
||||
// const { macro } = pattern.config.parts[partName].shorthand()
|
||||
let { height, width } = pattern
|
||||
if (!responsiveColumns) width = sheetWidth;
|
||||
if (!responsiveColumns) width = sheetWidth
|
||||
if (pattern.settings.layout?.topLeft) {
|
||||
height += pattern.settings.layout.topLeft.y
|
||||
responsiveColumns && (width += pattern.settings.layout.topLeft.x)
|
||||
}
|
||||
|
||||
const layout = typeof pattern.settings.layout === 'object' ? pattern.settings.layout : pattern.autoLayout
|
||||
// Add part
|
||||
pattern.addPart({
|
||||
name: partName,
|
||||
layout: false,
|
||||
draft: (shorthand) => {
|
||||
pluginMacros.addPages(
|
||||
{ size: [sheetHeight, sheetWidth], height, width, layout },
|
||||
shorthand
|
||||
)
|
||||
return shorthand.part
|
||||
},
|
||||
})
|
||||
pattern.getConfig()
|
||||
console.log(pattern.config, pattern.designConfig)
|
||||
|
||||
macro('addPages', { size: [sheetHeight,sheetWidth, ], height, width, layout })
|
||||
const layout =
|
||||
typeof pattern.settings.layout === 'object' ? pattern.settings.layout : pattern.autoLayout
|
||||
|
||||
if (boundary) pattern.parts[partName].boundary();
|
||||
// macro('addPages', { size: [sheetHeight,sheetWidth, ], height, width, layout })
|
||||
|
||||
if (boundary) pattern.parts[partName].boundary()
|
||||
if (setPatternSize) {
|
||||
pattern.width = sheetWidth * pattern.parts[partName].pages.cols
|
||||
pattern.height = sheetHeight * pattern.parts[partName].pages.rows
|
||||
}
|
||||
}
|
||||
},
|
||||
macros: {
|
||||
},
|
||||
})
|
||||
|
||||
const pluginMacros = {
|
||||
/** draft the pages */
|
||||
addPages: function(so) {
|
||||
addPages: function (so, shorthand) {
|
||||
const [h, w] = so.size
|
||||
const cols = Math.ceil(so.width / w)
|
||||
const rows = Math.ceil(so.height / h)
|
||||
const { points, Point, paths, Path, macro } = this.shorthand()
|
||||
const { points, Point, paths, Path, macro } = shorthand
|
||||
let count = 0
|
||||
let withContent = {}
|
||||
// get the layout from the pattern
|
||||
const {layout} = so;
|
||||
const { layout } = so
|
||||
for (let row = 0; row < rows; row++) {
|
||||
let y = row * h
|
||||
withContent[row] = {}
|
||||
|
|
@ -180,25 +198,27 @@ const basePlugin = ({
|
|||
.close()
|
||||
|
||||
if (!printStyle) {
|
||||
paths[pageName].attr('class', 'fill-fabric')
|
||||
.attr('style', `stroke-opacity: 0; fill-opacity: ${(col+row)%2===0 ? 0.03 : 0.09};`)
|
||||
}
|
||||
else {
|
||||
paths[pageName]
|
||||
.attr('class', 'fill-fabric')
|
||||
.attr(
|
||||
'style',
|
||||
`stroke-opacity: 0; fill-opacity: ${(col + row) % 2 === 0 ? 0.03 : 0.09};`
|
||||
)
|
||||
} else {
|
||||
paths[pageName].attr('class', 'interfacing stroke-xs')
|
||||
// add markers and rulers
|
||||
macro('addPageMarkers', {row, col, pageName, withContent})
|
||||
macro('addRuler', {xAxis: true, pageName})
|
||||
macro('addRuler', {xAxis: false, pageName})
|
||||
pluginMacros.addPageMarkers({ row, col, pageName, withContent }, shorthand)
|
||||
pluginMacros.addRuler({ xAxis: true, pageName }, shorthand)
|
||||
pluginMacros.addRuler({ xAxis: false, pageName }, shorthand)
|
||||
}
|
||||
}
|
||||
}
|
||||
// Store page count in part
|
||||
this.pages = { cols, rows, count, withContent, width: w, height: h}
|
||||
|
||||
shorthand.part.pages = { cols, rows, count, withContent, width: w, height: h }
|
||||
},
|
||||
/** add a ruler to the top left corner of the page */
|
||||
addRuler({xAxis, pageName}) {
|
||||
const { points, paths, Path } = this.shorthand()
|
||||
addRuler({ xAxis, pageName }, shorthand) {
|
||||
const { points, paths, Path } = shorthand
|
||||
// arbitrary number of units for the ruler
|
||||
const rulerLength = 2
|
||||
const isMetric = this.context.settings.units === 'metric'
|
||||
|
|
@ -211,7 +231,8 @@ const basePlugin = ({
|
|||
const endPoint = [endPointDist[xAxis ? 0 : 1], endPointDist[xAxis ? 1 : 0]]
|
||||
points[`${rulerName}-ruler-end`] = points[`${pageName}-tl`].translate(endPoint[0], endPoint[1])
|
||||
// also make a tick for the end of the ruler
|
||||
points[`${rulerName}-ruler-tick`] = points[`${rulerName}-ruler-end`].translate(xAxis ? 0 : 3, xAxis ? 3 : 0)
|
||||
points[`${rulerName}-ruler-tick`] = points[`${rulerName}-ruler-end`]
|
||||
.translate(xAxis ? 0 : 3, xAxis ? 3 : 0)
|
||||
// add a label to it
|
||||
.attr('data-text', rulerLength + (isMetric ? 'cm' : '"'))
|
||||
// space the text properly from the end of the line
|
||||
|
|
@ -232,17 +253,23 @@ const basePlugin = ({
|
|||
// we're going to go by fraction, so we want to do this up to 1
|
||||
for (var d = division; d < 1; d += division) {
|
||||
// make a start point
|
||||
points[`${rulerName}-ruler-${d}-end`] = points[`${pageName}-tl`].shiftFractionTowards(points[`${rulerName}-ruler-end`], d)
|
||||
points[`${rulerName}-ruler-${d}-end`] = points[`${pageName}-tl`].shiftFractionTowards(
|
||||
points[`${rulerName}-ruler-end`],
|
||||
d
|
||||
)
|
||||
|
||||
// base tick size on whether this is a major interval or a minor one
|
||||
let tick = 1;
|
||||
let tick = 1
|
||||
// if this tick indicates a whole unit, extra long
|
||||
if (d.toFixed(3) % (1 / rulerLength) === 0) tick = 3
|
||||
// if this tick indicates half a unit, long
|
||||
else if (d.toFixed(3) % (0.5 / rulerLength) === 0) tick = 2
|
||||
|
||||
// make a point for the end of the tick
|
||||
points[`${rulerName}-ruler-${d}-tick`] = points[`${rulerName}-ruler-${d}-end`].translate(xAxis ? 0 : tick, xAxis ? tick : 0)
|
||||
points[`${rulerName}-ruler-${d}-tick`] = points[`${rulerName}-ruler-${d}-end`].translate(
|
||||
xAxis ? 0 : tick,
|
||||
xAxis ? tick : 0
|
||||
)
|
||||
|
||||
// add the whole set to the ruler path
|
||||
paths[`${rulerName}-ruler`]
|
||||
|
|
@ -257,21 +284,23 @@ const basePlugin = ({
|
|||
.line(points[`${rulerName}-ruler-tick`])
|
||||
},
|
||||
/** add page markers to the given page */
|
||||
addPageMarkers({row, col, pageName, withContent}) {
|
||||
const {macro, points} = this.shorthand()
|
||||
addPageMarkers({ row, col, pageName, withContent }, shorthand) {
|
||||
const { macro, points } = shorthand
|
||||
// these markers are placed on the top and left of the page,
|
||||
// so skip markers for the top row or leftmost column
|
||||
if (row !== 0 && withContent[row-1][col]) macro('addPageMarker', {
|
||||
if (row !== 0 && withContent[row - 1][col])
|
||||
macro('addPageMarker', {
|
||||
along: [points[`${pageName}-tl`], points[`${pageName}-tr`]],
|
||||
label: '' + row,
|
||||
isRow: true,
|
||||
pageName
|
||||
pageName,
|
||||
})
|
||||
if (col !== 0 && withContent[row][col-1]) macro('addPageMarker', {
|
||||
if (col !== 0 && withContent[row][col - 1])
|
||||
macro('addPageMarker', {
|
||||
along: [points[`${pageName}-tl`], points[`${pageName}-bl`]],
|
||||
label: indexStr(col),
|
||||
isRow: false,
|
||||
pageName
|
||||
pageName,
|
||||
})
|
||||
},
|
||||
/** add a page marker for either the row of the column */
|
||||
|
|
@ -280,7 +309,8 @@ const basePlugin = ({
|
|||
const markerName = `${pageName}-${isRow ? 'row' : 'col'}-marker`
|
||||
|
||||
// get a point on the center of the appropriate side
|
||||
points[`${markerName}-center`] = along[0].shiftFractionTowards(along[1], 0.5)
|
||||
points[`${markerName}-center`] = along[0]
|
||||
.shiftFractionTowards(along[1], 0.5)
|
||||
// add the label to it
|
||||
.attr('data-text', label)
|
||||
.attr('data-text-class', 'text-sm center baseline-center bold')
|
||||
|
|
@ -303,6 +333,5 @@ const basePlugin = ({
|
|||
.attr('class', 'fill-interfacing interfacing')
|
||||
// give it an explicit ID in case we need to hide it later
|
||||
.attr('id', markerName)
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue