diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 657ebb3390..e019e7889c 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -118,10 +118,10 @@ To illustrate this new feature, we contribute a new tool on the _Papaya Diagram_ - https://github.com/eclipse-sirius/sirius-web/issues/2261[#2261] [diagram] Change the handle used by edges depending on the position of the source and target - https://github.com/eclipse-sirius/sirius-web/issues/2265[#2265] [diagram] Update the viewport to show the current state of the selection - https://github.com/eclipse-sirius/sirius-web/issues/2368[#2368] [form] Remove useless reference to the GraphQL version of Google Guava - - https://github.com/eclipse-sirius/sirius-web/issues/2343[#2343] [emf] Add icon for type selection in new object modal. - https://github.com/eclipse-sirius/sirius-web/issues/2365[#2365] [diagram] Support key down and F2 to enable direct edit on edges on react-flow diagrams. - https://github.com/eclipse-sirius/sirius-web/issues/2358[#2358] [form] Adds diagnostic messages to the reference widget. +- https://github.com/eclipse-sirius/sirius-web/issues/2288[#2288] [diagram] Make IconLabel a react flow node == v2023.8.0 diff --git a/integration-tests/cypress/e2e/project/react-flow/diagram.reactflow.cy.js b/integration-tests/cypress/e2e/project/react-flow/diagram.reactflow.cy.js index 485f973f2a..4feec88835 100644 --- a/integration-tests/cypress/e2e/project/react-flow/diagram.reactflow.cy.js +++ b/integration-tests/cypress/e2e/project/react-flow/diagram.reactflow.cy.js @@ -37,9 +37,11 @@ describe('/projects/:projectId/edit - Diagram', () => { cy.getByTestId('rf__wrapper').should('exist'); cy.get('.react-flow__edgelabel-renderer').children().should('have.length', 7); - cy.get('.react-flow__nodes').children().should('have.length', 14); + cy.get('.react-flow__nodes').children().should('have.length', 18); cy.get('.react-flow__node-rectangularNode').should('have.length', 2); cy.get('.react-flow__node-imageNode').should('have.length', 10); + cy.get('.react-flow__node-listNode').should('have.length', 2); + cy.get('.react-flow__node-iconLabelNode').should('have.length', 4); }); it('can share the representation', () => { diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts index 4bc97704c7..fce43232ae 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts @@ -15,6 +15,7 @@ import { Edge, Node, XYPosition } from 'reactflow'; import { GQLDiagram } from '../graphql/subscription/diagramFragment.types'; import { GQLLabel, GQLLabelStyle } from '../graphql/subscription/labelFragment.types'; import { + GQLIconLabelNodeStyle, GQLImageNodeStyle, GQLNode, GQLRectangularNodeStyle, @@ -22,8 +23,9 @@ import { } from '../graphql/subscription/nodeFragment.types'; import { Diagram, Label } from '../renderer/DiagramRenderer.types'; import { MultiLabelEdgeData } from '../renderer/edge/MultiLabelEdge.types'; +import { IconLabelNodeData } from '../renderer/node/IconsLabel.types'; import { ImageNodeData } from '../renderer/node/ImageNode.types'; -import { ListItemData, ListNodeData } from '../renderer/node/ListNode.types'; +import { ListNodeData } from '../renderer/node/ListNode.types'; import { RectangularNodeData } from '../renderer/node/RectangularNode.types'; const defaultPosition: XYPosition = { x: 0, y: 0 }; @@ -104,34 +106,50 @@ const toRectangularNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Nod return node; }; -const toListNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node => { - const style = gqlNode.style as GQLRectangularNodeStyle; - const labelStyle = gqlNode.label.style; +const toIconLabelNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node => { + const { targetObjectId, targetObjectLabel, targetObjectKind } = gqlNode; + const style = gqlNode.style as GQLIconLabelNodeStyle; + const { id, label } = gqlNode; + const labelStyle = label.style; - const listItems: ListItemData[] = (gqlNode.childNodes ?? []).map((gqlChildNode) => { - const { id, label } = gqlChildNode; - return { - id, - label: { - id: label.id, - text: label.text, - iconURL: null, - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-start', - gap: '8px', - padding: '4px 8px', - }, - }, + const data: IconLabelNodeData = { + targetObjectId, + targetObjectLabel, + targetObjectKind, + style: { + textAlign: 'left', + backgroundColor: style.backgroundColor, + }, + label: { + id: label.id, + text: label.text, style: { - textAlign: 'left', - ...convertLabelStyle(label.style), + ...convertLabelStyle(labelStyle), }, - hidden: gqlChildNode.state === GQLViewModifier.Hidden, - }; - }); + iconURL: labelStyle.iconURL, + }, + faded: gqlNode.state === GQLViewModifier.Faded, + }; + + const node: Node = { + id, + type: 'iconLabelNode', + data, + position: defaultPosition, + hidden: gqlNode.state === GQLViewModifier.Hidden, + }; + + if (gqlParentNode) { + node.parentNode = gqlParentNode.id; + node.extent = 'parent'; + } + + return node; +}; + +const toListNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node => { + const style = gqlNode.style as GQLRectangularNodeStyle; + const labelStyle = gqlNode.label.style; const { targetObjectId, targetObjectLabel, targetObjectKind } = gqlNode; const data: ListNodeData = { @@ -154,14 +172,12 @@ const toListNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node convertNode(gqlBorderNode, gqlNode, nodes)); (gqlNode.childNodes ?? []).forEach((gqlChildNode) => convertNode(gqlChildNode, gqlNode, nodes)); + } else if (gqlNode.style.__typename === 'IconLabelNodeStyle') { + nodes.push(toIconLabelNode(gqlNode, parentNode)); } }; diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts index a8fa7b9dc5..4c43c111a2 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts @@ -61,4 +61,6 @@ export interface GQLImageNodeStyle extends GQLNodeStyle { imageURL: string; } -export interface GQLIconLabelNodeStyle extends GQLNodeStyle {} +export interface GQLIconLabelNodeStyle extends GQLNodeStyle { + backgroundColor: string; +} diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx index eb1145b937..acecd69987 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx @@ -39,6 +39,7 @@ import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit'; import { useDrop } from './drop/useDrop'; import { MultiLabelEdge } from './edge/MultiLabelEdge'; import { MultiLabelEdgeData } from './edge/MultiLabelEdge.types'; +import { IconLabelNode } from './node/IconLabel'; import { ImageNode } from './node/ImageNode'; import { ListNode } from './node/ListNode'; import { RectangularNode } from './node/RectangularNode'; @@ -54,6 +55,7 @@ const nodeTypes: NodeTypes = { rectangularNode: RectangularNode, imageNode: ImageNode, listNode: ListNode, + iconLabelNode: IconLabelNode, }; const edgeTypes: EdgeTypes = { diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx index 61ac68f1a6..7aab2476e8 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx @@ -17,8 +17,13 @@ import { LabelProps } from './Label.types'; import { DiagramDirectEditInput } from './direct-edit/DiagramDirectEditInput'; import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit'; -const labelStyle = (style: React.CSSProperties, faded: Boolean, transform: string): React.CSSProperties => { - return { +const labelStyle = ( + style: React.CSSProperties, + faded: boolean, + transform: string, + hasIcon: boolean +): React.CSSProperties => { + const labelStyle: React.CSSProperties = { transform, opacity: faded ? '0.4' : '', pointerEvents: 'all', @@ -28,6 +33,12 @@ const labelStyle = (style: React.CSSProperties, faded: Boolean, transform: strin justifyContent: 'flex-start', ...style, }; + + if (hasIcon) { + labelStyle.gap = '8px'; + } + + return labelStyle; }; export const Label = memo(({ diagramElementId, label, faded, transform }: LabelProps) => { @@ -51,12 +62,13 @@ export const Label = memo(({ diagramElementId, label, faded, transform }: LabelP ); } + return (
{label.iconURL ? : ''} {label.text} diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layout.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layout.tsx index a5ddb6df9e..ed5d7e107e 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layout.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layout.tsx @@ -22,27 +22,14 @@ import { Box, Edge, Node, ReactFlowProvider, Rect, boxToRect, rectToBox } from ' import { Diagram, NodeData } from '../DiagramRenderer.types'; import { Label } from '../Label'; import { DiagramDirectEditContextProvider } from '../direct-edit/DiagramDirectEditContext'; -import { ListNode } from '../node/ListNode'; +import { IconLabelNodeData } from '../node/IconsLabel.types'; +import { ImageNodeData } from '../node/ImageNode.types'; import { ListNodeData } from '../node/ListNode.types'; import { RectangularNodeData } from '../node/RectangularNode.types'; -const emptyNodeProps = { - selected: false, - isConnectable: true, - dragging: false, - xPos: 0, - yPos: 0, - zIndex: -1, -}; - -const emptyListNodeProps = { - ...emptyNodeProps, - type: 'listNode', -}; - const elk = new ELK(); -export const prepareLayoutArea = (diagram: Diagram, renderCallback: () => void): HTMLDivElement => { +export const prepareLayoutArea = (diagram: Diagram, renderCallback: () => void, httpOrigin: string): HTMLDivElement => { const hiddenContainer: HTMLDivElement = document.createElement('div'); hiddenContainer.id = 'hidden-container'; hiddenContainer.style.display = 'inline-block'; @@ -54,6 +41,12 @@ export const prepareLayoutArea = (diagram: Diagram, renderCallback: () => void): const visibleNodes = diagram.nodes.filter((node) => !node.hidden); // Render all label first + /** + * WARN: The height label computed in the hidden-container will be slightly different from the label rendered in the reactflow diagram. + * This difference is due to the line-height which is set in `variables.css` to 1.5 globaly but in `reset.css` the line-height is + * overridden to `normal` for element with [role=button] which seem to be the case for all reactflow nodes. + * That should not impact the node size since it is calculated with the higher value of line-height. + */ const labelElements: JSX.Element[] = []; visibleNodes.forEach((node, index) => { if (hiddenContainer && node.data.label) { @@ -89,45 +82,13 @@ export const prepareLayoutArea = (diagram: Diagram, renderCallback: () => void): }); elements.push(labelContainerElement); - // then, render list node with list item only - const listNodeElements: JSX.Element[] = []; - visibleNodes.forEach((node, index) => { - if (hiddenContainer && node.type === 'listNode') { - const data = node.data as ListNodeData; - const listNode = createElement(ListNode, { - ...emptyListNodeProps, - id: node.id, - data, - key: `${node.id}-${index}`, - }); - - const element: JSX.Element = createElement('div', { - id: `${node.id}-${index}`, - key: node.id, - children: listNode, - }); - listNodeElements.push(element); - } - }); - const nodeListContainerElement: JSX.Element = createElement('div', { - id: 'hidden-nodeList-container', - key: 'hidden-nodeList-container', - style: { - display: 'flex', - flexWrap: 'wrap', - alignItems: 'flex-start', - }, - children: listNodeElements, - }); - elements.push(nodeListContainerElement); - const hiddenContainerContentElements: JSX.Element = createElement(Fragment, { children: elements }); const element = ( - + {} }}> {hiddenContainerContentElements} @@ -151,7 +112,6 @@ const gap = 20; const rectangularNodePadding = 8; const defaultWidth = 150; const defaultHeight = 70; -const borderLeftAndRight = 2; export const layout = (diagram: Diagram): Diagram => { layoutDiagram(diagram); @@ -160,6 +120,11 @@ export const layout = (diagram: Diagram): Diagram => { const findNodeIndex = (nodes: Node[], refNodeId: string): number => nodes.findIndex((node) => node.id === refNodeId); +const isListNode = (node: Node): node is Node => node.type === 'listNode'; +const isRectangularNode = (node: Node): node is Node => node.type === 'rectangularNode'; +const isImageNode = (node: Node): node is Node => node.type === 'imageNode'; +const isIconLabelNode = (node: Node): node is Node => node.type === 'iconLabelNode'; + const layoutDiagram = (diagram: Diagram) => { const allVisibleNodes = diagram.nodes.filter((node) => !node.hidden); const nodesToLayout = allVisibleNodes.filter((node) => !node.parentNode); @@ -178,7 +143,8 @@ const layoutDiagram = (diagram: Diagram) => { const layoutNodes = (allVisibleNodes: Node[], nodesToLayout: Node[]) => { nodesToLayout.forEach((nodeToLayout) => { const directChildren = allVisibleNodes.filter((node) => node.parentNode === nodeToLayout.id); - if (nodeToLayout.type === 'rectangularNode') { + if (isRectangularNode(nodeToLayout)) { + const borderWidth = (nodeToLayout.data.style.borderWidth as number) ?? 0; // WARN: Works only if the value is in pixel. It may need to pre-compute the layout to have the pixel value of the computed style if (directChildren.length > 0) { layoutNodes(allVisibleNodes, directChildren); @@ -204,14 +170,15 @@ const layoutNodes = (allVisibleNodes: Node[], nodesToLayout: Node[]) = const childrenAwareNodeWidth = childrenFootprint.x + childrenFootprint.width + rectangularNodePadding; const labelOnlyWidth = rectangularNodePadding + (labelElement?.getBoundingClientRect().width ?? 0) + rectangularNodePadding; - const nodeWidth = Math.max(childrenAwareNodeWidth, labelOnlyWidth); - nodeToLayout.width = getNodeOrMinWidth(nodeWidth + borderLeftAndRight); + const nodeWidth = Math.max(childrenAwareNodeWidth, labelOnlyWidth) + borderWidth * 2; + nodeToLayout.width = getNodeOrMinWidth(nodeWidth); nodeToLayout.height = getNodeOrMinHeight( rectangularNodePadding + (labelElement?.getBoundingClientRect().height ?? 0) + rectangularNodePadding + childrenFootprint.height + - rectangularNodePadding + rectangularNodePadding + + borderWidth * 2 ); } else { const labelElement = document.getElementById( @@ -222,7 +189,7 @@ const layoutNodes = (allVisibleNodes: Node[], nodesToLayout: Node[]) = rectangularNodePadding + (labelElement?.getBoundingClientRect().width ?? 0) + rectangularNodePadding + - borderLeftAndRight; + borderWidth * 2; const labelHeight = rectangularNodePadding + (labelElement?.getBoundingClientRect().height ?? 0) + rectangularNodePadding; const nodeWidth = getNodeOrMinWidth(labelWidth); @@ -230,15 +197,62 @@ const layoutNodes = (allVisibleNodes: Node[], nodesToLayout: Node[]) = nodeToLayout.width = nodeWidth; nodeToLayout.height = nodeHeight; } - } else if (nodeToLayout.type === 'imageNode') { + } else if (isImageNode(nodeToLayout)) { nodeToLayout.width = defaultWidth; nodeToLayout.height = defaultHeight; - } else if (nodeToLayout.type === 'listNode') { - const nodeList = document.getElementById(`${nodeToLayout.id}-${findNodeIndex(allVisibleNodes, nodeToLayout.id)}`) - ?.children[0]; + } else if (isListNode(nodeToLayout)) { + if (directChildren.length > 0) { + layoutNodes(allVisibleNodes, directChildren); + const labelElement = document.getElementById( + `${nodeToLayout.id}-label-${findNodeIndex(allVisibleNodes, nodeToLayout.id)}` + ); - nodeToLayout.width = getNodeOrMinWidth(nodeList?.getBoundingClientRect().width); - nodeToLayout.height = getNodeOrMinHeight(nodeList?.getBoundingClientRect().height); + const iconLabelNodes = directChildren.filter(isIconLabelNode); + iconLabelNodes.forEach((child, index) => { + child.position = { + x: 0, + y: (labelElement?.getBoundingClientRect().height ?? 0) + rectangularNodePadding, + }; + const previousSibling = iconLabelNodes[index - 1]; + if (previousSibling) { + child.position = { ...child.position, y: previousSibling.position.y + (previousSibling.height ?? 0) }; + } + }); + + const childrenFootprint = getChildrenFootprint(iconLabelNodes); + const childrenAwareNodeWidth = childrenFootprint.x + childrenFootprint.width + rectangularNodePadding; + const labelOnlyWidth = + rectangularNodePadding + (labelElement?.getBoundingClientRect().width ?? 0) + rectangularNodePadding; + const borderWidth = (nodeToLayout.data.style.borderWidth as number) ?? 0; // WARN: Works only if the value is in pixel. It may need to pre-compute the layout to have the pixel value of the computed style + const nodeWidth = Math.max(childrenAwareNodeWidth, labelOnlyWidth) + borderWidth * 2; + nodeToLayout.width = getNodeOrMinWidth(nodeWidth); + nodeToLayout.height = getNodeOrMinHeight( + (labelElement?.getBoundingClientRect().height ?? 0) + + rectangularNodePadding + + childrenFootprint.height + + borderWidth * 2 + ); + + if (nodeWidth > childrenAwareNodeWidth) { + // we need to adjust the width of children + iconLabelNodes.forEach((child) => { + child.width = nodeWidth; + child.style = { + ...child.style, + width: `${nodeWidth}px`, + }; + }); + } + } else { + nodeToLayout.width = getNodeOrMinWidth(undefined); + nodeToLayout.height = getNodeOrMinHeight(undefined); + } + } else if (isIconLabelNode(nodeToLayout)) { + const labelElement = document.getElementById( + `${nodeToLayout.id}-label-${findNodeIndex(allVisibleNodes, nodeToLayout.id)}` + ); + nodeToLayout.width = labelElement?.getBoundingClientRect().width; + nodeToLayout.height = labelElement?.getBoundingClientRect().height; } nodeToLayout.style = { ...nodeToLayout.style, diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/useLayout.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/useLayout.ts index fa4c396070..11547e9ee0 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/useLayout.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/useLayout.ts @@ -11,7 +11,8 @@ * Obeo - initial API and implementation *******************************************************************************/ -import { useEffect, useState } from 'react'; +import { ServerContext, ServerContextValue } from '@eclipse-sirius/sirius-components-core'; +import { useContext, useEffect, useState } from 'react'; import { Diagram } from '../DiagramRenderer.types'; import { cleanLayoutArea, layout, performDefaultAutoLayout, prepareLayoutArea } from './layout'; import { UseLayoutState, UseLayoutValue } from './useLayout.types'; @@ -25,6 +26,7 @@ const initialState: UseLayoutState = { }; export const useLayout = (): UseLayoutValue => { + const { httpOrigin } = useContext(ServerContext); const [state, setState] = useState(initialState); const layoutAreaPrepared = () => { @@ -49,7 +51,7 @@ export const useLayout = (): UseLayoutValue => { useEffect(() => { if (state.currentStep === 'BEFORE_LAYOUT' && !state.hiddenContainer && state.diagramToLayout) { - const layoutArea = prepareLayoutArea(state.diagramToLayout, layoutAreaPrepared); + const layoutArea = prepareLayoutArea(state.diagramToLayout, layoutAreaPrepared, httpOrigin); setState((prevState) => ({ ...prevState, hiddenContainer: layoutArea, diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/IconLabel.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/IconLabel.tsx new file mode 100644 index 0000000000..adf466ecd0 --- /dev/null +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/IconLabel.tsx @@ -0,0 +1,48 @@ +/******************************************************************************* + * Copyright (c) 2023 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 { Theme, useTheme } from '@material-ui/core/styles'; +import { memo } from 'react'; +import { NodeProps } from 'reactflow'; +import { Label } from '../Label'; +import { NodePalette } from '../palette/NodePalette'; +import { IconLabelNodeData } from './IconsLabel.types'; + +const iconlabelStyle = ( + style: React.CSSProperties, + theme: Theme, + selected: boolean, + faded: boolean +): React.CSSProperties => { + const iconLabelNodeStyle: React.CSSProperties = { + opacity: faded ? '0.4' : '', + marginLeft: '8px', + ...style, + }; + + if (selected) { + iconLabelNodeStyle.outline = `${theme.palette.primary.main} solid 1px`; + } + + return iconLabelNodeStyle; +}; + +export const IconLabelNode = memo(({ data, id, selected }: NodeProps) => { + const theme = useTheme(); + return ( +
+ {data.label ?
+ ); +}); diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/IconsLabel.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/IconsLabel.types.ts new file mode 100644 index 0000000000..34ba99bf03 --- /dev/null +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/IconsLabel.types.ts @@ -0,0 +1,18 @@ +/******************************************************************************* + * Copyright (c) 2023 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 { NodeData } from '../DiagramRenderer.types'; + +export interface IconLabelNodeData extends NodeData { + style: React.CSSProperties; +} diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx index 8cce0f8b15..6d6aac2dcc 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx @@ -58,15 +58,6 @@ export const ListNode = memo(({ data, isConnectable, id, selected }: NodeProps {data.label ?