优化

unknown

2024-05-31 3355ad641abcacb6f72fd6fe6e8568801447243c

 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" :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }" :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(
        (this.container ? this.container : 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%;