pynode-flow 0.2.0__py3-none-any.whl

pynode/static/index.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PyNode - Visual Workflow Editor</title>
+    <link rel="icon" type="image/png" href="images/favicon4.png">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Toast notification -->
+        <div id="toast" class="toast"></div>
+
+        <!-- Header -->
+        <header class="header">
+            <h1><img src="images/favicon4.png" alt="PyNode" class="header-logo">PyNode Editor<span id="app-version" class="app-version"></span></h1>
+            <div class="header-actions">
+                <div class="deploy-container">
+                    <button id="deploy-btn" class="btn btn-primary deploy-main" disabled>
+                        <span id="deploy-mode-icon" class="deploy-btn-icon">◐</span>
+                        Deploy
+                    </button>
+                    <button id="deploy-dropdown-btn" class="btn btn-primary deploy-arrow">▼</button>
+                    <div id="deploy-dropdown" class="deploy-dropdown hidden">
+                        <button id="deploy-modified-btn" class="menu-item deploy-option active">
+                            <span class="deploy-icon">◐</span>
+                            <span class="deploy-text">
+                                <span class="deploy-label">Modified Nodes</span>
+                                <span class="deploy-desc">Only deploy nodes that have changed</span>
+                            </span>
+                        </button>
+                        <button id="deploy-full-btn" class="menu-item deploy-option">
+                            <span class="deploy-icon">●</span>
+                            <span class="deploy-text">
+                                <span class="deploy-label">Full</span>
+                                <span class="deploy-desc">Deploy all nodes, restarting the entire flow</span>
+                            </span>
+                        </button>
+                        <div class="deploy-separator"></div>
+                        <button id="deploy-restart-btn" class="menu-item deploy-option">
+                            <span class="deploy-icon">↻</span>
+                            <span class="deploy-text">
+                                <span class="deploy-label">Restart</span>
+                                <span class="deploy-desc">Restart all nodes without redeploying</span>
+                            </span>
+                        </button>
+                        <button id="deploy-stop-btn" class="menu-item deploy-option">
+                            <span class="deploy-icon">■</span>
+                            <span class="deploy-text">
+                                <span class="deploy-label">Stop</span>
+                                <span class="deploy-desc">Stop processing; Deploy to start again</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+                <div class="menu-container">
+                    <button id="menu-btn" class="btn btn-secondary" title="Menu">☰</button>
+                    <div id="menu-dropdown" class="menu-dropdown hidden">
+                        <button id="clear-btn" class="menu-item">Clear Workflow</button>
+
+                        <div class="menu-submenu">
+                            <button id="export-btn" class="menu-item submenu-toggle">◁ Export</button>
+                            <div id="export-submenu" class="submenu-dropdown hidden">
+                                <button id="export-flow-btn" class="menu-item">Flow</button>
+                                <button id="export-selected-btn" class="menu-item">Selected Nodes</button>
+                            </div>
+                        </div>
+
+                        <button id="import-btn" class="menu-item">Import</button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main content -->
+        <div class="main-content">
+            <!-- Node Palette -->
+            <aside class="palette" id="left-palette">
+                <div class="palette-scroll">
+                    <h3>Node Palette</h3>
+                    <div class="palette-search-container">
+                        <input type="text" id="palette-search" class="palette-search" placeholder="Filter nodes..." />
+                        <button id="palette-clear-btn" class="search-clear-btn" aria-label="Clear search">✕</button>
+                    </div>
+                    <div id="node-palette" class="node-list">
+                        <!-- Nodes will be loaded here -->
+                    </div>
+                </div>
+                <div class="panel-grab panel-grab-left" id="left-palette-grab" title="Drag to resize">
+                    <button class="panel-toggle-btn" id="left-palette-toggle" type="button" aria-label="Toggle palette"></button>
+                </div>
+            </aside>
+
+            <!-- Canvas area with workflow tabs -->
+            <div class="canvas-area">
+                <!-- Workflow Tabs -->
+                <div class="workflow-tabs" id="workflow-tabs">
+                    <!-- Tabs are rendered dynamically -->
+                    <button class="workflow-tab-add" id="add-workflow-btn" title="New Workflow">+</button>
+                </div>
+
+                <!-- Canvas -->
+                <main class="canvas-container">
+                <!-- canvas-viewport is the zoom root: viewport.js applies
+                     transform: scale(k) here so the connections SVG and the
+                     HTML nodes layer zoom together -->
+                <div id="canvas-viewport">
+                    <svg id="canvas" width="100%" height="100%">
+                        <!-- <defs>
+                            <marker id="arrowhead" markerWidth="10" markerHeight="7"
+                                    refX="0" refY="3.5" orient="auto" markerUnits="strokeWidth">
+                                <polygon points="0 0, 10 3.5, 0 7" fill="#999" />
+                            </marker>
+                        </defs> -->
+                        <g id="connections"></g>
+                        <g id="temp-line"></g>
+                    </svg>
+                    <div id="nodes-container"></div>
+                </div>
+            </main>
+
+                <!-- Canvas overlay controls: minimap + zoom -->
+                <div class="canvas-controls" id="canvas-controls">
+                    <div id="minimap-panel" class="minimap-panel hidden">
+                        <canvas id="minimap-canvas" width="220" height="150"></canvas>
+                    </div>
+                    <div class="canvas-controls-bar">
+                        <button id="zoom-out-btn" class="canvas-ctrl-btn" title="Zoom out (Ctrl+wheel)">−</button>
+                        <button id="zoom-reset-btn" class="canvas-ctrl-btn zoom-readout" title="Reset zoom">100%</button>
+                        <button id="zoom-in-btn" class="canvas-ctrl-btn" title="Zoom in (Ctrl+wheel)">+</button>
+                        <button id="minimap-toggle-btn" class="canvas-ctrl-btn" title="Toggle minimap">▦</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Properties Panel -->
+            <aside class="properties hidden" id="properties-panel-container">
+                <div class="resize-handle" id="properties-resize-handle"></div>
+                <div class="properties-header">
+                    <h3>Properties</h3>
+                    <button class="properties-close-btn" id="close-properties-btn" title="Close Properties">✕</button>
+                </div>
+                <div id="properties-panel">
+                    <p class="placeholder">Select a node to edit properties</p>
+                </div>
+            </aside>
+
+            <!-- Right Sidebar (permanent) -->
+            <aside class="right-sidebar" id="right-sidebar">
+                <div class="sidebar-tabs">
+                    <button class="sidebar-tab active" data-panel="debug" title="Debug">🐛</button>
+                    <button class="sidebar-tab" data-panel="info" title="Info">ℹ️</button>
+                </div>
+                <div class="sidebar-content">
+                    <!-- Debug Panel -->
+                    <div class="sidebar-panel active" id="debug-panel">
+                        <div class="debug-header">
+                            <h3>Debug Messages</h3>
+                            <div class="debug-controls">
+                                <button id="pause-debug-btn" class="btn btn-secondary btn-small icon-btn" title="Pause updates"></button>
+                                <button id="clear-debug-btn" class="btn btn-secondary btn-small" title="Clear">🗑️</button>
+                            </div>
+                        </div>
+                        <div class="debug-filters">
+                            <button class="filter-toggle-btn active" id="filter-info" data-filter="info">
+                                Info
+                            </button>
+                            <button class="filter-toggle-btn active" id="filter-errors" data-filter="errors">
+                                Errors
+                            </button>
+                            <button class="filter-toggle-btn" id="collapse-similar" data-filter="collapse">
+                                Collapse
+                            </button>
+                        </div>
+                        <div id="debug-messages"></div>
+                    </div>
+                    <!-- Info Panel -->
+                    <div class="sidebar-panel" id="info-panel">
+                        <div class="info-header">
+                            <h3>Information</h3>
+                        </div>
+                        <div class="info-content">
+                            <p class="placeholder">Select a node to see information</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="panel-grab panel-grab-right" id="right-sidebar-grab" title="Drag to resize">
+                    <button class="panel-toggle-btn" id="right-sidebar-toggle" type="button" aria-label="Toggle sidebar"></button>
+                </div>
+            </aside>
+        </div>
+    </div>
+
+    <!-- auth.js must load first (classic script, runs during parse) so its
+         fetch wrapper covers every API call made by the module bundle -->
+    <script src="js/auth.js"></script>
+    <script type="module" src="js/main.js"></script>
+</body>
+</html>

pynode/static/js/README.md

@@ -0,0 +1,139 @@
+# PyNode Frontend Architecture
+
+The frontend has been restructured into modular ES6 modules for better maintainability and organization.
+
+## Directory Structure
+
+```
+static/
+├── index.html              # Main HTML file
+├── style.css               # All styles
+├── app.js                  # Legacy monolithic file (can be removed)
+└── js/                     # Modular JavaScript
+    ├── main.js             # Application entry point
+    ├── config.js           # Configuration and constants
+    ├── state.js            # State management
+    ├── ui-utils.js         # UI utility functions
+    ├── palette.js          # Node palette rendering
+    ├── nodes.js            # Node creation and rendering
+    ├── connections.js      # Connection management
+    ├── selection.js        # Node selection logic
+    ├── properties.js       # Properties panel
+    ├── workflow.js         # Workflow import/export/deploy
+    ├── debug.js            # Debug panel and SSE
+    └── events.js           # Event handlers
+```
+
+## Module Overview
+
+### `main.js` - Entry Point
+- Initializes the application
+- Exposes functions to window for inline event handlers
+- Coordinates module loading
+
+### `config.js` - Configuration
+- API base URL
+- Node categories definition
+- Global constants
+
+### `state.js` - State Management
+- Central state object
+- State modification functions
+- Node ID generation
+
+### `ui-utils.js` - UI Utilities
+- Toast notifications
+- Other UI helper functions
+
+### `palette.js` - Node Palette
+- Loads available node types from API
+- Renders node palette by category
+- Handles drag-and-drop initiation
+
+### `nodes.js` - Node Management
+- Node creation (client-side)
+- Node rendering
+- Node deletion
+- Node drag-and-drop handling
+
+### `connections.js` - Connection Management
+- Connection creation and rendering
+- Connection drawing (temp lines)
+- Connection deletion
+- Connection updates on node movement
+
+### `selection.js` - Selection Logic
+- Single and multi-node selection
+- Selection box handling
+- Deselection
+
+### `properties.js` - Properties Panel
+- Property panel rendering
+- Node property updates
+- Node config updates
+- Gate toggle (special case)
+- Action triggers (inject, etc.)
+
+### `workflow.js` - Workflow Operations
+- Load workflow from API
+- Deploy workflow to backend
+- Clear workflow
+- Import/export JSON files
+
+### `debug.js` - Debug Panel
+- SSE connection for debug messages
+- Image viewer updates via SSE
+- Debug message display
+
+### `events.js` - Event Handling
+- Canvas event listeners
+- Keyboard shortcuts
+- Selection box logic
+- Drag-and-drop handling
+
+## Key Design Decisions
+
+### ES6 Modules
+- Clean imports/exports
+- Better dependency management
+- Tree-shaking potential
+- Modern JavaScript practices
+
+### Circular Dependency Prevention
+- Dynamic imports used where needed (`import().then()`)
+- Careful module organization
+- Clear separation of concerns
+
+### Window Globals
+Some functions are exposed to `window` for inline event handlers in dynamically generated HTML:
+- `updateNodeProperty()`
+- `updateNodeConfig()`
+- `triggerNodeAction()`
+- `toggleGate()`
+
+This is necessary because the properties panel HTML is generated dynamically with inline `onchange` handlers.
+
+## Benefits of New Structure
+
+1. **Maintainability**: Each module has a single responsibility
+2. **Testability**: Modules can be tested independently
+3. **Reusability**: Functions are organized logically
+4. **Scalability**: Easy to add new features in appropriate modules
+5. **Readability**: ~100-300 lines per file instead of 1000+ lines
+6. **Collaboration**: Multiple developers can work on different modules
+
+## Migration Notes
+
+- The old `app.js` is no longer used
+- All functionality is preserved
+- No API changes required
+- Works with existing backend
+- Module loading is automatic via `type="module"` in HTML
+
+## Future Improvements
+
+- Consider removing inline event handlers in favor of event delegation
+- Add TypeScript for better type safety
+- Implement unit tests for each module
+- Add build step for production (minification, bundling)
+- Consider state management library (Redux, MobX) if state grows more complex

pynode/static/js/auth.js

@@ -0,0 +1,89 @@
+// Optional API key support for PyNode.
+//
+// Loaded as a CLASSIC script before the js/main.js module bundle (classic
+// scripts execute during parse; module scripts are deferred), so the fetch
+// wrapper below is installed before any application code runs. Every
+// frontend module calls the global fetch() with '/api/...' URLs, so
+// wrapping window.fetch here covers ALL API requests (JSON, FormData
+// uploads, DELETEs, ...) without touching individual call sites.
+//
+// When the server has no API key configured it never returns 401, so none
+// of this activates and behavior is identical to before.
+(function () {
+    'use strict';
+
+    var STORAGE_KEY = 'pynode_api_key';
+    var nativeFetch = window.fetch.bind(window);
+    var prompting = false; // Only ever prompt once (page reloads on success)
+
+    function getStoredKey() {
+        try {
+            return window.localStorage.getItem(STORAGE_KEY) || '';
+        } catch (e) {
+            return '';
+        }
+    }
+
+    function storeKey(key) {
+        try {
+            window.localStorage.setItem(STORAGE_KEY, key);
+        } catch (e) {
+            // localStorage unavailable; the key is lost on reload but the
+            // user will simply be prompted again.
+        }
+    }
+
+    function isApiRequest(input) {
+        var url = (typeof input === 'string') ? input : ((input && input.url) || '');
+        try {
+            var u = new URL(url, window.location.href);
+            return u.origin === window.location.origin && u.pathname.indexOf('/api/') === 0;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    function withApiKey(init, key) {
+        var next = Object.assign({}, init);
+        var headers = new Headers((init && init.headers) || undefined);
+        headers.set('X-API-Key', key);
+        next.headers = headers;
+        return next;
+    }
+
+    window.fetch = function (input, init) {
+        if (!isApiRequest(input)) {
+            return nativeFetch(input, init);
+        }
+        var key = getStoredKey();
+        return nativeFetch(input, key ? withApiKey(init, key) : init).then(function (response) {
+            if (response.status !== 401 || prompting) {
+                return response;
+            }
+            prompting = true;
+            var entered = window.prompt(
+                'This PyNode server requires an API key.\nEnter the API key:');
+            if (!entered) {
+                prompting = false;
+                return response; // User cancelled; surface the 401 as-is
+            }
+            storeKey(entered);
+            // Verify the key against the failed request, then reload so
+            // every in-flight/initial request reruns with the key attached.
+            return nativeFetch(input, withApiKey(init, entered)).then(function (retry) {
+                if (retry.status === 401) {
+                    prompting = false;
+                    window.alert('API key rejected by the server.');
+                    return retry;
+                }
+                window.location.reload();
+                // Hold callers until the reload tears the page down.
+                return new Promise(function () {});
+            });
+        });
+    };
+
+    // For consumers that cannot set headers (EventSource / SSE): returns the
+    // stored key so it can be passed as an api_key query parameter.
+    window.pynodeApiKey = getStoredKey;
+})();

pynode/static/js/clipboard.js

@@ -0,0 +1,152 @@
+// Clipboard management for copy, cut, paste operations
+import { state, generateNodeId, setModified, markNodeAdded } from './state.js';
+import { renderNode, generateUniqueName } from './nodes.js';
+import { createConnection } from './connections.js';
+import { selectNode, deselectAllNodes } from './selection.js';
+
+// Clipboard state
+const clipboard = {
+    nodes: [],
+    connections: [],
+    isCut: false
+};
+
+/**
+ * Copy selected nodes to clipboard
+ */
+export function copySelectedNodes() {
+    if (state.selectedNodes.size === 0) {
+        console.log('No nodes selected to copy');
+        return;
+    }
+    
+    clipboard.nodes = [];
+    clipboard.connections = [];
+    clipboard.isCut = false;
+    
+    // Copy node data. Deep-clone so the clipboard is an independent snapshot -
+    // a shallow copy shares the nested `config` object with the live node, so
+    // later edits to either would mutate both (and every paste of it).
+    state.selectedNodes.forEach(nodeId => {
+        const node = state.nodes.get(nodeId);
+        if (node) {
+            const snapshot = structuredClone(node);
+            snapshot.originalId = node.id;
+            clipboard.nodes.push(snapshot);
+        }
+    });
+    
+    // Copy connections between selected nodes
+    state.connections.forEach(conn => {
+        if (state.selectedNodes.has(conn.source) && state.selectedNodes.has(conn.target)) {
+            clipboard.connections.push({ ...conn });
+        }
+    });
+    
+    console.log(`Copied ${clipboard.nodes.length} nodes and ${clipboard.connections.length} connections`);
+}
+
+/**
+ * Cut selected nodes to clipboard
+ */
+export function cutSelectedNodes() {
+    if (state.selectedNodes.size === 0) {
+        console.log('No nodes selected to cut');
+        return;
+    }
+    
+    // First copy the nodes
+    copySelectedNodes();
+    clipboard.isCut = true;
+    
+    // Then delete them
+    const nodesToDelete = Array.from(state.selectedNodes);
+    
+    // Import deleteNode dynamically
+    import('./nodes.js').then(({ deleteNode }) => {
+        nodesToDelete.forEach(nodeId => {
+            deleteNode(nodeId);
+        });
+    });
+    
+    console.log(`Cut ${clipboard.nodes.length} nodes`);
+}
+
+/**
+ * Paste nodes from clipboard
+ */
+export function pasteNodes() {
+    if (clipboard.nodes.length === 0) {
+        console.log('Clipboard is empty');
+        return;
+    }
+    
+    // Clear current selection synchronously. (A dynamic import().then() runs as
+    // a microtask AFTER the paste loop below has already selected the new
+    // nodes, so it would wipe out that fresh selection.)
+    deselectAllNodes();
+
+    // Map old IDs to new IDs
+    const idMap = new Map();
+
+    // Calculate paste offset (20px down and right from original position).
+    // Node x/y and this offset are all CANVAS coordinates, so pasting is
+    // zoom-independent by construction - no client->canvas conversion needed.
+    const pasteOffset = clipboard.isCut ? 0 : 20;
+    
+    // Create new nodes
+    clipboard.nodes.forEach(nodeData => {
+        const newId = generateNodeId();
+        idMap.set(nodeData.originalId, newId);
+        
+        // Generate unique name for pasted node
+        const uniqueName = generateUniqueName(nodeData.name, nodeData.type);
+        
+        // Deep-clone so each pasted node gets its own `config` object rather
+        // than sharing the clipboard snapshot's (which repeated pastes would
+        // otherwise alias, leaking edits between the copies).
+        const newNode = {
+            ...structuredClone(nodeData),
+            id: newId,
+            name: uniqueName,
+            x: nodeData.x + pasteOffset,
+            y: nodeData.y + pasteOffset
+        };
+
+        delete newNode.originalId;
+        
+        state.nodes.set(newId, newNode);
+        renderNode(newNode);
+        markNodeAdded(newId);
+        
+        // Select the new node
+        selectNode(newId, true);
+    });
+    
+    // Recreate connections with new IDs
+    clipboard.connections.forEach(conn => {
+        const newSourceId = idMap.get(conn.source);
+        const newTargetId = idMap.get(conn.target);
+        
+        if (newSourceId && newTargetId) {
+            createConnection(newSourceId, newTargetId, conn.sourceOutput, conn.targetInput);
+        }
+    });
+    
+    // If this was a cut operation, clear the clipboard
+    if (clipboard.isCut) {
+        clipboard.nodes = [];
+        clipboard.connections = [];
+        clipboard.isCut = false;
+    }
+    
+    setModified(true);
+    console.log(`Pasted ${idMap.size} nodes`);
+}
+
+/**
+ * Check if clipboard has content
+ */
+export function hasClipboardContent() {
+    return clipboard.nodes.length > 0;
+}

pynode/static/js/config.js

@@ -0,0 +1,14 @@
+// Configuration and constants
+// Use relative path for API to work across different hosts and ports
+export const API_BASE = '/api';
+
+export const NODE_CATEGORIES = {
+    'common': { title: 'Common', nodes: [] },
+    'input': { title: 'Input', nodes: [] },
+    'output': { title: 'Output', nodes: [] },
+    'network': { title: 'Network', nodes: [] },
+    'vision': { title: 'Vision', nodes: [] },
+    'logic': { title: 'Logic', nodes: [] },
+    'system': { title: 'System', nodes: [] },
+    'custom': { title: 'Custom', nodes: [] }
+};