clean demo repo
This commit is contained in:
Orion Reed
commit
e92668e8ed
|
|
@ -0,0 +1,28 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
.yarn
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
dbDir
|
||||
*.tsbuildinfo
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
# scoped proagators
|
||||
"Scoped propagators" are formed of a `scope` and a `propagator` which often looks like this:
|
||||
|
||||
`click { text: "foo" }`
|
||||
|
||||
The `scope` sets the events that cause propagation, such as clicks, ticks, or shape changes (not adding a scope will default to shape changes).
|
||||
|
||||
The `propagator` is a JS object (or function which returns one) that is applied to the shape.
|
||||
|
||||
## Notes
|
||||
- shapes are passed both `from` and `to` shapes.
|
||||
- Shapes are flattened before being passed to the propagator, and unpacked on the other side. So properties live alongside the `x`, `y`, and `rotation` values (e.g. `{ x: 100, y: 100, text: "foo" }`).
|
||||
|
||||
Current Issues (probably should be fixed before putting out a demo):
|
||||
- cycles of `change` propagators cause infinite recursion.
|
||||
- `geo` scopes are currently fired for any shape change, this should be localised to spatially local changes.
|
||||
|
||||
## Effects / Generic JS
|
||||
You can create effects or run arbitrary JS code if you use the full function syntax:
|
||||
|
||||
`click () { return { text: "foo" } }`
|
||||
|
||||
This can be useful for larger propagators, or for doing arbitrary stuff with the `editor`.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"$schema": "https://biomejs.dev/schemas/1.8.2/schema.json"
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="./tldraw.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>scoped propagators
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "scoped-propagators",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"tsc": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"rbush": "^3.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tldraw": "2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.14.2",
|
||||
"@types/rbush": "^3.0.3",
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"typescript": "^5.5.2",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Editor, TLArrowShape, Tldraw } from 'tldraw'
|
||||
import { CustomMainMenu } from '@/CustomMainMenu'
|
||||
import { ClickPropagator, ChangePropagator, TickPropagator, SpatialPropagator, registerPropagators } from '@/propagators/ScopedPropagators'
|
||||
|
||||
export default function YjsExample() {
|
||||
return (
|
||||
<div className="tldraw__editor">
|
||||
<Tldraw
|
||||
components={{
|
||||
MainMenu: CustomMainMenu,
|
||||
}}
|
||||
onMount={onMount}
|
||||
persistenceKey='funcArrows'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function onMount(editor: Editor) {
|
||||
//@ts-expect-error
|
||||
window.editor = editor
|
||||
// stop double click text creation
|
||||
//@ts-expect-error
|
||||
editor.getStateDescendant('select.idle').handleDoubleClickOnCanvas = () => void null;
|
||||
|
||||
registerPropagators(editor, [
|
||||
ChangePropagator,
|
||||
ClickPropagator,
|
||||
TickPropagator,
|
||||
SpatialPropagator,
|
||||
])
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import {
|
||||
DefaultMainMenu,
|
||||
TldrawUiMenuItem,
|
||||
Editor,
|
||||
TLContent,
|
||||
DefaultMainMenuContent,
|
||||
useEditor,
|
||||
useExportAs,
|
||||
} from "tldraw";
|
||||
|
||||
export function CustomMainMenu() {
|
||||
const editor = useEditor()
|
||||
const exportAs = useExportAs()
|
||||
|
||||
const importJSON = (editor: Editor) => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = ".json";
|
||||
input.onchange = (event) => {
|
||||
const file = (event.target as HTMLInputElement).files?.[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
if (typeof event.target.result !== 'string') {
|
||||
return
|
||||
}
|
||||
const jsonData = JSON.parse(event.target.result) as TLContent
|
||||
editor.putContentOntoCurrentPage(jsonData, { select: true })
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
const exportJSON = (editor: Editor) => {
|
||||
const exportName = `props-${Math.round(+new Date() / 1000).toString().slice(5)}`
|
||||
exportAs(Array.from(editor.getCurrentPageShapeIds()), 'json', exportName)
|
||||
};
|
||||
|
||||
return (
|
||||
<DefaultMainMenu>
|
||||
<DefaultMainMenuContent />
|
||||
<TldrawUiMenuItem
|
||||
id="export"
|
||||
label="Export JSON"
|
||||
icon="external-link"
|
||||
readonlyOk
|
||||
onSelect={() => exportJSON(editor)}
|
||||
/>
|
||||
<TldrawUiMenuItem
|
||||
id="import"
|
||||
label="Import JSON"
|
||||
icon="external-link"
|
||||
readonlyOk
|
||||
onSelect={() => importJSON(editor)}
|
||||
/>
|
||||
</DefaultMainMenu>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
export class DeltaTime {
|
||||
private static lastTime = Date.now()
|
||||
private static initialized = false
|
||||
private static _dt = 0
|
||||
|
||||
static get dt(): number {
|
||||
if (!DeltaTime.initialized) {
|
||||
DeltaTime.lastTime = Date.now()
|
||||
DeltaTime.initialized = true
|
||||
window.requestAnimationFrame(DeltaTime.tick)
|
||||
return 0
|
||||
}
|
||||
const clamp = (min: number, max: number, value: number) => Math.min(max, Math.max(min, value))
|
||||
return clamp(0, 100, DeltaTime._dt)
|
||||
}
|
||||
|
||||
static tick(nowish) {
|
||||
DeltaTime._dt = nowish - DeltaTime.lastTime
|
||||
DeltaTime.lastTime = nowish
|
||||
|
||||
window.requestAnimationFrame(DeltaTime.tick)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import { SpatialIndex } from "@/SpatialIndex"
|
||||
import { Editor, TLShape, TLShapeId, VecLike, polygonsIntersect } from "tldraw"
|
||||
|
||||
export class Geo {
|
||||
editor: Editor
|
||||
spatialIndex: SpatialIndex
|
||||
constructor(editor: Editor) {
|
||||
this.editor = editor
|
||||
this.spatialIndex = new SpatialIndex(editor)
|
||||
}
|
||||
intersects(shape: TLShape | TLShapeId): boolean {
|
||||
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
||||
if (!id) return false
|
||||
const sourceTransform = this.editor.getShapePageTransform(id)
|
||||
const sourceGeo = this.editor.getShapeGeometry(id)
|
||||
const sourcePagespace = sourceTransform.applyToPoints(sourceGeo.vertices)
|
||||
const sourceBounds = this.editor.getShapePageBounds(id)
|
||||
|
||||
const shapesInBounds = this.spatialIndex.getShapeIdsInsideBounds(sourceBounds)
|
||||
for (const boundsShapeId of shapesInBounds) {
|
||||
if (boundsShapeId === id) continue
|
||||
const pageShape = this.editor.getShape(boundsShapeId)
|
||||
if (!pageShape) continue
|
||||
if (pageShape.type === 'arrow') continue
|
||||
const pageShapeGeo = this.editor.getShapeGeometry(pageShape)
|
||||
const pageShapeTransform = this.editor.getShapePageTransform(pageShape)
|
||||
const pageShapePagespace = pageShapeTransform.applyToPoints(pageShapeGeo.vertices)
|
||||
const pageShapeBounds = this.editor.getShapePageBounds(boundsShapeId)
|
||||
if (polygonsIntersect(sourcePagespace, pageShapePagespace) || sourceBounds.contains(pageShapeBounds) || pageShapeBounds.contains(sourceBounds)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
distance(a: TLShape | TLShapeId, b: TLShape | TLShapeId): VecLike {
|
||||
const idA = typeof a === 'string' ? a : a?.id ?? null
|
||||
const idB = typeof b === 'string' ? b : b?.id ?? null
|
||||
if (!idA || !idB) return { x: 0, y: 0 }
|
||||
const shapeA = this.editor.getShape(idA)
|
||||
const shapeB = this.editor.getShape(idB)
|
||||
if (!shapeA || !shapeB) return { x: 0, y: 0 }
|
||||
return { x: shapeA.x - shapeB.x, y: shapeA.y - shapeB.y }
|
||||
}
|
||||
distanceCenter(a: TLShape | TLShapeId, b: TLShape | TLShapeId): VecLike {
|
||||
const idA = typeof a === 'string' ? a : a?.id ?? null
|
||||
const idB = typeof b === 'string' ? b : b?.id ?? null
|
||||
if (!idA || !idB) return { x: 0, y: 0 }
|
||||
const aBounds = this.editor.getShapePageBounds(idA)
|
||||
const bBounds = this.editor.getShapePageBounds(idB)
|
||||
if (!aBounds || !bBounds) return { x: 0, y: 0 }
|
||||
const aCenter = aBounds.center
|
||||
const bCenter = bBounds.center
|
||||
return { x: aCenter.x - bCenter.x, y: aCenter.y - bCenter.y }
|
||||
}
|
||||
getIntersects(shape: TLShape | TLShapeId): TLShape[] {
|
||||
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
||||
if (!id) return []
|
||||
const sourceTransform = this.editor.getShapePageTransform(id)
|
||||
const sourceGeo = this.editor.getShapeGeometry(id)
|
||||
const sourcePagespace = sourceTransform.applyToPoints(sourceGeo.vertices)
|
||||
const sourceBounds = this.editor.getShapePageBounds(id)
|
||||
|
||||
const boundsShapes = this.spatialIndex.getShapeIdsInsideBounds(sourceBounds)
|
||||
const overlaps: TLShape[] = []
|
||||
for (const boundsShapeId of boundsShapes) {
|
||||
if (boundsShapeId === id) continue
|
||||
const pageShape = this.editor.getShape(boundsShapeId)
|
||||
if (!pageShape) continue
|
||||
if (pageShape.type === 'arrow') continue
|
||||
const pageShapeGeo = this.editor.getShapeGeometry(pageShape)
|
||||
const pageShapeTransform = this.editor.getShapePageTransform(pageShape)
|
||||
const pageShapePagespace = pageShapeTransform.applyToPoints(pageShapeGeo.vertices)
|
||||
const pageShapeBounds = this.editor.getShapePageBounds(boundsShapeId)
|
||||
if (polygonsIntersect(sourcePagespace, pageShapePagespace) || sourceBounds.contains(pageShapeBounds) || pageShapeBounds.contains(sourceBounds)) {
|
||||
overlaps.push(pageShape)
|
||||
}
|
||||
}
|
||||
return overlaps
|
||||
}
|
||||
|
||||
contains(shape: TLShape | TLShapeId): boolean {
|
||||
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
||||
if (!id) return false
|
||||
const sourceBounds = this.editor.getShapePageBounds(id)
|
||||
|
||||
const boundsShapes = this.spatialIndex.getShapeIdsInsideBounds(sourceBounds)
|
||||
for (const boundsShapeId of boundsShapes) {
|
||||
if (boundsShapeId === id) continue
|
||||
const pageShape = this.editor.getShape(boundsShapeId)
|
||||
if (!pageShape) continue
|
||||
if (pageShape.type !== 'geo') continue
|
||||
const pageShapeBounds = this.editor.getShapePageBounds(boundsShapeId)
|
||||
if (sourceBounds.contains(pageShapeBounds)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
getContains(shape: TLShape | TLShapeId): TLShape[] {
|
||||
const id = typeof shape === 'string' ? shape : shape?.id ?? null
|
||||
if (!id) return []
|
||||
const sourceBounds = this.editor.getShapePageBounds(id)
|
||||
|
||||
const boundsShapes = this.spatialIndex.getShapeIdsInsideBounds(sourceBounds)
|
||||
const contains: TLShape[] = []
|
||||
for (const boundsShapeId of boundsShapes) {
|
||||
if (boundsShapeId === id) continue
|
||||
const pageShape = this.editor.getShape(boundsShapeId)
|
||||
if (!pageShape) continue
|
||||
if (pageShape.type !== 'geo') continue
|
||||
const pageShapeBounds = this.editor.getShapePageBounds(boundsShapeId)
|
||||
if (sourceBounds.contains(pageShapeBounds)) {
|
||||
contains.push(pageShape)
|
||||
}
|
||||
}
|
||||
return contains
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import { RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
|
||||
import { TLPageId, TLShapeId, isShape, isShapeId } from '@tldraw/tlschema'
|
||||
import RBush from 'rbush'
|
||||
import { Box, Editor } from 'tldraw'
|
||||
|
||||
type Element = {
|
||||
minX: number
|
||||
minY: number
|
||||
maxX: number
|
||||
maxY: number
|
||||
id: TLShapeId
|
||||
}
|
||||
|
||||
export class SpatialIndex {
|
||||
private readonly spatialIndex: ReturnType<typeof this.createSpatialIndex>
|
||||
private lastPageId: TLPageId | null = null
|
||||
private shapesInTree: Map<TLShapeId, Element>
|
||||
private rBush: RBush<Element>
|
||||
|
||||
constructor(private editor: Editor) {
|
||||
this.spatialIndex = this.createSpatialIndex()
|
||||
this.shapesInTree = new Map<TLShapeId, Element>()
|
||||
this.rBush = new RBush<Element>()
|
||||
}
|
||||
|
||||
private addElement(id: TLShapeId, a: Element[], existingBounds?: Box) {
|
||||
const e = this.getElement(id, existingBounds)
|
||||
if (!e) return
|
||||
a.push(e)
|
||||
this.shapesInTree.set(id, e)
|
||||
}
|
||||
|
||||
private getElement(id: TLShapeId, existingBounds?: Box): Element | null {
|
||||
const bounds = existingBounds ?? this.editor.getShapeMaskedPageBounds(id)
|
||||
if (!bounds) return null
|
||||
return {
|
||||
minX: bounds.minX,
|
||||
minY: bounds.minY,
|
||||
maxX: bounds.maxX,
|
||||
maxY: bounds.maxY,
|
||||
id,
|
||||
}
|
||||
}
|
||||
|
||||
private fromScratch(lastComputedEpoch: number) {
|
||||
this.lastPageId = this.editor.getCurrentPageId()
|
||||
this.shapesInTree = new Map<TLShapeId, Element>()
|
||||
const elementsToAdd: Element[] = []
|
||||
|
||||
this.editor.getCurrentPageShapeIds().forEach((id) => {
|
||||
this.addElement(id, elementsToAdd)
|
||||
})
|
||||
|
||||
this.rBush = new RBush<Element>().load(elementsToAdd)
|
||||
|
||||
return lastComputedEpoch
|
||||
}
|
||||
|
||||
private createSpatialIndex() {
|
||||
const shapeHistory = this.editor.store.query.filterHistory('shape')
|
||||
|
||||
return computed<number>('spatialIndex', (prevValue, lastComputedEpoch) => {
|
||||
if (isUninitialized(prevValue)) {
|
||||
return this.fromScratch(lastComputedEpoch)
|
||||
}
|
||||
|
||||
const diff = shapeHistory.getDiffSince(lastComputedEpoch)
|
||||
if (diff === RESET_VALUE) {
|
||||
return this.fromScratch(lastComputedEpoch)
|
||||
}
|
||||
|
||||
const currentPageId = this.editor.getCurrentPageId()
|
||||
if (!this.lastPageId || this.lastPageId !== currentPageId) {
|
||||
return this.fromScratch(lastComputedEpoch)
|
||||
}
|
||||
|
||||
let isDirty = false
|
||||
for (const changes of diff) {
|
||||
const elementsToAdd: Element[] = []
|
||||
for (const record of Object.values(changes.added)) {
|
||||
if (isShape(record)) {
|
||||
this.addElement(record.id, elementsToAdd)
|
||||
}
|
||||
}
|
||||
|
||||
for (const [_from, to] of Object.values(changes.updated)) {
|
||||
if (isShape(to)) {
|
||||
const currentElement = this.shapesInTree.get(to.id)
|
||||
const newBounds = this.editor.getShapeMaskedPageBounds(to.id)
|
||||
if (currentElement) {
|
||||
if (
|
||||
newBounds?.minX === currentElement.minX &&
|
||||
newBounds.minY === currentElement.minY &&
|
||||
newBounds.maxX === currentElement.maxX &&
|
||||
newBounds.maxY === currentElement.maxY
|
||||
) {
|
||||
continue
|
||||
}
|
||||
this.shapesInTree.delete(to.id)
|
||||
this.rBush.remove(currentElement)
|
||||
isDirty = true
|
||||
}
|
||||
this.addElement(to.id, elementsToAdd, newBounds)
|
||||
}
|
||||
}
|
||||
if (elementsToAdd.length) {
|
||||
this.rBush.load(elementsToAdd)
|
||||
isDirty = true
|
||||
}
|
||||
for (const id of Object.keys(changes.removed)) {
|
||||
if (isShapeId(id)) {
|
||||
const currentElement = this.shapesInTree.get(id)
|
||||
if (currentElement) {
|
||||
this.shapesInTree.delete(id)
|
||||
this.rBush.remove(currentElement)
|
||||
isDirty = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return isDirty ? lastComputedEpoch : prevValue
|
||||
})
|
||||
}
|
||||
|
||||
private _getVisibleShapes() {
|
||||
return computed<Set<TLShapeId>>('visible shapes', (prevValue) => {
|
||||
// Make sure the spatial index is up to date
|
||||
const _index = this.spatialIndex.get()
|
||||
const newValue = this.rBush.search(this.editor.getViewportPageBounds()).map((s) => s.id)
|
||||
if (isUninitialized(prevValue)) {
|
||||
return new Set(newValue)
|
||||
}
|
||||
const isSame = prevValue.size === newValue.length && newValue.every((id) => prevValue.has(id))
|
||||
return isSame ? prevValue : new Set(newValue)
|
||||
})
|
||||
}
|
||||
|
||||
getVisibleShapes() {
|
||||
return this._getVisibleShapes().get()
|
||||
}
|
||||
|
||||
_getNotVisibleShapes() {
|
||||
return computed<Set<TLShapeId>>('not visible shapes', (prevValue) => {
|
||||
const visibleShapes = this._getVisibleShapes().get()
|
||||
const pageShapes = this.editor.getCurrentPageShapeIds()
|
||||
const nonVisibleShapes = [...pageShapes].filter((id) => !visibleShapes.has(id))
|
||||
if (isUninitialized(prevValue)) return new Set(nonVisibleShapes)
|
||||
const isSame =
|
||||
prevValue.size === nonVisibleShapes.length &&
|
||||
nonVisibleShapes.every((id) => prevValue.has(id))
|
||||
return isSame ? prevValue : new Set(nonVisibleShapes)
|
||||
})
|
||||
}
|
||||
|
||||
getNotVisibleShapes() {
|
||||
return this._getNotVisibleShapes().get()
|
||||
}
|
||||
|
||||
getShapeIdsInsideBounds(bounds: Box) {
|
||||
// Make sure the spatial index is up to date
|
||||
const _index = this.spatialIndex.get()
|
||||
return this.rBush.search(bounds).map((s) => s.id)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Inter", sans-serif;
|
||||
overscroll-behavior: none;
|
||||
touch-action: none;
|
||||
min-height: 100vh;
|
||||
font-size: 16px;
|
||||
/* mobile viewport bug fix */
|
||||
min-height: -webkit-fill-available;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tldraw__editor {
|
||||
position: fixed;
|
||||
inset: 0px;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tl-user-handles {
|
||||
z-index: 101;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
import 'tldraw/tldraw.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
|
||||
<App />
|
||||
|
||||
)
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
import { DeltaTime } from "@/DeltaTime"
|
||||
import { Geo } from "@/Geo"
|
||||
import { Edge, getArrowsFromShape, getEdge } from "@/tlgraph"
|
||||
import { isShapeOfType, updateProps } from "@/utils"
|
||||
import { Editor, TLArrowShape, TLBinding, TLGroupShape, TLShape, TLShapeId } from "tldraw"
|
||||
|
||||
type Prefix = 'click' | 'tick' | 'geo' | ''
|
||||
|
||||
function isPropagatorOfType(arrow: TLShape, prefix: Prefix) {
|
||||
if (!isShapeOfType<TLArrowShape>(arrow, 'arrow')) return false
|
||||
const regex = new RegExp(`^\\s*${prefix}\\s*\\{`)
|
||||
return regex.test(arrow.props.text)
|
||||
}
|
||||
function isExpandedPropagatorOfType(arrow: TLShape, prefix: Prefix) {
|
||||
if (!isShapeOfType<TLArrowShape>(arrow, 'arrow')) return false
|
||||
const regex = new RegExp(`^\\s*${prefix}\\s*\\(\\)\\s*\\{`)
|
||||
return regex.test(arrow.props.text)
|
||||
}
|
||||
|
||||
class ArrowFunctionCache {
|
||||
private cache: Map<string, Function | null> = new Map<string, Function | null>()
|
||||
|
||||
/** returns undefined if the function could not be found or created */
|
||||
get(editor: Editor, edge: Edge, prefix: Prefix): Function | undefined {
|
||||
if (this.cache.has(edge.arrowId)) {
|
||||
return this.cache.get(edge.arrowId)
|
||||
}
|
||||
console.log('creating func because it didnt exist')
|
||||
return this.set(editor, edge, prefix)
|
||||
}
|
||||
/** returns undefined if the function could not be created */
|
||||
set(editor: Editor, edge: Edge, prefix: Prefix): Function | undefined {
|
||||
try {
|
||||
const arrowShape = editor.getShape(edge.arrowId)
|
||||
if (!arrowShape) throw new Error('Arrow shape not found')
|
||||
const textWithoutPrefix = edge.text.replace(prefix, '')
|
||||
const isExpanded = isExpandedPropagatorOfType(arrowShape, prefix)
|
||||
const body = isExpanded ? textWithoutPrefix.trim().replace(/^\s*\(\)\s*{|}$/g, '') : `
|
||||
const mapping = ${textWithoutPrefix}
|
||||
editor.updateShape(_unpack({...to, ...mapping}))
|
||||
`
|
||||
const func = new Function('editor', 'from', 'to', 'G', 'bounds', 'dt', '_unpack', body);
|
||||
this.cache.set(edge.arrowId, func)
|
||||
return func
|
||||
} catch (error) {
|
||||
this.cache.set(edge.arrowId, null)
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
delete(edge: Edge): void {
|
||||
this.cache.delete(edge.arrowId)
|
||||
}
|
||||
}
|
||||
|
||||
const packShape = (shape: TLShape) => {
|
||||
return {
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
x: shape.x,
|
||||
y: shape.y,
|
||||
rotation: shape.rotation,
|
||||
...shape.props,
|
||||
m: shape.meta,
|
||||
}
|
||||
}
|
||||
|
||||
const unpackShape = (shape: any) => {
|
||||
const { id, type, x, y, rotation, m, ...props } = shape
|
||||
const cast = (prop: any, constructor: (value: any) => any) => {
|
||||
return prop !== undefined ? constructor(prop) : undefined;
|
||||
};
|
||||
return {
|
||||
id,
|
||||
type,
|
||||
x: Number(x),
|
||||
y: Number(y),
|
||||
rotation: Number(rotation),
|
||||
props: {
|
||||
...props,
|
||||
text: cast(props.text, String),
|
||||
},
|
||||
meta: m,
|
||||
}
|
||||
}
|
||||
|
||||
function setArrowColor(editor: Editor, arrow: TLArrowShape, color: TLArrowShape['props']['color']): void {
|
||||
editor.updateShape({
|
||||
...arrow,
|
||||
props: {
|
||||
...arrow.props,
|
||||
color: color,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function registerPropagators(editor: Editor, propagators: (new (editor: Editor) => Propagator)[]) {
|
||||
const _propagators = propagators.map((PropagatorClass) => new PropagatorClass(editor))
|
||||
|
||||
for (const prop of _propagators) {
|
||||
for (const shape of editor.getCurrentPageShapes()) {
|
||||
if (isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
||||
prop.onArrowChange(editor, shape)
|
||||
}
|
||||
}
|
||||
editor.sideEffects.registerAfterChangeHandler<"shape">("shape", (_, next) => {
|
||||
if (isShapeOfType<TLGroupShape>(next, 'group')) {
|
||||
const childIds = editor.getSortedChildIdsForParent(next.id)
|
||||
for (const childId of childIds) {
|
||||
const child = editor.getShape(childId)
|
||||
prop.afterChangeHandler?.(editor, child)
|
||||
}
|
||||
return
|
||||
}
|
||||
prop.afterChangeHandler?.(editor, next)
|
||||
if (isShapeOfType<TLArrowShape>(next, 'arrow')) {
|
||||
prop.onArrowChange(editor, next)
|
||||
}
|
||||
})
|
||||
|
||||
function updateOnBindingChange(editor: Editor, binding: TLBinding) {
|
||||
if (binding.type !== 'arrow') return
|
||||
const arrow = editor.getShape(binding.fromId)
|
||||
if (!arrow) return
|
||||
if (!isShapeOfType<TLArrowShape>(arrow, 'arrow')) return
|
||||
prop.onArrowChange(editor, arrow)
|
||||
}
|
||||
|
||||
// TODO: remove this when binding creation
|
||||
editor.sideEffects.registerAfterCreateHandler<"binding">("binding", (binding) => {
|
||||
updateOnBindingChange(editor, binding)
|
||||
})
|
||||
// TODO: remove this when binding creation
|
||||
editor.sideEffects.registerAfterDeleteHandler<"binding">("binding", (binding) => {
|
||||
updateOnBindingChange(editor, binding)
|
||||
})
|
||||
|
||||
editor.on('event', (event) => {
|
||||
prop.eventHandler?.(event)
|
||||
})
|
||||
editor.on('tick', () => {
|
||||
prop.tickHandler?.()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: separate generic propagator setup from scope registration
|
||||
// TODO: handle cycles
|
||||
export abstract class Propagator {
|
||||
abstract prefix: Prefix
|
||||
protected listenerArrows: Set<TLShapeId> = new Set<TLShapeId>()
|
||||
protected listenerShapes: Set<TLShapeId> = new Set<TLShapeId>()
|
||||
protected arrowFunctionCache: ArrowFunctionCache = new ArrowFunctionCache()
|
||||
protected editor: Editor
|
||||
protected geo: Geo
|
||||
protected validateOnArrowChange: boolean = false
|
||||
|
||||
constructor(editor: Editor) {
|
||||
this.editor = editor
|
||||
this.geo = new Geo(editor)
|
||||
}
|
||||
|
||||
/** function to check if any listeners need to be added/removed
|
||||
* called on mount and when an arrow changes
|
||||
*/
|
||||
onArrowChange(editor: Editor, arrow: TLArrowShape): void {
|
||||
const edge = getEdge(arrow, editor)
|
||||
if (!edge) return
|
||||
|
||||
const isPropagator = isPropagatorOfType(arrow, this.prefix) || isExpandedPropagatorOfType(arrow, this.prefix)
|
||||
|
||||
if (isPropagator) {
|
||||
if (this.validateOnArrowChange && !this.propagate(editor, arrow.id)) {
|
||||
this.removeListener(arrow.id, edge)
|
||||
return
|
||||
}
|
||||
this.addListener(arrow.id, edge)
|
||||
|
||||
// TODO: find a way to do this properly so we can run arrow funcs on change without chaos...
|
||||
// this.arrowFunc(editor, arrow.id)
|
||||
} else {
|
||||
this.removeListener(arrow.id, edge)
|
||||
}
|
||||
}
|
||||
|
||||
private addListener(arrowId: TLShapeId, edge: Edge): void {
|
||||
this.listenerArrows.add(arrowId)
|
||||
this.listenerShapes.add(edge.from)
|
||||
this.listenerShapes.add(edge.to)
|
||||
this.arrowFunctionCache.set(this.editor, edge, this.prefix)
|
||||
}
|
||||
|
||||
private removeListener(arrowId: TLShapeId, edge: Edge): void {
|
||||
this.listenerArrows.delete(arrowId)
|
||||
this.arrowFunctionCache.delete(edge)
|
||||
}
|
||||
|
||||
/** the function to be called when side effect / event is triggered */
|
||||
propagate(editor: Editor, arrow: TLShapeId): boolean {
|
||||
const edge = getEdge(editor.getShape(arrow), editor)
|
||||
if (!edge) return
|
||||
|
||||
const arrowShape = editor.getShape(arrow) as TLArrowShape
|
||||
const fromShape = editor.getShape(edge.from)
|
||||
const toShape = editor.getShape(edge.to)
|
||||
const fromShapePacked = packShape(fromShape)
|
||||
const toShapePacked = packShape(toShape)
|
||||
const bounds = (shape: TLShape) => editor.getShapePageBounds(shape.id)
|
||||
|
||||
try {
|
||||
const func = this.arrowFunctionCache.get(editor, edge, this.prefix)
|
||||
const result = func(editor, fromShapePacked, toShapePacked, this.geo, bounds, DeltaTime.dt, unpackShape);
|
||||
if (result) {
|
||||
editor.updateShape(unpackShape({ ...toShapePacked, ...result }))
|
||||
}
|
||||
|
||||
setArrowColor(editor, arrowShape, 'black')
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
setArrowColor(editor, arrowShape, 'orange')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/** called after every shape change */
|
||||
afterChangeHandler?(editor: Editor, next: TLShape): void
|
||||
/** called on every editor event */
|
||||
eventHandler?(event: any): void
|
||||
/** called every tick */
|
||||
tickHandler?(): void
|
||||
}
|
||||
|
||||
export class ClickPropagator extends Propagator {
|
||||
prefix: Prefix = 'click'
|
||||
|
||||
eventHandler(event: any): void {
|
||||
if (event.type !== 'pointer' || event.name !== 'pointer_down') return;
|
||||
const shapeAtPoint = this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, { filter: (shape) => shape.type === 'geo' });
|
||||
if (!shapeAtPoint) return
|
||||
if (!this.listenerShapes.has(shapeAtPoint.id)) return
|
||||
const edgesFromHovered = getArrowsFromShape(this.editor, shapeAtPoint.id)
|
||||
|
||||
const visited = new Set<TLShapeId>()
|
||||
for (const edge of edgesFromHovered) {
|
||||
if (this.listenerArrows.has(edge) && !visited.has(edge)) {
|
||||
this.propagate(this.editor, edge)
|
||||
visited.add(edge)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class ChangePropagator extends Propagator {
|
||||
prefix: Prefix = ''
|
||||
|
||||
afterChangeHandler(editor: Editor, next: TLShape): void {
|
||||
if (this.listenerShapes.has(next.id)) {
|
||||
const arrowsFromShape = getArrowsFromShape(editor, next.id)
|
||||
for (const arrow of arrowsFromShape) {
|
||||
if (this.listenerArrows.has(arrow)) {
|
||||
const bindings = editor.getBindingsInvolvingShape(arrow)
|
||||
if (bindings.length !== 2) continue
|
||||
// don't run func if its pointing to itself to avoid change-induced recursion error
|
||||
if (bindings[0].toId === bindings[1].toId) continue
|
||||
this.propagate(editor, arrow)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class TickPropagator extends Propagator {
|
||||
prefix: Prefix = 'tick'
|
||||
validateOnArrowChange = true
|
||||
|
||||
tickHandler(): void {
|
||||
for (const arrow of this.listenerArrows) {
|
||||
this.propagate(this.editor, arrow)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class SpatialPropagator extends Propagator {
|
||||
prefix: Prefix = 'geo'
|
||||
|
||||
// TODO: make this smarter, and scale sublinearly
|
||||
afterChangeHandler(editor: Editor, next: TLShape): void {
|
||||
if (next.type === 'arrow') return
|
||||
for (const arrowId of this.listenerArrows) {
|
||||
this.propagate(editor, arrowId)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import { isShapeOfType } from "@/utils";
|
||||
import { Editor, TLArrowBinding, TLArrowShape, TLShape, TLShapeId } from "tldraw";
|
||||
|
||||
export interface Edge {
|
||||
arrowId: TLShapeId
|
||||
from: TLShapeId
|
||||
to: TLShapeId
|
||||
text?: string
|
||||
}
|
||||
|
||||
export interface Graph {
|
||||
nodes: TLShapeId[]
|
||||
edges: Edge[]
|
||||
}
|
||||
|
||||
export function getEdge(shape: TLShape | undefined, editor: Editor): Edge | undefined {
|
||||
if (!shape || !isShapeOfType<TLArrowShape>(shape, 'arrow')) return undefined
|
||||
const bindings = editor.getBindingsInvolvingShape<TLArrowBinding>(shape.id)
|
||||
if (!bindings || bindings.length !== 2) return undefined
|
||||
if (bindings[0].props.terminal === "end") {
|
||||
return {
|
||||
arrowId: shape.id,
|
||||
from: bindings[1].toId,
|
||||
to: bindings[0].toId,
|
||||
text: shape.props.text
|
||||
}
|
||||
}
|
||||
return {
|
||||
arrowId: shape.id,
|
||||
from: bindings[0].toId,
|
||||
to: bindings[1].toId,
|
||||
text: shape.props.text
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the graph(s) of edges and nodes from a list of shapes
|
||||
*/
|
||||
export function getGraph(shapes: TLShape[], editor: Editor): Graph {
|
||||
const nodes: Set<TLShapeId> = new Set<TLShapeId>()
|
||||
const edges: Edge[] = []
|
||||
|
||||
for (const shape of shapes) {
|
||||
const edge = getEdge(shape, editor)
|
||||
if (edge) {
|
||||
edges.push({
|
||||
arrowId: edge.arrowId,
|
||||
from: edge.from,
|
||||
to: edge.to,
|
||||
text: edge.text
|
||||
})
|
||||
nodes.add(edge.from)
|
||||
nodes.add(edge.to)
|
||||
}
|
||||
}
|
||||
|
||||
return { nodes: Array.from(nodes), edges }
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the start and end nodes of a topologically sorted graph
|
||||
*/
|
||||
export function sortGraph(graph: Graph): { startNodes: TLShapeId[], endNodes: TLShapeId[] } {
|
||||
const targetNodes = new Set<TLShapeId>(graph.edges.map(e => e.to));
|
||||
const sourceNodes = new Set<TLShapeId>(graph.edges.map(e => e.from));
|
||||
|
||||
const startNodes = [];
|
||||
const endNodes = [];
|
||||
|
||||
for (const node of graph.nodes) {
|
||||
if (sourceNodes.has(node) && !targetNodes.has(node)) {
|
||||
startNodes.push(node);
|
||||
} else if (targetNodes.has(node) && !sourceNodes.has(node)) {
|
||||
endNodes.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
return { startNodes, endNodes };
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the arrows starting from the given shape
|
||||
*/
|
||||
export function getArrowsFromShape(editor: Editor, shapeId: TLShapeId): TLShapeId[] {
|
||||
const bindings = editor.getBindingsToShape<TLArrowBinding>(shapeId, 'arrow')
|
||||
return bindings.filter(edge => edge.props.terminal === 'start').map(edge => edge.fromId)
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the arrows ending at the given shape
|
||||
*/
|
||||
export function getArrowsToShape(editor: Editor, shapeId: TLShapeId): TLShapeId[] {
|
||||
const bindings = editor.getBindingsToShape<TLArrowBinding>(shapeId, 'arrow')
|
||||
return bindings.filter(edge => edge.props.terminal === 'end').map(edge => edge.fromId)
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the arrows which share the same start shape as the given arrow
|
||||
*/
|
||||
export function getSiblingArrowIds(editor: Editor, arrow: TLShape): TLShapeId[] {
|
||||
if (arrow.type !== 'arrow') return [];
|
||||
|
||||
const bindings = editor.getBindingsInvolvingShape<TLArrowBinding>(arrow.id);
|
||||
if (!bindings || bindings.length !== 2) return [];
|
||||
|
||||
const startShapeId = bindings.find(binding => binding.props.terminal === 'start')?.toId;
|
||||
if (!startShapeId) return [];
|
||||
|
||||
const siblingBindings = editor.getBindingsToShape<TLArrowBinding>(startShapeId, 'arrow');
|
||||
const siblingArrows = siblingBindings
|
||||
.filter(binding => binding.props.terminal === 'start' && binding.fromId !== arrow.id)
|
||||
.map(binding => binding.fromId);
|
||||
|
||||
return siblingArrows;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Editor, TLShape, TLShapePartial } from "tldraw";
|
||||
|
||||
/**
|
||||
* @returns true if the shape is of the given type
|
||||
* @example
|
||||
* ```ts
|
||||
* isShapeOfType<TLArrowShape>(shape, 'arrow')
|
||||
* ```
|
||||
*/
|
||||
export function isShapeOfType<T extends TLShape>(shape: TLShape, type: T['type']): shape is T {
|
||||
return shape.type === type;
|
||||
}
|
||||
|
||||
export function updateProps<T extends TLShape>(editor: Editor, shape: T, props: Partial<T['props']>) {
|
||||
editor.updateShape({
|
||||
...shape,
|
||||
props: {
|
||||
...shape.props,
|
||||
...props
|
||||
},
|
||||
} as TLShapePartial)
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// /// <reference types="vite/client" />
|
||||
|
||||
// interface ImportMetaEnv {
|
||||
// readonly MODE: string;
|
||||
// // Add other environment variables here if needed
|
||||
// }
|
||||
|
||||
// interface ImportMeta {
|
||||
// readonly env: ImportMetaEnv;
|
||||
// }
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2021",
|
||||
"composite": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src","vite.config.ts"],
|
||||
"types": ["vite/client"]
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { resolve } from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue