@buerli.io/react-cad 0.5.0-beta.3 → 0.5.0

package/build/index.cjs.js

@@ -56,8 +56,8 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 var deepmerge__namespace = /*#__PURE__*/_interopNamespaceDefault(deepmerge);
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function getGraphicId(tree, refOrObjId) {
   const res = {
     graphicId: refOrObjId,
@@ -120,7 +120,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
     window.console.error('Product is not a CC_Part. Assembly is not supported now');
   }
   const createSelItem = React.useCallback(element => {
-    return core.createGraphicItem(prodId, _objectSpread$p(_objectSpread$p({}, element), {}, {
+    return core.createGraphicItem(prodId, _objectSpread$q(_objectSpread$q({}, element), {}, {
       productId: prodId
     }));
   }, [prodId]);
@@ -145,7 +145,7 @@ function useSelectedItems(drawingId, refOrObjIds) {
             if (grIds && grIds.length > 0) {
               const elem = cont.map[Number(grIds[0])];
               if (elem) {
-                elems.push(_objectSpread$p(_objectSpread$p({}, elem), {}, {
+                elems.push(_objectSpread$q(_objectSpread$q({}, elem), {}, {
                   graphicId: contId,
                   type: cont.type
                 }));
@@ -181,8 +181,8 @@ function useSelectedItems(drawingId, refOrObjIds) {
   return selectedItems;
 }
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function addMembers(drawingId, ccObjId) {
   const drawingState = core.getDrawing(drawingId);
   const objInTree = drawingState.structure.tree[ccObjId];
@@ -193,7 +193,7 @@ function addMembers(drawingId, ccObjId) {
   const members = {};
   Object.keys(curMembers).forEach(memberName => {
     const curMember = curMembers[memberName];
-    members[memberName] = _objectSpread$o(_objectSpread$o({}, curMember), {}, {
+    members[memberName] = _objectSpread$p(_objectSpread$p({}, curMember), {}, {
       name: memberName
     });
     if (curMember.type === core.MemberType.POINT && Array.isArray(curMember.value)) {
@@ -394,11 +394,6 @@ function findObject(drawingId, id, unrollRefs = false) {
   }
   return undefined;
 }
-function round(value, digits) {
-  if (isNaN(value)) return NaN;
-  const factor = Math.pow(10, digits);
-  return Math.round(value * factor) / factor;
-}
 function componentToHex(x) {
   const hex = x.toString(16);
   return hex.length == 1 ? '0' + hex : hex;
@@ -531,8 +526,11 @@ const Wrapper = ({
   }, children));
 };
 
+function isDegValue(expr) {
+  return expr.length > 0 && expr[expr.length - 1] === 'g' && !isNaN(Number(expr.slice(0, expr.length - 1)));
+}
 function getDefNumValue(numOrExpr) {
-  return typeof numOrExpr === 'number' ? numOrExpr : 0;
+  return typeof numOrExpr === 'number' ? numOrExpr : isDegValue(numOrExpr) ? numOrExpr : 0;
 }
 function getDefExprValue(numOrExpr) {
   return typeof numOrExpr === 'string' ? numOrExpr : String(numOrExpr);
@@ -546,7 +544,7 @@ const NumOrExpr = ({
   prefix
 }) => {
   const [state, setState] = React.useState({
-    isExpr: Boolean(typeof valOrExpr === 'string' && allowExpr),
+    isExpr: Boolean(typeof valOrExpr === 'string' && !isDegValue(valOrExpr) && allowExpr),
     defaultVal: getDefNumValue(defaults),
     defaultExpr: getDefExprValue(defaults)
   });
@@ -555,12 +553,6 @@ const NumOrExpr = ({
     defaultVal,
     defaultExpr
   } = state;
-
-  // TODO: This effect is probably not needed anymore? Remove if no issues are found
-  /* React.useEffect(() => {
-    setIsExpr(typeof valOrExpr === 'string')
-  }, [valOrExpr]) */
-
   const prefixed = prefix !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -616,9 +608,11 @@ const NumInput$1 = ({
   } = react.useBuerli(buerli => buerli.options.elements);
   const [sValue, setSValue] = React.useState(String(value));
   React.useEffect(() => {
-    const float = parseFloat(sValue);
+    const float = Number(sValue);
     if (!isNaN(float)) {
       onChange(float); // Call onChange of parent component
+    } else if (isDegValue(sValue)) {
+      onChange(sValue);
     } else {
       onChange(value);
     }
@@ -630,14 +624,14 @@ const NumInput$1 = ({
     target
   }) => {
     const val = target.value;
-    const reg = /^-?(\d*(\.\d*)?)?$/; // Regexpr for float number
+    const reg = /^-?(\d*(\.\d*)?)?g?$/; // Regexpr for float number
     if (reg.test(val) || val === '') {
       setSValue(val); // Remove extra zeros from the begin
     }
   }, []);
   const onBlur = React.useCallback(() => {
-    const float = parseFloat(sValue);
-    if (isNaN(float)) {
+    const float = Number(sValue);
+    if (isNaN(float) && !isDegValue(sValue)) {
       setSValue(String(value));
     }
   }, [value, sValue]);
@@ -794,11 +788,13 @@ const Suffix = ({
 }) => {
   const onClick = React.useCallback(() => {
     if (state.isExpr && state.defaultVal !== undefined) {
+      const isDeg = typeof valOrExpr === 'string' && isDegValue(valOrExpr);
       const float = Number(valOrExpr);
-      if (!isNaN(float)) {
+      const newDefaultVal = isDeg ? valOrExpr : !isNaN(float) ? float : undefined;
+      if (newDefaultVal !== undefined) {
         setState({
           isExpr: false,
-          defaultVal: float,
+          defaultVal: newDefaultVal,
           defaultExpr: state.defaultExpr
         });
         return;
@@ -1001,19 +997,13 @@ function useParam(param, getServValue, validation) {
   }, [userValue, setUserValue, defaults, isChanged, defValidator, setDefValidator, getServValue, validator, setValidator]);
 }
 
-function createRealParam(member, angle) {
+function createRealParam(member) {
   // In the old models if member doesn't contain experssion, the value is stored in the member.expression as string
   // For example 'limit2' member for an extrusion looks like this: {expression: "50", type: "real", value: 50, visible: 1}
   // These expressions should be ignored.
   const expr = member.expression;
   const isExpr = expr.length > 0 && isNaN(Number(expr));
-  let value = '';
-  if (isExpr) {
-    value = angle ? member.expression.replace(/(a_r\()(.+)(\))/, '$2') // a_r(ExpressionSet.foo) --> ExpressionSet.foo
-    : expr;
-  } else {
-    value = angle ? round(radiansToDegrees(member.value), 2) : member.value;
-  }
+  const value = isExpr ? expr : member.value;
   return {
     value,
     isExpr
@@ -1022,20 +1012,17 @@ function createRealParam(member, angle) {
 function useNumParam(drawingId, objId, memberName, options = {
   angle: false
 }) {
-  const {
-    angle
-  } = options;
   const member = react.useDrawing(drawingId, d => {
     var _d$structure$tree$obj, _d$structure$tree$obj2;
     return (_d$structure$tree$obj = d.structure.tree[objId]) == null ? void 0 : (_d$structure$tree$obj2 = _d$structure$tree$obj.members) == null ? void 0 : _d$structure$tree$obj2[memberName];
   });
-  const [userValue, setUserValue] = React.useState(createRealParam(member, angle));
+  const [userValue, setUserValue] = React.useState(createRealParam(member));
 
   // Update userValue if member is changed in tree
   React.useEffect(() => {
-    setUserValue(createRealParam(member, angle));
-  }, [member, angle]);
-  const defaults = React.useMemo(() => createRealParam(member, angle), [member, angle]);
+    setUserValue(createRealParam(member));
+  }, [member]);
+  const defaults = React.useMemo(() => createRealParam(member), [member]);
   const isChanged = React.useCallback(() => {
     return userValue.isExpr !== defaults.isExpr || userValue.value !== defaults.value;
   }, [defaults, userValue]);
@@ -1044,18 +1031,6 @@ function useNumParam(drawingId, objId, memberName, options = {
     setUserValue,
     defaults,
     isChanged
-  }, function (userValue_) {
-    if (userValue_.isExpr) {
-      return {
-        value: angle ? 'a_r(' + userValue_.value + ')' : userValue_.value,
-        isExpr: true
-      };
-    } else {
-      return {
-        value: angle ? degreesToRadians(userValue_.value) : userValue_.value,
-        isExpr: false
-      };
-    }
   });
 }
 
@@ -1083,8 +1058,8 @@ const isAngular = dim => {
   return dim.class === classcad.CCClasses.CCAngularDimension || dim.class === classcad.CCClasses.CCAngularFeatureDimension || dim.class === classcad.CCClasses.CCAngularRefDimension;
 };
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const appApi = (set, get) => ({
   assemblyTree: {
     startProdEditing: (drawingId, objId) => {
@@ -1093,7 +1068,7 @@ const appApi = (set, get) => ({
         const curNode = core.api.getState().drawing.refs[drawingId].structure.currentNode;
         res = state.assemblyTree.prodStack;
         curNode && res.push(curNode);
-        return _objectSpread$n(_objectSpread$n({}, state), {}, {
+        return _objectSpread$o(_objectSpread$o({}, state), {}, {
           assemblyTree: {
             prodStack: [...res]
           }
@@ -1108,7 +1083,7 @@ const appApi = (set, get) => ({
       set(state => {
         const res = state.assemblyTree.prodStack;
         res.pop();
-        return _objectSpread$n(_objectSpread$n({}, state), {}, {
+        return _objectSpread$o(_objectSpread$o({}, state), {}, {
           assemblyTree: {
             prodStack: [...res]
           }
@@ -1117,7 +1092,7 @@ const appApi = (set, get) => ({
       classcad.ccAPI.assemblyBuilder.setCurrentNode(drawingId, prevProd).catch(console.warn);
     },
     clearProdStack: () => {
-      set(state => _objectSpread$n(_objectSpread$n({}, state), {}, {
+      set(state => _objectSpread$o(_objectSpread$o({}, state), {}, {
         assemblyTree: {
           prodStack: []
         }
@@ -1126,7 +1101,7 @@ const appApi = (set, get) => ({
   },
   blankDiv: {
     show: callback => {
-      set(state => _objectSpread$n(_objectSpread$n({}, state), {}, {
+      set(state => _objectSpread$o(_objectSpread$o({}, state), {}, {
         blankDiv: {
           isActive: true,
           onClose: callback
@@ -1134,7 +1109,7 @@ const appApi = (set, get) => ({
       }));
     },
     hide: () => {
-      set(state => _objectSpread$n(_objectSpread$n({}, state), {}, {
+      set(state => _objectSpread$o(_objectSpread$o({}, state), {}, {
         blankDiv: {
           isActive: false,
           onClose: undefined
@@ -1231,15 +1206,13 @@ const DimValue = ({
   const caption = React.useMemo(() => {
     var _master$members2, _master$members3;
     // const paramName = dimension.members.paramName.value
-    let value = (_master$members2 = master.members) == null ? void 0 : _master$members2[memberName].value;
-    let expr = (_master$members3 = master.members) == null ? void 0 : _master$members3[memberName].expression.replace(/ /g, '').replace(/ExpressionSet./g, '@');
-    if (isAngular(dimension)) {
-      value = radiansToDegrees(value);
-      // a_r(@foo) --> @foo
-      expr = expr.replace(/(a_r\()(.+)(\))/, '$2');
-    }
-    return expr ? expr + ' (' + value.toFixed(2) + ')' : value.toFixed(2);
-  }, [master, dimension, memberName]);
+    const expr = (_master$members2 = master.members) == null ? void 0 : _master$members2[memberName].expression.replace(/ /g, '').replace(/ExpressionSet./g, '@');
+    const degValue = expr.length > 0 && expr[expr.length - 1] === 'g' ? Number(expr.slice(0, expr.length - 1)) : NaN;
+    const isDeg = !isNaN(degValue);
+    const value = isDeg ? degValue : (_master$members3 = master.members) == null ? void 0 : _master$members3[memberName].value;
+    const valueStr = isDeg ? value.toFixed(2) + 'g' : value.toFixed(2);
+    return expr && !isDeg ? expr + ' (' + valueStr + ')' : valueStr;
+  }, [master, memberName]);
   const [editMode, setEditMode] = React.useState(false);
   React.useEffect(() => {
     if (editMode) {
@@ -2346,8 +2319,8 @@ function useRefsParam(drawingId, objId, memberName) {
   });
 }
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Implies the following data structure:
@@ -2475,7 +2448,7 @@ function useTreeObjSelection(drawingId, objId) {
   const isSelected = useIsSelected$1(drawingId, objId);
   const handlers = React.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$m(_objectSpread$m({}, hHandlers), sHandlers);
+      return _objectSpread$n(_objectSpread$n({}, hHandlers), sHandlers);
     }
     return {};
   }, [isSelectable, hHandlers, sHandlers]);
@@ -2949,8 +2922,8 @@ const SelectionRestorer = ({
   return null;
 };
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Implies the following data structure:
@@ -3044,7 +3017,7 @@ function useMateSelection(drawingId, matePath, csysId) {
   }));
   const handlers = React.useMemo(() => {
     if (isSelectable) {
-      return _objectSpread$l(_objectSpread$l({}, hHandlers), sHandlers);
+      return _objectSpread$m(_objectSpread$m({}, hHandlers), sHandlers);
     }
     return {};
   }, [isSelectable, hHandlers, sHandlers]);
@@ -3704,8 +3677,8 @@ var index$x = /*#__PURE__*/Object.freeze({
   description: description$x
 });
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function parseVal(val) {
   const float = Number(val);
   if (!isNaN(float)) {
@@ -3713,26 +3686,35 @@ function parseVal(val) {
   }
   return val;
 }
-function getCompFromExpr(expr, comp) {
-  // Expression string for point looks like that "{ExpressionSet.XComp, 10, ExpressionSet.ZComp}"
-  let str = expr.replace(/ /g, ''); // remove all spaces...
+function parsePoint(param) {
+  if (!param.isExpr) {
+    const value = param.value;
+    return [value.x, value.y, value.z];
+  }
+  let str = param.value.replace(/ /g, ''); // remove all spaces...
   str = str.substr(1, str.length - 2); // ... and brackets from the beginning and end of the string.
-  const array = str.split(',');
-  return comp === 'x' ? parseVal(array[0]) : comp === 'y' ? parseVal(array[1]) : parseVal(array[2]);
-}
-function getPMemComponent(param, comp) {
-  if (param.isExpr) {
-    return getCompFromExpr(param.value, comp);
-  } else {
-    return param.value[comp];
+
+  // Respect braces and ignore commas as component separators if they are nested within braces (i.e. as function parameter separators)
+  // Should break the expression string into exactly 3 components
+  let depth = 0;
+  let subStart = 0;
+  let comps = [];
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') depth++;
+    if (str[i] === ')') depth--;
+    if (str[i] === ',' && depth === 0) {
+      comps.push(parseVal(str.slice(subStart, i)));
+      subStart = i + 1;
+    }
   }
-}
-function getDefaultsComp(defaults, comp) {
-  if (defaults.isExpr) {
-    return getCompFromExpr(defaults.value, comp);
+  if (depth === 0 && comps.length === 2) {
+    comps.push(parseVal(str.slice(subStart, str.length)));
   } else {
-    return defaults.value[comp];
+    // Expression is somehow incorrect, return an array of 0-values
+    window.console.log('Error when parsing point expression!');
+    comps = [0, 0, 0];
   }
+  return comps;
 }
 function getDisplayValue(valOrExpr) {
   return typeof valOrExpr === 'string' ? valOrExpr.replace(/ /g, '').replace(/ExpressionSet./g, '@') : valOrExpr.toString();
@@ -3875,9 +3857,10 @@ const PointEditor = ({
     setUserValue,
     defaults
   } = param;
-  const [x, setX] = React.useState(() => getPMemComponent(userValue, 'x'));
-  const [y, setY] = React.useState(() => getPMemComponent(userValue, 'y'));
-  const [z, setZ] = React.useState(() => getPMemComponent(userValue, 'z'));
+  const parsedDefaults = React.useMemo(() => parsePoint(defaults), [defaults]);
+  const [x, setX] = React.useState(parsedDefaults[0]);
+  const [y, setY] = React.useState(parsedDefaults[1]);
+  const [z, setZ] = React.useState(parsedDefaults[2]);
   React.useEffect(() => {
     if (typeof x === 'string' || typeof y === 'string' || typeof z === 'string') {
       setUserValue({
@@ -3917,23 +3900,30 @@ const PointEditor = ({
   }, [validatorWrapper, setValidator]);
   const [displayState, setDisplayState] = React.useState({
     editMode: false,
-    displayVals: {
-      x: 0,
-      y: 0,
-      z: 0
-    }
+    displayVals: [0, 0, 0]
   });
   React.useEffect(() => {
-    if (userValue.isExpr) {
+    if (userValue.isExpr && !isDegValue(userValue.value)) {
       const curProdId = core.getDrawing(drawingId).structure.currentProduct;
       const tree = core.getDrawing(drawingId).structure.tree;
       const exprSetId = tree[curProdId].expressionSet;
-      classcad.ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
-        displayVals: res !== null ? res : state.displayVals
-      }))).catch();
+      classcad.ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => setDisplayState(state => {
+        const res_ = res;
+        const newVals = res_ !== null ? [res_.x, res_.y, res_.z] : [...state.displayVals];
+        const parsedPoint = parsePoint(userValue);
+        parsedPoint.forEach((val, i) => {
+          if (typeof val === 'string' && isDegValue(val)) {
+            newVals[i] = val;
+          }
+        });
+        return _objectSpread$l(_objectSpread$l({}, state), {}, {
+          displayVals: newVals
+        });
+      })).catch();
     } else {
-      setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
-        displayVals: userValue.value
+      const value = userValue.value;
+      setDisplayState(state => _objectSpread$l(_objectSpread$l({}, state), {}, {
+        displayVals: [value.x, value.y, value.z]
       }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3943,16 +3933,20 @@ const PointEditor = ({
       const curProdId = core.getDrawing(drawingId).structure.currentProduct;
       const tree = core.getDrawing(drawingId).structure.tree;
       const exprSetId = tree[curProdId].expressionSet;
-      classcad.ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => setDisplayState(state => ({
-        editMode: false,
-        displayVals: res !== null ? res : state.displayVals
-      }))).catch(() => setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
+      classcad.ccAPI.common.evaluateExpression(drawingId, exprSetId, userValue.value).then(res => {
+        const res_ = res;
+        setDisplayState(state => ({
+          editMode: false,
+          displayVals: res_ !== null ? [res_.x, res_.y, res_.z] : [...state.displayVals]
+        }));
+      }).catch(() => setDisplayState(state => _objectSpread$l(_objectSpread$l({}, state), {}, {
         editMode: false
       })));
     } else {
+      const value = userValue.value;
       setDisplayState({
         editMode: false,
-        displayVals: userValue.value
+        displayVals: [value.x, value.y, value.z]
       });
     }
   }, [drawingId, userValue]);
@@ -3964,7 +3958,7 @@ const PointEditor = ({
     caption: caption,
     highlighted: param.isChanged()
   }, !editMode && /*#__PURE__*/React.createElement(DisplayBase, {
-    onClick: () => setDisplayState(state => _objectSpread$k(_objectSpread$k({}, state), {}, {
+    onClick: () => setDisplayState(state => _objectSpread$l(_objectSpread$l({}, state), {}, {
       editMode: true
     }))
   }, /*#__PURE__*/React.createElement(Tooltip, {
@@ -3980,7 +3974,7 @@ const PointEditor = ({
       gridColumnEnd: '3',
       width: '100%'
     }
-  }, displayVals.x.toString()), typeof x === 'string' && /*#__PURE__*/React.createElement(ExprMark, {
+  }, displayVals[0].toString()), typeof x === 'string' && !isDegValue(x) && /*#__PURE__*/React.createElement(ExprMark, {
     style: {
       right: '-3px'
     }
@@ -3993,7 +3987,7 @@ const PointEditor = ({
       gridColumnEnd: '3',
       width: '100%'
     }
-  }, displayVals.y.toString()), typeof y === 'string' && /*#__PURE__*/React.createElement(ExprMark, {
+  }, displayVals[1].toString()), typeof y === 'string' && !isDegValue(y) && /*#__PURE__*/React.createElement(ExprMark, {
     style: {
       right: '-5px'
     }
@@ -4010,7 +4004,7 @@ const PointEditor = ({
       gridColumnEnd: '3',
       width: '100%'
     }
-  }, displayVals.z.toString()), typeof z === 'string' && /*#__PURE__*/React.createElement(ExprMark, {
+  }, displayVals[2].toString()), typeof z === 'string' && !isDegValue(z) && /*#__PURE__*/React.createElement(ExprMark, {
     style: {
       right: '-9px'
     }
@@ -4022,21 +4016,21 @@ const PointEditor = ({
     drawingId: drawingId,
     valOrExpr: x,
     onChange: setX,
-    defaults: getDefaultsComp(defaults, 'x'),
+    defaults: parsedDefaults[0],
     allowExpr: true,
     prefix: "x:"
   })), /*#__PURE__*/React.createElement(EditY, null, /*#__PURE__*/React.createElement(NumOrExpr, {
     drawingId: drawingId,
     valOrExpr: y,
     onChange: setY,
-    defaults: getDefaultsComp(defaults, 'y'),
+    defaults: parsedDefaults[1],
     allowExpr: true,
     prefix: "y:"
   })), /*#__PURE__*/React.createElement(EditZ, null, /*#__PURE__*/React.createElement(NumOrExpr, {
     drawingId: drawingId,
     valOrExpr: z,
     onChange: setZ,
-    defaults: getDefaultsComp(defaults, 'z'),
+    defaults: parsedDefaults[2],
     allowExpr: true,
     prefix: "z:"
   })), /*#__PURE__*/React.createElement(Collapse, {
@@ -4044,29 +4038,11 @@ const PointEditor = ({
   }, "\u2014")));
 };
 
-const toDeg = comp => round(radiansToDegrees(comp), 2);
-function createPointParam(member, angle) {
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function createPointParam(member) {
   const isExpr = member.expression.length > 0;
-  let value = '';
-  if (isExpr) {
-    value = angle ? member.expression.replace(/{a_r\((.+)\), *a_r\((.+)\), *a_r\((.+)\)}/, '{$1, $2, $3}') // {a_r(ExpressionSet.foo), a_r(42), a_r(0.5)} --> {ExpressionSet.foo, 42, 0.5}
-    : member.expression;
-  } else {
-    const {
-      x,
-      y,
-      z
-    } = member.value;
-    value = angle ? {
-      x: toDeg(x),
-      y: toDeg(y),
-      z: toDeg(z)
-    } : {
-      x,
-      y,
-      z
-    };
-  }
+  const value = isExpr ? member.expression : _objectSpread$k({}, member.value);
   return {
     value,
     isExpr
@@ -4075,18 +4051,15 @@ function createPointParam(member, angle) {
 function usePointParam(drawingId, objId, memberName, options = {
   angle: false
 }) {
-  const {
-    angle
-  } = options;
   const member = react.useDrawing(drawingId, d => {
     var _d$structure$tree$obj, _d$structure$tree$obj2;
     return (_d$structure$tree$obj = d.structure.tree[objId]) == null ? void 0 : (_d$structure$tree$obj2 = _d$structure$tree$obj.members) == null ? void 0 : _d$structure$tree$obj2[memberName];
   });
-  const defaults = React.useMemo(() => createPointParam(member, angle), [member, angle]);
+  const defaults = React.useMemo(() => createPointParam(member), [member]);
   const [userValue, setUserValue] = React.useState(defaults);
   React.useEffect(() => {
-    setUserValue(createPointParam(member, angle));
-  }, [member, angle]);
+    setUserValue(createPointParam(member));
+  }, [member]);
   const isChanged = React.useCallback(() => {
     if (userValue.isExpr !== defaults.isExpr) {
       return true;
@@ -4099,35 +4072,12 @@ function usePointParam(drawingId, objId, memberName, options = {
       return value.x !== defValue.x || value.y !== defValue.y || value.z !== defValue.z;
     }
   }, [defaults, userValue]);
-  const getServValue = React.useCallback(userValue_ => {
-    if (userValue_.isExpr) {
-      return {
-        value: angle ? userValue_.value.replace(/{(.+), *(.+), *(.+)}/, '{a_r($1), a_r($2), a_r($3)}') // {ExpressionSet.foo, 42, 0.5} --> {a_r(ExpressionSet.foo), a_r(42), a_r(0.5)}
-        : userValue_.value,
-        isExpr: true
-      };
-    } else {
-      const {
-        x,
-        y,
-        z
-      } = userValue_.value;
-      return {
-        value: angle ? {
-          x: degreesToRadians(x),
-          y: degreesToRadians(y),
-          z: degreesToRadians(z)
-        } : userValue_.value,
-        isExpr: false
-      };
-    }
-  }, [angle]);
   return useParam({
     userValue,
     setUserValue,
     defaults,
     isChanged
-  }, getServValue);
+  });
 }
 
 var img$10 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADcSURBVEhL3ZTbDcMgDEVJlsgonabfnanfmaajdIlSS0aU+lWEsaLmCCkhMfheB2fJOadI1nIN49wJlv0Jo0xGURPUrZ05wkskH1OuOl+3ctfQE3bERxaLbnyJ+2WFUSYMy4G9shO63lBqvDJQBVbtThNfi39qHDAhqyOqPSY+fcDV4b63xwunFTjsbTAPa7thXFonQidXdURaq4vEIBhJmnnQAf8l8Eoi3hJp+1bGE3ATAH/odQCACcOHKwHRK3qa4AARdwemJdCw+oCgabQJd3BEieby/yUKTpDSG4InWqXAb1/sAAAAAElFTkSuQmCC";
@@ -15737,7 +15687,7 @@ const RootImpl$9 = ({
     }];
     setName(undefined);
     setExpression(undefined);
-    return classcad.ccAPI.feature.updateExpressionSets(drawingId, [{
+    return classcad.ccAPI.feature.updateExpressions(drawingId, [{
       productId: productId,
       toAddMembers: toAddMembers,
       toModifyMembers: [],
@@ -15755,7 +15705,7 @@ const RootImpl$9 = ({
     }
   }, [deletedExpressions]);
   const update = React.useCallback(() => {
-    return classcad.ccAPI.feature.updateExpressionSets(drawingId, [{
+    return classcad.ccAPI.feature.updateExpressions(drawingId, [{
       productId: productId,
       toAddMembers: [],
       toModifyMembers: editedExpressions.serverValue,
@@ -18502,7 +18452,7 @@ const ImportModel = ({
         content
       }) => {
         const type = pathBrowserify.extname(file.name).replace('.', '');
-        if (['ofb', 'stp', 'step', 'stl'].includes(type)) {
+        if (['ofb', 'stp', 'step', 'stl'].includes(type == null ? void 0 : type.toLowerCase())) {
           classcad.ccAPI.assemblyBuilder.loadProduct(drawingId, content, type, file.name).catch(console.warn);
         } else {
           throw new Error('This type of file is not supported to import.');
@@ -18709,7 +18659,7 @@ const load = (file, singleDrawingApp) => {
           try {
             core.api.getState().api.setActiveDrawing(drawingId);
             const type = pathBrowserify.extname(file.name).replace('.', '');
-            if (['ofb', 'stp', 'step', 'stl'].includes(type)) {
+            if (['ofb', 'stp', 'step', 'stl'].includes(type == null ? void 0 : type.toLowerCase())) {
               await classcad.ccAPI.baseModeler.load(drawingId, result, type, file.name).catch(console.warn);
             } else {
               throw new Error('This type of file is not supported to load.');
@@ -19560,7 +19510,7 @@ const Divider = props => {
   }));
 };
 
-const animation = styled.keyframes`
+const animation$1 = styled.keyframes`
   0%,
   100% {
     box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
@@ -19619,7 +19569,7 @@ const Spinner = styled.div`
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
-  animation: ${animation} 1.1s infinite ease;
+  animation: ${animation$1} 1.1s infinite ease;
   transform: translateZ(0);
 `;
 
@@ -19667,6 +19617,9 @@ function createApi(set) {
         msgs: newMsgs
       });
     }),
+    deleteAllMsgs: () => set(prev => _objectSpread$4(_objectSpread$4({}, prev), {}, {
+      msgs: {}
+    })),
     setShown: () => {
       set(prev => {
         const msgs = _objectSpread$4({}, prev.msgs);
@@ -19698,27 +19651,49 @@ function getBorderColor(msg) {
   return '#91d5ff';
 }
 function getBackGrColor(msg) {
-  if (msg.isShown) return '#ffffff';
+  if (msg.isShown) return '#fafafa';
   if (msg.type === 'success') return '#f6ffed';
   if (msg.type === 'error') return '#fff2f0';
   if (msg.type === 'warning') return '#fffbe6';
   if (msg.type === 'busy' || msg.type === 'info') return '#e6f7ff';
   return '#e6f7ff';
 }
+function isAccentuated(msg) {
+  return msg.type === 'error' && !msg.isShown;
+}
+const animation = styled.keyframes`
+  0% {
+    background-color: #fff2f0;
+    border-color: #ffccc7;
+  }
+  50% {
+    background-color: #ffe8e0;
+    border-color: #ffaca7;
+  }
+  100% {
+    background-color: #fff2f0;
+    border-color: #ffccc7;
+  }
+`;
 const MessageWrapper = styled.div`
+  width: ${props => isAccentuated(props.msg) ? '100%' : '80%'};
+  min-width: 0px;
   border: 1px solid ${props => getBorderColor(props.msg)};
   background-color: ${props => getBackGrColor(props.msg)};
   padding: 8px 15px;
-  margin-bottom: 4px;
+  margin: 0px 0px 4px auto;
+  ${props => isAccentuated(props.msg) && styled.css`
+    -webkit-animation: ${animation} 0.5s infinite ease-in;
+  `}
 `;
 const FlexContainer = styled.div`
   display: flex;
-  align-items: center;
+  align-items: top;
 `;
 const MessageText = styled.div`
-  flex-grow: 1;
   overflow: auto;
   overflow-wrap: break-word;
+  min-width: 0px;
   max-height: 300px;
   &::-webkit-scrollbar {
     width: 12px;
@@ -19731,14 +19706,19 @@ const MessageText = styled.div`
   }
 `;
 const iconStyle = {
-  marginRight: '8px'
+  marginRight: '8px',
+  marginTop: '1px',
+  fontSize: '20px'
 };
 const CloseButton = styled.button`
-  margin-left: 8px;
   padding: 0;
   overflow: hidden;
+  width: 12px;
+  height: 12px;
   font-size: 12px;
   line-height: 12px;
+  margin-left: 8px;
+  margin-top: 5px;
   background-color: transparent;
   border: none;
   outline: none;
@@ -19747,7 +19727,7 @@ const CloseButton = styled.button`
 const Time = styled.div`
   font-size: 0.7rem;
   color: #adadad;
-  margin-left: 20px;
+  margin-left: 28px;
 `;
 function getTime(timestamp) {
   const date = new Date(timestamp);
@@ -19788,7 +19768,11 @@ const Message = ({
     msg: msg
   }, /*#__PURE__*/React.createElement(FlexContainer, null, /*#__PURE__*/React.createElement(Icon$1, {
     type: type
-  }), /*#__PURE__*/React.createElement(MessageText, null, `${msg.title} ${msg.text}`), /*#__PURE__*/React.createElement(CloseButton, {
+  }), /*#__PURE__*/React.createElement(MessageText, {
+    style: {
+      flex: 1
+    }
+  }, `${msg.title ? msg.title : ''} ${msg.text}`), /*#__PURE__*/React.createElement(CloseButton, {
     onClick: () => msgApi.deleteMsg(msgId)
   }, /*#__PURE__*/React.createElement(icons.CloseOutlined, null))), /*#__PURE__*/React.createElement(Time, null, getTime(msg.timestamp)));
 };
@@ -19796,9 +19780,8 @@ const Message = ({
 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; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MsgListWrapper = styled.div`
+  width: 500px;
   max-height: 500px;
-  max-width: 400px;
-  min-width: 300px;
   overflow-y: auto;
   &::-webkit-scrollbar {
     width: 12px;
@@ -19812,19 +19795,22 @@ const MsgListWrapper = styled.div`
   z-index: ${blankZIndex + 1};
 `;
 const MessageList = ({
-  drawingId
+  isOpen
 }) => {
-  const msgsIds = useMsgStore(s => {
+  const msgApi = useMsgStore(s => s.api);
+  const msgIds = useMsgStore(s => {
     // Return array of messages with fresh messages in the beginning
-    return Object.keys(s.msgs).sort((id1, id2) => s.msgs[id2].timestamp - s.msgs[id1].timestamp);
+    const allMsgIds = Object.keys(s.msgs).sort((id1, id2) => s.msgs[id2].timestamp - s.msgs[id1].timestamp);
+    return isOpen ? allMsgIds : allMsgIds.filter(id => s.msgs[id].type === 'error' && !s.msgs[id].isShown);
   });
-  const msgsApi = useMsgStore(s => s.api);
 
-  // Set isShow = true for all messages in store on unmount
+  // Set isShown = true for all messages in store on unhover / unpin
   React.useEffect(() => {
-    return () => msgsApi.setShown();
-  }, [msgsApi]);
-  return /*#__PURE__*/React.createElement(MsgListWrapper, null, msgsIds.map(msgId => /*#__PURE__*/React.createElement(Message, {
+    if (!isOpen) {
+      msgApi.setShown();
+    }
+  }, [isOpen, msgApi]);
+  return /*#__PURE__*/React.createElement(MsgListWrapper, null, msgIds.map(msgId => /*#__PURE__*/React.createElement(Message, {
     msgId: msgId,
     key: msgId
   })));
@@ -19832,15 +19818,30 @@ const MessageList = ({
 const Messages = ({
   drawingId
 }) => {
-  const [showList, setShowList] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isPinned, setIsPinned] = React.useState(true);
   const [showBadge, setShowBadge] = React.useState(false);
+  const isOpen = isHovered || isPinned;
   const timestamp = react.useBuerli(state => state.message.timestamp);
   const msg = react.useBuerli(state => state.message.data);
   const msgsApi = useMsgStore(s => s.api);
-  const msgsLen = useMsgStore(s => Object.keys(s.msgs).length);
-  React.useEffect(() => setShowBadge(true), [timestamp]);
 
-  // Add recent message to msgs store
+  // If there are some new messages, and the message list is not shown, then display the badge
+  React.useEffect(() => {
+    if (!isOpen) {
+      setShowBadge(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timestamp]);
+
+  // Whenever the message list is opened, stop showing the badge
+  React.useEffect(() => {
+    if (isOpen) {
+      setShowBadge(false);
+    }
+  }, [isOpen]);
+
+  // Add recent message to the store
   React.useEffect(() => {
     if (timestamp && msg && (msg.text || msg.title)) {
       msgsApi.setMsg(msg.id, _objectSpread$3(_objectSpread$3({}, msg), {}, {
@@ -19850,36 +19851,49 @@ const Messages = ({
     }
   }, [timestamp, msg, msgsApi]);
 
-  // Hide list when there is no cached messages
+  // Clean up messages on drawingId change
   React.useEffect(() => {
-    if (msgsLen === 0) setShowList(false);
-  }, [msgsLen]);
-  const onClick = React.useCallback(() => {
-    if (showList) {
-      getCADState().api.blankDiv.hide();
-    } else {
-      getCADState().api.blankDiv.show(() => setShowList(false));
-    }
-    setShowList(s => !s);
-    setShowBadge(false);
-  }, [showList]);
+    msgsApi.deleteAllMsgs();
+  }, [drawingId, msgsApi]);
+  const onClearClick = React.useCallback(() => {
+    msgsApi.deleteAllMsgs();
+  }, [msgsApi]);
+  const onMessagesClick = React.useCallback(() => {
+    setIsPinned(s => !s);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'flex-end'
-    }
-  }, showList && /*#__PURE__*/React.createElement(MessageList, {
-    drawingId: drawingId
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Messages"
+    },
+    onMouseLeave: () => setIsHovered(false)
+  }, /*#__PURE__*/React.createElement(MessageList, {
+    isOpen: isOpen
+  }), /*#__PURE__*/React.createElement(antd.Space, {
+    style: {
+      marginTop: '5px'
+    },
+    onMouseEnter: () => setIsHovered(true)
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Clear messages"
+  }, /*#__PURE__*/React.createElement(antd.Button, {
+    style: {
+      display: isOpen ? 'inline' : 'none'
+    },
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(icons.DeleteOutlined, null),
+    onClick: onClearClick
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Messages (Pin / Unpin)"
   }, /*#__PURE__*/React.createElement(antd.Badge, {
     dot: showBadge
   }, /*#__PURE__*/React.createElement(antd.Button, {
     size: "small",
-    icon: /*#__PURE__*/React.createElement(icons.UnorderedListOutlined, null),
-    onClick: onClick
-  }))));
+    type: isPinned ? 'primary' : 'default',
+    icon: /*#__PURE__*/React.createElement(icons.MessageOutlined, null),
+    onClick: onMessagesClick
+  })))));
 };
 
 const DraggableModalContext = /*#__PURE__*/React__namespace.createContext(null);
@@ -22356,8 +22370,8 @@ const Drawing = ({
   }, children), /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      bottom: '4px',
-      right: '4px'
+      bottom: '5px',
+      right: '5px'
     }
   }, /*#__PURE__*/React.createElement(Messages, {
     drawingId: drawingId