optional improving node positioning for nodes that have thumbs centered in the middle

Author: devhelpr

apps/vps-web/src/app/custom-nodes/mermaid.tsx

@@ -52,7 +52,12 @@ export const getMermaidNode =
     const computeAsync = (input: string, loopIndex?: number, payload?: any) => {
       return mermaidNode.compute(input, loopIndex, payload).then((result) => {
         if (rect && rect.resize) {
-          rect.resize(undefined, true, '.child-node-wrapper > *:first-child');
+          rect.resize(
+            undefined,
+            true,
+            '.child-node-wrapper > *:first-child',
+            true
+          );
         }
         return result;
       });
@@ -96,7 +101,8 @@ export const getMermaidNode =
               rect.resize(
                 undefined,
                 true,
-                '.child-node-wrapper > *:first-child'
+                '.child-node-wrapper > *:first-child',
+                true
               );
             }
           });
@@ -110,16 +116,17 @@ export const getMermaidNode =
             };
           }
         }
-        if (rect && rect.resize) {
-          rect.resize();
-        }
+        // if (rect && rect.resize) {
+        //   rect.resize(undefined, undefined, undefined, true);
+        // }
       },
       {
         category: 'Diagrams',
         hasStaticWidthHeight: true,
         hasCustomStyling: true,
         customClassName: 'mermaid-node',
         childNodeWrapperClass: 'child-node-wrapper',
+        centerToYPositionThumb: true,
       },
       <div class="child-instance"></div>,
       true

examples-test-flows/mermaid-diagram-node.json

@@ -8,10 +8,10 @@
       "nodes": [
         {
           "id": "2e7ca45f-a13e-4deb-8e8f-cae85b46b091",
-          "x": 3205.4072698505697,
-          "y": 1721.4742245852408,
-          "width": 199.96093174395054,
-          "height": 180.9296625777389,
+          "x": 3188.56323756902,
+          "y": 1720.6335735902078,
+          "width": 199.98447027747773,
+          "height": 180.94521385214784,
           "nodeType": "Shape",
           "nodeInfo": {
             "type": "mermaid-node",
@@ -44,8 +44,8 @@
           "id": "75229244-ebd1-411d-8c6d-aca0df473c9e",
           "x": 3072.38946876743,
           "y": 1810.9796798117168,
-          "endX": 3205.4072698505697,
-          "endY": 1811.9390558741102,
+          "endX": 3188.56323756902,
+          "endY": 1811.1061805162817,
           "startNodeId": "a1af55a9-cd5b-4675-a577-cfc8c57e1cf7",
           "endNodeId": "2e7ca45f-a13e-4deb-8e8f-cae85b46b091",
           "startThumbName": "output",

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

@@ -118,12 +118,7 @@ export interface IBaseFlow<T extends BaseNodeInfo> {
     text?: string,
     thumbs?: IThumb[],
     markup?: string | INodeComponent<T> | undefined,
-    layoutProperties?: {
-      classNames?: string;
-      autoSizeToContentIfNodeHasNoThumbs?: boolean;
-      hasCustomStyling?: boolean;
-      customClassName?: string;
-    },
+    layoutProperties?: LayoutProperties,
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
     disableManualResize?: boolean,

libs/visual-programming-system/src/components/rect-thumb.ts

@@ -13,6 +13,7 @@ import {
   IThumbNodeComponent,
   ThumbConnectionType,
 } from '../interfaces';
+import { LayoutProperties } from '../interfaces/layout-properties';
 import { Theme } from '../interfaces/theme';
 import { getSelectedNode } from '../reactivity';
 import { ConnectionControllerType, NodeType } from '../types';
@@ -45,10 +46,7 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
     text?: string,
     thumbs?: IThumb[],
     markup?: string | INodeComponent<T>,
-    layoutProperties?: {
-      classNames?: string;
-      hasCustomStyling?: boolean;
-    },
+    layoutProperties?: LayoutProperties,
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
     disableManualResize?: boolean,

libs/visual-programming-system/src/components/rect.ts

@@ -33,6 +33,7 @@ import { FlowChangeType } from '../interfaces';
 import { BaseNodeInfo } from '../types/base-node-info';
 import { getRectNodeCssClasses } from './css-classes/rect-css-classes';
 import { Theme } from '../interfaces/theme';
+import { LayoutProperties } from '../interfaces/layout-properties';
 
 export class Rect<T extends BaseNodeInfo> {
   public nodeComponent?: IRectNodeComponent<T>;
@@ -89,11 +90,7 @@ export class Rect<T extends BaseNodeInfo> {
     text?: string,
     thumbs?: IThumb[],
     markup?: string | INodeComponent<T> | HTMLElement,
-    layoutProperties?: {
-      classNames?: string;
-      autoSizeToContentIfNodeHasNoThumbs?: boolean;
-      hasCustomStyling?: boolean;
-    },
+    layoutProperties?: LayoutProperties,
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
     disableManualResize?: boolean,
@@ -121,6 +118,7 @@ export class Rect<T extends BaseNodeInfo> {
     this.rootElement = rootElement;
     this.theme = theme;
 
+    const oldHeight = height ?? 0;
     this.interactionStateMachine = interactionStateMachine;
     this.hasStaticWidthHeight = hasStaticWidthHeight;
 
@@ -305,15 +303,27 @@ export class Rect<T extends BaseNodeInfo> {
       hasStaticWidthHeight ?? false
     );
 
+    if (layoutProperties?.centerToYPositionThumb) {
+      this.nodeComponent.y =
+        this.nodeComponent.y +
+        (oldHeight ?? 0) / 2 -
+        (this.nodeComponent.height ?? 0) / 2;
+    } //paddingRect -
+
+    // if (centerToYPositionThumb) {
+    //   this.nodeComponent.y =
+    //     this.nodeComponent.y + (oldHeight ?? 0) / 2 - this.points.height / 2;
+    // }
+
     // WARNING! .. if this is not done, then thumb positioning is incoraddUpdateEventListenerafter loading flow
     //  for thumb-types EndConnecterCenter and StartConnectorCenter
     this.cachedWidth = -1;
     this.cachedHeight = -1;
 
     this.nodeComponent.update(
       this.nodeComponent,
-      startX,
-      startY,
+      this.nodeComponent.x,
+      this.nodeComponent.y,
       this.nodeComponent
     );
 
@@ -424,14 +434,16 @@ export class Rect<T extends BaseNodeInfo> {
   public resize(
     width?: number,
     overrideStaticWidthHeight?: boolean,
-    selectChildElemenSelectorAsReference?: string
+    selectChildElemenSelectorAsReference?: string,
+    centerToYPositionThumb?: boolean
   ) {
     if (
       (this.hasStaticWidthHeight && !overrideStaticWidthHeight) ||
       !this.nodeComponent
     ) {
       return;
     }
+    const oldHeight = this.nodeComponent.height;
     const { scale } = getCamera();
     if (this.nodeComponent.thumbConnectors) {
       let minHeightAdd = 0;
@@ -518,6 +530,11 @@ export class Rect<T extends BaseNodeInfo> {
       rectContainerDOMElement.style.width = `${this.nodeComponent.width}px`;
       rectContainerDOMElement.style.height = `${this.nodeComponent.height}px`;
     }
+
+    if (centerToYPositionThumb) {
+      this.nodeComponent.y =
+        this.nodeComponent.y + (oldHeight ?? 0) / 2 - this.points.height / 2;
+    }
     if (this.nodeComponent.update) {
       this.nodeComponent.update(
         this.nodeComponent,

libs/visual-programming-system/src/interfaces/layout-properties.ts

@@ -3,4 +3,5 @@ export interface LayoutProperties {
   autoSizeToContentIfNodeHasNoThumbs?: boolean;
   hasCustomStyling?: boolean;
   customClassName?: string;
+  centerToYPositionThumb?: boolean;
 }

libs/visual-programming-system/src/utils/create-rect-node.tsx

@@ -70,6 +70,7 @@ export interface NodeSettings {
   hasCustomStyling?: boolean;
   customClassName?: string;
   noFlexAutoInNodeContentWrapper?: boolean;
+  centerToYPositionThumb?: boolean;
 }
 
 export const createRectNode = <T extends BaseNodeInfo>(
@@ -394,6 +395,7 @@ export const createRectNode = <T extends BaseNodeInfo>(
           classNames: '',
           hasCustomStyling: settings?.hasCustomStyling ?? false,
           customClassName: settings?.customClassName,
+          centerToYPositionThumb: settings?.centerToYPositionThumb,
         },
         settings?.adjustToFormContent
           ? false
@@ -600,8 +602,12 @@ export const visualNodeFactory = <T extends BaseNodeInfo>(
         settings?.hasSettingsPopup ? [] : formElements,
         x,
         y,
-        width,
-        height,
+        settings?.hasStaticWidthHeight && settings?.centerToYPositionThumb
+          ? _width ?? width
+          : width,
+        settings?.hasStaticWidthHeight && settings?.centerToYPositionThumb
+          ? _height ?? height
+          : height,
         compute,
         initializeCompute,
         thumbs,