diff --git a/src/index.js b/src/index.js
index d8598f98..aa25315e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -105,12 +105,25 @@ function generateShape(element) {
}
function setSelection(selection) {
+ // Fix up negative width and height when dragging from right to left
+ // Note: it's a lot harder to do on mouse move because of rounding issues
+ let { x, y, width, height } = selection;
+ if (width < 0) {
+ x += width;
+ width = -width;
+ }
+ if (height < 0) {
+ y += height;
+ height = -height;
+ }
+
elements.forEach(element => {
element.isSelected =
- selection.x < element.x &&
- selection.y < element.y &&
- selection.x + selection.width > element.x + element.width &&
- selection.y + selection.height > element.y + element.height;
+ element.type !== "selection" &&
+ x <= element.x &&
+ y <= element.y &&
+ x + width >= element.x + element.width &&
+ y + height >= element.y + element.height;
});
}
@@ -148,8 +161,10 @@ function App() {
}
return (
- {/* If using a component, dragging on the canvas also selects the label text which is annoying.
- Not sure why that's happening */}
+ {/* Can't use the form because ElementOption is re-defined
+ on every render, which would blow up and re-create the entire DOM tree,
+ which in addition to being inneficient, messes up with browser text
+ selection */}
{ElementOption({ type: "rectangle", children: "Rectangle" })}
{ElementOption({ type: "ellipse", children: "Ellipse" })}
{ElementOption({ type: "arrow", children: "Arrow" })}
@@ -197,6 +212,16 @@ function App() {
elements.pop();
setSelection(draggingElement);
}
+ // Fix up negative width and height when dragging from right to left
+ // Note: it's a lot harder to do on mouse move because of rounding issues
+ if (draggingElement.width < 0) {
+ draggingElement.x += draggingElement.width;
+ draggingElement.width = -draggingElement.width;
+ }
+ if (draggingElement.height < 0) {
+ draggingElement.y += draggingElement.height;
+ draggingElement.height = -draggingElement.height;
+ }
drawScene();
}}
onMouseMove={e => {