@jbrowse/core 1.4.1 → 1.5.2

package/ui/FileSelector/FileSelector.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _lab = require("@material-ui/lab");
+
+var _mobxReact = require("mobx-react");
+
+var _types = require("../../util/types");
+
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _LocalFileChooser = _interopRequireDefault(require("./LocalFileChooser"));
+
+var _UrlChooser = _interopRequireDefault(require("./UrlChooser"));
+
+var _excluded = ["title", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function ToggleButtonWithTooltip(props) {
+  var title = props.title,
+      children = props.children,
+      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    title: title || ''
+  }, /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, other, children));
+}
+
+function shorten(str, len) {
+  if (typeof str === 'string' && str.length > len) {
+    return "".concat(str.substring(0, len), "\u2026");
+  }
+
+  return str;
+}
+
+var FileSelector = (0, _mobxReact.observer)(function (props) {
+  var location = props.location,
+      name = props.name,
+      description = props.description,
+      rootModel = props.rootModel,
+      setLocation = props.setLocation;
+  var fileOrUrl = !location || (0, _types.isUriLocation)(location) ? 'url' : 'file';
+
+  var _useState = (0, _react.useState)(location && 'internetAccountId' in location && location.internetAccountId ? location.internetAccountId : fileOrUrl),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      toggleButtonValue = _useState2[0],
+      setToggleButtonValue = _useState2[1];
+
+  var accts = (0, _types.isAppRootModel)(rootModel) ? rootModel.internetAccounts.slice() : [];
+  var numShown = 2;
+
+  var _useState3 = (0, _react.useState)(accts.slice(0, numShown)),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      shownAccts = _useState4[0],
+      setShownAccts = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(accts.slice(numShown)),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      hiddenAccts = _useState6[0],
+      setHiddenAccts = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      anchorEl = _useState8[0],
+      setAnchorEl = _useState8[1];
+
+  var selectedAcct = accts.find(function (ia) {
+    return ia.internetAccountId === toggleButtonValue;
+  });
+
+  var setLocationWithAccount = function setLocationWithAccount(location) {
+    setLocation(_objectSpread(_objectSpread({}, location), {}, {
+      internetAccountId: selectedAcct ? selectedAcct.internetAccountId : undefined
+    }));
+  }; // if you swap account selection after inputting url
+
+
+  if (location && selectedAcct && (0, _types.isUriLocation)(location) && location.internetAccountId !== selectedAcct.internetAccountId) {
+    setLocationWithAccount(location);
+  }
+
+  var locationInput = /*#__PURE__*/_react.default.createElement(_UrlChooser.default, (0, _extends2.default)({}, props, {
+    setLocation: setLocationWithAccount,
+    label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel
+  }));
+
+  if (toggleButtonValue === 'file') {
+    locationInput = /*#__PURE__*/_react.default.createElement(_LocalFileChooser.default, props);
+  }
+
+  if (selectedAcct !== null && selectedAcct !== void 0 && selectedAcct.SelectorComponent) {
+    var SelectorComponent = selectedAcct.SelectorComponent;
+    locationInput = /*#__PURE__*/_react.default.createElement(SelectorComponent, (0, _extends2.default)({}, props, {
+      setLocation: setLocationWithAccount
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "flex"
+  }, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
+    shrink: true
+  }, name)), /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_lab.ToggleButtonGroup, {
+    value: toggleButtonValue,
+    exclusive: true,
+    onChange: function onChange(_event, newState) {
+      if (newState) {
+        setToggleButtonValue(newState);
+      }
+
+      if ((0, _types.isUriLocation)(location)) {
+        setLocationWithAccount(location);
+      }
+    },
+    "aria-label": "file, url, or account picker"
+  }, new URLSearchParams(window.location.search).get('adminKey') ? null : /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+    value: "file",
+    "aria-label": "local file"
+  }, "File"), /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+    value: "url",
+    "aria-label": "url"
+  }, "URL"), shownAccts.map(function (_ref) {
+    var internetAccountId = _ref.internetAccountId,
+        toggleContents = _ref.toggleContents,
+        name = _ref.name;
+    return /*#__PURE__*/_react.default.createElement(ToggleButtonWithTooltip, {
+      key: internetAccountId,
+      value: internetAccountId,
+      "aria-label": name,
+      title: name
+    }, shorten(toggleContents || name, 5));
+  }), hiddenAccts.length ? /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+    onClick: function onClick(event) {
+      return setAnchorEl(event.target);
+    },
+    selected: false
+  }, "More", /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)) : null), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    }
+  }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map(function (acct, idx) {
+    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+      key: acct.internetAccountId,
+      value: acct.internetAccountId,
+      onClick: function onClick() {
+        var prev = shownAccts[shownAccts.length - 1];
+        setShownAccts([].concat((0, _toConsumableArray2.default)(shownAccts.slice(0, shownAccts.length - 1)), [acct]));
+        setHiddenAccts([prev].concat((0, _toConsumableArray2.default)(hiddenAccts.slice(0, idx)), (0, _toConsumableArray2.default)(hiddenAccts.slice(idx + 1))));
+        setToggleButtonValue(acct.internetAccountId);
+        setAnchorEl(null);
+      }
+    }, acct.name);
+  })))), locationInput, /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, description));
+});
+var _default = FileSelector;
+exports.default = _default;

package/ui/FileSelector/LocalFileChooser.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FileLocation } from '../../util/types';
+declare function LocalFileChooser(props: {
+    location?: FileLocation;
+    setLocation: Function;
+}): JSX.Element;
+export default LocalFileChooser;

package/ui/FileSelector/LocalFileChooser.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _util = require("../../util");
+
+var _tracks = require("../../util/tracks");
+
+function isLocalPathLocation(location) {
+  return 'localPath' in location;
+}
+
+function isBlobLocation(location) {
+  return 'blobId' in location;
+}
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    filename: {
+      marginLeft: theme.spacing(1)
+    }
+  };
+});
+
+function LocalFileChooser(props) {
+  var classes = useStyles();
+  var location = props.location,
+      setLocation = props.setLocation;
+  var filename = location && (isBlobLocation(location) && location.name || isLocalPathLocation(location) && location.localPath);
+  var needToReload = location && isBlobLocation(location) && !(0, _tracks.getBlob)(location.blobId);
+  return /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_core.FormControl, {
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    variant: "outlined",
+    component: "label"
+  }, "Choose File", /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    hidden: true,
+    onChange: function onChange(_ref) {
+      var target = _ref.target;
+      var file = target && target.files && target.files[0];
+
+      if (file) {
+        if (_util.isElectron) {
+          setLocation({
+            localPath: file.path,
+            locationType: 'LocalPathLocation'
+          });
+        } else {
+          setLocation((0, _tracks.storeBlobLocation)({
+            blob: file
+          }));
+        }
+      }
+    }
+  })))), /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    component: "span",
+    className: classes.filename,
+    color: filename ? 'initial' : 'textSecondary'
+  }, filename || 'No file chosen'), needToReload ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    color: "error"
+  }, "(need to reload)") : null));
+}
+
+var _default = LocalFileChooser;
+exports.default = _default;

package/ui/FileSelector/UrlChooser.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FileLocation } from '../../util/types';
+declare function UrlChooser(props: {
+    location?: FileLocation;
+    setLocation: Function;
+    label?: string;
+}): JSX.Element;
+declare const _default: typeof UrlChooser;
+export default _default;

package/ui/FileSelector/UrlChooser.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _mobxReact = require("mobx-react");
+
+var _types = require("../../util/types");
+
+function UrlChooser(props) {
+  var location = props.location,
+      setLocation = props.setLocation,
+      label = props.label;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+    fullWidth: true,
+    variant: "outlined",
+    inputProps: {
+      'data-testid': 'urlInput'
+    },
+    defaultValue: location && (0, _types.isUriLocation)(location) ? location.uri : '',
+    label: label || 'Enter URL',
+    onChange: function onChange(event) {
+      setLocation({
+        uri: event.target.value.trim(),
+        locationType: 'UriLocation'
+      });
+    }
+  }));
+}
+
+var _default = (0, _mobxReact.observer)(UrlChooser);
+
+exports.default = _default;

package/ui/FileSelector/index.d.ts

@@ -0,0 +1,2 @@
+import FileSelector from './FileSelector';
+export default FileSelector;

package/ui/FileSelector/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _FileSelector = _interopRequireDefault(require("./FileSelector"));
+
+var _default = _FileSelector.default;
+exports.default = _default;

package/ui/Icons.d.ts

@@ -4,3 +4,7 @@ export declare function ContentCopy(props: SvgIconProps): JSX.Element;
 export declare function ContentCut(props: SvgIconProps): JSX.Element;
 export declare function ContentPaste(props: SvgIconProps): JSX.Element;
 export declare function TrackSelector(props: SvgIconProps): JSX.Element;
+export declare function SaveAs(props: SvgIconProps): JSX.Element;
+export declare function Save(props: SvgIconProps): JSX.Element;
+export declare function DNA(props: SvgIconProps): JSX.Element;
+export declare function Cable(props: SvgIconProps): JSX.Element;

package/ui/Icons.js

@@ -5,9 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Cable = Cable;
 exports.ContentCopy = ContentCopy;
 exports.ContentCut = ContentCut;
 exports.ContentPaste = ContentPaste;
+exports.DNA = DNA;
+exports.Save = Save;
+exports.SaveAs = SaveAs;
 exports.TrackSelector = TrackSelector;
 
 var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
@@ -38,4 +42,34 @@ function TrackSelector(props) {
   return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, props, /*#__PURE__*/_react.default.createElement("path", {
     d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
   }));
+} //  content-save-edit from https://materialdesignicons.com/
+
+
+function SaveAs(props) {
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, props, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "currentColor",
+    d: "M10,19L10.14,18.86C8.9,18.5 8,17.36 8,16A3,3 0 0,1 11,13C12.36,13 13.5,13.9 13.86,15.14L20,9V7L16,3H4C2.89,3 2,3.9 2,5V19A2,2 0 0,0 4,21H10V19M4,5H14V9H4V5M20.04,12.13C19.9,12.13 19.76,12.19 19.65,12.3L18.65,13.3L20.7,15.35L21.7,14.35C21.92,14.14 21.92,13.79 21.7,13.58L20.42,12.3C20.31,12.19 20.18,12.13 20.04,12.13M18.07,13.88L12,19.94V22H14.06L20.12,15.93L18.07,13.88Z"
+  }));
+} //  content-save from https://materialdesignicons.com/
+
+
+function Save(props) {
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, props, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "currentColor",
+    d: "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"
+  }));
+} //  dna from https://materialdesignicons.com/
+
+
+function DNA(props) {
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, props, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "currentColor",
+    d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z"
+  }));
+}
+
+function Cable(props) {
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
+  }));
 }

package/ui/Logo.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Logomark = Logomark;
 exports.LogoFull = LogoFull;
+exports.Logomark = Logomark;
 
 var _react = _interopRequireDefault(require("react"));
 

package/ui/PrerenderedCanvas.d.ts

@@ -7,6 +7,7 @@ declare function PrerenderedCanvas(props: {
     style: any;
     imageData: any;
     showSoftClip?: boolean;
+    blockKey?: string;
 }): JSX.Element;
 declare namespace PrerenderedCanvas {
     var propTypes: {

package/ui/PrerenderedCanvas.js

@@ -33,6 +33,7 @@ function PrerenderedCanvas(props) {
       highResolutionScaling = props.highResolutionScaling,
       style = props.style,
       imageData = props.imageData,
+      blockKey = props.blockKey,
       showSoftClip = props.showSoftClip;
   var featureCanvas = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -78,8 +79,10 @@ function PrerenderedCanvas(props) {
     }
   }, [imageData]);
   var softClipString = showSoftClip ? '_softclipped' : '';
+  var blockKeyStr = blockKey ? '_' + blockKey : '';
+  var testId = "prerendered_canvas".concat(softClipString).concat(blockKeyStr);
   return /*#__PURE__*/_react.default.createElement("canvas", {
-    "data-testid": "prerendered_canvas".concat(softClipString),
+    "data-testid": testId,
     ref: featureCanvas,
     width: width * highResolutionScaling,
     height: height * highResolutionScaling,

package/ui/ResizeHandle.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-interface ResizeHandleProps {
+declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, ...props }: {
     onDrag: (arg: number) => number;
     vertical?: boolean;
     flexbox?: boolean;
     className?: string;
     [props: string]: unknown;
-}
-declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, ...props }: ResizeHandleProps): JSX.Element;
+}): JSX.Element;
 export default ResizeHandle;

package/ui/ResizeHandle.js

@@ -15,12 +15,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _styles = require("@material-ui/core/styles");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _excluded = ["onDrag", "vertical", "flexbox", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -67,12 +67,12 @@ function ResizeHandle(_ref) {
   (0, _react.useEffect)(function () {
     function mouseMove(event) {
       event.preventDefault();
-      var pos = event[vertical ? 'clientX' : 'clientY'];
+      var pos = vertical ? event.clientX : event.clientY;
       var distance = pos - prevPos.current;
 
       if (distance) {
-        var actualDistance = onDrag(distance);
-        prevPos.current += actualDistance;
+        onDrag(distance);
+        prevPos.current = pos;
       }
     }
 
@@ -109,8 +109,7 @@ function ResizeHandle(_ref) {
     "data-resizer": "true",
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
-      var pos = event[vertical ? 'clientX' : 'clientY'];
-      prevPos.current = pos;
+      prevPos.current = vertical ? event.clientX : event.clientY;
       setMouseDragging(true);
     },
     role: "presentation",

package/ui/SanitizedHTML.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isHTML = isHTML;
 exports.default = SanitizedHTML;
+exports.isHTML = isHTML;
 
 var _react = _interopRequireDefault(require("react"));
 

package/ui/Snackbar.js

@@ -11,9 +11,9 @@ exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _Snackbar = _interopRequireDefault(require("@material-ui/core/Snackbar"));
+var _core = require("@material-ui/core");
 
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
@@ -21,8 +21,6 @@ var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
 
 var _mobxReact = require("mobx-react");
 
-var _react = _interopRequireWildcard(require("react"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -80,10 +78,10 @@ function MessageSnackbar(_ref) {
       message = _ref3[0],
       level = _ref3[1];
 
-  return /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
+  return /*#__PURE__*/_react.default.createElement(_core.Snackbar, {
     open: open && !!message,
     onClose: handleClose,
-    action: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    action: /*#__PURE__*/_react.default.createElement(_core.IconButton, {
       "aria-label": "close",
       color: "inherit",
       onClick: handleClose

package/ui/SnackbarModel.d.ts

@@ -0,0 +1,16 @@
+import { IModelType, ModelProperties } from 'mobx-state-tree';
+import { IObservableArray } from 'mobx';
+import { NotificationLevel } from '../util/types';
+declare function makeExtension(snackbarMessages: IObservableArray<any>): {
+    views: {
+        readonly snackbarMessages: IObservableArray<any>;
+    };
+    actions: {
+        notify(message: string, level?: NotificationLevel | undefined): void;
+        pushSnackbarMessage(message: string, level?: NotificationLevel | undefined): number;
+        popSnackbarMessage(): any;
+        removeSnackbarMessage(message: string): void;
+    };
+};
+export default function addSnackbarToModel<PROPS extends ModelProperties, OTHERS>(tree: IModelType<PROPS, OTHERS>): IModelType<PROPS, OTHERS & ReturnType<typeof makeExtension>['actions'] & ReturnType<typeof makeExtension>['views']>;
+export {};

package/ui/SnackbarModel.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = addSnackbarToModel;
+
+var _mobx = require("mobx");
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeExtension(snackbarMessages) {
+  return {
+    views: {
+      get snackbarMessages() {
+        return snackbarMessages;
+      }
+
+    },
+    actions: {
+      notify: function notify(message, level) {
+        var _this = this;
+
+        this.pushSnackbarMessage(message, level);
+
+        if (level === 'info' || level === 'success') {
+          setTimeout(function () {
+            _this.removeSnackbarMessage(message);
+          }, 5000);
+        }
+      },
+      pushSnackbarMessage: function pushSnackbarMessage(message, level) {
+        return snackbarMessages.push([message, level]);
+      },
+      popSnackbarMessage: function popSnackbarMessage() {
+        return snackbarMessages.pop();
+      },
+      removeSnackbarMessage: function removeSnackbarMessage(message) {
+        var element = snackbarMessages.find(function (f) {
+          return f[0] === message;
+        });
+
+        if (element) {
+          snackbarMessages.remove(element);
+        }
+      }
+    }
+  };
+}
+
+function addSnackbarToModel(tree) {
+  return tree.extend(function () {
+    var snackbarMessages = _mobx.observable.array();
+
+    return makeExtension(snackbarMessages);
+  });
+}

package/ui/Tooltip.d.ts

@@ -4,7 +4,7 @@ declare const _default: ({ offsetX, offsetY, configuration, feature, timeout, }:
     offsetX: number;
     offsetY: number;
     configuration: import("mobx-state-tree").ModelInstanceTypeProps<Record<string, any>> & {
-        setSubschema(slotName: string, data: import("mobx-state-tree").ModelPropertiesDeclaration | import("../configuration/configurationSchema").AnyConfigurationSchemaType): any;
+        setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<import("../configuration/configurationSchema").AnyConfigurationSchemaType>;
     feature?: Feature | undefined;
     timeout?: number | undefined;