@eclipse-papyrus/papyrus-web-parent 2026.2.0

package/papyrus-web-components/src/nodes/package/PackageNodeListConverter.ts

@@ -0,0 +1,254 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2026 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ *****************************************************************************/
+import {
+  BorderNodePosition,
+  ConnectionHandle,
+  convertHandles,
+  convertInsideLabel,
+  convertLineStyle,
+  convertOutsideLabels,
+  GQLDiagram,
+  GQLDiagramDescription,
+  GQLEdge,
+  GQLHandleLayoutData,
+  GQLNode,
+  GQLNodeDescription,
+  GQLNodeLayoutData,
+  GQLNodeStyle,
+  GQLViewModifier,
+  IConvertEngine,
+  INodeConverter,
+  isListLayoutStrategy,
+  NodeData,
+  defaultHeight,
+  defaultWidth,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Node, XYPosition } from '@xyflow/react';
+import { GQLPackageNodeStyle, PackageNodeListData } from './PackageNode.types';
+
+const defaultPosition: XYPosition = { x: 0, y: 0 };
+
+const toListNode = (
+  gqlDiagram: GQLDiagram,
+  gqlNode: GQLNode<GQLPackageNodeStyle>,
+  gqlParentNode: GQLNode<GQLNodeStyle> | null,
+  nodeDescription: GQLNodeDescription,
+  isBorderNode: boolean,
+  gqlEdges: GQLEdge[]
+): Node<PackageNodeListData> => {
+  const {
+    targetObjectId,
+    targetObjectLabel,
+    targetObjectKind,
+    descriptionId,
+    insideLabel,
+    outsideLabels,
+    id,
+    state,
+    pinned,
+    style,
+    labelEditable,
+    deletable,
+  } = gqlNode;
+
+  const handleLayoutData: GQLHandleLayoutData[] = gqlDiagram.layoutData.nodeLayoutData
+    .filter((nodeLayoutData) => nodeLayoutData.id === id)
+    .flatMap((nodeLayoutData) => nodeLayoutData.handleLayoutData);
+
+  const connectionHandles: ConnectionHandle[] = convertHandles(gqlNode.id, gqlEdges, handleLayoutData);
+  const gqlNodeLayoutData: GQLNodeLayoutData | undefined = gqlDiagram.layoutData.nodeLayoutData.find(
+    (nodeLayoutData) => nodeLayoutData.id === id
+  );
+  const isNew = gqlNodeLayoutData === undefined;
+  const resizedByUser = gqlNodeLayoutData?.resizedByUser ?? false;
+  const movedByUser = gqlNodeLayoutData?.movedByUser ?? false;
+
+  const data: PackageNodeListData = {
+    targetObjectId,
+    targetObjectLabel,
+    targetObjectKind,
+    descriptionId,
+    style: {
+      background: style.background,
+      borderTopColor: style.borderColor,
+      borderBottomColor: style.borderColor,
+      borderLeftColor: style.borderColor,
+      borderRightColor: style.borderColor,
+      borderTopWidth: style.borderSize,
+      borderBottomWidth: style.borderSize,
+      borderLeftWidth: style.borderSize,
+      borderRightWidth: style.borderSize,
+      borderStyle: convertLineStyle(style.borderStyle),
+    },
+    insideLabel: null,
+    outsideLabels: convertOutsideLabels(outsideLabels, gqlDiagram.layoutData.labelLayoutData),
+    isBorderNode: isBorderNode,
+    borderNodePosition: isBorderNode ? BorderNodePosition.WEST : null,
+    faded: state === GQLViewModifier.Faded,
+    pinned,
+    labelEditable,
+    nodeDescription,
+    connectionHandles,
+    defaultWidth: gqlNode.defaultWidth,
+    defaultHeight: gqlNode.defaultHeight,
+    isNew,
+    areChildNodesDraggable: isListLayoutStrategy(gqlNode.style.childrenLayoutStrategy)
+      ? gqlNode.style.childrenLayoutStrategy.areChildNodesDraggable
+      : true,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 10,
+    topGap: isListLayoutStrategy(gqlNode.style.childrenLayoutStrategy)
+      ? gqlNode.style.childrenLayoutStrategy.topGap
+      : 1,
+    bottomGap: isListLayoutStrategy(gqlNode.style.childrenLayoutStrategy)
+      ? gqlNode.style.childrenLayoutStrategy.bottomGap
+      : 1,
+    isListChild: isListLayoutStrategy(gqlParentNode?.style.childrenLayoutStrategy),
+    isDraggedNode: false,
+    resizedByUser,
+    movedByUser,
+    growableNodeIds: isListLayoutStrategy(gqlNode.style.childrenLayoutStrategy)
+      ? gqlNode.style.childrenLayoutStrategy.growableNodeIds
+      : [],
+    isDropNodeTarget: false,
+    isDropNodeCandidate: false,
+    isHovered: false,
+    connectionLinePositionOnNode: 'none',
+    nodeAppearanceData: {
+      gqlStyle: style,
+      customizedStyleProperties: [],
+    },
+    minComputedWidth: gqlNodeLayoutData?.minComputedSize.width ?? null,
+    minComputedHeight: gqlNodeLayoutData?.minComputedSize.height ?? null,
+    deletable,
+    isLastNodeSelected: false,
+  };
+
+  data.insideLabel = convertInsideLabel(
+    insideLabel,
+    data,
+    `${style.borderSize}px ${style.borderStyle} ${style.borderColor}`,
+    gqlNode.childNodes?.some((child) => child.state !== GQLViewModifier.Hidden)
+  );
+
+  const node: Node<PackageNodeListData> = {
+    id,
+    type: 'packageNodeList',
+    data,
+    position: defaultPosition,
+    hidden: state === GQLViewModifier.Hidden,
+  };
+
+  if (gqlParentNode) {
+    node.parentId = gqlParentNode.id;
+  }
+
+  const nodeLayoutData = gqlDiagram.layoutData.nodeLayoutData.filter((data) => data.id === id)[0];
+  if (nodeLayoutData) {
+    const {
+      position,
+      size: { height, width },
+    } = nodeLayoutData;
+    node.position = position;
+    node.height = height;
+    node.width = width;
+    node.style = {
+      ...node.style,
+      width: `${node.width}px`,
+      height: `${node.height}px`,
+    };
+  } else {
+    node.height = data.defaultHeight ?? defaultHeight;
+    node.width = data.defaultWidth ?? defaultWidth;
+  }
+
+  return node;
+};
+
+const adaptChildrenBorderNodes = (nodes: Node<NodeData>[], gqlChildrenNodes: GQLNode<GQLNodeStyle>[]): void => {
+  const visibleChildrenNodes = nodes
+    .filter(
+      (child) =>
+        gqlChildrenNodes.map((gqlChild) => gqlChild.id).find((gqlChildId) => gqlChildId === child.id) !== undefined
+    )
+    .filter((child) => !child.hidden);
+  visibleChildrenNodes.forEach((child, index) => {
+    let childData = child.data as NodeData;
+    child.data.style = {
+      ...childData.style,
+      borderTopWidth: childData.style.borderWidth,
+      borderLeftWidth: childData.style.borderWidth,
+      borderRightWidth: childData.style.borderWidth,
+      borderBottomWidth: childData.style.borderWidth,
+    };
+
+    if (index === visibleChildrenNodes.length - 1) {
+      child.style = {
+        ...child.style,
+        borderBottomWidth: '10',
+      };
+    }
+  });
+};
+
+export class PackageNodeListConverter implements INodeConverter {
+  canHandle(gqlNode: GQLNode<GQLNodeStyle>) {
+    return gqlNode.style.__typename === 'PackageNodeStyle' && gqlNode.style.childrenLayoutStrategy?.kind === 'List';
+  }
+
+  handle(
+    convertEngine: IConvertEngine,
+    gqlDiagram: GQLDiagram,
+    gqlNode: GQLNode<GQLPackageNodeStyle>,
+    gqlEdges: GQLEdge[],
+    parentNode: GQLNode<GQLNodeStyle> | null,
+    isBorderNode: boolean,
+    nodes: Node<NodeData>[],
+    diagramDescription: GQLDiagramDescription,
+    nodeDescriptions: GQLNodeDescription[]
+  ) {
+    const nodeDescription = nodeDescriptions.find((description) => description.id === gqlNode.descriptionId);
+    if (nodeDescription) {
+      nodes.push(toListNode(gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges));
+    }
+
+    const borderNodeDescriptions: GQLNodeDescription[] = (nodeDescription?.borderNodeDescriptionIds ?? []).flatMap(
+      (nodeDescriptionId) =>
+        diagramDescription.nodeDescriptions.filter((nodeDescription) => nodeDescription.id === nodeDescriptionId)
+    );
+    const childNodeDescriptions: GQLNodeDescription[] = (nodeDescription?.childNodeDescriptionIds ?? []).flatMap(
+      (nodeDescriptionId) =>
+        diagramDescription.nodeDescriptions.filter((nodeDescription) => nodeDescription.id === nodeDescriptionId)
+    );
+
+    convertEngine.convertNodes(
+      gqlDiagram,
+      gqlNode.borderNodes ?? [],
+      gqlNode,
+      nodes,
+      diagramDescription,
+      borderNodeDescriptions
+    );
+    convertEngine.convertNodes(
+      gqlDiagram,
+      gqlNode.childNodes ?? [],
+      gqlNode,
+      nodes,
+      diagramDescription,
+      childNodeDescriptions
+    );
+    adaptChildrenBorderNodes(nodes, gqlNode.childNodes ?? []);
+  }
+}

package/papyrus-web-components/src/nodes/package/PackageNodeListLayoutHandler.ts

@@ -0,0 +1,253 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ *  Aurelien DIDIER (Artal Technologies) - Issue 229
+ *****************************************************************************/
+
+//inspired by: packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/ListNodeLayoutHandler.ts
+import {
+  applyRatioOnNewNodeSizeValue,
+  computeNodesBox,
+  computePreviousSize,
+  Diagram,
+  DiagramNodeType,
+  findNodeIndex,
+  ForcedDimensions,
+  getBorderNodeExtent,
+  getDefaultOrMinHeight,
+  getDefaultOrMinWidth,
+  getEastBorderNodeFootprintHeight,
+  getNorthBorderNodeFootprintWidth,
+  getSouthBorderNodeFootprintWidth,
+  getWestBorderNodeFootprintHeight,
+  ILayoutEngine,
+  INodeLayoutHandler,
+  NodeData,
+  setBorderNodesPosition,
+  getInsideLabelWidthConstraint,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Node } from '@xyflow/react';
+import { PackageNodeListData } from './PackageNode.types';
+
+export class PackageNodeListLayoutHandler implements INodeLayoutHandler<PackageNodeListData> {
+  public canHandle(node: Node<NodeData, DiagramNodeType>) {
+    return node.type === 'packageNodeList';
+  }
+
+  public handle(
+    layoutEngine: ILayoutEngine,
+    previousDiagram: Diagram | null,
+    node: Node<PackageNodeListData, 'packageNodeList'>,
+    visibleNodes: Node<NodeData, DiagramNodeType>[],
+    directChildren: Node<NodeData, DiagramNodeType>[],
+    newlyAddedNodes: Node<NodeData, DiagramNodeType>[],
+    forceDimensions?: ForcedDimensions
+  ) {
+    const nodeIndex = findNodeIndex(visibleNodes, node.id);
+    const nodeElement = document.getElementById(`${node.id}-packageNodeList-${nodeIndex}`);
+    const nodeElementChild =
+      nodeElement?.children &&
+      Array.from(nodeElement.children).filter((child) => !child.classList.contains('react-flow__resize-control'))[0];
+    const borderWidth = nodeElementChild ? parseFloat(window.getComputedStyle(nodeElementChild).borderLeftWidth) : 0;
+
+    if (directChildren.length > 0) {
+      this.handleParentNode(
+        layoutEngine,
+        previousDiagram,
+        node,
+        visibleNodes,
+        directChildren,
+        newlyAddedNodes,
+        borderWidth,
+        forceDimensions
+      );
+    } else {
+      this.handleLeafNode(previousDiagram, node, visibleNodes, borderWidth, forceDimensions);
+    }
+  }
+
+  handleLeafNode(
+    previousDiagram: Diagram | null,
+    node: Node<PackageNodeListData, 'packageNodeList'>,
+    visibleNodes: Node<NodeData, DiagramNodeType>[],
+    borderWidth: number,
+    forceDimensions?: ForcedDimensions
+  ) {
+    const labelElement = document.getElementById(`${node.id}-label-${findNodeIndex(visibleNodes, node.id)}`);
+
+    const nodeMinComputeWidth = getInsideLabelWidthConstraint(node.data.insideLabel, labelElement) + borderWidth * 2;
+    const nodeMinComputeHeight = (labelElement?.getBoundingClientRect().height ?? 0) + borderWidth * 2;
+    const nodeWith = forceDimensions?.width ?? getDefaultOrMinWidth(nodeMinComputeWidth, node);
+    const nodeHeight = forceDimensions?.height ?? getDefaultOrMinHeight(nodeMinComputeHeight, node);
+
+    const previousNode = (previousDiagram?.nodes ?? []).find((previouseNode) => previouseNode.id === node.id);
+    const previousDimensions = computePreviousSize(previousNode, node);
+
+    const heightLostSincePrevDiagram: number =
+      previousDiagram?.nodes
+        .filter((prevNode) => prevNode.parentId === node.id && !prevNode.hidden)
+        .reduce<number>((height, node) => height + (node.height ?? 0), 0) ?? 0;
+
+    if (node.data.resizedByUser) {
+      if (nodeMinComputeWidth > previousDimensions.width) {
+        node.width = nodeMinComputeWidth;
+      } else {
+        node.width = previousDimensions.width;
+      }
+      if (nodeMinComputeHeight > previousDimensions.height) {
+        node.height = nodeMinComputeHeight;
+      } else {
+        node.height = getDefaultOrMinHeight(previousDimensions.height - heightLostSincePrevDiagram, node);
+      }
+    } else {
+      node.width = nodeWith;
+      node.height = nodeHeight;
+    }
+  }
+
+  private handleParentNode(
+    layoutEngine: ILayoutEngine,
+    previousDiagram: Diagram | null,
+    node: Node<PackageNodeListData, 'packageNodeList'>,
+    visibleNodes: Node<NodeData, DiagramNodeType>[],
+    directChildren: Node<NodeData, DiagramNodeType>[],
+    newlyAddedNodes: Node<NodeData, DiagramNodeType>[],
+    borderWidth: number,
+    forceDimensions?: ForcedDimensions
+  ) {
+    layoutEngine.layoutNodes(previousDiagram, visibleNodes, directChildren, newlyAddedNodes, forceDimensions);
+
+    const nodeIndex = findNodeIndex(visibleNodes, node.id);
+    const labelElement = document.getElementById(`${node.id}-label-${nodeIndex}`);
+    const withHeader: boolean = node.data.insideLabel?.isHeader ?? false;
+
+    const borderNodes = directChildren.filter((node) => node.data.isBorderNode);
+    const directNodesChildren = directChildren.filter((child) => !child.data.isBorderNode);
+    const northBorderNodeFootprintWidth = getNorthBorderNodeFootprintWidth(visibleNodes, borderNodes, previousDiagram);
+    const southBorderNodeFootprintWidth = getSouthBorderNodeFootprintWidth(visibleNodes, borderNodes, previousDiagram);
+
+    const previousNode: Node<NodeData, string> | undefined = (previousDiagram?.nodes ?? []).find(
+      (previouseNode) => previouseNode.id === node.id
+    );
+
+    const heightLostSincePrevDiagram: number =
+      previousDiagram?.nodes
+        .filter((prevNode) => prevNode.parentId === node.id && !prevNode.hidden)
+        .filter((prevNode) => !directChildren.map((child) => child.id).includes(prevNode.id))
+        .reduce<number>((height, node) => height + (node.height ?? 0), 0) ?? 0;
+
+    if (!forceDimensions) {
+      let previousChildrenContentBoxWidthToConsider: number = getDefaultOrMinWidth(0, node) - borderWidth * 2;
+      let previousChildrenContentBoxHeightToConsider: number = 0;
+      if (node.data.resizedByUser) {
+        previousChildrenContentBoxWidthToConsider = (previousNode?.width ?? node.width ?? 0) - borderWidth * 2;
+        previousChildrenContentBoxHeightToConsider =
+          (previousNode?.height ?? node.height ?? 0) -
+          borderWidth * 2 -
+          (withHeader ? labelElement?.getBoundingClientRect().height ?? 0 : 0);
+      }
+      const fixedWidth: number = Math.max(
+        directNodesChildren
+          .filter((child) => child.type !== 'customImageNode')
+          .reduce<number>(
+            (widerWidth, child) => Math.max(child.width ?? 0, widerWidth),
+            getInsideLabelWidthConstraint(node.data.insideLabel, labelElement)
+          ),
+        northBorderNodeFootprintWidth,
+        southBorderNodeFootprintWidth,
+        previousChildrenContentBoxWidthToConsider
+      );
+      const nonGrowableChilds = directNodesChildren.filter(
+        (child) => !node.data.growableNodeIds.includes(child.data.descriptionId) || child.data.resizedByUser
+      );
+      nonGrowableChilds.forEach((nonGrowableChild) => {
+        layoutEngine.layoutNodes(previousDiagram, visibleNodes, [nonGrowableChild], newlyAddedNodes, {
+          width: fixedWidth,
+          height: null,
+        });
+      });
+      previousChildrenContentBoxHeightToConsider -= nonGrowableChilds.reduce<number>(
+        (height, node) => height + (node.height ?? 0),
+        0
+      );
+      previousChildrenContentBoxHeightToConsider -= node.data.topGap + node.data.bottomGap;
+
+      const growableChilds = directNodesChildren.filter(
+        (child) => node.data.growableNodeIds.includes(child.data.descriptionId) && !child.data.resizedByUser
+      );
+      const childHeight: number = previousChildrenContentBoxHeightToConsider / growableChilds.length;
+      growableChilds.forEach((growableChild) => {
+        layoutEngine.layoutNodes(previousDiagram, visibleNodes, [growableChild], newlyAddedNodes, {
+          width: fixedWidth,
+          height: Math.max(growableChild.height ?? 0, childHeight),
+        });
+      });
+    }
+
+    directNodesChildren.forEach((child, index) => {
+      child.position = {
+        x: borderWidth,
+        y: borderWidth + (withHeader ? labelElement?.getBoundingClientRect().height ?? 0 : 0) + node.data.topGap,
+      };
+      const previousSibling = directNodesChildren[index - 1];
+      if (previousSibling) {
+        child.position = { ...child.position, y: previousSibling.position.y + (previousSibling.height ?? 0) };
+      }
+    });
+
+    const childrenContentBox = computeNodesBox(visibleNodes, directNodesChildren);
+
+    const labelOnlyWidth = getInsideLabelWidthConstraint(node.data.insideLabel, labelElement);
+    const nodeMinComputeWidth = Math.max(childrenContentBox.width, labelOnlyWidth) + borderWidth * 2;
+
+    const directChildrenAwareNodeHeight =
+      childrenContentBox.y + childrenContentBox.height + borderWidth + node.data.bottomGap;
+
+    const eastBorderNodeFootprintHeight = getEastBorderNodeFootprintHeight(visibleNodes, borderNodes, previousDiagram);
+    const westBorderNodeFootprintHeight = getWestBorderNodeFootprintHeight(visibleNodes, borderNodes, previousDiagram);
+
+    const nodeMinComputeHeight = Math.max(
+      directChildrenAwareNodeHeight,
+      eastBorderNodeFootprintHeight,
+      westBorderNodeFootprintHeight
+    );
+
+    const nodeWidth = forceDimensions?.width ?? getDefaultOrMinWidth(nodeMinComputeWidth, node);
+    const nodeHeight = forceDimensions?.height ?? getDefaultOrMinHeight(nodeMinComputeHeight, node);
+
+    const previousDimensions = computePreviousSize(previousNode, node);
+    if (node.data.resizedByUser) {
+      if (nodeMinComputeWidth > previousDimensions.width) {
+        node.width = nodeMinComputeWidth;
+      } else {
+        node.width = previousDimensions.width;
+      }
+      if (nodeMinComputeHeight > previousDimensions.height) {
+        node.height = nodeMinComputeHeight;
+      } else {
+        node.height = getDefaultOrMinHeight(previousDimensions.height - heightLostSincePrevDiagram, node);
+      }
+    } else {
+      node.width = nodeWidth;
+      node.height = nodeHeight;
+    }
+
+    if (node.data.nodeDescription?.keepAspectRatio) {
+      applyRatioOnNewNodeSizeValue(node);
+    }
+    // Update border nodes positions
+    borderNodes.forEach((borderNode) => {
+      borderNode.extent = getBorderNodeExtent(node, borderNode);
+    });
+    setBorderNodesPosition(borderNodes, node, previousDiagram);
+  }
+}

package/papyrus-web-components/src/nodes/rectangleWithExternalLabel/RectangleWithExternalLabelNode.tsx

@@ -0,0 +1,155 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ *****************************************************************************/
+
+import { getCSSColor } from '@eclipse-sirius/sirius-components-core';
+import {
+  ConnectionCreationHandles,
+  ConnectionHandles,
+  ConnectionTargetHandle,
+  DiagramContext,
+  DiagramContextValue,
+  Label,
+  useDrop,
+  useDropNodeStyle,
+  useRefreshConnectionHandles,
+  useConnectorNodeStyle,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Theme, useTheme } from '@mui/material/styles';
+import React, { memo, useContext } from 'react';
+import { Node, NodeProps, NodeResizer } from '@xyflow/react';
+import { RectangleWithExternalLabelNodeData } from './RectangleWithExternalLabelNode.types';
+
+const rectangleWithExternalLabelInnerRectangleStyle = (
+  theme: Theme,
+  style: React.CSSProperties,
+  selected: boolean,
+  hovered: boolean,
+  faded: boolean
+): React.CSSProperties => {
+  const rectangleWithExternalLabelNodeStyle: React.CSSProperties = {
+    display: 'flex',
+    padding: '8px',
+    width: '100%',
+    height: '100%',
+    opacity: faded ? '0.4' : '',
+    ...style,
+    borderColor: getCSSColor(String(style.borderColor), theme),
+    background: getCSSColor(String(style.background), theme),
+  };
+
+  if (selected || hovered) {
+    rectangleWithExternalLabelNodeStyle.outline = `${theme.palette.selected} solid 1px`;
+  }
+
+  return rectangleWithExternalLabelNodeStyle;
+};
+
+const rectangleWithExternalLabelNodeStyle = (
+  theme: Theme,
+  style: React.CSSProperties,
+  selected: boolean,
+  hovered: boolean,
+  faded: boolean
+): React.CSSProperties => {
+  const rectangleWithExternalLabelNodeStyle: React.CSSProperties = {
+    display: 'flex',
+    padding: '0px',
+    width: '100%',
+    height: '100%',
+    opacity: faded ? '0.4' : '',
+    ...style,
+    border: 'none',
+    backgroundColor: 'transparent',
+  };
+
+  if (selected || hovered) {
+    rectangleWithExternalLabelNodeStyle.outline = `${theme.palette.selected} solid 1px`;
+  }
+
+  return rectangleWithExternalLabelNodeStyle;
+};
+
+const resizeLineStyle = (theme: Theme): React.CSSProperties => {
+  return { borderWidth: theme.spacing(0.15) };
+};
+
+const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    width: theme.spacing(1),
+    height: theme.spacing(1),
+    borderRadius: '100%',
+  };
+};
+
+export const RectangleWithExternalLabelNode = memo(
+  ({ data, id, selected, dragging }: NodeProps<Node<RectangleWithExternalLabelNodeData>>) => {
+    const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
+    const theme = useTheme();
+    const { onDrop, onDragOver } = useDrop();
+    const { style: connectionFeedbackStyle } = useConnectorNodeStyle(id, data.nodeDescription.id);
+    const { style: dropFeedbackStyle } = useDropNodeStyle(data.isDropNodeTarget, data.isDropNodeCandidate, dragging);
+
+    const handleOnDrop = (event: React.DragEvent) => {
+      onDrop(event, id);
+    };
+
+    useRefreshConnectionHandles(id, data.connectionHandles);
+
+    return (
+      <>
+        {data.nodeDescription?.userResizable !== 'NONE' && !readOnly ? (
+          <NodeResizer
+            handleStyle={{ ...resizeHandleStyle(theme) }}
+            lineStyle={{ ...resizeLineStyle(theme) }}
+            color={theme.palette.selected}
+            isVisible={!!selected}
+            // Force false here to handle mutualized NodeDescriptions for SMD PseudoStates.
+            // The other nodes need to have the aspect ratio, but RectanguleWithExternalLabelNodes
+            // should not have it.
+            keepAspectRatio={false}
+          />
+        ) : null}
+        <div
+          style={{
+            ...rectangleWithExternalLabelNodeStyle(theme, data.style, !!selected, data.isHovered, data.faded),
+            ...connectionFeedbackStyle,
+            ...dropFeedbackStyle,
+          }}
+          onDragOver={onDragOver}
+          onDrop={handleOnDrop}
+          data-testid={`RectangleWithExternalLabel - ${data?.insideLabel?.text}`}>
+          {data.insideLabel ? <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} /> : null}
+          {!!selected ? <ConnectionCreationHandles nodeId={id} /> : null}
+          <ConnectionTargetHandle nodeId={id} nodeDescription={data.nodeDescription} isHovered={data.isHovered} />
+          <ConnectionHandles connectionHandles={data.connectionHandles} />
+          <div
+            style={{
+              ...rectangleWithExternalLabelInnerRectangleStyle(
+                theme,
+                data.style,
+                !!selected,
+                data.isHovered,
+                data.faded
+              ),
+              ...connectionFeedbackStyle,
+              ...dropFeedbackStyle,
+            }}
+            onDragOver={onDragOver}
+            onDrop={handleOnDrop}
+            data-testid={`RectangleWithExternalLabel - ${data?.insideLabel?.text}`}></div>
+        </div>
+      </>
+    );
+  }
+);

package/papyrus-web-components/src/nodes/rectangleWithExternalLabel/RectangleWithExternalLabelNode.types.ts

@@ -0,0 +1,23 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ *****************************************************************************/
+import { GQLNodeStyle, NodeData } from '@eclipse-sirius/sirius-components-diagrams';
+
+export interface RectangleWithExternalLabelNodeData extends NodeData {}
+
+export interface GQLRectangleWithExternalLabelNodeStyle extends GQLNodeStyle {
+  background: string;
+  borderColor: string;
+  borderStyle: string;
+  borderSize: number;
+}