wip: (hardcode) when node-type sidebar is active have better centering of canvas

Author: devhelpr

libs/app-canvas/src/app/app.element.tsx

@@ -56,6 +56,7 @@ import {
   showHTMLElement,
 } from './utils/show-hide-element';
 import { createInputDialog } from './utils/create-input-dialog';
+import { APPFlowOptions } from './interfaces/app-flow-options';
 
 export class AppElement<T extends BaseNodeInfo> {
   public static observedAttributes = [];
@@ -105,7 +106,8 @@ export class AppElement<T extends BaseNodeInfo> {
     _isReadOnly?: boolean,
     heightSpaceForHeaderFooterToolbars?: number,
     widthSpaceForSideToobars?: number,
-    getNodeTaskFactory?: GetNodeTaskFactory<T>
+    getNodeTaskFactory?: GetNodeTaskFactory<T>,
+    options?: APPFlowOptions
   ) {
     // NOTE : on http instead of https, crypto is not available...
     // so uuid's cannot be created and the app will not work
@@ -157,7 +159,11 @@ export class AppElement<T extends BaseNodeInfo> {
       undefined,
       undefined,
       undefined,
-      getNodeTaskFactory
+      getNodeTaskFactory,
+      {
+        hasNodeTypeSideBar: options?.hasNodeTypeSideBar,
+        nodeTypeSideBarSelector: options?.nodeTypeSideBarSelector,
+      }
     );
     this.canvas = canvasApp.canvas;
     this.canvasApp = canvasApp;

libs/app-canvas/src/app/flow-app.element.tsx

@@ -272,7 +272,11 @@ export class FlowAppElement extends AppElement<NodeInfo> {
       isReadOnly,
       heightSpaceForHeaderFooterToolbars,
       widthSpaceForSideToobars,
-      getNodeTaskFactory
+      getNodeTaskFactory,
+      {
+        hasNodeTypeSideBar: true,
+        nodeTypeSideBarSelector: '.taskbar-container',
+      }
     );
     if (!this.rootElement) {
       return;

libs/app-canvas/src/app/interfaces/app-flow-options.ts

@@ -0,0 +1,4 @@
+export interface APPFlowOptions {
+  hasNodeTypeSideBar?: boolean;
+  nodeTypeSideBarSelector?: string;
+}

libs/visual-programming-system/src/canvas-app/base-flow.ts

@@ -33,6 +33,10 @@ export interface IBaseFlow<T extends BaseNodeInfo> {
   isContextOnly: boolean;
   isComposition: boolean;
   theme: Theme;
+
+  hasNodeTypeSideBar?: boolean;
+  nodeTypeSideBarSelector?: string;
+
   setOnAddcomposition: (
     _onAddComposition: (
       composition: Composition<T>,

libs/visual-programming-system/src/canvas-app/index.ts

@@ -48,6 +48,7 @@ import { IFlowCanvasBase } from './flow-canvas';
 import { FlowCore } from './flow-core';
 import { GetNodeTaskFactory } from '../interfaces/node-task-registry';
 import { LayoutProperties } from '../interfaces/layout-properties';
+import { FlowCanvasOptions } from '../interfaces/flow-canvas';
 
 export const createFlowCanvas = <T extends BaseNodeInfo>(
   rootElement: HTMLElement,
@@ -71,7 +72,8 @@ export const createFlowCanvas = <T extends BaseNodeInfo>(
     isCancelling: boolean
   ) => void,
   rootFlowCanvas?: IFlowCanvasBase<T>,
-  getNodeTaskFactory?: GetNodeTaskFactory<T>
+  getNodeTaskFactory?: GetNodeTaskFactory<T>,
+  options?: FlowCanvasOptions
 ): IFlowCanvasBase<T> => {
   return new FlowCanvas(
     rootElement,
@@ -88,7 +90,8 @@ export const createFlowCanvas = <T extends BaseNodeInfo>(
     onDroppedOnNode,
     onDraggingOverNode,
     rootFlowCanvas,
-    getNodeTaskFactory
+    getNodeTaskFactory,
+    options
   );
 };
 
@@ -107,6 +110,9 @@ export class FlowCanvas<T extends BaseNodeInfo>
   public isContextOnly = false;
   public isComposition = false;
 
+  public hasNodeTypeSideBar?: boolean;
+  public nodeTypeSideBarSelector?: string;
+
   private rectInstanceList: Record<string, Rect<T>>;
   private CanvasClickEvent: Event;
   private animationFunctions: undefined | AnimatePathFunctions<T>;
@@ -179,6 +185,7 @@ export class FlowCanvas<T extends BaseNodeInfo>
     | undefined;
 
   private rootFlowCanvas: IFlowCanvasBase<T> | undefined;
+
   public getRootFlowCanvas = () => this.rootFlowCanvas;
   constructor(
     rootElement: HTMLElement,
@@ -202,7 +209,8 @@ export class FlowCanvas<T extends BaseNodeInfo>
       isCancelling: boolean
     ) => void,
     rootFlowCanvas?: IFlowCanvasBase<T>,
-    getNodeTaskFactory?: GetNodeTaskFactory<T>
+    getNodeTaskFactory?: GetNodeTaskFactory<T>,
+    options?: FlowCanvasOptions
   ) {
     super();
     this.rootFlowCanvas = rootFlowCanvas;
@@ -212,6 +220,9 @@ export class FlowCanvas<T extends BaseNodeInfo>
       heightSpaceForHeaderFooterToolbars;
     this.widthSpaceForSideToobars = widthSpaceForSideToobars;
 
+    this.hasNodeTypeSideBar = options?.hasNodeTypeSideBar;
+    this.nodeTypeSideBarSelector = options?.nodeTypeSideBarSelector;
+
     this.rootElement = rootElement;
     this.theme = customTheme ?? standardTheme;
     this.interactionStateMachine =
@@ -1193,8 +1204,11 @@ export class FlowCanvas<T extends BaseNodeInfo>
       const helperScale = rootWidth / helperWidth;
       const helperHeight = maxY - minY;
       const helperScaleHeight = rootHeight / helperHeight;
-
-      const width = maxX - minX + 120 / helperScale;
+      let offsetNodesidebar = 0;
+      if (this.hasNodeTypeSideBar) {
+        offsetNodesidebar = 280;
+      }
+      const width = maxX - minX + (120 + offsetNodesidebar) / helperScale;
       const height = maxY - minY + 240 / helperScaleHeight;
 
       let scale = rootWidth / width;
@@ -1242,11 +1256,16 @@ export class FlowCanvas<T extends BaseNodeInfo>
         this.heightSpaceForHeaderFooterToolbars ?? 0
       ); // 100; //-150 //-boundingBox.y; // -500; //boundingBox.y;
 
+      let xOffsetNodesidebar = 0;
+      if (this.hasNodeTypeSideBar) {
+        xOffsetNodesidebar = 200;
+      }
       this.xCamera =
         rootWidth / 2 -
         (scale * width) / 2 -
         scale * (minX + (-60 + 60) / helperScale) -
-        boudingBoxCorrectionX;
+        boudingBoxCorrectionX +
+        xOffsetNodesidebar;
       this.yCamera =
         rootHeight / 2 -
         (scale * height) / 2 -

libs/visual-programming-system/src/index.ts

@@ -61,3 +61,4 @@ export * from './canvas-app/composition-runtime-flow-context';
 export * from './interfaces/run-counter';
 export * from './utils/pointer-pos';
 export * from './components/events/pointer-events';
+export * from './interfaces/layout-properties';

libs/visual-programming-system/src/interfaces/flow-canvas.ts

@@ -0,0 +1,4 @@
+export interface FlowCanvasOptions {
+  hasNodeTypeSideBar?: boolean;
+  nodeTypeSideBarSelector?: string;
+}