kopia lustrzana https://github.com/Tldraw/Tldraw
69 wiersze
1.6 KiB
TypeScript
69 wiersze
1.6 KiB
TypeScript
import { StateNode, TLArrowShape, TLEventHandlers, TLPointerEventInfo } from '@tldraw/editor'
|
|
|
|
export class PointingHandle extends StateNode {
|
|
static override id = 'pointing_handle'
|
|
|
|
info = {} as TLPointerEventInfo & { target: 'handle' }
|
|
|
|
override onEnter = (info: TLPointerEventInfo & { target: 'handle' }) => {
|
|
this.info = info
|
|
|
|
const { shape } = info
|
|
if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
|
|
const initialTerminal = shape.props[info.handle.id as 'start' | 'end']
|
|
|
|
if (initialTerminal?.type === 'binding') {
|
|
this.editor.setHintingShapes([initialTerminal.boundShapeId])
|
|
}
|
|
}
|
|
|
|
this.editor.updateInstanceState(
|
|
{ cursor: { type: 'grabbing', rotation: 0 } },
|
|
{ ephemeral: true }
|
|
)
|
|
}
|
|
|
|
override onExit = () => {
|
|
this.editor.setHintingShapes([])
|
|
this.editor.updateInstanceState(
|
|
{ cursor: { type: 'default', rotation: 0 } },
|
|
{ ephemeral: true }
|
|
)
|
|
}
|
|
|
|
override onPointerUp: TLEventHandlers['onPointerUp'] = () => {
|
|
this.parent.transition('idle', this.info)
|
|
}
|
|
|
|
override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
|
|
if (this.editor.inputs.isDragging) {
|
|
this.startDraggingHandle()
|
|
}
|
|
}
|
|
|
|
override onLongPress: TLEventHandlers['onLongPress'] = () => {
|
|
this.startDraggingHandle()
|
|
}
|
|
|
|
private startDraggingHandle() {
|
|
if (this.editor.getInstanceState().isReadonly) return
|
|
this.parent.transition('dragging_handle', this.info)
|
|
}
|
|
|
|
override onCancel: TLEventHandlers['onCancel'] = () => {
|
|
this.cancel()
|
|
}
|
|
|
|
override onComplete: TLEventHandlers['onComplete'] = () => {
|
|
this.cancel()
|
|
}
|
|
|
|
override onInterrupt = () => {
|
|
this.cancel()
|
|
}
|
|
|
|
private cancel() {
|
|
this.parent.transition('idle')
|
|
}
|
|
}
|