@buerli.io/react-cad 0.5.0-beta.1 → 0.5.0-beta.2

package/build/index.js

@@ -18,7 +18,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
 import Tooltip from 'antd/lib/tooltip';
 import RadioGroupImpl from 'antd/lib/radio/group';
 import RadioButtonImpl from 'antd/lib/radio/radioButton';
-import { Menu as Menu$1, Dropdown, Input, Typography, Tag, Table, Space, Tabs as Tabs$1, Divider as Divider$1, Button, Tooltip as Tooltip$1, Badge, Modal, Skeleton as Skeleton$1 } from 'antd';
+import { Dropdown, Input, Typography, Tag, Table, Space, Tabs as Tabs$1, Divider as Divider$1, Button, Tooltip as Tooltip$1, Badge, Modal, Skeleton as Skeleton$1 } from 'antd';
 import AntdButton from 'antd/lib/button';
 import guid from 'uuid';
 import shallow from 'zustand/shallow';
@@ -32,8 +32,8 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { RgbaColorPicker } from 'react-colorful';
 import * as deepmerge from 'deepmerge';
 
-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; }
 function getGraphicId(tree, refOrObjId) {
   const res = {
     graphicId: refOrObjId,
@@ -96,7 +96,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
     window.console.error('Product is not a CC_Part. Assembly is not supported now');
   }
   const createSelItem = React__default.useCallback(element => {
-    return createGraphicItem(prodId, _objectSpread$o(_objectSpread$o({}, element), {}, {
+    return createGraphicItem(prodId, _objectSpread$p(_objectSpread$p({}, element), {}, {
       productId: prodId
     }));
   }, [prodId]);
@@ -121,7 +121,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
             if (grIds && grIds.length > 0) {
               const elem = cont.map[Number(grIds[0])];
               if (elem) {
-                elems.push(_objectSpread$o(_objectSpread$o({}, elem), {}, {
+                elems.push(_objectSpread$p(_objectSpread$p({}, elem), {}, {
                   graphicId: contId,
                   type: cont.type
                 }));
@@ -157,8 +157,8 @@ function useSelectedItems(drawingId, refOrObjIds) {
   return selectedItems;
 }
 
-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; }
 function addMembers(drawingId, ccObjId) {
   const drawingState = getDrawing(drawingId);
   const objInTree = drawingState.structure.tree[ccObjId];
@@ -169,7 +169,7 @@ function addMembers(drawingId, ccObjId) {
   const members = {};
   Object.keys(curMembers).forEach(memberName => {
     const curMember = curMembers[memberName];
-    members[memberName] = _objectSpread$n(_objectSpread$n({}, curMember), {}, {
+    members[memberName] = _objectSpread$o(_objectSpread$o({}, curMember), {}, {
       name: memberName
     });
     if (curMember.type === MemberType.POINT && Array.isArray(curMember.value)) {
@@ -1059,8 +1059,8 @@ const isAngular = dim => {
   return dim.class === CCClasses.CCAngularDimension || dim.class === CCClasses.CCAngularFeatureDimension || dim.class === CCClasses.CCAngularRefDimension;
 };
 
-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; }
 const appApi = (set, get) => ({
   assemblyTree: {
     startProdEditing: (drawingId, objId) => {
@@ -1069,7 +1069,7 @@ const appApi = (set, get) => ({
         const curNode = api.getState().drawing.refs[drawingId].structure.currentNode;
         res = state.assemblyTree.prodStack;
         curNode && res.push(curNode);
-        return _objectSpread$m(_objectSpread$m({}, state), {}, {
+        return _objectSpread$n(_objectSpread$n({}, state), {}, {
           assemblyTree: {
             prodStack: [...res]
           }
@@ -1084,7 +1084,7 @@ const appApi = (set, get) => ({
       set(state => {
         const res = state.assemblyTree.prodStack;
         res.pop();
-        return _objectSpread$m(_objectSpread$m({}, state), {}, {
+        return _objectSpread$n(_objectSpread$n({}, state), {}, {
           assemblyTree: {
             prodStack: [...res]
           }
@@ -1093,7 +1093,7 @@ const appApi = (set, get) => ({
       ccAPI.assemblyBuilder.setCurrentNode(drawingId, prevProd).catch(console.warn);
     },
     clearProdStack: () => {
-      set(state => _objectSpread$m(_objectSpread$m({}, state), {}, {
+      set(state => _objectSpread$n(_objectSpread$n({}, state), {}, {
         assemblyTree: {
           prodStack: []
         }
@@ -1102,7 +1102,7 @@ const appApi = (set, get) => ({
   },
   blankDiv: {
     show: callback => {
-      set(state => _objectSpread$m(_objectSpread$m({}, state), {}, {
+      set(state => _objectSpread$n(_objectSpread$n({}, state), {}, {
         blankDiv: {
           isActive: true,
           onClose: callback
@@ -1110,7 +1110,7 @@ const appApi = (set, get) => ({
       }));
     },
     hide: () => {
-      set(state => _objectSpread$m(_objectSpread$m({}, state), {}, {
+      set(state => _objectSpread$n(_objectSpread$n({}, state), {}, {
         blankDiv: {
           isActive: false,
           onClose: undefined
@@ -2269,13 +2269,13 @@ function refIdChanged(refId, defId, tree) {
   }
 }
 function useRefsParam(drawingId, objId, memberName) {
-  const member = useDrawing(drawingId, d => {
-    var _d$structure$tree$obj, _d$structure$tree$obj2;
-    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$obj2[memberName];
+  const members = useDrawingArr(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[memberName]) == null ? void 0 : _d$structure$tree$obj3.members;
   });
   const defaults = React__default.useMemo(() => {
-    return member.members.map(m => m.value);
-  }, [member]);
+    return members.map(m => m.value);
+  }, [members]);
   const [userValue, setUserValue] = React__default.useState(defaults);
   const validateFns = React__default.useRef([]);
   React__default.useEffect(() => {
@@ -2322,8 +2322,8 @@ function useRefsParam(drawingId, objId, memberName) {
   });
 }
 
-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; }
 
 /**
  * Implies the following data structure:
@@ -2451,7 +2451,7 @@ function useTreeObjSelection(drawingId, objId) {
   const isSelected = useIsSelected$1(drawingId, objId);
   const handlers = React__default.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$l(_objectSpread$l({}, hHandlers), sHandlers);
+      return _objectSpread$m(_objectSpread$m({}, hHandlers), sHandlers);
     }
     return {};
   }, [isSelectable, hHandlers, sHandlers]);
@@ -2763,7 +2763,7 @@ function getSketchGrItems(drawingId, childId) {
 }
 function useModes(drawingId, sketchLines, setParamRefs, selectorsOrder) {
   const defCustomSelect = React__default.useCallback((selId, items) => {
-    setParamRefs(items);
+    setParamRefs(selId, items);
     const maxLen = getDrawing(drawingId).selection.refs[selId].maxLen;
     // If items len === 0 selector should not be switched
     if (maxLen > 0 && items.length >= maxLen) {
@@ -2814,6 +2814,7 @@ function useModes(drawingId, sketchLines, setParamRefs, selectorsOrder) {
   }), [defCustomSelect, drawingId]);
   return sketchLines ? [chainMode, allMode, singleMode] : [singleMode];
 }
+
 const RefsEditor = ({
   children,
   param,
@@ -2835,7 +2836,7 @@ const RefsEditor = ({
   } = param;
   const picker = React__default.useRef(customIdPicker);
   const [selectorId, setSelectorId] = React__default.useState();
-  const setRefsFromItems = React__default.useCallback(selItems => {
+  const setRefsFromItems = React__default.useCallback((selId, selItems) => {
     const newRefs = selItems.map(item => picker.current(item.data));
     setUserValue(newRefs);
   }, [setUserValue]);
@@ -2917,15 +2918,15 @@ const SelectionRestorer = ({
     const selector = getDrawing(drawingId).selection.refs[selectorId];
     const selApi = getDrawing(drawingId).api.selection;
     if (!selApi.areItemsSelected(res, selectorId) || selItems.length !== selector.items.length) {
-      setParamRefs(res);
+      setParamRefs(selectorId, res);
       selApi.setItems(selectorId, res);
     }
   }, [graphicSelItems, grItemsIds, selectorId, drawingId, setParamRefs, selItems]);
   return null;
 };
 
-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; }
 
 /**
  * Implies the following data structure:
@@ -3019,7 +3020,7 @@ function useMateSelection(drawingId, matePath, csysId) {
   }));
   const handlers = React__default.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$k(_objectSpread$k({}, hHandlers), sHandlers);
+      return _objectSpread$l(_objectSpread$l({}, hHandlers), sHandlers);
     }
     return {};
   }, [isSelectable, hHandlers, sHandlers]);
@@ -3189,10 +3190,10 @@ const MateRestorer = ({
   setMateParam
 }) => {
   const selItems = React__default.useMemo(() => {
-    if (!matePath || !csysId) {
+    const tree = getDrawing(drawingId).structure.tree;
+    if (!matePath || !csysId || !tree[csysId] || matePath.some(id => !tree[id])) {
       return [];
     }
-    const tree = getDrawing(drawingId).structure.tree;
     const mate = tree[csysId];
     return [createMateItem(matePath, mate, flip, reoriented)];
   }, [drawingId, matePath, csysId, flip, reoriented]);
@@ -3679,8 +3680,8 @@ var index$x = /*#__PURE__*/Object.freeze({
   description: description$x
 });
 
-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 parseVal(val) {
   const float = Number(val);
   if (!isNaN(float)) {
@@ -3903,11 +3904,11 @@ const PointEditor = ({
       const curProdId = getDrawing(drawingId).structure.currentProduct;
       const tree = getDrawing(drawingId).structure.tree;
       const exprSetId = tree[curProdId].expressionSet;
-      ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => setDisplayState(state => _objectSpread$j(_objectSpread$j({}, state), {}, {
+      ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
         displayVals: res !== null ? res : state.displayVals
       }))).catch();
     } else {
-      setDisplayState(state => _objectSpread$j(_objectSpread$j({}, state), {}, {
+      setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
         displayVals: userValue.value
       }));
     }
@@ -3921,7 +3922,7 @@ const PointEditor = ({
       ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => setDisplayState(state => ({
         editMode: false,
         displayVals: res !== null ? res : state.displayVals
-      }))).catch(() => setDisplayState(state => _objectSpread$j(_objectSpread$j({}, state), {}, {
+      }))).catch(() => setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
         editMode: false
       })));
     } else {
@@ -3939,7 +3940,7 @@ const PointEditor = ({
     caption: caption,
     highlighted: param.isChanged()
   }, !editMode && /*#__PURE__*/React__default.createElement(DisplayBase, {
-    onClick: () => setDisplayState(state => _objectSpread$j(_objectSpread$j({}, state), {}, {
+    onClick: () => setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
       editMode: true
     }))
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -4185,10 +4186,10 @@ var Members$r;
   Members["taperAngle"] = "taperAngle";
   Members["capEnds"] = "capEnds";
 })(Members$r || (Members$r = {}));
-var RegionMembers$1;
+var RegionMembers$2;
 (function (RegionMembers) {
   RegionMembers["Curves"] = "curves";
-})(RegionMembers$1 || (RegionMembers$1 = {}));
+})(RegionMembers$2 || (RegionMembers$2 = {}));
 const typesCaptions$4 = {
   [ExtrusionType.CUSTOM]: 'Custom',
   [ExtrusionType.DOWN]: 'Down',
@@ -4206,7 +4207,7 @@ const RootImpl$w = ({
     var _drawing$structure$tr, _drawing$structure$tr2;
     return (_drawing$structure$tr = drawing.structure.tree[objectId]) == null ? void 0 : (_drawing$structure$tr2 = _drawing$structure$tr.members) == null ? void 0 : _drawing$structure$tr2.region.value;
   });
-  const region = useRefsParam(drawingId, sketchRegionId, RegionMembers$1.Curves);
+  const region = useRefsParam(drawingId, sketchRegionId, RegionMembers$2.Curves);
   const type = useTypeParam(drawingId, objectId, Members$r.Type);
   const limit1 = useNumParam(drawingId, objectId, Members$r.Limit1);
   const limit2 = useNumParam(drawingId, objectId, Members$r.Limit2);
@@ -4329,10 +4330,10 @@ var Members$q;
   Members["StartAngle"] = "startAngle";
   Members["EndAngle"] = "endAngle";
 })(Members$q || (Members$q = {}));
-var RegionMembers;
+var RegionMembers$1;
 (function (RegionMembers) {
   RegionMembers["Curves"] = "curves";
-})(RegionMembers || (RegionMembers = {}));
+})(RegionMembers$1 || (RegionMembers$1 = {}));
 const RootImpl$v = ({
   drawingId,
   pluginId
@@ -4344,7 +4345,7 @@ const RootImpl$v = ({
     var _drawing$structure$tr, _drawing$structure$tr2;
     return (_drawing$structure$tr = drawing.structure.tree[objectId]) == null ? void 0 : (_drawing$structure$tr2 = _drawing$structure$tr.members) == null ? void 0 : _drawing$structure$tr2.region.value;
   });
-  const region = useRefsParam(drawingId, sketchRegionId, RegionMembers.Curves);
+  const region = useRefsParam(drawingId, sketchRegionId, RegionMembers$1.Curves);
   const axis = useRefsParam(drawingId, objectId, Members$q.Axis);
   const startAngle = useNumParam(drawingId, objectId, Members$q.StartAngle, {
     angle: true
@@ -5688,8 +5689,8 @@ const Digits = ({
 
 const vectorToString = (point, digits) => `${point.toArray().map(n => MathUtils.round(n, digits)).join(', ')}`;
 
-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; }
 const Excluded = [GraphicType.LOOP].concat(EntityTypes);
 const RootImpl$g = ({
   drawingId,
@@ -5760,7 +5761,7 @@ const Output = ({
               const {
                 value
               } = res.measureData;
-              return _objectSpread$i(_objectSpread$i({}, res), {}, {
+              return _objectSpread$j(_objectSpread$j({}, res), {}, {
                 asString: MathUtils.round(value, digits)
               });
             }
@@ -5770,13 +5771,13 @@ const Output = ({
               const {
                 value
               } = res.measureData;
-              return _objectSpread$i(_objectSpread$i({}, res), {}, {
+              return _objectSpread$j(_objectSpread$j({}, res), {}, {
                 asString: vectorToString(value, digits)
               });
             }
         }
       }
-      return _objectSpread$i(_objectSpread$i({}, res), {}, {
+      return _objectSpread$j(_objectSpread$j({}, res), {}, {
         asString: ''
       });
     });
@@ -6547,8 +6548,8 @@ function getSketchState(drawingId, pluginId) {
   return plugin.state;
 }
 
-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 CreateAngle(drawingId, pluginId) {
   const {
     set
@@ -6591,8 +6592,8 @@ function CreateAngle(drawingId, pluginId) {
     set(state_ => {
       const tmpAngularDimension = state_.tmpObjects[tmpDimensionId];
       return {
-        tmpObjects: _objectSpread$h(_objectSpread$h({}, state_.tmpObjects), {}, {
-          [tmpDimensionId]: _objectSpread$h(_objectSpread$h({}, tmpAngularDimension), params)
+        tmpObjects: _objectSpread$i(_objectSpread$i({}, state_.tmpObjects), {}, {
+          [tmpDimensionId]: _objectSpread$i(_objectSpread$i({}, tmpAngularDimension), params)
         })
       };
     });
@@ -6618,7 +6619,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$h(_objectSpread$h({
+    const tmpAngularDimension = _objectSpread$i(_objectSpread$i({
       class: TmpObjClasses.AngularDimension,
       id: tmpDimensionId
     }, linesInfo), {}, {
@@ -6723,8 +6724,8 @@ function getGeometryPriority(object) {
   return -1;
 }
 
-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; }
 let timerId;
 const setHoverState = (drawingId, pluginId, cycle, objects) => {
   const {
@@ -6762,7 +6763,7 @@ const setHoverState = (drawingId, pluginId, cycle, objects) => {
         return {
           hovered: hoveredId,
           highlighted: [hoveredId, ...linkedConstraints],
-          constraintsToGeometry: _objectSpread$g(_objectSpread$g({}, state_.constraintsToGeometry), constraintsToGeometry),
+          constraintsToGeometry: _objectSpread$h(_objectSpread$h({}, state_.constraintsToGeometry), constraintsToGeometry),
           interaction: {
             cycle,
             objects
@@ -7218,8 +7219,8 @@ const MergedWrapper = ({
   );
 };
 
-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; }
 
 // Artificial delay in 16 ms.
 const artifDelay = 16;
@@ -7483,7 +7484,7 @@ function Drag(drawingId, pluginId, camControls) {
     name: HandlersList.DRAG,
     filter,
     onDeactivate,
-    pointerHandlers: _objectSpread$f({
+    pointerHandlers: _objectSpread$g({
       onPointerDown,
       onPointerUp,
       onPointerMove
@@ -7495,8 +7496,8 @@ function Drag(drawingId, pluginId, camControls) {
   };
 }
 
-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; }
 function DrawPoint(drawingId, pluginId) {
   const {
     set
@@ -7561,8 +7562,8 @@ function DrawPoint(drawingId, pluginId) {
       const tmpPoint = state.tmpObjects[tmpPointId];
       return {
         mousePos,
-        tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$e(_objectSpread$e({}, tmpPoint), {}, {
+        tmpObjects: _objectSpread$f(_objectSpread$f({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$f(_objectSpread$f({}, tmpPoint), {}, {
             position: mousePos
           })
         })
@@ -7583,8 +7584,8 @@ function DrawPoint(drawingId, pluginId) {
   };
 }
 
-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; }
 function DrawLine(drawingId, pluginId) {
   // Global hooks:
   const {
@@ -7667,7 +7668,7 @@ function DrawLine(drawingId, pluginId) {
           endPId: tmpEndP.id
         };
         return {
-          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
             [tmpStartP.id]: tmpStartP,
             [tmpLine.id]: tmpLine
           })
@@ -7710,8 +7711,8 @@ function DrawLine(drawingId, pluginId) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         const tmpEndP = state.tmpObjects[tmpEndPId];
         return {
-          tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$d(_objectSpread$d({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$e(_objectSpread$e({}, tmpStartP), {}, {
               position: tmpEndP.position.clone()
             })
           })
@@ -7729,8 +7730,8 @@ function DrawLine(drawingId, pluginId) {
       const tmpEndP = state.tmpObjects[tmpEndPId];
       return {
         mousePos,
-        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
-          [tmpEndPId]: _objectSpread$d(_objectSpread$d({}, tmpEndP), {}, {
+        tmpObjects: _objectSpread$e(_objectSpread$e({}, state.tmpObjects), {}, {
+          [tmpEndPId]: _objectSpread$e(_objectSpread$e({}, tmpEndP), {}, {
             position: mousePos
           })
         })
@@ -7754,8 +7755,8 @@ function DrawLine(drawingId, pluginId) {
   };
 }
 
-function ownKeys$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 DrawRectangle(drawingId, pluginId) {
   const {
     set
@@ -7836,7 +7837,7 @@ function DrawRectangle(drawingId, pluginId) {
           isSquare: false,
           isCentered: false
         };
-        const newTmpObjects = _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+        const newTmpObjects = _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
           [tmpRect.id]: tmpRect
         });
         delete newTmpObjects[tmpPointId];
@@ -7896,19 +7897,19 @@ function DrawRectangle(drawingId, pluginId) {
       let newTmpObjs = null;
       if (additionIndex === 0) {
         const tmpPoint = state.tmpObjects[tmpPointId];
-        newTmpObjs = _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpPointId]: _objectSpread$c(_objectSpread$c({}, tmpPoint), {}, {
+        newTmpObjs = _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpPointId]: _objectSpread$d(_objectSpread$d({}, tmpPoint), {}, {
             position: snappedPos
           })
         });
       } else {
-        newTmpObjs = _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpRectId]), {}, {
+        newTmpObjs = _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$d(_objectSpread$d({}, state.tmpObjects[tmpRectId]), {}, {
             end: new THREE.Vector3(snappedPos.x, snappedPos.y, 0)
           })
         });
       }
-      return _objectSpread$c(_objectSpread$c({}, state), {}, {
+      return _objectSpread$d(_objectSpread$d({}, state), {}, {
         tmpObjects: newTmpObjs,
         mousePos: snappedPos
       });
@@ -7917,18 +7918,18 @@ function DrawRectangle(drawingId, pluginId) {
   };
   const keydown = e => {
     if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
-      set(state => _objectSpread$c(_objectSpread$c({}, state), {}, {
-        tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpRectId]), {}, {
+      set(state => _objectSpread$d(_objectSpread$d({}, state), {}, {
+        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$d(_objectSpread$d({}, state.tmpObjects[tmpRectId]), {}, {
             isSquare: true
           })
         })
       }));
     } else if (e.code === 'AltLeft' || e.code === 'AltRight') {
       e.preventDefault();
-      set(state => _objectSpread$c(_objectSpread$c({}, state), {}, {
-        tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpRectId]), {}, {
+      set(state => _objectSpread$d(_objectSpread$d({}, state), {}, {
+        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$d(_objectSpread$d({}, state.tmpObjects[tmpRectId]), {}, {
             isCentered: true
           })
         })
@@ -7937,18 +7938,18 @@ function DrawRectangle(drawingId, pluginId) {
   };
   const keyup = e => {
     if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
-      set(state => _objectSpread$c(_objectSpread$c({}, state), {}, {
-        tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpRectId]), {}, {
+      set(state => _objectSpread$d(_objectSpread$d({}, state), {}, {
+        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$d(_objectSpread$d({}, state.tmpObjects[tmpRectId]), {}, {
             isSquare: false
           })
         })
       }));
     } else if (e.code === 'AltLeft' || e.code === 'AltRight') {
       e.preventDefault();
-      set(state => _objectSpread$c(_objectSpread$c({}, state), {}, {
-        tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
-          [tmpRectId]: _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpRectId]), {}, {
+      set(state => _objectSpread$d(_objectSpread$d({}, state), {}, {
+        tmpObjects: _objectSpread$d(_objectSpread$d({}, state.tmpObjects), {}, {
+          [tmpRectId]: _objectSpread$d(_objectSpread$d({}, state.tmpObjects[tmpRectId]), {}, {
             isCentered: false
           })
         })
@@ -8131,8 +8132,8 @@ const Circle$1 = ({
   }), /*#__PURE__*/React__default.createElement("meshBasicMaterial", materialProps));
 };
 
-function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawArc(drawingId, pluginId, arcType) {
   // Global hooks:
   const {
@@ -8186,7 +8187,7 @@ function DrawArc(drawingId, pluginId, arcType) {
       additionIndex = 0;
       lastAddedEndPointId = NOCCID;
       set(state => {
-        const tmpStartP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpStartPId]), {}, {
+        const tmpStartP = _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpStartPId]), {}, {
           position: lastMousePos.clone()
         });
         return {
@@ -8199,20 +8200,20 @@ function DrawArc(drawingId, pluginId, arcType) {
       additionIndex = 1;
       set(state => {
         const tmpStartP = state.tmpObjects[tmpStartPId];
-        const tmpEndP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpEndPId]), {}, {
+        const tmpEndP = _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpEndPId]), {}, {
           position: lastMousePos.clone()
         });
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
-        const tmpCenterP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$c(_objectSpread$c({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: centerPos ? centerPos : lastMousePos.clone()
         });
-        const tmpArc = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpArcId]), {}, {
+        const tmpArc = _objectSpread$c(_objectSpread$c({}, 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$b(_objectSpread$b({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -8325,7 +8326,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
             [tmpEndP.id]: tmpEndP,
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
@@ -8354,7 +8355,7 @@ function DrawArc(drawingId, pluginId, arcType) {
           clockwise: false
         };
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpArc.id]: tmpArc
           })
@@ -8416,11 +8417,11 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpEndP = state.tmpObjects[tmpEndPId];
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$b(_objectSpread$b({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$c(_objectSpread$c({}, tmpStartP), {}, {
               position: tmpEndP.position.clone()
             }),
-            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$c(_objectSpread$c({}, tmpCenterP), {}, {
               position: tmpEndP.position.clone()
             })
           })
@@ -8440,8 +8441,8 @@ function DrawArc(drawingId, pluginId, arcType) {
         const tmpStartP = state.tmpObjects[tmpStartPId];
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpStartPId]: _objectSpread$b(_objectSpread$b({}, tmpStartP), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpStartPId]: _objectSpread$c(_objectSpread$c({}, tmpStartP), {}, {
               position: lastMousePos.clone()
             })
           })
@@ -8454,14 +8455,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const centerPos = calculateCenterPoint(tmpStartP.position, lastMousePos, lastMousePos);
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$b(_objectSpread$b({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$c(_objectSpread$c({}, tmpEndP), {}, {
               position: lastMousePos.clone()
             }),
-            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$c(_objectSpread$c({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$b(_objectSpread$b({}, tmpArc), {}, {
+            [tmpArcId]: _objectSpread$c(_objectSpread$c({}, tmpArc), {}, {
               // In case centerPos couldn't be calculated, the arc should be drawn as a line
               drawAsLine: centerPos === undefined,
               clockwise: false
@@ -8476,14 +8477,14 @@ function DrawArc(drawingId, pluginId, arcType) {
         const centerPos = calculateCenterPoint(tmpStartP.position, tmpEndP.position, lastMousePos);
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
-            [tmpEndPId]: _objectSpread$b(_objectSpread$b({}, tmpEndP), {}, {
+          tmpObjects: _objectSpread$c(_objectSpread$c({}, state.tmpObjects), {}, {
+            [tmpEndPId]: _objectSpread$c(_objectSpread$c({}, tmpEndP), {}, {
               position: arcType === HandlersList.DRAWARCTANGENT ? lastMousePos.clone() : tmpEndP.position
             }),
-            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$c(_objectSpread$c({}, tmpCenterP), {}, {
               position: centerPos ? centerPos : lastMousePos.clone()
             }),
-            [tmpArcId]: _objectSpread$b(_objectSpread$b({}, tmpArc), {}, {
+            [tmpArcId]: _objectSpread$c(_objectSpread$c({}, 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)
@@ -8510,8 +8511,8 @@ function DrawArc(drawingId, pluginId, arcType) {
   };
 }
 
-function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function DrawCircle(drawingId, pluginId) {
   const {
     set
@@ -8556,7 +8557,7 @@ function DrawCircle(drawingId, pluginId) {
     } else {
       additionIndex = 0;
       set(state => {
-        const tmpCenterP = _objectSpread$a(_objectSpread$a({}, state.tmpObjects[tmpCenterPId]), {}, {
+        const tmpCenterP = _objectSpread$b(_objectSpread$b({}, state.tmpObjects[tmpCenterPId]), {}, {
           position: lastMousePos.clone()
         });
         return {
@@ -8587,7 +8588,7 @@ function DrawCircle(drawingId, pluginId) {
           radius: 0.001
         };
         return {
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
             [tmpCenterP.id]: tmpCenterP,
             [tmpCircle.id]: tmpCircle
           })
@@ -8611,7 +8612,7 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
           tmpObjects: {
-            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId))
             })
           }
@@ -8631,8 +8632,8 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
-            [tmpCenterPId]: _objectSpread$a(_objectSpread$a({}, tmpCenterP), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpCenterPId]: _objectSpread$b(_objectSpread$b({}, tmpCenterP), {}, {
               position: snappedPos || localPos
             })
           })
@@ -8642,8 +8643,8 @@ function DrawCircle(drawingId, pluginId) {
         const tmpCircle = state.tmpObjects[tmpCircleId];
         return {
           mousePos: lastMousePos,
-          tmpObjects: _objectSpread$a(_objectSpread$a({}, state.tmpObjects), {}, {
-            [tmpCircleId]: _objectSpread$a(_objectSpread$a({}, tmpCircle), {}, {
+          tmpObjects: _objectSpread$b(_objectSpread$b({}, state.tmpObjects), {}, {
+            [tmpCircleId]: _objectSpread$b(_objectSpread$b({}, tmpCircle), {}, {
               radius: Math.max(tmpCenterP.position.distanceTo(localPos), 0.001)
             })
           })
@@ -9312,40 +9313,42 @@ const TabIcon = ({
   })));
 };
 const CopyPatternsImpl = () => {
-  const {
-    TabPane
-  } = useBuerli(buerli => buerli.options.elements);
   const ref = React__default.useRef(null);
   const size = useLayoutSize(ref);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React__default.createElement(Tabs, {
-    sidepadding: size.sidePadding,
-    iconmargin: 2 * size.iconMargin,
-    tabBarGutter: 0,
-    type: "card",
-    style: {
-      paddingRight: '4px'
-    }
-  }, /*#__PURE__*/React__default.createElement(TabPane, {
-    tab: /*#__PURE__*/React__default.createElement(TabIcon, {
+  const tabItems = [{
+    label: /*#__PURE__*/React__default.createElement(TabIcon, {
       url: resources[Patterns.RECTANGULAR],
       tooltip: "Rectangular copy pattern."
     }),
-    key: "Rectangle"
-  }, /*#__PURE__*/React__default.createElement(RectPattern, null)), /*#__PURE__*/React__default.createElement(TabPane, {
-    tab: /*#__PURE__*/React__default.createElement(TabIcon, {
+    key: 'Rectangle',
+    children: /*#__PURE__*/React__default.createElement(RectPattern, null)
+  }, {
+    label: /*#__PURE__*/React__default.createElement(TabIcon, {
       url: resources[Patterns.CIRCULAR],
       tooltip: "Circular copy pattern."
     }),
-    key: "Circular"
-  }, /*#__PURE__*/React__default.createElement(CircPattern, null)), /*#__PURE__*/React__default.createElement(TabPane, {
-    tab: /*#__PURE__*/React__default.createElement(TabIcon, {
+    key: 'Circular',
+    children: /*#__PURE__*/React__default.createElement(CircPattern, null)
+  }, {
+    label: /*#__PURE__*/React__default.createElement(TabIcon, {
       url: resources[Patterns.MIRROR],
       tooltip: "Mirror copy pattern."
     }),
-    key: "Mirror"
-  }, /*#__PURE__*/React__default.createElement(MirrorPattern, null))));
+    key: 'Mirror',
+    children: /*#__PURE__*/React__default.createElement(MirrorPattern, null)
+  }];
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(Tabs, {
+    sidepadding: size.sidePadding,
+    iconmargin: 2 * size.iconMargin,
+    tabBarGutter: 0,
+    type: "card",
+    style: {
+      paddingRight: '4px'
+    },
+    items: tabItems
+  }));
 };
 const CopyPatterns = () => {
   return /*#__PURE__*/React__default.createElement(SketchGroup, {
@@ -10133,8 +10136,8 @@ function recognizeFilletByArc(object, tree, sketchId) {
   };
 }
 
-function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Fillet(drawingId, pluginId, camControls) {
   const plugin = getPlugin(drawingId, pluginId);
   const set = plugin.set;
@@ -10273,7 +10276,7 @@ function Fillet(drawingId, pluginId, camControls) {
       if (!data) {
         return;
       }
-      ccAPI.sketcher.createFillet(drawingId, sketchId, data.info.lines.map(line => line.id), data.info.lineStarts.map(lineStart => lineStart.id), data.info.incidence, data.info.control, data.params.start, getArcAngles(_objectSpread$9(_objectSpread$9({}, data.params), {}, {
+      ccAPI.sketcher.createFillet(drawingId, sketchId, data.info.lines.map(line => line.id), data.info.lineStarts.map(lineStart => lineStart.id), data.info.incidence, data.info.control, data.params.start, getArcAngles(_objectSpread$a(_objectSpread$a({}, data.params), {}, {
         radius: 1
       })).mid, data.params.end).catch(console.warn);
       set({
@@ -11273,8 +11276,8 @@ const Circle = ({
   }));
 };
 
-function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /*
  * !polygonOffset!
@@ -11321,7 +11324,7 @@ const CCLine = props => {
     start: start,
     end: end,
     scalePlus: isHovered || isSelected,
-    meshProps: _objectSpread$8(_objectSpread$8({
+    meshProps: _objectSpread$9(_objectSpread$9({
       renderOrder
     }, handlers), {}, {
       userData
@@ -11370,7 +11373,7 @@ const CCPoint = props => {
     // so we have to increase size of hovered or selected point to make the point not occluded buy other ones
     ,
     scalePlus: isHovered || isSelected,
-    meshProps: _objectSpread$8(_objectSpread$8({
+    meshProps: _objectSpread$9(_objectSpread$9({
       renderOrder
     }, handlers), {}, {
       userData
@@ -11424,7 +11427,7 @@ const CCArc = props => {
     center: centerPoint,
     clockwise: clockwise,
     scalePlus: isHovered || isSelected,
-    meshProps: _objectSpread$8({
+    meshProps: _objectSpread$9({
       renderOrder,
       userData
     }, handlers),
@@ -11466,7 +11469,7 @@ const CCCircle = props => {
     center: center,
     radius: radius,
     scalePlus: isHovered || isSelected,
-    meshProps: _objectSpread$8({
+    meshProps: _objectSpread$9({
       renderOrder,
       userData
     }, handlers),
@@ -12324,6 +12327,36 @@ const View$d = ({
   }));
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$4 = ".handlers-dropdown .ant-dropdown-menu-root {\n  border: 1px solid rgba(127, 127, 127, 1.0);\n  border-top: 1px solid rgba(255, 255, 255, 1.0);\n  border-radius: 0px;\n  padding: 0px;\n  margin-top: -2px;\n  margin-left: -3px;\n}\n\n.handlers-dropdown .ant-dropdown-menu-root .ant-dropdown-menu-item {\n  background-color: initial;\n  padding: 0px;\n  margin-top: 0px;\n}\n";
+styleInject(css_248z$4);
+
 const _excluded$4 = ["handlerName", "sideEffect"];
 const HandlerIcon = styled(RadioButtonImpl)`
   width: 30px;
@@ -12400,8 +12433,6 @@ const SubGroup$1 = ({
   iconMargin
 }) => {
   const {
-    Menu,
-    MenuItem,
     Dropdown
   } = useBuerli(buerli => buerli.options.elements);
   const {
@@ -12410,33 +12441,24 @@ const SubGroup$1 = ({
   } = React__default.useContext(RootContext);
   const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
   const [lastHandler, setLastHandler] = React__default.useState(handlers[0]);
-  const menu = /*#__PURE__*/React__default.createElement(Menu, {
-    style: {
-      border: '1px solid rgba(127, 127, 127, 1.0)',
-      borderTop: '1px solid rgba(255, 255, 255, 1.0)',
-      borderRadius: '0px',
-      padding: '0px',
-      marginTop: '-3px',
-      marginLeft: '-3px'
-    }
-  }, /*#__PURE__*/React__default.createElement(MenuItem, {
-    key: "menuItem",
-    style: {
-      backgroundColor: 'initial',
-      padding: '0px',
-      marginTop: '0px'
-    }
-  }, /*#__PURE__*/React__default.createElement(HandlerRadioGroup, {
-    iconmargin: iconMargin,
-    value: activeHandler,
-    size: "small"
-  }, handlers.map(hName => /*#__PURE__*/React__default.createElement(HButton, {
-    key: hName,
-    handlerName: hName,
-    sideEffect: () => setLastHandler(hName)
-  })))));
+  const menuItems = [{
+    label: /*#__PURE__*/React__default.createElement(HandlerRadioGroup, {
+      iconmargin: iconMargin,
+      value: activeHandler,
+      size: "small"
+    }, handlers.map(hName => /*#__PURE__*/React__default.createElement(HButton, {
+      key: hName,
+      handlerName: hName,
+      sideEffect: () => setLastHandler(hName)
+    }))),
+    key: 'menuItem'
+  }];
+  const menuProps = {
+    items: menuItems
+  };
   return /*#__PURE__*/React__default.createElement(Dropdown, {
-    overlay: menu
+    overlayClassName: "handlers-dropdown",
+    menu: menuProps
   }, /*#__PURE__*/React__default.createElement(HButton, {
     handlerName: lastHandler
   }));
@@ -12723,7 +12745,7 @@ const Menu = _ref => {
       children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$3);
-  const onItemClick = React__default.useCallback(e => {
+  const onClick = React__default.useCallback(e => {
     e.domEvent.stopPropagation();
     let item = items[e.keyPath.pop()];
     if (item.children) {
@@ -12731,33 +12753,28 @@ const Menu = _ref => {
     }
     item.callback(e.domEvent);
   }, [items]);
-  const menu = /*#__PURE__*/React__default.createElement(Menu$1, {
-    onClick: onItemClick
-  }, Object.keys(items).map(key => {
+  const menuItems = Object.keys(items).map(key => {
     const item = items[key];
-    if (item.children) {
-      const smItem = item;
-      return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, {
-        title: smItem.caption,
-        key: key,
-        icon: smItem.icon
-      }, Object.keys(smItem.children).map(chKey => {
-        const chItem = smItem.children[chKey];
-        return /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-          key: chKey,
-          icon: chItem.icon
-        }, chItem.caption);
-      }));
-    } else {
-      const item_ = item;
-      return /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-        key: key,
-        icon: item_.icon
-      }, item_.caption);
-    }
-  }));
+    return {
+      label: item.caption,
+      key,
+      icon: item.icon,
+      children: item.children && Object.keys(item.children).map(key_ => {
+        const smItem = item.children[key_];
+        return {
+          label: smItem.caption,
+          key: key_,
+          icon: smItem.icon
+        };
+      })
+    };
+  });
+  const menuProps = {
+    items: menuItems,
+    onClick
+  };
   return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
-    overlay: menu,
+    menu: menuProps,
     placement: "bottom"
   }, props), children ? children : /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -12769,7 +12786,10 @@ const Menu = _ref => {
   }, "..."));
 };
 
+function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const NameEdit = ({
+  style,
   drawingId,
   objId,
   setEditName,
@@ -12802,9 +12822,9 @@ const NameEdit = ({
   const showBlankDiv = useCADStore(s => s.blankDiv.isActive);
   const zIndex = showBlankDiv ? blankZIndex + 1 : 0;
   return /*#__PURE__*/React__default.createElement(Input, {
-    style: {
+    style: _objectSpread$8(_objectSpread$8({}, style), {}, {
       zIndex
-    },
+    }),
     ref: ref,
     onPressEnter: onEnter,
     onClick: onClick,
@@ -13018,9 +13038,14 @@ const ObjTitle = ({
   } = React__default.useContext(RootContext);
   const name = useDrawingStr(drawingId, d => d.structure.tree[objId].name);
   const objClass = useDrawingStr(drawingId, d => d.structure.tree[objId].class);
+  const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
+  const globalSelection = useTreeObjSelection(drawingId, objId);
+  const isGHovered = globalSelection.isHovered;
+  const isGSelected = globalSelection.isSelected;
+  const onClickSel = globalSelection.handlers.onClick;
   const isHovered = useSketchState(drawingId, pluginId, s => s.hovered === objId);
   const isSelected = useSketchState(drawingId, pluginId, s => s.selected.indexOf(objId) !== -1);
-  const color = isSelected ? '#ffa500' : isHovered ? '#28d79f' : undefined;
+  const color = isSelected || isGSelected ? '#ffa500' : isHovered || isGHovered ? '#28d79f' : undefined;
 
   // TODO: Rename resources so that they have more generic names, i.e. 'CC_Point' instead of 'drawPoint', etc
   const imgName = React__default.useMemo(() => {
@@ -13039,17 +13064,14 @@ const ObjTitle = ({
   }, [objClass]);
   const [rename, setRename] = React__default.useState(false);
   const menuItems = useMenuItems$3(drawingId, pluginId, objId, setRename);
-  const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
-  const globalSelection = useTreeObjSelection(drawingId, objId);
-  const onClickSel = globalSelection.handlers.onClick;
 
   // TODO: Implement global selection in onClick? Not sure if needed...
-  const onClick = React__default.useCallback(() => {
+  const onClick = React__default.useCallback(e => {
     if (activeHandler === HandlersList.DRAG) {
       select(drawingId, pluginId, objId);
     } else if (!activeHandler) {
       // if no handler is active, some selector should be active
-      onClickSel && onClickSel();
+      onClickSel && onClickSel(e);
     }
   }, [drawingId, pluginId, objId, activeHandler, onClickSel]);
   const onMouseEnter = React__default.useCallback(() => {
@@ -13174,6 +13196,8 @@ const Details = () => {
   }, [drawingId, sketchChildren, ccUseGeometry]);
   const hasGeometry = geometry.length > 0 || refGeometry.length > 0;
   const hasConstraints = constraints.length > 0;
+  const [geomCollapsed, setGeomCollapsed] = React__default.useState(false);
+  const [constrCollapsed, setConstrCollapsed] = React__default.useState(false);
   return /*#__PURE__*/React__default.createElement(SketchGroup, {
     caption: "Details",
     collapse: true
@@ -13191,9 +13215,20 @@ const Details = () => {
     style: {
       paddingLeft: '2px'
     }
-  }, /*#__PURE__*/React__default.createElement(Text$2, {
+  }, /*#__PURE__*/React__default.createElement(FlexRow, {
+    style: {
+      marginLeft: '-5px'
+    }
+  }, /*#__PURE__*/React__default.createElement(CollapseButton, {
+    collapsed: geomCollapsed,
+    onClick: () => setGeomCollapsed(x => !x)
+  }), /*#__PURE__*/React__default.createElement(Text$2, {
     strong: true
-  }, "Geometry"), refGeometry.map(([id, refId]) => /*#__PURE__*/React__default.createElement(SketchObj, {
+  }, "Geometry")), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: geomCollapsed ? 'none' : 'block'
+    }
+  }, refGeometry.map(([id, refId]) => /*#__PURE__*/React__default.createElement(SketchObj, {
     objId: id,
     refId: refId,
     key: id,
@@ -13202,17 +13237,29 @@ const Details = () => {
     objId: id,
     key: id,
     level: 0
-  }))), hasConstraints && !isTrimActive && /*#__PURE__*/React__default.createElement("div", {
+  })))), hasConstraints && !isTrimActive && /*#__PURE__*/React__default.createElement("div", {
     style: {
-      paddingLeft: '2px'
+      paddingLeft: '2px',
+      marginTop: '2px'
     }
-  }, /*#__PURE__*/React__default.createElement(Text$2, {
+  }, /*#__PURE__*/React__default.createElement(FlexRow, {
+    style: {
+      marginLeft: '-5px'
+    }
+  }, /*#__PURE__*/React__default.createElement(CollapseButton, {
+    collapsed: constrCollapsed,
+    onClick: () => setConstrCollapsed(x => !x)
+  }), /*#__PURE__*/React__default.createElement(Text$2, {
     strong: true
-  }, "Constraints"), constraints.map(id => /*#__PURE__*/React__default.createElement(SketchObj, {
+  }, "Constraints")), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: constrCollapsed ? 'none' : 'block'
+    }
+  }, constraints.map(id => /*#__PURE__*/React__default.createElement(SketchObj, {
     objId: id,
     key: id,
     level: 0
-  }))));
+  })))));
 };
 
 const useRetainVisibility = (drawingId, pluginId) => {
@@ -13375,6 +13422,269 @@ const Position = () => {
   })));
 };
 
+function useEditedRegionsParam() {
+  const {
+    drawingId
+  } = React__default.useContext(RootContext);
+  const [value, setValue] = React__default.useState([]);
+  const isChanged = React__default.useCallback(() => {
+    const tree = getDrawing(drawingId).structure.tree;
+    return value.some(region => {
+      var _tree$region$objId, _tree$region$objId$me, _tree$region$objId$me2;
+      const members = ((_tree$region$objId = tree[region.objId]) == null ? void 0 : (_tree$region$objId$me = _tree$region$objId.members) == null ? void 0 : (_tree$region$objId$me2 = _tree$region$objId$me.curves) == null ? void 0 : _tree$region$objId$me2.members) || EMPTYARRAY;
+      return members.length !== region.curves.length || members.some((curve, i) => curve.value !== region.curves[i]);
+    });
+  }, [drawingId, value]);
+  return {
+    value,
+    setValue,
+    isChanged
+  };
+}
+const nameRegex$1 = /[a-zA-Z_][a-zA-Z0-9_]*/g;
+const AddRegion = () => {
+  const {
+    Input,
+    Selection,
+    Button
+  } = useBuerli(buerli => buerli.options.elements);
+  const {
+    drawingId,
+    pluginId
+  } = React__default.useContext(RootContext);
+  const sketchId = usePlugin(drawingId, pluginId, plugin => plugin.objectId);
+  const [name, setName] = React__default.useState('');
+  const [selectorId, setSelectorId] = React__default.useState();
+  const selected = useDrawingArr(drawingId, d => {
+    var _d$selection$refs;
+    return (_d$selection$refs = d.selection.refs[selectorId || EMPTYSTR]) == null ? void 0 : _d$selection$refs.items;
+  });
+  const onNameChange = React__default.useCallback(e => {
+    const value = e.target.value;
+    const match = value.match(nameRegex$1);
+    if (value.length === 0 || (match == null ? void 0 : match.length) === 1 && match[0].length === value.length) {
+      setName(value);
+    }
+  }, []);
+  const regionFilter = React__default.useCallback((scope, data) => {
+    if (scope !== TreeObjScope) {
+      return false;
+    }
+    const pSketchId = getAncestorIdByClass(drawingId, data.object.id, CCClasses.CCSketch);
+    if (!pSketchId) {
+      return false;
+    }
+    return pSketchId === sketchId && (data.object.class === CCClasses.CCLine || data.object.class === CCClasses.CCArc || data.object.class === CCClasses.CCCircle);
+  }, [drawingId, sketchId]);
+  const addRegion = React__default.useCallback(() => {
+    if (name.length === 0 || selected.length === 0) return;
+    const curves = selected.map(item => item.data.object.id);
+    setName('');
+    getDrawing(drawingId).api.selection.unselectAll(selectorId);
+    getDrawing(drawingId).api.selection.activateSelector(null);
+    return ccAPI.sketcher.addSketchRegion(drawingId, sketchId, name, curves).catch(console.warn);
+  }, [drawingId, sketchId, name, selectorId, selected]);
+  const setRefsFromItems = React__default.useCallback((selId, selItems) => {
+    getDrawing(drawingId).api.selection.setItems(selId, selItems);
+  }, [drawingId]);
+  const modes = useModes(drawingId, true, setRefsFromItems, undefined);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: 4,
+      minWidth: '0px'
+    }
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    placeholder: "Name...",
+    value: name,
+    onChange: onNameChange
+  })), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: 7,
+      minWidth: '0px',
+      margin: '0px 1px'
+    }
+  }, /*#__PURE__*/React__default.createElement(Selection, {
+    drawingId: drawingId,
+    onCreated: setSelectorId,
+    filter: regionFilter,
+    modes: modes
+  })), /*#__PURE__*/React__default.createElement(Button, {
+    style: {
+      width: '25px',
+      height: '25px',
+      margin: '2px -1px 2px 1px'
+    },
+    tabIndex: -1,
+    icon: /*#__PURE__*/React__default.createElement(PlusOutlined, null),
+    size: "small",
+    onClick: addRegion,
+    title: 'Add new sketch region'
+  }));
+};
+var RegionMembers;
+(function (RegionMembers) {
+  RegionMembers["Curves"] = "curves";
+})(RegionMembers || (RegionMembers = {}));
+const EditRegion = ({
+  sketchId,
+  regionId,
+  editedRegions
+}) => {
+  const {
+    Label
+  } = useBuerli(buerli => buerli.options.elements);
+  const {
+    drawingId
+  } = React__default.useContext(RootContext);
+  const curves = useRefsParam(drawingId, regionId, RegionMembers.Curves);
+  const name = useDrawingStr(drawingId, d => {
+    var _d$structure$tree$reg;
+    return (_d$structure$tree$reg = d.structure.tree[regionId]) == null ? void 0 : _d$structure$tree$reg.name;
+  });
+  const [rename, setRename] = React__default.useState(false);
+  const menuItems = useMenuItems$4(drawingId, regionId, false, setRename);
+
+  // Remove region from edited in case of deletion
+  React__default.useEffect(() => {
+    return () => editedRegions.setValue(value_ => value_.filter(region => region.objId !== regionId));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React__default.useEffect(() => {
+    editedRegions.setValue(value_ => {
+      const res = value_.filter(region => region.objId !== regionId);
+      if (curves.isChanged()) {
+        res.push({
+          objId: regionId,
+          curves: [...curves.userValue]
+        });
+      }
+      return res;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [curves.userValue]);
+  const regionFilter = React__default.useCallback((scope, data) => {
+    if (scope !== TreeObjScope) {
+      return false;
+    }
+    const pSketchId = getAncestorIdByClass(drawingId, data.object.id, CCClasses.CCSketch);
+    if (!pSketchId) {
+      return false;
+    }
+    return pSketchId === sketchId && (data.object.class === CCClasses.CCLine || data.object.class === CCClasses.CCArc || data.object.class === CCClasses.CCCircle);
+  }, [drawingId, sketchId]);
+  const nameComponent = rename ? /*#__PURE__*/React__default.createElement(NameEdit, {
+    style: {
+      width: '100%',
+      height: '25px',
+      minHeight: '25px',
+      lineHeight: '22px',
+      margin: '2px 1px'
+    },
+    drawingId: drawingId,
+    objId: regionId,
+    setEditName: setRename,
+    name: name
+  }) : /*#__PURE__*/React__default.createElement(Label, {
+    style: {
+      paddingLeft: '4px'
+    },
+    ellipsis: true
+  }, name);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: 4,
+      width: '100%',
+      minWidth: '0px'
+    }
+  }, nameComponent), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: 7,
+      width: '100%',
+      minWidth: '0px',
+      marginRight: '1px'
+    }
+  }, /*#__PURE__*/React__default.createElement(RefsEditor, {
+    drawingId: drawingId,
+    param: curves,
+    filter: regionFilter,
+    customIdPicker: pickObjId,
+    sketchLines: true
+  })), /*#__PURE__*/React__default.createElement(Menu, {
+    items: menuItems
+  }));
+};
+const Regions = () => {
+  const {
+    Button
+  } = useBuerli(buerli => buerli.options.elements);
+  const {
+    drawingId,
+    pluginId
+  } = React__default.useContext(RootContext);
+  const sketchId = usePlugin(drawingId, pluginId, plugin => plugin.objectId);
+  const partId = getAncestorIdByClass(drawingId, sketchId, CCClasses.CCPart) || NOCCID;
+  const geometrySetId = useDrawingCCId(drawingId, d => {
+    var _d$structure$tree$par;
+    return (_d$structure$tree$par = d.structure.tree[partId]) == null ? void 0 : _d$structure$tree$par.geometrySet;
+  });
+  const geometrySetChildren = useDrawingArr(drawingId, d => {
+    var _d$structure$tree$geo;
+    return (_d$structure$tree$geo = d.structure.tree[geometrySetId]) == null ? void 0 : _d$structure$tree$geo.children;
+  });
+  const regions = React__default.useMemo(() => {
+    const tree = getDrawing(drawingId).structure.tree;
+    const ids = geometrySetChildren.filter(child => {
+      var _tree$child$members, _tree$child$members$s;
+      return tree[child].class === CCClasses.CCSketchRegion && ((_tree$child$members = tree[child].members) == null ? void 0 : (_tree$child$members$s = _tree$child$members.sketch) == null ? void 0 : _tree$child$members$s.value) === sketchId;
+    });
+    return ids;
+  }, [drawingId, sketchId, geometrySetChildren]);
+  const editedRegions = useEditedRegionsParam();
+  const updateAvailable = React__default.useMemo(() => {
+    return editedRegions.value.every(region => region.curves.length > 0) && editedRegions.isChanged();
+  }, [editedRegions]);
+  const onClick = React__default.useCallback(() => {
+    getDrawing(drawingId).api.selection.activateSelector(null);
+    const regionIds = editedRegions.value.map(region => region.objId);
+    const curvesArr = editedRegions.value.map(region => region.curves);
+    ccAPI.sketcher.updateSketchRegions(drawingId, regionIds, curvesArr).catch(console.warn);
+  }, [drawingId, editedRegions]);
+  return /*#__PURE__*/React__default.createElement(SketchGroup, {
+    caption: "Regions",
+    collapse: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      margin: '0px 3px 0px 1px'
+    }
+  }, /*#__PURE__*/React__default.createElement(AddRegion, null), regions.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: '10px'
+    }
+  }, regions.map(regionId => /*#__PURE__*/React__default.createElement(EditRegion, {
+    key: regionId,
+    sketchId: sketchId,
+    regionId: regionId,
+    editedRegions: editedRegions
+  })), /*#__PURE__*/React__default.createElement(Button, {
+    style: {
+      marginTop: '10px'
+    },
+    type: "primary",
+    disabled: !updateAvailable,
+    onClick: onClick
+  }, "Update regions"))));
+};
+
 const PlaneSelectionMode = ({
   drawingId,
   pluginId
@@ -13441,7 +13751,7 @@ const SketchMode = ({
   }), [drawingId, pluginId]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RootContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React__default.createElement(Handlers, null), /*#__PURE__*/React__default.createElement(Constraints$2, null), /*#__PURE__*/React__default.createElement(CopyPatterns, null), /*#__PURE__*/React__default.createElement(Details, null), /*#__PURE__*/React__default.createElement(Position, null)));
+  }, /*#__PURE__*/React__default.createElement(Handlers, null), /*#__PURE__*/React__default.createElement(Constraints$2, null), /*#__PURE__*/React__default.createElement(CopyPatterns, null), /*#__PURE__*/React__default.createElement(Details, null), /*#__PURE__*/React__default.createElement(Regions, null), /*#__PURE__*/React__default.createElement(Position, null)));
 };
 const RootImpl$f = ({
   drawingId,
@@ -13806,26 +14116,22 @@ function linePlaneAngle(drawingId, refsParam) {
       lineStart = gLine.start;
       lineEnd = gLine.end;
     }
-    let pointOnPlane = new THREE.Vector3();
     let normal = new THREE.Vector3();
     if (plane.class === CCClasses.CCWorkPlane) {
-      var _ccPlane$members, _ccPlane$members2;
+      var _ccPlane$members;
       const ccPlane = plane;
-      pointOnPlane = convertToVector((_ccPlane$members = ccPlane.members) == null ? void 0 : _ccPlane$members.Position);
-      normal = convertToVector((_ccPlane$members2 = ccPlane.members) == null ? void 0 : _ccPlane$members2.Normal);
+      normal = convertToVector((_ccPlane$members = ccPlane.members) == null ? void 0 : _ccPlane$members.Normal);
     } else {
       const gPlane = plane;
-      pointOnPlane = gPlane.pointOnPlane;
       normal = gPlane.normal;
     }
-    const pointStartVec = pointOnPlane.clone().sub(lineStart);
-    const pointEndVec = pointOnPlane.clone().sub(lineEnd);
+    const lineDir = lineEnd.clone().sub(lineStart);
 
     // compare calculated normals with a tolerance, because the sent normal from server is rounded to 3 decimal places.
     const tolerance = 0.01;
-    const isLineOnPlane = Math.abs(normal.dot(pointStartVec)) <= tolerance && Math.abs(normal.dot(pointEndVec)) <= tolerance;
-    if (!isLineOnPlane) {
-      return ['The line should lie within the plane'];
+    const isPerpendicular = Math.abs(normal.dot(lineDir)) <= tolerance;
+    if (!isPerpendicular) {
+      return ['The line should be perpendicular to the normal of the plane'];
     }
   }
   return [];
@@ -15745,7 +16051,10 @@ const getReorientedMatrix = (reoriented, zAxis) => {
 const useCsysMatrix = (drawingId, csysId, flip, reoriented) => {
   const csys = useDrawing(drawingId, drawing => drawing.structure.tree[csysId]);
   const tree = getDrawing(drawingId).structure.tree;
-  const [xAxisId, yAxisId, zAxisId] = ['xAxis', 'yAxis', 'zAxis'].map(name => csys.children.find(childId => tree[childId].name === name));
+  const [xAxisId, yAxisId, zAxisId] = ['xAxis', 'yAxis', 'zAxis'].map(name => {
+    var _csys$children;
+    return (csys == null ? void 0 : (_csys$children = csys.children) == null ? void 0 : _csys$children.find(childId => tree[childId].name === name)) || NOCCID;
+  });
   const xAxis = useDrawing(drawingId, drawing => {
     var _drawing$structure$tr, _drawing$structure$tr2;
     return (_drawing$structure$tr = drawing.structure.tree[xAxisId]) == null ? void 0 : (_drawing$structure$tr2 = _drawing$structure$tr.members) == null ? void 0 : _drawing$structure$tr2.Direction;
@@ -15759,16 +16068,17 @@ const useCsysMatrix = (drawingId, csysId, flip, reoriented) => {
     return (_drawing$structure$tr5 = drawing.structure.tree[zAxisId]) == null ? void 0 : (_drawing$structure$tr6 = _drawing$structure$tr5.members) == null ? void 0 : _drawing$structure$tr6.Direction;
   });
   const matrix = React__default.useMemo(() => {
-    if (!xAxis || !yAxis || !zAxis) {
+    var _csys$members;
+    if (!csys || !xAxis || !yAxis || !zAxis) {
       return new THREE.Matrix4();
     }
-    const pos = convertToVector(csys.members.Position);
+    const pos = convertToVector((_csys$members = csys.members) == null ? void 0 : _csys$members.Position);
     const [xDir, yDir, zDir] = [xAxis, yAxis, zAxis].map(axis => convertToVector(axis));
     const baseMatrix = new THREE.Matrix4().makeBasis(xDir, yDir, zDir);
     const flipMatrix = flip !== undefined ? getFlipMatrix(flip, xDir, yDir) : new THREE.Matrix4();
     const reorientedMatrix = reoriented !== undefined ? getReorientedMatrix(reoriented, zDir.clone().transformDirection(flipMatrix)) : new THREE.Matrix4();
     return reorientedMatrix.multiply(flipMatrix).multiply(baseMatrix).setPosition(pos);
-  }, [csys.members.Position, xAxis, yAxis, zAxis, flip, reoriented]);
+  }, [csys, xAxis, yAxis, zAxis, flip, reoriented]);
   return matrix;
 };
 
@@ -18560,6 +18870,7 @@ const HoveredConstraintDisplay = ({
     const csysUDataArray_ = [];
     const members = (_getDrawing = getDrawing(drawingId)) == null ? void 0 : (_getDrawing$structure = _getDrawing.structure.tree[hoveredConstrId]) == null ? void 0 : _getDrawing$structure.members;
     if (members && members[mateNames$1[0]]) {
+      const tree = getDrawing(drawingId).structure.tree;
       mateNames$1.forEach(mateName => {
         const member = members[mateName];
         if (member && member.members.length > 2) {
@@ -18568,14 +18879,16 @@ const HoveredConstraintDisplay = ({
           const csysId = member.members[1].value;
           const flip = ((_member$members$ = member.members[2]) == null ? void 0 : _member$members$.value) !== undefined ? member.members[2].value : FlipType.FLIP_Z;
           const reoriented = ((_member$members$2 = member.members[3]) == null ? void 0 : _member$members$2.value) !== undefined ? member.members[3].value : ReorientedType.REORIENTED_0;
-          csysUDataArray_.push({
-            matePath,
-            csysId,
-            flip,
-            reoriented,
-            isSelected: true,
-            onHUD: true
-          });
+          if (matePath.every(id => tree[id]) && tree[csysId]) {
+            csysUDataArray_.push({
+              matePath,
+              csysId,
+              flip,
+              reoriented,
+              isSelected: true,
+              onHUD: true
+            });
+          }
         }
       });
     }
@@ -19010,16 +19323,20 @@ const Outline = /*#__PURE__*/React__default.forwardRef(function Outline(_ref, fo
 
 const mateNames = ['firstRefMate', 'secondRefMate'];
 const getMateRefIds = (drawingId, constrId) => {
-  var _drawing$structure$tr;
+  var _tree$constrId;
   const drawing = getDrawing(drawingId);
-  const members = (_drawing$structure$tr = drawing.structure.tree[constrId]) == null ? void 0 : _drawing$structure$tr.members;
+  const tree = drawing.structure.tree;
+  const members = (_tree$constrId = tree[constrId]) == null ? void 0 : _tree$constrId.members;
   const pRefIds = [];
   if (members && members[mateNames[0]]) {
     mateNames.forEach(mateName => {
-      var _member$members$;
+      var _member$members$, _member$members$2;
       const member = members[mateName];
       const matePath = member == null ? void 0 : (_member$members$ = member.members[0]) == null ? void 0 : _member$members$.members;
-      if (matePath && matePath.length > 0) {
+      const csysId = member == null ? void 0 : (_member$members$2 = member.members[1]) == null ? void 0 : _member$members$2.value;
+
+      // Only add a product ref id if every other id of this mate is valid
+      if (matePath && matePath.length > 0 && matePath.every(mem => tree[mem.value]) && csysId && tree[csysId]) {
         pRefIds.push(matePath[matePath.length - 1].value);
       }
     });
@@ -19028,12 +19345,12 @@ const getMateRefIds = (drawingId, constrId) => {
     return;
   }
   const curNodeId = drawing.structure.currentNode;
-  const curNode = drawing.structure.tree[curNodeId];
+  const curNode = tree[curNodeId];
   const curRefIds = (curNode == null ? void 0 : curNode.instances) || (curNode == null ? void 0 : curNode.children) || [];
   const mateRefIds = [];
   curRefIds.forEach(id => {
-    var _drawing$structure$tr2, _drawing$structure$tr3;
-    const productRefId = ((_drawing$structure$tr2 = drawing.structure.tree[id].members) == null ? void 0 : (_drawing$structure$tr3 = _drawing$structure$tr2.productRef) == null ? void 0 : _drawing$structure$tr3.value) || id;
+    var _tree$id$members, _tree$id$members$prod;
+    const productRefId = ((_tree$id$members = tree[id].members) == null ? void 0 : (_tree$id$members$prod = _tree$id$members.productRef) == null ? void 0 : _tree$id$members$prod.value) || id;
     if (pRefIds.indexOf(productRefId) !== -1) {
       mateRefIds.push(id);
     }
@@ -19060,6 +19377,17 @@ const SectionHeader = ({
   }, children);
 };
 
+function usePrecheckErrorId$1(drawingId, constraintId) {
+  const constraintChildren = useDrawingArr(drawingId, d => {
+    var _d$structure$tree$con;
+    return (_d$structure$tree$con = d.structure.tree[constraintId]) == null ? void 0 : _d$structure$tree$con.children;
+  });
+  const errorId = constraintChildren.find(chId => {
+    var _getDrawing$structure;
+    return ((_getDrawing$structure = getDrawing(drawingId).structure.tree[chId]) == null ? void 0 : _getDrawing$structure.class) === CCClasses.BMError;
+  }) || null;
+  return errorId;
+}
 const SolverState = ({
   drawingId
 }) => {
@@ -19117,6 +19445,23 @@ const Constraints = ({
     constrIds: constrIds
   })));
 };
+const ErrorWrapper$1 = styled.div`
+  cursor: pointer;
+  margin-right: 4px;
+`;
+const PrecheckError$1 = ({
+  drawingId,
+  errorId
+}) => {
+  var _error$members;
+  const error = useDrawing(drawingId, d => d.structure.tree[errorId]);
+  const title = (error == null ? void 0 : (_error$members = error.members) == null ? void 0 : _error$members.errorMessage.value) || '';
+  return /*#__PURE__*/React__default.createElement(ErrorWrapper$1, null, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: title
+  }, /*#__PURE__*/React__default.createElement(ExclamationCircleTwoTone, {
+    twoToneColor: "#ff5f5f"
+  })));
+};
 const Constraint = ({
   drawingId,
   constraintId
@@ -19126,13 +19471,14 @@ const Constraint = ({
     return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId;
   });
   const name = useDrawing(drawingId, d => {
-    var _d$structure$tree$con;
-    return (_d$structure$tree$con = d.structure.tree[constraintId]) == null ? void 0 : _d$structure$tree$con.name;
+    var _d$structure$tree$con2;
+    return (_d$structure$tree$con2 = d.structure.tree[constraintId]) == null ? void 0 : _d$structure$tree$con2.name;
   });
   const isActive = useDrawing(drawingId, d => d.plugin.active.feature === constraintId);
   const isHovered = hoveredId === constraintId;
   const [rename, setRename] = React__default.useState(false);
   const menuItems = useMenuItems$4(drawingId, constraintId, isActive, setRename);
+  const errorId = usePrecheckErrorId$1(drawingId, constraintId);
   const onDoubleClick = React__default.useCallback(() => {
     getDrawing(drawingId).api.plugin.setActiveFeature(constraintId);
   }, [drawingId, constraintId]);
@@ -19164,7 +19510,14 @@ const Constraint = ({
     onDoubleClick: onDoubleClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, /*#__PURE__*/React__default.createElement(Space, null, nameComponent), /*#__PURE__*/React__default.createElement(Menu, {
+  }, /*#__PURE__*/React__default.createElement(Space, {
+    style: {
+      flex: 1
+    }
+  }, nameComponent), errorId && /*#__PURE__*/React__default.createElement(PrecheckError$1, {
+    drawingId: drawingId,
+    errorId: errorId
+  }), /*#__PURE__*/React__default.createElement(Menu, {
     items: menuItems
   }));
 };
@@ -19989,35 +20342,8 @@ const draggableModalReducer = (state, action) => {
   }
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$1 = "/**\n * NOTE: This is not compiled.\n */\n\n.ant-design-draggable-modal {\n  pointer-events: none;\n  overflow: hidden !important;\n}\n\n.ant-design-draggable-modal .ant-modal {\n  display: flex;\n  max-width: none;\n  transform-origin: 50% 50% !important;\n}\n\n.ant-design-draggable-modal .ant-modal-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.ant-design-draggable-modal .ant-modal-header {\n  flex: 0;\n  padding: 0;\n}\n\n.ant-design-draggable-modal .ant-modal-footer {\n  flex: 0;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title {\n  cursor: move;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title::before {\n  content: '\\00a0';\n}\n\n.ant-design-draggable-modal .ant-modal-body {\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal-resize-handle-inner {\n  width: 12px;\n  right: 14px;\n  border: 2px solid grey;\n  height: 12px;\n  bottom: 14px;\n  position: absolute;\n  border-top: 0;\n  border-left: 0;\n}\n\n.ant-design-draggable-modal-resize-handle {\n  right: -10px;\n  width: 44px;\n  bottom: -10px;\n  cursor: se-resize;\n  height: 44px;\n  position: absolute;\n}\n";
-styleInject(css_248z$1);
+var css_248z$3 = "/**\n * NOTE: This is not compiled.\n */\n\n.ant-design-draggable-modal {\n  pointer-events: none;\n  overflow: hidden !important;\n}\n\n.ant-design-draggable-modal .ant-modal {\n  display: flex;\n  max-width: none;\n  transform-origin: 50% 50% !important;\n}\n\n.ant-design-draggable-modal .ant-modal-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.ant-design-draggable-modal .ant-modal-header {\n  flex: 0;\n  padding: 0;\n}\n\n.ant-design-draggable-modal .ant-modal-footer {\n  flex: 0;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title {\n  cursor: move;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title::before {\n  content: '\\00a0';\n}\n\n.ant-design-draggable-modal .ant-modal-body {\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal-resize-handle-inner {\n  width: 12px;\n  right: 14px;\n  border: 2px solid grey;\n  height: 12px;\n  bottom: 14px;\n  position: absolute;\n  border-top: 0;\n  border-left: 0;\n}\n\n.ant-design-draggable-modal-resize-handle {\n  right: -10px;\n  width: 44px;\n  bottom: -10px;\n  cursor: se-resize;\n  height: 44px;\n  position: absolute;\n}\n";
+styleInject(css_248z$3);
 
 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; }
@@ -20734,6 +21060,9 @@ const ListPlaceholder = () => {
   })));
 };
 
+var css_248z$2 = ".header-dropdown .ant-dropdown-menu-root {\n  margin-left: -10px;\n}\n";
+styleInject(css_248z$2);
+
 const fileTypes = ['ofb', 'stp', 'stl'];
 
 /**
@@ -20787,13 +21116,10 @@ const ModelTreeHeader = ({
     }, type),
     key: type
   }));
-  const menu = /*#__PURE__*/React__default.createElement(Menu$1, {
-    style: {
-      marginLeft: '-10px'
-    },
+  const menuProps = {
     items: menuItems,
-    onClick: onClick
-  });
+    onClick
+  };
   const exportComponent = isFeatureActive ? /*#__PURE__*/React__default.createElement(Tooltip$1, {
     title: "All features should be closed before exporting",
     placement: "left"
@@ -20802,7 +21128,8 @@ const ModelTreeHeader = ({
     size: "small",
     disabled: true
   })) : /*#__PURE__*/React__default.createElement(Dropdown, {
-    overlay: menu
+    overlayClassName: "header-dropdown",
+    menu: menuProps
   }, /*#__PURE__*/React__default.createElement(Button, {
     icon: /*#__PURE__*/React__default.createElement(ExportOutlined, null),
     size: "small"
@@ -20975,8 +21302,8 @@ function useMenuItems(setEditName) {
   }, [setEditName]);
 }
 
-var css_248z = "/*\n  The only way to customize color picker from react-colorful is using css classes, so we need this file here.\n*/\n.colorPicker .react-colorful {\n  width: 100px;\n  height: 100px;\n}\n.colorPicker .react-colorful__hue {\n  height: 16px;\n}\n.colorPicker .react-colorful__pointer {\n  width: 20px;\n  height: 20px;\n}\n.colorPicker .react-colorful__saturation {\n  border-radius: 4px 4px 0 0;\n}\n.colorPicker .react-colorful__last-control {\n  border-radius: 0 0 4px 4px;\n}\n";
-styleInject(css_248z);
+var css_248z$1 = "/*\n  The only way to customize color picker from react-colorful is using css classes, so we need this file here.\n*/\n.colorPicker .react-colorful {\n  width: 100px;\n  height: 100px;\n}\n\n.colorPicker .react-colorful__hue {\n  height: 16px;\n}\n\n.colorPicker .react-colorful__pointer {\n  width: 20px;\n  height: 20px;\n}\n\n.colorPicker .react-colorful__saturation {\n  border-radius: 4px 4px 0 0;\n}\n\n.colorPicker .react-colorful__last-control {\n  border-radius: 0 0 4px 4px;\n}\n\n.colorPicker-dropdown {\n  color: transparent;\n}\n\n.colorPicker-dropdown .ant-dropdown-menu-root {\n  padding: 0px;\n  background-color: transparent;\n  box-shadow: none;\n}\n\n.colorPicker-dropdown .ant-dropdown-menu-root .ant-dropdown-menu-item {\n  padding: 0px;\n  color: transparent;\n}\n";
+styleInject(css_248z$1);
 
 function get256Color(color) {
   if (!color) return {
@@ -21075,8 +21402,8 @@ const ColorPicker = ({
     });
     setShowPicker(false);
   }, [drawingId, solidId, r, g, b, opacity]);
-  return /*#__PURE__*/React__default.createElement(Dropdown, {
-    overlay: /*#__PURE__*/React__default.createElement("div", {
+  const menuItems = [{
+    label: /*#__PURE__*/React__default.createElement("div", {
       className: "colorPicker"
     }, /*#__PURE__*/React__default.createElement(RgbaColorPicker, {
       color: userColor,
@@ -21102,6 +21429,14 @@ const ColorPicker = ({
       size: "small",
       onClick: cancel
     }))),
+    key: 'colorPicker'
+  }];
+  const menuProps = {
+    items: menuItems
+  };
+  return /*#__PURE__*/React__default.createElement(Dropdown, {
+    overlayClassName: "colorPicker-dropdown",
+    menu: menuProps,
     placement: "bottom",
     open: showPicker
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -21312,6 +21647,9 @@ const SideBar = ({
   }));
 };
 
+var css_248z = ".toolbar-dropdown .ant-dropdown-menu-root {\n  margin-left: -24px;\n}\n";
+styleInject(css_248z);
+
 var img$p = "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='M54.59 49.2615V54.9931H48.7075H42.8251V49.2615V43.5299H48.7075H54.59V49.2615Z' fill='%23C4C4C4'/%3e%3cpath d='M42.8251 43.5299L34.0767 35.0832M42.8251 43.5299V49.2615M42.8251 43.5299H48.7075M42.8251 54.9931L34.0767 64.1437M42.8251 54.9931V49.2615M42.8251 54.9931H48.7075M54.59 54.9931L63.0366 64.1437M54.59 54.9931V49.2615M54.59 54.9931H48.7075M54.59 43.5299L63.0366 35.0832M54.59 43.5299V49.2615M54.59 43.5299H48.7075M54.59 49.2615H79.1254M42.8251 49.2615H17.9879M48.7075 43.5299L48.7075 18.9944M48.7075 54.9931L48.7075 79.8303' stroke='black' stroke-width='4'/%3e%3c/svg%3e";
 
 var img$o = "data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0)'%3e%3cpath d='M23.3951 -18.3953C26.7929 -27.63 31.0227 -40.7314 31.0227 -40.7314L38.6065 -18.3796L31.0008 -18.3874L23.3951 -18.3953Z' fill='%23C4C4C4'/%3e%3cpath d='M30.9497 33.7484L31.0008 -18.3874M31.0008 -18.3874L23.3951 -18.3953C26.7929 -27.63 31.0227 -40.7314 31.0227 -40.7314L38.6065 -18.3796L31.0008 -18.3874Z' stroke='%23C4C4C4' stroke-width='5'/%3e%3cpath d='M-19.6068 58.8999C-29.4464 58.8234 -43.2064 59.2709 -43.2064 59.2709L-24.7335 44.5785L-22.1701 51.7392L-19.6068 58.8999Z' fill='%23C4C4C4'/%3e%3cpath d='M26.9146 34.1651L-22.1701 51.7392M-22.1701 51.7392L-19.6068 58.8999C-29.4464 58.8234 -43.2064 59.2709 -43.2064 59.2709L-24.7335 44.5785L-22.1701 51.7392Z' stroke='%23C4C4C4' stroke-width='5'/%3e%3cpath d='M71.7906 62.6511C76.2149 71.4403 82.8953 83.4781 82.8953 83.4781L61.3896 73.7508L66.5901 68.201L71.7906 62.6511Z' fill='black'/%3e%3cpath d='M28.5445 32.5543L66.5901 68.201M66.5901 68.201L71.7906 62.6511C76.2149 71.4403 82.8953 83.4781 82.8953 83.4781L61.3896 73.7508L66.5901 68.201Z' stroke='black' stroke-width='5'/%3e%3ccircle cx='30.9862' cy='33.7406' r='14.6466' transform='rotate(10.304 30.9862 33.7406)' fill='%23C4C4C4'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0'%3e%3crect width='100' height='100' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
@@ -21384,25 +21722,25 @@ const PartModeCmds = (drawingId, rootId) => {
       icon: /*#__PURE__*/React__default.createElement(Icon, {
         url: img$p
       }),
-      callback: wrapper(() => featureApi.createWorkPoint(drawingId, rootId))
+      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, CCClasses.CCWorkPoint, 'WorkPoint'))
     }, {
       label: 'Workaxis',
       icon: /*#__PURE__*/React__default.createElement(Icon, {
         url: img$o
       }),
-      callback: wrapper(() => featureApi.createWorkAxis(drawingId, rootId))
+      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, CCClasses.CCWorkAxis, 'WorkAxis'))
     }, {
       label: 'Workplane',
       icon: /*#__PURE__*/React__default.createElement(Icon, {
         url: img$n
       }),
-      callback: wrapper(() => featureApi.createWorkPlane(drawingId, rootId))
+      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, CCClasses.CCWorkPlane, 'WorkPlane'))
     }, {
       label: 'WCsys',
       icon: /*#__PURE__*/React__default.createElement(Icon, {
         url: img$m
       }),
-      callback: wrapper(() => featureApi.createWorkCoordSystem(drawingId, rootId))
+      callback: wrapper(() => featureApi.createWorkGeometry(drawingId, rootId, CCClasses.CCWorkCoordSystem, 'WorkCoordSystem'))
     }],
     Solid: [{
       label: 'Extrusion',
@@ -21664,15 +22002,10 @@ const SubGroup = ({
     }, command.icon),
     key: command.label
   }));
-
-  // Menu appears right under arrow button, but it should be under feature button, so it's shifter for feature button width to the left
-  const menu = /*#__PURE__*/React__default.createElement(Menu$1, {
+  const menuProps = {
     items: menuItems,
-    onClick: onClick,
-    style: {
-      marginLeft: '-24px'
-    }
-  });
+    onClick
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button.Group, {
     style: {
       top: '1px'
@@ -21680,7 +22013,8 @@ const SubGroup = ({
   }, /*#__PURE__*/React__default.createElement(FButton, {
     command: commands[curCmdIdx]
   }), /*#__PURE__*/React__default.createElement(Dropdown, {
-    overlay: menu
+    overlayClassName: "toolbar-dropdown",
+    menu: menuProps
   }, /*#__PURE__*/React__default.createElement(Button, {
     icon: /*#__PURE__*/React__default.createElement(DownOutlined, null),
     size: "small",