Specify button event button (#166)

Author: mariusandra

backend/app/codegen/app_loader_nim.py

@@ -41,9 +41,9 @@ def _as_float(v: Scalar, default: float) -> float:
             pass
     return default
 
-def _default_literal(field_type: str, default: Scalar, required: bool) -> str:
+def _default_literal(field_name: str, field_type: str, default: Scalar, required: bool) -> str:
     """Return a Nim literal/expression usable as the fallback/default element value."""
-    if field_type in ("string", "text", "select", "font"):
+    if field_type in ("string", "text", "select", "font", "date"):
         return _nim_quote(default if isinstance(default, str) else "")
     if field_type == "integer":
         return str(_as_int(default, 0))
@@ -65,15 +65,15 @@ def _default_literal(field_type: str, default: Scalar, required: bool) -> str:
         # fallback to black if not provided
         s = default if isinstance(default, str) and default else "#000000"
         return f'parseHtmlColor({_nim_quote(s)})'
-    raise ValueError(f"Unsupported field type: {field_type}")
+    raise ValueError(f"Unsupported field type: {field_type}, field name: {field_name}")
 
 def _scalar_getter(field_name: str, field_type: str, default_expr: str, required: bool) -> str:
     """
     Build Nim expression to read a scalar from params with default, robust to numbers-as-strings, etc.
     Returns a Nim *expression* (often a 'block:' expression).
     """
     k = f'params{{"{field_name}"}}'
-    if field_type in ("string", "text", "select", "font"):
+    if field_type in ("string", "text", "select", "font", "date"):
         return f'{k}.getStr({default_expr})'
 
     if field_type == "integer":
@@ -150,7 +150,7 @@ def _scalar_getter(field_name: str, field_type: str, default_expr: str, required
       except CatchableError:
         discard
   v"""
-    raise ValueError(f"Unsupported field type: {field_type}")
+    raise ValueError(f"Unsupported field type: {field_type}, fieldName: {field_name}")
 
 def _field_elem_nim_type(field_type: str, required: bool) -> str:
     """Element type (for seqs)."""
@@ -218,7 +218,7 @@ def _seq_init_expr(field: Dict[str, Any], all_fields: Dict[str, Dict[str, Any]])
     ftype = field["type"]
     required = bool(field.get("required", False))
     elem_type = _field_elem_nim_type(ftype, required)
-    elem_default = _default_literal(ftype, field.get("value"), required)
+    elem_default = _default_literal(name, ftype, field.get("value"), required)
 
     seq_spec: List[List[Union[str, int]]] = field.get("seq", [])
     dims = len(seq_spec)
@@ -567,7 +567,7 @@ def write_app_loader_nim(app_dir, config: Optional[dict] = None) -> str:
             continue
 
         # Scalars
-        default_expr = _default_literal(field_type, field_default, field_required)
+        default_expr = _default_literal(field_name, field_type, field_default, field_required)
         getter_expr = _scalar_getter(field_name, field_type, default_expr, field_required)
         if getter_expr.startswith("block:"):
             formatted = _format_block_value_after_colon(getter_expr)

backend/app/codegen/scene_nim.py

@@ -698,11 +698,29 @@ def read_nodes(self):
 
             for node in nodes:
                 next_node = self.next_nodes.get(node["id"], "-1")
-                self.run_event_lines += [
-                    f"  try: discard self.runNode({self.node_id_to_integer(next_node)}.NodeId, context)",
-                    f'  except Exception as e: self.logger.log(%*{{"event": "{sanitize_nim_string(event)}:error", ' +
-                    f'"node": {self.node_id_to_integer(next_node)}, "error": $e.msg, "stacktrace": e.getStackTrace()}})'
-                ]
+                button_label = ""
+                if event == "button":
+                    button_label = (node.get("data", {}).get("label") or "").strip()
+
+                if event == "button" and button_label:
+                    filter_value = sanitize_nim_string(button_label)
+                    condition = (
+                        '  if not context.payload.isNil and context.payload.kind == JObject '
+                        'and context.payload.hasKey("label") '
+                        f'and context.payload["label"].getStr() == "{filter_value}":'
+                    )
+                    self.run_event_lines += [
+                        condition,
+                        f"    try: discard self.runNode({self.node_id_to_integer(next_node)}.NodeId, context)",
+                        f'    except Exception as e: self.logger.log(%*{{"event": "{sanitize_nim_string(event)}:error", ' +
+                        f'"node": {self.node_id_to_integer(next_node)}, "error": $e.msg, "stacktrace": e.getStackTrace()}})'
+                    ]
+                else:
+                    self.run_event_lines += [
+                        f"  try: discard self.runNode({self.node_id_to_integer(next_node)}.NodeId, context)",
+                        f'  except Exception as e: self.logger.log(%*{{"event": "{sanitize_nim_string(event)}:error", ' +
+                        f'"node": {self.node_id_to_integer(next_node)}, "error": $e.msg, "stacktrace": e.getStackTrace()}})'
+                    ]
         if not self.event_nodes.get("render", None):
             self.run_event_lines += [
                 'of "render":',

frameos/src/frameos/interpreter.nim

@@ -897,6 +897,16 @@ proc runEvent*(self: FrameScene, context: ExecutionContext) =
     for nodeId in scene.eventListeners[context.event]:
       let nextNode = if scene.nextNodeIds.hasKey(nodeId): scene.nextNodeIds[nodeId] else: -1.NodeId
       if nextNode != 0.NodeId and nextNode != -1.NodeId:
+        if context.event == "button":
+          if scene.nodes.hasKey(nodeId):
+            let node = scene.nodes[nodeId]
+            if not node.data.isNil and node.data.hasKey("label"):
+              let buttonFilter = strip(node.data["label"].getStr())
+              if buttonFilter.len > 0:
+                if context.payload.isNil or context.payload.kind != JObject:
+                  continue
+                if not context.payload.hasKey("label") or context.payload["label"].getStr() != buttonFilter:
+                  continue
         try:
           discard scene.runNode(nextNode, context)
         except Exception as e:

frontend/schema/config_json.json

@@ -229,7 +229,20 @@
       "type": "string"
     },
     "FieldType": {
-      "enum": ["string", "text", "float", "integer", "boolean", "color", "json", "node", "scene", "image", "font"],
+      "enum": [
+        "string",
+        "text",
+        "float",
+        "integer",
+        "boolean",
+        "color",
+        "date",
+        "json",
+        "node",
+        "scene",
+        "image",
+        "font"
+      ],
       "type": "string"
     },
     "MarkdownField": {

frontend/src/components/FieldTypeTag.tsx

@@ -8,6 +8,7 @@ export const typeColors: Record<FieldType, TagProps['color']> = {
   integer: 'teal',
   boolean: 'gray',
   color: 'orange',
+  date: 'secondary',
   json: 'secondary',
   node: 'secondary',
   scene: 'secondary',

frontend/src/scenes/frame/panels/Diagram/AppNode.tsx

@@ -392,6 +392,16 @@ export function AppNode({ id, isConnectable }: NodeProps<AppNodeData | DispatchN
                                   onChange={(value) => updateNodeConfig(id, field.name, value)}
                                   className="!min-w-[50px]"
                                 />
+                              ) : field.type === 'date' ? (
+                                <TextInput
+                                  theme="node"
+                                  type="date"
+                                  placeholder={field.placeholder}
+                                  value={String(
+                                    (field.name in data.config ? data.config[field.name] : field.value) ?? ''
+                                  )}
+                                  onChange={(value) => updateNodeConfig(id, field.name, value)}
+                                />
                               ) : (
                                 <TextInput
                                   theme="node"

frontend/src/scenes/frame/panels/Diagram/AppNodeEdge.tsx

@@ -31,10 +31,10 @@ export function AppNodeEdge({
         style={
           isNodeConnection
             ? selected
-              ? { strokeWidth: 8, stroke: '#ffffff' }
+              ? { strokeWidth: 8, stroke: '#f29cf6' }
               : { strokeWidth: 6, stroke: 'hsl(56 60% 70% / 1)' }
             : selected
-            ? { strokeWidth: 4, stroke: '#ffffff' }
+            ? { strokeWidth: 4, stroke: '#f29cf6' }
             : { strokeWidth: 2, stroke: '#c5c5c5' }
         }
       />

frontend/src/scenes/frame/panels/Diagram/CodeNode.tsx

@@ -28,13 +28,13 @@ export function CodeNode({ id, isConnectable }: NodeProps<CodeNodeData>): JSX.El
         className={clsx(
           'shadow-lg border-2 h-full flex flex-col',
           isSelected
-            ? 'bg-black bg-opacity-70 border-indigo-900 shadow-indigo-700/50'
+            ? 'bg-black bg-opacity-70 border-fuchsia-900 shadow-fuchsia-700/50'
             : 'bg-black bg-opacity-70 border-green-900 shadow-green-700/50 '
         )}
       >
         <NodeResizer minWidth={200} minHeight={119} />
         <div
-          className={clsx('flex w-full items-center justify-between', isSelected ? 'bg-indigo-900' : 'bg-green-900')}
+          className={clsx('flex w-full items-center justify-between', isSelected ? 'bg-fuchsia-900' : 'bg-green-900')}
         >
           <div className={clsx('frameos-node-title text-xl px-1 gap-2', 'flex w-full items-center')}>
             {[...(data.codeArgs ?? []), '+'].map((codeField, i) => (
@@ -160,7 +160,7 @@ export function CodeNode({ id, isConnectable }: NodeProps<CodeNodeData>): JSX.El
         <div
           className={clsx(
             'frameos-node-title text-xl px-1 gap-1',
-            isSelected ? 'bg-indigo-900' : 'bg-green-900',
+            isSelected ? 'bg-fuchsia-900' : 'bg-green-900',
             'flex w-full justify-between items-center'
           )}
         >

frontend/src/scenes/frame/panels/Diagram/CodeNodeEdge.tsx

@@ -28,7 +28,7 @@ export function CodeNodeEdge({
       <BaseEdge
         id={id}
         path={edgePath}
-        style={selected ? { strokeWidth: 6, stroke: '#ffffff' } : { strokeWidth: 4, stroke: 'hsl(220 100% 91%)' }}
+        style={selected ? { strokeWidth: 6, stroke: '#f29cf6' } : { strokeWidth: 4, stroke: 'hsl(220 100% 91%)' }}
       />
       <EdgeLabelRenderer>
         {selected ? (

frontend/src/scenes/frame/panels/Diagram/Diagram.tsx

@@ -10,6 +10,7 @@ import ReactFlow, {
   EdgeProps,
   useUpdateNodeInternals,
   ReactFlowProvider,
+  SelectionMode,
 } from 'reactflow'
 import { frameLogic } from '../../frameLogic'
 import {
@@ -37,7 +38,7 @@ import { CodeNodeEdge } from './CodeNodeEdge'
 import { SceneDropDown } from '../Scenes/SceneDropDown'
 import { AppNodeEdge } from './AppNodeEdge'
 import { NewNodePicker } from './NewNodePicker'
-import { getNewFieldName, newNodePickerLogic } from './newNodePickerLogic'
+import { CANVAS_NODE_ID, getNewFieldName, newNodePickerLogic } from './newNodePickerLogic'
 
 const nodeTypes: Record<NodeType, (props: NodeProps) => JSX.Element> = {
   app: AppNode,
@@ -170,6 +171,27 @@ function Diagram_({ sceneId }: DiagramProps) {
     }
   }, [])
 
+  const onContextMenu = useCallback(
+    (event: ReactMouseEvent) => {
+      const target = event.target as HTMLElement | null
+      const pane = target?.closest('.react-flow__pane') as HTMLElement | null
+      if (!pane) {
+        return
+      }
+      event.preventDefault()
+      if (!reactFlowInstance) {
+        return
+      }
+      const reactFlowBounds = reactFlowWrapper.current?.getBoundingClientRect()
+      const position = reactFlowInstance.project({
+        x: event.clientX - (reactFlowBounds?.left ?? 0),
+        y: event.clientY - (reactFlowBounds?.top ?? 0),
+      })
+      openNewNodePicker(event.clientX, event.clientY, position.x, position.y, CANVAS_NODE_ID, 'canvas', 'canvas')
+    },
+    [openNewNodePicker, reactFlowInstance]
+  )
+
   useEffect(() => {
     if (fitViewCounter > 0) {
       reactFlowInstance?.fitView({ maxZoom: 1, padding: 0.2 })
@@ -178,7 +200,7 @@ function Diagram_({ sceneId }: DiagramProps) {
 
   return (
     <BindLogic logic={diagramLogic} props={diagramLogicProps}>
-      <div className="w-full h-full dndflow" ref={reactFlowWrapper}>
+      <div className="w-full h-full dndflow" ref={reactFlowWrapper} onContextMenu={onContextMenu}>
         <ReactFlow
           nodes={nodesWithStyle}
           edges={edges}
@@ -197,6 +219,7 @@ function Diagram_({ sceneId }: DiagramProps) {
           deleteKeyCode={['Backspace', 'Delete']}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
+          selectionMode={SelectionMode.Partial}
         >
           <Background id="1" gap={24} color="#cccccc" variant={BackgroundVariant.Dots} />
           <div className="absolute top-1 right-1 z-10 flex gap-2">