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

Merge pull request #29 from giovannigiordano/select-on-click

Browse Source 
Select element on click
This commit is contained in:
Giovanni Giordano 2020-01-02 16:37:13 +01:00 committed by GitHub
commit 70bd7d874f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/index.js
View File

@ -6,6 +6,17 @@ 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 (x >= x1 && x <= x2) && (y >= y1 && y <= y2)
}
}
function newElement(type, x, y, width = 0, height = 0) {
const element = {
type: type,
@ -317,19 +328,17 @@ class App extends React.Component {
const x = e.clientX - e.target.offsetLeft;
const y = e.clientY - e.target.offsetTop;
const element = newElement(this.state.elementType, x, y);
let isDraggingElements = false;
const cursorStyle = document.documentElement.style.cursor;
if (this.state.elementType === "selection") {
isDraggingElements = elements.some(el => {
if (el.isSelected) {
const minX = Math.min(el.x, el.x + el.width);
const maxX = Math.max(el.x, el.x + el.width);
const minY = Math.min(el.y, el.y + el.height);
const maxY = Math.max(el.y, el.y + el.height);
return minX <= x && x <= maxX && minY <= y && y <= maxY;
const selectedElement = elements.find(isInsideAnElement(x, y))
if (selectedElement) {
this.setState({ draggingElement: selectedElement });
}
});
isDraggingElements = elements.some(element => element.isSelected);
if (isDraggingElements) {
document.documentElement.style.cursor = "move";
}
@ -407,25 +416,30 @@ class App extends React.Component {
};
const onMouseUp = e => {
const { draggingElement, elementType } = this.state
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
document.documentElement.style.cursor = cursorStyle;
const draggingElement = this.state.draggingElement;
// if no element is clicked, clear the selection and redraw
if (draggingElement === null) {
return;
clearSelection()
drawScene();
return
}
if (this.state.elementType === "selection") {
if (elementType === "selection") {
if (isDraggingElements) {
isDraggingElements = false;
} else {
// Remove actual selection element
setSelection(draggingElement);
}
elements.pop();
elements.pop()
setSelection(draggingElement);
} else {
draggingElement.isSelected = true;
}
this.setState({
draggingElement: null,
elementType: "selection"