From 0b17cbbba7c0875a6413361a95b9bef508b27444 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期一, 03 六月 2024 11:23:02 +0800
Subject: [PATCH] 优化
---
src/components/drawflow/index.vue | 157 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 122 insertions(+), 35 deletions(-)
diff --git a/src/components/drawflow/index.vue b/src/components/drawflow/index.vue
index 6cc9612..3fe9fbe 100644
--- a/src/components/drawflow/index.vue
+++ b/src/components/drawflow/index.vue
@@ -1,45 +1,107 @@
<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>
+ <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" 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);
+ this.$message({
+ type: "success",
+ message: "宸蹭繚瀛�",
+ });
+ },
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 +139,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 +188,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 +201,61 @@
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>
+<style scoped lang="less">
+@import "drawflow/dist/drawflow.min.css";
+.drawflow .drawflow-node.selected {
+ background: #fff;
+}
.drawflow {
width: 100%;
height: 100%;
@@ -191,13 +267,24 @@
width: 160px;
border-right: 1px solid #ccc;
}
-.menuItem {
+/* .menuItem {
border-bottom: 1px solid #ccc;
-}
+} */
.drag-drawflow {
- padding: 10px 20px;
+ padding: 10px 10px;
cursor: move;
user-select: none;
+ .draw-con {
+ display: flex;
+ justify-content: flex-start;
+ padding-left: 28px;
+ align-items: baseline;
+ svg {
+ top: 6px;
+ left: 10px;
+ fill: #f49a4c;
+ }
+ }
}
.content {
flex: 1;
--
Gitblit v1.9.1