@bernierllc/generic-workflow-ui
Version:
Generic, reusable workflow UI components with linear and graph visualization
60 lines (58 loc) • 2.65 kB
JavaScript
"use strict";
/*
Copyright (c) 2025 Bernier LLC
This file is licensed to the client under a limited-use license.
The client may use and modify this code *only within the scope of the project it was delivered for*.
Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GenericWorkflowEdge = GenericWorkflowEdge;
const react_1 = __importDefault(require("react"));
const react_2 = require("@xyflow/react");
// ============================================================================
// COMPONENT
// ============================================================================
/**
* Custom ReactFlow edge component for workflow transitions
*/
function GenericWorkflowEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected, markerEnd, }) {
const edgeData = (data || {});
const { transition, isAvailable } = edgeData;
const [edgePath, labelX, labelY] = (0, react_2.getSmoothStepPath)({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const edgeColor = selected
? '#9333ea' // purple for selected
: isAvailable
? '#3b82f6' // blue for available
: '#9ca3af'; // gray for inactive
const edgeWidth = selected ? 3 : 2;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_2.BaseEdge, { id: id, path: edgePath, markerEnd: markerEnd, style: {
stroke: edgeColor,
strokeWidth: edgeWidth,
} }),
transition?.name && (react_1.default.createElement(react_2.EdgeLabelRenderer, null,
react_1.default.createElement("div", { style: {
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
fontSize: 12,
fontWeight: 500,
pointerEvents: 'all',
backgroundColor: 'white',
padding: '4px 8px',
borderRadius: 4,
border: `1px solid ${edgeColor}`,
color: edgeColor,
}, className: "generic-workflow-edge-label" }, transition.name)))));
}
GenericWorkflowEdge.displayName = 'GenericWorkflowEdge';
exports.default = GenericWorkflowEdge;