smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: linear elements unstable bounds

Browse source
This commit is contained in:
Alex Kim 2023-02-27 14:42:36 +03:00
parent 5931bf01b2
commit 22ae9b02c4
No known key found for this signature in database
GPG key ID: CEE74CFA44D238D7
2 changed files with 37 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/element/bounds.ts
View file

@ -24,6 +24,11 @@ import { rescalePoints } from "../points";
import { getBoundTextElement, getContainerElement } from "./textElement"; import { getBoundTextElement, getContainerElement } from "./textElement";
import { LinearElementEditor } from "./linearElementEditor"; import { LinearElementEditor } from "./linearElementEditor";
const linearShapeCache = new WeakMap<
ExcalidrawLinearElement,
Drawable | null
>();
// x and y position of top left corner, x and y position of bottom right corner // x and y position of top left corner, x and y position of bottom right corner
export type Bounds = readonly [number, number, number, number]; export type Bounds = readonly [number, number, number, number];
type MaybeQuadraticSolution = [number | null, number | null] | false; type MaybeQuadraticSolution = [number | null, number | null] | false;
@ -371,11 +376,18 @@ export const getArrowheadPoints = (
return [x2, y2, x3, y3, x4, y4]; return [x2, y2, x3, y3, x4, y4];
}; };
const generateLinearElementShape = ( export const getLinearShapeWith0Roughness = (
element: ExcalidrawLinearElement, element: ExcalidrawLinearElement,
): Drawable => { ): Drawable => {
const cachedShape = linearShapeCache.get(element);
if (cachedShape) {
return cachedShape;
}
const generator = rough.generator(); const generator = rough.generator();
const options = generateRoughOptions(element); const options = generateRoughOptions(element);
options.roughness = 0;
const method = (() => { const method = (() => {
if (element.roundness) { if (element.roundness) {
@ -387,7 +399,9 @@ const generateLinearElementShape = (
return "linearPath"; return "linearPath";
})(); })();
return generator[method](element.points as Mutable<Point>[], options); const shape = generator[method](element.points as Mutable<Point>[], options);
linearShapeCache.set(element, shape);
return shape;
}; };
const getLinearElementRotatedBounds = ( const getLinearElementRotatedBounds = (
@ -424,8 +438,7 @@ const getLinearElementRotatedBounds = (
} }
// first element is always the curve // first element is always the curve
const cachedShape = getShapeForElement(element)?.[0]; const shape = getLinearShapeWith0Roughness(element);
const shape = cachedShape ?? generateLinearElementShape(element);
const ops = getCurvePathOps(shape); const ops = getCurvePathOps(shape);
const transformXY = (x: number, y: number) => const transformXY = (x: number, y: number) =>
rotate(element.x + x, element.y + y, cx, cy, element.angle); rotate(element.x + x, element.y + y, cx, cy, element.angle);
@ -560,15 +573,14 @@ export const getResizedElementAbsoluteCoords = (
bounds = getBoundsFromPoints(points); bounds = getBoundsFromPoints(points);
} else { } else {
// Line // Line
const gen = rough.generator(); // const gen = rough.generator();
const curve = !element.roundness // const options = generateRoughOptions(element);
? gen.linearPath( // options.roughness = 0;
points as [number, number][], // const curve = !element.roundness
generateRoughOptions(element), // ? gen.linearPath(points as [number, number][], options)
) // : gen.curve(points as [number, number][], options);
: gen.curve(points as [number, number][], generateRoughOptions(element)); const shape = getLinearShapeWith0Roughness(element);
const ops = getCurvePathOps(shape);
const ops = getCurvePathOps(curve);
bounds = getMinMaxXYFromCurvePathOps(ops); bounds = getMinMaxXYFromCurvePathOps(ops);
} }
@ -586,15 +598,15 @@ export const getElementPointsCoords = (
points: readonly (readonly [number, number])[], points: readonly (readonly [number, number])[],
): [number, number, number, number] => { ): [number, number, number, number] => {
// This might be computationally heavey // This might be computationally heavey
const gen = rough.generator(); // const gen = rough.generator();
const curve = // const options = generateRoughOptions(element);
element.roundness == null // options.roughness = 0;
? gen.linearPath( // const curve =
points as [number, number][], // element.roundness == null
generateRoughOptions(element), // ? gen.linearPath(points as [number, number][], options)
) // : gen.curve(points as [number, number][], options);
: gen.curve(points as [number, number][], generateRoughOptions(element)); const shape = getLinearShapeWith0Roughness(element);
const ops = getCurvePathOps(curve); const ops = getCurvePathOps(shape);
const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops); const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
return [ return [
minX + element.x, minX + element.x,

5
src/element/linearElementEditor.ts
View file

@ -21,6 +21,7 @@ import {
} from "../math"; } from "../math";
import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from "."; import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
import { import {
getLinearShapeWith0Roughness,
getCurvePathOps, getCurvePathOps,
getElementPointsCoords, getElementPointsCoords,
getMinMaxXYFromCurvePathOps, getMinMaxXYFromCurvePathOps,
@ -1436,10 +1437,10 @@ export class LinearElementEditor {
x2 = maxX + element.x; x2 = maxX + element.x;
y2 = maxY + element.y; y2 = maxY + element.y;
} else { } else {
const shape = getShapeForElement(element)!; const shape = getLinearShapeWith0Roughness(element);
// first element is always the curve // first element is always the curve
const ops = getCurvePathOps(shape[0]); const ops = getCurvePathOps(shape);
const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops); const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
x1 = minX + element.x; x1 = minX + element.x;