From 6745f2cbcfd3a12235658e248821f5c33889f058 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Mon, 10 Jun 2024 09:08:00 +0100 Subject: [PATCH] Add option for max points per draw shape (#3900) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When a draw shape gets long, we split it into multiple shapes. This PR gives the user the option to change how long a shape can be before it needs to be split. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [ ] `bugfix` — Bug fix - [x] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Release Notes - SDK: Add option for controlling max length of draw shapes --- packages/editor/api-report.md | 3 +++ packages/editor/src/lib/options.ts | 2 ++ packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index 3b8866b49..c40ab4b11 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -651,6 +651,7 @@ export const defaultTldrawOptions: { readonly hitTestMargin: 8; readonly longPressDurationMs: 500; readonly maxPages: 40; + readonly maxPointsPerDrawShape: 500; readonly maxShapesPerPage: 4000; readonly multiClickDurationMs: 200; readonly textShadowLod: 0.35; @@ -2400,6 +2401,8 @@ export interface TldrawOptions { // (undocumented) readonly maxPages: number; // (undocumented) + readonly maxPointsPerDrawShape: number; + // (undocumented) readonly maxShapesPerPage: number; // (undocumented) readonly multiClickDurationMs: number; diff --git a/packages/editor/src/lib/options.ts b/packages/editor/src/lib/options.ts index bdf44040c..fbc4f6b47 100644 --- a/packages/editor/src/lib/options.ts +++ b/packages/editor/src/lib/options.ts @@ -26,6 +26,7 @@ export interface TldrawOptions { readonly dragDistanceSquared: number readonly defaultSvgPadding: number readonly cameraSlideFriction: number + readonly maxPointsPerDrawShape: number readonly gridSteps: readonly { readonly min: number readonly mid: number @@ -58,6 +59,7 @@ export const defaultTldrawOptions = { dragDistanceSquared: 16, // 4 squared defaultSvgPadding: 32, cameraSlideFriction: 0.09, + maxPointsPerDrawShape: 500, gridSteps: [ { min: -1, mid: 0.15, step: 64 }, { min: 0.05, mid: 0.375, step: 16 }, diff --git a/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts b/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts index b72b10d0c..0601594e8 100644 --- a/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts +++ b/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts @@ -630,7 +630,7 @@ export class Drawing extends StateNode { this.editor.updateShapes([shapePartial]) // Set a maximum length for the lines array; after 200 points, complete the line. - if (newPoints.length > 500) { + if (newPoints.length > this.editor.options.maxPointsPerDrawShape) { this.editor.updateShapes([{ id, type: this.shapeType, props: { isComplete: true } }]) const newShapeId = createShapeId()