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

feat: sharpness (#1931)

Browse source 
* feat: sharpness

* feat: fill sharp lines, et al.

* fix: rotated positioning

* chore: simplify path with Q

* fix: hit test inside sharp elements

* make sharp / round buttons work properly

* fix tsc tests

* update snapshots

* update snapshots

* fix: sharp arrow creation error

* fix merge and test

* avoid type assertion

* remove duplicate helper

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Daishi Kato 2020-08-15 00:59:43 +09:00 • committed by GitHub
parent 930813387b
commit 41cb1fbeba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 841 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/renderer/renderElement.ts
View file

@ -240,14 +240,27 @@ const generateElementShape = (
switch (element.type) {
case "rectangle":
shape = generator.rectangle(
0,
0,
element.width,
element.height,
generateRoughOptions(element),
);
if (element.strokeSharpness === "round") {
const w = element.width;
const h = element.height;
const r = Math.min(w, h) * 0.25;
shape = generator.path(
`M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${
h - r
} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${
h - r
} L 0 ${r} Q 0 0, ${r} 0`,
generateRoughOptions(element),
);
} else {
shape = generator.rectangle(
0,
0,
element.width,
element.height,
generateRoughOptions(element),
);
}
break;
case "diamond": {
const [
@ -291,24 +304,37 @@ const generateElementShape = (
// curve is always the first element
// this simplifies finding the curve for an element
shape = [generator.curve(points as [number, number][], options)];
if (element.strokeSharpness === "sharp") {
if (options.fill) {
shape = [generator.polygon(points as [number, number][], options)];
} else {
shape = [
generator.linearPath(points as [number, number][], options),
];
}
} else {
shape = [generator.curve(points as [number, number][], options)];
}
// add lines only in arrow
if (element.type === "arrow") {
const [x2, y2, x3, y3, x4, y4] = getArrowPoints(element, shape);
// for dotted arrows caps, reduce gap to make it more legible
if (element.strokeStyle === "dotted") {
options.strokeLineDash = [3, 4];
// for solid/dashed, keep solid arrow cap
} else {
delete options.strokeLineDash;
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
if (element.strokeStyle === "dotted") {
options.strokeLineDash = [3, 4];
// for solid/dashed, keep solid arrow cap
} else {
delete options.strokeLineDash;
}
shape.push(
...[
generator.line(x3, y3, x2, y2, options),
generator.line(x4, y4, x2, y2, options),
],
);
}
shape.push(
...[
generator.line(x3, y3, x2, y2, options),
generator.line(x4, y4, x2, y2, options),
],
);
}
break;
}