<template>
|
<div class="lineStyleBox" style="width: 100%; height: 100%">
|
<el-tabs style="width: 100%; height: 100%">
|
<el-tab-pane label="线条">
|
<el-row>
|
<el-col :span="8">线宽</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="1"
|
:max="25"
|
:step="1"
|
size="mini"
|
v-model="strokeWidth"
|
@input="onStrokeWidthChange"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ strokeWidth }}</div>
|
</el-col>
|
</el-row>
|
<el-row v-if="false">
|
<el-col :span="8">外线宽</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="1"
|
:max="25"
|
:step="1"
|
size="mini"
|
v-model="outStrokeWidth"
|
@input="onOutStrokeWidthChange"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ outStrokeWidth }}</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">线色</el-col>
|
<el-col :span="14">
|
<el-input
|
type="color"
|
v-model="stroke"
|
size="mini"
|
style="width: 100%"
|
@change="onStrokeChange"
|
/>
|
</el-col>
|
</el-row>
|
<el-row v-if="false">
|
<el-col :span="8">外线色</el-col>
|
<el-col :span="14">
|
<el-input
|
type="color"
|
v-model="outStroke"
|
size="mini"
|
style="width: 100%"
|
@change="onOutStrokeChange"
|
/>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">虚线间隔</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="0"
|
:max="30"
|
:step="1"
|
size="mini"
|
v-model="strokeDasharray"
|
@input="onStrokeDasharray"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ strokeDasharray }}</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">动画时长</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="0"
|
:max="50"
|
:step="1"
|
size="mini"
|
v-model="animation"
|
@input="onAnimation"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ animation }}</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">连接器</el-col>
|
<el-col :span="14">
|
<el-select
|
style="width: 100%"
|
size="mini"
|
v-model="connector"
|
@change="onConnectorChange"
|
>
|
<el-option value="normal">Normal</el-option>
|
<el-option value="smooth">Smooth</el-option>
|
<el-option value="rounded">Rounded</el-option>
|
<el-option value="jumpover">Jumpover</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">起点标记</el-col>
|
<el-col :span="14">
|
<el-select
|
style="width: 100%"
|
size="mini"
|
v-model="edgeSourceMarker"
|
@change="onEdgeSourceMarkerChange"
|
>
|
<el-option value="无">无</el-option>
|
<el-option value="block">Block</el-option>
|
<el-option value="classic">Classic</el-option>
|
<el-option value="circle">Circle</el-option>
|
<el-option value="circlePlus">CirclePlus</el-option>
|
<el-option value="ellipse">Ellipse</el-option>
|
<el-option value="cross">Cross</el-option>
|
<el-option value="async">Async</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">终点标记</el-col>
|
<el-col :span="14">
|
<el-select
|
style="width: 100%"
|
size="mini"
|
v-model="edgeTargetMarker"
|
@change="onEdgeTargetMarkerChange"
|
>
|
<el-option value="无">无</el-option>
|
<el-option value="block">Block</el-option>
|
<el-option value="classic">Classic</el-option>
|
<el-option value="circle">Circle</el-option>
|
<el-option value="circlePlus">CirclePlus</el-option>
|
<el-option value="ellipse">Ellipse</el-option>
|
<el-option value="cross">Cross</el-option>
|
<el-option value="async">Async</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="markerWidthHeightIsShow">
|
<el-col :span="8">标记宽</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="8"
|
:max="30"
|
:step="1"
|
size="mini"
|
v-model="edgeMarkerWidth"
|
@input="onEdgeMarkerWidth"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ edgeMarkerWidth }}</div>
|
</el-col>
|
</el-row>
|
<el-row v-if="markerWidthHeightIsShow">
|
<el-col :span="8">标记高</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="8"
|
:max="30"
|
:step="1"
|
size="mini"
|
v-model="edgeMarkerHeight"
|
@input="onEdgeMarkerHeight"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ edgeMarkerHeight }}</div>
|
</el-col>
|
</el-row>
|
<el-row
|
v-if="
|
['circle', 'circlePlus'].indexOf(edgeTargetMarker) != -1 ||
|
['circle', 'circlePlus'].indexOf(edgeSourceMarker) != -1
|
"
|
>
|
<el-col :span="8">半径</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="5"
|
:max="30"
|
:step="1"
|
size="mini"
|
v-model="edgeMarkerRadius"
|
@input="onEdgeMarkerRadius"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ edgeMarkerRadius }}</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">路由</el-col>
|
<el-col :span="14">
|
<el-select
|
style="width: 100%"
|
size="mini"
|
v-model="edgeRouter"
|
@change="onEdgeRouter"
|
>
|
<el-option value="normal">Normal</el-option>
|
<el-option value="orth">Orth</el-option>
|
<el-option value="oneSide">OneSide</el-option>
|
<el-option value="manhattan">Manhattan</el-option>
|
<el-option value="metro">Metro</el-option>
|
<el-option value="er">Er</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row v-show="edgeRouter == 'er'">
|
<el-col :span="8">偏移</el-col>
|
<el-col :span="12">
|
<el-slider
|
:min="8"
|
:max="64"
|
:step="1"
|
size="mini"
|
v-model="edgeOffset"
|
@input="onEdgeOffsetChange"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ edgeOffset }}</div>
|
</el-col>
|
</el-row>
|
<el-row v-show="edgeRouter == 'er'">
|
<el-col :span="8">线方向</el-col>
|
<el-col :span="14">
|
<el-select style="width: 100%" size="mini" v-model="edgeDirection" @change="onEdgeDirectionChange">
|
<el-option value="L">L</el-option>
|
<el-option value="R">R</el-option>
|
<el-option value="H">H</el-option>
|
<el-option value="T">T</el-option>
|
<el-option value="B">B</el-option>
|
<el-option value="V">V</el-option>
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">层级</el-col>
|
<el-col :span="12">
|
<el-slider
|
size="mini"
|
:min="0"
|
:max="100"
|
:step="1"
|
v-model="ZIndex"
|
style="width: 100%"
|
@input="onZIndexChange"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<div class="result">{{ ZIndex }}</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="8">标签</el-col>
|
<el-col :span="14">
|
<el-input
|
v-model="label"
|
size="mini"
|
style="width: 100%"
|
@change="onLabelChange"
|
/>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
<script>
|
import FlowGraph from "../../../graph";
|
import flowConfig from "@/config/flowConfig";
|
|
|
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
curCell: null,
|
markerStrList: ["无", "circle", "circlePlus"],
|
ZIndex: 0,
|
stroke: "",
|
strokeWidth: 0,
|
connector: "",
|
label: "",
|
strokeDasharray: 0,
|
outStrokeWidth: 0,
|
outStroke: "",
|
animation: 0,
|
edgeRouter: "",
|
edgeTargetMarker: "无",
|
edgeSourceMarker: "无",
|
edgeMarkerWidth: 10,
|
edgeMarkerHeight: 10,
|
edgeMarkerRadius: 5,
|
edgeOffset: 0,
|
edgeDirection: "",
|
};
|
},
|
computed: {
|
/**是否显示线两端标记的宽高 */
|
markerWidthHeightIsShow() {
|
if (
|
this.markerStrList.indexOf(this.edgeTargetMarker) != -1 &&
|
this.markerStrList.indexOf(this.edgeTargetMarker) != -1
|
) {
|
return false;
|
} else {
|
return true;
|
}
|
},
|
},
|
props: { id: String },
|
watch: {
|
id: {
|
handler() {
|
const { graph } = FlowGraph;
|
const cell = graph.getCellById(this.id);
|
if (!cell || !cell.isEdge()) {
|
return;
|
}
|
this.curCell = cell;
|
this.ZIndex = cell.getZIndex();
|
const connector = cell.getConnector() || {
|
name: "normal",
|
};
|
this.connector = connector.name;
|
const router = cell.router || {
|
name: "normal",
|
};
|
this.edgeRouter = router.name;
|
this.stroke = cell.attr("line/stroke");
|
this.strokeWidth = cell.attr("line/strokeWidth");
|
this.strokeDasharray = cell.attr("line/strokeDasharray");
|
const targetMarker = cell.attr("line/targetMarker");
|
if (targetMarker) {
|
this.edgeTargetMarker = targetMarker.name;
|
if (targetMarker.name) {
|
if (targetMarker.name == "ellipse") {
|
if (targetMarker.rx) {
|
this.edgeMarkerWidth = parseFloat(targetMarker.rx);
|
}
|
if (targetMarker.ry) {
|
this.edgeMarkerHeight = parseFloat(targetMarker.ry);
|
}
|
} else if (
|
targetMarker.name == "circle" ||
|
targetMarker.name == "circlePlus"
|
) {
|
if (targetMarker.r) {
|
this.edgeMarkerRadius = parseFloat(targetMarker.r);
|
}
|
} else {
|
if (targetMarker.width) {
|
this.edgeMarkerWidth = parseFloat(targetMarker.width);
|
} else {
|
this.edgeMarkerWidth = parseFloat(targetMarker.size);
|
}
|
if (targetMarker.height) {
|
this.edgeMarkerHeight = parseFloat(targetMarker.height);
|
} else {
|
this.edgeMarkerHeight = parseFloat(targetMarker.size);
|
}
|
}
|
}
|
}
|
|
const routerArgs = cell.prop("router/args")||flowConfig.router.args
|
this.edgeDirection = routerArgs.direction
|
this.edgeOffset = routerArgs.offset
|
|
this.label = cell.getLabels()[0]?.attrs?.text?.text || "";
|
// console.log(cell, 338);
|
},
|
deep: false,
|
immediate: false,
|
},
|
},
|
methods: {
|
onEdgeOffsetChange() {
|
this.curCell?.prop("router/args", {
|
offset: this.edgeOffset,
|
});
|
},
|
onEdgeDirectionChange() {
|
this.curCell?.prop("router/args", {
|
direction: this.edgeDirection,
|
});
|
},
|
/**设置层级 */
|
onZIndexChange() {
|
this.curCell?.setZIndex(this.ZIndex);
|
},
|
// 线边的宽度
|
onStrokeWidthChange() {
|
this.curCell?.attr("line/strokeWidth", this.strokeWidth);
|
},
|
// 外线边的宽度
|
onOutStrokeWidthChange() {
|
this.curCell?.attr("outline/strokeWidth", this.outStrokeWidth);
|
},
|
// 线边颜色
|
onStrokeChange() {
|
this.curCell?.attr("line/stroke", this.stroke);
|
},
|
// 外线边颜色
|
onOutStrokeChange() {
|
this.curCell?.attr("outline/stroke", this.outStroke);
|
},
|
// 虚线
|
onStrokeDasharray() {
|
this.curCell?.attr("line/strokeDasharray", this.strokeDasharray);
|
},
|
// 动画
|
onAnimation() {
|
this.curCell?.attr(
|
"line/style/animation",
|
`ant-line ${this.animation}s infinite linear`
|
);
|
},
|
// 连接方式
|
onConnectorChange() {
|
this.curCell?.setConnector(this.connector);
|
},
|
// 起点标记
|
onEdgeSourceMarkerChange() {
|
if (this.edgeSourceMarker == "无") {
|
this.curCell?.attr("line/sourceMarker", null);
|
} else {
|
this.curCell?.attr(
|
"line/sourceMarker/name",
|
`${this.edgeSourceMarker}`
|
);
|
}
|
},
|
// 终点标记
|
onEdgeTargetMarkerChange() {
|
if (this.edgeTargetMarker == "无") {
|
this.curCell?.attr("line/targetMarker", null);
|
} else {
|
this.curCell?.attr(
|
"line/targetMarker/name",
|
`${this.edgeTargetMarker}`
|
);
|
}
|
},
|
// 标记宽
|
onEdgeMarkerWidth() {
|
if (this.edgeTargetMarker != "无") {
|
if (this.edgeTargetMarker == "ellipse") {
|
this.curCell?.attr("line/targetMarker/rx", this.edgeMarkerWidth);
|
} else {
|
this.curCell?.attr(
|
"line/targetMarker/width",
|
this.edgeMarkerWidth
|
);
|
}
|
}
|
if (this.edgeSourceMarker != "无") {
|
if (this.edgeSourceMarker == "ellipse") {
|
this.curCell?.attr("line/sourceMarker/rx", this.edgeMarkerWidth);
|
} else {
|
this.curCell?.attr(
|
"line/sourceMarker/width",
|
this.edgeMarkerWidth
|
);
|
}
|
}
|
},
|
// 标记高
|
onEdgeMarkerHeight() {
|
if (this.edgeTargetMarker != "无") {
|
if (this.edgeTargetMarker == "ellipse") {
|
this.curCell?.attr(
|
"line/targetMarker/ry",
|
this.edgeMarkerHeight
|
);
|
} else {
|
this.curCell?.attr(
|
"line/targetMarker/height",
|
this.edgeMarkerHeight
|
);
|
}
|
}
|
if (this.edgeSourceMarker != "无") {
|
if (this.edgeSourceMarker == "ellipse") {
|
this.curCell?.attr(
|
"line/sourceMarker/ry",
|
this.edgeMarkerHeight
|
);
|
} else {
|
this.curCell?.attr(
|
"line/sourceMarker/height",
|
this.edgeMarkerHeight
|
);
|
}
|
}
|
},
|
//标记半径
|
onEdgeMarkerRadius() {
|
if (
|
this.edgeTargetMarker == "circle" ||
|
this.edgeTargetMarker == "circlePlus"
|
) {
|
this.curCell?.attr("line/targetMarker/r", this.edgeMarkerRadius);
|
}
|
if (
|
this.edgeSourceMarker == "circle" ||
|
this.edgeSourceMarker == "circlePlus"
|
) {
|
this.curCell?.attr("line/sourceMarker/r", this.edgeMarkerRadius);
|
}
|
},
|
// 路由
|
onEdgeRouter() {
|
this.curCell?.setRouter({ name: this.edgeRouter });
|
},
|
onLabelChange() {
|
this.curCell.setLabels([
|
{
|
attrs: {
|
text: {
|
text: this.label,
|
},
|
},
|
position: {
|
distance: 0.5,
|
},
|
},
|
]);
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.el-row {
|
margin-bottom: 5px;
|
}
|
|
.el-col {
|
height: 38px;
|
line-height: 38px;
|
}
|
.result {
|
margin-left: 10px;
|
}
|
</style>
|
|
<style>
|
.lineStyleBox .el-tabs__content {
|
height: calc(100% - 60px);
|
overflow: auto;
|
}
|
</style>
|
