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.
699 lines
15 KiB
JavaScript
699 lines
15 KiB
JavaScript
// Node styles for Vue Flow custom nodes
|
|
export const nodeStyles = `
|
|
.custom-node {
|
|
position: relative;
|
|
color: #333;
|
|
font-size: 12px;
|
|
transition: all 0.2s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.custom-node.selected {
|
|
border-color: #ff6b6b;
|
|
box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
|
|
}
|
|
|
|
/* Handle positioning and styling */
|
|
.handle-top {
|
|
top: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
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-bottom {
|
|
bottom: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
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-left {
|
|
left: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
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-right {
|
|
right: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
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;
|
|
}
|
|
|
|
/* Show handles on hover and during connection */
|
|
.custom-node:hover .handle-top,
|
|
.custom-node:hover .handle-bottom,
|
|
.custom-node:hover .handle-left,
|
|
.custom-node:hover .handle-right,
|
|
.vue-flow__node.connecting .handle-top,
|
|
.vue-flow__node.connecting .handle-bottom,
|
|
.vue-flow__node.connecting .handle-left,
|
|
.vue-flow__node.connecting .handle-right {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Show all handles when any node is being connected */
|
|
.vue-flow.connecting .handle-top,
|
|
.vue-flow.connecting .handle-bottom,
|
|
.vue-flow.connecting .handle-left,
|
|
.vue-flow.connecting .handle-right {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Active handle styles for connection mode */
|
|
.vue-flow__handle.connecting,
|
|
.vue-flow__handle.valid {
|
|
opacity: 1 !important;
|
|
transform: scale(1.3) !important;
|
|
border-width: 3px !important;
|
|
box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
|
|
}
|
|
|
|
/* Ensure handles are clickable and properly sized */
|
|
.vue-flow__handle {
|
|
pointer-events: all !important;
|
|
min-width: 12px !important;
|
|
min-height: 12px !important;
|
|
position: absolute !important;
|
|
}
|
|
|
|
/* Force handle visibility during connection */
|
|
.vue-flow.connecting .vue-flow__handle {
|
|
opacity: 1 !important;
|
|
pointer-events: all !important;
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
/* Connection line styles */
|
|
.vue-flow__connection-line {
|
|
stroke: #2563eb;
|
|
stroke-width: 3;
|
|
stroke-dasharray: 5,5;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Target handle highlighting during connection */
|
|
.vue-flow__handle.target:hover,
|
|
.vue-flow__handle.valid {
|
|
background: #2563eb !important;
|
|
border-color: #1d4ed8 !important;
|
|
transform: scale(1.3) !important;
|
|
}
|
|
|
|
/* Handle hover effects */
|
|
.handle-top:hover,
|
|
.handle-bottom:hover,
|
|
.handle-left:hover,
|
|
.handle-right:hover {
|
|
transform: scale(1.1);
|
|
border-width: 3px;
|
|
}
|
|
|
|
.handle-top:hover {
|
|
transform: translateX(-50%) scale(1.1);
|
|
}
|
|
|
|
.handle-bottom:hover {
|
|
transform: translateX(-50%) scale(1.1);
|
|
}
|
|
|
|
.handle-left:hover {
|
|
transform: translateY(-50%) scale(1.1);
|
|
}
|
|
|
|
.handle-right:hover {
|
|
transform: translateY(-50%) scale(1.1);
|
|
}
|
|
|
|
/* Source handles (output) */
|
|
.handle-start-output,
|
|
.handle-gateway-output,
|
|
.handle-form-output,
|
|
.handle-script-output,
|
|
.handle-api-output,
|
|
.handle-business-rule-output,
|
|
.handle-notification-output {
|
|
border-color: #4CAF50;
|
|
background: #e8f5e9;
|
|
}
|
|
|
|
.handle-start-output:hover,
|
|
.handle-gateway-output:hover,
|
|
.handle-form-output:hover,
|
|
.handle-script-output:hover,
|
|
.handle-api-output:hover,
|
|
.handle-business-rule-output:hover,
|
|
.handle-notification-output:hover {
|
|
background: #4CAF50;
|
|
border-color: #2E7D32;
|
|
}
|
|
|
|
/* Target handles (input) */
|
|
.handle-end-input,
|
|
.handle-gateway-input,
|
|
.handle-form-input,
|
|
.handle-script-input,
|
|
.handle-api-input,
|
|
.handle-business-rule-input,
|
|
.handle-notification-input {
|
|
border-color: #2196F3;
|
|
background: #e3f2fd;
|
|
}
|
|
|
|
.handle-end-input:hover,
|
|
.handle-gateway-input:hover,
|
|
.handle-form-input:hover,
|
|
.handle-script-input:hover,
|
|
.handle-api-input:hover,
|
|
.handle-business-rule-input:hover,
|
|
.handle-notification-input:hover {
|
|
background: #2196F3;
|
|
border-color: #1565C0;
|
|
}
|
|
|
|
/* Base styles for different node types */
|
|
.node-form, .node-script, .node-api, .node-business-rule, .node-notification {
|
|
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 #e0e0e0;
|
|
}
|
|
|
|
.node-gateway {
|
|
width: 120px !important;
|
|
height: 120px !important;
|
|
background: white;
|
|
transform: rotate(45deg);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
border: 2px solid #f97316;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.node-start, .node-end {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.node-start {
|
|
background: #e8f5e9;
|
|
border: 1px solid #4CAF50;
|
|
}
|
|
|
|
.node-end {
|
|
background: #ffebee;
|
|
border: 1px solid #f44336;
|
|
}
|
|
|
|
/* Content positioning */
|
|
.custom-node-content {
|
|
padding: 8px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.node-gateway .custom-node-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
text-align: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.node-start .custom-node-content,
|
|
.node-end .custom-node-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.custom-node-icon {
|
|
margin-right: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.node-start .custom-node-icon,
|
|
.node-end .custom-node-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.custom-node-icon .material-icons {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.node-start .material-icons,
|
|
.node-end .material-icons {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.custom-node-label {
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.node-form .custom-node-title,
|
|
.node-script .custom-node-title,
|
|
.node-api .custom-node-title,
|
|
.node-business-rule .custom-node-title,
|
|
.node-notification .custom-node-title {
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.node-gateway .custom-node-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #c2410c;
|
|
margin: 0 0 4px 0;
|
|
text-align: center;
|
|
width: 90%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Position handles correctly for gateway node */
|
|
.node-gateway .handle-top {
|
|
top: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) rotate(-45deg) !important;
|
|
border-color: #f97316 !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.node-gateway .handle-bottom {
|
|
bottom: -6px !important;
|
|
left: 50% !important;
|
|
transform: translateX(-50%) rotate(-45deg) !important;
|
|
border-color: #f97316 !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.node-gateway .handle-left {
|
|
left: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) rotate(-45deg) !important;
|
|
border-color: #f97316 !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.node-gateway .handle-right {
|
|
right: -6px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) rotate(-45deg) !important;
|
|
border-color: #f97316 !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.node-gateway:hover .handle-top,
|
|
.node-gateway:hover .handle-bottom,
|
|
.node-gateway:hover .handle-left,
|
|
.node-gateway:hover .handle-right {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.node-gateway .handle-top:hover {
|
|
transform: translateX(-50%) rotate(-45deg) scale(1.1) !important;
|
|
background: #f97316 !important;
|
|
}
|
|
|
|
.node-gateway .handle-bottom:hover {
|
|
transform: translateX(-50%) rotate(-45deg) scale(1.1) !important;
|
|
background: #f97316 !important;
|
|
}
|
|
|
|
.node-gateway .handle-left:hover {
|
|
transform: translateY(-50%) rotate(-45deg) scale(1.1) !important;
|
|
background: #f97316 !important;
|
|
}
|
|
|
|
.node-gateway .handle-right:hover {
|
|
transform: translateY(-50%) rotate(-45deg) scale(1.1) !important;
|
|
background: #f97316 !important;
|
|
}
|
|
|
|
/* Gateway specific styles */
|
|
.node-gateway:hover {
|
|
border-color: #ea580c;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.node-gateway .node-description {
|
|
text-align: center;
|
|
margin-bottom: 2px;
|
|
font-size: 8px;
|
|
line-height: 1.1;
|
|
overflow: hidden;
|
|
max-width: 80px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
max-width: 90px;
|
|
}
|
|
|
|
.node-gateway .node-rule-detail {
|
|
display: flex;
|
|
font-size: 8px;
|
|
color: #666;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 80%;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.node-gateway .node-rule-detail-label {
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.node-gateway .node-rule-detail-value {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 8px;
|
|
max-width: 50px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: #c2410c;
|
|
}
|
|
|
|
.node-gateway .material-icons {
|
|
font-size: 18px;
|
|
color: #f97316;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Update node-specific styles to be more consistent */
|
|
.node-form {
|
|
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 #9333ea; /* Purple border to match icon color */
|
|
}
|
|
|
|
.node-api {
|
|
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 #6366f1; /* Indigo border to match icon color */
|
|
}
|
|
|
|
/* Script node styling */
|
|
.node-script {
|
|
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 #6b7280; /* Gray border to match icon color */
|
|
}
|
|
|
|
/* Business rule node 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; /* Purple border to match icon color */
|
|
}
|
|
|
|
/* Notification node styling */
|
|
.node-notification {
|
|
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 #0ea5e9; /* Blue border to match icon color */
|
|
}
|
|
|
|
/* HTML node styling */
|
|
.node-html {
|
|
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 #0ea5e9; /* Blue border to match icon color */
|
|
background-color: #f0f9ff;
|
|
}
|
|
|
|
/* Subprocess node styling */
|
|
.node-subprocess {
|
|
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 #14b8a6; /* Teal border to match icon color */
|
|
}
|
|
|
|
/* Shape node styles */
|
|
.shape-node {
|
|
position: relative;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
cursor: move;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.shape-node.selected {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.shape-node:hover {
|
|
border-color: #94a3b8;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Specific shape styles */
|
|
.swimlane-horizontal {
|
|
border-style: solid;
|
|
border-width: 2px 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.swimlane-vertical {
|
|
border-style: solid;
|
|
border-width: 0 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.text-annotation {
|
|
border-style: dashed;
|
|
background: rgba(255, 251, 235, 0.8);
|
|
font-style: italic;
|
|
}
|
|
|
|
.process-group {
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.rectangle-shape {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Hexagon and Trapezoid shape styles using clip-path */
|
|
.shape-hexagon {
|
|
background: var(--node-bg-color, #f8fafc);
|
|
border: 2px solid var(--node-border-color, #e2e8f0);
|
|
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
|
color: var(--node-text-color, #475569);
|
|
}
|
|
|
|
.shape-trapezoid {
|
|
background: var(--node-bg-color, #f8fafc);
|
|
border: 2px solid var(--node-border-color, #e2e8f0);
|
|
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
|
|
color: var(--node-text-color, #475569);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
`;
|