|
@@ -13,6 +13,9 @@
|
|
|
<a-form-item v-show="formState.text != null" label="内容">
|
|
<a-form-item v-show="formState.text != null" label="内容">
|
|
|
<a-input v-model:value="formState.text" @change="textChange" />
|
|
<a-input v-model:value="formState.text" @change="textChange" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
+ <a-form-item v-show="formState.fontSize != null" label="字体大小">
|
|
|
|
|
+ <a-input v-model:value="formState.fontSize" @change="fontSizeChange" />
|
|
|
|
|
+ </a-form-item>
|
|
|
<a-form-item v-show="formState.type != null" label="节点类型">
|
|
<a-form-item v-show="formState.type != null" label="节点类型">
|
|
|
<a-input v-model:value="formState.type" @change="typeChange" />
|
|
<a-input v-model:value="formState.type" @change="typeChange" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -80,6 +83,7 @@ const formState = ref({
|
|
|
height: null,
|
|
height: null,
|
|
|
width: null,
|
|
width: null,
|
|
|
type: null,
|
|
type: null,
|
|
|
|
|
+ fontSize:null,
|
|
|
});
|
|
});
|
|
|
const container = ref(null);
|
|
const container = ref(null);
|
|
|
const stencilContainer = ref(null);
|
|
const stencilContainer = ref(null);
|
|
@@ -150,7 +154,9 @@ const before = () =>{
|
|
|
const textChange = () => {
|
|
const textChange = () => {
|
|
|
cellTem.attr('label/text', formState.value.text);
|
|
cellTem.attr('label/text', formState.value.text);
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
|
|
+const fontSizeChange = () => {
|
|
|
|
|
+ cellTem.attr('label/fontSize', formState.value.fontSize);
|
|
|
|
|
+};
|
|
|
const output = () => {
|
|
const output = () => {
|
|
|
visible.value = true;
|
|
visible.value = true;
|
|
|
// console.log(graph.toJSON());
|
|
// console.log(graph.toJSON());
|
|
@@ -167,7 +173,7 @@ const getPng = () => {
|
|
|
// DataUri.downloadDataUri(dataUri, 'temp.jpeg');
|
|
// DataUri.downloadDataUri(dataUri, 'temp.jpeg');
|
|
|
}, {
|
|
}, {
|
|
|
serializeImages: true,
|
|
serializeImages: true,
|
|
|
- quality: 1,
|
|
|
|
|
|
|
+ quality: 1,//图片质量
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -194,7 +200,7 @@ const heightChange = () => {
|
|
|
const setGraph = () => {
|
|
const setGraph = () => {
|
|
|
graph = new Graph({
|
|
graph = new Graph({
|
|
|
container: container.value,
|
|
container: container.value,
|
|
|
- width: 400,
|
|
|
|
|
|
|
+ width: 800,
|
|
|
height: 400,
|
|
height: 400,
|
|
|
background: {
|
|
background: {
|
|
|
color: '#ddd',
|
|
color: '#ddd',
|
|
@@ -253,8 +259,13 @@ const setGraph = () => {
|
|
|
formState.value.border = null;
|
|
formState.value.border = null;
|
|
|
formState.value.imgUrl = null;
|
|
formState.value.imgUrl = null;
|
|
|
formState.value.type = null;
|
|
formState.value.type = null;
|
|
|
|
|
+ formState.value.fontSize = null;
|
|
|
cellTem = null;
|
|
cellTem = null;
|
|
|
cellTem = cell;
|
|
cellTem = cell;
|
|
|
|
|
+ if (cell.attrs.label != undefined && cell.attrs.label.fontSize != null) {
|
|
|
|
|
+ console.log('fontSize','!!!!!!!!!!!!!!!');
|
|
|
|
|
+ formState.value.fontSize = cell.attrs.label.fontSize;
|
|
|
|
|
+ }
|
|
|
if (cell.attrs.label != undefined && cell.attrs.label.text != null) {
|
|
if (cell.attrs.label != undefined && cell.attrs.label.text != null) {
|
|
|
formState.value.text = cell.attrs.label.text;
|
|
formState.value.text = cell.attrs.label.text;
|
|
|
}
|
|
}
|