@likec4/diagram 1.41.0 → 1.42.1

package/src/state/hotkeyActor.ts

@@ -1,41 +0,0 @@
-import { getHotkeyHandler } from '@mantine/hooks'
-import type { KeyboardEvent } from 'react'
-import { type AnyEventObject, type CallbackActorLogic, type NonReducibleUnknown, fromCallback } from 'xstate'
-
-export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
-
-export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {}
-
-export const hotkeyActorLogic: HotkeyActorLogic = fromCallback(({ sendBack }: {
-  sendBack: (event: HotKeyEvent) => void
-}) => {
-  const escHandler = getHotkeyHandler([
-    ['Escape', (event: KeyboardEvent) => {
-      event.stopPropagation()
-      sendBack({ type: 'key.esc' })
-    }, {
-      preventDefault: true,
-    }],
-  ])
-
-  const arrowshandler = getHotkeyHandler([
-    ['ArrowLeft', (event: KeyboardEvent) => {
-      event.stopPropagation()
-      sendBack({ type: 'key.arrow.left' })
-    }, {
-      preventDefault: true,
-    }],
-    ['ArrowRight', (event: KeyboardEvent) => {
-      event.stopPropagation()
-      sendBack({ type: 'key.arrow.right' })
-    }, {
-      preventDefault: true,
-    }],
-  ])
-  document.body.addEventListener('keydown', escHandler)
-  document.body.addEventListener('keydown', arrowshandler, { capture: true })
-  return () => {
-    document.body.removeEventListener('keydown', escHandler)
-    document.body.removeEventListener('keydown', arrowshandler, { capture: true })
-  }
-})

package/src/state/inspector.ts

@@ -1,5 +0,0 @@
-import { createBrowserInspector } from '@statelyai/inspect'
-
-export const inspector = {
-  inspect: import.meta.env.DEV ? createBrowserInspector().inspect : () => {},
-}

package/src/state/persistence.ts

@@ -1,22 +0,0 @@
-import { isBoolean, pickBy } from 'remeda'
-import type { EnabledFeatures } from '../context/DiagramFeatures'
-
-const key = `likec4:diagram:toggledFeatures`
-export const DiagramToggledFeaturesPersistence = {
-  read() {
-    try {
-      let fromStorage = sessionStorage.getItem(key)
-      if (fromStorage) {
-        return JSON.parse(fromStorage) as Partial<EnabledFeatures>
-      }
-      return null
-    } catch (e) {
-      console.error(`Error reading fromStorage ${key}:`, e)
-      return null
-    }
-  },
-  write<F extends Partial<EnabledFeatures>>(toggledFeatures: F): F {
-    sessionStorage.setItem(key, JSON.stringify(pickBy(toggledFeatures, isBoolean)))
-    return toggledFeatures
-  },
-}

package/src/state/syncManualLayoutActor.ts

@@ -1,218 +0,0 @@
-import type { ViewChange, ViewId } from '@likec4/core/types'
-import { type Rect, boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
-import { hasAtLeast, reduce } from 'remeda'
-import {
-  type ActorLogicFrom,
-  type ActorRef,
-  type MachineSnapshot,
-  assign,
-  setup,
-} from 'xstate'
-import { bezierControlPoints, isSamePoint } from '../utils'
-import type { Context as DiagramContext, Events as DiagramEvents } from './diagram-machine'
-
-export type Input = {
-  /**
-   * Actually this is DiagramActorRef
-   * But we can't use it here due to circular type inference
-   */
-  parent: ActorRef<
-    MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>,
-    DiagramEvents,
-    any
-  >
-  viewId: ViewId
-}
-
-export type Context = Readonly<
-  Input & {}
->
-
-export type Events =
-  | { type: 'sync' }
-  | { type: 'synced' }
-  | { type: 'cancel' }
-  | { type: 'stop' }
-
-const _syncManualLayoutActorLogic = setup({
-  types: {
-    context: {} as Context,
-    input: {} as Input,
-    events: {} as Events,
-    tags: '' as 'pending' | 'ready',
-  },
-  delays: {
-    'timeout': 2_000,
-  },
-  actions: {
-    'trigger:OnChange': (_, _params: { change: ViewChange }) => {
-    },
-  },
-  guards: {
-    'same view': ({ context }) => context.parent.getSnapshot().context.view.id === context.viewId,
-  },
-}).createMachine({
-  initial: 'idle',
-  context: ({ input }) => ({
-    ...input,
-  }),
-  states: {
-    idle: {
-      tags: 'ready',
-      on: {
-        sync: {
-          target: 'pending',
-        },
-      },
-    },
-    paused: {
-      tags: 'pending',
-      on: {
-        sync: {
-          target: 'pending',
-        },
-      },
-    },
-    pending: {
-      tags: 'pending',
-      on: {
-        sync: {
-          target: 'pending',
-          reenter: true,
-        },
-        cancel: {
-          target: 'paused',
-        },
-      },
-      after: {
-        'timeout': [{
-          guard: 'same view',
-          actions: {
-            type: 'trigger:OnChange',
-            params: ({ context }) => {
-              const change = createViewChange(context.parent.getSnapshot().context)
-              return { change }
-            },
-          },
-          target: 'synced',
-        }, {
-          target: 'stopped',
-        }],
-      },
-    },
-    synced: {
-      tags: 'ready',
-      on: {
-        sync: {
-          target: 'pending',
-        },
-      },
-    },
-    'stopped': {
-      entry: assign({
-        parent: null as any,
-      }),
-      type: 'final',
-    },
-  },
-  on: {
-    synced: {
-      target: '.synced',
-    },
-    stop: {
-      target: '.stopped',
-    },
-  },
-})
-
-export interface SyncLayoutActorLogic extends ActorLogicFrom<typeof _syncManualLayoutActorLogic> {}
-
-export const syncManualLayoutActorLogic: SyncLayoutActorLogic = _syncManualLayoutActorLogic
-
-function createViewChange(parentContext: DiagramContext): ViewChange.SaveManualLayout {
-  const { view, xystore, xyflow } = parentContext
-
-  const { nodeLookup } = xystore.getState()
-  const movedNodes = new Set<string>()
-  let bounds: Rect | undefined
-
-  const nodes = reduce([...nodeLookup.values()], (acc, node) => {
-    const dimensions = getNodeDimensions(node)
-    if (
-      !isSamePoint(node.internals.positionAbsolute, node.data.position) || node.initialWidth !== dimensions.width ||
-      node.initialHeight !== dimensions.height
-    ) {
-      movedNodes.add(node.id)
-    }
-    const rect = acc[node.id] = {
-      isCompound: node.type !== 'element' && node.type !== 'deployment',
-      x: Math.floor(node.internals.positionAbsolute.x),
-      y: Math.floor(node.internals.positionAbsolute.y),
-      width: Math.ceil(dimensions.width),
-      height: Math.ceil(dimensions.height),
-    }
-    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect
-    return acc
-  }, {} as ViewChange.SaveManualLayout['layout']['nodes'])
-
-  const edges = reduce(xyflow?.getEdges() ?? [], (acc, { source, target, data }) => {
-    let controlPoints = data.controlPoints ?? []
-    const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target)
-    // If edge control points are not set, but the source or target node was moved
-    if (controlPoints.length === 0 && sourceOrTargetMoved) {
-      controlPoints = bezierControlPoints(data)
-    }
-    if (data.points.length === 0 && controlPoints.length === 0) {
-      return acc
-    }
-    const _updated: ViewChange.SaveManualLayout['layout']['edges'][string] = acc[data.id] = {
-      points: data.points,
-    }
-    if (data.labelXY && data.labelBBox) {
-      _updated.labelBBox = {
-        ...data.labelBBox,
-        ...data.labelXY,
-      }
-    }
-    if (data.labelBBox) {
-      _updated.labelBBox ??= data.labelBBox
-    }
-    if (hasAtLeast(controlPoints, 1)) {
-      _updated.controlPoints = controlPoints
-    }
-    // if (!sourceOrTargetMoved && data.edge.dotpos) {
-    //   _updated.dotpos = data.edge.dotpos
-    // }
-    const allX = [
-      ...data.points.map(p => p[0]),
-      ...controlPoints.map(p => p.x),
-      ...(_updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []),
-    ]
-    const allY = [
-      ...data.points.map(p => p[1]),
-      ...controlPoints.map(p => p.y),
-      ...(_updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []),
-    ]
-    const rect = boxToRect({
-      x: Math.floor(Math.min(...allX)),
-      y: Math.floor(Math.min(...allY)),
-      x2: Math.ceil(Math.max(...allX)),
-      y2: Math.ceil(Math.max(...allY)),
-    })
-    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect
-    return acc
-  }, {} as ViewChange.SaveManualLayout['layout']['edges'])
-
-  bounds ??= view.bounds
-
-  return {
-    op: 'save-manual-layout',
-    layout: {
-      hash: view.hash,
-      autoLayout: view.autoLayout,
-      nodes,
-      edges,
-      ...bounds,
-    },
-  }
-}

package/src/state/types.ts

@@ -1,34 +0,0 @@
-import type { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate'
-import type { OverlaysActorRef } from '../overlays/overlaysActor'
-import type { SearchActorRef } from '../search/searchActor'
-import type { DiagramMachineLogic } from './diagram-machine'
-import type { SyncLayoutActorLogic } from './syncManualLayoutActor'
-
-export type System = ActorSystem<{
-  actors: {
-    diagram: ActorRefFromLogic<DiagramMachineLogic>
-    overlays: OverlaysActorRef
-    search: SearchActorRef
-  }
-}>
-
-export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic> {
-  system: System
-}
-
-// export type DiagramActorRef = Omit<ActorRefFromLogic<DiagramMachineLogic>, 'system'> & {
-//   system: System
-// }
-export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>
-
-export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>
-
-export type {
-  Context as DiagramContext,
-  EmittedEvents as DiagramEmittedEvents,
-} from './diagram-machine'
-
-export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
-  system: System
-}
-export type SyncLayoutActorSnapshot = SnapshotFrom<SyncLayoutActorLogic>

package/src/state/utils.ts

@@ -1,152 +0,0 @@
-import { type DiagramEdge, type DiagramNode, type XYPoint, BBox } from '@likec4/core/types'
-import { nonNullable } from '@likec4/core/utils'
-import { getEdgePosition, getNodeDimensions, getNodesBounds } from '@xyflow/system'
-import type { ActorSystem } from 'xstate'
-import type { XYStoreState } from '../hooks'
-import type { Types } from '../likec4diagram/types'
-import type { OverlaysActorRef } from '../overlays/overlaysActor'
-import type { SearchActorRef } from '../search/searchActor'
-import type { Context } from './diagram-machine'
-import type { DiagramActorRef, System } from './types'
-
-export function typedSystem(system: ActorSystem<any>) {
-  return {
-    get overlaysActorRef(): OverlaysActorRef | null {
-      return (system as System).get('overlays') ?? null
-    },
-    get diagramActorRef(): DiagramActorRef | null {
-      return (system as System).get('diagram') ?? null
-    },
-    get searchActorRef(): SearchActorRef | null {
-      return (system as System).get('search') ?? null
-    },
-  }
-}
-
-export function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null {
-  return ctx.view.nodes.find(n => n.id === xynodeId) ?? null
-}
-
-export function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null {
-  return ctx.view.edges.find(e => e.id === xyedgeId) ?? null
-}
-
-export function focusedBounds(params: { context: Context }): { bounds: BBox; duration?: number } {
-  const knownAbsolutes = new Map<string, XYPoint>()
-
-  const b = params.context.xynodes.reduce((acc, node) => {
-    let position = node.position
-    if (node.parentId) {
-      const parent = knownAbsolutes.get(node.parentId) ?? { x: 0, y: 0 }
-      position = {
-        x: position.x + parent.x,
-        y: position.y + parent.y,
-      }
-    }
-    knownAbsolutes.set(node.id, position)
-
-    if (node.hidden || node.data.dimmed) {
-      return acc
-    }
-
-    const width = node.measured?.width ?? node.width ?? node.initialWidth
-    const height = node.measured?.height ?? node.height ?? node.initialHeight
-
-    acc.minX = Math.min(acc.minX, position.x)
-    acc.minY = Math.min(acc.minY, position.y)
-    acc.maxX = Math.max(acc.maxX, position.x + width)
-    acc.maxY = Math.max(acc.maxY, position.y + height)
-    return acc
-  }, {
-    minX: Infinity,
-    minY: Infinity,
-    maxX: -Infinity,
-    maxY: -Infinity,
-  })
-
-  if (b.minX === Infinity) {
-    return {
-      bounds: params.context.view.bounds,
-    }
-  }
-
-  return {
-    duration: 350,
-    bounds: {
-      x: b.minX - 10,
-      y: b.minY - 10,
-      width: b.maxX - b.minX + 20,
-      height: b.maxY - b.minY + 20,
-    },
-  }
-}
-
-const MARGIN = 32
-export function activeSequenceBounds(params: { context: Context }): { bounds: BBox; duration?: number } {
-  const activeWalkthrough = nonNullable(params.context.activeWalkthrough)
-
-  const stepEdge = nonNullable(params.context.xyedges.find(e => e.id === activeWalkthrough.stepId))
-  const xystate = params.context.xystore.getState()
-
-  const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source))
-  const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target))
-
-  const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate)
-
-  let stepBounds: BBox | undefined | null
-  if (activeWalkthrough.parallelPrefix) {
-    const parallelArea = params.context.xynodes.find(n =>
-      n.type === 'seq-parallel' && n.data.parallelPrefix === activeWalkthrough.parallelPrefix
-    )
-    if (parallelArea) {
-      stepBounds = {
-        x: parallelArea.position.x,
-        y: parallelArea.position.y,
-        ...getNodeDimensions(parallelArea),
-      }
-    }
-  }
-
-  stepBounds ??= getEdgeBounds(stepEdge, xystate)
-
-  if (stepBounds) {
-    stepBounds = BBox.merge(stepBounds, actorsBounds)
-  } else {
-    stepBounds = actorsBounds
-  }
-
-  return {
-    duration: 350,
-    bounds: BBox.expand(
-      stepBounds,
-      MARGIN,
-    ),
-  }
-}
-
-function getEdgeBounds(edge: Types.Edge, store: XYStoreState): BBox | null {
-  const sourceNode = store.nodeLookup.get(edge.source)
-  const targetNode = store.nodeLookup.get(edge.target)
-
-  if (!sourceNode || !targetNode) {
-    return null
-  }
-
-  const edgePosition = getEdgePosition({
-    id: edge.id,
-    sourceNode,
-    targetNode,
-    sourceHandle: edge.sourceHandle || null,
-    targetHandle: edge.targetHandle || null,
-    connectionMode: store.connectionMode,
-  })
-
-  if (!edgePosition) {
-    return null
-  }
-
-  return BBox.fromPoints([
-    [edgePosition.sourceX, edgePosition.sourceY],
-    [edgePosition.targetX, edgePosition.targetY],
-  ])
-}