@searpent/react-image-annotate 2.0.5 → 2.0.8

package/Editor/annotation-plugin/annotation.js

@@ -0,0 +1,613 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+
+/**
+ * Build styles
+ */
+require('./annotation.css').toString(); // Possible classes
+// ================
+
+
+var Annotation =
+/*#__PURE__*/
+function () {
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   *
+   * @param {{data: HeaderData, config: HeaderConfig, api: object}}
+   *   data — previously saved data
+   *   config - user config for Tool
+   *   api - Editor.js API
+   *   readOnly - read only mode flag
+   */
+  function Annotation(_ref) {
+    var data = _ref.data,
+        config = _ref.config,
+        api = _ref.api,
+        readOnly = _ref.readOnly;
+
+    _classCallCheck(this, Annotation);
+
+    this.api = api;
+    this.readOnly = readOnly;
+    /**
+     * Styles
+     *
+     * @type {object}
+     */
+
+    this._CSS = {
+      block: this.api.styles.block,
+      settingsButton: this.api.styles.settingsButton,
+      settingsButtonActive: this.api.styles.settingsButtonActive,
+      wrapper: 'ce-header'
+    };
+    /**
+     * Tool's settings passed from Editor
+     *
+     * @type {HeaderConfig}
+     * @private
+     */
+
+    this._settings = config;
+    /**
+     * Block's data
+     *
+     * @type {HeaderData}
+     * @private
+     */
+
+    this._data = this.normalizeData(data);
+    /**
+     * List of settings buttons
+     *
+     * @type {HTMLElement[]}
+     */
+
+    this.settingsButtons = [];
+    /**
+     * Main Block wrapper
+     *
+     * @type {HTMLElement}
+     * @private
+     */
+
+    this._element = this.getTag();
+  }
+  /**
+   * Normalize input data
+   *
+   * @param {HeaderData} data - saved data to process
+   *
+   * @returns {HeaderData}
+   * @private
+   */
+
+
+  _createClass(Annotation, [{
+    key: "normalizeData",
+    value: function normalizeData(data) {
+      var newData = {};
+
+      if (typeof data !== 'object') {
+        data = {};
+      }
+
+      newData.text = data.text || '';
+      newData.labelName = data.labelName || this.defaultLabel.labelName;
+      return newData;
+    }
+    /**
+     * Return Tool's view
+     *
+     * @returns {HTMLHeadingElement}
+     * @public
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      return this._element;
+    }
+    /**
+     * Create Block's settings block
+     *
+     * @returns {HTMLElement}
+     */
+
+  }, {
+    key: "renderSettings",
+    value: function renderSettings() {
+      var _this = this;
+
+      var holder = document.createElement('DIV'); // do not add settings button, when only one label is configured
+
+      if (this.labels.length <= 1) {
+        return holder;
+      }
+      /** Add type selectors */
+
+
+      this.labels.forEach(function (label) {
+        var selectTypeButton = document.createElement('DIV');
+        selectTypeButton.classList.add(_this._CSS.settingsButton);
+        /**
+         * Highlight current label button
+         */
+
+        if (_this.currentLabel.labelName === label.labelName) {
+          selectTypeButton.classList.add(_this._CSS.settingsButtonActive);
+        }
+        /**
+         * Add SVG icon
+         */
+
+
+        selectTypeButton.innerHTML = "".concat(label.labelName);
+        /**
+         * Save label to its button
+         */
+
+        selectTypeButton.dataset.labelName = label.labelName;
+        /**
+         * Set up click handler
+         */
+
+        selectTypeButton.addEventListener('click', function () {
+          _this.setLabelName(label.labelName);
+        });
+        /**
+         * Append settings button to holder
+         */
+
+        holder.appendChild(selectTypeButton);
+        /**
+         * Save settings buttons
+         */
+
+        _this.settingsButtons.push(selectTypeButton);
+      });
+      return holder;
+    }
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {labelName} labelName - labelName to set
+     */
+
+  }, {
+    key: "setLabelName",
+    value: function setLabelName(labelName) {
+      var _this2 = this;
+
+      this.data = {
+        labelName: labelName,
+        text: this.data.text
+      };
+      /**
+       * Highlight button by selected labelName
+       */
+
+      this.settingsButtons.forEach(function (button) {
+        button.classList.toggle(_this2._CSS.settingsButtonActive, button.dataset.labelName === labelName);
+      });
+    }
+    /**
+     * Method that specified how to merge two Text blocks.
+     * Called by Editor.js by backspace at the beginning of the Block
+     *
+     * @param {HeaderData} data - saved data to merger with current block
+     * @public
+     */
+
+  }, {
+    key: "merge",
+    value: function merge(data) {
+      var newData = {
+        text: this.data.text + data.text,
+        labelName: this.data.labelName
+      };
+      this.data = newData;
+    }
+    /**
+     * Validate Text block data:
+     * - check for emptiness
+     *
+     * @param {HeaderData} blockData — data received after saving
+     * @returns {boolean} false if saved data is not correct, otherwise true
+     * @public
+     */
+
+  }, {
+    key: "validate",
+    value: function validate(blockData) {
+      return blockData.text.trim() !== '';
+    }
+    /**
+     * Extract Tool's data from the view
+     *
+     * @param {HTMLHeadingElement} toolsContent - Text tools rendered view
+     * @returns {HeaderData} - saved data
+     * @public
+     */
+
+  }, {
+    key: "save",
+    value: function save(toolsContent) {
+      return {
+        text: toolsContent.innerHTML,
+        labelName: this.currentLabel.labelName
+      };
+    }
+    /**
+     * Allow Header to be converted to/from other blocks
+     */
+
+  }, {
+    key: "getTag",
+
+    /**
+     * Get tag for target label
+     * By default returns second-labelled header
+     *
+     * @returns {HTMLElement}
+     */
+    value: function getTag() {
+      /**
+       * Create element for current Block's label
+       */
+      var tag = document.createElement(this.currentLabel.tag);
+
+      if (this.currentLabel.backgroundColor) {
+        tag.style.backgroundColor = this.currentLabel.backgroundColor;
+      }
+      /**
+       * Add text to block
+       */
+
+
+      tag.innerHTML = this._data.text || '';
+      /**
+       * Add styles class
+       */
+
+      tag.classList.add(this._CSS.wrapper);
+      /**
+       * Make tag editable
+       */
+
+      tag.contentEditable = this.readOnly ? 'false' : 'true';
+      /**
+       * Add Placeholder
+       */
+
+      tag.dataset.placeholder = this.api.i18n.t(this._settings.placeholder || '');
+      return tag;
+    }
+    /**
+     * Get current label
+     *
+     * @returns {label}
+     */
+
+  }, {
+    key: "onPaste",
+
+    /**
+     * Handle H1-H6 tags on paste to substitute it with header Tool
+     *
+     * @param {PasteEvent} event - event with pasted content
+     */
+    value: function onPaste(event) {
+      var content = event.detail.data;
+      /**
+       * Define default label value
+       *
+       * @type {labelName}
+       */
+
+      var labelName = this.defaultLabel.labelName;
+
+      switch (content.tagName) {
+        case 'H1':
+          labelName = 1;
+          break;
+
+        case 'H2':
+          labelName = 2;
+          break;
+
+        case 'H3':
+          labelName = 3;
+          break;
+
+        case 'H4':
+          labelName = 4;
+          break;
+
+        case 'H5':
+          labelName = 5;
+          break;
+
+        case 'H6':
+          labelName = 6;
+          break;
+      } // if (this._settings.labels) {
+      //   // Fallback to nearest label when specified not available
+      //   label = this._settings.labels.reduce((prevLabel, currLabel) => {
+      //     return Math.abs(currLabel - label) < Math.abs(prevLabel - label)
+      //       ? currLabel
+      //       : prevLabel;
+      //   });
+      // }
+
+
+      this.data = {
+        labelName: labelName,
+        text: content.innerHTML
+      };
+    }
+    /**
+     * Used by Editor.js paste handling API.
+     * Provides configuration to handle H1-H6 tags.
+     *
+     * @returns {{handler: (function(HTMLElement): {text: string}), tags: string[]}}
+     */
+
+  }, {
+    key: "data",
+
+    /**
+     * Get current Tools`s data
+     *
+     * @returns {HeaderData} Current data
+     * @private
+     */
+    get: function get() {
+      this._data.text = this._element.innerHTML;
+      this._data.labelName = this.currentLabel.labelName;
+      return this._data;
+    }
+    /**
+     * Store data in plugin:
+     * - at the this._data property
+     * - at the HTML
+     *
+     * @param {HeaderData} data — data to set
+     * @private
+     */
+    ,
+    set: function set(data) {
+      this._data = this.normalizeData(data);
+      /**
+       * If labelName is set and block in DOM
+       * then replace it to a new block
+       */
+
+      if (data.labelName !== undefined && this._element.parentNode) {
+        /**
+         * Create a new tag
+         *
+         * @type {HTMLHeadingElement}
+         */
+        var newHeader = this.getTag();
+        /**
+         * Save Block's content
+         */
+
+        newHeader.innerHTML = this._element.innerHTML;
+        /**
+         * Replace blocks
+         */
+
+        this._element.parentNode.replaceChild(newHeader, this._element);
+        /**
+         * Save new block to private variable
+         *
+         * @type {HTMLHeadingElement}
+         * @private
+         */
+
+
+        this._element = newHeader;
+      }
+      /**
+       * If data.text was passed then update block's content
+       */
+
+
+      if (data.text !== undefined) {
+        this._element.innerHTML = this._data.text || '';
+      }
+    }
+  }, {
+    key: "currentLabel",
+    get: function get() {
+      var _this3 = this;
+
+      var label = this.labels.find(function (labelItem) {
+        return labelItem.labelName === _this3._data.labelName;
+      });
+
+      if (!label) {
+        label = this.defaultLabel;
+      }
+
+      return label;
+    }
+    /**
+     * Return default label
+     *
+     * @returns {label}
+     */
+
+  }, {
+    key: "defaultLabel",
+    get: function get() {
+      var _this4 = this;
+
+      /**
+       * User can specify own default label value
+       */
+      if (this._settings.defaultLabel) {
+        var userSpecified = this.labels.find(function (labelItem) {
+          return labelItem.labelName === _this4._settings.defaultLabel;
+        });
+
+        if (userSpecified) {
+          return userSpecified;
+        }
+
+        console.warn("(ง'̀-'́)ง Annotation Tool: the default label specified was not found in available labels");
+      }
+      /**
+       * With no additional options, there will be H2 by default
+       *
+       * @type {label}
+       */
+
+
+      return this.labels[1];
+    }
+    /**
+     * @typedef {object} label
+     * @property {labelName} labelName - label labelName
+     * @property {string} tag - tag corresponds with label labelName
+     * @property {string} svg - icon
+     */
+
+    /**
+     * Available header labels
+     *
+     * @returns {label[]}
+     */
+
+  }, {
+    key: "labels",
+    get: function get() {
+      var _this5 = this;
+
+      var availableLabels = [{
+        labelName: 'title',
+        tag: 'h1',
+        name: 'title' // backgroundColor: '#d0fffe'
+
+      }, {
+        labelName: 'subtitle',
+        tag: 'h2',
+        name: 'subtitle'
+      }, {
+        labelName: 'text',
+        tag: 'p',
+        name: 'text'
+      }, {
+        labelName: 'author',
+        tag: 'i',
+        name: 'author'
+      }, {
+        labelName: 'appendix',
+        tag: 'p',
+        name: 'appendix'
+      }, {
+        labelName: 'photo_author',
+        tag: 'p',
+        name: 'photo_author'
+      }, {
+        labelName: 'photo_caption',
+        tag: 'p',
+        name: 'photo_caption'
+      }, {
+        labelName: 'advertisement',
+        tag: 'p',
+        name: 'advertisement'
+      }, {
+        labelName: 'other_graphics',
+        tag: 'p',
+        name: 'other_graphics'
+      }, {
+        labelName: 'unknown',
+        tag: 's',
+        name: 'unknown'
+      }, {
+        labelName: 'about_author',
+        tag: 'p',
+        name: 'about_author'
+      }, {
+        labelName: 'image',
+        tag: 'p',
+        name: 'image'
+      }, {
+        labelName: 'interview',
+        tag: 'p',
+        name: 'interview'
+      }, {
+        labelName: 'table',
+        tag: 'p',
+        name: 'table'
+      }];
+      return this._settings.labels ? availableLabels.filter(function (l) {
+        return _this5._settings.labels.includes(l.labelName);
+      }) : availableLabels;
+    }
+  }], [{
+    key: "conversionConfig",
+    get: function get() {
+      return {
+        export: 'text',
+        // use 'text' property for other blocks
+        import: 'text' // fill 'text' property from other block's export string
+
+      };
+    }
+    /**
+     * Sanitizer Rules
+     */
+
+  }, {
+    key: "sanitize",
+    get: function get() {
+      return {
+        labelName: false,
+        text: {}
+      };
+    }
+    /**
+     * Returns true to notify core that read-only is supported
+     *
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "isReadOnlySupported",
+    get: function get() {
+      return true;
+    }
+  }, {
+    key: "pasteConfig",
+    get: function get() {
+      return {
+        tags: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6']
+      };
+    }
+    /**
+     * Get Tool toolbox settings
+     * icon - Tool icon's SVG
+     * title - title to show in toolbox
+     *
+     * @returns {{icon: string, title: string}}
+     */
+
+  }, {
+    key: "toolbox",
+    get: function get() {
+      return {
+        icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
+        title: 'Annotation'
+      };
+    }
+  }]);
+
+  return Annotation;
+}();
+
+export default Annotation;

package/Editor/index.js

@@ -0,0 +1,57 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { createReactEditorJS } from 'react-editor-js';
+import { EDITOR_JS_TOOLS } from './tools';
+var ReactEditorJS = createReactEditorJS();
+
+function Editor(_ref) {
+  var blocks = _ref.blocks,
+      onChange = _ref.onChange,
+      imageIndex = _ref.imageIndex;
+
+  var handleChange =
+  /*#__PURE__*/
+  function () {
+    var _ref2 = _asyncToGenerator(
+    /*#__PURE__*/
+    _regeneratorRuntime.mark(function _callee(instance) {
+      var data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return instance.saver.save();
+
+            case 2:
+              data = _context.sent;
+              onChange({
+                imageIndex: imageIndex,
+                data: data
+              });
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return React.createElement(ReactEditorJS, {
+    defaultValue: {
+      blocks: blocks
+    },
+    tools: EDITOR_JS_TOOLS,
+    onChange: handleChange,
+    enableReInitialize: true
+  });
+}
+
+export default Editor;

package/{src/Editor → Editor}/tools.js

@@ -1,6 +1,5 @@
 // tools.js
 import Annotation from './annotation-plugin/annotation';
-
-export const EDITOR_JS_TOOLS = {
+export var EDITOR_JS_TOOLS = {
   annotation: Annotation
-}
+};

package/FullImageSegmentationAnnotator/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+import Annotator from "../Annotator";
+export default (function (props) {
+  return React.createElement(Annotator, Object.assign({}, props, {
+    fullImageSegmentationMode: true
+  }));
+});