Skip to content

Commit

Permalink
[2484] Keep bottom label only to work
Browse files Browse the repository at this point in the history 
Works only for outside bottom label since outside label are outside only
because of the overflow. A rectangle node is built from two div
elements, the first one, the node, takes all the available space, the
second one, the oustside label, is placed "under" because the first one,
took all the space.

Bug: #2484
Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
  • Loading branch information
@gcoutable @sbegaudeau
gcoutable authored and sbegaudeau committed Jan 4, 2024
1 parent f6d8aff commit c4a625d
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 24 deletions.
21 changes: 1 addition & 20 deletions ...ntend/sirius-components-diagrams-reactflow/src/converter/RectangleNodeConverterHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,26 +81,7 @@ const toRectangularNode = (
isNew,
};

if (insideLabel && insideLabel.text.startsWith('out__')) {
const {
id,
text,
style: labelStyle,
style: { iconURL },
} = insideLabel;
data.outsideLabels = {
BOTTOM_MIDDLE: {
id,
text,
iconURL,
style: {
...convertLabelStyle(labelStyle),
},
},
};
}

if (insideLabel && !insideLabel.text.startsWith('out__')) {
if (insideLabel) {
const labelStyle = insideLabel.style;
data.insideLabel = {
id: insideLabel.id,
Expand Down
54 changes: 54 additions & 0 deletions ...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,60 @@ export const prepareLayoutArea = (
});
labelElements.push(element);
}
if (hiddenContainer && Object.keys(node.data.outsideLabels).find((key) => key.startsWith('BOTTOM_'))) {
const outsideLabels = node.data.outsideLabels;
if (outsideLabels.BOTTOM_BEGIN) {
const children: JSX.Element[] = [
createElement(Label, {
diagramElementId: node.id,
label: outsideLabels.BOTTOM_BEGIN,
faded: false,
transform: '',
key: outsideLabels.BOTTOM_BEGIN.id,
}),
];
const element: JSX.Element = createElement('div', {
id: `${node.id}-outside-label-BOTTOM_BEGIN-${index}`,
key: `${node.id}-outside-label-BOTTOM_BEGIN-${index}`,
children,
});
labelElements.push(element);
}
if (outsideLabels.BOTTOM_MIDDLE) {
const children: JSX.Element[] = [
createElement(Label, {
diagramElementId: node.id,
label: outsideLabels.BOTTOM_MIDDLE,
faded: false,
transform: '',
key: outsideLabels.BOTTOM_MIDDLE.id,
}),
];
const element: JSX.Element = createElement('div', {
id: `${node.id}-outside-label-BOTTOM_MIDDLE-${index}`,
key: `${node.id}-outside-label-BOTTOM_MIDDLE-${index}`,
children,
});
labelElements.push(element);
}
if (outsideLabels.BOTTOM_END) {
const children: JSX.Element[] = [
createElement(Label, {
diagramElementId: node.id,
label: outsideLabels.BOTTOM_END,
faded: false,
transform: '',
key: outsideLabels.BOTTOM_END.id,
}),
];
const element: JSX.Element = createElement('div', {
id: `${node.id}-outside-label-BOTTOM_END-${index}`,
key: `${node.id}-outside-label-BOTTOM_END-${index}`,
children,
});
labelElements.push(element);
}
}
});

// The container used to render label is a flex container authorizing wrapping.
Expand Down
44 changes: 40 additions & 4 deletions .../diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/layout/layoutNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,14 +155,50 @@ const getNodeFootprint = (allVisibleNodes: Node<NodeData>[], node: Node<NodeData

const footPrint: Box = [node, ...borderNodes].reduce<Box>(
(currentFootPrint, child) => {
const nodeBox = rectToBox({
x: node !== child && child.data.isBorderNode ? node.position.x + child.position.x : child.position.x,
y: node !== child && child.data.isBorderNode ? node.position.y + child.position.y : child.position.y,
let childBox = rectToBox({
x: child.position.x,
y: child.position.y,
width: child.width ?? 0,
height: child.height ?? 0,
});

return getBoundsOfBoxes(currentFootPrint, nodeBox);
if (child === node) {
const outsideLabels = child.data.outsideLabels;
if (Object.keys(outsideLabels).filter((key) => key.startsWith('BOTTOM_')).length > 0) {
const nodeIndex = findNodeIndex(allVisibleNodes, child.id);
let labelHeight: number = 0;
if (outsideLabels.BOTTOM_BEGIN) {
const labelElement = document.getElementById(`${node.id}-outside-label-BOTTOM_BEGIN-${nodeIndex}`);
const labelRect = labelElement?.getBoundingClientRect();
if (labelHeight < (labelRect?.height ?? 0)) {
labelHeight = labelRect?.height ?? 0;
}
}
if (outsideLabels.BOTTOM_MIDDLE) {
const labelElement = document.getElementById(`${node.id}-outside-label-BOTTOM_MIDDLE-${nodeIndex}`);
const labelRect = labelElement?.getBoundingClientRect();
if (labelHeight < (labelRect?.height ?? 0)) {
labelHeight = labelRect?.height ?? 0;
}
}
if (outsideLabels.BOTTOM_END) {
const labelElement = document.getElementById(`${node.id}-outside-label-BOTTOM_END-${nodeIndex}`);
const labelRect = labelElement?.getBoundingClientRect();
if (labelHeight < (labelRect?.height ?? 0)) {
labelHeight = labelRect?.height ?? 0;
}
}

childBox = rectToBox({
x: child.position.x,
y: child.position.y,
width: child.width ?? 0,
height: (child.height ?? 0) + labelHeight,
});
}
}

return getBoundsOfBoxes(currentFootPrint, childBox);
},
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
);
Expand Down
39 changes: 39 additions & 0 deletions ...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@ const resizeHandleStyle = (theme: Theme): React.CSSProperties => {
};
};

const outsideBottomLabelAreaStyle = (): React.CSSProperties => {
return {
display: 'grid',
gridTemplateColumns: `1fr 1fr 1fr`,
gridTemplateRows: `min-content`,
gridTemplateAreas: `
'BOTTOM_BEGIN BOTTOM_MIDDLE BOTTOM_END'
`,
};
};

export const RectangularNode = memo(({ data, id, selected }: NodeProps<RectangularNodeData>) => {
const theme = useTheme();
const { onDrop, onDragOver } = useDrop();
Expand All @@ -67,6 +78,33 @@ export const RectangularNode = memo(({ data, id, selected }: NodeProps<Rectangul
};

useRefreshConnectionHandles(id, data.connectionHandles);

const outsideBottomlabels: JSX.Element[] = [];
if (data.outsideLabels.BOTTOM_BEGIN) {
const outsideLabel = data.outsideLabels.BOTTOM_BEGIN;
outsideBottomlabels.push(
<div style={{ gridArea: 'BOTTOM_BEGIN' }} key={outsideLabel.id}>
<Label diagramElementId={id} label={outsideLabel} faded={data.faded} transform="" />
</div>
);
}
if (data.outsideLabels.BOTTOM_MIDDLE) {
const outsideLabel = data.outsideLabels.BOTTOM_MIDDLE;
outsideBottomlabels.push(
<div style={{ gridArea: 'BOTTOM_MIDDLE' }} key={outsideLabel.id}>
<Label diagramElementId={id} label={outsideLabel} faded={data.faded} transform="" />
</div>
);
}
if (data.outsideLabels.BOTTOM_END) {
const outsideLabel = data.outsideLabels.BOTTOM_END;
outsideBottomlabels.push(
<div style={{ gridArea: 'BOTTOM_END' }} key={outsideLabel.id}>
<Label diagramElementId={id} label={outsideLabel} faded={data.faded} transform="" />
</div>
);
}

return (
<>
{data.nodeDescription?.userResizable && (
Expand Down Expand Up @@ -97,6 +135,7 @@ export const RectangularNode = memo(({ data, id, selected }: NodeProps<Rectangul
<ConnectionTargetHandle nodeId={id} />
<ConnectionHandles connectionHandles={data.connectionHandles} />
</div>
<div style={{ ...outsideBottomLabelAreaStyle() }}>{outsideBottomlabels}</div>
</>
);
});

0 comments on commit c4a625d

Please sign in to comment.