<template>
|
<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="template"
|
>
|
<div class="draw-con">
|
<span>
|
<svg
|
t="1717139048681"
|
class="icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="2522"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="26"
|
height="26"
|
>
|
<path
|
d="M270.0352 196.608C225.6192 213.12 206.9312 245.12 205.6512 279.04c-0.768 22.272 3.968 43.392 13.824 70.912-1.536-4.352 5.76 17.472 7.232 22.272 3.008 10.112-29.056-3.456-48.64 0.448-21.696 4.288-50.56 22.912-65.664 47.68-17.728 28.992-18.56 62.336-4.928 122.304 7.424 32.704 21.824 60.224 42.432 86.4 9.152 11.584 34.176 38.656 36.032 41.088l50.688 56.192c8.96 8.064 15.36 14.08 34.432 32.128 18.752 17.856 27.712 26.112 36.032 33.216 3.456 2.944 6.4 10.688 7.552 22.272a146.176 146.176 0 0 1-1.536 37.76 22.4 22.4 0 0 0 21.824 26.432c12.928 0.128 23.04 0.256 49.152 0.704l11.328 0.192c69.76 1.216 104.704 0.896 130.112-2.304 27.136-3.392 55.296-36.48 79.232-77.44 20.48 36.544 48.896 72.064 77.632 76.672 9.024 1.408 20.032 1.92 32.768 1.6a451.904 451.904 0 0 0 47.36-3.584 22.4 22.4 0 0 0 18.688-28.16 207.296 207.296 0 0 1-6.272-36.48 91.136 91.136 0 0 1-0.192-11.392 385.92 385.92 0 0 0 0.64-16.832l0.192-4.992a187.52 187.52 0 0 1 4.864-32.576c1.472-7.168 8.768-21.056 20.288-38.208a765.12 765.12 0 0 1 45.888-60.032 366.848 366.848 0 0 0 43.52-91.072c6.72-23.36 12.16-67.2 15.232-108.544 1.792-23.872 2.432-43.2 2.432-73.472v-10.56-12.352c0-9.344-0.256-18.688-1.216-41.536-1.856-48.512-28.48-80-67.712-86.016-33.408-5.12-63.296 4.864-76.352 18.88-4.48 4.8 0.192-16.64-12.928-37.248-9.792-15.36-35.392-35.2-55.04-39.04a187.328 187.328 0 0 0-65.792 0.448c-19.2 3.392-40.96 20.096-52.032 38.592-7.424 12.352 2.304-0.32-5.632-13.952-10.88-18.752-36.288-35.52-60.544-40.512a137.344 137.344 0 0 0-65.664 3.84c-25.92 7.68-60.8 36.672-56.704 68.992C367.7632 189.44 313.5552 180.416 270.0352 196.608z"
|
p-id="2523"
|
></path>
|
<path
|
d="M501.5872 192.832c12.352 2.56 26.688 11.968 30.848 19.072 4.992 8.64 9.28 21.76 12.544 38.08 1.792 8.704 7.296 72.384 17.6 79.04 24.64 2.688 24.64 2.688 31.424-7.36 2.112-4.48 2.112-4.48 2.56-6.144 0.832-3.648 1.472-7.616 2.048-12.992l0.512-4.736v-0.448c0.384-3.904 2.688-27.072 3.456-33.728 2.304-18.56 5.248-31.488 8.32-36.672a54.144 54.144 0 0 1 25.792-18.048c16.768-3.008 35.2-3.328 49.344-0.576 6.464 1.28 22.144 13.44 25.856 19.2 7.68 12.032 15.04 50.688 19.2 89.344-0.576 2.816-0.576 2.816 9.856 17.28 34.88-3.904 34.88-3.904 34.048-10.368 0.96-2.304 1.728-4.992 2.752-9.024 2.56-9.6 4.16-15.104 6.656-21.248 1.728-4.352 3.52-8 5.376-10.88 7.232-11.392 25.92-19.136 42.24-16.64 17.6 2.752 28.8 16 29.888 43.52 0.896 22.4 1.152 31.36 1.216 40.064v22.656c0 29.184-0.64 47.424-2.368 70.144-2.88 38.208-8.064 80.128-13.632 99.584-5.632 19.84-22.464 56.768-35.84 76.032a808.96 808.96 0 0 0-47.744 62.4c-14.528 21.76-23.872 39.488-26.88 54.08a228.288 228.288 0 0 0-5.76 39.872l-0.256 5.76a347.648 347.648 0 0 1-0.576 15.232c-0.32 5.44-0.192 11.136 0.256 17.216 0.64 8.768 6.272 20.8 6.272 20.8s-13.824-0.704-22.336-0.576a146.496 146.496 0 0 1-24.704-1.088c-8.64-1.344-31.68-30.208-43.52-52.672-18.048-34.432-61.824-32.768-79.808-2.368-16 27.456-39.36 54.784-46.272 55.68-22.336 2.816-56.512 3.072-123.712 1.92-5.696-0.064-27.52-0.768-38.592-0.896-11.136-0.192 3.008-10.688 1.664-23.872-2.24-22.08-9.024-40.064-23.232-51.968-7.296-6.272-16-14.336-33.728-31.168l-12.672-12.032c-10.624-9.984-15.744-14.72-21.568-19.84l-47.872-53.184c-2.368-3.136-27.392-30.208-35.072-40a168.832 168.832 0 0 1-33.92-68.544C139.8592 483.072 140.4352 460.416 150.6112 443.648c8.256-13.44 26.24-25.088 36.224-27.008 10.24-2.112 32.96-1.024 37.12 1.28l9.792 5.44c2.176 1.28 3.584 2.304 4.928 3.456a53.312 53.312 0 0 1 7.36 8.32l8.512 11.584a61.696 61.696 0 0 0 8 9.472c16.768 15.36 40.832 1.92 38.848-19.456a75.904 75.904 0 0 0-3.2-14.144c-1.792-6.016-1.088-5.376-5.12-13.44l-4.032-7.872-6.4-12.544a140.544 140.544 0 0 1-10.432-24.128 1015.68 1015.68 0 0 0-10.432-29.568l-0.384-0.896 0.256 0.704c-8.064-22.592-11.776-38.912-11.2-54.208 0.64-17.152 9.6-32.576 35.072-42.048 24-8.896 64.384 0.064 72.064 16.64 2.56 5.568 5.312 12.672 8.32 21.12 2.24 6.656 8.64 26.432 10.24 31.488 1.984 6.08 3.2 9.408 4.48 12.16 0.192 3.712 0.192 3.712 21.184 13.824 24.96-17.408 24.96-17.408 22.72-22.4 0.32-5.248 0.448-10.368 0.576-22.336 0.128-13.952 0.256-19.776 0.64-27.456 0.768-17.6 2.56-30.528 5.504-38.144 5.504-14.208 15.104-24.448 26.496-27.84 14.592-4.48 30.72-5.504 43.776-2.816z m72.512 255.424a22.4 22.4 0 0 0-22.336 22.528l0.96 207.488a22.4 22.4 0 1 0 44.8-0.256l-0.96-207.424a22.4 22.4 0 0 0-22.464-22.336z m121.408 0.192a22.4 22.4 0 0 0-22.4 22.4v206.592a22.4 22.4 0 0 0 44.8 0V470.848a22.4 22.4 0 0 0-22.4-22.4z m-239.744 1.728a22.4 22.4 0 0 0-22.272 22.528l1.28 204.672a22.4 22.4 0 0 0 44.8-0.32l-1.28-204.608a22.4 22.4 0 0 0-22.528-22.272z"
|
fill="#FFFFFF"
|
p-id="2524"
|
></path>
|
</svg>
|
</span>
|
<span> 拖拽此处创建 </span>
|
</div>
|
</div>
|
</div>
|
</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";
|
export default {
|
data() {
|
return {
|
editor: null,
|
mobile_item_selec: "",
|
mobile_last_move: null,
|
};
|
},
|
props: {
|
importData: {
|
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(
|
(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);
|
}
|
|
// 事件绑定
|
this.editor.on("nodeCreated", function (id) {
|
console.log("Node created " + id);
|
});
|
|
this.editor.on("nodeRemoved", function (id) {
|
console.log("Node removed " + id);
|
});
|
|
this.editor.on("nodeSelected", function (id) {
|
console.log("Node selected " + id);
|
});
|
|
this.editor.on("moduleCreated", function (name) {
|
console.log("Module Created " + name);
|
});
|
|
this.editor.on("moduleChanged", function (name) {
|
console.log("Module Changed " + name);
|
});
|
|
this.editor.on("connectionCreated", function (connection) {
|
console.log("Connection created");
|
console.log(connection);
|
});
|
|
this.editor.on("connectionRemoved", function (connection) {
|
console.log("Connection removed");
|
console.log(connection);
|
});
|
|
this.editor.on("mouseMove", function (position) {
|
// console.log("Position mouse x:" + position.x + " y:" + position.y);
|
});
|
|
this.editor.on("nodeMoved", function (id) {
|
console.log("Node moved " + id);
|
});
|
|
this.editor.on("zoom", function (zoom) {
|
console.log("Zoom level " + zoom);
|
});
|
|
this.editor.on("translate", function (position) {
|
console.log("Translate x:" + position.x + " y:" + position.y);
|
});
|
|
this.editor.on("addReroute", function (id) {
|
console.log("Reroute added " + id);
|
});
|
|
this.editor.on("removeReroute", function (id) {
|
console.log("Reroute removed " + id);
|
});
|
},
|
drop(ev) {
|
if (ev.type === "touchend") {
|
var parentdrawflow = document
|
.elementFromPoint(
|
this.mobile_last_move.touches[0].clientX,
|
this.mobile_last_move.touches[0].clientY
|
)
|
.closest("#drawflow");
|
if (parentdrawflow != null) {
|
this.addNodeToDrawFlow(
|
this.mobile_item_selec,
|
this.mobile_last_move.touches[0].clientX,
|
this.mobile_last_move.touches[0].clientY
|
);
|
}
|
this.mobile_item_selec = "";
|
} else {
|
ev.preventDefault();
|
var data = ev.dataTransfer.getData("node");
|
this.addNodeToDrawFlow(data, ev.clientX, ev.clientY);
|
}
|
},
|
positionMobile(ev) {
|
this.mobile_last_move = ev;
|
},
|
drag(ev) {
|
if (ev.type === "touchstart") {
|
this.mobile_item_selec = ev.target
|
.closest(".drag-drawflow")
|
.getAttribute("data-node");
|
} else {
|
ev.dataTransfer.setData("node", ev.target.getAttribute("data-node"));
|
}
|
},
|
addNodeToDrawFlow(name, pos_x, pos_y) {
|
if (this.editor.editor_mode === "fixed") {
|
return false;
|
}
|
pos_x =
|
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 =
|
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 "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(
|
"noneEle",
|
1,
|
1,
|
pos_x,
|
pos_y,
|
"noneEle",
|
{
|
title: "",
|
content: "",
|
},
|
noneEle
|
);
|
break;
|
}
|
},
|
allowDrop(ev) {
|
ev.preventDefault();
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
@import "drawflow/dist/drawflow.min.css";
|
.drawflow {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
border: 1px solid #ccc;
|
background: #fff;
|
}
|
.menu {
|
width: 150px;
|
border-right: 1px solid #ccc;
|
}
|
/* .menuItem {
|
border-bottom: 1px solid #ccc;
|
} */
|
.drag-drawflow {
|
padding: 10px 10px;
|
cursor: move;
|
user-select: none;
|
.draw-con {
|
display: flex;
|
justify-content: flex-start;
|
padding-left: 28px;
|
align-items: baseline;
|
font-size: 16px;
|
svg {
|
top: 6px;
|
left: 10px;
|
fill: #f49a4c;
|
}
|
}
|
}
|
.content {
|
flex: 1;
|
overflow: hidden;
|
background-size: 25px 25px;
|
background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px),
|
linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
|
}
|
</style>
|
