From 789171dbebf5eab4fc45dec6de0bd24f445c2c1f Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Wed, 16 Oct 2024 13:01:32 +0200
Subject: [PATCH 01/12] NO-ISSUE: Adding new SVGs to the new BPMN Editor

---
 packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx | 3 +++
 packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx  | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index d32bf47c998..03ff2948e9f 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -53,10 +53,12 @@ export function NodeIcon({ nodeType }: { nodeType: BpmnNodeType }) {
 export function EventDefitnitionIcon({
   variant,
   filled,
+  fill,
   stroke,
 }: {
   variant?: EventVariant;
   filled: boolean;
+  fill?: string;
   stroke: string;
 }) {
   const cx = nodeSvgProps.x + nodeSvgProps.width / 2;
@@ -69,6 +71,7 @@ export function EventDefitnitionIcon({
       <EventVariantSymbolSvg
         variant={variant ?? "none"}
         strokeWidth={16}
+        fill={fill ?? "none"}
         filled={filled}
         stroke={stroke}
         x={nodeSvgProps.x}
diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index 253d9735a81..c1f9da483a1 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -766,14 +766,14 @@ export function EventVariantSymbolSvg({
   y: number;
   innerCircleRadius: number;
   outerCircleRadius: number;
-  fill?: string;
+  fill: string;
   filled: boolean;
 }) {
   return (
     <>
       {variant === "messageEventDefinition" && (
         <MessageEventSymbolSvg
-          fill={fill ?? "none"}
+          fill={fill}
           filled={filled}
           stroke={stroke}
           cx={cx}
@@ -827,6 +827,7 @@ export function EventVariantSymbolSvg({
       )}
       {variant === "conditionalEventDefinition" && (
         <ConditionalEventSymbolSvg
+          fill={fill}
           filled={filled}
           stroke={stroke}
           cx={cx}
@@ -1212,12 +1213,14 @@ export function ConditionalEventSymbolSvg({
   cx,
   cy,
   outerCircleRadius,
+  fill,
   filled,
 }: {
   stroke: string;
   cx: number;
   cy: number;
   outerCircleRadius: number;
+  fill: string;
   filled: boolean;
 }) {
   const squareSize = outerCircleRadius * 1.1;
@@ -1231,7 +1234,7 @@ export function ConditionalEventSymbolSvg({
         y={cy - squareSize / 2}
         width={squareSize}
         height={squareSize}
-        fill={filled ? stroke : "transparent"}
+        fill={filled ? fill : "transparent"}
         stroke={stroke}
         strokeWidth={1.5}
       />

From 9488dca7812b5bc65004d52505768c3fe391f0a6 Mon Sep 17 00:00:00 2001
From: Kbowers <92726146+kbowers-ibm@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:27:59 +0200
Subject: [PATCH 02/12] NO-ISSUE: Adding new SVGS to the BPMN editor  (#132)

* NO-ISSUE: Adding new SVGs to the new BPMN Editor

* fixing fill changes
---
 packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx | 3 ---
 packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx  | 9 +++------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index 03ff2948e9f..d32bf47c998 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -53,12 +53,10 @@ export function NodeIcon({ nodeType }: { nodeType: BpmnNodeType }) {
 export function EventDefitnitionIcon({
   variant,
   filled,
-  fill,
   stroke,
 }: {
   variant?: EventVariant;
   filled: boolean;
-  fill?: string;
   stroke: string;
 }) {
   const cx = nodeSvgProps.x + nodeSvgProps.width / 2;
@@ -71,7 +69,6 @@ export function EventDefitnitionIcon({
       <EventVariantSymbolSvg
         variant={variant ?? "none"}
         strokeWidth={16}
-        fill={fill ?? "none"}
         filled={filled}
         stroke={stroke}
         x={nodeSvgProps.x}
diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index c1f9da483a1..253d9735a81 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -766,14 +766,14 @@ export function EventVariantSymbolSvg({
   y: number;
   innerCircleRadius: number;
   outerCircleRadius: number;
-  fill: string;
+  fill?: string;
   filled: boolean;
 }) {
   return (
     <>
       {variant === "messageEventDefinition" && (
         <MessageEventSymbolSvg
-          fill={fill}
+          fill={fill ?? "none"}
           filled={filled}
           stroke={stroke}
           cx={cx}
@@ -827,7 +827,6 @@ export function EventVariantSymbolSvg({
       )}
       {variant === "conditionalEventDefinition" && (
         <ConditionalEventSymbolSvg
-          fill={fill}
           filled={filled}
           stroke={stroke}
           cx={cx}
@@ -1213,14 +1212,12 @@ export function ConditionalEventSymbolSvg({
   cx,
   cy,
   outerCircleRadius,
-  fill,
   filled,
 }: {
   stroke: string;
   cx: number;
   cy: number;
   outerCircleRadius: number;
-  fill: string;
   filled: boolean;
 }) {
   const squareSize = outerCircleRadius * 1.1;
@@ -1234,7 +1231,7 @@ export function ConditionalEventSymbolSvg({
         y={cy - squareSize / 2}
         width={squareSize}
         height={squareSize}
-        fill={filled ? fill : "transparent"}
+        fill={filled ? stroke : "transparent"}
         stroke={stroke}
         strokeWidth={1.5}
       />

From 4c99fed064c120a38d37a18cd9bb81f0ebb1b7e0 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Tue, 22 Oct 2024 11:14:10 +0200
Subject: [PATCH 03/12] Improving morphing panel for events and gateways

---
 .../src/diagram/nodes/NodeIcons.tsx           |  18 +-
 .../src/diagram/nodes/NodeSvgs.tsx            | 505 +++++++++++++-----
 .../morphing/useEventNodeMorphingActions.tsx  |  29 +-
 .../useGatewayNodeMorphingActions.tsx         |  10 +-
 4 files changed, 394 insertions(+), 168 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index d32bf47c998..57e31cbf6f9 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -50,7 +50,7 @@ export function NodeIcon({ nodeType }: { nodeType: BpmnNodeType }) {
   });
 }
 
-export function EventDefitnitionIcon({
+export function EventDefinitionIcon({
   variant,
   filled,
   stroke,
@@ -60,7 +60,7 @@ export function EventDefitnitionIcon({
   stroke: string;
 }) {
   const cx = nodeSvgProps.x + nodeSvgProps.width / 2;
-  const cy = nodeSvgProps.y + nodeSvgProps.width / 2;
+  const cy = nodeSvgProps.y + nodeSvgProps.height / 2;
 
   const r = nodeSvgProps.width / 2;
 
@@ -69,13 +69,15 @@ export function EventDefitnitionIcon({
       <EventVariantSymbolSvg
         variant={variant ?? "none"}
         strokeWidth={16}
+        isMorphingPanel={true}
         filled={filled}
         stroke={stroke}
+        fill={fill}
         x={nodeSvgProps.x}
         y={nodeSvgProps.x}
         cx={cx}
         cy={cy}
-        innerCircleRadius={r - 5}
+        innerCircleRadius={r - 10}
         outerCircleRadius={r}
       />
     </RoundSvg>
@@ -130,10 +132,16 @@ export function CallActivityIcon() {
   );
 }
 
-export function GatewayIcon({ variant }: { variant?: GatewayVariant }) {
+export function GatewayIcon({ variant, isMorphingPanel }: { variant?: GatewayVariant; isMorphingPanel?: boolean }) {
   return (
     <RoundSvg>
-      <GatewayNodeSvg {...nodeSvgProps} width={200} height={200} variant={variant ?? "none"} />
+      <GatewayNodeSvg
+        {...nodeSvgProps}
+        width={200}
+        height={200}
+        variant={variant ?? "none"}
+        isMorphingPanel={isMorphingPanel ?? false}
+      />
     </RoundSvg>
   );
 }
diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index 253d9735a81..c46d90c1cfa 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -394,7 +394,9 @@ export function TaskNodeSvg(
     </>
   );
 }
-export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant | "none" }) {
+export function GatewayNodeSvg(
+  __props: NodeSvgProps & { variant: GatewayVariant | "none"; isMorphingPanel?: boolean }
+) {
   const {
     x,
     y,
@@ -404,88 +406,226 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
     props: { ..._props },
   } = normalize(__props);
 
-  const { variant, ...props } = { ..._props };
+  const { variant, isMorphingPanel, ...props } = { ..._props };
+  const morphingPanelOffset = isMorphingPanel ? 25 : 0;
 
   return (
     <>
-      <rect
-        x={8 + x}
-        y={8 + y}
-        transform={`rotate(45,${x + width / 2},${y + height / 2})`}
-        strokeWidth={strokeWidth}
-        width={width / 1.4} // sqrt(2)
-        height={height / 1.4} // sqrt(2)
-        fill={NODE_COLORS.gateway.background}
-        stroke={NODE_COLORS.gateway.foreground}
-        strokeLinejoin={"round"}
-        rx="5"
-        ry="5"
-        {...props}
-      />
+      {!isMorphingPanel && (
+        <rect
+          x={8 + x}
+          y={8 + y}
+          transform={`rotate(45,${x + width / 2},${y + height / 2})`}
+          strokeWidth={strokeWidth}
+          width={width / 1.4} // sqrt(2)
+          height={height / 1.4} // sqrt(2)
+          fill={NODE_COLORS.gateway.background}
+          stroke={NODE_COLORS.gateway.foreground}
+          strokeLinejoin={"round"}
+          rx="5"
+          ry="5"
+          {...props}
+        />
+      )}
       {variant === "parallelGateway" && (
-        <>
-          <line
-            strokeLinecap={"round"}
-            x1="18"
-            y1={1 + height / 2}
-            x2={width - 16}
-            y2={1 + height / 2}
-            stroke={NODE_COLORS.gateway.foreground}
-            strokeWidth="6"
-          />
-          <line
-            strokeLinecap={"round"}
-            x1={1 + width / 2}
-            y1="18"
-            x2={1 + width / 2}
-            y2={height - 16}
-            stroke={NODE_COLORS.gateway.foreground}
-            strokeWidth="6"
-          />
-        </>
+        <ParallelGatewaySvg
+          stroke={NODE_COLORS.gateway.foreground}
+          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          cx={x + width / 2}
+          cy={y + height / 2 - morphingPanelOffset}
+          size={isMorphingPanel ? 210 : 30}
+        />
       )}
       {variant === "exclusiveGateway" && (
-        <>
-          <g transform={`rotate(45,${x + width / 2},${y + height / 2})`}>
-            <line
-              strokeLinecap={"round"}
-              x1="18"
-              y1={1 + height / 2}
-              x2={width - 16}
-              y2={1 + height / 2}
-              stroke={NODE_COLORS.gateway.foreground}
-              strokeWidth="6"
-            />
-            <line
-              strokeLinecap={"round"}
-              x1={1 + width / 2}
-              y1="18"
-              x2={1 + width / 2}
-              y2={height - 16}
-              stroke={NODE_COLORS.gateway.foreground}
-              strokeWidth="6"
-            />
-          </g>
-        </>
+        <ExclusiveGatewaySvg
+          stroke={NODE_COLORS.gateway.foreground}
+          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          cx={x + width / 2}
+          cy={y + height / 2 - morphingPanelOffset}
+          size={isMorphingPanel ? 210 : 30}
+        />
       )}
       {variant === "inclusiveGateway" && (
-        <>
-          <circle
-            cx={x + width / 2}
-            cy={y + height / 2}
-            strokeWidth={6}
-            width={width / 2}
-            height={height / 2}
-            stroke={NODE_COLORS.gateway.foreground}
-            strokeLinejoin={"round"}
-            fill="transparent"
-            r={width / 5}
-            {...props}
-          />
-        </>
+        <InclusiveGatewaySvg
+          stroke={NODE_COLORS.gateway.foreground}
+          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          cx={x + width / 2}
+          cy={y + height / 2 - morphingPanelOffset}
+          size={isMorphingPanel ? 275 : 40}
+        />
+      )}
+      {variant === "eventBasedGateway" && (
+        <EventBasedGatewaySvg
+          stroke={NODE_COLORS.gateway.foreground}
+          circleStrokeWidth={isMorphingPanel ? 10 : 1.5}
+          strokeWidth={isMorphingPanel ? 30 : 2}
+          cx={x + width / 2}
+          cy={y + height / 2 - morphingPanelOffset}
+          size={isMorphingPanel ? 275 : 40}
+        />
       )}
-      {variant === "eventBasedGateway" && <>{/* TODO: Tiago */}</>}
-      {variant === "complexGateway" && <>{/* TODO: Tiago */}</>}
+      {variant === "complexGateway" && (
+        <ComplexGatewaySvg
+          stroke={NODE_COLORS.gateway.foreground}
+          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          cx={x + width / 2}
+          cy={y + height / 2 - morphingPanelOffset}
+          size={isMorphingPanel ? 300 : 50}
+        />
+      )}
+    </>
+  );
+}
+
+export function ParallelGatewaySvg({
+  stroke,
+  strokeWidth,
+  cx,
+  cy,
+  size,
+}: {
+  stroke: string;
+  strokeWidth?: number;
+  cx: number;
+  cy: number;
+  size: number;
+}) {
+  return (
+    <>
+      <line x1={cx} y1={cy - size / 2} x2={cx} y2={cy + size / 2} stroke={stroke} strokeWidth={strokeWidth ?? 1.5} />
+      <line x1={cx - size / 2} y1={cy} x2={cx + size / 2} y2={cy} stroke={stroke} strokeWidth={strokeWidth ?? 1.5} />
+    </>
+  );
+}
+
+export function ExclusiveGatewaySvg({
+  stroke,
+  strokeWidth,
+  cx,
+  cy,
+  size,
+}: {
+  stroke: string;
+  strokeWidth?: number;
+  cx: number;
+  cy: number;
+  size: number;
+}) {
+  return (
+    <>
+      <line
+        x1={cx - size / 3}
+        y1={cy - size / 3}
+        x2={cx + size / 3}
+        y2={cy + size / 3}
+        stroke={stroke}
+        strokeWidth={strokeWidth ?? 2}
+      />
+      <line
+        x1={cx + size / 3}
+        y1={cy - size / 3}
+        x2={cx - size / 3}
+        y2={cy + size / 3}
+        stroke={stroke}
+        strokeWidth={strokeWidth ?? 2}
+      />
+    </>
+  );
+}
+
+export function InclusiveGatewaySvg({
+  stroke,
+  strokeWidth,
+  cx,
+  cy,
+  size,
+}: {
+  stroke: string;
+  strokeWidth?: number;
+  cx: number;
+  cy: number;
+  size: number;
+}) {
+  return (
+    <>
+      <circle cx={cx} cy={cy} r={size / 3} stroke={stroke} strokeWidth={strokeWidth ?? 1.5} fill="none" />
+    </>
+  );
+}
+
+export function EventBasedGatewaySvg({
+  stroke,
+  strokeWidth,
+  circleStrokeWidth,
+  cx,
+  cy,
+  size,
+}: {
+  stroke: string;
+  strokeWidth?: number;
+  circleStrokeWidth?: number;
+  cx: number;
+  cy: number;
+  size: number;
+}) {
+  const pentagonPoints = Array.from({ length: 5 }, (_, i) => {
+    const angle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
+    return {
+      x: cx + (size / 4) * Math.cos(angle),
+      y: cy + (size / 4) * Math.sin(angle),
+    };
+  });
+
+  return (
+    <>
+      <circle cx={cx} cy={cy} r={size / 3} stroke={stroke} strokeWidth={circleStrokeWidth} fill="none" />
+      <circle cx={cx} cy={cy} r={size / 2.5} stroke={stroke} strokeWidth={circleStrokeWidth} fill="none" />
+      <polygon
+        points={pentagonPoints.map((point) => `${point.x},${point.y}`).join(" ")}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        fill="none"
+      />
+    </>
+  );
+}
+
+export function ComplexGatewaySvg({
+  stroke,
+  strokeWidth,
+  cx,
+  cy,
+  size,
+}: {
+  stroke: string;
+  strokeWidth?: number;
+  cx: number;
+  cy: number;
+  size: number;
+}) {
+  const lineLength = size / 3;
+  const diagonalLength = lineLength / Math.sqrt(2);
+
+  return (
+    <>
+      <line x1={cx} y1={cy - lineLength} x2={cx} y2={cy + lineLength} stroke={stroke} strokeWidth={strokeWidth ?? 2} />
+      <line x1={cx - lineLength} y1={cy} x2={cx + lineLength} y2={cy} stroke={stroke} strokeWidth={strokeWidth ?? 2} />
+      <line
+        x1={cx - diagonalLength}
+        y1={cy - diagonalLength}
+        x2={cx + diagonalLength}
+        y2={cy + diagonalLength}
+        stroke={stroke}
+        strokeWidth={strokeWidth ?? 2}
+      />
+      <line
+        x1={cx + diagonalLength}
+        y1={cy - diagonalLength}
+        x2={cx - diagonalLength}
+        y2={cy + diagonalLength}
+        stroke={stroke}
+        strokeWidth={strokeWidth ?? 2}
+      />
     </>
   );
 }
@@ -748,6 +888,7 @@ export function EventVariantSymbolSvg({
   variant,
   stroke,
   strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   x,
@@ -760,6 +901,7 @@ export function EventVariantSymbolSvg({
   variant: EventVariant | "none";
   stroke: string;
   strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   x: number;
@@ -776,6 +918,8 @@ export function EventVariantSymbolSvg({
           fill={fill ?? "none"}
           filled={filled}
           stroke={stroke}
+          strokeWidth={strokeWidth}
+          isMorphingPanel={isMorphingPanel}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -785,6 +929,8 @@ export function EventVariantSymbolSvg({
         <TimerEventSymbolSvg
           filled={filled}
           stroke={stroke}
+          strokeWidth={strokeWidth}
+          isMorphingPanel={isMorphingPanel}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -795,6 +941,7 @@ export function EventVariantSymbolSvg({
         <ErrorEventSymbolSvg
           filled={filled}
           stroke={stroke}
+          strokeWidth={strokeWidth}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -805,18 +952,28 @@ export function EventVariantSymbolSvg({
         <EscalationEventSymbolSvg
           filled={filled}
           stroke={stroke}
+          strokeWidth={strokeWidth}
+          isMorphingPanel={isMorphingPanel}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
         />
       )}
       {variant === "cancelEventDefinition" && (
-        <CancelEventSymbolSvg filled={filled} stroke={stroke} cx={cx} cy={cy} innerCircleRadius={innerCircleRadius} />
+        <CancelEventSymbolSvg
+          filled={filled}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          cx={cx}
+          cy={cy}
+          innerCircleRadius={innerCircleRadius}
+        />
       )}
       {variant === "compensateEventDefinition" && (
         <CompensationEventSymbolSvg
           filled={filled}
           stroke={stroke}
+          strokeWidth={strokeWidth}
           x={x}
           y={y}
           cx={cx}
@@ -829,19 +986,30 @@ export function EventVariantSymbolSvg({
         <ConditionalEventSymbolSvg
           filled={filled}
           stroke={stroke}
+          strokeWidth={strokeWidth}
+          isMorphingPanel={isMorphingPanel}
           cx={cx}
           cy={cy}
           outerCircleRadius={outerCircleRadius}
         />
       )}
       {variant === "linkEventDefinition" && (
-        <LinkEventSymbolSvg filled={filled} stroke={stroke} cx={cx} cy={cy} innerCircleRadius={innerCircleRadius} />
+        <LinkEventSymbolSvg
+          filled={filled}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          isMorphingPanel={isMorphingPanel}
+          cx={cx}
+          cy={cy}
+          innerCircleRadius={innerCircleRadius}
+        />
       )}
       {variant === "signalEventDefinition" && (
         <SignalEventSymbolSvg
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
+          isMorphingPanel={isMorphingPanel}
           x={x}
           y={y}
           cx={cx}
@@ -850,7 +1018,6 @@ export function EventVariantSymbolSvg({
           outerCircleRadius={outerCircleRadius}
         />
       )}
-
       {variant === "terminateEventDefinition" && (
         <>
           <circle
@@ -872,6 +1039,8 @@ export function EventVariantSymbolSvg({
 
 export function MessageEventSymbolSvg({
   stroke,
+  strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   innerCircleRadius,
@@ -879,25 +1048,29 @@ export function MessageEventSymbolSvg({
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   fill: string;
   filled: boolean;
 }) {
-  const bodyWidth = innerCircleRadius * 1.2;
-  const bodyHeight = innerCircleRadius * 0.8;
+  const scaleFactor = isMorphingPanel ? 1.9 : 1;
+
+  const scaledBodyWidth = innerCircleRadius * 1.2 * scaleFactor;
+  const scaledBodyHeight = innerCircleRadius * 0.8 * scaleFactor;
 
   const envelopeBody = {
-    topLeft: { x: cx - bodyWidth / 2, y: cy - bodyHeight / 2 },
-    bottomRight: { x: cx + bodyWidth / 2, y: cy + bodyHeight / 2 },
+    topLeft: { x: cx - scaledBodyWidth / 2, y: cy - scaledBodyHeight / 2 },
+    bottomRight: { x: cx + scaledBodyWidth / 2, y: cy + scaledBodyHeight / 2 },
   };
 
-  const flapHeight = bodyHeight * 0.5;
+  const scaledFlapHeight = scaledBodyHeight * 0.5;
   const envelopeFlap = [
-    { x: envelopeBody.topLeft.x, y: envelopeBody.topLeft.y },
-    { x: envelopeBody.bottomRight.x, y: envelopeBody.topLeft.y },
-    { x: cx, y: envelopeBody.topLeft.y + flapHeight },
+    { x: envelopeBody.topLeft.x, y: envelopeBody.topLeft.y }, // top-left
+    { x: envelopeBody.bottomRight.x, y: envelopeBody.topLeft.y }, // top-right
+    { x: cx, y: envelopeBody.topLeft.y + scaledFlapHeight }, // center flap
   ];
 
   return (
@@ -905,9 +1078,9 @@ export function MessageEventSymbolSvg({
       <rect
         x={envelopeBody.topLeft.x}
         y={envelopeBody.topLeft.y}
-        width={bodyWidth}
-        height={bodyHeight}
-        strokeWidth={1.5}
+        width={scaledBodyWidth}
+        height={scaledBodyHeight}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : fill}
         stroke={stroke}
@@ -915,7 +1088,7 @@ export function MessageEventSymbolSvg({
 
       <polygon
         points={envelopeFlap.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : fill}
         stroke={stroke}
@@ -929,7 +1102,7 @@ export function MessageEventSymbolSvg({
             x2={envelopeFlap[2].x}
             y2={envelopeFlap[2].y}
             stroke={fill}
-            strokeWidth={1.5}
+            strokeWidth={strokeWidth ?? 1.5}
           />
           <line
             x1={envelopeFlap[1].x}
@@ -937,7 +1110,7 @@ export function MessageEventSymbolSvg({
             x2={envelopeFlap[2].x}
             y2={envelopeFlap[2].y}
             stroke={fill}
-            strokeWidth={1.5}
+            strokeWidth={strokeWidth ?? 1.5}
           />
         </>
       )}
@@ -947,6 +1120,8 @@ export function MessageEventSymbolSvg({
 
 export function TimerEventSymbolSvg({
   stroke,
+  strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   innerCircleRadius,
@@ -954,29 +1129,33 @@ export function TimerEventSymbolSvg({
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   outerCircleRadius: number;
   filled: boolean;
 }) {
-  const padding = 1.2 * (outerCircleRadius - innerCircleRadius);
-  const clockRadius = innerCircleRadius - padding;
+  const scaleFactor = isMorphingPanel ? 1.4 : 1;
+
+  const scaledPadding = 1.2 * (outerCircleRadius - innerCircleRadius) * scaleFactor;
+  const scaledClockRadius = (innerCircleRadius - scaledPadding) * scaleFactor;
 
-  const shortHandLength = clockRadius * 0.5;
-  const longHandLength = clockRadius * 0.9;
+  const scaledShortHandLength = scaledClockRadius * 0.5;
+  const scaledLongHandLength = scaledClockRadius * 0.9;
 
   const hourHandAngle = Math.PI / 12;
   const minuteHandAngle = (-5 * Math.PI) / 12;
 
   const hourHand = {
-    x: cx + shortHandLength * Math.cos(hourHandAngle),
-    y: cy + shortHandLength * Math.sin(hourHandAngle),
+    x: cx + scaledShortHandLength * Math.cos(hourHandAngle),
+    y: cy + scaledShortHandLength * Math.sin(hourHandAngle),
   };
 
   const minuteHand = {
-    x: cx + longHandLength * Math.cos(minuteHandAngle),
-    y: cy + longHandLength * Math.sin(minuteHandAngle),
+    x: cx + scaledLongHandLength * Math.cos(minuteHandAngle),
+    y: cy + scaledLongHandLength * Math.sin(minuteHandAngle),
   };
 
   return (
@@ -984,9 +1163,9 @@ export function TimerEventSymbolSvg({
       <circle
         cx={cx}
         cy={cy}
-        r={clockRadius}
+        r={scaledClockRadius}
         stroke={stroke}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         fill={filled ? stroke : "transparent"}
       />
 
@@ -996,7 +1175,7 @@ export function TimerEventSymbolSvg({
         x2={hourHand.x}
         y2={hourHand.y}
         stroke={filled ? "transparent" : stroke}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
       />
 
       <line
@@ -1005,15 +1184,15 @@ export function TimerEventSymbolSvg({
         x2={minuteHand.x}
         y2={minuteHand.y}
         stroke={filled ? "transparent" : stroke}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
       />
 
       {Array.from({ length: 12 }, (_, index) => {
         const angle = (index / 12) * 2 * Math.PI;
-        const x1 = cx + clockRadius * Math.cos(angle);
-        const y1 = cy + clockRadius * Math.sin(angle);
-        const x2 = cx + (clockRadius - padding * 0.5) * Math.cos(angle);
-        const y2 = cy + (clockRadius - padding * 0.5) * Math.sin(angle);
+        const x1 = cx + scaledClockRadius * Math.cos(angle);
+        const y1 = cy + scaledClockRadius * Math.sin(angle);
+        const x2 = cx + (scaledClockRadius - scaledPadding * 0.5) * Math.cos(angle);
+        const y2 = cy + (scaledClockRadius - scaledPadding * 0.5) * Math.sin(angle);
 
         return <line key={index} x1={x1} y1={y1} x2={x2} y2={y2} stroke={stroke} strokeWidth={1.5} />;
       })}
@@ -1023,6 +1202,7 @@ export function TimerEventSymbolSvg({
 
 export function ErrorEventSymbolSvg({
   stroke,
+  strokeWidth,
   cx,
   cy,
   innerCircleRadius,
@@ -1030,6 +1210,8 @@ export function ErrorEventSymbolSvg({
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
@@ -1058,7 +1240,7 @@ export function ErrorEventSymbolSvg({
     <>
       <polygon
         points={points.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
@@ -1069,32 +1251,38 @@ export function ErrorEventSymbolSvg({
 
 export function EscalationEventSymbolSvg({
   stroke,
+  strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   innerCircleRadius,
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   filled: boolean;
 }) {
-  const arrowHeight = innerCircleRadius * 1.2;
-  const arrowBaseWidth = innerCircleRadius * 1;
+  const scaleFactor = isMorphingPanel ? 1.8 : 1;
+  const scaledArrowHeight = innerCircleRadius * 1.2 * scaleFactor;
+  const scaledArrowBaseWidth = innerCircleRadius * scaleFactor;
+  const midCenterYOffset = ((innerCircleRadius * 1.2) / 20) * scaleFactor;
 
   const arrow = [
-    { x: cx - arrowBaseWidth / 2, y: cy + arrowHeight / 2 }, // left
-    { x: cx, y: cy - arrowHeight / 2 }, // top center
-    { x: cx + arrowBaseWidth / 2, y: cy + arrowHeight / 2 }, // right
-    { x: cx, y: cy + arrowHeight / 20 }, // mid center
+    { x: cx - scaledArrowBaseWidth / 2, y: cy + scaledArrowHeight / 2 }, // left
+    { x: cx, y: cy - scaledArrowHeight / 2 }, // top center
+    { x: cx + scaledArrowBaseWidth / 2, y: cy + scaledArrowHeight / 2 }, // right
+    { x: cx, y: cy + midCenterYOffset }, // mid center
   ] as const;
 
   return (
     <>
       <polygon
         points={arrow.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
@@ -1105,12 +1293,14 @@ export function EscalationEventSymbolSvg({
 
 export function CancelEventSymbolSvg({
   stroke,
+  strokeWidth,
   cx,
   cy,
   innerCircleRadius,
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
   cx: number;
   cy: number;
   innerCircleRadius: number;
@@ -1140,7 +1330,7 @@ export function CancelEventSymbolSvg({
     <>
       <polygon
         points={cross.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
@@ -1151,6 +1341,7 @@ export function CancelEventSymbolSvg({
 
 export function CompensationEventSymbolSvg({
   stroke,
+  strokeWidth,
   cx,
   cy,
   x,
@@ -1160,6 +1351,7 @@ export function CompensationEventSymbolSvg({
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
   cx: number;
   cy: number;
   x: number;
@@ -1191,14 +1383,14 @@ export function CompensationEventSymbolSvg({
     <>
       <polygon
         points={firstTriangle.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
       />
       <polygon
         points={secondTriangle.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
@@ -1209,74 +1401,86 @@ export function CompensationEventSymbolSvg({
 
 export function ConditionalEventSymbolSvg({
   stroke,
+  strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   outerCircleRadius,
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   outerCircleRadius: number;
   filled: boolean;
 }) {
-  const squareSize = outerCircleRadius * 1.1;
+  const scaleFactor = isMorphingPanel ? 1.8 : 1;
+
+  const squareSize = outerCircleRadius * 1.1 * scaleFactor;
+  const halfSquareSize = squareSize / 2;
   const lineSpacing = squareSize / 5;
-  const lineThickness = 2;
+  const lineBuffer = isMorphingPanel ? 50 : 5;
+  const x1 = cx - halfSquareSize + lineBuffer;
+  const x2 = cx + halfSquareSize - lineBuffer;
+
+  const squareX = cx - halfSquareSize;
+  const squareY = cy - halfSquareSize;
 
   return (
     <>
       <rect
-        x={cx - squareSize / 2}
-        y={cy - squareSize / 2}
+        x={squareX}
+        y={squareY}
         width={squareSize}
         height={squareSize}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
       />
 
-      {[...Array(4)].map((_, index) => (
-        <line
-          key={index}
-          x1={cx - squareSize / 2 + 5}
-          y1={cy - squareSize / 2 + lineSpacing * (index + 1)}
-          x2={cx + squareSize / 2 - 5}
-          y2={cy - squareSize / 2 + lineSpacing * (index + 1)}
-          stroke={stroke}
-          strokeWidth={lineThickness}
-        />
-      ))}
+      {[...Array(4)].map((_, index) => {
+        const lineY = squareY + lineSpacing * (index + 1);
+        return (
+          <line key={index} x1={x1} y1={lineY} x2={x2} y2={lineY} stroke={stroke} strokeWidth={strokeWidth ?? 2} />
+        );
+      })}
     </>
   );
 }
-
 export function LinkEventSymbolSvg({
   stroke,
+  strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   innerCircleRadius,
   filled,
 }: {
   stroke: string;
+  strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   filled: boolean;
 }) {
+  const scaleFactor = isMorphingPanel ? 50 : 1;
+
   const arrowHeight = innerCircleRadius * 1.2;
   const arrowBaseWidth = innerCircleRadius * 1;
-  const shiftLeft = 7;
+  const shiftLeft = 6;
   const rectangleHeight = 5;
-  const arrowPadding = 2;
+  const arrowPadding = 1;
 
   const arrow = [
-    { x: cx - arrowBaseWidth / 2 - shiftLeft, y: cy + arrowHeight / 2 - rectangleHeight }, // bottom left rectangle
-    { x: cx - arrowBaseWidth / 2 - shiftLeft, y: cy - arrowHeight / 2 + rectangleHeight }, // top left rectangle
+    { x: cx - arrowBaseWidth / 2 - shiftLeft - scaleFactor, y: cy + arrowHeight / 2 - rectangleHeight }, // bottom left rectangle
+    { x: cx - arrowBaseWidth / 2 - shiftLeft - scaleFactor, y: cy - arrowHeight / 2 + rectangleHeight }, // top left rectangle
     { x: cx + arrowBaseWidth / 2, y: cy - arrowHeight / 2 + rectangleHeight }, // top right rectangle
-    { x: cx + arrowBaseWidth / 2, y: cy - arrowHeight / 2 - arrowPadding }, // upper arrow start
-    { x: cx + arrowBaseWidth / 2 + 8, y: cy }, // arrow point
-    { x: cx + arrowBaseWidth / 2, y: cy + arrowHeight / 2 + arrowPadding }, // lower arrow start
+    { x: cx + arrowBaseWidth / 2, y: cy - arrowHeight / 2 - arrowPadding - scaleFactor }, // upper arrow start
+    { x: cx + arrowBaseWidth / 2 + 7 + scaleFactor, y: cy }, // arrow point
+    { x: cx + arrowBaseWidth / 2, y: cy + arrowHeight / 2 + arrowPadding + scaleFactor }, // lower arrow start
     { x: cx + arrowBaseWidth / 2, y: cy + arrowHeight / 2 - rectangleHeight }, // bottom right rectangle
   ] as const;
 
@@ -1284,7 +1488,7 @@ export function LinkEventSymbolSvg({
     <>
       <polygon
         points={arrow.map((point) => `${point.x},${point.y}`).join(" ")}
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth ?? 1.5}
         strokeLinejoin={"round"}
         fill={filled ? stroke : "transparent"}
         stroke={stroke}
@@ -1296,6 +1500,7 @@ export function LinkEventSymbolSvg({
 export function SignalEventSymbolSvg({
   stroke,
   strokeWidth,
+  isMorphingPanel,
   cx,
   cy,
   x,
@@ -1306,6 +1511,7 @@ export function SignalEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
+  isMorphingPanel?: boolean;
   cx: number;
   cy: number;
   x: number;
@@ -1314,13 +1520,16 @@ export function SignalEventSymbolSvg({
   outerCircleRadius: number;
   filled: boolean;
 }) {
+  const scaleFactor = isMorphingPanel ? 1.2 : 1;
+
   const padding = 1.5 * (outerCircleRadius - innerCircleRadius);
-  const hx = x + innerCircleRadius - padding;
-  const hy = y + innerCircleRadius - padding;
+  const hx = (x + innerCircleRadius - padding) * scaleFactor;
+  const hy = (y + innerCircleRadius - padding) * scaleFactor;
+
   const triangle = [
-    { x: cx + cos30 * hx, y: padding / 4 + cy + sin30 * hy }, // right
-    { x: cx - cos30 * hx, y: padding / 4 + cy + sin30 * hy }, // left
-    { x: cx, y: padding / 4 + cy - hy }, // top
+    { x: cx + cos30 * hx, y: (padding / 4) * scaleFactor + cy + sin30 * hy }, // right
+    { x: cx - cos30 * hx, y: (padding / 4) * scaleFactor + cy + sin30 * hy }, // left
+    { x: cx, y: (padding / 4) * scaleFactor + cy - hy }, // top
   ] as const;
 
   return (
diff --git a/packages/bpmn-editor/src/diagram/nodes/morphing/useEventNodeMorphingActions.tsx b/packages/bpmn-editor/src/diagram/nodes/morphing/useEventNodeMorphingActions.tsx
index bf5ba008eb6..558950973e7 100644
--- a/packages/bpmn-editor/src/diagram/nodes/morphing/useEventNodeMorphingActions.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/morphing/useEventNodeMorphingActions.tsx
@@ -25,7 +25,7 @@ import { visitFlowElementsAndArtifacts } from "../../../mutations/_elementVisito
 import { addOrGetProcessAndDiagramElements } from "../../../mutations/addOrGetProcessAndDiagramElements";
 import { Normalized } from "../../../normalization/normalize";
 import { useBpmnEditorStoreApi } from "../../../store/StoreContext";
-import { EndEventIcon, EventDefitnitionIcon, IntermediateThrowEventIcon, StartEventIcon } from "../NodeIcons";
+import { EndEventIcon, EventDefinitionIcon, IntermediateThrowEventIcon, StartEventIcon } from "../NodeIcons";
 import { BPMN20__tProcess } from "@kie-tools/bpmn-marshaller/src/schemas/bpmn-2_0/ts-gen/types";
 import { ElementFilter } from "@kie-tools/xml-parser-ts/dist/elementFilter";
 import { NODE_COLORS } from "../NodeSvgs";
@@ -41,6 +41,8 @@ export function useEventNodeMorphingActions(event: Event) {
   const bpmnEditorStoreApi = useBpmnEditorStoreApi();
 
   const foregroundColor = NODE_COLORS[event.__$$element].foreground;
+  const backgroundColor = NODE_COLORS[event.__$$element].background;
+
   const filled = event.__$$element === "intermediateThrowEvent" || event.__$$element === "endEvent";
 
   const morphEvent = useCallback(
@@ -165,63 +167,70 @@ export function useEventNodeMorphingActions(event: Event) {
         action: () => morphEvent(undefined),
       } as const, // none
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"messageEventDefinition"} />,
+        icon: (
+          <EventDefinitionIcon
+            stroke={foregroundColor}
+            filled={filled}
+            fill={backgroundColor}
+            variant={"messageEventDefinition"}
+          />
+        ),
         key: "2",
         title: "Message",
         id: "messageEventDefinition",
         action: () => morphEvent("messageEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"timerEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"timerEventDefinition"} />,
         key: "3",
         title: "Timer",
         id: "timerEventDefinition",
         action: () => morphEvent("timerEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"errorEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"errorEventDefinition"} />,
         key: "4",
         title: "Error",
         id: "errorEventDefinition",
         action: () => morphEvent("errorEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"escalationEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"escalationEventDefinition"} />,
         key: "5",
         title: "Escalation",
         id: "escalationEventDefinition",
         action: () => morphEvent("escalationEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"cancelEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"cancelEventDefinition"} />,
         key: "6",
         title: "Cancelation",
         id: "cancelEventDefinition",
         action: () => morphEvent("cancelEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"compensateEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"compensateEventDefinition"} />,
         key: "7",
         title: "Compensation",
         id: "compensateEventDefinition",
         action: () => morphEvent("compensateEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"conditionalEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"conditionalEventDefinition"} />,
         key: "8",
         title: "Conditional",
         id: "conditionalEventDefinition",
         action: () => morphEvent("conditionalEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"linkEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"linkEventDefinition"} />,
         key: "9",
         title: "Link",
         id: "linkEventDefinition",
         action: () => morphEvent("linkEventDefinition"),
       } as const,
       {
-        icon: <EventDefitnitionIcon stroke={foregroundColor} filled={filled} variant={"signalEventDefinition"} />,
+        icon: <EventDefinitionIcon stroke={foregroundColor} filled={filled} variant={"signalEventDefinition"} />,
         key: "0",
         title: "Signal",
         id: "signalEventDefinition",
diff --git a/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx b/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx
index dc4fc963c2b..5aa9eb7cf46 100644
--- a/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx
@@ -67,35 +67,35 @@ export function useGatewayNodeMorphingActions(gateway: Gateway) {
   const morphingActions = useMemo(() => {
     return [
       {
-        icon: <GatewayIcon variant={"parallelGateway"} />,
+        icon: <GatewayIcon variant={"parallelGateway"} isMorphingPanel={true} />,
         key: "1",
         title: "Parallel",
         id: "parallelGateway",
         action: () => morphGateway("parallelGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"exclusiveGateway"} />,
+        icon: <GatewayIcon variant={"exclusiveGateway"} isMorphingPanel={true} />,
         key: "2",
         title: "Exclusive",
         id: "exclusiveGateway",
         action: () => morphGateway("exclusiveGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"inclusiveGateway"} />,
+        icon: <GatewayIcon variant={"inclusiveGateway"} isMorphingPanel={true} />,
         key: "3",
         title: "Inclusive",
         id: "inclusiveGateway",
         action: () => morphGateway("inclusiveGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"eventBasedGateway"} />,
+        icon: <GatewayIcon variant={"eventBasedGateway"} isMorphingPanel={true} />,
         key: "4",
         title: "Event",
         id: "eventBasedGateway",
         action: () => morphGateway("eventBasedGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"complexGateway"} />,
+        icon: <GatewayIcon variant={"complexGateway"} isMorphingPanel={true} />,
         key: "5",
         title: "Complex",
         id: "complexGateway",

From a343b06308faf70ef00b19c413316ead7aae0214 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 31 Oct 2024 11:33:00 +0100
Subject: [PATCH 04/12] Adding new icons for tasks and gateways and fixing all
 morphing panels

---
 .../src/diagram/BpmnDiagramDomain.tsx         |   4 +-
 .../src/diagram/nodes/NodeIcons.tsx           |   4 +-
 .../src/diagram/nodes/NodeSvgs.tsx            | 645 +++++++++++++++---
 .../bpmn-editor/src/diagram/nodes/Nodes.tsx   |   1 +
 .../morphing/useTaskNodeMorphingActions.tsx   |   8 +-
 5 files changed, 562 insertions(+), 100 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx b/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx
index 814c1ff3516..fcb6f238a05 100644
--- a/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx
+++ b/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx
@@ -103,11 +103,11 @@ export type BpmnNodeType = Values<typeof NODE_TYPES>;
 export type BpmnEdgeType = Values<typeof EDGE_TYPES>;
 
 export enum ActivityNodeMarker {
-  Compensation = "Compensation",
   MultiInstanceParallel = "MultiInstanceParallel",
   MultiInstanceSequential = "MultiInstanceSequential",
-  Collapsed = "Collapsed",
   Loop = "Loop",
+  Compensation = "Compensation",
+  Collapsed = "Collapsed",
   AdHocSubProcess = "AdHocSubProcess",
 }
 
diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index 57e31cbf6f9..95288eed329 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -116,10 +116,10 @@ export function EndEventIcon({ variant }: { variant?: EventVariant }) {
   );
 }
 
-export function TaskIcon({ variant }: { variant?: TaskVariant }) {
+export function TaskIcon({ variant, isMorphingPanel }: { variant?: TaskVariant; isMorphingPanel?: boolean }) {
   return (
     <RoundSvg>
-      <TaskNodeSvg {...nodeSvgProps} variant={variant ?? "none"} />
+      <TaskNodeSvg {...nodeSvgProps} variant={variant ?? "none"} isMorphingPanel={isMorphingPanel ?? false} />
     </RoundSvg>
   );
 }
diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index c46d90c1cfa..ffe5672fe16 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -343,7 +343,8 @@ export function EndEventNodeSvg(__props: NodeSvgProps & { variant: EventVariant
 export function TaskNodeSvg(
   __props: NodeSvgProps & {
     markers?: (ActivityNodeMarker | "CallActivityPaletteIcon")[];
-    variant?: TaskVariant | "none";
+    variant?: TaskVariant | "task" | "callActivity" | "none";
+    isMorphingPanel?: boolean;
   }
 ) {
   const {
@@ -355,26 +356,64 @@ export function TaskNodeSvg(
     props: { ..._props },
   } = normalize(__props);
 
+  const { variant, isMorphingPanel } = { ..._props };
   const { markers: _markers, variant: _variant, ...props } = { ..._props };
 
   const markers = useMemo(() => new Set(_markers), [_markers]);
-  const variant = _variant ?? "none";
+
+  const iconOffsets = {
+    scriptTask: isMorphingPanel ? { cx: x - 2, cy: y - 25 } : { cx: x + 3, cy: y + 3 },
+    businessRuleTask: isMorphingPanel ? { cx: x - 10, cy: y - 10 } : { cx: x + 3, cy: y + 3 },
+    serviceTask: isMorphingPanel ? { cx: x - 5, cy: y - 35 } : { cx: x + 3, cy: y + 3 },
+    userTask: isMorphingPanel ? { cx: x - 5, cy: y - 45 } : { cx: x + 3, cy: y + 3 },
+  };
 
   return (
     <>
-      <rect
-        x={x}
-        y={y}
-        strokeWidth={strokeWidth}
-        width={width}
-        height={height}
-        fill={DEFAULT_NODE_FILL}
-        stroke={DEFAULT_NODE_STROKE_COLOR}
-        strokeLinejoin={"round"}
-        rx="3"
-        ry="3"
-        {...props}
-      />
+      {!isMorphingPanel && (
+        <rect
+          x={x}
+          y={y}
+          strokeWidth={strokeWidth}
+          width={width}
+          height={height}
+          fill={DEFAULT_NODE_FILL}
+          stroke={DEFAULT_NODE_STROKE_COLOR}
+          strokeLinejoin={"round"}
+          rx="3"
+          ry="3"
+          {...props}
+        />
+      )}
+
+      {variant === "scriptTask" && (
+        <g transform={`translate(${iconOffsets.scriptTask.cx}, ${iconOffsets.scriptTask.cy})`}>
+          <ScriptTaskSvg stroke={NODE_COLORS.task.foreground} size={isMorphingPanel ? 200 : 25} />
+        </g>
+      )}
+
+      {variant === "businessRuleTask" && (
+        <g transform={`translate(${iconOffsets.businessRuleTask.cx}, ${iconOffsets.businessRuleTask.cy})`}>
+          <BusinessRuleTaskSvg
+            stroke={NODE_COLORS.task.foreground}
+            size={isMorphingPanel ? 200 : 25}
+            strokeWidth={isMorphingPanel ? 10 : 1}
+          />
+        </g>
+      )}
+
+      {variant === "serviceTask" && (
+        <g transform={`translate(${iconOffsets.serviceTask.cx}, ${iconOffsets.serviceTask.cy})`}>
+          <ServiceTaskSvg stroke={NODE_COLORS.task.foreground} size={isMorphingPanel ? 200 : 30} />
+        </g>
+      )}
+
+      {variant === "userTask" && (
+        <g transform={`translate(${iconOffsets.userTask.cx}, ${iconOffsets.userTask.cy})`}>
+          <UserTaskSvg stroke={NODE_COLORS.task.foreground} size={isMorphingPanel ? 200 : 25} />
+        </g>
+      )}
+
       {markers.has("CallActivityPaletteIcon") && (
         <rect
           x={x + (width / 2 - width / 3 / 2)}
@@ -394,6 +433,262 @@ export function TaskNodeSvg(
     </>
   );
 }
+
+export function ScriptTaskSvg({ stroke, size }: { stroke: string; size: number }) {
+  return (
+    <svg
+      version="1.0"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={(size * 229) / 252}
+      viewBox="0 0 252 229"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g transform="translate(0, 229) scale(0.1, -0.1)" fill={stroke} stroke="none">
+        <path
+          d="M730 2196 c-241 -98 -407 -212 -496 -342 -103 -152 -117 -357 -37
+        -544 38 -90 92 -185 138 -242 74 -92 128 -182 166 -278 30 -77 34 -95 34 -185
+        0 -94 -2 -104 -34 -167 -18 -37 -56 -90 -83 -119 -55 -55 -168 -134 -245 -169
+        -83 -37 -98 -48 -107 -74 -6 -17 -6 -34 2 -51 l12 -25 837 0 838 0 100 50
+        c174 86 288 191 352 323 45 92 57 155 50 266 -10 169 -76 322 -214 494 -95
+        118 -162 267 -178 393 -9 68 18 173 60 239 71 112 230 222 430 299 139 54 155
+        65 155 112 0 67 45 64 -860 63 l-815 0 -105 -43z m1370 -93 c0 -5 -26 -24 -58
+        -43 -31 -19 -95 -73 -142 -120 -95 -95 -140 -172 -160 -278 -35 -175 40 -420
+        181 -593 101 -124 162 -236 193 -357 20 -77 20 -131 2 -197 -43 -156 -136
+        -253 -346 -362 l-55 -28 -647 -3 c-357 -1 -648 0 -648 4 0 4 34 40 75 81 127
+        127 175 238 175 404 0 174 -68 335 -228 541 -46 60 -116 192 -142 268 -6 19
+        -14 73 -17 120 -4 70 -2 95 15 143 54 152 208 277 471 383 l106 42 613 1 c336
+        1 612 -2 612 -6z"
+        />
+        <path
+          d="M502 1794 c-28 -19 -30 -74 -4 -97 17 -15 72 -17 579 -17 530 0 561
+        1 576 18 23 25 21 68 -3 92 -20 20 -33 20 -573 20 -484 0 -555 -2 -575 -16z"
+        />
+        <path
+          d="M497 1372 c-25 -27 -22 -78 5 -96 20 -14 91 -16 573 -16 612 0 595
+        -2 595 64 0 69 26 66 -597 66 -530 0 -561 -1 -576 -18z"
+        />
+        <path
+          d="M767 892 c-10 -10 -17 -33 -17 -50 0 -64 -14 -62 600 -60 l553 3 19
+        26 c21 28 18 57 -8 84 -13 13 -90 15 -573 15 -528 0 -559 -1 -574 -18z"
+        />
+        <path
+          d="M758 479 c-47 -27 -42 -95 8 -118 18 -8 183 -11 558 -11 524 0 534 0
+        560 21 32 25 35 70 6 99 -20 20 -33 20 -567 20 -351 0 -554 -4 -565 -11z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function BusinessRuleTaskSvg({
+  stroke,
+  strokeWidth,
+  size,
+}: {
+  stroke: string;
+  strokeWidth: number;
+  size: number;
+}) {
+  const headerHeight = size / 5;
+  const rowHeight = size / 4;
+  const columnWidth1 = size / 3;
+  const columnWidth2 = (size / 3) * 2;
+
+  return (
+    <>
+      {/* Header row */}
+      <rect x={0} y={0} width={size} height={headerHeight} fill="lightgrey" stroke={stroke} strokeWidth={strokeWidth} />
+      {/* First row */}
+      <rect
+        x={0}
+        y={headerHeight}
+        width={columnWidth1}
+        height={rowHeight}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+      <rect
+        x={columnWidth1}
+        y={headerHeight}
+        width={columnWidth2}
+        height={rowHeight}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+      {/* Second row */}
+      <rect
+        x={0}
+        y={headerHeight + rowHeight}
+        width={columnWidth1}
+        height={rowHeight}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+      <rect
+        x={columnWidth1}
+        y={headerHeight + rowHeight}
+        width={columnWidth2}
+        height={rowHeight}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+    </>
+  );
+}
+
+export function ServiceTaskSvg({ stroke, size }: { stroke: string; size: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={(size * 314) / 320}
+      viewBox="0 0 320 314"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g transform={`translate(0, 314) scale(0.1, -0.1)`} stroke={stroke} strokeWidth={25}>
+        <path
+          d="M1170 3086 c-54 -21 -109 -56 -114 -74 -3 -9 -8 -74 -12 -145 l-7
+-127 -56 -16 c-31 -9 -89 -34 -130 -56 -71 -38 -74 -39 -95 -21 -11 10 -59 52
+-106 93 -142 125 -123 115 -177 100 -62 -18 -133 -64 -165 -109 -20 -28 -48
+-114 -48 -146 0 -2 19 -26 42 -53 209 -237 189 -208 170 -251 -8 -20 -27 -70
+-42 -111 l-27 -75 -149 -12 c-82 -6 -150 -12 -151 -12 -2 -1 -16 -25 -33 -53
+-27 -47 -30 -62 -30 -137 0 -74 3 -89 27 -127 16 -24 35 -46 43 -50 8 -3 73
+-10 145 -15 72 -6 135 -12 141 -14 6 -2 15 -25 19 -51 3 -26 18 -64 31 -85 13
+-21 24 -47 24 -56 -1 -10 -24 -43 -51 -73 -28 -30 -76 -83 -106 -117 l-55 -62
+12 -53 c21 -99 104 -180 202 -199 50 -9 55 -7 158 83 l73 62 16 -24 c42 -66
+52 -70 159 -70 55 0 113 -3 129 -6 l30 -6 10 -141 10 -142 -46 -54 c-96 -112
+-92 -105 -85 -161 12 -93 114 -193 209 -204 50 -6 51 -6 115 50 36 31 87 74
+114 95 l48 39 47 -27 c75 -44 102 -57 171 -78 l65 -21 6 -64 c4 -36 7 -97 8
+-136 0 -39 6 -77 14 -86 17 -21 83 -55 139 -72 41 -12 54 -12 99 1 29 9 71 27
+95 41 l42 26 6 85 c14 195 16 202 45 212 14 5 64 27 110 48 l83 39 96 -80 95
+-79 51 6 c27 4 67 19 88 32 46 31 102 113 118 176 l13 48 -44 47 c-24 25 -46
+49 -49 52 -3 3 -20 22 -39 42 l-33 36 39 74 c22 40 48 101 58 134 l17 62 46 6
+c24 3 87 6 138 6 80 0 97 3 113 19 26 26 49 71 66 129 13 40 12 53 -2 102 -8
+30 -27 72 -42 92 -28 40 -24 39 -219 54 -48 4 -88 12 -96 20 -8 7 -19 37 -26
+66 -7 29 -30 83 -51 120 -21 36 -39 74 -39 84 0 15 31 53 142 180 17 19 17 26
+6 70 -23 91 -94 174 -175 204 -30 11 -60 20 -68 20 -8 0 -45 -27 -82 -59 l-69
+-59 -134 10 c-74 6 -136 11 -138 13 -1 1 -7 62 -12 135 -6 74 -15 139 -20 145
+-5 6 -28 20 -50 31 -22 10 -40 21 -40 24 0 3 29 37 65 75 38 41 65 79 65 91 0
+58 -34 126 -87 174 -48 44 -126 80 -172 80 -6 0 -55 -40 -108 -90 -54 -49
+-103 -90 -110 -90 -6 0 -38 11 -70 24 -32 13 -72 29 -90 36 -34 13 -34 9 -49
+208 -6 79 -8 84 -40 108 -67 52 -160 67 -234 40z m137 -42 c17 -3 42 -16 57
+-27 25 -21 27 -30 37 -152 6 -71 15 -137 20 -147 5 -9 30 -24 56 -34 27 -9 78
+-30 116 -46 37 -16 73 -26 80 -22 6 4 56 48 109 97 88 80 100 88 126 82 75
+-16 156 -99 167 -171 6 -38 4 -41 -67 -110 -68 -67 -77 -72 -127 -78 -52 -5
+-148 -47 -163 -70 -4 -6 -8 -38 -8 -71 0 -33 -3 -97 -7 -142 l-6 -82 -52 -16
+c-69 -20 -82 -19 -90 5 -4 13 3 32 25 58 31 39 32 49 7 100 -11 23 -68 62 -91
+62 -7 0 -31 -16 -53 -35 -23 -19 -48 -35 -56 -35 -37 0 -47 12 -47 55 0 57 -7
+73 -41 90 -73 38 -138 2 -147 -83 -4 -46 -7 -52 -35 -61 -41 -15 -39 -16 -96
+29 -28 22 -58 40 -67 40 -29 0 -71 -39 -88 -81 -18 -45 -20 -40 37 -112 27
+-33 28 -39 17 -72 -11 -34 -13 -35 -62 -35 -70 0 -88 -18 -88 -87 0 -79 10
+-93 70 -93 37 0 55 -5 70 -20 27 -27 26 -35 -19 -91 -35 -44 -38 -53 -31 -81
+15 -52 38 -77 76 -84 30 -6 43 -2 80 25 74 52 96 39 68 -42 -10 -29 -23 -57
+-28 -63 -6 -7 -74 -17 -150 -23 -77 -7 -143 -14 -148 -17 -26 -17 -58 -95 -64
+-161 l-7 -72 -83 -70 c-70 -60 -89 -71 -120 -71 -66 0 -137 62 -163 142 -15
+46 -18 41 112 183 53 58 97 113 97 122 0 8 -13 38 -30 64 -16 27 -36 76 -43
+109 -8 34 -16 63 -19 65 -7 7 -178 25 -236 25 -47 0 -58 4 -83 31 -27 29 -29
+37 -29 109 0 79 18 133 48 145 7 2 76 8 153 11 80 4 143 12 148 18 5 6 17 38
+26 70 10 33 31 91 47 129 l30 70 -29 37 c-15 21 -68 83 -116 138 l-88 100 11
+44 c6 24 19 52 28 63 28 33 84 72 125 85 l38 12 95 -89 c173 -159 158 -154
+259 -93 33 20 89 44 125 55 98 28 96 25 105 186 l7 141 51 24 c52 24 98 29
+154 18z m709 -680 c16 -10 31 -19 33 -21 3 -2 10 -72 15 -156 l11 -152 45 -14
+c25 -8 78 -27 118 -43 41 -15 78 -28 83 -28 8 0 80 61 206 173 22 19 24 19 66
+3 57 -21 100 -65 132 -131 14 -30 25 -56 25 -59 0 -3 -38 -49 -85 -101 -47
+-53 -85 -103 -85 -111 0 -8 20 -50 44 -92 25 -42 54 -110 65 -151 12 -41 25
+-79 29 -83 5 -5 69 -14 143 -19 155 -12 172 -20 201 -94 19 -47 19 -53 4 -101
+-9 -29 -26 -63 -37 -78 -18 -23 -27 -26 -87 -27 -98 -1 -210 -13 -222 -25 -5
+-5 -20 -43 -32 -84 -12 -41 -39 -103 -60 -138 -21 -34 -38 -72 -38 -83 0 -11
+26 -48 57 -82 114 -123 105 -107 87 -160 -22 -65 -91 -133 -144 -142 -39 -7
+-43 -5 -136 74 -52 45 -102 81 -110 81 -8 0 -38 -12 -67 -27 -29 -15 -86 -41
+-127 -58 l-75 -30 -10 -143 c-9 -135 -11 -144 -35 -163 -59 -45 -144 -49 -224
+-8 -36 17 -46 28 -47 48 -1 14 -4 80 -8 146 l-6 120 -90 31 c-49 18 -122 50
+-162 73 -40 22 -79 41 -88 41 -8 0 -65 -43 -126 -96 -107 -92 -112 -96 -147
+-89 -67 13 -144 90 -157 157 -7 34 -3 40 105 163 61 70 109 132 107 139 -84
+217 -93 237 -112 241 -11 3 -81 9 -154 13 l-135 7 -20 34 c-26 44 -27 162 -3
+208 20 37 25 38 200 53 65 5 122 12 127 15 4 3 16 29 25 58 10 28 33 87 52
+131 l34 79 -43 51 c-23 28 -61 71 -84 96 -87 93 -106 122 -100 155 13 64 85
+139 158 165 l37 14 86 -80 c181 -165 186 -168 210 -145 27 24 132 73 187 87
+102 26 98 20 99 137 0 56 4 125 7 152 7 47 10 51 52 73 37 20 56 23 111 19 40
+-2 77 -11 95 -23z m-742 -50 c12 -5 16 -20 16 -60 0 -62 16 -78 86 -90 38 -6
+45 -3 82 30 36 33 43 36 62 24 36 -22 37 -55 1 -92 -35 -37 -37 -47 -15 -81
+19 -28 13 -40 -34 -67 l-29 -18 -122 111 -121 110 0 58 c0 73 22 95 74 75z
+m-254 -133 l35 -30 -40 -36 -40 -37 -32 38 c-38 43 -42 77 -11 98 24 17 33 13
+88 -33z m1308 -162 c-2 -6 -7 -10 -11 -10 -4 1 -14 1 -22 1 -8 0 -15 5 -15 10
+0 6 12 10 26 10 14 0 24 -5 22 -11z m-1408 -98 c0 -4 50 -65 111 -135 123
+-141 131 -163 59 -158 -35 2 -52 -3 -86 -28 -46 -33 -63 -37 -82 -18 -21 21
+-13 53 23 95 41 48 42 56 15 117 -19 45 -20 46 -64 46 -66 0 -76 6 -76 51 l0
+39 50 0 c28 0 50 -4 50 -9z m205 -1071 c7 -31 1 -50 -16 -50 -5 0 -9 18 -9 40
+0 47 16 53 25 10z"
+        />
+        <path
+          d="M1846 1691 c-10 -11 -23 -43 -30 -72 -10 -46 -16 -56 -48 -73 l-37
+-19 -49 42 c-29 24 -60 41 -75 41 -34 0 -73 -34 -87 -76 -10 -29 -9 -39 4 -57
+65 -89 68 -96 59 -124 -8 -23 -16 -29 -44 -31 -87 -6 -95 -10 -108 -51 -13
+-45 -1 -118 21 -132 7 -5 32 -9 56 -9 42 0 82 -25 82 -51 0 -7 -18 -31 -40
+-55 -22 -24 -40 -52 -40 -61 0 -32 40 -84 76 -99 38 -16 41 -15 96 29 l37 29
+45 -17 c44 -17 45 -18 52 -71 7 -56 21 -76 67 -93 22 -9 35 -7 60 5 41 21 47
+31 47 77 0 52 13 73 52 81 26 5 39 1 70 -25 35 -28 42 -30 71 -20 77 27 99 90
+53 157 l-24 35 19 40 c19 38 21 39 69 39 38 0 54 5 69 22 33 34 37 81 11 122
+-21 35 -32 39 -108 48 -17 2 -29 15 -44 50 l-20 48 26 34 c35 47 35 94 -2 129
+-38 36 -79 35 -127 -3 -21 -16 -48 -30 -61 -30 -31 0 -54 36 -54 83 0 28 -6
+44 -22 58 -31 25 -99 25 -122 0z m98 -81 c9 -70 14 -79 51 -94 66 -28 70 -28
+119 10 84 64 131 20 66 -61 -16 -21 -30 -39 -30 -40 0 -1 16 -37 35 -79 l34
+-76 55 0 c46 0 57 -4 67 -21 8 -16 8 -28 0 -45 -9 -21 -17 -24 -66 -24 l-56 0
+-30 -66 c-31 -70 -31 -90 1 -119 29 -27 26 -69 -7 -84 -24 -11 -29 -9 -59 20
+-28 27 -37 31 -68 25 -20 -4 -51 -13 -71 -22 -28 -11 -35 -20 -35 -42 0 -15
+-3 -44 -6 -65 -6 -33 -10 -37 -35 -37 -34 0 -49 23 -49 77 0 49 -4 53 -70 81
+-30 13 -60 26 -66 28 -6 3 -33 -13 -61 -36 l-51 -40 -26 21 c-14 11 -26 25
+-26 31 0 6 18 30 40 54 46 50 48 67 19 124 -18 35 -26 40 -54 40 -72 0 -109
+35 -85 80 9 16 21 20 65 20 54 0 55 1 71 38 31 75 30 88 -15 145 -46 61 -47
+64 -24 89 23 26 36 23 88 -22 25 -22 53 -40 60 -40 26 0 123 49 129 66 3 8 6
+29 6 45 0 46 17 69 49 69 27 0 29 -3 35 -50z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function UserTaskSvg({ stroke, size }: { stroke: string; size: number }) {
+  return (
+    <svg
+      version="1.0"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={(size * 276) / 269}
+      viewBox="0 0 269 276"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g transform="translate(0, 276) scale(0.1, -0.1)" stroke={stroke} strokeWidth={25}>
+        <path
+          d="M1310 2724 c-160 -26 -279 -82 -372 -176 -76 -77 -118 -153 -142
+        -255 -44 -196 6 -453 121 -614 18 -26 33 -51 33 -56 0 -24 -44 -45 -116 -58
+        -319 -57 -613 -271 -777 -566 l-37 -66 2 -414 3 -414 23 -3 c16 -3 22 -10 22
+        -28 l0 -24 1258 0 1257 0 18 43 c15 38 17 84 17 437 l0 394 -32 85 c-62 165
+        -212 341 -374 438 -82 49 -222 101 -324 118 -84 15 -130 34 -130 55 0 4 21 42
+        48 86 72 120 101 217 128 430 8 58 -22 197 -57 270 -55 112 -149 207 -250 252
+        -114 50 -247 78 -319 66z m416 -614 c75 -7 134 -16 141 -23 10 -10 10 -27 -1
+        -82 -7 -39 -17 -79 -21 -90 -26 -71 -72 -149 -120 -204 -62 -70 -62 -63 2
+        -132 l33 -35 -2 -175 -3 -174 -400 0 -400 0 -3 173 -2 173 40 46 c22 25 40 52
+        40 60 0 7 -17 32 -39 56 -43 47 -101 136 -119 182 -21 54 -44 177 -36 185 5 5
+        27 2 49 -6 60 -22 273 -11 335 18 75 36 274 46 506 28z m194 -600 c275 -54
+        533 -270 626 -527 27 -74 30 -103 12 -104 -10 0 -10 -2 0 -6 9 -4 12 -86 12
+        -364 l0 -359 -229 0 -230 0 -1 220 c0 121 -3 227 -6 235 -7 17 -30 20 -39 5
+        -3 -6 -6 -97 -5 -203 0 -106 -3 -207 -6 -225 l-7 -32 -736 2 c-580 2 -736 6
+        -737 16 -1 6 -2 109 -3 227 -1 186 -3 216 -17 222 -8 3 -19 2 -24 -3 -5 -5
+        -10 -110 -12 -234 l-3 -225 -223 -3 -222 -2 0 387 0 388 39 67 c105 180 259
+        327 446 427 79 43 219 89 280 93 48 3 50 2 56 -27 4 -16 7 -98 8 -181 1 -129
+        3 -153 17 -158 20 -8 842 -8 872 0 22 6 22 8 22 188 0 101 3 186 6 189 4 4 16
+        5 28 2 12 -2 46 -9 76 -15z"
+        />
+      </g>
+    </svg>
+  );
+}
 export function GatewayNodeSvg(
   __props: NodeSvgProps & { variant: GatewayVariant | "none"; isMorphingPanel?: boolean }
 ) {
@@ -1558,85 +1853,251 @@ export function ActivityNodeIcons({
   height: number;
   icons: Set<ActivityNodeMarker>;
 }) {
+  const orderedMarkers = Object.values(ActivityNodeMarker);
+  const iconElements = orderedMarkers.filter((marker) => icons.has(marker));
+  const iconSize = 20;
+  const iconSpacing = 2;
+  const stroke = NODE_COLORS.task.foreground;
+  const strokeWidth = 2;
+  const totalIconsWidth = iconElements.length * iconSize + (iconElements.length - 1) * iconSpacing;
+  const startX = x + (width - totalIconsWidth) / 2;
+  const bottomY = y + height;
+
   return (
     <>
-      {icons.has(ActivityNodeMarker.Loop) && (
-        <text
-          fontSize="2em"
-          textAnchor={"middle"}
-          dominantBaseline={"auto"}
-          fontWeight={"bold"}
-          transform={`translate(${x + width / 2}, ${y + height - 5}) rotate(0)`}
-        >
-          ↻
-        </text>
-      )}
-      {icons.has(ActivityNodeMarker.AdHocSubProcess) && (
-        <text
-          fontSize="2em"
-          textAnchor={"middle"}
-          dominantBaseline={"auto"}
-          fontWeight={"bold"}
-          transform={`translate(${x + width / 2}, ${y + height - 5}) rotate(0)`}
-        >
-          ~
-        </text>
-      )}
-      {icons.has(ActivityNodeMarker.Compensation) && (
-        <text
-          fontSize="2em"
-          textAnchor={"middle"}
-          dominantBaseline={"auto"}
-          transform={`translate(${x + width / 2}, ${y + height - 5}) rotate(0)`}
-        >
-          ⏪
-        </text>
-      )}
-      {icons.has(ActivityNodeMarker.Collapsed) && (
-        <>
-          <rect
-            x={x + width / 2 - 15}
-            y={y + height - 20 - DEFAULT_NODE_STROKE_WIDTH}
-            width={30}
-            height={20}
-            fill={"transparent"}
-            stroke={DEFAULT_NODE_STROKE_COLOR}
-            strokeWidth={DEFAULT_NODE_STROKE_WIDTH}
-          />
-          <text
-            fontSize="2em"
-            textAnchor={"middle"}
-            dominantBaseline={"auto"}
-            fontWeight={"bold"}
-            x={x + width / 2}
-            y={1 + y + height}
-          >
-            +
-          </text>
-        </>
-      )}
-      {icons.has(ActivityNodeMarker.MultiInstanceParallel) && (
-        <text
-          fontSize="2em"
-          textAnchor={"middle"}
-          dominantBaseline={"auto"}
-          fontWeight={"bold"}
-          transform={`translate(${x + width / 2 - 7}, ${y + height - 15}) rotate(90)`}
-        >
-          ☰
-        </text>
-      )}
-      {icons.has(ActivityNodeMarker.MultiInstanceSequential) && (
-        <text
-          fontSize="2em"
-          textAnchor={"middle"}
-          dominantBaseline={"auto"}
-          fontWeight={"bold"}
-          transform={`translate(${x + width / 2}, ${y + height - 5}) rotate(0)`}
-        >
-          ☰
-        </text>
-      )}
+      {iconElements.map((icon, index) => {
+        const iconX = startX + index * (iconSize + iconSpacing);
+
+        return icon === ActivityNodeMarker.Collapsed ? (
+          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize})`}>
+            <CollapsedIconSvg stroke={stroke} strokeWidth={strokeWidth} size={iconSize} />
+          </g>
+        ) : icon === ActivityNodeMarker.MultiInstanceParallel ? (
+          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize + 3})`}>
+            <MultiInstanceParallelIconSvg stroke={stroke} strokeWidth={strokeWidth} size={25} />
+          </g>
+        ) : icon === ActivityNodeMarker.MultiInstanceSequential ? (
+          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize + 3})`}>
+            <MultiInstanceSequentialIconSvg stroke={stroke} strokeWidth={strokeWidth} size={25} />
+          </g>
+        ) : icon === ActivityNodeMarker.Loop ? (
+          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize})`}>
+            <LoopIconSvg stroke={stroke} size={iconSize} />
+          </g>
+        ) : icon === ActivityNodeMarker.AdHocSubProcess ? (
+          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize + 5})`}>
+            <AdHocSubProcessIconSvg stroke={stroke} size={iconSize} />
+          </g>
+        ) : icon === ActivityNodeMarker.Compensation ? (
+          <g key={icon} transform={`translate(${iconX - 13}, ${bottomY - iconSize - 7})`}>
+            <CompensationIconSvg stroke={stroke} strokeWidth={strokeWidth} size={33} />
+          </g>
+        ) : null;
+      })}
+    </>
+  );
+}
+export function LoopIconSvg({ stroke, size }: { stroke: string; size: number }) {
+  return (
+    <svg
+      version="1.0"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={(size * 113) / 132}
+      viewBox="0 0 132.000000 113.000000"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g transform="translate(0.000000,113.000000) scale(0.100000,-0.100000)" fill={stroke} stroke="none">
+        <path
+          d="M620 1075 c-83 -23 -144 -59 -216 -128 -126 -119 -194 -300 -173
+-458 12 -87 37 -165 74 -232 15 -26 25 -50 23 -52 -2 -3 -53 11 -112 31 -123
+40 -154 41 -175 3 -13 -24 -13 -29 2 -52 13 -20 53 -37 220 -91 112 -36 215
+-66 229 -66 45 0 45 0 148 330 39 122 41 137 28 160 -15 28 -61 39 -83 20 -8
+-7 -35 -77 -61 -156 -25 -79 -50 -144 -54 -144 -15 0 -58 63 -86 126 -46 102
+-45 259 4 364 25 54 85 133 126 163 110 84 281 103 412 45 136 -59 234 -219
+234 -382 0 -172 -79 -305 -228 -387 -67 -37 -83 -62 -63 -105 20 -45 90 -27
+202 54 81 58 145 148 181 254 29 82 31 266 5 343 -65 189 -206 325 -377 364
+-60 14 -204 12 -260 -4z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function AdHocSubProcessIconSvg({ stroke, size }: { stroke: string; size: number }) {
+  return (
+    <svg
+      version="1.0"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={(size * 44) / 110}
+      viewBox="0 0 110.000000 44.000000"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g transform="translate(0.000000,44.000000) scale(0.100000,-0.100000)" fill={stroke} stroke="none">
+        <path
+          d="M210 356 c-53 -15 -92 -37 -137 -80 -33 -30 -33 -31 -33 -123 0 -51
+2 -93 5 -93 3 0 32 22 66 49 111 90 211 94 399 19 145 -59 186 -69 269 -69 78
+0 157 26 220 71 l41 30 0 78 c0 42 3 87 6 100 9 32 -11 28 -58 -12 -109 -93
+-201 -104 -358 -42 -211 84 -312 102 -420 72z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function CompensationIconSvg({
+  stroke,
+  strokeWidth,
+  size,
+}: {
+  stroke: string;
+  strokeWidth: number;
+  size: number;
+}) {
+  const arrowWidth = size / 3;
+  const arrowHeight = size / 2;
+  const centerY = size / 2;
+  const offsetX = size / 4;
+
+  return (
+    <>
+      {/* Left Arrow */}
+      <polygon
+        points={`${offsetX},${centerY} ${offsetX + arrowWidth},${centerY - arrowHeight / 2} ${offsetX + arrowWidth},${centerY + arrowHeight / 2}`}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+      />
+
+      {/* Right Arrow */}
+      <polygon
+        points={`${offsetX + arrowWidth},${centerY} ${offsetX + 2 * arrowWidth},${centerY - arrowHeight / 2} ${offsetX + 2 * arrowWidth},${centerY + arrowHeight / 2}`}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+      />
+    </>
+  );
+}
+
+export function CollapsedIconSvg({ stroke, strokeWidth, size }: { stroke: string; strokeWidth: number; size: number }) {
+  const squareSize = size;
+  const padding = size * 0.25;
+
+  return (
+    <>
+      <rect x={0} y={0} width={squareSize} height={squareSize} fill="none" stroke={stroke} strokeWidth={strokeWidth} />
+      <line
+        x1={squareSize / 2}
+        y1={padding}
+        x2={squareSize / 2}
+        y2={squareSize - padding}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+      <line
+        x1={padding}
+        y1={squareSize / 2}
+        x2={squareSize - padding}
+        y2={squareSize / 2}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+    </>
+  );
+}
+
+export function MultiInstanceSequentialIconSvg({
+  stroke,
+  strokeWidth,
+  size,
+}: {
+  stroke: string;
+  strokeWidth: number;
+  size: number;
+}) {
+  const lineSpacing = size / 6;
+  const lineWidth = size * 0.5;
+
+  return (
+    <>
+      <line
+        x1={(size - lineWidth) / 2}
+        y1={lineSpacing}
+        x2={(size + lineWidth) / 2}
+        y2={lineSpacing}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+      <line
+        x1={(size - lineWidth) / 2}
+        y1={lineSpacing * 2}
+        x2={(size + lineWidth) / 2}
+        y2={lineSpacing * 2}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+      <line
+        x1={(size - lineWidth) / 2}
+        y1={lineSpacing * 3}
+        x2={(size + lineWidth) / 2}
+        y2={lineSpacing * 3}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+    </>
+  );
+}
+
+export function MultiInstanceParallelIconSvg({
+  stroke,
+  strokeWidth,
+  size,
+}: {
+  stroke: string;
+  strokeWidth: number;
+  size: number;
+}) {
+  const lineSpacing = size / 6;
+  const lineHeight = size * 0.5;
+
+  return (
+    <>
+      <line
+        x1={lineSpacing}
+        y1={0}
+        x2={lineSpacing}
+        y2={lineHeight}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+      <line
+        x1={lineSpacing * 2}
+        y1={0}
+        x2={lineSpacing * 2}
+        y2={lineHeight}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+      <line
+        x1={lineSpacing * 3}
+        y1={0}
+        x2={lineSpacing * 3}
+        y2={lineHeight}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
     </>
   );
 }
diff --git a/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx b/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx
index 224a2fdead1..523b4cb41be 100644
--- a/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx
@@ -726,6 +726,7 @@ export const TaskNode = React.memo(
             y={0}
             strokeWidth={task.__$$element === "callActivity" ? 5 : undefined}
             markers={icons}
+            variant={task.__$$element}
           />
         </svg>
         <PositionalNodeHandles isTargeted={isTargeted && isValidConnectionTarget} nodeId={id} />
diff --git a/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx b/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx
index 8556288a5eb..620d350813b 100644
--- a/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx
@@ -68,28 +68,28 @@ export function useTaskNodeMorphingActions(task: Task) {
   const morphingActions = useMemo(() => {
     return [
       {
-        icon: <>U</>,
+        icon: <TaskIcon variant={"userTask"} isMorphingPanel={true} />,
         key: "1",
         title: "User task",
         id: "userTask",
         action: () => morphTask("userTask"),
       } as const,
       {
-        icon: <>B</>,
+        icon: <TaskIcon variant={"businessRuleTask"} isMorphingPanel={true} />,
         key: "2",
         title: "Business Rule task",
         id: "businessRuleTask",
         action: () => morphTask("businessRuleTask"),
       } as const,
       {
-        icon: <>S</>,
+        icon: <TaskIcon variant={"serviceTask"} isMorphingPanel={true} />,
         key: "3",
         title: "Service task",
         id: "serviceTask",
         action: () => morphTask("serviceTask"),
       } as const,
       {
-        icon: <>X</>,
+        icon: <TaskIcon variant={"scriptTask"} isMorphingPanel={true} />,
         key: "4",
         title: "Script task",
         id: "scriptTask",

From 201f5fa3f7137679770fba002860a11e6282aa9e Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 31 Oct 2024 11:41:13 +0100
Subject: [PATCH 05/12] minor refactor

---
 packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index ffe5672fe16..99daa17d12f 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -361,11 +361,12 @@ export function TaskNodeSvg(
 
   const markers = useMemo(() => new Set(_markers), [_markers]);
 
+  const defaultOffset = { cx: x + 3, cy: y + 3 };
   const iconOffsets = {
-    scriptTask: isMorphingPanel ? { cx: x - 2, cy: y - 25 } : { cx: x + 3, cy: y + 3 },
-    businessRuleTask: isMorphingPanel ? { cx: x - 10, cy: y - 10 } : { cx: x + 3, cy: y + 3 },
-    serviceTask: isMorphingPanel ? { cx: x - 5, cy: y - 35 } : { cx: x + 3, cy: y + 3 },
-    userTask: isMorphingPanel ? { cx: x - 5, cy: y - 45 } : { cx: x + 3, cy: y + 3 },
+    scriptTask: isMorphingPanel ? { cx: x - 2, cy: y - 25 } : defaultOffset,
+    businessRuleTask: isMorphingPanel ? { cx: x - 10, cy: y - 10 } : defaultOffset,
+    serviceTask: isMorphingPanel ? { cx: x - 5, cy: y - 35 } : defaultOffset,
+    userTask: isMorphingPanel ? { cx: x - 5, cy: y - 45 } : defaultOffset,
   };
 
   return (

From 9cdc54832556a8a50520c99795c850ce30df2d40 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 31 Oct 2024 12:38:58 +0100
Subject: [PATCH 06/12] minor positioning adjustment

---
 packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index 99daa17d12f..0b702c000a6 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -1878,7 +1878,7 @@ export function ActivityNodeIcons({
             <MultiInstanceParallelIconSvg stroke={stroke} strokeWidth={strokeWidth} size={25} />
           </g>
         ) : icon === ActivityNodeMarker.MultiInstanceSequential ? (
-          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize + 3})`}>
+          <g key={icon} transform={`translate(${iconX - 3}, ${bottomY - iconSize + 1})`}>
             <MultiInstanceSequentialIconSvg stroke={stroke} strokeWidth={strokeWidth} size={25} />
           </g>
         ) : icon === ActivityNodeMarker.Loop ? (

From 4de605ceb74ba2e0e755ab646c12a8cb4fc97487 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 31 Oct 2024 16:45:11 +0100
Subject: [PATCH 07/12] fixing marker order

---
 packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx b/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx
index fcb6f238a05..85cdb8f3878 100644
--- a/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx
+++ b/packages/bpmn-editor/src/diagram/BpmnDiagramDomain.tsx
@@ -103,11 +103,11 @@ export type BpmnNodeType = Values<typeof NODE_TYPES>;
 export type BpmnEdgeType = Values<typeof EDGE_TYPES>;
 
 export enum ActivityNodeMarker {
+  Collapsed = "Collapsed",
   MultiInstanceParallel = "MultiInstanceParallel",
   MultiInstanceSequential = "MultiInstanceSequential",
   Loop = "Loop",
   Compensation = "Compensation",
-  Collapsed = "Collapsed",
   AdHocSubProcess = "AdHocSubProcess",
 }
 

From 716931e8c8734a49f8c01cb6ac61d58816e7753c Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 31 Oct 2024 17:02:12 +0100
Subject: [PATCH 08/12] updating order and potitioning

---
 packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index 0b702c000a6..c45f24137d5 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -1874,12 +1874,12 @@ export function ActivityNodeIcons({
             <CollapsedIconSvg stroke={stroke} strokeWidth={strokeWidth} size={iconSize} />
           </g>
         ) : icon === ActivityNodeMarker.MultiInstanceParallel ? (
-          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize + 3})`}>
-            <MultiInstanceParallelIconSvg stroke={stroke} strokeWidth={strokeWidth} size={25} />
+          <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize + 2})`}>
+            <MultiInstanceParallelIconSvg stroke={stroke} strokeWidth={strokeWidth} size={28} />
           </g>
         ) : icon === ActivityNodeMarker.MultiInstanceSequential ? (
-          <g key={icon} transform={`translate(${iconX - 3}, ${bottomY - iconSize + 1})`}>
-            <MultiInstanceSequentialIconSvg stroke={stroke} strokeWidth={strokeWidth} size={25} />
+          <g key={icon} transform={`translate(${iconX - 3}, ${bottomY - iconSize - 2})`}>
+            <MultiInstanceSequentialIconSvg stroke={stroke} strokeWidth={strokeWidth} size={28} />
           </g>
         ) : icon === ActivityNodeMarker.Loop ? (
           <g key={icon} transform={`translate(${iconX}, ${bottomY - iconSize})`}>
@@ -2022,7 +2022,7 @@ export function MultiInstanceSequentialIconSvg({
   strokeWidth: number;
   size: number;
 }) {
-  const lineSpacing = size / 6;
+  const lineSpacing = size / 5;
   const lineWidth = size * 0.5;
 
   return (
@@ -2067,7 +2067,7 @@ export function MultiInstanceParallelIconSvg({
   strokeWidth: number;
   size: number;
 }) {
-  const lineSpacing = size / 6;
+  const lineSpacing = size / 5;
   const lineHeight = size * 0.5;
 
   return (

From 226754099000c99810808e419f709e49da76433e Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 7 Nov 2024 12:03:19 +0100
Subject: [PATCH 09/12] refactoring and adding updated images to properties
 panel

---
 .../src/diagram/nodes/NodeIcons.tsx           |  24 ++--
 .../src/diagram/nodes/NodeSvgs.tsx            | 112 +++++++++---------
 .../bpmn-editor/src/diagram/nodes/Nodes.tsx   |  66 +++++------
 .../useGatewayNodeMorphingActions.tsx         |  10 +-
 .../morphing/useTaskNodeMorphingActions.tsx   |   8 +-
 .../BusinessRuleTaskProperties.tsx            |   5 +-
 .../ComplexGatewayProperties.tsx              |   2 +-
 .../EndEventProperties.tsx                    |  15 ++-
 .../EventBasedGatewayProperties.tsx           |   2 +-
 .../ExclusiveGatewayProperties.tsx            |   2 +-
 .../InclusiveGatewayProperties.tsx            |   2 +-
 .../IntermediateCatchEventProperties.tsx      |  13 +-
 .../IntermediateThrowEventProperties.tsx      |  14 ++-
 .../ParallelGatewayProperties.tsx             |   2 +-
 .../ScriptTaskProperties.tsx                  |   2 +-
 .../ServiceTaskProperties.tsx                 |   2 +-
 .../StartEventProperties.tsx                  |  12 +-
 .../UserTaskProperties.tsx                    |   2 +-
 18 files changed, 164 insertions(+), 131 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index 95288eed329..d1672acb015 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -69,7 +69,7 @@ export function EventDefinitionIcon({
       <EventVariantSymbolSvg
         variant={variant ?? "none"}
         strokeWidth={16}
-        isMorphingPanel={true}
+        isIcon={true}
         filled={filled}
         stroke={stroke}
         fill={fill}
@@ -84,7 +84,7 @@ export function EventDefinitionIcon({
   );
 }
 
-export function StartEventIcon({ variant }: { variant?: EventVariant }) {
+export function StartEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
   return (
     <RoundSvg>
       <StartEventNodeSvg {...nodeSvgProps} variant={variant ?? "none"} />
@@ -92,7 +92,7 @@ export function StartEventIcon({ variant }: { variant?: EventVariant }) {
   );
 }
 
-export function IntermediateCatchEventIcon({ variant }: { variant?: EventVariant }) {
+export function IntermediateCatchEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
   return (
     <RoundSvg>
       <IntermediateCatchEventNodeSvg {...nodeSvgProps} rimWidth={40} variant={variant ?? "none"} />
@@ -100,7 +100,7 @@ export function IntermediateCatchEventIcon({ variant }: { variant?: EventVariant
   );
 }
 
-export function IntermediateThrowEventIcon({ variant }: { variant?: EventVariant }) {
+export function IntermediateThrowEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
   return (
     <RoundSvg>
       <IntermediateThrowEventNodeSvg {...nodeSvgProps} rimWidth={40} variant={variant ?? "none"} />
@@ -108,7 +108,7 @@ export function IntermediateThrowEventIcon({ variant }: { variant?: EventVariant
   );
 }
 
-export function EndEventIcon({ variant }: { variant?: EventVariant }) {
+export function EndEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
   return (
     <RoundSvg>
       <EndEventNodeSvg {...nodeSvgProps} variant={variant ?? "none"} />
@@ -116,10 +116,10 @@ export function EndEventIcon({ variant }: { variant?: EventVariant }) {
   );
 }
 
-export function TaskIcon({ variant, isMorphingPanel }: { variant?: TaskVariant; isMorphingPanel?: boolean }) {
+export function TaskIcon({ variant, isIcon }: { variant?: TaskVariant; isIcon?: boolean }) {
   return (
     <RoundSvg>
-      <TaskNodeSvg {...nodeSvgProps} variant={variant ?? "none"} isMorphingPanel={isMorphingPanel ?? false} />
+      <TaskNodeSvg {...nodeSvgProps} variant={variant ?? "none"} isIcon={isIcon ?? false} />
     </RoundSvg>
   );
 }
@@ -132,16 +132,10 @@ export function CallActivityIcon() {
   );
 }
 
-export function GatewayIcon({ variant, isMorphingPanel }: { variant?: GatewayVariant; isMorphingPanel?: boolean }) {
+export function GatewayIcon({ variant, isIcon }: { variant?: GatewayVariant; isIcon?: boolean }) {
   return (
     <RoundSvg>
-      <GatewayNodeSvg
-        {...nodeSvgProps}
-        width={200}
-        height={200}
-        variant={variant ?? "none"}
-        isMorphingPanel={isMorphingPanel ?? false}
-      />
+      <GatewayNodeSvg {...nodeSvgProps} width={200} height={200} variant={variant ?? "none"} isIcon={isIcon ?? false} />
     </RoundSvg>
   );
 }
diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index c45f24137d5..ba9c800e748 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -344,7 +344,7 @@ export function TaskNodeSvg(
   __props: NodeSvgProps & {
     markers?: (ActivityNodeMarker | "CallActivityPaletteIcon")[];
     variant?: TaskVariant | "task" | "callActivity" | "none";
-    isMorphingPanel?: boolean;
+    isIcon?: boolean;
   }
 ) {
   const {
@@ -356,22 +356,22 @@ export function TaskNodeSvg(
     props: { ..._props },
   } = normalize(__props);
 
-  const { variant, isMorphingPanel } = { ..._props };
+  const { variant, isIcon } = { ..._props };
   const { markers: _markers, variant: _variant, ...props } = { ..._props };
 
   const markers = useMemo(() => new Set(_markers), [_markers]);
 
   const defaultOffset = { cx: x + 3, cy: y + 3 };
   const iconOffsets = {
-    scriptTask: isMorphingPanel ? { cx: x - 2, cy: y - 25 } : defaultOffset,
-    businessRuleTask: isMorphingPanel ? { cx: x - 10, cy: y - 10 } : defaultOffset,
-    serviceTask: isMorphingPanel ? { cx: x - 5, cy: y - 35 } : defaultOffset,
-    userTask: isMorphingPanel ? { cx: x - 5, cy: y - 45 } : defaultOffset,
+    scriptTask: isIcon ? { cx: x - 2, cy: y - 25 } : defaultOffset,
+    businessRuleTask: isIcon ? { cx: x - 10, cy: y - 10 } : defaultOffset,
+    serviceTask: isIcon ? { cx: x - 5, cy: y - 35 } : defaultOffset,
+    userTask: isIcon ? { cx: x - 5, cy: y - 45 } : defaultOffset,
   };
 
   return (
     <>
-      {!isMorphingPanel && (
+      {!isIcon && (
         <rect
           x={x}
           y={y}
@@ -389,7 +389,7 @@ export function TaskNodeSvg(
 
       {variant === "scriptTask" && (
         <g transform={`translate(${iconOffsets.scriptTask.cx}, ${iconOffsets.scriptTask.cy})`}>
-          <ScriptTaskSvg stroke={NODE_COLORS.task.foreground} size={isMorphingPanel ? 200 : 25} />
+          <ScriptTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? 200 : 25} />
         </g>
       )}
 
@@ -397,21 +397,21 @@ export function TaskNodeSvg(
         <g transform={`translate(${iconOffsets.businessRuleTask.cx}, ${iconOffsets.businessRuleTask.cy})`}>
           <BusinessRuleTaskSvg
             stroke={NODE_COLORS.task.foreground}
-            size={isMorphingPanel ? 200 : 25}
-            strokeWidth={isMorphingPanel ? 10 : 1}
+            size={isIcon ? 200 : 25}
+            strokeWidth={isIcon ? 10 : 1}
           />
         </g>
       )}
 
       {variant === "serviceTask" && (
         <g transform={`translate(${iconOffsets.serviceTask.cx}, ${iconOffsets.serviceTask.cy})`}>
-          <ServiceTaskSvg stroke={NODE_COLORS.task.foreground} size={isMorphingPanel ? 200 : 30} />
+          <ServiceTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? 200 : 30} />
         </g>
       )}
 
       {variant === "userTask" && (
         <g transform={`translate(${iconOffsets.userTask.cx}, ${iconOffsets.userTask.cy})`}>
-          <UserTaskSvg stroke={NODE_COLORS.task.foreground} size={isMorphingPanel ? 200 : 25} />
+          <UserTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? 200 : 25} />
         </g>
       )}
 
@@ -690,9 +690,7 @@ export function UserTaskSvg({ stroke, size }: { stroke: string; size: number })
     </svg>
   );
 }
-export function GatewayNodeSvg(
-  __props: NodeSvgProps & { variant: GatewayVariant | "none"; isMorphingPanel?: boolean }
-) {
+export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant | "none"; isIcon?: boolean }) {
   const {
     x,
     y,
@@ -702,12 +700,12 @@ export function GatewayNodeSvg(
     props: { ..._props },
   } = normalize(__props);
 
-  const { variant, isMorphingPanel, ...props } = { ..._props };
-  const morphingPanelOffset = isMorphingPanel ? 25 : 0;
+  const { variant, isIcon, ...props } = { ..._props };
+  const morphingPanelOffset = isIcon ? 25 : 0;
 
   return (
     <>
-      {!isMorphingPanel && (
+      {!isIcon && (
         <rect
           x={8 + x}
           y={8 + y}
@@ -726,47 +724,47 @@ export function GatewayNodeSvg(
       {variant === "parallelGateway" && (
         <ParallelGatewaySvg
           stroke={NODE_COLORS.gateway.foreground}
-          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
           cy={y + height / 2 - morphingPanelOffset}
-          size={isMorphingPanel ? 210 : 30}
+          size={isIcon ? 210 : 30}
         />
       )}
       {variant === "exclusiveGateway" && (
         <ExclusiveGatewaySvg
           stroke={NODE_COLORS.gateway.foreground}
-          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
           cy={y + height / 2 - morphingPanelOffset}
-          size={isMorphingPanel ? 210 : 30}
+          size={isIcon ? 210 : 30}
         />
       )}
       {variant === "inclusiveGateway" && (
         <InclusiveGatewaySvg
           stroke={NODE_COLORS.gateway.foreground}
-          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
           cy={y + height / 2 - morphingPanelOffset}
-          size={isMorphingPanel ? 275 : 40}
+          size={isIcon ? 275 : 40}
         />
       )}
       {variant === "eventBasedGateway" && (
         <EventBasedGatewaySvg
           stroke={NODE_COLORS.gateway.foreground}
-          circleStrokeWidth={isMorphingPanel ? 10 : 1.5}
-          strokeWidth={isMorphingPanel ? 30 : 2}
+          circleStrokeWidth={isIcon ? 10 : 1.5}
+          strokeWidth={isIcon ? 30 : 2}
           cx={x + width / 2}
           cy={y + height / 2 - morphingPanelOffset}
-          size={isMorphingPanel ? 275 : 40}
+          size={isIcon ? 275 : 40}
         />
       )}
       {variant === "complexGateway" && (
         <ComplexGatewaySvg
           stroke={NODE_COLORS.gateway.foreground}
-          strokeWidth={isMorphingPanel ? 30 : 4.5}
+          strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
           cy={y + height / 2 - morphingPanelOffset}
-          size={isMorphingPanel ? 300 : 50}
+          size={isIcon ? 300 : 50}
         />
       )}
     </>
@@ -1184,7 +1182,7 @@ export function EventVariantSymbolSvg({
   variant,
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   x,
@@ -1197,7 +1195,7 @@ export function EventVariantSymbolSvg({
   variant: EventVariant | "none";
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   x: number;
@@ -1215,7 +1213,7 @@ export function EventVariantSymbolSvg({
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
-          isMorphingPanel={isMorphingPanel}
+          isIcon={isIcon}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -1226,7 +1224,7 @@ export function EventVariantSymbolSvg({
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
-          isMorphingPanel={isMorphingPanel}
+          isIcon={isIcon}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -1249,7 +1247,7 @@ export function EventVariantSymbolSvg({
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
-          isMorphingPanel={isMorphingPanel}
+          isIcon={isIcon}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -1283,7 +1281,7 @@ export function EventVariantSymbolSvg({
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
-          isMorphingPanel={isMorphingPanel}
+          isIcon={isIcon}
           cx={cx}
           cy={cy}
           outerCircleRadius={outerCircleRadius}
@@ -1294,7 +1292,7 @@ export function EventVariantSymbolSvg({
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
-          isMorphingPanel={isMorphingPanel}
+          isIcon={isIcon}
           cx={cx}
           cy={cy}
           innerCircleRadius={innerCircleRadius}
@@ -1305,7 +1303,7 @@ export function EventVariantSymbolSvg({
           filled={filled}
           stroke={stroke}
           strokeWidth={strokeWidth}
-          isMorphingPanel={isMorphingPanel}
+          isIcon={isIcon}
           x={x}
           y={y}
           cx={cx}
@@ -1336,7 +1334,7 @@ export function EventVariantSymbolSvg({
 export function MessageEventSymbolSvg({
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   innerCircleRadius,
@@ -1345,14 +1343,14 @@ export function MessageEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   fill: string;
   filled: boolean;
 }) {
-  const scaleFactor = isMorphingPanel ? 1.9 : 1;
+  const scaleFactor = isIcon ? 1.9 : 1;
 
   const scaledBodyWidth = innerCircleRadius * 1.2 * scaleFactor;
   const scaledBodyHeight = innerCircleRadius * 0.8 * scaleFactor;
@@ -1417,7 +1415,7 @@ export function MessageEventSymbolSvg({
 export function TimerEventSymbolSvg({
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   innerCircleRadius,
@@ -1426,14 +1424,14 @@ export function TimerEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   outerCircleRadius: number;
   filled: boolean;
 }) {
-  const scaleFactor = isMorphingPanel ? 1.4 : 1;
+  const scaleFactor = isIcon ? 1.4 : 1;
 
   const scaledPadding = 1.2 * (outerCircleRadius - innerCircleRadius) * scaleFactor;
   const scaledClockRadius = (innerCircleRadius - scaledPadding) * scaleFactor;
@@ -1507,7 +1505,7 @@ export function ErrorEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
@@ -1548,7 +1546,7 @@ export function ErrorEventSymbolSvg({
 export function EscalationEventSymbolSvg({
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   innerCircleRadius,
@@ -1556,13 +1554,13 @@ export function EscalationEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   filled: boolean;
 }) {
-  const scaleFactor = isMorphingPanel ? 1.8 : 1;
+  const scaleFactor = isIcon ? 1.8 : 1;
   const scaledArrowHeight = innerCircleRadius * 1.2 * scaleFactor;
   const scaledArrowBaseWidth = innerCircleRadius * scaleFactor;
   const midCenterYOffset = ((innerCircleRadius * 1.2) / 20) * scaleFactor;
@@ -1698,7 +1696,7 @@ export function CompensationEventSymbolSvg({
 export function ConditionalEventSymbolSvg({
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   outerCircleRadius,
@@ -1706,18 +1704,18 @@ export function ConditionalEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   outerCircleRadius: number;
   filled: boolean;
 }) {
-  const scaleFactor = isMorphingPanel ? 1.8 : 1;
+  const scaleFactor = isIcon ? 1.8 : 1;
 
   const squareSize = outerCircleRadius * 1.1 * scaleFactor;
   const halfSquareSize = squareSize / 2;
   const lineSpacing = squareSize / 5;
-  const lineBuffer = isMorphingPanel ? 50 : 5;
+  const lineBuffer = isIcon ? 50 : 5;
   const x1 = cx - halfSquareSize + lineBuffer;
   const x2 = cx + halfSquareSize - lineBuffer;
 
@@ -1748,7 +1746,7 @@ export function ConditionalEventSymbolSvg({
 export function LinkEventSymbolSvg({
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   innerCircleRadius,
@@ -1756,13 +1754,13 @@ export function LinkEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   innerCircleRadius: number;
   filled: boolean;
 }) {
-  const scaleFactor = isMorphingPanel ? 50 : 1;
+  const scaleFactor = isIcon ? 50 : 1;
 
   const arrowHeight = innerCircleRadius * 1.2;
   const arrowBaseWidth = innerCircleRadius * 1;
@@ -1796,7 +1794,7 @@ export function LinkEventSymbolSvg({
 export function SignalEventSymbolSvg({
   stroke,
   strokeWidth,
-  isMorphingPanel,
+  isIcon,
   cx,
   cy,
   x,
@@ -1807,7 +1805,7 @@ export function SignalEventSymbolSvg({
 }: {
   stroke: string;
   strokeWidth?: number;
-  isMorphingPanel?: boolean;
+  isIcon?: boolean;
   cx: number;
   cy: number;
   x: number;
@@ -1816,7 +1814,7 @@ export function SignalEventSymbolSvg({
   outerCircleRadius: number;
   filled: boolean;
 }) {
-  const scaleFactor = isMorphingPanel ? 1.2 : 1;
+  const scaleFactor = isIcon ? 1.2 : 1;
 
   const padding = 1.5 * (outerCircleRadius - innerCircleRadius);
   const hx = (x + innerCircleRadius - padding) * scaleFactor;
diff --git a/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx b/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx
index 523b4cb41be..4faee06eb8b 100644
--- a/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/Nodes.tsx
@@ -141,7 +141,7 @@ export const StartEventNode = React.memo(
       [bpmnEditorStoreApi, id]
     );
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useEventNodeMorphingActions(startEvent);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(
@@ -184,7 +184,7 @@ export const StartEventNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -196,7 +196,7 @@ export const StartEventNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.startEvent].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.startEvent].edges}
             />
@@ -204,7 +204,7 @@ export const StartEventNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && shouldActLikeHovered}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.startEvent.foreground}
@@ -214,7 +214,7 @@ export const StartEventNode = React.memo(
           </div>
           {/* Creates a div element with the node size to push down the <EditableNodeLabel /> */}
           {<div style={{ height: nodeDimensions.height, flexShrink: 0 }} />}
-          {(startEvent["@_name"] || isEditingLabel) && !isMorphingPanelExpanded && (
+          {(startEvent["@_name"] || isEditingLabel) && !isIconExpanded && (
             <NodeLabelAtTheBottom>
               <EditableNodeLabel
                 id={id}
@@ -285,7 +285,7 @@ export const IntermediateCatchEventNode = React.memo(
       [bpmnEditorStoreApi, id]
     );
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useEventNodeMorphingActions(intermediateCatchEvent);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(
@@ -330,7 +330,7 @@ export const IntermediateCatchEventNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -342,7 +342,7 @@ export const IntermediateCatchEventNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.intermediateCatchEvent].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.intermediateCatchEvent].edges}
             />
@@ -350,7 +350,7 @@ export const IntermediateCatchEventNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && shouldActLikeHovered}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.intermediateCatchEvent.foreground}
@@ -360,7 +360,7 @@ export const IntermediateCatchEventNode = React.memo(
           </div>
           {/* Creates a div element with the node size to push down the <EditableNodeLabel /> */}
           {<div style={{ height: nodeDimensions.height, flexShrink: 0 }} />}
-          {(intermediateCatchEvent["@_name"] || isEditingLabel) && !isMorphingPanelExpanded && (
+          {(intermediateCatchEvent["@_name"] || isEditingLabel) && !isIconExpanded && (
             <NodeLabelAtTheBottom>
               <EditableNodeLabel
                 id={id}
@@ -428,7 +428,7 @@ export const IntermediateThrowEventNode = React.memo(
       [bpmnEditorStoreApi, id]
     );
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useEventNodeMorphingActions(intermediateThrowEvent);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(
@@ -468,7 +468,7 @@ export const IntermediateThrowEventNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -480,7 +480,7 @@ export const IntermediateThrowEventNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.intermediateThrowEvent].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.intermediateThrowEvent].edges}
             />
@@ -488,7 +488,7 @@ export const IntermediateThrowEventNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && shouldActLikeHovered}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.intermediateThrowEvent.foreground}
@@ -498,7 +498,7 @@ export const IntermediateThrowEventNode = React.memo(
           </div>
           {/* Creates a div element with the node size to push down the <EditableNodeLabel /> */}
           {<div style={{ height: nodeDimensions.height, flexShrink: 0 }} />}
-          {(intermediateThrowEvent["@_name"] || isEditingLabel) && !isMorphingPanelExpanded && (
+          {(intermediateThrowEvent["@_name"] || isEditingLabel) && !isIconExpanded && (
             <NodeLabelAtTheBottom>
               <EditableNodeLabel
                 id={id}
@@ -564,7 +564,7 @@ export const EndEventNode = React.memo(
       [bpmnEditorStoreApi, id]
     );
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useEventNodeMorphingActions(endEvent);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(
@@ -598,7 +598,7 @@ export const EndEventNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -610,7 +610,7 @@ export const EndEventNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.endEvent].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.endEvent].edges}
             />
@@ -618,7 +618,7 @@ export const EndEventNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && shouldActLikeHovered}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.endEvent.foreground}
@@ -628,7 +628,7 @@ export const EndEventNode = React.memo(
           </div>
           {/* Creates a div element with the node size to push down the <EditableNodeLabel /> */}
           {<div style={{ height: nodeDimensions.height, flexShrink: 0 }} />}
-          {(endEvent["@_name"] || isEditingLabel) && !isMorphingPanelExpanded && (
+          {(endEvent["@_name"] || isEditingLabel) && !isIconExpanded && (
             <NodeLabelAtTheBottom>
               <EditableNodeLabel
                 id={id}
@@ -711,7 +711,7 @@ export const TaskNode = React.memo(
 
     const icons = useActivityIcons(task);
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useTaskNodeMorphingActions(task);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(() => new Set(), []);
@@ -743,7 +743,7 @@ export const TaskNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -778,7 +778,7 @@ export const TaskNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.task].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.task].edges}
             />
@@ -786,7 +786,7 @@ export const TaskNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && shouldActLikeHovered}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.task.foreground}
@@ -858,7 +858,7 @@ export const SubProcessNode = React.memo(
 
     const icons = useActivityIcons(subProcess);
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useSubProcessNodeMorphingActions(subProcess);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(() => new Set(), []);
@@ -897,7 +897,7 @@ export const SubProcessNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && isOnlySelectedNode && !dragging}
+              isVisible={!isIconExpanded && !isTargeted && isOnlySelectedNode && !dragging}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -932,7 +932,7 @@ export const SubProcessNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && isOnlySelectedNode && !dragging}
+              isVisible={!isIconExpanded && !isTargeted && isOnlySelectedNode && !dragging}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.subProcess].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.subProcess].edges}
             />
@@ -940,7 +940,7 @@ export const SubProcessNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && isOnlySelectedNode && !dragging}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.subProcess.foreground}
@@ -1012,7 +1012,7 @@ export const GatewayNode = React.memo(
       [bpmnEditorStoreApi, id]
     );
 
-    const [isMorphingPanelExpanded, setMorphingPanelExpanded] = useState(false);
+    const [isIconExpanded, setMorphingPanelExpanded] = useState(false);
     useEffect(() => setMorphingPanelExpanded(false), [isHovered]);
     const morphingActions = useGatewayNodeMorphingActions(gateway);
     const disabledMorphingActionIds = useMemo<Set<Unpacked<typeof morphingActions>["id"]>>(() => new Set(), []);
@@ -1037,7 +1037,7 @@ export const GatewayNode = React.memo(
           <br /> */}
           <div className={"xyflow-react-kie-diagram--node"}>
             <InfoNodePanel
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               onClick={useCallback(() => {
                 bpmnEditorStoreApi.setState((state) => {
                   state.propertiesPanel.isOpen = true;
@@ -1049,7 +1049,7 @@ export const GatewayNode = React.memo(
               nodeMapping={bpmnNodesOutgoingStuffNodePanelMapping}
               edgeMapping={bpmnEdgesOutgoingStuffNodePanelMapping}
               nodeHref={id}
-              isVisible={!isMorphingPanelExpanded && !isTargeted && shouldActLikeHovered}
+              isVisible={!isIconExpanded && !isTargeted && shouldActLikeHovered}
               nodeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.gateway].nodes}
               edgeTypes={BPMN_OUTGOING_STRUCTURE[NODE_TYPES.gateway].edges}
             />
@@ -1057,7 +1057,7 @@ export const GatewayNode = React.memo(
             <NodeMorphingPanel
               disabledActionIds={disabledMorphingActionIds}
               isToggleVisible={!isTargeted && shouldActLikeHovered}
-              isExpanded={isMorphingPanelExpanded}
+              isExpanded={isIconExpanded}
               setExpanded={setMorphingPanelExpanded}
               actions={morphingActions}
               primaryColor={NODE_COLORS.gateway.foreground}
@@ -1067,7 +1067,7 @@ export const GatewayNode = React.memo(
           </div>
           {/* Creates a div element with the node size to push down the <EditableNodeLabel /> */}
           {<div style={{ height: nodeDimensions.height, flexShrink: 0 }} />}
-          {(gateway["@_name"] || isEditingLabel) && !isMorphingPanelExpanded && (
+          {(gateway["@_name"] || isEditingLabel) && !isIconExpanded && (
             <NodeLabelAtTheBottom>
               <EditableNodeLabel
                 id={id}
diff --git a/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx b/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx
index 5aa9eb7cf46..6d79ef0e08b 100644
--- a/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/morphing/useGatewayNodeMorphingActions.tsx
@@ -67,35 +67,35 @@ export function useGatewayNodeMorphingActions(gateway: Gateway) {
   const morphingActions = useMemo(() => {
     return [
       {
-        icon: <GatewayIcon variant={"parallelGateway"} isMorphingPanel={true} />,
+        icon: <GatewayIcon variant={"parallelGateway"} isIcon={true} />,
         key: "1",
         title: "Parallel",
         id: "parallelGateway",
         action: () => morphGateway("parallelGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"exclusiveGateway"} isMorphingPanel={true} />,
+        icon: <GatewayIcon variant={"exclusiveGateway"} isIcon={true} />,
         key: "2",
         title: "Exclusive",
         id: "exclusiveGateway",
         action: () => morphGateway("exclusiveGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"inclusiveGateway"} isMorphingPanel={true} />,
+        icon: <GatewayIcon variant={"inclusiveGateway"} isIcon={true} />,
         key: "3",
         title: "Inclusive",
         id: "inclusiveGateway",
         action: () => morphGateway("inclusiveGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"eventBasedGateway"} isMorphingPanel={true} />,
+        icon: <GatewayIcon variant={"eventBasedGateway"} isIcon={true} />,
         key: "4",
         title: "Event",
         id: "eventBasedGateway",
         action: () => morphGateway("eventBasedGateway"),
       } as const,
       {
-        icon: <GatewayIcon variant={"complexGateway"} isMorphingPanel={true} />,
+        icon: <GatewayIcon variant={"complexGateway"} isIcon={true} />,
         key: "5",
         title: "Complex",
         id: "complexGateway",
diff --git a/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx b/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx
index 620d350813b..685e24225b0 100644
--- a/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/morphing/useTaskNodeMorphingActions.tsx
@@ -68,28 +68,28 @@ export function useTaskNodeMorphingActions(task: Task) {
   const morphingActions = useMemo(() => {
     return [
       {
-        icon: <TaskIcon variant={"userTask"} isMorphingPanel={true} />,
+        icon: <TaskIcon variant={"userTask"} isIcon={true} />,
         key: "1",
         title: "User task",
         id: "userTask",
         action: () => morphTask("userTask"),
       } as const,
       {
-        icon: <TaskIcon variant={"businessRuleTask"} isMorphingPanel={true} />,
+        icon: <TaskIcon variant={"businessRuleTask"} isIcon={true} />,
         key: "2",
         title: "Business Rule task",
         id: "businessRuleTask",
         action: () => morphTask("businessRuleTask"),
       } as const,
       {
-        icon: <TaskIcon variant={"serviceTask"} isMorphingPanel={true} />,
+        icon: <TaskIcon variant={"serviceTask"} isIcon={true} />,
         key: "3",
         title: "Service task",
         id: "serviceTask",
         action: () => morphTask("serviceTask"),
       } as const,
       {
-        icon: <TaskIcon variant={"scriptTask"} isMorphingPanel={true} />,
+        icon: <TaskIcon variant={"scriptTask"} isIcon={true} />,
         key: "4",
         title: "Script task",
         id: "scriptTask",
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/BusinessRuleTaskProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/BusinessRuleTaskProperties.tsx
index d873e6907e7..c30802c0296 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/BusinessRuleTaskProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/BusinessRuleTaskProperties.tsx
@@ -50,7 +50,10 @@ export function BusinessRuleTaskProperties({
 
   return (
     <>
-      <PropertiesPanelHeaderFormSection title={businessRuleTask["@_name"] || "Business rule task"} icon={<TaskIcon />}>
+      <PropertiesPanelHeaderFormSection
+        title={businessRuleTask["@_name"] || "Business rule task"}
+        icon={<TaskIcon variant={businessRuleTask.__$$element} isIcon={true} />}
+      >
         <NameDocumentationAndId element={businessRuleTask} />
         <Divider inset={{ default: "insetXs" }} />
         <FormGroup
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ComplexGatewayProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ComplexGatewayProperties.tsx
index bf95459b428..30f2b305662 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ComplexGatewayProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ComplexGatewayProperties.tsx
@@ -32,7 +32,7 @@ export function ComplexGatewayProperties({
   return (
     <PropertiesPanelHeaderFormSection
       title={complexGateway["@_name"] || "Complex gateway"}
-      icon={<GatewayIcon variant={"complexGateway"} />}
+      icon={<GatewayIcon variant={"complexGateway"} isIcon={true} />}
     >
       <NameDocumentationAndId element={complexGateway} />
     </PropertiesPanelHeaderFormSection>
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EndEventProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EndEventProperties.tsx
index 58765b92a25..b3a24d53090 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EndEventProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EndEventProperties.tsx
@@ -23,20 +23,31 @@ import { Normalized } from "../../normalization/normalize";
 import { NameDocumentationAndId } from "../nameDocumentationAndId/NameDocumentationAndId";
 import { InputOnlyAssociationFormSection } from "../assignments/AssignmentsFormSection";
 import { EventDefinitionProperties } from "../eventDefinition/EventDefinitionProperties";
-import { EndEventIcon } from "../../diagram/nodes/NodeIcons";
+import { EndEventIcon, EventDefinitionIcon } from "../../diagram/nodes/NodeIcons";
 import { PropertiesPanelHeaderFormSection } from "./_PropertiesPanelHeaderFormSection";
 import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
+import { NODE_COLORS } from "../../diagram/nodes/NodeSvgs";
 
 export function EndEventProperties({
   endEvent,
 }: {
   endEvent: Normalized<BPMN20__tEndEvent> & { __$$element: "endEvent" };
 }) {
+  const foregroundColor = NODE_COLORS.endEvent.foreground;
+  const backgroundColor = NODE_COLORS.endEvent.background;
+
   return (
     <>
       <PropertiesPanelHeaderFormSection
         title={endEvent["@_name"] || "End event"}
-        icon={<EndEventIcon variant={endEvent.eventDefinition?.[0]?.__$$element} />}
+        icon={
+          <EventDefinitionIcon
+            variant={endEvent.eventDefinition?.[0]?.__$$element}
+            filled={true}
+            fill={backgroundColor}
+            stroke={foregroundColor}
+          />
+        }
       >
         <NameDocumentationAndId element={endEvent} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EventBasedGatewayProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EventBasedGatewayProperties.tsx
index adaf97a7c3c..fd0e73801f0 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EventBasedGatewayProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/EventBasedGatewayProperties.tsx
@@ -33,7 +33,7 @@ export function EventBasedGatewayProperties({
   return (
     <PropertiesPanelHeaderFormSection
       title={eventBasedGateway["@_name"] || "Event-based gateway"}
-      icon={<GatewayIcon variant={eventBasedGateway.__$$element} />}
+      icon={<GatewayIcon variant={eventBasedGateway.__$$element} isIcon={true} />}
     >
       <NameDocumentationAndId element={eventBasedGateway} />
     </PropertiesPanelHeaderFormSection>
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ExclusiveGatewayProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ExclusiveGatewayProperties.tsx
index 64c6f6e4956..84653dc5ead 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ExclusiveGatewayProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ExclusiveGatewayProperties.tsx
@@ -34,7 +34,7 @@ export function ExclusiveGatewayProperties({
   return (
     <PropertiesPanelHeaderFormSection
       title={exclusiveGateway["@_name"] || "Exclusive gateway"}
-      icon={<GatewayIcon variant={exclusiveGateway.__$$element} />}
+      icon={<GatewayIcon variant={exclusiveGateway.__$$element} isIcon={true} />}
     >
       <NameDocumentationAndId element={exclusiveGateway} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/InclusiveGatewayProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/InclusiveGatewayProperties.tsx
index 7bc6dd6f2e2..4744db7e283 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/InclusiveGatewayProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/InclusiveGatewayProperties.tsx
@@ -34,7 +34,7 @@ export function InclusiveGatewayProperties({
   return (
     <PropertiesPanelHeaderFormSection
       title={inclusiveGateway["@_name"] || "Inclusive gateway"}
-      icon={<GatewayIcon variant={inclusiveGateway.__$$element} />}
+      icon={<GatewayIcon variant={inclusiveGateway.__$$element} isIcon={true} />}
     >
       <NameDocumentationAndId element={inclusiveGateway} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateCatchEventProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateCatchEventProperties.tsx
index cb0c5e9df09..7e34ae9f3ae 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateCatchEventProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateCatchEventProperties.tsx
@@ -23,20 +23,29 @@ import { Normalized } from "../../normalization/normalize";
 import { NameDocumentationAndId } from "../nameDocumentationAndId/NameDocumentationAndId";
 import { OutputOnlyAssociationFormSection } from "../assignments/AssignmentsFormSection";
 import { EventDefinitionProperties } from "../eventDefinition/EventDefinitionProperties";
-import { IntermediateCatchEventIcon } from "../../diagram/nodes/NodeIcons";
+import { EventDefinitionIcon, IntermediateCatchEventIcon } from "../../diagram/nodes/NodeIcons";
 import { PropertiesPanelHeaderFormSection } from "./_PropertiesPanelHeaderFormSection";
 import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
+import { NODE_COLORS } from "../../diagram/nodes/NodeSvgs";
 
 export function IntermediateCatchEventProperties({
   intermediateCatchEvent,
 }: {
   intermediateCatchEvent: Normalized<BPMN20__tIntermediateCatchEvent> & { __$$element: "intermediateCatchEvent" };
 }) {
+  const foregroundColor = NODE_COLORS.intermediateCatchEvent.foreground;
+
   return (
     <>
       <PropertiesPanelHeaderFormSection
         title={intermediateCatchEvent["@_name"] || "Intermediate catch event"}
-        icon={<IntermediateCatchEventIcon variant={intermediateCatchEvent.eventDefinition?.[0]?.__$$element} />}
+        icon={
+          <EventDefinitionIcon
+            variant={intermediateCatchEvent.eventDefinition?.[0]?.__$$element}
+            filled={false}
+            stroke={foregroundColor}
+          />
+        }
       >
         <NameDocumentationAndId element={intermediateCatchEvent} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateThrowEventProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateThrowEventProperties.tsx
index 6616042743c..ed02440802d 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateThrowEventProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/IntermediateThrowEventProperties.tsx
@@ -23,20 +23,30 @@ import { Normalized } from "../../normalization/normalize";
 import { NameDocumentationAndId } from "../nameDocumentationAndId/NameDocumentationAndId";
 import { InputOnlyAssociationFormSection } from "../assignments/AssignmentsFormSection";
 import { EventDefinitionProperties } from "../eventDefinition/EventDefinitionProperties";
-import { IntermediateThrowEventIcon } from "../../diagram/nodes/NodeIcons";
+import { EventDefinitionIcon, IntermediateThrowEventIcon } from "../../diagram/nodes/NodeIcons";
 import { PropertiesPanelHeaderFormSection } from "./_PropertiesPanelHeaderFormSection";
 import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
+import { NODE_COLORS } from "../../diagram/nodes/NodeSvgs";
 
 export function IntermediateThrowEventProperties({
   intermediateThrowEvent,
 }: {
   intermediateThrowEvent: Normalized<BPMN20__tIntermediateThrowEvent> & { __$$element: "intermediateThrowEvent" };
 }) {
+  const foregroundColor = NODE_COLORS.intermediateThrowEvent.foreground;
+  const backgroundColor = NODE_COLORS.intermediateThrowEvent.background;
   return (
     <>
       <PropertiesPanelHeaderFormSection
         title={intermediateThrowEvent["@_name"] || "Intermediate throw event"}
-        icon={<IntermediateThrowEventIcon variant={intermediateThrowEvent.eventDefinition?.[0]?.__$$element} />}
+        icon={
+          <EventDefinitionIcon
+            variant={intermediateThrowEvent.eventDefinition?.[0]?.__$$element}
+            filled={true}
+            stroke={foregroundColor}
+            fill={backgroundColor}
+          />
+        }
       >
         <NameDocumentationAndId element={intermediateThrowEvent} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ParallelGatewayProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ParallelGatewayProperties.tsx
index b0cd7ab3784..db50350b4aa 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ParallelGatewayProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ParallelGatewayProperties.tsx
@@ -33,7 +33,7 @@ export function ParallelGatewayProperties({
   return (
     <PropertiesPanelHeaderFormSection
       title={parallelGateway["@_name"] || "Parallel gateway"}
-      icon={<GatewayIcon variant={parallelGateway.__$$element} />}
+      icon={<GatewayIcon variant={parallelGateway.__$$element} isIcon={true} />}
     >
       <NameDocumentationAndId element={parallelGateway} />
     </PropertiesPanelHeaderFormSection>
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ScriptTaskProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ScriptTaskProperties.tsx
index f5f3b7f44e7..0ed700639e4 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ScriptTaskProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ScriptTaskProperties.tsx
@@ -39,7 +39,7 @@ export function ScriptTaskProperties({
     <>
       <PropertiesPanelHeaderFormSection
         title={scriptTask["@_name"] || "Script task"}
-        icon={<TaskIcon variant={scriptTask.__$$element} />}
+        icon={<TaskIcon variant={scriptTask.__$$element} isIcon={true} />}
       >
         <NameDocumentationAndId element={scriptTask} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ServiceTaskProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ServiceTaskProperties.tsx
index 87fd3e198c0..d9c355d1bcc 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ServiceTaskProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/ServiceTaskProperties.tsx
@@ -54,7 +54,7 @@ export function ServiceTaskProperties({
     <>
       <PropertiesPanelHeaderFormSection
         title={serviceTask["@_name"] || "Service task"}
-        icon={<TaskIcon variant={serviceTask.__$$element} />}
+        icon={<TaskIcon variant={serviceTask.__$$element} isIcon={true} />}
       >
         <NameDocumentationAndId element={serviceTask} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/StartEventProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/StartEventProperties.tsx
index 1f857cb141a..96669a04b0f 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/StartEventProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/StartEventProperties.tsx
@@ -23,20 +23,28 @@ import { Normalized } from "../../normalization/normalize";
 import { NameDocumentationAndId } from "../nameDocumentationAndId/NameDocumentationAndId";
 import { OutputOnlyAssociationFormSection } from "../assignments/AssignmentsFormSection";
 import { EventDefinitionProperties } from "../eventDefinition/EventDefinitionProperties";
-import { StartEventIcon } from "../../diagram/nodes/NodeIcons";
+import { EventDefinitionIcon, StartEventIcon } from "../../diagram/nodes/NodeIcons";
 import { PropertiesPanelHeaderFormSection } from "./_PropertiesPanelHeaderFormSection";
 import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
+import { NODE_COLORS } from "../../diagram/nodes/NodeSvgs";
 
 export function StartEventProperties({
   startEvent,
 }: {
   startEvent: Normalized<BPMN20__tStartEvent> & { __$$element: "startEvent" };
 }) {
+  const foregroundColor = NODE_COLORS.startEvent.foreground;
   return (
     <>
       <PropertiesPanelHeaderFormSection
         title={startEvent["@_name"] || "Start event"}
-        icon={<StartEventIcon variant={startEvent.eventDefinition?.[0]?.__$$element} />}
+        icon={
+          <EventDefinitionIcon
+            variant={startEvent.eventDefinition?.[0]?.__$$element}
+            filled={false}
+            stroke={foregroundColor}
+          />
+        }
       >
         <NameDocumentationAndId element={startEvent} />
 
diff --git a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/UserTaskProperties.tsx b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/UserTaskProperties.tsx
index 8413765f57a..1ee7d223e16 100644
--- a/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/UserTaskProperties.tsx
+++ b/packages/bpmn-editor/src/propertiesPanel/singleNodeProperties/UserTaskProperties.tsx
@@ -42,7 +42,7 @@ export function UserTaskProperties({
     <>
       <PropertiesPanelHeaderFormSection
         title={userTask["@_name"] || "User task"}
-        icon={<TaskIcon variant={userTask.__$$element} />}
+        icon={<TaskIcon variant={userTask.__$$element} isIcon={true} />}
       >
         <NameDocumentationAndId element={userTask} />
 

From 33be2b489d39bef346e5295368cc238eaf642864 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 7 Nov 2024 12:05:20 +0100
Subject: [PATCH 10/12] removing unneeded changes

---
 packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index d1672acb015..4002d948a2c 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -84,7 +84,7 @@ export function EventDefinitionIcon({
   );
 }
 
-export function StartEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
+export function StartEventIcon({ variant }: { variant?: EventVariant }) {
   return (
     <RoundSvg>
       <StartEventNodeSvg {...nodeSvgProps} variant={variant ?? "none"} />
@@ -92,7 +92,7 @@ export function StartEventIcon({ variant, isIcon }: { variant?: EventVariant; is
   );
 }
 
-export function IntermediateCatchEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
+export function IntermediateCatchEventIcon({ variant }: { variant?: EventVariant }) {
   return (
     <RoundSvg>
       <IntermediateCatchEventNodeSvg {...nodeSvgProps} rimWidth={40} variant={variant ?? "none"} />
@@ -100,7 +100,7 @@ export function IntermediateCatchEventIcon({ variant, isIcon }: { variant?: Even
   );
 }
 
-export function IntermediateThrowEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
+export function IntermediateThrowEventIcon({ variant }: { variant?: EventVariant }) {
   return (
     <RoundSvg>
       <IntermediateThrowEventNodeSvg {...nodeSvgProps} rimWidth={40} variant={variant ?? "none"} />
@@ -108,7 +108,7 @@ export function IntermediateThrowEventIcon({ variant, isIcon }: { variant?: Even
   );
 }
 
-export function EndEventIcon({ variant, isIcon }: { variant?: EventVariant; isIcon?: boolean }) {
+export function EndEventIcon({ variant }: { variant?: EventVariant }) {
   return (
     <RoundSvg>
       <EndEventNodeSvg {...nodeSvgProps} variant={variant ?? "none"} />

From dfecbe27fa864082b42ec3f20195342cec2109f6 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Thu, 7 Nov 2024 12:49:26 +0100
Subject: [PATCH 11/12] minor refactoring

---
 .../src/diagram/nodes/NodeSvgs.tsx            | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
index ba9c800e748..fd09c0a30ff 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeSvgs.tsx
@@ -22,7 +22,6 @@ import { DEFAULT_INTRACTION_WIDTH } from "@kie-tools/xyflow-react-kie-diagram/di
 import { DEFAULT_NODE_FILL, DEFAULT_NODE_STROKE_COLOR } from "./NodeStyle";
 import {
   containerNodeInteractionRectCssClassName,
-  DEFAULT_NODE_STROKE_WIDTH,
   NodeSvgProps,
   normalize,
 } from "@kie-tools/xyflow-react-kie-diagram/dist/nodes/NodeSvgs";
@@ -360,7 +359,8 @@ export function TaskNodeSvg(
   const { markers: _markers, variant: _variant, ...props } = { ..._props };
 
   const markers = useMemo(() => new Set(_markers), [_markers]);
-
+  const iconSize = 200;
+  const defaultSize = 25;
   const defaultOffset = { cx: x + 3, cy: y + 3 };
   const iconOffsets = {
     scriptTask: isIcon ? { cx: x - 2, cy: y - 25 } : defaultOffset,
@@ -389,7 +389,7 @@ export function TaskNodeSvg(
 
       {variant === "scriptTask" && (
         <g transform={`translate(${iconOffsets.scriptTask.cx}, ${iconOffsets.scriptTask.cy})`}>
-          <ScriptTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? 200 : 25} />
+          <ScriptTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? iconSize : defaultSize} />
         </g>
       )}
 
@@ -397,7 +397,7 @@ export function TaskNodeSvg(
         <g transform={`translate(${iconOffsets.businessRuleTask.cx}, ${iconOffsets.businessRuleTask.cy})`}>
           <BusinessRuleTaskSvg
             stroke={NODE_COLORS.task.foreground}
-            size={isIcon ? 200 : 25}
+            size={isIcon ? iconSize : defaultSize}
             strokeWidth={isIcon ? 10 : 1}
           />
         </g>
@@ -405,13 +405,13 @@ export function TaskNodeSvg(
 
       {variant === "serviceTask" && (
         <g transform={`translate(${iconOffsets.serviceTask.cx}, ${iconOffsets.serviceTask.cy})`}>
-          <ServiceTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? 200 : 30} />
+          <ServiceTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? iconSize : defaultSize * 1.2} />
         </g>
       )}
 
       {variant === "userTask" && (
         <g transform={`translate(${iconOffsets.userTask.cx}, ${iconOffsets.userTask.cy})`}>
-          <UserTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? 200 : 25} />
+          <UserTaskSvg stroke={NODE_COLORS.task.foreground} size={isIcon ? iconSize : defaultSize} />
         </g>
       )}
 
@@ -701,7 +701,7 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
   } = normalize(__props);
 
   const { variant, isIcon, ...props } = { ..._props };
-  const morphingPanelOffset = isIcon ? 25 : 0;
+  const iconOffset = isIcon ? 25 : 0;
 
   return (
     <>
@@ -726,7 +726,7 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
           stroke={NODE_COLORS.gateway.foreground}
           strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
-          cy={y + height / 2 - morphingPanelOffset}
+          cy={y + height / 2 - iconOffset}
           size={isIcon ? 210 : 30}
         />
       )}
@@ -735,7 +735,7 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
           stroke={NODE_COLORS.gateway.foreground}
           strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
-          cy={y + height / 2 - morphingPanelOffset}
+          cy={y + height / 2 - iconOffset}
           size={isIcon ? 210 : 30}
         />
       )}
@@ -744,7 +744,7 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
           stroke={NODE_COLORS.gateway.foreground}
           strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
-          cy={y + height / 2 - morphingPanelOffset}
+          cy={y + height / 2 - iconOffset}
           size={isIcon ? 275 : 40}
         />
       )}
@@ -754,7 +754,7 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
           circleStrokeWidth={isIcon ? 10 : 1.5}
           strokeWidth={isIcon ? 30 : 2}
           cx={x + width / 2}
-          cy={y + height / 2 - morphingPanelOffset}
+          cy={y + height / 2 - iconOffset}
           size={isIcon ? 275 : 40}
         />
       )}
@@ -763,7 +763,7 @@ export function GatewayNodeSvg(__props: NodeSvgProps & { variant: GatewayVariant
           stroke={NODE_COLORS.gateway.foreground}
           strokeWidth={isIcon ? 30 : 4.5}
           cx={x + width / 2}
-          cy={y + height / 2 - morphingPanelOffset}
+          cy={y + height / 2 - iconOffset}
           size={isIcon ? 300 : 50}
         />
       )}

From befaed19e119785718097fbf0c8ffc55863bb845 Mon Sep 17 00:00:00 2001
From: Kennedy <kennedy.bowers@ibm.com>
Date: Wed, 27 Nov 2024 13:57:21 +0100
Subject: [PATCH 12/12] oops

---
 packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
index 4002d948a2c..5346e2b872a 100644
--- a/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
+++ b/packages/bpmn-editor/src/diagram/nodes/NodeIcons.tsx
@@ -53,10 +53,12 @@ export function NodeIcon({ nodeType }: { nodeType: BpmnNodeType }) {
 export function EventDefinitionIcon({
   variant,
   filled,
+  fill,
   stroke,
 }: {
   variant?: EventVariant;
   filled: boolean;
+  fill?: string;
   stroke: string;
 }) {
   const cx = nodeSvgProps.x + nodeSvgProps.width / 2;