refactor(store)!: remove pinia

* replace pinia with a reactive state object and inject/provide

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

update(store)!: inject store if possible, otherwise create a new one by id

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/utils/edge.ts

@@ -15,8 +15,8 @@ import {
 export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition {
   const x = (handle?.x ?? 0) + node.position.x
   const y = (handle?.y ?? 0) + node.position.y
-  const width = handle?.width || node.__vf.width
-  const height = handle?.height || node.__vf.height
+  const width = handle?.width ?? node.__vf.width
+  const height = handle?.height ?? node.__vf.height
 
   switch (position) {
     case Position.Top:
@@ -48,7 +48,7 @@ export function getHandle(bounds: HandleElement[], handleId?: ElementId): Handle
   // there is no handleId when there are no multiple handles/ handles with ids
   // so we just pick the first one
   let handle
-  if (bounds.length === 1 || !handleId) {
+  if (bounds.length === 1 ?? !handleId) {
     handle = bounds[0]
   } else if (handleId) {
     handle = bounds.find((d) => d.id === handleId)

src/utils/graph.ts

@@ -16,6 +16,8 @@ import {
   FlowElements,
   GraphEdge,
   NextElements,
+  ReactiveFlowStore,
+  FlowState,
 } from '~/types'
 import { useWindow } from '~/composables'
 import { getSourceTargetNodes } from '~/utils/edge'
@@ -161,7 +163,7 @@ export const pointToRendererPoint = (
   return position
 }
 
-export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) =>
+export const onLoadProject = (currentStore: ReactiveFlowStore) => (position: XYPosition) =>
   pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
 
 export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({
@@ -276,9 +278,9 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-export const onLoadGetElements = (currentStore: FlowStore) => (): FlowElements => currentStore.elements
+export const onLoadGetElements = (currentStore: ReactiveFlowStore) => (): FlowElements => currentStore.elements
 
-export const onLoadToObject = (currentStore: FlowStore) => (): FlowExportObject => {
+export const onLoadToObject = (currentStore: FlowState) => (): FlowExportObject => {
   // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
   return JSON.parse(
     JSON.stringify({

src/utils/store.ts

@@ -16,6 +16,8 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
 }
 
 export const initialState = (): FlowState => ({
+  isReady: false,
+  instance: undefined,
   dimensions: {
     width: 0,
     height: 0,
@@ -50,6 +52,9 @@ export const initialState = (): FlowState => ({
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
+  onlyRenderVisibleElements: undefined,
+  defaultZoom: undefined,
+  defaultPosition: undefined,
 
   nodesSelectionActive: false,
   selectionActive: false,
@@ -65,6 +70,8 @@ export const initialState = (): FlowState => ({
   },
 
   arrowHeadColor: '#b1b1b7',
+  connectionLineStyle: {},
+  connectionLineType: undefined,
   connectionNodeId: undefined,
   connectionHandleId: undefined,
   connectionHandleType: 'source',
@@ -78,12 +85,18 @@ export const initialState = (): FlowState => ({
   nodesDraggable: true,
   nodesConnectable: true,
   elementsSelectable: true,
-
+  selectNodesOnDrag: undefined,
   multiSelectionActive: false,
+  deleteKeyCode: undefined,
+  selectionKeyCode: undefined,
+  multiSelectionKeyCode: undefined,
+  zoomActivationKeyCode: undefined,
 
-  isReady: false,
   hooks: createHooks(),
   loading: false,
 
+  markerEndId: undefined,
+  storageKey: undefined,
+
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })