From cfca95777a420e33777c536d2d9c5ed245beb377 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 13 六月 2023 16:20:08 +0800
Subject: [PATCH] 2023-06-13
---
src/menu/components/chart/antv-X6/nodeupdate/index.scss | 3
src/tabviews/custom/components/code/sand-box/index.jsx | 19 +--
src/menu/components/chart/antv-X6/nodeupdate/index.jsx | 135 ++++++++++++++++++---------
src/menu/menushell/card.jsx | 14 +-
src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx | 2
src/menu/menushell/index.jsx | 1
src/menu/components/chart/antv-X6/index.scss | 2
src/menu/components/chart/antv-X6/index.jsx | 114 +++++++++-------------
8 files changed, 159 insertions(+), 131 deletions(-)
diff --git a/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx
index 1f0a073..39827f8 100644
--- a/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx
+++ b/src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx
@@ -106,7 +106,7 @@
tooltip: '鐐瑰嚮鑺傜偣鏃惰Е鍙戠殑浜嬩欢銆�',
required: false,
options: [
- {value: '', label: '鏁版嵁鍒囨崲'},
+ {value: '', label: '鏃�'},
{value: 'menu', label: '鑿滃崟'},
{value: 'menus', label: '鑿滃崟缁�'}
],
diff --git a/src/menu/components/chart/antv-X6/index.jsx b/src/menu/components/chart/antv-X6/index.jsx
index 5ace0da..6d20b17 100644
--- a/src/menu/components/chart/antv-X6/index.jsx
+++ b/src/menu/components/chart/antv-X6/index.jsx
@@ -336,21 +336,24 @@
// #region 鍒濆鍖栫敾甯�
const graph = new Graph({
container: document.getElementById(card.uuid + 'container'),
- // grid: true,
- grid: {
- visible: true,
- type: 'doubleMesh',
- args: [
- {
- color: '#eee', // 涓荤綉鏍肩嚎棰滆壊
- thickness: 1 // 涓荤綉鏍肩嚎瀹藉害
- },
- {
- color: '#ddd', // 娆＄綉鏍肩嚎棰滆壊
- thickness: 1, // 娆＄綉鏍肩嚎瀹藉害
- factor: 4 // 涓绘缃戞牸绾块棿闅�
- }
- ]
+ // grid: {
+ // visible: true,
+ // type: 'doubleMesh',
+ // args: [
+ // {
+ // color: '#eee', // 涓荤綉鏍肩嚎棰滆壊
+ // thickness: 1 // 涓荤綉鏍肩嚎瀹藉害
+ // },
+ // {
+ // color: '#ddd', // 娆＄綉鏍肩嚎棰滆壊
+ // thickness: 1, // 娆＄綉鏍肩嚎瀹藉害
+ // factor: 4 // 涓绘缃戞牸绾块棿闅�
+ // }
+ // ]
+ // },
+ scaling: {
+ min: 0.5,
+ max: 2
},
autoResize: true,
panning: true,
@@ -360,9 +363,7 @@
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
- modifiers: 'ctrl',
- minScale: 0.5,
- maxScale: 2
+ modifiers: 'ctrl'
},
connecting: {
router: 'manhattan',
@@ -469,9 +470,7 @@
})
graph.bindKey(['meta+v', 'ctrl+v'], () => {
if (!graph.isClipboardEmpty()) {
- const cells = graph.paste({ offset: 32 })
- graph.cleanSelection()
- graph.select(cells)
+ graph.paste({ offset: 32 })
}
return false
})
@@ -490,35 +489,15 @@
return false
})
- // select all
- graph.bindKey(['meta+a', 'ctrl+a'], () => {
- const nodes = graph.getNodes()
- if (nodes) {
- graph.select(nodes)
- }
- })
-
- // delete
- graph.bindKey('backspace', () => {
+ // 鍒犻櫎鍏冪礌
+ graph.bindKey(['backspace', 'delete'], () => {
const cells = graph.getSelectedCells()
if (cells.length) {
graph.removeCells(cells)
+ this.selectNode = null
+ this.setState({node: null})
}
})
-
- // 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)
- // }
- // })
// 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
const showPorts = (ports, show) => {
@@ -537,23 +516,17 @@
showPorts(ports, false)
})
- // 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})
+ this.setState({node: node.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'
- }
+ this.setState({node: edge.store.data})
+
+ graph.clearTransformWidgets()
})
graph.on('blank:click', ({ e, x, y }) => {
this.selectNode = null
@@ -641,20 +614,13 @@
this.selectNode.toBack()
}
+ // zoom() 鍙幏鍙栨垨鑰呰缃缉鏀炬瘮渚�
setZoomIn = () => {
- const zoom = this.mkGraph.zoom()
-
- if (zoom < 2) {
- this.mkGraph.zoom(0.1)
- }
+ this.mkGraph.zoom(0.1)
}
setZoomOut = () => {
- const zoom = this.mkGraph.zoom()
-
- if (zoom > 0.5) {
- this.mkGraph.zoom(-0.1)
- }
+ this.mkGraph.zoom(-0.1)
}
setZoomInt = () => {
@@ -669,7 +635,23 @@
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)
diff --git a/src/menu/components/chart/antv-X6/index.scss b/src/menu/components/chart/antv-X6/index.scss
index 81fff7a..bb28fcb 100644
--- a/src/menu/components/chart/antv-X6/index.scss
+++ b/src/menu/components/chart/antv-X6/index.scss
@@ -33,7 +33,7 @@
.x6-graph-scroller::-webkit-scrollbar {
display: none;
}
- .x6-cell.x6-edge.x6-edge-selected path:last-child {
+ .x6-cell.x6-edge.x6-edge-selected path:nth-child(2) {
stroke: #1890ff;
}
diff --git a/src/menu/components/chart/antv-X6/nodeupdate/index.jsx b/src/menu/components/chart/antv-X6/nodeupdate/index.jsx
index 5371bcb..5dcfb27 100644
--- a/src/menu/components/chart/antv-X6/nodeupdate/index.jsx
+++ b/src/menu/components/chart/antv-X6/nodeupdate/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Form, Row, Col, Input, Select, InputNumber } from 'antd'
+import { Form, Row, Col, Input, Select, Radio, InputNumber } from 'antd'
import ColorSketch from '@/mob/colorsketch'
@@ -51,29 +51,34 @@
title = node.attrs.text.text || ''
}
- let fontSize = ''
- if (node.attrs && node.attrs.text) {
- fontSize = node.attrs.text.fontSize || 12
- }
-
- let fontFill = ''
- if (node.attrs && node.attrs.text) {
- fontFill = node.attrs.text.fill || '#262626'
- }
-
- let stroke = ''
-
- if (node.attrs && node.attrs.body) {
- stroke = node.attrs.body.stroke || ''
- }
- let fill = ''
-
- if (node.attrs && node.attrs.body) {
- fill = node.attrs.body.fill || ''
- }
-
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'
+ }
+
+ let strokeWidth = ''
+
+ if (node.attrs && node.attrs.line) {
+ strokeWidth = node.attrs.line.strokeWidth || 2
+ }
+
+ let lineType = 'solid'
+
+ if (node.attrs && node.attrs.line && node.attrs.line.strokeDasharray) {
+ lineType = 'dash'
+ }
+
return [
+ {
+ type: 'title',
+ label: '鍐呭'
+ },
{
type: 'text',
field: 'title',
@@ -81,31 +86,64 @@
initval: title
},
{
- type: 'color',
- field: 'fill',
- label: '鑳屾櫙',
- initval: fill
+ type: 'title',
+ label: '鏍峰紡'
},
{
type: 'color',
field: 'stroke',
- label: '杈规',
+ label: '棰滆壊',
initval: stroke
},
{
type: 'number',
- field: 'fontSize',
- label: '瀛楀彿',
- initval: fontSize
+ field: 'strokeWidth',
+ label: '绾垮',
+ initval: strokeWidth
},
{
- type: 'color',
- field: 'fontFill',
- label: '棰滆壊',
- initval: fontFill
- }
+ type: 'radio',
+ field: 'lineType',
+ label: '绾垮瀷',
+ initval: lineType,
+ options: [
+ {value: 'solid', text: '瀹炵嚎'},
+ {value: 'dash', text: '铏氱嚎'}
+ ]
+ },
+ // {
+ // type: 'number',
+ // field: 'fontSize',
+ // label: '瀛楀彿',
+ // initval: fontSize
+ // },
+ // {
+ // type: 'color',
+ // field: 'fontFill',
+ // label: '棰滆壊',
+ // initval: fontFill
+ // }
]
} else {
+ let fontFill = '#262626'
+ if (node.attrs && node.attrs.text) {
+ fontFill = node.attrs.text.fill || '#262626'
+ }
+
+ let fill = ''
+
+ if (node.attrs && node.attrs.body) {
+ fill = node.attrs.body.fill || ''
+ }
+ 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',
@@ -154,18 +192,10 @@
}
change = (value, key) => {
- if (key === 'title') {
-
- } else if (key === 'fill') {
-
- } else if (key === 'stroke') {
-
- } else if (key === 'fontSize') {
+ if (key === 'fontSize') {
if (typeof(value) !== 'number' || value < 0) {
return
}
- } else if (key === 'fontFill') {
-
}
this.props.onChange(value, key)
@@ -206,11 +236,12 @@
<Form.Item label={item.label}>
<Select
showSearch
+ defaultValue={item.initval}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
onChange={(value) => {this.change(value, item.field)}}
>
{item.options.map(option =>
- <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
+ <Select.Option key={option.value} value={option.value}>
{option.text}
</Select.Option>
)}
@@ -218,6 +249,20 @@
</Form.Item>
</Col>
)
+ } else if (item.type === 'radio') {
+ fields.push(
+ <Col span={24} key={index}>
+ <Form.Item label={item.label}>
+ <Radio.Group defaultValue={item.initval} style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.change(e.target.value, item.field)}}>
+ {item.options.map(option => {
+ return (
+ <Radio key={option.value} value={option.value}>{option.text}</Radio>
+ )
+ })}
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ )
} else if (item.type === 'color') {
fields.push(
<Col span={24} key={index}>
diff --git a/src/menu/components/chart/antv-X6/nodeupdate/index.scss b/src/menu/components/chart/antv-X6/nodeupdate/index.scss
index 79e059d..4434358 100644
--- a/src/menu/components/chart/antv-X6/nodeupdate/index.scss
+++ b/src/menu/components/chart/antv-X6/nodeupdate/index.scss
@@ -44,6 +44,9 @@
font-size: 13px;
}
}
+ .ant-radio-wrapper {
+ margin-right: 0px;
+ }
.color-sketch-block {
height: 22px;
diff --git a/src/menu/menushell/card.jsx b/src/menu/menushell/card.jsx
index 5cdd3e2..1719f71 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/menu/menushell/index.jsx b/src/menu/menushell/index.jsx
index 9533aa5..06b1c59 100644
--- a/src/menu/menushell/index.jsx
+++ b/src/menu/menushell/index.jsx
@@ -118,6 +118,7 @@
balcony: '娴姩鍗�',
timeline: '鏃堕棿杞�',
antvG6: '鏍戝浘',
+ antvX6: '娴佺▼鍥�',
iframe: 'iframe',
module: '妯″潡',
card: '鍗＄墖'
diff --git a/src/tabviews/custom/components/code/sand-box/index.jsx b/src/tabviews/custom/components/code/sand-box/index.jsx
index fa09f57..dc1a995 100644
--- a/src/tabviews/custom/components/code/sand-box/index.jsx
+++ b/src/tabviews/custom/components/code/sand-box/index.jsx
@@ -22,6 +22,7 @@
sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁
data: [], // 鏁版嵁
html: '',
+ result: {}
}
loaded = false
@@ -199,8 +200,12 @@
}, 10)
}
+ let _result = {...result}
+ delete _result.data
+
this.setState({
data: _data,
+ result: _result,
loading: false
})
} else {
@@ -216,7 +221,7 @@
}
renderView = () => {
- const { data } = this.state
+ const { data, result } = this.state
const { html, js, wrap, columns } = this.state.config
let _html = html
@@ -239,16 +244,8 @@
if (js) {
try {
// eslint-disable-next-line
- let evalfunc = eval('(true && function (data) {' + js + '})')
- evalfunc(data)
- // if (wrap.compileMode !== 'custom') {
- // // eslint-disable-next-line no-eval
- // eval(js)
- // } else {
- // // eslint-disable-next-line
- // let evalfunc = eval('(true && function (data) {' + js + '})')
- // evalfunc(data)
- // }
+ let evalfunc = eval('(true && function (data, result) {' + js + '})')
+ evalfunc(data, result)
} catch (e) {
console.warn(e)
}
--
Gitblit v1.8.0