feat: resize

This commit is contained in:
Fine 2023-03-20 20:36:05 +08:00
parent d0a46730c3
commit 1591a35cb3

View File

@ -21,6 +21,7 @@ limitations under the License. -->
:style="`height: ${height}px`" :style="`height: ${height}px`"
> >
<svg ref="svg" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent"> <svg ref="svg" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
<g :style="`transform: translate(${(width - graphWidth - 100) / 2}px, 100px)`">
<g <g
v-for="(n, index) in topologyLayout.nodes" v-for="(n, index) in topologyLayout.nodes"
:key="index" :key="index"
@ -77,6 +78,7 @@ limitations under the License. -->
</marker> </marker>
</defs> </defs>
</g> </g>
</g>
<circle class="node" r="10" stroke-width="4" stroke="#ed374d" :cx="34" :cy="65" fill="none" /> <circle class="node" r="10" stroke-width="4" stroke="#ed374d" :cx="34" :cy="65" fill="none" />
<circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" /> <circle class="node" r="10" stroke-width="4" stroke="#72c59f" fill="none" :cx="35" :cy="25" />
</svg> </svg>
@ -170,6 +172,7 @@ limitations under the License. -->
const depth = ref<number>(graphConfig.value.depth || 2); const depth = ref<number>(graphConfig.value.depth || 2);
const topologyLayout = ref<any>({}); const topologyLayout = ref<any>({});
const tooltip = ref<Nullable<any>>(null); const tooltip = ref<Nullable<any>>(null);
const graphWidth = ref<number>(100);
onMounted(async () => { onMounted(async () => {
await nextTick(); await nextTick();
@ -190,6 +193,7 @@ limitations under the License. -->
return; return;
} }
freshNodes(); freshNodes();
window.addEventListener("resize", resize);
} }
async function freshNodes() { async function freshNodes() {
topologyStore.setNode(null); topologyStore.setNode(null);
@ -250,6 +254,7 @@ limitations under the License. -->
} }
} }
topologyLayout.value = layout(levels, topologyStore.calls); topologyLayout.value = layout(levels, topologyStore.calls);
graphWidth.value = topologyLayout.value.layout.width;
} }
function findMostFrequent(arr: Call[]) { function findMostFrequent(arr: Call[]) {