@likec4/diagram 1.7.1 → 1.7.3

package/dist/LikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, showNavigationButtons, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onEditorCommand, renderIcon }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSourceElement, onOpenSourceView, onOpenSourceRelation, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.props.d.ts

@@ -1,9 +1,39 @@
-import { BorderStyle, DiagramEdge, DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID, ViewManualLayout } from '@likec4/core';
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, NonEmptyArray, RelationID, ViewChange, ViewID } from '@likec4/core';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { DiagramEditorCommand } from './types';
 import { XYFlowEdge, XYFlowNode } from './xyflow/types';
 import { 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 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;
 };
@@ -28,30 +58,12 @@ export type OnEdgeClick = (event: {
     xyedge: XYFlowEdge;
     event: ReactMouseEvent;
 }) => void;
-export type OnEditorCommand = (cmd: DiagramEditorCommand) => void;
 /**
  * On pane/canvas click (not on any node or edge)
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
-export declare namespace Changes {
-    interface ChangeElementStyle {
-        op: 'change-element-style';
-        style: {
-            border?: BorderStyle;
-            opacity?: number;
-            shape?: ElementShape;
-            color?: ThemeColor;
-        };
-        targets: NonEmptyArray<Fqn>;
-    }
-    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;
@@ -148,6 +160,7 @@ 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 {
     onChange?: OnChange | null | undefined;
@@ -159,6 +172,9 @@ export interface LikeC4DiagramEventHandlers {
     onEdgeContextMenu?: OnEdgeClick | null | undefined;
     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);
 }
 export {};

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
 
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'initialWidth' | 'initialHeight' | 'renderIcon'>;
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
 export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/globals.css.d.ts

@@ -1,2 +1 @@
-
 export declare const rootClassName = "likec4-diagram-root";

package/dist/hooks/index.d.ts

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

package/dist/{state/useDiagramStore.d.ts → hooks/useDiagramState.d.ts}

@@ -1,7 +1,6 @@
-import { DiagramZustandStore } from './DiagramContext';
-import { DiagramState } from './diagramStore';
+import { DiagramState, DiagramStoreApi } from '../state/diagramStore';
 
 declare function useDiagramState<StateSlice = unknown>(selector: (state: DiagramState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
-export type DiagramStoreApi = Readonly<Pick<DiagramZustandStore, 'getState' | 'setState' | 'subscribe'>>;
 declare function useDiagramStoreApi(): DiagramStoreApi;
+export type { DiagramState, DiagramStoreApi };
 export { useDiagramState, useDiagramStoreApi };

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

@@ -1,4 +1,4 @@
-import { XYFlowEdge, XYFlowNode, XYFlowState } from '../types';
+import { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types';
 
 export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<XYFlowNode, {
     id: string;
@@ -11,7 +11,7 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     hidden?: boolean;
     deletable?: boolean;
     selectable?: boolean;
-    data: import('../types').RelationshipData;
+    data: import('../xyflow/types').RelationshipData;
     selected?: boolean;
     markerStart?: import('@xyflow/react').EdgeMarkerType;
     markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -46,7 +46,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -75,7 +75,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -103,7 +103,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -131,7 +131,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -159,7 +159,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -187,7 +187,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -216,7 +216,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
@@ -244,7 +244,7 @@ export declare const useXYStoreApi: () => {
         hidden?: boolean;
         deletable?: boolean;
         selectable?: boolean;
-        data: import('../types').RelationshipData;
+        data: import('../xyflow/types').RelationshipData;
         selected?: boolean;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         markerEnd?: import('@xyflow/react').EdgeMarkerType;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
+
 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';