@likec4/diagram 1.3.0 → 1.5.0

package/src/icons/ZoomIn.tsx

@@ -1,25 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const ZoomIn = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    xmlns="http://www.w3.org/2000/svg"
-    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-    fill="none"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
-    <path d="M7 10l6 0" />
-    <path d="M10 7l0 6" />
-    <path d="M21 21l-6 -6" />
-  </svg>
-))

package/src/icons/index.ts

@@ -1,3 +0,0 @@
-export * from './Clipboard'
-export * from './Link'
-export * from './ZoomIn'

package/src/mantine/theme.ts

@@ -1,20 +0,0 @@
-import { createTheme, type MantineTheme } from '@mantine/core'
-
-export const theme = createTheme({
-  primaryColor: 'indigo',
-  cursorType: 'pointer',
-  defaultRadius: 'sm',
-  respectReducedMotion: true,
-  headings: {
-    fontWeight: '500',
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: '600'
-      },
-      h2: {
-        // fontSize: '1.85rem',
-      }
-    }
-  }
-}) as MantineTheme

package/src/state/WhenInitialized.tsx

@@ -1,24 +0,0 @@
-import { type PropsWithChildren, useEffect, useState } from 'react'
-import { useDiagramStoreApi } from './useDiagramStore'
-
-export function WhenInitialized({ children }: PropsWithChildren) {
-  const diagramApi = useDiagramStoreApi()
-
-  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
-
-  useEffect(() => {
-    if (isInitialized) {
-      return
-    }
-    return diagramApi.subscribe(
-      s => s.initialized,
-      setIsInitialized
-    )
-  }, [isInitialized])
-
-  if (!isInitialized) {
-    return null
-  }
-
-  return <>{children}</>
-}

package/src/ui/Camera.tsx

@@ -1,174 +0,0 @@
-import { shallowEqual } from '@mantine/hooks'
-import { useDebouncedEffect, useIsMounted } from '@react-hookz/web'
-import {
-  type ReactFlowState,
-  useOnSelectionChange,
-  useOnViewportChange,
-  useStore,
-  useUpdateNodeInternals,
-  type Viewport
-} from '@xyflow/react'
-import { memo, useEffect, useRef, useState } from 'react'
-import { uniq } from 'remeda'
-import { useXYFlow } from '../xyflow/hooks'
-import type { XYFlowNode } from '../xyflow/types'
-import { distance } from '../xyflow/utils'
-
-const selector = (state: ReactFlowState) => {
-  return {
-    isUserSelectionActive: state.userSelectionActive,
-    isDragging: state.paneDragging || state.nodes.some(n => n.dragging ?? false)
-  }
-}
-
-const CameraMemo = /* @__PURE__ */ memo(function Camera() {
-  const isMounted = useIsMounted()
-  // const isUserSelectionActive = useStore(selectUserSelectionActive)
-  const {
-    isUserSelectionActive,
-    isDragging
-  } = useStore(selector, shallowEqual)
-  const reactflow = useXYFlow()
-  const updateNd = useUpdateNodeInternals()
-
-  const padding = 0 // editor.fitViewPadding
-  const viewId = '' // editor.viewId
-  const fitOnSelect: boolean = false // editor.fitOnSelect
-
-  const previousViewport = useRef<Viewport | null>(null)
-  const isZoomPendingRef = useRef(false)
-
-  const viewportChangeStart = useRef<Viewport | null>(null)
-  const prevViewId = useRef(viewId)
-  const isReady = reactflow.viewportInitialized
-  const selectedNodesRef = useRef([] as string[])
-
-  const [selectedNodes, setSelectedNodes] = useState([] as XYFlowNode[])
-
-  // WORKAROUND
-
-  useOnViewportChange({
-    onStart: (viewport) => {
-      viewportChangeStart.current = { ...viewport }
-    },
-    onEnd: (end) => {
-      if (!previousViewport.current) {
-        viewportChangeStart.current = null
-      }
-      if (!viewportChangeStart.current) {
-        return
-      }
-      const start = {
-        ...viewportChangeStart.current
-      }
-      const d = distance(start, end)
-      if (d > 15) {
-        previousViewport.current = null
-      }
-      viewportChangeStart.current = null
-    }
-  })
-
-  const fixUseOnViewportChange = () => {
-    // WORKAROUND:
-    // react-flow triggers useOnViewportChange
-    // We reset the viewportChangeStart, before useOnViewportChange.onEnd called
-    setTimeout(() => {
-      viewportChangeStart.current = null
-    }, 50)
-  }
-
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      if (!isMounted() || fitOnSelect === false) {
-        return
-      }
-      if (nodes.length === 0 && edges.length === 0) {
-        setSelectedNodes([])
-        return
-      }
-      const selected = new Set([
-        ...nodes.map(({ id }) => reactflow.getNode(id)),
-        ...edges.flatMap((edge) => [
-          reactflow.getNode(edge.source),
-          reactflow.getNode(edge.target)
-        ])
-      ].filter(Boolean))
-      setSelectedNodes([...selected])
-    }
-  })
-
-  const selectedNodesHash = selectedNodes.map((node) => node.id).sort().join('\n')
-  useEffect(() => {
-    isZoomPendingRef.current = selectedNodesHash !== ''
-  }, [selectedNodesHash])
-
-  useDebouncedEffect(
-    () => {
-      if (isUserSelectionActive || isDragging || !isReady) {
-        return
-      }
-      if (selectedNodes.length === 0) {
-        if (previousViewport.current) {
-          console.log(`Camera: revert viewport`)
-          reactflow.setViewport(previousViewport.current, {
-            duration: 300
-          })
-          previousViewport.current = null
-        }
-        return
-      }
-      if (!isZoomPendingRef.current) {
-        return
-      }
-      isZoomPendingRef.current = false
-      previousViewport.current ??= { ...reactflow.getViewport() }
-      const zoom = previousViewport.current.zoom
-      reactflow.fitView({
-        duration: 350,
-        maxZoom: Math.max(1, zoom),
-        padding,
-        nodes: selectedNodes
-      })
-      fixUseOnViewportChange()
-    },
-    [selectedNodesHash, isReady, isDragging, isUserSelectionActive],
-    previousViewport.current ? 100 : 1500
-    // previousViewport.current ? 200 : 2500
-  )
-
-  useEffect(() => {
-    const ids = selectedNodes.map((node) => node.id)
-    for (const id of uniq([...selectedNodesRef.current, ...ids])) {
-      try {
-        updateNd(id)
-      } catch (e) {
-        console.warn(`Camera: failed useUpdateNodeInternals`, e)
-      }
-    }
-    selectedNodesRef.current = ids
-  }, [selectedNodesHash, updateNd])
-
-  useDebouncedEffect(
-    () => {
-      if (!isReady || prevViewId.current === viewId) {
-        return
-      }
-      const zoom = previousViewport.current?.zoom ?? reactflow.getZoom()
-      reactflow.fitView({
-        duration: 400,
-        maxZoom: Math.max(1, zoom),
-        padding
-      })
-      previousViewport.current = null
-      prevViewId.current = viewId
-    },
-    [isReady, viewId],
-    50,
-    500
-  )
-
-  return null
-})
-
-export default CameraMemo