diff --git a/src/components/App.tsx b/src/components/App.tsx index 48eda7677..373ff7b66 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -3944,7 +3944,7 @@ class App extends React.Component { const [gridX, gridY] = getGridPoint( scenePointerX, scenePointerY, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const [lastCommittedX, lastCommittedY] = @@ -4761,7 +4761,11 @@ class App extends React.Component { origin, withCmdOrCtrl: event[KEYS.CTRL_OR_CMD], originInGrid: tupleToCoors( - getGridPoint(origin.x, origin.y, this.state.gridSize), + getGridPoint( + origin.x, + origin.y, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, + ), ), scrollbars: isOverScrollBars( currentScrollBars, @@ -5285,7 +5289,11 @@ class App extends React.Component { sceneY: number; link: string; }) => { - const [gridX, gridY] = getGridPoint(sceneX, sceneY, this.state.gridSize); + const [gridX, gridY] = getGridPoint( + sceneX, + sceneY, + this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, + ); const embedLink = getEmbedLink(link); @@ -5331,7 +5339,11 @@ class App extends React.Component { sceneX: number; sceneY: number; }) => { - const [gridX, gridY] = getGridPoint(sceneX, sceneY, this.state.gridSize); + const [gridX, gridY] = getGridPoint( + sceneX, + sceneY, + this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, + ); const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x: gridX, @@ -5414,7 +5426,7 @@ class App extends React.Component { const [gridX, gridY] = getGridPoint( pointerDownState.origin.x, pointerDownState.origin.y, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ @@ -5507,7 +5519,7 @@ class App extends React.Component { const [gridX, gridY] = getGridPoint( pointerDownState.origin.x, pointerDownState.origin.y, - this.state.gridSize, + this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ @@ -5565,7 +5577,7 @@ class App extends React.Component { const [gridX, gridY] = getGridPoint( pointerDownState.origin.x, pointerDownState.origin.y, - this.state.gridSize, + this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const frame = newFrameElement({ @@ -5648,7 +5660,7 @@ class App extends React.Component { const [gridX, gridY] = getGridPoint( pointerCoords.x, pointerCoords.y, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); // for arrows/lines, don't start dragging until a given threshold @@ -5694,6 +5706,7 @@ class App extends React.Component { this.state.selectedLinearElement, pointerCoords, this.state, + !event[KEYS.CTRL_OR_CMD], ); if (!ret) { return; @@ -5819,7 +5832,7 @@ class App extends React.Component { const [dragX, dragY] = getGridPoint( pointerCoords.x - pointerDownState.drag.offset.x, pointerCoords.y - pointerDownState.drag.offset.y, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const [dragDistanceX, dragDistanceY] = [ @@ -5886,7 +5899,7 @@ class App extends React.Component { const [originDragX, originDragY] = getGridPoint( pointerDownState.origin.x - pointerDownState.drag.offset.x, pointerDownState.origin.y - pointerDownState.drag.offset.y, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); mutateElement(duplicatedElement, { x: duplicatedElement.x + (originDragX - dragX), @@ -7679,7 +7692,7 @@ class App extends React.Component { const [gridX, gridY] = getGridPoint( pointerCoords.x, pointerCoords.y, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const image = @@ -7748,7 +7761,7 @@ class App extends React.Component { const [resizeX, resizeY] = getGridPoint( pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, - this.state.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize, ); const frameElementsOffsetsMap = new Map< diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx index 611f24925..18dba0e11 100644 --- a/src/components/HintViewer.tsx +++ b/src/components/HintViewer.tsx @@ -83,27 +83,36 @@ const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => { if (activeTool.type === "selection") { if ( appState.draggingElement?.type === "selection" && + !selectedElements.length && !appState.editingElement && !appState.editingLinearElement ) { return t("hints.deepBoxSelect"); } + + if (appState.gridSize && appState.draggingElement) { + return t("hints.disableSnapping"); + } + if (!selectedElements.length && !isMobile) { return t("hints.canvasPanning"); } - } - if (selectedElements.length === 1) { - if (isLinearElement(selectedElements[0])) { - if (appState.editingLinearElement) { - return appState.editingLinearElement.selectedPointsIndices - ? t("hints.lineEditor_pointSelected") - : t("hints.lineEditor_nothingSelected"); + if (selectedElements.length === 1) { + if (isLinearElement(selectedElements[0])) { + if (appState.editingLinearElement) { + return appState.editingLinearElement.selectedPointsIndices + ? t("hints.lineEditor_pointSelected") + : t("hints.lineEditor_nothingSelected"); + } + return t("hints.lineEditor_info"); + } + if ( + !appState.draggingElement && + isTextBindableContainer(selectedElements[0]) + ) { + return t("hints.bindTextToElement"); } - return t("hints.lineEditor_info"); - } - if (isTextBindableContainer(selectedElements[0])) { - return t("hints.bindTextToElement"); } } diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts index f0dee4faa..adc5aafc4 100644 --- a/src/element/linearElementEditor.ts +++ b/src/element/linearElementEditor.ts @@ -42,7 +42,7 @@ import { } from "./binding"; import { tupleToCoors } from "../utils"; import { isBindingElement } from "./typeChecks"; -import { shouldRotateWithDiscreteAngle } from "../keys"; +import { KEYS, shouldRotateWithDiscreteAngle } from "../keys"; import { getBoundTextElement, handleBindTextResize } from "./textElement"; import { DRAGGING_THRESHOLD } from "../constants"; import { Mutable } from "../utility-types"; @@ -221,7 +221,7 @@ export class LinearElementEditor { element, referencePoint, [scenePointerX, scenePointerY], - appState.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize, ); LinearElementEditor.movePoints(element, [ @@ -238,7 +238,7 @@ export class LinearElementEditor { element, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, - appState.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize, ); const deltaX = newDraggingPointPosition[0] - draggingPoint[0]; @@ -254,7 +254,7 @@ export class LinearElementEditor { element, scenePointerX - linearElementEditor.pointerOffset.x, scenePointerY - linearElementEditor.pointerOffset.y, - appState.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize, ) : ([ element.points[pointIndex][0] + deltaX, @@ -647,7 +647,7 @@ export class LinearElementEditor { element, scenePointer.x, scenePointer.y, - appState.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize, ), ], }); @@ -798,7 +798,7 @@ export class LinearElementEditor { element, lastCommittedPoint, [scenePointerX, scenePointerY], - appState.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize, ); newPoint = [ @@ -810,7 +810,7 @@ export class LinearElementEditor { element, scenePointerX - appState.editingLinearElement.pointerOffset.x, scenePointerY - appState.editingLinearElement.pointerOffset.y, - appState.gridSize, + event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize, ); } @@ -1176,6 +1176,7 @@ export class LinearElementEditor { linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, + snapToGrid: boolean, ) { const element = LinearElementEditor.getElement( linearElementEditor.elementId, @@ -1196,7 +1197,7 @@ export class LinearElementEditor { element, pointerCoords.x, pointerCoords.y, - appState.gridSize, + snapToGrid ? appState.gridSize : null, ); const points = [ ...element.points.slice(0, segmentMidpoint.index!), diff --git a/src/locales/en.json b/src/locales/en.json index 938535c5e..6799d0649 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -264,7 +264,8 @@ "bindTextToElement": "Press enter to add text", "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging", "eraserRevert": "Hold Alt to revert the elements marked for deletion", - "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page." + "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page.", + "disableSnapping": "Hold CtrlOrCmd to disable snapping" }, "canvasError": { "cannotShowPreview": "Cannot show preview",