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.
This commit is contained in:
parent
b2692bec73
commit
37c5e82a23
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user