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