kopia lustrzana https://github.com/Tldraw/Tldraw
alex/bindings: wip
alex/bindings: extract versions alex/bindings: wip alex/bindings: fixupspull/3326/head
rodzic
f78719b054
commit
7dfa0dbce1
|
@ -2,8 +2,8 @@ import {
|
||||||
BaseBoxShapeUtil,
|
BaseBoxShapeUtil,
|
||||||
BoundsSnapGeometry,
|
BoundsSnapGeometry,
|
||||||
HTMLContainer,
|
HTMLContainer,
|
||||||
|
RecordProps,
|
||||||
Rectangle2d,
|
Rectangle2d,
|
||||||
ShapeProps,
|
|
||||||
T,
|
T,
|
||||||
TLBaseShape,
|
TLBaseShape,
|
||||||
} from 'tldraw'
|
} from 'tldraw'
|
||||||
|
@ -23,7 +23,7 @@ type IPlayingCard = TLBaseShape<
|
||||||
export class PlayingCardUtil extends BaseBoxShapeUtil<IPlayingCard> {
|
export class PlayingCardUtil extends BaseBoxShapeUtil<IPlayingCard> {
|
||||||
// [2]
|
// [2]
|
||||||
static override type = 'PlayingCard' as const
|
static override type = 'PlayingCard' as const
|
||||||
static override props: ShapeProps<IPlayingCard> = {
|
static override props: RecordProps<IPlayingCard> = {
|
||||||
w: T.number,
|
w: T.number,
|
||||||
h: T.number,
|
h: T.number,
|
||||||
suit: T.string,
|
suit: T.string,
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { DefaultColorStyle, ShapeProps, T } from 'tldraw'
|
import { DefaultColorStyle, RecordProps, T } from 'tldraw'
|
||||||
import { ICardShape } from './card-shape-types'
|
import { ICardShape } from './card-shape-types'
|
||||||
|
|
||||||
// Validation for our custom card shape's props, using one of tldraw's default styles
|
// Validation for our custom card shape's props, using one of tldraw's default styles
|
||||||
export const cardShapeProps: ShapeProps<ICardShape> = {
|
export const cardShapeProps: RecordProps<ICardShape> = {
|
||||||
w: T.number,
|
w: T.number,
|
||||||
h: T.number,
|
h: T.number,
|
||||||
color: DefaultColorStyle,
|
color: DefaultColorStyle,
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import {
|
import {
|
||||||
Geometry2d,
|
Geometry2d,
|
||||||
HTMLContainer,
|
HTMLContainer,
|
||||||
|
RecordProps,
|
||||||
Rectangle2d,
|
Rectangle2d,
|
||||||
ShapeProps,
|
|
||||||
ShapeUtil,
|
ShapeUtil,
|
||||||
T,
|
T,
|
||||||
TLBaseShape,
|
TLBaseShape,
|
||||||
|
@ -28,7 +28,7 @@ type ICustomShape = TLBaseShape<
|
||||||
export class MyShapeUtil extends ShapeUtil<ICustomShape> {
|
export class MyShapeUtil extends ShapeUtil<ICustomShape> {
|
||||||
// [a]
|
// [a]
|
||||||
static override type = 'my-custom-shape' as const
|
static override type = 'my-custom-shape' as const
|
||||||
static override props: ShapeProps<ICustomShape> = {
|
static override props: RecordProps<ICustomShape> = {
|
||||||
w: T.number,
|
w: T.number,
|
||||||
h: T.number,
|
h: T.number,
|
||||||
text: T.string,
|
text: T.string,
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {
|
import {
|
||||||
BaseBoxShapeUtil,
|
BaseBoxShapeUtil,
|
||||||
HTMLContainer,
|
HTMLContainer,
|
||||||
ShapeProps,
|
RecordProps,
|
||||||
T,
|
T,
|
||||||
TLBaseShape,
|
TLBaseShape,
|
||||||
TLOnEditEndHandler,
|
TLOnEditEndHandler,
|
||||||
|
@ -23,7 +23,7 @@ type IMyEditableShape = TLBaseShape<
|
||||||
|
|
||||||
export class EditableShapeUtil extends BaseBoxShapeUtil<IMyEditableShape> {
|
export class EditableShapeUtil extends BaseBoxShapeUtil<IMyEditableShape> {
|
||||||
static override type = 'my-editable-shape' as const
|
static override type = 'my-editable-shape' as const
|
||||||
static override props: ShapeProps<IMyEditableShape> = {
|
static override props: RecordProps<IMyEditableShape> = {
|
||||||
w: T.number,
|
w: T.number,
|
||||||
h: T.number,
|
h: T.number,
|
||||||
animal: T.number,
|
animal: T.number,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { BaseBoxShapeUtil, HTMLContainer, ShapeProps, T, TLBaseShape } from 'tldraw'
|
import { BaseBoxShapeUtil, HTMLContainer, RecordProps, T, TLBaseShape } from 'tldraw'
|
||||||
|
|
||||||
// There's a guide at the bottom of this file!
|
// There's a guide at the bottom of this file!
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@ type IMyInteractiveShape = TLBaseShape<
|
||||||
|
|
||||||
export class myInteractiveShape extends BaseBoxShapeUtil<IMyInteractiveShape> {
|
export class myInteractiveShape extends BaseBoxShapeUtil<IMyInteractiveShape> {
|
||||||
static override type = 'my-interactive-shape' as const
|
static override type = 'my-interactive-shape' as const
|
||||||
static override props: ShapeProps<IMyInteractiveShape> = {
|
static override props: RecordProps<IMyInteractiveShape> = {
|
||||||
w: T.number,
|
w: T.number,
|
||||||
h: T.number,
|
h: T.number,
|
||||||
checked: T.boolean,
|
checked: T.boolean,
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import {
|
import {
|
||||||
Geometry2d,
|
Geometry2d,
|
||||||
|
RecordProps,
|
||||||
Rectangle2d,
|
Rectangle2d,
|
||||||
SVGContainer,
|
SVGContainer,
|
||||||
ShapeProps,
|
|
||||||
ShapeUtil,
|
ShapeUtil,
|
||||||
T,
|
T,
|
||||||
TLBaseShape,
|
TLBaseShape,
|
||||||
|
@ -24,7 +24,7 @@ export type SlideShape = TLBaseShape<
|
||||||
|
|
||||||
export class SlideShapeUtil extends ShapeUtil<SlideShape> {
|
export class SlideShapeUtil extends ShapeUtil<SlideShape> {
|
||||||
static override type = 'slide' as const
|
static override type = 'slide' as const
|
||||||
static override props: ShapeProps<SlideShape> = {
|
static override props: RecordProps<SlideShape> = {
|
||||||
w: T.number,
|
w: T.number,
|
||||||
h: T.number,
|
h: T.number,
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@ import {
|
||||||
Geometry2d,
|
Geometry2d,
|
||||||
LABEL_FONT_SIZES,
|
LABEL_FONT_SIZES,
|
||||||
Polygon2d,
|
Polygon2d,
|
||||||
ShapePropsType,
|
RecordPropsType,
|
||||||
ShapeUtil,
|
ShapeUtil,
|
||||||
T,
|
T,
|
||||||
TEXT_PROPS,
|
TEXT_PROPS,
|
||||||
|
@ -52,7 +52,7 @@ export const speechBubbleShapeProps = {
|
||||||
tail: vecModelValidator,
|
tail: vecModelValidator,
|
||||||
}
|
}
|
||||||
|
|
||||||
export type SpeechBubbleShapeProps = ShapePropsType<typeof speechBubbleShapeProps>
|
export type SpeechBubbleShapeProps = RecordPropsType<typeof speechBubbleShapeProps>
|
||||||
export type SpeechBubbleShape = TLBaseShape<'speech-bubble', SpeechBubbleShapeProps>
|
export type SpeechBubbleShape = TLBaseShape<'speech-bubble', SpeechBubbleShapeProps>
|
||||||
|
|
||||||
export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
|
export class SpeechBubbleUtil extends ShapeUtil<SpeechBubbleShape> {
|
||||||
|
|
|
@ -1,232 +0,0 @@
|
||||||
## API Report File for "@tldraw/assets"
|
|
||||||
|
|
||||||
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
||||||
|
|
||||||
```ts
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export function getBundlerAssetUrls(opts?: AssetUrlOptions): {
|
|
||||||
readonly fonts: {
|
|
||||||
readonly monospace: string;
|
|
||||||
readonly sansSerif: string;
|
|
||||||
readonly serif: string;
|
|
||||||
readonly draw: string;
|
|
||||||
};
|
|
||||||
readonly icons: {
|
|
||||||
readonly 'align-bottom-center': string;
|
|
||||||
readonly 'align-bottom-left': string;
|
|
||||||
readonly 'align-bottom-right': string;
|
|
||||||
readonly 'align-bottom': string;
|
|
||||||
readonly 'align-center-center': string;
|
|
||||||
readonly 'align-center-horizontal': string;
|
|
||||||
readonly 'align-center-left': string;
|
|
||||||
readonly 'align-center-right': string;
|
|
||||||
readonly 'align-center-vertical': string;
|
|
||||||
readonly 'align-left': string;
|
|
||||||
readonly 'align-right': string;
|
|
||||||
readonly 'align-top-center': string;
|
|
||||||
readonly 'align-top-left': string;
|
|
||||||
readonly 'align-top-right': string;
|
|
||||||
readonly 'align-top': string;
|
|
||||||
readonly 'arrow-left': string;
|
|
||||||
readonly 'arrowhead-arrow': string;
|
|
||||||
readonly 'arrowhead-bar': string;
|
|
||||||
readonly 'arrowhead-diamond': string;
|
|
||||||
readonly 'arrowhead-dot': string;
|
|
||||||
readonly 'arrowhead-none': string;
|
|
||||||
readonly 'arrowhead-square': string;
|
|
||||||
readonly 'arrowhead-triangle-inverted': string;
|
|
||||||
readonly 'arrowhead-triangle': string;
|
|
||||||
readonly 'aspect-ratio': string;
|
|
||||||
readonly avatar: string;
|
|
||||||
readonly blob: string;
|
|
||||||
readonly 'bring-forward': string;
|
|
||||||
readonly 'bring-to-front': string;
|
|
||||||
readonly check: string;
|
|
||||||
readonly 'checkbox-checked': string;
|
|
||||||
readonly 'checkbox-empty': string;
|
|
||||||
readonly 'chevron-down': string;
|
|
||||||
readonly 'chevron-left': string;
|
|
||||||
readonly 'chevron-right': string;
|
|
||||||
readonly 'chevron-up': string;
|
|
||||||
readonly 'chevrons-ne': string;
|
|
||||||
readonly 'chevrons-sw': string;
|
|
||||||
readonly 'clipboard-copy': string;
|
|
||||||
readonly code: string;
|
|
||||||
readonly collab: string;
|
|
||||||
readonly color: string;
|
|
||||||
readonly comment: string;
|
|
||||||
readonly 'cross-2': string;
|
|
||||||
readonly cross: string;
|
|
||||||
readonly 'dash-dashed': string;
|
|
||||||
readonly 'dash-dotted': string;
|
|
||||||
readonly 'dash-draw': string;
|
|
||||||
readonly 'dash-solid': string;
|
|
||||||
readonly discord: string;
|
|
||||||
readonly 'distribute-horizontal': string;
|
|
||||||
readonly 'distribute-vertical': string;
|
|
||||||
readonly dot: string;
|
|
||||||
readonly 'dots-horizontal': string;
|
|
||||||
readonly 'dots-vertical': string;
|
|
||||||
readonly 'drag-handle-dots': string;
|
|
||||||
readonly duplicate: string;
|
|
||||||
readonly edit: string;
|
|
||||||
readonly 'external-link': string;
|
|
||||||
readonly file: string;
|
|
||||||
readonly 'fill-none': string;
|
|
||||||
readonly 'fill-pattern': string;
|
|
||||||
readonly 'fill-semi': string;
|
|
||||||
readonly 'fill-solid': string;
|
|
||||||
readonly follow: string;
|
|
||||||
readonly following: string;
|
|
||||||
readonly 'font-draw': string;
|
|
||||||
readonly 'font-mono': string;
|
|
||||||
readonly 'font-sans': string;
|
|
||||||
readonly 'font-serif': string;
|
|
||||||
readonly 'geo-arrow-down': string;
|
|
||||||
readonly 'geo-arrow-left': string;
|
|
||||||
readonly 'geo-arrow-right': string;
|
|
||||||
readonly 'geo-arrow-up': string;
|
|
||||||
readonly 'geo-check-box': string;
|
|
||||||
readonly 'geo-diamond': string;
|
|
||||||
readonly 'geo-ellipse': string;
|
|
||||||
readonly 'geo-hexagon': string;
|
|
||||||
readonly 'geo-octagon': string;
|
|
||||||
readonly 'geo-oval': string;
|
|
||||||
readonly 'geo-pentagon': string;
|
|
||||||
readonly 'geo-rectangle': string;
|
|
||||||
readonly 'geo-rhombus-2': string;
|
|
||||||
readonly 'geo-rhombus': string;
|
|
||||||
readonly 'geo-star': string;
|
|
||||||
readonly 'geo-trapezoid': string;
|
|
||||||
readonly 'geo-triangle': string;
|
|
||||||
readonly 'geo-x-box': string;
|
|
||||||
readonly github: string;
|
|
||||||
readonly group: string;
|
|
||||||
readonly hidden: string;
|
|
||||||
readonly image: string;
|
|
||||||
readonly 'info-circle': string;
|
|
||||||
readonly leading: string;
|
|
||||||
readonly link: string;
|
|
||||||
readonly 'lock-small': string;
|
|
||||||
readonly lock: string;
|
|
||||||
readonly menu: string;
|
|
||||||
readonly minus: string;
|
|
||||||
readonly mixed: string;
|
|
||||||
readonly pack: string;
|
|
||||||
readonly page: string;
|
|
||||||
readonly plus: string;
|
|
||||||
readonly 'question-mark-circle': string;
|
|
||||||
readonly 'question-mark': string;
|
|
||||||
readonly redo: string;
|
|
||||||
readonly 'reset-zoom': string;
|
|
||||||
readonly 'rotate-ccw': string;
|
|
||||||
readonly 'rotate-cw': string;
|
|
||||||
readonly ruler: string;
|
|
||||||
readonly search: string;
|
|
||||||
readonly 'send-backward': string;
|
|
||||||
readonly 'send-to-back': string;
|
|
||||||
readonly 'settings-horizontal': string;
|
|
||||||
readonly 'settings-vertical-1': string;
|
|
||||||
readonly 'settings-vertical': string;
|
|
||||||
readonly 'share-1': string;
|
|
||||||
readonly 'share-2': string;
|
|
||||||
readonly 'size-extra-large': string;
|
|
||||||
readonly 'size-large': string;
|
|
||||||
readonly 'size-medium': string;
|
|
||||||
readonly 'size-small': string;
|
|
||||||
readonly 'spline-cubic': string;
|
|
||||||
readonly 'spline-line': string;
|
|
||||||
readonly 'stack-horizontal': string;
|
|
||||||
readonly 'stack-vertical': string;
|
|
||||||
readonly 'stretch-horizontal': string;
|
|
||||||
readonly 'stretch-vertical': string;
|
|
||||||
readonly 'text-align-center': string;
|
|
||||||
readonly 'text-align-justify': string;
|
|
||||||
readonly 'text-align-left': string;
|
|
||||||
readonly 'text-align-right': string;
|
|
||||||
readonly 'tool-arrow': string;
|
|
||||||
readonly 'tool-embed': string;
|
|
||||||
readonly 'tool-eraser': string;
|
|
||||||
readonly 'tool-frame': string;
|
|
||||||
readonly 'tool-hand': string;
|
|
||||||
readonly 'tool-highlighter': string;
|
|
||||||
readonly 'tool-line': string;
|
|
||||||
readonly 'tool-media': string;
|
|
||||||
readonly 'tool-note': string;
|
|
||||||
readonly 'tool-pencil': string;
|
|
||||||
readonly 'tool-pointer': string;
|
|
||||||
readonly 'tool-text': string;
|
|
||||||
readonly trash: string;
|
|
||||||
readonly 'triangle-down': string;
|
|
||||||
readonly 'triangle-up': string;
|
|
||||||
readonly twitter: string;
|
|
||||||
readonly undo: string;
|
|
||||||
readonly ungroup: string;
|
|
||||||
readonly 'unlock-small': string;
|
|
||||||
readonly unlock: string;
|
|
||||||
readonly visible: string;
|
|
||||||
readonly 'warning-triangle': string;
|
|
||||||
readonly 'zoom-in': string;
|
|
||||||
readonly 'zoom-out': string;
|
|
||||||
};
|
|
||||||
readonly translations: {
|
|
||||||
readonly ar: string;
|
|
||||||
readonly ca: string;
|
|
||||||
readonly da: string;
|
|
||||||
readonly de: string;
|
|
||||||
readonly en: string;
|
|
||||||
readonly es: string;
|
|
||||||
readonly fa: string;
|
|
||||||
readonly fi: string;
|
|
||||||
readonly fr: string;
|
|
||||||
readonly gl: string;
|
|
||||||
readonly he: string;
|
|
||||||
readonly 'hi-in': string;
|
|
||||||
readonly hu: string;
|
|
||||||
readonly it: string;
|
|
||||||
readonly ja: string;
|
|
||||||
readonly 'ko-kr': string;
|
|
||||||
readonly ku: string;
|
|
||||||
readonly languages: string;
|
|
||||||
readonly main: string;
|
|
||||||
readonly my: string;
|
|
||||||
readonly ne: string;
|
|
||||||
readonly no: string;
|
|
||||||
readonly pl: string;
|
|
||||||
readonly 'pt-br': string;
|
|
||||||
readonly 'pt-pt': string;
|
|
||||||
readonly ro: string;
|
|
||||||
readonly ru: string;
|
|
||||||
readonly sv: string;
|
|
||||||
readonly te: string;
|
|
||||||
readonly th: string;
|
|
||||||
readonly tr: string;
|
|
||||||
readonly uk: string;
|
|
||||||
readonly vi: string;
|
|
||||||
readonly 'zh-cn': string;
|
|
||||||
readonly 'zh-tw': string;
|
|
||||||
};
|
|
||||||
readonly embedIcons: {
|
|
||||||
readonly codepen: string;
|
|
||||||
readonly codesandbox: string;
|
|
||||||
readonly excalidraw: string;
|
|
||||||
readonly felt: string;
|
|
||||||
readonly figma: string;
|
|
||||||
readonly github_gist: string;
|
|
||||||
readonly google_calendar: string;
|
|
||||||
readonly google_maps: string;
|
|
||||||
readonly google_slides: string;
|
|
||||||
readonly observable: string;
|
|
||||||
readonly replit: string;
|
|
||||||
readonly scratch: string;
|
|
||||||
readonly spotify: string;
|
|
||||||
readonly tldraw: string;
|
|
||||||
readonly vimeo: string;
|
|
||||||
readonly youtube: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// (No @packageDocumentation comment for this package)
|
|
||||||
|
|
||||||
```
|
|
|
@ -29,22 +29,27 @@ import { default as React_2 } from 'react';
|
||||||
import * as React_3 from 'react';
|
import * as React_3 from 'react';
|
||||||
import { ReactElement } from 'react';
|
import { ReactElement } from 'react';
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
|
import { RecordProps } from '@tldraw/tlschema';
|
||||||
import { RecordsDiff } from '@tldraw/store';
|
import { RecordsDiff } from '@tldraw/store';
|
||||||
import { SerializedSchema } from '@tldraw/store';
|
import { SerializedSchema } from '@tldraw/store';
|
||||||
import { SerializedStore } from '@tldraw/store';
|
import { SerializedStore } from '@tldraw/store';
|
||||||
import { ShapeProps } from '@tldraw/tlschema';
|
|
||||||
import { Signal } from '@tldraw/state';
|
import { Signal } from '@tldraw/state';
|
||||||
import { Store } from '@tldraw/store';
|
import { Store } from '@tldraw/store';
|
||||||
import { StoreSchema } from '@tldraw/store';
|
import { StoreSchema } from '@tldraw/store';
|
||||||
import { StoreSnapshot } from '@tldraw/store';
|
import { StoreSnapshot } from '@tldraw/store';
|
||||||
import { StyleProp } from '@tldraw/tlschema';
|
import { StyleProp } from '@tldraw/tlschema';
|
||||||
import { StylePropValue } from '@tldraw/tlschema';
|
import { StylePropValue } from '@tldraw/tlschema';
|
||||||
|
import { TLArrowBinding } from '@tldraw/tlschema';
|
||||||
|
import { TLArrowBindingProps } from '@tldraw/tlschema';
|
||||||
import { TLArrowShape } from '@tldraw/tlschema';
|
import { TLArrowShape } from '@tldraw/tlschema';
|
||||||
import { TLArrowShapeArrowheadStyle } from '@tldraw/tlschema';
|
import { TLArrowShapeArrowheadStyle } from '@tldraw/tlschema';
|
||||||
import { TLAsset } from '@tldraw/tlschema';
|
import { TLAsset } from '@tldraw/tlschema';
|
||||||
import { TLAssetId } from '@tldraw/tlschema';
|
import { TLAssetId } from '@tldraw/tlschema';
|
||||||
import { TLAssetPartial } from '@tldraw/tlschema';
|
import { TLAssetPartial } from '@tldraw/tlschema';
|
||||||
import { TLBaseShape } from '@tldraw/tlschema';
|
import { TLBaseShape } from '@tldraw/tlschema';
|
||||||
|
import { TLBinding } from '@tldraw/tlschema';
|
||||||
|
import { TLBindingId } from '@tldraw/tlschema';
|
||||||
|
import { TLBindingPartial } from '@tldraw/tlschema';
|
||||||
import { TLBookmarkAsset } from '@tldraw/tlschema';
|
import { TLBookmarkAsset } from '@tldraw/tlschema';
|
||||||
import { TLCamera } from '@tldraw/tlschema';
|
import { TLCamera } from '@tldraw/tlschema';
|
||||||
import { TLCursor } from '@tldraw/tlschema';
|
import { TLCursor } from '@tldraw/tlschema';
|
||||||
|
@ -60,14 +65,15 @@ import { TLInstancePresence } from '@tldraw/tlschema';
|
||||||
import { TLPage } from '@tldraw/tlschema';
|
import { TLPage } from '@tldraw/tlschema';
|
||||||
import { TLPageId } from '@tldraw/tlschema';
|
import { TLPageId } from '@tldraw/tlschema';
|
||||||
import { TLParentId } from '@tldraw/tlschema';
|
import { TLParentId } from '@tldraw/tlschema';
|
||||||
|
import { TLPropsMigrations } from '@tldraw/tlschema';
|
||||||
import { TLRecord } from '@tldraw/tlschema';
|
import { TLRecord } from '@tldraw/tlschema';
|
||||||
import { TLScribble } from '@tldraw/tlschema';
|
import { TLScribble } from '@tldraw/tlschema';
|
||||||
import { TLShape } from '@tldraw/tlschema';
|
import { TLShape } from '@tldraw/tlschema';
|
||||||
import { TLShapeId } from '@tldraw/tlschema';
|
import { TLShapeId } from '@tldraw/tlschema';
|
||||||
import { TLShapePartial } from '@tldraw/tlschema';
|
import { TLShapePartial } from '@tldraw/tlschema';
|
||||||
import { TLShapePropsMigrations } from '@tldraw/tlschema';
|
|
||||||
import { TLStore } from '@tldraw/tlschema';
|
import { TLStore } from '@tldraw/tlschema';
|
||||||
import { TLStoreProps } from '@tldraw/tlschema';
|
import { TLStoreProps } from '@tldraw/tlschema';
|
||||||
|
import { TLUnknownBinding } from '@tldraw/tlschema';
|
||||||
import { TLUnknownShape } from '@tldraw/tlschema';
|
import { TLUnknownShape } from '@tldraw/tlschema';
|
||||||
import { TLVideoAsset } from '@tldraw/tlschema';
|
import { TLVideoAsset } from '@tldraw/tlschema';
|
||||||
import { track } from '@tldraw/state';
|
import { track } from '@tldraw/state';
|
||||||
|
@ -138,6 +144,12 @@ export class Arc2d extends Geometry2d {
|
||||||
// @public
|
// @public
|
||||||
export function areAnglesCompatible(a: number, b: number): boolean;
|
export function areAnglesCompatible(a: number, b: number): boolean;
|
||||||
|
|
||||||
|
// @internal
|
||||||
|
export function arrowBindingMakeItNotSo(editor: Editor, arrow: TLArrowShape, terminal: 'end' | 'start'): void;
|
||||||
|
|
||||||
|
// @internal
|
||||||
|
export function arrowBindingMakeItSo(editor: Editor, arrow: TLArrowShape | TLShapeId, target: TLShape | TLShapeId, props: TLArrowBindingProps): void;
|
||||||
|
|
||||||
export { Atom }
|
export { Atom }
|
||||||
|
|
||||||
export { atom }
|
export { atom }
|
||||||
|
@ -169,6 +181,23 @@ export abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> extends Sha
|
||||||
onResize: TLOnResizeHandler<any>;
|
onResize: TLOnResizeHandler<any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export abstract class BindingUtil<Binding extends TLUnknownBinding = TLUnknownBinding> {
|
||||||
|
constructor(editor: Editor);
|
||||||
|
// (undocumented)
|
||||||
|
editor: Editor;
|
||||||
|
abstract getDefaultProps(): Binding['props'];
|
||||||
|
// (undocumented)
|
||||||
|
static migrations?: TLPropsMigrations;
|
||||||
|
// (undocumented)
|
||||||
|
onAfterShapeChange?(binding: Binding, direction: 'from' | 'to', prev: TLShape, next: TLShape): void;
|
||||||
|
// (undocumented)
|
||||||
|
onBeforeShapeDelete?(binding: Binding, direction: 'from' | 'to', shape: TLShape): void;
|
||||||
|
// (undocumented)
|
||||||
|
static props?: RecordProps<TLUnknownBinding>;
|
||||||
|
static type: string;
|
||||||
|
}
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export interface BoundsSnapGeometry {
|
export interface BoundsSnapGeometry {
|
||||||
points?: VecModel[];
|
points?: VecModel[];
|
||||||
|
@ -585,7 +614,7 @@ export class Edge2d extends Geometry2d {
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export class Editor extends EventEmitter<TLEventMap> {
|
export class Editor extends EventEmitter<TLEventMap> {
|
||||||
constructor({ store, user, shapeUtils, tools, getContainer, initialState, inferDarkMode, }: TLEditorOptions);
|
constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, initialState, inferDarkMode, }: TLEditorOptions);
|
||||||
addOpenMenu(id: string): this;
|
addOpenMenu(id: string): this;
|
||||||
alignShapes(shapes: TLShape[] | TLShapeId[], operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top'): this;
|
alignShapes(shapes: TLShape[] | TLShapeId[], operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top'): this;
|
||||||
animateShape(partial: null | TLShapePartial | undefined, animationOptions?: TLAnimationOptions): this;
|
animateShape(partial: null | TLShapePartial | undefined, animationOptions?: TLAnimationOptions): this;
|
||||||
|
@ -605,6 +634,9 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
bail(): this;
|
bail(): this;
|
||||||
bailToMark(id: string): this;
|
bailToMark(id: string): this;
|
||||||
batch(fn: () => void, opts?: TLHistoryBatchOptions): this;
|
batch(fn: () => void, opts?: TLHistoryBatchOptions): this;
|
||||||
|
bindingUtils: {
|
||||||
|
readonly [K in string]?: BindingUtil<TLUnknownBinding>;
|
||||||
|
};
|
||||||
bringForward(shapes: TLShape[] | TLShapeId[]): this;
|
bringForward(shapes: TLShape[] | TLShapeId[]): this;
|
||||||
bringToFront(shapes: TLShape[] | TLShapeId[]): this;
|
bringToFront(shapes: TLShape[] | TLShapeId[]): this;
|
||||||
cancel(): this;
|
cancel(): this;
|
||||||
|
@ -619,6 +651,10 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
// @internal (undocumented)
|
// @internal (undocumented)
|
||||||
crash(error: unknown): this;
|
crash(error: unknown): this;
|
||||||
createAssets(assets: TLAsset[]): this;
|
createAssets(assets: TLAsset[]): this;
|
||||||
|
// (undocumented)
|
||||||
|
createBinding(partial: RequiredKeys<TLBindingPartial, 'fromId' | 'toId' | 'type'>): void;
|
||||||
|
// (undocumented)
|
||||||
|
createBindings(partials: RequiredKeys<TLBindingPartial, 'fromId' | 'toId' | 'type'>[]): void;
|
||||||
// @internal (undocumented)
|
// @internal (undocumented)
|
||||||
createErrorAnnotations(origin: string, willCrashApp: 'unknown' | boolean): {
|
createErrorAnnotations(origin: string, willCrashApp: 'unknown' | boolean): {
|
||||||
extras: {
|
extras: {
|
||||||
|
@ -636,6 +672,10 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this;
|
createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this;
|
||||||
createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): this;
|
createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): this;
|
||||||
deleteAssets(assets: TLAsset[] | TLAssetId[]): this;
|
deleteAssets(assets: TLAsset[] | TLAssetId[]): this;
|
||||||
|
// (undocumented)
|
||||||
|
deleteBinding(binding: TLBinding | TLBindingId): void;
|
||||||
|
// (undocumented)
|
||||||
|
deleteBindings(bindings: (TLBinding | TLBindingId)[]): void;
|
||||||
deleteOpenMenu(id: string): this;
|
deleteOpenMenu(id: string): this;
|
||||||
deletePage(page: TLPage | TLPageId): this;
|
deletePage(page: TLPage | TLPageId): this;
|
||||||
deleteShape(id: TLShapeId): this;
|
deleteShape(id: TLShapeId): this;
|
||||||
|
@ -671,15 +711,25 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
findCommonAncestor(shapes: TLShape[] | TLShapeId[], predicate?: (shape: TLShape) => boolean): TLShapeId | undefined;
|
findCommonAncestor(shapes: TLShape[] | TLShapeId[], predicate?: (shape: TLShape) => boolean): TLShapeId | undefined;
|
||||||
findShapeAncestor(shape: TLShape | TLShapeId, predicate: (parent: TLShape) => boolean): TLShape | undefined;
|
findShapeAncestor(shape: TLShape | TLShapeId, predicate: (parent: TLShape) => boolean): TLShape | undefined;
|
||||||
flipShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical'): this;
|
flipShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical'): this;
|
||||||
|
// (undocumented)
|
||||||
|
getAllBindingsForShape(shape: TLShape | TLShapeId): TLBinding[];
|
||||||
getAncestorPageId(shape?: TLShape | TLShapeId): TLPageId | undefined;
|
getAncestorPageId(shape?: TLShape | TLShapeId): TLPageId | undefined;
|
||||||
getArrowInfo(shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;
|
getArrowInfo(shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;
|
||||||
getArrowsBoundTo(shapeId: TLShapeId): {
|
getArrowsBoundTo(shapeId: TLShapeId): TLArrowShape[];
|
||||||
arrowId: TLShapeId;
|
|
||||||
handleId: "end" | "start";
|
|
||||||
}[];
|
|
||||||
getAsset(asset: TLAsset | TLAssetId): TLAsset | undefined;
|
getAsset(asset: TLAsset | TLAssetId): TLAsset | undefined;
|
||||||
getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined>;
|
getAssetForExternalContent(info: TLExternalAssetContent): Promise<TLAsset | undefined>;
|
||||||
getAssets(): (TLBookmarkAsset | TLImageAsset | TLVideoAsset)[];
|
getAssets(): (TLBookmarkAsset | TLImageAsset | TLVideoAsset)[];
|
||||||
|
// (undocumented)
|
||||||
|
getBinding(id: TLBindingId): TLBinding | undefined;
|
||||||
|
// (undocumented)
|
||||||
|
getBindingsFromShape<Binding extends TLUnknownBinding = TLBinding>(shape: TLShape | TLShapeId, type: Binding['type']): Binding[];
|
||||||
|
// (undocumented)
|
||||||
|
getBindingsToShape<Binding extends TLUnknownBinding = TLBinding>(shape: TLShape | TLShapeId, type: Binding['type']): Binding[];
|
||||||
|
getBindingUtil<S extends TLUnknownBinding>(binding: S | TLBindingPartial<S>): BindingUtil<S>;
|
||||||
|
// (undocumented)
|
||||||
|
getBindingUtil<S extends TLUnknownBinding>(type: S['type']): BindingUtil<S>;
|
||||||
|
// (undocumented)
|
||||||
|
getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
|
||||||
getCamera(): TLCamera;
|
getCamera(): TLCamera;
|
||||||
getCameraState(): "idle" | "moving";
|
getCameraState(): "idle" | "moving";
|
||||||
getCanRedo(): boolean;
|
getCanRedo(): boolean;
|
||||||
|
@ -940,6 +990,10 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
ungroupShapes(ids: TLShape[]): this;
|
ungroupShapes(ids: TLShape[]): this;
|
||||||
updateAssets(assets: TLAssetPartial[]): this;
|
updateAssets(assets: TLAssetPartial[]): this;
|
||||||
|
// (undocumented)
|
||||||
|
updateBinding(partial: TLBindingPartial): void;
|
||||||
|
// (undocumented)
|
||||||
|
updateBindings(partials: (null | TLBindingPartial | undefined)[]): void;
|
||||||
updateCurrentPageState(partial: Partial<Omit<TLInstancePageState, 'editingShapeId' | 'focusedGroupId' | 'pageId' | 'selectedShapeIds'>>, historyOptions?: TLHistoryBatchOptions): this;
|
updateCurrentPageState(partial: Partial<Omit<TLInstancePageState, 'editingShapeId' | 'focusedGroupId' | 'pageId' | 'selectedShapeIds'>>, historyOptions?: TLHistoryBatchOptions): this;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
_updateCurrentPageState: (partial: Partial<Omit<TLInstancePageState, 'selectedShapeIds'>>, historyOptions?: TLHistoryBatchOptions) => void;
|
_updateCurrentPageState: (partial: Partial<Omit<TLInstancePageState, 'selectedShapeIds'>>, historyOptions?: TLHistoryBatchOptions) => void;
|
||||||
|
@ -1085,8 +1139,11 @@ export abstract class Geometry2d {
|
||||||
// @public
|
// @public
|
||||||
export function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
|
export function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
|
||||||
|
|
||||||
|
// @internal (undocumented)
|
||||||
|
export function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape): {
|
export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
|
||||||
end: Vec;
|
end: Vec;
|
||||||
start: Vec;
|
start: Vec;
|
||||||
};
|
};
|
||||||
|
@ -1182,11 +1239,11 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLGroupShape): JSX_2.Element;
|
indicator(shape: TLGroupShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onChildrenChange: TLOnChildrenChangeHandler<TLGroupShape>;
|
onChildrenChange: TLOnChildrenChangeHandler<TLGroupShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static props: ShapeProps<TLGroupShape>;
|
static props: RecordProps<TLGroupShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static type: "group";
|
static type: "group";
|
||||||
}
|
}
|
||||||
|
@ -1715,7 +1772,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
||||||
abstract indicator(shape: Shape): any;
|
abstract indicator(shape: Shape): any;
|
||||||
isAspectRatioLocked: TLShapeUtilFlag<Shape>;
|
isAspectRatioLocked: TLShapeUtilFlag<Shape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations?: LegacyMigrations | TLShapePropsMigrations;
|
static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
||||||
onBeforeCreate?: TLOnBeforeCreateHandler<Shape>;
|
onBeforeCreate?: TLOnBeforeCreateHandler<Shape>;
|
||||||
onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>;
|
onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>;
|
||||||
// @internal
|
// @internal
|
||||||
|
@ -1740,7 +1797,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
||||||
onTranslateEnd?: TLOnTranslateEndHandler<Shape>;
|
onTranslateEnd?: TLOnTranslateEndHandler<Shape>;
|
||||||
onTranslateStart?: TLOnTranslateStartHandler<Shape>;
|
onTranslateStart?: TLOnTranslateStartHandler<Shape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static props?: ShapeProps<TLUnknownShape>;
|
static props?: RecordProps<TLUnknownShape>;
|
||||||
// @internal
|
// @internal
|
||||||
providesBackgroundForChildren(shape: Shape): boolean;
|
providesBackgroundForChildren(shape: Shape): boolean;
|
||||||
toBackgroundSvg?(shape: Shape, ctx: SvgExportContext): null | Promise<null | ReactElement> | ReactElement;
|
toBackgroundSvg?(shape: Shape, ctx: SvgExportContext): null | Promise<null | ReactElement> | ReactElement;
|
||||||
|
@ -1985,6 +2042,9 @@ export type TLAnimationOptions = Partial<{
|
||||||
easing: (t: number) => number;
|
easing: (t: number) => number;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
|
export type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
|
||||||
|
|
||||||
|
@ -2006,6 +2066,7 @@ export interface TLArcInfo {
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLArrowInfo = {
|
export type TLArrowInfo = {
|
||||||
|
bindings: TLArrowBindings;
|
||||||
bodyArc: TLArcInfo;
|
bodyArc: TLArcInfo;
|
||||||
end: TLArrowPoint;
|
end: TLArrowPoint;
|
||||||
handleArc: TLArcInfo;
|
handleArc: TLArcInfo;
|
||||||
|
@ -2014,6 +2075,7 @@ export type TLArrowInfo = {
|
||||||
middle: VecLike;
|
middle: VecLike;
|
||||||
start: TLArrowPoint;
|
start: TLArrowPoint;
|
||||||
} | {
|
} | {
|
||||||
|
bindings: TLArrowBindings;
|
||||||
end: TLArrowPoint;
|
end: TLArrowPoint;
|
||||||
isStraight: true;
|
isStraight: true;
|
||||||
isValid: boolean;
|
isValid: boolean;
|
||||||
|
@ -2059,6 +2121,18 @@ export type TLBeforeCreateHandler<R extends TLRecord> = (record: R, source: 'rem
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLBeforeDeleteHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => false | void;
|
export type TLBeforeDeleteHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => false | void;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export interface TLBindingUtilConstructor<T extends TLUnknownBinding, U extends BindingUtil<T> = BindingUtil<T>> {
|
||||||
|
// (undocumented)
|
||||||
|
new (editor: Editor): U;
|
||||||
|
// (undocumented)
|
||||||
|
migrations?: TLPropsMigrations;
|
||||||
|
// (undocumented)
|
||||||
|
props?: RecordProps<T>;
|
||||||
|
// (undocumented)
|
||||||
|
type: T['type'];
|
||||||
|
}
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLBrushProps = {
|
export type TLBrushProps = {
|
||||||
brush: BoxModel;
|
brush: BoxModel;
|
||||||
|
@ -2139,6 +2213,7 @@ export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;
|
||||||
// @public
|
// @public
|
||||||
export interface TldrawEditorBaseProps {
|
export interface TldrawEditorBaseProps {
|
||||||
autoFocus?: boolean;
|
autoFocus?: boolean;
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
components?: TLEditorComponents;
|
components?: TLEditorComponents;
|
||||||
|
@ -2170,6 +2245,7 @@ export type TLEditorComponents = Partial<{
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export interface TLEditorOptions {
|
export interface TLEditorOptions {
|
||||||
|
bindingUtils: readonly TLBindingUtilConstructor<TLUnknownBinding>[];
|
||||||
getContainer: () => HTMLElement;
|
getContainer: () => HTMLElement;
|
||||||
inferDarkMode?: boolean;
|
inferDarkMode?: boolean;
|
||||||
initialState?: string;
|
initialState?: string;
|
||||||
|
@ -2595,9 +2671,9 @@ export interface TLShapeUtilConstructor<T extends TLUnknownShape, U extends Shap
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
new (editor: Editor): U;
|
new (editor: Editor): U;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
migrations?: LegacyMigrations | MigrationSequence | TLShapePropsMigrations;
|
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
props?: ShapeProps<T>;
|
props?: RecordProps<T>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
type: T['type'];
|
type: T['type'];
|
||||||
}
|
}
|
||||||
|
@ -2633,6 +2709,7 @@ export type TLStoreOptions = {
|
||||||
id?: string;
|
id?: string;
|
||||||
initialData?: SerializedStore<TLRecord>;
|
initialData?: SerializedStore<TLRecord>;
|
||||||
} & ({
|
} & ({
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
||||||
migrations?: readonly MigrationSequence[];
|
migrations?: readonly MigrationSequence[];
|
||||||
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
|
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
|
||||||
} | {
|
} | {
|
||||||
|
|
|
@ -104,6 +104,7 @@ export {
|
||||||
type TLStoreOptions,
|
type TLStoreOptions,
|
||||||
} from './lib/config/createTLStore'
|
} from './lib/config/createTLStore'
|
||||||
export { createTLUser } from './lib/config/createTLUser'
|
export { createTLUser } from './lib/config/createTLUser'
|
||||||
|
export { type TLAnyBindingUtilConstructor } from './lib/config/defaultBindings'
|
||||||
export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
|
export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
|
||||||
export {
|
export {
|
||||||
ANIMATION_MEDIUM_MS,
|
ANIMATION_MEDIUM_MS,
|
||||||
|
@ -130,6 +131,7 @@ export {
|
||||||
type TLEditorOptions,
|
type TLEditorOptions,
|
||||||
type TLResizeShapeOptions,
|
type TLResizeShapeOptions,
|
||||||
} from './lib/editor/Editor'
|
} from './lib/editor/Editor'
|
||||||
|
export { BindingUtil, type TLBindingUtilConstructor } from './lib/editor/bindings/BindingUtil'
|
||||||
export { HistoryManager } from './lib/editor/managers/HistoryManager'
|
export { HistoryManager } from './lib/editor/managers/HistoryManager'
|
||||||
export type {
|
export type {
|
||||||
SideEffectManager,
|
SideEffectManager,
|
||||||
|
@ -186,7 +188,12 @@ export {
|
||||||
type TLArrowInfo,
|
type TLArrowInfo,
|
||||||
type TLArrowPoint,
|
type TLArrowPoint,
|
||||||
} from './lib/editor/shapes/shared/arrow/arrow-types'
|
} from './lib/editor/shapes/shared/arrow/arrow-types'
|
||||||
export { getArrowTerminalsInArrowSpace } from './lib/editor/shapes/shared/arrow/shared'
|
export {
|
||||||
|
arrowBindingMakeItNotSo,
|
||||||
|
arrowBindingMakeItSo,
|
||||||
|
getArrowBindings,
|
||||||
|
getArrowTerminalsInArrowSpace,
|
||||||
|
} from './lib/editor/shapes/shared/arrow/shared'
|
||||||
export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/resizeBox'
|
export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/resizeBox'
|
||||||
export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
|
export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
|
||||||
export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
|
export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
|
||||||
|
|
|
@ -15,6 +15,7 @@ import classNames from 'classnames'
|
||||||
import { OptionalErrorBoundary } from './components/ErrorBoundary'
|
import { OptionalErrorBoundary } from './components/ErrorBoundary'
|
||||||
import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
|
import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
|
||||||
import { TLUser, createTLUser } from './config/createTLUser'
|
import { TLUser, createTLUser } from './config/createTLUser'
|
||||||
|
import { TLAnyBindingUtilConstructor } from './config/defaultBindings'
|
||||||
import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
|
import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
|
||||||
import { Editor } from './editor/Editor'
|
import { Editor } from './editor/Editor'
|
||||||
import { TLStateNodeConstructor } from './editor/tools/StateNode'
|
import { TLStateNodeConstructor } from './editor/tools/StateNode'
|
||||||
|
@ -75,6 +76,11 @@ export interface TldrawEditorBaseProps {
|
||||||
*/
|
*/
|
||||||
shapeUtils?: readonly TLAnyShapeUtilConstructor[]
|
shapeUtils?: readonly TLAnyShapeUtilConstructor[]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An array of binding utils to use in the editor.
|
||||||
|
*/
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[]
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An array of tools to add to the editor's state chart.
|
* An array of tools to add to the editor's state chart.
|
||||||
*/
|
*/
|
||||||
|
@ -135,6 +141,7 @@ declare global {
|
||||||
}
|
}
|
||||||
|
|
||||||
const EMPTY_SHAPE_UTILS_ARRAY = [] as const
|
const EMPTY_SHAPE_UTILS_ARRAY = [] as const
|
||||||
|
const EMPTY_BINDING_UTILS_ARRAY = [] as const
|
||||||
const EMPTY_TOOLS_ARRAY = [] as const
|
const EMPTY_TOOLS_ARRAY = [] as const
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
|
@ -157,6 +164,7 @@ export const TldrawEditor = memo(function TldrawEditor({
|
||||||
const withDefaults = {
|
const withDefaults = {
|
||||||
...rest,
|
...rest,
|
||||||
shapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,
|
shapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,
|
||||||
|
bindingUtils: rest.bindingUtils ?? EMPTY_BINDING_UTILS_ARRAY,
|
||||||
tools: rest.tools ?? EMPTY_TOOLS_ARRAY,
|
tools: rest.tools ?? EMPTY_TOOLS_ARRAY,
|
||||||
components,
|
components,
|
||||||
}
|
}
|
||||||
|
@ -197,12 +205,25 @@ export const TldrawEditor = memo(function TldrawEditor({
|
||||||
})
|
})
|
||||||
|
|
||||||
function TldrawEditorWithOwnStore(
|
function TldrawEditorWithOwnStore(
|
||||||
props: Required<TldrawEditorProps & { store: undefined; user: TLUser }, 'shapeUtils' | 'tools'>
|
props: Required<
|
||||||
|
TldrawEditorProps & { store: undefined; user: TLUser },
|
||||||
|
'shapeUtils' | 'bindingUtils' | 'tools'
|
||||||
|
>
|
||||||
) {
|
) {
|
||||||
const { defaultName, snapshot, initialData, shapeUtils, persistenceKey, sessionId, user } = props
|
const {
|
||||||
|
defaultName,
|
||||||
|
snapshot,
|
||||||
|
initialData,
|
||||||
|
shapeUtils,
|
||||||
|
bindingUtils,
|
||||||
|
persistenceKey,
|
||||||
|
sessionId,
|
||||||
|
user,
|
||||||
|
} = props
|
||||||
|
|
||||||
const syncedStore = useLocalStore({
|
const syncedStore = useLocalStore({
|
||||||
shapeUtils,
|
shapeUtils,
|
||||||
|
bindingUtils,
|
||||||
initialData,
|
initialData,
|
||||||
persistenceKey,
|
persistenceKey,
|
||||||
sessionId,
|
sessionId,
|
||||||
|
@ -219,7 +240,7 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
|
||||||
...rest
|
...rest
|
||||||
}: Required<
|
}: Required<
|
||||||
TldrawEditorProps & { store: TLStoreWithStatus; user: TLUser },
|
TldrawEditorProps & { store: TLStoreWithStatus; user: TLUser },
|
||||||
'shapeUtils' | 'tools'
|
'shapeUtils' | 'bindingUtils' | 'tools'
|
||||||
>) {
|
>) {
|
||||||
const container = useContainer()
|
const container = useContainer()
|
||||||
|
|
||||||
|
@ -262,6 +283,7 @@ function TldrawEditorWithReadyStore({
|
||||||
store,
|
store,
|
||||||
tools,
|
tools,
|
||||||
shapeUtils,
|
shapeUtils,
|
||||||
|
bindingUtils,
|
||||||
user,
|
user,
|
||||||
initialState,
|
initialState,
|
||||||
autoFocus = true,
|
autoFocus = true,
|
||||||
|
@ -271,7 +293,7 @@ function TldrawEditorWithReadyStore({
|
||||||
store: TLStore
|
store: TLStore
|
||||||
user: TLUser
|
user: TLUser
|
||||||
},
|
},
|
||||||
'shapeUtils' | 'tools'
|
'shapeUtils' | 'bindingUtils' | 'tools'
|
||||||
>) {
|
>) {
|
||||||
const { ErrorFallback } = useEditorComponents()
|
const { ErrorFallback } = useEditorComponents()
|
||||||
const container = useContainer()
|
const container = useContainer()
|
||||||
|
@ -281,6 +303,7 @@ function TldrawEditorWithReadyStore({
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
store,
|
store,
|
||||||
shapeUtils,
|
shapeUtils,
|
||||||
|
bindingUtils,
|
||||||
tools,
|
tools,
|
||||||
getContainer: () => container,
|
getContainer: () => container,
|
||||||
user,
|
user,
|
||||||
|
@ -292,7 +315,7 @@ function TldrawEditorWithReadyStore({
|
||||||
return () => {
|
return () => {
|
||||||
editor.dispose()
|
editor.dispose()
|
||||||
}
|
}
|
||||||
}, [container, shapeUtils, tools, store, user, initialState, inferDarkMode])
|
}, [container, shapeUtils, bindingUtils, tools, store, user, initialState, inferDarkMode])
|
||||||
|
|
||||||
const crashingError = useSyncExternalStore(
|
const crashingError = useSyncExternalStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
|
|
|
@ -1,13 +1,6 @@
|
||||||
import { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'
|
import { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'
|
||||||
import {
|
import { SchemaPropsInfo, TLRecord, TLStore, TLStoreProps, createTLSchema } from '@tldraw/tlschema'
|
||||||
SchemaShapeInfo,
|
import { TLAnyBindingUtilConstructor, checkBindings } from './defaultBindings'
|
||||||
TLRecord,
|
|
||||||
TLStore,
|
|
||||||
TLStoreProps,
|
|
||||||
TLUnknownShape,
|
|
||||||
createTLSchema,
|
|
||||||
} from '@tldraw/tlschema'
|
|
||||||
import { TLShapeUtilConstructor } from '../editor/shapes/ShapeUtil'
|
|
||||||
import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'
|
import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
|
@ -16,7 +9,11 @@ export type TLStoreOptions = {
|
||||||
defaultName?: string
|
defaultName?: string
|
||||||
id?: string
|
id?: string
|
||||||
} & (
|
} & (
|
||||||
| { shapeUtils?: readonly TLAnyShapeUtilConstructor[]; migrations?: readonly MigrationSequence[] }
|
| {
|
||||||
|
shapeUtils?: readonly TLAnyShapeUtilConstructor[]
|
||||||
|
migrations?: readonly MigrationSequence[]
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[]
|
||||||
|
}
|
||||||
| { schema?: StoreSchema<TLRecord, TLStoreProps> }
|
| { schema?: StoreSchema<TLRecord, TLStoreProps> }
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -41,9 +38,12 @@ export function createTLStore({
|
||||||
rest.schema
|
rest.schema
|
||||||
: // we need a schema
|
: // we need a schema
|
||||||
createTLSchema({
|
createTLSchema({
|
||||||
shapes: currentPageShapesToShapeMap(
|
shapes: utilsToMap(
|
||||||
checkShapesAndAddCore('shapeUtils' in rest && rest.shapeUtils ? rest.shapeUtils : [])
|
checkShapesAndAddCore('shapeUtils' in rest && rest.shapeUtils ? rest.shapeUtils : [])
|
||||||
),
|
),
|
||||||
|
bindings: utilsToMap(
|
||||||
|
checkBindings('bindingUtils' in rest && rest.bindingUtils ? rest.bindingUtils : [])
|
||||||
|
),
|
||||||
migrations: 'migrations' in rest ? rest.migrations : [],
|
migrations: 'migrations' in rest ? rest.migrations : [],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -57,9 +57,9 @@ export function createTLStore({
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function currentPageShapesToShapeMap(shapeUtils: TLShapeUtilConstructor<TLUnknownShape>[]) {
|
function utilsToMap<T extends SchemaPropsInfo & { type: string }>(utils: T[]) {
|
||||||
return Object.fromEntries(
|
return Object.fromEntries(
|
||||||
shapeUtils.map((s): [string, SchemaShapeInfo] => [
|
utils.map((s): [string, SchemaPropsInfo] => [
|
||||||
s.type,
|
s.type,
|
||||||
{
|
{
|
||||||
props: s.props,
|
props: s.props,
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { TLBindingUtilConstructor } from '../editor/bindings/BindingUtil'
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>
|
||||||
|
|
||||||
|
export function checkBindings(customBindings: readonly TLAnyBindingUtilConstructor[]) {
|
||||||
|
const bindings = [] as TLAnyBindingUtilConstructor[]
|
||||||
|
|
||||||
|
const addedCustomBindingTypes = new Set<string>()
|
||||||
|
for (const customBinding of customBindings) {
|
||||||
|
if (addedCustomBindingTypes.has(customBinding.type)) {
|
||||||
|
throw new Error(`Binding type "${customBinding.type}" is defined more than once`)
|
||||||
|
}
|
||||||
|
bindings.push(customBinding)
|
||||||
|
addedCustomBindingTypes.add(customBinding.type)
|
||||||
|
}
|
||||||
|
|
||||||
|
return bindings
|
||||||
|
}
|
|
@ -6,10 +6,14 @@ import {
|
||||||
PageRecordType,
|
PageRecordType,
|
||||||
StyleProp,
|
StyleProp,
|
||||||
StylePropValue,
|
StylePropValue,
|
||||||
|
TLArrowBinding,
|
||||||
TLArrowShape,
|
TLArrowShape,
|
||||||
TLAsset,
|
TLAsset,
|
||||||
TLAssetId,
|
TLAssetId,
|
||||||
TLAssetPartial,
|
TLAssetPartial,
|
||||||
|
TLBinding,
|
||||||
|
TLBindingId,
|
||||||
|
TLBindingPartial,
|
||||||
TLCursor,
|
TLCursor,
|
||||||
TLCursorType,
|
TLCursorType,
|
||||||
TLDOCUMENT_ID,
|
TLDOCUMENT_ID,
|
||||||
|
@ -31,8 +35,10 @@ import {
|
||||||
TLShapeId,
|
TLShapeId,
|
||||||
TLShapePartial,
|
TLShapePartial,
|
||||||
TLStore,
|
TLStore,
|
||||||
|
TLUnknownBinding,
|
||||||
TLUnknownShape,
|
TLUnknownShape,
|
||||||
TLVideoAsset,
|
TLVideoAsset,
|
||||||
|
createBindingId,
|
||||||
createShapeId,
|
createShapeId,
|
||||||
getShapePropKeysByStyle,
|
getShapePropKeysByStyle,
|
||||||
isPageId,
|
isPageId,
|
||||||
|
@ -60,6 +66,7 @@ import { EventEmitter } from 'eventemitter3'
|
||||||
import { flushSync } from 'react-dom'
|
import { flushSync } from 'react-dom'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import { TLUser, createTLUser } from '../config/createTLUser'
|
import { TLUser, createTLUser } from '../config/createTLUser'
|
||||||
|
import { checkBindings } from '../config/defaultBindings'
|
||||||
import { checkShapesAndAddCore } from '../config/defaultShapes'
|
import { checkShapesAndAddCore } from '../config/defaultShapes'
|
||||||
import {
|
import {
|
||||||
ANIMATION_MEDIUM_MS,
|
ANIMATION_MEDIUM_MS,
|
||||||
|
@ -98,7 +105,7 @@ import { getIncrementedName } from '../utils/getIncrementedName'
|
||||||
import { getReorderingShapesChanges } from '../utils/reorderShapes'
|
import { getReorderingShapesChanges } from '../utils/reorderShapes'
|
||||||
import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
|
import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
|
||||||
import { uniqueId } from '../utils/uniqueId'
|
import { uniqueId } from '../utils/uniqueId'
|
||||||
import { arrowBindingsIndex } from './derivations/arrowBindingsIndex'
|
import { BindingUtil, TLBindingUtilConstructor } from './bindings/BindingUtil'
|
||||||
import { notVisibleShapes } from './derivations/notVisibleShapes'
|
import { notVisibleShapes } from './derivations/notVisibleShapes'
|
||||||
import { parentsToChildren } from './derivations/parentsToChildren'
|
import { parentsToChildren } from './derivations/parentsToChildren'
|
||||||
import { deriveShapeIdsInCurrentPage } from './derivations/shapeIdsInCurrentPage'
|
import { deriveShapeIdsInCurrentPage } from './derivations/shapeIdsInCurrentPage'
|
||||||
|
@ -115,7 +122,7 @@ import { UserPreferencesManager } from './managers/UserPreferencesManager'
|
||||||
import { ShapeUtil, TLResizeMode, TLShapeUtilConstructor } from './shapes/ShapeUtil'
|
import { ShapeUtil, TLResizeMode, TLShapeUtilConstructor } from './shapes/ShapeUtil'
|
||||||
import { TLArrowInfo } from './shapes/shared/arrow/arrow-types'
|
import { TLArrowInfo } from './shapes/shared/arrow/arrow-types'
|
||||||
import { getCurvedArrowInfo } from './shapes/shared/arrow/curved-arrow'
|
import { getCurvedArrowInfo } from './shapes/shared/arrow/curved-arrow'
|
||||||
import { getArrowTerminalsInArrowSpace, getIsArrowStraight } from './shapes/shared/arrow/shared'
|
import { getArrowBindings, getIsArrowStraight } from './shapes/shared/arrow/shared'
|
||||||
import { getStraightArrowInfo } from './shapes/shared/arrow/straight-arrow'
|
import { getStraightArrowInfo } from './shapes/shared/arrow/straight-arrow'
|
||||||
import { RootState } from './tools/RootState'
|
import { RootState } from './tools/RootState'
|
||||||
import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
|
import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
|
||||||
|
@ -160,6 +167,10 @@ export interface TLEditorOptions {
|
||||||
* An array of shapes to use in the editor. These will be used to create and manage shapes in the editor.
|
* An array of shapes to use in the editor. These will be used to create and manage shapes in the editor.
|
||||||
*/
|
*/
|
||||||
shapeUtils: readonly TLShapeUtilConstructor<TLUnknownShape>[]
|
shapeUtils: readonly TLShapeUtilConstructor<TLUnknownShape>[]
|
||||||
|
/**
|
||||||
|
* An array of bindings to use in the editor. These will be used to create and manage bindings in the editor.
|
||||||
|
*/
|
||||||
|
bindingUtils: readonly TLBindingUtilConstructor<TLUnknownBinding>[]
|
||||||
/**
|
/**
|
||||||
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
|
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
|
||||||
*/
|
*/
|
||||||
|
@ -189,6 +200,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
store,
|
store,
|
||||||
user,
|
user,
|
||||||
shapeUtils,
|
shapeUtils,
|
||||||
|
bindingUtils,
|
||||||
tools,
|
tools,
|
||||||
getContainer,
|
getContainer,
|
||||||
initialState,
|
initialState,
|
||||||
|
@ -248,6 +260,14 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
this.shapeUtils = _shapeUtils
|
this.shapeUtils = _shapeUtils
|
||||||
this.styleProps = _styleProps
|
this.styleProps = _styleProps
|
||||||
|
|
||||||
|
const allBindingUtils = checkBindings(bindingUtils)
|
||||||
|
const _bindingUtils = {} as Record<string, BindingUtil<any>>
|
||||||
|
for (const Util of allBindingUtils) {
|
||||||
|
const util = new Util(this)
|
||||||
|
_bindingUtils[Util.type] = util
|
||||||
|
}
|
||||||
|
this.bindingUtils = _bindingUtils
|
||||||
|
|
||||||
// Tools.
|
// Tools.
|
||||||
// Accept tools from constructor parameters which may not conflict with the root note's default or
|
// Accept tools from constructor parameters which may not conflict with the root note's default or
|
||||||
// "baked in" tools, select and zoom.
|
// "baked in" tools, select and zoom.
|
||||||
|
@ -265,118 +285,118 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
|
|
||||||
const invalidParents = new Set<TLShapeId>()
|
const invalidParents = new Set<TLShapeId>()
|
||||||
|
|
||||||
const reparentArrow = (arrowId: TLArrowShape['id']) => {
|
// const reparentArrow = (arrowId: TLArrowShape['id']) => {
|
||||||
const arrow = this.getShape<TLArrowShape>(arrowId)
|
// const arrow = this.getShape<TLArrowShape>(arrowId)
|
||||||
if (!arrow) return
|
// if (!arrow) return
|
||||||
const { start, end } = arrow.props
|
// const { start, end } = arrow.props
|
||||||
const startShape = start.type === 'binding' ? this.getShape(start.boundShapeId) : undefined
|
// const startShape = start.type === 'binding' ? this.getShape(start.boundShapeId) : undefined
|
||||||
const endShape = end.type === 'binding' ? this.getShape(end.boundShapeId) : undefined
|
// const endShape = end.type === 'binding' ? this.getShape(end.boundShapeId) : undefined
|
||||||
|
|
||||||
const parentPageId = this.getAncestorPageId(arrow)
|
// const parentPageId = this.getAncestorPageId(arrow)
|
||||||
if (!parentPageId) return
|
// if (!parentPageId) return
|
||||||
|
|
||||||
let nextParentId: TLParentId
|
// let nextParentId: TLParentId
|
||||||
if (startShape && endShape) {
|
// if (startShape && endShape) {
|
||||||
// if arrow has two bindings, always parent arrow to closest common ancestor of the bindings
|
// // if arrow has two bindings, always parent arrow to closest common ancestor of the bindings
|
||||||
nextParentId = this.findCommonAncestor([startShape, endShape]) ?? parentPageId
|
// nextParentId = this.findCommonAncestor([startShape, endShape]) ?? parentPageId
|
||||||
} else if (startShape || endShape) {
|
// } else if (startShape || endShape) {
|
||||||
const bindingParentId = (startShape || endShape)?.parentId
|
// const bindingParentId = (startShape || endShape)?.parentId
|
||||||
// If the arrow and the shape that it is bound to have the same parent, then keep that parent
|
// // If the arrow and the shape that it is bound to have the same parent, then keep that parent
|
||||||
if (bindingParentId && bindingParentId === arrow.parentId) {
|
// if (bindingParentId && bindingParentId === arrow.parentId) {
|
||||||
nextParentId = arrow.parentId
|
// nextParentId = arrow.parentId
|
||||||
} else {
|
// } else {
|
||||||
// if arrow has one binding, keep arrow on its own page
|
// // if arrow has one binding, keep arrow on its own page
|
||||||
nextParentId = parentPageId
|
// nextParentId = parentPageId
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (nextParentId && nextParentId !== arrow.parentId) {
|
// if (nextParentId && nextParentId !== arrow.parentId) {
|
||||||
this.reparentShapes([arrowId], nextParentId)
|
// this.reparentShapes([arrowId], nextParentId)
|
||||||
}
|
// }
|
||||||
|
|
||||||
const reparentedArrow = this.getShape<TLArrowShape>(arrowId)
|
// const reparentedArrow = this.getShape<TLArrowShape>(arrowId)
|
||||||
if (!reparentedArrow) throw Error('no reparented arrow')
|
// if (!reparentedArrow) throw Error('no reparented arrow')
|
||||||
|
|
||||||
const startSibling = this.getShapeNearestSibling(reparentedArrow, startShape)
|
// const startSibling = this.getShapeNearestSibling(reparentedArrow, startShape)
|
||||||
const endSibling = this.getShapeNearestSibling(reparentedArrow, endShape)
|
// const endSibling = this.getShapeNearestSibling(reparentedArrow, endShape)
|
||||||
|
|
||||||
let highestSibling: TLShape | undefined
|
// let highestSibling: TLShape | undefined
|
||||||
|
|
||||||
if (startSibling && endSibling) {
|
// if (startSibling && endSibling) {
|
||||||
highestSibling = startSibling.index > endSibling.index ? startSibling : endSibling
|
// highestSibling = startSibling.index > endSibling.index ? startSibling : endSibling
|
||||||
} else if (startSibling && !endSibling) {
|
// } else if (startSibling && !endSibling) {
|
||||||
highestSibling = startSibling
|
// highestSibling = startSibling
|
||||||
} else if (endSibling && !startSibling) {
|
// } else if (endSibling && !startSibling) {
|
||||||
highestSibling = endSibling
|
// highestSibling = endSibling
|
||||||
} else {
|
// } else {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
let finalIndex: IndexKey
|
// let finalIndex: IndexKey
|
||||||
|
|
||||||
const higherSiblings = this.getSortedChildIdsForParent(highestSibling.parentId)
|
// const higherSiblings = this.getSortedChildIdsForParent(highestSibling.parentId)
|
||||||
.map((id) => this.getShape(id)!)
|
// .map((id) => this.getShape(id)!)
|
||||||
.filter((sibling) => sibling.index > highestSibling!.index)
|
// .filter((sibling) => sibling.index > highestSibling!.index)
|
||||||
|
|
||||||
if (higherSiblings.length) {
|
// if (higherSiblings.length) {
|
||||||
// there are siblings above the highest bound sibling, we need to
|
// // there are siblings above the highest bound sibling, we need to
|
||||||
// insert between them.
|
// // insert between them.
|
||||||
|
|
||||||
// if the next sibling is also a bound arrow though, we can end up
|
// // if the next sibling is also a bound arrow though, we can end up
|
||||||
// all fighting for the same indexes. so lets find the next
|
// // all fighting for the same indexes. so lets find the next
|
||||||
// non-arrow sibling...
|
// // non-arrow sibling...
|
||||||
const nextHighestNonArrowSibling = higherSiblings.find(
|
// const nextHighestNonArrowSibling = higherSiblings.find(
|
||||||
(sibling) => sibling.type !== 'arrow'
|
// (sibling) => sibling.type !== 'arrow'
|
||||||
)
|
// )
|
||||||
|
|
||||||
if (
|
// if (
|
||||||
// ...then, if we're above the last shape we want to be above...
|
// // ...then, if we're above the last shape we want to be above...
|
||||||
reparentedArrow.index > highestSibling.index &&
|
// reparentedArrow.index > highestSibling.index &&
|
||||||
// ...but below the next non-arrow sibling...
|
// // ...but below the next non-arrow sibling...
|
||||||
(!nextHighestNonArrowSibling || reparentedArrow.index < nextHighestNonArrowSibling.index)
|
// (!nextHighestNonArrowSibling || reparentedArrow.index < nextHighestNonArrowSibling.index)
|
||||||
) {
|
// ) {
|
||||||
// ...then we're already in the right place. no need to update!
|
// // ...then we're already in the right place. no need to update!
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
// otherwise, we need to find the index between the highest sibling
|
// // otherwise, we need to find the index between the highest sibling
|
||||||
// we want to be above, and the next highest sibling we want to be
|
// // we want to be above, and the next highest sibling we want to be
|
||||||
// below:
|
// // below:
|
||||||
finalIndex = getIndexBetween(highestSibling.index, higherSiblings[0].index)
|
// finalIndex = getIndexBetween(highestSibling.index, higherSiblings[0].index)
|
||||||
} else {
|
// } else {
|
||||||
// if there are no siblings above us, we can just get the next index:
|
// // if there are no siblings above us, we can just get the next index:
|
||||||
finalIndex = getIndexAbove(highestSibling.index)
|
// finalIndex = getIndexAbove(highestSibling.index)
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (finalIndex !== reparentedArrow.index) {
|
// if (finalIndex !== reparentedArrow.index) {
|
||||||
this.updateShapes<TLArrowShape>([{ id: arrowId, type: 'arrow', index: finalIndex }])
|
// this.updateShapes<TLArrowShape>([{ id: arrowId, type: 'arrow', index: finalIndex }])
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
const unbindArrowTerminal = (arrow: TLArrowShape, handleId: 'start' | 'end') => {
|
// const unbindArrowTerminal = (arrow: TLArrowShape, handleId: 'start' | 'end') => {
|
||||||
const { x, y } = getArrowTerminalsInArrowSpace(this, arrow)[handleId]
|
// const { x, y } = getArrowTerminalsInArrowSpace(this, arrow)[handleId]
|
||||||
this.store.put([{ ...arrow, props: { ...arrow.props, [handleId]: { type: 'point', x, y } } }])
|
// this.store.put([{ ...arrow, props: { ...arrow.props, [handleId]: { type: 'point', x, y } } }])
|
||||||
}
|
// }
|
||||||
|
|
||||||
const arrowDidUpdate = (arrow: TLArrowShape) => {
|
// const arrowDidUpdate = (arrow: TLArrowShape) => {
|
||||||
// if the shape is an arrow and its bound shape is on another page
|
// // if the shape is an arrow and its bound shape is on another page
|
||||||
// or was deleted, unbind it
|
// // or was deleted, unbind it
|
||||||
for (const handle of ['start', 'end'] as const) {
|
// for (const handle of ['start', 'end'] as const) {
|
||||||
const terminal = arrow.props[handle]
|
// const terminal = arrow.props[handle]
|
||||||
if (terminal.type !== 'binding') continue
|
// if (terminal.type !== 'binding') continue
|
||||||
const boundShape = this.getShape(terminal.boundShapeId)
|
// const boundShape = this.getShape(terminal.boundShapeId)
|
||||||
const isShapeInSamePageAsArrow =
|
// const isShapeInSamePageAsArrow =
|
||||||
this.getAncestorPageId(arrow) === this.getAncestorPageId(boundShape)
|
// this.getAncestorPageId(arrow) === this.getAncestorPageId(boundShape)
|
||||||
if (!boundShape || !isShapeInSamePageAsArrow) {
|
// if (!boundShape || !isShapeInSamePageAsArrow) {
|
||||||
unbindArrowTerminal(arrow, handle)
|
// unbindArrowTerminal(arrow, handle)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// always check the arrow parents
|
// // always check the arrow parents
|
||||||
reparentArrow(arrow.id)
|
// reparentArrow(arrow.id)
|
||||||
}
|
// }
|
||||||
|
|
||||||
const cleanupInstancePageState = (
|
const cleanupInstancePageState = (
|
||||||
prevPageState: TLInstancePageState,
|
prevPageState: TLInstancePageState,
|
||||||
|
@ -450,28 +470,28 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
this.sideEffects.register({
|
this.sideEffects.register({
|
||||||
shape: {
|
shape: {
|
||||||
afterCreate: (record) => {
|
afterCreate: (record) => {
|
||||||
if (this.isShapeOfType<TLArrowShape>(record, 'arrow')) {
|
// if (this.isShapeOfType<TLArrowShape>(record, 'arrow')) {
|
||||||
arrowDidUpdate(record)
|
// arrowDidUpdate(record)
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
afterChange: (prev, next) => {
|
afterChange: (prev, next) => {
|
||||||
if (this.isShapeOfType<TLArrowShape>(next, 'arrow')) {
|
// if (this.isShapeOfType<TLArrowShape>(next, 'arrow')) {
|
||||||
arrowDidUpdate(next)
|
// arrowDidUpdate(next)
|
||||||
}
|
// }
|
||||||
|
|
||||||
// if the shape's parent changed and it is bound to an arrow, update the arrow's parent
|
// if the shape's parent changed and it is bound to an arrow, update the arrow's parent
|
||||||
if (prev.parentId !== next.parentId) {
|
// if (prev.parentId !== next.parentId) {
|
||||||
const reparentBoundArrows = (id: TLShapeId) => {
|
// const reparentBoundArrows = (id: TLShapeId) => {
|
||||||
const boundArrows = this._getArrowBindingsIndex().get()[id]
|
// const boundArrows = this._getArrowBindingsIndex().get()[id]
|
||||||
if (boundArrows?.length) {
|
// if (boundArrows?.length) {
|
||||||
for (const arrow of boundArrows) {
|
// for (const arrow of boundArrows) {
|
||||||
reparentArrow(arrow.arrowId)
|
// reparentArrow(arrow.arrowId)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
reparentBoundArrows(next.id)
|
// reparentBoundArrows(next.id)
|
||||||
this.visitDescendants(next.id, reparentBoundArrows)
|
// this.visitDescendants(next.id, reparentBoundArrows)
|
||||||
}
|
// }
|
||||||
|
|
||||||
// if this shape moved to a new page, clean up any previous page's instance state
|
// if this shape moved to a new page, clean up any previous page's instance state
|
||||||
if (prev.parentId !== next.parentId && isPageId(next.parentId)) {
|
if (prev.parentId !== next.parentId && isPageId(next.parentId)) {
|
||||||
|
@ -504,14 +524,14 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
invalidParents.add(record.parentId)
|
invalidParents.add(record.parentId)
|
||||||
}
|
}
|
||||||
// clean up any arrows bound to this shape
|
// clean up any arrows bound to this shape
|
||||||
const bindings = this._getArrowBindingsIndex().get()[record.id]
|
// const bindings = this._getArrowBindingsIndex().get()[record.id]
|
||||||
if (bindings?.length) {
|
// if (bindings?.length) {
|
||||||
for (const { arrowId, handleId } of bindings) {
|
// for (const { arrowId, handleId } of bindings) {
|
||||||
const arrow = this.getShape<TLArrowShape>(arrowId)
|
// const arrow = this.getShape<TLArrowShape>(arrowId)
|
||||||
if (!arrow) continue
|
// if (!arrow) continue
|
||||||
unbindArrowTerminal(arrow, handleId)
|
// unbindArrowTerminal(arrow, handleId)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
const deletedIds = new Set([record.id])
|
const deletedIds = new Set([record.id])
|
||||||
const updates = compact(
|
const updates = compact(
|
||||||
this.getPageStates().map((pageState) => {
|
this.getPageStates().map((pageState) => {
|
||||||
|
@ -792,6 +812,41 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
return shapeUtil
|
return shapeUtil
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ------------------- Binding Utils ------------------ */
|
||||||
|
/**
|
||||||
|
* A map of shape utility classes (TLShapeUtils) by shape type.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
bindingUtils: { readonly [K in string]?: BindingUtil<TLUnknownBinding> }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get a binding util from a binding itself.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```ts
|
||||||
|
* const util = editor.getBindingUtil(myArrowBinding)
|
||||||
|
* const util = editor.getBindingUtil('arrow')
|
||||||
|
* const util = editor.getBindingUtil<TLArrowBinding>(myArrowBinding)
|
||||||
|
* const util = editor.getBindingUtil(TLArrowBinding)('arrow')
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* @param binding - A binding, binding partial, or binding type.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
getBindingUtil<S extends TLUnknownBinding>(binding: S | TLBindingPartial<S>): BindingUtil<S>
|
||||||
|
getBindingUtil<S extends TLUnknownBinding>(type: S['type']): BindingUtil<S>
|
||||||
|
getBindingUtil<T extends BindingUtil>(
|
||||||
|
type: T extends BindingUtil<infer R> ? R['type'] : string
|
||||||
|
): T
|
||||||
|
getBindingUtil(arg: string | { type: string }) {
|
||||||
|
const type = typeof arg === 'string' ? arg : arg.type
|
||||||
|
const bindingUtil = getOwnProperty(this.bindingUtils, type)
|
||||||
|
assert(bindingUtil, `No binding util found for type "${type}"`)
|
||||||
|
return bindingUtil
|
||||||
|
}
|
||||||
|
|
||||||
/* --------------------- History -------------------- */
|
/* --------------------- History -------------------- */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -913,12 +968,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
/* --------------------- Arrows --------------------- */
|
/* --------------------- Arrows --------------------- */
|
||||||
// todo: move these to tldraw or replace with a bindings API
|
// todo: move these to tldraw or replace with a bindings API
|
||||||
|
|
||||||
/** @internal */
|
|
||||||
@computed
|
|
||||||
private _getArrowBindingsIndex() {
|
|
||||||
return arrowBindingsIndex(this)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get all arrows bound to a shape.
|
* Get all arrows bound to a shape.
|
||||||
*
|
*
|
||||||
|
@ -927,15 +976,19 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
getArrowsBoundTo(shapeId: TLShapeId) {
|
getArrowsBoundTo(shapeId: TLShapeId) {
|
||||||
return this._getArrowBindingsIndex().get()[shapeId] || EMPTY_ARRAY
|
const ids = new Set(
|
||||||
|
this.getBindingsToShape<TLArrowBinding>(shapeId, 'arrow').map((b) => b.fromId)
|
||||||
|
)
|
||||||
|
return compact(Array.from(ids, (id) => this.getShape<TLArrowShape>(id)))
|
||||||
}
|
}
|
||||||
|
|
||||||
@computed
|
@computed
|
||||||
private getArrowInfoCache() {
|
private getArrowInfoCache() {
|
||||||
return this.store.createComputedCache<TLArrowInfo, TLArrowShape>('arrow infoCache', (shape) => {
|
return this.store.createComputedCache<TLArrowInfo, TLArrowShape>('arrow infoCache', (shape) => {
|
||||||
|
const bindings = getArrowBindings(this, shape)
|
||||||
return getIsArrowStraight(shape)
|
return getIsArrowStraight(shape)
|
||||||
? getStraightArrowInfo(this, shape)
|
? getStraightArrowInfo(this, shape, bindings)
|
||||||
: getCurvedArrowInfo(this, shape)
|
: getCurvedArrowInfo(this, shape, bindings)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4836,6 +4889,99 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
return match
|
return match
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* -------------------- Bindings -------------------- */
|
||||||
|
|
||||||
|
getBinding(id: TLBindingId): TLBinding | undefined {
|
||||||
|
return this.store.get(id) as TLBinding | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: maintain these indexes more pro-actively
|
||||||
|
getBindingsFromShape<Binding extends TLUnknownBinding = TLBinding>(
|
||||||
|
shape: TLShape | TLShapeId,
|
||||||
|
type: Binding['type']
|
||||||
|
): Binding[] {
|
||||||
|
const id = typeof shape === 'string' ? shape : shape.id
|
||||||
|
return this.store.query.exec('binding', {
|
||||||
|
fromId: { eq: id },
|
||||||
|
type: { eq: type },
|
||||||
|
}) as Binding[]
|
||||||
|
}
|
||||||
|
getBindingsToShape<Binding extends TLUnknownBinding = TLBinding>(
|
||||||
|
shape: TLShape | TLShapeId,
|
||||||
|
type: Binding['type']
|
||||||
|
): Binding[] {
|
||||||
|
const id = typeof shape === 'string' ? shape : shape.id
|
||||||
|
return this.store.query.exec('binding', {
|
||||||
|
toId: { eq: id },
|
||||||
|
type: { eq: type },
|
||||||
|
}) as Binding[]
|
||||||
|
}
|
||||||
|
getAllBindingsForShape(shape: TLShape | TLShapeId): TLBinding[] {
|
||||||
|
const id = typeof shape === 'string' ? shape : shape.id
|
||||||
|
const from = this.store.query.index('binding', 'fromId').get().get(id) ?? new Set()
|
||||||
|
const to = this.store.query.index('binding', 'toId').get().get(id)
|
||||||
|
const shapes = []
|
||||||
|
for (const id of from) {
|
||||||
|
shapes.push(this.store.get(id) as TLBinding)
|
||||||
|
}
|
||||||
|
if (to) {
|
||||||
|
for (const id of to) {
|
||||||
|
if (from.has(id)) continue
|
||||||
|
shapes.push(this.store.get(id) as TLBinding)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return shapes
|
||||||
|
}
|
||||||
|
|
||||||
|
createBindings(partials: RequiredKeys<TLBindingPartial, 'type' | 'toId' | 'fromId'>[]) {
|
||||||
|
const bindings = partials.map((partial) => {
|
||||||
|
const util = this.getBindingUtil<TLUnknownBinding>(partial.type)
|
||||||
|
const defaultProps = util.getDefaultProps()
|
||||||
|
return this.store.schema.types.binding.create({
|
||||||
|
...partial,
|
||||||
|
id: partial.id ?? createBindingId(),
|
||||||
|
props: {
|
||||||
|
...defaultProps,
|
||||||
|
...partial.props,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.store.put(bindings)
|
||||||
|
}
|
||||||
|
createBinding(partial: RequiredKeys<TLBindingPartial, 'type' | 'fromId' | 'toId'>) {
|
||||||
|
return this.createBindings([partial])
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBindings(partials: (TLBindingPartial | null | undefined)[]) {
|
||||||
|
const updated: TLBinding[] = []
|
||||||
|
|
||||||
|
for (const partial of partials) {
|
||||||
|
if (!partial) continue
|
||||||
|
|
||||||
|
const current = this.getBinding(partial.id)
|
||||||
|
if (!current) continue
|
||||||
|
|
||||||
|
const updatedBinding = applyPartialToBinding(current, partial)
|
||||||
|
if (updatedBinding === current) continue
|
||||||
|
|
||||||
|
updated.push(updatedBinding)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.store.put(updated)
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBinding(partial: TLBindingPartial) {
|
||||||
|
return this.updateBindings([partial])
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteBindings(bindings: (TLBinding | TLBindingId)[]) {
|
||||||
|
const ids = bindings.map((binding) => (typeof binding === 'string' ? binding : binding.id))
|
||||||
|
this.store.remove(ids)
|
||||||
|
}
|
||||||
|
deleteBinding(binding: TLBinding | TLBindingId) {
|
||||||
|
return this.deleteBindings([binding])
|
||||||
|
}
|
||||||
|
|
||||||
/* -------------------- Commands -------------------- */
|
/* -------------------- Commands -------------------- */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -4999,80 +5145,80 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
|
|
||||||
let newShape: TLShape = structuredClone(shape)
|
let newShape: TLShape = structuredClone(shape)
|
||||||
|
|
||||||
if (
|
// if (
|
||||||
this.isShapeOfType<TLArrowShape>(shape, 'arrow') &&
|
// this.isShapeOfType<TLArrowShape>(shape, 'arrow') &&
|
||||||
this.isShapeOfType<TLArrowShape>(newShape, 'arrow')
|
// this.isShapeOfType<TLArrowShape>(newShape, 'arrow')
|
||||||
) {
|
// ) {
|
||||||
const info = this.getArrowInfo(shape)
|
// const info = this.getArrowInfo(shape)
|
||||||
let newStartShapeId: TLShapeId | undefined = undefined
|
// let newStartShapeId: TLShapeId | undefined = undefined
|
||||||
let newEndShapeId: TLShapeId | undefined = undefined
|
// let newEndShapeId: TLShapeId | undefined = undefined
|
||||||
|
|
||||||
if (shape.props.start.type === 'binding') {
|
// if (shape.props.start.type === 'binding') {
|
||||||
newStartShapeId = idsMap.get(shape.props.start.boundShapeId)
|
// newStartShapeId = idsMap.get(shape.props.start.boundShapeId)
|
||||||
|
|
||||||
if (!newStartShapeId) {
|
// if (!newStartShapeId) {
|
||||||
if (info?.isValid) {
|
// if (info?.isValid) {
|
||||||
const { x, y } = info.start.point
|
// const { x, y } = info.start.point
|
||||||
newShape.props.start = {
|
// newShape.props.start = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x,
|
// x,
|
||||||
y,
|
// y,
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
const { start } = getArrowTerminalsInArrowSpace(this, shape)
|
// const { start } = getArrowTerminalsInArrowSpace(this, shape)
|
||||||
newShape.props.start = {
|
// newShape.props.start = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x: start.x,
|
// x: start.x,
|
||||||
y: start.y,
|
// y: start.y,
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (shape.props.end.type === 'binding') {
|
// if (shape.props.end.type === 'binding') {
|
||||||
newEndShapeId = idsMap.get(shape.props.end.boundShapeId)
|
// newEndShapeId = idsMap.get(shape.props.end.boundShapeId)
|
||||||
if (!newEndShapeId) {
|
// if (!newEndShapeId) {
|
||||||
if (info?.isValid) {
|
// if (info?.isValid) {
|
||||||
const { x, y } = info.end.point
|
// const { x, y } = info.end.point
|
||||||
newShape.props.end = {
|
// newShape.props.end = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x,
|
// x,
|
||||||
y,
|
// y,
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
const { end } = getArrowTerminalsInArrowSpace(this, shape)
|
// const { end } = getArrowTerminalsInArrowSpace(this, shape)
|
||||||
newShape.props.start = {
|
// newShape.props.start = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x: end.x,
|
// x: end.x,
|
||||||
y: end.y,
|
// y: end.y,
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
const infoAfter = getIsArrowStraight(newShape)
|
// const infoAfter = getIsArrowStraight(newShape)
|
||||||
? getStraightArrowInfo(this, newShape)
|
// ? getStraightArrowInfo(this, newShape)
|
||||||
: getCurvedArrowInfo(this, newShape)
|
// : getCurvedArrowInfo(this, newShape)
|
||||||
|
|
||||||
if (info?.isValid && infoAfter?.isValid && !getIsArrowStraight(shape)) {
|
// if (info?.isValid && infoAfter?.isValid && !getIsArrowStraight(shape)) {
|
||||||
const mpA = Vec.Med(info.start.handle, info.end.handle)
|
// const mpA = Vec.Med(info.start.handle, info.end.handle)
|
||||||
const distA = Vec.Dist(info.middle, mpA)
|
// const distA = Vec.Dist(info.middle, mpA)
|
||||||
const distB = Vec.Dist(infoAfter.middle, mpA)
|
// const distB = Vec.Dist(infoAfter.middle, mpA)
|
||||||
if (newShape.props.bend < 0) {
|
// if (newShape.props.bend < 0) {
|
||||||
newShape.props.bend += distB - distA
|
// newShape.props.bend += distB - distA
|
||||||
} else {
|
// } else {
|
||||||
newShape.props.bend -= distB - distA
|
// newShape.props.bend -= distB - distA
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (newShape.props.start.type === 'binding' && newStartShapeId) {
|
// if (newShape.props.start.type === 'binding' && newStartShapeId) {
|
||||||
newShape.props.start.boundShapeId = newStartShapeId
|
// newShape.props.start.boundShapeId = newStartShapeId
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (newShape.props.end.type === 'binding' && newEndShapeId) {
|
// if (newShape.props.end.type === 'binding' && newEndShapeId) {
|
||||||
newShape.props.end.boundShapeId = newEndShapeId
|
// newShape.props.end.boundShapeId = newEndShapeId
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
newShape = { ...newShape, id: createId, x: shape.x + ox, y: shape.y + oy, index }
|
newShape = { ...newShape, id: createId, x: shape.x + ox, y: shape.y + oy, index }
|
||||||
|
|
||||||
|
@ -5430,11 +5576,11 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
.filter((shape) => {
|
.filter((shape) => {
|
||||||
if (!shape) return false
|
if (!shape) return false
|
||||||
|
|
||||||
if (this.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
// if (this.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
if (shape.props.start.type === 'binding' || shape.props.end.type === 'binding') {
|
// if (shape.props.start.type === 'binding' || shape.props.end.type === 'binding') {
|
||||||
return false
|
// return false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
@ -5576,11 +5722,11 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
.filter((shape) => {
|
.filter((shape) => {
|
||||||
if (!shape) return false
|
if (!shape) return false
|
||||||
|
|
||||||
if (this.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
// if (this.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
if (shape.props.start.type === 'binding' || shape.props.end.type === 'binding') {
|
// if (shape.props.start.type === 'binding' || shape.props.end.type === 'binding') {
|
||||||
return false
|
// return false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
@ -7270,75 +7416,75 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
|
|
||||||
shape = structuredClone(shape) as typeof shape
|
shape = structuredClone(shape) as typeof shape
|
||||||
|
|
||||||
if (this.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
// if (this.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
const startBindingId =
|
// const startBindingId =
|
||||||
shape.props.start.type === 'binding' ? shape.props.start.boundShapeId : undefined
|
// shape.props.start.type === 'binding' ? shape.props.start.boundShapeId : undefined
|
||||||
|
|
||||||
const endBindingId =
|
// const endBindingId =
|
||||||
shape.props.end.type === 'binding' ? shape.props.end.boundShapeId : undefined
|
// shape.props.end.type === 'binding' ? shape.props.end.boundShapeId : undefined
|
||||||
|
|
||||||
const info = this.getArrowInfo(shape)
|
// const info = this.getArrowInfo(shape)
|
||||||
|
|
||||||
if (shape.props.start.type === 'binding') {
|
// if (shape.props.start.type === 'binding') {
|
||||||
if (!shapesForContent.some((s) => s.id === startBindingId)) {
|
// if (!shapesForContent.some((s) => s.id === startBindingId)) {
|
||||||
// Uh oh, the arrow's bound-to shape isn't among the shapes
|
// // Uh oh, the arrow's bound-to shape isn't among the shapes
|
||||||
// that we're getting the content for. We should try to adjust
|
// // that we're getting the content for. We should try to adjust
|
||||||
// the arrow so that it appears in the place it would be
|
// // the arrow so that it appears in the place it would be
|
||||||
if (info?.isValid) {
|
// if (info?.isValid) {
|
||||||
const { x, y } = info.start.point
|
// const { x, y } = info.start.point
|
||||||
shape.props.start = {
|
// shape.props.start = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x,
|
// x,
|
||||||
y,
|
// y,
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
const { start } = getArrowTerminalsInArrowSpace(this, shape)
|
// const { start } = getArrowTerminalsInArrowSpace(this, shape)
|
||||||
shape.props.start = {
|
// shape.props.start = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x: start.x,
|
// x: start.x,
|
||||||
y: start.y,
|
// y: start.y,
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (shape.props.end.type === 'binding') {
|
// if (shape.props.end.type === 'binding') {
|
||||||
if (!shapesForContent.some((s) => s.id === endBindingId)) {
|
// if (!shapesForContent.some((s) => s.id === endBindingId)) {
|
||||||
if (info?.isValid) {
|
// if (info?.isValid) {
|
||||||
const { x, y } = info.end.point
|
// const { x, y } = info.end.point
|
||||||
shape.props.end = {
|
// shape.props.end = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x,
|
// x,
|
||||||
y,
|
// y,
|
||||||
}
|
// }
|
||||||
} else {
|
// } else {
|
||||||
const { end } = getArrowTerminalsInArrowSpace(this, shape)
|
// const { end } = getArrowTerminalsInArrowSpace(this, shape)
|
||||||
shape.props.end = {
|
// shape.props.end = {
|
||||||
type: 'point',
|
// type: 'point',
|
||||||
x: end.x,
|
// x: end.x,
|
||||||
y: end.y,
|
// y: end.y,
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
const infoAfter = getIsArrowStraight(shape)
|
// const infoAfter = getIsArrowStraight(shape)
|
||||||
? getStraightArrowInfo(this, shape)
|
// ? getStraightArrowInfo(this, shape)
|
||||||
: getCurvedArrowInfo(this, shape)
|
// : getCurvedArrowInfo(this, shape)
|
||||||
|
|
||||||
if (info?.isValid && infoAfter?.isValid && !getIsArrowStraight(shape)) {
|
// if (info?.isValid && infoAfter?.isValid && !getIsArrowStraight(shape)) {
|
||||||
const mpA = Vec.Med(info.start.handle, info.end.handle)
|
// const mpA = Vec.Med(info.start.handle, info.end.handle)
|
||||||
const distA = Vec.Dist(info.middle, mpA)
|
// const distA = Vec.Dist(info.middle, mpA)
|
||||||
const distB = Vec.Dist(infoAfter.middle, mpA)
|
// const distB = Vec.Dist(infoAfter.middle, mpA)
|
||||||
if (shape.props.bend < 0) {
|
// if (shape.props.bend < 0) {
|
||||||
shape.props.bend += distB - distA
|
// shape.props.bend += distB - distA
|
||||||
} else {
|
// } else {
|
||||||
shape.props.bend -= distB - distA
|
// shape.props.bend -= distB - distA
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
return shape
|
// return shape
|
||||||
}
|
// }
|
||||||
|
|
||||||
return shape
|
return shape
|
||||||
})
|
})
|
||||||
|
@ -7550,24 +7696,24 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
index = getIndexAbove(index)
|
index = getIndexAbove(index)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isShapeOfType<TLArrowShape>(newShape, 'arrow')) {
|
// if (this.isShapeOfType<TLArrowShape>(newShape, 'arrow')) {
|
||||||
if (newShape.props.start.type === 'binding') {
|
// if (newShape.props.start.type === 'binding') {
|
||||||
const mappedId = idMap.get(newShape.props.start.boundShapeId)
|
// const mappedId = idMap.get(newShape.props.start.boundShapeId)
|
||||||
newShape.props.start = mappedId
|
// newShape.props.start = mappedId
|
||||||
? { ...newShape.props.start, boundShapeId: mappedId }
|
// ? { ...newShape.props.start, boundShapeId: mappedId }
|
||||||
: // this shouldn't happen, if you copy an arrow but not it's bound shape it should
|
// : // this shouldn't happen, if you copy an arrow but not it's bound shape it should
|
||||||
// convert the binding to a point at the time of copying
|
// // convert the binding to a point at the time of copying
|
||||||
{ type: 'point', x: 0, y: 0 }
|
// { type: 'point', x: 0, y: 0 }
|
||||||
}
|
// }
|
||||||
if (newShape.props.end.type === 'binding') {
|
// if (newShape.props.end.type === 'binding') {
|
||||||
const mappedId = idMap.get(newShape.props.end.boundShapeId)
|
// const mappedId = idMap.get(newShape.props.end.boundShapeId)
|
||||||
newShape.props.end = mappedId
|
// newShape.props.end = mappedId
|
||||||
? { ...newShape.props.end, boundShapeId: mappedId }
|
// ? { ...newShape.props.end, boundShapeId: mappedId }
|
||||||
: // this shouldn't happen, if you copy an arrow but not it's bound shape it should
|
// : // this shouldn't happen, if you copy an arrow but not it's bound shape it should
|
||||||
// convert the binding to a point at the time of copying
|
// // convert the binding to a point at the time of copying
|
||||||
{ type: 'point', x: 0, y: 0 }
|
// { type: 'point', x: 0, y: 0 }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
return newShape
|
return newShape
|
||||||
})
|
})
|
||||||
|
@ -8547,6 +8693,41 @@ function applyPartialToShape<T extends TLShape>(prev: T, partial?: TLShapePartia
|
||||||
return next
|
return next
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function applyPartialToBinding<T extends TLBinding>(prev: T, partial?: TLBindingPartial<T>): T {
|
||||||
|
if (!partial) return prev
|
||||||
|
let next = null as null | T
|
||||||
|
const entries = Object.entries(partial)
|
||||||
|
for (let i = 0, n = entries.length; i < n; i++) {
|
||||||
|
const [k, v] = entries[i]
|
||||||
|
if (v === undefined) continue
|
||||||
|
|
||||||
|
// Is the key a special key? We don't update those
|
||||||
|
if (k === 'id' || k === 'type' || k === 'typeName') continue
|
||||||
|
|
||||||
|
// Is the value the same as it was before?
|
||||||
|
if (v === (prev as any)[k]) continue
|
||||||
|
|
||||||
|
// There's a new value, so create the new shape if we haven't already (should we be cloning this?)
|
||||||
|
if (!next) next = { ...prev }
|
||||||
|
|
||||||
|
// for props / meta properties, we support updates with partials of this object
|
||||||
|
if (k === 'props' || k === 'meta') {
|
||||||
|
next[k] = { ...prev[k] } as JsonObject
|
||||||
|
for (const [nextKey, nextValue] of Object.entries(v as object)) {
|
||||||
|
if (nextValue !== undefined) {
|
||||||
|
;(next[k] as JsonObject)[nextKey] = nextValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
// base property
|
||||||
|
;(next as any)[k] = v
|
||||||
|
}
|
||||||
|
if (!next) return prev
|
||||||
|
return next
|
||||||
|
}
|
||||||
|
|
||||||
function pushShapeWithDescendants(editor: Editor, id: TLShapeId, result: TLShape[]): void {
|
function pushShapeWithDescendants(editor: Editor, id: TLShapeId, result: TLShape[]): void {
|
||||||
const shape = editor.getShape(id)
|
const shape = editor.getShape(id)
|
||||||
if (!shape) return
|
if (!shape) return
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { RecordProps, TLPropsMigrations, TLShape, TLUnknownBinding } from '@tldraw/tlschema'
|
||||||
|
import { Editor } from '../Editor'
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export interface TLBindingUtilConstructor<
|
||||||
|
T extends TLUnknownBinding,
|
||||||
|
U extends BindingUtil<T> = BindingUtil<T>,
|
||||||
|
> {
|
||||||
|
new (editor: Editor): U
|
||||||
|
type: T['type']
|
||||||
|
props?: RecordProps<T>
|
||||||
|
migrations?: TLPropsMigrations
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export abstract class BindingUtil<Binding extends TLUnknownBinding = TLUnknownBinding> {
|
||||||
|
constructor(public editor: Editor) {}
|
||||||
|
static props?: RecordProps<TLUnknownBinding>
|
||||||
|
static migrations?: TLPropsMigrations
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The type of the binding util, which should match the binding's type.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
static type: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the default props for a binding.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
abstract getDefaultProps(): Binding['props']
|
||||||
|
|
||||||
|
onAfterShapeChange?(
|
||||||
|
binding: Binding,
|
||||||
|
direction: 'from' | 'to',
|
||||||
|
prev: TLShape,
|
||||||
|
next: TLShape
|
||||||
|
): void
|
||||||
|
|
||||||
|
onBeforeShapeDelete?(binding: Binding, direction: 'from' | 'to', shape: TLShape): void
|
||||||
|
}
|
|
@ -1,141 +0,0 @@
|
||||||
import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
|
|
||||||
import { TLArrowShape, TLShape, TLShapeId } from '@tldraw/tlschema'
|
|
||||||
import { Editor } from '../Editor'
|
|
||||||
|
|
||||||
type TLArrowBindingsIndex = Record<
|
|
||||||
TLShapeId,
|
|
||||||
undefined | { arrowId: TLShapeId; handleId: 'start' | 'end' }[]
|
|
||||||
>
|
|
||||||
|
|
||||||
export const arrowBindingsIndex = (editor: Editor): Computed<TLArrowBindingsIndex> => {
|
|
||||||
const { store } = editor
|
|
||||||
const shapeHistory = store.query.filterHistory('shape')
|
|
||||||
const arrowQuery = store.query.records('shape', () => ({ type: { eq: 'arrow' as const } }))
|
|
||||||
function fromScratch() {
|
|
||||||
const allArrows = arrowQuery.get() as TLArrowShape[]
|
|
||||||
|
|
||||||
const bindings2Arrows: TLArrowBindingsIndex = {}
|
|
||||||
|
|
||||||
for (const arrow of allArrows) {
|
|
||||||
const { start, end } = arrow.props
|
|
||||||
if (start.type === 'binding') {
|
|
||||||
const arrows = bindings2Arrows[start.boundShapeId]
|
|
||||||
if (arrows) arrows.push({ arrowId: arrow.id, handleId: 'start' })
|
|
||||||
else bindings2Arrows[start.boundShapeId] = [{ arrowId: arrow.id, handleId: 'start' }]
|
|
||||||
}
|
|
||||||
|
|
||||||
if (end.type === 'binding') {
|
|
||||||
const arrows = bindings2Arrows[end.boundShapeId]
|
|
||||||
if (arrows) arrows.push({ arrowId: arrow.id, handleId: 'end' })
|
|
||||||
else bindings2Arrows[end.boundShapeId] = [{ arrowId: arrow.id, handleId: 'end' }]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return bindings2Arrows
|
|
||||||
}
|
|
||||||
|
|
||||||
return computed<TLArrowBindingsIndex>('arrowBindingsIndex', (_lastValue, lastComputedEpoch) => {
|
|
||||||
if (isUninitialized(_lastValue)) {
|
|
||||||
return fromScratch()
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastValue = _lastValue
|
|
||||||
|
|
||||||
const diff = shapeHistory.getDiffSince(lastComputedEpoch)
|
|
||||||
|
|
||||||
if (diff === RESET_VALUE) {
|
|
||||||
return fromScratch()
|
|
||||||
}
|
|
||||||
|
|
||||||
let nextValue: TLArrowBindingsIndex | undefined = undefined
|
|
||||||
|
|
||||||
function ensureNewArray(boundShapeId: TLShapeId) {
|
|
||||||
// this will never happen
|
|
||||||
if (!nextValue) {
|
|
||||||
nextValue = { ...lastValue }
|
|
||||||
}
|
|
||||||
if (!nextValue[boundShapeId]) {
|
|
||||||
nextValue[boundShapeId] = []
|
|
||||||
} else if (nextValue[boundShapeId] === lastValue[boundShapeId]) {
|
|
||||||
nextValue[boundShapeId] = [...nextValue[boundShapeId]!]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function removingBinding(
|
|
||||||
boundShapeId: TLShapeId,
|
|
||||||
arrowId: TLShapeId,
|
|
||||||
handleId: 'start' | 'end'
|
|
||||||
) {
|
|
||||||
ensureNewArray(boundShapeId)
|
|
||||||
nextValue![boundShapeId] = nextValue![boundShapeId]!.filter(
|
|
||||||
(binding) => binding.arrowId !== arrowId || binding.handleId !== handleId
|
|
||||||
)
|
|
||||||
if (nextValue![boundShapeId]!.length === 0) {
|
|
||||||
delete nextValue![boundShapeId]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addBinding(boundShapeId: TLShapeId, arrowId: TLShapeId, handleId: 'start' | 'end') {
|
|
||||||
ensureNewArray(boundShapeId)
|
|
||||||
nextValue![boundShapeId]!.push({ arrowId, handleId })
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const changes of diff) {
|
|
||||||
for (const newShape of Object.values(changes.added)) {
|
|
||||||
if (editor.isShapeOfType<TLArrowShape>(newShape, 'arrow')) {
|
|
||||||
const { start, end } = newShape.props
|
|
||||||
if (start.type === 'binding') {
|
|
||||||
addBinding(start.boundShapeId, newShape.id, 'start')
|
|
||||||
}
|
|
||||||
if (end.type === 'binding') {
|
|
||||||
addBinding(end.boundShapeId, newShape.id, 'end')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [prev, next] of Object.values(changes.updated) as [TLShape, TLShape][]) {
|
|
||||||
if (
|
|
||||||
!editor.isShapeOfType<TLArrowShape>(prev, 'arrow') ||
|
|
||||||
!editor.isShapeOfType<TLArrowShape>(next, 'arrow')
|
|
||||||
)
|
|
||||||
continue
|
|
||||||
|
|
||||||
for (const handle of ['start', 'end'] as const) {
|
|
||||||
const prevTerminal = prev.props[handle]
|
|
||||||
const nextTerminal = next.props[handle]
|
|
||||||
|
|
||||||
if (prevTerminal.type === 'binding' && nextTerminal.type === 'point') {
|
|
||||||
// if the binding was removed
|
|
||||||
removingBinding(prevTerminal.boundShapeId, prev.id, handle)
|
|
||||||
} else if (prevTerminal.type === 'point' && nextTerminal.type === 'binding') {
|
|
||||||
// if the binding was added
|
|
||||||
addBinding(nextTerminal.boundShapeId, next.id, handle)
|
|
||||||
} else if (
|
|
||||||
prevTerminal.type === 'binding' &&
|
|
||||||
nextTerminal.type === 'binding' &&
|
|
||||||
prevTerminal.boundShapeId !== nextTerminal.boundShapeId
|
|
||||||
) {
|
|
||||||
// if the binding was changed
|
|
||||||
removingBinding(prevTerminal.boundShapeId, prev.id, handle)
|
|
||||||
addBinding(nextTerminal.boundShapeId, next.id, handle)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const prev of Object.values(changes.removed)) {
|
|
||||||
if (editor.isShapeOfType<TLArrowShape>(prev, 'arrow')) {
|
|
||||||
const { start, end } = prev.props
|
|
||||||
if (start.type === 'binding') {
|
|
||||||
removingBinding(start.boundShapeId, prev.id, 'start')
|
|
||||||
}
|
|
||||||
if (end.type === 'binding') {
|
|
||||||
removingBinding(end.boundShapeId, prev.id, 'end')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: add diff entries if we need them
|
|
||||||
return nextValue ?? lastValue
|
|
||||||
})
|
|
||||||
}
|
|
|
@ -1,11 +1,11 @@
|
||||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
|
import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
|
||||||
import {
|
import {
|
||||||
ShapeProps,
|
RecordProps,
|
||||||
TLHandle,
|
TLHandle,
|
||||||
|
TLPropsMigrations,
|
||||||
TLShape,
|
TLShape,
|
||||||
TLShapePartial,
|
TLShapePartial,
|
||||||
TLShapePropsMigrations,
|
|
||||||
TLUnknownShape,
|
TLUnknownShape,
|
||||||
} from '@tldraw/tlschema'
|
} from '@tldraw/tlschema'
|
||||||
import { ReactElement } from 'react'
|
import { ReactElement } from 'react'
|
||||||
|
@ -25,8 +25,8 @@ export interface TLShapeUtilConstructor<
|
||||||
> {
|
> {
|
||||||
new (editor: Editor): U
|
new (editor: Editor): U
|
||||||
type: T['type']
|
type: T['type']
|
||||||
props?: ShapeProps<T>
|
props?: RecordProps<T>
|
||||||
migrations?: LegacyMigrations | TLShapePropsMigrations | MigrationSequence
|
migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
|
@ -41,8 +41,8 @@ export interface TLShapeUtilCanvasSvgDef {
|
||||||
/** @public */
|
/** @public */
|
||||||
export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
|
||||||
constructor(public editor: Editor) {}
|
constructor(public editor: Editor) {}
|
||||||
static props?: ShapeProps<TLUnknownShape>
|
static props?: RecordProps<TLUnknownShape>
|
||||||
static migrations?: LegacyMigrations | TLShapePropsMigrations
|
static migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The type of the shape util, which should match the shape's type.
|
* The type of the shape util, which should match the shape's type.
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { TLArrowShapeArrowheadStyle } from '@tldraw/tlschema'
|
import { TLArrowShapeArrowheadStyle } from '@tldraw/tlschema'
|
||||||
import { VecLike } from '../../../../primitives/Vec'
|
import { VecLike } from '../../../../primitives/Vec'
|
||||||
|
import { TLArrowBindings } from './shared'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLArrowPoint = {
|
export type TLArrowPoint = {
|
||||||
|
@ -21,6 +22,7 @@ export interface TLArcInfo {
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLArrowInfo =
|
export type TLArrowInfo =
|
||||||
| {
|
| {
|
||||||
|
bindings: TLArrowBindings
|
||||||
isStraight: false
|
isStraight: false
|
||||||
start: TLArrowPoint
|
start: TLArrowPoint
|
||||||
end: TLArrowPoint
|
end: TLArrowPoint
|
||||||
|
@ -30,6 +32,7 @@ export type TLArrowInfo =
|
||||||
isValid: boolean
|
isValid: boolean
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
|
bindings: TLArrowBindings
|
||||||
isStraight: true
|
isStraight: true
|
||||||
start: TLArrowPoint
|
start: TLArrowPoint
|
||||||
end: TLArrowPoint
|
end: TLArrowPoint
|
||||||
|
|
|
@ -15,6 +15,7 @@ import {
|
||||||
BOUND_ARROW_OFFSET,
|
BOUND_ARROW_OFFSET,
|
||||||
MIN_ARROW_LENGTH,
|
MIN_ARROW_LENGTH,
|
||||||
STROKE_SIZES,
|
STROKE_SIZES,
|
||||||
|
TLArrowBindings,
|
||||||
WAY_TOO_BIG_ARROW_BEND_FACTOR,
|
WAY_TOO_BIG_ARROW_BEND_FACTOR,
|
||||||
getArrowTerminalsInArrowSpace,
|
getArrowTerminalsInArrowSpace,
|
||||||
getBoundShapeInfoForTerminal,
|
getBoundShapeInfoForTerminal,
|
||||||
|
@ -25,16 +26,16 @@ import { getStraightArrowInfo } from './straight-arrow'
|
||||||
export function getCurvedArrowInfo(
|
export function getCurvedArrowInfo(
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
shape: TLArrowShape,
|
shape: TLArrowShape,
|
||||||
extraBend = 0
|
bindings: TLArrowBindings
|
||||||
): TLArrowInfo {
|
): TLArrowInfo {
|
||||||
const { arrowheadEnd, arrowheadStart } = shape.props
|
const { arrowheadEnd, arrowheadStart } = shape.props
|
||||||
const bend = shape.props.bend + extraBend
|
const bend = shape.props.bend
|
||||||
|
|
||||||
if (Math.abs(bend) > Math.abs(shape.props.bend * WAY_TOO_BIG_ARROW_BEND_FACTOR)) {
|
if (Math.abs(bend) > Math.abs(shape.props.bend * WAY_TOO_BIG_ARROW_BEND_FACTOR)) {
|
||||||
return getStraightArrowInfo(editor, shape)
|
return getStraightArrowInfo(editor, shape, bindings)
|
||||||
}
|
}
|
||||||
|
|
||||||
const terminalsInArrowSpace = getArrowTerminalsInArrowSpace(editor, shape)
|
const terminalsInArrowSpace = getArrowTerminalsInArrowSpace(editor, shape, bindings)
|
||||||
|
|
||||||
const med = Vec.Med(terminalsInArrowSpace.start, terminalsInArrowSpace.end) // point between start and end
|
const med = Vec.Med(terminalsInArrowSpace.start, terminalsInArrowSpace.end) // point between start and end
|
||||||
const distance = Vec.Sub(terminalsInArrowSpace.end, terminalsInArrowSpace.start)
|
const distance = Vec.Sub(terminalsInArrowSpace.end, terminalsInArrowSpace.start)
|
||||||
|
@ -42,8 +43,8 @@ export function getCurvedArrowInfo(
|
||||||
const u = Vec.Len(distance) ? distance.uni() : Vec.From(distance) // unit vector between start and end
|
const u = Vec.Len(distance) ? distance.uni() : Vec.From(distance) // unit vector between start and end
|
||||||
const middle = Vec.Add(med, u.per().mul(-bend)) // middle handle
|
const middle = Vec.Add(med, u.per().mul(-bend)) // middle handle
|
||||||
|
|
||||||
const startShapeInfo = getBoundShapeInfoForTerminal(editor, shape.props.start)
|
const startShapeInfo = getBoundShapeInfoForTerminal(editor, shape, 'start')
|
||||||
const endShapeInfo = getBoundShapeInfoForTerminal(editor, shape.props.end)
|
const endShapeInfo = getBoundShapeInfoForTerminal(editor, shape, 'end')
|
||||||
|
|
||||||
// The positions of the body of the arrow, which may be different
|
// The positions of the body of the arrow, which may be different
|
||||||
// than the arrow's start / end points if the arrow is bound to shapes
|
// than the arrow's start / end points if the arrow is bound to shapes
|
||||||
|
@ -53,6 +54,7 @@ export function getCurvedArrowInfo(
|
||||||
|
|
||||||
if (Vec.Equals(a, b)) {
|
if (Vec.Equals(a, b)) {
|
||||||
return {
|
return {
|
||||||
|
bindings,
|
||||||
isStraight: true,
|
isStraight: true,
|
||||||
start: {
|
start: {
|
||||||
handle: a,
|
handle: a,
|
||||||
|
@ -84,7 +86,7 @@ export function getCurvedArrowInfo(
|
||||||
!isSafeFloat(handleArc.length) ||
|
!isSafeFloat(handleArc.length) ||
|
||||||
!isSafeFloat(handleArc.size)
|
!isSafeFloat(handleArc.size)
|
||||||
) {
|
) {
|
||||||
return getStraightArrowInfo(editor, shape)
|
return getStraightArrowInfo(editor, shape, bindings)
|
||||||
}
|
}
|
||||||
|
|
||||||
const tempA = a.clone()
|
const tempA = a.clone()
|
||||||
|
@ -341,6 +343,7 @@ export function getCurvedArrowInfo(
|
||||||
const bodyArc = getArcInfo(a, b, c)
|
const bodyArc = getArcInfo(a, b, c)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
bindings,
|
||||||
isStraight: false,
|
isStraight: false,
|
||||||
start: {
|
start: {
|
||||||
point: a,
|
point: a,
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
import { TLArrowShape, TLArrowShapeTerminal, TLShape, TLShapeId } from '@tldraw/tlschema'
|
import {
|
||||||
|
TLArrowBinding,
|
||||||
|
TLArrowBindingProps,
|
||||||
|
TLArrowShape,
|
||||||
|
TLShape,
|
||||||
|
TLShapeId,
|
||||||
|
} from '@tldraw/tlschema'
|
||||||
import { Mat } from '../../../../primitives/Mat'
|
import { Mat } from '../../../../primitives/Mat'
|
||||||
import { Vec } from '../../../../primitives/Vec'
|
import { Vec } from '../../../../primitives/Vec'
|
||||||
import { Group2d } from '../../../../primitives/geometry/Group2d'
|
import { Group2d } from '../../../../primitives/geometry/Group2d'
|
||||||
|
@ -19,15 +25,17 @@ export type BoundShapeInfo<T extends TLShape = TLShape> = {
|
||||||
|
|
||||||
export function getBoundShapeInfoForTerminal(
|
export function getBoundShapeInfoForTerminal(
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
terminal: TLArrowShapeTerminal
|
arrow: TLArrowShape,
|
||||||
|
terminalName: 'start' | 'end'
|
||||||
): BoundShapeInfo | undefined {
|
): BoundShapeInfo | undefined {
|
||||||
if (terminal.type === 'point') {
|
const binding = editor
|
||||||
return
|
.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
|
||||||
}
|
.find((b) => b.props.terminal === terminalName)
|
||||||
|
if (!binding) return
|
||||||
|
|
||||||
const shape = editor.getShape(terminal.boundShapeId)!
|
const boundShape = editor.getShape(binding.toId)!
|
||||||
const transform = editor.getShapePageTransform(shape)!
|
const transform = editor.getShapePageTransform(boundShape)!
|
||||||
const geometry = editor.getShapeGeometry(shape)
|
const geometry = editor.getShapeGeometry(boundShape)
|
||||||
|
|
||||||
// This is hacky: we're only looking at the first child in the group. Really the arrow should
|
// This is hacky: we're only looking at the first child in the group. Really the arrow should
|
||||||
// consider all items in the group which are marked as snappable as separate polygons with which
|
// consider all items in the group which are marked as snappable as separate polygons with which
|
||||||
|
@ -36,10 +44,10 @@ export function getBoundShapeInfoForTerminal(
|
||||||
const outline = geometry instanceof Group2d ? geometry.children[0].vertices : geometry.vertices
|
const outline = geometry instanceof Group2d ? geometry.children[0].vertices : geometry.vertices
|
||||||
|
|
||||||
return {
|
return {
|
||||||
shape,
|
shape: boundShape,
|
||||||
transform,
|
transform,
|
||||||
isClosed: geometry.isClosed,
|
isClosed: geometry.isClosed,
|
||||||
isExact: terminal.isExact,
|
isExact: binding.props.isExact,
|
||||||
didIntersect: false,
|
didIntersect: false,
|
||||||
outline,
|
outline,
|
||||||
}
|
}
|
||||||
|
@ -48,14 +56,10 @@ export function getBoundShapeInfoForTerminal(
|
||||||
function getArrowTerminalInArrowSpace(
|
function getArrowTerminalInArrowSpace(
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
arrowPageTransform: Mat,
|
arrowPageTransform: Mat,
|
||||||
terminal: TLArrowShapeTerminal,
|
binding: TLArrowBinding,
|
||||||
forceImprecise: boolean
|
forceImprecise: boolean
|
||||||
) {
|
) {
|
||||||
if (terminal.type === 'point') {
|
const boundShape = editor.getShape(binding.toId)
|
||||||
return Vec.From(terminal)
|
|
||||||
}
|
|
||||||
|
|
||||||
const boundShape = editor.getShape(terminal.boundShapeId)
|
|
||||||
|
|
||||||
if (!boundShape) {
|
if (!boundShape) {
|
||||||
// this can happen in multiplayer contexts where the shape is being deleted
|
// this can happen in multiplayer contexts where the shape is being deleted
|
||||||
|
@ -69,7 +73,9 @@ function getArrowTerminalInArrowSpace(
|
||||||
point,
|
point,
|
||||||
Vec.MulV(
|
Vec.MulV(
|
||||||
// if the parent is the bound shape, then it's ALWAYS precise
|
// if the parent is the bound shape, then it's ALWAYS precise
|
||||||
terminal.isPrecise || forceImprecise ? terminal.normalizedAnchor : { x: 0.5, y: 0.5 },
|
binding.props.isPrecise || forceImprecise
|
||||||
|
? binding.props.normalizedAnchor
|
||||||
|
: { x: 0.5, y: 0.5 },
|
||||||
size
|
size
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
@ -79,41 +85,113 @@ function getArrowTerminalInArrowSpace(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
export interface TLArrowBindings {
|
||||||
export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape) {
|
start: TLArrowBinding | undefined
|
||||||
const arrowPageTransform = editor.getShapePageTransform(shape)!
|
end: TLArrowBinding | undefined
|
||||||
|
}
|
||||||
|
|
||||||
let startBoundShapeId: TLShapeId | undefined
|
/** @internal */
|
||||||
let endBoundShapeId: TLShapeId | undefined
|
export function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings {
|
||||||
|
const bindings = editor.getBindingsFromShape<TLArrowBinding>(shape, 'arrow')
|
||||||
if (shape.props.start.type === 'binding' && shape.props.end.type === 'binding') {
|
return {
|
||||||
startBoundShapeId = shape.props.start.boundShapeId
|
start: bindings.find((b) => b.props.terminal === 'start'),
|
||||||
endBoundShapeId = shape.props.end.boundShapeId
|
end: bindings.find((b) => b.props.terminal === 'end'),
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export function getArrowTerminalsInArrowSpace(
|
||||||
|
editor: Editor,
|
||||||
|
shape: TLArrowShape,
|
||||||
|
bindings: TLArrowBindings
|
||||||
|
) {
|
||||||
|
const arrowPageTransform = editor.getShapePageTransform(shape)!
|
||||||
|
|
||||||
const boundShapeRelationships = getBoundShapeRelationships(
|
const boundShapeRelationships = getBoundShapeRelationships(
|
||||||
editor,
|
editor,
|
||||||
startBoundShapeId,
|
bindings.start?.toId,
|
||||||
endBoundShapeId
|
bindings.end?.toId
|
||||||
)
|
)
|
||||||
|
|
||||||
const start = getArrowTerminalInArrowSpace(
|
const start = bindings.start
|
||||||
editor,
|
? getArrowTerminalInArrowSpace(
|
||||||
arrowPageTransform,
|
editor,
|
||||||
shape.props.start,
|
arrowPageTransform,
|
||||||
boundShapeRelationships === 'double-bound' || boundShapeRelationships === 'start-contains-end'
|
bindings.start,
|
||||||
)
|
boundShapeRelationships === 'double-bound' ||
|
||||||
|
boundShapeRelationships === 'start-contains-end'
|
||||||
|
)
|
||||||
|
: Vec.From(shape.props.start)
|
||||||
|
|
||||||
const end = getArrowTerminalInArrowSpace(
|
const end = bindings.end
|
||||||
editor,
|
? getArrowTerminalInArrowSpace(
|
||||||
arrowPageTransform,
|
editor,
|
||||||
shape.props.end,
|
arrowPageTransform,
|
||||||
boundShapeRelationships === 'double-bound' || boundShapeRelationships === 'end-contains-start'
|
bindings.end,
|
||||||
)
|
boundShapeRelationships === 'double-bound' ||
|
||||||
|
boundShapeRelationships === 'end-contains-start'
|
||||||
|
)
|
||||||
|
: Vec.From(shape.props.end)
|
||||||
|
|
||||||
return { start, end }
|
return { start, end }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create or update the arrow binding for a particular arrow terminal. Will clear up if needed.
|
||||||
|
* TODO(alex): find a better name for this
|
||||||
|
* @internal
|
||||||
|
*/
|
||||||
|
export function arrowBindingMakeItSo(
|
||||||
|
editor: Editor,
|
||||||
|
arrow: TLArrowShape | TLShapeId,
|
||||||
|
target: TLShape | TLShapeId,
|
||||||
|
props: TLArrowBindingProps
|
||||||
|
) {
|
||||||
|
const arrowId = typeof arrow === 'string' ? arrow : arrow.id
|
||||||
|
const targetId = typeof target === 'string' ? target : target.id
|
||||||
|
|
||||||
|
const existingMany = editor
|
||||||
|
.getBindingsFromShape<TLArrowBinding>(arrowId, 'arrow')
|
||||||
|
.filter((b) => b.props.terminal === props.terminal)
|
||||||
|
|
||||||
|
// if we've somehow ended up with too many bindings, delete the extras
|
||||||
|
if (existingMany.length > 1) {
|
||||||
|
editor.deleteBindings(existingMany.slice(1))
|
||||||
|
}
|
||||||
|
|
||||||
|
const existing = existingMany[0]
|
||||||
|
if (existing) {
|
||||||
|
editor.updateBinding({
|
||||||
|
...existing,
|
||||||
|
toId: targetId,
|
||||||
|
props,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
editor.createBinding({
|
||||||
|
type: 'arrow',
|
||||||
|
fromId: arrowId,
|
||||||
|
toId: targetId,
|
||||||
|
props,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove any arrow bindings for a particular terminal.
|
||||||
|
* @internal
|
||||||
|
*/
|
||||||
|
export function arrowBindingMakeItNotSo(
|
||||||
|
editor: Editor,
|
||||||
|
arrow: TLArrowShape,
|
||||||
|
terminal: 'start' | 'end'
|
||||||
|
) {
|
||||||
|
const existing = editor
|
||||||
|
.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
|
||||||
|
.filter((b) => b.props.terminal === terminal)
|
||||||
|
|
||||||
|
editor.deleteBindings(existing)
|
||||||
|
}
|
||||||
|
|
||||||
/** @internal */
|
/** @internal */
|
||||||
export const MIN_ARROW_LENGTH = 10
|
export const MIN_ARROW_LENGTH = 10
|
||||||
/** @internal */
|
/** @internal */
|
||||||
|
|
|
@ -12,15 +12,20 @@ import {
|
||||||
BoundShapeInfo,
|
BoundShapeInfo,
|
||||||
MIN_ARROW_LENGTH,
|
MIN_ARROW_LENGTH,
|
||||||
STROKE_SIZES,
|
STROKE_SIZES,
|
||||||
|
TLArrowBindings,
|
||||||
getArrowTerminalsInArrowSpace,
|
getArrowTerminalsInArrowSpace,
|
||||||
getBoundShapeInfoForTerminal,
|
getBoundShapeInfoForTerminal,
|
||||||
getBoundShapeRelationships,
|
getBoundShapeRelationships,
|
||||||
} from './shared'
|
} from './shared'
|
||||||
|
|
||||||
export function getStraightArrowInfo(editor: Editor, shape: TLArrowShape): TLArrowInfo {
|
export function getStraightArrowInfo(
|
||||||
const { start, end, arrowheadStart, arrowheadEnd } = shape.props
|
editor: Editor,
|
||||||
|
shape: TLArrowShape,
|
||||||
|
bindings: TLArrowBindings
|
||||||
|
): TLArrowInfo {
|
||||||
|
const { arrowheadStart, arrowheadEnd } = shape.props
|
||||||
|
|
||||||
const terminalsInArrowSpace = getArrowTerminalsInArrowSpace(editor, shape)
|
const terminalsInArrowSpace = getArrowTerminalsInArrowSpace(editor, shape, bindings)
|
||||||
|
|
||||||
const a = terminalsInArrowSpace.start.clone()
|
const a = terminalsInArrowSpace.start.clone()
|
||||||
const b = terminalsInArrowSpace.end.clone()
|
const b = terminalsInArrowSpace.end.clone()
|
||||||
|
@ -28,6 +33,7 @@ export function getStraightArrowInfo(editor: Editor, shape: TLArrowShape): TLArr
|
||||||
|
|
||||||
if (Vec.Equals(a, b)) {
|
if (Vec.Equals(a, b)) {
|
||||||
return {
|
return {
|
||||||
|
bindings,
|
||||||
isStraight: true,
|
isStraight: true,
|
||||||
start: {
|
start: {
|
||||||
handle: a,
|
handle: a,
|
||||||
|
@ -49,8 +55,8 @@ export function getStraightArrowInfo(editor: Editor, shape: TLArrowShape): TLArr
|
||||||
|
|
||||||
// Update the arrowhead points using intersections with the bound shapes, if any.
|
// Update the arrowhead points using intersections with the bound shapes, if any.
|
||||||
|
|
||||||
const startShapeInfo = getBoundShapeInfoForTerminal(editor, start)
|
const startShapeInfo = getBoundShapeInfoForTerminal(editor, shape, 'start')
|
||||||
const endShapeInfo = getBoundShapeInfoForTerminal(editor, end)
|
const endShapeInfo = getBoundShapeInfoForTerminal(editor, shape, 'end')
|
||||||
|
|
||||||
const arrowPageTransform = editor.getShapePageTransform(shape)!
|
const arrowPageTransform = editor.getShapePageTransform(shape)!
|
||||||
|
|
||||||
|
@ -189,6 +195,7 @@ export function getStraightArrowInfo(editor: Editor, shape: TLArrowShape): TLArr
|
||||||
const length = Vec.Dist(a, b)
|
const length = Vec.Dist(a, b)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
bindings,
|
||||||
isStraight: true,
|
isStraight: true,
|
||||||
start: {
|
start: {
|
||||||
handle: terminalsInArrowSpace.start,
|
handle: terminalsInArrowSpace.start,
|
||||||
|
|
|
@ -24,6 +24,7 @@ beforeEach(() => {
|
||||||
editor = new Editor({
|
editor = new Editor({
|
||||||
initialState: 'A',
|
initialState: 'A',
|
||||||
shapeUtils: [],
|
shapeUtils: [],
|
||||||
|
bindingUtils: [],
|
||||||
tools: [A, B, C],
|
tools: [A, B, C],
|
||||||
store: createTLStore({ shapeUtils: [] }),
|
store: createTLStore({ shapeUtils: [] }),
|
||||||
getContainer: () => document.body,
|
getContainer: () => document.body,
|
||||||
|
|
|
@ -6,6 +6,7 @@ let editor: Editor
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
editor = new Editor({
|
editor = new Editor({
|
||||||
shapeUtils: [],
|
shapeUtils: [],
|
||||||
|
bindingUtils: [],
|
||||||
tools: [],
|
tools: [],
|
||||||
store: createTLStore({ shapeUtils: [] }),
|
store: createTLStore({ shapeUtils: [] }),
|
||||||
getContainer: () => document.body,
|
getContainer: () => document.body,
|
||||||
|
|
|
@ -37,7 +37,7 @@ export type ComputedCache<Data, R extends UnknownRecord> = {
|
||||||
export function createEmptyRecordsDiff<R extends UnknownRecord>(): RecordsDiff<R>;
|
export function createEmptyRecordsDiff<R extends UnknownRecord>(): RecordsDiff<R>;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export function createMigrationIds<ID extends string, Versions extends Record<string, number>>(sequenceId: ID, versions: Versions): {
|
export function createMigrationIds<const ID extends string, const Versions extends Record<string, number>>(sequenceId: ID, versions: Versions): {
|
||||||
[K in keyof Versions]: `${ID}/${Versions[K]}`;
|
[K in keyof Versions]: `${ID}/${Versions[K]}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -265,6 +265,11 @@ export function squashRecordDiffs<T extends UnknownRecord>(diffs: RecordsDiff<T>
|
||||||
// @internal
|
// @internal
|
||||||
export function squashRecordDiffsMutable<T extends UnknownRecord>(target: RecordsDiff<T>, diffs: RecordsDiff<T>[]): void;
|
export function squashRecordDiffsMutable<T extends UnknownRecord>(target: RecordsDiff<T>, diffs: RecordsDiff<T>[]): void;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type StandaloneDependsOn = {
|
||||||
|
readonly dependsOn: readonly MigrationId[];
|
||||||
|
};
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
||||||
constructor(config: {
|
constructor(config: {
|
||||||
|
|
|
@ -43,5 +43,6 @@ export {
|
||||||
type MigrationId,
|
type MigrationId,
|
||||||
type MigrationResult,
|
type MigrationResult,
|
||||||
type MigrationSequence,
|
type MigrationSequence,
|
||||||
|
type StandaloneDependsOn,
|
||||||
} from './lib/migrate'
|
} from './lib/migrate'
|
||||||
export type { AllRecords } from './lib/type-utils'
|
export type { AllRecords } from './lib/type-utils'
|
||||||
|
|
|
@ -121,7 +121,12 @@ export class StoreSchema<R extends UnknownRecord, P = unknown> {
|
||||||
if (!migration.dependsOn?.length) continue
|
if (!migration.dependsOn?.length) continue
|
||||||
for (const dep of migration.dependsOn) {
|
for (const dep of migration.dependsOn) {
|
||||||
const depMigration = allMigrations.find((m) => m.id === dep)
|
const depMigration = allMigrations.find((m) => m.id === dep)
|
||||||
assert(depMigration, `Migration '${migration.id}' depends on missing migration '${dep}'`)
|
// TODO: we can't assert here because the store migrations depend on the arrow
|
||||||
|
// migrations, but the arrow migrations might not be present if we're using the
|
||||||
|
// editor without arrows :/
|
||||||
|
if (!depMigration) {
|
||||||
|
console.warn(`Migration '${migration.id}' depends on missing migration '${dep}'`)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,10 +91,10 @@ export function createMigrationSequence({
|
||||||
* @public
|
* @public
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export function createMigrationIds<ID extends string, Versions extends Record<string, number>>(
|
export function createMigrationIds<
|
||||||
sequenceId: ID,
|
const ID extends string,
|
||||||
versions: Versions
|
const Versions extends Record<string, number>,
|
||||||
): { [K in keyof Versions]: `${ID}/${Versions[K]}` } {
|
>(sequenceId: ID, versions: Versions): { [K in keyof Versions]: `${ID}/${Versions[K]}` } {
|
||||||
return Object.fromEntries(
|
return Object.fromEntries(
|
||||||
objectMapEntries(versions).map(([key, version]) => [key, `${sequenceId}/${version}`] as const)
|
objectMapEntries(versions).map(([key, version]) => [key, `${sequenceId}/${version}`] as const)
|
||||||
) as any
|
) as any
|
||||||
|
@ -136,6 +136,7 @@ export type LegacyMigration<Before = any, After = any> = {
|
||||||
/** @public */
|
/** @public */
|
||||||
export type MigrationId = `${string}/${number}`
|
export type MigrationId = `${string}/${number}`
|
||||||
|
|
||||||
|
/** @public */
|
||||||
export type StandaloneDependsOn = {
|
export type StandaloneDependsOn = {
|
||||||
readonly dependsOn: readonly MigrationId[]
|
readonly dependsOn: readonly MigrationId[]
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,6 @@ import { MemoExoticComponent } from 'react';
|
||||||
import { MigrationFailureReason } from '@tldraw/editor';
|
import { MigrationFailureReason } from '@tldraw/editor';
|
||||||
import { MigrationSequence } from '@tldraw/editor';
|
import { MigrationSequence } from '@tldraw/editor';
|
||||||
import { NamedExoticComponent } from 'react';
|
import { NamedExoticComponent } from 'react';
|
||||||
import { ObjectValidator } from '@tldraw/editor';
|
|
||||||
import { Polygon2d } from '@tldraw/editor';
|
import { Polygon2d } from '@tldraw/editor';
|
||||||
import { Polyline2d } from '@tldraw/editor';
|
import { Polyline2d } from '@tldraw/editor';
|
||||||
import { default as React_2 } from 'react';
|
import { default as React_2 } from 'react';
|
||||||
|
@ -54,6 +53,7 @@ import { StoreSnapshot } from '@tldraw/editor';
|
||||||
import { StyleProp } from '@tldraw/editor';
|
import { StyleProp } from '@tldraw/editor';
|
||||||
import { SvgExportContext } from '@tldraw/editor';
|
import { SvgExportContext } from '@tldraw/editor';
|
||||||
import { T } from '@tldraw/editor';
|
import { T } from '@tldraw/editor';
|
||||||
|
import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
|
||||||
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
|
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
|
||||||
import { TLArrowShape } from '@tldraw/editor';
|
import { TLArrowShape } from '@tldraw/editor';
|
||||||
import { TLAssetId } from '@tldraw/editor';
|
import { TLAssetId } from '@tldraw/editor';
|
||||||
|
@ -102,6 +102,7 @@ import { TLParentId } from '@tldraw/editor';
|
||||||
import { TLPointerEvent } from '@tldraw/editor';
|
import { TLPointerEvent } from '@tldraw/editor';
|
||||||
import { TLPointerEventInfo } from '@tldraw/editor';
|
import { TLPointerEventInfo } from '@tldraw/editor';
|
||||||
import { TLPointerEventName } from '@tldraw/editor';
|
import { TLPointerEventName } from '@tldraw/editor';
|
||||||
|
import { TLPropsMigrations } from '@tldraw/editor';
|
||||||
import { TLRecord } from '@tldraw/editor';
|
import { TLRecord } from '@tldraw/editor';
|
||||||
import { TLRotationSnapshot } from '@tldraw/editor';
|
import { TLRotationSnapshot } from '@tldraw/editor';
|
||||||
import { TLSchema } from '@tldraw/editor';
|
import { TLSchema } from '@tldraw/editor';
|
||||||
|
@ -112,7 +113,6 @@ import { TLSelectionHandle } from '@tldraw/editor';
|
||||||
import { TLShape } from '@tldraw/editor';
|
import { TLShape } from '@tldraw/editor';
|
||||||
import { TLShapeId } from '@tldraw/editor';
|
import { TLShapeId } from '@tldraw/editor';
|
||||||
import { TLShapePartial } from '@tldraw/editor';
|
import { TLShapePartial } from '@tldraw/editor';
|
||||||
import { TLShapePropsMigrations } from '@tldraw/editor';
|
|
||||||
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
|
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
|
||||||
import { TLShapeUtilFlag } from '@tldraw/editor';
|
import { TLShapeUtilFlag } from '@tldraw/editor';
|
||||||
import { TLStore } from '@tldraw/editor';
|
import { TLStore } from '@tldraw/editor';
|
||||||
|
@ -121,7 +121,6 @@ import { TLSvgOptions } from '@tldraw/editor';
|
||||||
import { TLTextShape } from '@tldraw/editor';
|
import { TLTextShape } from '@tldraw/editor';
|
||||||
import { TLUnknownShape } from '@tldraw/editor';
|
import { TLUnknownShape } from '@tldraw/editor';
|
||||||
import { TLVideoShape } from '@tldraw/editor';
|
import { TLVideoShape } from '@tldraw/editor';
|
||||||
import { UnionValidator } from '@tldraw/editor';
|
|
||||||
import { UnknownRecord } from '@tldraw/editor';
|
import { UnknownRecord } from '@tldraw/editor';
|
||||||
import { Validator } from '@tldraw/editor';
|
import { Validator } from '@tldraw/editor';
|
||||||
import { Vec } from '@tldraw/editor';
|
import { Vec } from '@tldraw/editor';
|
||||||
|
@ -192,7 +191,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLArrowShape): JSX_2.Element | null;
|
indicator(shape: TLArrowShape): JSX_2.Element | null;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: MigrationSequence;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial<TLArrowShape> | void;
|
onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial<TLArrowShape> | void;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -212,39 +211,13 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
bend: Validator<number>;
|
bend: Validator<number>;
|
||||||
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
||||||
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
||||||
end: UnionValidator<"type", {
|
end: Validator<VecModel>;
|
||||||
binding: ObjectValidator< {
|
|
||||||
boundShapeId: TLShapeId;
|
|
||||||
isExact: boolean;
|
|
||||||
isPrecise: boolean;
|
|
||||||
normalizedAnchor: VecModel;
|
|
||||||
type: "binding";
|
|
||||||
}>;
|
|
||||||
point: ObjectValidator< {
|
|
||||||
type: "point";
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}>;
|
|
||||||
}, never>;
|
|
||||||
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
||||||
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
||||||
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
||||||
labelPosition: Validator<number>;
|
labelPosition: Validator<number>;
|
||||||
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
||||||
start: UnionValidator<"type", {
|
start: Validator<VecModel>;
|
||||||
binding: ObjectValidator< {
|
|
||||||
boundShapeId: TLShapeId;
|
|
||||||
isExact: boolean;
|
|
||||||
isPrecise: boolean;
|
|
||||||
normalizedAnchor: VecModel;
|
|
||||||
type: "binding";
|
|
||||||
}>;
|
|
||||||
point: ObjectValidator< {
|
|
||||||
type: "point";
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}>;
|
|
||||||
}, never>;
|
|
||||||
text: Validator<string>;
|
text: Validator<string>;
|
||||||
};
|
};
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -281,7 +254,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLBookmarkShape): JSX_2.Element;
|
indicator(shape: TLBookmarkShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape>;
|
onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -492,7 +465,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLDrawShape): JSX_2.Element;
|
indicator(shape: TLDrawShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onResize: TLOnResizeHandler<TLDrawShape>;
|
onResize: TLOnResizeHandler<TLDrawShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -549,7 +522,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
|
isAspectRatioLocked: TLShapeUtilFlag<TLEmbedShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onResize: TLOnResizeHandler<TLEmbedShape>;
|
onResize: TLOnResizeHandler<TLEmbedShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -656,7 +629,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLFrameShape): JSX_2.Element;
|
indicator(shape: TLFrameShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void;
|
onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -709,7 +682,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLGeoShape): JSX_2.Element;
|
indicator(shape: TLGeoShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onBeforeCreate: (shape: TLGeoShape) => {
|
onBeforeCreate: (shape: TLGeoShape) => {
|
||||||
id: TLShapeId;
|
id: TLShapeId;
|
||||||
|
@ -923,7 +896,7 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLHighlightShape): JSX_2.Element;
|
indicator(shape: TLHighlightShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onResize: TLOnResizeHandler<TLHighlightShape>;
|
onResize: TLOnResizeHandler<TLHighlightShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -961,7 +934,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
isAspectRatioLocked: () => boolean;
|
isAspectRatioLocked: () => boolean;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onDoubleClick: (shape: TLImageShape) => void;
|
onDoubleClick: (shape: TLImageShape) => void;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -1065,7 +1038,7 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLLineShape): JSX_2.Element;
|
indicator(shape: TLLineShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onHandleDrag: TLOnHandleDragHandler<TLLineShape>;
|
onHandleDrag: TLOnHandleDragHandler<TLLineShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -1129,7 +1102,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
indicator(shape: TLNoteShape): JSX_2.Element;
|
indicator(shape: TLNoteShape): JSX_2.Element;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onBeforeCreate: (next: TLNoteShape) => {
|
onBeforeCreate: (next: TLNoteShape) => {
|
||||||
id: TLShapeId;
|
id: TLShapeId;
|
||||||
|
@ -1376,7 +1349,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
|
isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
onBeforeCreate: (shape: TLTextShape) => {
|
onBeforeCreate: (shape: TLTextShape) => {
|
||||||
id: TLShapeId;
|
id: TLShapeId;
|
||||||
|
@ -1496,6 +1469,7 @@ export function TldrawHandles({ children }: TLHandlesProps): JSX_2.Element | nul
|
||||||
// @public
|
// @public
|
||||||
export const TldrawImage: NamedExoticComponent< {
|
export const TldrawImage: NamedExoticComponent< {
|
||||||
background?: boolean | undefined;
|
background?: boolean | undefined;
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[] | undefined;
|
||||||
bounds?: Box | undefined;
|
bounds?: Box | undefined;
|
||||||
darkMode?: boolean | undefined;
|
darkMode?: boolean | undefined;
|
||||||
format?: "png" | "svg" | undefined;
|
format?: "png" | "svg" | undefined;
|
||||||
|
@ -1509,6 +1483,7 @@ snapshot: StoreSnapshot<TLRecord>;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export type TldrawImageProps = Expand<{
|
export type TldrawImageProps = Expand<{
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
|
||||||
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
|
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
|
||||||
format?: 'png' | 'svg';
|
format?: 'png' | 'svg';
|
||||||
pageId?: TLPageId;
|
pageId?: TLPageId;
|
||||||
|
@ -2668,7 +2643,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
isAspectRatioLocked: () => boolean;
|
isAspectRatioLocked: () => boolean;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static migrations: TLShapePropsMigrations;
|
static migrations: TLPropsMigrations;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
static props: {
|
static props: {
|
||||||
assetId: Validator<TLAssetId | null>;
|
assetId: Validator<TLAssetId | null>;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -23,6 +23,7 @@ import { TldrawHandles } from './canvas/TldrawHandles'
|
||||||
import { TldrawScribble } from './canvas/TldrawScribble'
|
import { TldrawScribble } from './canvas/TldrawScribble'
|
||||||
import { TldrawSelectionBackground } from './canvas/TldrawSelectionBackground'
|
import { TldrawSelectionBackground } from './canvas/TldrawSelectionBackground'
|
||||||
import { TldrawSelectionForeground } from './canvas/TldrawSelectionForeground'
|
import { TldrawSelectionForeground } from './canvas/TldrawSelectionForeground'
|
||||||
|
import { defaultBindingUtils } from './defaultBindingUtils'
|
||||||
import {
|
import {
|
||||||
TLExternalContentProps,
|
TLExternalContentProps,
|
||||||
registerDefaultExternalContentHandlers,
|
registerDefaultExternalContentHandlers,
|
||||||
|
@ -79,6 +80,7 @@ export function Tldraw(props: TldrawProps) {
|
||||||
onMount,
|
onMount,
|
||||||
components = {},
|
components = {},
|
||||||
shapeUtils = [],
|
shapeUtils = [],
|
||||||
|
bindingUtils = [],
|
||||||
tools = [],
|
tools = [],
|
||||||
...rest
|
...rest
|
||||||
} = props
|
} = props
|
||||||
|
@ -102,6 +104,12 @@ export function Tldraw(props: TldrawProps) {
|
||||||
[_shapeUtils]
|
[_shapeUtils]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const _bindingUtils = useShallowArrayIdentity(bindingUtils)
|
||||||
|
const bindingUtilsWithDefaults = useMemo(
|
||||||
|
() => [...defaultBindingUtils, ..._bindingUtils],
|
||||||
|
[_bindingUtils]
|
||||||
|
)
|
||||||
|
|
||||||
const _tools = useShallowArrayIdentity(tools)
|
const _tools = useShallowArrayIdentity(tools)
|
||||||
const toolsWithDefaults = useMemo(
|
const toolsWithDefaults = useMemo(
|
||||||
() => [...defaultTools, ...defaultShapeTools, ..._tools],
|
() => [...defaultTools, ...defaultShapeTools, ..._tools],
|
||||||
|
@ -123,6 +131,7 @@ export function Tldraw(props: TldrawProps) {
|
||||||
{...rest}
|
{...rest}
|
||||||
components={componentsWithDefault}
|
components={componentsWithDefault}
|
||||||
shapeUtils={shapeUtilsWithDefaults}
|
shapeUtils={shapeUtilsWithDefaults}
|
||||||
|
bindingUtils={bindingUtilsWithDefaults}
|
||||||
tools={toolsWithDefaults}
|
tools={toolsWithDefaults}
|
||||||
>
|
>
|
||||||
<TldrawUi {...rest} components={componentsWithDefault}>
|
<TldrawUi {...rest} components={componentsWithDefault}>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {
|
||||||
Expand,
|
Expand,
|
||||||
LoadingScreen,
|
LoadingScreen,
|
||||||
StoreSnapshot,
|
StoreSnapshot,
|
||||||
|
TLAnyBindingUtilConstructor,
|
||||||
TLAnyShapeUtilConstructor,
|
TLAnyShapeUtilConstructor,
|
||||||
TLPageId,
|
TLPageId,
|
||||||
TLRecord,
|
TLRecord,
|
||||||
|
@ -12,6 +13,7 @@ import {
|
||||||
useTLStore,
|
useTLStore,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
import { memo, useLayoutEffect, useMemo, useState } from 'react'
|
import { memo, useLayoutEffect, useMemo, useState } from 'react'
|
||||||
|
import { defaultBindingUtils } from './defaultBindingUtils'
|
||||||
import { defaultShapeUtils } from './defaultShapeUtils'
|
import { defaultShapeUtils } from './defaultShapeUtils'
|
||||||
import { usePreloadAssets } from './ui/hooks/usePreloadAssets'
|
import { usePreloadAssets } from './ui/hooks/usePreloadAssets'
|
||||||
import { getSvgAsImage } from './utils/export/export'
|
import { getSvgAsImage } from './utils/export/export'
|
||||||
|
@ -43,6 +45,10 @@ export type TldrawImageProps = Expand<
|
||||||
* Additional shape utils to use.
|
* Additional shape utils to use.
|
||||||
*/
|
*/
|
||||||
shapeUtils?: readonly TLAnyShapeUtilConstructor[]
|
shapeUtils?: readonly TLAnyShapeUtilConstructor[]
|
||||||
|
/**
|
||||||
|
* Additional binding utils to use.
|
||||||
|
*/
|
||||||
|
bindingUtils?: readonly TLAnyBindingUtilConstructor[]
|
||||||
} & Partial<TLSvgOptions>
|
} & Partial<TLSvgOptions>
|
||||||
>
|
>
|
||||||
|
|
||||||
|
@ -69,6 +75,11 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
|
||||||
|
|
||||||
const shapeUtils = useShallowArrayIdentity(props.shapeUtils ?? [])
|
const shapeUtils = useShallowArrayIdentity(props.shapeUtils ?? [])
|
||||||
const shapeUtilsWithDefaults = useMemo(() => [...defaultShapeUtils, ...shapeUtils], [shapeUtils])
|
const shapeUtilsWithDefaults = useMemo(() => [...defaultShapeUtils, ...shapeUtils], [shapeUtils])
|
||||||
|
const bindingUtils = useShallowArrayIdentity(props.bindingUtils ?? [])
|
||||||
|
const bindingUtilsWithDefaults = useMemo(
|
||||||
|
() => [...defaultBindingUtils, ...bindingUtils],
|
||||||
|
[bindingUtils]
|
||||||
|
)
|
||||||
const store = useTLStore({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults })
|
const store = useTLStore({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults })
|
||||||
|
|
||||||
const assets = useDefaultEditorAssetsWithOverrides()
|
const assets = useDefaultEditorAssetsWithOverrides()
|
||||||
|
@ -98,7 +109,8 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
|
||||||
|
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
store,
|
store,
|
||||||
shapeUtils: shapeUtilsWithDefaults ?? [],
|
shapeUtils: shapeUtilsWithDefaults,
|
||||||
|
bindingUtils: bindingUtilsWithDefaults,
|
||||||
tools: [],
|
tools: [],
|
||||||
getContainer: () => tempElm,
|
getContainer: () => tempElm,
|
||||||
})
|
})
|
||||||
|
@ -152,6 +164,7 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
|
||||||
container,
|
container,
|
||||||
store,
|
store,
|
||||||
shapeUtilsWithDefaults,
|
shapeUtilsWithDefaults,
|
||||||
|
bindingUtilsWithDefaults,
|
||||||
pageId,
|
pageId,
|
||||||
bounds,
|
bounds,
|
||||||
scale,
|
scale,
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
import {
|
||||||
|
BindingUtil,
|
||||||
|
TLArrowBindingProps,
|
||||||
|
arrowBindingMigrations,
|
||||||
|
arrowBindingProps,
|
||||||
|
} from '@tldraw/editor'
|
||||||
|
|
||||||
|
export class ArrowBindingUtil extends BindingUtil {
|
||||||
|
static override type = 'arrow'
|
||||||
|
|
||||||
|
static override props = arrowBindingProps
|
||||||
|
static override migrations = arrowBindingMigrations
|
||||||
|
|
||||||
|
override getDefaultProps(): Partial<TLArrowBindingProps> {
|
||||||
|
return {
|
||||||
|
isPrecise: false,
|
||||||
|
isExact: false,
|
||||||
|
normalizedAnchor: { x: 0.5, y: 0.5 },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { TLAnyBindingUtilConstructor } from '@tldraw/editor'
|
||||||
|
import { ArrowBindingUtil } from './bindings/arrow/ArrowBindingUtil'
|
||||||
|
|
||||||
|
export const defaultBindingUtils: TLAnyBindingUtilConstructor[] = [ArrowBindingUtil]
|
|
@ -1,4 +1,4 @@
|
||||||
import { IndexKey, TLArrowShape, Vec, createShapeId } from '@tldraw/editor'
|
import { IndexKey, TLArrowShape, Vec, createShapeId, getArrowBindings } from '@tldraw/editor'
|
||||||
import { TestEditor } from '../../../test/TestEditor'
|
import { TestEditor } from '../../../test/TestEditor'
|
||||||
|
|
||||||
let editor: TestEditor
|
let editor: TestEditor
|
||||||
|
@ -530,8 +530,8 @@ describe('line bug', () => {
|
||||||
.keyUp('Shift')
|
.keyUp('Shift')
|
||||||
|
|
||||||
expect(editor.getCurrentPageShapes().length).toBe(2)
|
expect(editor.getCurrentPageShapes().length).toBe(2)
|
||||||
const arrow = editor.getCurrentPageShapes()[1] as TLArrowShape
|
const bindings = getArrowBindings(editor, editor.getCurrentPageShapes()[1] as TLArrowShape)
|
||||||
expect(arrow.props.end.type).toBe('binding')
|
expect(bindings.end).toBeDefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('works as expected when binding to a straight horizontal line', () => {
|
it('works as expected when binding to a straight horizontal line', () => {
|
||||||
|
@ -552,7 +552,7 @@ describe('line bug', () => {
|
||||||
.pointerUp()
|
.pointerUp()
|
||||||
|
|
||||||
expect(editor.getCurrentPageShapes().length).toBe(2)
|
expect(editor.getCurrentPageShapes().length).toBe(2)
|
||||||
const arrow = editor.getCurrentPageShapes()[1] as TLArrowShape
|
const bindings = getArrowBindings(editor, editor.getCurrentPageShapes()[1] as TLArrowShape)
|
||||||
expect(arrow.props.end.type).toBe('binding')
|
expect(bindings.end).toBeDefined()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,11 +1,13 @@
|
||||||
import {
|
import {
|
||||||
assert,
|
|
||||||
createShapeId,
|
|
||||||
HALF_PI,
|
HALF_PI,
|
||||||
TLArrowShape,
|
TLArrowShape,
|
||||||
TLArrowShapeTerminal,
|
|
||||||
TLShapeId,
|
TLShapeId,
|
||||||
|
arrowBindingMakeItSo,
|
||||||
|
assert,
|
||||||
|
createShapeId,
|
||||||
|
getArrowBindings,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
|
import { describe } from 'node:test'
|
||||||
import { TestEditor } from '../../../test/TestEditor'
|
import { TestEditor } from '../../../test/TestEditor'
|
||||||
|
|
||||||
let editor: TestEditor
|
let editor: TestEditor
|
||||||
|
@ -42,23 +44,25 @@ beforeEach(() => {
|
||||||
x: 150,
|
x: 150,
|
||||||
y: 150,
|
y: 150,
|
||||||
props: {
|
props: {
|
||||||
start: {
|
start: { x: 0, y: 0 },
|
||||||
type: 'binding',
|
end: { x: 0, y: 0 },
|
||||||
isExact: false,
|
|
||||||
boundShapeId: ids.box1,
|
|
||||||
normalizedAnchor: { x: 0.5, y: 0.5 },
|
|
||||||
isPrecise: false,
|
|
||||||
},
|
|
||||||
end: {
|
|
||||||
type: 'binding',
|
|
||||||
isExact: false,
|
|
||||||
boundShapeId: ids.box2,
|
|
||||||
normalizedAnchor: { x: 0.5, y: 0.5 },
|
|
||||||
isPrecise: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
|
arrowBindingMakeItSo(editor, ids.arrow1, ids.box1, {
|
||||||
|
terminal: 'start',
|
||||||
|
isExact: false,
|
||||||
|
isPrecise: false,
|
||||||
|
normalizedAnchor: { x: 0.5, y: 0.5 },
|
||||||
|
})
|
||||||
|
|
||||||
|
arrowBindingMakeItSo(editor, ids.arrow1, ids.box2, {
|
||||||
|
terminal: 'end',
|
||||||
|
isExact: false,
|
||||||
|
isPrecise: false,
|
||||||
|
normalizedAnchor: { x: 0.5, y: 0.5 },
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('When translating a bound shape', () => {
|
describe('When translating a bound shape', () => {
|
||||||
|
@ -93,6 +97,11 @@ describe('When translating a bound shape', () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
expect(getArrowBindings(editor, editor.getShape(ids.arrow1)!)).toMatchObject({
|
||||||
|
start: {
|
||||||
|
toId: ids.box1,
|
||||||
|
},
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('updates the arrow when curved', () => {
|
it('updates the arrow when curved', () => {
|
||||||
|
@ -300,8 +309,9 @@ describe('Other cases when arrow are moved', () => {
|
||||||
editor.setCurrentTool('arrow').pointerDown(1000, 1000).pointerMove(50, 350).pointerUp(50, 350)
|
editor.setCurrentTool('arrow').pointerDown(1000, 1000).pointerMove(50, 350).pointerUp(50, 350)
|
||||||
let arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
|
let arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
|
||||||
assert(editor.isShapeOfType<TLArrowShape>(arrow, 'arrow'))
|
assert(editor.isShapeOfType<TLArrowShape>(arrow, 'arrow'))
|
||||||
assert(arrow.props.end.type === 'binding')
|
let bindings = getArrowBindings(editor, arrow)
|
||||||
expect(arrow.props.end.boundShapeId).toBe(ids.box3)
|
assert(bindings.end)
|
||||||
|
expect(bindings.end.toId).toBe(ids.box3)
|
||||||
|
|
||||||
// translate:
|
// translate:
|
||||||
editor.selectAll().nudgeShapes(editor.getSelectedShapeIds(), { x: 0, y: 1 })
|
editor.selectAll().nudgeShapes(editor.getSelectedShapeIds(), { x: 0, y: 1 })
|
||||||
|
@ -309,8 +319,9 @@ describe('Other cases when arrow are moved', () => {
|
||||||
// arrow should still be bound to box3
|
// arrow should still be bound to box3
|
||||||
arrow = editor.getShape(arrow.id)!
|
arrow = editor.getShape(arrow.id)!
|
||||||
assert(editor.isShapeOfType<TLArrowShape>(arrow, 'arrow'))
|
assert(editor.isShapeOfType<TLArrowShape>(arrow, 'arrow'))
|
||||||
assert(arrow.props.end.type === 'binding')
|
bindings = getArrowBindings(editor, arrow)
|
||||||
expect(arrow.props.end.boundShapeId).toBe(ids.box3)
|
assert(bindings.end)
|
||||||
|
expect(bindings.end.toId).toBe(ids.box3)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -342,11 +353,7 @@ describe('When a shape is rotated', () => {
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const anchor = (
|
const anchor = getArrowBindings(editor, editor.getShape(arrow.id)!).end!.props.normalizedAnchor
|
||||||
editor.getShape<TLArrowShape>(arrow.id)!.props.end as TLArrowShapeTerminal & {
|
|
||||||
type: 'binding'
|
|
||||||
}
|
|
||||||
).normalizedAnchor
|
|
||||||
expect(anchor.x).toBeCloseTo(0.5)
|
expect(anchor.x).toBeCloseTo(0.5)
|
||||||
expect(anchor.y).toBeCloseTo(0.75)
|
expect(anchor.y).toBeCloseTo(0.75)
|
||||||
})
|
})
|
||||||
|
|
|
@ -9,8 +9,8 @@ import {
|
||||||
SVGContainer,
|
SVGContainer,
|
||||||
ShapeUtil,
|
ShapeUtil,
|
||||||
SvgExportContext,
|
SvgExportContext,
|
||||||
|
TLArrowBinding,
|
||||||
TLArrowShape,
|
TLArrowShape,
|
||||||
TLArrowShapeProps,
|
|
||||||
TLHandle,
|
TLHandle,
|
||||||
TLOnEditEndHandler,
|
TLOnEditEndHandler,
|
||||||
TLOnHandleDragHandler,
|
TLOnHandleDragHandler,
|
||||||
|
@ -21,12 +21,14 @@ import {
|
||||||
TLShapeUtilCanvasSvgDef,
|
TLShapeUtilCanvasSvgDef,
|
||||||
TLShapeUtilFlag,
|
TLShapeUtilFlag,
|
||||||
Vec,
|
Vec,
|
||||||
|
arrowBindingMakeItNotSo,
|
||||||
|
arrowBindingMakeItSo,
|
||||||
arrowShapeMigrations,
|
arrowShapeMigrations,
|
||||||
arrowShapeProps,
|
arrowShapeProps,
|
||||||
|
getArrowBindings,
|
||||||
getArrowTerminalsInArrowSpace,
|
getArrowTerminalsInArrowSpace,
|
||||||
getDefaultColorTheme,
|
getDefaultColorTheme,
|
||||||
mapObjectMapValues,
|
mapObjectMapValues,
|
||||||
objectMapEntries,
|
|
||||||
structuredClone,
|
structuredClone,
|
||||||
toDomPrecision,
|
toDomPrecision,
|
||||||
track,
|
track,
|
||||||
|
@ -83,8 +85,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
color: 'black',
|
color: 'black',
|
||||||
labelColor: 'black',
|
labelColor: 'black',
|
||||||
bend: 0,
|
bend: 0,
|
||||||
start: { type: 'point', x: 0, y: 0 },
|
start: { x: 0, y: 0 },
|
||||||
end: { type: 'point', x: 2, y: 0 },
|
end: { x: 2, y: 0 },
|
||||||
arrowheadStart: 'none',
|
arrowheadStart: 'none',
|
||||||
arrowheadEnd: 'arrow',
|
arrowheadEnd: 'arrow',
|
||||||
text: '',
|
text: '',
|
||||||
|
@ -164,10 +166,11 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
|
|
||||||
override onHandleDrag: TLOnHandleDragHandler<TLArrowShape> = (shape, { handle, isPrecise }) => {
|
override onHandleDrag: TLOnHandleDragHandler<TLArrowShape> = (shape, { handle, isPrecise }) => {
|
||||||
const handleId = handle.id as ARROW_HANDLES
|
const handleId = handle.id as ARROW_HANDLES
|
||||||
|
const bindings = getArrowBindings(this.editor, shape)
|
||||||
|
|
||||||
if (handleId === ARROW_HANDLES.MIDDLE) {
|
if (handleId === ARROW_HANDLES.MIDDLE) {
|
||||||
// Bending the arrow...
|
// Bending the arrow...
|
||||||
const { start, end } = getArrowTerminalsInArrowSpace(this.editor, shape)
|
const { start, end } = getArrowTerminalsInArrowSpace(this.editor, shape, bindings)
|
||||||
|
|
||||||
const delta = Vec.Sub(end, start)
|
const delta = Vec.Sub(end, start)
|
||||||
const v = Vec.Per(delta)
|
const v = Vec.Per(delta)
|
||||||
|
@ -186,11 +189,17 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
|
|
||||||
const next = structuredClone(shape) as TLArrowShape
|
const next = structuredClone(shape) as TLArrowShape
|
||||||
|
|
||||||
|
const currentBinding = bindings[handleId]
|
||||||
|
|
||||||
|
const otherHandleId = handleId === ARROW_HANDLES.START ? ARROW_HANDLES.END : ARROW_HANDLES.START
|
||||||
|
const otherBinding = bindings[otherHandleId]
|
||||||
|
|
||||||
if (this.editor.inputs.ctrlKey) {
|
if (this.editor.inputs.ctrlKey) {
|
||||||
// todo: maybe double check that this isn't equal to the other handle too?
|
// todo: maybe double check that this isn't equal to the other handle too?
|
||||||
// Skip binding
|
// Skip binding
|
||||||
|
arrowBindingMakeItNotSo(this.editor, shape, handleId)
|
||||||
|
|
||||||
next.props[handleId] = {
|
next.props[handleId] = {
|
||||||
type: 'point',
|
|
||||||
x: handle.x,
|
x: handle.x,
|
||||||
y: handle.y,
|
y: handle.y,
|
||||||
}
|
}
|
||||||
|
@ -210,8 +219,9 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
|
|
||||||
if (!target) {
|
if (!target) {
|
||||||
// todo: maybe double check that this isn't equal to the other handle too?
|
// todo: maybe double check that this isn't equal to the other handle too?
|
||||||
|
arrowBindingMakeItNotSo(this.editor, shape, handleId)
|
||||||
|
|
||||||
next.props[handleId] = {
|
next.props[handleId] = {
|
||||||
type: 'point',
|
|
||||||
x: handle.x,
|
x: handle.x,
|
||||||
y: handle.y,
|
y: handle.y,
|
||||||
}
|
}
|
||||||
|
@ -230,11 +240,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
|
|
||||||
if (!precise) {
|
if (!precise) {
|
||||||
// If we're switching to a new bound shape, then precise only if moving slowly
|
// If we're switching to a new bound shape, then precise only if moving slowly
|
||||||
const prevHandle = next.props[handleId]
|
if (!currentBinding || (currentBinding && target.id !== currentBinding.toId)) {
|
||||||
if (
|
|
||||||
prevHandle.type === 'point' ||
|
|
||||||
(prevHandle.type === 'binding' && target.id !== prevHandle.boundShapeId)
|
|
||||||
) {
|
|
||||||
precise = this.editor.inputs.pointerVelocity.len() < 0.5
|
precise = this.editor.inputs.pointerVelocity.len() < 0.5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -246,13 +252,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
|
|
||||||
// Double check that we're not going to be doing an imprecise snap on
|
// Double check that we're not going to be doing an imprecise snap on
|
||||||
// the same shape twice, as this would result in a zero length line
|
// the same shape twice, as this would result in a zero length line
|
||||||
const otherHandle =
|
if (otherBinding && target.id === otherBinding.toId && otherBinding.props.isPrecise) {
|
||||||
next.props[handleId === ARROW_HANDLES.START ? ARROW_HANDLES.END : ARROW_HANDLES.START]
|
|
||||||
if (
|
|
||||||
otherHandle.type === 'binding' &&
|
|
||||||
target.id === otherHandle.boundShapeId &&
|
|
||||||
otherHandle.isPrecise
|
|
||||||
) {
|
|
||||||
precise = true
|
precise = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -276,64 +276,58 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
next.props[handleId] = {
|
arrowBindingMakeItSo(this.editor, shape, target.id, {
|
||||||
type: 'binding',
|
terminal: handleId,
|
||||||
boundShapeId: target.id,
|
normalizedAnchor,
|
||||||
normalizedAnchor: normalizedAnchor,
|
|
||||||
isPrecise: precise,
|
isPrecise: precise,
|
||||||
isExact: this.editor.inputs.altKey,
|
isExact: this.editor.inputs.altKey,
|
||||||
}
|
})
|
||||||
|
|
||||||
if (next.props.start.type === 'binding' && next.props.end.type === 'binding') {
|
this.editor.setHintingShapes([target.id])
|
||||||
if (next.props.start.boundShapeId === next.props.end.boundShapeId) {
|
|
||||||
if (Vec.Equals(next.props.start.normalizedAnchor, next.props.end.normalizedAnchor)) {
|
// TODO(alex): restore this if we can
|
||||||
next.props.end.normalizedAnchor.x += 0.05
|
// if (next.props.start.type === 'binding' && next.props.end.type === 'binding') {
|
||||||
}
|
// if (next.props.start.boundShapeId === next.props.end.boundShapeId) {
|
||||||
}
|
// if (Vec.Equals(next.props.start.normalizedAnchor, next.props.end.normalizedAnchor)) {
|
||||||
}
|
// next.props.end.normalizedAnchor.x += 0.05
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
return next
|
return next
|
||||||
}
|
}
|
||||||
|
|
||||||
override onTranslateStart: TLOnTranslateStartHandler<TLArrowShape> = (shape) => {
|
override onTranslateStart: TLOnTranslateStartHandler<TLArrowShape> = (shape) => {
|
||||||
const startBindingId =
|
const bindings = getArrowBindings(this.editor, shape)
|
||||||
shape.props.start.type === 'binding' ? shape.props.start.boundShapeId : null
|
|
||||||
const endBindingId = shape.props.end.type === 'binding' ? shape.props.end.boundShapeId : null
|
|
||||||
|
|
||||||
const terminalsInArrowSpace = getArrowTerminalsInArrowSpace(this.editor, shape)
|
const terminalsInArrowSpace = getArrowTerminalsInArrowSpace(this.editor, shape, bindings)
|
||||||
const shapePageTransform = this.editor.getShapePageTransform(shape.id)!
|
const shapePageTransform = this.editor.getShapePageTransform(shape.id)!
|
||||||
|
|
||||||
// If at least one bound shape is in the selection, do nothing;
|
// If at least one bound shape is in the selection, do nothing;
|
||||||
// If no bound shapes are in the selection, unbind any bound shapes
|
// If no bound shapes are in the selection, unbind any bound shapes
|
||||||
|
|
||||||
const selectedShapeIds = this.editor.getSelectedShapeIds()
|
const selectedShapeIds = this.editor.getSelectedShapeIds()
|
||||||
const shapesToCheck = new Set<string>()
|
|
||||||
if (startBindingId) {
|
|
||||||
// Add shape and all ancestors to set
|
|
||||||
shapesToCheck.add(startBindingId)
|
|
||||||
this.editor.getShapeAncestors(startBindingId).forEach((a) => shapesToCheck.add(a.id))
|
|
||||||
}
|
|
||||||
if (endBindingId) {
|
|
||||||
// Add shape and all ancestors to set
|
|
||||||
shapesToCheck.add(endBindingId)
|
|
||||||
this.editor.getShapeAncestors(endBindingId).forEach((a) => shapesToCheck.add(a.id))
|
|
||||||
}
|
|
||||||
// If any of the shapes are selected, return
|
|
||||||
for (const id of selectedShapeIds) {
|
|
||||||
if (shapesToCheck.has(id)) return
|
|
||||||
}
|
|
||||||
|
|
||||||
let result = shape
|
if (
|
||||||
|
(bindings.start &&
|
||||||
|
(selectedShapeIds.includes(bindings.start.toId) ||
|
||||||
|
this.editor.isAncestorSelected(bindings.start.toId))) ||
|
||||||
|
(bindings.end &&
|
||||||
|
(selectedShapeIds.includes(bindings.end.toId) ||
|
||||||
|
this.editor.isAncestorSelected(bindings.end.toId)))
|
||||||
|
) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// When we start translating shapes, record where their bindings were in page space so we
|
// When we start translating shapes, record where their bindings were in page space so we
|
||||||
// can maintain them as we translate the arrow
|
// can maintain them as we translate the arrow
|
||||||
shapeAtTranslationStart.set(shape, {
|
shapeAtTranslationStart.set(shape, {
|
||||||
pagePosition: shapePageTransform.applyToPoint(shape),
|
pagePosition: shapePageTransform.applyToPoint(shape),
|
||||||
terminalBindings: mapObjectMapValues(terminalsInArrowSpace, (terminalName, point) => {
|
terminalBindings: mapObjectMapValues(terminalsInArrowSpace, (terminalName, point) => {
|
||||||
const terminal = shape.props[terminalName]
|
const binding = bindings[terminalName]
|
||||||
if (terminal.type !== 'binding') return null
|
if (!binding) return null
|
||||||
return {
|
return {
|
||||||
binding: terminal,
|
binding,
|
||||||
shapePosition: point,
|
shapePosition: point,
|
||||||
pagePosition: shapePageTransform.applyToPoint(point),
|
pagePosition: shapePageTransform.applyToPoint(point),
|
||||||
}
|
}
|
||||||
|
@ -341,15 +335,16 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
})
|
})
|
||||||
|
|
||||||
for (const handleName of [ARROW_HANDLES.START, ARROW_HANDLES.END] as const) {
|
for (const handleName of [ARROW_HANDLES.START, ARROW_HANDLES.END] as const) {
|
||||||
const terminal = shape.props[handleName]
|
const binding = bindings[handleName]
|
||||||
if (terminal.type !== 'binding') continue
|
if (!binding) continue
|
||||||
result = {
|
|
||||||
...shape,
|
this.editor.updateBinding({
|
||||||
props: { ...shape.props, [handleName]: { ...terminal, isPrecise: true } },
|
...binding,
|
||||||
}
|
props: { ...binding.props, isPrecise: true },
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return result
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
override onTranslate?: TLOnTranslateHandler<TLArrowShape> = (initialShape, shape) => {
|
override onTranslate?: TLOnTranslateHandler<TLArrowShape> = (initialShape, shape) => {
|
||||||
|
@ -362,10 +357,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
atTranslationStart.pagePosition
|
atTranslationStart.pagePosition
|
||||||
)
|
)
|
||||||
|
|
||||||
let result = shape
|
for (const terminalBinding of Object.values(atTranslationStart.terminalBindings)) {
|
||||||
for (const [terminalName, terminalBinding] of objectMapEntries(
|
|
||||||
atTranslationStart.terminalBindings
|
|
||||||
)) {
|
|
||||||
if (!terminalBinding) continue
|
if (!terminalBinding) continue
|
||||||
|
|
||||||
const newPagePoint = Vec.Add(terminalBinding.pagePosition, Vec.Mul(pageDelta, 0.5))
|
const newPagePoint = Vec.Add(terminalBinding.pagePosition, Vec.Mul(pageDelta, 0.5))
|
||||||
|
@ -378,54 +370,41 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
if (newTarget?.id === terminalBinding.binding.boundShapeId) {
|
if (newTarget?.id === terminalBinding.binding.toId) {
|
||||||
const targetBounds = Box.ZeroFix(this.editor.getShapeGeometry(newTarget).bounds)
|
const targetBounds = Box.ZeroFix(this.editor.getShapeGeometry(newTarget).bounds)
|
||||||
const pointInTargetSpace = this.editor.getPointInShapeSpace(newTarget, newPagePoint)
|
const pointInTargetSpace = this.editor.getPointInShapeSpace(newTarget, newPagePoint)
|
||||||
const normalizedAnchor = {
|
const normalizedAnchor = {
|
||||||
x: (pointInTargetSpace.x - targetBounds.minX) / targetBounds.width,
|
x: (pointInTargetSpace.x - targetBounds.minX) / targetBounds.width,
|
||||||
y: (pointInTargetSpace.y - targetBounds.minY) / targetBounds.height,
|
y: (pointInTargetSpace.y - targetBounds.minY) / targetBounds.height,
|
||||||
}
|
}
|
||||||
result = {
|
arrowBindingMakeItSo(this.editor, shape, newTarget.id, {
|
||||||
...result,
|
...terminalBinding.binding.props,
|
||||||
props: {
|
normalizedAnchor,
|
||||||
...result.props,
|
isPrecise: true,
|
||||||
[terminalName]: { ...terminalBinding.binding, isPrecise: true, normalizedAnchor },
|
})
|
||||||
},
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
result = {
|
arrowBindingMakeItNotSo(this.editor, shape, terminalBinding.binding.props.terminal)
|
||||||
...result,
|
|
||||||
props: {
|
|
||||||
...result.props,
|
|
||||||
[terminalName]: {
|
|
||||||
type: 'point',
|
|
||||||
x: terminalBinding.shapePosition.x,
|
|
||||||
y: terminalBinding.shapePosition.y,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
}
|
||||||
|
|
||||||
override onResize: TLOnResizeHandler<TLArrowShape> = (shape, info) => {
|
override onResize: TLOnResizeHandler<TLArrowShape> = (shape, info) => {
|
||||||
const { scaleX, scaleY } = info
|
const { scaleX, scaleY } = info
|
||||||
|
|
||||||
const terminals = getArrowTerminalsInArrowSpace(this.editor, shape)
|
const bindings = getArrowBindings(this.editor, shape)
|
||||||
|
const terminals = getArrowTerminalsInArrowSpace(this.editor, shape, bindings)
|
||||||
|
|
||||||
const { start, end } = structuredClone<TLArrowShape['props']>(shape.props)
|
const { start, end } = structuredClone<TLArrowShape['props']>(shape.props)
|
||||||
let { bend } = shape.props
|
let { bend } = shape.props
|
||||||
|
|
||||||
// Rescale start handle if it's not bound to a shape
|
// Rescale start handle if it's not bound to a shape
|
||||||
if (start.type === 'point') {
|
if (!bindings.start) {
|
||||||
start.x = terminals.start.x * scaleX
|
start.x = terminals.start.x * scaleX
|
||||||
start.y = terminals.start.y * scaleY
|
start.y = terminals.start.y * scaleY
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rescale end handle if it's not bound to a shape
|
// Rescale end handle if it's not bound to a shape
|
||||||
if (end.type === 'point') {
|
if (!bindings.end) {
|
||||||
end.x = terminals.end.x * scaleX
|
end.x = terminals.end.x * scaleX
|
||||||
end.y = terminals.end.y * scaleY
|
end.y = terminals.end.y * scaleY
|
||||||
}
|
}
|
||||||
|
@ -436,18 +415,23 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
const mx = Math.abs(scaleX)
|
const mx = Math.abs(scaleX)
|
||||||
const my = Math.abs(scaleY)
|
const my = Math.abs(scaleY)
|
||||||
|
|
||||||
|
const startNormalizedAnchor = bindings?.start
|
||||||
|
? Vec.From(bindings.start.props.normalizedAnchor)
|
||||||
|
: null
|
||||||
|
const endNormalizedAnchor = bindings?.end ? Vec.From(bindings.end.props.normalizedAnchor) : null
|
||||||
|
|
||||||
if (scaleX < 0 && scaleY >= 0) {
|
if (scaleX < 0 && scaleY >= 0) {
|
||||||
if (bend !== 0) {
|
if (bend !== 0) {
|
||||||
bend *= -1
|
bend *= -1
|
||||||
bend *= Math.max(mx, my)
|
bend *= Math.max(mx, my)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (start.type === 'binding') {
|
if (startNormalizedAnchor) {
|
||||||
start.normalizedAnchor.x = 1 - start.normalizedAnchor.x
|
startNormalizedAnchor.x = 1 - startNormalizedAnchor.x
|
||||||
}
|
}
|
||||||
|
|
||||||
if (end.type === 'binding') {
|
if (endNormalizedAnchor) {
|
||||||
end.normalizedAnchor.x = 1 - end.normalizedAnchor.x
|
endNormalizedAnchor.x = 1 - endNormalizedAnchor.x
|
||||||
}
|
}
|
||||||
} else if (scaleX >= 0 && scaleY < 0) {
|
} else if (scaleX >= 0 && scaleY < 0) {
|
||||||
if (bend !== 0) {
|
if (bend !== 0) {
|
||||||
|
@ -455,12 +439,12 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
bend *= Math.max(mx, my)
|
bend *= Math.max(mx, my)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (start.type === 'binding') {
|
if (startNormalizedAnchor) {
|
||||||
start.normalizedAnchor.y = 1 - start.normalizedAnchor.y
|
startNormalizedAnchor.y = 1 - startNormalizedAnchor.y
|
||||||
}
|
}
|
||||||
|
|
||||||
if (end.type === 'binding') {
|
if (endNormalizedAnchor) {
|
||||||
end.normalizedAnchor.y = 1 - end.normalizedAnchor.y
|
endNormalizedAnchor.y = 1 - endNormalizedAnchor.y
|
||||||
}
|
}
|
||||||
} else if (scaleX >= 0 && scaleY >= 0) {
|
} else if (scaleX >= 0 && scaleY >= 0) {
|
||||||
if (bend !== 0) {
|
if (bend !== 0) {
|
||||||
|
@ -471,17 +455,30 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
bend *= Math.max(mx, my)
|
bend *= Math.max(mx, my)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (start.type === 'binding') {
|
if (startNormalizedAnchor) {
|
||||||
start.normalizedAnchor.x = 1 - start.normalizedAnchor.x
|
startNormalizedAnchor.x = 1 - startNormalizedAnchor.x
|
||||||
start.normalizedAnchor.y = 1 - start.normalizedAnchor.y
|
startNormalizedAnchor.y = 1 - startNormalizedAnchor.y
|
||||||
}
|
}
|
||||||
|
|
||||||
if (end.type === 'binding') {
|
if (endNormalizedAnchor) {
|
||||||
end.normalizedAnchor.x = 1 - end.normalizedAnchor.x
|
endNormalizedAnchor.x = 1 - endNormalizedAnchor.x
|
||||||
end.normalizedAnchor.y = 1 - end.normalizedAnchor.y
|
endNormalizedAnchor.y = 1 - endNormalizedAnchor.y
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (bindings.start && startNormalizedAnchor) {
|
||||||
|
arrowBindingMakeItSo(this.editor, shape, bindings.start.toId, {
|
||||||
|
...bindings.start.props,
|
||||||
|
normalizedAnchor: startNormalizedAnchor,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (bindings.end && endNormalizedAnchor) {
|
||||||
|
arrowBindingMakeItSo(this.editor, shape, bindings.end.toId, {
|
||||||
|
...bindings.end.props,
|
||||||
|
normalizedAnchor: endNormalizedAnchor,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const next = {
|
const next = {
|
||||||
props: {
|
props: {
|
||||||
start,
|
start,
|
||||||
|
@ -565,18 +562,18 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
|
||||||
}
|
}
|
||||||
|
|
||||||
indicator(shape: TLArrowShape) {
|
indicator(shape: TLArrowShape) {
|
||||||
const { start, end } = getArrowTerminalsInArrowSpace(this.editor, shape)
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||||
|
const isEditing = useIsEditing(shape.id)
|
||||||
|
|
||||||
const info = this.editor.getArrowInfo(shape)
|
const info = this.editor.getArrowInfo(shape)
|
||||||
|
if (!info) return null
|
||||||
|
|
||||||
|
const { start, end } = getArrowTerminalsInArrowSpace(this.editor, shape, info?.bindings)
|
||||||
const geometry = this.editor.getShapeGeometry<Group2d>(shape)
|
const geometry = this.editor.getShapeGeometry<Group2d>(shape)
|
||||||
const bounds = geometry.bounds
|
const bounds = geometry.bounds
|
||||||
|
|
||||||
const labelGeometry = shape.props.text.trim() ? (geometry.children[1] as Rectangle2d) : null
|
const labelGeometry = shape.props.text.trim() ? (geometry.children[1] as Rectangle2d) : null
|
||||||
|
|
||||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
||||||
const isEditing = useIsEditing(shape.id)
|
|
||||||
|
|
||||||
if (!info) return null
|
|
||||||
if (Vec.Equals(start, end)) return null
|
if (Vec.Equals(start, end)) return null
|
||||||
|
|
||||||
const strokeWidth = STROKE_SIZES[shape.props.size]
|
const strokeWidth = STROKE_SIZES[shape.props.size]
|
||||||
|
@ -753,6 +750,7 @@ const ArrowSvg = track(function ArrowSvg({
|
||||||
const theme = useDefaultColorTheme()
|
const theme = useDefaultColorTheme()
|
||||||
const info = editor.getArrowInfo(shape)
|
const info = editor.getArrowInfo(shape)
|
||||||
const bounds = Box.ZeroFix(editor.getShapeGeometry(shape).bounds)
|
const bounds = Box.ZeroFix(editor.getShapeGeometry(shape).bounds)
|
||||||
|
const bindings = getArrowBindings(editor, shape)
|
||||||
|
|
||||||
const changeIndex = React.useMemo<number>(() => {
|
const changeIndex = React.useMemo<number>(() => {
|
||||||
return editor.environment.isSafari ? (globalRenderIndex += 1) : 0
|
return editor.environment.isSafari ? (globalRenderIndex += 1) : 0
|
||||||
|
@ -783,7 +781,7 @@ const ArrowSvg = track(function ArrowSvg({
|
||||||
)
|
)
|
||||||
|
|
||||||
handlePath =
|
handlePath =
|
||||||
shape.props.start.type === 'binding' || shape.props.end.type === 'binding' ? (
|
bindings.start || bindings.end ? (
|
||||||
<path
|
<path
|
||||||
className="tl-arrow-hint"
|
className="tl-arrow-hint"
|
||||||
d={info.isStraight ? getStraightArrowHandlePath(info) : getCurvedArrowHandlePath(info)}
|
d={info.isStraight ? getStraightArrowHandlePath(info) : getCurvedArrowHandlePath(info)}
|
||||||
|
@ -791,19 +789,19 @@ const ArrowSvg = track(function ArrowSvg({
|
||||||
strokeDashoffset={strokeDashoffset}
|
strokeDashoffset={strokeDashoffset}
|
||||||
strokeWidth={sw}
|
strokeWidth={sw}
|
||||||
markerStart={
|
markerStart={
|
||||||
shape.props.start.type === 'binding'
|
bindings.start
|
||||||
? shape.props.start.isExact
|
? bindings.start.props.isExact
|
||||||
? ''
|
? ''
|
||||||
: shape.props.start.isPrecise
|
: bindings.start.props.isPrecise
|
||||||
? 'url(#arrowhead-cross)'
|
? 'url(#arrowhead-cross)'
|
||||||
: 'url(#arrowhead-dot)'
|
: 'url(#arrowhead-dot)'
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
markerEnd={
|
markerEnd={
|
||||||
shape.props.end.type === 'binding'
|
bindings.end
|
||||||
? shape.props.end.isExact
|
? bindings.end.props.isExact
|
||||||
? ''
|
? ''
|
||||||
: shape.props.end.isPrecise
|
: bindings.end.props.isPrecise
|
||||||
? 'url(#arrowhead-cross)'
|
? 'url(#arrowhead-cross)'
|
||||||
: 'url(#arrowhead-dot)'
|
: 'url(#arrowhead-dot)'
|
||||||
: ''
|
: ''
|
||||||
|
@ -903,7 +901,7 @@ const shapeAtTranslationStart = new WeakMap<
|
||||||
{
|
{
|
||||||
pagePosition: Vec
|
pagePosition: Vec
|
||||||
shapePosition: Vec
|
shapePosition: Vec
|
||||||
binding: Extract<TLArrowShapeProps['start'], { type: 'binding' }>
|
binding: TLArrowBinding
|
||||||
} | null
|
} | null
|
||||||
>
|
>
|
||||||
}
|
}
|
||||||
|
|
|
@ -268,8 +268,8 @@ export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
|
||||||
const debugGeom: Geometry2d[] = []
|
const debugGeom: Geometry2d[] = []
|
||||||
const info = editor.getArrowInfo(shape)!
|
const info = editor.getArrowInfo(shape)!
|
||||||
|
|
||||||
const hasStartBinding = shape.props.start.type === 'binding'
|
const hasStartBinding = !!info.bindings.start
|
||||||
const hasEndBinding = shape.props.end.type === 'binding'
|
const hasEndBinding = !!info.bindings.end
|
||||||
const hasStartArrowhead = info.start.arrowhead !== 'none'
|
const hasStartArrowhead = info.start.arrowhead !== 'none'
|
||||||
const hasEndArrowhead = info.end.arrowhead !== 'none'
|
const hasEndArrowhead = info.end.arrowhead !== 'none'
|
||||||
if (info.isStraight) {
|
if (info.isStraight) {
|
||||||
|
|
|
@ -111,10 +111,6 @@ export class Pointing extends StateNode {
|
||||||
})
|
})
|
||||||
|
|
||||||
if (change) {
|
if (change) {
|
||||||
const startTerminal = change.props?.start
|
|
||||||
if (startTerminal?.type === 'binding') {
|
|
||||||
this.editor.setHintingShapes([startTerminal.boundShapeId])
|
|
||||||
}
|
|
||||||
this.editor.updateShapes([change])
|
this.editor.updateShapes([change])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -148,10 +144,6 @@ export class Pointing extends StateNode {
|
||||||
})
|
})
|
||||||
|
|
||||||
if (change) {
|
if (change) {
|
||||||
const endTerminal = change.props?.end
|
|
||||||
if (endTerminal?.type === 'binding') {
|
|
||||||
this.editor.setHintingShapes([endTerminal.boundShapeId])
|
|
||||||
}
|
|
||||||
this.editor.updateShapes([change])
|
this.editor.updateShapes([change])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import {
|
import {
|
||||||
StateNode,
|
StateNode,
|
||||||
TLArrowShape,
|
TLArrowShape,
|
||||||
TLArrowShapeTerminal,
|
|
||||||
TLCancelEvent,
|
TLCancelEvent,
|
||||||
TLEnterEventHandler,
|
TLEnterEventHandler,
|
||||||
TLEventHandlers,
|
TLEventHandlers,
|
||||||
|
@ -12,6 +11,7 @@ import {
|
||||||
TLShapeId,
|
TLShapeId,
|
||||||
TLShapePartial,
|
TLShapePartial,
|
||||||
Vec,
|
Vec,
|
||||||
|
getArrowBindings,
|
||||||
snapAngle,
|
snapAngle,
|
||||||
sortByIndex,
|
sortByIndex,
|
||||||
structuredClone,
|
structuredClone,
|
||||||
|
@ -112,16 +112,16 @@ export class DraggingHandle extends StateNode {
|
||||||
|
|
||||||
// <!-- Only relevant to arrows
|
// <!-- Only relevant to arrows
|
||||||
if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
const initialTerminal = shape.props[info.handle.id as 'start' | 'end']
|
const initialBinding = getArrowBindings(this.editor, shape)[info.handle.id as 'start' | 'end']
|
||||||
|
|
||||||
this.isPrecise = false
|
this.isPrecise = false
|
||||||
|
|
||||||
if (initialTerminal?.type === 'binding') {
|
if (initialBinding) {
|
||||||
this.editor.setHintingShapes([initialTerminal.boundShapeId])
|
this.editor.setHintingShapes([initialBinding.toId])
|
||||||
|
|
||||||
this.isPrecise = initialTerminal.isPrecise
|
this.isPrecise = initialBinding.props.isPrecise
|
||||||
if (this.isPrecise) {
|
if (this.isPrecise) {
|
||||||
this.isPreciseId = initialTerminal.boundShapeId
|
this.isPreciseId = initialBinding.toId
|
||||||
} else {
|
} else {
|
||||||
this.resetExactTimeout()
|
this.resetExactTimeout()
|
||||||
}
|
}
|
||||||
|
@ -283,15 +283,15 @@ export class DraggingHandle extends StateNode {
|
||||||
const next: TLShapePartial<any> = { ...shape, ...changes }
|
const next: TLShapePartial<any> = { ...shape, ...changes }
|
||||||
|
|
||||||
// Arrows
|
// Arrows
|
||||||
if (initialHandle.canBind) {
|
if (initialHandle.canBind && this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
const bindingAfter = (next.props as any)[initialHandle.id] as TLArrowShapeTerminal | undefined
|
const bindingAfter = getArrowBindings(editor, shape)[initialHandle.id as 'start' | 'end']
|
||||||
|
|
||||||
if (bindingAfter?.type === 'binding') {
|
if (bindingAfter) {
|
||||||
if (hintingShapeIds[0] !== bindingAfter.boundShapeId) {
|
if (hintingShapeIds[0] !== bindingAfter.toId) {
|
||||||
editor.setHintingShapes([bindingAfter.boundShapeId])
|
editor.setHintingShapes([bindingAfter.toId])
|
||||||
this.pointingId = bindingAfter.boundShapeId
|
this.pointingId = bindingAfter.toId
|
||||||
this.isPrecise = pointerVelocity.len() < 0.5 || altKey
|
this.isPrecise = pointerVelocity.len() < 0.5 || altKey
|
||||||
this.isPreciseId = this.isPrecise ? bindingAfter.boundShapeId : null
|
this.isPreciseId = this.isPrecise ? bindingAfter.toId : null
|
||||||
this.resetExactTimeout()
|
this.resetExactTimeout()
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -7,6 +7,7 @@ import {
|
||||||
TLNoteShape,
|
TLNoteShape,
|
||||||
TLPointerEventInfo,
|
TLPointerEventInfo,
|
||||||
Vec,
|
Vec,
|
||||||
|
getArrowBindings,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
import {
|
import {
|
||||||
NOTE_CENTER_OFFSET,
|
NOTE_CENTER_OFFSET,
|
||||||
|
@ -25,10 +26,10 @@ export class PointingHandle extends StateNode {
|
||||||
|
|
||||||
const { shape } = info
|
const { shape } = info
|
||||||
if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
const initialTerminal = shape.props[info.handle.id as 'start' | 'end']
|
const initialBinding = getArrowBindings(this.editor, shape)[info.handle.id as 'start' | 'end']
|
||||||
|
|
||||||
if (initialTerminal?.type === 'binding') {
|
if (initialBinding) {
|
||||||
this.editor.setHintingShapes([initialTerminal.boundShapeId])
|
this.editor.setHintingShapes([initialBinding.toId])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,7 @@ import {
|
||||||
TLGroupShape,
|
TLGroupShape,
|
||||||
TLLineShape,
|
TLLineShape,
|
||||||
TLTextShape,
|
TLTextShape,
|
||||||
|
getArrowBindings,
|
||||||
useEditor,
|
useEditor,
|
||||||
useValue,
|
useValue,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
|
@ -17,14 +18,9 @@ function shapesWithUnboundArrows(editor: Editor) {
|
||||||
|
|
||||||
return selectedShapes.filter((shape) => {
|
return selectedShapes.filter((shape) => {
|
||||||
if (!shape) return false
|
if (!shape) return false
|
||||||
if (
|
if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
editor.isShapeOfType<TLArrowShape>(shape, 'arrow') &&
|
const bindings = getArrowBindings(editor, shape)
|
||||||
shape.props.start.type === 'binding'
|
if (bindings.start || bindings.end) return false
|
||||||
) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow') && shape.props.end.type === 'binding') {
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
@ -50,16 +46,16 @@ export const useAllowGroup = () => {
|
||||||
|
|
||||||
for (const shape of selectedShapes) {
|
for (const shape of selectedShapes) {
|
||||||
if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||||
const { start, end } = shape.props
|
const bindings = getArrowBindings(editor, shape)
|
||||||
if (start.type === 'binding') {
|
if (bindings.start) {
|
||||||
// if the other shape is not among the selected shapes...
|
// if the other shape is not among the selected shapes...
|
||||||
if (!selectedShapes.some((s) => s.id === start.boundShapeId)) {
|
if (!selectedShapes.some((s) => s.id === bindings.start!.toId)) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (end.type === 'binding') {
|
if (bindings.end) {
|
||||||
// if the other shape is not among the selected shapes...
|
// if the other shape is not among the selected shapes...
|
||||||
if (!selectedShapes.some((s) => s.id === end.boundShapeId)) {
|
if (!selectedShapes.some((s) => s.id === bindings.end!.toId)) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,6 @@ import {
|
||||||
PageRecordType,
|
PageRecordType,
|
||||||
TLArrowShape,
|
TLArrowShape,
|
||||||
TLArrowShapeArrowheadStyle,
|
TLArrowShapeArrowheadStyle,
|
||||||
TLArrowShapeTerminal,
|
|
||||||
TLAsset,
|
TLAsset,
|
||||||
TLAssetId,
|
TLAssetId,
|
||||||
TLDefaultColorStyle,
|
TLDefaultColorStyle,
|
||||||
|
@ -410,12 +409,10 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
|
||||||
arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
|
arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
|
||||||
arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
|
arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
|
||||||
start: {
|
start: {
|
||||||
type: 'point',
|
|
||||||
x: coerceNumber(v1Shape.handles.start.point[0]),
|
x: coerceNumber(v1Shape.handles.start.point[0]),
|
||||||
y: coerceNumber(v1Shape.handles.start.point[1]),
|
y: coerceNumber(v1Shape.handles.start.point[1]),
|
||||||
},
|
},
|
||||||
end: {
|
end: {
|
||||||
type: 'point',
|
|
||||||
x: coerceNumber(v1Shape.handles.end.point[0]),
|
x: coerceNumber(v1Shape.handles.end.point[0]),
|
||||||
y: coerceNumber(v1Shape.handles.end.point[1]),
|
y: coerceNumber(v1Shape.handles.end.point[1]),
|
||||||
},
|
},
|
||||||
|
@ -563,18 +560,19 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
|
||||||
})
|
})
|
||||||
|
|
||||||
if (change) {
|
if (change) {
|
||||||
if (change.props?.[handleId]) {
|
// TODO(alex): can we delete this?
|
||||||
const terminal = change.props?.[handleId] as TLArrowShapeTerminal
|
// if (change.props?.[handleId]) {
|
||||||
if (terminal.type === 'binding') {
|
// const terminal = change.props?.[handleId] as TLArrowShapeTerminal
|
||||||
terminal.isExact = binding.distance === 0
|
// if (terminal.type === 'binding') {
|
||||||
|
// terminal.isExact = binding.distance === 0
|
||||||
|
|
||||||
if (terminal.boundShapeId !== targetId) {
|
// if (terminal.boundShapeId !== targetId) {
|
||||||
console.warn('Hit the wrong shape!')
|
// console.warn('Hit the wrong shape!')
|
||||||
terminal.boundShapeId = targetId
|
// terminal.boundShapeId = targetId
|
||||||
terminal.normalizedAnchor = { x: 0.5, y: 0.5 }
|
// terminal.normalizedAnchor = { x: 0.5, y: 0.5 }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
editor.updateShapes([change])
|
editor.updateShapes([change])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,7 @@ import {
|
||||||
createTLStore,
|
createTLStore,
|
||||||
rotateSelectionHandle,
|
rotateSelectionHandle,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
|
import { defaultBindingUtils } from '../lib/defaultBindingUtils'
|
||||||
import { defaultShapeTools } from '../lib/defaultShapeTools'
|
import { defaultShapeTools } from '../lib/defaultShapeTools'
|
||||||
import { defaultShapeUtils } from '../lib/defaultShapeUtils'
|
import { defaultShapeUtils } from '../lib/defaultShapeUtils'
|
||||||
import { defaultTools } from '../lib/defaultTools'
|
import { defaultTools } from '../lib/defaultTools'
|
||||||
|
@ -60,12 +61,17 @@ export class TestEditor extends Editor {
|
||||||
elm.tabIndex = 0
|
elm.tabIndex = 0
|
||||||
|
|
||||||
const shapeUtilsWithDefaults = [...defaultShapeUtils, ...(options.shapeUtils ?? [])]
|
const shapeUtilsWithDefaults = [...defaultShapeUtils, ...(options.shapeUtils ?? [])]
|
||||||
|
const bindingUtilsWithDefaults = [...defaultBindingUtils, ...(options.bindingUtils ?? [])]
|
||||||
|
|
||||||
super({
|
super({
|
||||||
...options,
|
...options,
|
||||||
shapeUtils: [...shapeUtilsWithDefaults],
|
shapeUtils: shapeUtilsWithDefaults,
|
||||||
|
bindingUtils: bindingUtilsWithDefaults,
|
||||||
tools: [...defaultTools, ...defaultShapeTools, ...(options.tools ?? [])],
|
tools: [...defaultTools, ...defaultShapeTools, ...(options.tools ?? [])],
|
||||||
store: createTLStore({ shapeUtils: [...shapeUtilsWithDefaults] }),
|
store: createTLStore({
|
||||||
|
shapeUtils: shapeUtilsWithDefaults,
|
||||||
|
bindingUtils: bindingUtilsWithDefaults,
|
||||||
|
}),
|
||||||
getContainer: () => elm,
|
getContainer: () => elm,
|
||||||
initialState: 'select',
|
initialState: 'select',
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,295 +0,0 @@
|
||||||
import { TLArrowShape, TLGeoShape, TLShapeId, createShapeId } from '@tldraw/editor'
|
|
||||||
import { TestEditor } from './TestEditor'
|
|
||||||
import { TL } from './test-jsx'
|
|
||||||
|
|
||||||
let editor: TestEditor
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
editor = new TestEditor()
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('arrowBindingsIndex', () => {
|
|
||||||
it('keeps a mapping from bound shapes to the arrows that bind to them', () => {
|
|
||||||
const ids = editor.createShapesFromJsx([
|
|
||||||
<TL.geo ref="box1" x={0} y={0} w={100} h={100} fill="solid" />,
|
|
||||||
<TL.geo ref="box2" x={200} y={0} w={100} h={100} fill="solid" />,
|
|
||||||
])
|
|
||||||
|
|
||||||
editor.selectNone()
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(50, 50)
|
|
||||||
expect(editor.getOnlySelectedShape()).toBe(null)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([])
|
|
||||||
|
|
||||||
editor.pointerMove(50, 55)
|
|
||||||
expect(editor.getOnlySelectedShape()).not.toBe(null)
|
|
||||||
const arrow = editor.getOnlySelectedShape()!
|
|
||||||
expect(arrow.type).toBe('arrow')
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([
|
|
||||||
{ arrowId: arrow.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow.id, handleId: 'end' },
|
|
||||||
])
|
|
||||||
|
|
||||||
editor.pointerMove(250, 50)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([{ arrowId: arrow.id, handleId: 'start' }])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([{ arrowId: arrow.id, handleId: 'end' }])
|
|
||||||
})
|
|
||||||
|
|
||||||
it('works if there are many arrows', () => {
|
|
||||||
const ids = {
|
|
||||||
box1: createShapeId('box1'),
|
|
||||||
box2: createShapeId('box2'),
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.createShapes([
|
|
||||||
{ type: 'geo', id: ids.box1, x: 0, y: 0, props: { w: 100, h: 100 } },
|
|
||||||
{ type: 'geo', id: ids.box2, x: 200, y: 0, props: { w: 100, h: 100 } },
|
|
||||||
])
|
|
||||||
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
// start at box 1 and end on box 2
|
|
||||||
editor.pointerDown(50, 50)
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([])
|
|
||||||
|
|
||||||
editor.pointerMove(250, 50)
|
|
||||||
const arrow1 = editor.getOnlySelectedShape()!
|
|
||||||
expect(arrow1.type).toBe('arrow')
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([{ arrowId: arrow1.id, handleId: 'start' }])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([{ arrowId: arrow1.id, handleId: 'end' }])
|
|
||||||
|
|
||||||
editor.pointerUp()
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([{ arrowId: arrow1.id, handleId: 'start' }])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([{ arrowId: arrow1.id, handleId: 'end' }])
|
|
||||||
|
|
||||||
// start at box 1 and end on the page
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerMove(50, 50).pointerDown().pointerMove(50, -50).pointerUp()
|
|
||||||
const arrow2 = editor.getOnlySelectedShape()!
|
|
||||||
expect(arrow2.type).toBe('arrow')
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([
|
|
||||||
{ arrowId: arrow1.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow2.id, handleId: 'start' },
|
|
||||||
])
|
|
||||||
|
|
||||||
// start outside box 1 and end in box 1
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(0, -50).pointerMove(50, 50).pointerUp(50, 50)
|
|
||||||
const arrow3 = editor.getOnlySelectedShape()!
|
|
||||||
expect(arrow3.type).toBe('arrow')
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([
|
|
||||||
{ arrowId: arrow1.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow2.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow3.id, handleId: 'end' },
|
|
||||||
])
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([{ arrowId: arrow1.id, handleId: 'end' }])
|
|
||||||
|
|
||||||
// start at box 2 and end on the page
|
|
||||||
editor.selectNone()
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(250, 50)
|
|
||||||
editor.expectToBeIn('arrow.pointing')
|
|
||||||
editor.pointerMove(250, -50)
|
|
||||||
editor.expectToBeIn('select.dragging_handle')
|
|
||||||
const arrow4 = editor.getOnlySelectedShape()!
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([
|
|
||||||
{ arrowId: arrow1.id, handleId: 'end' },
|
|
||||||
{ arrowId: arrow4.id, handleId: 'start' },
|
|
||||||
])
|
|
||||||
|
|
||||||
editor.pointerUp(250, -50)
|
|
||||||
editor.expectToBeIn('select.idle')
|
|
||||||
expect(arrow4.type).toBe('arrow')
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([
|
|
||||||
{ arrowId: arrow1.id, handleId: 'end' },
|
|
||||||
{ arrowId: arrow4.id, handleId: 'start' },
|
|
||||||
])
|
|
||||||
|
|
||||||
// start outside box 2 and enter in box 2
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(250, -50).pointerMove(250, 50).pointerUp(250, 50)
|
|
||||||
const arrow5 = editor.getOnlySelectedShape()!
|
|
||||||
expect(arrow5.type).toBe('arrow')
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toEqual([
|
|
||||||
{ arrowId: arrow1.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow2.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow3.id, handleId: 'end' },
|
|
||||||
])
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([
|
|
||||||
{ arrowId: arrow1.id, handleId: 'end' },
|
|
||||||
{ arrowId: arrow4.id, handleId: 'start' },
|
|
||||||
{ arrowId: arrow5.id, handleId: 'end' },
|
|
||||||
])
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('updating shapes', () => {
|
|
||||||
// ▲ │ │ ▲
|
|
||||||
// │ │ │ │
|
|
||||||
// b c e d
|
|
||||||
// ┌───┼─┴─┐ ┌──┴──┼─┐
|
|
||||||
// │ │ ▼ │ │ ▼ │ │
|
|
||||||
// │ └───┼─────a───┼───► │ │
|
|
||||||
// │ 1 │ │ 2 │
|
|
||||||
// └───────┘ └───────┘
|
|
||||||
let arrowAId: TLShapeId
|
|
||||||
let arrowBId: TLShapeId
|
|
||||||
let arrowCId: TLShapeId
|
|
||||||
let arrowDId: TLShapeId
|
|
||||||
let arrowEId: TLShapeId
|
|
||||||
let ids: Record<string, TLShapeId>
|
|
||||||
beforeEach(() => {
|
|
||||||
ids = editor.createShapesFromJsx([
|
|
||||||
<TL.geo ref="box1" x={0} y={0} w={100} h={100} />,
|
|
||||||
<TL.geo ref="box2" x={200} y={0} w={100} h={100} />,
|
|
||||||
])
|
|
||||||
|
|
||||||
// span both boxes
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(50, 50).pointerMove(250, 50).pointerUp(250, 50)
|
|
||||||
arrowAId = editor.getOnlySelectedShape()!.id
|
|
||||||
// start at box 1 and leave
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(50, 50).pointerMove(50, -50).pointerUp(50, -50)
|
|
||||||
arrowBId = editor.getOnlySelectedShape()!.id
|
|
||||||
// start outside box 1 and enter
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(50, -50).pointerMove(50, 50).pointerUp(50, 50)
|
|
||||||
arrowCId = editor.getOnlySelectedShape()!.id
|
|
||||||
// start at box 2 and leave
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(250, 50).pointerMove(250, -50).pointerUp(250, -50)
|
|
||||||
arrowDId = editor.getOnlySelectedShape()!.id
|
|
||||||
// start outside box 2 and enter
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(250, -50).pointerMove(250, 50).pointerUp(250, 50)
|
|
||||||
arrowEId = editor.getOnlySelectedShape()!.id
|
|
||||||
})
|
|
||||||
it('deletes the entry if you delete the bound shapes', () => {
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
editor.deleteShapes([ids.box2])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toEqual([])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
})
|
|
||||||
it('deletes the entry if you delete an arrow', () => {
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
editor.deleteShapes([arrowEId])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(2)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
|
|
||||||
editor.deleteShapes([arrowDId])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(1)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
|
|
||||||
editor.deleteShapes([arrowCId])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(1)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(2)
|
|
||||||
|
|
||||||
editor.deleteShapes([arrowBId])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(1)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(1)
|
|
||||||
|
|
||||||
editor.deleteShapes([arrowAId])
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(0)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('deletes the entries in a batch too', () => {
|
|
||||||
editor.deleteShapes([arrowAId, arrowBId, arrowCId, arrowDId, arrowEId])
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(0)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('adds new entries after initial creation', () => {
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
|
|
||||||
// draw from box 2 to box 1
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(250, 50).pointerMove(50, 50).pointerUp(50, 50)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(4)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(4)
|
|
||||||
|
|
||||||
// create a new box
|
|
||||||
|
|
||||||
const { box3 } = editor.createShapesFromJsx(
|
|
||||||
<TL.geo ref="box3" x={400} y={0} w={100} h={100} />
|
|
||||||
)
|
|
||||||
|
|
||||||
// draw from box 2 to box 3
|
|
||||||
|
|
||||||
editor.setCurrentTool('arrow')
|
|
||||||
editor.pointerDown(250, 50).pointerMove(450, 50).pointerUp(450, 50)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(5)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(4)
|
|
||||||
expect(editor.getArrowsBoundTo(box3)).toHaveLength(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('works when copy pasting', () => {
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
|
|
||||||
editor.selectAll()
|
|
||||||
editor.duplicateShapes(editor.getSelectedShapeIds())
|
|
||||||
|
|
||||||
const [box1Clone, box2Clone] = editor
|
|
||||||
.getSelectedShapes()
|
|
||||||
.filter((shape) => editor.isShapeOfType<TLGeoShape>(shape, 'geo'))
|
|
||||||
.sort((a, b) => a.x - b.x)
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(box2Clone.id)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(box1Clone.id)).toHaveLength(3)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('allows bound shapes to be moved', () => {
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
|
|
||||||
editor.nudgeShapes([ids.box2], { x: 0, y: -1 })
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('allows the arrows bound shape to change', () => {
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
|
|
||||||
// create another box
|
|
||||||
|
|
||||||
const { box3 } = editor.createShapesFromJsx(
|
|
||||||
<TL.geo ref="box3" x={400} y={0} w={100} h={100} />
|
|
||||||
)
|
|
||||||
|
|
||||||
// move arrowA from box2 to box3
|
|
||||||
editor.updateShapes<TLArrowShape>([
|
|
||||||
{
|
|
||||||
id: arrowAId,
|
|
||||||
type: 'arrow',
|
|
||||||
props: {
|
|
||||||
end: {
|
|
||||||
type: 'binding',
|
|
||||||
isExact: false,
|
|
||||||
boundShapeId: box3,
|
|
||||||
normalizedAnchor: { x: 0.5, y: 0.5 },
|
|
||||||
isPrecise: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(2)
|
|
||||||
expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)
|
|
||||||
expect(editor.getArrowsBoundTo(box3)).toHaveLength(1)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
|
import { TLArrowShape, TLShapeId, Vec, createShapeId, getArrowBindings } from '@tldraw/editor'
|
||||||
import { TestEditor } from './TestEditor'
|
import { TestEditor } from './TestEditor'
|
||||||
import { TL } from './test-jsx'
|
import { TL } from './test-jsx'
|
||||||
|
|
||||||
|
@ -20,6 +20,7 @@ const ids = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const arrow = () => editor.getOnlySelectedShape() as TLArrowShape
|
const arrow = () => editor.getOnlySelectedShape() as TLArrowShape
|
||||||
|
const bindings = () => getArrowBindings(editor, arrow())
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
editor = new TestEditor()
|
editor = new TestEditor()
|
||||||
|
@ -127,18 +128,17 @@ describe('When binding an arrow to a shape', () => {
|
||||||
editor.setCurrentTool('arrow')
|
editor.setCurrentTool('arrow')
|
||||||
editor.pointerDown(0, 50)
|
editor.pointerDown(0, 50)
|
||||||
editor.pointerMove(99, 50)
|
editor.pointerMove(99, 50)
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('binds to the shape when dragged into the shape edge', () => {
|
it('binds to the shape when dragged into the shape edge', () => {
|
||||||
editor.setCurrentTool('arrow')
|
editor.setCurrentTool('arrow')
|
||||||
editor.pointerDown(0, 50)
|
editor.pointerDown(0, 50)
|
||||||
editor.pointerMove(100, 50)
|
editor.pointerMove(100, 50)
|
||||||
expect(arrow().props.end).toMatchObject({
|
expect(bindings().end).toMatchObject({
|
||||||
type: 'binding',
|
toId: ids.box1,
|
||||||
boundShapeId: ids.box1,
|
props: { normalizedAnchor: { x: 0, y: 0.5 } },
|
||||||
normalizedAnchor: { x: 0, y: 0.5 },
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -146,21 +146,22 @@ describe('When binding an arrow to a shape', () => {
|
||||||
editor.setCurrentTool('arrow')
|
editor.setCurrentTool('arrow')
|
||||||
editor.pointerDown(0, 50)
|
editor.pointerDown(0, 50)
|
||||||
editor.pointerMove(250, 50)
|
editor.pointerMove(250, 50)
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('binds and then unbinds when moved out', () => {
|
it('binds and then unbinds when moved out', () => {
|
||||||
editor.setCurrentTool('arrow')
|
editor.setCurrentTool('arrow')
|
||||||
editor.pointerDown(0, 50)
|
editor.pointerDown(0, 50)
|
||||||
editor.pointerMove(150, 50)
|
editor.pointerMove(150, 50)
|
||||||
expect(arrow().props.end).toMatchObject({
|
expect(bindings().end).toMatchObject({
|
||||||
type: 'binding',
|
toId: ids.box1,
|
||||||
boundShapeId: ids.box1,
|
props: {
|
||||||
normalizedAnchor: { x: 0.5, y: 0.5 },
|
normalizedAnchor: { x: 0.5, y: 0.5 },
|
||||||
isPrecise: true, // enclosed
|
isPrecise: true, // enclosed
|
||||||
|
},
|
||||||
})
|
})
|
||||||
editor.pointerMove(250, 50)
|
editor.pointerMove(250, 50)
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('does not bind when control key is held', () => {
|
it('does not bind when control key is held', () => {
|
||||||
|
@ -168,7 +169,7 @@ describe('When binding an arrow to a shape', () => {
|
||||||
editor.keyDown('Control')
|
editor.keyDown('Control')
|
||||||
editor.pointerDown(0, 50)
|
editor.pointerDown(0, 50)
|
||||||
editor.pointerMove(100, 50)
|
editor.pointerMove(100, 50)
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('does not bind when the shape is locked', () => {
|
it('does not bind when the shape is locked', () => {
|
||||||
|
@ -176,7 +177,7 @@ describe('When binding an arrow to a shape', () => {
|
||||||
editor.setCurrentTool('arrow')
|
editor.setCurrentTool('arrow')
|
||||||
editor.pointerDown(0, 50)
|
editor.pointerDown(0, 50)
|
||||||
editor.pointerMove(100, 50)
|
editor.pointerMove(100, 50)
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should use timer on keyup when using control key to skip binding', () => {
|
it('should use timer on keyup when using control key to skip binding', () => {
|
||||||
|
@ -185,22 +186,22 @@ describe('When binding an arrow to a shape', () => {
|
||||||
editor.pointerMove(100, 50)
|
editor.pointerMove(100, 50)
|
||||||
|
|
||||||
// can press control while dragging to switch into no-binding mode
|
// can press control while dragging to switch into no-binding mode
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
editor.keyDown('Control')
|
editor.keyDown('Control')
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
|
|
||||||
editor.keyUp('Control')
|
editor.keyUp('Control')
|
||||||
expect(arrow().props.end.type).toBe('point') // there's a short delay here, it should still be a point
|
expect(bindings().end).toBeUndefined() // there's a short delay here, it should still be a point
|
||||||
jest.advanceTimersByTime(1000) // once the timer runs out...
|
jest.advanceTimersByTime(1000) // once the timer runs out...
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
|
|
||||||
editor.keyDown('Control') // no delay when pressing control again though
|
editor.keyDown('Control') // no delay when pressing control again though
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
|
|
||||||
editor.keyUp('Control')
|
editor.keyUp('Control')
|
||||||
editor.pointerUp()
|
editor.pointerUp()
|
||||||
jest.advanceTimersByTime(1000) // once the timer runs out...
|
jest.advanceTimersByTime(1000) // once the timer runs out...
|
||||||
expect(arrow().props.end.type).toBe('point') // still a point because interaction ended before timer ended
|
expect(bindings().end).toBeUndefined() // still a point because interaction ended before timer ended
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -607,13 +608,14 @@ describe('When binding an arrow to an ancestor', () => {
|
||||||
|
|
||||||
const arrow = editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape
|
const arrow = editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape
|
||||||
if (!arrow) throw Error('No arrow')
|
if (!arrow) throw Error('No arrow')
|
||||||
if (arrow.props.start.type !== 'binding') throw Error('no binding')
|
const bindings = getArrowBindings(editor, arrow)
|
||||||
if (arrow.props.end.type !== 'binding') throw Error('no binding')
|
if (!bindings.start) throw Error('no binding')
|
||||||
|
if (!bindings.end) throw Error('no binding')
|
||||||
|
|
||||||
expect(arrow.props.start.boundShapeId).toBe(ids.box1)
|
expect(bindings.start.toId).toBe(ids.box1)
|
||||||
expect(arrow.props.end.boundShapeId).toBe(ids.frame)
|
expect(bindings.end.toId).toBe(ids.frame)
|
||||||
expect(arrow.props.start.isPrecise).toBe(false)
|
expect(bindings.start.props.isPrecise).toBe(false)
|
||||||
expect(arrow.props.end.isPrecise).toBe(true)
|
expect(bindings.end.props.isPrecise).toBe(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('binds precisely from parent to child', () => {
|
it('binds precisely from parent to child', () => {
|
||||||
|
@ -642,13 +644,14 @@ describe('When binding an arrow to an ancestor', () => {
|
||||||
|
|
||||||
const arrow = editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape
|
const arrow = editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape
|
||||||
if (!arrow) throw Error('No arrow')
|
if (!arrow) throw Error('No arrow')
|
||||||
if (arrow.props.start.type !== 'binding') throw Error('no binding')
|
const bindings = getArrowBindings(editor, arrow)
|
||||||
if (arrow.props.end.type !== 'binding') throw Error('no binding')
|
if (!bindings.start) throw Error('no binding')
|
||||||
|
if (!bindings.end) throw Error('no binding')
|
||||||
|
|
||||||
expect(arrow.props.start.boundShapeId).toBe(ids.frame)
|
expect(bindings.start.toId).toBe(ids.frame)
|
||||||
expect(arrow.props.end.boundShapeId).toBe(ids.box1)
|
expect(bindings.end.toId).toBe(ids.box1)
|
||||||
expect(arrow.props.start.isPrecise).toBe(false)
|
expect(bindings.start.props.isPrecise).toBe(false)
|
||||||
expect(arrow.props.end.isPrecise).toBe(true)
|
expect(bindings.end.props.isPrecise).toBe(true)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { TLArrowShape, createShapeId } from '@tldraw/editor'
|
import { TLArrowShape, createShapeId, getArrowBindings } from '@tldraw/editor'
|
||||||
import { TestEditor } from './TestEditor'
|
import { TestEditor } from './TestEditor'
|
||||||
|
|
||||||
let editor: TestEditor
|
let editor: TestEditor
|
||||||
|
@ -26,6 +26,10 @@ function arrow() {
|
||||||
return editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape
|
return editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function bindings() {
|
||||||
|
return getArrowBindings(editor, arrow())
|
||||||
|
}
|
||||||
|
|
||||||
describe('restoring bound arrows', () => {
|
describe('restoring bound arrows', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
editor.createShapes([
|
editor.createShapes([
|
||||||
|
@ -44,29 +48,29 @@ describe('restoring bound arrows', () => {
|
||||||
it('removes bound arrows on delete, restores them on undo but only when change was done by user', () => {
|
it('removes bound arrows on delete, restores them on undo but only when change was done by user', () => {
|
||||||
editor.mark('deleting')
|
editor.mark('deleting')
|
||||||
editor.deleteShapes([ids.box2])
|
editor.deleteShapes([ids.box2])
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
editor.undo()
|
editor.undo()
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
editor.redo()
|
editor.redo()
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('removes / restores multiple bindings', () => {
|
it('removes / restores multiple bindings', () => {
|
||||||
editor.mark('deleting')
|
editor.mark('deleting')
|
||||||
expect(arrow().props.start.type).toBe('binding')
|
expect(bindings().start).toBeDefined()
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
|
|
||||||
editor.deleteShapes([ids.box1, ids.box2])
|
editor.deleteShapes([ids.box1, ids.box2])
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
|
|
||||||
editor.undo()
|
editor.undo()
|
||||||
expect(arrow().props.start.type).toBe('binding')
|
expect(bindings().start).toBeDefined()
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
|
|
||||||
editor.redo()
|
editor.redo()
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -77,8 +81,8 @@ describe('restoring bound arrows multiplayer', () => {
|
||||||
|
|
||||||
editor.setCurrentTool('arrow').pointerMove(0, 50).pointerDown().pointerMove(150, 50).pointerUp()
|
editor.setCurrentTool('arrow').pointerMove(0, 50).pointerDown().pointerMove(150, 50).pointerUp()
|
||||||
|
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
|
|
||||||
// Merge a change from a remote source that deletes box 2
|
// Merge a change from a remote source that deletes box 2
|
||||||
editor.store.mergeRemoteChanges(() => {
|
editor.store.mergeRemoteChanges(() => {
|
||||||
|
@ -89,8 +93,8 @@ describe('restoring bound arrows multiplayer', () => {
|
||||||
expect(editor.getShape(ids.box2)).toBeUndefined()
|
expect(editor.getShape(ids.box2)).toBeUndefined()
|
||||||
// arrow is still there, but without its binding
|
// arrow is still there, but without its binding
|
||||||
expect(arrow()).not.toBeUndefined()
|
expect(arrow()).not.toBeUndefined()
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
|
|
||||||
editor.undo() // undo creating the arrow
|
editor.undo() // undo creating the arrow
|
||||||
|
|
||||||
|
@ -101,8 +105,8 @@ describe('restoring bound arrows multiplayer', () => {
|
||||||
|
|
||||||
expect(editor.getShape(ids.box2)).toBeUndefined()
|
expect(editor.getShape(ids.box2)).toBeUndefined()
|
||||||
expect(arrow()).not.toBeUndefined()
|
expect(arrow()).not.toBeUndefined()
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('point')
|
expect(bindings().end).toBeUndefined()
|
||||||
|
|
||||||
editor.undo() // undo creating arrow
|
editor.undo() // undo creating arrow
|
||||||
|
|
||||||
|
@ -121,7 +125,7 @@ describe('restoring bound arrows multiplayer', () => {
|
||||||
editor.redo() // redo creating arrow
|
editor.redo() // redo creating arrow
|
||||||
|
|
||||||
// box is back! arrow should be bound
|
// box is back! arrow should be bound
|
||||||
expect(arrow().props.start.type).toBe('point')
|
expect(bindings().start).toBeUndefined()
|
||||||
expect(arrow().props.end.type).toBe('binding')
|
expect(bindings().end).toBeDefined()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -6,6 +6,7 @@ import {
|
||||||
TLShapeId,
|
TLShapeId,
|
||||||
TLShapePartial,
|
TLShapePartial,
|
||||||
createShapeId,
|
createShapeId,
|
||||||
|
getArrowBindings,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
import { TestEditor } from './TestEditor'
|
import { TestEditor } from './TestEditor'
|
||||||
|
|
||||||
|
@ -355,12 +356,10 @@ describe('flipping rotated shapes', () => {
|
||||||
editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
|
editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
|
||||||
const props: Partial<TLArrowShapeProps> = {
|
const props: Partial<TLArrowShapeProps> = {
|
||||||
start: {
|
start: {
|
||||||
type: 'point',
|
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
},
|
},
|
||||||
end: {
|
end: {
|
||||||
type: 'point',
|
|
||||||
x: 100,
|
x: 100,
|
||||||
y: 0,
|
y: 0,
|
||||||
},
|
},
|
||||||
|
@ -408,8 +407,8 @@ describe('flipping rotated shapes', () => {
|
||||||
const transform = editor.getShapePageTransform(id)
|
const transform = editor.getShapePageTransform(id)
|
||||||
if (!transform) throw new Error('no transform')
|
if (!transform) throw new Error('no transform')
|
||||||
const arrow = editor.getShape<TLArrowShape>(id)!
|
const arrow = editor.getShape<TLArrowShape>(id)!
|
||||||
if (arrow.props.start.type !== 'point' || arrow.props.end.type !== 'point')
|
const bindings = getArrowBindings(editor, arrow)
|
||||||
throw new Error('not a point')
|
if (bindings.start || bindings.end) throw new Error('not a point')
|
||||||
const start = Mat.applyToPoint(transform, arrow.props.start)
|
const start = Mat.applyToPoint(transform, arrow.props.start)
|
||||||
const end = Mat.applyToPoint(transform, arrow.props.end)
|
const end = Mat.applyToPoint(transform, arrow.props.end)
|
||||||
return { start, end }
|
return { start, end }
|
||||||
|
|
|
@ -12,6 +12,7 @@ import {
|
||||||
assert,
|
assert,
|
||||||
compact,
|
compact,
|
||||||
createShapeId,
|
createShapeId,
|
||||||
|
getArrowBindings,
|
||||||
sortByIndex,
|
sortByIndex,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
import { TestEditor } from './TestEditor'
|
import { TestEditor } from './TestEditor'
|
||||||
|
@ -1723,20 +1724,17 @@ describe('moving handles within a group', () => {
|
||||||
editor.pointerDown(50, 50).pointerMove(60, 60).pointerUp(60, 60)
|
editor.pointerDown(50, 50).pointerMove(60, 60).pointerUp(60, 60)
|
||||||
|
|
||||||
let arrow = onlySelectedShape() as TLArrowShape
|
let arrow = onlySelectedShape() as TLArrowShape
|
||||||
|
let bindings = getArrowBindings(editor, arrow)
|
||||||
|
|
||||||
expect(arrow.parentId).toBe(groupA.id)
|
expect(arrow.parentId).toBe(groupA.id)
|
||||||
|
|
||||||
expect(arrow.props.start.type).toBe('point')
|
expect(bindings.start).toBeUndefined()
|
||||||
if (arrow.props.start.type === 'point') {
|
expect(arrow.props.start.x).toBe(0)
|
||||||
expect(arrow.props.start.x).toBe(0)
|
expect(arrow.props.start.y).toBe(0)
|
||||||
expect(arrow.props.start.y).toBe(0)
|
|
||||||
}
|
|
||||||
|
|
||||||
expect(arrow.props.end.type).toBe('point')
|
expect(bindings.end).toBeUndefined()
|
||||||
if (arrow.props.end.type === 'point') {
|
expect(arrow.props.end.x).toBe(10)
|
||||||
expect(arrow.props.end.x).toBe(10)
|
expect(arrow.props.end.y).toBe(10)
|
||||||
expect(arrow.props.end.y).toBe(10)
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.expectToBeIn('select.idle')
|
editor.expectToBeIn('select.idle')
|
||||||
|
|
||||||
|
@ -1759,20 +1757,17 @@ describe('moving handles within a group', () => {
|
||||||
editor.pointerMove(60, -10)
|
editor.pointerMove(60, -10)
|
||||||
|
|
||||||
arrow = editor.getShape(arrow.id)!
|
arrow = editor.getShape(arrow.id)!
|
||||||
|
bindings = getArrowBindings(editor, arrow)
|
||||||
|
|
||||||
expect(arrow.parentId).toBe(groupA.id)
|
expect(arrow.parentId).toBe(groupA.id)
|
||||||
|
|
||||||
expect(arrow.props.start.type).toBe('point')
|
expect(bindings.start).toBeUndefined()
|
||||||
if (arrow.props.start.type === 'point') {
|
expect(arrow.props.start.x).toBe(0)
|
||||||
expect(arrow.props.start.x).toBe(0)
|
expect(arrow.props.start.y).toBe(0)
|
||||||
expect(arrow.props.start.y).toBe(0)
|
|
||||||
}
|
|
||||||
|
|
||||||
expect(arrow.props.end.type).toBe('point')
|
expect(bindings.end).toBeUndefined()
|
||||||
if (arrow.props.end.type === 'point') {
|
expect(arrow.props.end.x).toBe(10)
|
||||||
expect(arrow.props.end.x).toBe(10)
|
expect(arrow.props.end.y).toBe(-60)
|
||||||
expect(arrow.props.end.y).toBe(-60)
|
|
||||||
}
|
|
||||||
|
|
||||||
expect(editor.getShapePageBounds(groupA.id)).toCloselyMatchObject({
|
expect(editor.getShapePageBounds(groupA.id)).toCloselyMatchObject({
|
||||||
x: 0,
|
x: 0,
|
||||||
|
|
|
@ -136,8 +136,8 @@ describe('When brushing arrows', () => {
|
||||||
ref="arrow1"
|
ref="arrow1"
|
||||||
x={0}
|
x={0}
|
||||||
y={0}
|
y={0}
|
||||||
start={{ type: 'point', x: 0, y: 0 }}
|
start={{ x: 0, y: 0 }}
|
||||||
end={{ type: 'point', x: 100, y: 100 }}
|
end={{ x: 100, y: 100 }}
|
||||||
bend={0}
|
bend={0}
|
||||||
/>,
|
/>,
|
||||||
])
|
])
|
||||||
|
@ -158,8 +158,8 @@ describe('When brushing arrows', () => {
|
||||||
ref="arrow1"
|
ref="arrow1"
|
||||||
x={0}
|
x={0}
|
||||||
y={0}
|
y={0}
|
||||||
start={{ type: 'point', x: 0, y: 0 }}
|
start={{ x: 0, y: 0 }}
|
||||||
end={{ type: 'point', x: 100, y: 100 }}
|
end={{ x: 100, y: 100 }}
|
||||||
bend={40}
|
bend={40}
|
||||||
/>,
|
/>,
|
||||||
])
|
])
|
||||||
|
|
|
@ -15,12 +15,19 @@ import { RecordId } from '@tldraw/store';
|
||||||
import { RecordType } from '@tldraw/store';
|
import { RecordType } from '@tldraw/store';
|
||||||
import { SerializedStore } from '@tldraw/store';
|
import { SerializedStore } from '@tldraw/store';
|
||||||
import { Signal } from '@tldraw/state';
|
import { Signal } from '@tldraw/state';
|
||||||
|
import { StandaloneDependsOn } from '@tldraw/store';
|
||||||
import { Store } from '@tldraw/store';
|
import { Store } from '@tldraw/store';
|
||||||
import { StoreSchema } from '@tldraw/store';
|
import { StoreSchema } from '@tldraw/store';
|
||||||
import { StoreSnapshot } from '@tldraw/store';
|
import { StoreSnapshot } from '@tldraw/store';
|
||||||
import { T } from '@tldraw/validate';
|
import { T } from '@tldraw/validate';
|
||||||
import { UnknownRecord } from '@tldraw/store';
|
import { UnknownRecord } from '@tldraw/store';
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export const arrowBindingMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export const arrowBindingProps: RecordProps<TLArrowBinding>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const ArrowShapeArrowheadEndStyle: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
|
export const ArrowShapeArrowheadEndStyle: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
|
||||||
|
|
||||||
|
@ -28,7 +35,7 @@ export const ArrowShapeArrowheadEndStyle: EnumStyleProp<"arrow" | "bar" | "diamo
|
||||||
export const ArrowShapeArrowheadStartStyle: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
|
export const ArrowShapeArrowheadStartStyle: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const arrowShapeMigrations: TLShapePropsMigrations;
|
export const arrowShapeMigrations: MigrationSequence;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const arrowShapeProps: {
|
export const arrowShapeProps: {
|
||||||
|
@ -37,39 +44,13 @@ export const arrowShapeProps: {
|
||||||
bend: T.Validator<number>;
|
bend: T.Validator<number>;
|
||||||
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
||||||
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
|
||||||
end: T.UnionValidator<"type", {
|
end: T.Validator<VecModel>;
|
||||||
binding: T.ObjectValidator<{
|
|
||||||
boundShapeId: TLShapeId;
|
|
||||||
isExact: boolean;
|
|
||||||
isPrecise: boolean;
|
|
||||||
normalizedAnchor: VecModel;
|
|
||||||
type: "binding";
|
|
||||||
} & {}>;
|
|
||||||
point: T.ObjectValidator<{
|
|
||||||
type: "point";
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
} & {}>;
|
|
||||||
}, never>;
|
|
||||||
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">;
|
||||||
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
|
||||||
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
|
||||||
labelPosition: T.Validator<number>;
|
labelPosition: T.Validator<number>;
|
||||||
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
|
||||||
start: T.UnionValidator<"type", {
|
start: T.Validator<VecModel>;
|
||||||
binding: T.ObjectValidator<{
|
|
||||||
boundShapeId: TLShapeId;
|
|
||||||
isExact: boolean;
|
|
||||||
isPrecise: boolean;
|
|
||||||
normalizedAnchor: VecModel;
|
|
||||||
type: "binding";
|
|
||||||
} & {}>;
|
|
||||||
point: T.ObjectValidator<{
|
|
||||||
type: "point";
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
} & {}>;
|
|
||||||
}, never>;
|
|
||||||
text: T.Validator<string>;
|
text: T.Validator<string>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -86,7 +67,10 @@ export const AssetRecordType: RecordType<TLAsset, "props" | "type">;
|
||||||
export const assetValidator: T.Validator<TLAsset>;
|
export const assetValidator: T.Validator<TLAsset>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const bookmarkShapeMigrations: TLShapePropsMigrations;
|
export const bindingIdValidator: T.Validator<TLBindingId>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export const bookmarkShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const bookmarkShapeProps: {
|
export const bookmarkShapeProps: {
|
||||||
|
@ -132,6 +116,24 @@ export function createAssetValidator<Type extends string, Props extends JsonObje
|
||||||
typeName: 'asset';
|
typeName: 'asset';
|
||||||
}[P_1] | undefined; }>;
|
}[P_1] | undefined; }>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function createBindingId(id?: string): TLBindingId;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function createBindingPropsMigrationIds<S extends string, T extends Record<string, number>>(bindingType: S, ids: T): {
|
||||||
|
[k in keyof T]: `com.tldraw.binding.${S}/${T[k]}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function createBindingPropsMigrationSequence(migrations: TLPropsMigrations): TLPropsMigrations;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function createBindingValidator<Type extends string, Props extends JsonObject, Meta extends JsonObject>(type: Type, props?: {
|
||||||
|
[K in keyof Props]: T.Validatable<Props[K]>;
|
||||||
|
}, meta?: {
|
||||||
|
[K in keyof Meta]: T.Validatable<Meta[K]>;
|
||||||
|
}): T.ObjectValidator<{ [P in "fromId" | "id" | "meta" | "toId" | "typeName" | (undefined extends Props ? never : "props") | (undefined extends Type ? never : "type")]: TLBaseBinding<Type, Props>[P]; } & { [P_1 in (undefined extends Props ? "props" : never) | (undefined extends Type ? "type" : never)]?: TLBaseBinding<Type, Props>[P_1] | undefined; }>;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export const createPresenceStateDerivation: ($user: Signal<{
|
export const createPresenceStateDerivation: ($user: Signal<{
|
||||||
color: string;
|
color: string;
|
||||||
|
@ -143,12 +145,12 @@ export const createPresenceStateDerivation: ($user: Signal<{
|
||||||
export function createShapeId(id?: string): TLShapeId;
|
export function createShapeId(id?: string): TLShapeId;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function createShapePropsMigrationIds<S extends string, T extends Record<string, number>>(shapeType: S, ids: T): {
|
export function createShapePropsMigrationIds<const S extends string, const T extends Record<string, number>>(shapeType: S, ids: T): {
|
||||||
[k in keyof T]: `com.tldraw.shape.${S}/${T[k]}`;
|
[k in keyof T]: `com.tldraw.shape.${S}/${T[k]}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function createShapePropsMigrationSequence(migrations: TLShapePropsMigrations): TLShapePropsMigrations;
|
export function createShapePropsMigrationSequence(migrations: TLPropsMigrations): TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function createShapeValidator<Type extends string, Props extends JsonObject, Meta extends JsonObject>(type: Type, props?: {
|
export function createShapeValidator<Type extends string, Props extends JsonObject, Meta extends JsonObject>(type: Type, props?: {
|
||||||
|
@ -158,9 +160,10 @@ export function createShapeValidator<Type extends string, Props extends JsonObje
|
||||||
}): T.ObjectValidator<{ [P in "id" | "index" | "isLocked" | "meta" | "opacity" | "parentId" | "rotation" | "typeName" | "x" | "y" | (undefined extends Props ? never : "props") | (undefined extends Type ? never : "type")]: TLBaseShape<Type, Props>[P]; } & { [P_1 in (undefined extends Props ? "props" : never) | (undefined extends Type ? "type" : never)]?: TLBaseShape<Type, Props>[P_1] | undefined; }>;
|
}): T.ObjectValidator<{ [P in "id" | "index" | "isLocked" | "meta" | "opacity" | "parentId" | "rotation" | "typeName" | "x" | "y" | (undefined extends Props ? never : "props") | (undefined extends Type ? never : "type")]: TLBaseShape<Type, Props>[P]; } & { [P_1 in (undefined extends Props ? "props" : never) | (undefined extends Type ? "type" : never)]?: TLBaseShape<Type, Props>[P_1] | undefined; }>;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export function createTLSchema({ shapes, migrations, }?: {
|
export function createTLSchema({ shapes, bindings, migrations, }?: {
|
||||||
|
bindings?: Record<string, SchemaPropsInfo>;
|
||||||
migrations?: readonly MigrationSequence[];
|
migrations?: readonly MigrationSequence[];
|
||||||
shapes?: Record<string, SchemaShapeInfo>;
|
shapes?: Record<string, SchemaPropsInfo>;
|
||||||
}): TLSchema;
|
}): TLSchema;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
|
@ -194,7 +197,7 @@ export const DefaultHorizontalAlignStyle: EnumStyleProp<"end-legacy" | "end" | "
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const defaultShapeSchemas: {
|
export const defaultShapeSchemas: {
|
||||||
[T in TLDefaultShape['type']]: SchemaShapeInfo;
|
[T in TLDefaultShape['type']]: SchemaPropsInfo;
|
||||||
};
|
};
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
|
@ -207,7 +210,7 @@ export const DefaultVerticalAlignStyle: EnumStyleProp<"end" | "middle" | "start"
|
||||||
export const DocumentRecordType: RecordType<TLDocument, never>;
|
export const DocumentRecordType: RecordType<TLDocument, never>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const drawShapeMigrations: TLShapePropsMigrations;
|
export const drawShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const drawShapeProps: {
|
export const drawShapeProps: {
|
||||||
|
@ -426,7 +429,7 @@ export type EmbedDefinition = {
|
||||||
};
|
};
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const embedShapeMigrations: TLShapePropsMigrations;
|
export const embedShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export const embedShapePermissionDefaults: {
|
export const embedShapePermissionDefaults: {
|
||||||
|
@ -462,7 +465,7 @@ export class EnumStyleProp<T> extends StyleProp<T> {
|
||||||
}
|
}
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const frameShapeMigrations: TLShapePropsMigrations;
|
export const frameShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const frameShapeProps: {
|
export const frameShapeProps: {
|
||||||
|
@ -475,7 +478,7 @@ export const frameShapeProps: {
|
||||||
export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
|
export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const geoShapeMigrations: TLShapePropsMigrations;
|
export const geoShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const geoShapeProps: {
|
export const geoShapeProps: {
|
||||||
|
@ -507,13 +510,13 @@ export function getDefaultTranslationLocale(): TLLanguage['locale'];
|
||||||
export function getShapePropKeysByStyle(props: Record<string, T.Validatable<any>>): Map<StyleProp<unknown>, string>;
|
export function getShapePropKeysByStyle(props: Record<string, T.Validatable<any>>): Map<StyleProp<unknown>, string>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const groupShapeMigrations: TLShapePropsMigrations;
|
export const groupShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const groupShapeProps: ShapeProps<TLGroupShape>;
|
export const groupShapeProps: RecordProps<TLGroupShape>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const highlightShapeMigrations: TLShapePropsMigrations;
|
export const highlightShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const highlightShapeProps: {
|
export const highlightShapeProps: {
|
||||||
|
@ -531,7 +534,7 @@ export const highlightShapeProps: {
|
||||||
export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>;
|
export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const imageShapeMigrations: TLShapePropsMigrations;
|
export const imageShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const imageShapeProps: {
|
export const imageShapeProps: {
|
||||||
|
@ -552,6 +555,12 @@ export const InstancePageStateRecordType: RecordType<TLInstancePageState, "pageI
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const InstancePresenceRecordType: RecordType<TLInstancePresence, "currentPageId" | "userId" | "userName">;
|
export const InstancePresenceRecordType: RecordType<TLInstancePresence, "currentPageId" | "userId" | "userName">;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function isBinding(record?: UnknownRecord): record is TLBinding;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function isBindingId(id?: string): id is TLBindingId;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function isPageId(id: string): id is TLPageId;
|
export function isPageId(id: string): id is TLPageId;
|
||||||
|
|
||||||
|
@ -673,7 +682,7 @@ export const LANGUAGES: readonly [{
|
||||||
}];
|
}];
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const lineShapeMigrations: TLShapePropsMigrations;
|
export const lineShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const lineShapeProps: {
|
export const lineShapeProps: {
|
||||||
|
@ -693,7 +702,7 @@ export const lineShapeProps: {
|
||||||
export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
|
export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const noteShapeMigrations: TLShapePropsMigrations;
|
export const noteShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const noteShapeProps: {
|
export const noteShapeProps: {
|
||||||
|
@ -723,15 +732,33 @@ export const parentIdValidator: T.Validator<TLParentId>;
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const PointerRecordType: RecordType<TLPointer, never>;
|
export const PointerRecordType: RecordType<TLPointer, never>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type RecordProps<R extends UnknownRecord & {
|
||||||
|
props: object;
|
||||||
|
}> = {
|
||||||
|
[K in keyof R['props']]: T.Validatable<R['props'][K]>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type RecordPropsType<Config extends Record<string, T.Validatable<any>>> = Expand<{
|
||||||
|
[K in keyof Config]: T.TypeOf<Config[K]>;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export const rootBindingMigrations: MigrationSequence;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const rootShapeMigrations: MigrationSequence;
|
export const rootShapeMigrations: MigrationSequence;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type SchemaShapeInfo = {
|
export interface SchemaPropsInfo {
|
||||||
|
// (undocumented)
|
||||||
meta?: Record<string, AnyValidator>;
|
meta?: Record<string, AnyValidator>;
|
||||||
migrations?: LegacyMigrations | MigrationSequence | TLShapePropsMigrations;
|
// (undocumented)
|
||||||
|
migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
|
||||||
|
// (undocumented)
|
||||||
props?: Record<string, AnyValidator>;
|
props?: Record<string, AnyValidator>;
|
||||||
};
|
}
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const scribbleValidator: T.Validator<TLScribble>;
|
export const scribbleValidator: T.Validator<TLScribble>;
|
||||||
|
@ -739,16 +766,6 @@ export const scribbleValidator: T.Validator<TLScribble>;
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const shapeIdValidator: T.Validator<TLShapeId>;
|
export const shapeIdValidator: T.Validator<TLShapeId>;
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type ShapeProps<Shape extends TLBaseShape<any, any>> = {
|
|
||||||
[K in keyof Shape['props']]: T.Validatable<Shape['props'][K]>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type ShapePropsType<Config extends Record<string, T.Validatable<any>>> = Expand<{
|
|
||||||
[K in keyof Config]: T.TypeOf<Config[K]>;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export class StyleProp<Type> implements T.Validatable<Type> {
|
export class StyleProp<Type> implements T.Validatable<Type> {
|
||||||
// @internal
|
// @internal
|
||||||
|
@ -777,7 +794,7 @@ export class StyleProp<Type> implements T.Validatable<Type> {
|
||||||
export type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never;
|
export type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const textShapeMigrations: TLShapePropsMigrations;
|
export const textShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const textShapeProps: {
|
export const textShapeProps: {
|
||||||
|
@ -794,6 +811,19 @@ export const textShapeProps: {
|
||||||
// @public
|
// @public
|
||||||
export const TL_CANVAS_UI_COLOR_TYPES: Set<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
|
export const TL_CANVAS_UI_COLOR_TYPES: Set<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type TLArrowBinding = TLBaseBinding<'arrow', TLArrowBindingProps>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export interface TLArrowBindingProps {
|
||||||
|
isExact: boolean;
|
||||||
|
isPrecise: boolean;
|
||||||
|
// (undocumented)
|
||||||
|
normalizedAnchor: VecModel;
|
||||||
|
// (undocumented)
|
||||||
|
terminal: 'end' | 'start';
|
||||||
|
}
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>;
|
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>;
|
||||||
|
|
||||||
|
@ -801,10 +831,7 @@ export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>;
|
||||||
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>;
|
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLArrowShapeProps = ShapePropsType<typeof arrowShapeProps>;
|
export type TLArrowShapeProps = RecordPropsType<typeof arrowShapeProps>;
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLArrowShapeTerminal = T.TypeOf<typeof ArrowShapeTerminal>;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
|
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
|
||||||
|
@ -837,6 +864,20 @@ export interface TLBaseAsset<Type extends string, Props> extends BaseRecord<'ass
|
||||||
type: Type;
|
type: Type;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export interface TLBaseBinding<Type extends string, Props extends object> extends BaseRecord<'binding', TLBindingId> {
|
||||||
|
// (undocumented)
|
||||||
|
fromId: TLShapeId;
|
||||||
|
// (undocumented)
|
||||||
|
meta: JsonObject;
|
||||||
|
// (undocumented)
|
||||||
|
props: Props;
|
||||||
|
// (undocumented)
|
||||||
|
toId: TLShapeId;
|
||||||
|
// (undocumented)
|
||||||
|
type: Type;
|
||||||
|
}
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export interface TLBaseShape<Type extends string, Props extends object> extends BaseRecord<'shape', TLShapeId> {
|
export interface TLBaseShape<Type extends string, Props extends object> extends BaseRecord<'shape', TLShapeId> {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
@ -861,6 +902,20 @@ export interface TLBaseShape<Type extends string, Props extends object> extends
|
||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @public
|
||||||
|
export type TLBinding = TLDefaultBinding | TLUnknownBinding;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type TLBindingId = RecordId<TLUnknownBinding>;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type TLBindingPartial<T extends TLBinding = TLBinding> = T extends T ? {
|
||||||
|
id: TLBindingId;
|
||||||
|
meta?: Partial<T['meta']>;
|
||||||
|
props?: Partial<T['props']>;
|
||||||
|
type: T['type'];
|
||||||
|
} & Partial<Omit<T, 'id' | 'meta' | 'props' | 'type'>> : never;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export type TLBookmarkAsset = TLBaseAsset<'bookmark', {
|
export type TLBookmarkAsset = TLBaseAsset<'bookmark', {
|
||||||
description: string;
|
description: string;
|
||||||
|
@ -901,6 +956,9 @@ export interface TLCursor {
|
||||||
// @public
|
// @public
|
||||||
export type TLCursorType = SetValue<typeof TL_CURSOR_TYPES>;
|
export type TLCursorType = SetValue<typeof TL_CURSOR_TYPES>;
|
||||||
|
|
||||||
|
// @public
|
||||||
|
export type TLDefaultBinding = TLArrowBinding;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>;
|
export type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>;
|
||||||
|
|
||||||
|
@ -1024,7 +1082,7 @@ export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>;
|
||||||
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>;
|
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLImageShapeProps = ShapePropsType<typeof imageShapeProps>;
|
export type TLImageShapeProps = RecordPropsType<typeof imageShapeProps>;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
|
export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
|
||||||
|
@ -1193,7 +1251,25 @@ export type TLParentId = TLPageId | TLShapeId;
|
||||||
export const TLPOINTER_ID: TLPointerId;
|
export const TLPOINTER_ID: TLPointerId;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLRecord = TLAsset | TLCamera | TLDocument | TLInstance | TLInstancePageState | TLInstancePresence | TLPage | TLPointer | TLShape;
|
export interface TLPropsMigration {
|
||||||
|
// (undocumented)
|
||||||
|
readonly dependsOn?: MigrationId[];
|
||||||
|
// (undocumented)
|
||||||
|
readonly down?: ((props: any) => any) | typeof NO_DOWN_MIGRATION | typeof RETIRED_DOWN_MIGRATION;
|
||||||
|
// (undocumented)
|
||||||
|
readonly id: MigrationId;
|
||||||
|
// (undocumented)
|
||||||
|
readonly up: (props: any) => any;
|
||||||
|
}
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export interface TLPropsMigrations {
|
||||||
|
// (undocumented)
|
||||||
|
readonly sequence: Array<StandaloneDependsOn | TLPropsMigration>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export type TLRecord = TLAsset | TLBinding | TLCamera | TLDocument | TLInstance | TLInstancePageState | TLInstancePresence | TLPage | TLPointer | TLShape;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLSchema = StoreSchema<TLRecord, TLStoreProps>;
|
export type TLSchema = StoreSchema<TLRecord, TLStoreProps>;
|
||||||
|
@ -1228,24 +1304,6 @@ export type TLShapePartial<T extends TLShape = TLShape> = T extends T ? {
|
||||||
type: T['type'];
|
type: T['type'];
|
||||||
} & Partial<Omit<T, 'id' | 'meta' | 'props' | 'type'>> : never;
|
} & Partial<Omit<T, 'id' | 'meta' | 'props' | 'type'>> : never;
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLShapeProp = keyof TLShapeProps;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLShapeProps = Identity<UnionToIntersection<TLDefaultShape['props']>>;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLShapePropsMigrations = {
|
|
||||||
sequence: Array<{
|
|
||||||
readonly dependsOn: readonly MigrationId[];
|
|
||||||
} | {
|
|
||||||
readonly dependsOn?: MigrationId[];
|
|
||||||
readonly down?: ((props: any) => any) | typeof NO_DOWN_MIGRATION | typeof RETIRED_DOWN_MIGRATION;
|
|
||||||
readonly id: MigrationId;
|
|
||||||
readonly up: (props: any) => any;
|
|
||||||
}>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLStore = Store<TLRecord, TLStoreProps>;
|
export type TLStore = Store<TLRecord, TLStoreProps>;
|
||||||
|
|
||||||
|
@ -1264,7 +1322,10 @@ export type TLStoreSnapshot = StoreSnapshot<TLRecord>;
|
||||||
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>;
|
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export type TLTextShapeProps = ShapePropsType<typeof textShapeProps>;
|
export type TLTextShapeProps = RecordPropsType<typeof textShapeProps>;
|
||||||
|
|
||||||
|
// @public
|
||||||
|
export type TLUnknownBinding = TLBaseBinding<string, object>;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export type TLUnknownShape = TLBaseShape<string, object>;
|
export type TLUnknownShape = TLBaseShape<string, object>;
|
||||||
|
@ -1296,7 +1357,7 @@ export interface VecModel {
|
||||||
export const vecModelValidator: T.Validator<VecModel>;
|
export const vecModelValidator: T.Validator<VecModel>;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const videoShapeMigrations: TLShapePropsMigrations;
|
export const videoShapeMigrations: TLPropsMigrations;
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export const videoShapeProps: {
|
export const videoShapeProps: {
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { T } from '@tldraw/validate'
|
||||||
|
import { VecModel, vecModelValidator } from '../misc/geometry-types'
|
||||||
|
import { createBindingPropsMigrationSequence } from '../records/TLBinding'
|
||||||
|
import { RecordProps } from '../recordsWithProps'
|
||||||
|
import { arrowShapeVersions } from '../shapes/TLArrowShape'
|
||||||
|
import { TLBaseBinding } from './TLBaseBinding'
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export interface TLArrowBindingProps {
|
||||||
|
terminal: 'start' | 'end'
|
||||||
|
normalizedAnchor: VecModel
|
||||||
|
/**
|
||||||
|
* exact is whether the arrow head 'enters' the bound shape to point directly at the binding
|
||||||
|
* anchor point
|
||||||
|
*/
|
||||||
|
isExact: boolean
|
||||||
|
/**
|
||||||
|
* precise is whether to bind to the normalizedAnchor, or to the middle of the shape
|
||||||
|
*/
|
||||||
|
isPrecise: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export const arrowBindingProps: RecordProps<TLArrowBinding> = {
|
||||||
|
terminal: T.literalEnum('start', 'end'),
|
||||||
|
normalizedAnchor: vecModelValidator,
|
||||||
|
isExact: T.boolean,
|
||||||
|
isPrecise: T.boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export type TLArrowBinding = TLBaseBinding<'arrow', TLArrowBindingProps>
|
||||||
|
|
||||||
|
export const arrowBindingVersions = {} as const
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export const arrowBindingMigrations = createBindingPropsMigrationSequence({
|
||||||
|
sequence: [{ dependsOn: [arrowShapeVersions.ExtractBindings] }],
|
||||||
|
})
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { BaseRecord } from '@tldraw/store'
|
||||||
|
import { JsonObject } from '@tldraw/utils'
|
||||||
|
import { T } from '@tldraw/validate'
|
||||||
|
import { idValidator } from '../misc/id-validator'
|
||||||
|
import { TLBindingId } from '../records/TLBinding'
|
||||||
|
import { TLShapeId } from '../records/TLShape'
|
||||||
|
import { shapeIdValidator } from '../shapes/TLBaseShape'
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export interface TLBaseBinding<Type extends string, Props extends object>
|
||||||
|
extends BaseRecord<'binding', TLBindingId> {
|
||||||
|
type: Type
|
||||||
|
fromId: TLShapeId
|
||||||
|
toId: TLShapeId
|
||||||
|
props: Props
|
||||||
|
meta: JsonObject
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export const bindingIdValidator = idValidator<TLBindingId>('binding')
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export function createBindingValidator<
|
||||||
|
Type extends string,
|
||||||
|
Props extends JsonObject,
|
||||||
|
Meta extends JsonObject,
|
||||||
|
>(
|
||||||
|
type: Type,
|
||||||
|
props?: { [K in keyof Props]: T.Validatable<Props[K]> },
|
||||||
|
meta?: { [K in keyof Meta]: T.Validatable<Meta[K]> }
|
||||||
|
) {
|
||||||
|
return T.object<TLBaseBinding<Type, Props>>({
|
||||||
|
id: bindingIdValidator,
|
||||||
|
typeName: T.literal('binding'),
|
||||||
|
type: T.literal(type),
|
||||||
|
fromId: shapeIdValidator,
|
||||||
|
toId: shapeIdValidator,
|
||||||
|
props: props ? T.object(props) : (T.jsonValue as any),
|
||||||
|
meta: meta ? T.object(meta) : (T.jsonValue as any),
|
||||||
|
})
|
||||||
|
}
|
|
@ -4,7 +4,9 @@ import { TLStoreProps, createIntegrityChecker, onValidationFailure } from './TLS
|
||||||
import { bookmarkAssetMigrations } from './assets/TLBookmarkAsset'
|
import { bookmarkAssetMigrations } from './assets/TLBookmarkAsset'
|
||||||
import { imageAssetMigrations } from './assets/TLImageAsset'
|
import { imageAssetMigrations } from './assets/TLImageAsset'
|
||||||
import { videoAssetMigrations } from './assets/TLVideoAsset'
|
import { videoAssetMigrations } from './assets/TLVideoAsset'
|
||||||
|
import { arrowBindingMigrations, arrowBindingProps } from './bindings/TLArrowBinding'
|
||||||
import { AssetRecordType, assetMigrations } from './records/TLAsset'
|
import { AssetRecordType, assetMigrations } from './records/TLAsset'
|
||||||
|
import { TLBinding, TLDefaultBinding, createBindingRecordType } from './records/TLBinding'
|
||||||
import { CameraRecordType, cameraMigrations } from './records/TLCamera'
|
import { CameraRecordType, cameraMigrations } from './records/TLCamera'
|
||||||
import { DocumentRecordType, documentMigrations } from './records/TLDocument'
|
import { DocumentRecordType, documentMigrations } from './records/TLDocument'
|
||||||
import { createInstanceRecordType, instanceMigrations } from './records/TLInstance'
|
import { createInstanceRecordType, instanceMigrations } from './records/TLInstance'
|
||||||
|
@ -15,12 +17,12 @@ import { InstancePresenceRecordType, instancePresenceMigrations } from './record
|
||||||
import { TLRecord } from './records/TLRecord'
|
import { TLRecord } from './records/TLRecord'
|
||||||
import {
|
import {
|
||||||
TLDefaultShape,
|
TLDefaultShape,
|
||||||
TLShapePropsMigrations,
|
TLShape,
|
||||||
createShapeRecordType,
|
createShapeRecordType,
|
||||||
getShapePropKeysByStyle,
|
getShapePropKeysByStyle,
|
||||||
processShapeMigrations,
|
|
||||||
rootShapeMigrations,
|
rootShapeMigrations,
|
||||||
} from './records/TLShape'
|
} from './records/TLShape'
|
||||||
|
import { TLPropsMigrations, processPropsMigrations } from './recordsWithProps'
|
||||||
import { arrowShapeMigrations, arrowShapeProps } from './shapes/TLArrowShape'
|
import { arrowShapeMigrations, arrowShapeProps } from './shapes/TLArrowShape'
|
||||||
import { bookmarkShapeMigrations, bookmarkShapeProps } from './shapes/TLBookmarkShape'
|
import { bookmarkShapeMigrations, bookmarkShapeProps } from './shapes/TLBookmarkShape'
|
||||||
import { drawShapeMigrations, drawShapeProps } from './shapes/TLDrawShape'
|
import { drawShapeMigrations, drawShapeProps } from './shapes/TLDrawShape'
|
||||||
|
@ -43,8 +45,8 @@ type AnyValidator = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type SchemaShapeInfo = {
|
export interface SchemaPropsInfo {
|
||||||
migrations?: LegacyMigrations | TLShapePropsMigrations | MigrationSequence
|
migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
|
||||||
props?: Record<string, AnyValidator>
|
props?: Record<string, AnyValidator>
|
||||||
meta?: Record<string, AnyValidator>
|
meta?: Record<string, AnyValidator>
|
||||||
}
|
}
|
||||||
|
@ -53,7 +55,7 @@ export type SchemaShapeInfo = {
|
||||||
export type TLSchema = StoreSchema<TLRecord, TLStoreProps>
|
export type TLSchema = StoreSchema<TLRecord, TLStoreProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaShapeInfo } = {
|
export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaPropsInfo } = {
|
||||||
arrow: { migrations: arrowShapeMigrations, props: arrowShapeProps },
|
arrow: { migrations: arrowShapeMigrations, props: arrowShapeProps },
|
||||||
bookmark: { migrations: bookmarkShapeMigrations, props: bookmarkShapeProps },
|
bookmark: { migrations: bookmarkShapeMigrations, props: bookmarkShapeProps },
|
||||||
draw: { migrations: drawShapeMigrations, props: drawShapeProps },
|
draw: { migrations: drawShapeMigrations, props: drawShapeProps },
|
||||||
|
@ -69,6 +71,11 @@ export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaShapeIn
|
||||||
video: { migrations: videoShapeMigrations, props: videoShapeProps },
|
video: { migrations: videoShapeMigrations, props: videoShapeProps },
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export const defaultBindingSchemas: { [T in TLDefaultBinding['type']]: SchemaPropsInfo } = {
|
||||||
|
arrow: { migrations: arrowBindingMigrations, props: arrowBindingProps },
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create a TLSchema with custom shapes. Custom shapes cannot override default shapes.
|
* Create a TLSchema with custom shapes. Custom shapes cannot override default shapes.
|
||||||
*
|
*
|
||||||
|
@ -77,9 +84,11 @@ export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaShapeIn
|
||||||
* @public */
|
* @public */
|
||||||
export function createTLSchema({
|
export function createTLSchema({
|
||||||
shapes = defaultShapeSchemas,
|
shapes = defaultShapeSchemas,
|
||||||
|
bindings = defaultBindingSchemas,
|
||||||
migrations,
|
migrations,
|
||||||
}: {
|
}: {
|
||||||
shapes?: Record<string, SchemaShapeInfo>
|
shapes?: Record<string, SchemaPropsInfo>
|
||||||
|
bindings?: Record<string, SchemaPropsInfo>
|
||||||
migrations?: readonly MigrationSequence[]
|
migrations?: readonly MigrationSequence[]
|
||||||
} = {}): TLSchema {
|
} = {}): TLSchema {
|
||||||
const stylesById = new Map<string, StyleProp<unknown>>()
|
const stylesById = new Map<string, StyleProp<unknown>>()
|
||||||
|
@ -93,11 +102,13 @@ export function createTLSchema({
|
||||||
}
|
}
|
||||||
|
|
||||||
const ShapeRecordType = createShapeRecordType(shapes)
|
const ShapeRecordType = createShapeRecordType(shapes)
|
||||||
|
const BindingRecordType = createBindingRecordType(bindings)
|
||||||
const InstanceRecordType = createInstanceRecordType(stylesById)
|
const InstanceRecordType = createInstanceRecordType(stylesById)
|
||||||
|
|
||||||
return StoreSchema.create(
|
return StoreSchema.create(
|
||||||
{
|
{
|
||||||
asset: AssetRecordType,
|
asset: AssetRecordType,
|
||||||
|
binding: BindingRecordType,
|
||||||
camera: CameraRecordType,
|
camera: CameraRecordType,
|
||||||
document: DocumentRecordType,
|
document: DocumentRecordType,
|
||||||
instance: InstanceRecordType,
|
instance: InstanceRecordType,
|
||||||
|
@ -124,7 +135,8 @@ export function createTLSchema({
|
||||||
imageAssetMigrations,
|
imageAssetMigrations,
|
||||||
videoAssetMigrations,
|
videoAssetMigrations,
|
||||||
|
|
||||||
...processShapeMigrations(shapes),
|
...processPropsMigrations<TLShape>('shape', shapes),
|
||||||
|
...processPropsMigrations<TLBinding>('binding', bindings),
|
||||||
|
|
||||||
...(migrations ?? []),
|
...(migrations ?? []),
|
||||||
],
|
],
|
||||||
|
|
|
@ -9,11 +9,22 @@ export { assetIdValidator, createAssetValidator, type TLBaseAsset } from './asse
|
||||||
export { type TLBookmarkAsset } from './assets/TLBookmarkAsset'
|
export { type TLBookmarkAsset } from './assets/TLBookmarkAsset'
|
||||||
export { type TLImageAsset } from './assets/TLImageAsset'
|
export { type TLImageAsset } from './assets/TLImageAsset'
|
||||||
export { type TLVideoAsset } from './assets/TLVideoAsset'
|
export { type TLVideoAsset } from './assets/TLVideoAsset'
|
||||||
|
export {
|
||||||
|
arrowBindingMigrations,
|
||||||
|
arrowBindingProps,
|
||||||
|
type TLArrowBinding,
|
||||||
|
type TLArrowBindingProps,
|
||||||
|
} from './bindings/TLArrowBinding'
|
||||||
|
export {
|
||||||
|
bindingIdValidator,
|
||||||
|
createBindingValidator,
|
||||||
|
type TLBaseBinding,
|
||||||
|
} from './bindings/TLBaseBinding'
|
||||||
export { createPresenceStateDerivation } from './createPresenceStateDerivation'
|
export { createPresenceStateDerivation } from './createPresenceStateDerivation'
|
||||||
export {
|
export {
|
||||||
createTLSchema,
|
createTLSchema,
|
||||||
defaultShapeSchemas,
|
defaultShapeSchemas,
|
||||||
type SchemaShapeInfo,
|
type SchemaPropsInfo,
|
||||||
type TLSchema,
|
type TLSchema,
|
||||||
} from './createTLSchema'
|
} from './createTLSchema'
|
||||||
export {
|
export {
|
||||||
|
@ -41,6 +52,19 @@ export {
|
||||||
type TLAssetPartial,
|
type TLAssetPartial,
|
||||||
type TLAssetShape,
|
type TLAssetShape,
|
||||||
} from './records/TLAsset'
|
} from './records/TLAsset'
|
||||||
|
export {
|
||||||
|
createBindingId,
|
||||||
|
createBindingPropsMigrationIds,
|
||||||
|
createBindingPropsMigrationSequence,
|
||||||
|
isBinding,
|
||||||
|
isBindingId,
|
||||||
|
rootBindingMigrations,
|
||||||
|
type TLBinding,
|
||||||
|
type TLBindingId,
|
||||||
|
type TLBindingPartial,
|
||||||
|
type TLDefaultBinding,
|
||||||
|
type TLUnknownBinding,
|
||||||
|
} from './records/TLBinding'
|
||||||
export { CameraRecordType, type TLCamera, type TLCameraId } from './records/TLCamera'
|
export { CameraRecordType, type TLCamera, type TLCameraId } from './records/TLCamera'
|
||||||
export { DocumentRecordType, TLDOCUMENT_ID, type TLDocument } from './records/TLDocument'
|
export { DocumentRecordType, TLDOCUMENT_ID, type TLDocument } from './records/TLDocument'
|
||||||
export { TLINSTANCE_ID, type TLInstance, type TLInstanceId } from './records/TLInstance'
|
export { TLINSTANCE_ID, type TLInstance, type TLInstanceId } from './records/TLInstance'
|
||||||
|
@ -68,11 +92,14 @@ export {
|
||||||
type TLShape,
|
type TLShape,
|
||||||
type TLShapeId,
|
type TLShapeId,
|
||||||
type TLShapePartial,
|
type TLShapePartial,
|
||||||
type TLShapeProp,
|
|
||||||
type TLShapeProps,
|
|
||||||
type TLShapePropsMigrations,
|
|
||||||
type TLUnknownShape,
|
type TLUnknownShape,
|
||||||
} from './records/TLShape'
|
} from './records/TLShape'
|
||||||
|
export {
|
||||||
|
type RecordProps,
|
||||||
|
type RecordPropsType,
|
||||||
|
type TLPropsMigration,
|
||||||
|
type TLPropsMigrations,
|
||||||
|
} from './recordsWithProps'
|
||||||
export {
|
export {
|
||||||
ArrowShapeArrowheadEndStyle,
|
ArrowShapeArrowheadEndStyle,
|
||||||
ArrowShapeArrowheadStartStyle,
|
ArrowShapeArrowheadStartStyle,
|
||||||
|
@ -81,14 +108,11 @@ export {
|
||||||
type TLArrowShape,
|
type TLArrowShape,
|
||||||
type TLArrowShapeArrowheadStyle,
|
type TLArrowShapeArrowheadStyle,
|
||||||
type TLArrowShapeProps,
|
type TLArrowShapeProps,
|
||||||
type TLArrowShapeTerminal,
|
|
||||||
} from './shapes/TLArrowShape'
|
} from './shapes/TLArrowShape'
|
||||||
export {
|
export {
|
||||||
createShapeValidator,
|
createShapeValidator,
|
||||||
parentIdValidator,
|
parentIdValidator,
|
||||||
shapeIdValidator,
|
shapeIdValidator,
|
||||||
type ShapeProps,
|
|
||||||
type ShapePropsType,
|
|
||||||
type TLBaseShape,
|
type TLBaseShape,
|
||||||
} from './shapes/TLBaseShape'
|
} from './shapes/TLBaseShape'
|
||||||
export {
|
export {
|
||||||
|
|
|
@ -0,0 +1,116 @@
|
||||||
|
import {
|
||||||
|
RecordId,
|
||||||
|
UnknownRecord,
|
||||||
|
createMigrationIds,
|
||||||
|
createRecordMigrationSequence,
|
||||||
|
createRecordType,
|
||||||
|
} from '@tldraw/store'
|
||||||
|
import { mapObjectMapValues } from '@tldraw/utils'
|
||||||
|
import { T } from '@tldraw/validate'
|
||||||
|
import { nanoid } from 'nanoid'
|
||||||
|
import { TLArrowBinding } from '../bindings/TLArrowBinding'
|
||||||
|
import { TLBaseBinding, createBindingValidator } from '../bindings/TLBaseBinding'
|
||||||
|
import { SchemaPropsInfo } from '../createTLSchema'
|
||||||
|
import { TLPropsMigrations } from '../recordsWithProps'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The default set of bindings that are available in the editor.
|
||||||
|
*
|
||||||
|
* @public */
|
||||||
|
export type TLDefaultBinding = TLArrowBinding
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A type for a binding that is available in the editor but whose type is
|
||||||
|
* unknown—either one of the editor's default bindings or else a custom binding.
|
||||||
|
*
|
||||||
|
* @public */
|
||||||
|
export type TLUnknownBinding = TLBaseBinding<string, object>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The set of all bindings that are available in the editor, including unknown bindings.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export type TLBinding = TLDefaultBinding | TLUnknownBinding
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export type TLBindingPartial<T extends TLBinding = TLBinding> = T extends T
|
||||||
|
? {
|
||||||
|
id: TLBindingId
|
||||||
|
type: T['type']
|
||||||
|
props?: Partial<T['props']>
|
||||||
|
meta?: Partial<T['meta']>
|
||||||
|
} & Partial<Omit<T, 'type' | 'id' | 'props' | 'meta'>>
|
||||||
|
: never
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export type TLBindingId = RecordId<TLUnknownBinding>
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export const rootBindingVersions = createMigrationIds('com.tldraw.binding', {} as const)
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export const rootBindingMigrations = createRecordMigrationSequence({
|
||||||
|
sequenceId: 'com.tldraw.binding',
|
||||||
|
recordType: 'binding',
|
||||||
|
sequence: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export function isBinding(record?: UnknownRecord): record is TLBinding {
|
||||||
|
if (!record) return false
|
||||||
|
return record.typeName === 'binding'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export function isBindingId(id?: string): id is TLBindingId {
|
||||||
|
if (!id) return false
|
||||||
|
return id.startsWith('binding:')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export function createBindingId(id?: string): TLBindingId {
|
||||||
|
return `binding:${id ?? nanoid()}` as TLBindingId
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export function createBindingPropsMigrationSequence(
|
||||||
|
migrations: TLPropsMigrations
|
||||||
|
): TLPropsMigrations {
|
||||||
|
return migrations
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export function createBindingPropsMigrationIds<S extends string, T extends Record<string, number>>(
|
||||||
|
bindingType: S,
|
||||||
|
ids: T
|
||||||
|
): { [k in keyof T]: `com.tldraw.binding.${S}/${T[k]}` } {
|
||||||
|
return mapObjectMapValues(ids, (_k, v) => `com.tldraw.binding.${bindingType}/${v}`) as any
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @internal */
|
||||||
|
export function createBindingRecordType(bindings: Record<string, SchemaPropsInfo>) {
|
||||||
|
return createRecordType<TLBinding>('binding', {
|
||||||
|
scope: 'document',
|
||||||
|
validator: T.model(
|
||||||
|
'binding',
|
||||||
|
T.union(
|
||||||
|
'type',
|
||||||
|
mapObjectMapValues(bindings, (type, { props, meta }) =>
|
||||||
|
createBindingValidator(type, props, meta)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
}).withDefaultProperties(() => ({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
rotation: 0,
|
||||||
|
isLocked: false,
|
||||||
|
opacity: 1,
|
||||||
|
meta: {},
|
||||||
|
}))
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import { TLAsset } from './TLAsset'
|
import { TLAsset } from './TLAsset'
|
||||||
|
import { TLBinding } from './TLBinding'
|
||||||
import { TLCamera } from './TLCamera'
|
import { TLCamera } from './TLCamera'
|
||||||
import { TLDocument } from './TLDocument'
|
import { TLDocument } from './TLDocument'
|
||||||
import { TLInstance } from './TLInstance'
|
import { TLInstance } from './TLInstance'
|
||||||
|
@ -11,6 +12,7 @@ import { TLShape } from './TLShape'
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLRecord =
|
export type TLRecord =
|
||||||
| TLAsset
|
| TLAsset
|
||||||
|
| TLBinding
|
||||||
| TLCamera
|
| TLCamera
|
||||||
| TLDocument
|
| TLDocument
|
||||||
| TLInstance
|
| TLInstance
|
||||||
|
|
|
@ -1,18 +1,15 @@
|
||||||
import {
|
import {
|
||||||
Migration,
|
|
||||||
MigrationId,
|
|
||||||
MigrationSequence,
|
|
||||||
RecordId,
|
RecordId,
|
||||||
UnknownRecord,
|
UnknownRecord,
|
||||||
createMigrationIds,
|
createMigrationIds,
|
||||||
createMigrationSequence,
|
|
||||||
createRecordMigrationSequence,
|
createRecordMigrationSequence,
|
||||||
createRecordType,
|
createRecordType,
|
||||||
} from '@tldraw/store'
|
} from '@tldraw/store'
|
||||||
import { assert, mapObjectMapValues } from '@tldraw/utils'
|
import { mapObjectMapValues } from '@tldraw/utils'
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { nanoid } from 'nanoid'
|
import { nanoid } from 'nanoid'
|
||||||
import { SchemaShapeInfo } from '../createTLSchema'
|
import { SchemaPropsInfo } from '../createTLSchema'
|
||||||
|
import { TLPropsMigrations } from '../recordsWithProps'
|
||||||
import { TLArrowShape } from '../shapes/TLArrowShape'
|
import { TLArrowShape } from '../shapes/TLArrowShape'
|
||||||
import { TLBaseShape, createShapeValidator } from '../shapes/TLBaseShape'
|
import { TLBaseShape, createShapeValidator } from '../shapes/TLBaseShape'
|
||||||
import { TLBookmarkShape } from '../shapes/TLBookmarkShape'
|
import { TLBookmarkShape } from '../shapes/TLBookmarkShape'
|
||||||
|
@ -76,19 +73,6 @@ export type TLShapePartial<T extends TLShape = TLShape> = T extends T
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLShapeId = RecordId<TLUnknownShape>
|
export type TLShapeId = RecordId<TLUnknownShape>
|
||||||
|
|
||||||
// evil type shit that will get deleted in the next PR
|
|
||||||
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
|
|
||||||
? I
|
|
||||||
: never
|
|
||||||
|
|
||||||
type Identity<T> = { [K in keyof T]: T[K] }
|
|
||||||
|
|
||||||
/** @public */
|
|
||||||
export type TLShapeProps = Identity<UnionToIntersection<TLDefaultShape['props']>>
|
|
||||||
|
|
||||||
/** @public */
|
|
||||||
export type TLShapeProp = keyof TLShapeProps
|
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLParentId = TLPageId | TLShapeId
|
export type TLParentId = TLPageId | TLShapeId
|
||||||
|
|
||||||
|
@ -188,141 +172,27 @@ export function getShapePropKeysByStyle(props: Record<string, T.Validatable<any>
|
||||||
return propKeysByStyle
|
return propKeysByStyle
|
||||||
}
|
}
|
||||||
|
|
||||||
export const NO_DOWN_MIGRATION = 'none' as const
|
|
||||||
// If a down migration was deployed more than a couple of months ago it should be safe to retire it.
|
|
||||||
// We only really need them to smooth over the transition between versions, and some folks do keep
|
|
||||||
// browser tabs open for months without refreshing, but at a certain point that kind of behavior is
|
|
||||||
// on them. Plus anyway recently chrome has started to actually kill tabs that are open for too long rather
|
|
||||||
// than just suspending them, so if other browsers follow suit maybe it's less of a concern.
|
|
||||||
export const RETIRED_DOWN_MIGRATION = 'retired' as const
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @public
|
|
||||||
*/
|
|
||||||
export type TLShapePropsMigrations = {
|
|
||||||
sequence: Array<
|
|
||||||
| { readonly dependsOn: readonly MigrationId[] }
|
|
||||||
| {
|
|
||||||
readonly id: MigrationId
|
|
||||||
readonly dependsOn?: MigrationId[]
|
|
||||||
readonly up: (props: any) => any
|
|
||||||
readonly down?:
|
|
||||||
| typeof NO_DOWN_MIGRATION
|
|
||||||
| typeof RETIRED_DOWN_MIGRATION
|
|
||||||
| ((props: any) => any)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export function createShapePropsMigrationSequence(
|
export function createShapePropsMigrationSequence(
|
||||||
migrations: TLShapePropsMigrations
|
migrations: TLPropsMigrations
|
||||||
): TLShapePropsMigrations {
|
): TLPropsMigrations {
|
||||||
return migrations
|
return migrations
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export function createShapePropsMigrationIds<S extends string, T extends Record<string, number>>(
|
export function createShapePropsMigrationIds<
|
||||||
shapeType: S,
|
const S extends string,
|
||||||
ids: T
|
const T extends Record<string, number>,
|
||||||
): { [k in keyof T]: `com.tldraw.shape.${S}/${T[k]}` } {
|
>(shapeType: S, ids: T): { [k in keyof T]: `com.tldraw.shape.${S}/${T[k]}` } {
|
||||||
return mapObjectMapValues(ids, (_k, v) => `com.tldraw.shape.${shapeType}/${v}`) as any
|
return mapObjectMapValues(ids, (_k, v) => `com.tldraw.shape.${shapeType}/${v}`) as any
|
||||||
}
|
}
|
||||||
|
|
||||||
export function processShapeMigrations(shapes: Record<string, SchemaShapeInfo>) {
|
|
||||||
const result: MigrationSequence[] = []
|
|
||||||
|
|
||||||
for (const [shapeType, { migrations }] of Object.entries(shapes)) {
|
|
||||||
const sequenceId = `com.tldraw.shape.${shapeType}`
|
|
||||||
if (!migrations) {
|
|
||||||
// provide empty migrations sequence to allow for future migrations
|
|
||||||
result.push(
|
|
||||||
createMigrationSequence({
|
|
||||||
sequenceId,
|
|
||||||
retroactive: false,
|
|
||||||
sequence: [],
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else if ('sequenceId' in migrations) {
|
|
||||||
assert(
|
|
||||||
sequenceId === migrations.sequenceId,
|
|
||||||
`sequenceId mismatch for ${shapeType} shape migrations. Expected '${sequenceId}', got '${migrations.sequenceId}'`
|
|
||||||
)
|
|
||||||
result.push(migrations)
|
|
||||||
} else if ('sequence' in migrations) {
|
|
||||||
result.push(
|
|
||||||
createMigrationSequence({
|
|
||||||
sequenceId,
|
|
||||||
retroactive: false,
|
|
||||||
sequence: migrations.sequence.map((m) =>
|
|
||||||
'id' in m
|
|
||||||
? {
|
|
||||||
id: m.id,
|
|
||||||
scope: 'record',
|
|
||||||
filter: (r) => r.typeName === 'shape' && (r as TLShape).type === shapeType,
|
|
||||||
dependsOn: m.dependsOn,
|
|
||||||
up: (record: any) => {
|
|
||||||
const result = m.up(record.props)
|
|
||||||
if (result) {
|
|
||||||
record.props = result
|
|
||||||
}
|
|
||||||
},
|
|
||||||
down:
|
|
||||||
typeof m.down === 'function'
|
|
||||||
? (record: any) => {
|
|
||||||
const result = (m.down as (props: any) => any)(record.props)
|
|
||||||
if (result) {
|
|
||||||
record.props = result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
: undefined,
|
|
||||||
}
|
|
||||||
: m
|
|
||||||
),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
// legacy migrations, will be removed in the future
|
|
||||||
result.push(
|
|
||||||
createMigrationSequence({
|
|
||||||
sequenceId,
|
|
||||||
retroactive: false,
|
|
||||||
sequence: Object.keys(migrations.migrators)
|
|
||||||
.map((k) => Number(k))
|
|
||||||
.sort((a: number, b: number) => a - b)
|
|
||||||
.map(
|
|
||||||
(version): Migration => ({
|
|
||||||
id: `${sequenceId}/${version}`,
|
|
||||||
scope: 'record',
|
|
||||||
filter: (r) => r.typeName === 'shape' && (r as TLShape).type === shapeType,
|
|
||||||
up: (record: any) => {
|
|
||||||
const result = migrations.migrators[version].up(record)
|
|
||||||
if (result) {
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
},
|
|
||||||
down: (record: any) => {
|
|
||||||
const result = migrations.migrators[version].down(record)
|
|
||||||
if (result) {
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @internal */
|
/** @internal */
|
||||||
export function createShapeRecordType(shapes: Record<string, SchemaShapeInfo>) {
|
export function createShapeRecordType(shapes: Record<string, SchemaPropsInfo>) {
|
||||||
return createRecordType<TLShape>('shape', {
|
return createRecordType<TLShape>('shape', {
|
||||||
scope: 'document',
|
scope: 'document',
|
||||||
validator: T.model(
|
validator: T.model(
|
||||||
|
|
|
@ -0,0 +1,147 @@
|
||||||
|
import {
|
||||||
|
Migration,
|
||||||
|
MigrationId,
|
||||||
|
MigrationSequence,
|
||||||
|
RecordType,
|
||||||
|
StandaloneDependsOn,
|
||||||
|
UnknownRecord,
|
||||||
|
createMigrationSequence,
|
||||||
|
} from '@tldraw/store'
|
||||||
|
import { Expand, assert } from '@tldraw/utils'
|
||||||
|
import { T } from '@tldraw/validate'
|
||||||
|
import { SchemaPropsInfo } from './createTLSchema'
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export type RecordProps<R extends UnknownRecord & { props: object }> = {
|
||||||
|
[K in keyof R['props']]: T.Validatable<R['props'][K]>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
|
export type RecordPropsType<Config extends Record<string, T.Validatable<any>>> = Expand<{
|
||||||
|
[K in keyof Config]: T.TypeOf<Config[K]>
|
||||||
|
}>
|
||||||
|
|
||||||
|
export const NO_DOWN_MIGRATION = 'none' as const
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If a down migration was deployed more than a couple of months ago it should be safe to retire it.
|
||||||
|
* We only really need them to smooth over the transition between versions, and some folks do keep
|
||||||
|
* browser tabs open for months without refreshing, but at a certain point that kind of behavior is
|
||||||
|
* on them. Plus anyway recently chrome has started to actually kill tabs that are open for too long
|
||||||
|
* rather than just suspending them, so if other browsers follow suit maybe it's less of a concern.
|
||||||
|
*/
|
||||||
|
export const RETIRED_DOWN_MIGRATION = 'retired' as const
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export interface TLPropsMigration {
|
||||||
|
readonly id: MigrationId
|
||||||
|
readonly dependsOn?: MigrationId[]
|
||||||
|
readonly up: (props: any) => any
|
||||||
|
readonly down?: typeof NO_DOWN_MIGRATION | typeof RETIRED_DOWN_MIGRATION | ((props: any) => any)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export interface TLPropsMigrations {
|
||||||
|
readonly sequence: Array<StandaloneDependsOn | TLPropsMigration>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function processPropsMigrations<R extends UnknownRecord & { type: string; props: object }>(
|
||||||
|
typeName: R['typeName'],
|
||||||
|
records: Record<string, SchemaPropsInfo>
|
||||||
|
) {
|
||||||
|
const result: MigrationSequence[] = []
|
||||||
|
|
||||||
|
for (const [subType, { migrations }] of Object.entries(records)) {
|
||||||
|
const sequenceId = `com.tldraw.${typeName}.${subType}`
|
||||||
|
if (!migrations) {
|
||||||
|
// provide empty migrations sequence to allow for future migrations
|
||||||
|
result.push(
|
||||||
|
createMigrationSequence({
|
||||||
|
sequenceId,
|
||||||
|
retroactive: false,
|
||||||
|
sequence: [],
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else if ('sequenceId' in migrations) {
|
||||||
|
assert(
|
||||||
|
sequenceId === migrations.sequenceId,
|
||||||
|
`sequenceId mismatch for ${subType} ${RecordType} migrations. Expected '${sequenceId}', got '${migrations.sequenceId}'`
|
||||||
|
)
|
||||||
|
result.push(migrations)
|
||||||
|
} else if ('sequence' in migrations) {
|
||||||
|
result.push(
|
||||||
|
createMigrationSequence({
|
||||||
|
sequenceId,
|
||||||
|
retroactive: false,
|
||||||
|
sequence: migrations.sequence.map((m) =>
|
||||||
|
'id' in m ? createPropsMigration(typeName, subType, m) : m
|
||||||
|
),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// legacy migrations, will be removed in the future
|
||||||
|
result.push(
|
||||||
|
createMigrationSequence({
|
||||||
|
sequenceId,
|
||||||
|
retroactive: false,
|
||||||
|
sequence: Object.keys(migrations.migrators)
|
||||||
|
.map((k) => Number(k))
|
||||||
|
.sort((a: number, b: number) => a - b)
|
||||||
|
.map(
|
||||||
|
(version): Migration => ({
|
||||||
|
id: `${sequenceId}/${version}`,
|
||||||
|
scope: 'record',
|
||||||
|
filter: (r) => r.typeName === typeName && (r as R).type === subType,
|
||||||
|
up: (record: any) => {
|
||||||
|
const result = migrations.migrators[version].up(record)
|
||||||
|
if (result) {
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
down: (record: any) => {
|
||||||
|
const result = migrations.migrators[version].down(record)
|
||||||
|
if (result) {
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createPropsMigration<R extends UnknownRecord & { type: string; props: object }>(
|
||||||
|
typeName: R['typeName'],
|
||||||
|
subType: R['type'],
|
||||||
|
m: TLPropsMigration
|
||||||
|
): Migration {
|
||||||
|
return {
|
||||||
|
id: m.id,
|
||||||
|
dependsOn: m.dependsOn,
|
||||||
|
scope: 'record',
|
||||||
|
filter: (r) => r.typeName === typeName && (r as R).type === subType,
|
||||||
|
up: (record: any) => {
|
||||||
|
const result = m.up(record.props)
|
||||||
|
if (result) {
|
||||||
|
record.props = result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
down:
|
||||||
|
typeof m.down === 'function'
|
||||||
|
? (record: any) => {
|
||||||
|
const result = (m.down as (props: any) => any)(record.props)
|
||||||
|
if (result) {
|
||||||
|
record.props = result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,17 +1,22 @@
|
||||||
|
import { createMigrationSequence } from '@tldraw/store'
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { vecModelValidator } from '../misc/geometry-types'
|
import { TLArrowBinding } from '../bindings/TLArrowBinding'
|
||||||
|
import { VecModel, vecModelValidator } from '../misc/geometry-types'
|
||||||
|
import { createBindingId } from '../records/TLBinding'
|
||||||
|
import { TLShapeId, createShapePropsMigrationIds } from '../records/TLShape'
|
||||||
import {
|
import {
|
||||||
RETIRED_DOWN_MIGRATION,
|
RETIRED_DOWN_MIGRATION,
|
||||||
createShapePropsMigrationIds,
|
RecordPropsType,
|
||||||
createShapePropsMigrationSequence,
|
TLPropsMigration,
|
||||||
} from '../records/TLShape'
|
createPropsMigration,
|
||||||
|
} from '../recordsWithProps'
|
||||||
import { StyleProp } from '../styles/StyleProp'
|
import { StyleProp } from '../styles/StyleProp'
|
||||||
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
||||||
import { DefaultFillStyle } from '../styles/TLFillStyle'
|
import { DefaultFillStyle } from '../styles/TLFillStyle'
|
||||||
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { ShapePropsType, TLBaseShape, shapeIdValidator } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
const arrowheadTypes = [
|
const arrowheadTypes = [
|
||||||
'arrow',
|
'arrow',
|
||||||
|
@ -40,25 +45,6 @@ export const ArrowShapeArrowheadEndStyle = StyleProp.defineEnum('tldraw:arrowhea
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>
|
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>
|
||||||
|
|
||||||
/** @public */
|
|
||||||
const ArrowShapeTerminal = T.union('type', {
|
|
||||||
binding: T.object({
|
|
||||||
type: T.literal('binding'),
|
|
||||||
boundShapeId: shapeIdValidator,
|
|
||||||
normalizedAnchor: vecModelValidator,
|
|
||||||
isExact: T.boolean,
|
|
||||||
isPrecise: T.boolean,
|
|
||||||
}),
|
|
||||||
point: T.object({
|
|
||||||
type: T.literal('point'),
|
|
||||||
x: T.number,
|
|
||||||
y: T.number,
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
|
|
||||||
/** @public */
|
|
||||||
export type TLArrowShapeTerminal = T.TypeOf<typeof ArrowShapeTerminal>
|
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const arrowShapeProps = {
|
export const arrowShapeProps = {
|
||||||
labelColor: DefaultLabelColorStyle,
|
labelColor: DefaultLabelColorStyle,
|
||||||
|
@ -69,15 +55,15 @@ export const arrowShapeProps = {
|
||||||
arrowheadStart: ArrowShapeArrowheadStartStyle,
|
arrowheadStart: ArrowShapeArrowheadStartStyle,
|
||||||
arrowheadEnd: ArrowShapeArrowheadEndStyle,
|
arrowheadEnd: ArrowShapeArrowheadEndStyle,
|
||||||
font: DefaultFontStyle,
|
font: DefaultFontStyle,
|
||||||
start: ArrowShapeTerminal,
|
start: vecModelValidator,
|
||||||
end: ArrowShapeTerminal,
|
end: vecModelValidator,
|
||||||
bend: T.number,
|
bend: T.number,
|
||||||
text: T.string,
|
text: T.string,
|
||||||
labelPosition: T.number,
|
labelPosition: T.number,
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLArrowShapeProps = ShapePropsType<typeof arrowShapeProps>
|
export type TLArrowShapeProps = RecordPropsType<typeof arrowShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>
|
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>
|
||||||
|
@ -86,20 +72,26 @@ export const arrowShapeVersions = createShapePropsMigrationIds('arrow', {
|
||||||
AddLabelColor: 1,
|
AddLabelColor: 1,
|
||||||
AddIsPrecise: 2,
|
AddIsPrecise: 2,
|
||||||
AddLabelPosition: 3,
|
AddLabelPosition: 3,
|
||||||
|
ExtractBindings: 4,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function propsMigration(migration: TLPropsMigration) {
|
||||||
|
return createPropsMigration<TLArrowShape>('shape', 'arrow', migration)
|
||||||
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const arrowShapeMigrations = createShapePropsMigrationSequence({
|
export const arrowShapeMigrations = createMigrationSequence({
|
||||||
|
sequenceId: 'com.tldraw.shape.arrow',
|
||||||
sequence: [
|
sequence: [
|
||||||
{
|
propsMigration({
|
||||||
id: arrowShapeVersions.AddLabelColor,
|
id: arrowShapeVersions.AddLabelColor,
|
||||||
up: (props) => {
|
up: (props) => {
|
||||||
props.labelColor = 'black'
|
props.labelColor = 'black'
|
||||||
},
|
},
|
||||||
down: RETIRED_DOWN_MIGRATION,
|
down: RETIRED_DOWN_MIGRATION,
|
||||||
},
|
}),
|
||||||
|
|
||||||
{
|
propsMigration({
|
||||||
id: arrowShapeVersions.AddIsPrecise,
|
id: arrowShapeVersions.AddIsPrecise,
|
||||||
up: ({ start, end }) => {
|
up: ({ start, end }) => {
|
||||||
if (start.type === 'binding') {
|
if (start.type === 'binding') {
|
||||||
|
@ -123,9 +115,9 @@ export const arrowShapeMigrations = createShapePropsMigrationSequence({
|
||||||
delete end.isPrecise
|
delete end.isPrecise
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
}),
|
||||||
|
|
||||||
{
|
propsMigration({
|
||||||
id: arrowShapeVersions.AddLabelPosition,
|
id: arrowShapeVersions.AddLabelPosition,
|
||||||
up: (props) => {
|
up: (props) => {
|
||||||
props.labelPosition = 0.5
|
props.labelPosition = 0.5
|
||||||
|
@ -133,6 +125,78 @@ export const arrowShapeMigrations = createShapePropsMigrationSequence({
|
||||||
down: (props) => {
|
down: (props) => {
|
||||||
delete props.labelPosition
|
delete props.labelPosition
|
||||||
},
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
{
|
||||||
|
id: arrowShapeVersions.ExtractBindings,
|
||||||
|
scope: 'store',
|
||||||
|
up: (oldStore) => {
|
||||||
|
type OldArrowTerminal =
|
||||||
|
| {
|
||||||
|
type: 'point'
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: 'binding'
|
||||||
|
boundShapeId: TLShapeId
|
||||||
|
normalizedAnchor: VecModel
|
||||||
|
isExact: boolean
|
||||||
|
isPrecise: boolean
|
||||||
|
}
|
||||||
|
// new type:
|
||||||
|
| { type?: undefined; x: number; y: number }
|
||||||
|
|
||||||
|
type OldArrow = TLBaseShape<'arrow', { start: OldArrowTerminal; end: OldArrowTerminal }>
|
||||||
|
|
||||||
|
const arrows = Object.values(oldStore).filter(
|
||||||
|
(r: any): r is OldArrow => r.typeName === 'shape' && r.type === 'arrow'
|
||||||
|
)
|
||||||
|
|
||||||
|
for (const arrow of arrows) {
|
||||||
|
const { start, end } = arrow.props
|
||||||
|
if (start.type === 'binding') {
|
||||||
|
const id = createBindingId()
|
||||||
|
const binding: TLArrowBinding = {
|
||||||
|
typeName: 'binding',
|
||||||
|
id,
|
||||||
|
type: 'arrow',
|
||||||
|
fromId: arrow.id,
|
||||||
|
toId: start.boundShapeId,
|
||||||
|
meta: {},
|
||||||
|
props: {
|
||||||
|
terminal: 'start',
|
||||||
|
normalizedAnchor: start.normalizedAnchor,
|
||||||
|
isExact: start.isExact,
|
||||||
|
isPrecise: start.isPrecise,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
oldStore[id] = binding
|
||||||
|
arrow.props.start = { x: 0, y: 0 }
|
||||||
|
}
|
||||||
|
if (end.type === 'binding') {
|
||||||
|
const id = createBindingId()
|
||||||
|
const binding: TLArrowBinding = {
|
||||||
|
typeName: 'binding',
|
||||||
|
id,
|
||||||
|
type: 'arrow',
|
||||||
|
fromId: arrow.id,
|
||||||
|
toId: end.boundShapeId,
|
||||||
|
meta: {},
|
||||||
|
props: {
|
||||||
|
terminal: 'end',
|
||||||
|
normalizedAnchor: end.normalizedAnchor,
|
||||||
|
isExact: end.isExact,
|
||||||
|
isPrecise: end.isPrecise,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
oldStore[id] = binding
|
||||||
|
arrow.props.end = { x: 0, y: 0 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { BaseRecord } from '@tldraw/store'
|
import { BaseRecord } from '@tldraw/store'
|
||||||
import { Expand, IndexKey, JsonObject } from '@tldraw/utils'
|
import { IndexKey, JsonObject } from '@tldraw/utils'
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { TLOpacityType, opacityValidator } from '../misc/TLOpacity'
|
import { TLOpacityType, opacityValidator } from '../misc/TLOpacity'
|
||||||
import { idValidator } from '../misc/id-validator'
|
import { idValidator } from '../misc/id-validator'
|
||||||
|
@ -56,13 +56,3 @@ export function createShapeValidator<
|
||||||
meta: meta ? T.object(meta) : (T.jsonValue as any),
|
meta: meta ? T.object(meta) : (T.jsonValue as any),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
|
||||||
export type ShapeProps<Shape extends TLBaseShape<any, any>> = {
|
|
||||||
[K in keyof Shape['props']]: T.Validatable<Shape['props'][K]>
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @public */
|
|
||||||
export type ShapePropsType<Config extends Record<string, T.Validatable<any>>> = Expand<{
|
|
||||||
[K in keyof Config]: T.TypeOf<Config[K]>
|
|
||||||
}>
|
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { assetIdValidator } from '../assets/TLBaseAsset'
|
import { assetIdValidator } from '../assets/TLBaseAsset'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const bookmarkShapeProps = {
|
export const bookmarkShapeProps = {
|
||||||
|
@ -16,7 +13,7 @@ export const bookmarkShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLBookmarkShapeProps = ShapePropsType<typeof bookmarkShapeProps>
|
export type TLBookmarkShapeProps = RecordPropsType<typeof bookmarkShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>
|
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>
|
||||||
|
|
|
@ -1,15 +1,12 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { vecModelValidator } from '../misc/geometry-types'
|
import { vecModelValidator } from '../misc/geometry-types'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
||||||
import { DefaultFillStyle } from '../styles/TLFillStyle'
|
import { DefaultFillStyle } from '../styles/TLFillStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
export const DrawShapeSegment = T.object({
|
export const DrawShapeSegment = T.object({
|
||||||
type: T.literalEnum('free', 'straight'),
|
type: T.literalEnum('free', 'straight'),
|
||||||
|
@ -32,7 +29,7 @@ export const drawShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLDrawShapeProps = ShapePropsType<typeof drawShapeProps>
|
export type TLDrawShapeProps = RecordPropsType<typeof drawShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
|
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
|
||||||
|
|
|
@ -1,10 +1,7 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
|
||||||
|
|
||||||
// Only allow multiplayer embeds. If we add additional routes later for example '/help' this won't match
|
// Only allow multiplayer embeds. If we add additional routes later for example '/help' this won't match
|
||||||
const TLDRAW_APP_RE = /(^\/r\/[^/]+\/?$)/
|
const TLDRAW_APP_RE = /(^\/r\/[^/]+\/?$)/
|
||||||
|
@ -591,7 +588,7 @@ export const embedShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLEmbedShapeProps = ShapePropsType<typeof embedShapeProps>
|
export type TLEmbedShapeProps = RecordPropsType<typeof embedShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>
|
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { createShapePropsMigrationSequence } from '../records/TLShape'
|
import { createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { RecordPropsType } from '../recordsWithProps'
|
||||||
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const frameShapeProps = {
|
export const frameShapeProps = {
|
||||||
|
@ -9,7 +10,7 @@ export const frameShapeProps = {
|
||||||
name: T.string,
|
name: T.string,
|
||||||
}
|
}
|
||||||
|
|
||||||
type TLFrameShapeProps = ShapePropsType<typeof frameShapeProps>
|
type TLFrameShapeProps = RecordPropsType<typeof frameShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>
|
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { StyleProp } from '../styles/StyleProp'
|
import { StyleProp } from '../styles/StyleProp'
|
||||||
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
||||||
|
@ -15,7 +12,7 @@ import {
|
||||||
} from '../styles/TLHorizontalAlignStyle'
|
} from '../styles/TLHorizontalAlignStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle'
|
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {
|
export const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {
|
||||||
|
@ -65,7 +62,7 @@ export const geoShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLGeoShapeProps = ShapePropsType<typeof geoShapeProps>
|
export type TLGeoShapeProps = RecordPropsType<typeof geoShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>
|
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { createShapePropsMigrationSequence } from '../records/TLShape'
|
import { createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
import { ShapeProps, TLBaseShape } from './TLBaseShape'
|
import { RecordProps } from '../recordsWithProps'
|
||||||
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLGroupShapeProps = { [key in never]: undefined }
|
export type TLGroupShapeProps = { [key in never]: undefined }
|
||||||
|
@ -8,7 +9,7 @@ export type TLGroupShapeProps = { [key in never]: undefined }
|
||||||
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>
|
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const groupShapeProps: ShapeProps<TLGroupShape> = {}
|
export const groupShapeProps: RecordProps<TLGroupShape> = {}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const groupShapeMigrations = createShapePropsMigrationSequence({ sequence: [] })
|
export const groupShapeMigrations = createShapePropsMigrationSequence({ sequence: [] })
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { createShapePropsMigrationSequence } from '../records/TLShape'
|
import { createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
|
import { RecordPropsType } from '../recordsWithProps'
|
||||||
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
import { DrawShapeSegment } from './TLDrawShape'
|
import { DrawShapeSegment } from './TLDrawShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
|
@ -15,7 +16,7 @@ export const highlightShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLHighlightShapeProps = ShapePropsType<typeof highlightShapeProps>
|
export type TLHighlightShapeProps = RecordPropsType<typeof highlightShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>
|
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>
|
||||||
|
|
|
@ -1,12 +1,9 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { assetIdValidator } from '../assets/TLBaseAsset'
|
import { assetIdValidator } from '../assets/TLBaseAsset'
|
||||||
import { vecModelValidator } from '../misc/geometry-types'
|
import { vecModelValidator } from '../misc/geometry-types'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const ImageShapeCrop = T.object({
|
export const ImageShapeCrop = T.object({
|
||||||
|
@ -27,7 +24,7 @@ export const imageShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLImageShapeProps = ShapePropsType<typeof imageShapeProps>
|
export type TLImageShapeProps = RecordPropsType<typeof imageShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>
|
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>
|
||||||
|
|
|
@ -1,15 +1,12 @@
|
||||||
import { IndexKey, getIndices, objectMapFromEntries, sortByIndex } from '@tldraw/utils'
|
import { IndexKey, getIndices, objectMapFromEntries, sortByIndex } from '@tldraw/utils'
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { StyleProp } from '../styles/StyleProp'
|
import { StyleProp } from '../styles/StyleProp'
|
||||||
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const LineShapeSplineStyle = StyleProp.defineEnum('tldraw:spline', {
|
export const LineShapeSplineStyle = StyleProp.defineEnum('tldraw:spline', {
|
||||||
|
@ -37,7 +34,7 @@ export const lineShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLLineShapeProps = ShapePropsType<typeof lineShapeProps>
|
export type TLLineShapeProps = RecordPropsType<typeof lineShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>
|
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>
|
||||||
|
|
|
@ -1,15 +1,12 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
||||||
import { DefaultHorizontalAlignStyle } from '../styles/TLHorizontalAlignStyle'
|
import { DefaultHorizontalAlignStyle } from '../styles/TLHorizontalAlignStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle'
|
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const noteShapeProps = {
|
export const noteShapeProps = {
|
||||||
|
@ -25,7 +22,7 @@ export const noteShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLNoteShapeProps = ShapePropsType<typeof noteShapeProps>
|
export type TLNoteShapeProps = RecordPropsType<typeof noteShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>
|
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>
|
||||||
|
|
|
@ -1,14 +1,11 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
import { DefaultColorStyle } from '../styles/TLColorStyle'
|
||||||
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
||||||
import { DefaultHorizontalAlignStyle } from '../styles/TLHorizontalAlignStyle'
|
import { DefaultHorizontalAlignStyle } from '../styles/TLHorizontalAlignStyle'
|
||||||
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const textShapeProps = {
|
export const textShapeProps = {
|
||||||
|
@ -23,7 +20,7 @@ export const textShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLTextShapeProps = ShapePropsType<typeof textShapeProps>
|
export type TLTextShapeProps = RecordPropsType<typeof textShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>
|
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
import { T } from '@tldraw/validate'
|
import { T } from '@tldraw/validate'
|
||||||
import { assetIdValidator } from '../assets/TLBaseAsset'
|
import { assetIdValidator } from '../assets/TLBaseAsset'
|
||||||
import {
|
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
|
||||||
RETIRED_DOWN_MIGRATION,
|
import { RETIRED_DOWN_MIGRATION, RecordPropsType } from '../recordsWithProps'
|
||||||
createShapePropsMigrationIds,
|
import { TLBaseShape } from './TLBaseShape'
|
||||||
createShapePropsMigrationSequence,
|
|
||||||
} from '../records/TLShape'
|
|
||||||
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export const videoShapeProps = {
|
export const videoShapeProps = {
|
||||||
|
@ -18,7 +15,7 @@ export const videoShapeProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLVideoShapeProps = ShapePropsType<typeof videoShapeProps>
|
export type TLVideoShapeProps = RecordPropsType<typeof videoShapeProps>
|
||||||
|
|
||||||
/** @public */
|
/** @public */
|
||||||
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>
|
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>
|
||||||
|
|
|
@ -1,296 +0,0 @@
|
||||||
## API Report File for "@tldraw/tlsync"
|
|
||||||
|
|
||||||
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
||||||
|
|
||||||
```ts
|
|
||||||
|
|
||||||
import { Atom } from 'signia';
|
|
||||||
import { BaseRecord } from '@tldraw/tlstore';
|
|
||||||
import { MigrationFailureReason } from '@tldraw/tlstore';
|
|
||||||
import { RecordsDiff } from '@tldraw/tlstore';
|
|
||||||
import { RecordType } from '@tldraw/tlstore';
|
|
||||||
import { Result } from '@tldraw/utils';
|
|
||||||
import { SerializedSchema } from '@tldraw/tlstore';
|
|
||||||
import { Signal } from 'signia';
|
|
||||||
import { Store } from '@tldraw/tlstore';
|
|
||||||
import { StoreSchema } from '@tldraw/tlstore';
|
|
||||||
import * as WebSocket_2 from 'ws';
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type AppendOp = [type: ValueOpType.Append, values: unknown[], offset: number];
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export function applyObjectDiff<T extends object>(object: T, objectDiff: ObjectDiff): T;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type DeleteOp = [type: ValueOpType.Delete];
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export function diffRecord(prev: object, next: object): null | ObjectDiff;
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export const getNetworkDiff: <R extends BaseRecord<string>>(diff: RecordsDiff<R>) => NetworkDiff<R> | null;
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export type NetworkDiff<R extends BaseRecord> = {
|
|
||||||
[id: string]: RecordOp<R>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type ObjectDiff = {
|
|
||||||
[k: string]: ValueOp;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type PatchOp = [type: ValueOpType.Patch, diff: ObjectDiff];
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type PersistedRoomSnapshot = {
|
|
||||||
id: string;
|
|
||||||
slug: string;
|
|
||||||
drawing: RoomSnapshot;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type PutOp = [type: ValueOpType.Put, value: unknown];
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type RecordOp<R extends BaseRecord> = [RecordOpType.Patch, ObjectDiff] | [RecordOpType.Put, R] | [RecordOpType.Remove];
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export enum RecordOpType {
|
|
||||||
// (undocumented)
|
|
||||||
Patch = "patch",
|
|
||||||
// (undocumented)
|
|
||||||
Put = "put",
|
|
||||||
// (undocumented)
|
|
||||||
Remove = "remove"
|
|
||||||
}
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type RoomClient<R extends BaseRecord> = {
|
|
||||||
serializedSchema: SerializedSchema;
|
|
||||||
socket: TLRoomSocket<R>;
|
|
||||||
id: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type RoomForId = {
|
|
||||||
id: string;
|
|
||||||
persistenceId?: string;
|
|
||||||
timeout?: any;
|
|
||||||
room: TLSyncRoom<any>;
|
|
||||||
clients: Map<WebSocket_2.WebSocket, RoomClient<any>>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type RoomSnapshot = {
|
|
||||||
clock: number;
|
|
||||||
documents: Array<{
|
|
||||||
state: BaseRecord;
|
|
||||||
lastChangedClock: number;
|
|
||||||
}>;
|
|
||||||
tombstones?: Record<string, number>;
|
|
||||||
schema?: SerializedSchema;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export function serializeMessage(message: Message): string;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLConnectRequest = {
|
|
||||||
type: 'connect';
|
|
||||||
lastServerClock: number;
|
|
||||||
protocolVersion: number;
|
|
||||||
schema: SerializedSchema;
|
|
||||||
instanceId: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export enum TLIncompatibilityReason {
|
|
||||||
// (undocumented)
|
|
||||||
ClientTooOld = "clientTooOld",
|
|
||||||
// (undocumented)
|
|
||||||
InvalidOperation = "invalidOperation",
|
|
||||||
// (undocumented)
|
|
||||||
InvalidRecord = "invalidRecord",
|
|
||||||
// (undocumented)
|
|
||||||
ServerTooOld = "serverTooOld"
|
|
||||||
}
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export type TLPersistentClientSocket<R extends BaseRecord = BaseRecord> = {
|
|
||||||
connectionStatus: 'error' | 'offline' | 'online';
|
|
||||||
sendMessage: (msg: TLSocketClientSentEvent<R>) => void;
|
|
||||||
onReceiveMessage: SubscribingFn<TLSocketServerSentEvent<R>>;
|
|
||||||
onStatusChange: SubscribingFn<TLPersistentClientSocketStatus>;
|
|
||||||
restart: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLPersistentClientSocketStatus = 'error' | 'offline' | 'online';
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLPingRequest = {
|
|
||||||
type: 'ping';
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLPushRequest<R extends BaseRecord> = {
|
|
||||||
type: 'push';
|
|
||||||
clientClock: number;
|
|
||||||
diff: NetworkDiff<R>;
|
|
||||||
} | {
|
|
||||||
type: 'push';
|
|
||||||
clientClock: number;
|
|
||||||
presence: [RecordOpType.Patch, ObjectDiff] | [RecordOpType.Put, R];
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLRoomSocket<R extends BaseRecord> = {
|
|
||||||
isOpen: boolean;
|
|
||||||
sendMessage: (msg: TLSocketServerSentEvent<R>) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export abstract class TLServer {
|
|
||||||
abstract deleteRoomForId(roomId: string): void;
|
|
||||||
abstract getRoomForId(roomId: string): RoomForId | undefined;
|
|
||||||
handleConnection: (ws: WebSocket_2.WebSocket, roomId: string) => Promise<void>;
|
|
||||||
loadFromDatabase?(roomId: string): Promise<PersistedRoomSnapshot | undefined>;
|
|
||||||
logEvent?(_event: {
|
|
||||||
roomId: string;
|
|
||||||
name: string;
|
|
||||||
clientId?: string;
|
|
||||||
}): void;
|
|
||||||
persistToDatabase?(roomId: string): Promise<void>;
|
|
||||||
abstract setRoomForId(roomId: string, roomForId: RoomForId): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLSocketClientSentEvent<R extends BaseRecord> = TLConnectRequest | TLPingRequest | TLPushRequest<R>;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type TLSocketServerSentEvent<R extends BaseRecord> = {
|
|
||||||
type: 'connect';
|
|
||||||
hydrationType: 'wipe_all' | 'wipe_presence';
|
|
||||||
protocolVersion: number;
|
|
||||||
schema: SerializedSchema;
|
|
||||||
diff: NetworkDiff<R>;
|
|
||||||
serverClock: number;
|
|
||||||
} | {
|
|
||||||
type: 'error';
|
|
||||||
error?: any;
|
|
||||||
} | {
|
|
||||||
type: 'incompatibility_error';
|
|
||||||
reason: TLIncompatibilityReason;
|
|
||||||
} | {
|
|
||||||
type: 'patch';
|
|
||||||
diff: NetworkDiff<R>;
|
|
||||||
serverClock: number;
|
|
||||||
} | {
|
|
||||||
type: 'pong';
|
|
||||||
} | {
|
|
||||||
type: 'push_result';
|
|
||||||
clientClock: number;
|
|
||||||
serverClock: number;
|
|
||||||
action: 'commit' | 'discard' | {
|
|
||||||
rebaseWithDiff: NetworkDiff<R>;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export const TLSYNC_PROTOCOL_VERSION = 3;
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export class TLSyncClient<R extends BaseRecord, S extends Store<R> = Store<R>> {
|
|
||||||
constructor(config: {
|
|
||||||
store: S;
|
|
||||||
socket: TLPersistentClientSocket<R>;
|
|
||||||
instanceId: string;
|
|
||||||
onLoad: (self: TLSyncClient<R, S>) => void;
|
|
||||||
onLoadError: (error: Error) => void;
|
|
||||||
onSyncError: (reason: TLIncompatibilityReason) => void;
|
|
||||||
onAfterConnect?: (self: TLSyncClient<R, S>) => void;
|
|
||||||
});
|
|
||||||
// (undocumented)
|
|
||||||
close(): void;
|
|
||||||
// (undocumented)
|
|
||||||
incomingDiffBuffer: Extract<TLSocketServerSentEvent<R>, {
|
|
||||||
type: 'patch' | 'push_result';
|
|
||||||
}>[];
|
|
||||||
readonly instanceId: string;
|
|
||||||
// (undocumented)
|
|
||||||
isConnectedToRoom: boolean;
|
|
||||||
// (undocumented)
|
|
||||||
lastPushedPresenceState: null | R;
|
|
||||||
readonly onAfterConnect?: (self: TLSyncClient<R, S>) => void;
|
|
||||||
// (undocumented)
|
|
||||||
readonly onSyncError: (reason: TLIncompatibilityReason) => void;
|
|
||||||
// (undocumented)
|
|
||||||
readonly presenceState: Signal<null | R>;
|
|
||||||
// (undocumented)
|
|
||||||
readonly socket: TLPersistentClientSocket<R>;
|
|
||||||
// (undocumented)
|
|
||||||
readonly store: S;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @public
|
|
||||||
export class TLSyncRoom<R extends BaseRecord> {
|
|
||||||
constructor(schema: StoreSchema<R>, snapshot?: RoomSnapshot);
|
|
||||||
addClient(client: RoomClient<R>): void;
|
|
||||||
broadcastPatch({ diff, sourceClient }: {
|
|
||||||
diff: NetworkDiff<R>;
|
|
||||||
sourceClient: RoomClient<R>;
|
|
||||||
}): this;
|
|
||||||
// (undocumented)
|
|
||||||
clientIdsToInstanceIds: Map<string, string>;
|
|
||||||
// (undocumented)
|
|
||||||
clients: Map<string, RoomClient<R>>;
|
|
||||||
// (undocumented)
|
|
||||||
clock: number;
|
|
||||||
// (undocumented)
|
|
||||||
readonly documentTypes: Set<string>;
|
|
||||||
// (undocumented)
|
|
||||||
getSnapshot(): RoomSnapshot;
|
|
||||||
handleClose: (client: RoomClient<R>) => void;
|
|
||||||
handleConnection: (client: RoomClient<R>) => this;
|
|
||||||
handleMessage: (client: RoomClient<R>, message: TLSocketClientSentEvent<R>) => Promise<this | void>;
|
|
||||||
migrateDiffForClient(client: RoomClient<R>, diff: NetworkDiff<R>): Result<NetworkDiff<R>, MigrationFailureReason>;
|
|
||||||
// (undocumented)
|
|
||||||
readonly presenceType: RecordType<R, any>;
|
|
||||||
// (undocumented)
|
|
||||||
pruneTombstones(): void;
|
|
||||||
removeClient(client: RoomClient<R>): void;
|
|
||||||
// (undocumented)
|
|
||||||
readonly schema: StoreSchema<R>;
|
|
||||||
sendMessageToClient(client: RoomClient<R>, message: TLSocketServerSentEvent<R>): this;
|
|
||||||
// (undocumented)
|
|
||||||
readonly serializedSchema: SerializedSchema;
|
|
||||||
// (undocumented)
|
|
||||||
state: Atom<{
|
|
||||||
documents: Record<string, DocumentState<R>>;
|
|
||||||
tombstones: Record<string, number>;
|
|
||||||
}, unknown>;
|
|
||||||
// (undocumented)
|
|
||||||
tombstoneHistoryStartsAtClock: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export type ValueOp = AppendOp | DeleteOp | PatchOp | PutOp;
|
|
||||||
|
|
||||||
// @public (undocumented)
|
|
||||||
export enum ValueOpType {
|
|
||||||
// (undocumented)
|
|
||||||
Append = "append",
|
|
||||||
// (undocumented)
|
|
||||||
Delete = "delete",
|
|
||||||
// (undocumented)
|
|
||||||
Patch = "patch",
|
|
||||||
// (undocumented)
|
|
||||||
Put = "put"
|
|
||||||
}
|
|
||||||
|
|
||||||
// (No @packageDocumentation comment for this package)
|
|
||||||
|
|
||||||
```
|
|
|
@ -1,16 +1,18 @@
|
||||||
import {
|
import {
|
||||||
Editor,
|
Editor,
|
||||||
PageRecordType,
|
PageRecordType,
|
||||||
TLArrowShapeTerminal,
|
TLArrowBinding,
|
||||||
TLPage,
|
TLPage,
|
||||||
TLPageId,
|
TLPageId,
|
||||||
TLShape,
|
TLShape,
|
||||||
TLShapeId,
|
TLShapeId,
|
||||||
TLStore,
|
TLStore,
|
||||||
|
VecModel,
|
||||||
createShapeId,
|
createShapeId,
|
||||||
defaultShapeUtils,
|
defaultShapeUtils,
|
||||||
defaultTools,
|
defaultTools,
|
||||||
} from 'tldraw'
|
} from 'tldraw'
|
||||||
|
import { defaultBindingUtils } from 'tldraw/src/lib/defaultBindingUtils'
|
||||||
import { RandomSource } from './RandomSource'
|
import { RandomSource } from './RandomSource'
|
||||||
|
|
||||||
export type Op =
|
export type Op =
|
||||||
|
@ -37,8 +39,8 @@ export type Op =
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
type: 'create-arrow'
|
type: 'create-arrow'
|
||||||
start: TLArrowShapeTerminal
|
start: TLArrowBinding | VecModel
|
||||||
end: TLArrowShapeTerminal
|
end: TLArrowBinding | VecModel
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
type: 'delete-shape'
|
type: 'delete-shape'
|
||||||
|
@ -97,6 +99,7 @@ export class FuzzEditor extends RandomSource {
|
||||||
super(_seed)
|
super(_seed)
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
shapeUtils: defaultShapeUtils,
|
shapeUtils: defaultShapeUtils,
|
||||||
|
bindingUtils: defaultBindingUtils,
|
||||||
tools: defaultTools,
|
tools: defaultTools,
|
||||||
initialState: 'select',
|
initialState: 'select',
|
||||||
store,
|
store,
|
||||||
|
|
|
@ -50,8 +50,8 @@ const oldArrow: TLBaseShape<'arrow', Omit<TLArrowShapeProps, 'labelColor'>> = {
|
||||||
fill: 'none',
|
fill: 'none',
|
||||||
color: 'black',
|
color: 'black',
|
||||||
bend: 0,
|
bend: 0,
|
||||||
start: { type: 'point', x: 0, y: 0 },
|
start: { x: 0, y: 0 },
|
||||||
end: { type: 'point', x: 0, y: 0 },
|
end: { x: 0, y: 0 },
|
||||||
arrowheadStart: 'none',
|
arrowheadStart: 'none',
|
||||||
arrowheadEnd: 'arrow',
|
arrowheadEnd: 'arrow',
|
||||||
text: '',
|
text: '',
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { nanoid } from 'nanoid'
|
import { nanoid } from 'nanoid'
|
||||||
import {
|
import {
|
||||||
Editor,
|
Editor,
|
||||||
|
TLArrowBinding,
|
||||||
TLArrowShape,
|
TLArrowShape,
|
||||||
TLRecord,
|
TLRecord,
|
||||||
TLStore,
|
TLStore,
|
||||||
|
@ -117,10 +118,18 @@ let totalNumShapes = 0
|
||||||
let totalNumPages = 0
|
let totalNumPages = 0
|
||||||
|
|
||||||
function arrowsAreSound(editor: Editor) {
|
function arrowsAreSound(editor: Editor) {
|
||||||
const arrows = editor.getCurrentPageShapes().filter((s) => s.type === 'arrow') as TLArrowShape[]
|
const arrows = editor.getCurrentPageShapes().filter((s): s is TLArrowShape => s.type === 'arrow')
|
||||||
for (const arrow of arrows) {
|
for (const arrow of arrows) {
|
||||||
for (const terminal of [arrow.props.start, arrow.props.end]) {
|
const bindings = editor.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
|
||||||
if (terminal.type === 'binding' && !editor.store.has(terminal.boundShapeId)) {
|
const terminalsSeen = new Set()
|
||||||
|
for (const binding of bindings) {
|
||||||
|
if (terminalsSeen.has(binding.props.terminal)) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
terminalsSeen.add(binding.props.terminal)
|
||||||
|
|
||||||
|
if (!editor.store.has(binding.toId)) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue