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.
321 lines
8.2 KiB
Vue
321 lines
8.2 KiB
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
|
|
])
|
|
|
|
// Computed properties for node display
|
|
const nodeLabel = computed(() => {
|
|
return props.label || (props.data && props.data.label) || 'Business Rule'
|
|
})
|
|
|
|
const ruleConditionSummary = computed(() => {
|
|
// First try to use the new ruleGroups structure
|
|
if (props.data && props.data.ruleGroups && Array.isArray(props.data.ruleGroups)) {
|
|
// Count total conditions across all rule groups
|
|
const totalConditions = props.data.ruleGroups.reduce((count, group) => {
|
|
return count + (Array.isArray(group.conditions) ? group.conditions.length : 0)
|
|
}, 0)
|
|
|
|
return totalConditions === 0 ? 'No conditions' :
|
|
totalConditions === 1 ? '1 condition' :
|
|
`${totalConditions} conditions`
|
|
}
|
|
|
|
// Fallback to old structure for backward compatibility
|
|
if (props.data && props.data.conditions && Array.isArray(props.data.conditions)) {
|
|
const count = props.data.conditions.length
|
|
return count === 1 ? '1 condition' : `${count} conditions`
|
|
}
|
|
|
|
return 'No conditions defined'
|
|
})
|
|
|
|
const ruleActionSummary = computed(() => {
|
|
// First try to use the new ruleGroups structure
|
|
if (props.data && props.data.ruleGroups && Array.isArray(props.data.ruleGroups)) {
|
|
// Count total actions across all rule groups
|
|
const totalActions = props.data.ruleGroups.reduce((count, group) => {
|
|
return count + (Array.isArray(group.actions) ? group.actions.length : 0)
|
|
}, 0)
|
|
|
|
return totalActions === 0 ? 'No actions' :
|
|
totalActions === 1 ? '1 action' :
|
|
`${totalActions} actions`
|
|
}
|
|
|
|
// Fallback to old structure for backward compatibility
|
|
if (props.data && props.data.actions && Array.isArray(props.data.actions)) {
|
|
const count = props.data.actions.length
|
|
return count === 1 ? '1 action' : `${count} actions`
|
|
}
|
|
|
|
return 'No actions defined'
|
|
})
|
|
|
|
// Computed for node styling based on colors
|
|
const nodeStyle = computed(() => {
|
|
const backgroundColor = props.data?.backgroundColor || '#fdf4ff'
|
|
const borderColor = props.data?.borderColor || '#a855f7'
|
|
const textColor = props.data?.textColor || '#7c3aed'
|
|
|
|
return {
|
|
'--node-bg-color': backgroundColor,
|
|
'--node-border-color': borderColor,
|
|
'--node-text-color': textColor,
|
|
backgroundColor: backgroundColor,
|
|
borderColor: borderColor,
|
|
color: textColor
|
|
}
|
|
})
|
|
|
|
// Handle node click event
|
|
const emit = defineEmits(['node-click'])
|
|
const onClick = () => {
|
|
emit('node-click', props.id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['custom-node', 'node-business-rule', { 'selected': selected }]"
|
|
:style="nodeStyle"
|
|
@click="onClick"
|
|
>
|
|
<!-- Input handles -->
|
|
<Handle
|
|
type="target"
|
|
:position="Position.Top"
|
|
class="handle-business-rule-input handle-top"
|
|
:id="id + '-top'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<Handle
|
|
type="target"
|
|
:position="Position.Left"
|
|
class="handle-business-rule-input handle-left"
|
|
:id="id + '-left'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<!-- Output handles -->
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Right"
|
|
class="handle-business-rule-output handle-right"
|
|
:id="id + '-right'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Bottom"
|
|
class="handle-business-rule-output handle-bottom"
|
|
:id="id + '-bottom'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<div class="custom-node-content">
|
|
<div class="flex items-center mb-1">
|
|
<div class="custom-node-icon">
|
|
<i class="material-icons text-purple-600">rule</i>
|
|
</div>
|
|
<div class="custom-node-label" :title="nodeLabel">{{ nodeLabel }}</div>
|
|
</div>
|
|
|
|
<div class="node-details">
|
|
<p class="node-description">{{ data?.description || 'Applies business rules to process data' }}</p>
|
|
<div class="node-rule-detail flex items-center justify-between text-xs mt-1">
|
|
<span class="node-rule-detail-label">Conditions:</span>
|
|
<span class="node-rule-detail-value ml-1 font-medium text-purple-600">
|
|
{{ ruleConditionSummary }}
|
|
</span>
|
|
</div>
|
|
<div class="node-rule-detail flex items-center justify-between text-xs mt-1">
|
|
<span class="node-rule-detail-label">Actions:</span>
|
|
<span class="node-rule-detail-value ml-1 font-medium text-purple-600">
|
|
{{ ruleActionSummary }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Business rule node specific styling */
|
|
.node-business-rule {
|
|
width: 180px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
min-height: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
border: 1px solid #ddd;
|
|
border-left: 4px solid #a855f7;
|
|
position: relative;
|
|
font-size: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.node-business-rule.selected {
|
|
border-color: #ff6b6b;
|
|
box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
|
|
}
|
|
|
|
.custom-node-content {
|
|
padding: 8px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.custom-node-icon {
|
|
margin-right: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.custom-node-icon .material-icons {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.custom-node-label {
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.node-details {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.node-description {
|
|
margin-bottom: 2px;
|
|
color: #666;
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.node-rule-detail {
|
|
display: flex;
|
|
font-size: 10px;
|
|
color: #666;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.node-rule-detail-label {
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.node-rule-detail-value {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100px;
|
|
}
|
|
|
|
/* Handle styles */
|
|
.handle-top, .handle-bottom, .handle-left, .handle-right {
|
|
width: 12px !important;
|
|
height: 12px !important;
|
|
border-radius: 50% !important;
|
|
background: #fff !important;
|
|
border: 2px solid #666 !important;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
cursor: crosshair;
|
|
z-index: 100 !important;
|
|
position: absolute !important;
|
|
}
|
|
|
|
.handle-top {
|
|
top: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
border-color: #2196F3 !important;
|
|
background: #e3f2fd !important;
|
|
}
|
|
|
|
.handle-bottom {
|
|
bottom: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
border-color: #4CAF50 !important;
|
|
background: #e8f5e9 !important;
|
|
}
|
|
|
|
.handle-left {
|
|
left: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
border-color: #2196F3 !important;
|
|
background: #e3f2fd !important;
|
|
}
|
|
|
|
.handle-right {
|
|
right: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
border-color: #4CAF50 !important;
|
|
background: #e8f5e9 !important;
|
|
}
|
|
|
|
/* Show handles on hover */
|
|
.node-business-rule:hover .handle-top,
|
|
.node-business-rule:hover .handle-bottom,
|
|
.node-business-rule:hover .handle-left,
|
|
.node-business-rule:hover .handle-right {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Handle hover effects */
|
|
.handle-top:hover {
|
|
transform: translateX(-50%) scale(1.1);
|
|
background: #2196F3 !important;
|
|
border-color: #1565C0 !important;
|
|
}
|
|
|
|
.handle-bottom:hover {
|
|
transform: translateX(-50%) scale(1.1);
|
|
background: #4CAF50 !important;
|
|
border-color: #2E7D32 !important;
|
|
}
|
|
|
|
.handle-left:hover {
|
|
transform: translateY(-50%) scale(1.1);
|
|
background: #2196F3 !important;
|
|
border-color: #1565C0 !important;
|
|
}
|
|
|
|
.handle-right:hover {
|
|
transform: translateY(-50%) scale(1.1);
|
|
background: #4CAF50 !important;
|
|
border-color: #2E7D32 !important;
|
|
}
|
|
</style> |