From de8dbab2dae4853f781ae91e6ca864fdf9b361e7 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期二, 28 五月 2024 17:48:21 +0800
Subject: [PATCH] 修复放大缩小

---
 src/components/drawflow/index.vue |  100 ++++++++++++++++++++++++++++++++++---------------
 1 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/src/components/drawflow/index.vue b/src/components/drawflow/index.vue
index 6cc9612..8c8b594 100644
--- a/src/components/drawflow/index.vue
+++ b/src/components/drawflow/index.vue
@@ -1,45 +1,72 @@
 <template>
-  <div class="drawflow">
-    <div class="menu">
-      <div class="menuItem">
+  <div
+    class="drawflow"
+    :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
+  >
+    <div
+      class="menu"
+      :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
+    >
+      <div
+        class="menuItem"
+        :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
+      >
         <div
           class="drag-drawflow"
           draggable="true"
           @dragstart="drag"
-          data-node="none"
+          data-node="template"
         >
-          <span>鑺傜偣</span>
+          <span>鎷栨嫿姝ゅ鍒涘缓</span>
         </div>
       </div>
     </div>
-    <div class="content" id="drawflow" @drop="drop" @dragover="allowDrop"></div>
+    <div class="content" :id="strId" @drop="drop" @dragover="allowDrop">
+      <div class="btn-export" @click="exportData">瀵煎嚭</div>
+      <div class="btn-clear" @click="editor.clearModuleSelected()">娓呯┖</div>
+    </div>
   </div>
 </template>
 
 <script>
 import Vue from "vue";
 import Drawflow from "drawflow";
-import styleDrawflow from "drawflow/dist/drawflow.min.css";
 export default {
   data() {
     return {
       editor: null,
       mobile_item_selec: "",
-      mobile_last_move: null
+      mobile_last_move: null,
     };
   },
   props: {
     importData: {
-      type: Object
-    }
+      type: Object,
+    },
+    primaryColor: {
+      type: String,
+    },
+    strId: {
+      type: String,
+      default: "drawflow",
+    },
   },
   mounted() {
     this.init();
   },
   methods: {
+    exportData() {
+      let dataJ = this.editor.export();
+      this.$emit("getDrawData", dataJ);
+    },
     init() {
-      this.editor = new Drawflow("drawflow", Vue, this);
+      this.editor = new Drawflow(
+        document.getElementById(this.strId),
+        Vue,
+        this
+      );
       this.editor.reroute = true;
+      this.editor.start();
       if (this.importData) {
         // 娓叉煋璁板綍鐨勬暟鎹�
         this.editor.import(this.importData);
@@ -77,7 +104,7 @@
       });
 
       this.editor.on("mouseMove", function (position) {
-        console.log("Position mouse x:" + position.x + " y:" + position.y);
+        // console.log("Position mouse x:" + position.x + " y:" + position.y);
       });
 
       this.editor.on("nodeMoved", function (id) {
@@ -126,7 +153,6 @@
       this.mobile_last_move = ev;
     },
     drag(ev) {
-      console.log(ev, "drag");
       if (ev.type === "touchstart") {
         this.mobile_item_selec = ev.target
           .closest(".drag-drawflow")
@@ -140,46 +166,58 @@
         return false;
       }
       pos_x =
-        10;
+        pos_x *
+          (this.editor.precanvas.clientWidth /
+            (this.editor.precanvas.clientWidth * this.editor.zoom)) -
+        this.editor.precanvas.getBoundingClientRect().x *
+          (this.editor.precanvas.clientWidth /
+            (this.editor.precanvas.clientWidth * this.editor.zoom));
       pos_y =
-        10;
+        pos_y *
+          (this.editor.precanvas.clientHeight /
+            (this.editor.precanvas.clientHeight * this.editor.zoom)) -
+        this.editor.precanvas.getBoundingClientRect().y *
+          (this.editor.precanvas.clientHeight /
+            (this.editor.precanvas.clientHeight * this.editor.zoom));
 
       switch (name) {
-        case "none":
-          var none = `
-        <div>
-          <div>
-            <input df-title />
-          </div>
-          <div>
-          <textarea df-content></textarea>
-        </div>
-        </div>
+        case "template":
+          // eslint-disable-next-line no-case-declarations
+          let noneEle = `
+              <div class="contentWall">
+                <div class="contentTitle">
+                  <input placeholder="璇疯緭鍏ユ爣棰�" df-title />
+                </div>
+                <div class="contentText">
+                  <textarea rows="4" placeholder="璇疯緭鍏ユ弿杩�" df-content></textarea>
+                </div>
+              </div>
         `;
           this.editor.addNode(
-            "none",
+            "noneEle",
             1,
             1,
             pos_x,
             pos_y,
-            "none",
+            "noneEle",
             {
               title: "",
-              content: ""
+              content: "",
             },
-            none
+            noneEle
           );
           break;
       }
     },
     allowDrop(ev) {
       ev.preventDefault();
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style scoped>
+@import "drawflow/dist/drawflow.min.css";
 .drawflow {
   width: 100%;
   height: 100%;

--
Gitblit v1.9.1