@eclipse-papyrus/papyrus-web-parent 2026.2.0

package/papyrus-web-components/src/nodes/rectangleWithExternalLabel/RectangleWithExternalLabelNodeConverter.ts

@@ -0,0 +1,205 @@
+/*****************************************************************************
+ * 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,
+  GQLDiagram,
+  GQLDiagramDescription,
+  GQLEdge,
+  GQLNode,
+  GQLNodeDescription,
+  GQLNodeLayoutData,
+  GQLNodeStyle,
+  GQLViewModifier,
+  IConvertEngine,
+  INodeConverter,
+  convertHandles,
+  convertLineStyle,
+  convertOutsideLabels,
+  isListLayoutStrategy,
+  convertInsideLabel,
+  GQLHandleLayoutData,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Node, XYPosition } from '@xyflow/react';
+import {
+  GQLRectangleWithExternalLabelNodeStyle,
+  RectangleWithExternalLabelNodeData,
+} from './RectangleWithExternalLabelNode.types';
+
+const defaultPosition: XYPosition = { x: 0, y: 0 };
+
+const toRectangleWithExternalLabelNode = (
+  gqlDiagram: GQLDiagram,
+  gqlNode: GQLNode<GQLRectangleWithExternalLabelNodeStyle>,
+  gqlParentNode: GQLNode<GQLNodeStyle> | null,
+  nodeDescription: GQLNodeDescription,
+  isBorderNode: boolean,
+  gqlEdges: GQLEdge[]
+): Node<RectangleWithExternalLabelNodeData> => {
+  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: RectangleWithExternalLabelNodeData = {
+    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<RectangleWithExternalLabelNodeData> = {
+    id,
+    type: 'rectangleWithExternalLabelNode',
+    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 RectangleWithExternalLabelNodeConverter implements INodeConverter {
+  canHandle(gqlNode: GQLNode<GQLNodeStyle>) {
+    return gqlNode.style.__typename === 'RectangleWithExternalLabelNodeStyle';
+  }
+
+  handle(
+    convertEngine: IConvertEngine,
+    gqlDiagram: GQLDiagram,
+    gqlNode: GQLNode<GQLRectangleWithExternalLabelNodeStyle>,
+    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(
+        toRectangleWithExternalLabelNode(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
+    );
+  }
+}

package/papyrus-web-components/src/nodes/rectangleWithExternalLabel/RectangleWithExternalLabelNodeLayoutHandler.ts

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * 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 {
+  Diagram,
+  DiagramNodeType,
+  getBorderNodeExtent,
+  ILayoutEngine,
+  INodeLayoutHandler,
+  NodeData,
+  setBorderNodesPosition,
+  ForcedDimensions,
+  defaultWidth,
+  defaultHeight,
+} from '@eclipse-sirius/sirius-components-diagrams';
+import { Node } from '@xyflow/react';
+
+export class RectangleWithExternalLabelNodeLayoutHandler implements INodeLayoutHandler<NodeData> {
+  canHandle(node: Node<NodeData, DiagramNodeType>) {
+    return node.type === 'rectangleWithExternalLabelNode';
+  }
+
+  handle(
+    layoutEngine: ILayoutEngine,
+    previousDiagram: Diagram | null,
+    node: Node<NodeData>,
+    visibleNodes: Node<NodeData, DiagramNodeType>[],
+    directChildren: Node<NodeData, DiagramNodeType>[],
+    newlyAddedNodes: Node<NodeData, DiagramNodeType>[],
+    _forceWidth?: ForcedDimensions
+  ) {
+    layoutEngine.layoutNodes(previousDiagram, visibleNodes, directChildren, newlyAddedNodes);
+
+    const borderNodes = directChildren.filter((node) => node.data.isBorderNode);
+
+    node.width = node.data.defaultWidth ?? defaultWidth;
+    node.height = node.data.defaultHeight ?? defaultHeight;
+
+    // Update border nodes positions
+    borderNodes.forEach((borderNode) => {
+      borderNode.extent = getBorderNodeExtent(node, borderNode);
+    });
+    setBorderNodesPosition(borderNodes, node, previousDiagram);
+  }
+}

package/papyrus-web-components/src/profile/apply-profile/ApplyProfileModal.tsx

@@ -0,0 +1,238 @@
+/*******************************************************************************
+ * Copyright (c) 2019, 2025 CEA LIST, 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 { gql, useMutation, useQuery } from '@apollo/client';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Snackbar from '@mui/material/Snackbar';
+import { makeStyles } from 'tss-react/mui';
+import CloseIcon from '@mui/icons-material/Close';
+import { useMachine } from '@xstate/react';
+import { useEffect } from 'react';
+import { StateMachine } from 'xstate';
+import {
+  ApplyProfileModalProps,
+  GQLApplyProfileMutationData,
+  GQLApplyProfilePayload,
+  GQLErrorPayload,
+  GQLGetProfilesQueryData,
+  GQLGetProfilesQueryVariables,
+} from './ApplyProfileModal.types';
+import {
+  ApplyProfileEvent,
+  ApplyProfileModalContext,
+  ApplyProfileModalEvent,
+  ChangeProfileEvent,
+  FetchedProfilesEvent,
+  HandleResponseEvent,
+  HideToastEvent,
+  SchemaValue,
+  ShowToastEvent,
+  applyProfileModalMachine,
+  ApplyProfileModalStateSchema,
+} from './ApplyProfileModalMachine';
+
+const applyProfileMutation = gql`
+  mutation applyProfile($input: ApplyProfileInput!) {
+    applyProfile(input: $input) {
+      __typename
+      ... on ApplyProfileSuccessPayload {
+        id
+      }
+      ... on ErrorPayload {
+        message
+      }
+    }
+  }
+`;
+
+const getUMLProfileMetadatasQuery = gql`
+  query getUMLProfileMetadatas {
+    viewer {
+      profileMetadatas {
+        label
+        uriPath
+      }
+    }
+  }
+`;
+
+const useApplyProfileModalStyles = makeStyles()((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& > *': {
+      marginBottom: theme.spacing(1),
+    },
+  },
+}));
+
+const isErrorPayload = (payload: GQLApplyProfilePayload): payload is GQLErrorPayload =>
+  payload.__typename === 'ErrorPayload';
+
+export const ApplyProfileModal = ({ editingContextId, item, onAppliedProfile, onClose }: ApplyProfileModalProps) => {
+  const { classes } = useApplyProfileModalStyles();
+  const [{ value, context }, dispatch] =
+    useMachine<StateMachine<ApplyProfileModalContext, ApplyProfileModalStateSchema, ApplyProfileModalEvent>>(
+      applyProfileModalMachine
+    );
+  const { applyProfileModal, toast } = value as SchemaValue;
+  const { selectedProfileId, profiles, message } = context;
+
+  const {
+    loading: profilesLoading,
+    data: profilesData,
+    error: profilesError,
+  } = useQuery<GQLGetProfilesQueryData, GQLGetProfilesQueryVariables>(getUMLProfileMetadatasQuery, {
+    variables: { editingContextId, kind: item.kind },
+  });
+  useEffect(() => {
+    if (!profilesLoading) {
+      if (profilesError) {
+        const showToastEvent: ShowToastEvent = {
+          type: 'SHOW_TOAST',
+          message: 'An unexpected error has occurred, please refresh the page',
+        };
+        dispatch(showToastEvent);
+      }
+      if (profilesData) {
+        const fetchProfilesEvent: FetchedProfilesEvent = {
+          type: 'HANDLE_FETCHED_PROFILES',
+          data: profilesData,
+        };
+        dispatch(fetchProfilesEvent);
+      }
+    }
+  }, [profilesLoading, profilesData, profilesError, dispatch]);
+
+  const onProfileChange = (event) => {
+    const value = event.target.value;
+    const changeProfileEvent: ChangeProfileEvent = {
+      type: 'CHANGE_PROFILE',
+      profileId: value,
+    };
+    dispatch(changeProfileEvent);
+  };
+
+  const [applyProfile, { loading: applyProfileLoading, data: applyProfileData, error: applyProfileError }] =
+    useMutation<GQLApplyProfileMutationData>(applyProfileMutation);
+  useEffect(() => {
+    if (!applyProfileLoading) {
+      if (applyProfileError) {
+        const showToastEvent: ShowToastEvent = {
+          type: 'SHOW_TOAST',
+          message: 'An unexpected error has occurred, please refresh the page',
+        };
+        dispatch(showToastEvent);
+      }
+      if (applyProfileData) {
+        const handleResponseEvent: HandleResponseEvent = { type: 'HANDLE_RESPONSE', data: applyProfileData };
+        dispatch(handleResponseEvent);
+
+        const { applyProfile } = applyProfileData;
+        if (isErrorPayload(applyProfile)) {
+          const { message } = applyProfile;
+          const showToastEvent: ShowToastEvent = { type: 'SHOW_TOAST', message };
+          dispatch(showToastEvent);
+        }
+      }
+    }
+  }, [applyProfileLoading, applyProfileData, applyProfileError, dispatch]);
+
+  const onApplyProfile = () => {
+    dispatch({ type: 'APPLY_PROFILE' } as ApplyProfileEvent);
+    const input = {
+      id: crypto.randomUUID(),
+      editingContextId,
+      modelId: item.id,
+      profileUriPath: selectedProfileId,
+    };
+    applyProfile({ variables: { input } });
+  };
+
+  useEffect(() => {
+    if (applyProfileModal === 'success') {
+      onAppliedProfile();
+    }
+  }, [applyProfileModal, onAppliedProfile]);
+
+  return (
+    <>
+      <Dialog
+        open={true}
+        onClose={onClose}
+        aria-labelledby="dialog-title"
+        maxWidth="xs"
+        fullWidth
+        data-testid="apply-profile-dialog">
+        <DialogTitle id="dialog-title" data-testid="apply-profile-dialog-title">
+          Apply a profile
+        </DialogTitle>
+        <DialogContent data-testid="apply-profile-dialog-content">
+          <div className={classes.form}>
+            <InputLabel id="applyProfileModalProfileLabel">Object type</InputLabel>
+            <Select
+              value={selectedProfileId}
+              onChange={onProfileChange}
+              disabled={applyProfileModal === 'loading' || applyProfileModal === 'applyingProfile'}
+              labelId="applyProfileModalProfileLabel"
+              fullWidth
+              data-testid="profile">
+              {profiles.map((profile) => (
+                <MenuItem value={profile.uriPath} key={profile.uriPath}>
+                  {profile.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            disabled={applyProfileModal !== 'valid'}
+            data-testid="apply-profile-submit"
+            color="primary"
+            onClick={onApplyProfile}>
+            Apply
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        open={toast === 'visible'}
+        autoHideDuration={3000}
+        onClose={() => dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)}
+        message={message}
+        action={
+          <IconButton
+            size="small"
+            aria-label="close"
+            color="inherit"
+            onClick={() => dispatch({ type: 'HIDE_TOAST' } as HideToastEvent)}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        }
+        data-testid="error"
+      />
+    </>
+  );
+};

package/papyrus-web-components/src/profile/apply-profile/ApplyProfileModal.types.tsx

@@ -0,0 +1,65 @@
+/*******************************************************************************
+ * Copyright (c) 2022, 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
+ *******************************************************************************/
+
+export interface ApplyProfileModalProps {
+  editingContextId: string;
+  item: any;
+  onClose: () => void;
+  onAppliedProfile: () => void;
+}
+
+export interface Profile {
+  uriPath: string;
+  label: string;
+}
+
+export interface GQLGetProfilesQueryVariables {
+  editingContextId: string;
+  kind: string;
+}
+
+export interface GQLGetProfilesQueryData {
+  viewer: GQLViewer;
+}
+
+export interface GQLViewer {
+  profileMetadatas: GQLProfileMetadata[];
+}
+
+export interface GQLProfileMetadata {
+  label: string;
+  uriPath: string;
+}
+
+export interface GQLApplyProfileMutationData {
+  applyProfile: GQLApplyProfilePayload;
+}
+
+export interface GQLApplyProfilePayload {
+  __typename: string;
+}
+
+export interface GQLApplyProfileSuccessPayload extends GQLApplyProfilePayload {
+  id: string;
+}
+
+export interface GQLObject {
+  id: string;
+  label: string;
+  kind: string;
+}
+
+export interface GQLErrorPayload extends GQLApplyProfilePayload {
+  message: string;
+}