@likec4/diagram 1.16.0 → 1.17.0

package/src/ui/notation/NotationPanel.tsx

@@ -22,6 +22,7 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { useState } from 'react'
 import { ceil, isNonNullish, isNullish } from 'remeda'
+import { useXYStore } from '../../hooks'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
 import { vars } from '../../theme-vars'
@@ -120,16 +121,15 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
 const selector = (s: DiagramState) => ({
   id: s.view.id,
   notations: s.view.notation?.elements ?? [],
-  height: s.xystore.getState().height,
   isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough)
 })
 
 export function NotationPanel() {
+  const height = useXYStore(s => s.height)
   const {
     id,
     notations,
-    isVisible,
-    height
+    isVisible
   } = useDiagramState(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'notation-webview-collapsed',

package/src/xyflow/XYFlow.tsx

@@ -10,7 +10,7 @@ import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
 import { XYFlowEdge, XYFlowNode } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
-import { useXYFlowEvents } from './XYFlowEvents'
+import { useXYFlowEvents } from './useXYFlowEvents'
 
 const nodeTypes = {
   element: ElementNode,
@@ -87,7 +87,12 @@ export function XYFlow({
   } = useDiagramState(selector, shallowEqual)
   // const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
   const layoutConstraints = useLayoutConstraints()
-  const handlers = useXYFlowEvents()
+  const {
+    onNodeContextMenu,
+    onPaneContextMenu,
+    onEdgeContextMenu,
+    ...handlers
+  } = useXYFlowEvents()
 
   /**
    * WORKAROUND - Called on viewport change
@@ -118,6 +123,9 @@ export function XYFlow({
       {...colorMode && { colorMode }}
       nodes={nodes}
       edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onInit={onInit}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       zoomOnPinch={zoomable}
@@ -130,12 +138,12 @@ export function XYFlow({
       minZoom={zoomable ? MinZoom : 1}
       // Fitview is handled by store in onInit
       fitView={false}
-      fitViewOptions={useMemo(() => ({
+      fitViewOptions={{
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
         includeHiddenNodes: true
-      }), [fitViewPadding])}
+      }}
       {...(!fitView && {
         viewport: {
           x: translateX,
@@ -156,41 +164,16 @@ export function XYFlow({
       nodesFocusable={nodesDraggable || nodesSelectable}
       edgesFocusable={false}
       nodesDraggable={nodesDraggable}
-      {...nodesDraggable && {
-        onNodeDragStart: layoutConstraints.onNodeDragStart,
-        onNodeDrag: layoutConstraints.onNodeDrag,
-        onNodeDragStop: layoutConstraints.onNodeDragStop
-      }}
+      {...nodesDraggable && layoutConstraints}
       nodeDragThreshold={4}
       elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onDoubleClick={handlers.onDoubleClick}
-      onPaneClick={handlers.onPaneClick}
-      onMoveEnd={handlers.onMoveEnd}
-      onNodeMouseEnter={handlers.onNodeMouseEnter}
-      onNodeMouseLeave={handlers.onNodeMouseLeave}
-      onEdgeMouseEnter={handlers.onEdgeMouseEnter}
-      onEdgeMouseLeave={handlers.onEdgeMouseLeave}
-      onNodeClick={handlers.onNodeClick}
-      onNodeDoubleClick={handlers.onNodeDoubleClick}
-      onEdgeClick={handlers.onEdgeClick}
-      onEdgeDoubleClick={handlers.onEdgeDoubleClick}
-      onInit={onInit}
-      {...(hasOnNodeContextMenu && {
-        onNodeContextMenu: handlers.onNodeContextMenu
-      })}
-      {...(hasOnEdgeContextMenu && {
-        onEdgeContextMenu: handlers.onEdgeContextMenu
-      })}
-      {...(hasOnCanvasContextMenu && {
-        onPaneContextMenu: handlers.onPaneContextMenu
-      })}>
+      {...hasOnNodeContextMenu && { onNodeContextMenu }}
+      {...hasOnCanvasContextMenu && { onPaneContextMenu }}
+      {...hasOnEdgeContextMenu && { onEdgeContextMenu }}
+      {...handlers}
+    >
       {children}
     </ReactFlow>
   )
 }
-XYFlow.displayName = 'XYFlow'
-
-// export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper

package/src/xyflow/XYFlowInner.tsx

@@ -1,4 +1,4 @@
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { memo } from 'react'
 import { isNonNullish } from 'remeda'
 import { useDiagramState } from '../hooks/useDiagramState'
@@ -44,5 +44,5 @@ export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
       {showNotations && <NotationPanel />}
     </>
   )
-}, shallowEqual)
+}, deepEqual)
 XYFlowInner.displayName = 'XYFlowInner'

package/src/xyflow/edges/EdgeLabel.tsx

@@ -41,11 +41,11 @@ export const EdgeLabel = ({
 }: EdgeLabelProps) => {
   const likec4model = useLikeC4Model()
   const {
-    showRelationshipDetails,
+    enableRelationshipDetails,
     isActiveWalkthroughStep,
     hasOnNavigateTo
   } = useDiagramState(s => ({
-    showRelationshipDetails: s.showRelationshipDetails,
+    enableRelationshipDetails: s.enableRelationshipDetails,
     isActiveWalkthroughStep: s.activeWalkthrough?.stepId === edge.id,
     hasOnNavigateTo: !!s.onNavigateTo
   }))
@@ -57,7 +57,7 @@ export const EdgeLabel = ({
     if (isTruthy(notes)) {
       return <NotePopover notes={notes}>{node}</NotePopover>
     }
-    if (showRelationshipDetails && likec4model && edge.relations.length > 0) {
+    if (enableRelationshipDetails && likec4model && edge.relations.length > 0) {
       return (
         <RelationshipsDropdownMenu
           disabled={isDimmed}

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -19,7 +19,7 @@ import {
 import { IconArrowRight, IconArrowsMaximize, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren, useCallback } from 'react'
-import { filter, isTruthy, map, partition, pipe } from 'remeda'
+import { filter, isTruthy, map, partition, pick, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
 import type { RelationshipData } from '../types'
 import * as css from './RelationshipsDropdownMenu.css'
@@ -47,7 +47,10 @@ export function RelationshipsDropdownMenu({
   disabled?: boolean | undefined
   likec4model: LikeC4Model
 }>) {
-  const openOverlay = useDiagramState(s => s.openOverlay)
+  const {
+    openOverlay,
+    enableRelationshipBrowser
+  } = useDiagramState(pick(['openOverlay', 'enableRelationshipBrowser']))
   const portalProps = useMantinePortalProps()
   const [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target])
 
@@ -72,6 +75,15 @@ export function RelationshipsDropdownMenu({
     partition(r => r.relationship.source === edge.source && r.relationship.target === edge.target)
   )
 
+  const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
+    e.stopPropagation()
+    if (enableRelationshipBrowser) {
+      openOverlay({
+        edgeDetails: edge.id
+      })
+    }
+  }, [edge.id, openOverlay, enableRelationshipBrowser])
+
   const renderRelationship = (relationship: LikeC4Model.ViewModel.Relationship, index: number) => (
     <Fragment key={relationship.id}>
       {index > 0 && <MenuDivider opacity={0.65} />}
@@ -85,13 +97,6 @@ export function RelationshipsDropdownMenu({
     </Fragment>
   )
 
-  const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
-    e.stopPropagation()
-    openOverlay({
-      edgeDetails: edge.id
-    })
-  }, [edge.id, openOverlay])
-
   if (direct.length + nested.length === 0) {
     return <>{children}</>
   }
@@ -131,15 +136,17 @@ export function RelationshipsDropdownMenu({
             {nested.map(renderRelationship)}
           </>
         )}
-        <Box pos={'absolute'} top={5} right={6}>
-          <ActionIcon
-            size={24}
-            variant="subtle"
-            onClick={onClickOpenOverlay}
-          >
-            <IconInfoCircle style={{ width: '70%' }} />
-          </ActionIcon>
-        </Box>
+        {enableRelationshipBrowser && (
+          <Box pos={'absolute'} top={5} right={6}>
+            <ActionIcon
+              size={24}
+              variant="subtle"
+              onClick={onClickOpenOverlay}
+            >
+              <IconInfoCircle style={{ width: '70%' }} />
+            </ActionIcon>
+          </Box>
+        )}
       </MenuDropdown>
     </Menu>
   )

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -1,14 +1,26 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars } from '../../../theme-vars'
+import { mantine, vars, whereLight } from '../../../theme-vars'
 
+// For framer motion
+export const containerForFramer = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%'
+  // transformOrigin: 'center center'
+})
+
+const iconSize = createVar('icon-size')
 export const container = style({
   width: '100%',
   height: '100%',
   position: 'relative',
   padding: 0,
   margin: 0,
+  vars: {
+    [iconSize]: '18px'
+  },
   ':before': {
     content: ' ',
     position: 'absolute',
@@ -56,7 +68,7 @@ export const compoundBody = style({
   margin: 0,
   transition: 'all 200ms ease-out',
   backgroundClip: 'padding-box',
-  overflow: 'hidden',
+  // overflow: 'hidden',
   cursor: 'default',
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
@@ -80,6 +92,25 @@ export const compoundBody = style({
     background: vars.element.fill
   }
 })
+export const compoundTitle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  paddingLeft: 14,
+  paddingTop: 9,
+  minHeight: 30,
+  selectors: {
+    [`:where(.react-flow__node.draggable) &`]: {
+      cursor: 'grab'
+    },
+    [`:where(.likec4-compound-transparent) &`]: {
+      paddingTop: 4
+    }
+  }
+})
+export const withNavigation = style({
+  paddingLeft: 30
+})
 
 const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
 export const transparent = style({
@@ -88,8 +119,7 @@ export const transparent = style({
   boxShadow: 'none',
   borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
   vars: {
-    [opacityDeltaOnHover]: '0',
-    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
+    [opacityDeltaOnHover]: '0'
   },
   ':before': {
     borderRadius: 'unset',
@@ -111,30 +141,19 @@ export const transparent = style({
 })
 
 export const title = style({
+  flex: 1,
   fontFamily: vars.compound.font,
-  textAlign: 'left',
   fontWeight: 600,
   fontSize: rem(15),
   textTransform: 'uppercase',
   letterSpacing: '0.2px',
-  lineHeight: 1,
+  // lineHeight: 1,
   color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  paddingLeft: 14,
-  paddingTop: 13,
-  paddingBottom: 6,
-  minHeight: 30,
-  mixBlendMode: 'screen',
-  selectors: {
-    [`:where(.react-flow__node.draggable) &`]: {
-      cursor: 'grab'
-    },
-    [`:where(.likec4-compound-transparent) &`]: {
-      paddingTop: 10
-    }
-  }
-})
-export const titleWithNavigation = style({
-  paddingLeft: 32
+  // paddingLeft: 0,
+  // paddingTop: 13,
+  // paddingBottom: 6,
+  // minHeight: 20,
+  mixBlendMode: 'screen'
 })
 
 globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
@@ -209,17 +228,14 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   }
 })
 
-export const navigateBtn = style({
-  position: 'absolute',
+const btn = style({
   pointerEvents: 'all',
-  left: 3,
-  top: 6,
   cursor: 'pointer',
   color: `var(--_compound-title-color,${navigateBtnColor})`,
   opacity: 'var(--ai-opacity)',
   backgroundColor: 'var(--ai-bg)',
   vars: {
-    '--ai-opacity': '0.75',
+    '--ai-opacity': '1',
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
     '--ai-bg': `var(--ai-bg-idle)`,
     '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
@@ -229,12 +245,62 @@ export const navigateBtn = style({
     boxShadow: mantine.shadows.md
   },
   selectors: {
-    [`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) &`]: {
+    [`${whereLight} .likec4-compound-transparent &`]: {
       opacity: 0.85,
       vars: {
-        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 60%)`,
-        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
+        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
       }
     }
   }
 })
+
+export const navigateBtn = style([btn, {
+  position: 'absolute',
+  left: 3,
+  top: 6
+}])
+
+export const detailsBtn = style([btn, {
+  // position: 'absolute',
+  // top: 2,
+  // right: 2,
+  // selectors: {
+  //   [`:where([data-likec4-shape='browser']) &`]: {
+  //     top: 3,
+  //     right: 5
+  //   },
+  //   ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+  //     top: 14
+  //   },
+  //   ':where([data-likec4-shape="queue"]) &': {
+  //     top: 1,
+  //     right: 12
+  //   }
+  // }
+}])
+
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  mixBlendMode: 'luminosity'
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+  filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
+  `
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain'
+})