| | |
| | | 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' |
| | |
| | | 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', |
| | |
| | | fontSize: 12, |
| | | fill: '#262626' |
| | | } |
| | | }, |
| | | ports: { |
| | | groups, |
| | | items: [ |
| | | { group: 'top' }, |
| | | { group: 'right' }, |
| | | { group: 'bottom' }, |
| | | { group: 'left' } |
| | | ] |
| | | } |
| | | }, |
| | | true |
| | |
| | | fontSize: 12, |
| | | fill: '#262626' |
| | | } |
| | | }, |
| | | ports: { |
| | | groups, |
| | | items: [ |
| | | { group: 'top' }, |
| | | { group: 'right' }, |
| | | { group: 'bottom' }, |
| | | { group: 'left' } |
| | | ] |
| | | } |
| | | }, |
| | | true |
| | |
| | | fontSize: 12, |
| | | fill: '#262626' |
| | | } |
| | | }, |
| | | ports: { |
| | | groups, |
| | | items: [ |
| | | { group: 'top' }, |
| | | { group: 'right' }, |
| | | { group: 'bottom' }, |
| | | { group: 'left' } |
| | | ] |
| | | } |
| | | }, |
| | | true |
| | |
| | | fontSize: 12, |
| | | fill: '#262626' |
| | | } |
| | | }, |
| | | ports: { |
| | | groups, |
| | | items: [ |
| | | { group: 'top' }, |
| | | { group: 'right' }, |
| | | { group: 'bottom' }, |
| | | { group: 'left' } |
| | | ] |
| | | } |
| | | }, |
| | | true |
| | |
| | | fontSize: 12, |
| | | fill: '#262626' |
| | | } |
| | | }, |
| | | ports: { |
| | | groups, |
| | | items: [ |
| | | { group: 'top' }, |
| | | { group: 'right' }, |
| | | { group: 'bottom' }, |
| | | { group: 'left' } |
| | | ] |
| | | } |
| | | }, |
| | | true |
| | |
| | | max: 2 |
| | | }, |
| | | autoResize: true, |
| | | panning: true, |
| | | background: { |
| | | color: card.plot.backgroundColor || 'transparent' |
| | | }, |
| | |
| | | max: 2 |
| | | }, |
| | | autoResize: true, |
| | | panning: true, |
| | | background: { color: '#ffffff' }, |
| | | mousewheel: { |
| | | enabled: true, |
| | |
| | | <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> |