taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
971 lines (970 loc) • 35.6 kB
JavaScript
import { g as it } from "./index-CoM8QAjP.js";
import lt from "react/jsx-runtime";
import A from "react";
import { c1 as ut, c2 as ft, bl as dt, aK as ct, aL as ht } from "./JBrowsePanel-BNE3gNW1.js";
import nt from "prop-types";
import rt from "react-dom";
var q = {}, W = { exports: {} }, L = {}, x = {}, X = {}, V;
function U() {
if (V) return X;
V = 1, Object.defineProperty(X, "__esModule", {
value: !0
}), X.dontSetMe = _, X.findInArray = f, X.int = v, X.isFunction = g, X.isNum = y;
function f(m, b) {
for (let w = 0, C = m.length; w < C; w++)
if (b.apply(b, [m[w], w, m])) return m[w];
}
function g(m) {
return typeof m == "function" || Object.prototype.toString.call(m) === "[object Function]";
}
function y(m) {
return typeof m == "number" && !isNaN(m);
}
function v(m) {
return parseInt(m, 10);
}
function _(m, b, w) {
if (m[b])
return new Error(`Invalid prop ${b} passed to ${w} - do not set this, set it on the child.`);
}
return X;
}
var Y = {}, G;
function gt() {
if (G) return Y;
G = 1, Object.defineProperty(Y, "__esModule", {
value: !0
}), Y.browserPrefixToKey = y, Y.browserPrefixToStyle = v, Y.default = void 0, Y.getPrefix = g;
const f = ["Moz", "Webkit", "O", "ms"];
function g() {
var w, C;
let m = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "transform";
if (typeof window > "u") return "";
const b = (C = (w = window.document) == null ? void 0 : w.documentElement) == null ? void 0 : C.style;
if (!b || m in b) return "";
for (let S = 0; S < f.length; S++)
if (y(m, f[S]) in b) return f[S];
return "";
}
function y(m, b) {
return b ? `${b}${_(m)}` : m;
}
function v(m, b) {
return b ? `-${b.toLowerCase()}-${m}` : m;
}
function _(m) {
let b = "", w = !0;
for (let C = 0; C < m.length; C++)
w ? (b += m[C].toUpperCase(), w = !1) : m[C] === "-" ? w = !0 : b += m[C];
return b;
}
return Y.default = g(), Y;
}
var K;
function B() {
if (K) return x;
K = 1, Object.defineProperty(x, "__esModule", {
value: !0
}), x.addClassName = u, x.addEvent = b, x.addUserSelectStyles = r, x.createCSSTransform = p, x.createSVGTransform = D, x.getTouch = n, x.getTouchIdentifier = o, x.getTranslation = l, x.innerHeight = T, x.innerWidth = a, x.matchesSelector = _, x.matchesSelectorAndParentsTo = m, x.offsetXYFromParent = d, x.outerHeight = C, x.outerWidth = S, x.removeClassName = h, x.removeEvent = w, x.scheduleRemoveUserSelectStyles = s;
var f = U(), g = y(gt());
function y(t, e) {
if (typeof WeakMap == "function") var i = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap();
return (y = function(M, E) {
if (!E && M && M.__esModule) return M;
var N, O, k = { __proto__: null, default: M };
if (M === null || typeof M != "object" && typeof M != "function") return k;
if (N = E ? P : i) {
if (N.has(M)) return N.get(M);
N.set(M, k);
}
for (const R in M) R !== "default" && {}.hasOwnProperty.call(M, R) && ((O = (N = Object.defineProperty) && Object.getOwnPropertyDescriptor(M, R)) && (O.get || O.set) ? N(k, R, O) : k[R] = M[R]);
return k;
})(t, e);
}
let v = "";
function _(t, e) {
return v || (v = (0, f.findInArray)(["matches", "webkitMatchesSelector", "mozMatchesSelector", "msMatchesSelector", "oMatchesSelector"], function(i) {
return (0, f.isFunction)(t[i]);
})), (0, f.isFunction)(t[v]) ? t[v](e) : !1;
}
function m(t, e, i) {
let P = t;
do {
if (_(P, e)) return !0;
if (P === i) return !1;
P = P.parentNode;
} while (P);
return !1;
}
function b(t, e, i, P) {
if (!t) return;
const M = {
capture: !0,
...P
};
t.addEventListener ? t.addEventListener(e, i, M) : t.attachEvent ? t.attachEvent("on" + e, i) : t["on" + e] = i;
}
function w(t, e, i, P) {
if (!t) return;
const M = {
capture: !0,
...P
};
t.removeEventListener ? t.removeEventListener(e, i, M) : t.detachEvent ? t.detachEvent("on" + e, i) : t["on" + e] = null;
}
function C(t) {
let e = t.clientHeight;
const i = t.ownerDocument.defaultView.getComputedStyle(t);
return e += (0, f.int)(i.borderTopWidth), e += (0, f.int)(i.borderBottomWidth), e;
}
function S(t) {
let e = t.clientWidth;
const i = t.ownerDocument.defaultView.getComputedStyle(t);
return e += (0, f.int)(i.borderLeftWidth), e += (0, f.int)(i.borderRightWidth), e;
}
function T(t) {
let e = t.clientHeight;
const i = t.ownerDocument.defaultView.getComputedStyle(t);
return e -= (0, f.int)(i.paddingTop), e -= (0, f.int)(i.paddingBottom), e;
}
function a(t) {
let e = t.clientWidth;
const i = t.ownerDocument.defaultView.getComputedStyle(t);
return e -= (0, f.int)(i.paddingLeft), e -= (0, f.int)(i.paddingRight), e;
}
function d(t, e, i) {
const M = e === e.ownerDocument.body ? {
left: 0,
top: 0
} : e.getBoundingClientRect(), E = (t.clientX + e.scrollLeft - M.left) / i, N = (t.clientY + e.scrollTop - M.top) / i;
return {
x: E,
y: N
};
}
function p(t, e) {
const i = l(t, e, "px");
return {
[(0, g.browserPrefixToKey)("transform", g.default)]: i
};
}
function D(t, e) {
return l(t, e, "");
}
function l(t, e, i) {
let {
x: P,
y: M
} = t, E = `translate(${P}${i},${M}${i})`;
if (e) {
const N = `${typeof e.x == "string" ? e.x : e.x + i}`, O = `${typeof e.y == "string" ? e.y : e.y + i}`;
E = `translate(${N}, ${O})` + E;
}
return E;
}
function n(t, e) {
return t.targetTouches && (0, f.findInArray)(t.targetTouches, (i) => e === i.identifier) || t.changedTouches && (0, f.findInArray)(t.changedTouches, (i) => e === i.identifier);
}
function o(t) {
if (t.targetTouches && t.targetTouches[0]) return t.targetTouches[0].identifier;
if (t.changedTouches && t.changedTouches[0]) return t.changedTouches[0].identifier;
}
function r(t) {
if (!t) return;
let e = t.getElementById("react-draggable-style-el");
e || (e = t.createElement("style"), e.type = "text/css", e.id = "react-draggable-style-el", e.innerHTML = `.react-draggable-transparent-selection *::-moz-selection {all: inherit;}
`, e.innerHTML += `.react-draggable-transparent-selection *::selection {all: inherit;}
`, t.getElementsByTagName("head")[0].appendChild(e)), t.body && u(t.body, "react-draggable-transparent-selection");
}
function s(t) {
window.requestAnimationFrame ? window.requestAnimationFrame(() => {
c(t);
}) : c(t);
}
function c(t) {
if (t)
try {
if (t.body && h(t.body, "react-draggable-transparent-selection"), t.selection)
t.selection.empty();
else {
const e = (t.defaultView || window).getSelection();
e && e.type !== "Caret" && e.removeAllRanges();
}
} catch {
}
}
function u(t, e) {
t.classList ? t.classList.add(e) : t.className.match(new RegExp(`(?:^|\\s)${e}(?!\\S)`)) || (t.className += ` ${e}`);
}
function h(t, e) {
t.classList ? t.classList.remove(e) : t.className = t.className.replace(new RegExp(`(?:^|\\s)${e}(?!\\S)`, "g"), "");
}
return x;
}
var j = {}, z;
function ot() {
if (z) return j;
z = 1, Object.defineProperty(j, "__esModule", {
value: !0
}), j.canDragX = _, j.canDragY = m, j.createCoreData = w, j.createDraggableData = C, j.getBoundPosition = y, j.getControlPosition = b, j.snapToGrid = v;
var f = U(), g = B();
function y(a, d, p) {
if (!a.props.bounds) return [d, p];
let {
bounds: D
} = a.props;
D = typeof D == "string" ? D : S(D);
const l = T(a);
if (typeof D == "string") {
const {
ownerDocument: n
} = l, o = n.defaultView;
let r;
if (D === "parent" ? r = l.parentNode : r = l.getRootNode().querySelector(D), !(r instanceof o.HTMLElement))
throw new Error('Bounds selector "' + D + '" could not find an element.');
const s = r, c = o.getComputedStyle(l), u = o.getComputedStyle(s);
D = {
left: -l.offsetLeft + (0, f.int)(u.paddingLeft) + (0, f.int)(c.marginLeft),
top: -l.offsetTop + (0, f.int)(u.paddingTop) + (0, f.int)(c.marginTop),
right: (0, g.innerWidth)(s) - (0, g.outerWidth)(l) - l.offsetLeft + (0, f.int)(u.paddingRight) - (0, f.int)(c.marginRight),
bottom: (0, g.innerHeight)(s) - (0, g.outerHeight)(l) - l.offsetTop + (0, f.int)(u.paddingBottom) - (0, f.int)(c.marginBottom)
};
}
return (0, f.isNum)(D.right) && (d = Math.min(d, D.right)), (0, f.isNum)(D.bottom) && (p = Math.min(p, D.bottom)), (0, f.isNum)(D.left) && (d = Math.max(d, D.left)), (0, f.isNum)(D.top) && (p = Math.max(p, D.top)), [d, p];
}
function v(a, d, p) {
const D = Math.round(d / a[0]) * a[0], l = Math.round(p / a[1]) * a[1];
return [D, l];
}
function _(a) {
return a.props.axis === "both" || a.props.axis === "x";
}
function m(a) {
return a.props.axis === "both" || a.props.axis === "y";
}
function b(a, d, p) {
const D = typeof d == "number" ? (0, g.getTouch)(a, d) : null;
if (typeof d == "number" && !D) return null;
const l = T(p), n = p.props.offsetParent || l.offsetParent || l.ownerDocument.body;
return (0, g.offsetXYFromParent)(D || a, n, p.props.scale);
}
function w(a, d, p) {
const D = !(0, f.isNum)(a.lastX), l = T(a);
return D ? {
node: l,
deltaX: 0,
deltaY: 0,
lastX: d,
lastY: p,
x: d,
y: p
} : {
node: l,
deltaX: d - a.lastX,
deltaY: p - a.lastY,
lastX: a.lastX,
lastY: a.lastY,
x: d,
y: p
};
}
function C(a, d) {
const p = a.props.scale;
return {
node: d.node,
x: a.state.x + d.deltaX / p,
y: a.state.y + d.deltaY / p,
deltaX: d.deltaX / p,
deltaY: d.deltaY / p,
lastX: a.state.x,
lastY: a.state.y
};
}
function S(a) {
return {
left: a.left,
top: a.top,
right: a.right,
bottom: a.bottom
};
}
function T(a) {
const d = a.findDOMNode();
if (!d)
throw new Error("<DraggableCore>: Unmounted during event!");
return d;
}
return j;
}
var $ = {}, F = {}, J;
function at() {
if (J) return F;
J = 1, Object.defineProperty(F, "__esModule", {
value: !0
}), F.default = f;
function f() {
}
return F;
}
var Q;
function pt() {
if (Q) return $;
Q = 1, Object.defineProperty($, "__esModule", {
value: !0
}), $.default = void 0;
var f = C(A), g = w(nt), y = w(rt), v = B(), _ = ot(), m = U(), b = w(at());
function w(l) {
return l && l.__esModule ? l : { default: l };
}
function C(l, n) {
if (typeof WeakMap == "function") var o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
return (C = function(s, c) {
if (!c && s && s.__esModule) return s;
var u, h, t = { __proto__: null, default: s };
if (s === null || typeof s != "object" && typeof s != "function") return t;
if (u = c ? r : o) {
if (u.has(s)) return u.get(s);
u.set(s, t);
}
for (const e in s) e !== "default" && {}.hasOwnProperty.call(s, e) && ((h = (u = Object.defineProperty) && Object.getOwnPropertyDescriptor(s, e)) && (h.get || h.set) ? u(t, e, h) : t[e] = s[e]);
return t;
})(l, n);
}
function S(l, n, o) {
return (n = T(n)) in l ? Object.defineProperty(l, n, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : l[n] = o, l;
}
function T(l) {
var n = a(l, "string");
return typeof n == "symbol" ? n : n + "";
}
function a(l, n) {
if (typeof l != "object" || !l) return l;
var o = l[Symbol.toPrimitive];
if (o !== void 0) {
var r = o.call(l, n);
if (typeof r != "object") return r;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (n === "string" ? String : Number)(l);
}
const d = {
touch: {
start: "touchstart",
move: "touchmove",
stop: "touchend"
},
mouse: {
start: "mousedown",
move: "mousemove",
stop: "mouseup"
}
};
let p = d.mouse, D = class extends f.Component {
constructor() {
super(...arguments), S(this, "dragging", !1), S(this, "lastX", NaN), S(this, "lastY", NaN), S(this, "touchIdentifier", null), S(this, "mounted", !1), S(this, "handleDragStart", (n) => {
if (this.props.onMouseDown(n), !this.props.allowAnyClick && typeof n.button == "number" && n.button !== 0) return !1;
const o = this.findDOMNode();
if (!o || !o.ownerDocument || !o.ownerDocument.body)
throw new Error("<DraggableCore> not mounted on DragStart!");
const {
ownerDocument: r
} = o;
if (this.props.disabled || !(n.target instanceof r.defaultView.Node) || this.props.handle && !(0, v.matchesSelectorAndParentsTo)(n.target, this.props.handle, o) || this.props.cancel && (0, v.matchesSelectorAndParentsTo)(n.target, this.props.cancel, o))
return;
n.type === "touchstart" && !this.props.allowMobileScroll && n.preventDefault();
const s = (0, v.getTouchIdentifier)(n);
this.touchIdentifier = s;
const c = (0, _.getControlPosition)(n, s, this);
if (c == null) return;
const {
x: u,
y: h
} = c, t = (0, _.createCoreData)(this, u, h);
(0, b.default)("DraggableCore: handleDragStart: %j", t), (0, b.default)("calling", this.props.onStart), !(this.props.onStart(n, t) === !1 || this.mounted === !1) && (this.props.enableUserSelectHack && (0, v.addUserSelectStyles)(r), this.dragging = !0, this.lastX = u, this.lastY = h, (0, v.addEvent)(r, p.move, this.handleDrag), (0, v.addEvent)(r, p.stop, this.handleDragStop));
}), S(this, "handleDrag", (n) => {
const o = (0, _.getControlPosition)(n, this.touchIdentifier, this);
if (o == null) return;
let {
x: r,
y: s
} = o;
if (Array.isArray(this.props.grid)) {
let h = r - this.lastX, t = s - this.lastY;
if ([h, t] = (0, _.snapToGrid)(this.props.grid, h, t), !h && !t) return;
r = this.lastX + h, s = this.lastY + t;
}
const c = (0, _.createCoreData)(this, r, s);
if ((0, b.default)("DraggableCore: handleDrag: %j", c), this.props.onDrag(n, c) === !1 || this.mounted === !1) {
try {
this.handleDragStop(new MouseEvent("mouseup"));
} catch {
const t = document.createEvent("MouseEvents");
t.initMouseEvent("mouseup", !0, !0, window, 0, 0, 0, 0, 0, !1, !1, !1, !1, 0, null), this.handleDragStop(t);
}
return;
}
this.lastX = r, this.lastY = s;
}), S(this, "handleDragStop", (n) => {
if (!this.dragging) return;
const o = (0, _.getControlPosition)(n, this.touchIdentifier, this);
if (o == null) return;
let {
x: r,
y: s
} = o;
if (Array.isArray(this.props.grid)) {
let t = r - this.lastX || 0, e = s - this.lastY || 0;
[t, e] = (0, _.snapToGrid)(this.props.grid, t, e), r = this.lastX + t, s = this.lastY + e;
}
const c = (0, _.createCoreData)(this, r, s);
if (this.props.onStop(n, c) === !1 || this.mounted === !1) return !1;
const h = this.findDOMNode();
h && this.props.enableUserSelectHack && (0, v.scheduleRemoveUserSelectStyles)(h.ownerDocument), (0, b.default)("DraggableCore: handleDragStop: %j", c), this.dragging = !1, this.lastX = NaN, this.lastY = NaN, h && ((0, b.default)("DraggableCore: Removing handlers"), (0, v.removeEvent)(h.ownerDocument, p.move, this.handleDrag), (0, v.removeEvent)(h.ownerDocument, p.stop, this.handleDragStop));
}), S(this, "onMouseDown", (n) => (p = d.mouse, this.handleDragStart(n))), S(this, "onMouseUp", (n) => (p = d.mouse, this.handleDragStop(n))), S(this, "onTouchStart", (n) => (p = d.touch, this.handleDragStart(n))), S(this, "onTouchEnd", (n) => (p = d.touch, this.handleDragStop(n)));
}
componentDidMount() {
this.mounted = !0;
const n = this.findDOMNode();
n && (0, v.addEvent)(n, d.touch.start, this.onTouchStart, {
passive: !1
});
}
componentWillUnmount() {
this.mounted = !1;
const n = this.findDOMNode();
if (n) {
const {
ownerDocument: o
} = n;
(0, v.removeEvent)(o, d.mouse.move, this.handleDrag), (0, v.removeEvent)(o, d.touch.move, this.handleDrag), (0, v.removeEvent)(o, d.mouse.stop, this.handleDragStop), (0, v.removeEvent)(o, d.touch.stop, this.handleDragStop), (0, v.removeEvent)(n, d.touch.start, this.onTouchStart, {
passive: !1
}), this.props.enableUserSelectHack && (0, v.scheduleRemoveUserSelectStyles)(o);
}
}
// React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
findDOMNode() {
var n, o, r;
return (n = this.props) != null && n.nodeRef ? (r = (o = this.props) == null ? void 0 : o.nodeRef) == null ? void 0 : r.current : y.default.findDOMNode(this);
}
render() {
return /* @__PURE__ */ f.cloneElement(f.Children.only(this.props.children), {
// Note: mouseMove handler is attached to document so it will still function
// when the user drags quickly and leaves the bounds of the element.
onMouseDown: this.onMouseDown,
onMouseUp: this.onMouseUp,
// onTouchStart is added on `componentDidMount` so they can be added with
// {passive: false}, which allows it to cancel. See
// https://developers.google.com/web/updates/2017/01/scrolling-intervention
onTouchEnd: this.onTouchEnd
});
}
};
return $.default = D, S(D, "displayName", "DraggableCore"), S(D, "propTypes", {
/**
* `allowAnyClick` allows dragging using any mouse button.
* By default, we only accept the left button.
*
* Defaults to `false`.
*/
allowAnyClick: g.default.bool,
/**
* `allowMobileScroll` turns off cancellation of the 'touchstart' event
* on mobile devices. Only enable this if you are having trouble with click
* events. Prefer using 'handle' / 'cancel' instead.
*
* Defaults to `false`.
*/
allowMobileScroll: g.default.bool,
children: g.default.node.isRequired,
/**
* `disabled`, if true, stops the <Draggable> from dragging. All handlers,
* with the exception of `onMouseDown`, will not fire.
*/
disabled: g.default.bool,
/**
* By default, we add 'user-select:none' attributes to the document body
* to prevent ugly text selection during drag. If this is causing problems
* for your app, set this to `false`.
*/
enableUserSelectHack: g.default.bool,
/**
* `offsetParent`, if set, uses the passed DOM node to compute drag offsets
* instead of using the parent node.
*/
offsetParent: function(l, n) {
if (l[n] && l[n].nodeType !== 1)
throw new Error("Draggable's offsetParent must be a DOM Node.");
},
/**
* `grid` specifies the x and y that dragging should snap to.
*/
grid: g.default.arrayOf(g.default.number),
/**
* `handle` specifies a selector to be used as the handle that initiates drag.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable handle=".handle">
* <div>
* <div className="handle">Click me to drag</div>
* <div>This is some other content</div>
* </div>
* </Draggable>
* );
* }
* });
* ```
*/
handle: g.default.string,
/**
* `cancel` specifies a selector to be used to prevent drag initialization.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return(
* <Draggable cancel=".cancel">
* <div>
* <div className="cancel">You can't drag from here</div>
* <div>Dragging here works fine</div>
* </div>
* </Draggable>
* );
* }
* });
* ```
*/
cancel: g.default.string,
/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
* Unfortunately, in order for <Draggable> to work properly, we need raw access
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
* as in this example:
*
* function MyComponent() {
* const nodeRef = React.useRef(null);
* return (
* <Draggable nodeRef={nodeRef}>
* <div ref={nodeRef}>Example Target</div>
* </Draggable>
* );
* }
*
* This can be used for arbitrarily nested components, so long as the ref ends up
* pointing to the actual child DOM node and not a custom component.
*/
nodeRef: g.default.object,
/**
* Called when dragging starts.
* If this function returns the boolean false, dragging will be canceled.
*/
onStart: g.default.func,
/**
* Called while dragging.
* If this function returns the boolean false, dragging will be canceled.
*/
onDrag: g.default.func,
/**
* Called when dragging stops.
* If this function returns the boolean false, the drag will remain active.
*/
onStop: g.default.func,
/**
* A workaround option which can be passed if onMouseDown needs to be accessed,
* since it'll always be blocked (as there is internal use of onMouseDown)
*/
onMouseDown: g.default.func,
/**
* `scale`, if set, applies scaling while dragging an element
*/
scale: g.default.number,
/**
* These properties should be defined on the child, not here.
*/
className: m.dontSetMe,
style: m.dontSetMe,
transform: m.dontSetMe
}), S(D, "defaultProps", {
allowAnyClick: !1,
// by default only accept left click
allowMobileScroll: !1,
disabled: !1,
enableUserSelectHack: !0,
onStart: function() {
},
onDrag: function() {
},
onStop: function() {
},
onMouseDown: function() {
},
scale: 1
}), $;
}
var Z;
function mt() {
return Z || (Z = 1, (function(f) {
Object.defineProperty(f, "__esModule", {
value: !0
}), Object.defineProperty(f, "DraggableCore", {
enumerable: !0,
get: function() {
return C.default;
}
}), f.default = void 0;
var g = a(A), y = T(nt), v = T(rt), _ = ut(), m = B(), b = ot(), w = U(), C = T(pt()), S = T(at());
function T(o) {
return o && o.__esModule ? o : { default: o };
}
function a(o, r) {
if (typeof WeakMap == "function") var s = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap();
return (a = function(u, h) {
if (!h && u && u.__esModule) return u;
var t, e, i = { __proto__: null, default: u };
if (u === null || typeof u != "object" && typeof u != "function") return i;
if (t = h ? c : s) {
if (t.has(u)) return t.get(u);
t.set(u, i);
}
for (const P in u) P !== "default" && {}.hasOwnProperty.call(u, P) && ((e = (t = Object.defineProperty) && Object.getOwnPropertyDescriptor(u, P)) && (e.get || e.set) ? t(i, P, e) : i[P] = u[P]);
return i;
})(o, r);
}
function d() {
return d = Object.assign ? Object.assign.bind() : function(o) {
for (var r = 1; r < arguments.length; r++) {
var s = arguments[r];
for (var c in s) ({}).hasOwnProperty.call(s, c) && (o[c] = s[c]);
}
return o;
}, d.apply(null, arguments);
}
function p(o, r, s) {
return (r = D(r)) in o ? Object.defineProperty(o, r, { value: s, enumerable: !0, configurable: !0, writable: !0 }) : o[r] = s, o;
}
function D(o) {
var r = l(o, "string");
return typeof r == "symbol" ? r : r + "";
}
function l(o, r) {
if (typeof o != "object" || !o) return o;
var s = o[Symbol.toPrimitive];
if (s !== void 0) {
var c = s.call(o, r);
if (typeof c != "object") return c;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (r === "string" ? String : Number)(o);
}
class n extends g.Component {
// React 16.3+
// Arity (props, state)
static getDerivedStateFromProps(r, s) {
let {
position: c
} = r, {
prevPropsPosition: u
} = s;
return c && (!u || c.x !== u.x || c.y !== u.y) ? ((0, S.default)("Draggable: getDerivedStateFromProps %j", {
position: c,
prevPropsPosition: u
}), {
x: c.x,
y: c.y,
prevPropsPosition: {
...c
}
}) : null;
}
constructor(r) {
super(r), p(this, "onDragStart", (s, c) => {
if ((0, S.default)("Draggable: onDragStart: %j", c), this.props.onStart(s, (0, b.createDraggableData)(this, c)) === !1) return !1;
this.setState({
dragging: !0,
dragged: !0
});
}), p(this, "onDrag", (s, c) => {
if (!this.state.dragging) return !1;
(0, S.default)("Draggable: onDrag: %j", c);
const u = (0, b.createDraggableData)(this, c), h = {
x: u.x,
y: u.y,
slackX: 0,
slackY: 0
};
if (this.props.bounds) {
const {
x: e,
y: i
} = h;
h.x += this.state.slackX, h.y += this.state.slackY;
const [P, M] = (0, b.getBoundPosition)(this, h.x, h.y);
h.x = P, h.y = M, h.slackX = this.state.slackX + (e - h.x), h.slackY = this.state.slackY + (i - h.y), u.x = h.x, u.y = h.y, u.deltaX = h.x - this.state.x, u.deltaY = h.y - this.state.y;
}
if (this.props.onDrag(s, u) === !1) return !1;
this.setState(h);
}), p(this, "onDragStop", (s, c) => {
if (!this.state.dragging || this.props.onStop(s, (0, b.createDraggableData)(this, c)) === !1) return !1;
(0, S.default)("Draggable: onDragStop: %j", c);
const h = {
dragging: !1,
slackX: 0,
slackY: 0
};
if (!!this.props.position) {
const {
x: e,
y: i
} = this.props.position;
h.x = e, h.y = i;
}
this.setState(h);
}), this.state = {
// Whether or not we are currently dragging.
dragging: !1,
// Whether or not we have been dragged before.
dragged: !1,
// Current transform x and y.
x: r.position ? r.position.x : r.defaultPosition.x,
y: r.position ? r.position.y : r.defaultPosition.y,
prevPropsPosition: {
...r.position
},
// Used for compensating for out-of-bounds drags
slackX: 0,
slackY: 0,
// Can only determine if SVG after mounting
isElementSVG: !1
}, r.position && !(r.onDrag || r.onStop) && console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.");
}
componentDidMount() {
typeof window.SVGElement < "u" && this.findDOMNode() instanceof window.SVGElement && this.setState({
isElementSVG: !0
});
}
componentWillUnmount() {
this.state.dragging && this.setState({
dragging: !1
});
}
// React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
findDOMNode() {
var r, s;
return ((s = (r = this.props) == null ? void 0 : r.nodeRef) == null ? void 0 : s.current) ?? v.default.findDOMNode(this);
}
render() {
const {
axis: r,
bounds: s,
children: c,
defaultPosition: u,
defaultClassName: h,
defaultClassNameDragging: t,
defaultClassNameDragged: e,
position: i,
positionOffset: P,
scale: M,
...E
} = this.props;
let N = {}, O = null;
const R = !!!i || this.state.dragging, H = i || u, I = {
// Set left if horizontal drag is enabled
x: (0, b.canDragX)(this) && R ? this.state.x : H.x,
// Set top if vertical drag is enabled
y: (0, b.canDragY)(this) && R ? this.state.y : H.y
};
this.state.isElementSVG ? O = (0, m.createSVGTransform)(I, P) : N = (0, m.createCSSTransform)(I, P);
const st = (0, _.clsx)(c.props.className || "", h, {
[t]: this.state.dragging,
[e]: this.state.dragged
});
return /* @__PURE__ */ g.createElement(C.default, d({}, E, {
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop
}), /* @__PURE__ */ g.cloneElement(g.Children.only(c), {
className: st,
style: {
...c.props.style,
...N
},
transform: O
}));
}
}
f.default = n, p(n, "displayName", "Draggable"), p(n, "propTypes", {
// Accepts all props <DraggableCore> accepts.
...C.default.propTypes,
/**
* `axis` determines which axis the draggable can move.
*
* Note that all callbacks will still return data as normal. This only
* controls flushing to the DOM.
*
* 'both' allows movement horizontally and vertically.
* 'x' limits movement to horizontal axis.
* 'y' limits movement to vertical axis.
* 'none' limits all movement.
*
* Defaults to 'both'.
*/
axis: y.default.oneOf(["both", "x", "y", "none"]),
/**
* `bounds` determines the range of movement available to the element.
* Available values are:
*
* 'parent' restricts movement within the Draggable's parent node.
*
* Alternatively, pass an object with the following properties, all of which are optional:
*
* {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
*
* All values are in px.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable bounds={{right: 300, bottom: 300}}>
* <div>Content</div>
* </Draggable>
* );
* }
* });
* ```
*/
bounds: y.default.oneOfType([y.default.shape({
left: y.default.number,
right: y.default.number,
top: y.default.number,
bottom: y.default.number
}), y.default.string, y.default.oneOf([!1])]),
defaultClassName: y.default.string,
defaultClassNameDragging: y.default.string,
defaultClassNameDragged: y.default.string,
/**
* `defaultPosition` specifies the x and y that the dragged item should start at
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable defaultPosition={{x: 25, y: 25}}>
* <div>I start with transformX: 25px and transformY: 25px;</div>
* </Draggable>
* );
* }
* });
* ```
*/
defaultPosition: y.default.shape({
x: y.default.number,
y: y.default.number
}),
positionOffset: y.default.shape({
x: y.default.oneOfType([y.default.number, y.default.string]),
y: y.default.oneOfType([y.default.number, y.default.string])
}),
/**
* `position`, if present, defines the current position of the element.
*
* This is similar to how form elements in React work - if no `position` is supplied, the component
* is uncontrolled.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable position={{x: 25, y: 25}}>
* <div>I start with transformX: 25px and transformY: 25px;</div>
* </Draggable>
* );
* }
* });
* ```
*/
position: y.default.shape({
x: y.default.number,
y: y.default.number
}),
/**
* These properties should be defined on the child, not here.
*/
className: w.dontSetMe,
style: w.dontSetMe,
transform: w.dontSetMe
}), p(n, "defaultProps", {
...C.default.defaultProps,
axis: "both",
bounds: !1,
defaultClassName: "react-draggable",
defaultClassNameDragging: "react-draggable-dragging",
defaultClassNameDragged: "react-draggable-dragged",
defaultPosition: {
x: 0,
y: 0
},
scale: 1
});
})(L)), L;
}
var tt;
function yt() {
if (tt) return W.exports;
tt = 1;
const {
default: f,
DraggableCore: g
} = mt();
return W.exports = f, W.exports.default = f, W.exports.DraggableCore = g, W.exports;
}
var et;
function Dt() {
if (et) return q;
et = 1;
var f = q && q.__importDefault || function(a) {
return a && a.__esModule ? a : { default: a };
};
Object.defineProperty(q, "__esModule", { value: !0 });
const g = lt, y = A, v = f(/* @__PURE__ */ ft()), _ = /* @__PURE__ */ ht(), m = ct, b = f(yt()), C = (0, dt.makeStyles)()((a) => ({
closeButton: {
position: "absolute",
right: a.spacing(1),
top: a.spacing(1),
color: a.palette.grey[500]
}
}));
function S(a) {
const d = (0, y.useRef)(null);
return (0, g.jsx)(b.default, { nodeRef: d, cancel: '[class*="MuiDialogContent-root"]', onStart: (p) => {
var D;
return `${(D = p.target) === null || D === void 0 ? void 0 : D.className}`.includes("MuiDialogTitle");
}, children: (0, g.jsx)(_.Paper, { ref: d, ...a }) });
}
const T = (0, m.observer)(function(d) {
const { classes: p } = C(), { title: D, children: l, onClose: n } = d;
return (0, g.jsx)(_.Dialog, { ...d, PaperComponent: S, children: (0, g.jsxs)(_.ScopedCssBaseline, { children: [(0, g.jsxs)(_.DialogTitle, { style: { cursor: "move" }, children: [D, n ? (0, g.jsx)(_.IconButton, { className: p.closeButton, onClick: () => {
n();
}, children: (0, g.jsx)(v.default, {}) }) : null] }), (0, g.jsx)(_.Divider, {}), l] }) });
});
return q.default = T, q;
}
var bt = Dt();
const xt = /* @__PURE__ */ it(bt);
export {
xt as D
};
//# sourceMappingURL=DraggableDialog-SkGHL3cH.js.map