sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Do not regenerate shapes when moving

Browse Source
This commit is contained in:
Christopher Chedeau 2020-01-01 20:56:18 -08:00
parent bd515f7e50
commit f8873dd56b
1 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/index.js
View File

@ -39,30 +39,29 @@ function generateShape(element) {
context.fillStyle = fillStyle; context.fillStyle = fillStyle;
}; };
} else if (element.type === "rectangle") { } else if (element.type === "rectangle") {
const shape = generator.rectangle( const shape = generator.rectangle(0, 0, element.width, element.height);
element.x,
element.y,
element.width,
element.height
);
element.draw = (rc, context) => { element.draw = (rc, context) => {
context.translate(element.x, element.y);
rc.draw(shape); rc.draw(shape);
context.translate(-element.x, -element.y);
}; };
} else if (element.type === "ellipse") { } else if (element.type === "ellipse") {
const shape = generator.ellipse( const shape = generator.ellipse(
element.x + element.width / 2, element.width / 2,
element.y + element.height / 2, element.height / 2,
element.width, element.width,
element.height element.height
); );
element.draw = (rc, context) => { element.draw = (rc, context) => {
context.translate(element.x, element.y);
rc.draw(shape); rc.draw(shape);
context.translate(-element.x, -element.y);
}; };
} else if (element.type === "arrow") { } else if (element.type === "arrow") {
const x1 = element.x; const x1 = 0;
const y1 = element.y; const y1 = 0;
const x2 = element.x + element.width; const x2 = element.width;
const y2 = element.y + element.height; const y2 = element.height;
const size = 30; // pixels const size = 30; // pixels
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
@ -76,13 +75,18 @@ function generateShape(element) {
const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180); const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);
const shapes = [ const shapes = [
generator.line(x1, y1, x2, y2), // \
generator.line(x3, y3, x2, y2), generator.line(x3, y3, x2, y2),
// -----
generator.line(x1, y1, x2, y2),
// /
generator.line(x4, y4, x2, y2) generator.line(x4, y4, x2, y2)
]; ];
element.draw = (rc, context) => { element.draw = (rc, context) => {
context.translate(element.x, element.y);
shapes.forEach(shape => rc.draw(shape)); shapes.forEach(shape => rc.draw(shape));
context.translate(-element.x, -element.y);
}; };
return; return;
} else if (element.type === "text") { } else if (element.type === "text") {
@ -165,7 +169,6 @@ function App() {
else if (event.key === "ArrowRight") element.x += step; else if (event.key === "ArrowRight") element.x += step;
else if (event.key === "ArrowUp") element.y -= step; else if (event.key === "ArrowUp") element.y -= step;
else if (event.key === "ArrowDown") element.y += step; else if (event.key === "ArrowDown") element.y += step;
generateShape(element);
} }
}); });
drawScene(); drawScene();