feat: add drill-down and deep select support to selection state

README.md

@@ -487,6 +487,8 @@ The default state that handles user selection and drag events. It is automatical
   - `'closestGroup'`: Selects the nearest parent group of the selected object.
   - `'highestGroup'`: Selects the topmost parent group of the selected object.
   - `'grid'`: Selects the grid to which the selected object belongs.
+- `drillDown` (optional, boolean): Enables step-by-step navigation into nested groups through double-clicks (or consecutive clicks). When a parent group is already selected, subsequent clicks will search for and select deeper child objects at that specific location.
+- `deepSelect` (optional, boolean): Enables immediate searching and selection of sub-elements (defaulting to the 'grid' unit) regardless of the configured selectUnit when holding the Ctrl (Windows) or Meta (Mac) key. This is useful for quickly picking specific items without navigating through complex group structures.
 - `filter` (optional, function): A function to filter selectable objects based on a condition.
 - `selectionBoxStyle` (optional, object): Specifies the style of the selection box displayed during drag-selection.
   - `fill` (object): The fill style. Default: `{ color: '#9FD6FF', alpha: 0.2 }`.

README_KR.md

@@ -496,6 +496,8 @@ patchmap.stateManager.setState('custom', { message: 'Hello World' });
   - `'closestGroup'`: 선택된 객체에서 가장 가까운 상위 그룹을 선택합니다.
   - `'highestGroup'`: 선택된 객체에서 가장 최상위 그룹을 선택합니다.
   - `'grid'`: 선택된 객체가 속한 그리드를 선택합니다.
+- `drillDown` (optional, boolean): 더블 클릭(또는 연속 클릭) 시 중첩된 그룹 내부로 단계별로 진입하며 하위 요소를 탐색하여 선택하는 기능을 활성화합니다. 활성화 시 이미 상위 그룹이 선택된 상태에서 다시 클릭하면, 해당 클릭 지점에 있는 더 깊은 단계의 자식 객체를 찾아 선택합니다.
+- `deepSelect` (optional, boolean): Ctrl(Windows) 또는 Meta(Mac) 키를 누른 상태에서 클릭할 때, 설정된 selectUnit과 관계없이 즉시 하위 요소(기본 'grid' 단위)를 검색하여 선택할 수 있는 기능을 활성화합니다. 복잡한 그룹 구조를 거치지 않고 특정 요소를 빠르게 선택하고 싶을 때 유용합니다.
 - `filter` (optional, function): 선택 대상 객체를 조건에 따라 필터링할 수 있는 함수입니다.
 - `selectionBoxStyle` (optional, object): 드래그 선택 시 표시되는 사각형의 스타일을 지정합니다.
   - `fill` (object): 채우기 스타일. 기본값: `{ color: '#9FD6FF', alpha: 0.2 }`.

src/events/find.js

@@ -4,21 +4,21 @@ import { intersectPoint } from '../utils/intersects/intersect-point';
 import { getSelectObject } from './utils';
 
 export const findIntersectObject = (
-  viewport,
+  parent,
   point,
-  { filter, selectUnit } = {},
+  { filter, selectUnit, filterParent } = {},
 ) => {
   const allCandidates = collectCandidates(
-    viewport,
+    parent,
     (child) => child.constructor.isSelectable,
   );
 
   const sortedCandidates = allCandidates.sort((a, b) => {
     const zDiff = (b.zIndex || 0) - (a.zIndex || 0);
     if (zDiff !== 0) return zDiff;
 
-    const pathA = getAncestorPath(a, viewport);
-    const pathB = getAncestorPath(b, viewport);
+    const pathA = getAncestorPath(a, parent);
+    const pathB = getAncestorPath(b, parent);
 
     const minLength = Math.min(pathA.length, pathB.length);
     for (let i = 0; i < minLength; i++) {
@@ -42,7 +42,12 @@ export const findIntersectObject = (
     for (const target of targets) {
       const isIntersecting = intersectPoint(target, point);
       if (isIntersecting) {
-        const selectObject = getSelectObject(candidate, selectUnit);
+        const selectObject = getSelectObject(
+          parent,
+          candidate,
+          selectUnit,
+          filterParent,
+        );
         if (selectObject && (!filter || filter(selectObject))) {
           return selectObject;
         }
@@ -54,12 +59,12 @@ export const findIntersectObject = (
 };
 
 export const findIntersectObjects = (
-  viewport,
+  parent,
   selectionBox,
-  { filter, selectUnit } = {},
+  { filter, selectUnit, filterParent } = {},
 ) => {
   const allCandidates = collectCandidates(
-    viewport,
+    parent,
     (child) => child.constructor.isSelectable,
   );
   const found = [];
@@ -73,7 +78,12 @@ export const findIntersectObjects = (
     for (const target of targets) {
       const isIntersecting = intersect(selectionBox, target);
       if (isIntersecting) {
-        const selectObject = getSelectObject(candidate, selectUnit);
+        const selectObject = getSelectObject(
+          parent,
+          candidate,
+          selectUnit,
+          filterParent,
+        );
         if (selectObject && (!filter || filter(selectObject))) {
           found.push(selectObject);
           break;