github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-04 23:35:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: zoom

Browse Source
This commit is contained in:
Fine 2023-03-21 12:07:15 +08:00
parent a00eaf2934
commit 25d91d9acd
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -21,7 +21,7 @@ limitations under the License. -->
:style="`height: ${height}px`" :style="`height: ${height}px`"
> >
<svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent"> <svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
<g class="graph" :style="`transform: translate(${diff[0]}px, ${diff[1]}px)`"> <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g <g
class="topo-node" class="topo-node"
v-for="(n, index) in topologyLayout.nodes" v-for="(n, index) in topologyLayout.nodes"
@ -192,8 +192,7 @@ limitations under the License. -->
height.value = dom.height - 40; height.value = dom.height - 40;
width.value = dom.width; width.value = dom.width;
svg.value = d3.select(".svg-topology"); svg.value = d3.select(".svg-topology");
graph.value = d3.select(".graph"); graph.value = d3.select(".svg-graph");
svg.value.call(zoom(d3, graph.value, diff.value));
loading.value = true; loading.value = true;
const json = await selectorStore.fetchServices(dashboardStore.layerId); const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) { if (json.errors) {
@ -201,6 +200,7 @@ limitations under the License. -->
return; return;
} }
await freshNodes(); await freshNodes();
svg.value.call(zoom(d3, graph.value, diff.value));
} }
async function freshNodes() { async function freshNodes() {
topologyStore.setNode(null); topologyStore.setNode(null);
@ -475,7 +475,9 @@ limitations under the License. -->
if (resp && resp.errors) { if (resp && resp.errors) {
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
} }
update(); await update();
topologyStore.setNode(null);
topologyStore.setLink(null);
} }
function handleGoEndpoint(name: string) { function handleGoEndpoint(name: string) {
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`; const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`;