From 5345f7312db15e0b3ffd30c4c18649f3e758ca6d Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Wed, 20 Mar 2024 17:09:26 +0000 Subject: [PATCH] delay --- packages/editor/src/lib/utils/debug-flags.ts | 3 + packages/tldraw/api-report.md | 6 + packages/tldraw/api/api.json | 117 ++++++++++++++++++ .../src/lib/shapes/note/NoteShapeUtil.tsx | 79 ++++++++++-- .../SelectTool/childStates/PointingShape.ts | 2 +- 5 files changed, 198 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/lib/utils/debug-flags.ts b/packages/editor/src/lib/utils/debug-flags.ts index c2b9e71eb..bd3b24916 100644 --- a/packages/editor/src/lib/utils/debug-flags.ts +++ b/packages/editor/src/lib/utils/debug-flags.ts @@ -19,6 +19,9 @@ export const featureFlags: Record> = { floatingStickies: createDebugValue('floatingStickies', { defaults: { staging: true, development: true, all: false }, }), + delayedFloatingStickies: createDebugValue('delayedFloatingStickies', { + defaults: { staging: true, development: true, all: false }, + }), } /** @internal */ diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index b331e30bf..b7d2765ee 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -1152,8 +1152,14 @@ export class NoteShapeUtil extends ShapeUtil { typeName: "shape"; } | undefined; // (undocumented) + onClick: (shape: TLNoteShape) => void; + // (undocumented) onEditEnd: TLOnEditEndHandler; // (undocumented) + onTranslateEnd: (shape: TLNoteShape) => void; + // (undocumented) + onTranslateStart: (shape: TLNoteShape) => void; + // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index 912bdaba1..6ee8d181d 100644 --- a/packages/tldraw/api/api.json +++ b/packages/tldraw/api/api.json @@ -13365,6 +13365,45 @@ "isProtected": false, "isAbstract": false }, + { + "kind": "Property", + "canonicalReference": "tldraw!NoteShapeUtil#onClick:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onClick: " + }, + { + "kind": "Content", + "text": "(shape: " + }, + { + "kind": "Reference", + "text": "TLNoteShape", + "canonicalReference": "@tldraw/tlschema!TLNoteShape:type" + }, + { + "kind": "Content", + "text": ") => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "onClick", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 4 + }, + "isStatic": false, + "isProtected": false, + "isAbstract": false + }, { "kind": "Property", "canonicalReference": "tldraw!NoteShapeUtil#onEditEnd:member", @@ -13409,6 +13448,84 @@ "isProtected": false, "isAbstract": false }, + { + "kind": "Property", + "canonicalReference": "tldraw!NoteShapeUtil#onTranslateEnd:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onTranslateEnd: " + }, + { + "kind": "Content", + "text": "(shape: " + }, + { + "kind": "Reference", + "text": "TLNoteShape", + "canonicalReference": "@tldraw/tlschema!TLNoteShape:type" + }, + { + "kind": "Content", + "text": ") => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "onTranslateEnd", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 4 + }, + "isStatic": false, + "isProtected": false, + "isAbstract": false + }, + { + "kind": "Property", + "canonicalReference": "tldraw!NoteShapeUtil#onTranslateStart:member", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "onTranslateStart: " + }, + { + "kind": "Content", + "text": "(shape: " + }, + { + "kind": "Reference", + "text": "TLNoteShape", + "canonicalReference": "@tldraw/tlschema!TLNoteShape:type" + }, + { + "kind": "Content", + "text": ") => void" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": false, + "isOptional": false, + "releaseTag": "Public", + "name": "onTranslateStart", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 4 + }, + "isStatic": false, + "isProtected": false, + "isAbstract": false + }, { "kind": "Property", "canonicalReference": "tldraw!NoteShapeUtil.props:member", diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index 879c5066c..012e5f923 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -68,19 +68,48 @@ export class NoteShapeUtil extends ShapeUtil { const adjustedColor = color === 'black' ? 'yellow' : color // eslint-disable-next-line react-hooks/rules-of-hooks - const [timeOfLastPointerDown, setTimeOfLastPointerDown] = useState(0) + const [timeoutId, setTimeoutId] = useState(null) + + // held together with sticky tape for prototype + // eslint-disable-next-line react-hooks/rules-of-hooks + const [isDraggingForRealThough, setIsDraggingForRealThough] = useState(false) const isDragging = - this.editor.isInAny('select.translating', 'select.pointing_shape') && - this.editor.getSelectedShapeIds().includes(shape.id) && - performance.now() - timeOfLastPointerDown > 100 + (this.editor.isIn('select.translating') || + (this.editor.isInAny('select.pointing_shape') && isDraggingForRealThough)) && + this.editor.getSelectedShapeIds().includes(shape.id) const pageRotation = this.editor.getShapePageTransform(shape)!.rotation() const handlePointerDown = () => { - setTimeOfLastPointerDown(performance.now()) - if (featureFlags.bringStickiesToFront.get()) { - this.editor.bringToFront([shape.id]) + if (timeoutId) { + clearTimeout(timeoutId) + } + setIsDraggingForRealThough(false) + + if (featureFlags.delayedFloatingStickies.get()) { + setTimeoutId( + setTimeout(() => { + setIsDraggingForRealThough(true) + if (this.editor.isInAny('select.translating', 'select.pointing_shape')) { + if (featureFlags.bringStickiesToFront.get()) { + this.editor.bringToFront([shape.id]) + } + this.editor.updateShape({ + id: shape.id, + type: shape.type, + meta: { + isDragging: true, + }, + }) + } + }, 200) + ) + } else { + setIsDraggingForRealThough(true) + if (featureFlags.bringStickiesToFront.get()) { + this.editor.bringToFront([shape.id]) + } } } @@ -139,14 +168,48 @@ export class NoteShapeUtil extends ShapeUtil { ) } + override onClick = (shape: TLNoteShape) => { + this.editor.updateShape({ + id: shape.id, + type: shape.type, + meta: { + isDragging: false, + }, + }) + } + + override onTranslateStart = (shape: TLNoteShape) => { + this.editor.bringToFront([shape.id]) + this.editor.updateShape({ + id: shape.id, + type: shape.type, + meta: { + isDragging: true, + }, + }) + } + + override onTranslateEnd = (shape: TLNoteShape) => { + this.editor.updateShape({ + id: shape.id, + type: shape.type, + meta: { + isDragging: false, + }, + }) + } + indicator(shape: TLNoteShape) { if (featureFlags.hideStickyIndicator.get()) { return null } + const isDraggingForRealThough = shape.meta?.isDragging + const isDragging = this.editor.isInAny('select.translating', 'select.pointing_shape') && - this.editor.getSelectedShapeIds().includes(shape.id) + this.editor.getSelectedShapeIds().includes(shape.id) && + (featureFlags.delayedFloatingStickies.get() ? isDraggingForRealThough : true) return (