From c54e9ff3cb43f45eac8fa510e036ea2f9abd67ea Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 00:02:41 +0200
Subject: [PATCH] Implement dimension

---
 src/Components/SVG/Elements/Dimension.tsx     | 52 +++++++++++++++++++
 .../SVG/Elements/DimensionLayer.tsx           | 52 +++++++++++++++++++
 src/Components/SVG/SVG.tsx                    |  2 +
 3 files changed, 106 insertions(+)
 create mode 100644 src/Components/SVG/Elements/Dimension.tsx
 create mode 100644 src/Components/SVG/Elements/DimensionLayer.tsx

diff --git a/src/Components/SVG/Elements/Dimension.tsx b/src/Components/SVG/Elements/Dimension.tsx
new file mode 100644
index 0000000..276345f
--- /dev/null
+++ b/src/Components/SVG/Elements/Dimension.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+interface IDimensionProps {
+  id: string;
+  xStart: number;
+  xEnd: number;
+  y: number;
+  text: string;
+  strokeWidth: number;
+}
+
+export class Dimension extends React.Component<IDimensionProps> {
+  public render() {
+    const style = {
+      stroke: 'black'
+    } as React.CSSProperties;
+    return (
+      <g key={this.props.id}>
+        <line
+          x1={this.props.xStart}
+          y1={this.props.y - 4 * this.props.strokeWidth}
+          x2={this.props.xStart}
+          y2={this.props.y + 4 * this.props.strokeWidth}
+          strokeWidth={this.props.strokeWidth}
+          style={style}
+        />
+        <line
+          x1={this.props.xStart}
+          y1={this.props.y}
+          x2={this.props.xEnd}
+          y2={this.props.y}
+          strokeWidth={this.props.strokeWidth}
+          style={style}
+        />
+        <line
+          x1={this.props.xEnd}
+          y1={this.props.y - 4 * this.props.strokeWidth}
+          x2={this.props.xEnd}
+          y2={this.props.y + 4 * this.props.strokeWidth}
+          strokeWidth={this.props.strokeWidth}
+          style={style}
+        />
+        <text
+          x={(this.props.xStart + this.props.xEnd) / 2}
+          y={this.props.y}
+        >
+          {this.props.text}
+        </text>
+      </g>
+    );
+  }
+}
diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx
new file mode 100644
index 0000000..a7708f8
--- /dev/null
+++ b/src/Components/SVG/Elements/DimensionLayer.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Container } from './Container';
+import { Dimension } from './Dimension';
+
+interface IDimensionLayerProps {
+  isHidden: boolean,
+  roots: Container | Container[] | null,
+}
+
+const GAP: number = 50;
+
+const getDimensionsNodes = (root: Container): React.ReactNode[] => {
+  const it = root.MakeIterator();
+  const dimensions: React.ReactNode[] = [];
+  for (const container of it) {
+    // WARN: this might be dangerous later when using other units/rules
+    const width = Number(container.props.properties.width);
+
+    const id = `dim-${container.props.properties.id}`;
+    const xStart: number = container.props.properties.x;
+    const xEnd = xStart + width;
+    const y = -(GAP * (container.getDepth() + 1));
+    const strokeWidth = 1;
+    const text = width.toString();
+    const dimension = new Dimension({
+      id,
+      xStart,
+      xEnd,
+      y,
+      strokeWidth,
+      text
+    });
+    dimensions.push(dimension.render());
+  }
+  return dimensions;
+};
+
+export const DimensionLayer: React.FC<IDimensionLayerProps> = (props: IDimensionLayerProps) => {
+  let dimensions: React.ReactNode[] = [];
+  if (Array.isArray(props.roots)) {
+    props.roots.forEach(child => {
+      dimensions.concat(getDimensionsNodes(child));
+    });
+  } else if (props.roots !== null) {
+    dimensions = getDimensionsNodes(props.roots);
+  }
+  return (
+    <g visibility={props.isHidden ? 'hidden' : 'visible'}>
+      { dimensions }
+    </g>
+  );
+};
diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index 4555da2..dd5f568 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
+import { DimensionLayer } from './Elements/DimensionLayer';
 
 interface ISVGProps {
   children: Container | Container[] | null,
@@ -79,6 +80,7 @@ export class SVG extends React.Component<ISVGProps> {
       >
         <svg ref={this.svg} {...properties}>
           { children }
+          <DimensionLayer isHidden={false} roots={this.props.children} />
         </svg>
       </ReactSVGPanZoom>
     );