@likec4/diagram 1.29.1 → 1.31.0

package/dist/custom/customNodes.d.ts

@@ -0,0 +1,218 @@
+import { AnyAux, NodeModel } from '@likec4/core/model';
+import { DiagramView } from '@likec4/core/types';
+import { ReactNode } from 'react';
+import { NodeProps } from '../base/types';
+import { Types } from '../likec4diagram/types';
+export type CustomElementNodeProps<M extends AnyAux = AnyAux> = {
+    nodeProps: NodeProps<Types.ElementNodeData, 'element'>;
+    nodeModel: NodeModel.WithElement<M, DiagramView>;
+};
+/**
+ * Node that will be used to render the element from the model.
+ * It is a leaf node, i.e. it does not have children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   elementNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementTitle,
+ *   ElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   ElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementTitle {...nodeProps} />
+ *     <ElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     {nodeModel.element.getMetadata('your-attr') === 'value' && <YourComponent />}
+ *     <IfNotReadOnly>
+ *       <ElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export declare const elementNode: (Node: (props: CustomElementNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.ElementNodeData, "element">) => ReactNode;
+export type CustomDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+    nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>;
+};
+/**
+ * Node that will be used to render the element from deployment model.
+ * It is a leaf node, i.e. it does not have children.
+ * Can be {@link DeploymentNodeModel} or {@link DeployedInstanceModel}.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: {@link NodeModel.WithDeploymentElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   deploymentNode,
+ *   ElementNodeContainer,
+ *   ElementShape,
+ *   ElementTitle,
+ *   DeploymentElementActions,
+ *   ElementDetailsButtonWithHandler,
+ *   IfNotReadOnly,
+ *   DeploymentElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomDeploymentNode = deploymentNode(({ nodeProps, nodeModel }) => (
+ *   <ElementNodeContainer nodeProps={nodeProps}>
+ *     <ElementShape {...nodeProps} />
+ *     <ElementTitle {...nodeProps} />
+ *     <DeploymentElementActions
+ *       {...nodeProps}
+ *       extraButtons={[
+ *         {
+ *           key: 'plus',
+ *           icon: <IconPlus />,
+ *           onClick: () => console.log('extra'),
+ *         },
+ *       ]}
+ *     />
+ *     <ElementDetailsButtonWithHandler {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <DeploymentElementToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </ElementNodeContainer>
+ * ))
+ * ```
+ */
+export declare const deploymentNode: (Node: (props: CustomDeploymentNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => ReactNode;
+export type CustomCompoundElementNodeProps<M extends AnyAux = AnyAux> = {
+    nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>;
+    nodeModel: NodeModel.WithElement<M, DiagramView>;
+};
+/**
+ * Node that will be used to render the compound element from the model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundElementNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDetailsButtonWithHandler,
+ *   IfEnabled,
+ *   CompoundElementToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundElementNode = compoundElementNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={props}>
+ *     <CompoundTitle {...props} />
+ *     <CompoundActions {...props} />
+ *     <IfEnabled feature="ElementDetails">
+ *       <CompoundDetailsButtonWithHandler {...props} />
+ *     </IfEnabled>
+ *     <IfNotReadOnly>
+ *       <CompoundElementToolbar {...props} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ))
+ * ```
+ */
+export declare const compoundElementNode: (Node: (props: CustomCompoundElementNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => ReactNode;
+export type CustomCompoundDeploymentNodeProps<M extends AnyAux = AnyAux> = {
+    nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>;
+    nodeModel: NodeModel.WithDeploymentElement<M, DiagramView>;
+};
+/**
+ * Node that will be used to render the compound from the deployment model.
+ * It is a container node, i.e. it has children.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.WithDeploymentElement}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   compoundDeploymentNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   CompoundActions,
+ *   CompoundDeploymentToolbar,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomCompoundDeploymentNode = compoundDeploymentNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <CompoundActions {...nodeProps} />
+ *     <IfNotReadOnly>
+ *       <CompoundDeploymentToolbar {...nodeProps} />
+ *     </IfNotReadOnly>
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export declare const compoundDeploymentNode: (Node: (props: CustomCompoundDeploymentNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => ReactNode;
+export type CustomViewGroupNodeProps<M extends AnyAux = AnyAux> = {
+    nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>;
+    nodeModel: NodeModel.IsGroup<M, DiagramView>;
+};
+/**
+ * Node that will be used to render the view group from the model.
+ *
+ * Custom node renderer receives these props:
+ * - `nodeProps`: props from XYFlow
+ * - `nodeModel`: LikeC4 {@link NodeModel.IsGroup}
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   viewGroupNode,
+ *   CompoundNodeContainer,
+ *   CompoundTitle,
+ *   DefaultHandles,
+ * } from '@likec4/diagram/custom'
+ *
+ * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
+ *   <CompoundNodeContainer nodeProps={nodeProps}>
+ *     <CompoundTitle {...nodeProps} />
+ *     <DefaultHandles />
+ *   </CompoundNodeContainer>
+ * ```
+ */
+export declare const viewGroupNode: (Node: (props: CustomViewGroupNodeProps<AnyAux>) => ReactNode) => (props: NodeProps<Types.ViewGroupNodeData, "view-group">) => ReactNode;
+export interface CustomNodes {
+    element?: undefined | ((props: NodeProps<Types.ElementNodeData, 'element'>) => ReactNode);
+    deployment?: undefined | ((props: NodeProps<Types.DeploymentElementNodeData, 'deployment'>) => ReactNode);
+    compoundElement?: undefined | ((props: NodeProps<Types.CompoundElementNodeData, 'compound-element'>) => ReactNode);
+    compoundDeployment?: undefined | ((props: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>) => ReactNode);
+    viewGroup?: undefined | ((props: NodeProps<Types.ViewGroupNodeData, 'view-group'>) => ReactNode);
+}

package/dist/custom/hooks.d.ts

@@ -0,0 +1,10 @@
+export type { DiagramActorEvent, DiagramActorRef, DiagramContext, } from '../state/types';
+export { useDiagramEventHandlers, } from '../context/DiagramEventHandlers';
+export { type EnabledFeatures, useEnabledFeatures, } from '../context/DiagramFeatures';
+export { useCurrentViewId, } from '../hooks/useCurrentViewId';
+export { useDiagram, useDiagramContext, } from '../hooks/useDiagram';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, } from '../hooks/useXYFlow';
+export { useLikeC4Model, } from '../likec4model/useLikeC4Model';
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
+export { useSetState } from '../hooks/useSetState';
+export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/custom/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './customNodes';
+export * from './hooks';
+export type { Types } from '../likec4diagram/types';

package/dist/hooks/safeContext.js

@@ -1,10 +1,10 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { createContext, useContext } from 'react';
 
-const DiagramActorSafeContext = reactExports.createContext(null);
+const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
 const DiagramActorContextProvider = DiagramActorSafeContext.Provider;
 const useDiagramActorRef = () => {
-  const ctx = reactExports.useContext(DiagramActorSafeContext);
+  const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null) {
     throw new Error("DiagramActorRef is not provided");
   }

package/dist/hooks/useCurrentViewId.d.ts

@@ -1,2 +1,6 @@
-import { ViewId } from '@likec4/core';
+import { ViewId } from '@likec4/core/types';
+/**
+ * Returns current view id
+ * Should be used only inside LikeC4Diagram
+ */
 export declare function useCurrentViewId(): ViewId;

package/dist/hooks/useCurrentViewId.js

@@ -1,8 +1,7 @@
 import { useSelector } from '@xstate/react';
-import '@likec4/core';
 import '@mantine/hooks';
 import 'fast-equals';
-import '../_virtual/index.js';
+import 'react';
 import { useDiagramActorRef } from './safeContext.js';
 
 const selectViewId = (s) => s.context.view.id;