From 2c85d49d5e4fb5ed4454cdaf06143ed0d9d131b7 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期二, 28 五月 2024 13:58:13 +0800
Subject: [PATCH] 调试流程图
---
src/components/drawflow/index.vue | 75 ++++++++++++++++++++++++-------------
1 files changed, 48 insertions(+), 27 deletions(-)
diff --git a/src/components/drawflow/index.vue b/src/components/drawflow/index.vue
index 6cc9612..36bdf97 100644
--- a/src/components/drawflow/index.vue
+++ b/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>
- <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 df-title />
+ </div>
+ <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%;
--
Gitblit v1.9.1