Md Afiq Iskandar
b8431c1a65
- Migrated custom node definitions from inline to individual `.vue` files for improved maintainability and production compatibility. - Updated `ProcessFlowCanvas.vue` to import new file-based node components and created a `customNodeTypes` object to manage node types. - Removed the deprecated `composables/processFlowNodes.js` and extracted shared styles into `composables/nodeStyles.js`. - Enhanced user experience by ensuring proper rendering and functionality of all node types in the process flow interface.
122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<script setup>
|
|
// Define props that Vue Flow passes to custom nodes
|
|
const props = defineProps([
|
|
'id', // Node ID
|
|
'data', // Custom data object
|
|
'selected', // Selection state
|
|
'label' // Node label
|
|
])
|
|
|
|
// Computed for shape styling
|
|
const shapeStyle = computed(() => {
|
|
return {
|
|
width: `${props.data?.width || 600}px`,
|
|
height: `${props.data?.height || 150}px`,
|
|
'--node-bg-color': props.data?.backgroundColor || '#f8fafc',
|
|
'--node-border-color': props.data?.borderColor || '#e2e8f0',
|
|
'--node-text-color': props.data?.textColor || '#475569',
|
|
backgroundColor: props.data?.backgroundColor || '#f8fafc',
|
|
border: `2px solid ${props.data?.borderColor || '#e2e8f0'}`,
|
|
borderRadius: '8px',
|
|
position: 'relative',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: props.data?.textColor || '#475569',
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
cursor: 'move',
|
|
zIndex: props.data?.zIndex || -10 // Behind process nodes
|
|
}
|
|
})
|
|
|
|
const displayLabel = computed(() => {
|
|
return props.label || props.data?.label || ''
|
|
})
|
|
|
|
const displayDescription = computed(() => {
|
|
return props.data?.description || ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['shape-node', 'swimlane-horizontal', { 'selected': selected }]"
|
|
:style="shapeStyle"
|
|
>
|
|
<div class="shape-content" v-if="displayLabel || displayDescription">
|
|
<div class="shape-label" v-if="displayLabel">{{ displayLabel }}</div>
|
|
<div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Shape node styles */
|
|
.shape-node {
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.shape-node.selected {
|
|
border-color: #3b82f6 !important;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.shape-node:hover {
|
|
border-color: #94a3b8 !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.shape-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shape-label {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
user-select: none;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.shape-description {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
user-select: none;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Specific styling for horizontal swimlanes */
|
|
.swimlane-horizontal {
|
|
border-style: solid;
|
|
border-width: 2px 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Ensure shapes don't interfere with node connections */
|
|
.shape-node * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.shape-node {
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* Resize handles for shapes when selected */
|
|
.shape-node.selected::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
right: -4px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #3b82f6;
|
|
border: 2px solid white;
|
|
border-radius: 50%;
|
|
cursor: nw-resize;
|
|
pointer-events: all;
|
|
}
|
|
</style> |