Merged PR 228: Implement left cotation and fix borrower cotation when length = 0

Implement left cotation and fix borrower cotation when length = 0

Related work items: #7575

src/Components/Canvas/DimensionLayer.ts

@@ -79,18 +79,20 @@ function ActionByPosition(
   dimMapped: number[],
   positions: Position[],
   horizontalAction: (ctx: CanvasRenderingContext2D, dim: number, ...params: any[]) => void,
-  verticalAction: (ctx: CanvasRenderingContext2D, dim: number, ...params: any[]) => void,
+  verticalAction: (ctx: CanvasRenderingContext2D, dim: number, isRight: boolean, ...params: any[]) => void,
   params: any[]
 ): void {
   positions.forEach((position: Position) => {
     const dim = dimMapped[position];
     switch (position) {
       case Position.Left:
-      case Position.Right:
+      case Position.Right: {
-        verticalAction(ctx, dim, ...params);
+        const isRight = position === Position.Right;
+        verticalAction(ctx, dim, isRight, ...params);
+      }
         break;
-      case Position.Down:
       case Position.Up:
+      case Position.Down:
         horizontalAction(ctx, dim, ...params);
         break;
     }
@@ -140,10 +142,10 @@ function AddHorizontalChildrenDimension(
   }
 
   const textChildren = (xChildrenEnd - xChildrenStart)
-    .toFixed(2)
+    .toFixed(0);
-    .toString();
 
   const offset = currentTransform[0] + container.properties.x;
+
   RenderDimension(ctx, {
     id: childrenId,
     xStart: xChildrenStart + offset,
@@ -159,6 +161,7 @@ function AddHorizontalChildrenDimension(
 function AddVerticalChildrenDimension(
   ctx: CanvasRenderingContext2D,
   xDim: number,
+  isRight: boolean,
   containers: Map<string, IContainerModel>,
   container: IContainerModel,
   currentTransform: [number, number],
@@ -174,7 +177,7 @@ function AddVerticalChildrenDimension(
   }
 
   let yChildrenStart = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
-  let yChildrenEnd = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
+  let yChildrenEnd = yChildrenStart;
 
   // Find the min and max
   for (let i = container.children.length - 2; i >= 0; i--) {
@@ -201,11 +204,14 @@ function AddVerticalChildrenDimension(
   }
 
   const textChildren = (yChildrenEnd - yChildrenStart)
-    .toFixed(2)
+    .toFixed(0);
-    .toString();
 
   const offset = currentTransform[0] + container.properties.x;
 
+  if (!isRight) {
+    [yChildrenStart, yChildrenEnd] = [yChildrenEnd, yChildrenStart];
+  }
+
   RenderDimension(ctx, {
     id: childrenId,
     xStart: xDim,
@@ -257,6 +263,11 @@ function AddHorizontalBorrowerDimension(
   let count = 0;
   for (const { cur, next } of Pairwise(marks)) {
     const id = `dim-y${yDim.toFixed(0)}-borrow-${container.properties.id}-{${count}}`;
+    const value = next - cur;
+    if (value === 0) {
+      return;
+    }
+
     RenderDimension(ctx, {
       id,
       xStart: cur,
@@ -264,7 +275,7 @@ function AddHorizontalBorrowerDimension(
       yStart: yDim,
       yEnd: yDim,
       strokeWidth: MODULE_STROKE_WIDTH,
-      text: (next - cur).toFixed(0).toString(),
+      text: value.toFixed(0),
       scale
     });
     count++;
@@ -274,6 +285,7 @@ function AddHorizontalBorrowerDimension(
 function AddVerticalBorrowerDimension(
   ctx: CanvasRenderingContext2D,
   xDim: number,
+  isRight: boolean,
   containers: Map<string, IContainerModel>,
   container: IContainerModel,
   depth: number,
@@ -307,9 +319,19 @@ function AddVerticalBorrowerDimension(
   marks.push(restoredY);
   marks.push(restoredY + container.properties.height);
   marks.sort((a, b) => a - b);
+
   let count = 0;
-  for (const { cur, next } of Pairwise(marks)) {
+  for (let { cur, next } of Pairwise(marks)) {
     const id = `dim-x${xDim.toFixed(0)}-borrow-${container.properties.id}-{${count}}`;
+    const value = next - cur;
+    if (value === 0) {
+      return;
+    }
+
+    if (!isRight) {
+      [cur, next] = [next, cur];
+    }
+
     RenderDimension(ctx, {
       id,
       xStart: xDim,
@@ -317,7 +339,7 @@ function AddVerticalBorrowerDimension(
       yStart: cur,
       yEnd: next,
       strokeWidth: MODULE_STROKE_WIDTH,
-      text: (next - cur).toFixed(0).toString(),
+      text: value.toFixed(0),
       scale
     });
     count++;
@@ -327,22 +349,28 @@ function AddVerticalBorrowerDimension(
 function AddVerticalSelfDimension(
   ctx: CanvasRenderingContext2D,
   xDim: number,
+  isRight: boolean,
   container: IContainerModel,
   currentTransform: [number, number],
   scale: number
 ): void {
   const height = container.properties.height;
   const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
-  const yStart = container.properties.y + currentTransform[1];
+  let yStart = container.properties.y + currentTransform[1] + height;
-  const yEnd = yStart + height;
+  let yEnd = container.properties.y + currentTransform[1];
   const textVert = height
     .toFixed(0)
     .toString();
+
+  if (isRight) {
+    [yStart, yEnd] = [yEnd, yStart];
+  }
+
   RenderDimension(ctx, {
     id: idVert,
     xStart: xDim,
-    yStart,
     xEnd: xDim,
+    yStart,
     yEnd,
     strokeWidth: MODULE_STROKE_WIDTH,
     text: textVert,

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -29,16 +29,18 @@ function ActionByPosition(
   dimMapped: number[],
   positions: Position[],
   horizontalAction: (dim: number, ...params: any[]) => void,
-  verticalAction: (dim: number, ...params: any[]) => void,
+  verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
   params: any[]
 ): void {
   positions.forEach((position: Position) => {
     const dim = dimMapped[position];
     switch (position) {
       case Position.Left:
-      case Position.Right:
+      case Position.Right: {
-        verticalAction(dim, ...params);
+        const isRight = position === Position.Right;
+        verticalAction(dim, isRight, ...params);
         break;
+      }
       case Position.Down:
       case Position.Up:
         horizontalAction(dim, ...params);
@@ -179,7 +181,7 @@ function AddHorizontalChildrenDimension(
   }
 
   const textChildren = (xChildrenEnd - xChildrenStart)
-    .toFixed(2)
+    .toFixed(0)
     .toString();
 
   const offset = currentTransform[0] + container.properties.x;
@@ -197,6 +199,7 @@ function AddHorizontalChildrenDimension(
 
 function AddVerticalChildrenDimension(
   xDim: number,
+  isRight: boolean,
   containers: Map<string, IContainerModel>,
   container: IContainerModel,
   currentTransform: [number, number],
@@ -240,10 +243,15 @@ function AddVerticalChildrenDimension(
   }
 
   const textChildren = (yChildrenEnd - yChildrenStart)
-    .toFixed(2)
+    .toFixed(0)
     .toString();
 
   const offset = currentTransform[0] + container.properties.x;
+
+  if (!isRight) {
+    [yChildrenStart, yChildrenEnd] = [yChildrenEnd, yChildrenStart];
+  }
+
   dimensions.push(<Dimension
     key={childrenId}
     id={childrenId}
@@ -296,6 +304,11 @@ function AddHorizontalBorrowerDimension(
   let count = 0;
   for (const { cur, next } of Pairwise(marks)) {
     const id = `dim-y${yDim.toFixed(0)}-borrow-${container.properties.id}-{${count}}`;
+    const value = next - cur;
+    if (value === 0) {
+      return;
+    }
+
     dimensions.push(<Dimension
       key={id}
       id={id}
@@ -304,7 +317,7 @@ function AddHorizontalBorrowerDimension(
       yStart={yDim}
       yEnd={yDim}
       strokeWidth={MODULE_STROKE_WIDTH}
-      text={(next - cur).toFixed(0).toString()}
+      text={value.toFixed(0)}
       scale={scale} />);
     count++;
   }
@@ -312,6 +325,7 @@ function AddHorizontalBorrowerDimension(
 
 function AddVerticalBorrowerDimension(
   xDim: number,
+  isRight: boolean,
   containers: Map<string, IContainerModel>,
   container: IContainerModel,
   depth: number,
@@ -346,9 +360,19 @@ function AddVerticalBorrowerDimension(
   marks.push(restoredY);
   marks.push(restoredY + container.properties.height);
   marks.sort((a, b) => a - b);
+
   let count = 0;
-  for (const { cur, next } of Pairwise(marks)) {
+  for (let { cur, next } of Pairwise(marks)) {
     const id = `dim-x${xDim.toFixed(0)}-borrow-${container.properties.id}-{${count}}`;
+    const value = next - cur;
+    if (value === 0) {
+      return;
+    }
+
+    if (!isRight) {
+      [cur, next] = [next, cur];
+    }
+
     dimensions.push(<Dimension
       key={id}
       id={id}
@@ -357,7 +381,7 @@ function AddVerticalBorrowerDimension(
       yStart={cur}
       yEnd={next}
       strokeWidth={MODULE_STROKE_WIDTH}
-      text={(next - cur).toFixed(0).toString()}
+      text={value.toFixed(0)}
       scale={scale} />);
     count++;
   }
@@ -365,6 +389,7 @@ function AddVerticalBorrowerDimension(
 
 function AddVerticalSelfDimension(
   xDim: number,
+  isRight: boolean,
   container: IContainerModel,
   currentTransform: [number, number],
   dimensions: React.ReactNode[],
@@ -372,11 +397,16 @@ function AddVerticalSelfDimension(
 ): void {
   const height = container.properties.height;
   const idVert = `dim-x${xDim.toFixed(0)}-${container.properties.id}`;
-  const yStart = container.properties.y + currentTransform[1];
+  let yStart = container.properties.y + currentTransform[1] + height;
-  const yEnd = yStart + height;
+  let yEnd = container.properties.y + currentTransform[1];
   const textVert = height
     .toFixed(0)
     .toString();
+
+  if (isRight) {
+    [yStart, yEnd] = [yEnd, yStart];
+  }
+
   dimensions.push(
     <Dimension
       key={idVert}