position gl camera via new cameramodifiers

Author: devhelpr

apps/vps-web/src/main.tsx

@@ -126,7 +126,12 @@ if (url.pathname === '/run-flow') {
   examplePage();
 } else if (url.pathname === '/gl') {
   import('./app/gl-app.element').then((module) => {
-    new module.GLAppElement('#app-root');
+    new module.GLAppElement('#app-root', undefined, undefined, undefined, {
+      xOffset: 20,
+      yOffset: 20,
+      widthSubtract: 40,
+      heightSubtract: 40,
+    });
   });
 } else if (url.pathname === '/ocwg' || url.pathname === '/ocif') {
   ocwgPage();

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

@@ -163,6 +163,7 @@ export class AppElement<T extends BaseNodeInfo, TFlowEngine = unknown> {
       {
         hasNodeTypeSideBar: options?.hasNodeTypeSideBar,
         nodeTypeSideBarSelector: options?.nodeTypeSideBarSelector,
+        cameraModifiers: options?.cameraModifiers,
       }
     );
     this.canvas = canvasApp.canvas;

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

@@ -104,6 +104,7 @@ import { exportTldraw } from './exporters/export-tldraw';
 import { downloadFile } from './utils/create-download-link';
 import { StorageProvider } from './storage/StorageProvider';
 import { mandelbrotFlow } from './default-flows/mandelbrot-flow';
+import { CameraModifiers } from './interfaces/app-flow-options';
 
 const defaultGLFlowId = 'gl';
 
@@ -154,7 +155,8 @@ export class GLAppElement extends AppElement<GLNodeInfo> {
     appRootSelector: string,
     storageProvider?: StorageProvider<GLNodeInfo>,
     heightSpaceForHeaderFooterToolbars?: number,
-    widthSpaceForSideToobars?: number
+    widthSpaceForSideToobars?: number,
+    cameraModifiers?: CameraModifiers
   ) {
     const template = document.createElement('template');
     template.innerHTML = `<div>
@@ -171,7 +173,10 @@ export class GLAppElement extends AppElement<GLNodeInfo> {
       undefined,
       heightSpaceForHeaderFooterToolbars,
       widthSpaceForSideToobars,
-      getGLNodeTaskFactory
+      getGLNodeTaskFactory,
+      {
+        cameraModifiers: cameraModifiers,
+      }
     );
 
     if (!this.rootElement) {

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

@@ -1,4 +1,12 @@
 export interface APPFlowOptions {
   hasNodeTypeSideBar?: boolean;
   nodeTypeSideBarSelector?: string;
+  cameraModifiers?: CameraModifiers;
+}
+
+export interface CameraModifiers {
+  xOffset: number;
+  yOffset: number;
+  widthSubtract?: number;
+  heightSubtract?: number;
 }

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

@@ -189,7 +189,12 @@ export class FlowCanvas<T extends BaseNodeInfo, TFlowEngine = unknown>
   public getRootFlowCanvas = () => this.rootFlowCanvas;
 
   private canvasAttributes: Map<string, string> = new Map();
-
+  private cameraModifiers?: {
+    xOffset: number;
+    yOffset: number;
+    widthSubtract?: number;
+    heightSubtract?: number;
+  } = undefined;
   constructor(
     rootElement: HTMLElement,
     disableInteraction?: boolean,
@@ -219,6 +224,7 @@ export class FlowCanvas<T extends BaseNodeInfo, TFlowEngine = unknown>
     this.rootFlowCanvas = rootFlowCanvas;
     this.isNodeContainer = isNodeContainer ?? false;
     this.disableInteraction = disableInteraction ?? false;
+    this.cameraModifiers = options?.cameraModifiers;
 
     this.heightSpaceForHeaderFooterToolbars =
       heightSpaceForHeaderFooterToolbars;
@@ -1301,8 +1307,12 @@ export class FlowCanvas<T extends BaseNodeInfo, TFlowEngine = unknown>
       if (this.hasNodeTypeSideBar) {
         offsetNodesidebar = 280;
       }
-      const width = maxX - minX + (120 + offsetNodesidebar) / helperScale;
-      const height = maxY - minY + 240 / helperScaleHeight;
+      const widhtModifier = this.cameraModifiers?.widthSubtract ?? 120;
+      const heightModifier = this.cameraModifiers?.heightSubtract ?? 240;
+
+      const width =
+        maxX - minX + (widhtModifier + offsetNodesidebar) / helperScale;
+      const height = maxY - minY + heightModifier / helperScaleHeight;
 
       let scale = rootWidth / width;
       const scaleX = scale;
@@ -1344,9 +1354,15 @@ export class FlowCanvas<T extends BaseNodeInfo, TFlowEngine = unknown>
       // const boudingBoxCorrectionY =
       //   -boundingBox.y - (heightSpaceForHeaderFooterToolbars ?? 0); // 100; //-150 //-boundingBox.y; // -500; //boundingBox.y;
 
-      const boudingBoxCorrectionX = -(this.widthSpaceForSideToobars ?? 0); // 32; //-230; //-boundingBox.x; // 400; //;
+      const boudingBoxCorrectionX = -(
+        this.widthSpaceForSideToobars ??
+        this.cameraModifiers?.xOffset ??
+        0
+      ); // 32; //-230; //-boundingBox.x; // 400; //;
       const boudingBoxCorrectionY = -(
-        this.heightSpaceForHeaderFooterToolbars ?? 0
+        this.heightSpaceForHeaderFooterToolbars ??
+        this.cameraModifiers?.yOffset ??
+        0
       ); // 100; //-150 //-boundingBox.y; // -500; //boundingBox.y;
 
       let xOffsetNodesidebar = 0;

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

@@ -1,4 +1,10 @@
 export interface FlowCanvasOptions {
   hasNodeTypeSideBar?: boolean;
   nodeTypeSideBarSelector?: string;
+  cameraModifiers?: {
+    xOffset: number;
+    yOffset: number;
+    widthSubtract?: number;
+    heightSubtract?: number;
+  };
 }