basicprimitivesreact - npm Package Compare versions

Comparing version 6.0.5 to 6.1.0

dist/esm/BaseDiagram.js

@@ -0,25 +1,84 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+var _Graphics = _interopRequireDefault(require("./Graphics"));
+
+var _Templates = require("./Templates");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; }
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { getFixOfPixelALignment, getInnerSize, getElementOffset, OrientationType, Rect, Size, Point, Thickness } from 'basicprimitives';
-import Graphics from './Graphics';
-import { AnnotationLabelTemplate, ButtonsTemplate, CheckBoxTemplate, CursorTemplate, DotHighlightTemplate, GroupTitleTemplate, HighlightTemplate, ItemTemplate, UserTemplate, LabelAnnotationTemplate } from './Templates';
+var BaseDiagram = /*#__PURE__*/function (_Component) {
+  _inherits(BaseDiagram, _Component);
 
-class BaseDiagram extends Component {
-  constructor(props, TaskManagerFactory, EventArgs) {
-    super(props);
-    this.TaskManagerFactory = TaskManagerFactory;
-    this.EventArgs = EventArgs;
-    const {
-      config,
-      centerOnCursor
-    } = props;
-    const {
-      highlightItem,
-      cursorItem,
-      selectedItems
-    } = config;
-    this.state = {
-      config,
+  var _super = _createSuper(BaseDiagram);
+
+  function BaseDiagram(props, TaskManagerFactory, EventArgs) {
+    var _this;
+
+    _classCallCheck(this, BaseDiagram);
+
+    _this = _super.call(this, props);
+    _this.TaskManagerFactory = TaskManagerFactory;
+    _this.EventArgs = EventArgs;
+    var config = props.config,
+        centerOnCursor = props.centerOnCursor;
+    var highlightItem = config.highlightItem,
+        cursorItem = config.cursorItem,
+        selectedItems = config.selectedItems;
+    _this.state = {
+      config: config,
       viewportSize: {
@@ -33,169 +92,148 @@ width: 0,
       },
-      centerOnCursor,
-      highlightItem,
-      cursorItem,
+      centerOnCursor: centerOnCursor,
+      highlightItem: highlightItem,
+      cursorItem: cursorItem,
       selectedItems: (selectedItems || []).slice()
     };
-    const {
-      viewportSize
-    } = this.state;
-    this.onRefreshViewport = this.onRefreshViewport.bind(this);
-    this.onSizeChanged = this.onSizeChanged.bind(this);
-    this.onScroll = this.onScroll.bind(this);
-    this.onMouseMove = this.onMouseMove.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onCheckboxChange = this.onCheckboxChange.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onFrameClick = this.onFrameClick.bind(this);
-    this.onFrameMouseMove = this.onFrameMouseMove.bind(this);
-    this.getOptions = this.getOptions.bind(this);
-    this.getGraphics = this.getGraphics.bind(this);
-    this.getLayout = this.getLayout.bind(this);
-    this.setLayout = this.setLayout.bind(this);
-    this.getEventArgs = this.getEventArgs.bind(this);
-    this.centerOnCursor = this.centerOnCursor.bind(this);
-    this.onItemRender = this.onItemRender.bind(this);
-    this.onHighlightRender = this.onHighlightRender.bind(this);
-    this.onCursorRender = this.onCursorRender.bind(this);
-    this.controlPanelRef = /*#__PURE__*/React.createRef();
-    this.frameMousePanelRef = /*#__PURE__*/React.createRef();
-    this.framePlaceholderRef = /*#__PURE__*/React.createRef();
-    this.scrollPanelRef = /*#__PURE__*/React.createRef();
-    this.mousePanelRef = /*#__PURE__*/React.createRef();
-    this.placeholderRef = /*#__PURE__*/React.createRef();
-    this.calloutPlaceholderRef = /*#__PURE__*/React.createRef();
-    this.layoutOptions = {};
-    this.templatesHash = {};
-    this.graphics = new Graphics(viewportSize);
-    this.templates = {
-      AnnotationLabelTemplate,
-      ButtonsTemplate,
-      CheckBoxTemplate,
-      CursorTemplate,
-      DotHighlightTemplate,
-      GroupTitleTemplate,
-      HighlightTemplate,
-      ItemTemplate,
-      UserTemplate,
-      LabelAnnotationTemplate
+    var viewportSize = _this.state.viewportSize;
+    _this.onRefreshViewport = _this.onRefreshViewport.bind(_assertThisInitialized(_this));
+    _this.onSizeChanged = _this.onSizeChanged.bind(_assertThisInitialized(_this));
+    _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
+    _this.onMouseMove = _this.onMouseMove.bind(_assertThisInitialized(_this));
+    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
+    _this.onCheckboxChange = _this.onCheckboxChange.bind(_assertThisInitialized(_this));
+    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
+    _this.onFrameClick = _this.onFrameClick.bind(_assertThisInitialized(_this));
+    _this.onFrameMouseMove = _this.onFrameMouseMove.bind(_assertThisInitialized(_this));
+    _this.getOptions = _this.getOptions.bind(_assertThisInitialized(_this));
+    _this.getGraphics = _this.getGraphics.bind(_assertThisInitialized(_this));
+    _this.getLayout = _this.getLayout.bind(_assertThisInitialized(_this));
+    _this.setLayout = _this.setLayout.bind(_assertThisInitialized(_this));
+    _this.getEventArgs = _this.getEventArgs.bind(_assertThisInitialized(_this));
+    _this.centerOnCursor = _this.centerOnCursor.bind(_assertThisInitialized(_this));
+    _this.onItemRender = _this.onItemRender.bind(_assertThisInitialized(_this));
+    _this.onHighlightRender = _this.onHighlightRender.bind(_assertThisInitialized(_this));
+    _this.onCursorRender = _this.onCursorRender.bind(_assertThisInitialized(_this));
+    _this.controlPanelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.frameMousePanelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.framePlaceholderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.titlesMousePanelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.titlesPlaceholderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.scrollPanelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.mousePanelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.placeholderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.calloutPlaceholderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.layoutOptions = {};
+    _this.templatesHash = {};
+    _this.graphics = new _Graphics["default"](viewportSize);
+    _this.templates = {
+      AnnotationLabelTemplate: _Templates.AnnotationLabelTemplate,
+      ButtonsTemplate: _Templates.ButtonsTemplate,
+      CheckBoxTemplate: _Templates.CheckBoxTemplate,
+      CursorTemplate: _Templates.CursorTemplate,
+      DotHighlightTemplate: _Templates.DotHighlightTemplate,
+      GroupTitleTemplate: _Templates.GroupTitleTemplate,
+      HighlightTemplate: _Templates.HighlightTemplate,
+      ItemTemplate: _Templates.ItemTemplate,
+      UserTemplate: _Templates.UserTemplate,
+      LabelAnnotationTemplate: _Templates.LabelAnnotationTemplate,
+      LevelTitleTemplate: _Templates.LevelTitleTemplate,
+      LevelBackgroundTemplate: _Templates.LevelBackgroundTemplate
     };
-    this.tasks = TaskManagerFactory(this.getOptions, this.getGraphics, this.getLayout, this.setLayout, this.templates);
+    _this.tasks = TaskManagerFactory(_this.getOptions, _this.getGraphics, _this.getLayout, _this.setLayout, _this.templates);
+    return _this;
   }
 
-  static getDerivedStateFromProps(nextProps, state) {
-    const {
-      config: nextConfig,
-      centerOnCursor
-    } = nextProps;
-    const {
-      config
-    } = state;
+  _createClass(BaseDiagram, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // The following code is ResizeObserver Polyfill
+      // It is added to the rendered page to track size changes of control placeholder
+      // npm install resize-observer-polyfill --save-dev
+      require('resize-observer-polyfill/dist/ResizeObserver.global');
 
-    if (config !== nextConfig) {
-      const {
-        highlightItem,
-        cursorItem,
-        selectedItems
-      } = nextConfig;
-      return {
-        config: nextConfig,
-        highlightItem,
-        cursorItem,
-        selectedItems: (selectedItems || []).slice(),
-        centerOnCursor
-      };
+      this.observer = new ResizeObserver(this.onSizeChanged);
+      this.observer.observe(this.controlPanelRef.current);
+      this.centerOnCursor();
+      this.fixPixelAlignment();
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // destroy timer
+      clearTimeout(this.timer);
+      this.timer = null; // destroy observer
 
-    return null;
-  }
+      this.observer.disconnect();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.centerOnCursor();
+    }
+  }, {
+    key: "centerOnCursor",
+    value: function centerOnCursor() {
+      var centerOnCursor = this.state.centerOnCursor;
 
-  componentDidMount() {
-    // The following code is ResizeObserver Polyfill
-    // It is added to the rendered page to track size changes of control placeholder
-    // npm install resize-observer-polyfill --save-dev
-    require('resize-observer-polyfill/dist/ResizeObserver.global');
-
-    this.observer = new ResizeObserver(this.onSizeChanged);
-    this.observer.observe(this.controlPanelRef.current);
-    this.centerOnCursor();
-    this.fixPixelAlignment();
-  }
-
-  componentWillUnmount() {
-    // destroy timer
-    clearTimeout(this.timer);
-    this.timer = null; // destroy observer
-
-    this.observer.disconnect();
-  }
-
-  componentDidUpdate() {
-    this.centerOnCursor();
-  }
-
-  centerOnCursor() {
-    const {
-      centerOnCursor
-    } = this.state;
-
-    if (centerOnCursor) {
-      /* scroll to offset */
-      const centerOnCursorTask = this.tasks.getTask("CenterOnCursorTask");
-      const placeholderOffset = centerOnCursorTask.getPlaceholderOffset();
-      const {
-        x: scrollLeft,
-        y: scrollTop
-      } = placeholderOffset;
-      this.scrollPanelRef.current.scrollLeft = scrollLeft;
-      this.scrollPanelRef.current.scrollTop = scrollTop;
+      if (centerOnCursor) {
+        /* scroll to offset */
+        var centerOnCursorTask = this.tasks.getTask("CenterOnCursorTask");
+        var placeholderOffset = centerOnCursorTask.getPlaceholderOffset();
+        var scrollLeft = placeholderOffset.x,
+            scrollTop = placeholderOffset.y;
+        this.scrollPanelRef.current.scrollLeft = scrollLeft;
+        this.scrollPanelRef.current.scrollTop = scrollTop;
+      }
     }
-  }
+  }, {
+    key: "fixPixelAlignment",
+    value: function fixPixelAlignment() {
+      var current = this.controlPanelRef.current;
+      var pixelAlignmentFix = (0, _basicprimitives.getFixOfPixelAlignment)(current);
+      current.style.marginLeft = pixelAlignmentFix.width + "px";
+      current.style.marginTop = pixelAlignmentFix.height + "px";
+    }
+  }, {
+    key: "onSizeChanged",
+    value: function onSizeChanged() {
+      var _getInnerSize = (0, _basicprimitives.getInnerSize)(this.controlPanelRef.current),
+          width = _getInnerSize.width,
+          height = _getInnerSize.height;
 
-  fixPixelAlignment() {
-    const {
-      current
-    } = this.controlPanelRef;
-    var pixelAlignmentFix = getFixOfPixelALignment(current);
-    current.style.marginLeft = pixelAlignmentFix.width + "px";
-    current.style.marginTop = pixelAlignmentFix.height + "px";
-  }
-
-  onSizeChanged() {
-    const {
-      width,
-      height
-    } = getInnerSize(this.controlPanelRef.current);
-    this.setState({
-      viewportSize: {
-        width,
-        height
-      },
-      centerOnCursor: true
-    });
-  }
-
-  onScroll() {
-    if (this.timer == null) {
-      this.timer = setTimeout(this.onRefreshViewport, 200);
+      this.setState({
+        viewportSize: {
+          width: width,
+          height: height
+        },
+        centerOnCursor: true
+      });
     }
-  }
-
-  onRefreshViewport() {
-    clearTimeout(this.timer);
-    this.timer = null;
-    const {
-      scrollTop,
-      scrollLeft
-    } = this.scrollPanelRef.current;
-    this.setState({
-      contentPosition: {
-        x: Math.floor(scrollLeft),
-        y: Math.floor(scrollTop)
-      },
-      centerOnCursor: false
-    });
-  }
-
-  onFrameMouseMove(event) {
-    const placeholderOffset = getElementOffset(this.frameMousePanelRef.current),
+  }, {
+    key: "onScroll",
+    value: function onScroll() {
+      if (this.timer == null) {
+        this.timer = setTimeout(this.onRefreshViewport, 200);
+      }
+    }
+  }, {
+    key: "onRefreshViewport",
+    value: function onRefreshViewport() {
+      clearTimeout(this.timer);
+      this.timer = null;
+      var _this$scrollPanelRef$ = this.scrollPanelRef.current,
+          scrollTop = _this$scrollPanelRef$.scrollTop,
+          scrollLeft = _this$scrollPanelRef$.scrollLeft;
+      this.setState({
+        contentPosition: {
+          x: Math.floor(scrollLeft),
+          y: Math.floor(scrollTop)
+        },
+        centerOnCursor: false
+      });
+    }
+  }, {
+    key: "onFrameMouseMove",
+    value: function onFrameMouseMove(event) {
+      var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.frameMousePanelRef.current),
           x = event.pageX - placeholderOffset.left,
@@ -206,10 +244,11 @@ y = event.pageY - placeholderOffset.top,
 
-    if (highlightItemOptionTask.hasHighlightEnabled()) {
-      const itemId = projectItemsToFrameTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
-      this.setHighlightItem(event, itemId);
+      if (highlightItemOptionTask.hasHighlightEnabled()) {
+        var itemId = projectItemsToFrameTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
+        this.setHighlightItem(event, itemId);
+      }
     }
-  }
-
-  onFrameClick(event) {
-    const placeholderOffset = getElementOffset(this.frameMousePanelRef.current),
+  }, {
+    key: "onFrameClick",
+    value: function onFrameClick(event) {
+      var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.frameMousePanelRef.current),
           x = event.pageX - placeholderOffset.left,
@@ -222,12 +261,13 @@ y = event.pageY - placeholderOffset.top,
 
-    if (newCursorItemId !== null) {
-      if (cursorItemOptionTask.hasCursorEnabled()) {
-        this.setCursorItem(event, newCursorItemId);
-        this.controlPanelRef.current.focus();
+      if (newCursorItemId !== null) {
+        if (cursorItemOptionTask.hasCursorEnabled()) {
+          this.setCursorItem(event, newCursorItemId);
+          this.controlPanelRef.current.focus();
+        }
       }
     }
-  }
-
-  onMouseMove(event) {
-    const placeholderOffset = getElementOffset(this.mousePanelRef.current),
+  }, {
+    key: "onMouseMove",
+    value: function onMouseMove(event) {
+      var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current),
           x = event.pageX - placeholderOffset.left,
@@ -238,59 +278,63 @@ y = event.pageY - placeholderOffset.top,
 
-    if (highlightItemOptionTask.hasHighlightEnabled()) {
-      const itemId = createTransformTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
-      this.setHighlightItem(event, itemId);
+      if (highlightItemOptionTask.hasHighlightEnabled()) {
+        var itemId = createTransformTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
+        this.setHighlightItem(event, itemId);
+      }
     }
-  }
+  }, {
+    key: "getEventArgs",
+    value: function getEventArgs(oldTreeItemId, newTreeItemId, name) {
+      var result = new this.EventArgs(),
+          combinedContextsTask = this.tasks.getTask("CombinedContextsTask"),
+          alignDiagramTask = this.tasks.getTask("AlignDiagramTask"),
+          oldItemConfig = combinedContextsTask.getConfig(oldTreeItemId),
+          newItemConfig = combinedContextsTask.getConfig(newTreeItemId),
+          itemPosition,
+          offset,
+          panelOffset;
 
-  getEventArgs(oldTreeItemId, newTreeItemId, name) {
-    var result = new this.EventArgs(),
-        combinedContextsTask = this.tasks.getTask("CombinedContextsTask"),
-        alignDiagramTask = this.tasks.getTask("AlignDiagramTask"),
-        oldItemConfig = combinedContextsTask.getConfig(oldTreeItemId),
-        newItemConfig = combinedContextsTask.getConfig(newTreeItemId),
-        itemPosition,
-        offset,
-        panelOffset;
+      if (oldItemConfig && oldItemConfig.id != null) {
+        result.oldContext = oldItemConfig;
+      }
 
-    if (oldItemConfig && oldItemConfig.id != null) {
-      result.oldContext = oldItemConfig;
-    }
+      if (newItemConfig && newItemConfig.id != null) {
+        result.context = newItemConfig;
 
-    if (newItemConfig && newItemConfig.id != null) {
-      result.context = newItemConfig;
+        if (newItemConfig.parent !== null) {
+          result.parentItem = combinedContextsTask.getConfig(newItemConfig.parent);
+        }
 
-      if (newItemConfig.parent !== null) {
-        result.parentItem = combinedContextsTask.getConfig(newItemConfig.parent);
+        panelOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current);
+        offset = (0, _basicprimitives.getElementOffset)(this.scrollPanelRef.current);
+        itemPosition = alignDiagramTask.getItemPosition(newTreeItemId);
+        result.position = new _basicprimitives.Rect(itemPosition.actualPosition).translate(panelOffset.left, panelOffset.top).translate(-offset.left, -offset.top);
       }
 
-      panelOffset = getElementOffset(this.mousePanelRef.current);
-      offset = getElementOffset(this.scrollPanelRef.current);
-      itemPosition = alignDiagramTask.getItemPosition(newTreeItemId);
-      result.position = new Rect(itemPosition.actualPosition).translate(panelOffset.left, panelOffset.top).translate(-offset.left, -offset.top);
-    }
+      if (name != null) {
+        result.name = name;
+      }
 
-    if (name != null) {
-      result.name = name;
+      return result;
     }
+  }, {
+    key: "setHighlightItem",
+    value: function setHighlightItem(event, newHighlightItemId) {
+      var eventArgs,
+          cancel = false;
+      var _this$props = this.props,
+          onHighlightChanging = _this$props.onHighlightChanging,
+          onHighlightChanged = _this$props.onHighlightChanged;
+      var highlightItem = this.state.highlightItem;
 
-    return result;
-  }
+      if (newHighlightItemId !== highlightItem) {
+        eventArgs = this.getEventArgs(highlightItem, newHighlightItemId);
 
-  setHighlightItem(event, newHighlightItemId) {
-    let eventArgs,
-        cancel = false;
-    const {
-      onHighlightChanging,
-      onHighlightChanged
-    } = this.props;
-    const {
-      highlightItem
-    } = this.state;
-
-    if (newHighlightItemId !== highlightItem) {
-      eventArgs = this.getEventArgs(highlightItem, newHighlightItemId);
-
-      if (onHighlightChanging != null) {
-        if (!onHighlightChanging(event, eventArgs)) {
-          cancel = true;
+        if (onHighlightChanging != null) {
+          if (!onHighlightChanging(event, eventArgs)) {
+            cancel = true;
+            this.setState({
+              highlightItem: newHighlightItemId
+            });
+          }
+        } else {
           this.setState({
@@ -300,35 +344,34 @@ highlightItem: newHighlightItemId
         }
-      } else {
-        this.setState({
-          highlightItem: newHighlightItemId
-        });
-      }
 
-      ;
+        ;
 
-      if (!cancel) {
-        if (onHighlightChanged != null) {
-          onHighlightChanged(event, eventArgs);
+        if (!cancel) {
+          if (onHighlightChanged != null) {
+            onHighlightChanged(event, eventArgs);
+          }
         }
       }
     }
-  }
+  }, {
+    key: "setCursorItem",
+    value: function setCursorItem(event, newCursorItemId) {
+      var eventArgs,
+          cancel = false;
+      var _this$props2 = this.props,
+          onCursorChanging = _this$props2.onCursorChanging,
+          onCursorChanged = _this$props2.onCursorChanged;
+      var cursorItem = this.state.cursorItem;
 
-  setCursorItem(event, newCursorItemId) {
-    let eventArgs,
-        cancel = false;
-    const {
-      onCursorChanging,
-      onCursorChanged
-    } = this.props;
-    const {
-      cursorItem
-    } = this.state;
+      if (newCursorItemId !== cursorItem) {
+        eventArgs = this.getEventArgs(cursorItem, newCursorItemId);
 
-    if (newCursorItemId !== cursorItem) {
-      eventArgs = this.getEventArgs(cursorItem, newCursorItemId);
-
-      if (onCursorChanging != null) {
-        if (!onCursorChanging(event, eventArgs)) {
-          cancel = true;
+        if (onCursorChanging != null) {
+          if (!onCursorChanging(event, eventArgs)) {
+            cancel = true;
+            this.setState({
+              cursorItem: newCursorItemId,
+              centerOnCursor: true
+            });
+          }
+        } else {
           this.setState({
@@ -339,421 +382,478 @@ cursorItem: newCursorItemId,
         }
-      } else {
-        this.setState({
-          cursorItem: newCursorItemId,
-          centerOnCursor: true
-        });
-      }
 
-      if (!cancel) {
-        if (onCursorChanged != null) {
-          onCursorChanged(event, eventArgs);
+        if (!cancel) {
+          if (onCursorChanged != null) {
+            onCursorChanged(event, eventArgs);
+          }
         }
       }
     }
-  }
+  }, {
+    key: "onClick",
+    value: function onClick(event) {
+      var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current),
+          x = event.pageX - placeholderOffset.left,
+          y = event.pageY - placeholderOffset.top,
+          createTransformTask = this.tasks.getTask("CreateTransformTask"),
+          cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
+          highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
+          newCursorItemId = createTransformTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius()),
+          target;
+      target = event.target;
 
-  onClick(event) {
-    var placeholderOffset = getElementOffset(this.mousePanelRef.current),
-        x = event.pageX - placeholderOffset.left,
-        y = event.pageY - placeholderOffset.top,
-        createTransformTask = this.tasks.getTask("CreateTransformTask"),
-        cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
-        highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
-        newCursorItemId = createTransformTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius()),
-        target;
-    target = event.target;
-
-    if (newCursorItemId !== null) {
-      if (target.getAttribute("name") === "checkbox" || target.getAttribute("name") === "selectiontext") {//ignore jslint
-      } else {
-        if (cursorItemOptionTask.hasCursorEnabled()) {
-          this.setCursorItem(event, newCursorItemId);
-          this.controlPanelRef.current.focus();
+      if (newCursorItemId !== null) {
+        if (target.getAttribute("name") === "checkbox" || target.getAttribute("name") === "selectiontext") {//ignore jslint
+        } else {
+          if (cursorItemOptionTask.hasCursorEnabled()) {
+            this.setCursorItem(event, newCursorItemId);
+            this.controlPanelRef.current.focus();
+          }
         }
       }
     }
-  }
+  }, {
+    key: "onCheckboxChange",
+    value: function onCheckboxChange(event) {
+      var _this$props3 = this.props,
+          onSelectionChanging = _this$props3.onSelectionChanging,
+          onSelectionChanged = _this$props3.onSelectionChanged;
+      var selectedItems = this.state.selectedItems;
+      var newSelectedItems = [];
+      var target = event.target;
+      var itemid = target.getAttribute("data-id");
+      var checked = event.target.checked;
+      var cancel = false;
 
-  onCheckboxChange(event) {
-    const {
-      onSelectionChanging,
-      onSelectionChanged
-    } = this.props;
-    let {
-      selectedItems
-    } = this.state;
-    let newSelectedItems = [];
-    const {
-      target
-    } = event;
-    var itemid = target.getAttribute("data-id");
-    const checked = event.target.checked;
-    let cancel = false;
+      if (itemid != null) {
+        if (checked) {
+          newSelectedItems = [].concat(_toConsumableArray(selectedItems), [itemid]);
+        } else {
+          // eslint-disable-next-line
+          newSelectedItems = selectedItems.filter(function (id) {
+            return id != itemid;
+          }); // User type may not mach string value in data attribute
+        }
 
-    if (itemid != null) {
-      if (checked) {
-        newSelectedItems = [...selectedItems, itemid];
-      } else {
-        // eslint-disable-next-line
-        newSelectedItems = selectedItems.filter(id => id != itemid); // User type may not mach string value in data attribute
-      }
+        if (onSelectionChanging != null) {
+          cancel = onSelectionChanging(event, selectedItems, newSelectedItems);
+        }
 
-      if (onSelectionChanging != null) {
-        cancel = onSelectionChanging(event, selectedItems, newSelectedItems);
-      }
+        if (!cancel) {
+          this.setState({
+            selectedItems: newSelectedItems
+          });
 
-      if (!cancel) {
-        this.setState({
-          selectedItems: newSelectedItems
-        });
-
-        if (onSelectionChanged != null) {
-          onSelectionChanged(event, selectedItems, newSelectedItems);
+          if (onSelectionChanged != null) {
+            onSelectionChanged(event, selectedItems, newSelectedItems);
+          }
         }
       }
     }
-  }
+  }, {
+    key: "onKeyDown",
+    value: function onKeyDown(event) {
+      var highlightItemTask = this.tasks.getTask("HighlightItemTask"),
+          highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
+          cursorItemTask = this.tasks.getTask("CursorItemTask"),
+          cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
+          alignDiagramTask = this.tasks.getTask('AlignDiagramTask'),
+          createTransformTask = this.tasks.getTask('CreateTransformTask'),
+          transform = createTransformTask.getTransform(),
+          navigationItem = null,
+          newNavigationItem,
+          direction = null,
+          accepted;
 
-  onKeyDown(event) {
-    var highlightItemTask = this.tasks.getTask("HighlightItemTask"),
-        highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
-        cursorItemTask = this.tasks.getTask("CursorItemTask"),
-        cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
-        alignDiagramTask = this.tasks.getTask('AlignDiagramTask'),
-        createTransformTask = this.tasks.getTask('CreateTransformTask'),
-        transform = createTransformTask.getTransform(),
-        navigationItem = null,
-        newNavigationItem,
-        direction = null,
-        accepted;
+      if (highlightItemOptionTask.hasHighlightEnabled() && cursorItemOptionTask.hasCursorEnabled()) {
+        navigationItem = highlightItemTask.getHighlightTreeItem();
 
-    if (highlightItemOptionTask.hasHighlightEnabled() && cursorItemOptionTask.hasCursorEnabled()) {
-      navigationItem = highlightItemTask.getHighlightTreeItem();
-
-      if (navigationItem === null) {
+        if (navigationItem === null) {
+          navigationItem = cursorItemTask.getCursorTreeItem();
+        }
+      } else if (highlightItemOptionTask.hasHighlightEnabled()) {
+        navigationItem = highlightItemTask.getHighlightTreeItem();
+      } else if (cursorItemOptionTask.hasCursorEnabled()) {
         navigationItem = cursorItemTask.getCursorTreeItem();
       }
-    } else if (highlightItemOptionTask.hasHighlightEnabled()) {
-      navigationItem = highlightItemTask.getHighlightTreeItem();
-    } else if (cursorItemOptionTask.hasCursorEnabled()) {
-      navigationItem = cursorItemTask.getCursorTreeItem();
-    }
 
-    if (navigationItem != null) {
-      switch (event.which) {
-        case 13:
-          /*Enter*/
-          if (cursorItemOptionTask.hasCursorEnabled()) {
-            this.setCursorItem(event, navigationItem);
-            event.preventDefault();
-            this.controlPanelRef.current.focus();
-          }
+      if (navigationItem != null) {
+        switch (event.which) {
+          case 13:
+            /*Enter*/
+            if (cursorItemOptionTask.hasCursorEnabled()) {
+              this.setCursorItem(event, navigationItem);
+              event.preventDefault();
+              this.controlPanelRef.current.focus();
+            }
 
-          break;
+            break;
 
-        case 40:
-          /*Down*/
-          direction = OrientationType.Bottom;
-          break;
+          case 40:
+            /*Down*/
+            direction = _basicprimitives.OrientationType.Bottom;
+            break;
 
-        case 38:
-          /*Up*/
-          direction = OrientationType.Top;
-          break;
+          case 38:
+            /*Up*/
+            direction = _basicprimitives.OrientationType.Top;
+            break;
 
-        case 37:
-          /*Left*/
-          direction = OrientationType.Left;
-          break;
+          case 37:
+            /*Left*/
+            direction = _basicprimitives.OrientationType.Left;
+            break;
 
-        case 39:
-          /*Right*/
-          direction = OrientationType.Right;
-          break;
+          case 39:
+            /*Right*/
+            direction = _basicprimitives.OrientationType.Right;
+            break;
 
-        default:
-          break;
-      }
+          default:
+            break;
+        }
 
-      if (direction != null) {
-        accepted = false;
+        if (direction != null) {
+          accepted = false;
 
-        while (!accepted) {
-          accepted = true;
-          direction = transform.getOrientation(direction);
-          newNavigationItem = alignDiagramTask.getNextItem(navigationItem, direction);
+          while (!accepted) {
+            accepted = true;
+            direction = transform.getOrientation(direction);
+            newNavigationItem = alignDiagramTask.getNextItem(navigationItem, direction);
 
-          if (newNavigationItem != null) {
-            event.preventDefault();
+            if (newNavigationItem != null) {
+              event.preventDefault();
 
-            if (highlightItemOptionTask.hasHighlightEnabled()) {
-              this.setHighlightItem(event, newNavigationItem);
-            } else if (cursorItemOptionTask.hasCursorEnabled()) {
-              this.setCursorItem(event, newNavigationItem);
+              if (highlightItemOptionTask.hasHighlightEnabled()) {
+                this.setHighlightItem(event, newNavigationItem);
+              } else if (cursorItemOptionTask.hasCursorEnabled()) {
+                this.setCursorItem(event, newNavigationItem);
+              }
             }
           }
+
+          this.controlPanelRef.current.focus();
         }
-
-        this.controlPanelRef.current.focus();
       }
     }
-  }
+  }, {
+    key: "onItemRender",
+    value: function onItemRender(data) {
+      var templateName = data.templateName;
+      var template = this.templatesHash[templateName];
+      return template.onItemRender(data);
+    }
+  }, {
+    key: "onHighlightRender",
+    value: function onHighlightRender(data) {
+      var templateName = data.templateName;
+      var template = this.templatesHash[templateName];
+      return template.onHighlightRender(data);
+    }
+  }, {
+    key: "onCursorRender",
+    value: function onCursorRender(data) {
+      var templateName = data.templateName;
+      var template = this.templatesHash[templateName];
+      return template.onCursorRender(data);
+    }
+  }, {
+    key: "getOptions",
+    value: function getOptions() {
+      var config = this.props.config;
+      var templates = config.templates || [];
+      var effectiveTemplates = templates.map(function (template) {
+        var onItemRender = template.onItemRender,
+            onHighlightRender = template.onHighlightRender,
+            onCursorRender = template.onCursorRender;
+        return _objectSpread(_objectSpread({}, template), {}, {
+          itemTemplate: !onItemRender ? null : "<p>This template is not being used in React</p>",
+          highlightTemplate: !onHighlightRender ? null : "<p>This template is not being used in React</p>",
+          cursorTemplate: !onCursorRender ? null : "<p>This template is not being used in React</p>"
+        });
+      });
+      this.templatesHash = templates.reduce(function (agg, template) {
+        var name = template.name;
+        agg[name] = template;
+        return agg;
+      }, {});
+      var _this$state = this.state,
+          highlightItem = _this$state.highlightItem,
+          cursorItem = _this$state.cursorItem,
+          selectedItems = _this$state.selectedItems;
+      return _objectSpread(_objectSpread({}, config), {}, {
+        templates: effectiveTemplates,
+        highlightItem: highlightItem,
+        cursorItem: cursorItem,
+        selectedItems: selectedItems,
+        onItemRender: this.onItemRender,
+        onCursorRender: this.onCursorRender,
+        onHighlightRender: this.onHighlightRender
+      });
+    }
+  }, {
+    key: "getGraphics",
+    value: function getGraphics() {
+      return this.graphics;
+    }
+  }, {
+    key: "getLayout",
+    value: function getLayout() {
+      var _this$state2 = this.state,
+          centerOnCursor = _this$state2.centerOnCursor,
+          viewportSize = _this$state2.viewportSize,
+          contentPosition = _this$state2.contentPosition;
+      return {
+        forceCenterOnCursor: centerOnCursor,
+        scrollPanelSize: new _basicprimitives.Size(viewportSize),
+        placeholderOffset: new _basicprimitives.Point(contentPosition)
+      };
+    }
+  }, {
+    key: "setLayout",
+    value: function setLayout(layoutOptions) {
+      var autoSize = layoutOptions.autoSize,
+          controlSize = layoutOptions.controlSize,
+          scale = layoutOptions.scale,
+          frameMousePanelRect = layoutOptions.frameMousePanelRect,
+          framePlaceholderSize = layoutOptions.framePlaceholderSize,
+          titlesMousePanelRect = layoutOptions.titlesMousePanelRect,
+          titlesPlaceholderSize = layoutOptions.titlesPlaceholderSize,
+          scrollPanelRect = layoutOptions.scrollPanelRect,
+          mousePanelSize = layoutOptions.mousePanelSize,
+          placeholderSize = layoutOptions.placeholderSize;
+      this.layoutOptions = {
+        autoSize: autoSize,
+        controlSize: new _basicprimitives.Size(controlSize),
+        scale: scale,
+        frameMousePanelRect: new _basicprimitives.Rect(frameMousePanelRect),
+        framePlaceholderSize: new _basicprimitives.Size(framePlaceholderSize),
+        titlesMousePanelRect: new _basicprimitives.Rect(titlesMousePanelRect),
+        titlesPlaceholderSize: new _basicprimitives.Size(titlesPlaceholderSize),
+        scrollPanelRect: new _basicprimitives.Rect(scrollPanelRect),
+        mousePanelSize: new _basicprimitives.Size(mousePanelSize),
+        placeholderSize: new _basicprimitives.Size(placeholderSize)
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var graphics = this.graphics;
+      this.tasks.process('OptionsTask', null, false);
+      var _this$graphics$placeh = this.graphics.placeholders,
+          placeholder = _this$graphics$placeh.placeholder,
+          calloutplaceholder = _this$graphics$placeh.calloutplaceholder,
+          frameplaceholder = _this$graphics$placeh.frameplaceholder,
+          titlesplaceholder = _this$graphics$placeh.titlesplaceholder;
+      var placeholderRectCSS = placeholder.rect.getCSS();
+      var _this$layoutOptions = this.layoutOptions,
+          autoSize = _this$layoutOptions.autoSize,
+          controlSize = _this$layoutOptions.controlSize,
+          scale = _this$layoutOptions.scale,
+          frameMousePanelRect = _this$layoutOptions.frameMousePanelRect,
+          titlesMousePanelRect = _this$layoutOptions.titlesMousePanelRect,
+          scrollPanelRect = _this$layoutOptions.scrollPanelRect,
+          mousePanelSize = _this$layoutOptions.mousePanelSize;
+      /* set CSS scale of content */
 
-  onItemRender(data) {
-    const {
-      templateName
-    } = data;
-    const template = this.templatesHash[templateName];
-    return template.onItemRender(data);
-  }
+      var scaletext = "scale(" + scale + "," + scale + ")";
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        /* root control panel */
+        ref: this.controlPanelRef,
+        onKeyDown: this.onKeyDown,
+        style: _objectSpread({
+          position: "relative",
+          overflow: "hidden",
+          top: "0px",
+          left: "0px",
+          width: "100%",
+          height: "100%",
+          padding: "0px",
+          marginBottom: "0px",
+          marginRight: "0px"
+        }, autoSize ? controlSize.getCSS() : {}),
+        tabIndex: "0"
+      }, frameplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.frameMousePanelRef,
+        onMouseMove: this.onFrameMouseMove,
+        onClick: this.onFrameClick,
+        style: _objectSpread({
+          position: "absolute",
+          overflow: "hidden"
+        }, frameMousePanelRect.getCSS())
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.framePlaceholderRef,
+        style: _objectSpread(_objectSpread({}, frameplaceholder.rect.getCSS()), {}, {
+          position: "absolute",
+          overflow: "hidden",
+          "transformOrigin": "0 0",
+          "transform": scaletext,
+          "msTransform": scaletext,
 
-  onHighlightRender(data) {
-    const {
-      templateName
-    } = data;
-    const template = this.templatesHash[templateName];
-    return template.onHighlightRender(data);
-  }
+          /* IE 9 */
+          "WebkitTransform": scaletext,
 
-  onCursorRender(data) {
-    const {
-      templateName
-    } = data;
-    const template = this.templatesHash[templateName];
-    return template.onCursorRender(data);
-  }
+          /* Safari and Chrome */
+          "OTransform": scaletext,
 
-  getOptions() {
-    const {
-      config
-    } = this.props;
-    const templates = config.templates || [];
-    const effectiveTemplates = templates.map(template => {
-      const {
-        onItemRender,
-        onHighlightRender,
-        onCursorRender
-      } = template;
-      return { ...template,
-        itemTemplate: !onItemRender ? null : "<p>This template is not being used in React</p>",
-        highlightTemplate: !onHighlightRender ? null : "<p>This template is not being used in React</p>",
-        cursorTemplate: !onCursorRender ? null : "<p>This template is not being used in React</p>"
-      };
-    });
-    this.templatesHash = templates.reduce((agg, template) => {
-      const {
-        name
-      } = template;
-      agg[name] = template;
-      return agg;
-    }, {});
-    const {
-      highlightItem,
-      cursorItem,
-      selectedItems
-    } = this.state;
-    return { ...config,
-      templates: effectiveTemplates,
-      highlightItem,
-      cursorItem,
-      selectedItems,
-      onItemRender: this.onItemRender,
-      onCursorRender: this.onCursorRender,
-      onHighlightRender: this.onHighlightRender
-    };
-  }
+          /* Opera */
+          "MozTransform": scaletext
+          /* Firefox */
 
-  getGraphics() {
-    return this.graphics;
-  }
+        })
+      }, graphics.map(this, "frameplaceholder", function (layerKey, elements) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: layerKey,
+          style: {
+            position: "absolute",
+            overflow: "visible",
+            left: "0px",
+            top: "0px"
+          }
+        }, elements);
+      }))), titlesplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.titlesMousePanelRef,
+        onMouseMove: this.onFrameMouseMove,
+        onClick: this.onFrameClick,
+        style: _objectSpread({
+          position: "absolute",
+          overflow: "hidden"
+        }, titlesMousePanelRect.getCSS())
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.titlesMousePanelRef,
+        style: _objectSpread(_objectSpread({}, titlesplaceholder.rect.getCSS()), {}, {
+          position: "absolute",
+          overflow: "hidden",
+          "transformOrigin": "0 0",
+          "transform": scaletext,
+          "msTransform": scaletext,
 
-  getLayout() {
-    const {
-      centerOnCursor,
-      viewportSize,
-      contentPosition
-    } = this.state;
-    return {
-      forceCenterOnCursor: centerOnCursor,
-      scrollPanelSize: new Size(viewportSize),
-      placeholderOffset: new Point(contentPosition)
-    };
-  }
+          /* IE 9 */
+          "WebkitTransform": scaletext,
 
-  setLayout(layoutOptions) {
-    const {
-      autoSize,
-      scale,
-      scaledContentSize,
-      viewportSize,
-      frameThickness,
-      controlSize
-    } = layoutOptions;
-    this.layoutOptions = {
-      autoSize,
-      scale,
-      scaledContentSize: new Size(scaledContentSize),
-      viewportSize: new Size(viewportSize),
-      frameThickness: new Thickness(frameThickness),
-      controlSize: new Size(controlSize)
-    };
-  }
+          /* Safari and Chrome */
+          "OTransform": scaletext,
 
-  render() {
-    const graphics = this.graphics;
-    this.tasks.process('OptionsTask', null, false);
-    const {
-      placeholder,
-      calloutplaceholder,
-      frameplaceholder
-    } = this.graphics.placeholders;
-    const placeholderRectCSS = placeholder.rect.getCSS();
-    const {
-      autoSize,
-      scale,
-      scaledContentSize,
-      viewportSize,
-      frameThickness,
-      controlSize
-    } = this.layoutOptions;
-    /* set CSS scale of content */
+          /* Opera */
+          "MozTransform": scaletext
+          /* Firefox */
 
-    var scaletext = "scale(" + scale + "," + scale + ")";
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      /* root control panel */
-      ref: this.controlPanelRef,
-      onKeyDown: this.onKeyDown,
-      style: {
-        position: "relative",
-        overflow: "hidden",
-        top: "0px",
-        left: "0px",
-        width: "100%",
-        height: "100%",
-        padding: "0px",
-        marginBottom: "0px",
-        marginRight: "0px",
-        ...(autoSize ? controlSize.getCSS() : {})
-      },
-      tabIndex: "0"
-    }, !frameThickness.isEmpty() && /*#__PURE__*/React.createElement("div", {
-      ref: this.frameMousePanelRef,
-      onMouseMove: this.onFrameMouseMove,
-      onClick: this.onFrameClick,
-      style: {
-        position: "absolute",
-        overflow: "hidden",
-        ...controlSize.getCSS()
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.framePlaceholderRef,
-      style: { ...frameplaceholder.rect.getCSS(),
-        position: "absolute",
-        overflow: "hidden",
-        "transformOrigin": "0 0",
-        "transform": scaletext,
-        "msTransform": scaletext,
+        })
+      }, graphics.map(this, "titlesplaceholder", function (layerKey, elements) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: layerKey,
+          style: {
+            position: "absolute",
+            overflow: "visible",
+            left: "0px",
+            top: "0px"
+          }
+        }, elements);
+      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.scrollPanelRef,
+        onScroll: this.onScroll,
+        style: _objectSpread(_objectSpread({
+          position: "absolute",
+          overflow: "auto",
+          WebkitOverflowScrolling: "touch"
+        }, scrollPanelRect.getCSS()), {}, {
+          border: scrollPanelRect.x > 0 ? "1px dotted #dddddd" : ""
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.mousePanelRef,
+        onMouseMove: this.onMouseMove,
+        onClick: this.onClick,
+        onChange: this.onCheckboxChange,
+        style: _objectSpread({
+          position: "absolute",
+          overflow: "hidden"
+        }, mousePanelSize.getCSS())
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.placeholderRef,
+        style: _objectSpread(_objectSpread({}, placeholderRectCSS), {}, {
+          position: "absolute",
+          overflow: "hidden",
+          "transformOrigin": "0 0",
+          "transform": scaletext,
+          "msTransform": scaletext,
 
-        /* IE 9 */
-        "WebkitTransform": scaletext,
+          /* IE 9 */
+          "WebkitTransform": scaletext,
 
-        /* Safari and Chrome */
-        "OTransform": scaletext,
+          /* Safari and Chrome */
+          "OTransform": scaletext,
 
-        /* Opera */
-        "MozTransform": scaletext
-        /* Firefox */
+          /* Opera */
+          "MozTransform": scaletext
+          /* Firefox */
 
+        })
+      }, graphics.map(this, "placeholder", function (layerKey, elements) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: layerKey,
+          style: {
+            position: "absolute",
+            overflow: "visible",
+            left: "0px",
+            top: "0px"
+          }
+        }, elements);
+      }), calloutplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
+        key: "Callout",
+        style: {
+          position: "absolute",
+          overflow: "visible",
+          left: calloutplaceholder.rect.x + "px",
+          top: calloutplaceholder.rect.y + "px"
+        }
+      }, graphics.map(this, "calloutplaceholder", function (layerKey, elements) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: layerKey,
+          style: {
+            position: "absolute",
+            overflow: "visible"
+          }
+        }, elements);
+      })))))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, state) {
+      var nextConfig = nextProps.config,
+          centerOnCursor = nextProps.centerOnCursor;
+      var config = state.config;
+
+      if (config !== nextConfig) {
+        var highlightItem = nextConfig.highlightItem,
+            cursorItem = nextConfig.cursorItem,
+            selectedItems = nextConfig.selectedItems;
+        return {
+          config: nextConfig,
+          highlightItem: highlightItem,
+          cursorItem: cursorItem,
+          selectedItems: (selectedItems || []).slice(),
+          centerOnCursor: centerOnCursor
+        };
       }
-    }, graphics.map(this, "frameplaceholder", (layerKey, elements) => /*#__PURE__*/React.createElement("div", {
-      key: layerKey,
-      style: {
-        position: "absolute",
-        overflow: "visible",
-        left: "0px",
-        top: "0px"
-      }
-    }, elements)))), /*#__PURE__*/React.createElement("div", {
-      ref: this.scrollPanelRef,
-      onScroll: this.onScroll,
-      style: {
-        position: "absolute",
-        overflow: "auto",
-        WebkitOverflowScrolling: "touch",
-        left: frameThickness.left + "px",
-        top: frameThickness.top + "px",
-        ...viewportSize.getCSS(),
-        border: !frameThickness.isEmpty() ? "1px dotted #dddddd" : ""
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.mousePanelRef,
-      onMouseMove: this.onMouseMove,
-      onClick: this.onClick,
-      onChange: this.onCheckboxChange,
-      style: {
-        position: "absolute",
-        overflow: "hidden",
-        ...scaledContentSize.getCSS()
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.placeholderRef,
-      style: { ...placeholderRectCSS,
-        position: "absolute",
-        overflow: "hidden",
-        "transformOrigin": "0 0",
-        "transform": scaletext,
-        "msTransform": scaletext,
 
-        /* IE 9 */
-        "WebkitTransform": scaletext,
+      return null;
+    }
+  }]);
 
-        /* Safari and Chrome */
-        "OTransform": scaletext,
+  return BaseDiagram;
+}(_react.Component);
 
-        /* Opera */
-        "MozTransform": scaletext
-        /* Firefox */
-
-      }
-    }, graphics.map(this, "placeholder", (layerKey, elements) => /*#__PURE__*/React.createElement("div", {
-      key: layerKey,
-      style: {
-        position: "absolute",
-        overflow: "visible",
-        left: "0px",
-        top: "0px"
-      }
-    }, elements)), calloutplaceholder && /*#__PURE__*/React.createElement("div", {
-      key: "Callout",
-      style: {
-        position: "absolute",
-        overflow: "visible",
-        left: calloutplaceholder.rect.x + "px",
-        top: calloutplaceholder.rect.y + "px"
-      }
-    }, graphics.map(this, "calloutplaceholder", (layerKey, elements) => /*#__PURE__*/React.createElement("div", {
-      key: layerKey,
-      style: {
-        position: "absolute",
-        overflow: "visible"
-      }
-    }, elements))))))));
-  }
-
-}
-
 _defineProperty(BaseDiagram, "propTypes", {
-  centerOnCursor: PropTypes.bool,
+  centerOnCursor: _propTypes["default"].bool,
   // eslint-disable-line react/no-unused-prop-types
-  onHighlightChanging: PropTypes.func,
+  onHighlightChanging: _propTypes["default"].func,
   // eslint-disable-line react/no-unused-prop-types
-  onHighlightChanged: PropTypes.func,
+  onHighlightChanged: _propTypes["default"].func,
   // eslint-disable-line react/no-unused-prop-types
-  onCursorChanging: PropTypes.func,
+  onCursorChanging: _propTypes["default"].func,
   // eslint-disable-line react/no-unused-prop-types
-  onCursorChanged: PropTypes.func,
+  onCursorChanged: _propTypes["default"].func,
   // eslint-disable-line react/no-unused-prop-types
-  onSelectionChanging: PropTypes.func,
+  onSelectionChanging: _propTypes["default"].func,
   // eslint-disable-line react/no-unused-prop-types
-  onSelectionChanged: PropTypes.func // eslint-disable-line react/no-unused-prop-types
+  onSelectionChanged: _propTypes["default"].func // eslint-disable-line react/no-unused-prop-types
 
@@ -772,2 +872,3 @@ });
 
-export default BaseDiagram;
+var _default = BaseDiagram;
+exports["default"] = _default;

dist/esm/FamDiagram.js

@@ -0,19 +1,56 @@
+"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 _basicprimitives = require("basicprimitives");
+
+var _BaseDiagram2 = _interopRequireDefault(require("./BaseDiagram"));
+
+var _FamConfigShape = _interopRequireDefault(require("./Schemas/FamConfigShape"));
+
+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 _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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; }
 
-import { FamTaskManagerFactory, FamEventArgs } from 'basicprimitives';
-import BaseDiagram from './BaseDiagram';
-import FamConfigShape from './Schemas/FamConfigShape';
+var FamDiagram = /*#__PURE__*/function (_BaseDiagram) {
+  _inherits(FamDiagram, _BaseDiagram);
 
-class FamDiagram extends BaseDiagram {
-  constructor(props) {
-    super(props, FamTaskManagerFactory, FamEventArgs);
+  var _super = _createSuper(FamDiagram);
+
+  function FamDiagram(props) {
+    _classCallCheck(this, FamDiagram);
+
+    return _super.call(this, props, _basicprimitives.FamTaskManagerFactory, _basicprimitives.FamEventArgs);
   }
 
-}
+  return FamDiagram;
+}(_BaseDiagram2["default"]);
 
 _defineProperty(FamDiagram, "propTypes", {
-  config: FamConfigShape.isRequired // eslint-disable-line react/no-unused-prop-types
+  config: _FamConfigShape["default"].isRequired // eslint-disable-line react/no-unused-prop-types
 
 });
 
-export default FamDiagram;
+var _default = FamDiagram;
+exports["default"] = _default;

dist/esm/Graphics.js

@@ -1,22 +0,46 @@
-import React from 'react';
-import { LineType, Layers, SegmentType, Rect, Size } from 'basicprimitives';
-import RotatedText from './Templates/RotatedText';
+"use strict";
 
-class Placeholder {
-  constructor(name) {
-    this.name = name;
-    this.layers = {};
-    this.activeLayer = null;
-    this.size = null;
-    this.rect = null;
-    this.hasGraphics = true;
-    this.isVisible = true;
-  }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-}
+var _react = _interopRequireDefault(require("react"));
 
+var _basicprimitives = require("basicprimitives");
+
+var _RotatedText = _interopRequireDefault(require("./Templates/RotatedText"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Placeholder = function Placeholder(name) {
+  _classCallCheck(this, Placeholder);
+
+  this.name = name;
+  this.layers = {};
+  this.activeLayer = null;
+  this.size = null;
+  this.rect = null;
+  this.hasGraphics = true;
+  this.isVisible = true;
+};
+
 ;
 
-class Layer {
-  constructor(name) {
+var Layer = /*#__PURE__*/function () {
+  function Layer(name) {
+    _classCallCheck(this, Layer);
+
     this.name = name;
@@ -27,13 +51,19 @@ this.items = [];
 
-  reset() {
-    this.items = [];
-    this.polylines = [];
-  }
+  _createClass(Layer, [{
+    key: "reset",
+    value: function reset() {
+      this.items = [];
+      this.polylines = [];
+    }
+  }]);
 
-}
+  return Layer;
+}();
 
 ;
 
-class Graphics {
-  constructor(size) {
+var Graphics = /*#__PURE__*/function () {
+  function Graphics(size) {
+    _classCallCheck(this, Graphics);
+
     this.placeholders = {};
@@ -43,4 +73,4 @@ this.activePlaceholder = null;
     this.hasGraphics = true;
-    this.names = Object.keys(Layers).reduce((agg, key) => {
-      agg[Layers[key]] = key;
+    this.names = Object.keys(_basicprimitives.Layers).reduce(function (agg, key) {
+      agg[_basicprimitives.Layers[key]] = key;
       return agg;
@@ -53,315 +83,333 @@ }, []);
 
-  clean() {
-    this.placeholders = {};
-    this.activePlaceholder = null;
-  }
+  _createClass(Graphics, [{
+    key: "clean",
+    value: function clean() {
+      this.placeholders = {};
+      this.activePlaceholder = null;
+    }
+  }, {
+    key: "resize",
+    value: function resize(name, width, height) {
+      this.activatePlaceholder(name);
+      this.resizePlaceholder(this.activePlaceholder, 0, 0, width, height);
+    }
+  }, {
+    key: "position",
+    value: function position(name, left, top, width, height) {
+      this.activatePlaceholder(name);
+      this.resizePlaceholder(this.activePlaceholder, left, top, width, height);
+    }
+  }, {
+    key: "show",
+    value: function show(name) {
+      var placeholder = this.placeholders[name];
 
-  resize(name, width, height) {
-    this.activatePlaceholder(name);
-    this.resizePlaceholder(this.activePlaceholder, 0, 0, width, height);
-  }
-
-  position(name, left, top, width, height) {
-    this.activatePlaceholder(name);
-    this.resizePlaceholder(this.activePlaceholder, left, top, width, height);
-  }
-
-  show(name) {
-    var placeholder = this.placeholders[name];
-
-    if (placeholder != null) {
-      placeholder.isVisible = true;
+      if (placeholder != null) {
+        placeholder.isVisible = true;
+      }
     }
-  }
+  }, {
+    key: "hide",
+    value: function hide(name) {
+      var placeholder = this.placeholders[name];
 
-  hide(name) {
-    var placeholder = this.placeholders[name];
-
-    if (placeholder != null) {
-      placeholder.isVisible = false;
+      if (placeholder != null) {
+        placeholder.isVisible = false;
+      }
     }
-  }
+  }, {
+    key: "resizePlaceholder",
+    value: function resizePlaceholder(placeholder, left, top, width, height) {
+      placeholder.size = new _basicprimitives.Size(width, height);
+      placeholder.rect = new _basicprimitives.Rect(left, top, width, height);
+    }
+  }, {
+    key: "reset",
+    value: function reset(placeholderName, layerKey) {
+      var layerName = this.names[layerKey];
+      var placeholder = this.placeholders[placeholderName];
 
-  resizePlaceholder(placeholder, left, top, width, height) {
-    placeholder.size = new Size(width, height);
-    placeholder.rect = new Rect(left, top, width, height);
-  }
+      if (placeholder != null) {
+        var layer = placeholder.layers[layerName];
 
-  reset(placeholderName, layerKey) {
-    const layerName = this.names[layerKey];
-    const placeholder = this.placeholders[placeholderName];
-
-    if (placeholder != null) {
-      const layer = placeholder.layers[layerName];
-
-      if (layer != null) {
-        layer.reset();
+        if (layer != null) {
+          layer.reset();
+        }
       }
     }
-  }
+  }, {
+    key: "activate",
+    value: function activate(placeholderName, layerKey) {
+      this.activatePlaceholder(placeholderName);
+      this.activateLayer(layerKey);
+      return this.activePlaceholder;
+    }
+  }, {
+    key: "activatePlaceholder",
+    value: function activatePlaceholder(name) {
+      var placeholder = this.placeholders[name];
 
-  activate(placeholderName, layerKey) {
-    this.activatePlaceholder(placeholderName);
-    this.activateLayer(layerKey);
-    return this.activePlaceholder;
-  }
+      if (placeholder === undefined) {
+        placeholder = new Placeholder(name);
+        placeholder.size = this.size;
+        placeholder.rect = new _basicprimitives.Rect(0, 0, placeholder.size.width, placeholder.size.height);
+        this.placeholders[name] = placeholder;
+      }
 
-  activatePlaceholder(name) {
-    let placeholder = this.placeholders[name];
-
-    if (placeholder === undefined) {
-      placeholder = new Placeholder(name);
-      placeholder.size = this.size;
-      placeholder.rect = new Rect(0, 0, placeholder.size.width, placeholder.size.height);
-      this.placeholders[name] = placeholder;
+      this.activePlaceholder = placeholder;
     }
+  }, {
+    key: "activateLayer",
+    value: function activateLayer(value) {
+      var name = this.names[value];
+      var layer = this.activePlaceholder.layers[name];
 
-    this.activePlaceholder = placeholder;
-  }
+      if (layer === undefined) {
+        layer = new Layer(name);
+        this.activePlaceholder.layers[name] = layer;
+      }
 
-  activateLayer(value) {
-    const name = this.names[value];
-    let layer = this.activePlaceholder.layers[name];
-
-    if (layer === undefined) {
-      layer = new Layer(name);
-      this.activePlaceholder.layers[name] = layer;
+      this.activePlaceholder.activeLayer = layer;
     }
+  }, {
+    key: "map",
+    value: function map(thisArg, placeholderName, onLayer) {
+      var result = [];
 
-    this.activePlaceholder.activeLayer = layer;
-  }
+      if (onLayer != null) {
+        var placeholder = this.placeholders[placeholderName];
+        this.names.forEach(function (layerKey) {
+          var layer = placeholder.layers[layerKey];
 
-  map(thisArg, placeholderName, onLayer) {
-    var result = [];
+          if (layer != null) {
+            result.push(onLayer.call(thisArg, layerKey, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, layer.polylines.length > 0 ? /*#__PURE__*/_react["default"].createElement("svg", {
+              height: placeholder.size.height,
+              width: placeholder.size.width
+            }, layer.polylines) : null, layer.items)));
+          }
+        });
+      }
 
-    if (onLayer != null) {
-      const placeholder = this.placeholders[placeholderName];
-      this.names.forEach(layerKey => {
-        const layer = placeholder.layers[layerKey];
-
-        if (layer != null) {
-          result.push(onLayer.call(thisArg, layerKey, /*#__PURE__*/React.createElement(React.Fragment, null, layer.polylines.length > 0 ? /*#__PURE__*/React.createElement("svg", {
-            height: placeholder.size.height,
-            width: placeholder.size.width
-          }, layer.polylines) : null, layer.items)));
+      return result;
+    }
+  }, {
+    key: "text",
+    value: function text(x, y, width, height, label, orientation, horizontalAlignment, verticalAlignment, attr) {
+      this.activePlaceholder.activeLayer.items.push( /*#__PURE__*/_react["default"].createElement("div", {
+        key: this.activePlaceholder.activeLayer.items.length,
+        style: _objectSpread(_objectSpread({
+          position: "absolute",
+          overflow: "visible",
+          fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
+          WebkitTapHighlightColor: "rgba(0,0,0,0)",
+          WebkitUserSelect: "none",
+          WebkitTouchCallout: "none",
+          KhtmlUserSelect: "none",
+          MozUserSelect: "none",
+          msUserSelect: "none",
+          userSelect: "none",
+          boxSizing: "content-box"
+        }, attr), {}, {
+          top: y + "px",
+          left: x + "px"
+        })
+      }, /*#__PURE__*/_react["default"].createElement(_RotatedText["default"], {
+        width: width,
+        height: height,
+        orientation: this.orientations[orientation],
+        horizontalAlignment: this.horizontalAlignments[horizontalAlignment],
+        verticalAlignment: this.verticalAlignments[verticalAlignment]
+      }, label)));
+    }
+  }, {
+    key: "polylinesBuffer",
+    value: function polylinesBuffer(buffer) {
+      buffer.loop(this, function (polyline) {
+        if (polyline.length() > 0) {
+          this.polyline(polyline);
         }
       });
     }
+  }, {
+    key: "polyline",
+    value: function polyline(polylineData) {
+      var data,
+          attr = polylineData.paletteItem.toAttr(),
+          step,
+          radius,
+          cornerRadius,
+          style = {};
 
-    return result;
-  }
-
-  text(x, y, width, height, label, orientation, horizontalAlignment, verticalAlignment, attr) {
-    this.activePlaceholder.activeLayer.items.push( /*#__PURE__*/React.createElement("div", {
-      key: this.activePlaceholder.activeLayer.items.length,
-      style: {
-        position: "absolute",
-        overflow: "visible",
-        fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
-        WebkitTapHighlightColor: "rgba(0,0,0,0)",
-        WebkitUserSelect: "none",
-        WebkitTouchCallout: "none",
-        KhtmlUserSelect: "none",
-        MozUserSelect: "none",
-        msUserSelect: "none",
-        userSelect: "none",
-        boxSizing: "content-box",
-        ...attr,
-        top: y + "px",
-        left: x + "px"
+      if (attr.fillColor !== undefined) {
+        style.fill = attr.fillColor;
+        style.fillOpacity = attr.opacity;
+      } else {
+        style.fillOpacity = 0;
       }
-    }, /*#__PURE__*/React.createElement(RotatedText, {
-      width: width,
-      height: height,
-      orientation: this.orientations[orientation],
-      horizontalAlignment: this.horizontalAlignments[horizontalAlignment],
-      verticalAlignment: this.verticalAlignments[verticalAlignment]
-    }, label)));
-  }
 
-  polylinesBuffer(buffer) {
-    buffer.loop(this, function (polyline) {
-      if (polyline.length() > 0) {
-        this.polyline(polyline);
-      }
-    });
-  }
+      if (attr.lineWidth !== undefined && attr.borderColor !== undefined) {
+        style.stroke = attr.borderColor;
+        style.strokeWidth = attr.lineWidth;
 
-  polyline(polylineData) {
-    var data,
-        attr = polylineData.paletteItem.toAttr(),
-        step,
-        radius,
-        cornerRadius,
-        style = {};
-
-    if (attr.fillColor !== undefined) {
-      style.fill = attr.fillColor;
-      style.fillOpacity = attr.opacity;
-    } else {
-      style.fillOpacity = 0;
-    }
-
-    if (attr.lineWidth !== undefined && attr.borderColor !== undefined) {
-      style.stroke = attr.borderColor;
-      style.strokeWidth = attr.lineWidth;
-
-      if (attr.opacity !== undefined) {
-        style.strokeOpacity = attr.opacity;
+        if (attr.opacity !== undefined) {
+          style.strokeOpacity = attr.opacity;
+        } else {
+          style.strokeOpacity = 1;
+        }
       } else {
-        style.strokeOpacity = 1;
+        style.stroke = "transparent";
+        style.strokeWidth = 0;
       }
-    } else {
-      style.stroke = "transparent";
-      style.strokeWidth = 0;
-    }
 
-    if (attr.lineType != null) {
-      step = Math.round(attr.lineWidth) || 1;
+      if (attr.lineType != null) {
+        step = Math.round(attr.lineWidth) || 1;
 
-      switch (attr.lineType) {
-        case LineType.Dotted:
-          style.strokeDasharray = step + "," + step;
-          break;
+        switch (attr.lineType) {
+          case _basicprimitives.LineType.Dotted:
+            style.strokeDasharray = step + "," + step;
+            break;
 
-        case LineType.Dashed:
-          style.strokeDasharray = step * 5 + "," + step * 3;
-          break;
+          case _basicprimitives.LineType.Dashed:
+            style.strokeDasharray = step * 5 + "," + step * 3;
+            break;
 
-        case LineType.Solid:
-        default:
-          style.strokeDasharray = "";
-          break;
+          case _basicprimitives.LineType.Solid:
+          default:
+            style.strokeDasharray = "";
+            break;
+        }
       }
-    }
 
-    data = "";
-    polylineData.loop(this, function (segment) {
-      switch (segment.segmentType) {
-        case SegmentType.Move:
-          data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-          break;
+      data = "";
+      polylineData.loop(this, function (segment) {
+        switch (segment.segmentType) {
+          case _basicprimitives.SegmentType.Move:
+            data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+            break;
 
-        case SegmentType.Line:
-          data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-          break;
+          case _basicprimitives.SegmentType.Line:
+            data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+            break;
 
-        case SegmentType.QuadraticArc:
-          data += "Q" + (Math.round(segment.cpX) + 0.5) + " " + (Math.round(segment.cpY) + 0.5) + " " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-          break;
+          case _basicprimitives.SegmentType.QuadraticArc:
+            data += "Q" + (Math.round(segment.cpX) + 0.5) + " " + (Math.round(segment.cpY) + 0.5) + " " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+            break;
 
-        case SegmentType.Dot:
-          // A rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y
-          if (segment.width === segment.height && segment.width / 2.0 <= segment.cornerRadius) {
-            // dot
-            radius = segment.width / 2.0;
-            data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
-            data += "A" + radius + " " + radius + " 0 0 0 " + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
-            data += "A" + radius + " " + radius + " 0 0 0 " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
-          } else if (segment.cornerRadius === 0) {
-            // square
-            data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-            data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-            data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
-            data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
-            data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-          } else {
-            cornerRadius = Math.min(segment.cornerRadius, Math.min(segment.width / 2.0, segment.height / 2.0));
-            data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
-            data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + cornerRadius) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-            data += "L" + (Math.round(segment.x + segment.width - cornerRadius) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-            data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
-            data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + segment.height - cornerRadius) + 0.5);
-            data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + segment.width - cornerRadius) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
-            data += "L" + (Math.round(segment.x + cornerRadius) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
-            data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + segment.height - cornerRadius) + 0.5);
-            data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
-          }
+          case _basicprimitives.SegmentType.Dot:
+            // A rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y
+            if (segment.width === segment.height && segment.width / 2.0 <= segment.cornerRadius) {
+              // dot
+              radius = segment.width / 2.0;
+              data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
+              data += "A" + radius + " " + radius + " 0 0 0 " + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
+              data += "A" + radius + " " + radius + " 0 0 0 " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
+            } else if (segment.cornerRadius === 0) {
+              // square
+              data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+              data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+              data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
+              data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
+              data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+            } else {
+              cornerRadius = Math.min(segment.cornerRadius, Math.min(segment.width / 2.0, segment.height / 2.0));
+              data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
+              data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + cornerRadius) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+              data += "L" + (Math.round(segment.x + segment.width - cornerRadius) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+              data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
+              data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + segment.height - cornerRadius) + 0.5);
+              data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + segment.width - cornerRadius) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
+              data += "L" + (Math.round(segment.x + cornerRadius) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
+              data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + segment.height - cornerRadius) + 0.5);
+              data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
+            }
 
-          break;
+            break;
 
-        case SegmentType.CubicArc:
-          data += "C" + (Math.round(segment.cpX1) + 0.5) + " " + (Math.round(segment.cpY1) + 0.5) + " " + (Math.round(segment.cpX2) + 0.5) + " " + (Math.round(segment.cpY2) + 0.5) + " " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
-          break;
+          case _basicprimitives.SegmentType.CubicArc:
+            data += "C" + (Math.round(segment.cpX1) + 0.5) + " " + (Math.round(segment.cpY1) + 0.5) + " " + (Math.round(segment.cpX2) + 0.5) + " " + (Math.round(segment.cpY2) + 0.5) + " " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
+            break;
 
-        default:
-          break;
-      }
-    });
-    this.activePlaceholder.activeLayer.polylines.push( /*#__PURE__*/React.createElement("path", {
-      key: this.activePlaceholder.activeLayer.polylines.length,
-      d: data,
-      style: style
-    }));
-  }
-
-  template(x, y, width, height, contentx, contenty, contentWidth, contentHeight, template, hashCode, onRenderTemplate, uiHash, attr) {
-    //ignore jslint
-    let style;
-    const left = x + contentx,
+          default:
+            break;
+        }
+      });
+      this.activePlaceholder.activeLayer.polylines.push( /*#__PURE__*/_react["default"].createElement("path", {
+        key: this.activePlaceholder.activeLayer.polylines.length,
+        d: data,
+        style: style
+      }));
+    }
+  }, {
+    key: "template",
+    value: function template(x, y, width, height, contentx, contenty, contentWidth, contentHeight, _template, hashCode, onRenderTemplate, uiHash, attr) {
+      //ignore jslint
+      var style;
+      var left = x + contentx,
           top = y + contenty,
           templateWidth = contentWidth,
           templateHeight = contentHeight;
-    style = {
-      "width": templateWidth + "px",
-      "height": templateHeight + "px",
-      "top": top + "px",
-      "left": left + "px",
-      "position": "absolute",
-      "padding": "0px",
-      "margin": "0px",
-      ...attr
-    };
+      style = _objectSpread({
+        "width": templateWidth + "px",
+        "height": templateHeight + "px",
+        "top": top + "px",
+        "left": left + "px",
+        "position": "absolute",
+        "padding": "0px",
+        "margin": "0px"
+      }, attr);
 
-    if (uiHash == null) {
-      uiHash = {};
-    }
+      if (uiHash == null) {
+        uiHash = {};
+      }
 
-    uiHash.x = left;
-    uiHash.y = top;
-    uiHash.width = templateWidth;
-    uiHash.height = templateHeight;
+      uiHash.x = left;
+      uiHash.y = top;
+      uiHash.width = templateWidth;
+      uiHash.height = templateHeight;
 
-    if (onRenderTemplate !== null) {
-      this.activePlaceholder.activeLayer.items.push( /*#__PURE__*/React.createElement("div", {
-        key: this.activePlaceholder.activeLayer.items.length,
-        style: {
-          position: "absolute",
-          overflow: "visible",
-          fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
-          WebkitTapHighlightColor: "rgba(0,0,0,0)",
-          WebkitUserSelect: "none",
-          WebkitTouchCallout: "none",
-          KhtmlUserSelect: "none",
-          MozUserSelect: "none",
-          msUserSelect: "none",
-          userSelect: "none",
-          boxSizing: "content-box",
-          ...style
-        }
-      }, onRenderTemplate(uiHash)));
+      if (onRenderTemplate !== null) {
+        this.activePlaceholder.activeLayer.items.push( /*#__PURE__*/_react["default"].createElement("div", {
+          key: this.activePlaceholder.activeLayer.items.length,
+          style: _objectSpread({
+            position: "absolute",
+            overflow: "visible",
+            fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
+            WebkitTapHighlightColor: "rgba(0,0,0,0)",
+            WebkitUserSelect: "none",
+            WebkitTouchCallout: "none",
+            KhtmlUserSelect: "none",
+            MozUserSelect: "none",
+            msUserSelect: "none",
+            userSelect: "none",
+            boxSizing: "content-box"
+          }, style)
+        }, onRenderTemplate(uiHash)));
+      }
+
+      ;
     }
+  }, {
+    key: "getPxSize",
+    value: function getPxSize(value, base) {
+      var result = value;
 
-    ;
-  }
+      if (typeof value === "string") {
+        if (value.indexOf("pt") > 0) {
+          result = parseInt(value, 10) * 96 / 72;
+        } else if (value.indexOf("%") > 0) {
+          result = parseFloat(value) / 100.0 * base;
+        } else {
+          result = parseInt(value, 10);
+        }
+      }
 
-  getPxSize(value, base) {
-    var result = value;
-
-    if (typeof value === "string") {
-      if (value.indexOf("pt") > 0) {
-        result = parseInt(value, 10) * 96 / 72;
-      } else if (value.indexOf("%") > 0) {
-        result = parseFloat(value) / 100.0 * base;
-      } else {
-        result = parseInt(value, 10);
-      }
+      return result;
     }
+  }]);
 
-    return result;
-  }
+  return Graphics;
+}();
 
-}
-
 ;
-export default Graphics;
+var _default = Graphics;
+exports["default"] = _default;

dist/esm/index.js

@@ -1,13 +0,119 @@
-export { default as OrgDiagram } from './OrgDiagram';
-export { default as FamDiagram } from './FamDiagram';
-export { default as BackgroundAnnotationConfigShape } from './Schemas/BackgroundAnnotationConfigShape';
-export { default as ConnectorAnnotationConfigShape } from './Schemas/ConnectorAnnotationConfigShape';
-export { default as FamConfigShape } from './Schemas/FamConfigShape';
-export { default as FamItemConfigShape } from './Schemas/FamItemConfigShape';
-export { default as HighlightPathAnnotationConfigShape } from './Schemas/HighlightPathAnnotationConfigShape';
-export { default as LabelAnnotationConfigShape } from './Schemas/LabelAnnotationConfigShape';
-export { default as OrgConfigShape } from './Schemas/OrgConfigShape';
-export { default as OrgItemConfigShape } from './Schemas/OrgItemConfigShape';
-export { default as PaletteItemConfigShape } from './Schemas/PaletteItemConfigShape';
-export { default as ShapeAnnotationConfigShape } from './Schemas/ShapeAnnotationConfigShape';
-export { default as TemplateConfigShape } from './Schemas/TemplateConfigShape';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrgDiagram", {
+  enumerable: true,
+  get: function get() {
+    return _OrgDiagram["default"];
+  }
+});
+Object.defineProperty(exports, "FamDiagram", {
+  enumerable: true,
+  get: function get() {
+    return _FamDiagram["default"];
+  }
+});
+Object.defineProperty(exports, "BackgroundAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _BackgroundAnnotationConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "ConnectorAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _ConnectorAnnotationConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "FamConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _FamConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "FamItemConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _FamItemConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "HighlightPathAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _HighlightPathAnnotationConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "LabelAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _LabelAnnotationConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "OrgConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _OrgConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "OrgItemConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _OrgItemConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "PaletteItemConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _PaletteItemConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "ShapeAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _ShapeAnnotationConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "LevelAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _LevelAnnotationConfigShape["default"];
+  }
+});
+Object.defineProperty(exports, "TemplateConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _TemplateConfigShape["default"];
+  }
+});
+
+var _OrgDiagram = _interopRequireDefault(require("./OrgDiagram"));
+
+var _FamDiagram = _interopRequireDefault(require("./FamDiagram"));
+
+var _BackgroundAnnotationConfigShape = _interopRequireDefault(require("./Schemas/BackgroundAnnotationConfigShape"));
+
+var _ConnectorAnnotationConfigShape = _interopRequireDefault(require("./Schemas/ConnectorAnnotationConfigShape"));
+
+var _FamConfigShape = _interopRequireDefault(require("./Schemas/FamConfigShape"));
+
+var _FamItemConfigShape = _interopRequireDefault(require("./Schemas/FamItemConfigShape"));
+
+var _HighlightPathAnnotationConfigShape = _interopRequireDefault(require("./Schemas/HighlightPathAnnotationConfigShape"));
+
+var _LabelAnnotationConfigShape = _interopRequireDefault(require("./Schemas/LabelAnnotationConfigShape"));
+
+var _OrgConfigShape = _interopRequireDefault(require("./Schemas/OrgConfigShape"));
+
+var _OrgItemConfigShape = _interopRequireDefault(require("./Schemas/OrgItemConfigShape"));
+
+var _PaletteItemConfigShape = _interopRequireDefault(require("./Schemas/PaletteItemConfigShape"));
+
+var _ShapeAnnotationConfigShape = _interopRequireDefault(require("./Schemas/ShapeAnnotationConfigShape"));
+
+var _LevelAnnotationConfigShape = _interopRequireDefault(require("./Schemas/LevelAnnotationConfigShape"));
+
+var _TemplateConfigShape = _interopRequireDefault(require("./Schemas/TemplateConfigShape"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

dist/esm/OrgDiagram.js

@@ -0,19 +1,56 @@
+"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 _basicprimitives = require("basicprimitives");
+
+var _BaseDiagram2 = _interopRequireDefault(require("./BaseDiagram"));
+
+var _OrgConfigShape = _interopRequireDefault(require("./Schemas/OrgConfigShape"));
+
+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 _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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; }
 
-import { OrgTaskManagerFactory, OrgEventArgs } from 'basicprimitives';
-import BaseDiagram from './BaseDiagram';
-import OrgConfigShape from './Schemas/OrgConfigShape';
+var OrgDiagram = /*#__PURE__*/function (_BaseDiagram) {
+  _inherits(OrgDiagram, _BaseDiagram);
 
-class OrgDiagram extends BaseDiagram {
-  constructor(props) {
-    super(props, OrgTaskManagerFactory, OrgEventArgs);
+  var _super = _createSuper(OrgDiagram);
+
+  function OrgDiagram(props) {
+    _classCallCheck(this, OrgDiagram);
+
+    return _super.call(this, props, _basicprimitives.OrgTaskManagerFactory, _basicprimitives.OrgEventArgs);
   }
 
-}
+  return OrgDiagram;
+}(_BaseDiagram2["default"]);
 
 _defineProperty(OrgDiagram, "propTypes", {
-  config: OrgConfigShape.isRequired // eslint-disable-line react/no-unused-prop-types
+  config: _OrgConfigShape["default"].isRequired // eslint-disable-line react/no-unused-prop-types
 
 });
 
-export default OrgDiagram;
+var _default = OrgDiagram;
+exports["default"] = _default;

dist/esm/Schemas/BackgroundAnnotationConfigShape.js

@@ -1,21 +0,34 @@
-import PropTypes from 'prop-types';
-import { AnnotationType, ZOrderType, LineType } from 'basicprimitives';
-const BackgroundAnnotationConfigShape = PropTypes.shape({
-  annotationType: PropTypes.oneOf([AnnotationType.Background]),
-  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  includeChildren: PropTypes.bool,
-  zOrderType: PropTypes.oneOf(Object.values(ZOrderType)),
-  offset: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var BackgroundAnnotationConfigShape = _propTypes["default"].shape({
+  annotationType: _propTypes["default"].oneOf([_basicprimitives.AnnotationType.Background]),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  includeChildren: _propTypes["default"].bool,
+  zOrderType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ZOrderType)),
+  offset: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   }),
-  lineWidth: PropTypes.number,
-  opacity: PropTypes.number,
-  borderColor: PropTypes.string,
-  fillColor: PropTypes.string,
-  lineType: PropTypes.oneOf(Object.values(LineType)),
-  selectItems: PropTypes.bool
+  lineWidth: _propTypes["default"].number,
+  opacity: _propTypes["default"].number,
+  borderColor: _propTypes["default"].string,
+  fillColor: _propTypes["default"].string,
+  lineType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  selectItems: _propTypes["default"].bool
 });
-export default BackgroundAnnotationConfigShape;
+
+var _default = BackgroundAnnotationConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/ConnectorAnnotationConfigShape.js

@@ -1,27 +0,40 @@
-import PropTypes from 'prop-types';
-import { ConnectorLabelPlacementType, ConnectorPlacementType, ConnectorShapeType, ZOrderType, AnnotationType, LineType } from 'basicprimitives';
-const ConnectorAnnotationConfigShape = PropTypes.shape({
-  annotationType: PropTypes.oneOf([AnnotationType.Connector]),
-  zOrderType: PropTypes.oneOf(Object.values(ZOrderType)),
-  fromItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  toItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  connectorShapeType: PropTypes.oneOf(Object.values(ConnectorShapeType)),
-  connectorPlacementType: PropTypes.oneOf(Object.values(ConnectorPlacementType)),
-  labelPlacementType: PropTypes.oneOf(Object.values(ConnectorLabelPlacementType)),
-  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ConnectorAnnotationConfigShape = _propTypes["default"].shape({
+  annotationType: _propTypes["default"].oneOf([_basicprimitives.AnnotationType.Connector]),
+  zOrderType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ZOrderType)),
+  fromItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  toItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  connectorShapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ConnectorShapeType)),
+  connectorPlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ConnectorPlacementType)),
+  labelPlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ConnectorLabelPlacementType)),
+  offset: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   })]),
-  lineWidth: PropTypes.number,
-  color: PropTypes.string,
-  lineType: PropTypes.oneOf(Object.values(LineType)),
-  selectItems: PropTypes.bool,
-  label: PropTypes.any,
-  size: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  lineWidth: _propTypes["default"].number,
+  color: _propTypes["default"].string,
+  lineType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  selectItems: _propTypes["default"].bool,
+  label: _propTypes["default"].any,
+  size: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   })
 });
-export default ConnectorAnnotationConfigShape;
+
+var _default = ConnectorAnnotationConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/FamConfigShape.js

@@ -1,128 +0,163 @@
-import PropTypes from 'prop-types';
-import { GraphicsType, Visibility, OrientationType, VerticalAlignmentType, ElbowType, NeighboursSelectionMode, ShapeType, TextOrientationType, HorizontalAlignmentType, PlacementType, NavigationMode, PageFitMode, GroupByType, LoopsLayoutMode, Enabled, LineType, AdviserPlacementType, SelectionPathMode } from 'basicprimitives';
-import FamItemConfigShape from './FamItemConfigShape';
-import TemplateConfigShape from './TemplateConfigShape';
-import BackgroundAnnotationConfigShape from './BackgroundAnnotationConfigShape';
-import ConnectorAnnotationConfigShape from './ConnectorAnnotationConfigShape';
-import HighlightPathAnnotationConfigShape from './HighlightPathAnnotationConfigShape';
-import ShapeAnnotationConfigShape from './ShapeAnnotationConfigShape';
-import LabelAnnotationConfigShape from './LabelAnnotationConfigShape';
-import PaletteItemConfigShape from './PaletteItemConfigShape';
-const FamConfigShape = PropTypes.shape({
-  navigationMode: PropTypes.oneOf(Object.values(NavigationMode)),
-  graphicsType: PropTypes.oneOf(Object.values(GraphicsType)),
-  pageFitMode: PropTypes.oneOf(Object.values(PageFitMode)),
-  minimalVisibility: PropTypes.oneOf(Object.values(Visibility)),
-  orientationType: PropTypes.oneOf(Object.values(OrientationType)),
-  verticalAlignment: PropTypes.oneOf(Object.values(VerticalAlignmentType)),
-  arrowsDirection: PropTypes.oneOf(Object.values(GroupByType)),
-  showExtraArrows: PropTypes.bool,
-  extraArrowsMinimumSpace: PropTypes.number,
-  groupByType: PropTypes.oneOf(Object.values(GroupByType)),
-  alignBylevels: PropTypes.bool,
-  enableMatrixLayout: PropTypes.bool,
-  minimumMatrixSize: PropTypes.number,
-  maximumColumnsInMatrix: PropTypes.number,
-  hideGrandParentsConnectors: PropTypes.bool,
-  loopsLayoutMode: PropTypes.oneOf(Object.values(LoopsLayoutMode)),
-  bevelSize: PropTypes.number,
-  elbowType: PropTypes.oneOf(Object.values(ElbowType)),
-  elbowDotSize: PropTypes.number,
-  emptyDiagramMessage: PropTypes.string,
-  items: PropTypes.arrayOf(FamItemConfigShape),
-  annotations: PropTypes.arrayOf(PropTypes.oneOfType([BackgroundAnnotationConfigShape, ConnectorAnnotationConfigShape, HighlightPathAnnotationConfigShape, ShapeAnnotationConfigShape, LabelAnnotationConfigShape])),
-  cursorItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  highlightItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  highlightGravityRadius: PropTypes.number,
-  selectedItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  hasSelectorCheckbox: PropTypes.oneOf(Object.values(Enabled)),
-  selectCheckBoxLabel: PropTypes.string,
-  selectionPathMode: PropTypes.oneOf(Object.values(SelectionPathMode)),
-  neighboursSelectionMode: PropTypes.oneOf(Object.values(NeighboursSelectionMode)),
-  templates: PropTypes.arrayOf(TemplateConfigShape),
-  defaultTemplateName: PropTypes.string,
-  defaultLabelAnnotationTemplate: PropTypes.string,
-  hasButtons: PropTypes.oneOf(Object.values(Enabled)),
-  onButtonsRender: PropTypes.func,
-  normalLevelShift: PropTypes.number,
-  dotLevelShift: PropTypes.number,
-  lineLevelShift: PropTypes.number,
-  normalItemsInterval: PropTypes.number,
-  dotItemsInterval: PropTypes.number,
-  lineItemsInterval: PropTypes.number,
-  cousinsIntervalMultiplier: PropTypes.number,
-  itemTitleFirstFontColor: PropTypes.string,
-  itemTitleSecondFontColor: PropTypes.string,
-  minimizedItemShapeType: PropTypes.oneOf(Object.values(ShapeType)),
-  linesColor: PropTypes.string,
-  linesWidth: PropTypes.number,
-  linesType: PropTypes.oneOf(Object.values(LineType)),
-  showNeigboursConnectorsHighlighted: PropTypes.bool,
-  highlightLinesColor: PropTypes.string,
-  highlightLinesWidth: PropTypes.number,
-  highlightLinesType: PropTypes.oneOf(Object.values(LineType)),
-  linesPalette: PropTypes.arrayOf(PaletteItemConfigShape),
-  calloutMaximumVisibility: PropTypes.oneOf(Object.values(Visibility)),
-  showCallout: PropTypes.bool,
-  calloutPlacementOffset: PropTypes.number,
-  defaultCalloutTemplateName: PropTypes.string,
-  calloutfillColor: PropTypes.string,
-  calloutBorderColor: PropTypes.string,
-  calloutOffset: PropTypes.number,
-  calloutCornerRadius: PropTypes.number,
-  calloutPointerWidth: PropTypes.string,
-  calloutLineWidth: PropTypes.number,
-  calloutOpacity: PropTypes.number,
-  buttonsPanelSize: PropTypes.number,
-  groupTitlePanelSize: PropTypes.number,
-  checkBoxPanelSize: PropTypes.number,
-  groupTitlePlacementType: PropTypes.oneOf(Object.values(AdviserPlacementType)),
-  groupTitleOrientation: PropTypes.oneOf(Object.values(TextOrientationType)),
-  groupTitleVerticalAlignment: PropTypes.oneOf(Object.values(VerticalAlignmentType)),
-  groupTitleHorizontalAlignment: PropTypes.oneOf(Object.values(HorizontalAlignmentType)),
-  groupTitleFontSize: PropTypes.string,
-  groupTitleFontFamily: PropTypes.string,
-  groupTitleColor: PropTypes.string,
-  groupTitleFontWeight: PropTypes.string,
-  groupTitleFontStyle: PropTypes.string,
-  distance: PropTypes.number,
-  scale: PropTypes.number,
-  minimumScale: PropTypes.number,
-  maximumScale: PropTypes.number,
-  showLabels: PropTypes.oneOf(Object.values(Enabled)),
-  labelSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+var _FamItemConfigShape = _interopRequireDefault(require("./FamItemConfigShape"));
+
+var _TemplateConfigShape = _interopRequireDefault(require("./TemplateConfigShape"));
+
+var _BackgroundAnnotationConfigShape = _interopRequireDefault(require("./BackgroundAnnotationConfigShape"));
+
+var _ConnectorAnnotationConfigShape = _interopRequireDefault(require("./ConnectorAnnotationConfigShape"));
+
+var _HighlightPathAnnotationConfigShape = _interopRequireDefault(require("./HighlightPathAnnotationConfigShape"));
+
+var _ShapeAnnotationConfigShape = _interopRequireDefault(require("./ShapeAnnotationConfigShape"));
+
+var _LevelAnnotationConfigShape = _interopRequireDefault(require("./LevelAnnotationConfigShape"));
+
+var _LabelAnnotationConfigShape = _interopRequireDefault(require("./LabelAnnotationConfigShape"));
+
+var _PaletteItemConfigShape = _interopRequireDefault(require("./PaletteItemConfigShape"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var FamConfigShape = _propTypes["default"].shape({
+  navigationMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.NavigationMode)),
+  graphicsType: _propTypes["default"].oneOf(Object.values(_basicprimitives.GraphicsType)),
+  pageFitMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.PageFitMode)),
+  minimalVisibility: _propTypes["default"].oneOf(Object.values(_basicprimitives.Visibility)),
+  orientationType: _propTypes["default"].oneOf(Object.values(_basicprimitives.OrientationType)),
+  verticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  arrowsDirection: _propTypes["default"].oneOf(Object.values(_basicprimitives.GroupByType)),
+  showExtraArrows: _propTypes["default"].bool,
+  extraArrowsMinimumSpace: _propTypes["default"].number,
+  groupByType: _propTypes["default"].oneOf(Object.values(_basicprimitives.GroupByType)),
+  alignBylevels: _propTypes["default"].bool,
+  enableMatrixLayout: _propTypes["default"].bool,
+  minimumMatrixSize: _propTypes["default"].number,
+  maximumColumnsInMatrix: _propTypes["default"].number,
+  hideGrandParentsConnectors: _propTypes["default"].bool,
+  loopsLayoutMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.LoopsLayoutMode)),
+  bevelSize: _propTypes["default"].number,
+  elbowType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ElbowType)),
+  elbowDotSize: _propTypes["default"].number,
+  emptyDiagramMessage: _propTypes["default"].string,
+  items: _propTypes["default"].arrayOf(_FamItemConfigShape["default"]),
+  annotations: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_BackgroundAnnotationConfigShape["default"], _ConnectorAnnotationConfigShape["default"], _HighlightPathAnnotationConfigShape["default"], _ShapeAnnotationConfigShape["default"], _LabelAnnotationConfigShape["default"], _LevelAnnotationConfigShape["default"]])),
+  cursorItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  highlightItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  highlightGravityRadius: _propTypes["default"].number,
+  selectedItems: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  hasSelectorCheckbox: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  selectCheckBoxLabel: _propTypes["default"].string,
+  selectionPathMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.SelectionPathMode)),
+  neighboursSelectionMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.NeighboursSelectionMode)),
+  templates: _propTypes["default"].arrayOf(_TemplateConfigShape["default"]),
+  defaultTemplateName: _propTypes["default"].string,
+  defaultLabelAnnotationTemplate: _propTypes["default"].string,
+  hasButtons: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  onButtonsRender: _propTypes["default"].func,
+  normalLevelShift: _propTypes["default"].number,
+  dotLevelShift: _propTypes["default"].number,
+  lineLevelShift: _propTypes["default"].number,
+  normalItemsInterval: _propTypes["default"].number,
+  dotItemsInterval: _propTypes["default"].number,
+  lineItemsInterval: _propTypes["default"].number,
+  cousinsIntervalMultiplier: _propTypes["default"].number,
+  itemTitleFirstFontColor: _propTypes["default"].string,
+  itemTitleSecondFontColor: _propTypes["default"].string,
+  minimizedItemShapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ShapeType)),
+  linesColor: _propTypes["default"].string,
+  linesWidth: _propTypes["default"].number,
+  linesType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  showNeigboursConnectorsHighlighted: _propTypes["default"].bool,
+  highlightLinesColor: _propTypes["default"].string,
+  highlightLinesWidth: _propTypes["default"].number,
+  highlightLinesType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  linesPalette: _propTypes["default"].arrayOf(_PaletteItemConfigShape["default"]),
+  calloutMaximumVisibility: _propTypes["default"].oneOf(Object.values(_basicprimitives.Visibility)),
+  showCallout: _propTypes["default"].bool,
+  calloutPlacementOffset: _propTypes["default"].number,
+  defaultCalloutTemplateName: _propTypes["default"].string,
+  calloutfillColor: _propTypes["default"].string,
+  calloutBorderColor: _propTypes["default"].string,
+  calloutOffset: _propTypes["default"].number,
+  calloutCornerRadius: _propTypes["default"].number,
+  calloutPointerWidth: _propTypes["default"].string,
+  calloutLineWidth: _propTypes["default"].number,
+  calloutOpacity: _propTypes["default"].number,
+  buttonsPanelSize: _propTypes["default"].number,
+  groupTitlePanelSize: _propTypes["default"].number,
+  checkBoxPanelSize: _propTypes["default"].number,
+  groupTitlePlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  groupTitleOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  groupTitleVerticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  groupTitleHorizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  groupTitleFontSize: _propTypes["default"].string,
+  groupTitleFontFamily: _propTypes["default"].string,
+  groupTitleColor: _propTypes["default"].string,
+  groupTitleFontWeight: _propTypes["default"].string,
+  groupTitleFontStyle: _propTypes["default"].string,
+  levelTitlePanelSize: _propTypes["default"].number,
+  levelTitlePlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  levelTitlePlaceInside: _propTypes["default"].bool,
+  levelTitleOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  levelTitleVerticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  levelTitleHorizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  levelTitleFontSize: _propTypes["default"].string,
+  levelTitleFontFamily: _propTypes["default"].string,
+  levelTitleFontColor: _propTypes["default"].string,
+  levelTitleColor: _propTypes["default"].string,
+  levelTitleFontWeight: _propTypes["default"].string,
+  levelTitleFontStyle: _propTypes["default"].string,
+  distance: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  minimumScale: _propTypes["default"].number,
+  maximumScale: _propTypes["default"].number,
+  showLabels: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  labelSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  labelOffset: PropTypes.number,
-  labelOrientation: PropTypes.oneOf(Object.values(TextOrientationType)),
-  labelPlacement: PropTypes.oneOf(Object.values(PlacementType)),
-  labelFontSize: PropTypes.string,
-  labelFontFamily: PropTypes.string,
-  labelColor: PropTypes.string,
-  labelFontWeight: PropTypes.string,
-  labelFontStyle: PropTypes.string,
-  enablePanning: PropTypes.bool,
-  autoSizeMinimum: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  labelOffset: _propTypes["default"].number,
+  labelOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  labelPlacement: _propTypes["default"].oneOf(Object.values(_basicprimitives.PlacementType)),
+  labelFontSize: _propTypes["default"].string,
+  labelFontFamily: _propTypes["default"].string,
+  labelColor: _propTypes["default"].string,
+  labelFontWeight: _propTypes["default"].string,
+  labelFontStyle: _propTypes["default"].string,
+  enablePanning: _propTypes["default"].bool,
+  autoSizeMinimum: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  autoSizeMaximum: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  autoSizeMaximum: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  showFrame: PropTypes.bool,
-  frameInnerPadding: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+  showFrame: _propTypes["default"].bool,
+  frameInnerPadding: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   }),
-  frameOuterPadding: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+  frameOuterPadding: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   })
 });
-export default FamConfigShape;
+
+var _default = FamConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/FamItemConfigShape.js

@@ -1,34 +0,47 @@
-import PropTypes from 'prop-types';
-import { ShapeType, Enabled, TextOrientationType, PlacementType, AdviserPlacementType } from 'basicprimitives';
-const FamItemConfigShape = PropTypes.shape({
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  parents: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  spouses: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  title: PropTypes.string,
-  description: PropTypes.string,
-  image: PropTypes.string,
-  context: PropTypes.any,
-  itemTitleColor: PropTypes.string,
-  minimizedItemShapeType: PropTypes.oneOf(Object.values(ShapeType)),
-  groupTitle: PropTypes.string,
-  groupTitleColor: PropTypes.string,
-  isActive: PropTypes.bool,
-  hasSelectorCheckbox: PropTypes.oneOf(Object.values(Enabled)),
-  hasButtons: PropTypes.oneOf(Object.values(Enabled)),
-  templateName: PropTypes.string,
-  showCallout: PropTypes.oneOf(Object.values(Enabled)),
-  calloutTemplateName: PropTypes.string,
-  label: PropTypes.string,
-  showLabel: PropTypes.oneOf(Object.values(Enabled)),
-  labelSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var FamItemConfigShape = _propTypes["default"].shape({
+  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
+  parents: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  spouses: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  title: _propTypes["default"].string,
+  description: _propTypes["default"].string,
+  image: _propTypes["default"].string,
+  context: _propTypes["default"].any,
+  itemTitleColor: _propTypes["default"].string,
+  minimizedItemShapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ShapeType)),
+  groupTitle: _propTypes["default"].string,
+  groupTitleColor: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  hasSelectorCheckbox: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  hasButtons: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  templateName: _propTypes["default"].string,
+  showCallout: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  calloutTemplateName: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  showLabel: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  labelSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  labelOrientation: PropTypes.oneOf(Object.values(TextOrientationType)),
-  labelPlacement: PropTypes.oneOf(Object.values(PlacementType)),
-  primaryParent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  relativeItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  position: PropTypes.number,
-  placementType: PropTypes.oneOf(Object.values(AdviserPlacementType))
+  labelOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  labelPlacement: _propTypes["default"].oneOf(Object.values(_basicprimitives.PlacementType)),
+  primaryParent: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  relativeItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  position: _propTypes["default"].number,
+  placementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType))
 });
-export default FamItemConfigShape;
+
+var _default = FamItemConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/HighlightPathAnnotationConfigShape.js

@@ -1,14 +0,27 @@
-import PropTypes from 'prop-types';
-import { AnnotationType, ZOrderType, LineType } from 'basicprimitives';
-const HighlightPathAnnotationConfigShape = PropTypes.shape({
-  annotationType: PropTypes.oneOf([AnnotationType.HighlightPath]),
-  zOrderType: PropTypes.oneOf(Object.values(ZOrderType)),
-  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  lineWidth: PropTypes.number,
-  color: PropTypes.string,
-  lineType: PropTypes.oneOf(Object.values(LineType)),
-  opacity: PropTypes.number,
-  showArrows: PropTypes.bool,
-  selectItems: PropTypes.bool
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export default HighlightPathAnnotationConfigShape;
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var HighlightPathAnnotationConfigShape = _propTypes["default"].shape({
+  annotationType: _propTypes["default"].oneOf([_basicprimitives.AnnotationType.HighlightPath]),
+  zOrderType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ZOrderType)),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  lineWidth: _propTypes["default"].number,
+  color: _propTypes["default"].string,
+  lineType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  opacity: _propTypes["default"].number,
+  showArrows: _propTypes["default"].bool,
+  selectItems: _propTypes["default"].bool
+});
+
+var _default = HighlightPathAnnotationConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/LabelAnnotationConfigShape.js

@@ -1,11 +0,24 @@
-import PropTypes from 'prop-types';
-import { AnnotationType } from 'basicprimitives';
-const LabelAnnotationConfigShape = PropTypes.shape({
-  annotationType: PropTypes.oneOf([AnnotationType.Label]),
-  fromItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  toItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
-  title: PropTypes.any,
-  itemTitleColor: PropTypes.string,
-  templateName: PropTypes.string
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export default LabelAnnotationConfigShape;
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var LabelAnnotationConfigShape = _propTypes["default"].shape({
+  annotationType: _propTypes["default"].oneOf([_basicprimitives.AnnotationType.Label]),
+  fromItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
+  toItems: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])).isRequired,
+  title: _propTypes["default"].any,
+  itemTitleColor: _propTypes["default"].string,
+  templateName: _propTypes["default"].string
+});
+
+var _default = LabelAnnotationConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/OrgConfigShape.js

@@ -1,123 +0,156 @@
-import PropTypes from 'prop-types';
-import { ConnectorType, NavigationMode, GraphicsType, PageFitMode, Visibility, OrientationType, HorizontalAlignmentType, VerticalAlignmentType, GroupByType, ElbowType, Enabled, SelectionPathMode, ShapeType, LineType, ChildrenPlacementType, AdviserPlacementType, TextOrientationType, PlacementType } from 'basicprimitives';
-import OrgItemConfigShape from './OrgItemConfigShape';
-import TemplateConfigShape from './TemplateConfigShape';
-import BackgroundAnnotationConfigShape from './BackgroundAnnotationConfigShape';
-import ConnectorAnnotationConfigShape from './ConnectorAnnotationConfigShape';
-import HighlightPathAnnotationConfigShape from './HighlightPathAnnotationConfigShape';
-import ShapeAnnotationConfigShape from './ShapeAnnotationConfigShape';
-const OrgConfigShape = PropTypes.shape({
-  navigationMode: PropTypes.oneOf(Object.values(NavigationMode)),
-  graphicsType: PropTypes.oneOf(Object.values(GraphicsType)),
-  pageFitMode: PropTypes.oneOf(Object.values(PageFitMode)),
-  minimalVisibility: PropTypes.oneOf(Object.values(Visibility)),
-  orientationType: PropTypes.oneOf(Object.values(OrientationType)),
-  horizontalAlignment: PropTypes.oneOf(Object.values(HorizontalAlignmentType)),
-  verticalAlignment: PropTypes.oneOf(Object.values(VerticalAlignmentType)),
-  arrowsDirection: PropTypes.oneOf(Object.values(GroupByType)),
-  showExtraArrows: PropTypes.bool,
-  extraArrowsMinimumSpace: PropTypes.number,
-  showHorizontalArrows: PropTypes.bool,
-  connectorType: PropTypes.oneOf(Object.values(ConnectorType)),
-  bevelSize: PropTypes.number,
-  elbowType: PropTypes.oneOf(Object.values(ElbowType)),
-  elbowDotSize: PropTypes.number,
-  emptyDiagramMessage: PropTypes.string,
-  items: PropTypes.arrayOf(OrgItemConfigShape),
-  annotations: PropTypes.arrayOf(PropTypes.oneOfType([BackgroundAnnotationConfigShape, ConnectorAnnotationConfigShape, HighlightPathAnnotationConfigShape, ShapeAnnotationConfigShape])),
-  cursorItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  highlightItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  highlightGravityRadius: PropTypes.number,
-  selectedItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  hasSelectorCheckbox: PropTypes.oneOf(Object.values(Enabled)),
-  selectCheckBoxLabel: PropTypes.string,
-  selectionPathMode: PropTypes.oneOf(Object.values(SelectionPathMode)),
-  templates: PropTypes.arrayOf(TemplateConfigShape),
-  defaultTemplateName: PropTypes.string,
-  hasButtons: PropTypes.oneOf(Object.values(Enabled)),
-  onButtonsRender: PropTypes.func,
-  normalLevelShift: PropTypes.number,
-  dotLevelShift: PropTypes.number,
-  lineLevelShift: PropTypes.number,
-  normalItemsInterval: PropTypes.number,
-  dotItemsInterval: PropTypes.number,
-  lineItemsInterval: PropTypes.number,
-  cousinsIntervalMultiplier: PropTypes.number,
-  itemTitleFirstFontColor: PropTypes.string,
-  itemTitleSecondFontColor: PropTypes.string,
-  minimizedItemShapeType: PropTypes.oneOf(Object.values(ShapeType)),
-  linesColor: PropTypes.string,
-  linesWidth: PropTypes.number,
-  linesType: PropTypes.oneOf(Object.values(LineType)),
-  highlightLinesColor: PropTypes.string,
-  highlightLinesWidth: PropTypes.number,
-  highlightLinesType: PropTypes.oneOf(Object.values(LineType)),
-  calloutMaximumVisibility: PropTypes.oneOf(Object.values(Visibility)),
-  showCallout: PropTypes.bool,
-  calloutPlacementOffset: PropTypes.number,
-  defaultCalloutTemplateName: PropTypes.string,
-  calloutfillColor: PropTypes.string,
-  calloutBorderColor: PropTypes.string,
-  calloutOffset: PropTypes.number,
-  calloutCornerRadius: PropTypes.number,
-  calloutPointerWidth: PropTypes.string,
-  calloutLineWidth: PropTypes.number,
-  calloutOpacity: PropTypes.number,
-  childrenPlacementType: PropTypes.oneOf(Object.values(ChildrenPlacementType)),
-  leavesPlacementType: PropTypes.oneOf(Object.values(ChildrenPlacementType)),
-  placeAssistantsAboveChildren: PropTypes.bool,
-  placeAdvisersAboveChildren: PropTypes.bool,
-  maximumColumnsInMatrix: PropTypes.number,
-  buttonsPanelSize: PropTypes.number,
-  groupTitlePanelSize: PropTypes.number,
-  checkBoxPanelSize: PropTypes.number,
-  groupTitlePlacementType: PropTypes.oneOf(Object.values(AdviserPlacementType)),
-  groupTitleOrientation: PropTypes.oneOf(Object.values(TextOrientationType)),
-  groupTitleVerticalAlignment: PropTypes.oneOf(Object.values(VerticalAlignmentType)),
-  groupTitleHorizontalAlignment: PropTypes.oneOf(Object.values(HorizontalAlignmentType)),
-  groupTitleFontSize: PropTypes.string,
-  groupTitleFontFamily: PropTypes.string,
-  groupTitleColor: PropTypes.string,
-  groupTitleFontWeight: PropTypes.string,
-  groupTitleFontStyle: PropTypes.string,
-  distance: PropTypes.number,
-  scale: PropTypes.number,
-  minimumScale: PropTypes.number,
-  maximumScale: PropTypes.number,
-  showLabels: PropTypes.oneOf(Object.values(Enabled)),
-  labelSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+var _OrgItemConfigShape = _interopRequireDefault(require("./OrgItemConfigShape"));
+
+var _TemplateConfigShape = _interopRequireDefault(require("./TemplateConfigShape"));
+
+var _BackgroundAnnotationConfigShape = _interopRequireDefault(require("./BackgroundAnnotationConfigShape"));
+
+var _ConnectorAnnotationConfigShape = _interopRequireDefault(require("./ConnectorAnnotationConfigShape"));
+
+var _HighlightPathAnnotationConfigShape = _interopRequireDefault(require("./HighlightPathAnnotationConfigShape"));
+
+var _ShapeAnnotationConfigShape = _interopRequireDefault(require("./ShapeAnnotationConfigShape"));
+
+var _LevelAnnotationConfigShape = _interopRequireDefault(require("./LevelAnnotationConfigShape"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var OrgConfigShape = _propTypes["default"].shape({
+  navigationMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.NavigationMode)),
+  graphicsType: _propTypes["default"].oneOf(Object.values(_basicprimitives.GraphicsType)),
+  pageFitMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.PageFitMode)),
+  minimalVisibility: _propTypes["default"].oneOf(Object.values(_basicprimitives.Visibility)),
+  orientationType: _propTypes["default"].oneOf(Object.values(_basicprimitives.OrientationType)),
+  horizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  verticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  arrowsDirection: _propTypes["default"].oneOf(Object.values(_basicprimitives.GroupByType)),
+  showExtraArrows: _propTypes["default"].bool,
+  extraArrowsMinimumSpace: _propTypes["default"].number,
+  showHorizontalArrows: _propTypes["default"].bool,
+  connectorType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ConnectorType)),
+  bevelSize: _propTypes["default"].number,
+  elbowType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ElbowType)),
+  elbowDotSize: _propTypes["default"].number,
+  emptyDiagramMessage: _propTypes["default"].string,
+  items: _propTypes["default"].arrayOf(_OrgItemConfigShape["default"]),
+  annotations: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_BackgroundAnnotationConfigShape["default"], _ConnectorAnnotationConfigShape["default"], _HighlightPathAnnotationConfigShape["default"], _ShapeAnnotationConfigShape["default"], _LevelAnnotationConfigShape["default"]])),
+  cursorItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  highlightItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  highlightGravityRadius: _propTypes["default"].number,
+  selectedItems: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  hasSelectorCheckbox: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  selectCheckBoxLabel: _propTypes["default"].string,
+  selectionPathMode: _propTypes["default"].oneOf(Object.values(_basicprimitives.SelectionPathMode)),
+  templates: _propTypes["default"].arrayOf(_TemplateConfigShape["default"]),
+  defaultTemplateName: _propTypes["default"].string,
+  hasButtons: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  onButtonsRender: _propTypes["default"].func,
+  normalLevelShift: _propTypes["default"].number,
+  dotLevelShift: _propTypes["default"].number,
+  lineLevelShift: _propTypes["default"].number,
+  normalItemsInterval: _propTypes["default"].number,
+  dotItemsInterval: _propTypes["default"].number,
+  lineItemsInterval: _propTypes["default"].number,
+  cousinsIntervalMultiplier: _propTypes["default"].number,
+  itemTitleFirstFontColor: _propTypes["default"].string,
+  itemTitleSecondFontColor: _propTypes["default"].string,
+  minimizedItemShapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ShapeType)),
+  linesColor: _propTypes["default"].string,
+  linesWidth: _propTypes["default"].number,
+  linesType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  highlightLinesColor: _propTypes["default"].string,
+  highlightLinesWidth: _propTypes["default"].number,
+  highlightLinesType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  calloutMaximumVisibility: _propTypes["default"].oneOf(Object.values(_basicprimitives.Visibility)),
+  showCallout: _propTypes["default"].bool,
+  calloutPlacementOffset: _propTypes["default"].number,
+  defaultCalloutTemplateName: _propTypes["default"].string,
+  calloutfillColor: _propTypes["default"].string,
+  calloutBorderColor: _propTypes["default"].string,
+  calloutOffset: _propTypes["default"].number,
+  calloutCornerRadius: _propTypes["default"].number,
+  calloutPointerWidth: _propTypes["default"].string,
+  calloutLineWidth: _propTypes["default"].number,
+  calloutOpacity: _propTypes["default"].number,
+  childrenPlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ChildrenPlacementType)),
+  leavesPlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ChildrenPlacementType)),
+  placeAssistantsAboveChildren: _propTypes["default"].bool,
+  placeAdvisersAboveChildren: _propTypes["default"].bool,
+  maximumColumnsInMatrix: _propTypes["default"].number,
+  buttonsPanelSize: _propTypes["default"].number,
+  groupTitlePanelSize: _propTypes["default"].number,
+  checkBoxPanelSize: _propTypes["default"].number,
+  groupTitlePlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  groupTitleOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  groupTitleVerticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  groupTitleHorizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  groupTitleFontSize: _propTypes["default"].string,
+  groupTitleFontFamily: _propTypes["default"].string,
+  groupTitleColor: _propTypes["default"].string,
+  groupTitleFontWeight: _propTypes["default"].string,
+  groupTitleFontStyle: _propTypes["default"].string,
+  levelTitlePanelSize: _propTypes["default"].number,
+  levelTitlePlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  levelTitlePlaceInside: _propTypes["default"].bool,
+  levelTitleOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  levelTitleVerticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  levelTitleHorizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  levelTitleFontSize: _propTypes["default"].string,
+  levelTitleFontFamily: _propTypes["default"].string,
+  levelTitleFontColor: _propTypes["default"].string,
+  levelTitleColor: _propTypes["default"].string,
+  levelTitleFontWeight: _propTypes["default"].string,
+  levelTitleFontStyle: _propTypes["default"].string,
+  distance: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  minimumScale: _propTypes["default"].number,
+  maximumScale: _propTypes["default"].number,
+  showLabels: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  labelSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  labelOffset: PropTypes.number,
-  labelOrientation: PropTypes.oneOf(Object.values(TextOrientationType)),
-  labelPlacement: PropTypes.oneOf(Object.values(PlacementType)),
-  labelFontSize: PropTypes.string,
-  labelFontFamily: PropTypes.string,
-  labelColor: PropTypes.string,
-  labelFontWeight: PropTypes.string,
-  labelFontStyle: PropTypes.string,
-  enablePanning: PropTypes.bool,
-  autoSizeMinimum: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  labelOffset: _propTypes["default"].number,
+  labelOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  labelPlacement: _propTypes["default"].oneOf(Object.values(_basicprimitives.PlacementType)),
+  labelFontSize: _propTypes["default"].string,
+  labelFontFamily: _propTypes["default"].string,
+  labelColor: _propTypes["default"].string,
+  labelFontWeight: _propTypes["default"].string,
+  labelFontStyle: _propTypes["default"].string,
+  enablePanning: _propTypes["default"].bool,
+  autoSizeMinimum: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  autoSizeMaximum: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  autoSizeMaximum: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  showFrame: PropTypes.bool,
-  frameInnerPadding: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+  showFrame: _propTypes["default"].bool,
+  frameInnerPadding: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   }),
-  frameOuterPadding: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+  frameOuterPadding: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   })
 });
-export default OrgConfigShape;
+
+var _default = OrgConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/OrgItemConfigShape.js

@@ -1,35 +0,48 @@
-import PropTypes from 'prop-types';
-import { ShapeType, Enabled, ItemType, AdviserPlacementType, ChildrenPlacementType, TextOrientationType } from 'basicprimitives';
-const OrgItemConfigShape = PropTypes.shape({
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  parent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  title: PropTypes.string,
-  description: PropTypes.string,
-  image: PropTypes.string,
-  context: PropTypes.any,
-  itemTitleColor: PropTypes.string,
-  minimizedItemShapeType: PropTypes.oneOf(Object.values(ShapeType)),
-  groupTitle: PropTypes.string,
-  groupTitleColor: PropTypes.string,
-  isVisible: PropTypes.bool,
-  isActive: PropTypes.bool,
-  hasSelectorCheckbox: PropTypes.oneOf(Object.values(Enabled)),
-  hasButtons: PropTypes.oneOf(Object.values(Enabled)),
-  itemType: PropTypes.oneOf(Object.values(ItemType)),
-  adviserPlacementType: PropTypes.oneOf(Object.values(AdviserPlacementType)),
-  childrenPlacementType: PropTypes.oneOf(Object.values(ChildrenPlacementType)),
-  levelOffset: PropTypes.number,
-  placeAdvisersAboveChildren: PropTypes.oneOf(Object.values(Enabled)),
-  placeAssistantsAboveChildren: PropTypes.oneOf(Object.values(Enabled)),
-  templateName: PropTypes.string,
-  showCallout: PropTypes.oneOf(Object.values(Enabled)),
-  calloutTemplateName: PropTypes.string,
-  label: PropTypes.string,
-  showLabel: PropTypes.oneOf(Object.values(Enabled)),
-  labelSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var OrgItemConfigShape = _propTypes["default"].shape({
+  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
+  parent: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  title: _propTypes["default"].string,
+  description: _propTypes["default"].string,
+  image: _propTypes["default"].string,
+  context: _propTypes["default"].any,
+  itemTitleColor: _propTypes["default"].string,
+  minimizedItemShapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ShapeType)),
+  groupTitle: _propTypes["default"].string,
+  groupTitleColor: _propTypes["default"].string,
+  isVisible: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  hasSelectorCheckbox: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  hasButtons: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  itemType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ItemType)),
+  adviserPlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  childrenPlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ChildrenPlacementType)),
+  levelOffset: _propTypes["default"].number,
+  placeAdvisersAboveChildren: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  placeAssistantsAboveChildren: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  templateName: _propTypes["default"].string,
+  showCallout: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  calloutTemplateName: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  showLabel: _propTypes["default"].oneOf(Object.values(_basicprimitives.Enabled)),
+  labelSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  labelOrientation: PropTypes.oneOf(Object.values(TextOrientationType))
+  labelOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType))
 });
-export default OrgItemConfigShape;
+
+var _default = OrgItemConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/PaletteItemConfigShape.js

@@ -1,8 +0,21 @@
-import { LineType } from 'basicprimitives';
-import PropTypes from 'prop-types';
-const PaletteItemConfigShape = PropTypes.shape({
-  lineColor: PropTypes.string,
-  lineWidth: PropTypes.number,
-  lineType: PropTypes.oneOf(Object.values(LineType))
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export default PaletteItemConfigShape;
+exports["default"] = void 0;
+
+var _basicprimitives = require("basicprimitives");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var PaletteItemConfigShape = _propTypes["default"].shape({
+  lineColor: _propTypes["default"].string,
+  lineWidth: _propTypes["default"].number,
+  lineType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType))
+});
+
+var _default = PaletteItemConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/ShapeAnnotationConfigShape.js

@@ -1,29 +0,42 @@
-import PropTypes from 'prop-types';
-import { AnnotationType, ZOrderType, ShapeType, LineType, PlacementType } from 'basicprimitives';
-const ShapeAnnotationConfigShape = PropTypes.shape({
-  annotationType: PropTypes.oneOf([AnnotationType.Shape]),
-  zOrderType: PropTypes.oneOf(Object.values(ZOrderType)),
-  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  shapeType: PropTypes.oneOf(Object.values(ShapeType)),
-  offset: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ShapeAnnotationConfigShape = _propTypes["default"].shape({
+  annotationType: _propTypes["default"].oneOf([_basicprimitives.AnnotationType.Shape]),
+  zOrderType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ZOrderType)),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])),
+  shapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ShapeType)),
+  offset: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   }),
-  lineWidth: PropTypes.number,
-  cornerRadius: PropTypes.string,
-  opacity: PropTypes.number,
-  borderColor: PropTypes.string,
-  fillColor: PropTypes.string,
-  lineType: PropTypes.oneOf(Object.values(LineType)),
-  selectItems: PropTypes.bool,
-  label: PropTypes.any,
-  labelSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  lineWidth: _propTypes["default"].number,
+  cornerRadius: _propTypes["default"].string,
+  opacity: _propTypes["default"].number,
+  borderColor: _propTypes["default"].string,
+  fillColor: _propTypes["default"].string,
+  lineType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  selectItems: _propTypes["default"].bool,
+  label: _propTypes["default"].any,
+  labelSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  labelPlacement: PropTypes.oneOf(Object.values(PlacementType)),
-  labelOffset: PropTypes.number
+  labelPlacement: _propTypes["default"].oneOf(Object.values(_basicprimitives.PlacementType)),
+  labelOffset: _propTypes["default"].number
 });
-export default ShapeAnnotationConfigShape;
+
+var _default = ShapeAnnotationConfigShape;
+exports["default"] = _default;

dist/esm/Schemas/TemplateConfigShape.js

@@ -1,41 +0,54 @@
-import PropTypes from 'prop-types';
-import { ShapeType, LineType } from 'basicprimitives';
-const TemplateConfigShape = PropTypes.shape({
-  name: PropTypes.string,
-  isActive: PropTypes.bool,
-  itemSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var TemplateConfigShape = _propTypes["default"].shape({
+  name: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  itemSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  itemBorderWidth: PropTypes.number,
-  onItemRender: PropTypes.func,
-  minimizedItemShapeType: PropTypes.oneOf(Object.values(ShapeType)),
-  minimizedItemSize: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
+  itemBorderWidth: _propTypes["default"].number,
+  onItemRender: _propTypes["default"].func,
+  minimizedItemShapeType: _propTypes["default"].oneOf(Object.values(_basicprimitives.ShapeType)),
+  minimizedItemSize: _propTypes["default"].shape({
+    width: _propTypes["default"].number.isRequired,
+    height: _propTypes["default"].number.isRequired
   }),
-  minimizedItemCornerRadius: PropTypes.number,
-  minimizedItemLineWidth: PropTypes.number,
-  minimizedItemBorderColor: PropTypes.string,
-  minimizedItemLineType: PropTypes.oneOf(Object.values(LineType)),
-  minimizedItemFillColor: PropTypes.string,
-  minimizedItemOpacity: PropTypes.number,
-  highlightPadding: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+  minimizedItemCornerRadius: _propTypes["default"].number,
+  minimizedItemLineWidth: _propTypes["default"].number,
+  minimizedItemBorderColor: _propTypes["default"].string,
+  minimizedItemLineType: _propTypes["default"].oneOf(Object.values(_basicprimitives.LineType)),
+  minimizedItemFillColor: _propTypes["default"].string,
+  minimizedItemOpacity: _propTypes["default"].number,
+  highlightPadding: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   }),
-  highlightBorderWidth: PropTypes.number,
-  onHighlightRender: PropTypes.func,
-  cursorPadding: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    bottom: PropTypes.number.isRequired
+  highlightBorderWidth: _propTypes["default"].number,
+  onHighlightRender: _propTypes["default"].func,
+  cursorPadding: _propTypes["default"].shape({
+    left: _propTypes["default"].number.isRequired,
+    top: _propTypes["default"].number.isRequired,
+    right: _propTypes["default"].number.isRequired,
+    bottom: _propTypes["default"].number.isRequired
   }),
-  cursorBorderWidth: PropTypes.number,
-  onCursorRender: PropTypes.func,
-  onButtonsRender: PropTypes.func
+  cursorBorderWidth: _propTypes["default"].number,
+  onCursorRender: _propTypes["default"].func,
+  onButtonsRender: _propTypes["default"].func
 });
-export default TemplateConfigShape;
+
+var _default = TemplateConfigShape;
+exports["default"] = _default;

dist/esm/Templates/AbstractTemplate.js

@@ -1,11 +0,35 @@
-class AbstractTemplate {
-  template() {}
+"use strict";
 
-  getHashCode() {}
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-  render(data) {}
+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; }
+
+var AbstractTemplate = /*#__PURE__*/function () {
+  function AbstractTemplate() {
+    _classCallCheck(this, AbstractTemplate);
+  }
+
+  _createClass(AbstractTemplate, [{
+    key: "template",
+    value: function template() {}
+  }, {
+    key: "getHashCode",
+    value: function getHashCode() {}
+  }, {
+    key: "render",
+    value: function render(data) {}
+  }]);
+
+  return AbstractTemplate;
+}();
+
 ;
-export default AbstractTemplate;
+var _default = AbstractTemplate;
+exports["default"] = _default;

dist/esm/Templates/AnnotationLabelTemplate.js

@@ -1,14 +0,58 @@
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class AnnotationLabelTemplate extends AbstractTemplate {
-  render(data) {
-    var {
-      label
-    } = data.context;
-    return label;
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 AnnotationLabelTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(AnnotationLabelTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(AnnotationLabelTemplate);
+
+  function AnnotationLabelTemplate() {
+    _classCallCheck(this, AnnotationLabelTemplate);
+
+    return _super.apply(this, arguments);
   }
 
-}
+  _createClass(AnnotationLabelTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var label = data.context.label;
+      return label;
+    }
+  }]);
 
+  return AnnotationLabelTemplate;
+}(_AbstractTemplate2["default"]);
+
 ;
-export default AnnotationLabelTemplate;
+var _default = AnnotationLabelTemplate;
+exports["default"] = _default;

dist/esm/Templates/ButtonsTemplate.js

@@ -1,14 +0,58 @@
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class ButtonsTemplate extends AbstractTemplate {
-  render(data) {
-    const {
-      onButtonsRender
-    } = data;
-    return onButtonsRender(data);
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 ButtonsTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(ButtonsTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(ButtonsTemplate);
+
+  function ButtonsTemplate() {
+    _classCallCheck(this, ButtonsTemplate);
+
+    return _super.apply(this, arguments);
   }
 
-}
+  _createClass(ButtonsTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var onButtonsRender = data.onButtonsRender;
+      return onButtonsRender(data);
+    }
+  }]);
 
+  return ButtonsTemplate;
+}(_AbstractTemplate2["default"]);
+
 ;
-export default ButtonsTemplate;
+var _default = ButtonsTemplate;
+exports["default"] = _default;

dist/esm/Templates/CheckBoxTemplate.js

@@ -1,48 +0,96 @@
-import React from 'react';
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class CheckBoxTemplate extends AbstractTemplate {
-  constructor(selectCheckBoxLabel) {
-    super();
-    this.render = this.render.bind(this);
-    this.selectCheckBoxLabel = selectCheckBoxLabel;
-  }
+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); }
 
-  render(data) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        textAlign: "left"
-      }
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      name: "checkbox",
-      style: {
-        fontSize: "12px",
-        lineHeight: "12px",
-        verticalAlign: "middle",
-        margin: "0px",
-        padding: "0px"
-      },
-      checked: data.isSelected,
-      onChange: () => null,
-      "data-id": data.id
-    }), /*#__PURE__*/React.createElement("span", {
-      name: "selectiontext",
-      style: {
-        fontSize: "12px",
-        lineHeight: "12px",
-        verticalAlign: "middle",
-        maring: "0px",
-        paddingLeft: "2px",
-        paddingTop: "0px",
-        paddingRight: "0px",
-        paddingBottom: "0px"
-      },
-      "data-id": data.id
-    }, this.selectCheckBoxLabel));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 CheckBoxTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(CheckBoxTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(CheckBoxTemplate);
+
+  function CheckBoxTemplate(selectCheckBoxLabel) {
+    var _this;
+
+    _classCallCheck(this, CheckBoxTemplate);
+
+    _this = _super.call(this);
+    _this.render = _this.render.bind(_assertThisInitialized(_this));
+    _this.selectCheckBoxLabel = selectCheckBoxLabel;
+    return _this;
   }
 
-}
+  _createClass(CheckBoxTemplate, [{
+    key: "render",
+    value: function render(data) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          textAlign: "left"
+        }
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        type: "checkbox",
+        name: "checkbox",
+        style: {
+          fontSize: "12px",
+          lineHeight: "12px",
+          verticalAlign: "middle",
+          margin: "0px",
+          padding: "0px"
+        },
+        checked: data.isSelected,
+        onChange: function onChange() {
+          return null;
+        },
+        "data-id": data.id
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        name: "selectiontext",
+        style: {
+          fontSize: "12px",
+          lineHeight: "12px",
+          verticalAlign: "middle",
+          maring: "0px",
+          paddingLeft: "2px",
+          paddingTop: "0px",
+          paddingRight: "0px",
+          paddingBottom: "0px"
+        },
+        "data-id": data.id
+      }, this.selectCheckBoxLabel));
+    }
+  }]);
 
+  return CheckBoxTemplate;
+}(_AbstractTemplate2["default"]);
+
 ;
-export default CheckBoxTemplate;
+var _default = CheckBoxTemplate;
+exports["default"] = _default;

dist/esm/Templates/CursorTemplate.js

@@ -1,11 +0,57 @@
-import React from 'react';
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class CursorTemplate extends AbstractTemplate {
-  constructor(options, itemTemplateConfig) {
-    super();
-    this.options = options;
-    this.itemTemplateConfig = itemTemplateConfig;
-    this.render = this.render.bind(this);
-    this.style = {
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 CursorTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(CursorTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(CursorTemplate);
+
+  function CursorTemplate(options, itemTemplateConfig) {
+    var _this;
+
+    _classCallCheck(this, CursorTemplate);
+
+    _this = _super.call(this);
+    _this.options = options;
+    _this.itemTemplateConfig = itemTemplateConfig;
+    _this.render = _this.render.bind(_assertThisInitialized(_this));
+    _this.style = {
       position: "absolute",
@@ -33,23 +79,30 @@ fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
     };
+    return _this;
   }
 
-  render(data) {
-    const {
-      cursorPadding,
-      itemSize,
-      cursorBorderWidth
-    } = this.itemTemplateConfig;
-    const style = { ...this.style,
-      width: itemSize.width + cursorPadding.left + cursorPadding.right + "px",
-      height: itemSize.height + cursorPadding.top + cursorPadding.bottom + "px",
-      borderWidth: cursorBorderWidth + "px"
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    });
-  }
+  _createClass(CursorTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var _this$itemTemplateCon = this.itemTemplateConfig,
+          cursorPadding = _this$itemTemplateCon.cursorPadding,
+          itemSize = _this$itemTemplateCon.itemSize,
+          cursorBorderWidth = _this$itemTemplateCon.cursorBorderWidth;
 
-}
+      var style = _objectSpread(_objectSpread({}, this.style), {}, {
+        width: itemSize.width + cursorPadding.left + cursorPadding.right + "px",
+        height: itemSize.height + cursorPadding.top + cursorPadding.bottom + "px",
+        borderWidth: cursorBorderWidth + "px"
+      });
 
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: style
+      });
+    }
+  }]);
+
+  return CursorTemplate;
+}(_AbstractTemplate2["default"]);
+
 ;
-export default CursorTemplate;
+var _default = CursorTemplate;
+exports["default"] = _default;

dist/esm/Templates/DotHighlightTemplate.js

@@ -1,10 +0,56 @@
-import React from 'react';
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class DotHighlightTemplate extends AbstractTemplate {
-  constructor(options, itemTemplateConfig) {
-    super();
-    this.render = this.render.bind(this);
-    this.config = itemTemplateConfig;
-    this.style = {
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 DotHighlightTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(DotHighlightTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(DotHighlightTemplate);
+
+  function DotHighlightTemplate(options, itemTemplateConfig) {
+    var _this;
+
+    _classCallCheck(this, DotHighlightTemplate);
+
+    _this = _super.call(this);
+    _this.render = _this.render.bind(_assertThisInitialized(_this));
+    _this.config = itemTemplateConfig;
+    _this.style = {
       position: "absolute",
@@ -28,36 +74,42 @@ fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
     };
+    return _this;
   }
 
-  render(data) {
-    const {
-      minimizedItemCornerRadius,
-      highlightPadding,
-      highlightBorderWidth,
-      minimizedItemSize
-    } = this.config;
-    let radius = 0;
+  _createClass(DotHighlightTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var _this$config = this.config,
+          minimizedItemCornerRadius = _this$config.minimizedItemCornerRadius,
+          highlightPadding = _this$config.highlightPadding,
+          highlightBorderWidth = _this$config.highlightBorderWidth,
+          minimizedItemSize = _this$config.minimizedItemSize;
+      var radius = 0;
 
-    if (minimizedItemCornerRadius === null) {
-      radius = Math.max(minimizedItemSize.width / 2, minimizedItemSize.height / 2) + highlightPadding.left;
-    } else {
-      radius = minimizedItemCornerRadius + highlightPadding.left;
+      if (minimizedItemCornerRadius === null) {
+        radius = Math.max(minimizedItemSize.width / 2, minimizedItemSize.height / 2) + highlightPadding.left;
+      } else {
+        radius = minimizedItemCornerRadius + highlightPadding.left;
+      }
+
+      var style = _objectSpread(_objectSpread({}, this.style), {}, {
+        borderWidth: highlightBorderWidth + "px",
+        left: -highlightBorderWidth + "px",
+        top: -highlightBorderWidth + "px",
+        MozBorderRadius: radius + "px",
+        WebkitBorderRadius: radius + "px",
+        KhtmlBorderRadius: radius + "px",
+        borderRadius: radius + "px"
+      });
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: style
+      });
     }
+  }]);
 
-    const style = { ...this.style,
-      borderWidth: highlightBorderWidth + "px",
-      left: -highlightBorderWidth + "px",
-      top: -highlightBorderWidth + "px",
-      MozBorderRadius: radius + "px",
-      WebkitBorderRadius: radius + "px",
-      KhtmlBorderRadius: radius + "px",
-      borderRadius: radius + "px"
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    });
-  }
+  return DotHighlightTemplate;
+}(_AbstractTemplate2["default"]);
 
-}
-
 ;
-export default DotHighlightTemplate;
+var _default = DotHighlightTemplate;
+exports["default"] = _default;

dist/esm/Templates/GroupTitleTemplate.js

@@ -1,12 +0,60 @@
-import React from 'react';
-import AbstractTemplate from './AbstractTemplate';
-import RotatedText from './RotatedText';
-import { highestContrast } from 'basicprimitives';
+"use strict";
 
-class GroupTitleTemplate extends AbstractTemplate {
-  constructor(options) {
-    super();
-    this.render = this.render.bind(this);
-    this.options = options;
-    this.style = {
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+var _RotatedText = _interopRequireDefault(require("./RotatedText"));
+
+var _basicprimitives = require("basicprimitives");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 GroupTitleTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(GroupTitleTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(GroupTitleTemplate);
+
+  function GroupTitleTemplate(options) {
+    var _this;
+
+    _classCallCheck(this, GroupTitleTemplate);
+
+    _this = _super.call(this);
+    _this.render = _this.render.bind(_assertThisInitialized(_this));
+    _this.options = options;
+    _this.style = {
       position: "absolute",
@@ -35,50 +83,55 @@ fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
     };
+    return _this;
   }
 
-  render(data) {
-    const {
-      groupTitleFontSize,
-      groupTitleFontFamily,
-      groupTitleFontWeight,
-      groupTitleFontStyle,
-      itemTitleSecondFontColor,
-      itemTitleFirstFontColor,
-      groupTitleOrientation,
-      groupTitleHorizontalAlignment,
-      groupTitleVerticalAlignment,
-      groupTitleColor
-    } = this.options;
-    const {
-      context: itemConfig,
-      width,
-      height
-    } = data;
-    const backgroundColor = itemConfig.groupTitleColor || groupTitleColor;
-    const label = (itemConfig.groupTitle || "").replace("\n", "<br/>");
-    const color = highestContrast(backgroundColor, itemTitleSecondFontColor, itemTitleFirstFontColor);
-    const orientations = ['Horizontal', 'RotateLeft', 'RotateRight', 'Horizontal'],
+  _createClass(GroupTitleTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var _this$options = this.options,
+          groupTitleFontSize = _this$options.groupTitleFontSize,
+          groupTitleFontFamily = _this$options.groupTitleFontFamily,
+          groupTitleFontWeight = _this$options.groupTitleFontWeight,
+          groupTitleFontStyle = _this$options.groupTitleFontStyle,
+          itemTitleSecondFontColor = _this$options.itemTitleSecondFontColor,
+          itemTitleFirstFontColor = _this$options.itemTitleFirstFontColor,
+          groupTitleOrientation = _this$options.groupTitleOrientation,
+          groupTitleHorizontalAlignment = _this$options.groupTitleHorizontalAlignment,
+          groupTitleVerticalAlignment = _this$options.groupTitleVerticalAlignment,
+          groupTitleColor = _this$options.groupTitleColor;
+      var itemConfig = data.context,
+          width = data.width,
+          height = data.height;
+      var backgroundColor = itemConfig.groupTitleColor || groupTitleColor;
+      var label = (itemConfig.groupTitle || "").replace("\n", "<br/>");
+      var color = (0, _basicprimitives.highestContrast)(backgroundColor, itemTitleSecondFontColor, itemTitleFirstFontColor);
+      var orientations = ['Horizontal', 'RotateLeft', 'RotateRight', 'Horizontal'],
           horizontalAlignments = ['center', 'left', 'right'],
           verticalAlignments = ['top', 'middle', 'bottom'];
-    const style = { ...this.style,
-      backgroundColor,
-      color,
-      fontSize: groupTitleFontSize,
-      fontFamily: groupTitleFontFamily,
-      fontWeight: groupTitleFontWeight,
-      fontStyle: groupTitleFontStyle
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, /*#__PURE__*/React.createElement(RotatedText, {
-      width: width,
-      height: height,
-      orientation: orientations[groupTitleOrientation],
-      horizontalAlignment: horizontalAlignments[groupTitleHorizontalAlignment],
-      verticalAlignment: verticalAlignments[groupTitleVerticalAlignment]
-    }, label));
-  }
 
-}
+      var style = _objectSpread(_objectSpread({}, this.style), {}, {
+        backgroundColor: backgroundColor,
+        color: color,
+        fontSize: groupTitleFontSize,
+        fontFamily: groupTitleFontFamily,
+        fontWeight: groupTitleFontWeight,
+        fontStyle: groupTitleFontStyle
+      });
 
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement(_RotatedText["default"], {
+        width: width,
+        height: height,
+        orientation: orientations[groupTitleOrientation],
+        horizontalAlignment: horizontalAlignments[groupTitleHorizontalAlignment],
+        verticalAlignment: verticalAlignments[groupTitleVerticalAlignment]
+      }, label));
+    }
+  }]);
+
+  return GroupTitleTemplate;
+}(_AbstractTemplate2["default"]);
+
 ;
-export default GroupTitleTemplate;
+var _default = GroupTitleTemplate;
+exports["default"] = _default;

dist/esm/Templates/HighlightTemplate.js

@@ -1,11 +0,57 @@
-import React from 'react';
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class HighlightTemplate extends AbstractTemplate {
-  constructor(options, config) {
-    super();
-    this.options = options;
-    this.config = config;
-    this.render = this.render.bind(this);
-    this.style = {
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 HighlightTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(HighlightTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(HighlightTemplate);
+
+  function HighlightTemplate(options, config) {
+    var _this;
+
+    _classCallCheck(this, HighlightTemplate);
+
+    _this = _super.call(this);
+    _this.options = options;
+    _this.config = config;
+    _this.render = _this.render.bind(_assertThisInitialized(_this));
+    _this.style = {
       position: "absolute",
@@ -33,18 +79,22 @@ fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
     };
+    return _this;
   }
 
-  render(data) {
-    const {
-      highlightBorderWidth
-    } = this.config;
-    return /*#__PURE__*/React.createElement("div", {
-      style: { ...this.style,
-        borderWidth: highlightBorderWidth + "px"
-      }
-    });
-  }
+  _createClass(HighlightTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var highlightBorderWidth = this.config.highlightBorderWidth;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: _objectSpread(_objectSpread({}, this.style), {}, {
+          borderWidth: highlightBorderWidth + "px"
+        })
+      });
+    }
+  }]);
 
-}
+  return HighlightTemplate;
+}(_AbstractTemplate2["default"]);
 
 ;
-export default HighlightTemplate;
+var _default = HighlightTemplate;
+exports["default"] = _default;

dist/esm/Templates/index.js

@@ -1,20 +0,103 @@
-import annotationLabelTemplate from './AnnotationLabelTemplate';
-import buttonsTemplate from './ButtonsTemplate';
-import checkBoxTemplate from './CheckBoxTemplate';
-import cursorTemplate from './CursorTemplate';
-import dotHighlightTemplate from './DotHighlightTemplate';
-import groupTitleTemplate from './GroupTitleTemplate';
-import highlightTemplate from './HighlightTemplate';
-import itemTemplate from './ItemTemplate';
-import userTemplate from './UserTemplate';
-import labelAnnotationTemplate from './LabelAnnotationTemplate';
-export const AnnotationLabelTemplate = annotationLabelTemplate;
-export const ButtonsTemplate = buttonsTemplate;
-export const CheckBoxTemplate = checkBoxTemplate;
-export const CursorTemplate = cursorTemplate;
-export const DotHighlightTemplate = dotHighlightTemplate;
-export const GroupTitleTemplate = groupTitleTemplate;
-export const HighlightTemplate = highlightTemplate;
-export const ItemTemplate = itemTemplate;
-export const UserTemplate = userTemplate;
-export const LabelAnnotationTemplate = labelAnnotationTemplate;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AnnotationLabelTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _AnnotationLabelTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "ButtonsTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonsTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "CheckBoxTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _CheckBoxTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "CursorTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _CursorTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "DotHighlightTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _DotHighlightTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "GroupTitleTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _GroupTitleTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "HighlightTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _HighlightTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "ItemTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ItemTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "UserTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _UserTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "LabelAnnotationTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _LabelAnnotationTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "LevelTitleTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _LevelTitleTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "LevelBackgroundTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _LevelBackgroundTemplate["default"];
+  }
+});
+
+var _AnnotationLabelTemplate = _interopRequireDefault(require("./AnnotationLabelTemplate"));
+
+var _ButtonsTemplate = _interopRequireDefault(require("./ButtonsTemplate"));
+
+var _CheckBoxTemplate = _interopRequireDefault(require("./CheckBoxTemplate"));
+
+var _CursorTemplate = _interopRequireDefault(require("./CursorTemplate"));
+
+var _DotHighlightTemplate = _interopRequireDefault(require("./DotHighlightTemplate"));
+
+var _GroupTitleTemplate = _interopRequireDefault(require("./GroupTitleTemplate"));
+
+var _HighlightTemplate = _interopRequireDefault(require("./HighlightTemplate"));
+
+var _ItemTemplate = _interopRequireDefault(require("./ItemTemplate"));
+
+var _UserTemplate = _interopRequireDefault(require("./UserTemplate"));
+
+var _LabelAnnotationTemplate = _interopRequireDefault(require("./LabelAnnotationTemplate"));
+
+var _LevelTitleTemplate = _interopRequireDefault(require("./LevelTitleTemplate"));
+
+var _LevelBackgroundTemplate = _interopRequireDefault(require("./LevelBackgroundTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

dist/esm/Templates/ItemTemplate.js

@@ -1,14 +0,61 @@
-import React from 'react';
-import { Colors, highestContrast } from 'basicprimitives';
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class ItemTemplate extends AbstractTemplate {
-  constructor(options, config) {
-    super();
-    this.options = options;
-    this.config = config;
-    this.render = this.render.bind(this); // It is unlikly that anybody would use default template in final product, so
+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 _basicprimitives = require("basicprimitives");
+
+var _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 ItemTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(ItemTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(ItemTemplate);
+
+  function ItemTemplate(options, config) {
+    var _this;
+
+    _classCallCheck(this, ItemTemplate);
+
+    _this = _super.call(this);
+    _this.options = options;
+    _this.config = config;
+    _this.render = _this.render.bind(_assertThisInitialized(_this)); // It is unlikly that anybody would use default template in final product, so
     // having in-line styles is not a problem
 
-    const item = {
+    var item = {
       position: "absolute",
@@ -26,3 +73,3 @@ overflow: "visible",
     };
-    const cornerAll = {
+    var cornerAll = {
       MozBorderRadius: "4px",
@@ -33,3 +80,3 @@ WebkitBorderRadius: "4px",
     };
-    const itemFrame = {
+    var itemFrame = {
       border: "1px solid #dddddd",
@@ -39,5 +86,4 @@ background: "#eeeeee",
     };
-    const defaultTemplate = { ...item,
-      ...cornerAll,
-      ...itemFrame,
+
+    var defaultTemplate = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, item), cornerAll), itemFrame), {}, {
       width: "100%",
@@ -47,4 +93,5 @@ height: "100%",
       top: "-1px"
-    };
-    const title = { ...item,
+    });
+
+    var title = _objectSpread(_objectSpread({}, item), {}, {
       textOverflow: "ellipsis",
@@ -58,15 +105,15 @@ OTextOverflow: "ellipsis",
       padding: 0
-    };
-    const background = { ...item,
-      ...cornerAll,
-      ...itemFrame
-    };
-    const photoFrame = { ...item,
+    });
+
+    var background = _objectSpread(_objectSpread(_objectSpread({}, item), cornerAll), itemFrame);
+
+    var photoFrame = _objectSpread(_objectSpread({}, item), {}, {
       border: "1px solid #cccccc",
       background: "#f6f6f6",
       color: "#1c94c4"
-    };
-    this.styles = {
-      defaultTemplate,
-      title: { ...title,
+    });
+
+    _this.styles = {
+      defaultTemplate: defaultTemplate,
+      title: _objectSpread(_objectSpread({}, title), {}, {
         top: "2px",
@@ -76,4 +123,4 @@ left: "2px",
         height: "16px"
-      },
-      background: { ...background,
+      }),
+      background: _objectSpread(_objectSpread({}, background), {}, {
         top: "2px",
@@ -83,4 +130,4 @@ left: "2px",
         height: "20px"
-      },
-      photoFrame: { ...photoFrame,
+      }),
+      photoFrame: _objectSpread(_objectSpread({}, photoFrame), {}, {
         top: "26px",
@@ -90,3 +137,3 @@ left: "2px",
         height: "60px"
-      },
+      }),
       photo: {
@@ -96,3 +143,3 @@ height: "60px",
       },
-      description: { ...item,
+      description: _objectSpread(_objectSpread({}, item), {}, {
         overflow: "hidden",
@@ -105,44 +152,47 @@ textAlign: "left",
         fontSize: "12px"
-      }
+      })
     };
+    return _this;
   }
 
-  render(data) {
-    const {
-      context: itemConfig
-    } = data;
-    const {
-      defaultTemplate,
-      title,
-      background,
-      photoFrame,
-      photo,
-      description
-    } = this.styles;
-    const itemTitleColor = itemConfig.itemTitleColor != null ? itemConfig.itemTitleColor : Colors.RoyalBlue,
-          color = highestContrast(itemTitleColor, this.options.itemTitleSecondFontColor, this.options.itemTitleFirstFontColor);
-    return /*#__PURE__*/React.createElement("div", {
-      style: defaultTemplate
-    }, /*#__PURE__*/React.createElement("div", {
-      style: { ...background,
-        backgroundColor: itemTitleColor
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: { ...title,
-        color
-      }
-    }, itemConfig.title)), /*#__PURE__*/React.createElement("div", {
-      style: photoFrame
-    }, /*#__PURE__*/React.createElement("img", {
-      style: photo,
-      src: itemConfig.image,
-      alt: itemConfig.title
-    })), /*#__PURE__*/React.createElement("div", {
-      style: description
-    }, itemConfig.description));
-  }
+  _createClass(ItemTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var itemConfig = data.context;
+      var _this$styles = this.styles,
+          defaultTemplate = _this$styles.defaultTemplate,
+          title = _this$styles.title,
+          background = _this$styles.background,
+          photoFrame = _this$styles.photoFrame,
+          photo = _this$styles.photo,
+          description = _this$styles.description;
+      var itemTitleColor = itemConfig.itemTitleColor != null ? itemConfig.itemTitleColor : _basicprimitives.Colors.RoyalBlue,
+          color = (0, _basicprimitives.highestContrast)(itemTitleColor, this.options.itemTitleSecondFontColor, this.options.itemTitleFirstFontColor);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: defaultTemplate
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: _objectSpread(_objectSpread({}, background), {}, {
+          backgroundColor: itemTitleColor
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: _objectSpread(_objectSpread({}, title), {}, {
+          color: color
+        })
+      }, itemConfig.title)), /*#__PURE__*/_react["default"].createElement("div", {
+        style: photoFrame
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        style: photo,
+        src: itemConfig.image,
+        alt: itemConfig.title
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: description
+      }, itemConfig.description));
+    }
+  }]);
 
-}
+  return ItemTemplate;
+}(_AbstractTemplate2["default"]);
 
 ;
-export default ItemTemplate;
+var _default = ItemTemplate;
+exports["default"] = _default;

dist/esm/Templates/LabelAnnotationTemplate.js

@@ -1,14 +0,58 @@
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class LabelAnnotationTemplate extends AbstractTemplate {
-  render(data) {
-    var {
-      title
-    } = data.context;
-    return title;
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 LabelAnnotationTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(LabelAnnotationTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(LabelAnnotationTemplate);
+
+  function LabelAnnotationTemplate() {
+    _classCallCheck(this, LabelAnnotationTemplate);
+
+    return _super.apply(this, arguments);
   }
 
-}
+  _createClass(LabelAnnotationTemplate, [{
+    key: "render",
+    value: function render(data) {
+      var title = data.context.title;
+      return title;
+    }
+  }]);
 
+  return LabelAnnotationTemplate;
+}(_AbstractTemplate2["default"]);
+
 ;
-export default LabelAnnotationTemplate;
+var _default = LabelAnnotationTemplate;
+exports["default"] = _default;

dist/esm/Templates/RotatedText.js

@@ -1,95 +0,149 @@
-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; }
+"use strict";
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+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); }
 
-class RotatedText extends Component {
-  getTransform(orientation) {
-    let result = "";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-    switch (orientation) {
-      case 'RotateLeft':
-        result = "rotate(-90deg)";
-        break;
+var _react = _interopRequireWildcard(require("react"));
 
-      case 'RotateRight':
-        result = "rotate(90deg)";
-        break;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-      default:
-        break;
-    }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-    return result;
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function 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 _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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 RotatedText = /*#__PURE__*/function (_Component) {
+  _inherits(RotatedText, _Component);
+
+  var _super = _createSuper(RotatedText);
+
+  function RotatedText() {
+    _classCallCheck(this, RotatedText);
+
+    return _super.apply(this, arguments);
   }
 
-  render() {
-    const {
-      children,
-      width,
-      height,
-      orientation,
-      horizontalAlignment,
-      verticalAlignment
-    } = this.props;
-    const transform = this.getTransform(orientation);
-    let size = null;
+  _createClass(RotatedText, [{
+    key: "getTransform",
+    value: function getTransform(orientation) {
+      var result = "";
 
-    if (orientation === "Horizontal") {
-      size = {
-        width: width + "px",
-        height: height + "px",
-        maxWidth: width + "px",
-        maxHeight: height + "px"
-      };
-    } else {
-      size = {
-        width: height + "px",
-        height: width + "px",
-        maxWidth: height + "px",
-        maxHeight: width + "px",
-        left: Math.round(width / 2.0 - height / 2.0) + "px",
-        top: Math.round(height / 2.0 - width / 2.0) + "px"
-      };
+      switch (orientation) {
+        case 'RotateLeft':
+          result = "rotate(-90deg)";
+          break;
+
+        case 'RotateRight':
+          result = "rotate(90deg)";
+          break;
+
+        default:
+          break;
+      }
+
+      return result;
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          width = _this$props.width,
+          height = _this$props.height,
+          orientation = _this$props.orientation,
+          horizontalAlignment = _this$props.horizontalAlignment,
+          verticalAlignment = _this$props.verticalAlignment;
+      var transform = this.getTransform(orientation);
+      var size = null;
 
-    var style = {
-      position: "absolute",
-      padding: 0,
-      margin: 0,
-      lineHeight: 1,
-      textAlign: horizontalAlignment,
-      WebkitTransformOrigin: "center center",
-      MozTransformOrigin: "center center",
-      OTransformOrigin: "center center",
-      msTransformOrigin: "center center",
-      WebkitTransform: transform,
-      MozTransform: transform,
-      OTransform: transform,
-      msTransform: transform,
-      transform,
-      ...size
-    };
-    return verticalAlignment === 'top' ? /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, children) : /*#__PURE__*/React.createElement("table", {
-      style: { ...style,
-        borderCollapse: "collapse"
+      if (orientation === "Horizontal") {
+        size = {
+          width: width + "px",
+          height: height + "px",
+          maxWidth: width + "px",
+          maxHeight: height + "px"
+        };
+      } else {
+        size = {
+          width: height + "px",
+          height: width + "px",
+          maxWidth: height + "px",
+          maxHeight: width + "px",
+          left: Math.round(width / 2.0 - height / 2.0) + "px",
+          top: Math.round(height / 2.0 - width / 2.0) + "px"
+        };
       }
-    }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      style: {
-        verticalAlign: verticalAlignment,
-        padding: 0
-      }
-    }, children))));
-  }
 
-}
+      var style = _objectSpread({
+        position: "absolute",
+        padding: 0,
+        margin: 0,
+        lineHeight: 1,
+        textAlign: horizontalAlignment,
+        WebkitTransformOrigin: "center center",
+        MozTransformOrigin: "center center",
+        OTransformOrigin: "center center",
+        msTransformOrigin: "center center",
+        WebkitTransform: transform,
+        MozTransform: transform,
+        OTransform: transform,
+        msTransform: transform,
+        transform: transform
+      }, size);
 
+      return verticalAlignment === 'top' ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: style
+      }, children) : /*#__PURE__*/_react["default"].createElement("table", {
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          borderCollapse: "collapse"
+        })
+      }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+        style: {
+          verticalAlign: verticalAlignment,
+          padding: 0
+        }
+      }, children))));
+    }
+  }]);
+
+  return RotatedText;
+}(_react.Component);
+
 _defineProperty(RotatedText, "propTypes", {
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  orientation: PropTypes.oneOf(['Horizontal', 'RotateLeft', 'RotateRight']),
-  horizontalAlignment: PropTypes.oneOf(['left', 'center', 'right']),
-  verticalAlignment: PropTypes.oneOf(['top', 'middle', 'bottom'])
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  orientation: _propTypes["default"].oneOf(['Horizontal', 'RotateLeft', 'RotateRight']),
+  horizontalAlignment: _propTypes["default"].oneOf(['left', 'center', 'right']),
+  verticalAlignment: _propTypes["default"].oneOf(['top', 'middle', 'bottom'])
 });
@@ -103,2 +157,3 @@
 
-export default RotatedText;
+var _default = RotatedText;
+exports["default"] = _default;

dist/esm/Templates/UserTemplate.js

@@ -1,12 +0,50 @@
-import AbstractTemplate from './AbstractTemplate';
+"use strict";
 
-class UserTemplate extends AbstractTemplate {
-  constructor(options, content, onRender) {
-    super();
-    this.render = onRender;
+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 _AbstractTemplate2 = _interopRequireDefault(require("./AbstractTemplate"));
+
+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 _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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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 UserTemplate = /*#__PURE__*/function (_AbstractTemplate) {
+  _inherits(UserTemplate, _AbstractTemplate);
+
+  var _super = _createSuper(UserTemplate);
+
+  function UserTemplate(options, content, onRender) {
+    var _this;
+
+    _classCallCheck(this, UserTemplate);
+
+    _this = _super.call(this);
+    _this.render = onRender;
+    return _this;
   }
 
-}
+  return UserTemplate;
+}(_AbstractTemplate2["default"]);
 
 ;
-export default UserTemplate;
+var _default = UserTemplate;
+exports["default"] = _default;

dist/umd/BaseDiagram.js

@@ -119,2 +119,4 @@ "use strict";
     _this.framePlaceholderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.titlesMousePanelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.titlesPlaceholderRef = /*#__PURE__*/_react["default"].createRef();
     _this.scrollPanelRef = /*#__PURE__*/_react["default"].createRef();
@@ -137,3 +139,5 @@ _this.mousePanelRef = /*#__PURE__*/_react["default"].createRef();
       UserTemplate: _Templates.UserTemplate,
-      LabelAnnotationTemplate: _Templates.LabelAnnotationTemplate
+      LabelAnnotationTemplate: _Templates.LabelAnnotationTemplate,
+      LevelTitleTemplate: _Templates.LevelTitleTemplate,
+      LevelBackgroundTemplate: _Templates.LevelBackgroundTemplate
     };
@@ -190,3 +194,3 @@ _this.tasks = TaskManagerFactory(_this.getOptions, _this.getGraphics, _this.getLayout, _this.setLayout, _this.templates);
       var current = this.controlPanelRef.current;
-      var pixelAlignmentFix = (0, _basicprimitives.getFixOfPixelALignment)(current);
+      var pixelAlignmentFix = (0, _basicprimitives.getFixOfPixelAlignment)(current);
       current.style.marginLeft = pixelAlignmentFix.width + "px";
@@ -608,14 +612,22 @@ current.style.marginTop = pixelAlignmentFix.height + "px";
       var autoSize = layoutOptions.autoSize,
+          controlSize = layoutOptions.controlSize,
           scale = layoutOptions.scale,
-          scaledContentSize = layoutOptions.scaledContentSize,
-          viewportSize = layoutOptions.viewportSize,
-          frameThickness = layoutOptions.frameThickness,
-          controlSize = layoutOptions.controlSize;
+          frameMousePanelRect = layoutOptions.frameMousePanelRect,
+          framePlaceholderSize = layoutOptions.framePlaceholderSize,
+          titlesMousePanelRect = layoutOptions.titlesMousePanelRect,
+          titlesPlaceholderSize = layoutOptions.titlesPlaceholderSize,
+          scrollPanelRect = layoutOptions.scrollPanelRect,
+          mousePanelSize = layoutOptions.mousePanelSize,
+          placeholderSize = layoutOptions.placeholderSize;
       this.layoutOptions = {
         autoSize: autoSize,
+        controlSize: new _basicprimitives.Size(controlSize),
         scale: scale,
-        scaledContentSize: new _basicprimitives.Size(scaledContentSize),
-        viewportSize: new _basicprimitives.Size(viewportSize),
-        frameThickness: new _basicprimitives.Thickness(frameThickness),
-        controlSize: new _basicprimitives.Size(controlSize)
+        frameMousePanelRect: new _basicprimitives.Rect(frameMousePanelRect),
+        framePlaceholderSize: new _basicprimitives.Size(framePlaceholderSize),
+        titlesMousePanelRect: new _basicprimitives.Rect(titlesMousePanelRect),
+        titlesPlaceholderSize: new _basicprimitives.Size(titlesPlaceholderSize),
+        scrollPanelRect: new _basicprimitives.Rect(scrollPanelRect),
+        mousePanelSize: new _basicprimitives.Size(mousePanelSize),
+        placeholderSize: new _basicprimitives.Size(placeholderSize)
       };
@@ -631,11 +643,13 @@ }
           calloutplaceholder = _this$graphics$placeh.calloutplaceholder,
-          frameplaceholder = _this$graphics$placeh.frameplaceholder;
+          frameplaceholder = _this$graphics$placeh.frameplaceholder,
+          titlesplaceholder = _this$graphics$placeh.titlesplaceholder;
       var placeholderRectCSS = placeholder.rect.getCSS();
       var _this$layoutOptions = this.layoutOptions,
           autoSize = _this$layoutOptions.autoSize,
+          controlSize = _this$layoutOptions.controlSize,
           scale = _this$layoutOptions.scale,
-          scaledContentSize = _this$layoutOptions.scaledContentSize,
-          viewportSize = _this$layoutOptions.viewportSize,
-          frameThickness = _this$layoutOptions.frameThickness,
-          controlSize = _this$layoutOptions.controlSize;
+          frameMousePanelRect = _this$layoutOptions.frameMousePanelRect,
+          titlesMousePanelRect = _this$layoutOptions.titlesMousePanelRect,
+          scrollPanelRect = _this$layoutOptions.scrollPanelRect,
+          mousePanelSize = _this$layoutOptions.mousePanelSize;
       /* set CSS scale of content */
@@ -660,3 +674,3 @@
         tabIndex: "0"
-      }, !frameThickness.isEmpty() && /*#__PURE__*/_react["default"].createElement("div", {
+      }, frameplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.frameMousePanelRef,
@@ -668,3 +682,3 @@ onMouseMove: this.onFrameMouseMove,
           overflow: "hidden"
-        }, controlSize.getCSS())
+        }, frameMousePanelRect.getCSS())
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -700,2 +714,40 @@ ref: this.framePlaceholderRef,
         }, elements);
+      }))), titlesplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.titlesMousePanelRef,
+        onMouseMove: this.onFrameMouseMove,
+        onClick: this.onFrameClick,
+        style: _objectSpread({
+          position: "absolute",
+          overflow: "hidden"
+        }, titlesMousePanelRect.getCSS())
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.titlesMousePanelRef,
+        style: _objectSpread(_objectSpread({}, titlesplaceholder.rect.getCSS()), {}, {
+          position: "absolute",
+          overflow: "hidden",
+          "transformOrigin": "0 0",
+          "transform": scaletext,
+          "msTransform": scaletext,
+
+          /* IE 9 */
+          "WebkitTransform": scaletext,
+
+          /* Safari and Chrome */
+          "OTransform": scaletext,
+
+          /* Opera */
+          "MozTransform": scaletext
+          /* Firefox */
+
+        })
+      }, graphics.map(this, "titlesplaceholder", function (layerKey, elements) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: layerKey,
+          style: {
+            position: "absolute",
+            overflow: "visible",
+            left: "0px",
+            top: "0px"
+          }
+        }, elements);
       }))), /*#__PURE__*/_react["default"].createElement("div", {
@@ -707,7 +759,5 @@ ref: this.scrollPanelRef,
           overflow: "auto",
-          WebkitOverflowScrolling: "touch",
-          left: frameThickness.left + "px",
-          top: frameThickness.top + "px"
-        }, viewportSize.getCSS()), {}, {
-          border: !frameThickness.isEmpty() ? "1px dotted #dddddd" : ""
+          WebkitOverflowScrolling: "touch"
+        }, scrollPanelRect.getCSS()), {}, {
+          border: scrollPanelRect.x > 0 ? "1px dotted #dddddd" : ""
         })
@@ -722,3 +772,3 @@ }, /*#__PURE__*/_react["default"].createElement("div", {
           overflow: "hidden"
-        }, scaledContentSize.getCSS())
+        }, mousePanelSize.getCSS())
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -725,0 +775,0 @@ ref: this.placeholderRef,

dist/umd/index.js

@@ -78,2 +78,8 @@ "use strict";
 });
+Object.defineProperty(exports, "LevelAnnotationConfigShape", {
+  enumerable: true,
+  get: function get() {
+    return _LevelAnnotationConfigShape["default"];
+  }
+});
 Object.defineProperty(exports, "TemplateConfigShape", {
@@ -110,4 +116,6 @@ enumerable: true,
 
+var _LevelAnnotationConfigShape = _interopRequireDefault(require("./Schemas/LevelAnnotationConfigShape"));
+
 var _TemplateConfigShape = _interopRequireDefault(require("./Schemas/TemplateConfigShape"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

dist/umd/Schemas/FamConfigShape.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _LevelAnnotationConfigShape = _interopRequireDefault(require("./LevelAnnotationConfigShape"));
+
 var _LabelAnnotationConfigShape = _interopRequireDefault(require("./LabelAnnotationConfigShape"));
@@ -53,3 +55,3 @@
   items: _propTypes["default"].arrayOf(_FamItemConfigShape["default"]),
-  annotations: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_BackgroundAnnotationConfigShape["default"], _ConnectorAnnotationConfigShape["default"], _HighlightPathAnnotationConfigShape["default"], _ShapeAnnotationConfigShape["default"], _LabelAnnotationConfigShape["default"]])),
+  annotations: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_BackgroundAnnotationConfigShape["default"], _ConnectorAnnotationConfigShape["default"], _HighlightPathAnnotationConfigShape["default"], _ShapeAnnotationConfigShape["default"], _LabelAnnotationConfigShape["default"], _LevelAnnotationConfigShape["default"]])),
   cursorItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
@@ -109,2 +111,14 @@ highlightItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   groupTitleFontStyle: _propTypes["default"].string,
+  levelTitlePanelSize: _propTypes["default"].number,
+  levelTitlePlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  levelTitlePlaceInside: _propTypes["default"].bool,
+  levelTitleOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  levelTitleVerticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  levelTitleHorizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  levelTitleFontSize: _propTypes["default"].string,
+  levelTitleFontFamily: _propTypes["default"].string,
+  levelTitleFontColor: _propTypes["default"].string,
+  levelTitleColor: _propTypes["default"].string,
+  levelTitleFontWeight: _propTypes["default"].string,
+  levelTitleFontStyle: _propTypes["default"].string,
   distance: _propTypes["default"].number,
@@ -111,0 +125,0 @@ scale: _propTypes["default"].number,

dist/umd/Schemas/OrgConfigShape.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _LevelAnnotationConfigShape = _interopRequireDefault(require("./LevelAnnotationConfigShape"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -45,3 +47,3 @@
   items: _propTypes["default"].arrayOf(_OrgItemConfigShape["default"]),
-  annotations: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_BackgroundAnnotationConfigShape["default"], _ConnectorAnnotationConfigShape["default"], _HighlightPathAnnotationConfigShape["default"], _ShapeAnnotationConfigShape["default"]])),
+  annotations: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_BackgroundAnnotationConfigShape["default"], _ConnectorAnnotationConfigShape["default"], _HighlightPathAnnotationConfigShape["default"], _ShapeAnnotationConfigShape["default"], _LevelAnnotationConfigShape["default"]])),
   cursorItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
@@ -102,2 +104,14 @@ highlightItem: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   groupTitleFontStyle: _propTypes["default"].string,
+  levelTitlePanelSize: _propTypes["default"].number,
+  levelTitlePlacementType: _propTypes["default"].oneOf(Object.values(_basicprimitives.AdviserPlacementType)),
+  levelTitlePlaceInside: _propTypes["default"].bool,
+  levelTitleOrientation: _propTypes["default"].oneOf(Object.values(_basicprimitives.TextOrientationType)),
+  levelTitleVerticalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.VerticalAlignmentType)),
+  levelTitleHorizontalAlignment: _propTypes["default"].oneOf(Object.values(_basicprimitives.HorizontalAlignmentType)),
+  levelTitleFontSize: _propTypes["default"].string,
+  levelTitleFontFamily: _propTypes["default"].string,
+  levelTitleFontColor: _propTypes["default"].string,
+  levelTitleColor: _propTypes["default"].string,
+  levelTitleFontWeight: _propTypes["default"].string,
+  levelTitleFontStyle: _propTypes["default"].string,
   distance: _propTypes["default"].number,
@@ -104,0 +118,0 @@ scale: _propTypes["default"].number,

dist/umd/Templates/index.js

@@ -6,3 +6,74 @@ "use strict";
 });
-exports.LabelAnnotationTemplate = exports.UserTemplate = exports.ItemTemplate = exports.HighlightTemplate = exports.GroupTitleTemplate = exports.DotHighlightTemplate = exports.CursorTemplate = exports.CheckBoxTemplate = exports.ButtonsTemplate = exports.AnnotationLabelTemplate = void 0;
+Object.defineProperty(exports, "AnnotationLabelTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _AnnotationLabelTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "ButtonsTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonsTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "CheckBoxTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _CheckBoxTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "CursorTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _CursorTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "DotHighlightTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _DotHighlightTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "GroupTitleTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _GroupTitleTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "HighlightTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _HighlightTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "ItemTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ItemTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "UserTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _UserTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "LabelAnnotationTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _LabelAnnotationTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "LevelTitleTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _LevelTitleTemplate["default"];
+  }
+});
+Object.defineProperty(exports, "LevelBackgroundTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _LevelBackgroundTemplate["default"];
+  }
+});
 
@@ -29,23 +100,6 @@ var _AnnotationLabelTemplate = _interopRequireDefault(require("./AnnotationLabelTemplate"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _LevelTitleTemplate = _interopRequireDefault(require("./LevelTitleTemplate"));
 
-var AnnotationLabelTemplate = _AnnotationLabelTemplate["default"];
-exports.AnnotationLabelTemplate = AnnotationLabelTemplate;
-var ButtonsTemplate = _ButtonsTemplate["default"];
-exports.ButtonsTemplate = ButtonsTemplate;
-var CheckBoxTemplate = _CheckBoxTemplate["default"];
-exports.CheckBoxTemplate = CheckBoxTemplate;
-var CursorTemplate = _CursorTemplate["default"];
-exports.CursorTemplate = CursorTemplate;
-var DotHighlightTemplate = _DotHighlightTemplate["default"];
-exports.DotHighlightTemplate = DotHighlightTemplate;
-var GroupTitleTemplate = _GroupTitleTemplate["default"];
-exports.GroupTitleTemplate = GroupTitleTemplate;
-var HighlightTemplate = _HighlightTemplate["default"];
-exports.HighlightTemplate = HighlightTemplate;
-var ItemTemplate = _ItemTemplate["default"];
-exports.ItemTemplate = ItemTemplate;
-var UserTemplate = _UserTemplate["default"];
-exports.UserTemplate = UserTemplate;
-var LabelAnnotationTemplate = _LabelAnnotationTemplate["default"];
-exports.LabelAnnotationTemplate = LabelAnnotationTemplate;
+var _LevelBackgroundTemplate = _interopRequireDefault(require("./LevelBackgroundTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package.json

 {
   "name": "basicprimitivesreact",
   "sideEffects": false,
-  "version": "6.0.5",
+  "version": "6.1.0",
   "main": "dist/umd/index.js",
@@ -23,16 +23,15 @@ "module": "dist/esm/index.js",
   "dependencies": {
-    "basicprimitives": "6.0.3",
+    "basicprimitives": "6.1.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/node": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/node": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.10",
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "node-sass": "^4.13.1",
     "react": "^17.0.1",
@@ -49,5 +48,2 @@ "react-dnd": "^11.1.3",
     "eject": "react-scripts eject",
-    "build-css": "node-sass src/ -o src/",
-    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
-    "deploy": "gh-pages -d build --repo https://github.com/BasicPrimitives/react",
     "publish:npm": "SET NODE_ENV=production && if exist dist rmdir /s /q dist && mkdir dist && npx babel src/Diagrams --presets=\"module:@babel/preset-react\" --out-dir dist/esm --copy-files && npx babel src/Diagrams --presets=\"module:@babel/preset-env\",\"module:@babel/preset-react\" --out-dir dist/umd --copy-files"
@@ -54,0 +50,0 @@ },

README.md

@@ -60,3 +60,3 @@ # [Basic Primitives](https://www.basicprimitives.com) Diagrams for React
         parent: null,
-        title: 'Scott Aasrud',
+        title: 'James Smith',
         description: 'VP, Public Sector',
@@ -115,9 +115,9 @@ image: photos.a
 
-#### Auto layout and fititing the diagram into a single screen space:
+#### Auto layout and fitting the diagram into a single screen space:
 When using a graphics editor to manually draw your diagrams, it is common place to have large gaps between the nodes. This can make the diagram/chart unreadable, hard to edit and navigate. On top of that, on a large scale the diagram could have screen size intervals between items. Admittedly the computer UI does allow the user to scale and fit the diagram in order to visualize it on a single screen. But in that case, the items become small and unreadable as there is no scaling priority and the items are just too small to be readable [Here is PDF example demonstrating the problem.](docs/images/sparse_data_problem.pdf) The primary goal of our approach to organizational charts and other diagrams visualization is to resolve these issues. Our product component specializes in displaying large diagrams in a single screen or nearly removing all scrolling while at the same time not affecting the diagram's usability. This is only possible when the diagramming component is in control of the auto layout for the nodes.
 
-* Minimizing nodes into markers and labels: Our component provides a special mode that renders the diagram nodes in the form of markers. This is a highly scalable form that is capable of rendering large numbers of nodes while not affecting the rendering performance. With this, huge diagrams can be fit into avaialable screen space.
+* Minimizing nodes into markers and labels: Our component provides a special mode that renders the diagram nodes in the form of markers. This is a highly scalable form that is capable of rendering large numbers of nodes while not affecting the rendering performance. With this, huge diagrams can be fit into available screen space.
 * The user has focused navigation as they go node by node. The key nodes are kept full size as the less relevant nodes in the user view are minimized. The user also has the option to customize which nodes are relevant via selection, annotations and navigation options. By default the chart displays the cursor selected item and its neighbors in full size and minimizes all other less relevant nodes. By clicking on neighboring nodes the user will move the focus of interest to the newly selected part of the diagram. Local zoom around the cursor item works for all available diagrams.
 * Pinning of items in diagram. All selected/checked items are always displayed full size. All other items stay minimized. This allows to pin/select items in different branches of the diagram and show them side by side within available screen space for comparison.
-* Diagram autolayout consistency. Our auto layout provides visual consistency across all diagramming documents. The user can customize the visual appearance for any diagrams that they wish manually. All users have various skills and preferences, so auto layout provides consistent default diagram viewing throughout the organization.
+* Diagram auto layout consistency. Our auto layout provides visual consistency across all diagramming documents. The user can customize the visual appearance for any diagrams that they wish manually. All users have various skills and preferences, so auto layout provides consistent default diagram viewing throughout the organization.
 * Always up to date. Your application's diagrams will not be effected by changes in the component's layout algorithms and application data. Your visualizations will always be up to date and in sync with your data.
@@ -129,6 +129,6 @@
 #### Auto alignment of nodes relative to each other
-Our auto layout that is responsible for our diagrams, focuses a lot of effort on the alignment of the nodes when visualizing them. This is very important because when the end user is analyzing the diagram it is easier to identify their dependencies by looking at their alignment and positions rather then tracing lines between nodes. For example if a set of nodes are organized into a pyramid formation, the pyramid shape itself gives a clear indication about the mutual relation or the group structure of the nodes. In such an ideal case,minimal to no connection lines should be needed. This is the ultimate goal when visualizing diagrams, that in an ideal case every node should be placed in such way that no connection lines are neccessary in order to show the node's relations within the diagram.
+Our auto layout that is responsible for our diagrams, focuses a lot of effort on the alignment of the nodes when visualizing them. This is very important because when the end user is analyzing the diagram it is easier to identify their dependencies by looking at their alignment and positions rather then tracing lines between nodes. For example if a set of nodes are organized into a pyramid formation, the pyramid shape itself gives a clear indication about the mutual relation or the group structure of the nodes. In such an ideal case,minimal to no connection lines should be needed. This is the ultimate goal when visualizing diagrams, that in an ideal case every node should be placed in such way that no connection lines are necessary in order to show the node's relations within the diagram.
 
 #### Customizable Placement of children
-By default all direct children that belong to a parent node are of the same rank and status between each other and due to that, are always aligned below the parent and are organized in the same way. However for special cases were the end user wishes to have a child that is seperate from the rest of it's siblings, we provide custom child types that the end user can use to place diffrent ranking nodes anywhere around the parent node. These placement options give a lot of space for the creation of roles such as an Assitant, Adviser, various Partners and co-heads that may be in the organization. Additionally, by default a node's children are always placed in a horizontal line below the parent node. On a large scale this may result in the end user having to scroll screens in order to view all of the nodes. To compensate for this, we provide the option of placing all of the children of a parent node in a sqaure/matrix formation. This will reduce sideways screen scrolling by compacting the child nodes into a much smaller area on the screen.
+By default all direct children that belong to a parent node are of the same rank and status between each other and due to that, are always aligned below the parent and are organized in the same way. However for special cases were the end user wishes to have a child that is separate from the rest of it's siblings, we provide custom child types that the end user can use to place different ranking nodes anywhere around the parent node. These placement options give a lot of space for the creation of roles such as an Assistant, Adviser, various Partners and co-heads that may be in the organization. Additionally, by default a node's children are always placed in a horizontal line below the parent node. On a large scale this may result in the end user having to scroll screens in order to view all of the nodes. To compensate for this, we provide the option of placing all of the children of a parent node in a square/matrix formation. This will reduce sideways screen scrolling by compacting the child nodes into a much smaller area on the screen.
 
@@ -138,3 +138,3 @@ #### Automatic transformation of connection lines between nodes
 
-The following is an example of a complete bipartite graph. As visable every parent node is connected with every child node.
+The following is an example of a complete bipartite graph. As visible every parent node is connected with every child node.
 
@@ -150,3 +150,3 @@ ![Complete Bipartite Graph](docs/images/cbp88.png)
 #### Automatic elimination of redundant relations between nodes
-Another typical problem with visualizing connections is the possible excessive amount of connections that can take place between multiple gradnchild and grandparent nodes. Usually when we draw family diagrams we are more interested to see the overall order of dependencies over the more direct and specific node relations. In a family tree we know that all the nodes are directly linked to one another via their immediate parent. Because of this, we can remove the direct connections between non-immediate parents, reducing the amount of visual clutter on the screen and still get the same order of dependencies. By doing this the diagram becomes a lot easier to analyze, view and navigate.
+Another typical problem with visualizing connections is the possible excessive amount of connections that can take place between multiple grandchild and grandparent nodes. Usually when we draw family diagrams we are more interested to see the overall order of dependencies over the more direct and specific node relations. In a family tree we know that all the nodes are directly linked to one another via their immediate parent. Because of this, we can remove the direct connections between non-immediate parents, reducing the amount of visual clutter on the screen and still get the same order of dependencies. By doing this the diagram becomes a lot easier to analyze, view and navigate.
 
@@ -156,3 +156,3 @@ ![Excessive amount of connections](docs/images/cbp88everyparent.png)
 ### Annotating diagram nodes
-Every time we make changes to our diagrams, we need to visualize the performed modifications otherwise it is hard to trace the changes before and after the modification occured. So in order to visualize the diagram's transition from one state to another, the control provides various annotations to the end user. Annotations are API elements that are attached to the diagram nodes. We draw our annotations either in front of the nodes or in the background. The annotations don't affect the nodes placement in any way. As a result the control redraws them instantaneously without rerendering or recalculating the actual diagram layout. The general logic of annotations is that they are not supposed to be displayed for every node in the diagram. The application is supposed to create them and add them to the diagram depending on the context of the current user cursor or operation that the user is performing with the data. It should be noted that annotations have minimal mutual conflict resolution. As a result it is very easy to clutter the diagram with an excessive number of annotations. But they are nevertheless very useful when describing or giving node specific context or details to the diagram.
+Every time we make changes to our diagrams, we need to visualize the performed modifications otherwise it is hard to trace the changes before and after the modification occurred. So in order to visualize the diagram's transition from one state to another, the control provides various annotations to the end user. Annotations are API elements that are attached to the diagram nodes. We draw our annotations either in front of the nodes or in the background. The annotations don't affect the nodes placement in any way. As a result the control redraws them instantaneously without rendering or recalculating the actual diagram layout. The general logic of annotations is that they are not supposed to be displayed for every node in the diagram. The application is supposed to create them and add them to the diagram depending on the context of the current user cursor or operation that the user is performing with the data. It should be noted that annotations have minimal mutual conflict resolution. As a result it is very easy to clutter the diagram with an excessive number of annotations. But they are nevertheless very useful when describing or giving node specific context or details to the diagram.
 
@@ -163,3 +163,3 @@ * Connector lines - Direct lines between nodes across the diagram.
 * Shape annotations - Similar to background annotations, but are drawn in front of nodes in the form of custom shapes. 
-* In-layout labels - Are annotations that are drawn over connector lines but are also taken into consideration when calculating and rendering the layout of the diagram. Because of this, they do not cross any nodes, however can effect loading times as the entire diagram is rerendered.
+* In-layout labels - Are annotations that are drawn over connector lines but are also taken into consideration when calculating and rendering the layout of the diagram. Because of this, they do not cross any nodes, however can effect loading times as the entire diagram is rendered.
 
@@ -169,4 +169,4 @@ ## First time user expereince with our product
 * Default node template - You just need to provide your data and the first diagram will be rendered.
-* Standard collection control features - Our product follows the standard behaivour for regular list and tree collection controls available in many other frameworks.
-* User buttons panel - A custom in layout context panel with buttons. The diagram needs maximum screen space, so cutting screen real estate on the sides of the diagram for the buttons panel takes valuable space out of diagram. Placing the buttons in pop-up context menus or panels is also not ideal since it decreases UI discoverability and first time user expereince. So our component reserves space right inside of the diagram layout for the buttons panel.
+* Standard collection control features - Our product follows the standard behavior for regular list and tree collection controls available in many other frameworks.
+* User buttons panel - A custom in layout context panel with buttons. The diagram needs maximum screen space, so cutting screen real estate on the sides of the diagram for the buttons panel takes valuable space out of diagram. Placing the buttons in pop-up context menus or panels is also not ideal since it decreases UI discoverability and first time user experience. So our component reserves space right inside of the diagram layout for the buttons panel.
 * Basic visual categories - Our data visualization component has various ways to display basic data categories: titles, vertical titles, title colors and photos.
@@ -186,4 +186,4 @@
 
-Copyright (c) 2013 - 2020 Basic Primitives Inc
+Copyright (c) 2013 - 2021 Basic Primitives Inc
 * [Non-commercial - Free](http://creativecommons.org/licenses/by-nc/3.0/)
 * [Commercial and government licenses](license.pdf)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

455712

increased by38.51%

Dev dependency count

14

decreased by-6.67%

Number of package files

69

increased by9.52%

Lines of code

6248

increased by30.3%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedbasicprimitives@6.1.0(transitive)

• - Removedbasicprimitives@6.0.3(transitive)

• Updatedbasicprimitives@6.1.0