@likec4/diagram 1.7.2 → 1.7.4

package/src/state/useNavigationHistory.ts

@@ -1,39 +0,0 @@
-import { useStateHistory } from '@mantine/hooks'
-import { useMemo } from 'react'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useDiagramState, useDiagramStoreApi } from './useDiagramStore'
-
-export function useNavigationHistory() {
-  const store = useDiagramStoreApi()
-  const viewId = useDiagramState(s => s.view.id)
-
-  const [historyViewId, historyOps, {
-    history,
-    current: historyIndex
-  }] = useStateHistory(viewId)
-
-  const hasBack = historyIndex > 0
-  const hasForward = historyIndex < history.length - 1
-
-  useUpdateEffect(() => {
-    if (viewId !== historyViewId) {
-      historyOps.set(viewId)
-    }
-  }, [viewId])
-
-  useUpdateEffect(() => {
-    if (viewId !== historyViewId) {
-      store.getState().onNavigateTo?.(historyViewId)
-    }
-  }, [historyViewId])
-
-  return useMemo(() => ({
-    hasBack,
-    hasForward,
-    ops: historyOps
-  }), [
-    hasBack,
-    hasForward,
-    historyOps
-  ])
-}

package/src/types.ts

@@ -1,22 +0,0 @@
-import type { Fqn, RelationID, ViewID } from '@likec4/core'
-import type { Simplify } from 'type-fest'
-
-type TaggedUnion<
-  TagKey extends string,
-  UnionMembers extends Record<string, Record<string, unknown>>
-> = {
-  [Name in keyof UnionMembers]: Simplify<{ [Key in TagKey]: Name } & UnionMembers[Name]>
-}[keyof UnionMembers]
-
-export type DiagramEditorCommand = TaggedUnion<'type', {
-  // Sources
-  showElement: {
-    element: Fqn
-  }
-  showRelation: {
-    relation: RelationID
-  }
-  showView: {
-    view: ViewID
-  }
-}>

package/src/ui/BackwardForwardPanel.css.ts

@@ -1,22 +0,0 @@
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../mantine.css'
-import { vars } from '../theme.css'
-
-export const panel = style({
-  top: fallbackVar(vars.navigationPanel.top, '0.8rem'),
-  left: fallbackVar(vars.navigationPanel.left, '1rem'),
-  margin: 0
-})
-
-globalStyle(`${panel} .mantine-ActionIcon-root`, {
-  vars: {
-    ['--ai-size']: 'var(--ai-size-lg)'
-  }
-  // '@media': {
-  //   [mantine.largerThan('lg')]: {
-  //     vars: {
-  //       ['--ai-size']: 'var(--ai-size-xl)'
-  //     }
-  //   }
-  // }
-})

package/src/ui/BackwardForwardPanel.tsx

@@ -1,76 +0,0 @@
-import { ActionIcon, Group } from '@mantine/core'
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../state/hooks'
-import * as css from './BackwardForwardPanel.css'
-
-const historySelector = (s: DiagramState) => ({
-  hasStepBack: s.navigationHistoryIndex > 0,
-  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1,
-  goBack: s.goBack,
-  goForward: s.goForward
-})
-
-export function BackwardForwardPanel() {
-  const {
-    hasStepBack,
-    hasStepForward,
-    goBack,
-    goForward
-  } = useDiagramState(historySelector)
-  return (
-    <Group
-      className={clsx(
-        'react-flow__panel',
-        css.panel,
-        'likec4-navigation-panel'
-      )}
-      gap={'xs'}>
-      <AnimatePresence>
-        {hasStepBack && (
-          <m.div
-            layout
-            initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0.05,
-              transform: 'translateX(-10px)'
-            }}
-            key={'back'}>
-            <ActionIcon
-              variant="light"
-              color="gray"
-              onClick={e => {
-                e.stopPropagation()
-                goBack()
-              }}>
-              <IconChevronLeft />
-            </ActionIcon>
-          </m.div>
-        )}
-        {hasStepForward && (
-          <m.div
-            layout
-            initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0,
-              transform: 'translateX(10px)'
-            }}
-            key={'forward'}>
-            <ActionIcon
-              variant="light"
-              color="gray"
-              onClick={e => {
-                e.stopPropagation()
-                goForward()
-              }}>
-              <IconChevronRight />
-            </ActionIcon>
-          </m.div>
-        )}
-      </AnimatePresence>
-    </Group>
-  )
-}

package/src/xyflow/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useXYFlow, useXYNodesData, useXYStore, useXYStoreApi } from './useXYFlow'
-
-export type * from './useXYFlow'