2023-06-13

king

2023-06-13 cfca95777a420e33777c536d2d9c5ed245beb377

2023-06-13

 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: '菜单组'}
      ],

 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)

 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;
  }


 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}>

 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;

 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}>

 src/menu/menushell/index.jsx

@@ -118,6 +118,7 @@
        balcony: '浮动卡',
        timeline: '时间轴',
        antvG6: '树图',
        antvX6: '流程图',
        iframe: 'iframe',
        module: '模块',
        card: '卡片'

 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)
        }