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: Adds rounded icons, joins and caps. (#3521)

Browse source 
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
David Luzar 2021-05-07 18:03:23 +02:00 • committed by GitHub
parent 18cdafbcbe
commit 178ee04d82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/renderElement.ts
View file

@ -32,8 +32,8 @@ const defaultAppState = getDefaultAppState();
const CANVAS_PADDING = 20;
const DASHARRAY_DASHED = [12, 8];
const DASHARRAY_DOTTED = [3, 6];
const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
const getDashArrayDotted = (strokeWidth: number) => [1.5, 6 + strokeWidth];
export interface ExcalidrawElementWithCanvas {
element: ExcalidrawElement | ExcalidrawTextElement;
@ -122,12 +122,17 @@ const drawElementOnCanvas = (
case "rectangle":
case "diamond":
case "ellipse": {
context.lineJoin = "round";
context.lineCap = "round";
rc.draw(getShapeForElement(element) as Drawable);
break;
}
case "arrow":
case "draw":
case "line": {
context.lineJoin = "round";
context.lineCap = "round";
(getShapeForElement(element) as Drawable[]).forEach((shape) => {
rc.draw(shape);
});
@ -202,9 +207,9 @@ export const generateRoughOptions = (element: ExcalidrawElement): Options => {
seed: element.seed,
strokeLineDash:
element.strokeStyle === "dashed"
? DASHARRAY_DASHED
? getDashArrayDashed(element.strokeWidth)
: element.strokeStyle === "dotted"
? DASHARRAY_DOTTED
? getDashArrayDotted(element.strokeWidth)
: undefined,
// for non-solid strokes, disable multiStroke because it tends to make
// dashes/dots overlay each other
@ -568,6 +573,7 @@ export const renderElementToSvg = (
node.setAttribute("stroke-opacity", `${opacity}`);
node.setAttribute("fill-opacity", `${opacity}`);
}
node.setAttribute("stroke-linecap", "round");
node.setAttribute(
"transform",
`translate(${offsetX || 0} ${
@ -583,6 +589,8 @@ export const renderElementToSvg = (
generateElementShape(element, generator);
const group = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
const opacity = element.opacity / 100;
group.setAttribute("stroke-linecap", "round");
(getShapeForElement(element) as Drawable[]).forEach((shape) => {
const node = rsvg.draw(shape);
if (opacity !== 1) {