@likec4/diagram 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -48,12 +48,16 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.6.0",
+    "@lume/kiwi": "^0.4.3",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "^3.11.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.1",
+    "@xyflow/react": "12.0.3",
+    "@xyflow/system": "0.0.37",
+    "bezier-js": "^6.1.4",
+    "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
@@ -62,14 +66,15 @@
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
+    "@likec4/core": "1.6.1",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.6.0",
-    "@lume/kiwi": "^0.4.3",
+    "@likec4/core": "1.6.1",
+    "@likec4/tsconfig": "1.6.1",
     "@mantine/core": "7.11.2",
     "@mantine/hooks": "7.11.2",
     "@mantine/vanilla-extract": "7.11.2",
@@ -80,15 +85,10 @@
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@xyflow/react": "12.0.3",
-    "@xyflow/system": "0.0.37",
-    "bezier-js": "^6.1.4",
-    "clsx": "^2.1.1",
     "execa": "^9.3.0",
     "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tilg": "^0.1.1",
     "type-fest": "^4.21.0",
     "typescript": "^5.5.3",
     "vite": "5.3.4",

package/src/LikeC4Diagram.tsx

@@ -1,13 +1,10 @@
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
 import clsx from 'clsx'
-import { DEV } from 'esm-env'
 import { shallowEqual } from 'fast-equals'
 import { domAnimation, LazyMotion } from 'framer-motion'
 import { memo, useEffect, useRef, useState } from 'react'
-import useTilg from 'tilg'
 import { rootClassName } from './globals.css'
-import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
+import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
@@ -52,7 +49,6 @@ export function LikeC4Diagram({
   onNodeContextMenu,
   renderIcon
 }: LikeC4DiagramProps) {
-  DEV && useTilg()
   const initialRef = useRef<{
     defaultNodes: XYFlowData['nodes']
     defaultEdges: XYFlowData['edges']
@@ -146,7 +142,6 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
   showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
-  DEV && useTilg()
   const diagramApi = useDiagramStoreApi()
   const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
 
@@ -170,10 +165,10 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
         defaultEdges={defaultEdges}
         className={clsx(
           'likec4-diagram',
-          cssReactFlow,
-          controls === false && cssNoControls,
-          pannable !== true && cssDisablePan,
-          background === 'transparent' && cssTransparentBg
+          css.cssReactFlow,
+          controls === false && css.cssNoControls,
+          pannable !== true && css.cssDisablePan,
+          background === 'transparent' && css.cssTransparentBg
         )}
       >
         <XYFlowInner

package/src/index.ts

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

package/src/state/DiagramContext.tsx

@@ -52,16 +52,16 @@ export function DiagramContextProvider({
     () => {
       if (!store.current) return
       const state = store.current.getState()
-      if (state.view !== view) {
-        state.updateView(view)
-      }
       const newProps = pickBy(props, isNonNullish)
       if (!hasSubObject(state, newProps)) {
         store.current.setState(newProps, false, 'update incoming props')
       }
+      if (state.view !== view) {
+        state.updateView(view)
+      }
     },
     [view, props],
-    shallowEqual
+    (prev, next) => shallowEqual(prev[0], next[0]) && shallowEqual(prev[1], next[1])
   )
   return (
     <div

package/src/xyflow/XYFlow.tsx

@@ -1,8 +1,6 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
-import { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, type PropsWithChildren, useCallback } from 'react'
-import useTilg from 'tilg'
 import type { DiagramState } from '../state/diagramStore'
 import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
@@ -68,7 +66,6 @@ export function XYFlow({
   defaultEdges,
   style
 }: XYFlowWrapperProps) {
-  DEV && useTilg()
   const xyflowApi = useXYStoreApi()
   const diagramApi = useDiagramStoreApi()
   const {

package/src/xyflow/XYFlowInner.tsx

@@ -52,3 +52,4 @@ export const XYFlowInner = memo(function XYFlowInnerR({
     </>
   )
 }, shallowEqual)
+XYFlowInner.displayName = 'XYFlowInner'

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

@@ -6,7 +6,7 @@ import { deepEqual as eq } from 'fast-equals'
 import { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
 import { isNumber, isTruthy } from 'remeda'
-import { useDiagramState } from '../../../state/useDiagramStore'
+import { type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../../../state/useDiagramStore'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
@@ -71,7 +71,7 @@ const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
   prev.id === next.id
   && eq(prev.selected ?? false, next.selected ?? false)
   && eq(prev.dragging ?? false, next.dragging ?? false)
-  && eq(prev.draggable ?? false, next.draggable ?? false)
+  // && eq(prev.draggable ?? false, next.draggable ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
   && eq(prev.data.element, next.data.element)
@@ -88,6 +88,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   width,
   height
 }) {
+  const store = useDiagramStoreApi()
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
@@ -120,7 +121,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
       break
   }
 
-  // useTilg(animate, isHovered, isInteractive)
+  const elementIcon = ElementIcon({ node: element, store })
 
   return (
     <>
@@ -187,11 +188,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
         <div
           className={clsx(
             css.elementDataContainer,
-            isTruthy(element.icon) && css.hasIcon,
+            isTruthy(elementIcon) && css.hasIcon,
             'likec4-element'
           )}
         >
-          {isTruthy(element.icon) && <ElementIcon node={element} />}
+          {elementIcon}
           <div className={clsx(css.elementTextData, 'likec4-element-main-props')}>
             <Text
               className={clsx(css.title, 'likec4-element-title')}>
@@ -223,8 +224,7 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   )
 }, isEqualProps)
 
-const ElementIcon = ({ node }: { node: DiagramNode }) => {
-  const RenderIcon = useDiagramState(s => s.renderIcon)
+const ElementIcon = ({ node, store }: { node: DiagramNode; store: DiagramStoreApi }) => {
   if (!node.icon) {
     return null
   }
@@ -235,6 +235,7 @@ const ElementIcon = ({ node }: { node: DiagramNode }) => {
       </div>
     )
   }
+  const RenderIcon = store.getState().renderIcon
   const icon = RenderIcon ? <RenderIcon node={node} /> : null
   if (!icon) {
     return null