diff --git a/excalidraw-app/components/AppMainMenu.tsx b/excalidraw-app/components/AppMainMenu.tsx index 2cc055b32..d90fa5b23 100644 --- a/excalidraw-app/components/AppMainMenu.tsx +++ b/excalidraw-app/components/AppMainMenu.tsx @@ -1,6 +1,6 @@ import React from "react"; import { - arrowBarToLeftIcon, + loginIcon, ExcalLogo, } from "../../packages/excalidraw/components/icons"; import { Theme } from "../../packages/excalidraw/element/types"; @@ -42,7 +42,7 @@ export const AppMainMenu: React.FC<{ Sign up diff --git a/excalidraw-app/index.scss b/excalidraw-app/index.scss index d5cc4770c..3ca538870 100644 --- a/excalidraw-app/index.scss +++ b/excalidraw-app/index.scss @@ -40,6 +40,10 @@ } &.highlighted { color: var(--color-promo); + font-weight: 700; + .dropdown-menu-item__icon g { + stroke-width: 2; + } } } } diff --git a/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap b/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap index b657dbb54..4e526a998 100644 --- a/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap +++ b/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap @@ -216,23 +216,22 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u stroke-width="2" viewBox="0 0 24 24" > - + - diff --git a/packages/excalidraw/actions/actionLinearEditor.ts b/packages/excalidraw/actions/actionLinearEditor.tsx similarity index 60% rename from packages/excalidraw/actions/actionLinearEditor.ts rename to packages/excalidraw/actions/actionLinearEditor.tsx index 020df8b6f..bc5d96cc8 100644 --- a/packages/excalidraw/actions/actionLinearEditor.ts +++ b/packages/excalidraw/actions/actionLinearEditor.tsx @@ -4,6 +4,9 @@ import { isLinearElement } from "../element/typeChecks"; import { ExcalidrawLinearElement } from "../element/types"; import { StoreAction } from "../store"; import { register } from "./register"; +import { ToolButton } from "../components/ToolButton"; +import { t } from "../i18n"; +import { lineEditorIcon } from "../components/icons"; export const actionToggleLinearEditor = register({ name: "toggleLinearEditor", @@ -11,18 +14,23 @@ export const actionToggleLinearEditor = register({ label: (elements, appState, app) => { const selectedElement = app.scene.getSelectedElements({ selectedElementIds: appState.selectedElementIds, - includeBoundTextElement: true, - })[0] as ExcalidrawLinearElement; - return appState.editingLinearElement?.elementId === selectedElement?.id - ? "labels.lineEditor.exit" + })[0] as ExcalidrawLinearElement | undefined; + + return selectedElement?.type === "arrow" + ? "labels.lineEditor.editArrow" : "labels.lineEditor.edit"; }, + keywords: ["line"], trackEvent: { category: "element", }, predicate: (elements, appState, _, app) => { const selectedElements = app.scene.getSelectedElements(appState); - if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) { + if ( + !appState.editingLinearElement && + selectedElements.length === 1 && + isLinearElement(selectedElements[0]) + ) { return true; } return false; @@ -45,4 +53,24 @@ export const actionToggleLinearEditor = register({ storeAction: StoreAction.CAPTURE, }; }, + PanelComponent: ({ appState, updateData, app }) => { + const selectedElement = app.scene.getSelectedElements({ + selectedElementIds: appState.selectedElementIds, + })[0] as ExcalidrawLinearElement; + + const label = t( + selectedElement.type === "arrow" + ? "labels.lineEditor.editArrow" + : "labels.lineEditor.edit", + ); + return ( + updateData(null)} + /> + ); + }, }); diff --git a/packages/excalidraw/actions/actionZindex.tsx b/packages/excalidraw/actions/actionZindex.tsx index 716688811..261b4ab78 100644 --- a/packages/excalidraw/actions/actionZindex.tsx +++ b/packages/excalidraw/actions/actionZindex.tsx @@ -20,6 +20,7 @@ import { StoreAction } from "../store"; export const actionSendBackward = register({ name: "sendBackward", label: "labels.sendBackward", + keywords: ["move down", "zindex", "layer"], icon: SendBackwardIcon, trackEvent: { category: "element" }, perform: (elements, appState) => { @@ -49,6 +50,7 @@ export const actionSendBackward = register({ export const actionBringForward = register({ name: "bringForward", label: "labels.bringForward", + keywords: ["move up", "zindex", "layer"], icon: BringForwardIcon, trackEvent: { category: "element" }, perform: (elements, appState) => { @@ -78,6 +80,7 @@ export const actionBringForward = register({ export const actionSendToBack = register({ name: "sendToBack", label: "labels.sendToBack", + keywords: ["move down", "zindex", "layer"], icon: SendToBackIcon, trackEvent: { category: "element" }, perform: (elements, appState) => { @@ -114,6 +117,7 @@ export const actionSendToBack = register({ export const actionBringToFront = register({ name: "bringToFront", label: "labels.bringToFront", + keywords: ["move up", "zindex", "layer"], icon: BringToFrontIcon, trackEvent: { category: "element" }, diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index dd224e104..dfec5f471 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -23,7 +23,11 @@ import Stack from "./Stack"; import { ToolButton } from "./ToolButton"; import { hasStrokeColor } from "../scene/comparisons"; import { trackEvent } from "../analytics"; -import { hasBoundTextElement, isTextElement } from "../element/typeChecks"; +import { + hasBoundTextElement, + isLinearElement, + isTextElement, +} from "../element/typeChecks"; import clsx from "clsx"; import { actionToggleZenMode } from "../actions"; import { Tooltip } from "./Tooltip"; @@ -114,6 +118,11 @@ export const SelectedShapeActions = ({ const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer; + const showLineEditorAction = + !appState.editingLinearElement && + targetElements.length === 1 && + isLinearElement(targetElements[0]); + return (
@@ -173,8 +182,8 @@ export const SelectedShapeActions = ({
{renderAction("sendToBack")} {renderAction("sendBackward")} - {renderAction("bringToFront")} {renderAction("bringForward")} + {renderAction("bringToFront")}
@@ -229,6 +238,7 @@ export const SelectedShapeActions = ({ {renderAction("group")} {renderAction("ungroup")} {showLinkIcon && renderAction("hyperlink")} + {showLineEditorAction && renderAction("toggleLinearEditor")}
)} @@ -333,8 +343,8 @@ export const ShapesSwitcher = ({ fontSize: 8, fontFamily: "Cascadia, monospace", position: "absolute", - background: "pink", - color: "black", + background: "var(--color-promo)", + color: "var(--color-surface-lowest)", bottom: 3, right: 4, }} diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx index 17480319f..9f49adc2f 100644 --- a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx +++ b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx @@ -258,10 +258,10 @@ function CommandPaletteInner({ actionManager.actions.deleteSelectedElements, actionManager.actions.copyStyles, actionManager.actions.pasteStyles, + actionManager.actions.bringToFront, + actionManager.actions.bringForward, actionManager.actions.sendBackward, actionManager.actions.sendToBack, - actionManager.actions.bringForward, - actionManager.actions.bringToFront, actionManager.actions.alignTop, actionManager.actions.alignBottom, actionManager.actions.alignLeft, diff --git a/packages/excalidraw/components/MagicSettings.tsx b/packages/excalidraw/components/MagicSettings.tsx index af4760376..855ab109d 100644 --- a/packages/excalidraw/components/MagicSettings.tsx +++ b/packages/excalidraw/components/MagicSettings.tsx @@ -53,8 +53,8 @@ export const MagicSettings = (props: { marginLeft: "1rem", fontSize: 14, borderRadius: "12px", - color: "#000", - background: "pink", + background: "var(--color-promo)", + color: "var(--color-surface-lowest)", }} > Experimental diff --git a/packages/excalidraw/components/TTDDialog/TTDDialog.tsx b/packages/excalidraw/components/TTDDialog/TTDDialog.tsx index c814d3c45..1c9c4b28d 100644 --- a/packages/excalidraw/components/TTDDialog/TTDDialog.tsx +++ b/packages/excalidraw/components/TTDDialog/TTDDialog.tsx @@ -253,8 +253,8 @@ export const TTDDialogBase = withInternalFallback( marginLeft: "10px", fontSize: 10, borderRadius: "12px", - background: "pink", - color: "#000", + background: "var(--color-promo)", + color: "var(--color-surface-lowest)", }} > AI Beta diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx index c3a165eab..65dba2287 100644 --- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx +++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx @@ -50,10 +50,10 @@ export const DropDownMenuItemBadge = ({ display: "inline-flex", marginLeft: "auto", padding: "2px 4px", - background: "pink", + background: "var(--color-promo)", + color: "var(--color-surface-lowest)", borderRadius: 6, fontSize: 9, - color: "black", fontFamily: "Cascadia, monospace", }} > diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx index 02965c91d..3f9af9d08 100644 --- a/packages/excalidraw/components/icons.tsx +++ b/packages/excalidraw/components/icons.tsx @@ -675,119 +675,38 @@ export const resetZoom = createIcon( { width: 1024 }, ); -export const BringForwardIcon = createIcon( - <> - - - - - - - - - - , - modifiedTablerIconProps, +const arrowBarToTopJSX = ( + + + + + + + ); -export const SendBackwardIcon = createIcon( - <> - - - - - - - - - - , - modifiedTablerIconProps, +const arrownNarrowUpJSX = ( + + + + + + ); -export const BringToFrontIcon = createIcon( - <> - - - - - - - - - - , - modifiedTablerIconProps, -); +export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps); -export const SendToBackIcon = createIcon( - <> - - - - - - - - - - - - - - - - , - modifiedTablerIconProps, -); +export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, { + ...tablerIconProps, + transform: "rotate(180)", +}); + +export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps); + +export const SendToBackIcon = createIcon(arrowBarToTopJSX, { + ...tablerIconProps, + transform: "rotate(180)", +}); // // Align action icons created from scratch to match those of z-index actions @@ -2096,14 +2015,13 @@ export const DeviceDesktopIcon = createIcon( { ...tablerIconProps, strokeWidth: 1.5 }, ); -// arrow-bar-to-left -export const arrowBarToLeftIcon = createIcon( - +// login +export const loginIcon = createIcon( + - - - - + + + , tablerIconProps, ); @@ -2129,3 +2047,13 @@ export const gridIcon = createIcon( , tablerIconProps, ); + +export const lineEditorIcon = createIcon( + + + + + + , + tablerIconProps, +); diff --git a/packages/excalidraw/components/welcome-screen/WelcomeScreen.scss b/packages/excalidraw/components/welcome-screen/WelcomeScreen.scss index ef526aba4..9b70cf53a 100644 --- a/packages/excalidraw/components/welcome-screen/WelcomeScreen.scss +++ b/packages/excalidraw/components/welcome-screen/WelcomeScreen.scss @@ -206,10 +206,8 @@ text-decoration: none; background: var(--button-hover-bg); - .welcome-screen-menu-item__shortcut { - color: var(--color-gray-50); - } - + .welcome-screen-menu-item__shortcut, + .welcome-screen-menu-item__icon, .welcome-screen-menu-item__text { color: var(--color-gray-100); } @@ -219,10 +217,8 @@ background: var(--button-hover-bg); border-color: var(--color-brand-active); - .welcome-screen-menu-item__shortcut { - color: var(--color-gray-50); - } - + .welcome-screen-menu-item__shortcut, + .welcome-screen-menu-item__icon, .welcome-screen-menu-item__text { color: var(--color-gray-100); } @@ -249,16 +245,17 @@ .welcome-screen-menu-item:hover { background-color: var(--color-surface-low); - .welcome-screen-menu-item__shortcut { - color: var(--color-gray-50); - } + .welcome-screen-menu-item__icon, + .welcome-screen-menu-item__shortcut, .welcome-screen-menu-item__text { color: var(--color-gray-10); } } .welcome-screen-menu-item:active { + .welcome-screen-menu-item__icon, + .welcome-screen-menu-item__shortcut, .welcome-screen-menu-item__text { color: var(--color-gray-10); } diff --git a/packages/excalidraw/css/theme.scss b/packages/excalidraw/css/theme.scss index ffbeda4ef..aa520a0c5 100644 --- a/packages/excalidraw/css/theme.scss +++ b/packages/excalidraw/css/theme.scss @@ -128,7 +128,7 @@ --color-muted-background: var(--color-gray-80); --color-muted-background-darker: var(--color-gray-100); - --color-promo: #e70078; + --color-promo: var(--color-primary); --color-success: #268029; --color-success-lighter: #cafccc; @@ -236,8 +236,6 @@ --color-muted-background: var(--color-gray-40); --color-muted-background-darker: var(--color-gray-20); - --color-promo: #d297ff; - --color-logo-text: #e2dfff; --color-surface-high: hsl(245, 10%, 21%); diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index fb5b148d3..512ec4ea0 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -129,7 +129,7 @@ }, "lineEditor": { "edit": "Edit line", - "exit": "Exit line editor" + "editArrow": "Edit arrow" }, "elementLock": { "lock": "Lock", diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap index 813f64266..7f860ae6f 100644 --- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap @@ -386,40 +386,36 @@ exports[`contextMenu element > right-clicking on a group should select whole gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendBackward", "name": "sendBackward", "perform": [Function], @@ -438,38 +434,35 @@ exports[`contextMenu element > right-clicking on a group should select whole gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringForward", "name": "bringForward", "perform": [Function], @@ -488,62 +481,38 @@ exports[`contextMenu element > right-clicking on a group should select whole gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendToBack", "name": "sendToBack", "perform": [Function], @@ -562,35 +531,37 @@ exports[`contextMenu element > right-clicking on a group should select whole gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringToFront", "name": "bringToFront", "perform": [Function], @@ -681,7 +652,11 @@ exports[`contextMenu element > right-clicking on a group should select whole gro }, "separator", { + "PanelComponent": [Function], "category": "Elements", + "keywords": [ + "line", + ], "label": [Function], "name": "toggleLinearEditor", "perform": [Function], @@ -4813,40 +4788,36 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendBackward", "name": "sendBackward", "perform": [Function], @@ -4865,38 +4836,35 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringForward", "name": "bringForward", "perform": [Function], @@ -4915,62 +4883,38 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendToBack", "name": "sendToBack", "perform": [Function], @@ -4989,45 +4933,47 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - - , - "keyTest": [Function], - "label": "labels.bringToFront", - "name": "bringToFront", - "perform": [Function], - "trackEvent": { - "category": "element", - }, - }, - "separator", - { - "icon": + + + + + + + , + "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], + "label": "labels.bringToFront", + "name": "bringToFront", + "perform": [Function], + "trackEvent": { + "category": "element", + }, + }, + "separator", + { + "icon": , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendBackward", "name": "sendBackward", "perform": [Function], @@ -5990,38 +5936,35 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringForward", "name": "bringForward", "perform": [Function], @@ -6040,62 +5983,38 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendToBack", "name": "sendToBack", "perform": [Function], @@ -6114,35 +6033,37 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringToFront", "name": "bringToFront", "perform": [Function], @@ -6233,7 +6154,11 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro }, "separator", { + "PanelComponent": [Function], "category": "Elements", + "keywords": [ + "line", + ], "label": [Function], "name": "toggleLinearEditor", "perform": [Function], @@ -7770,40 +7695,36 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendBackward", "name": "sendBackward", "perform": [Function], @@ -7822,38 +7743,35 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringForward", "name": "bringForward", "perform": [Function], @@ -7872,62 +7790,38 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendToBack", "name": "sendToBack", "perform": [Function], @@ -7946,35 +7840,37 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringToFront", "name": "bringToFront", "perform": [Function], @@ -8065,7 +7961,11 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap }, "separator", { + "PanelComponent": [Function], "category": "Elements", + "keywords": [ + "line", + ], "label": [Function], "name": "toggleLinearEditor", "perform": [Function], @@ -8662,40 +8562,36 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendBackward", "name": "sendBackward", "perform": [Function], @@ -8714,38 +8610,35 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + , "keyPriority": 40, "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringForward", "name": "bringForward", "perform": [Function], @@ -8764,62 +8657,38 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + transform="rotate(180)" + viewBox="0 0 24 24" > - - - - - - - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move down", + "zindex", + "layer", + ], "label": "labels.sendToBack", "name": "sendToBack", "perform": [Function], @@ -8838,35 +8707,37 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - viewBox="0 0 20 20" + strokeWidth={2} + viewBox="0 0 24 24" > - - - - - - - - - - - + + + + + + + , "keyTest": [Function], + "keywords": [ + "move up", + "zindex", + "layer", + ], "label": "labels.bringToFront", "name": "bringToFront", "perform": [Function], @@ -8957,7 +8828,11 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap }, "separator", { + "PanelComponent": [Function], "category": "Elements", + "keywords": [ + "line", + ], "label": [Function], "name": "toggleLinearEditor", "perform": [Function], diff --git a/packages/excalidraw/tests/linearElementEditor.test.tsx b/packages/excalidraw/tests/linearElementEditor.test.tsx index 51bc70a4a..01adc3cb3 100644 --- a/packages/excalidraw/tests/linearElementEditor.test.tsx +++ b/packages/excalidraw/tests/linearElementEditor.test.tsx @@ -214,7 +214,7 @@ describe("Test Linear Elements", () => { clientY: midpoint[1], }); // Enter line editor - let contextMenu = document.querySelector(".context-menu"); + const contextMenu = document.querySelector(".context-menu"); fireEvent.contextMenu(GlobalTestState.interactiveCanvas, { button: 2, clientX: midpoint[0], @@ -223,23 +223,6 @@ describe("Test Linear Elements", () => { fireEvent.click(queryByText(contextMenu as HTMLElement, "Edit line")!); expect(h.state.editingLinearElement?.elementId).toEqual(h.elements[0].id); - - // Exiting line editor - fireEvent.contextMenu(GlobalTestState.interactiveCanvas, { - button: 2, - clientX: midpoint[0], - clientY: midpoint[1], - }); - contextMenu = document.querySelector(".context-menu"); - fireEvent.contextMenu(GlobalTestState.interactiveCanvas, { - button: 2, - clientX: midpoint[0], - clientY: midpoint[1], - }); - fireEvent.click( - queryByText(contextMenu as HTMLElement, "Exit line editor")!, - ); - expect(h.state.editingLinearElement?.elementId).toBeUndefined(); }); it("should enter line editor when using double clicked with ctrl key", () => {