From 0667b630fbaf29ee12d5d332fb6da5c32231cd0f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 06 六月 2023 17:59:38 +0800
Subject: [PATCH] 2023-06-06
---
src/views/tabledesign/index.jsx | 9 +
src/menu/components/chart/antv-G6/index.jsx | 2
src/menu/components/chart/antv-G6/index.scss | 4
src/menu/menushell/card.jsx | 14 +-
src/views/pcdesign/index.jsx | 8 +
src/views/mobdesign/index.jsx | 9 +
src/menu/components/chart/antv-X6/index.scss | 96 +++++++++++++++
src/views/menudesign/index.jsx | 9 +
src/menu/components/chart/antv-X6/index.jsx | 169 +++++++++++++++++++--------
9 files changed, 257 insertions(+), 63 deletions(-)
diff --git a/src/menu/components/chart/antv-G6/index.jsx b/src/menu/components/chart/antv-G6/index.jsx
index 15eb93f..652fbe6 100644
--- a/src/menu/components/chart/antv-G6/index.jsx
+++ b/src/menu/components/chart/antv-G6/index.jsx
@@ -1404,7 +1404,7 @@
let _style = resetStyle(card.style)
return (
- <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
+ <div className="menu-g6-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
<div className="mk-popover-control">
<ChartCompileForm config={card} plotchange={this.updateComponent}/>
diff --git a/src/menu/components/chart/antv-G6/index.scss b/src/menu/components/chart/antv-G6/index.scss
index d395eaf..8a386a9 100644
--- a/src/menu/components/chart/antv-G6/index.scss
+++ b/src/menu/components/chart/antv-G6/index.scss
@@ -1,4 +1,4 @@
-.menu-scatter-chart-edit-box {
+.menu-g6-chart-edit-box {
position: relative;
box-sizing: border-box;
background: #ffffff;
@@ -43,7 +43,7 @@
background: rgba(255, 255, 255, 0.55);
}
}
-.menu-scatter-chart-edit-box:hover {
+.menu-g6-chart-edit-box:hover {
z-index: 1;
box-shadow: 0px 0px 4px #1890ff;
}
diff --git a/src/menu/components/chart/antv-X6/index.jsx b/src/menu/components/chart/antv-X6/index.jsx
index 2cf20cf..c6c84cd 100644
--- a/src/menu/components/chart/antv-X6/index.jsx
+++ b/src/menu/components/chart/antv-X6/index.jsx
@@ -1,8 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Popover, Tooltip } from 'antd'
-import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined } from '@ant-design/icons'
+import { Popover, Tooltip, message } from 'antd'
+import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
@@ -248,8 +248,14 @@
state = {
card: null,
- eventListener: null
+ eventListener: null,
+ toolunfold: true,
+ nodeunfold: true,
+ node: null
}
+
+ selectNode = null
+ mkGraph = null
UNSAFE_componentWillMount () {
const { card } = this.props
@@ -348,14 +354,14 @@
autoResize: true,
panning: true,
background: {
- color: '#ffffff',
+ color: '#ffffff'
},
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
modifiers: 'ctrl',
minScale: 0.5,
- maxScale: 5,
+ maxScale: 2
},
connecting: {
router: 'manhattan',
@@ -380,16 +386,16 @@
targetMarker: {
name: 'block',
width: 12,
- height: 8,
- },
- },
+ height: 8
+ }
+ }
},
- zIndex: 0,
+ zIndex: 0
})
},
validateConnection({ targetMagnet }) {
return !!targetMagnet
- },
+ }
},
highlighting: {
magnetAdsorbed: {
@@ -397,21 +403,19 @@
args: {
attrs: {
fill: '#5F95FF',
- stroke: '#5F95FF',
- },
- },
- },
- },
+ stroke: '#5F95FF'
+ }
+ }
+ }
+ }
})
// #region 浣跨敤鎻掍欢
graph
- .use(
- new Transform({
- resizing: true,
- rotating: true
- })
- )
+ .use(new Transform({
+ resizing: true,
+ rotating: true
+ }))
.use(new Selection())
.use(new Snapline())
.use(new Keyboard())
@@ -502,18 +506,18 @@
})
// zoom
- graph.bindKey(['ctrl+1', 'meta+1'], () => {
- const zoom = graph.zoom()
- if (zoom < 1.5) {
- graph.zoom(0.1)
- }
- })
- graph.bindKey(['ctrl+2', 'meta+2'], () => {
- const zoom = graph.zoom()
- if (zoom > 0.5) {
- graph.zoom(-0.1)
- }
- })
+ // graph.bindKey(['ctrl+1', 'meta+1'], () => {
+ // const zoom = graph.zoom()
+ // if (zoom < 1.5) {
+ // graph.zoom(0.1)
+ // }
+ // })
+ // graph.bindKey(['ctrl+2', 'meta+2'], () => {
+ // const zoom = graph.zoom()
+ // if (zoom > 0.5) {
+ // graph.zoom(-0.1)
+ // }
+ // })
// 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
const showPorts = (ports, show) => {
@@ -533,18 +537,29 @@
})
// graph.on('cell:click', ({ e, x, y, cell, view }) => {
-
+ // cell.attr('body/stroke', "red")
// })
graph.on('node:click', ({ e, x, y, node, view }) => {
-
+ this.selectNode = node
+
+ this.setState({node: this.selectNode.store.data})
})
graph.on('edge:click', ({ e, x, y, edge, view }) => {
-
+ this.selectNode = edge
+
+ this.setState({node: this.selectNode.store.data})
+
+ let trans = document.querySelectorAll('.x6-widget-transform')
+ if (trans && trans[0]) {
+ trans[0].style.display = 'none'
+ }
})
graph.on('blank:click', ({ e, x, y }) => {
-
+ this.selectNode = null
+
+ this.setState({node: null})
})
-
+
const r1 = graph.createNode({
shape: 'mk-rect',
label: '寮�濮�',
@@ -591,9 +606,9 @@
shape: 'mk-circle',
label: '杩炴帴'
})
-
+
stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
-
+
const p1 = graph.createNode({
shape: 'mk-ellipse',
label: 'ellipse'
@@ -602,8 +617,51 @@
shape: 'mk-star',
label: ''
})
-
+
stencil.load([p1, p2], 'group2')
+
+ 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()
+ }
+
+ setZoomIn = () => {
+ const zoom = this.mkGraph.zoom()
+
+ if (zoom < 2) {
+ this.mkGraph.zoom(0.1)
+ }
+ }
+
+ setZoomOut = () => {
+ const zoom = this.mkGraph.zoom()
+
+ if (zoom > 0.5) {
+ this.mkGraph.zoom(-0.1)
+ }
+ }
+
+ setZoomInt = () => {
+ this.mkGraph.zoomTo(1)
+ }
+
+ save = () => {
+ // let nodes = this.mkGraph.toJSON()
}
updateComponent = (card) => {
@@ -649,11 +707,11 @@
}
render() {
- const { card } = this.state
+ const { card, toolunfold, nodeunfold, node } = this.state
let _style = resetStyle(card.style)
return (
- <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
+ <div className="menu-x6-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
<div className="mk-popover-control">
<ChartCompileForm config={card} plotchange={this.updateComponent}/>
@@ -669,30 +727,41 @@
<div className="mk-toolbar">
<div className="left-tool">
<Tooltip title="缃墠">
- <VerticalAlignTopOutlined />
+ <VerticalAlignTopOutlined onClick={this.setTop}/>
</Tooltip>
<Tooltip title="缃悗">
- <VerticalAlignBottomOutlined />
+ <VerticalAlignBottomOutlined onClick={this.setBottom}/>
</Tooltip>
<Tooltip title="淇濆瓨">
- <SaveOutlined />
+ <SaveOutlined onClick={this.save}/>
</Tooltip>
</div>
<div className="right-tool">
<Tooltip title="鏀惧ぇ">
- <ZoomInOutlined />
+ <ZoomInOutlined onClick={this.setZoomIn}/>
</Tooltip>
<Tooltip title="缂╁皬">
- <ZoomOutOutlined />
+ <ZoomOutOutlined onClick={this.setZoomOut}/>
</Tooltip>
<Tooltip title="1:1">
- <OneToOneOutlined />
+ <OneToOneOutlined onClick={this.setZoomInt}/>
</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"></div>
+ <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> : <div></div>}
+ </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 cb1ca2f..81fff7a 100644
--- a/src/menu/components/chart/antv-X6/index.scss
+++ b/src/menu/components/chart/antv-X6/index.scss
@@ -1,4 +1,4 @@
-.menu-scatter-chart-edit-box {
+.menu-x6-chart-edit-box {
position: relative;
box-sizing: border-box;
background: #ffffff;
@@ -33,6 +33,9 @@
.x6-graph-scroller::-webkit-scrollbar {
display: none;
}
+ .x6-cell.x6-edge.x6-edge-selected path:last-child {
+ stroke: #1890ff;
+ }
.canvas {
margin: 0px;
@@ -46,6 +49,7 @@
position: relative;
z-index: 2;
border-right: 1px solid #dfe3e8;
+ transition: all 0.2s;
.x6-widget-stencil-title {
display: none;
@@ -67,7 +71,93 @@
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;
+ 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%;
@@ -79,7 +169,7 @@
background-color: #fff;
}
.x6-widget-stencil-group-title {
- background-color: #fff !important;
+ background-color: #f5f5f5!important;
}
.x6-widget-transform {
margin: -1px 0 0 -1px;
@@ -137,7 +227,7 @@
background: rgba(255, 255, 255, 0.55);
}
}
-.menu-scatter-chart-edit-box:hover {
+.menu-x6-chart-edit-box:hover {
z-index: 1;
box-shadow: 0px 0px 4px #1890ff;
}
diff --git a/src/menu/menushell/card.jsx b/src/menu/menushell/card.jsx
index 1719f71..5cdd3e2 100644
--- a/src/menu/menushell/card.jsx
+++ b/src/menu/menushell/card.jsx
@@ -133,13 +133,13 @@
}
}
- // 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>
- // )
- // }
+ 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}>
diff --git a/src/views/menudesign/index.jsx b/src/views/menudesign/index.jsx
index ee08265..9c6ac42 100644
--- a/src/views/menudesign/index.jsx
+++ b/src/views/menudesign/index.jsx
@@ -73,6 +73,13 @@
}
UNSAFE_componentWillMount() {
+ if (!sessionStorage.getItem('UserID')) {
+ sessionStorage.removeItem('isEditState')
+ sessionStorage.removeItem('appType')
+ this.props.history.replace('/login')
+ return
+ }
+
sessionStorage.setItem('editMenuType', 'menu') // 缂栬緫鑿滃崟绫诲瀷
window.GLOB.UserComponentMap = new Map() // 缂撳瓨鐢ㄦ埛鑷畾涔夌粍浠�
@@ -106,6 +113,8 @@
}
componentDidMount () {
+ if (!sessionStorage.getItem('UserID')) return
+
MKEmitter.addListener('changePopview', this.initPopview)
MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent)
diff --git a/src/views/mobdesign/index.jsx b/src/views/mobdesign/index.jsx
index e77f6ba..a79b390 100644
--- a/src/views/mobdesign/index.jsx
+++ b/src/views/mobdesign/index.jsx
@@ -81,6 +81,14 @@
}
UNSAFE_componentWillMount() {
+ if (!sessionStorage.getItem('UserID')) {
+ sessionStorage.removeItem('isEditState')
+ sessionStorage.removeItem('editMenuType')
+ sessionStorage.removeItem('appType')
+ this.props.history.replace('/login')
+ return
+ }
+
if (memberLevel < 30) return
try {
let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
@@ -139,6 +147,7 @@
}
componentDidMount () {
+ if (!sessionStorage.getItem('UserID')) return
if (memberLevel < 30) {
document.getElementById('mk-mob-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">鏈簲鐢ㄦ病鏈塒C绔〉闈㈢殑缂栬緫鏉冮檺锛岃鑱旂郴绠＄悊鍛橈紒</div>'
return
diff --git a/src/views/pcdesign/index.jsx b/src/views/pcdesign/index.jsx
index b35a51b..fd6fec5 100644
--- a/src/views/pcdesign/index.jsx
+++ b/src/views/pcdesign/index.jsx
@@ -76,6 +76,13 @@
}
UNSAFE_componentWillMount() {
+ if (!sessionStorage.getItem('UserID')) {
+ sessionStorage.removeItem('isEditState')
+ sessionStorage.removeItem('appType')
+ this.props.history.replace('/login')
+ return
+ }
+
if (memberLevel < 30) return
sessionStorage.setItem('editMenuType', 'menu') // 缂栬緫鑿滃崟绫诲瀷
@@ -123,6 +130,7 @@
}
componentDidMount () {
+ if (!sessionStorage.getItem('UserID')) return
if (memberLevel < 30) {
document.getElementById('mk-pc-design-view').innerHTML = '<div style="text-align: center; font-size: 30px; margin-top: 40vh; height: 100vh; background: #fff;">鏈簲鐢ㄦ病鏈塒C绔〉闈㈢殑缂栬緫鏉冮檺锛岃鑱旂郴绠＄悊鍛橈紒</div>'
return
diff --git a/src/views/tabledesign/index.jsx b/src/views/tabledesign/index.jsx
index 4b40f09..d99589e 100644
--- a/src/views/tabledesign/index.jsx
+++ b/src/views/tabledesign/index.jsx
@@ -63,6 +63,13 @@
}
UNSAFE_componentWillMount() {
+ if (!sessionStorage.getItem('UserID')) {
+ sessionStorage.removeItem('isEditState')
+ sessionStorage.removeItem('appType')
+ this.props.history.replace('/login')
+ return
+ }
+
sessionStorage.setItem('editMenuType', 'menu') // 缂栬緫鑿滃崟绫诲瀷
window.GLOB.UserComponentMap = new Map() // 缂撳瓨鐢ㄦ埛鑷畾涔夌粍浠�
@@ -95,6 +102,8 @@
}
componentDidMount () {
+ if (!sessionStorage.getItem('UserID')) return
+
MKEmitter.addListener('changePopview', this.initPopview)
MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave)
setTimeout(() => {
--
Gitblit v1.8.0