chore: fix examples

Signed-off-by: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
2022-02-21 20:25:17 +01:00
parent ca85d8002e
commit f44784b1d0
28 changed files with 382 additions and 275 deletions
@@ -59,6 +59,7 @@ declare global {
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const resolveComponent: typeof import('vue')['resolveComponent']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
@@ -79,17 +80,23 @@ declare global {
  const unrefElement: typeof import('@vueuse/core')['unrefElement']
  const until: typeof import('@vueuse/core')['until']
  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
  const useAttrs: typeof import('vue')['useAttrs']
  const useBase64: typeof import('@vueuse/core')['useBase64']
  const useBattery: typeof import('@vueuse/core')['useBattery']
  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useClamp: typeof import('@vueuse/core')['useClamp']
  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
  const useCounter: typeof import('@vueuse/core')['useCounter']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
  const useDark: typeof import('@vueuse/core')['useDark']
  const useDebounce: typeof import('@vueuse/core')['useDebounce']
  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
@@ -102,6 +109,7 @@ declare global {
  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
  const useDraggable: typeof import('@vueuse/core')['useDraggable']
  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
  const useElementHover: typeof import('@vueuse/core')['useElementHover']
  const useElementSize: typeof import('@vueuse/core')['useElementSize']
  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
@@ -112,6 +120,7 @@ declare global {
  const useFavicon: typeof import('@vueuse/core')['useFavicon']
  const useFetch: typeof import('@vueuse/core')['useFetch']
  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
  const useFps: typeof import('@vueuse/core')['useFps']
  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
@@ -126,10 +135,14 @@ declare global {
  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
  const useMouse: typeof import('@vueuse/core')['useMouse']
  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
  const useNetwork: typeof import('@vueuse/core')['useNetwork']
  const useNow: typeof import('@vueuse/core')['useNow']
  const useOnline: typeof import('@vueuse/core')['useOnline']
@@ -144,16 +157,21 @@ declare global {
  const useRafFn: typeof import('@vueuse/core')['useRafFn']
  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
  const useShare: typeof import('@vueuse/core')['useShare']
  const useSlots: typeof import('vue')['useSlots']
  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
  const useSwipe: typeof import('@vueuse/core')['useSwipe']
  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
  const useThrottle: typeof import('@vueuse/core')['useThrottle']
  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
@@ -166,10 +184,12 @@ declare global {
  const useTransition: typeof import('@vueuse/core')['useTransition']
  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
  const useVModel: typeof import('@vueuse/core')['useVModel']
  const useVModels: typeof import('@vueuse/core')['useVModels']
  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
@@ -6,9 +6,7 @@ import { useStore } from '~/store'
 let id = 0
 export default (options?: Partial<FlowOptions>): UseVueFlow => {
  const currentInstance: any = getCurrentInstance()
-  let vueFlow: UseVueFlow | false | undefined = currentInstance
-    ? inject(VueFlow, undefined) ?? (currentInstance.vueFlow as UseVueFlow)
-    : false
+  let vueFlow = currentInstance ? inject(VueFlow) ?? (currentInstance.vueFlow as UseVueFlow) : false
  if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.id)) {
    const name = options?.id ?? `vue-flow-${id++}`
    const store = useStore(options)
@@ -26,5 +24,5 @@ export default (options?: Partial<FlowOptions>): UseVueFlow => {
    currentInstance.vueFlow = vueFlow
  }

-  return vueFlow
+  return vueFlow as UseVueFlow
 }
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import ZoomPane from '../ZoomPane/ZoomPane.vue'
 import { createHooks, useHooks } from '../../store'
-import { useVueFlow, applyNodeChanges, applyEdgeChanges } from '../../composables'
+import { useVueFlow } from '../../composables'
 import type { FlowProps } from '../../types/flow'
 import useWatch from './watch'

@@ -36,15 +36,19 @@ const {
  getEdgeTypes,
  onNodesChange,
  onEdgesChange,
+  applyNodeChanges,
+  applyEdgeChanges,
  nodes: storedNodes,
  edges: storedEdges,
+  state,
 } = useVueFlow(props)
 useHooks(hooks.value, emit)
 const { modelValue, nodes, edges } = useVModels(props, emit)

+const foo = store.nodes
 if (applyDefault.value) {
-  onNodesChange((c) => applyNodeChanges(c, storedNodes.value))
-  onEdgesChange((c) => applyEdgeChanges(c, storedEdges.value))
+  onNodesChange(applyNodeChanges)
+  onEdgesChange(applyEdgeChanges)
 }
 if (props.modelValue && !storedNodes.value.length) setElements(props.modelValue)
 if (props.nodes && !storedNodes.value.length) setNodes(props.nodes)
@@ -49,11 +49,7 @@ export default (
    })
  }

-  watch(
-    () => props.maxZoom,
-    (v) => isDef(v) && store.setMaxZoom(v),
-    { immediate: isDef(props.maxZoom) },
-  )
+  watch([() => props.maxZoom], (v) => isDef(v) && store.setMaxZoom(v), { immediate: isDef(props.maxZoom) })
  watch(
    () => props.minZoom,
    (v) => isDef(v) && store.setMinZoom(v),
@@ -58,7 +58,7 @@ const addEdge = (edgeParams: Edge | Connection, edges: Edge[]) => {
  return edge
 }

-const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) => {
+const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]): GraphEdge | false => {
  if (!newConnection.source || !newConnection.target) {
    console.warn("Can't create new edge. An edge needs a source and a target.")
    return false
@@ -80,8 +80,8 @@ const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: Gra
  return edge
 }

-export const applyEdgeChangesAction = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
-export const applyNodeChangesAction = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)
+const applyEdgeChangesAction = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
+const applyNodeChangesAction = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)

 export const parseChildren = (
  n: Node,
@@ -9,8 +9,8 @@ import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './
 import { EdgeChange, FlowHooks, FlowHooksOn, NodeChange } from './hooks'

 export interface State<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'modelValue'> {
-  hooks: FlowHooks
-  instance: FlowInstance | undefined
+  hooks: FlowHooks<N, E>
+  instance: FlowInstance<N, E> | undefined

  nodes: GraphNode<N>[]
  edges: GraphEdge<E>[]
@@ -75,7 +75,7 @@ export interface Actions<N = any, E = N> {
  setNodes: (nodes: Node<N>[], extent?: CoordinateExtent) => void
  setEdges: (edges: Edge<E>[]) => void
  addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => void
-  addEdges: <EA = E>(params: (Edge<EA> | Connection)[]) => void
+  addEdges: <EA = E>(edgesOrConnections: (Edge<EA> | Connection)[]) => void
  updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => GraphEdge<EU> | false
  applyEdgeChanges: <ED = E>(changes: EdgeChange[]) => GraphEdge<ED>[]
  applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]
@@ -72,7 +72,7 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
          target: [],
        },
        computedPosition: {
-          z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0,
+          z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex as string) : node.style?.zIndex ?? 0,
          ...clampPosition(node.position, nodeExtent),
        },
        isParent: !!(node.children && node.children.length),
@@ -99,7 +99,7 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
        type: edge.type ?? 'default',
        source: edge.source.toString(),
        target: edge.target.toString(),
-        z: typeof edge.style?.zIndex === 'string' ? parseInt(edge.style?.zIndex) : edge.style?.zIndex ?? 0,
+        z: typeof edge.style?.zIndex === 'string' ? parseInt(edge.style?.zIndex as string) : edge.style?.zIndex ?? 0,
        sourceX: 0,
        sourceY: 0,
        targetX: 0,
@@ -241,7 +241,7 @@ export const getRectOfNodes = (nodes: GraphNode[]) => {
        rectToBox({
          ...computedPosition,
          ...dimensions,
-        }),
+        } as Rect),
      ),
    { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity },
  )