Add option for max points per draw shape (#3900)
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 <!-- ❗ Please select a 'Scope' label ❗️ --> - [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 <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `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
This commit is contained in:
parent
1c92496d2b
commit
6745f2cbcf
3 changed files with 6 additions and 1 deletions
|
@ -651,6 +651,7 @@ export const defaultTldrawOptions: {
|
||||||
readonly hitTestMargin: 8;
|
readonly hitTestMargin: 8;
|
||||||
readonly longPressDurationMs: 500;
|
readonly longPressDurationMs: 500;
|
||||||
readonly maxPages: 40;
|
readonly maxPages: 40;
|
||||||
|
readonly maxPointsPerDrawShape: 500;
|
||||||
readonly maxShapesPerPage: 4000;
|
readonly maxShapesPerPage: 4000;
|
||||||
readonly multiClickDurationMs: 200;
|
readonly multiClickDurationMs: 200;
|
||||||
readonly textShadowLod: 0.35;
|
readonly textShadowLod: 0.35;
|
||||||
|
@ -2400,6 +2401,8 @@ export interface TldrawOptions {
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
readonly maxPages: number;
|
readonly maxPages: number;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
|
readonly maxPointsPerDrawShape: number;
|
||||||
|
// (undocumented)
|
||||||
readonly maxShapesPerPage: number;
|
readonly maxShapesPerPage: number;
|
||||||
// (undocumented)
|
// (undocumented)
|
||||||
readonly multiClickDurationMs: number;
|
readonly multiClickDurationMs: number;
|
||||||
|
|
|
@ -26,6 +26,7 @@ export interface TldrawOptions {
|
||||||
readonly dragDistanceSquared: number
|
readonly dragDistanceSquared: number
|
||||||
readonly defaultSvgPadding: number
|
readonly defaultSvgPadding: number
|
||||||
readonly cameraSlideFriction: number
|
readonly cameraSlideFriction: number
|
||||||
|
readonly maxPointsPerDrawShape: number
|
||||||
readonly gridSteps: readonly {
|
readonly gridSteps: readonly {
|
||||||
readonly min: number
|
readonly min: number
|
||||||
readonly mid: number
|
readonly mid: number
|
||||||
|
@ -58,6 +59,7 @@ export const defaultTldrawOptions = {
|
||||||
dragDistanceSquared: 16, // 4 squared
|
dragDistanceSquared: 16, // 4 squared
|
||||||
defaultSvgPadding: 32,
|
defaultSvgPadding: 32,
|
||||||
cameraSlideFriction: 0.09,
|
cameraSlideFriction: 0.09,
|
||||||
|
maxPointsPerDrawShape: 500,
|
||||||
gridSteps: [
|
gridSteps: [
|
||||||
{ min: -1, mid: 0.15, step: 64 },
|
{ min: -1, mid: 0.15, step: 64 },
|
||||||
{ min: 0.05, mid: 0.375, step: 16 },
|
{ min: 0.05, mid: 0.375, step: 16 },
|
||||||
|
|
|
@ -630,7 +630,7 @@ export class Drawing extends StateNode {
|
||||||
this.editor.updateShapes([shapePartial])
|
this.editor.updateShapes([shapePartial])
|
||||||
|
|
||||||
// Set a maximum length for the lines array; after 200 points, complete the line.
|
// 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 } }])
|
this.editor.updateShapes([{ id, type: this.shapeType, props: { isComplete: true } }])
|
||||||
|
|
||||||
const newShapeId = createShapeId()
|
const newShapeId = createShapeId()
|
||||||
|
|
Loading…
Reference in a new issue