Layout constraints example (#3996)
Adds an example of implementing layout contraints using bindings. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [ ] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [x] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [x] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Adds an example of how to use bindings to create layout constraints --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Taha
GitHub
parent
8250112061
commit
978de17a12
3 changed files with 595 additions and 0 deletions
373
apps/examples/src/examples/layout-bindings/LayoutExample.tsx
Normal file
373
apps/examples/src/examples/layout-bindings/LayoutExample.tsx
Normal file
|
|
@ -0,0 +1,373 @@
|
||||||
|
import {
|
||||||
|
BindingOnChangeOptions,
|
||||||
|
BindingOnCreateOptions,
|
||||||
|
BindingOnDeleteOptions,
|
||||||
|
BindingOnShapeChangeOptions,
|
||||||
|
BindingUtil,
|
||||||
|
HTMLContainer,
|
||||||
|
IndexKey,
|
||||||
|
RecordProps,
|
||||||
|
Rectangle2d,
|
||||||
|
ShapeUtil,
|
||||||
|
T,
|
||||||
|
TLBaseBinding,
|
||||||
|
TLBaseShape,
|
||||||
|
TLOnTranslateHandler,
|
||||||
|
Tldraw,
|
||||||
|
Vec,
|
||||||
|
clamp,
|
||||||
|
createBindingId,
|
||||||
|
getIndexBetween,
|
||||||
|
} from 'tldraw'
|
||||||
|
import snapShot from './snapshot.json'
|
||||||
|
|
||||||
|
// The container shapes that can contain element shapes
|
||||||
|
|
||||||
|
const CONTAINER_PADDING = 24
|
||||||
|
|
||||||
|
type ContainerShape = TLBaseShape<'element', { height: number; width: number }>
|
||||||
|
|
||||||
|
class ContainerShapeUtil extends ShapeUtil<ContainerShape> {
|
||||||
|
static override type = 'container' as const
|
||||||
|
static override props: RecordProps<ContainerShape> = { height: T.number, width: T.number }
|
||||||
|
|
||||||
|
override getDefaultProps() {
|
||||||
|
return {
|
||||||
|
width: 100 + CONTAINER_PADDING * 2,
|
||||||
|
height: 100 + CONTAINER_PADDING * 2,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override canBind({
|
||||||
|
fromShapeType,
|
||||||
|
toShapeType,
|
||||||
|
bindingType,
|
||||||
|
}: {
|
||||||
|
fromShapeType: string
|
||||||
|
toShapeType: string
|
||||||
|
bindingType: string
|
||||||
|
}) {
|
||||||
|
return fromShapeType === 'container' && toShapeType === 'element' && bindingType === 'layout'
|
||||||
|
}
|
||||||
|
override canEdit = () => false
|
||||||
|
override canResize = () => false
|
||||||
|
override hideRotateHandle = () => true
|
||||||
|
override isAspectRatioLocked = () => true
|
||||||
|
|
||||||
|
override getGeometry(shape: ContainerShape) {
|
||||||
|
return new Rectangle2d({
|
||||||
|
width: shape.props.width,
|
||||||
|
height: shape.props.height,
|
||||||
|
isFilled: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
override component(shape: ContainerShape) {
|
||||||
|
return (
|
||||||
|
<HTMLContainer
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#efefef',
|
||||||
|
width: shape.props.width,
|
||||||
|
height: shape.props.height,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
override indicator(shape: ContainerShape) {
|
||||||
|
return <rect width={shape.props.width} height={shape.props.height} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The element shapes that can be placed inside the container shapes
|
||||||
|
|
||||||
|
type ElementShape = TLBaseShape<'element', { color: string }>
|
||||||
|
|
||||||
|
class ElementShapeUtil extends ShapeUtil<ElementShape> {
|
||||||
|
static override type = 'element' as const
|
||||||
|
static override props: RecordProps<ElementShape> = {
|
||||||
|
color: T.string,
|
||||||
|
}
|
||||||
|
|
||||||
|
override getDefaultProps() {
|
||||||
|
return {
|
||||||
|
color: '#AEC6CF',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override canBind({
|
||||||
|
fromShapeType,
|
||||||
|
toShapeType,
|
||||||
|
bindingType,
|
||||||
|
}: {
|
||||||
|
fromShapeType: string
|
||||||
|
toShapeType: string
|
||||||
|
bindingType: string
|
||||||
|
}) {
|
||||||
|
return fromShapeType === 'container' && toShapeType === 'element' && bindingType === 'layout'
|
||||||
|
}
|
||||||
|
override canEdit = () => false
|
||||||
|
override canResize = () => false
|
||||||
|
override hideRotateHandle = () => true
|
||||||
|
override isAspectRatioLocked = () => true
|
||||||
|
|
||||||
|
override getGeometry() {
|
||||||
|
return new Rectangle2d({
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
isFilled: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
override component(shape: ElementShape) {
|
||||||
|
return <HTMLContainer style={{ backgroundColor: shape.props.color }}></HTMLContainer>
|
||||||
|
}
|
||||||
|
|
||||||
|
override indicator() {
|
||||||
|
return <rect width={100} height={100} />
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTargetContainer = (shape: ElementShape, pageAnchor: Vec) => {
|
||||||
|
// Find the container shape that the element is being dropped on
|
||||||
|
return this.editor.getShapeAtPoint(pageAnchor, {
|
||||||
|
hitInside: true,
|
||||||
|
filter: (otherShape) =>
|
||||||
|
this.editor.canBindShapes({ fromShape: otherShape, toShape: shape, binding: 'layout' }),
|
||||||
|
}) as ContainerShape | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
private getBindingIndexForPosition = (
|
||||||
|
shape: ElementShape,
|
||||||
|
container: ContainerShape,
|
||||||
|
pageAnchor: Vec
|
||||||
|
) => {
|
||||||
|
// All the layout bindings from the container
|
||||||
|
const allBindings = this.editor
|
||||||
|
.getBindingsFromShape<LayoutBinding>(container, 'layout')
|
||||||
|
.sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
|
||||||
|
|
||||||
|
// Those bindings that don't involve the element
|
||||||
|
const siblings = allBindings.filter((b) => b.toId !== shape.id)
|
||||||
|
|
||||||
|
// Get the relative x position of the element center in the container
|
||||||
|
// Where should the element be placed? min index at left, max index + 1
|
||||||
|
const order = clamp(
|
||||||
|
Math.round((pageAnchor.x - container.x - CONTAINER_PADDING) / (100 + CONTAINER_PADDING)),
|
||||||
|
0,
|
||||||
|
siblings.length + 1
|
||||||
|
)
|
||||||
|
|
||||||
|
// Get a fractional index between the two siblings
|
||||||
|
const belowSib = allBindings[order - 1]
|
||||||
|
const aboveSib = allBindings[order]
|
||||||
|
let index: IndexKey
|
||||||
|
|
||||||
|
if (belowSib?.toId === shape.id) {
|
||||||
|
index = belowSib.props.index
|
||||||
|
} else if (aboveSib?.toId === shape.id) {
|
||||||
|
index = aboveSib.props.index
|
||||||
|
} else {
|
||||||
|
index = getIndexBetween(belowSib?.props.index, aboveSib?.props.index)
|
||||||
|
}
|
||||||
|
|
||||||
|
return index
|
||||||
|
}
|
||||||
|
|
||||||
|
override onTranslateStart = (shape: ElementShape) => {
|
||||||
|
// Update all the layout bindings for this shape to be placeholders
|
||||||
|
this.editor.updateBindings(
|
||||||
|
this.editor.getBindingsToShape<LayoutBinding>(shape, 'layout').map((binding) => ({
|
||||||
|
...binding,
|
||||||
|
props: { ...binding.props, placeholder: true },
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
override onTranslate: TLOnTranslateHandler<ElementShape> | undefined = (
|
||||||
|
_,
|
||||||
|
shape: ElementShape
|
||||||
|
) => {
|
||||||
|
// Find the center of the element shape
|
||||||
|
const pageAnchor = this.editor.getShapePageTransform(shape).applyToPoint({ x: 50, y: 50 })
|
||||||
|
|
||||||
|
// Find the container shape that the element is being dropped on
|
||||||
|
const targetContainer = this.getTargetContainer(shape, pageAnchor)
|
||||||
|
|
||||||
|
if (!targetContainer) {
|
||||||
|
// Delete all the bindings to the element
|
||||||
|
const bindings = this.editor.getBindingsToShape<LayoutBinding>(shape, 'layout')
|
||||||
|
this.editor.deleteBindings(bindings)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the index for the new binding
|
||||||
|
const index = this.getBindingIndexForPosition(shape, targetContainer, pageAnchor)
|
||||||
|
|
||||||
|
// Is there an existing binding already between the container and the shape?
|
||||||
|
const existingBinding = this.editor
|
||||||
|
.getBindingsFromShape<LayoutBinding>(targetContainer, 'layout')
|
||||||
|
.find((b) => b.toId === shape.id)
|
||||||
|
|
||||||
|
if (existingBinding) {
|
||||||
|
// If a binding already exists, update it
|
||||||
|
if (existingBinding.props.index === index) return
|
||||||
|
this.editor.updateBinding<LayoutBinding>({
|
||||||
|
...existingBinding,
|
||||||
|
props: {
|
||||||
|
...existingBinding.props,
|
||||||
|
placeholder: true,
|
||||||
|
index,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// ...otherwise, create a new one
|
||||||
|
this.editor.createBinding<LayoutBinding>({
|
||||||
|
id: createBindingId(),
|
||||||
|
type: 'layout',
|
||||||
|
fromId: targetContainer.id,
|
||||||
|
toId: shape.id,
|
||||||
|
props: {
|
||||||
|
index,
|
||||||
|
placeholder: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override onTranslateEnd = (_: ElementShape, shape: ElementShape) => {
|
||||||
|
// Find the center of the element shape
|
||||||
|
const pageAnchor = this.editor.getShapePageTransform(shape).applyToPoint({ x: 50, y: 50 })
|
||||||
|
|
||||||
|
// Find the container shape that the element is being dropped on
|
||||||
|
const targetContainer = this.getTargetContainer(shape, pageAnchor)
|
||||||
|
|
||||||
|
// No target container? no problem
|
||||||
|
if (!targetContainer) return
|
||||||
|
|
||||||
|
// get the index for the new binding
|
||||||
|
const index = this.getBindingIndexForPosition(shape, targetContainer, pageAnchor)
|
||||||
|
|
||||||
|
// delete all the previous bindings for this shape
|
||||||
|
this.editor.deleteBindings(this.editor.getBindingsToShape<LayoutBinding>(shape, 'layout'))
|
||||||
|
|
||||||
|
// ...and then create a new one
|
||||||
|
this.editor.createBinding<LayoutBinding>({
|
||||||
|
id: createBindingId(),
|
||||||
|
type: 'layout',
|
||||||
|
fromId: targetContainer.id,
|
||||||
|
toId: shape.id,
|
||||||
|
props: {
|
||||||
|
index,
|
||||||
|
placeholder: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The binding between the element shapes and the container shapes
|
||||||
|
|
||||||
|
type LayoutBinding = TLBaseBinding<
|
||||||
|
'layout',
|
||||||
|
{
|
||||||
|
index: IndexKey
|
||||||
|
placeholder: boolean
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
class LayoutBindingUtil extends BindingUtil<LayoutBinding> {
|
||||||
|
static override type = 'layout' as const
|
||||||
|
|
||||||
|
override getDefaultProps() {
|
||||||
|
return {
|
||||||
|
index: 'a1' as IndexKey,
|
||||||
|
placeholder: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override onAfterCreate({ binding }: BindingOnCreateOptions<LayoutBinding>): void {
|
||||||
|
this.updateElementsForContainer(binding)
|
||||||
|
}
|
||||||
|
|
||||||
|
override onAfterChange({ bindingAfter }: BindingOnChangeOptions<LayoutBinding>): void {
|
||||||
|
this.updateElementsForContainer(bindingAfter)
|
||||||
|
}
|
||||||
|
|
||||||
|
override onAfterChangeFromShape({ binding }: BindingOnShapeChangeOptions<LayoutBinding>): void {
|
||||||
|
this.updateElementsForContainer(binding)
|
||||||
|
}
|
||||||
|
|
||||||
|
override onAfterDelete({ binding }: BindingOnDeleteOptions<LayoutBinding>): void {
|
||||||
|
this.updateElementsForContainer(binding)
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateElementsForContainer({
|
||||||
|
props: { placeholder },
|
||||||
|
fromId: containerId,
|
||||||
|
toId,
|
||||||
|
}: LayoutBinding) {
|
||||||
|
// Get all of the bindings from the layout container
|
||||||
|
const container = this.editor.getShape<ContainerShape>(containerId)
|
||||||
|
if (!container) return
|
||||||
|
|
||||||
|
const bindings = this.editor
|
||||||
|
.getBindingsFromShape<LayoutBinding>(container, 'layout')
|
||||||
|
.sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
|
||||||
|
if (bindings.length === 0) return
|
||||||
|
|
||||||
|
for (let i = 0; i < bindings.length; i++) {
|
||||||
|
const binding = bindings[i]
|
||||||
|
|
||||||
|
if (toId === binding.toId && placeholder) continue
|
||||||
|
|
||||||
|
const offset = new Vec(CONTAINER_PADDING + i * (100 + CONTAINER_PADDING), CONTAINER_PADDING)
|
||||||
|
|
||||||
|
const shape = this.editor.getShape<ElementShape>(binding.toId)
|
||||||
|
if (!shape) continue
|
||||||
|
|
||||||
|
const point = this.editor.getPointInParentSpace(
|
||||||
|
shape,
|
||||||
|
this.editor.getShapePageTransform(container)!.applyToPoint(offset)
|
||||||
|
)
|
||||||
|
|
||||||
|
if (shape.x !== point.x || shape.y !== point.y) {
|
||||||
|
this.editor.updateShape({
|
||||||
|
id: binding.toId,
|
||||||
|
type: 'element',
|
||||||
|
x: point.x,
|
||||||
|
y: point.y,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const width =
|
||||||
|
CONTAINER_PADDING +
|
||||||
|
(bindings.length * 100 + (bindings.length - 1) * CONTAINER_PADDING) +
|
||||||
|
CONTAINER_PADDING
|
||||||
|
|
||||||
|
const height = CONTAINER_PADDING + 100 + CONTAINER_PADDING
|
||||||
|
|
||||||
|
if (width !== container.props.width || height !== container.props.height) {
|
||||||
|
this.editor.updateShape({
|
||||||
|
id: container.id,
|
||||||
|
type: 'container',
|
||||||
|
props: { width, height },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LayoutExample() {
|
||||||
|
return (
|
||||||
|
<div className="tldraw__editor">
|
||||||
|
<Tldraw
|
||||||
|
// @ts-ignore
|
||||||
|
snapshot={snapShot}
|
||||||
|
onMount={(editor) => {
|
||||||
|
;(window as any).editor = editor
|
||||||
|
}}
|
||||||
|
shapeUtils={[ContainerShapeUtil, ElementShapeUtil]}
|
||||||
|
bindingUtils={[LayoutBindingUtil]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
12
apps/examples/src/examples/layout-bindings/README.md
Normal file
12
apps/examples/src/examples/layout-bindings/README.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
title: Layout constraints (bindings)
|
||||||
|
component: ./LayoutExample.tsx
|
||||||
|
category: shapes/tools
|
||||||
|
keywords: [constraints, group, shape, custom, bindings, drag, drop, position]
|
||||||
|
---
|
||||||
|
|
||||||
|
How to constrain shapes to a layout using bindings.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You can use bindings to make shapes respond to changes to other shapes. This is useful for enforcing layout constraints
|
||||||
210
apps/examples/src/examples/layout-bindings/snapshot.json
Normal file
210
apps/examples/src/examples/layout-bindings/snapshot.json
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
{
|
||||||
|
"store": {
|
||||||
|
"document:document": {
|
||||||
|
"gridSize": 10,
|
||||||
|
"name": "",
|
||||||
|
"meta": {},
|
||||||
|
"id": "document:document",
|
||||||
|
"typeName": "document"
|
||||||
|
},
|
||||||
|
"page:page": {
|
||||||
|
"meta": {},
|
||||||
|
"id": "page:page",
|
||||||
|
"name": "Page 1",
|
||||||
|
"index": "a1",
|
||||||
|
"typeName": "page"
|
||||||
|
},
|
||||||
|
"shape:f4LKGB_8M2qsyWGpHR5Dq": {
|
||||||
|
"x": 30.9375,
|
||||||
|
"y": 69.48828125,
|
||||||
|
"rotation": 0,
|
||||||
|
"isLocked": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"meta": {},
|
||||||
|
"id": "shape:f4LKGB_8M2qsyWGpHR5Dq",
|
||||||
|
"type": "container",
|
||||||
|
"parentId": "page:page",
|
||||||
|
"index": "a1",
|
||||||
|
"props": {
|
||||||
|
"width": 644,
|
||||||
|
"height": 148
|
||||||
|
},
|
||||||
|
"typeName": "shape"
|
||||||
|
},
|
||||||
|
"shape:2oThF4kJ4v31xqKN5lvq2": {
|
||||||
|
"x": 550.9375,
|
||||||
|
"y": 93.48828125,
|
||||||
|
"rotation": 0,
|
||||||
|
"isLocked": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"meta": {},
|
||||||
|
"id": "shape:2oThF4kJ4v31xqKN5lvq2",
|
||||||
|
"type": "element",
|
||||||
|
"props": {
|
||||||
|
"color": "#5BCEFA"
|
||||||
|
},
|
||||||
|
"parentId": "page:page",
|
||||||
|
"index": "a2",
|
||||||
|
"typeName": "shape"
|
||||||
|
},
|
||||||
|
"shape:K2vk_VTaNh-ANaRNOAvgY": {
|
||||||
|
"x": 426.9375,
|
||||||
|
"y": 93.48828125,
|
||||||
|
"rotation": 0,
|
||||||
|
"isLocked": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"meta": {},
|
||||||
|
"id": "shape:K2vk_VTaNh-ANaRNOAvgY",
|
||||||
|
"type": "element",
|
||||||
|
"props": {
|
||||||
|
"color": "#F5A9B8"
|
||||||
|
},
|
||||||
|
"parentId": "page:page",
|
||||||
|
"index": "a3",
|
||||||
|
"typeName": "shape"
|
||||||
|
},
|
||||||
|
"shape:6uouhIK7PvyIRNQHACf-d": {
|
||||||
|
"x": 302.9375,
|
||||||
|
"y": 93.48828125,
|
||||||
|
"rotation": 0,
|
||||||
|
"isLocked": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"meta": {},
|
||||||
|
"id": "shape:6uouhIK7PvyIRNQHACf-d",
|
||||||
|
"type": "element",
|
||||||
|
"props": {
|
||||||
|
"color": "#FFFFFF"
|
||||||
|
},
|
||||||
|
"parentId": "page:page",
|
||||||
|
"index": "a4",
|
||||||
|
"typeName": "shape"
|
||||||
|
},
|
||||||
|
"shape:GTQq2qxkWPHEK7KMIRtsh": {
|
||||||
|
"x": 54.9375,
|
||||||
|
"y": 93.48828125,
|
||||||
|
"rotation": 0,
|
||||||
|
"isLocked": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"meta": {},
|
||||||
|
"id": "shape:GTQq2qxkWPHEK7KMIRtsh",
|
||||||
|
"type": "element",
|
||||||
|
"props": {
|
||||||
|
"color": "#5BCEFA"
|
||||||
|
},
|
||||||
|
"parentId": "page:page",
|
||||||
|
"index": "a5",
|
||||||
|
"typeName": "shape"
|
||||||
|
},
|
||||||
|
"shape:05jMujN6A0sIp6zzHMpbV": {
|
||||||
|
"x": 178.9375,
|
||||||
|
"y": 93.48828125,
|
||||||
|
"rotation": 0,
|
||||||
|
"isLocked": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"meta": {},
|
||||||
|
"id": "shape:05jMujN6A0sIp6zzHMpbV",
|
||||||
|
"type": "element",
|
||||||
|
"props": {
|
||||||
|
"color": "#F5A9B8"
|
||||||
|
},
|
||||||
|
"parentId": "page:page",
|
||||||
|
"index": "a6",
|
||||||
|
"typeName": "shape"
|
||||||
|
},
|
||||||
|
"binding:iOBENBUHvzD8N7mBdIM5l": {
|
||||||
|
"meta": {},
|
||||||
|
"id": "binding:iOBENBUHvzD8N7mBdIM5l",
|
||||||
|
"type": "layout",
|
||||||
|
"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
|
||||||
|
"toId": "shape:05jMujN6A0sIp6zzHMpbV",
|
||||||
|
"props": {
|
||||||
|
"index": "a2",
|
||||||
|
"placeholder": false
|
||||||
|
},
|
||||||
|
"typeName": "binding"
|
||||||
|
},
|
||||||
|
"binding:YTIeOALEmHJk6dczRpQmE": {
|
||||||
|
"meta": {},
|
||||||
|
"id": "binding:YTIeOALEmHJk6dczRpQmE",
|
||||||
|
"type": "layout",
|
||||||
|
"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
|
||||||
|
"toId": "shape:GTQq2qxkWPHEK7KMIRtsh",
|
||||||
|
"props": {
|
||||||
|
"index": "a1",
|
||||||
|
"placeholder": false
|
||||||
|
},
|
||||||
|
"typeName": "binding"
|
||||||
|
},
|
||||||
|
"binding:n4LY_pVuLfjV1qpOTZX-U": {
|
||||||
|
"meta": {},
|
||||||
|
"id": "binding:n4LY_pVuLfjV1qpOTZX-U",
|
||||||
|
"type": "layout",
|
||||||
|
"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
|
||||||
|
"toId": "shape:6uouhIK7PvyIRNQHACf-d",
|
||||||
|
"props": {
|
||||||
|
"index": "a3",
|
||||||
|
"placeholder": false
|
||||||
|
},
|
||||||
|
"typeName": "binding"
|
||||||
|
},
|
||||||
|
"binding:8XayRsWB_nxAH2833SYg1": {
|
||||||
|
"meta": {},
|
||||||
|
"id": "binding:8XayRsWB_nxAH2833SYg1",
|
||||||
|
"type": "layout",
|
||||||
|
"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
|
||||||
|
"toId": "shape:2oThF4kJ4v31xqKN5lvq2",
|
||||||
|
"props": {
|
||||||
|
"index": "a5",
|
||||||
|
"placeholder": false
|
||||||
|
},
|
||||||
|
"typeName": "binding"
|
||||||
|
},
|
||||||
|
"binding:MTYuIRiEVTn2DyVChthry": {
|
||||||
|
"meta": {},
|
||||||
|
"id": "binding:MTYuIRiEVTn2DyVChthry",
|
||||||
|
"type": "layout",
|
||||||
|
"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
|
||||||
|
"toId": "shape:K2vk_VTaNh-ANaRNOAvgY",
|
||||||
|
"props": {
|
||||||
|
"index": "a4",
|
||||||
|
"placeholder": false
|
||||||
|
},
|
||||||
|
"typeName": "binding"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"schema": {
|
||||||
|
"schemaVersion": 2,
|
||||||
|
"sequences": {
|
||||||
|
"com.tldraw.store": 4,
|
||||||
|
"com.tldraw.asset": 1,
|
||||||
|
"com.tldraw.camera": 1,
|
||||||
|
"com.tldraw.document": 2,
|
||||||
|
"com.tldraw.instance": 25,
|
||||||
|
"com.tldraw.instance_page_state": 5,
|
||||||
|
"com.tldraw.page": 1,
|
||||||
|
"com.tldraw.instance_presence": 5,
|
||||||
|
"com.tldraw.pointer": 1,
|
||||||
|
"com.tldraw.shape": 4,
|
||||||
|
"com.tldraw.asset.bookmark": 2,
|
||||||
|
"com.tldraw.asset.image": 4,
|
||||||
|
"com.tldraw.asset.video": 4,
|
||||||
|
"com.tldraw.shape.group": 0,
|
||||||
|
"com.tldraw.shape.text": 2,
|
||||||
|
"com.tldraw.shape.bookmark": 2,
|
||||||
|
"com.tldraw.shape.draw": 2,
|
||||||
|
"com.tldraw.shape.geo": 9,
|
||||||
|
"com.tldraw.shape.note": 7,
|
||||||
|
"com.tldraw.shape.line": 5,
|
||||||
|
"com.tldraw.shape.frame": 0,
|
||||||
|
"com.tldraw.shape.arrow": 5,
|
||||||
|
"com.tldraw.shape.highlight": 1,
|
||||||
|
"com.tldraw.shape.embed": 4,
|
||||||
|
"com.tldraw.shape.image": 3,
|
||||||
|
"com.tldraw.shape.video": 2,
|
||||||
|
"com.tldraw.shape.container": 0,
|
||||||
|
"com.tldraw.shape.element": 0,
|
||||||
|
"com.tldraw.binding.arrow": 0,
|
||||||
|
"com.tldraw.binding.layout": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue