Canvas: Add symbol dimension + Clean Viewer

src/Components/Viewer/Viewer.tsx

@@ -10,7 +10,8 @@ import { RenderSelector } from '../Canvas/Selector';
 import { SelectorMode, SVG } from '../SVG/SVG';
 import { useState } from 'react';
 import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { RenderContainers, RenderDimensions, RenderSymbols } from '../Canvas/Renderer';
+import { RenderContainers, RenderContainerDimensions, RenderSymbols } from '../Canvas/Renderer';
+import { RenderContainer } from '../Canvas/Container';
 
 interface IViewerProps {
   className: string
@@ -78,7 +79,12 @@ export function Viewer({
   }
 
   if (USE_EXPERIMENTAL_CANVAS_API) {
-    function Draw(ctx: CanvasRenderingContext2D, frameCount: number, scale: number, translatePos: IPoint): void {
+    function Draw(
+      ctx: CanvasRenderingContext2D,
+      frameCount: number,
+      scale: number,
+      translatePos: IPoint
+    ): void {
       if (mainContainer === undefined) {
         return;
       }
@@ -93,30 +99,12 @@ export function Viewer({
       ctx.setTransform(scale, 0, 0, scale, translatePos.x, translatePos.y);
       ctx.fillStyle = '#000000';
 
-      const it = MakeRecursionDFSIterator(mainContainer, current.containers, 0, [0, 0]);
-      for (const { container, depth, currentTransform } of it) {
-        const [x, y] = [
-          container.properties.x + currentTransform[0],
-          container.properties.y + currentTransform[1]
-        ];
-
-        // Draw container
-        RenderContainers(ctx, container, x, y);
-
-        // Draw dimensions
-        RenderDimensions(
-          ctx,
-          leftDim,
-          bottomDim,
-          topDim,
-          rightDim,
-          depth,
-          scale,
-          current.containers,
-          container,
-          currentTransform
-        );
-      }
+      // Draw containers and symbol dimensions
+      RenderContainers(
+        ctx,
+        mainContainer,
+        current.containers,
+        leftDim, bottomDim, topDim, rightDim, scale);
 
       // Draw selector
       RenderSelector(ctx, frameCount, {
@@ -124,8 +112,8 @@ export function Viewer({
         scale,
         selected: selectedContainer
       });
-      // Draw symbols
-      RenderSymbols(current, ctx, scale);
+      // Draw symbols and symbol dimensions
+      RenderSymbols(ctx, current, scale);
       ctx.restore();
     }
     return (