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.
115 lines
2.6 KiB
Vue
115 lines
2.6 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 || 220}px`,
|
|
height: `${props.data?.height || 120}px`,
|
|
'--node-bg-color': props.data?.backgroundColor || '#f8fafc',
|
|
'--node-border-color': props.data?.borderColor || '#e2e8f0',
|
|
'--node-text-color': props.data?.textColor || '#475569',
|
|
position: 'relative',
|
|
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="['custom-node', 'shape-node', 'shape-trapezoid', { 'selected': selected }]"
|
|
:style="shapeStyle"
|
|
>
|
|
<div class="custom-node-content" v-if="displayLabel || displayDescription">
|
|
<div class="custom-node-label" v-if="displayLabel">{{ displayLabel }}</div>
|
|
<div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Trapezoid shape using CSS clip-path */
|
|
.shape-trapezoid {
|
|
background: var(--node-bg-color);
|
|
color: var(--node-text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
border: 2px solid var(--node-border-color);
|
|
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
|
|
}
|
|
|
|
.shape-trapezoid.selected {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.shape-trapezoid:hover {
|
|
border-color: #94a3b8;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.custom-node-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
.custom-node-label {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
user-select: none;
|
|
word-wrap: break-word;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.shape-description {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
user-select: none;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Ensure shape doesn'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> |