@likec4/diagram 1.46.0 → 1.46.3

package/dist/search/components/ElementsColumn.js

@@ -15,9 +15,9 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
-import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
+import { whenSearchAnimationEnds, stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {
@@ -247,21 +247,22 @@ function useHandleElementSelection() {
     if (views.length === 0) {
       return;
     }
-    const singleView = only(views);
-    if (singleView) {
-      searchActorRef.send({ type: "close" });
-      if (singleView.id === diagram.currentView.id) {
-        setTimeout(() => {
-          diagram.focusOnElement(element.id);
-        }, 100);
-      } else {
-        setTimeout(() => {
-          diagram.navigateTo(singleView.id, void 0, element.id);
-        }, 100);
-      }
+    const elementFqn = element.id;
+    const onlyOneViewId = only(views)?.id;
+    if (!onlyOneViewId) {
+      searchActorRef.send({ type: "pickview.open", elementFqn });
       return;
     }
-    searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
+    const isSameView = onlyOneViewId === diagram.currentView.id;
+    searchActorRef.send({ type: "close" });
+    whenSearchAnimationEnds(() => {
+      if (isSameView) {
+        diagram.focusOnElement(elementFqn);
+        return;
+      }
+      diagram.navigateTo(onlyOneViewId, void 0, elementFqn);
+    });
+    return;
   });
 }
 

package/dist/search/components/PickView.js

@@ -6,7 +6,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();

package/dist/search/components/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.js

@@ -12,10 +12,10 @@ import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
-import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
+import { moveFocusToSearchInput, queryAllFocusable, centerY, whenSearchAnimationEnds } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
@@ -83,19 +83,18 @@ const btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, focusOnElement, ...props }) {
   const searchActorRef = useSearchActor();
   const diagram = useDiagram();
+  const nextViewId = view.id;
   const currentViewId = useCurrentViewId();
-  const isCurrentView = view.id === currentViewId;
+  const isCurrentView = nextViewId === currentViewId;
   const navigate = () => {
     searchActorRef.send({ type: "close" });
-    if (isCurrentView && focusOnElement) {
-      setTimeout(() => {
+    whenSearchAnimationEnds(() => {
+      if (isCurrentView && focusOnElement) {
         diagram.focusOnElement(focusOnElement);
-      }, 100);
-    } else {
-      setTimeout(() => {
-        diagram.navigateTo(view.id, void 0, focusOnElement);
-      }, 100);
-    }
+        return;
+      }
+      diagram.navigateTo(nextViewId, void 0, focusOnElement);
+    });
   };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,

package/dist/search/components/utils.d.ts

@@ -3,3 +3,9 @@ export declare function centerY(element: HTMLElement): number;
 export declare function moveFocusToSearchInput(from: HTMLElement | null | undefined): void;
 export declare function focusToFirstFoundElement(from: HTMLElement | null | undefined): void;
 export declare function queryAllFocusable(from: HTMLElement | null | undefined, where: 'elements' | 'views', selector?: string): HTMLButtonElement[];
+/**
+ * Workaround: defers execution of the callback, to finish search panel close animation.
+ * Otherwise, there could be weird artifacts when navigating to large diagrams.
+ * @todo Find a better way to handle this, possibly with animationend event.
+ */
+export declare function whenSearchAnimationEnds(callback: () => void): void;

package/dist/search/components/utils.js

@@ -54,5 +54,8 @@ function queryAllFocusable(from, where, selector = `.${focusable}`) {
   const elements = root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`);
   return [...elements];
 }
+function whenSearchAnimationEnds(callback) {
+  setTimeout(callback, 300);
+}
 
-export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent };
+export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent, whenSearchAnimationEnds };