@buerli.io/react-cad 0.13.0 → 0.13.1-beta.2

package/build/index.cjs.js

@@ -62,6 +62,49 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 var deepmerge__namespace = /*#__PURE__*/_interopNamespaceDefault(deepmerge);
 
+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
+ */
+function useDrawingArr(drawingId, selector) {
+  const res = react.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
+ */
+function useDrawingCCId(drawingId, selector) {
+  const res = react.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
+ */
+function useDrawingStr(drawingId, selector) {
+  const res = react.useDrawing(drawingId, selector);
+  return res || EMPTYSTR;
+}
+
 function ownKeys$x(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$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function getGraphicId(tree, refOrObjId) {
@@ -104,7 +147,11 @@ function getGraphicId(tree, refOrObjId) {
  */
 
 function useSelectedItems(drawingId, refOrObjIds) {
-  const visibleContainers = react.useDrawing(drawingId, d => d.structure.visibleContainers);
+  const activeContainers = useDrawingArr(drawingId, d => {
+    var _d$structure$tree;
+    return (_d$structure$tree = d.structure.tree[d.structure.currentProduct || NOCCID]) == null ? void 0 : _d$structure$tree.solids;
+  });
+  const visibleContainers = useDrawingArr(drawingId, d => d.structure.visibleContainers);
   const cacheStamp = react.useDrawing(drawingId, d => d.geometry.stamp);
   const cache = core.getDrawing(drawingId).geometry.cache;
   const sortedContainerIds = React.useMemo(() => {
@@ -115,9 +162,9 @@ function useSelectedItems(drawingId, refOrObjIds) {
           3. Remove duplicats from elems array
      */
     const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
-    const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-    return visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
-  }, [cache, visibleContainers]);
+    const sortedContainerIds_ = [...activeContainers, ...visibleContainers, ...allContainers];
+    return sortedContainerIds_.filter((grId, i) => sortedContainerIds_.indexOf(grId) === i);
+  }, [cache, activeContainers, visibleContainers]);
 
   // TODO: !!!Important!!! This may not properly create a graphic item for BuerliGeometry in assembly mode, but currently it isn't needed to.
   const prodId = core.getDrawing(drawingId).structure.currentProduct;
@@ -183,10 +230,6 @@ function useSelectedItems(drawingId, refOrObjIds) {
   return selectedItems;
 }
 
-const EMPTYARRAY = [];
-const NOCCID = Number.MIN_SAFE_INTEGER;
-const EMPTYSTR = '';
-
 function ownKeys$w(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$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function addMembers(drawingId, ccObjId) {
@@ -372,6 +415,7 @@ const stringifyValue = (value, type) => {
 
 // Searches for an object in the tree or graphic containers
 function findObject(drawingId, id, unrollRefs = false) {
+  var _drawing$structure$tr;
   const drawing = core.getDrawing(drawingId);
   const tree = drawing.structure.tree;
   const obj = tree[id];
@@ -388,9 +432,10 @@ function findObject(drawingId, id, unrollRefs = false) {
   }
   const cache = drawing.geometry.cache;
   const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
-  const visibleContainers = drawing.structure.visibleContainers;
-  const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-  const sortedContainerIds = visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
+  const activeContainers = ((_drawing$structure$tr = drawing.structure.tree[drawing.structure.currentProduct || NOCCID]) == null ? void 0 : _drawing$structure$tr.solids) || [];
+  const visibleContainers = drawing.structure.visibleContainers || [];
+  let sortedContainerIds = [...activeContainers, ...visibleContainers, ...allContainers];
+  sortedContainerIds = sortedContainerIds.filter((grId, i) => sortedContainerIds.indexOf(grId) === i);
   if (cache[graphicId]) {
     return cache[graphicId];
   }
@@ -506,45 +551,6 @@ function getRegionCoordSys(drawingId, regionObj) {
   return [originPos, xAxis, yAxis];
 }
 
-/**
- * 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 = react.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
- */
-function useDrawingCCId(drawingId, selector) {
-  const res = react.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
- */
-function useDrawingStr(drawingId, selector) {
-  const res = react.useDrawing(drawingId, selector);
-  return res || EMPTYSTR;
-}
-
 const DimSetContext = /*#__PURE__*/React.createContext({
   globalToLocalM: new THREE__namespace.Matrix4(),
   drawingId: -1
@@ -2583,6 +2589,9 @@ function useIsSSelected(drawingId, objId) {
       return false;
     }
     const object = drawing.structure.tree[objId];
+    if (!object) {
+      return false;
+    }
     const selApi = drawing.api.selection;
     return selApi.isItemSelected(createTreeObjSelItem(productId, object));
   }, [drawingId, objId, selItems]);
@@ -3081,7 +3090,7 @@ function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) {
 const MateScope = 'HLConstraintScope';
 const createMateItem = (matePath, csys, flip, reoriented) => {
   return {
-    id: `Mate|${matePath.toString()}|${csys.id}|(${flip},${reoriented})`,
+    id: `Mate|${matePath.toString()}|${csys.id}`,
     scope: MateScope,
     data: {
       matePath,
@@ -3399,10 +3408,11 @@ const MateRestorer = ({
     return [createMateItem(matePath, mate, flip, reoriented)];
   }, [drawingId, matePath, csysId, flip, reoriented]);
   React.useEffect(() => {
+    var _selItems$, _selector$items$, _selItems$2, _selector$items$2;
     if (!selectorId) return;
     const selector = core.getDrawing(drawingId).selection.refs[selectorId];
     const selApi = core.getDrawing(drawingId).api.selection;
-    if (!selApi.areItemsSelected(selItems, selectorId) || selItems.length !== selector.items.length) {
+    if (selItems.length !== selector.items.length || !(selApi.areItemsSelected(selItems, selectorId) && ((_selItems$ = selItems[0]) == null ? void 0 : _selItems$.data.flip) === ((_selector$items$ = selector.items[0]) == null ? void 0 : _selector$items$.data.flip) && ((_selItems$2 = selItems[0]) == null ? void 0 : _selItems$2.data.reoriented) === ((_selector$items$2 = selector.items[0]) == null ? void 0 : _selector$items$2.data.reoriented))) {
       setMateParam(selItems[0]);
       selApi.setItems(selectorId, selItems);
     }
@@ -7894,7 +7904,7 @@ const unhover = (drawingId, pluginId, objId) => {
   const objectsNew = objects.filter(id => id !== objId);
   setHoverState(drawingId, pluginId, 0, objectsNew);
 };
-const select = (drawingId, pluginId, selectedId) => {
+const select = (drawingId, selectedId) => {
   const drawing = core.getDrawing(drawingId);
   const curProduct = drawing.structure.currentProduct;
   const select_ = drawing.api.interaction.select;
@@ -7903,6 +7913,16 @@ const select = (drawingId, pluginId, selectedId) => {
     prodRefId: curProduct
   }), true);
 };
+const setSelected = (drawingId, selectedIds) => {
+  const drawing = core.getDrawing(drawingId);
+  const curProduct = drawing.structure.currentProduct;
+  const items = selectedIds.map(id => core.createInfo({
+    objectId: id,
+    prodRefId: curProduct
+  }));
+  const setSelected_ = drawing.api.interaction.setSelected;
+  setSelected_(items);
+};
 const tab = (drawingId, pluginId) => {
   const state = getSketchState(drawingId, pluginId);
   if (state.rubberBandRectangle || state.isDragged) {
@@ -8495,7 +8515,7 @@ function Drag(drawingId, pluginId, camControls) {
         clearSelection();
         return;
       }
-      select(drawingId, pluginId, pressedId);
+      select(drawingId, pressedId);
     }
     clearIgnoreList();
     clearDraggedPoints();
@@ -15519,21 +15539,18 @@ const ObjTitle = ({
         const start = Math.min(lastSelected, index);
         const end = Math.max(lastSelected, index);
         const toSelect = items.slice(start, end + 1);
-        const set = core.getPlugin(drawingId, pluginId).set;
-        set({
-          selected: toSelect
-        });
+        setSelected(drawingId, toSelect);
       } else {
         if (index !== undefined) {
           setLastSelected(index);
         }
-        select(drawingId, pluginId, objId);
+        select(drawingId, objId);
       }
     } else if (!activeHandler) {
       // if no handler is active, some selector should be active
       onClickSel && onClickSel(e);
     }
-  }, [drawingId, pluginId, objId, index, activeHandler, onClickSel, items, lastSelected, setLastSelected]);
+  }, [drawingId, objId, index, activeHandler, onClickSel, items, lastSelected, setLastSelected]);
   const onContextMenuDefault = React.useCallback(e => {
     e.preventDefault();
   }, []);
@@ -21523,6 +21540,22 @@ const usePatternConstraintInfo = drawingId => {
     instances: isPatternActive ? [instanceId] : undefined
   }), [isPatternActive, instanceId]);
 };
+const useIsNestedMateSSelected = (drawingId, instanceId) => {
+  const matePath = React.useMemo(() => getMatePath(drawingId, instanceId), [drawingId, instanceId]);
+  return react.useDrawing(drawingId, d => {
+    const selection = d.selection.refs[d.selection.active || ''];
+    const selItem = selection == null ? void 0 : selection.items[0];
+    if (!selItem || selItem.scope !== MateScope) {
+      return false;
+    }
+    const selPath = selItem.data.matePath;
+    if (matePath.length > selPath.length) {
+      return false;
+    }
+    const shift = selPath.length - matePath.length;
+    return matePath.every((id, index) => id === selPath[index + shift]);
+  }) || false;
+};
 
 // Sets all products in tree hidden/visible
 function setProductsHidden(drawingId, prodId, hidden) {
@@ -21614,7 +21647,8 @@ const InstanceTitle = ({
   const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.graphicId && sel.prodRefId ? sel.prodRefId : sel.objectId)) || [];
   const isGSelected = selectedIds.indexOf(instanceId) !== -1;
   const isSelected = isGSelected || isSSelected;
-  const isHighlighted = isHovered || isSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, instanceId, selectedIds[0]) : false);
+  const isMateSSelected = useIsNestedMateSSelected(drawingId, instanceId);
+  const isHighlighted = isHovered || isSelected || isMateSSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, instanceId, selectedIds[0]) : false);
   const isBlocked = react.useDrawing(drawingId, d => {
     var _d$selection$refs;
     const isSelActive = d.selection.active !== null;

package/build/index.js

@@ -39,6 +39,49 @@ import { CSS } from '@dnd-kit/utilities';
 import Tooltip$1 from 'antd/lib/tooltip';
 import * as deepmerge from 'deepmerge';
 
+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
+ */
+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
+ */
+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
+ */
+function useDrawingStr(drawingId, selector) {
+  const res = useDrawing(drawingId, selector);
+  return res || EMPTYSTR;
+}
+
 function ownKeys$x(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$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function getGraphicId(tree, refOrObjId) {
@@ -81,7 +124,11 @@ function getGraphicId(tree, refOrObjId) {
  */
 
 function useSelectedItems(drawingId, refOrObjIds) {
-  const visibleContainers = useDrawing(drawingId, d => d.structure.visibleContainers);
+  const activeContainers = useDrawingArr(drawingId, d => {
+    var _d$structure$tree;
+    return (_d$structure$tree = d.structure.tree[d.structure.currentProduct || NOCCID]) == null ? void 0 : _d$structure$tree.solids;
+  });
+  const visibleContainers = useDrawingArr(drawingId, d => d.structure.visibleContainers);
   const cacheStamp = useDrawing(drawingId, d => d.geometry.stamp);
   const cache = getDrawing(drawingId).geometry.cache;
   const sortedContainerIds = React__default.useMemo(() => {
@@ -92,9 +139,9 @@ function useSelectedItems(drawingId, refOrObjIds) {
           3. Remove duplicats from elems array
      */
     const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
-    const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-    return visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
-  }, [cache, visibleContainers]);
+    const sortedContainerIds_ = [...activeContainers, ...visibleContainers, ...allContainers];
+    return sortedContainerIds_.filter((grId, i) => sortedContainerIds_.indexOf(grId) === i);
+  }, [cache, activeContainers, visibleContainers]);
 
   // TODO: !!!Important!!! This may not properly create a graphic item for BuerliGeometry in assembly mode, but currently it isn't needed to.
   const prodId = getDrawing(drawingId).structure.currentProduct;
@@ -160,10 +207,6 @@ function useSelectedItems(drawingId, refOrObjIds) {
   return selectedItems;
 }
 
-const EMPTYARRAY = [];
-const NOCCID = Number.MIN_SAFE_INTEGER;
-const EMPTYSTR = '';
-
 function ownKeys$w(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$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function addMembers(drawingId, ccObjId) {
@@ -349,6 +392,7 @@ const stringifyValue = (value, type) => {
 
 // Searches for an object in the tree or graphic containers
 function findObject(drawingId, id, unrollRefs = false) {
+  var _drawing$structure$tr;
   const drawing = getDrawing(drawingId);
   const tree = drawing.structure.tree;
   const obj = tree[id];
@@ -365,9 +409,10 @@ function findObject(drawingId, id, unrollRefs = false) {
   }
   const cache = drawing.geometry.cache;
   const allContainers = Object.getOwnPropertyNames(cache).map(n => Number(n)).sort((a, b) => b - a);
-  const visibleContainers = drawing.structure.visibleContainers;
-  const notVisibleContainers = visibleContainers && allContainers.filter(c => visibleContainers.indexOf(c) < 0);
-  const sortedContainerIds = visibleContainers && notVisibleContainers && visibleContainers.concat(notVisibleContainers);
+  const activeContainers = ((_drawing$structure$tr = drawing.structure.tree[drawing.structure.currentProduct || NOCCID]) == null ? void 0 : _drawing$structure$tr.solids) || [];
+  const visibleContainers = drawing.structure.visibleContainers || [];
+  let sortedContainerIds = [...activeContainers, ...visibleContainers, ...allContainers];
+  sortedContainerIds = sortedContainerIds.filter((grId, i) => sortedContainerIds.indexOf(grId) === i);
   if (cache[graphicId]) {
     return cache[graphicId];
   }
@@ -483,45 +528,6 @@ function getRegionCoordSys(drawingId, regionObj) {
   return [originPos, xAxis, yAxis];
 }
 
-/**
- * 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
- */
-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
- */
-function useDrawingStr(drawingId, selector) {
-  const res = useDrawing(drawingId, selector);
-  return res || EMPTYSTR;
-}
-
 const DimSetContext = /*#__PURE__*/React__default.createContext({
   globalToLocalM: new THREE.Matrix4(),
   drawingId: -1
@@ -2560,6 +2566,9 @@ function useIsSSelected(drawingId, objId) {
       return false;
     }
     const object = drawing.structure.tree[objId];
+    if (!object) {
+      return false;
+    }
     const selApi = drawing.api.selection;
     return selApi.isItemSelected(createTreeObjSelItem(productId, object));
   }, [drawingId, objId, selItems]);
@@ -3058,7 +3067,7 @@ function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) {
 const MateScope = 'HLConstraintScope';
 const createMateItem = (matePath, csys, flip, reoriented) => {
   return {
-    id: `Mate|${matePath.toString()}|${csys.id}|(${flip},${reoriented})`,
+    id: `Mate|${matePath.toString()}|${csys.id}`,
     scope: MateScope,
     data: {
       matePath,
@@ -3376,10 +3385,11 @@ const MateRestorer = ({
     return [createMateItem(matePath, mate, flip, reoriented)];
   }, [drawingId, matePath, csysId, flip, reoriented]);
   React__default.useEffect(() => {
+    var _selItems$, _selector$items$, _selItems$2, _selector$items$2;
     if (!selectorId) return;
     const selector = getDrawing(drawingId).selection.refs[selectorId];
     const selApi = getDrawing(drawingId).api.selection;
-    if (!selApi.areItemsSelected(selItems, selectorId) || selItems.length !== selector.items.length) {
+    if (selItems.length !== selector.items.length || !(selApi.areItemsSelected(selItems, selectorId) && ((_selItems$ = selItems[0]) == null ? void 0 : _selItems$.data.flip) === ((_selector$items$ = selector.items[0]) == null ? void 0 : _selector$items$.data.flip) && ((_selItems$2 = selItems[0]) == null ? void 0 : _selItems$2.data.reoriented) === ((_selector$items$2 = selector.items[0]) == null ? void 0 : _selector$items$2.data.reoriented))) {
       setMateParam(selItems[0]);
       selApi.setItems(selectorId, selItems);
     }
@@ -7871,7 +7881,7 @@ const unhover = (drawingId, pluginId, objId) => {
   const objectsNew = objects.filter(id => id !== objId);
   setHoverState(drawingId, pluginId, 0, objectsNew);
 };
-const select = (drawingId, pluginId, selectedId) => {
+const select = (drawingId, selectedId) => {
   const drawing = getDrawing(drawingId);
   const curProduct = drawing.structure.currentProduct;
   const select_ = drawing.api.interaction.select;
@@ -7880,6 +7890,16 @@ const select = (drawingId, pluginId, selectedId) => {
     prodRefId: curProduct
   }), true);
 };
+const setSelected = (drawingId, selectedIds) => {
+  const drawing = getDrawing(drawingId);
+  const curProduct = drawing.structure.currentProduct;
+  const items = selectedIds.map(id => createInfo({
+    objectId: id,
+    prodRefId: curProduct
+  }));
+  const setSelected_ = drawing.api.interaction.setSelected;
+  setSelected_(items);
+};
 const tab = (drawingId, pluginId) => {
   const state = getSketchState(drawingId, pluginId);
   if (state.rubberBandRectangle || state.isDragged) {
@@ -8472,7 +8492,7 @@ function Drag(drawingId, pluginId, camControls) {
         clearSelection();
         return;
       }
-      select(drawingId, pluginId, pressedId);
+      select(drawingId, pressedId);
     }
     clearIgnoreList();
     clearDraggedPoints();
@@ -15496,21 +15516,18 @@ const ObjTitle = ({
         const start = Math.min(lastSelected, index);
         const end = Math.max(lastSelected, index);
         const toSelect = items.slice(start, end + 1);
-        const set = getPlugin(drawingId, pluginId).set;
-        set({
-          selected: toSelect
-        });
+        setSelected(drawingId, toSelect);
       } else {
         if (index !== undefined) {
           setLastSelected(index);
         }
-        select(drawingId, pluginId, objId);
+        select(drawingId, objId);
       }
     } else if (!activeHandler) {
       // if no handler is active, some selector should be active
       onClickSel && onClickSel(e);
     }
-  }, [drawingId, pluginId, objId, index, activeHandler, onClickSel, items, lastSelected, setLastSelected]);
+  }, [drawingId, objId, index, activeHandler, onClickSel, items, lastSelected, setLastSelected]);
   const onContextMenuDefault = React__default.useCallback(e => {
     e.preventDefault();
   }, []);
@@ -21500,6 +21517,22 @@ const usePatternConstraintInfo = drawingId => {
     instances: isPatternActive ? [instanceId] : undefined
   }), [isPatternActive, instanceId]);
 };
+const useIsNestedMateSSelected = (drawingId, instanceId) => {
+  const matePath = React__default.useMemo(() => getMatePath(drawingId, instanceId), [drawingId, instanceId]);
+  return useDrawing(drawingId, d => {
+    const selection = d.selection.refs[d.selection.active || ''];
+    const selItem = selection == null ? void 0 : selection.items[0];
+    if (!selItem || selItem.scope !== MateScope) {
+      return false;
+    }
+    const selPath = selItem.data.matePath;
+    if (matePath.length > selPath.length) {
+      return false;
+    }
+    const shift = selPath.length - matePath.length;
+    return matePath.every((id, index) => id === selPath[index + shift]);
+  }) || false;
+};
 
 // Sets all products in tree hidden/visible
 function setProductsHidden(drawingId, prodId, hidden) {
@@ -21591,7 +21624,8 @@ const InstanceTitle = ({
   const selectedIds = (selected == null ? void 0 : selected.map(sel => sel.graphicId && sel.prodRefId ? sel.prodRefId : sel.objectId)) || [];
   const isGSelected = selectedIds.indexOf(instanceId) !== -1;
   const isSelected = isGSelected || isSSelected;
-  const isHighlighted = isHovered || isSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, instanceId, selectedIds[0]) : false);
+  const isMateSSelected = useIsNestedMateSSelected(drawingId, instanceId);
+  const isHighlighted = isHovered || isSelected || isMateSSelected || ((selectedIds == null ? void 0 : selectedIds.length) === 1 ? hasSelectedChild(drawingId, instanceId, selectedIds[0]) : false);
   const isBlocked = useDrawing(drawingId, d => {
     var _d$selection$refs;
     const isSelActive = d.selection.active !== null;

package/build/plugins/Sketch/utils/Interaction.d.ts

@@ -2,5 +2,6 @@ import * as THREE from 'three';
 import { DrawingID, PluginID, ObjectID } from '@buerli.io/core';
 export declare const hover: (drawingId: DrawingID, pluginId: PluginID, objIds: ObjectID[], hoverPos?: THREE.Vector3) => void;
 export declare const unhover: (drawingId: DrawingID, pluginId: PluginID, objId: ObjectID) => void;
-export declare const select: (drawingId: DrawingID, pluginId: PluginID, selectedId: ObjectID) => void;
+export declare const select: (drawingId: DrawingID, selectedId: ObjectID) => void;
+export declare const setSelected: (drawingId: DrawingID, selectedIds: ObjectID[]) => void;
 export declare const tab: (drawingId: DrawingID, pluginId: PluginID) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerli.io/react-cad",
-  "version": "0.13.0",
+  "version": "0.13.1-beta.2",
   "description": "buerli CAD components",
   "author": "AWV Informatik AG <info@awv-informatik.ch>",
   "repository": {},
@@ -56,6 +56,7 @@
     "@typescript-eslint/parser": "^5.21.0",
     "babel-jest": "^26.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-polyfill": "^6.26.0",
     "eslint": "8.0.0",
     "eslint-config-prettier": "^8.3.0",
@@ -90,8 +91,8 @@
     "react": ">=18.0"
   },
   "dependencies": {
-    "@buerli.io/classcad": "0.13.0",
-    "@buerli.io/react": "0.13.0",
+    "@buerli.io/classcad": "0.13.1-beta.2",
+    "@buerli.io/react": "0.13.1-beta.2",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",