@eclipse-papyrus/papyrus-web-parent 2026.2.0

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

@@ -0,0 +1,242 @@
+/*******************************************************************************
+ * Copyright (c) 2024, 2025 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.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 { DocumentTransform } from '@apollo/client';
+import { DocumentNode, FieldNode, InlineFragmentNode, Kind, SelectionNode, visit } from 'graphql';
+
+const shouldTransform = (document: DocumentNode) => {
+  return (
+    document.definitions[0] &&
+    document.definitions[0].kind === Kind.OPERATION_DEFINITION &&
+    document.definitions[0].name?.value === 'diagramEvent'
+  );
+};
+
+const isNodeStyleFragment = (field: FieldNode) => {
+  if (field.name.value === 'style') {
+    const fieldSelectionSet = field.selectionSet;
+    if (fieldSelectionSet) {
+      const inLinesFragment = field.selectionSet.selections
+        .filter((selection): selection is InlineFragmentNode => selection.kind === Kind.INLINE_FRAGMENT)
+        .map((inlineFragment: InlineFragmentNode) => inlineFragment.typeCondition?.name.value);
+      if (inLinesFragment.includes('RectangularNodeStyle') && inLinesFragment.includes('ImageNodeStyle')) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+const borderColorField: SelectionNode = {
+  kind: Kind.FIELD,
+  name: {
+    kind: Kind.NAME,
+    value: 'borderColor',
+  },
+};
+
+const borderSizeField: SelectionNode = {
+  kind: Kind.FIELD,
+  name: {
+    kind: Kind.NAME,
+    value: 'borderSize',
+  },
+};
+
+const borderStyleField: SelectionNode = {
+  kind: Kind.FIELD,
+  name: {
+    kind: Kind.NAME,
+    value: 'borderStyle',
+  },
+};
+
+const backgroundField: SelectionNode = {
+  kind: Kind.FIELD,
+  name: {
+    kind: Kind.NAME,
+    value: 'background',
+  },
+};
+
+const shapeField: SelectionNode = {
+  kind: Kind.FIELD,
+  name: {
+    kind: Kind.NAME,
+    value: 'shape',
+  },
+};
+
+const childrenLayoutStrategyFragment: SelectionNode = {
+  kind: Kind.FRAGMENT_SPREAD,
+  name: {
+    kind: Kind.NAME,
+    value: 'childrenLayoutStrategyFragment',
+  },
+};
+
+const childrenLayoutStrategy: SelectionNode = {
+  kind: Kind.FIELD,
+  name: {
+    kind: Kind.NAME,
+    value: 'childrenLayoutStrategy',
+  },
+  selectionSet: {
+    kind: Kind.SELECTION_SET,
+    selections: [childrenLayoutStrategyFragment],
+  },
+};
+
+export const nodesStyleDocumentTransform = new DocumentTransform((document) => {
+  if (shouldTransform(document)) {
+    return visit(document, {
+      Field(field) {
+        if (!isNodeStyleFragment(field)) {
+          return undefined;
+        }
+
+        const selections = field.selectionSet?.selections ?? [];
+
+        const cuboidNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [borderColorField, borderSizeField, borderStyleField, backgroundField, childrenLayoutStrategy],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'CuboidNodeStyle',
+            },
+          },
+        };
+
+        const innerFlagNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [borderColorField, borderSizeField, borderStyleField, backgroundField, childrenLayoutStrategy],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'InnerFlagNodeStyle',
+            },
+          },
+        };
+
+        const noteNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [borderColorField, borderSizeField, borderStyleField, backgroundField, childrenLayoutStrategy],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'NoteNodeStyle',
+            },
+          },
+        };
+
+        const outerFlagNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [borderColorField, borderSizeField, borderStyleField, backgroundField, childrenLayoutStrategy],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'OuterFlagNodeStyle',
+            },
+          },
+        };
+
+        const packageNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [borderColorField, borderSizeField, borderStyleField, backgroundField, childrenLayoutStrategy],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'PackageNodeStyle',
+            },
+          },
+        };
+
+        const rectangleWithExternalLabelNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [borderColorField, borderSizeField, borderStyleField, backgroundField, childrenLayoutStrategy],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'RectangleWithExternalLabelNodeStyle',
+            },
+          },
+        };
+
+        const customImageNodeStyleInlineFragment: InlineFragmentNode = {
+          kind: Kind.INLINE_FRAGMENT,
+          selectionSet: {
+            kind: Kind.SELECTION_SET,
+            selections: [
+              shapeField,
+              borderColorField,
+              borderSizeField,
+              borderStyleField,
+              backgroundField,
+              childrenLayoutStrategy,
+            ],
+          },
+          typeCondition: {
+            kind: Kind.NAMED_TYPE,
+            name: {
+              kind: Kind.NAME,
+              value: 'CustomImageNodeStyle',
+            },
+          },
+        };
+
+        return {
+          ...field,
+          selectionSet: {
+            ...field.selectionSet,
+            selections: [
+              ...selections,
+              cuboidNodeStyleInlineFragment,
+              innerFlagNodeStyleInlineFragment,
+              noteNodeStyleInlineFragment,
+              outerFlagNodeStyleInlineFragment,
+              packageNodeStyleInlineFragment,
+              rectangleWithExternalLabelNodeStyleInlineFragment,
+              customImageNodeStyleInlineFragment,
+            ],
+          },
+        };
+      },
+    });
+  }
+  return document;
+});

package/papyrus-web-components/src/nodes/cuboid/CuboidNode.tsx

@@ -0,0 +1,183 @@
+/*****************************************************************************
+ * Copyright (c) 2024, 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,
+  useConnectionLineNodeStyle,
+  useRefreshConnectionHandles,
+  useConnectorNodeStyle,
+  defaultHeight,
+  defaultWidth,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Theme, useTheme } from '@mui/material/styles';
+import React, { memo, useContext } from 'react';
+import { Node, NodeProps, NodeResizer, useReactFlow } from '@xyflow/react';
+import { CuboidNodeData } from './CuboidNode.types';
+
+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%',
+  };
+};
+
+const cuboidNodeStyle = (
+  theme: Theme,
+  style: React.CSSProperties,
+  selected: boolean,
+  hovered: boolean,
+  faded: boolean
+): React.CSSProperties => {
+  const cuboidNodeStyle: React.CSSProperties = {
+    display: 'flex',
+    padding: '0px',
+    width: '100%',
+    height: '100%',
+    opacity: faded ? '0.4' : '',
+    ...style,
+    // No border nor background color: this is handled by the SVG image
+    border: 'none',
+    backgroundColor: 'transparent',
+  };
+
+  if (selected || hovered) {
+    cuboidNodeStyle.outline = `${theme.palette.selected} solid 1px`;
+  }
+
+  return cuboidNodeStyle;
+};
+
+const svgPathStyle = (theme: Theme, style: React.CSSProperties, faded: boolean): React.CSSProperties => {
+  const svgPathStyle: React.CSSProperties = {
+    stroke: getCSSColor(String(style.borderColor), theme),
+    fill: getCSSColor(String(style.background), theme),
+    fillOpacity: faded ? '0.4' : '1',
+    strokeOpacity: faded ? '0.4' : '1',
+    strokeWidth: style.borderWidth,
+    vectorEffect: 'non-scaling-stroke',
+  };
+  return svgPathStyle;
+};
+
+// The number of px reserved on the right & top of the cuboid node to draw perspective lines.
+const cuboidBorder: number = 20;
+
+export const CuboidNode = memo(({ data, id, selected, dragging }: NodeProps<Node<CuboidNodeData>>) => {
+  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 { style: connectionLineActiveNodeStyle } = useConnectionLineNodeStyle(data.connectionLinePositionOnNode);
+
+  const { getNodes } = useReactFlow<Node<CuboidNodeData>>();
+  const node = getNodes().find((node) => node.id === id);
+  const nodeHeight = node?.height ?? defaultHeight;
+  const nodeWidth = node?.width ?? defaultWidth;
+
+  const handleOnDrop = (event: React.DragEvent) => {
+    onDrop(event, id);
+  };
+
+  useRefreshConnectionHandles(id, data.connectionHandles);
+
+  const borderOffset = data.style.borderWidth ? parseInt(data.style.borderWidth.toString()) / 2 : 0;
+
+  return (
+    <>
+      {data.nodeDescription?.userResizable && !readOnly ? (
+        <NodeResizer
+          handleStyle={{ ...resizeHandleStyle(theme) }}
+          lineStyle={{ ...resizeLineStyle(theme) }}
+          color={theme.palette.selected}
+          isVisible={!!selected}
+          keepAspectRatio={data.nodeDescription?.keepAspectRatio}
+        />
+      ) : null}
+      <div
+        style={{
+          ...cuboidNodeStyle(theme, data.style, !!selected, data.isHovered, data.faded),
+          ...connectionFeedbackStyle,
+          ...dropFeedbackStyle,
+          ...connectionLineActiveNodeStyle,
+        }}
+        onDragOver={onDragOver}
+        onDrop={handleOnDrop}
+        data-testid={`Cuboid - ${data?.insideLabel?.text}`}>
+        <div
+          // Add a 1px space around the absolute div to make sure it doesn't overlap with the cuboid SVG stroke.
+          style={{
+            position: 'absolute',
+            top: cuboidBorder + 1 + 'px',
+            bottom: '1px',
+            right: cuboidBorder + 1 + 'px',
+            left: '1px',
+          }}>
+          <div>
+            {/* Label */}
+            {data.insideLabel ? <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} /> : null}
+          </div>
+
+          <div style={{ borderTop: `1px solid ${getCSSColor(String(data.style.borderColor), theme)}` }}>
+            {/* Children */}
+          </div>
+        </div>
+        {!!selected ? <ConnectionCreationHandles nodeId={id} /> : null}
+        <ConnectionTargetHandle nodeId={id} nodeDescription={data.nodeDescription} isHovered={data.isHovered} />
+        <ConnectionHandles connectionHandles={data.connectionHandles} />
+        <svg viewBox={`0 0 ${nodeWidth} ${nodeHeight}`}>
+          {/* This path represents the external borders of the cuboid */}
+          <path
+            style={svgPathStyle(theme, data.style, data.faded)}
+            d={`M ${borderOffset}, ${borderOffset + cuboidBorder} L ${cuboidBorder + borderOffset}, ${borderOffset} H ${
+              nodeWidth - borderOffset
+            } V ${nodeHeight - (cuboidBorder + borderOffset)} L ${nodeWidth - (cuboidBorder + borderOffset)}, ${
+              nodeHeight - borderOffset
+            } H ${borderOffset} Z`}
+          />
+
+          {/* This path represents the top and right borders of the cuboid front face */}
+          <path
+            style={svgPathStyle(theme, data.style, data.faded)}
+            d={`M ${borderOffset},${borderOffset + cuboidBorder} H ${nodeWidth - (borderOffset + cuboidBorder)} V ${
+              nodeHeight - borderOffset - 0.3
+            }`}
+            // Add a 0.3 offset to avoid a glitch at the junction of the lines on the bottom right corner of the cuboid.
+          />
+
+          {/* This path represents the diagonal edges on the top-right of the cuboid */}
+          <path
+            style={svgPathStyle(theme, data.style, data.faded)}
+            d={`M ${nodeWidth - (borderOffset + cuboidBorder)},${borderOffset + cuboidBorder} L ${
+              nodeWidth - borderOffset
+            }, ${borderOffset}`}
+          />
+        </svg>
+      </div>
+    </>
+  );
+});

package/papyrus-web-components/src/nodes/cuboid/CuboidNode.types.ts

@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Copyright (c) 2024, 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 CuboidNodeData extends NodeData {}
+
+export interface CuboidNodeListData extends NodeData {
+  areChildNodesDraggable: boolean;
+  topGap: number;
+  bottomGap: number;
+  growableNodeIds: string[];
+}
+
+export interface GQLCuboidNodeStyle extends GQLNodeStyle {
+  background: string;
+  borderColor: string;
+  borderStyle: string;
+  borderSize: number;
+}

package/papyrus-web-components/src/nodes/cuboid/CuboidNodeConverter.ts

@@ -0,0 +1,201 @@
+/*****************************************************************************
+ * Copyright (c) 2024, 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,
+  GQLDiagram,
+  GQLDiagramDescription,
+  GQLEdge,
+  GQLNode,
+  GQLNodeDescription,
+  GQLNodeLayoutData,
+  GQLNodeStyle,
+  GQLViewModifier,
+  IConvertEngine,
+  INodeConverter,
+  convertHandles,
+  GQLHandleLayoutData,
+  convertInsideLabel,
+  convertLineStyle,
+  convertOutsideLabels,
+  isListLayoutStrategy,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Node, XYPosition } from '@xyflow/react';
+import { CuboidNodeData, GQLCuboidNodeStyle } from './CuboidNode.types';
+
+const defaultPosition: XYPosition = { x: 0, y: 0 };
+
+const toCuboidNode = (
+  gqlDiagram: GQLDiagram,
+  gqlNode: GQLNode<GQLCuboidNodeStyle>,
+  gqlParentNode: GQLNode<GQLNodeStyle> | null,
+  nodeDescription: GQLNodeDescription,
+  isBorderNode: boolean,
+  gqlEdges: GQLEdge[]
+): Node<CuboidNodeData> => {
+  const {
+    targetObjectId,
+    targetObjectLabel,
+    targetObjectKind,
+    descriptionId,
+    id,
+    insideLabel,
+    outsideLabels,
+    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: CuboidNodeData = {
+    targetObjectId,
+    targetObjectLabel,
+    targetObjectKind,
+    descriptionId,
+    style: {
+      display: 'flex',
+      background: style.background,
+      borderColor: style.borderColor,
+      borderWidth: style.borderSize,
+      borderStyle: convertLineStyle(style.borderStyle),
+    },
+    insideLabel: null,
+    outsideLabels: convertOutsideLabels(outsideLabels, gqlDiagram.layoutData.labelLayoutData),
+    faded: state === GQLViewModifier.Faded,
+    pinned,
+    isBorderNode: isBorderNode,
+    nodeDescription,
+    defaultWidth: gqlNode.defaultWidth,
+    defaultHeight: gqlNode.defaultHeight,
+    borderNodePosition: isBorderNode ? BorderNodePosition.EAST : null,
+    connectionHandles,
+    labelEditable,
+    isNew,
+    resizedByUser,
+    movedByUser,
+    isListChild: isListLayoutStrategy(gqlParentNode?.style.childrenLayoutStrategy),
+    isDraggedNode: false,
+    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}`
+  );
+
+  const node: Node<CuboidNodeData> = {
+    id,
+    type: 'cuboidNode',
+    data,
+    position: defaultPosition,
+    hidden: gqlNode.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`,
+    };
+  }
+
+  return node;
+};
+
+export class CuboidNodeConverter implements INodeConverter {
+  canHandle(gqlNode: GQLNode<GQLNodeStyle>) {
+    return gqlNode.style.__typename === 'CuboidNodeStyle' && gqlNode.style.childrenLayoutStrategy?.kind !== 'List';
+  }
+
+  handle(
+    convertEngine: IConvertEngine,
+    gqlDiagram: GQLDiagram,
+    gqlNode: GQLNode<GQLCuboidNodeStyle>,
+    gqlEdges: GQLEdge[],
+    parentNode: GQLNode<GQLNodeStyle> | null,
+    isBorderNode: boolean,
+    nodes: Node[],
+    diagramDescription: GQLDiagramDescription,
+    nodeDescriptions: GQLNodeDescription[]
+  ) {
+    const nodeDescription = nodeDescriptions.find((description) => description.id === gqlNode.descriptionId);
+
+    if (nodeDescription) {
+      nodes.push(toCuboidNode(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
+    );
+  }
+}