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

Select element on click

Browse Source
This commit is contained in:
Giovanni Giordano 2020-01-02 12:43:04 +01:00
parent 6ef7b3d5e8
commit a9bd112f47
1 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/index.js
View File

@ -6,6 +6,17 @@ import "./styles.css";
var elements = []; 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) { function newElement(type, x, y) {
const element = { const element = {
type: type, type: type,
@ -228,56 +239,55 @@ 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") {
isDraggingElements = elements.some(el => { const selectedElement = elements.find(isInsideAnElement(x, y))
if (el.isSelected) {
const minX = Math.min(el.x, el.x + el.width); if (selectedElement) {
const maxX = Math.max(el.x, el.x + el.width); this.setState({ draggingElement: selectedElement });
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; isDraggingElements = elements.some(element => element.isSelected && isInsideAnElement(x, y));
}
});
if (isDraggingElements) { if (isDraggingElements) {
document.documentElement.style.cursor = "move"; document.documentElement.style.cursor = "move";
} }
}
if (this.state.elementType === "text") {
const text = prompt("What text do you want?");
if (text === null) {
return;
}
element.text = text;
element.font = "20px Virgil";
const font = context.font;
context.font = element.font;
element.measure = context.measureText(element.text);
context.font = font;
const height =
element.measure.actualBoundingBoxAscent +
element.measure.actualBoundingBoxDescent;
// Center the text
element.x -= element.measure.width / 2;
element.y -= element.measure.actualBoundingBoxAscent;
element.width = element.measure.width;
element.height = height;
}
generateDraw(element);
elements.push(element);
if (this.state.elementType === "text") {
this.setState({
draggingElement: null,
elementType: "selection"
});
element.isSelected = true;
} else { } else {
this.setState({ draggingElement: element }); const element = newElement(this.state.elementType, x, y);
if (this.state.elementType === "text") {
const text = prompt("What text do you want?");
if (text === null) {
return;
}
element.text = text;
element.font = "20px Virgil";
const font = context.font;
context.font = element.font;
element.measure = context.measureText(element.text);
context.font = font;
const height =
element.measure.actualBoundingBoxAscent +
element.measure.actualBoundingBoxDescent;
// Center the text
element.x -= element.measure.width / 2;
element.y -= element.measure.actualBoundingBoxAscent;
element.width = element.measure.width;
element.height = height;
}
generateDraw(element);
elements.push(element);
if (this.state.elementType === "text") {
this.setState({
draggingElement: null,
elementType: "selection"
});
element.isSelected = true;
} else {
this.setState({ draggingElement: element });
}
} }
let lastX = x; let lastX = x;
@ -330,11 +340,8 @@ class App extends React.Component {
if (this.state.elementType === "selection") { if (this.state.elementType === "selection") {
if (isDraggingElements) { if (isDraggingElements) {
isDraggingElements = false; isDraggingElements = false;
} else { }
// Remove actual selection element setSelection(draggingElement);
setSelection(draggingElement);
}
elements.pop();
} else { } else {
draggingElement.isSelected = true; draggingElement.isSelected = true;
} }