more customisable nodes via custom classname

Author: devhelpr

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

@@ -4,6 +4,7 @@ import {
   IComputeResult,
   InitialValues,
   NodeTask,
+  Rect,
   ThumbConnectionType,
   ThumbType,
   visualNodeFactory,
@@ -22,7 +23,7 @@ const MermaidImage = ({
 
   return (
     <div
-      className="mermaid"
+      class="mermaid w-min h-min p-4 border-4 border-slate-400 border-solid rounded"
       getElement={(element: HTMLElement) => {
         render(element);
       }}
@@ -60,7 +61,7 @@ export const getMermaidNode =
   // (): NodeTaskFactory<NodeInfo> =>
   (_updated: () => void): NodeTask<NodeInfo> => {
     //let node: IRectNodeComponent<NodeInfo>;
-    ///let rect: Rect<NodeInfo> | undefined;
+    let rect: Rect<NodeInfo> | undefined;
 
     let nodeRenderElement: HTMLElement | undefined = undefined;
     const initializeCompute = () => {
@@ -83,6 +84,9 @@ export const getMermaidNode =
               if (nodeRenderElement) {
                 nodeRenderElement.innerHTML = renderResult.svg;
               }
+              if (rect && rect.resize) {
+                rect.resize(undefined, true, '.mermaid');
+              }
               resolve({
                 result: input,
                 output: input,
@@ -102,6 +106,12 @@ export const getMermaidNode =
     };
     const onRender = (element: HTMLElement) => {
       nodeRenderElement = element;
+      const resizeObserver = new ResizeObserver(() => {
+        if (rect && rect.resize) {
+          rect.resize(undefined, true, '.mermaid');
+        }
+      });
+      resizeObserver.observe(element);
     };
     return visualNodeFactory(
       mermaidNodeName,
@@ -117,14 +127,18 @@ export const getMermaidNode =
       (_values?: InitialValues): FormField[] => {
         return [];
       },
-      (_nodeInstance) => {
-        //rect = nodeInstance.rect;
+      (nodeInstance) => {
+        rect = nodeInstance.rect;
         //node = nodeInstance.node as IRectNodeComponent<NodeInfo>;
-        //rect?.resize();
+        if (rect && rect.resize) {
+          rect.resize();
+        }
       },
       {
         category: 'Diagrams',
         hasStaticWidthHeight: true,
+        hasCustomStyling: true,
+        customClassName: 'mermaid-node',
       },
       <MermaidImage render={onRender} />,
       true

apps/vps-web/src/styles.css

@@ -783,3 +783,7 @@ html:active-view-transition-type(normal) {
 #breadcrumbs:not(.hidden) ~ .taskbar-container {
   @apply top-[116px] max-h-[calc(100vh-166px)];
 }
+
+.mermaid-node .inner-node {
+  @apply bg-white text-black;
+}

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

@@ -21,6 +21,7 @@ import {
 import { Composition } from '../interfaces/composition';
 import { Theme } from '../interfaces/theme';
 import { BaseNodeInfo } from '../types/base-node-info';
+import { LayoutProperties } from '../interfaces/layout-properties';
 
 export interface IBaseFlow<T extends BaseNodeInfo> {
   elements: ElementNodeMap<T>;
@@ -98,10 +99,7 @@ export interface IBaseFlow<T extends BaseNodeInfo> {
     text?: string,
     thumbs?: IThumb[],
     markup?: string | INodeComponent<T> | HTMLElement,
-    layoutProperties?: {
-      classNames?: string;
-      autoSizeToContentIfNodeHasNoThumbs?: boolean;
-    },
+    layoutProperties?: LayoutProperties,
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
     disableManualResize?: boolean,
@@ -123,6 +121,8 @@ export interface IBaseFlow<T extends BaseNodeInfo> {
     layoutProperties?: {
       classNames?: string;
       autoSizeToContentIfNodeHasNoThumbs?: boolean;
+      hasCustomStyling?: boolean;
+      customClassName?: string;
     },
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,

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

@@ -47,6 +47,7 @@ import { getCanvasAppCssClasses } from './css-classes/canvasapp-css-classes';
 import { IFlowCanvasBase } from './flow-canvas';
 import { FlowCore } from './flow-core';
 import { GetNodeTaskFactory } from '../interfaces/node-task-registry';
+import { LayoutProperties } from '../interfaces/layout-properties';
 
 export const createFlowCanvas = <T extends BaseNodeInfo>(
   rootElement: HTMLElement,
@@ -1310,10 +1311,7 @@ export class FlowCanvas<T extends BaseNodeInfo>
     text?: string,
     thumbs?: IThumb[],
     markup?: string | INodeComponent<T> | HTMLElement,
-    layoutProperties?: {
-      classNames?: string;
-      autoSizeToContentIfNodeHasNoThumbs?: boolean;
-    },
+    layoutProperties?: LayoutProperties,
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
     disableManualResize?: boolean,
@@ -1347,7 +1345,8 @@ export class FlowCanvas<T extends BaseNodeInfo>
       parentNodeClassNames,
       this.onCanvasAction,
       this.rootElement,
-      this.theme
+      this.theme,
+      layoutProperties?.customClassName
     );
     if (!rectInstance || !rectInstance.nodeComponent) {
       throw new Error('rectInstance is undefined');
@@ -1368,10 +1367,7 @@ export class FlowCanvas<T extends BaseNodeInfo>
     text?: string,
     thumbs?: IThumb[],
     markup?: string | INodeComponent<T>,
-    layoutProperties?: {
-      classNames?: string;
-      autoSizeToContentIfNodeHasNoThumbs?: boolean;
-    },
+    layoutProperties?: LayoutProperties,
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
     disableManualResize?: boolean,
@@ -1407,7 +1403,8 @@ export class FlowCanvas<T extends BaseNodeInfo>
       createStraightLineConnection,
       this.onCanvasAction,
       this.rootElement,
-      this.theme
+      this.theme,
+      layoutProperties?.customClassName
     );
     if (!rectInstance || !rectInstance.nodeComponent) {
       throw new Error('rectInstance is undefined');

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

@@ -47,6 +47,7 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
     markup?: string | INodeComponent<T>,
     layoutProperties?: {
       classNames?: string;
+      hasCustomStyling?: boolean;
     },
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
@@ -59,7 +60,8 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
     createStraightLineConnection?: boolean,
     setCanvasAction?: (canvasAction: CanvasAction, payload?: any) => void,
     rootElement?: HTMLElement,
-    theme?: Theme
+    theme?: Theme,
+    customClassName?: string
   ) {
     super(
       canvas,
@@ -85,7 +87,8 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
       getRectNodeCssClasses().defaultRectThumbClasses,
       setCanvasAction,
       rootElement,
-      theme
+      theme,
+      customClassName
     );
     if (!this.nodeComponent) {
       throw new Error('nodeComponent not created');

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

@@ -92,6 +92,7 @@ export class Rect<T extends BaseNodeInfo> {
     layoutProperties?: {
       classNames?: string;
       autoSizeToContentIfNodeHasNoThumbs?: boolean;
+      hasCustomStyling?: boolean;
     },
     hasStaticWidthHeight?: boolean,
     disableInteraction?: boolean,
@@ -107,7 +108,8 @@ export class Rect<T extends BaseNodeInfo> {
     parentNodeClassName?: string,
     setCanvasAction?: (canvasAction: CanvasAction, payload?: any) => void,
     rootElement?: HTMLElement,
-    theme?: Theme
+    theme?: Theme,
+    customClassName?: string
   ) {
     this.cssClasses = getRectNodeCssClasses();
     this.canvas = canvas;
@@ -156,7 +158,8 @@ export class Rect<T extends BaseNodeInfo> {
       disableInteraction,
       canvasUpdated,
       id,
-      parentNodeClassName ?? this.cssClasses.defaultRectClasses
+      parentNodeClassName ?? this.cssClasses.defaultRectClasses,
+      customClassName
     );
     this.nodeComponent = this.rectInfo.nodeComponent;
     this.nodeComponent.setSize = this.setSize;
@@ -418,8 +421,15 @@ export class Rect<T extends BaseNodeInfo> {
     }
   }
 
-  public resize(width?: number) {
-    if (this.hasStaticWidthHeight || !this.nodeComponent) {
+  public resize(
+    width?: number,
+    overrideStaticWidthHeight?: boolean,
+    selectChildElemenSelectorAsReference?: string
+  ) {
+    if (
+      (this.hasStaticWidthHeight && !overrideStaticWidthHeight) ||
+      !this.nodeComponent
+    ) {
       return;
     }
     const { scale } = getCamera();
@@ -468,8 +478,16 @@ export class Rect<T extends BaseNodeInfo> {
         minHeightAdd + Math.max(thumbEndHeight, thumbStartHeight);
     }
 
-    const astElementHtmlElement = this.rectInfo.astElement
+    let astElementHtmlElement: HTMLElement = this.rectInfo.astElement
       ?.domElement as unknown as HTMLElement;
+
+    if (selectChildElemenSelectorAsReference) {
+      astElementHtmlElement =
+        (this.nodeComponent.domElement as unknown as HTMLElement).querySelector(
+          selectChildElemenSelectorAsReference
+        ) ?? astElementHtmlElement;
+    }
+
     if (astElementHtmlElement && !this.autSizeToContentIfNodeHasNoThumbs) {
       astElementHtmlElement.style.width = width ? `${width}px` : 'auto';
       astElementHtmlElement.style.height = 'auto';
@@ -908,7 +926,8 @@ export class Rect<T extends BaseNodeInfo> {
     disableInteraction?: boolean,
     _canvasUpdated?: () => void,
     id?: string,
-    parentNodeClassName?: string
+    parentNodeClassName?: string,
+    customClassName?: string
   ) => {
     /*
       draw svg path based on bbox of the hidden path
@@ -942,7 +961,7 @@ export class Rect<T extends BaseNodeInfo> {
       {
         class: `${parentNodeClassName ?? this.cssClasses.defaultRectClasses} ${
           this.cssClasses.rectClasses
-        } ${autoSizeClasses}`,
+        } ${autoSizeClasses} ${customClassName ?? ''}`,
         ['data-node-id']: id ?? '',
       },
       canvasElement,

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

@@ -0,0 +1,6 @@
+export interface LayoutProperties {
+  classNames?: string;
+  autoSizeToContentIfNodeHasNoThumbs?: boolean;
+  hasCustomStyling?: boolean;
+  customClassName?: string;
+}