Base Type in Base Node

Author: AttAditya

src/components/engine/Node/index.tsx

@@ -15,25 +15,35 @@ import "./style.css";
 
 export function Node({
   node,
+  forcedActive = false,
 }: {
   node: NodeModel;
+  forcedActive?: boolean;
 }) {
   const {
     setUnsavedChanges,
   } = useUnsavedChangesContext()!;
+
   const [active, setActive] = useState(false);
+  const [baseType, setBaseType] = useState<string>(node.baseType || "text");
 
   const handleClick: () => void = useCallback(() => {
     if (node.action) node.action();
     else setActive(prev => !prev);
   }, [node]);
 
+  const switchBaseType = useCallback((type: string) => {
+    node.baseType = type;
+    setBaseType(type);
+    setUnsavedChanges(true);
+  }, [setUnsavedChanges, node]);
+
   return (<>
     <div className="node-wrapper">
       <Glass
         className={[
           "node",
-          active ? "active" : "",
+          (active || forcedActive) ? "active" : "",
         ].join(" ")}
         style={{ color: node.color }}
         onClick={handleClick}
@@ -69,7 +79,37 @@ export function Node({
             />))
           }
 
-          {node.isBase && (
+          {node.isBase && (<>
+            <Node
+              forcedActive={baseType === "text"}
+              node={{
+                color: "#000",
+                icon: "Type",
+                name: "Text Type",
+                action: () => switchBaseType("text"),
+              }}
+            />
+
+            <Node
+              forcedActive={baseType === "numeric"}
+              node={{
+                color: "#000",
+                icon: "Hash",
+                name: "Numeric Type",
+                action: () => switchBaseType("numeric"),
+              }}
+            />
+
+            <Node
+              forcedActive={baseType === "boolean"}
+              node={{
+                color: "#000",
+                icon: "ToggleRight",
+                name: "Boolean Type",
+                action: () => switchBaseType("boolean"),
+              }}
+            />
+
             <div className="node-base-input">
               <Input
                 placeholder="Base Node Value"
@@ -80,7 +120,7 @@ export function Node({
                 }}
               />
             </div>
-          )}
+          </>)}
         </Glass>
       )}
     </div>

src/components/engine/Node/style.css

@@ -93,9 +93,6 @@
   position: relative;
   width: var(--size);
   height: var(--size);
-  /* display: flex;
-  align-items: center;
-  justify-content: center; */
 }
 
 .node-context {
@@ -129,7 +126,7 @@
 }
 
 .node-base-input {
-  grid-column: span 5;
+  grid-column: 1 / -1;
   padding: 0.5rem 0.25rem;
 }
 

src/defs/Node.ts

@@ -8,6 +8,7 @@ export interface NodeModel {
   action?: () => void;
   context?: NodeModel[];
   value?: string;
+  baseType?: string;
   isBase?: boolean;
   isTopLevel?: boolean;
 }
@@ -20,10 +21,15 @@ export type NodeGroup = {
 
 export interface NodeSystem {
   [baseId: string]: NodeGroup;
-}
+};
 
 export interface Variable {
   name: string;
   color: string;
-}
+};
 
+export const BasePrefixes: { [key: string]: string } = {
+  text: ":",
+  numeric: "",
+  boolean: "",
+};

src/defs/Packed.ts

@@ -8,6 +8,7 @@ export interface PackedNode {
   icon: string;
   hasNext?: boolean;
   value?: string;
+  baseType?: string;
   isBase?: boolean;
   isTopLevel?: boolean;
 };

src/utils/compilerTools.ts

@@ -1,9 +1,10 @@
 import { saveFile } from '@utils/desktopTools';
 
-import type {
-  NodeModel,
-  NodeGroup,
-  NodeSystem,
+import {
+  type NodeModel,
+  type NodeGroup,
+  type NodeSystem,
+  BasePrefixes,
 } from "@defs/Node";
 
 const setupCompilerTools = () => {
@@ -23,7 +24,8 @@ const setupCompilerTools = () => {
       const indents: string = " ".repeat(level);
       for (const node of nodes) {
         if (node.isBase) {
-          script += `${indents}:${node.value || ""}\n`;
+          const basePrefix = BasePrefixes[node.baseType || "text"];
+          script += `${indents}${basePrefix}${node.value || ""}\n`;
           continue;
         }
 

src/utils/engineTools.ts

@@ -121,6 +121,7 @@ const setupEngineTools = () => {
         icon: packedNode.icon,
         hasNext: packedNode.hasNext,
         value: packedNode.value,
+        baseType: packedNode.baseType,
         isBase: packedNode.isBase,
         isTopLevel: packedNode.isTopLevel,
         context: [

src/utils/packerTools.ts

@@ -34,8 +34,9 @@ const setupPackerTools = () => {
         icon: node.icon,
         hasNext: node.hasNext,
         value: node.value,
+        baseType: node.baseType,
         isBase: node.isBase,
-        isTopLevel: node.isTopLevel
+        isTopLevel: node.isTopLevel,
       };
 
       savedNodes[node.id!] = packedNode;