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

5
src/element/linearElementEditor.ts
View file

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