vue-safe-force-graph 2.0.80 → 2.0.81

package/lib/vue-safe-force-graph.js

@@ -27867,23 +27867,23 @@ const KG = {
     },
     svgToUrl() {
       return ze(this, null, function* () {
-        this.$parent.centerAndZoom();
+        this.$parent.centerAndZoom(), this.$parent.addCanvasBg();
         const t = this.$parent.getCanvasStage().toDataURL({
           mimeType: "image/png"
         });
-        return this.$parent.reset(), t;
+        return this.$parent.removeCanvasBg(), this.$parent.reset(), t;
       });
     },
     svgToBlob() {
       return ze(this, null, function* () {
-        this.$parent.centerAndZoom();
+        this.$parent.centerAndZoom(), this.$parent.addCanvasBg();
         const e = this.$parent.getCanvasStage();
         e.find("Image").forEach((n) => {
           const r = n.image();
           r && (r.crossOrigin = "Anonymous");
         });
         const t = yield e.toBlob();
-        return this.$parent.reset(), t;
+        return this.$parent.removeCanvasBg(), this.$parent.reset(), t;
       });
     },
     deleteNodes() {
@@ -38393,7 +38393,7 @@ const qoe = /* @__PURE__ */ Xt(ooe, [["render", Voe], ["__scopeId", "data-v-194a
     utime: "2019-05-06 15:08:10",
     children: []
   }
-], zoe = "vue-safe-force-graph", Hoe = "2.0.80", Goe = "force_graph in security area", Woe = "jason zhang", Koe = "./lib/vue-safe-force-graph.js", Yoe = "./lib/vue-safe-force-graph.umd.cjs", Joe = "module", Xoe = [
+], zoe = "vue-safe-force-graph", Hoe = "2.0.81", Goe = "force_graph in security area", Woe = "jason zhang", Koe = "./lib/vue-safe-force-graph.js", Yoe = "./lib/vue-safe-force-graph.umd.cjs", Joe = "module", Xoe = [
   "/lib/"
 ], Qoe = {
   ".": {
@@ -38813,7 +38813,7 @@ const { toClipboard: sae } = Wd(), oae = "Arial,Helvetica Neue,Helvetica,PingFan
           id: "grab",
           x: 0,
           y: 0
-        }), this.layer.add(this.grab), this.addCanvasBg();
+        }), this.layer.add(this.grab);
         const r = this.layer.getCanvas()._canvas;
         this.canvasElement = r, this.stage.on("mousemove", (s) => {
           if (!this.mousedownNode || !s.evt[this.actKey]) {
@@ -38894,7 +38894,7 @@ const { toClipboard: sae } = Wd(), oae = "Arial,Helvetica Neue,Helvetica,PingFan
         id: "grab",
         x: 0,
         y: 0
-      }), this.layer.add(this.grab), this.addCanvasBg();
+      }), this.layer.add(this.grab);
     },
     paintNodes() {
       const e = this.stage.width() / 2, t = this.stage.height() / 2, n = this.selection.map((r) => r.id);
@@ -40140,18 +40140,20 @@ const { toClipboard: sae } = Wd(), oae = "Arial,Helvetica Neue,Helvetica,PingFan
       });
     },
     addCanvasBg() {
+      const e = this.stage.scaleX(), t = this.stage.x(), n = this.stage.y();
       this.darkBgRect = new Et.Rect({
-        x: 0,
-        y: 0,
-        width: this.stage.width() / this.scale,
-        height: this.stage.height() / this.scale,
+        x: -t / e,
+        // 反向补偿偏移
+        y: -n / e,
+        width: this.stage.width() / e,
+        height: this.stage.height() / e,
         fill: this.canvasBg,
         listening: !1,
         draggable: !1
-      }), this.layer.add(this.darkBgRect), this.darkBgRect.moveToBottom(), this.stage.draw();
+      }), this.layer.add(this.darkBgRect), this.darkBgRect.moveToBottom(), this.layer.batchDraw();
     },
     removeCanvasBg() {
-      this.darkBgRect && this.darkBgRect.destroy(), this.darkBgRect = null, this.stage.draw();
+      this.darkBgRect && this.darkBgRect.destroy(), this.darkBgRect = null, this.layer.batchDraw();
     }
   }
 }, uae = {
@@ -40966,7 +40968,7 @@ const Nae = {
   },
   mounted() {
     return ze(this, null, function* () {
-      console.log('"2024/11/22 15:49:51"', "2024/11/22 15:49:51"), this.initializeGraphApi(), window.onresize = () => {
+      console.log('"2024/11/26 16:58:01"', "2024/11/26 16:58:01"), this.initializeGraphApi(), window.onresize = () => {
         this.fullScreen = !!document.fullscreenElement, this.screenHeight = document.body.clientHeight;
       }, this.margin = this.changeMargin(), ps(nt, "emitDataLoaded", () => {
         this.emitDataLoaded();