diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 8322c5a90bc..f20b4d278cf 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -58,6 +58,8 @@ More existing APIs will be migrated to this new common pattern. - https://github.com/eclipse-sirius/sirius-web/issues/3628[#3628] [sirius-web] Restore support for expand all and reveal in the explorer - https://github.com/eclipse-sirius/sirius-web/issues/3616[#3616] [diagram] Fix potential exceptions due to duplicate keys in diagram event processing - https://github.com/eclipse-sirius/sirius-web/issues/3624[#3624] [diagram] Fix an issue where the header separator does not fill the entire width of the node +- https://github.com/eclipse-sirius/sirius-web/issues/3531[#3531] [diagram] Fix unnecessary edges label re render + === New Features diff --git a/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx b/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx index d667d03c257..4e1928d93b8 100644 --- a/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx +++ b/packages/core/frontend/sirius-components-core/src/icon/IconOverlay.tsx @@ -11,41 +11,36 @@ * Obeo - initial API and implementation *******************************************************************************/ import Tooltip from '@material-ui/core/Tooltip'; -import { useContext } from 'react'; +import { memo, useContext } from 'react'; import { ServerContext } from '../contexts/ServerContext'; import { ServerContextValue } from '../contexts/ServerContext.types'; import { IconOverlayProps } from './IconOverlay.types'; -export const IconOverlay = ({ - iconURL, - alt, - title, - customIconWidth, - customIconHeight, - customIconStyle, -}: IconOverlayProps) => { - const iconWidth: number = customIconWidth || 16; - const iconHeight: number = customIconHeight || 16; - const { httpOrigin } = useContext(ServerContext); +export const IconOverlay = memo( + ({ iconURL, alt, title, customIconWidth, customIconHeight, customIconStyle }: IconOverlayProps) => { + const iconWidth: number = customIconWidth || 16; + const iconHeight: number = customIconHeight || 16; + const { httpOrigin } = useContext(ServerContext); - return ( - <> - {iconURL?.length > 0 && ( -
- {iconURL.map((url: string, index) => ( - - {alt} - - ))} -
- )} - - ); -}; + return ( + <> + {iconURL?.length > 0 && ( +
+ {iconURL.map((url: string, index) => ( + + {alt} + + ))} +
+ )} + + ); + } +); diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts index 9fddfd17cdc..272e0e23bf4 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/convertDiagram.ts @@ -34,7 +34,7 @@ import { IconLabelNodeConverter } from './IconLabelNodeConverter'; import { ImageNodeConverter } from './ImageNodeConverter'; import { ListNodeConverter } from './ListNodeConverter'; import { RectangleNodeConverter } from './RectangleNodeConverter'; -import { convertLabelStyle, convertContentStyle } from './convertLabel'; +import { convertContentStyle, convertLabelStyle } from './convertLabel'; const nodeDepth = (nodeId2node: Map, nodeId: string): number => { const node = nodeId2node.get(nodeId); @@ -55,10 +55,6 @@ const convertEdgeLabel = (gqlEdgeLabel: GQLLabel): EdgeLabel => { text: gqlEdgeLabel.text, iconURL: gqlEdgeLabel.style.iconURL, style: { - position: 'absolute', - background: 'transparent', - padding: 5, - zIndex: 1001, ...convertLabelStyle(gqlEdgeLabel.style), }, contentStyle: { diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx index 25029830b0d..397bda646f7 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx @@ -16,10 +16,10 @@ import { Theme, useTheme } from '@material-ui/core/styles'; import { memo, useContext } from 'react'; import { DiagramContext } from '../contexts/DiagramContext'; import { DiagramContextValue } from '../contexts/DiagramContext.types'; +import { EdgeLabel, InsideLabel, LabelOverflowStrategy, OutsideLabel } from './DiagramRenderer.types'; import { DiagramDirectEditInput } from './direct-edit/DiagramDirectEditInput'; import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit'; import { LabelProps } from './Label.types'; -import { EdgeLabel, InsideLabel, LabelOverflowStrategy, OutsideLabel } from './DiagramRenderer.types'; const getOverflowStrategy = (label: EdgeLabel | InsideLabel | OutsideLabel): LabelOverflowStrategy | undefined => { if ('overflowStrategy' in label) { @@ -49,14 +49,8 @@ const getHeaderSeparatorStyle = (label: EdgeLabel | InsideLabel | OutsideLabel): return undefined; }; -const labelStyle = ( - theme: Theme, - style: React.CSSProperties, - faded: Boolean, - transform: string -): React.CSSProperties => { +const labelStyle = (theme: Theme, style: React.CSSProperties, faded: Boolean): React.CSSProperties => { return { - transform, opacity: faded ? '0.4' : '', pointerEvents: 'all', display: 'flex', @@ -114,7 +108,7 @@ const labelOverflowStyle = (label: EdgeLabel | InsideLabel | OutsideLabel): Reac return style; }; -export const Label = memo(({ diagramElementId, label, faded, transform }: LabelProps) => { +export const Label = memo(({ diagramElementId, label, faded }: LabelProps) => { const theme: Theme = useTheme(); const { currentlyEditedLabelId, editingKey, resetDirectEdit } = useDiagramDirectEdit(); const { readOnly } = useContext(DiagramContext); @@ -147,7 +141,7 @@ export const Label = memo(({ diagramElementId, label, faded, transform }: LabelP
{content}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.types.ts index b013b5a102d..509f02aafba 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.types.ts +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.types.ts @@ -17,5 +17,4 @@ export interface LabelProps { diagramElementId: string; label: EdgeLabel | InsideLabel | OutsideLabel; faded: boolean; - transform: string; } diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx index 95083fe6583..5b87e67d93b 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/MultiLabelEdge.tsx @@ -55,6 +55,15 @@ const getTranslateFromHandlePositon = (position: Position) => { } }; +const labelContainerStyle = (transform: string): React.CSSProperties => { + return { + transform, + position: 'absolute', + padding: 5, + zIndex: 1001, + }; +}; + export const MultiLabelEdge = memo( ({ id, @@ -163,23 +172,19 @@ export const MultiLabelEdge = memo( {selected ? : null} {beginLabel && ( - diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx index 1388b42dfd4..d30aa69d98b 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx +++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx @@ -144,14 +144,14 @@ export const FreeFormNode = memo(({ data, id, selected, dragging }: NodeProps
- {data.insideLabel &&
{data.outsideLabels.BOTTOM_MIDDLE && ( -