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

refactor(flow!): Change transform to viewport

Browse Source 
* Change array type to object type and rename transform type to viewport
* Update examples & docs
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent 47f5a761a1
commit fcdbc21d34
29 changed files with 255 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/additional-components/Background/Background.vue
+4 -4
View File
@@ -21,10 +21,10 @@ const defaultColors: Record<BackgroundVariant, string> = {
const { store } = useVueFlow()
const background = computed(() => {
const scaledGap = props.gap && props.gap * store.transform[2]
const xOffset = scaledGap && store.transform[0] % scaledGap
const yOffset = scaledGap && store.transform[1] % scaledGap
const size = props.size || 0.4 * store.transform[2]
const scaledGap = props.gap && props.gap * store.viewport.zoom
const xOffset = scaledGap && store.viewport.x % scaledGap
const yOffset = scaledGap && store.viewport.y % scaledGap
const size = props.size || 0.4 * store.viewport.zoom
return {
scaledGap,
package/src/additional-components/MiniMap/MiniMap.vue
+6 -5
View File
@@ -28,16 +28,17 @@ const nodeColorFunc: MiniMapNodeFunc = props.nodeColor instanceof Function ? pro
const nodeStrokeColorFunc: MiniMapNodeFunc =
props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
const nodeClassNameFunc =
props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const bb = computed(() => getRectOfNodes(store.getNodes))
const viewBB = computed(() => ({
x: -store.transform[0] / store.transform[2],
y: -store.transform[1] / store.transform[2],
width: store.dimensions.width / store.transform[2],
height: store.dimensions.height / store.transform[2],
x: -store.viewport.x / store.viewport.zoom,
y: -store.viewport.y / store.viewport.zoom,
width: store.dimensions.width / store.viewport.zoom,
height: store.dimensions.height / store.viewport.zoom,
}))
const viewBox = computed(() => {
const boundingRect = store.getNodes && store.getNodes.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value