@steedos/steedos-plugin-schema-builder 2.6.1-beta.6 → 2.6.2-beta.10

package/webapp/src/g6/model/model.scss

@@ -1,163 +0,0 @@
-.noselect {
-
-  -webkit-touch-callout: none; /* iOS Safari */
-  
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
-  
-  -khtml-user-select: none; /* Konqueror */
-  
-  -moz-user-select: none; /* Firefox */
-  
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  
-  user-select: none; /* Non-prefixed version, currently
-  
-  not supported by any browser */
-  
-  }
-
-.console-g6-page {
-  // background: #fff;
-  height: 100%;
-  .model-page {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .g6-tooltip {
-    padding: 10px 6px;
-    // color: black;
-    background-color: white;
-    box-shadow: 10px 10px 5px #888888;
-    // background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgb(11,108,149);
-    opacity: 1;
-    border-radius: 4px;
-    .text {
-      color: rgb(11,108,149);
-    }
-  }
-}
-
-
-
-.g6-minimap {
-  position: absolute;
-  right: 25px;
-  bottom: 40px;
-  padding: 5px;
-  overflow: visible !important;
-  // margin-top: 10px;
-  // margin-right: 10px;
-  background: #FFFFFF;
-  border: 0px solid rgba(0,0,0,0.10);
-  
-  // border-radius: 3px 0 0 3px;
-  // border-radius: 3px 0px 0px 3px;
-}
-
-.graph {
-   width: 100%;
-   cursor: grab;
-   margin-right: 20px;
-   margin-bottom: 23px;
-   flex: 1;
-  //  overflow: auto;
-   background-image: url(./editor-background.png);
-   background-repeat: repeat;
-   background-size: contain;
-  //  border: 1px solid rgba(0,0,0,.1);
-  //  border-radius: 3px;
-   border: 1px solid rgba(0, 0, 0, 0.1);
-
-  //  background-image: linear-gradient(#DEE0E4 1px, transparent 0), linear-gradient(90deg, #DEE0E4 1px, transparent 0), linear-gradient(rgba(222, 224, 228, 0.6) 1px, transparent 0), linear-gradient(90deg, rgba(222, 224, 228, 0.6) 1px, transparent 0);
-  //  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
-}
-
-.g6-minimap-viewport-erd {
-  border: 1px solid rgba(0,0,0,0.06);
-  margin-top: 2px;
-  margin-right: 2px;
-}
-
-.console-erd-toolbar {
-   z-index:1;
-   width: 100%;
-  //  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  //  border-left: 1px solid rgba(0, 0, 0, 0.1);
-   height: 28px;
-
-   .split-span {
-    margin-right: 30px;
-   }
-
-   .left {
-    float: left ;
-    margin-left: 30px;
-  }
-
-  .ant-upload-list {
-    display: none;
-  }
-
-
-  .zoomNum {
-     font-size: 17px;
-     text-align: center;
-     margin-right: 10px;
-     width: 50px;
-     color: rgba(0,0,0,0.40);
-     display: inline-block;
-
-  }
-
-  .right {
-   float: right ;
-   margin-right: 30px;
- }
-
-
-   .command-btn {
-
-      margin: 8px;
-      font-size: 18px;
-      // margin-right: 25px;
-      color: rgba(0,0,0,0.40);
-      cursor: pointer;
-   }
-   .zoomleft {
-    margin-right: 10px;
-  }
-
-  .command-btn-data {
-   }
-}
-.console-erd-fps {
-  position:absolute;
-  bottom: 50px;
-  right: 0px;
-  // bottom: 150px;
-}
-
-// .g6-tooltip {
-//   padding: 10px 6px;
-//   opacity: 0.5;
-//   color: #444;
-//   background-color: rgba(255,255,255,0.9);
-//   border: 1px solid #e2e2e2;
-//   border-radius: 4px;
-// }
-
-:-webkit-full-screen {
-  background-color: white !important;
-}
-:-moz-full-screen {
-  background-color: white !important;
-}
-
-:-ms-fullscreen {
-  background-color: white !important;
-}
-:fullscreen {
-  background-color: white !important;
-}

package/webapp/src/g6/model/toolbar.tsx

@@ -1,360 +0,0 @@
-
-import { Button, Icon, Modal, Popover, Radio, Select, Switch, Tooltip } from 'antd'
-const RadioGroup = Radio.Group
-import { FileMarkdownOutlined, FileImageOutlined,  UnlockOutlined, LockOutlined, ZoomOutOutlined, ZoomInOutlined, BorderOutlined, ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, RetweetOutlined } from '@ant-design/icons'
-import classNames from 'classnames'
-import { useDispatch, useSelector } from '../../hook'
-import React, { useCallback, useEffect, useRef, useState } from 'react' // import { exitFullscreen, launchIntoFullscreen } from './../util'
-import intl from './../util/intel'
-import Pdm from '../../pdm'
-
-
-const confirm = Modal.confirm
-const { Option } = Select
-const zoomInClick = ({ toolBarCommand, update}) =>  { toolBarCommand && toolBarCommand('max-zoom'); update(+new Date())}
-const zoomOutClick = ({toolBarCommand, update}) => { toolBarCommand && toolBarCommand('min-zoom'); update(+new Date()) }
-
-
-const IconRenders = {
-  'container' : <BorderOutlined />,
-  'arrow-up': <ArrowUpOutlined />,
-  'arrow-down': <ArrowDownOutlined />,
-  'arrow-left': <ArrowLeftOutlined />,
-  'arrow-right': <ArrowRightOutlined />,
-  'retweet': <RetweetOutlined />,
-  'pdm' : <FileMarkdownOutlined />,
-  'lock': <LockOutlined />,
-  'unlock': <UnlockOutlined />,
-  'image':<FileImageOutlined />,
-  'upload':<FileImageOutlined />
-
-}
-
-
-const changeTwoDecimal_f = (x) => {
-　　let f_x = parseFloat(x)
-　　if (isNaN(f_x)) {
-　　　　return 0
-　　}
-  f_x = Math.round(x * 100) / 100
-　　let s_x = f_x.toString()
-　　let pos_decimal = s_x.indexOf('.')
-　　if (pos_decimal < 0) {
-　　　　pos_decimal = s_x.length
-　　  s_x += '.'
-　　}
-　　while (s_x.length <= pos_decimal + 2) {
-　　　　s_x += '0'
-　　}
-  if(s_x >= 100) return 100
-　　return s_x
-}
-const BaseCommandList: any[] = [
-//     {/ /     title: '1:1',
-//   k e y: '1to1',，
-//   icon: 'column',
-//     click: (toolBarCommand, graph, update) => {
-//     const width = graph.get('width')
-//     const height = graph.get('height')
-//     graph.zoomTo(1, {
-//       x: width / 2,
-//       y: height / 2,
-//     })
-//     graph.paint()
-//     const zoom = graph.getZoom()
-//     graph.findAll('node', (node) => true).map((node) => {
-//       graph.updateItem(node, {
-//         isKeySharp: zoom < 0.4,
-//       })
-//     })
-//     update(+new Date())
-//   },
-// },
-// {
-//   title: intl.get('锁定最小比例').d('锁定最小比例'),
-//   key: 'lock-min',
-//   icon: 'lock',
-//   render: () => {
-//   return  <LockOutlined />
-//   },
-//   click: ()=>{}
-// },
-
-// {
-//   title: intl.get('导入pdm文件').d('导入pdm文件'),
-//   key: 'pdm',
-//   icon: 'pdm',
-//   render: () => {
-//   return <Pdm><FileMarkdownOutlined /></Pdm>
-//   },
-//   click: ()=>{}
-// },
-
-{
-  title: intl.get('全景').d('全景'),
-  key: 'full',
-  icon: 'container',
-  click: (toolBarCommand, graph, update) => {
-
-    graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
-      node.getContainer().show()
-    })
-    graph.fitView(0)
-    // setImmediate(() => {
-    //   alert()
-    //   graph.fitView(0)
-    //   graph.paint()
-    //   }, 2000)
-    // graph.paint()
-    const zoom = graph.getZoom()
-    graph.findAll('node', (node) => true).map((node) => {
-      graph.updateItem(node, {
-        isKeySharp: zoom < 0.4,
-        isCardSharp: zoom <= 0.1,
-      })
-    })
-
-    // toolBarCommand && toolBarCommand('keySharp', { isKeysharp: true})
-    update(+new Date())
-  },
-}, 
-// {
-//   title: intl.get('上').d('上'),
-//   key: 'up',
-//   icon: 'arrow-up',
-//   click: (_, graph) => {
-//     graph.translate(0, -100)
-//     graph.paint()
-//   },
-// }, {
-//   title: intl.get('下').d('下'),
-//   key: 'down',
-//   icon: 'arrow-down',
-//   click: (_, graph) => {
-//     graph.translate(0, 100)
-//     graph.paint()
-//   },
-// }, {
-//   title: intl.get('左').d('左'),
-//   key: 'left',
-//   icon: 'arrow-left',
-//   click: (_, graph) => {
-//     graph.translate(-100, 0)
-//     graph.paint()
-//   },
-// }, {
-//   title: intl.get('右').d('右'),
-//   key: 'right',
-//   icon: 'arrow-right',
-//   click: (_, graph) => {
-//     graph.translate(100, 0)
-//     graph.paint()
-//   },
-// },
- {
-  title: intl.get('导出图片').d('导出图片'),
-  key: 'export-image',
-  icon: 'image',
-  click: (toolBarCommand) => {
-    toolBarCommand && toolBarCommand('export-image')
-  },
-},
-
-
-//  {
-//   title: intl.get('保存位置').d('保存位置'),
-//   key: 'save-position',
-//   icon: 'upload',
-//   click: (toolBarCommand) => {
-//     toolBarCommand && toolBarCommand('upload')
-//   },
-// },
-
-// {
-//   title: intl.get('重新排列').d('重新排列'),
-//   key: 'resetLayout',
-//   icon: 'retweet',
-//   click: (toolBarCommand) => {
-//     confirm({
-//       title: '重新排列',
-//       content: '重新排列后，模型的位置重新排列 ？',
-//       onOk() {
-//         toolBarCommand && toolBarCommand('resetLayout') // toolBarCommand && toolBarCommand('keySharp', { isKeysharp: false})
-//       },
-//       onCancel() {
-//         console.log('Cancel')
-//       },
-//     })
-
-//   },
-
-// },
-
-// {
-//   title: intl.get('上一步').d('上一步'),
-//   key: 'last',
-//   icon: 'back',
-//   click: (toolBarCommand) => {
-//     alert('目前不可用')
-//     // toolBarCommand && toolBarCommand('resetLayout')
-//     // toolBarCommand && toolBarCommand('keySharp', { isKeysharp: false})
-//   },
-
-// },
-// {
-//   title: intl.get('下一步').d('下一步'),
-//   key: 'next',
-//   icon: 'forward',
-//   click: (toolBarCommand) => {
-//     alert('目前不可用')
-//     // toolBarCommand && toolBarCommand('resetLayout')
-//     // toolBarCommand && toolBarCommand('keySharp', { isKeysharp: false})
-//   },
-
-// },
-//  {
-//   title: intl.get('新增模型').d('新增模型'),
-//   icon: 'plus',
-//   click: (toolBarCommand) => {
-//     toolBarCommand && toolBarCommand('insertModel')
-//   },
-// }
-]
-const DataCommandList = [
-  {
-    title: intl.get('保存').d('保存'),
-    icon: 'sort',
-    click: (toolBarCommand) => {
-      toolBarCommand && toolBarCommand('save') // toolBarCommand && toolBarCommand('keySharp', { isKeysharp: false})
-    },
-  },
-  {
-  title: intl.get('编辑模型').d('编辑模型'),
-  icon: 'edit',
-  data: true,
-  click: (toolBarCommand) => {
-    toolBarCommand && toolBarCommand('editModel')
-  },
-}, {
-  title: intl.get('模型中心').d('模型中心'),
-  icon: 'monitor',
-  data: true,
-  click: (toolBarCommand) => {
-    toolBarCommand && toolBarCommand('centerModel') // toolBarCommand && toolBarCommand('keySharp', { isKeysharp: false})
-  },
-}]
-export default (({
-  graph,
-  zoom,
-  toolBarCommand,
-  currentModel,
-  saveFun,
-  toolBarCommands,
-  namespace,
-  setUpdateId,
-}) => {
-  const [_, update] = useState(null)
-  // tslint:disable-next-line: radix
-  const zoomNum = graph && changeTwoDecimal_f(parseFloat(graph.getZoom() * 100 / 2) + '') || 0
-  const dispatch = useDispatch()
-
-  const { isArrangeLayout, lockMinZoom } = useSelector((s) => s[namespace])
-  const arrangeLayout = useCallback(() => {
-    dispatch({
-      type: `${namespace}/setArrangeLayout`,
-      isArrangeLayout: !isArrangeLayout,
-    })
-  }, [isArrangeLayout])
-
-  const zoomChange = useCallback((e) => {
-    const newZoom = e.target.value
-    graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
-      node.getContainer().show()
-    })
-    const gwidth = graph.get('width')
-    const gheight = graph.get('height')
-    const point = graph.getCanvasByPoint(gwidth / 2, gheight / 2)
-    // graph.moveTo({x: point.x , y : point.y})
-    graph.zoomTo(newZoom / 100, {x: point.x , y : point.y})
-    graph.paint()
-    setUpdateId(+new Date())
-    update(+new Date())
-    // graph.zoomTo(newZoom / 100)
-    // alert(newZoom)
-
-  } , [graph])
-
-  const lockMinZoomSwitch = useCallback(()=>{
-  
-    dispatch({
-      type: `${namespace}/lockMinZoom`,
-      lockMinZoom: !lockMinZoom,
-    })
-
-  }, [lockMinZoom])
-
-  // alert(graph && graph.getZoom())
-  return (
-  <div className='console-erd-toolbar'>
-    <div className='right'>
-    {/* <Tooltip title={!isArrangeLayout ? intl.get('模型字段关联').d('模型字段关联') : intl.get('聚合关联').d('聚合关联') } >
-      <span className='command-btn zoomleft'  >
-        <Switch checkedChildren='聚合' unCheckedChildren='字段' size='small' onChange={arrangeLayout} checked={isArrangeLayout} />
-        </span>
-        </Tooltip> */}
-          <Tooltip title={!lockMinZoom ? intl.get('锁定最小比例').d('锁定最小比例') : intl.get('放开最小比例').d('放开最小比例') } >
-      <span className='command-btn zoomleft' onClick={lockMinZoomSwitch} >
-      { !!lockMinZoom ? <LockOutlined /> : <UnlockOutlined /> }
-        </span>
-        </Tooltip>
-    <Tooltip title={intl.get('放大').d('放大')} ><span className='command-btn zoomleft' onClick={zoomInClick.bind(this, { toolBarCommand, graph, update })} ><ZoomInOutlined /></span></Tooltip>
-    <span className='zoomNum noselect'>
-    {/* <Popover footer={false} content={<RadioGroup value={zoomNum * 2} onChange={zoomChange} >
-        <Radio value={200}>100%</Radio>
-        <Radio value={100}>50%</Radio>
-        <Radio value={20}>10%</Radio>
-      </RadioGroup>} placement='bottom' > */}
-      {graph && `${(zoomNum * 2) >= 100 ? 100 :(zoomNum * 2) }%` }
-      {/* </Popover> */}
-      </span>
-    <Tooltip title={intl.get('缩小').d('缩小')} ><span className='command-btn' onClick={zoomOutClick.bind(this, { toolBarCommand, graph, update })}><ZoomOutOutlined /></span></Tooltip>
-
-   {
-     BaseCommandList.filter((c) => !c.data || currentModel).filter((c) => c.title !== intl.get('保存').d('保存') || saveFun).map((command) => {
-      return (
-      <RenderPopConfirm title={command.title} isConfirm={command.isConfirm} key={command.key} btnRender={<Tooltip title={command.title} ><span className={classNames(['command-btn', {
-        'command-btn-data': !!command.data,
-      }])} onClick={command.click.bind(this, toolBarCommand, graph, update)}>{command.render ? command.render() : IconRenders[command.icon]}</span></Tooltip>}  />)
-    })
-    }
-
-    </div>
-    <div className='right'>
-   {/* {
-     DataCommandList.concat(toolBarCommands ? toolBarCommands : []).filter((c) => !c.data || currentModel).filter((c) => c.title !== intl.get('保存').d('保存') || saveFun).map((command) => {
-        return (
-        <RenderPopConfirm click={command.click.bind(this, toolBarCommand, graph, update)} title={command.title} isConfirm={command.isConfirm} key={command.key} btnRender={<Tooltip title={command.title} ><Button type='text' icon={command.icon} className={classNames(['command-btn', {
-          'command-btn-data': !!command.data,
-        }])} onClick={!command.isConfirm && command.click.bind(this, toolBarCommand, graph, update)}/></Tooltip>}  />)
-    })
-    } */}
-</div>
-    </div>)
-})
-
-const toNumString = (str) => {
-
-}
-
-const RenderPopConfirm = ({isConfirm = false , btnRender, title, click}) => {
-   if (isConfirm) {
-      return (<Popover title={$$(`确定是否${title}？`)} okText={$$('是')} cancelText={$$('否')} onOk={click}>
-       {btnRender}
-      </Popover>
-      )
-   } else {
-     return btnRender
-   }
-}
-
-const $$ = (txt) => intl.get(txt).d(txt)

package/webapp/src/g6/shape/base-sharp/index.tsx

@@ -1,19 +0,0 @@
-export class BaseDrawer {
-  public constructor(protected vm: BaseSharp) {}
-
-  public render(group) {
-    group.addShape('rect', {
-      attrs: {
-        vm: this.vm
-      }
-    });
-  }
-
-} // tslint:disable-next-line: max-classes-per-file
-
-export class BaseSharp {
-  public for;
-
-  public constructor(protected attrs: any) {}
-
-}

package/webapp/src/g6/util/graph.tsx

@@ -1,60 +0,0 @@
-
-export const toCenter = (item, graph) => {
-  if (!item) return
-
-  graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
-    node.getContainer().show()
-  })
-
-  graph.zoomTo(1)
-  graph.focusItem(item)
-  // 聚焦当前点击的节点（把节点放到视口中心）
-  let matrix = item.get('group').getMatrix()
-  let point = {
-    x: matrix[6],
-    y: matrix[7],
-  }
-  let width = graph.get('width')
-  let height = graph.get('height') // 找到视口中心
-  // const itemHeight = item.getKeyShape().height
-  // // if(height <  itemHeight) {
-
-  // // }
-  // let viewCenter = {
-  //   x: width / 2,
-  //   y: height / 2,
-  // }
-  // let modelCenter = graph.getPointByCanvas(viewCenter.x, viewCenter.y)
-  // let viewportMatrix = graph.get('group').getMatrix() // 画布平移的目标位置，最终目标是graph.translate(dx, dy);
-  // // const pointY = height <  itemHeight ? (point.y - (height - itemHeight) / 2) : point.y
-  // // const pointY = (point.y - (itemHeight - height) / 2)
-  // const pointY =  point.y
-  // let dx = (modelCenter.x - point.x) * viewportMatrix[0]
-  // let dy = (modelCenter.y - pointY) * viewportMatrix[4]
-  // // let lastX = 0
-  // // let lastY = 0
-  // // let newX = void 0
-  // // let newY = void 0 // 动画每次平移一点，直到目标位置
-  // // graph.get('canvas').animate({
-  // //   onFrame: function onFrame(ratio) {
-  // //     newX = dx * ratio
-  // //     newY = dy * ratio
-  // //     graph.translate(newX - lastX, newY - lastY)
-  // //     lastX = newX
-  // //     lastY = newY
-  // //   },
-  // // }, 300, 'easeCubic')
-  const itemHight = item.getKeyShape().attr('height')
-  // alert(itemHight)
-  const graphHeight = height / 2
-
-  graph.translate(0, (- graphHeight + itemHight / 2 + 120))
-
-  // graph.translate(0, (- height / 2) +  (item.getKeyShape().height / 2))
-
-  // graph.paint()
-
-  // graph.paint()
-  // // graph.layout()
-  // setTimeout(() => { graph.zoomTo(1) ; graph.paint() }, 2000)
-}

package/webapp/src/g6/util/hooks.tsx

@@ -1,26 +0,0 @@
-import Immer from 'immer';
-import { useCallback, useReducer } from 'react';
-
-const _createReducer = command => {
-  return (state, {
-    type,
-    ...data
-  }) => {
-    const immer = Immer(state, s => {
-      if (command[type]) {
-        command[type](state, {
-          type,
-          ...data
-        });
-      }
-    });
-    return immer;
-  };
-};
-
-export const useImmerReducer = (commands, stateInit) => {
-  const createReducerCallback = useCallback(() => {
-    return _createReducer(commands);
-  }, [commands]);
-  return useReducer(createReducerCallback, stateInit);
-};

package/webapp/src/g6/util/index.tsx

@@ -1,20 +0,0 @@
-export function launchIntoFullscreen(element) {
-  if (element.requestFullscreen) {
-    element.requestFullscreen();
-  } else if (element.mozRequestFullScreen) {
-    element.mozRequestFullScreen();
-  } else if (element.webkitRequestFullscreen) {
-    element.webkitRequestFullscreen();
-  } else if (element.msRequestFullscreen) {
-    element.msRequestFullscreen();
-  }
-}
-export function exitFullscreen() {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  }
-}

package/webapp/src/hook/index.tsx

@@ -1,47 +0,0 @@
-import React, { useReducer, useMemo } from 'react'
-import ReactDom from 'react-dom'
-import { createContainer } from "unstated-next"
-import  DvaModel  from '../page/dva-model'
-
-
-const dvaModel = DvaModel({namespace: 'erd'})
-
-const reduce = (state, action) => {
-    const actiontype = action.type.substring(action.type.indexOf('/') + 1, action.type.length)
-    const reduce = dvaModel.reducers[actiontype]
-    if(reduce) {
-        return  { erd : reduce(state.erd, action ) }
-    }
-    return state
-}
-
-const dvaState = { 'erd' :  dvaModel.state }
-
-const usePageModel = () => {
-
-    const [state, dispath] = useReducer(reduce, dvaState)
-    return {
-        state , dispath
-    }
-
-}
-
-export const PageModel = createContainer(usePageModel)
-
-export const useDispatch = () => {
-     const { dispath } = PageModel.useContainer()
-     return dispath 
-}
-
-export const useSelector = (selector) => {
-    const { state } = PageModel.useContainer()
-    const resultState = useMemo(()=>  (selector ? selector(state) : state) , [selector , state])
-    return resultState
-}
-
-
-//useDispatch, useSelector
-
-
-
-