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

Regenerate roughjs shape only when the item is updated (#316)

Browse source 
* Regenerate roughjs shape only when the item is updated

* Remove shape object during export and history undo/redo

* Remove shape element during copying

* Fix shape generation during creation
This commit is contained in:
Gasim Gasimzada 2020-01-12 04:00:00 +04:00 • committed by Christopher Chedeau
parent 1bf18fe4ed
commit 74764b06eb
7 changed files with 109 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/renderer/renderElement.ts
View file

@ -4,6 +4,7 @@ import { ExcalidrawElement } from "../element/types";
import { isTextElement } from "../element/typeChecks";
import { getDiamondPoints, getArrowPoints } from "../element/bounds";
import { RoughCanvas } from "roughjs/bin/canvas";
import { Drawable } from "roughjs/bin/core";
export function renderElement(
element: ExcalidrawElement,
@ -17,69 +18,76 @@ export function renderElement(
context.fillRect(0, 0, element.width, element.height);
context.fillStyle = fillStyle;
} else if (element.type === "rectangle") {
const shape = withCustomMathRandom(element.seed, () => {
return generator.rectangle(0, 0, element.width, element.height, {
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
if (!element.shape) {
element.shape = withCustomMathRandom(element.seed, () => {
return generator.rectangle(0, 0, element.width, element.height, {
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
});
});
});
}
context.globalAlpha = element.opacity / 100;
rc.draw(shape);
rc.draw(element.shape as Drawable);
context.globalAlpha = 1;
} else if (element.type === "diamond") {
const shape = withCustomMathRandom(element.seed, () => {
const [
topX,
topY,
rightX,
rightY,
bottomX,
bottomY,
leftX,
leftY
] = getDiamondPoints(element);
return generator.polygon(
[
[topX, topY],
[rightX, rightY],
[bottomX, bottomY],
[leftX, leftY]
],
{
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}
);
});
context.globalAlpha = element.opacity / 100;
rc.draw(shape);
context.globalAlpha = 1;
} else if (element.type === "ellipse") {
const shape = withCustomMathRandom(element.seed, () =>
generator.ellipse(
element.width / 2,
element.height / 2,
element.width,
element.height,
{
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}
)
);
if (!element.shape) {
element.shape = withCustomMathRandom(element.seed, () => {
const [
topX,
topY,
rightX,
rightY,
bottomX,
bottomY,
leftX,
leftY
] = getDiamondPoints(element);
return generator.polygon(
[
[topX, topY],
[rightX, rightY],
[bottomX, bottomY],
[leftX, leftY]
],
{
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}
);
});
}
context.globalAlpha = element.opacity / 100;
rc.draw(shape);
rc.draw(element.shape as Drawable);
context.globalAlpha = 1;
} else if (element.type === "ellipse") {
if (!element.shape) {
element.shape = withCustomMathRandom(element.seed, () =>
generator.ellipse(
element.width / 2,
element.height / 2,
element.width,
element.height,
{
stroke: element.strokeColor,
fill: element.backgroundColor,
fillStyle: element.fillStyle,
strokeWidth: element.strokeWidth,
roughness: element.roughness
}
)
);
}
context.globalAlpha = element.opacity / 100;
rc.draw(element.shape as Drawable);
context.globalAlpha = 1;
} else if (element.type === "arrow") {
const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
@ -89,17 +97,19 @@ export function renderElement(
roughness: element.roughness
};
const shapes = withCustomMathRandom(element.seed, () => [
// \
generator.line(x3, y3, x2, y2, options),
// -----
generator.line(x1, y1, x2, y2, options),
// /
generator.line(x4, y4, x2, y2, options)
]);
if (!element.shape) {
element.shape = withCustomMathRandom(element.seed, () => [
// \
generator.line(x3, y3, x2, y2, options),
// -----
generator.line(x1, y1, x2, y2, options),
// /
generator.line(x4, y4, x2, y2, options)
]);
}
context.globalAlpha = element.opacity / 100;
shapes.forEach(shape => rc.draw(shape));
(element.shape as Drawable[]).forEach(shape => rc.draw(shape));
context.globalAlpha = 1;
return;
} else if (isTextElement(element)) {