@modusoperandi/licit 0.13.25 → 0.14.0

package/dist/ui/ImageNodeView.js

@@ -4,56 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _prosemirrorModel = require("prosemirror-model");
-
 var _prosemirrorView = require("prosemirror-view");
-
 var _prosemirrorState = require("prosemirror-state");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _CustomNodeView = _interopRequireWildcard(require("./CustomNodeView"));
-
 var _EditorFrameset = require("./EditorFrameset");
-
 var _Icon = _interopRequireDefault(require("./Icon"));
-
 var _ImageInlineEditor = _interopRequireDefault(require("./ImageInlineEditor"));
-
 var _ImageResizeBox = _interopRequireWildcard(require("./ImageResizeBox"));
-
 var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
-
 var _ResizeObserver = _interopRequireWildcard(require("./ResizeObserver"));
-
 var _resolveImage = _interopRequireDefault(require("./resolveImage"));
-
 var _uuid = _interopRequireDefault(require("./uuid"));
-
 require("./czi-image-view.css");
-
 var _Types = require("../Types");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const EMPTY_SRC = 'data:image/gif;base64,' + 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-/* This value must be synced with the margin defined at .czi-image-view */
 
+/* This value must be synced with the margin defined at .czi-image-view */
 const IMAGE_MARGIN = 2;
 const MAX_SIZE = 100000;
 const IMAGE_PLACEHOLDER_SIZE = 24;
@@ -62,67 +40,52 @@ const DEFAULT_ORIGINAL_SIZE = {
   complete: false,
   height: 0,
   width: 0
-}; // Get the maxWidth that the image could be resized to.
+};
 
+// Get the maxWidth that the image could be resized to.
 function getMaxResizeWidth(el) {
   // Ideally, the image should bot be wider then its containing element.
   let node = el.parentElement;
-
   while (node && !node.offsetParent) {
     node = node.parentElement;
   }
-
   if (node && node.offsetParent && node.offsetParent.offsetWidth && node.offsetParent.offsetWidth > 0) {
     const {
       offsetParent
     } = node;
     const style = el.ownerDocument.defaultView.getComputedStyle(offsetParent);
     let width = offsetParent.clientWidth - IMAGE_MARGIN * 2;
-
     if (style.boxSizing === 'border-box') {
       const pl = parseInt(style.paddingLeft, 10);
       const pr = parseInt(style.paddingRight, 10);
       width -= pl + pr;
     }
-
     return Math.max(width, _ImageResizeBox.MIN_SIZE);
-  } // Let the image resize freely.
-
-
+  }
+  // Let the image resize freely.
   return MAX_SIZE;
 }
-
 async function resolveURL(runtime, src) {
   if (!runtime) {
     return src;
   }
-
   const {
     canProxyImageSrc,
     getProxyImageSrc
   } = runtime;
-
   if (src && canProxyImageSrc && getProxyImageSrc && canProxyImageSrc(src)) {
     return await getProxyImageSrc(src);
   }
-
   return src;
 }
-
 class ImageViewBody extends React.PureComponent {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "props", void 0);
-
     _defineProperty(this, "_body", null);
-
     _defineProperty(this, "_id", (0, _uuid.default)());
-
     _defineProperty(this, "_inlineEditor", null);
-
     _defineProperty(this, "_mounted", false);
-
     _defineProperty(this, "state", {
       maxSize: {
         width: MAX_SIZE,
@@ -131,40 +94,33 @@ class ImageViewBody extends React.PureComponent {
       },
       originalSize: DEFAULT_ORIGINAL_SIZE
     });
-
     _defineProperty(this, "_resolveOriginalSize", async () => {
       if (!this._mounted) {
         // unmounted;
         return;
       }
-
       this.setState({
         originalSize: DEFAULT_ORIGINAL_SIZE
       });
       const src = this.props.node.attrs.src;
       const url = await resolveURL(this.props.editorView.runtime, src);
       const originalSize = await (0, _resolveImage.default)(url);
-
       if (!this._mounted) {
         // unmounted;
         return;
       }
-
       if (this.props.node.attrs.src !== src) {
         // src had changed.
         return;
       }
-
       if (!originalSize.complete) {
         originalSize.width = _ImageResizeBox.MIN_SIZE;
         originalSize.height = _ImageResizeBox.MIN_SIZE;
       }
-
       this.setState({
         originalSize
       });
     });
-
     _defineProperty(this, "_onResizeEnd", (width, height) => {
       const {
         getPos,
@@ -172,33 +128,28 @@ class ImageViewBody extends React.PureComponent {
         editorView
       } = this.props;
       const pos = getPos();
-
       const attrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
         // TODO: Support UI for cropping later.
         crop: null,
         width,
         height
       });
-
       let tr = editorView.state.tr;
       const {
         selection
       } = editorView.state;
-      tr = tr.setNodeMarkup(pos, null, attrs); // [FS] IRAD-1005 2020-07-09
+      tr = tr.setNodeMarkup(pos, null, attrs);
+      // [FS] IRAD-1005 2020-07-09
       // Upgrade outdated packages.
       // reset selection to original using the latest doc.
-
       const origSelection = _prosemirrorState.NodeSelection.create(tr.doc, selection.from);
-
       tr = tr.setSelection(origSelection);
       editorView.dispatch(tr);
     });
-
     _defineProperty(this, "_onChange", value => {
       if (!this._mounted) {
         return;
       }
-
       const align = value ? value.align : null;
       const {
         getPos,
@@ -206,46 +157,38 @@ class ImageViewBody extends React.PureComponent {
         editorView
       } = this.props;
       const pos = getPos();
-
       const attrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
         align
       });
-
       let tr = editorView.state.tr;
       const {
         selection
       } = editorView.state;
-      tr = tr.setNodeMarkup(pos, null, attrs); // [FS] IRAD-1005 2020-07-09
+      tr = tr.setNodeMarkup(pos, null, attrs);
+      // [FS] IRAD-1005 2020-07-09
       // Upgrade outdated packages.
       // reset selection to original using the latest doc.
-
       const origSelection = _prosemirrorState.NodeSelection.create(tr.doc, selection.from);
-
       tr = tr.setSelection(origSelection);
       editorView.dispatch(tr);
     });
-
     _defineProperty(this, "_onBodyRef", ref => {
       if (ref) {
-        this._body = ref; // Mounting
-
+        this._body = ref;
+        // Mounting
         const el = _reactDom.default.findDOMNode(ref);
-
         if (el instanceof HTMLElement) {
           _ResizeObserver.default.observe(el, this._onBodyResize);
         }
       } else {
         // Unmounting.
         const el = this._body && _reactDom.default.findDOMNode(this._body);
-
         if (el instanceof HTMLElement) {
           _ResizeObserver.default.unobserve(el);
         }
-
         this._body = null;
       }
     });
-
     _defineProperty(this, "_onBodyResize", info => {
       const width = this._body ? getMaxResizeWidth(_reactDom.default.findDOMNode(this._body)) : MAX_SIZE;
       this.setState({
@@ -257,21 +200,16 @@ class ImageViewBody extends React.PureComponent {
       });
     });
   }
-
   componentDidMount() {
     this._mounted = true;
-
     this._resolveOriginalSize();
-
     this._renderInlineEditor();
   }
-
   componentWillUnmount() {
     this._mounted = false;
     this._inlineEditor && this._inlineEditor.close();
     this._inlineEditor = null;
   }
-
   componentDidUpdate(prevProps) {
     const prevSrc = prevProps.node.attrs.src;
     const {
@@ -280,15 +218,12 @@ class ImageViewBody extends React.PureComponent {
     const {
       src
     } = node.attrs;
-
     if (prevSrc !== src) {
       // A new image is provided, resolve it.
       this._resolveOriginalSize();
     }
-
     this._renderInlineEditor();
   }
-
   render() {
     const {
       originalSize,
@@ -310,8 +245,9 @@ class ImageViewBody extends React.PureComponent {
       align,
       crop,
       rotate
-    } = attrs; // It's only active when the image's fully loaded.
+    } = attrs;
 
+    // It's only active when the image's fully loaded.
     const loading = originalSize === DEFAULT_ORIGINAL_SIZE;
     const active = !loading && focused && !readOnly && originalSize.complete;
     const src = originalSize.complete ? originalSize.src : EMPTY_SRC;
@@ -321,12 +257,10 @@ class ImageViewBody extends React.PureComponent {
       width,
       height
     } = attrs;
-
     if (loading) {
       width = width || IMAGE_PLACEHOLDER_SIZE;
       height = height || IMAGE_PLACEHOLDER_SIZE;
     }
-
     if (width && !height) {
       height = width / aspectRatio;
     } else if (height && !width) {
@@ -335,9 +269,7 @@ class ImageViewBody extends React.PureComponent {
       width = originalSize.width;
       height = originalSize.height;
     }
-
     let scale = 1;
-
     if (width > maxSize.width && (!crop || crop.width > maxSize.width)) {
       // Scale image to fit its containing space.
       // If the image is not cropped.
@@ -345,7 +277,6 @@ class ImageViewBody extends React.PureComponent {
       height = width / aspectRatio;
       scale = maxSize.width / width;
     }
-
     const className = (0, _classnames.default)('czi-image-view-body', {
       active,
       error,
@@ -368,10 +299,8 @@ class ImageViewBody extends React.PureComponent {
       position: 'relative'
     };
     const clipStyle = {};
-
     if (crop) {
       const cropped = _objectSpread({}, crop);
-
       if (scale !== 1) {
         scale = maxSize.width / cropped.width;
         cropped.width *= scale;
@@ -379,17 +308,14 @@ class ImageViewBody extends React.PureComponent {
         cropped.left *= scale;
         cropped.top *= scale;
       }
-
       clipStyle.width = cropped.width + 'px';
       clipStyle.height = cropped.height + 'px';
       imageStyle.left = cropped.left + 'px';
       imageStyle.top = cropped.top + 'px';
     }
-
     if (rotate) {
       clipStyle.transform = `rotate(${rotate}rad)`;
     }
-
     const errorView = error ? _Icon.default.get('error') : null;
     const errorTitle = error ? `Unable to load image from ${attrs.src || ''}` : undefined;
     return /*#__PURE__*/React.createElement("span", {
@@ -414,15 +340,12 @@ class ImageViewBody extends React.PureComponent {
       width: width
     }), errorView)), resizeBox);
   }
-
   _renderInlineEditor() {
     const el = document.getElementById(this._id);
-
     if (!el || el.getAttribute('data-active') !== 'true') {
       this._inlineEditor && this._inlineEditor.close();
       return;
     }
-
     const {
       node
     } = this.props;
@@ -430,7 +353,6 @@ class ImageViewBody extends React.PureComponent {
       value: node.attrs,
       onSelect: this._onChange
     };
-
     if (this._inlineEditor) {
       this._inlineEditor.update(editorProps);
     } else {
@@ -445,48 +367,37 @@ class ImageViewBody extends React.PureComponent {
       });
     }
   }
-
 }
-
 class ImageNodeView extends _CustomNodeView.default {
   // @override
   createDOMElement() {
     const el = document.createElement('span');
     el.className = 'czi-image-view';
-
     this._updateDOM(el);
-
     return el;
-  } // @override
-
+  }
 
+  // @override
   update(node, decorations) {
     super.update(node, decorations);
-
     this._updateDOM(this.dom);
-
     return true;
-  } // @override
-
+  }
 
+  // @override
   renderReactComponent() {
     return /*#__PURE__*/React.createElement(ImageViewBody, this.props);
   }
-
   _updateDOM(el) {
     const {
       align
     } = this.props.node.attrs;
     let className = 'czi-image-view';
-
     if (align) {
       className += ' align-' + align;
     }
-
     el.className = className;
   }
-
 }
-
 var _default = ImageNodeView;
 exports.default = _default;

package/dist/ui/ImageResizeBox.js

@@ -4,45 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MIN_SIZE = exports.MAX_SIZE = void 0;
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _nullthrows = _interopRequireDefault(require("nullthrows"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
-
 var _uuid = _interopRequireDefault(require("./uuid"));
-
 require("./czi-image-resize-box.css");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const MIN_SIZE = 20;
 exports.MIN_SIZE = MIN_SIZE;
 const MAX_SIZE = 10000;
 exports.MAX_SIZE = MAX_SIZE;
-
 function setWidth(el, width, height) {
   el.style.width = width + 'px';
 }
-
 function setHeight(el, width, height) {
   el.style.height = height + 'px';
 }
-
 function setSize(el, width, height) {
   el.style.width = Math.round(width) + 'px';
   el.style.height = Math.round(height) + 'px';
 }
-
 const ResizeDirection = {
   top: setHeight,
   top_right: setSize,
@@ -53,40 +40,25 @@ const ResizeDirection = {
   left: setWidth,
   top_left: setSize
 };
-
 class ImageResizeBoxControl extends React.PureComponent {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "props", void 0);
-
     _defineProperty(this, "_active", false);
-
     _defineProperty(this, "_el", null);
-
     _defineProperty(this, "_h", '');
-
     _defineProperty(this, "_rafID", 0);
-
     _defineProperty(this, "_w", '');
-
     _defineProperty(this, "_x1", 0);
-
     _defineProperty(this, "_x2", 0);
-
     _defineProperty(this, "_y1", 0);
-
     _defineProperty(this, "_y2", 0);
-
     _defineProperty(this, "_ww", 0);
-
     _defineProperty(this, "_hh", 0);
-
     _defineProperty(this, "_syncSize", () => {
       if (!this._active) {
         return;
       }
-
       const {
         direction,
         width,
@@ -99,26 +71,20 @@ class ImageResizeBoxControl extends React.PureComponent {
       const aspect = width / height;
       let ww = (0, _licitUiCommands.clamp)(MIN_SIZE, width + Math.round(dx), MAX_SIZE);
       let hh = (0, _licitUiCommands.clamp)(MIN_SIZE, height + Math.round(dy), MAX_SIZE);
-
       if (fn === setSize) {
         hh = Math.max(ww / aspect, MIN_SIZE);
         ww = hh * aspect;
       }
-
       fn(el, Math.round(ww), Math.round(hh));
       this._ww = ww;
       this._hh = hh;
     });
-
     _defineProperty(this, "_onMouseDown", e => {
       e.preventDefault();
       e.stopPropagation();
-
       this._end();
-
       this._start(e);
     });
-
     _defineProperty(this, "_onMouseMove", e => {
       e.preventDefault();
       e.stopPropagation();
@@ -126,7 +92,6 @@ class ImageResizeBoxControl extends React.PureComponent {
       this._y2 = e.clientY;
       this._rafID = requestAnimationFrame(this._syncSize);
     });
-
     _defineProperty(this, "_onMouseUp", e => {
       e.preventDefault();
       e.stopPropagation();
@@ -137,17 +102,13 @@ class ImageResizeBoxControl extends React.PureComponent {
       } = this.props;
       const el = (0, _nullthrows.default)(this._el);
       el.classList.remove(direction);
-
       this._end();
-
       this.props.onResizeEnd(this._ww, this._hh);
     });
   }
-
   componentWillUnmount() {
     this._end();
   }
-
   render() {
     const {
       direction
@@ -161,12 +122,10 @@ class ImageResizeBoxControl extends React.PureComponent {
       onMouseDown: this._onMouseDown
     });
   }
-
   _start(e) {
     if (this._active) {
       this._end();
     }
-
     this._active = true;
     const {
       boxID,
@@ -188,12 +147,10 @@ class ImageResizeBoxControl extends React.PureComponent {
     document.addEventListener('mousemove', this._onMouseMove, true);
     document.addEventListener('mouseup', this._onMouseUp, true);
   }
-
   _end() {
     if (!this._active) {
       return;
     }
-
     this._active = false;
     document.removeEventListener('mousemove', this._onMouseMove, true);
     document.removeEventListener('mouseup', this._onMouseUp, true);
@@ -205,18 +162,13 @@ class ImageResizeBoxControl extends React.PureComponent {
     this._rafID && cancelAnimationFrame(this._rafID);
     this._rafID = null;
   }
-
 }
-
 class ImageResizeBox extends React.PureComponent {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "props", void 0);
-
     _defineProperty(this, "_id", (0, _uuid.default)());
   }
-
   render() {
     const {
       onResizeEnd,
@@ -249,8 +201,6 @@ class ImageResizeBox extends React.PureComponent {
       src: src
     }));
   }
-
 }
-
 var _default = ImageResizeBox;
 exports.default = _default;