Skip to content

Commit 87ded10

Browse files
Jason-chen-coderJason-chen-coder
committed
调整中心连接点的代码位置
1 parent 8edc687 commit 87ded10

2 files changed

Lines changed: 58 additions & 36 deletions

File tree

‎src/views/customToolbar/component/styleSelect.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,13 @@
9393
</el-tab-pane>
9494
<el-tab-pane label="文本">
9595
<el-form :inline="true" :model="form" class="style-form" size="mini" label-position="left">
96+
<el-form-item label="文字内容">
97+
<el-input v-model="cellTextValue" @change="$emit('textValueChange', cellTextValue)"></el-input>
98+
</el-form-item>
9699
<el-form-item label="字体大小">
97100
<el-input-number
98101
v-model="form.fontSize"
99102
@change="$emit('changeFontSize', form.fontSize)"
100-
label="字体大小"
101103
></el-input-number>
102104
</el-form-item>
103105
<el-row>
@@ -144,7 +146,7 @@
144146
</template>
145147
<script>
146148
export default {
147-
props: ['isNode', 'cellStyle', 'graphY', 'graphX', 'currentNormalType'],
149+
props: ['isNode', 'cellStyle', 'graphY', 'graphX', 'currentNormalType', 'textValue'],
148150
data () {
149151
return {
150152
edgeOptions: [
@@ -170,6 +172,7 @@ export default {
170172
fontIsStrickout: false,
171173
newConfigOrder: 0,
172174
newConfigOrderId: '',
175+
cellTextValue: '',
173176
fontStyle: 0,
174177
predefineColors: [
175178
'#ff4500',
@@ -245,7 +248,6 @@ export default {
245248
watch: {
246249
cellStyle: {
247250
handler (newvalue) {
248-
console.log('newvalue', newvalue)
249251
this.form.dashed = newvalue.dashed ? newvalue.dashed : '0';
250252
this.form.strokeWidth = newvalue.strokeWidth;
251253
this.form.strokeColor = newvalue.strokeColor;
@@ -289,6 +291,9 @@ export default {
289291
handler (newvalue) {
290292
this.$emit("changeFontStyle", newvalue)
291293
}
294+
},
295+
textValue (newValue) {
296+
this.cellTextValue = newValue;
292297
}
293298
},
294299
methods: {

‎src/views/customToolbar/customToolbar.vue‎

Lines changed: 50 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,8 @@
167167
@changeFontStyle="changeFontStyle"
168168
@changeNodeimage="changeNodeimage"
169169
@edgeChange="edgeChange"
170+
@textValueChange="textValueChange"
171+
:textValue="textValue"
170172
:isNode="isNode"
171173
:cellStyle="cellStyle"
172174
:currentNormalType="currentNormalType"
@@ -176,7 +178,7 @@
176178
/>
177179
<div class="json-viewer">
178180
<h4 style="text-align:center">Json数据结构</h4>
179-
<json-viewer :value="jsonData" style="height:100%" :expand-depth="5" copyable sort></json-viewer>
181+
<json-viewer :value="jsonData" style="height:80%" copyable sort></json-viewer>
180182
</div>
181183
</div>
182184

@@ -271,6 +273,7 @@ export default {
271273
graphX: 100,
272274
graphY: 10,
273275
undoMng: '',
276+
textValue: '',
274277
uploadDataVisible: false,
275278
isOutputXml: false,
276279
edgeStyle: 'orthogonalEdgeStyle',
@@ -335,12 +338,9 @@ export default {
335338
this.graph.connectionHandler.createEdgeState = () => {
336339
// 设置预览的连接线,第三个参数为连接成功后连接线上的label
337340
var edge = this.graph.createEdge(null, null, null, null, null);
338-
console.log(edge);
339341
// edge.style += `;edgeStyle=orthogonalEdgeStyle `
340342
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
341343
};
342-
// 显示中心端口图标
343-
this.graph.connectionHandler.targetConnectImage = true;
344344
345345
// 是否开启旋转
346346
mxVertexHandler.prototype.livePreview = true;
@@ -374,7 +374,7 @@ export default {
374374
let group = new mxCell('Group', new mxGeometry(), 'group;fontColor=white;');
375375
group.setVertex(true);
376376
// 设置组可连接
377-
group.setConnectable(false);
377+
group.setConnectable(true);
378378
// group.setCellsResizable(false);
379379
this.editor.defaultGroup = group;
380380
this.editor.groupBorderSize = 80;
@@ -384,10 +384,10 @@ export default {
384384
return this.isValidDropTarget(cell);
385385
};
386386
387-
// 是否可以被选中
388-
this.graph.isCellSelectable = function (cell) {
389-
return !this.isCellLocked(cell);
390-
};
387+
// // 是否可以被选中
388+
// this.graph.isCellSelectable = function (cell) {
389+
// return !this.isCellLocked(cell);
390+
// };
391391
392392
// 返回元素
393393
this.graph.getLabel = function (cell) {
@@ -416,7 +416,7 @@ export default {
416416
};
417417
418418
// 是否可以被选中
419-
// this.graph.isCellSelectable(false)
419+
this.graph.isCellSelectable(true)
420420
421421
// 允许重复连接
422422
this.graph.setMultigraph(true);
@@ -438,16 +438,13 @@ export default {
438438
// this.graph.setPanning(true);
439439
this.graph.setPanning = true;
440440
// 开启提示
441-
this.graph.setTooltips(false);
441+
this.graph.setTooltips(true);
442442
// 允许连线
443443
this.graph.setConnectable(true);
444444
//移动元素的步长
445445
this.graph.gridSize = 3;
446446
this.graph.setBorder(160);
447-
// 禁止浮动自动连接
448-
this.graph.connectionHandler.isConnectableCell = function () {
449-
return false;
450-
};
447+
451448
// 开启方块上的文字编辑功能
452449
// this.graph.setCellsEditable(true);
453450
// 禁止双击修改内容
@@ -679,7 +676,7 @@ export default {
679676
let groupObj = _.pick(addCell, ['id', 'title', 'parent', 'geometry']);
680677
this.jsonData['cells']['groups'].push(groupObj);
681678
} else {
682-
let nodeObj = _.pick(addCell, ['id', 'title', 'parent', 'geometry']);
679+
let nodeObj = _.pick(addCell, ['id', , 'title', 'parent', 'geometry']);
683680
this.jsonData['cells']['nodes'].push(nodeObj);
684681
this.$message.info('添加了一个节点');
685682
}
@@ -774,11 +771,16 @@ export default {
774771
// console.log(cell);
775772
// var cell = this.graph.getSelectionCell();
776773
if (cell) {
774+
this.textValue = cell['value'] ? cell['value'] : cell['title'];
775+
console.log(this.textValue, 'cellValue')
776+
console.log('cellValuie', cell)
777777
cell.vertex ? this.isNode = true : this.isNode = false;
778778
var getcellStyle = cell.getStyle() ? cell.getStyle() : null;
779779
if (!this.isNode) {
780+
// 点击的不是节点
780781
getcellStyle ? this.edgeStyle = getcellStyle : 'orthogonalEdgeStyle';
781782
} else {
783+
// 点击的是节点
782784
// console.log('getcellStyle', getcellStyle);
783785
if (getcellStyle) {
784786
var arr = getcellStyle.split(';');
@@ -978,13 +980,16 @@ export default {
978980
style[mxConstants.STYLE_ROUNDED] = true;
979981
// 获取全局Edge、label样式
980982
var edgeStyle = this.graph.getStylesheet().getDefaultEdgeStyle();
981-
// let labelStyle = this.graph.getStylesheet().getDefaultVertexStyle();
983+
let labelStyle = this.graph.getStylesheet().getDefaultVertexStyle();
984+
labelStyle[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; //自动换行
985+
console.log(labelStyle, 'labelStyle')
982986
// 设置连线风格(设置为正交折线)
983987
edgeStyle['edgeStyle'] = 'orthogonalEdgeStyle';
984988
985989
// 选中 cell/edge 后的伸缩大小的点/拖动连线位置的点的颜色
986-
mxConstants.STYLE_WHITE_SPACE = 'wrap';
987-
mxConstants.HANDLE_FILLCOLOR = '#99ccff';
990+
style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'
991+
992+
mxConstants.HANDLE_FILLCOLOR = '#409eff';
988993
mxConstants.HANDLE_STROKECOLOR = 'transparent';
989994
mxConstants.STYLE_ANCHOR_POINT_DIRECTION = 'anchorPointDirection';
990995
mxConstants.STYLE_STYLE_ROTATION = 'rotation';
@@ -1011,24 +1016,36 @@ export default {
10111016
mxConstants.GUIDE_STROKEWIDTH = 2;
10121017
// 导航线自动连接到目标
10131018
mxEdgeHandler.prototype.snapToTerminals = true;
1014-
// 自动导航目标
1015-
mxEdgeHandler.prototype.snapToTerminals = true;
1016-
// 选中线条时的颜色
1017-
mxConstants.EDGE_SELECTION_COLOR = '#a81f14';
1019+
// 选中线条时的虚线颜色
1020+
mxConstants.EDGE_SELECTION_COLOR = '#99ccff';
1021+
// mxConstants.DEFAULT_INVALID_COLOR = 'yellow';
1022+
// mxConstants.INVALID_CONNECT_TARGET_COLOR = 'yellow';
1023+
// 连线(未满足连线要求)时预览的颜色
1024+
mxConstants.INVALID_COLOR = '#99ccff';
1025+
// 连线(满足连线要求)时预览的颜色
1026+
mxConstants.VALID_COLOR = 'blue';
1027+
// mxConstants.GUIDE_COLOR = 'yellow';
1028+
// mxConstants.LOCKED_HANDLE_FILLCOLOR = '#24bcab';
10181029
// 选中节点时选中框的颜色
10191030
mxConstants.VERTEX_SELECTION_COLOR = '#99ccff';
1031+
10201032
//折叠-/展开+图标大小
10211033
// mxGraph.prototype.collapsedImage = new mxImage('images/collapsed.gif', 15, 15);
10221034
// mxGraph.prototype.expandedImage = new mxImage('images/expanded.gif', 15, 15);
10231035
10241036
// 配置节点中心的连接图标
1025-
mxConnectionHandler.prototype.connectImage = new mxImage('icon/dot.gif', 10, 10);
1026-
1037+
mxConnectionHandler.prototype.connectImage = new mxImage('./icon/connectionpoint.png', 14, 14);
1038+
// 显示中心端口图标
1039+
graph.connectionHandler.targetConnectImage = false;
1040+
// 是否开启浮动自动连接
1041+
this.graph.connectionHandler.isConnectableCell = function () {
1042+
return true;
1043+
};
10271044
// 设定锚点的位置、可编辑状态和图标
10281045
mxConstraintHandler.prototype.pointImage = new mxImage('icon/dot.svg', 10, 10)
10291046
// 设置锚点上的高亮颜色
10301047
mxConstraintHandler.prototype.createHighlightShape = function () {
1031-
return new mxEllipse(null, '#409eff99', '#409eff99', 14)
1048+
return new mxEllipse(null, '#409eff99', '#409eff99', 5)
10321049
}
10331050
10341051
mxShape.prototype.constraints = [
@@ -1049,12 +1066,6 @@ export default {
10491066
new mxConnectionConstraint(new mxPoint(0.75, 1), true),
10501067
new mxConnectionConstraint(new mxPoint(1, 1), true)];
10511068
mxPolyline.prototype.constraints = null;
1052-
// 保留(可用于拖拽预览)
1053-
// const oldCreatePreviewShape = mxGraphHandler.prototype.createPreviewShape;
1054-
// mxGraphHandler.prototype.createPreviewShape = function createPreviewShape(...args) {
1055-
// graph.fireEvent(new mxEventObject(mxEvent.VERTEX_START_MOVE));
1056-
// return oldCreatePreviewShape.apply(this, args);
1057-
// };
10581069
},
10591070
10601071
//设置连线样式
@@ -1151,6 +1162,12 @@ export default {
11511162
}
11521163
},
11531164
1165+
// 修改节点文本内容
1166+
textValueChange (value) {
1167+
var cell = this.graph.getSelectionCells();
1168+
console.log(value, '节点文本新内容', this.graph);
1169+
this.graph.cellLabelChanged(cell[0], value)
1170+
},
11541171
changeConfigOrder (val) {
11551172
// 获取当前的normalType元素,并更新他的title
11561173
this.currentNormalType.title = val.newConfigOrder;
@@ -1616,7 +1633,7 @@ export default {
16161633
.json-viewer {
16171634
overflow: auto;
16181635
position: absolute;
1619-
top: 30%;
1636+
top: 35%;
16201637
width: 260px;
16211638
height: 70%;
16221639
bottom: 0;

0 commit comments

Comments
 (0)