<template>
|
<div style="position: absolute;top:6%;right:0;z-index:1000;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
|
<el-card style="height: 100%">
|
<el-tabs v-model="activeName" id="EdgeTabPane">
|
<el-tab-pane label="线条" name="first">
|
<el-row :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 38px">宽度</el-col>
|
<el-col :span=16>
|
<el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.strokeWidth" @change="onStrokeWidthChange"></el-slider>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 38px">颜色</el-col>
|
<el-col :span=16>
|
<el-color-picker v-model="globalGridAttr.stroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">类型</el-col>
|
<el-col :span=16>
|
<el-select style="width: 100%" v-model="globalGridAttr.connector" @change="onConnectorChange">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
<!-- <el-option value="normal">默认</el-option>-->
|
<!-- <el-option value="smooth">平滑</el-option>-->
|
<!-- <el-option value="rounded">圆形</el-option>-->
|
<!-- <el-option value="jumpover">折线</el-option>-->
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">标签</el-col>
|
<el-col :span=16>
|
<el-input v-model="globalGridAttr.label" style="width: 100%" @change="onLabelChange"/>
|
</el-col>
|
</el-row>
|
<el-row v-show="globalGridAttr.label!==''" :gutter="5" align="middle" style="margin-top:20px;">
|
<el-col :span=8 style="font-size: 16px;line-height: 32px">偏移</el-col>
|
<el-col :span=16>
|
<el-slider :min=0.1 :max=1 :step=0.1 v-model="globalGridAttr.distance" @change="onLabelDistanceChange"></el-slider>
|
<!-- <el-input v-model="globalGridAttr.distance" style="width: 100%" @change="onLabelDistanceChange"/>-->
|
</el-col>
|
</el-row>
|
<!-- <el-row v-show="globalGridAttr.label!==''" :gutter="5" align="middle" style="margin-top:20px;">-->
|
<!-- <el-col :span=8 style="font-size: 16px;line-height: 32px">角度</el-col>-->
|
<!-- <el-col :span=16>-->
|
<!-- <el-slider :min=-360 :max=360 :step=1 v-model="globalGridAttr.angle" @change="onLabelAngleChange"></el-slider>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { Edge} from '@antv/x6';
|
export default {
|
name: "configEdit",
|
data(){
|
return{
|
left_p:document.documentElement.clientHeight*0.9,
|
activeName: 'first',
|
// globalGridAttr:{},
|
curCell:Edge,
|
options: [{
|
value: 'rounded',
|
label: '默认'
|
}, {
|
value: 'normal',
|
label: '直线'
|
}]
|
}
|
},
|
props:{
|
id: {
|
type: String,
|
},
|
globalGridAttr:{
|
type: Object,
|
},
|
graph:{
|
type: String,
|
}
|
},
|
watch:{
|
'id'(val,oldVal){
|
const cell = this.graph.getCellById(this.id)
|
if(!cell || !cell.isEdge()){
|
return
|
}
|
this.curCell = cell
|
let connector = cell.getConnector() || {
|
name:'默认'
|
}
|
this.globalGridAttr.stroke = cell.attr('line/stroke')
|
this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth')
|
this.globalGridAttr.connector = connector.name
|
this.globalGridAttr.label = cell.getLabels()[0].attrs.text? cell.getLabels()[0].attrs.text.text:''
|
this.globalGridAttr.distance =cell.getLabels()[0].position.distance
|
// this.globalGridAttr.angle =cell.getLabels()[0].position.angle
|
console.log(cell.getLabels(),'cell.getLabels()')
|
// console.log(cell.getLabels()[0],'cell.getLabels()[0]')
|
// this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
|
}
|
},
|
methods:{
|
onStrokeWidthChange(val) {
|
|
this.globalGridAttr.strokeWidth = val
|
this.curCell.attr('line/strokeWidth', val)
|
},
|
|
onStrokeChange(e) {
|
console.log(e,'eee')
|
const val = e
|
this.globalGridAttr.stroke = val
|
this.curCell.attr('line/stroke', val)
|
},
|
onConnectorChange(val){
|
this.globalGridAttr.connector = val
|
if(val === 'normal'){
|
this.curCell.setRouter(val)
|
}else {
|
this.curCell.setRouter('manhattan')
|
}
|
this.curCell.setConnector(val)
|
},
|
onLabelChange(e) {
|
const val = e
|
this.globalGridAttr.label = val
|
|
this.curCell.setLabels([
|
{
|
attrs: {
|
text: {
|
text: val,
|
},
|
},
|
position:{
|
distance:0.5,
|
angle: 180,
|
options: {
|
keepGradient: true,
|
ensureLegibility: true
|
}
|
}
|
}
|
])
|
},
|
onLabelDistanceChange(e){
|
const val = e
|
this.globalGridAttr.distance = val
|
console.log(val)
|
this.curCell.setLabels([
|
{
|
attrs: {
|
text: {
|
text: this.globalGridAttr.label,
|
},
|
},
|
position: {
|
distance: val,
|
angle: 180,
|
options: {
|
keepGradient: true,
|
ensureLegibility: true
|
}
|
},
|
}
|
])
|
},
|
// onLabelAngleChange(e){
|
// const val = e
|
// // this.globalGridAttr.angle = val
|
// this.curCell.setLabels([
|
// {
|
// attrs: {
|
// text: {
|
// text: this.globalGridAttr.label,
|
// },
|
// },
|
// position: {
|
// distance:this.globalGridAttr.distance,
|
// options: {
|
// keepGradient: true
|
// }
|
// },
|
// }
|
// ])
|
// }
|
}
|
}
|
</script>
|
|
<style >
|
#EdgeTabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
|
width: 100% !important;
|
}
|
#EdgeTabPane .el-tabs__nav.is-top{
|
-webkit-transform: translateX(35px) !important
|
}
|
#EdgeTabPane .el-color-picker__trigger{
|
width: 100%;
|
}
|
</style>
|
