@steedos/steedos-plugin-schema-builder 2.6.1-beta.7 → 2.6.2-beta.2

package/webapp/src/page/index.tsx

@@ -1,393 +0,0 @@
-
-import { Empty, Spin  } from 'antd'
-import { useDispatch } from '../hook'
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-// import Pdm from '../../test/g6-test/pdm'
-import { toCenter } from './../g6/util/graph'
-// import { modelConfig , styleConfigLazy } from './config'
-import { useFpsHook } from './hooks/callback'
-import { useLocalHooks } from './hooks/pagehooks'
-import { useResizeUpdate } from './hooks/resize'
-import ModelNavi from './model-navi'
-// import { updateLayout } from './util'
-
-import intl  from './../g6/util/intel'
-
-export default (
-  {
-    namespace = 'erd' , primaryColor, toolBarCommands,
-    saveFun, delFun, modelEditFun, fieldEditFun, changeData,
-    modelInsertFun, useAppContext, getModels,
-    getModules, ModelEdit, ModelInsert,
-    ErdPage, isFullScreen, ...props}) => {
-  const {
-    graph,
-    models,
-    checkedKeys,
-    graphRef,
-    showModel,
-    currentModel,
-    layouted,
-    showInsertModel,
-    search,
-    layouting,
-    style,
-    colors,
-  } = useLocalHooks({ namespace, useAppContext, ...props})
-  const dispatch = useDispatch()
-
-  useResizeUpdate()
-
-  const onCancle = () => {
-    dispatch({
-      type: `${namespace}/closeModel`,
-    })
-  }
-
-  const onInsertCancle = () => {
-    dispatch({
-      type: `${namespace}/closeInsertModel`,
-    })
-  }
-
-  const [width, setWidth] = useState(0)
-
-  const G6GraphDomRef = useRef({
-    offsetWidth: 0,
-    offsetHeight: 0,
-  })
-  const isKeySharp = useRef(true)
-  const [once, setOnce] = useState(true)
-  const [updateId, setUpdateId] = useState(0)
-  const { tabsRouteContext } = useAppContext()
-
-  useEffect(() => {
-     if (isFullScreen) {
-      setWidth(G6GraphDomRef.current.offsetWidth)
-      setOnce(false)
-    } else if (
-      G6GraphDomRef.current.offsetWidth &&
-      tabsRouteContext.current === '/'
-    ) {
-      if (layouted) {
-        setImmediate(() => {
-          G6GraphDomRef.current && setWidth(G6GraphDomRef.current.offsetWidth)
-          setOnce(false)
-        }, 100)
-      } else {
-        setWidth(G6GraphDomRef.current.offsetWidth)
-      }
-    }
-  }, [G6GraphDomRef.current.offsetWidth])
-
-  const styleConfig = style
-
-  const erdLoading = models.length > 0 && !!width && !once
-  const toolBarCommand = useCallback(
-    (name, action) => {
-      const _graph = graphRef.current
-
-      if (name === 'keySharp') {
-        const { isKeysharp = !isKeySharp.current, isCardSharp } = action
-        isKeySharp.current = isKeysharp
-
-        _graph
-            .findAll('node', (node) => true)
-            .map((node) => {
-              _graph.updateItem(node, {
-                isKeySharp: isKeySharp.current,
-                isCardSharp,
-              })
-            })
-
-        _graph.paint()
-        }
-      // }
-
-      if(name === 'export-image') {
-        const newZoom = 100
-        _graph.isExporting = true
-        _graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
-          node.getContainer().show()
-             _graph.updateItem(node, {
-                isKeySharp: false,
-                isCardSharp: false ,
-              })
-        })
-        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()
-        _graph.downloadFullImage('模型图', undefined, {
-          backgroundColor: 'rgb(245, 247, 255)',
-        })
-        _graph.isExporting = undefined
-      }
-
-      if (name === 'min-zoom') {
-        const gwidth = _graph.get('width')
-        const gheight = _graph.get('height')
-        const point = _graph.getCanvasByPoint(gwidth / 2, gheight / 2)
-
-        const zoom = _graph.getZoom()
-        if (zoom > 0.2) {
-          _graph.zoomTo(zoom - 0.2, point)
-        } else {
-          _graph.zoomTo(zoom - 0.02, point)
-        }
-        _graph.paint()
-        setUpdateId(+new Date())
-      }
-
-      if (name === 'nodeClick') {
-        dispatch({
-          type: `${namespace}/currentModel`,
-          model: action.node,
-        })
-
-        const currentNode = _graph
-          .getNodes().filter((a) => !a.isSys)
-          .find((node) => node.getModel().id === action.node)
-
-        if (currentNode) {
-          _graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
-            _graph.updateItem(node, {
-              selected: node === currentNode,
-              noSelected: node === currentNode,
-            })
-          })
-
-          _graph.paint()
-        }
-      }
-
-      if (name === 'click') {
-
-        if (action.click === 'modelEdit') {
-          const [_, ...actions] = action.node.split('-')
-          const actionStrings = actions.join('-')
-          if (modelEditFun)
-            modelEditFun({
-              model: actionStrings,
-            })
-        }
-
-        if (action.click === 'arrangeShow') {
-          dispatch({
-            type: `${namespace}/` + action.click,
-            model: action.arg,
-          })
-        }
-
-        if (action.click === 'delModel') {
-          dispatch({
-            type: `${namespace}/` + action.click,
-            model: action.node,
-          })
-        }
-
-        if (action.click === 'delModule') {
-          dispatch({
-            type: `${namespace}/` + action.click,
-            model: action.node,
-          })
-        }
-
-        if (action.click === 'fieldSelect') {
-          //
-          if(action.arg.relationModelKey){
-          dispatch({
-            type: `${namespace}/currentModel`,
-            model: 'model-' + action.arg.relationModelKey,
-          })
-
-          const item = _graph.findById('model-' + action.arg.relationModelKey)
-
-          toCenter(item, _graph)
-        }
-
-        }
-
-        if (action.click === 'fieldEdit') {
-          const [_, ...actions] = action.node.split('-')
-          const actionStrings = actions.join('-')
-          if (fieldEditFun)
-            fieldEditFun({
-              model: actionStrings,
-              field: action.arg,
-            })
-        }
-      }
-
-      if (name === 'upload') {
-        const data = _graph.save()
-
-        const nodes = data.nodes.reduce((pre, { x, y, id }) => {
-          return {
-            ...pre,
-            [id]: {
-              x,
-              y,
-            },
-          }
-        }, {})
-        sessionStorage.setItem('console-erd-graph', JSON.stringify(nodes))
-        alert(JSON.stringify(nodes))
-      }
-
-      if (name === 'max-zoom') {
-
-        if (_graph.getZoom() >= 2.1) return
-
-        const gwidth = _graph.get('width')
-        const gheight = _graph.get('height')
-        const point = _graph.getCanvasByPoint(gwidth / 2, gheight / 2)
-        const zoom = _graph.getZoom()
-        console.log(zoom / 2)
-        if (zoom > 0.2) {
-          _graph.zoomTo(zoom + 0.2, point)
-        } else {
-          _graph.zoomTo(zoom + 0.02, point)
-        }
-        setUpdateId(+new Date())
-      }
-
-      if (name === 'editModel') {
-        dispatch({
-          type: `${namespace}/openModel`,
-        })
-        const [_, ...actions] = currentModel.split('-')
-        const actionStrings = actions.join('-')
-        if (modelEditFun)
-          modelEditFun({
-            model: actionStrings,
-          })
-      }
-
-      if (name === 'insertModel') {
-        dispatch({
-          type: `${namespace}/openInsertModel`,
-        })
-        if (modelInsertFun) modelInsertFun()
-      }
-
-      if (name === 'resetLayout') {
-        _graph.refresh()
-      }
-
-      if (name === 'centerModel') {
-        if (action && action.node) {
-          dispatch({
-            type: `${namespace}/currentModel`,
-            model: action.node,
-          })
-
-          _graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
-            const current = node.getModel().id === action.node
-            //  current &&  toCenter(node, _graph)
-
-            _graph.updateItem(node, {
-              selected: current,
-              isKeySharp: false,
-            })
-          })
-        }
-
-        const item = _graph.findById((action && action.node) || currentModel)
-
-        toCenter(item, _graph)
-      }
-
-      if (name === 'save') {
-        if (saveFun) saveFun()
-      }
-
-      if (name === 'delModel') {
-        alert()
-        dispatch({
-          type: `${namespace}/delModel`,
-        })
-        delFun && delFun()
-      }
-    },
-    [graphRef.current, currentModel],
-  )
-  const { fpsRef } = useFpsHook()
-  const Pdm = props.Pdm
-  return (
-    <div
-      className='console-g6-page'
-    >
-    {/* {Pdm && erdLoading && <Pdm />} */}
-      <div
-        className='console-erd-fps'
-        ref={(ref) => {
-          fpsRef.current = ref
-        }}
-      />
-      <div
-        className='g6-modelnavi'
-      >
-        <ModelNavi
-          namespace={namespace}
-          Tree={props.Tree}
-          bottomHeight={props.bottomHeight || 78}
-          Input={props.Input}
-          Pdm={Pdm}
-          toolBarCommand={toolBarCommand}
-          clickModelNode={(key) => {
-            toolBarCommand('nodeClick', {
-              node: key,
-            })
-          }}
-          primaryColor={primaryColor}
-          getModels={getModels}
-          getModules={getModules}
-        />
-      </div>
-      <div className='g6-graph' ref={(ref) => { G6GraphDomRef.current = ref }}>
-        {' '}
-        <Spin tip='layout...' spinning={erdLoading && layouting}>
-        {erdLoading ? (
-          <ErdPage
-            toolBarCommands={toolBarCommands}
-            saveFun={saveFun}
-            styleConfig={styleConfig}
-            toolBarCommand={toolBarCommand}
-            currentModel={currentModel}
-            width={width}
-            config={styleConfig}
-            setGraph={(g) => (graphRef.current = g)}
-            changeNodes={checkedKeys}
-            checkedKeys={checkedKeys}
-            height={G6GraphDomRef.current.offsetHeight - 54}
-            graph={graph}
-            update={updateId}
-            colors={colors}
-            setUpdateId={setUpdateId}
-            namespace={namespace}
-          />
-        ) : (
-          search ? <Empty
-          description='no found model'
-        /> :
-          <div>
-             {
-             Pdm ? <Empty style={{textAlign: 'center'}} description={<Pdm />} /> :  <Spin >
-               <Empty style={{textAlign: 'center'}} description={intl.get('正在绘制模型图...').d('正在绘制模型图...')}
-            /></Spin>
-            }
-          </div>
-        )}
-         </Spin>
-      </div>
-    </div>
-  )
-      }

package/webapp/src/page/model-navi/index.tsx

@@ -1,329 +0,0 @@
-
-import { Input, Tree, Select, Button, Divider } from 'antd'
-import { useDispatch, useSelector } from '../../hook'
-import _ from 'lodash'
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Scroll from 'react-custom-scrollbars'
-
-import { useLoadData } from '../hooks/callback'
-import './style.scss'
-import intl from './../../g6/util/intel'
-const { Option } = Select;
-
-const renderLabel = (isSpec, beforeStr, afterStr, searchValue) => {
-
-  const greenStyle = isSpec ? { color: 'green'} : {}
-  const searchStyle = {
-    color: '#f50',
-  }
-  return (
-          <span>
-            <span style={greenStyle}>{beforeStr}</span>
-            <span style={searchStyle}>{searchValue}</span>
-            <span style={greenStyle}>{afterStr}</span>
-          </span>)
-}
-
-const renderTitleGreen = (isSpec, title) => {
-  const greenStyle = isSpec ? { color: 'green'} : {}
-  return (
-    <span style={greenStyle}>{title}</span>
-  )
-}
-
-const renderModelTitle = (title, searchValue , showNameOrLabel, originalKey) => {
-
-    if(showNameOrLabel) {
-      return renderTitle(originalKey, searchValue)
-    } else {
-      return renderTitle(title, searchValue)
-    }
- 
-}
-
-const renderTitle = (title, searchValue = '', isSpec = false) => {
-
-  if (!searchValue) return title
-  const index = title.indexOf(searchValue)
-  const beforeStr = title.substr(0, index)
-  const afterStr = title.substr(index + searchValue.length)
-  const titleFilter = index > -1 ? renderLabel(isSpec, beforeStr, afterStr, searchValue) : renderTitleGreen(isSpec, title)
-  return titleFilter
-}
-
-export interface IProps {
-  namespace: any
-  moduleKey: any
-  getModels: any
-  getModules: any
-  clickModelNode: any
-  toolBarCommand: any
-}
-
-const createItem = (conditionFun , createItemFun) => {
-    if (conditionFun && conditionFun()) {
-      const item = createItemFun()
-      return [item]
-    } else {
-      return[]
-    }
-}
-
-export default forwardRef((props: any, ref) => {
-  const {
-    namespace,
-    getModels,
-    getModules,
-    clickModelNode,
-    toolBarCommand,
-    primaryColor,
-    Pdm,
-  } = props
-  const {
-    store,
-    consoleModelsRef,
-    dispatch,
-  } = useLocal({
-    namespace,
-    getModels,
-    getModules,
-    clickModelNode,
-    primaryColor,
-  })
-
-  const searchDispatch = useCallback(_.debounce((value) => {
-    dispatch({
-      type: `${namespace}/search`,
-      text: value,
-    })
-
-  }, 500), [dispatch])
-
-  const fun = (value) => {
-    // console.log(e)
-    setSearchText(value)
-    // searchDispatch(value)
-
-   }
-
-  const [searchText, setSearchText] = useState(store.search)
-
-  const searchOnChange = useCallback(fun , [dispatch])
-
-  const NaviTree = (props.Tree || Tree)
-  const NaviInput = (props.Input || Input)
-  const {
-    TreeNode,
-    OptionBuilder,
-  } = NaviTree
-
-  const [moduleValue, setModuleValue] = useState('')
-  const changeModuleValue = useCallback((val)=>{setModuleValue(val)},[])
-
-  const selectAfter = (
-    <Select defaultValue={moduleValue} value={moduleValue}  className="select-after" onChange={changeModuleValue}>
-      {
-        [
-          <Option value={''}>所有</Option>,
-          ...store.modules.map((module) => {
-        return  <Option value={module.key}>{module.name}</Option>
-        })]
-      }
-    </Select>
-  );
-
-  const checkAllFun = () => {
-    // alert(models.length)
-    dispatch({
-      type: `${namespace}/onCheckByModuleAll`,
-      moduleKey: moduleValue,
-    })
-  }
-
-  const checkAllCancleFun = () => {
-    // alert(models.length)
-    dispatch({
-      type: `${namespace}/onCheckByModuleAllCancle`,
-      moduleKey: moduleValue,
-    })
-  }
-
-  const toggleShowNameOrLabel = useCallback(() => {
-    dispatch({
-      type: `${namespace}/showNameOrLabel`,
-      showNameOrLabel: !store.showNameOrLabel,
-    })
-  },[store.showNameOrLabel])
-  
-
-  return useMemo(() => (
-  <div className='console-models-tree' style={{paddingBottom: props.bottomHeight}} ref={(refDiv) => {
-    consoleModelsRef.current = refDiv
-  }}>
-    <div className='header'>
-
-        <div className='console-erd-search'>
-
-          <NaviInput allowClear size="small"  onChange={(e) => {searchOnChange(e.target.value) }} placeholder={intl.get('模型筛选').d('模型筛选')}  addonAfter={selectAfter} />
-          {/* <Button className='console-erd-add' type='text' icon='plus'  onClick={() => { toolBarCommand('insertModel') }} /> */}
-          </div>
-          <div className='console-erd-search btns'>
-            <Button size="small" type="link" onClick={checkAllFun} >选择所有</Button>
-            <Button size="small" type="link" onClick={checkAllCancleFun}>清除所有</Button>
-            <Button size="small" type="link" onClick={toggleShowNameOrLabel}>显示{!store.showNameOrLabel?'名称':'标签'}</Button>
-          </div>
-          </div>
-          <div className='navitree-warp'>
-      <Scroll 
-        autoHide
-        autoHeight
-        autoHideTimeout={1000}
-        autoHideDuration={200}
-        autoHeightMin={'100%'}
-        autoHeightMax={'100%'}
-        >
-        <NaviTree className='console-models-tree-tree'  ref={ref} expandedKeys={store.expandedKeys} onCheck={(checkKeys) => {
-      dispatch({
-        type: `${namespace}/onCheckByModule`,
-        checkKeys,
-        moduleKey: moduleValue
-      })
-    }} onExpand={(_, {
-      expanded,
-      node,
-    }) => {
-      dispatch({
-        type: `${namespace}/onExpand`,
-        expanded,
-        node,
-      })
-    }} checkable multiple selectedKeys={[store.currentModel]} onSelect={(keys , e) => {
-      // clickModelNodeFun(keys[0])
-      // alert()
-      // alert(JSON.stringify(keys))
-      dispatch({
-        type: `${namespace}/currentModel`,
-        model: e.node.props['data-key'],
-      })
-
-    }} checkedKeys={store.checkedKeys}>
-        {/* <TreeNode key='allmodels' title={<OptionBuilder data={{
-        title: intl.get('所有模型').d('所有模型'),
-      }} />}> */}
-         {/* {store.modules.map((module) => {
-          return <TreeNode key={'module-' + module.key} title={
-            <OptionBuilder data={{
-              title:  renderTitle(module.name, store.search),
-              options: [
-                {
-                  title: <span> {intl.get('移除').d('移除')}</span>,
-                  click: () => {
-                    toolBarCommand('click', {
-                      node: 'module-' + module.key,
-                      // arg: '',
-                      click: 'delModule',
-                    })
-                  },
-                },
-              ],
-             }} />
-
-            }> */}
-                {store.models.filter((m) =>  !m.delete && (!moduleValue || m.moduleKey === moduleValue)).filter((m) => !searchText || m.name.indexOf(searchText) >= 0).map((m) => {
-              return <TreeNode title={<OptionBuilder data={{
-                title: renderModelTitle(m.name, searchText, store.showNameOrLabel, m.originalKey),
-                options: [{
-                  title: <span> {intl.get('定位模型').d('定位模型')}</span>,
-                  click: () => {
-                    toolBarCommand('centerModel', {
-                      node: 'model-' + m.key,
-                    })
-                  },
-                },
-                {
-                  title: <span> {intl.get('查看').d('查看')}</span>,
-                  click: () => {
-                    toolBarCommand('click', {
-                      node: 'model-' + m.key,
-                      // arg: '',
-                      click: 'modelEdit',
-                    })
-                  },
-                },
-                ...createItem(() => (!!m.aggregateModelKey), () => {
-                  return {
-                  title: <span> {intl.get('查看聚合关系').d('查看聚合关系')}</span>,
-                  click: () => {
-                    toolBarCommand('click', {
-                      node: 'model-' + m.key,
-                      // arg: '',
-                      click: 'arrangeShow',
-                      arg: m.aggregateModelKey,
-                    })
-                  },
-                  }
-                }),
-                {
-                  title: <span> {intl.get('移除').d('移除')}</span>,
-                  click: () => {
-                    toolBarCommand('click', {
-                      node: 'model-' + m.key,
-                      // arg: '',
-                      click: 'delModel',
-                    })
-                  },
-                },
-              ],
-              }} />} data-key={'model-' + m.key} key={'model-' + m.key} isLeaf />
-            })}
-              {/* </TreeNode> */}
-        })}
-        {/* </TreeNode> */}
-      </NaviTree>
-      </Scroll>
-      </div>
-  </div>), [store.checkedKeys, store.currentModel, store.expandedKeys, store.modules, store.models, searchText, moduleValue, store.showNameOrLabel])
-})
-
-const useLocal = ({
-  namespace,
-  getModels,
-  getModules,
-  clickModelNode,
-  primaryColor,
-}) => {
-  const store = useSelector((s) => s[namespace])
-  const consoleModelsRef = useRef(null)
-  const dispatch = useDispatch()
-  const {
-    loadData,
-  } = useLoadData({
-    dispatch,
-    namespace,
-    getModels,
-    getModules,
-    primaryColor,
-  })
-  useEffect(() => {
-    loadData()
-  }, [])
-  useEffect(() => {
-    const modelsDiv = consoleModelsRef.current
-
-    if (modelsDiv && store.currentModel) {
-      const lis: any = document.querySelector(`li[data-key=\'${store.currentModel}\']`)
-      if (lis && lis.offsetTop) modelsDiv.scrollTop = lis.offsetTop
-    }
-  }, [store.currentModel])
-  const clickModelNodeFun = useCallback((key) => {
-    if (clickModelNode) {
-      clickModelNode(key)
-    }
-  }, [clickModelNode])
-  return {
-    store,
-    consoleModelsRef,
-    dispatch,
-    clickModelNodeFun,
-  }
-}