corrad-software/corrad-bp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove Console Logs from Process Flow Components for Cleaner Code

Browse Source 
- 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.
This commit is contained in:
Md Afiq Iskandar 2025-07-09 09:13:47 +08:00
parent b2692bec73
commit 37c5e82a23
2 changed files with 44 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/process-flow/ProcessFlowCanvas.vue
View File

@ -62,7 +62,6 @@ const {
multiSelectionKeyCode: 'Control', multiSelectionKeyCode: 'Control',
connectionMode: 'strict', connectionMode: 'strict',
isValidConnection: (connection) => { isValidConnection: (connection) => {
console.log('Validating connection:', connection);
return true; return true;
} }
}); });
@ -135,8 +134,6 @@ const onNodeClick = ({ node }) => {
// Handle edge click // Handle edge click
const onEdgeClick = (event, edge) => { const onEdgeClick = (event, edge) => {
console.log('Edge click received:', { event, edge });
// Handle different parameter formats Vue Flow might send // Handle different parameter formats Vue Flow might send
let actualEdge = edge; let actualEdge = edge;
@ -209,8 +206,6 @@ onMounted(() => {
// Center on a specific node // Center on a specific node
const centerOnNode = (nodeId, nodePosition) => { const centerOnNode = (nodeId, nodePosition) => {
console.log('centerOnNode called with:', nodeId, nodePosition);
if (!nodePosition) { if (!nodePosition) {
// Try to find the node position from current nodes // Try to find the node position from current nodes
const targetNode = nodes.value.find(n => n.id === nodeId); const targetNode = nodes.value.find(n => n.id === nodeId);
@ -237,7 +232,6 @@ const centerOnNode = (nodeId, nodePosition) => {
zoom: 1.2 zoom: 1.2
}; };
console.log('Setting viewport to:', newViewport);
setViewport(newViewport, { duration: 800 }); setViewport(newViewport, { duration: 800 });
} catch (error) { } catch (error) {
@ -249,8 +243,6 @@ const centerOnNode = (nodeId, nodePosition) => {
// Watch for changes to highlightedNodeId and apply highlighting // Watch for changes to highlightedNodeId and apply highlighting
watch(() => props.highlightedNodeId, (newHighlightedId, oldHighlightedId) => { watch(() => props.highlightedNodeId, (newHighlightedId, oldHighlightedId) => {
console.log('Highlighting changed:', { new: newHighlightedId, old: oldHighlightedId });
// Remove highlight from previously highlighted node // Remove highlight from previously highlighted node
if (oldHighlightedId) { if (oldHighlightedId) {
const oldNode = nodes.value.find(node => node.id === 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.zIndex = '999';
customNode.style.transition = 'all 0.3s ease-in-out'; customNode.style.transition = 'all 0.3s ease-in-out';
} }
console.log('Applied highlight to DOM element with inline styles:', nodeElement);
} else { } else {
console.warn('Could not find DOM element for node:', newHighlightedId); console.warn('Could not find DOM element for node:', newHighlightedId);
} }
}); });
console.log('Added highlight to node:', newHighlightedId, 'data:', newNode.data);
// Force node update // Force node update
updateNodeInternals([newHighlightedId]); updateNodeInternals([newHighlightedId]);
} else { } else {
@ -532,7 +520,7 @@ onEdgesChange((changes) => {
const handleConnect = (connection) => { const handleConnect = (connection) => {
if (!connection.source || !connection.target) return; if (!connection.source || !connection.target) return;
console.log('Connection created:', connection);
// Try to determine if this is coming from a gateway // Try to determine if this is coming from a gateway
const sourceNode = nodes.value.find(node => node.id === connection.source); const sourceNode = nodes.value.find(node => node.id === connection.source);
@ -578,12 +566,7 @@ const handleConnect = (connection) => {
label: label 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 // Add the edge directly to Vue Flow for immediate visual feedback
addEdges([newEdge]); addEdges([newEdge]);
@ -666,7 +649,7 @@ const onDrop = (event) => {
// This ensures the node persists in the application state and can be saved // This ensures the node persists in the application state and can be saved
emit('nodesChange', [{ type: 'add', id: newNode.id, item: newNode }], nodes.value); emit('nodesChange', [{ type: 'add', id: newNode.id, item: newNode }], nodes.value);
console.log('🎯 Node dropped and added:', newNode.type, newNode.id);
} catch (error) { } catch (error) {
console.error('Error handling drop:', error); console.error('Error handling drop:', error);
} }
@ -733,8 +716,6 @@ function removeNode(nodeId) {
// Add explicit sync method to manually update canvas // Add explicit sync method to manually update canvas
function syncCanvas(newNodes, newEdges) { 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 // Force clear the updating flags first to ensure we can process
isUpdatingNodes.value = false; isUpdatingNodes.value = false;
isUpdatingEdges.value = false; isUpdatingEdges.value = false;
@ -742,26 +723,21 @@ function syncCanvas(newNodes, newEdges) {
// Wait a moment for any ongoing operations to complete // Wait a moment for any ongoing operations to complete
setTimeout(() => { setTimeout(() => {
try { try {
console.log('Starting canvas sync operation...');
// Sync nodes first // Sync nodes first
if (newNodes && Array.isArray(newNodes)) { if (newNodes && Array.isArray(newNodes)) {
const currentNodeIds = new Set(nodes.value.map(n => n.id)); const currentNodeIds = new Set(nodes.value.map(n => n.id));
const newNodeIds = new Set(newNodes.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 // Remove nodes that are no longer in the new list
const nodesToRemove = nodes.value.filter(node => !newNodeIds.has(node.id)); const nodesToRemove = nodes.value.filter(node => !newNodeIds.has(node.id));
if (nodesToRemove.length > 0) { if (nodesToRemove.length > 0) {
console.log('Removing nodes:', nodesToRemove.map(n => n.id));
removeNodes(nodesToRemove); removeNodes(nodesToRemove);
} }
// Add new nodes that aren't already present // Add new nodes that aren't already present
const nodesToAdd = newNodes.filter(node => !currentNodeIds.has(node.id)); const nodesToAdd = newNodes.filter(node => !currentNodeIds.has(node.id));
if (nodesToAdd.length > 0) { if (nodesToAdd.length > 0) {
console.log('Adding nodes:', nodesToAdd.map(n => n.id));
addNodes([...nodesToAdd]); 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 // Sync edges after nodes are updated
if (newEdges && Array.isArray(newEdges) && nodes.value.length > 0) { if (newEdges && Array.isArray(newEdges) && nodes.value.length > 0) {
const currentEdgeIds = new Set(edges.value.map(e => e.id)); const currentEdgeIds = new Set(edges.value.map(e => e.id));
const newEdgeIds = new Set(newEdges.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 // Remove edges that are no longer in the new list
const edgesToRemove = edges.value.filter(edge => !newEdgeIds.has(edge.id)); const edgesToRemove = edges.value.filter(edge => !newEdgeIds.has(edge.id));
if (edgesToRemove.length > 0) { if (edgesToRemove.length > 0) {
console.log('Removing edges:', edgesToRemove.map(e => e.id));
removeEdges(edgesToRemove); removeEdges(edgesToRemove);
} }
// Add new edges that aren't already present // Add new edges that aren't already present
const edgesToAdd = newEdges.filter(edge => !currentEdgeIds.has(edge.id)); const edgesToAdd = newEdges.filter(edge => !currentEdgeIds.has(edge.id));
if (edgesToAdd.length > 0) { if (edgesToAdd.length > 0) {
console.log('Processing new edges:', edgesToAdd.map(e => `${e.source}->${e.target}`));
// Verify nodes exist and add handles // Verify nodes exist and add handles
const validEdges = edgesToAdd.filter(edge => { const validEdges = edgesToAdd.filter(edge => {
@ -813,12 +789,12 @@ function syncCanvas(newNodes, newEdges) {
return true; return true;
}); });
console.log('Valid edges to add:', validEdges.length);
const edgesWithHandles = validEdges.map(edge => { const edgesWithHandles = validEdges.map(edge => {
// If edge already has sourceHandle and targetHandle, use them // If edge already has sourceHandle and targetHandle, use them
if (edge.sourceHandle && edge.targetHandle) { if (edge.sourceHandle && edge.targetHandle) {
console.log(`Edge ${edge.id} already has handles:`, edge.sourceHandle, '->', edge.targetHandle);
return edge; return edge;
} }
@ -846,12 +822,12 @@ function syncCanvas(newNodes, newEdges) {
} }
} }
console.log(`Generated handles for edge ${edge.id}:`, sourceHandle, '->', targetHandle);
return { ...edge, sourceHandle, targetHandle }; return { ...edge, sourceHandle, targetHandle };
}); });
if (edgesWithHandles.length > 0) { if (edgesWithHandles.length > 0) {
console.log('Adding edges with handles:', edgesWithHandles.length);
addEdges([...edgesWithHandles]); addEdges([...edgesWithHandles]);
} }
} }
@ -872,7 +848,7 @@ function syncCanvas(newNodes, newEdges) {
console.warn('Cannot add edges: nodes not ready. Node count:', nodes.value.length); 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) { } catch (error) {
console.error('Error during canvas sync:', error); console.error('Error during canvas sync:', error);
@ -908,11 +884,7 @@ function toObject() {
viewport: getViewport() viewport: getViewport()
}; };
console.log('💾 Captured clean flow state:', {
nodes: flowObject.nodes?.length || 0,
edges: flowObject.edges?.length || 0,
viewport: flowObject.viewport
});
return flowObject; return flowObject;
} catch (error) { } catch (error) {
@ -941,11 +913,7 @@ function fromObject(flowObject) {
return new Promise((resolve) => { return new Promise((resolve) => {
try { 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 // Clear updating flags to ensure clean restoration
isUpdatingNodes.value = false; isUpdatingNodes.value = false;
@ -976,7 +944,7 @@ function fromObject(flowObject) {
// Only include essential properties needed for Vue Flow // Only include essential properties needed for Vue Flow
})); }));
console.log('Restoring nodes:', nodesToRestore.length, nodesToRestore.map(n => `${n.id} (${n.type})`));
addNodes(nodesToRestore); addNodes(nodesToRestore);
await nextTick(); await nextTick();
@ -1000,7 +968,7 @@ function fromObject(flowObject) {
}); });
if (validEdges.length > 0) { if (validEdges.length > 0) {
console.log('Restoring edges:', validEdges.length);
// Clean edge data before adding // Clean edge data before adding
const cleanEdges = validEdges.map(edge => ({ const cleanEdges = validEdges.map(edge => ({
@ -1028,11 +996,11 @@ function fromObject(flowObject) {
y: flowObject.viewport.y || 0, y: flowObject.viewport.y || 0,
zoom: flowObject.viewport.zoom || 1 zoom: flowObject.viewport.zoom || 1
}; };
console.log('Restoring viewport:', viewport);
setViewport(viewport, { duration: 0 }); // No animation for restore setViewport(viewport, { duration: 0 }); // No animation for restore
} }
console.log('✅ Flow state restoration completed successfully');
resolve(); resolve();
} catch (error) { } catch (error) {

65
pages/process-builder/index.vue
View File

@ -43,7 +43,7 @@ try {
} catch (error) { } catch (error) {
// Create a simple toast object if composable is not available // Create a simple toast object if composable is not available
toast = { toast = {
success: (msg) => console.log('Success:', msg), success: (msg) => {}, // Silent success
error: (msg) => console.error('Error:', msg), error: (msg) => console.error('Error:', msg),
info: (msg) => console.info('Info:', msg), info: (msg) => console.info('Info:', msg),
warning: (msg) => console.warn('Warning:', msg) warning: (msg) => console.warn('Warning:', msg)
@ -160,7 +160,7 @@ const onPaneClickMobile = () => {
// Handle node highlighting from variable usage // Handle node highlighting from variable usage
const handleNodeHighlight = (event) => { const handleNodeHighlight = (event) => {
console.log('Received highlight event:', event.detail);
const { nodeId, node } = event.detail; const { nodeId, node } = event.detail;
// Clear any existing highlight timeout // Clear any existing highlight timeout
@ -170,13 +170,13 @@ const handleNodeHighlight = (event) => {
// Set the highlighted node // Set the highlighted node
highlightedNodeId.value = nodeId; highlightedNodeId.value = nodeId;
console.log('Set highlighted node ID to:', nodeId);
// Center the view on the highlighted node // Center the view on the highlighted node
if (processFlowCanvas.value && node) { if (processFlowCanvas.value && node) {
nextTick(() => { nextTick(() => {
try { try {
console.log('Attempting to center view on node:', node);
// Call the exposed methods from ProcessFlowCanvas // Call the exposed methods from ProcessFlowCanvas
if (processFlowCanvas.value.centerOnNode) { if (processFlowCanvas.value.centerOnNode) {
@ -502,8 +502,7 @@ const onNodesChange = (changes, currentNodes) => {
// Skip processing during component addition to avoid conflicts // Skip processing during component addition to avoid conflicts
if (isAddingComponent.value) { if (isAddingComponent.value) {
console.log('🔄 Skipping node changes during component addition'); return;
return;
} }
// Handle position changes (only when dragging is complete) // Handle position changes (only when dragging is complete)
@ -515,7 +514,7 @@ const onNodesChange = (changes, currentNodes) => {
}); });
if (Object.keys(positionChanges).length > 0) { if (Object.keys(positionChanges).length > 0) {
console.log('📍 Updating node positions:', Object.keys(positionChanges));
processStore.updateNodePositions(positionChanges); processStore.updateNodePositions(positionChanges);
} }
@ -525,7 +524,7 @@ const onNodesChange = (changes, currentNodes) => {
.map(change => change.id); .map(change => change.id);
if (removedNodes.length > 0) { if (removedNodes.length > 0) {
console.log('🗑️ Removing nodes:', removedNodes);
removedNodes.forEach(nodeId => { removedNodes.forEach(nodeId => {
processStore.deleteNode(nodeId); processStore.deleteNode(nodeId);
}); });
@ -876,15 +875,12 @@ const saveProcess = async () => {
// Capture complete Vue Flow state before saving // Capture complete Vue Flow state before saving
if (processFlowCanvas.value && processFlowCanvas.value.toObject) { if (processFlowCanvas.value && processFlowCanvas.value.toObject) {
console.log('💾 Capturing Vue Flow state before save...'); try {
const flowState = processFlowCanvas.value.toObject();
try { if (flowState && flowState.nodes) {
const flowState = processFlowCanvas.value.toObject(); // Set the captured flow state in the store for saving
processStore.setFlowStateForSave(flowState);
if (flowState && flowState.nodes) {
// Set the captured flow state in the store for saving
processStore.setFlowStateForSave(flowState);
console.log('✅ Vue Flow state captured successfully');
} else { } else {
console.warn('⚠️ Vue Flow state capture returned invalid data, proceeding with store data'); 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 // Select the newly added node
onNodeSelected(newNode); onNodeSelected(newNode);
console.log('Component added successfully:', component.type);
} catch (error) { } catch (error) {
console.error('Error adding component:', error); console.error('Error adding component:', error);
} finally { } finally {
@ -964,13 +960,11 @@ const onAddComponent = async (component) => {
// Handle template application // Handle template application
const applyProcessTemplate = async (template) => { const applyProcessTemplate = async (template) => {
try { 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 // Create a new process if one doesn't exist
if (!processStore.currentProcess) { if (!processStore.currentProcess) {
console.log('No current process, creating new one...');
processStore.createProcess(template.name, template.description || 'Process created from template'); processStore.createProcess(template.name, template.description || 'Process created from template');
} else { } else {
// Confirm if there's already content in the existing process // Confirm if there's already content in the existing process
@ -989,7 +983,7 @@ const applyProcessTemplate = async (template) => {
// Clear current process nodes and edges // Clear current process nodes and edges
if (processStore.currentProcess) { if (processStore.currentProcess) {
console.log('Clearing existing nodes and edges...');
processStore.currentProcess.nodes = []; processStore.currentProcess.nodes = [];
processStore.currentProcess.edges = []; processStore.currentProcess.edges = [];
} }
@ -998,8 +992,7 @@ const applyProcessTemplate = async (template) => {
const templateNodes = template.nodes || []; const templateNodes = template.nodes || [];
const templateEdges = template.edges || []; 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 // Process nodes first and wait for them to be fully added
for (const node of templateNodes) { for (const node of templateNodes) {
@ -1038,7 +1031,7 @@ const applyProcessTemplate = async (template) => {
// Explicitly sync the canvas to ensure everything is displayed // Explicitly sync the canvas to ensure everything is displayed
if (processFlowCanvas.value && processFlowCanvas.value.syncCanvas) { if (processFlowCanvas.value && processFlowCanvas.value.syncCanvas) {
console.log('Forcing canvas sync after template application...');
processFlowCanvas.value.syncCanvas( processFlowCanvas.value.syncCanvas(
processStore.currentProcess.nodes, processStore.currentProcess.nodes,
processStore.currentProcess.edges processStore.currentProcess.edges
@ -1047,13 +1040,13 @@ const applyProcessTemplate = async (template) => {
// Add template variables to the variable store // Add template variables to the variable store
if (template.variables && template.variables.length > 0) { 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) // Clear existing process variables first (they'll be loaded from the process)
// Process variables are now managed directly in the process store // Process variables are now managed directly in the process store
template.variables.forEach((variable) => { template.variables.forEach((variable) => {
console.log(`Adding variable: ${variable.name} (${variable.type}) with scope: ${variable.scope}`);
processStore.addProcessVariable({ processStore.addProcessVariable({
...variable, ...variable,
id: crypto.randomUUID() // Generate unique ID for the 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 // Mark the process as having unsaved changes
processStore.unsavedChanges = true; processStore.unsavedChanges = true;
@ -1204,7 +1197,7 @@ const handleScriptNodeUpdate = (updatedData) => {
// Handle process restoration from history // Handle process restoration from history
const handleProcessRestored = (restoredProcess) => { const handleProcessRestored = (restoredProcess) => {
// The process has been restored in the backend, so we need to reload it // 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 // The current process will be automatically updated by the store
toast.success('Process has been restored successfully'); 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) // Only restore when a different process is loaded (not on updates)
if (oldProcess && newProcess.id === oldProcess.id) return; 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 // Wait for the canvas to be ready
await nextTick(); await nextTick();
@ -1267,18 +1260,12 @@ watch(() => processStore.currentProcess, async (newProcess, oldProcess) => {
// Clean the data to remove any Vue Flow internal properties // Clean the data to remove any Vue Flow internal properties
const flowObject = processStore.cleanFlowData(rawFlowObject); 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) // Use Vue Flow's proper restoration method (now returns a Promise)
await processFlowCanvas.value.fromObject(flowObject); 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 // Fit view after restoration with a small delay to ensure everything is rendered
setTimeout(() => { setTimeout(() => {
@ -1292,7 +1279,7 @@ watch(() => processStore.currentProcess, async (newProcess, oldProcess) => {
// Fallback to manual sync if Vue Flow restoration fails // Fallback to manual sync if Vue Flow restoration fails
if (processFlowCanvas.value && processFlowCanvas.value.syncCanvas) { if (processFlowCanvas.value && processFlowCanvas.value.syncCanvas) {
console.log('🔄 Falling back to manual canvas sync...');
processFlowCanvas.value.syncCanvas(newProcess.nodes, newProcess.edges); processFlowCanvas.value.syncCanvas(newProcess.nodes, newProcess.edges);
} }
} }