@likec4/diagram 1.35.0 → 1.36.1

package/src/state/DiagramActorProvider.tsx

@@ -1,14 +1,13 @@
-import type { DiagramView, WhereOperator } from '@likec4/core/types'
-import { useCustomCompareEffect, useDeepCompareEffect } from '@react-hookz/web'
+import type { DiagramView, ViewId, WhereOperator } from '@likec4/core/types'
+import { useCustomCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { ErrorBoundary } from '../components/ErrorFallback'
-import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
+import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useCurrentViewId } from '../hooks/useCurrentViewId'
 import type { ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
@@ -16,7 +15,7 @@ import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorSnapshot } from './types'
+import type { DiagramActorRef, DiagramActorSnapshot } from './types'
 
 const selectToggledFeatures = (state: DiagramActorSnapshot) => {
   if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
@@ -44,28 +43,12 @@ export function DiagramActorProvider({
   nodesSelectable: boolean
   where: WhereOperator | null
 }>) {
-  const handlersRef = useDiagramEventHandlersRef()
+  const { handlersRef } = useDiagramEventHandlers()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
   const machineRef = useRef<DiagramMachine | null>(null)
   if (!machineRef.current) {
     machineRef.current = diagramMachine.provide({
-      actions: {
-        'trigger:NavigateTo': ((_, { viewId }) => {
-          // Slightly defer callback for better responsiveness
-          setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId)
-          }, 40)
-        }),
-
-        'trigger:OnChange': ((_, params) => {
-          handlersRef.current.onChange?.(params)
-        }),
-
-        'trigger:OpenSource': ((_, params) => {
-          handlersRef.current.onOpenSource?.(params)
-        }),
-      },
       actors: {
         syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
           actions: {
@@ -95,6 +78,8 @@ export function DiagramActorProvider({
     },
   )
 
+  useActorEventHandlers(actorRef)
+
   const features = useEnabledFeatures()
   useCustomCompareEffect(
     () => {
@@ -128,7 +113,7 @@ export function DiagramActorProvider({
     <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
         <ErrorBoundary>
-          <CurrentViewModelProvider>
+          <CurrentViewModelProvider viewId={view.id}>
             {children}
           </CurrentViewModelProvider>
         </ErrorBoundary>
@@ -139,31 +124,72 @@ export function DiagramActorProvider({
 
 function CurrentViewModelProvider({
   children,
-}: PropsWithChildren) {
-  const viewId = useCurrentViewId()
+  viewId,
+}: PropsWithChildren<{
+  viewId: ViewId
+}>) {
   const likec4model = useLikeC4Model()
-  const [viewmodel, setViewmodel] = useState(() => likec4model.view(viewId))
+  const [viewmodel, setViewmodel] = useState(() => likec4model.findView(viewId))
 
   useEffect(() => {
     setViewmodel(current => {
       const nextviewmodel = likec4model.findView(viewId)
       if (!nextviewmodel) {
-        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current.id}`, {
+        console.error(`View "${viewId}" not found in likec4model, current viewmodel: ${current?.id}`, {
           currentViewModel: current,
           likec4model,
         })
         return current
       }
+      if (!nextviewmodel.isDiagram()) {
+        console.warn(`View "${viewId}" is not diagram.\nMake sure you have LikeC4ModelProvider with layouted model.`)
+      }
       return nextviewmodel
     })
   }, [likec4model, viewId])
 
-  if (!viewmodel.isDiagram()) {
-    console.warn(`View "${viewId}" is not diagram.\nMake sure you have LikeC4ModelProvider with layouted model.`)
-  }
   return (
     <CurrentViewModelContext.Provider value={viewmodel}>
       {children}
     </CurrentViewModelContext.Provider>
   )
 }
+
+function useActorEventHandlers(
+  actorRef: DiagramActorRef,
+) {
+  const {
+    onChange,
+    onNavigateTo,
+    onOpenSource,
+  } = useDiagramEventHandlers()
+
+  useEffect(() => {
+    if (!onChange) return
+    const subscription = actorRef.on('viewChange', ({ change }) => onChange({ change }))
+    return () => subscription.unsubscribe()
+  }, [actorRef, onChange])
+
+  useEffect(() => {
+    if (!onNavigateTo) return
+    let frame: number
+
+    const subscription = actorRef.on('navigateTo', ({ viewId }) => {
+      cancelAnimationFrame(frame)
+      // Slightly defer callback for better responsiveness
+      frame = requestAnimationFrame(() => {
+        onNavigateTo(viewId)
+      })
+    })
+    return () => {
+      cancelAnimationFrame(frame)
+      subscription.unsubscribe()
+    }
+  }, [actorRef, onNavigateTo])
+
+  useEffect(() => {
+    if (!onOpenSource) return
+    const subscription = actorRef.on('openSource', ({ params }) => onOpenSource(params))
+    return () => subscription.unsubscribe()
+  }, [actorRef, onOpenSource])
+}

package/src/state/diagram-machine.ts

@@ -35,6 +35,7 @@ import {
   assertEvent,
   assign,
   cancel,
+  emit,
   enqueueActions,
   or,
   raise,
@@ -179,6 +180,11 @@ export type Events =
   | { type: 'tag.unhighlight' }
   | { type: 'toggle.feature'; feature: FeatureName; forceValue?: boolean }
 
+export type EmittedEvents =
+  | { type: 'navigateTo'; viewId: ViewId }
+  | { type: 'viewChange'; change: ViewChange }
+  | { type: 'openSource'; params: OpenSourceParams }
+
 export type ActionArg = { context: Context; event: Events }
 
 // TODO: naming convention for actors
@@ -193,6 +199,7 @@ const _diagramMachine = setup({
       search: 'searchActorLogic'
     },
     events: {} as Events,
+    emitted: {} as EmittedEvents,
   },
   actors: {
     syncManualLayoutActorLogic,
@@ -241,14 +248,20 @@ const _diagramMachine = setup({
     },
   },
   actions: {
-    'trigger:NavigateTo': (_, _params: { viewId: ViewId }) => {
-      // navigate to view
-    },
-    'trigger:OnChange': (_, _params: { change: ViewChange }) => {
-      // apply change
-    },
-    'trigger:OpenSource': (_, _params: OpenSourceParams) => {
-    },
+    'trigger:NavigateTo': emit(({ context }) => ({
+      type: 'navigateTo',
+      viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
+    })),
+
+    'trigger:OnChange': emit((_, _params: { change: ViewChange }) => ({
+      type: 'viewChange',
+      change: _params.change,
+    })),
+
+    'trigger:OpenSource': emit((_, _params: OpenSourceParams) => ({
+      type: 'openSource',
+      params: _params,
+    })),
 
     'assign lastClickedNode': assign(({ context, event }) => {
       assertEvent(event, 'xyflow.nodeClick')
@@ -1023,14 +1036,7 @@ const _diagramMachine = setup({
         'closeAllOverlays',
         'closeSearch',
         'stopSyncLayout',
-        enqueueActions(({ enqueue, context }) => {
-          enqueue({
-            type: 'trigger:NavigateTo',
-            params: {
-              viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
-            },
-          })
-        }),
+        'trigger:NavigateTo',
       ],
       on: {
         'update.view': {

package/dist/LikeC4CustomColors.d.ts

@@ -1,2 +0,0 @@
-import { MemoExoticComponent } from 'react';
-export declare const LikeC4CustomColors: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/LikeC4CustomColors.js

@@ -1,45 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import '@likec4/core';
-import { useMantineStyleNonce } from '@mantine/core';
-import { memo, useState } from 'react';
-import { isEmpty, entries } from 'remeda';
-import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
-import { useUpdateEffect } from './hooks/useUpdateEffect.js';
-
-function toStyle(name, colors) {
-  const darken = (color) => `color-mix(in srgb, ${color} 80%, black)`;
-  return `
-:where([data-likec4-color=${name}]) {
-  --colors-likec4-palette-hi-contrast: ${colors.elements.hiContrast};
-  --colors-likec4-palette-lo-contrast: ${colors.elements.loContrast};
-  --colors-likec4-palette-fill: ${colors.elements.fill};
-  --colors-likec4-palette-stroke: ${colors.elements.stroke};
-  --colors-likec4-relation-stroke: ${colors.relationships.lineColor};
-  --colors-likec4-relation-stroke-selected: color-mix(in srgb, ${colors.relationships.lineColor}, var(--colors-likec4-mix-color) 20%);
-  --colors-likec4-relation-label: ${colors.relationships.labelColor};
-  --colors-likec4-relation-label-bg: ${colors.relationships.labelBgColor};
-}
-:where(.likec4-compound-node[data-likec4-color=${name}]) {
-  --colors-likec4-palette-fill: ${darken(colors.elements.fill)};
-  --colors-likec4-palette-stroke: ${darken(colors.elements.stroke)};
-}
-  `;
-}
-function generateCustomColorStyles(customColors) {
-  return entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n").trim();
-}
-const LikeC4CustomColors = memo(() => {
-  const customColors = useLikeC4Specification().customColors ?? {};
-  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors));
-  useUpdateEffect(() => {
-    setStyles(generateCustomColorStyles(customColors));
-  }, [customColors]);
-  const nonce = useMantineStyleNonce()?.();
-  if (isEmpty(customColors)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
-});
-LikeC4CustomColors.displayName = "LikeC4CustomColors";
-
-export { LikeC4CustomColors };

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -1,45 +0,0 @@
-import { NodeProps } from '../../../base';
-import { RelationshipsBrowserTypes } from '../_types';
-import { MemoExoticComponent } from 'react';
-import { Dimmed } from '../../../base/types.Base';
-import { ElementStyle, Color, Any, ViewId, Fqn, RichTextOrEmpty, IconUrl } from '@likec4/core';
-import { Tags } from '@likec4/core/types/_aux';
-export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
-    hovered?: boolean;
-    dimmed?: Dimmed;
-    width: number;
-    height: number;
-    style: ElementStyle;
-    color: Color;
-    title: string;
-    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-    tags: Tags<Any>;
-    technology: string | null | undefined;
-    navigateTo: ViewId<string> | null | undefined;
-    column: RelationshipsBrowserTypes.Column;
-    fqn: Fqn;
-    icon: string | null;
-    ports: RelationshipsBrowserTypes.Ports;
-    existsInCurrentView: boolean;
-    description: RichTextOrEmpty;
-}, string>) => import("react/jsx-runtime").JSX.Element>;
-export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<{
-    hovered?: boolean;
-    dimmed?: Dimmed;
-    style: ElementStyle;
-    color: Color;
-    title: string;
-    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-    column: RelationshipsBrowserTypes.Column;
-    fqn: Fqn;
-    depth: number;
-    icon: IconUrl;
-    ports: RelationshipsBrowserTypes.Ports;
-    existsInCurrentView: boolean;
-}, string>) => import("react/jsx-runtime").JSX.Element>;
-export declare const EmptyNode: MemoExoticComponent<(props: NodeProps<RelationshipsBrowserTypes.EmptyNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
-type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
-type CompoundPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/LikeC4CustomColors.tsx

@@ -1,85 +0,0 @@
-import {
-  type CustomColorDefinitions,
-  type ElementThemeColorValues,
-  type RelationshipThemeColorValues,
-  type ThemeColorValues,
-  nonexhaustive,
-} from '@likec4/core'
-import { useMantineStyleNonce } from '@mantine/core'
-import { memo, useState } from 'react'
-import { entries, isEmpty } from 'remeda'
-import { useUpdateEffect } from './hooks'
-import { useLikeC4Specification } from './likec4model/useLikeC4Model'
-
-interface LikeC4CustomColorsProperties {
-  customColors: CustomColorDefinitions
-}
-function keyToCssVar(key: keyof RelationshipThemeColorValues | keyof ElementThemeColorValues): string {
-  switch (key) {
-    case 'lineColor':
-      return 'line'
-    case 'labelBgColor':
-      return 'label-bg'
-    case 'labelColor':
-      return 'label'
-    case 'fill':
-      return 'fill'
-    case 'stroke':
-      return 'stroke'
-    case 'hiContrast':
-      return 'hi-contrast'
-    case 'loContrast':
-      return 'lo-contrast'
-    default:
-      nonexhaustive(key)
-  }
-}
-
-function toStyle(name: String, colors: ThemeColorValues): String {
-  const darken = (color: string) => `color-mix(in srgb, ${color} 80%, black)`
-  return `
-:where([data-likec4-color=${name}]) {
-  --colors-likec4-palette-hi-contrast: ${colors.elements.hiContrast};
-  --colors-likec4-palette-lo-contrast: ${colors.elements.loContrast};
-  --colors-likec4-palette-fill: ${colors.elements.fill};
-  --colors-likec4-palette-stroke: ${colors.elements.stroke};
-  --colors-likec4-relation-stroke: ${colors.relationships.lineColor};
-  --colors-likec4-relation-stroke-selected: color-mix(in srgb, ${colors.relationships.lineColor}, var(--colors-likec4-mix-color) 20%);
-  --colors-likec4-relation-label: ${colors.relationships.labelColor};
-  --colors-likec4-relation-label-bg: ${colors.relationships.labelBgColor};
-}
-:where(.likec4-compound-node[data-likec4-color=${name}]) {
-  --colors-likec4-palette-fill: ${darken(colors.elements.fill)};
-  --colors-likec4-palette-stroke: ${darken(colors.elements.stroke)};
-}
-  `
-}
-
-function generateCustomColorStyles(customColors: CustomColorDefinitions) {
-  return entries(customColors)
-    .map(([name, color]) => toStyle(name, color))
-    .join('\n')
-    .trim()
-}
-
-export const LikeC4CustomColors = memo(() => {
-  const customColors = useLikeC4Specification().customColors ?? {}
-  const [styles, setStyles] = useState(() => generateCustomColorStyles(customColors))
-
-  useUpdateEffect(() => {
-    setStyles(generateCustomColorStyles(customColors))
-  }, [customColors])
-
-  const nonce = useMantineStyleNonce()?.()
-
-  if (isEmpty(customColors)) {
-    return null
-  }
-
-  return (
-    <>
-      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} nonce={nonce} />
-    </>
-  )
-})
-LikeC4CustomColors.displayName = 'LikeC4CustomColors'