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

Add Arrowheads to Arrows (#2452)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
Steve Ruiz 2020-12-08 15:02:55 +00:00 • committed by GitHub
parent bd8e860d7f
commit c291edfc44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 711 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/renderer/renderElement.ts
View file

@ -1,13 +1,15 @@
import {
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
Arrowhead,
NonDeletedExcalidrawElement,
} from "../element/types";
import { isTextElement, isLinearElement } from "../element/typeChecks";
import {
getDiamondPoints,
getArrowPoints,
getElementAbsoluteCoords,
getArrowheadPoints,
} from "../element/bounds";
import { RoughCanvas } from "roughjs/bin/canvas";
import { Drawable, Options } from "roughjs/bin/core";
@ -334,22 +336,64 @@ const generateElementShape = (
// add lines only in arrow
if (element.type === "arrow") {
const arrowPoints = getArrowPoints(element, shape);
if (arrowPoints) {
const [x2, y2, x3, y3, x4, y4] = arrowPoints;
// for dotted arrows caps, reduce gap to make it more legible
const { startArrowhead = null, endArrowhead = "arrow" } = element;
function getArrowheadShapes(
element: ExcalidrawLinearElement,
shape: Drawable[],
position: "start" | "end",
arrowhead: Arrowhead,
) {
const arrowheadPoints = getArrowheadPoints(
element,
shape,
position,
arrowhead,
);
if (arrowheadPoints === null) {
return [];
}
// Other arrowheads here...
// Arrow arrowheads
const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
if (element.strokeStyle === "dotted") {
// for dotted arrows caps, reduce gap to make it more legible
options.strokeLineDash = [3, 4];
// for solid/dashed, keep solid arrow cap
} else {
// for solid/dashed, keep solid arrow cap
delete options.strokeLineDash;
}
shape.push(
...[
generator.line(x3, y3, x2, y2, options),
generator.line(x4, y4, x2, y2, options),
],
return [
generator.line(x3, y3, x2, y2, options),
generator.line(x4, y4, x2, y2, options),
];
}
if (startArrowhead !== null) {
const shapes = getArrowheadShapes(
element,
shape,
"start",
startArrowhead,
);
shape.push(...shapes);
}
if (endArrowhead !== null) {
if (endArrowhead === undefined) {
// Hey, we have an old arrow here!
}
const shapes = getArrowheadShapes(
element,
shape,
"end",
endArrowhead,
);
shape.push(...shapes);
}
}
break;