调试流程图

unknown

2024-05-28 2c85d49d5e4fb5ed4454cdaf06143ed0d9d131b7

 src/components/drawflow/index.vue

@@ -6,40 +6,50 @@
          class="drag-drawflow"
          draggable="true"
          @dragstart="drag"
          data-node="none"
          data-node="template"
        >
          <span>节点</span>
        </div>
      </div>
    </div>
    <div class="content" id="drawflow" @drop="drop" @dragover="allowDrop"></div>
    <div class="content" id="drawflow" @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,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    exportData() {
      console.log(this.editor.export());
    },
    init() {
      this.editor = new Drawflow("drawflow", Vue, this);
      this.editor = new Drawflow(
        document.getElementById("drawflow"),
        Vue,
        this
      );
      this.editor.reroute = true;
      this.editor.start();
      if (this.importData) {
        // 渲染记录的数据
        this.editor.import(this.importData);
@@ -77,7 +87,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 +136,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 +149,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>
        case "template":
          // eslint-disable-next-line no-case-declarations
          let noneEle = `
              <div class="contentWall">
                <div class="contentTitle">
            <input df-title />
          </div>
          <div>
          <textarea df-content></textarea>
                <div class="contentText">
                  <textarea rows="4" 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%;