sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix resizing lines with abs coords bigger than element w/h (#1427)

Browse Source
This commit is contained in:
Daishi Kato
2020-05-05 00:25:40 +09:00
committed by GitHub
parent 686af31d9d
commit 73d8c5b7c1
4 changed files with 498 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/element/bounds.ts
View File

@ -1,9 +1,11 @@
import { ExcalidrawElement, ExcalidrawLinearElement } from "./types";
import { rotate } from "../math";
import { Drawable, Op } from "roughjs/bin/core";
import rough from "roughjs/bin/rough";
import { Drawable, Op, Options } from "roughjs/bin/core";
import { Point } from "../types";
import { getShapeForElement } from "../renderer/renderElement";
import { isLinearElement } from "./typeChecks";
import { rescalePoints } from "../points";
// If the element is created from right to left, the width is going to be negative
// This set of functions retrieves the absolute position of the 4 points.
@ -11,7 +13,7 @@ export function getElementAbsoluteCoords(
element: ExcalidrawElement,
): [number, number, number, number] {
if (isLinearElement(element)) {
return getLinearElementAbsoluteBounds(element);
return getLinearElementAbsoluteCoords(element);
}
return [
element.x,
@ -45,35 +47,10 @@ export function getCurvePathOps(shape: Drawable): Op[] {
return shape.sets[0].ops;
}
export function getLinearElementAbsoluteBounds(
element: ExcalidrawLinearElement,
): [number, number, number, number] {
if (element.points.length < 2 || !getShapeForElement(element)) {
const { minX, minY, maxX, maxY } = element.points.reduce(
(limits, [x, y]) => {
limits.minY = Math.min(limits.minY, y);
limits.minX = Math.min(limits.minX, x);
limits.maxX = Math.max(limits.maxX, x);
limits.maxY = Math.max(limits.maxY, y);
return limits;
},
{ minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
);
return [
minX + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
];
}
const shape = getShapeForElement(element) as Drawable[];
// first element is always the curve
const ops = getCurvePathOps(shape[0]);
const getMinMaxXYFromCurvePathOps = (
ops: Op[],
transformXY?: (x: number, y: number) => [number, number],
): [number, number, number, number] => {
let currentP: Point = [0, 0];
const { minX, minY, maxX, maxY } = ops.reduce(
@ -104,8 +81,11 @@ export function getLinearElementAbsoluteBounds(
let t = 0;
while (t <= 1.0) {
const x = equation(t, 0);
const y = equation(t, 1);
let x = equation(t, 0);
let y = equation(t, 1);
if (transformXY) {
[x, y] = transformXY(x, y);
}
limits.minY = Math.min(limits.minY, y);
limits.minX = Math.min(limits.minX, x);
@ -125,13 +105,47 @@ export function getLinearElementAbsoluteBounds(
{ minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
);
return [minX, minY, maxX, maxY];
};
const getLinearElementAbsoluteCoords = (
element: ExcalidrawLinearElement,
): [number, number, number, number] => {
if (element.points.length < 2 || !getShapeForElement(element)) {
const { minX, minY, maxX, maxY } = element.points.reduce(
(limits, [x, y]) => {
limits.minY = Math.min(limits.minY, y);
limits.minX = Math.min(limits.minX, x);
limits.maxX = Math.max(limits.maxX, x);
limits.maxY = Math.max(limits.maxY, y);
return limits;
},
{ minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
);
return [
minX + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
];
}
const shape = getShapeForElement(element) as Drawable[];
// first element is always the curve
const ops = getCurvePathOps(shape[0]);
const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
return [
minX + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
];
}
};
export function getArrowPoints(
element: ExcalidrawLinearElement,
@ -197,8 +211,6 @@ export function getArrowPoints(
return [x2, y2, x3, y3, x4, y4];
}
// this function has some code in common with getLinearElementAbsoluteBounds
// there might be more efficient way
const getLinearElementRotatedBounds = (
element: ExcalidrawLinearElement,
cx: number,
@ -224,56 +236,9 @@ const getLinearElementRotatedBounds = (
// first element is always the curve
const ops = getCurvePathOps(shape[0]);
let currentP: Point = [0, 0];
const { minX, minY, maxX, maxY } = ops.reduce(
(limits, { op, data }) => {
// There are only four operation types:
// move, bcurveTo, lineTo, and curveTo
if (op === "move") {
// change starting point
currentP = (data as unknown) as Point;
// move operation does not draw anything; so, it always
// returns false
} else if (op === "bcurveTo") {
// create points from bezier curve
// bezier curve stores data as a flattened array of three positions
// [x1, y1, x2, y2, x3, y3]
const p1 = [data[0], data[1]] as Point;
const p2 = [data[2], data[3]] as Point;
const p3 = [data[4], data[5]] as Point;
const p0 = currentP;
currentP = p3;
const equation = (t: number, idx: number) =>
Math.pow(1 - t, 3) * p3[idx] +
3 * t * Math.pow(1 - t, 2) * p2[idx] +
3 * Math.pow(t, 2) * (1 - t) * p1[idx] +
p0[idx] * Math.pow(t, 3);
let t = 0;
while (t <= 1.0) {
let x = equation(t, 0);
let y = equation(t, 1);
[x, y] = rotate(element.x + x, element.y + y, cx, cy, element.angle);
limits.minY = Math.min(limits.minY, y);
limits.minX = Math.min(limits.minX, x);
limits.maxX = Math.max(limits.maxX, x);
limits.maxY = Math.max(limits.maxY, y);
t += 0.1;
}
} else if (op === "lineTo") {
// TODO: Implement this
} else if (op === "qcurveTo") {
// TODO: Implement this
}
return limits;
},
{ minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
);
return [minX, minY, maxX, maxY];
const transformXY = (x: number, y: number) =>
rotate(element.x + x, element.y + y, cx, cy, element.angle);
return getMinMaxXYFromCurvePathOps(ops, transformXY);
};
export const getElementBounds = (
@ -338,3 +303,40 @@ export const getCommonBounds = (
return [minX, minY, maxX, maxY];
};
export const getResizedElementAbsoluteCoords = (
element: ExcalidrawElement,
nextWidth: number,
nextHeight: number,
): [number, number, number, number] => {
if (!isLinearElement(element) || element.points.length <= 2) {
return [
element.x,
element.y,
element.x + nextWidth,
element.y + nextHeight,
];
}
const points = rescalePoints(
0,
nextWidth,
rescalePoints(1, nextHeight, element.points),
);
const options: Options = {
strokeWidth: element.strokeWidth,
roughness: element.roughness,
seed: element.seed,
};
const gen = rough.generator();
const curve = gen.curve(points as [number, number][], options);
const ops = getCurvePathOps(curve);
const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
return [
minX + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
];
};