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

fix: warnings when NaN values are passed to svg transformations

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-15 12:44:09 +01:00
parent 3705a39fa8
commit 9c3eeef5eb
6 changed files with 62 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/MiniMap/MiniMap.vue
+24 -21
View File
@@ -44,15 +44,16 @@ const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeCl
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
const bb = computed(() => getRectOfNodes(nodes.value))
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],
}))
const viewBox = computed(() => {
const bb = getRectOfNodes(store.nodes)
const viewBB = {
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],
}
const boundingRect = store.nodes && store.nodes.length ? getBoundsofRects(bb, viewBB) : viewBB
const boundingRect = store.nodes && store.nodes.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
const scaledWidth = boundingRect.width / elementWidth
const scaledHeight = boundingRect.height / elementHeight
const viewScale = Math.max(scaledWidth, scaledHeight)
@@ -60,7 +61,6 @@ const viewBox = computed(() => {
const viewHeight = viewScale * elementHeight
const offset = 5 * viewScale
return {
viewBB,
offset,
x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
@@ -69,13 +69,25 @@ const viewBox = computed(() => {
}
})
const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
const d = computed(() => {
if (viewBox.value.x && viewBox.value.y)
return `
M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
h${viewBox.value.width + viewBox.value.offset * 2}
v${viewBox.value.height + viewBox.value.offset * 2}
h${-viewBox.value.width - viewBox.value.offset * 2}z
M${viewBB.value.x},${viewBB.value.y}
h${viewBB.value.width}
v${viewBB.value.height}
h${-viewBB.value.width}z`
else return ''
})
</script>
<template>
<svg
:width="elementWidth"
:height="elementHeight"
:viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
:viewBox="`${viewBox.x || 0} ${viewBox.y || 0} ${viewBox.width || 0} ${viewBox.height || 0}`"
class="vue-flow__minimap"
>
<slot name="mini-map-nodes" :nodes="nodes" :view-box="viewBox">
@@ -95,15 +107,6 @@ const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
/>
</template>
</slot>
<path
class="vue-flow__minimap-mask"
:d="`
M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
v${viewBox.height + viewBox.offset * 2}
h${-viewBox.width - viewBox.offset * 2}z
M${viewBox.viewBB.x},${viewBox.viewBB.y}h${viewBox.viewBB.width}v${viewBox.viewBB.height}h${-viewBox.viewBB.width}z`"
:fill="props.maskColor"
fill-rule="evenodd"
/>
<path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
</svg>
</template>