taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
1,002 lines (1,001 loc) • 36.5 kB
JavaScript
import { a as ue, g as ce } from "./index-dFotuATn.js";
import fe from "react/jsx-runtime";
import I from "react";
import { c7 as de, bu as he, aZ as pe, a_ as ge } from "./JBrowsePanel-uJIA-L6s.js";
import ne from "prop-types";
import oe from "react-dom";
var Y = {}, q = { exports: {} }, A = {};
function ae(a) {
var s, p, m = "";
if (typeof a == "string" || typeof a == "number") m += a;
else if (typeof a == "object") if (Array.isArray(a)) for (s = 0; s < a.length; s++) a[s] && (p = ae(a[s])) && (m && (m += " "), m += p);
else for (s in a) a[s] && (m && (m += " "), m += s);
return m;
}
function j() {
for (var a, s, p = 0, m = ""; p < arguments.length; ) (a = arguments[p++]) && (s = ae(a)) && (m && (m += " "), m += s);
return m;
}
const me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
clsx: j,
default: j
}, Symbol.toStringTag, { value: "Module" })), ve = /* @__PURE__ */ ue(me);
var M = {}, R = {}, k;
function B() {
if (k) return R;
k = 1, Object.defineProperty(R, "__esModule", {
value: !0
}), R.dontSetMe = b, R.findInArray = a, R.int = m, R.isFunction = s, R.isNum = p;
function a(h, y) {
for (let w = 0, C = h.length; w < C; w++)
if (y.apply(y, [h[w], w, h])) return h[w];
}
function s(h) {
return typeof h == "function" || Object.prototype.toString.call(h) === "[object Function]";
}
function p(h) {
return typeof h == "number" && !isNaN(h);
}
function m(h) {
return parseInt(h, 10);
}
function b(h, y, w) {
if (h[y])
return new Error("Invalid prop ".concat(y, " passed to ").concat(w, " - do not set this, set it on the child."));
}
return R;
}
var X = {}, z;
function ye() {
if (z) return X;
z = 1, Object.defineProperty(X, "__esModule", {
value: !0
}), X.browserPrefixToKey = p, X.browserPrefixToStyle = m, X.default = void 0, X.getPrefix = s;
const a = ["Moz", "Webkit", "O", "ms"];
function s() {
var h;
let y = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "transform";
if (typeof window > "u") return "";
const w = (h = window.document) === null || h === void 0 || (h = h.documentElement) === null || h === void 0 ? void 0 : h.style;
if (!w || y in w) return "";
for (let C = 0; C < a.length; C++)
if (p(y, a[C]) in w) return a[C];
return "";
}
function p(h, y) {
return y ? "".concat(y).concat(b(h)) : h;
}
function m(h, y) {
return y ? "-".concat(y.toLowerCase(), "-").concat(h) : h;
}
function b(h) {
let y = "", w = !0;
for (let C = 0; C < h.length; C++)
w ? (y += h[C].toUpperCase(), w = !1) : h[C] === "-" ? w = !0 : y += h[C];
return y;
}
return X.default = s(), X;
}
var K;
function L() {
if (K) return M;
K = 1, Object.defineProperty(M, "__esModule", {
value: !0
}), M.addClassName = i, M.addEvent = w, M.addUserSelectStyles = n, M.createCSSTransform = d, M.createSVGTransform = P, M.getTouch = o, M.getTouchIdentifier = r, M.getTranslation = c, M.innerHeight = l, M.innerWidth = v, M.matchesSelector = h, M.matchesSelectorAndParentsTo = y, M.offsetXYFromParent = g, M.outerHeight = N, M.outerWidth = S, M.removeClassName = D, M.removeEvent = C, M.removeUserSelectStyles = f;
var a = B(), s = m(ye());
function p(e) {
if (typeof WeakMap != "function") return null;
var t = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap();
return (p = function(_) {
return _ ? u : t;
})(e);
}
function m(e, t) {
if (e && e.__esModule)
return e;
if (e === null || typeof e != "object" && typeof e != "function")
return { default: e };
var u = p(t);
if (u && u.has(e))
return u.get(e);
var _ = {}, x = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var T in e)
if (T !== "default" && Object.prototype.hasOwnProperty.call(e, T)) {
var O = x ? Object.getOwnPropertyDescriptor(e, T) : null;
O && (O.get || O.set) ? Object.defineProperty(_, T, O) : _[T] = e[T];
}
return _.default = e, u && u.set(e, _), _;
}
let b = "";
function h(e, t) {
return b || (b = (0, a.findInArray)(["matches", "webkitMatchesSelector", "mozMatchesSelector", "msMatchesSelector", "oMatchesSelector"], function(u) {
return (0, a.isFunction)(e[u]);
})), (0, a.isFunction)(e[b]) ? e[b](t) : !1;
}
function y(e, t, u) {
let _ = e;
do {
if (h(_, t)) return !0;
if (_ === u) return !1;
_ = _.parentNode;
} while (_);
return !1;
}
function w(e, t, u, _) {
if (!e) return;
const x = {
capture: !0,
..._
};
e.addEventListener ? e.addEventListener(t, u, x) : e.attachEvent ? e.attachEvent("on" + t, u) : e["on" + t] = u;
}
function C(e, t, u, _) {
if (!e) return;
const x = {
capture: !0,
..._
};
e.removeEventListener ? e.removeEventListener(t, u, x) : e.detachEvent ? e.detachEvent("on" + t, u) : e["on" + t] = null;
}
function N(e) {
let t = e.clientHeight;
const u = e.ownerDocument.defaultView.getComputedStyle(e);
return t += (0, a.int)(u.borderTopWidth), t += (0, a.int)(u.borderBottomWidth), t;
}
function S(e) {
let t = e.clientWidth;
const u = e.ownerDocument.defaultView.getComputedStyle(e);
return t += (0, a.int)(u.borderLeftWidth), t += (0, a.int)(u.borderRightWidth), t;
}
function l(e) {
let t = e.clientHeight;
const u = e.ownerDocument.defaultView.getComputedStyle(e);
return t -= (0, a.int)(u.paddingTop), t -= (0, a.int)(u.paddingBottom), t;
}
function v(e) {
let t = e.clientWidth;
const u = e.ownerDocument.defaultView.getComputedStyle(e);
return t -= (0, a.int)(u.paddingLeft), t -= (0, a.int)(u.paddingRight), t;
}
function g(e, t, u) {
const x = t === t.ownerDocument.body ? {
left: 0,
top: 0
} : t.getBoundingClientRect(), T = (e.clientX + t.scrollLeft - x.left) / u, O = (e.clientY + t.scrollTop - x.top) / u;
return {
x: T,
y: O
};
}
function d(e, t) {
const u = c(e, t, "px");
return {
[(0, s.browserPrefixToKey)("transform", s.default)]: u
};
}
function P(e, t) {
return c(e, t, "");
}
function c(e, t, u) {
let {
x: _,
y: x
} = e, T = "translate(".concat(_).concat(u, ",").concat(x).concat(u, ")");
if (t) {
const O = "".concat(typeof t.x == "string" ? t.x : t.x + u), F = "".concat(typeof t.y == "string" ? t.y : t.y + u);
T = "translate(".concat(O, ", ").concat(F, ")") + T;
}
return T;
}
function o(e, t) {
return e.targetTouches && (0, a.findInArray)(e.targetTouches, (u) => t === u.identifier) || e.changedTouches && (0, a.findInArray)(e.changedTouches, (u) => t === u.identifier);
}
function r(e) {
if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
}
function n(e) {
if (!e) return;
let t = e.getElementById("react-draggable-style-el");
t || (t = e.createElement("style"), t.type = "text/css", t.id = "react-draggable-style-el", t.innerHTML = `.react-draggable-transparent-selection *::-moz-selection {all: inherit;}
`, t.innerHTML += `.react-draggable-transparent-selection *::selection {all: inherit;}
`, e.getElementsByTagName("head")[0].appendChild(t)), e.body && i(e.body, "react-draggable-transparent-selection");
}
function f(e) {
if (e)
try {
if (e.body && D(e.body, "react-draggable-transparent-selection"), e.selection)
e.selection.empty();
else {
const t = (e.defaultView || window).getSelection();
t && t.type !== "Caret" && t.removeAllRanges();
}
} catch {
}
}
function i(e, t) {
e.classList ? e.classList.add(t) : e.className.match(new RegExp("(?:^|\\s)".concat(t, "(?!\\S)"))) || (e.className += " ".concat(t));
}
function D(e, t) {
e.classList ? e.classList.remove(t) : e.className = e.className.replace(new RegExp("(?:^|\\s)".concat(t, "(?!\\S)"), "g"), "");
}
return M;
}
var E = {}, Z;
function ie() {
if (Z) return E;
Z = 1, Object.defineProperty(E, "__esModule", {
value: !0
}), E.canDragX = b, E.canDragY = h, E.createCoreData = w, E.createDraggableData = C, E.getBoundPosition = p, E.getControlPosition = y, E.snapToGrid = m;
var a = B(), s = L();
function p(l, v, g) {
if (!l.props.bounds) return [v, g];
let {
bounds: d
} = l.props;
d = typeof d == "string" ? d : N(d);
const P = S(l);
if (typeof d == "string") {
const {
ownerDocument: c
} = P, o = c.defaultView;
let r;
if (d === "parent" ? r = P.parentNode : r = c.querySelector(d), !(r instanceof o.HTMLElement))
throw new Error('Bounds selector "' + d + '" could not find an element.');
const n = r, f = o.getComputedStyle(P), i = o.getComputedStyle(n);
d = {
left: -P.offsetLeft + (0, a.int)(i.paddingLeft) + (0, a.int)(f.marginLeft),
top: -P.offsetTop + (0, a.int)(i.paddingTop) + (0, a.int)(f.marginTop),
right: (0, s.innerWidth)(n) - (0, s.outerWidth)(P) - P.offsetLeft + (0, a.int)(i.paddingRight) - (0, a.int)(f.marginRight),
bottom: (0, s.innerHeight)(n) - (0, s.outerHeight)(P) - P.offsetTop + (0, a.int)(i.paddingBottom) - (0, a.int)(f.marginBottom)
};
}
return (0, a.isNum)(d.right) && (v = Math.min(v, d.right)), (0, a.isNum)(d.bottom) && (g = Math.min(g, d.bottom)), (0, a.isNum)(d.left) && (v = Math.max(v, d.left)), (0, a.isNum)(d.top) && (g = Math.max(g, d.top)), [v, g];
}
function m(l, v, g) {
const d = Math.round(v / l[0]) * l[0], P = Math.round(g / l[1]) * l[1];
return [d, P];
}
function b(l) {
return l.props.axis === "both" || l.props.axis === "x";
}
function h(l) {
return l.props.axis === "both" || l.props.axis === "y";
}
function y(l, v, g) {
const d = typeof v == "number" ? (0, s.getTouch)(l, v) : null;
if (typeof v == "number" && !d) return null;
const P = S(g), c = g.props.offsetParent || P.offsetParent || P.ownerDocument.body;
return (0, s.offsetXYFromParent)(d || l, c, g.props.scale);
}
function w(l, v, g) {
const d = !(0, a.isNum)(l.lastX), P = S(l);
return d ? {
node: P,
deltaX: 0,
deltaY: 0,
lastX: v,
lastY: g,
x: v,
y: g
} : {
node: P,
deltaX: v - l.lastX,
deltaY: g - l.lastY,
lastX: l.lastX,
lastY: l.lastY,
x: v,
y: g
};
}
function C(l, v) {
const g = l.props.scale;
return {
node: v.node,
x: l.state.x + v.deltaX / g,
y: l.state.y + v.deltaY / g,
deltaX: v.deltaX / g,
deltaY: v.deltaY / g,
lastX: l.state.x,
lastY: l.state.y
};
}
function N(l) {
return {
left: l.left,
top: l.top,
right: l.right,
bottom: l.bottom
};
}
function S(l) {
const v = l.findDOMNode();
if (!v)
throw new Error("<DraggableCore>: Unmounted during event!");
return v;
}
return E;
}
var W = {}, U = {}, J;
function se() {
if (J) return U;
J = 1, Object.defineProperty(U, "__esModule", {
value: !0
}), U.default = a;
function a() {
}
return U;
}
var Q;
function De() {
if (Q) return W;
Q = 1, Object.defineProperty(W, "__esModule", {
value: !0
}), W.default = void 0;
var a = N(I), s = w(ne), p = w(oe), m = L(), b = ie(), h = B(), y = w(se());
function w(c) {
return c && c.__esModule ? c : { default: c };
}
function C(c) {
if (typeof WeakMap != "function") return null;
var o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
return (C = function(n) {
return n ? r : o;
})(c);
}
function N(c, o) {
if (c && c.__esModule)
return c;
if (c === null || typeof c != "object" && typeof c != "function")
return { default: c };
var r = C(o);
if (r && r.has(c))
return r.get(c);
var n = {}, f = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var i in c)
if (i !== "default" && Object.prototype.hasOwnProperty.call(c, i)) {
var D = f ? Object.getOwnPropertyDescriptor(c, i) : null;
D && (D.get || D.set) ? Object.defineProperty(n, i, D) : n[i] = c[i];
}
return n.default = c, r && r.set(c, n), n;
}
function S(c, o, r) {
return o = l(o), o in c ? Object.defineProperty(c, o, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : c[o] = r, c;
}
function l(c) {
var o = v(c, "string");
return typeof o == "symbol" ? o : String(o);
}
function v(c, o) {
if (typeof c != "object" || c === null) return c;
var r = c[Symbol.toPrimitive];
if (r !== void 0) {
var n = r.call(c, o);
if (typeof n != "object") return n;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (o === "string" ? String : Number)(c);
}
const g = {
touch: {
start: "touchstart",
move: "touchmove",
stop: "touchend"
},
mouse: {
start: "mousedown",
move: "mousemove",
stop: "mouseup"
}
};
let d = g.mouse, P = class extends a.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", (o) => {
if (this.props.onMouseDown(o), !this.props.allowAnyClick && typeof o.button == "number" && o.button !== 0) return !1;
const r = this.findDOMNode();
if (!r || !r.ownerDocument || !r.ownerDocument.body)
throw new Error("<DraggableCore> not mounted on DragStart!");
const {
ownerDocument: n
} = r;
if (this.props.disabled || !(o.target instanceof n.defaultView.Node) || this.props.handle && !(0, m.matchesSelectorAndParentsTo)(o.target, this.props.handle, r) || this.props.cancel && (0, m.matchesSelectorAndParentsTo)(o.target, this.props.cancel, r))
return;
o.type === "touchstart" && o.preventDefault();
const f = (0, m.getTouchIdentifier)(o);
this.touchIdentifier = f;
const i = (0, b.getControlPosition)(o, f, this);
if (i == null) return;
const {
x: D,
y: e
} = i, t = (0, b.createCoreData)(this, D, e);
(0, y.default)("DraggableCore: handleDragStart: %j", t), (0, y.default)("calling", this.props.onStart), !(this.props.onStart(o, t) === !1 || this.mounted === !1) && (this.props.enableUserSelectHack && (0, m.addUserSelectStyles)(n), this.dragging = !0, this.lastX = D, this.lastY = e, (0, m.addEvent)(n, d.move, this.handleDrag), (0, m.addEvent)(n, d.stop, this.handleDragStop));
}), S(this, "handleDrag", (o) => {
const r = (0, b.getControlPosition)(o, this.touchIdentifier, this);
if (r == null) return;
let {
x: n,
y: f
} = r;
if (Array.isArray(this.props.grid)) {
let e = n - this.lastX, t = f - this.lastY;
if ([e, t] = (0, b.snapToGrid)(this.props.grid, e, t), !e && !t) return;
n = this.lastX + e, f = this.lastY + t;
}
const i = (0, b.createCoreData)(this, n, f);
if ((0, y.default)("DraggableCore: handleDrag: %j", i), this.props.onDrag(o, i) === !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 = n, this.lastY = f;
}), S(this, "handleDragStop", (o) => {
if (!this.dragging) return;
const r = (0, b.getControlPosition)(o, this.touchIdentifier, this);
if (r == null) return;
let {
x: n,
y: f
} = r;
if (Array.isArray(this.props.grid)) {
let t = n - this.lastX || 0, u = f - this.lastY || 0;
[t, u] = (0, b.snapToGrid)(this.props.grid, t, u), n = this.lastX + t, f = this.lastY + u;
}
const i = (0, b.createCoreData)(this, n, f);
if (this.props.onStop(o, i) === !1 || this.mounted === !1) return !1;
const e = this.findDOMNode();
e && this.props.enableUserSelectHack && (0, m.removeUserSelectStyles)(e.ownerDocument), (0, y.default)("DraggableCore: handleDragStop: %j", i), this.dragging = !1, this.lastX = NaN, this.lastY = NaN, e && ((0, y.default)("DraggableCore: Removing handlers"), (0, m.removeEvent)(e.ownerDocument, d.move, this.handleDrag), (0, m.removeEvent)(e.ownerDocument, d.stop, this.handleDragStop));
}), S(this, "onMouseDown", (o) => (d = g.mouse, this.handleDragStart(o))), S(this, "onMouseUp", (o) => (d = g.mouse, this.handleDragStop(o))), S(this, "onTouchStart", (o) => (d = g.touch, this.handleDragStart(o))), S(this, "onTouchEnd", (o) => (d = g.touch, this.handleDragStop(o)));
}
componentDidMount() {
this.mounted = !0;
const o = this.findDOMNode();
o && (0, m.addEvent)(o, g.touch.start, this.onTouchStart, {
passive: !1
});
}
componentWillUnmount() {
this.mounted = !1;
const o = this.findDOMNode();
if (o) {
const {
ownerDocument: r
} = o;
(0, m.removeEvent)(r, g.mouse.move, this.handleDrag), (0, m.removeEvent)(r, g.touch.move, this.handleDrag), (0, m.removeEvent)(r, g.mouse.stop, this.handleDragStop), (0, m.removeEvent)(r, g.touch.stop, this.handleDragStop), (0, m.removeEvent)(o, g.touch.start, this.onTouchStart, {
passive: !1
}), this.props.enableUserSelectHack && (0, m.removeUserSelectStyles)(r);
}
}
// 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 o, r;
return (o = this.props) !== null && o !== void 0 && o.nodeRef ? (r = this.props) === null || r === void 0 || (r = r.nodeRef) === null || r === void 0 ? void 0 : r.current : p.default.findDOMNode(this);
}
render() {
return /* @__PURE__ */ a.cloneElement(a.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 W.default = P, S(P, "displayName", "DraggableCore"), S(P, "propTypes", {
/**
* `allowAnyClick` allows dragging using any mouse button.
* By default, we only accept the left button.
*
* Defaults to `false`.
*/
allowAnyClick: s.default.bool,
children: s.default.node.isRequired,
/**
* `disabled`, if true, stops the <Draggable> from dragging. All handlers,
* with the exception of `onMouseDown`, will not fire.
*/
disabled: s.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: s.default.bool,
/**
* `offsetParent`, if set, uses the passed DOM node to compute drag offsets
* instead of using the parent node.
*/
offsetParent: function(c, o) {
if (c[o] && c[o].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: s.default.arrayOf(s.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: s.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: s.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: s.default.object,
/**
* Called when dragging starts.
* If this function returns the boolean false, dragging will be canceled.
*/
onStart: s.default.func,
/**
* Called while dragging.
* If this function returns the boolean false, dragging will be canceled.
*/
onDrag: s.default.func,
/**
* Called when dragging stops.
* If this function returns the boolean false, the drag will remain active.
*/
onStop: s.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: s.default.func,
/**
* `scale`, if set, applies scaling while dragging an element
*/
scale: s.default.number,
/**
* These properties should be defined on the child, not here.
*/
className: h.dontSetMe,
style: h.dontSetMe,
transform: h.dontSetMe
}), S(P, "defaultProps", {
allowAnyClick: !1,
// by default only accept left click
disabled: !1,
enableUserSelectHack: !0,
onStart: function() {
},
onDrag: function() {
},
onStop: function() {
},
onMouseDown: function() {
},
scale: 1
}), W;
}
var ee;
function Se() {
return ee || (ee = 1, function(a) {
Object.defineProperty(a, "__esModule", {
value: !0
}), Object.defineProperty(a, "DraggableCore", {
enumerable: !0,
get: function() {
return C.default;
}
}), a.default = void 0;
var s = v(I), p = S(ne), m = S(oe), b = S(ve), h = L(), y = ie(), w = B(), C = S(De()), N = S(se());
function S(r) {
return r && r.__esModule ? r : { default: r };
}
function l(r) {
if (typeof WeakMap != "function") return null;
var n = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap();
return (l = function(i) {
return i ? f : n;
})(r);
}
function v(r, n) {
if (r && r.__esModule)
return r;
if (r === null || typeof r != "object" && typeof r != "function")
return { default: r };
var f = l(n);
if (f && f.has(r))
return f.get(r);
var i = {}, D = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var e in r)
if (e !== "default" && Object.prototype.hasOwnProperty.call(r, e)) {
var t = D ? Object.getOwnPropertyDescriptor(r, e) : null;
t && (t.get || t.set) ? Object.defineProperty(i, e, t) : i[e] = r[e];
}
return i.default = r, f && f.set(r, i), i;
}
function g() {
return g = Object.assign ? Object.assign.bind() : function(r) {
for (var n = 1; n < arguments.length; n++) {
var f = arguments[n];
for (var i in f)
Object.prototype.hasOwnProperty.call(f, i) && (r[i] = f[i]);
}
return r;
}, g.apply(this, arguments);
}
function d(r, n, f) {
return n = P(n), n in r ? Object.defineProperty(r, n, { value: f, enumerable: !0, configurable: !0, writable: !0 }) : r[n] = f, r;
}
function P(r) {
var n = c(r, "string");
return typeof n == "symbol" ? n : String(n);
}
function c(r, n) {
if (typeof r != "object" || r === null) return r;
var f = r[Symbol.toPrimitive];
if (f !== void 0) {
var i = f.call(r, n);
if (typeof i != "object") return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (n === "string" ? String : Number)(r);
}
class o extends s.Component {
// React 16.3+
// Arity (props, state)
static getDerivedStateFromProps(n, f) {
let {
position: i
} = n, {
prevPropsPosition: D
} = f;
return i && (!D || i.x !== D.x || i.y !== D.y) ? ((0, N.default)("Draggable: getDerivedStateFromProps %j", {
position: i,
prevPropsPosition: D
}), {
x: i.x,
y: i.y,
prevPropsPosition: {
...i
}
}) : null;
}
constructor(n) {
super(n), d(this, "onDragStart", (f, i) => {
if ((0, N.default)("Draggable: onDragStart: %j", i), this.props.onStart(f, (0, y.createDraggableData)(this, i)) === !1) return !1;
this.setState({
dragging: !0,
dragged: !0
});
}), d(this, "onDrag", (f, i) => {
if (!this.state.dragging) return !1;
(0, N.default)("Draggable: onDrag: %j", i);
const D = (0, y.createDraggableData)(this, i), e = {
x: D.x,
y: D.y,
slackX: 0,
slackY: 0
};
if (this.props.bounds) {
const {
x: u,
y: _
} = e;
e.x += this.state.slackX, e.y += this.state.slackY;
const [x, T] = (0, y.getBoundPosition)(this, e.x, e.y);
e.x = x, e.y = T, e.slackX = this.state.slackX + (u - e.x), e.slackY = this.state.slackY + (_ - e.y), D.x = e.x, D.y = e.y, D.deltaX = e.x - this.state.x, D.deltaY = e.y - this.state.y;
}
if (this.props.onDrag(f, D) === !1) return !1;
this.setState(e);
}), d(this, "onDragStop", (f, i) => {
if (!this.state.dragging || this.props.onStop(f, (0, y.createDraggableData)(this, i)) === !1) return !1;
(0, N.default)("Draggable: onDragStop: %j", i);
const e = {
dragging: !1,
slackX: 0,
slackY: 0
};
if (!!this.props.position) {
const {
x: u,
y: _
} = this.props.position;
e.x = u, e.y = _;
}
this.setState(e);
}), 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: n.position ? n.position.x : n.defaultPosition.x,
y: n.position ? n.position.y : n.defaultPosition.y,
prevPropsPosition: {
...n.position
},
// Used for compensating for out-of-bounds drags
slackX: 0,
slackY: 0,
// Can only determine if SVG after mounting
isElementSVG: !1
}, n.position && !(n.onDrag || n.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.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 n, f;
return (n = (f = this.props) === null || f === void 0 || (f = f.nodeRef) === null || f === void 0 ? void 0 : f.current) !== null && n !== void 0 ? n : m.default.findDOMNode(this);
}
render() {
const {
axis: n,
bounds: f,
children: i,
defaultPosition: D,
defaultClassName: e,
defaultClassNameDragging: t,
defaultClassNameDragged: u,
position: _,
positionOffset: x,
scale: T,
...O
} = this.props;
let F = {}, $ = null;
const H = !!!_ || this.state.dragging, V = _ || D, G = {
// Set left if horizontal drag is enabled
x: (0, y.canDragX)(this) && H ? this.state.x : V.x,
// Set top if vertical drag is enabled
y: (0, y.canDragY)(this) && H ? this.state.y : V.y
};
this.state.isElementSVG ? $ = (0, h.createSVGTransform)(G, x) : F = (0, h.createCSSTransform)(G, x);
const le = (0, b.default)(i.props.className || "", e, {
[t]: this.state.dragging,
[u]: this.state.dragged
});
return /* @__PURE__ */ s.createElement(C.default, g({}, O, {
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop
}), /* @__PURE__ */ s.cloneElement(s.Children.only(i), {
className: le,
style: {
...i.props.style,
...F
},
transform: $
}));
}
}
a.default = o, d(o, "displayName", "Draggable"), d(o, "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: p.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: p.default.oneOfType([p.default.shape({
left: p.default.number,
right: p.default.number,
top: p.default.number,
bottom: p.default.number
}), p.default.string, p.default.oneOf([!1])]),
defaultClassName: p.default.string,
defaultClassNameDragging: p.default.string,
defaultClassNameDragged: p.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: p.default.shape({
x: p.default.number,
y: p.default.number
}),
positionOffset: p.default.shape({
x: p.default.oneOfType([p.default.number, p.default.string]),
y: p.default.oneOfType([p.default.number, p.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: p.default.shape({
x: p.default.number,
y: p.default.number
}),
/**
* These properties should be defined on the child, not here.
*/
className: w.dontSetMe,
style: w.dontSetMe,
transform: w.dontSetMe
}), d(o, "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
});
}(A)), A;
}
var te;
function be() {
if (te) return q.exports;
te = 1;
const {
default: a,
DraggableCore: s
} = Se();
return q.exports = a, q.exports.default = a, q.exports.DraggableCore = s, q.exports;
}
var re;
function we() {
if (re) return Y;
re = 1;
var a = Y && Y.__importDefault || function(l) {
return l && l.__esModule ? l : { default: l };
};
Object.defineProperty(Y, "__esModule", { value: !0 });
const s = fe, p = I, m = a(/* @__PURE__ */ de()), b = /* @__PURE__ */ ge(), h = pe, y = a(be()), C = (0, he.makeStyles)()((l) => ({
closeButton: {
position: "absolute",
right: l.spacing(1),
top: l.spacing(1),
color: l.palette.grey[500]
}
}));
function N(l) {
const v = (0, p.useRef)(null);
return (0, s.jsx)(y.default, { nodeRef: v, cancel: '[class*="MuiDialogContent-root"]', onStart: (g) => {
var d;
return `${(d = g.target) === null || d === void 0 ? void 0 : d.className}`.includes("MuiDialogTitle");
}, children: (0, s.jsx)(b.Paper, { ref: v, ...l }) });
}
const S = (0, h.observer)(function(v) {
const { classes: g } = C(), { title: d, children: P, onClose: c } = v;
return (0, s.jsx)(b.Dialog, { ...v, PaperComponent: N, children: (0, s.jsxs)(b.ScopedCssBaseline, { children: [(0, s.jsxs)(b.DialogTitle, { style: { cursor: "move" }, children: [d, c ? (0, s.jsx)(b.IconButton, { className: g.closeButton, onClick: () => {
c();
}, children: (0, s.jsx)(m.default, {}) }) : null] }), (0, s.jsx)(b.Divider, {}), P] }) });
});
return Y.default = S, Y;
}
var Pe = we();
const Re = /* @__PURE__ */ ce(Pe);
export {
Re as D
};
//# sourceMappingURL=DraggableDialog-CJbvvTj3.js.map