Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[experiment] Accoutrements #2969

Draft
wants to merge 1 commit into
base: alex/state-node-prototype-1
Choose a base branch
from
Draft

[experiment] Accoutrements #2969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 2 additions & 8 deletions apps/examples/src/examples/speech-bubble/CustomShapeWithHandles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,17 @@
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { SpeechBubbleTool } from './SpeechBubble/SpeechBubbleTool'
import { SpeechBubbleUtil } from './SpeechBubble/SpeechBubbleUtil'
import { SpeechBubbleAccoutrement } from './SpeechBubble/SpeechBubbleAccoutrement'
import { components, customAssetUrls, uiOverrides } from './SpeechBubble/ui-overrides'
import './customhandles.css'

// There's a guide at the bottom of this file!

// [1]
const shapeUtils = [SpeechBubbleUtil]
const tools = [SpeechBubbleTool]

// [2]
export default function CustomShapeWithHandles() {
return (
<div style={{ position: 'absolute', inset: 0 }}>
<Tldraw
shapeUtils={shapeUtils}
tools={tools}
accoutrements={[SpeechBubbleAccoutrement]}
overrides={uiOverrides}
assetUrls={customAssetUrls}
components={components}
Expand Down
16 changes: 16 additions & 0 deletions apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleAccoutrement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Accoutrement } from '@tldraw/tldraw'
import { DraggingSpeechBubble, SpeechBubbleHandle } from './SpeechBubbleHandle'
import { SpeechBubbleTool } from './SpeechBubbleTool'
import { SpeechBubbleUtil } from './SpeechBubbleUtil'

export const SpeechBubbleAccoutrement: Accoutrement = {
id: 'speechBubble',
onMount: (editor) => {
editor.root.find('select')?.addChild(DraggingSpeechBubble)
},
shapeUtils: [SpeechBubbleUtil],
tools: [SpeechBubbleTool],
components: {
InFrontOfTheCanvas: () => <SpeechBubbleHandle />,
},
}
9 changes: 3 additions & 6 deletions apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleHandle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import { HandleControl, StateNode, Vec, track, useEditor } from '@tldraw/tldraw'
import { useEffect } from 'react'
import { SpeechBubbleShape } from './SpeechBubbleUtil'

export const SpeechBubbleHandle = track(function SpeechBubbleHandle() {
const editor = useEditor()

useEffect(() => {
editor.root.find('select')!.addChild(DraggingSpeechBubble)
}, [editor])

if (!editor.isInAny('select.idle')) {
return null
}
Expand Down Expand Up @@ -41,13 +36,15 @@ export const SpeechBubbleHandle = track(function SpeechBubbleHandle() {
// - tool masks (what even is this?)
// - snapping/modifiers
// - triggering updates on key presses?
// - pointer capture
//
// drawbacks:
// - need to manually handle cancellation, undo-redo, etc
// - kinda funky with typescript to have properties on the state node
// - how to pass data into this?
// - feels pretty unfamiliar to devs - why do i have to do something special to add this to the state tree?
class DraggingSpeechBubble extends StateNode {
// - gesture recognition (can't transition this into a pinch because it never reached our state chart)
export class DraggingSpeechBubble extends StateNode {
override id = 'draggingSpeechBubble'

initialShape!: SpeechBubbleShape
Expand Down
2 changes: 0 additions & 2 deletions apps/examples/src/examples/speech-bubble/SpeechBubble/ui-overrides.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
toolbarItem,
useTools,
} from '@tldraw/tldraw'
import { SpeechBubbleHandle } from './SpeechBubbleHandle'

// There's a guide at the bottom of this file!

Expand Down Expand Up @@ -50,7 +49,6 @@ export const components: TLComponents = {
</DefaultKeyboardShortcutsDialog>
)
},
InFrontOfTheCanvas: () => <SpeechBubbleHandle />,
}

/*
Expand Down
16 changes: 16 additions & 0 deletions packages/editor/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,20 @@ import { useValue } from '@tldraw/state';
import { VecModel } from '@tldraw/tlschema';
import { whyAmIRunning } from '@tldraw/state';

// @public (undocumented)
export interface Accoutrement {
// (undocumented)
components?: Pick<TLEditorComponents, 'InFrontOfTheCanvas' | 'OnTheCanvas'>;
// (undocumented)
id: string;
// (undocumented)
onMount?: TLOnMountHandler;
// (undocumented)
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
// (undocumented)
tools?: readonly TLStateNodeConstructor[];
}

// @public
export function angleDistance(fromAngle: number, toAngle: number, direction: number): number;

Expand Down Expand Up @@ -2031,6 +2045,8 @@ export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;

// @public
export interface TldrawEditorBaseProps {
// (undocumented)
accoutrements?: Accoutrement[];
autoFocus?: boolean;
children?: any;
className?: string;
Expand Down
218 changes: 218 additions & 0 deletions packages/editor/api/api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,192 @@
"name": "",
"preserveMemberOrder": false,
"members": [
{
"kind": "Interface",
"canonicalReference": "@tldraw/editor!Accoutrement:interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface Accoutrement "
}
],
"fileUrlPath": "packages/editor/src/lib/config/Accotrements.ts",
"releaseTag": "Public",
"name": "Accoutrement",
"preserveMemberOrder": false,
"members": [
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!Accoutrement#components:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "components?: "
},
{
"kind": "Reference",
"text": "Pick",
"canonicalReference": "!Pick:type"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "TLEditorComponents",
"canonicalReference": "@tldraw/editor!TLEditorComponents:type"
},
{
"kind": "Content",
"text": ", 'InFrontOfTheCanvas' | 'OnTheCanvas'>"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "components",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 5
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!Accoutrement#id:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "id: "
},
{
"kind": "Content",
"text": "string"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "id",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!Accoutrement#onMount:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "onMount?: "
},
{
"kind": "Reference",
"text": "TLOnMountHandler",
"canonicalReference": "@tldraw/editor!TLOnMountHandler:type"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "onMount",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!Accoutrement#shapeUtils:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "shapeUtils?: "
},
{
"kind": "Content",
"text": "readonly "
},
{
"kind": "Reference",
"text": "TLAnyShapeUtilConstructor",
"canonicalReference": "@tldraw/editor!TLAnyShapeUtilConstructor:type"
},
{
"kind": "Content",
"text": "[]"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "shapeUtils",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 4
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!Accoutrement#tools:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "tools?: "
},
{
"kind": "Content",
"text": "readonly "
},
{
"kind": "Reference",
"text": "TLStateNodeConstructor",
"canonicalReference": "@tldraw/editor!TLStateNodeConstructor:interface"
},
{
"kind": "Content",
"text": "[]"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "tools",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 4
}
}
],
"extendsTokenRanges": []
},
{
"kind": "Function",
"canonicalReference": "@tldraw/editor!angleDistance:function(1)",
Expand Down Expand Up @@ -36333,6 +36519,38 @@
"name": "TldrawEditorBaseProps",
"preserveMemberOrder": false,
"members": [
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!TldrawEditorBaseProps#accoutrements:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "accoutrements?: "
},
{
"kind": "Reference",
"text": "Accoutrement",
"canonicalReference": "@tldraw/editor!Accoutrement:interface"
},
{
"kind": "Content",
"text": "[]"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "accoutrements",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/editor!TldrawEditorBaseProps#autoFocus:member",
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export {
} from './lib/components/default-components/DefaultSnapIndictor'
export { DefaultSpinner } from './lib/components/default-components/DefaultSpinner'
export { DefaultSvgDefs } from './lib/components/default-components/DefaultSvgDefs'
export { type Accoutrement } from './lib/config/Accotrements'
export {
TAB_ID,
createSessionStateSnapshotSignal,
Expand Down