redhotmagma-graphics-editor 1.28.5 → 1.29.2

package/App.js

@@ -0,0 +1,423 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactHotLoader = require("react-hot-loader");
+
+var _TextEditorStateProvider = require("./Components/TextEditor/TextEditorStateProvider");
+
+var _Editor = _interopRequireDefault(require("./Components/Editor/Editor"));
+
+var _CanvasProvider = require("./CanvasInterface/CanvasProvider");
+
+var _FontSizeMin = require("./CanvasAdapters/PaperJs/Modifiers/FontSizeMin");
+
+var _CanvasRepository = require("./CanvasAdapters/PaperJs/CanvasRepository");
+
+var _EditorContainer = _interopRequireDefault(require("./Components/Editor/EditorContainer"));
+
+var _excluded = ["children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+console.warn('Do not use this App component directly! It was made only for development and demo purposes!');
+var canvasRepository = (0, _CanvasRepository.createCanvasRepository)();
+
+canvasRepository.onCreate = function (canvas) {
+  return console.log('Canvas is ready', canvas);
+}; // expose canvasRepository to window
+
+
+window.canvasRepository = canvasRepository;
+var canvases = {
+  c1: {
+    width: 100,
+    height: 80,
+    dpi: 300,
+    isMetric: true
+  },
+  c2: {
+    width: 300,
+    height: 600
+  }
+};
+var maskDataSamples = [{
+  id: 'iphone',
+  src: 'assets/iphone-mask.svg',
+  x: 0.5,
+  y: 0.5,
+  rotation: 0,
+  scaling: 1.5,
+  outlineColor: 'red',
+  relativeScaling: 0.5
+}, {
+  id: 'circle',
+  src: 'assets/circle-mask.svg',
+  x: 0.5,
+  y: 0.5,
+  rotation: 0,
+  scaling: 5,
+  relativeScaling: 1,
+  outlineColor: 'green'
+}, {
+  id: 'clip',
+  src: 'assets/clip-mask.svg',
+  x: 0.5,
+  y: 0.5,
+  rotation: 0,
+  scaling: 1,
+  relativeScaling: 1,
+  outlineColor: 'red'
+}];
+var fontToFileMap = {
+  'sans-serif': {
+    regular: '/fonts/Arcon-Regular.otf'
+  },
+  'Arial, Helvetica, sans-serif': {
+    regular: '/fonts/Arcon-Regular.otf',
+    bold: '/fonts/Arcon-Regular.otf'
+  }
+};
+var styles = {
+  demoWrapper: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    background: 'yellow',
+    padding: 10
+  },
+  demoGroup: {
+    marginTop: 5
+  },
+  demoLabel: {
+    padding: '0 5px'
+  },
+  demoExtraContent: {
+    position: 'absolute',
+    top: 100,
+    fontSize: 20
+  }
+};
+
+var CustomEditorContainer = function CustomEditorContainer(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_EditorContainer["default"], props, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.demoExtraContent
+  }, "This is how to add extra content inside the EditorContainer"), children);
+};
+
+var CanvasSelect = function CanvasSelect(_ref2) {
+  var onChange = _ref2.onChange;
+  return Object.keys(canvases).map(function (id, i) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: i,
+      onClick: onChange,
+      value: id
+    }, id);
+  });
+};
+
+var MaskSelect = function MaskSelect(_ref3) {
+  var onChange = _ref3.onChange;
+  return /*#__PURE__*/_react["default"].createElement("select", {
+    name: "maskData",
+    onChange: onChange
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    value: ""
+  }, "Choose mask"), maskDataSamples.map(function (maskData, i) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: i,
+      value: maskData.name
+    }, maskData.id);
+  }));
+};
+
+var App = /*#__PURE__*/function (_React$Component) {
+  _inherits(App, _React$Component);
+
+  var _super = _createSuper(App);
+
+  function App() {
+    var _this;
+
+    _classCallCheck(this, App);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      canvasInstance: canvasRepository.requestCanvas('c1', canvases.c1)
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "mockUploadFunction", function (files) {
+      return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+
+        reader.onload = function () {
+          var dataURL = reader.result;
+          resolve([{
+            src: dataURL
+          }]);
+        };
+
+        reader.onerror = reject;
+        reader.readAsDataURL(files[0]);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "saveCanvasData", function () {
+      var canvasData = canvasRepository.getActiveCanvas().toObject(true, {
+        includeObjects: true
+      });
+
+      if (window.localStorage) {
+        localStorage.setItem('savedCanvasData', canvasData);
+        console.log('canvas saved!');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "loadCanvasData", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var canvasData;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!window.localStorage) {
+                _context.next = 13;
+                break;
+              }
+
+              _context.prev = 1;
+              canvasData = JSON.parse(localStorage.getItem('savedCanvasData'));
+
+              if (!canvasData) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.next = 6;
+              return canvasRepository.getActiveCanvas().fromObject(canvasData);
+
+            case 6:
+              console.log('canvas loaded!');
+
+            case 7:
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](1);
+              console.error(_context.t0);
+              alert('Could not load data!');
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 9]]);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "setFontSizeMin", function () {
+      return (0, _FontSizeMin.applyFontSizeMin)(canvasRepository.getActiveCanvas(), 20);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearCanvas", function () {
+      return canvasRepository.getActiveCanvas().clear();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "switchCanvas", function (_ref5) {
+      var value = _ref5.target.value;
+
+      _this.setState({
+        canvasInstance: canvasRepository.requestCanvas(value, canvases[value])
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "screenshotToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var screenshot;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              console.time('screenshot');
+              _context2.next = 3;
+              return canvasRepository.getActiveCanvas().getScreenshot(fontToFileMap);
+
+            case 3:
+              screenshot = _context2.sent;
+              console.log('Screenshot:', screenshot);
+              console.timeEnd('screenshot');
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "screenshotsToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var elements;
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return canvasRepository.getActiveCanvas().getScreenshotsOfElements(fontToFileMap);
+
+            case 2:
+              elements = _context3.sent;
+              console.log(elements);
+
+            case 4:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "onMaskSelected", /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(_ref9) {
+        var value, maskHandler, maskData;
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                value = _ref9.target.value;
+                maskHandler = canvasRepository.getActiveCanvas().getMaskHandler();
+
+                if (!value) {
+                  _context4.next = 6;
+                  break;
+                }
+
+                maskData = maskDataSamples.filter(function (_ref10) {
+                  var id = _ref10.id;
+                  return id === value;
+                })[0];
+                _context4.next = 6;
+                return canvasRepository.getActiveCanvas().useMask(maskData);
+
+              case 6:
+                maskHandler && maskHandler.dispose();
+
+              case 7:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x) {
+        return _ref8.apply(this, arguments);
+      };
+    }());
+
+    return _this;
+  }
+
+  _createClass(App, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasProvider, {
+        canvas: this.state.canvasInstance
+      }, /*#__PURE__*/_react["default"].createElement(_TextEditorStateProvider.TextEditorStateProvider, {
+        defaultStyle: {
+          fontSize: '16px',
+          color: {
+            value: 'rgb(247, 52, 41)',
+            identifier: '{"color": "red", "palette": "f73429"}'
+          }
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Editor["default"], {
+        upload: this.mockUploadFunction,
+        EditorContainer: CustomEditorContainer,
+        fillContainer: true
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: styles.demoWrapper
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: styles.demoLabel
+      }, "Demo features"), /*#__PURE__*/_react["default"].createElement("div", {
+        style: styles.demoGroup
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: styles.demoLabel
+      }, "Canvas repository"), /*#__PURE__*/_react["default"].createElement(CanvasSelect, {
+        onChange: this.switchCanvas
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: styles.demoGroup
+      }, /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: this.saveCanvasData
+      }, "Save data"), /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: this.loadCanvasData
+      }, "Load data"), /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: this.clearCanvas
+      }, "Clear canvas")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: styles.demoGroup
+      }, /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: this.setFontSizeMin
+      }, "Set fontSizeMin to 20")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: styles.demoGroup
+      }, /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: this.screenshotToConsole
+      }, "Screenshot to console"), /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: this.screenshotsToConsole
+      }, "Screenshots of Elements")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: styles.demoGroup
+      }, /*#__PURE__*/_react["default"].createElement(MaskSelect, {
+        onChange: this.onMaskSelected
+      })))));
+    }
+  }]);
+
+  return App;
+}(_react["default"].Component);
+
+var _default = (0, _reactHotLoader.hot)(module)(App);
+
+exports["default"] = _default;

package/CanvasAdapters/Mock/Canvas.js

@@ -0,0 +1,200 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Canvas = void 0;
+
+var _Canvas = require("../../CanvasInterface/Canvas");
+
+var _Group = require("./Objects/Group");
+
+var _Image = require("./Objects/Image");
+
+var _Text = require("./Objects/Text");
+
+var _Logger = _interopRequireDefault(require("../../Utils/Logger"));
+
+var _excluded = ["type"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var logger = new _Logger["default"]('Canvas');
+
+var Canvas = /*#__PURE__*/function (_AbstractCanvas) {
+  _inherits(Canvas, _AbstractCanvas);
+
+  var _super = _createSuper(Canvas);
+
+  function Canvas() {
+    _classCallCheck(this, Canvas);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Canvas, [{
+    key: "addText",
+    value: function addText(options) {
+      var text = new _Text.Text(options);
+      this.add(text);
+      return text;
+    }
+  }, {
+    key: "addImage",
+    value: function () {
+      var _addImage = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(options) {
+        var src, image;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                src = options.src;
+                image = new _Image.Image(options);
+
+                if (!src) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 5;
+                return image.loadFromURL(src);
+
+              case 5:
+                this.add(image);
+                logger.log('Image has been added.', image);
+                return _context.abrupt("return", image);
+
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function addImage(_x) {
+        return _addImage.apply(this, arguments);
+      }
+
+      return addImage;
+    }()
+  }, {
+    key: "addGroup",
+    value: function () {
+      var _addGroup = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(options) {
+        var src, group;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                src = options.src;
+                group = new _Group.Group(options);
+
+                if (!src) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                _context2.next = 5;
+                return group.loadFromURL(src);
+
+              case 5:
+                this.add(group);
+                logger.log('Group has been added.', group);
+                return _context2.abrupt("return", group);
+
+              case 8:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function addGroup(_x2) {
+        return _addGroup.apply(this, arguments);
+      }
+
+      return addGroup;
+    }()
+  }, {
+    key: "addItemFromObject",
+    value: function () {
+      var _addItemFromObject = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(options) {
+        var type, props;
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                type = options.type, props = _objectWithoutProperties(options, _excluded);
+                _context3.t0 = type;
+                _context3.next = _context3.t0 === 'Image' ? 4 : _context3.t0 === 'Group' ? 7 : _context3.t0 === 'Text' ? 10 : 11;
+                break;
+
+              case 4:
+                _context3.next = 6;
+                return this.addImage(props);
+
+              case 6:
+                return _context3.abrupt("return", _context3.sent);
+
+              case 7:
+                _context3.next = 9;
+                return this.addGroup(props);
+
+              case 9:
+                return _context3.abrupt("return", _context3.sent);
+
+              case 10:
+                return _context3.abrupt("return", this.addText(props));
+
+              case 11:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function addItemFromObject(_x3) {
+        return _addItemFromObject.apply(this, arguments);
+      }
+
+      return addItemFromObject;
+    }()
+  }]);
+
+  return Canvas;
+}(_Canvas.AbstractCanvas);
+
+exports.Canvas = Canvas;