render pageless grid on pdf exports if pageless is on
This commit is contained in:
parent
4bdbddb3d6
commit
e1f7de0209
9 changed files with 129 additions and 115 deletions
|
@ -1,4 +1,4 @@
|
|||
import {forwardRef} from 'react'
|
||||
import { forwardRef } from 'react'
|
||||
import Path from '../path'
|
||||
import Point from '../point'
|
||||
import Snippet from '../snippet'
|
||||
|
@ -17,11 +17,11 @@ const partInfo = (props) => (
|
|||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Width</KeyTd>
|
||||
<ValTd>{round(props.part.width,2)}mm</ValTd>
|
||||
<ValTd>{round(props.part.width, 2)}mm</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Height</KeyTd>
|
||||
<ValTd>{round(props.part.height,2)}mm</ValTd>
|
||||
<ValTd>{round(props.part.height, 2)}mm</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Top Left</KeyTd>
|
||||
|
@ -33,116 +33,124 @@ const partInfo = (props) => (
|
|||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Attributes</KeyTd>
|
||||
<ValTd><Attributes list={props.part.attributes.list} /></ValTd>
|
||||
<ValTd>
|
||||
<Attributes list={props.part.attributes.list} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="flex flex-row flex-wrap gap-2 mt-4">
|
||||
{props.gist?.only && props.gist.only.length > 0
|
||||
? (
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => props.unsetGist(['only'])}
|
||||
>Show all parts</button>
|
||||
{props.gist?.only && props.gist.only.length > 0 ? (
|
||||
<button className="btn btn-primary" onClick={() => props.unsetGist(['only'])}>
|
||||
Show all parts
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => props.updateGist(['only'], [props.partName])}
|
||||
>Show only this part</button>
|
||||
>
|
||||
Show only this part
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={() => console.log(props.part)}
|
||||
>console.log(part)</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={() => console.table(props.part.points)}
|
||||
>console.table(part.points)</button>
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={() => console.table(props.part.paths)}
|
||||
>console.table(part.paths)</button>
|
||||
<button className="btn btn-success" onClick={() => console.log(props.part)}>
|
||||
console.log(part)
|
||||
</button>
|
||||
<button className="btn btn-success" onClick={() => console.table(props.part.points)}>
|
||||
console.table(part.points)
|
||||
</button>
|
||||
<button className="btn btn-success" onClick={() => console.table(props.part.paths)}>
|
||||
console.table(part.paths)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const XrayPart = props => {
|
||||
const XrayPart = (props) => {
|
||||
const { topLeft, bottomRight } = props.part
|
||||
|
||||
return (
|
||||
<g>
|
||||
<path d={`
|
||||
<path
|
||||
d={`
|
||||
M ${topLeft.x} ${topLeft.y}
|
||||
L ${topLeft.x} ${bottomRight.y}
|
||||
L ${bottomRight.x} ${bottomRight.y}
|
||||
L ${bottomRight.x} ${topLeft.y}
|
||||
z
|
||||
`} className={`peer stroke-note lashed opacity-30 hover:opacity-90 fill-fabric hover:cursor-pointer hover:stroke-mark`}
|
||||
style={{ fillOpacity: 0}}
|
||||
onClick={(evt) => { evt.stopPropagation(); props.showInfo(partInfo(props)) }}
|
||||
`}
|
||||
className={`peer stroke-note lashed opacity-30 hover:opacity-90 fill-fabric hover:cursor-pointer hover:stroke-mark`}
|
||||
style={{ fillOpacity: 0 }}
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
props.showInfo(partInfo(props))
|
||||
}}
|
||||
/>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
export const PartInner = forwardRef((props, ref) => {
|
||||
const { partName, part, gist } = props
|
||||
const { partName, part, gist, skipGrid } = 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 ref={ref}>
|
||||
{Grid}
|
||||
{
|
||||
gist._state?.xray?.enabled &&
|
||||
<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}
|
||||
const Grid =
|
||||
gist.paperless && !skipGrid ? (
|
||||
<rect
|
||||
x={part.topLeft.x}
|
||||
y={part.topLeft.y}
|
||||
width={part.width}
|
||||
height={part.height}
|
||||
className="grid"
|
||||
fill={'url(#grid-' + partName + ')'}
|
||||
/>
|
||||
))}
|
||||
{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}
|
||||
/>
|
||||
))}
|
||||
</g>)
|
||||
})
|
||||
|
||||
const Part = props => {
|
||||
const { partName, part} = props
|
||||
) : null
|
||||
|
||||
return (
|
||||
<g {...getProps(part)} id={`${part.context.settings.idPrefix || ''}part-${partName}`} className={part.context.settings.idPrefix || ''}>
|
||||
<PartInner {...props}/>
|
||||
</g>
|
||||
<g ref={ref}>
|
||||
{Grid}
|
||||
{gist._state?.xray?.enabled && <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}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
)
|
||||
})
|
||||
|
||||
const Part = (props) => {
|
||||
const { partName, part } = props
|
||||
|
||||
return (
|
||||
<g
|
||||
{...getProps(part)}
|
||||
id={`${part.context.settings.idPrefix || ''}part-${partName}`}
|
||||
className={part.context.settings.idPrefix || ''}
|
||||
>
|
||||
<PartInner {...props} />
|
||||
</g>
|
||||
)
|
||||
}
|
||||
/*
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue