Refactor Process Flow Nodes and Enhance ProcessFlowCanvas Component
- Moved custom node definitions from `composables/processFlowNodes.js` to individual `.vue` files for better production compatibility and maintainability. - Updated `ProcessFlowCanvas.vue` to import node types from the new file structure, ensuring proper rendering of custom nodes. - Added new methods for setting nodes and edges directly in the `ProcessFlowCanvas` component, improving flexibility in managing flow state. - Removed the deprecated `test.vue` file to streamline the codebase and eliminate unnecessary components. - Adjusted styles and structure in the process flow components to enhance user experience and maintain consistency across the application.
This commit is contained in:
parent
85af1a0e97
commit
f8a67c4467
@ -13,7 +13,7 @@ import { VueFlow, useVueFlow, Panel } from "@vue-flow/core";
|
|||||||
import { Background } from "@vue-flow/background";
|
import { Background } from "@vue-flow/background";
|
||||||
import { Controls } from "@vue-flow/controls";
|
import { Controls } from "@vue-flow/controls";
|
||||||
import { MiniMap } from "@vue-flow/minimap";
|
import { MiniMap } from "@vue-flow/minimap";
|
||||||
import { nodeTypes as customNodeTypes, nodeStyles } from "./ProcessFlowNodes";
|
import { nodeTypes as customNodeTypes, nodeStyles } from "~/composables/processFlowNodes";
|
||||||
import InteractiveArrowEdge from "./InteractiveArrowEdge.vue";
|
import InteractiveArrowEdge from "./InteractiveArrowEdge.vue";
|
||||||
import "@vue-flow/core/dist/style.css";
|
import "@vue-flow/core/dist/style.css";
|
||||||
import "@vue-flow/core/dist/theme-default.css";
|
import "@vue-flow/core/dist/theme-default.css";
|
||||||
@ -95,7 +95,7 @@ const {
|
|||||||
|
|
||||||
// Define custom edge types - use markRaw to prevent reactivity issues
|
// Define custom edge types - use markRaw to prevent reactivity issues
|
||||||
const edgeTypes = {
|
const edgeTypes = {
|
||||||
custom: markRaw(InteractiveArrowEdge),
|
custom: shallowRef(InteractiveArrowEdge),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Default nodes if empty
|
// Default nodes if empty
|
||||||
@ -823,6 +823,29 @@ defineExpose({
|
|||||||
// Add Vue Flow save/restore methods
|
// Add Vue Flow save/restore methods
|
||||||
toObject,
|
toObject,
|
||||||
fromObject,
|
fromObject,
|
||||||
|
// Add direct access to Vue Flow methods for production fallbacks
|
||||||
|
setNodes: (newNodes) => {
|
||||||
|
try {
|
||||||
|
if (Array.isArray(newNodes)) {
|
||||||
|
nodes.value = newNodes;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in setNodes:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEdges: (newEdges) => {
|
||||||
|
try {
|
||||||
|
if (Array.isArray(newEdges)) {
|
||||||
|
edges.value = newEdges;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in setEdges:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Provide access to the flow instance
|
||||||
|
get flowInstance() {
|
||||||
|
return flowInstance;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update an existing node
|
// Update an existing node
|
||||||
|
|||||||
1814
composables/processFlowNodes.js
Normal file
1814
composables/processFlowNodes.js
Normal file
File diff suppressed because it is too large
Load Diff
304
docs/vue-flow-custom-nodes-migration.md
Normal file
304
docs/vue-flow-custom-nodes-migration.md
Normal file
@ -0,0 +1,304 @@
|
|||||||
|
# Vue Flow Custom Nodes Migration Guide
|
||||||
|
|
||||||
|
## 🎯 Problem Solved
|
||||||
|
Custom nodes defined inline (using template strings or object definitions) **do not load in production** with Vue Flow. The solution is to use **separate .vue component files** that are properly imported.
|
||||||
|
|
||||||
|
## ✅ Production-Safe Approach: File-Based Custom Nodes
|
||||||
|
|
||||||
|
### 1. Create Separate .vue Files for Each Node Type
|
||||||
|
|
||||||
|
Instead of defining nodes inline in `composables/processFlowNodes.js`, create individual `.vue` files:
|
||||||
|
|
||||||
|
```
|
||||||
|
components/process-flow/custom/
|
||||||
|
├── StartNode.vue
|
||||||
|
├── FormNode.vue
|
||||||
|
├── EndNode.vue
|
||||||
|
├── ConditionalNode.vue
|
||||||
|
├── ScriptNode.vue
|
||||||
|
├── ApiNode.vue
|
||||||
|
├── NotificationNode.vue
|
||||||
|
└── ... (other node types)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Standard Vue Component Structure
|
||||||
|
|
||||||
|
Each node component should follow this pattern:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Handle, Position } from '@vue-flow/core'
|
||||||
|
|
||||||
|
// Define props that Vue Flow passes to custom nodes
|
||||||
|
const props = defineProps([
|
||||||
|
'id', // Node ID
|
||||||
|
'type', // Node type
|
||||||
|
'label', // Node label
|
||||||
|
'selected', // Selection state
|
||||||
|
'data' // Custom data object
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="custom-node" :class="{ selected }">
|
||||||
|
<!-- Input handle (if needed) -->
|
||||||
|
<Handle
|
||||||
|
type="target"
|
||||||
|
:position="Position.Left"
|
||||||
|
class="node-handle"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Node content -->
|
||||||
|
<div class="node-content">
|
||||||
|
<div class="node-icon">🚀</div>
|
||||||
|
<div class="node-label">{{ data?.label || label || 'Default Label' }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Output handle (if needed) -->
|
||||||
|
<Handle
|
||||||
|
type="source"
|
||||||
|
:position="Position.Right"
|
||||||
|
class="node-handle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Component-specific styles */
|
||||||
|
.custom-node {
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: linear-gradient(135deg, #10b981, #059669);
|
||||||
|
color: white;
|
||||||
|
border: 2px solid #047857;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-node.selected {
|
||||||
|
border-color: #fbbf24;
|
||||||
|
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Import Components in Your Main File
|
||||||
|
|
||||||
|
In `pages/process-builder/index.vue`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Import all custom node components
|
||||||
|
import StartNode from "~/components/process-flow/custom/StartNode.vue"
|
||||||
|
import FormNode from "~/components/process-flow/custom/FormNode.vue"
|
||||||
|
import EndNode from "~/components/process-flow/custom/EndNode.vue"
|
||||||
|
import ConditionalNode from "~/components/process-flow/custom/ConditionalNode.vue"
|
||||||
|
import ScriptNode from "~/components/process-flow/custom/ScriptNode.vue"
|
||||||
|
import ApiNode from "~/components/process-flow/custom/ApiNode.vue"
|
||||||
|
import NotificationNode from "~/components/process-flow/custom/NotificationNode.vue"
|
||||||
|
// ... import other nodes
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Create nodeTypes Object
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { markRaw } from 'vue'
|
||||||
|
|
||||||
|
// Map node types to components (use markRaw to prevent reactivity issues)
|
||||||
|
const nodeTypes = {
|
||||||
|
'start': markRaw(StartNode),
|
||||||
|
'form': markRaw(FormNode),
|
||||||
|
'end': markRaw(EndNode),
|
||||||
|
'conditional': markRaw(ConditionalNode),
|
||||||
|
'script': markRaw(ScriptNode),
|
||||||
|
'api': markRaw(ApiNode),
|
||||||
|
'notification': markRaw(NotificationNode),
|
||||||
|
// ... other node types
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. Use nodeTypes in VueFlow Component
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<VueFlow
|
||||||
|
v-model:nodes="nodes"
|
||||||
|
v-model:edges="edges"
|
||||||
|
:node-types="nodeTypes"
|
||||||
|
@error="handleVueFlowError"
|
||||||
|
>
|
||||||
|
<Background />
|
||||||
|
<Controls />
|
||||||
|
</VueFlow>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚫 What NOT to Use (Breaks in Production)
|
||||||
|
|
||||||
|
### ❌ Template Slots Approach
|
||||||
|
```vue
|
||||||
|
<!-- This breaks in production -->
|
||||||
|
<VueFlow v-model:nodes="nodes" v-model:edges="edges">
|
||||||
|
<template #node-start="{ data, label }">
|
||||||
|
<div class="start-node">{{ label }}</div>
|
||||||
|
</template>
|
||||||
|
</VueFlow>
|
||||||
|
```
|
||||||
|
|
||||||
|
### ❌ Inline Object Definitions
|
||||||
|
```javascript
|
||||||
|
// This breaks in production
|
||||||
|
const nodeTypes = {
|
||||||
|
'start': {
|
||||||
|
props: ['id', 'data'],
|
||||||
|
template: `<div>{{ data.label }}</div>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📋 Migration Checklist
|
||||||
|
|
||||||
|
### Current State Analysis
|
||||||
|
- [ ] Review `composables/processFlowNodes.js` for all node type definitions
|
||||||
|
- [ ] Identify unique node types used in your process builder
|
||||||
|
- [ ] Note any complex computed properties or methods in existing nodes
|
||||||
|
|
||||||
|
### Migration Steps
|
||||||
|
1. [ ] Create individual `.vue` files for each node type in `components/process-flow/custom/`
|
||||||
|
2. [ ] Convert existing node logic from `processFlowNodes.js` to Vue component format
|
||||||
|
3. [ ] Import all node components in main process builder file
|
||||||
|
4. [ ] Create `nodeTypes` object mapping types to components with `markRaw`
|
||||||
|
5. [ ] Update VueFlow component to use `:node-types` prop instead of template slots
|
||||||
|
6. [ ] Remove old `processFlowNodes.js` file
|
||||||
|
7. [ ] Test all node types render correctly
|
||||||
|
8. [ ] Test in production environment
|
||||||
|
|
||||||
|
### Key Node Types to Migrate
|
||||||
|
Based on your `processFlowNodes.js`, you have these node types:
|
||||||
|
- `start` - Start nodes
|
||||||
|
- `form` - Form nodes
|
||||||
|
- `end` - End nodes
|
||||||
|
- `conditional` - Conditional/gateway nodes
|
||||||
|
- `script` - Script execution nodes
|
||||||
|
- `api` - API call nodes
|
||||||
|
- `notification` - Notification nodes
|
||||||
|
- `subprocess` - Subprocess nodes
|
||||||
|
- Various shape nodes (rectangle, circle, diamond, etc.)
|
||||||
|
|
||||||
|
## 🔧 Common Patterns for Migration
|
||||||
|
|
||||||
|
### Computed Properties
|
||||||
|
Convert computed properties from options API to composition API:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// OLD (in processFlowNodes.js)
|
||||||
|
computed: {
|
||||||
|
nodeLabel() {
|
||||||
|
return this.data?.label || 'Default'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// NEW (in .vue component)
|
||||||
|
const nodeLabel = computed(() => {
|
||||||
|
return props.data?.label || 'Default'
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Event Handlers
|
||||||
|
```javascript
|
||||||
|
// OLD
|
||||||
|
methods: {
|
||||||
|
onClick() {
|
||||||
|
this.$emit('node-click', this.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// NEW
|
||||||
|
const emit = defineEmits(['node-click'])
|
||||||
|
const onClick = () => {
|
||||||
|
emit('node-click', props.id)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Complex Node Logic
|
||||||
|
For nodes with complex logic (like ConditionalNode), maintain the same patterns but convert to composition API:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { Handle, Position } from '@vue-flow/core'
|
||||||
|
|
||||||
|
const props = defineProps(['id', 'type', 'data', 'selected'])
|
||||||
|
|
||||||
|
const totalConditions = computed(() => {
|
||||||
|
return props.data?.conditions?.length || 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const conditionSummary = computed(() => {
|
||||||
|
if (totalConditions.value === 0) return 'No conditions'
|
||||||
|
return `${totalConditions.value} condition${totalConditions.value > 1 ? 's' : ''}`
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 Benefits of File-Based Approach
|
||||||
|
|
||||||
|
1. **Production Compatibility** - Works reliably in all environments
|
||||||
|
2. **Better Performance** - Proper component compilation and tree-shaking
|
||||||
|
3. **Developer Experience** - Full IDE support, syntax highlighting, linting
|
||||||
|
4. **Maintainability** - Separate files are easier to manage and debug
|
||||||
|
5. **Reusability** - Components can be imported and used elsewhere
|
||||||
|
6. **Scoped Styles** - No CSS conflicts between node types
|
||||||
|
|
||||||
|
## 🐛 Debugging Tips
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
Add error handling to catch Vue Flow issues:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const handleVueFlowError = (error) => {
|
||||||
|
console.error('Vue Flow Error:', error)
|
||||||
|
if (isErrorOfType(error, ErrorCode.MISSING_VIEWPORT_DIMENSIONS)) {
|
||||||
|
console.error('Container needs explicit width/height')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Node ID Conflicts
|
||||||
|
Ensure all node IDs are unique across your application to prevent rendering conflicts.
|
||||||
|
|
||||||
|
## 📁 File Structure After Migration
|
||||||
|
|
||||||
|
```
|
||||||
|
components/process-flow/custom/
|
||||||
|
├── StartNode.vue
|
||||||
|
├── FormNode.vue
|
||||||
|
├── EndNode.vue
|
||||||
|
├── ConditionalNode.vue
|
||||||
|
├── ScriptNode.vue
|
||||||
|
├── ApiNode.vue
|
||||||
|
├── NotificationNode.vue
|
||||||
|
├── SubprocessNode.vue
|
||||||
|
├── RectangleShapeNode.vue
|
||||||
|
├── CircleShapeNode.vue
|
||||||
|
├── DiamondShapeNode.vue
|
||||||
|
├── TriangleShapeNode.vue
|
||||||
|
├── PentagonShapeNode.vue
|
||||||
|
├── HexagonShapeNode.vue
|
||||||
|
└── OctagonShapeNode.vue
|
||||||
|
|
||||||
|
pages/process-builder/
|
||||||
|
└── index.vue (updated to import and use file-based nodes)
|
||||||
|
|
||||||
|
# Remove after migration:
|
||||||
|
composables/processFlowNodes.js ❌
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Ready to Migrate?
|
||||||
|
|
||||||
|
When you're ready to start the migration, provide:
|
||||||
|
1. Your current `pages/process-builder/index.vue` file
|
||||||
|
2. Your current `composables/processFlowNodes.js` file
|
||||||
|
3. Any specific node types you want to prioritize
|
||||||
|
|
||||||
|
The assistant will help you convert each node type to the production-safe file-based approach! 🚀
|
||||||
@ -1,77 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="vue-flow-test">
|
|
||||||
<h3>Vue Flow Test Component</h3>
|
|
||||||
<div class="test-container">
|
|
||||||
<client-only>
|
|
||||||
<VueFlow
|
|
||||||
:nodes="testNodes"
|
|
||||||
:edges="testEdges"
|
|
||||||
class="test-flow"
|
|
||||||
style="height: 400px"
|
|
||||||
>
|
|
||||||
<Background />
|
|
||||||
<Controls />
|
|
||||||
</VueFlow>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { VueFlow } from "@vue-flow/core";
|
|
||||||
import { Background } from "@vue-flow/background";
|
|
||||||
import { Controls } from "@vue-flow/controls";
|
|
||||||
import '@vue-flow/core/dist/style.css';
|
|
||||||
import '@vue-flow/core/dist/theme-default.css';
|
|
||||||
import '@vue-flow/controls/dist/style.css';
|
|
||||||
import '@vue-flow/minimap/dist/style.css';
|
|
||||||
|
|
||||||
console.log("🧪 VueFlowTest component loaded");
|
|
||||||
|
|
||||||
const testNodes = ref([
|
|
||||||
{
|
|
||||||
id: "test-1",
|
|
||||||
type: "default",
|
|
||||||
position: { x: 100, y: 100 },
|
|
||||||
data: { label: "Test Node 1" },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "test-2",
|
|
||||||
type: "default",
|
|
||||||
position: { x: 300, y: 100 },
|
|
||||||
data: { label: "Test Node 2" },
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const testEdges = ref([
|
|
||||||
{
|
|
||||||
id: "test-edge-1",
|
|
||||||
source: "test-1",
|
|
||||||
target: "test-2",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
console.log("🧪 Test nodes:", testNodes.value);
|
|
||||||
console.log("🧪 Test edges:", testEdges.value);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.vue-flow-test {
|
|
||||||
padding: 20px;
|
|
||||||
border: 2px solid #ccc;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 450px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-flow {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { nodeStyles } from '~/components/process-flow/ProcessFlowNodes';
|
import { nodeStyles } from '~/composables/processFlowNodes';
|
||||||
|
|
||||||
export default defineNuxtPlugin(() => {
|
export default defineNuxtPlugin(() => {
|
||||||
// Create a style element
|
// Create a style element
|
||||||
|
|||||||
@ -613,11 +613,6 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
|||||||
this.hasUnsavedChanges = false;
|
this.hasUnsavedChanges = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Update preview form data
|
|
||||||
updatePreviewFormData(data) {
|
|
||||||
this.previewFormData = { ...data };
|
|
||||||
},
|
|
||||||
|
|
||||||
// Get forms from the backend
|
// Get forms from the backend
|
||||||
async getForms() {
|
async getForms() {
|
||||||
try {
|
try {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user