2023-06-27

king

2023-06-27 99f4651779d6e8d8024d8e60eae16f4de7fa931a

2023-06-27

 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, DownloadOutlined } from '@ant-design/icons'
import { Popover } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'

import MKEmitter from '@/utils/events.js'
@@ -17,70 +17,6 @@
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

// #region 初始化图形
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',
@@ -145,15 +81,6 @@
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
@@ -175,15 +102,6 @@
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
@@ -205,15 +123,6 @@
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
@@ -235,15 +144,6 @@
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
@@ -267,15 +167,6 @@
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
@@ -423,7 +314,6 @@
        max: 2
      },
      autoResize: true,
      panning: true,
      background: {
        color: card.plot.backgroundColor || 'transparent'
      },
@@ -501,7 +391,6 @@
        max: 2
      },
      autoResize: true,
      panning: true,
      background: { color: '#ffffff' },
      mousewheel: {
        enabled: true,
@@ -646,33 +535,6 @@
          <ToolOutlined/>
        </Popover>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="mk-toolbar">
          <div className="left-tool">
            {card.plot.subtype === 'xflow' ? <Tooltip title="置前">
              <VerticalAlignTopOutlined/>
            </Tooltip> : null}
            {card.plot.subtype === 'xflow' ? <Tooltip title="置后">
              <VerticalAlignBottomOutlined/>
            </Tooltip> : null}
            <Tooltip title="保存">
              <SaveOutlined/>
            </Tooltip>
            {card.plot.export === 'png' ? <Tooltip title="导出图片">
              <DownloadOutlined/>
            </Tooltip> : null}
          </div>
          <div className="right-tool">
            <Tooltip title="放大">
              <ZoomInOutlined/>
            </Tooltip>
            <Tooltip title="缩小">
              <ZoomOutOutlined/>
            </Tooltip>
            <Tooltip title="1:1">
              <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 + 'container'} className="mk-container"></div>
        </div>

 src/menu/components/chart/antv-X6/index.scss

@@ -5,31 +5,7 @@
  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;
  }
@@ -45,7 +21,6 @@
    letter-spacing: 0px;

    .mk-container {
      // width: calc(100% - 180px);
      height: 100%;
    }
  }

 src/tabviews/custom/components/chart/antv-X6/index.jsx

@@ -2,7 +2,7 @@
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 { 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'
@@ -340,8 +340,6 @@

  state = {
    config: null,
    toolunfold: true,
    nodeunfold: true,
    editing: false,
    node: null,
    arr_field: 'id,cells',
@@ -1299,7 +1297,7 @@
  }

  render() {
    const { loading, config, empty, toolunfold, nodeunfold, node } = this.state
    const { loading, config, empty, node } = this.state

    return (
      <div className="custom-x6-plot-box" id={'anchor' + config.uuid} style={config.style}>
@@ -1339,16 +1337,9 @@
          </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 + 'stencil'} className="mk-stencil"></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="mk-node-edit">
            <div className="header">设置</div>
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} onChange={this.changeProps}/>}
          </div>

 src/tabviews/custom/components/chart/antv-X6/index.scss

@@ -81,20 +81,6 @@
        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 {
@@ -110,19 +96,6 @@
          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);
        }
      }
    }
@@ -152,37 +125,6 @@
        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);
        }
      }
    }