@likec4/diagram 1.30.0 → 1.32.0

package/src/context/ReduceGraphics.tsx

@@ -1,14 +1,14 @@
-import { createOptionalContext, createSafeContext } from '@mantine/core'
+import { createSafeContext } from '@mantine/core'
 import { useStore } from '@nanostores/react'
 import { type WritableAtom, atom } from 'nanostores'
-import { type PropsWithChildren, useRef } from 'react'
+import { type PropsWithChildren, createContext, useContext, useRef } from 'react'
 
-const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext<boolean>()
+const ReduceGraphicsModeCtx = createContext<boolean | null>(null)
 /**
  * Hook to determine if reduced graphics mode is enabled.
  */
 export function useIsReducedGraphics() {
-  const isReduced = useReducedGraphics()
+  const isReduced = useContext(ReduceGraphicsModeCtx)
   if (isReduced === null) {
     console.warn('ReduceGraphicsMode is not provided')
   }
@@ -30,9 +30,9 @@ export function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChi
   }
   return (
     <PanningAtomSafeCtx value={$isPanningRef.current}>
-      <ReduceGraphicsModeCtx value={reduceGraphics}>
+      <ReduceGraphicsModeCtx.Provider value={reduceGraphics}>
         {children}
-      </ReduceGraphicsModeCtx>
+      </ReduceGraphicsModeCtx.Provider>
     </PanningAtomSafeCtx>
   )
 }

package/src/context/RootContainer.tsx

@@ -1,7 +1,9 @@
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
+import { useId } from '@mantine/hooks'
 import { type PropsWithChildren, createContext, createRef, useContext, useEffect, useRef } from 'react'
 import { usePanningAtom } from './ReduceGraphics'
+import { TagStylesProvider } from './TagStylesContext'
 
 const RootContainerContext = createContext(createRef<HTMLDivElement>())
 
@@ -13,6 +15,7 @@ export function RootContainer({
   className?: string | undefined
   reduceGraphics?: boolean
 }>) {
+  const id = useId()
   const ref = useRef<HTMLDivElement>(null)
   const $isPanning = usePanningAtom()
 
@@ -28,14 +31,17 @@ export function RootContainer({
 
   return (
     <Box
+      id={id}
       className={cx('likec4-root', className)}
       ref={ref}
       {...reduceGraphics && {
         ['data-likec4-reduced-graphics']: true,
       }}>
-      <RootContainerContext.Provider value={ref}>
-        {children}
-      </RootContainerContext.Provider>
+      <TagStylesProvider rootSelector={`#${id}`}>
+        <RootContainerContext.Provider value={ref}>
+          {children}
+        </RootContainerContext.Provider>
+      </TagStylesProvider>
     </Box>
   )
 }

package/src/context/TagStylesContext.tsx

@@ -0,0 +1,96 @@
+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>>({})
+
+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
+  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

@@ -4,7 +4,6 @@ export {
   DiagramFeatures,
   IfEnabled,
   IfNotEnabled,
-  useEnabledFeature,
   useEnabledFeatures,
 } from './DiagramFeatures'
 export type { EnabledFeatures } from './DiagramFeatures'

package/src/custom/components.ts

@@ -0,0 +1,49 @@
+export {
+  CompoundActionButton,
+  CompoundDetailsButton,
+  CompoundNodeContainer,
+  CompoundTitle,
+  DefaultHandles,
+  ElementActionButtons,
+  ElementDetailsButton,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTag,
+  ElementTags,
+  ElementTitle,
+} 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,
+} from '../context/DiagramFeatures'
+
+export {
+  Overlay,
+  type OverlayProps,
+} from '../overlays/overlay/Overlay'

package/src/custom/customNodes.tsx

@@ -0,0 +1,254 @@
+import type { DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
+import type { Any } from '@likec4/core/types'
+import type { ReactNode } from 'react'
+import { customNode } from '../base/primitives'
+import type { NodeProps } from '../base/types'
+import type { Types } from '../likec4diagram/types'
+import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+
+function customDiagramNode<
+  P extends {
+    nodeProps: NodeProps<Types.NodeData>
+    nodeModel: NodeModel
+  },
+>(
+  Node: (props: P) => ReactNode,
+): (props: P['nodeProps']) => ReactNode {
+  return customNode((props) => {
+    const viewModel = useLikeC4Model().view(props.data.viewId)
+    const model = viewModel.node(props.id)
+    // @ts-ignore
+    return <Node nodeProps={props} nodeModel={model} />
+  }) as (props: P['nodeProps']) => ReactNode
+}
+
+export type CustomElementNodeProps<M extends Any = Any> = {
+  nodeProps: NodeProps<Types.ElementNodeData, 'element'>
+  nodeModel: NodeModel.WithElement<M>
+}
+/**
+ * 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,
+ *   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 const elementNode = customDiagramNode<CustomElementNodeProps>
+
+export type CustomDeploymentNodeProps<M extends Any = Any> = {
+  nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>
+  nodeModel: NodeModel.WithDeploymentElement<M>
+}
+/**
+ * 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 = customDiagramNode<CustomDeploymentNodeProps>
+
+export type CustomCompoundElementNodeProps<M extends Any = Any> = {
+  nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>
+  nodeModel: NodeModel.WithElement<M>
+}
+/**
+ * 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 = customDiagramNode<CustomCompoundElementNodeProps>
+
+export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
+  nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>
+  nodeModel: NodeModel.WithDeploymentElement<M>
+}
+/**
+ * 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 = customDiagramNode<CustomCompoundDeploymentNodeProps>
+
+export type CustomViewGroupNodeProps<M extends Any = Any> = {
+  nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>
+  nodeModel: NodeModel.IsGroup<M>
+}
+/**
+ * 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 = customDiagramNode<CustomViewGroupNodeProps>
+
+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/src/custom/hooks.ts

@@ -0,0 +1,36 @@
+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,
+  useLikeC4Specification,
+} from '../likec4model/useLikeC4Model'
+
+export { useMantinePortalProps } from '../hooks/useMantinePortalProps'
+export { useSetState } from '../hooks/useSetState'
+export { useUpdateEffect } from '../hooks/useUpdateEffect'

package/src/custom/index.ts

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

package/src/hooks/index.ts

@@ -1,5 +1,5 @@
 export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'
-export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
 export type { XYStoreApi } from './useXYFlow'

package/src/hooks/useCurrentViewId.ts

@@ -1,9 +1,14 @@
-import type { ViewId } from '@likec4/core'
+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)