background
You need to implement a workflow that supports dragging and dropping nodes to generate a workflow.
Business realization
- Support page layout zoom
- Support node
- Support if else
- Support multiple branches
Technical point
- Grid background
- Workflow zoom
- Workflow technology realization
- Node drag
Technology selection
- view
- jsplumb
- sortablejs(vue-draggable)
Difficulties to break
Grid background
Mainly using the css linear-gradientand background-sizeimplementation.
<div class="flow-layout">
<div class="flow-editor">
<div class="canvas-container">
</div>
</div>
</div>
.flow-layout {
display: flex;
flex-direction: column;
}
.flow-editor {
position: relative;
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
}
.canvas-container {
flex: 1;
overflow: auto;
z-index: 0;
}
.canvas-container:before {
content: "";
height: 10px;
width: 100%;
display: block;
background-repeat-y: no-repeat;
position: absolute;
background-image: linear-gradient(90deg, #ccc 1px, transparent 0), linear-gradient(90deg, #ddd 1px, transparent 0);
background-size: 75px 10px, 5px 5px;
}
.canvas-container:after {
content: "";
height: 100%;
width: 10px;
display: block;
background-repeat-x: no-repeat;
position: absolute;
top: 0;
background-image: linear-gradient(#ccc 1px, transparent 0), linear-gradient(#ddd 1px, transparent 0);
background-size: 10px 75px, 5px 5px;
}
Workflow zoom
Mainly combined with the attribute selector of css E[att="val"], the zoom function is realized by modifying the value of zoom.
<div class="flow-zoom" :data-zoom="canvasDataRoom + '%'">
<div class="zoom-btn">
<el-button size="mini" :class="{
'el-button--primary':canvasRoomMinusEnable}" icon="el-icon-minus"
circle
@click="handleMinusCanvas"></el-button>
</div>
<div class="zoom-btn">
<el-button size="mini" :class="{
'el-button--primary':canvasRoomPlusEnable}" icon="el-icon-plus"
circle
@click="handlePlusCanvas"></el-button>
</div>
</div>
<div class="canvas-container" :data-zoom="canvasDataRoom">
<div class="campaignCanvas"></div>
</div>
.canvas-container[data-zoom="100"] {
background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}
.canvas-container[data-zoom="90"] {
background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}
.canvas-container[data-zoom="80"] {
background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}
.canvas-container[data-zoom="70"] {
background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
background-size: 55px 55px, 55px 55px, 11px 11px, 11px 11px;
}
.canvas-container[data-zoom="60"] {
background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
}
.canvas-container[data-zoom="50"] {
background-image: linear-gradient(#eee 1px, transparent 0), linear-gradient(90deg, #eee 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0), linear-gradient(90deg, #f5f5f5 1px, transparent 0);
background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
Workflow technology realization
Mainly rely on jsplumb to achieve.
Mainly use jsplumb to realize the connection of two nodes.
Let the dom node become a jsplumb draggable node
<div id="_uuid">
</div>
jsPlumb.draggable(_uuid, {
});
Connection of two nodes.
jsPlumb.connect({
source: source,
target: target,
endpoint: 'Dot',
// 连接线的样式
connectorStyle: {
strokeStyle: "#ccc", joinStyle: "round", outlineColor: "#ccc"}, // 链接 style
// 连接线配置，起点可用
connector: ["Flowchart", {
stub: [10, 20],
gap: 1,
cornerRadius: 2,
alwaysRespectStubs: true
}], // 链接
//
endpointStyle: {
fill: 'transparent', outlineStroke: 'transparent', outlineWidth: 2},
// 线的样式
paintStyle: {
stroke: 'lightgray', strokeWidth: 2},
// 锚点的位置
anchor: ['BottomCenter', 'TopCenter'],
// 遮罩层-设置箭头
overlays: [
['PlainArrow', {
width: 10, length: 10, location: 1}],
['Custom', {
location: .5,
id: 'nodeTempSmall',
create: function () {
let $el = that.$refs[target][0].$el;
$el.dataset.target = target;
$el.dataset.source = source;
return $el;
},
visible: false
}],
['Label', {
location: 1, id: "flowItemDesc", cssClass: "node-item-label", visible: true}] //
]
});
Delete a node
jsPlumb.removeAllEndpoints(uuid);
Create a node between two nodes
function createFlowConnectionLabel(sourceList, target) {
if (!Array.isArray(sourceList)) {
sourceList = [sourceList];
}
sourceList.forEach((source) => {
//
let lines = this.$options.jsPlumb.getConnections({
source: source,
target: target
});
//
lines.forEach((line) => {
line.getOverlay('nodeTempSmall').setVisible(true);
line.bind('click', this.handleFlowLabelClick);
});
});
}
Copywriting between two nodes
function createFlowItemLabel(source, target, label) {
this.$nextTick(() => {
let lines = this.$options.jsPlumb.getConnections({
source: source,
target: target
});
if (lines.length > 0) {
lines[0].getOverlay("flowItemDesc").setLabel(`<span class="node-item-title" title="${
label}">${
label}</span>`);
}
});
}
Node drag
Mainly rely on sortablejs to achieve
Mainly use vue-draggable encapsulated components to achieve drag and drop. Core code
The dragged destination area.
<draggable class="flow-item node-temp node-temp-img"
ref="tempNode"
:id="flowItem.uuid"
:group="{name:'sortable', pull:false, put: true }">
</draggable>
The target object being dragged.
<draggable class="items-box"
:key="index"
:list="flowItem.children"
:group="{name:'sortable', pull: 'clone', put: false }"
v-bind="dragConfig"
:move="handleFlowMoveItem"
@start="handleFlowMoveStart"
@end="handleFlowMoveEnd"
:sort="false"
:ref="flowItem.ref">
<div class="node-temp-img"></div>
</template>
</draggable>
Project screenshot
