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

Added the elements array to the react state

Browse source
This commit is contained in:
André Bastos 2020-01-02 17:04:02 +00:00
parent 70bd7d874f
commit 6ec6e5d82e
1 changed files with 213 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/index.js
View file

@ -4,17 +4,15 @@ import rough from "roughjs/dist/rough.umd.js";
import "./styles.css"; import "./styles.css";
var elements = [];
function isInsideAnElement(x, y) { function isInsideAnElement(x, y) {
return (element) => { return element => {
const x1 = getElementAbsoluteX1(element) const x1 = getElementAbsoluteX1(element);
const x2 = getElementAbsoluteX2(element) const x2 = getElementAbsoluteX2(element);
const y1 = getElementAbsoluteY1(element) const y1 = getElementAbsoluteY1(element);
const y2 = getElementAbsoluteY2(element) const y2 = getElementAbsoluteY2(element);
return (x >= x1 && x <= x2) && (y >= y1 && y <= y2) return x >= x1 && x <= x2 && y >= y1 && y <= y2;
} };
} }
function newElement(type, x, y, width = 0, height = 0) { function newElement(type, x, y, width = 0, height = 0) {
@ -29,16 +27,16 @@ function newElement(type, x, y, width = 0, height = 0) {
return element; return element;
} }
function exportAsPNG({ background, visibleOnly, padding = 10 }) { function exportAsPNG(elements, { background, visibleOnly, padding = 10 }) {
clearSelection(); const clearedElements = clearSelection(elements);
drawScene(); drawScene(clearedElements);
let subCanvasX1 = Infinity; let subCanvasX1 = Infinity;
let subCanvasX2 = 0; let subCanvasX2 = 0;
let subCanvasY1 = Infinity; let subCanvasY1 = Infinity;
let subCanvasY2 = 0; let subCanvasY2 = 0;
elements.forEach(element => { clearedElements.forEach(element => {
subCanvasX1 = Math.min(subCanvasX1, getElementAbsoluteX1(element)); subCanvasX1 = Math.min(subCanvasX1, getElementAbsoluteX1(element));
subCanvasX2 = Math.max(subCanvasX2, getElementAbsoluteX2(element)); subCanvasX2 = Math.max(subCanvasX2, getElementAbsoluteX2(element));
subCanvasY1 = Math.min(subCanvasY1, getElementAbsoluteY1(element)); subCanvasY1 = Math.min(subCanvasY1, getElementAbsoluteY1(element));
@ -48,12 +46,12 @@ function exportAsPNG({ background, visibleOnly, padding = 10 }) {
let targetCanvas = canvas; let targetCanvas = canvas;
if (visibleOnly) { if (visibleOnly) {
targetCanvas = document.createElement('canvas'); targetCanvas = document.createElement("canvas");
targetCanvas.style.display = 'none'; targetCanvas.style.display = "none";
document.body.appendChild(targetCanvas); document.body.appendChild(targetCanvas);
targetCanvas.width = subCanvasX2 - subCanvasX1 + padding * 2; targetCanvas.width = subCanvasX2 - subCanvasX1 + padding * 2;
targetCanvas.height = subCanvasY2 - subCanvasY1 + padding * 2; targetCanvas.height = subCanvasY2 - subCanvasY1 + padding * 2;
const targetCanvas_ctx = targetCanvas.getContext('2d'); const targetCanvas_ctx = targetCanvas.getContext("2d");
if (background) { if (background) {
targetCanvas_ctx.fillStyle = "#FFF"; targetCanvas_ctx.fillStyle = "#FFF";
@ -73,9 +71,9 @@ function exportAsPNG({ background, visibleOnly, padding = 10 }) {
); );
} }
const link = document.createElement('a'); const link = document.createElement("a");
link.setAttribute('download', 'excalibur.png'); link.setAttribute("download", "excalibur.png");
link.setAttribute('href', targetCanvas.toDataURL("image/png")); link.setAttribute("href", targetCanvas.toDataURL("image/png"));
link.click(); link.click();
link.remove(); link.remove();
if (targetCanvas !== canvas) targetCanvas.remove(); if (targetCanvas !== canvas) targetCanvas.remove();
@ -185,7 +183,7 @@ function getElementAbsoluteY2(element) {
return element.height >= 0 ? element.y + element.height : element.y; return element.height >= 0 ? element.y + element.height : element.y;
} }
function setSelection(selection) { function setSelection(elements, selection) {
const selectionX1 = getElementAbsoluteX1(selection); const selectionX1 = getElementAbsoluteX1(selection);
const selectionX2 = getElementAbsoluteX2(selection); const selectionX2 = getElementAbsoluteX2(selection);
const selectionY1 = getElementAbsoluteY1(selection); const selectionY1 = getElementAbsoluteY1(selection);
@ -204,14 +202,13 @@ function setSelection(selection) {
}); });
} }
function clearSelection() { function clearSelection(elements) {
elements.forEach(element => { return elements.map(e => ({ ...e, isSelected: false }));
element.isSelected = false;
});
} }
class App extends React.Component { class App extends React.Component {
componentDidMount() { componentDidMount() {
const { elements } = this.state;
this.onKeyDown = event => { this.onKeyDown = event => {
if (event.key === "Backspace" && event.target.nodeName !== "INPUT") { if (event.key === "Backspace" && event.target.nodeName !== "INPUT") {
for (var i = elements.length - 1; i >= 0; --i) { for (var i = elements.length - 1; i >= 0; --i) {
@ -219,7 +216,7 @@ class App extends React.Component {
elements.splice(i, 1); elements.splice(i, 1);
} }
} }
drawScene(); drawScene(elements);
event.preventDefault(); event.preventDefault();
} else if ( } else if (
event.key === "ArrowLeft" || event.key === "ArrowLeft" ||
@ -236,7 +233,7 @@ class App extends React.Component {
else if (event.key === "ArrowDown") element.y += step; else if (event.key === "ArrowDown") element.y += step;
} }
}); });
drawScene(); drawScene(elements);
event.preventDefault(); event.preventDefault();
} }
}; };
@ -250,6 +247,7 @@ class App extends React.Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
elements: [],
draggingElement: null, draggingElement: null,
elementType: "selection", elementType: "selection",
exportBackground: false, exportBackground: false,
@ -267,8 +265,8 @@ class App extends React.Component {
checked={this.state.elementType === type} checked={this.state.elementType === type}
onChange={() => { onChange={() => {
this.setState({ elementType: type }); this.setState({ elementType: type });
clearSelection(); clearSelection(this.state.elements);
drawScene(); drawScene(this.state.elements);
}} }}
/> />
{children} {children}
@ -276,38 +274,49 @@ class App extends React.Component {
); );
}; };
return <> return (
<>
<div className="exportWrapper"> <div className="exportWrapper">
<button onClick={() => { <button
exportAsPNG({ onClick={() => {
exportAsPNG(this.state.elements, {
background: this.state.exportBackground, background: this.state.exportBackground,
visibleOnly: this.state.exportVisibleOnly, visibleOnly: this.state.exportVisibleOnly,
padding: this.state.exportPadding padding: this.state.exportPadding
}) });
}}>Export to png</button> }}
>
Export to png
</button>
<label> <label>
<input type="checkbox" <input
type="checkbox"
checked={this.state.exportBackground} checked={this.state.exportBackground}
onChange={e => { onChange={e => {
this.setState({ exportBackground: e.target.checked }) this.setState({ exportBackground: e.target.checked });
}} }}
/> background />{" "}
background
</label> </label>
<label> <label>
<input type="checkbox" <input
type="checkbox"
checked={this.state.exportVisibleOnly} checked={this.state.exportVisibleOnly}
onChange={e => { onChange={e => {
this.setState({ exportVisibleOnly: e.target.checked }) this.setState({ exportVisibleOnly: e.target.checked });
}} }}
/> />
visible area only visible area only
</label> </label>
(padding: (padding:
<input type="number" value={this.state.exportPadding} <input
type="number"
value={this.state.exportPadding}
onChange={e => { onChange={e => {
this.setState({ exportPadding: e.target.value }); this.setState({ exportPadding: e.target.value });
}} }}
disabled={!this.state.exportVisibleOnly}/> disabled={!this.state.exportVisibleOnly}
/>
px) px)
</div> </div>
<div> <div>
@ -331,13 +340,17 @@ class App extends React.Component {
let isDraggingElements = false; let isDraggingElements = false;
const cursorStyle = document.documentElement.style.cursor; const cursorStyle = document.documentElement.style.cursor;
if (this.state.elementType === "selection") { if (this.state.elementType === "selection") {
const selectedElement = elements.find(isInsideAnElement(x, y)) const selectedElement = this.state.elements.find(
isInsideAnElement(x, y)
);
if (selectedElement) { if (selectedElement) {
this.setState({ draggingElement: selectedElement }); this.setState({ draggingElement: selectedElement });
} }
isDraggingElements = elements.some(element => element.isSelected); isDraggingElements = this.state.elements.some(
element => element.isSelected
);
if (isDraggingElements) { if (isDraggingElements) {
document.documentElement.style.cursor = "move"; document.documentElement.style.cursor = "move";
@ -366,7 +379,8 @@ class App extends React.Component {
} }
generateDraw(element); generateDraw(element);
elements.push(element); const newElements = [...this.state.elements, element];
this.setState({ elements: newElements });
if (this.state.elementType === "text") { if (this.state.elementType === "text") {
this.setState({ this.setState({
draggingElement: null, draggingElement: null,
@ -382,7 +396,9 @@ class App extends React.Component {
const onMouseMove = e => { const onMouseMove = e => {
if (isDraggingElements) { if (isDraggingElements) {
const selectedElements = elements.filter(el => el.isSelected); const selectedElements = this.state.elements.filter(
el => el.isSelected
);
if (selectedElements.length) { if (selectedElements.length) {
const x = e.clientX - e.target.offsetLeft; const x = e.clientX - e.target.offsetLeft;
const y = e.clientY - e.target.offsetTop; const y = e.clientY - e.target.offsetTop;
@ -392,7 +408,7 @@ class App extends React.Component {
}); });
lastX = x; lastX = x;
lastY = y; lastY = y;
drawScene(); drawScene(this.state.elements);
return; return;
} }
} }
@ -410,13 +426,13 @@ class App extends React.Component {
generateDraw(draggingElement); generateDraw(draggingElement);
if (this.state.elementType === "selection") { if (this.state.elementType === "selection") {
setSelection(draggingElement); setSelection(this.state.elements, draggingElement);
} }
drawScene(); drawScene(this.state.elements);
}; };
const onMouseUp = e => { const onMouseUp = e => {
const { draggingElement, elementType } = this.state const { draggingElement, elementType } = this.state;
window.removeEventListener("mousemove", onMouseMove); window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp); window.removeEventListener("mouseup", onMouseUp);
@ -425,17 +441,21 @@ class App extends React.Component {
// if no element is clicked, clear the selection and redraw // if no element is clicked, clear the selection and redraw
if (draggingElement === null) { if (draggingElement === null) {
clearSelection() clearSelection(this.state.elements);
drawScene(); drawScene(this.state.elements);
return return;
} }
if (elementType === "selection") { if (elementType === "selection") {
if (isDraggingElements) { if (isDraggingElements) {
isDraggingElements = false; isDraggingElements = false;
} }
elements.pop() const newElements = this.state.elements;
setSelection(draggingElement); newElements.pop();
this.setState({
elements: newElements
});
setSelection(this.state.elements, draggingElement);
} else { } else {
draggingElement.isSelected = true; draggingElement.isSelected = true;
} }
@ -444,17 +464,18 @@ class App extends React.Component {
draggingElement: null, draggingElement: null,
elementType: "selection" elementType: "selection"
}); });
drawScene(); drawScene(this.state.elements);
}; };
window.addEventListener("mousemove", onMouseMove); window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp); window.addEventListener("mouseup", onMouseUp);
drawScene(); drawScene(this.state.elements);
}} }}
/> />
</div> </div>
</>; </>
);
} }
} }
@ -468,7 +489,7 @@ 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 // 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); context.translate(0.5, 0.5);
function drawScene() { function drawScene(elements) {
ReactDOM.render(<App />, rootElement); ReactDOM.render(<App />, rootElement);
context.clearRect(-0.5, -0.5, canvas.width, canvas.height); context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
@ -495,4 +516,4 @@ function drawScene() {
}); });
} }
drawScene(); drawScene([]);