@configuratorware/configurator-admingui 1.28.3 → 1.29.1

package/Screens/Designer/SubScreens/Visualization/Components/VisualizationContainer.js

@@ -0,0 +1,166 @@
+"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"] = exports.VisualizationContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _cssElementQueries = require("css-element-queries");
+
+var _VisualizationInterface = require("redhotmagma-visualization/VisualizationInterface");
+
+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; }
+
+var styles = function styles() {
+  return {
+    visualizationContainer: {
+      width: 500,
+      height: 400
+    }
+  };
+};
+/**
+ * Component for the Three.js visualization
+ * Responsibilities:
+ *  - renders the placeholder for the THREE.js visualization
+ *  - updates the size of the visualization component on resize events
+ */
+
+
+var VisualizationContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(VisualizationContainer, _React$Component);
+
+  var _super = _createSuper(VisualizationContainer);
+
+  function VisualizationContainer() {
+    var _this;
+
+    _classCallCheck(this, VisualizationContainer);
+
+    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), "onSizeChange", function (size) {
+      var three = _this.props.three;
+      three.setSize(size);
+
+      if (three.updateZoom) {
+        three.updateZoom();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
+
+    return _this;
+  }
+
+  _createClass(VisualizationContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initialize();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      this.initialize(prevProps);
+    }
+  }, {
+    key: "initialize",
+    value: function initialize() {
+      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var three = this.props.three;
+
+      if (!three) {
+        // eslint-disable-next-line no-console
+        console.warn('Three instance is not provided! Visualization will not be rendered.');
+        return;
+      }
+
+      if (three === prevProps.three) {
+        // eslint-disable-next-line no-console
+        console.info('Three instance is the same, skipping initialization.');
+        return;
+      }
+
+      this.resizeSensor = new _cssElementQueries.ResizeSensor(this.containerRef.current, this.onSizeChange);
+
+      if (three.isInitialized()) {
+        // Three is already initialized, just add it to the current container instead of reloading it completely
+        three.addToContainer(this.containerRef.current);
+      } else {
+        three.init(this.containerRef.current);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.resizeSensor) {
+        this.resizeSensor.detach();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.visualizationContainer, " ").concat(className || ''),
+        ref: this.containerRef
+      });
+    }
+  }]);
+
+  return VisualizationContainer;
+}(_react["default"].Component);
+
+exports.VisualizationContainer = VisualizationContainer;
+
+_defineProperty(VisualizationContainer, "propTypes", {
+  three: _propTypes["default"].instanceOf(_VisualizationInterface.VisualizationInterface).isRequired,
+  classes: _propTypes["default"].object,
+  className: _propTypes["default"].string
+});
+
+_defineProperty(VisualizationContainer, "defaultProps", {
+  classes: {}
+});
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'VisualizationContainer'
+})(VisualizationContainer);
+
+exports["default"] = _default;

package/Screens/Designer/SubScreens/Visualization/Components/resources/logo.svg

@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1_xA0_Bild_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 1000 279" style="enable-background:new 0 0 1000 279;" xml:space="preserve">
+<defs>
+    <mask id="Mask">
+		<rect width="1000" height="279" fill="white"/>
+		<path class="st0" d="M113,7c-4.2,0.2-6.9,3.3-9.7,5.6c-32.5,27.3-59.8,59-79.4,97c-7.3,14.1-12.3,29-14.8,44.8
+		c-0.1,0.9,0.1,2.1-1.1,2.6C8,107.8,8,58.7,7.9,9.5c0-3,0.6-3.6,3.6-3.6C45.3,6,79.2,6,113,6C113,6.3,113,6.7,113,7z"/>
+		<path class="st0" d="M807.4,197.9c0,8.3-0.1,16.6,0,25c0.1,5-1.7,9.1-5.1,12.6c-4.2,4.3-9.3,5.7-15.1,3.8
+		c-5.8-1.8-7.9-6.5-8.2-11.9c-0.4-7.6-0.2-15.3-0.2-22.9c0-10.6-0.1-21.3,0-31.9c0.1-10.7,4.8-16.3,13.3-16.3
+		c8.8,0,15.2,7.1,15.2,16.8C807.4,181.3,807.4,189.6,807.4,197.9z"/>
+		<path class="st0" d="M353.9,199.4c0-9.8-0.3-19.7,0.1-29.5c0.3-6.5,4.7-10.9,10.2-12c6.5-1.2,11.9,1.2,15.3,6.9
+			c1.9,3.2,3.2,6.6,3.2,10.4c0.1,17,0.2,34,0,51c-0.1,8-7.3,14.8-15.2,15c-8.2,0.2-13.2-4.5-13.6-13.8c-0.4-9.3-0.1-18.6-0.1-28
+			C353.9,199.4,353.9,199.4,353.9,199.4z"/>
+		<path class="st0" d="M738.2,194c0,12.2,0.1,23.4,0,34.5c0,4.1-6.4,9.6-12.6,11.2c-9.7,2.5-16.9-2.7-17.6-12.7
+			c-0.6-9,2.4-16.4,10.2-21.3C724.3,201.6,730.9,198.1,738.2,194z"/>
+		<path class="st0" d="M982.8,194.1c0,10.3,0,19.6,0,28.9c0,8.9-3.9,14-12.4,16.4c-9.4,2.7-16.3-1.6-17.7-11.2
+			c-1.2-8.5,1.1-15.9,8.1-21.3C967.3,201.9,975,198.5,982.8,194.1z"/>
+		<path class="st0" d="M299.4,192.8c-3.8-0.5-9.8,2-12.6-1c-2.7-2.9-0.6-8.9-0.8-13.5c-0.1-3.6,0-7.3,0.9-10.9
+			c1.7-6.9,6.1-10.5,13-10.7c7.3-0.1,12.3,3.2,14,10.1c1.9,7.8,0.7,15.9,0.9,23.8c0.1,2.2-1.7,2.1-3.2,2.1
+			C307.8,192.9,304,192.8,299.4,192.8z"/>
+		<path class="st0" d="M494.9,199.2c0-9.7-0.3-19.3,0.1-29c0.3-7.4,4.9-11.7,11.9-12.5c10.6-1.2,16.7,3.7,17,14.5
+			c0.3,17.6,0.3,35.3,0,53c-0.2,9.7-5.5,14.8-14.4,15.1c-9.1,0.3-14.5-4.5-14.8-13.7c-0.2-9.2-0.1-18.3-0.1-27.5
+			C494.7,199.2,494.8,199.2,494.9,199.2z"/>
+    </mask>
+  </defs>
+<style type="text/css">
+	.st0{fill:black;}
+	.st1{fill:#F26B74;}
+	.st2{fill:#EC1C29;}
+	.st3{fill:#F59197;}
+	.st4{fill:#D9DCDC;}
+	.st5{fill:#B3B8B8;}
+	.st6{fill:#EC1C29;}
+	.st7{fill:#F48289;}
+	.st8{fill:#F6989D;}
+	.st9{fill:#EE333F;}
+	.st10{fill:#F04954;}
+</style>
+<g>
+
+	<path class="st1" d="M113,7c-4.1,8.3-9.2,16.1-13,24.6c-13.5,30.1-11.3,58.7,7.3,85.9c4.2,6.2,8.5,12.3,12.8,18.4
+		c-1.4,2.9-4.4,2.7-6.9,3.2c-12.7,2.7-25.6,4-38.3,6.4c-15.6,3.1-27.8,11.2-37.2,23.8c-7.6,10.2-12.6,21.4-12.4,34.4
+		c0.1,6.8,1.9,13.1,4.6,19.2c0.8,1.9,2.5,3.7,1,6c-10.1-9.6-15-22-19-34.9c-1.5-5-1.6-10.4-3.9-15.2c0-1.3,0-2.7,0-4
+		c0.9-4.7,0.9-9.3,0-14c0-1.3,0-2.7,0-4c3.8-36,22.5-65.1,43.8-93c9.3-12.2,19.5-23.6,30.4-34.3c7.5-7.3,15.2-14.4,23.7-20.6
+		C107.9,7.6,110,5.6,113,7z"/>
+
+	<path class="st2" d="M787,280c-1.5-1.6-3.6-1.4-5.4-2c-7.7-2.8-11.9-8.2-12.4-16.4c-0.1-1.7-0.3-3.8,2.3-3.3c2.2,0.4,6-2.1,6.4,2.1
+		c0.9,8.1,7,11.6,16.2,10.7c7.9-0.8,12.8-5.6,13.2-13.6c0.3-5.3,0.1-10.6,0.1-17c-5.7,5.2-11.4,8-18.5,7.7
+		c-8.9-0.4-14.7-4.5-17.3-13c-1-3.2-1.5-6.5-1.5-9.8c0-18.6-0.2-37.3,0-55.9c0.2-15.3,10.8-23.4,25.8-20.3c4.4,0.9,7.6,3.7,10.6,6.7
+		c1.2-0.8,1.1-1.7,1-2.5c-0.7-4.4,2-4.1,5-4.3c3.9-0.3,3.8,1.8,3.8,4.6c0,33.8,0,67.6-0.1,101.4c0,14.5-7.5,23-21,24.3
+		c-2.3,1-4.9-0.4-7.1,0.9C787.7,280,787.3,280,787,280z" mask="url(#Mask)"/>
+	<path class="st3" d="M8,161c1.6,4.7,1.6,9.3,0,14C8,170.3,8,165.7,8,161z"/>
+	<path class="st4" d="M996.8,240.2c0.4-0.1,0.8-0.1,1.2-0.2c0,2.7,0,5.3,0,8c-0.3,0-0.7,0-1,0C995.2,245.4,995.1,242.8,996.8,240.2z"/>
+	<path class="st5" d="M788,280c2.2-1.9,4.7-0.7,7.1-0.9c0,0.3-0.1,0.6-0.1,0.9C792.7,280,790.3,280,788,280z"/>
+	<path class="st6" d="M31,229c-1.8-6-5.2-11.3-6.2-17.7c-2.6-16.1,2.2-30,12.1-42.5c7.4-9.1,16.7-15.5,28.1-17.6
+		c9.8-1.9,19.8-1,29.7,1.1c11.2,2.4,22.2,5.8,33.5,7.5c2.8,0.4,5.6,0.5,8.4,0.9c0.5,0.1,1,0.3,1.5,0.6c4.4,5.5,6.3,12.1,6.9,18.9
+		c1.5,16.9-1.5,32.9-11.7,46.8c-6.5,8.8-14.6,15.8-25.1,19.8c-0.5,0.1-1,0.3-1.4,0.4c-2.9,0.9-5.9,1.6-8.8,2.6
+		C71.8,255.4,49.2,249.2,31,229z"/>
+	<path class="st2" d="M850.2,156.4c12.6-11.6,27.9-11.3,35.4,2.7c4.3-5,9-9.3,15.9-10.5c12.1-2.2,21.2,4.2,22.7,16.3
+		c1.2,9.8,0.6,19.6,0.7,29.4c0.1,16.5-0.1,33,0.1,49.5c0,3.5-1.1,4.5-4.5,4.5c-3.4,0-4.5-0.8-4.5-4.4c0.2-22.7,0.1-45.3,0.1-68
+		c0-2-0.1-4-0.1-6c-0.4-9.3-4.7-13.9-12.8-13.8c-8.3,0.2-15.8,7.1-15.8,14.9c-0.1,24.2-0.1,48.3,0.1,72.5c0,3.7-1,4.7-4.7,4.8
+		c-3.9,0-4.2-1.7-4.2-4.8c0.1-23,0.1-46,0-69c0-1.7,0-3.3-0.1-5c-0.6-9-5.3-13.6-13.3-13.4c-7,0.2-15.6,7.2-15.4,14.6
+		c0.7,24,0.2,48,0.3,72c0,3.1,0.5,5.6-4.4,5.7c-5.1,0.1-4.5-2.7-4.5-5.9c0-29.2,0-58.3,0-87.5c0-2.8-1-5.8,4.1-5.8
+		c4.9,0,5,2.4,4.7,5.8C849.9,155.4,850,155.7,850.2,156.4z" mask="url(#Mask)"/>
+	<path class="st2" d="M605.2,156.5c15.8-12,26.7-11.2,35.5,2.7c1.6-1.7,3-3.5,4.7-4.9c6.8-5.9,14.6-7.7,23.2-4.5
+		c8.1,3,11,9.6,11.1,17.3c0.3,26,0.1,52,0.2,78c0,3.9-2.5,3-4.7,3.2c-2.8,0.3-4.2-0.4-4.1-3.7c0.1-22.5,0.1-45,0.1-67.5
+		c0-3,0-6-0.2-9c-0.5-8.3-6.4-13-14.6-11.7c-8.3,1.3-14.2,8.2-14.2,16.7c0,23.3,0,46.6,0,70c0,2.8,0.6,5.3-4,5.4
+		c-4.9,0.1-4.3-2.6-4.3-5.6c0-22.8,0-45.6,0-68.5c0-2-0.1-4-0.4-6c-1.2-8.4-5.8-12.5-13.5-12.1c-8.3,0.5-15.1,7.1-15.1,14.8
+		c0,24.2-0.1,48.3,0.1,72.5c0,3.6-0.8,4.9-4.7,4.9c-3.9,0-4.2-1.7-4.2-4.8c0.1-29.5,0.1-59,0-88.5c0-3-0.6-5.7,4.3-5.8
+		c5-0.1,4.9,2.5,4.6,5.8C605,155.4,605.1,155.7,605.2,156.5z" mask="url(#Mask)"/>
+	<path class="st2" d="M383.4,239c-3.5,4.1-6.2,6.7-9.7,8.3c-13.9,6.1-27.9-2.1-28.4-17.6c-0.7-20.1-0.5-40.3,0-60.4
+		c0.2-8,3.8-15.1,12-18.1c9.4-3.5,18-1.6,25.6,7.1c0-6.3,0-11.5,0-16.7c0-9.3,0.1-18.7-0.1-28c-0.1-3.4,1.4-3.9,4.2-3.7
+		c2.5,0.1,4.8-0.4,4.8,3.7c-0.1,43.6-0.1,87.3,0,130.9c0,3.3-1.2,3.9-4.1,3.8c-2.7-0.1-4.7-0.3-4.2-3.7
+		C383.5,243.2,383.4,241.9,383.4,239z" mask="url(#Mask)"/>
+	<path class="st7" d="M137.9,162.1c-0.2-0.1-0.5-0.2-0.7-0.2c-5.9-7.4-10.6-15.6-16-23.3c-0.5-0.7-0.5-1.6-0.3-2.4
+		c35-9.7,50.7-36.2,59.9-68.8c4.4,28.2,1.5,56-4,83.6c-0.2,1.1-0.1,2.2-1,3c-10.4,6.7-21.8,9.8-34.2,9.3
+		C140.3,163.3,139,162.9,137.9,162.1z" mask="url(#Mask)"/>
+	<path class="st2" d="M425,156.5c6.3-6,12.6-9,20.3-8.2c10.7,1.2,17.2,7.5,17.4,18.4c0.4,26.2,0.1,52.3,0.2,78.5
+		c0,4.5-3.2,2.6-5.3,3c-2.9,0.5-3.6-0.8-3.6-3.6c0.1-22.8,0.1-45.7,0.1-68.5c0-1.7,0.1-3.3,0-5c-0.5-9.5-4.9-14.3-13.1-14.2
+		c-8.9,0.1-15.8,6.5-15.8,15.2c-0.1,20.8,0,41.7,0,62.5c0,2.8-0.3,5.7,0.1,8.5c0.5,4.2-1,5.5-5.2,5.2c-3.2-0.2-3.8-1.3-3.8-4.2
+		c0.1-43.5,0.1-87,0-130.5c0-3.8,1.5-4.2,4.7-4.4c3.7-0.2,4.3,1.4,4.3,4.6C424.9,127.7,425,141.5,425,156.5z" mask="url(#Mask)"/>
+	<path class="st2" d="M746.8,201.1c0,11.2,0,22.3,0,33.5c0,2.9,0.3,5.1,4,5.6c3.6,0.5,1.7,3.7,1.9,5.7c0.3,2.6-1.8,2.2-3.4,2.2
+		c-3.4-0.1-7.2-0.3-8.9-3.4c-2-3.5-3.4-3.2-6.2-1.1c-3,2.4-6.8,3.6-10.6,4.2c-13,2.2-21.8-3.8-24-17c-2.2-13.3,1.5-24.5,13.2-32
+		c6.6-4.2,13.6-7.7,20.5-11.3c3.4-1.8,5.2-4.1,4.7-8.3c-0.4-3.4,0.1-7-0.1-10.5c-0.4-7.5-4-11.2-11-11.7c-8.1-0.6-12.7,2.6-14.1,10
+		c-0.5,2.8-1.1,5.7-0.8,8.4c0.5,4.3-1.6,4.7-5.1,4.8c-4.3,0.2-4-2.4-3.8-5.1c0.1-2,0.3-4,0.5-6c2-17.5,18.5-26.1,34.2-17.8
+		c6.9,3.6,8.8,10.1,8.9,17.2C747,179.4,746.8,190.3,746.8,201.1z" mask="url(#Mask)"/>
+	<path class="st2" d="M996.8,240.2c0.1,2.6,0.1,5.2,0.2,7.8c-5.9,0.3-11.5,0.2-14.2-6.9c-5.5,3.8-11.1,6.8-17.8,7
+		c-11.3,0.3-18.9-5-20.6-16.1c-2.1-13.9-0.1-25.5,15-34.5c6.5-3.9,13.3-7.5,20.1-11.1c2.7-1.4,3.7-3.4,3.5-6.5
+		c-0.4-4.3-0.3-8.6-0.7-12.9c-0.6-6.4-3.9-9.4-10.3-10c-7.2-0.7-11.9,1.9-13.9,7.7c-1.2,3.4-1.1,6.9-1.1,10.4c0.1,3.6-0.9,5.2-5,5.1
+		c-4.3,0-3.9-2.4-3.8-5.1c0-1,0-2,0-3c0.3-19.2,15.7-29.1,33.5-21.3c7.4,3.2,9.7,9.6,9.7,17.1c0,22,0.1,44-0.1,65.9
+		C991.1,238.1,992.3,240.4,996.8,240.2z" mask="url(#Mask)"/>
+	<path class="st2" d="M304.4,199.8c-5,0-10,0.1-15,0c-2.5-0.1-3.5,0.6-3.5,3.3c0.2,7.3-0.1,14.7,0.1,22c0.4,9.8,5.1,14.8,13.7,15
+		c9.6,0.2,14.9-4.7,15.2-14.5c0.1-2.3,0.3-4.7,0-7c-0.5-4,1-5.2,4.9-5c2.7,0.2,4,0.7,3.8,3.7c-0.3,4.3,0.2,8.6-0.5,13
+		c-1.9,11.8-9.8,17.9-23.2,17.8c-12.2,0-20.5-6.8-22.1-17.9c-0.2-1.5-0.4-3-0.4-4.5c0-17.8-0.1-35.6,0-53.5
+		c0.2-19.4,18.6-29.9,35.7-20.5c6.3,3.5,8.9,9.3,9.8,16c1.3,9.6,0.4,19.3,0.7,28.9c0.1,2.8-1.4,3.3-3.7,3.2
+		C314.7,199.8,309.6,199.8,304.4,199.8z" mask="url(#Mask)"/>
+	<path class="st2" d="M485.8,199.5c0-9.5-0.1-19,0-28.5c0.1-8.9,3.7-16.1,12-19.6c9.4-3.9,18.9-4,27.5,2.3c4.1,3,6.4,7.4,6.7,12.4
+		c1.3,21.4,1.7,42.9-0.2,64.3c-1.1,11.7-12,19.2-24.6,18.4c-13.6-0.9-21.2-8.4-21.4-21.3c-0.1-3.8,0-7.7,0-11.5
+		C485.8,210.5,485.8,205,485.8,199.5z" mask="url(#Mask)"/>
+	<path class="st2" d="M556.8,199.5c0-12-0.2-24,0.1-36c0.1-4.6-1.1-6.3-5.7-5.8c-2.3,0.3-5.4,1.3-5.3-3.4c0-3.8,0.9-5.7,4.9-4.9
+		c5.3,1,6.5-1.5,6.1-6.3c-0.4-5.1,0.1-10.3-0.1-15.5c-0.1-3.4,1.9-3.3,4.2-3.2c2.3,0.1,4.8-0.5,4.7,3.3c-0.2,6,0.1,12-0.1,18
+		c-0.1,2.8,0.8,4,3.7,3.8c2.2-0.2,4.4,0.2,6.5-0.1c5-0.8,5.5,2,5.2,5.8c-0.1,1.9-0.7,2.8-2.7,2.7c-0.5,0-1,0-1.5,0
+		c-11.1,0.3-11.1,0.3-11.1,11.7c0,20.2,0,40.3,0,60.5c0,9.9,1.5,11.2,11.4,10.5c1.6-0.1,4-1,3.8,2.2c-0.1,2.4,1.2,5.7-3.2,5.8
+		c-2,0.1-4,0.4-6,0.4c-11.5-0.1-14.8-3.4-14.8-14.9C556.8,222.5,556.8,211,556.8,199.5z" mask="url(#Mask)"/>
+	<path class="st8" d="M176,153c0.3-0.7,0.6-1.3,0.8-2c2,1.5,3-0.6,4.2-1.4c9.3-6,16.8-14,23.8-22.5c0.7-0.9,1.5-1.7,2.5-2.9
+		c1.4,2.9,0,5.1-0.7,7.3c-9.4,26.8-23.3,51-40.9,73.3c-12.9,16.3-27.8,30.4-47,39.3c-3.7,1.7-7.4,3.9-11.7,3.9
+		c-0.6-0.3-0.6-0.7-0.1-1.1l0,0c23-9.7,40.7-25.1,52.1-47.7c6.6-13.2,11.3-27,15.1-41.1C174.6,156.4,174.9,154.6,176,153z" mask="url(#Mask)"/>
+	<path class="st2" d="M242.6,163.3c5.5-7.3,12-12.2,20.5-16.2c0,3.2-0.1,5.9,0,8.6c0.1,2-0.7,2.8-2.6,3.5c-11.7,4.6-18,14-18,26.4
+		c0,19.3-0.1,38.6,0.1,57.9c0,3.3-0.7,4.7-4.4,4.7c-3.5,0-4.4-1-4.4-4.5c0.1-30,0.1-59.9,0-89.9c0-3.4,0.7-4.6,4.3-4.6
+		c3.6,0,4.6,1.4,4.4,4.7C242.4,157.1,242.6,160.2,242.6,163.3z" mask="url(#Mask)"/>
+	<path class="st9" d="M120.9,136.2c4.7,6.9,9.4,13.8,14,20.8c1,1.5,1.5,3.2,2.3,4.9c-9.4,0.5-18.3-2.3-27.3-4.4
+		c-12.1-2.8-24-5.9-36.7-5.6c-12.5,0.3-22.6,5.5-31.8,13.2c-1.5,1.3-2.5,3.1-4.5,3.8c7.6-11.4,18-19.2,31.3-22.9
+		c14.5-4.1,29.6-4.9,44.3-8c2.6-0.5,5.1-1.3,7.6-2C120.4,136,120.6,136.1,120.9,136.2z" mask="url(#Mask)"/>
+	<path class="st10" d="M107,247c0,0.4,0,0.7,0.1,1.1c-3,0.9-5.9,2.1-9.1,1.9C100.7,248.2,103.8,247.3,107,247z" mask="url(#Mask)"/>
+	<path class="st10" d="M176,153c-0.8,10-4.5,19.3-7.8,28.6c-6.5,18-15.5,34.6-30,47.5c-9.1,8.1-19.1,14.8-31.2,17.8
+		c6.4-4.3,13.1-8,19-13.3c16.5-14.6,24-49.4,12.5-69.8c-0.3-0.6-0.4-1.3-0.6-1.9C151.5,163,164.1,159.6,176,153z" mask="url(#Mask)"/>
+</g>
+</svg>

package/Screens/Designer/SubScreens/Visualization/Components/resources/move.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 4h-2l3-3 3 3h-2v2h-2v-2zm2 16h2l-3 3-3-3h2v-2h2v2zm-10-7v2l-3-3 3-3v2h2v2h-2zm18-2v-2l3 3-3 3v-2h-2v-2h2zm-4-3h-10v8h10v-8z"/></svg>

package/Screens/Designer/SubScreens/Visualization/Components/resources/rotate-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/Screens/Designer/SubScreens/Visualization/Components/resources/rotate-y.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="green" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/Screens/Designer/SubScreens/Visualization/Components/resources/rotate-z.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="blue" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/Screens/Designer/SubScreens/Visualization/Components/resources/rotate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/Screens/Designer/SubScreens/Visualization/Components/resources/size.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path transform="scale(0.6) translate(30,6) rotate(90)" d="M7.621 20.621l3.379 3.379h-11v-10.999l3.379 3.378 5.793-5.793 4.242 4.242-5.793 5.793zm2.965-11.449l4.242 4.242 5.793-5.793 3.379 3.378v-10.999h-11l3.379 3.379-5.793 5.793z"/></svg>

package/Screens/Designer/SubScreens/Visualization/Containers/Edit/Constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_CYLINDER_RADIUS = exports.DEFAULT_BASE_SHAPE_WIDTH = exports.DEFAULT_BASE_SHAPE_PADDING = void 0;
+var DEFAULT_BASE_SHAPE_PADDING = 1;
+exports.DEFAULT_BASE_SHAPE_PADDING = DEFAULT_BASE_SHAPE_PADDING;
+var DEFAULT_BASE_SHAPE_WIDTH = 100;
+exports.DEFAULT_BASE_SHAPE_WIDTH = DEFAULT_BASE_SHAPE_WIDTH;
+var DEFAULT_CYLINDER_RADIUS = 100;
+exports.DEFAULT_CYLINDER_RADIUS = DEFAULT_CYLINDER_RADIUS;

package/Screens/Designer/SubScreens/Visualization/Containers/Edit/DataLinks.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyLinks = exports.multiplyToPixel = exports.withChange = exports.calcPathValue = exports.withRatio = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _set = _interopRequireDefault(require("lodash/set"));
+
+var _calculateBoundingBoxSize = require("./calculateBoundingBoxSize");
+
+var _Constants = require("./Constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Calculates the ratio of the values at the given path in prevData and nextData objects
+ *   if it's different than 1 it calls fn and returns true,
+ *   otherwise returns false
+ * @param {object} prevData
+ * @param {object} nextData
+ * @param {string} path
+ * @param {function} fn
+ * @return {boolean}
+ */
+var withRatio = function withRatio(prevData, nextData, path, fn) {
+  var r = (0, _get["default"])(nextData, path) / (0, _get["default"])(prevData, path);
+
+  if (r && Math.abs(r - 1) > 0.0001) {
+    fn(r);
+    return true;
+  }
+
+  return false;
+};
+/**
+ * Calls fn to change the value at the given path in the given object
+ * @param {object} obj
+ * @param {string} path
+ * @param {function} fn
+ */
+
+
+exports.withRatio = withRatio;
+
+var calcPathValue = function calcPathValue(obj, path, fn) {
+  (0, _set["default"])(obj, path, fn((0, _get["default"])(obj, path)));
+};
+/**
+ * Reads the values at the given path from prevData and nextData objects,
+ *   if the values are different it calls fn and returns true,
+ *   otherwise returns false
+ * @param {object} prevData
+ * @param {object} nextData
+ * @param {string} path
+ * @param {function} fn
+ * @return {boolean}
+ */
+
+
+exports.calcPathValue = calcPathValue;
+
+var withChange = function withChange(prevData, nextData, path, fn) {
+  var nv = (0, _get["default"])(nextData, path);
+  var pv = (0, _get["default"])(prevData, path);
+
+  if (nv !== pv) {
+    fn(nv, pv);
+    return true;
+  }
+
+  return false;
+};
+
+exports.withChange = withChange;
+
+var multiplyToPixel = function multiplyToPixel(m) {
+  return function (v) {
+    return Math.round(v * m);
+  };
+};
+
+exports.multiplyToPixel = multiplyToPixel;
+var sizeMin = 5;
+
+var applyLinks = function applyLinks(prevData, nextData) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var positionRatio = options.positionRatio,
+      _options$baseShapePad = options.baseShapePadding,
+      baseShapePadding = _options$baseShapePad === void 0 ? _Constants.DEFAULT_BASE_SHAPE_PADDING : _options$baseShapePad; // set min value for area size
+
+  if ((0, _get["default"])(nextData, 'position.width') <= sizeMin) {
+    (0, _set["default"])(nextData, 'position.width', sizeMin);
+  }
+
+  if ((0, _get["default"])(nextData, 'position.height') <= sizeMin) {
+    (0, _set["default"])(nextData, 'position.height', sizeMin);
+  }
+
+  withChange(prevData, nextData, 'baseShape.type', function (t) {
+    if (t === 'Cylinder') {
+      calcPathValue(nextData, 'baseShape.r', function (v) {
+        return v || _Constants.DEFAULT_CYLINDER_RADIUS;
+      });
+    }
+  });
+  withRatio(prevData, nextData, 'baseShape.width', function (r) {
+    calcPathValue(nextData, 'position.width', multiplyToPixel(r));
+  }) || withRatio(prevData, nextData, 'baseShape.height', function (r) {
+    calcPathValue(nextData, 'position.height', multiplyToPixel(r));
+  });
+  withChange(prevData, nextData, 'position.width', function (w) {
+    calcPathValue(nextData, 'position.height', function () {
+      return multiplyToPixel(1 / positionRatio)(w);
+    });
+  }) || withChange(prevData, nextData, 'position.height', function (h) {
+    calcPathValue(nextData, 'position.width', function () {
+      return multiplyToPixel(positionRatio)(h);
+    });
+  }); // calculate base shape width and height based on the bounding rectangle of the position data
+
+  var _calculateBoundingBox = (0, _calculateBoundingBoxSize.calculateBoundingBoxSize)(nextData.position),
+      width = _calculateBoundingBox.width,
+      height = _calculateBoundingBox.height;
+
+  (0, _set["default"])(nextData, 'baseShape.width', Math.round(width) + baseShapePadding);
+  (0, _set["default"])(nextData, 'baseShape.height', Math.round(height) + baseShapePadding); // set min value for base shape size
+
+  if ((0, _get["default"])(nextData, 'baseShape.width') <= sizeMin) {
+    (0, _set["default"])(nextData, 'baseShape.width', sizeMin);
+  }
+
+  if ((0, _get["default"])(nextData, 'baseShape.height') <= sizeMin) {
+    (0, _set["default"])(nextData, 'baseShape.height', sizeMin);
+  }
+
+  if ((0, _get["default"])(nextData, 'baseShape.type') === 'Cylinder') {
+    var minRadius = Math.max(Math.floor((0, _get["default"])(nextData, 'baseShape.width', 0) / Math.PI / 2), sizeMin);
+
+    if ((0, _get["default"])(nextData, 'baseShape.r', 0) < minRadius) {
+      (0, _set["default"])(nextData, 'baseShape.r', minRadius);
+    }
+  } // recalculating the position with the baseShape size change ratio
+
+
+  withRatio(prevData, nextData, 'baseShape.width', function (r) {
+    isFinite(r) && calcPathValue(nextData, 'position.x', function (v) {
+      return v * r;
+    });
+  });
+  withRatio(prevData, nextData, 'baseShape.height', function (r) {
+    isFinite(r) && calcPathValue(nextData, 'position.y', function (v) {
+      return v * r;
+    });
+  });
+};
+
+exports.applyLinks = applyLinks;