SvelteFlowStore

SvelteFlowStore 類型是內部 Svelte Flow Store 的結構，您可以透過 useStore hook 存取。

內部的 Svelte Flow store 應該只用於進階使用案例。不建議直接使用。

export type SvelteFlowStore = {
  flowId: Writable<string | null>;
  nodes: NodesStore;
  nodeLookup: Readable<NodeLookup>;
  edgeLookup: Readable<EdgeLookup>;
  visibleNodes: Readable<Node[]>;
  edges: EdgesStore;
  visibleEdges: Readable<EdgeLayouted[]>;
  connectionLookup: Readable<ConnectionLookup>;
  height: Writable<number>;
  width: Writable<number>;
  minZoom: Writable<number>;
  maxZoom: Writable<number>;
  nodeOrigin: Writable<NodeOrigin>;
  nodeDragThreshold: Writable<number>;
  nodeExtent: Writable<CoordinateExtent>;
  translateExtent: Writable<CoordinateExtent>;
  autoPanOnNodeDrag: Writable<boolean>;
  autoPanOnConnect: Writable<boolean>;
  fitViewOnInit: Writable<boolean>;
  fitViewOnInitDone: Writable<boolean>;
  fitViewOptions: Writable<FitViewOptions>;
  panZoom: Writable<PanZoomInstance | null>;
  snapGrid: Writable<SnapGrid | null>;
  dragging: Writable<boolean>;
  selectionRect: Writable<SelectionRect | null>;
  selectionKeyPressed: Writable<boolean>;
  multiselectionKeyPressed: Writable<boolean>;
  deleteKeyPressed: Writable<boolean>;
  panActivationKeyPressed: Writable<boolean>;
  zoomActivationKeyPressed: Writable<boolean>;
  selectionRectMode: Writable<string | null>;
  selectionMode: Writable<SelectionMode>;
  nodeTypes: Writable<NodeTypes>;
  edgeTypes: Writable<EdgeTypes>;
  viewport: Writable<Viewport>;
  connectionMode: Writable<ConnectionMode>;
  domNode: Writable<HTMLDivElement | null>;
  connection: Readable<ConnectionProps>;
  connectionLineType: Writable<ConnectionLineType>;
  connectionRadius: Writable<number>;
  isValidConnection: Writable<IsValidConnection>;
  nodesDraggable: Writable<boolean>;
  nodesConnectable: Writable<boolean>;
  elementsSelectable: Writable<boolean>;
  selectNodesOnDrag: Writable<boolean>;
  markers: Readable<MarkerProps[]>;
  defaultMarkerColor: Writable<string>;
  lib: Readable<string>;
  onlyRenderVisibleElements: Writable<boolean>;
  onerror: Writable<OnError>;
  ondelete: Writable<OnDelete>;
  onedgecreate: Writable<OnEdgeCreate>;
  onconnect: Writable<OnConnect>;
  onconnectstart: Writable<OnConnectStart>;
  onconnectend: Writable<OnConnectEnd>;
  onbeforedelete: Writable<OnBeforeDelete>;
 
  setNodeTypes: (nodeTypes: NodeTypes) => void;
  setEdgeTypes: (edgeTypes: EdgeTypes) => void;
  addEdge: (edge: Edge | Connection) => void;
  zoomIn: (options?: ViewportHelperFunctionOptions) => void;
  zoomOut: (options?: ViewportHelperFunctionOptions) => void;
  setMinZoom: (minZoom: number) => void;
  setMaxZoom: (maxZoom: number) => void;
  setTranslateExtent: (extent: CoordinateExtent) => void;
  fitView: (options?: FitViewOptions) => boolean;
  updateNodePositions: UpdateNodePositions;
  updateNodeDimensions: (updates: Map<string, NodeDimensionUpdate>) => void;
  unselectNodesAndEdges: (params?: { nodes?: Node[]; edges?: Edge[] }) => void;
  addSelectedNodes: (ids: string[]) => void;
  addSelectedEdges: (ids: string[]) => void;
  handleNodeSelection: (id: string) => void;
  panBy: (delta: XYPosition) => boolean;
  updateConnection: UpdateConnection;
  cancelConnection: () => void;
  reset(): void;
};

欄位

名稱	類型
#`flowId`	`可寫入<string \| null>`
#`nodes`	`NodesStore`
#`nodeLookup`	`可讀取<NodeLookup>`
#`edgeLookup`	`可讀取<EdgeLookup>`
#`visibleNodes`	`可讀取<Node[]>`
#`edges`	`EdgesStore`
#`visibleEdges`	`可讀取<EdgeLayouted[]>`
#`connectionLookup`	`可讀取<ConnectionLookup>`
#`height`	`可寫入<number>`
#`width`	`可寫入<number>`
#`minZoom`	`可寫入<number>`
#`maxZoom`	`可寫入<number>`
#`nodeOrigin`	`可寫入<NodeOrigin>`
#`nodeDragThreshold`	`可寫入<number>`
#`nodeExtent`	`可寫入<CoordinateExtent>`
#`translateExtent`	`可寫入<CoordinateExtent>`
#`autoPanOnNodeDrag`	`可寫入<boolean>`
#`autoPanOnConnect`	`可寫入<boolean>`
#`fitViewOnInit`	`可寫入<boolean>`
#`fitViewOnInitDone`	`可寫入<boolean>`
#`fitViewOptions`	`可寫入<FitViewOptions>`
#`panZoom`	`可寫入<PanZoomInstance \| null>`
#`snapGrid`	`可寫入<SnapGrid \| null>`
#`dragging`	`可寫入<boolean>`
#`selectionRect`	`可寫入<SelectionRect \| null>`
#`selectionKeyPressed`	`可寫入<boolean>`
#`multiselectionKeyPressed`	`可寫入<boolean>`
#`deleteKeyPressed`	`可寫入<boolean>`
#`panActivationKeyPressed`	`可寫入<boolean>`
#`zoomActivationKeyPressed`	`可寫入<boolean>`
#`selectionRectMode`	`可寫入<string \| null>`
#`selectionMode`	`可寫入<選取模式>`
#`nodeTypes`	`可寫入<節點類型>`
#`edgeTypes`	`可寫入<邊緣類型>`
#`viewport`	`可寫入<Viewport>`
#`connectionMode`	`可寫入<連線模式>`
#`domNode`	`可寫入<HTMLDivElement \| null>`
#`connection`	`可讀取<連線屬性>`
#`connectionLineType`	`可寫入<ConnectionLineType>`
#`connectionRadius`	`可寫入<number>`
#`isValidConnection`	`可寫入<有效的連線>`
#`nodesDraggable`	`可寫入<boolean>`
#`nodesConnectable`	`可寫入<boolean>`
#`elementsSelectable`	`可寫入<boolean>`
#`selectNodesOnDrag`	`可寫入<boolean>`
#`markers`	`可讀取<標記屬性[]>`
#`defaultMarkerColor`	`可寫入<string>`
#`lib`	`可讀取<string>`
#`onlyRenderVisibleElements`	`可寫入<boolean>`
#`onerror`	`可寫入<發生錯誤時>`
#`ondelete`	`可寫入<刪除時>`
#`onedgecreate`	`可寫入<建立邊緣時>`
#`onconnect`	`可寫入<連線時>`
#`onconnectstart`	`可寫入<開始連線時>`
#`onconnectend`	`可寫入<結束連線時>`
#`onbeforedelete`	`可寫入<刪除前>`
#`setNodeTypes`	`可寫入<(節點類型: 節點類型) => void>`
#`setEdgeTypes`	`可寫入<(邊緣類型: 邊緣類型) => void>`
#`addEdge`	`可寫入<(邊緣: Edge \| Connection) => void>`
#`zoomIn`	`可寫入<(選項?: ViewportHelperFunctionOptions) => void>`
#`zoomOut`	`可寫入<(選項?: ViewportHelperFunctionOptions) => void>`
#`setMinZoom`	`可寫入<(最小縮放: number) => void>`
#`setMaxZoom`	`可寫入<(最大縮放: number) => void>`
#`setTranslateExtent`	`可寫入<(範圍: CoordinateExtent) => void>`
#`fitView`	`可寫入<(選項?: FitViewOptions) => boolean>`
#`updateNodePositions`	`可寫入<更新節點位置>`
#`updateNodeDimensions`	`可寫入<(更新: Map<string, 節點尺寸更新>) => void>`
#`unselectNodesAndEdges`	`可寫入<(參數?: { 節點?: Node[]; 邊緣?: Edge[] }) => void>`
#`addSelectedNodes`	`可寫入<(ID: string[]) => void>`
#`addSelectedEdges`	`可寫入<(ID: string[]) => void>`
#`handleNodeSelection`	`可寫入<(id: string) => void>`
#`panBy`	`可寫入<(delta: XYPosition) => boolean>`
#`updateConnection`	`可寫入<UpdateConnection>`
#`cancelConnection`	`可寫入<() => void>`
#`reset`	`可寫入<() => void>`

類型