- Added a computed property for dynamic shape classes in custom node components (ApiNode, BusinessRuleNode, FormNode, GatewayNode, HtmlNode, NotificationNode, ScriptNode, SubprocessNode) to support various shapes. - Updated the class bindings in the template to include the new shape classes, improving visual representation of nodes based on their defined shapes. - Adjusted styles in `nodeStyles.js` to accommodate new shape types (hexagon, trapezoid) and ensure proper rendering without conflicting base styles. - Enhanced the process builder interface by refining node styles and ensuring consistent behavior across different node types.
293 lines
6.4 KiB
Vue
293 lines
6.4 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) || "Script";
|
|
});
|
|
|
|
const scriptLanguage = computed(() => {
|
|
return props.data?.language || "Not specified";
|
|
});
|
|
|
|
const hasScript = computed(() => {
|
|
return !!props.data?.script;
|
|
});
|
|
|
|
// Computed for node styling based on colors
|
|
const nodeStyle = computed(() => {
|
|
const backgroundColor = props.data?.backgroundColor || "#f9fafb";
|
|
const borderColor = props.data?.borderColor || "#6b7280";
|
|
const textColor = props.data?.textColor || "#374151";
|
|
|
|
return {
|
|
"--node-bg-color": backgroundColor,
|
|
"--node-border-color": borderColor,
|
|
"--node-text-color": textColor,
|
|
backgroundColor: backgroundColor,
|
|
borderColor: borderColor,
|
|
color: textColor,
|
|
};
|
|
});
|
|
|
|
// Computed for shape class
|
|
const shapeClass = computed(() => {
|
|
const shape = props.data?.shape || "rectangle";
|
|
return `shape-${shape}`;
|
|
});
|
|
|
|
// Handle node click event
|
|
const emit = defineEmits(["node-click"]);
|
|
const onClick = () => {
|
|
emit("node-click", props.id);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['custom-node', 'node-script', shapeClass, { selected: selected }]"
|
|
:style="nodeStyle"
|
|
@click="onClick"
|
|
>
|
|
<!-- Input handles -->
|
|
<Handle
|
|
type="target"
|
|
:position="Position.Top"
|
|
class="handle-script-input handle-top"
|
|
:id="id + '-top'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<Handle
|
|
type="target"
|
|
:position="Position.Left"
|
|
class="handle-script-input handle-left"
|
|
:id="id + '-left'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<!-- Output handles -->
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Right"
|
|
class="handle-script-output handle-right"
|
|
:id="id + '-right'"
|
|
:style="{ zIndex: 1000 }"
|
|
:isConnectable="true"
|
|
:isValidConnection="() => true"
|
|
/>
|
|
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Bottom"
|
|
class="handle-script-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-gray-500">code</i>
|
|
</div>
|
|
<div class="custom-node-label" :title="nodeLabel">{{ nodeLabel }}</div>
|
|
</div>
|
|
|
|
<div class="node-details">
|
|
<p class="node-description">
|
|
{{ data?.description || "Script execution" }}
|
|
</p>
|
|
<div
|
|
class="node-rule-detail flex items-center justify-between text-xs mt-1"
|
|
>
|
|
<span class="node-rule-detail-label">Language:</span>
|
|
<span class="node-rule-detail-value ml-1 font-medium text-gray-600">
|
|
JavaScript
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Script node specific 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;
|
|
position: relative;
|
|
font-size: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.node-script.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-script:hover .handle-top,
|
|
.node-script:hover .handle-bottom,
|
|
.node-script:hover .handle-left,
|
|
.node-script: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>
|