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.
111 lines
2.6 KiB
Vue
111 lines
2.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps(['id', 'type', 'label', 'selected', 'data'])
|
|
const emit = defineEmits(['node-click'])
|
|
|
|
const shapeStyle = computed(() => {
|
|
return {
|
|
width: `${props.data?.width || 400}px`,
|
|
height: `${props.data?.height || 300}px`,
|
|
'--node-bg-color': props.data?.backgroundColor || '#f0f9ff',
|
|
'--node-border-color': props.data?.borderColor || '#0284c7',
|
|
'--node-text-color': props.data?.textColor || '#0369a1',
|
|
backgroundColor: props.data?.backgroundColor || '#f0f9ff',
|
|
border: `3px solid ${props.data?.borderColor || '#0284c7'}`,
|
|
borderRadius: '12px',
|
|
position: 'relative',
|
|
display: 'flex',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'center',
|
|
color: props.data?.textColor || '#0369a1',
|
|
fontSize: '16px',
|
|
fontWeight: '600',
|
|
cursor: 'move',
|
|
zIndex: -10, // Behind process nodes
|
|
padding: '16px'
|
|
}
|
|
})
|
|
|
|
const displayLabel = computed(() => props.label || props.data?.label || '')
|
|
const displayDescription = computed(() => props.data?.description || '')
|
|
|
|
const onClick = () => emit('node-click', props.id)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['shape-node', 'process-group', { 'selected': selected }]"
|
|
:style="shapeStyle"
|
|
@click="onClick"
|
|
>
|
|
<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>
|
|
.process-group {
|
|
border-width: 3px !important;
|
|
border-style: solid !important;
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.process-group.selected {
|
|
border-color: #3b82f6 !important;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
|
}
|
|
|
|
.process-group:hover {
|
|
border-color: #94a3b8 !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.shape-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
padding: 8px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Ensure shapes don't interfere with node connections */
|
|
.shape-content * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.process-group {
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* Resize handles for shapes when selected */
|
|
.process-group.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> |