81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
import { BaseBoxShapeUtil, TLBaseShape, TLResizeInfo} from "@tldraw/tldraw"
|
||
|
||
export type IMycrozineTemplateShape = TLBaseShape<
|
||
"MycrozineTemplate",
|
||
{
|
||
w: number
|
||
h: number
|
||
}
|
||
>
|
||
|
||
export class MycrozineTemplateShape extends BaseBoxShapeUtil<IMycrozineTemplateShape> {
|
||
static override type = "MycrozineTemplate"
|
||
|
||
getDefaultProps(): IMycrozineTemplateShape["props"] {
|
||
// 8.5" × 11" at 300 DPI = 2550 × 3300 pixels
|
||
const props = {
|
||
w: 2550,
|
||
h: 3300,
|
||
}
|
||
//console.log('MycrozineTemplate - Default props:', props)
|
||
return props
|
||
}
|
||
|
||
indicator(shape: IMycrozineTemplateShape) {
|
||
return (
|
||
<g>
|
||
<rect x={0} y={0} width={shape.props.w} height={shape.props.h} />
|
||
</g>
|
||
)
|
||
}
|
||
|
||
containerStyle = {
|
||
position: 'relative' as const,
|
||
backgroundColor: 'transparent',
|
||
border: '1px solid #666',
|
||
borderRadius: '2px',
|
||
}
|
||
|
||
verticalGuideStyle = {
|
||
position: 'absolute' as const,
|
||
left: '50%',
|
||
top: 0,
|
||
bottom: 0,
|
||
borderLeft: '1px dashed #666',
|
||
}
|
||
|
||
horizontalGuideStyle = {
|
||
position: 'absolute' as const,
|
||
left: 0,
|
||
right: 0,
|
||
borderTop: '1px dashed #666',
|
||
}
|
||
|
||
component(shape: IMycrozineTemplateShape) {
|
||
const { w, h } = shape.props
|
||
const isSelected = this.editor.getSelectedShapeIds().includes(shape.id)
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
...this.containerStyle,
|
||
width: `${w}px`,
|
||
height: `${h}px`,
|
||
pointerEvents: isSelected ? 'none' : 'all'
|
||
}}
|
||
>
|
||
<div style={this.verticalGuideStyle} />
|
||
{[0.25, 0.5, 0.75].map((ratio, index) => (
|
||
<div
|
||
key={index}
|
||
style={{
|
||
...this.horizontalGuideStyle,
|
||
top: `${ratio * 100}%`,
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
}
|