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

update(docs): fix view height

Browse Source
This commit is contained in:
Braks
2021-11-06 08:54:35 +01:00
parent 67876cdd1b
commit ae0772b6d4
42 changed files with 91 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/MiniMap/MiniMap.vue
+3 -3
View File
@@ -2,7 +2,7 @@
import { HTMLAttributes } from 'vue'
import { getBoundsofRects, getRectOfNodes } from '../../utils'
import { Node } from '../../types'
import { useStore } from '../../composables'
import { useStore, useWindow } from '../../composables'
import MiniMapNode from './MiniMapNode.vue'
type StringFunc = (node: Node) => string
@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
})
const attrs: any = useAttrs()
const window = useWindow()
const defaultWidth = 200
const defaultHeight = 150
@@ -41,8 +42,7 @@ const nodeStrokeColorFunc: StringFunc =
const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
const shapeRendering: ShapeRendering =
(window && typeof window === 'undefined') || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const viewBox = computed(() => {
const bb = getRectOfNodes(store.nodes)
src/auto-imports.d.ts
Vendored
+4
View File
@@ -17,8 +17,11 @@ declare global {
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const extendRef: typeof import('@vueuse/core')['extendRef']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
const inject: typeof import('vue')['inject']
@@ -39,6 +42,7 @@ declare global {
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
const onUnmounted: typeof import('vue')['onUnmounted']
src/composables/index.ts
+1 -1
View File
@@ -3,6 +3,6 @@ export { default as useHooks } from './useHooks'
export * from './useHooks'
export { default as useKeyPress } from './useKeyPress'
export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
export { default as useZoom } from './useZoom'
export { default as useZoomPanHelper } from './useZoomPanHelper'
export { default as useStore } from './useStore'
export { default as useWindow } from './useWindow'
src/composables/useKeyPress.ts
+5 -5
View File
@@ -1,9 +1,11 @@
import { Ref } from 'vue'
import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
import { KeyCode } from '../types'
import useWindow from './useWindow'
// todo cancel keypress for input dom nodes
export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
const window = useWindow()
const isPressed = controlledRef<boolean>(false, {
onBeforeChange(val, oldVal) {
if (val === oldVal) return false
@@ -37,11 +39,9 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
},
)
if (window && typeof window !== 'undefined') {
useEventListener(window, 'blur', () => {
isPressed.value = false
})
}
useEventListener(window, 'blur', () => {
isPressed.value = false
})
if (onChange && typeof onChange === 'function') onChange(isPressed.value)
src/composables/useWindow.ts
+6
View File
@@ -0,0 +1,6 @@
import { ssrWindow } from 'ssr-window'
export default (): Window & typeof globalThis & { chrome?: any } => {
if (typeof window !== 'undefined') return window
else return ssrWindow as any
}
src/composables/useZoom.ts
-174
View File
@@ -1,174 +0,0 @@
import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
import { pointer, select } from 'd3-selection'
import { Ref } from 'vue'
import { get } from '@vueuse/core'
import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '../types'
import { clamp } from '../utils'
import useKeyPress from './useKeyPress'
import useHooks from './useHooks'
import useStore from './useStore'
const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
x: eventTransform.x,
y: eventTransform.y,
zoom: eventTransform.k,
})
export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
const {
selectionKeyCode = 'Shift',
zoomActivationKeyCode = 'Meta',
defaultZoom = 1,
defaultPosition = [0, 0],
zoomOnScroll = true,
zoomOnPinch = true,
zoomOnDoubleClick = true,
panOnScroll = false,
panOnScrollSpeed = 0.5,
panOnScrollMode = PanOnScrollMode.Free,
paneMoveable = true,
} = options
const hooks = useHooks()
const store = useStore()
const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 })
const clampedX = clamp(defaultPosition[0], store.translateExtent[0][0], store.translateExtent[1][0])
const clampedY = clamp(defaultPosition[1], store.translateExtent[0][1], store.translateExtent[1][1])
const clampedZoom = clamp(defaultZoom, store.minZoom, store.maxZoom)
const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
biSyncRef(transform, prevTransform)
const d3Zoom = ref(
zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent),
)
const d3Selection = ref()
until(el)
.toBeTruthy()
.then(() => {
const d3z = get(d3Zoom)!
d3Selection.value = select(el.value).call(d3z)
const d3s = get(d3Selection)!
const d3ZoomHandler = d3s.on('wheel.zoom')
const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom)
d3z.transform(d3s, updatedTransform)
store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
const applyZoomHandlers = () => {
d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (viewChanged(prevTransform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
prevTransform.value = flowTransform
hooks.moveStart.trigger(flowTransform)
}
})
d3z.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (viewChanged(prevTransform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
prevTransform.value = flowTransform
hooks.moveEnd.trigger(flowTransform)
}
})
useKeyPress(selectionKeyCode, (keyPress) => {
if (keyPress) {
d3z.on('zoom', null)
} else {
d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
const flowTransform = eventToFlowTransform(event.transform)
prevTransform.value = flowTransform
hooks.move.trigger(flowTransform)
})
}
})
useKeyPress(zoomActivationKeyCode, (keyPress) => {
if (panOnScroll && keyPress) {
d3s
?.on('wheel', (event: WheelEvent) => {
event.preventDefault()
event.stopImmediatePropagation()
const currentZoom = d3s?.property('__zoom').k || 1
if (event.ctrlKey && 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 (d3s) d3z.scaleTo(d3s, zoom, point)
return
}
// increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
if (d3s && panOnScrollSpeed)
d3z?.translateBy(d3s, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
})
.on('wheel.zoom', null)
} else if (typeof d3ZoomHandler !== 'undefined') {
d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
}
})
}
const applyZoomFilter = () => {
const keyPress = useKeyPress(selectionKeyCode)
d3z.filter((event: MouseEvent) => {
const zoomScroll = zoomOnScroll
const pinchZoom = zoomOnPinch && event.ctrlKey
// if all interactions are disabled, we prevent all zoom events
if (!paneMoveable && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
// during a selection we prevent all other interactions
if (keyPress.value) return false
// if zoom on double click is disabled, we prevent the double click event
if (!zoomOnDoubleClick && event.type === 'dblclick') return false
if ((event.target as Element).closest('.nowheel') && event.type === 'wheel') return false
// when the target element is a node, we still allow zooming
if (
((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
event.type !== 'wheel'
)
return false
// when the target element is a node selection, we still allow zooming
if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
// when there is no scroll handling enabled, we prevent all wheel events
if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') return false
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
if (!paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) return false
// default filter for d3-zoom
return (!event.ctrlKey || event.type === 'wheel') && !event.button
})
}
applyZoomHandlers()
applyZoomFilter()
})
return { transform, d3Zoom, d3Selection }
}
src/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export { default } from './container/Flow/Flow.vue'
export { default as Flow } from './container/Flow/Flow.vue'
export { default as Handle } from './components/Handle/Handle.vue'
export { default as EdgeText } from './components/Edges/EdgeText.vue'
export { getBezierPath, getSmoothStepPath, getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'
src/plugin/nuxt.ts
View File
src/utils/graph.ts
+3
View File
@@ -13,6 +13,7 @@ import {
Dimensions,
FlowStore,
} from '../types'
import { useWindow } from '../composables'
export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
const target = e.target as HTMLElement
@@ -33,6 +34,8 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
export const getHostForElement = (element: HTMLElement): Document => {
const doc = element.getRootNode() as Document
const window = useWindow()
if ('getElementFromPoint' in doc) return doc
else return window.document
}