@likec4/diagram 1.9.0 → 1.12.0

package/dist/LikeC4Diagram.props.d.ts

@@ -1,154 +0,0 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationID, ViewChange, ViewID, WhereOperator } from '@likec4/core';
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { XYFlowEdge, XYFlowNode } from './xyflow/types';
-import { XYBackground } from './xyflow/XYFlowBackground';
-
-export type { WhereOperator };
-export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
-    navigateTo: ViewID;
-};
-type ElementIconNodeProps = {
-    id: string;
-    title: string;
-    icon?: string | undefined;
-};
-export type ElementIconRenderer = (props: {
-    node: ElementIconNodeProps;
-}) => ReactNode;
-export type OnNavigateTo = {
-    (to: ViewID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate, xynode?: XYFlowNode): void;
-};
-export type OnNodeClick = (event: {
-    element: DiagramNode;
-    xynode: XYFlowNode;
-    event: ReactMouseEvent;
-}) => void;
-export type OnEdgeClick = (event: {
-    edge: DiagramEdge;
-    xyedge: XYFlowEdge;
-    event: ReactMouseEvent;
-}) => void;
-/**
- * On pane/canvas click (not on any node or edge)
- */
-export type OnCanvasClick = (event: ReactMouseEvent) => void;
-export type ChangeEvent = {
-    change: ViewChange;
-};
-export type OnChange = {
-    (event: ChangeEvent): void;
-};
-export type LikeC4ColorScheme = 'light' | 'dark';
-export interface LikeC4DiagramProperties {
-    view: DiagramView;
-    className?: string | undefined;
-    /**
-     * Controls color scheme used for styling the flow
-     * By default inherits from system or surrounding MantineProvider
-     *
-     * @example 'light' | 'dark'
-     */
-    /**
-     * Show/hide controls menu
-     * @default false
-     */
-    controls?: boolean | undefined;
-    /**
-     * Enable/disable panning
-     * @default true
-     */
-    pannable?: boolean | undefined;
-    /**
-     * Enable/disable zooming
-     * @default true
-     */
-    zoomable?: boolean | undefined;
-    /**
-     * Disable any editing (dragging still can be enabled with `nodesDraggable`)
-     * @default true
-     */
-    readonly?: boolean | undefined;
-    /**
-     * If set, initial viewport will show all nodes & edges
-     * @default true
-     */
-    fitView?: boolean | undefined;
-    /**
-     * Seems like this is percentage of the view size
-     * @default 0
-     */
-    fitViewPadding?: number | undefined;
-    nodesSelectable?: boolean | undefined;
-    /**
-     * @default false
-     */
-    nodesDraggable?: boolean | undefined;
-    initialWidth?: number | undefined;
-    initialHeight?: number | undefined;
-    /**
-     * Keep aspect ratio of the diagram
-     * @default false
-     */
-    keepAspectRatio?: boolean | undefined;
-    /**
-     * Background pattern
-     * @default 'dots'
-     */
-    background?: 'transparent' | 'solid' | XYBackground | undefined;
-    /**
-     * Display hovercards with element links
-     * @default true
-     */
-    showElementLinks?: boolean | undefined;
-    /**
-     * Display panel with diagram title / description
-     * @default true
-     */
-    showDiagramTitle?: boolean | undefined;
-    /**
-     * Show back/forward navigation buttons
-     * @default false
-     */
-    showNavigationButtons?: undefined | boolean;
-    /**
-     * Display notations of the view
-     * @default true
-     */
-    showNotations?: boolean | undefined;
-    /**
-     * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-     * @default true
-     */
-    enableFocusMode?: boolean | undefined;
-    /**
-     * If Walkthrough for dynamic views should be enabled
-     * @default false
-     */
-    enableDynamicViewWalkthrough?: boolean | undefined;
-    /**
-     * Experimental feature to enable edge editing
-     * @default false
-     */
-    experimentalEdgeEditing?: boolean | undefined;
-    /**
-     * Render custom icon for a node
-     * 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;
-    onNavigateTo?: OnNavigateTo | null | undefined;
-    onNodeClick?: OnNodeClick | null | undefined;
-    onNodeContextMenu?: OnNodeClick | null | undefined;
-    onCanvasContextMenu?: OnCanvasClick | null | undefined;
-    onEdgeClick?: OnEdgeClick | null | undefined;
-    onEdgeContextMenu?: OnEdgeClick | null | undefined;
-    onCanvasClick?: OnCanvasClick | null | undefined;
-    onCanvasDblClick?: OnCanvasClick | null | undefined;
-    onBurgerMenuClick?: null | undefined | (() => void);
-    onOpenSourceView?: null | undefined | (() => void);
-    onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void);
-    onOpenSourceRelation?: null | undefined | ((id: RelationID) => void);
-}

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +0,0 @@
-import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-
-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 +0,0 @@
-export declare const rootClassName = "likec4-diagram-root";

package/dist/hooks/index.d.ts

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

package/dist/hooks/useDiagramState.d.ts

@@ -1,6 +0,0 @@
-import { DiagramState, DiagramStoreApi } from '../state/diagramStore';
-
-declare function useDiagramState<StateSlice = unknown>(selector: (state: DiagramState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
-declare function useDiagramStoreApi(): DiagramStoreApi;
-export type { DiagramState, DiagramStoreApi };
-export { useDiagramState, useDiagramStoreApi };

package/dist/hooks/useSetState.d.ts

@@ -1,3 +0,0 @@
-import { NonEmptyObject } from 'type-fest';
-
-export declare function useSetState<T extends object>(initialState: T | (() => T)): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];

package/dist/hooks/useUpdateEffect.d.ts

@@ -1,5 +0,0 @@
-import { DependenciesComparator, EffectHook } from '@react-hookz/web';
-import { DependencyList, EffectCallback } from 'react';
-
-export declare const depsShallowEqual: DependenciesComparator;
-export declare function useUpdateEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList>(callback: Callback, deps: Deps, equalityFn?: DependenciesComparator<Deps>, effectHook?: EffectHook<Callback, Deps>): void;

package/dist/hooks/useXYFlow.d.ts

@@ -1,267 +0,0 @@
-import { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types';
-
-export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<XYFlowNode, {
-    id: string;
-    type: "relationship";
-    source: string;
-    target: string;
-    sourceHandle?: string | null;
-    targetHandle?: string | null;
-    animated?: boolean;
-    hidden?: boolean;
-    deletable?: boolean;
-    selectable?: boolean;
-    data: import('../xyflow/types').RelationshipData;
-    selected?: boolean;
-    markerStart?: import('@xyflow/react').EdgeMarkerType;
-    markerEnd?: import('@xyflow/react').EdgeMarkerType;
-    zIndex?: number;
-    ariaLabel?: string;
-    interactionWidth?: number;
-    label?: string | import('react').ReactNode;
-    labelStyle?: import('react').CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: import('react').CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    style?: import('react').CSSProperties;
-    className?: string;
-    reconnectable?: boolean | import('@xyflow/react').HandleType;
-    focusable?: boolean;
-}>;
-export declare const useXYNodesData: {
-    (nodeId: string): Pick<XYFlowNode, "id" | "type" | "data"> | null;
-    (nodeIds: string[]): Pick<XYFlowNode, "id" | "type" | "data">[];
-};
-export declare function useXYStore<StateSlice = unknown>(selector: (state: XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
-export declare const useXYStoreApi: () => {
-    getState: () => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }>;
-    setState: (partial: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }>> | ((state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }>) => import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }> | Partial<import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }>>), replace?: boolean | undefined) => void;
-    subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }>, prevState: import('@xyflow/react').ReactFlowState<XYFlowNode, {
-        id: string;
-        type: "relationship";
-        source: string;
-        target: string;
-        sourceHandle?: string | null;
-        targetHandle?: string | null;
-        animated?: boolean;
-        hidden?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        data: import('../xyflow/types').RelationshipData;
-        selected?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
-        zIndex?: number;
-        ariaLabel?: string;
-        interactionWidth?: number;
-        label?: string | import('react').ReactNode;
-        labelStyle?: import('react').CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: import('react').CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        style?: import('react').CSSProperties;
-        className?: string;
-        reconnectable?: boolean | import('@xyflow/react').HandleType;
-        focusable?: boolean;
-    }>) => void) => () => void;
-};
-export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
-export declare function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[];

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-
-export { LikeC4Diagram } from './LikeC4Diagram';
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
-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 './xyflow/types';