@buerli.io/react-cad 0.6.0 → 0.7.1-beta.1

package/build/index.cjs.js

@@ -8,6 +8,7 @@ var core = require('@buerli.io/core');
 var classcad = require('@buerli.io/classcad');
 var THREE = require('three');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _extends = require('@babel/runtime/helpers/extends');
 var fiber = require('@react-three/fiber');
 var drei = require('@react-three/drei');
 var create = require('zustand');
@@ -15,7 +16,6 @@ var vanilla = require('zustand/vanilla');
 require('antd/dist/antd.css');
 var styled = require('styled-components');
 var icons = require('@ant-design/icons');
-var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var reactDom = require('react-dom');
 var antd = require('antd');
@@ -223,7 +223,7 @@ function useGlobalToLocalMatrix(drawingId, objId) {
 function getGlobalToLocalMatrix(drawingId, objId) {
   const drawing = core.getDrawing(drawingId);
   const object = drawing.structure.tree[objId];
-  const matrix = core.MathUtils.convertToMatrix4(object.coordinateSystem);
+  const matrix = object.coordinateSystem ? core.MathUtils.convertToMatrix4(object.coordinateSystem) : new THREE__namespace.Matrix4();
   return matrix.invert();
 }
 function convertToVector(point) {
@@ -1115,9 +1115,36 @@ const isAngular = dim => classcad.ccUtils.base.isA(dim.class, classcad.CCClasses
 
 function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const isFeatureActive = drawingId => {
+  const activePlugin = core.getDrawing(drawingId).plugin.active.feature;
+  if (activePlugin) {
+    core.showMessage({
+      text: 'Error: Please close feature before changing the current product!',
+      type: 'error'
+    });
+    return true;
+  }
+  return false;
+};
+const isExprPluginActive = drawingId => {
+  const drawing = core.getDrawing(drawingId);
+  const activeGPlugins = drawing.plugin.active.global;
+  const isExprPluginActive_ = activeGPlugins.findIndex(id => drawing.plugin.refs[id].name === 'Expressions') !== -1;
+  if (isExprPluginActive_) {
+    core.showMessage({
+      text: 'Error: Please close the Expressions plugin before changing the current product!',
+      type: 'error'
+    });
+    return true;
+  }
+  return false;
+};
 const appApi = (set, get) => ({
   assemblyTree: {
     startProdEditing: (drawingId, objId) => {
+      if (isFeatureActive(drawingId) || isExprPluginActive(drawingId)) {
+        return;
+      }
       set(state => {
         let res = [];
         const curNode = core.api.getState().drawing.refs[drawingId].structure.currentNode;
@@ -1134,7 +1161,9 @@ const appApi = (set, get) => ({
     goBack: drawingId => {
       const prodStack = get().assemblyTree.prodStack;
       const prevProd = prodStack[prodStack.length - 1];
-      if (!prevProd) return;
+      if (!prevProd || isFeatureActive(drawingId) || isExprPluginActive(drawingId)) {
+        return;
+      }
       set(state => {
         const res = state.assemblyTree.prodStack;
         res.pop();
@@ -1212,13 +1241,19 @@ const BlankDiv = () => {
   }) : null;
 };
 
+const notoSansFont$1 = 'https://fonts.gstatic.com/s/notosans/v7/o-0IIpQlx3QUlC5A4PNr5TRG.woff';
+const characters$1 = '0123456789-,.';
+const quat$1 = new THREE__namespace.Quaternion();
+const textMaterial$1 = new THREE__namespace.MeshBasicMaterial({
+  depthTest: false,
+  depthWrite: false
+});
 const mainColor = 0x424242;
 const lineWidth$1 = 0.5;
 const arrowSize = 5;
 const TextValue = ({
   position,
   value,
-  onClick,
   backgroundColor
 }) => {
   return /*#__PURE__*/React.createElement("group", {
@@ -1226,11 +1261,11 @@ const TextValue = ({
   }, /*#__PURE__*/React.createElement(drei.Html, {
     zIndexRange: [0, 0],
     style: {
-      marginTop: '22px'
+      marginTop: '22px',
+      pointerEvents: 'none'
     },
     center: true
   }, /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
     style: {
       backgroundColor: backgroundColor ? `#${backgroundColor.toString(16)}` : undefined,
       color: `#${mainColor.toString(16)}`,
@@ -1242,12 +1277,14 @@ const TextValue = ({
 const DimValue = ({
   position,
   backgroundColor,
-  dimId
+  dimId,
+  disableEvents = false
 }) => {
   var _dimension$members, _tree, _master$members;
   const {
     drawingId
   } = React.useContext(DimContext);
+  const textRef = React.useRef(null);
   const tree = core.getDrawing(drawingId).structure.tree;
   const dimension = tree[dimId];
   const masterId = (_dimension$members = dimension.members) == null ? void 0 : _dimension$members.master.value;
@@ -1269,6 +1306,31 @@ const DimValue = ({
     return expr && !isDeg ? expr + ' (' + valueStr + ')' : valueStr;
   }, [master, memberName]);
   const [editMode, setEditMode] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  drei.useCursor(isHovered, 'text');
+  const onPointerOver = React.useCallback(e => {
+    setIsHovered(true);
+    e.stopPropagation();
+  }, []);
+  const onPointerOut = React.useCallback(e => {
+    setIsHovered(false);
+    e.stopPropagation();
+  }, []);
+  const onClick = React.useCallback(e => {
+    setIsHovered(false);
+    setEditMode(true);
+    e.stopPropagation();
+  }, []);
+  const stopPropagation = React.useCallback(e => {
+    e.stopPropagation();
+  }, []);
+  const handlers = disableEvents ? {} : {
+    onPointerOver,
+    onPointerOut,
+    onClick,
+    onPointerDown: stopPropagation,
+    onPointerUp: stopPropagation
+  };
   React.useEffect(() => {
     if (editMode) {
       getCADState().api.blankDiv.show(() => setEditMode(false));
@@ -1279,7 +1341,7 @@ const DimValue = ({
     var _master_$children, _sketchRegion$members, _master_$members, _master_$members2, _master_$members3, _master_$members4, _master_$members5;
     const master_ = core.getDrawing(drawingId).structure.tree[masterId];
     if (isSketchConstr) {
-      classcad.ccAPI.base.callSafeAPI(drawingId, 'Sketcher', 'UpdateDimensionValue', [dimId, [valueParam.serverValue.value, valueParam.serverValue.isExpr]]).catch(console.warn);
+      classcad.ccAPI.sketcher.updateDimensionValue(drawingId, dimId, valueParam.serverValue).catch(console.warn);
     } else {
       switch (master_.class) {
         case classcad.CCClasses.CCExtrusion:
@@ -1314,28 +1376,39 @@ const DimValue = ({
     }
     e.stopPropagation();
   }, [update]);
+  fiber.useFrame(args => {
+    if (!textRef.current || !textRef.current.parent) {
+      return;
+    }
+    textRef.current.quaternion.copy(textRef.current.parent.getWorldQuaternion(quat$1)).invert().multiply(args.camera.quaternion);
+    textRef.current.scale.setScalar(1 / args.camera.zoom);
+  });
   return /*#__PURE__*/React.createElement("group", {
     position: position
-  }, /*#__PURE__*/React.createElement(drei.Html, {
+  }, !editMode ? /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(drei.Text, _extends({
+    ref: textRef,
+    color: "#111111",
+    font: notoSansFont$1,
+    fontSize: 17,
+    letterSpacing: 0.05,
+    anchorY: 17,
+    characters: characters$1,
+    renderOrder: 3000,
+    material: textMaterial$1,
+    userData: {
+      onHUD: true
+    }
+  }, handlers), caption)) : /*#__PURE__*/React.createElement(drei.Html, {
     zIndexRange: [blankZIndex + 1, blankZIndex + 1],
     style: {
       transform: 'translate3d(-50%,0,0)',
-      marginTop: '14px'
+      marginTop: '10px'
     }
   }, /*#__PURE__*/React.createElement("div", {
     onKeyUp: keyHandler
-  }, !editMode ? /*#__PURE__*/React.createElement("div", {
-    onClick: () => {
-      setEditMode(true);
-    },
-    style: {
-      backgroundColor: backgroundColor ? `#${backgroundColor.toString(16)}` : undefined,
-      color: `#${mainColor.toString(16)}`,
-      fontSize: '17px',
-      textAlign: 'center',
-      cursor: 'text'
-    }
-  }, caption) : /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100px'
     }
@@ -1412,7 +1485,8 @@ const hRadius$1 = 6; // Radius of position handler in pixels
 const PositionHandler = ({
   dimId,
   setPosition,
-  position
+  position,
+  disableEvents = false
 }) => {
   const isPressed = React.useRef(false);
   const isDragged = React.useRef(false);
@@ -1479,15 +1553,17 @@ const PositionHandler = ({
     setIsHovered(false);
     e.stopPropagation();
   }, []);
-  return /*#__PURE__*/React.createElement("mesh", {
+  const handlers = disableEvents ? {} : {
+    onPointerDown,
+    onPointerUp,
+    onPointerOver,
+    onPointerMove,
+    onPointerOut
+  };
+  return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
-    position: position,
-    onPointerDown: onPointerDown,
-    onPointerMove: onPointerMove,
-    onPointerUp: onPointerUp,
-    onPointerOver: onPointerOver,
-    onPointerOut: onPointerOut
-  }, /*#__PURE__*/React.createElement("sphereGeometry", {
+    position: position
+  }, handlers), /*#__PURE__*/React.createElement("sphereGeometry", {
     args: [1.5, 16, 16]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
     color: mainColor,
@@ -1499,7 +1575,8 @@ const PositionHandler = ({
 };
 
 const LinearDim = ({
-  dimId
+  dimId,
+  disableEvents = false
 }) => {
   const {
     drawingId
@@ -1558,15 +1635,18 @@ const LinearDim = ({
     dir: endDir
   }), /*#__PURE__*/React.createElement(DimValue, {
     position: tmpDimP,
-    dimId: dimension.id
+    dimId: dimension.id,
+    disableEvents: disableEvents
   }), /*#__PURE__*/React.createElement(PositionHandler, {
     position: tmpDimP,
     setPosition: setTmpDimP,
-    dimId: dimId
+    dimId: dimId,
+    disableEvents: disableEvents
   }));
 };
 const RadialDim = ({
-  dimId
+  dimId,
+  disableEvents = false
 }) => {
   const {
     drawingId
@@ -1604,14 +1684,17 @@ const RadialDim = ({
   }), /*#__PURE__*/React.createElement(PositionHandler, {
     position: tmpDimP,
     setPosition: setTmpDimP,
-    dimId: dimId
+    dimId: dimId,
+    disableEvents: disableEvents
   }), /*#__PURE__*/React.createElement(DimValue, {
     position: tmpDimP,
-    dimId: dimension.id
+    dimId: dimension.id,
+    disableEvents: disableEvents
   }));
 };
 const DiametralDim = ({
-  dimId
+  dimId,
+  disableEvents = false
 }) => {
   const {
     drawingId
@@ -1653,14 +1736,17 @@ const DiametralDim = ({
   }), /*#__PURE__*/React.createElement(PositionHandler, {
     position: tmpDimP,
     setPosition: setTmpDimP,
-    dimId: dimId
+    dimId: dimId,
+    disableEvents: disableEvents
   }), /*#__PURE__*/React.createElement(DimValue, {
     position: tmpDimP,
-    dimId: dimension.id
+    dimId: dimension.id,
+    disableEvents: disableEvents
   }));
 };
 const AngularDim = ({
-  dimId
+  dimId,
+  disableEvents = false
 }) => {
   const {
     drawingId
@@ -1744,14 +1830,17 @@ const AngularDim = ({
   }), /*#__PURE__*/React.createElement(PositionHandler, {
     dimId: dimId,
     position: tmpDimP,
-    setPosition: setTmpDimP
+    setPosition: setTmpDimP,
+    disableEvents: disableEvents
   }), /*#__PURE__*/React.createElement(DimValue, {
     position: tmpDimP,
-    dimId: dimension.id
+    dimId: dimension.id,
+    disableEvents: disableEvents
   }));
 };
 const DimGraphics = ({
-  dimId
+  dimId,
+  disableEvents = false
 }) => {
   const {
     drawingId
@@ -1762,23 +1851,27 @@ const DimGraphics = ({
   });
   if (classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCLinearDimension)) {
     return /*#__PURE__*/React.createElement(LinearDim, {
-      dimId: dimId
+      dimId: dimId,
+      disableEvents: disableEvents
     });
   }
   if (classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCAngularDimension)) {
     return /*#__PURE__*/React.createElement(AngularDim, {
-      dimId: dimId
+      dimId: dimId,
+      disableEvents: disableEvents
     });
   }
   // DiameterDimension is also inherited from RadialDimension, so this check should strictly be first...
   if (classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCDiameterDimension)) {
     return /*#__PURE__*/React.createElement(DiametralDim, {
-      dimId: dimId
+      dimId: dimId,
+      disableEvents: disableEvents
     });
   }
   if (classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCRadialDimension)) {
     return /*#__PURE__*/React.createElement(RadialDim, {
-      dimId: dimId
+      dimId: dimId,
+      disableEvents: disableEvents
     });
   }
   return null;
@@ -2064,12 +2157,26 @@ function ViewImpl$f({
   drawingId,
   pluginId
 }) {
+  var _dimSet$members, _dimSet$members$owner;
   const {
     objectId
   } = core.getPlugin(drawingId, pluginId);
-  const dimSet = react.useDrawing(drawingId, state => objectId && state.structure.tree[objectId]);
+  const dimSet = react.useDrawing(drawingId, state => state.structure.tree[objectId || NOCCID]);
+  const ownerId = (dimSet == null ? void 0 : (_dimSet$members = dimSet.members) == null ? void 0 : (_dimSet$members$owner = _dimSet$members.owner) == null ? void 0 : _dimSet$members$owner.value) || NOCCID;
   // dimSet here might be undefined for features without constrains
   const children = dimSet && dimSet.children || [];
+
+  // Dimensions shouldn't be interactable if sketch is active and a non-drag handler is active
+  const isOwnerActive = react.useDrawing(drawingId, d => d.plugin.active.feature === ownerId) || false;
+  const isOwnerSketch = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$own;
+    return classcad.ccUtils.base.isA((_d$structure$tree$own = d.structure.tree[ownerId]) == null ? void 0 : _d$structure$tree$own.class, classcad.CCClasses.CCSketch);
+  }) || false;
+  const ownerState = react.useDrawing(drawingId, d => {
+    var _d$plugin$refs$ownerI;
+    return (_d$plugin$refs$ownerI = d.plugin.refs[ownerId]) == null ? void 0 : _d$plugin$refs$ownerI.state;
+  });
+  const disableEvents = isOwnerActive && isOwnerSketch && (ownerState == null ? void 0 : ownerState.activeHandler) !== undefined && ownerState.activeHandler !== 'drag';
   const matrix = useGlobalToLocalMatrix(drawingId, objectId);
   const contexVal = React.useMemo(() => {
     return {
@@ -2093,7 +2200,8 @@ function ViewImpl$f({
     value: contexVal
   }, children.map(dimId => /*#__PURE__*/React.createElement(DimGraphics$1, {
     key: dimId,
-    dimId: dimId
+    dimId: dimId,
+    disableEvents: disableEvents
   }))));
 }
 const View$f = ({
@@ -2335,7 +2443,6 @@ function useRefsParam(drawingId, objId, memberName) {
 
 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; }
-
 /**
  * Implies the following data structure:
  * data: {
@@ -2357,59 +2464,167 @@ const createTreeObjSelItem = (productId, object) => {
     removeCondition: d => d.structure.tree[object.id] === undefined
   };
 };
+
+// Returns event values that are used in treeObjInteraction events
+const getEventInfo = e => {
+  const eDef = e;
+  const eRTF = e;
+  if (eRTF.delta !== undefined) {
+    return {
+      delta: eRTF.delta,
+      stopPropagation: eRTF.stopPropagation,
+      shiftKey: eRTF.nativeEvent.shiftKey
+    };
+  } else {
+    return {
+      delta: 0,
+      stopPropagation: undefined,
+      shiftKey: eDef.shiftKey
+    };
+  }
+};
 function useSelect$1(drawingId, objId) {
   const onClick = React.useCallback(e => {
-    e.stopPropagation();
-    if (e.delta > 1) {
+    var _drawing$plugin$refs, _drawing$structure$tr;
+    const {
+      delta,
+      stopPropagation,
+      shiftKey
+    } = getEventInfo(e);
+    if (delta > 1) {
       return;
     }
-    const structure = core.getDrawing(drawingId).structure;
-    const productId = structure.currentProduct;
-    if (!productId) return;
-    const object = structure.tree[objId];
-    const item = createTreeObjSelItem(productId, object);
-    const selApi = core.getDrawing(drawingId).api.selection;
-    selApi.isItemSelected(item) ? selApi.unselect(item) : selApi.select(item);
+    const drawing = core.getDrawing(drawingId);
+    const productId = drawing.structure.currentProduct;
+    const object = drawing.structure.tree[objId];
+    const selection = drawing.selection.refs[drawing.selection.active || ''];
+    const isSelActive = selection !== undefined;
+    const isSelectable = (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
+      object
+    })) || false;
+    const activeId = ((_drawing$plugin$refs = drawing.plugin.refs[drawing.plugin.active.feature || -1]) == null ? void 0 : _drawing$plugin$refs.id) || -1;
+    const objClass = ((_drawing$structure$tr = drawing.structure.tree[activeId]) == null ? void 0 : _drawing$structure$tr.class) || '';
+    const isSketchActive = classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCSketch);
+    if ((isSketchActive || isSelActive) && !isSelectable || !productId) {
+      return;
+    }
+    stopPropagation == null ? void 0 : stopPropagation();
+    if (selection) {
+      if (selection.isSelectable(TreeObjScope, {
+        object
+      })) {
+        const item = createTreeObjSelItem(productId, object);
+        const selApi = drawing.api.selection;
+        selApi.isItemSelected(item) ? selApi.unselect(item) : selApi.select(item);
+      }
+      return;
+    }
+    const interactionInfo = core.createInfo({
+      objectId: objId,
+      prodRefId: productId
+    });
+    const select = drawing.api.interaction.select;
+    select(interactionInfo, shiftKey);
   }, [drawingId, objId]);
-  return {
+  return React.useMemo(() => ({
     onClick
-  };
-}
-function useIsHovered$1(drawingId, objId) {
-  const activeSelId = react.useDrawing(drawingId, d => d.selection.active);
-  const isHovered = react.useDrawing(drawingId, d => {
-    var _d$selection$refs;
-    // Unfortunately we need this big selector in useDrawing,
-    // without it useIsHovered leads to re-rendering of component each time when hovered of the selection is changed.
-    const hoveredItem = (_d$selection$refs = d.selection.refs[activeSelId || '']) == null ? void 0 : _d$selection$refs.hoveredItem;
-    if (!hoveredItem) return false;
-    const productId = d.structure.currentProduct;
-    if (!productId) return false;
-    const object = d.structure.tree[objId];
-    return createTreeObjSelItem(productId, object).id === hoveredItem.id;
-  }) || false;
-  return isHovered;
+  }), [onClick]);
 }
 function useHover$1(drawingId, objId) {
   const onPointerOver = React.useCallback(e => {
-    e.stopPropagation();
-    const structure = core.getDrawing(drawingId).structure;
-    const productId = structure.currentProduct;
-    if (!productId) return;
-    const object = core.getDrawing(drawingId).structure.tree[objId];
-    const item = createTreeObjSelItem(productId, object);
-    const selApi = core.getDrawing(drawingId).api.selection;
-    selApi.setHovered(item);
+    var _drawing$plugin$refs2, _drawing$structure$tr2, _drawing$interaction$;
+    const {
+      stopPropagation
+    } = getEventInfo(e);
+    const drawing = core.getDrawing(drawingId);
+    const productId = drawing.structure.currentProduct;
+    const object = drawing.structure.tree[objId];
+    const selection = drawing.selection.refs[drawing.selection.active || ''];
+    const isSelActive = selection !== undefined;
+    const isSelectable = (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
+      object
+    })) || false;
+    const activeId = ((_drawing$plugin$refs2 = drawing.plugin.refs[drawing.plugin.active.feature || -1]) == null ? void 0 : _drawing$plugin$refs2.id) || -1;
+    const objClass = ((_drawing$structure$tr2 = drawing.structure.tree[activeId]) == null ? void 0 : _drawing$structure$tr2.class) || '';
+    const isSketchActive = classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCSketch);
+    if ((isSketchActive || isSelActive) && !isSelectable || !productId) {
+      return;
+    }
+    stopPropagation == null ? void 0 : stopPropagation();
+    const interactionInfo = core.createInfo({
+      objectId: objId,
+      prodRefId: productId
+    });
+    if (interactionInfo.uniqueIdent !== ((_drawing$interaction$ = drawing.interaction.hovered) == null ? void 0 : _drawing$interaction$.uniqueIdent)) {
+      const setHovered = drawing.api.interaction.setHovered;
+      setHovered(interactionInfo);
+    }
   }, [drawingId, objId]);
   const onPointerOut = React.useCallback(e => {
-    e.stopPropagation();
-    const selApi = core.getDrawing(drawingId).api.selection;
-    selApi.setHovered(null);
-  }, [drawingId]);
-  return {
+    var _drawing$interaction$2;
+    const {
+      stopPropagation
+    } = getEventInfo(e);
+    const drawing = core.getDrawing(drawingId);
+    const productId = drawing.structure.currentProduct;
+    if (!productId) {
+      return;
+    }
+    stopPropagation == null ? void 0 : stopPropagation();
+    const interactionInfo = core.createInfo({
+      objectId: objId,
+      prodRefId: productId
+    });
+    if (interactionInfo.uniqueIdent === ((_drawing$interaction$2 = drawing.interaction.hovered) == null ? void 0 : _drawing$interaction$2.uniqueIdent)) {
+      const setHovered = core.getDrawing(drawingId).api.interaction.setHovered;
+      setHovered(null);
+    }
+  }, [drawingId, objId]);
+  return React.useMemo(() => ({
     onPointerOut,
     onPointerOver
-  };
+  }), [onPointerOut, onPointerOver]);
+}
+function useIsSketchActive(drawingId) {
+  const activeId = react.useDrawing(drawingId, d => {
+    var _d$plugin$refs;
+    return (_d$plugin$refs = d.plugin.refs[d.plugin.active.feature || -1]) == null ? void 0 : _d$plugin$refs.id;
+  }) || -1;
+  const objClass = react.useDrawing(drawingId, d => {
+    var _d$structure$tree$act;
+    return (_d$structure$tree$act = d.structure.tree[activeId]) == null ? void 0 : _d$structure$tree$act.class;
+  }) || '';
+  return classcad.ccUtils.base.isA(objClass, classcad.CCClasses.CCSketch);
+}
+function useIsGHovered(drawingId, objId) {
+  const isHovered = react.useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+    return ((_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId) === objId;
+  }) || false;
+  const isSelActive = react.useDrawing(drawingId, d => d.selection.active !== null) || false;
+  const isSketchActive = useIsSketchActive(drawingId);
+  return !isSelActive && !isSketchActive && isHovered;
+}
+function useIsGSelected(drawingId, objId) {
+  const isGSelected = react.useDrawing(drawingId, d => {
+    var _d$interaction$select;
+    return ((_d$interaction$select = d.interaction.selected) == null ? void 0 : _d$interaction$select.findIndex(info => info.objectId === objId)) !== -1;
+  }) || false;
+  const isSelActive = react.useDrawing(drawingId, d => d.selection.active !== null) || false;
+  const isSketchActive = useIsSketchActive(drawingId);
+  return !isSelActive && !isSketchActive && isGSelected;
+}
+function useIsSHovered(drawingId, objId) {
+  const object = react.useDrawing(drawingId, d => d.structure.tree[objId]);
+  const isHovered = react.useDrawing(drawingId, d => {
+    var _d$interaction$hovere2;
+    return ((_d$interaction$hovere2 = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere2.objectId) === objId;
+  }) || false;
+  const selection = react.useDrawing(drawingId, d => d.selection.refs[d.selection.active || '']);
+  const isSelectable = (selection == null ? void 0 : selection.isSelectable(TreeObjScope, {
+    object
+  })) || false;
+  return isSelectable && isHovered;
 }
 
 /**
@@ -2424,57 +2639,46 @@ function useHover$1(drawingId, objId) {
  * @param objId
  * @returns
  */
-function useIsSelected$1(drawingId, objId) {
-  // Re-render if selectedItems is changed
-  const activeSelId = react.useDrawing(drawingId, d => d.selection.active);
-  const selectedItems = react.useDrawing(drawingId, d => {
-    var _d$selection$refs2;
-    return (_d$selection$refs2 = d.selection.refs[activeSelId || '']) == null ? void 0 : _d$selection$refs2.items;
+function useIsSSelected(drawingId, objId) {
+  // Re-render if selItems is changed
+  const selItems = react.useDrawing(drawingId, d => {
+    var _d$selection$refs;
+    return (_d$selection$refs = d.selection.refs[d.selection.active || '']) == null ? void 0 : _d$selection$refs.items;
   });
   const isSelected = React.useMemo(() => {
-    if (!selectedItems) return false;
-    const structure = core.getDrawing(drawingId).structure;
-    const productId = structure.currentProduct;
-    if (!productId) return false;
-    const object = structure.tree[objId];
-    const selApi = core.getDrawing(drawingId).api.selection;
+    if (!selItems) {
+      return false;
+    }
+    const drawing = core.getDrawing(drawingId);
+    const productId = drawing.structure.currentProduct;
+    if (!productId) {
+      return false;
+    }
+    const object = drawing.structure.tree[objId];
+    const selApi = drawing.api.selection;
     return selApi.isItemSelected(createTreeObjSelItem(productId, object));
-  }, [drawingId, objId, selectedItems]);
+  }, [drawingId, objId, selItems]);
   return isSelected;
 }
-function useTreeObjSelection(drawingId, objId) {
-  const activeSelId = react.useDrawing(drawingId, drawing => drawing.selection.active);
-  const isSelectableFunc = react.useDrawing(drawingId, d => {
-    var _d$selection$refs3;
-    return (_d$selection$refs3 = d.selection.refs[activeSelId || '']) == null ? void 0 : _d$selection$refs3.isSelectable;
-  });
-  const isSelectable = React.useMemo(() => {
-    if (!isSelectableFunc) return false;
-    const object = core.getDrawing(drawingId).structure.tree[objId];
-    const res = isSelectableFunc(TreeObjScope, {
-      object: object
-    });
-    return res;
-  }, [drawingId, objId, isSelectableFunc]);
+function useTreeObjInteraction(drawingId, objId) {
   const hHandlers = useHover$1(drawingId, objId);
-  const isHovered = useIsHovered$1(drawingId, objId);
   const sHandlers = useSelect$1(drawingId, objId);
-  const isSelected = useIsSelected$1(drawingId, objId);
-  const handlers = React.useMemo(() => {
-    if (isSelectable) {
-      return _objectSpread$p(_objectSpread$p({}, hHandlers), sHandlers);
-    }
-    return {};
-  }, [isSelectable, hHandlers, sHandlers]);
+  const isGHovered = useIsGHovered(drawingId, objId);
+  const isGSelected = useIsGSelected(drawingId, objId);
+  const isSHovered = useIsSHovered(drawingId, objId);
+  const isSSelected = useIsSSelected(drawingId, objId);
+  const handlers = React.useMemo(() => _objectSpread$p(_objectSpread$p({}, hHandlers), sHandlers), [hHandlers, sHandlers]);
   return React.useMemo(() => {
     // If the handlers are switched off immediately after the selection (workplane selection for the sketcher), then hovered would keep being equal to true, making the mesh color wrong.
     // Thus, we don't want hovered and selected to be true if the object is not selectable.
     return {
-      isHovered: isHovered && isSelectable,
-      isSelected: isSelected && isSelectable,
+      isGHovered,
+      isGSelected,
+      isSHovered,
+      isSSelected,
       handlers
     };
-  }, [isHovered, isSelected, isSelectable, handlers]);
+  }, [isGHovered, isSHovered, isGSelected, isSSelected, handlers]);
 }
 
 const pickGraphicId = itemData => itemData.graphicId;
@@ -6582,6 +6786,13 @@ const TmpAngularDim = props => {
   }));
 };
 
+const tolerance$4 = 1e-6;
+
+/**
+ * Allowed pixel offset for onClick handler events in case the pointer was slightly moved
+ */
+const deltaTolerance = 4;
+
 const getInitialState = () => {
   return {
     alwaysShowConstr: false,
@@ -6636,9 +6847,6 @@ const description$f = {
   initialState: getInitialState()
 };
 
-// TODO: not realy the best file for const declaration.
-const tolerance$3 = 1e-6;
-
 function getSketchState(drawingId, pluginId) {
   const plugin = core.getPlugin(drawingId, pluginId);
   if (!plugin || plugin.name !== description$f.name) {
@@ -6685,8 +6893,6 @@ function CreateAngle(drawingId, pluginId) {
   // Local state:
   const tmpDimensionId = guid();
   let entities = [];
-  let isMoved = false;
-  let isPressed = false;
   const updateDimensionPreview = params => {
     set(state_ => {
       const tmpAngularDimension = state_.tmpObjects[tmpDimensionId];
@@ -6751,39 +6957,29 @@ function CreateAngle(drawingId, pluginId) {
       });
     }
   };
-
-  // Pointer Handlers:
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1)
-      // Continue only if 'primary' mouse button is pressed
+  const onClick = e => {
+    if (e.delta > deltaTolerance) {
+      // Continue only if the user hasn't moved mouse considerably.
       return;
-    isMoved = false;
-    isPressed = true;
-    e.stopPropagation();
-  };
-  const onPointerUp = e => {
-    if (!isMoved && isPressed) {
-      const tmpObjects = getSketchState(drawingId, pluginId).tmpObjects;
-      const {
-        dir0,
-        dir1,
-        center,
-        dimPos,
-        reflex
-      } = tmpObjects[tmpDimensionId];
-      const sector = calcSector(dimPos, dir0, dir1, center);
-      const previewValue = calcPreviewValue(dir0, dir1, sector, reflex);
-      const degValue = radiansToDegrees(previewValue) + 'g';
-      classcad.ccAPI.sketcher.addConstraints(drawingId, sketchId, ['Ang'], [classcad.CCClasses.CC2DAngleConstraint], [entities], [degValue], [dimPos], [[sector, reflex]]).catch(console.warn);
-      isPressed = false;
-      set({
-        activeHandler: HandlersList.DRAG
-      });
     }
+    const tmpObjects = getSketchState(drawingId, pluginId).tmpObjects;
+    const {
+      dir0,
+      dir1,
+      center,
+      dimPos,
+      reflex
+    } = tmpObjects[tmpDimensionId];
+    const sector = calcSector(dimPos, dir0, dir1, center);
+    const previewValue = calcPreviewValue(dir0, dir1, sector, reflex);
+    const degValue = radiansToDegrees(previewValue) + 'g';
+    classcad.ccAPI.sketcher.addConstraints(drawingId, sketchId, ['Ang'], [classcad.CCClasses.CC2DAngleConstraint], [entities], [degValue], [dimPos], [[sector, reflex]]).catch(console.warn);
+    set({
+      activeHandler: HandlersList.DRAG
+    });
     e.stopPropagation();
   };
   const onPointerMove = e => {
-    isMoved = true;
     const dimPos = e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
     updateDimensionPreview({
       dimPos
@@ -6796,9 +6992,8 @@ function CreateAngle(drawingId, pluginId) {
     onActivate,
     onDeactivate,
     pointerHandlers: {
-      onPointerDown,
-      onPointerUp,
-      onPointerMove
+      onPointerMove,
+      onClick
     },
     keyHandlers: {
       keydown,
@@ -7160,7 +7355,7 @@ const createArcMaterial = () => {
 
 // Max number of instances to be handled by Merged
 const limit = 10000;
-const tolerance$2 = 1e-6;
+const tolerance$3 = 1e-6;
 
 // We need to create mesh instances which will be used later in Merged component.
 // InstancedMesh from three.js use the single mesh but applies different transformations to different instances of the mesh
@@ -7267,7 +7462,7 @@ const InstancedGeometry = ({
     const instances = arcMesh_.userData.instances;
     for (i = 0; i < instances.length; i++) {
       instanceRef = instances[i].current;
-      if (Math.abs(instanceRef.radius - radiusArr[i]) > tolerance$2) {
+      if (Math.abs(instanceRef.radius - radiusArr[i]) > tolerance$3) {
         radiusArr[i] = instanceRef.radius;
         radiusAtt.needsUpdate = true;
       }
@@ -7275,7 +7470,7 @@ const InstancedGeometry = ({
         tubeRadiusArr[i] = instanceRef.tubeRadius;
         tubeRadiusAtt.needsUpdate = true;
       }
-      if (Math.abs(instanceRef.angularLength - angularLengthArr[i]) > tolerance$2) {
+      if (Math.abs(instanceRef.angularLength - angularLengthArr[i]) > tolerance$3) {
         angularLengthArr[i] = instanceRef.angularLength;
         angularLengthAtt.needsUpdate = true;
       }
@@ -7572,7 +7767,7 @@ function Drag(drawingId, pluginId, camControls) {
     const snappedDiff = snapDraggedPoints(diff, drawingId);
     diff = snappedDiff || diff;
     const selected = getSketchState(drawingId, pluginId).selected;
-    if (diff.length() > tolerance$3) {
+    if (diff.length() > tolerance$4) {
       if (promise) {
         // If we are waiting for the response from server, defer next diff and make it after current change.
         defferedDiff = diff;
@@ -7608,7 +7803,6 @@ function DrawPoint(drawingId, pluginId) {
 
   // Local state:
   const tmpPointId = guid();
-  let isMoved = false;
   const filter = object => {
     return object && classcad.ccUtils.base.isA(object.class, classcad.CCClasses.CCSketch);
   };
@@ -7631,32 +7825,24 @@ function DrawPoint(drawingId, pluginId) {
       mousePos: undefined
     });
   };
-
-  // Pointer Handlers:
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1)
-      // Continue only if 'primary' mouse button is pressed
+  const onClick = e => {
+    if (e.delta > deltaTolerance) {
+      // Continue only if the user hasn't moved mouse considerably.
       return;
-    isMoved = false;
-    e.stopPropagation();
-  };
-  const onPointerUp = e => {
-    if (!isMoved) {
-      const tmpObjects = getSketchState(drawingId, pluginId).tmpObjects;
-      const pointPos = tmpObjects[tmpPointId].position.clone();
-      classcad.ccAPI.sketcher.addGeometry(drawingId, sketchId, 'Point', {
-        pos: pointPos
-      }, {
-        fixation: true,
-        incidence: true,
-        tangency: false,
-        vertAndHoriz: false
-      }).catch(console.warn);
     }
+    const tmpObjects = getSketchState(drawingId, pluginId).tmpObjects;
+    const pointPos = tmpObjects[tmpPointId].position.clone();
+    classcad.ccAPI.sketcher.addGeometry(drawingId, sketchId, 'Point', {
+      pos: pointPos
+    }, {
+      fixation: true,
+      incidence: true,
+      tangency: false,
+      vertAndHoriz: false
+    }).catch(console.warn);
     e.stopPropagation();
   };
   const onPointerMove = e => {
-    isMoved = true;
     const localPos = e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
     const snappedPos = snapPoint(localPos);
     const mousePos = snappedPos || localPos;
@@ -7679,9 +7865,8 @@ function DrawPoint(drawingId, pluginId) {
     onActivate,
     onDeactivate,
     pointerHandlers: {
-      onPointerDown,
-      onPointerUp,
-      onPointerMove
+      onPointerMove,
+      onClick
     }
   };
 }
@@ -7698,7 +7883,6 @@ function DrawLine(drawingId, pluginId) {
   // Local state:
   let firstPointIsSet = false;
   let lastAddedEndPointId = NOCCID;
-  let isMoved = false;
   let promise = null;
   const tmpStartPId = guid();
   const tmpEndPId = guid();
@@ -7744,17 +7928,11 @@ function DrawLine(drawingId, pluginId) {
       return false;
     }
   };
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1 || promise !== null)
-      // Continue only if 'primary' mouse button is pressed and we are not waiting for server response.
-      return;
-    isMoved = false;
-    e.stopPropagation();
-  };
-  const onPointerUp = e => {
-    if (isMoved || promise !== null)
-      // Continue only if user hasn't moved mouse and line adding is finished.
+  const onClick = e => {
+    if (e.delta > deltaTolerance || promise !== null) {
+      // Continue only if the user hasn't moved mouse considerably, and adding the previous line is finished.
       return;
+    }
     if (!firstPointIsSet) {
       set(state => {
         const tmpEndP = state.tmpObjects[tmpEndPId];
@@ -7824,7 +8002,6 @@ function DrawLine(drawingId, pluginId) {
     e.stopPropagation();
   };
   const onPointerMove = e => {
-    isMoved = true;
     const localPos = e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
     const snappedPos = snapPoint(localPos);
     const mousePos = snappedPos || localPos;
@@ -7847,9 +8024,8 @@ function DrawLine(drawingId, pluginId) {
     onActivate,
     onDeactivate,
     pointerHandlers: {
-      onPointerDown,
-      onPointerUp,
-      onPointerMove
+      onPointerMove,
+      onClick
     },
     keyHandlers: {
       escape: escHandler
@@ -7867,8 +8043,7 @@ function DrawRectangle(drawingId, pluginId) {
 
   // Local state:
   let additionIndex = 0; // state of handler: 0 - drawing the first point, 1 - drawing tmp rectangle
-  let isMoved = false;
-  let isPressed = false;
+
   const tmpRectId = guid();
   const tmpPointId = guid();
   const onActivate = () => {
@@ -7918,16 +8093,11 @@ function DrawRectangle(drawingId, pluginId) {
       return false;
     }
   };
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1)
-      // Continue only if 'primary' mouse button is pressed
+  const onClick = e => {
+    if (e.delta > deltaTolerance) {
+      // Continue only if the user hasn't moved mouse considerably.
       return;
-    isMoved = false;
-    isPressed = true;
-    e.stopPropagation();
-  };
-  const onPointerUp = e => {
-    if (isMoved || !isPressed) return;
+    }
     if (additionIndex === 0) {
       set(state => {
         const tmpPoint = state.tmpObjects[tmpPointId];
@@ -7988,11 +8158,9 @@ function DrawRectangle(drawingId, pluginId) {
       });
       additionIndex = 0;
     }
-    isPressed = false;
     e.stopPropagation();
   };
   const onPointerMove = e => {
-    isMoved = true;
     const localPos = e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
     const snappedPos = snapPoint(localPos) || localPos;
     set(state => {
@@ -8064,9 +8232,8 @@ function DrawRectangle(drawingId, pluginId) {
     onActivate,
     onDeactivate,
     pointerHandlers: {
-      onPointerDown,
-      onPointerUp,
-      onPointerMove
+      onPointerMove,
+      onClick
     },
     keyHandlers: {
       escape: escHandler,
@@ -8247,7 +8414,6 @@ function DrawArc(drawingId, pluginId, arcType) {
   // Local state:
   let additionIndex = 0;
   let lastAddedEndPointId = NOCCID;
-  let isMoved = false;
   let tangent = new THREE__namespace.Vector3();
   let lastMousePos = new THREE__namespace.Vector3();
   let promise = null;
@@ -8325,13 +8491,6 @@ function DrawArc(drawingId, pluginId, arcType) {
     }
     return false;
   };
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1 || promise !== null)
-      // Continue only if 'primary' mouse button is pressed and we are not waiting for server response.
-      return;
-    isMoved = false;
-    e.stopPropagation();
-  };
   const calculateCenterPoint = (start, end, hint) => {
     if (arcType === HandlersList.DRAWARCCENTER) {
       const dir1 = end.clone().sub(start);
@@ -8348,7 +8507,7 @@ function DrawArc(drawingId, pluginId, arcType) {
       const v3 = new THREE__namespace.Vector3(length2End - length2Hint, length2Hint - length2Start, length2Start - length2End);
       const v4 = new THREE__namespace.Vector3(end.y - hint.y, hint.y - start.y, start.y - end.y);
       const denominator = v2.dot(v4);
-      if (Math.abs(denominator) < tolerance$3) {
+      if (Math.abs(denominator) < tolerance$4) {
         return undefined;
       }
       const x = -0.5 * v1.dot(v3) / denominator;
@@ -8382,10 +8541,11 @@ function DrawArc(drawingId, pluginId, arcType) {
     }
     return false;
   };
-  const onPointerUp = e => {
-    if (isMoved || promise !== null)
-      // Continue only if user hasn't moved mouse and arc adding is finished.
+  const onClick = e => {
+    if (e.delta > deltaTolerance || promise !== null) {
+      // Continue only if the user hasn't moved mouse considerably, and adding the previous arc is finished.
       return;
+    }
     const tree = core.getDrawing(drawingId).structure.tree;
     const tmpObjects = getSketchState(drawingId, pluginId).tmpObjects;
     if (additionIndex === 0) {
@@ -8395,7 +8555,7 @@ function DrawArc(drawingId, pluginId, arcType) {
         const startPos = tmpObjects[tmpStartPId].position.clone();
         const matchingPointIds = getDescendants(tree, sketch.id).filter(id => classcad.ccUtils.base.isA(tree[id].class, classcad.CCClasses.CCPoint) && (tree[id].name === 'startPoint' || tree[id].name === 'endPoint')).filter(id => {
           var _tree$id$members;
-          return convertToVector((_tree$id$members = tree[id].members) == null ? void 0 : _tree$id$members.pos).distanceToSquared(startPos) < tolerance$3;
+          return convertToVector((_tree$id$members = tree[id].members) == null ? void 0 : _tree$id$members.pos).distanceToSquared(startPos) < tolerance$4;
         });
         if (matchingPointIds.length !== 1) {
           // TODO: Add some message for the user
@@ -8534,7 +8694,6 @@ function DrawArc(drawingId, pluginId, arcType) {
     e.stopPropagation();
   };
   const onPointerMove = e => {
-    isMoved = true;
     const localPos = e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
     const snappedPos = snapPoint(localPos);
     lastMousePos = snappedPos || localPos;
@@ -8603,9 +8762,8 @@ function DrawArc(drawingId, pluginId, arcType) {
     onActivate,
     onDeactivate,
     pointerHandlers: {
-      onPointerDown,
-      onPointerUp,
-      onPointerMove
+      onPointerMove,
+      onClick
     },
     keyHandlers: {
       escape: escHandler
@@ -8623,7 +8781,6 @@ function DrawCircle(drawingId, pluginId) {
 
   // Local state:
   let additionIndex = 0;
-  let isMoved = false;
   let lastMousePos = new THREE__namespace.Vector3();
   const tmpCenterPId = guid();
   const tmpCircleId = guid();
@@ -8671,15 +8828,11 @@ function DrawCircle(drawingId, pluginId) {
       return false;
     }
   };
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1)
-      // Continue only if 'primary' mouse button is pressed
+  const onClick = e => {
+    if (e.delta > deltaTolerance) {
+      // Continue only if the user hasn't moved mouse considerably.
       return;
-    isMoved = false;
-    e.stopPropagation();
-  };
-  const onPointerUp = e => {
-    if (isMoved) return;
+    }
     if (additionIndex === 0) {
       set(state => {
         const tmpCenterP = state.tmpObjects[tmpCenterPId];
@@ -8725,7 +8878,6 @@ function DrawCircle(drawingId, pluginId) {
     e.stopPropagation();
   };
   const onPointerMove = e => {
-    isMoved = true;
     const localPos = e.point.clone().applyMatrix4(getGlobalToLocalMatrix(drawingId, sketchId));
     const snappedPos = snapPoint(localPos);
     lastMousePos = (snappedPos || localPos).clone();
@@ -8761,9 +8913,8 @@ function DrawCircle(drawingId, pluginId) {
     onActivate,
     onDeactivate,
     pointerHandlers: {
-      onPointerDown,
-      onPointerUp,
-      onPointerMove
+      onPointerMove,
+      onClick
     },
     keyHandlers: {
       escape: escHandler
@@ -9060,7 +9211,7 @@ const getOriginByPoint = (drawingId, pointId, objectIds) => {
     const object = tree[objectIds[i]];
     if (classcad.ccUtils.base.isA(object.class, classcad.CCClasses.CCPoint)) {
       var _object$members;
-      if (convertToVector((_object$members = object.members) == null ? void 0 : _object$members.pos).distanceToSquared(pointPos) < tolerance$3) {
+      if (convertToVector((_object$members = object.members) == null ? void 0 : _object$members.pos).distanceToSquared(pointPos) < tolerance$4) {
         return {
           index: i
         };
@@ -9073,7 +9224,7 @@ const getOriginByPoint = (drawingId, pointId, objectIds) => {
         var _childPoint$members;
         const childPoint = childPoints.find(p => p.name === name);
         const pos = childPoint ? convertToVector((_childPoint$members = childPoint.members) == null ? void 0 : _childPoint$members.pos) : undefined;
-        return pos && pos.distanceToSquared(pointPos) < tolerance$3;
+        return pos && pos.distanceToSquared(pointPos) < tolerance$4;
       });
       if (matchingPoint) {
         return {
@@ -10004,8 +10155,10 @@ const Constraints$2 = () => {
     width: size.width,
     sidepadding: size.sidePadding,
     iconmargin: size.iconMargin
-  }, sortedConstraints.map(constrClass => /*#__PURE__*/React.createElement(ConstrBtn, {
-    key: constrClass,
+  }, sortedConstraints.map((constrClass, i) => /*#__PURE__*/React.createElement(ConstrBtn
+  // Use index as key instead of constrClass for the same element to retain its position; This is needed for tooltip to behave correctly
+  , {
+    key: i,
     constrClass: constrClass,
     disabled: allowedConstraints.indexOf(constrClass) === -1
   })))));
@@ -10235,7 +10388,7 @@ function recognizeFilletByArc(object, tree, sketchId) {
 
 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 Fillet(drawingId, pluginId, camControls) {
+function Fillet(drawingId, pluginId) {
   const plugin = core.getPlugin(drawingId, pluginId);
   const set = plugin.set;
   const sketchId = plugin.objectId;
@@ -10246,7 +10399,6 @@ function Fillet(drawingId, pluginId, camControls) {
   const tmpFilletPId = guid();
   const tmpLine1Id = guid();
   const tmpLine2Id = guid();
-  let isPressed = false;
   const filter = object => object && (classcad.ccUtils.base.isA(object.class, classcad.CCClasses.CCPoint) || classcad.ccUtils.base.isA(object.class, classcad.CCClasses.CCArc));
   const onDeactivate = () => {
     set({
@@ -10353,18 +10505,11 @@ function Fillet(drawingId, pluginId, camControls) {
     });
     e.stopPropagation();
   };
-  const onPointerDown = e => {
-    if (e.nativeEvent.buttons !== 1)
-      // Continue only if 'primary' mouse button is pressed
+  const onClick = e => {
+    if (e.delta > deltaTolerance) {
+      // Continue only if the user hasn't moved mouse considerably.
       return;
-    isPressed = true;
-    camControls.enabled = false;
-    e.target.setPointerCapture(e.nativeEvent.pointerId);
-    e.stopPropagation();
-  };
-  const onPointerUp = e => {
-    if (!isPressed) return;
-    camControls.enabled = true;
+    }
     const hoveredId = e.object.userData.objId;
     const tree = core.getDrawing(drawingId).structure.tree;
     const hoveredObject = tree[hoveredId];
@@ -10397,8 +10542,6 @@ function Fillet(drawingId, pluginId, camControls) {
         cursor: null
       });
     }
-    isPressed = false;
-    e.target.releasePointerCapture(e.nativeEvent.pointerId);
     e.stopPropagation();
   };
   return {
@@ -10408,8 +10551,7 @@ function Fillet(drawingId, pluginId, camControls) {
     pointerHandlers: {
       onPointerOver,
       onPointerOut,
-      onPointerDown,
-      onPointerUp
+      onClick
     }
   };
 }
@@ -10454,6 +10596,10 @@ function Trim(drawingId, pluginId) {
   };
   const onClick = e => {
     var _tree2;
+    if (e.delta > deltaTolerance) {
+      // Continue only if the user hasn't moved mouse considerably.
+      return;
+    }
     const tree = core.getDrawing(drawingId).structure.tree;
     if (classcad.ccUtils.base.isA((_tree2 = tree[tree[e.object.userData.objId].parent || NOCCID]) == null ? void 0 : _tree2.class, classcad.CCClasses.CCContainer)) {
       classcad.ccAPI.sketcher.removeObjects(drawingId, sketchId, [e.object.userData.objId], false).catch(console.warn);
@@ -10535,12 +10681,16 @@ const useGeomParams = objId => {
     drawingId,
     pluginId
   } = React.useContext(ViewContext);
+  // TODO: Rename lSelected / gSelected consts because it seems wrong to call sketch selection local and selector-selection global...
+  const lHovered = useSketchState(drawingId, pluginId, state => state.hovered === objId);
   const lSelected = useSketchState(drawingId, pluginId, state => state.selected.indexOf(objId) !== -1);
-  // gSelected - true if object is selected in a global selection
-  const gSelected = useIsSelected$1(drawingId, objId);
+  // gHovered - true if object is selector-hovered
+  const gHovered = useIsSHovered(drawingId, objId);
+  // gSelected - true if object is selector-selected
+  const gSelected = useIsSSelected(drawingId, objId);
   const isSelected = lSelected || gSelected;
+  const isHovered = lHovered || gHovered;
   const isHighlighted = useSketchState(drawingId, pluginId, state => state.highlighted.indexOf(objId) !== -1);
-  const isHovered = useSketchState(drawingId, pluginId, state => state.hovered === objId);
   const {
     renderOrder,
     offsetUnits
@@ -10637,7 +10787,7 @@ const getConstrColor = objState => {
   if (isHighlighted) return 0xbbecdd;
   return 0xdddddd;
 };
-const getColor$1 = (object, objState) => {
+const getColor = (object, objState) => {
   const {
     isGHovered,
     isSketchActive,
@@ -10695,10 +10845,11 @@ const useColor = (objId, gHovered) => {
     isActive
   } = React.useContext(ViewContext);
 
+  // TODO: Rename lSelected / gSelected consts because it seems wrong to call sketch selection local and selector-selection global...
   // Selected locally, in the sketcher.
   const lSelected = useSketchState(drawingId, pluginId, state => state.selected.indexOf(objId) !== -1);
-  // Globally selected by some of selection elements.
-  const gSelected = useIsSelected$1(drawingId, objId);
+  // gSelected - true if object is selector-selected
+  const gSelected = useIsSSelected(drawingId, objId);
   const isSelected = lSelected || gSelected;
   const isHighlighted = useSketchState(drawingId, pluginId, state => state.highlighted.indexOf(objId) !== -1);
   const isHovered = useSketchState(drawingId, pluginId, state => state.hovered === objId);
@@ -10708,7 +10859,7 @@ const useColor = (objId, gHovered) => {
   });
   const color = React.useMemo(() => {
     const object = core.getDrawing(drawingId).structure.tree[objId];
-    return getColor$1(object, {
+    return getColor(object, {
       isSketchActive: isActive,
       isHighlighted,
       isHovered,
@@ -10749,11 +10900,11 @@ const defaultHandlers = {
 };
 
 const useHandlersAndColor = (drawingId, objId) => {
-  const activeSelection = react.useDrawing(drawingId, d => d.selection.active);
-  const globalSelection = useTreeObjSelection(drawingId, objId);
+  const isSelActive = react.useDrawing(drawingId, d => d.selection.active);
+  const treeObjInteraction = useTreeObjInteraction(drawingId, objId);
   const sketchPointerHandlers = useSketchHandlers(objId);
-  const pointerHandlers = activeSelection ? globalSelection.handlers : sketchPointerHandlers;
-  const color = useColor(objId, globalSelection.isHovered);
+  const pointerHandlers = isSelActive ? treeObjInteraction.handlers : sketchPointerHandlers;
+  const color = useColor(objId, treeObjInteraction.isSHovered);
   return React.useMemo(() => ({
     handlers: pointerHandlers || defaultHandlers,
     color
@@ -10772,7 +10923,7 @@ const HUD = ({
     gl.autoClear = false;
     gl.clearDepth();
     gl.render(virtualScene, camera);
-  }, 2);
+  }, 3);
   return /*#__PURE__*/React.createElement(React.Fragment, null, fiber.createPortal( /*#__PURE__*/React.createElement("group", null, children), virtualScene));
 };
 
@@ -10934,7 +11085,7 @@ const Constraints$1 = props => {
         var _tree$pointId$members;
         return convertToArray((_tree$pointId$members = tree[pointId].members) == null ? void 0 : _tree$pointId$members.pos);
       }).reduce((sum, current) => [sum[0] + current[0], sum[1] + current[1], sum[2] + current[2]]).map(x => x / pointChildrenIds.length));
-      const suitableRow = constrRows.find(row => row.position.distanceTo(position) < tolerance$3);
+      const suitableRow = constrRows.find(row => row.position.distanceTo(position) < tolerance$4);
       if (suitableRow) {
         suitableRow.constrIds.push(constraint.id);
       } else {
@@ -11644,7 +11795,7 @@ const SketchPlane = ({
       objId
     }
   })), /*#__PURE__*/React.createElement("gridHelper", {
-    args: [step * linesCount, linesCount, 0x000000, 0x888888],
+    args: [step * linesCount, linesCount, 0x000000, 0x444444],
     "geometry-computeBoundingBox": zeroBounds,
     quaternion: planeQuaternion,
     onUpdate: update
@@ -11664,7 +11815,10 @@ const Sketch = ({
   } = core.getPlugin(drawingId, pluginId);
   const containerIds = React.useMemo(() => {
     const tree = core.getDrawing(drawingId).structure.tree;
-    return sketch.children && sketch.children.filter(id => classcad.ccUtils.base.isA(tree[id].class, classcad.CCClasses.CCContainer));
+    // Not using ccUtils.isA here because sketch may contain other containers, CCUseSet in particular.
+    // Since trim geometry is recognized as CCContainer's children, it is crucial for now to make a direct class check.
+    // TODO: Change how this is handled on the serverside. For example, by using a unique class for trim container.
+    return sketch.children && sketch.children.filter(id => tree[id].class === classcad.CCClasses.CCContainer);
   }, [sketch.children, drawingId]);
   const drawnObjects = React.useMemo(() => {
     let res = [];
@@ -12009,7 +12163,11 @@ const RubberBandRectangle = () => {
 // TODO: handle font in some other way?
 const notoSansFont = 'https://fonts.gstatic.com/s/notosans/v7/o-0IIpQlx3QUlC5A4PNr5TRG.woff';
 const characters = '0123456789-,.';
-const pos = new THREE__namespace.Vector3();
+const quat = new THREE__namespace.Quaternion();
+const textMaterial = new THREE__namespace.MeshBasicMaterial({
+  depthTest: false,
+  depthWrite: false
+});
 const MousePosition = () => {
   const {
     drawingId,
@@ -12019,16 +12177,15 @@ const MousePosition = () => {
   const sketchId = react.usePlugin(drawingId, pluginId, p => p.objectId);
   const mousePos = useSketchState(drawingId, pluginId, state => state.mousePos);
   fiber.useFrame(args => {
-    if (!ref.current || !mousePos || !sketchId) {
+    if (!ref.current || !ref.current.parent || !mousePos || !sketchId) {
       return;
     }
-    pos.copy(mousePos).applyMatrix4(core.getDrawing(drawingId).api.structure.calculateGlobalTransformation(sketchId));
     const scale = getScale(drawingId, pluginId);
-    ref.current.position.set(pos.x, pos.y, pos.z);
-    ref.current.quaternion.copy(args.camera.quaternion);
+    ref.current.position.set(mousePos.x, mousePos.y, mousePos.z);
+    ref.current.quaternion.copy(ref.current.parent.getWorldQuaternion(quat)).invert().multiply(args.camera.quaternion);
     ref.current.scale.setScalar(scale);
   });
-  return mousePos ? /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement(React.Suspense, {
+  return mousePos ? /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(drei.Text, {
     ref: ref,
@@ -12038,8 +12195,10 @@ const MousePosition = () => {
     letterSpacing: 0.05,
     anchorX: -3,
     anchorY: 4,
-    characters: characters
-  }, `${mousePos.x.toFixed(2)}, ${mousePos.y.toFixed(2)}`))) : null;
+    characters: characters,
+    renderOrder: 3001,
+    material: textMaterial
+  }, `${mousePos.x.toFixed(2)}, ${mousePos.y.toFixed(2)}`)) : null;
 };
 
 function useSetScale(drawingId, pluginId) {
@@ -12048,7 +12207,7 @@ function useSetScale(drawingId, pluginId) {
     if (!plugin) return;
     const state = plugin.state;
     const sketchObj = core.getDrawing(drawingId).structure.tree[plugin.objectId];
-    const sketchMatrix = core.MathUtils.convertToMatrix4(sketchObj.coordinateSystem);
+    const sketchMatrix = sketchObj.coordinateSystem ? core.MathUtils.convertToMatrix4(sketchObj.coordinateSystem) : new THREE__namespace.Matrix4();
     const sketchOriginGlobal = new THREE__namespace.Vector3(0.0, 0.0, 0.0).applyMatrix4(sketchMatrix);
     const approxScale = react.CameraHelper.calculateScaleFactor(sketchOriginGlobal, 7, args.camera, args.size);
     const newStep = Math.pow(10.0, Math.floor(Math.log10(approxScale * 30) + 1e-3));
@@ -12220,17 +12379,17 @@ const DrawingMode = ({
     const plane = core.getDrawing(drawingId).structure.tree[planeRef];
     const normal = convertToVector(plane == null ? void 0 : (_plane$members = plane.members) == null ? void 0 : _plane$members.Normal);
     const csys = core.getDrawing(drawingId).structure.tree[sketchId].coordinateSystem;
-    const transformMatrix = core.MathUtils.convertToMatrix3(csys);
+    const transformMatrix = csys ? core.MathUtils.convertToMatrix3(csys) : new THREE__namespace.Matrix3();
     const upVector = new THREE__namespace.Vector3(0, 1, 0).applyMatrix3(transformMatrix).normalize();
 
     // If box.min === box.max add (1,1,0) to box.max to make box not empty
     const box = bounds.box;
-    if (box.min.distanceTo(box.max) < tolerance$3) {
+    if (box.min.distanceTo(box.max) < tolerance$4) {
       box.set(box.min, box.min.clone().add(new THREE__namespace.Vector3(1000, 1000, 1000)));
     }
 
     // Convert local box coordinates to global
-    const matrix4 = core.MathUtils.convertToMatrix4(csys);
+    const matrix4 = csys ? core.MathUtils.convertToMatrix4(csys) : new THREE__namespace.Matrix4();
     const globCenter = bounds.center.clone().applyMatrix4(matrix4);
     const globBox = box.clone().applyMatrix4(matrix4);
     camera.position.copy(globCenter.clone().addScaledVector(normal, (bounds.radius || 1) * 100 * 2));
@@ -12246,7 +12405,7 @@ const DrawingMode = ({
       boundsControls == null ? void 0 : boundsControls.refresh().fit();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [boundsMember]);
+  }, []);
 
   // Add handlers to pluginState when sketcher is enabled
   React.useEffect(() => {
@@ -13172,13 +13331,13 @@ const ObjTitle = ({
     return (_d$structure$tree$obj2 = d.structure.tree[objId]) == null ? void 0 : _d$structure$tree$obj2.class;
   });
   const activeHandler = useSketchState(drawingId, pluginId, state => state.activeHandler);
-  const globalSelection = useTreeObjSelection(drawingId, objId);
-  const isGHovered = globalSelection.isHovered;
-  const isGSelected = globalSelection.isSelected;
-  const onClickSel = globalSelection.handlers.onClick;
+  const treeObjInteraction = useTreeObjInteraction(drawingId, objId);
+  const isSHovered = treeObjInteraction.isSHovered;
+  const isSSelected = treeObjInteraction.isSSelected;
+  const onClickSel = treeObjInteraction.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 || isGSelected ? '#ffa500' : isHovered || isGHovered ? '#28d79f' : undefined;
+  const color = isSelected || isSSelected ? '#ffa500' : isHovered || isSHovered ? '#28d79f' : undefined;
 
   // TODO: Rename resources so that they have more generic names, i.e. 'CC_Point' instead of 'drawPoint', etc
   const imgName = React.useMemo(() => {
@@ -13323,7 +13482,7 @@ const Details = () => {
     const refGeometry_ = ccUseGeometry.map(member => [member.members[0].value, member.members[1].value]) || [];
     const geometry_ = (sketchChildren == null ? void 0 : sketchChildren.filter(id => isSketchGeometry(tree[id].class) && refGeometry_.findIndex(refArr => refArr[0] === id) === -1)) || [];
     const constraints_ = (sketchChildren == null ? void 0 : sketchChildren.filter(id => is2DConstraint(tree[id].class))) || [];
-    const isTrimActive_ = (sketchChildren == null ? void 0 : sketchChildren.findIndex(id => classcad.ccUtils.base.isA(tree[id].class, classcad.CCClasses.CCContainer))) !== -1;
+    const isTrimActive_ = (sketchChildren == null ? void 0 : sketchChildren.findIndex(id => tree[id].class === classcad.CCClasses.CCContainer)) !== -1;
     return {
       refGeometry: refGeometry_,
       geometry: geometry_,
@@ -13964,8 +14123,7 @@ var index$f = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Root: Root$f,
   View: View$d,
-  description: description$f,
-  tolerance: tolerance$3
+  description: description$f
 });
 
 function useRefsReset(type, refs) {
@@ -14152,16 +14310,29 @@ const WorkAxisObj = ({
   }));
 };
 
-function getColor(hovered, selected, direction, type) {
-  if (hovered) {
-    return 0x28d79f;
-  } else if (selected) {
-    return 0xa70b0b;
-  } else if (direction.distanceTo(new THREE__namespace.Vector3(1, 0, 0)) < tolerance$3 && type === classcad.WorkAxisType.WA_FIXED) {
+const getHighlightedColor = (isGHovered, isGSelected, isSHovered, isSSelected) => {
+  if (isSHovered) {
+    return '#3280ff';
+  }
+  if (isSSelected) {
+    return '#8040c0';
+  }
+  if (isGHovered) {
+    return 'green';
+  }
+  if (isGSelected) {
+    return 'red';
+  }
+  return undefined;
+};
+
+const tolerance$2 = 1e-6;
+function getBaseColor(direction, type) {
+  if (direction.distanceTo(new THREE__namespace.Vector3(1, 0, 0)) < tolerance$2 && type === classcad.WorkAxisType.WA_FIXED) {
     return 0xd52828;
-  } else if (direction.distanceTo(new THREE__namespace.Vector3(0, 1, 0)) < tolerance$3 && type === classcad.WorkAxisType.WA_FIXED) {
+  } else if (direction.distanceTo(new THREE__namespace.Vector3(0, 1, 0)) < tolerance$2 && type === classcad.WorkAxisType.WA_FIXED) {
     return 0x28a628;
-  } else if (direction.distanceTo(new THREE__namespace.Vector3(0, 0, 1)) < tolerance$3 && type === classcad.WorkAxisType.WA_FIXED) {
+  } else if (direction.distanceTo(new THREE__namespace.Vector3(0, 0, 1)) < tolerance$2 && type === classcad.WorkAxisType.WA_FIXED) {
     return 0x2828d7;
   } else {
     return 0x111111;
@@ -14178,11 +14349,13 @@ const ViewImpl$c = ({
   const workAxisObj = react.useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
   const direction = convertToVector(workAxisObj == null ? void 0 : (_workAxisObj$members = workAxisObj.members) == null ? void 0 : _workAxisObj$members.Direction);
   const {
-    isHovered,
-    isSelected,
+    isGHovered,
+    isGSelected,
+    isSHovered,
+    isSSelected,
     handlers
-  } = useTreeObjSelection(drawingId, objectId);
-  const color = getColor(isHovered, isSelected, direction, workAxisObj == null ? void 0 : (_workAxisObj$members2 = workAxisObj.members) == null ? void 0 : _workAxisObj$members2.Type.value);
+  } = useTreeObjInteraction(drawingId, objectId);
+  const color = getHighlightedColor(isGHovered, isGSelected, isSHovered, isSSelected) || getBaseColor(direction, workAxisObj == null ? void 0 : (_workAxisObj$members2 = workAxisObj.members) == null ? void 0 : _workAxisObj$members2.Type.value);
   return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement(WorkAxisObj, {
     drawingId: drawingId,
     objectId: objectId,
@@ -14553,18 +14726,27 @@ const ViewImpl$b = ({
     objectId = -1
   } = core.getPlugin(drawingId, pluginId);
   const {
-    isHovered,
-    isSelected,
+    isGHovered,
+    isGSelected,
+    isSHovered,
+    isSSelected,
     handlers
-  } = useTreeObjSelection(drawingId, objectId);
-  const color = isHovered ? 0x18b77f : isSelected ? 0xa70b0b : 0x34424f;
-  return /*#__PURE__*/React.createElement(WorkPlaneObj, {
+  } = useTreeObjInteraction(drawingId, objectId);
+  const isHighlighted = isGHovered || isGSelected || isSHovered || isSSelected;
+  const color = getHighlightedColor(isGHovered, isGSelected, isSHovered, isSSelected) || 0x34424f;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isHighlighted && /*#__PURE__*/React.createElement(WorkPlaneObj, {
     drawingId: drawingId,
     objectId: objectId,
     color: color,
     opacity: 0.5,
     handlers: handlers
-  });
+  }), isHighlighted && /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement(WorkPlaneObj, {
+    drawingId: drawingId,
+    objectId: objectId,
+    color: color,
+    opacity: 0.3,
+    handlers: handlers
+  })));
 };
 const View$b = ({
   drawingId,
@@ -14746,11 +14928,13 @@ const ViewImpl$a = ({
     objectId = -1
   } = core.getPlugin(drawingId, pluginId);
   const {
-    isHovered,
-    isSelected,
+    isGHovered,
+    isGSelected,
+    isSHovered,
+    isSSelected,
     handlers
-  } = useTreeObjSelection(drawingId, objectId);
-  const color = isHovered ? 0x28d79f : isSelected ? 0xa70b0b : 0x111111;
+  } = useTreeObjInteraction(drawingId, objectId);
+  const color = getHighlightedColor(isGHovered, isGSelected, isSHovered, isSSelected) || 0x111111;
   return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement(WorkPointObj, {
     drawingId: drawingId,
     objectId: objectId,
@@ -14906,12 +15090,11 @@ function createCSysParam(coordSystem) {
   return value;
 }
 function useCSysParam(drawingId, objId) {
-  // TODO: Fix lint error without disabling it
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const coordSystem = react.useDrawing(drawingId, d => {
+  const objCsys = react.useDrawing(drawingId, d => {
     var _d$structure$tree$obj;
     return (_d$structure$tree$obj = d.structure.tree[objId]) == null ? void 0 : _d$structure$tree$obj.coordinateSystem;
-  }) || [[0, 0, 0], [1, 0, 0], [0, 1, 0], [0, 0, 1]];
+  });
+  const coordSystem = React.useMemo(() => objCsys || core.MathUtils.convertToCoordinateSystem(new THREE.Matrix4()), [objCsys]);
   const [userValue, setUserValue] = React.useState(createCSysParam(coordSystem));
   React.useEffect(() => {
     setUserValue(createCSysParam(coordSystem));
@@ -14948,7 +15131,7 @@ const typeCaptions = {
   [classcad.WorkCoordSystemType.WCS_XYAXISORIGIN]: 'Set'
 };
 const tolerance$1 = 1e-6;
-const getObjectPosition = obj => {
+const getObjectPosition = (drawingId, obj) => {
   if (obj.position) {
     return obj.position.clone();
   }
@@ -14956,14 +15139,18 @@ const getObjectPosition = obj => {
     return obj.center.clone();
   }
   const members = obj.members;
-  return convertToVector((members == null ? void 0 : members.Position) || (members == null ? void 0 : members.pos));
+  const pos = convertToVector((members == null ? void 0 : members.Position) || (members == null ? void 0 : members.pos));
+  const matrix = core.getDrawing(drawingId).api.structure.calculateGlobalTransformation(obj.id);
+  return pos.applyMatrix4(matrix);
 };
-const getObjectDirection = obj => {
+const getObjectDirection = (drawingId, obj) => {
   if (obj.end) {
     return obj.end.clone().sub(obj.start).normalize();
   }
   const members = obj.members;
-  return convertToVector((members == null ? void 0 : members.Direction) || (members == null ? void 0 : members.direction)).normalize();
+  const dir = convertToVector((members == null ? void 0 : members.Direction) || (members == null ? void 0 : members.direction)).normalize();
+  const matrix = core.getDrawing(drawingId).api.structure.calculateGlobalTransformation(obj.id);
+  return dir.applyMatrix4(matrix).normalize();
 };
 function RootImpl$b({
   drawingId,
@@ -15025,7 +15212,7 @@ function RootImpl$b({
         });
         return;
       }
-      originPos = getObjectPosition(origin);
+      originPos = getObjectPosition(drawingId, origin);
     } else {
       originPos = new THREE__namespace.Vector3(csys.userValue[CSysRows.Position].x, csys.userValue[CSysRows.Position].y, csys.userValue[CSysRows.Position].z);
     }
@@ -15046,7 +15233,7 @@ function RootImpl$b({
         });
         return;
       }
-      xDir = getObjectDirection(primaryAxis);
+      xDir = getObjectDirection(drawingId, primaryAxis);
     } else {
       xDir = new THREE__namespace.Vector3(csys.userValue[CSysRows.XAxis].x, csys.userValue[CSysRows.XAxis].y, csys.userValue[CSysRows.XAxis].z);
     }
@@ -15067,7 +15254,7 @@ function RootImpl$b({
         });
         return;
       }
-      yDir = getObjectDirection(secondaryAxis);
+      yDir = getObjectDirection(drawingId, secondaryAxis);
     } else {
       yDir = new THREE__namespace.Vector3(csys.userValue[CSysRows.YAxis].x, csys.userValue[CSysRows.YAxis].y, csys.userValue[CSysRows.YAxis].z);
     }
@@ -15292,14 +15479,16 @@ function ViewImpl$9({
     return calcluateTransform(originPos_, xDir_, yDir_, offset, rotation, inverted);
   }, [originPos, xDir, yDir, offset, rotation, inverted]);
   const {
-    isHovered,
-    isSelected,
+    isGHovered,
+    isGSelected,
+    isSHovered,
+    isSSelected,
     handlers
-  } = useTreeObjSelection(drawingId, objectId);
+  } = useTreeObjInteraction(drawingId, objectId);
 
   // This color is used only for the hovered and selected state,
   // undefined means default color which defined in Csys component.
-  const color = isHovered ? 0x28d79f : isSelected ? 0xa70b0b : undefined;
+  const color = getHighlightedColor(isGHovered, isGSelected, isSHovered, isSSelected);
   return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement(WorkCoordSystemObj, {
     drawingId: drawingId,
     objectId: objectId,
@@ -16277,6 +16466,7 @@ const CSysWrapper = ({
   } = userData;
   const currentNode = react.useDrawing(drawingId, drawing => drawing.structure.currentNode);
   const matrix = useCsysMatrix(drawingId, csysId, flip, reoriented);
+  const activeColor = getHighlightedColor(false, false, false, true);
   const onPointerMove_ = React.useCallback(() => onPointerMove && onPointerMove(csysId, matePath), [onPointerMove, matePath, csysId]);
   const onPointerOut_ = React.useCallback(() => onPointerOut && onPointerOut(csysId, matePath), [onPointerOut, matePath, csysId]);
   return /*#__PURE__*/React.createElement(react.GlobalTransform, {
@@ -16287,7 +16477,7 @@ const CSysWrapper = ({
     matePath: matePath
   }, isSelected ? /*#__PURE__*/React.createElement(SelectedCsys, {
     matrix: matrix,
-    color: isActive ? 0xa70b0b : undefined,
+    color: isActive ? activeColor : undefined,
     opacity: 1.0,
     userData: userData
   }) : /*#__PURE__*/React.createElement("group", {
@@ -16366,12 +16556,15 @@ const CSysDisplayImpl = ({
 }) => {
   // If we are in part mode, the products array contains the id of the CC_Part and no product references!
   // TODO: Split the products array into `products` and `productRefs` in the drawing state.
-  const currentNode = react.useDrawing(drawingId, drawing => drawing.structure.currentNode);
-  const rigidSets = react.useDrawing(drawingId, drawing => currentNode && drawing.structure.tree[currentNode].children);
+  const currentNode = useDrawingCCId(drawingId, drawing => drawing.structure.currentNode);
+  const rigidSets = useDrawingArr(drawingId, drawing => drawing.structure.tree[currentNode].children);
   const productIds = react.useDrawing(drawingId, drawing => drawing.structure.products);
   const selectors = react.useDrawing(drawingId, drawing => drawing.selection.refs);
   const activeSelector = react.useDrawing(drawingId, drawing => drawing.selection.active && drawing.selection.refs[drawing.selection.active]);
-  const [hoveredProductId, setHoveredProductId] = React.useState(undefined);
+  const hoveredId = react.useDrawing(drawingId, drawing => {
+    var _drawing$interaction$;
+    return (_drawing$interaction$ = drawing.interaction.hovered) == null ? void 0 : _drawing$interaction$.prodRefId;
+  }) || undefined;
   const [hoveredProductIds, setHoveredProductIds] = React.useState([]);
   const prevHoveredIdRef = React.useRef(undefined);
   const displayTimers = React.useRef({});
@@ -16392,21 +16585,21 @@ const CSysDisplayImpl = ({
       const timerKey = prevHoveredId.toString();
       displayTimers.current[timerKey] = timerId;
     }
-    prevHoveredIdRef.current = hoveredProductId;
-    if (hoveredProductId !== undefined) {
+    prevHoveredIdRef.current = hoveredId;
+    if (hoveredId !== undefined) {
       setHoveredProductIds(hoveredProductIds_ => {
-        if (hoveredProductIds_.indexOf(hoveredProductId) !== -1) {
+        if (hoveredProductIds_.indexOf(hoveredId) !== -1) {
           return hoveredProductIds_;
         }
-        return [...hoveredProductIds_, hoveredProductId];
+        return [...hoveredProductIds_, hoveredId];
       });
-      const timerKey = `${hoveredProductId}`;
+      const timerKey = `${hoveredId}`;
       if (displayTimers.current[timerKey]) {
         window.clearTimeout(displayTimers.current[timerKey]);
         displayTimers.current[timerKey] = undefined;
       }
     }
-  }, [hoveredProductId]);
+  }, [hoveredId]);
   const [hoveredCSysIds, setHoveredCSysIds] = React.useState([]);
   const onPointerMove = React.useCallback((csysId, matePath) => {
     setHoveredCSysIds(hoveredCSysIds_ => {
@@ -16449,13 +16642,17 @@ const CSysDisplayImpl = ({
   const activeSelItems = React.useMemo(() => {
     return activeSelector ? activeSelector.items.filter(item => item.scope === MateScope) : [];
   }, [activeSelector]);
-  const selRigidSets = React.useMemo(() => {
+  const inactiveSelRS = React.useMemo(() => {
     return selItems.map(item => {
+      if (activeSelItems.indexOf(item) !== -1) {
+        // Obviously, if item is active, it (and it's rigidset) is not inactive. So it should be excluded from the array...
+        return undefined;
+      }
       const activeRefId = getActiveReference(drawingId, item.data.matePath, activeProducts);
       const rigidSet = activeRefId && rigidSets && getProductRigidSet(drawingId, activeRefId, rigidSets);
       return rigidSet;
-    });
-  }, [drawingId, activeProducts, rigidSets, selItems]);
+    }).filter(id => id);
+  }, [drawingId, activeProducts, rigidSets, selItems, activeSelItems]);
   const csysUDataArray = React.useMemo(() => {
     const csysUDataArray_ = [];
     const prToCsysMap = {};
@@ -16478,11 +16675,15 @@ const CSysDisplayImpl = ({
         onHUD: true
       });
     });
+    if (hoveredOnly && !activeSelector) {
+      // In hoveredOnly mode, only display inactive selected mates if no selector is active
+      return csysUDataArray_;
+    }
     const ids = hoveredOnly ? hoveredProductIds : activeProducts;
     ids == null ? void 0 : ids.forEach(id => {
       var _tree$id, _tree$id$members, _tree$id$members$prod, _tree$id2;
-      const rigidSet = rigidSets && getProductRigidSet(drawingId, id, rigidSets);
-      if (selRigidSets.indexOf(rigidSet) !== -1) {
+      const rigidSet = getProductRigidSet(drawingId, id, rigidSets);
+      if (rigidSet && inactiveSelRS.indexOf(rigidSet) !== -1) {
         return;
       }
       const matePath = getMatePath(drawingId, id);
@@ -16516,35 +16717,8 @@ const CSysDisplayImpl = ({
       });
     }
     return csysUDataArray_;
-  }, [drawingId, hoveredOnly, activeProducts, hoveredProductIds, hoveredCSysIds, selItems, activeSelItems, rigidSets, selRigidSets]);
-  const lnTh = fiber.useThree(state => {
-    var _state$raycaster$para;
-    return (_state$raycaster$para = state.raycaster.params.Line) == null ? void 0 : _state$raycaster$para.threshold;
-  });
-  const ptsTh = fiber.useThree(state => {
-    var _state$raycaster$para2;
-    return (_state$raycaster$para2 = state.raycaster.params.Points) == null ? void 0 : _state$raycaster$para2.threshold;
-  });
-  const {
-    camera,
-    size
-  } = fiber.useThree();
-  const {
-    lineThreshold,
-    pointThreshold
-  } = React.useMemo(() => {
-    return {
-      lineThreshold: lnTh || react.CameraHelper.calculateScaleFactor(camera.position, 4, camera, size),
-      pointThreshold: ptsTh || react.CameraHelper.calculateScaleFactor(camera.position, 6, camera, size)
-    };
-  }, [camera, size, lnTh, ptsTh]);
-  const onInfiniteMove = React.useCallback(e => {
-    const geom = react.findBuerliGeometry(e, lineThreshold, pointThreshold)[0];
-    setHoveredProductId(geom == null ? void 0 : geom.productId);
-  }, [setHoveredProductId, lineThreshold, pointThreshold]);
-  return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement("infinityPlane", {
-    onPointerMove: onInfiniteMove
-  }), /*#__PURE__*/React.createElement("group", null, csysUDataArray.map(userData => /*#__PURE__*/React.createElement(CSysWrapper, {
+  }, [drawingId, hoveredOnly, activeProducts, hoveredProductIds, hoveredCSysIds, activeSelector, selItems, activeSelItems, rigidSets, inactiveSelRS]);
+  return /*#__PURE__*/React.createElement(HUD, null, /*#__PURE__*/React.createElement("group", null, csysUDataArray.map(userData => /*#__PURE__*/React.createElement(CSysWrapper, {
     key: getCSysKey$1(userData),
     drawingId: drawingId,
     csys: csys,
@@ -16581,7 +16755,7 @@ const SelectableMate = ({
     isSelected,
     handlers
   } = useMateSelection(drawingId, matePath, csysId);
-  const color = isHovered ? 0x28d79f : isSelected ? 0xa70b0b : undefined;
+  const color = getHighlightedColor(false, false, isHovered, isSelected);
   return /*#__PURE__*/React.createElement(Csys, {
     matrix: matrix,
     opacity: 1.0,
@@ -19390,6 +19564,18 @@ class OutlineEffect extends postprocessing.Effect {
       this.outlinePass.render(renderer, null, this.outlineRT);
     };
   }
+  set edgeColor1(value) {
+    const uniform = this.uniforms.get('edgeColor1');
+    uniform.value = new THREE__namespace.Color(value);
+  }
+  set edgeColor2(value) {
+    const uniform = this.uniforms.get('edgeColor2');
+    uniform.value = new THREE__namespace.Color(value);
+  }
+  set edgeColor3(value) {
+    const uniform = this.uniforms.get('edgeColor3');
+    uniform.value = new THREE__namespace.Color(value);
+  }
   set selectionLayer(value) {
     this.selections1.forEach(selection => {
       selection.layer = value;
@@ -19496,7 +19682,9 @@ const Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef)
     width,
     height,
     kernelSize
-  }), [scene, camera, edgeStrength, edgeColor1, edgeColor2, edgeColor3, width, height, kernelSize]);
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [scene, camera, edgeStrength, width, height, kernelSize]);
   React.useEffect(() => {
     if (selections1) {
       effect.selections1 = selections1.map(selection => new postprocessing.Selection(selection, selectionLayer));
@@ -19533,6 +19721,27 @@ const Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [effect, selections3]);
+  React.useEffect(() => {
+    if (edgeColor1) {
+      effect.edgeColor1 = edgeColor1;
+      invalidate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [effect, edgeColor1]);
+  React.useEffect(() => {
+    if (edgeColor2) {
+      effect.edgeColor2 = edgeColor2;
+      invalidate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [effect, edgeColor2]);
+  React.useEffect(() => {
+    if (edgeColor3) {
+      effect.edgeColor3 = edgeColor3;
+      invalidate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [effect, edgeColor3]);
   React.useEffect(() => {
     effect.selectionLayer = selectionLayer;
     invalidate();
@@ -20923,71 +21132,27 @@ const Feature = ({
   });
   const visible = react.useDrawing(drawingId, d => d.plugin.visible.indexOf(featureId) >= 0);
   const {
+    isGHovered,
+    isGSelected,
+    isSHovered,
     handlers
-  } = useTreeObjSelection(drawingId, featureId);
+  } = useTreeObjInteraction(drawingId, featureId);
   const onTreeObjClick = handlers.onClick;
   const onTreeObjPointerOver = handlers.onPointerOver;
   const onTreeObjPointerOut = handlers.onPointerOut;
-  const selected = react.useDrawing(drawingId, d => d.interaction.selected);
-  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.objectId)) || [];
-  const isHovered = react.useDrawing(drawingId, d => {
-    var _d$interaction$hovere;
-    return ((_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId) === featureId;
-  });
-  const isSelected = (selectedIds == null ? void 0 : selectedIds.indexOf(featureId)) !== -1;
-  const isHighlighted = isHovered || isSelected;
+  const isHovered = isGHovered || isSHovered;
+  const isHighlighted = isHovered || isGSelected;
   const hasGraphics = useHasView(drawingId, featureId);
   const isActive = react.useDrawing(drawingId, d => d.plugin.active.feature === featureId);
   const isCustom = useIsCustom(drawingId, featureRefId);
   const disabled = useIsDisabled(drawingId, featureId);
   const errorId = usePrecheckErrorId(drawingId, featureId);
   const [rename, setRename] = React.useState(false);
-  const onClick = React.useCallback(e => {
-    const drawing = core.getDrawing(drawingId);
-    const isSelActive = drawing.selection.active !== null;
-    if (isSelActive && onTreeObjClick) {
-      onTreeObjClick(e);
-      return;
-    }
-    const select = drawing.api.interaction.select;
-    const multi = e.shiftKey;
-    const curNodeId = drawing.structure.currentNode;
-    const curProdId = drawing.structure.currentProduct;
-    select(core.createInfo({
-      objectId: featureId,
-      prodRefId: curNodeId || curProdId
-    }), multi);
-  }, [drawingId, featureId, onTreeObjClick]);
   const onDoubleClick = React.useCallback(() => {
     if (!disabled) {
       core.getDrawing(drawingId).api.plugin.setActiveFeature(featureId);
     }
   }, [disabled, featureId, drawingId]);
-  const onMouseEnter = React.useCallback(e => {
-    const drawing = core.getDrawing(drawingId);
-    const isSelActive = drawing.selection.active !== null;
-    if (isSelActive && onTreeObjPointerOver) {
-      onTreeObjPointerOver(e);
-      return;
-    }
-    const setHovered = drawing.api.interaction.setHovered;
-    const curNodeId = drawing.structure.currentNode;
-    const curProdId = drawing.structure.currentProduct;
-    setHovered(core.createInfo({
-      objectId: featureId,
-      prodRefId: curNodeId || curProdId
-    }));
-  }, [drawingId, featureId, onTreeObjPointerOver]);
-  const onMouseLeave = React.useCallback(e => {
-    const drawing = core.getDrawing(drawingId);
-    const isSelActive = drawing.selection.active !== null;
-    if (isSelActive && onTreeObjPointerOut) {
-      onTreeObjPointerOut(e);
-      return;
-    }
-    const setHovered = drawing.api.interaction.setHovered;
-    setHovered(null);
-  }, [drawingId, onTreeObjPointerOut]);
   const nameComponent = rename ? /*#__PURE__*/React.createElement(NameEdit, {
     drawingId: drawingId,
     objId: featureId,
@@ -21034,10 +21199,10 @@ const Feature = ({
     hovered: isHighlighted,
     bordered: true,
     title: String(featureId),
-    onClick: onClick,
+    onClick: onTreeObjClick,
     onDoubleClick: onDoubleClick,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseEnter: onTreeObjPointerOver,
+    onMouseLeave: onTreeObjPointerOut
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -21282,7 +21447,7 @@ const NodeTitle = ({
     return ((_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId) === refId;
   });
   const selected = react.useDrawing(drawingId, d => d.interaction.selected);
-  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.objectId)) || [];
+  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.prodRefId || -1)) || [];
   const reference = react.useDrawing(drawingId, d => d.structure.tree[refId]);
   const referedId = (reference == null ? void 0 : (_reference$members = reference.members) == null ? void 0 : (_reference$members$pr = _reference$members.productId) == null ? void 0 : _reference$members$pr.value) || NOCCID;
   const localPath = (reference == null ? void 0 : (_reference$members2 = reference.members) == null ? void 0 : (_reference$members2$l = _reference$members2.localPath) == null ? void 0 : _reference$members2$l.value) || EMPTYSTR;
@@ -22053,17 +22218,17 @@ const Solid = ({
 }) => {
   const hoveredId = react.useDrawing(drawingId, d => {
     var _d$interaction$hovere;
-    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.graphicId;
+    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.containerId;
   });
   const selected = react.useDrawing(drawingId, d => d.interaction.selected);
-  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.graphicId)) || [];
+  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.containerId || -1)) || [];
   const solidOwner = useDrawingCCId(drawingId, d => {
     var _d$graphic$containers;
     return (_d$graphic$containers = d.graphic.containers[solidId]) == null ? void 0 : _d$graphic$containers.owner;
   });
   const ccSolid = react.useDrawing(drawingId, d => d.structure.tree[solidOwner]);
   const isHovered = hoveredId === solidId;
-  const isSelected = (selectedIds == null ? void 0 : selectedIds.indexOf(solidId)) !== -1;
+  const isSelected = selectedIds.indexOf(solidId) !== -1;
   const isHighlighted = isHovered || isSelected;
   const [rename, setRename] = React.useState(false);
   const onClick = React.useCallback(e => {
@@ -22301,6 +22466,14 @@ const PartModeCmds = (drawingId, rootId) => {
   const featureApi = classcad.ccAPI.feature;
   const pluginApi = core.getDrawing(drawingId).api.plugin;
   const wrapper = cmd => async () => {
+    const activePlugin = core.getDrawing(drawingId).plugin.active.feature;
+    if (activePlugin) {
+      core.showMessage({
+        text: 'Error while attempting to create a new feature: there should be no active feature plugin!',
+        type: 'error'
+      });
+      return;
+    }
     const res = await cmd().catch(console.warn);
     if (res && res.errors && res.errors.length === 0 && res.results[0].result !== null) {
       pluginApi.setActiveFeature(res.results[0].result);
@@ -22479,6 +22652,14 @@ const AssemblyModeCmds = (drawingId, rootId) => {
   const assemblyApi = classcad.ccAPI.assemblyBuilder;
   const pluginApi = core.getDrawing(drawingId).api.plugin;
   const wrapper = cmd => async () => {
+    const activePlugin = core.getDrawing(drawingId).plugin.active.feature;
+    if (activePlugin) {
+      core.showMessage({
+        text: 'Error while attempting to create a new constraint: there should be no active feature plugin!',
+        type: 'error'
+      });
+      return;
+    }
     const res = await cmd().catch(console.warn);
     if (res && res.errors && res.errors.length === 0 && res.results[0].result !== null) {
       pluginApi.setActiveFeature(res.results[0].result);
@@ -22973,6 +23154,7 @@ exports.HUD = HUD;
 exports.HoveredConstraintDisplay = HoveredConstraintDisplay;
 exports.Import = index$1;
 exports.LinearPattern = index$j;
+exports.MateScope = MateScope;
 exports.Measure = index$g;
 exports.Menu = Menu;
 exports.Messages = Messages;
@@ -22997,6 +23179,7 @@ exports.Sphere = index$t;
 exports.ToolBar = ToolBar;
 exports.TransformByCsys = index$m;
 exports.Translate = index$o;
+exports.TreeObjScope = TreeObjScope;
 exports.ViewOptionButtons = ViewOptionButtons;
 exports.ViewPlugButtons = ViewPlugButtons;
 exports.WorkAxis = index$e;