@buerli.io/react-cad 0.0.22-beta.0 → 0.0.23-beta.1

package/build/index.cjs.js

@@ -10,23 +10,24 @@ var THREE = require('three');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
+var create = require('zustand');
+var vanilla = require('zustand/vanilla');
+require('antd/dist/antd.css');
 var icons = require('@ant-design/icons');
 var _extends = require('@babel/runtime/helpers/extends');
 var Switch = require('antd/lib/switch');
+var AntdButton = require('antd/lib/button');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var styled = require('styled-components');
 var Tooltip = require('antd/lib/tooltip');
 var RadioGroupImpl = require('antd/lib/radio/group');
 var RadioButtonImpl = require('antd/lib/radio/radioButton');
+var antd = require('antd');
 var guid = require('uuid');
 var shallow = require('zustand/shallow');
 var threeStdlib = require('three-stdlib');
 var SelectImpl = require('antd/lib/select');
 var path = require('path');
-var antd = require('antd');
-require('antd/dist/antd.css');
-var create = require('zustand');
-var vanilla = require('zustand/vanilla');
 var reactUid = require('react-uid');
 var deepmerge = require('deepmerge');
 var reactSortableHoc = require('react-sortable-hoc');
@@ -55,9 +56,9 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 var deepmerge__namespace = /*#__PURE__*/_interopNamespaceDefault(deepmerge);
 
-function ownKeys$k(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 ownKeys$m(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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function getGraphicId(tree, refOrObjId) {
   const res = {
     graphicId: refOrObjId,
@@ -129,7 +130,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
   }
 
   const createSelItem = React.useCallback(element => {
-    return core.createGraphicItem(prodId, _objectSpread$k(_objectSpread$k({}, element), {}, {
+    return core.createGraphicItem(prodId, _objectSpread$m(_objectSpread$m({}, element), {}, {
       productId: prodId
     }));
   }, [prodId]);
@@ -160,7 +161,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
               const elem = cont.map[Number(grIds[0])];
 
               if (elem) {
-                elems.push(_objectSpread$k(_objectSpread$k({}, elem), {}, {
+                elems.push(_objectSpread$m(_objectSpread$m({}, elem), {}, {
                   graphicId: contId,
                   type: core.GraphicType.SOLID
                 }));
@@ -198,9 +199,9 @@ function useSelectedItems(drawingId, refOrObjIds) {
   return selectedItems;
 }
 
-function ownKeys$j(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 ownKeys$l(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function addMembers(drawingId, ccObjId) {
   const drawingState = core.getDrawing(drawingId);
   const objInTree = drawingState.structure.tree[ccObjId];
@@ -213,7 +214,7 @@ function addMembers(drawingId, ccObjId) {
   const members = {};
   Object.keys(curMembers).forEach(memberName => {
     const curMember = curMembers[memberName];
-    members[memberName] = _objectSpread$j(_objectSpread$j({}, curMember), {}, {
+    members[memberName] = _objectSpread$l(_objectSpread$l({}, curMember), {}, {
       name: memberName
     });
 
@@ -333,6 +334,10 @@ function getAncestorIdByClass(drawingId, objectId, parentClass) {
 
   return object.parent;
 }
+const isSketchGeometry = arg => {
+  const objClass = typeof arg === 'string' ? arg : arg.class;
+  return objClass === classcad.CCClasses.CCPoint || objClass === classcad.CCClasses.CCLine || objClass === classcad.CCClasses.CCArc || objClass === classcad.CCClasses.CCCircle;
+};
 const is2DConstraint = arg => {
   const objClass = typeof arg === 'string' ? arg : arg.class;
   return Boolean(objClass.match(/CC_2D.+Constraint/)) || objClass === classcad.CCClasses.CCRigidSet;
@@ -441,6 +446,12 @@ function fmod(num, denom) {
   k = k < 0 ? k + 1 : k;
   return num - k * denom;
 }
+function numberToHexColor(color) {
+  const hexLen = 6;
+  const hexStr = color.toString(16);
+  const zeroNumber = hexLen - hexStr.length;
+  return '#' + '0'.repeat(zeroNumber) + hexStr;
+}
 
 const DimContext = /*#__PURE__*/React.createContext({
   globalToLocalM: new THREE__namespace.Matrix4(),
@@ -448,7 +459,7 @@ const DimContext = /*#__PURE__*/React.createContext({
   drawingId: -1
 });
 
-function useScale(position, getVector) {
+function useScale$1(position, getVector) {
   const ref = React.useRef();
   fiber.useFrame(args => {
     const sf = react.CameraHelper.calculateScaleFactor(position, 1, args.camera, args.size);
@@ -893,6 +904,133 @@ const isAngular = dim => {
   return dim.class === classcad.CCClasses.CCAngularDimension || dim.class === classcad.CCClasses.CCAngularFeatureDimension || dim.class === classcad.CCClasses.CCAngularRefDimension;
 };
 
+const zoomToFit = drawingId => {
+  var _getCamera;
+
+  const drawing = core.getDrawing(drawingId);
+  const camApi = (_getCamera = react.getCamera(drawingId)) == null ? void 0 : _getCamera.api;
+
+  if (!drawing || !camApi) {
+    return;
+  }
+
+  const {
+    structure,
+    api: drawingApi
+  } = drawing;
+  const {
+    root,
+    currentProduct,
+    currentNode
+  } = structure;
+  let currRoot = currentNode || currentProduct || root;
+
+  if (currentProduct && structure.tree[currentProduct].class === 'CC_Part') {
+    currRoot = currentProduct;
+  }
+
+  const bounds = drawingApi.structure.calculateProductBounds(currRoot);
+  camApi.setZoom('fit', bounds);
+};
+
+function ownKeys$k(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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const appApi = (set, get) => ({
+  assemblyTree: {
+    startProdEditing: (drawingId, objId) => {
+      set(state => {
+        let res = [];
+        const curNode = core.api.getState().drawing.refs[drawingId].structure.currentNode;
+        res = state.assemblyTree.prodStack;
+        curNode && res.push(curNode);
+        return _objectSpread$k(_objectSpread$k({}, state), {}, {
+          assemblyTree: {
+            prodStack: [...res]
+          }
+        });
+      });
+      classcad.ccAPI.assemblyBuilder.setCurrentNode(drawingId, objId).then(() => zoomToFit(drawingId)).catch();
+    },
+    goBack: drawingId => {
+      const prodStack = get().assemblyTree.prodStack;
+      const prevProd = prodStack[prodStack.length - 1];
+      if (!prevProd) return;
+      set(state => {
+        const res = state.assemblyTree.prodStack;
+        res.pop();
+        return _objectSpread$k(_objectSpread$k({}, state), {}, {
+          assemblyTree: {
+            prodStack: [...res]
+          }
+        });
+      });
+      classcad.ccAPI.assemblyBuilder.setCurrentNode(drawingId, prevProd).then(() => zoomToFit(drawingId)).catch();
+    },
+    clearProdStack: () => {
+      set(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
+        assemblyTree: {
+          prodStack: []
+        }
+      }));
+    }
+  },
+  blankDiv: {
+    show: callback => {
+      set(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
+        blankDiv: {
+          isActive: true,
+          onClose: callback
+        }
+      }));
+    },
+    hide: () => {
+      set(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
+        blankDiv: {
+          isActive: false,
+          onClose: undefined
+        }
+      }));
+    }
+  }
+});
+
+const createAppState = (set, get) => ({
+  assemblyTree: {
+    prodStack: []
+  },
+  blankDiv: {
+    isActive: false,
+    onClose: undefined
+  },
+  api: appApi(set, get)
+});
+
+const CADApi = vanilla((set, get) => createAppState(set, get));
+const useCADStore = create(CADApi);
+const getCADState = CADApi.getState;
+
+const blankZIndex = 1000;
+const BlankDiv = () => {
+  const isActive = useCADStore(s => s.blankDiv.isActive);
+  const onClick = React.useCallback(() => {
+    const cadState = getCADState();
+    cadState.blankDiv.onClose && cadState.blankDiv.onClose();
+    cadState.api.blankDiv.hide();
+  }, []);
+  return isActive ? /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    style: {
+      zIndex: blankZIndex,
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    }
+  }) : null;
+};
+
 const mainColor = 0x424242;
 const lineWidth$1 = 0.5;
 const arrowSize = 5;
@@ -916,7 +1054,7 @@ const TextValue = ({
       backgroundColor: backgroundColor ? `#${backgroundColor.toString(16)}` : undefined,
       color: `#${mainColor.toString(16)}`,
       fontSize: '17px',
-      cursor: 'pointer'
+      cursor: 'text'
     }
   }, value)));
 };
@@ -953,6 +1091,12 @@ const DimValue = ({
     return expr ? expr + ' (' + value.toFixed(2) + ')' : value.toFixed(2);
   }, [master, dimension, memberName]);
   const [editMode, setEditMode] = React.useState(false);
+  React.useEffect(() => {
+    if (editMode) {
+      getCADState().api.blankDiv.show(() => setEditMode(false));
+      return () => getCADState().api.blankDiv.hide();
+    }
+  }, [editMode, setEditMode]);
   const update = React.useCallback(() => {
     const master_ = core.getDrawing(drawingId).structure.tree[masterId];
 
@@ -995,7 +1139,7 @@ const DimValue = ({
   return /*#__PURE__*/React.createElement("group", {
     position: position
   }, /*#__PURE__*/React.createElement(drei.Html, {
-    zIndexRange: [0, 0],
+    zIndexRange: [blankZIndex + 1, blankZIndex + 1],
     style: {
       marginTop: '22px'
     },
@@ -1010,7 +1154,7 @@ const DimValue = ({
       backgroundColor: backgroundColor ? `#${backgroundColor.toString(16)}` : undefined,
       color: `#${mainColor.toString(16)}`,
       fontSize: '17px',
-      cursor: 'pointer'
+      cursor: 'text'
     }
   }, caption) : /*#__PURE__*/React.createElement("div", {
     style: {
@@ -1022,14 +1166,14 @@ const DimValue = ({
     allowExpr: true
   })))));
 };
-const Line$1 = ({
+const Line$2 = ({
   start,
   end
 }) => {
   const position = React.useMemo(() => new THREE__namespace.Vector3().lerpVectors(start, end, 0.5), [start, end]);
   const quaternion = React.useMemo(() => new THREE__namespace.Quaternion().setFromUnitVectors(new THREE__namespace.Vector3(0, 1, 0), end.clone().sub(start).normalize()), [start, end]);
   const lineLength = start.distanceTo(end);
-  const ref = useScale(position, scaleF => [lineWidth$1 * scaleF, lineLength, lineWidth$1 * scaleF]);
+  const ref = useScale$1(position, scaleF => [lineWidth$1 * scaleF, lineLength, lineWidth$1 * scaleF]);
   return lineLength === 0 ? null : /*#__PURE__*/React.createElement("mesh", {
     ref: ref,
     position: position,
@@ -1052,7 +1196,7 @@ const Arrow$1 = ({
     // Move arrow that end of the arrow will be at props.end
     geomRef.current && geomRef.current.translate(0, -0.5, 0);
   }, [geomRef]);
-  const ref = useScale(position, sf => [arrowSize * sf, arrowSize * 2 * sf, arrowSize * sf]);
+  const ref = useScale$1(position, sf => [arrowSize * sf, arrowSize * 2 * sf, arrowSize * sf]);
   return /*#__PURE__*/React.createElement("mesh", {
     ref: ref,
     position: position,
@@ -1081,7 +1225,7 @@ const Arc$1 = ({
     lines.push(linePos);
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, lines.map((line, i) => /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lines.map((line, i) => /*#__PURE__*/React.createElement(Line$2, {
     key: i,
     start: line[0],
     end: line[1]
@@ -1108,7 +1252,9 @@ const PositionHandler = ({
   const {
     camera
   } = fiber.useThree();
-  const ref = useScale(position, sf => [hRadius$1 * sf, hRadius$1 * sf, hRadius$1 * sf]);
+  const ref = useScale$1(position, sf => [hRadius$1 * sf, hRadius$1 * sf, hRadius$1 * sf]);
+  const [isHovered, setIsHovered] = React.useState(false);
+  drei.useCursor(isHovered, 'move');
   const onPointerDown = React.useCallback(e => {
     if (e.buttons !== 1) // Continue only if 'primary' mouse button is pressed
       return;
@@ -1148,6 +1294,10 @@ const PositionHandler = ({
     te.target.releasePointerCapture(te.pointerId);
     te.stopPropagation();
   }, [dimId, drawingId, position, setPState]);
+  const onPointerOver = React.useCallback(e => {
+    setIsHovered(true);
+    e.stopPropagation();
+  }, []);
   const onPointerMove = React.useCallback(e => {
     if (isPressed.current) {
       isDragged.current = true;
@@ -1157,12 +1307,18 @@ const PositionHandler = ({
 
     e.stopPropagation();
   }, [setPosition, globalToLocalM, camera]);
+  const onPointerOut = React.useCallback(e => {
+    setIsHovered(false);
+    e.stopPropagation();
+  }, []);
   return /*#__PURE__*/React.createElement("mesh", {
     ref: ref,
     position: position,
     onPointerDown: onPointerDown,
     onPointerMove: onPointerMove,
-    onPointerUp: onPointerUp
+    onPointerUp: onPointerUp,
+    onPointerOver: onPointerOver,
+    onPointerOut: onPointerOut
   }, /*#__PURE__*/React.createElement("sphereGeometry", {
     args: [1.5, 16, 16]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
@@ -1213,16 +1369,16 @@ const LinearDim = ({
       endDir: endD
     };
   }, [members, tmpDimP]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: startFoot,
     end: tmpDimP
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: tmpDimP,
     end: endFoot
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: startP,
     end: startFoot
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: endP,
     end: endFoot
   }), /*#__PURE__*/React.createElement(Arrow$1, {
@@ -1268,10 +1424,10 @@ const RadialDim = ({
       dir: outside ? dir_.multiplyScalar(-1) : dir_
     };
   }, [members, tmpDimP]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: centerP,
     end: endP
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: endP,
     end: dimP
   }), /*#__PURE__*/React.createElement(Arrow$1, {
@@ -1315,10 +1471,10 @@ const DiametralDim = ({
       dirEnd: outside ? dir.clone().multiplyScalar(-1) : dir
     };
   }, [members, tmpDimP]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: startP,
     end: tmpDimP
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: tmpDimP,
     end: endP
   }), /*#__PURE__*/React.createElement(Arrow$1, {
@@ -1394,10 +1550,10 @@ const AngularDim = ({
       endL2: extendCrn ? corner : end
     };
   }, [members, tmpDimP]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: startL1,
     end: startFoot
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: endFoot,
     end: endL2
   }), /*#__PURE__*/React.createElement(Arc$1, {
@@ -1472,13 +1628,14 @@ var DimGraphics$1 = DimGraphics;
 /**
  * @see https://reactjs.org/docs/error-boundaries.html
  */
-
+const isDev = process.env.NODE_ENV === 'development';
 /**
  * Wrapper for components which are exported from package.
  * It's intended to catch all errors and show friendly fallback to the user instead of error log.
  * By default it returns null in error case. You have to pass showHtml prop to show message to the user.
  * TODO: implement message showing.
  */
+
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -1507,7 +1664,7 @@ class ErrorBoundary extends React.Component {
       Object.values(warns).forEach(w => {
         if (w) {
           hasWarning = true;
-          console.warn(w.caption);
+          isDev && console.warn(w.caption);
         }
       });
     }
@@ -1955,9 +2112,9 @@ var index$w = /*#__PURE__*/Object.freeze({
   useDimensionSetId: useDimensionSetId
 });
 
-function ownKeys$i(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 ownKeys$j(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$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * Implies the following data structure:
  * data: {
@@ -2060,7 +2217,7 @@ function useMateSelection(drawingId, matePath, csysId) {
   }));
   const handlers = React.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$i(_objectSpread$i({}, hHandlers), sHandlers);
+      return _objectSpread$j(_objectSpread$j({}, hHandlers), sHandlers);
     }
 
     return {};
@@ -2076,9 +2233,9 @@ function useMateSelection(drawingId, matePath, csysId) {
   }, [isHovered, isSelected, isSelectable, handlers]);
 }
 
-function ownKeys$h(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 ownKeys$i(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * Implies the following data structure:
  * data: {
@@ -2097,7 +2254,8 @@ const createTreeObjSelItem = (productId, object) => {
     data: {
       object
     },
-    label
+    label,
+    removeCondition: d => d.structure.tree[object.id] === undefined
   };
 };
 
@@ -2206,7 +2364,7 @@ function useTreeObjSelection(drawingId, objId) {
   const isSelected = useIsSelected(drawingId, objId);
   const handlers = React.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$h(_objectSpread$h({}, hHandlers), sHandlers);
+      return _objectSpread$i(_objectSpread$i({}, hHandlers), sHandlers);
     }
 
     return {};
@@ -5030,7 +5188,7 @@ const Root$g = ({
   }));
 };
 
-const Point$1 = ({
+const Point$2 = ({
   position,
   radius,
   color,
@@ -5102,7 +5260,7 @@ const OriginPoint = ({
   handlers,
   userData
 }) => {
-  return /*#__PURE__*/React.createElement(Point$1, {
+  return /*#__PURE__*/React.createElement(Point$2, {
     position: position ? position.clone() : new THREE__namespace.Vector3(),
     radius: 2,
     color: color,
@@ -5143,7 +5301,7 @@ const Csys = ({
   userData
 }) => {
   const position = new THREE__namespace.Vector3().setFromMatrixPosition(matrix);
-  const ref = useScale(position.clone(), sf => [2 * sf, 2 * sf, 2 * sf]);
+  const ref = useScale$1(position.clone(), sf => [2 * sf, 2 * sf, 2 * sf]);
   return /*#__PURE__*/React.createElement("group", _extends({
     matrix: matrix,
     matrixAutoUpdate: false
@@ -5182,7 +5340,7 @@ const SelectedCsys = ({
   userData
 }) => {
   const position = new THREE__namespace.Vector3().setFromMatrixPosition(matrix);
-  const ref = useScale(position.clone(), sf => [2 * sf, 2 * sf, 2 * sf]);
+  const ref = useScale$1(position.clone(), sf => [2 * sf, 2 * sf, 2 * sf]);
   return /*#__PURE__*/React.createElement("group", _extends({
     matrix: matrix,
     matrixAutoUpdate: false
@@ -5257,7 +5415,7 @@ const Distance = ({
       setShowValue(true);
     }
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: start,
     end: end
   }), /*#__PURE__*/React.createElement(Arrow$1, {
@@ -5344,10 +5502,10 @@ const Angle = ({
       setShowValue(true);
     }
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: center,
     end: end1
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: center,
     end: end2
   }), /*#__PURE__*/React.createElement("group", {
@@ -5374,7 +5532,7 @@ const Position = ({
   pos,
   result
 }) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Point$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Point$2, {
     position: pos,
     radius: 1.5,
     color: 0xaf1111
@@ -5389,7 +5547,7 @@ const Vector = ({
   end
 }) => {
   const dir = end.clone().sub(start);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: start,
     end: end
   }), /*#__PURE__*/React.createElement(Arrow$1, {
@@ -5516,6 +5674,7 @@ let HandlersList;
   HandlersList["FILLET"] = "fillet";
   HandlersList["HOVER"] = "hover";
   HandlersList["TRIM"] = "trim";
+  HandlersList["USEREF"] = "useReference";
   HandlersList["GSELECTION"] = "globalSelection";
 })(HandlersList || (HandlersList = {}));
 
@@ -5552,7 +5711,7 @@ const calcPreviewValue = (dir0, dir1, sector, reflex) => {
 
 const hRadius = 6;
 const TmpPositionHandler = props => {
-  const ref = useScale(props.position, sf => [hRadius * sf, hRadius * sf, hRadius * sf]);
+  const ref = useScale$1(props.position, sf => [hRadius * sf, hRadius * sf, hRadius * sf]);
   return /*#__PURE__*/React.createElement("mesh", {
     ref: ref,
     position: props.position
@@ -5664,10 +5823,10 @@ const TmpAngularDim = props => {
     };
   }, [dir0, dir1, center, dimPos, reflex]);
   const text = radiansToDegrees(previewValue).toFixed(2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line$2, {
     start: cornerP,
     end: startFoot
-  }), /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(Line$2, {
     start: endFoot,
     end: cornerP
   }), /*#__PURE__*/React.createElement(Arc$1, {
@@ -5728,9 +5887,9 @@ function getSketchState(drawingId, pluginId) {
   return plugin.state;
 }
 
-function ownKeys$g(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 ownKeys$h(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function CreateAngle(drawingId, pluginId) {
   const {
     set
@@ -5780,8 +5939,8 @@ function CreateAngle(drawingId, pluginId) {
     set(state_ => {
       const tmpAngularDimension = state_.tmpObjects[tmpDimensionId];
       return {
-        tmpObjects: _objectSpread$g(_objectSpread$g({}, state_.tmpObjects), {}, {
-          [tmpDimensionId]: _objectSpread$g(_objectSpread$g({}, tmpAngularDimension), params)
+        tmpObjects: _objectSpread$h(_objectSpread$h({}, state_.tmpObjects), {}, {
+          [tmpDimensionId]: _objectSpread$h(_objectSpread$h({}, tmpAngularDimension), params)
         })
       };
     });
@@ -5828,7 +5987,7 @@ function CreateAngle(drawingId, pluginId) {
     const center = linesInfo.center;
     const dimPos = center.clone().addScaledVector(dir0.clone().add(dir1).normalize(), 10);
 
-    const tmpAngularDimension = _objectSpread$g(_objectSpread$g({
+    const tmpAngularDimension = _objectSpread$h(_objectSpread$h({
       class: classcad.CCClasses.CCAngularDimension,
       id: tmpDimensionId
     }, linesInfo), {}, {
@@ -5908,12 +6067,105 @@ function CreateAngle(drawingId, pluginId) {
   };
 }
 
-function ownKeys$f(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 ownKeys$g(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-function Hover(drawingId, pluginId) {
-  let timerId;
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+let timerId;
+const hover = (drawingId, pluginId, hoveredId) => {
+  const {
+    state,
+    set
+  } = core.getPlugin(drawingId, pluginId);
+  const tree = core.getDrawing(drawingId).structure.tree;
+  const hoveredObject = tree[hoveredId];
+
+  if (!hoveredObject || hoveredObject && hoveredObject.class === classcad.CCClasses.CCSketch || state.rubberBandRectangle) {
+    return;
+  }
+
+  if (is2DConstraint(hoveredObject)) {
+    const constraintEntities = hoveredObject.members.entities.members.map(entity => entity.value);
+    set(state_ => {
+      const highlighted = state_.highlighted;
+      const highlightedConstraints = highlighted.filter(id => is2DConstraint(tree[id]) && id !== hoveredId);
+      return {
+        hovered: hoveredId,
+        highlighted: [...highlightedConstraints, hoveredId, ...constraintEntities]
+      };
+    });
+  } else {
+    const linkedConstraints = Object.values(tree).filter(obj => is2DConstraint(obj)).filter(obj => obj.members.entities.members.some(entity => entity.value === hoveredId)).map(obj => obj.id);
+    const constraintsToGeometry = {};
+    linkedConstraints.forEach(id => {
+      constraintsToGeometry[id] = hoveredId;
+    });
+    set(state_ => {
+      return {
+        hovered: hoveredId,
+        highlighted: [hoveredId, ...linkedConstraints],
+        constraintsToGeometry: _objectSpread$g(_objectSpread$g({}, state_.constraintsToGeometry), constraintsToGeometry)
+      };
+    });
+  }
+
+  if (timerId) {
+    window.clearTimeout(timerId);
+    timerId = undefined;
+  }
+};
+const unhover = (drawingId, pluginId, hoveredId) => {
+  const {
+    state,
+    set
+  } = core.getPlugin(drawingId, pluginId);
+  const tree = core.getDrawing(drawingId).structure.tree;
+  const hoveredObject = tree[hoveredId];
+
+  if (!hoveredObject || hoveredObject && hoveredObject.class === classcad.CCClasses.CCSketch || state.rubberBandRectangle) {
+    return;
+  }
+
+  set(state_ => {
+    const highlighted = state_.highlighted;
+    const highlightedConstraints = highlighted.filter(id => is2DConstraint(tree[id]));
+    return {
+      hovered: state_.hovered === hoveredId ? UNDEFINEDID : state_.hovered,
+      highlighted: highlightedConstraints
+    };
+  });
+
+  if (timerId) {
+    window.clearTimeout(timerId);
+  }
+
+  timerId = window.setTimeout(() => {
+    set({
+      highlighted: []
+    });
+  }, 1000);
+};
+const select = (drawingId, pluginId, selectedId) => {
+  const {
+    set
+  } = core.getPlugin(drawingId, pluginId);
+  set(state => {
+    const curSelected = state.selected;
+
+    if (curSelected.indexOf(selectedId) >= 0) {
+      const newSelected = curSelected.filter(id => id !== selectedId);
+      return {
+        selected: newSelected
+      };
+    } else {
+      curSelected.push(selectedId);
+      return {
+        selected: [...curSelected]
+      };
+    }
+  });
+};
 
+function Hover(drawingId, pluginId) {
   const filter = object => true;
 
   const destructor = () => {
@@ -5926,81 +6178,14 @@ function Hover(drawingId, pluginId) {
   };
 
   const onPointerOver = e => {
-    const {
-      state,
-      set
-    } = core.getPlugin(drawingId, pluginId);
     const hoveredId = e.object.userData.objId;
-    const tree = core.getDrawing(drawingId).structure.tree;
-    const hoveredObject = tree[hoveredId];
+    hover(drawingId, pluginId, hoveredId);
     e.stopPropagation();
-
-    if (!hoveredObject || hoveredObject && hoveredObject.class === classcad.CCClasses.CCSketch || state.rubberBandRectangle) {
-      return;
-    }
-
-    if (is2DConstraint(hoveredObject)) {
-      const constraintEntities = hoveredObject.members.entities.members.map(entity => entity.value);
-      set(state_ => {
-        const highlighted = state_.highlighted;
-        const highlightedConstraints = highlighted.filter(id => is2DConstraint(tree[id]) && id !== hoveredId);
-        return {
-          hovered: hoveredId,
-          highlighted: [...highlightedConstraints, hoveredId, ...constraintEntities]
-        };
-      });
-    } else {
-      const linkedConstraints = Object.values(tree).filter(obj => is2DConstraint(obj)).filter(obj => obj.members.entities.members.some(entity => entity.value === hoveredId)).map(obj => obj.id);
-      const constraintsToGeometry = {};
-      linkedConstraints.forEach(id => {
-        constraintsToGeometry[id] = hoveredId;
-      });
-      set(state_ => {
-        return {
-          hovered: hoveredId,
-          highlighted: [hoveredId, ...linkedConstraints],
-          constraintsToGeometry: _objectSpread$f(_objectSpread$f({}, state_.constraintsToGeometry), constraintsToGeometry)
-        };
-      });
-    }
-
-    if (timerId) {
-      window.clearTimeout(timerId);
-      timerId = undefined;
-    }
   };
 
   const onPointerOut = e => {
-    const {
-      state,
-      set
-    } = core.getPlugin(drawingId, pluginId);
     const hoveredId = e.object.userData.objId;
-    const tree = core.getDrawing(drawingId).structure.tree;
-    const hoveredObject = tree[hoveredId];
-
-    if (!hoveredObject || hoveredObject && hoveredObject.class === classcad.CCClasses.CCSketch || state.rubberBandRectangle) {
-      return;
-    }
-
-    set(state_ => {
-      const highlighted = state_.highlighted;
-      const highlightedConstraints = highlighted.filter(id => is2DConstraint(tree[id]));
-      return {
-        hovered: state_.hovered === hoveredId ? UNDEFINEDID : state_.hovered,
-        highlighted: highlightedConstraints
-      };
-    });
-
-    if (timerId) {
-      window.clearTimeout(timerId);
-    }
-
-    timerId = window.setTimeout(() => {
-      set({
-        highlighted: []
-      });
-    }, 1000);
+    unhover(drawingId, pluginId, hoveredId);
     e.stopPropagation();
   };
 
@@ -6099,9 +6284,9 @@ const snapDraggedPoints = (diff, drawingId) => {
   return snapResult;
 };
 
-function ownKeys$e(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 ownKeys$f(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const artifDelay = 16;
 
@@ -6288,22 +6473,8 @@ function Drag(drawingId, pluginId) {
         return;
       }
 
-      set(state => {
-        const curSelected = state.selected;
-
-        if (curSelected.indexOf(pressedId) >= 0) {
-          const newSelected = curSelected.filter(id => id !== pressedId);
-          return {
-            selected: newSelected
-          };
-        } else {
-          curSelected.push(pressedId);
-          return {
-            selected: [...curSelected]
-          };
-        }
-      });
-    }
+      select(drawingId, pluginId, pressedId);
+    }
 
     clearIgnoreList();
     clearDraggedPoints();
@@ -6389,7 +6560,7 @@ function Drag(drawingId, pluginId) {
     name: HandlersList.DRAG,
     filter,
     onDestruct: destructor,
-    pointerHandlers: _objectSpread$e({
+    pointerHandlers: _objectSpread$f({
       onPointerDown,
       onPointerUp,
       onPointerMove
@@ -6401,9 +6572,9 @@ function Drag(drawingId, pluginId) {
   };
 }
 
-function ownKeys$d(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 ownKeys$e(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function DrawPoint(drawingId, pluginId) {
   const {
     set
@@ -6472,8 +6643,8 @@ function DrawPoint(drawingId, pluginId) {
     set(state => {
       const tmpPoint = state.tmpObjects[tmpPointId];
       return {
-        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$d(_objectSpread$d({}, tmpPoint), {}, {
+        tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$e(_objectSpread$e({}, tmpPoint), {}, {
             position: mousePos
           })
         })
@@ -6495,9 +6666,9 @@ function DrawPoint(drawingId, pluginId) {
   };
 }
 
-function ownKeys$c(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 ownKeys$d(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function DrawLine(drawingId, pluginId) {
   // Global hooks:
   const {
@@ -6583,7 +6754,7 @@ function DrawLine(drawingId, pluginId) {
           endPId: tmpEndP.id
         };
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
             [tmpStartP.id]: tmpStartP,
             [tmpLine.id]: tmpLine
           })
@@ -6621,8 +6792,8 @@ function DrawLine(drawingId, pluginId) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         const tmpEndP = state.tmpObjects[tmpEndPId];
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$c(_objectSpread$c({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$d(_objectSpread$d({}, tmpStartP), {}, {
               position: tmpEndP.position.clone()
             })
           })
@@ -6644,8 +6815,8 @@ function DrawLine(drawingId, pluginId) {
     set(state => {
       const tmpEndP = state.tmpObjects[tmpEndPId];
       return {
-        tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpEndPId]: _objectSpread$c(_objectSpread$c({}, tmpEndP), {}, {
+        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpEndPId]: _objectSpread$d(_objectSpread$d({}, tmpEndP), {}, {
             position: mousePos
           })
         })
@@ -6670,9 +6841,9 @@ function DrawLine(drawingId, pluginId) {
   };
 }
 
-function ownKeys$b(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 ownKeys$c(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function DrawRectangle(drawingId, pluginId) {
   // Global hooks:
   const {
@@ -6728,7 +6899,7 @@ function DrawRectangle(drawingId, pluginId) {
       set(state => {
         const tmpPoint11 = state.tmpObjects[tmpPoint11Id];
 
-        const tmpPoint00 = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpPoint00Id]), {}, {
+        const tmpPoint00 = _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpPoint00Id]), {}, {
           position: tmpPoint11.position.clone()
         });
 
@@ -6796,7 +6967,7 @@ function DrawRectangle(drawingId, pluginId) {
           endPId: tmpPoint11.id
         };
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
             [tmpPoint00.id]: tmpPoint00,
             [tmpPoint01.id]: tmpPoint01,
             [tmpPoint10.id]: tmpPoint10,
@@ -6824,7 +6995,7 @@ function DrawRectangle(drawingId, pluginId) {
         const tmpPoint11 = state.tmpObjects[tmpPoint11Id];
         return {
           tmpObjects: {
-            [tmpPoint00Id]: _objectSpread$b(_objectSpread$b({}, tmpPoint00), {}, {
+            [tmpPoint00Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint00), {}, {
               position: tmpPoint11.position.clone()
             })
           }
@@ -6848,8 +7019,8 @@ function DrawRectangle(drawingId, pluginId) {
       if (additionIndex === 0) {
         const tmpPoint00 = state.tmpObjects[tmpPoint00Id];
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpPoint00Id]: _objectSpread$b(_objectSpread$b({}, tmpPoint00), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpPoint00Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint00), {}, {
               position: snappedPos
             })
           })
@@ -6860,14 +7031,14 @@ function DrawRectangle(drawingId, pluginId) {
         const tmpPoint10 = state.tmpObjects[tmpPoint10Id];
         const tmpPoint11 = state.tmpObjects[tmpPoint11Id];
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpPoint01Id]: _objectSpread$b(_objectSpread$b({}, tmpPoint01), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpPoint01Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint01), {}, {
               position: new THREE__namespace.Vector3(startPos.x, snappedPos.y, startPos.z)
             }),
-            [tmpPoint10Id]: _objectSpread$b(_objectSpread$b({}, tmpPoint10), {}, {
+            [tmpPoint10Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint10), {}, {
               position: new THREE__namespace.Vector3(snappedPos.x, startPos.y, startPos.z)
             }),
-            [tmpPoint11Id]: _objectSpread$b(_objectSpread$b({}, tmpPoint11), {}, {
+            [tmpPoint11Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint11), {}, {
               position: new THREE__namespace.Vector3(snappedPos.x, snappedPos.y, startPos.z)
             })
           })
@@ -6893,17 +7064,35 @@ function DrawRectangle(drawingId, pluginId) {
   };
 }
 
+let scale = 1;
+function setScale(newScale) {
+  scale = newScale;
+}
+function getScale() {
+  return scale;
+} // The hook sets scale vector to a refered object in useFrame
+
+function useScale(getVector) {
+  const ref = React.useRef();
+  fiber.useFrame(args => {
+    if (ref.current) {
+      const newScale = getVector ? getVector(scale) : [scale, scale, scale];
+      ref.current.scale.set(...newScale);
+    }
+  });
+  return ref;
+}
+
 const lineWidth = 0.2;
 const pointSize = 0.5;
 const arcWidth = 0.2;
 const radSegments = 32;
-const tubeSegments = 6;
-const cylGeom = new THREE__namespace.CylinderGeometry(1, 1, 1, 6);
-const Line = ({
+const tubeSegments$1 = 6;
+const cylGeom$1 = new THREE__namespace.CylinderGeometry(1, 1, 1, 6);
+const Line$1 = ({
   start,
   end,
   width = lineWidth,
-  scale = 1,
   materialProps,
   meshProps
 }) => {
@@ -6917,24 +7106,26 @@ const Line = ({
       quaternion: new THREE__namespace.Quaternion().setFromUnitVectors(new THREE__namespace.Vector3(0, 1, 0), dir)
     };
   }, [start, end]);
+  const ref = useScale(scale => [width * scale, start.distanceTo(end), width * scale]);
   return /*#__PURE__*/React.createElement("mesh", _extends({}, meshProps, {
+    ref: ref,
     position: position,
     quaternion: quaternion,
-    geometry: cylGeom,
-    scale: [width * scale, start.distanceTo(end), width * scale]
+    geometry: cylGeom$1
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", materialProps));
 };
-const Point = ({
+const Point$1 = ({
   position,
   size = pointSize,
-  scale = 1,
   materialProps,
   meshProps
 }) => {
+  const ref = useScale(scale => [size * scale, size * scale, size * scale]);
   return /*#__PURE__*/React.createElement("mesh", _extends({}, meshProps, {
-    position: position
+    position: position,
+    ref: ref
   }), /*#__PURE__*/React.createElement("sphereGeometry", {
-    args: [size * scale, tubeSegments, tubeSegments]
+    args: [1, tubeSegments$1, tubeSegments$1]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", materialProps));
 };
 function getArcAngles(params) {
@@ -6994,7 +7185,7 @@ const Arc = ({
     position: center,
     quaternion: quaternion
   }), /*#__PURE__*/React.createElement("torusGeometry", {
-    args: [radius, width * scale, tubeSegments, radSegments, thetaLength]
+    args: [radius, width * scale, tubeSegments$1, radSegments, thetaLength]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({}, materialProps, {
     side: clockwise ? THREE__namespace.DoubleSide : THREE__namespace.FrontSide
   })));
@@ -7010,13 +7201,13 @@ const Circle = ({
   return /*#__PURE__*/React.createElement("mesh", _extends({}, meshProps, {
     position: center
   }), /*#__PURE__*/React.createElement("torusGeometry", {
-    args: [radius, width * scale, tubeSegments, radSegments]
+    args: [radius, width * scale, tubeSegments$1, radSegments]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", materialProps));
 };
 
-function ownKeys$a(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 ownKeys$b(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function DrawArc(drawingId, pluginId, arcType) {
   // Global hooks:
   const {
@@ -7072,7 +7263,7 @@ function DrawArc(drawingId, pluginId, arcType) {
       additionIndex = 0;
       lastAddedEndPointId = UNDEFINEDID;
       set(state => {
-        const tmpStartP = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpStartPId]), {}, {
+        const tmpStartP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpStartPId]), {}, {
           position: lastMousePos.clone()
         });
 
@@ -7087,24 +7278,24 @@ function DrawArc(drawingId, pluginId, arcType) {
       set(state => {
         const tmpStartP = state.tmpObjects[tmpStartPId];
 
-        const tmpEndP = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpEndPId]), {}, {
+        const tmpEndP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpEndPId]), {}, {
           position: lastMousePos.clone()
         });
 
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
 
-        const tmpCenterP = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: centerPos ? centerPos : lastMousePos.clone()
         });
 
-        const tmpArc = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpArcId]), {}, {
+        const tmpArc = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpArcId]), {}, {
           // In case centerPos couldn't be calculated, the arc should be drawn as a line
           drawAsLine: centerPos === undefined,
           clockwise: false
         });
 
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -7225,7 +7416,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -7254,7 +7445,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
           })
@@ -7312,11 +7503,11 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpEndP = state.tmpObjects[tmpEndPId];
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$a(_objectSpread$a({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$b(_objectSpread$b({}, tmpStartP), {}, {
               position: tmpEndP.position.clone()
             }),
-            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: tmpEndP.position.clone()
             })
           })
@@ -7340,8 +7531,8 @@ function DrawArc(drawingId, pluginId, arcType) {
       if (additionIndex === 0) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$a(_objectSpread$a({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$b(_objectSpread$b({}, tmpStartP), {}, {
               position: lastMousePos.clone()
             })
           })
@@ -7353,14 +7544,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$a(_objectSpread$a({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$b(_objectSpread$b({}, tmpEndP), {}, {
               position: lastMousePos.clone()
             }),
-            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$a(_objectSpread$a({}, tmpArc), {}, {
+            [tmpArcId]: _objectSpread$b(_objectSpread$b({}, tmpArc), {}, {
               // In case centerPos couldn't be calculated, the arc should be drawn as a line
               drawAsLine: centerPos === undefined,
               clockwise: false
@@ -7374,14 +7565,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         const centerPos = calculateCenterPoint(tmpStartP.position, tmpEndP.position, lastMousePos);
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$a(_objectSpread$a({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$b(_objectSpread$b({}, tmpEndP), {}, {
               position: arcType === HandlersList.DRAWARCTANGENT ? lastMousePos.clone() : tmpEndP.position
             }),
-            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$a(_objectSpread$a({}, tmpArc), {}, {
+            [tmpArcId]: _objectSpread$b(_objectSpread$b({}, tmpArc), {}, {
               // In case centerPos couldn't be calculated, the arc should be drawn as a line
               drawAsLine: centerPos === undefined,
               clockwise: evaluateClockwise(tmpStartP.position, tmpEndP.position, lastMousePos)
@@ -7409,9 +7600,9 @@ function DrawArc(drawingId, pluginId, arcType) {
   };
 }
 
-function ownKeys$9(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 ownKeys$a(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function DrawCircle(drawingId, pluginId) {
   const {
     set
@@ -7458,7 +7649,7 @@ function DrawCircle(drawingId, pluginId) {
     } else {
       additionIndex = 0;
       set(state => {
-        const tmpCenterP = _objectSpread$9(_objectSpread$9({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: lastMousePos.clone()
         });
 
@@ -7492,7 +7683,7 @@ function DrawCircle(drawingId, pluginId) {
           radius: 0.001
         };
         return {
-          tmpObjects: _objectSpread$9(_objectSpread$9({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpCircle.id]: tmpCircle
           })
@@ -7513,7 +7704,7 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
           tmpObjects: {
-            [tmpCenterPId]: _objectSpread$9(_objectSpread$9({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
               position: e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId))
             })
           }
@@ -7537,8 +7728,8 @@ function DrawCircle(drawingId, pluginId) {
       if (additionIndex === 0) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
-          tmpObjects: _objectSpread$9(_objectSpread$9({}, state.tmpObjects), {}, {
-            [tmpCenterPId]: _objectSpread$9(_objectSpread$9({}, tmpCenterP), {}, {
+          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
               position: snappedPos || localPos
             })
           })
@@ -7547,8 +7738,8 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         const tmpCircle = state.tmpObjects[tmpCircleId];
         return {
-          tmpObjects: _objectSpread$9(_objectSpread$9({}, state.tmpObjects), {}, {
-            [tmpCircleId]: _objectSpread$9(_objectSpread$9({}, tmpCircle), {}, {
+          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+            [tmpCircleId]: _objectSpread$a(_objectSpread$a({}, tmpCircle), {}, {
               radius: Math.max(tmpCenterP.position.distanceTo(localPos), 0.001)
             })
           })
@@ -8046,9 +8237,9 @@ function recognizeFilletByArc(object, tree, sketchId) {
   };
 }
 
-function ownKeys$8(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 ownKeys$9(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function Fillet(drawingId, pluginId) {
   const actions = core.getDrawing(drawingId).api;
   const plugin = core.getPlugin(drawingId, pluginId);
@@ -8197,7 +8388,7 @@ function Fillet(drawingId, pluginId) {
         return;
       }
 
-      classcad.ccAPI.sketcher.createFillet(drawingId, sketchId, data.info.lines.map(line => line.id), data.info.lineStarts.map(lineStart => lineStart.id), data.info.incidence, data.info.control, data.params.start, getArcAngles(_objectSpread$8(_objectSpread$8({}, data.params), {}, {
+      classcad.ccAPI.sketcher.createFillet(drawingId, sketchId, data.info.lines.map(line => line.id), data.info.lineStarts.map(lineStart => lineStart.id), data.info.incidence, data.info.control, data.params.start, getArcAngles(_objectSpread$9(_objectSpread$9({}, data.params), {}, {
         radius: 1
       })).mid, data.params.end);
       set({
@@ -8293,6 +8484,32 @@ function Trim(drawingId, pluginId) {
   };
 }
 
+function UseRef(drawingId, pluginId) {
+  // UseRef shouldn't work with any of sketch objects
+  const filter = object => false;
+
+  const filterSel = (scope, data) => lineSegmentsFilter(scope, data) || loopFilter(scope, data) || pointFilter(scope, data);
+
+  let remove = undefined;
+
+  const constructor = () => {
+    const selApi = core.getDrawing(drawingId).api.selection;
+    remove = selApi.createSelector('UseRef', filterSel, true);
+  };
+
+  const destructor = () => {
+    remove && remove();
+  };
+
+  return {
+    name: HandlersList.USEREF,
+    filter,
+    onConstruct: constructor,
+    onDestruct: destructor,
+    pointerHandlers: {}
+  };
+}
+
 const Handlers$1 = {
   [HandlersList.CREATEANGLE]: CreateAngle,
   [HandlersList.DRAG]: Drag,
@@ -8302,6 +8519,7 @@ const Handlers$1 = {
   [HandlersList.DRAWRECTANGLE]: DrawRectangle,
   [HandlersList.FILLET]: Fillet,
   [HandlersList.TRIM]: Trim,
+  [HandlersList.USEREF]: UseRef,
   [HandlersList.DRAWARCCENTER]: (drawingId, pluginId) => DrawArc(drawingId, pluginId, HandlersList.DRAWARCCENTER),
   [HandlersList.DRAWARCMIDDLE]: (drawingId, pluginId) => DrawArc(drawingId, pluginId, HandlersList.DRAWARCMIDDLE),
   [HandlersList.DRAWARCTANGENT]: (drawingId, pluginId) => DrawArc(drawingId, pluginId, HandlersList.DRAWARCTANGENT)
@@ -8762,10 +8980,10 @@ const resources = {
   [HandlersList.DRAWCIRCLE]: img$y,
   [HandlersList.FILLET]: img$x,
   [HandlersList.TRIM]: img$w,
+  [HandlersList.USEREF]: img$s,
   [Patterns.RECTANGULAR]: img$v,
   [Patterns.CIRCULAR]: img$u,
-  [Patterns.MIRROR]: img$t,
-  ['useRef']: img$s
+  [Patterns.MIRROR]: img$t
 };
 const textures = {};
 const textureLoader = new THREE__namespace.TextureLoader();
@@ -8853,11 +9071,14 @@ const useGeomParams = objId => {
 
   if (isHovered || isSelected || isHighlighted) {
     renderOrder_ += 1;
-  }
+  } // TODO: returning isHovered and isSelected is a workaround for changing scale of the hovered point. (return scale coef instead?)
+
 
   return {
     renderOrder: renderOrder_,
-    polygonOffsetUnits: offsetUnits
+    polygonOffsetUnits: offsetUnits,
+    isHovered,
+    isSelected
   };
 };
 
@@ -9012,6 +9233,17 @@ const useUserData = objId => {
   return React.useMemo(() => ({
     objId
   }), [objId]);
+}; // Fix for interaction until drei support undefined as pointer handlers
+
+const defaultHandlers = {
+  onPointerOver: () => null,
+  // onPointerEnter: () => null,
+  onPointerDown: () => null,
+  onPointerMove: () => null,
+  onPointerUp: () => null,
+  onPointerCancel: () => null,
+  onPointerOut: () => null // onPointerLeave: () => null,
+
 };
 const useHandlersAndColor = (drawingId, objId) => {
   const activeSelection = react.useDrawing(drawingId, d => d.selection.active);
@@ -9020,7 +9252,7 @@ const useHandlersAndColor = (drawingId, objId) => {
   const handlers = activeSelection ? globalSelection.handlers : sketchHandlers;
   const color = useColor(objId, globalSelection.isHovered);
   return React.useMemo(() => ({
-    handlers,
+    handlers: handlers || defaultHandlers,
     color
   }), [handlers, color]);
 };
@@ -9236,9 +9468,190 @@ class InfinityPlane extends THREE__namespace.Object3D {
 
 }
 
-function ownKeys$7(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; }
+// InstancedMesh from three.js use the single mesh but applies different transformations to different instances of the mesh
+// which allows to render multiple objects in the same render call, so we have separate render call for each mesh
+// (in our case there're 2 render calls: one for Boxes and another for Spheres).
 
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const material = new THREE__namespace.MeshBasicMaterial();
+const tubeSegments = 6;
+const cylGeom = new THREE__namespace.CylinderGeometry(1, 1, 1, tubeSegments);
+const cylMesh = new THREE__namespace.Mesh(cylGeom, material);
+const widthSegments = 12;
+const heightSegments = 12;
+const sphereGeom = new THREE__namespace.SphereGeometry(1, widthSegments, heightSegments);
+const sphereMesh = new THREE__namespace.Mesh(sphereGeom, material); // We use context to store "mocked" objects.
+
+const MeshContext = /*#__PURE__*/React.createContext({
+  Cylinder: null,
+  Sphere: null
+});
+
+const ContextWrapper = ({
+  cylinder,
+  sphere,
+  children
+}) => {
+  const contextVal = React.useMemo(() => {
+    return {
+      Cylinder: cylinder,
+      Sphere: sphere
+    };
+  }, [cylinder, sphere]);
+  return /*#__PURE__*/React.createElement(MeshContext.Provider, {
+    value: contextVal
+  }, children);
+};
+/**
+ * Component which implements InstancedMesh from three.js.
+ * Merged component from drei takes globaly created meshes and then passes corresponding "mocked" components via function props (Box and Sphere) to children.
+ * "mocked" components are used for saying drei where to draw instances.
+ */
+
+
+const MergedWrapper = ({
+  children
+}) => {
+  return (
+    /*#__PURE__*/
+    // Default raycast of merged should be turned off, because custom raycast is used in primitivesMerged
+    React.createElement(drei.Merged, {
+      meshes: [cylMesh, sphereMesh],
+      limit: 10000,
+      raycast: null
+    }, (Cylinder, Sphere) => /*#__PURE__*/React.createElement(ContextWrapper, {
+      cylinder: Cylinder,
+      sphere: Sphere
+    }, children))
+  );
+};
+
+const lineStart = new THREE__namespace.Vector3();
+const lineEnd = new THREE__namespace.Vector3();
+const pointOnRay = new THREE__namespace.Vector3();
+const lineCoef = 1.2;
+
+function getParentSketch(child) {
+  const parent = child.parent;
+  if (!parent) return null;
+  if (parent.name === 'sketch') return parent;
+  return getParentSketch(parent);
+}
+
+const Line = ({
+  start,
+  end,
+  width = lineWidth,
+  materialProps,
+  meshProps,
+  notInteractive,
+  scalePlus
+}) => {
+  const {
+    position,
+    quaternion
+  } = React.useMemo(() => {
+    const dir = end.clone().sub(start).normalize();
+    return {
+      position: new THREE__namespace.Vector3().lerpVectors(start, end, 0.5),
+      quaternion: new THREE__namespace.Quaternion().setFromUnitVectors(new THREE__namespace.Vector3(0, 1, 0), dir)
+    };
+  }, [start, end]); // TODO: make lineRaycast global function
+
+  const lineRaycast = React.useCallback(function (raycaster, intersects) {
+    const sketchGroup = getParentSketch(this);
+
+    if (sketchGroup === null || (sketchGroup == null ? void 0 : sketchGroup.name) !== 'sketch') {
+      console.warn('Line is not a child of sketch group');
+      return;
+    }
+
+    lineStart.copy(start);
+    lineEnd.copy(end);
+    lineStart.applyMatrix4(sketchGroup.matrixWorld);
+    lineEnd.applyMatrix4(sketchGroup.matrixWorld);
+    const dist = Math.sqrt(raycaster.ray.distanceSqToSegment(lineStart, lineEnd, pointOnRay));
+    const sketchScale = getScale();
+
+    if (dist < lineCoef * sketchScale) {
+      intersects.push({
+        distance: dist,
+        point: pointOnRay,
+        face: null,
+        object: this
+      });
+    }
+  }, [start, end]);
+  const {
+    Cylinder
+  } = React.useContext(MeshContext);
+  const ref = useScale(scale => {
+    const scale_ = scalePlus ? scale + 0.01 : scale;
+    return [width * scale_, start.distanceTo(end), width * scale_];
+  }); // We need initial scale to remove flickering of recently created objects
+
+  const initialScale = React.useMemo(() => {
+    const scale = getScale();
+    return [width * scale, start.distanceTo(end), width * scale]; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Cylinder, _extends({
+    ref: ref,
+    scale: initialScale
+  }, materialProps, meshProps, {
+    position: position,
+    quaternion: quaternion,
+    raycast: notInteractive ? null : lineRaycast
+  }));
+};
+
+const pointPos = new THREE__namespace.Vector3();
+const pointCoef = 1.3; // Coefficient for increased interaction area
+
+function pointRaycast(raycaster, intersects) {
+  this.getWorldPosition(pointPos);
+  const dist = raycaster.ray.distanceToPoint(pointPos);
+  const sketchScale = getScale();
+
+  if (dist < pointCoef * sketchScale) {
+    intersects.push({
+      distance: dist,
+      point: pointPos.clone(),
+      face: null,
+      object: this
+    });
+  }
+}
+
+const Point = ({
+  position,
+  size = pointSize,
+  materialProps,
+  meshProps,
+  scalePlus
+}) => {
+  const {
+    Sphere
+  } = React.useContext(MeshContext);
+  const ref = useScale(scale => {
+    const scale_ = scalePlus ? scale + 0.01 : scale;
+    return [size * scale_, size * scale_, size * scale_];
+  }); // We need initial scale to remove flickering of recently created objects
+
+  const initialScale = React.useMemo(() => {
+    const scale = getScale();
+    return [size * scale, size * scale, size * scale]; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Sphere, _extends({
+    scale: initialScale
+  }, materialProps, meshProps, {
+    position: position,
+    ref: ref,
+    raycast: pointRaycast
+  }));
+};
+
+function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /*
  * !polygonOffset!
  * For correct drawing of objects that lie in the same plane, polygonOffset is used.
@@ -9246,9 +9659,9 @@ function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) {
  * offset = factor * DZ + r * units
  *    Where DZ is a measurement of the change in depth relative to the screen area of the polygon,
  *    and r is an implementation-specific value to create a constant depth offset.
-.
  *    The offset is added before the depth test is performed and before the value is written into the depth buffer.
- * factor parameter is redundant for this purpose, so only units parameter is used.
+ *
+ * Factor parameter is redundant for this purpose, so only units parameter is used.
  */
 
 fiber.extend({
@@ -9258,8 +9671,7 @@ const hoverZone = 0.6;
 
 const CCLine = props => {
   const {
-    drawingId,
-    pluginId
+    drawingId
   } = React.useContext(ViewContext);
   const {
     objId
@@ -9268,8 +9680,7 @@ const CCLine = props => {
   const {
     handlers,
     color
-  } = useHandlersAndColor(drawingId, objId);
-  const scale = useSketchState(drawingId, pluginId, state => state.scale); // TODO: put useUserData into useHandlersAndColor ?
+  } = useHandlersAndColor(drawingId, objId); // TODO: put useUserData into useHandlersAndColor ?
 
   const userData = useUserData(objId);
   const point1 = react.useDrawing(drawingId, drawing => drawing.structure.tree[line.children[0]]);
@@ -9278,34 +9689,24 @@ const CCLine = props => {
   const end = convertToVector(point2.members.pos);
   const {
     renderOrder,
-    polygonOffsetUnits
+    polygonOffsetUnits,
+    isHovered,
+    isSelected
   } = useGeomParams(objId);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
     start: start,
     end: end,
-    scale: scale,
-    meshProps: {
-      renderOrder
-    },
-    materialProps: {
-      side: THREE__namespace.DoubleSide,
-      polygonOffset: true,
-      polygonOffsetUnits: polygonOffsetUnits,
-      color
-    }
-  }), /*#__PURE__*/React.createElement(Line, {
-    start: start,
-    end: end,
-    scale: scale,
-    width: lineWidth + hoverZone,
-    meshProps: _objectSpread$7(_objectSpread$7({
+    scalePlus: isHovered || isSelected,
+    meshProps: _objectSpread$8(_objectSpread$8({
       renderOrder
     }, handlers), {}, {
       userData
     }),
     materialProps: {
-      transparent: true,
-      opacity: 0
+      side: THREE__namespace.DoubleSide,
+      polygonOffset: true,
+      polygonOffsetUnits: polygonOffsetUnits,
+      color: numberToHexColor(color)
     }
   }), /*#__PURE__*/React.createElement(CCPoint, {
     key: point1.id,
@@ -9318,8 +9719,7 @@ const CCLine = props => {
 
 const CCPoint = props => {
   const {
-    drawingId,
-    pluginId
+    drawingId
   } = React.useContext(ViewContext);
   const {
     objId
@@ -9332,40 +9732,33 @@ const CCPoint = props => {
   const userData = useUserData(objId);
   const {
     renderOrder,
-    polygonOffsetUnits
+    polygonOffsetUnits,
+    isHovered,
+    isSelected
   } = useGeomParams(objId);
   const position = convertToVector(point.members.pos);
-  const scale = useSketchState(drawingId, pluginId, state => state.scale);
   React.useEffect(() => {
     setSnapToPoint(objId, new THREE__namespace.Vector3(position.x, position.y, position.z));
     return () => deleteSnapToPoint(objId);
   }, [objId, position.x, position.y, position.z]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Point, {
-    position: position,
-    scale: scale,
-    meshProps: {
+  return /*#__PURE__*/React.createElement(Point, {
+    position: position // It's not possible to change polygonOffset in drei/Merged component,
+    // so we have to increase size of hovered or selected point to make the point not occluded buy other ones
+    ,
+    scalePlus: isHovered || isSelected,
+    meshProps: _objectSpread$8(_objectSpread$8({
       renderOrder
-    },
+    }, handlers), {}, {
+      userData
+    }),
     materialProps: {
       side: THREE__namespace.DoubleSide,
       polygonOffset: true,
       polygonOffsetUnits: polygonOffsetUnits,
       // Put hovered point upper then not hovered (check comment in the beginnig of this file about polygonOffset).
-      color: color
+      color: numberToHexColor(color)
     }
-  }), /*#__PURE__*/React.createElement(Point, {
-    position: position,
-    scale: scale,
-    size: pointSize + hoverZone,
-    meshProps: _objectSpread$7({
-      userData,
-      renderOrder
-    }, handlers),
-    materialProps: {
-      transparent: true,
-      opacity: 0
-    }
-  }));
+  });
 };
 
 const CCArc = props => {
@@ -9390,7 +9783,6 @@ const CCArc = props => {
     const point = [p1, p2, p3].find(p => p.name === pointName);
     return convertToVector(point.members.pos);
   }, [p1, p2, p3]);
-  const scale = useSketchState(drawingId, pluginId, state => state.scale);
   const startPoint = React.useMemo(() => getArcPointPos('startPoint'), [getArcPointPos]);
   const endPoint = React.useMemo(() => getArcPointPos('endPoint'), [getArcPointPos]);
   const centerPoint = React.useMemo(() => getArcPointPos('center'), [getArcPointPos]);
@@ -9399,36 +9791,23 @@ const CCArc = props => {
     renderOrder,
     polygonOffsetUnits
   } = useGeomParams(objId);
+  const scale = useSketchState(drawingId, pluginId, state => state.scale);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Arc, {
     start: startPoint,
     end: endPoint,
     center: centerPoint,
-    scale: scale,
     clockwise: clockwise,
-    meshProps: {
-      renderOrder
-    },
+    meshProps: _objectSpread$8({
+      renderOrder,
+      userData
+    }, handlers),
     materialProps: {
       side: THREE__namespace.DoubleSide,
       polygonOffset: true,
       polygonOffsetUnits: polygonOffsetUnits,
       color: color
-    }
-  }), /*#__PURE__*/React.createElement(Arc, {
-    start: startPoint,
-    end: endPoint,
-    center: centerPoint,
-    scale: scale,
-    clockwise: clockwise,
-    width: arcWidth + hoverZone,
-    meshProps: _objectSpread$7({
-      renderOrder,
-      userData
-    }, handlers),
-    materialProps: {
-      transparent: true,
-      opacity: 0
-    }
+    },
+    scale: scale
   }), arc.children.map(childId => /*#__PURE__*/React.createElement(CCPoint, {
     key: childId,
     objId: childId
@@ -9475,7 +9854,7 @@ const CCCircle = props => {
     radius: radius,
     scale: scale,
     width: arcWidth + hoverZone,
-    meshProps: _objectSpread$7(_objectSpread$7({}, handlers), {}, {
+    meshProps: _objectSpread$8(_objectSpread$8({}, handlers), {}, {
       renderOrder,
       userData
     }),
@@ -9554,7 +9933,7 @@ const SketchPlane = ({
       objId
     }
   })), /*#__PURE__*/React.createElement("gridHelper", {
-    args: [step * linesCount, linesCount, 0x000000, 0x333333],
+    args: [step * linesCount, linesCount, 0x000000, 0x888888],
     quaternion: planeQuaternion,
     onUpdate: update
   }));
@@ -9629,10 +10008,11 @@ const Sketch = ({
       drawnObjectsRef
     });
   }, [set]);
-  return /*#__PURE__*/React.createElement("group", null, isActive && /*#__PURE__*/React.createElement(SketchPlane, {
+  return /*#__PURE__*/React.createElement(MergedWrapper, null, isActive && /*#__PURE__*/React.createElement(SketchPlane, {
     objId: objId
   }), drawnObjects && /*#__PURE__*/React.createElement("group", {
-    ref: drawnObjectsRef
+    ref: drawnObjectsRef,
+    name: "sketch"
   }, drawnObjects, isActive && containerIds && containerIds.length === 0 && /*#__PURE__*/React.createElement(Constraints$2, {
     sketchId: objId
   })));
@@ -9667,10 +10047,8 @@ const TmpPoint = props => {
   } = React.useContext(ViewContext);
   const point = useSketchState(drawingId, pluginId, state => state.tmpObjects[props.objId]);
   const color = getColor$1(point.class);
-  const scale = useSketchState(drawingId, pluginId, state => state.scale);
-  return /*#__PURE__*/React.createElement(Point, {
+  return /*#__PURE__*/React.createElement(Point$1, {
     position: point.position,
-    scale: scale,
     materialProps: {
       side: THREE__namespace.DoubleSide,
       polygonOffset: true,
@@ -9687,13 +10065,11 @@ const TmpLine = props => {
   } = React.useContext(ViewContext);
   const line = useSketchState(drawingId, pluginId, state => state.tmpObjects[props.objId]);
   const color = getColor$1(line.class);
-  const scale = useSketchState(drawingId, pluginId, state => state.scale);
   const start = useSketchState(drawingId, pluginId, state => state.tmpObjects[line.startPId]).position;
   const end = useSketchState(drawingId, pluginId, state => state.tmpObjects[line.endPId]).position;
-  return /*#__PURE__*/React.createElement(Line, {
+  return /*#__PURE__*/React.createElement(Line$1, {
     start: start,
     end: end,
-    scale: scale,
     materialProps: {
       color
     }
@@ -9714,10 +10090,9 @@ const TmpArc = props => {
   const end = useSketchState(drawingId, pluginId, state => state.tmpObjects[arc.endPId]).position;
 
   if (arc.drawAsLine) {
-    return /*#__PURE__*/React.createElement(Line, {
+    return /*#__PURE__*/React.createElement(Line$1, {
       start: start,
       end: end,
-      scale: scale,
       materialProps: {
         color: getColor$1(classcad.CCClasses.CCLine)
       }
@@ -9886,6 +10261,7 @@ const RubberBandRectangle = () => {
 function useSetScale(drawingId, pluginId) {
   fiber.useFrame(args => {
     const plugin = core.getPlugin(drawingId, pluginId);
+    if (!plugin) return;
     const state = plugin.state;
     const sketchObj = core.getDrawing(drawingId).structure.tree[plugin.objectId];
     const sketchMatrix = core.MathUtils.convertToMatrix4(sketchObj.coordinateSystem);
@@ -9899,7 +10275,9 @@ function useSetScale(drawingId, pluginId) {
       plugin.set({
         step: newStep,
         scale: newScale
-      });
+      }); // Old way to set scale, needed for circles. (Should be remove when circles will be implemented via Merged component)
+
+      setScale(newScale); // More efficient way to set scale, used buy lines and points.
     }
   });
 } // Turn off all handlers and hide sketch selection if global selection is active
@@ -9914,7 +10292,7 @@ function useHandleGSelection(drawingId, pluginId, activeHandler) {
   const prevSelected = React.useRef([]);
   React.useEffect(() => {
     // Disable all handlers if global selection is active
-    if (activeSelection && !prevHandler.current) {
+    if (activeSelection && activeSelection !== 'UseRef' && !prevHandler.current) {
       prevHandler.current = activeHandler;
       prevSelected.current = getSketchState(drawingId, pluginId).selected;
       set({
@@ -9929,6 +10307,23 @@ function useHandleGSelection(drawingId, pluginId, activeHandler) {
       prevHandler.current = undefined;
     }
   }, [drawingId, pluginId, activeSelection, activeHandler, set]);
+} // Creates reference geometry in the sketch for all the graphic objects appearing in the 'UseRef' selection; the selection is reset after each triggering
+
+
+function useUseRef(drawingId, sketchId) {
+  const itemsUseRef = react.useDrawing(drawingId, d => {
+    var _d$selection$refs$Use;
+
+    return (_d$selection$refs$Use = d.selection.refs['UseRef']) == null ? void 0 : _d$selection$refs$Use.items;
+  });
+  React.useEffect(() => {
+    if (itemsUseRef && itemsUseRef.length > 0) {
+      const selApi = core.getDrawing(drawingId).api.selection;
+      selApi.setItems('UseRef', []);
+      const ids = itemsUseRef.map(item => item.data.graphicId);
+      classcad.ccAPI.sketcher.createReferenceGeometry(drawingId, sketchId, ids);
+    }
+  }, [drawingId, sketchId, itemsUseRef]);
 }
 
 const getSketchBounds = boundsMember => {
@@ -10023,10 +10418,13 @@ const DrawingMode = ({
     set({
       activeHandler: HandlersList.DRAG
     });
-    return () => set({
-      activeHandler: undefined
-    });
-  }, [set]);
+    return () => {
+      const plugin = core.getPlugin(drawingId, pluginId);
+      plugin && plugin.set({
+        activeHandler: undefined
+      });
+    };
+  }, [drawingId, pluginId, set]);
   useSetScale(drawingId, pluginId);
   const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
   const currentHandler = React.useRef();
@@ -10047,6 +10445,7 @@ const DrawingMode = ({
     currentHandler.current = activeHandler;
   }, [drawingId, pluginId, activeHandler]);
   useHandleGSelection(drawingId, pluginId, activeHandler);
+  useUseRef(drawingId, sketchId);
   const dimId = useDimensionSetId(drawingId, sketchId);
   const [, dimView] = react.useEmbeddedPlugin(Plugin, drawingId, pluginId, dimId, setDimId); // SketcherDimensionSet has it's own cSys that will be applied in Plugin.tsx, so apply inverse Sketch cSys.
   // TODO: remove it when parent plugin matrix won't be applied for embedded one.
@@ -10093,7 +10492,11 @@ const ViewImpl$d = ({
     drawingId,
     pluginId,
     isActive
-  }), [drawingId, pluginId, isActive]);
+  }), [drawingId, pluginId, isActive]); // Reset scale on unmount
+
+  React.useEffect(() => {
+    return () => setScale(1);
+  }, []);
 
   if (planeSelection) {
     return null;
@@ -10123,40 +10526,6 @@ const View$d = ({
   }));
 };
 
-const UseRef = () => {
-  const {
-    Group,
-    Label,
-    Selection,
-    Button
-  } = react.useBuerli(buerli => buerli.options.elements);
-  const {
-    drawingId,
-    pluginId
-  } = React.useContext(RootContext);
-  const sketchId = react.usePlugin(drawingId, pluginId, plugin => plugin.objectId);
-  const [selId, setSelId] = React.useState();
-  const createUseRef = React.useCallback(() => {
-    if (!selId) return;
-    const items = core.getDrawing(drawingId).selection.refs[selId].items;
-    const selApi = core.getDrawing(drawingId).api.selection;
-    selApi.setItems(selId, []);
-    selApi.activateSelector(null);
-    if (items.length === 0) return;
-    const ids = items.map(item => item.data.graphicId);
-    classcad.ccAPI.sketcher.createReferenceGeometry(drawingId, sketchId, ids);
-  }, [selId, drawingId, sketchId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Label, null, "Create UseRef"), /*#__PURE__*/React.createElement(Selection, {
-    key: "useRefSelection",
-    drawingId: drawingId,
-    onCreated: setSelId,
-    filter: (scope, data) => lineSegmentsFilter(scope, data) || loopFilter(scope, data) || pointFilter(scope, data),
-    caption: "Select geometry..."
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: createUseRef
-  }, "Create"));
-};
-
 const constraintClasses = {
   fixation: classcad.CCClasses.CC2DFixationConstraint,
   horizontality: classcad.CCClasses.CC2DHorizontalConstraint,
@@ -10182,8 +10551,7 @@ const constraintClasses = {
 };
 const Constraints$1 = () => {
   const {
-    Button,
-    ButtonGroup
+    Button
   } = react.useBuerli(buerli => buerli.options.elements);
   const {
     drawingId,
@@ -10220,7 +10588,12 @@ const Constraints$1 = () => {
       }
     }
   }, [drawingId, set, selected, sketchId]);
-  return allowedConstraints && allowedConstraints.length > 0 ? /*#__PURE__*/React.createElement(ButtonGroup, null, allowedConstraints.map(constraintName => /*#__PURE__*/React.createElement(Button, {
+  return allowedConstraints && allowedConstraints.length > 0 ? /*#__PURE__*/React.createElement(AntdButton.Group, {
+    style: {
+      flexWrap: 'wrap',
+      height: 'unset !important'
+    }
+  }, allowedConstraints.map(constraintName => /*#__PURE__*/React.createElement(Button, {
     key: constraintName,
     titleText: constraintName,
     size: 'small',
@@ -10257,7 +10630,8 @@ const HButton = _ref => {
   } = React.useContext(RootContext);
   const set = core.getPlugin(drawingId, pluginId).set;
   const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
-  const isSelectorActive = react.useDrawing(drawingId, drawing => drawing.selection.active) !== null;
+  const activeSelector = react.useDrawing(drawingId, drawing => drawing.selection.active);
+  const disabled = Boolean(activeSelector) && activeSelector !== 'UseRef';
   const isActive = activeHandler === handlerName;
   return /*#__PURE__*/React.createElement(Tooltip, {
     style: {
@@ -10270,7 +10644,7 @@ const HButton = _ref => {
     key: handlerName,
     value: handlerName,
     checked: isActive,
-    disabled: isSelectorActive,
+    disabled: disabled,
     onClick: () => {
       if (isActive) {
         set({
@@ -10308,6 +10682,7 @@ const SubGroup$1 = ({
   } = react.useBuerli(buerli => buerli.options.elements);
   const [lastHandler, setLastHandler] = React.useState(handlers[0]);
   const menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+    key: "menuItem",
     style: {
       backgroundColor: 'initial',
       padding: '0px 5px',
@@ -10347,6 +10722,8 @@ const Handlers = () => {
     handlerName: HandlersList.FILLET
   }), /*#__PURE__*/React.createElement(HButton, {
     handlerName: HandlersList.TRIM
+  }), /*#__PURE__*/React.createElement(HButton, {
+    handlerName: HandlersList.USEREF
   }));
 };
 
@@ -10544,110 +10921,489 @@ const useRollbackBar = (drawingId, partId) => {
   }, [drawingId, opSeqId, opSeqChildren]);
 };
 
-const PlaneSelectionMode = ({
+const _excluded$3 = ["items", "children"];
+const Menu = _ref => {
+  let {
+    items,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  const onItemClick = React.useCallback(e => {
+    e.domEvent.stopPropagation();
+    let item = items[e.keyPath.pop()];
+
+    if (item.children) {
+      item = item.children[e.keyPath.pop()];
+    }
+    item.callback(e.domEvent);
+  }, [items]);
+  const menu = /*#__PURE__*/React.createElement(antd.Menu, {
+    onClick: onItemClick
+  }, Object.keys(items).map(key => {
+    const item = items[key];
+
+    if (item.children) {
+      const smItem = item;
+      return /*#__PURE__*/React.createElement(antd.Menu.SubMenu, {
+        title: smItem.caption,
+        key: key,
+        icon: smItem.icon
+      }, Object.keys(smItem.children).map(chKey => {
+        const chItem = smItem.children[chKey];
+        return /*#__PURE__*/React.createElement(antd.Menu.Item, {
+          key: chKey,
+          icon: chItem.icon
+        }, chItem.caption);
+      }));
+    } else {
+      const item_ = item;
+      return /*#__PURE__*/React.createElement(antd.Menu.Item, {
+        key: key,
+        icon: item_.icon
+      }, item_.caption);
+    }
+  }));
+  return /*#__PURE__*/React.createElement(antd.Dropdown, _extends({
+    overlay: menu,
+    placement: "bottomCenter"
+  }, props), children ? children : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '24px',
+      cursor: 'pointer',
+      textAlign: 'center'
+    },
+    onClick: e => e.stopPropagation()
+  }, "..."));
+};
+
+const NameEdit = ({
   drawingId,
-  pluginId
+  objId,
+  setEditName,
+  name
 }) => {
-  const {
-    Group,
-    Label,
-    Selection
-  } = react.useBuerli(buerli => buerli.options.elements);
-  const sketchId = react.usePlugin(drawingId, pluginId, plugin => plugin.objectId);
-  const curProduct = react.useDrawing(drawingId, d => d.structure.currentProduct);
-  const opSeqId = useOperationSequence(drawingId, curProduct) || -1;
-  const opSeqChildren = react.useDrawing(drawingId, d => d.structure.tree[opSeqId].children || []); // Makes base planes visible when just created, and turns them off after initialization (i.e. selecting a plane)
+  const ref = React.useRef(null);
+  const onEnter = React.useCallback(async e => {
+    if (e.target.value !== '') {
+      await classcad.ccAPI.common.setObjectName(drawingId, objId, e.target.value);
+    }
 
+    setEditName(false);
+  }, [drawingId, objId, setEditName]);
+  const onKeyPress = React.useCallback(e => {
+    if (e.key !== 'Escape') return;
+    setEditName(false);
+  }, [setEditName]);
   React.useEffect(() => {
-    if (opSeqChildren.length < 7) {
-      // Should probably never happen, but just in case...
-      return;
-    }
+    var _ref$current;
 
-    const drawing = core.getDrawing(drawingId);
-    const tree = drawing.structure.tree;
-    const pluginApi = drawing.api.plugin; // 4, 5, 6 are ids of XY-, XZ- and YZ-planes in the operation sequence array
+    getCADState().api.blankDiv.show(() => setEditName(false));
+    (_ref$current = ref.current) == null ? void 0 : _ref$current.focus({
+      cursor: 'all'
+    }); // Deactivate BlankDiv on dismount
 
-    const wpSeqIds = [4, 5, 6];
-    const basePlaneIds = wpSeqIds.map(index => tree[opSeqChildren[index]].members.refObj.value);
-    const wereInvisible = [];
-    basePlaneIds.forEach(id => {
-      if (drawing.plugin.visible.indexOf(id) === -1) {
-        wereInvisible.push(id);
-        pluginApi.setVisiblePlugin(id, true);
-      }
-    }); // Make planes invisible again
+    return () => getCADState().api.blankDiv.hide();
+  }, [setEditName]); // When BlankDiv is active, increase zIndex so this element would overlap it
 
-    return () => {
-      const planeId = core.getDrawing(drawingId).structure.tree[sketchId].members.planeReference.value;
-      wereInvisible.forEach(id => {
-        if (id !== planeId) {
-          pluginApi.setVisiblePlugin(id, false);
-        }
-      });
-    }; // Should always happen just once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Label, null, "Select sketcher plane"), /*#__PURE__*/React.createElement(Selection, {
-    drawingId: drawingId,
-    filter: (scope, data) => {
-      return scope === TreeObjScope && data.object.class === classcad.CCClasses.CCWorkPlane || scope === core.BuerliScope && data === core.GraphicType.PLANE;
-    },
-    onChange: items => {
-      if (items.length !== 0) {
-        if (items[0].scope === TreeObjScope) {
-          classcad.ccAPI.sketcher.setWorkPlane(drawingId, sketchId, items[0].data.object.id);
-        } else {
-          classcad.ccAPI.sketcher.createAndSetWorkPlane(drawingId, sketchId, items[0].data.graphicId);
-        }
-      }
+  const showBlankDiv = useCADStore(s => s.blankDiv.isActive);
+  const zIndex = showBlankDiv ? blankZIndex + 1 : 0;
+  return /*#__PURE__*/React.createElement(antd.Input, {
+    style: {
+      zIndex
     },
-    defaultActive: true
-  }));
+    ref: ref,
+    onPressEnter: onEnter,
+    defaultValue: name,
+    size: "small",
+    onKeyDown: onKeyPress,
+    onBlur: () => setEditName(false)
+  });
 };
 
-const MousePos = () => {
-  const {
-    Group,
-    Label
-  } = react.useBuerli(buerli => buerli.options.elements);
-  const {
-    drawingId,
-    pluginId
-  } = React.useContext(RootContext);
-  const pos = useSketchState(drawingId, pluginId, state => state.mousePos);
-  return pos ? /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Label, null, "Mouse:"), /*#__PURE__*/React.createElement(Label, {
-    flex: "inherit"
-  }, "X:"), /*#__PURE__*/React.createElement(Label, null, pos.x.toFixed(2)), /*#__PURE__*/React.createElement(Label, {
-    flex: "inherit"
-  }, "Y:"), /*#__PURE__*/React.createElement(Label, null, pos.y.toFixed(2))) : null;
-};
+const FlexRow = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+const FlexReverseRow = styled.div`
+  display: flex;
+  flex-direction: row-reverse;
+`;
+const Link = styled.a`
+  color: #4f4f4f;
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: #4f4f4f;
+    color: #4f4f4f;
+  }
+`;
+const HoveredDiv = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  cursor: default;
+  background-color: ${props => props.hovered ? '#f0f0f0' : undefined};
+  border-bottom: ${props => props.bordered ? '1px solid #f0f0f0' : undefined};
+  padding: ${props => props.bordered ? '4px 10px' : undefined};
+  &:hover {
+    background-color: #f0f0f0;
+  }
+`;
 
-const TabIcon = ({
-  url,
-  tooltip
+const {
+  Text: Text$3
+} = antd.Typography;
+const EntityName = ({
+  name,
+  disabled,
+  strong,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
 }) => {
-  const {
-    Tooltip
-  } = react.useBuerli(b => b.options.elements);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltip,
-    placement: "top"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginRight: '3px',
-      marginLeft: '3px'
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    style: {
-      width: 24,
-      height: 24
-    },
-    src: url
-  })));
+  return /*#__PURE__*/React.createElement(Link, {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(Text$3, {
+    disabled: disabled,
+    strong: strong
+  }, name));
 };
 
-const SketchMode = ({
+const Indent = () => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ant-tree-indent"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ant-tree-indent-unit"
+  }));
+};
+const Indents = ({
+  level
+}) => {
+  const arr = Array.from(Array(level).keys());
+  return /*#__PURE__*/React.createElement(React.Fragment, null, arr.map(i => /*#__PURE__*/React.createElement(Indent, {
+    key: i
+  })));
+};
+const CollapseButton = ({
+  collapsed,
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ant-tree-switcher",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "caret-down",
+    className: "anticon anticon-caret-down ant-tree-switcher-icon"
+  }, collapsed ? /*#__PURE__*/React.createElement(icons.CaretRightOutlined, null) : /*#__PURE__*/React.createElement(icons.CaretDownOutlined, null)));
+};
+
+function useMenuItems$4(drawingId, pluginId, objectId, setRename) {
+  const {
+    set,
+    objectId: sketchId
+  } = core.getPlugin(drawingId, pluginId);
+  return React.useMemo(() => {
+    return {
+      rename: {
+        caption: 'rename',
+        icon: /*#__PURE__*/React.createElement(icons.EditOutlined, null),
+        callback: () => {
+          setRename(true);
+        }
+      },
+      delete: {
+        caption: 'delete',
+        icon: /*#__PURE__*/React.createElement(icons.DeleteOutlined, null),
+        callback: () => {
+          classcad.ccAPI.sketcher.removeObjects(drawingId, sketchId, [objectId]);
+          const tree = core.getDrawing(drawingId).structure.tree;
+          set(state_ => {
+            const selected = state_.selected.filter(id => id !== objectId && tree[id].parent !== objectId);
+            return {
+              selected
+            };
+          });
+        }
+      }
+    };
+  }, [drawingId, sketchId, objectId, set, setRename]);
+}
+
+const {
+  Text: Text$2
+} = antd.Typography;
+
+const ObjTitle = ({
+  objId,
+  withMenu
+}) => {
+  const {
+    drawingId,
+    pluginId
+  } = React.useContext(RootContext);
+  const name = react.useDrawing(drawingId, d => d.structure.tree[objId].name) || '';
+  const objClass = react.useDrawing(drawingId, d => d.structure.tree[objId].class);
+  const isHovered = useSketchState(drawingId, pluginId, s => s.hovered === objId);
+  const isSelected = useSketchState(drawingId, pluginId, s => s.selected.indexOf(objId) !== -1);
+  const color = isSelected ? '#ffa500' : isHovered ? '#28d79f' : undefined; // TODO: Rename resources so that they have more generic names, i.e. 'CC_Point' instead of 'drawPoint', etc
+
+  const imgName = React.useMemo(() => {
+    switch (objClass) {
+      case classcad.CCClasses.CCPoint:
+        return HandlersList.DRAWPOINT;
+
+      case classcad.CCClasses.CCLine:
+        return HandlersList.DRAWLINE;
+
+      case classcad.CCClasses.CCArc:
+        return HandlersList.DRAWARCCENTER;
+
+      case classcad.CCClasses.CCCircle:
+        return HandlersList.DRAWCIRCLE;
+
+      default:
+        return objClass;
+    }
+  }, [objClass]);
+  const [rename, setRename] = React.useState(false);
+  const [isMenuHovered, setIsMenuHovered] = React.useState(false);
+  const menuItems = useMenuItems$4(drawingId, pluginId, objId, setRename);
+  const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
+  const globalSelection = useTreeObjSelection(drawingId, objId);
+  const onClickSel = globalSelection.handlers.onClick; // TODO: Implement global selection in onClick? Not sure if needed...
+
+  const onClick = React.useCallback(() => {
+    if (activeHandler === HandlersList.DRAG) {
+      select(drawingId, pluginId, objId);
+    } else if (!activeHandler) {
+      // if no handler is active, some selector should be active
+      onClickSel && onClickSel();
+    }
+  }, [drawingId, pluginId, objId, activeHandler, onClickSel]);
+  const onMouseEnter = React.useCallback(() => {
+    hover(drawingId, pluginId, objId);
+  }, [drawingId, pluginId, objId]);
+  const onMouseLeave = React.useCallback(() => {
+    unhover(drawingId, pluginId, objId);
+  }, [drawingId, pluginId, objId]);
+  const nameComponent = rename ? /*#__PURE__*/React.createElement(NameEdit, {
+    drawingId: drawingId,
+    objId: objId,
+    setEditName: setRename,
+    name: name
+  }) : /*#__PURE__*/React.createElement(EntityName, {
+    name: name,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  });
+  return /*#__PURE__*/React.createElement(HoveredDiv, {
+    hovered: isMenuHovered,
+    style: {
+      backgroundColor: color
+    }
+  }, /*#__PURE__*/React.createElement(antd.Space, null, imgName && resources[imgName] && /*#__PURE__*/React.createElement("img", {
+    style: {
+      width: 18,
+      height: 18,
+      verticalAlign: '-4px'
+    },
+    src: resources[imgName]
+  }), nameComponent), withMenu && /*#__PURE__*/React.createElement(Menu, {
+    items: menuItems,
+    onVisibleChange: setIsMenuHovered
+  }));
+};
+
+const SketchObj = ({
+  objId,
+  level
+}) => {
+  const {
+    drawingId
+  } = React.useContext(RootContext);
+  const children = react.useDrawing(drawingId, d => d.structure.tree[objId].children || []);
+  const [collapsed, setCollapsed] = React.useState(true);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlexRow, null, /*#__PURE__*/React.createElement(Indents, {
+    level: level
+  }), children.length > 0 ? /*#__PURE__*/React.createElement(CollapseButton, {
+    collapsed: collapsed,
+    onClick: () => setCollapsed(x => !x)
+  }) : /*#__PURE__*/React.createElement(Indent, null), /*#__PURE__*/React.createElement(ObjTitle, {
+    objId: objId,
+    withMenu: level === 0
+  })), children.map(childId => /*#__PURE__*/React.createElement("div", {
+    key: childId,
+    style: {
+      display: collapsed ? 'none' : 'block'
+    }
+  }, /*#__PURE__*/React.createElement(SketchObj, {
+    objId: childId,
+    level: level + 1
+  }))));
+};
+
+const Details = () => {
+  const {
+    Collapse
+  } = react.useBuerli(buerli => buerli.options.elements);
+  const {
+    drawingId,
+    pluginId
+  } = React.useContext(RootContext);
+  const sketchId = react.usePlugin(drawingId, pluginId, plugin => plugin.objectId);
+  const sketchChildren = react.useDrawing(drawingId, drawing => drawing.structure.tree[sketchId].children);
+  const {
+    geometry,
+    constraints,
+    isTrimActive
+  } = React.useMemo(() => {
+    const tree = core.getDrawing(drawingId).structure.tree;
+    const geometry_ = (sketchChildren == null ? void 0 : sketchChildren.filter(id => isSketchGeometry(tree[id].class))) || [];
+    const constraints_ = (sketchChildren == null ? void 0 : sketchChildren.filter(id => is2DConstraint(tree[id].class))) || [];
+    const isTrimActive_ = (sketchChildren == null ? void 0 : sketchChildren.findIndex(id => tree[id].class === classcad.CCClasses.CCContainer)) !== -1;
+    return {
+      geometry: geometry_,
+      constraints: constraints_,
+      isTrimActive: isTrimActive_
+    };
+  }, [drawingId, sketchChildren]);
+  return /*#__PURE__*/React.createElement(Collapse, {
+    header: "Details",
+    isActive: false
+  }, geometry.length === 0 && /*#__PURE__*/React.createElement(Text$2, {
+    strong: true
+  }, "The sketch is empty"), geometry.length > 0 && isTrimActive && /*#__PURE__*/React.createElement(Text$2, {
+    strong: true
+  }, "Trim is active"), geometry.length > 0 && !isTrimActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text$2, {
+    strong: true
+  }, "Geometry"), !isTrimActive && geometry.map(childId => /*#__PURE__*/React.createElement(SketchObj, {
+    objId: childId,
+    key: childId,
+    level: 0
+  }))), constraints.length > 0 && !isTrimActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text$2, {
+    strong: true
+  }, "Constraints"), constraints.map(childId => /*#__PURE__*/React.createElement(SketchObj, {
+    objId: childId,
+    key: childId,
+    level: 0
+  }))));
+};
+
+const PlaneSelectionMode = ({
+  drawingId,
+  pluginId
+}) => {
+  const {
+    Group,
+    Label,
+    Selection
+  } = react.useBuerli(buerli => buerli.options.elements);
+  const sketchId = react.usePlugin(drawingId, pluginId, plugin => plugin.objectId);
+  const curProduct = react.useDrawing(drawingId, d => d.structure.currentProduct);
+  const opSeqId = useOperationSequence(drawingId, curProduct) || -1;
+  const opSeqChildren = react.useDrawing(drawingId, d => d.structure.tree[opSeqId].children || []); // Makes base planes visible when just created, and turns them off after initialization (i.e. selecting a plane)
+
+  React.useEffect(() => {
+    if (opSeqChildren.length < 7) {
+      // Should probably never happen, but just in case...
+      return;
+    }
+
+    const drawing = core.getDrawing(drawingId);
+    const tree = drawing.structure.tree;
+    const pluginApi = drawing.api.plugin; // 4, 5, 6 are ids of XY-, XZ- and YZ-planes in the operation sequence array
+
+    const wpSeqIds = [4, 5, 6];
+    const basePlaneIds = wpSeqIds.map(index => tree[opSeqChildren[index]].members.refObj.value);
+    const wereInvisible = [];
+    basePlaneIds.forEach(id => {
+      if (drawing.plugin.visible.indexOf(id) === -1) {
+        wereInvisible.push(id);
+        pluginApi.setVisiblePlugin(id, true);
+      }
+    }); // Make planes invisible again
+
+    return () => {
+      const drawing_ = core.getDrawing(drawingId);
+
+      if (drawing_) {
+        var _drawing_$structure$t, _drawing_$structure$t2;
+
+        const pluginApi_ = drawing_.api.plugin;
+        const planeId = (_drawing_$structure$t = drawing_.structure.tree[sketchId]) == null ? void 0 : (_drawing_$structure$t2 = _drawing_$structure$t.members) == null ? void 0 : _drawing_$structure$t2.planeReference.value;
+        wereInvisible.forEach(id => {
+          if (id !== planeId) {
+            pluginApi_.setVisiblePlugin(id, false);
+          }
+        });
+      }
+    }; // Should always happen just once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Label, null, "Select sketcher plane"), /*#__PURE__*/React.createElement(Selection, {
+    drawingId: drawingId,
+    filter: (scope, data) => {
+      return scope === TreeObjScope && data.object.class === classcad.CCClasses.CCWorkPlane || scope === core.BuerliScope && data === core.GraphicType.PLANE;
+    },
+    onChange: items => {
+      if (items.length !== 0) {
+        if (items[0].scope === TreeObjScope) {
+          classcad.ccAPI.sketcher.setWorkPlane(drawingId, sketchId, items[0].data.object.id);
+        } else {
+          classcad.ccAPI.sketcher.createAndSetWorkPlane(drawingId, sketchId, items[0].data.graphicId);
+        }
+      }
+    },
+    defaultActive: true
+  }));
+};
+
+const MousePos = () => {
+  const {
+    Group,
+    Label
+  } = react.useBuerli(buerli => buerli.options.elements);
+  const {
+    drawingId,
+    pluginId
+  } = React.useContext(RootContext);
+  const pos = useSketchState(drawingId, pluginId, state => state.mousePos);
+  return pos ? /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Label, null, "Mouse:"), /*#__PURE__*/React.createElement(Label, {
+    flex: "inherit"
+  }, "X:"), /*#__PURE__*/React.createElement(Label, null, pos.x.toFixed(2)), /*#__PURE__*/React.createElement(Label, {
+    flex: "inherit"
+  }, "Y:"), /*#__PURE__*/React.createElement(Label, null, pos.y.toFixed(2))) : null;
+};
+
+const TabIcon = ({
+  url,
+  tooltip
+}) => {
+  const {
+    Tooltip
+  } = react.useBuerli(b => b.options.elements);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltip,
+    placement: "top"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginRight: '3px',
+      marginLeft: '3px'
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    style: {
+      width: 24,
+      height: 24
+    },
+    src: url
+  })));
+};
+
+const SketchMode = ({
   drawingId,
   pluginId
 }) => {
@@ -10692,7 +11448,7 @@ const SketchMode = ({
       });
     }
   })), /*#__PURE__*/React.createElement(MousePos, null), /*#__PURE__*/React.createElement(Collapse, {
-    header: "Patterns and use reference",
+    header: "Patterns",
     isActive: false
   }, /*#__PURE__*/React.createElement(Tabs, {
     tabBarGutter: 0,
@@ -10717,13 +11473,7 @@ const SketchMode = ({
       tooltip: "Mirror copy pattern."
     }),
     key: "Mirror"
-  }, /*#__PURE__*/React.createElement(MirrorPattern, null)), /*#__PURE__*/React.createElement(TabPane, {
-    tab: /*#__PURE__*/React.createElement(TabIcon, {
-      url: resources['useRef'],
-      tooltip: "Use reference."
-    }),
-    key: "UseRef"
-  }, /*#__PURE__*/React.createElement(UseRef, null))))));
+  }, /*#__PURE__*/React.createElement(MirrorPattern, null)))), /*#__PURE__*/React.createElement(Details, null)));
 };
 
 const RootImpl$f = ({
@@ -10733,22 +11483,23 @@ const RootImpl$f = ({
   const objectId = react.usePlugin(drawingId, pluginId, plugin => plugin.objectId);
   const sketch = react.useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
   const planeSelected = sketch.members.planeReference.value !== 0;
-  const {
-    set
-  } = core.getPlugin(drawingId, pluginId);
   React.useEffect(() => {
     // Reset some fields in state and force sketch visibility when sketch is unmounted.
     return () => {
-      const pluginApi = core.getDrawing(drawingId).api.plugin;
-      pluginApi.setVisiblePlugin(pluginId, true);
-      set({
-        tmpObjects: {},
-        selected: [],
-        hovered: UNDEFINEDID,
-        highlighted: []
-      });
+      const plugin = core.getPlugin(drawingId, pluginId); // Only do stuff if plugin exists in the store when unmounting
+
+      if (plugin) {
+        const pluginApi = core.getDrawing(drawingId).api.plugin;
+        pluginApi.setVisiblePlugin(pluginId, true);
+        plugin.set({
+          tmpObjects: {},
+          selected: [],
+          hovered: UNDEFINEDID,
+          highlighted: []
+        });
+      }
     };
-  }, [drawingId, pluginId, set]);
+  }, [drawingId, pluginId]);
   React.useEffect(() => {
     if (!planeSelected) {
       return;
@@ -11006,7 +11757,7 @@ const ViewImpl$c = ({
     handlers
   } = useTreeObjSelection(drawingId, objectId);
   const color = getColor(isHovered, isSelected, direction, workAxisObj.members.Type.value);
-  const ref = useScale(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
+  const ref = useScale$1(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
   return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement("group", {
     ref: ref,
     position: position
@@ -11527,7 +12278,7 @@ const ViewImpl$a = ({
     handlers
   } = useTreeObjSelection(drawingId, objectId);
   const color = isHovered ? 0x28d79f : isSelected ? 0xa70b0b : 0x111111;
-  const ref = useScale(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
+  const ref = useScale$1(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
   return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement("group", {
     ref: ref,
     position: position
@@ -11568,9 +12319,9 @@ var index$c = /*#__PURE__*/Object.freeze({
   description: description$c
 });
 
-function ownKeys$6(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 ownKeys$7(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const NumInput = ({
   onChange,
@@ -11631,7 +12382,7 @@ const CSysEditor = ({
   const [z, setZ] = React.useState(() => userValue[csysRow].z);
   React.useEffect(() => {
     setUserValue(val => {
-      const newVal = [_objectSpread$6({}, val[0]), _objectSpread$6({}, val[1]), _objectSpread$6({}, val[2]), _objectSpread$6({}, val[3])];
+      const newVal = [_objectSpread$7({}, val[0]), _objectSpread$7({}, val[1]), _objectSpread$7({}, val[2]), _objectSpread$7({}, val[3])];
       newVal[csysRow] = {
         x,
         y,
@@ -12242,36 +12993,36 @@ function ViewImpl$8({
     length: zAxisLength + scale * 10,
     width: arrowWidth,
     color: 0x11116f
-  }), /*#__PURE__*/React.createElement(Point$1, {
+  }), /*#__PURE__*/React.createElement(Point$2, {
     position: origin,
     radius: originPointWidth,
     color: 0x111111
-  }), axisPoints.map(point => /*#__PURE__*/React.createElement(Point$1, {
+  }), axisPoints.map(point => /*#__PURE__*/React.createElement(Point$2, {
     key: point.key,
     position: point.position,
     radius: axisPointWidth,
     color: point.color
-  })), /*#__PURE__*/React.createElement(Point$1, {
+  })), /*#__PURE__*/React.createElement(Point$2, {
     position: xMin,
     radius: boundaryPointWidth,
     color: 0x6f1111
-  }), /*#__PURE__*/React.createElement(Point$1, {
+  }), /*#__PURE__*/React.createElement(Point$2, {
     position: xMax,
     radius: boundaryPointWidth,
     color: 0x6f1111
-  }), /*#__PURE__*/React.createElement(Point$1, {
+  }), /*#__PURE__*/React.createElement(Point$2, {
     position: yMin,
     radius: boundaryPointWidth,
     color: 0x116f11
-  }), /*#__PURE__*/React.createElement(Point$1, {
+  }), /*#__PURE__*/React.createElement(Point$2, {
     position: yMax,
     radius: boundaryPointWidth,
     color: 0x116f11
-  }), /*#__PURE__*/React.createElement(Point$1, {
+  }), /*#__PURE__*/React.createElement(Point$2, {
     position: zMin,
     radius: boundaryPointWidth,
     color: 0x11116f
-  }), /*#__PURE__*/React.createElement(Point$1, {
+  }), /*#__PURE__*/React.createElement(Point$2, {
     position: zMax,
     radius: boundaryPointWidth,
     color: 0x11116f
@@ -12969,6 +13720,47 @@ const CSysDisplayValidator = ({
   }, children);
 };
 
+function useFeaturesIds(drawingId, curNodeId) {
+  const curClass = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$cur;
+
+    return (_d$structure$tree$cur = d.structure.tree[curNodeId]) == null ? void 0 : _d$structure$tree$cur.class;
+  });
+  const prodId = react.useDrawing(drawingId, d => {
+    if (curClass === classcad.CCClasses.CCProductReference || curClass === classcad.CCClasses.CCProductReferenceET) {
+      const node = d.structure.tree[curNodeId];
+      return node.members.productId.value;
+    }
+
+    return curNodeId;
+  });
+  const opSeqId = useOperationSequence(drawingId, prodId);
+  const opSeqChildren = react.useDrawing(drawingId, d => {
+    var _d$structure$tree;
+
+    return (_d$structure$tree = d.structure.tree[opSeqId || -1]) == null ? void 0 : _d$structure$tree.children;
+  });
+  const tree = core.getDrawing(drawingId).structure.tree;
+  const featureIds = (opSeqChildren == null ? void 0 : opSeqChildren.map(refId => tree[refId].members.refObj.value)) || [];
+  return featureIds;
+}
+function getFeaturesIds(drawingId, curNodeId) {
+  var _tree$prodId, _tree;
+
+  const tree = core.getDrawing(drawingId).structure.tree;
+  const curClass = tree[curNodeId].class;
+  const prodId = curClass === classcad.CCClasses.CCProductReference || curClass === classcad.CCClasses.CCProductReferenceET ? tree[curNodeId].members.productId.value : curNodeId;
+  const prodChildren = (_tree$prodId = tree[prodId]) == null ? void 0 : _tree$prodId.children;
+  const opSeqId = prodChildren == null ? void 0 : prodChildren.find(id => {
+    var _tree$id;
+
+    return ((_tree$id = tree[id]) == null ? void 0 : _tree$id.class) === classcad.CCClasses.CCOperationSequence;
+  });
+  const opSeqChildren = (_tree = tree[opSeqId || -1]) == null ? void 0 : _tree.children;
+  const featureIds = (opSeqChildren == null ? void 0 : opSeqChildren.map(refId => tree[refId].members.refObj.value)) || [];
+  return featureIds;
+}
+
 const getFlipMatrix = (flip, xAxis, yAxis) => {
   switch (flip) {
     case classcad.FlipType.FLIP_X:
@@ -13311,9 +14103,8 @@ const CSysDisplayImpl = ({
       const productId = ((_tree$id$members = tree[id].members) == null ? void 0 : (_tree$id$members$prod = _tree$id$members.productId) == null ? void 0 : _tree$id$members$prod.value) || tree[id].id;
 
       if (prToCsysMap[productId] === undefined) {
-        var _tree$productId$featu;
-
-        const csysIds = ((_tree$productId$featu = tree[productId].features) == null ? void 0 : _tree$productId$featu.filter(featureId => tree[featureId].class === classcad.CCClasses.CCWorkCoordSystem)) || [];
+        const features = getFeaturesIds(drawingId, productId);
+        const csysIds = (features == null ? void 0 : features.filter(featureId => tree[featureId].class === classcad.CCClasses.CCWorkCoordSystem)) || [];
         prToCsysMap[productId] = csysIds;
       }
 
@@ -15013,216 +15804,77 @@ function readFile(file, type) {
         break;
 
       case 'Text':
-        reader.readAsText(file);
-        break;
-
-      case 'ArrayBuffer':
-      default:
-        reader.readAsArrayBuffer(file);
-        break;
-    }
-  });
-}
-/**
- * Simple helper functions for file interaction.
- */
-
-
-const FileUtils = {
-  /**
-   * Loads a file from the file system.
-   * It uses @see document and is therefore directly dependent on the DOM.
-   *
-   * @param onLoad The callback.
-   * @param type The content type.
-   */
-  loadFile: (onLoad, type, multiple) => {
-    const handler = event => {
-      if (event.target && event.target.files) {
-        const files = [...event.target.files];
-        const promises = files.map(f => readFile(f, type));
-        Promise.all(promises).then(res => onLoad(res)).catch();
-        event.target.value = '';
-      }
-    };
-
-    const loaderId = '________buerli-react-cad________';
-    const loaderSelector = `#${loaderId}`;
-    let loader = document.querySelector(loaderSelector);
-
-    if (!loader || !loader.onchange) {
-      loader = document.createElement('input');
-      loader.id = loaderId;
-      loader.type = 'file';
-      loader.multiple = multiple || false;
-      loader.style.display = 'none';
-      document.body.appendChild(loader);
-    }
-
-    if (loader) {
-      loader.onchange = handler;
-      loader.click();
-    }
-  },
-  exportNode: async (drawingId, objectId, type = 'of1') => {
-    var _members$productId;
-
-    const structure = core.getDrawing(drawingId).structure;
-    const tree = structure.tree;
-    const isRoot = objectId === structure.root;
-    const productId = ((_members$productId = tree[objectId].members.productId) == null ? void 0 : _members$productId.value) || objectId;
-    const name = tree[productId].name;
-    const data = isRoot ? await classcad.ccAPI.baseModeler.save(drawingId, type) : await classcad.ccAPI.assemblyBuilder.exportNode(drawingId, objectId, type);
-
-    if (data) {
-      const link = document.createElement('a');
-      link.href = window.URL.createObjectURL(new Blob([data], {
-        type: 'application/octet-stream'
-      }));
-      link.download = `${name}.${type}`;
-      link.click();
-    }
-  }
-};
-
-const _excluded$3 = ["items", "children"];
-const Menu = _ref => {
-  let {
-    items,
-    children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$3);
-
-  const onItemClick = React.useCallback(e => {
-    e.domEvent.stopPropagation();
-    let item = items[e.keyPath.pop()];
-
-    if (item.children) {
-      item = item.children[e.keyPath.pop()];
-    }
-    item.callback(e.domEvent);
-  }, [items]);
-  const menu = /*#__PURE__*/React.createElement(antd.Menu, {
-    onClick: onItemClick
-  }, Object.keys(items).map(key => {
-    const item = items[key];
-
-    if (item.children) {
-      const smItem = item;
-      return /*#__PURE__*/React.createElement(antd.Menu.SubMenu, {
-        title: smItem.caption,
-        key: key,
-        icon: smItem.icon
-      }, Object.keys(smItem.children).map(chKey => {
-        const chItem = smItem.children[chKey];
-        return /*#__PURE__*/React.createElement(antd.Menu.Item, {
-          key: chKey,
-          icon: chItem.icon
-        }, chItem.caption);
-      }));
-    } else {
-      const item_ = item;
-      return /*#__PURE__*/React.createElement(antd.Menu.Item, {
-        key: key,
-        icon: item_.icon
-      }, item_.caption);
-    }
-  }));
-  return /*#__PURE__*/React.createElement(antd.Dropdown, _extends({
-    overlay: menu,
-    placement: "bottomCenter"
-  }, props), children ? children : /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '24px',
-      cursor: 'pointer'
-    },
-    onClick: e => e.stopPropagation()
-  }, "..."));
-};
+        reader.readAsText(file);
+        break;
 
-const zoomToFit = drawingId => {
-  var _getCamera;
+      case 'ArrayBuffer':
+      default:
+        reader.readAsArrayBuffer(file);
+        break;
+    }
+  });
+}
+/**
+ * Simple helper functions for file interaction.
+ */
 
-  const drawing = core.getDrawing(drawingId);
-  const camApi = (_getCamera = react.getCamera(drawingId)) == null ? void 0 : _getCamera.api;
 
-  if (!drawing || !camApi) {
-    return;
-  }
+const FileUtils = {
+  /**
+   * Loads a file from the file system.
+   * It uses @see document and is therefore directly dependent on the DOM.
+   *
+   * @param onLoad The callback.
+   * @param type The content type.
+   */
+  loadFile: (onLoad, type, multiple) => {
+    const handler = event => {
+      if (event.target && event.target.files) {
+        const files = [...event.target.files];
+        const promises = files.map(f => readFile(f, type));
+        Promise.all(promises).then(res => onLoad(res)).catch();
+        event.target.value = '';
+      }
+    };
 
-  const {
-    structure,
-    api: drawingApi
-  } = drawing;
-  const {
-    root,
-    currentProduct,
-    currentNode
-  } = structure;
-  let currRoot = currentNode || currentProduct || root;
+    const loaderId = '________buerli-react-cad________';
+    const loaderSelector = `#${loaderId}`;
+    let loader = document.querySelector(loaderSelector);
 
-  if (currentProduct && structure.tree[currentProduct].class === 'CC_Part') {
-    currRoot = currentProduct;
-  }
+    if (!loader || !loader.onchange) {
+      loader = document.createElement('input');
+      loader.id = loaderId;
+      loader.type = 'file';
+      loader.multiple = multiple || false;
+      loader.style.display = 'none';
+      document.body.appendChild(loader);
+    }
 
-  const bounds = drawingApi.structure.calculateProductBounds(currRoot);
-  camApi.setZoom('fit', bounds);
-};
+    if (loader) {
+      loader.onchange = handler;
+      loader.click();
+    }
+  },
+  exportNode: async (drawingId, objectId, type = 'of1') => {
+    var _members$productId;
 
-function ownKeys$5(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; }
+    const structure = core.getDrawing(drawingId).structure;
+    const tree = structure.tree;
+    const isRoot = objectId === structure.root;
+    const productId = ((_members$productId = tree[objectId].members.productId) == null ? void 0 : _members$productId.value) || objectId;
+    const name = tree[productId].name;
+    const data = isRoot ? await classcad.ccAPI.baseModeler.save(drawingId, type) : await classcad.ccAPI.assemblyBuilder.exportNode(drawingId, objectId, type);
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const appApi = (set, get) => ({
-  assemblyTree: {
-    startProdEditing: (drawingId, objId) => {
-      set(state => {
-        let res = [];
-        const curNode = core.api.getState().drawing.refs[drawingId].structure.currentNode;
-        res = state.assemblyTree.prodStack;
-        curNode && res.push(curNode);
-        return _objectSpread$5(_objectSpread$5({}, state), {}, {
-          assemblyTree: {
-            prodStack: [...res]
-          }
-        });
-      });
-      classcad.ccAPI.assemblyBuilder.setCurrentNode(drawingId, objId).then(() => zoomToFit(drawingId)).catch();
-    },
-    goBack: drawingId => {
-      const prodStack = get().assemblyTree.prodStack;
-      const prevProd = prodStack[prodStack.length - 1];
-      if (!prevProd) return;
-      set(state => {
-        const res = state.assemblyTree.prodStack;
-        res.pop();
-        return _objectSpread$5(_objectSpread$5({}, state), {}, {
-          assemblyTree: {
-            prodStack: [...res]
-          }
-        });
-      });
-      classcad.ccAPI.assemblyBuilder.setCurrentNode(drawingId, prevProd).then(() => zoomToFit(drawingId)).catch();
-    },
-    clearProdStack: () => {
-      set(state => _objectSpread$5(_objectSpread$5({}, state), {}, {
-        assemblyTree: {
-          prodStack: []
-        }
+    if (data) {
+      const link = document.createElement('a');
+      link.href = window.URL.createObjectURL(new Blob([data], {
+        type: 'application/octet-stream'
       }));
+      link.download = `${name}.${type}`;
+      link.click();
     }
   }
-});
-
-const createAppState = (set, get) => ({
-  assemblyTree: {
-    prodStack: []
-  },
-  api: appApi(set, get)
-});
-
-const CADApi = vanilla((set, get) => createAppState(set, get));
-const useCADStore = create(CADApi);
-const getCADState = CADApi.getState;
+};
 
 function useMenuItems$3(drawingId, prodId, setEditName, pluginId) {
   const isCurrent = react.useDrawing(drawingId, d => d.structure.currentProduct === prodId);
@@ -15300,43 +15952,8 @@ function useMenuItems$3(drawingId, prodId, setEditName, pluginId) {
   return res;
 }
 
-const NameEdit = ({
-  drawingId,
-  objId,
-  setEditName,
-  name
-}) => {
-  const ref = React.useRef(null);
-  const onEnter = React.useCallback(async e => {
-    if (e.target.value !== '') {
-      await classcad.ccAPI.common.setObjectName(drawingId, objId, e.target.value);
-    }
-
-    setEditName(false);
-  }, [drawingId, objId, setEditName]);
-  const onKeyPress = React.useCallback(e => {
-    if (e.key !== 'Escape') return;
-    setEditName(false);
-  }, [setEditName]);
-  React.useEffect(() => {
-    var _ref$current;
-
-    (_ref$current = ref.current) == null ? void 0 : _ref$current.focus({
-      cursor: 'all'
-    });
-  }, []);
-  return /*#__PURE__*/React.createElement(antd.Input, {
-    ref: ref,
-    onPressEnter: onEnter,
-    defaultValue: name,
-    size: "small",
-    onKeyDown: onKeyPress,
-    onBlur: () => setEditName(false)
-  });
-};
-
 const {
-  Text: Text$2
+  Text: Text$1
 } = antd.Typography; // TODO: use Name from Feature.tsx
 
 const Name = ({
@@ -15345,7 +15962,7 @@ const Name = ({
   strong,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(Text$2, {
+  return /*#__PURE__*/React.createElement(Text$1, {
     disabled: disabled,
     strong: strong,
     style: {
@@ -15433,7 +16050,7 @@ const NewProd = ({
     ref: inputRef,
     suffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(antd.Space, null, /*#__PURE__*/React.createElement(InputButton, {
       type: "apply",
-      onClick: () => createProd() && setCreateMode(false)
+      onClick: () => setCreateMode(false)
     }), /*#__PURE__*/React.createElement(InputButton, {
       type: "cancel",
       onClick: () => setCreateMode(false)
@@ -15470,13 +16087,16 @@ const ProdTable = ({
       dataIndex: 'prodId',
       render
     }];
-  }, [drawingId, pluginId, setCreateMode]); // ResetselectedProduct when plugin is closed
+  }, [drawingId, pluginId, setCreateMode]); // Reset selectedProduct when plugin is closed
 
   React.useEffect(() => {
-    return () => set({
-      selectedProduct: null
-    });
-  }, [set]);
+    return () => {
+      const plugin = core.getPlugin(drawingId, pluginId);
+      plugin && plugin.set({
+        selectedProduct: null
+      });
+    };
+  }, [drawingId, pluginId]);
   const keyHandler = React.useCallback(e => {
     if (e.key === 'Escape') {
       set({
@@ -15945,6 +16565,25 @@ const useIsDisabled = (drawingId, featureId) => {
   return featureIndex > rollbackBarIndex || actFeatIdx >= 0 && actFeatIdx < featureIndex;
 };
 
+/**
+ * Validator for FeatureList component. Checks drawing and currentProduct existance.
+ *
+ * @param drawingId
+ * @returns
+ */
+
+const FeatureListValidator = ({
+  drawingId,
+  children
+}) => {
+  const warnings = {};
+  useDrawingVerifier(drawingId, warnings);
+  useRootOrProdVerifier(drawingId, warnings);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    warnings: warnings
+  }, children);
+};
+
 /**
  * Goal of this component is to manage visibility of individual features when interacting with RollbackBar
  * TODO: change the component name?
@@ -15981,8 +16620,6 @@ const VisibilityController = ({
 const FtVisibilityControllerImpl = ({
   drawingId
 }) => {
-  var _operationSequence$ch;
-
   const activeSelId = react.useDrawing(drawingId, d => d.selection.active);
   const featuresToHide = React.useRef([]);
   React.useEffect(() => {
@@ -16011,15 +16648,7 @@ const FtVisibilityControllerImpl = ({
     };
   }, [drawingId, activeSelId]);
   const curPartId = react.useDrawing(drawingId, d => d.structure.currentProduct || d.structure.root);
-  const {
-    operationSequence
-  } = useRollbackBar(drawingId, curPartId);
-  const tree = core.getDrawing(drawingId).structure.tree;
-  const features = operationSequence == null ? void 0 : (_operationSequence$ch = operationSequence.children) == null ? void 0 : _operationSequence$ch.map(id => {
-    var _tree$id, _tree$id$members, _tree$id$members$refO;
-
-    return (_tree$id = tree[id]) == null ? void 0 : (_tree$id$members = _tree$id.members) == null ? void 0 : (_tree$id$members$refO = _tree$id$members.refObj) == null ? void 0 : _tree$id$members$refO.value;
-  });
+  const features = useFeaturesIds(drawingId, curPartId);
   return features ? /*#__PURE__*/React.createElement(React.Fragment, null, features.map(id => /*#__PURE__*/React.createElement(VisibilityController, {
     key: id,
     drawingId: drawingId,
@@ -16030,70 +16659,25 @@ const FtVisibilityControllerImpl = ({
 const FtVisibilityController = ({
   drawingId
 }) => {
-  return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(FtVisibilityControllerImpl, {
+  return /*#__PURE__*/React.createElement(FeatureListValidator, {
+    drawingId: drawingId
+  }, /*#__PURE__*/React.createElement(FtVisibilityControllerImpl, {
     drawingId: drawingId
   }));
 };
 
 var FtVisibilityController$1 = FtVisibilityController;
 
-function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-const Divider = props => {
-  return /*#__PURE__*/React.createElement(antd.Divider, _extends({}, props, {
-    style: _objectSpread$4({
-      margin: '0'
-    }, props.style)
-  }));
-};
+function ownKeys$6(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; }
 
-const FlexRow = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-const FlexReverseRow = styled.div`
-  display: flex;
-  flex-direction: row-reverse;
-`;
-const Link = styled.a`
-  color: #4f4f4f;
-  &:hover {
-    text-decoration: underline;
-    text-decoration-color: #4f4f4f;
-    color: #4f4f4f;
-  }
-`;
-const HoveredDiv = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  cursor: default;
-  &:hover {
-    background-color: #fbfbfb;
-  }
-`;
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const {
-  Text: Text$1
-} = antd.Typography;
-const EntityName = ({
-  name,
-  disabled,
-  strong,
-  onClick,
-  onMouseEnter,
-  onMouseLeave
-}) => {
-  return /*#__PURE__*/React.createElement(Link, {
-    onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    disabled: disabled,
-    strong: strong
-  }, name));
+const Divider = props => {
+  return /*#__PURE__*/React.createElement(antd.Divider, _extends({}, props, {
+    style: _objectSpread$6({
+      margin: '0'
+    }, props.style)
+  }));
 };
 
 function useMenuItems$2(drawingId, featureId, isActive, setEditName) {
@@ -16119,35 +16703,92 @@ function useMenuItems$2(drawingId, featureId, isActive, setEditName) {
   }, [drawingId, featureId, isActive, setEditName]);
 }
 
-function useIsCustom(drawingId, featureId) {
+function useIsCustom(drawingId, featureRefId) {
+  const curProduct = react.useDrawing(drawingId, d => d.structure.currentProduct);
+  const opSeqId = useOperationSequence(drawingId, curProduct);
+  const opSeqChildren = react.useDrawing(drawingId, d => {
+    var _d$structure$tree;
+
+    return (_d$structure$tree = d.structure.tree[opSeqId || -1]) == null ? void 0 : _d$structure$tree.children;
+  }) || []; // First 7 elements in operationSequence are features created by default (origin, x,y,z axes and planes) => they're not custom
+
+  return opSeqChildren.indexOf(featureRefId) > 6;
+}
+
+function usePrecheckErrorId(drawingId, featureId) {
   const curProduct = react.useDrawing(drawingId, d => d.structure.currentProduct);
   const opSeqId = useOperationSequence(drawingId, curProduct) || -1;
-  const opSeqChildren = react.useDrawing(drawingId, d => d.structure.tree[opSeqId].children || []);
-  const referedObjs = React.useMemo(() => {
-    return opSeqChildren.map(refId => {
-      const ref = core.getDrawing(drawingId).structure.tree[refId];
-      return ref.members.refObj.value;
-    });
-  }, [opSeqChildren, drawingId]); // First 7 elements in operationSequens are features created by default (origin, x,y,z axes and planes) => they're not custom
+  const opSeqChildren = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$opS;
+
+    return (_d$structure$tree$opS = d.structure.tree[opSeqId]) == null ? void 0 : _d$structure$tree$opS.children;
+  }) || [];
+  const refId = opSeqChildren.find(chId => {
+    var _ref_$members;
+
+    const ref_ = core.getDrawing(drawingId).structure.tree[chId];
+    return featureId === (ref_ == null ? void 0 : (_ref_$members = ref_.members) == null ? void 0 : _ref_$members.refObj.value);
+  });
+  const refChildren = react.useDrawing(drawingId, d => {
+    var _d$structure$tree2;
+
+    return (_d$structure$tree2 = d.structure.tree[refId || -1]) == null ? void 0 : _d$structure$tree2.children;
+  }) || [];
+  const errorId = refChildren.find(chId => {
+    var _getDrawing$structure;
+
+    return ((_getDrawing$structure = core.getDrawing(drawingId).structure.tree[chId]) == null ? void 0 : _getDrawing$structure.class) === classcad.CCClasses.BMError;
+  }) || null;
+  return errorId;
+}
+
+const ErrorWrapper = styled.div`
+  cursor: pointer;
+  margin-right: 4px;
+`;
+
+const PrecheckError = ({
+  drawingId,
+  errorId
+}) => {
+  var _error$members;
+
+  const error = react.useDrawing(drawingId, d => d.structure.tree[errorId]);
+  const title = (error == null ? void 0 : (_error$members = error.members) == null ? void 0 : _error$members.errorMessage.value) || '';
+  return /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: title
+  }, /*#__PURE__*/React.createElement(icons.ExclamationCircleTwoTone, {
+    twoToneColor: "#ff5f5f"
+  })));
+};
 
-  return referedObjs.indexOf(featureId) > 6;
+function useHasView(drawingId, featureId) {
+  const [hasGraphics, setHasGraphics] = React.useState(false);
+  const ftClass = react.useDrawing(drawingId, d => d.structure.tree[featureId].class);
+  react.useFeaturePluginDef(ftClass, plugin => setHasGraphics(Boolean(plugin == null ? void 0 : plugin.View)));
+  return hasGraphics;
 }
 
 const Feature = ({
   drawingId,
-  featureId
+  featureRefId
 }) => {
-  const name = react.useDrawing(drawingId, d => d.structure.tree[featureId].name);
-  const visible = react.useDrawing(drawingId, d => d.plugin.visible.indexOf(featureId) >= 0);
-  const view = react.useDrawing(drawingId, d => {
-    var _d$plugin$refs$featur;
+  const featureId = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$fea, _d$structure$tree$fea2;
+
+    return (_d$structure$tree$fea = d.structure.tree[featureRefId]) == null ? void 0 : (_d$structure$tree$fea2 = _d$structure$tree$fea.members) == null ? void 0 : _d$structure$tree$fea2.refObj.value;
+  });
+  const name = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$fea3;
 
-    return (_d$plugin$refs$featur = d.plugin.refs[featureId]) == null ? void 0 : _d$plugin$refs$featur.View;
+    return (_d$structure$tree$fea3 = d.structure.tree[featureId]) == null ? void 0 : _d$structure$tree$fea3.name;
   });
-  const hasGraphics = Boolean(view);
+  const visible = react.useDrawing(drawingId, d => d.plugin.visible.indexOf(featureId) >= 0);
+  const hasGraphics = useHasView(drawingId, featureId);
   const isActive = react.useDrawing(drawingId, d => d.plugin.active.feature === featureId);
-  const isCustom = useIsCustom(drawingId, featureId);
+  const isCustom = useIsCustom(drawingId, featureRefId);
   const disabled = useIsDisabled(drawingId, featureId);
+  const errorId = usePrecheckErrorId(drawingId, featureId);
   const [rename, setRename] = React.useState(false);
   const onNameClick = React.useCallback(() => {
     !disabled && core.getDrawing(drawingId).api.plugin.setActiveFeature(featureId);
@@ -16168,6 +16809,7 @@ const Feature = ({
     const pluginApi = core.getDrawing(drawingId).api.plugin;
     pluginApi.setVisiblePlugin(featureId, !visible);
   }, [drawingId, visible, featureId, disabled, rename]);
+  const [isMenuHovered, setIsMenuHovered] = React.useState(false);
   const menuItems = useMenuItems$2(drawingId, featureId, isActive, setRename);
   const eyeComponent = React.useMemo(() => {
     if (!hasGraphics) return /*#__PURE__*/React.createElement("div", {
@@ -16190,51 +16832,20 @@ const Feature = ({
     });
   }, [hasGraphics, visible, disabled, onEyeClick]);
   return /*#__PURE__*/React.createElement(HoveredDiv, {
-    style: {
-      borderBottom: '1px solid #f0f0f0',
-      padding: '4px 10px'
-    },
+    hovered: isMenuHovered,
+    bordered: true,
     title: String(featureId)
-  }, /*#__PURE__*/React.createElement(antd.Space, null, eyeComponent, nameComponent), isCustom && /*#__PURE__*/React.createElement(Menu, {
-    items: menuItems
-  }));
-};
-
-function useFeaturesIds(drawingId, curNodeId) {
-  const curClass = react.useDrawing(drawingId, d => d.structure.tree[curNodeId].class);
-  const prodId = react.useDrawing(drawingId, d => {
-    if (curClass === classcad.CCClasses.CCProductReference || curClass === classcad.CCClasses.CCProductReferenceET) {
-      const node = d.structure.tree[curNodeId];
-      return node.members.productId.value;
+  }, /*#__PURE__*/React.createElement(antd.Space, {
+    style: {
+      flex: 1
     }
-
-    return curNodeId;
-  });
-  const featuresIds = react.useDrawing(drawingId, d => {
-    var _d$structure$tree$pro;
-
-    return ((_d$structure$tree$pro = d.structure.tree[prodId]) == null ? void 0 : _d$structure$tree$pro.features) || [];
-  });
-  return featuresIds;
-}
-
-/**
- * Validator for FeatureList component. Checks drawing and currentProduct existance.
- *
- * @param drawingId
- * @returns
- */
-
-const FeatureListValidator = ({
-  drawingId,
-  children
-}) => {
-  const warnings = {};
-  useDrawingVerifier(drawingId, warnings);
-  useRootOrProdVerifier(drawingId, warnings);
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
-    warnings: warnings
-  }, children);
+  }, eyeComponent, nameComponent), errorId && /*#__PURE__*/React.createElement(PrecheckError, {
+    drawingId: drawingId,
+    errorId: errorId
+  }), isCustom && /*#__PURE__*/React.createElement(Menu, {
+    items: menuItems,
+    onVisibleChange: setIsMenuHovered
+  }));
 };
 
 const _excluded$1 = ["children"];
@@ -16248,7 +16859,7 @@ const SortableCont = reactSortableHoc.SortableContainer(_ref => {
 });
 const SortableItem = reactSortableHoc.SortableElement(({
   drawingId,
-  featureId,
+  featureRefId,
   isRollbackBar
 }) => {
   if (isRollbackBar) return /*#__PURE__*/React.createElement("div", {
@@ -16274,36 +16885,53 @@ const SortableItem = reactSortableHoc.SortableElement(({
     }
   }));else return /*#__PURE__*/React.createElement(Feature, {
     drawingId: drawingId,
-    featureId: featureId
+    featureRefId: featureRefId
   });
 });
 
 const Item$1 = ({
   drawingId,
-  featureId
+  featureRefId
 }) => {
   const curPartId = react.useDrawing(drawingId, d => d.structure.currentProduct || d.structure.root);
-  const featuresIds = useFeaturesIds(drawingId, curPartId);
+  const opSeqId = useOperationSequence(drawingId, curPartId);
+  const idx = react.useDrawing(drawingId, d => {
+    var _d$structure$tree, _d$structure$tree$chi;
+
+    return (_d$structure$tree = d.structure.tree[opSeqId || -1]) == null ? void 0 : (_d$structure$tree$chi = _d$structure$tree.children) == null ? void 0 : _d$structure$tree$chi.indexOf(featureRefId);
+  }) || -1;
+  const featureId = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$fea, _d$structure$tree$fea2;
+
+    return (_d$structure$tree$fea = d.structure.tree[featureRefId]) == null ? void 0 : (_d$structure$tree$fea2 = _d$structure$tree$fea.members) == null ? void 0 : _d$structure$tree$fea2.refObj.value;
+  });
   const objClass = react.useDrawing(drawingId, d => {
-    var _d$structure$tree$fea;
+    var _d$structure$tree$fea3;
 
-    return ((_d$structure$tree$fea = d.structure.tree[featureId]) == null ? void 0 : _d$structure$tree$fea.class) || '';
+    return ((_d$structure$tree$fea3 = d.structure.tree[featureId]) == null ? void 0 : _d$structure$tree$fea3.class) || '';
   });
-  const idx = featuresIds.findIndex(fId => fId === featureId);
+  const isFeatureActive = react.useDrawing(drawingId, d => d.plugin.active.feature !== null) || false;
   const isRollbackBar = objClass === classcad.CCClasses.CCRollbackBar;
+  const isDisabled = !isRollbackBar || isFeatureActive;
   return /*#__PURE__*/React.createElement(SortableItem, {
     drawingId: drawingId,
-    featureId: featureId,
+    featureRefId: featureRefId,
     isRollbackBar: isRollbackBar,
-    disabled: !isRollbackBar,
+    disabled: isDisabled,
     index: idx
   });
 };
 
 const List$2 = ({
-  featureIds,
   drawingId
 }) => {
+  const curPartId = react.useDrawing(drawingId, d => d.structure.currentProduct || d.structure.root);
+  const opSeqId = useOperationSequence(drawingId, curPartId);
+  const featureRefIds = react.useDrawing(drawingId, d => {
+    var _d$structure$tree2;
+
+    return (_d$structure$tree2 = d.structure.tree[opSeqId || -1]) == null ? void 0 : _d$structure$tree2.children;
+  }) || [];
   return /*#__PURE__*/React.createElement(SortableCont, {
     helperClass: "row-dragging",
     lockAxis: "y",
@@ -16311,11 +16939,8 @@ const List$2 = ({
       oldIndex,
       newIndex
     }) => {
-      var _object$features;
-
       const rootId_ = core.getDrawing(drawingId).structure.currentProduct;
-      const object = core.getDrawing(drawingId).structure.tree[rootId_];
-      const features = (_object$features = object == null ? void 0 : object.features) != null ? _object$features : [];
+      const features = getFeaturesIds(drawingId, rootId_);
       const offset = 4;
       const move = classcad.ccAPI.feature.rollback.calculateMovement(oldIndex, newIndex, features, offset);
 
@@ -16325,30 +16950,19 @@ const List$2 = ({
         classcad.ccAPI.feature.rollback.moveBefore(drawingId, move.featureId).catch();
       }
     }
-  }, featureIds.map(fId => /*#__PURE__*/React.createElement(Item$1, {
-    key: fId,
+  }, featureRefIds.map(refId => /*#__PURE__*/React.createElement(Item$1, {
+    key: refId,
     drawingId: drawingId,
-    featureId: fId
+    featureRefId: refId
   })));
 };
 
-const FeatureListImpl = ({
-  drawingId
-}) => {
-  const curPartId = react.useDrawing(drawingId, d => d.structure.currentProduct || d.structure.root);
-  const featuresIds = useFeaturesIds(drawingId, curPartId);
-  return /*#__PURE__*/React.createElement(List$2, {
-    drawingId: drawingId,
-    featureIds: featuresIds
-  });
-};
-
 const FeatureList = ({
   drawingId
 }) => {
   return /*#__PURE__*/React.createElement(FeatureListValidator, {
     drawingId: drawingId
-  }, /*#__PURE__*/React.createElement(FeatureListImpl, {
+  }, /*#__PURE__*/React.createElement(List$2, {
     drawingId: drawingId
   }));
 };
@@ -16374,35 +16988,6 @@ function useMenuItems$1(drawingId, objectId, setRename) {
   }, [drawingId, objectId, setRename]);
 }
 
-const Indent = () => {
-  return /*#__PURE__*/React.createElement("span", {
-    className: "ant-tree-indent"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ant-tree-indent-unit"
-  }));
-};
-const Indents = ({
-  level
-}) => {
-  const arr = Array.from(Array(level).keys());
-  return /*#__PURE__*/React.createElement(React.Fragment, null, arr.map(i => /*#__PURE__*/React.createElement(Indent, {
-    key: i
-  })));
-};
-const CollapseButton = ({
-  collapsed,
-  onClick
-}) => {
-  return /*#__PURE__*/React.createElement("span", {
-    className: "ant-tree-switcher",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "caret-down",
-    className: "anticon anticon-caret-down ant-tree-switcher-icon"
-  }, collapsed ? /*#__PURE__*/React.createElement(icons.CaretRightOutlined, null) : /*#__PURE__*/React.createElement(icons.CaretDownOutlined, null)));
-};
-
 function setProductsHidden(drawingId, prodId, hidden) {
   var _getDrawing$structure;
 
@@ -16451,6 +17036,7 @@ const NodeTitle = ({
   const referedObj = react.useDrawing(drawingId, d => d.structure.tree[referedId]);
   const name = referedObj.name;
   const [rename, setRename] = React.useState(false);
+  const [isMenuHovered, setIsMenuHovered] = React.useState(false);
   const menuItems = useMenuItems$1(drawingId, refId, setRename);
   const nameComponent = rename ? /*#__PURE__*/React.createElement(NameEdit, {
     drawingId: drawingId,
@@ -16463,11 +17049,14 @@ const NodeTitle = ({
     onClick: onClick,
     name: name
   }));
-  return /*#__PURE__*/React.createElement(HoveredDiv, null, /*#__PURE__*/React.createElement(antd.Space, null, /*#__PURE__*/React.createElement(EyeIcon, {
+  return /*#__PURE__*/React.createElement(HoveredDiv, {
+    hovered: isMenuHovered
+  }, /*#__PURE__*/React.createElement(antd.Space, null, /*#__PURE__*/React.createElement(EyeIcon, {
     drawingId: drawingId,
     refId: refId
   }), referedObj.class === classcad.CCClasses.CCAssembly ? /*#__PURE__*/React.createElement(icons.AppstoreOutlined, null) : /*#__PURE__*/React.createElement(icons.FileOutlined, null), nameComponent), /*#__PURE__*/React.createElement(Menu, {
-    items: menuItems
+    items: menuItems,
+    onVisibleChange: setIsMenuHovered
   }));
 };
 
@@ -16563,6 +17152,7 @@ const AssemblyTreeHeader = ({
   const currNode = useCurrentNode(drawingId);
   const objDetails = useObjectDetails(drawingId, (currNode == null ? void 0 : currNode.id) || -1);
   const showBackBtn = React.useMemo(() => pStackNotEmpty || !objDetails.isRoot && (objDetails.isAssemblyNode || objDetails.isAssembly), [objDetails.isAssembly, objDetails.isAssemblyNode, objDetails.isRoot, pStackNotEmpty]);
+  const isFeatureActive = react.useDrawing(drawingId, d => d.plugin.active.feature !== null) || false;
   const name = currProd ? currProd.name : currNode ? currNode.name : '';
   const [rename, setRename] = React.useState(false);
   const [showNameChoice, setShowNameChoice] = React.useState(false);
@@ -16593,6 +17183,19 @@ const AssemblyTreeHeader = ({
     title: 'Export node as ' + type,
     placement: "right"
   }, type))));
+  const exportComponent = isFeatureActive ? /*#__PURE__*/React.createElement(antd.Tooltip, {
+    title: "All features should be closed before exporting",
+    placement: "left"
+  }, /*#__PURE__*/React.createElement(antd.Button, {
+    icon: /*#__PURE__*/React.createElement(icons.ExportOutlined, null),
+    size: "small",
+    disabled: true
+  })) : /*#__PURE__*/React.createElement(antd.Dropdown, {
+    overlay: menu
+  }, /*#__PURE__*/React.createElement(antd.Button, {
+    icon: /*#__PURE__*/React.createElement(icons.ExportOutlined, null),
+    size: "small"
+  }));
   const nameComponent = rename ? /*#__PURE__*/React.createElement(NameEdit, {
     drawingId: drawingId,
     objId: (currProd == null ? void 0 : currProd.id) || -1,
@@ -16607,12 +17210,7 @@ const AssemblyTreeHeader = ({
     size: "small",
     icon: /*#__PURE__*/React.createElement(icons.LeftOutlined, null),
     onClick: () => api.assemblyTree.goBack(drawingId)
-  }), nameComponent), /*#__PURE__*/React.createElement(antd.Space, null, /*#__PURE__*/React.createElement(antd.Dropdown, {
-    overlay: menu
-  }, /*#__PURE__*/React.createElement(antd.Button, {
-    icon: /*#__PURE__*/React.createElement(icons.ExportOutlined, null),
-    size: "small"
-  })), mode === EditMode.Assembly && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(antd.Tooltip, {
+  }), nameComponent), /*#__PURE__*/React.createElement(antd.Space, null, exportComponent, mode === EditMode.Assembly && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(antd.Tooltip, {
     title: "Convert to subassembly"
   }, /*#__PURE__*/React.createElement(antd.Button, {
     onClick: () => setShowNameChoice(true),
@@ -16793,6 +17391,7 @@ const Entity = ({
   const isActive = react.useDrawing(drawingId, d => d.plugin.active.feature === constraintId);
   const hover = useComponentInteraction(drawingId, state => state.api);
   const [rename, setRename] = React.useState(false);
+  const [isMenuHovered, setIsMenuHovered] = React.useState(false);
   const menuItems = useMenuItems$2(drawingId, constraintId, isActive, setRename);
   const onNameClick = React.useCallback(() => {
     core.getDrawing(drawingId).api.plugin.setActiveFeature(constraintId);
@@ -16816,12 +17415,11 @@ const Entity = ({
     onMouseLeave: onMouseLeave
   });
   return /*#__PURE__*/React.createElement(HoveredDiv, {
-    style: {
-      borderBottom: '1px solid #f0f0f0',
-      padding: '4px 10px'
-    }
+    hovered: isMenuHovered,
+    bordered: true
   }, /*#__PURE__*/React.createElement(antd.Space, null, nameComponent), /*#__PURE__*/React.createElement(Menu, {
-    items: menuItems
+    items: menuItems,
+    onVisibleChange: setIsMenuHovered
   }));
 }; // TODO: Create external component
 
@@ -16955,7 +17553,8 @@ const ColorPicker = ({
     const geomApi = core.getDrawing(drawingId).api.geometry;
     geomApi.setConfig(solidId, {
       meshes: {
-        color: undefined
+        color: undefined,
+        opacity: undefined
       }
     });
     setShowPicker(false);
@@ -16965,7 +17564,8 @@ const ColorPicker = ({
     const geomApi = core.getDrawing(drawingId).api.geometry;
     geomApi.setConfig(solidId, {
       meshes: {
-        color: undefined
+        color: undefined,
+        opacity: undefined
       }
     });
     setUColor({
@@ -17071,12 +17671,11 @@ const Solid = ({
   }) || -1;
   const ccSolid = react.useDrawing(drawingId, d => d.structure.tree[solidOwner]);
   const [rename, setRename] = React.useState(false);
+  const [isMenuHovered, setIsMenuHovered] = React.useState(false);
   const menuItems = useMenuItems(setRename);
   return /*#__PURE__*/React.createElement(HoveredDiv, {
-    style: {
-      borderBottom: '1px solid #f0f0f0',
-      padding: '4px 10px'
-    }
+    hovered: isMenuHovered,
+    bordered: true
   }, /*#__PURE__*/React.createElement(antd.Space, null, /*#__PURE__*/React.createElement(EyeComponent, {
     drawingId: drawingId,
     solidId: solidId
@@ -17089,7 +17688,8 @@ const Solid = ({
     drawingId: drawingId,
     solidId: solidId
   }), /*#__PURE__*/React.createElement(Menu, {
-    items: menuItems
+    items: menuItems,
+    onVisibleChange: setIsMenuHovered
   })));
 }; // TODO: Create external component
 
@@ -17238,9 +17838,9 @@ const Spinner = styled.div`
   transform: translateZ(0);
 `;
 
-function ownKeys$3(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 ownKeys$5(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const LoadingWrapper = styled.div`
   position: absolute;
   display: flex;
@@ -17261,7 +17861,7 @@ const LoadingScreen = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    style: _objectSpread$3(_objectSpread$3({}, style), {}, {
+    style: _objectSpread$5(_objectSpread$5({}, style), {}, {
       position: 'relative'
     })
   }, isLoading && /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement("div", null, "Loading...")), children);
@@ -17405,9 +18005,9 @@ const useResize = (x, y, width, height, onResize) => {
 
 const _excluded = ["id", "modalState", "dispatch", "visible", "children", "title", "initialWidth", "initialHeight", "initialX", "initialY", "resizable", "minPosition", "maxPosition"];
 
-function ownKeys$2(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 ownKeys$4(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const modalStyle = {
   margin: 0,
   paddingBottom: 0,
@@ -17477,7 +18077,7 @@ function DraggableModalInnerNonMemo(_ref) {
     width,
     height
   } = modalState;
-  const style = React.useMemo(() => _objectSpread$2(_objectSpread$2({}, modalStyle), {}, {
+  const style = React.useMemo(() => _objectSpread$4(_objectSpread$4({}, modalStyle), {}, {
     top: y,
     left: x,
     height: resizable ? height : 'auto'
@@ -17487,14 +18087,14 @@ function DraggableModalInnerNonMemo(_ref) {
     type: 'focus',
     id
   }), [id, dispatch]);
-  const onDragWithID = React.useCallback(args => dispatch(_objectSpread$2(_objectSpread$2({
+  const onDragWithID = React.useCallback(args => dispatch(_objectSpread$4(_objectSpread$4({
     type: 'drag',
     id
   }, args), {}, {
     minPosition,
     maxPosition
   })), [dispatch, id, minPosition, maxPosition]);
-  const onResizeWithID = React.useCallback(args => dispatch(_objectSpread$2({
+  const onResizeWithID = React.useCallback(args => dispatch(_objectSpread$4({
     type: 'resize',
     id
   }, args)), [dispatch, id]);
@@ -17533,9 +18133,9 @@ const getWindowSize = () => ({
 
 const clamp = (min, max, value) => Math.max(min, Math.min(max, value));
 
-function ownKeys$1(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 ownKeys$3(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const mapObject = (o, f) => Object.assign({}, ...Object.keys(o).map(k => ({
   [k]: f(o[k])
@@ -17635,10 +18235,10 @@ const draggableModalReducer = (state, action) => {
   switch (action.type) {
     case 'resize':
       const size = clampResize(state.windowSize.width, state.windowSize.height, action.x, action.y, action.width, action.height);
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
         maxZIndex: getNextZIndex(state, action.id),
-        modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-          [action.id]: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, state.modals[action.id]), size), {}, {
+        modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+          [action.id]: _objectSpread$3(_objectSpread$3(_objectSpread$3({}, state.modals[action.id]), size), {}, {
             zIndex: getNextZIndex(state, action.id)
           })
         })
@@ -17646,10 +18246,10 @@ const draggableModalReducer = (state, action) => {
 
     case 'drag':
       const modal = state.modals[action.id];
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
         maxZIndex: getNextZIndex(state, action.id),
-        modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-          [action.id]: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, state.modals[action.id]), clampDrag(action.x, action.y, state.modals[action.id].width || 0, state.modals[action.id].height || 0, modal.maxPosition.x ? Math.min(modal.maxPosition.x, state.windowSize.width) : state.windowSize.width, modal.maxPosition.y ? Math.min(modal.maxPosition.y, state.windowSize.height) : state.windowSize.height, ((_action$minPosition = action.minPosition) == null ? void 0 : _action$minPosition.x) || 0, ((_action$minPosition2 = action.minPosition) == null ? void 0 : _action$minPosition2.y) || 0)), {}, {
+        modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+          [action.id]: _objectSpread$3(_objectSpread$3(_objectSpread$3({}, state.modals[action.id]), clampDrag(action.x, action.y, state.modals[action.id].width || 0, state.modals[action.id].height || 0, modal.maxPosition.x ? Math.min(modal.maxPosition.x, state.windowSize.width) : state.windowSize.width, modal.maxPosition.y ? Math.min(modal.maxPosition.y, state.windowSize.height) : state.windowSize.height, ((_action$minPosition = action.minPosition) == null ? void 0 : _action$minPosition.x) || 0, ((_action$minPosition2 = action.minPosition) == null ? void 0 : _action$minPosition2.y) || 0)), {}, {
             zIndex: getNextZIndex(state, action.id)
           })
         })
@@ -17669,10 +18269,10 @@ const draggableModalReducer = (state, action) => {
         //     modalState.height || 0,
         // )
 
-        return _objectSpread$1(_objectSpread$1({}, state), {}, {
+        return _objectSpread$3(_objectSpread$3({}, state), {}, {
           maxZIndex: state.maxZIndex + 1,
-          modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-            [action.id]: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, modalState_), position), {}, {
+          modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+            [action.id]: _objectSpread$3(_objectSpread$3(_objectSpread$3({}, modalState_), position), {}, {
               // ...size,
               zIndex: state.maxZIndex + 1,
               visible: true
@@ -17683,10 +18283,10 @@ const draggableModalReducer = (state, action) => {
 
     case 'focus':
       const modalState = state.modals[action.id];
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
         maxZIndex: state.maxZIndex + 1,
-        modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-          [action.id]: _objectSpread$1(_objectSpread$1({}, modalState), {}, {
+        modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+          [action.id]: _objectSpread$3(_objectSpread$3({}, modalState), {}, {
             zIndex: state.maxZIndex + 1
           })
         })
@@ -17695,9 +18295,9 @@ const draggableModalReducer = (state, action) => {
     case 'hide':
       {
         const modalState_ = state.modals[action.id];
-        return _objectSpread$1(_objectSpread$1({}, state), {}, {
-          modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-            [action.id]: _objectSpread$1(_objectSpread$1({}, modalState_), {}, {
+        return _objectSpread$3(_objectSpread$3({}, state), {}, {
+          modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+            [action.id]: _objectSpread$3(_objectSpread$3({}, modalState_), {}, {
               visible: false
             })
           })
@@ -17705,26 +18305,26 @@ const draggableModalReducer = (state, action) => {
       }
 
     case 'mount':
-      const initialState = getInitialModalState(_objectSpread$1({}, action.intialState));
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+      const initialState = getInitialModalState(_objectSpread$3({}, action.intialState));
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
         maxZIndex: state.maxZIndex + 1,
-        modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-          [action.id]: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, state.modals[action.id]), initialState), {}, {
+        modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+          [action.id]: _objectSpread$3(_objectSpread$3(_objectSpread$3({}, state.modals[action.id]), initialState), {}, {
             zIndex: state.maxZIndex + 1
           })
         })
       });
 
     case 'unmount':
-      const modalsClone = _objectSpread$1({}, state.modals);
+      const modalsClone = _objectSpread$3({}, state.modals);
 
       delete modalsClone[action.id];
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
         modals: modalsClone
       });
 
     case 'windowResize':
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
         windowSize: action.size,
         modals: mapObject(state.modals, modalState_ => {
           if (!modalState_.visible) {
@@ -17740,24 +18340,24 @@ const draggableModalReducer = (state, action) => {
           //     modalState.height || 0,
           // )
 
-          return _objectSpread$1(_objectSpread$1({}, modalState_), position);
+          return _objectSpread$3(_objectSpread$3({}, modalState_), position);
         })
       });
 
     case 'updateMinPosition':
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
-        modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-          [action.id]: _objectSpread$1(_objectSpread$1({}, state.modals[action.id]), {}, {
-            minPosition: _objectSpread$1(_objectSpread$1({}, state.modals[action.id].minPosition), action.value)
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+        modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+          [action.id]: _objectSpread$3(_objectSpread$3({}, state.modals[action.id]), {}, {
+            minPosition: _objectSpread$3(_objectSpread$3({}, state.modals[action.id].minPosition), action.value)
           })
         })
       });
 
     case 'updateMaxPosition':
-      return _objectSpread$1(_objectSpread$1({}, state), {}, {
-        modals: _objectSpread$1(_objectSpread$1({}, state.modals), {}, {
-          [action.id]: _objectSpread$1(_objectSpread$1({}, state.modals[action.id]), {}, {
-            maxPosition: _objectSpread$1(_objectSpread$1({}, state.modals[action.id].maxPosition), action.value)
+      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+        modals: _objectSpread$3(_objectSpread$3({}, state.modals), {}, {
+          [action.id]: _objectSpread$3(_objectSpread$3({}, state.modals[action.id]), {}, {
+            maxPosition: _objectSpread$3(_objectSpread$3({}, state.modals[action.id].maxPosition), action.value)
           })
         })
       });
@@ -17770,9 +18370,9 @@ const draggableModalReducer = (state, action) => {
 var css_248z = "/**\n * NOTE: This is not compiled.\n */\n\n.ant-design-draggable-modal {\n  pointer-events: none;\n  overflow: hidden !important;\n}\n\n.ant-design-draggable-modal .ant-modal {\n  display: flex;\n  max-width: none;\n  transform-origin: 50% 50% !important;\n}\n\n.ant-design-draggable-modal .ant-modal-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.ant-design-draggable-modal .ant-modal-header {\n  flex: 0;\n  padding: 0;\n}\n\n.ant-design-draggable-modal .ant-modal-footer {\n  flex: 0;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title {\n  cursor: move;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title::before {\n  content: '\\00a0';\n}\n\n.ant-design-draggable-modal .ant-modal-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal-resize-handle-inner {\n  width: 12px;\n  right: 14px;\n  border: 2px solid grey;\n  height: 12px;\n  bottom: 14px;\n  position: absolute;\n  border-top: 0;\n  border-left: 0;\n}\n\n.ant-design-draggable-modal-resize-handle {\n  right: -10px;\n  width: 44px;\n  bottom: -10px;\n  cursor: se-resize;\n  height: 44px;\n  position: absolute;\n}\n";
 styleInject(css_248z);
 
-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 ownKeys$2(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 _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const DraggableModal = props => {
   // Get the unique ID of this modal.
   const id = reactUid.useUID(); // Get modal provider.
@@ -17807,7 +18407,7 @@ const DraggableModal = props => {
     maxPosition
   } = props;
   React__namespace.useEffect(() => {
-    const value = _objectSpread({
+    const value = _objectSpread$2({
       x: null,
       y: null
     }, maxPosition);
@@ -17822,7 +18422,7 @@ const DraggableModal = props => {
     minPosition
   } = props;
   React__namespace.useEffect(() => {
-    const value = _objectSpread({
+    const value = _objectSpread$2({
       x: null,
       y: null
     }, minPosition);
@@ -17888,15 +18488,17 @@ const FPluginWindow = ({
 const FeaturePlugin = ({
   drawingId
 }) => {
-  const activeFeature = react.useDrawing(drawingId, d => d.plugin.active.feature);
+  const activeFeature = react.useDrawing(drawingId, d => d.plugin.active.feature); // Feature plugins are lazy loaded, so it's possible that recently activated feature plugins hasn't been created yet
+
+  const isCreated = react.usePluginExists(drawingId, activeFeature || -1);
   const name = react.useDrawing(drawingId, d => {
-    if (!activeFeature) return '';
+    if (!activeFeature || !isCreated) return '';
     const objId = d.plugin.refs[activeFeature].objectId;
     const plugin = d.structure.tree[objId];
     return (plugin == null ? void 0 : plugin.name) || '';
   });
   const pluginAPI = core.getDrawing(drawingId).api.plugin;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DraggableModalProvider, null, activeFeature && /*#__PURE__*/React.createElement(DraggableModal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DraggableModalProvider, null, activeFeature && isCreated && /*#__PURE__*/React.createElement(DraggableModal, {
     visible: true,
     cancelButtonProps: {
       hidden: true
@@ -18025,7 +18627,7 @@ const ViewPlugButtons = ({
   }));
 };
 
-const Icon = ({
+const Icon$1 = ({
   url
 }) => {
   return /*#__PURE__*/React.createElement("svg", {
@@ -18074,20 +18676,20 @@ const useOptionCommands = drawingId => {
   const commands = React.useMemo(() => {
     return [{
       label: 'Zoom fit',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$q
       }),
       command: () => zoomToFit(drawingId)
     }, {
       label: 'Meshes',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$p
       }),
       isChecked: showFaces,
       command: () => setShowFaces(!showFaces)
     }, {
       label: 'Wireframe',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$n
       }),
       isChecked: showWireframe,
@@ -18095,14 +18697,14 @@ const useOptionCommands = drawingId => {
       command: () => setShowWireframe(!showWireframe)
     }, {
       label: 'Edges',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$o
       }),
       isChecked: showEdges,
       command: () => setShowEdges(!showEdges)
     }, {
       label: 'Vertices',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$E
       }),
       isChecked: showVertices,
@@ -18198,136 +18800,136 @@ const PartModeCmds = (drawingId, rootId) => {
   return {
     Sketch: {
       label: 'Sketch',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$w
       }),
       callback: wrapper(() => classcad.ccAPI.sketcher.createSketch(drawingId, rootId))
     },
     Work: [{
       label: 'Workpoint',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$m
       }),
       callback: wrapper(() => featureApi.createWorkPoint(drawingId, rootId))
     }, {
       label: 'Workaxis',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$l
       }),
       callback: wrapper(() => featureApi.createWorkAxis(drawingId, rootId))
     }, {
       label: 'Workplane',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$k
       }),
       callback: wrapper(() => featureApi.createWorkPlane(drawingId, rootId))
     }, {
       label: 'WCsys',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$j
       }),
       callback: wrapper(() => featureApi.createWorkCoordSystem(drawingId, rootId))
     }],
     Solid: [{
       label: 'Extrusion',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$G
       }),
       callback: wrapper(() => featureApi.createExtrusion(drawingId, rootId))
     }, {
       label: 'Revolve',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$F
       }),
       callback: wrapper(() => featureApi.createRevolve(drawingId, rootId))
     }],
     Boolean: {
       label: 'Boolean',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$i
       }),
       callback: wrapper(() => featureApi.createBooleanOperation(drawingId, rootId))
     },
     Slice: {
       label: 'Slice',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$f
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCSlice, 'Slice'))
     },
     Edge: [{
       label: 'Fillet',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$h
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCConstantRadiusFillet, 'Fillet'))
     }, {
       label: 'Chamfer',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$g
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCChamfer, 'Chamfer'))
     }],
     Patterns: [{
       label: 'Linear pattern',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$e
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCLinearPattern, 'Linear pattern'))
     }, {
       label: 'Circular pattern',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$d
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCCircularPattern, 'Circular pattern'))
     }],
     Translation: [{
       label: 'Translation',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$c
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTranslation, 'Translate'))
     }, {
       label: 'Rotation',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$b
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCRotation, 'Rotate'))
     }, {
       label: 'Transformation by Csys',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$a
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTransformationByCSys, 'Transform by Csys'))
     }],
     BasicShapes: [{
       label: 'Add Box',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$n
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Box', 'Box'))
     }, {
       label: 'Add Sphere',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$9
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Sphere', 'Sphere'))
     }, {
       label: 'Add Cylinder',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$8
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Cylinder', 'Cylinder'))
     }, {
       label: 'Add Cone',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$7
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Cone', 'Cone'))
     }],
     Import: {
       label: 'Import',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$r
       }),
       callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCImport, 'Import'))
@@ -18382,49 +18984,49 @@ const AssemblyModeCmds = (drawingId, rootId) => {
   return {
     FastenedOrigin: {
       label: 'Add Fastened Origin',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$6
       }),
       callback: wrapper(addFastenedOrigin)
     },
     Fastened: {
       label: 'Add Fastened',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$5
       }),
       callback: wrapper(addFastened)
     },
     Slider: {
       label: 'Add Slider',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$4
       }),
       callback: wrapper(addSlider)
     },
     Revolute: {
       label: 'Add Revolute',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$3
       }),
       callback: wrapper(addRevolute)
     },
     Cylindrical: {
       label: 'Add Cylindrical',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$2
       }),
       callback: wrapper(addCylindrical)
     },
     Planar: {
       label: 'Add Planar',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img$1
       }),
       callback: wrapper(addPlanar)
     },
     Parallel: {
       label: 'Add Parallel',
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon$1, {
         url: img
       }),
       callback: wrapper(addParallel)
@@ -18672,6 +19274,245 @@ const HoveredConstraintDisplay = ({
   }))));
 };
 
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function createApi(set) {
+  return {
+    setMsg: (msgId, msg) => set(prev => _objectSpread$1(_objectSpread$1({}, prev), {}, {
+      msgs: _objectSpread$1(_objectSpread$1({}, prev.msgs), {}, {
+        [msgId]: msg
+      })
+    })),
+    deleteMsg: msgId => set(prev => {
+      const newMsgs = _objectSpread$1({}, prev.msgs);
+
+      delete newMsgs[msgId];
+      return _objectSpread$1(_objectSpread$1({}, prev), {}, {
+        msgs: newMsgs
+      });
+    }),
+    setShown: () => {
+      set(prev => {
+        const msgs = _objectSpread$1({}, prev.msgs);
+
+        Object.keys(msgs).forEach(msgId => {
+          msgs[msgId].isShown = true;
+        });
+        return _objectSpread$1(_objectSpread$1({}, prev), {}, {
+          msgs
+        });
+      });
+    }
+  };
+} // Buerli can store only single message in store.
+// But it will be convenient for the user to save all messages
+// and provide possibility to look through all messages came from the server.
+
+
+const useMsgStore = create((set, get) => ({
+  msgs: {},
+  api: createApi(set)
+}));
+
+function getBorderColor(msg) {
+  if (msg.isShown) return '#dddddd';
+  if (msg.type === 'success') return '#b7eb8f';
+  if (msg.type === 'error') return '#ffccc7';
+  if (msg.type === 'warning') return '#ffe58f';
+  if (msg.type === 'busy' || msg.type === 'info') return '#91d5ff';
+  return '#91d5ff';
+}
+
+function getBackGrColor(msg) {
+  if (msg.isShown) return '#ffffff';
+  if (msg.type === 'success') return '#f6ffed';
+  if (msg.type === 'error') return '#fff2f0';
+  if (msg.type === 'warning') return '#fffbe6';
+  if (msg.type === 'busy' || msg.type === 'info') return '#e6f7ff';
+  return '#e6f7ff';
+}
+
+const MessageWrapper = styled.div`
+  border: 1px solid ${props => getBorderColor(props.msg)};
+  background-color: ${props => getBackGrColor(props.msg)};
+  padding: 8px 15px;
+  margin-bottom: 4px;
+`;
+const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const MessageText = styled.div`
+  flex-grow: 1;
+  overflow: auto;
+  overflow-wrap: break-word;
+  max-height: 300px;
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-clip: padding-box;
+    background-color: #d7d7d7;
+    border: 3px solid rgba(0, 0, 0, 0); // Invisible boreder to emulate margin
+  }
+`;
+const iconStyle = {
+  marginRight: '8px'
+};
+const CloseButton = styled.button`
+  margin-left: 8px;
+  padding: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 12px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+`;
+const Time = styled.div`
+  font-size: 0.7rem;
+  color: #adadad;
+  margin-left: 20px;
+`;
+
+function getTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false
+  });
+}
+
+const Icon = ({
+  type
+}) => {
+  if (type === 'success') return /*#__PURE__*/React.createElement(icons.CheckCircleTwoTone, {
+    twoToneColor: "#52c41a",
+    style: iconStyle
+  });
+  if (type === 'error') return /*#__PURE__*/React.createElement(icons.CloseCircleTwoTone, {
+    twoToneColor: "#ff4d4f",
+    style: iconStyle
+  });
+  if (type === 'warning') return /*#__PURE__*/React.createElement(icons.ExclamationCircleTwoTone, {
+    twoToneColor: "#faad14",
+    style: iconStyle
+  });
+  if (type === 'busy' || type === 'info') return /*#__PURE__*/React.createElement(icons.InfoCircleTwoTone, {
+    twoToneColor: "#1890ff",
+    style: iconStyle
+  });
+  return null;
+};
+
+const Message = ({
+  msgId
+}) => {
+  const msg = useMsgStore(s => s.msgs[msgId]) || {};
+  const msgApi = useMsgStore(s => s.api);
+  const type = msg.type === 'busy' ? 'info' : msg.type;
+  return /*#__PURE__*/React.createElement(MessageWrapper, {
+    msg: msg
+  }, /*#__PURE__*/React.createElement(FlexContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    type: type
+  }), /*#__PURE__*/React.createElement(MessageText, null, `${msg.title} ${msg.text}`), /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: () => msgApi.deleteMsg(msgId)
+  }, /*#__PURE__*/React.createElement(icons.CloseOutlined, null))), /*#__PURE__*/React.createElement(Time, null, getTime(msg.timestamp)));
+};
+
+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; }
+const MsgListWrapper = styled.div`
+  max-height: 500px;
+  max-width: 400px;
+  min-width: 300px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-clip: padding-box;
+    background-color: #cfcfcf;
+    border: 3px solid rgba(0, 0, 0, 0); // Invisible boreder to emulate margin
+  }
+  z-index: ${blankZIndex + 1};
+`;
+const MessageList = ({
+  drawingId
+}) => {
+  const msgsIds = useMsgStore(s => {
+    // Return array of messages with fresh messages in the beginning
+    return Object.keys(s.msgs).sort((id1, id2) => s.msgs[id2].timestamp - s.msgs[id1].timestamp);
+  });
+  const msgsApi = useMsgStore(s => s.api); // Set isShow = true for all messages in store on unmount
+
+  React.useEffect(() => {
+    return () => msgsApi.setShown();
+  }, [msgsApi]);
+  return /*#__PURE__*/React.createElement(MsgListWrapper, null, msgsIds.map(msgId => /*#__PURE__*/React.createElement(Message, {
+    msgId: msgId,
+    key: msgId
+  })));
+};
+const Messages = ({
+  drawingId
+}) => {
+  const [showList, setShowList] = React.useState(false);
+  const [showBadge, setShowBadge] = React.useState(false);
+  const timestamp = react.useBuerli(state => state.message.timestamp);
+  const msg = react.useBuerli(state => state.message.data);
+  const msgsApi = useMsgStore(s => s.api);
+  const msgsLen = useMsgStore(s => Object.keys(s.msgs).length);
+  React.useEffect(() => setShowBadge(true), [timestamp]); // Add recent message to msgs store
+
+  React.useEffect(() => {
+    if (timestamp && msg && (msg.text || msg.title)) {
+      msgsApi.setMsg(msg.id, _objectSpread(_objectSpread({}, msg), {}, {
+        timestamp,
+        isShown: false
+      }));
+    }
+  }, [timestamp, msg, msgsApi]); // Hide list when there is no cached messages
+
+  React.useEffect(() => {
+    if (msgsLen === 0) setShowList(false);
+  }, [msgsLen]);
+  const onClick = React.useCallback(() => {
+    if (showList) {
+      getCADState().api.blankDiv.hide();
+    } else {
+      getCADState().api.blankDiv.show(() => setShowList(false));
+    }
+
+    setShowList(s => !s);
+    setShowBadge(false);
+  }, [showList]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-end'
+    }
+  }, showList && /*#__PURE__*/React.createElement(MessageList, {
+    drawingId: drawingId
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Messages"
+  }, /*#__PURE__*/React.createElement(antd.Badge, {
+    dot: showBadge
+  }, /*#__PURE__*/React.createElement(antd.Button, {
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(icons.UnorderedListOutlined, null),
+    onClick: onClick
+  }))));
+};
+
 const EditDrawing = ({
   drawingId
 }) => {
@@ -18702,7 +19543,7 @@ const EditDrawing = ({
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      flex: '1',
+      flexGrow: 1,
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -18810,7 +19651,15 @@ const Drawing = ({
     }
   }), /*#__PURE__*/React.createElement(EditDrawing, {
     drawingId: drawingId
-  })));
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: '4px',
+      right: '4px'
+    }
+  }, /*#__PURE__*/React.createElement(Messages, {
+    drawingId: drawingId
+  })), /*#__PURE__*/React.createElement(BlankDiv, null)));
 };
 
 const CAD = ({