@likec4/diagram 1.1.1 → 1.2.1

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -7,16 +7,7 @@ import { useDiagramState } from '../../../state'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
-import {
-  container,
-  cssElement,
-  cssNavigateBtn,
-  cssShapeSvg,
-  description as cssdescription,
-  indicator,
-  technology as csstechnology,
-  title as cssTitle
-} from './element.css'
+import * as css from './element.css'
 import { ElementIcon } from './ElementIcon'
 import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
@@ -38,6 +29,13 @@ const variants = {
       delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
     }
   }),
+  // dimmed: {
+  //   filter: 'brightness(0.5)',
+  //   transition: {
+  //     duration: 0.8,
+  //     ease: 'easeInOut',
+  //   }
+  // },
   // dragging: {
   //   scale: selectedScale
   // },
@@ -76,8 +74,9 @@ export function ElementNode({
   width,
   height
 }: ElementNodeProps) {
-  const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
+    isDimmed: s.dimmed.has(id),
     isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
     hasOnNavigateTo: !!s.onNavigateTo
@@ -112,7 +111,11 @@ export function ElementNode({
   return (
     <motion.div
       id={id}
-      className={clsx(container, 'likec4-element-node')}
+      className={clsx([
+        css.container,
+        isDimmed && css.dimmed,
+        'likec4-element-node'
+      ])}
       data-likec4-color={element.color}
       data-likec4-shape={element.shape}
       variants={variants}
@@ -162,12 +165,14 @@ export function ElementNode({
         style={{ visibility: 'hidden' }}
       />
       <svg
-        className={cssShapeSvg}
+        className={clsx(
+          css.cssShapeSvg
+        )}
         viewBox={`0 0 ${w} ${h}`}
         width={w}
         height={h}
       >
-        <g className={indicator}>
+        <g className={css.indicator}>
           <SelectedIndicator
             shape={element.shape}
             w={w}
@@ -180,24 +185,24 @@ export function ElementNode({
           h={h}
         />
       </svg>
-      <div className={clsx(cssElement, 'likec4-element')}>
+      <div className={clsx(css.element, 'likec4-element')}>
         {element.icon && <ElementIcon node={element} />}
         <Text
           component="div"
-          className={clsx(cssTitle, 'likec4-element-title')}>
+          className={clsx(css.title, 'likec4-element-title')}>
           {element.title}
         </Text>
         {element.technology && (
           <Text
             component="div"
-            className={clsx(csstechnology, 'likec4-element-technology')}>
+            className={clsx(css.technology, 'likec4-element-technology')}>
             {element.technology}
           </Text>
         )}
         {element.description && (
           <Text
             component="div"
-            className={clsx(cssdescription, 'likec4-element-description')}>
+            className={clsx(css.description, 'likec4-element-description')}>
             {element.description}
           </Text>
         )}
@@ -219,7 +224,7 @@ export function ElementNode({
       ))} */
       }
       {isHovercards && element.links && <ElementLink element={element} />}
-      {isNavigable && <NavigateToBtn xynodeId={id} className={cssNavigateBtn} />}
+      {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
     </motion.div>
   )
 }

package/src/xyflow/nodes/element/element.css.ts

@@ -19,6 +19,13 @@ export const container = style({
   }
 })
 
+export const dimmed = style({})
+
+globalStyle(`.react-flow__node:has(${dimmed})`, {
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 const indicatorKeyframes = generateIdentifier('indicator')
 globalKeyframes(indicatorKeyframes, {
   'from': {
@@ -92,7 +99,7 @@ export const description = style({
   fontStyle: 'normal',
   fontWeight: 400,
   fontSize: rem(14),
-  lineHeight: 1.125,
+  lineHeight: 1.25,
   textAlign: 'center',
   textWrap: 'pretty',
   color: vars.element.loContrast,
@@ -120,7 +127,7 @@ export const technology = style({
   }
 })
 
-export const cssElement = style({
+export const element = style({
   position: 'relative',
   width: '100%',
   height: '100%',

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

@@ -14,6 +14,7 @@ export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
     <ActionIcon
       className={clsx('nodrag nopan', className)}
       radius="xl"
+      onPointerDownCapture={e => e.stopPropagation()}
       onClick={event => {
         event.stopPropagation()
         diagramApi.getState().triggerOnNavigateTo(xynodeId, event)

package/src/xyflow/types.ts

@@ -24,6 +24,10 @@ type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetR
   SetRequired<Node<D, T>, 'type'>,
   'id' | 'type'
 >
+type TypedXYFlowEdge<D extends Record<string, unknown>, T extends string> = SetReadonly<
+  SetRequired<Edge<D, T>, 'type' | 'data'>,
+  'id' | 'type'
+>
 
 export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>
 
@@ -57,20 +61,15 @@ export type RelationshipData = {
   headPoint: Point | null
   tailPoint: Point | null
   type: 'bezier' | 'poly'
+  // if dynamic view
+  stepNum: number | null
   label: null | {
     bbox: BBox
     text: string
   }
 }
 
-export type RelationshipEdge = Simplify<
-  SetRequired<
-    Omit<Edge<RelationshipData>, 'type'>,
-    'data'
-  > & {
-    type: 'relationship'
-  }
->
+export type RelationshipEdge = TypedXYFlowEdge<RelationshipData, 'relationship'>
 
 export type XYFlowEdge = RelationshipEdge