@buerli.io/react-cad 1.0.0 → 1.0.1-beta.3

package/build/index.js

@@ -16,7 +16,6 @@ import 'antd/dist/antd.css';
 import styled, { css, keyframes } from 'styled-components';
 import Dropdown from 'antd/lib/dropdown';
 import DOMPurify from 'dompurify';
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { findDOMNode } from 'react-dom';
 import { Tooltip, Input as Input$3, Typography, Tag, Divider as Divider$2, Space, Button as Button$1, Badge, Modal, Dropdown as Dropdown$1, Skeleton as Skeleton$1, Tabs as Tabs$1 } from 'antd';
@@ -45,39 +44,39 @@ const EMPTYARRAY = [];
 const NOCCID = Number.MIN_SAFE_INTEGER;
 const EMPTYSTR = '';
 
-/**
- * Wrapper around useDrawing which allows to avoid ReferenceErrors.
- * Use useDrawingArr if you want to get an array from store. It returns EMPTYARRAY if requested one is undefined.
- *
- * @param drawingId
- * @param selector
- * @returns requested by selector array or EMPTYARRAY if requested is undefined or null
+/**
+ * Wrapper around useDrawing which allows to avoid ReferenceErrors.
+ * Use useDrawingArr if you want to get an array from store. It returns EMPTYARRAY if requested one is undefined.
+ *
+ * @param drawingId
+ * @param selector
+ * @returns requested by selector array or EMPTYARRAY if requested is undefined or null
  */
 function useDrawingArr(drawingId, selector) {
   const res = useDrawing(drawingId, selector);
   return res || EMPTYARRAY;
 }
 
-/**
- * Wrapper around useDrawing which allows to avoid ReferenceErrors.
- * Use useDrawingCCId if you want to get an object id from store. It returns NOCCID if requested one is undefined or null.
- *
- * @param drawingId
- * @param selector
- * @returns requested by selector object id or NOCCID if requested is undefined or null
+/**
+ * Wrapper around useDrawing which allows to avoid ReferenceErrors.
+ * Use useDrawingCCId if you want to get an object id from store. It returns NOCCID if requested one is undefined or null.
+ *
+ * @param drawingId
+ * @param selector
+ * @returns requested by selector object id or NOCCID if requested is undefined or null
  */
 function useDrawingCCId(drawingId, selector) {
   const res = useDrawing(drawingId, selector);
   return res || NOCCID;
 }
 
-/**
- * Wrapper around useDrawing which allows to avoid ReferenceErrors.
- * Use useDrawingStr if you want to get a string from store. It returns EMPTYSTR if requested one is undefined.
- *
- * @param drawingId
- * @param selector
- * @returns requested by selector string or EMPTYSTRING if requested one is undefined or null
+/**
+ * Wrapper around useDrawing which allows to avoid ReferenceErrors.
+ * Use useDrawingStr if you want to get a string from store. It returns EMPTYSTR if requested one is undefined.
+ *
+ * @param drawingId
+ * @param selector
+ * @returns requested by selector string or EMPTYSTRING if requested one is undefined or null
  */
 function useDrawingStr(drawingId, selector) {
   const res = useDrawing(drawingId, selector);
@@ -112,17 +111,17 @@ function getGraphicId(tree, refOrObjId) {
   return res;
 }
 
-/**
- * Creates Selected Items for the feature references and id of a geometry.
- * If there is no corresponding graphics in the cache the empty array will be returned.
- * This hook check cache stamp,
- * so when the new graphics will be downloaded this hook returns refreshed array.
- *
- * An array of @see SelectedItem will be returned.
- *
- * @param drawingId The drawing id.
- * @param refOrObjIds The ids of the objects or references to find.
- * @returns An array of @see SelectedItem
+/**
+ * Creates Selected Items for the feature references and id of a geometry.
+ * If there is no corresponding graphics in the cache the empty array will be returned.
+ * This hook check cache stamp,
+ * so when the new graphics will be downloaded this hook returns refreshed array.
+ *
+ * An array of @see SelectedItem will be returned.
+ *
+ * @param drawingId The drawing id.
+ * @param refOrObjIds The ids of the objects or references to find.
+ * @returns An array of @see SelectedItem
  */
 
 function useSelectedItems(drawingId, refOrObjIds) {
@@ -134,11 +133,11 @@ function useSelectedItems(drawingId, refOrObjIds) {
   const cacheStamp = useDrawing(drawingId, d => d.geometry.stamp);
   const cache = getDrawing(drawingId).geometry.cache;
   const sortedContainerIds = React__default.useMemo(() => {
-    /**
-     * The containers must be sorted according to the following rules:
-          1. In descending order (historical)
-          2. The visible containers must be treated first
-          3. Remove duplicats from elems array
+    /**
+     * The containers must be sorted according to the following rules:
+          1. In descending order (historical)
+          2. The visible containers must be treated first
+          3. Remove duplicats from elems array
      */
     const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
     const sortedContainerIds_ = [...activeContainers, ...visibleContainers, ...allContainers];
@@ -646,7 +645,34 @@ const Wrapper = ({
   }, children);
 };
 
-var css_248z$6 = ".expression-text-wrapper, .expression-text-wrapper-focused {\r\n  display: block;\r\n  box-sizing: border-box;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 25px;\r\n  min-width: 0px;\r\n  flex: 1 1 25%;\r\n  border: 1px solid rgb(217, 217, 217);\r\n  border-radius: 2px;\r\n  background-color: rgb(255, 255, 255);\r\n  padding: 1px 18px 4px 11px;\r\n  margin: 2px 1px;\r\n  overflow: hidden;\r\n  text-wrap-mode: nowrap;\r\n  transition: all 0.3s;\r\n}\r\n\r\n.expression-text-wrapper:hover {\r\n  border-color: rgb(64, 169, 255);\r\n}\r\n\r\n.expression-text-wrapper-focused, .expression-text-wrapper-menu-open {\r\n  border-color: rgb(64, 169, 255);\r\n  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\r\n}\r\n\r\n.expression-text-input {\r\n  display: block;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  height: 18px;\r\n  min-width: 0px;\r\n  flex: 1 1 25%;\r\n  line-height: 18px;\r\n  outline: none;\r\n  color: rgba(0, 0, 0, 0.85);\r\n  margin: 2px 0px;\r\n  line-clamp: 1;\r\n  overflow-wrap: break-word;\r\n  text-wrap-mode: nowrap;\r\n  word-break: break-all;\r\n  white-space: nowrap;\r\n  overflow-x: auto;\r\n\t-webkit-scrollbar-width: none;\r\n\tscrollbar-width: none; \r\n\t-ms-overflow-style: none;\r\n}\r\n\r\n.expression-text-input .expression-span {\r\n  display: inline-block;\r\n  padding: 0px 1px;\r\n  background: rgb(212, 212, 212);\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  transition: all 0.3s;\r\n}\r\n\r\n.expression-text-input .expression-span-selected {\r\n  background: rgb(184, 184, 184);\r\n  /* background: rgb(149, 122, 184); */\r\n  cursor: text;\r\n}\r\n\r\n.expression-text-input .expression-span-inactive {\r\n  cursor: text;\r\n}\r\n\r\n.expression-text-input .expression-span:hover {\r\n  background: rgb(184, 184, 184);\r\n}\r\n\r\n.expression-text-input .expression-span-inactive:hover {\r\n  background: rgb(212, 212, 212);\r\n}\r\n\r\n.expression-text-input .expression-span .expression-tag {\r\n  font-size: 12px;\r\n  color: rgba(0, 0, 0, 0.6);\r\n}\r\n  ";
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$6 = ".expression-text-wrapper, .expression-text-wrapper-focused {\n  display: block;\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  height: 25px;\n  min-width: 0px;\n  flex: 1 1 25%;\n  border: 1px solid rgb(217, 217, 217);\n  border-radius: 2px;\n  background-color: rgb(255, 255, 255);\n  padding: 1px 18px 4px 11px;\n  margin: 2px 1px;\n  overflow: hidden;\n  text-wrap-mode: nowrap;\n  transition: all 0.3s;\n}\n\n.expression-text-wrapper:hover {\n  border-color: rgb(64, 169, 255);\n}\n\n.expression-text-wrapper-focused, .expression-text-wrapper-menu-open {\n  border-color: rgb(64, 169, 255);\n  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n}\n\n.expression-text-input {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: 18px;\n  min-width: 0px;\n  flex: 1 1 25%;\n  line-height: 18px;\n  outline: none;\n  color: rgba(0, 0, 0, 0.85);\n  margin: 2px 0px;\n  line-clamp: 1;\n  overflow-wrap: break-word;\n  text-wrap-mode: nowrap;\n  word-break: break-all;\n  white-space: nowrap;\n  overflow-x: auto;\n\t-webkit-scrollbar-width: none;\n\tscrollbar-width: none; \n\t-ms-overflow-style: none;\n}\n\n.expression-text-input .expression-span {\n  display: inline-block;\n  padding: 0px 1px;\n  background: rgb(212, 212, 212);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n\n.expression-text-input .expression-span-selected {\n  background: rgb(184, 184, 184);\n  /* background: rgb(149, 122, 184); */\n  cursor: text;\n}\n\n.expression-text-input .expression-span-inactive {\n  cursor: text;\n}\n\n.expression-text-input .expression-span:hover {\n  background: rgb(184, 184, 184);\n}\n\n.expression-text-input .expression-span-inactive:hover {\n  background: rgb(212, 212, 212);\n}\n\n.expression-text-input .expression-span .expression-tag {\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.6);\n}\n  ";
 styleInject(css_248z$6);
 
 function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -1070,24 +1096,24 @@ const Mentions = ({
     ref.current.focus();
   }, [onChange, curExprLink]);
 
-  /* const onBlur = React.useCallback(() => {
-    window.console.log('inputblur')
-      let i = 0
-    const textContent = ref.current.textContent || ''
-    const textArr = textContent.split(/(@expr\.\w*)/)
-    for (const fragment of textArr) {
-      if (fragment.length > 0 && fragment.indexOf('@expr.') === 0) {
-          const exprLink = fragment.slice(6)
-        if (options.findIndex(option => option.key === exprLink) === -1) {
-          const { start, end } = linkRangeRef.current[i]
-          const textContentNew = textContent.slice(0, start) + textContent.slice(end)
-            setCurExprLink(-1)
-          setActiveMenuIndex(0)
-          onChange(textContentNew)
-        }
-        i++
-      }
-    }
+  /* const onBlur = React.useCallback(() => {
+    window.console.log('inputblur')
+     let i = 0
+    const textContent = ref.current.textContent || ''
+    const textArr = textContent.split(/(@expr\.\w*)/)
+    for (const fragment of textArr) {
+      if (fragment.length > 0 && fragment.indexOf('@expr.') === 0) {
+         const exprLink = fragment.slice(6)
+        if (options.findIndex(option => option.key === exprLink) === -1) {
+          const { start, end } = linkRangeRef.current[i]
+          const textContentNew = textContent.slice(0, start) + textContent.slice(end)
+           setCurExprLink(-1)
+          setActiveMenuIndex(0)
+          onChange(textContentNew)
+        }
+        i++
+      }
+    }
   }, [onChange, options]) */
 
   const [isFocused, setIsFocused] = React__default.useState(false);
@@ -1553,18 +1579,18 @@ function useValidation(userValue) {
   };
 }
 
-/**
- * Wrapper for a parameter which will be used in an editor.
- * @param param - an object which should contain next props:
- * {
- *   userValue - value shown for the user
- *   setUserValue - userValue setter
-     defaults - default value
-     isChanged - function shows whether value is changed or not
- * }
- * @param getServValue - if value should be converted (e.g. deg -> rad) pass this function, it will be called right before classCAD API call.
- * @param validation - Custom validation (used in useMateParam, useRefsParam. - these params has an array in userValue, so we need to apply validateF for each element from array).
- * @returns 
+/**
+ * Wrapper for a parameter which will be used in an editor.
+ * @param param - an object which should contain next props:
+ * {
+ *   userValue - value shown for the user
+ *   setUserValue - userValue setter
+     defaults - default value
+     isChanged - function shows whether value is changed or not
+ * }
+ * @param getServValue - if value should be converted (e.g. deg -> rad) pass this function, it will be called right before classCAD API call.
+ * @param validation - Custom validation (used in useMateParam, useRefsParam. - these params has an array in userValue, so we need to apply validateF for each element from array).
+ * @returns 
  */
 function useParam(param, getServValue, validation, options) {
   // TODO: use validator functions here
@@ -1805,8 +1831,8 @@ const createAppState = (set, get) => ({
   api: appApi(set, get)
 });
 const CADApi = vanilla((set, get) => createAppState(set, get));
-/**
- * We need separate store for CAD components. It might contain auxiliary information like stack of current products or camera api.
+/**
+ * We need separate store for CAD components. It might contain auxiliary information like stack of current products or camera api.
  */
 const useCADStore = create(CADApi);
 const useVisibleMap = () => useCADStore(s => s.assemblyTree.visibleMap);
@@ -2637,16 +2663,16 @@ const DimensionSet = ({
   }))));
 };
 
-/**
- * @see https://reactjs.org/docs/error-boundaries.html
+/**
+ * @see https://reactjs.org/docs/error-boundaries.html
  */
 const isDev = process.env.NODE_ENV === 'development';
 
-/**
- * Wrapper for components which are exported from package.
- * It's intended to catch all errors and show friendly fallback to the user instead of error log.
- * By default it returns null in error case. You have to pass showHtml prop to show message to the user.
- * TODO: implement message showing.
+/**
+ * Wrapper for components which are exported from package.
+ * It's intended to catch all errors and show friendly fallback to the user instead of error log.
+ * By default it returns null in error case. You have to pass showHtml prop to show message to the user.
+ * TODO: implement message showing.
  */
 class ErrorBoundary extends React__default.Component {
   constructor(props) {
@@ -2916,11 +2942,11 @@ function useRefsParam(drawingId, objId, memberName) {
   });
 }
 
-/**
- * Checks if the currently active plugin is CC_Sketch.
- * 
- * @param drawingId The drawing id.
- * @returns True if CC_Sketch is active, false otherwise.
+/**
+ * Checks if the currently active plugin is CC_Sketch.
+ * 
+ * @param drawingId The drawing id.
+ * @returns True if CC_Sketch is active, false otherwise.
  */
 const isSketchActive = drawingId => {
   var _drawing$structure$tr;
@@ -2930,13 +2956,13 @@ const isSketchActive = drawingId => {
   return ccUtils.base.isA(objClass, ScgClassType.CCSketch);
 };
 
-/**
- * Calculates the tangent vector of a CC_Line / CC_Arc / CC_Circle at the specified point.
- * 
- * @param drawingId The drawing id.
- * @param curveId Id of a CC_Line / CC_Arc / CC_Circle.
- * @param point Point at which the tangent touches a curve.
- * @returns Tangent vector value.
+/**
+ * Calculates the tangent vector of a CC_Line / CC_Arc / CC_Circle at the specified point.
+ * 
+ * @param drawingId The drawing id.
+ * @param curveId Id of a CC_Line / CC_Arc / CC_Circle.
+ * @param point Point at which the tangent touches a curve.
+ * @returns Tangent vector value.
  */
 const calculateTangent = (drawingId, curveId, point) => {
   var _curve$children;
@@ -2970,11 +2996,11 @@ const calculateTangent = (drawingId, curveId, point) => {
   return undefined;
 };
 
-/**
- * Checks if the object represents a sketch geometry.
- * 
- * @param arg A structure object or CCClass of a structure object.
- * @returns True if the object represents a sketch geometry, false otherwise.
+/**
+ * Checks if the object represents a sketch geometry.
+ * 
+ * @param arg A structure object or CCClass of a structure object.
+ * @returns True if the object represents a sketch geometry, false otherwise.
  */
 const isSketchGeometry = arg => {
   if (arg === undefined) {
@@ -2985,11 +3011,11 @@ const isSketchGeometry = arg => {
   return ccUtils.base.isA(objClass, ScgClassType.CCPoint) || ccUtils.base.isA(objClass, ScgClassType.CCLine) || ccUtils.base.isA(objClass, ScgClassType.CCArc) || ccUtils.base.isA(objClass, ScgClassType.CCCircle);
 };
 
-/**
- * Checks if the object represents a 2d constraint.
- * 
- * @param arg A structure object or CCClass of a structure object.
- * @returns True if the object represents a 2d constraint, false otherwise.
+/**
+ * Checks if the object represents a 2d constraint.
+ * 
+ * @param arg A structure object or CCClass of a structure object.
+ * @returns True if the object represents a 2d constraint, false otherwise.
  */
 const is2DConstraint = arg => {
   if (arg === undefined) {
@@ -2999,11 +3025,11 @@ const is2DConstraint = arg => {
   return ccUtils.base.isA(objClass, ScgClassType.CC2DConstraint);
 };
 
-/**
- * Checks if the object represents a sketch geometry or 2d constraint or a sketch itself.
- * 
- * @param arg A structure object or CCClass of a structure object.
- * @returns True if the object represents a sketch or a sketch geometry or a 2d constraint, false otherwise.
+/**
+ * Checks if the object represents a sketch geometry or 2d constraint or a sketch itself.
+ * 
+ * @param arg A structure object or CCClass of a structure object.
+ * @returns True if the object represents a sketch or a sketch geometry or a 2d constraint, false otherwise.
  */
 const isSketchObj = arg => {
   if (arg === undefined) {
@@ -3013,11 +3039,11 @@ const isSketchObj = arg => {
   return ccUtils.base.isA(objClass, ScgClassType.CCSketch) || isSketchGeometry(objClass) || is2DConstraint(objClass);
 };
 
-/**
- * Checks if the object represents a sketch region.
- * 
- * @param arg A structure object or CCClass of a structure object.
- * @returns True if the object represents a sketch region, false otherwise.
+/**
+ * Checks if the object represents a sketch region.
+ * 
+ * @param arg A structure object or CCClass of a structure object.
+ * @returns True if the object represents a sketch region, false otherwise.
  */
 const isSketchRegion = arg => {
   if (arg === undefined) {
@@ -3027,12 +3053,12 @@ const isSketchRegion = arg => {
   return ccUtils.base.isA(objClass, ScgClassType.CCSketchRegion);
 };
 
-/**
- * Searches for the sketch which nests the specified object.
- * 
- * @param drawingId The drawing id.
- * @param objId Id of an object which (supposedly) is nested within some sketch.
- * @returns Id of the sketch which nests the specified object, or -1 if it wasn't found.
+/**
+ * Searches for the sketch which nests the specified object.
+ * 
+ * @param drawingId The drawing id.
+ * @param objId Id of an object which (supposedly) is nested within some sketch.
+ * @returns Id of the sketch which nests the specified object, or -1 if it wasn't found.
  */
 const getSketchId = (drawingId, objId) => {
   const tree = getDrawing(drawingId).structure.tree;
@@ -3043,13 +3069,13 @@ const getSketchId = (drawingId, objId) => {
   return objId && isSketchObj(obj) && ccUtils.base.getAncestorIdByClass(drawingId, objId, ScgClassType.CCSketch) || -1;
 };
 
-/**
- * Takes ids of 2 CC_Points and if they belong to the same line, returns the id of that line; otherwise, returns ids of these points.
- * 
- * @param drawingId The drawing id.
- * @param id1 Id of the first CC_Point.
- * @param id2 Id of the seconds CC_Point.
- * @returns An array with a single id of the CC_Line if both points belong to the same one, or an array [id1, id2] otherwise.
+/**
+ * Takes ids of 2 CC_Points and if they belong to the same line, returns the id of that line; otherwise, returns ids of these points.
+ * 
+ * @param drawingId The drawing id.
+ * @param id1 Id of the first CC_Point.
+ * @param id2 Id of the seconds CC_Point.
+ * @returns An array with a single id of the CC_Line if both points belong to the same one, or an array [id1, id2] otherwise.
  */
 const rollUpPoints = (drawingId, id1, id2) => {
   const tree = getDrawing(drawingId).structure.tree;
@@ -3059,12 +3085,12 @@ const rollUpPoints = (drawingId, id1, id2) => {
   return ccUtils.base.isA(obj1 == null ? void 0 : obj1.class, ScgClassType.CCPoint) && ccUtils.base.isA(obj2 == null ? void 0 : obj2.class, ScgClassType.CCPoint) && obj1.parent === obj2.parent && ccUtils.base.isA((parent == null ? void 0 : parent.class) || '', ScgClassType.CCLine) ? [obj1.parent] : [id1, id2];
 };
 
-/**
- * Looks up for entities of a 2d constraint / sketch region.
- * 
- * @param drawingId The drawing id.
- * @param objectId Id of a 2d constraint / sketch region.
- * @returns Ids of geometry entities linked to the specified 2d constraint / sketch region.
+/**
+ * Looks up for entities of a 2d constraint / sketch region.
+ * 
+ * @param drawingId The drawing id.
+ * @param objectId Id of a 2d constraint / sketch region.
+ * @returns Ids of geometry entities linked to the specified 2d constraint / sketch region.
  */
 const getEntities = (drawingId, objectId) => {
   var _obj$members2;
@@ -3107,11 +3133,11 @@ const getEntities = (drawingId, objectId) => {
   return entities;
 };
 
-/**
- * Defines a numeric priority of sketch objects and regions, which may be used for sorting them or as a polygon offset for rendering.
- * 
- * @param arg A structure object or CCClass of a structure object.
- * @returns A number value (1-5) which represents the sketch object's priority, or -1 if arg is not a sketch object.
+/**
+ * Defines a numeric priority of sketch objects and regions, which may be used for sorting them or as a polygon offset for rendering.
+ * 
+ * @param arg A structure object or CCClass of a structure object.
+ * @returns A number value (1-5) which represents the sketch object's priority, or -1 if arg is not a sketch object.
  */
 const getSketchPriority = arg => {
   if (arg === undefined) {
@@ -3136,13 +3162,13 @@ const getSketchPriority = arg => {
   return -1;
 };
 
-/**
- * Projects a point onto the specified sketch geometry.
- * 
- * @param drawingId The drawing id.
- * @param geometryId Id of a sketch geometry.
- * @param point A point to be projected.
- * @returns A projected point.
+/**
+ * Projects a point onto the specified sketch geometry.
+ * 
+ * @param drawingId The drawing id.
+ * @param geometryId Id of a sketch geometry.
+ * @param point A point to be projected.
+ * @returns A projected point.
  */
 const projectPointOnGeometry = (drawingId, geometryId, point) => {
   const tree = getDrawing(drawingId).structure.tree;
@@ -3168,12 +3194,12 @@ const projectPointOnGeometry = (drawingId, geometryId, point) => {
   return point.clone();
 };
 
-/**
- * Calculates an object's center point.
- * 
- * @param drawingId The drawing id.
- * @param geometryId Id of a sketch geometry.
- * @returns A center point of specified sketch geometry.
+/**
+ * Calculates an object's center point.
+ * 
+ * @param drawingId The drawing id.
+ * @param geometryId Id of a sketch geometry.
+ * @returns A center point of specified sketch geometry.
  */
 const getObjCenterPoint = (drawingId, geometryId) => {
   const tree = getDrawing(drawingId).structure.tree;
@@ -3196,14 +3222,14 @@ const getObjCenterPoint = (drawingId, geometryId) => {
   return new THREE.Vector3();
 };
 
-/**
- * Calculates arc midpoint, radius, startAngle, endAngle and bulge values. 
- * 
- * @param start Start point of an arc.
- * @param end End point of an arc.
- * @param center Center point of an arc.
- * @param clockwise True if the direction from start to end is clockwise, false otherwise.
- * @returns An object with center, mid, radius, startAngle, endAngle and bulge values.
+/**
+ * Calculates arc midpoint, radius, startAngle, endAngle and bulge values. 
+ * 
+ * @param start Start point of an arc.
+ * @param end End point of an arc.
+ * @param center Center point of an arc.
+ * @param clockwise True if the direction from start to end is clockwise, false otherwise.
+ * @returns An object with center, mid, radius, startAngle, endAngle and bulge values.
  */
 const getArcInfo = (start, end, center, clockwise) => {
   const vecStart = start.clone().sub(center);
@@ -3231,14 +3257,14 @@ const getArcInfo = (start, end, center, clockwise) => {
   };
 };
 
-/**
- * Finds the sector (indexed 0-3) to which the dimPos belongs to. Sectors are divided by dir0 and dir1 vectors and their negations.
- * 
- * @param dimPos A point
- * @param dir0 The first direction.
- * @param dir1 The second direction.
- * @param center A center point of the arc.
- * @returns A sector index (0-3) to which the dimPos belongs to.
+/**
+ * Finds the sector (indexed 0-3) to which the dimPos belongs to. Sectors are divided by dir0 and dir1 vectors and their negations.
+ * 
+ * @param dimPos A point
+ * @param dir0 The first direction.
+ * @param dir1 The second direction.
+ * @param center A center point of the arc.
+ * @returns A sector index (0-3) to which the dimPos belongs to.
  */
 const getArcSector = (dimPos, dir0, dir1, center) => {
   const dir = dimPos.clone().sub(center).normalize();
@@ -3260,14 +3286,14 @@ const getArcSector = (dimPos, dir0, dir1, center) => {
   return angleToDir0IsNegative ? angleToDir1IsPositive ? 0 : 1 : angleToDir1IsPositive ? 3 : 2;
 };
 
-/**
- * Calculates the angle between dir0 and dir1 or their negations depending on sector and reflex values.
- * 
- * @param dir0 The first direction.
- * @param dir1 The second direction.
- * @param sector The sector index (0-3).
- * @param reflex A flag for changing angle coverage from the current sector to the opposite 3.
- * @returns The resulting angle between dir0 and dir1.
+/**
+ * Calculates the angle between dir0 and dir1 or their negations depending on sector and reflex values.
+ * 
+ * @param dir0 The first direction.
+ * @param dir1 The second direction.
+ * @param sector The sector index (0-3).
+ * @param reflex A flag for changing angle coverage from the current sector to the opposite 3.
+ * @returns The resulting angle between dir0 and dir1.
  */
 const getArcPreviewValue = (dir0, dir1, sector, reflex) => {
   let previewValue = dir0.angleTo(dir1);
@@ -3277,11 +3303,11 @@ const getArcPreviewValue = (dir0, dir1, sector, reflex) => {
   return Math.abs(previewValue);
 };
 
-/**
- * Looks up for sketch's bounds values.
- * 
- * @param boundsMember The sketch.boundingBox member.
- * @returns An object containing the center, radius and box values.
+/**
+ * Looks up for sketch's bounds values.
+ * 
+ * @param boundsMember The sketch.boundingBox member.
+ * @returns An object containing the center, radius and box values.
  */
 const getSketchBounds = boundsMember => {
   const [min, max] = boundsMember.members.map(memb => convertToVector(memb));
@@ -3327,13 +3353,13 @@ const getSketchBoundsInfo = (drawingId, sketchId) => {
   };
 };
 
-/**
- * Calculates the global bounding box, camera position, camera target and camera up vector to fit the camera for the given sketch.
- * 
- * @param drawingId The drawing id.
- * @param sketchId Id of the sketch.
- * @param radiusMultiplier A multiplier for the distance between camera and sketch.
- * @returns An object with globBox, position, target and up values.
+/**
+ * Calculates the global bounding box, camera position, camera target and camera up vector to fit the camera for the given sketch.
+ * 
+ * @param drawingId The drawing id.
+ * @param sketchId Id of the sketch.
+ * @param radiusMultiplier A multiplier for the distance between camera and sketch.
+ * @returns An object with globBox, position, target and up values.
  */
 const getSketchFitInfo = (drawingId, sketchId, radiusMultiplier = 1) => {
   const drawing = getDrawing(drawingId);
@@ -3358,14 +3384,14 @@ const getSketchFitInfo = (drawingId, sketchId, radiusMultiplier = 1) => {
   };
 };
 
-/**
- * Calculates the global bounding box, camera position, camera target and camera up vector for the given sketch to target some point with camera oriented orthogonally to it.
- * 
- * @param drawingId The drawing id.
- * @param sketchId Id of the sketch.
- * @param targetPos A point near the sketch plane to use as the camera target.
- * @param distance The distance value to set between camera and sketch.
- * @returns An object with globBox, position, target and up values.
+/**
+ * Calculates the global bounding box, camera position, camera target and camera up vector for the given sketch to target some point with camera oriented orthogonally to it.
+ * 
+ * @param drawingId The drawing id.
+ * @param sketchId Id of the sketch.
+ * @param targetPos A point near the sketch plane to use as the camera target.
+ * @param distance The distance value to set between camera and sketch.
+ * @returns An object with globBox, position, target and up values.
  */
 const getSketchNormalViewInfo = (drawingId, sketchId, targetPos, distance) => {
   const drawing = getDrawing(drawingId);
@@ -3561,14 +3587,14 @@ const useEditMode = drawingId => {
 function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/**
- * Implies the following data structure:
- * data: {
- *   path: ObjectID[],
- *   csys: ScgObject,
- *   flip: FlipType,
- *   reorient: ReorientedType,
- * }
+/**
+ * Implies the following data structure:
+ * data: {
+ *   path: ObjectID[],
+ *   csys: ScgObject,
+ *   flip: FlipType,
+ *   reorient: ReorientedType,
+ * }
  */
 const MateScope = 'HLConstraintScope';
 const createMateItem = (path, csys, flip, reorient) => {
@@ -3707,11 +3733,11 @@ const useGlobalMateInfo = (drawingId, instances, includeSelected) => {
   }, [drawingId, currentProduct, instanceChildren, instances, selectors, activeSelector, includeSelected]);
 };
 
-/**
- * Check if ClassCAD is busy with one or multiple pending requests.
- *
- * @param drawingId The drawing id
- * @returns true, if some requests are pending
+/**
+ * Check if ClassCAD is busy with one or multiple pending requests.
+ *
+ * @param drawingId The drawing id
+ * @returns true, if some requests are pending
  */
 const useHasPending = drawingId => {
   return useDrawing(drawingId, d => d.cad.pending.length > 0);
@@ -3719,11 +3745,11 @@ const useHasPending = drawingId => {
 
 const EMPTYARR = [];
 
-/**
- * Check if ClassCAD is busy with loading something.
- *
- * @param drawingId The drawing id
- * @returns true, if something is loading
+/**
+ * Check if ClassCAD is busy with loading something.
+ *
+ * @param drawingId The drawing id
+ * @returns true, if something is loading
  */
 const useIsLoading = drawingId => {
   const pending = useDrawing(drawingId, d => d.cad.pending) || EMPTYARR;
@@ -3863,11 +3889,11 @@ const MultiSelect = ({
 function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/**
- * Implies the following data structure:
- * data: {
- *   object: ScgObject
- * }
+/**
+ * Implies the following data structure:
+ * data: {
+ *   object: ScgObject
+ * }
  */
 const TreeObjScope = 'TreeObjScope';
 const createTreeObjSelItem = (productId, object) => {
@@ -4052,17 +4078,17 @@ function useIsSHovered(drawingId, objId) {
   return isSelectable && isHovered;
 }
 
-/**
- * Returns true if object in tree is currently selected in active selection.
- *
- * This hook leads to re-rendering of each element uses it.
- * It happens because it uses items of the active selection,
- * and it's not possible to check if objId is selected inside of useDrawing selector
- * because of performance reasone (it requires traversing through all of selectedItems).
- *
- * @param drawingId
- * @param objId
- * @returns
+/**
+ * Returns true if object in tree is currently selected in active selection.
+ *
+ * This hook leads to re-rendering of each element uses it.
+ * It happens because it uses items of the active selection,
+ * and it's not possible to check if objId is selected inside of useDrawing selector
+ * because of performance reasone (it requires traversing through all of selectedItems).
+ *
+ * @param drawingId
+ * @param objId
+ * @returns
  */
 function useIsSSelected(drawingId, objId) {
   // Re-render if selItems is changed
@@ -5238,16 +5264,16 @@ function validateParams(params) {
   return warnings;
 }
 
-/**
- * @param drawingId - id of the drawing.
- * @param update - a function which will be called when user presses "Update" button.
- * @param params - all params which should be sent to the server. PluginForm validates each of them.
- * @param validator - smart validation (check https://awv-informatik.atlassian.net/wiki/spaces/CLAS/pages/2428076033/Validation for mor details)
- * @param autoClose - (optional) if true plugin will closed after update. Default is true.
- * @param forceUpdateEnabled - if plugin is opened for the recently created feature it contains default values.
- * User should be able to click "Update" button (clicking on close will remove the feature). Since there is no params changed by the user validator disables "Update" button.
- * To make "Update" button enabled with default values pass true to forceUpdateEnabled
- * @returns
+/**
+ * @param drawingId - id of the drawing.
+ * @param update - a function which will be called when user presses "Update" button.
+ * @param params - all params which should be sent to the server. PluginForm validates each of them.
+ * @param validator - smart validation (check https://awv-informatik.atlassian.net/wiki/spaces/CLAS/pages/2428076033/Validation for mor details)
+ * @param autoClose - (optional) if true plugin will closed after update. Default is true.
+ * @param forceUpdateEnabled - if plugin is opened for the recently created feature it contains default values.
+ * User should be able to click "Update" button (clicking on close will remove the feature). Since there is no params changed by the user validator disables "Update" button.
+ * To make "Update" button enabled with default values pass true to forceUpdateEnabled
+ * @returns
  */
 const PluginForm = ({
   update,
@@ -5369,10 +5395,10 @@ const TypeEditor = ({
   }, Object.keys(types).filter(t => readonlyTypes.indexOf(parseInt(t)) === -1).map(t => types[parseInt(t)]));
 };
 
-/**
- * Allows to automatically enable all selectors in form one by one.
- * @param drawingId
- * @returns
+/**
+ * Allows to automatically enable all selectors in form one by one.
+ * @param drawingId
+ * @returns
  */
 function useSelectorsOrder(drawingId) {
   const selectors = React__default.useRef([]);
@@ -5408,23 +5434,23 @@ function useSelectorsOrder(drawingId) {
   }), [addSelector, removeSelector, switchToNext]);
 }
 
-/**
- * !!! Important !!!
- *
- * Functions in this file are called outside of ErrorBoundary,
- * so an error appearing in such function will break whole application.
- *
- * This is why all point operators should be guarded by question mark.
- * And this is the reasone why we should not use any "regular" hooks, or just functions
- * which are already used in components exported from @buerli.io/react-cad.
- *
- * There should not be any hard logic, verifiers are just checking if tree contains particular data
- * (e.g. useCurProductVerifier checks if currentProduct exists in drawing.structure, and corresponding
- * object exists in drawing.structure.tree, otherwise it adds warning).
- *
- * If you need to reuse non trivial existing function, it's better to copypaste code of the function
- * and guard all access operator by question marks like it's already done in usePartAndAssemblyContVerifier
- * for useAllObjects.
+/**
+ * !!! Important !!!
+ *
+ * Functions in this file are called outside of ErrorBoundary,
+ * so an error appearing in such function will break whole application.
+ *
+ * This is why all point operators should be guarded by question mark.
+ * And this is the reasone why we should not use any "regular" hooks, or just functions
+ * which are already used in components exported from @buerli.io/react-cad.
+ *
+ * There should not be any hard logic, verifiers are just checking if tree contains particular data
+ * (e.g. useCurProductVerifier checks if currentProduct exists in drawing.structure, and corresponding
+ * object exists in drawing.structure.tree, otherwise it adds warning).
+ *
+ * If you need to reuse non trivial existing function, it's better to copypaste code of the function
+ * and guard all access operator by question marks like it's already done in usePartAndAssemblyContVerifier
+ * for useAllObjects.
  */
 
 function useDrawingVerifier(drawingId, warnings) {
@@ -5610,13 +5636,13 @@ function useExprSetVerifier(drawingId, warnings) {
   }
 }
 
-/**
- * Validator for feature plugins. Checks drawing, currentProduct and corresponding feature existance.
- *
- * @param drawingId
- * @param pluginId
- * @param isCanvas used for showing different output for DOM component and for threeJS component.
- * @returns
+/**
+ * Validator for feature plugins. Checks drawing, currentProduct and corresponding feature existance.
+ *
+ * @param drawingId
+ * @param pluginId
+ * @param isCanvas used for showing different output for DOM component and for threeJS component.
+ * @returns
  */
 const FtPluginValidator = ({
   drawingId,
@@ -9311,8 +9337,8 @@ const ViewContext = /*#__PURE__*/React__default.createContext({
 
 const tolerance$8 = 1e-6;
 
-/**
- * Allowed pixel offset for onClick handler events in case the pointer was slightly moved
+/**
+ * Allowed pixel offset for onClick handler events in case the pointer was slightly moved
  */
 const deltaTolerance = 4;
 
@@ -12440,10 +12466,10 @@ const getColor = (object, objState) => {
   return 0x000000;
 };
 
-/**
- * Return pointerHandlers of currently enabled sketch Handler.
- * @param objId
- * @returns
+/**
+ * Return pointerHandlers of currently enabled sketch Handler.
+ * @param objId
+ * @returns
  */
 const useSketchHandlers = objId => {
   const {
@@ -12570,14 +12596,14 @@ function useScale(drawingId, pluginId, getVector) {
   return ref;
 }
 
-/*
- * For correct drawing of objects that lie in the same plane, polygonOffset is used.
- * https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glPolygonOffset.xhtml
- * offset = factor * DZ + r * units
- *    Where DZ is a measurement of the change in depth relative to the screen area of the polygon,
- *    and r is the smallest value that is guaranteed to produce a resolvable offset for a given implementation.
- *    The offset is added before the depth test is performed and before the value is written into the depth buffer.
- * factor parameter is redundant for this purpose, so only units parameter is used.
+/*
+ * For correct drawing of objects that lie in the same plane, polygonOffset is used.
+ * https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glPolygonOffset.xhtml
+ * offset = factor * DZ + r * units
+ *    Where DZ is a measurement of the change in depth relative to the screen area of the polygon,
+ *    and r is the smallest value that is guaranteed to produce a resolvable offset for a given implementation.
+ *    The offset is added before the depth test is performed and before the value is written into the depth buffer.
+ * factor parameter is redundant for this purpose, so only units parameter is used.
  */
 
 const iconSize = 2.5;
@@ -12992,10 +13018,10 @@ const InstancedGeometry = ({
   }, children));
 };
 
-/**
- * Component which implements InstancedMesh from three.js.
- * Merged component from drei takes globaly created meshes and then passes corresponding "mocked" components via function props (MockCylinder and MockSphere) to children.
- * "mocked" components are used for saying drei where to draw instances.
+/**
+ * Component which implements InstancedMesh from three.js.
+ * Merged component from drei takes globaly created meshes and then passes corresponding "mocked" components via function props (MockCylinder and MockSphere) to children.
+ * "mocked" components are used for saying drei where to draw instances.
  */
 const MergedWrapper = ({
   children
@@ -13253,70 +13279,70 @@ const Point = ({
 };
 
 // Another raycast approach, should be more performant (not really in practice) but less precise
-/* const arcRaycast = React.useCallback(
-   function (this: THREE.Mesh, raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) {
-     const matrixWtoL = this.matrixWorld.clone().invert()
-     const rayL = raycaster.ray.clone().applyMatrix4(matrixWtoL)
-     
-     const sketchScale = getScale(drawingId, pluginId)
-     const tubeRadius_ = arcCoef * sketchScale
-
-     const halfWidth = radius + tubeRadius_
-     bBoxMin.set(-halfWidth, -halfWidth, -tubeRadius_)
-     bBoxMax.set(halfWidth, halfWidth, tubeRadius_)
-     bBox.set(bBoxMin, bBoxMax)
-
-     const mayIntersect = rayL.intersectBox(bBox, target) !== null
-     if (!mayIntersect) {
-       return
-     }
-
-     let intersections: THREE.Vector3[]
-     if (1 - Math.abs(rayL.direction.z) < 1e-6) {
-       const intersection = rayL.origin.clone().setZ(0.0).normalize().multiplyScalar(radius)
-       intersections = [intersection]
-     } else {
-       // Origin and direction projected on the arc plane
-       const originP = rayL.origin.clone().setZ(0.0)
-       const dirP = rayL.direction.clone().setZ(0.0)
- 
-       const a = dirP.lengthSq()
-       const b = 2 * dirP.dot(originP)
-       const c = originP.lengthSq() - radius * radius
- 
-       const v1 = b * b - 4 * a * c
-       if (v1 < 0) {
-         return
-       }
- 
-       const w = Math.sqrt(v1)
-       const t1 = (-b - w) / (2 * a)
-       const t2 = (-b + w) / (2 * a)
-
-       intersections = [t1, t2].map(t => originP.clone().addScaledVector(dirP, t))
-     }
-
-     intersections = intersections.filter(posL => {
-       let angle = Math.atan2(posL.y, posL.x)
-       angle = angularLength >= 0 && angle < 0 ? angle + 2 * Math.PI : angle
-       angle = angularLength < 0 && angle >= 0 ? angle - 2 * Math.PI : angle
-       const u = angle / angularLength
-       return u >= 0 && u <= 1
-     })
-     const distances = intersections.map(posL => rayL.distanceToPoint(posL))
-     const dist = distances.sort()[0]
-
-     if (dist !== undefined && dist < arcCoef * sketchScale) {
-       const pos = raycaster.ray.origin.clone().addScaledVector(raycaster.ray.direction, dist)
-       intersects.push({
-         distance: dist,
-         point: pos,
-         face: null,
-         object: this,
-       })
-     }
-   },
-   [radius, angularLength, drawingId, pluginId],
+/* const arcRaycast = React.useCallback(
+   function (this: THREE.Mesh, raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) {
+     const matrixWtoL = this.matrixWorld.clone().invert()
+     const rayL = raycaster.ray.clone().applyMatrix4(matrixWtoL)
+     
+     const sketchScale = getScale(drawingId, pluginId)
+     const tubeRadius_ = arcCoef * sketchScale
+
+     const halfWidth = radius + tubeRadius_
+     bBoxMin.set(-halfWidth, -halfWidth, -tubeRadius_)
+     bBoxMax.set(halfWidth, halfWidth, tubeRadius_)
+     bBox.set(bBoxMin, bBoxMax)
+
+     const mayIntersect = rayL.intersectBox(bBox, target) !== null
+     if (!mayIntersect) {
+       return
+     }
+
+     let intersections: THREE.Vector3[]
+     if (1 - Math.abs(rayL.direction.z) < 1e-6) {
+       const intersection = rayL.origin.clone().setZ(0.0).normalize().multiplyScalar(radius)
+       intersections = [intersection]
+     } else {
+       // Origin and direction projected on the arc plane
+       const originP = rayL.origin.clone().setZ(0.0)
+       const dirP = rayL.direction.clone().setZ(0.0)
+ 
+       const a = dirP.lengthSq()
+       const b = 2 * dirP.dot(originP)
+       const c = originP.lengthSq() - radius * radius
+ 
+       const v1 = b * b - 4 * a * c
+       if (v1 < 0) {
+         return
+       }
+ 
+       const w = Math.sqrt(v1)
+       const t1 = (-b - w) / (2 * a)
+       const t2 = (-b + w) / (2 * a)
+
+       intersections = [t1, t2].map(t => originP.clone().addScaledVector(dirP, t))
+     }
+
+     intersections = intersections.filter(posL => {
+       let angle = Math.atan2(posL.y, posL.x)
+       angle = angularLength >= 0 && angle < 0 ? angle + 2 * Math.PI : angle
+       angle = angularLength < 0 && angle >= 0 ? angle - 2 * Math.PI : angle
+       const u = angle / angularLength
+       return u >= 0 && u <= 1
+     })
+     const distances = intersections.map(posL => rayL.distanceToPoint(posL))
+     const dist = distances.sort()[0]
+
+     if (dist !== undefined && dist < arcCoef * sketchScale) {
+       const pos = raycaster.ray.origin.clone().addScaledVector(raycaster.ray.direction, dist)
+       intersects.push({
+         distance: dist,
+         point: pos,
+         face: null,
+         object: this,
+       })
+     }
+   },
+   [radius, angularLength, drawingId, pluginId],
  )*/
 
 const bBox$1 = new THREE.Box3();
@@ -13548,16 +13574,16 @@ const Regions$1 = ({
 function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-/*
- * !polygonOffset!
- * For correct drawing of objects that lie in the same plane, polygonOffset is used.
- * https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glPolygonOffset.xhtml
- * offset = factor * DZ + r * units
- *    Where DZ is a measurement of the change in depth relative to the screen area of the polygon,
- *    and r is an implementation-specific value to create a constant depth offset.
- *    The offset is added before the depth test is performed and before the value is written into the depth buffer.
- *
- * Factor parameter is redundant for this purpose, so only units parameter is used.
+/*
+ * !polygonOffset!
+ * For correct drawing of objects that lie in the same plane, polygonOffset is used.
+ * https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glPolygonOffset.xhtml
+ * offset = factor * DZ + r * units
+ *    Where DZ is a measurement of the change in depth relative to the screen area of the polygon,
+ *    and r is an implementation-specific value to create a constant depth offset.
+ *    The offset is added before the depth test is performed and before the value is written into the depth buffer.
+ *
+ * Factor parameter is redundant for this purpose, so only units parameter is used.
  */
 
 extend({
@@ -14996,10 +15022,10 @@ const SketchGroup = ({
   }))), isDisplayed && /*#__PURE__*/React__default.createElement(ContentSpace, null, children));
 };
 
-/**
- *
- * @param ref reference to a div element; Its size will be used for calculations
- * @returns object containing width, proposed side padding and margin for icons
+/**
+ *
+ * @param ref reference to a div element; Its size will be used for calculations
+ * @returns object containing width, proposed side padding and margin for icons
  */
 const useLayoutSize = ref => {
   const {
@@ -16039,7 +16065,7 @@ const Constraints$1 = () => {
   })))));
 };
 
-var css_248z$5 = ".handlers-dropdown .ant-dropdown-menu-root {\r\n  border: 1px solid rgba(127, 127, 127, 1);\r\n  border-top: 1px solid rgba(255, 255, 255, 1);\r\n  border-radius: 0px;\r\n  padding: 0px;\r\n  margin-top: -2px;\r\n  margin-left: -3px;\r\n}\r\n\r\n.handlers-dropdown .ant-dropdown-menu-root .ant-dropdown-menu-item {\r\n  background-color: initial;\r\n  padding: 0px;\r\n  margin-top: 0px;\r\n}\r\n";
+var css_248z$5 = ".handlers-dropdown .ant-dropdown-menu-root {\n  border: 1px solid rgba(127, 127, 127, 1);\n  border-top: 1px solid rgba(255, 255, 255, 1);\n  border-radius: 0px;\n  padding: 0px;\n  margin-top: -2px;\n  margin-left: -3px;\n}\n\n.handlers-dropdown .ant-dropdown-menu-root .ant-dropdown-menu-item {\n  background-color: initial;\n  padding: 0px;\n  margin-top: 0px;\n}\n";
 styleInject(css_248z$5);
 
 const _excluded$4 = ["handlerName", "sideEffect"];
@@ -16295,7 +16321,7 @@ const PlaneSelection = ({
   }));
 };
 
-var css_248z$4 = ".contextmenu-submenu .ant-dropdown-menu-sub {\r\n  border: 1px solid #e0e0e0;\r\n  margin: -5px 0px 0px -2px;\r\n  padding: 2px 0px;\r\n}\r\n\r\n.contextmenu-submenu .ant-dropdown-menu-sub .ant-dropdown-menu-item {\r\n  padding: 2px 12px;\r\n}\r\n";
+var css_248z$4 = ".contextmenu-submenu .ant-dropdown-menu-sub {\n  border: 1px solid #e0e0e0;\n  margin: -5px 0px 0px -2px;\n  padding: 2px 0px;\n}\n\n.contextmenu-submenu .ant-dropdown-menu-sub .ant-dropdown-menu-item {\n  padding: 2px 12px;\n}\n";
 styleInject(css_248z$4);
 
 const _excluded$3 = ["items", "menuInfo", "caption", "icon", "onHide", "children"];
@@ -16887,8 +16913,8 @@ const ObjTitle = ({
     e.preventDefault();
   }, []);
 
-  /* const onMouseEnter = React.useCallback(() => {
-    hover(drawingId, pluginId, [objId])
+  /* const onMouseEnter = React.useCallback(() => {
+    hover(drawingId, pluginId, [objId])
   }, [drawingId, pluginId, objId]) */
 
   const onMouseLeave = React__default.useCallback(() => {
@@ -20138,11 +20164,11 @@ function useExpressionsParam() {
   });
 }
 
-/**
- * Validator for Expressions plugin. Checks drawing and currentProduct existance.
- *
- * @param drawingId
- * @returns
+/**
+ * Validator for Expressions plugin. Checks drawing and currentProduct existance.
+ *
+ * @param drawingId
+ * @returns
  */
 const ExpressionsValidator = ({
   drawingId,
@@ -20212,11 +20238,11 @@ const SolverState = ({
   }, component);
 };
 
-/**
- * Shows list of 3d constraints which are contained by currentProduct.
- *
- * @param drawingId - id of a drawing in which currentProduct will be found.
- * @returns
+/**
+ * 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
@@ -20390,11 +20416,11 @@ const List$2 = ({
   }))));
 };
 
-/**
- * Validator for Drawing component. Checks drawing existence.
- *
- * @param drawingId
- * @returns
+/**
+ * Validator for Drawing component. Checks drawing existence.
+ *
+ * @param drawingId
+ * @returns
  */
 const DrawingValidator = ({
   drawingId,
@@ -20632,9 +20658,9 @@ function getMenuHeader(drawingId, objId) {
   };
 }
 
-/**
- * Goal of this component is to manage visibility of individual features when interacting with RollbackBar
- * TODO: change the component name?
+/**
+ * Goal of this component is to manage visibility of individual features when interacting with RollbackBar
+ * TODO: change the component name?
  */
 const VisibilityController = ({
   drawingId,
@@ -20658,8 +20684,8 @@ const VisibilityController = ({
   return null;
 };
 
-/**
- * Goal of this component is to manage visibility of existing features when interacting with Selection or RollbackBar
+/**
+ * Goal of this component is to manage visibility of existing features when interacting with Selection or RollbackBar
  */
 const FtVisibilityControllerImpl = ({
   drawingId
@@ -21580,7 +21606,7 @@ const draggableModalReducer = (state, action) => {
   }
 };
 
-var css_248z$3 = "/**\r\n * NOTE: This is not compiled.\r\n */\r\n\r\n.ant-design-draggable-modal {\r\n  pointer-events: none;\r\n  overflow: hidden !important;\r\n}\r\n\r\n.ant-design-draggable-modal .ant-modal {\r\n  display: flex;\r\n  max-width: none;\r\n  transform-origin: 50% 50% !important;\r\n}\r\n\r\n.ant-design-draggable-modal .ant-modal-content {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.ant-design-draggable-modal .ant-modal-header {\r\n  flex: 0;\r\n  padding: 0;\r\n}\r\n\r\n.ant-design-draggable-modal .ant-modal-footer {\r\n  flex: 0;\r\n  padding: 16px;\r\n}\r\n\r\n.ant-design-draggable-modal .ant-design-draggable-modal-title {\r\n  cursor: move;\r\n  padding: 16px;\r\n}\r\n\r\n.ant-design-draggable-modal .ant-design-draggable-modal-title::before {\r\n  content: '\\00a0';\r\n}\r\n\r\n.ant-design-draggable-modal .ant-modal-body {\r\n  flex: 1;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  padding: 16px;\r\n}\r\n\r\n.ant-design-draggable-modal-resize-handle-inner {\r\n  width: 12px;\r\n  right: 14px;\r\n  border: 2px solid grey;\r\n  height: 12px;\r\n  bottom: 14px;\r\n  position: absolute;\r\n  border-top: 0;\r\n  border-left: 0;\r\n}\r\n\r\n.ant-design-draggable-modal-resize-handle {\r\n  right: -10px;\r\n  width: 44px;\r\n  bottom: -10px;\r\n  cursor: se-resize;\r\n  height: 44px;\r\n  position: absolute;\r\n}\r\n";
+var css_248z$3 = "/**\n * NOTE: This is not compiled.\n */\n\n.ant-design-draggable-modal {\n  pointer-events: none;\n  overflow: hidden !important;\n}\n\n.ant-design-draggable-modal .ant-modal {\n  display: flex;\n  max-width: none;\n  transform-origin: 50% 50% !important;\n}\n\n.ant-design-draggable-modal .ant-modal-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.ant-design-draggable-modal .ant-modal-header {\n  flex: 0;\n  padding: 0;\n}\n\n.ant-design-draggable-modal .ant-modal-footer {\n  flex: 0;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title {\n  cursor: move;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal .ant-design-draggable-modal-title::before {\n  content: '\\00a0';\n}\n\n.ant-design-draggable-modal .ant-modal-body {\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.ant-design-draggable-modal-resize-handle-inner {\n  width: 12px;\n  right: 14px;\n  border: 2px solid grey;\n  height: 12px;\n  bottom: 14px;\n  position: absolute;\n  border-top: 0;\n  border-left: 0;\n}\n\n.ant-design-draggable-modal-resize-handle {\n  right: -10px;\n  width: 44px;\n  bottom: -10px;\n  cursor: se-resize;\n  height: 44px;\n  position: absolute;\n}\n";
 styleInject(css_248z$3);
 
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21984,11 +22010,11 @@ const Feature = ({
   }, content) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
 };
 
-/**
- * Validator for FeatureList component. Checks drawing and currentProduct existance.
- *
- * @param drawingId
- * @returns
+/**
+ * Validator for FeatureList component. Checks drawing and currentProduct existance.
+ *
+ * @param drawingId
+ * @returns
  */
 const FeatureListValidator = ({
   drawingId,
@@ -22804,7 +22830,7 @@ const ListPlaceholder = () => {
   })));
 };
 
-var css_248z$2 = ".header-dropdown .ant-dropdown-menu-root {\r\n  margin-left: -10px;\r\n}\r\n";
+var css_248z$2 = ".header-dropdown .ant-dropdown-menu-root {\n  margin-left: -10px;\n}\n";
 styleInject(css_248z$2);
 
 // TODO: Move to buerli/packages/react or buerli/packages/core
@@ -22838,16 +22864,16 @@ function readFile(file, type) {
   });
 }
 
-/**
- * Simple helper functions for file interaction.
+/**
+ * Simple helper functions for file interaction.
  */
 const FileUtils = {
-  /**
-   * Loads a file from the file system.
-   * It uses @see document and is therefore directly dependent on the DOM.
-   *
-   * @param onLoad The callback.
-   * @param type The content type.
+  /**
+   * Loads a file from the file system.
+   * It uses @see document and is therefore directly dependent on the DOM.
+   *
+   * @param onLoad The callback.
+   * @param type The content type.
    */
   loadFile: (onLoad, type, multiple) => {
     const handler = event => {
@@ -22905,15 +22931,15 @@ const FileUtils = {
 
 const fileTypes = ['ofb', 'stp', 'stl'];
 
-/**
- * The model tree header.
- *
- * Responsibility:
- * - Show name of current instance
- * - Show back button
- * - Show assembly node menu
- *      - Provide convert to template functionality
- *      - Provide import/add functionality
+/**
+ * The model tree header.
+ *
+ * Responsibility:
+ * - Show name of current instance
+ * - Show back button
+ * - Show assembly node menu
+ *      - Provide convert to template functionality
+ *      - Provide import/add functionality
  */
 const ModelTreeHeader = ({
   drawingId
@@ -23038,8 +23064,8 @@ const ModelTreeHeader = ({
   }));
 };
 
-/**
- * Modal dialog to define the name of the new created assembly tempate.
+/**
+ * Modal dialog to define the name of the new created assembly tempate.
  */
 const NameChoice = ({
   drawingId,
@@ -23093,13 +23119,13 @@ const ModelTreeImpl = ({
   })), mode === EditMode.None && /*#__PURE__*/React__default.createElement(ListPlaceholder, null));
 };
 
-/**
- * Component which shows structure of model.
- * In part mode a list of part features is shown. In assembly mode a tree of assembly nodes is shown.
- * It checks root and currentProduct to understand which mode is currently enabled. Check useEditMode hook for more details.
- *
- * @param drawingId
- * @returns
+/**
+ * Component which shows structure of model.
+ * In part mode a list of part features is shown. In assembly mode a tree of assembly nodes is shown.
+ * It checks root and currentProduct to understand which mode is currently enabled. Check useEditMode hook for more details.
+ *
+ * @param drawingId
+ * @returns
  */
 const ModelTree = ({
   drawingId
@@ -23437,11 +23463,11 @@ const List = ({
   }))));
 };
 
-/**
- * Shows list of solids available in the current application context.
- *
- * @param drawingId - id of a drawing.
- * @returns
+/**
+ * Shows list of solids available in the current application context.
+ *
+ * @param drawingId - id of a drawing.
+ * @returns
  */
 const Solids = ({
   drawingId
@@ -23502,7 +23528,7 @@ const SideBar = ({
   }));
 };
 
-var css_248z$1 = ".toolbar-dropdown .ant-dropdown-menu-root {\r\n  margin-left: -24px;\r\n}\r\n";
+var css_248z$1 = ".toolbar-dropdown .ant-dropdown-menu-root {\n  margin-left: -24px;\n}\n";
 styleInject(css_248z$1);
 
 var img$B = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='100' height='100' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e %3cg stroke='black' stroke-width='5'%3e %3cpath d='m20 20 20 20c-37.015 3.8681-19.657 36.676 0 30l20-40c27.5 15 15 15 0 30l20 20' fill='none' stroke-linecap='round' stroke-linejoin='round' style='paint-order:stroke markers fill'/%3e %3cpath d='m88 80a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8zm-60-60a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8z' fill='white' style='paint-order:markers fill stroke'/%3e %3cpath d='m63 60a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3zm0-30a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3zm-20 40a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3zm0-30a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3z' style='paint-order:markers fill stroke'/%3e %3c/g%3e%3c/svg%3e";
@@ -24238,13 +24264,13 @@ const Header = ({
   })));
 };
 
-/**
- * Component which provides convenient UI for working with models which is loaded to existing drawing.
- * It includes ModelTree, Constraints and Solids components and toolbar for creating new features/3dconstraints
- * Drawing doesn't contain canvas component, so all graphics should be provided as children.
- *
- * @param drawingId - id of an existing drawing.
- * @param Menu - you can pass custom file menu which will be shown at the left top corner.
+/**
+ * Component which provides convenient UI for working with models which is loaded to existing drawing.
+ * It includes ModelTree, Constraints and Solids components and toolbar for creating new features/3dconstraints
+ * Drawing doesn't contain canvas component, so all graphics should be provided as children.
+ *
+ * @param drawingId - id of an existing drawing.
+ * @param Menu - you can pass custom file menu which will be shown at the left top corner.
  */
 const Drawing = ({
   drawingId,
@@ -24282,16 +24308,16 @@ const Drawing = ({
 };
 
 const _excluded$1 = ["items", "children"];
-/**
- * Context menu. By default it's rendered as thee dots "...", when user hovers it the menuitems is shown.
- * It's possible to show an icon instead of "..." - just render an icon you whant to show as a Menu child.
- *
- * If you want to have nested level of menu items you need to fill children prop of a menu item with SubMenuItems (check src/components/UI/CAD/plugin/ProductManagement/useMenuItems.tsx:"export")
- *
- * @param items - Object contains items you whant to show in the menu. An item should contain caption and callback, it also migh has optional props: icon and children.
- * @param children - Any component which will be shown as a button which opens menu, if no children passed three dots "..." are shown.
- * @param DropDownProps - Since Menu is implemented using DropDown from "antd" you can pass any of DropDown props (except 'overltay') to customize the menu.
- * @returns
+/**
+ * Context menu. By default it's rendered as thee dots "...", when user hovers it the menuitems is shown.
+ * It's possible to show an icon instead of "..." - just render an icon you whant to show as a Menu child.
+ *
+ * If you want to have nested level of menu items you need to fill children prop of a menu item with SubMenuItems (check src/components/UI/CAD/plugin/ProductManagement/useMenuItems.tsx:"export")
+ *
+ * @param items - Object contains items you whant to show in the menu. An item should contain caption and callback, it also migh has optional props: icon and children.
+ * @param children - Any component which will be shown as a button which opens menu, if no children passed three dots "..." are shown.
+ * @param DropDownProps - Since Menu is implemented using DropDown from "antd" you can pass any of DropDown props (except 'overltay') to customize the menu.
+ * @returns
  */
 
 const Menu = _ref => {
@@ -24645,7 +24671,7 @@ var index$g = /*#__PURE__*/Object.freeze({
   description: description$g
 });
 
-var css_248z = "/*\r\n  The only way to customize color picker from react-colorful is using css classes, so we need this file here.\r\n*/\r\n.colorPicker {\r\n  padding: 6px;\r\n}\r\n\r\n.colorPicker .react-colorful {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n.colorPicker .react-colorful__saturation {\r\n  width: 100%;\r\n  height: auto !important;\r\n  aspect-ratio: 1 / 1;\r\n  border-radius: 4px 4px 0 0;\r\n}\r\n\r\n.colorPicker .react-colorful__hue {\r\n  height: 20px;\r\n}\r\n\r\n.colorPicker .react-colorful__pointer {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n.colorPicker .react-colorful__last-control {\r\n  border-radius: 0 0 4px 4px;\r\n}\r\n";
+var css_248z = "/*\n  The only way to customize color picker from react-colorful is using css classes, so we need this file here.\n*/\n.colorPicker {\n  padding: 6px;\n}\n\n.colorPicker .react-colorful {\n  width: 100%;\n  height: auto;\n}\n\n.colorPicker .react-colorful__saturation {\n  width: 100%;\n  height: auto !important;\n  aspect-ratio: 1 / 1;\n  border-radius: 4px 4px 0 0;\n}\n\n.colorPicker .react-colorful__hue {\n  height: 20px;\n}\n\n.colorPicker .react-colorful__pointer {\n  width: 20px;\n  height: 20px;\n}\n\n.colorPicker .react-colorful__last-control {\n  border-radius: 0 0 4px 4px;\n}\n";
 styleInject(css_248z);
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -25186,11 +25212,11 @@ const Root$e = ({
   }));
 };
 
-/**
- * Validator for CSysDisplay component. Checks drawing and currentInstance existance.
- *
- * @param drawingId
- * @returns
+/**
+ * Validator for CSysDisplay component. Checks drawing and currentInstance existance.
+ *
+ * @param drawingId
+ * @returns
  */
 const CSysDisplayValidator = ({
   drawingId,
@@ -28294,11 +28320,11 @@ const ProdList = ({
   }));
 };
 
-/**
- * Validator for ProductManagement plugin. Checks drawing, root, partContainer and AssemblyContainer existance.
- *
- * @param drawingId
- * @returns
+/**
+ * Validator for ProductManagement plugin. Checks drawing, root, partContainer and AssemblyContainer existance.
+ *
+ * @param drawingId
+ * @returns
  */
 const ProductManagementValidator = ({
   drawingId,
@@ -28595,8 +28621,8 @@ const View = ({
   }));
 };
 
-/**
- * ProductManagement plugin is responsible for showing/creation/deletion parts and assemblies
+/**
+ * ProductManagement plugin is responsible for showing/creation/deletion parts and assemblies
  */
 const description = {
   name: 'Product Management',
@@ -28708,8 +28734,8 @@ const RecalcIfChanged = ({
   return null;
 };
 
-/**
- * Contains combined visible plugin geometry bounding box
+/**
+ * Contains combined visible plugin geometry bounding box
  */
 const PluginGeometryBounds = ({
   drawingId