@likec4/diagram 1.40.0 → 1.42.0

package/src/context/RootContainer.tsx

@@ -1,54 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { type PropsWithChildren, createContext, createRef, useContext, useEffect, useRef } from 'react'
-import { usePanningAtom } from './ReduceGraphics'
-import { TagStylesProvider } from './TagStylesContext'
-
-const RootContainerContext = createContext(createRef<HTMLDivElement>())
-
-export function RootContainer({
-  id,
-  className,
-  reduceGraphics = false,
-  children,
-}: PropsWithChildren<{
-  id: string
-  className?: string | undefined
-  reduceGraphics?: boolean
-}>) {
-  const ref = useRef<HTMLDivElement>(null)
-  const $isPanning = usePanningAtom()
-
-  useEffect(() => {
-    return $isPanning.listen((isPanning) => {
-      ref.current?.setAttribute('data-likec4-diagram-panning', isPanning ? 'true' : 'false')
-    })
-  }, [$isPanning])
-
-  return (
-    <Box
-      id={id}
-      className={cx('likec4-root', className)}
-      ref={ref}
-      {...reduceGraphics && {
-        ['data-likec4-reduced-graphics']: true,
-      }}>
-      <TagStylesProvider rootSelector={`#${id}`}>
-        <RootContainerContext.Provider value={ref}>
-          {children}
-        </RootContainerContext.Provider>
-      </TagStylesProvider>
-    </Box>
-  )
-}
-
-export function useRootContainerRef() {
-  return useContext(RootContainerContext)
-}
-
-/**
- * NOTE: Non-reactive
- */
-export function useRootContainer() {
-  return useContext(RootContainerContext).current
-}

package/src/context/TagStylesContext.tsx

@@ -1,98 +0,0 @@
-import { type TagSpecification, isTagColorSpecified } from '@likec4/core'
-import { useMantineStyleNonce } from '@mantine/core'
-import { useDeepCompareMemo } from '@react-hookz/web'
-import { type PropsWithChildren, createContext, useContext } from 'react'
-import { entries, flatMap, join, pipe } from 'remeda'
-import { useLikeC4Specification } from '../likec4model/useLikeC4Model'
-
-const TagStylesContext = createContext<Record<string, TagSpecification>>({})
-
-// TODO: keep this in sync with styled-system/preset/src/const.ts
-const radixColors = [
-  'yellow',
-  'orange',
-  'amber',
-  'tomato',
-  'red',
-  'ruby',
-  'crimson',
-  'pink',
-  'pink',
-  'purple',
-  'violet',
-  'indigo',
-  'blue',
-  'teal',
-  'grass',
-  'lime',
-]
-
-const generateColorVars = (spec: TagSpecification) => {
-  const color = spec.color
-  // Tag has a color defined in the specification
-  if (isTagColorSpecified(spec)) {
-    return `
-      --colors-likec4-tag-bg: ${color};
-      --colors-likec4-tag-bg-hover: color-mix(in srgb, ${color}, var(--colors-likec4-mix-color) 20%);
-    `
-  }
-  if (!radixColors.includes(color)) {
-    return ''
-  }
-  let textcolor = '12'
-  if (['mint', 'grass', 'lime', 'yellow', 'amber'].includes(color)) {
-    textcolor = 'dark-2'
-  }
-  return `
-  --colors-likec4-tag-border: var(--colors-${color}-8);
-  --colors-likec4-tag-bg: var(--colors-${color}-9);
-  --colors-likec4-tag-bg-hover: var(--colors-${color}-10);
-  --colors-likec4-tag-text: var(--colors-${color}-${textcolor});
-  `
-}
-
-export function TagStylesProvider({ children, rootSelector }: PropsWithChildren<{ rootSelector: string }>) {
-  const tags = useLikeC4Specification().tags
-  const { specs, stylesheet } = useDeepCompareMemo(() => {
-    if (!tags) {
-      return { specs: {}, stylesheet: '' }
-    }
-    return {
-      specs: tags,
-      stylesheet: pipe(
-        entries(tags),
-        flatMap(([tag, spec]) => [
-          `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
-          generateColorVars(spec),
-          '}',
-        ]),
-        join('\n'),
-      ),
-    }
-  }, [tags, rootSelector])
-
-  return (
-    <TagStylesContext.Provider value={specs}>
-      {stylesheet !== '' && <TagStylesheet stylesheet={stylesheet} />}
-      {children}
-    </TagStylesContext.Provider>
-  )
-}
-
-function TagStylesheet({ stylesheet }: { stylesheet: string }) {
-  const nonce = useMantineStyleNonce()?.()
-  return (
-    <style data-likec4-tag-stylesheet type="text/css" dangerouslySetInnerHTML={{ __html: stylesheet }} nonce={nonce} />
-  )
-}
-
-export function useTagSpecifications() {
-  return useContext(TagStylesContext)
-}
-
-export function useTagSpecification(tag: string): TagSpecification {
-  const specs = useContext(TagStylesContext)
-  return specs[tag] ?? {
-    color: 'tomato' as any,
-  }
-}

package/src/context/index.ts

@@ -1,13 +0,0 @@
-export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers'
-export {
-  AllDisabled,
-  DiagramFeatures,
-  IfEnabled,
-  IfNotEnabled,
-  useEnabledFeatures,
-} from './DiagramFeatures'
-export type { EnabledFeatures } from './DiagramFeatures'
-export { EnsureMantine } from './EnsureMantine'
-export { FramerMotionConfig } from './FramerMotionConfig'
-export { IconRenderer, IconRendererProvider } from './IconRenderer'
-export { RootContainer, useRootContainer, useRootContainerRef } from './RootContainer'

package/src/custom/components.ts

@@ -1,51 +0,0 @@
-export {
-  CompoundActionButton,
-  CompoundDetailsButton,
-  CompoundNodeContainer,
-  CompoundTitle,
-  DefaultHandles,
-  ElementActionButtons,
-  ElementDetailsButton,
-  ElementNodeContainer,
-  ElementShape,
-  ElementTag,
-  ElementTags,
-  ElementTitle,
-  MarkdownBlock,
-} from '../base/primitives'
-
-export {
-  IconOrShapeRenderer,
-  IconRenderer,
-  IconRendererProvider,
-} from '../context/IconRenderer'
-
-export {
-  CompoundActions,
-  CompoundDeploymentNode,
-  CompoundDeploymentToolbar,
-  CompoundDetailsButtonWithHandler,
-  CompoundElementNode,
-  CompoundElementToolbar,
-  DeploymentElementActions,
-  DeploymentElementToolbar,
-  DeploymentNode,
-  ElementActions,
-  ElementDetailsButtonWithHandler,
-  ElementNode,
-  ElementToolbar,
-  Toolbar,
-  ViewGroupNode,
-} from '../likec4diagram/custom/nodes'
-
-export {
-  IfEnabled,
-  IfNotEnabled,
-  IfNotReadOnly,
-  IfReadOnly,
-} from '../context/DiagramFeatures'
-
-export {
-  Overlay,
-  type OverlayProps,
-} from '../overlays/overlay/Overlay'

package/src/custom/customNodes.ts

@@ -1,282 +0,0 @@
-import type { DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
-import type { aux } from '@likec4/core/types'
-import type { FunctionComponent } from 'react'
-import { jsx } from 'react/jsx-runtime'
-import { customNode } from '../base/primitives'
-import type { NodeProps } from '../base/types'
-import type { Types } from '../likec4diagram/types'
-import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model'
-
-type Any = aux.Any
-
-type CustomDiagramNodeProps = {
-  nodeProps: NodeProps<Types.NodeData, string>
-  nodeModel: NodeModel
-}
-type CustomNodeComponent<P extends CustomDiagramNodeProps> = (
-  impl: FunctionComponent<P>,
-) => FunctionComponent<P['nodeProps']>
-
-function customDiagramNode<const P extends CustomDiagramNodeProps>(
-  Node: FunctionComponent<P>,
-): FunctionComponent<P['nodeProps']> {
-  return customNode((props: NodeProps<Types.NodeData, string>) => {
-    // @ts-ignore because dts-bundler fails to infer types
-    const viewId = props.data.viewId
-    const viewModel = useLikeC4ViewModel(viewId)
-    if (!viewModel) {
-      console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props })
-      return null
-    }
-    const model = viewModel.findNode(props.data.id)
-    if (!model) {
-      console.error(
-        `Node "${props.id}" not found in view "${viewId}", requested by customNode "${props.data.id}"`,
-        { props },
-      )
-      return null
-    }
-    return jsx(Node, { nodeProps: props, nodeModel: model })
-  }) as any
-}
-
-/**
- * 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}
- *
- * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
- *
- * @example
- * ```tsx
- * import {
- *   elementNode,
- *   ElementNodeContainer,
- *   ElementShape,
- *   ElementTitle,
- *   ElementActions,
- *   ElementDetailsButtonWithHandler,
- *   IfEnabled,
- *   IfNotReadOnly,
- *   ElementToolbar,
- *   DefaultHandles,
- *   ElementTags
- * } from '@likec4/diagram/custom'
- *
- * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
- *   <ElementNodeContainer nodeProps={nodeProps}>
- *     <ElementShape {...nodeProps} />
- *     <ElementTitle {...nodeProps} />
- *     <IfEnabled feature="ElementTags">
- *       <ElementTags {...nodeProps} />
- *     </IfEnabled>
- *     <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 const elementNode: CustomNodeComponent<CustomElementNodeProps> = customDiagramNode as any
-export type CustomElementNodeProps = {
-  nodeProps: NodeProps<Types.ElementNodeData, 'element'>
-  nodeModel: NodeModel.WithElement<Any>
-}
-
-/**
- * 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}
- *
- * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
- *
- * @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 const deploymentNode: CustomNodeComponent<CustomDeploymentNodeProps> = customDiagramNode as any
-export type CustomDeploymentNodeProps = {
-  nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>
-  nodeModel: NodeModel.WithDeploymentElement<Any>
-}
-
-/**
- * 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}
- *
- * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
- *
- * @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 const compoundElementNode: CustomNodeComponent<CustomCompoundElementNodeProps> = customDiagramNode as any
-export type CustomCompoundElementNodeProps = {
-  nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>
-  nodeModel: NodeModel.WithElement<Any>
-}
-
-/**
- * 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}
- *
- * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
- *
- * @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 const compoundDeploymentNode: CustomNodeComponent<CustomCompoundDeploymentNodeProps> = customDiagramNode as any
-export type CustomCompoundDeploymentNodeProps = {
-  nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>
-  nodeModel: NodeModel.WithDeploymentElement<Any>
-}
-
-/**
- * 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}
- *
- * @see [Default implementation](https://github.com/likec4/likec4/blob/main/packages/diagram/src/likec4diagram/custom/nodes/nodes.tsx)
- *
- * @example
- * ```tsx
- * import {
- *   viewGroupNode,
- *   CompoundNodeContainer,
- *   CompoundTitle,
- *   DefaultHandles,
- * } from '@likec4/diagram/custom'
- *
- * const CustomViewGroupNode = viewGroupNode(({ nodeProps, nodeModel }) => (
- *   <CompoundNodeContainer nodeProps={nodeProps}>
- *     <CompoundTitle {...nodeProps} />
- *     <DefaultHandles />
- *   </CompoundNodeContainer>
- * ```
- */
-export const viewGroupNode: CustomNodeComponent<CustomViewGroupNodeProps> = customDiagramNode as any
-export type CustomViewGroupNodeProps = {
-  nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>
-  nodeModel: NodeModel.IsGroup<Any>
-}
-
-export const sequenceActorNode: CustomNodeComponent<CustomSequenceActorNodeProps> = customDiagramNode as any
-export type CustomSequenceActorNodeProps = {
-  nodeProps: NodeProps<Types.SequenceActorNodeData, 'seq-actor'>
-  nodeModel: NodeModel.WithElement<Any>
-}
-
-export interface CustomNodes {
-  element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>
-  deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>
-  compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>
-  compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>
-  viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>
-  sequenceActor?: FunctionComponent<NodeProps<Types.SequenceActorNodeData, 'seq-actor'>>
-}

package/src/custom/hooks.ts

@@ -1,52 +0,0 @@
-export type {
-  DiagramActorEvent,
-  DiagramActorRef,
-  DiagramContext,
-} from '../state/types'
-
-export {
-  useDiagramEventHandlers,
-} from '../context/DiagramEventHandlers'
-
-export {
-  type EnabledFeatures,
-  type FeatureName,
-  useEnabledFeatures,
-} from '../context/DiagramFeatures'
-export {
-  useCurrentViewId,
-} from '../hooks/useCurrentViewId'
-export {
-  type DiagramApi,
-  useDiagram,
-  useDiagramActorRef,
-  useDiagramContext,
-  useOnDiagramEvent,
-} from '../hooks/useDiagram'
-export {
-  useXYFlow,
-  useXYInternalNode,
-  useXYStore,
-  useXYStoreApi,
-  type XYFlowInstance,
-  type XYStoreApi,
-} from '../hooks/useXYFlow'
-
-export {
-  useCurrentViewModel,
-} from '../likec4model/useCurrentViewModel'
-export {
-  useLikeC4Model,
-  useLikeC4Specification,
-  useLikeC4ViewModel,
-} from '../likec4model/useLikeC4Model'
-export {
-  useHasProjects,
-  useLikeC4ProjectId,
-  useLikeC4Projects,
-  useLikeC4ProjectsContext,
-} from '../likec4model/useLikeC4Project'
-
-export { useMantinePortalProps } from '../hooks/useMantinePortalProps'
-export { useSetState } from '../hooks/useSetState'
-export { useUpdateEffect } from '../hooks/useUpdateEffect'

package/src/custom/index.ts

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

package/src/hooks/index.ts

@@ -1,6 +0,0 @@
-export { useId } from './useId'
-export { useMantinePortalProps } from './useMantinePortalProps'
-export { useSetState } from './useSetState'
-export { useUpdateEffect } from './useUpdateEffect'
-export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
-export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow'

package/src/hooks/safeContext.tsx

@@ -1,18 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { DiagramActorRef } from '../state/types'
-
-/**
- * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
- */
-const DiagramActorSafeContext = createContext<DiagramActorRef>(null as any)
-DiagramActorSafeContext.displayName = 'DiagramActorSafeContext'
-
-export const DiagramActorContextProvider = DiagramActorSafeContext.Provider
-
-export const useDiagramActorRef = () => {
-  const ctx = useContext(DiagramActorSafeContext)
-  if (ctx === null) {
-    throw new Error('DiagramActorRef is not provided')
-  }
-  return ctx
-}

package/src/hooks/useCurrentViewId.ts

@@ -1,15 +0,0 @@
-import type { ViewId } from '@likec4/core/types'
-import { useSelector } from '@xstate/react'
-import type { DiagramActorSnapshot } from '../state/types'
-import { useDiagramActorRef } from './useDiagram'
-
-const selectViewId = (s: DiagramActorSnapshot) => s.context.view.id
-
-/**
- * Returns current view id
- * Should be used only inside LikeC4Diagram
- */
-export function useCurrentViewId(): ViewId {
-  const actorRef = useDiagramActorRef()
-  return useSelector(actorRef, selectViewId)
-}