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

package/build/index.js

@@ -1,12 +1,15 @@
-import { useDrawing, CameraHelper, useBuerli, usePlugin, useCamera, useEmbeddedPlugin, useGeometryInteraction, GlobalTransform, getCamera, Product, useFeaturePluginDef, usePluginExists, Canvas, Viewcube } from '@buerli.io/react';
+import { useDrawing, CameraHelper, useBuerli, getCamera, usePlugin, useCamera, useEmbeddedPlugin, useGeometryInteraction, GlobalTransform, Product, useFeaturePluginDef, usePluginExists, Canvas, Viewcube } from '@buerli.io/react';
 import * as React from 'react';
 import React__default, { useMemo, useRef, useCallback, useState, useEffect, memo, useContext, useReducer } from 'react';
-import { getDrawing, createGraphicItem, GraphicType, MemberType, MathUtils, getPlugin, NOID, BuerliScope, Measure, MeasureResultType, api } from '@buerli.io/core';
+import { getDrawing, createGraphicItem, GraphicType, MemberType, MathUtils, api, getPlugin, NOID, BuerliScope, Measure, MeasureResultType } from '@buerli.io/core';
 import { CCClasses, ccAPI, ReorientedType, FlipType, BooleanOperationType, ExtrusionType, ChamferType, WorkAxisType, WorkPlaneType, WorkPointType, WorkCoordSystemType, DataType } from '@buerli.io/classcad';
 import * as THREE from 'three';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useFrame, useThree, createPortal, extend } from '@react-three/fiber';
-import { Html, Merged } from '@react-three/drei';
+import { Html, useCursor, Merged } from '@react-three/drei';
+import create from 'zustand';
+import vanilla from 'zustand/vanilla';
+import 'antd/dist/antd.css';
 import { ArrowUpOutlined, CheckOutlined, CaretRightOutlined, CaretDownOutlined, EditOutlined, DeleteOutlined, PlusOutlined, SelectOutlined, PlusSquareOutlined, ExportOutlined, CloseOutlined, EyeFilled, EyeOutlined, ExclamationCircleTwoTone, AppstoreOutlined, FileOutlined, LeftOutlined, AppstoreAddOutlined, CheckCircleTwoTone, CloseCircleTwoTone, ExpandAltOutlined, CodeSandboxOutlined, FontSizeOutlined, DownOutlined, InfoCircleTwoTone, UnorderedListOutlined } from '@ant-design/icons';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import Switch from 'antd/lib/switch';
@@ -17,14 +20,11 @@ import Tooltip from 'antd/lib/tooltip';
 import RadioGroupImpl from 'antd/lib/radio/group';
 import RadioButtonImpl from 'antd/lib/radio/radioButton';
 import { Menu as Menu$1, Dropdown, Input, Typography, Space, Table, Tabs, Divider as Divider$1, Button, Tooltip as Tooltip$1, Modal, Badge } from 'antd';
-import 'antd/dist/antd.css';
 import guid from 'uuid';
 import shallow from 'zustand/shallow';
 import { Geometry } from 'three-stdlib';
 import SelectImpl from 'antd/lib/select';
 import { basename, extname } from 'path';
-import create from 'zustand';
-import vanilla from 'zustand/vanilla';
 import { useUID } from 'react-uid';
 import * as deepmerge from 'deepmerge';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
@@ -878,6 +878,133 @@ const isAngular = dim => {
   return dim.class === CCClasses.CCAngularDimension || dim.class === CCClasses.CCAngularFeatureDimension || dim.class === CCClasses.CCAngularRefDimension;
 };
 
+const zoomToFit = drawingId => {
+  var _getCamera;
+
+  const drawing = getDrawing(drawingId);
+  const camApi = (_getCamera = 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 = api.getState().drawing.refs[drawingId].structure.currentNode;
+        res = state.assemblyTree.prodStack;
+        curNode && res.push(curNode);
+        return _objectSpread$k(_objectSpread$k({}, state), {}, {
+          assemblyTree: {
+            prodStack: [...res]
+          }
+        });
+      });
+      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]
+          }
+        });
+      });
+      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__default.useCallback(() => {
+    const cadState = getCADState();
+    cadState.blankDiv.onClose && cadState.blankDiv.onClose();
+    cadState.api.blankDiv.hide();
+  }, []);
+  return isActive ? /*#__PURE__*/React__default.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;
@@ -901,7 +1028,7 @@ const TextValue = ({
       backgroundColor: backgroundColor ? `#${backgroundColor.toString(16)}` : undefined,
       color: `#${mainColor.toString(16)}`,
       fontSize: '17px',
-      cursor: 'pointer'
+      cursor: 'text'
     }
   }, value)));
 };
@@ -938,6 +1065,12 @@ const DimValue = ({
     return expr ? expr + ' (' + value.toFixed(2) + ')' : value.toFixed(2);
   }, [master, dimension, memberName]);
   const [editMode, setEditMode] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (editMode) {
+      getCADState().api.blankDiv.show(() => setEditMode(false));
+      return () => getCADState().api.blankDiv.hide();
+    }
+  }, [editMode, setEditMode]);
   const update = React__default.useCallback(() => {
     const master_ = getDrawing(drawingId).structure.tree[masterId];
 
@@ -980,7 +1113,7 @@ const DimValue = ({
   return /*#__PURE__*/React__default.createElement("group", {
     position: position
   }, /*#__PURE__*/React__default.createElement(Html, {
-    zIndexRange: [0, 0],
+    zIndexRange: [blankZIndex + 1, blankZIndex + 1],
     style: {
       marginTop: '22px'
     },
@@ -995,7 +1128,7 @@ const DimValue = ({
       backgroundColor: backgroundColor ? `#${backgroundColor.toString(16)}` : undefined,
       color: `#${mainColor.toString(16)}`,
       fontSize: '17px',
-      cursor: 'pointer'
+      cursor: 'text'
     }
   }, caption) : /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1094,6 +1227,8 @@ const PositionHandler = ({
     camera
   } = useThree();
   const ref = useScale$1(position, sf => [hRadius$1 * sf, hRadius$1 * sf, hRadius$1 * sf]);
+  const [isHovered, setIsHovered] = React__default.useState(false);
+  useCursor(isHovered, 'move');
   const onPointerDown = React__default.useCallback(e => {
     if (e.buttons !== 1) // Continue only if 'primary' mouse button is pressed
       return;
@@ -1133,6 +1268,10 @@ const PositionHandler = ({
     te.target.releasePointerCapture(te.pointerId);
     te.stopPropagation();
   }, [dimId, drawingId, position, setPState]);
+  const onPointerOver = React__default.useCallback(e => {
+    setIsHovered(true);
+    e.stopPropagation();
+  }, []);
   const onPointerMove = React__default.useCallback(e => {
     if (isPressed.current) {
       isDragged.current = true;
@@ -1142,12 +1281,18 @@ const PositionHandler = ({
 
     e.stopPropagation();
   }, [setPosition, globalToLocalM, camera]);
+  const onPointerOut = React__default.useCallback(e => {
+    setIsHovered(false);
+    e.stopPropagation();
+  }, []);
   return /*#__PURE__*/React__default.createElement("mesh", {
     ref: ref,
     position: position,
     onPointerDown: onPointerDown,
     onPointerMove: onPointerMove,
-    onPointerUp: onPointerUp
+    onPointerUp: onPointerUp,
+    onPointerOver: onPointerOver,
+    onPointerOut: onPointerOut
   }, /*#__PURE__*/React__default.createElement("sphereGeometry", {
     args: [1.5, 16, 16]
   }), /*#__PURE__*/React__default.createElement("meshBasicMaterial", {
@@ -1941,9 +2086,9 @@ var index$w = /*#__PURE__*/Object.freeze({
   useDimensionSetId: useDimensionSetId
 });
 
-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$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$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$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: {
@@ -2046,7 +2191,7 @@ function useMateSelection(drawingId, matePath, csysId) {
   }));
   const handlers = React__default.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$k(_objectSpread$k({}, hHandlers), sHandlers);
+      return _objectSpread$j(_objectSpread$j({}, hHandlers), sHandlers);
     }
 
     return {};
@@ -2062,9 +2207,9 @@ function useMateSelection(drawingId, matePath, csysId) {
   }, [isHovered, isSelected, isSelectable, handlers]);
 }
 
-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$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$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$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: {
@@ -2193,7 +2338,7 @@ function useTreeObjSelection(drawingId, objId) {
   const isSelected = useIsSelected(drawingId, objId);
   const handlers = React__default.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$j(_objectSpread$j({}, hHandlers), sHandlers);
+      return _objectSpread$i(_objectSpread$i({}, hHandlers), sHandlers);
     }
 
     return {};
@@ -5716,9 +5861,9 @@ function getSketchState(drawingId, pluginId) {
   return plugin.state;
 }
 
-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$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$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$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
@@ -5768,8 +5913,8 @@ function CreateAngle(drawingId, pluginId) {
     set(state_ => {
       const tmpAngularDimension = state_.tmpObjects[tmpDimensionId];
       return {
-        tmpObjects: _objectSpread$i(_objectSpread$i({}, state_.tmpObjects), {}, {
-          [tmpDimensionId]: _objectSpread$i(_objectSpread$i({}, tmpAngularDimension), params)
+        tmpObjects: _objectSpread$h(_objectSpread$h({}, state_.tmpObjects), {}, {
+          [tmpDimensionId]: _objectSpread$h(_objectSpread$h({}, tmpAngularDimension), params)
         })
       };
     });
@@ -5816,7 +5961,7 @@ function CreateAngle(drawingId, pluginId) {
     const center = linesInfo.center;
     const dimPos = center.clone().addScaledVector(dir0.clone().add(dir1).normalize(), 10);
 
-    const tmpAngularDimension = _objectSpread$i(_objectSpread$i({
+    const tmpAngularDimension = _objectSpread$h(_objectSpread$h({
       class: CCClasses.CCAngularDimension,
       id: tmpDimensionId
     }, linesInfo), {}, {
@@ -5896,9 +6041,9 @@ function CreateAngle(drawingId, pluginId) {
   };
 }
 
-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$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$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$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 {
@@ -5932,7 +6077,7 @@ const hover = (drawingId, pluginId, hoveredId) => {
       return {
         hovered: hoveredId,
         highlighted: [hoveredId, ...linkedConstraints],
-        constraintsToGeometry: _objectSpread$h(_objectSpread$h({}, state_.constraintsToGeometry), constraintsToGeometry)
+        constraintsToGeometry: _objectSpread$g(_objectSpread$g({}, state_.constraintsToGeometry), constraintsToGeometry)
       };
     });
   }
@@ -6113,9 +6258,9 @@ const snapDraggedPoints = (diff, drawingId) => {
   return snapResult;
 };
 
-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$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$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$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;
 
@@ -6389,7 +6534,7 @@ function Drag(drawingId, pluginId) {
     name: HandlersList.DRAG,
     filter,
     onDestruct: destructor,
-    pointerHandlers: _objectSpread$g({
+    pointerHandlers: _objectSpread$f({
       onPointerDown,
       onPointerUp,
       onPointerMove
@@ -6401,9 +6546,9 @@ function Drag(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$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$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 _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 +6617,8 @@ function DrawPoint(drawingId, pluginId) {
     set(state => {
       const tmpPoint = state.tmpObjects[tmpPointId];
       return {
-        tmpObjects: _objectSpread$f(_objectSpread$f({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$f(_objectSpread$f({}, tmpPoint), {}, {
+        tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$e(_objectSpread$e({}, tmpPoint), {}, {
             position: mousePos
           })
         })
@@ -6495,9 +6640,9 @@ function DrawPoint(drawingId, pluginId) {
   };
 }
 
-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$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$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$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 +6728,7 @@ function DrawLine(drawingId, pluginId) {
           endPId: tmpEndP.id
         };
         return {
-          tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
             [tmpStartP.id]: tmpStartP,
             [tmpLine.id]: tmpLine
           })
@@ -6621,8 +6766,8 @@ function DrawLine(drawingId, pluginId) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         const tmpEndP = state.tmpObjects[tmpEndPId];
         return {
-          tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$e(_objectSpread$e({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$d(_objectSpread$d({}, tmpStartP), {}, {
               position: tmpEndP.position.clone()
             })
           })
@@ -6644,8 +6789,8 @@ function DrawLine(drawingId, pluginId) {
     set(state => {
       const tmpEndP = state.tmpObjects[tmpEndPId];
       return {
-        tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
-          [tmpEndPId]: _objectSpread$e(_objectSpread$e({}, tmpEndP), {}, {
+        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpEndPId]: _objectSpread$d(_objectSpread$d({}, tmpEndP), {}, {
             position: mousePos
           })
         })
@@ -6670,9 +6815,9 @@ function DrawLine(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$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$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$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 +6873,7 @@ function DrawRectangle(drawingId, pluginId) {
       set(state => {
         const tmpPoint11 = state.tmpObjects[tmpPoint11Id];
 
-        const tmpPoint00 = _objectSpread$d(_objectSpread$d({}, state.tmpObjects[tmpPoint00Id]), {}, {
+        const tmpPoint00 = _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpPoint00Id]), {}, {
           position: tmpPoint11.position.clone()
         });
 
@@ -6796,7 +6941,7 @@ function DrawRectangle(drawingId, pluginId) {
           endPId: tmpPoint11.id
         };
         return {
-          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
             [tmpPoint00.id]: tmpPoint00,
             [tmpPoint01.id]: tmpPoint01,
             [tmpPoint10.id]: tmpPoint10,
@@ -6824,7 +6969,7 @@ function DrawRectangle(drawingId, pluginId) {
         const tmpPoint11 = state.tmpObjects[tmpPoint11Id];
         return {
           tmpObjects: {
-            [tmpPoint00Id]: _objectSpread$d(_objectSpread$d({}, tmpPoint00), {}, {
+            [tmpPoint00Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint00), {}, {
               position: tmpPoint11.position.clone()
             })
           }
@@ -6848,8 +6993,8 @@ function DrawRectangle(drawingId, pluginId) {
       if (additionIndex === 0) {
         const tmpPoint00 = state.tmpObjects[tmpPoint00Id];
         return {
-          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
-            [tmpPoint00Id]: _objectSpread$d(_objectSpread$d({}, tmpPoint00), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpPoint00Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint00), {}, {
               position: snappedPos
             })
           })
@@ -6860,14 +7005,14 @@ function DrawRectangle(drawingId, pluginId) {
         const tmpPoint10 = state.tmpObjects[tmpPoint10Id];
         const tmpPoint11 = state.tmpObjects[tmpPoint11Id];
         return {
-          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
-            [tmpPoint01Id]: _objectSpread$d(_objectSpread$d({}, tmpPoint01), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpPoint01Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint01), {}, {
               position: new THREE.Vector3(startPos.x, snappedPos.y, startPos.z)
             }),
-            [tmpPoint10Id]: _objectSpread$d(_objectSpread$d({}, tmpPoint10), {}, {
+            [tmpPoint10Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint10), {}, {
               position: new THREE.Vector3(snappedPos.x, startPos.y, startPos.z)
             }),
-            [tmpPoint11Id]: _objectSpread$d(_objectSpread$d({}, tmpPoint11), {}, {
+            [tmpPoint11Id]: _objectSpread$c(_objectSpread$c({}, tmpPoint11), {}, {
               position: new THREE.Vector3(snappedPos.x, snappedPos.y, startPos.z)
             })
           })
@@ -7034,9 +7179,9 @@ const Circle = ({
   }), /*#__PURE__*/React__default.createElement("meshBasicMaterial", materialProps));
 };
 
-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$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$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$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 {
@@ -7092,7 +7237,7 @@ function DrawArc(drawingId, pluginId, arcType) {
       additionIndex = 0;
       lastAddedEndPointId = UNDEFINEDID;
       set(state => {
-        const tmpStartP = _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpStartPId]), {}, {
+        const tmpStartP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpStartPId]), {}, {
           position: lastMousePos.clone()
         });
 
@@ -7107,24 +7252,24 @@ function DrawArc(drawingId, pluginId, arcType) {
       set(state => {
         const tmpStartP = state.tmpObjects[tmpStartPId];
 
-        const tmpEndP = _objectSpread$c(_objectSpread$c({}, 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$c(_objectSpread$c({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: centerPos ? centerPos : lastMousePos.clone()
         });
 
-        const tmpArc = _objectSpread$c(_objectSpread$c({}, 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$c(_objectSpread$c({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -7245,7 +7390,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -7274,7 +7419,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
           })
@@ -7332,11 +7477,11 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpEndP = state.tmpObjects[tmpEndPId];
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$c(_objectSpread$c({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$b(_objectSpread$b({}, tmpStartP), {}, {
               position: tmpEndP.position.clone()
             }),
-            [tmpCenterPId]: _objectSpread$c(_objectSpread$c({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: tmpEndP.position.clone()
             })
           })
@@ -7360,8 +7505,8 @@ function DrawArc(drawingId, pluginId, arcType) {
       if (additionIndex === 0) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$c(_objectSpread$c({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$b(_objectSpread$b({}, tmpStartP), {}, {
               position: lastMousePos.clone()
             })
           })
@@ -7373,14 +7518,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$c(_objectSpread$c({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$b(_objectSpread$b({}, tmpEndP), {}, {
               position: lastMousePos.clone()
             }),
-            [tmpCenterPId]: _objectSpread$c(_objectSpread$c({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$c(_objectSpread$c({}, 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
@@ -7394,14 +7539,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         const centerPos = calculateCenterPoint(tmpStartP.position, tmpEndP.position, lastMousePos);
         return {
-          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$c(_objectSpread$c({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$b(_objectSpread$b({}, tmpEndP), {}, {
               position: arcType === HandlersList.DRAWARCTANGENT ? lastMousePos.clone() : tmpEndP.position
             }),
-            [tmpCenterPId]: _objectSpread$c(_objectSpread$c({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$c(_objectSpread$c({}, 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)
@@ -7429,9 +7574,9 @@ function DrawArc(drawingId, pluginId, arcType) {
   };
 }
 
-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$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$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$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
@@ -7478,7 +7623,7 @@ function DrawCircle(drawingId, pluginId) {
     } else {
       additionIndex = 0;
       set(state => {
-        const tmpCenterP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: lastMousePos.clone()
         });
 
@@ -7512,7 +7657,7 @@ function DrawCircle(drawingId, pluginId) {
           radius: 0.001
         };
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpCircle.id]: tmpCircle
           })
@@ -7533,7 +7678,7 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
           tmpObjects: {
-            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
               position: e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId))
             })
           }
@@ -7557,8 +7702,8 @@ function DrawCircle(drawingId, pluginId) {
       if (additionIndex === 0) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
+          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
               position: snappedPos || localPos
             })
           })
@@ -7567,8 +7712,8 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         const tmpCircle = state.tmpObjects[tmpCircleId];
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpCircleId]: _objectSpread$b(_objectSpread$b({}, tmpCircle), {}, {
+          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+            [tmpCircleId]: _objectSpread$a(_objectSpread$a({}, tmpCircle), {}, {
               radius: Math.max(tmpCenterP.position.distanceTo(localPos), 0.001)
             })
           })
@@ -8066,9 +8211,9 @@ function recognizeFilletByArc(object, tree, sketchId) {
   };
 }
 
-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$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$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$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 = getDrawing(drawingId).api;
   const plugin = getPlugin(drawingId, pluginId);
@@ -8217,7 +8362,7 @@ function Fillet(drawingId, pluginId) {
         return;
       }
 
-      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$a(_objectSpread$a({}, data.params), {}, {
+      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({
@@ -9478,9 +9623,9 @@ const Point = ({
   }));
 };
 
-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$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$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$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.
@@ -9526,7 +9671,7 @@ const CCLine = props => {
     start: start,
     end: end,
     scalePlus: isHovered || isSelected,
-    meshProps: _objectSpread$9(_objectSpread$9({
+    meshProps: _objectSpread$8(_objectSpread$8({
       renderOrder
     }, handlers), {}, {
       userData
@@ -9575,7 +9720,7 @@ const CCPoint = props => {
     // 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$9(_objectSpread$9({
+    meshProps: _objectSpread$8(_objectSpread$8({
       renderOrder
     }, handlers), {}, {
       userData
@@ -9626,7 +9771,7 @@ const CCArc = props => {
     end: endPoint,
     center: centerPoint,
     clockwise: clockwise,
-    meshProps: _objectSpread$9({
+    meshProps: _objectSpread$8({
       renderOrder,
       userData
     }, handlers),
@@ -9683,7 +9828,7 @@ const CCCircle = props => {
     radius: radius,
     scale: scale,
     width: arcWidth + hoverZone,
-    meshProps: _objectSpread$9(_objectSpread$9({}, handlers), {}, {
+    meshProps: _objectSpread$8(_objectSpread$8({}, handlers), {}, {
       renderOrder,
       userData
     }),
@@ -10136,7 +10281,8 @@ 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 = useDrawing(drawingId, d => {
@@ -10826,11 +10972,20 @@ const NameEdit = ({
   React__default.useEffect(() => {
     var _ref$current;
 
+    getCADState().api.blankDiv.show(() => setEditName(false));
     (_ref$current = ref.current) == null ? void 0 : _ref$current.focus({
       cursor: 'all'
-    });
-  }, []);
+    }); // Deactivate BlankDiv on dismount
+
+    return () => getCADState().api.blankDiv.hide();
+  }, [setEditName]); // When BlankDiv is active, increase zIndex so this element would overlap it
+
+  const showBlankDiv = useCADStore(s => s.blankDiv.isActive);
+  const zIndex = showBlankDiv ? blankZIndex + 1 : 0;
   return /*#__PURE__*/React__default.createElement(Input, {
+    style: {
+      zIndex
+    },
     ref: ref,
     onPressEnter: onEnter,
     defaultValue: name,
@@ -12138,9 +12293,9 @@ var index$c = /*#__PURE__*/Object.freeze({
   description: description$c
 });
 
-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$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$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$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,
@@ -12201,7 +12356,7 @@ const CSysEditor = ({
   const [z, setZ] = React__default.useState(() => userValue[csysRow].z);
   React__default.useEffect(() => {
     setUserValue(val => {
-      const newVal = [_objectSpread$8({}, val[0]), _objectSpread$8({}, val[1]), _objectSpread$8({}, val[2]), _objectSpread$8({}, val[3])];
+      const newVal = [_objectSpread$7({}, val[0]), _objectSpread$7({}, val[1]), _objectSpread$7({}, val[2]), _objectSpread$7({}, val[3])];
       newVal[csysRow] = {
         x,
         y,
@@ -15695,90 +15850,6 @@ const FileUtils = {
   }
 };
 
-const zoomToFit = drawingId => {
-  var _getCamera;
-
-  const drawing = getDrawing(drawingId);
-  const camApi = (_getCamera = 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$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$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 appApi = (set, get) => ({
-  assemblyTree: {
-    startProdEditing: (drawingId, objId) => {
-      set(state => {
-        let res = [];
-        const curNode = api.getState().drawing.refs[drawingId].structure.currentNode;
-        res = state.assemblyTree.prodStack;
-        curNode && res.push(curNode);
-        return _objectSpread$7(_objectSpread$7({}, state), {}, {
-          assemblyTree: {
-            prodStack: [...res]
-          }
-        });
-      });
-      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$7(_objectSpread$7({}, state), {}, {
-          assemblyTree: {
-            prodStack: [...res]
-          }
-        });
-      });
-      ccAPI.assemblyBuilder.setCurrentNode(drawingId, prevProd).then(() => zoomToFit(drawingId)).catch();
-    },
-    clearProdStack: () => {
-      set(state => _objectSpread$7(_objectSpread$7({}, state), {}, {
-        assemblyTree: {
-          prodStack: []
-        }
-      }));
-    }
-  }
-});
-
-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 = useDrawing(drawingId, d => d.structure.currentProduct === prodId);
   const isAssembly = useDrawing(drawingId, d => d.structure.tree[prodId].class === CCClasses.CCAssembly);
@@ -19219,23 +19290,6 @@ const useMsgStore = create((set, get) => ({
   api: createApi(set)
 }));
 
-const blankZIndex = 1000;
-const BlankDiv = ({
-  onClick
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    onClick: onClick,
-    style: {
-      zIndex: blankZIndex,
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    }
-  });
-};
-
 function getBorderColor(msg) {
   if (msg.isShown) return '#dddddd';
   if (msg.type === 'success') return '#b7eb8f';
@@ -19405,20 +19459,24 @@ const Messages = ({
     if (msgsLen === 0) setShowList(false);
   }, [msgsLen]);
   const onClick = React__default.useCallback(() => {
+    if (showList) {
+      getCADState().api.blankDiv.hide();
+    } else {
+      getCADState().api.blankDiv.show(() => setShowList(false));
+    }
+
     setShowList(s => !s);
     setShowBadge(false);
-  }, []);
+  }, [showList]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'flex-end'
     }
-  }, showList && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
+  }, showList && /*#__PURE__*/React__default.createElement(MessageList, {
     drawingId: drawingId
-  }), /*#__PURE__*/React__default.createElement(BlankDiv, {
-    onClick: () => setShowList(false)
-  })), /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Messages"
   }, /*#__PURE__*/React__default.createElement(Badge, {
     dot: showBadge
@@ -19575,7 +19633,7 @@ const Drawing = ({
     }
   }, /*#__PURE__*/React__default.createElement(Messages, {
     drawingId: drawingId
-  }))));
+  })), /*#__PURE__*/React__default.createElement(BlankDiv, null)));
 };
 
 const CAD = ({