Merged PR 315: ErgonomieTreeView

Affichage fonctionnelle sous forme de toolbar vertical, comme dans les IDE

Related work items: #7976

src/Components/Viewer/Viewer.tsx

@@ -10,48 +10,38 @@ import { AddDimensions } from '../Canvas/DimensionLayer';
 import { RenderSelector } from '../Canvas/Selector';
 import { SVG } from '../SVG/SVG';
 import { RenderSymbol } from '../Canvas/Symbol';
+import { useState } from 'react';
 
 interface IViewerProps {
-  isLeftSidebarOpen: boolean
-  isRightSidebarOpen: boolean
+  className?: string
   current: IHistoryState
   selectedContainer: IContainerModel | undefined
   selectContainer: (containerId: string) => void
+  margin: number
 }
 
-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,
+  margin
+}: 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);
@@ -60,41 +50,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({
-  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);
 
@@ -102,9 +64,6 @@ export function Viewer({
     return <></>;
   }
 
-  UseSVGAutoResizerOnWindowResize(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
-  UseSVGAutoResizerOnSidebar(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
-
   if (USE_EXPERIMENTAL_CANVAS_API) {
     function Draw(ctx: CanvasRenderingContext2D, frameCount: number, scale: number, translatePos: IPoint): void {
       if (mainContainer === undefined) {
@@ -169,9 +128,9 @@ export function Viewer({
 
   return (
     <SVG
-      className={marginClasses}
-      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}
@@ -179,6 +138,7 @@ export function Viewer({
       symbols={current.symbols}
       selectContainer={selectContainer}
     >
+
       {mainContainer}
     </SVG>
   );
@@ -206,10 +166,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();