From 16f80ddfc338bc65a893c1b7eb93d1d9861158b2 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 02 七月 2023 23:05:17 +0800
Subject: [PATCH] Merge branch 'develop'
---
src/tabviews/custom/components/chart/antv-X6/index.jsx | 334 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 221 insertions(+), 113 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.jsx b/src/tabviews/custom/components/chart/antv-X6/index.jsx
index 66b6b4c..3090207 100644
--- a/src/tabviews/custom/components/chart/antv-X6/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/index.jsx
@@ -330,23 +330,49 @@
}
}
},
- // {
- // inherit: 'rect',
- // width: 66,
- // height: 36,
- // attrs: {
- // body: {
- // strokeWidth: 0,
- // fill: 'transparent'
- // },
- // text: {
- // fontSize: 12,
- // fill: '#262626'
- // }
- // }
- // },
true
)
+
+const styles = {
+ blue: '#1890ff',
+ red: '#f5222d',
+ orange_red: '#fa541c',
+ orange: '#fa8c16',
+ orange_yellow: '#faad14',
+ yellow: '#fadb14',
+ yellow_green: '#a0d911',
+ green: '#52c41a',
+ cyan: '#13c2c2',
+ blue_purple: '#2f54eb',
+ purple: '#722ed1',
+ magenta: '#eb2f96',
+ grass_green: '#aeb303',
+ deep_red: '#c32539',
+ deep_blue: '#1d3661',
+ blue1: '#e6f7ff',
+ red1: '#fff1f0',
+ orange_red1: '#fff2e8',
+ orange1: '#fff7e6',
+ orange_yellow1: '#fffbe6',
+ yellow1: '#feffe6',
+ yellow_green1: '#fcffe6',
+ green1: '#f6ffed',
+ cyan1: '#e6fffb',
+ blue_purple1: '#f0f5ff',
+ purple1: '#f9f0ff',
+ magenta1: '#fff0f6',
+ grass_green1: '#f2efda',
+ deep_red1: '#fff0f0',
+ deep_blue1: '#eff1f4'
+}
+
+let sysColor = '#1890ff'
+let lightColor = '#e6f7ff'
+if (window.GLOB.style) {
+ let type = window.GLOB.style.replace(/bg_black_style_|bg_white_style_/, '')
+ sysColor = styles[type] || '#1890ff'
+ lightColor = styles[type + '1'] || '#e6f7ff'
+}
class antvX6Chart extends Component {
static propTpyes = {
@@ -386,7 +412,7 @@
if (BData) {
BID = BData.$BID || ''
}
-
+
this.setState({
config: _config,
BID: BID || '',
@@ -578,6 +604,7 @@
max: 2
},
autoResize: true,
+ interacting: false,
panning: true,
background: {
color: config.plot.backgroundColor || 'transparent'
@@ -600,36 +627,6 @@
allowBlank: false,
snap: {
radius: 20
- },
- createEdge() {
- return new Shape.Edge({
- attrs: {
- line: {
- stroke: '#000000',
- strokeWidth: 1,
- targetMarker: {
- name: 'block',
- width: 12,
- height: 8
- }
- }
- },
- zIndex: 0
- })
- },
- validateConnection({ targetMagnet }) {
- return !!targetMagnet
- }
- },
- highlighting: {
- magnetAdsorbed: {
- name: 'stroke',
- args: {
- attrs: {
- fill: '#5F95FF',
- stroke: '#5F95FF'
- }
- }
}
}
})
@@ -646,6 +643,16 @@
graph.resetCells(cells)
graph.positionContent('center')
}
+
+ if (config.plot.click) {
+ graph.on('cell:click', ({ node }) => {
+ this.checkNode(graph, node)
+ })
+
+ graph.on('blank:click', () => {
+ this.checkNode(graph)
+ })
+ }
}
laneSrender = () => {
@@ -657,6 +664,7 @@
min: 0.5,
max: 2
},
+ interacting: false,
autoResize: true,
panning: true,
background: { color: '#ffffff' },
@@ -678,55 +686,6 @@
allowBlank: false,
snap: {
radius: 20
- },
- createEdge() {
- return new Shape.Edge({
- attrs: {
- line: {
- stroke: '#000000',
- strokeWidth: 1,
- targetMarker: {
- name: 'block',
- width: 12,
- height: 8
- }
- }
- },
- zIndex: 2
- })
- },
- validateConnection({ targetMagnet }) {
- return !!targetMagnet
- }
- },
- highlighting: {
- magnetAdsorbed: {
- name: 'stroke',
- args: {
- attrs: {
- fill: '#5F95FF',
- stroke: '#5F95FF'
- }
- }
- }
- },
- translating: {
- restrict(cellView) {
- const cell = cellView.cell
- const parentId = cell.prop('parent')
-
- if (parentId) {
- const parentNode = graph.getCellById(parentId)
- if (parentNode) {
- return parentNode.getBBox().moveAndExpand({
- x: 0,
- y: 36,
- width: 0,
- height: -36,
- })
- }
- }
- return cell.getBBox()
}
}
})
@@ -742,6 +701,16 @@
})
graph.resetCells(cells)
graph.positionContent('top')
+ }
+
+ if (config.plot.click) {
+ graph.on('cell:click', ({ node }) => {
+ this.checkNode(graph, node)
+ })
+
+ graph.on('blank:click', () => {
+ this.checkNode(graph)
+ })
}
}
@@ -912,19 +881,19 @@
showPorts(ports, false)
})
- graph.on('node:click', ({ e, x, y, node, view }) => {
+ graph.on('node:click', ({ node }) => {
this.selectNode = node
this.setState({node: node.store.data})
})
- graph.on('edge:click', ({ e, x, y, edge, view }) => {
+ graph.on('edge:click', ({ edge }) => {
this.selectNode = edge
this.setState({node: edge.store.data})
graph.clearTransformWidgets()
})
- graph.on('blank:click', ({ e, x, y }) => {
+ graph.on('blank:click', () => {
this.selectNode = null
this.setState({node: null})
@@ -989,8 +958,7 @@
})
const p3 = graph.createNode({
- shape: 'mk-text',
- label: '鏂囨湰'
+ shape: 'mk-text'
})
stencil.load([p1, p2, p3], 'group2')
@@ -1095,8 +1063,15 @@
})
graph
+ .use(new Transform({
+ resizing: true,
+ rotating: true
+ }))
.use(new Selection())
- .use(new Snapline())
+ .use(new Snapline({
+ enabled: true,
+ filter: (Graph) => Graph.prop('shape') !== 'lane'
+ }))
.use(new Keyboard())
.use(new Clipboard())
.use(new History())
@@ -1141,14 +1116,18 @@
graph.bindKey(['meta+c', 'ctrl+c'], () => {
const cells = graph.getSelectedCells()
if (cells.length) {
- graph.copy(cells)
+ if (cells[0].prop('shape') !== 'lane' && cells[0].prop('shape') !== 'edge') {
+ graph.copy(cells)
+ }
}
return false
})
graph.bindKey(['meta+x', 'ctrl+x'], () => {
const cells = graph.getSelectedCells()
if (cells.length) {
- graph.cut(cells)
+ if (cells[0].prop('shape') !== 'lane' && cells[0].prop('shape') !== 'edge') {
+ graph.cut(cells)
+ }
}
return false
})
@@ -1175,9 +1154,19 @@
graph.bindKey(['backspace', 'delete'], () => {
const cells = graph.getSelectedCells()
if (cells.length) {
- graph.removeCells(cells)
this.selectNode = null
this.setState({node: null})
+
+ if (cells[0].prop('shape') === 'lane') {
+ graph.startBatch('delete-lane')
+
+ graph.removeCells(cells)
+ this.deleteLane(cells[0], graph)
+
+ graph.stopBatch('delete-lane')
+ } else {
+ graph.removeCells(cells)
+ }
}
})
@@ -1199,8 +1188,10 @@
showPorts(ports, false)
})
- graph.on('node:added', ({ cell, index, options }) => {
+ graph.on('node:added', ({ cell }) => {
if (cell.prop('shape') === 'lane') {
+ if (cell.prop('zIndex') === 0) return
+
graph.startBatch('add-lane')
this.addLane(cell, graph)
@@ -1212,22 +1203,26 @@
if (num <= 1) {
message.warning('璇锋坊鍔犳吵閬擄紒')
graph.removeCells([cell])
- } else {
+ } else if (!cell.prop('parent')) {
this.addNode(cell, graph)
}
}
})
- graph.on('node:click', ({ e, x, y, node, view }) => {
+ graph.on('node:click', ({ node }) => {
this.selectNode = node
this.setState({node: node.store.data})
+
+ if (node.prop('shape') === 'lane') {
+ graph.clearTransformWidgets()
+ }
})
- graph.on('edge:click', ({ e, x, y, edge, view }) => {
+ graph.on('edge:click', ({ edge }) => {
this.selectNode = edge
this.setState({node: edge.store.data})
graph.clearTransformWidgets()
})
- graph.on('blank:click', ({ e, x, y }) => {
+ graph.on('blank:click', () => {
this.selectNode = null
this.setState({node: null})
@@ -1292,8 +1287,7 @@
})
const p3 = graph.createNode({
- shape: 'mk-text',
- label: '鏂囨湰'
+ shape: 'mk-text'
})
stencil.load([p1, p2, p3], 'group2')
@@ -1372,6 +1366,25 @@
// }, {padding: 20})
}
+ deleteLane = (cell, graph) => {
+ let id = cell.id
+
+ let nodes = graph.getNodes()
+ let cells = []
+
+ nodes.forEach(item => {
+ if (item.prop('shape') === 'lane') return
+
+ if (item.prop('parent') === id) {
+ cells.push(item)
+ }
+ })
+
+ graph.removeCells(cells)
+
+ this.resetlane(cell.id, cell.prop('position/x'), -cell.prop('size/width'))
+ }
+
addLane = (cell, graph) => {
const { config } = this.state
@@ -1406,6 +1419,7 @@
}
let height = 400
+
if (typeof(config.plot.height) === 'number' || /px/.test(config.plot.height)) {
height = parseInt(config.plot.height)
}
@@ -1498,12 +1512,29 @@
const { node } = this.state
if (node.shape === 'edge') {
+ let labels = this.selectNode.prop('labels')
+ if (!labels || labels.length === 0) {
+ labels = [{
+ attrs: {label: { text: '' }}
+ }]
+ }
+
if (key === 'title') {
- this.selectNode.setLabels(value)
+ labels = JSON.parse(JSON.stringify(labels))
+ labels[0].attrs.label.text = value
+ this.selectNode.setLabels(labels)
} else if (key === 'stroke') {
this.selectNode.attr('line/stroke', value)
} else if (key === 'strokeWidth') {
this.selectNode.attr('line/strokeWidth', value)
+ } else if (key === 'fontSize') {
+ labels = JSON.parse(JSON.stringify(labels))
+ labels[0].attrs.label.fontSize = value
+ this.selectNode.setLabels(labels)
+ } else if (key === 'fontFill') {
+ labels = JSON.parse(JSON.stringify(labels))
+ labels[0].attrs.label.fill = value
+ this.selectNode.setLabels(labels)
} else if (key === 'lineType') {
if (value === 'dash') {
this.selectNode.attr('line/strokeDasharray', 5)
@@ -1564,6 +1595,83 @@
}
}
+ checkNode = (graph, node) => {
+ const { plot, config } = this.state
+
+ let nodes = graph.getNodes()
+
+ nodes.forEach(item => {
+ if (item.prop('shape') === 'lane') return
+
+ if (item.prop('oristyle')) {
+ let style = item.prop('oristyle')
+
+ item.prop('attrs/body/fill', style.fill)
+ item.prop('attrs/body/stroke', style.stroke)
+ item.prop('attrs/text/fill', style.text)
+ }
+ })
+
+ if (!node || ['lane', 'mk-text', 'edge'].includes(node.prop('shape'))) {
+ MKEmitter.emit('resetSelectLine', config.uuid, '', '')
+ return
+ }
+
+ if (!node.prop('oristyle')) {
+ node.prop('oristyle', {
+ fill: node.prop('attrs/body/fill'),
+ stroke: node.prop('attrs/body/stroke'),
+ text: node.prop('attrs/text/fill')
+ })
+ }
+
+ node.prop('attrs/body/fill', lightColor)
+ node.prop('attrs/body/stroke', sysColor)
+ node.prop('attrs/text/fill', sysColor)
+
+ let sign = node.prop('mksign') || ''
+
+ if (plot.click === 'menus') {
+ let menu = null
+
+ if (plot.menus && plot.menus.length > 0) {
+ plot.menus.forEach(m => {
+ if (sign !== m.sign) return
+ menu = m
+ })
+ }
+ if (!menu || !menu.MenuID) return
+
+ let newtab = {
+ MenuID: menu.MenuID,
+ MenuName: menu.MenuName,
+ MenuNo: menu.MenuNo || '',
+ type: menu.tabType,
+ param: {$BID: sign}
+ }
+
+ MKEmitter.emit('modifyTabs', newtab, true)
+ } else if (plot.click === 'menu') {
+ let menuId = plot.menu.slice(-1)[0]
+ let newtab = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]
+
+ if (!newtab && plot.MenuID) {
+ newtab = {
+ MenuID: plot.MenuID,
+ MenuName: plot.MenuName,
+ MenuNo: plot.MenuNo,
+ type: plot.tabType
+ }
+ } else if (!newtab) {
+ return
+ }
+
+ MKEmitter.emit('modifyTabs', {...newtab, param: {$BID: sign}}, true)
+ } else {
+ MKEmitter.emit('resetSelectLine', config.uuid, sign, {})
+ }
+ }
+
resetlane = (id, x, offset) => {
let nodes = this.mkGraph.getNodes()
@@ -1597,7 +1705,7 @@
</div> : null
}
<NormalHeader config={config} />
- <div className="canvas" style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
+ <div className={'canvas only-show' + (config.plot.click ? ' switchable' : '')} style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
<div id={config.uuid + 'container'} className="mk-container"></div>
</div>
</div>
--
Gitblit v1.8.0