alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: inject store instance components

Browse Source 
chore: update revue-draggable to next tag
This commit is contained in:
Braks
2021-07-20 20:01:10 +02:00
parent 8cfbc89d23
commit b4fcab4004
15 changed files with 152 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useZoomPanHelper.ts
+15 -15
View File
@@ -1,7 +1,7 @@
import { zoomIdentity } from 'd3-zoom';
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition } from '../types';
import store from '../store';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition, RevueFlowStore } from '../types';
import { inject } from 'vue';
const DEFAULT_PADDING = 0.1;
@@ -18,20 +18,20 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = {
};
const useZoomPanHelper = (): ZoomPanHelperFunctions => {
const pinia = store();
const store = inject<RevueFlowStore>('store')!;
const zoomPanHelperFunctions = () => {
if (pinia.d3Selection && pinia.d3Zoom) {
if (store.d3Selection && store.d3Zoom) {
return {
zoomIn: () => pinia.d3Zoom?.scaleBy(pinia.d3Selection as any, 1.2),
zoomOut: () => pinia.d3Zoom?.scaleBy(pinia.d3Selection as any, 1 / 1.2),
zoomTo: (zoomLevel: number) => pinia.d3Zoom?.scaleTo(pinia.d3Selection as any, zoomLevel),
zoomIn: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1.2),
zoomOut: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1 / 1.2),
zoomTo: (zoomLevel: number) => store.d3Zoom?.scaleTo(store.d3Selection as any, zoomLevel),
transform: (transform: FlowTransform) => {
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
pinia.d3Zoom?.transform(pinia.d3Selection as any, nextTransform);
store.d3Zoom?.transform(store.d3Selection as any, nextTransform);
},
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
const { nodes, width, height, minZoom, maxZoom } = pinia;
const { nodes, width, height, minZoom, maxZoom } = store;
if (!nodes.length) {
return;
@@ -48,27 +48,27 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
);
const transform = zoomIdentity.translate(x, y).scale(zoom);
pinia.d3Zoom?.transform(pinia.d3Selection as any, transform);
store.d3Zoom?.transform(store.d3Selection as any, transform);
},
setCenter: (x: number, y: number, zoom?: number) => {
const { width, height, maxZoom } = pinia;
const { width, height, maxZoom } = store;
const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
const centerX = width / 2 - x * nextZoom;
const centerY = height / 2 - y * nextZoom;
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
pinia.d3Zoom?.transform(pinia.d3Selection as any, transform);
store.d3Zoom?.transform(store.d3Selection as any, transform);
},
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
const { width, height, minZoom, maxZoom } = pinia;
const { width, height, minZoom, maxZoom } = store;
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
const transform = zoomIdentity.translate(x, y).scale(zoom);
pinia.d3Zoom?.transform(pinia.d3Selection as any, transform);
store.d3Zoom?.transform(store.d3Selection as any, transform);
},
project: (position: XYPosition) => {
const { transform, snapToGrid, snapGrid } = pinia;
const { transform, snapToGrid, snapGrid } = store;
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
},
initialized: true