@likec4/diagram 1.19.1 → 1.20.0

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -0,0 +1,297 @@
+import {
+  type DiagramEdge,
+  type DiagramView,
+  type EdgeId,
+  type Fqn,
+  type NodeId,
+  type WhereOperator,
+  DiagramNode,
+  ElementKind,
+  invariant,
+  nonNullable,
+  Queue,
+  whereOperatorAsPredicate,
+} from '@likec4/core'
+import { useDeepCompareMemo } from '@react-hookz/web'
+import { hasAtLeast, pick } from 'remeda'
+import { ZIndexes } from '../base/const'
+import type { Types } from './types'
+
+// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
+function viewToNodesEdge(opts: {
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>
+  where: WhereOperator<string, string> | undefined
+  nodesDraggable: boolean
+  nodesSelectable: boolean
+}): {
+  xynodes: Types.Node[]
+  xyedges: Types.Edge[]
+} {
+  const {
+    view,
+    nodesDraggable: draggable,
+    nodesSelectable: selectable,
+  } = opts
+  const isDynamicView = view.__ === 'dynamic',
+    xynodes = [] as Types.Node[],
+    xyedges = [] as Types.Edge[],
+    nodeLookup = new Map<Fqn, DiagramNode>()
+
+  type TraverseItem = {
+    node: DiagramNode
+    parent: DiagramNode | null
+  }
+  const queue = Queue.from(view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node)
+      if (!node.parent) {
+        acc.push({ node, parent: null })
+      }
+      return acc
+    },
+    [] as TraverseItem[],
+  ))
+
+  let visiblePredicate = (_nodeOrEdge: DiagramNode | DiagramEdge): boolean => true
+  if (opts.where) {
+    try {
+      const filterablePredicate = whereOperatorAsPredicate(opts.where)
+      visiblePredicate = i =>
+        filterablePredicate({
+          ...pick(i, ['tags', 'kind']),
+          ...('source' in i ? { source: nodeById(i.source) } : i),
+          ...('target' in i ? { target: nodeById(i.target) } : i),
+        })
+    } catch (e) {
+      console.error('Error in where filter:', e)
+    }
+  }
+  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
+
+  // namespace to force unique ids
+  const ns = ''
+  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
+
+  let next: TraverseItem | undefined
+  while ((next = queue.dequeue())) {
+    const { node, parent } = next
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
+    if (isCompound) {
+      for (const child of node.children) {
+        queue.enqueue({ node: nodeById(child), parent: node })
+      }
+    }
+
+    const position = {
+      x: node.position[0],
+      y: node.position[1],
+    }
+    if (parent) {
+      position.x -= parent.position[0]
+      position.y -= parent.position[1]
+    }
+
+    const id = ns + node.id as NodeId
+
+    const base = {
+      id,
+      draggable: draggable,
+      selectable: selectable && node.kind !== ElementKind.Group,
+      focusable: selectable && !isCompound,
+      deletable: false,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      style: {
+        width: node.width,
+        height: node.height,
+      },
+      initialWidth: node.width,
+      initialHeight: node.height,
+      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      ...(parent && {
+        parentId: ns + parent.id,
+      }),
+    } satisfies Omit<Types.Node, 'data' | 'type'>
+
+    const compoundData = {
+      id: node.id,
+      title: node.title,
+      color: node.color,
+      shape: node.shape,
+      style: node.style,
+      depth: node.depth ?? 0,
+      icon: node.icon ?? null,
+      position: node.position,
+    } satisfies Types.CompoundNodeData
+
+    const leafNodeData = {
+      id: node.id,
+      title: node.title,
+      technology: node.technology,
+      description: node.description,
+      height: node.height,
+      width: node.width,
+      level: node.level,
+      color: node.color,
+      shape: node.shape,
+      style: node.style,
+      icon: node.icon ?? null,
+      position: node.position,
+    } satisfies Types.LeafNodeData
+
+    if (node.kind === ElementKind.Group) {
+      xynodes.push({
+        ...base,
+        type: 'view-group',
+        data: {
+          isViewGroup: true,
+          ...compoundData,
+        },
+        dragHandle: '.likec4-compound-title',
+      })
+      continue
+    }
+
+    const modelFqn = DiagramNode.modelRef(node)
+    const deploymentFqn = DiagramNode.deploymentRef(node)
+    if (!modelFqn && !deploymentFqn) {
+      console.error('Invalid node', node)
+      throw new Error('Element should have either modelRef or deploymentRef')
+    }
+
+    const navigateTo = { navigateTo: node.navigateTo ?? null }
+
+    switch (true) {
+      case isCompound && !!deploymentFqn: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'compound-deployment',
+            data: {
+              ...compoundData,
+              ...navigateTo,
+              deploymentFqn: deploymentFqn,
+              modelFqn,
+            },
+          } satisfies Types.CompoundDeploymentNode,
+        )
+        break
+      }
+      case isCompound: {
+        invariant(!!modelFqn, 'ModelRef expected')
+        xynodes.push(
+          {
+            ...base,
+            type: 'compound-element',
+            data: {
+              ...compoundData,
+              ...navigateTo,
+              modelFqn,
+            },
+            dragHandle: '.likec4-compound-title',
+          } satisfies Types.CompoundElementNode,
+        )
+        break
+      }
+      case !!deploymentFqn: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'deployment',
+            data: {
+              ...leafNodeData,
+              ...navigateTo,
+              deploymentFqn: deploymentFqn,
+              modelFqn: modelFqn,
+            },
+          } satisfies Types.DeploymentElementNode,
+        )
+        break
+      }
+      default: {
+        invariant(!!modelFqn, 'ModelRef expected')
+        xynodes.push(
+          {
+            ...base,
+            type: 'element',
+            data: {
+              ...leafNodeData,
+              ...navigateTo,
+              modelFqn: modelFqn,
+            },
+          } satisfies Types.ElementNode,
+        )
+      }
+    }
+  }
+  for (const edge of view.edges) {
+    const source = edge.source
+    const target = edge.target
+    const id = ns + edge.id as EdgeId
+
+    if (!hasAtLeast(edge.points, 2)) {
+      console.error('edge should have at least 2 points', edge)
+      continue
+    }
+
+    xyedges.push({
+      id,
+      type: 'relationship',
+      source: ns + source,
+      target: ns + target,
+      zIndex: ZIndexes.Edge,
+      selectable: selectable,
+      hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        id: edge.id,
+        label: edge.label,
+        technology: edge.technology,
+        notes: edge.notes,
+        navigateTo: edge.navigateTo,
+        controlPoints: edge.controlPoints ?? null,
+        labelBBox: edge.labelBBox ?? null,
+        labelXY: edge.labelBBox ? { x: edge.labelBBox.x, y: edge.labelBBox.y } : null,
+        points: edge.points,
+        color: edge.color ?? 'gray',
+        line: edge.line ?? 'dashed',
+        dir: edge.dir ?? 'forward',
+        head: edge.head ?? 'normal',
+        tail: edge.tail ?? 'none',
+      },
+      interactionWidth: 20,
+    })
+  }
+
+  return {
+    xynodes,
+    xyedges,
+  }
+}
+
+export function useViewToNodesEdges({
+  view: {
+    id,
+    nodes,
+    edges,
+    __ = 'element',
+  },
+  ...opts
+}: {
+  view: DiagramView
+  where: WhereOperator<string, string> | undefined
+  nodesDraggable: boolean
+  nodesSelectable: boolean
+}) {
+  return useDeepCompareMemo(() => {
+    return viewToNodesEdge({
+      view: {
+        id,
+        nodes,
+        edges,
+        __,
+      },
+      ...opts,
+    })
+  }, [id, __, nodes, edges, opts])
+}

package/src/likec4model/index.ts

@@ -2,11 +2,5 @@ export {
   useLikeC4ElementsTree,
 } from './useLikeC4ElementsTree'
 export {
-  useLikeC4CurrentViewModel,
-  useLikeC4DiagramView,
-  useLikeC4ElementModel,
   useLikeC4Model,
-  useLikeC4View,
-  useLikeC4ViewModel,
-  useLikeC4Views,
 } from './useLikeC4Model'

package/src/likec4model/useLikeC4Model.ts

@@ -1,8 +1,6 @@
-import { type ComputedView, type DiagramView, type Fqn, LikeC4Model, type ViewId } from '@likec4/core'
+import { LikeC4Model } from '@likec4/core'
 import { useContext } from 'react'
 import { isDefined, isNonNullish, isString } from 'remeda'
-import type { LiteralUnion } from 'type-fest'
-import { useCurrentViewId } from '../hooks'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
 
 export function useLikeC4Model(): LikeC4Model | null
@@ -26,43 +24,3 @@ export function useLikeC4Model(strict?: boolean, type?: 'layouted' | 'computed')
   }
   return model
 }
-
-export function useLikeC4Views(): Record<ViewId, ComputedView | DiagramView> {
-  return useLikeC4Model(true).$model.views
-}
-
-export function useLikeC4ViewModel(viewId: LiteralUnion<ViewId, string>): LikeC4Model.View {
-  return useLikeC4Model(true).view(viewId)
-}
-
-export function useLikeC4CurrentViewModel(): LikeC4Model.View {
-  const viewId = useCurrentViewId()
-  return useLikeC4Model(true).view(viewId)
-}
-
-/**
- * Parsed view, computed or layouted
- */
-export function useLikeC4View(viewId: LiteralUnion<ViewId, string>): ComputedView | DiagramView | null {
-  const model = useLikeC4Model(true)
-  try {
-    return model.view(viewId).$view
-  } catch (error) {
-    console.warn(error)
-    return null
-  }
-}
-
-export function useLikeC4DiagramView(viewId: LiteralUnion<ViewId, string>): DiagramView | null {
-  const model = useLikeC4Model(true, 'layouted')
-  try {
-    return model.view(viewId).$view
-  } catch (error) {
-    console.warn(error)
-    return null
-  }
-}
-
-export function useLikeC4ElementModel(fqn: LiteralUnion<Fqn, string>): LikeC4Model.Element {
-  return useLikeC4Model(true).element(fqn)
-}