Merge branch 'master' into master.7687.ReplaceBy

src/Components/Viewer/Viewer.tsx

@@ -1,58 +1,54 @@
 import * as React from 'react';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
-import { IPoint } from '../../Interfaces/IPoint';
+import { type IContainerModel } from '../../Interfaces/IContainerModel';
+import { type IHistoryState } from '../../Interfaces/IHistoryState';
+import { type IPoint } from '../../Interfaces/IPoint';
 import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
 import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
 import { BAR_WIDTH } from '../Bar/Bar';
 import { Canvas } from '../Canvas/Canvas';
 import { AddDimensions } from '../Canvas/DimensionLayer';
 import { RenderSelector } from '../Canvas/Selector';
-import { SVG } from '../SVG/SVG';
+import { SelectorMode, SVG } from '../SVG/SVG';
 import { RenderSymbol } from '../Canvas/Symbol';
+import { useState } from 'react';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
 
 interface IViewerProps {
   className: string
-  isLeftSidebarOpen: boolean
-  isRightSidebarOpen: boolean
   current: IHistoryState
   selectedContainer: IContainerModel | undefined
   selectContainer: (containerId: string) => void
+  selectedSymbol: ISymbolModel | undefined
+  margin: number
+  isComponentsOpen: boolean
+  isSymbolsOpen: boolean
 }
 
-interface IViewer {
-  viewerWidth: number
-  viewerHeight: number
-}
-
-function OnResize(
-  isLeftSidebarOpen: boolean,
-  isRightSidebarOpen: boolean,
-  setViewer: React.Dispatch<React.SetStateAction<IViewer>>
-): void {
-  let marginSidebar = BAR_WIDTH;
-  if (isLeftSidebarOpen) {
-    marginSidebar += 256;
-  }
-  if (isRightSidebarOpen) {
-    marginSidebar += 256;
+export function Viewer({
+  className,
+  current,
+  selectedContainer,
+  selectContainer,
+  selectedSymbol,
+  margin,
+  isComponentsOpen,
+  isSymbolsOpen
+}: IViewerProps): JSX.Element {
+  function computeWidth(margin: number): number {
+    return window.innerWidth - (window.innerWidth < 768 ? BAR_WIDTH : margin);
   }
 
-  const margin = window.innerWidth < 768 ? BAR_WIDTH : marginSidebar;
-  setViewer({
-    viewerWidth: window.innerWidth - margin,
-    viewerHeight: window.innerHeight
-  });
-}
+  const [windowSize, setWindowSize] = useState([
+    computeWidth(margin),
+    window.innerHeight
+  ]);
 
-function UseSVGAutoResizerOnWindowResize(
-  isLeftSidebarOpen: boolean,
-  isRightSidebarOpen: boolean,
-  setViewer: React.Dispatch<React.SetStateAction<IViewer>>
-): void {
   React.useEffect(() => {
     function SVGAutoResizer(): void {
-      OnResize(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
+      setWindowSize([
+        computeWidth(margin),
+        window.innerHeight
+      ]);
     }
 
     window.addEventListener('resize', SVGAutoResizer);
@@ -61,42 +57,13 @@ function UseSVGAutoResizerOnWindowResize(
       window.removeEventListener('resize', SVGAutoResizer);
     };
   });
-}
 
-function UseSVGAutoResizerOnSidebar(
-  isLeftSidebarOpen: boolean,
-  isRightSidebarOpen: boolean,
-  setViewer: React.Dispatch<React.SetStateAction<IViewer>>
-): void {
   React.useEffect(() => {
-    OnResize(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
-  }, [isLeftSidebarOpen, isRightSidebarOpen, setViewer]);
-}
-
-export function Viewer({
-  className,
-  isLeftSidebarOpen, isRightSidebarOpen,
-  current,
-  selectedContainer,
-  selectContainer
-}: IViewerProps): JSX.Element {
-  let marginClasses = 'ml-16';
-  let marginSidebar = BAR_WIDTH;
-  if (isLeftSidebarOpen) {
-    marginClasses += ' md:ml-80';
-    marginSidebar += 256;
-  }
-
-  if (isRightSidebarOpen) {
-    marginClasses += ' md:mr-64';
-    marginSidebar += 256;
-  }
-
-  const margin = window.innerWidth < 768 ? BAR_WIDTH : marginSidebar;
-  const [viewer, setViewer] = React.useState<IViewer>({
-    viewerWidth: window.innerWidth - margin,
-    viewerHeight: window.innerHeight
-  });
+    setWindowSize([
+      computeWidth(margin),
+      window.innerHeight
+    ]);
+  }, [margin]);
 
   const mainContainer = FindContainerById(current.containers, current.mainContainer);
 
@@ -104,8 +71,12 @@ export function Viewer({
     return <></>;
   }
 
-  UseSVGAutoResizerOnWindowResize(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
-  UseSVGAutoResizerOnSidebar(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
+  let selectorMode = SelectorMode.Nothing;
+  if (isComponentsOpen) {
+    selectorMode = SelectorMode.Containers;
+  } else if (isSymbolsOpen) {
+    selectorMode = SelectorMode.Symbols;
+  }
 
   if (USE_EXPERIMENTAL_CANVAS_API) {
     function Draw(ctx: CanvasRenderingContext2D, frameCount: number, scale: number, translatePos: IPoint): void {
@@ -171,14 +142,16 @@ export function Viewer({
 
   return (
     <SVG
-      className={`${marginClasses} ${className}`}
-      viewerWidth={viewer.viewerWidth}
-      viewerHeight={viewer.viewerHeight}
+      className={className}
+      viewerWidth={windowSize[0]}
+      viewerHeight={windowSize[1]}
       width={mainContainer.properties.width}
       height={mainContainer.properties.height}
       containers={current.containers}
-      selected={selectedContainer}
+      selectedContainer={selectedContainer}
       symbols={current.symbols}
+      selectedSymbol={selectedSymbol}
+      selectorMode={selectorMode}
       selectContainer={selectContainer}
     >
       {mainContainer}
@@ -208,10 +181,11 @@ function RenderDimensions(
   currentTransform: [number, number]
 ): void {
   ctx.save();
-  const containerLeftDim = leftDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
-  const containerTopDim = topDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
-  const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
-  const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
+  const depthOffset = (DIMENSION_MARGIN * (depth + 1)) / scale;
+  const containerLeftDim = leftDim - depthOffset;
+  const containerTopDim = topDim - depthOffset;
+  const containerBottomDim = bottomDim + depthOffset;
+  const containerRightDim = rightDim + depthOffset;
   const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
   AddDimensions(ctx, containers, container, dimMapped, currentTransform, scale, depth);
   ctx.restore();