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

fix: update zoom and drag

Browse Source
This commit is contained in:
Qiuxia Fan 2022-02-09 20:47:01 +08:00
parent abbf0fe4f5
commit 048572c481
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/dashboard/related/topology/Graph.vue
View File

@ -77,6 +77,7 @@ onMounted(async () => {
node.value = graph.value.append("g").selectAll(".topo-node");
link.value = graph.value.append("g").selectAll(".topo-line");
anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
svg.value.call(zoom(d3, graph.value));
// tools.value = tool(graph.value, [
// { icon: "API", click: handleGoEndpoint },
// { icon: "INSTANCE", click: handleGoInstance },
@ -133,19 +134,19 @@ function dragstart(d: any) {
g.__data__.fx = g.__data__.x;
g.__data__.fy = g.__data__.y;
});
if (!(d3 as any).event.active) {
if (!d.active) {
simulation.value.alphaTarget(0.1).restart();
}
(d3 as any).event.sourceEvent.stopPropagation();
d.subject.fx = d.subject.x;
d.subject.fy = d.subject.y;
d.sourceEvent.stopPropagation();
}
function dragged(d: any) {
d.fx = (d3 as any).event.x;
d.fy = (d3 as any).event.y;
d.x = d.fx;
d.y = d.fy;
d.subject.fx = d.x;
d.subject.fy = d.y;
}
function dragended() {
if (!(d3 as any).event.active) {
function dragended(d: any) {
if (!d.active) {
simulation.value.alphaTarget(0);
}
}

12
src/views/dashboard/related/topology/utils/zoom.ts
View File

@ -14,13 +14,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default (d3: any, graph: any) =>
d3
.zoom()
.scaleExtent([0.3, 10])
.on("zoom", () => {
graph.attr(
"transform",
`translate(${d3.event.transform.x},${d3.event.transform.y})scale(${d3.event.transform.k})`
);
.on("zoom", (d: any) => {
graph
.attr("transform", d3.zoomTransform(graph.node()))
.attr(
`translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
);
});