theme

Author: devhelpr

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

@@ -94,7 +94,7 @@ export class AppElement<T extends BaseNodeInfo> {
   commandRegistry = new Map<string, ICommandHandler>();
 
   toggleFullscreenPopup = false;
-
+  theme?: Theme;
   constructor(
     appRootSelector: string,
     customTemplate?: HTMLTemplateElement,
@@ -113,6 +113,7 @@ export class AppElement<T extends BaseNodeInfo> {
         'NO Crypto defined ... uuid cannot be created! Are you on a http connection!?'
       );
     }
+    this.theme = theme;
     this.appRootElement = document.querySelector(appRootSelector);
     if (!this.appRootElement) {
       return;
@@ -1295,7 +1296,7 @@ export class AppElement<T extends BaseNodeInfo> {
         undefined,
         undefined,
         'composition-canvas-' + node.nodeInfo.compositionId,
-        undefined,
+        this.theme, // theme
         this.showEditCompositionNameDialog,
         undefined,
         undefined,

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

@@ -1346,7 +1346,8 @@ export class FlowCanvas<T extends BaseNodeInfo>
       isStaticPosition,
       parentNodeClassNames,
       this.onCanvasAction,
-      this.rootElement
+      this.rootElement,
+      this.theme
     );
     if (!rectInstance || !rectInstance.nodeComponent) {
       throw new Error('rectInstance is undefined');
@@ -1405,7 +1406,8 @@ export class FlowCanvas<T extends BaseNodeInfo>
       isCircle,
       createStraightLineConnection,
       this.onCanvasAction,
-      this.rootElement
+      this.rootElement,
+      this.theme
     );
     if (!rectInstance || !rectInstance.nodeComponent) {
       throw new Error('rectInstance is undefined');
@@ -1767,7 +1769,8 @@ export class FlowCanvas<T extends BaseNodeInfo>
       this.onCanvasUpdated,
       rectInstance.containerNode,
       undefined,
-      this.rootElement
+      this.rootElement,
+      this.theme
     );
 
     if (!thumbNode.nodeComponent) {

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

@@ -13,6 +13,7 @@ import {
   IThumbNodeComponent,
   ThumbConnectionType,
 } from '../interfaces';
+import { Theme } from '../interfaces/theme';
 import { getSelectedNode } from '../reactivity';
 import { ConnectionControllerType, NodeType } from '../types';
 import { BaseNodeInfo } from '../types/base-node-info';
@@ -57,7 +58,8 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
     isCircle?: boolean,
     createStraightLineConnection?: boolean,
     setCanvasAction?: (canvasAction: CanvasAction, payload?: any) => void,
-    rootElement?: HTMLElement
+    rootElement?: HTMLElement,
+    theme?: Theme
   ) {
     super(
       canvas,
@@ -82,7 +84,8 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
       isStaticPosition,
       getRectNodeCssClasses().defaultRectThumbClasses,
       setCanvasAction,
-      rootElement
+      rootElement,
+      theme
     );
     if (!this.nodeComponent) {
       throw new Error('nodeComponent not created');

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

@@ -32,6 +32,7 @@ import { getPointerPos } from '../utils/pointer-pos';
 import { FlowChangeType } from '../interfaces';
 import { BaseNodeInfo } from '../types/base-node-info';
 import { getRectNodeCssClasses } from './css-classes/rect-css-classes';
+import { Theme } from '../interfaces/theme';
 
 export class Rect<T extends BaseNodeInfo> {
   public nodeComponent?: IRectNodeComponent<T>;
@@ -73,6 +74,7 @@ export class Rect<T extends BaseNodeInfo> {
   };
 
   protected cssClasses: ReturnType<typeof getRectNodeCssClasses>;
+  protected theme?: Theme;
 
   constructor(
     canvas: IElementNode<T>,
@@ -104,7 +106,8 @@ export class Rect<T extends BaseNodeInfo> {
     isStaticPosition?: boolean,
     parentNodeClassName?: string,
     setCanvasAction?: (canvasAction: CanvasAction, payload?: any) => void,
-    rootElement?: HTMLElement
+    rootElement?: HTMLElement,
+    theme?: Theme
   ) {
     this.cssClasses = getRectNodeCssClasses();
     this.canvas = canvas;
@@ -114,6 +117,7 @@ export class Rect<T extends BaseNodeInfo> {
     this.nodeTransformer = nodeTransformer;
     this.nodeTransformer.detachNode();
     this.rootElement = rootElement;
+    this.theme = theme;
 
     this.interactionStateMachine = interactionStateMachine;
     this.hasStaticWidthHeight = hasStaticWidthHeight;
@@ -251,7 +255,8 @@ export class Rect<T extends BaseNodeInfo> {
           canvasUpdated,
           containerNode,
           setCanvasAction,
-          rootElement
+          rootElement,
+          this.theme
         );
 
         if (!thumbNode.nodeComponent) {

libs/visual-programming-system/src/components/thumb-node-connector.ts

@@ -38,9 +38,11 @@ import { thumbTwoDots } from './icons/thumb-two-dots';
 import { CanvasAction } from '../enums/canvas-action';
 import { getPointerPos } from '../utils/pointer-pos';
 import { BaseNodeInfo } from '../types/base-node-info';
+import { Theme } from '../interfaces/theme';
 
 export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
   rootElement: HTMLElement | undefined = undefined;
+  theme: Theme | undefined = undefined;
   constructor(
     thumb: IThumb,
     canvasElement: DOMElementNode,
@@ -73,7 +75,8 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
     canvasUpdated?: () => void,
     containerNode?: IRectNodeComponent<T>,
     setCanvasAction?: (canvasAction: CanvasAction, payload?: any) => void,
-    rootElement?: HTMLElement
+    rootElement?: HTMLElement,
+    theme?: Theme
   ) {
     super(
       canvasElement,
@@ -111,6 +114,7 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
     if (!this.nodeComponent) {
       throw new Error('nodeComponent is undefined');
     }
+    this.theme = theme;
     this.rootElement = rootElement;
     this.nodeComponent.prefixIcon = thumb.prefixIcon;
     this.nodeComponent.prefixLabel = thumb.prefixLabel;
@@ -734,7 +738,7 @@ export class ThumbNodeConnector<T extends BaseNodeInfo> extends ThumbNode<T> {
           this.canvasUpdated,
           undefined,
           this.containerNode,
-          undefined,
+          this.theme, // theme
           undefined,
           this.rootElement
         );