Clear selection if no element is clicked

This commit is contained in:
Giovanni Giordano 2020-01-02 16:07:04 +01:00
parent 874934e585
commit 61bdedaecf

View File

@ -327,6 +327,7 @@ class App extends React.Component {
onMouseDown={e => { onMouseDown={e => {
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;
const element = newElement(this.state.elementType, x, y);
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") {
@ -341,8 +342,7 @@ class App extends React.Component {
if (isDraggingElements) { if (isDraggingElements) {
document.documentElement.style.cursor = "move"; document.documentElement.style.cursor = "move";
} }
} else { }
const element = newElement(this.state.elementType, x, y);
if (this.state.elementType === "text") { if (this.state.elementType === "text") {
const text = prompt("What text do you want?"); const text = prompt("What text do you want?");
@ -376,7 +376,6 @@ class App extends React.Component {
} else { } else {
this.setState({ draggingElement: element }); this.setState({ draggingElement: element });
} }
}
let lastX = x; let lastX = x;
let lastY = y; let lastY = y;
@ -417,22 +416,30 @@ class App extends React.Component {
}; };
const onMouseUp = e => { const onMouseUp = e => {
const { draggingElement, elementType } = this.state
window.removeEventListener("mousemove", onMouseMove); window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp); window.removeEventListener("mouseup", onMouseUp);
document.documentElement.style.cursor = cursorStyle; document.documentElement.style.cursor = cursorStyle;
const draggingElement = this.state.draggingElement; // if no element is clicked, clear the selection and redraw
if (draggingElement === null) { if (draggingElement === null) {
return; clearSelection()
drawScene();
return
} }
if (this.state.elementType === "selection") {
if (elementType === "selection") {
if (isDraggingElements) { if (isDraggingElements) {
isDraggingElements = false; isDraggingElements = false;
} }
elements.pop()
setSelection(draggingElement); setSelection(draggingElement);
} else { } else {
draggingElement.isSelected = true; draggingElement.isSelected = true;
} }
this.setState({ this.setState({
draggingElement: null, draggingElement: null,
elementType: "selection" elementType: "selection"