@ichigo_san/graphing
Version:
A lightweight UML-style diagram editor built with React Flow and Tailwind CSS
371 lines (361 loc) • 10.6 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 _edges = require("./edges");
var _hooks = require("../hooks");
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 OrthogonalRoutingDemo = () => {
const [nodes, setNodes, onNodesChange] = (0, _reactflow.useNodesState)([]);
const [edges, setEdges, onEdgesChange] = (0, _reactflow.useEdgesState)([]);
// Initialize orthogonal routing
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)({
autoRouteEnabled: true,
collisionAvoidanceEnabled: true,
rerouteOnNodeMove: true,
gridSize: 20,
minSpacing: 50,
jettySize: 10,
obstacleMargin: 20
});
// Handle edge connection
const onConnect = (0, _react.useCallback)(params => {
addEdgeWithRouting({
...params,
type: 'orthogonal',
data: {
label: `Edge ${edges.length + 1}`
}
});
}, [addEdgeWithRouting, edges.length]);
// Handle node movement
const onNodeDragStop = (0, _react.useCallback)((event, node) => {
handleNodeMove(event, node);
}, [handleNodeMove]);
// Add sample nodes
const addSampleNodes = (0, _react.useCallback)(() => {
const newNodes = [{
id: '1',
type: 'default',
position: {
x: 100,
y: 100
},
data: {
label: 'Node 1'
},
width: 120,
height: 60
}, {
id: '2',
type: 'default',
position: {
x: 400,
y: 100
},
data: {
label: 'Node 2'
},
width: 120,
height: 60
}, {
id: '3',
type: 'default',
position: {
x: 250,
y: 300
},
data: {
label: 'Node 3'
},
width: 120,
height: 60
}, {
id: '4',
type: 'default',
position: {
x: 550,
y: 300
},
data: {
label: 'Node 4'
},
width: 120,
height: 60
}, {
id: '5',
type: 'default',
position: {
x: 100,
y: 500
},
data: {
label: 'Node 5'
},
width: 120,
height: 60
}];
setNodes(newNodes);
}, [setNodes]);
// Add sample edges
const addSampleEdges = (0, _react.useCallback)(() => {
const newEdges = [{
id: 'e1-2',
source: '1',
target: '2',
type: 'orthogonal',
data: {
label: 'Auto-routed'
}
}, {
id: 'e1-3',
source: '1',
target: '3',
type: 'orthogonal',
data: {
label: 'Collision Avoidance'
}
}, {
id: 'e2-4',
source: '2',
target: '4',
type: 'orthogonal',
data: {
label: 'Smart Routing'
}
}, {
id: 'e3-5',
source: '3',
target: '5',
type: 'orthogonal',
data: {
label: 'Orthogonal Path'
}
}];
// Auto-route all edges
newEdges.forEach(edge => {
addEdgeWithRouting(edge);
});
}, [addEdgeWithRouting]);
// Update configuration
const updateConfig = (0, _react.useCallback)(newConfig => {
setConfig(newConfig);
updateRoutingConfig(newConfig);
}, [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: 10,
left: 10,
zIndex: 1000,
backgroundColor: 'rgba(255, 255, 255, 0.95)',
padding: '20px',
borderRadius: '8px',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
minWidth: '300px',
backdropFilter: 'blur(10px)'
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
margin: '0 0 15px 0',
color: '#333'
}
}, "Orthogonal Routing Demo"), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '20px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 10px 0',
fontSize: '14px'
}
}, "Configuration"), /*#__PURE__*/_react.default.createElement("label", {
style: {
display: 'block',
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: 'block',
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: 'block',
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: '20px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 10px 0',
fontSize: '14px'
}
}, "Actions"), /*#__PURE__*/_react.default.createElement("button", {
onClick: addSampleNodes,
style: {
margin: '5px',
padding: '8px 12px',
backgroundColor: '#3b82f6',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}
}, "Add Sample Nodes"), /*#__PURE__*/_react.default.createElement("button", {
onClick: addSampleEdges,
style: {
margin: '5px',
padding: '8px 12px',
backgroundColor: '#10b981',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}
}, "Add Sample Edges"), /*#__PURE__*/_react.default.createElement("button", {
onClick: optimizeAllEdges,
style: {
margin: '5px',
padding: '8px 12px',
backgroundColor: '#f59e0b',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}
}, "Optimize Layout"), /*#__PURE__*/_react.default.createElement("button", {
onClick: rerouteAllEdges,
style: {
margin: '5px',
padding: '8px 12px',
backgroundColor: '#8b5cf6',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}
}, "Reroute All"), /*#__PURE__*/_react.default.createElement("button", {
onClick: clearAllManualRouting,
style: {
margin: '5px',
padding: '8px 12px',
backgroundColor: '#ef4444',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}
}, "Clear Manual Routing")), stats && /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: '20px'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 10px 0',
fontSize: '14px'
}
}, "Statistics"), /*#__PURE__*/_react.default.createElement("div", {
style: {
fontSize: '12px',
color: '#666'
}
}, /*#__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", {
style: {
fontSize: '12px',
color: '#666'
}
}, /*#__PURE__*/_react.default.createElement("h4", {
style: {
margin: '0 0 10px 0',
fontSize: '14px'
}
}, "Instructions"), /*#__PURE__*/_react.default.createElement("ul", {
style: {
margin: 0,
paddingLeft: '15px'
}
}, /*#__PURE__*/_react.default.createElement("li", null, "Drag nodes to see automatic re-routing"), /*#__PURE__*/_react.default.createElement("li", null, "Drag edge segments to adjust manually"), /*#__PURE__*/_react.default.createElement("li", null, "Double-click waypoints to remove them"), /*#__PURE__*/_react.default.createElement("li", null, "Connect nodes to see auto-routing")))), /*#__PURE__*/_react.default.createElement(_reactflow.default, {
nodes: nodes,
edges: edges,
onNodesChange: onNodesChange,
onEdgesChange: onEdgesChange,
onConnect: onConnect,
onNodeDragStop: onNodeDragStop,
nodeTypes: {},
edgeTypes: {
orthogonal: _edges.OrthogonalEdge
},
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)));
};
var _default = exports.default = OrthogonalRoutingDemo;