@likec4/diagram 1.5.0 → 1.6.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Denis Davydkov
+Copyright (c) 2023-2024 Denis Davydkov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, showNavigationButtons, enableDynamicViewWalkthrough, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, renderIcon }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.props.d.ts

@@ -1,11 +1,20 @@
 import { BorderStyle, DiagramEdge, DiagramNode, DiagramView, EdgeId, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core';
 import { XYPosition } from '@xyflow/system';
-import { MouseEvent as ReactMouseEvent } from 'react';
-import { SetRequired, Simplify } from 'type-fest';
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { XYFlowEdge, XYFlowNode } from './xyflow/types';
 import { XYBackground } from './xyflow/XYFlowBackground';
 
-export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>;
+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;
 };
@@ -136,6 +145,11 @@ export interface LikeC4DiagramProperties {
      * @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;
 }
 export interface LikeC4DiagramEventHandlers {
     onChange?: OnChange | null | undefined;
@@ -148,3 +162,4 @@ export interface LikeC4DiagramEventHandlers {
     onCanvasClick?: OnCanvasClick | null | undefined;
     onCanvasDblClick?: OnCanvasClick | null | undefined;
 }
+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'>;
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'initialWidth' | 'initialHeight' | 'renderIcon'>;
 export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+
 export { LikeC4Diagram } from './LikeC4Diagram';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export { useSetState, useUpdateEffect } from './hooks';