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/container/RevueFlow/index.tsx
+16 -1
View File
@@ -1,4 +1,14 @@
import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, PropType, provide, watchEffect } from 'vue';
import {
computed,
CSSProperties,
defineComponent,
HTMLAttributes,
onBeforeUnmount,
onUpdated,
PropType,
provide,
watchEffect
} from 'vue';
import GraphView from '../GraphView';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
@@ -547,6 +557,11 @@ const RevueFlow = defineComponent({
props.onSelectionChange?.(store.selectedElements);
});
onUpdated(() => {
store.setElements(props.elements);
props.onSelectionChange?.(store.selectedElements);
});
onBeforeUnmount(() => {
store.$reset();
store.setElements([]);
src/container/ZoomPane/index.tsx
+36 -37
View File
@@ -2,9 +2,8 @@ import { zoom, zoomIdentity } from 'd3-zoom';
import { select, pointer } from 'd3-selection';
import { clamp } from '../../utils';
import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
import { defineComponent, PropType, ref, watch, watchEffect } from 'vue';
import store from '../../store';
import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode, RevueFlowStore } from '../../types';
import { defineComponent, inject, PropType, ref, watchEffect } from 'vue';
import useKeyPress from '../../hooks/useKeyPress';
import useResizeHandler from '../../hooks/useResizeHandler';
@@ -39,19 +38,19 @@ const eventToFlowTransform = (eventTransform: any): FlowTransform => ({
const ZoomPane = defineComponent({
props: {
onMove: {
type: Function() as PropType<ZoomPaneProps['onMove']>,
type: Function as unknown as PropType<ZoomPaneProps['onMove']>,
required: false,
default: undefined as any
default: () => {}
},
onMoveStart: {
type: Function() as PropType<ZoomPaneProps['onMoveStart']>,
type: Function as unknown as PropType<ZoomPaneProps['onMoveStart']>,
required: false,
default: undefined as any
default: () => {}
},
onMoveEnd: {
type: Function() as PropType<ZoomPaneProps['onMoveEnd']>,
type: Function as unknown as PropType<ZoomPaneProps['onMoveEnd']>,
required: false,
default: undefined as any
default: () => {}
},
zoomOnScroll: {
type: Boolean as PropType<ZoomPaneProps['zoomOnScroll']>,
@@ -120,30 +119,30 @@ const ZoomPane = defineComponent({
}
},
setup(props, { slots }) {
const pinia = store();
const store = inject<RevueFlowStore>('store')!;
const zoomPane = ref<HTMLDivElement | null>(null);
const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 });
const zoomActivationKeyPressed = useKeyPress(props.zoomActivationKeyCode);
watch(zoomPane, () => {
if (zoomPane.value) useResizeHandler(zoomPane.value);
watchEffect(() => {
if (zoomPane.value) useResizeHandler(zoomPane.value, store.updateSize);
});
watchEffect(() => {
if (zoomPane.value && props.defaultPosition && props.defaultZoom) {
const currentTranslateExtent =
typeof props.translateExtent !== 'undefined' ? props.translateExtent : pinia.translateExtent;
const d3ZoomInstance = zoom().scaleExtent([pinia.minZoom, pinia.maxZoom]).translateExtent(currentTranslateExtent);
typeof props.translateExtent !== 'undefined' ? props.translateExtent : store.translateExtent;
const d3ZoomInstance = zoom().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(currentTranslateExtent);
const selection = select(zoomPane.value as Element).call(d3ZoomInstance);
const clampedX = clamp(props.defaultPosition[0], currentTranslateExtent[0][0], currentTranslateExtent[1][0]);
const clampedY = clamp(props.defaultPosition[1], currentTranslateExtent[0][1], currentTranslateExtent[1][1]);
const clampedZoom = clamp(props.defaultZoom, pinia.minZoom, pinia.maxZoom);
const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom);
const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
d3ZoomInstance.transform(selection, updatedTransform);
pinia.initD3Zoom({
store.initD3Zoom({
d3Zoom: d3ZoomInstance,
d3Selection: selection,
d3ZoomHandler: selection.on('wheel.zoom'),
@@ -154,21 +153,21 @@ const ZoomPane = defineComponent({
});
watchEffect(() => {
if (pinia.d3Selection && pinia.d3Zoom) {
if (store.d3Selection && store.d3Zoom) {
if (props.panOnScroll && zoomActivationKeyPressed) {
pinia.d3Selection
store.d3Selection
.on('wheel', (event: any) => {
event.preventDefault();
event.stopImmediatePropagation();
const currentZoom = pinia.d3Selection?.property('__zoom').k || 1;
const currentZoom = store.d3Selection?.property('__zoom').k || 1;
if (event.ctrlKey && props.zoomOnPinch) {
const point = pointer(event);
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
const zoom = currentZoom * Math.pow(2, pinchDelta);
if (pinia.d3Selection) pinia.d3Zoom?.scaleTo(pinia.d3Selection, zoom, point);
if (store.d3Selection) store.d3Zoom?.scaleTo(store.d3Selection, zoom, point);
return;
}
@@ -179,27 +178,27 @@ const ZoomPane = defineComponent({
const deltaX = props.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
const deltaY = props.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
if (pinia.d3Selection && props.panOnScrollSpeed)
pinia.d3Zoom?.translateBy(
pinia.d3Selection,
if (store.d3Selection && props.panOnScrollSpeed)
store.d3Zoom?.translateBy(
store.d3Selection,
-(deltaX / currentZoom) * props.panOnScrollSpeed,
-(deltaY / currentZoom) * props.panOnScrollSpeed
);
})
.on('wheel.zoom', null);
} else if (typeof pinia.d3ZoomHandler !== 'undefined') {
pinia.d3Selection.on('wheel', null).on('wheel.zoom', pinia.d3ZoomHandler);
} else if (typeof store.d3ZoomHandler !== 'undefined') {
store.d3Selection.on('wheel', null).on('wheel.zoom', store.d3ZoomHandler);
}
}
});
watchEffect(() => {
if (pinia.d3Zoom) {
if (store.d3Zoom) {
if (props.selectionKeyPressed) {
pinia.d3Zoom.on('zoom', null);
store.d3Zoom.on('zoom', null);
} else {
pinia.d3Zoom.on('zoom', (event: any) => {
pinia.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
store.d3Zoom.on('zoom', (event: any) => {
store.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
if (props.onMove) {
const flowTransform = eventToFlowTransform(event.transform);
@@ -211,9 +210,9 @@ const ZoomPane = defineComponent({
});
watchEffect(() => {
if (pinia.d3Zoom) {
if (store.d3Zoom) {
if (props.onMoveStart) {
pinia.d3Zoom.on('start', (event: any) => {
store.d3Zoom.on('start', (event: any) => {
if (viewChanged(prevTransform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform);
prevTransform.value = flowTransform;
@@ -222,15 +221,15 @@ const ZoomPane = defineComponent({
}
});
} else {
pinia.d3Zoom.on('start', null);
store.d3Zoom.on('start', null);
}
}
});
watchEffect(() => {
if (pinia.d3Zoom) {
if (store.d3Zoom) {
if (props.onMoveEnd) {
pinia.d3Zoom.on('end', (event: any) => {
store.d3Zoom.on('end', (event: any) => {
if (viewChanged(prevTransform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform);
prevTransform.value = flowTransform;
@@ -239,14 +238,14 @@ const ZoomPane = defineComponent({
}
});
} else {
pinia.d3Zoom.on('end', null);
store.d3Zoom.on('end', null);
}
}
});
watchEffect(() => {
if (pinia.d3Zoom) {
pinia.d3Zoom.filter((event: any) => {
if (store.d3Zoom) {
store.d3Zoom.filter((event: any) => {
const zoomScroll = props.zoomOnScroll;
const pinchZoom = props.zoomOnPinch && event.ctrlKey;