<template>
|
<div class="right_box">
|
<hr />
|
<div v-if="type === 'node'">
|
<el-form
|
label-width="80px"
|
:model="formModel"
|
size="mini"
|
ref="form"
|
:rules="rules"
|
>
|
<el-form-item label="名称" prop="label">
|
<el-input v-model.trim="formModel.label" :maxLength="20" disabled/>
|
</el-form-item>
|
<el-form-item label="形状">
|
<el-select
|
v-model="formModel.shape"
|
placeholder="请选择形状"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in shapeTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="颜色">
|
<el-input v-model.trim="formModel.color" clearable />
|
</el-form-item>
|
<el-form-item label="宽度" prop="width">
|
<el-input v-model.trim.number="formModel.width" clearable>
|
<template slot="prepend">宽</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="高度" prop="height">
|
<el-input v-model.trim.number="formModel.height" clearable>
|
<template slot="prepend">高</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div v-else-if="type === 'edge'">
|
<el-form
|
label-width="80px"
|
:model="formModel"
|
size="small"
|
:rules="rules"
|
>
|
<el-form-item label="起始状态">
|
<el-input v-model.trim="formModel.source" disabled/>
|
</el-form-item>
|
<el-form-item label="目标状态">
|
<el-input v-model.trim="formModel.target" disabled/>
|
</el-form-item>
|
<el-form-item label="名称">
|
<el-input v-model.trim="formModel.label"/>
|
</el-form-item>
|
<el-form-item label="形状">
|
<el-select
|
v-model="formModel.shape"
|
placeholder="请选择形状"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in lineTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="btn_box">
|
<el-button type="primary" size="mini" @click="handleSubmit"
|
>更新属性</el-button
|
>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { cloneDeep } from 'lodash'
|
|
export default {
|
name: 'EditorDetailForm',
|
|
inject: ['root'],
|
|
props: ['type', 'readOnly'],
|
|
data() {
|
return {
|
formModel: {},
|
fontSize: 12,
|
shapeTypeList: [
|
{ label: '矩形', value: 'flow-rect' },
|
{ label: '椭圆', value: 'flow-circle' },
|
{ label: '菱形', value: 'flow-rhombus' },
|
{ label: '胶囊', value: 'flow-capsule' },
|
],
|
lineTypeList: [
|
{ label: '曲线', value: 'flow-smooth' },
|
{ label: '折线', value: 'flow-polyline' },
|
{ label: '圆角折线', value: 'flow-polyline-round' },
|
],
|
rules: {
|
label: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
width: [
|
{ required: true, message: '宽度不能为空', trigger: 'blur' },
|
{ pattern: /^[0-9]+$/, message: '宽度只能为数字', trigger: 'blur' },
|
],
|
height: [
|
{ required: true, message: '高度不能为空', trigger: 'blur' },
|
{ pattern: /^[0-9]+$/, message: '高度只能为数字', trigger: 'blur' },
|
],
|
},
|
}
|
},
|
|
created() {
|
const formModel = this.root.propsAPI.getSelected()[0].getModel()
|
this.formModel = Object.assign(
|
{ width: 80, height: 48 },
|
{ shape: 'flow-smooth' },
|
cloneDeep(formModel) // 防止误编辑
|
)
|
},
|
|
methods: {
|
async handleSubmit() {
|
if (this.type === 'node') {
|
await this.$refs.form.validate()
|
}
|
const { getSelected, executeCommand, update } = this.root.propsAPI
|
const { formModel } = this
|
setTimeout(() => {
|
const item = getSelected()[0]
|
if (!item) return
|
|
// 自动调整尺寸
|
const adjustSize = (model) => {
|
if (model.type !== 'node' || model.shape !== 'flow-rect') {
|
return model
|
}
|
const canvas = document.createElement('canvas')
|
const canvasContext = canvas.getContext('2d')
|
canvasContext.font = this.fontSize + 'px System'
|
let label = model.label.replace('\n', '')
|
let sourceWidth = this.formModel.width
|
let sourceHeight = this.formModel.height
|
const spacing = 10
|
// 获取文字宽度
|
const widthWithSpacing = canvasContext.measureText(label).width + spacing
|
model.size = `${sourceWidth}*${sourceHeight}` // 先恢复默认尺寸
|
|
if (widthWithSpacing <= sourceWidth) {
|
return model
|
}
|
|
// 自动折行
|
let multilineText = ''
|
let multilineCount = 1
|
let multilineTextWidth = 0
|
|
for (const char of label) {
|
const { width } = canvasContext.measureText(char)
|
console.log(multilineTextWidth + width + spacing, 'multilineTextWidth');
|
if (multilineTextWidth + width + spacing >= sourceWidth) {
|
multilineText += '\n'
|
multilineTextWidth = 0
|
multilineCount++
|
}
|
multilineText += char
|
multilineTextWidth += width
|
}
|
|
return {
|
...model,
|
label: multilineText,
|
size: `${sourceWidth}*${Math.max(
|
sourceHeight,
|
this.fontSize * multilineCount * 1.2 + spacing
|
)}`,
|
}
|
}
|
|
const newFormModel = adjustSize(formModel)
|
console.log(newFormModel, 'newFormModel')
|
executeCommand(() => {
|
update(item, newFormModel)
|
})
|
}, 0)
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.btn_box {
|
text-align: center;
|
}
|
</style>
|
