[2647] Fix CSS error displayed in the console

Bug: #2647 Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
eclipse-sirius · Nov 28, 2023 · ea4ec79 · ea4ec79
1 parent 5f4f3d1
commit ea4ec79
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -123,6 +123,9 @@ It uses our algorithm instead of elk.js to perform the arrange-all.
 - https://github.com/eclipse-sirius/sirius-web/issues/2635[#2635] [diagram] Fix an error when switching between react flow representations.
 - https://github.com/eclipse-sirius/sirius-web/issues/2581[#2581] [diagram] Fix an issue where nodes created by custom tool are always on the default position.
 - https://github.com/eclipse-sirius/sirius-web/issues/2642[#2642] [diagram] Fix an issue where moving the viewport was slow.
+- https://github.com/eclipse-sirius/sirius-web/issues/2647[#2647] [diagram] Split border shorthand CSS properties into non-shorthand properties for list nodes
++
+Make some border node transparent when the node is in a list node in the convert engine.
 
 === New Features
 

diff --git a/...s/frontend/sirius-components-diagrams-reactflow/src/converter/ListNodeConverterHandler.ts b/...s/frontend/sirius-components-diagrams-reactflow/src/converter/ListNodeConverterHandler.ts
@@ -59,9 +59,15 @@ const toListNode = (
     descriptionId,
     style: {
       backgroundColor: style.color,
-      borderColor: style.borderColor,
+      borderTopColor: style.borderColor,
+      borderBottomColor: style.borderColor,
+      borderLeftColor: style.borderColor,
+      borderRightColor: style.borderColor,
       borderRadius: style.borderRadius,
-      borderWidth: style.borderSize,
+      borderTopWidth: style.borderSize,
+      borderBottomWidth: style.borderSize,
+      borderLeftWidth: style.borderSize,
+      borderRightWidth: style.borderSize,
       borderStyle: style.borderStyle,
     },
     label: undefined,
@@ -140,6 +146,30 @@ const toListNode = (
   return node;
 };
 
+const adaptChildrenBorderNodes = (nodes: Node[], gqlChildrenNodes: GQLNode<GQLNodeStyle>[]): void => {
+  const childrenNodes = nodes.filter(
+    (child) =>
+      gqlChildrenNodes.map((gqlChild) => gqlChild.id).find((gqlChildId) => gqlChildId === child.id) !== undefined
+  );
+  console.log(childrenNodes);
+  childrenNodes.forEach((child, index) => {
+    // Hide children node borders to prevent a 'bold' aspect.
+    child.data.style = {
+      ...child.data.style,
+      borderTopColor: 'transparent',
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+    };
+
+    if (index === childrenNodes.length - 1) {
+      child.data.style = {
+        ...child.data.style,
+        borderBottomColor: 'transparent',
+      };
+    }
+  });
+};
+
 export class ListNodeConverterHandler implements INodeConverterHandler {
   canHandle(gqlNode: GQLNode<GQLNodeStyle>) {
     return gqlNode.style.__typename === 'RectangularNodeStyle' && gqlNode.childrenLayoutStrategy?.kind === 'List';
@@ -171,5 +201,6 @@ export class ListNodeConverterHandler implements INodeConverterHandler {
       nodes,
       nodeDescription?.childNodeDescriptions ?? []
     );
+    adaptChildrenBorderNodes(nodes, gqlNode.childNodes ?? []);
   }
 }
diff --git a/...rontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts b/...rontend/sirius-components-diagrams-reactflow/src/renderer/layout/ListNodeLayoutHandler.ts
@@ -115,21 +115,6 @@ export class ListNodeLayoutHandler implements INodeLayoutHandler<ListNodeData> {
     }
 
     directNodesChildren.forEach((child, index) => {
-      // Hide children node borders to prevent a 'bold' aspect.
-      child.data.style = {
-        ...child.data.style,
-        borderTop: 'transparent',
-        borderLeft: 'transparent',
-        borderRight: 'transparent',
-      };
-
-      if (index === directNodesChildren.length - 1) {
-        child.data.style = {
-          ...child.data.style,
-          borderBottom: 'transparent',
-        };
-      }
-
       child.position = {
         x: borderWidth,
         y: borderWidth + (withHeader ? labelElement?.getBoundingClientRect().height ?? 0 : 0),

diff --git a/...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx b/...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx
@@ -38,7 +38,10 @@ const listNodeStyle = (
     opacity: faded ? '0.4' : '',
     ...style,
     backgroundColor: getCSSColor(String(style.backgroundColor), theme),
-    borderColor: getCSSColor(String(style.borderColor), theme),
+    borderTopColor: getCSSColor(String(style.borderTopColor), theme),
+    borderBottomColor: getCSSColor(String(style.borderBottomColor), theme),
+    borderLeftColor: getCSSColor(String(style.borderLeftColor), theme),
+    borderRightColor: getCSSColor(String(style.borderRightColor), theme),
   };
   if (selected) {
     listNodeStyle.outline = `${theme.palette.primary.main} solid 1px`;