Resize handler detection should not be active when moving multip… (#767)

* Fix bug.

* Implement `getSelectedElements`.

* Explicit condition.

* Respect variable naming.

* Keep state consistent.

* Use `isSomeElementSelected` abstraction.

* Missing ones.
This commit is contained in:
Enzo Ferey 2020-02-16 22:54:50 +01:00 committed by GitHub
parent ad72946131
commit 6ebd41734f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 53 additions and 37 deletions

View file

@ -36,6 +36,8 @@ import {
loadFromBlob,
getZoomOrigin,
getNormalizedZoom,
getSelectedElements,
isSomeElementSelected,
} from "./scene";
import { renderScene } from "./renderer";
@ -275,7 +277,7 @@ const LayerUI = React.memo(
const { elementType, editingElement } = appState;
const targetElements = editingElement
? [editingElement]
: elements.filter(el => el.isSelected);
: getSelectedElements(elements);
if (!targetElements.length && elementType === "selection") {
return null;
}
@ -1046,11 +1048,15 @@ export class App extends React.Component<any, AppState> {
{ x, y },
this.state.zoom,
);
this.setState({
resizingElement: resizeElement ? resizeElement.element : null,
});
if (resizeElement) {
const selectedElements = getSelectedElements(elements);
if (selectedElements.length === 1 && resizeElement) {
this.setState({
resizingElement: resizeElement
? resizeElement.element
: null,
});
resizeHandle = resizeElement.resizeHandle;
document.documentElement.style.cursor = getCursorForResizingElement(
resizeElement,
@ -1087,13 +1093,11 @@ export class App extends React.Component<any, AppState> {
...element,
isSelected: false,
})),
...elements
.filter(element => element.isSelected)
.map(element => {
const newElement = duplicateElement(element);
newElement.isSelected = true;
return newElement;
}),
...getSelectedElements(elements).map(element => {
const newElement = duplicateElement(element);
newElement.isSelected = true;
return newElement;
}),
];
}
}
@ -1328,7 +1332,7 @@ export class App extends React.Component<any, AppState> {
if (isResizingElements && this.state.resizingElement) {
this.setState({ isResizing: true });
const el = this.state.resizingElement;
const selectedElements = elements.filter(el => el.isSelected);
const selectedElements = getSelectedElements(elements);
if (selectedElements.length === 1) {
const { x, y } = viewportCoordsToSceneCoords(
e,
@ -1555,8 +1559,8 @@ export class App extends React.Component<any, AppState> {
// Marking that click was used for dragging to check
// if elements should be deselected on mouseup
draggingOccurred = true;
const selectedElements = elements.filter(el => el.isSelected);
if (selectedElements.length) {
const selectedElements = getSelectedElements(elements);
if (selectedElements.length > 0) {
const { x, y } = viewportCoordsToSceneCoords(
e,
this.state,
@ -1638,7 +1642,7 @@ export class App extends React.Component<any, AppState> {
draggingElement.shape = null;
if (this.state.elementType === "selection") {
if (!e.shiftKey && elements.some(el => el.isSelected)) {
if (!e.shiftKey && isSomeElementSelected(elements)) {
elements = clearSelection(elements);
}
const elementsWithinSelection = getElementsWithinSelection(
@ -1772,7 +1776,7 @@ export class App extends React.Component<any, AppState> {
if (
elementType !== "selection" ||
elements.some(el => el.isSelected)
isSomeElementSelected(elements)
) {
history.resumeRecording();
}
@ -1941,9 +1945,8 @@ export class App extends React.Component<any, AppState> {
return;
}
const selectedElements = elements.filter(e => e.isSelected)
.length;
if (selectedElements === 1) {
const selectedElements = getSelectedElements(elements);
if (selectedElements.length === 1) {
const resizeElement = getElementWithResizeHandler(
elements,
{ x, y },