Moved usage of Dimension directly inside the Container class and disable DimensionLayer

src/Components/SVG/Elements/Container.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Properties from '../../../Interfaces/Properties';
+import { Dimension } from './Dimension';
 
 interface IContainerProps {
   // eslint-disable-next-line no-use-before-define
@@ -10,6 +11,8 @@ interface IContainerProps {
   userData?: Record<string, string | number>
 }
 
+const GAP = 50;
+
 export class Container extends React.Component<IContainerProps> {
   componentWillUnMount() {
   }
@@ -59,18 +62,37 @@ export class Container extends React.Component<IContainerProps> {
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '150ms'
     } as React.CSSProperties;
-    const style = Object.assign(defaultStyle, this.props.properties);
+
+    const style = Object.assign(
+      JSON.parse(JSON.stringify(defaultStyle)),
+      this.props.properties
+    );
     style.x = 0;
     style.y = 0;
     delete style.height;
     delete style.width;
 
+    const id = `dim-${this.props.properties.id}`;
+    const xStart: number = 0;
+    const xEnd = Number(this.props.properties.width);
+    const y = -(GAP * (this.getDepth() + 1));
+    const strokeWidth = 1;
+    const text = (this.props.properties.width ?? 0).toString();
+
     return (
       <g
         style={defaultStyle}
         transform={`translate(${this.props.properties.x}, ${this.props.properties.y})`}
         key={`container-${this.props.properties.id}`}
       >
+        <Dimension
+          id={id}
+          xStart={xStart}
+          xEnd={xEnd}
+          y={y}
+          strokeWidth={strokeWidth}
+          text={text}
+        />
         <rect
           width={this.props.properties.width}
           height={this.props.properties.height}

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -35,6 +35,18 @@ const getDimensionsNodes = (root: Container): React.ReactNode[] => {
   return dimensions;
 };
 
+/**
+ * A layer containing all dimension
+ *
+ * @deprecated In order to avoid adding complexity
+ * with computing the position in a group hierarchy,
+ * use Dimension directly inside the Container,
+ * Currently it is glitched as
+ * it does not take parents into account,
+ * and will not work correctly
+ * @param props
+ * @returns
+ */
 export const DimensionLayer: React.FC<IDimensionLayerProps> = (props: IDimensionLayerProps) => {
   let dimensions: React.ReactNode[] = [];
   if (Array.isArray(props.roots)) {

src/Components/SVG/SVG.tsx

@@ -80,7 +80,6 @@ export class SVG extends React.Component<ISVGProps> {
       >
         <svg ref={this.svg} {...properties}>
           { children }
-          <DimensionLayer isHidden={false} roots={this.props.children} />
         </svg>
       </ReactSVGPanZoom>
     );