[3531] Fix unnecessary edges label re render

Bug: #3531 Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Jun 19, 2024 · d7b7376 · d7b7376
1 parent 9ebb240
commit d7b7376
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 68 deletions.
diff --git 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
@@ -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<ServerContextValue>(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<ServerContextValue>(ServerContext);
 
-  return (
-    <>
-      {iconURL?.length > 0 && (
-        <div style={{ position: 'relative', width: iconWidth, height: iconHeight, ...customIconStyle }}>
-          {iconURL.map((url: string, index) => (
-            <Tooltip title={title || ''} key={'tooltip_' + index}>
-              <img
-                height={iconHeight}
-                width={iconWidth}
-                key={index}
-                alt={alt}
-                src={httpOrigin + url}
-                style={{ zIndex: index, position: 'absolute', top: 0, left: 0 }}
-              />
-            </Tooltip>
-          ))}
-        </div>
-      )}
-    </>
-  );
-};
+    return (
+      <>
+        {iconURL?.length > 0 && (
+          <div style={{ position: 'relative', width: iconWidth, height: iconHeight, ...customIconStyle }}>
+            {iconURL.map((url: string, index) => (
+              <Tooltip title={title || ''} key={'tooltip_' + index}>
+                <img
+                  height={iconHeight}
+                  width={iconWidth}
+                  key={index}
+                  alt={alt}
+                  src={httpOrigin + url}
+                  style={{ zIndex: index, position: 'absolute', top: 0, left: 0 }}
+                />
+              </Tooltip>
+            ))}
+          </div>
+        )}
+      </>
+    );
+  }
+);
diff --git 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',
@@ -83,6 +77,7 @@ const labelContentStyle = (theme: Theme, label: EdgeLabel | InsideLabel | Outsid
       labelContentStyle.whiteSpace = 'pre';
       break;
     default:
+      labelContentStyle.whiteSpace = 'pre';
       break;
   }
   return {
@@ -114,7 +109,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<DiagramContextValue>(DiagramContext);
@@ -147,7 +142,7 @@ export const Label = memo(({ diagramElementId, label, faded, transform }: LabelP
       <div
         data-id={label.id}
         data-testid={`Label - ${label.text}`}
-        style={labelStyle(theme, label.style, faded, transform)}
+        style={labelStyle(theme, label.style, faded)}
         className="nopan">
         {content}
       </div>

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
@@ -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
@@ -55,6 +55,15 @@ const getTranslateFromHandlePositon = (position: Position) => {
   }
 };
 
+const labelContainerStyle = (transform: string): React.CSSProperties => {
+  return {
+    transform: transform,
+    whiteSpace: 'nowrap',
+    position: 'absolute',
+    zIndex: '1001',
+  };
+};
+
 export const MultiLabelEdge = memo(
   ({
     id,
@@ -163,23 +172,19 @@ export const MultiLabelEdge = memo(
         {selected ? <DiagramElementPalette diagramElementId={id} labelId={label ? label.id : null} /> : null}
         <EdgeLabelRenderer>
           {beginLabel && (
-            <Label
-              diagramElementId={id}
-              transform={`${sourceLabelTranslation} translate(${sourceX}px,${sourceY}px)`}
-              label={beginLabel}
-              faded={faded || false}
-            />
+            <div style={labelContainerStyle(`${sourceLabelTranslation} translate(${sourceX}px,${sourceY}px)`)}>
+              <Label diagramElementId={id} label={beginLabel} faded={faded || false} />
+            </div>
           )}
           {label && (
-            <Label diagramElementId={id} transform={`translate(${labelX}px,${labelY}px)`} label={label} faded={false} />
+            <div style={labelContainerStyle(`translate(${labelX}px,${labelY}px)`)}>
+              <Label diagramElementId={id} label={label} faded={false} />
+            </div>
           )}
           {endLabel && (
-            <Label
-              diagramElementId={id}
-              transform={`${targetLabelTranslation} translate(${targetX}px,${targetY}px)`}
-              label={endLabel}
-              faded={faded || false}
-            />
+            <div style={labelContainerStyle(`${targetLabelTranslation} translate(${targetX}px,${targetY}px)`)}>
+              <Label diagramElementId={id} label={endLabel} faded={faded || false} />
+            </div>
           )}
         </EdgeLabelRenderer>
       </>

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
@@ -144,14 +144,14 @@ export const FreeFormNode = memo(({ data, id, selected, dragging }: NodeProps<Fr
         onDrop={handleOnDrop}
         data-testid={`FreeForm - ${data?.targetObjectLabel}`}>
         <div style={{ ...backgroundStyle }} />
-        {data.insideLabel && <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} transform="" />}
+        {data.insideLabel && <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} />}
         {selected ? <DiagramElementPalette diagramElementId={id} labelId={getLabelId(data)} /> : null}
         {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
         <ConnectionTargetHandle nodeId={id} nodeDescription={data.nodeDescription} isHovered={data.isHovered} />
         <ConnectionHandles connectionHandles={data.connectionHandles} />
       </div>
       {data.outsideLabels.BOTTOM_MIDDLE && (
-        <Label diagramElementId={id} label={data.outsideLabels.BOTTOM_MIDDLE} faded={data.faded} transform="" />
+        <Label diagramElementId={id} label={data.outsideLabels.BOTTOM_MIDDLE} faded={data.faded} />
       )}
     </>
   );

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/IconLabelNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/IconLabelNode.tsx
@@ -62,9 +62,7 @@ export const IconLabelNode = memo(({ data, id, selected, dragging }: NodeProps<I
         onDragOver={onDragOver}
         onDrop={handleOnDrop}
         data-testid={`IconLabel - ${data?.insideLabel?.text}`}>
-        {data.insideLabel ? (
-          <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} transform="" />
-        ) : null}
+        {data.insideLabel ? <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} /> : null}
         {selected ? <DiagramElementPalette diagramElementId={id} labelId={data?.insideLabel?.id ?? null} /> : null}
       </div>
     </div>

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/ListNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/ListNode.tsx
@@ -79,9 +79,7 @@ export const ListNode = memo(({ data, id, selected, dragging }: NodeProps<ListNo
         onDragOver={onDragOver}
         onDrop={handleOnDrop}
         data-testid={`List - ${data?.insideLabel?.text}`}>
-        {data.insideLabel ? (
-          <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} transform="" />
-        ) : null}
+        {data.insideLabel ? <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} /> : null}
         {selected ? (
           <DiagramElementPalette diagramElementId={id} labelId={data.insideLabel ? data.insideLabel.id : null} />
         ) : null}

diff --git a/packages/sirius-web/frontend/sirius-web/src/nodes/EllipseNode.tsx b/packages/sirius-web/frontend/sirius-web/src/nodes/EllipseNode.tsx
@@ -102,9 +102,7 @@ export const EllipseNode = memo(({ data, id, selected, dragging }: NodeProps<Ell
         onDragOver={onDragOver}
         onDrop={handleOnDrop}
         data-testid={`Ellipse - ${data?.insideLabel?.text}`}>
-        {data.insideLabel ? (
-          <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} transform="" />
-        ) : null}
+        {data.insideLabel ? <Label diagramElementId={id} label={data.insideLabel} faded={data.faded} /> : null}
         {selected ? (
           <DiagramElementPalette diagramElementId={id} labelId={data.insideLabel ? data.insideLabel.id : null} />
         ) : null}