@ichigo_san/graphing
Version:
A lightweight UML-style diagram editor built with React Flow and Tailwind CSS
428 lines (420 loc) • 13.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactflow = _interopRequireWildcard(require("reactflow"));
require("reactflow/dist/style.css");
var _nodes = require("../nodes");
var _edges = require("../edges");
var _hooks = require("../hooks");
var _ConnectionPreview = _interopRequireDefault(require("../ConnectionPreview"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const EnhancedConnectionDemo = () => {
const [nodes, setNodes, onNodesChange] = (0, _reactflow.useNodesState)([]);
const [edges, setEdges, onEdgesChange] = (0, _reactflow.useEdgesState)([]);
// Initialize enhanced connection and routing services
const {
isConnecting,
connectionPreview,
handleConnectionStart,
handleConnectionEnd,
handleConnectionMouseMove,
handleConnectionMouseUp,
updateConnectionConfig
} = (0, _hooks.useConnectionService)({
connectionPointRadius: 6,
connectionPointMargin: 10,
visualFeedbackEnabled: true,
smartAttachmentEnabled: true,
connectionValidationEnabled: true
});
const {
addEdgeWithRouting,
handleNodeMove,
optimizeAllEdges,
rerouteAllEdges,
clearAllManualRouting,
getRoutingStats,
updateRoutingConfig
} = (0, _hooks.useOrthogonalRouting)({
autoRouteEnabled: true,
collisionAvoidanceEnabled: true,
rerouteOnNodeMove: true,
gridSize: 20,
minSpacing: 50,
jettySize: 10,
obstacleMargin: 20
});
// Configuration state
const [config, setConfig] = (0, _react.useState)({
connectionPointRadius: 6,
connectionPointMargin: 10,
visualFeedbackEnabled: true,
smartAttachmentEnabled: true,
connectionValidationEnabled: true,
autoRouteEnabled: true,
collisionAvoidanceEnabled: true,
rerouteOnNodeMove: true
});
// Enhanced connection handling
const onConnect = (0, _react.useCallback)(params => {
const newEdge = {
...params,
id: `edge-${Date.now()}`,
type: 'orthogonal',
animated: false,
style: {
strokeWidth: 2,
stroke: '#2563eb',
zIndex: 5
},
markerEnd: {
type: 'arrow'
},
data: {
label: '',
description: '',
intersection: 'none',
waypoints: [],
autoRouted: true,
connectionType: 'orthogonal'
}
};
addEdgeWithRouting(newEdge);
}, [addEdgeWithRouting]);
// Enhanced node data with connection handlers
const enhancedNodes = nodes.map(node => ({
...node,
data: {
...node.data,
onConnectionStart: handleConnectionStart,
onConnectionEnd: handleConnectionEnd
}
}));
// Add sample containers
const addSampleContainers = (0, _react.useCallback)(() => {
const newNodes = [{
id: 'container-1',
type: 'container',
position: {
x: 100,
y: 100
},
data: {
label: 'Frontend Container',
description: 'React application',
background: '#f0f9ff',
borderColor: '#0ea5e9',
headerColor: '#e0f2fe'
},
width: 200,
height: 150
}, {
id: 'container-2',
type: 'container',
position: {
x: 400,
y: 100
},
data: {
label: 'Backend Container',
description: 'Node.js API',
background: '#fef3c7',
borderColor: '#f59e0b',
headerColor: '#fefce8'
},
width: 200,
height: 150
}, {
id: 'container-3',
type: 'container',
position: {
x: 250,
y: 350
},
data: {
label: 'Database Container',
description: 'PostgreSQL',
background: '#f3e8ff',
borderColor: '#8b5cf6',
headerColor: '#faf5ff'
},
width: 200,
height: 150
}];
setNodes(newNodes);
}, [setNodes]);
// Update configuration
const updateConfig = (0, _react.useCallback)(newConfig => {
setConfig(newConfig);
updateConnectionConfig(newConfig);
updateRoutingConfig(newConfig);
}, [updateConnectionConfig, updateRoutingConfig]);
// Get routing statistics
const stats = getRoutingStats();
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: '100vw',
height: '100vh'
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
position: 'absolute',
top: '10px',
left: '10px',
width: '300px',
background: 'rgba(255, 255, 255, 0.95)',
border: '1px solid #e5e7eb',
borderRadius: '8px',
padding: '16px',
zIndex: 1000,
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
maxHeight: '80vh',
overflowY: 'auto'
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
margin: '0 0 16px 0',
fontSize: '18px',
fontWeight: 'bold',
color: '#1f2937'
}
}, "Enhanced Connection Demo"), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '16px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 8px 0',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151'
}
}, "Connection Settings"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px'
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
checked: config.visualFeedbackEnabled,
onChange: e => updateConfig({
...config,
visualFeedbackEnabled: e.target.checked
}),
style: {
marginRight: '8px'
}
}), "Visual Feedback"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px'
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
checked: config.smartAttachmentEnabled,
onChange: e => updateConfig({
...config,
smartAttachmentEnabled: e.target.checked
}),
style: {
marginRight: '8px'
}
}), "Smart Attachment"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px'
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
checked: config.connectionValidationEnabled,
onChange: e => updateConfig({
...config,
connectionValidationEnabled: e.target.checked
}),
style: {
marginRight: '8px'
}
}), "Connection Validation")), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '16px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 8px 0',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151'
}
}, "Routing Settings"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px'
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
checked: config.autoRouteEnabled,
onChange: e => updateConfig({
...config,
autoRouteEnabled: e.target.checked
}),
style: {
marginRight: '8px'
}
}), "Auto Route Enabled"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px'
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
checked: config.collisionAvoidanceEnabled,
onChange: e => updateConfig({
...config,
collisionAvoidanceEnabled: e.target.checked
}),
style: {
marginRight: '8px'
}
}), "Collision Avoidance"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px'
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
checked: config.rerouteOnNodeMove,
onChange: e => updateConfig({
...config,
rerouteOnNodeMove: e.target.checked
}),
style: {
marginRight: '8px'
}
}), "Reroute on Node Move")), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '16px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 8px 0',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151'
}
}, "Actions"), /*#__PURE__*/_react.default.createElement("button", {
onClick: addSampleContainers,
style: {
padding: '8px 12px',
marginBottom: '8px',
background: '#3b82f6',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
width: '100%'
}
}, "Add Sample Containers"), /*#__PURE__*/_react.default.createElement("button", {
onClick: optimizeAllEdges,
style: {
padding: '8px 12px',
marginBottom: '8px',
background: '#10b981',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
width: '100%'
}
}, "Optimize Layout"), /*#__PURE__*/_react.default.createElement("button", {
onClick: rerouteAllEdges,
style: {
padding: '8px 12px',
marginBottom: '8px',
background: '#f59e0b',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
width: '100%'
}
}, "Reroute All"), /*#__PURE__*/_react.default.createElement("button", {
onClick: clearAllManualRouting,
style: {
padding: '8px 12px',
marginBottom: '8px',
background: '#ef4444',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
width: '100%'
}
}, "Clear Manual Routing")), stats && /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '16px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 8px 0',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151'
}
}, "Statistics"), /*#__PURE__*/_react.default.createElement("div", {
style: {
fontSize: '12px',
color: '#6b7280'
}
}, /*#__PURE__*/_react.default.createElement("div", null, "Total Edges: ", stats.totalEdges), /*#__PURE__*/_react.default.createElement("div", null, "Auto-routed: ", stats.autoRouted), /*#__PURE__*/_react.default.createElement("div", null, "Manual: ", stats.manualRouted), /*#__PURE__*/_react.default.createElement("div", null, "Avg Waypoints: ", stats.averageWaypoints.toFixed(1)))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 8px 0',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151'
}
}, "Instructions"), /*#__PURE__*/_react.default.createElement("ul", {
style: {
margin: 0,
paddingLeft: '15px',
fontSize: '12px',
color: '#6b7280'
}
}, /*#__PURE__*/_react.default.createElement("li", null, "Drag from connection points to create arrows"), /*#__PURE__*/_react.default.createElement("li", null, "Visual feedback shows valid/invalid targets"), /*#__PURE__*/_react.default.createElement("li", null, "Arrows automatically route around obstacles"), /*#__PURE__*/_react.default.createElement("li", null, "Drag nodes to see automatic re-routing"), /*#__PURE__*/_react.default.createElement("li", null, "Double-click waypoints to remove them")))), /*#__PURE__*/_react.default.createElement(_reactflow.default, {
nodes: enhancedNodes,
edges: edges,
onNodesChange: onNodesChange,
onEdgesChange: onEdgesChange,
onConnect: onConnect,
onNodeDragStop: handleNodeMove,
nodeTypes: {
container: _nodes.ContainerNode
},
edgeTypes: {
orthogonal: _edges.OrthogonalEdge
},
onMouseMove: handleConnectionMouseMove,
onMouseUp: handleConnectionMouseUp,
fitView: true,
style: {
backgroundColor: '#f8fafc'
}
}, /*#__PURE__*/_react.default.createElement(_reactflow.Background, null), /*#__PURE__*/_react.default.createElement(_reactflow.Controls, null), /*#__PURE__*/_react.default.createElement(_reactflow.MiniMap, null), /*#__PURE__*/_react.default.createElement(_ConnectionPreview.default, {
connectionPreview: connectionPreview,
isVisible: isConnecting
})));
};
var _default = exports.default = EnhancedConnectionDemo;