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 => {