From 37c5e82a23d42d4303418325636c441b96641b80 Mon Sep 17 00:00:00 2001 From: Md Afiq Iskandar Date: Wed, 9 Jul 2025 09:13:47 +0800 Subject: [PATCH] Remove Console Logs from Process Flow Components for Cleaner Code - Eliminated unnecessary console log statements from ProcessFlowCanvas.vue and index.vue to enhance code cleanliness and maintainability. - Updated the success toast function in index.vue to silence success messages, reducing clutter in the console. - Ensured that the functionality remains intact while improving the overall readability of the codebase. --- components/process-flow/ProcessFlowCanvas.vue | 68 +++++-------------- pages/process-builder/index.vue | 65 +++++++----------- 2 files changed, 44 insertions(+), 89 deletions(-) diff --git a/components/process-flow/ProcessFlowCanvas.vue b/components/process-flow/ProcessFlowCanvas.vue index 06e269a..2f87548 100644 --- a/components/process-flow/ProcessFlowCanvas.vue +++ b/components/process-flow/ProcessFlowCanvas.vue @@ -62,7 +62,6 @@ const { multiSelectionKeyCode: 'Control', connectionMode: 'strict', isValidConnection: (connection) => { - console.log('Validating connection:', connection); return true; } }); @@ -135,8 +134,6 @@ const onNodeClick = ({ node }) => { // Handle edge click const onEdgeClick = (event, edge) => { - console.log('Edge click received:', { event, edge }); - // Handle different parameter formats Vue Flow might send let actualEdge = edge; @@ -209,8 +206,6 @@ onMounted(() => { // Center on a specific node const centerOnNode = (nodeId, nodePosition) => { - console.log('centerOnNode called with:', nodeId, nodePosition); - if (!nodePosition) { // Try to find the node position from current nodes const targetNode = nodes.value.find(n => n.id === nodeId); @@ -237,7 +232,6 @@ const centerOnNode = (nodeId, nodePosition) => { zoom: 1.2 }; - console.log('Setting viewport to:', newViewport); setViewport(newViewport, { duration: 800 }); } catch (error) { @@ -249,8 +243,6 @@ const centerOnNode = (nodeId, nodePosition) => { // Watch for changes to highlightedNodeId and apply highlighting watch(() => props.highlightedNodeId, (newHighlightedId, oldHighlightedId) => { - console.log('Highlighting changed:', { new: newHighlightedId, old: oldHighlightedId }); - // Remove highlight from previously highlighted node if (oldHighlightedId) { const oldNode = nodes.value.find(node => node.id === oldHighlightedId); @@ -283,7 +275,6 @@ watch(() => props.highlightedNodeId, (newHighlightedId, oldHighlightedId) => { } }); - console.log('Removed highlight from node:', oldHighlightedId); } } @@ -324,14 +315,11 @@ watch(() => props.highlightedNodeId, (newHighlightedId, oldHighlightedId) => { customNode.style.zIndex = '999'; customNode.style.transition = 'all 0.3s ease-in-out'; } - console.log('Applied highlight to DOM element with inline styles:', nodeElement); } else { console.warn('Could not find DOM element for node:', newHighlightedId); } }); - console.log('Added highlight to node:', newHighlightedId, 'data:', newNode.data); - // Force node update updateNodeInternals([newHighlightedId]); } else { @@ -532,7 +520,7 @@ onEdgesChange((changes) => { const handleConnect = (connection) => { if (!connection.source || !connection.target) return; - console.log('Connection created:', connection); + // Try to determine if this is coming from a gateway const sourceNode = nodes.value.find(node => node.id === connection.source); @@ -578,12 +566,7 @@ const handleConnect = (connection) => { label: label }; - console.log('Creating edge with handles:', { - sourceHandle: connection.sourceHandle, - targetHandle: connection.targetHandle, - source: connection.source, - target: connection.target - }); + // Add the edge directly to Vue Flow for immediate visual feedback addEdges([newEdge]); @@ -666,7 +649,7 @@ const onDrop = (event) => { // This ensures the node persists in the application state and can be saved emit('nodesChange', [{ type: 'add', id: newNode.id, item: newNode }], nodes.value); - console.log('🎯 Node dropped and added:', newNode.type, newNode.id); + } catch (error) { console.error('Error handling drop:', error); } @@ -733,8 +716,6 @@ function removeNode(nodeId) { // Add explicit sync method to manually update canvas function syncCanvas(newNodes, newEdges) { - console.log('Explicit canvas sync called:', newNodes?.length, 'nodes,', newEdges?.length, 'edges'); - // Force clear the updating flags first to ensure we can process isUpdatingNodes.value = false; isUpdatingEdges.value = false; @@ -742,26 +723,21 @@ function syncCanvas(newNodes, newEdges) { // Wait a moment for any ongoing operations to complete setTimeout(() => { try { - console.log('Starting canvas sync operation...'); // Sync nodes first if (newNodes && Array.isArray(newNodes)) { const currentNodeIds = new Set(nodes.value.map(n => n.id)); const newNodeIds = new Set(newNodes.map(n => n.id)); - console.log('Current nodes:', currentNodeIds.size, 'New nodes:', newNodeIds.size); - // Remove nodes that are no longer in the new list const nodesToRemove = nodes.value.filter(node => !newNodeIds.has(node.id)); if (nodesToRemove.length > 0) { - console.log('Removing nodes:', nodesToRemove.map(n => n.id)); removeNodes(nodesToRemove); } // Add new nodes that aren't already present const nodesToAdd = newNodes.filter(node => !currentNodeIds.has(node.id)); if (nodesToAdd.length > 0) { - console.log('Adding nodes:', nodesToAdd.map(n => n.id)); addNodes([...nodesToAdd]); } @@ -779,26 +755,26 @@ function syncCanvas(newNodes, newEdges) { }); } - console.log('Nodes processed, current count:', nodes.value.length); + // Sync edges after nodes are updated if (newEdges && Array.isArray(newEdges) && nodes.value.length > 0) { const currentEdgeIds = new Set(edges.value.map(e => e.id)); const newEdgeIds = new Set(newEdges.map(e => e.id)); - console.log('Current edges:', currentEdgeIds.size, 'New edges:', newEdgeIds.size); + // Remove edges that are no longer in the new list const edgesToRemove = edges.value.filter(edge => !newEdgeIds.has(edge.id)); if (edgesToRemove.length > 0) { - console.log('Removing edges:', edgesToRemove.map(e => e.id)); + removeEdges(edgesToRemove); } // Add new edges that aren't already present const edgesToAdd = newEdges.filter(edge => !currentEdgeIds.has(edge.id)); if (edgesToAdd.length > 0) { - console.log('Processing new edges:', edgesToAdd.map(e => `${e.source}->${e.target}`)); + // Verify nodes exist and add handles const validEdges = edgesToAdd.filter(edge => { @@ -813,12 +789,12 @@ function syncCanvas(newNodes, newEdges) { return true; }); - console.log('Valid edges to add:', validEdges.length); + const edgesWithHandles = validEdges.map(edge => { // If edge already has sourceHandle and targetHandle, use them if (edge.sourceHandle && edge.targetHandle) { - console.log(`Edge ${edge.id} already has handles:`, edge.sourceHandle, '->', edge.targetHandle); + return edge; } @@ -846,12 +822,12 @@ function syncCanvas(newNodes, newEdges) { } } - console.log(`Generated handles for edge ${edge.id}:`, sourceHandle, '->', targetHandle); + return { ...edge, sourceHandle, targetHandle }; }); if (edgesWithHandles.length > 0) { - console.log('Adding edges with handles:', edgesWithHandles.length); + addEdges([...edgesWithHandles]); } } @@ -872,7 +848,7 @@ function syncCanvas(newNodes, newEdges) { console.warn('Cannot add edges: nodes not ready. Node count:', nodes.value.length); } - console.log('Canvas sync completed - Final count: nodes:', nodes.value.length, 'edges:', edges.value.length); + } catch (error) { console.error('Error during canvas sync:', error); @@ -908,11 +884,7 @@ function toObject() { viewport: getViewport() }; - console.log('💾 Captured clean flow state:', { - nodes: flowObject.nodes?.length || 0, - edges: flowObject.edges?.length || 0, - viewport: flowObject.viewport - }); + return flowObject; } catch (error) { @@ -941,11 +913,7 @@ function fromObject(flowObject) { return new Promise((resolve) => { try { - console.log('🔄 Restoring complete flow state:', { - nodes: flowObject.nodes?.length || 0, - edges: flowObject.edges?.length || 0, - viewport: flowObject.viewport - }); + // Clear updating flags to ensure clean restoration isUpdatingNodes.value = false; @@ -976,7 +944,7 @@ function fromObject(flowObject) { // Only include essential properties needed for Vue Flow })); - console.log('Restoring nodes:', nodesToRestore.length, nodesToRestore.map(n => `${n.id} (${n.type})`)); + addNodes(nodesToRestore); await nextTick(); @@ -1000,7 +968,7 @@ function fromObject(flowObject) { }); if (validEdges.length > 0) { - console.log('Restoring edges:', validEdges.length); + // Clean edge data before adding const cleanEdges = validEdges.map(edge => ({ @@ -1028,11 +996,11 @@ function fromObject(flowObject) { y: flowObject.viewport.y || 0, zoom: flowObject.viewport.zoom || 1 }; - console.log('Restoring viewport:', viewport); + setViewport(viewport, { duration: 0 }); // No animation for restore } - console.log('✅ Flow state restoration completed successfully'); + resolve(); } catch (error) { diff --git a/pages/process-builder/index.vue b/pages/process-builder/index.vue index 919de48..53cb13d 100644 --- a/pages/process-builder/index.vue +++ b/pages/process-builder/index.vue @@ -43,7 +43,7 @@ try { } catch (error) { // Create a simple toast object if composable is not available toast = { - success: (msg) => console.log('Success:', msg), + success: (msg) => {}, // Silent success error: (msg) => console.error('Error:', msg), info: (msg) => console.info('Info:', msg), warning: (msg) => console.warn('Warning:', msg) @@ -160,7 +160,7 @@ const onPaneClickMobile = () => { // Handle node highlighting from variable usage const handleNodeHighlight = (event) => { - console.log('Received highlight event:', event.detail); + const { nodeId, node } = event.detail; // Clear any existing highlight timeout @@ -170,13 +170,13 @@ const handleNodeHighlight = (event) => { // Set the highlighted node highlightedNodeId.value = nodeId; - console.log('Set highlighted node ID to:', nodeId); + // Center the view on the highlighted node if (processFlowCanvas.value && node) { nextTick(() => { try { - console.log('Attempting to center view on node:', node); + // Call the exposed methods from ProcessFlowCanvas if (processFlowCanvas.value.centerOnNode) { @@ -502,8 +502,7 @@ const onNodesChange = (changes, currentNodes) => { // Skip processing during component addition to avoid conflicts if (isAddingComponent.value) { - console.log('🔄 Skipping node changes during component addition'); - return; + return; } // Handle position changes (only when dragging is complete) @@ -515,7 +514,7 @@ const onNodesChange = (changes, currentNodes) => { }); if (Object.keys(positionChanges).length > 0) { - console.log('📍 Updating node positions:', Object.keys(positionChanges)); + processStore.updateNodePositions(positionChanges); } @@ -525,7 +524,7 @@ const onNodesChange = (changes, currentNodes) => { .map(change => change.id); if (removedNodes.length > 0) { - console.log('🗑️ Removing nodes:', removedNodes); + removedNodes.forEach(nodeId => { processStore.deleteNode(nodeId); }); @@ -876,15 +875,12 @@ const saveProcess = async () => { // Capture complete Vue Flow state before saving if (processFlowCanvas.value && processFlowCanvas.value.toObject) { - console.log('💾 Capturing Vue Flow state before save...'); + try { + const flowState = processFlowCanvas.value.toObject(); - try { - const flowState = processFlowCanvas.value.toObject(); - - if (flowState && flowState.nodes) { - // Set the captured flow state in the store for saving - processStore.setFlowStateForSave(flowState); - console.log('✅ Vue Flow state captured successfully'); + if (flowState && flowState.nodes) { + // Set the captured flow state in the store for saving + processStore.setFlowStateForSave(flowState); } else { console.warn('⚠️ Vue Flow state capture returned invalid data, proceeding with store data'); } @@ -950,7 +946,7 @@ const onAddComponent = async (component) => { // Select the newly added node onNodeSelected(newNode); - console.log('Component added successfully:', component.type); + } catch (error) { console.error('Error adding component:', error); } finally { @@ -964,13 +960,11 @@ const onAddComponent = async (component) => { // Handle template application const applyProcessTemplate = async (template) => { try { - console.log('Applying process template:', template.name); - console.log('Template nodes:', template.nodes ? template.nodes.length : 0); - console.log('Template edges:', template.edges ? template.edges.length : 0); + // Create a new process if one doesn't exist if (!processStore.currentProcess) { - console.log('No current process, creating new one...'); + processStore.createProcess(template.name, template.description || 'Process created from template'); } else { // Confirm if there's already content in the existing process @@ -989,7 +983,7 @@ const applyProcessTemplate = async (template) => { // Clear current process nodes and edges if (processStore.currentProcess) { - console.log('Clearing existing nodes and edges...'); + processStore.currentProcess.nodes = []; processStore.currentProcess.edges = []; } @@ -998,8 +992,7 @@ const applyProcessTemplate = async (template) => { const templateNodes = template.nodes || []; const templateEdges = template.edges || []; - console.log('Adding template nodes:', templateNodes.length); - console.log('Adding template edges:', templateEdges.length); + // Process nodes first and wait for them to be fully added for (const node of templateNodes) { @@ -1038,7 +1031,7 @@ const applyProcessTemplate = async (template) => { // Explicitly sync the canvas to ensure everything is displayed if (processFlowCanvas.value && processFlowCanvas.value.syncCanvas) { - console.log('Forcing canvas sync after template application...'); + processFlowCanvas.value.syncCanvas( processStore.currentProcess.nodes, processStore.currentProcess.edges @@ -1047,13 +1040,13 @@ const applyProcessTemplate = async (template) => { // Add template variables to the variable store if (template.variables && template.variables.length > 0) { - console.log('Adding template variables:', template.variables.length); + // Clear existing process variables first (they'll be loaded from the process) // Process variables are now managed directly in the process store template.variables.forEach((variable) => { - console.log(`Adding variable: ${variable.name} (${variable.type}) with scope: ${variable.scope}`); + processStore.addProcessVariable({ ...variable, id: crypto.randomUUID() // Generate unique ID for the variable @@ -1061,7 +1054,7 @@ const applyProcessTemplate = async (template) => { }); } - console.log('Template application completed - nodes:', processStore.currentProcess.nodes.length, 'edges:', processStore.currentProcess.edges.length); + // Mark the process as having unsaved changes processStore.unsavedChanges = true; @@ -1204,7 +1197,7 @@ const handleScriptNodeUpdate = (updatedData) => { // Handle process restoration from history const handleProcessRestored = (restoredProcess) => { // The process has been restored in the backend, so we need to reload it - console.log('Process restored:', restoredProcess); + // The current process will be automatically updated by the store toast.success('Process has been restored successfully'); }; @@ -1248,7 +1241,7 @@ watch(() => processStore.currentProcess, async (newProcess, oldProcess) => { // Only restore when a different process is loaded (not on updates) if (oldProcess && newProcess.id === oldProcess.id) return; - console.log('🔄 Process changed, preparing Vue Flow restoration for:', newProcess.name); + // Wait for the canvas to be ready await nextTick(); @@ -1267,18 +1260,12 @@ watch(() => processStore.currentProcess, async (newProcess, oldProcess) => { // Clean the data to remove any Vue Flow internal properties const flowObject = processStore.cleanFlowData(rawFlowObject); - console.log('🔄 Restoring Vue Flow state:', { - nodes: flowObject.nodes.length, - edges: flowObject.edges.length, - viewport: flowObject.viewport, - nodeTypes: flowObject.nodes.map(n => ({ id: n.id, type: n.type, position: n.position })), - edgeConnections: flowObject.edges.map(e => `${e.source} -> ${e.target}`) - }); + // Use Vue Flow's proper restoration method (now returns a Promise) await processFlowCanvas.value.fromObject(flowObject); - console.log('✅ Vue Flow state restoration completed'); + // Fit view after restoration with a small delay to ensure everything is rendered setTimeout(() => { @@ -1292,7 +1279,7 @@ watch(() => processStore.currentProcess, async (newProcess, oldProcess) => { // Fallback to manual sync if Vue Flow restoration fails if (processFlowCanvas.value && processFlowCanvas.value.syncCanvas) { - console.log('🔄 Falling back to manual canvas sync...'); + processFlowCanvas.value.syncCanvas(newProcess.nodes, newProcess.edges); } }