This is an automated email from the ASF dual-hosted git repository.
thiagoelg pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 274d76af7b2 kie-issues#2295: BPMN Editor: Palette Icon Visibility
Across Resolutions (#3565)
274d76af7b2 is described below
commit 274d76af7b2a9735fbb64fe1d58cecd21375ecce
Author: Rajalakshmy S <[email protected]>
AuthorDate: Wed May 20 21:41:51 2026 +0530
kie-issues#2295: BPMN Editor: Palette Icon Visibility Across Resolutions
(#3565)
Co-authored-by: Rajalakshmy S <[email protected]>
Co-authored-by: BAMOE CI <[email protected]>
---
packages/bpmn-editor/src/BpmnEditor.css | 2 +-
packages/bpmn-editor/src/diagram/BpmnPalette.css | 95 ++++++
packages/bpmn-editor/src/diagram/BpmnPalette.tsx | 346 ++++++++++++++++-----
packages/bpmn-editor/src/i18n/BpmnEditorI18n.ts | 1 +
packages/bpmn-editor/src/i18n/locales/en.ts | 1 +
.../src/dmnRunner/DmnRunnerDrawer.tsx | 12 +-
packages/online-editor/src/editor/EditorPage.tsx | 2 +-
.../Google-Chrome/createFiles/new-file-bpmn.png | Bin 71992 -> 73887 bytes
.../Google-Chrome/createFiles/sample-bpmn.png | Bin 64667 -> 66974 bytes
.../chromium/createFiles/new-file-bpmn.png | Bin 70544 -> 72543 bytes
.../chromium/createFiles/sample-bpmn.png | Bin 63914 -> 66449 bytes
.../webkit/createFiles/new-file-bpmn.png | Bin 77062 -> 79745 bytes
.../webkit/createFiles/sample-bpmn.png | Bin 69578 -> 72635 bytes
13 files changed, 369 insertions(+), 90 deletions(-)
diff --git a/packages/bpmn-editor/src/BpmnEditor.css
b/packages/bpmn-editor/src/BpmnEditor.css
index e6a7cfe01da..208518a64f1 100644
--- a/packages/bpmn-editor/src/BpmnEditor.css
+++ b/packages/bpmn-editor/src/BpmnEditor.css
@@ -134,7 +134,7 @@
border-radius: 40px;
border: 1px solid black;
margin-right: 10px;
- margin-bottom: 10px;
+ margin-bottom: 8px;
}
.kie-bpmn-editor--palette:hover {
box-shadow: 4px 4px 2px 0px rgb(127 127 127);
diff --git a/packages/bpmn-editor/src/diagram/BpmnPalette.css
b/packages/bpmn-editor/src/diagram/BpmnPalette.css
index 02f675052c5..69bb654713f 100644
--- a/packages/bpmn-editor/src/diagram/BpmnPalette.css
+++ b/packages/bpmn-editor/src/diagram/BpmnPalette.css
@@ -54,6 +54,72 @@
backdrop-filter: blur(4px);
}
+.kie-bpmn-editor--palette-more-items {
+ position: absolute;
+ left: 58px;
+ bottom: 0;
+ padding: 8px;
+ max-height: calc(100vh - 200px);
+ overflow: visible;
+ background: #fff;
+ border-radius: 20px;
+ border: 1px solid black;
+ width: fit-content;
+}
+
+.kie-bpmn-editor--palette-more-items:hover {
+ box-shadow: 4px 4px 2px 0px rgb(127 127 127);
+}
+
+.kie-bpmn-editor--palette-more-items::before {
+ content: "";
+ position: absolute;
+ left: -7px;
+ bottom: 18px;
+ width: 14px;
+ height: 14px;
+ background: #fff;
+ border-left: 1px solid black;
+ border-top: 1px solid black;
+ transform: rotate(-45deg);
+ z-index: 1;
+}
+
+.kie-bpmn-editor--palette-more-items-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 40px);
+ gap: 8px;
+ padding: 0;
+ width: fit-content;
+}
+
+.kie-bpmn-editor--palette-more-items-grid .kie-bpmn-editor--palette-button {
+ margin: 0;
+ padding: 0;
+ width: 40px;
+ height: 40px;
+ max-width: 40px;
+ border-radius: 40px;
+ border: 0;
+ background: white;
+}
+
+.kie-bpmn-editor--palette-more-items-grid .kie-bpmn-editor--palette-button svg
{
+ width: 40px;
+ height: 40px;
+ pointer-events: none;
+}
+
+.kie-bpmn-editor--palette-more-items-grid
.kie-bpmn-editor--palette-button:hover {
+ filter: brightness(95%);
+ cursor: grab;
+}
+
+.kie-bpmn-editor--palette-more-items-grid
.kie-bpmn-editor--palette-button:active {
+ filter: brightness(90%);
+ cursor: grabbing;
+}
+
.kie-bpmn-editor--palette-custom-tasks-button {
display: flex;
align-items: center;
@@ -92,3 +158,32 @@
.kie-bpmn-editor--variables-panel-toggle-button.active {
color: #006ba4;
}
+
+.kie-bpmn-editor--palette-ellipsis-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ cursor: pointer;
+ border-radius: 0;
+ overflow: hidden;
+}
+
+.kie-bpmn-editor--palette-ellipsis-button:hover {
+ background: rgba(0, 0, 0, 0.05);
+}
+
+.kie-bpmn-editor--palette-ellipsis-button.active {
+ background: rgba(0, 107, 164, 0.1);
+ color: #006ba4;
+}
+
+.kie-bpmn-editor--palette-ellipsis-button svg {
+ width: 16px;
+ height: 16px;
+}
diff --git a/packages/bpmn-editor/src/diagram/BpmnPalette.tsx
b/packages/bpmn-editor/src/diagram/BpmnPalette.tsx
index dcfc4112356..376aca0348d 100644
--- a/packages/bpmn-editor/src/diagram/BpmnPalette.tsx
+++ b/packages/bpmn-editor/src/diagram/BpmnPalette.tsx
@@ -18,7 +18,7 @@
*/
import * as React from "react";
-import { useCallback } from "react";
+import { useCallback, useState, useEffect, useRef, useMemo } from "react";
import * as RF from "reactflow";
import {
BpmnNodeElement,
@@ -45,6 +45,7 @@ import {
import { CodeIcon } from "@patternfly/react-icons/dist/js/icons/code-icon";
import { PeopleCarryIcon } from
"@patternfly/react-icons/dist/js/icons/people-carry-icon";
import { ServicesIcon } from
"@patternfly/react-icons/dist/js/icons/services-icon";
+import { EllipsisHIcon } from
"@patternfly/react-icons/dist/js/icons/ellipsis-h-icon";
import { useBpmnEditorStore, useBpmnEditorStoreApi } from
"../store/StoreContext";
import { BpmnDiagramLhsPanel } from "../store/Store";
import { addOrGetProcessAndDiagramElements } from
"../mutations/addOrGetProcessAndDiagramElements";
@@ -73,8 +74,201 @@ import { useBpmnEditorI18n } from "../i18n";
export const MIME_TYPE_FOR_BPMN_EDITOR_NEW_NODE_FROM_PALETTE =
"application/kie-bpmn-editor--new-node-from-palette";
+export const ELEMENT_TYPES =
Object.fromEntries(Object.keys(elementToNodeType).map((k) => [k, k])) as {
+ [K in keyof typeof elementToNodeType]: K;
+};
+
+const VIEWPORT_PADDING = 20;
+
+function calculateVisibleIconCount(
+ panelRect: DOMRect,
+ paletteRect: DOMRect,
+ viewportHeight: number,
+ iconHeight: number,
+ ellipsisHeight: number,
+ totalIcons: number
+): number {
+ const effectiveViewportHeight = viewportHeight - VIEWPORT_PADDING;
+ const currentPaletteHeight = paletteRect.height;
+ const fullPaletteHeight = totalIcons * iconHeight;
+
+ const heightDifference = fullPaletteHeight - currentPaletteHeight;
+ const panelBottomIfAllVisible = panelRect.bottom + heightDifference;
+
+ if (panelBottomIfAllVisible > effectiveViewportHeight) {
+ const availableSpace = effectiveViewportHeight - (panelRect.bottom -
currentPaletteHeight);
+ const spaceForIcons = availableSpace - ellipsisHeight;
+
+ const iconsThatFit = Math.floor(spaceForIcons / iconHeight);
+
+ return Math.max(1, Math.min(totalIcons - 1, iconsThatFit));
+ }
+
+ return totalIcons;
+}
+
export function BpmnPalette({ pulse }: { pulse: boolean }) {
const bpmnEditorStoreApi = useBpmnEditorStoreApi();
+ const { i18n } = useBpmnEditorI18n();
+
+ const panelRef = useRef<HTMLDivElement>(null);
+ const paletteRef = useRef<HTMLDivElement>(null);
+ const submenuRef = useRef<HTMLDivElement>(null);
+ const iconMeasureRef = useRef<HTMLDivElement>(null);
+ const ellipsisButtonRef = useRef<HTMLButtonElement>(null);
+
+ // Palette groups structure: groups with >2 items can have submenu, ≤2 items
always visible
+ const paletteGroups = useMemo(
+ () => ({
+ corePaletteGroup: {
+ id: "corePaletteGroup",
+ icons: [
+ {
+ id: 1,
+ title: i18n.bpmnPalette.startEvents,
+ className: "start-event",
+ Icon: StartEventIcon,
+ nodeType: NODE_TYPES.startEvent,
+ element: ELEMENT_TYPES.startEvent,
+ },
+ {
+ id: 2,
+ title: i18n.bpmnPalette.intermediateCatchEvents,
+ className: "intermediate-catch-event",
+ Icon: IntermediateCatchEventIcon,
+ nodeType: NODE_TYPES.intermediateCatchEvent,
+ element: ELEMENT_TYPES.intermediateCatchEvent,
+ },
+ {
+ id: 3,
+ title: i18n.bpmnPalette.intermediateThrowEvents,
+ className: "intermediate-throw-event",
+ Icon: IntermediateThrowEventIcon,
+ nodeType: NODE_TYPES.intermediateThrowEvent,
+ element: ELEMENT_TYPES.intermediateThrowEvent,
+ },
+ {
+ id: 4,
+ title: i18n.bpmnPalette.endEvents,
+ className: "end-event",
+ Icon: EndEventIcon,
+ nodeType: NODE_TYPES.endEvent,
+ element: ELEMENT_TYPES.endEvent,
+ },
+ {
+ id: 5,
+ title: i18n.bpmnPalette.tasks,
+ className: "task",
+ Icon: TaskIcon,
+ nodeType: NODE_TYPES.task,
+ element: ELEMENT_TYPES.task,
+ },
+ {
+ id: 6,
+ title: i18n.bpmnPalette.callActivity,
+ className: "callActivity",
+ Icon: CallActivityIcon,
+ nodeType: NODE_TYPES.task,
+ element: ELEMENT_TYPES.callActivity,
+ },
+ {
+ id: 7,
+ title: i18n.bpmnPalette.subProcesses,
+ className: "subProcess",
+ Icon: SubProcessIcon,
+ nodeType: NODE_TYPES.subProcess,
+ element: ELEMENT_TYPES.subProcess,
+ },
+ {
+ id: 8,
+ title: i18n.bpmnPalette.gateways,
+ className: "gateway",
+ Icon: GatewayIcon,
+ nodeType: NODE_TYPES.gateway,
+ element: ELEMENT_TYPES.exclusiveGateway,
+ },
+ {
+ id: 9,
+ title: i18n.bpmnPalette.lanes,
+ className: "lane",
+ Icon: LaneIcon,
+ nodeType: NODE_TYPES.lane,
+ element: ELEMENT_TYPES.lane,
+ },
+ ],
+ },
+ }),
+ [i18n]
+ );
+
+ // Flatten all group icons for current single-group rendering
+ const paletteIcons = useMemo(() =>
Object.values(paletteGroups).flatMap((group) => group.icons), [paletteGroups]);
+ const totalIcons = useMemo(() => paletteIcons.length, [paletteIcons]);
+
+ const [visibleIconCount, setVisibleIconCount] = useState<number>(() =>
totalIcons);
+ const [openGroupSubmenu, setOpenGroupSubmenu] = useState<string |
null>(null);
+
+ const iconHeightRef = useRef(40);
+ const ellipsisHeightRef = useRef(40);
+
+ useEffect(() => {
+ if (iconMeasureRef.current) {
+ const rect = iconMeasureRef.current.getBoundingClientRect();
+ if (rect.height) {
+ iconHeightRef.current = rect.height;
+ }
+ }
+
+ if (ellipsisButtonRef.current) {
+ const rect = ellipsisButtonRef.current.getBoundingClientRect();
+ if (rect.height) {
+ ellipsisHeightRef.current = rect.height;
+ }
+ }
+ }, [visibleIconCount]);
+
+ const showSubmenu = visibleIconCount < totalIcons;
+
+ useEffect(() => {
+ let animationFrameId: number | null = null;
+ let lastCount: number = totalIcons;
+
+ const updateVisibleIcons = () => {
+ if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+
+ animationFrameId = requestAnimationFrame(() => {
+ if (!panelRef.current || !paletteRef.current) {
+ if (lastCount !== totalIcons) {
+ setVisibleIconCount(totalIcons);
+ lastCount = totalIcons;
+ }
+ return;
+ }
+
+ const newCount = calculateVisibleIconCount(
+ panelRef.current.getBoundingClientRect(),
+ paletteRef.current.getBoundingClientRect(),
+ window.innerHeight,
+ iconHeightRef.current,
+ ellipsisHeightRef.current,
+ totalIcons
+ );
+
+ if (newCount !== lastCount) {
+ setVisibleIconCount(newCount);
+ lastCount = newCount;
+ }
+ });
+ };
+
+ updateVisibleIcons();
+ window.addEventListener("resize", updateVisibleIcons);
+
+ return () => {
+ window.removeEventListener("resize", updateVisibleIcons);
+ if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+ };
+ }, [totalIcons]);
const onDragStart = useCallback(
<T extends BpmnNodeType>(
@@ -158,11 +352,32 @@ export function BpmnPalette({ pulse }: { pulse: boolean
}) {
const { customTasks, customTasksPaletteIcon } = useCustomTasks();
- const { i18n } = useBpmnEditorI18n();
+ const renderPaletteIcon = useCallback(
+ (icon: (typeof paletteIcons)[number]) => {
+ const { Icon, title, className, nodeType, element } = icon;
+ return (
+ <div
+ key={icon.id}
+ title={title}
+ className={`kie-bpmn-editor--palette-button dndnode ${className}`}
+ onDragStart={(event) => onDragStart(event, nodeType, element)}
+ onDragEnd={onDragEnd}
+ draggable={true}
+ >
+ <Icon />
+ </div>
+ );
+ },
+ [onDragStart, onDragEnd]
+ );
return (
<>
<RF.Panel position={"top-left"}
className={"kie-bpmn-editor--top-left-panel"}>
+ <div
+ ref={panelRef}
+ style={{ position: "absolute", top: 0, left: 0, width: "100%",
height: "100%", pointerEvents: "none" }}
+ />
<div ref={nodesPalletePopoverRef} style={{ position: "absolute", left:
0, height: 0, zIndex: -1 }} />
<aside
className={"kie-bpmn-editor--variables-panel-toggle"}
@@ -250,88 +465,51 @@ export function BpmnPalette({ pulse }: { pulse: boolean
}) {
</button>
</aside>
- <aside className={`kie-bpmn-editor--palette ${pulse ? "pulse" : ""}`}
style={{ pointerEvents: "all" }}>
- <div
- title={i18n.bpmnPalette.startEvents}
- className={"kie-bpmn-editor--palette-button dndnode start-event"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.startEvent,
"startEvent")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <StartEventIcon />
- </div>
- <div
- title={i18n.bpmnPalette.intermediateCatchEvents}
- className={"kie-bpmn-editor--palette-button dndnode
intermediate-catch-event"}
- onDragStart={(event) => onDragStart(event,
NODE_TYPES.intermediateCatchEvent, "intermediateCatchEvent")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <IntermediateCatchEventIcon />
- </div>
- <div
- title={i18n.bpmnPalette.intermediateThrowEvents}
- className={"kie-bpmn-editor--palette-button dndnode
intermediate-throw-event"}
- onDragStart={(event) => onDragStart(event,
NODE_TYPES.intermediateThrowEvent, "intermediateThrowEvent")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <IntermediateThrowEventIcon />
- </div>
- <div
- title={i18n.bpmnPalette.endEvents}
- className={"kie-bpmn-editor--palette-button dndnode end-event"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.endEvent,
"endEvent")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <EndEventIcon />
- </div>
- <div
- title={i18n.bpmnPalette.tasks}
- className={"kie-bpmn-editor--palette-button dndnode task"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.task,
"task")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <TaskIcon />
- </div>
- <div
- title={i18n.bpmnPalette.callActivity}
- className={"kie-bpmn-editor--palette-button dndnode callActivity"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.task,
"callActivity")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <CallActivityIcon />
- </div>
- <div
- title={i18n.bpmnPalette.subProcesses}
- className={"kie-bpmn-editor--palette-button dndnode subProcess"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.subProcess,
"subProcess")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <SubProcessIcon />
- </div>
- <div
- title={i18n.bpmnPalette.gateways}
- className={"kie-bpmn-editor--palette-button dndnode gateway"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.gateway,
"exclusiveGateway")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <GatewayIcon />
- </div>
- <div
- title={i18n.bpmnPalette.lanes}
- className={"kie-bpmn-editor--palette-button dndnode lane"}
- onDragStart={(event) => onDragStart(event, NODE_TYPES.lane,
"lane")}
- onDragEnd={onDragEnd}
- draggable={true}
- >
- <LaneIcon />
- </div>
+ <aside
+ ref={paletteRef}
+ className={`kie-bpmn-editor--palette ${pulse ? "pulse" : ""}`}
+ style={{ position: "relative", pointerEvents: "all" }}
+ >
+ {paletteIcons.slice(0, visibleIconCount).map((icon, index) => {
+ const element = renderPaletteIcon(icon);
+
+ if (index === 0) {
+ return (
+ <div key={icon.id} ref={iconMeasureRef}>
+ {element}
+ </div>
+ );
+ }
+
+ return element;
+ })}
+
+ {showSubmenu && (
+ <>
+ {openGroupSubmenu === paletteGroups.corePaletteGroup.id && (
+ <div
+ ref={submenuRef}
+ className={"kie-bpmn-editor--palette-nodes-popover
kie-bpmn-editor--palette-more-items"}
+ >
+ <div className={"kie-bpmn-editor--palette-more-items-grid"}>
+
{paletteIcons.slice(visibleIconCount).map(renderPaletteIcon)}
+ </div>
+ </div>
+ )}
+ <button
+ ref={ellipsisButtonRef}
+ title={i18n.bpmnPalette.moreItems}
+ className={`kie-bpmn-editor--palette-button
kie-bpmn-editor--palette-ellipsis-button ${openGroupSubmenu ===
paletteGroups.corePaletteGroup.id ? "active" : ""}`}
+ onClick={() =>
+ setOpenGroupSubmenu(
+ openGroupSubmenu === paletteGroups.corePaletteGroup.id ?
null : paletteGroups.corePaletteGroup.id
+ )
+ }
+ >
+ <EllipsisHIcon />
+ </button>
+ </>
+ )}
</aside>
<aside className={`kie-bpmn-editor--palette ${pulse ? "pulse" : ""}`}
style={{ pointerEvents: "all" }}>
diff --git a/packages/bpmn-editor/src/i18n/BpmnEditorI18n.ts
b/packages/bpmn-editor/src/i18n/BpmnEditorI18n.ts
index 166d59f1798..04d0807e07c 100644
--- a/packages/bpmn-editor/src/i18n/BpmnEditorI18n.ts
+++ b/packages/bpmn-editor/src/i18n/BpmnEditorI18n.ts
@@ -66,6 +66,7 @@ interface BpmnEditorDictionary
textAnnotation: string;
customTasks: string;
propertiesManagement: string;
+ moreItems: string;
};
versionUpgraded: string;
bpmnLatestVersion: string;
diff --git a/packages/bpmn-editor/src/i18n/locales/en.ts
b/packages/bpmn-editor/src/i18n/locales/en.ts
index c3c03600ff5..97d329e1025 100644
--- a/packages/bpmn-editor/src/i18n/locales/en.ts
+++ b/packages/bpmn-editor/src/i18n/locales/en.ts
@@ -67,6 +67,7 @@ export const en: BpmnEditorI18n = {
textAnnotation: "Text Annotation",
customTasks: "Custom Tasks",
propertiesManagement: "Properties Management",
+ moreItems: "More Items",
},
versionUpgraded: "Version upgraded!",
bpmnLatestVersion: "2.0",
diff --git a/packages/online-editor/src/dmnRunner/DmnRunnerDrawer.tsx
b/packages/online-editor/src/dmnRunner/DmnRunnerDrawer.tsx
index aba841edf2e..9002d1d0ebf 100644
--- a/packages/online-editor/src/dmnRunner/DmnRunnerDrawer.tsx
+++ b/packages/online-editor/src/dmnRunner/DmnRunnerDrawer.tsx
@@ -24,7 +24,7 @@ import { useDmnRunnerState } from "./DmnRunnerContext";
import { DmnRunnerMode } from "./DmnRunnerStatus";
import { DmnRunnerErrorBoundary } from "./DmnRunnerErrorBoundary";
-export function DmnRunnerDrawer(props: React.PropsWithChildren<{}>) {
+export function DmnRunnerDrawer(props: React.PropsWithChildren<{ isDmnEditor:
boolean }>) {
const dmnRunnerState = useDmnRunnerState();
return (
<Drawer
@@ -37,9 +37,13 @@ export function DmnRunnerDrawer(props:
React.PropsWithChildren<{}>) {
!dmnRunnerState.isExpanded ?
"kogito--editor__drawer-content-onClose" : "kogito--editor__drawer-content-open"
}
panelContent={
- <DmnRunnerErrorBoundary>
- <DmnRunnerDrawerPanelContent />
- </DmnRunnerErrorBoundary>
+ props.isDmnEditor ? (
+ <DmnRunnerErrorBoundary>
+ <DmnRunnerDrawerPanelContent />
+ </DmnRunnerErrorBoundary>
+ ) : (
+ <></>
+ )
}
>
<DrawerContentBody
className={"kogito--editor__drawer-content-body"}>{props.children}</DrawerContentBody>
diff --git a/packages/online-editor/src/editor/EditorPage.tsx
b/packages/online-editor/src/editor/EditorPage.tsx
index b4cd76c2d59..ad237b945ae 100644
--- a/packages/online-editor/src/editor/EditorPage.tsx
+++ b/packages/online-editor/src/editor/EditorPage.tsx
@@ -434,7 +434,7 @@ Error details: ${err}`);
<EditorToolbar workspaceFile={file.workspaceFile}
editor={editor} />
<Divider />
<PageSection hasOverflowScroll={true} padding={{ default:
"noPadding" }} aria-label="Editor section">
- <DmnRunnerDrawer>
+ <DmnRunnerDrawer
isDmnEditor={file.workspaceFile.extension.toLocaleLowerCase() === "dmn"}>
<EditorPageDockDrawer>
{embeddedEditorFile && (
<EmbeddedEditor
diff --git
a/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/new-file-bpmn.png
b/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/new-file-bpmn.png
index 30d957576da..25b5a82c5b7 100644
Binary files
a/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/new-file-bpmn.png
and
b/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/new-file-bpmn.png
differ
diff --git
a/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/sample-bpmn.png
b/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/sample-bpmn.png
index c7d5a4939e3..7b03c1c0743 100644
Binary files
a/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/sample-bpmn.png
and
b/packages/online-editor/tests-e2e/__screenshots__/Google-Chrome/createFiles/sample-bpmn.png
differ
diff --git
a/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/new-file-bpmn.png
b/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/new-file-bpmn.png
index b588952c0be..5946c83f04b 100644
Binary files
a/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/new-file-bpmn.png
and
b/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/new-file-bpmn.png
differ
diff --git
a/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/sample-bpmn.png
b/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/sample-bpmn.png
index 9b87d175823..298e298d5c0 100644
Binary files
a/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/sample-bpmn.png
and
b/packages/online-editor/tests-e2e/__screenshots__/chromium/createFiles/sample-bpmn.png
differ
diff --git
a/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/new-file-bpmn.png
b/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/new-file-bpmn.png
index 08d3ac4d5a4..4090ecef93a 100644
Binary files
a/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/new-file-bpmn.png
and
b/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/new-file-bpmn.png
differ
diff --git
a/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/sample-bpmn.png
b/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/sample-bpmn.png
index f1befbbd25c..e91da0f4bc4 100644
Binary files
a/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/sample-bpmn.png
and
b/packages/online-editor/tests-e2e/__screenshots__/webkit/createFiles/sample-bpmn.png
differ
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
