mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

delay

pull/3208/head
Lu[ke] Wilson 2024-03-20 17:09:26 +00:00
rodzic 8a5a3ff9ba
commit 5345f7312d
5 zmienionych plików z 198 dodań i 9 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
packages/editor/src/lib/utils/debug-flags.ts
Wyświetl plik

@ -19,6 +19,9 @@ export const featureFlags: Record<string, DebugFlag<boolean>> = {
floatingStickies: createDebugValue('floatingStickies', {
defaults: { staging: true, development: true, all: false },
}),
delayedFloatingStickies: createDebugValue('delayedFloatingStickies', {
defaults: { staging: true, development: true, all: false },
}),
}
/** @internal */

6
packages/tldraw/api-report.md
Wyświetl plik

@ -1152,8 +1152,14 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
typeName: "shape";
} | undefined;
// (undocumented)
onClick: (shape: TLNoteShape) => void;
// (undocumented)
onEditEnd: TLOnEditEndHandler<TLNoteShape>;
// (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">;

117
packages/tldraw/api/api.json
Wyświetl plik

@ -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",

79
packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx
Wyświetl plik

@ -68,19 +68,48 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
const adjustedColor = color === 'black' ? 'yellow' : color
// eslint-disable-next-line react-hooks/rules-of-hooks
const [timeOfLastPointerDown, setTimeOfLastPointerDown] = useState(0)
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(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<TLNoteShape> {
)
}
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 (
<rect

2
packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts
Wyświetl plik

@ -30,7 +30,7 @@ export class PointingShape extends StateNode {
if (
// If the shape has an onClick handler
this.editor.getShapeUtil(info.shape).onClick ||
// this.editor.getShapeUtil(info.shape).onClick ||
// ...or if the shape is the focused layer (e.g. group)
outermostSelectingShape.id === focusedGroupId ||
// ...or if the shape is within the selection