fix: update zoom and drag

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

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);
}
}

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})`
);
});