From 2d2f7edaa94767d5ea054a9ed4ba696f2ae6825b Mon Sep 17 00:00:00 2001 From: Mark Tolmacs Date: Wed, 19 Mar 2025 20:55:59 +0100 Subject: [PATCH] Test for group alt+drag --- .../regressionTests.test.tsx.snap | 1264 +++++++++-------- .../excalidraw/tests/regressionTests.test.tsx | 71 + 2 files changed, 780 insertions(+), 555 deletions(-) diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index df60cac41..c44ffe144 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -1,557 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`duplication z-order > duplication z order for the highest z-ordered element should be +1 for the clone > [end of test] appState 1`] = ` -{ - "activeEmbeddable": null, - "activeTool": { - "customType": null, - "lastActiveTool": null, - "locked": false, - "type": "selection", - }, - "collaborators": Map {}, - "contextMenu": null, - "croppingElementId": null, - "currentChartType": "bar", - "currentHoveredFontFamily": null, - "currentItemArrowType": "round", - "currentItemBackgroundColor": "transparent", - "currentItemEndArrowhead": "arrow", - "currentItemFillStyle": "solid", - "currentItemFontFamily": 5, - "currentItemFontSize": 20, - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemRoundness": "round", - "currentItemStartArrowhead": null, - "currentItemStrokeColor": "#1e1e1e", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 2, - "currentItemTextAlign": "left", - "cursorButton": "up", - "defaultSidebarDockedPreference": false, - "editingFrame": null, - "editingGroupId": null, - "editingLinearElement": null, - "editingTextElement": null, - "elementsToHighlight": null, - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "exportScale": 1, - "exportWithDarkMode": false, - "fileHandle": null, - "followedBy": Set {}, - "frameRendering": { - "clip": true, - "enabled": true, - "name": true, - "outline": true, - }, - "frameToHighlight": null, - "gridModeEnabled": false, - "gridSize": 20, - "gridStep": 5, - "height": 0, - "hoveredElementIds": {}, - "isBindingEnabled": true, - "isCropping": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "newElement": null, - "objectsSnapModeEnabled": false, - "offsetLeft": 0, - "offsetTop": 0, - "openDialog": null, - "openMenu": null, - "openPopup": null, - "openSidebar": null, - "originSnapOffset": { - "x": 0, - "y": 0, - }, - "pasteDialog": { - "data": null, - "shown": false, - }, - "penDetected": false, - "penMode": false, - "pendingImageElementId": null, - "previousSelectedElementIds": {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "searchMatches": [], - "selectedElementIds": { - "id3": true, - }, - "selectedElementsAreBeingDragged": false, - "selectedGroupIds": {}, - "selectedLinearElement": null, - "selectionElement": null, - "shouldCacheIgnoreZoom": false, - "showHyperlinkPopup": false, - "showWelcomeScreen": true, - "snapLines": [], - "startBoundElement": null, - "stats": { - "open": false, - "panels": 3, - }, - "suggestedBindings": [], - "theme": "light", - "toast": null, - "userToFollow": null, - "viewBackgroundColor": "#ffffff", - "viewModeEnabled": false, - "width": 0, - "zenModeEnabled": false, - "zoom": { - "value": 1, - }, -} -`; - -exports[`duplication z-order > duplication z order for the highest z-ordered element should be +1 for the clone > [end of test] history 1`] = ` -History { - "onHistoryChangedEmitter": Emitter { - "subscribers": [], - }, - "redoStack": [], - "undoStack": [ - HistoryEntry { - "appStateChange": AppStateChange { - "delta": Delta { - "deleted": { - "selectedElementIds": { - "id3": true, - }, - }, - "inserted": { - "selectedElementIds": {}, - }, - }, - }, - "elementsChange": ElementsChange { - "added": Map {}, - "removed": Map { - "id0" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a0", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 0, - "y": 0, - }, - "inserted": { - "isDeleted": true, - }, - }, - "id1" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a1", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 10, - "y": 10, - }, - "inserted": { - "isDeleted": true, - }, - }, - "id2" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a2", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 20, - "y": 20, - }, - "inserted": { - "isDeleted": true, - }, - }, - "id3" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a3", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 30, - "y": 30, - }, - "inserted": { - "isDeleted": true, - }, - }, - }, - "updated": Map {}, - }, - }, - ], -} -`; - -exports[`duplication z-order > duplication z order for the highest z-ordered element should be +1 for the clone > [end of test] number of elements 1`] = `0`; - -exports[`duplication z-order > duplication z order for the highest z-ordered element should be +1 for the clone > [end of test] number of renders 1`] = `10`; - -exports[`duplication z-order > duplication z order for the lowest z-ordered element should be +1 for the clone > [end of test] appState 1`] = ` -{ - "activeEmbeddable": null, - "activeTool": { - "customType": null, - "lastActiveTool": null, - "locked": false, - "type": "selection", - }, - "collaborators": Map {}, - "contextMenu": null, - "croppingElementId": null, - "currentChartType": "bar", - "currentHoveredFontFamily": null, - "currentItemArrowType": "round", - "currentItemBackgroundColor": "transparent", - "currentItemEndArrowhead": "arrow", - "currentItemFillStyle": "solid", - "currentItemFontFamily": 5, - "currentItemFontSize": 20, - "currentItemOpacity": 100, - "currentItemRoughness": 1, - "currentItemRoundness": "round", - "currentItemStartArrowhead": null, - "currentItemStrokeColor": "#1e1e1e", - "currentItemStrokeStyle": "solid", - "currentItemStrokeWidth": 2, - "currentItemTextAlign": "left", - "cursorButton": "up", - "defaultSidebarDockedPreference": false, - "editingFrame": null, - "editingGroupId": null, - "editingLinearElement": null, - "editingTextElement": null, - "elementsToHighlight": null, - "errorMessage": null, - "exportBackground": true, - "exportEmbedScene": false, - "exportScale": 1, - "exportWithDarkMode": false, - "fileHandle": null, - "followedBy": Set {}, - "frameRendering": { - "clip": true, - "enabled": true, - "name": true, - "outline": true, - }, - "frameToHighlight": null, - "gridModeEnabled": false, - "gridSize": 20, - "gridStep": 5, - "height": 0, - "hoveredElementIds": {}, - "isBindingEnabled": true, - "isCropping": false, - "isLoading": false, - "isResizing": false, - "isRotating": false, - "lastPointerDownWith": "mouse", - "multiElement": null, - "name": "Untitled-201933152653", - "newElement": null, - "objectsSnapModeEnabled": false, - "offsetLeft": 0, - "offsetTop": 0, - "openDialog": null, - "openMenu": null, - "openPopup": null, - "openSidebar": null, - "originSnapOffset": { - "x": 0, - "y": 0, - }, - "pasteDialog": { - "data": null, - "shown": false, - }, - "penDetected": false, - "penMode": false, - "pendingImageElementId": null, - "previousSelectedElementIds": {}, - "resizingElement": null, - "scrollX": 0, - "scrollY": 0, - "scrolledOutside": false, - "searchMatches": [], - "selectedElementIds": { - "id3": true, - }, - "selectedElementsAreBeingDragged": false, - "selectedGroupIds": {}, - "selectedLinearElement": null, - "selectionElement": null, - "shouldCacheIgnoreZoom": false, - "showHyperlinkPopup": false, - "showWelcomeScreen": true, - "snapLines": [], - "startBoundElement": null, - "stats": { - "open": false, - "panels": 3, - }, - "suggestedBindings": [], - "theme": "light", - "toast": null, - "userToFollow": null, - "viewBackgroundColor": "#ffffff", - "viewModeEnabled": false, - "width": 0, - "zenModeEnabled": false, - "zoom": { - "value": 1, - }, -} -`; - -exports[`duplication z-order > duplication z order for the lowest z-ordered element should be +1 for the clone > [end of test] history 1`] = ` -History { - "onHistoryChangedEmitter": Emitter { - "subscribers": [], - }, - "redoStack": [], - "undoStack": [ - HistoryEntry { - "appStateChange": AppStateChange { - "delta": Delta { - "deleted": { - "selectedElementIds": { - "id3": true, - }, - }, - "inserted": { - "selectedElementIds": {}, - }, - }, - }, - "elementsChange": ElementsChange { - "added": Map {}, - "removed": Map { - "id0" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a0", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 0, - "y": 0, - }, - "inserted": { - "isDeleted": true, - }, - }, - "id3" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a0V", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 10, - "y": 10, - }, - "inserted": { - "isDeleted": true, - }, - }, - "id1" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a1", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 10, - "y": 10, - }, - "inserted": { - "isDeleted": true, - }, - }, - "id2" => Delta { - "deleted": { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": null, - "customData": undefined, - "fillStyle": "solid", - "frameId": null, - "groupIds": [], - "height": 100, - "index": "a2", - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": { - "type": 3, - }, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "rectangle", - "width": 100, - "x": 20, - "y": 20, - }, - "inserted": { - "isDeleted": true, - }, - }, - }, - "updated": Map {}, - }, - }, - ], -} -`; - -exports[`duplication z-order > duplication z order for the lowest z-ordered element should be +1 for the clone > [end of test] number of elements 1`] = `0`; - -exports[`duplication z-order > duplication z order for the lowest z-ordered element should be +1 for the clone > [end of test] number of renders 1`] = `10`; - exports[`duplication z-order > duplication z order with Cmd+D for the highest z-ordered element should be +1 for the clone > [end of test] appState 1`] = ` { "activeEmbeddable": null, @@ -1520,6 +968,122 @@ exports[`duplication z-order > duplication z order with alt+drag for the lowest } `; +exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] appState 2`] = ` +{ + "activeEmbeddable": null, + "activeTool": { + "customType": null, + "lastActiveTool": null, + "locked": false, + "type": "selection", + }, + "collaborators": Map {}, + "contextMenu": null, + "croppingElementId": null, + "currentChartType": "bar", + "currentHoveredFontFamily": null, + "currentItemArrowType": "round", + "currentItemBackgroundColor": "transparent", + "currentItemEndArrowhead": "arrow", + "currentItemFillStyle": "solid", + "currentItemFontFamily": 5, + "currentItemFontSize": 20, + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemRoundness": "round", + "currentItemStartArrowhead": null, + "currentItemStrokeColor": "#1e1e1e", + "currentItemStrokeStyle": "solid", + "currentItemStrokeWidth": 2, + "currentItemTextAlign": "left", + "cursorButton": "up", + "defaultSidebarDockedPreference": false, + "editingFrame": null, + "editingGroupId": null, + "editingLinearElement": null, + "editingTextElement": null, + "elementsToHighlight": null, + "errorMessage": null, + "exportBackground": true, + "exportEmbedScene": false, + "exportScale": 1, + "exportWithDarkMode": false, + "fileHandle": null, + "followedBy": Set {}, + "frameRendering": { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, + "frameToHighlight": null, + "gridModeEnabled": false, + "gridSize": 20, + "gridStep": 5, + "height": 0, + "hoveredElementIds": {}, + "isBindingEnabled": true, + "isCropping": false, + "isLoading": false, + "isResizing": false, + "isRotating": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "Untitled-201933152653", + "newElement": null, + "objectsSnapModeEnabled": false, + "offsetLeft": 0, + "offsetTop": 0, + "openDialog": null, + "openMenu": null, + "openPopup": null, + "openSidebar": null, + "originSnapOffset": null, + "pasteDialog": { + "data": null, + "shown": false, + }, + "penDetected": false, + "penMode": false, + "pendingImageElementId": null, + "previousSelectedElementIds": { + "id0": true, + }, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "searchMatches": [], + "selectedElementIds": { + "id0": true, + }, + "selectedElementsAreBeingDragged": false, + "selectedGroupIds": {}, + "selectedLinearElement": null, + "selectionElement": null, + "shouldCacheIgnoreZoom": false, + "showHyperlinkPopup": false, + "showWelcomeScreen": true, + "snapLines": [], + "startBoundElement": null, + "stats": { + "open": false, + "panels": 3, + }, + "suggestedBindings": [], + "theme": "light", + "toast": null, + "userToFollow": null, + "viewBackgroundColor": "#ffffff", + "viewModeEnabled": false, + "width": 0, + "zenModeEnabled": false, + "zoom": { + "value": 1, + }, +} +`; + exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] history 1`] = ` History { "onHistoryChangedEmitter": Emitter { @@ -1700,10 +1264,600 @@ History { } `; +exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] history 2`] = ` +History { + "onHistoryChangedEmitter": Emitter { + "subscribers": [], + }, + "redoStack": [], + "undoStack": [ + HistoryEntry { + "appStateChange": AppStateChange { + "delta": Delta { + "deleted": { + "selectedElementIds": { + "id0": true, + }, + }, + "inserted": { + "selectedElementIds": {}, + }, + }, + }, + "elementsChange": ElementsChange { + "added": Map {}, + "removed": Map { + "id0" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [], + "height": 100, + "index": "a0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 0, + "y": 0, + }, + "inserted": { + "isDeleted": true, + }, + }, + "id1" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [], + "height": 100, + "index": "a1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 10, + "y": 10, + }, + "inserted": { + "isDeleted": true, + }, + }, + "id2" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [], + "height": 100, + "index": "a2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 20, + "y": 20, + }, + "inserted": { + "isDeleted": true, + }, + }, + }, + "updated": Map {}, + }, + }, + HistoryEntry { + "appStateChange": AppStateChange { + "delta": Delta { + "deleted": {}, + "inserted": {}, + }, + }, + "elementsChange": ElementsChange { + "added": Map {}, + "removed": Map { + "id5" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [], + "height": 100, + "index": "Zz", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 0, + "y": 0, + }, + "inserted": { + "isDeleted": true, + }, + }, + }, + "updated": Map { + "id0" => Delta { + "deleted": { + "x": 5, + "y": 5, + }, + "inserted": { + "x": 0, + "y": 0, + }, + }, + }, + }, + }, + ], +} +`; + exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] number of elements 1`] = `0`; +exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] number of elements 2`] = `0`; + exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] number of renders 1`] = `11`; +exports[`duplication z-order > duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone > [end of test] number of renders 2`] = `11`; + +exports[`duplication z-order > duplication z order with alt+drag with grouped elements should consider the group together when determining z-index > [end of test] appState 1`] = ` +{ + "activeEmbeddable": null, + "activeTool": { + "customType": null, + "lastActiveTool": null, + "locked": false, + "type": "selection", + }, + "collaborators": Map {}, + "contextMenu": null, + "croppingElementId": null, + "currentChartType": "bar", + "currentHoveredFontFamily": null, + "currentItemArrowType": "round", + "currentItemBackgroundColor": "transparent", + "currentItemEndArrowhead": "arrow", + "currentItemFillStyle": "solid", + "currentItemFontFamily": 5, + "currentItemFontSize": 20, + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemRoundness": "round", + "currentItemStartArrowhead": null, + "currentItemStrokeColor": "#1e1e1e", + "currentItemStrokeStyle": "solid", + "currentItemStrokeWidth": 2, + "currentItemTextAlign": "left", + "cursorButton": "up", + "defaultSidebarDockedPreference": false, + "editingFrame": null, + "editingGroupId": null, + "editingLinearElement": null, + "editingTextElement": null, + "elementsToHighlight": null, + "errorMessage": null, + "exportBackground": true, + "exportEmbedScene": false, + "exportScale": 1, + "exportWithDarkMode": false, + "fileHandle": null, + "followedBy": Set {}, + "frameRendering": { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, + "frameToHighlight": null, + "gridModeEnabled": false, + "gridSize": 20, + "gridStep": 5, + "height": 0, + "hoveredElementIds": {}, + "isBindingEnabled": true, + "isCropping": false, + "isLoading": false, + "isResizing": false, + "isRotating": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "Untitled-201933152653", + "newElement": null, + "objectsSnapModeEnabled": false, + "offsetLeft": 0, + "offsetTop": 0, + "openDialog": null, + "openMenu": null, + "openPopup": null, + "openSidebar": null, + "originSnapOffset": null, + "pasteDialog": { + "data": null, + "shown": false, + }, + "penDetected": false, + "penMode": false, + "pendingImageElementId": null, + "previousSelectedElementIds": { + "id0": true, + "id1": true, + "id2": true, + }, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "searchMatches": [], + "selectedElementIds": { + "id0": true, + "id1": true, + "id2": true, + }, + "selectedElementsAreBeingDragged": false, + "selectedGroupIds": { + "group1": true, + }, + "selectedLinearElement": null, + "selectionElement": null, + "shouldCacheIgnoreZoom": false, + "showHyperlinkPopup": false, + "showWelcomeScreen": true, + "snapLines": [], + "startBoundElement": null, + "stats": { + "open": false, + "panels": 3, + }, + "suggestedBindings": [], + "theme": "light", + "toast": null, + "userToFollow": null, + "viewBackgroundColor": "#ffffff", + "viewModeEnabled": false, + "width": 0, + "zenModeEnabled": false, + "zoom": { + "value": 1, + }, +} +`; + +exports[`duplication z-order > duplication z order with alt+drag with grouped elements should consider the group together when determining z-index > [end of test] history 1`] = ` +History { + "onHistoryChangedEmitter": Emitter { + "subscribers": [], + }, + "redoStack": [], + "undoStack": [ + HistoryEntry { + "appStateChange": AppStateChange { + "delta": Delta { + "deleted": { + "selectedElementIds": { + "id0": true, + "id1": true, + "id2": true, + }, + "selectedGroupIds": { + "group1": true, + }, + }, + "inserted": { + "selectedElementIds": {}, + "selectedGroupIds": {}, + }, + }, + }, + "elementsChange": ElementsChange { + "added": Map {}, + "removed": Map { + "id0" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "group1", + ], + "height": 100, + "index": "a0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 0, + "y": 0, + }, + "inserted": { + "isDeleted": true, + }, + }, + "id1" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "group1", + ], + "height": 100, + "index": "a1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 10, + "y": 10, + }, + "inserted": { + "isDeleted": true, + }, + }, + "id2" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "group1", + ], + "height": 100, + "index": "a2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 20, + "y": 20, + }, + "inserted": { + "isDeleted": true, + }, + }, + }, + "updated": Map {}, + }, + }, + HistoryEntry { + "appStateChange": AppStateChange { + "delta": Delta { + "deleted": {}, + "inserted": {}, + }, + }, + "elementsChange": ElementsChange { + "added": Map {}, + "removed": Map { + "id5" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "id6", + ], + "height": 100, + "index": "Zx", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 0, + "y": 0, + }, + "inserted": { + "isDeleted": true, + }, + }, + "id7" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "id6", + ], + "height": 100, + "index": "Zy", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 10, + "y": 10, + }, + "inserted": { + "isDeleted": true, + }, + }, + "id8" => Delta { + "deleted": { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "customData": undefined, + "fillStyle": "solid", + "frameId": null, + "groupIds": [ + "id6", + ], + "height": 100, + "index": "Zz", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": { + "type": 3, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "rectangle", + "width": 100, + "x": 20, + "y": 20, + }, + "inserted": { + "isDeleted": true, + }, + }, + }, + "updated": Map { + "id0" => Delta { + "deleted": { + "x": 15, + "y": 15, + }, + "inserted": { + "x": 0, + "y": 0, + }, + }, + "id1" => Delta { + "deleted": { + "x": 25, + "y": 25, + }, + "inserted": { + "x": 10, + "y": 10, + }, + }, + "id2" => Delta { + "deleted": { + "x": 35, + "y": 35, + }, + "inserted": { + "x": 20, + "y": 20, + }, + }, + }, + }, + }, + ], +} +`; + +exports[`duplication z-order > duplication z order with alt+drag with grouped elements should consider the group together when determining z-index > [end of test] number of elements 1`] = `0`; + +exports[`duplication z-order > duplication z order with alt+drag with grouped elements should consider the group together when determining z-index > [end of test] number of renders 1`] = `11`; + exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] appState 1`] = ` { "activeEmbeddable": null, @@ -12333,7 +12487,7 @@ History { "id7", ], "height": 10, - "index": "a1G", + "index": "Zx", "isDeleted": false, "link": null, "locked": false, @@ -12366,7 +12520,7 @@ History { "id7", ], "height": 10, - "index": "a1V", + "index": "Zy", "isDeleted": false, "link": null, "locked": false, @@ -12399,7 +12553,7 @@ History { "id7", ], "height": 10, - "index": "a1l", + "index": "Zz", "isDeleted": false, "link": null, "locked": false, diff --git a/packages/excalidraw/tests/regressionTests.test.tsx b/packages/excalidraw/tests/regressionTests.test.tsx index 27b724fd2..b34706afd 100644 --- a/packages/excalidraw/tests/regressionTests.test.tsx +++ b/packages/excalidraw/tests/regressionTests.test.tsx @@ -1323,4 +1323,75 @@ describe("duplication z-order", () => { { id: rectangle3.id, selected: true }, ]); }); + + it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => { + const rectangle1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + }); + const rectangle2 = API.createElement({ + type: "rectangle", + x: 10, + y: 10, + }); + const rectangle3 = API.createElement({ + type: "rectangle", + x: 20, + y: 20, + }); + + API.setElements([rectangle1, rectangle2, rectangle3]); + + mouse.select(rectangle1); + Keyboard.withModifierKeys({ alt: true }, () => { + mouse.down(rectangle1.x + 5, rectangle1.y + 5); + mouse.up(rectangle1.x + 5, rectangle1.y + 5); + }); + + assertElements(h.elements, [ + { [ORIG_ID]: rectangle1.id }, + { id: rectangle1.id, selected: true }, + { id: rectangle2.id }, + { id: rectangle3.id }, + ]); + }); + + it("duplication z order with alt+drag with grouped elements should consider the group together when determining z-index", () => { + const rectangle1 = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + groupIds: ["group1"], + }); + const rectangle2 = API.createElement({ + type: "rectangle", + x: 10, + y: 10, + groupIds: ["group1"], + }); + const rectangle3 = API.createElement({ + type: "rectangle", + x: 20, + y: 20, + groupIds: ["group1"], + }); + + API.setElements([rectangle1, rectangle2, rectangle3]); + + mouse.select(rectangle1); + Keyboard.withModifierKeys({ alt: true }, () => { + mouse.down(rectangle1.x + 5, rectangle1.y + 5); + mouse.up(rectangle1.x + 15, rectangle1.y + 15); + }); + + assertElements(h.elements, [ + { [ORIG_ID]: rectangle1.id }, + { [ORIG_ID]: rectangle2.id }, + { [ORIG_ID]: rectangle3.id }, + { id: rectangle1.id, selected: true }, + { id: rectangle2.id, selected: true }, + { id: rectangle3.id, selected: true }, + ]); + }); });