@likec4/diagram 1.1.0 → 1.2.0

package/src/LikeC4Diagram.props.ts

@@ -1,4 +1,5 @@
 import type {
+  BorderStyle,
   DiagramEdge,
   DiagramNode,
   DiagramView,
@@ -11,7 +12,7 @@ import type {
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
-import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
+import type { XYBackground, XYBackgroundProps } from './xyflow/XYFlowBackground'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
@@ -44,22 +45,19 @@ export type OnEdgeClick = (
 export type OnCanvasClick = (event: ReactMouseEvent) => void
 
 export namespace Changes {
-  export interface ChangeColor {
-    op: 'change-color'
-    color: ThemeColor
-    targets: NonEmptyArray<Fqn>
-  }
-
-  export interface ChangeShape {
-    op: 'change-shape'
-    shape: ElementShape
+  export interface ChangeElementStyle {
+    op: 'change-element-style'
+    style: {
+      border?: BorderStyle
+      opacity?: number
+      shape?: ElementShape
+      color?: ThemeColor
+    }
     targets: NonEmptyArray<Fqn>
   }
 }
 
-export type Change =
-  | Changes.ChangeColor
-  | Changes.ChangeShape
+export type Change = Changes.ChangeElementStyle
 
 export type ChangeEvent = {
   changes: NonEmptyArray<Change>
@@ -132,13 +130,25 @@ export interface LikeC4DiagramProperties {
    * Background pattern
    * @default 'dots'
    */
-  background?: 'transparent' | 'solid' | XYBackgroundProps | undefined
+  background?: 'transparent' | 'solid' | XYBackground | undefined
 
   /**
    * Display hovercards with element links
    * @default true
    */
   showElementLinks?: boolean | undefined
+
+  /**
+   * Display panel with diagram title / description
+   * @default true
+   */
+  showDiagramTitle?: boolean | undefined
+
+  /**
+   * If Walkthrough for dynamic views should be enabled
+   * @default false
+   */
+  enableDynamicViewWalkthrough?: boolean | undefined
 }
 
 export interface LikeC4DiagramEventHandlers {

package/src/LikeC4Diagram.tsx

@@ -1,3 +1,4 @@
+import '@xyflow/react/dist/style.css'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { useRef } from 'react'
@@ -8,12 +9,13 @@ import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from '.
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { WhenInitialized } from './state/WhenInitialized'
-import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
+import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
 import type { XYFlowData } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
+import { XYFlowInner } from './xyflow/XYFlowInner'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -27,8 +29,10 @@ export function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = 'dots',
-  controls = false,
+  controls = !readonly,
   showElementLinks = true,
+  showDiagramTitle = true,
+  enableDynamicViewWalkthrough = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -42,6 +46,7 @@ export function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu
 }: LikeC4DiagramProps) {
+  console.log('LikeC4Diagram')
   const initialRef = useRef<{
     defaultNodes: XYFlowData['nodes']
     defaultEdges: XYFlowData['edges']
@@ -100,18 +105,22 @@ export function LikeC4Diagram({
                 pannable !== true && cssDisablePan,
                 background === 'transparent' && cssTransparentBg
               )}
-              background={background}
-              controls={controls}
               defaultNodes={initialRef.current.defaultNodes}
               defaultEdges={initialRef.current.defaultEdges}
             >
-              {readonly !== true && <OptionsPanel />}
+              <XYFlowInner
+                showDiagramTitle={showDiagramTitle}
+                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+                background={background}
+                controls={controls}
+              />
             </XYFlow>
+            <WhenInitialized>
+              <SyncWithDiagram />
+              {fitView && <FitViewOnDiagramChange />}
+              {fitView && zoomable && <SelectEdgesOnNodeFocus />}
+            </WhenInitialized>
           </KeepAspectRatioContainer>
-          <WhenInitialized>
-            <SyncWithDiagram />
-            <FitViewOnDiagramChange />
-          </WhenInitialized>
         </DiagramContextProvider>
       </XYFlowProvider>
     </EnsureMantine>

package/src/StaticLikeC4Diagram.tsx

@@ -31,6 +31,8 @@ export function StaticLikeC4Diagram({
       controls={false}
       background={background}
       showElementLinks
+      showDiagramTitle={false}
+      enableDynamicViewWalkthrough={false}
       nodesSelectable={false}
       nodesDraggable={false}
       {...rest}

package/src/globals.css.ts

@@ -1,5 +1,5 @@
 import { defaultTheme } from '@likec4/core'
-import { createGlobalTheme } from '@vanilla-extract/css'
+import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
 import { scale, toHex } from 'khroma'
 import { keys, omit } from 'remeda'
 import { mantine } from './mantine.css'
@@ -7,6 +7,11 @@ import { vars } from './theme.css'
 
 export const rootClassName = 'likec4-diagram-root'
 
+globalStyle(`.${rootClassName}`, {
+  WebkitFontSmoothing: mantine.webkitFontSmoothing,
+  MozOsxFontSmoothing: mantine.mozFontSmoothing
+})
+
 createGlobalTheme(`.${rootClassName}`, {
   ...omit(vars, ['optionsPanel', 'default'])
 }, {
@@ -20,6 +25,7 @@ createGlobalTheme(`.${rootClassName}`, {
       }
     }
   },
+  filterDimmed: 'brightness(.6) grayscale(.8) opacity(.5) blur(1px)',
   compound: {
     font: vars.likec4.font,
     titleColor: vars.element.loContrast

package/src/index.ts

@@ -1,6 +1,3 @@
-import '@xyflow/react/dist/style.css'
-import './globals.css'
-
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 

package/src/state/DiagramContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, type PropsWithChildren, useRef } from 'react'
+import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
+import { hasSubObject, isIncludedIn } from 'remeda'
 import { useUpdateEffect } from '../hooks'
 import { useXYFlow } from '../xyflow/hooks'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
@@ -18,20 +19,28 @@ export function DiagramContextProvider({ children, view, ...props }: PropsWithCh
     })
   }
 
-  useUpdateEffect(
-    () => store.current?.setState({ xyflow }, false, 'update xyflow'),
-    [xyflow],
-    Object.is
-  )
-
-  useUpdateEffect(
-    () => store.current?.getState().updateView(view),
-    [view]
+  useEffect(
+    () => {
+      if (store.current?.getState().xyflow !== xyflow) {
+        store.current?.setState({ xyflow }, false, 'update xyflow')
+      }
+    },
+    [xyflow]
   )
 
   useUpdateEffect(
-    () => store.current?.setState(props, false, 'update incoming props'),
-    [props]
+    () => {
+      if (!store.current) return
+      const state = store.current.getState()
+      if (state.view !== view) {
+        state.updateView(view)
+      }
+      if (!hasSubObject(state, props)) {
+        store.current.setState(props, false, 'update incoming props')
+      }
+      isIncludedIn
+    },
+    [view, props]
   )
 
   return (