@@ -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", () => {