@likec4/diagram 1.17.0 → 1.18.0

package/src/xyflow/nodes/shared/Toolbar.tsx

@@ -1,6 +1,7 @@
 import {
   type BorderStyle,
   defaultTheme,
+  DiagramNode,
   type Element,
   ElementShapes,
   type Fqn,
@@ -40,6 +41,7 @@ import { IconCheck, IconFileSymlink, IconSelector, IconTransform } from '@tabler
 import { NodeToolbar, type NodeToolbarProps } from '@xyflow/react'
 import clsx from 'clsx'
 import { useEffect, useState } from 'react'
+import type { MergeExclusive } from 'type-fest'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useUpdateEffect } from '../../../hooks'
 import { stopPropagation } from '../../utils'
 
@@ -75,7 +77,7 @@ const Tooltip = MantineTooltip.withProps({
 })
 
 type ToolbarProps = NodeToolbarProps & {
-  element: Element
+  element: DiagramNode
   onColorPreview: (color: ThemeColor | null) => void
 }
 
@@ -86,13 +88,15 @@ export function CompoundToolbar({
   onColorPreview,
   ...props
 }: ToolbarProps) {
+  const modelRef = DiagramNode.modelRef(element)
+  const deploymentRef = DiagramNode.deploymentRef(element)
   const targets = [element.id] as NonEmptyArray<Fqn>
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
     enableRelationshipBrowser
   } = useDiagramState(s => ({
-    hasGoToSource: !!s.onOpenSourceElement,
+    hasGoToSource: !!s.onOpenSource,
     enableRelationshipBrowser: s.enableRelationshipBrowser
   }))
 
@@ -117,7 +121,8 @@ export function CompoundToolbar({
         elementBorderStyle={element.style?.border}
         onChange={onChange}
       />
-      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+      {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
+      {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
       {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
     </Toolbar>
   )
@@ -156,13 +161,15 @@ export function ElementToolbar({
   onColorPreview,
   ...props
 }: ToolbarProps) {
+  const modelRef = DiagramNode.modelRef(element)
+  const deploymentRef = DiagramNode.deploymentRef(element)
   const targets = [element.id] as NonEmptyArray<Fqn>
   const diagramApi = useDiagramStoreApi()
   const {
     hasGoToSource,
     enableRelationshipBrowser
   } = useDiagramState(s => ({
-    hasGoToSource: !!s.onOpenSourceElement,
+    hasGoToSource: !!s.onOpenSource,
     enableRelationshipBrowser: s.enableRelationshipBrowser
   }))
   const portalProps = useMantinePortalProps()
@@ -234,20 +241,21 @@ export function ElementToolbar({
         onChange={onChange}
         position="right-end"
       />
-      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+      {hasGoToSource && modelRef && <GoToSourceButton elementId={modelRef} />}
+      {hasGoToSource && !modelRef && deploymentRef && <GoToSourceButton deploymentId={deploymentRef} />}
       {enableRelationshipBrowser && <BrowseRelationshipsButton elementId={element.id} />}
     </Toolbar>
   )
 }
 
 type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
-  element: Element
+  element: DiagramNode
   isOpacityEditable?: boolean
   onColorPreview: (color: ThemeColor | null) => void
   onChange: OnStyleChange
 }
 
-function GoToSourceButton({ elementId }: { elementId: Fqn }) {
+function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: Fqn }>) {
   const diagramApi = useDiagramStoreApi()
   const portalProps = useMantinePortalProps()
   return (
@@ -258,7 +266,15 @@ function GoToSourceButton({ elementId }: { elementId: Fqn }) {
         color="gray"
         onClick={e => {
           e.stopPropagation()
-          diagramApi.getState().onOpenSourceElement?.(elementId)
+          if (props.elementId) {
+            diagramApi.getState().onOpenSource?.({
+              element: props.elementId
+            })
+          } else if (props.deploymentId) {
+            diagramApi.getState().onOpenSource?.({
+              deployment: props.deploymentId
+            })
+          }
         }}>
         <IconFileSymlink stroke={1.8} style={{ width: '70%' }} />
       </ActionIcon>

package/src/xyflow/useLayoutConstraints.ts

@@ -1,4 +1,4 @@
-import { invariant, isAncestor, type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
+import { type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
 import type { InternalNode, NodeChange, ReactFlowProps, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { useMemo, useRef } from 'react'

package/src/xyflow/useXYFlowEvents.ts

@@ -1,3 +1,4 @@
+import { DiagramNode } from '@likec4/core'
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import { isNonNullish, isTruthy } from 'remeda'
@@ -123,9 +124,11 @@ export function useXYFlowEvents() {
           nodesSelectable,
           enableElementDetails,
           setLastClickedNode,
-          onOpenSourceElement,
+          onOpenSource,
           openOverlay
         } = diagramApi.getState()
+        const modelRef = DiagramNode.modelRef(xynode.data.element)
+        const deploymentRef = DiagramNode.deploymentRef(xynode.data.element)
         setLastClickedNode(xynode.id)
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
@@ -134,8 +137,16 @@ export function useXYFlowEvents() {
 
         let stopPropagation = false
 
-        if (clickedRecently && !!onOpenSourceElement) {
-          onOpenSourceElement(xynode.data.element.id)
+        if (clickedRecently && !!onOpenSource && (modelRef || deploymentRef)) {
+          if (modelRef) {
+            onOpenSource({
+              element: modelRef
+            })
+          } else if (deploymentRef) {
+            onOpenSource({
+              deployment: deploymentRef
+            })
+          }
           stopPropagation = true
         }
 
@@ -152,7 +163,7 @@ export function useXYFlowEvents() {
               stopPropagation = true
               break
             }
-            case !clickedRecently && focusedNodeId === xynode.id && enableElementDetails: {
+            case !clickedRecently && modelRef && focusedNodeId === xynode.id && enableElementDetails: {
               openOverlay({
                 elementDetails: xynode.data.element.id
               })
@@ -160,7 +171,9 @@ export function useXYFlowEvents() {
               break
             }
           }
-        } else if (enableElementDetails && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick) {
+        } else if (
+          enableElementDetails && modelRef && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick
+        ) {
           openOverlay({
             elementDetails: xynode.data.element.id
           })

package/src/ui/OptionsPanel.css.ts

@@ -1,9 +0,0 @@
-import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars } from '../theme-vars'
-
-export const panel = style({
-  top: fallbackVar(vars.optionsPanel.top, '1rem'),
-  right: fallbackVar(vars.optionsPanel.right, '1rem'),
-  margin: 0,
-  boxShadow: mantine.shadows.xl
-})

package/src/ui/OptionsPanel.tsx

@@ -1,70 +0,0 @@
-import { Card } from '@mantine/core'
-import { useOnSelectionChange } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual as eq } from 'fast-equals'
-import { AnimatePresence, m } from 'framer-motion'
-import { useState } from 'react'
-import { useDiagramState } from '../hooks/useDiagramState'
-import { NodeOptions } from './options/NodeOptions'
-import * as styles from './OptionsPanel.css'
-
-/**
- * @deprecated
- */
-export function OptionsPanel() {
-  const { isFocused, viewId } = useDiagramState(s => ({
-    viewId: s.view.id,
-    isFocused: s.focusedNodeId !== null || s.activeWalkthrough !== null
-  }))
-  const [selected, setSelected] = useState<{
-    nodes: string[]
-    edges: string[]
-  }>({
-    nodes: [],
-    edges: []
-  })
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      const newSelected = {
-        nodes: nodes.map(n => n.id).sort(),
-        edges: edges.map(e => e.id).sort()
-      }
-      if (!eq(selected, newSelected)) {
-        setSelected(newSelected)
-      }
-    }
-  })
-  const { nodes } = selected
-  // const hasAnySelection = !isFocused && (nodes.length > 0 || edges.length > 0)
-  const hasAnySelection = !isFocused && nodes.length > 0
-  return (
-    <AnimatePresence mode="wait">
-      {hasAnySelection && (
-        <m.div
-          key={viewId}
-          initial={{ opacity: 0, scale: 0.85 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{
-            opacity: 0,
-            scale: 0.85
-          }}
-          transition={{ duration: 0.14 }}
-          className={clsx('react-flow__panel', styles.panel)}
-          style={{
-            transformOrigin: 'center right',
-            maxWidth: '320px'
-          }}
-        >
-          <Card shadow="md">
-            {nodes.length > 0 && <NodeOptions selectedNodeIds={nodes} />}
-            {
-              /* nodes.length === 0 && edges.length > 0 && (
-              <EdgeOptions selectedEdgeIds={edges} />
-            ) */
-            }
-          </Card>
-        </m.div>
-      )}
-    </AnimatePresence>
-  )
-}

package/src/ui/options/EdgeOptions.tsx

@@ -1,142 +0,0 @@
-import { DefaultRelationshipColor, defaultTheme, type NonEmptyArray, type ThemeColor } from '@likec4/core'
-import { CheckIcon, ColorSwatch, Divider, Flex, rem, Stack, Text, Tooltip, TooltipGroup } from '@mantine/core'
-import { shallowEqual } from 'fast-equals'
-import { memo } from 'react'
-import { hasAtLeast, keys, takeWhile } from 'remeda'
-import { useDiagramStoreApi, useXYEdgesData } from '../../hooks'
-import { type XYFlowEdge } from '../../xyflow/types'
-
-const {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements
-
-export const themedColors = [
-  { key: 'primary', value: primary.fill },
-  { key: 'secondary', value: secondary.fill },
-  { key: 'muted', value: muted.fill }
-] satisfies Array<{ key: ThemeColor; value: string }>
-
-export const colors = keys(otherColors).map(key => ({
-  key,
-  value: defaultTheme.elements[key].fill
-}))
-
-export type ThemeColorKey = typeof themedColors[0]['key']
-export type ColorKey = typeof colors[0]['key']
-
-type XYEdgeData = Pick<XYFlowEdge, 'id' | 'data'>
-
-export const EdgeOptions = memo<{ selectedEdgeIds: string[] }>(({ selectedEdgeIds }) => {
-  const diagramApi = useDiagramStoreApi()
-  const edges = useXYEdgesData(selectedEdgeIds)
-  if (!hasAtLeast(edges, 1)) {
-    return null
-  }
-  if (edges.length !== selectedEdgeIds.length) {
-    throw new Error('EdgeOptions: edges and props.edges should have the same length')
-  }
-  const [firstEdge, ...rest] = edges
-
-  return (
-    <Stack gap={'xs'}>
-      <div>
-        <Text fz={rem(9)} fw={'500'} c={'dimmed'}>
-          RELATIONSHIP{rest.length > 0 ? 'S' : ''}
-        </Text>
-        <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
-          {rest.length === 0 ? firstEdge.data.edge.label : `[ multiple ]`}
-        </Text>
-      </div>
-      {
-        /* {showShapeOption && (
-        <ShapeOption
-          nodes={edges}
-          onShapeChange={(shape: ElementShape) => {
-            triggerChange({ shape })
-          }} />
-      )} */
-      }
-      <Colors
-        edges={edges}
-        onColorChange={(_color: ColorKey | ThemeColorKey) => {
-          // triggerChange({ color })
-        }} />
-    </Stack>
-  )
-}, (prevProps, nextProps) => shallowEqual(prevProps.selectedEdgeIds, nextProps.selectedEdgeIds))
-
-function Colors({
-  edges: [firstEdge, ...edges],
-  onColorChange
-}: {
-  edges: NonEmptyArray<XYEdgeData>
-  onColorChange: (color: ColorKey | ThemeColorKey) => void
-}) {
-  let selectedColor = (firstEdge.data.edge.color ?? DefaultRelationshipColor) as ThemeColor | null
-  takeWhile(edges, edge => {
-    const color = edge.data.edge.color ?? DefaultRelationshipColor
-    if (color !== selectedColor) {
-      selectedColor = null
-      return false
-    }
-    return true
-  })
-  const changeColor = (color: ColorKey | ThemeColorKey) => () => {
-    if (selectedColor === color) {
-      return
-    }
-    onColorChange(color)
-  }
-  return (
-    <div>
-      <TooltipGroup openDelay={400} closeDelay={300}>
-        <Divider label="color" labelPosition="left" />
-        <Flex mt={'xs'} maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
-          {themedColors.map(({ key, value }) => (
-            <Tooltip
-              key={key}
-              label={key}
-              fz={'xs'}
-              color="dark"
-              offset={2}
-              transitionProps={{ duration: 140, transition: 'slide-up' }}>
-              <ColorSwatch
-                color={value}
-                size={20}
-                withShadow
-                onClick={changeColor(key)}
-                style={{ color: '#fff', cursor: 'pointer' }}
-              >
-                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
-              </ColorSwatch>
-            </Tooltip>
-          ))}
-        </Flex>
-
-        <Flex mt="sm" maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
-          {colors.map(({ key, value }) => (
-            <Tooltip
-              key={key}
-              label={key}
-              fz={'xs'}
-              color="dark"
-              offset={2}
-              transitionProps={{ duration: 140, transition: 'slide-up' }}>
-              <ColorSwatch
-                color={value}
-                size={20}
-                onClick={changeColor(key)}
-                style={{ color: '#fff', cursor: 'pointer' }}
-              >
-                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
-              </ColorSwatch>
-            </Tooltip>
-          ))}
-        </Flex>
-      </TooltipGroup>
-    </div>
-  )
-}