@buerli.io/react-cad 0.13.0 → 0.13.1-beta.3

package/build/index.cjs.js

@@ -11,11 +11,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _extends = require('@babel/runtime/helpers/extends');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
+var icons = require('@ant-design/icons');
 var create = require('zustand');
 var vanilla = require('zustand/vanilla');
 require('antd/dist/antd.css');
 var styled = require('styled-components');
-var icons = require('@ant-design/icons');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var reactDom = require('react-dom');
 var antd = require('antd');
@@ -62,8 +62,51 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 var deepmerge__namespace = /*#__PURE__*/_interopNamespaceDefault(deepmerge);
 
-function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const EMPTYARRAY = [];
+const NOCCID = Number.MIN_SAFE_INTEGER;
+const EMPTYSTR = '';
+
+/**
+ * Wrapper around useDrawing which allows to avoid ReferenceErrors.
+ * Use useDrawingArr if you want to get an array from store. It returns EMPTYARRAY if requested one is undefined.
+ *
+ * @param drawingId
+ * @param selector
+ * @returns requested by selector array or EMPTYARRAY if requested is undefined or null
+ */
+function useDrawingArr(drawingId, selector) {
+  const res = react.useDrawing(drawingId, selector);
+  return res || EMPTYARRAY;
+}
+
+/**
+ * Wrapper around useDrawing which allows to avoid ReferenceErrors.
+ * Use useDrawingCCId if you want to get an object id from store. It returns NOCCID if requested one is undefined or null.
+ *
+ * @param drawingId
+ * @param selector
+ * @returns requested by selector object id or NOCCID if requested is undefined or null
+ */
+function useDrawingCCId(drawingId, selector) {
+  const res = react.useDrawing(drawingId, selector);
+  return res || NOCCID;
+}
+
+/**
+ * Wrapper around useDrawing which allows to avoid ReferenceErrors.
+ * Use useDrawingStr if you want to get a string from store. It returns EMPTYSTR if requested one is undefined.
+ *
+ * @param drawingId
+ * @param selector
+ * @returns requested by selector string or EMPTYSTRING if requested one is undefined or null
+ */
+function useDrawingStr(drawingId, selector) {
+  const res = react.useDrawing(drawingId, selector);
+  return res || EMPTYSTR;
+}
+
+function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function getGraphicId(tree, refOrObjId) {
   const res = {
     graphicId: refOrObjId,
@@ -104,7 +147,11 @@ function getGraphicId(tree, refOrObjId) {
  */
 
 function useSelectedItems(drawingId, refOrObjIds) {
-  const visibleContainers = react.useDrawing(drawingId, d => d.structure.visibleContainers);
+  const activeContainers = useDrawingArr(drawingId, d => {
+    var _d$structure$tree;
+    return (_d$structure$tree = d.structure.tree[d.structure.currentProduct || NOCCID]) == null ? void 0 : _d$structure$tree.solids;
+  });
+  const visibleContainers = useDrawingArr(drawingId, d => d.structure.visibleContainers);
   const cacheStamp = react.useDrawing(drawingId, d => d.geometry.stamp);
   const cache = core.getDrawing(drawingId).geometry.cache;
   const sortedContainerIds = React.useMemo(() => {
@@ -115,14 +162,14 @@ function useSelectedItems(drawingId, refOrObjIds) {
           3. Remove duplicats from elems array
      */
     const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
-    const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-    return visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
-  }, [cache, visibleContainers]);
+    const sortedContainerIds_ = [...activeContainers, ...visibleContainers, ...allContainers];
+    return sortedContainerIds_.filter((grId, i) => sortedContainerIds_.indexOf(grId) === i);
+  }, [cache, activeContainers, visibleContainers]);
 
   // TODO: !!!Important!!! This may not properly create a graphic item for BuerliGeometry in assembly mode, but currently it isn't needed to.
   const prodId = core.getDrawing(drawingId).structure.currentProduct;
   const createSelItem = React.useCallback(element => {
-    return core.createGraphicItem(prodId, _objectSpread$x(_objectSpread$x({}, element), {}, {
+    return core.createGraphicItem(prodId, _objectSpread$y(_objectSpread$y({}, element), {}, {
       productId: prodId
     }));
   }, [prodId]);
@@ -147,7 +194,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
             if (grIds && grIds.length > 0) {
               const elem = cont.map[Number(grIds[0])];
               if (elem) {
-                elems.push(_objectSpread$x(_objectSpread$x({}, elem), {}, {
+                elems.push(_objectSpread$y(_objectSpread$y({}, elem), {}, {
                   graphicId: contId,
                   type: cont.type
                 }));
@@ -183,12 +230,8 @@ function useSelectedItems(drawingId, refOrObjIds) {
   return selectedItems;
 }
 
-const EMPTYARRAY = [];
-const NOCCID = Number.MIN_SAFE_INTEGER;
-const EMPTYSTR = '';
-
-function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(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];
@@ -199,7 +242,7 @@ function addMembers(drawingId, ccObjId) {
   const members = {};
   Object.keys(curMembers).forEach(memberName => {
     const curMember = curMembers[memberName];
-    members[memberName] = _objectSpread$w(_objectSpread$w({}, curMember), {}, {
+    members[memberName] = _objectSpread$x(_objectSpread$x({}, curMember), {}, {
       name: memberName
     });
     if (curMember.type === core.MemberType.POINT && Array.isArray(curMember.value)) {
@@ -215,7 +258,10 @@ function addMembers(drawingId, ccObjId) {
   };
 }
 function useGlobalToLocalMatrix(drawingId, objId) {
-  const csys = react.useDrawing(drawingId, drawing => objId && drawing.structure.tree[objId].coordinateSystem);
+  const csys = react.useDrawing(drawingId, drawing => {
+    var _drawing$structure$tr;
+    return objId && ((_drawing$structure$tr = drawing.structure.tree[objId]) == null ? void 0 : _drawing$structure$tr.coordinateSystem);
+  });
   return React.useMemo(() => {
     // TODO: remove undefined check when dimSet will be created on object creation.
     if (!csys) return new THREE__namespace.Matrix4();
@@ -228,7 +274,7 @@ function useGlobalToLocalMatrix(drawingId, objId) {
 function getGlobalToLocalMatrix(drawingId, objId) {
   const drawing = core.getDrawing(drawingId);
   const object = drawing.structure.tree[objId];
-  const matrix = object.coordinateSystem ? core.MathUtils.convertToMatrix4(object.coordinateSystem) : new THREE__namespace.Matrix4();
+  const matrix = object != null && object.coordinateSystem ? core.MathUtils.convertToMatrix4(object.coordinateSystem) : new THREE__namespace.Matrix4();
   return matrix.invert();
 }
 function convertToVector(point) {
@@ -331,6 +377,9 @@ const isSketchRegion = arg => {
   const objClass = typeof arg === 'string' ? arg : arg.class;
   return classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCSketchRegion);
 };
+const isSketchObj = obj => {
+  return classcad.ccUtils.base.isA(obj == null ? void 0 : obj.class, classcad.CCClasses.CCSketch) || isSketchGeometry(obj) || is2DConstraint(obj);
+};
 const degreesToRadians = degrees => {
   return degrees * Math.PI / 180;
 };
@@ -372,6 +421,7 @@ const stringifyValue = (value, type) => {
 
 // Searches for an object in the tree or graphic containers
 function findObject(drawingId, id, unrollRefs = false) {
+  var _drawing$structure$tr2;
   const drawing = core.getDrawing(drawingId);
   const tree = drawing.structure.tree;
   const obj = tree[id];
@@ -388,9 +438,10 @@ function findObject(drawingId, id, unrollRefs = false) {
   }
   const cache = drawing.geometry.cache;
   const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
-  const visibleContainers = drawing.structure.visibleContainers;
-  const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-  const sortedContainerIds = visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
+  const activeContainers = ((_drawing$structure$tr2 = drawing.structure.tree[drawing.structure.currentProduct || NOCCID]) == null ? void 0 : _drawing$structure$tr2.solids) || [];
+  const visibleContainers = drawing.structure.visibleContainers || [];
+  let sortedContainerIds = [...activeContainers, ...visibleContainers, ...allContainers];
+  sortedContainerIds = sortedContainerIds.filter((grId, i) => sortedContainerIds.indexOf(grId) === i);
   if (cache[graphicId]) {
     return cache[graphicId];
   }
@@ -506,45 +557,6 @@ function getRegionCoordSys(drawingId, regionObj) {
   return [originPos, xAxis, yAxis];
 }
 
-/**
- * Wrapper around useDrawing which allows to avoid ReferenceErrors.
- * Use useDrawingArr if you want to get an array from store. It returns EMPTYARRAY if requested one is undefined.
- *
- * @param drawingId
- * @param selector
- * @returns requested by selector array or EMPTYARRAY if requested is undefined or null
- */
-function useDrawingArr(drawingId, selector) {
-  const res = react.useDrawing(drawingId, selector);
-  return res || EMPTYARRAY;
-}
-
-/**
- * Wrapper around useDrawing which allows to avoid ReferenceErrors.
- * Use useDrawingCCId if you want to get an object id from store. It returns NOCCID if requested one is undefined or null.
- *
- * @param drawingId
- * @param selector
- * @returns requested by selector object id or NOCCID if requested is undefined or null
- */
-function useDrawingCCId(drawingId, selector) {
-  const res = react.useDrawing(drawingId, selector);
-  return res || NOCCID;
-}
-
-/**
- * Wrapper around useDrawing which allows to avoid ReferenceErrors.
- * Use useDrawingStr if you want to get a string from store. It returns EMPTYSTR if requested one is undefined.
- *
- * @param drawingId
- * @param selector
- * @returns requested by selector string or EMPTYSTRING if requested one is undefined or null
- */
-function useDrawingStr(drawingId, selector) {
-  const res = react.useDrawing(drawingId, selector);
-  return res || EMPTYSTR;
-}
-
 const DimSetContext = /*#__PURE__*/React.createContext({
   globalToLocalM: new THREE__namespace.Matrix4(),
   drawingId: -1
@@ -1211,8 +1223,8 @@ const isAngular = dim => classcad.ccUtils.base.isA(dim.class, classcad.CCClasses
 const isRadial = dim => classcad.ccUtils.base.isA(dim.class, classcad.CCClasses.CCRadialDimension) && !classcad.ccUtils.base.isA(dim.class, classcad.CCClasses.CCDiameterDimension);
 const isDiameter = dim => classcad.ccUtils.base.isA(dim.class, classcad.CCClasses.CCDiameterDimension);
 
-function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const isFeatureActive = drawingId => {
   const activePlugin = core.getDrawing(drawingId).plugin.active.feature;
   if (activePlugin) {
@@ -1248,8 +1260,8 @@ const appApi = (set, get) => ({
         const curInstance = core.api.getState().drawing.refs[drawingId].structure.currentInstance;
         res = state.assemblyTree.prodStack;
         curInstance && res.push(curInstance);
-        return _objectSpread$v(_objectSpread$v({}, state), {}, {
-          assemblyTree: _objectSpread$v(_objectSpread$v({}, state.assemblyTree), {}, {
+        return _objectSpread$w(_objectSpread$w({}, state), {}, {
+          assemblyTree: _objectSpread$w(_objectSpread$w({}, state.assemblyTree), {}, {
             prodStack: [...res]
           })
         });
@@ -1265,8 +1277,8 @@ const appApi = (set, get) => ({
       set(state => {
         const res = state.assemblyTree.prodStack;
         res.pop();
-        return _objectSpread$v(_objectSpread$v({}, state), {}, {
-          assemblyTree: _objectSpread$v(_objectSpread$v({}, state.assemblyTree), {}, {
+        return _objectSpread$w(_objectSpread$w({}, state), {}, {
+          assemblyTree: _objectSpread$w(_objectSpread$w({}, state.assemblyTree), {}, {
             prodStack: [...res]
           })
         });
@@ -1274,8 +1286,8 @@ const appApi = (set, get) => ({
       classcad.ccAPI.assemblyBuilder.setCurrentInstance(drawingId, prevProd).catch(console.warn);
     },
     clearProdStack: () => {
-      set(state => _objectSpread$v(_objectSpread$v({}, state), {}, {
-        assemblyTree: _objectSpread$v(_objectSpread$v({}, state.assemblyTree), {}, {
+      set(state => _objectSpread$w(_objectSpread$w({}, state), {}, {
+        assemblyTree: _objectSpread$w(_objectSpread$w({}, state.assemblyTree), {}, {
           prodStack: []
         })
       }));
@@ -1285,7 +1297,7 @@ const appApi = (set, get) => ({
         return;
       }
       const visibleMap = get().assemblyTree.visibleMap;
-      const visibleMapNew = _objectSpread$v({}, visibleMap);
+      const visibleMapNew = _objectSpread$w({}, visibleMap);
       instanceIds.forEach((instanceId, index) => {
         const objIds = objIdsArr[index];
         const visible = visibleMap[instanceId];
@@ -1300,8 +1312,8 @@ const appApi = (set, get) => ({
         });
         visibleMapNew[instanceId] = visibleNew;
       });
-      set(state => _objectSpread$v(_objectSpread$v({}, state), {}, {
-        assemblyTree: _objectSpread$v(_objectSpread$v({}, state.assemblyTree), {}, {
+      set(state => _objectSpread$w(_objectSpread$w({}, state), {}, {
+        assemblyTree: _objectSpread$w(_objectSpread$w({}, state.assemblyTree), {}, {
           visibleMap: visibleMapNew
         })
       }));
@@ -1309,7 +1321,7 @@ const appApi = (set, get) => ({
   },
   blankDiv: {
     show: callback => {
-      set(state => _objectSpread$v(_objectSpread$v({}, state), {}, {
+      set(state => _objectSpread$w(_objectSpread$w({}, state), {}, {
         blankDiv: {
           isActive: true,
           onClose: callback
@@ -1317,7 +1329,7 @@ const appApi = (set, get) => ({
       }));
     },
     hide: () => {
-      set(state => _objectSpread$v(_objectSpread$v({}, state), {}, {
+      set(state => _objectSpread$w(_objectSpread$w({}, state), {}, {
         blankDiv: {
           isActive: false,
           onClose: undefined
@@ -1415,7 +1427,7 @@ const DimValue = ({
   dimId,
   disableEvents = false
 }) => {
-  var _dimension$members, _dimension$members$ma, _master$members;
+  var _dimension$members, _dimension$members$ma, _master$members, _master$members$lgsSt, _master$members2, _master$members2$lgsS;
   const {
     drawingId
   } = React.useContext(DimSetContext);
@@ -1430,11 +1442,13 @@ const DimValue = ({
   // If we are in sketch context, master is a constraint, so the useValue should be taken if it exists, if doesn't take value.
   const memberName = isSketchConstr ? master != null && (_master$members = master.members) != null && _master$members.userValue ? 'userValue' : 'value' : dimension.name;
   const angle = isAngular(dimension);
+  const lgsState = (_master$members$lgsSt = master == null ? void 0 : (_master$members2 = master.members) == null ? void 0 : (_master$members2$lgsS = _master$members2.lgsState) == null ? void 0 : _master$members2$lgsS.value) != null ? _master$members$lgsSt : 1;
+  const isUnsatisfied = !(lgsState & 1);
   const valueParam = useNumParam(drawingId, masterId, memberName, {
     angle
   });
   const caption = React.useMemo(() => {
-    var _master$members2, _master$members2$memb, _master$members3, _master$members3$memb;
+    var _master$members3, _master$members3$memb, _master$members4, _master$members4$memb;
     if (!master) {
       var _dimension$members2, _dimension$members2$v, _dimension$members3, _dimension$members3$d;
       const dimValue = (_dimension$members2 = dimension.members) == null ? void 0 : (_dimension$members2$v = _dimension$members2.value) == null ? void 0 : _dimension$members2$v.value;
@@ -1446,10 +1460,10 @@ const DimValue = ({
     }
 
     // const paramName = dimension.members.paramName.value
-    const expr = ((_master$members2 = master.members) == null ? void 0 : (_master$members2$memb = _master$members2[memberName]) == null ? void 0 : _master$members2$memb.expression.replace(/ /g, '').replace(/ExpressionSet./g, '@')) || '';
+    const expr = ((_master$members3 = master.members) == null ? void 0 : (_master$members3$memb = _master$members3[memberName]) == null ? void 0 : _master$members3$memb.expression.replace(/ /g, '').replace(/ExpressionSet./g, '@')) || '';
     const degValue = expr.length > 0 && expr[expr.length - 1] === 'g' ? Number(expr.slice(0, expr.length - 1)) : NaN;
     const isDeg = !isNaN(degValue);
-    const value = isDeg ? degValue : (_master$members3 = master.members) == null ? void 0 : (_master$members3$memb = _master$members3[memberName]) == null ? void 0 : _master$members3$memb.value;
+    const value = isDeg ? degValue : (_master$members4 = master.members) == null ? void 0 : (_master$members4$memb = _master$members4[memberName]) == null ? void 0 : _master$members4$memb.value;
     const valueStr = isDeg ? value.toFixed(2) + 'g' : value.toFixed(2);
     return expr && !isDeg ? expr + ' (' + valueStr + ')' : valueStr;
   }, [dimension, master, memberName, angle]);
@@ -1527,12 +1541,20 @@ const DimValue = ({
     }
     e.stopPropagation();
   }, [update]);
+  const [iconOffset, setIconOffset] = React.useState(0);
   fiber.useFrame(args => {
     if (!textRef.current || !textRef.current.parent) {
       return;
     }
     textRef.current.quaternion.copy(textRef.current.parent.getWorldQuaternion(quat$2)).invert().multiply(args.camera.quaternion);
     textRef.current.scale.setScalar(1 / args.camera.zoom);
+    if (!textRef.current.geometry.boundingBox) {
+      return;
+    }
+    const iconOffsetNew = textRef.current.geometry.boundingBox.max.x + 4;
+    if (Math.abs(iconOffsetNew - iconOffset) > 1e-3) {
+      setIconOffset(iconOffsetNew);
+    }
   });
   return /*#__PURE__*/React.createElement("group", {
     position: position
@@ -1551,7 +1573,14 @@ const DimValue = ({
     userData: {
       onHUD: true
     }
-  }, handlers), caption)) : /*#__PURE__*/React.createElement(drei.Html, {
+  }, handlers), caption, isUnsatisfied && /*#__PURE__*/React.createElement(drei.Html, {
+    style: {
+      transform: `translate3d(${iconOffset}px,19px,0)`,
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(icons.CloseCircleTwoTone, {
+    twoToneColor: "#eb2f96"
+  })))) : /*#__PURE__*/React.createElement(drei.Html, {
     zIndexRange: [blankZIndex + 1, blankZIndex + 1],
     style: {
       transform: 'translate3d(-50%,0,0)',
@@ -2365,8 +2394,58 @@ function useRefsParam(drawingId, objId, memberName) {
   });
 }
 
-function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const MultiSelectContext = /*#__PURE__*/React.createContext(null);
+const MultiSelect = ({
+  children,
+  drawingId,
+  items,
+  createInfo
+}) => {
+  const itemsInfo = React.useMemo(() => items.map(createInfo), [items, createInfo]);
+  const lastSelected = React.useRef(-1);
+  const setLastSelected = React.useCallback((objId, overwrite) => {
+    if (lastSelected.current === -1 || overwrite) lastSelected.current = objId;
+  }, []);
+  const multiSelect = React.useCallback(objId => {
+    const drawing = core.getDrawing(drawingId);
+    if (objId === lastSelected.current) {
+      const select = drawing.api.interaction.select;
+      select(createInfo(objId));
+      return;
+    }
+    const index1 = items.indexOf(lastSelected.current);
+    const index2 = items.indexOf(objId);
+    if (index1 === -1 || index2 === -1) {
+      return;
+    }
+    const start = Math.min(index1, index2);
+    const end = Math.max(index1, index2);
+    const toSelect = itemsInfo.slice(start, end + 1);
+    const setSelected = drawing.api.interaction.setSelected;
+    setSelected(toSelect);
+  }, [drawingId, items, itemsInfo, createInfo]);
+  const needsReset = react.useDrawing(drawingId, d => {
+    var _d$interaction$select;
+    return (_d$interaction$select = d.interaction.selected) == null ? void 0 : _d$interaction$select.every(selItem => !itemsInfo.some(info => info.uniqueIdent === selItem.uniqueIdent));
+  }) || false;
+  React.useEffect(() => {
+    // Reset lastSelected if selected array becomes empty
+    if (needsReset) {
+      lastSelected.current = -1;
+    }
+  }, [needsReset]);
+  const contextValue = React.useMemo(() => ({
+    setLastSelected,
+    multiSelect
+  }), [setLastSelected, multiSelect]);
+  return /*#__PURE__*/React.createElement(MultiSelectContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * Implies the following data structure:
  * data: {
@@ -2397,22 +2476,32 @@ const getEventInfo = e => {
     return {
       delta: eRTF.delta,
       stopPropagation: eRTF.stopPropagation,
+      ctrlKey: eRTF.nativeEvent.ctrlKey,
       shiftKey: eRTF.nativeEvent.shiftKey
     };
   } else {
     return {
       delta: 0,
       stopPropagation: undefined,
+      ctrlKey: eDef.ctrlKey,
       shiftKey: eDef.shiftKey
     };
   }
 };
 function useSelect$1(drawingId, objId) {
+  const {
+    setLastSelected,
+    multiSelect
+  } = React.useContext(MultiSelectContext) || {
+    setLastSelected: undefined,
+    multiSelect: undefined
+  };
   const onClick = React.useCallback(e => {
     var _drawing$plugin$refs, _drawing$structure$tr;
     const {
       delta,
       stopPropagation,
+      ctrlKey,
       shiftKey
     } = getEventInfo(e);
     if (delta > 1) {
@@ -2420,16 +2509,18 @@ function useSelect$1(drawingId, objId) {
     }
     const drawing = core.getDrawing(drawingId);
     const productId = drawing.structure.currentProduct;
+    if (!productId) {
+      return;
+    }
     let object = drawing.structure.tree[objId];
     const selection = drawing.selection.refs[drawing.selection.active || ''];
-    const isSelActive = selection !== undefined;
     const isSelectable = (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
       object
     })) || false;
     const activeId = ((_drawing$plugin$refs = drawing.plugin.refs[drawing.plugin.active.feature || -1]) == null ? void 0 : _drawing$plugin$refs.id) || -1;
     const objClass = ((_drawing$structure$tr = drawing.structure.tree[activeId]) == null ? void 0 : _drawing$structure$tr.class) || '';
     const isSketchActive = classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCSketch);
-    if ((isSketchActive || isSelActive) && !isSelectable || !productId) {
+    if (isSketchActive && !isSketchObj(object) && !isSelectable) {
       return;
     }
     stopPropagation == null ? void 0 : stopPropagation();
@@ -2447,13 +2538,18 @@ function useSelect$1(drawingId, objId) {
       }
       return;
     }
+    setLastSelected == null ? void 0 : setLastSelected(objId, !shiftKey);
+    if (shiftKey && multiSelect) {
+      multiSelect(objId);
+      return;
+    }
     const interactionInfo = core.createInfo({
       objectId: objId,
       prodRefId: productId
     });
     const select = drawing.api.interaction.select;
-    select(interactionInfo, shiftKey);
-  }, [drawingId, objId]);
+    select(interactionInfo, ctrlKey || shiftKey);
+  }, [drawingId, objId, setLastSelected, multiSelect]);
   return React.useMemo(() => ({
     onClick
   }), [onClick]);
@@ -2466,16 +2562,18 @@ function useHover$1(drawingId, objId) {
     } = getEventInfo(e);
     const drawing = core.getDrawing(drawingId);
     const productId = drawing.structure.currentProduct;
+    if (!productId) {
+      return;
+    }
     const object = drawing.structure.tree[objId];
     const selection = drawing.selection.refs[drawing.selection.active || ''];
-    const isSelActive = selection !== undefined;
     const isSelectable = (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
       object
     })) || false;
     const activeId = ((_drawing$plugin$refs2 = drawing.plugin.refs[drawing.plugin.active.feature || -1]) == null ? void 0 : _drawing$plugin$refs2.id) || -1;
     const objClass = ((_drawing$structure$tr2 = drawing.structure.tree[activeId]) == null ? void 0 : _drawing$structure$tr2.class) || '';
     const isSketchActive = classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCSketch);
-    if ((isSketchActive || isSelActive) && !isSelectable || !productId) {
+    if (isSketchActive && !isSketchObj(object) && !isSelectable) {
       return;
     }
     stopPropagation == null ? void 0 : stopPropagation();
@@ -2583,6 +2681,9 @@ function useIsSSelected(drawingId, objId) {
       return false;
     }
     const object = drawing.structure.tree[objId];
+    if (!object) {
+      return false;
+    }
     const selApi = drawing.api.selection;
     return selApi.isItemSelected(createTreeObjSelItem(productId, object));
   }, [drawingId, objId, selItems]);
@@ -2595,7 +2696,7 @@ function useTreeObjInteraction(drawingId, objId) {
   const isGSelected = useIsGSelected(drawingId, objId);
   const isSHovered = useIsSHovered(drawingId, objId);
   const isSSelected = useIsSSelected(drawingId, objId);
-  const handlers = React.useMemo(() => _objectSpread$u(_objectSpread$u({}, hHandlers), sHandlers), [hHandlers, sHandlers]);
+  const handlers = React.useMemo(() => _objectSpread$v(_objectSpread$v({}, hHandlers), sHandlers), [hHandlers, sHandlers]);
   return React.useMemo(() => {
     // If the handlers are switched off immediately after the selection (workplane selection for the sketcher), then hovered would keep being equal to true, making the mesh color wrong.
     // Thus, we don't want hovered and selected to be true if the object is not selectable.
@@ -3066,8 +3167,8 @@ const SelectionRestorer = ({
   return null;
 };
 
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Implies the following data structure:
@@ -3081,7 +3182,7 @@ function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) {
 const MateScope = 'HLConstraintScope';
 const createMateItem = (matePath, csys, flip, reoriented) => {
   return {
-    id: `Mate|${matePath.toString()}|${csys.id}|(${flip},${reoriented})`,
+    id: `Mate|${matePath.toString()}|${csys.id}`,
     scope: MateScope,
     data: {
       matePath,
@@ -3161,7 +3262,7 @@ function useMateSelection(drawingId, matePath, csysId) {
   }));
   const handlers = React.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$t(_objectSpread$t({}, hHandlers), sHandlers);
+      return _objectSpread$u(_objectSpread$u({}, hHandlers), sHandlers);
     }
     return {};
   }, [isSelectable, hHandlers, sHandlers]);
@@ -3204,8 +3305,11 @@ const PluginBounds = ({
 };
 
 const _excluded$6 = ["children"];
+function isDOM(node) {
+  return node instanceof HTMLElement || node instanceof SVGElement;
+}
 const PluginTooltip = _ref => {
-  var _React$useContext, _ref$current, _pluginBoundsRef$curr;
+  var _React$useContext, _ref$current, _ref$current$triggerR, _ref$current$triggerR2, _ref$current2, _pluginBoundsRef$curr;
   let {
       children
     } = _ref,
@@ -3214,7 +3318,11 @@ const PluginTooltip = _ref => {
   const pluginBoundsRef = (_React$useContext = React.useContext(PBContext)) == null ? void 0 : _React$useContext.pluginBoundsRef;
   const [, setStateChanged] = React.useState(0); // We want to trigger a rerender when the tooltip is opened
 
-  const elem = reactDom.findDOMNode((_ref$current = ref.current) == null ? void 0 : _ref$current.triggerRef.current);
+  // In some cases, antd components return strange refs which should be handled differently here to prevent findDOMNode errors.
+  // ref.current?.triggerRef.current?.input?.parentNode in particular is needed to get the correct element if RadioButton was wrapped.
+  // BUT this is obviously a hack, and the problem should ideally be resolved the other way somehow...
+  const node = ((_ref$current = ref.current) == null ? void 0 : (_ref$current$triggerR = _ref$current.triggerRef.current) == null ? void 0 : (_ref$current$triggerR2 = _ref$current$triggerR.input) == null ? void 0 : _ref$current$triggerR2.parentNode) || ((_ref$current2 = ref.current) == null ? void 0 : _ref$current2.triggerRef.current);
+  const elem = isDOM(node) ? reactDom.findDOMNode(node) : undefined;
   const elemRect = elem == null ? void 0 : elem.getBoundingClientRect();
   const pbRect = pluginBoundsRef == null ? void 0 : (_pluginBoundsRef$curr = pluginBoundsRef.current) == null ? void 0 : _pluginBoundsRef$curr.getBoundingClientRect();
   let offsetX = 0;
@@ -3399,10 +3507,11 @@ const MateRestorer = ({
     return [createMateItem(matePath, mate, flip, reoriented)];
   }, [drawingId, matePath, csysId, flip, reoriented]);
   React.useEffect(() => {
+    var _selItems$, _selector$items$, _selItems$2, _selector$items$2;
     if (!selectorId) return;
     const selector = core.getDrawing(drawingId).selection.refs[selectorId];
     const selApi = core.getDrawing(drawingId).api.selection;
-    if (!selApi.areItemsSelected(selItems, selectorId) || selItems.length !== selector.items.length) {
+    if (selItems.length !== selector.items.length || !(selApi.areItemsSelected(selItems, selectorId) && ((_selItems$ = selItems[0]) == null ? void 0 : _selItems$.data.flip) === ((_selector$items$ = selector.items[0]) == null ? void 0 : _selector$items$.data.flip) && ((_selItems$2 = selItems[0]) == null ? void 0 : _selItems$2.data.reoriented) === ((_selector$items$2 = selector.items[0]) == null ? void 0 : _selector$items$2.data.reoriented))) {
       setMateParam(selItems[0]);
       selApi.setItems(selectorId, selItems);
     }
@@ -4157,8 +4266,8 @@ var index$H = /*#__PURE__*/Object.freeze({
   description: description$H
 });
 
-function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function parseVal(val) {
   const float = Number(val);
   if (!isNaN(float)) {
@@ -4409,13 +4518,13 @@ const PointEditor = ({
             newVals[i] = val;
           }
         });
-        return _objectSpread$s(_objectSpread$s({}, state), {}, {
+        return _objectSpread$t(_objectSpread$t({}, state), {}, {
           displayVals: newVals
         });
       })).catch();
     } else {
       const value = defaults.value;
-      setDisplayState(state => _objectSpread$s(_objectSpread$s({}, state), {}, {
+      setDisplayState(state => _objectSpread$t(_objectSpread$t({}, state), {}, {
         displayVals: [value.x, value.y, value.z]
       }));
     }
@@ -4431,7 +4540,7 @@ const PointEditor = ({
           editMode: false,
           displayVals: res_ !== null ? [res_.x, res_.y, res_.z] : [...state.displayVals]
         }));
-      }).catch(() => setDisplayState(state => _objectSpread$s(_objectSpread$s({}, state), {}, {
+      }).catch(() => setDisplayState(state => _objectSpread$t(_objectSpread$t({}, state), {}, {
         editMode: false
       })));
     } else {
@@ -4453,7 +4562,7 @@ const PointEditor = ({
     caption: caption,
     highlighted: param.isChanged()
   }, !editMode && /*#__PURE__*/React.createElement(DisplayBase, {
-    onClick: () => setDisplayState(state => _objectSpread$s(_objectSpread$s({}, state), {}, {
+    onClick: () => setDisplayState(state => _objectSpread$t(_objectSpread$t({}, state), {}, {
       editMode: true
     }))
   }, /*#__PURE__*/React.createElement(PluginTooltip, {
@@ -4536,11 +4645,11 @@ const PointEditor = ({
   }, "\u2014")));
 };
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function createPointParam(member) {
   const isExpr = member.expression.length > 0;
-  const value = isExpr ? member.expression : _objectSpread$r({}, member.value);
+  const value = isExpr ? member.expression : _objectSpread$s({}, member.value);
   return {
     value,
     isExpr
@@ -6904,8 +7013,8 @@ const Digits = ({
 
 const vectorToString = (point, digits) => `${point.toArray().map(n => core.MathUtils.round(n, digits)).join(', ')}`;
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const Excluded = [core.GraphicType.LOOP].concat(core.EntityTypes);
 const RootImpl$o = ({
   drawingId,
@@ -6976,7 +7085,7 @@ const Output = ({
               const {
                 value
               } = res.measureData;
-              return _objectSpread$q(_objectSpread$q({}, res), {}, {
+              return _objectSpread$r(_objectSpread$r({}, res), {}, {
                 asString: core.MathUtils.round(value, digits)
               });
             }
@@ -6986,13 +7095,13 @@ const Output = ({
               const {
                 value
               } = res.measureData;
-              return _objectSpread$q(_objectSpread$q({}, res), {}, {
+              return _objectSpread$r(_objectSpread$r({}, res), {}, {
                 asString: vectorToString(value, digits)
               });
             }
         }
       }
-      return _objectSpread$q(_objectSpread$q({}, res), {}, {
+      return _objectSpread$r(_objectSpread$r({}, res), {}, {
         asString: ''
       });
     });
@@ -7546,6 +7655,7 @@ const description$n = {
     },
 
     // Contains information about objects under the pointer (`interaction.objects[interaction.cycle]` should equal `hovered`)
+    overdefined: {},
     isDragged: false,
     // When used drags some objects, this should equal true.
     scale: 1,
@@ -7572,8 +7682,8 @@ function getSketchState(drawingId, pluginId) {
   return plugin.state;
 }
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function CreateAngle(drawingId, pluginId) {
   const {
     set
@@ -7614,8 +7724,8 @@ function CreateAngle(drawingId, pluginId) {
     set(state_ => {
       const tmpAngularDimension = state_.tmpObjects[tmpDimensionId];
       return {
-        tmpObjects: _objectSpread$p(_objectSpread$p({}, state_.tmpObjects), {}, {
-          [tmpDimensionId]: _objectSpread$p(_objectSpread$p({}, tmpAngularDimension), params)
+        tmpObjects: _objectSpread$q(_objectSpread$q({}, state_.tmpObjects), {}, {
+          [tmpDimensionId]: _objectSpread$q(_objectSpread$q({}, tmpAngularDimension), params)
         })
       };
     });
@@ -7641,7 +7751,7 @@ function CreateAngle(drawingId, pluginId) {
     const dir1 = linesInfo.dir1;
     const center = linesInfo.center;
     const dimPos = center.clone().addScaledVector(dir0.clone().add(dir1).normalize(), 10);
-    const tmpAngularDimension = _objectSpread$p(_objectSpread$p({
+    const tmpAngularDimension = _objectSpread$q(_objectSpread$q({
       class: TmpObjClasses.AngularDimension,
       id: tmpDimensionId
     }, linesInfo), {}, {
@@ -7769,8 +7879,8 @@ function getGeometryPriority(object) {
   return -1;
 }
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 let timerId;
 const projectPointOnGeometry = (point, geometryId, tree) => {
   const geometry = tree[geometryId];
@@ -7816,7 +7926,7 @@ const setHoverState = (drawingId, pluginId, cycle, objects, hoverPos) => {
         const highlightedNonGeom = highlighted.filter(id => id !== hoveredId && (is2DConstraint(tree[id]) || isSketchRegion(tree[id])));
         return {
           highlighted: [...highlightedNonGeom, hoveredId, ...entities],
-          interaction: _objectSpread$o(_objectSpread$o({}, state_.interaction), {}, {
+          interaction: _objectSpread$p(_objectSpread$p({}, state_.interaction), {}, {
             cycle,
             objects
           })
@@ -7825,12 +7935,12 @@ const setHoverState = (drawingId, pluginId, cycle, objects, hoverPos) => {
     } else {
       const linked = Object.values(tree).filter(obj => is2DConstraint(obj) || isSketchRegion(obj)).filter(obj => getEntities(drawingId, obj.id).some(entityId => entityId === hoveredId)).map(obj => obj.id);
       const state = getSketchState(drawingId, pluginId);
-      const constraintsToGeometry = _objectSpread$o({}, state.interaction.constraintsToGeometry);
+      const constraintsToGeometry = _objectSpread$p({}, state.interaction.constraintsToGeometry);
       linked.forEach(id => {
         constraintsToGeometry[id] = hoveredId;
       });
       const prevHoveredId = state.interaction.objects[state.interaction.cycle % state.interaction.objects.length];
-      const lastHoveredPos = _objectSpread$o({}, state.interaction.lastHoveredPos);
+      const lastHoveredPos = _objectSpread$p({}, state.interaction.lastHoveredPos);
       if (!hoverPos) {
         linked.forEach(id => delete lastHoveredPos[id]);
       } else if (hoveredId !== prevHoveredId) {
@@ -7858,7 +7968,7 @@ const setHoverState = (drawingId, pluginId, cycle, objects, hoverPos) => {
       const highlightedNonGeom = highlighted.filter(id => is2DConstraint(tree[id]) || isSketchRegion(tree[id]));
       return {
         highlighted: highlightedNonGeom,
-        interaction: _objectSpread$o(_objectSpread$o({}, state_.interaction), {}, {
+        interaction: _objectSpread$p(_objectSpread$p({}, state_.interaction), {}, {
           cycle,
           objects
         })
@@ -7894,7 +8004,7 @@ const unhover = (drawingId, pluginId, objId) => {
   const objectsNew = objects.filter(id => id !== objId);
   setHoverState(drawingId, pluginId, 0, objectsNew);
 };
-const select = (drawingId, pluginId, selectedId) => {
+const select = (drawingId, selectedId) => {
   const drawing = core.getDrawing(drawingId);
   const curProduct = drawing.structure.currentProduct;
   const select_ = drawing.api.interaction.select;
@@ -7913,8 +8023,43 @@ const tab = (drawingId, pluginId) => {
   setHoverState(drawingId, pluginId, cycle, objects);
 };
 
-function Hover(drawingId, pluginId) {
+const getSketchObjIds = (drawingId, sketchId, intersections) => {
+  const drawing = core.getDrawing(drawingId);
+  const tree = drawing.structure.tree;
+  const selection = drawing.selection.refs[drawing.selection.active || ''];
+  const isSelActive = selection !== undefined;
+  const objIds = intersections.map(intersection => {
+    var _intersection$object$;
+    return ((_intersection$object$ = intersection.object.userData) == null ? void 0 : _intersection$object$.objId) || undefined;
+  });
+  return objIds.filter((objId, i) => {
+    var _object$members;
+    const object = tree[objId || NOCCID];
+    const isSelectable = object && (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
+      object
+    })) || false;
+    const isSketchObj = object && (isSketchGeometry(object) || is2DConstraint(object)) && getAncestorIdByClass(drawingId, object.id, classcad.CCClasses.CCSketch) === sketchId;
+    const isSketchRegion_ = object && isSketchRegion(object) && ((_object$members = object.members) == null ? void 0 : _object$members.sketch.value) === sketchId;
+    const canBeSelected = !isSelActive || isSelectable;
+    return object && (isSketchObj || isSketchRegion_) && canBeSelected && objIds.indexOf(objId) === i;
+  });
+};
+const hoverIntersections = (drawingId, pluginId, intersections) => {
   const sketchId = core.getPlugin(drawingId, pluginId).objectId;
+  const tree = core.getDrawing(drawingId).structure.tree;
+  const sketchObjIds = getSketchObjIds(drawingId, sketchId, intersections);
+  const sketchIntersection = intersections.find(intersection => {
+    var _intersection$object$2;
+    const objId = (_intersection$object$2 = intersection.object.userData) == null ? void 0 : _intersection$object$2.objId;
+    const obj = tree[objId];
+    return classcad.ccUtils.base.isA(obj == null ? void 0 : obj.class, classcad.CCClasses.CCSketch);
+  });
+  const hoverPos = sketchIntersection ? sketchIntersection.point.clone() : new THREE__namespace.Vector3();
+  hoverPos.applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
+  hover(drawingId, pluginId, sketchObjIds, hoverPos);
+};
+
+function Hover(drawingId, pluginId) {
   const filter = object => true;
   const onDeactivate = () => {
     const setHovered = core.getDrawing(drawingId).api.interaction.setHovered;
@@ -7925,27 +8070,6 @@ function Hover(drawingId, pluginId) {
       tab(drawingId, pluginId);
     }
   };
-  const getSketchObjIds = e => {
-    const drawing = core.getDrawing(drawingId);
-    const tree = drawing.structure.tree;
-    const selection = drawing.selection.refs[drawing.selection.active || ''];
-    const isSelActive = selection !== undefined;
-    const objIds = e.intersections.map(intersection => {
-      var _intersection$object$;
-      return ((_intersection$object$ = intersection.object.userData) == null ? void 0 : _intersection$object$.objId) || undefined;
-    });
-    return objIds.filter((objId, i) => {
-      var _object$members;
-      const object = tree[objId || NOCCID];
-      const isSelectable = object && (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
-        object
-      })) || false;
-      const isSketchObj = object && (isSketchGeometry(object) || is2DConstraint(object)) && getAncestorIdByClass(drawingId, object.id, classcad.CCClasses.CCSketch) === sketchId;
-      const isSketchRegion_ = object && isSketchRegion(object) && ((_object$members = object.members) == null ? void 0 : _object$members.sketch.value) === sketchId;
-      const canBeSelected = !isSelActive || isSelectable;
-      return object && (isSketchObj || isSketchRegion_) && canBeSelected && objIds.indexOf(objId) === i;
-    });
-  };
 
   // A single handler for both onPointerOver / onPointerOut
   const onHover = e => {
@@ -7954,16 +8078,7 @@ function Hover(drawingId, pluginId) {
     if (!tree[hoveredId] || classcad.ccUtils.base.isA(tree[hoveredId].class, classcad.CCClasses.CCSketch)) {
       return;
     }
-    const sketchObjIds = getSketchObjIds(e);
-    const sketchIntersection = e.intersections.find(intersection => {
-      var _intersection$object$2;
-      const objId = (_intersection$object$2 = intersection.object.userData) == null ? void 0 : _intersection$object$2.objId;
-      const obj = tree[objId];
-      return classcad.ccUtils.base.isA(obj == null ? void 0 : obj.class, classcad.CCClasses.CCSketch);
-    });
-    const hoverPos = sketchIntersection ? sketchIntersection.point.clone() : new THREE__namespace.Vector3();
-    hoverPos.applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
-    hover(drawingId, pluginId, sketchObjIds, hoverPos);
+    hoverIntersections(drawingId, pluginId, e.intersections);
   };
   return {
     name: HandlersList.HOVER,
@@ -8313,8 +8428,8 @@ const MergedWrapper = ({
   );
 };
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // Artificial delay in 16 ms.
 const artifDelay = 16;
@@ -8414,29 +8529,21 @@ function Drag(drawingId, pluginId, camControls) {
       cycle,
       objects
     } = getSketchState(drawingId, pluginId).interaction;
-    pressedId = objects.length > 0 ? objects[cycle % objects.length] : e.object.userData.objId;
-    const pressedObj = core.getDrawing(drawingId).structure.tree[pressedId];
+    pressedId = objects.length > 0 ? objects[cycle % objects.length] : NOCCID;
     if (e.nativeEvent.shiftKey) {
-      if (!classcad.ccUtils.base.isA(pressedObj.class, classcad.CCClasses.CCSketch)) {
-        // If clicked on a sketch child propagate down to Sketch plane.
-        return;
-      }
       isRectSelectionActive = true;
-      rectClickPoint = e.point.clone().project(e.camera);
-      pressedId = NOCCID;
       camControls.enabled = false;
-      e.target.setPointerCapture(e.pointerId);
-      e.stopPropagation();
+      rectClickPoint = e.point.clone().project(e.camera);
       set({
         rubberBandRectangle: {
           min: rectClickPoint.clone(),
           max: rectClickPoint.clone()
         }
       });
+      e.stopPropagation();
       return;
     }
-    if (classcad.ccUtils.base.isA(pressedObj.class, classcad.CCClasses.CCSketch)) {
-      pressedId = NOCCID;
+    if (pressedId === NOCCID) {
       return;
     }
     const intersectionPoint = getPointOnPlane(e.unprojectedPoint, e.camera, getGlobalToLocalMatrix(drawingId, sketchId));
@@ -8472,31 +8579,42 @@ function Drag(drawingId, pluginId, camControls) {
     const setSelected = drawing.api.interaction.setSelected;
     if (isRectSelectionActive) {
       isRectSelectionActive = false;
-      const highlighted = getSketchState(drawingId, pluginId).highlighted;
-      const highlightedInfo = highlighted.map(id => core.createInfo({
-        objectId: id,
-        prodRefId: curProduct
-      }));
-      const curSelected = drawing.interaction.selected || [];
-      setSelected([...curSelected, ...highlightedInfo]);
-      set({
-        highlighted: [],
-        rubberBandRectangle: undefined
-      });
-      e.target.releasePointerCapture(e.pointerId);
-      e.stopPropagation();
-      return;
+      if (isMoved) {
+        const highlighted = getSketchState(drawingId, pluginId).highlighted;
+        const highlightedInfo = highlighted.map(id => core.createInfo({
+          objectId: id,
+          prodRefId: curProduct
+        }));
+        const curSelected = drawing.interaction.selected || [];
+        setSelected([...curSelected, ...highlightedInfo]);
+        set({
+          highlighted: [],
+          rubberBandRectangle: undefined
+        });
+        pressedId = NOCCID;
+        e.stopPropagation();
+        return;
+      }
     }
-    set({
-      isDragged: false
-    });
     if (isMoved === false) {
       if (pressedId === NOCCID) {
         clearSelection();
+        set({
+          isDragged: false,
+          rubberBandRectangle: undefined
+        });
+        e.stopPropagation();
         return;
       }
-      select(drawingId, pluginId, pressedId);
+      select(drawingId, pressedId);
     }
+    set({
+      isDragged: false,
+      rubberBandRectangle: undefined
+    });
+
+    // We want to reset the interaction state after the drag stops
+    hoverIntersections(drawingId, pluginId, e.intersections);
     clearIgnoreList();
     clearDraggedPoints();
     pressedId = NOCCID;
@@ -8581,7 +8699,7 @@ function Drag(drawingId, pluginId, camControls) {
     name: HandlersList.DRAG,
     filter,
     onDeactivate,
-    pointerHandlers: _objectSpread$n({
+    pointerHandlers: _objectSpread$o({
       onPointerDown,
       onPointerUp,
       onPointerMove
@@ -8593,8 +8711,8 @@ function Drag(drawingId, pluginId, camControls) {
   };
 }
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawPoint(drawingId, pluginId) {
   const {
     set
@@ -8643,7 +8761,7 @@ function DrawPoint(drawingId, pluginId) {
     }).then(() => {
       // Remove the old temporary point once a permanent one is created in its place
       set(state => {
-        const tmpObjects_ = _objectSpread$m({}, state.tmpObjects);
+        const tmpObjects_ = _objectSpread$n({}, state.tmpObjects);
         delete tmpObjects_[curPointId];
         return {
           tmpObjects: tmpObjects_
@@ -8656,8 +8774,8 @@ function DrawPoint(drawingId, pluginId) {
     set(state => {
       const tmpPoint = state.tmpObjects[curPointId];
       return {
-        tmpObjects: _objectSpread$m(_objectSpread$m({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$m(_objectSpread$m({}, tmpPoint), {}, {
+        tmpObjects: _objectSpread$n(_objectSpread$n({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$n(_objectSpread$n({}, tmpPoint), {}, {
             id: tmpPointId,
             position: tmpPoint.position.clone()
           })
@@ -8674,8 +8792,8 @@ function DrawPoint(drawingId, pluginId) {
       const tmpPoint = state.tmpObjects[tmpPointId];
       return {
         mousePos,
-        tmpObjects: _objectSpread$m(_objectSpread$m({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$m(_objectSpread$m({}, tmpPoint), {}, {
+        tmpObjects: _objectSpread$n(_objectSpread$n({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$n(_objectSpread$n({}, tmpPoint), {}, {
             position: mousePos
           })
         })
@@ -8695,8 +8813,8 @@ function DrawPoint(drawingId, pluginId) {
   };
 }
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawLine(drawingId, pluginId) {
   // Global hooks:
   const {
@@ -8775,7 +8893,7 @@ function DrawLine(drawingId, pluginId) {
           endPId: tmpEndP.id
         };
         return {
-          tmpObjects: _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$m(_objectSpread$m({}, state.tmpObjects), {}, {
             [tmpStartP.id]: tmpStartP,
             [tmpLine.id]: tmpLine
           })
@@ -8811,7 +8929,7 @@ function DrawLine(drawingId, pluginId) {
         var _lastAddedLine$childr;
         // Remove the old temporary line and its points once a permanent one is created in its place
         set(state => {
-          const tmpObjects_ = _objectSpread$l({}, state.tmpObjects);
+          const tmpObjects_ = _objectSpread$m({}, state.tmpObjects);
           delete tmpObjects_[curStartPId];
           delete tmpObjects_[curEndPId];
           delete tmpObjects_[curLineId];
@@ -8834,16 +8952,16 @@ function DrawLine(drawingId, pluginId) {
         const tmpEndP = state.tmpObjects[curEndPId];
         const tmpLine = state.tmpObjects[curLineId];
         return {
-          tmpObjects: _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$l(_objectSpread$l({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$m(_objectSpread$m({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$m(_objectSpread$m({}, tmpStartP), {}, {
               id: tmpStartPId,
               position: tmpEndP.position.clone()
             }),
-            [tmpEndPId]: _objectSpread$l(_objectSpread$l({}, tmpEndP), {}, {
+            [tmpEndPId]: _objectSpread$m(_objectSpread$m({}, tmpEndP), {}, {
               id: tmpEndPId,
               position: tmpEndP.position.clone()
             }),
-            [tmpLineId]: _objectSpread$l(_objectSpread$l({}, tmpLine), {}, {
+            [tmpLineId]: _objectSpread$m(_objectSpread$m({}, tmpLine), {}, {
               id: tmpLineId,
               startPId: tmpStartPId,
               endPId: tmpEndPId
@@ -8862,8 +8980,8 @@ function DrawLine(drawingId, pluginId) {
       const tmpEndP = state.tmpObjects[tmpEndPId];
       return {
         mousePos,
-        tmpObjects: _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
-          [tmpEndPId]: _objectSpread$l(_objectSpread$l({}, tmpEndP), {}, {
+        tmpObjects: _objectSpread$m(_objectSpread$m({}, state.tmpObjects), {}, {
+          [tmpEndPId]: _objectSpread$m(_objectSpread$m({}, tmpEndP), {}, {
             position: mousePos
           })
         })
@@ -8886,8 +9004,8 @@ function DrawLine(drawingId, pluginId) {
   };
 }
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawRectangle(drawingId, pluginId, rectType) {
   const {
     set
@@ -8963,7 +9081,7 @@ function DrawRectangle(drawingId, pluginId, rectType) {
           isSquare: e.shiftKey,
           isCentered: rectType === HandlersList.DRAWRECTCENTER
         };
-        const newTmpObjects = _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
+        const newTmpObjects = _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
           [tmpRect.id]: tmpRect
         });
         delete newTmpObjects[tmpPointId];
@@ -8999,7 +9117,7 @@ function DrawRectangle(drawingId, pluginId, rectType) {
       }).then(() => {
         // Remove the old temporary rectangle once a permanent one is created in its place
         set(state => {
-          const tmpObjects = _objectSpread$k({}, state.tmpObjects);
+          const tmpObjects = _objectSpread$l({}, state.tmpObjects);
           delete tmpObjects[curRectId];
           return {
             tmpObjects
@@ -9017,7 +9135,7 @@ function DrawRectangle(drawingId, pluginId, rectType) {
           position: tmpRect_.end.clone()
         };
         return {
-          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
             [tmpPoint.id]: tmpPoint
           })
         };
@@ -9033,19 +9151,19 @@ function DrawRectangle(drawingId, pluginId, rectType) {
       let newTmpObjs = null;
       if (additionIndex === 0) {
         const tmpPoint = state.tmpObjects[tmpPointId];
-        newTmpObjs = _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$k(_objectSpread$k({}, tmpPoint), {}, {
+        newTmpObjs = _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$l(_objectSpread$l({}, tmpPoint), {}, {
             position: snappedPos
           })
         });
       } else {
-        newTmpObjs = _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$k(_objectSpread$k({}, state.tmpObjects[tmpRectId]), {}, {
+        newTmpObjs = _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$l(_objectSpread$l({}, state.tmpObjects[tmpRectId]), {}, {
             end: new THREE__namespace.Vector3(snappedPos.x, snappedPos.y, 0)
           })
         });
       }
-      return _objectSpread$k(_objectSpread$k({}, state), {}, {
+      return _objectSpread$l(_objectSpread$l({}, state), {}, {
         tmpObjects: newTmpObjs,
         mousePos: snappedPos
       });
@@ -9054,9 +9172,9 @@ function DrawRectangle(drawingId, pluginId, rectType) {
   };
   const keydown = e => {
     if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
-      set(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
-        tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$k(_objectSpread$k({}, state.tmpObjects[tmpRectId]), {}, {
+      set(state => _objectSpread$l(_objectSpread$l({}, state), {}, {
+        tmpObjects: _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$l(_objectSpread$l({}, state.tmpObjects[tmpRectId]), {}, {
             isSquare: true
           })
         })
@@ -9065,9 +9183,9 @@ function DrawRectangle(drawingId, pluginId, rectType) {
   };
   const keyup = e => {
     if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
-      set(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
-        tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$k(_objectSpread$k({}, state.tmpObjects[tmpRectId]), {}, {
+      set(state => _objectSpread$l(_objectSpread$l({}, state), {}, {
+        tmpObjects: _objectSpread$l(_objectSpread$l({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$l(_objectSpread$l({}, state.tmpObjects[tmpRectId]), {}, {
             isSquare: false
           })
         })
@@ -9249,8 +9367,8 @@ const Circle$1 = ({
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", materialProps));
 };
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawArc(drawingId, pluginId, arcType) {
   // Global hooks:
   const {
@@ -9303,7 +9421,7 @@ function DrawArc(drawingId, pluginId, arcType) {
       additionIndex = 0;
       lastAddedEndPointId = NOCCID;
       set(state => {
-        const tmpStartP = _objectSpread$j(_objectSpread$j({}, state.tmpObjects[tmpStartPId]), {}, {
+        const tmpStartP = _objectSpread$k(_objectSpread$k({}, state.tmpObjects[tmpStartPId]), {}, {
           position: lastMousePos.clone()
         });
         return {
@@ -9316,20 +9434,20 @@ function DrawArc(drawingId, pluginId, arcType) {
       additionIndex = 1;
       set(state => {
         const tmpStartP = state.tmpObjects[tmpStartPId];
-        const tmpEndP = _objectSpread$j(_objectSpread$j({}, state.tmpObjects[tmpEndPId]), {}, {
+        const tmpEndP = _objectSpread$k(_objectSpread$k({}, state.tmpObjects[tmpEndPId]), {}, {
           position: lastMousePos.clone()
         });
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
-        const tmpCenterP = _objectSpread$j(_objectSpread$j({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$k(_objectSpread$k({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: centerPos ? centerPos : lastMousePos.clone()
         });
-        const tmpArc = _objectSpread$j(_objectSpread$j({}, state.tmpObjects[tmpArcId]), {}, {
+        const tmpArc = _objectSpread$k(_objectSpread$k({}, 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$j(_objectSpread$j({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -9440,7 +9558,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -9469,7 +9587,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
           })
@@ -9516,7 +9634,7 @@ function DrawArc(drawingId, pluginId, arcType) {
         var _lastAddedArc$childre;
         // Remove the old temporary arc and its points once a permanent one is created in its place
         set(state => {
-          const tmpObjects_ = _objectSpread$j({}, state.tmpObjects);
+          const tmpObjects_ = _objectSpread$k({}, state.tmpObjects);
           delete tmpObjects_[curStartPId];
           delete tmpObjects_[curEndPId];
           delete tmpObjects_[curCenterPId];
@@ -9549,20 +9667,20 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpCenterP = state.tmpObjects[curCenterPId];
         const tmpArcP = state.tmpObjects[curArcId];
         return {
-          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$j(_objectSpread$j({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$k(_objectSpread$k({}, tmpStartP), {}, {
               id: tmpStartPId,
               position: tmpEndP.position.clone()
             }),
-            [tmpEndPId]: _objectSpread$j(_objectSpread$j({}, tmpEndP), {}, {
+            [tmpEndPId]: _objectSpread$k(_objectSpread$k({}, tmpEndP), {}, {
               id: tmpEndPId,
               position: tmpEndP.position.clone()
             }),
-            [tmpCenterPId]: _objectSpread$j(_objectSpread$j({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$k(_objectSpread$k({}, tmpCenterP), {}, {
               id: tmpCenterPId,
               position: tmpEndP.position.clone()
             }),
-            [tmpArcId]: _objectSpread$j(_objectSpread$j({}, tmpArcP), {}, {
+            [tmpArcId]: _objectSpread$k(_objectSpread$k({}, tmpArcP), {}, {
               id: tmpArcId,
               startPId: tmpStartPId,
               endPId: tmpEndPId,
@@ -9584,8 +9702,8 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$j(_objectSpread$j({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$k(_objectSpread$k({}, tmpStartP), {}, {
               position: lastMousePos.clone()
             })
           })
@@ -9598,14 +9716,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$j(_objectSpread$j({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$k(_objectSpread$k({}, tmpEndP), {}, {
               position: lastMousePos.clone()
             }),
-            [tmpCenterPId]: _objectSpread$j(_objectSpread$j({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$k(_objectSpread$k({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$j(_objectSpread$j({}, tmpArc), {}, {
+            [tmpArcId]: _objectSpread$k(_objectSpread$k({}, tmpArc), {}, {
               // In case centerPos couldn't be calculated, the arc should be drawn as a line
               drawAsLine: centerPos === undefined,
               clockwise: false
@@ -9620,14 +9738,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const centerPos = calculateCenterPoint(tmpStartP.position, tmpEndP.position, lastMousePos);
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$j(_objectSpread$j({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$k(_objectSpread$k({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$k(_objectSpread$k({}, tmpEndP), {}, {
               position: arcType === HandlersList.DRAWARCTANGENT ? lastMousePos.clone() : tmpEndP.position
             }),
-            [tmpCenterPId]: _objectSpread$j(_objectSpread$j({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$k(_objectSpread$k({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$j(_objectSpread$j({}, tmpArc), {}, {
+            [tmpArcId]: _objectSpread$k(_objectSpread$k({}, 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)
@@ -9653,8 +9771,8 @@ function DrawArc(drawingId, pluginId, arcType) {
   };
 }
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawCircle(drawingId, pluginId) {
   const {
     set
@@ -9698,7 +9816,7 @@ function DrawCircle(drawingId, pluginId) {
     } else {
       additionIndex = 0;
       set(state => {
-        const tmpCenterP = _objectSpread$i(_objectSpread$i({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$j(_objectSpread$j({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: lastMousePos.clone()
         });
         return {
@@ -9727,7 +9845,7 @@ function DrawCircle(drawingId, pluginId) {
           radius: 0.001
         };
         return {
-          tmpObjects: _objectSpread$i(_objectSpread$i({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpCircle.id]: tmpCircle
           })
@@ -9749,7 +9867,7 @@ function DrawCircle(drawingId, pluginId) {
       }).then(() => {
         // Remove the old temporary circle and its center point once a permanent one is created in its place
         set(state => {
-          const tmpObjects_ = _objectSpread$i({}, state.tmpObjects);
+          const tmpObjects_ = _objectSpread$j({}, state.tmpObjects);
           delete tmpObjects_[curCenterPId];
           delete tmpObjects_[curCircleId];
           return {
@@ -9764,8 +9882,8 @@ function DrawCircle(drawingId, pluginId) {
       set(state => {
         const tmpCenterP = state.tmpObjects[curCenterPId];
         return {
-          tmpObjects: _objectSpread$i(_objectSpread$i({}, state.tmpObjects), {}, {
-            [tmpCenterPId]: _objectSpread$i(_objectSpread$i({}, tmpCenterP), {}, {
+          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
+            [tmpCenterPId]: _objectSpread$j(_objectSpread$j({}, tmpCenterP), {}, {
               id: tmpCenterPId,
               position: e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId))
             })
@@ -9785,8 +9903,8 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$i(_objectSpread$i({}, state.tmpObjects), {}, {
-            [tmpCenterPId]: _objectSpread$i(_objectSpread$i({}, tmpCenterP), {}, {
+          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
+            [tmpCenterPId]: _objectSpread$j(_objectSpread$j({}, tmpCenterP), {}, {
               position: snappedPos || localPos
             })
           })
@@ -9796,8 +9914,8 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCircle = state.tmpObjects[tmpCircleId];
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$i(_objectSpread$i({}, state.tmpObjects), {}, {
-            [tmpCircleId]: _objectSpread$i(_objectSpread$i({}, tmpCircle), {}, {
+          tmpObjects: _objectSpread$j(_objectSpread$j({}, state.tmpObjects), {}, {
+            [tmpCircleId]: _objectSpread$j(_objectSpread$j({}, tmpCircle), {}, {
               radius: Math.max(tmpCenterP.position.distanceTo(localPos), 0.001)
             })
           })
@@ -9923,7 +10041,7 @@ var img$F = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100
 var img$E = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='18.5' y='18.5' width='64' height='64' fill='%23C4C4C4' stroke='black' stroke-width='5'/%3e%3cpath d='M48.6562 36.4062V53.2637C48.6562 56.0645 47.7773 58.2793 46.0195 59.9082C44.2734 61.5371 41.8828 62.3516 38.8477 62.3516C35.8594 62.3516 33.4863 61.5605 31.7285 59.9785C29.9707 58.3965 29.0742 56.2227 29.0391 53.457V36.4062H34.3125V53.2988C34.3125 54.9746 34.7109 56.1992 35.5078 56.9727C36.3164 57.7344 37.4297 58.1152 38.8477 58.1152C41.8125 58.1152 43.3184 56.5566 43.3652 53.4395V36.4062H48.6562ZM66.252 55.2852C66.252 54.2891 65.9004 53.5273 65.1973 53C64.4941 52.4609 63.2285 51.8984 61.4004 51.3125C59.5723 50.7148 58.125 50.1289 57.0586 49.5547C54.1523 47.9844 52.6992 45.8691 52.6992 43.209C52.6992 41.8262 53.0859 40.5957 53.8594 39.5176C54.6445 38.4277 55.7637 37.5781 57.2168 36.9688C58.6816 36.3594 60.3223 36.0547 62.1387 36.0547C63.9668 36.0547 65.5957 36.3887 67.0254 37.0566C68.4551 37.7129 69.5625 38.6445 70.3477 39.8516C71.1445 41.0586 71.543 42.4297 71.543 43.9648H66.2695C66.2695 42.793 65.9004 41.8848 65.1621 41.2402C64.4238 40.584 63.3867 40.2559 62.0508 40.2559C60.7617 40.2559 59.7598 40.5312 59.0449 41.082C58.3301 41.6211 57.9727 42.3359 57.9727 43.2266C57.9727 44.0586 58.3887 44.7559 59.2207 45.3184C60.0645 45.8809 61.3008 46.4082 62.9297 46.9004C65.9297 47.8027 68.1152 48.9219 69.4863 50.2578C70.8574 51.5938 71.543 53.2578 71.543 55.25C71.543 57.4648 70.7051 59.2051 69.0293 60.4707C67.3535 61.7246 65.0977 62.3516 62.2617 62.3516C60.293 62.3516 58.5 61.9941 56.8828 61.2793C55.2656 60.5527 54.0293 59.5625 53.1738 58.3086C52.3301 57.0547 51.9082 55.6016 51.9082 53.9492H57.1992C57.1992 56.7734 58.8867 58.1855 62.2617 58.1855C63.5156 58.1855 64.4941 57.9336 65.1973 57.4297C65.9004 56.9141 66.252 56.1992 66.252 55.2852Z' fill='black'/%3e%3c/svg%3e";
   var useReference = img$E;
 
-var img$D = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M52.9688 53.0938H42.2812V71.5H36.25V26H51.3125C56.4375 26 60.375 27.1667 63.125 29.5C65.8958 31.8333 67.2812 35.2292 67.2812 39.6875C67.2812 42.5208 66.5104 44.9896 64.9688 47.0938C63.4479 49.1979 61.3229 50.7708 58.5938 51.8125L69.2812 71.125V71.5H62.8438L52.9688 53.0938ZM42.2812 48.1875H51.5C54.4792 48.1875 56.8438 47.4167 58.5938 45.875C60.3646 44.3333 61.25 42.2708 61.25 39.6875C61.25 36.875 60.4062 34.7188 58.7188 33.2188C57.0521 31.7188 54.6354 30.9583 51.4688 30.9375H42.2812V48.1875Z' fill='%235E5E5E'/%3e%3cpath d='M52.9688 53.0938L53.8499 52.621L53.5671 52.0938H52.9688V53.0938ZM42.2812 53.0938V52.0938H41.2812V53.0938H42.2812ZM42.2812 71.5V72.5H43.2812V71.5H42.2812ZM36.25 71.5H35.25V72.5H36.25V71.5ZM36.25 26V25H35.25V26H36.25ZM63.125 29.5L62.478 30.2625L62.4809 30.2649L63.125 29.5ZM64.9688 47.0938L64.1621 46.5027L64.1583 46.508L64.9688 47.0938ZM58.5938 51.8125L58.2372 50.8782L57.1611 51.2889L57.7188 52.2967L58.5938 51.8125ZM69.2812 71.125H70.2812V70.8668L70.1562 70.6408L69.2812 71.125ZM69.2812 71.5V72.5H70.2812V71.5H69.2812ZM62.8438 71.5L61.9626 71.9728L62.2454 72.5H62.8438V71.5ZM42.2812 48.1875H41.2812V49.1875H42.2812V48.1875ZM58.5938 45.875L57.9371 45.1208L57.9327 45.1246L58.5938 45.875ZM58.7188 33.2188L58.0498 33.9621L58.0544 33.9662L58.7188 33.2188ZM51.4688 30.9375L51.4753 29.9375H51.4688V30.9375ZM42.2812 30.9375V29.9375H41.2812V30.9375H42.2812ZM52.9688 52.0938H42.2812V54.0938H52.9688V52.0938ZM41.2812 53.0938V71.5H43.2812V53.0938H41.2812ZM42.2812 70.5H36.25V72.5H42.2812V70.5ZM37.25 71.5V26H35.25V71.5H37.25ZM36.25 27H51.3125V25H36.25V27ZM51.3125 27C56.2989 27 59.9717 28.136 62.478 30.2625L63.772 28.7375C60.7783 26.1974 56.5761 25 51.3125 25V27ZM62.4809 30.2649C64.9748 32.3651 66.2812 35.4498 66.2812 39.6875H68.2812C68.2812 35.0085 66.8169 31.3016 63.7691 28.7351L62.4809 30.2649ZM66.2812 39.6875C66.2812 42.3276 65.5672 44.585 64.1621 46.5027L65.7754 47.6848C67.4537 45.3942 68.2812 42.714 68.2812 39.6875H66.2812ZM64.1583 46.508C62.7655 48.435 60.8079 49.8971 58.2372 50.8782L58.9503 52.7468C61.838 51.6446 64.1304 49.9608 65.7792 47.6795L64.1583 46.508ZM57.7188 52.2967L68.4063 71.6092L70.1562 70.6408L59.4687 51.3283L57.7188 52.2967ZM68.2812 71.125V71.5H70.2812V71.125H68.2812ZM69.2812 70.5H62.8438V72.5H69.2812V70.5ZM63.7249 71.0272L53.8499 52.621L52.0876 53.5665L61.9626 71.9728L63.7249 71.0272ZM42.2812 49.1875H51.5V47.1875H42.2812V49.1875ZM51.5 49.1875C54.6531 49.1875 57.276 48.3686 59.2548 46.6254L57.9327 45.1246C56.4115 46.4648 54.3053 47.1875 51.5 47.1875V49.1875ZM59.2504 46.6292C61.2628 44.8772 62.25 42.5275 62.25 39.6875H60.25C60.25 42.0142 59.4664 43.7894 57.9371 45.1208L59.2504 46.6292ZM62.25 39.6875C62.25 36.665 61.3348 34.2062 59.3831 32.4713L58.0544 33.9662C59.4777 35.2313 60.25 37.085 60.25 39.6875H62.25ZM59.3877 32.4755C57.4763 30.7552 54.7864 29.9593 51.4753 29.9375L51.4622 31.9375C54.4844 31.9574 56.6279 32.6823 58.0498 33.962L59.3877 32.4755ZM51.4688 29.9375H42.2812V31.9375H51.4688V29.9375ZM41.2812 30.9375V48.1875H43.2812V30.9375H41.2812Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$D = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-linecap='square'%3e %3ccircle cx='50' cy='50' r='25' fill='%239c9c9c' stroke-width='5'/%3e %3ccircle cx='50' cy='50' r='5' stroke-width='6'/%3e %3cpath d='m80.642 75.712a40 40 0 0 1-30.642 14.288 40 40 0 0 1-30.642-14.288' fill='none' stroke-width='5'/%3e %3cpath d='m87.07 68.051-1.8316 11.517-9.1925-7.7135z' stroke-width='4'/%3e %3c/g%3e%3c/svg%3e";
 
 const RootContext = /*#__PURE__*/React.createContext({
   drawingId: -1,
@@ -9957,7 +10075,7 @@ const GroupLabel = styled.span`
 `;
 const PostfixSpace = styled.div`
   float: left;
-  margintop: 1px;
+  margin-top: 1px;
 `;
 const CollapseButtonSpace = styled.div`
   float: right;
@@ -9970,7 +10088,8 @@ const CollapseButton$1 = styled.div`
   border-left: 1px solid rgba(127, 127, 127, 1);
   padding: 1px 1px 0px 1px;
 `;
-const HelpSpace = styled.div`
+const InfoSpace = styled.div`
+  display: flex;
   float: right;
   padding: 1px 8px 0px 0px;
 `;
@@ -9988,6 +10107,7 @@ const SketchGroup = ({
   helpUrl = 'https://buerli.io/',
   collapse = false,
   postfix,
+  info,
   children
 }) => {
   const {
@@ -10004,7 +10124,7 @@ const SketchGroup = ({
   const onQuestionIconClick = React.useCallback(() => window.open(helpUrl, '_blank'), [helpUrl]);
   return /*#__PURE__*/React.createElement(GroupWrapper, null, /*#__PURE__*/React.createElement(HeaderSpace, null, /*#__PURE__*/React.createElement(GroupLabel, null, caption), postfix && /*#__PURE__*/React.createElement(PostfixSpace, null, postfix), /*#__PURE__*/React.createElement(CollapseButtonSpace, null, collapse && /*#__PURE__*/React.createElement(CollapseButton$1, {
     onClick: onCollapseClick
-  }, isDisplayed && /*#__PURE__*/React.createElement(icons.DownOutlined, null), !isDisplayed && /*#__PURE__*/React.createElement(icons.RightOutlined, null))), /*#__PURE__*/React.createElement(HelpSpace, null, /*#__PURE__*/React.createElement(QuestionIcon$1, {
+  }, isDisplayed && /*#__PURE__*/React.createElement(icons.DownOutlined, null), !isDisplayed && /*#__PURE__*/React.createElement(icons.RightOutlined, null))), /*#__PURE__*/React.createElement(InfoSpace, null, info, /*#__PURE__*/React.createElement(QuestionIcon$1, {
     onClick: onQuestionIconClick
   }))), isDisplayed && /*#__PURE__*/React.createElement(ContentSpace, null, children));
 };
@@ -10998,9 +11118,6 @@ const EyeIcon$1 = () => {
   return /*#__PURE__*/React.createElement(PluginTooltip, {
     title: `Constraints visibility: ${alwaysShowConstr ? 'Always show' : 'Show on hover'}`
   }, /*#__PURE__*/React.createElement(Component, {
-    style: {
-      marginTop: '1px'
-    },
     onClick: onClick
   }));
 };
@@ -11022,7 +11139,6 @@ const CoincidenceIcon = () => {
     style: {
       width: '14px',
       height: '14px',
-      marginTop: '1px',
       marginLeft: '2px',
       cursor: 'pointer',
       opacity: showCoincidence ? 1.0 : 0.5
@@ -11031,6 +11147,29 @@ const CoincidenceIcon = () => {
     onClick: onClick
   }));
 };
+const SolverState$1 = () => {
+  var _solverStateMemb$memb;
+  const {
+    drawingId,
+    pluginId
+  } = React.useContext(RootContext);
+  const sketchId = react.usePlugin(drawingId, pluginId, p => p.id);
+  const solverStateMemb = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$ske, _d$structure$tree$ske2;
+    return (_d$structure$tree$ske = d.structure.tree[sketchId]) == null ? void 0 : (_d$structure$tree$ske2 = _d$structure$tree$ske.members) == null ? void 0 : _d$structure$tree$ske2.solverState;
+  });
+  const solverState = solverStateMemb == null ? void 0 : (_solverStateMemb$memb = solverStateMemb.members[2]) == null ? void 0 : _solverStateMemb$memb.value;
+  const isSolved = Boolean(solverState && solverState & 1);
+  const Component = isSolved ? icons.CheckCircleTwoTone : icons.CloseCircleTwoTone;
+  return solverState === undefined ? null : /*#__PURE__*/React.createElement(PluginTooltip, {
+    title: isSolved ? 'Solved' : 'Not Solved'
+  }, /*#__PURE__*/React.createElement(Component, {
+    style: {
+      marginRight: '2px'
+    },
+    twoToneColor: isSolved ? '#52c41a' : '#eb2f96'
+  }));
+};
 const ConstrBtn = ({
   constrClass,
   disabled
@@ -11137,9 +11276,15 @@ const Constraints$2 = () => {
       display: 'flex'
     }
   }, /*#__PURE__*/React.createElement(EyeIcon$1, null), /*#__PURE__*/React.createElement(CoincidenceIcon, null));
+  const solverInfo = /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(SolverState$1, null));
   return /*#__PURE__*/React.createElement(SketchGroup, {
     caption: "Constraints",
-    postfix: postfix
+    postfix: postfix,
+    info: solverInfo
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React.createElement(ConstrButtonGroup, {
@@ -11377,8 +11522,8 @@ function recognizeFilletByArc(object, tree, sketchId) {
   };
 }
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Fillet(drawingId, pluginId) {
   const plugin = core.getPlugin(drawingId, pluginId);
   const set = plugin.set;
@@ -11510,7 +11655,7 @@ function Fillet(drawingId, pluginId) {
       if (!data) {
         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$h(_objectSpread$h({}, 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$i(_objectSpread$i({}, data.params), {}, {
         radius: 1
       })).mid, data.params.end).catch(console.warn);
       set({
@@ -11614,8 +11759,8 @@ function Trim(drawingId, pluginId) {
   };
 }
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const tolerance$5 = 1e-6;
 const tMinClosed = 1e-3;
 const tMaxClosed = 1 - 1e-3;
@@ -11785,7 +11930,7 @@ function intersectCircleCircle(circle1, circle2) {
   const c = w * w - dy * dy;
   let res = solveQuadratic(a, b, c).filter(u => u >= -1 && u <= 1).map(u => Math.acos(u) / (2 * Math.PI));
   res = [...res, ...res.map(u => -u)];
-  const points = res.map(t => getParameterizedPosition(t, _objectSpread$g(_objectSpread$g({}, circle1), {}, {
+  const points = res.map(t => getParameterizedPosition(t, _objectSpread$h(_objectSpread$h({}, circle1), {}, {
     class: classcad.CCClasses.CCCircle
   }))).filter(point => Math.abs(point.distanceTo(circle1.center) - circle1.radius) < tolerance$5 && Math.abs(point.distanceTo(circle2.center) - circle2.radius) < tolerance$5);
   const circle1Intersections = points.map(point => getNormalizedPosition(point, circle1));
@@ -12156,8 +12301,8 @@ function UseRef(drawingId, pluginId) {
   };
 }
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function SSelect(drawingId, pluginId) {
   const hoverHandler = Hover(drawingId, pluginId);
   const filter = object => true;
@@ -12208,10 +12353,10 @@ function SSelect(drawingId, pluginId) {
     name: HandlersList.SSELECT,
     filter,
     onDeactivate,
-    pointerHandlers: _objectSpread$f({
+    pointerHandlers: _objectSpread$g({
       onClick
     }, hoverHandler.pointerHandlers),
-    keyHandlers: _objectSpread$f({}, hoverHandler.keyHandlers)
+    keyHandlers: _objectSpread$g({}, hoverHandler.keyHandlers)
   };
 }
 
@@ -12274,6 +12419,7 @@ const useGeomParams = objId => {
   const isSelected = gSelected || sSelected;
   const isHovered = gHovered || sHovered;
   const isHighlighted = useSketchState(drawingId, pluginId, state => state.highlighted.indexOf(objId) !== -1);
+  const isConstrOverdefined = useSketchState(drawingId, pluginId, state => state.overdefined[objId] !== undefined);
   const {
     renderOrder,
     offsetUnits
@@ -12292,7 +12438,8 @@ const useGeomParams = objId => {
     polygonOffsetUnits: offsetUnits,
     isHovered,
     isSelected,
-    isHighlighted
+    isHighlighted,
+    isConstrOverdefined
   };
 };
 function isUnknown(lgsState) {
@@ -12317,11 +12464,13 @@ const getPointColor = objState => {
     isSelected,
     isGHovered,
     isHighlighted,
+    isConstrOverdefined,
     lgsState
   } = objState;
   if (!isSketchActive) return 0x006666;
   if (isSelected) return 0xffa500;
   if (isGHovered || isHighlighted) return 0x00ff00;
+  if (isConstrOverdefined) return 0x990000;
   if (isWelldefined(lgsState)) return 0x000000;
   if (isOverdefined(lgsState)) return 0x990000;
   return 0x0066ff;
@@ -12332,11 +12481,13 @@ const getLineColor = objState => {
     isSelected,
     isGHovered,
     isHighlighted,
+    isConstrOverdefined,
     lgsState
   } = objState;
   if (isSelected) return 0xffa500;
   if (isGHovered || isHighlighted) return 0x00ff00;
   if (!isSketchActive) return 0x009999;
+  if (isConstrOverdefined) return 0x990000;
   if (isWelldefined(lgsState)) return 0x000000;
   if (isOverdefined(lgsState)) return 0x990000;
   return 0x0066ff;
@@ -12347,11 +12498,13 @@ const getArcColor = objState => {
     isSelected,
     isGHovered,
     isHighlighted,
+    isConstrOverdefined,
     lgsState
   } = objState;
   if (isSelected) return 0xffa500;
   if (isGHovered || isHighlighted) return 0x00ff00;
   if (!isSketchActive) return 0x009999;
+  if (isConstrOverdefined) return 0x990000;
   if (isWelldefined(lgsState)) return 0x000000;
   if (isOverdefined(lgsState)) return 0x990000;
   return 0x0066ff;
@@ -12364,9 +12517,8 @@ const getConstrColor = objState => {
     lgsState
   } = objState;
   if (isSelected) return 0xffff00;
-  if (isUnknown(lgsState)) return 0x66ff66;
   if (isOverdefined(lgsState) && isSatisfied(lgsState)) return 0xff6600;
-  if (isOverdefined(lgsState)) return 0x990000;
+  if (isUnknown(lgsState) || isOverdefined(lgsState)) return 0x990000;
   if (isGHovered) return 0x28d79f;
   if (isHighlighted) return 0xbbecdd;
   return 0xdddddd;
@@ -12454,6 +12606,7 @@ const useColor = objId => {
   const sSelected = useIsSSelected(drawingId, objId);
   const isSelected = gSelected || sSelected;
   const isHighlighted = useSketchState(drawingId, pluginId, state => state.highlighted.indexOf(objId) !== -1);
+  const isConstrOverdefined = useSketchState(drawingId, pluginId, state => state.overdefined[objId] !== undefined);
   const lgsState = react.useDrawing(drawingId, d => {
     var _d$structure$tree$obj, _d$structure$tree$obj2, _d$structure$tree$obj3;
     return ((_d$structure$tree$obj = d.structure.tree[objId]) == null ? void 0 : (_d$structure$tree$obj2 = _d$structure$tree$obj.members) == null ? void 0 : (_d$structure$tree$obj3 = _d$structure$tree$obj2.lgsState) == null ? void 0 : _d$structure$tree$obj3.value) || 0;
@@ -12466,9 +12619,10 @@ const useColor = objId => {
       isGHovered: gHovered,
       isSHovered: sHovered,
       isSelected,
+      isConstrOverdefined,
       lgsState
     });
-  }, [drawingId, objId, gHovered, sHovered, isActive, isHighlighted, isSelected, lgsState]);
+  }, [drawingId, objId, gHovered, sHovered, isActive, isHighlighted, isSelected, isConstrOverdefined, lgsState]);
   return color;
 };
 const useUserData = objId => {
@@ -13186,8 +13340,8 @@ const Regions$1 = ({
   });
 };
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /*
  * !polygonOffset!
@@ -13229,13 +13383,14 @@ const CCLine = props => {
     polygonOffsetUnits,
     isHovered,
     isSelected,
-    isHighlighted
+    isHighlighted,
+    isConstrOverdefined
   } = useGeomParams(objId);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
     start: start,
     end: end,
-    scalePlus: isHovered || isSelected || isHighlighted,
-    meshProps: _objectSpread$e(_objectSpread$e({
+    scalePlus: isHovered || isSelected || isHighlighted || isConstrOverdefined,
+    meshProps: _objectSpread$f(_objectSpread$f({
       renderOrder
     }, handlers), {}, {
       userData
@@ -13272,7 +13427,8 @@ const CCPoint = props => {
     polygonOffsetUnits,
     isHovered,
     isSelected,
-    isHighlighted
+    isHighlighted,
+    isConstrOverdefined
   } = useGeomParams(objId);
   const position = convertToVector((_point$members = point.members) == null ? void 0 : _point$members.pos);
   React.useEffect(() => {
@@ -13284,8 +13440,8 @@ const CCPoint = props => {
     // 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 || isHighlighted,
-    meshProps: _objectSpread$e(_objectSpread$e({
+    scalePlus: isHovered || isSelected || isHighlighted || isConstrOverdefined,
+    meshProps: _objectSpread$f(_objectSpread$f({
       renderOrder
     }, handlers), {}, {
       userData
@@ -13332,15 +13488,16 @@ const CCArc = props => {
     polygonOffsetUnits,
     isHovered,
     isSelected,
-    isHighlighted
+    isHighlighted,
+    isConstrOverdefined
   } = useGeomParams(objId);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Arc, {
     start: startPoint,
     end: endPoint,
     center: centerPoint,
     clockwise: clockwise,
-    scalePlus: isHovered || isSelected || isHighlighted,
-    meshProps: _objectSpread$e({
+    scalePlus: isHovered || isSelected || isHighlighted || isConstrOverdefined,
+    meshProps: _objectSpread$f({
       renderOrder,
       userData
     }, handlers),
@@ -13377,13 +13534,14 @@ const CCCircle = props => {
     polygonOffsetUnits,
     isHovered,
     isSelected,
-    isHighlighted
+    isHighlighted,
+    isConstrOverdefined
   } = useGeomParams(objId);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, {
     center: center,
     radius: radius,
-    scalePlus: isHovered || isSelected || isHighlighted,
-    meshProps: _objectSpread$e({
+    scalePlus: isHovered || isSelected || isHighlighted || isConstrOverdefined,
+    meshProps: _objectSpread$f({
       renderOrder,
       userData
     }, handlers),
@@ -13895,17 +14053,17 @@ const MousePosition = () => {
   }, `${mousePos.x.toFixed(2)}, ${mousePos.y.toFixed(2)}`)) : null;
 };
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useGeometryOverridesStore = create((set, get) => ({
   overrides: {},
   addOverride: (name, override) => set(state => ({
-    overrides: _objectSpread$d(_objectSpread$d({}, state.overrides), {}, {
+    overrides: _objectSpread$e(_objectSpread$e({}, state.overrides), {}, {
       [name]: override
     })
   })),
   removeOverride: name => set(state => {
-    const overrides_ = _objectSpread$d({}, state.overrides);
+    const overrides_ = _objectSpread$e({}, state.overrides);
     delete overrides_[name];
     return {
       overrides: overrides_
@@ -13972,23 +14130,42 @@ const useOperationSequence = (drawingId, partId) => {
   }, [children, drawingId]);
 };
 
-const deleteFeature = (drawingId, featureId, opSeqId, isActive) => {
+const getFeatureIds = (drawingId, opSeqId) => {
   var _tree$opSeqId;
-  const pluginAPI = core.getDrawing(drawingId).api.plugin;
-  if (isActive) pluginAPI.setActiveFeature(null);
   const tree = core.getDrawing(drawingId).structure.tree;
   const featureRefIds = ((_tree$opSeqId = tree[opSeqId]) == null ? void 0 : _tree$opSeqId.children) || [];
-  const featureIds = featureRefIds.map(refId => {
+  return featureRefIds.map(refId => {
     var _tree$refId, _tree$refId$members;
     return (_tree$refId = tree[refId]) == null ? void 0 : (_tree$refId$members = _tree$refId.members) == null ? void 0 : _tree$refId$members.refObj.value;
-  });
-  const selectedInfo = core.getDrawing(drawingId).interaction.selected || [];
+  }).slice(7); // Ignore first 7 features since they are base WorkGeometry
+};
+
+const getHLConstraintIds = drawingId => {
+  var _tree$curProdId, _tree$constrSetId;
+  const drawing = core.getDrawing(drawingId);
+  const tree = drawing.structure.tree;
+  const curProdId = drawing.structure.currentProduct;
+  const prodChildren = ((_tree$curProdId = tree[curProdId]) == null ? void 0 : _tree$curProdId.children) || [];
+  const constrSetId = prodChildren.find(childId => classcad.ccUtils.base.isA(tree[childId].class, classcad.CCClasses.CCConstraintSet)) || NOCCID;
+  return ((_tree$constrSetId = tree[constrSetId]) == null ? void 0 : _tree$constrSetId.children) || [];
+};
+const deleteFeature = (drawingId, featureId, opSeqId) => {
+  var _drawing$structure$tr;
+  const drawing = core.getDrawing(drawingId);
+  const curProdId = drawing.structure.currentProduct;
+  const isPart = classcad.ccUtils.base.isA(((_drawing$structure$tr = drawing.structure.tree[curProdId]) == null ? void 0 : _drawing$structure$tr.class) || '', classcad.CCClasses.CCPart);
+  const featureIds = isPart ? getFeatureIds(drawingId, opSeqId) : getHLConstraintIds(drawingId);
+  if (featureIds.indexOf(drawing.plugin.active.feature) !== -1) {
+    const pluginAPI = drawing.api.plugin;
+    pluginAPI.setActiveFeature(null);
+  }
+  const selectedInfo = drawing.interaction.selected || [];
   const selectedFeatures = selectedInfo.map(info => info.objectId).filter(id => featureIds.indexOf(id) !== -1);
   const ids = selectedFeatures.indexOf(featureId) === -1 ? [...selectedFeatures, featureId] : selectedFeatures;
   const idsSorted = ids.sort((a, b) => b - a);
   classcad.ccAPI.baseModeler.deleteObjects(drawingId, idsSorted).catch(console.warn);
 };
-function useContextMenuItems$4(drawingId, isActive, setEditName) {
+function useContextMenuItems$4(drawingId, setEditName) {
   const curPartId = react.useDrawing(drawingId, d => d.structure.currentProduct || d.structure.root);
   const opSeqId = useOperationSequence(drawingId, curPartId) || NOCCID;
   return React.useMemo(() => {
@@ -14004,10 +14181,10 @@ function useContextMenuItems$4(drawingId, isActive, setEditName) {
       icon: /*#__PURE__*/React.createElement(icons.DeleteOutlined, null),
       key: 'deleteFeature',
       onClick: menuInfo => {
-        deleteFeature(drawingId, menuInfo.interactionInfo.objectId, opSeqId, isActive);
+        deleteFeature(drawingId, menuInfo.interactionInfo.objectId, opSeqId);
       }
     }];
-  }, [drawingId, opSeqId, isActive, setEditName]);
+  }, [drawingId, opSeqId, setEditName]);
 }
 
 const useCurrentInstance = drawingId => {
@@ -14345,6 +14522,101 @@ const GeometryOverridesManager = ({
   return null;
 };
 
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const ConstraintManager = ({
+  drawingId,
+  pluginId,
+  constraintId
+}) => {
+  var _constraint$members, _ref, _constraint$members2, _constraint$members2$;
+  const constraint = react.useDrawing(drawingId, d => d.structure.tree[constraintId]);
+  const entitiesMem = constraint == null ? void 0 : (_constraint$members = constraint.members) == null ? void 0 : _constraint$members.entities;
+  const lgsState = (_ref = constraint == null ? void 0 : (_constraint$members2 = constraint.members) == null ? void 0 : (_constraint$members2$ = _constraint$members2.lgsState) == null ? void 0 : _constraint$members2$.value) != null ? _ref : 1;
+  const isUnsatisfied = !(lgsState & 1);
+  const entities = React.useMemo(() => (entitiesMem == null ? void 0 : entitiesMem.members.map(memb => memb.value)) || [], [entitiesMem]);
+  const addOverdefined = React.useCallback(entities_ => {
+    const {
+      set
+    } = core.getPlugin(drawingId, pluginId);
+    const {
+      overdefined
+    } = getSketchState(drawingId, pluginId);
+    const overdefinedNew = _objectSpread$d({}, overdefined);
+    entities_.forEach(id => {
+      var _overdefined$id;
+      const entityConstrArr = ((_overdefined$id = overdefined[id]) == null ? void 0 : _overdefined$id.filter(cId => cId !== constraintId)) || [];
+      entityConstrArr.push(constraintId);
+      overdefinedNew[id] = entityConstrArr;
+    });
+    set({
+      overdefined: overdefinedNew
+    });
+  }, [drawingId, pluginId, constraintId]);
+  const removeOverdefined = React.useCallback(entities_ => {
+    const {
+      set
+    } = core.getPlugin(drawingId, pluginId);
+    const {
+      overdefined
+    } = getSketchState(drawingId, pluginId);
+    const overdefinedNew = _objectSpread$d({}, overdefined);
+    entities_.forEach(id => {
+      if (!overdefined[id]) {
+        return;
+      }
+      const entityConstrArr = overdefined[id].filter(cId => cId !== constraintId);
+      if (entityConstrArr.length === 0) {
+        delete overdefinedNew[id];
+        return;
+      }
+      overdefinedNew[id] = entityConstrArr;
+    });
+    set({
+      overdefined: overdefinedNew
+    });
+  }, [drawingId, pluginId, constraintId]);
+  React.useEffect(() => {
+    const {
+      overdefined
+    } = getSketchState(drawingId, pluginId);
+    if (isUnsatisfied && entities.some(id => !overdefined[id] || overdefined[id].indexOf(constraintId) === -1)) {
+      // Only update if some of constraint's entities aren't linked with the current unsatisfied constraint
+      addOverdefined(entities);
+    } else if (!isUnsatisfied && entities.some(id => overdefined[id] && overdefined[id].indexOf(constraintId) !== -1)) {
+      // Only update if some of constraint's entities are linked with the current satisfied constraint
+      removeOverdefined(entities);
+    }
+  }, [drawingId, pluginId, constraintId, entities, isUnsatisfied, addOverdefined, removeOverdefined]);
+
+  // Should only be executed on dismount
+  React.useEffect(() => {
+    return () => removeOverdefined(entities);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+};
+const OverdefinedStateManager = ({
+  drawingId,
+  pluginId
+}) => {
+  const sketchId = react.usePlugin(drawingId, pluginId, p => p.objectId);
+  const sketchChildren = useDrawingArr(drawingId, drawing => {
+    var _drawing$structure$tr;
+    return (_drawing$structure$tr = drawing.structure.tree[sketchId]) == null ? void 0 : _drawing$structure$tr.children;
+  });
+  const constraintIds = React.useMemo(() => {
+    const tree = core.getDrawing(drawingId).structure.tree;
+    return sketchChildren == null ? void 0 : sketchChildren.filter(id => is2DConstraint(tree[id]));
+  }, [drawingId, sketchChildren]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, constraintIds.map(id => /*#__PURE__*/React.createElement(ConstraintManager, {
+    key: id,
+    drawingId: drawingId,
+    pluginId: pluginId,
+    constraintId: id
+  })));
+};
+
 function useSetScale(drawingId, pluginId) {
   fiber.useFrame(args => {
     const plugin = core.getPlugin(drawingId, pluginId);
@@ -14573,6 +14845,7 @@ function useStateReset(drawingId, pluginId) {
           lastHoveredPos: {},
           constraintsToGeometry: {}
         },
+        overdefined: {},
         isDragged: false,
         mousePos: undefined,
         drawnObjectsRef: undefined,
@@ -14611,7 +14884,10 @@ const DrawingMode = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TmpGraphics, null), /*#__PURE__*/React.createElement(Sketch, {
     key: sketchId,
     objId: sketchId
-  }), /*#__PURE__*/React.createElement(MousePosition, null), /*#__PURE__*/React.createElement(RubberBandRectangle, null), dimId && /*#__PURE__*/React.createElement(DimensionSet, {
+  }), /*#__PURE__*/React.createElement(MousePosition, null), /*#__PURE__*/React.createElement(RubberBandRectangle, null), /*#__PURE__*/React.createElement(OverdefinedStateManager, {
+    drawingId: drawingId,
+    pluginId: pluginId
+  }), dimId && /*#__PURE__*/React.createElement(DimensionSet, {
     drawingId: drawingId,
     objectId: dimId,
     applyTransform: false,
@@ -15343,7 +15619,6 @@ function useContextMenuItems$3(drawingId, pluginId, setRename) {
 const {
   Text: Text$1
 } = antd.Typography;
-const DetailsContext = /*#__PURE__*/React.createContext(null);
 const RefTag = ({
   objId,
   refId,
@@ -15424,18 +15699,12 @@ const RefTag = ({
 const ObjTitle = ({
   objId,
   refId,
-  withMenu = false,
-  index
+  withMenu = false
 }) => {
   const {
     drawingId,
     pluginId
   } = React.useContext(RootContext);
-  const {
-    items,
-    lastSelected,
-    setLastSelected
-  } = React.useContext(DetailsContext);
   const name = useDrawingStr(drawingId, d => {
     var _d$structure$tree$obj;
     return (_d$structure$tree$obj = d.structure.tree[objId]) == null ? void 0 : _d$structure$tree$obj.name;
@@ -15445,10 +15714,14 @@ const ObjTitle = ({
     return (_d$structure$tree$obj2 = d.structure.tree[objId]) == null ? void 0 : _d$structure$tree$obj2.class;
   });
   const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
-  const treeObjInteraction = useTreeObjInteraction(drawingId, objId);
-  const isSHovered = treeObjInteraction.isSHovered;
-  const isSSelected = treeObjInteraction.isSSelected;
-  const onClickSel = treeObjInteraction.handlers.onClick;
+  const {
+    isSHovered,
+    isSSelected,
+    handlers
+  } = useTreeObjInteraction(drawingId, objId);
+  const onTreeObjClick = handlers.onClick;
+  const onTreeObjPointerOver = handlers.onPointerOver;
+  const onTreeObjPointerOut = handlers.onPointerOut;
   const isGHovered = react.useDrawing(drawingId, d => {
     var _d$interaction$hovere;
     return ((_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId) === objId;
@@ -15511,40 +15784,24 @@ const ObjTitle = ({
     unhover(drawingId, pluginId, objId);
     onHide_();
   }, [drawingId, pluginId, objId, onHide_]);
-
-  // TODO: Implement global selection in onClick? Not sure if needed...
   const onClick = React.useCallback(e => {
-    if (activeHandler === HandlersList.DRAG) {
-      if (index !== undefined && e.shiftKey && lastSelected !== -1) {
-        const start = Math.min(lastSelected, index);
-        const end = Math.max(lastSelected, index);
-        const toSelect = items.slice(start, end + 1);
-        const set = core.getPlugin(drawingId, pluginId).set;
-        set({
-          selected: toSelect
-        });
-      } else {
-        if (index !== undefined) {
-          setLastSelected(index);
-        }
-        select(drawingId, pluginId, objId);
-      }
-    } else if (!activeHandler) {
-      // if no handler is active, some selector should be active
-      onClickSel && onClickSel(e);
+    if (activeHandler === HandlersList.DRAG || activeHandler === HandlersList.SSELECT) {
+      onTreeObjClick(e);
     }
-  }, [drawingId, pluginId, objId, index, activeHandler, onClickSel, items, lastSelected, setLastSelected]);
+  }, [activeHandler, onTreeObjClick]);
   const onContextMenuDefault = React.useCallback(e => {
     e.preventDefault();
   }, []);
-  const onMouseEnter = React.useCallback(() => {
-    hover(drawingId, pluginId, [objId]);
-  }, [drawingId, pluginId, objId]);
+
+  /* const onMouseEnter = React.useCallback(() => {
+    hover(drawingId, pluginId, [objId])
+  }, [drawingId, pluginId, objId]) */
+
   const onMouseLeave = React.useCallback(() => {
     if (!isContextMenuActive) {
-      unhover(drawingId, pluginId, objId);
+      onTreeObjPointerOut(drawingId, pluginId, objId);
     }
-  }, [drawingId, pluginId, objId, isContextMenuActive]);
+  }, [drawingId, pluginId, objId, isContextMenuActive, onTreeObjPointerOut]);
   const nameComponent = rename ? /*#__PURE__*/React.createElement(NameEdit, {
     drawingId: drawingId,
     objId: objId,
@@ -15565,7 +15822,7 @@ const ObjTitle = ({
       margin: '0px 2px 0px 0px'
     },
     onClick: onClick,
-    onMouseEnter: onMouseEnter,
+    onMouseEnter: onTreeObjPointerOver,
     onMouseLeave: onMouseLeave,
     onContextMenu: withMenu ? onContextMenu : onContextMenuDefault
   }, imgName && resources[imgName] && /*#__PURE__*/React.createElement(Img, {
@@ -15610,8 +15867,7 @@ const ObjTitle = ({
 const SketchObj = ({
   objId,
   level,
-  refId,
-  index
+  refId
 }) => {
   const {
     drawingId
@@ -15629,8 +15885,7 @@ const SketchObj = ({
   }) : /*#__PURE__*/React.createElement(Indent, null), /*#__PURE__*/React.createElement(ObjTitle, {
     objId: objId,
     refId: refId,
-    withMenu: level === 0,
-    index: index
+    withMenu: level === 0
   })), children.map(childId => /*#__PURE__*/React.createElement("div", {
     key: childId,
     style: {
@@ -15646,6 +15901,7 @@ const Details = () => {
     drawingId,
     pluginId
   } = React.useContext(RootContext);
+  const curProduct = useDrawingCCId(drawingId, d => d.structure.currentProduct);
   const sketchId = react.usePlugin(drawingId, pluginId, plugin => plugin.objectId);
   const sketchChildren = react.useDrawing(drawingId, d => d.structure.tree[sketchId].children);
   const ccUseSetId = react.useDrawing(drawingId, d => sketchChildren == null ? void 0 : sketchChildren.find(id => {
@@ -15681,29 +15937,17 @@ const Details = () => {
   const hasConstraints = constraints.length > 0;
   const [geomCollapsed, setGeomCollapsed] = React.useState(false);
   const [constrCollapsed, setConstrCollapsed] = React.useState(false);
-  const geomStartIndex = refGeometry.length;
-  const constrStartIndex = geomStartIndex + geometry.length;
-  const [lastSelected, setLastSelected] = React.useState(-1);
-  const selectedInfo = useDrawingArr(drawingId, d => d.interaction.selected);
-  const selected = selectedInfo.map(info => info.objectId);
-  // Either reset lastSelected if selected array becomes empty, or set it to something if the user selects something in the view
-  React.useEffect(() => {
-    if (selected.length === 0) {
-      setLastSelected(-1);
-    } else if (lastSelected === -1) {
-      setLastSelected(items.findIndex(item => selected.indexOf(item) !== -1));
-    }
-  }, [selected, items, lastSelected]);
-  const contextValue = React.useMemo(() => ({
-    items,
-    lastSelected,
-    setLastSelected
-  }), [items, lastSelected]);
+  const createInfo_ = React.useCallback(objId => core.createInfo({
+    objectId: objId,
+    prodRefId: curProduct
+  }), [curProduct]);
   return /*#__PURE__*/React.createElement(SketchGroup, {
     caption: "Details",
     collapse: true
-  }, /*#__PURE__*/React.createElement(DetailsContext.Provider, {
-    value: contextValue
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: items,
+    createInfo: createInfo_
   }, !hasGeometry && /*#__PURE__*/React.createElement(Text$1, {
     style: {
       marginLeft: '2px'
@@ -15731,16 +15975,14 @@ const Details = () => {
     style: {
       display: geomCollapsed ? 'none' : 'block'
     }
-  }, refGeometry.map(([id, refId], i) => /*#__PURE__*/React.createElement(SketchObj, {
+  }, refGeometry.map(([id, refId]) => /*#__PURE__*/React.createElement(SketchObj, {
     objId: id,
     refId: refId,
     key: id,
-    index: i,
     level: 0
-  })), geometry.map((id, i) => /*#__PURE__*/React.createElement(SketchObj, {
+  })), geometry.map(id => /*#__PURE__*/React.createElement(SketchObj, {
     objId: id,
     key: id,
-    index: geomStartIndex + i,
     level: 0
   })))), hasConstraints && !isTrimActive && /*#__PURE__*/React.createElement("div", {
     style: {
@@ -15760,10 +16002,9 @@ const Details = () => {
     style: {
       display: constrCollapsed ? 'none' : 'block'
     }
-  }, constraints.map((id, i) => /*#__PURE__*/React.createElement(SketchObj, {
+  }, constraints.map(id => /*#__PURE__*/React.createElement(SketchObj, {
     objId: id,
     key: id,
-    index: constrStartIndex + i,
     level: 0
   }))))));
 };
@@ -16053,7 +16294,7 @@ const EditRegion = ({
     return (_d$structure$tree$reg = d.structure.tree[regionId]) == null ? void 0 : _d$structure$tree$reg.name;
   });
   const [rename, setRename] = React.useState(false);
-  const menuItems = useContextMenuItems$4(drawingId, false, setRename);
+  const menuItems = useContextMenuItems$4(drawingId, setRename);
   const menuInfo = React.useMemo(() => ({
     interactionInfo: core.createInfo({
       objectId: regionId
@@ -19496,6 +19737,13 @@ const SectionHeader = ({
   }, children);
 };
 
+const createConstraintInfo = (drawingId, constraintId) => {
+  const curInstanceId = core.getDrawing(drawingId).structure.currentInstance;
+  return core.createInfo({
+    objectId: constraintId,
+    prodRefId: curInstanceId
+  });
+};
 function usePrecheckErrorId$1(drawingId, constraintId) {
   const constraintChildren = useDrawingArr(drawingId, d => {
     var _d$structure$tree$con;
@@ -19594,25 +19842,16 @@ const Constraint = ({
   drawingId,
   constraintId
 }) => {
-  const hoveredId = react.useDrawing(drawingId, d => {
-    var _d$interaction$hovere;
-    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId;
-  });
   const name = react.useDrawing(drawingId, d => {
     var _d$structure$tree$con2;
     return (_d$structure$tree$con2 = d.structure.tree[constraintId]) == null ? void 0 : _d$structure$tree$con2.name;
   });
   const isActive = react.useDrawing(drawingId, d => d.plugin.active.feature === constraintId);
-  const isHovered = hoveredId === constraintId;
   const [rename, setRename] = React.useState(false);
-  const menuItems = useContextMenuItems$4(drawingId, isActive, setRename);
+  const menuItems = useContextMenuItems$4(drawingId, setRename);
   const menuInfo = React.useMemo(() => {
-    const curInstanceId = core.getDrawing(drawingId).structure.currentInstance;
     return {
-      interactionInfo: core.createInfo({
-        objectId: constraintId,
-        prodRefId: curInstanceId
-      })
+      interactionInfo: createConstraintInfo(drawingId, constraintId)
     };
   }, [drawingId, constraintId]);
   const {
@@ -19622,19 +19861,20 @@ const Constraint = ({
   } = useContextMenuInteraction(drawingId);
   const errorId = usePrecheckErrorId$1(drawingId, constraintId);
   const {
+    isGHovered,
+    isGSelected,
+    isSHovered,
     handlers
   } = useTreeObjInteraction(drawingId, constraintId);
   const onClick = handlers.onClick;
+  const isHovered = isGHovered || isSHovered;
+  const isHighlighted = isHovered || isGSelected;
   const onDoubleClick = React.useCallback(() => {
     core.getDrawing(drawingId).api.plugin.setActiveFeature(constraintId);
   }, [drawingId, constraintId]);
   const onMouseEnter = React.useCallback(() => {
     const setHovered = core.getDrawing(drawingId).api.interaction.setHovered;
-    const curInstanceId = core.getDrawing(drawingId).structure.currentInstance;
-    setHovered(core.createInfo({
-      objectId: constraintId,
-      prodRefId: curInstanceId
-    }));
+    setHovered(createConstraintInfo(drawingId, constraintId));
   }, [drawingId, constraintId]);
   const onMouseLeave = React.useCallback(() => {
     if (!isContextMenuActive) {
@@ -19667,7 +19907,7 @@ const Constraint = ({
       flex: 1,
       minWidth: '0px'
     },
-    hovered: isHovered,
+    hovered: isHighlighted,
     bordered: true,
     onClick: onClick,
     onDoubleClick: onDoubleClick,
@@ -19694,11 +19934,16 @@ const List$2 = ({
   constrIds,
   drawingId
 }) => {
-  return /*#__PURE__*/React.createElement("div", null, constrIds.map(constrId => /*#__PURE__*/React.createElement(Constraint, {
+  const createInfo_ = React.useCallback(objId => createConstraintInfo(drawingId, objId), [drawingId]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: constrIds,
+    createInfo: createInfo_
+  }, constrIds.map(constrId => /*#__PURE__*/React.createElement(Constraint, {
     key: constrId,
     drawingId: drawingId,
     constraintId: constrId
-  })));
+  }))));
 };
 
 /**
@@ -21227,7 +21472,7 @@ const Feature = ({
     const pluginApi = core.getDrawing(drawingId).api.plugin;
     pluginApi.setVisiblePlugin(featureId, !visible);
   }, [drawingId, visible, featureId, disabled, rename]);
-  const menuItems = useContextMenuItems$4(drawingId, isActive, setRename);
+  const menuItems = useContextMenuItems$4(drawingId, setRename);
   const {
     name: menuHeaderName,
     icon
@@ -21435,7 +21680,25 @@ const List$1 = ({
     var _d$structure$tree$opS;
     return (_d$structure$tree$opS = d.structure.tree[opSeqId]) == null ? void 0 : _d$structure$tree$opS.children;
   });
-  return /*#__PURE__*/React.createElement(SortableList, {
+  const featureIds = React.useMemo(() => {
+    const tree = core.getDrawing(drawingId).structure.tree;
+    return featureRefIds.map(refId => {
+      var _tree$refId, _tree$refId$members;
+      return (_tree$refId = tree[refId]) == null ? void 0 : (_tree$refId$members = _tree$refId.members) == null ? void 0 : _tree$refId$members.refObj.value;
+    });
+  }, [drawingId, featureRefIds]);
+  const createInfo_ = React.useCallback(objId => {
+    const productId = core.getDrawing(drawingId).structure.currentProduct;
+    return core.createInfo({
+      objectId: objId,
+      prodRefId: productId
+    });
+  }, [drawingId]);
+  return /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: featureIds,
+    createInfo: createInfo_
+  }, /*#__PURE__*/React.createElement(SortableList, {
     items: featureRefIds,
     onSortEnd: (oldIndex, newIndex) => {
       const rootId_ = core.getDrawing(drawingId).structure.currentProduct;
@@ -21452,7 +21715,7 @@ const List$1 = ({
       drawingId: drawingId,
       featureRefId: item
     })
-  });
+  }));
 };
 const FeatureList = ({
   drawingId
@@ -21523,6 +21786,22 @@ const usePatternConstraintInfo = drawingId => {
     instances: isPatternActive ? [instanceId] : undefined
   }), [isPatternActive, instanceId]);
 };
+const useIsNestedMateSSelected = (drawingId, instanceId) => {
+  const matePath = React.useMemo(() => getMatePath(drawingId, instanceId), [drawingId, instanceId]);
+  return react.useDrawing(drawingId, d => {
+    const selection = d.selection.refs[d.selection.active || ''];
+    const selItem = selection == null ? void 0 : selection.items[0];
+    if (!selItem || selItem.scope !== MateScope) {
+      return false;
+    }
+    const selPath = selItem.data.matePath;
+    if (matePath.length > selPath.length) {
+      return false;
+    }
+    const shift = selPath.length - matePath.length;
+    return matePath.every((id, index) => id === selPath[index + shift]);
+  }) || false;
+};
 
 // Sets all products in tree hidden/visible
 function setProductsHidden(drawingId, prodId, hidden) {
@@ -21614,7 +21893,8 @@ const InstanceTitle = ({
   const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.graphicId && sel.prodRefId ? sel.prodRefId : sel.objectId)) || [];
   const isGSelected = selectedIds.indexOf(instanceId) !== -1;
   const isSelected = isGSelected || isSSelected;
-  const isHighlighted = isHovered || isSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, instanceId, selectedIds[0]) : false);
+  const isMateSSelected = useIsNestedMateSSelected(drawingId, instanceId);
+  const isHighlighted = isHovered || isSelected || isMateSSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, instanceId, selectedIds[0]) : false);
   const isBlocked = react.useDrawing(drawingId, d => {
     var _d$selection$refs;
     const isSelActive = d.selection.active !== null;
@@ -21874,6 +22154,10 @@ const InstanceNode = ({
   const [collapsed, setCollapsed] = React.useState(true);
   const ref = React.useRef(null);
   const hasCollapsed = ((_ref$current = ref.current) == null ? void 0 : _ref$current.children) && ref.current.children.length > 0;
+  const createInfo_ = React.useCallback(objId => core.createInfo({
+    objectId: objId,
+    prodRefId: objId
+  }), []);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlexRow, null, /*#__PURE__*/React.createElement(Indents, {
     level: level
   }), hasCollapsed ? /*#__PURE__*/React.createElement(CollapseButton, {
@@ -21888,6 +22172,10 @@ const InstanceNode = ({
     style: {
       display: collapsed ? 'none' : 'block'
     }
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: instanceChildren,
+    createInfo: createInfo_
   }, geometrySetId && /*#__PURE__*/React.createElement(GeometrySetNode, {
     drawingId: drawingId,
     objectId: geometrySetId,
@@ -21898,7 +22186,7 @@ const InstanceNode = ({
     drawingId: drawingId,
     nodeId: childId,
     level: level + 1
-  }))));
+  })))));
 };
 const AssemblyNode = ({
   drawingId,
@@ -21941,6 +22229,10 @@ const AssemblyNodeList = ({
     var _tree$id2;
     return classcad.ccUtils.base.isA((_tree$id2 = tree[id]) == null ? void 0 : _tree$id2.class, classcad.CCClasses.CCGeometrySet);
   });
+  const createInfo_ = React.useCallback(objId => core.createInfo({
+    objectId: objId,
+    prodRefId: objId
+  }), []);
   const {
     isPatternActive,
     instances
@@ -21956,6 +22248,10 @@ const AssemblyNodeList = ({
   }), [currentInstance, isPatternActive, activeRigidsets]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AssemblyNodeContext.Provider, {
     value: contextValue
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: instanceChildren,
+    createInfo: createInfo_
   }, geometrySetId && /*#__PURE__*/React.createElement(GeometrySetNode, {
     drawingId: drawingId,
     objectId: geometrySetId,
@@ -21966,7 +22262,7 @@ const AssemblyNodeList = ({
     drawingId: drawingId,
     nodeId: childId,
     level: 0
-  }))));
+  })))));
 };
 
 const Skeleton = styled(SkeletonImpl)`
@@ -22428,6 +22724,20 @@ function useContextMenuItems$1(drawingId, setEditName) {
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const createSolidInfo = (drawingId, solidId) => {
+  var _drawing$graphic$cont, _drawing$structure$tr;
+  const drawing = core.getDrawing(drawingId);
+  const solidOwner = (_drawing$graphic$cont = drawing.graphic.containers[solidId]) == null ? void 0 : _drawing$graphic$cont.owner;
+  const curInstanceId = drawing.structure.currentInstance;
+  const curProdId = drawing.structure.currentProduct;
+  const isPart = classcad.ccUtils.base.isA(((_drawing$structure$tr = drawing.structure.tree[curProdId]) == null ? void 0 : _drawing$structure$tr.class) || '', classcad.CCClasses.CCPart);
+  return core.createInfo({
+    objectId: solidOwner,
+    graphicId: solidId,
+    containerId: solidId,
+    prodRefId: isPart ? curProdId : curInstanceId
+  });
+};
 const EyeComponent = ({
   drawingId,
   solidId
@@ -22464,46 +22774,39 @@ const Solid = ({
   drawingId,
   solidId
 }) => {
-  const hoveredId = react.useDrawing(drawingId, d => {
-    var _d$interaction$hovere;
-    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.containerId;
-  });
-  const selected = react.useDrawing(drawingId, d => d.interaction.selected);
-  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.containerId || -1)) || [];
+  const {
+    setLastSelected,
+    multiSelect
+  } = React.useContext(MultiSelectContext) || {
+    setLastSelected: undefined,
+    multiSelect: undefined
+  };
   const solidOwner = useDrawingCCId(drawingId, d => {
     var _d$graphic$containers;
     return (_d$graphic$containers = d.graphic.containers[solidId]) == null ? void 0 : _d$graphic$containers.owner;
   });
   const ccSolid = react.useDrawing(drawingId, d => d.structure.tree[solidOwner]);
-  const isHovered = hoveredId === solidId;
-  const isSelected = selectedIds.indexOf(solidId) !== -1;
+  const isHovered = react.useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+    return ((_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.containerId) === solidId;
+  }) || false;
+  const isSelected = react.useDrawing(drawingId, d => {
+    var _d$interaction$select;
+    return (_d$interaction$select = d.interaction.selected) == null ? void 0 : _d$interaction$select.some(sel => sel.containerId === solidId);
+  }) || false;
   const isHighlighted = isHovered || isSelected;
   const [rename, setRename] = React.useState(false);
   const menuItems = useContextMenuItems$1(drawingId, setRename);
-  const menuInfo = React.useMemo(() => {
-    var _drawing$structure$tr;
-    const drawing = core.getDrawing(drawingId);
-    const curInstanceId = drawing.structure.currentInstance;
-    const curProdId = drawing.structure.currentProduct;
-    const isPart = classcad.ccUtils.base.isA(((_drawing$structure$tr = drawing.structure.tree[curProdId]) == null ? void 0 : _drawing$structure$tr.class) || '', classcad.CCClasses.CCPart);
-    return {
-      interactionInfo: core.createInfo({
-        objectId: solidOwner,
-        graphicId: solidId,
-        containerId: solidId,
-        prodRefId: isPart ? curProdId : curInstanceId
-      })
-    };
-  }, [drawingId, solidId, solidOwner]);
+  const menuInfo = React.useMemo(() => ({
+    interactionInfo: createSolidInfo(drawingId, solidId)
+  }), [drawingId, solidId]);
   const {
     isContextMenuActive,
     onContextMenu,
     onHide
   } = useContextMenuInteraction(drawingId);
   const onClick = React.useCallback(e => {
-    var _drawing$structure$tr2;
     const drawing = core.getDrawing(drawingId);
-    const curInstanceId = drawing.structure.currentInstance;
     const curProdId = drawing.structure.currentProduct;
     const selId = drawing.selection.active;
     if (selId) {
@@ -22526,29 +22829,18 @@ const Solid = ({
       }
       return;
     }
+    setLastSelected == null ? void 0 : setLastSelected(solidId, !e.shiftKey);
+    if (e.shiftKey && multiSelect) {
+      multiSelect(solidId);
+      return;
+    }
     const select = drawing.api.interaction.select;
-    const multi = e.shiftKey;
-    const isPart = classcad.ccUtils.base.isA(((_drawing$structure$tr2 = drawing.structure.tree[curProdId]) == null ? void 0 : _drawing$structure$tr2.class) || '', classcad.CCClasses.CCPart);
-    select(core.createInfo({
-      objectId: solidOwner,
-      graphicId: solidId,
-      containerId: solidId,
-      prodRefId: isPart ? curProdId : curInstanceId
-    }), multi);
-  }, [drawingId, solidId, solidOwner]);
+    select(createSolidInfo(drawingId, solidId), e.ctrlKey || e.shiftKey);
+  }, [drawingId, solidId, setLastSelected, multiSelect]);
   const onMouseEnter = React.useCallback(() => {
-    var _getDrawing$structure;
     const setHovered = core.getDrawing(drawingId).api.interaction.setHovered;
-    const curInstanceId = core.getDrawing(drawingId).structure.currentInstance;
-    const curProdId = core.getDrawing(drawingId).structure.currentProduct;
-    const isPart = classcad.ccUtils.base.isA(((_getDrawing$structure = core.getDrawing(drawingId).structure.tree[curProdId]) == null ? void 0 : _getDrawing$structure.class) || '', classcad.CCClasses.CCPart);
-    setHovered(core.createInfo({
-      objectId: solidOwner,
-      graphicId: solidId,
-      containerId: solidId,
-      prodRefId: isPart ? curProdId : curInstanceId
-    }));
-  }, [drawingId, solidId, solidOwner]);
+    setHovered(createSolidInfo(drawingId, solidId));
+  }, [drawingId, solidId]);
   const onMouseLeave = React.useCallback(() => {
     if (!isContextMenuActive) {
       const setHovered = core.getDrawing(drawingId).api.interaction.setHovered;
@@ -22609,11 +22901,16 @@ const List = ({
   solidsIds,
   drawingId
 }) => {
-  return /*#__PURE__*/React.createElement("div", null, solidsIds.map(solidId => /*#__PURE__*/React.createElement(Solid, {
+  const createInfo_ = React.useCallback(solidId => createSolidInfo(drawingId, solidId), [drawingId]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: solidsIds,
+    createInfo: createInfo_
+  }, solidsIds.map(solidId => /*#__PURE__*/React.createElement(Solid, {
     key: solidId,
     drawingId: drawingId,
     solidId: solidId
-  })));
+  }))));
 };
 
 /**
@@ -22719,199 +23016,197 @@ const PartModeCmds = (drawingId, rootId) => {
     }
     return res;
   };
-  return {
-    Sketch: {
-      label: 'Sketch',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$A
-      }),
-      callback: wrapper(() => classcad.ccAPI.sketcher.createSketch(drawingId, rootId))
-    },
-    Work: [{
-      label: 'Workpoint',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$z
-      }),
-      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkPoint, 'WorkPoint'))
-    }, {
-      label: 'Workaxis',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$y
-      }),
-      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkAxis, 'WorkAxis'))
-    }, {
-      label: 'Workplane',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$x
-      }),
-      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkPlane, 'WorkPlane'))
-    }, {
-      label: 'WorkCsys',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$w
-      }),
-      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkCSys, 'WorkCSys'))
-    }],
-    Solid: [{
-      label: 'Extrusion',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$U
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCExtrusion, 'Extrusion'))
-    }, {
-      label: 'Revolve',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$T
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCRevolve, 'Revolve'))
-    }, {
-      label: 'Twist',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$v
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTwist, 'Twist'))
-    }],
-    Boolean: {
-      label: 'Boolean',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$u
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCUnion, 'Union'))
-    },
-    Slice: [{
-      label: 'Slice',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$r
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCSlice, 'Slice'))
-    }, {
-      label: 'Slice by sheet',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$r
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCSliceBySheet, 'Slice by sheet'))
-    }],
-    Edge: [{
-      label: 'Fillet',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$t
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCConstantRadiusFillet, 'Fillet'))
-    }, {
-      label: 'Chamfer',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$s
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCChamfer, 'Chamfer'))
-    }],
-    Patterns: [{
-      label: 'Linear pattern',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$q
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCLinearPattern, 'Linear pattern'))
-    }, {
-      label: 'Circular pattern',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$p
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCCircularPattern, 'Circular pattern'))
-    }, {
-      label: 'Mirror',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$F
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCMirror, 'Mirror'))
-    }],
-    Translation: [{
-      label: 'Translation',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$o
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTranslation, 'Translate'))
-    }, {
-      label: 'Rotation',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$n
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCRotation, 'Rotate'))
-    }, {
-      label: 'Transformation by Csys',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$m
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTransformationByCSys, 'Transform by Csys'))
-    }],
-    BasicShapes: [{
-      label: 'Add Box',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$l
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Box', 'Box'))
-    }, {
-      label: 'Add Sphere',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$k
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Sphere', 'Sphere'))
-    }, {
-      label: 'Add Cylinder',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$j
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Cylinder', 'Cylinder'))
-    }, {
-      label: 'Add Cone',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$i
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Cone', 'Cone'))
-    }],
-    Import: {
-      label: 'Import',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$h
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCImport, 'Import'))
-    },
-    CompositeCurve: {
-      label: 'Composite Curve',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$f
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCCompositeCurve, 'Composite Curve'))
-    },
-    Deletion: {
-      label: 'Delete Entity',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$g
-      }),
-      callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCEntityDeletion, 'Entity Deletion'))
+  return [{
+    label: 'Sketch',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$A
+    }),
+    callback: wrapper(() => classcad.ccAPI.sketcher.createSketch(drawingId, rootId))
+  }, [{
+    label: 'Workpoint',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$z
+    }),
+    callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkPoint, 'WorkPoint'))
+  }, {
+    label: 'Workaxis',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$y
+    }),
+    callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkAxis, 'WorkAxis'))
+  }, {
+    label: 'Workplane',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$x
+    }),
+    callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkPlane, 'WorkPlane'))
+  }, {
+    label: 'WorkCsys',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$w
+    }),
+    callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, classcad.CCClasses.CCWorkCSys, 'WorkCSys'))
+  }], [{
+    label: 'Extrusion',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$U
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCExtrusion, 'Extrusion'))
+  }, {
+    label: 'Revolve',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$T
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCRevolve, 'Revolve'))
+  }, {
+    label: 'Twist',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$v
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTwist, 'Twist'))
+  }], {
+    label: 'Boolean',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$u
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCUnion, 'Union'))
+  }, [{
+    label: 'Slice',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$r
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCSlice, 'Slice'))
+  }, {
+    label: 'Slice by sheet',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$r
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCSliceBySheet, 'Slice by sheet'))
+  }], [{
+    label: 'Fillet',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$t
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCConstantRadiusFillet, 'Fillet'))
+  }, {
+    label: 'Chamfer',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$s
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCChamfer, 'Chamfer'))
+  }], [{
+    label: 'Linear pattern',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$q
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCLinearPattern, 'Linear pattern'))
+  }, {
+    label: 'Circular pattern',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$p
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCCircularPattern, 'Circular pattern'))
+  }, {
+    label: 'Mirror',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$F
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCMirror, 'Mirror'))
+  }], [{
+    label: 'Translation',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$o
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTranslation, 'Translate'))
+  }, {
+    label: 'Rotation',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$n
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCRotation, 'Rotate'))
+  }, {
+    label: 'Transformation by Csys',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$m
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCTransformationByCSys, 'Transform by Csys'))
+  }], [{
+    label: 'Add Box',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$l
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Box', 'Box'))
+  }, {
+    label: 'Add Sphere',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$k
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Sphere', 'Sphere'))
+  }, {
+    label: 'Add Cylinder',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$j
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Cylinder', 'Cylinder'))
+  }, {
+    label: 'Add Cone',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$i
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, 'CC_Cone', 'Cone'))
+  }], {
+    label: 'Import',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$h
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCImport, 'Import'))
+  }, {
+    label: 'Composite Curve',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$f
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCCompositeCurve, 'Composite Curve'))
+  }, {
+    label: 'Delete Entity',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$g
+    }),
+    callback: wrapper(() => featureApi.createFeature(drawingId, rootId, classcad.CCClasses.CCEntityDeletion, 'Entity Deletion'))
+  }, {
+    type: 'divider'
+  }, {
+    label: 'Expressions',
+    icon: /*#__PURE__*/React.createElement(icons.FontSizeOutlined, null),
+    callback: async () => {
+      const gPlugins = core.getDrawing(drawingId).plugin.refs;
+      const exprPlugin = Object.values(gPlugins).find(p => p.name === 'Expressions');
+      const pApi = core.getDrawing(drawingId).api.plugin;
+      exprPlugin && pApi.setActiveGlobal(exprPlugin.id, true);
     }
-  };
+  }];
 };
 
-var img$e = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M40.375 51.4062H21.2812V71.5H15.2812V26H43.4688V30.9375H21.2812V46.5H40.375V51.4062ZM85.6562 50.2188C85.6562 54.6771 84.9062 58.5729 83.4062 61.9062C81.9062 65.2188 79.7812 67.75 77.0312 69.5C74.2812 71.25 71.0729 72.125 67.4062 72.125C63.8229 72.125 60.6458 71.25 57.875 69.5C55.1042 67.7292 52.9479 65.2188 51.4062 61.9688C49.8854 58.6979 49.1042 54.9167 49.0625 50.625V47.3438C49.0625 42.9688 49.8229 39.1042 51.3438 35.75C52.8646 32.3958 55.0104 29.8333 57.7812 28.0625C60.5729 26.2708 63.7604 25.375 67.3438 25.375C70.9896 25.375 74.1979 26.2604 76.9688 28.0312C79.7604 29.7812 81.9062 32.3333 83.4062 35.6875C84.9062 39.0208 85.6562 42.9062 85.6562 47.3438V50.2188ZM79.6875 47.2812C79.6875 41.8854 78.6042 37.75 76.4375 34.875C74.2708 31.9792 71.2396 30.5312 67.3438 30.5312C63.5521 30.5312 60.5625 31.9792 58.375 34.875C56.2083 37.75 55.0938 41.75 55.0312 46.875V50.2188C55.0312 55.4479 56.125 59.5625 58.3125 62.5625C60.5208 65.5417 63.5521 67.0312 67.4062 67.0312C71.2812 67.0312 74.2812 65.625 76.4062 62.8125C78.5312 59.9792 79.625 55.9271 79.6875 50.6562V47.2812Z' fill='%235E5E5E'/%3e%3cpath d='M40.375 51.4062V52.4062H41.375V51.4062H40.375ZM21.2812 51.4062V50.4062H20.2812V51.4062H21.2812ZM21.2812 71.5V72.5H22.2812V71.5H21.2812ZM15.2812 71.5H14.2812V72.5H15.2812V71.5ZM15.2812 26V25H14.2812V26H15.2812ZM43.4688 26H44.4688V25H43.4688V26ZM43.4688 30.9375V31.9375H44.4688V30.9375H43.4688ZM21.2812 30.9375V29.9375H20.2812V30.9375H21.2812ZM21.2812 46.5H20.2812V47.5H21.2812V46.5ZM40.375 46.5H41.375V45.5H40.375V46.5ZM40.375 50.4062H21.2812V52.4062H40.375V50.4062ZM20.2812 51.4062V71.5H22.2812V51.4062H20.2812ZM21.2812 70.5H15.2812V72.5H21.2812V70.5ZM16.2812 71.5V26H14.2812V71.5H16.2812ZM15.2812 27H43.4688V25H15.2812V27ZM42.4688 26V30.9375H44.4688V26H42.4688ZM43.4688 29.9375H21.2812V31.9375H43.4688V29.9375ZM20.2812 30.9375V46.5H22.2812V30.9375H20.2812ZM21.2812 47.5H40.375V45.5H21.2812V47.5ZM39.375 46.5V51.4062H41.375V46.5H39.375ZM83.4062 61.9062L84.3172 62.3188L84.3182 62.3166L83.4062 61.9062ZM57.875 69.5L57.3365 70.3426L57.341 70.3455L57.875 69.5ZM51.4062 61.9688L50.4995 62.3904L50.5027 62.3973L51.4062 61.9688ZM49.0625 50.625H48.0625L48.0625 50.6347L49.0625 50.625ZM57.7812 28.0625L58.3198 28.9051L58.3214 28.9041L57.7812 28.0625ZM76.9688 28.0312L76.4302 28.8739L76.4376 28.8785L76.9688 28.0312ZM83.4062 35.6875L82.4934 36.0957L82.4943 36.0979L83.4062 35.6875ZM76.4375 34.875L75.6368 35.4741L75.6389 35.4769L76.4375 34.875ZM58.375 34.875L57.5771 34.2722L57.5764 34.2731L58.375 34.875ZM55.0312 46.875L54.0312 46.8628V46.875H55.0312ZM58.3125 62.5625L57.5045 63.1517L57.5091 63.158L58.3125 62.5625ZM76.4062 62.8125L77.2041 63.4153L77.2062 63.4125L76.4062 62.8125ZM79.6875 50.6562L80.6875 50.6681V50.6562H79.6875ZM84.6562 50.2188C84.6562 54.566 83.925 58.3167 82.4943 61.4959L84.3182 62.3166C85.8875 58.8292 86.6562 54.7882 86.6562 50.2188H84.6562ZM82.4953 61.4937C81.0659 64.6504 79.0619 67.0225 76.4944 68.6563L77.5681 70.3437C80.5006 68.4775 82.7466 65.7871 84.3172 62.3188L82.4953 61.4937ZM76.4944 68.6563C73.9243 70.2919 70.9072 71.125 67.4062 71.125V73.125C71.2386 73.125 74.6382 72.2081 77.5681 70.3437L76.4944 68.6563ZM67.4062 71.125C63.9936 71.125 61.0052 70.2942 58.409 68.6545L57.341 70.3455C60.2865 72.2058 63.6522 73.125 67.4062 73.125V71.125ZM58.4135 68.6574C55.8155 66.997 53.7788 64.6371 52.3098 61.5402L50.5027 62.3973C52.117 65.8004 54.3928 68.4613 57.3365 70.3426L58.4135 68.6574ZM52.313 61.5471C50.8625 58.4276 50.103 54.7912 50.0625 50.6153L48.0625 50.6347C48.1053 55.0421 48.9083 58.9683 50.4995 62.3904L52.313 61.5471ZM50.0625 50.625V47.3438H48.0625V50.625H50.0625ZM50.0625 47.3438C50.0625 43.0848 50.8025 39.3653 52.2545 36.163L50.433 35.337C48.8433 38.843 48.0625 42.8527 48.0625 47.3438H50.0625ZM52.2545 36.163C53.7053 32.9632 55.7311 30.5595 58.3198 28.9051L57.2427 27.2199C54.2898 29.1071 52.0238 31.8285 50.433 35.337L52.2545 36.163ZM58.3214 28.9041C60.9389 27.2242 63.9359 26.375 67.3438 26.375V24.375C63.5849 24.375 60.2069 25.3175 57.2411 27.2209L58.3214 28.9041ZM67.3438 26.375C70.8202 26.375 73.8374 27.2168 76.4302 28.8739L77.5073 27.1886C74.5584 25.304 71.159 24.375 67.3438 24.375V26.375ZM76.4376 28.8785C79.0423 30.5113 81.0646 32.9009 82.4934 36.0957L84.3191 35.2793C82.7479 31.7658 80.4785 29.0512 77.4999 27.184L76.4376 28.8785ZM82.4943 36.0979C83.9252 39.2776 84.6562 43.0181 84.6562 47.3438H86.6562C86.6562 42.7944 85.8873 38.764 84.3182 35.2771L82.4943 36.0979ZM84.6562 47.3438V50.2188H86.6562V47.3438H84.6562ZM80.6875 47.2812C80.6875 41.7713 79.5843 37.389 77.2361 34.2731L75.6389 35.4769C77.6241 38.111 78.6875 41.9995 78.6875 47.2812H80.6875ZM77.2382 34.2759C74.8664 31.1059 71.5265 29.5312 67.3438 29.5312V31.5312C70.9527 31.5312 73.6753 32.8524 75.6368 35.4741L77.2382 34.2759ZM67.3438 29.5312C63.2549 29.5312 59.9632 31.1134 57.5771 34.2722L59.1729 35.4778C61.1618 32.8449 63.8492 31.5312 67.3438 31.5312V29.5312ZM57.5764 34.2731C55.2374 37.3768 54.0954 41.6121 54.0313 46.8628L56.0312 46.8872C56.0921 41.8879 57.1792 38.1232 59.1736 35.4769L57.5764 34.2731ZM54.0312 46.875V50.2188H56.0312V46.875H54.0312ZM54.0312 50.2188C54.0312 55.5758 55.1505 59.9233 57.5045 63.1517L59.1205 61.9733C57.0995 59.2017 56.0312 55.3201 56.0312 50.2188H54.0312ZM57.5091 63.158C59.9146 66.4031 63.25 68.0312 67.4062 68.0312V66.0312C63.8542 66.0312 61.127 64.6802 59.1159 61.967L57.5091 63.158ZM67.4062 68.0312C71.5589 68.0312 74.8695 66.5053 77.2041 63.4153L75.6084 62.2097C73.693 64.7447 71.0036 66.0312 67.4062 66.0312V68.0312ZM77.2062 63.4125C79.5072 60.3445 80.6236 56.0527 80.6874 50.6681L78.6876 50.6444C78.6264 55.8015 77.5553 59.6138 75.6063 62.2125L77.2062 63.4125ZM80.6875 50.6562V47.2812H78.6875V50.6562H80.6875Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$e = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-width='6'%3e %3crect x='32' y='37' width='36' height='36' fill='%239c9c9c' stroke-linecap='square'/%3e %3cpath d='m50 15v35' fill='none'/%3e %3cpath d='m12 75 33-15' fill='none'/%3e %3cpath d='m88 75-33-15' fill='none'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$d = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M62.375 51.4062H43.2812V71.5H37.2812V26H65.4688V30.9375H43.2812V46.5H62.375V51.4062Z' fill='%235E5E5E'/%3e%3cpath d='M62.375 51.4062V52.4062H63.375V51.4062H62.375ZM43.2812 51.4062V50.4062H42.2812V51.4062H43.2812ZM43.2812 71.5V72.5H44.2812V71.5H43.2812ZM37.2812 71.5H36.2812V72.5H37.2812V71.5ZM37.2812 26V25H36.2812V26H37.2812ZM65.4688 26H66.4688V25H65.4688V26ZM65.4688 30.9375V31.9375H66.4688V30.9375H65.4688ZM43.2812 30.9375V29.9375H42.2812V30.9375H43.2812ZM43.2812 46.5H42.2812V47.5H43.2812V46.5ZM62.375 46.5H63.375V45.5H62.375V46.5ZM62.375 50.4062H43.2812V52.4062H62.375V50.4062ZM42.2812 51.4062V71.5H44.2812V51.4062H42.2812ZM43.2812 70.5H37.2812V72.5H43.2812V70.5ZM38.2812 71.5V26H36.2812V71.5H38.2812ZM37.2812 27H65.4688V25H37.2812V27ZM64.4688 26V30.9375H66.4688V26H64.4688ZM65.4688 29.9375H43.2812V31.9375H65.4688V29.9375ZM42.2812 30.9375V46.5H44.2812V30.9375H42.2812ZM43.2812 47.5H62.375V45.5H43.2812V47.5ZM61.375 46.5V51.4062H63.375V46.5H61.375Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$d = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='%239c9c9c'%3e %3crect x='7' y='55' width='86' height='38'/%3e %3crect x='32' y='32' width='36' height='36' stroke='black' stroke-linecap='square' stroke-width='6'/%3e %3cpath d='m10 55h30' stroke='black' stroke-linecap='square' stroke-width='6'/%3e %3cpath d='m90 55h-30' stroke='black' stroke-linecap='square' stroke-width='6'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$c = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M49.6875 51.2188C44.5417 49.7396 40.7917 47.9271 38.4375 45.7812C36.1042 43.6146 34.9375 40.9479 34.9375 37.7812C34.9375 34.1979 36.3646 31.2396 39.2188 28.9062C42.0938 26.5521 45.8229 25.375 50.4062 25.375C53.5312 25.375 56.3125 25.9792 58.75 27.1875C61.2083 28.3958 63.1042 30.0625 64.4375 32.1875C65.7917 34.3125 66.4688 36.6354 66.4688 39.1562H60.4375C60.4375 36.4062 59.5625 34.25 57.8125 32.6875C56.0625 31.1042 53.5938 30.3125 50.4062 30.3125C47.4479 30.3125 45.1354 30.9688 43.4688 32.2812C41.8229 33.5729 41 35.375 41 37.6875C41 39.5417 41.7812 41.1146 43.3438 42.4062C44.9271 43.6771 47.6042 44.8438 51.375 45.9062C55.1667 46.9688 58.125 48.1458 60.25 49.4375C62.3958 50.7083 63.9792 52.1979 65 53.9062C66.0417 55.6146 66.5625 57.625 66.5625 59.9375C66.5625 63.625 65.125 66.5833 62.25 68.8125C59.375 71.0208 55.5312 72.125 50.7188 72.125C47.5938 72.125 44.6771 71.5312 41.9688 70.3438C39.2604 69.1354 37.1667 67.4896 35.6875 65.4062C34.2292 63.3229 33.5 60.9583 33.5 58.3125H39.5312C39.5312 61.0625 40.5417 63.2396 42.5625 64.8438C44.6042 66.4271 47.3229 67.2188 50.7188 67.2188C53.8854 67.2188 56.3125 66.5729 58 65.2812C59.6875 63.9896 60.5312 62.2292 60.5312 60C60.5312 57.7708 59.75 56.0521 58.1875 54.8438C56.625 53.6146 53.7917 52.4062 49.6875 51.2188Z' fill='%235E5E5E'/%3e%3cpath d='M49.6875 51.2188L49.9654 50.2582L49.9638 50.2577L49.6875 51.2188ZM38.4375 45.7812L37.757 46.5141L37.7639 46.5203L38.4375 45.7812ZM39.2188 28.9062L39.8517 29.6805L39.8523 29.68L39.2188 28.9062ZM58.75 27.1875L58.3058 28.0835L58.3089 28.0849L58.75 27.1875ZM64.4375 32.1875L63.5904 32.719L63.5942 32.7249L64.4375 32.1875ZM66.4688 39.1562V40.1562H67.4688V39.1562H66.4688ZM60.4375 39.1562H59.4375V40.1562H60.4375V39.1562ZM57.8125 32.6875L57.1416 33.4291L57.1465 33.4334L57.8125 32.6875ZM43.4688 32.2812L44.0861 33.0679L44.0874 33.0669L43.4688 32.2812ZM43.3438 42.4062L42.7066 43.177L42.7122 43.1816L42.7178 43.1861L43.3438 42.4062ZM51.375 45.9062L51.1038 46.8688L51.1052 46.8692L51.375 45.9062ZM60.25 49.4375L59.7306 50.2921L59.7404 50.2979L60.25 49.4375ZM65 53.9062L64.1416 54.4192L64.1462 54.4269L65 53.9062ZM62.25 68.8125L62.8592 69.6056L62.8628 69.6028L62.25 68.8125ZM41.9688 70.3438L41.5613 71.257L41.5672 71.2596L41.9688 70.3438ZM35.6875 65.4062L34.8682 65.9797L34.8721 65.9852L35.6875 65.4062ZM33.5 58.3125V57.3125H32.5V58.3125H33.5ZM39.5312 58.3125H40.5312V57.3125H39.5312V58.3125ZM42.5625 64.8438L41.9407 65.627L41.9497 65.634L42.5625 64.8438ZM58.1875 54.8438L57.5692 55.6297L57.5758 55.6348L58.1875 54.8438ZM49.9638 50.2577C44.8778 48.7957 41.2993 47.0367 39.1111 45.0422L37.7639 46.5203C40.284 48.8174 44.2055 50.6834 49.4112 52.1798L49.9638 50.2577ZM39.118 45.0485C36.9871 43.0698 35.9375 40.6681 35.9375 37.7812H33.9375C33.9375 41.2277 35.2212 44.1594 37.757 46.514L39.118 45.0485ZM35.9375 37.7812C35.9375 34.5079 37.2221 31.8302 39.8517 29.6805L38.5858 28.132C35.5071 30.649 33.9375 33.888 33.9375 37.7812H35.9375ZM39.8523 29.68C42.5099 27.5038 45.9983 26.375 50.4062 26.375V24.375C45.6475 24.375 41.6776 25.6003 38.5852 28.1325L39.8523 29.68ZM50.4062 26.375C53.4001 26.375 56.0256 26.9531 58.3059 28.0835L59.1941 26.2915C56.5994 25.0053 53.6624 24.375 50.4062 24.375V26.375ZM58.3089 28.0849C60.6164 29.2192 62.3648 30.7656 63.5904 32.719L65.2846 31.656C63.8435 29.3594 61.8003 27.5725 59.1911 26.2901L58.3089 28.0849ZM63.5942 32.7249C64.846 34.6893 65.4688 36.8257 65.4688 39.1562H67.4688C67.4688 36.4451 66.7374 33.9357 65.2808 31.6501L63.5942 32.7249ZM66.4688 38.1562H60.4375V40.1562H66.4688V38.1562ZM61.4375 39.1562C61.4375 36.1753 60.4781 33.7269 58.4785 31.9416L57.1465 33.4334C58.6469 34.7731 59.4375 36.6372 59.4375 39.1562H61.4375ZM58.4834 31.946C56.4933 30.1454 53.7536 29.3125 50.4062 29.3125V31.3125C53.4339 31.3125 55.6317 32.063 57.1416 33.429L58.4834 31.946ZM50.4062 29.3125C47.3105 29.3125 44.751 29.9986 42.8501 31.4956L44.0874 33.0669C45.5198 31.9389 47.5853 31.3125 50.4062 31.3125V29.3125ZM42.8514 31.4946C40.9363 32.9975 40 35.1049 40 37.6875H42C42 35.6451 42.7095 34.1483 44.0861 33.0679L42.8514 31.4946ZM40 37.6875C40 39.8701 40.9387 41.7155 42.7066 43.177L43.9809 41.6355C42.6238 40.5137 42 39.2133 42 37.6875H40ZM42.7178 43.1861C44.4635 44.5873 47.3015 45.7974 51.1038 46.8688L51.6462 44.9437C47.9069 43.8901 45.3907 42.7669 43.9697 41.6264L42.7178 43.1861ZM51.1052 46.8692C54.8538 47.9196 57.7151 49.0669 59.7306 50.292L60.7694 48.583C58.5349 47.2248 55.4795 46.0179 51.6448 44.9433L51.1052 46.8692ZM59.7404 50.2979C61.7785 51.5049 63.2253 52.8858 64.1416 54.4192L65.8584 53.3933C64.7331 51.5101 63.0132 49.9117 60.7596 48.5771L59.7404 50.2979ZM64.1462 54.4269C65.0782 55.9553 65.5625 57.7796 65.5625 59.9375H67.5625C67.5625 57.4704 67.0052 55.2739 65.8538 53.3856L64.1462 54.4269ZM65.5625 59.9375C65.5625 63.3208 64.2641 65.9855 61.6372 68.0222L62.8628 69.6028C65.9859 67.1812 67.5625 63.9292 67.5625 59.9375H65.5625ZM61.6408 68.0194C58.9901 70.0555 55.3829 71.125 50.7188 71.125V73.125C55.6796 73.125 59.7599 71.9862 62.8592 69.6056L61.6408 68.0194ZM50.7188 71.125C47.724 71.125 44.9449 70.5568 42.3703 69.4279L41.5672 71.2596C44.4092 72.5057 47.4635 73.125 50.7188 73.125V71.125ZM42.3762 69.4305C39.8047 68.2832 37.8628 66.7427 36.5029 64.8273L34.8721 65.9852C36.4706 68.2365 38.7161 69.9876 41.5613 71.257L42.3762 69.4305ZM36.5067 64.8328C35.171 62.9246 34.5 60.762 34.5 58.3125H32.5C32.5 61.1547 33.2873 63.7212 34.8683 65.9797L36.5067 64.8328ZM33.5 59.3125H39.5312V57.3125H33.5V59.3125ZM38.5312 58.3125C38.5312 61.3445 39.6634 63.8192 41.9408 65.627L43.1842 64.0605C41.4199 62.66 40.5312 60.7805 40.5312 58.3125H38.5312ZM41.9497 65.634C44.2149 67.3907 47.1709 68.2188 50.7188 68.2188V66.2188C47.4749 66.2188 44.9934 65.4635 43.1753 64.0535L41.9497 65.634ZM50.7188 68.2188C54.0023 68.2188 56.6788 67.5519 58.6078 66.0753L57.3922 64.4872C55.9462 65.5939 53.7686 66.2188 50.7188 66.2188V68.2188ZM58.6078 66.0753C60.5563 64.5839 61.5312 62.5227 61.5312 60H59.5312C59.5312 61.9356 58.8187 63.3953 57.3922 64.4872L58.6078 66.0753ZM61.5312 60C61.5312 57.5066 60.6404 55.4765 58.7992 54.0527L57.5758 55.6348C58.8596 56.6276 59.5312 58.0351 59.5312 60H61.5312ZM58.8058 54.0578C57.0802 52.7003 54.0838 51.4498 49.9654 50.2582L49.4096 52.1793C53.4995 53.3627 56.1698 54.5288 57.5692 55.6297L58.8058 54.0578Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$c = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m20 50h60' fill='%239c9c9c' stroke='black' stroke-linecap='round' stroke-width='5'/%3e%3crect x='37' y='37' width='26' height='26' fill='%239c9c9c' stroke='black' stroke-linecap='round' stroke-width='5'/%3e%3cpath d='m10 50 10-6v12z' stroke='black' stroke-linecap='square' stroke-width='5'/%3e%3cpath d='m90 50-10-6v12z' stroke='black' stroke-linecap='square' stroke-width='5'/%3e%3crect x='10' y='15' width='80' height='10'/%3e%3crect x='10' y='75' width='80' height='10'/%3e%3c/g%3e%3c/svg%3e";
 
-var img$b = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M70.75 57.0625C70.1875 61.875 68.4062 65.5938 65.4062 68.2188C62.4271 70.8229 58.4583 72.125 53.5 72.125C48.125 72.125 43.8125 70.1979 40.5625 66.3438C37.3333 62.4896 35.7188 57.3333 35.7188 50.875V46.5C35.7188 42.2708 36.4688 38.5521 37.9688 35.3438C39.4896 32.1354 41.6354 29.6771 44.4062 27.9688C47.1771 26.2396 50.3854 25.375 54.0312 25.375C58.8646 25.375 62.7396 26.7292 65.6562 29.4375C68.5729 32.125 70.2708 35.8542 70.75 40.625H64.7188C64.1979 37 63.0625 34.375 61.3125 32.75C59.5833 31.125 57.1562 30.3125 54.0312 30.3125C50.1979 30.3125 47.1875 31.7292 45 34.5625C42.8333 37.3958 41.75 41.4271 41.75 46.6562V51.0625C41.75 56 42.7812 59.9271 44.8438 62.8438C46.9062 65.7604 49.7917 67.2188 53.5 67.2188C56.8333 67.2188 59.3854 66.4688 61.1562 64.9688C62.9479 63.4479 64.1354 60.8125 64.7188 57.0625H70.75Z' fill='%235E5E5E'/%3e%3cpath d='M70.75 57.0625L71.7432 57.1786L71.8737 56.0625H70.75V57.0625ZM65.4062 68.2188L66.0644 68.9717L66.0648 68.9713L65.4062 68.2188ZM40.5625 66.3438L39.796 66.986L39.798 66.9884L40.5625 66.3438ZM37.9688 35.3438L37.0651 34.9154L37.0629 34.9202L37.9688 35.3438ZM44.4062 27.9688L44.9311 28.82L44.9357 28.8171L44.4062 27.9688ZM65.6562 29.4375L64.9758 30.1703L64.9786 30.1729L65.6562 29.4375ZM70.75 40.625V41.625H71.8555L71.745 40.5251L70.75 40.625ZM64.7188 40.625L63.7289 40.7672L63.8522 41.625H64.7188V40.625ZM61.3125 32.75L60.6277 33.4787L60.632 33.4828L61.3125 32.75ZM45 34.5625L44.2085 33.9514L44.2056 33.955L45 34.5625ZM61.1562 64.9688L61.8026 65.7318L61.8034 65.7311L61.1562 64.9688ZM64.7188 57.0625V56.0625H63.8623L63.7306 56.9088L64.7188 57.0625ZM69.7568 56.9464C69.2165 61.5683 67.5228 65.038 64.7477 67.4662L66.0648 68.9713C69.2897 66.1495 71.1585 62.1817 71.7432 57.1786L69.7568 56.9464ZM64.7481 67.4658C61.9938 69.8734 58.2797 71.125 53.5 71.125V73.125C58.637 73.125 62.8603 71.7724 66.0644 68.9717L64.7481 67.4658ZM53.5 71.125C48.3975 71.125 44.3731 69.3115 41.327 65.6991L39.798 66.9884C43.2519 71.0843 47.8525 73.125 53.5 73.125V71.125ZM41.329 65.7015C38.2893 62.0735 36.7188 57.1666 36.7188 50.875H34.7188C34.7188 57.5 36.3774 62.9057 39.796 66.986L41.329 65.7015ZM36.7188 50.875V46.5H34.7188V50.875H36.7188ZM36.7188 46.5C36.7188 42.3892 37.4475 38.8198 38.8746 35.7673L37.0629 34.9202C35.49 38.2844 34.7188 42.1525 34.7188 46.5H36.7188ZM38.8724 35.7721C40.3183 32.7219 42.3396 30.4177 44.9311 28.82L43.8814 27.1175C40.9313 28.9364 38.6609 31.549 37.0651 34.9154L38.8724 35.7721ZM44.9357 28.8171C47.5297 27.1983 50.5502 26.375 54.0312 26.375V24.375C50.2206 24.375 46.8245 25.2809 43.8768 27.1204L44.9357 28.8171ZM54.0312 26.375C58.6692 26.375 62.282 27.6689 64.9758 30.1703L66.3367 28.7047C63.1971 25.7894 59.06 24.375 54.0312 24.375V26.375ZM64.9786 30.1729C67.6794 32.6615 69.2949 36.1442 69.755 40.7249L71.745 40.5251C71.2467 35.5641 69.4664 31.5885 66.3339 28.7021L64.9786 30.1729ZM70.75 39.625H64.7188V41.625H70.75V39.625ZM65.7086 40.4828C65.1717 36.7462 63.9795 33.8618 61.993 32.0172L60.632 33.4828C62.1455 34.8882 63.2241 37.2538 63.7289 40.7672L65.7086 40.4828ZM61.9973 32.0213C60.03 30.1725 57.3278 29.3125 54.0312 29.3125V31.3125C56.9847 31.3125 59.1366 32.0775 60.6277 33.4787L61.9973 32.0213ZM54.0312 29.3125C49.9135 29.3125 46.6003 30.8534 44.2085 33.9514L45.7915 35.1736C47.7747 32.605 50.4823 31.3125 54.0312 31.3125V29.3125ZM44.2056 33.955C41.8562 37.0275 40.75 41.3059 40.75 46.6562H42.75C42.75 41.5483 43.8105 37.7642 45.7944 35.17L44.2056 33.955ZM40.75 46.6562V51.0625H42.75V46.6562H40.75ZM40.75 51.0625C40.75 56.1298 41.8075 60.2821 44.0273 63.4211L45.6602 62.2664C43.755 59.5721 42.75 55.8702 42.75 51.0625H40.75ZM44.0273 63.4211C46.2855 66.6146 49.4817 68.2188 53.5 68.2188V66.2188C50.1016 66.2188 47.527 64.9062 45.6602 62.2664L44.0273 63.4211ZM53.5 68.2188C56.9687 68.2188 59.7865 67.4395 61.8026 65.7318L60.5099 64.2057C58.9843 65.498 56.698 66.2188 53.5 66.2188V68.2188ZM61.8034 65.7311C63.8616 63.9841 65.1079 61.0665 65.7069 57.2162L63.7306 56.9088C63.1629 60.5585 62.0343 62.9118 60.5091 64.2064L61.8034 65.7311ZM64.7188 58.0625H70.75V56.0625H64.7188V58.0625Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$b = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-linecap='square'%3e %3cellipse cx='50' cy='55' rx='25' ry='15' fill='%239c9c9c' stroke-width='6'/%3e %3cellipse cx='50' cy='55' rx='5' ry='2' stroke-width='6'/%3e %3cpath d='m80.642 74.284a40 30 0 0 1-30.642 10.716 40 30 0 0 1-30.642-10.716' fill='none' stroke-width='6'/%3e %3cpath d='m88.503 63.648-0.82085 11.633-9.8298-6.8829z' stroke-width='4'/%3e %3cpath d='m50 55v-35' stroke-width='5'/%3e %3cpath d='m50 10 6 10h-12z' stroke-width='4'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$a = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M23.7812 53.6875V71.5H17.7812V26H34.5625C39.5417 26 43.4375 27.2708 46.25 29.8125C49.0833 32.3542 50.5 35.7188 50.5 39.9062C50.5 44.3229 49.1146 47.7292 46.3438 50.125C43.5938 52.5 39.6458 53.6875 34.5 53.6875H23.7812ZM23.7812 48.7812H34.5625C37.7708 48.7812 40.2292 48.0312 41.9375 46.5312C43.6458 45.0104 44.5 42.8229 44.5 39.9688C44.5 37.2604 43.6458 35.0938 41.9375 33.4688C40.2292 31.8438 37.8854 31 34.9062 30.9375H23.7812V48.7812ZM64.1875 66.5938H85.75V71.5H58.1562V26H64.1875V66.5938Z' fill='%235E5E5E'/%3e%3cpath d='M23.7812 53.6875V52.6875H22.7812V53.6875H23.7812ZM23.7812 71.5V72.5H24.7812V71.5H23.7812ZM17.7812 71.5H16.7812V72.5H17.7812V71.5ZM17.7812 26V25H16.7812V26H17.7812ZM46.25 29.8125L45.5795 30.5544L45.5822 30.5569L46.25 29.8125ZM46.3438 50.125L46.9974 50.8818L46.9978 50.8814L46.3438 50.125ZM23.7812 48.7812H22.7812V49.7812H23.7812V48.7812ZM41.9375 46.5312L42.5973 47.2827L42.6024 47.2782L41.9375 46.5312ZM34.9062 30.9375L34.9272 29.9377L34.9167 29.9375H34.9062V30.9375ZM23.7812 30.9375V29.9375H22.7812V30.9375H23.7812ZM22.7812 53.6875V71.5H24.7812V53.6875H22.7812ZM23.7812 70.5H17.7812V72.5H23.7812V70.5ZM18.7812 71.5V26H16.7812V71.5H18.7812ZM17.7812 27H34.5625V25H17.7812V27ZM34.5625 27C39.3734 27 43.0023 28.2254 45.5795 30.5544L46.9205 29.0706C43.8727 26.3163 39.71 25 34.5625 25V27ZM45.5822 30.5569C48.1816 32.8886 49.5 35.971 49.5 39.9062H51.5C51.5 35.4665 49.9851 31.8197 46.9178 29.0681L45.5822 30.5569ZM49.5 39.9062C49.5 44.0979 48.1958 47.2016 45.6897 49.3686L46.9978 50.8814C50.0334 48.2567 51.5 44.5479 51.5 39.9062H49.5ZM45.6901 49.3682C43.1847 51.532 39.5046 52.6875 34.5 52.6875V54.6875C39.787 54.6875 44.0028 53.468 46.9974 50.8818L45.6901 49.3682ZM34.5 52.6875H23.7812V54.6875H34.5V52.6875ZM23.7812 49.7812H34.5625V47.7812H23.7812V49.7812ZM34.5625 49.7812C37.9145 49.7812 40.6437 48.998 42.5973 47.2827L41.2777 45.7798C39.8146 47.0645 37.6272 47.7812 34.5625 47.7812V49.7812ZM42.6024 47.2782C44.5749 45.5222 45.5 43.0321 45.5 39.9688H43.5C43.5 42.6137 42.7168 44.4986 41.2726 45.7843L42.6024 47.2782ZM45.5 39.9688C45.5 37.0311 44.5636 34.5866 42.6267 32.7442L41.2483 34.1933C42.7281 35.6009 43.5 37.4898 43.5 39.9688H45.5ZM42.6267 32.7442C40.6937 30.9055 38.0874 30.004 34.9272 29.9377L34.8853 31.9373C37.6834 31.996 39.7646 32.782 41.2483 34.1933L42.6267 32.7442ZM34.9062 29.9375H23.7812V31.9375H34.9062V29.9375ZM22.7812 30.9375V48.7812H24.7812V30.9375H22.7812ZM64.1875 66.5938H63.1875V67.5938H64.1875V66.5938ZM85.75 66.5938H86.75V65.5938H85.75V66.5938ZM85.75 71.5V72.5H86.75V71.5H85.75ZM58.1562 71.5H57.1562V72.5H58.1562V71.5ZM58.1562 26V25H57.1562V26H58.1562ZM64.1875 26H65.1875V25H64.1875V26ZM64.1875 67.5938H85.75V65.5938H64.1875V67.5938ZM84.75 66.5938V71.5H86.75V66.5938H84.75ZM85.75 70.5H58.1562V72.5H85.75V70.5ZM59.1562 71.5V26H57.1562V71.5H59.1562ZM58.1562 27H64.1875V25H58.1562V27ZM63.1875 26V66.5938H65.1875V26H63.1875Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$a = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-linecap='square' stroke-width='5'%3e %3cpath d='m20 50h60' fill='%239c9c9c'/%3e %3cpath d='m50 20v60' fill='%239c9c9c'/%3e %3crect x='37' y='37' width='26' height='26' fill='%239c9c9c'/%3e %3cpath d='m10 50 10-6v12z'/%3e %3cpath d='m90 50-10-6v12z'/%3e %3cpath d='m50 10-6 10h12z'/%3e %3cpath d='m50 90-6-10h12z'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$9 = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M22.2812 53.6875V71.5H16.2812V26H33.0625C38.0417 26 41.9375 27.2708 44.75 29.8125C47.5833 32.3542 49 35.7188 49 39.9062C49 44.3229 47.6146 47.7292 44.8438 50.125C42.0938 52.5 38.1458 53.6875 33 53.6875H22.2812ZM22.2812 48.7812H33.0625C36.2708 48.7812 38.7292 48.0312 40.4375 46.5312C42.1458 45.0104 43 42.8229 43 39.9688C43 37.2604 42.1458 35.0938 40.4375 33.4688C38.7292 31.8438 36.3854 31 33.4062 30.9375H22.2812V48.7812ZM77.4688 59.625H58.4062L54.125 71.5H47.9375L65.3125 26H70.5625L87.9688 71.5H81.8125L77.4688 59.625ZM60.2188 54.6875H75.6875L67.9375 33.4062L60.2188 54.6875Z' fill='%235E5E5E'/%3e%3cpath d='M22.2812 53.6875V52.6875H21.2812V53.6875H22.2812ZM22.2812 71.5V72.5H23.2812V71.5H22.2812ZM16.2812 71.5H15.2812V72.5H16.2812V71.5ZM16.2812 26V25H15.2812V26H16.2812ZM44.75 29.8125L44.0795 30.5544L44.0822 30.5569L44.75 29.8125ZM44.8438 50.125L45.4974 50.8818L45.4978 50.8814L44.8438 50.125ZM22.2812 48.7812H21.2812V49.7812H22.2812V48.7812ZM40.4375 46.5312L41.0973 47.2827L41.1024 47.2782L40.4375 46.5312ZM33.4062 30.9375L33.4272 29.9377L33.4167 29.9375H33.4062V30.9375ZM22.2812 30.9375V29.9375H21.2812V30.9375H22.2812ZM21.2812 53.6875V71.5H23.2812V53.6875H21.2812ZM22.2812 70.5H16.2812V72.5H22.2812V70.5ZM17.2812 71.5V26H15.2812V71.5H17.2812ZM16.2812 27H33.0625V25H16.2812V27ZM33.0625 27C37.8734 27 41.5023 28.2254 44.0795 30.5544L45.4205 29.0706C42.3727 26.3163 38.21 25 33.0625 25V27ZM44.0822 30.5569C46.6816 32.8886 48 35.971 48 39.9062H50C50 35.4665 48.4851 31.8197 45.4178 29.0681L44.0822 30.5569ZM48 39.9062C48 44.0979 46.6958 47.2016 44.1897 49.3686L45.4978 50.8814C48.5334 48.2567 50 44.5479 50 39.9062H48ZM44.1901 49.3682C41.6847 51.532 38.0046 52.6875 33 52.6875V54.6875C38.287 54.6875 42.5028 53.468 45.4974 50.8818L44.1901 49.3682ZM33 52.6875H22.2812V54.6875H33V52.6875ZM22.2812 49.7812H33.0625V47.7812H22.2812V49.7812ZM33.0625 49.7812C36.4145 49.7812 39.1437 48.998 41.0973 47.2827L39.7777 45.7798C38.3146 47.0645 36.1272 47.7812 33.0625 47.7812V49.7812ZM41.1024 47.2782C43.0749 45.5222 44 43.0321 44 39.9688H42C42 42.6137 41.2168 44.4986 39.7726 45.7843L41.1024 47.2782ZM44 39.9688C44 37.0311 43.0636 34.5866 41.1267 32.7442L39.7483 34.1933C41.2281 35.6009 42 37.4898 42 39.9688H44ZM41.1267 32.7442C39.1937 30.9055 36.5874 30.004 33.4272 29.9377L33.3853 31.9373C36.1834 31.996 38.2646 32.782 39.7483 34.1933L41.1267 32.7442ZM33.4062 29.9375H22.2812V31.9375H33.4062V29.9375ZM21.2812 30.9375V48.7812H23.2812V30.9375H21.2812ZM77.4688 59.625L78.4079 59.2815L78.1678 58.625H77.4688V59.625ZM58.4062 59.625V58.625H57.7038L57.4655 59.2858L58.4062 59.625ZM54.125 71.5V72.5H54.8275L55.0657 71.8392L54.125 71.5ZM47.9375 71.5L47.0033 71.1433L46.4852 72.5H47.9375V71.5ZM65.3125 26V25H64.6239L64.3783 25.6433L65.3125 26ZM70.5625 26L71.4965 25.6427L71.2506 25H70.5625V26ZM87.9688 71.5V72.5H89.422L88.9027 71.1427L87.9688 71.5ZM81.8125 71.5L80.8734 71.8435L81.1135 72.5H81.8125V71.5ZM60.2188 54.6875L59.2787 54.3465L58.7923 55.6875H60.2188V54.6875ZM75.6875 54.6875V55.6875H77.1159L76.6271 54.3453L75.6875 54.6875ZM67.9375 33.4062L68.8771 33.0641L67.9356 30.4787L66.9974 33.0653L67.9375 33.4062ZM77.4688 58.625H58.4062V60.625H77.4688V58.625ZM57.4655 59.2858L53.1843 71.1608L55.0657 71.8392L59.347 59.9642L57.4655 59.2858ZM54.125 70.5H47.9375V72.5H54.125V70.5ZM48.8717 71.8567L66.2467 26.3567L64.3783 25.6433L47.0033 71.1433L48.8717 71.8567ZM65.3125 27H70.5625V25H65.3125V27ZM69.6285 26.3573L87.0348 71.8573L88.9027 71.1427L71.4965 25.6427L69.6285 26.3573ZM87.9688 70.5H81.8125V72.5H87.9688V70.5ZM82.7516 71.1565L78.4079 59.2815L76.5296 59.9685L80.8734 71.8435L82.7516 71.1565ZM60.2188 55.6875H75.6875V53.6875H60.2188V55.6875ZM76.6271 54.3453L68.8771 33.0641L66.9979 33.7484L74.7479 55.0297L76.6271 54.3453ZM66.9974 33.0653L59.2787 54.3465L61.1588 55.0285L68.8776 33.7472L66.9974 33.0653Z' fill='%235E5E5E'/%3e%3c/svg%3e";
+var img$9 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black'%3e %3cpath d='m81.945 25.927-63.891 48.145' fill='%239c9c9c' stroke-linecap='square' stroke-width='5'/%3e %3cpath d='m85.939 22.918-14.792 3.6336 10.416 7.1764z' stroke-linecap='square' stroke-width='4'/%3e %3cpath d='m14.061 77.082 14.792-3.6336-10.416-7.1764z' stroke-linecap='square' stroke-width='4'/%3e %3cpath d='m18.055 25.927 63.891 48.145' fill='%239c9c9c' stroke-linecap='square' stroke-width='5'/%3e %3cpath d='m14.061 22.918 4.3755 10.81 10.416-7.1764z' stroke-linecap='square' stroke-width='4'/%3e %3cpath d='m85.939 77.082-4.3755-10.81-10.416 7.1764z' stroke-linecap='square' stroke-width='4'/%3e %3cpath d='m30 50 20 15 20-15-20-15z' fill='%239c9c9c' stroke-linecap='square' stroke-width='5'/%3e %3cpath d='m50 50v-35' stroke-linecap='round' stroke-width='5'/%3e %3cpath d='m50 10-6 10h12z' stroke-linecap='square' stroke-width='4'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$8 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='m41.909 60.481q0-3.0938-2.1914-4.7695-2.1592-1.6758-7.8311-3.3838t-9.0234-3.8027q-6.4131-4.0283-6.4131-10.506 0-5.6719 4.6084-9.3457 4.6406-3.6738 12.021-3.6738 4.8984 0 8.7334 1.8047 3.835 1.8047 6.0264 5.1562 2.1914 3.3193 2.1914 7.3799h-8.1211q0-3.6738-2.3203-5.7363-2.2881-2.0947-6.5742-2.0947-3.9961 0-6.2197 1.708-2.1914 1.708-2.1914 4.7695 0 2.5781 2.3848 4.3184 2.3848 1.708 7.8633 3.3516 5.4785 1.6113 8.7979 3.7061 3.3193 2.0625 4.8662 4.7695 1.5469 2.6748 1.5469 6.2842 0 5.8652-4.5117 9.3457-4.4795 3.4482-12.182 3.4482-5.0918 0-9.3779-1.8691-4.2539-1.9014-6.6387-5.2207-2.3525-3.3193-2.3525-7.7344h8.1533q0 3.9961 2.6426 6.1875 2.6426 2.1914 7.5732 2.1914 4.2539 0 6.3809-1.708 2.1592-1.7402 2.1592-4.5762zm20.461-5.3496v17.435h-8.1533v-46.922h17.95q7.8633 0 12.472 4.0928 4.6406 4.0928 4.6406 10.828 0 6.8965-4.5439 10.731-4.5117 3.835-12.665 3.835zm0-6.542h9.7969q4.3506 0 6.6387-2.0303 2.2881-2.0625 2.2881-5.9297 0-3.8027-2.3203-6.0586-2.3203-2.2881-6.3809-2.3525h-10.022z' fill='%235e5e5e' aria-label='SP'/%3e%3c/svg%3e";
+var img$8 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black'%3e %3ccircle cx='50' cy='50' r='35' fill='%239c9c9c' stroke-linecap='round' stroke-width='5' style='paint-order:normal'/%3e %3cpath d='m74.749 57.071a35 10 0 0 1-38.143 2.1677 35 10 0 0 1-21.606-9.2388' fill='none' stroke-linecap='round' stroke-width='5'/%3e %3cpath d='m50 85a10 35 0 0 1-9.0631-20.208 10 35 0 0 1 1.4026-37.289' fill='none' stroke-width='5'/%3e %3cpath d='m47.767 19.618 2.3872 16.832-16.914-6.1564z' stroke-width='4' style='paint-order:normal'/%3e %3cpath d='m79.586 52.422-10.675 14.527-6.1564-16.914z' stroke-width='4' style='paint-order:normal'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$7 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='m70.818 66.476q-2.5459 3.3193-7.0576 5.0273-4.5117 1.708-10.248 1.708-5.8975 0-10.441-2.6748-4.5439-2.6748-7.0254-7.6377-2.4492-4.9951-2.5459-11.634v-3.6738q0-10.635 5.0918-16.597 5.0918-5.9941 14.212-5.9941 7.8311 0 12.439 3.8672 4.6084 3.8672 5.543 11.15h-7.9922q-1.3535-8.4756-9.8291-8.4756-5.4785 0-8.3467 3.9639-2.8359 3.9316-2.9326 11.569v3.6094q0 7.6055 3.1904 11.827 3.2227 4.1895 8.9268 4.1895 6.252 0 8.8945-2.8359v-9.1846h-9.668v-6.1875h17.789z' fill='%235e5e5e' stroke-width='0' style='paint-order:markers fill stroke' aria-label='G'/%3e%3c/svg%3e";
+var img$7 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg%3e %3cpath d='m66 2-3.8555 9.6367a20 20 0 0 0-4.0879 2.3848l-10.305-1.4863-4 6.9297 6.418 8.1543a20 20 0 0 0-0.16992 2.3809 20 20 0 0 0 0.16992 2.3809l-6.418 8.1543 4 6.9297 10.305-1.4863a20 20 0 0 0 4.0879 2.3848l3.8555 9.6367h8l3.8555-9.6367a20 20 0 0 0 4.0879-2.3848l10.305 1.4863 4-6.9297-6.418-8.1543a20 20 0 0 0 0.16992-2.3809 20 20 0 0 0-0.15039-2.4043l6.3984-8.1309-4-6.9297-10.236 1.4766a20 20 0 0 0-4.1699-2.4062l-3.8418-9.6055h-8z'/%3e %3ccircle cx='70' cy='30' r='10' fill='white'/%3e %3cpath d='m26 42-3.8555 9.6367a20 20 0 0 0-4.0879 2.3848l-10.305-1.4863-4 6.9297 6.418 8.1543a20 20 0 0 0-0.16992 2.3809 20 20 0 0 0 0.16992 2.3809l-6.418 8.1543 4 6.9297 10.305-1.4863a20 20 0 0 0 4.0879 2.3848l3.8555 9.6367h8l3.8555-9.6367a20 20 0 0 0 4.0879-2.3848l10.305 1.4863 4-6.9297-6.418-8.1543a20 20 0 0 0 0.16992-2.3809 20 20 0 0 0-0.15039-2.4043l6.3984-8.1309-4-6.9297-10.236 1.4766a20 20 0 0 0-4.1699-2.4062l-3.8418-9.6055h-8z'/%3e %3ccircle cx='30' cy='70' r='10' fill='white'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$6 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='m49.589 66.422q-2.5459 3.3193-7.0576 5.0273-4.5117 1.708-10.248 1.708-5.8975 0-10.441-2.6748-4.5439-2.6748-7.0254-7.6377-2.4492-4.9951-2.5459-11.634v-3.6738q0-10.635 5.0918-16.597 5.0918-5.9941 14.212-5.9941 7.8311 0 12.439 3.8672 4.6084 3.8672 5.543 11.15h-7.9922q-1.3535-8.4756-9.8291-8.4756-5.4785 0-8.3467 3.9639-2.8359 3.9316-2.9326 11.569v3.6094q0 7.6055 3.1904 11.827 3.2227 4.1895 8.9268 4.1895 6.252 0 8.8945-2.8359v-9.1846h-9.668v-6.1875h17.789zm23.2-11.988h-9.0879v18.079h-8.1533v-46.922h16.5q8.1211 0 12.536 3.6416 4.415 3.6416 4.415 10.538 0 4.7051-2.2881 7.8955-2.2559 3.1582-6.3164 4.8662l10.538 19.562v0.41895h-8.7334zm-9.0879-6.542h8.3789q4.125 0 6.4453-2.0625 2.3203-2.0947 2.3203-5.7041 0-3.7705-2.1592-5.833-2.127-2.0625-6.3809-2.127h-8.6045z' fill='%235e5e5e' stroke-width='0' style='paint-order:markers fill stroke' aria-label='GR'/%3e%3c/svg%3e";
+var img$6 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-linecap='round'%3e %3crect x='12' y='12' width='76' height='76' fill='none' stroke-width='5.0003'/%3e %3crect x='23' y='55' width='22' height='22' fill='%239c9c9c' stroke-width='5'/%3e %3crect x='55' y='55' width='22' height='22' fill='%239c9c9c' stroke-width='5'/%3e %3crect x='39' y='23' width='22' height='22' fill='%239c9c9c' stroke-width='5.0003'/%3e %3ccircle cx='12' cy='12' r='7' fill='white' stroke-width='5.0003'/%3e %3ccircle cx='88' cy='12' r='7' fill='white' stroke-width='5.0003'/%3e %3ccircle cx='12' cy='88' r='7' fill='white' stroke-width='5.0003'/%3e %3ccircle cx='88' cy='88' r='7' fill='white' stroke-width='5.0003'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$5 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='m27.153 65.412h21.302v6.5098h-29.455v-46.922h8.1533zm32.707-10.925v17.435h-8.1533v-46.922h17.95q7.8633 0 12.472 4.0928 4.6406 4.0928 4.6406 10.828 0 6.8965-4.5439 10.731-4.5117 3.835-12.665 3.835zm0-6.542h9.7969q4.3506 0 6.6387-2.0303 2.2881-2.0625 2.2881-5.9297 0-3.8027-2.3203-6.0586-2.3203-2.2881-6.3809-2.3525h-10.022z' fill='%235e5e5e' stroke-linecap='round' stroke-linejoin='round' stroke-width='5' style='paint-order:stroke markers fill' aria-label='LP'/%3e%3c/svg%3e";
+var img$5 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-linecap='round' stroke-width='5'%3e %3cpath d='m29 71v-44h44v44z' fill='none'/%3e %3crect x='15' y='60' width='26' height='26' fill='%239c9c9c'/%3e %3crect x='15' y='15' width='26' height='26' fill='white'/%3e %3crect x='60' y='60' width='26' height='26' fill='white'/%3e %3crect x='60' y='15' width='26' height='26' fill='white'/%3e %3c/g%3e%3c/svg%3e";
 
-var img$4 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='m49.786 56.646q-0.70898 7.5088-5.543 11.73-4.834 4.1895-12.858 4.1895-5.6074 0-9.8936-2.6426-4.2539-2.6748-6.5742-7.5732-2.3203-4.8984-2.417-11.376v-4.3828q0-6.6387 2.3525-11.698 2.3525-5.0596 6.7354-7.7988 4.415-2.7393 10.184-2.7393 7.7666 0 12.504 4.2217 4.7373 4.2217 5.5107 11.924h-8.1211q-0.58008-5.0596-2.9648-7.2832-2.3525-2.2559-6.9287-2.2559-5.3174 0-8.1855 3.8994-2.8359 3.8672-2.9004 11.376v4.1572q0 7.6055 2.707 11.602 2.7393 3.9961 7.9922 3.9961 4.8018 0 7.2188-2.1592 2.417-2.1592 3.0615-7.1865zm12.437-2.1592v17.435h-8.1533v-46.922h17.95q7.8633 0 12.472 4.0928 4.6406 4.0928 4.6406 10.828 0 6.8965-4.5439 10.731-4.5117 3.835-12.665 3.835zm0-6.542h9.7969q4.3506 0 6.6387-2.0303 2.2881-2.0625 2.2881-5.9297 0-3.8027-2.3203-6.0586-2.3203-2.2881-6.3809-2.3525h-10.022z' fill='%235e5e5e' stroke-linecap='round' stroke-linejoin='round' stroke-width='5' style='paint-order:stroke markers fill' aria-label='CP'/%3e%3c/svg%3e";
+var img$4 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-linecap='round' stroke-width='5'%3e %3cpath d='m50 83a33 33 0 0 1-30.488-20.371 33 33 0 0 1 7.1535-35.963 33 33 0 0 1 35.963-7.1535 33 33 0 0 1 20.371 30.488' fill='none'/%3e %3crect x='68' y='38' width='24' height='24' fill='%239c9c9c'/%3e %3crect x='38' y='8' width='24' height='24' fill='white'/%3e %3crect x='8' y='38' width='24' height='24' fill='white'/%3e %3crect x='38' y='68' width='24' height='24' fill='white'/%3e %3ccircle cx='50' cy='50' r='4'/%3e %3c/g%3e%3c/svg%3e";
 
 const AssemblyModeCmds = (drawingId, rootId) => {
   const assemblyApi = classcad.ccAPI.assemblyBuilder;
@@ -22945,98 +23240,89 @@ const AssemblyModeCmds = (drawingId, rootId) => {
   const addLinearPattern = () => assemblyApi.create3DConstraint(drawingId, rootId, classcad.CCClasses.CCLinearPatternConstraint, 'Linear Pattern');
   const addCircularPattern = () => assemblyApi.create3DConstraint(drawingId, rootId, classcad.CCClasses.CCCircularPatternConstraint, 'Circular Pattern');
   const addGear = () => assemblyApi.create3DConstraint(drawingId, rootId, classcad.CCClasses.CCGearRelation, 'Gear');
-  return {
-    FastenedOrigin: {
-      label: 'Add Fastened Origin',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$e
-      }),
-      callback: wrapper(addFastenedOrigin)
-    },
-    Fastened: {
-      label: 'Add Fastened',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$d
-      }),
-      callback: wrapper(addFastened)
-    },
-    Slider: {
-      label: 'Add Slider',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$c
-      }),
-      callback: wrapper(addSlider)
-    },
-    Revolute: {
-      label: 'Add Revolute',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$D
-      }),
-      callback: wrapper(addRevolute)
-    },
-    Cylindrical: {
-      label: 'Add Cylindrical',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$b
-      }),
-      callback: wrapper(addCylindrical)
-    },
-    Planar: {
-      label: 'Add Planar',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$a
-      }),
-      callback: wrapper(addPlanar)
-    },
-    Parallel: {
-      label: 'Add Parallel',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$9
-      }),
-      callback: wrapper(addParallel)
-    },
-    Spherical: {
-      label: 'Add Spherical',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$8
-      }),
-      callback: wrapper(addSpherical)
-    },
-    Group: {
-      label: 'Add Group',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$6
-      }),
-      callback: wrapper(addGroup)
-    },
-    LinearPattern: {
-      label: 'Add Linear Pattern',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$5
-      }),
-      callback: wrapper(addLinearPattern)
-    },
-    CircularPattern: {
-      label: 'Add Circular Pattern',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$4
-      }),
-      callback: wrapper(addCircularPattern)
-    },
-    Gear: {
-      label: 'Add Gear',
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        url: img$7
-      }),
-      callback: wrapper(addGear)
-    }
-  };
+  return [{
+    label: 'Add Fastened Origin',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$e
+    }),
+    callback: wrapper(addFastenedOrigin)
+  }, {
+    label: 'Add Fastened',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$d
+    }),
+    callback: wrapper(addFastened)
+  }, {
+    label: 'Add Slider',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$c
+    }),
+    callback: wrapper(addSlider)
+  }, {
+    label: 'Add Revolute',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$D
+    }),
+    callback: wrapper(addRevolute)
+  }, {
+    label: 'Add Cylindrical',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$b
+    }),
+    callback: wrapper(addCylindrical)
+  }, {
+    label: 'Add Planar',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$a
+    }),
+    callback: wrapper(addPlanar)
+  }, {
+    label: 'Add Parallel',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$9
+    }),
+    callback: wrapper(addParallel)
+  }, {
+    label: 'Add Spherical',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$8
+    }),
+    callback: wrapper(addSpherical)
+  }, {
+    type: 'divider'
+  }, {
+    label: 'Add Group',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$6
+    }),
+    callback: wrapper(addGroup)
+  }, {
+    label: 'Add Linear Pattern',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$5
+    }),
+    callback: wrapper(addLinearPattern)
+  }, {
+    label: 'Add Circular Pattern',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$4
+    }),
+    callback: wrapper(addCircularPattern)
+  }, {
+    type: 'divider'
+  }, {
+    label: 'Add Gear',
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      url: img$7
+    }),
+    callback: wrapper(addGear)
+  }];
 };
 
 function useCommands(drawingId, curProductClass) {
   const curProdId = react.useDrawing(drawingId, d => d.structure.currentProduct);
   const commands = React.useMemo(() => {
-    let res = {};
+    let res = [];
     if (curProductClass && classcad.ccUtils.base.isA(curProductClass, classcad.CCClasses.CCPart)) {
       res = PartModeCmds(drawingId, curProdId);
     } else if (curProductClass && classcad.ccUtils.base.isA(curProductClass, classcad.CCClasses.CCAssembly)) {
@@ -23112,41 +23398,39 @@ const SubGroup = ({
 const Item = ({
   cmd: cmd
 }) => {
-  return Array.isArray(cmd) ? /*#__PURE__*/React.createElement(SubGroup, {
-    commands: cmd
-  }) : /*#__PURE__*/React.createElement(FButton, {
+  if (Array.isArray(cmd)) {
+    return /*#__PURE__*/React.createElement(SubGroup, {
+      commands: cmd
+    });
+  }
+  if (cmd.type === 'divider') {
+    return /*#__PURE__*/React.createElement(Divider, {
+      style: {
+        height: '18px',
+        marginBottom: '1px',
+        borderColor: 'rgba(32,32,32,0.5)'
+      },
+      type: "vertical"
+    });
+  }
+  return /*#__PURE__*/React.createElement(FButton, {
     command: cmd
   });
 };
-const skeletonItems = Array(10).fill(0);
+const skeletonItems = Array(12).fill(0);
 const ToolBar = ({
   drawingId
 }) => {
   const curProductClass = react.useDrawing(drawingId, d => {
     var _d$structure$tree;
     return (_d$structure$tree = d.structure.tree[d.structure.currentProduct]) == null ? void 0 : _d$structure$tree.class;
-  }) || '';
+  });
   const isDefined = curProductClass !== undefined;
-  const isPart = classcad.ccUtils.base.isA(curProductClass, classcad.CCClasses.CCPart);
   const commands = useCommands(drawingId, curProductClass);
-  const enableExpressions = React.useCallback(() => {
-    const gPlugins = core.getDrawing(drawingId).plugin.refs;
-    const exprPlugin = Object.values(gPlugins).find(p => p.name === 'Expressions');
-    const pApi = core.getDrawing(drawingId).api.plugin;
-    exprPlugin && pApi.setActiveGlobal(exprPlugin.id, true);
-  }, [drawingId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(antd.Space, null, isDefined && Object.keys(commands).map(key => /*#__PURE__*/React.createElement(Item, {
-    key: key,
-    cmd: commands[key]
-  })), isPart && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(antd.Tooltip, {
-    title: "Expressions"
-  }, /*#__PURE__*/React.createElement(antd.Button, {
-    size: "small",
-    icon: /*#__PURE__*/React.createElement(icons.FontSizeOutlined, null),
-    onClick: () => enableExpressions()
-  }))), !isDefined && skeletonItems.map((a, i) => /*#__PURE__*/React.createElement(antd.Skeleton.Avatar, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(antd.Space, null, isDefined && commands.map((command, i) => /*#__PURE__*/React.createElement(Item, {
+    key: i,
+    cmd: command
+  })), !isDefined && skeletonItems.map((a, i) => /*#__PURE__*/React.createElement(antd.Skeleton.Avatar, {
     key: i,
     size: "small",
     shape: "square",
@@ -26172,13 +26456,19 @@ const addProduct = (drawingId, prodId) => {
   }]).catch(console.warn);
 };
 const deleteProduct = (drawingId, pluginId, prodId) => {
-  const selected = core.getPlugin(drawingId, pluginId).state.selected;
-  const ids = selected.indexOf(prodId) === -1 ? [...selected, prodId] : selected;
+  const drawing = core.getDrawing(drawingId);
+  const tree = drawing.structure.tree;
+  const selectedInfo = drawing.interaction.selected || [];
+  const selectedProducts = selectedInfo.map(info => info.objectId).filter(id => {
+    var _tree$id;
+    return classcad.ccUtils.base.isA((_tree$id = tree[id]) == null ? void 0 : _tree$id.class, classcad.CCClasses.CCProduct);
+  });
+  const ids = selectedProducts.indexOf(prodId) === -1 ? [...selectedProducts, prodId] : selectedProducts;
   const idsSorted = ids.sort((a, b) => b - a);
   classcad.ccAPI.baseModeler.deleteObjects(drawingId, idsSorted).catch(console.warn);
+  drawing.api.interaction.setSelected([]);
   core.getPlugin(drawingId, pluginId).set({
-    product: null,
-    selected: []
+    product: null
   });
 };
 function useContextMenuItems(drawingId, pluginId, prodId, setEditName) {
@@ -26254,16 +26544,18 @@ const Prod = ({
     return (_d$structure$tree$pro = d.structure.tree[prodId]) == null ? void 0 : _d$structure$tree$pro.name;
   });
   const isCurrent = react.useDrawing(drawingId, d => d.structure.currentProduct === prodId);
-  const selected = react.usePlugin(drawingId, pluginId, p => p.state.selected);
-  const isSelected = (selected == null ? void 0 : selected.indexOf(prodId)) !== -1;
+  const {
+    isGSelected,
+    handlers
+  } = useTreeObjInteraction(drawingId, prodId);
+  const onTreeObjClick = handlers.onClick;
   const onClick = React.useCallback(e => {
+    onTreeObjClick(e);
     const set = core.getPlugin(drawingId, pluginId).set;
-    const multi = e.shiftKey;
-    set(state => ({
-      product: prodId,
-      selected: state.selected.indexOf(prodId) !== -1 ? state.selected.filter(id => id !== prodId) : multi ? [...state.selected, prodId] : [prodId]
-    }));
-  }, [drawingId, pluginId, prodId]);
+    set({
+      product: prodId
+    });
+  }, [drawingId, pluginId, prodId, onTreeObjClick]);
   const [rename, setRename] = React.useState(false);
   const menuItems = useContextMenuItems(drawingId, pluginId, prodId, setRename);
   const menuHeaderName = type === 'part' ? 'Part product' : 'Assembly product';
@@ -26303,7 +26595,7 @@ const Prod = ({
       height: '32px',
       minWidth: '0px'
     },
-    hovered: isSelected || isContextMenuActive,
+    hovered: isGSelected || isContextMenuActive,
     onClick: onClick,
     onContextMenu: onContextMenu
   }, /*#__PURE__*/React.createElement("div", {
@@ -26391,16 +26683,14 @@ const ProdList = ({
     return () => {
       const plugin = core.getPlugin(drawingId, pluginId);
       plugin && plugin.set({
-        product: null,
-        selected: []
+        product: null
       });
     };
   }, [drawingId, pluginId]);
   const keyHandler = React.useCallback(e => {
     if (e.key === 'Escape') {
       set({
-        product: null,
-        selected: []
+        product: null
       });
     }
   }, [set]);
@@ -26408,6 +26698,11 @@ const ProdList = ({
     window.addEventListener('keydown', keyHandler);
     return () => window.removeEventListener('keydown', keyHandler);
   }, [keyHandler]);
+  const createInfo_ = React.useCallback(objId => {
+    return core.createInfo({
+      objectId: objId
+    });
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       minHeight: '145px',
@@ -26415,13 +26710,17 @@ const ProdList = ({
       paddingLeft: '8px',
       paddingRight: '8px'
     }
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    drawingId: drawingId,
+    items: prodIds,
+    createInfo: createInfo_
   }, prodIds.map(prodId => /*#__PURE__*/React.createElement(Prod, {
     key: prodId,
     drawingId: drawingId,
     pluginId: pluginId,
     prodId: prodId,
     type: type
-  })), createMode && /*#__PURE__*/React.createElement(NewProd, {
+  }))), createMode && /*#__PURE__*/React.createElement(NewProd, {
     drawingId: drawingId,
     setCreateMode: setCreateMode,
     type: type