feat: allow to choose slot and output socket direction

Quasi-Studio · Nov 10, 2023 · 8ddc02b · 8ddc02b
1 parent 0343603
commit 8ddc02b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 8 deletions.
diff --git a/packages/northstar/src/blocks/special/FuncBlockBase.r.ts b/packages/northstar/src/blocks/special/FuncBlockBase.r.ts
@@ -15,11 +15,13 @@ import {
   SingleInSocket,
   UseSocket,
   UsedSockets,
+  directionMap,
+  directionNameMap,
 } from "@quasi-dev/visual-flow";
 import { FTextarea, FUnderlineTextInput } from "@refina/fluentui";
 import { Context, d, ref } from "refina";
 import { currentGraph } from "../../store";
-import { PropsData } from "../../utils/props";
+import { PropData, PropsData } from "../../utils/props";
 import { multiOutSocketToOutput } from "../../utils/toOutpus";
 import { SpecialBlock } from "./base";
 
@@ -39,12 +41,13 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
   boardHeight: number = 50;
 
   useTextarea: boolean = false;
-  inputValue = d("");
-  placeholder = "";
-
   outputLabel: string = "output";
-
   abstract label: string;
+  placeholder = "";
+
+  inputValue = d("");
+  slotsDirection = Direction.TOP;
+  outputDirection = Direction.BOTTOM;
 
   content = (_: Context) => {
     _.$cls`text-xs ml-1 mt-[5px] leading-3 text-gray-600`;
@@ -90,15 +93,15 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
         label: slot,
         type: "D",
         path: PATH_IN_ELIPSE,
-        direction: Direction.TOP,
+        direction: this.slotsDirection,
       });
     }
     if (!this.noOutput) {
       useSocket("output", MultiOutSocket, {
         label: this.outputLabel,
         type: "D",
         path: PATH_OUT_ELIPSE,
-        direction: Direction.BOTTOM,
+        direction: this.outputDirection,
       });
     }
   }
@@ -107,15 +110,42 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
     return {
       ...super.exportData(),
       inputValue: this.inputValue.value,
+      outputDirection: this.outputDirection,
+      slotsDirection: this.slotsDirection,
     };
   }
   protected importData(data: any, sockets: any): void {
     super.importData(data, sockets);
     this.inputValue.value = data.inputValue;
+    this.outputDirection = data.outputDirection;
+    this.slotsDirection = data.slotsDirection;
   }
 
   getProps(): PropsData {
-    return [];
+    return [
+      {
+        name: "slots pos",
+        type: "dropdown",
+        options: ["TOP", "BOTTOM"],
+        getVal: () => {
+          return directionNameMap[this.slotsDirection];
+        },
+        setVal: val => {
+          this.slotsDirection = directionMap[val];
+        },
+      } satisfies PropData,
+      {
+        name: "output pos",
+        type: "dropdown",
+        options: ["BOTTOM", "TOP"],
+        getVal: () => {
+          return directionNameMap[this.outputDirection];
+        },
+        setVal: val => {
+          this.outputDirection = directionMap[val];
+        },
+      } satisfies PropData,
+    ].slice(0, this.noOutput ? 1 : 2);
   }
 
   toOutput(): FuncBlockOutput | ValidatorBlockOutput | ImpBlockOutput | StateBlockOutput | StateSetterBlockOutput {

diff --git a/packages/visual-flow/src/types/direction.ts b/packages/visual-flow/src/types/direction.ts
@@ -87,3 +87,16 @@ export function futherDis(dire: Direction, p1: Point, p2: Point): number {
       return Math.max(p1.y, p2.y);
   }
 }
+
+export const directionNameMap = {
+  [Direction.LEFT]: "LEFT",
+  [Direction.RIGHT]: "RIGHT",
+  [Direction.TOP]: "TOP",
+  [Direction.BOTTOM]: "BOTTOM",
+};
+export const directionMap = {
+  LEFT: Direction.LEFT,
+  RIGHT: Direction.RIGHT,
+  TOP: Direction.TOP,
+  BOTTOM: Direction.BOTTOM,
+} as Record<string, Direction>;