70-react-network-diagrams
Version:
1,479 lines (1,477 loc) • 345 kB
JavaScript
import * as D from "react";
import z, { useState as Je, useCallback as ye, forwardRef as Es, useContext as ws, useLayoutEffect as zi, useRef as We, useMemo as Ke, createContext as Ji, Component as $i, Fragment as nn, useEffect as Ps } from "react";
import E from "underscore";
import u from "prop-types";
import { scaleLinear as jn } from "d3-scale";
import xe from "victor";
import ft from "keymirror";
import { createPortal as _i } from "react-dom";
var vt = { exports: {} }, ot = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Hn;
function Ui() {
if (Hn) return ot;
Hn = 1;
var s = z, e = Symbol.for("react.element"), n = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, t = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, r = { key: !0, ref: !0, __self: !0, __source: !0 };
function o(l, a, c) {
var p, g = {}, b = null, m = null;
c !== void 0 && (b = "" + c), a.key !== void 0 && (b = "" + a.key), a.ref !== void 0 && (m = a.ref);
for (p in a) i.call(a, p) && !r.hasOwnProperty(p) && (g[p] = a[p]);
if (l && l.defaultProps) for (p in a = l.defaultProps, a) g[p] === void 0 && (g[p] = a[p]);
return { $$typeof: e, type: l, key: b, ref: m, props: g, _owner: t.current };
}
return ot.Fragment = n, ot.jsx = o, ot.jsxs = o, ot;
}
var at = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Yn;
function Qi() {
return Yn || (Yn = 1, process.env.NODE_ENV !== "production" && function() {
var s = z, e = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), t = Symbol.for("react.strict_mode"), r = Symbol.for("react.profiler"), o = Symbol.for("react.provider"), l = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), c = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), m = Symbol.for("react.offscreen"), y = Symbol.iterator, C = "@@iterator";
function d(f) {
if (f === null || typeof f != "object")
return null;
var G = y && f[y] || f[C];
return typeof G == "function" ? G : null;
}
var v = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function x(f) {
{
for (var G = arguments.length, O = new Array(G > 1 ? G - 1 : 0), X = 1; X < G; X++)
O[X - 1] = arguments[X];
w("error", f, O);
}
}
function w(f, G, O) {
{
var X = v.ReactDebugCurrentFrame, Q = X.getStackAddendum();
Q !== "" && (G += "%s", O = O.concat([Q]));
var ne = O.map(function(Z) {
return String(Z);
});
ne.unshift("Warning: " + G), Function.prototype.apply.call(console[f], console, ne);
}
}
var A = !1, I = !1, P = !1, S = !1, R = !1, T;
T = Symbol.for("react.module.reference");
function M(f) {
return !!(typeof f == "string" || typeof f == "function" || f === i || f === r || R || f === t || f === c || f === p || S || f === m || A || I || P || typeof f == "object" && f !== null && (f.$$typeof === b || f.$$typeof === g || f.$$typeof === o || f.$$typeof === l || f.$$typeof === a || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
f.$$typeof === T || f.getModuleId !== void 0));
}
function L(f, G, O) {
var X = f.displayName;
if (X)
return X;
var Q = G.displayName || G.name || "";
return Q !== "" ? O + "(" + Q + ")" : O;
}
function k(f) {
return f.displayName || "Context";
}
function H(f) {
if (f == null)
return null;
if (typeof f.tag == "number" && x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof f == "function")
return f.displayName || f.name || null;
if (typeof f == "string")
return f;
switch (f) {
case i:
return "Fragment";
case n:
return "Portal";
case r:
return "Profiler";
case t:
return "StrictMode";
case c:
return "Suspense";
case p:
return "SuspenseList";
}
if (typeof f == "object")
switch (f.$$typeof) {
case l:
var G = f;
return k(G) + ".Consumer";
case o:
var O = f;
return k(O._context) + ".Provider";
case a:
return L(f, f.render, "ForwardRef");
case g:
var X = f.displayName || null;
return X !== null ? X : H(f.type) || "Memo";
case b: {
var Q = f, ne = Q._payload, Z = Q._init;
try {
return H(Z(ne));
} catch {
return null;
}
}
}
return null;
}
var U = Object.assign, W = 0, j, ee, te, oe, de, Ce, J;
function se() {
}
se.__reactDisabledLog = !0;
function fe() {
{
if (W === 0) {
j = console.log, ee = console.info, te = console.warn, oe = console.error, de = console.group, Ce = console.groupCollapsed, J = console.groupEnd;
var f = {
configurable: !0,
enumerable: !0,
value: se,
writable: !0
};
Object.defineProperties(console, {
info: f,
log: f,
warn: f,
error: f,
group: f,
groupCollapsed: f,
groupEnd: f
});
}
W++;
}
}
function he() {
{
if (W--, W === 0) {
var f = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: U({}, f, {
value: j
}),
info: U({}, f, {
value: ee
}),
warn: U({}, f, {
value: te
}),
error: U({}, f, {
value: oe
}),
group: U({}, f, {
value: de
}),
groupCollapsed: U({}, f, {
value: Ce
}),
groupEnd: U({}, f, {
value: J
})
});
}
W < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ie = v.ReactCurrentDispatcher, ae;
function ce(f, G, O) {
{
if (ae === void 0)
try {
throw Error();
} catch (Q) {
var X = Q.stack.trim().match(/\n( *(at )?)/);
ae = X && X[1] || "";
}
return `
` + ae + f;
}
}
var me = !1, Fe;
{
var je = typeof WeakMap == "function" ? WeakMap : Map;
Fe = new je();
}
function F(f, G) {
if (!f || me)
return "";
{
var O = Fe.get(f);
if (O !== void 0)
return O;
}
var X;
me = !0;
var Q = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var ne;
ne = ie.current, ie.current = null, fe();
try {
if (G) {
var Z = function() {
throw Error();
};
if (Object.defineProperty(Z.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(Z, []);
} catch (Ie) {
X = Ie;
}
Reflect.construct(f, [], Z);
} else {
try {
Z.call();
} catch (Ie) {
X = Ie;
}
f.call(Z.prototype);
}
} else {
try {
throw Error();
} catch (Ie) {
X = Ie;
}
f();
}
} catch (Ie) {
if (Ie && X && typeof Ie.stack == "string") {
for (var Y = Ie.stack.split(`
`), ve = X.stack.split(`
`), le = Y.length - 1, ue = ve.length - 1; le >= 1 && ue >= 0 && Y[le] !== ve[ue]; )
ue--;
for (; le >= 1 && ue >= 0; le--, ue--)
if (Y[le] !== ve[ue]) {
if (le !== 1 || ue !== 1)
do
if (le--, ue--, ue < 0 || Y[le] !== ve[ue]) {
var Re = `
` + Y[le].replace(" at new ", " at ");
return f.displayName && Re.includes("<anonymous>") && (Re = Re.replace("<anonymous>", f.displayName)), typeof f == "function" && Fe.set(f, Re), Re;
}
while (le >= 1 && ue >= 0);
break;
}
}
} finally {
me = !1, ie.current = ne, he(), Error.prepareStackTrace = Q;
}
var Qe = f ? f.displayName || f.name : "", Ze = Qe ? ce(Qe) : "";
return typeof f == "function" && Fe.set(f, Ze), Ze;
}
function Ve(f, G, O) {
return F(f, !1);
}
function Pe(f) {
var G = f.prototype;
return !!(G && G.isReactComponent);
}
function Ee(f, G, O) {
if (f == null)
return "";
if (typeof f == "function")
return F(f, Pe(f));
if (typeof f == "string")
return ce(f);
switch (f) {
case c:
return ce("Suspense");
case p:
return ce("SuspenseList");
}
if (typeof f == "object")
switch (f.$$typeof) {
case a:
return Ve(f.render);
case g:
return Ee(f.type, G, O);
case b: {
var X = f, Q = X._payload, ne = X._init;
try {
return Ee(ne(Q), G, O);
} catch {
}
}
}
return "";
}
var Xe = Object.prototype.hasOwnProperty, Rn = {}, Gn = v.ReactDebugCurrentFrame;
function mt(f) {
if (f) {
var G = f._owner, O = Ee(f.type, f._source, G ? G.type : null);
Gn.setExtraStackFrame(O);
} else
Gn.setExtraStackFrame(null);
}
function Ai(f, G, O, X, Q) {
{
var ne = Function.call.bind(Xe);
for (var Z in f)
if (ne(f, Z)) {
var Y = void 0;
try {
if (typeof f[Z] != "function") {
var ve = Error((X || "React class") + ": " + O + " type `" + Z + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof f[Z] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw ve.name = "Invariant Violation", ve;
}
Y = f[Z](G, Z, X, O, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (le) {
Y = le;
}
Y && !(Y instanceof Error) && (mt(Q), x("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", X || "React class", O, Z, typeof Y), mt(null)), Y instanceof Error && !(Y.message in Rn) && (Rn[Y.message] = !0, mt(Q), x("Failed %s type: %s", O, Y.message), mt(null));
}
}
}
var Ei = Array.isArray;
function Ht(f) {
return Ei(f);
}
function wi(f) {
{
var G = typeof Symbol == "function" && Symbol.toStringTag, O = G && f[Symbol.toStringTag] || f.constructor.name || "Object";
return O;
}
}
function Pi(f) {
try {
return On(f), !1;
} catch {
return !0;
}
}
function On(f) {
return "" + f;
}
function Fn(f) {
if (Pi(f))
return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", wi(f)), On(f);
}
var Tn = v.ReactCurrentOwner, Ri = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Bn, Mn;
function Gi(f) {
if (Xe.call(f, "ref")) {
var G = Object.getOwnPropertyDescriptor(f, "ref").get;
if (G && G.isReactWarning)
return !1;
}
return f.ref !== void 0;
}
function Oi(f) {
if (Xe.call(f, "key")) {
var G = Object.getOwnPropertyDescriptor(f, "key").get;
if (G && G.isReactWarning)
return !1;
}
return f.key !== void 0;
}
function Fi(f, G) {
typeof f.ref == "string" && Tn.current;
}
function Ti(f, G) {
{
var O = function() {
Bn || (Bn = !0, x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", G));
};
O.isReactWarning = !0, Object.defineProperty(f, "key", {
get: O,
configurable: !0
});
}
}
function Bi(f, G) {
{
var O = function() {
Mn || (Mn = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", G));
};
O.isReactWarning = !0, Object.defineProperty(f, "ref", {
get: O,
configurable: !0
});
}
}
var Mi = function(f, G, O, X, Q, ne, Z) {
var Y = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: e,
// Built-in properties that belong on the element
type: f,
key: G,
ref: O,
props: Z,
// Record the component responsible for creating this element.
_owner: ne
};
return Y._store = {}, Object.defineProperty(Y._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(Y, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: X
}), Object.defineProperty(Y, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: Q
}), Object.freeze && (Object.freeze(Y.props), Object.freeze(Y)), Y;
};
function Ni(f, G, O, X, Q) {
{
var ne, Z = {}, Y = null, ve = null;
O !== void 0 && (Fn(O), Y = "" + O), Oi(G) && (Fn(G.key), Y = "" + G.key), Gi(G) && (ve = G.ref, Fi(G, Q));
for (ne in G)
Xe.call(G, ne) && !Ri.hasOwnProperty(ne) && (Z[ne] = G[ne]);
if (f && f.defaultProps) {
var le = f.defaultProps;
for (ne in le)
Z[ne] === void 0 && (Z[ne] = le[ne]);
}
if (Y || ve) {
var ue = typeof f == "function" ? f.displayName || f.name || "Unknown" : f;
Y && Ti(Z, ue), ve && Bi(Z, ue);
}
return Mi(f, Y, ve, Q, X, Tn.current, Z);
}
}
var Yt = v.ReactCurrentOwner, Nn = v.ReactDebugCurrentFrame;
function Ue(f) {
if (f) {
var G = f._owner, O = Ee(f.type, f._source, G ? G.type : null);
Nn.setExtraStackFrame(O);
} else
Nn.setExtraStackFrame(null);
}
var Zt;
Zt = !1;
function zt(f) {
return typeof f == "object" && f !== null && f.$$typeof === e;
}
function Vn() {
{
if (Yt.current) {
var f = H(Yt.current.type);
if (f)
return `
Check the render method of \`` + f + "`.";
}
return "";
}
}
function Vi(f) {
return "";
}
var Xn = {};
function Xi(f) {
{
var G = Vn();
if (!G) {
var O = typeof f == "string" ? f : f.displayName || f.name;
O && (G = `
Check the top-level render call using <` + O + ">.");
}
return G;
}
}
function Wn(f, G) {
{
if (!f._store || f._store.validated || f.key != null)
return;
f._store.validated = !0;
var O = Xi(G);
if (Xn[O])
return;
Xn[O] = !0;
var X = "";
f && f._owner && f._owner !== Yt.current && (X = " It was passed a child from " + H(f._owner.type) + "."), Ue(f), x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', O, X), Ue(null);
}
}
function Dn(f, G) {
{
if (typeof f != "object")
return;
if (Ht(f))
for (var O = 0; O < f.length; O++) {
var X = f[O];
zt(X) && Wn(X, G);
}
else if (zt(f))
f._store && (f._store.validated = !0);
else if (f) {
var Q = d(f);
if (typeof Q == "function" && Q !== f.entries)
for (var ne = Q.call(f), Z; !(Z = ne.next()).done; )
zt(Z.value) && Wn(Z.value, G);
}
}
}
function Wi(f) {
{
var G = f.type;
if (G == null || typeof G == "string")
return;
var O;
if (typeof G == "function")
O = G.propTypes;
else if (typeof G == "object" && (G.$$typeof === a || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
G.$$typeof === g))
O = G.propTypes;
else
return;
if (O) {
var X = H(G);
Ai(O, f.props, "prop", X, f);
} else if (G.PropTypes !== void 0 && !Zt) {
Zt = !0;
var Q = H(G);
x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", Q || "Unknown");
}
typeof G.getDefaultProps == "function" && !G.getDefaultProps.isReactClassApproved && x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function Di(f) {
{
for (var G = Object.keys(f.props), O = 0; O < G.length; O++) {
var X = G[O];
if (X !== "children" && X !== "key") {
Ue(f), x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", X), Ue(null);
break;
}
}
f.ref !== null && (Ue(f), x("Invalid attribute `ref` supplied to `React.Fragment`."), Ue(null));
}
}
var Ln = {};
function kn(f, G, O, X, Q, ne) {
{
var Z = M(f);
if (!Z) {
var Y = "";
(f === void 0 || typeof f == "object" && f !== null && Object.keys(f).length === 0) && (Y += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var ve = Vi();
ve ? Y += ve : Y += Vn();
var le;
f === null ? le = "null" : Ht(f) ? le = "array" : f !== void 0 && f.$$typeof === e ? (le = "<" + (H(f.type) || "Unknown") + " />", Y = " Did you accidentally export a JSX literal instead of a component?") : le = typeof f, x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", le, Y);
}
var ue = Ni(f, G, O, Q, ne);
if (ue == null)
return ue;
if (Z) {
var Re = G.children;
if (Re !== void 0)
if (X)
if (Ht(Re)) {
for (var Qe = 0; Qe < Re.length; Qe++)
Dn(Re[Qe], f);
Object.freeze && Object.freeze(Re);
} else
x("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Dn(Re, f);
}
if (Xe.call(G, "key")) {
var Ze = H(f), Ie = Object.keys(G).filter(function(Zi) {
return Zi !== "key";
}), Jt = Ie.length > 0 ? "{key: someKey, " + Ie.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Ln[Ze + Jt]) {
var Yi = Ie.length > 0 ? "{" + Ie.join(": ..., ") + ": ...}" : "{}";
x(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, Jt, Ze, Yi, Ze), Ln[Ze + Jt] = !0;
}
}
return f === i ? Di(ue) : Wi(ue), ue;
}
}
function Li(f, G, O) {
return kn(f, G, O, !0);
}
function ki(f, G, O) {
return kn(f, G, O, !1);
}
var ji = ki, Hi = Li;
at.Fragment = i, at.jsx = ji, at.jsxs = Hi;
}()), at;
}
var Zn;
function qi() {
return Zn || (Zn = 1, process.env.NODE_ENV === "production" ? vt.exports = Ui() : vt.exports = Qi()), vt.exports;
}
var h = qi();
class Oe extends z.Component {
render() {
let e = [];
E.isArray(this.props.label) ? e = E.clone(this.props.label) : e.push(this.props.label);
const n = [], i = this.props.x, t = this.props.y, r = this.props.r, o = this.props.textAnchor ? this.props.textAnchor : "middle", l = `rotate(${r} ${i}, ${t})`, a = this.props.style.fontSize ? this.props.style.fontSize : 10, c = this.props.yOffset, p = this.props.xOffset;
(this.props.labelPosition === "top" || this.props.labelPosition === "center") && e.reverse();
let g, b, m;
return this.props.labelPosition === "center" && (m = t + e.length / 2 * a), E.each(e, (y, C) => {
switch (g = i + p, this.props.labelPosition) {
case "top":
b = t - c - C * a;
break;
case "bottom":
b = t + c + a + C * a;
break;
case "center":
b = m - c - C * a;
break;
}
n.push(
/* @__PURE__ */ h.jsx("tspan", { x: g, y: b, children: y }, "label-line-" + C)
);
}), /* @__PURE__ */ h.jsx("g", { children: /* @__PURE__ */ h.jsx(
"text",
{
textAnchor: o,
style: this.props.style,
transform: l,
className: this.props.labelClassed,
children: n
},
"connection-label"
) });
}
}
Oe.propTypes = {
r: u.number,
/**
* Horizontal distance from the center line to offset the connection label.
*/
xOffset: u.number,
/**
* Vertical distance from the center line to offset the connection label.
*/
yOffset: u.number
};
Oe.defaultProps = {
r: 0,
xOffset: 0,
yOffset: 0
};
const Ge = xe;
class et extends z.Component {
handleClick(e) {
e.stopPropagation(), this.props.onSelectionChange && this.props.onSelectionChange("edge", this.props.name);
}
render() {
let e = "edge-curved", n = "edge-label", i = "normal";
this.props.selected && (e += " selected", n += "selected", i = "selected"), this.props.muted && (e += " muted", n += "muted", i = "muted"), this.props.invisible && (e += " edge-event-region", n += " edge-event-region"), E.isUndefined(this.props.classed) || (e += " " + this.props.classed);
const t = new Ge(this.props.x1, this.props.y1), r = new Ge(this.props.x2, this.props.y2), o = r.clone().subtract(t), l = o.clone().norm(), a = o.length();
let c = 90;
(o.y < 0 && this.props.curveDirection === "left" || o.y > 0 && this.props.curveDirection === "right") && (c = -90);
const p = l.clone().rotateDeg(c), g = new Ge(a / 2, a / 2), b = l.clone().multiply(g).add(t), m = new Ge(this.props.offset, this.props.offset);
m.multiply(p);
const y = b.clone().add(m), C = this.props.position, d = this.props.arrowWidth || this.props.width * 1.5, v = this.props.arrowHeight || this.props.width * 2, x = 15, w = new Ge(x, x), I = y.clone().subtract(t).clone().norm(), S = y.clone().subtract(r).clone().norm(), R = I.clone().multiply(w).add(t), T = S.clone().multiply(w).add(r), M = new Ge(-I.y, I.x), L = new Ge(C, C), k = M.clone().multiply(L).add(R), H = new Ge(-S.y, S.x), U = new Ge(-C, -C), W = H.clone().multiply(U).add(T), j = new Ge(-v, -v), ee = new Ge(d / 2, d / 2), te = new Ge(-d / 2, -d / 2), oe = S.clone().multiply(j).add(W), de = H.clone().multiply(ee).add(W), Ce = H.clone().multiply(te).add(W), J = this.props.offset, se = (a * a + 4 * J * J) / (8 * J), fe = 0, he = 0, ie = c === 90 ? 0 : 1;
let ae = "";
ae += "M" + t.x + "," + t.y, ae += " L " + k.x + " " + k.y, ae += " A " + se + " " + se + " " + fe + " " + he + " " + ie + " " + W.x + " " + W.y, this.props.arrow || (ae += " L " + r.x + " " + r.y);
let ce = "M" + oe.x + "," + oe.y + " ";
ce += "L" + de.x + "," + de.y, ce += "L" + Ce.x + "," + Ce.y;
let me = 1;
this.props.invisible ? me = 0 : this.props.muted && (me = 0.3);
const Fe = Math.abs(W.y - k.y), je = Math.abs(W.x - k.x);
let F = Math.atan2(Fe, je) * 180 / Math.PI;
const Ve = y.x;
let Pe = y.y + this.props.position;
(r.y < t.y && t.x < r.x || t.x > r.x && r.y > t.y) && (F = -F), t.x > r.x && (Pe = y.y - this.props.position);
let Ee = null;
return this.props.label && (Ee = /* @__PURE__ */ h.jsx(
Oe,
{
x: Ve,
y: Pe,
r: F,
textAnchor: this.props.textAnchor,
classed: n,
style: this.props.labelStyle[i],
label: this.props.label,
xOffset: this.props.labelOffsetX,
yOffset: this.props.labelOffsetY,
labelPosition: this.props.labelPosition
}
)), this.props.arrow ? /* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsxs("g", { strokeWidth: this.props.width, stroke: this.props.color, opacity: me, children: [
/* @__PURE__ */ h.jsx(
"path",
{
d: ae,
fill: "none",
className: e,
onClick: (Xe) => this.handleClick(Xe)
}
),
/* @__PURE__ */ h.jsx(
"path",
{
d: ce,
className: e,
stroke: this.props.color,
fill: this.props.color,
strokeWidth: "1"
}
)
] }),
Ee
] }) : /* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx("g", { strokeWidth: this.props.width, stroke: this.props.color, opacity: me, children: /* @__PURE__ */ h.jsx(
"path",
{
d: ae,
fill: "none",
className: e,
onClick: (Xe) => this.handleClick(Xe)
}
) }),
Ee
] });
}
}
et.propTypes = {
/** An offset to the position of the label which can be used for fine tuning */
offset: u.number,
/** The width of the circuit diagram */
width: u.number,
color: u.string,
curveDirection: u.string,
/**
* Boolean value that controls if a directional arrow is drawn instead of line-caps.
* When arrow is set to "true", the vector between x1, y1 and x2, y2 will have the
* Line-caps replaced with a directional arrow. Arrowheads can be sized using the
* arrowWidth and arrowHeight property.
*/
arrow: u.bool,
/**
* Controls the angle of the offset from the center of the line.
*/
position: u.number,
/** Display the endpoint selected */
selected: u.bool,
/** Display the endpoint muted */
muted: u.bool
};
et.defaultProps = {
offset: 20,
width: 1,
color: "#ddd",
curveDirection: "left",
arrow: !1,
position: 0,
selected: !1,
muted: !1
};
class He extends z.Component {
handleClick(e) {
this.props.onSelectionChange && this.props.onSelectionChange("edge", this.props.name), e.stopPropagation();
}
render() {
let e = "edge-linear", n = "edge-label", i = "normal";
this.props.selected && (e += " selected", n += "selected", i = "selected"), this.props.muted && (e += " muted", n += "muted", i = "muted"), this.props.invisible && (e += " edge-event-region", n += " edge-event-region"), E.isUndefined(this.props.classed) || (e += " " + this.props.classed);
const t = new xe(this.props.x1, this.props.y1), r = new xe(this.props.x2, this.props.y2), l = r.clone().subtract(t).clone().norm(), a = new xe(-l.y, l.x);
new xe(this.props.offset, this.props.offset).multiply(a);
const p = this.props.position, g = this.props.arrowWidth || this.props.width * 1.5, b = this.props.arrowHeight || this.props.width * 2, m = this.props.position !== 0 ? 15 : 8, y = new xe(m, m), d = r.clone().subtract(t).clone().norm(), x = t.clone().subtract(r).clone().norm(), w = d.clone().multiply(y).add(t), A = x.clone().multiply(y).add(r), I = new xe(-d.y, d.x), P = new xe(p, p), S = I.clone().multiply(P).add(w), R = new xe(-x.y, x.x), T = new xe(-p, -p), M = R.clone().multiply(T).add(A), L = new xe(-b, -b), k = new xe(g / 2, g / 2), H = new xe(-g / 2, -g / 2), U = x.clone().multiply(L).add(M), W = R.clone().multiply(k).add(M), j = R.clone().multiply(H).add(M);
let ee = "";
ee += "M" + t.x + "," + t.y, ee += " L " + S.x + " " + S.y, ee += " L " + M.x + " " + M.y, this.props.arrow || (ee += " L " + r.x + " " + r.y);
let te = "M" + U.x + "," + U.y + " ";
te += "L" + W.x + "," + W.y, te += "L" + j.x + "," + j.y;
let oe = 1;
this.props.invisible ? oe = 0 : this.props.muted && (oe = 0.3);
const de = Math.abs(M.y - S.y), Ce = Math.abs(M.x - S.x);
let J = Math.atan2(de, Ce) * 180 / Math.PI;
const se = (S.x + M.x) / 2, fe = (S.y + M.y) / 2;
(r.y < t.y && t.x < r.x || t.x > r.x && r.y > t.y) && (J = -J);
let he = null;
return this.props.label && (he = /* @__PURE__ */ h.jsx(
Oe,
{
x: se,
y: fe,
r: J,
textAnchor: this.props.textAnchor,
classed: n,
style: this.props.labelStyle[i],
label: this.props.label,
xOffset: this.props.labelOffsetX,
yOffset: this.props.labelOffsetY,
labelPosition: this.props.labelPosition
}
)), this.props.arrow ? /* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsxs("g", { strokeWidth: this.props.width, stroke: this.props.color, opacity: oe, children: [
/* @__PURE__ */ h.jsx(
"path",
{
className: e,
d: ee,
fill: "none",
onClick: (ie) => this.handleClick(ie)
}
),
/* @__PURE__ */ h.jsx(
"path",
{
className: e,
d: te,
fill: this.props.color,
strokeWidth: "1"
}
)
] }),
he
] }) : /* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx("g", { strokeWidth: this.props.width, stroke: this.props.color, opacity: oe, children: /* @__PURE__ */ h.jsx(
"path",
{
className: e,
d: ee,
fill: "none",
onClick: (ie) => this.handleClick(ie)
}
) }),
he
] });
}
}
He.propTypes = {
/** The width of the circuit diagram */
width: u.number,
color: u.string,
/**
* Controls the angle of the offset from the center of the line.
*/
position: u.number,
/**
* Boolean value that controls if a directional arrow is drawn instead of line-caps.
* When arrow is set to "true", the vector between x1, y1 and x2, y2 will have the
* Line-caps replaced with a directional arrow. Arrowheads can be sized using the
* arrowWidth and arrowHeight property.
*/
arrow: u.bool,
/** Display the endpoint selected */
selected: u.bool,
/** Display the endpoint muted */
muted: u.bool
};
He.defaultProps = {
width: 1,
color: "#ddd",
position: 0,
arrow: !1,
selected: !1,
muted: !1
};
class Gt extends z.Component {
render() {
const e = `${this.props.source}--${this.props.target}`, n = `${this.props.target}--${this.props.source}`, i = this.props.width * 0.75;
return this.props.shape === "curved" ? /* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx(
et,
{
name: this.props.name,
x1: this.props.x1,
y1: this.props.y1,
x2: this.props.x2,
y2: this.props.y2,
arrow: !0,
position: i,
color: this.props.sourceTargetColor,
width: this.props.width,
classed: this.props.classed,
curveDirection: this.props.curveDirection,
offset: this.props.offset,
selected: this.props.selected,
onSelectionChange: this.props.onSelectionChange,
muted: this.props.muted
},
e
),
/* @__PURE__ */ h.jsx(
et,
{
name: this.props.name,
x1: this.props.x2,
y1: this.props.y2,
x2: this.props.x1,
y2: this.props.y1,
arrow: !0,
position: i,
color: this.props.targetSourceColor,
width: this.props.width,
classed: this.props.classed,
curveDirection: this.props.curveDirection,
offset: this.props.offset,
selected: this.props.selected,
onSelectionChange: this.props.onSelectionChange,
muted: this.props.muted
},
n
),
/* @__PURE__ */ h.jsx(
et,
{
name: this.props.name,
x1: this.props.x2,
y1: this.props.y2,
x2: this.props.x1,
y2: this.props.y1,
position: 0,
width: 5,
classed: this.props.classed,
onSelectionChange: this.props.onSelectionChange,
curveDirection: this.props.curveDirection,
offset: this.props.offset,
invisible: !0
},
`${e}-event-region`
)
] }) : /* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx(
He,
{
name: this.props.name,
x1: this.props.x1,
y1: this.props.y1,
x2: this.props.x2,
y2: this.props.y2,
arrow: !0,
color: this.props.sourceTargetColor,
width: this.props.width,
position: i,
className: this.props.classed,
selected: this.props.selected,
muted: this.props.muted,
onSelectionChange: this.props.onSelectionChange
},
e
),
/* @__PURE__ */ h.jsx(
He,
{
name: this.props.name,
x1: this.props.x2,
y1: this.props.y2,
x2: this.props.x1,
y2: this.props.y1,
arrow: !0,
color: this.props.targetSourceColor,
width: this.props.width,
position: i,
className: this.props.classed,
selected: this.props.selected,
muted: this.props.muted,
onSelectionChange: this.props.onSelectionChange
},
n
),
/* @__PURE__ */ h.jsx(
He,
{
name: this.props.name,
x1: this.props.x2,
y1: this.props.y2,
x2: this.props.x1,
y2: this.props.y1,
width: 5,
position: 0,
className: this.props.classed,
onSelectionChange: this.props.onSelectionChange,
invisible: !0
},
`${n}-event-region`
)
] });
}
}
Gt.propTypes = {
/** The width of the circuit diagram */
width: u.number,
/**
* This is the vertical spacing
*/
spacing: u.number,
/** An offset to the position of the label which can be used for fine tuning */
offset: u.number,
sourceTargetColor: u.string,
targetSourceColor: u.string,
/** Display the endpoint selected */
selected: u.bool,
/** Display the endpoint muted */
muted: u.bool
};
Gt.defaultProps = {
width: 1,
spacing: 3.5,
offset: 18,
sourceTargetColor: "#C9CACC",
targetSourceColor: "#C9CACC",
selected: !1,
muted: !1
};
class Ki extends z.Component {
render() {
let e;
switch (this.props.labelPosition) {
case "left":
e = "end";
break;
case "top":
case "bottom":
e = "middle";
break;
default:
e = "start";
}
return /* @__PURE__ */ h.jsx(
"text",
{
x: this.props.x,
y: this.props.y,
label: this.props.label,
textAnchor: e,
className: "map-label",
children: this.props.label
}
);
}
}
class dn extends z.Component {
render() {
let e = this.props.x, n = this.props.y;
const i = this.props.lineHeight / 2, t = [];
if (this.props.nodeTypes.length > 0 && (E.each(this.props.nodeTypes, (r, o) => {
if (r.shape === "square") {
const l = "map-node-shape-square-" + r.classed, a = e - r.radius, c = n, p = 2 * r.radius, g = { stroke: r.stroke, fill: r.fill }, b = e + this.props.exampleWidth, m = n + i;
t.push(
/* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx(
"rect",
{
x: a,
y: c,
width: p,
height: p,
style: g,
className: l
}
),
/* @__PURE__ */ h.jsx("text", { x: b, y: m + 4, textAnchor: "begin", children: r.text })
] }, `node-${o}`)
), n += this.props.lineHeight;
} else {
const l = e + this.props.exampleWidth, a = n + i, c = "map-node-shape-circle-" + r.classed, p = { stroke: r.stroke, fill: r.fill };
t.push(
/* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx(
"circle",
{
style: p,
cx: e,
cy: a,
r: r.radius,
className: c
}
),
/* @__PURE__ */ h.jsx("text", { x: l, y: a + 4, textAnchor: "begin", children: r.text })
] }, `node-${o}`)
), n += this.props.lineHeight;
}
}), this.props.columns && (e += this.props.columnWidth, n = this.props.y)), this.props.edgeTypes.length > 0 && (E.each(this.props.edgeTypes, (r, o) => {
const l = e, a = n + i - r.strokeWidth / 2, c = l + this.props.exampleWidth + this.props.gutter, p = n + i;
t.push(
/* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx(
"line",
{
x1: l,
y1: a,
x2: l + this.props.exampleWidth,
y2: a,
stroke: this.props.edgeColor,
strokeWidth: r.strokeWidth
}
),
/* @__PURE__ */ h.jsx("text", { x: c, y: p, textAnchor: "begin", children: r.text })
] }, `edge-${o}`)
), n += this.props.lineHeight;
}), this.props.columns && (e += this.props.columnWidth, n = this.props.y)), this.props.colorSwatches.length > 0) {
const r = this.props.exampleWidth, o = this.props.lineHeight - 4;
let l = 0;
E.each(this.props.colorSwatches, (a, c) => {
l && l % this.props.itemsPerColumn === 0 && (e += this.props.columnWidth, n = this.props.y);
const p = e, g = n, b = p + this.props.exampleWidth + this.props.gutter, m = n + i;
t.push(
/* @__PURE__ */ h.jsxs("g", { children: [
/* @__PURE__ */ h.jsx(
"rect",
{
x: p,
y: g,
width: r,
height: o,
stroke: a.stroke,
fill: a.fill
}
),
/* @__PURE__ */ h.jsx("text", { x: b, y: m, textAnchor: "begin", children: a.text })
] }, `color-${c}`)
), n += this.props.lineHeight, l += 1;
}), this.props.columns && (e += this.props.columnWidth, n = this.props.y);
}
return /* @__PURE__ */ h.jsx("g", { children: t });
}
}
dn.propTypes = {
/**
* Controls the starting x co-ordinate
*/
x: u.number,
/**
* Controls the starting y co-ordinate
*/
y: u.number,
/**
* Controls the height of the line
*/
lineHeight: u.number,
/**
* Boolean variable whether we want to have columns or not
*/
columns: u.bool,
/**
* If we have columns, how many items do we want in each column
*/
itemsPerColumn: u.number,
/**
* Width of each column
*/
columnWidth: u.number,
/**
* Used to denote the width of a line when displaying the capacity or
* the distance between the icon and the text in the legend
*/
exampleWidth: u.number,
gutter: u.number,
/**
* Color for the lines in the capacity map. The capacity map is a map where
* the key is the capacity and the value represents the width of the line
* that is drawn on the map
*/
edgeColor: u.string,
/**
* An array that describes the different types of nodes on the map.
*
* Eg : [
* { classed: "esnet_site", fill: "#B0B0B0", radius: 7, shape: "square", stroke: "#B0B0B0", text: "Site"},
* { classed: "hub", fill: "#CBCBCB", radius: 7, shape: "circle", stroke: "#CBCBCB", text: "Hub" }
* ];
*/
nodeTypes: u.array,
/**
* An array that describes the different sizes of the edges on the map.
*
* Eg : [
* { strokeWidth: 7, text: "100 Gbps" }
* { strokeWidth: 4, text: "40 Gbps"}
* ];
*/
edgeTypes: u.array,
/**
* An array that describes the colors corresponding to the traffic on the map
* and how to display that in the legend
*
* Eg : [
* { fill: "#990000", stroke: "#990000", text: "50+ Gbps" },
* { fill: "#bd0026", stroke: "#bd0026", text: "20 - 50" },
* { fill: "#cc4c02", stroke: "#cc4c02", text: "10 - 20" }
* ];
*/
colorSwatches: u.array
};
dn.defaultProps = {
x: 0,
y: 0,
lineHeight: 20,
columns: !0,
itemsPerColumn: 4,
columnWidth: 100,
exampleWidth: 20,
gutter: 8,
edgeColor: "#333",
nodeTypes: [],
edgeTypes: [],
colorSwatches: []
};
let it = class extends z.Component {
/**
* Provides a spec for the editor UI to render properties
* for this node
*/
static spec() {
return [
{ attr: "name", label: "Name", type: "text" },
{ attr: "x", label: "Position x", type: "integer" },
{ attr: "y", label: "Position y", type: "integer" },
{ attr: "label_dx", label: "Label offset x", type: "integer" },
{ attr: "label_dy", label: "Label offset y", type: "integer" },
{
attr: "label_position",
label: "Label position",
type: "choice",
options: [
{ value: "top", label: "Top" },
{ value: "bottom", label: "Bottom" },
{ value: "left", label: "Left" },
{ value: "right", label: "Right" },
{ value: "topleft", label: "Top left" },
{ value: "topright", label: "Top right" },
{ value: "bottomleft", label: "Bottom left" },
{ value: "bottomright", label: "Bottom right" }
]
}
];
}
handMouseClick(e) {
e.stopPropagation();
const n = this.props.id || this.props.name;
this.props.onSelectionChange && this.props.onSelectionChange("node", n);
}
handleMouseOver() {
}
handleMouseDown(e) {
e.stopPropagation();
const n = this.props.id || this.props.name;
this.props.onMouseDown && this.props.onMouseDown(n, e);
}
render() {
let e = "map-node", n = "map-node-label", i = "normal";
this.props.selected && (i = "selected", e += " selected", n += " selected"), this.props.muted && (i = "muted", e += " muted", n += " muted"), this.props.highlighted && (i = "highlighted", e += " highlighted", n += " highlighted");
const t = this.props.offset ? this.props.offset : this.props.radius * 1.33, r = 8;
let o = this.props.x, l = this.props.y, a = 0, c = "middle", p = `rotate(${a} ${o}, ${l})`, g;
switch (typeof this.props.labelPosition == "object" ? g = this.props.labelPosition.value : g = this.props.labelPosition, g) {
case "left":
o -= t, l += 5, c = "end";
break;
case "right":
o += t, l += 5, c = "start";
break;
case "top":
l -= t;
break;
case "topright":
l -= t, o += t, c = "start";
break;
case "topleft":
l -= t, o -= t, c = "end";
break;
case "bottom":
l += t + r;
break;
case "bottomright":
l += t + r, o += t, c = "start";
break;
case "bottomleft":
l += t + r, o -= t, c = "end";
break;
case "bottomleftangled":
o += 2, l += t + r, a = -45, p = `rotate(${a} ${o}, ${l})`, c = "end";
break;
case "bottomrightangled":
o -= 2, l += t + r, a = 45, p = `rotate(${a} ${o}, ${l})`, c = "start";
break;
case "topleftangled":
l -= t, a = 45, p = `rotate(${a} ${o}, ${l})`, c = "end";
break;
case "toprightangled":
l -= t, a = -45, p = `rotate(${a} ${o}, ${l})`, c = "start";
break;
}
o += this.props.labelOffsetX, l += this.props.labelOffsetY;
let b;
if (this.props.shape === "cloud") {
e += " map-node-shape-cloud", n += " map-node-label-cloud";
let m = `M${this.props.x},${this.props.y + 5}`;
switch (m += "l-25,0 c-10,0 -10,-10 -5,-15", m += "c5,-5 15,-5 15,0 c0,-15 25,-15 25,-5 c10,-10 25,15 10,20 Z", b = /* @__PURE__ */ h.jsx(
"path",
{
d: m,
style: this.props.style[i],
className: e
}
), this.props.labelPosition) {
case "top":
case "topright":
case "topleft":
l += 7;
break;
case "bottom":
case "bottomleft":
case "bottomright":
l -= 15;
break;
}
o -= 3;
} else if (this.props.shape === "square") {
e += " map-node-shape-square", n += " map-node-shape-square";
const m = this.props.x - this.props.radius, y = this.props.y - this.props.radius, C = 2 * this.props.radius;
switch (b = /* @__PURE__ */ h.jsx(
"rect",
{
x: m,
y,
rx: this.props.rx,
ry: this.props.ry,
width: C,
height: C,
style: this.props.style[i],
className: e
}
), this.props.labelPosition) {
case "left":
o -= 2;
break;
case "right":
o += 2;
break;
}
} else
e += " map-node-shape-circle", n += " map-node-label-circle", b = /* @__PURE__ */ h.jsx(
"circle",
{
cx: this.props.x,
cy: this.props.y,
r: this.props.radius,
style: this.props.style[i],
className: e
}
);
return this.props.label ? /* @__PURE__ */ h.jsxs(
"g",
{
onClick: (m) => this.handMouseClick(m),
onMouseOver: this.handleMouseOver,
onMouseDown: (m) => this.handleMouseDown(m),
onMouseMove: this.handleMouseMove,
children: [
b,
/* @__PURE__ */ h.jsx(
"text",
{
x: o,
y: l,
textAnchor: c,
transform: p,
style: this.props.labelStyle[i],
className: n,
children: this.props.label
}
)
]
}
) : /* @__PURE__ */ h.jsx(
"g",
{
onClick: (m) => this.handMouseClick(m),
onMouseOver: this.handleMouseOver,
onMouseDown: (m) => this.handleMouseDown(m),
onMouseMove: this.handleMouseMove,
onMouseUp: this.handleMouseUp,
children: b
}
);
}
};
it.propTypes = {
/** When the node shape is a `circle`, this controls the size of the node */
radius: u.number,
/** Display the node as selected */
selected: u.bool,
/** The shape of the node */
shape: u.oneOf(["circle", "square", "cloud"]),
/**
* The style of the `<Node>` has two components, one for the
* node itself and one for the label (the label). Each group
* has three different possible options depending on the way the
* node should be rendered:
*
* * `normal` provides the standard view of the node
* * `selected` for when the node is moused over
* * `muted` for when the node is not selected.
*
* For example:
*
* ```
* const nodeStyle = {
* node: {
* normal: {fill: "none", stroke: "#DBDBDB", strokeWidth: 4},
* selected: {fill: "none", stroke: "#B1B1B1", strokeWidth: 6},
* muted: {fill: "none", stroke: "#DBDBDB", strokeWidth: 2, opacity: 0.6, cursor: "pointer"}
* },
* label: {
* normal: {fill: "#9D9D9D", fontSize: 10, fontFamily: "verdana, sans-serif"},
* selected: {fill: "#333",stroke: "none", fontSize: 11},
* muted: {fill: "#696969", stroke: "none", fontSize: 9, opacity: 0.6}
* }
* }
* ```
*/
style: u.object,
isDragging: u.bool,
/**
* Controls the x pixel offset from labelPosition
*/
labelOffsetX: u.number,
/**
* Controls the y pixel offset from labelPosition
*/
labelOffsetY: u.number,
/** When the node shape is a `square`, this controls the radius of corners. */
rx: u.number,
/** When the node shape is a `square`, this controls the radius of corners. */
ry: u.number
};
it.defaultProps = {
radius: 5,
selected: !1,
shape: "circle",
style: {},
isDragging: !1,
labelOffsetX: 0,
labelOffsetY: 0,
rx: 0,
ry: 0
};
const ze = xe;
class hn exten