From abb302cb030cb4cba728685dd9e12c7ad35fb667 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 11 May 2023 13:48:05 +0200 Subject: [PATCH] feat(core): add `fromObject` action to load graph Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/core/src/store/actions.ts | 95 ++++++++++++++++++++---------- packages/core/src/types/store.ts | 2 + 2 files changed, 67 insertions(+), 30 deletions(-) diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index acf35aa8..1ec52dfb 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -756,6 +756,45 @@ export function useActions( } } + const fitView: Actions['fitView'] = async (params = { padding: 0.1 }) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.fitView(params) + } + + const zoomIn: Actions['zoomIn'] = async (options) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.zoomIn(options) + } + + const zoomOut: Actions['zoomOut'] = async (options) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.zoomOut(options) + } + + const zoomTo: Actions['zoomTo'] = async (zoomLevel, options) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.zoomTo(zoomLevel, options) + } + + const setTransform: Actions['setTransform'] = async (transform, options) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.setTransform(transform, options) + } + + const getTransform: Actions['getTransform'] = () => viewportHelper.getTransform() + + const setCenter: Actions['setCenter'] = async (x, y, options) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.setCenter(x, y, options) + } + + const fitBounds: Actions['fitBounds'] = async (bounds, options) => { + await until(() => viewportHelper.initialized).toBe(true) + viewportHelper.fitBounds(bounds, options) + } + + const project: Actions['project'] = (position) => viewportHelper.project(position) + const toObject: Actions['toObject'] = () => { // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage return JSON.parse( @@ -788,6 +827,22 @@ export function useActions( ) } + const fromObject: Actions['fromObject'] = (obj) => { + const { nodes, edges, position, zoom } = obj + + if (nodes) { + setNodes(nodes) + } + + if (edges) { + setEdges(edges) + } + + if (position) { + setTransform({ x: position[0], y: position[1], zoom: zoom || 1 }) + } + } + return { updateNodePositions, updateNodeDimensions, @@ -821,37 +876,17 @@ export function useActions( getIntersectingNodes, isNodeIntersecting, panBy, - fitView: async (params = { padding: 0.1 }) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.fitView(params) - }, - zoomIn: async (options) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.zoomIn(options) - }, - zoomOut: async (options) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.zoomOut(options) - }, - zoomTo: async (zoomLevel, options) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.zoomTo(zoomLevel, options) - }, - setTransform: async (transform, options) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.setTransform(transform, options) - }, - getTransform: () => viewportHelper.getTransform(), - setCenter: async (x, y, options) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.setCenter(x, y, options) - }, - fitBounds: async (bounds, options) => { - await until(() => viewportHelper.initialized).toBe(true) - viewportHelper.fitBounds(bounds, options) - }, - project: (position) => viewportHelper.project(position), + fitView, + zoomIn, + zoomOut, + zoomTo, + setTransform, + getTransform, + setCenter, + fitBounds, + project, toObject, + fromObject, updateNodeInternals, $reset: () => { const resetState = useState() diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index 4b296b95..20c1c980 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -249,6 +249,8 @@ export interface Actions extends ViewportFunctions { setState: SetState /** return an object of graph values (elements, viewport transform) for storage and re-loading a graph */ toObject: () => FlowExportObject + /** load graph from export obj */ + fromObject: (obj: FlowExportObject) => void /** force update node internal data, if handle bounds are incorrect, you might want to use this */ updateNodeInternals: UpdateNodeInternals /** start a connection */