@nice2dev/ui-3d 1.1.0 → 1.1.1

package/dist/esm/material/NiceMaterialEditor.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useMemo, useEffect, useCallback, useReducer } from 'react';
+import styles from './MaterialEditor.module.css.js';
 import { MAX_ZOOM, MIN_ZOOM, NODE_CATEGORY_COLORS, NODE_CATEGORY_NAMES, NODE_WIDTH, NODE_HEADER_HEIGHT, PORT_HEIGHT, PORT_TYPE_COLORS, DEFAULT_GRID_SIZE } from './materialEditorTypes.js';
-import { MATERIAL_NODE_MAP, searchNodes, MATERIAL_NODE_DEFINITIONS } from './materialNodeDefinitions.js';
 import { compileShader, importGraphFromJSON, exportGraphToJSON, screenToGraph, updateNodeInGraph, calculateZoomToFit, cloneNode, generateNodeId, removeNodesFromGraph, removeConnectionFromGraph, getNodeDefinition, canConnect, createConnection, addConnectionToGraph, moveNodesInGraph, createNode, addNodeToGraph, createEmptyGraph } from './materialEditorUtils.js';
-import styles from './MaterialEditor.module.css.js';
+import { MATERIAL_NODE_MAP, searchNodes, MATERIAL_NODE_DEFINITIONS } from './materialNodeDefinitions.js';
 
 /* ═══════════════════════════════════════════════════════════════════════════
    State Reducer
@@ -41,8 +41,9 @@ function materialEditorReducer(state, action) {
     switch (action.type) {
         case 'ADD_NODE': {
             const node = createNode(action.nodeType, action.position);
-            if (!node)
+            if (!node) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
@@ -67,9 +68,10 @@ function materialEditorReducer(state, action) {
         }
         case 'UPDATE_NODE_PROPERTY': {
             const newState = pushToUndoStack(state);
-            const node = newState.graph.nodes.find(n => n.id === action.nodeId);
-            if (!node)
+            const node = newState.graph.nodes.find((n) => n.id === action.nodeId);
+            if (!node) {
                 return state;
+            }
             return {
                 ...newState,
                 graph: updateNodeInGraph(newState.graph, action.nodeId, {
@@ -79,9 +81,10 @@ function materialEditorReducer(state, action) {
         }
         case 'UPDATE_INPUT_VALUE': {
             const newState = pushToUndoStack(state);
-            const node = newState.graph.nodes.find(n => n.id === action.nodeId);
-            if (!node)
+            const node = newState.graph.nodes.find((n) => n.id === action.nodeId);
+            if (!node) {
                 return state;
+            }
             return {
                 ...newState,
                 graph: updateNodeInGraph(newState.graph, action.nodeId, {
@@ -90,21 +93,25 @@ function materialEditorReducer(state, action) {
             };
         }
         case 'CONNECT': {
-            const sourceNode = state.graph.nodes.find(n => n.id === action.connection.sourceNodeId);
-            const targetNode = state.graph.nodes.find(n => n.id === action.connection.targetNodeId);
-            if (!sourceNode || !targetNode)
+            const sourceNode = state.graph.nodes.find((n) => n.id === action.connection.sourceNodeId);
+            const targetNode = state.graph.nodes.find((n) => n.id === action.connection.targetNodeId);
+            if (!sourceNode || !targetNode) {
                 return state;
+            }
             const sourceDef = getNodeDefinition(sourceNode);
             const targetDef = getNodeDefinition(targetNode);
-            if (!sourceDef || !targetDef)
+            if (!sourceDef || !targetDef) {
                 return state;
-            const sourcePort = sourceDef.outputs.find(p => p.id === action.connection.sourcePortId);
-            const targetPort = targetDef.inputs.find(p => p.id === action.connection.targetPortId);
-            if (!sourcePort || !targetPort)
+            }
+            const sourcePort = sourceDef.outputs.find((p) => p.id === action.connection.sourcePortId);
+            const targetPort = targetDef.inputs.find((p) => p.id === action.connection.targetPortId);
+            if (!sourcePort || !targetPort) {
                 return state;
+            }
             const { valid } = canConnect(sourceNode, sourcePort, targetNode, targetPort, state.graph.connections);
-            if (!valid)
+            if (!valid) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
             const connection = createConnection(action.connection.sourceNodeId, action.connection.sourcePortId, action.connection.targetNodeId, action.connection.targetPortId);
             return {
@@ -117,7 +124,7 @@ function materialEditorReducer(state, action) {
             return {
                 ...newState,
                 graph: removeConnectionFromGraph(newState.graph, action.connectionId),
-                selectedConnections: state.selectedConnections.filter(id => id !== action.connectionId),
+                selectedConnections: state.selectedConnections.filter((id) => id !== action.connectionId),
             };
         }
         case 'SELECT_NODES': {
@@ -141,8 +148,8 @@ function materialEditorReducer(state, action) {
         case 'SELECT_ALL': {
             return {
                 ...state,
-                selectedNodes: state.graph.nodes.map(n => n.id),
-                selectedConnections: state.graph.connections.map(c => c.id),
+                selectedNodes: state.graph.nodes.map((n) => n.id),
+                selectedConnections: state.graph.connections.map((c) => c.id),
             };
         }
         case 'DESELECT_ALL': {
@@ -153,19 +160,21 @@ function materialEditorReducer(state, action) {
             };
         }
         case 'COPY': {
-            const nodesToCopy = state.graph.nodes.filter(n => state.selectedNodes.includes(n.id));
-            const connectionsToCopy = state.graph.connections.filter(c => state.selectedNodes.includes(c.sourceNodeId) && state.selectedNodes.includes(c.targetNodeId));
+            const nodesToCopy = state.graph.nodes.filter((n) => state.selectedNodes.includes(n.id));
+            const connectionsToCopy = state.graph.connections.filter((c) => state.selectedNodes.includes(c.sourceNodeId) &&
+                state.selectedNodes.includes(c.targetNodeId));
             return {
                 ...state,
                 clipboard: { nodes: nodesToCopy, connections: connectionsToCopy },
             };
         }
         case 'PASTE': {
-            if (!state.clipboard)
+            if (!state.clipboard) {
                 return state;
+            }
             const newState = pushToUndoStack(state);
             const idMap = new Map();
-            const newNodes = state.clipboard.nodes.map(node => {
+            const newNodes = state.clipboard.nodes.map((node) => {
                 const newId = generateNodeId();
                 idMap.set(node.id, newId);
                 return {
@@ -178,7 +187,7 @@ function materialEditorReducer(state, action) {
                     selected: false,
                 };
             });
-            const newConnections = state.clipboard.connections.map(conn => ({
+            const newConnections = state.clipboard.connections.map((conn) => ({
                 ...conn,
                 id: generateNodeId(),
                 sourceNodeId: idMap.get(conn.sourceNodeId),
@@ -191,31 +200,33 @@ function materialEditorReducer(state, action) {
                     nodes: [...newState.graph.nodes, ...newNodes],
                     connections: [...newState.graph.connections, ...newConnections],
                 },
-                selectedNodes: newNodes.map(n => n.id),
+                selectedNodes: newNodes.map((n) => n.id),
             };
         }
         case 'CUT': {
-            const nodesToCut = state.graph.nodes.filter(n => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
-            const connectionsToCut = state.graph.connections.filter(c => state.selectedNodes.includes(c.sourceNodeId) && state.selectedNodes.includes(c.targetNodeId));
+            const nodesToCut = state.graph.nodes.filter((n) => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
+            const connectionsToCut = state.graph.connections.filter((c) => state.selectedNodes.includes(c.sourceNodeId) &&
+                state.selectedNodes.includes(c.targetNodeId));
             const newState = pushToUndoStack(state);
             return {
                 ...newState,
                 clipboard: { nodes: nodesToCut, connections: connectionsToCut },
-                graph: removeNodesFromGraph(newState.graph, nodesToCut.map(n => n.id)),
+                graph: removeNodesFromGraph(newState.graph, nodesToCut.map((n) => n.id)),
                 selectedNodes: [],
             };
         }
         case 'DUPLICATE': {
-            const nodesToDupe = state.graph.nodes.filter(n => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
+            const nodesToDupe = state.graph.nodes.filter((n) => state.selectedNodes.includes(n.id) && n.id !== state.graph.outputNodeId);
             const newState = pushToUndoStack(state);
             const idMap = new Map();
-            const newNodes = nodesToDupe.map(node => {
+            const newNodes = nodesToDupe.map((node) => {
                 const cloned = cloneNode(node);
                 idMap.set(node.id, cloned.id);
                 return cloned;
             });
-            const connectionsToDupe = state.graph.connections.filter(c => state.selectedNodes.includes(c.sourceNodeId) && state.selectedNodes.includes(c.targetNodeId));
-            const newConnections = connectionsToDupe.map(conn => ({
+            const connectionsToDupe = state.graph.connections.filter((c) => state.selectedNodes.includes(c.sourceNodeId) &&
+                state.selectedNodes.includes(c.targetNodeId));
+            const newConnections = connectionsToDupe.map((conn) => ({
                 ...conn,
                 id: generateNodeId(),
                 sourceNodeId: idMap.get(conn.sourceNodeId),
@@ -228,12 +239,13 @@ function materialEditorReducer(state, action) {
                     nodes: [...newState.graph.nodes, ...newNodes],
                     connections: [...newState.graph.connections, ...newConnections],
                 },
-                selectedNodes: newNodes.map(n => n.id),
+                selectedNodes: newNodes.map((n) => n.id),
             };
         }
         case 'UNDO': {
-            if (state.undoStack.length === 0)
+            if (state.undoStack.length === 0) {
                 return state;
+            }
             const previous = state.undoStack[state.undoStack.length - 1];
             return {
                 ...state,
@@ -245,8 +257,9 @@ function materialEditorReducer(state, action) {
             };
         }
         case 'REDO': {
-            if (state.redoStack.length === 0)
+            if (state.redoStack.length === 0) {
                 return state;
+            }
             const next = state.redoStack[state.redoStack.length - 1];
             return {
                 ...state,
@@ -279,7 +292,7 @@ function materialEditorReducer(state, action) {
             return {
                 ...state,
                 expandedCategories: state.expandedCategories.includes(action.category)
-                    ? state.expandedCategories.filter(c => c !== action.category)
+                    ? state.expandedCategories.filter((c) => c !== action.category)
                     : [...state.expandedCategories, action.category],
             };
         case 'COLLAPSE_NODE':
@@ -351,9 +364,7 @@ function useMaterialEditor(initialGraph) {
     return { state, dispatch };
 }
 function NodePalette({ searchQuery, expandedCategories, onSearch, onToggleCategory, onAddNode, onDragStart, }) {
-    const filteredNodes = searchQuery
-        ? searchNodes(searchQuery)
-        : MATERIAL_NODE_DEFINITIONS;
+    const filteredNodes = searchQuery ? searchNodes(searchQuery) : MATERIAL_NODE_DEFINITIONS;
     const categories = useMemo(() => {
         const cats = new Map();
         for (const node of filteredNodes) {
@@ -364,15 +375,18 @@ function NodePalette({ searchQuery, expandedCategories, onSearch, onToggleCatego
         }
         return cats;
     }, [filteredNodes]);
-    return (jsxs("div", { className: styles.palette, children: [jsx("div", { className: styles.paletteSearch, children: jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: e => onSearch(e.target.value), className: styles.searchInput }) }), jsx("div", { className: styles.paletteCategories, children: Array.from(categories.entries()).map(([category, nodes]) => (jsxs("div", { className: styles.paletteCategory, children: [jsxs("button", { className: styles.categoryHeader, onClick: () => onToggleCategory(category), style: { borderLeftColor: NODE_CATEGORY_COLORS[category] }, children: [jsx("span", { className: styles.categoryIcon, children: expandedCategories.includes(category) ? '▼' : '►' }), jsx("span", { children: NODE_CATEGORY_NAMES[category] }), jsx("span", { className: styles.categoryCount, children: nodes.length })] }), expandedCategories.includes(category) && (jsx("div", { className: styles.categoryNodes, children: nodes.map(nodeDef => (jsxs("div", { className: styles.paletteNode, draggable: true, onDragStart: e => onDragStart(nodeDef.type, e), onDoubleClick: () => onAddNode(nodeDef.type), title: nodeDef.description, children: [jsx("span", { className: styles.nodeColor, style: { backgroundColor: nodeDef.color || NODE_CATEGORY_COLORS[nodeDef.category] } }), jsx("span", { className: styles.nodeName, children: nodeDef.name })] }, nodeDef.type))) }))] }, category))) })] }));
+    return (jsxs("div", { className: styles.palette, children: [jsx("div", { className: styles.paletteSearch, children: jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => onSearch(e.target.value), className: styles.searchInput }) }), jsx("div", { className: styles.paletteCategories, children: Array.from(categories.entries()).map(([category, nodes]) => (jsxs("div", { className: styles.paletteCategory, children: [jsxs("button", { className: styles.categoryHeader, onClick: () => onToggleCategory(category), style: { borderLeftColor: NODE_CATEGORY_COLORS[category] }, children: [jsx("span", { className: styles.categoryIcon, children: expandedCategories.includes(category) ? '▼' : '►' }), jsx("span", { children: NODE_CATEGORY_NAMES[category] }), jsx("span", { className: styles.categoryCount, children: nodes.length })] }), expandedCategories.includes(category) && (jsx("div", { className: styles.categoryNodes, children: nodes.map((nodeDef) => (jsxs("div", { className: styles.paletteNode, draggable: true, onDragStart: (e) => onDragStart(nodeDef.type, e), onDoubleClick: () => onAddNode(nodeDef.type), title: nodeDef.description, children: [jsx("span", { className: styles.nodeColor, style: {
+                                            backgroundColor: nodeDef.color || NODE_CATEGORY_COLORS[nodeDef.category],
+                                        } }), jsx("span", { className: styles.nodeName, children: nodeDef.name })] }, nodeDef.type))) }))] }, category))) })] }));
 }
 function GraphNode({ node, definition, selected, viewTransform, connections, onSelect, onMove, onStartConnection, }) {
     const nodeRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const dragStart = useRef(null);
     const handleMouseDown = (e) => {
-        if (e.button !== 0)
+        if (e.button !== 0) {
             return;
+        }
         e.stopPropagation();
         if (!selected) {
             onSelect(node.id, e.shiftKey || e.ctrlKey);
@@ -383,8 +397,9 @@ function GraphNode({ node, definition, selected, viewTransform, connections, onS
         }
     };
     useEffect(() => {
-        if (!isDragging)
+        if (!isDragging) {
             return;
+        }
         const handleMouseMove = (e) => {
             if (dragStart.current) {
                 const delta = {
@@ -428,12 +443,12 @@ function GraphNode({ node, definition, selected, viewTransform, connections, onS
             transform: `scale(${viewTransform.zoom})`,
             transformOrigin: 'top left',
         }, onMouseDown: handleMouseDown, children: [jsxs("div", { className: styles.nodeHeader, style: { backgroundColor: nodeColor }, children: [jsx("span", { className: styles.nodeTitle, children: definition.name }), node.locked && jsx("span", { className: styles.lockIcon, children: "\uD83D\uDD12" })] }), !node.collapsed && (jsxs("div", { className: styles.nodePorts, children: [jsx("div", { className: styles.inputPorts, children: definition.inputs.map((port, index) => {
-                            const isConnected = connections.some(c => c.targetNodeId === node.id && c.targetPortId === port.id);
-                            return (jsxs("div", { className: styles.port, style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT }, children: [jsx("div", { className: `${styles.portHandle} ${styles.inputHandle} ${isConnected ? styles.connected : ''}`, style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] }, onMouseDown: e => handlePortMouseDown(e, port.id, 'input') }), jsx("span", { className: styles.portLabel, children: port.name })] }, port.id));
+                            const isConnected = connections.some((c) => c.targetNodeId === node.id && c.targetPortId === port.id);
+                            return (jsxs("div", { className: styles.port, style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT }, children: [jsx("div", { className: `${styles.portHandle} ${styles.inputHandle} ${isConnected ? styles.connected : ''}`, style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] }, onMouseDown: (e) => handlePortMouseDown(e, port.id, 'input') }), jsx("span", { className: styles.portLabel, children: port.name })] }, port.id));
                         }) }), jsx("div", { className: styles.outputPorts, children: definition.outputs.map((port, index) => {
-                            const isConnected = connections.some(c => c.sourceNodeId === node.id && c.sourcePortId === port.id);
-                            return (jsxs("div", { className: styles.port, style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT }, children: [jsx("span", { className: styles.portLabel, children: port.name }), jsx("div", { className: `${styles.portHandle} ${styles.outputHandle} ${isConnected ? styles.connected : ''}`, style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] }, onMouseDown: e => handlePortMouseDown(e, port.id, 'output') })] }, port.id));
-                        }) })] })), node.comment && (jsx("div", { className: styles.nodeComment, children: node.comment }))] }));
+                            const isConnected = connections.some((c) => c.sourceNodeId === node.id && c.sourcePortId === port.id);
+                            return (jsxs("div", { className: styles.port, style: { top: index * PORT_HEIGHT + NODE_HEADER_HEIGHT }, children: [jsx("span", { className: styles.portLabel, children: port.name }), jsx("div", { className: `${styles.portHandle} ${styles.outputHandle} ${isConnected ? styles.connected : ''}`, style: { backgroundColor: PORT_TYPE_COLORS[port.dataType] }, onMouseDown: (e) => handlePortMouseDown(e, port.id, 'output') })] }, port.id));
+                        }) })] })), node.comment && jsx("div", { className: styles.nodeComment, children: node.comment })] }));
 }
 function Toolbar({ canUndo, canRedo, canPaste, hasSelection, autoCompile, compiling, showGrid, snapToGrid, onUndo, onRedo, onCopy, onCut, onPaste, onDuplicate, onDelete, onSelectAll, onZoomToFit, onToggleGrid, onToggleSnap, onToggleAutoCompile, onCompile, onNew, onExport, onImport, }) {
     return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onNew, title: "New Material (Ctrl+N)", children: "\uD83D\uDCC4" }), jsx("button", { onClick: onImport, title: "Import (Ctrl+O)", children: "\uD83D\uDCC2" }), jsx("button", { onClick: onExport, title: "Export (Ctrl+S)", children: "\uD83D\uDCBE" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", children: "\u21A9\uFE0F" }), jsx("button", { onClick: onRedo, disabled: !canRedo, title: "Redo (Ctrl+Y)", children: "\u21AA\uFE0F" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onCut, disabled: !hasSelection, title: "Cut (Ctrl+X)", children: "\u2702\uFE0F" }), jsx("button", { onClick: onCopy, disabled: !hasSelection, title: "Copy (Ctrl+C)", children: "\uD83D\uDCCB" }), jsx("button", { onClick: onPaste, disabled: !canPaste, title: "Paste (Ctrl+V)", children: "\uD83D\uDCE5" }), jsx("button", { onClick: onDuplicate, disabled: !hasSelection, title: "Duplicate (Ctrl+D)", children: "\uD83D\uDD04" }), jsx("button", { onClick: onDelete, disabled: !hasSelection, title: "Delete (Del)", children: "\uD83D\uDDD1\uFE0F" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onSelectAll, title: "Select All (Ctrl+A)", children: "\u2B1C" }), jsx("button", { onClick: onZoomToFit, title: "Zoom to Fit (F)", children: "\uD83D\uDD0D" }), jsx("button", { onClick: onToggleGrid, className: showGrid ? styles.active : '', title: "Toggle Grid (G)", children: "#" }), jsx("button", { onClick: onToggleSnap, className: snapToGrid ? styles.active : '', title: "Toggle Snap (S)", children: "\uD83E\uDDF2" })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onToggleAutoCompile, className: autoCompile ? styles.active : '', title: "Auto Compile", children: "\u26A1" }), jsx("button", { onClick: onCompile, disabled: compiling, title: "Compile (F5)", children: compiling ? '⏳' : '▶️' })] })] }));
@@ -444,11 +459,13 @@ function PreviewPanel({ shader, mode, compiling, onModeChange }) {
     // Simple preview rendering (in real implementation would use Three.js)
     useEffect(() => {
         const canvas = canvasRef.current;
-        if (!canvas)
+        if (!canvas) {
             return;
+        }
         const ctx = canvas.getContext('2d');
-        if (!ctx)
+        if (!ctx) {
             return;
+        }
         // Simple gradient preview
         const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
         if ((shader === null || shader === void 0 ? void 0 : shader.errors.length) === 0) {
@@ -466,7 +483,7 @@ function PreviewPanel({ shader, mode, compiling, onModeChange }) {
         ctx.arc(100, 100, 80, 0, Math.PI * 2);
         ctx.fill();
     }, [shader, mode]);
-    return (jsxs("div", { className: styles.previewPanel, children: [jsxs("div", { className: styles.previewHeader, children: [jsx("span", { children: "Preview" }), jsx("select", { value: mode, onChange: e => onModeChange(e.target.value), className: styles.previewModeSelect, children: previewModes.map(m => (jsx("option", { value: m, children: m.charAt(0).toUpperCase() + m.slice(1) }, m))) })] }), jsxs("div", { className: styles.previewCanvas, children: [compiling && jsx("div", { className: styles.previewCompiling, children: "Compiling..." }), jsx("canvas", { ref: canvasRef, width: 200, height: 200 })] }), (shader === null || shader === void 0 ? void 0 : shader.errors.length) ? (jsx("div", { className: styles.previewErrors, children: shader.errors.slice(0, 3).map((err, i) => (jsx("div", { className: styles.previewError, children: err.message }, i))) })) : null] }));
+    return (jsxs("div", { className: styles.previewPanel, children: [jsxs("div", { className: styles.previewHeader, children: [jsx("span", { children: "Preview" }), jsx("select", { value: mode, onChange: (e) => onModeChange(e.target.value), className: styles.previewModeSelect, children: previewModes.map((m) => (jsx("option", { value: m, children: m.charAt(0).toUpperCase() + m.slice(1) }, m))) })] }), jsxs("div", { className: styles.previewCanvas, children: [compiling && jsx("div", { className: styles.previewCompiling, children: "Compiling..." }), jsx("canvas", { ref: canvasRef, width: 200, height: 200 })] }), (shader === null || shader === void 0 ? void 0 : shader.errors.length) ? (jsx("div", { className: styles.previewErrors, children: shader.errors.slice(0, 3).map((err, i) => (jsx("div", { className: styles.previewError, children: err.message }, i))) })) : null] }));
 }
 /* ═══════════════════════════════════════════════════════════════════════════
    Main Component
@@ -478,7 +495,7 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     // Merge custom node definitions
     const definitions = useMemo(() => {
         const map = new Map(MATERIAL_NODE_MAP);
-        customNodes === null || customNodes === void 0 ? void 0 : customNodes.forEach(def => map.set(def.type, def));
+        customNodes === null || customNodes === void 0 ? void 0 : customNodes.forEach((def) => map.set(def.type, def));
         return map;
     }, [customNodes]);
     // Notify parent of changes
@@ -493,8 +510,9 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     // Keyboard shortcuts
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (readOnly)
+            if (readOnly) {
                 return;
+            }
             const isCtrl = e.ctrlKey || e.metaKey;
             if (isCtrl && e.key === 'z') {
                 e.preventDefault();
@@ -557,8 +575,9 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         const delta = e.deltaY > 0 ? 0.9 : 1.1;
         const newZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, state.viewTransform.zoom * delta));
         const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
+        if (!rect) {
             return;
+        }
         const mouseX = e.clientX - rect.left;
         const mouseY = e.clientY - rect.top;
         const newX = mouseX - (mouseX - state.viewTransform.x) * (newZoom / state.viewTransform.zoom);
@@ -615,11 +634,13 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         var _a;
         e.preventDefault();
         const nodeType = e.dataTransfer.getData('text/plain');
-        if (!nodeType)
+        if (!nodeType) {
             return;
+        }
         const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
+        if (!rect) {
             return;
+        }
         const position = screenToGraph({ x: e.clientX - rect.left, y: e.clientY - rect.top }, state.viewTransform);
         dispatch({ type: 'ADD_NODE', nodeType, position });
     };
@@ -659,8 +680,9 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
         input.onchange = async (e) => {
             var _a;
             const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-            if (!file)
+            if (!file) {
                 return;
+            }
             const text = await file.text();
             const graph = importGraphFromJSON(text);
             if (graph) {
@@ -671,24 +693,37 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     };
     // Render connections
     const renderConnections = () => {
-        return state.graph.connections.map(conn => {
-            const sourceNode = state.graph.nodes.find(n => n.id === conn.sourceNodeId);
-            const targetNode = state.graph.nodes.find(n => n.id === conn.targetNodeId);
-            if (!sourceNode || !targetNode)
+        return state.graph.connections.map((conn) => {
+            const sourceNode = state.graph.nodes.find((n) => n.id === conn.sourceNodeId);
+            const targetNode = state.graph.nodes.find((n) => n.id === conn.targetNodeId);
+            if (!sourceNode || !targetNode) {
                 return null;
+            }
             const sourceDef = definitions.get(sourceNode.type);
             const targetDef = definitions.get(targetNode.type);
-            if (!sourceDef || !targetDef)
+            if (!sourceDef || !targetDef) {
                 return null;
-            const sourcePortIndex = sourceDef.outputs.findIndex(p => p.id === conn.sourcePortId);
-            const targetPortIndex = targetDef.inputs.findIndex(p => p.id === conn.targetPortId);
-            if (sourcePortIndex === -1 || targetPortIndex === -1)
+            }
+            const sourcePortIndex = sourceDef.outputs.findIndex((p) => p.id === conn.sourcePortId);
+            const targetPortIndex = targetDef.inputs.findIndex((p) => p.id === conn.targetPortId);
+            if (sourcePortIndex === -1 || targetPortIndex === -1) {
                 return null;
+            }
             const sourcePort = sourceDef.outputs[sourcePortIndex];
             const x1 = (sourceNode.position.x + NODE_WIDTH) * state.viewTransform.zoom + state.viewTransform.x;
-            const y1 = (sourceNode.position.y + NODE_HEADER_HEIGHT + sourcePortIndex * PORT_HEIGHT + PORT_HEIGHT / 2) * state.viewTransform.zoom + state.viewTransform.y;
+            const y1 = (sourceNode.position.y +
+                NODE_HEADER_HEIGHT +
+                sourcePortIndex * PORT_HEIGHT +
+                PORT_HEIGHT / 2) *
+                state.viewTransform.zoom +
+                state.viewTransform.y;
             const x2 = targetNode.position.x * state.viewTransform.zoom + state.viewTransform.x;
-            const y2 = (targetNode.position.y + NODE_HEADER_HEIGHT + targetPortIndex * PORT_HEIGHT + PORT_HEIGHT / 2) * state.viewTransform.zoom + state.viewTransform.y;
+            const y2 = (targetNode.position.y +
+                NODE_HEADER_HEIGHT +
+                targetPortIndex * PORT_HEIGHT +
+                PORT_HEIGHT / 2) *
+                state.viewTransform.zoom +
+                state.viewTransform.y;
             const isSelected = state.selectedConnections.includes(conn.id);
             const controlX = (x1 + x2) / 2;
             return (jsx("path", { d: `M ${x1} ${y1} C ${controlX} ${y1}, ${controlX} ${y2}, ${x2} ${y2}`, fill: "none", stroke: isSelected ? '#fff' : PORT_TYPE_COLORS[sourcePort.dataType], strokeWidth: isSelected ? 3 : 2, className: styles.connection, onClick: () => dispatch({ type: 'SELECT_CONNECTIONS', connectionIds: [conn.id] }) }, conn.id));
@@ -697,11 +732,13 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     // Render pending connection
     const renderPendingConnection = () => {
         var _a;
-        if (!pendingConnection)
+        if (!pendingConnection) {
             return null;
+        }
         const rect = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!rect)
+        if (!rect) {
             return null;
+        }
         const x1 = pendingConnection.startPosition.x - rect.left;
         const y1 = pendingConnection.startPosition.y - rect.top;
         const x2 = pendingConnection.currentPosition.x - rect.left;
@@ -711,8 +748,9 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
     };
     // Render grid
     const renderGrid = () => {
-        if (!state.showGrid)
+        if (!state.showGrid) {
             return null;
+        }
         const gridSize = state.gridSize * state.viewTransform.zoom;
         const offsetX = state.viewTransform.x % gridSize;
         const offsetY = state.viewTransform.y % gridSize;
@@ -722,12 +760,17 @@ function NiceMaterialEditor({ graph: initialGraph, onGraphChange, onCompile, cus
                     dispatch({ type: 'COMPILE' });
                     const shader = compileShader(state.graph, definitions);
                     dispatch({ type: 'SET_COMPILED_SHADER', shader });
-                }, onNew: () => dispatch({ type: 'NEW_GRAPH' }), onExport: handleExport, onImport: handleImport })), jsxs("div", { className: styles.editorBody, children: [showPalette && (jsx(NodePalette, { searchQuery: state.searchQuery, expandedCategories: state.expandedCategories, onSearch: query => dispatch({ type: 'SET_SEARCH_QUERY', query }), onToggleCategory: cat => dispatch({ type: 'TOGGLE_CATEGORY', category: cat }), onAddNode: handlePaletteAddNode, onDragStart: handlePaletteDragStart })), jsxs("div", { ref: canvasRef, className: styles.graphCanvas, onWheel: handleWheel, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, onDragOver: handleDragOver, onDrop: handleDrop, children: [jsxs("svg", { className: styles.connectionsSvg, children: [jsx("defs", { children: renderGrid() }), state.showGrid && jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" }), renderConnections(), renderPendingConnection()] }), state.graph.nodes.map(node => {
+                }, onNew: () => dispatch({ type: 'NEW_GRAPH' }), onExport: handleExport, onImport: handleImport })), jsxs("div", { className: styles.editorBody, children: [showPalette && (jsx(NodePalette, { searchQuery: state.searchQuery, expandedCategories: state.expandedCategories, onSearch: (query) => dispatch({ type: 'SET_SEARCH_QUERY', query }), onToggleCategory: (cat) => dispatch({ type: 'TOGGLE_CATEGORY', category: cat }), onAddNode: handlePaletteAddNode, onDragStart: handlePaletteDragStart })), jsxs("div", { ref: canvasRef, className: styles.graphCanvas, onWheel: handleWheel, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, onDragOver: handleDragOver, onDrop: handleDrop, children: [jsxs("svg", { className: styles.connectionsSvg, children: [jsx("defs", { children: renderGrid() }), state.showGrid && jsx("rect", { width: "100%", height: "100%", fill: "url(#grid)" }), renderConnections(), renderPendingConnection()] }), state.graph.nodes.map((node) => {
                                 const def = definitions.get(node.type);
-                                if (!def)
+                                if (!def) {
                                     return null;
-                                return (jsx(GraphNode, { node: node, definition: def, selected: state.selectedNodes.includes(node.id), viewTransform: state.viewTransform, connections: state.graph.connections, onSelect: (nodeId, additive) => dispatch({ type: 'SELECT_NODES', nodeIds: [nodeId], additive }), onMove: (nodeId, delta) => dispatch({ type: 'MOVE_NODES', nodeIds: state.selectedNodes.includes(nodeId) ? state.selectedNodes : [nodeId], delta }), onStartConnection: handleStartConnection }, node.id));
-                            })] }), showPreview && (jsx(PreviewPanel, { shader: state.compiledShader, mode: state.previewMode, compiling: state.compiling, onModeChange: mode => dispatch({ type: 'SET_PREVIEW_MODE', mode }) }))] })] }));
+                                }
+                                return (jsx(GraphNode, { node: node, definition: def, selected: state.selectedNodes.includes(node.id), viewTransform: state.viewTransform, connections: state.graph.connections, onSelect: (nodeId, additive) => dispatch({ type: 'SELECT_NODES', nodeIds: [nodeId], additive }), onMove: (nodeId, delta) => dispatch({
+                                        type: 'MOVE_NODES',
+                                        nodeIds: state.selectedNodes.includes(nodeId) ? state.selectedNodes : [nodeId],
+                                        delta,
+                                    }), onStartConnection: handleStartConnection }, node.id));
+                            })] }), showPreview && (jsx(PreviewPanel, { shader: state.compiledShader, mode: state.previewMode, compiling: state.compiling, onModeChange: (mode) => dispatch({ type: 'SET_PREVIEW_MODE', mode }) }))] })] }));
 }
 
 export { NiceMaterialEditor, useMaterialEditor };