From 656ea3139db54b8dc9a29b8cb239d0f0df9a6c05 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 27 六月 2023 18:19:42 +0800
Subject: [PATCH] 2023-06-27
---
src/tabviews/custom/components/chart/antv-X6/index.scss | 245 +++
src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss | 31
src/tabviews/custom/components/chart/antv-X6/index.jsx | 1361 +++++++++++++++++
src/tabviews/custom/index.jsx | 7
src/menu/menushell/card.jsx | 8
src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx | 20
src/menu/components/chart/antv-X6/lane.json | 1162 ++++++++++++++
src/menu/components/chart/antv-X6/xflow.json | 986 ++++++++++++
src/menu/components/chart/antv-X6/index.scss | 155 -
src/menu/components/chart/antv-X6/index.jsx | 594 ------
src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx | 173 +
src/views/login/index.jsx | 2
12 files changed, 4,036 insertions(+), 708 deletions(-)
diff --git a/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx
index 562a94b..4b70bf9 100644
--- a/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx
+++ b/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx
@@ -211,10 +211,22 @@
}, {
value: 'lane',
label: '娉抽亾鍥�'
- }, {
- value: 'kapmap',
- label: '缁勭粐缁撴瀯鍥�'
- }]
+ }],
+ controlFields: [
+ {field: 'gridType', values: ['xflow']},
+ {field: 'backgroundColor', values: ['xflow']}
+ ],
+ },
+ {
+ type: 'radio',
+ field: 'export',
+ label: '涓嬭浇',
+ initval: card.export || 'png',
+ required: false,
+ options: [
+ {value: 'none', label: '绂佺敤'},
+ {value: 'png', label: 'PNG鍥�'},
+ ],
},
{
type: 'radio',
diff --git a/src/menu/components/chart/antv-X6/index.jsx b/src/menu/components/chart/antv-X6/index.jsx
index 96e04e1..0cfcbf6 100644
--- a/src/menu/components/chart/antv-X6/index.jsx
+++ b/src/menu/components/chart/antv-X6/index.jsx
@@ -1,27 +1,20 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Popover, Tooltip, message } from 'antd'
-import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined, DownloadOutlined } from '@ant-design/icons'
+import { Popover, Tooltip } from 'antd'
+import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DownloadOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
-import { Stencil } from '@antv/x6-plugin-stencil'
-import { Transform } from '@antv/x6-plugin-transform'
-import { Selection } from '@antv/x6-plugin-selection'
-import { Snapline } from '@antv/x6-plugin-snapline'
-import { Keyboard } from '@antv/x6-plugin-keyboard'
-import { Clipboard } from '@antv/x6-plugin-clipboard'
-import { History } from '@antv/x6-plugin-history'
-import { Export } from '@antv/x6-plugin-export'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
import { resetStyle, getTables, checkComponent } from '@/utils/utils-custom.js'
+import lanes from './lane.json'
+import xflows from './xflow.json'
import './index.scss'
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
-const NodeUpdate = asyncIconComponent(() => import('./nodeupdate'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
@@ -115,7 +108,7 @@
},
'name-rect': {
width: 200,
- height: 30,
+ height: 36,
fill: '#5F95FF',
stroke: '#fff',
strokeWidth: 1,
@@ -128,9 +121,10 @@
textAnchor: 'middle',
fontWeight: 'bold',
fill: '#fff',
- fontSize: 12,
+ fontSize: 14,
},
},
+ zIndex: 0
},
true,
)
@@ -144,8 +138,8 @@
attrs: {
body: {
strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF'
+ stroke: '#000000',
+ fill: '#FFFFFF'
},
text: {
fontSize: 12,
@@ -174,8 +168,8 @@
attrs: {
body: {
strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF'
+ stroke: '#000000',
+ fill: '#FFFFFF'
},
text: {
fontSize: 12,
@@ -204,8 +198,8 @@
attrs: {
body: {
strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF'
+ stroke: '#000000',
+ fill: '#FFFFFF'
},
text: {
fontSize: 12,
@@ -234,8 +228,8 @@
attrs: {
body: {
strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF'
+ stroke: '#000000',
+ fill: '#FFFFFF'
},
text: {
fontSize: 12,
@@ -264,8 +258,8 @@
points: '100,10 40,198 190,78 10,78 160,198',
attrs: {
body: {
- fill: '#EFF4FF',
- stroke: '#5F95FF',
+ fill: '#FFFFFF',
+ stroke: '#000000',
strokeWidth: 1,
fillRule: 'nonzero'
},
@@ -287,6 +281,26 @@
true
)
+Graph.registerNode(
+ 'mk-text',
+ {
+ inherit: 'rect',
+ width: 66,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 0,
+ fill: 'transparent'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ }
+ },
+ true
+)
+
class antvX6Chart extends Component {
static propTpyes = {
card: PropTypes.object,
@@ -295,15 +309,8 @@
}
state = {
- card: null,
- eventListener: null,
- toolunfold: true,
- nodeunfold: true,
- node: null
+ card: null
}
-
- selectNode = null
- mkGraph = null
UNSAFE_componentWillMount () {
const { card } = this.props
@@ -311,7 +318,7 @@
if (card.isNew) {
let _plot = {
width: card.width || 24,
- height: 400,
+ height: 500,
subtype: card.subtype,
name: card.name,
grid: {
@@ -322,7 +329,8 @@
thickness: 1
}
},
- gridType: 'dot'
+ gridType: 'dot',
+ export: 'png'
}
let _card = {
@@ -379,8 +387,8 @@
if (
card.plot.subtype !== res.plot.subtype ||
- card.plot.gridType !== res.plot.gridType ||
- card.plot.backgroundColor !== res.plot.backgroundColor
+ (res.plot.gridType && card.plot.gridType !== res.plot.gridType) ||
+ (res.plot.gridType && card.plot.backgroundColor !== res.plot.backgroundColor)
) {
let _element = document.getElementById(card.uuid + 'container')
if (_element) {
@@ -401,8 +409,6 @@
this.xflowrender()
} else if (card.plot.subtype === 'lane') {
this.lanerender()
- // } else if (card.plot.subtype === 'xflow') {
- // this.xflowrender()
}
}
@@ -444,8 +450,8 @@
return new Shape.Edge({
attrs: {
line: {
- stroke: '#A2B1C3',
- strokeWidth: 2,
+ stroke: '#000000',
+ strokeWidth: 1,
targetMarker: {
name: 'block',
width: 12,
@@ -473,190 +479,16 @@
}
})
- // #region 浣跨敤鎻掍欢
- graph
- .use(new Transform({
- resizing: true,
- rotating: true
- }))
- .use(new Selection())
- .use(new Snapline())
- .use(new Keyboard())
- .use(new Clipboard())
- .use(new History())
- .use(new Export())
-
- // #region 鍒濆鍖� stencil
- const stencil = new Stencil({
- title: '娴佺▼鍥�',
- target: graph,
- stencilGraphWidth: 180,
- stencilGraphHeight: 180,
- groups: [
- {
- title: '閫氱敤鑺傜偣',
- name: 'group1'
- },
- {
- title: '鑷畾涔�',
- name: 'group2',
- graphHeight: 120,
- layoutOptions: {
- rowHeight: 70
- }
- }
- ],
- layoutOptions: {
- columns: 2,
- columnWidth: 80,
- rowHeight: 55
+ let cells = []
+ xflows.forEach((item) => {
+ if (item.shape === 'edge') {
+ cells.push(graph.createEdge(item))
+ } else {
+ cells.push(graph.createNode(item))
}
})
-
- document.getElementById(card.uuid + 'stencil').appendChild(stencil.container)
-
- // #region 蹇嵎閿笌浜嬩欢
- graph.bindKey(['meta+c', 'ctrl+c'], () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.copy(cells)
- }
- return false
- })
- graph.bindKey(['meta+x', 'ctrl+x'], () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.cut(cells)
- }
- return false
- })
- graph.bindKey(['meta+v', 'ctrl+v'], () => {
- if (!graph.isClipboardEmpty()) {
- graph.paste({ offset: 32 })
- }
- return false
- })
-
- // undo redo
- graph.bindKey(['meta+z', 'ctrl+z'], () => {
- if (graph.canUndo()) {
- graph.undo()
- }
- return false
- })
- graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
- if (graph.canRedo()) {
- graph.redo()
- }
- return false
- })
-
- // 鍒犻櫎鍏冪礌
- graph.bindKey(['backspace', 'delete'], () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.removeCells(cells)
- this.selectNode = null
- this.setState({node: null})
- }
- })
-
- // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
- const showPorts = (ports, show) => {
- for (let i = 0, len = ports.length; i < len; i += 1) {
- ports[i].style.visibility = show ? 'visible' : 'hidden'
- }
- }
- graph.on('node:mouseenter', () => {
- const container = document.getElementById(card.uuid + 'container')
- const ports = container.querySelectorAll('.x6-port-body')
- showPorts(ports, true)
- })
- graph.on('node:mouseleave', () => {
- const container = document.getElementById(card.uuid + 'container')
- const ports = container.querySelectorAll('.x6-port-body')
- showPorts(ports, false)
- })
-
- graph.on('node:click', ({ e, x, y, node, view }) => {
- this.selectNode = node
-
- this.setState({node: node.store.data})
- })
- graph.on('edge:click', ({ e, x, y, edge, view }) => {
- this.selectNode = edge
-
- this.setState({node: edge.store.data})
-
- graph.clearTransformWidgets()
- })
- graph.on('blank:click', ({ e, x, y }) => {
- this.selectNode = null
-
- this.setState({node: null})
- })
-
- const r1 = graph.createNode({
- shape: 'mk-rect',
- label: '寮�濮�',
- attrs: {
- body: {
- rx: 20,
- ry: 26
- }
- }
- })
- const r2 = graph.createNode({
- shape: 'mk-rect',
- label: '杩囩▼'
- })
- const r3 = graph.createNode({
- shape: 'mk-rect',
- attrs: {
- body: {
- rx: 6,
- ry: 6
- }
- },
- label: '鍙�夎繃绋�'
- })
- const r4 = graph.createNode({
- shape: 'mk-polygon',
- attrs: {
- body: {
- refPoints: '0,10 10,0 20,10 10,20'
- }
- },
- label: '鍐崇瓥'
- })
- const r5 = graph.createNode({
- shape: 'mk-polygon',
- attrs: {
- body: {
- refPoints: '10,0 40,0 30,20 0,20'
- }
- },
- label: '鏁版嵁'
- })
- const r6 = graph.createNode({
- shape: 'mk-circle',
- label: '杩炴帴'
- })
-
- stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
-
- const p1 = graph.createNode({
- shape: 'mk-ellipse',
- label: 'ellipse'
- })
- const p2 = graph.createNode({
- shape: 'mk-star',
- label: ''
- })
-
- stencil.load([p1, p2], 'group2')
-
- this.mkGraph = graph
+ graph.resetCells(cells)
+ graph.positionContent('center')
}
lanerender = () => {
@@ -664,16 +496,13 @@
const graph = new Graph({
container: document.getElementById(card.uuid + 'container'),
- grid: card.plot.grid,
scaling: {
min: 0.5,
max: 2
},
autoResize: true,
panning: true,
- background: {
- color: card.plot.backgroundColor || 'transparent'
- },
+ background: { color: '#ffffff' },
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
@@ -697,8 +526,8 @@
return new Shape.Edge({
attrs: {
line: {
- stroke: '#A2B1C3',
- strokeWidth: 2,
+ stroke: '#000000',
+ strokeWidth: 1,
targetMarker: {
name: 'block',
width: 12,
@@ -734,9 +563,9 @@
if (parentNode) {
return parentNode.getBBox().moveAndExpand({
x: 0,
- y: 30,
+ y: 36,
width: 0,
- height: -30,
+ height: -36,
})
}
}
@@ -745,277 +574,16 @@
}
})
- // #region 浣跨敤鎻掍欢
- graph
- .use(new Transform({
- resizing: true,
- rotating: true
- }))
- .use(new Selection())
- .use(new Snapline())
- .use(new Keyboard())
- .use(new Clipboard())
- .use(new History())
- .use(new Export())
-
- // #region 鍒濆鍖� stencil
- const stencil = new Stencil({
- title: '娴佺▼鍥�',
- target: graph,
- stencilGraphWidth: 180,
- stencilGraphHeight: 180,
- groups: [
- {
- title: '閫氱敤鑺傜偣',
- name: 'group1'
- },
- {
- title: '鑷畾涔�',
- name: 'group2',
- graphHeight: 120,
- layoutOptions: {
- rowHeight: 70
- }
- }
- ],
- layoutOptions: {
- columns: 2,
- columnWidth: 80,
- rowHeight: 55
- }
- })
-
- document.getElementById(card.uuid + 'stencil').appendChild(stencil.container)
-
- // #region 蹇嵎閿笌浜嬩欢
- graph.bindKey(['meta+c', 'ctrl+c'], () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.copy(cells)
- }
- return false
- })
- graph.bindKey(['meta+x', 'ctrl+x'], () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.cut(cells)
- }
- return false
- })
- graph.bindKey(['meta+v', 'ctrl+v'], () => {
- if (!graph.isClipboardEmpty()) {
- graph.paste({ offset: 32 })
- }
- return false
- })
-
- // undo redo
- graph.bindKey(['meta+z', 'ctrl+z'], () => {
- if (graph.canUndo()) {
- graph.undo()
- }
- return false
- })
- graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
- if (graph.canRedo()) {
- graph.redo()
- }
- return false
- })
-
- // 鍒犻櫎鍏冪礌
- graph.bindKey(['backspace', 'delete'], () => {
- const cells = graph.getSelectedCells()
- if (cells.length) {
- graph.removeCells(cells)
- this.selectNode = null
- this.setState({node: null})
- }
- })
-
- // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
- const showPorts = (ports, show) => {
- for (let i = 0, len = ports.length; i < len; i += 1) {
- ports[i].style.visibility = show ? 'visible' : 'hidden'
- }
- }
- graph.on('node:mouseenter', () => {
- const container = document.getElementById(card.uuid + 'container')
- const ports = container.querySelectorAll('.x6-port-body')
- showPorts(ports, true)
- })
- graph.on('node:mouseleave', () => {
- const container = document.getElementById(card.uuid + 'container')
- const ports = container.querySelectorAll('.x6-port-body')
- showPorts(ports, false)
- })
-
- graph.on('node:click', ({ e, x, y, node, view }) => {
- this.selectNode = node
-
- this.setState({node: node.store.data})
- })
- graph.on('edge:click', ({ e, x, y, edge, view }) => {
- this.selectNode = edge
-
- this.setState({node: edge.store.data})
-
- graph.clearTransformWidgets()
- })
- graph.on('blank:click', ({ e, x, y }) => {
- this.selectNode = null
-
- this.setState({node: null})
- })
-
- const r1 = graph.createNode({
- shape: 'mk-rect',
- label: '寮�濮�',
- attrs: {
- body: {
- rx: 20,
- ry: 26
- }
- }
- })
- const r2 = graph.createNode({
- shape: 'mk-rect',
- label: '杩囩▼'
- })
- const r3 = graph.createNode({
- shape: 'mk-rect',
- attrs: {
- body: {
- rx: 6,
- ry: 6
- }
- },
- label: '鍙�夎繃绋�'
- })
- const r4 = graph.createNode({
- shape: 'mk-polygon',
- attrs: {
- body: {
- refPoints: '0,10 10,0 20,10 10,20'
- }
- },
- label: '鍐崇瓥'
- })
- const r5 = graph.createNode({
- shape: 'mk-polygon',
- attrs: {
- body: {
- refPoints: '10,0 40,0 30,20 0,20'
- }
- },
- label: '鏁版嵁'
- })
- const r6 = graph.createNode({
- shape: 'mk-circle',
- label: '杩炴帴'
- })
-
- stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
-
- const p1 = graph.createNode({
- shape: 'mk-ellipse',
- label: 'ellipse'
- })
- const p2 = graph.createNode({
- shape: 'mk-star',
- label: ''
- })
-
- stencil.load([p1, p2], 'group2')
-
- let data = [{"id":"1","shape":"lane","width":200,"height":500,"position":{"x":60,"y":60},"label":"<Function>"},{"id":"2","shape":"lane","width":200,"height":500,"position":{"x":260,"y":60},"label":"<Function>"},{"id":"3","shape":"lane","width":200,"height":500,"position":{"x":460,"y":60},"label":"<Function>"},{"id":"4","shape":"lane","width":200,"height":500,"position":{"x":660,"y":60},"label":"<Function>"}]
let cells = []
- data.forEach((item) => {
- if (item.shape === 'lane-edge') {
+ lanes.forEach((item) => {
+ if (item.shape === 'edge') {
cells.push(graph.createEdge(item))
} else {
cells.push(graph.createNode(item))
}
})
graph.resetCells(cells)
- graph.zoomToFit({ padding: 10, maxScale: 1 })
-
- this.mkGraph = graph
- }
-
- setTop = () => {
- if (!this.selectNode) {
- message.warning('璇烽�夋嫨鑺傜偣锛�')
- return
- }
- this.selectNode.toFront()
- }
-
- setBottom = () => {
- if (!this.selectNode) {
- message.warning('璇烽�夋嫨鑺傜偣锛�')
- return
- }
- // let cells = this.mkGraph.getCells()
- this.selectNode.toBack()
- }
-
- // zoom() 鍙幏鍙栨垨鑰呰缃缉鏀炬瘮渚�
- setZoomIn = () => {
- this.mkGraph.zoom(0.1)
- }
-
- setZoomOut = () => {
- this.mkGraph.zoom(-0.1)
- }
-
- setZoomInt = () => {
- this.mkGraph.zoomTo(1)
- }
-
- save = () => {
- // let nodes = this.mkGraph.toJSON()
- }
-
- savePicture = () => {
- const { card } = this.state
- this.mkGraph.exportPNG(card.name, {padding: 20})
- }
-
- changeProps = (value, key) => {
- const { node } = this.state
-
- if (node.shape === 'edge') {
- if (key === 'title') {
- this.selectNode.setLabels(value)
- } else if (key === 'stroke') {
- this.selectNode.attr('line/stroke', value)
- } else if (key === 'strokeWidth') {
- this.selectNode.attr('line/strokeWidth', value)
- } else if (key === 'lineType') {
- if (value === 'dash') {
- this.selectNode.attr('line/strokeDasharray', 5)
- } else {
- this.selectNode.attr('line/strokeDasharray', 0)
- }
- } else if (key === 'fontSize') {
- this.selectNode.attr('text/fontSize', value)
- } else if (key === 'fontFill') {
- this.selectNode.attr('text/fill', value)
- }
- } else {
- if (key === 'title') {
- this.selectNode.attr('text/text', value)
- } else if (key === 'fill') {
- this.selectNode.attr('body/fill', value)
- } else if (key === 'stroke') {
- this.selectNode.attr('body/stroke', value)
- } else if (key === 'fontSize') {
- this.selectNode.attr('text/fontSize', value)
- } else if (key === 'fontFill') {
- this.selectNode.attr('text/fill', value)
- }
- }
+ graph.positionContent('top')
}
updateComponent = (card) => {
@@ -1061,7 +629,7 @@
}
render() {
- const { card, toolunfold, nodeunfold, node } = this.state
+ const { card } = this.state
let _style = resetStyle(card.style)
return (
@@ -1080,45 +648,33 @@
<NormalHeader config={card} updateComponent={this.updateComponent}/>
<div className="mk-toolbar">
<div className="left-tool">
- <Tooltip title="缃墠">
- <VerticalAlignTopOutlined onClick={this.setTop}/>
- </Tooltip>
- <Tooltip title="缃悗">
- <VerticalAlignBottomOutlined onClick={this.setBottom}/>
- </Tooltip>
+ {card.plot.subtype === 'xflow' ? <Tooltip title="缃墠">
+ <VerticalAlignTopOutlined/>
+ </Tooltip> : null}
+ {card.plot.subtype === 'xflow' ? <Tooltip title="缃悗">
+ <VerticalAlignBottomOutlined/>
+ </Tooltip> : null}
<Tooltip title="淇濆瓨">
- <SaveOutlined onClick={this.save}/>
+ <SaveOutlined/>
</Tooltip>
- <Tooltip title="瀵煎嚭鍥剧墖">
- <DownloadOutlined onClick={this.savePicture}/>
- </Tooltip>
+ {card.plot.export === 'png' ? <Tooltip title="瀵煎嚭鍥剧墖">
+ <DownloadOutlined/>
+ </Tooltip> : null}
</div>
<div className="right-tool">
<Tooltip title="鏀惧ぇ">
- <ZoomInOutlined onClick={this.setZoomIn}/>
+ <ZoomInOutlined/>
</Tooltip>
<Tooltip title="缂╁皬">
- <ZoomOutOutlined onClick={this.setZoomOut}/>
+ <ZoomOutOutlined/>
</Tooltip>
<Tooltip title="1:1">
- <OneToOneOutlined onClick={this.setZoomInt}/>
+ <OneToOneOutlined/>
</Tooltip>
</div>
</div>
<div className="canvas" style={{width: '100%', minHeight: card.plot.height, height: card.plot.height}} id={card.uuid + 'canvas'}>
- <div id={card.uuid + 'stencil'} className={'mk-stencil ' + (toolunfold ? '' : 'merge')}>
- <div className="tool-control" onClick={() => this.setState({toolunfold: !toolunfold})}>
- <DoubleLeftOutlined />
- </div>
- </div>
<div id={card.uuid + 'container'} className="mk-container"></div>
- <div className={'mk-node-edit ' + (nodeunfold ? '' : 'merge')}>
- <div className="tool-control" onClick={() => this.setState({nodeunfold: !nodeunfold})}>
- <DoubleLeftOutlined />
- </div>
- <div className="header">璁剧疆</div>
- {!node ? <div className="empty">鏈�変腑</div> : <NodeUpdate node={node} onChange={this.changeProps}/>}
- </div>
</div>
<div className="component-name">
<div className="center">
diff --git a/src/menu/components/chart/antv-X6/index.scss b/src/menu/components/chart/antv-X6/index.scss
index 2819d31..e7b09a2 100644
--- a/src/menu/components/chart/antv-X6/index.scss
+++ b/src/menu/components/chart/antv-X6/index.scss
@@ -36,164 +36,17 @@
.x6-cell.x6-edge.x6-edge-selected path:nth-child(2) {
stroke: #1890ff;
}
+ .x6-cell[data-shape="lane"] {
+ cursor: default;
+ }
.canvas {
margin: 0px;
letter-spacing: 0px;
- display: flex;
-
- .mk-stencil {
- width: 180px;
- min-width: 180px;
- height: 100%;
- position: relative;
- z-index: 2;
- border-right: 1px solid #dfe3e8;
- transition: all 0.2s;
-
- .x6-widget-stencil-title {
- display: none;
- }
- .x6-widget-stencil-content {
- overflow-y: auto;
- }
- .x6-widget-stencil-content::-webkit-scrollbar {
- width: 7px;
- }
- .x6-widget-stencil-content::-webkit-scrollbar-thumb {
- border-radius: 5px;
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
- background: rgba(0, 0, 0, 0.13);
- }
- .x6-widget-stencil-content::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
- border-radius: 3px;
- border: 1px solid rgba(0, 0, 0, 0.07);
- background: rgba(0, 0, 0, 0);
- }
- .tool-control {
- position: absolute;
- right: -13px;
- top: 5px;
- z-index: 3;
- background: #ffffff;
- width: 25px;
- height: 25px;
- border: 1px solid #d8d8d8;
- border-radius: 30px;
- text-align: center;
- line-height: 25px;
- cursor: pointer;
- }
- }
- .mk-stencil.merge {
- width: 0px;
- min-width: 0px;
-
- .tool-control {
- right: -25px;
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- .anticon-double-left {
- transform: rotate(180deg);
- }
- }
- }
-
- .mk-node-edit {
- width: 180px;
- min-width: 180px;
- height: 100%;
- position: relative;
- z-index: 2;
- border-left: 1px solid #dfe3e8;
- background: #ffffff;
- transition: all 0.2s;
-
- .header {
- width: 100%;
- height: 32px;
- text-align: center;
- line-height: 32px;
- background-color: #f5f5f5!important;
- overflow-x: hidden;
- white-space: nowrap;
- }
- .empty {
- width: 100%;
- text-align: center;
- padding-top: 20px;
- overflow-x: hidden;
- white-space: nowrap;
- }
-
- .tool-control {
- position: absolute;
- left: -13px;
- top: 5px;
- z-index: 3;
- background: #ffffff;
- width: 25px;
- height: 25px;
- border: 1px solid #d8d8d8;
- border-radius: 30px;
- text-align: center;
- line-height: 25px;
- cursor: pointer;
- .anticon-double-left {
- transform: rotate(180deg);
- }
- }
- }
- .mk-node-edit.merge {
- width: 0px;
- min-width: 0px;
-
- .tool-control {
- left: -25px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- .anticon-double-left {
- transform: rotate(0deg);
- }
- }
- }
.mk-container {
- width: calc(100% - 180px);
+ // width: calc(100% - 180px);
height: 100%;
- }
- .x6-widget-stencil {
- background-color: #fff;
- }
- .x6-widget-stencil-title {
- background-color: #fff;
- }
- .x6-widget-stencil-group-title {
- background-color: #f5f5f5!important;
- }
- .x6-widget-transform {
- margin: -1px 0 0 -1px;
- padding: 0px;
- border: 1px solid #239edd;
- }
- .x6-widget-transform > div {
- border: 1px solid #239edd;
- }
- .x6-widget-transform > div:hover {
- background-color: #3dafe4;
- }
- .x6-widget-transform-active-handle {
- background-color: #3dafe4;
- }
- .x6-widget-transform-resize {
- border-radius: 0;
- }
- .x6-widget-selection-inner {
- border: 1px solid #239edd;
- }
- .x6-widget-selection-box {
- opacity: 0;
}
}
diff --git a/src/menu/components/chart/antv-X6/lane.json b/src/menu/components/chart/antv-X6/lane.json
new file mode 100644
index 0000000..5029dce
--- /dev/null
+++ b/src/menu/components/chart/antv-X6/lane.json
@@ -0,0 +1,1162 @@
+[{
+ "position": {
+ "x": 0,
+ "y": 0
+ },
+ "size": {
+ "width": 200,
+ "height": 500
+ },
+ "attrs": {
+ "text": {
+ "text": "闃舵1"
+ }
+ },
+ "visible": true,
+ "shape": "lane",
+ "id": "086eb967-7a70-4581-bb82-1dd87f6473e3",
+ "zIndex": 0
+}, {
+ "position": {
+ "x": 200,
+ "y": 0
+ },
+ "size": {
+ "width": 200,
+ "height": 500
+ },
+ "attrs": {
+ "text": {
+ "text": "闃舵2"
+ }
+ },
+ "visible": true,
+ "shape": "lane",
+ "id": "eab0b7c3-3eb4-45da-8b43-cc215047edd4",
+ "zIndex": 0
+}, {
+ "position": {
+ "x": 400,
+ "y": 0
+ },
+ "size": {
+ "width": 200,
+ "height": 500
+ },
+ "attrs": {
+ "text": {
+ "text": "闃舵3"
+ }
+ },
+ "visible": true,
+ "shape": "lane",
+ "id": "8666799f-c76c-4695-8804-0d3579caadc4",
+ "zIndex": 0
+}, {
+ "position": {
+ "x": 600,
+ "y": 0
+ },
+ "size": {
+ "width": 200,
+ "height": 500
+ },
+ "attrs": {
+ "text": {
+ "text": "闃舵4"
+ }
+ },
+ "visible": true,
+ "shape": "lane",
+ "id": "68e49c35-cf6f-46f0-bcde-754c2a2b0ffe",
+ "zIndex": 0
+}, {
+ "position": {
+ "x": 67,
+ "y": 70
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Start"
+ },
+ "body": {
+ "rx": 20,
+ "ry": 26
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "7af1dd51-e0c8-45e2-8f72-96777215e0da"
+ }, {
+ "group": "right",
+ "id": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
+ }, {
+ "group": "bottom",
+ "id": "6faa8816-930d-4356-9fbe-c18bbdfc99ab"
+ }, {
+ "group": "left",
+ "id": "161b1890-3c4a-4758-b444-7a249763ee3a"
+ }]
+ },
+ "id": "c6f49af2-3f6f-4b60-88e3-ea0f45223f34",
+ "zIndex": 1,
+ "parent": "086eb967-7a70-4581-bb82-1dd87f6473e3"
+}, {
+ "position": {
+ "x": 267,
+ "y": 70
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Process"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ }, {
+ "group": "right",
+ "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
+ }, {
+ "group": "bottom",
+ "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
+ }, {
+ "group": "left",
+ "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ }]
+ },
+ "id": "26c76caa-ca35-4f72-abd3-9bdf348081b0",
+ "zIndex": 2,
+ "parent": "eab0b7c3-3eb4-45da-8b43-cc215047edd4"
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "78e0c6e9-a882-468e-91e1-f01399015440",
+ "zIndex": 2,
+ "source": {
+ "cell": "c6f49af2-3f6f-4b60-88e3-ea0f45223f34",
+ "port": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
+ },
+ "target": {
+ "cell": "26c76caa-ca35-4f72-abd3-9bdf348081b0",
+ "port": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "6418ad5a-f6af-486f-9068-0642c5c2fb1f",
+ "zIndex": 2,
+ "source": {
+ "cell": "26c76caa-ca35-4f72-abd3-9bdf348081b0",
+ "port": "5c37a597-97e2-4f2e-a676-017f66060bbd"
+ },
+ "target": {
+ "cell": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
+ "port": "56c9c736-744a-48f3-84bb-706a0f15712f"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "458e8e95-f5e7-46a0-add3-e42c7b832178",
+ "zIndex": 2,
+ "source": {
+ "cell": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
+ "port": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
+ },
+ "target": {
+ "cell": "aae00f04-39b6-403d-98a2-057ea251376b",
+ "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ },
+ "labels": ["Yes"]
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "3f9348e4-d2bd-4300-b873-8915fe7cc152",
+ "zIndex": 2,
+ "source": {
+ "cell": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
+ "port": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
+ },
+ "target": {
+ "cell": "246493f4-865f-407e-9407-4df6f5dae340",
+ "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ },
+ "labels": ["No"]
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "206575cf-9c23-4c95-8f98-e448f95b6bb3",
+ "zIndex": 2,
+ "source": {
+ "cell": "246493f4-865f-407e-9407-4df6f5dae340",
+ "port": "5573dafd-2958-410c-a4a0-e38bc6a24065"
+ },
+ "target": {
+ "cell": "54347093-ddd3-46c4-b2d5-b65352c10ac3",
+ "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "e88f16a4-393c-4572-9bf4-0775dff8b021",
+ "zIndex": 2,
+ "source": {
+ "cell": "54347093-ddd3-46c4-b2d5-b65352c10ac3",
+ "port": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ },
+ "target": {
+ "cell": "d684e64f-6fac-4879-bd74-2749c9f2436f",
+ "port": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "d5cc4a65-9209-422f-b971-7b0790938018",
+ "zIndex": 2,
+ "source": {
+ "cell": "d684e64f-6fac-4879-bd74-2749c9f2436f",
+ "port": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
+ },
+ "target": {
+ "cell": "37ef7b6f-659d-4e10-812d-df7dc7c4d66e",
+ "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ },
+ "labels": ["Yes"]
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "18aa70cc-a580-48b2-9b14-a2313ee3e69c",
+ "zIndex": 2,
+ "source": {
+ "cell": "37ef7b6f-659d-4e10-812d-df7dc7c4d66e",
+ "port": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ },
+ "target": {
+ "cell": "1aa90d24-7fca-4298-a0e7-17b4bc88e33b",
+ "port": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "30eff504-21f8-46ca-8809-28ce4aaadf03",
+ "zIndex": 2,
+ "source": {
+ "cell": "d684e64f-6fac-4879-bd74-2749c9f2436f",
+ "port": "56c9c736-744a-48f3-84bb-706a0f15712f"
+ },
+ "target": {
+ "cell": "1aa90d24-7fca-4298-a0e7-17b4bc88e33b",
+ "port": "7af1dd51-e0c8-45e2-8f72-96777215e0da"
+ },
+ "labels": ["No"]
+}, {
+ "position": {
+ "x": 467,
+ "y": 70
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Judge"
+ },
+ "body": {
+ "refPoints": "0,10 10,0 20,10 10,20"
+ }
+ },
+ "visible": true,
+ "shape": "mk-polygon",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "52a617c4-1c62-4bd6-b827-6215feac4495"
+ }, {
+ "group": "right",
+ "id": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
+ }, {
+ "group": "bottom",
+ "id": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
+ }, {
+ "group": "left",
+ "id": "56c9c736-744a-48f3-84bb-706a0f15712f"
+ }]
+ },
+ "id": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
+ "zIndex": 3,
+ "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
+}, {
+ "position": {
+ "x": 467,
+ "y": 170
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Process"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ }, {
+ "group": "right",
+ "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
+ }, {
+ "group": "bottom",
+ "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
+ }, {
+ "group": "left",
+ "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ }]
+ },
+ "id": "aae00f04-39b6-403d-98a2-057ea251376b",
+ "zIndex": 4,
+ "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
+}, {
+ "position": {
+ "x": 670,
+ "y": 170
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Process"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ }, {
+ "group": "right",
+ "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
+ }, {
+ "group": "bottom",
+ "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
+ }, {
+ "group": "left",
+ "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ }]
+ },
+ "id": "246493f4-865f-407e-9407-4df6f5dae340",
+ "zIndex": 5,
+ "parent": "68e49c35-cf6f-46f0-bcde-754c2a2b0ffe"
+}, {
+ "position": {
+ "x": 670,
+ "y": 260
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Process"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ }, {
+ "group": "right",
+ "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
+ }, {
+ "group": "bottom",
+ "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
+ }, {
+ "group": "left",
+ "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ }]
+ },
+ "id": "54347093-ddd3-46c4-b2d5-b65352c10ac3",
+ "zIndex": 6,
+ "parent": "68e49c35-cf6f-46f0-bcde-754c2a2b0ffe"
+}, {
+ "position": {
+ "x": 467,
+ "y": 260
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Judge"
+ },
+ "body": {
+ "refPoints": "0,10 10,0 20,10 10,20"
+ }
+ },
+ "visible": true,
+ "shape": "mk-polygon",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "52a617c4-1c62-4bd6-b827-6215feac4495"
+ }, {
+ "group": "right",
+ "id": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
+ }, {
+ "group": "bottom",
+ "id": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
+ }, {
+ "group": "left",
+ "id": "56c9c736-744a-48f3-84bb-706a0f15712f"
+ }]
+ },
+ "id": "d684e64f-6fac-4879-bd74-2749c9f2436f",
+ "zIndex": 7,
+ "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
+}, {
+ "position": {
+ "x": 467,
+ "y": 370
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "Process"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
+ }, {
+ "group": "right",
+ "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
+ }, {
+ "group": "bottom",
+ "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
+ }, {
+ "group": "left",
+ "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
+ }]
+ },
+ "id": "37ef7b6f-659d-4e10-812d-df7dc7c4d66e",
+ "zIndex": 8,
+ "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
+}, {
+ "position": {
+ "x": 270,
+ "y": 370
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "End"
+ },
+ "body": {
+ "rx": 20,
+ "ry": 26
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "7af1dd51-e0c8-45e2-8f72-96777215e0da"
+ }, {
+ "group": "right",
+ "id": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
+ }, {
+ "group": "bottom",
+ "id": "6faa8816-930d-4356-9fbe-c18bbdfc99ab"
+ }, {
+ "group": "left",
+ "id": "161b1890-3c4a-4758-b444-7a249763ee3a"
+ }]
+ },
+ "id": "1aa90d24-7fca-4298-a0e7-17b4bc88e33b",
+ "zIndex": 9,
+ "parent": "eab0b7c3-3eb4-45da-8b43-cc215047edd4"
+}]
\ No newline at end of file
diff --git a/src/menu/components/chart/antv-X6/xflow.json b/src/menu/components/chart/antv-X6/xflow.json
new file mode 100644
index 0000000..1062628
--- /dev/null
+++ b/src/menu/components/chart/antv-X6/xflow.json
@@ -0,0 +1,986 @@
+[{
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "83fd4cbd-727e-4e99-b35a-854ea08a5a3e",
+ "zIndex": 0,
+ "source": {
+ "cell": "a464f73a-c12d-4612-ae76-55ae754618e2",
+ "port": "18cb49ca-e40a-4cb5-8a05-18c5ed7644fe"
+ },
+ "target": {
+ "cell": "310c8213-f07a-4d30-9d35-36f03a7ceb8e",
+ "port": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "31c3bf79-0ea5-46d1-acd0-028de2161075",
+ "zIndex": 0,
+ "source": {
+ "cell": "310c8213-f07a-4d30-9d35-36f03a7ceb8e",
+ "port": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
+ },
+ "target": {
+ "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
+ "port": "6c62d9ff-0d11-4d44-b234-76033f91b67d"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "79a4da44-2d8e-47fa-8449-fe3623805ffc",
+ "zIndex": 0,
+ "source": {
+ "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
+ "port": "7024e8d6-df2f-4273-aadb-67ed01507bae"
+ },
+ "target": {
+ "cell": "dba4e54b-96e7-4bb8-9d2f-d76d47ce662e",
+ "port": "e1ad288c-6567-413f-b2c3-132d43a566c5"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "ffb2b76e-2d42-494a-a646-eb50fd410168",
+ "zIndex": 0,
+ "source": {
+ "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
+ "port": "6a767960-f16e-4b71-93f8-82400370fe2c"
+ },
+ "target": {
+ "cell": "85e38883-641d-48ed-9701-15148be3cd7f",
+ "port": "e1ad288c-6567-413f-b2c3-132d43a566c5"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "ea73c7bb-645a-4198-a020-21b5df708e52",
+ "zIndex": 0,
+ "source": {
+ "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
+ "port": "acd6bf40-8a98-481d-9280-a7df27da1743"
+ },
+ "target": {
+ "cell": "aef01570-a760-4b9b-ae64-fae758f3b1ca",
+ "port": "c493019f-b8a3-4ac2-b250-b92fcb5553ae"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "0e9ddb8a-8587-406c-b9c3-4876ea47ee36",
+ "zIndex": 0,
+ "source": {
+ "cell": "dba4e54b-96e7-4bb8-9d2f-d76d47ce662e",
+ "port": "037a3476-fa69-4253-87a5-a96834358056"
+ },
+ "target": {
+ "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
+ "port": "ec7d25b5-2c18-49ff-bfe7-37e77945b8b6"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "f3390158-6041-472e-b59e-c98b22a33926",
+ "zIndex": 0,
+ "source": {
+ "cell": "85e38883-641d-48ed-9701-15148be3cd7f",
+ "port": "037a3476-fa69-4253-87a5-a96834358056"
+ },
+ "target": {
+ "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
+ "port": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "7a6ecc86-505f-41c6-ad1a-3627ed46d930",
+ "zIndex": 0,
+ "source": {
+ "cell": "aef01570-a760-4b9b-ae64-fae758f3b1ca",
+ "port": "1532799f-dd72-441e-b753-c4356a9a6589"
+ },
+ "target": {
+ "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
+ "port": "f8b52aa8-fcf9-42c3-a573-badfec3097fb"
+ }
+}, {
+ "shape": "edge",
+ "attrs": {
+ "line": {
+ "stroke": "#000000",
+ "strokeWidth": 1,
+ "targetMarker": {
+ "name": "block",
+ "width": 12,
+ "height": 8
+ }
+ }
+ },
+ "id": "2106ab62-284c-4889-bffa-194d8eec02da",
+ "zIndex": 0,
+ "source": {
+ "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
+ "port": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
+ },
+ "target": {
+ "cell": "66f14529-c53b-43be-be90-8408f6658b07",
+ "port": "748fb9f4-355c-4a6d-b8b2-f826c2dbbb42"
+ }
+}, {
+ "position": {
+ "x": 110,
+ "y": 150
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "寮�濮�"
+ },
+ "body": {
+ "rx": 20,
+ "ry": 26
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "dae0a153-31a7-4d9d-ae2b-7fce5b86eda3"
+ }, {
+ "group": "right",
+ "id": "18cb49ca-e40a-4cb5-8a05-18c5ed7644fe"
+ }, {
+ "group": "bottom",
+ "id": "f2667aa6-1f8b-485b-9de6-ed61b6abe815"
+ }, {
+ "group": "left",
+ "id": "748fb9f4-355c-4a6d-b8b2-f826c2dbbb42"
+ }]
+ },
+ "id": "a464f73a-c12d-4612-ae76-55ae754618e2",
+ "zIndex": 1
+}, {
+ "position": {
+ "x": 239,
+ "y": 150
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "杩囩▼"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "ec7d25b5-2c18-49ff-bfe7-37e77945b8b6"
+ }, {
+ "group": "right",
+ "id": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
+ }, {
+ "group": "bottom",
+ "id": "f8b52aa8-fcf9-42c3-a573-badfec3097fb"
+ }, {
+ "group": "left",
+ "id": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
+ }]
+ },
+ "id": "310c8213-f07a-4d30-9d35-36f03a7ceb8e",
+ "zIndex": 2
+}, {
+ "position": {
+ "x": 470,
+ "y": 150
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "鍐崇瓥"
+ },
+ "body": {
+ "refPoints": "0,10 10,0 20,10 10,20"
+ }
+ },
+ "visible": true,
+ "shape": "mk-polygon",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "d4b5354c-82f3-4a4f-ae58-bf0085b514aa"
+ }, {
+ "group": "right",
+ "id": "037a3476-fa69-4253-87a5-a96834358056"
+ }, {
+ "group": "bottom",
+ "id": "3c1e94df-6424-4d63-b744-8f5f67c2e54a"
+ }, {
+ "group": "left",
+ "id": "e1ad288c-6567-413f-b2c3-132d43a566c5"
+ }]
+ },
+ "id": "85e38883-641d-48ed-9701-15148be3cd7f",
+ "zIndex": 3
+}, {
+ "position": {
+ "x": 470,
+ "y": 80
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "鍐崇瓥"
+ },
+ "body": {
+ "refPoints": "0,10 10,0 20,10 10,20"
+ }
+ },
+ "visible": true,
+ "shape": "mk-polygon",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "d4b5354c-82f3-4a4f-ae58-bf0085b514aa"
+ }, {
+ "group": "right",
+ "id": "037a3476-fa69-4253-87a5-a96834358056"
+ }, {
+ "group": "bottom",
+ "id": "3c1e94df-6424-4d63-b744-8f5f67c2e54a"
+ }, {
+ "group": "left",
+ "id": "e1ad288c-6567-413f-b2c3-132d43a566c5"
+ }]
+ },
+ "id": "dba4e54b-96e7-4bb8-9d2f-d76d47ce662e",
+ "zIndex": 4
+}, {
+ "position": {
+ "x": 470,
+ "y": 223
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "鍙�夎繃绋�"
+ },
+ "body": {
+ "rx": 6,
+ "ry": 6
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "9b1425a8-33db-4b10-a699-fb36fb452bb0"
+ }, {
+ "group": "right",
+ "id": "1532799f-dd72-441e-b753-c4356a9a6589"
+ }, {
+ "group": "bottom",
+ "id": "dfb1a762-247a-4056-8a8c-5f102eaebfac"
+ }, {
+ "group": "left",
+ "id": "c493019f-b8a3-4ac2-b250-b92fcb5553ae"
+ }]
+ },
+ "id": "aef01570-a760-4b9b-ae64-fae758f3b1ca",
+ "zIndex": 5
+}, {
+ "position": {
+ "x": 365,
+ "y": 150
+ },
+ "size": {
+ "width": 36,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "杩炴帴"
+ }
+ },
+ "visible": true,
+ "shape": "mk-circle",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "7024e8d6-df2f-4273-aadb-67ed01507bae"
+ }, {
+ "group": "right",
+ "id": "6a767960-f16e-4b71-93f8-82400370fe2c"
+ }, {
+ "group": "bottom",
+ "id": "acd6bf40-8a98-481d-9280-a7df27da1743"
+ }, {
+ "group": "left",
+ "id": "6c62d9ff-0d11-4d44-b234-76033f91b67d"
+ }]
+ },
+ "id": "ef3d1b04-c830-4146-89a4-23e330fce83d",
+ "zIndex": 6
+}, {
+ "position": {
+ "x": 590,
+ "y": 150
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "杩囩▼"
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "ec7d25b5-2c18-49ff-bfe7-37e77945b8b6"
+ }, {
+ "group": "right",
+ "id": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
+ }, {
+ "group": "bottom",
+ "id": "f8b52aa8-fcf9-42c3-a573-badfec3097fb"
+ }, {
+ "group": "left",
+ "id": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
+ }]
+ },
+ "id": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
+ "zIndex": 7
+}, {
+ "position": {
+ "x": 729,
+ "y": 150
+ },
+ "size": {
+ "width": 66,
+ "height": 36
+ },
+ "attrs": {
+ "text": {
+ "text": "缁撴潫"
+ },
+ "body": {
+ "rx": 20,
+ "ry": 26
+ }
+ },
+ "visible": true,
+ "shape": "mk-rect",
+ "ports": {
+ "groups": {
+ "top": {
+ "position": "top",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": "right",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": "bottom",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": "left",
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "var(--mk-sys-color)",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [{
+ "group": "top",
+ "id": "dae0a153-31a7-4d9d-ae2b-7fce5b86eda3"
+ }, {
+ "group": "right",
+ "id": "18cb49ca-e40a-4cb5-8a05-18c5ed7644fe"
+ }, {
+ "group": "bottom",
+ "id": "f2667aa6-1f8b-485b-9de6-ed61b6abe815"
+ }, {
+ "group": "left",
+ "id": "748fb9f4-355c-4a6d-b8b2-f826c2dbbb42"
+ }]
+ },
+ "id": "66f14529-c53b-43be-be90-8408f6658b07",
+ "zIndex": 8
+}]
\ No newline at end of file
diff --git a/src/menu/menushell/card.jsx b/src/menu/menushell/card.jsx
index 1719f71..49a3646 100644
--- a/src/menu/menushell/card.jsx
+++ b/src/menu/menushell/card.jsx
@@ -133,14 +133,6 @@
}
}
- // if (card.type === 'antvX6') { // 娴嬭瘯
- // return (
- // <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} style={style}>
- // <AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>
- // </div>
- // )
- // }
-
return (
<div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drag(drop(node))} style={style}>
{getCardComponent()}
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.jsx b/src/tabviews/custom/components/chart/antv-X6/index.jsx
new file mode 100644
index 0000000..3e2990b
--- /dev/null
+++ b/src/tabviews/custom/components/chart/antv-X6/index.jsx
@@ -0,0 +1,1361 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { Spin, Tooltip, Empty, message, Modal, notification } from 'antd'
+import { VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined, DownloadOutlined } from '@ant-design/icons'
+import { Graph, Shape } from '@antv/x6'
+import { Stencil } from '@antv/x6-plugin-stencil'
+import { Transform } from '@antv/x6-plugin-transform'
+import { Selection } from '@antv/x6-plugin-selection'
+import { Snapline } from '@antv/x6-plugin-snapline'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { Clipboard } from '@antv/x6-plugin-clipboard'
+import { History } from '@antv/x6-plugin-history'
+import { Export } from '@antv/x6-plugin-export'
+
+import Api from '@/api'
+import UtilsDM from '@/utils/utils-datamanage.js'
+import MKEmitter from '@/utils/events.js'
+import asyncComponent from '@/utils/asyncComponent'
+import NormalHeader from '@/tabviews/custom/components/share/normalheader'
+import './index.scss'
+
+const NodeUpdate = asyncComponent(() => import('./nodeupdate'))
+
+const groups = {
+ top: {
+ position: 'top',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: 'var(--mk-sys-color)',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden'
+ }
+ }
+ }
+ },
+ right: {
+ position: 'right',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: 'var(--mk-sys-color)',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden'
+ }
+ }
+ }
+ },
+ bottom: {
+ position: 'bottom',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: 'var(--mk-sys-color)',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden'
+ }
+ }
+ }
+ },
+ left: {
+ position: 'left',
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: 'var(--mk-sys-color)',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden'
+ }
+ }
+ }
+ }
+}
+
+Graph.registerNode(
+ 'lane',
+ {
+ inherit: 'rect',
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body',
+ },
+ {
+ tagName: 'rect',
+ selector: 'name-rect',
+ },
+ {
+ tagName: 'text',
+ selector: 'name-text',
+ },
+ ],
+ attrs: {
+ body: {
+ fill: '#FFF',
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ },
+ 'name-rect': {
+ width: 200,
+ height: 36,
+ fill: '#5F95FF',
+ stroke: '#fff',
+ strokeWidth: 1,
+ x: -1,
+ },
+ 'name-text': {
+ ref: 'name-rect',
+ refY: 0.5,
+ refX: 0.5,
+ textAnchor: 'middle',
+ fontWeight: 'bold',
+ fill: '#fff',
+ fontSize: 14,
+ },
+ },
+ zIndex: 0
+ },
+ true,
+)
+
+Graph.registerNode(
+ 'mk-rect',
+ {
+ inherit: 'rect',
+ width: 66,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#000000',
+ fill: '#FFFFFF'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ },
+ ports: {
+ groups,
+ items: [
+ { group: 'top' },
+ { group: 'right' },
+ { group: 'bottom' },
+ { group: 'left' }
+ ]
+ }
+ },
+ true
+)
+
+Graph.registerNode(
+ 'mk-polygon',
+ {
+ inherit: 'polygon',
+ width: 66,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#000000',
+ fill: '#FFFFFF'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ },
+ ports: {
+ groups,
+ items: [
+ { group: 'top' },
+ { group: 'right' },
+ { group: 'bottom' },
+ { group: 'left' }
+ ]
+ }
+ },
+ true
+)
+
+Graph.registerNode(
+ 'mk-paral',
+ {
+ inherit: 'polygon',
+ width: 66,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#000000',
+ fill: '#FFFFFF'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ },
+ ports: {
+ groups,
+ items: [
+ { group: 'top' },
+ { group: 'bottom' }
+ ]
+ }
+ },
+ true
+)
+
+Graph.registerNode(
+ 'mk-circle',
+ {
+ inherit: 'circle',
+ width: 36,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#000000',
+ fill: '#FFFFFF'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ },
+ ports: {
+ groups,
+ items: [
+ { group: 'top' },
+ { group: 'right' },
+ { group: 'bottom' },
+ { group: 'left' }
+ ]
+ }
+ },
+ true
+)
+
+Graph.registerNode(
+ 'mk-ellipse',
+ {
+ inherit: 'ellipse',
+ width: 66,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 1,
+ stroke: '#000000',
+ fill: '#FFFFFF'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ },
+ ports: {
+ groups,
+ items: [
+ { group: 'top' },
+ { group: 'right' },
+ { group: 'bottom' },
+ { group: 'left' }
+ ]
+ }
+ },
+ true
+)
+
+Graph.registerNode(
+ 'mk-star',
+ {
+ inherit: 'polygon',
+ width: 36,
+ height: 36,
+ points: '100,10 40,198 190,78 10,78 160,198',
+ attrs: {
+ body: {
+ fill: '#FFFFFF',
+ stroke: '#000000',
+ strokeWidth: 1,
+ fillRule: 'nonzero'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ },
+ ports: {
+ groups,
+ items: [
+ { group: 'top' },
+ { group: 'right' },
+ { group: 'bottom' },
+ { group: 'left' }
+ ]
+ }
+ },
+ true
+)
+
+Graph.registerNode(
+ 'mk-text',
+ {
+ inherit: 'rect',
+ width: 66,
+ height: 36,
+ attrs: {
+ body: {
+ strokeWidth: 0,
+ fill: 'transparent'
+ },
+ text: {
+ fontSize: 12,
+ fill: '#262626'
+ }
+ }
+ },
+ true
+)
+
+class antvX6Chart extends Component {
+ static propTpyes = {
+ config: PropTypes.object,
+ mainSearch: PropTypes.any
+ }
+
+ state = {
+ config: null,
+ toolunfold: true,
+ nodeunfold: true,
+ editing: false,
+ node: null,
+ arr_field: 'id,cells',
+ loading: false
+ }
+
+ selectNode = null
+ mkGraph = null
+
+ UNSAFE_componentWillMount () {
+ const { config } = this.props
+ let _config = fromJS(config).toJS()
+
+ let BID = ''
+ let BData = ''
+
+ if (config.setting.supModule) {
+ BData = window.GLOB.CacheData.get(config.setting.supModule)
+ } else {
+ BData = window.GLOB.CacheData.get(config.$pageId)
+ }
+ if (BData) {
+ BID = BData.$BID || ''
+ }
+
+ this.setState({
+ config: _config,
+ BID: BID || '',
+ BData: BData || '',
+ plot: _config.plot
+ }, () => {
+ if (config.setting.onload === 'true') {
+ setTimeout(() => {
+ this.loadData()
+ }, _config.setting.delay || 0)
+ }
+ })
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ }
+
+ async loadData () {
+ const { mainSearch } = this.props
+ const { config, arr_field, BID } = this.state
+
+ if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇�
+ if (!is(fromJS(this.data), fromJS([]))) {
+ this.data = []
+ this.handleData()
+ }
+ return
+ }
+
+ let searches = config.setting.useMSearch && mainSearch ? mainSearch : []
+
+ let requireFields = searches.filter(item => item.required && item.value === '')
+ if (requireFields.length > 0) {
+ return
+ }
+
+ this.setState({
+ loading: true
+ })
+
+ let _orderBy = config.setting.order || ''
+ let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID)
+
+ let result = await Api.genericInterface(param)
+ if (result.status) {
+ if (config.$cache && config.setting.onload !== 'false') {
+ Api.writeCacheConfig(config.uuid, result.data || '')
+ }
+
+ this.setState({
+ loading: false
+ })
+
+ if (!is(fromJS(this.data), fromJS(result.data || []))) {
+ this.data = result.data || []
+ this.handleData()
+ }
+
+ if (result.message) {
+ if (result.ErrCode === 'Y') {
+ Modal.success({
+ title: result.message
+ })
+ } else if (result.ErrCode === 'S') {
+ notification.success({
+ top: 92,
+ message: result.message,
+ duration: 2
+ })
+ }
+ }
+ } else {
+ this.setState({
+ loading: false
+ })
+
+ if (!result.message) return
+ if (result.ErrCode === 'N') {
+ Modal.error({
+ title: result.message,
+ })
+ } else if (result.ErrCode !== '-2') {
+ notification.error({
+ top: 92,
+ message: result.message,
+ duration: 10
+ })
+ }
+ }
+ }
+
+ handleData = () => {
+ const { config } = this.state
+
+ MKEmitter.emit('resetSelectLine', config.uuid, '', '')
+
+ let _element = document.getElementById(config.uuid + 'container')
+ if (_element) {
+ _element.innerHTML = ''
+ }
+
+ setTimeout(() => {
+ this.viewrender()
+ }, 50)
+ }
+
+ viewrender = () => {
+ const { plot } = this.state
+
+ if (plot.subtype === 'xflow') {
+ this.xflowrender()
+ } else if (plot.subtype === 'lane') {
+ this.lanerender()
+ }
+ }
+
+ xflowrender = () => {
+ const { config } = this.state
+
+ const graph = new Graph({
+ container: document.getElementById(config.uuid + 'container'),
+ grid: config.plot.grid,
+ scaling: {
+ min: 0.5,
+ max: 2
+ },
+ autoResize: true,
+ panning: true,
+ background: {
+ color: config.plot.backgroundColor || 'transparent'
+ },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl'
+ },
+ connecting: {
+ router: 'manhattan',
+ connector: {
+ name: 'rounded',
+ args: {
+ radius: 8
+ }
+ },
+ anchor: 'center',
+ connectionPoint: 'anchor',
+ 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'
+ }
+ }
+ }
+ }
+ })
+
+ // #region 浣跨敤鎻掍欢
+ graph
+ .use(new Transform({
+ resizing: true,
+ rotating: true
+ }))
+ .use(new Selection())
+ .use(new Snapline())
+ .use(new Keyboard())
+ .use(new Clipboard())
+ .use(new History())
+ .use(new Export())
+
+ // #region 鍒濆鍖� stencil
+ const stencil = new Stencil({
+ title: '娴佺▼鍥�',
+ target: graph,
+ stencilGraphWidth: 180,
+ stencilGraphHeight: 180,
+ groups: [
+ {
+ title: '閫氱敤鑺傜偣',
+ name: 'group1'
+ },
+ {
+ title: '鑷畾涔�',
+ name: 'group2',
+ graphHeight: 150,
+ layoutOptions: {
+ rowHeight: 70
+ }
+ }
+ ],
+ layoutOptions: {
+ columns: 2,
+ columnWidth: 80,
+ rowHeight: 55
+ }
+ })
+
+ document.getElementById(config.uuid + 'stencil').appendChild(stencil.container)
+
+ // #region 蹇嵎閿笌浜嬩欢
+ graph.bindKey(['meta+c', 'ctrl+c'], () => {
+ const cells = graph.getSelectedCells()
+ if (cells.length) {
+ graph.copy(cells)
+ }
+ return false
+ })
+ graph.bindKey(['meta+x', 'ctrl+x'], () => {
+ const cells = graph.getSelectedCells()
+ if (cells.length) {
+ graph.cut(cells)
+ }
+ return false
+ })
+ graph.bindKey(['meta+v', 'ctrl+v'], () => {
+ if (!graph.isClipboardEmpty()) {
+ graph.paste({ offset: 32 })
+ }
+ return false
+ })
+
+ // undo redo
+ graph.bindKey(['meta+z', 'ctrl+z'], () => {
+ if (graph.canUndo()) {
+ graph.undo()
+ }
+ return false
+ })
+ graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+ if (graph.canRedo()) {
+ graph.redo()
+ }
+ return false
+ })
+
+ // 鍒犻櫎鍏冪礌
+ graph.bindKey(['backspace', 'delete'], () => {
+ const cells = graph.getSelectedCells()
+ if (cells.length) {
+ graph.removeCells(cells)
+ this.selectNode = null
+ this.setState({node: null})
+ }
+ })
+
+ // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
+ const showPorts = (ports, show) => {
+ for (let i = 0, len = ports.length; i < len; i += 1) {
+ ports[i].style.visibility = show ? 'visible' : 'hidden'
+ }
+ }
+ graph.on('node:mouseenter', () => {
+ const container = document.getElementById(config.uuid + 'container')
+ const ports = container.querySelectorAll('.x6-port-body')
+ showPorts(ports, true)
+ })
+ graph.on('node:mouseleave', () => {
+ const container = document.getElementById(config.uuid + 'container')
+ const ports = container.querySelectorAll('.x6-port-body')
+ showPorts(ports, false)
+ })
+
+ graph.on('node:click', ({ e, x, y, node, view }) => {
+ this.selectNode = node
+
+ this.setState({node: node.store.data})
+ })
+ graph.on('edge:click', ({ e, x, y, edge, view }) => {
+ this.selectNode = edge
+
+ this.setState({node: edge.store.data})
+
+ graph.clearTransformWidgets()
+ })
+ graph.on('blank:click', ({ e, x, y }) => {
+ this.selectNode = null
+
+ this.setState({node: null})
+ })
+
+ const r1 = graph.createNode({
+ shape: 'mk-rect',
+ label: '寮�濮�',
+ attrs: {
+ body: {
+ rx: 20,
+ ry: 26
+ }
+ }
+ })
+ const r2 = graph.createNode({
+ shape: 'mk-rect',
+ label: '杩囩▼'
+ })
+ const r3 = graph.createNode({
+ shape: 'mk-rect',
+ attrs: {
+ body: {
+ rx: 6,
+ ry: 6
+ }
+ },
+ label: '鍙�夎繃绋�'
+ })
+ const r4 = graph.createNode({
+ shape: 'mk-polygon',
+ attrs: {
+ body: {
+ refPoints: '0,10 10,0 20,10 10,20'
+ }
+ },
+ label: '鍐崇瓥'
+ })
+ const r5 = graph.createNode({
+ shape: 'mk-paral',
+ attrs: {
+ body: {
+ refPoints: '10,0 40,0 30,20 0,20'
+ }
+ },
+ label: '鏁版嵁'
+ })
+ const r6 = graph.createNode({
+ shape: 'mk-circle',
+ label: '杩炴帴'
+ })
+
+ stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
+
+ const p1 = graph.createNode({
+ shape: 'mk-ellipse',
+ label: 'ellipse'
+ })
+ const p2 = graph.createNode({
+ shape: 'mk-star',
+ label: ''
+ })
+
+ const p3 = graph.createNode({
+ shape: 'mk-text',
+ label: '鏂囨湰'
+ })
+
+ stencil.load([p1, p2, p3], 'group2')
+
+ this.mkGraph = graph
+ }
+
+ lanerender = () => {
+ const { config } = this.state
+
+ const graph = new Graph({
+ container: document.getElementById(config.uuid + 'container'),
+ scaling: {
+ min: 0.5,
+ max: 2
+ },
+ autoResize: true,
+ panning: true,
+ background: { color: '#ffffff' },
+ mousewheel: {
+ enabled: true,
+ zoomAtMousePosition: true,
+ modifiers: 'ctrl'
+ },
+ connecting: {
+ router: 'manhattan',
+ connector: {
+ name: 'rounded',
+ args: {
+ radius: 8
+ }
+ },
+ anchor: 'center',
+ connectionPoint: 'anchor',
+ 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()
+ }
+ }
+ })
+
+ graph
+ .use(new Selection())
+ .use(new Snapline())
+ .use(new Keyboard())
+ .use(new Clipboard())
+ .use(new History())
+ .use(new Export())
+
+ // #region 鍒濆鍖� stencil
+ const stencil = new Stencil({
+ title: '娴佺▼鍥�',
+ target: graph,
+ stencilGraphWidth: 180,
+ stencilGraphHeight: 180,
+ groups: [
+ {
+ title: '閫氱敤鑺傜偣',
+ name: 'group1'
+ },
+ {
+ title: '鑷畾涔�',
+ name: 'group2',
+ graphHeight: 150,
+ layoutOptions: {
+ rowHeight: 70
+ }
+ },
+ {
+ title: '娉抽亾',
+ name: 'group3',
+ graphHeight: 120,
+ layoutOptions: {
+ rowHeight: 70
+ }
+ }
+ ],
+ layoutOptions: {
+ columns: 2,
+ columnWidth: 80,
+ rowHeight: 55
+ }
+ })
+
+ document.getElementById(config.uuid + 'stencil').appendChild(stencil.container)
+
+ // #region 蹇嵎閿笌浜嬩欢
+ graph.bindKey(['meta+c', 'ctrl+c'], () => {
+ const cells = graph.getSelectedCells()
+ if (cells.length) {
+ graph.copy(cells)
+ }
+ return false
+ })
+ graph.bindKey(['meta+x', 'ctrl+x'], () => {
+ const cells = graph.getSelectedCells()
+ if (cells.length) {
+ graph.cut(cells)
+ }
+ return false
+ })
+ graph.bindKey(['meta+v', 'ctrl+v'], () => {
+ if (!graph.isClipboardEmpty()) {
+ graph.paste({ offset: { dx: 0, dy: 20 } })
+ }
+ return false
+ })
+
+ graph.bindKey(['meta+z', 'ctrl+z'], () => {
+ if (graph.canUndo()) {
+ graph.undo()
+ }
+ return false
+ })
+ graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+ if (graph.canRedo()) {
+ graph.redo()
+ }
+ return false
+ })
+
+ // 鍒犻櫎鍏冪礌
+ graph.bindKey(['backspace', 'delete'], () => {
+ const cells = graph.getSelectedCells()
+ if (cells.length) {
+ graph.removeCells(cells)
+ this.selectNode = null
+ this.setState({node: null})
+ }
+ })
+
+ // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
+ const showPorts = (ports, show) => {
+ for (let i = 0, len = ports.length; i < len; i += 1) {
+ ports[i].style.visibility = show ? 'visible' : 'hidden'
+ }
+ }
+ graph.on('node:mouseenter', ({ cell }) => {
+ if (cell.prop('shape') === 'lane') return
+
+ const container = document.getElementById(config.uuid + 'container')
+ const ports = container.querySelectorAll('.x6-port-body')
+ showPorts(ports, true)
+ })
+ graph.on('node:mouseleave', () => {
+ const container = document.getElementById(config.uuid + 'container')
+ const ports = container.querySelectorAll('.x6-port-body')
+ showPorts(ports, false)
+ })
+
+ graph.on('node:added', ({ cell, index, options }) => {
+ if (cell.prop('shape') === 'lane') {
+ graph.startBatch('add-lane')
+
+ this.addLane(cell, graph)
+
+ graph.stopBatch('add-lane')
+ } else {
+ let num = graph.getCellCount()
+
+ if (num <= 1) {
+ message.warning('璇锋坊鍔犳吵閬擄紒')
+ graph.removeCells([cell])
+ } else {
+ this.addNode(cell, graph)
+ }
+ }
+ })
+ graph.on('node:click', ({ e, x, y, node, view }) => {
+ this.selectNode = node
+ this.setState({node: node.store.data})
+ })
+ graph.on('edge:click', ({ e, x, y, edge, view }) => {
+ this.selectNode = edge
+ this.setState({node: edge.store.data})
+
+ graph.clearTransformWidgets()
+ })
+ graph.on('blank:click', ({ e, x, y }) => {
+ this.selectNode = null
+
+ this.setState({node: null})
+ })
+
+ const r1 = graph.createNode({
+ shape: 'mk-rect',
+ label: '寮�濮�',
+ attrs: {
+ body: {
+ rx: 20,
+ ry: 26
+ }
+ }
+ })
+ const r2 = graph.createNode({
+ shape: 'mk-rect',
+ label: '杩囩▼'
+ })
+ const r3 = graph.createNode({
+ shape: 'mk-rect',
+ attrs: {
+ body: {
+ rx: 6,
+ ry: 6
+ }
+ },
+ label: '鍙�夎繃绋�'
+ })
+ const r4 = graph.createNode({
+ shape: 'mk-polygon',
+ attrs: {
+ body: {
+ refPoints: '0,10 10,0 20,10 10,20'
+ }
+ },
+ label: '鍐崇瓥'
+ })
+ const r5 = graph.createNode({
+ shape: 'mk-paral',
+ attrs: {
+ body: {
+ refPoints: '10,0 40,0 30,20 0,20'
+ }
+ },
+ label: '鏁版嵁'
+ })
+ const r6 = graph.createNode({
+ shape: 'mk-circle',
+ label: '杩炴帴'
+ })
+
+ stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
+
+ const p1 = graph.createNode({
+ shape: 'mk-ellipse',
+ label: 'ellipse'
+ })
+ const p2 = graph.createNode({
+ shape: 'mk-star',
+ label: ''
+ })
+
+ const p3 = graph.createNode({
+ shape: 'mk-text',
+ label: '鏂囨湰'
+ })
+
+ stencil.load([p1, p2, p3], 'group2')
+
+ const g1 = graph.createNode({
+ shape: 'lane',
+ label: '闃舵n'
+ })
+
+ stencil.load([g1], 'group3')
+
+ // let data = [{"id":"1","shape":"lane","width":260,"height":500,"position":{"x":0,"y":0},"label":"闃舵1", preId: '', nextId: '2'},{"id":"2","shape":"lane","width":200,"height":500,"position":{"x":260,"y":0},"label":"<Function>", preId: '1', nextId: '3'},{"id":"3","shape":"lane","width":200,"height":500,"position":{"x":460,"y":0},"label":"<Function>", preId: '2', nextId: '4'},{"id":"4","shape":"lane","width":200,"height":500,"position":{"x":660,"y":0},"label":"<Function>", preId: '3', nextId: ''}]
+ // let cells = []
+ // data.forEach((item) => {
+ // if (item.shape === 'edge') {
+ // cells.push(graph.createEdge(item))
+ // } else {
+ // cells.push(graph.createNode(item))
+ // }
+ // })
+ // graph.resetCells(cells)
+ // graph.zoomToFit({ padding: 10, maxScale: 1 })
+
+ this.mkGraph = graph
+ }
+
+ setTop = () => {
+ if (!this.selectNode) {
+ message.warning('璇烽�夋嫨鑺傜偣锛�')
+ return
+ }
+ this.selectNode.toFront()
+ }
+
+ setBottom = () => {
+ if (!this.selectNode) {
+ message.warning('璇烽�夋嫨鑺傜偣锛�')
+ return
+ }
+
+ // let cells = this.mkGraph.getCells()
+ this.selectNode.toBack()
+ }
+
+ // zoom() 鍙幏鍙栨垨鑰呰缃缉鏀炬瘮渚�
+ setZoomIn = () => {
+ this.mkGraph.zoom(0.1)
+ }
+
+ setZoomOut = () => {
+ this.mkGraph.zoom(-0.1)
+ }
+
+ setZoomInt = () => {
+ this.mkGraph.zoomTo(1)
+ }
+
+ save = () => {
+ // let nodes = this.mkGraph.toJSON()
+ }
+
+ savePicture = () => {
+ const { config } = this.state
+ this.mkGraph.exportPNG(config.name, {padding: 20})
+ }
+
+ addLane = (cell, graph) => {
+ const { config } = this.state
+
+ let nodes = graph.getNodes()
+
+ cell.prop('zIndex', 0)
+ let basePoint = cell.prop('position/x')
+
+ if (basePoint <= 0 || nodes.length <= 1) {
+ basePoint = 0
+ } else {
+ let _h = false
+ let _l = 0
+ nodes.forEach(item => {
+ if (item.id === cell.id) return
+ if (item.prop('shape') !== 'lane') return
+
+ let x1 = item.prop('position/x')
+ let x2 = item.prop('position/x') + item.prop('size/width')
+ if (basePoint > x1 && basePoint <= x2) {
+ basePoint = x2
+ _h = true
+ }
+ if (_l < x2) {
+ _l = x2
+ }
+ })
+
+ if (!_h && _l) {
+ basePoint = _l
+ }
+ }
+
+ let height = 400
+ if (typeof(config.plot.height) === 'number' || /px/.test(config.plot.height)) {
+ height = parseInt(config.plot.height)
+ }
+
+ cell.prop('size', {width: 200, height: height})
+ cell.prop('position', {x: basePoint, y: 0})
+
+ this.resetlane(cell.id, basePoint, 200)
+ }
+
+ addNode = (cell, graph) => {
+ let nodes = graph.getNodes()
+
+ let cx1 = cell.prop('position/x')
+ let cx2 = cx1 + cell.prop('size/width')
+ let cx3 = parseInt((cx1 + cx2) / 2)
+
+ nodes.forEach(item => {
+ if (item.prop('shape') !== 'lane') return
+
+ let x1 = item.prop('position/x')
+ let x2 = item.prop('position/x') + item.prop('size/width')
+
+ if (cx3 > x1 && cx3 <= x2) {
+ cell.prop('parent', item.id)
+
+ if (cx1 < x1) {
+ cell.prop('position/x', x1)
+ } else if (cx2 > x2) {
+ cell.prop('position/x', x2 - cell.prop('size/width'))
+ }
+
+ let y1 = item.prop('size/height') - cell.prop('size/height')
+
+ if (cell.prop('position/y') < 36) {
+ cell.prop('position/y', 36)
+ } else if (cell.prop('position/y') > y1) {
+ cell.prop('position/y', y1)
+ }
+ }
+ })
+
+ if (!cell.prop('parent')) {
+ let flane = null
+ let llane = null
+ let lane = null
+ nodes.forEach(item => {
+ if (item.prop('shape') !== 'lane') return
+ if (!flane) {
+ flane = item
+ llane = item
+ } else {
+ if (item.prop('position/x') < flane.prop('position/x')) {
+ flane = item
+ }
+ if (item.prop('position/x') > llane.prop('position/x')) {
+ llane = item
+ }
+ }
+ })
+
+ if (cx1 <= flane.prop('position/x')) {
+ lane = flane
+ } else {
+ lane = llane
+ }
+
+ let x1 = lane.prop('position/x')
+ let x2 = lane.prop('position/x') + lane.prop('size/width')
+
+ cell.prop('parent', lane.id)
+
+ if (cx1 < x1) {
+ cell.prop('position/x', x1)
+ } else if (cx2 > x2) {
+ cell.prop('position/x', x2 - cell.prop('size/width'))
+ }
+
+ let y1 = lane.prop('size/height') - cell.prop('size/height')
+
+ if (cell.prop('position/y') < 36) {
+ cell.prop('position/y', 36)
+ } else if (cell.prop('position/y') > y1) {
+ cell.prop('position/y', y1)
+ }
+ }
+ }
+
+ changeProps = (value, key) => {
+ const { node } = this.state
+
+ if (node.shape === 'edge') {
+ if (key === 'title') {
+ this.selectNode.setLabels(value)
+ } else if (key === 'stroke') {
+ this.selectNode.attr('line/stroke', value)
+ } else if (key === 'strokeWidth') {
+ this.selectNode.attr('line/strokeWidth', value)
+ } else if (key === 'lineType') {
+ if (value === 'dash') {
+ this.selectNode.attr('line/strokeDasharray', 5)
+ } else {
+ this.selectNode.attr('line/strokeDasharray', 0)
+ }
+ }
+ } else if (node.shape === 'lane') {
+ if (key === 'title') {
+ this.selectNode.attr('text/text', value)
+ } else if (key === 'fill') {
+ this.selectNode.attr('name-rect/fill', value)
+ } else if (key === 'stroke') {
+ this.selectNode.attr('body/stroke', value)
+ } else if (key === 'fontSize') {
+ this.selectNode.attr('name-text/fontSize', value)
+ } else if (key === 'fontFill') {
+ this.selectNode.attr('name-text/fill', value)
+ } else if (key === 'height') {
+ this.selectNode.prop('size/height', value)
+ } else if (key === 'width') {
+ this.mkGraph.startBatch('width-change')
+ let offset = value - this.selectNode.prop('size/width')
+
+ this.selectNode.prop('size/width', value)
+ this.selectNode.attr('name-rect/width', value)
+
+ this.resetlane(this.selectNode.id, this.selectNode.prop('position/x'), offset)
+
+ this.mkGraph.stopBatch('width-change')
+ }
+ } else {
+ if (key === 'title') {
+ this.selectNode.attr('text/text', value)
+ } else if (key === 'fill') {
+ this.selectNode.attr('body/fill', value)
+ } else if (key === 'stroke') {
+ this.selectNode.attr('body/stroke', value)
+ } else if (key === 'fontSize') {
+ this.selectNode.attr('text/fontSize', value)
+ } else if (key === 'fontFill') {
+ this.selectNode.attr('text/fill', value)
+ } else if (key === 'mksign') {
+ this.selectNode.prop('mksign', value)
+ }
+ }
+ }
+
+ resetlane = (id, x, offset) => {
+ let nodes = this.mkGraph.getNodes()
+
+ nodes.forEach(item => {
+ if (item.id === id || item.prop('parent') === id) return
+ if (item.prop('shape') === 'edge') return
+
+ let x1 = item.prop('position/x')
+ if (x1 < x) return
+
+ item.prop('position/x', x1 + offset)
+ })
+ }
+
+ render() {
+ const { loading, config, empty, toolunfold, nodeunfold, node } = this.state
+
+ return (
+ <div className="custom-x6-plot-box" id={'anchor' + config.uuid} style={config.style}>
+ {loading ?
+ <div className="loading-mask">
+ <div className="ant-spin-blur"></div>
+ <Spin />
+ </div> : null
+ }
+ <NormalHeader config={config} />
+ {empty ? <Empty description={false}/> : null}
+ <div className="mk-toolbar">
+ <div className="left-tool">
+ {config.plot.subtype === 'xflow' ? <Tooltip title="缃墠">
+ <VerticalAlignTopOutlined onClick={this.setTop}/>
+ </Tooltip> : null}
+ {config.plot.subtype === 'xflow' ? <Tooltip title="缃悗">
+ <VerticalAlignBottomOutlined onClick={this.setBottom}/>
+ </Tooltip> : null}
+ <Tooltip title="淇濆瓨">
+ <SaveOutlined onClick={this.save}/>
+ </Tooltip>
+ {config.plot.export === 'png' ? <Tooltip title="瀵煎嚭鍥剧墖">
+ <DownloadOutlined onClick={this.savePicture}/>
+ </Tooltip> : null}
+ </div>
+ <div className="right-tool">
+ <Tooltip title="鏀惧ぇ">
+ <ZoomInOutlined onClick={this.setZoomIn}/>
+ </Tooltip>
+ <Tooltip title="缂╁皬">
+ <ZoomOutOutlined onClick={this.setZoomOut}/>
+ </Tooltip>
+ <Tooltip title="1:1">
+ <OneToOneOutlined onClick={this.setZoomInt}/>
+ </Tooltip>
+ </div>
+ </div>
+ <div className="canvas" style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
+ <div id={config.uuid + 'stencil'} className={'mk-stencil ' + (toolunfold ? '' : 'merge')}>
+ <div className="tool-control" onClick={() => this.setState({toolunfold: !toolunfold})}>
+ <DoubleLeftOutlined />
+ </div>
+ </div>
+ <div id={config.uuid + 'container'} className="mk-container"></div>
+ <div className={'mk-node-edit ' + (nodeunfold ? '' : 'merge')}>
+ <div className="tool-control" onClick={() => this.setState({nodeunfold: !nodeunfold})}>
+ <DoubleLeftOutlined />
+ </div>
+ <div className="header">璁剧疆</div>
+ {!node ? <div className="empty">鏈�変腑</div> : <NodeUpdate node={node} onChange={this.changeProps}/>}
+ </div>
+ </div>
+ </div>
+ )
+ }
+}
+
+export default antvX6Chart
\ No newline at end of file
diff --git a/src/tabviews/custom/components/chart/antv-X6/index.scss b/src/tabviews/custom/components/chart/antv-X6/index.scss
new file mode 100644
index 0000000..47e2b44
--- /dev/null
+++ b/src/tabviews/custom/components/chart/antv-X6/index.scss
@@ -0,0 +1,245 @@
+.custom-x6-plot-box {
+ position: relative;
+ box-sizing: border-box;
+ background: #ffffff;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ .mk-toolbar {
+ width: 100%;
+ height: 40px;
+ border: 1px solid #1890ff;
+
+ .left-tool {
+ float: left;
+ line-height: 40px;
+ .anticon {
+ margin: 0 10px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+ }
+ .right-tool {
+ float: right;
+ line-height: 40px;
+ .anticon {
+ margin: 0 10px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+ }
+ }
+ .x6-graph-scroller::-webkit-scrollbar {
+ display: none;
+ }
+ .x6-cell.x6-edge.x6-edge-selected path:nth-child(2) {
+ stroke: #1890ff;
+ }
+ .x6-cell[data-shape="lane"] {
+ cursor: default;
+ }
+ .x6-node[data-shape="mk-polygon"]:hover {
+ .x6-port {
+ circle {
+ visibility: visible!important;
+ }
+ }
+ }
+
+ .canvas {
+ margin: 0px;
+ letter-spacing: 0px;
+ display: flex;
+
+ .mk-stencil {
+ width: 180px;
+ min-width: 180px;
+ height: 100%;
+ position: relative;
+ z-index: 2;
+ border-right: 1px solid #dfe3e8;
+ transition: all 0.2s;
+
+ .x6-widget-stencil-title {
+ display: none;
+ }
+ .x6-widget-stencil-content {
+ overflow-y: auto;
+ }
+ .x6-widget-stencil-content::-webkit-scrollbar {
+ width: 5px;
+ }
+ .x6-widget-stencil-content::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0.07);
+ }
+ .x6-widget-stencil-content::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ border: 1px solid rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0);
+ }
+ .tool-control {
+ position: absolute;
+ right: -13px;
+ top: 5px;
+ z-index: 3;
+ background: #ffffff;
+ width: 25px;
+ height: 25px;
+ border: 1px solid #d8d8d8;
+ border-radius: 30px;
+ text-align: center;
+ line-height: 25px;
+ cursor: pointer;
+ }
+
+ .x6-widget-stencil-group[data-name="group3"] {
+ .x6-graph-svg {
+ top: 5px;
+ left: 5px;
+ right: 5px;
+ }
+ .x6-cell {
+ transform: none!important;
+ rect:nth-child(2) {
+ width: 165px!important;
+ }
+ text {
+ transform: matrix(1,0,0,1,85,18)!important;
+ }
+ }
+ }
+ }
+ .mk-stencil.merge {
+ width: 0px;
+ min-width: 0px;
+
+ .tool-control {
+ right: -25px;
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ .anticon-double-left {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .mk-node-edit {
+ width: 180px;
+ min-width: 180px;
+ height: 100%;
+ position: relative;
+ z-index: 2;
+ border-left: 1px solid #dfe3e8;
+ background: #ffffff;
+ transition: all 0.2s;
+
+ .header {
+ width: 100%;
+ height: 32px;
+ text-align: center;
+ line-height: 32px;
+ background-color: #f5f5f5!important;
+ overflow-x: hidden;
+ white-space: nowrap;
+ }
+ .empty {
+ width: 100%;
+ text-align: center;
+ padding-top: 20px;
+ overflow-x: hidden;
+ white-space: nowrap;
+ }
+
+ .tool-control {
+ position: absolute;
+ left: -13px;
+ top: 5px;
+ z-index: 3;
+ background: #ffffff;
+ width: 25px;
+ height: 25px;
+ border: 1px solid #d8d8d8;
+ border-radius: 30px;
+ text-align: center;
+ line-height: 25px;
+ cursor: pointer;
+ .anticon-double-left {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ .mk-node-edit.merge {
+ width: 0px;
+ min-width: 0px;
+
+ .tool-control {
+ left: -25px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ .anticon-double-left {
+ transform: rotate(0deg);
+ }
+ }
+ }
+
+ .mk-container {
+ width: calc(100% - 180px);
+ height: 100%;
+ }
+ .x6-widget-stencil {
+ background-color: #fff;
+ }
+ .x6-widget-stencil-title {
+ background-color: #fff;
+ }
+ .x6-widget-stencil-group-title {
+ background-color: #f5f5f5!important;
+ }
+ .x6-widget-transform {
+ margin: -1px 0 0 -1px;
+ padding: 0px;
+ border: 1px solid #239edd;
+ }
+ .x6-widget-transform > div {
+ border: 1px solid #239edd;
+ }
+ .x6-widget-transform > div:hover {
+ background-color: #3dafe4;
+ }
+ .x6-widget-transform-active-handle {
+ background-color: #3dafe4;
+ }
+ .x6-widget-transform-resize {
+ border-radius: 0;
+ }
+ .x6-widget-selection-inner {
+ border: 1px solid #239edd;
+ }
+ .x6-widget-selection-box {
+ opacity: 0;
+ }
+ }
+
+ .chart-header {
+ position: relative;
+ height: 45px;
+ border-bottom: 1px solid #e8e8e8;
+ overflow: hidden;
+ padding-right: 35px;
+
+ .chart-title {
+ text-decoration: inherit;
+ font-weight: inherit;
+ font-style: inherit;
+ float: left;
+ line-height: 45px;
+ margin-left: 10px;
+ position: relative;
+ z-index: 1;
+ }
+ }
+}
diff --git a/src/menu/components/chart/antv-X6/nodeupdate/index.jsx b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
similarity index 64%
rename from src/menu/components/chart/antv-X6/nodeupdate/index.jsx
rename to src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
index 5dcfb27..16e067f 100644
--- a/src/menu/components/chart/antv-X6/nodeupdate/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.jsx
@@ -52,20 +52,16 @@
}
if (node.shape === 'edge') {
- // let fontSize = 14
- // if (node.attrs && node.attrs.text) {
- // fontSize = node.attrs.text.fontSize || 14
- // }
let stroke = ''
if (node.attrs && node.attrs.line) {
- stroke = node.attrs.line.stroke || '#A2B1C3'
+ stroke = node.attrs.line.stroke || '#000000'
}
let strokeWidth = ''
if (node.attrs && node.attrs.line) {
- strokeWidth = node.attrs.line.strokeWidth || 2
+ strokeWidth = node.attrs.line.strokeWidth || 1
}
let lineType = 'solid'
@@ -110,19 +106,132 @@
{value: 'solid', text: '瀹炵嚎'},
{value: 'dash', text: '铏氱嚎'}
]
+ }
+ ]
+ } else if (node.shape === 'lane') {
+ let fontFill = '#262626'
+ if (node.attrs && node.attrs.text) {
+ fontFill = node.attrs.text.fill || '#262626'
+ }
+
+ let fill = ''
+ if (node.attrs && node.attrs['name-rect']) {
+ fill = node.attrs['name-rect'].fill || ''
+ }
+
+ let width = 100
+ if (node.size) {
+ width = node.size.width || 100
+ }
+ let height = 100
+ if (node.size) {
+ height = node.size.height || 100
+ }
+
+ let fontSize = 12
+ if (node.attrs && node.attrs.text) {
+ fontSize = node.attrs.text.fontSize || 12
+ }
+
+ let stroke = ''
+ if (node.attrs && node.attrs.body) {
+ stroke = node.attrs.body.stroke || ''
+ }
+ return [
+ {
+ type: 'title',
+ label: '鏍囬'
},
- // {
- // type: 'number',
- // field: 'fontSize',
- // label: '瀛楀彿',
- // initval: fontSize
- // },
- // {
- // type: 'color',
- // field: 'fontFill',
- // label: '棰滆壊',
- // initval: fontFill
- // }
+ {
+ type: 'text',
+ field: 'title',
+ label: '鏍囩',
+ initval: title
+ },
+ {
+ type: 'title',
+ label: '鏍峰紡'
+ },
+ {
+ type: 'color',
+ field: 'stroke',
+ label: '杈规',
+ initval: stroke
+ },
+ {
+ type: 'number',
+ field: 'width',
+ label: '瀹藉害',
+ help: '瀹藉害涓嶅彲灏忎簬100',
+ initval: width
+ },
+ {
+ type: 'number',
+ field: 'height',
+ label: '楂樺害',
+ help: '楂樺害涓嶅彲灏忎簬100',
+ initval: height
+ },
+ {
+ type: 'title',
+ label: '鏍囬鏍峰紡'
+ },
+ {
+ type: 'color',
+ field: 'fill',
+ label: '鑳屾櫙',
+ initval: fill
+ },
+ {
+ type: 'number',
+ field: 'fontSize',
+ label: '瀛楀彿',
+ initval: fontSize
+ },
+ {
+ type: 'color',
+ field: 'fontFill',
+ label: '棰滆壊',
+ initval: fontFill
+ }
+ ]
+ } else if (node.shape === 'mk-text') {
+ let fontFill = '#262626'
+ if (node.attrs && node.attrs.text) {
+ fontFill = node.attrs.text.fill || '#262626'
+ }
+
+ let fontSize = 12
+ if (node.attrs && node.attrs.text) {
+ fontSize = node.attrs.text.fontSize || 12
+ }
+ return [
+ {
+ type: 'title',
+ label: '鍐呭'
+ },
+ {
+ type: 'text',
+ field: 'title',
+ label: '鏍囩',
+ initval: title
+ },
+ {
+ type: 'title',
+ label: '鏂囨湰鏍峰紡'
+ },
+ {
+ type: 'number',
+ field: 'fontSize',
+ label: '瀛楀彿',
+ initval: fontSize
+ },
+ {
+ type: 'color',
+ field: 'fontFill',
+ label: '棰滆壊',
+ initval: fontFill
+ }
]
} else {
let fontFill = '#262626'
@@ -186,7 +295,17 @@
field: 'fontFill',
label: '棰滆壊',
initval: fontFill
- }
+ },
+ {
+ type: 'title',
+ label: '鑷畾涔変俊鎭�'
+ },
+ {
+ type: 'text',
+ field: 'mksign',
+ label: '鏍囪',
+ initval: node.mksign || ''
+ },
]
}
}
@@ -194,6 +313,12 @@
change = (value, key) => {
if (key === 'fontSize') {
if (typeof(value) !== 'number' || value < 0) {
+ return
+ }
+ } else if (key === 'width' || key === 'height') {
+ if (typeof(value) !== 'number') {
+ return
+ } else if (value < 100) {
return
}
}
@@ -225,7 +350,7 @@
} else if (item.type === 'number') {
fields.push(
<Col span={24} key={index}>
- <Form.Item label={item.label}>
+ <Form.Item label={item.label} help={item.help || null}>
<InputNumber defaultValue={item.initval} precision={0} min={0} onChange={(value) => this.change(value, item.field)} />
</Form.Item>
</Col>
@@ -278,9 +403,11 @@
render() {
return (
- <Form className="node-edit-form">
- <Row>{this.getFields()}</Row>
- </Form>
+ <div className="node-edit-form-wrap">
+ <Form className="node-edit-form">
+ <Row>{this.getFields()}</Row>
+ </Form>
+ </div>
)
}
}
diff --git a/src/menu/components/chart/antv-X6/nodeupdate/index.scss b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss
similarity index 64%
rename from src/menu/components/chart/antv-X6/nodeupdate/index.scss
rename to src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss
index 4434358..79e5b28 100644
--- a/src/menu/components/chart/antv-X6/nodeupdate/index.scss
+++ b/src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss
@@ -1,5 +1,6 @@
.node-edit-form {
padding-top: 10px;
+ overflow: hidden;
.split-line {
display: block;
border-bottom: 1px solid #d9d9d9;
@@ -28,6 +29,12 @@
.ant-form-item-control {
line-height: 24px;
}
+ .ant-form-explain {
+ font-size: 12px;
+ min-height: 18px;
+ color: #c8c8c8;
+ margin-top: 1px;
+ }
.ant-input {
height: 24px;
padding: 0px 4px;
@@ -49,11 +56,11 @@
}
.color-sketch-block {
- height: 22px;
+ height: 20px;
margin-top: 2px;
.color-sketch-block-box {
- width: 22px;
- height: 22px;
+ width: 20px;
+ height: 20px;
}
.color-sketch-value {
display: none;
@@ -64,4 +71,22 @@
}
}
}
+}
+.node-edit-form-wrap {
+ height: calc(100% - 32px);
+ overflow-y: auto;
+}
+.node-edit-form-wrap::-webkit-scrollbar {
+ width: 5px;
+}
+.node-edit-form-wrap::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0.07);
+}
+.node-edit-form-wrap::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ border: 1px solid rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0);
}
\ No newline at end of file
diff --git a/src/tabviews/custom/index.jsx b/src/tabviews/custom/index.jsx
index 581fc64..8584e63 100644
--- a/src/tabviews/custom/index.jsx
+++ b/src/tabviews/custom/index.jsx
@@ -40,6 +40,7 @@
const CustomChart = asyncComponent(() => import('./components/chart/custom-chart'))
const TimeLine = asyncComponent(() => import('./components/timeline/normal-timeline'))
const AntvG6 = asyncComponent(() => import('./components/chart/antv-G6'))
+const AntvX6 = asyncComponent(() => import('./components/chart/antv-X6'))
const Voucher = asyncComponent(() => import('./components/module/voucher'))
const Account = asyncComponent(() => import('./components/module/account'))
const Iframe = asyncComponent(() => import('./components/iframe'))
@@ -1430,6 +1431,12 @@
<AntvG6 config={item} data={data} mainSearch={mainSearch}/>
</Col>
)
+ } else if (item.type === 'antvX6') {
+ return (
+ <Col span={item.width} style={style} key={item.uuid}>
+ <AntvX6 config={item} mainSearch={mainSearch}/>
+ </Col>
+ )
} else if (item.type === 'module' && item.subtype === 'voucher') {
return (
<Col span={item.width} style={style} key={item.uuid}>
diff --git a/src/views/login/index.jsx b/src/views/login/index.jsx
index 2144a36..9cce0f9 100644
--- a/src/views/login/index.jsx
+++ b/src/views/login/index.jsx
@@ -556,6 +556,8 @@
_param.secretkey = Utils.encrypt(_param.LText, _param.timestamp)
Api.getSystemConfig(_param).then(res => {
+ if (!res) return
+
if (res.status) {
// positecgroup
// res.Banner = res.Banner ? res.Banner.replace(/:8080/ig, '').replace(/http:/ig, 'https:') : ''
--
Gitblit v1.8.0