diff --git a/src/element/bounds.ts b/src/element/bounds.ts index a94e1308d..9ba9f94ef 100644 --- a/src/element/bounds.ts +++ b/src/element/bounds.ts @@ -741,7 +741,7 @@ export const getElementPointsCoords = ( element: ExcalidrawLinearElement, points: readonly (readonly [number, number])[], ): [number, number, number, number] => { - // This might be computationally heavey + // This might be computationally heavy const gen = rough.generator(); const curve = element.roundness == null diff --git a/src/element/mutateElement.ts b/src/element/mutateElement.ts index d4dbd8cd2..e45fcb54e 100644 --- a/src/element/mutateElement.ts +++ b/src/element/mutateElement.ts @@ -25,7 +25,7 @@ export const mutateElement = >( // casting to any because can't use `in` operator // (see https://github.com/microsoft/TypeScript/issues/21732) - const { points, fileId } = updates as any; + const { points, fileId, segmentSplitIndices } = updates as any; if (typeof points !== "undefined") { updates = { ...getSizeFromPoints(points), ...updates }; @@ -86,6 +86,7 @@ export const mutateElement = >( if ( typeof updates.height !== "undefined" || typeof updates.width !== "undefined" || + typeof segmentSplitIndices !== "undefined" || typeof fileId != "undefined" || typeof points !== "undefined" ) { diff --git a/src/scene/Shape.ts b/src/scene/Shape.ts index 16b6518f8..cd61e5d68 100644 --- a/src/scene/Shape.ts +++ b/src/scene/Shape.ts @@ -14,6 +14,7 @@ import { generateFreeDrawShape } from "../renderer/renderElement"; import { isTransparent, assertNever } from "../utils"; import { simplify } from "points-on-curve"; import { ROUGHNESS } from "../constants"; +import { Point } from "../types"; const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth]; @@ -228,7 +229,7 @@ export const _generateElementShape = ( // points array can be empty in the beginning, so it is important to add // initial position to it - const points = element.points.length ? element.points : [[0, 0]]; + const points = element.points.length ? element.points : [[0, 0]] as Point[]; // curve is always the first element // this simplifies finding the curve for an element @@ -239,7 +240,20 @@ export const _generateElementShape = ( shape = [generator.linearPath(points as [number, number][], options)]; } } else { - shape = [generator.curve(points as [number, number][], options)]; + const pointList: Point[][] = []; + const splits = element.segmentSplitIndices || []; + let currentIndex = 0; + for (const index of splits) { + const slice = points.slice(currentIndex, index + 1); + if (slice.length) { + pointList.push([...slice]); + } + currentIndex = index; + } + if (currentIndex < (points.length - 1)) { + pointList.push(points.slice(currentIndex)); + } + shape = [generator.curve(pointList as [number, number][][], options)]; } // add lines only in arrow