@steedos/steedos-plugin-schema-builder 2.3.0-beta.8 → 2.3.0

package/webapp/src/page/index.tsx

@@ -0,0 +1,393 @@
+
+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

@@ -0,0 +1,329 @@
+
+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,
+  }
+}