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

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

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

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

package/webapp/src/page/util/layout-nodes/index.tsx

@@ -0,0 +1,185 @@
+import G6 from '@antv/g6'
+import dagre from 'dagre'
+
+const setNodeXY = (nodesDict, node) => {
+  const { id } = node
+
+  if (nodesDict[id]) {
+    node.x = nodesDict[id].x
+    node.y = nodesDict[id].y
+    return true
+  } 
+  return false
+}
+
+const getLength  = (length) => {
+  return length >= 20 ? length : 20
+ }
+
+export const layOutNodesByG6 = (nodes: any[], edges: any[], groups: any[], setNodeState, setEdgeState, setLayouting, isArrangeLayout) => {
+  // layOutNodesByG6Force(nodes , edges, [])
+  if (isArrangeLayout) {
+     layOutNodesByG6Force(nodes, edges.filter((a) => a.arrangeLink) , [])
+     if (setNodeState) {
+      setEdgeState(edges.filter((a) => !a.isSys))
+      setNodeState([...nodes])
+      if (setLayouting) setLayouting(false)
+    }
+  } else {
+  const subgraphLayout = new G6.Layout.force({
+    // center: [500, 450],
+    // nodeSize: 700,
+    // nodeStrength: -30,
+    // linkDistance:200,
+    nodeSpacing: -180 ,
+    preventOverlap: true,
+    onLayoutEnd: () => {
+      alert('onLayoutEnd')
+      if (setNodeState) {
+        setEdgeState(edges)
+        setNodeState([...nodes])
+        if (setLayouting) setLayouting(false)
+      }
+
+       },
+    // workerEnabled: false,
+    workerEnabled: true,
+  })
+
+  // 初始化布局，灌入子图数据
+  subgraphLayout.init({
+    nodes,
+    edges,
+  })
+
+  // 执行布局
+  subgraphLayout.execute()
+  console.log([nodes, edges])
+
+  // const graphString = sessionStorage.getItem('console-erd-graph')
+  // // alert('force layout')
+  // const nodesDict = graphString && JSON.parse(graphString)
+  // nodes.forEach((node) => {
+  //   if (nodesDict) {
+  //      setNodeXY(nodesDict, node)
+  //   }
+  // })
+
+  // 图实例根据数据更新节点位置
+  // graph.positionsAnimate()
+  return [nodes, edges]
+}
+ }
+
+export const layOutNodesByG6Force  = (nodes: any[], edges: any[], groups: any[]) => {
+  const subgraphLayout = new G6.Layout.dagre({
+    // center: [500, 450],
+    workerEnabled: true,
+  })
+
+  // 初始化布局，灌入子图数据
+  subgraphLayout.init({
+    nodes,
+    edges,
+  })
+
+  // 执行布局
+  subgraphLayout.execute()
+
+  const graphString = sessionStorage.getItem('console-erd-graph')
+  alert(graphString)
+  const nodesDict = graphString && JSON.parse(graphString)
+  nodes.forEach((node) => {
+    if (nodesDict) {
+       setNodeXY(nodesDict, node)
+    }
+  })
+
+  // 图实例根据数据更新节点位置
+  // graph.positionsAnimate()
+  return [nodes, edges]
+ }
+
+export const layOutNodes = (nodes: any[], edges: any[], groups: any[]) => {
+  // alert(nodes.length)
+  let g = new dagre.graphlib.Graph()
+  g.setGraph({
+    // ranker: 'network-simplex',
+    // acyclicer: undefined,
+    // rankdir: 'LR',
+    // align: 'UL',
+    // ranksep: 500,
+  })
+  g.setDefaultEdgeLabel((v, w) => ({
+    label: v + '~' + w,
+  }))
+  nodes.filter((a) => !a.isSys).forEach((node) => {
+    const { config, data } = node
+    g.setNode(node.id, {
+      label: node.id,
+      width: (config.width / 6) * 6,
+      height:
+        ((config.headerHeight +  getLength(data.fields.length) * config.fieldHeight) / 6) *
+        6,
+    })
+  })
+  edges.forEach((edge) => {
+    g.setEdge(edge.source, edge.target)
+  })
+
+  // groups.forEach((group) => {
+
+  //   const gNodes = nodes.filter((a) => a.moduleKey === group.key)
+  //   if (gNodes.length > 1) {
+  //     gNodes.forEach((n, i) => {
+  //       if (i < (gNodes.length - 1)) {
+  //       // g.setEdge(gNodes[i].id, gNodes[i + 1].id)
+  //       g.setEdge(gNodes[0].id, n.id)
+  //       }
+  //     })
+  //   }
+
+  // })
+  dagre.layout(g)
+  const graphString = sessionStorage.getItem('console-erd-graph')
+  const nodesDict = graphString && JSON.parse(graphString)
+  nodes.forEach((node) => {
+    if (nodesDict) {
+      
+      const isStorage = setNodeXY(nodesDict, node)
+      if (isStorage) return
+    }
+
+    node.x = g.node(node.id).x
+    node.y = g.node(node.id).y
+  }) 
+  
+  
+  // -------
+
+  // edges.forEach((edge) => {
+  //   const { source, target, fieldIndex, fieldsLength } = edge
+  //   const i = fieldIndex
+  //   const l = fieldsLength
+  //   const sourceModel = nodes.find((a) => a.id === source)
+  //   const targetModel = nodes.find((a) => a.id === target)
+  //   const isTo = sourceModel && targetModel && targetModel.x > sourceModel.x //  const l = sourceModel.data.fields.length
+  //   if (sourceModel !== targetModel) {
+  //      edge.sourceAnchor = !isTo ? (i + 2) : (2 + i + l)
+  //      // edge.targetAnchor = isTo ? 0 : 1
+  //      edge.targetAnchor  = undefined
+  //   }
+  //   // const { points } = g.edge({v: sourceModel.id , w: targetModel.id })
+  //   // edge.controlPoints = points
+  //   // edge.controlPoints = g.edge(edge)
+  // })
+
+//   g.edges().forEach((e) => {
+//     console.log('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)))
+// })
+
+  return {
+    nodes: nodes.reduce((pre, item) => ({ ...pre, [item.id]: item }), {}),
+    edges,
+  }
+}

package/webapp/src/pdm/index.tsx

@@ -0,0 +1,50 @@
+import { InboxOutline } from '@ant-design/icons'
+import { message, Upload } from 'antd'
+import { useDispatch } from '../hook'
+import React from 'react'
+const PdmToJson = require('./pdm-json')
+import { ConvertTo } from './util'
+
+export default ({children}) => {
+  const dispatch =  useDispatch()
+
+  const props = {
+    name: 'file',
+    multiple: true,
+    transformFile(file) {
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.readAsText(file)
+        reader.onload =  async (a) => {
+          // alert(a.target.result)
+          const aa = await PdmToJson(a.target.result)
+          console.log(aa)
+          const erds = ConvertTo(aa)
+          console.log(erds)
+          dispatch({
+            type: `${'erd'}/load`,
+            ...erds,
+          })
+        }
+      })
+    },
+    onChange(info) {
+      const { status } = info.file
+      if (status !== 'uploading') {
+        console.log(info.file, info.fileList)
+     }
+      if (status === 'done') {
+        message.success(`${info.file.name} file uploaded successfully.`)
+     } else if (status === 'error') {
+        message.error(`${info.file.name} file upload failed.`)
+     }
+    },
+  }
+
+  return   (
+  <Upload {...props}>
+  {children}
+</Upload>
+ )
+}
+