@likec4/diagram 1.34.2 → 1.35.0

package/dist/overlays/relationships-browser/SelectElement.js

@@ -7,8 +7,8 @@ import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useLikeC4ElementsTree } from '../../likec4model/useLikeC4ElementsTree.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -4,9 +4,9 @@ import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/search/components/ElementsColumn.js

@@ -15,7 +15,7 @@ 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 { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const btn = buttonsva();
 const ElementsColumn = memo(() => {

package/dist/search/components/PickView.js

@@ -6,7 +6,7 @@ import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/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 '../../likec4model/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.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/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 '../../likec4model/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.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/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,8 +12,8 @@ import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {

package/dist/state/DiagramActorProvider.d.ts

@@ -1,11 +1,11 @@
 import { DiagramView, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { PaddingWithUnit } from '../LikeC4Diagram.props';
+import { ViewPadding } from '../LikeC4Diagram.props';
 export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
-    fitViewPadding: PaddingWithUnit;
+    fitViewPadding: ViewPadding;
     nodesSelectable: boolean;
     where: WhereOperator | null;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/state/DiagramActorProvider.js

@@ -1,17 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
+import { useCustomCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
-import { shallowEqual } from 'fast-equals';
-import { useRef, useEffect } from 'react';
+import { shallowEqual, deepEqual } from 'fast-equals';
+import { useRef, useEffect, useState } from 'react';
+import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
+import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
+import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
+import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
 const selectToggledFeatures = (state) => {
-  if (state.context.features.enableReadOnly) {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
     return {
       ...state.context.toggledFeatures,
       enableReadOnly: true
@@ -74,12 +79,20 @@ function DiagramActorProvider({
     }
   );
   const features = useEnabledFeatures();
-  useEffect(() => {
-    actorRef.send({ type: "update.features", features });
-  }, [features]);
-  useEffect(() => {
-    actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
-  }, [zoomable, pannable, fitViewPadding, nodesSelectable]);
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: "update.features", features });
+    },
+    [features],
+    shallowEqual
+  );
+  useCustomCompareEffect(
+    () => {
+      actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
+    },
+    [zoomable, pannable, fitViewPadding, nodesSelectable],
+    deepEqual
+  );
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
     where,
@@ -89,7 +102,32 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }) });
+}
+function CurrentViewModelProvider({
+  children
+}) {
+  const viewId = useCurrentViewId();
+  const likec4model = useLikeC4Model();
+  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId));
+  useEffect(() => {
+    setViewmodel((current) => {
+      const nextviewmodel = likec4model.findView(viewId);
+      if (!nextviewmodel) {
+        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
+          currentViewModel: current,
+          likec4model
+        });
+        return current;
+      }
+      return nextviewmodel;
+    });
+  }, [likec4model, viewId]);
+  if (!viewmodel.isDiagram()) {
+    console.warn(`View "${viewId}" is not diagram.
+Make sure you have LikeC4ModelProvider with layouted model.`);
+  }
+  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
 }
 
 export { DiagramActorProvider };

package/dist/state/diagram-machine.d.ts

@@ -5,7 +5,7 @@ import { PartialDeep } from 'type-fest';
 import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, Values, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CancelAction, StopAction } from 'xstate';
 import { Base } from '../base/types';
 import { EnabledFeatures, FeatureName } from '../context/DiagramFeatures';
-import { OpenSourceParams, PaddingWithUnit } from '../LikeC4Diagram.props';
+import { OpenSourceParams, ViewPadding } from '../LikeC4Diagram.props';
 import { Types } from '../likec4diagram/types';
 import { AlignmentMode } from './aligners';
 import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
@@ -27,7 +27,7 @@ export interface Input {
     xystore: XYStoreApi;
     zoomable: boolean;
     pannable: boolean;
-    fitViewPadding: PaddingWithUnit;
+    fitViewPadding: ViewPadding;
     nodesSelectable: boolean;
 }
 export type ToggledFeatures = Partial<EnabledFeatures>;