@steedos/steedos-plugin-schema-builder 2.2.50-beta.7 → 2.2.51-beta.2

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

package/webapp/src/page/model-navi/style.scss

@@ -1,111 +0,0 @@
-
-.console-g6-page {
-  background-color: #fff;
-  display: flex ;
-  flex:1;
-  flex-direction: row;
-  overflow: hidden;
-  height: 100%;
-  .g6-graph {
-    // width: calc(100% - 250px)
-    // padding-left: 16px;
-    margin-right: 16px;
-    flex:1;
-    width:0;
-    height: 100%;
-    .ant-spin-nested-loading {
-      height: 100%;
-      .ant-spin-container {
-        height:  100%;
-      }
-    }
-  }
-
-  .g6-info {
-    width: 50px;
-  }
-
-  .g6-modelnavi {
-    width: 270px;
-    margin-bottom: 16px;
-    height: 100%;
-
-    
-
-
-    .console-models-tree {
-      overflow: hidden;
-      display: flex ;
-      flex-direction: column;
-      padding-bottom: 78px;
-
-      height: 100%;
-      margin-right: 25px;
-     
-      .header {
-        height: 56px;
-      }
-
-      .navitree-warp {
-        flex: 1;
-        // overflow-y: scroll;
-        display: flex;
-        flex-direction:column;
-        // margin-top: 8px;
-        // margin-bottom: 24px;
-        height: 100%;
-        margin-left: 10px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-      }
-      .console-erd-search {
-        margin-top: 3px;
-        // height:35px;
-        margin-bottom: 4px;
-      //  float: right;
-        // margin-right: 30px;
-        margin-left: 10px;
-        display: flex;
-        .console-erd-add {
-          font-size: 20px;
-          // margin-right: 25px;
-          color: rgba(0,0,0,0.40);
-          cursor: pointer;
-            margin-left: 5px;
-        }
-      }
-      // .header {
-      //   // height: 50px;
-      //   // border-bottom:1px solid rgba(0, 0, 0, 0.1);
-      // }
-
-
-      .console-models-tree-tree{
-         flex:1;
-        //  overflow: hidden;
-         padding-right: 5px;
-         .ant-tree-treenode {
-           width: 100%;
-         }
-
-         .ant-tree-node-selected {
-            .tree-node-title {
-              color: white;
-              background-color: rgba(11,108,149,1);
-            }
-            background-color:rgba(11,108,149,1);
-         }
-       
-        //  div.ant-tree-treenode:hover {
-        //   background-color: red;
-        // }
-      }
-
-
-
-   }
-
-  }
-
-}
-
-

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

@@ -1,234 +0,0 @@
-// import { styleConfig ,  styleConfigLazy } from '../config'
-import { layOutNodes as _layOutNodes, layOutNodesByG6 as _layOutNodesByG6 } from './layout-nodes'
-
-export const layOutNodes = _layOutNodes
-export const layOutNodesByG6 = _layOutNodesByG6
-
-const showLable = (node) => {
-  // return !node.name || node.name === node.originalKey
-  //   ? node.originalKey
-  //   : `${node.name} (${node.originalKey})`
-  return node.name || node.originalKey
-}
-
-const eq = (fun) => {
-  return fun()
-}
-
-const fields = (node, models) => {
-  const list = node.fields.map((field) => {
-    // const field = node.fields[k]
-    const isForeign = field.typeMeta && field.typeMeta.type === 'Relation'
-    const relationModel = eq(() => {
-      if (isForeign && field.typeMeta.relationModel) {
-        const m = models.find((a) => a.key === field.typeMeta.relationModel)
-        // if (m) return m.name || m.originalKey
-        return m || { name: field.typeMeta.relationModel }
-      }
-
-      return ''
-    })
-    return {
-      ...field,
-      key: field.key,
-      label: showLable(field),
-      type: field.type,
-      originalKey: field.originalKey,
-      isForeign,
-      relationModelKey: relationModel && relationModel.key,
-      relationModel: isForeign && relationModel ? relationModel.name || relationModel.originalKey : '',
-    }
-  })
-  return list
-}
-
-export const updateLayout = (graph, groups) => {
-  const nodes = graph.getNodes().filter((a) => !a.isSys).map((n) => {
-    const model = n.getModel()
-    return {
-      data: model.data,
-      config: model.config,
-      id: model.id,
-    }
-  })
-  const edges = graph.getEdges().map((edge) => {
-    const { source, target, fieldIndex, fieldsLength } = edge.getModel()
-    return {
-      source,
-      target,
-      fieldIndex,
-      fieldsLength,
-    }
-  })
-  console.log(nodes)
-  return layOutNodes(nodes, edges, groups)
-}
-
-const createSysNode = () => {
-
-  return  {
-    id: 'model-SYS-CENTER-POINT',
-    type: 'circle',
-    isSys: true,
-    isKeySharp: true,
-    size:  10,
-  }
-
-}
-
-export const getNodes = (models, checkedKeys styleConfig) => {
-  // const _key = stateConfig.model_keys.key
-  const nodeRes = models
-    .filter(
-      (model) => (checkedKeys.indexOf('model-' + model.key) >= 0 && !model.delete && model.isShow),
-    )
-    .map((model, i) => {
-      return {
-        id: 'model-' + model.key,
-        hide: checkedKeys.indexOf('model-' + model.key) === -1,
-        // groupId: `module-${model.moduleKey}`,
-        config: {
-          width: 300,
-          headerHeight: 48,
-          fieldHeight: 32,
-          labelSize: 14 ,
-          hide: checkedKeys.indexOf('model-' + model.key) === -1,
-          styleConfig,
-        },
-        data: {
-          moduleKey: `module-${model.moduleKey}`,
-          label: showLable(model),
-          fields: fields(model, models),
-          key: model.key,
-          name: model.name || model.key,
-          tag: 'aggregate',
-          aggregateRoot:  model.aggregateRoot,
-          aggregateModelKey: model.aggregateModelKey,
-          belongAggregate: model.belongAggregate,
-          nodeSize:  ((48 +  getLength(model.fields.length) * 48) / 6) *
-          6  / 6,
-        },
-        type: 'console-model-Node',
-        isKeySharp: true,
-        size:   ((48 +  getLength(model.fields.length) * 48) / 6) *
-        6 ,
-      }
-    })
-
-  return nodeRes.length > 0 ? nodeRes.concat([createSysNode()]) : nodeRes
-
-  // })
-}
-
-const getLength  = (length) => {
-  return length >= 20 ? length : 20
- }
-
-const noInCheckedKeys = (checkedKeys, sourceModel, targetModel) => {
-   return checkedKeys.indexOf(sourceModel) === -1 || checkedKeys.indexOf(targetModel) === -1
- }
-
- const Relation = {
-  ToOne: '1:1',
-  ToMany: '1:n',
-  lookup:'查找'
-}
-
-export const createLinks = (models, nodes, checkedKeys, styleConfig) => {
-  const links = models.reduce((pre, model) => {
-     if (!nodes.find((a) => a.id === 'model-' + model.key)) return pre
-     const { aggregateRoot , aggregateModelKey , belongAggregate  } = model
-     const hasArrangeLink = (aggregateModelKey) && (aggregateModelKey !== model.key)
-     const arrangeModel = aggregateModelKey
-     const arrangeLink = (
-       hasArrangeLink &&
-       nodes.find((a) => a.id === 'model-' + arrangeModel) &&
-       !noInCheckedKeys(checkedKeys, ('model-' + arrangeModel), ('model-' + model.key)))  ? [
-       {
-        key: 'model-' + model.key + '~' + +'~' + 'model-' + arrangeModel,
-        target: 'model-' + model.key,
-        source: 'model-' + arrangeModel,
-        arrangeLink: true,
-        style : {
-          lineDash: [18, 20],    // 虚线边
-          lineWidth: 3,
-        },
-      }] : []
-
-     const fieldLinks = Object.keys(model.fields)
-      .map((k) => model.fields[k])
-      .reduce((fPre, field, i) => {
-        const isRelation =   field.typeMeta && field.typeMeta.type === 'Relation'
-        const { originalKey } = field
-        if (isRelation && !(field.typeMeta.relationModel === 'base_User' && (['createdBy', 'updatedBy'].indexOf(originalKey) >= 0))) {
-          const sourceModelNode = null
-          const targetModelNode = null
-          const sourceModel = sourceModelNode
-            ? sourceModelNode.getModel()
-            : nodes.find((a) => a.id === 'model-' + model.key)
-          const targetModel = targetModelNode
-            ? targetModelNode.getModel()
-            : nodes.find(
-                (a) => a.id === 'model-' + field.typeMeta.relationModel,
-              )
-          if (!sourceModel || !targetModel) return fPre
-          if (
-            checkedKeys.indexOf(sourceModel.id) === -1 ||
-            checkedKeys.indexOf(targetModel.id) === -1
-          )
-            return fPre
-          const isTo = targetModel.x > sourceModel.x
-          const l = Object.keys(model.fields).length
-          const sourceAnchor = !isTo ? (i + 2) : (2 + i + l)
-          const targetAnchor = (isTo ? 0 : 1)
-          return [
-            ...fPre,
-            {
-              key:
-                'model-' +
-                model.key +
-                '~' +
-                +'~' +
-                'model-' +
-                field.typeMeta.relationModel,
-              source: 'model-' + model.key,
-              target: 'model-' + field.typeMeta.relationModel,
-              sourceAnchor,
-              // targetAnchor: sourceAnchor,
-              // targetAnchor:  model.key === field.typeMeta.relationModel ? (sourceAnchor - 1) : undefined,
-               targetAnchor:  model.key === field.typeMeta.relationModel ? (sourceAnchor - 1) : targetAnchor,
-               self : model.key === field.typeMeta.relationModel,
-              // targetAnchor,
-              fieldIndex: i,
-              fieldsLength: l,
-              // data: field,
-              tooltip: `<div>从 <span class='text'>${sourceModel?.data?.label}</span> 到 <span class='text'>${targetModel?.data?.label}</span> ${Relation[field.type]||field.type} 关系</div>`
-
-              type:
-                model.key === field.typeMeta.relationModel
-                  ? 'loop'
-                  :
-                  'console-line',
-              // color: 'black',
-              style: styleConfig.default.edge,
-              styleConfig,
-              // label: model.key === field.typeMeta.relationModel ? undefined : field.type,
-              // labelAutoRotate: true,
-              loopCfg: {
-                // position: 'top',
-                clockwise: true, // dist: 200,
-                dist: 100,
-              },
-            },
-          ]
-        } else return fPre
-      }, [])
-
-     return [
-      ...pre,
-      ...arrangeLink,
-      ...fieldLinks,
-    ]
-  }, [])
-  return links
-}