|
|
@@ -11,70 +11,71 @@
|
|
|
:style="shape.style"
|
|
|
:class="shape.class"
|
|
|
ref="baseShapeRef">
|
|
|
- <!-- <span class="shape-label">{{ shape.title }}</span> -->
|
|
|
+ <span class="shape-label">{{ shape.title }}</span>
|
|
|
</span>
|
|
|
</t-collapse-panel>
|
|
|
</t-collapse>
|
|
|
</div>
|
|
|
<!-- 顶部工具 -->
|
|
|
<div class="mx-toolbar">
|
|
|
- <t-col :span="4">
|
|
|
- <div
|
|
|
- class="grid-content bg-purple"
|
|
|
- style="color: rgb(64, 158, 255); font-weight: 800; font-size: 22px; margin-left: 44px">
|
|
|
- 测试用例
|
|
|
- </div>
|
|
|
- </t-col>
|
|
|
- <t-col :span="4" class="tools-group">
|
|
|
- <t-tooltip class="item" effect="dark" content="放大" placement="bottom">
|
|
|
- <t-button variant="text">
|
|
|
- <template #icon><add-icon /></template>
|
|
|
- </t-button>
|
|
|
- </t-tooltip>
|
|
|
- <t-tooltip class="item" effect="dark" content="缩小" placement="bottom">
|
|
|
- <t-button variant="text">
|
|
|
- <template #icon><MinusIcon /></template>
|
|
|
- </t-button>
|
|
|
- </t-tooltip>
|
|
|
- </t-col>
|
|
|
+ <t-row>
|
|
|
+ <t-col :span="4">
|
|
|
+ <div
|
|
|
+ class="grid-content bg-purple"
|
|
|
+ style="color: rgb(64, 158, 255); font-weight: 800; font-size: 22px; margin-left: 44px">
|
|
|
+ 测试用例
|
|
|
+ </div>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="4" class="tools-group">
|
|
|
+ <t-tooltip class="item" effect="dark" content="放大" placement="bottom">
|
|
|
+ <t-button variant="text">
|
|
|
+ <template #icon><add-icon /></template>
|
|
|
+ </t-button>
|
|
|
+ </t-tooltip>
|
|
|
+ <t-tooltip class="item" effect="dark" content="缩小" placement="bottom">
|
|
|
+ <t-button variant="text">
|
|
|
+ <template #icon><MinusIcon /></template>
|
|
|
+ </t-button>
|
|
|
+ </t-tooltip>
|
|
|
+ </t-col>
|
|
|
+ </t-row>
|
|
|
<input ref="fileInput" type="file" accept=".xml" style="display: none" />
|
|
|
</div>
|
|
|
<!-- 中心画布 -->
|
|
|
<div ref="graphContainerRef" id="mxgraph-container" class="mxgraph-container"></div>
|
|
|
<!-- 右侧属性 -->
|
|
|
<div class="mx-properties">
|
|
|
- <div class="properties-title">属性</div>
|
|
|
- <div v-if="selectedCell" class="properties-content">
|
|
|
- <div class="property-item">
|
|
|
- <label>文本:</label>
|
|
|
- <input v-model="cellText" @change="updateCellText" type="text" />
|
|
|
- </div>
|
|
|
- <div class="property-item">
|
|
|
- <label>宽度:</label>
|
|
|
- <input
|
|
|
- v-model.number="cellGeometry.width"
|
|
|
- @change="updateCellGeometry"
|
|
|
- type="number"
|
|
|
- min="10" />
|
|
|
- </div>
|
|
|
- <div class="property-item">
|
|
|
- <label>高度:</label>
|
|
|
- <input
|
|
|
- v-model.number="cellGeometry.height"
|
|
|
- @change="updateCellGeometry"
|
|
|
- type="number"
|
|
|
- min="10" />
|
|
|
- </div>
|
|
|
- <div class="property-item">
|
|
|
- <label>填充色:</label>
|
|
|
- <input v-model="cellStyle.fillColor" @change="updateCellStyle" type="color" />
|
|
|
- </div>
|
|
|
- <div class="property-item">
|
|
|
- <label>边框色:</label>
|
|
|
- <input v-model="cellStyle.strokeColor" @change="updateCellStyle" type="color" />
|
|
|
- </div>
|
|
|
+ <MxProperties
|
|
|
+ @changeDashed="changeDashed"
|
|
|
+ @changeStrokeColor="changeStrokeColor"
|
|
|
+ @changeStrokeWidth="changeStrokeWidth"
|
|
|
+ @changeFontSize="changeFontSize"
|
|
|
+ @changeFontColor="changeFontColor"
|
|
|
+ @changeLabelBackgroundColor="changeLabelBackgroundColor"
|
|
|
+ @changeConfigOrder="changeConfigOrder"
|
|
|
+ @changeFillColor="changeFillColor"
|
|
|
+ @changeShadow="changeShadow"
|
|
|
+ @changeFontStyle="changeFontStyle"
|
|
|
+ @changeNodeimage="changeNodeimage"
|
|
|
+ @edgeChange="edgeChange"
|
|
|
+ @textValueChange="textValueChange"
|
|
|
+ :textValue="textValue"
|
|
|
+ :isNode="isNode"
|
|
|
+ :cellStyle="cellStyle"
|
|
|
+ :currentNormalType="currentNormalType"
|
|
|
+ :graphX="graphX"
|
|
|
+ :graphY="graphY"
|
|
|
+ ref="styleSelect" />
|
|
|
+ <div class="json-viewer">
|
|
|
+ <h4 style="text-align: center">Json数据结构</h4>
|
|
|
+ <json-viewer
|
|
|
+ :value="jsonData"
|
|
|
+ style="height: 80%"
|
|
|
+ :expand-depth="5"
|
|
|
+ copyable
|
|
|
+ boxed
|
|
|
+ sort></json-viewer>
|
|
|
</div>
|
|
|
- <div v-else class="properties-empty">未选中任何元素</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -97,7 +98,6 @@ import {
|
|
|
myMxGeometry,
|
|
|
myMxRubberband,
|
|
|
myMxUndoManager,
|
|
|
- myMxOutline,
|
|
|
myMxEventObject,
|
|
|
myMxGraphHandler,
|
|
|
myMxEdgeHandler,
|
|
|
@@ -107,7 +107,8 @@ import {
|
|
|
myMxEllipse,
|
|
|
myMxShape,
|
|
|
myMxConnectionConstraint,
|
|
|
- myMxPolyline
|
|
|
+ myMxPolyline,
|
|
|
+ myMxEdgeStyle
|
|
|
} from '@/graph/mxGraph'
|
|
|
import { CellGeometry, GraphData } from '@/types/mxgraph'
|
|
|
import { shapes } from '@/views/components/MyMxGraph/graph_shapes'
|
|
|
@@ -118,7 +119,9 @@ const baseShapeRef = ref<HTMLElement[]>([])
|
|
|
const graph = ref<typeof myMxGraph | null>(null)
|
|
|
const editor = ref<typeof myMxEditor | null>(null)
|
|
|
const undoMng = ref<typeof myMxUndoManager | null>(null)
|
|
|
-const outline = ref<typeof myMxOutline | null>(null)
|
|
|
+// const outline = ref<typeof myMxOutline | null>(null)
|
|
|
+const currentNormalType = ref<typeof myMxCell | null>({})
|
|
|
+
|
|
|
// const currentNormalType = ref<typeof myMxCell | null>(null)
|
|
|
const textValue = ref('')
|
|
|
// const uploadDataVisible = ref(false)
|
|
|
@@ -171,47 +174,24 @@ watch(
|
|
|
{ immediate: true }
|
|
|
)
|
|
|
|
|
|
-function updateCellText() {
|
|
|
- if (!graph?.value || !selectedCell.value) return
|
|
|
- graph.value.getModel().setValue(selectedCell.value, cellText.value)
|
|
|
-}
|
|
|
-
|
|
|
-function updateCellGeometry() {
|
|
|
- if (!graph?.value || !selectedCell.value) return
|
|
|
- const geo = selectedCell.value.getGeometry()
|
|
|
- if (geo) {
|
|
|
- geo.width = cellGeometry.value.width
|
|
|
- geo.height = cellGeometry.value.height
|
|
|
- graph.value.getModel().setGeometry(selectedCell.value, geo)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function updateCellStyle() {
|
|
|
- if (!graph?.value || !selectedCell.value) return
|
|
|
- const newStyle = {
|
|
|
- [myMxConstants.STYLE_FILLCOLOR]: cellStyle.value.fillColor,
|
|
|
- [myMxConstants.STYLE_STROKECOLOR]: cellStyle.value.strokeColor
|
|
|
- }
|
|
|
- graph.value
|
|
|
- .getModel()
|
|
|
- .setStyle(
|
|
|
- selectedCell.value,
|
|
|
- myMxUtils.setStyle(graph.value.getModel().getStyle(selectedCell.value) || '', newStyle)
|
|
|
- )
|
|
|
-}
|
|
|
+// 初始化
|
|
|
const initGraph = (container: HTMLElement) => {
|
|
|
+ // 创建graph
|
|
|
editor.value = new myMxEditor()
|
|
|
graph.value = unref(editor).graph
|
|
|
editor.value.setGraphContainer(container)
|
|
|
|
|
|
// 配置样式
|
|
|
configureStyles(unref(graph))
|
|
|
+
|
|
|
// 去锯齿效果
|
|
|
myMxRectangleShape.prototype.crisp = true
|
|
|
+
|
|
|
// 定义全局变量，如。用于触发建立新的连接的活动区域的最小尺寸（以像素为单位），该部分（100％）的小区区域被用于触发新的连接，以及一些窗口和“下拉菜菜单选择
|
|
|
myMxConstants.MIN_HOTSPOT_SIZE = 16
|
|
|
myMxConstants.DEFAULT_HOTSPOT = 1
|
|
|
|
|
|
+ //cell创建支持传入html
|
|
|
graph.value.setHtmlLabels(true)
|
|
|
graph.value.setDropEnabled(true)
|
|
|
graph.value.setSplitEnabled(false)
|
|
|
@@ -278,16 +258,47 @@ const initGraph = (container: HTMLElement) => {
|
|
|
// }
|
|
|
|
|
|
// 设置默认组
|
|
|
- const group = new myMxCell('Group', new myMxGeometry(), 'group;fontColor=white;')
|
|
|
- group.setVertex(true)
|
|
|
- group.setConnectable(true)
|
|
|
- editor.value.defaultGroup = group
|
|
|
+ const group_ = new myMxCell('Group', new myMxGeometry(), 'group;fontColor=white;')
|
|
|
+ group_.setVertex(true)
|
|
|
+
|
|
|
+ // 设置组可连接
|
|
|
+ group_.setConnectable(true)
|
|
|
+ editor.value.defaultGroup = group_
|
|
|
editor.value.groupBorderSize = 80
|
|
|
|
|
|
// 是否根元素
|
|
|
- // graph.value.isValidRoot = function (cell) {
|
|
|
- // return this.isValidDropTarget(cell)
|
|
|
- // }
|
|
|
+ graph.value.isValidRoot = function (cell: any) {
|
|
|
+ return graph.value.isValidDropTarget(cell)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 返回元素
|
|
|
+ graph.value.getLabel = function (cell: any) {
|
|
|
+ let tmp = myMxGraph.prototype.getLabel.apply(this, arguments) // "supercall"
|
|
|
+ if (graph.value.isCellLocked(cell)) {
|
|
|
+ // 如元素被锁定 返回空标签
|
|
|
+ return ''
|
|
|
+ } else if (graph.value.isCellCollapsed(cell)) {
|
|
|
+ let index = tmp.indexOf('</h1>')
|
|
|
+ if (index > 0) {
|
|
|
+ tmp = tmp.substring(0, index + 5)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return tmp
|
|
|
+ }
|
|
|
+
|
|
|
+ // 目标是否有效
|
|
|
+ graph.value.isValidDropTarget = function (cell: any) {
|
|
|
+ // console.log(cell, cells, evt);
|
|
|
+ return graph.value.isSwimlane(cell)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 是否根元素
|
|
|
+ graph.value.isValidRoot = function (cell: any) {
|
|
|
+ return graph.value.isValidDropTarget(cell)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 是否可以被选中
|
|
|
+ graph.value.isCellSelectable(true)
|
|
|
|
|
|
// 允许重复连接
|
|
|
graph.value.setMultigraph(true)
|
|
|
@@ -306,7 +317,8 @@ const initGraph = (container: HTMLElement) => {
|
|
|
graph.value.setResizeContainer(true)
|
|
|
|
|
|
// 开启画布平滑移动
|
|
|
- graph.value.setPanning(true)
|
|
|
+ graph.value.setPanning = true
|
|
|
+ // graph.value.setPanning(true)
|
|
|
// 开启提示
|
|
|
graph.value.setTooltips(false)
|
|
|
// 允许连线
|
|
|
@@ -327,80 +339,85 @@ const initGraph = (container: HTMLElement) => {
|
|
|
graph.value.getView().addListener(myMxEvent.UNDO, listener)
|
|
|
|
|
|
// 创建缩略图
|
|
|
- outline.value = new myMxOutline(graph.value, document.createElement('div'))
|
|
|
-
|
|
|
+ // outline.value = new myMxOutline(graph.value, document.createElement('div'))
|
|
|
+ if (graph.value == null || graph.value == undefined) {
|
|
|
+ return
|
|
|
+ }
|
|
|
// 从value中获取显示的内容(如果节点的value为空则显示节点的title)
|
|
|
graph.value.convertValueToString = (cell: { [x: string]: any }) => {
|
|
|
return cell['value'] ? cell['value'] : cell['title']
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const configureStyles = (graph: typeof myMxGraph) => {
|
|
|
+const configureStyles = (_graph: typeof myMxGraph) => {
|
|
|
// 设置节点的文字可被移动
|
|
|
- graph.vertexLabelsMovable = false
|
|
|
-
|
|
|
- const vertexStyle = graph.getStylesheet().getDefaultVertexStyle()
|
|
|
- vertexStyle[myMxConstants.STYLE_SHAPE] = myMxConstants.SHAPE_LABEL
|
|
|
- vertexStyle[myMxConstants.STYLE_PERIMETER] = myMxPerimeter.RectanglePerimeter
|
|
|
- vertexStyle[myMxConstants.STYLE_VERTICAL_ALIGN] = myMxConstants.ALIGN_MIDDLE
|
|
|
- vertexStyle[myMxConstants.STYLE_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
- vertexStyle[myMxConstants.STYLE_IMAGE_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
- vertexStyle[myMxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
+ _graph.vertexLabelsMovable = false
|
|
|
+
|
|
|
+ // const vertexStyle = _graph.getStylesheet().getDefaultVertexStyle()
|
|
|
+
|
|
|
+ let style = new Object()
|
|
|
+ style[myMxConstants.STYLE_SHAPE] = myMxConstants.SHAPE_LABEL
|
|
|
+ style[myMxConstants.STYLE_PERIMETER] = myMxPerimeter.RectanglePerimeter
|
|
|
+ style[myMxConstants.STYLE_VERTICAL_ALIGN] = myMxConstants.ALIGN_MIDDLE
|
|
|
+ style[myMxConstants.STYLE_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
+ style[myMxConstants.STYLE_IMAGE_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
+ style[myMxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
// style[myMxConstants.STYLE_SPACING_TOP] = 6;
|
|
|
- vertexStyle[myMxConstants.STYLE_SPACING_LEFT] = 5
|
|
|
+ style[myMxConstants.STYLE_SPACING_LEFT] = 5
|
|
|
// style[myMxConstants.STYLE_GRADIENTCOLOR] = 'skyblue'; // 渐变颜色
|
|
|
- vertexStyle[myMxConstants.STYLE_STROKECOLOR] = '#5d65df' // 线条颜色
|
|
|
- vertexStyle[myMxConstants.STYLE_FILLCOLOR] = '#FFFFFF'
|
|
|
- vertexStyle[myMxConstants.STYLE_FONTCOLOR] = '#1d258f' // 字体颜色
|
|
|
- vertexStyle[myMxConstants.STYLE_FONTFAMILY] = 'Verdana' // 字体风格
|
|
|
- vertexStyle[myMxConstants.STYLE_FONTSIZE] = '12' // 字体大小
|
|
|
- vertexStyle[myMxConstants.STYLE_FONTSTYLE] = '0' // 斜体字
|
|
|
- vertexStyle[myMxConstants.WORD_WRAP] = 'normal' // 文字换行 word-break: break-all;
|
|
|
- vertexStyle[myMxConstants['word-break']] = 'break-all' // 文字换行
|
|
|
- vertexStyle[myMxConstants.STYLE_WHITE_SPACE] = 'wrap' // 文字换行
|
|
|
- vertexStyle[myMxConstants.STYLE_ROUNDED] = false // 圆角
|
|
|
- vertexStyle[myMxConstants.STYLE_IMAGE_WIDTH] = '28' // 图片宽度
|
|
|
- vertexStyle[myMxConstants.STYLE_IMAGE_HEIGHT] = '28' // 图片高度
|
|
|
- vertexStyle[myMxConstants.STYLE_OPACITY] = '100' // 节点透明度(不包含字体)
|
|
|
-
|
|
|
- const cellStyle = graph.getStylesheet().getCellStyle('group')
|
|
|
- cellStyle[myMxConstants.STYLE_SHAPE] = myMxConstants.SHAPE_IMAGE
|
|
|
- cellStyle[myMxConstants.STYLE_FONTCOLOR] = '#774400'
|
|
|
- cellStyle[myMxConstants.STYLE_PERIMETER] = myMxPerimeter.RectanglePerimeter
|
|
|
- cellStyle[myMxConstants.STYLE_PERIMETER_SPACING] = '6'
|
|
|
- cellStyle[myMxConstants.STYLE_ALIGN] = myMxConstants.ALIGN_LEFT
|
|
|
- cellStyle[myMxConstants.STYLE_VERTICAL_ALIGN] = myMxConstants.ALIGN_MIDDLE
|
|
|
- cellStyle[myMxConstants.STYLE_FONTSIZE] = '10'
|
|
|
- cellStyle[myMxConstants.STYLE_FONTSTYLE] = 2
|
|
|
- cellStyle[myMxConstants.STYLE_IMAGE_WIDTH] = '16'
|
|
|
- cellStyle[myMxConstants.STYLE_IMAGE_HEIGHT] = '16'
|
|
|
- cellStyle[myMxConstants.STYLE_BACKGROUNDCOLOR] = 'transparent'
|
|
|
- // graph.getStylesheet().putCellStyle('group', cellStyle)
|
|
|
-
|
|
|
- const portCellStyle = graph.getStylesheet().getCellStyle('port')
|
|
|
- portCellStyle[myMxConstants.STYLE_SHAPE] = myMxConstants.SHAPE_IMAGE
|
|
|
- portCellStyle[myMxConstants.STYLE_FONTCOLOR] = '#774400'
|
|
|
- portCellStyle[myMxConstants.STYLE_PERIMETER] = myMxPerimeter.RectanglePerimeter
|
|
|
- portCellStyle[myMxConstants.STYLE_PERIMETER_SPACING] = '6'
|
|
|
- portCellStyle[myMxConstants.STYLE_ALIGN] = myMxConstants.ALIGN_LEFT
|
|
|
- portCellStyle[myMxConstants.STYLE_VERTICAL_ALIGN] = myMxConstants.ALIGN_MIDDLE
|
|
|
- portCellStyle[myMxConstants.STYLE_FONTSIZE] = '10'
|
|
|
- portCellStyle[myMxConstants.STYLE_FONTSTYLE] = 2
|
|
|
- portCellStyle[myMxConstants.STYLE_IMAGE_WIDTH] = '16'
|
|
|
- portCellStyle[myMxConstants.STYLE_IMAGE_HEIGHT] = '16'
|
|
|
- portCellStyle[myMxConstants.STYLE_BACKGROUNDCOLOR] = 'transparent'
|
|
|
- // graph.getStylesheet().putCellStyle('port', portCellStyle)
|
|
|
-
|
|
|
- const edgeStyle = graph.getStylesheet().getDefaultEdgeStyle()
|
|
|
-
|
|
|
- Object.assign(edgeStyle, {
|
|
|
- [myMxConstants.STYLE_LABEL_BACKGROUNDCOLOR]: '#FFFFFF',
|
|
|
- [myMxConstants.STYLE_STROKEWIDTH]: '2',
|
|
|
- [myMxConstants.STYLE_ROUNDED]: false
|
|
|
- })
|
|
|
+ style[myMxConstants.STYLE_STROKECOLOR] = '#5d65df' // 线条颜色
|
|
|
+ style[myMxConstants.STYLE_FILLCOLOR] = '#FFFFFF'
|
|
|
+ style[myMxConstants.STYLE_FONTCOLOR] = '#1d258f' // 字体颜色
|
|
|
+ style[myMxConstants.STYLE_FONTFAMILY] = 'Verdana' // 字体风格
|
|
|
+ style[myMxConstants.STYLE_FONTSIZE] = '12' // 字体大小
|
|
|
+ style[myMxConstants.STYLE_FONTSTYLE] = '0' // 斜体字
|
|
|
+ style[myMxConstants.WORD_WRAP] = 'normal' // 文字换行 word-break: break-all;
|
|
|
+ style[myMxConstants['word-break']] = 'break-all' // 文字换行
|
|
|
+ style[myMxConstants.STYLE_WHITE_SPACE] = 'wrap' // 文字换行
|
|
|
+ style[myMxConstants.STYLE_ROUNDED] = false // 圆角
|
|
|
+ style[myMxConstants.STYLE_IMAGE_WIDTH] = '28' // 图片宽度
|
|
|
+ style[myMxConstants.STYLE_IMAGE_HEIGHT] = '28' // 图片高度
|
|
|
+ style[myMxConstants.STYLE_OPACITY] = '100' // 节点透明度(不包含字体)
|
|
|
+ _graph.getStylesheet().putDefaultVertexStyle(style)
|
|
|
+
|
|
|
+ style = new Object()
|
|
|
+ style[myMxConstants.STYLE_SHAPE] = myMxConstants.SHAPE_SWIMLANE
|
|
|
+ style[myMxConstants.STYLE_PERIMETER] = myMxPerimeter.RectanglePerimeter
|
|
|
+ style[myMxConstants.STYLE_ALIGN] = myMxConstants.ALIGN_CENTER
|
|
|
+ style[myMxConstants.STYLE_VERTICAL_ALIGN] = myMxConstants.ALIGN_TOP
|
|
|
+ style[myMxConstants.STYLE_FILLCOLOR] = '#409eff'
|
|
|
+ style[myMxConstants.STYLE_STROKECOLOR] = '#409eff'
|
|
|
+ style[myMxConstants.STYLE_FONTCOLOR] = '#000000'
|
|
|
+ style[myMxConstants.STYLE_ROUNDED] = false
|
|
|
+ style[myMxConstants.STYLE_OPACITY] = '80'
|
|
|
+ style[myMxConstants.STYLE_STARTSIZE] = '30'
|
|
|
+ style[myMxConstants.STYLE_FONTSIZE] = '16'
|
|
|
+ style[myMxConstants.STYLE_FONTSTYLE] = 1
|
|
|
+ _graph.getStylesheet().putCellStyle('group', style)
|
|
|
+
|
|
|
+ style = new Object()
|
|
|
+ style[myMxConstants.STYLE_SHAPE] = myMxConstants.SHAPE_IMAGE
|
|
|
+ style[myMxConstants.STYLE_FONTCOLOR] = '#774400'
|
|
|
+ style[myMxConstants.STYLE_PERIMETER] = myMxPerimeter.RectanglePerimeter
|
|
|
+ style[myMxConstants.STYLE_PERIMETER_SPACING] = '6'
|
|
|
+ style[myMxConstants.STYLE_ALIGN] = myMxConstants.ALIGN_LEFT
|
|
|
+ style[myMxConstants.STYLE_VERTICAL_ALIGN] = myMxConstants.ALIGN_MIDDLE
|
|
|
+ style[myMxConstants.STYLE_FONTSIZE] = '10'
|
|
|
+ style[myMxConstants.STYLE_FONTSTYLE] = 2
|
|
|
+ style[myMxConstants.STYLE_IMAGE_WIDTH] = '16'
|
|
|
+ style[myMxConstants.STYLE_IMAGE_HEIGHT] = '16'
|
|
|
+ style[myMxConstants.STYLE_BACKGROUNDCOLOR] = 'transparent'
|
|
|
+ _graph.getStylesheet().putCellStyle('port', style)
|
|
|
+
|
|
|
+ // const edgeStyle = _graph.getStylesheet().getDefaultEdgeStyle()
|
|
|
+ style = _graph.getStylesheet().getDefaultEdgeStyle()
|
|
|
+ style[myMxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF'
|
|
|
+ style[myMxConstants.STYLE_STROKEWIDTH] = '2'
|
|
|
+ style[myMxConstants.STYLE_ROUNDED] = false
|
|
|
+ style[myMxConstants.STYLE_EDGE] = myMxEdgeStyle.ElbowConnector
|
|
|
|
|
|
- var edgeStyles = graph.getStylesheet().getDefaultEdgeStyle()
|
|
|
- // let labelStyle = graph.getStylesheet().getDefaultVertexStyle()
|
|
|
+ var edgeStyles = _graph.getStylesheet().getDefaultEdgeStyle()
|
|
|
+ // let labelStyle = _graph.getStylesheet().getDefaultVertexStyle()
|
|
|
|
|
|
// 设置连线风格(设置为正交折线)
|
|
|
edgeStyles['edgeStyle'] = 'orthogonalEdgeStyle'
|
|
|
@@ -425,7 +442,7 @@ const configureStyles = (graph: typeof myMxGraph) => {
|
|
|
// 应该使用实时预览的最大单元数。默认值为0，表示没有实时预览。
|
|
|
myMxGraphHandler.prototype.maxLivePreview = 100
|
|
|
// Alt 按下禁用导航线
|
|
|
- myMxGraphHandler.prototype.useGuidesForEvent = me => {
|
|
|
+ myMxGraphHandler.prototype.useGuidesForEvent = (me: { getEvent: () => any }) => {
|
|
|
return !myMxEvent.isAltDown(me.getEvent())
|
|
|
}
|
|
|
// 导航线颜色
|
|
|
@@ -451,13 +468,13 @@ const configureStyles = (graph: typeof myMxGraph) => {
|
|
|
// mxGraph.prototype.collapsedImage = new mxImage('images/collapsed.gif', 15, 15);
|
|
|
// mxGraph.prototype.expandedImage = new mxImage('images/expanded.gif', 15, 15);
|
|
|
|
|
|
- // 配置节点中心的连接图标(注釋掉即可指定錨點連接到另一個節點的錨點上)
|
|
|
- myMxConnectionHandler.prototype.connectImage = new myMxImage('./icon/connectionpoint.png', 14, 14)
|
|
|
+ // 配置节点中心的连接图标(注释掉即可指定锚点连接到另一个节点的锚点上)
|
|
|
+ myMxConnectionHandler.prototype.connectImage = new myMxImage('icon/connectionpoint.png', 14, 14)
|
|
|
// 显示中心端口图标
|
|
|
- graph.connectionHandler.targetConnectImage = false
|
|
|
+ _graph.connectionHandler.targetConnectImage = false
|
|
|
|
|
|
// 是否开启浮动自动连接
|
|
|
- graph.connectionHandler.isConnectableCell = () => {
|
|
|
+ graph.value.connectionHandler.isConnectableCell = () => {
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
@@ -492,7 +509,7 @@ const eventCenter = () => {
|
|
|
if (!graph.value) return
|
|
|
// 监听自定义事件
|
|
|
// graph.value.addListener(myMxEvent.NORMAL_TYPE_CLICKED, (_sender: any, evt: any) => {
|
|
|
- // const cell = evt.properties.cell.state.cell
|
|
|
+ // const cell = evt.properties.cell?.state.cell
|
|
|
// console.log('cell', cell)
|
|
|
// currentNormalType.value = cell
|
|
|
// })
|
|
|
@@ -520,6 +537,63 @@ const eventCenter = () => {
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
+
|
|
|
+ // 拖动节点
|
|
|
+ graph.value.addListener(
|
|
|
+ myMxEvent.CELLS_MOVED,
|
|
|
+ (_sender: any, evt: { properties: { cells: any[] } }) => {
|
|
|
+ // console.log(this.graph, 'graph');
|
|
|
+ let cellsName: any = []
|
|
|
+ nextTick(() => {
|
|
|
+ evt.properties.cells.forEach(
|
|
|
+ (item: { parent: { id: string | string[] }; title: string }) => {
|
|
|
+ item.parent.id.includes('group') && cellsName.push(item.title)
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // evt.properties.cells[0].parent.id !== '1' &&
|
|
|
+ // this.$message.info(`${[...cellsName]}节点进入${evt.properties.cells[0].parent.title}`)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // 删除节点
|
|
|
+ // 删除节点触发事件
|
|
|
+ graph.value.addListener(
|
|
|
+ myMxEvent.CELLS_REMOVED,
|
|
|
+ (_sender: any, evt: { properties: { cells: any } }) => {
|
|
|
+ nextTick(() => {
|
|
|
+ let removeCells = evt.properties.cells
|
|
|
+ console.log(removeCells, 'removeCells')
|
|
|
+ removeCells.forEach((item: { vertex: any; isGroup: any; id: string; edge: any }) => {
|
|
|
+ // 拿每一个cellId在jsonData中进行遍历,并进行移除
|
|
|
+ if (item.vertex) {
|
|
|
+ // 判断是否为组节点
|
|
|
+ if (item.isGroup) {
|
|
|
+ jsonData.value.cells.groups.splice(
|
|
|
+ jsonData.value.cells.groups.findIndex(jsonItem => {
|
|
|
+ return jsonItem.id === item.id
|
|
|
+ }),
|
|
|
+ 1
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ jsonData.value.cells.nodes.splice(
|
|
|
+ jsonData.value.cells.nodes.findIndex(jsonItem => {
|
|
|
+ return jsonItem.id === item.id
|
|
|
+ }),
|
|
|
+ 1
|
|
|
+ )
|
|
|
+ }
|
|
|
+ } else if (item.edge) {
|
|
|
+ jsonData.value.edges.splice(
|
|
|
+ jsonData.value.edges.findIndex(jsonItem => {
|
|
|
+ return jsonItem.id === item.id
|
|
|
+ }),
|
|
|
+ 1
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
// 配置鼠标事件
|
|
|
@@ -530,7 +604,17 @@ const configMouseEvent = () => {
|
|
|
currentState: null,
|
|
|
previousStyle: null,
|
|
|
|
|
|
- mouseDown: (_sender, evt) => {
|
|
|
+ mouseDown: (
|
|
|
+ _sender: any,
|
|
|
+ evt: {
|
|
|
+ state: {
|
|
|
+ cell: {
|
|
|
+ style: any
|
|
|
+ edge: any
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ) => {
|
|
|
if (!evt.state) {
|
|
|
console.log('点击了画布')
|
|
|
return
|
|
|
@@ -552,7 +636,7 @@ const configMouseEvent = () => {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- mouseMove: (_sender, me) => {
|
|
|
+ mouseMove: (_sender: any, me: { graphX: number; graphY: number }) => {
|
|
|
graphX.value = Math.ceil(me.graphX)
|
|
|
graphY.value = Math.ceil(me.graphY)
|
|
|
},
|
|
|
@@ -578,7 +662,7 @@ const configMouseEvent = () => {
|
|
|
if (getcellStyle) {
|
|
|
const arr = getcellStyle.split(';')
|
|
|
const styleObject: Record<string, any> = {}
|
|
|
- arr.forEach(item => {
|
|
|
+ arr.forEach((item: { split: (arg0: string) => [any, any] }) => {
|
|
|
const [key, value] = item.split('=')
|
|
|
if (key && value) {
|
|
|
styleObject[key] = value
|
|
|
@@ -622,7 +706,7 @@ const initGeneralTool = () => {
|
|
|
const itemClass = toolItem.class
|
|
|
// 新增基础节点
|
|
|
const generalDropHandler = (
|
|
|
- graph: typeof myMxGraph,
|
|
|
+ _graph: typeof myMxGraph,
|
|
|
_evt: any,
|
|
|
dropCell: any,
|
|
|
x: number,
|
|
|
@@ -636,10 +720,10 @@ const initGeneralTool = () => {
|
|
|
const style = Object.keys(styleObj)
|
|
|
.map(attr => `${attr}=${styleObj[attr]}`)
|
|
|
.join(';')
|
|
|
- const parent = drop ? dropCell : graph.getDefaultParent()
|
|
|
- graph.getModel().beginUpdate()
|
|
|
+ const parent = drop ? dropCell : graph.value.getDefaultParent()
|
|
|
+ graph.value.getModel().beginUpdate()
|
|
|
try {
|
|
|
- const vertex = graph.insertVertex(
|
|
|
+ const vertex = graph.value.insertVertex(
|
|
|
parent,
|
|
|
null,
|
|
|
null,
|
|
|
@@ -649,13 +733,18 @@ const initGeneralTool = () => {
|
|
|
height,
|
|
|
style + ';whiteSpace=wrap;word-break=break-all'
|
|
|
)
|
|
|
- vertex.title = `<div style='word-break:break-all'>` + toolItem['title'] + '</div>'
|
|
|
+ console.log('Edge:', vertex)
|
|
|
+ console.log('Source:', vertex.source)
|
|
|
+ console.log('Target:', vertex.target)
|
|
|
+ vertex.title = `<div style='word-break:break-all;'>` + toolItem['title'] + '</div>'
|
|
|
vertex.dropAble = toolItem['dropAble']
|
|
|
vertex.id = toolItem['id'] + '-' + toolItem['idSeed']
|
|
|
toolItem['idSeed']++
|
|
|
vertex['isGroup'] = toolItem['id'].includes('group') ? true : false
|
|
|
} finally {
|
|
|
- graph.getModel().endUpdate()
|
|
|
+ graph.value.getModel().endUpdate()
|
|
|
+ // graph.view.validate()
|
|
|
+ // graph.value.refresh()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -683,6 +772,138 @@ const initGeneralTool = () => {
|
|
|
ds.setGuidesEnabled(true)
|
|
|
})
|
|
|
}
|
|
|
+// 设置连线样式
|
|
|
+const changeDashed = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_DASHED, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+// 设置线条颜色样式
|
|
|
+const changeStrokeColor = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_STROKECOLOR, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+// 设置线条宽度
|
|
|
+const changeStrokeWidth = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_STROKEWIDTH, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+// 设置字体大小
|
|
|
+const changeFontSize = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_FONTSIZE, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+// 设置字体颜色
|
|
|
+const changeFontColor = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_FONTCOLOR, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+// 设置线条说明的背景颜色
|
|
|
+const changeLabelBackgroundColor = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_LABEL_BACKGROUNDCOLOR, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+const changeFillColor = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_FILLCOLOR, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+const changeShadow = (value: boolean) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_SHADOW, +value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+const changeFontStyle = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_FONTSTYLE, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+const changeNodeimage = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles(myMxConstants.STYLE_IMAGE, value, [...cell])
|
|
|
+}
|
|
|
+
|
|
|
+// 删除节点
|
|
|
+const deleteNode = () => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cells = graph.value.getSelectionCells()
|
|
|
+ graph.value.removeCells([...cells])
|
|
|
+}
|
|
|
+
|
|
|
+// 修改连线样式
|
|
|
+const edgeChange = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ try {
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ graph.value.setCellStyles('edgeStyle', value, [...cell])
|
|
|
+ const style = cell[0].style
|
|
|
+ const valStr = cell[0].value
|
|
|
+ graph.value.removeCells(cell)
|
|
|
+ const parent = graph.value.getDefaultParent()
|
|
|
+ let v1 = ''
|
|
|
+ let v2 = ''
|
|
|
+ // 获取ID单元
|
|
|
+ parent['children'].forEach(item => {
|
|
|
+ item['id'] === cell[0].source.id ? (v1 = item) : false
|
|
|
+ item['id'] === cell[0].target.id ? (v2 = item) : false
|
|
|
+ })
|
|
|
+ graph.value.getModel().beginUpdate()
|
|
|
+ graph.value.insertEdge(parent, null, valStr, v1, v2, style)
|
|
|
+ graph.value.getModel().endUpdate()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 修改节点文本内容
|
|
|
+const textValueChange = (value: string) => {
|
|
|
+ if (!graph.value) return
|
|
|
+
|
|
|
+ const cell = graph.value.getSelectionCells()
|
|
|
+ console.log(value, '节点文本新内容', graph.value)
|
|
|
+ graph.value.cellLabelChanged(cell[0], value)
|
|
|
+}
|
|
|
+
|
|
|
+const changeConfigOrder = (val: any) => {
|
|
|
+ if (!graph.value || !currentNormalType.value) return
|
|
|
+
|
|
|
+ // 获取当前的normalType元素,并更新他的title
|
|
|
+ currentNormalType.value.title = val.newConfigOrder
|
|
|
+ // 修改指定cell的背景图片
|
|
|
+ graph.value.setCellStyles(
|
|
|
+ myMxConstants.STYLE_IMAGE,
|
|
|
+ `./images/order/unselect-${val.newConfigOrder}.png`,
|
|
|
+ [currentNormalType.value]
|
|
|
+ )
|
|
|
+ graph.value.refresh(currentNormalType.value)
|
|
|
+}
|
|
|
onMounted(async () => {
|
|
|
if (!myMxClient.isBrowserSupported()) {
|
|
|
alert('当前浏览器不支持拓扑图功能，请更换浏览器访问，建议使用Chrome浏览器访问!')
|
|
|
@@ -704,6 +925,7 @@ onMounted(async () => {
|
|
|
return null
|
|
|
}
|
|
|
if (graphContainerRef.value) {
|
|
|
+ // 初始化画布
|
|
|
initGraph(graphContainerRef.value)
|
|
|
eventCenter()
|
|
|
configMouseEvent()
|
|
|
@@ -808,6 +1030,7 @@ onMounted(async () => {
|
|
|
}
|
|
|
</style>
|
|
|
<style>
|
|
|
+@import '@/assets/graph/style/general-shap.css';
|
|
|
.t-collapse-panel__wrapper .t-collapse-panel__content {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
@@ -822,7 +1045,6 @@ onMounted(async () => {
|
|
|
white-space: wrap;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
-
|
|
|
.shape-label {
|
|
|
position: absolute;
|
|
|
bottom: -30px;
|
|
|
@@ -831,4 +1053,21 @@ onMounted(async () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.common {
|
|
|
+ width: 30%;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 50px;
|
|
|
+ white-space: wrap;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ .shape-label {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -30px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.mxCellEditor.mxPlainTextEditor {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
</style>
|
