mobx-view-model-devtools 0.0.40 → 0.0.41

package/index.d.ts

@@ -95,6 +95,7 @@ interface SearchEngineConfig {
     getItemOffset: (index: number) => number;
     scrollToOffset: (offset: number) => void;
     getRootItems: () => ListItem<any>[];
+    getPresentationMode: () => 'tree' | 'list';
 }
 declare class SearchEngine {
     private config;
@@ -118,6 +119,10 @@ declare class SearchEngine {
     get suggestionSuffix(): string;
     handleSearchInput: (e: ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Рекурсивно собирает все VMListItem из дерева (включая вложенные).
+     */
+    private collectAllVMs;
     /**
      * Возвращает PropertyListItem на целевой глубине для получения подсказки.
      * pathSegments — все сегменты кроме последнего (путь навигации).
@@ -128,6 +133,11 @@ declare class SearchEngine {
      * Возвращает свойства на нужной глубине.
      */
     private navigatePropertyPath;
+    /**
+     * Плоский список для режима 'list': все VM показываются независимо,
+     * сворачивание VM скрывает только его свойства, но не дочерние VM.
+     */
+    private getFlatListItems;
     getListItems(rootItems: ListItem<any>[]): ListItem<any>[];
     private getFilteredItemsForSearch;
     private getVMSearchItems;
@@ -149,7 +159,10 @@ declare class SearchEngine {
      * или «затемнённо» (false — серым).
      *
      * Для PropertyListItem: проходим вверх по цепочке parentListItem,
-     * чтобы определить уровень вложенности и соответствующий сегмент фильтра.
+     * собирая предков и вычисляя уровень вложенности.
+     * Затем проверяем, что вся цепочка предков соответствует сегментам поиска:
+     * если хотя бы один предок не совпадает с нужным сегментом —
+     * элемент находится в «несовпадающей ветке» и тоже должен быть серым.
      */
     isItemFitted(item: ListItem<any>): boolean;
     resetSearch: () => void;

package/index.js

@@ -39319,17 +39319,33 @@ class SearchEngine {
       this.searchText += this.suggestionSuffix;
     }
   };
+  /**
+   * Рекурсивно собирает все VMListItem из дерева (включая вложенные).
+   */
+  collectAllVMs(rootItems) {
+    const result = [];
+    const traverse = (item) => {
+      if (item instanceof VMListItem) {
+        result.push(item);
+        for (const child of item.children) {
+          traverse(child);
+        }
+      }
+    };
+    for (const item of rootItems) {
+      traverse(item);
+    }
+    return result;
+  }
   /**
    * Возвращает PropertyListItem на целевой глубине для получения подсказки.
    * pathSegments — все сегменты кроме последнего (путь навигации).
    */
   getCandidatePropsAtDepth(rootItems, pathSegments) {
-    const vms = rootItems.filter(
-      (item) => item instanceof VMListItem
-    );
+    const allVMs = this.collectAllVMs(rootItems);
     if (pathSegments.length === 0) {
       const props = [];
-      for (const vm of vms) {
+      for (const vm of allVMs) {
         props.push(
           ...vm.children.filter(
             (c) => c instanceof PropertyListItem
@@ -39340,7 +39356,7 @@ class SearchEngine {
     }
     const firstSeg = pathSegments[0];
     const result = [];
-    for (const vm of vms) {
+    for (const vm of allVMs) {
       const directProps = vm.children.filter(
         (c) => c instanceof PropertyListItem
       );
@@ -39395,8 +39411,44 @@ class SearchEngine {
     }
     return result;
   }
+  /**
+   * Плоский список для режима 'list': все VM показываются независимо,
+   * сворачивание VM скрывает только его свойства, но не дочерние VM.
+   */
+  getFlatListItems(rootItems) {
+    const result = [];
+    const collectItem = (item) => {
+      if (item instanceof VMListItem) {
+        result.push(item);
+        if (item.isExpanded) {
+          for (const child of item.children) {
+            if (!(child instanceof VMListItem)) {
+              result.push(...child.expandedChildrenWithSelf);
+            }
+          }
+        }
+        for (const child of item.children) {
+          if (child instanceof VMListItem) {
+            collectItem(child);
+          }
+        }
+      } else {
+        result.push(item);
+        if (item.isExpanded) {
+          result.push(...item.expandedChildren);
+        }
+      }
+    };
+    for (const item of rootItems) {
+      collectItem(item);
+    }
+    return result;
+  }
   getListItems(rootItems) {
     if (!this.isActive) {
+      if (this.config.getPresentationMode() === "list") {
+        return this.getFlatListItems(rootItems);
+      }
       return rootItems.flatMap((item) => item.expandedChildrenWithSelf);
     }
     return rootItems.flatMap((item) => this.getFilteredItemsForSearch(item));
@@ -39465,6 +39517,8 @@ class SearchEngine {
         result.push(
           ...this.getPropertySearchItems(prop.children, propSegments.slice(1))
         );
+      } else if (prop.isExpanded) {
+        result.push(...prop.expandedChildren);
       }
     }
     return result;
@@ -39494,7 +39548,10 @@ class SearchEngine {
    * или «затемнённо» (false — серым).
    *
    * Для PropertyListItem: проходим вверх по цепочке parentListItem,
-   * чтобы определить уровень вложенности и соответствующий сегмент фильтра.
+   * собирая предков и вычисляя уровень вложенности.
+   * Затем проверяем, что вся цепочка предков соответствует сегментам поиска:
+   * если хотя бы один предок не совпадает с нужным сегментом —
+   * элемент находится в «несовпадающей ветке» и тоже должен быть серым.
    */
   isItemFitted(item) {
     if (!this.isActive) return true;
@@ -39503,7 +39560,9 @@ class SearchEngine {
       if (segments.length === 0) return true;
       let parent = item.parentListItem;
       let propLevel = 0;
+      const ancestors = [];
       while (parent instanceof PropertyListItem) {
+        ancestors.push(parent);
         propLevel++;
         parent = parent.parentListItem;
       }
@@ -39511,7 +39570,17 @@ class SearchEngine {
       const firstSeg = segments[0];
       const vmMatchesByName = parent.searchData.name.includes(firstSeg) || parent.searchData.id.includes(firstSeg);
       const propSegments = vmMatchesByName ? segments.slice(1) : segments;
-      if (propLevel >= propSegments.length) return true;
+      const depthToCheck = Math.min(propLevel, propSegments.length);
+      for (let i = 0; i < depthToCheck; i++) {
+        const ancestor = ancestors[propLevel - 1 - i];
+        const seg2 = propSegments[i];
+        if (seg2 && !ancestor.searchData.property.includes(seg2)) {
+          return false;
+        }
+      }
+      if (propLevel >= propSegments.length) {
+        return true;
+      }
       const seg = propSegments[propLevel];
       return !seg || item.searchData.property.includes(seg);
     }
@@ -39543,7 +39612,8 @@ class ViewModelDevtools {
       getIsActive: () => this.isActive,
       getItemOffset: (index) => this.scrollListRef.current?.getItemOffset(index) ?? 0,
       scrollToOffset: (offset) => this.scrollListRef.current?.scrollTo(offset),
-      getRootItems: () => this.searchRootItems
+      getRootItems: () => this.searchRootItems,
+      getPresentationMode: () => this.presentationMode
     });
     makeObservable(this, {
       position: observable.ref,
@@ -39640,7 +39710,10 @@ class ViewModelDevtools {
     vmItem.toggleExpand();
   }
   isExpandable(vmItem) {
-    return vmItem.isExpandable && this.presentationMode !== "list";
+    if (this.presentationMode === "list") {
+      return vmItem.children.some((c) => !(c instanceof VMListItem));
+    }
+    return vmItem.isExpandable;
   }
   getVmParams(vm) {
     if ("vmParams" in vm) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-view-model-devtools",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "",
   "keywords": [],
   "author": "js2me",