66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { Component, Frame, Instance, Text, renderTree } from '@open-pencil/core/design-jsx'
|
|
import type { SceneGraph } from '@open-pencil/scene-graph'
|
|
|
|
export async function createInstanceSizingScene(graph: SceneGraph, parentId: string) {
|
|
const library = graph.addPage('Sizing component')
|
|
const component = await renderTree(
|
|
graph,
|
|
Component({
|
|
name: 'Note',
|
|
flex: 'col',
|
|
w: 280,
|
|
h: 'hug',
|
|
p: 16,
|
|
bg: '#FFFFFF',
|
|
rounded: 10,
|
|
properties: [{ id: 'message', name: 'Message', type: 'TEXT', defaultValue: 'A short note.' }],
|
|
children: Text({
|
|
name: 'Message',
|
|
w: 'fill',
|
|
font: 'Inter',
|
|
size: 14,
|
|
lineHeight: 20,
|
|
color: '#252A31',
|
|
propertyRefs: [{ propertyId: 'message', field: 'TEXT' }],
|
|
children: 'A short note.'
|
|
})
|
|
}),
|
|
{ parentId: library.id }
|
|
)
|
|
const board = await renderTree(
|
|
graph,
|
|
Frame({
|
|
name: 'Instance sizing',
|
|
flex: 'row',
|
|
w: 'hug',
|
|
h: 'hug',
|
|
gap: 32,
|
|
p: 32,
|
|
bg: '#E9E7E2',
|
|
children: [280, 220].map((width) =>
|
|
Frame({
|
|
name: `Container ${width}`,
|
|
flex: 'col',
|
|
w: width,
|
|
h: 'hug',
|
|
gap: 12,
|
|
children: [
|
|
Text({ children: `${width}px container`, font: 'Inter', size: 12, color: '#626975' }),
|
|
Instance({
|
|
of: component.id,
|
|
w: 'fill',
|
|
properties: {
|
|
message:
|
|
'The blue feels right. Give the date a little more room at the bottom, and keep the quieter version for the print edition.'
|
|
}
|
|
})
|
|
]
|
|
})
|
|
)
|
|
}),
|
|
{ parentId }
|
|
)
|
|
graph.syncInstances(component.id)
|
|
return { boardId: board.id, componentId: component.id }
|
|
}
|