github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 23:45: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"); node.value = graph.value.append("g").selectAll(".topo-node");
link.value = graph.value.append("g").selectAll(".topo-line"); link.value = graph.value.append("g").selectAll(".topo-line");
anchor.value = graph.value.append("g").selectAll(".topo-line-anchor"); anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
svg.value.call(zoom(d3, graph.value));
// tools.value = tool(graph.value, [ // tools.value = tool(graph.value, [
// { icon: "API", click: handleGoEndpoint }, // { icon: "API", click: handleGoEndpoint },
// { icon: "INSTANCE", click: handleGoInstance }, // { icon: "INSTANCE", click: handleGoInstance },
@ -133,19 +134,19 @@ function dragstart(d: any) {
g.__data__.fx = g.__data__.x; g.__data__.fx = g.__data__.x;
g.__data__.fy = g.__data__.y; g.__data__.fy = g.__data__.y;
}); });
if (!(d3 as any).event.active) { if (!d.active) {
simulation.value.alphaTarget(0.1).restart(); 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) { function dragged(d: any) {
d.fx = (d3 as any).event.x; d.subject.fx = d.x;
d.fy = (d3 as any).event.y; d.subject.fy = d.y;
d.x = d.fx;
d.y = d.fy;
} }
function dragended() { function dragended(d: any) {
if (!(d3 as any).event.active) { if (!d.active) {
simulation.value.alphaTarget(0); 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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
export default (d3: any, graph: any) => export default (d3: any, graph: any) =>
d3 d3
.zoom() .zoom()
.scaleExtent([0.3, 10]) .scaleExtent([0.3, 10])
.on("zoom", () => { .on("zoom", (d: any) => {
graph.attr( graph
"transform", .attr("transform", d3.zoomTransform(graph.node()))
`translate(${d3.event.transform.x},${d3.event.transform.y})scale(${d3.event.transform.k})` .attr(
); `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
);
}); });