Implemented 2D visualization for notes using Vue Flow

node_modules/@vue-flow/core/dist/composables/index.d.ts

@@ -0,0 +1,13 @@
+export * from './useDrag'
+export * from './useEdge'
+export * from './useEdgeHooks'
+export * from './useGetPointerPosition'
+export * from './useHandle'
+export * from './useKeyPress'
+export * from './useNode'
+export * from './useNodeHooks'
+export * from './useUpdateNodePositions'
+export * from './useViewportHelper'
+export * from './useVueFlow'
+export * from './useWatchProps'
+export * from './useZoomPanHelper'

node_modules/@vue-flow/core/dist/composables/useConnection.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Composable for accessing the currently ongoing connection.
+ *
+ * @public
+ * @returns current connection: startHandle, endHandle, status, position
+ */
+export declare function useConnection(): {
+  startHandle: import('vue').Ref<import('..').ConnectingHandle | null>
+  endHandle: import('vue').Ref<import('..').ConnectingHandle | null>
+  status: import('vue').Ref<import('..').ConnectionStatus | null>
+  position: import('vue').Ref<import('..').XYPosition>
+}

node_modules/@vue-flow/core/dist/composables/useDrag.d.ts

@@ -0,0 +1,24 @@
+import type { D3DragEvent, SubjectPosition } from 'd3-drag'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import type { MouseTouchEvent, NodeDragEvent } from '../types'
+
+export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
+interface UseDragParams {
+  onStart: (event: NodeDragEvent) => void
+  onDrag: (event: NodeDragEvent) => void
+  onStop: (event: NodeDragEvent) => void
+  onClick?: (event: MouseTouchEvent) => void
+  el: Ref<Element | null>
+  disabled?: MaybeRefOrGetter<boolean>
+  selectable?: MaybeRefOrGetter<boolean>
+  dragHandle?: MaybeRefOrGetter<string | undefined>
+  id?: string
+}
+/**
+ * Composable that provides drag behavior for nodes
+ *
+ * @internal
+ * @param params
+ */
+export declare function useDrag(params: UseDragParams): import('vue').ShallowRef<boolean>
+export {}

node_modules/@vue-flow/core/dist/composables/useEdge.d.ts

@@ -0,0 +1,20 @@
+import type { CustomEvent, ElementData } from '../types'
+
+/**
+ * Composable that provides access to an edge object and it's dom element
+ *
+ * If no edge id is provided, the edge id is injected from context
+ *
+ * If you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw
+ *
+ * @public
+ * @param id - The id of the edge to access
+ * @returns the edge id, the edge and the edge dom element
+ */
+export declare function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
+  id?: string,
+): {
+  id: string
+  edge: import('../types').GraphEdge<Data, CustomEvents>
+  edgeEl: import('vue').Ref<SVGElement | null>
+}

node_modules/@vue-flow/core/dist/composables/useEdgeHooks.d.ts

@@ -0,0 +1,14 @@
+import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '../types'
+
+/**
+ * Composable for handling edge events
+ *
+ * @internal
+ */
+export declare function useEdgeHooks(
+  edge: GraphEdge,
+  emits: VueFlowStore['emits'],
+): {
+  emit: EdgeEventsEmit
+  on: EdgeEventsOn
+}

node_modules/@vue-flow/core/dist/composables/useEdgesData.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { Edge, GraphEdge } from '../types'
+
+interface EdgeData<EdgeType extends Edge = GraphEdge> {
+  id: string
+  type: EdgeType['type']
+  data: NonNullable<EdgeType['data']> | null
+}
+/**
+ * Composable for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param edgeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns An array of data objects
+ */
+export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
+  edgeId: MaybeRefOrGetter<string>,
+): ComputedRef<EdgeData<EdgeType> | null>
+export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
+  edgeIds: MaybeRefOrGetter<string[]>,
+): ComputedRef<EdgeData<EdgeType>[]>
+export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
+  edgeIds: MaybeRefOrGetter<string[]>,
+  guard: (node: Edge) => node is EdgeType,
+): ComputedRef<EdgeData<EdgeType>[]>
+export {}

node_modules/@vue-flow/core/dist/composables/useGetPointerPosition.d.ts

@@ -0,0 +1,14 @@
+import type { MouseTouchEvent } from '../types'
+import type { UseDragEvent } from './useDrag'
+
+/**
+ * Composable that returns a function to get the pointer position
+ *
+ * @internal
+ */
+export declare function useGetPointerPosition(): (event: UseDragEvent | MouseTouchEvent) => {
+  x: number
+  y: number
+  xSnapped: number
+  ySnapped: number
+}

node_modules/@vue-flow/core/dist/composables/useHandle.d.ts

@@ -0,0 +1,31 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { Connection, HandleType, MouseTouchEvent, ValidConnectionFunc } from '../types'
+
+export interface UseHandleProps {
+  handleId: MaybeRefOrGetter<string | null>
+  nodeId: MaybeRefOrGetter<string>
+  type: MaybeRefOrGetter<HandleType>
+  isValidConnection?: MaybeRefOrGetter<ValidConnectionFunc | null>
+  edgeUpdaterType?: MaybeRefOrGetter<HandleType>
+  onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
+  onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
+}
+/**
+ * This composable provides listeners for handle events
+ *
+ * Generally it's recommended to use the `<Handle />` component instead of this composable.
+ *
+ * @public
+ */
+export declare function useHandle({
+  handleId,
+  nodeId,
+  type,
+  isValidConnection,
+  edgeUpdaterType,
+  onEdgeUpdate,
+  onEdgeUpdateEnd,
+}: UseHandleProps): {
+  handlePointerDown: (event: MouseTouchEvent) => void
+  handleClick: (event: MouseEvent) => void
+}

node_modules/@vue-flow/core/dist/composables/useHandleConnections.d.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { HandleConnection, HandleType } from '../types'
+
+export interface UseHandleConnectionsParams {
+  type: MaybeRefOrGetter<HandleType>
+  id?: MaybeRefOrGetter<string | null>
+  nodeId?: MaybeRefOrGetter<string | null>
+  onConnect?: (connections: HandleConnection[]) => void
+  onDisconnect?: (connections: HandleConnection[]) => void
+}
+/**
+ * Composable that returns existing connections of a `<Handle />`.
+ *
+ * @deprecated use `useNodeConnections` instead
+ * @public
+ * @param params
+ * @param params.type - handle type `source` or `target`
+ * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
+ * @param params.id - the handle id (this is required if the node has multiple handles of the same type)
+ * @param params.onConnect - gets called when a connection is created
+ * @param params.onDisconnect - gets called when a connection is removed
+ *
+ * @returns An array of connections
+ */
+export declare function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef<HandleConnection[]>

node_modules/@vue-flow/core/dist/composables/useKeyPress.d.ts

@@ -0,0 +1,20 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { KeyFilter } from '@vueuse/core'
+
+export interface UseKeyPressOptions {
+  target?: MaybeRefOrGetter<EventTarget | null | undefined>
+  actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
+  preventDefault?: MaybeRefOrGetter<boolean>
+}
+export declare function isInputDOMNode(event: KeyboardEvent): boolean
+/**
+ * Composable that returns a boolean value if a key is pressed
+ *
+ * @public
+ * @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b'])
+ * @param options - Options object
+ */
+export declare function useKeyPress(
+  keyFilter: MaybeRefOrGetter<KeyFilter | boolean | null>,
+  options?: UseKeyPressOptions,
+): import('vue').ShallowRef<boolean>

node_modules/@vue-flow/core/dist/composables/useNode.d.ts

@@ -0,0 +1,22 @@
+import type { CustomEvent, ElementData } from '../types'
+
+/**
+ * Composable that provides access to a node object, parent node object, connected edges and it's dom element
+ *
+ * If no node id is provided, the node id is injected from context
+ *
+ * If you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw
+ *
+ * @public
+ * @param id - The id of the node to access
+ * @returns the node id, the node, the node dom element, it's parent and connected edges
+ */
+export declare function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
+  id?: string,
+): {
+  id: string
+  nodeEl: import('vue').Ref<HTMLDivElement | null>
+  node: import('../types').GraphNode<Data, CustomEvents, string>
+  parentNode: import('vue').ComputedRef<import('../types').GraphNode<any, any, string> | undefined>
+  connectedEdges: import('vue').ComputedRef<import('../types').GraphEdge[]>
+}

node_modules/@vue-flow/core/dist/composables/useNodeConnections.d.ts

@@ -0,0 +1,24 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { HandleType, NodeConnection } from '../types'
+
+export interface UseNodeConnectionsParams {
+  handleType?: MaybeRefOrGetter<HandleType | null | undefined>
+  handleId?: MaybeRefOrGetter<string | null | undefined>
+  nodeId?: MaybeRefOrGetter<string | null | undefined>
+  onConnect?: (connections: NodeConnection[]) => void
+  onDisconnect?: (connections: NodeConnection[]) => void
+}
+/**
+ * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
+ *
+ * @public
+ * @param params
+ * @param params.handleType - handle type `source` or `target`
+ * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
+ * @param params.handleId - the handle id (this is required if the node has multiple handles of the same type)
+ * @param params.onConnect - gets called when a connection is created
+ * @param params.onDisconnect - gets called when a connection is removed
+ *
+ * @returns An array of connections
+ */
+export declare function useNodeConnections(params?: UseNodeConnectionsParams): import('vue').ComputedRef<NodeConnection[]>

node_modules/@vue-flow/core/dist/composables/useNodeHooks.d.ts

@@ -0,0 +1,14 @@
+import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '../types'
+
+/**
+ * Composable for handling node events
+ *
+ * @internal
+ */
+export declare function useNodeHooks(
+  node: GraphNode,
+  emits: VueFlowStore['emits'],
+): {
+  emit: NodeEventsEmit
+  on: NodeEventsOn
+}

node_modules/@vue-flow/core/dist/composables/useNodeId.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This composable returns the current node id from the ctx.
+ *
+ * It should be used inside a (custom-)node components ctx as the id is provided by the internal `NodeWrapper` component.
+ *
+ * @public
+ * @returns the current node id
+ */
+export declare function useNodeId(): string

node_modules/@vue-flow/core/dist/composables/useNodesData.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { GraphNode, Node } from '../types'
+
+interface NodeData<NodeType extends Node = GraphNode> {
+  id: string
+  type: NodeType['type']
+  data: NonNullable<NodeType['data']>
+}
+/**
+ * Composable for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param nodeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns An array of data objects
+ */
+export declare function useNodesData<NodeType extends Node = GraphNode>(
+  nodeId: MaybeRefOrGetter<string>,
+): ComputedRef<NodeData<NodeType> | null>
+export declare function useNodesData<NodeType extends Node = GraphNode>(
+  nodeIds: MaybeRefOrGetter<string[]>,
+): ComputedRef<NodeData<NodeType>[]>
+export declare function useNodesData<NodeType extends Node = GraphNode>(
+  nodeIds: MaybeRefOrGetter<string[]>,
+  guard: (node: Node) => node is NodeType,
+): ComputedRef<NodeData<NodeType>[]>
+export {}

node_modules/@vue-flow/core/dist/composables/useNodesInitialized.d.ts

@@ -0,0 +1,15 @@
+export interface UseNodesInitializedOptions {
+  includeHiddenNodes?: boolean
+}
+/**
+ * Composable for getting the initialized state of all nodes.
+ *
+ * When a new node is added to the graph, it is not immediately initialized.
+ * That's because the node's bounds are not yet known.
+ * This composable will return false and then true when all nodes are initialized, i.e. when their bounds are known.
+ *
+ * @public
+ * @param options - Options
+ * @returns boolean indicating whether all nodes are initialized
+ */
+export declare function useNodesInitialized(options?: UseNodesInitializedOptions): import('vue').ComputedRef<boolean>

node_modules/@vue-flow/core/dist/composables/useOnInitHandler.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Composable that handles the initialization of the viewport.
+ *
+ * @internal
+ */
+export declare function useOnInitHandler(): void

node_modules/@vue-flow/core/dist/composables/useResizeHandler.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue'
+
+/**
+ * Composable that handles the resize of the viewport.
+ *
+ * @internal
+ * @param viewportEl
+ */
+export declare function useResizeHandler(viewportEl: Ref<HTMLDivElement | null>): void

node_modules/@vue-flow/core/dist/composables/useStylesLoadedWarning.d.ts

@@ -0,0 +1 @@
+export declare function useStylesLoadedWarning(): void

node_modules/@vue-flow/core/dist/composables/useUpdateNodePositions.d.ts

@@ -0,0 +1,8 @@
+import type { XYPosition } from '../types'
+
+/**
+ * Composable for updating the position of nodes.
+ *
+ * @internal
+ */
+export declare function useUpdateNodePositions(): (positionDiff: XYPosition, isShiftPressed?: boolean) => void

node_modules/@vue-flow/core/dist/composables/useViewport.d.ts

@@ -0,0 +1,8 @@
+import type { ComputedGetters, Project, State, ViewportFunctions } from '../types'
+
+export interface ViewportHelper extends ViewportFunctions {
+  viewportInitialized: boolean
+  screenToFlowCoordinate: Project
+  flowToScreenCoordinate: Project
+}
+export declare function useViewport(state: State, getters: ComputedGetters): import('vue').ComputedRef<ViewportHelper>

node_modules/@vue-flow/core/dist/composables/useViewportHelper.d.ts

@@ -0,0 +1,20 @@
+import type { D3Selection, Project, State, ViewportFunctions } from '../types'
+
+export interface ViewportHelper extends ViewportFunctions {
+  viewportInitialized: boolean
+  screenToFlowCoordinate: Project
+  flowToScreenCoordinate: Project
+}
+/**
+ * Composable that provides viewport helper functions.
+ *
+ * @internal
+ * @param state
+ */
+export declare function useViewportHelper(state: State): import('vue').ComputedRef<ViewportHelper>
+export declare function getD3Transition(
+  selection: D3Selection,
+  duration?: number,
+  ease?: (t: number) => number,
+  onEnd?: () => void,
+): D3Selection | import('d3-transition').Transition<HTMLDivElement, unknown, null, undefined>

node_modules/@vue-flow/core/dist/composables/useVueFlow.d.ts

@@ -0,0 +1,15 @@
+import type { FlowOptions, VueFlowStore } from '../types'
+
+/**
+ * Composable that provides access to a store instance
+ *
+ * If no id is provided, the store instance is injected from context
+ *
+ * If no store instance is found in context, a new store instance is created and registered in storage
+ *
+ * @public
+ * @returns a vue flow store instance
+ * @param idOrOpts - id of the store instance or options to create a new store instance
+ */
+export declare function useVueFlow(id?: string): VueFlowStore
+export declare function useVueFlow(options?: FlowOptions): VueFlowStore

node_modules/@vue-flow/core/dist/composables/useWatchProps.d.ts

@@ -0,0 +1,16 @@
+import type { ToRefs } from 'vue'
+import type { FlowProps, VueFlowStore } from '../types'
+
+/**
+ * Watches props and updates the store accordingly
+ *
+ * @internal
+ * @param models
+ * @param props
+ * @param store
+ */
+export declare function useWatchProps(
+  models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
+  props: FlowProps,
+  store: VueFlowStore,
+): () => void

node_modules/@vue-flow/core/dist/composables/useWindow.d.ts

@@ -0,0 +1,11 @@
+type UseWindow = Window &
+  typeof globalThis & {
+    chrome?: any
+  }
+/**
+ * Returns the window object
+ *
+ * @internal
+ */
+export declare function useWindow(): UseWindow
+export {}

node_modules/@vue-flow/core/dist/composables/useXYDrag.d.ts

@@ -0,0 +1,24 @@
+import type { Ref } from 'vue'
+
+interface UseDragParams {
+  nodeElement: Ref<HTMLDivElement>
+  disabled?: Ref<boolean>
+  noDragClassName?: Ref<string>
+  handleSelector?: Ref<string>
+  nodeId?: Ref<string>
+  isSelectable?: Ref<boolean>
+}
+/**
+ * Hook for calling XYDrag helper from @xyflow/system.
+ *
+ * @internal
+ */
+export declare function useDrag({
+  nodeElement,
+  disabled,
+  noDragClassName,
+  handleSelector,
+  nodeId,
+  isSelectable,
+}: UseDragParams): Ref<boolean>
+export {}

node_modules/@vue-flow/core/dist/composables/useZoomPanHelper.d.ts

@@ -0,0 +1,6 @@
+import type { ViewportFunctions } from '../types'
+
+/**
+ * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow})
+ */
+export declare function useZoomPanHelper(vueFlowId?: string): ViewportFunctions