Skip to content

Commit

Permalink
[3531] Fix unnecessary edges label re render
Browse files Browse the repository at this point in the history
Bug: #3531
Signed-off-by: Michaël Charfadi <[email protected]>
  • Loading branch information
mcharfadi committed Jun 19, 2024
1 parent 9ebb240 commit 1c64865
Show file tree
Hide file tree
Showing 10 changed files with 58 additions and 73 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
</>
);
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, Node>, nodeId: string): number => {
const node = nodeId2node.get(nodeId);
Expand All @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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<DiagramContextValue>(DiagramContext);
Expand Down Expand Up @@ -147,7 +141,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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,4 @@ export interface LabelProps {
diagramElementId: string;
label: EdgeLabel | InsideLabel | OutsideLabel;
faded: boolean;
transform: string;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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} />
</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={!!faded} />
</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} />
</div>
)}
</EdgeLabelRenderer>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
)}
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down

0 comments on commit 1c64865

Please sign in to comment.