@likec4/diagram 1.7.1 → 1.7.3

package/dist/ui/top-left/ChangeAutoLayoutButton.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps } from '@mantine/core';
+
+export declare const ChangeAutoLayoutButton: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/top-left/TopLeftPanel.d.ts

@@ -0,0 +1,4 @@
+export declare const TopLeftPanel: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ui/top-left/_shared.d.ts

@@ -0,0 +1,5 @@
+export declare const Tooltip: import('react').ForwardRefExoticComponent<import('@mantine/core').TooltipProps & import('react').RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export declare const ActionIcon: <L = "button">(props: import('@mantine/core').PolymorphicComponentProps<L, import('@mantine/core').ActionIconProps>) => React.ReactElement;

package/dist/ui/top-left/styles.css.d.ts

@@ -0,0 +1,3 @@
+export declare const panel: string;
+export declare const autolayoutIcon: string;
+export declare const autolayoutIndicator: string;

package/dist/xyflow/XYFlowInner.d.ts

@@ -5,7 +5,6 @@ type XYFlowInnerProps = PropsWithChildren<{
     background: NonNullable<LikeC4DiagramProperties['background']>;
     controls: boolean;
     showDiagramTitle: boolean;
-    showNavigationButtons: boolean;
 }>;
 export declare const XYFlowInner: import('react').NamedExoticComponent<XYFlowInnerProps>;
 export {};

package/dist/xyflow/edges/edges.css.d.ts

@@ -5,8 +5,8 @@ export declare const markerContext: string;
 export declare const controlPoint: string;
 export declare const controlDragging: string;
 export declare const cssEdgePath: string;
+export declare const stepEdgeNumber: string;
 export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const edgeLabel: string;
-export declare const stepEdgeNumber: string;
 export declare const edgeLabelText: string;

package/dist/xyflow/{hooks/useLayoutConstraints.d.ts → useLayoutConstraints.d.ts}

@@ -1,5 +1,5 @@
 import { ReactFlowProps } from '@xyflow/react';
-import { XYFlowNode } from '../types';
+import { XYFlowNode } from './types';
 
 type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>;
 /**

package/dist/xyflow/utils.d.ts

@@ -1,8 +1,18 @@
 import { DiagramEdge, Point } from '@likec4/core/types';
-import { XYPosition } from '@xyflow/react';
+import { Rect, XYPosition } from '@xyflow/react';
+import { InternalXYFlowNode } from './types';
 
 export declare function toDomPrecision(v: number | null): number;
 export declare function distance(a: XYPosition, b: XYPosition): number;
+export declare const nodeToRect: (nd: InternalXYFlowNode) => Rect;
+/**
+ * Checks if a rectangle is completely inside another rectangle.
+ *
+ * @param test - The rectangle to test.
+ * @param target - The target rectangle.
+ * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
+ */
+export declare const isInside: (test: Rect, target: Rect) => boolean;
 export declare function bezierControlPoints(diagramEdge: DiagramEdge): XYPosition[];
 export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;
 export declare function distanceBetweenPoints(a: XYPosition, b: XYPosition): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -54,27 +54,27 @@
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
-    "@xyflow/react": "12.0.3",
+    "@xyflow/react": "12.0.4",
     "@xyflow/system": "0.0.37",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.3.19",
+    "framer-motion": "^11.3.24",
     "remeda": "^2.3.0",
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@likec4/core": "1.7.1",
+    "@likec4/core": "1.7.3",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/core": "1.7.1",
-    "@likec4/tsconfig": "1.7.1",
+    "@likec4/core": "1.7.3",
+    "@likec4/tsconfig": "1.7.3",
     "@mantine/core": "7.11.2",
     "@mantine/hooks": "7.11.2",
     "@mantine/vanilla-extract": "7.11.2",

package/src/LikeC4Diagram.props.ts

@@ -1,20 +1,73 @@
 import type {
-  BorderStyle,
   DiagramEdge,
   DiagramNode,
   DiagramView,
-  ElementShape,
   Fqn,
   NonEmptyArray,
-  ThemeColor,
-  ViewID,
-  ViewManualLayout
+  RelationID,
+  ViewChange,
+  ViewID
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
-import type { DiagramEditorCommand } from './types'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
+type EqualOperator<V> = {
+  eq: V
+  neq?: never
+} | {
+  eq?: never
+  neq: V
+}
+
+type AllNever = {
+  not?: never
+  and?: never
+  or?: never
+  tag?: never
+  kind?: never
+}
+
+type TagKindOperator<Tag, Kind> =
+  & Omit<AllNever, 'tag' | 'kind'>
+  & ({
+    tag: EqualOperator<Tag>
+    kind?: never
+  } | {
+    tag?: never
+    kind: EqualOperator<Kind>
+  })
+
+type NotOperator<Tag, Kind> = Omit<AllNever, 'not'> & {
+  not: TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>
+}
+
+type AndOperator<Tag, Kind> = Omit<AllNever, 'and'> & {
+  and: NonEmptyArray<
+    | TagKindOperator<Tag, Kind>
+    | OrOperator<Tag, Kind>
+    | NotOperator<Tag, Kind>
+  >
+}
+
+type OrOperator<Tag, Kind> = Omit<AllNever, 'or'> & {
+  or: NonEmptyArray<
+    | TagKindOperator<Tag, Kind>
+    | AndOperator<Tag, Kind>
+    | NotOperator<Tag, Kind>
+  >
+}
+
+// export const isOrOperator = (operator: WhereOperator): operator is OrOperator<WhereOperator> => {
+//   return 'or' in operator
+// }
+
+export type WhereOperator<Tag extends string, Kind extends string> =
+  | TagKindOperator<Tag, Kind>
+  | NotOperator<Tag, Kind>
+  | AndOperator<Tag, Kind>
+  | OrOperator<Tag, Kind>
+
 export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
   navigateTo: ViewID
 }
@@ -53,37 +106,13 @@ export type OnEdgeClick = (
   }
 ) => void
 
-export type OnEditorCommand = (
-  cmd: DiagramEditorCommand
-) => void
-
 /**
  * On pane/canvas click (not on any node or edge)
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void
 
-export namespace Changes {
-  export interface ChangeElementStyle {
-    op: 'change-element-style'
-    style: {
-      border?: BorderStyle
-      opacity?: number
-      shape?: ElementShape
-      color?: ThemeColor
-    }
-    targets: NonEmptyArray<Fqn>
-  }
-
-  export interface SaveManualLayout {
-    op: 'save-manual-layout'
-    layout: ViewManualLayout
-  }
-}
-
-export type Change = Changes.ChangeElementStyle | Changes.SaveManualLayout
-
 export type ChangeEvent = {
-  change: Change
+  change: ViewChange
 }
 export type OnChange = {
   (event: ChangeEvent): void
@@ -197,6 +226,8 @@ export interface LikeC4DiagramProperties {
    * By default, if icon is http:// or https://, it will be rendered as an image
    */
   renderIcon?: ElementIconRenderer | undefined
+
+  where?: WhereOperator<string, string> | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {
@@ -210,5 +241,8 @@ export interface LikeC4DiagramEventHandlers {
   onCanvasClick?: OnCanvasClick | null | undefined
   onCanvasDblClick?: OnCanvasClick | null | undefined
 
-  onEditorCommand?: OnEditorCommand | null | undefined
+  onBurgerMenuClick?: null | undefined | (() => void)
+  onOpenSourceView?: null | undefined | (() => void)
+  onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void)
+  onOpenSourceRelation?: null | undefined | ((id: RelationID) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -4,11 +4,11 @@ import { shallowEqual } from 'fast-equals'
 import { domAnimation, LazyMotion } from 'framer-motion'
 import { memo, useRef } from 'react'
 import { rootClassName } from './globals.css'
+import { useDiagramState } from './hooks/useDiagramState'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
-import { useDiagramState } from './state/useDiagramStore'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
@@ -30,9 +30,8 @@ export function LikeC4Diagram({
   controls = false,
   showElementLinks = true,
   showDiagramTitle = true,
-  showNavigationButtons = false,
   enableDynamicViewWalkthrough = false,
-  enableFocusMode = readonly,
+  enableFocusMode = false,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -46,8 +45,13 @@ export function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
-  onEditorCommand,
-  renderIcon
+  onOpenSourceElement,
+  onOpenSourceView,
+  onOpenSourceRelation,
+  onBurgerMenuClick,
+  renderIcon,
+  where,
+  showNavigationButtons = !!onNavigateTo
 }: LikeC4DiagramProps) {
   const initialRef = useRef({
     defaultNodes: [] as XYFlowNode[],
@@ -55,7 +59,9 @@ export function LikeC4Diagram({
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   })
-  // useLogger('LikeC4Diagram', [{view}])
+  if (readonly !== true && !!where) {
+    console.warn('where filter is only supported in readonly mode')
+  }
   return (
     <EnsureMantine>
       <LazyMotion features={domAnimation} strict>
@@ -73,11 +79,13 @@ export function LikeC4Diagram({
             fitViewEnabled={fitView}
             fitViewPadding={fitViewPadding}
             showElementLinks={showElementLinks}
+            showNavigationButtons={showNavigationButtons}
             nodesDraggable={nodesDraggable}
             nodesSelectable={nodesSelectable}
             experimentalEdgeEditing={experimentalEdgeEditing}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableFocusMode={enableFocusMode}
+            whereFilter={where ?? null}
             renderIcon={renderIcon ?? null}
             onCanvasClick={onCanvasClick ?? null}
             onCanvasContextMenu={onCanvasContextMenu ?? null}
@@ -88,13 +96,15 @@ export function LikeC4Diagram({
             onChange={onChange ?? null}
             onNavigateTo={onNavigateTo ?? null}
             onCanvasDblClick={onCanvasDblClick ?? null}
-            onEditorCommand={onEditorCommand ?? null}
+            onOpenSourceView={onOpenSourceView ?? null}
+            onOpenSourceElement={onOpenSourceElement ?? null}
+            onOpenSourceRelation={onOpenSourceRelation ?? null}
+            onBurgerMenuClick={onBurgerMenuClick ?? null}
           >
             <LikeC4DiagramInnerMemo
               controls={controls}
               background={background}
               showDiagramTitle={showDiagramTitle}
-              showNavigationButtons={showNavigationButtons}
             />
           </DiagramContextProvider>
         </XYFlowProvider>
@@ -107,13 +117,11 @@ type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
-  showNavigationButtons: boolean
 }
 const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
   controls,
-  showDiagramTitle,
-  showNavigationButtons
+  showDiagramTitle
 }) {
   const {
     isInitialized,
@@ -140,7 +148,6 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
         )}
       >
         <XYFlowInner
-          showNavigationButtons={showNavigationButtons}
           showDiagramTitle={showDiagramTitle}
           background={background}
           controls={controls}

package/src/StaticLikeC4Diagram.tsx

@@ -12,6 +12,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'
+  | 'where'
 >
 
 export function StaticLikeC4Diagram({
@@ -34,6 +35,7 @@ export function StaticLikeC4Diagram({
       showElementLinks
       showDiagramTitle={false}
       enableDynamicViewWalkthrough={false}
+      enableFocusMode={false}
       nodesSelectable={false}
       nodesDraggable={false}
       {...rest}

package/src/globals.css.ts

@@ -1,5 +1,3 @@
-import '@xyflow/react/dist/style.css'
-
 import { defaultTheme } from '@likec4/core'
 import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
 import { scale, toHex } from 'khroma'

package/src/hooks/index.ts

@@ -1,2 +1,4 @@
+export * from './useDiagramState'
 export * from './useSetState'
 export * from './useUpdateEffect'
+export * from './useXYFlow'

package/src/{state/useDiagramStore.ts → hooks/useDiagramState.ts}

@@ -2,8 +2,8 @@ import { shallowEqual } from 'fast-equals'
 import { useContext } from 'react'
 import { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'
 
-import { DiagramContext, type DiagramZustandStore } from './DiagramContext'
-import type { DiagramState } from './diagramStore'
+import { DiagramContext } from '../state/DiagramContext'
+import type { DiagramState, DiagramStoreApi } from '../state/diagramStore'
 
 function useDiagramState<StateSlice = unknown>(
   selector: (state: DiagramState) => StateSlice,
@@ -18,7 +18,6 @@ function useDiagramState<StateSlice = unknown>(
   return useZustandStore(store, selector, equalityFn ?? shallowEqual)
 }
 
-export type DiagramStoreApi = Readonly<Pick<DiagramZustandStore, 'getState' | 'setState' | 'subscribe'>>
 function useDiagramStoreApi(): DiagramStoreApi {
   const store = useContext(DiagramContext)
 
@@ -28,5 +27,5 @@ function useDiagramStoreApi(): DiagramStoreApi {
 
   return store
 }
-
+export type { DiagramState, DiagramStoreApi }
 export { useDiagramState, useDiagramStoreApi }

package/src/{xyflow/hooks → hooks}/useXYFlow.ts

@@ -1,7 +1,7 @@
 import { useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { useCallback } from 'react'
-import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../types'
+import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types'
 
 export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
 

package/src/index.ts

@@ -1,9 +1,11 @@
+import '@xyflow/react/dist/style.css'
+
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
-export { useSetState, useUpdateEffect } from './hooks'
+export { useSetState } from './hooks/useSetState'
+export { useUpdateEffect } from './hooks/useUpdateEffect'
 export type * from './LikeC4Diagram'
 export type * from './LikeC4Diagram.props'
 export type * from './StaticLikeC4Diagram'
-export type * from './types'
 export type * from './xyflow/types'

package/src/state/DiagramContext.tsx

@@ -1,10 +1,10 @@
+import { invariant } from '@likec4/core'
 import { deepEqual, shallowEqual } from 'fast-equals'
-import { createContext, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
-import { useUpdateEffect } from '../hooks'
-import { useXYFlow, useXYStoreApi } from '../xyflow/hooks/useXYFlow'
-import { createDiagramStore, type DiagramInitialState } from './diagramStore'
+import { createContext, type PropsWithChildren, useCallback, useRef } from 'react'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import { useXYFlow, useXYStoreApi } from '../hooks/useXYFlow'
+import { createDiagramStore, type DiagramInitialState, type DiagramZustandStore } from './diagramStore'
 
-export type DiagramZustandStore = ReturnType<typeof createDiagramStore>
 export const DiagramContext = createContext<DiagramZustandStore | null>(null)
 
 export type DiagramContextProviderProps = PropsWithChildren<
@@ -19,6 +19,7 @@ export function DiagramContextProvider({
   view,
   className,
   keepAspectRatio,
+  whereFilter,
   ...props
 }: DiagramContextProviderProps) {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -34,6 +35,7 @@ export function DiagramContextProvider({
       xyflow,
       view,
       getContainer,
+      whereFilter: structuredClone(whereFilter),
       ...props
     })
   }
@@ -50,9 +52,15 @@ export function DiagramContextProvider({
 
   useUpdateEffect(
     () => {
-      store.current?.getState().updateView(view)
+      const current = store.current
+      invariant(current, 'DiagramContext.store.current is not defined')
+      if (!deepEqual(whereFilter, current.getState().whereFilter)) {
+        current.setState({ whereFilter: structuredClone(whereFilter) }, false, 'update where filter')
+      }
+      current.getState().updateView(view)
     },
-    [view]
+    [view, whereFilter] as const,
+    (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
   )
 
   return (

package/src/state/diagram-to-xyflow.ts

@@ -1,6 +1,7 @@
-import { extractStep, invariant, nonNullable } from '@likec4/core'
-import type { DiagramNode, DiagramView, Fqn } from '@likec4/core/types'
+import { extractStep, invariant, nonNullable, whereOperatorAsPredicate } from '@likec4/core'
+import type { DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types'
 import { hasAtLeast } from 'remeda'
+import type { WhereOperator } from '../LikeC4Diagram.props'
 import { ZIndexes } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowNode } from '../xyflow/types'
 
@@ -9,6 +10,7 @@ import type { XYFlowEdge, XYFlowNode } from '../xyflow/types'
 export function diagramViewToXYFlowData(
   view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>,
   opts: {
+    where: WhereOperator<string, string> | null
     draggable: boolean
     selectable: boolean
   }
@@ -35,6 +37,17 @@ export function diagramViewToXYFlowData(
     }>()
   )
 
+  let visiblePredicate = (_nodeOrEdge: DiagramNode | DiagramEdge): boolean => true
+  if (opts.where) {
+    try {
+      visiblePredicate = whereOperatorAsPredicate(opts.where)
+    } catch (e) {
+      console.error('Error in where filter:', e)
+    }
+  }
+
+  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
+
   // namespace to force unique ids
   const ns = ''
   const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
@@ -72,9 +85,9 @@ export function diagramViewToXYFlowData(
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      hidden: false,
       width: node.width,
       height: node.height,
+      hidden: !visiblePredicate(node),
       // parentId: parent ? ns + parent.id : null,
       ...(parent && {
         parentId: ns + parent.id
@@ -109,6 +122,7 @@ export function diagramViewToXYFlowData(
       target: ns + target,
       zIndex: ZIndexes.Edge,
       selectable: opts.selectable,
+      hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
         edge,