@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

package/App/Modules/Designer/Utils/Transformers.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareCanvasData = exports.prepareObjectData = exports.prepareImageObjectData = exports.noCache = exports.getRasterURL = exports.fixSrcURL = exports.calculateScaleFactor = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
+var _configuration = require("../../../configuration");
+
+var _Selectors = require("../../../Reducers/ImageGallery/Selectors");
+
+var _DesignDataService = require("../../../Services/DesignDataService");
+
+var _excluded = ["objects"];
+
+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 _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); }
+
+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 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) { _defineProperty(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 _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; }
+
+var calculateScaleFactor = function calculateScaleFactor(imageData) {
+  var ow = (0, _get["default"])(imageData, 'original.width', 0);
+
+  if (ow > 0) {
+    var pw = (0, _get["default"])(imageData, 'preview.width', 0);
+    return ow / pw;
+  }
+
+  return 1;
+};
+
+exports.calculateScaleFactor = calculateScaleFactor;
+
+var fixSrcURL = function fixSrcURL(src) {
+  return src && src[0] === '/' ? "".concat((0, _configuration.getConf)('network.host')).concat(src) : src;
+};
+
+exports.fixSrcURL = fixSrcURL;
+
+var getRasterURL = function getRasterURL(imageURL) {
+  return ('' + imageURL).replace(/svg$/, 'png');
+};
+
+exports.getRasterURL = getRasterURL;
+
+var noCache = function noCache(src) {
+  return "".concat(src, "?").concat(Math.random());
+};
+
+exports.noCache = noCache;
+
+var prepareImageObjectData = function prepareImageObjectData(rawObject) {
+  var image = rawObject.imageData;
+
+  var data = _objectSpread(_objectSpread({}, rawObject), {}, {
+    scaleFactor: calculateScaleFactor(image),
+    src: fixSrcURL(rawObject.src)
+  });
+
+  data.transformImageSrc = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url) {
+      var _ref2,
+          preview,
+          operations,
+          displayColorPreview,
+          gallery,
+          isPlaceHolderImage,
+          svgContent,
+          _args = arguments;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _ref2 = _args.length > 1 && _args[1] !== undefined ? _args[1] : {}, preview = _ref2.preview, operations = _ref2.operations;
+
+              if ((0, _Selectors.isEditableVectorImage)({
+                url: url
+              })) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return", noCache(url));
+
+            case 3:
+              displayColorPreview = image.displayColorPreview, gallery = image.gallery, isPlaceHolderImage = image.isPlaceHolderImage;
+
+              if (!(!displayColorPreview && !gallery && !isPlaceHolderImage)) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt("return", noCache(fixSrcURL(getRasterURL((0, _get["default"])(image, 'preview.url', '')))));
+
+            case 6:
+              _context.next = 8;
+              return (0, _DesignDataService.getSvgContent)(url, true);
+
+            case 8:
+              svgContent = _context.sent;
+              return _context.abrupt("return", (0, _DesignDataService.applySvgContentOperations)(preview ? preview : image.preview, displayColorPreview || gallery ? operations ? operations : image.operations : null, svgContent));
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return data;
+};
+
+exports.prepareImageObjectData = prepareImageObjectData;
+
+var prepareObjectData = function prepareObjectData(rawObject) {
+  return rawObject && rawObject.imageData ? prepareImageObjectData(rawObject) : rawObject;
+};
+
+exports.prepareObjectData = prepareObjectData;
+
+var prepareCanvasData = function prepareCanvasData(canvasData) {
+  var prepareObjectDataFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : prepareObjectData;
+
+  if (_typeof(canvasData) === 'object') {
+    var objects = canvasData.objects,
+        otherProps = _objectWithoutProperties(canvasData, _excluded);
+
+    var result = _objectSpread({}, otherProps);
+
+    if ((0, _isArray["default"])(objects)) {
+      result.objects = objects.map(prepareObjectDataFn);
+    }
+
+    return result;
+  }
+
+  return canvasData;
+};
+
+exports.prepareCanvasData = prepareCanvasData;

package/App/Modules/Designer/setupDesigner.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.setupDesigner = void 0;
+
+var _CanvasRepository = require("redhotmagma-graphics-editor/CanvasAdapters/PaperJs/CanvasRepository");
+
+var _Canvas = require("redhotmagma-graphics-editor/CanvasInterface/Canvas");
+
+var _FontSizeMin = require("redhotmagma-graphics-editor/CanvasAdapters/PaperJs/Modifiers/FontSizeMin");
+
+var _configuration = require("../../configuration");
+
+var _Transformers = require("./Utils/Transformers");
+
+var _withActiveCanvas = require("./withActiveCanvas");
+
+var _createDebounceManager = require("../../../Utils/Function/createDebounceManager");
+
+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); }); }; }
+
+var CHANGE_DEBOUNCE_TIMEOUT = 200;
+
+var setupDesigner = function setupDesigner(designDataService) {
+  // use a WeakMap for storing the canvas objects
+  // so the GC can free them up when the key object is no more there
+  var canvasMap = new WeakMap();
+  var canvasRepository = (0, _CanvasRepository.createCanvasRepository)(canvasMap);
+
+  var canvasSerializer = function canvasSerializer(canvas) {
+    return canvas.toObjectWithMetric();
+  };
+
+  designDataService.registerCanvasSerializer(canvasSerializer); // setup object change listener for newly created canvases
+  // to store the serialized canvas data when something has changed
+
+  var canvasChangeListener = designDataService.createCanvasChangeListener({
+    syncCanvasChange: function syncCanvasChange() {
+      return canvasChangeDebounceManager.sync();
+    }
+  });
+  var canvasChangeDebounceManager = (0, _createDebounceManager.createDebounceManager)(canvasChangeListener, CHANGE_DEBOUNCE_TIMEOUT);
+
+  canvasRepository.onCreate = function (canvas) {
+    var lastLength = canvas.getLength();
+    canvas.on(_Canvas.CanvasEvents.OnObjectChange, function (targetCanvas, eventData) {
+      // check if the canvas is the active canvas
+      // events from non-actives should be ignored in order to not modify the active design data illegally
+      if (canvas !== canvasRepository.getActiveCanvas()) {
+        // eslint-disable-next-line no-console
+        console.log('The canvas is not active, skipping interaction.');
+        return;
+      }
+
+      var length = canvas.getLength();
+
+      if (lastLength !== length) {
+        lastLength = length;
+        canvasChangeDebounceManager.invokeSync(canvas, eventData);
+      } else {
+        canvasChangeDebounceManager.invokeDebounced(canvas, eventData);
+      }
+    });
+  }; // expose the canvasRepository for easier debugging in dev mode
+
+
+  if (!(0, _configuration.isProduction)()) {
+    window.canvasRepository = canvasRepository;
+  } // request (get or create) the associated canvas when the user selects a design area
+
+
+  designDataService.registerDesignAreaChangeListener(function (_ref) {
+    var selectedDesignArea = _ref.selectedDesignArea,
+        prevSelectedDesignArea = _ref.prevSelectedDesignArea,
+        canvasSize = _ref.canvasSize;
+
+    if (prevSelectedDesignArea && selectedDesignArea && prevSelectedDesignArea.identifier === selectedDesignArea.identifier && canvasMap.has(prevSelectedDesignArea)) {
+      var canvas = canvasMap.get(prevSelectedDesignArea);
+      canvasMap["delete"](prevSelectedDesignArea);
+      canvasMap.set(selectedDesignArea, canvas);
+      canvas.setSize(canvasSize);
+    } // naively check that a "valid" design area is selected
+
+
+    if (selectedDesignArea.identifier && canvasSize.width > 0 && canvasSize.height > 0) {
+      var _canvas = canvasRepository.requestCanvas(selectedDesignArea, canvasSize);
+
+      (0, _withActiveCanvas.updateProviders)(_canvas);
+    } else {
+      // clear the selection on the active canvas (so the tools will be hidden)
+      var _canvas2 = canvasRepository.getActiveCanvas();
+
+      if (_canvas2) {
+        _canvas2.clearSelection();
+      }
+    }
+  });
+  designDataService.registerUpdateCanvasData(function (canvasData) {
+    var designArea = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var canvasSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var canvas = designArea ? canvasRepository.requestCanvas(designArea, canvasSize, {
+      activate: false
+    }) : canvasRepository.getActiveCanvas();
+    return canvas.updateFromObject((0, _Transformers.prepareCanvasData)(canvasData || {}));
+  }); // update the minimum font size when the design production method changes
+
+  designDataService.registerDesignProductionMethodChangeListener(function () {
+    var canvas = canvasRepository.getActiveCanvas();
+    (0, _FontSizeMin.applyFontSizeMin)(canvas, designDataService.getFontSizeMin());
+  }); // this function is responsible for loading the given canvas data
+  // 1. to the active canvas (when no designArea provided)
+  // 2. to the given designArea (canvasSize must be also provided)
+
+  designDataService.registerLoadCanvasData(function (canvasData) {
+    var designArea = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var canvasSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var canvas = designArea ? canvasRepository.requestCanvas(designArea, canvasSize, {
+      activate: false
+    }) : canvasRepository.getActiveCanvas();
+    return canvas.fromObject((0, _Transformers.prepareCanvasData)(canvasData || {}));
+  }); // get the associated canvas for the given designArea, if there is one already
+
+  designDataService.registerGetCanvas(function (designArea) {
+    return canvasMap.has(designArea) ? canvasMap.get(designArea) : false;
+  });
+  designDataService.registerInitCanvas( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref2) {
+      var designArea, prevDesignArea, canvasSize, maskData, canvas, isNew;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              designArea = _ref2.designArea, prevDesignArea = _ref2.prevDesignArea, canvasSize = _ref2.canvasSize, maskData = _ref2.maskData;
+
+              if (canvasMap.has(prevDesignArea)) {
+                canvas = canvasMap.get(prevDesignArea);
+                canvasMap["delete"](prevDesignArea);
+                canvasMap.set(designArea, canvas);
+                canvas.setSize(canvasSize);
+                isNew = false;
+              } else {
+                canvas = canvasRepository.requestCanvas(designArea, canvasSize);
+                isNew = true;
+              }
+
+              _context.next = 4;
+              return canvas.useMask(maskData);
+
+            case 4:
+              return _context.abrupt("return", {
+                canvas: canvas,
+                designArea: designArea,
+                isNew: isNew
+              });
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }());
+  designDataService.registerRemoveCanvas(function (designArea) {
+    if (canvasMap.has(designArea)) {
+      canvasMap.get(designArea).dispose();
+      canvasMap["delete"](designArea);
+    }
+  });
+};
+
+exports.setupDesigner = setupDesigner;
+var _default = setupDesigner;
+exports["default"] = _default;

package/App/Modules/Designer/withActiveCanvas.js

@@ -0,0 +1,136 @@
+"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.withActiveCanvas = exports.updateProviders = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+// list of the mounted provider components
+var providerList = []; // store the latest canvas so it can be used as default current state for newly mounted components
+
+var currentCanvas = null;
+/**
+ * Sets the active canvas for all the providers in the list
+ * @param canvas
+ */
+
+var updateProviders = function updateProviders(canvas) {
+  currentCanvas = canvas;
+
+  var _iterator = _createForOfIteratorHelper(providerList),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var providerComponent = _step.value;
+      providerComponent.setCanvas(canvas);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};
+/**
+ * HOC that provides the active canvas to the given Component
+ * @param Component
+ */
+
+
+exports.updateProviders = updateProviders;
+
+var withActiveCanvas = function withActiveCanvas(Component) {
+  var _class, _temp;
+
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+    _inherits(ActiveCanvasProvider, _React$Component);
+
+    var _super = _createSuper(ActiveCanvasProvider);
+
+    function ActiveCanvasProvider() {
+      var _this;
+
+      _classCallCheck(this, ActiveCanvasProvider);
+
+      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", {
+        canvas: currentCanvas
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "setCanvas", function (canvas) {
+        return _this.setState({
+          canvas: canvas
+        });
+      });
+
+      return _this;
+    }
+
+    _createClass(ActiveCanvasProvider, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        providerList.push(this);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        var idx = providerList.indexOf(this);
+        providerList.splice(idx, 1);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/_react["default"].createElement(Component, {
+          canvas: this.state.canvas
+        }, this.props.children);
+      }
+    }]);
+
+    return ActiveCanvasProvider;
+  }(_react["default"].Component), _defineProperty(_class, "propTypes", {
+    children: _propTypes["default"].node
+  }), _temp;
+};
+
+exports.withActiveCanvas = withActiveCanvas;

package/App/Modules/Visualization/AlignTargetContainer.js

@@ -0,0 +1,55 @@
+"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.AlignTargetContainer = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _AlignTargetProvider = require("redhotmagma-visualization/AlignTargetProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var style = {
+  root: {
+    flex: 'inherit',
+    display: 'inherit',
+    flexDirection: 'inherit',
+    width: 'inherit',
+    height: 'inherit',
+    // the pointer events should be passed through to the visualization component
+    pointerEvents: 'inherit' // important: don't remove this
+
+  }
+};
+var AlignTargetContainer = (0, _withStyles["default"])(style, {
+  name: 'AlignTargetContainer'
+})((0, _AlignTargetProvider.withAlignTarget)(function (_ref) {
+  var alignTarget = _ref.alignTarget,
+      children = _ref.children,
+      classes = _ref.classes;
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      alignTarget.add(ref.current);
+    }
+
+    return function () {
+      return alignTarget.remove(ref.current);
+    };
+  }, [alignTarget]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    className: classes.root
+  }, children);
+}));
+exports.AlignTargetContainer = AlignTargetContainer;

package/App/Modules/Visualization/CreatorAlignTarget.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreatorAlignTarget = void 0;
+
+var _Containers = require("../Creator/Containers");
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+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; }
+
+var styles = function styles(theme) {
+  var _root;
+
+  return {
+    root: (_root = {
+      marginTop: 36
+    }, _defineProperty(_root, theme.breakpoints.down('xs'), {
+      maxHeight: 'calc(100% - 270px)'
+    }), _defineProperty(_root, theme.breakpoints.up('sm'), {
+      maxHeight: 'calc(100% - 260px)'
+    }), _defineProperty(_root, theme.breakpoints.up(theme.creator.viewSelectBreakpoint), {
+      marginTop: 0
+    }), _defineProperty(_root, theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg'), {
+      maxHeight: 'calc(100% - 286px)'
+    }), _defineProperty(_root, theme.breakpoints.up('lg'), {
+      maxHeight: 'calc(100% - 196px)'
+    }), _defineProperty(_root, '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 825px)', {
+      maxHeight: '100%'
+    }), _root)
+  };
+};
+
+var CreatorAlignTarget = (0, _withStyles["default"])(styles, {
+  name: 'CreatorAlignTarget'
+})(_Containers.AlignTargetContainer);
+exports.CreatorAlignTarget = CreatorAlignTarget;