Implement borrower dimension

src/Components/SVG/Elements/Container.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Interweave, Node } from 'interweave';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION, SHOW_TEXT } from '../../../utils/default';
-import { GetDepth } from '../../../utils/itertools';
+import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS, SHOW_TEXT } from '../../../utils/default';
+import { CancelParentTransform, GetDepth, MakeIterator, Pairwise } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 import { IContainerProperties } from '../../../Interfaces/IContainerProperties';
-import { TransformX } from '../../../utils/svg';
+import { RestoreX, TransformX } from '../../../utils/svg';
 import { Camelize } from '../../../utils/stringtools';
 
 interface IContainerProps {
@@ -61,12 +61,12 @@ export function Container(props: IContainerProps): JSX.Element {
   const strokeWidth = 1;
   const text = (width ?? 0).toString();
 
-  let dimensionChildren: JSX.Element | null = null;
-  if (props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) {
+  let childrenDimensions: JSX.Element | null = null;
+  if (props.model.properties.showChildrenDimensions && props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) {
     const {
       childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren
     } = GetChildrenDimensionProps(props, dimensionMargin);
-    dimensionChildren = <Dimension
+    childrenDimensions = <Dimension
       id={childrenId}
       xStart={xChildrenStart}
       xEnd={xChildrenEnd}
@@ -76,13 +76,51 @@ export function Container(props: IContainerProps): JSX.Element {
       text={textChildren} />;
   }
 
+  const borrowerDimensions: JSX.Element[] = [];
+  if (props.model.properties.isDimensionBorrower && SHOW_BORROWER_DIMENSIONS) {
+    const it = MakeIterator(props.model);
+    const marks = [];
+    for (const container of it) {
+      if (!container.properties.markPositionToDimensionBorrower) {
+        continue;
+      }
+
+      const x = TransformX(
+        container.properties.x,
+        container.properties.width,
+        container.properties.xPositionReference
+      );
+      const [restoredX] = CancelParentTransform(container.parent, x, 0, props.model);
+      marks.push(
+        restoredX
+      );
+    }
+    marks.push(0);
+    marks.push(props.model.properties.width);
+    marks.sort((a, b) => a - b);
+    let count = 0;
+    for (const { cur, next } of Pairwise(marks)) {
+      const id = `dim-borrow-${props.model.properties.id}-{${count}}`;
+      borrowerDimensions.push(<Dimension
+        key={id}
+        id={id}
+        xStart={cur}
+        xEnd={next}
+        yStart={props.model.properties.height + yDim * -1}
+        yEnd={props.model.properties.height + yDim * -1}
+        strokeWidth={strokeWidth}
+        text={(next - cur).toString()} />);
+      count++;
+    }
+  }
+
   return (
     <g
       style={defaultStyle}
       transform={transform}
       key={`container-${props.model.properties.id}`}
     >
-      {SHOW_PARENT_DIMENSION
+      {(props.model.properties.showSelfDimensions && SHOW_SELF_DIMENSIONS)
         ? <Dimension
           id={id}
           xStart={xStart}
@@ -92,7 +130,8 @@ export function Container(props: IContainerProps): JSX.Element {
           strokeWidth={strokeWidth}
           text={text} />
         : null}
-      {dimensionChildren}
+      {childrenDimensions}
+      {borrowerDimensions}
       {svg}
       {SHOW_TEXT
         ? <text