@likec4/diagram 1.0.2 → 1.1.1

package/dist/KeepAspectRatioContainer.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+
+type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
+    enabled: boolean;
+    width: number;
+    height: number;
+};
+export declare function KeepAspectRatioContainer({ children, width, height, enabled, className, style, ...rest }: KeepAspectRatioContainerProps): JSX.Element;
+export {};

package/dist/LikeC4Diagram.css.d.ts

@@ -1,3 +1,4 @@
+export declare const keepAspectRatioContainer: string;
 export declare const cssReactFlow: string;
 export declare const cssDisablePan: string;
 export declare const cssTransparentBg: string;

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

package/dist/LikeC4Diagram.props.d.ts

@@ -1,8 +1,8 @@
-import { XYBackgroundProps } from './xyflow/XYFlowBackground';
 import { XYFlowEdge, XYFlowNode } from './xyflow/types';
+import { XYBackgroundProps } from './xyflow/XYFlowBackground';
 import { SetRequired, Simplify } from 'type-fest';
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { DiagramEdge, DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core';
+import { BorderStyle, DiagramEdge, DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core';
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>;
 export type OnNavigateTo = {
@@ -23,18 +23,18 @@ export type OnEdgeClick = (event: {
  */
 export type OnCanvasClick = (event: ReactMouseEvent) => void;
 export declare namespace Changes {
-    interface ChangeColor {
-        op: 'change-color';
-        color: ThemeColor;
-        targets: NonEmptyArray<Fqn>;
-    }
-    interface ChangeShape {
-        op: 'change-shape';
-        shape: ElementShape;
+    interface ChangeElementStyle {
+        op: 'change-element-style';
+        style: {
+            border?: BorderStyle;
+            opacity?: number;
+            shape?: ElementShape;
+            color?: ThemeColor;
+        };
         targets: NonEmptyArray<Fqn>;
     }
 }
-export type Change = Changes.ChangeColor | Changes.ChangeShape;
+export type Change = Changes.ChangeElementStyle;
 export type ChangeEvent = {
     changes: NonEmptyArray<Change>;
 };
@@ -103,6 +103,11 @@ export interface LikeC4DiagramProperties {
      * @default true
      */
     showElementLinks?: boolean | undefined;
+    /**
+     * Display panel with diagram title / description
+     * @default true
+     */
+    showDiagramTitle?: boolean | undefined;
 }
 export interface LikeC4DiagramEventHandlers {
     onChange?: OnChange | null | undefined;