From c5171caaaa42cf2018a58009fe44cdc5738a73b9 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 22:38:55 +0200
Subject: [PATCH] Moved usage of Dimension directly inside the Container class
 and disable DimensionLayer

---
 src/Components/SVG/Elements/Container.tsx     | 24 ++++++++++++++++++-
 .../SVG/Elements/DimensionLayer.tsx           | 12 ++++++++++
 src/Components/SVG/SVG.tsx                    |  1 -
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index a3fd191..907b4af 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/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}
diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx
index a7708f8..601fedd 100644
--- a/src/Components/SVG/Elements/DimensionLayer.tsx
+++ b/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)) {
diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index dd5f568..6e0da86 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/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>
     );