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

Remove drawScene (#58)

Browse Source
This commit is contained in:
Christopher Chedeau 2020-01-02 19:47:32 -08:00 committed by GitHub
parent 4c94976527
commit a5b0e192b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 252 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/index.tsx
View File

@ -134,8 +134,7 @@ function exportAsPNG({
// deselect & rerender
clearSelection();
drawScene();
ReactDOM.render(<App />, rootElement, () => {
// calculate visible-area coords
let subCanvasX1 = Infinity;
@ -198,6 +197,7 @@ function exportAsPNG({
// clean up the DOM
link.remove();
if (tempCanvas !== canvas) tempCanvas.remove();
});
}
function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) {
@ -396,11 +396,11 @@ class App extends React.Component<{}, AppState> {
if (event.key === "Escape") {
clearSelection();
drawScene();
this.forceUpdate();
event.preventDefault();
} else if (event.key === "Backspace") {
deleteSelectedElements();
drawScene();
this.forceUpdate();
event.preventDefault();
} else if (
event.key === "ArrowLeft" ||
@ -417,13 +417,13 @@ class App extends React.Component<{}, AppState> {
else if (event.key === "ArrowDown") element.y += step;
}
});
drawScene();
this.forceUpdate();
event.preventDefault();
} else if (event.key === "a" && event.metaKey) {
elements.forEach(element => {
element.isSelected = true;
});
drawScene();
this.forceUpdate();
event.preventDefault();
}
};
@ -443,7 +443,7 @@ class App extends React.Component<{}, AppState> {
onChange={() => {
this.setState({ elementType: type });
clearSelection();
drawScene();
this.forceUpdate();
}}
/>
{children}
@ -453,15 +453,6 @@ class App extends React.Component<{}, AppState> {
public render() {
return (
<>
<fieldset>
<legend>Shapes</legend>
{this.renderOption({ type: "rectangle", children: "Rectangle" })}
{this.renderOption({ type: "ellipse", children: "Ellipse" })}
{this.renderOption({ type: "arrow", children: "Arrow" })}
{this.renderOption({ type: "text", children: "Text" })}
{this.renderOption({ type: "selection", children: "Selection" })}
</fieldset>
<div
onCut={e => {
e.clipboardData.setData(
@ -469,7 +460,7 @@ class App extends React.Component<{}, AppState> {
JSON.stringify(elements.filter(element => element.isSelected))
);
deleteSelectedElements();
drawScene();
this.forceUpdate();
e.preventDefault();
}}
onCopy={e => {
@ -501,11 +492,20 @@ class App extends React.Component<{}, AppState> {
);
elements.push(parsedElement);
});
drawScene();
this.forceUpdate();
}
e.preventDefault();
}}
>
<fieldset>
<legend>Shapes</legend>
{this.renderOption({ type: "rectangle", children: "Rectangle" })}
{this.renderOption({ type: "ellipse", children: "Ellipse" })}
{this.renderOption({ type: "arrow", children: "Arrow" })}
{this.renderOption({ type: "text", children: "Text" })}
{this.renderOption({ type: "selection", children: "Selection" })}
</fieldset>
<canvas
id="canvas"
width={window.innerWidth}
@ -539,9 +539,7 @@ class App extends React.Component<{}, AppState> {
clearSelection();
}
isDraggingElements = elements.some(
element => element.isSelected
);
isDraggingElements = elements.some(element => element.isSelected);
if (isDraggingElements) {
document.documentElement.style.cursor = "move";
@ -564,8 +562,7 @@ class App extends React.Component<{}, AppState> {
} = context.measureText(element.text);
element.actualBoundingBoxAscent = actualBoundingBoxAscent;
context.font = font;
const height =
actualBoundingBoxAscent + actualBoundingBoxDescent;
const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
// Center the text
element.x -= width / 2;
element.y -= actualBoundingBoxAscent;
@ -609,7 +606,7 @@ class App extends React.Component<{}, AppState> {
});
lastX = x;
lastY = y;
drawScene();
this.forceUpdate();
return;
}
}
@ -633,7 +630,7 @@ class App extends React.Component<{}, AppState> {
if (this.state.elementType === "selection") {
setSelection(draggingElement);
}
drawScene();
this.forceUpdate();
};
const onMouseUp = (e: MouseEvent) => {
@ -647,7 +644,7 @@ class App extends React.Component<{}, AppState> {
// if no element is clicked, clear the selection and redraw
if (draggingElement === null) {
clearSelection();
drawScene();
this.forceUpdate();
return;
}
@ -664,16 +661,15 @@ class App extends React.Component<{}, AppState> {
draggingElement: null,
elementType: "selection"
});
drawScene();
this.forceUpdate();
};
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
drawScene();
this.forceUpdate();
}}
/>
</div>
<fieldset>
<legend>Colors</legend>
<label>
@ -752,9 +748,10 @@ class App extends React.Component<{}, AppState> {
/>
px)
</fieldset>
</>
</div>
);
}
componentDidUpdate() {
const fillStyle = context.fillStyle;
context.fillStyle = this.state.viewBgColor;
@ -794,8 +791,4 @@ const context = canvas.getContext("2d")!;
// https://stackoverflow.com/questions/13879322/drawing-a-1px-thick-line-in-canvas-creates-a-2px-thick-line/13879402#comment90766599_13879402
context.translate(0.5, 0.5);
function drawScene() {
ReactDOM.render(<App />, rootElement);
}
drawScene();
ReactDOM.render(<App />, rootElement);