chore: refactor import and block structure

captain/controllers/reactive.py

@@ -12,7 +12,7 @@
 from captain.types.flowchart import BlockID, FCBlock, FlowChart
 from captain.utils.blocks import import_blocks, is_ui_input
 
-BLOCKS_DIR = os.path.join("captain", "blocks")
+BLOCKS_DIR = os.path.join("blocks")
 
 ZIPPED_BLOCKS = []  # TODO: I (sasha) am anti zip in all cases.
 
@@ -183,6 +183,8 @@ def __init__(
 
         funcs = import_blocks(BLOCKS_DIR)
 
+        print(funcs, flush=True)
+
         for block in flowchart.blocks:
             if is_ui_input(funcs[block.block_type]):
                 logger.debug(f"Creating UI input for {block.id}")

captain/types/flowchart.py

@@ -4,7 +4,11 @@
 
 # TODO: This is hardcoded for now
 BlockType = Literal[
-    "slider", "gamepad", "button", "bignum", "add", "subtract", "constant"
+    "flojoy.control.slider",
+    "flojoy.visualization.bignum",
+    "flojoy.math.arithmetic.add",
+    "flojoy.math.arithmetic.subtract",
+    "flojoy.math.constant",
 ]
 
 BlockID: TypeAlias = str

captain/utils/blocks.py

@@ -2,30 +2,47 @@
 import os
 from typing import Callable, Mapping
 
+from captain.logging import logger
+
 
 def import_blocks(blocks_dir: str) -> Mapping[str, Callable]:
+    # example key: "flojoy.math.arithmetic.add"
     functions = {}
-    for file in os.listdir(blocks_dir):
-        full_path = os.path.join(blocks_dir, file)
-        if not os.path.isfile(full_path) or not file.endswith(".py"):
-            continue
 
-        block_name = file.strip(".py")
-        spec = importlib.util.spec_from_file_location(block_name, full_path)
+    for root, _, files in os.walk(blocks_dir):
+        for file in files:
+            if not file.endswith(".py"):
+                continue
+
+            block_name = file.strip(".py")
+
+            block_path = os.path.join(root, file)
+
+            # block_type is something like "flojoy.math.arithmetic.add"
+            block_type = os.path.relpath(
+                os.path.splitext(block_path)[0], blocks_dir
+            ).replace("/", ".")
 
-        if not spec:
-            raise ValueError(f"Invalid block spec from {full_path}")
+            spec = importlib.util.spec_from_file_location(block_name, block_path)
 
-        module = importlib.util.module_from_spec(spec)
-        if not spec.loader:
-            raise ValueError(f"Could not get loader from {full_path}")
+            if not spec:
+                raise ValueError(f"Invalid block spec from {block_path}")
 
-        spec.loader.exec_module(module)
-        func = getattr(module, block_name)
-        functions[block_name] = func
+            module = importlib.util.module_from_spec(spec)
+            if not spec.loader:
+                raise ValueError(f"Could not get loader from {block_path}")
+
+            spec.loader.exec_module(module)
+            func = getattr(module, block_name)
+
+            logger.info(f"importing {block_type}")
+            functions[block_type] = func
 
     return functions
 
 
 def is_ui_input(func: Callable) -> bool:
     return getattr(func, "ui_input", False)
+
+
+import_blocks("blocks")

src/renderer/src/components/flow/BlockCard.tsx

@@ -3,11 +3,11 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/
 
 type Props = {
   name: string;
-  block_id: string;
+  block_type: string;
   desc: string;
 };
 
-const BlockCard = ({ name, desc, block_id }: Props): JSX.Element => {
+const BlockCard = ({ name, desc, block_type }: Props): JSX.Element => {
   const onDragStart = (event, nodeType) => {
     event.dataTransfer.setData('application/reactflow', nodeType);
     event.dataTransfer.effectAllowed = 'move';
@@ -24,7 +24,7 @@ const BlockCard = ({ name, desc, block_id }: Props): JSX.Element => {
             className=""
             variant="secondary"
             draggable
-            onDragStart={(event) => onDragStart(event, block_id)}
+            onDragStart={(event) => onDragStart(event, block_type)}
           >
             <div>{name}</div>
           </Button>

src/renderer/src/components/flow/BlocksLibrary.tsx

@@ -13,9 +13,13 @@ const BlocksLibrary = () => {
       </div>
       <div className="py-2"></div>
       <div className="flex flex-col gap-2">
-        <BlockCard name="Add" desc="Add a bunch of stuff together" block_id="add" />
-        <BlockCard name="Slider" desc="it slides" block_id="slider" />
-        <BlockCard name="Big Number" desc="Big number" block_id="bignum" />
+        <BlockCard
+          name="Add"
+          desc="Add a bunch of stuff together"
+          block_type="flojoy.math.arithmetic.add"
+        />
+        <BlockCard name="Slider" desc="it slides" block_type="flojoy.control.slider" />
+        <BlockCard name="Big Number" desc="Big number" block_type="flojoy.visualization.bignum" />
       </div>
     </div>
   );

src/renderer/src/components/flow/FlowCanvas.tsx

@@ -22,9 +22,9 @@ import useUndoRedo from '@/hooks/useUndoRedo';
 // import useUndoRedo from '@/hooks/useUndoRedo';
 
 const nodeTypes = {
-  slider: SliderBlock,
-  bignum: BigNumberBlock,
-  add: AddBlock
+  'flojoy.control.slider': SliderBlock,
+  'flojoy.visualization.bignum': BigNumberBlock,
+  'flojoy.math.arithmetic.add': AddBlock
 };
 
 const edgeTypes = {
@@ -84,10 +84,10 @@ const FlowCanvas = () => {
         return;
       }
 
-      const block_id = event.dataTransfer.getData('application/reactflow');
+      const block_type = event.dataTransfer.getData('application/reactflow');
 
       // check if the dropped element is valid
-      if (typeof block_id === 'undefined' || !block_id) {
+      if (typeof block_type === 'undefined' || !block_type) {
         return;
       }
 
@@ -99,7 +99,7 @@ const FlowCanvas = () => {
         y: event.clientY
       });
 
-      addNode(block_id, position);
+      addNode(block_type, position);
     },
     [reactFlowInstance]
   );

src/renderer/src/types/block.ts

@@ -1,6 +1,12 @@
 import { NodeProps } from 'reactflow';
 
-export type BlockType = 'slider' | 'gamepad' | 'button' | 'bignum' | 'add' | 'subtract';
+// TODO: This should not be hardcoded
+export type BlockType =
+  | 'flojoy.control.slider'
+  | 'flojoy.visualization.bignum'
+  | 'flojoy.math.arithmetic.add'
+  | 'flojoy.math.arithmetic.subtract'
+  | 'flojoy.math.constant';
 
 export type BlockData = {
   block_type: BlockType;