smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "Feature: Multi Point Arrows (#338)" (#634)

Browse source 
This reverts commit 16263e942b.
This commit is contained in:
David Luzar 2020-01-31 18:56:55 +01:00 • committed by GitHub
parent 16263e942b
commit 3d2e59bfed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 130 additions and 789 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/element/bounds.ts
View file

@ -1,16 +1,11 @@
import { ExcalidrawElement } from "./types";
import { rotate } from "../math";
import { Drawable } from "roughjs/bin/core";
import { Point } from "roughjs/bin/geometry";
// 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.
// We can't just always normalize it since we need to remember the fact that an arrow
// is pointing left or right.
export function getElementAbsoluteCoords(element: ExcalidrawElement) {
if (element.type === "arrow") {
return getArrowAbsoluteBounds(element);
}
return [
element.width >= 0 ? element.x : element.x + element.width, // x1
element.height >= 0 ? element.y : element.y + element.height, // y1
@ -34,95 +29,11 @@ export function getDiamondPoints(element: ExcalidrawElement) {
return [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY];
}
export function getArrowAbsoluteBounds(element: ExcalidrawElement) {
if (element.points.length < 2 || !element.shape) {
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 = element.shape as Drawable[];
const ops = shape[1].sets[0].ops;
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 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) {
const x = equation(t, 0);
const y = equation(t, 1);
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 + element.x,
minY + element.y,
maxX + element.x,
maxY + element.y,
];
}
export function getArrowPoints(element: ExcalidrawElement) {
const points = element.points;
const [x1, y1] = points.length >= 2 ? points[points.length - 2] : [0, 0];
const [x2, y2] = points[points.length - 1];
const x1 = 0;
const y1 = 0;
const x2 = element.width;
const y2 = element.height;
const size = 30; // pixels
const distance = Math.hypot(x2 - x1, y2 - y1);
@ -135,7 +46,7 @@ export function getArrowPoints(element: ExcalidrawElement) {
const [x3, y3] = rotate(xs, ys, x2, y2, (-angle * Math.PI) / 180);
const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);
return [x2, y2, x3, y3, x4, y4];
return [x1, y1, x2, y2, x3, y3, x4, y4];
}
export function getLinePoints(element: ExcalidrawElement) {

110
src/element/collision.ts
View file

@ -2,13 +2,11 @@ import { distanceBetweenPointAndSegment } from "../math";
import { ExcalidrawElement } from "./types";
import {
getArrowPoints,
getDiamondPoints,
getElementAbsoluteCoords,
getLinePoints,
getArrowAbsoluteBounds,
} from "./bounds";
import { Point } from "roughjs/bin/geometry";
import { Drawable, OpSet } from "roughjs/bin/core";
function isElementDraggableFromInside(element: ExcalidrawElement): boolean {
return element.backgroundColor !== "transparent" || element.isSelected;
@ -147,25 +145,18 @@ export function hitTest(
lineThreshold
);
} else if (element.type === "arrow") {
if (!element.shape) {
return false;
}
const shape = element.shape as Drawable[];
// If shape does not consist of curve and two line segments
// for arrow shape, return false
if (shape.length < 3) return false;
let [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
// The computation is done at the origin, we need to add a translation
x -= element.x;
y -= element.y;
const [x1, y1, x2, y2] = getArrowAbsoluteBounds(element);
if (x < x1 || y < y1 - 10 || x > x2 || y > y2 + 10) return false;
const relX = x - element.x;
const relY = y - element.y;
// hit test curve and lien segments for arrow
return (
hitTestRoughShape(shape[0].sets, relX, relY) ||
hitTestRoughShape(shape[1].sets, relX, relY) ||
hitTestRoughShape(shape[2].sets, relX, relY)
// \
distanceBetweenPointAndSegment(x, y, x3, y3, x2, y2) < lineThreshold ||
// -----
distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) < lineThreshold ||
// /
distanceBetweenPointAndSegment(x, y, x4, y4, x2, y2) < lineThreshold
);
} else if (element.type === "line") {
const [x1, y1, x2, y2] = getLinePoints(element);
@ -185,82 +176,3 @@ export function hitTest(
throw new Error("Unimplemented type " + element.type);
}
}
const pointInBezierEquation = (
p0: Point,
p1: Point,
p2: Point,
p3: Point,
[mx, my]: Point,
) => {
// B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
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);
const epsilon = 20;
// go through t in increments of 0.01
let t = 0;
while (t <= 1.0) {
const tx = equation(t, 0);
const ty = equation(t, 1);
const diff = Math.sqrt(Math.pow(tx - mx, 2) + Math.pow(ty - my, 2));
if (diff < epsilon) {
return true;
}
t += 0.01;
}
return false;
};
const hitTestRoughShape = (opSet: OpSet[], x: number, y: number) => {
// read operations from first opSet
const ops = opSet[0].ops;
// set start position as (0,0) just in case
// move operation does not exist (unlikely but it is worth safekeeping it)
let currentP: Point = [0, 0];
return ops.some(({ op, data }, idx) => {
// There are only four operation types:
// move, bcurveTo, lineTo, and curveTo
if (op === "move") {
// change starting point
currentP = data 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;
// check if points are on the curve
// cubic bezier curves require four parameters
// the first parameter is the last stored position (p0)
let retVal = pointInBezierEquation(p0, p1, p2, p3, [x, y]);
// set end point of bezier curve as the new starting point for
// upcoming operations as each operation is based on the last drawn
// position of the previous operation
return retVal;
} else if (op === "lineTo") {
// TODO: Implement this
} else if (op === "qcurveTo") {
// TODO: Implement this
}
return false;
});
};

79
src/element/handlerRectangles.ts
View file

@ -1,6 +1,5 @@
import { ExcalidrawElement } from "./types";
import { SceneScroll } from "../scene/types";
import { getArrowAbsoluteBounds } from "./bounds";
type Sides = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
@ -8,31 +7,18 @@ export function handlerRectangles(
element: ExcalidrawElement,
{ scrollX, scrollY }: SceneScroll,
) {
let elementX2 = 0;
let elementY2 = 0;
let elementX1 = Infinity;
let elementY1 = Infinity;
let marginX = -8;
let marginY = -8;
let minimumSize = 40;
if (element.type === "arrow") {
[elementX1, elementY1, elementX2, elementY2] = getArrowAbsoluteBounds(
element,
);
} else {
elementX1 = element.x;
elementX2 = element.x + element.width;
elementY1 = element.y;
elementY2 = element.y + element.height;
marginX = element.width < 0 ? 8 : -8;
marginY = element.height < 0 ? 8 : -8;
}
const elementX1 = element.x;
const elementX2 = element.x + element.width;
const elementY1 = element.y;
const elementY2 = element.y + element.height;
const margin = 4;
const minimumSize = 40;
const handlers = {} as { [T in Sides]: number[] };
const marginX = element.width < 0 ? 8 : -8;
const marginY = element.height < 0 ? 8 : -8;
if (Math.abs(elementX2 - elementX1) > minimumSize) {
handlers["n"] = [
elementX1 + (elementX2 - elementX1) / 2 + scrollX - 4,
@ -90,58 +76,11 @@ export function handlerRectangles(
8,
]; // se
if (element.type === "line") {
if (element.type === "arrow" || element.type === "line") {
return {
nw: handlers.nw,
se: handlers.se,
} as typeof handlers;
} else if (element.type === "arrow") {
if (element.points.length === 2) {
// only check the last point because starting point is always (0,0)
const [, p1] = element.points;
if (p1[0] === 0 || p1[1] === 0) {
return {
nw: handlers.nw,
se: handlers.se,
} as typeof handlers;
}
if (p1[0] > 0 && p1[1] < 0) {
return {
ne: handlers.ne,
sw: handlers.sw,
} as typeof handlers;
}
if (p1[0] > 0 && p1[1] > 0) {
return {
nw: handlers.nw,
se: handlers.se,
} as typeof handlers;
}
if (p1[0] < 0 && p1[1] > 0) {
return {
ne: handlers.ne,
sw: handlers.sw,
} as typeof handlers;
}
if (p1[0] < 0 && p1[1] < 0) {
return {
nw: handlers.nw,
se: handlers.se,
} as typeof handlers;
}
}
return {
n: handlers.n,
s: handlers.s,
w: handlers.w,
e: handlers.e,
} as typeof handlers;
}
return handlers;

1
src/element/index.ts
View file

@ -5,7 +5,6 @@ export {
getDiamondPoints,
getArrowPoints,
getLinePoints,
getArrowAbsoluteBounds,
} from "./bounds";
export { handlerRectangles } from "./handlerRectangles";

2
src/element/newElement.ts
View file

@ -1,7 +1,6 @@
import { randomSeed } from "roughjs/bin/math";
import nanoid from "nanoid";
import { Drawable } from "roughjs/bin/core";
import { Point } from "roughjs/bin/geometry";
import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
import { measureText } from "../utils";
@ -35,7 +34,6 @@ export function newElement(
isSelected: false,
seed: randomSeed(),
shape: null as Drawable | Drawable[] | null,
points: [] as Point[],
};
return element;
}

1
src/element/resizeTest.ts
View file

@ -17,7 +17,6 @@ export function resizeTest(
const filter = Object.keys(handlers).filter(key => {
const handler = handlers[key as HandlerRectanglesRet]!;
if (!handler) return false;
return (
x + scrollX >= handler[0] &&