@ichigo_san/graphing
Version:
A lightweight UML-style diagram editor built with React Flow and Tailwind CSS
73 lines (71 loc) • 1.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactflow = require("reactflow");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ConnectionPreview = ({
connectionPreview,
isVisible
}) => {
const {
project
} = (0, _reactflow.useReactFlow)();
if (!isVisible || !connectionPreview) {
return null;
}
const {
source,
target,
isValid
} = connectionPreview;
// Project coordinates to screen space
const sourceScreen = project({
x: source.x,
y: source.y
});
const targetScreen = project({
x: target.x,
y: target.y
});
const previewStyle = {
stroke: isValid ? '#10b981' : '#ef4444',
strokeWidth: 2,
strokeDasharray: '5,5',
opacity: 0.8,
pointerEvents: 'none',
zIndex: 1000
};
return /*#__PURE__*/_react.default.createElement("svg", {
style: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
pointerEvents: 'none',
zIndex: 1000
}
}, /*#__PURE__*/_react.default.createElement("line", {
x1: sourceScreen.x,
y1: sourceScreen.y,
x2: targetScreen.x,
y2: targetScreen.y,
style: previewStyle
}), /*#__PURE__*/_react.default.createElement("circle", {
cx: sourceScreen.x,
cy: sourceScreen.y,
r: 4,
fill: isValid ? '#10b981' : '#ef4444',
opacity: 0.8
}), /*#__PURE__*/_react.default.createElement("circle", {
cx: targetScreen.x,
cy: targetScreen.y,
r: 4,
fill: isValid ? '#10b981' : '#ef4444',
opacity: 0.8
}));
};
var _default = exports.default = ConnectionPreview;