@buerli.io/react-cad 0.2.1 → 0.3.0-beta.0

package/build/index.js

@@ -1,7 +1,7 @@
 import { useDrawing, CameraHelper, useBuerli, usePlugin, useEmbeddedPlugin, GlobalTransform, findBuerliGeometry, BuerliGeometry, usePluginExists, useFeaturePluginDef } from '@buerli.io/react';
 import * as React from 'react';
 import React__default, { useMemo, forwardRef, useState, useCallback, useEffect, useRef, memo, useContext, useReducer } from 'react';
-import { getDrawing, createGraphicItem, MemberType, MathUtils, api, getPlugin, BuerliScope, GraphicType, EntityTypes, Measure, MeasureResultType } from '@buerli.io/core';
+import { getDrawing, createGraphicItem, MemberType, MathUtils, api, getPlugin, BuerliScope, createInfo, GraphicType, solidFilter, lineSegmentsFilter, loopFilter, planeFilter, EntityTypes, Measure, MeasureResultType, pointFilter, circleFilter, arcFilter, lineFilter, arcCircleFilter, meshFilter } from '@buerli.io/core';
 import { ccUtils, CCClasses, ccAPI, ReorientedType, FlipType, BooleanOperationType, ExtrusionType, ChamferType, WorkAxisType, WorkPlaneType, WorkPointType, WorkCoordSystemType, DataType } from '@buerli.io/classcad';
 import * as THREE from 'three';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
@@ -18,13 +18,14 @@ 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, Space, Tag, Table, Tabs, Divider as Divider$1, Button, Badge, Modal, Tooltip as Tooltip$1, Skeleton as Skeleton$1 } from 'antd';
+import { Menu as Menu$1, Dropdown, Input, Typography, Space, Tag, Table, Tabs, 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';
 import { Geometry } from 'three-stdlib';
 import SelectImpl from 'antd/lib/select';
 import { basename, extname } from 'path-browserify';
+import { Pass, Selection, Effect, Resolution, KernelSize, BlendFunction, ClearPass, ShaderPass, KawaseBlurPass } from 'postprocessing';
 import { useUID } from 'react-uid';
 import SkeletonImpl from 'antd/lib/skeleton/Skeleton';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
@@ -218,7 +219,7 @@ function getGlobalToLocalMatrix(drawingId, objId) {
   return matrix.invert();
 } // TODO: !!Remove
 function convertToVector(point) {
-  return new THREE.Vector3(point.value.x, point.value.y, point.value.z);
+  return point ? new THREE.Vector3(point.value.x, point.value.y, point.value.z) : new THREE.Vector3();
 }
 function convertToArray(point) {
   return [point.value.x, point.value.y, point.value.z];
@@ -381,7 +382,12 @@ function findObject(drawingId, id, unrollRefs = false) {
   const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
   const visibleContainers = drawing.structure.visibleContainers;
   const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-  const sortedContainerIds = visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers); // TODO: also search for containers (i.e. solid graphics)
+  const sortedContainerIds = visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
+
+  if (cache[graphicId]) {
+    return cache[graphicId];
+  } // TODO: also search for containers (i.e. solid graphics)
+
 
   for (const contId of sortedContainerIds) {
     const cont = cache[contId];
@@ -602,15 +608,11 @@ const NumOrExpr = ({
     expr: typeof valOrExpr === 'string' ? valOrExpr : '',
     onChange: onChange,
     onUpdate: onUpdate,
-    isExprState: [isExpr, setIsExpr],
     defaultOpenState: [defaultOpen, setDefaultOpen]
   }), !isExpr && /*#__PURE__*/React__default.createElement(NumInput$1, {
-    value: typeof valOrExpr === 'string' ? getDefNumValue(drawingId, defaults) : valOrExpr,
-    defaultV: getDefNumValue(drawingId, defaults),
+    value: getDefNumValue(drawingId, defaults),
     onChange: onChange,
     onUpdate: onUpdate,
-    isExprState: [isExpr, setIsExpr],
-    defaultOpenState: [defaultOpen, setDefaultOpen],
     allowExpr: allowExpr
   })), allowExpr && /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -629,8 +631,7 @@ const NumOrExpr = ({
 const NumInput$1 = ({
   onChange,
   onUpdate,
-  value,
-  defaultV
+  value
 }) => {
   const {
     Input
@@ -641,8 +642,10 @@ const NumInput$1 = ({
 
     if (!isNaN(float)) {
       onChange(float); // Call onChange of parent component
+    } else {
+      onChange(value);
     }
-  }, [sValue, onChange]);
+  }, [sValue, onChange, value]);
   React__default.useEffect(() => {
     setSValue(String(value));
   }, [value]);
@@ -650,19 +653,19 @@ const NumInput$1 = ({
     target
   }) => {
     const val = target.value;
-    const reg = /^-?(\d+(\.\d*)?)?$/; // Regexpr for float number
+    const reg = /^-?(\d*(\.\d*)?)?$/; // Regexpr for float number
 
-    if (reg.test(val) || val === '-' || val === '') {
-      setSValue(val.replace(/^0+\d/, val[1])); // Remove extra zeros from the begin
+    if (reg.test(val) || val === '') {
+      setSValue(val); // Remove extra zeros from the begin
     }
   }, []);
   const onBlur = React__default.useCallback(() => {
     const float = parseFloat(sValue);
 
     if (isNaN(float)) {
-      setSValue(String(defaultV));
+      setSValue(String(value));
     }
-  }, [defaultV, sValue]);
+  }, [value, sValue]);
   return /*#__PURE__*/React__default.createElement(Input, {
     style: {
       paddingRight: '18px'
@@ -2271,130 +2274,101 @@ var index$y = /*#__PURE__*/Object.freeze({
   useDimensionSetId: useDimensionSetId
 });
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-/**
- * Implies the following data structure:
- * data: {
- *   matePath: ObjectID[],
- *   csys: IStructureObject,
- *   flip: FlipType,
- *   reoriented: ReorientedType,
- * }
- */
-
-const MateScope = 'HLConstraintScope';
-const createMateItem = (matePath, csys, flip, reoriented) => {
-  return {
-    id: `Mate|${matePath.toString()}|${csys.id}|(${flip},${reoriented})`,
-    scope: MateScope,
-    data: {
-      matePath,
-      csys,
-      flip,
-      reoriented
-    },
-    label: 'MATE'
-  };
-};
-
-function useIsHovered$1(drawingId, matePath, object) {
-  const hoveredItem = useDrawing(drawingId, d => {
-    const activeId = d.selection.active;
-
-    if (!activeId) {
-      return undefined;
-    }
+function useIdParam(drawingId, objId, memberName) {
+  var _getDrawing$structure;
 
-    return d.selection.refs[activeId].hoveredItem;
+  const member = (_getDrawing$structure = getDrawing(drawingId).structure.tree[objId].members) == null ? void 0 : _getDrawing$structure[memberName];
+  const [userValue, setUserValue] = React__default.useState(member.value);
+  React__default.useEffect(() => {
+    setUserValue(member.value);
+  }, [member]);
+  const defaults = React__default.useMemo(() => {
+    return member.value;
+  }, [member]);
+  const isChanged = React__default.useCallback(() => {
+    return userValue !== defaults;
+  }, [defaults, userValue]);
+  return useParam({
+    userValue,
+    setUserValue,
+    defaults,
+    isChanged
   });
-  if (!hoveredItem) return false;
-  return createMateItem(matePath, object, FlipType.FLIP_Z, ReorientedType.REORIENTED_0).id === hoveredItem.id;
 }
 
-function useHover$1(drawingId, matePath, objectId) {
-  const onPointerOver = React__default.useCallback(e => {
-    const selApi = getDrawing(drawingId).api.selection;
-    const object = getDrawing(drawingId).structure.tree[objectId];
-    const item = createMateItem(matePath, object, FlipType.FLIP_Z, ReorientedType.REORIENTED_0);
-    selApi.setHovered(item);
-  }, [drawingId, objectId, matePath]);
-  const onPointerOut = React__default.useCallback(e => {
-    const selApi = getDrawing(drawingId).api.selection;
-    selApi.setHovered(null);
-  }, [drawingId]);
-  return {
-    onPointerOut,
-    onPointerOver
-  };
+function refIdChanged(refId, defId, tree) {
+  if (refId && tree[refId] === undefined) {
+    // The graphicId is stored in userValue
+    const {
+      graphicId
+    } = getGraphicId(tree, defId);
+    return refId !== graphicId;
+  } else {
+    // The id of tree obj is stored in userValue
+    return refId !== defId;
+  }
 }
 
-function useSelect$1(drawingId, matePath, csys) {
-  const selApi = getDrawing(drawingId).api.selection;
-  const onClick = React__default.useCallback(e => {
-    const item = createMateItem(matePath, csys, FlipType.FLIP_Z, ReorientedType.REORIENTED_0);
-    selApi.isItemSelected(item) ? selApi.unselect(item) : selApi.select(item);
-    e.stopPropagation();
-  }, [selApi, matePath, csys]);
-  return {
-    onClick
-  };
-} // Returns true if object in tree is currently selected in active selection.
-
-
-function useIsSelected$1(drawingId, matePath, csys) {
-  // Re-render if selectedItems is changed
-  const selectedItems = useDrawing(drawingId, d => {
-    const activeId = d.selection.active;
-
-    if (!activeId) {
-      return undefined;
-    }
+function useRefsParam(drawingId, objId, memberName) {
+  const member = useDrawing(drawingId, d => {
+    var _d$structure$tree$obj;
 
-    return d.selection.refs[activeId].items;
+    return (_d$structure$tree$obj = d.structure.tree[objId].members) == null ? void 0 : _d$structure$tree$obj[memberName];
   });
+  const defaults = React__default.useMemo(() => {
+    return member.members.map(m => m.value);
+  }, [member]);
+  const [userValue, setUserValue] = React__default.useState(defaults);
+  const validateFns = React__default.useRef([]);
+  React__default.useEffect(() => {
+    setUserValue(defaults);
+  }, [defaults]);
+  const isChanged = React__default.useCallback(idx => {
+    const tree = getDrawing(drawingId).structure.tree;
 
-  if (!selectedItems) {
-    return false;
-  }
-
-  const selApi = getDrawing(drawingId).api.selection;
-  return selApi.isItemSelected(createMateItem(matePath, csys, FlipType.FLIP_Z, ReorientedType.REORIENTED_0));
-}
-function useMateSelection(drawingId, matePath, csysId) {
-  const csys = useDrawing(drawingId, drawing => drawing.structure.tree[csysId]);
-  const hHandlers = useHover$1(drawingId, matePath, csys.id);
-  const sHandlers = useSelect$1(drawingId, matePath, csys);
-  const isSelected = useIsSelected$1(drawingId, matePath, csys);
-  const isHovered = useIsHovered$1(drawingId, matePath, csys);
-  const activeSelId = useDrawing(drawingId, drawing => drawing.selection.active);
-  const selection = activeSelId ? getDrawing(drawingId).selection.refs[activeSelId] : undefined;
-  const isSelectable = Boolean(selection == null ? void 0 : selection.isSelectable(MateScope, {
-    matePath,
-    csys
-  }));
-  const handlers = React__default.useMemo(() => {
-    if (isSelectable) {
-      return _objectSpread$j(_objectSpread$j({}, hHandlers), sHandlers);
+    if (idx !== undefined) {
+      // If idx is passed check only single refId.
+      return refIdChanged(userValue[idx], defaults[idx], tree);
+    } else if (userValue.length !== defaults.length) {
+      return true;
+    } else {
+      let changed = false;
+      userValue.forEach((el, idx_) => {
+        changed = changed || refIdChanged(el, defaults[idx_], tree);
+      });
+      return changed;
     }
+  }, [userValue, defaults, drawingId]);
+  const setValidator = React__default.useCallback((validator_, idOfValidF) => {
+    validateFns.current[idOfValidF] = validator_ === null ? emptyValidator : validator_;
+  }, []);
+  const validator = React__default.useCallback(() => {
+    const warnings = [];
+    validateFns.current.forEach((validateF, i) => {
+      if (!validateF) {
+        return;
+      }
 
-    return {};
-  }, [isSelectable, hHandlers, sHandlers]);
-  return React__default.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,
-      handlers
-    };
-  }, [isHovered, isSelected, isSelectable, handlers]);
+      const res = validateF(userValue[i]);
+      warnings.push(...res);
+    });
+    return warnings;
+  }, [userValue]);
+  return useParam({
+    userValue,
+    setUserValue,
+    defaults,
+    // defaults for a refsParam always contains id of tree objects, graphic Id can't be here.
+    isChanged
+  }, undefined, {
+    setValidator,
+    validator
+  });
 }
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * Implies the following data structure:
  * data: {
@@ -2418,7 +2392,7 @@ const createTreeObjSelItem = (productId, object) => {
   };
 };
 
-function useSelect(drawingId, objId) {
+function useSelect$1(drawingId, objId) {
   const onClick = React__default.useCallback(e => {
     e.stopPropagation();
 
@@ -2439,7 +2413,7 @@ function useSelect(drawingId, objId) {
   };
 }
 
-function useIsHovered(drawingId, objId) {
+function useIsHovered$1(drawingId, objId) {
   const activeSelId = useDrawing(drawingId, d => d.selection.active);
   const isHovered = useDrawing(drawingId, d => {
     var _d$selection$refs;
@@ -2456,7 +2430,7 @@ function useIsHovered(drawingId, objId) {
   return isHovered;
 }
 
-function useHover(drawingId, objId) {
+function useHover$1(drawingId, objId) {
   const onPointerOver = React__default.useCallback(e => {
     e.stopPropagation();
     const structure = getDrawing(drawingId).structure;
@@ -2491,7 +2465,7 @@ function useHover(drawingId, objId) {
  */
 
 
-function useIsSelected(drawingId, objId) {
+function useIsSelected$1(drawingId, objId) {
   // Re-render if selectedItems is changed
   const activeSelId = useDrawing(drawingId, d => d.selection.active);
   const selectedItems = useDrawing(drawingId, d => {
@@ -2525,13 +2499,13 @@ function useTreeObjSelection(drawingId, objId) {
     });
     return res;
   }, [drawingId, objId, isSelectableFunc]);
-  const hHandlers = useHover(drawingId, objId);
-  const isHovered = useIsHovered(drawingId, objId);
-  const sHandlers = useSelect(drawingId, objId);
-  const isSelected = useIsSelected(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__default.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$i(_objectSpread$i({}, hHandlers), sHandlers);
+      return _objectSpread$j(_objectSpread$j({}, hHandlers), sHandlers);
     }
 
     return {};
@@ -2547,134 +2521,51 @@ function useTreeObjSelection(drawingId, objId) {
   }, [isHovered, isSelected, isSelectable, handlers]);
 }
 
-const ccPointFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCPoint;
-const ccLineFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCLine;
-const ccArcFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCArc;
-const ccCircleFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCCircle;
-const lineFilter = (scope, data) => scope === BuerliScope && (data === GraphicType.LINE || data === GraphicType.EDGE);
-const lineSegmentsFilter = (scope, data) => scope === BuerliScope && (data === GraphicType.LINE || data === GraphicType.ARC || data === GraphicType.EDGE || data === GraphicType.CIRCLE);
-const arcFilter = (scope, data) => scope === BuerliScope && data === GraphicType.ARC;
-const circleFilter = (scope, data) => scope === BuerliScope && data === GraphicType.CIRCLE;
-const arcCircleFilter = (scope, data) => scope === BuerliScope && (data === GraphicType.ARC || data === GraphicType.CIRCLE);
-const pointFilter = (scope, data) => scope === BuerliScope && data === GraphicType.POINT;
-const meshFilter = (scope, data) => scope === BuerliScope && (data === GraphicType.PLANE || data === GraphicType.CONE || data === GraphicType.CYLINDER);
-const planeFilter = (scope, data) => scope === BuerliScope && data === GraphicType.PLANE;
-const loopFilter = (scope, data) => scope === BuerliScope && data === GraphicType.LOOP;
-const solidFilter = (scope, data) => scope === BuerliScope && data === GraphicType.BREP;
-const axisFilter = (scope, data) => scope === TreeObjScope && (data.object.class === CCClasses.CCLine || data.object.class === CCClasses.CCPoint || data.object.class === CCClasses.CCWorkAxis || data.object.class === CCClasses.CCWorkPoint) || scope === BuerliScope && (data === GraphicType.LINE || data === GraphicType.EDGE || data === GraphicType.POINT);
-const workPointFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkPoint;
-const workPlaneFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkPlane;
-const workAxisFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkAxis;
-const csysFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkCoordSystem;
-const mateFilter = (scope, data) => scope === MateScope && data.csys.class === CCClasses.CCWorkCoordSystem;
-
-function useIdParam(drawingId, objId, memberName) {
-  var _getDrawing$structure;
+const pickGraphicId = itemData => itemData.graphicId;
+const pickObjId = itemData => itemData.object.id;
+const pickOwnerId = itemData => itemData.container.ownerId;
+const pickGrOrObjId = itemData => itemData.graphicId || itemData.object.id;
 
-  const member = (_getDrawing$structure = getDrawing(drawingId).structure.tree[objId].members) == null ? void 0 : _getDrawing$structure[memberName];
-  const [userValue, setUserValue] = React__default.useState(member.value);
-  React__default.useEffect(() => {
-    setUserValue(member.value);
-  }, [member]);
-  const defaults = React__default.useMemo(() => {
-    return member.value;
-  }, [member]);
-  const isChanged = React__default.useCallback(() => {
-    return userValue !== defaults;
-  }, [defaults, userValue]);
-  return useParam({
-    userValue,
-    setUserValue,
-    defaults,
-    isChanged
-  });
-}
+const isGeometry = (tree, objId) => {
+  const obj = tree[objId];
 
-function refIdChanged(refId, defId, tree) {
-  if (refId && tree[refId] === undefined) {
-    // The graphicId is stored in userValue
-    const {
-      graphicId
-    } = getGraphicId(tree, defId);
-    return refId !== graphicId;
+  if (!obj) {
+    // If there is no corresponding object in tree, the BuerliScope (graphic) item should be restored.
+    return true;
   } else {
-    // The id of tree obj is stored in userValue
-    return refId !== defId;
+    // If obj isn't one of next classes, the TreeObjScope item should be resstored.
+    return ccUtils.base.isA(obj.class, CCClasses.CCSolid) || ccUtils.base.isA(obj.class, CCClasses.CCBrepReference);
+  }
+};
+const getInteractionInfo = (drawingId, item) => {
+  if (item === null) {
+    return null;
   }
-}
-
-function useRefsParam(drawingId, objId, memberName) {
-  const member = useDrawing(drawingId, d => {
-    var _d$structure$tree$obj;
 
-    return (_d$structure$tree$obj = d.structure.tree[objId].members) == null ? void 0 : _d$structure$tree$obj[memberName];
-  });
-  const defaults = React__default.useMemo(() => {
-    return member.members.map(m => m.value);
-  }, [member]);
-  const [userValue, setUserValue] = React__default.useState(defaults);
-  const validateFns = React__default.useRef([]);
-  React__default.useEffect(() => {
-    setUserValue(defaults);
-  }, [defaults]);
-  const isChanged = React__default.useCallback(idx => {
-    const tree = getDrawing(drawingId).structure.tree;
-
-    if (idx !== undefined) {
-      // If idx is passed check only single refId.
-      return refIdChanged(userValue[idx], defaults[idx], tree);
-    } else if (userValue.length !== defaults.length) {
-      return true;
-    } else {
-      let changed = false;
-      userValue.forEach((el, idx_) => {
-        changed = changed || refIdChanged(el, defaults[idx_], tree);
-      });
-      return changed;
-    }
-  }, [userValue, defaults, drawingId]);
-  const setValidator = React__default.useCallback((validator_, idOfValidF) => {
-    validateFns.current[idOfValidF] = validator_ === null ? emptyValidator : validator_;
-  }, []);
-  const validator = React__default.useCallback(() => {
-    const warnings = [];
-    validateFns.current.forEach((validateF, i) => {
-      if (!validateF) {
-        return;
-      }
-
-      const res = validateF(userValue[i]);
-      warnings.push(...res);
+  if (item.scope === BuerliScope) {
+    const objectId = item.data.container.ownerId;
+    const graphicId = item.data.graphicId;
+    const containerId = item.data.container.id;
+    const prodRefId = item.data.productId;
+    return createInfo({
+      objectId,
+      graphicId,
+      containerId,
+      prodRefId
     });
-    return warnings;
-  }, [userValue]);
-  return useParam({
-    userValue,
-    setUserValue,
-    defaults,
-    // defaults for a refsParam always contains id of tree objects, graphic Id can't be here.
-    isChanged
-  }, undefined, {
-    setValidator,
-    validator
-  });
-}
-
-const pickGraphicId = itemData => itemData.graphicId;
-const pickObjId = itemData => itemData.object.id;
-const pickOwnerId = itemData => itemData.container.ownerId;
-const pickGrOrObjId = itemData => itemData.graphicId || itemData.object.id;
+  }
 
-const isGeometry = (tree, objId) => {
-  const obj = tree[objId];
+  if (item.scope === TreeObjScope) {
+    const objectId = item.data.object.id; // Assume this is only used in part mode...
 
-  if (!obj) {
-    // If there is no corresponding object in tree, the BuerliScope (graphic) item should be restored.
-    return true;
-  } else {
-    // If obj isn't one of next classes, the TreeObjScope item should be resstored.
-    return ccUtils.base.isA(obj.class, CCClasses.CCSolid) || ccUtils.base.isA(obj.class, CCClasses.CCBrepReference);
+    const prodRefId = getDrawing(drawingId).structure.currentProduct;
+    return createInfo({
+      objectId,
+      prodRefId
+    });
   }
+
+  return null;
 };
 const RefEditor = ({
   children,
@@ -2760,6 +2651,10 @@ const RefEditor = ({
     }
   }, // TODO: there is dependency array, but customSelect will be used in Selection once on selector creating.
   [drawingId, selectorsOrder, setParamRef]);
+  const onHover = React__default.useCallback(item => {
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(getInteractionInfo(drawingId, item));
+  }, [drawingId]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SelectionRestorer, {
     drawingId: drawingId,
     refId: refId,
@@ -2774,7 +2669,8 @@ const RefEditor = ({
     onCreated: setSelectorId,
     maxLen: 1,
     customSelect: customSetter,
-    customUnSelect: customSetter
+    customUnSelect: customSetter,
+    onHover: onHover
   }), children));
 };
 const GrItemRestorer = ({
@@ -3022,6 +2918,10 @@ const RefsEditor = ({
     return () => setUserValue(defaults);
   }, [setUserValue, defaults]);
   const modes = useModes(drawingId, sketchLines, setRefsFromItems, selectorsOrder);
+  const onHover = React__default.useCallback(item => {
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(getInteractionInfo(drawingId, item));
+  }, [drawingId]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SelectionRestorer, {
     drawingId: drawingId,
     refIds: userValue,
@@ -3035,7 +2935,8 @@ const RefsEditor = ({
     filter: filter,
     onCreated: setSelectorId,
     maxLen: maxRefLen,
-    modes: modes
+    modes: modes,
+    onHover: onHover
   }), children));
 };
 
@@ -3091,6 +2992,138 @@ const SelectionRestorer = ({
   return null;
 };
 
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Implies the following data structure:
+ * data: {
+ *   matePath: ObjectID[],
+ *   csys: IStructureObject,
+ *   flip: FlipType,
+ *   reoriented: ReorientedType,
+ * }
+ */
+
+const MateScope = 'HLConstraintScope';
+const createMateItem = (matePath, csys, flip, reoriented) => {
+  return {
+    id: `Mate|${matePath.toString()}|${csys.id}|(${flip},${reoriented})`,
+    scope: MateScope,
+    data: {
+      matePath,
+      csys,
+      flip,
+      reoriented
+    },
+    label: 'MATE'
+  };
+};
+
+function useIsHovered(drawingId, matePath, object) {
+  const hoveredItem = useDrawing(drawingId, d => {
+    const activeId = d.selection.active;
+
+    if (!activeId) {
+      return undefined;
+    }
+
+    return d.selection.refs[activeId].hoveredItem;
+  });
+  if (!hoveredItem) return false;
+  return createMateItem(matePath, object, FlipType.FLIP_Z, ReorientedType.REORIENTED_0).id === hoveredItem.id;
+}
+
+function useHover(drawingId, matePath, objectId) {
+  const onPointerOver = React__default.useCallback(e => {
+    const selApi = getDrawing(drawingId).api.selection;
+    const object = getDrawing(drawingId).structure.tree[objectId];
+    const item = createMateItem(matePath, object, FlipType.FLIP_Z, ReorientedType.REORIENTED_0);
+    selApi.setHovered(item);
+  }, [drawingId, objectId, matePath]);
+  const onPointerOut = React__default.useCallback(e => {
+    const selApi = getDrawing(drawingId).api.selection;
+    selApi.setHovered(null);
+  }, [drawingId]);
+  return {
+    onPointerOut,
+    onPointerOver
+  };
+}
+
+function useSelect(drawingId, matePath, csys) {
+  const selApi = getDrawing(drawingId).api.selection;
+  const onClick = React__default.useCallback(e => {
+    const item = createMateItem(matePath, csys, FlipType.FLIP_Z, ReorientedType.REORIENTED_0);
+    selApi.isItemSelected(item) ? selApi.unselect(item) : selApi.select(item);
+    e.stopPropagation();
+  }, [selApi, matePath, csys]);
+  return {
+    onClick
+  };
+} // Returns true if object in tree is currently selected in active selection.
+
+
+function useIsSelected(drawingId, matePath, csys) {
+  // Re-render if selectedItems is changed
+  const selectedItems = useDrawing(drawingId, d => {
+    const activeId = d.selection.active;
+
+    if (!activeId) {
+      return undefined;
+    }
+
+    return d.selection.refs[activeId].items;
+  });
+
+  if (!selectedItems) {
+    return false;
+  }
+
+  const selApi = getDrawing(drawingId).api.selection;
+  return selApi.isItemSelected(createMateItem(matePath, csys, FlipType.FLIP_Z, ReorientedType.REORIENTED_0));
+}
+function useMateSelection(drawingId, matePath, csysId) {
+  const csys = useDrawing(drawingId, drawing => drawing.structure.tree[csysId]);
+  const hHandlers = useHover(drawingId, matePath, csys.id);
+  const sHandlers = useSelect(drawingId, matePath, csys);
+  const isSelected = useIsSelected(drawingId, matePath, csys);
+  const isHovered = useIsHovered(drawingId, matePath, csys);
+  const activeSelId = useDrawing(drawingId, drawing => drawing.selection.active);
+  const selection = activeSelId ? getDrawing(drawingId).selection.refs[activeSelId] : undefined;
+  const isSelectable = Boolean(selection == null ? void 0 : selection.isSelectable(MateScope, {
+    matePath,
+    csys
+  }));
+  const handlers = React__default.useMemo(() => {
+    if (isSelectable) {
+      return _objectSpread$i(_objectSpread$i({}, hHandlers), sHandlers);
+    }
+
+    return {};
+  }, [isSelectable, hHandlers, sHandlers]);
+  return React__default.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,
+      handlers
+    };
+  }, [isHovered, isSelected, isSelectable, handlers]);
+}
+
+const ccPointFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCPoint;
+const ccLineFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCLine;
+const ccArcFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCArc;
+const ccCircleFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCCircle;
+const axisFilter = (scope, data) => scope === TreeObjScope && (data.object.class === CCClasses.CCLine || data.object.class === CCClasses.CCPoint || data.object.class === CCClasses.CCWorkAxis || data.object.class === CCClasses.CCWorkPoint) || scope === BuerliScope && (data === GraphicType.LINE || data === GraphicType.EDGE || data === GraphicType.POINT);
+const workPointFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkPoint;
+const workPlaneFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkPlane;
+const workAxisFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkAxis;
+const csysFilter = (scope, data) => scope === TreeObjScope && data.object.class === CCClasses.CCWorkCoordSystem;
+const mateFilter = (scope, data) => scope === MateScope && data.csys.class === CCClasses.CCWorkCoordSystem;
+
 const MateEditor = ({
   param,
   drawingId,
@@ -3171,6 +3204,16 @@ const MateEditor = ({
     }
   }, // TODO: there is dependency array, but customSelect will be used in Selection once on selector creating.
   [drawingId, selectorsOrder, setMateParam]);
+  const onHover = React__default.useCallback(item => {
+    const prodRefId = getDrawing(drawingId).structure.currentProduct;
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(item ? {
+      objectId: item.data.csys.id,
+      prodRefId,
+      userData: item.data,
+      uniqueIdent: [item.data.csys.id, ...item.data.matePath].toString()
+    } : null);
+  }, [drawingId]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MateRestorer, {
     drawingId: drawingId,
     matePath: matePath,
@@ -3188,7 +3231,8 @@ const MateEditor = ({
     onCreated: setSelectorId,
     maxLen: 1,
     customSelect: customSetter,
-    customUnSelect: customSetter
+    customUnSelect: customSetter,
+    onHover: onHover
   }), /*#__PURE__*/React__default.createElement(MateFlip, {
     flipState: flipState,
     setFlipState: setFlip,
@@ -5519,12 +5563,17 @@ const RootImpl$g = ({
   const filter = React__default.useCallback((scope, data) => {
     return scope === BuerliScope && !Excluded.includes(data);
   }, []);
+  const onHover = React__default.useCallback(item => {
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(getInteractionInfo(drawingId, item));
+  }, [drawingId]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Wrapper, {
     caption: "Items"
   }, /*#__PURE__*/React__default.createElement(Selection, {
     drawingId: drawingId,
     onCreated: setSelectorId,
-    filter: filter
+    filter: filter,
+    onHover: onHover
   })), /*#__PURE__*/React__default.createElement(Output, {
     drawingId: drawingId,
     pluginId: pluginId,
@@ -5599,7 +5648,7 @@ const Point$2 = ({
     attach: "material",
     color: color,
     opacity: opacity,
-    transparent: true
+    transparent: opacity < 1
   }));
 };
 const Arrow = ({
@@ -5620,7 +5669,9 @@ const Arrow = ({
   return /*#__PURE__*/React__default.createElement("group", _extends({
     position: position.clone(),
     quaternion: new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.clone().normalize())
-  }, handlers), /*#__PURE__*/React__default.createElement("mesh", {
+  }, handlers, {
+    userData: userData
+  }), /*#__PURE__*/React__default.createElement("mesh", {
     position: new THREE.Vector3(0, cylinderLength / 2.0, 0),
     renderOrder: 500,
     userData: userData
@@ -5643,7 +5694,7 @@ const Arrow = ({
     attach: "material",
     color: color,
     opacity: opacity,
-    transparent: true
+    transparent: opacity < 1
   })));
 };
 const OriginPoint = ({
@@ -5697,7 +5748,8 @@ const Csys = ({
   const ref = useScale$1(position.clone(), sf => [2 * sf, 2 * sf, 2 * sf]);
   return /*#__PURE__*/React__default.createElement("group", _extends({
     matrix: matrix,
-    matrixAutoUpdate: false
+    matrixAutoUpdate: false,
+    userData: userData
   }, handlers), /*#__PURE__*/React__default.createElement("group", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement(OriginPoint, {
@@ -5727,7 +5779,7 @@ const Csys = ({
 };
 const SelectedCsys = ({
   matrix,
-  opacity,
+  opacity = 1.0,
   handlers,
   color,
   userData
@@ -6769,7 +6821,7 @@ const createArcGeometry = (radialSegments, tubularSegments, instanceLimit) => {
   return geometry;
 };
 
-const vertexCode = `
+const vertexCode$2 = `
   attribute float radius;
   attribute float tubeRadius;
   attribute float angularLength;
@@ -6789,7 +6841,7 @@ const vertexCode = `
     vColor = vec4(instanceColor, 1);
   }
 `;
-const fragmentCode = `
+const fragmentCode$3 = `
   varying vec4 vColor;
   
   void main() {
@@ -6800,8 +6852,8 @@ const fragmentCode = `
 `;
 const createArcMaterial = () => {
   const material = new THREE.ShaderMaterial({
-    vertexShader: vertexCode,
-    fragmentShader: fragmentCode,
+    vertexShader: vertexCode$2,
+    fragmentShader: fragmentCode$3,
     side: THREE.DoubleSide
   });
   return material;
@@ -10074,7 +10126,7 @@ const useGeomParams = objId => {
   } = React__default.useContext(ViewContext);
   const lSelected = useSketchState(drawingId, pluginId, state => state.selected.indexOf(objId) !== -1); // gSelected - true if object is selected in a global selection
 
-  const gSelected = useIsSelected(drawingId, objId);
+  const gSelected = useIsSelected$1(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);
@@ -10242,7 +10294,7 @@ const useColor = (objId, gHovered) => {
 
   const lSelected = useSketchState(drawingId, pluginId, state => state.selected.indexOf(objId) !== -1); // Globally selected by some of selection elements.
 
-  const gSelected = useIsSelected(drawingId, objId);
+  const gSelected = useIsSelected$1(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);
@@ -10265,9 +10317,20 @@ const useColor = (objId, gHovered) => {
   return color;
 };
 const useUserData = objId => {
-  return React__default.useMemo(() => ({
-    objId
-  }), [objId]);
+  const {
+    drawingId,
+    isActive
+  } = React__default.useContext(ViewContext);
+  return React__default.useMemo(() => {
+    const tree = getDrawing(drawingId).structure.tree;
+    const onHUD = !isActive || is2DConstraint(tree[objId]);
+    return onHUD ? {
+      objId,
+      onHUD
+    } : {
+      objId
+    };
+  }, [drawingId, objId, isActive]);
 }; // Fix for interaction until drei support undefined as pointer handlers
 
 const defaultHandlers = {
@@ -10587,7 +10650,7 @@ const Line = ({
 
     if (dist < lineCoef * sketchScale) {
       intersects.push({
-        distance: dist,
+        distance: raycaster.ray.origin.distanceTo(pointOnRay),
         point: pointOnRay,
         face: null,
         object: this
@@ -10616,6 +10679,7 @@ const Line = ({
   }));
 };
 
+const closestPos = new THREE.Vector3();
 const pointPos = new THREE.Vector3();
 const pointCoef = 1.3; // Coefficient for increased interaction area
 
@@ -10636,8 +10700,9 @@ const Point = ({
     const sketchScale = getScale(drawingId, pluginId);
 
     if (dist < pointCoef * sketchScale) {
+      raycaster.ray.closestPointToPoint(pointPos, closestPos);
       intersects.push({
-        distance: dist,
+        distance: raycaster.ray.origin.distanceTo(closestPos),
         point: pointPos.clone(),
         face: null,
         object: this
@@ -11999,7 +12064,7 @@ const View$d = ({
   }));
 };
 
-const _excluded$3 = ["handlerName", "sideEffect"];
+const _excluded$4 = ["handlerName", "sideEffect"];
 const RadioGroup = styled(RadioGroupImpl)`
   display: flex !important;
 `;
@@ -12018,7 +12083,7 @@ const HButton = _ref => {
     handlerName,
     sideEffect = () => undefined
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   const {
     drawingId,
@@ -12374,7 +12439,7 @@ const PlaneSelection = ({
   }));
 };
 
-const _excluded$2 = ["items", "children"];
+const _excluded$3 = ["items", "children"];
 
 /**
  * Context menu. By default it's rendered as thee dots "...", when user hovers it the menuitems is shown.
@@ -12392,7 +12457,7 @@ const Menu = _ref => {
     items,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$3);
 
   const onItemClick = React__default.useCallback(e => {
     e.domEvent.stopPropagation();
@@ -13327,6 +13392,34 @@ const Root$e = ({
   }));
 };
 
+const WorkAxisObj = ({
+  drawingId,
+  objectId,
+  color = 0x111111,
+  opacity = 1,
+  userData,
+  handlers
+}) => {
+  var _workAxisObj$members, _workAxisObj$members2;
+
+  const workAxisObj = useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
+  const position = convertToVector(workAxisObj == null ? void 0 : (_workAxisObj$members = workAxisObj.members) == null ? void 0 : _workAxisObj$members.Position);
+  const direction = convertToVector(workAxisObj == null ? void 0 : (_workAxisObj$members2 = workAxisObj.members) == null ? void 0 : _workAxisObj$members2.Direction);
+  const ref = useScale$1(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
+  return /*#__PURE__*/React__default.createElement("group", {
+    ref: ref,
+    position: position
+  }, /*#__PURE__*/React__default.createElement(AxisArrow, {
+    direction: direction,
+    color: color,
+    opacity: opacity,
+    userData: userData,
+    handlers: handlers,
+    width: 0.5,
+    length: 40
+  }));
+};
+
 function getColor(hovered, selected, direction, type) {
   if (hovered) {
     return 0x28d79f;
@@ -13347,30 +13440,28 @@ const ViewImpl$c = ({
   drawingId,
   pluginId
 }) => {
+  var _workAxisObj$members, _workAxisObj$members2;
+
   const {
     objectId = -1
   } = getPlugin(drawingId, pluginId);
   const workAxisObj = useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
-  const position = convertToVector(workAxisObj.members.Position);
-  const direction = convertToVector(workAxisObj.members.Direction);
+  const direction = convertToVector(workAxisObj == null ? void 0 : (_workAxisObj$members = workAxisObj.members) == null ? void 0 : _workAxisObj$members.Direction);
   const {
     isHovered,
     isSelected,
     handlers
   } = useTreeObjSelection(drawingId, objectId);
-  const color = getColor(isHovered, isSelected, direction, workAxisObj.members.Type.value);
-  const ref = useScale$1(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
-  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement("group", {
-    ref: ref,
-    position: position
-  }, /*#__PURE__*/React__default.createElement(AxisArrow, {
-    direction: direction,
+  const color = getColor(isHovered, isSelected, direction, workAxisObj == null ? void 0 : (_workAxisObj$members2 = workAxisObj.members) == null ? void 0 : _workAxisObj$members2.Type.value);
+  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement(WorkAxisObj, {
+    drawingId: drawingId,
+    objectId: objectId,
     color: color,
-    opacity: 1.0,
-    handlers: handlers,
-    width: 0.5,
-    length: 40
-  })));
+    userData: {
+      onHUD: true
+    },
+    handlers: handlers
+  }));
 };
 
 const View$c = ({
@@ -13685,41 +13776,90 @@ const Root$d = ({
   }));
 };
 
-const ViewImpl$b = ({
+const WorkPlaneObj = ({
   drawingId,
-  pluginId
+  objectId,
+  color = 0x34424f,
+  opacity = 1,
+  userData,
+  handlers
 }) => {
   var _workPlaneObj$members2, _workPlaneObj$members3, _workPlaneObj$members4;
 
+  const workPlaneObj = useDrawing(drawingId, drawing => objectId && drawing.structure.tree[objectId]); // It 'probably' is a temporary decision to use 2 front-sided planes with inverted normals; This is needed for Outlines, which currently doesn't respect THREE.DoubleSide
+
   const {
-    objectId = -1
-  } = getPlugin(drawingId, pluginId);
-  const workPlaneObj = useDrawing(drawingId, drawing => objectId && drawing.structure.tree[objectId]);
-  const quaternion = React__default.useMemo(() => {
+    quaternion,
+    quaternionInv
+  } = React__default.useMemo(() => {
     var _workPlaneObj$members;
 
-    return new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), convertToVector((_workPlaneObj$members = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members.Normal).normalize());
-  }, [(_workPlaneObj$members2 = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members2.Normal]);
-  const scale = (_workPlaneObj$members3 = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members3.Size.value;
+    const up = new THREE.Vector3(0, 0, 1);
+    const normal = convertToVector(workPlaneObj == null ? void 0 : (_workPlaneObj$members = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members.Normal).normalize();
+    const normalInv = normal.clone().negate();
+    return {
+      quaternion: new THREE.Quaternion().setFromUnitVectors(up, normal),
+      quaternionInv: new THREE.Quaternion().setFromUnitVectors(up, normalInv)
+    };
+  }, [workPlaneObj == null ? void 0 : (_workPlaneObj$members2 = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members2.Normal]);
+  const position = convertToVector(workPlaneObj == null ? void 0 : (_workPlaneObj$members3 = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members3.curPosition);
+  const scale = workPlaneObj == null ? void 0 : (_workPlaneObj$members4 = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members4.Size.value;
+  const calScale = React__default.useCallback(sf => {
+    // 1.2 = (kAxis * axisLength) / (planeDefScale * planeBase) = (3 * 40) / (200 * 0.5)
+    const scale_ = 1.2 * sf * scale;
+    return [scale_, scale_, scale_];
+  }, [scale]);
+  const ref = useScale$1(position.clone(), calScale);
+  const refInv = useScale$1(position.clone(), calScale);
+  return /*#__PURE__*/React__default.createElement("group", null, /*#__PURE__*/React__default.createElement("mesh", _extends({
+    ref: ref,
+    position: position,
+    quaternion: quaternion,
+    userData: userData
+  }, handlers), /*#__PURE__*/React__default.createElement("meshBasicMaterial", {
+    color: color,
+    side: THREE.FrontSide,
+    opacity: opacity,
+    transparent: opacity < 1,
+    depthWrite: false
+  }), /*#__PURE__*/React__default.createElement("planeGeometry", {
+    args: [1, 1]
+  })), /*#__PURE__*/React__default.createElement("mesh", _extends({
+    ref: refInv,
+    position: position,
+    quaternion: quaternionInv,
+    userData: userData
+  }, handlers), /*#__PURE__*/React__default.createElement("meshBasicMaterial", {
+    color: color,
+    side: THREE.FrontSide,
+    opacity: opacity,
+    transparent: opacity < 1,
+    depthWrite: false
+  }), /*#__PURE__*/React__default.createElement("planeGeometry", {
+    args: [1, 1]
+  })));
+};
+
+const ViewImpl$b = ({
+  drawingId,
+  pluginId
+}) => {
+  const {
+    objectId = -1
+  } = getPlugin(drawingId, pluginId);
   const {
     isHovered,
     isSelected,
     handlers
   } = useTreeObjSelection(drawingId, objectId);
   const color = isHovered ? 0x18b77f : isSelected ? 0xa70b0b : 0x34424f;
-  return /*#__PURE__*/React__default.createElement("mesh", _extends({
-    position: convertToVector((_workPlaneObj$members4 = workPlaneObj.members) == null ? void 0 : _workPlaneObj$members4.curPosition),
-    quaternion: quaternion,
-    scale: scale
-  }, handlers), /*#__PURE__*/React__default.createElement("meshBasicMaterial", {
+  return /*#__PURE__*/React__default.createElement(WorkPlaneObj, {
+    drawingId: drawingId,
+    objectId: objectId,
     color: color,
-    side: THREE.DoubleSide,
     opacity: 0.5,
-    transparent: true,
-    depthWrite: false
-  }), /*#__PURE__*/React__default.createElement("planeGeometry", {
-    args: [1, 1]
-  }));
+    handlers: handlers
+  });
 };
 
 const View$b = ({
@@ -13874,6 +14014,30 @@ const Root$c = ({
   }));
 };
 
+const WorkPointObj = ({
+  drawingId,
+  objectId,
+  color = 0x111111,
+  opacity = 1,
+  userData,
+  handlers
+}) => {
+  var _workPointObj$members;
+
+  const workPointObj = useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
+  const position = convertToVector(workPointObj == null ? void 0 : (_workPointObj$members = workPointObj.members) == null ? void 0 : _workPointObj$members.Position);
+  const ref = useScale$1(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
+  return /*#__PURE__*/React__default.createElement("group", {
+    ref: ref,
+    position: position
+  }, /*#__PURE__*/React__default.createElement(OriginPoint, {
+    color: color,
+    opacity: opacity,
+    userData: userData,
+    handlers: handlers
+  }));
+};
+
 const ViewImpl$a = ({
   drawingId,
   pluginId
@@ -13881,22 +14045,21 @@ const ViewImpl$a = ({
   const {
     objectId = -1
   } = getPlugin(drawingId, pluginId);
-  const workPointObj = useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
-  const position = convertToVector(workPointObj.members.Position);
   const {
     isHovered,
     isSelected,
     handlers
   } = useTreeObjSelection(drawingId, objectId);
   const color = isHovered ? 0x28d79f : isSelected ? 0xa70b0b : 0x111111;
-  const ref = useScale$1(position.clone(), sf => [3 * sf, 3 * sf, 3 * sf]);
-  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement("group", {
-    ref: ref,
-    position: position
-  }, /*#__PURE__*/React__default.createElement(OriginPoint, {
+  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement(WorkPointObj, {
+    drawingId: drawingId,
+    objectId: objectId,
     color: color,
+    userData: {
+      onHUD: true
+    },
     handlers: handlers
-  })));
+  }));
 };
 
 const View$a = ({
@@ -14378,6 +14541,37 @@ const Root$b = ({
   }));
 };
 
+const WorkCoordSystemObj = ({
+  drawingId,
+  objectId,
+  color,
+  opacity = 1,
+  userData,
+  handlers
+}) => {
+  const coordSys = useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
+  const matrix = React__default.useMemo(() => {
+    var _coordSys$children, _coordSys$members;
+
+    const tree = getDrawing(drawingId).structure.tree;
+    const children = (coordSys == null ? void 0 : (_coordSys$children = coordSys.children) == null ? void 0 : _coordSys$children.map(id => tree[id])) || [];
+    const pos = convertToVector(coordSys == null ? void 0 : (_coordSys$members = coordSys.members) == null ? void 0 : _coordSys$members.Position);
+    const [xAxis, yAxis, zAxis] = ['xAxis', 'yAxis', 'zAxis'].map(name => children.find(child => child.name === name)).map(axis => {
+      var _axis$members;
+
+      return convertToVector(axis == null ? void 0 : (_axis$members = axis.members) == null ? void 0 : _axis$members.Direction);
+    });
+    return new THREE.Matrix4().makeBasis(xAxis, yAxis, zAxis).setPosition(pos);
+  }, [drawingId, coordSys]);
+  return /*#__PURE__*/React__default.createElement(Csys, {
+    matrix: matrix,
+    color: color,
+    opacity: opacity,
+    userData: userData,
+    handlers: handlers
+  });
+};
+
 const tolerance = 1e-6; // Calculates a transformation matrix
 // xDir and yDir are NOT orthogonal in general case, thus the y-axis is calculated as a series of cross products
 
@@ -14412,20 +14606,6 @@ function ViewImpl$9({
     objectId
   } = usePlugin(drawingId, pluginId, pluginState => pluginState);
   const isActive = useDrawing(drawingId, drawing => drawing.plugin.active.feature === pluginId);
-  const coordSys = useDrawing(drawingId, drawing => drawing.structure.tree[objectId]);
-  const matrix = React__default.useMemo(() => {
-    var _coordSys$children, _coordSys$members;
-
-    const tree = getDrawing(drawingId).structure.tree;
-    const children = ((_coordSys$children = coordSys.children) == null ? void 0 : _coordSys$children.map(id => tree[id])) || [];
-    const pos = convertToVector((_coordSys$members = coordSys.members) == null ? void 0 : _coordSys$members.Position);
-    const [xAxis, yAxis, zAxis] = ['xAxis', 'yAxis', 'zAxis'].map(name => children.find(child => child.name === name)).map(axis => {
-      var _axis$members;
-
-      return convertToVector(axis == null ? void 0 : (_axis$members = axis.members) == null ? void 0 : _axis$members.Direction);
-    });
-    return new THREE.Matrix4().makeBasis(xAxis, yAxis, zAxis).setPosition(pos);
-  }, [drawingId, coordSys]);
   const {
     originPos,
     xDir,
@@ -14448,11 +14628,14 @@ function ViewImpl$9({
   // undefined means default color which defined in Csys component.
 
   const color = isHovered ? 0x28d79f : isSelected ? 0xa70b0b : undefined;
-  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement("group", null, /*#__PURE__*/React__default.createElement(Csys, {
-    matrix: matrix,
-    opacity: 1,
-    handlers: handlers,
-    color: color
+  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement("group", null, /*#__PURE__*/React__default.createElement(WorkCoordSystemObj, {
+    drawingId: drawingId,
+    objectId: objectId,
+    color: color,
+    userData: {
+      onHUD: true
+    },
+    handlers: handlers
   }), isActive && /*#__PURE__*/React__default.createElement(Csys, {
     matrix: previewMatrix,
     opacity: 0.5,
@@ -15493,9 +15676,9 @@ const MatePathTransform = ({
 }) => {
   const refId = matePath[currentDepth];
   const csys = useDrawing(drawingId, drawing => {
-    var _drawing$structure$tr7;
+    var _drawing$structure$tr;
 
-    return (_drawing$structure$tr7 = drawing.structure.tree[refId]) == null ? void 0 : _drawing$structure$tr7.coordinateSystem;
+    return (_drawing$structure$tr = drawing.structure.tree[refId]) == null ? void 0 : _drawing$structure$tr.coordinateSystem;
   });
   const matrix_ = React__default.useMemo(() => {
     if (!csys) {
@@ -15691,7 +15874,8 @@ const CSysDisplayImpl = ({
         csysId,
         matePath,
         flip: FlipType.FLIP_Z,
-        reoriented: ReorientedType.REORIENTED_0
+        reoriented: ReorientedType.REORIENTED_0,
+        onHUD: true
       };
 
       if (!isCSysUnique(csysUserData, hoveredCSysIds_)) {
@@ -15754,7 +15938,8 @@ const CSysDisplayImpl = ({
         flip: item.data.flip,
         reoriented: item.data.reoriented,
         isSelected: true,
-        isActive: activeSelItems.findIndex(item_ => item_.id === item.id) !== -1
+        isActive: activeSelItems.findIndex(item_ => item_.id === item.id) !== -1,
+        onHUD: true
       });
     });
     const ids = hoveredOnly ? hoveredProductIds : activeProducts;
@@ -15785,7 +15970,8 @@ const CSysDisplayImpl = ({
         }, csysUDataArray_)) {
           csysUDataArray_.push({
             csysId,
-            matePath
+            matePath,
+            onHUD: true
           });
         }
       });
@@ -18351,18 +18537,24 @@ const mateNames$1 = ['firstRefMate', 'secondRefMate'];
 const getCSysKey = uData => uData.csysId.toString() + ', ' + uData.matePath.toString();
 
 const HoveredConstraintDisplay = ({
-  drawingId,
-  hoveredId
+  drawingId
 }) => {
+  const hoveredId = useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+
+    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId;
+  }) || NOCCID;
+  const hoveredObj = useDrawing(drawingId, d => d.structure.tree[hoveredId]);
+  const hoveredConstrId = ccUtils.base.isA((hoveredObj == null ? void 0 : hoveredObj.class) || '', CCClasses.CCHLConstraint) ? hoveredId : null;
   const csysUDataArray = React__default.useMemo(() => {
     var _getDrawing, _getDrawing$structure;
 
-    if (!hoveredId) {
+    if (!hoveredConstrId) {
       return [];
     }
 
     const csysUDataArray_ = [];
-    const members = (_getDrawing = getDrawing(drawingId)) == null ? void 0 : (_getDrawing$structure = _getDrawing.structure.tree[hoveredId]) == null ? void 0 : _getDrawing$structure.members;
+    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]]) {
       mateNames$1.forEach(mateName => {
@@ -18371,28 +18563,678 @@ const HoveredConstraintDisplay = ({
         if (member && member.members.length > 2) {
           var _member$members$, _member$members$2;
 
-          const matePath = member.members[0].members.map(memb => memb.value);
-          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
-          });
-        }
-      });
-    }
+          const matePath = member.members[0].members.map(memb => memb.value);
+          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
+          });
+        }
+      });
+    }
+
+    return csysUDataArray_;
+  }, [drawingId, hoveredConstrId]);
+  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement("group", null, csysUDataArray.map(userData => /*#__PURE__*/React__default.createElement(CSysWrapper, {
+    key: getCSysKey(userData),
+    drawingId: drawingId,
+    userData: userData
+  }))));
+};
+
+const SelectedMateObj = ({
+  drawingId,
+  csysId,
+  matePath,
+  flip,
+  color,
+  reoriented,
+  opacity
+}) => {
+  const currentNode = useDrawing(drawingId, drawing => drawing.structure.currentNode);
+  const matrix = useCsysMatrix(drawingId, csysId, flip, reoriented);
+  return /*#__PURE__*/React__default.createElement(GlobalTransform, {
+    drawingId: drawingId,
+    objectId: currentNode
+  }, /*#__PURE__*/React__default.createElement(MatePathTransform, {
+    drawingId: drawingId,
+    matePath: matePath
+  }, /*#__PURE__*/React__default.createElement(SelectedCsys, {
+    matrix: matrix,
+    color: color,
+    opacity: opacity
+  })));
+};
+
+const vertexCode$1 = `
+  uniform mat4 modelViewMatrix;
+  uniform mat4 projectionMatrix;
+
+  attribute vec3 position;
+
+  void main()	{
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const fragmentCode$2 = `
+  uniform lowp vec3 idColor;
+  
+  void main() {
+    gl_FragColor.rgb = idColor;
+  }
+`;
+class IDPass extends Pass {
+  constructor(scene, camera) {
+    super('IDPass', scene, camera);
+
+    _defineProperty(this, "material", void 0);
+
+    _defineProperty(this, "oldMaterials", void 0);
+
+    _defineProperty(this, "selection", void 0);
+
+    _defineProperty(this, "id", void 0);
+
+    _defineProperty(this, "channel", void 0);
+
+    this.needsSwap = false;
+    this.material = new THREE.RawShaderMaterial({
+      uniforms: {
+        idColor: new THREE.Uniform(new THREE.Color(0xff0000))
+      },
+      depthWrite: false,
+      depthTest: false,
+      vertexShader: vertexCode$1,
+      fragmentShader: fragmentCode$2
+    });
+    this.oldMaterials = new Map();
+    this.selection = new Selection();
+    this.id = 0;
+    this.channel = 0;
+  }
+
+  render(renderer, inputBuffer) {
+    const scene = this.scene;
+    const camera = this.camera;
+    const mask = camera.layers.mask;
+    const background = scene.background;
+    const shadowMapAutoUpdate = renderer.shadowMap.autoUpdate;
+    renderer.shadowMap.autoUpdate = false;
+    scene.background = null;
+    const color = [0.0, 0.0, 0.0];
+    color[this.channel] = (this.id + 1) / 255.0;
+    this.material.uniforms.idColor.value = new THREE.Color(...color);
+    this.selection.forEach(mesh_ => {
+      const mesh = mesh_;
+      this.oldMaterials.set(mesh, mesh.material);
+      mesh.material = this.material;
+    });
+    renderer.setRenderTarget(inputBuffer);
+    renderer.render(scene, camera);
+
+    for (const entry of this.oldMaterials) {
+      entry[0].material = entry[1];
+    }
+
+    this.oldMaterials.clear();
+    camera.layers.mask = mask;
+    scene.background = background;
+    renderer.shadowMap.autoUpdate = shadowMapAutoUpdate;
+  }
+
+}
+
+const vertexCode = `
+  uniform vec2 texelSize;
+  
+  varying vec2 vUv0;
+  varying vec2 vUv1;
+  varying vec2 vUv2;
+  varying vec2 vUv3;
+  
+  void main() {
+    vec2 uv = position.xy * 0.5 + 0.5;
+    
+    vUv0 = vec2(uv.x + texelSize.x, uv.y);
+    vUv1 = vec2(uv.x - texelSize.x, uv.y);
+    vUv2 = vec2(uv.x, uv.y + texelSize.y);
+    vUv3 = vec2(uv.x, uv.y - texelSize.y);
+    
+    gl_Position = vec4(position.xy, 1.0, 1.0);
+  }
+`;
+const fragmentCode$1 = `
+  uniform lowp sampler2D inputBuffer;
+  
+  varying vec2 vUv0;
+  varying vec2 vUv1;
+  varying vec2 vUv2;
+  varying vec2 vUv3;
+  
+  void main() {
+    vec3 c0 = texture2D(inputBuffer, vUv0).rgb;
+    vec3 c1 = texture2D(inputBuffer, vUv1).rgb;
+    vec3 c2 = texture2D(inputBuffer, vUv2).rgb;
+    vec3 c3 = texture2D(inputBuffer, vUv3).rgb;
+    
+    if (c0 == c1 && c0 == c2 && c0 == c3) {
+      discard;
+    }
+
+    vec3 maxVec = max(max(c0, c1), max(c2, c3));
+    vec2 kVec = vec2(1.0, 1.0) - step(maxVec.gb, vec2(0.0, 0.0));
+    float k3 = kVec.g;
+    float k2 = (1.0 - k3) * kVec.r;
+    float k1 = (1.0 - k3) * (1.0 - k2);
+
+    gl_FragColor = k1 * vec4(1.0, 0.0, 0.0, 1.0) + k2 * vec4(0.0, 1.0, 0.0, 1.0) + k3 * vec4(0.0, 0.0, 1.0, 1.0);
+  }
+`;
+class OutlineMaterial extends THREE.ShaderMaterial {
+  constructor(texelSize = new THREE.Vector2()) {
+    super({
+      name: "OutlineMaterial",
+      uniforms: {
+        inputBuffer: new THREE.Uniform(null),
+        texelSize: new THREE.Uniform(new THREE.Vector2()),
+        channel: new THREE.Uniform(new THREE.Color(0xff0000))
+      },
+      blending: THREE.NoBlending,
+      depthWrite: false,
+      depthTest: false,
+      vertexShader: vertexCode,
+      fragmentShader: fragmentCode$1
+    });
+    this.toneMapped = false;
+    this.setTexelSize(texelSize.x, texelSize.y);
+    this.uniforms.maskTexture = this.uniforms.inputBuffer;
+  }
+
+  set inputBuffer(value) {
+    this.uniforms.inputBuffer.value = value;
+  }
+
+  setTexelSize(x, y) {
+    this.uniforms.texelSize.value.set(x, y);
+  }
+
+  setSize(width, height) {
+    this.uniforms.texelSize.value.set(1.0 / width, 1.0 / height);
+  }
+
+}
+
+const fragmentCode = `
+  uniform lowp sampler2D edgeTexture;
+  
+  uniform float edgeStrength;
+  uniform vec3 edgeColor1;
+  uniform vec3 edgeColor2;
+  uniform vec3 edgeColor3;
+  
+  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+  	vec3 edge = texture2D(edgeTexture, uv).rgb * edgeStrength;
+
+    vec4 kVec = vec4(1.0, 1.0, 1.0, 1.0) - step(edge.bbgg, edge.rgrb);
+    float k3 = kVec.r * kVec.g;
+    float k2 = (1.0 - k3) * kVec.b * kVec.a;
+    float k1 = (1.0 - k3) * (1.0 - k2);
+    vec3 color = k1 * edgeColor1 + k2 * edgeColor2 + k3 * edgeColor3;
+
+    float alpha = 3.0 * max(max(edge.r, edge.g), edge.b) - 2.0;
+    alpha *= step(0.4, alpha);
+
+  	outputColor = vec4(color, alpha);
+  }
+`;
+class OutlineEffect extends Effect {
+  constructor(scene, camera, {
+    edgeStrength = 1.0,
+    edgeColor1 = 0xffffff,
+    edgeColor2 = 0xffffff,
+    edgeColor3 = 0xffffff,
+    resolutionScale = 1.0,
+    width = Resolution.AUTO_SIZE,
+    height = Resolution.AUTO_SIZE,
+    kernelSize = KernelSize.VERY_SMALL
+  } = {}) {
+    super("OutlineEffect", fragmentCode, {
+      uniforms: new Map([["edgeTexture", new THREE.Uniform(null)], ["edgeStrength", new THREE.Uniform(edgeStrength)], ["edgeColor1", new THREE.Uniform(new THREE.Color(edgeColor1))], ["edgeColor2", new THREE.Uniform(new THREE.Color(edgeColor2))], ["edgeColor3", new THREE.Uniform(new THREE.Color(edgeColor3))]])
+    });
+
+    _defineProperty(this, "scene", void 0);
+
+    _defineProperty(this, "camera", void 0);
+
+    _defineProperty(this, "idRT", void 0);
+
+    _defineProperty(this, "outlineRT", void 0);
+
+    _defineProperty(this, "clearPass", void 0);
+
+    _defineProperty(this, "idPass", void 0);
+
+    _defineProperty(this, "outlinePass", void 0);
+
+    _defineProperty(this, "blurPass", void 0);
+
+    _defineProperty(this, "selections1", void 0);
+
+    _defineProperty(this, "selections2", void 0);
+
+    _defineProperty(this, "selections3", void 0);
+
+    _defineProperty(this, "time", void 0);
+
+    _defineProperty(this, "processSelection", void 0);
+
+    this.blendMode.setBlendFunction(BlendFunction.ALPHA);
+    this.scene = scene;
+    this.camera = camera;
+    this.idRT = new THREE.WebGLRenderTarget(1, 1, {
+      minFilter: THREE.NearestFilter,
+      magFilter: THREE.NearestFilter,
+      depthBuffer: false,
+      stencilBuffer: false
+    });
+    this.idRT.texture.name = "Outline.IDs";
+    this.outlineRT = new THREE.WebGLRenderTarget(1, 1, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      depthBuffer: false,
+      stencilBuffer: false
+    });
+    this.outlineRT.texture.name = "Outline.Edges";
+    const edgeTexture = this.uniforms.get("edgeTexture");
+    edgeTexture.value = this.outlineRT.texture;
+    this.clearPass = new ClearPass();
+    this.clearPass.overrideClearColor = new THREE.Color(0x000000);
+    this.clearPass.overrideClearAlpha = 0;
+    this.idPass = new IDPass(scene, camera);
+    this.outlinePass = new ShaderPass(new OutlineMaterial());
+    const outlineMaterial = this.outlinePass.fullscreenMaterial;
+    outlineMaterial.inputBuffer = this.idRT.texture;
+    this.blurPass = new KawaseBlurPass({
+      resolutionScale,
+      width,
+      height,
+      kernelSize
+    });
+    const resolution = this.blurPass.resolution;
+    resolution.addEventListener("change", e => this.setSize(resolution.baseWidth, resolution.baseHeight));
+    this.time = 0;
+    this.selections1 = [];
+    this.selections2 = [];
+    this.selections3 = [];
+
+    this.processSelection = (renderer, selection, id) => {
+      selection.layer++;
+      this.idPass.id = id;
+      this.idPass.selection = selection;
+      this.idPass.render(renderer, this.idRT);
+      selection.layer--;
+      this.outlinePass.render(renderer, null, this.outlineRT);
+    };
+  }
+
+  set selectionLayer(value) {
+    this.selections1.forEach(selection => {
+      selection.layer = value;
+    });
+    this.selections2.forEach(selection => {
+      selection.layer = value;
+    });
+    this.selections3.forEach(selection => {
+      selection.layer = value;
+    });
+  }
+
+  update(renderer, inputBuffer, deltaTime) {
+    const scene = this.scene;
+    const camera = this.camera;
+    const selections1 = this.selections1;
+    const selections2 = this.selections2;
+    const selections3 = this.selections3;
+    const background = scene.background;
+    const mask = camera.layers.mask;
+
+    if (selections1.length > 0 || selections2.length > 0 || selections3.length > 0) {
+      var _selections1$, _selections2$, _selections3$;
+
+      scene.background = null;
+      this.time += deltaTime;
+      const layer = ((_selections1$ = selections1[0]) == null ? void 0 : _selections1$.layer) || ((_selections2$ = selections2[0]) == null ? void 0 : _selections2$.layer) || ((_selections3$ = selections3[0]) == null ? void 0 : _selections3$.layer);
+      camera.layers.set(layer + 1);
+      this.clearPass.render(renderer, this.idRT, null);
+      this.clearPass.render(renderer, this.outlineRT, null);
+      let len = Math.min(this.selections1.length, 255);
+      this.idPass.channel = 0;
+
+      for (let i = 0; i < len; i++) {
+        this.processSelection(renderer, selections1[i], i);
+      }
+
+      len = Math.min(this.selections2.length, 255);
+      this.idPass.channel = 1;
+
+      for (let i = 0; i < len; i++) {
+        this.processSelection(renderer, selections2[i], i);
+      }
+
+      len = Math.min(this.selections3.length, 255);
+      this.idPass.channel = 2;
+
+      for (let i = 0; i < len; i++) {
+        this.processSelection(renderer, selections3[i], i);
+      } // Restore the camera layer mask and the scene background.
+
+
+      camera.layers.mask = mask;
+      scene.background = background;
+
+      if (this.blurPass.enabled) {
+        this.blurPass.render(renderer, this.outlineRT, this.outlineRT);
+      }
+    } else if (this.time > 0) {
+      this.clearPass.render(renderer, this.idRT, null);
+      this.clearPass.render(renderer, this.outlineRT, null);
+      this.time = 0;
+    }
+  }
+
+  setSize(width, height) {
+    this.blurPass.setSize(width, height);
+    this.idRT.setSize(width, height);
+    const resolution = this.blurPass.resolution;
+    resolution.setBaseSize(width, height);
+    const w = resolution.width,
+          h = resolution.height;
+    this.outlineRT.setSize(w, h);
+    const outlineMaterial = this.outlinePass.fullscreenMaterial;
+    outlineMaterial.setSize(w, h);
+  }
+
+  initialize(renderer, alpha, frameBufferType) {
+    // No need for high precision: the blur pass operates on a mask texture.
+    this.blurPass.initialize(renderer, alpha, THREE.UnsignedByteType);
+
+    if (frameBufferType !== undefined) {
+      // These passes ignore the buffer type.
+      this.idPass.initialize(renderer, alpha, frameBufferType);
+      this.outlinePass.initialize(renderer, alpha, frameBufferType);
+    }
+  }
+
+}
+
+const _excluded$2 = ["selections1", "selections2", "selections3", "selectionLayer", "edgeStrength", "edgeColor1", "edgeColor2", "edgeColor3", "width", "height", "kernelSize"];
+const Outline = /*#__PURE__*/React__default.forwardRef(function Outline(_ref, forwardRef) {
+  let {
+    selections1 = [],
+    selections2 = [],
+    selections3 = [],
+    selectionLayer = 10,
+    edgeStrength,
+    edgeColor1,
+    edgeColor2,
+    edgeColor3,
+    width,
+    height,
+    kernelSize
+  } = _ref;
+      _objectWithoutProperties(_ref, _excluded$2);
+
+  const invalidate = useThree(state => state.invalidate);
+  const {
+    scene,
+    camera
+  } = useThree();
+  const effect = React__default.useMemo(() => new OutlineEffect(scene, camera, {
+    edgeStrength,
+    edgeColor1,
+    edgeColor2,
+    edgeColor3,
+    width,
+    height,
+    kernelSize
+  }), [scene, camera, edgeStrength, edgeColor1, edgeColor2, edgeColor3, width, height, kernelSize]);
+  React__default.useEffect(() => {
+    if (selections1) {
+      effect.selections1 = selections1.map(selection => new Selection(selection, selectionLayer));
+      invalidate();
+      return () => {
+        effect.selections1.forEach(selection => selection.clear());
+        effect.selections1 = [];
+        invalidate();
+      };
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [effect, selections1]);
+  React__default.useEffect(() => {
+    if (selections2) {
+      effect.selections2 = selections2.map(selection => new Selection(selection, selectionLayer));
+      invalidate();
+      return () => {
+        effect.selections2.forEach(selection => selection.clear());
+        effect.selections2 = [];
+        invalidate();
+      };
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [effect, selections2]);
+  React__default.useEffect(() => {
+    if (selections3) {
+      effect.selections3 = selections3.map(selection => new Selection(selection, selectionLayer));
+      invalidate();
+      return () => {
+        effect.selections3.forEach(selection => selection.clear());
+        effect.selections3 = [];
+        invalidate();
+      };
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [effect, selections3]);
+  React__default.useEffect(() => {
+    effect.selectionLayer = selectionLayer;
+    invalidate();
+  }, [effect, selectionLayer, invalidate]);
+  return /*#__PURE__*/React__default.createElement("primitive", {
+    ref: forwardRef,
+    object: effect
+  });
+});
+
+const mateNames = ['firstRefMate', 'secondRefMate'];
+const getMateRefIds = (drawingId, constrId) => {
+  var _drawing$structure$tr;
+
+  const drawing = getDrawing(drawingId);
+  const members = (_drawing$structure$tr = drawing.structure.tree[constrId]) == null ? void 0 : _drawing$structure$tr.members;
+  const pRefIds = [];
+
+  if (members && members[mateNames[0]]) {
+    mateNames.forEach(mateName => {
+      var _member$members$;
+
+      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) {
+        pRefIds.push(matePath[matePath.length - 1].value);
+      }
+    });
+  }
+
+  if (pRefIds.length === 0) {
+    return;
+  }
+
+  const curNodeId = drawing.structure.currentNode;
+  const curNode = drawing.structure.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;
+
+    if (pRefIds.indexOf(productRefId) !== -1) {
+      mateRefIds.push(id);
+    }
+  });
+  return mateRefIds;
+};
+
+const SectionHeader = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: '42px',
+      backgroundColor: '#fafafa',
+      color: 'rgba(0, 0, 0, 0.85)',
+      fontWeight: 500,
+      textAlign: 'left',
+      background: '#fafafa',
+      borderBottom: '1px solid #f0f0f0',
+      padding: '8px 8px',
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, children);
+};
+
+const SolverState = ({
+  drawingId
+}) => {
+  const rootId = useDrawing(drawingId, d => d.structure.root);
+  const solverState = useDrawing(drawingId, d => {
+    var _d$structure$tree$roo, _d$structure$tree$roo2, _d$structure$tree$roo3;
+
+    return (_d$structure$tree$roo = d.structure.tree[rootId]) == null ? void 0 : (_d$structure$tree$roo2 = _d$structure$tree$roo.members) == null ? void 0 : (_d$structure$tree$roo3 = _d$structure$tree$roo2.solverState) == null ? void 0 : _d$structure$tree$roo3.value;
+  });
+  const component = solverState === 0 ? /*#__PURE__*/React__default.createElement(CheckCircleTwoTone, {
+    twoToneColor: "#52c41a"
+  }) : /*#__PURE__*/React__default.createElement(CloseCircleTwoTone, {
+    twoToneColor: "#eb2f96"
+  });
+  return solverState === undefined ? null : /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    title: solverState === 0 ? 'Solved' : 'Not Solved'
+  }, component);
+};
+/**
+ * Shows list of 3d constraints which are contained by currentProduct.
+ *
+ * @param drawingId - id of a drawing in which currentProduct will be found.
+ * @returns
+ */
+
+
+const Constraints = ({
+  drawingId
+}) => {
+  const curProdId = useDrawing(drawingId, d => d.structure.currentProduct);
+  const prodChildren = useDrawingArr(drawingId, d => {
+    var _d$structure$tree$cur;
+
+    return (_d$structure$tree$cur = d.structure.tree[curProdId]) == null ? void 0 : _d$structure$tree$cur.children;
+  });
+  const constrSetId = React__default.useMemo(() => {
+    const tree = getDrawing(drawingId).structure.tree;
+    return prodChildren.find(childId => tree[childId].class === CCClasses.CCConstraintSet) || null;
+  }, [prodChildren, drawingId]);
+  const constrSet = useDrawing(drawingId, d => d.structure.tree[constrSetId] || null);
+  const constrIds = React__default.useMemo(() => {
+    return (constrSet == null ? void 0 : constrSet.children) || []; // If there is no any constraint, children doesn't exist in constrSet object
+  }, [constrSet]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(SectionHeader, null, /*#__PURE__*/React__default.createElement(FlexRow, null, /*#__PURE__*/React__default.createElement(Space, null, "Constraints", /*#__PURE__*/React__default.createElement(SolverState, {
+    drawingId: drawingId
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React__default.createElement(List$2, {
+    drawingId: drawingId,
+    constrIds: constrIds
+  })));
+};
+
+const Constraint = ({
+  drawingId,
+  constraintId
+}) => {
+  const hoveredId = useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+
+    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;
+  });
+  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 onDoubleClick = React__default.useCallback(() => {
+    getDrawing(drawingId).api.plugin.setActiveFeature(constraintId);
+  }, [drawingId, constraintId]);
+  const onMouseEnter = React__default.useCallback(() => {
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    const curNodeId = getDrawing(drawingId).structure.currentNode;
+    setHovered(createInfo({
+      objectId: constraintId,
+      prodRefId: curNodeId
+    }));
+  }, [drawingId, constraintId]);
+  const onMouseLeave = React__default.useCallback(() => {
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(null);
+  }, [drawingId]);
+  const nameComponent = rename ? /*#__PURE__*/React__default.createElement(NameEdit, {
+    drawingId: drawingId,
+    objId: constraintId,
+    name: name,
+    setEditName: setRename
+  }) : /*#__PURE__*/React__default.createElement(EntityName, {
+    name: name,
+    underlined: isHovered,
+    strong: isActive
+  });
+  return /*#__PURE__*/React__default.createElement(HoveredDiv, {
+    hovered: isHovered,
+    bordered: true,
+    onDoubleClick: onDoubleClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React__default.createElement(Space, null, nameComponent), /*#__PURE__*/React__default.createElement(Menu, {
+    items: menuItems
+  }));
+}; // TODO: Create external component
+
 
-    return csysUDataArray_;
-  }, [drawingId, hoveredId]);
-  return /*#__PURE__*/React__default.createElement(HUD, null, /*#__PURE__*/React__default.createElement("group", null, csysUDataArray.map(userData => /*#__PURE__*/React__default.createElement(CSysWrapper, {
-    key: getCSysKey(userData),
+const List$2 = ({
+  constrIds,
+  drawingId
+}) => {
+  return /*#__PURE__*/React__default.createElement("div", null, constrIds.map(constrId => /*#__PURE__*/React__default.createElement(Constraint, {
+    key: constrId,
     drawingId: drawingId,
-    userData: userData
-  }))));
+    constraintId: constrId
+  })));
 };
 
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -19544,10 +20386,11 @@ const Feature = ({
   drawingId,
   featureRefId
 }) => {
-  const {
-    hoveredId,
-    onHover
-  } = React__default.useContext(InteractionContext);
+  const hoveredId = useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+
+    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId;
+  });
   const featureId = useDrawing(drawingId, d => {
     var _d$structure$tree$fea2, _d$structure$tree$fea3;
 
@@ -19572,15 +20415,18 @@ const Feature = ({
     }
   }, [disabled, featureId, drawingId]);
   const onMouseEnter = React__default.useCallback(() => {
-    // TODO: What to highlight in features?
-    onHover && onHover({
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    const curNodeId = getDrawing(drawingId).structure.currentNode;
+    const curProdId = getDrawing(drawingId).structure.currentProduct;
+    setHovered(createInfo({
       objectId: featureId,
-      type: 'Feature'
-    });
-  }, [featureId, onHover]);
+      prodRefId: curNodeId || curProdId
+    }));
+  }, [drawingId, featureId]);
   const onMouseLeave = React__default.useCallback(() => {
-    onHover && onHover(null);
-  }, [onHover]);
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(null);
+  }, [drawingId]);
   const nameComponent = rename ? /*#__PURE__*/React__default.createElement(NameEdit, {
     drawingId: drawingId,
     objId: featureId,
@@ -19623,7 +20469,7 @@ const Feature = ({
     hovered: isHovered,
     bordered: true,
     title: String(featureId),
-    onClick: onNameClick,
+    onDoubleClick: onNameClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, /*#__PURE__*/React__default.createElement(Space, {
@@ -19731,7 +20577,7 @@ const Item$1 = ({
   });
 };
 
-const List$2 = ({
+const List$1 = ({
   drawingId
 }) => {
   const curPartId = useDrawing(drawingId, d => d.structure.currentProduct || d.structure.root);
@@ -19771,7 +20617,7 @@ const FeatureList = ({
 }) => {
   return /*#__PURE__*/React__default.createElement(FeatureListValidator, {
     drawingId: drawingId
-  }, /*#__PURE__*/React__default.createElement(List$2, {
+  }, /*#__PURE__*/React__default.createElement(List$1, {
     drawingId: drawingId
   }));
 };
@@ -19865,42 +20711,46 @@ const NodeTitle = ({
 }) => {
   var _reference$members, _reference$members$pr, _reference$members2, _reference$members2$l;
 
-  const {
-    hoveredId,
-    selectedId,
-    onHover,
-    onClick: onClick_
-  } = React__default.useContext(InteractionContext);
+  // Let the selector check if this refId is hovered. In that case only the hovered NodeTitle will be rerendered. If we just listen
+  // to the hovered objectId and check later in the code bode if it equals this refId, all NodeTitle's have to be rerendered.
+  const isHovered = useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+
+    return ((_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.objectId) === refId;
+  });
+  const selected = useDrawing(drawingId, d => d.interaction.selected);
+  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.objectId)) || [];
   const reference = 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;
   const referedObj = useDrawing(drawingId, d => d.structure.tree[referedId]);
   const name = (referedObj == null ? void 0 : referedObj.name) || localPath;
-  const isHovered = hoveredId === refId;
-  const isSelected = selectedId === refId;
-  const isHighlighted = isHovered || isSelected || (selectedId ? hasSelectedChild(drawingId, refId, selectedId) : false);
+  const isSelected = (selectedIds == null ? void 0 : selectedIds.indexOf(refId)) !== -1;
+  const isHighlighted = isHovered || isSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, refId, selectedIds[0]) : false);
   const [rename, setRename] = React__default.useState(false);
   const menuItems = useMenuItems$1(drawingId, refId, setRename);
-  const onClick = React__default.useCallback(() => {
-    onClick_ && onClick_(isSelected ? null : {
+  const onClick = React__default.useCallback(e => {
+    const select = getDrawing(drawingId).api.interaction.select;
+    const multi = e.shiftKey;
+    select(createInfo({
       objectId: refId,
-      highlightedIds: [refId],
-      type: 'AssemblyNode'
-    });
-  }, [isSelected, refId, onClick_]);
+      prodRefId: refId
+    }), multi);
+  }, [drawingId, refId]);
   const onDoubleClick = React__default.useCallback(() => {
     getCADState().api.assemblyTree.startProdEditing(drawingId, refId);
   }, [drawingId, refId]);
   const onMouseEnter = React__default.useCallback(() => {
-    onHover && onHover({
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(createInfo({
       objectId: refId,
-      highlightedIds: [refId],
-      type: 'AssemblyNode'
-    });
-  }, [refId, onHover]);
+      prodRefId: refId
+    }));
+  }, [drawingId, refId]);
   const onMouseLeave = React__default.useCallback(() => {
-    onHover && onHover(null);
-  }, [onHover]);
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(null);
+  }, [drawingId]);
   const nameComponent = rename ? /*#__PURE__*/React__default.createElement(NameEdit, {
     drawingId: drawingId,
     objId: referedId,
@@ -19977,25 +20827,6 @@ const AssemblyNode = ({
   return null;
 };
 
-const SectionHeader = ({
-  children
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      height: '42px',
-      backgroundColor: '#fafafa',
-      color: 'rgba(0, 0, 0, 0.85)',
-      fontWeight: 500,
-      textAlign: 'left',
-      background: '#fafafa',
-      borderBottom: '1px solid #f0f0f0',
-      padding: '8px 8px',
-      display: 'flex',
-      justifyContent: 'space-between'
-    }
-  }, children);
-};
-
 const Skeleton = styled(SkeletonImpl)`
   .ant-skeleton-content {
     .ant-skeleton-paragraph {
@@ -20471,12 +21302,13 @@ const Solid = ({
   drawingId,
   solidId
 }) => {
-  const {
-    hoveredId,
-    selectedId,
-    onHover,
-    onClick: onClick_
-  } = React__default.useContext(InteractionContext);
+  const hoveredId = useDrawing(drawingId, d => {
+    var _d$interaction$hovere;
+
+    return (_d$interaction$hovere = d.interaction.hovered) == null ? void 0 : _d$interaction$hovere.graphicId;
+  });
+  const selected = useDrawing(drawingId, d => d.interaction.selected);
+  const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.graphicId)) || [];
   const solidOwner = useDrawingCCId(drawingId, d => {
     var _d$graphic$containers;
 
@@ -20484,26 +21316,44 @@ const Solid = ({
   });
   const ccSolid = useDrawing(drawingId, d => d.structure.tree[solidOwner]);
   const isHovered = hoveredId === solidId;
-  const isSelected = selectedId === solidId;
+  const isSelected = (selectedIds == null ? void 0 : selectedIds.indexOf(solidId)) !== -1;
   const isHighlighted = isHovered || isSelected;
   const [rename, setRename] = React__default.useState(false);
-  const onClick = React__default.useCallback(() => {
-    onClick_ && onClick_(isSelected ? null : {
-      objectId: solidId,
-      highlightedIds: [solidId],
-      type: 'Solid'
-    });
-  }, [isSelected, solidId, onClick_]);
+  const onClick = React__default.useCallback(e => {
+    var _getDrawing$structure;
+
+    const select = getDrawing(drawingId).api.interaction.select;
+    const multi = e.shiftKey;
+    const objectId = getDrawing(drawingId).geometry.cache[solidId].container.ownerId;
+    const curNodeId = getDrawing(drawingId).structure.currentNode;
+    const curProdId = getDrawing(drawingId).structure.currentProduct;
+    const isPart = ccUtils.base.isA(((_getDrawing$structure = getDrawing(drawingId).structure.tree[curProdId]) == null ? void 0 : _getDrawing$structure.class) || '', CCClasses.CCPart);
+    select(createInfo({
+      objectId,
+      graphicId: solidId,
+      containerId: solidId,
+      prodRefId: isPart ? curProdId : curNodeId
+    }), multi);
+  }, [drawingId, solidId]);
   const onMouseEnter = React__default.useCallback(() => {
-    onHover && onHover({
-      objectId: solidId,
-      highlightedIds: [solidId],
-      type: 'Solid'
-    });
-  }, [solidId, onHover]);
+    var _getDrawing$structure2;
+
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    const objectId = getDrawing(drawingId).geometry.cache[solidId].container.ownerId;
+    const curNodeId = getDrawing(drawingId).structure.currentNode;
+    const curProdId = getDrawing(drawingId).structure.currentProduct;
+    const isPart = ccUtils.base.isA(((_getDrawing$structure2 = getDrawing(drawingId).structure.tree[curProdId]) == null ? void 0 : _getDrawing$structure2.class) || '', CCClasses.CCPart);
+    setHovered(createInfo({
+      objectId,
+      graphicId: solidId,
+      containerId: solidId,
+      prodRefId: isPart ? curProdId : curNodeId
+    }));
+  }, [drawingId, solidId]);
   const onMouseLeave = React__default.useCallback(() => {
-    onHover && onHover(null);
-  }, [onHover]);
+    const setHovered = getDrawing(drawingId).api.interaction.setHovered;
+    setHovered(null);
+  }, [drawingId]);
   const menuItems = useMenuItems(setRename);
   return /*#__PURE__*/React__default.createElement(HoveredDiv, {
     hovered: isHighlighted,
@@ -20532,7 +21382,7 @@ const Solid = ({
 }; // TODO: Create external component
 
 
-const List$1 = ({
+const List = ({
   solidsIds,
   drawingId
 }) => {
@@ -20564,7 +21414,7 @@ const Solids = ({
     style: {
       overflow: 'auto'
     }
-  }, /*#__PURE__*/React__default.createElement(List$1, {
+  }, /*#__PURE__*/React__default.createElement(List, {
     drawingId: drawingId,
     solidsIds: solidIds
   })));
@@ -21199,8 +22049,6 @@ const ViewPlugButtons = ({
   }));
 };
 
-const InteractionContext = /*#__PURE__*/React__default.createContext({});
-
 const EditDrawing = ({
   drawingId,
   children
@@ -21299,31 +22147,17 @@ const Header = ({
  *
  * @param drawingId - id of an existing drawing.
  * @param Menu - you can pass custom file menu which will be shown at the left top corner.
- * @param hoveredId - id of a currently hovered object.
- * @param selectedId - id of a currently selected object.
- * @param onHover - callback for hovering features / assembly nodes / solids / constraints.
- * @param onClick - callback for clicking on assembly nodes / solids.
  */
 
 
 const Drawing = ({
   drawingId,
   Menu,
-  children,
-  hoveredId,
-  selectedId,
-  onHover,
-  onClick
+  children
 }) => {
   React__default.useEffect(() => {
     return () => getCADState().api.assemblyTree.clearProdStack();
   }, [drawingId]);
-  const contextValue = React__default.useMemo(() => ({
-    hoveredId,
-    selectedId,
-    onHover,
-    onClick
-  }), [hoveredId, selectedId, onHover, onClick]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       height: '100%',
@@ -21338,11 +22172,9 @@ const Drawing = ({
     style: {
       margin: '0'
     }
-  }), /*#__PURE__*/React__default.createElement(InteractionContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React__default.createElement(EditDrawing, {
+  }), /*#__PURE__*/React__default.createElement(EditDrawing, {
     drawingId: drawingId
-  }, children)), /*#__PURE__*/React__default.createElement("div", {
+  }, children), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       bottom: '4px',
@@ -21353,171 +22185,4 @@ const Drawing = ({
   })), /*#__PURE__*/React__default.createElement(BlankDiv, null));
 };
 
-const mateNames = ['firstRefMate', 'secondRefMate'];
-
-const getMateRefIds = (drawingId, constrId) => {
-  var _drawing$structure$tr;
-
-  const drawing = getDrawing(drawingId);
-  const members = (_drawing$structure$tr = drawing.structure.tree[constrId]) == null ? void 0 : _drawing$structure$tr.members;
-  const pRefIds = [];
-
-  if (members && members[mateNames[0]]) {
-    mateNames.forEach(mateName => {
-      var _member$members$;
-
-      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) {
-        pRefIds.push(matePath[matePath.length - 1].value);
-      }
-    });
-  }
-
-  if (pRefIds.length === 0) {
-    return;
-  }
-
-  const curNodeId = drawing.structure.currentNode;
-  const curNode = drawing.structure.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;
-
-    if (pRefIds.indexOf(productRefId) !== -1) {
-      mateRefIds.push(id);
-    }
-  });
-  return mateRefIds;
-};
-
-const SolverState = ({
-  drawingId
-}) => {
-  const rootId = useDrawing(drawingId, d => d.structure.root);
-  const solverState = useDrawing(drawingId, d => {
-    var _d$structure$tree$roo, _d$structure$tree$roo2, _d$structure$tree$roo3;
-
-    return (_d$structure$tree$roo = d.structure.tree[rootId]) == null ? void 0 : (_d$structure$tree$roo2 = _d$structure$tree$roo.members) == null ? void 0 : (_d$structure$tree$roo3 = _d$structure$tree$roo2.solverState) == null ? void 0 : _d$structure$tree$roo3.value;
-  });
-  const component = solverState === 0 ? /*#__PURE__*/React__default.createElement(CheckCircleTwoTone, {
-    twoToneColor: "#52c41a"
-  }) : /*#__PURE__*/React__default.createElement(CloseCircleTwoTone, {
-    twoToneColor: "#eb2f96"
-  });
-  return solverState === undefined ? null : /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    title: solverState === 0 ? 'Solved' : 'Not Solved'
-  }, component);
-};
-/**
- * Shows list of 3d constraints which are contained by currentProduct.
- *
- * @param drawingId - id of a drawing in which currentProduct will be found.
- * @returns
- */
-
-
-const Constraints = ({
-  drawingId
-}) => {
-  const curProdId = useDrawing(drawingId, d => d.structure.currentProduct);
-  const prodChildren = useDrawingArr(drawingId, d => {
-    var _d$structure$tree$cur;
-
-    return (_d$structure$tree$cur = d.structure.tree[curProdId]) == null ? void 0 : _d$structure$tree$cur.children;
-  });
-  const constrSetId = React__default.useMemo(() => {
-    const tree = getDrawing(drawingId).structure.tree;
-    return prodChildren.find(childId => tree[childId].class === CCClasses.CCConstraintSet) || null;
-  }, [prodChildren, drawingId]);
-  const constrSet = useDrawing(drawingId, d => d.structure.tree[constrSetId] || null);
-  const constrIds = React__default.useMemo(() => {
-    return (constrSet == null ? void 0 : constrSet.children) || []; // If there is no any constraint, children doesn't exist in constrSet object
-  }, [constrSet]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(SectionHeader, null, /*#__PURE__*/React__default.createElement(FlexRow, null, /*#__PURE__*/React__default.createElement(Space, null, "Constraints", /*#__PURE__*/React__default.createElement(SolverState, {
-    drawingId: drawingId
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      overflow: 'auto'
-    }
-  }, /*#__PURE__*/React__default.createElement(List, {
-    drawingId: drawingId,
-    constrIds: constrIds
-  })));
-};
-
-const Constraint = ({
-  drawingId,
-  constraintId
-}) => {
-  const {
-    hoveredId,
-    onHover
-  } = React__default.useContext(InteractionContext);
-  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;
-  });
-  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 onNameClick = React__default.useCallback(() => {
-    getDrawing(drawingId).api.plugin.setActiveFeature(constraintId);
-  }, [drawingId, constraintId]);
-  const onMouseEnter = React__default.useCallback(() => {
-    const mateRefIds = getMateRefIds(drawingId, constraintId);
-    onHover && onHover({
-      objectId: constraintId,
-      highlightedIds: mateRefIds,
-      type: 'Constraint'
-    });
-  }, [drawingId, constraintId, onHover]);
-  const onMouseLeave = React__default.useCallback(() => {
-    onHover && onHover(null);
-  }, [onHover]);
-  const nameComponent = rename ? /*#__PURE__*/React__default.createElement(NameEdit, {
-    drawingId: drawingId,
-    objId: constraintId,
-    name: name,
-    setEditName: setRename
-  }) : /*#__PURE__*/React__default.createElement(EntityName, {
-    name: name,
-    underlined: isHovered,
-    strong: isActive
-  });
-  return /*#__PURE__*/React__default.createElement(HoveredDiv, {
-    hovered: isHovered,
-    bordered: true,
-    onClick: onNameClick,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, /*#__PURE__*/React__default.createElement(Space, null, nameComponent), /*#__PURE__*/React__default.createElement(Menu, {
-    items: menuItems
-  }));
-}; // TODO: Create external component
-
-
-const List = ({
-  constrIds,
-  drawingId
-}) => {
-  return /*#__PURE__*/React__default.createElement("div", null, constrIds.map(constrId => /*#__PURE__*/React__default.createElement(Constraint, {
-    key: constrId,
-    drawingId: drawingId,
-    constraintId: constrId
-  })));
-};
-
-export { index$x as Boolean, index$a as BoundingBoxInfo, index$u as Box, CADApi, CSysDisplay, index$p as Chamfer, index$i as CircularPattern, index$r as Cone, Constraints, index$s as Cylinder, index$4 as Cylindrical, index$y as Dimensions, Drawing, index$9 as Expressions, index$w as Extrusion, index$7 as Fastened, index$8 as FastenedOrigin, FeaturePlugin, index$q as Fillet, FtVisibilityController$1 as FtVisibilityController, GlobalPlugins, HoveredConstraintDisplay, index$1 as Import, index$j as LinearPattern, index$g as Measure, Menu, Messages, index$h as Mirror, ModelTree, index$2 as Parallel, index$3 as Planar, index as ProductManagement, Readfile$1 as Readfile, index$5 as Revolute, index$v as Revolve, index$n as Rotate, SideBar, index$f as Sketch, index$l as Slice, index$k as SliceBySheet, index$6 as Slider, Solids, index$t as Sphere, ToolBar, index$m as TransformByCsys, index$o as Translate, ViewOptionButtons, ViewPlugButtons, index$e as WorkAxis, index$b as WorkCoordSystem, index$d as WorkPlane, index$c as WorkPoint, getCADState, useAllObjects, useCADStore, useHasPending, useIsLoading };
+export { index$x as Boolean, index$a as BoundingBoxInfo, index$u as Box, CADApi, CSysDisplay, index$p as Chamfer, index$i as CircularPattern, index$r as Cone, Constraints, index$s as Cylinder, index$4 as Cylindrical, index$y as Dimensions, Drawing, index$9 as Expressions, index$w as Extrusion, index$7 as Fastened, index$8 as FastenedOrigin, FeaturePlugin, index$q as Fillet, FtVisibilityController$1 as FtVisibilityController, GlobalPlugins, HoveredConstraintDisplay, index$1 as Import, index$j as LinearPattern, index$g as Measure, Menu, Messages, index$h as Mirror, ModelTree, Outline, index$2 as Parallel, index$3 as Planar, index as ProductManagement, Readfile$1 as Readfile, index$5 as Revolute, index$v as Revolve, index$n as Rotate, SelectedMateObj, SideBar, index$f as Sketch, index$l as Slice, index$k as SliceBySheet, index$6 as Slider, Solids, index$t as Sphere, ToolBar, index$m as TransformByCsys, index$o as Translate, ViewOptionButtons, ViewPlugButtons, index$e as WorkAxis, WorkAxisObj, index$b as WorkCoordSystem, WorkCoordSystemObj, index$d as WorkPlane, WorkPlaneObj, index$c as WorkPoint, WorkPointObj, getCADState, getMateRefIds, useAllObjects, useCADStore, useHasPending, useIsLoading };