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

package/webapp/src/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import WebPdmPage from './page'
+import Pdm from './pdm'
+import { Tree } from './tree'
+export * from './type'
+import DvaModel from './page/dva-model'
+import { ErdPage } from './g6/model'
+import './style.less'
+
+export {
+  DvaModel,
+  ErdPage
+}
+
+const useAppContext = () => ({
+  tabsRouteContext: {
+    current: '/',
+  },
+  shellContext: {
+    setState: () => ({}),
+  },
+ })
+export default (props) => {
+    return <WebPdmPage ErdPage={ErdPage} Pdm={Pdm} Tree={Tree} useAppContext={useAppContext} {...props} />
+}

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

@@ -0,0 +1,70 @@
+
+import {  arrangeShow, init, load , modelEdit, modelReducers, onExpand  } from './reducer'
+import { initStyle } from './style'
+export interface IDict<T> {
+  [name: string]: T
+}
+
+const fieldMap = (m) => ({
+  key: m.key,
+  name: m.name,
+  moduleKey: m.moduleKey,
+  fields: Object.entries(m.fields).map(([k, v]: [string, any]) => ({
+    type: v.type,
+    key: v.key,
+    name: v.name,
+    originalKey: v.originalKey,
+    required: v.required,
+
+    typeMeta: v.typeMeta && {
+      type: v.typeMeta.type,
+      relationModel: v.typeMeta.relationModel,
+    },
+  })),
+  originalKey: m.originalKey,
+  aggregateRoot: m.aggregateRoot,
+  belongAggregate: m.belongAggregate,
+  // aggregateRoot:  m.aggregateRoot,
+  aggregateModelKey: m.aggregateModelKey,
+  type: m.type,
+})
+
+export default (({
+  namespace,
+}) => {
+  const { style, colors } = initStyle({primaryColor: 'black'})
+  const state = {
+     modules: [],
+     models: [],
+     showModel: null,
+     lockMinZoom: false,
+     showInsertModel: null,
+     currentModel: null,
+     expandedKeys: [],
+     checkedKeys: [],
+     centerModel: null,
+     search: null,
+     layouting : false,
+     isArrangeLayout: false,
+     fieldMap,
+     showNameOrLabel: false,
+     config : {
+      style,
+      namespace: 'erd',
+      topHeight: 48,
+      colors,
+     },
+    }
+  return {
+    namespace,
+    state,
+    reducers: {
+      onExpand,
+      modelEdit,
+      ...modelReducers,
+      arrangeShow,
+      init,
+      load,
+    },
+  }
+})

package/webapp/src/page/dva-model/reducer/arrange.tsx

@@ -0,0 +1,16 @@
+const getLayerRootModel = (models, rootKey, roots = []) => {
+  const rootModel = models.find((a) => a.key === rootKey)
+  const rootsRes = rootModel ? [...roots, rootKey] : roots
+  const isRoot = (rootModel.aggregateModelKey && rootModel.aggregateModelKey !== rootKey)
+  const rootsResList = isRoot ? getLayerRootModel(models, rootModel.aggregateModelKey, rootsRes) : rootsRes
+  return rootsResList
+ }
+
+export const arrangeShow = (ss, {model}) => {
+  // alert(model)
+  const roots = getLayerRootModel(ss.models, model, [])
+  // alert(JSON.stringify(roots))
+  const list = ss.models.filter((a) => (a.key === model ||  roots.indexOf(a.aggregateModelKey) >= 0)).map((a) => 'model-' + a.key)
+  return {...ss , checkedKeys: list, currentModel: model, isArrangeLayout: true}
+
+}

package/webapp/src/page/dva-model/reducer/index.tsx

@@ -0,0 +1,7 @@
+export * from './on-expand'
+export * from './arrange'
+import * as modelReducers from './model'
+export * from './init'
+export {
+  modelReducers,
+}

package/webapp/src/page/dva-model/reducer/init.tsx

@@ -0,0 +1,61 @@
+import Immer from 'immer'
+import { initStyle } from '../style'
+
+// const modules_name = 'modules'
+// const models_name = 'models'
+// const model_key = 'key'
+// const module_key = 'key'
+
+export const init = (ss, {
+  models,
+  modules,
+  currentModel,
+  primaryColor,
+}) => {
+  // tslint:disable-next-line: ban-comma-operator
+  return Immer(ss, (s) => {
+    s.currentModel = currentModel
+
+    if (models) {
+      s.models = models
+      s.checkedKeys = models.map((m) => 'model-' + m.key)
+    }
+
+    if (modules) {
+      s.modules = modules
+      s.expandedKeys = ['allmodels', ...modules.map((module) => 'module-' + module.key)]
+    }
+    if (primaryColor) {
+       const { style , colors } = initStyle({primaryColor})
+       s.config.style = style
+       s.config.colors = colors
+    }
+  })
+}
+
+export const load = (ss, {
+  models,
+  modules,
+  currentModel,
+  primaryColor,
+}) => {
+  // tslint:disable-next-line: ban-comma-operator
+  return Immer(ss, (s) => {
+    s.currentModel = currentModel
+
+    if (models) {
+      s.models = [...s.models, ...models]
+      s.checkedKeys = [...models.map((m) => 'model-' + m.key), ...s.checkedKeys]
+    }
+
+    if (modules) {
+      s.modules = [...s.modules, ...modules]
+      s.expandedKeys = [...s.expandedKeys, 'allmodels', ...modules.map((module) => 'module-' + module.key)]
+    }
+    if (primaryColor) {
+       const { style , colors } = initStyle({primaryColor})
+       s.config.style = style
+       s.config.colors = colors
+    }
+  })
+}

package/webapp/src/page/dva-model/reducer/model.tsx

@@ -0,0 +1,126 @@
+import _ from 'lodash'
+export const layouting = (sss, arg) => {
+  return { ...sss, layouting: arg.layouting }
+}
+
+export const setArrangeLayout = (sss, { isArrangeLayout }) => {
+  return { ...sss, isArrangeLayout }
+}
+
+export const openInsertModel = (ss) => {
+  return { ...ss, showInsertModel: 'new' }
+}
+export const centerModel = (ss, { model }) => {
+
+  if (!ss.checkedKeys.find((a) => a === model)) {
+    return { ...ss, currentModel: model, checkedKeys : [...ss.checkedKeys, model ], centerModel: model }
+  } else {
+  // alert(model)
+    return { ...ss, currentModel: model , centerModel: model }
+  }
+}
+export const currentModel = (ss, { model }) => {
+  //  return ss
+  //  alert(JSON.stringify(ss.checkedKeys))
+   if (!ss.checkedKeys.find((a) => a === model)) {
+    return { ...ss, currentModel: model, checkedKeys : [...ss.checkedKeys, model ] }
+  } else {
+    // alert(model)
+    return { ...ss, currentModel: model }
+  }
+}
+export const closeModel = (ss) => {
+  return { ...ss, showModel: null }
+}
+
+export const delModel = (ss, { model }) => {
+  // alert(model)
+  // if( model === ss.currentModel) {
+  //   return {  ...ss    }
+  // }
+  // return { ...ss, showModel: null }
+
+  const models = ss.models.filter((a) =>  (('model-' + a.key) !== model))
+  return {  ...ss , models , checkedKeys : ss.checkedKeys.filter((a) => a !== model), currentModel : undefined}
+
+}
+
+export const delModule = (ss, { model }) => {
+  // alert(model)
+  // if( model === ss.currentModel) {
+  //   return {  ...ss    }
+  // }
+  // return { ...ss, showModel: null }
+  const modules = ss.modules.filter((a) => ('module-' + a.key) !== model)
+  const models = ss.models.filter((a) =>  (('module-' + a.moduleKey) !== model))
+  return {  ...ss , models , modules,  checkedKeys : ss.checkedKeys.filter((a) => a !== model), currentModel : undefined}
+
+}
+
+export const closeInsertModel = (ss) => {
+  return { ...ss, showInsertModel: null }
+}
+
+export const onCheck = (ss, { checkKeys }) => {
+  if (checkKeys && checkKeys.find && checkKeys.find((ck) => ck === ss.currentModel)) {
+    return { ...ss,
+             checkedKeys: checkKeys,
+             currentModel: null,
+    }
+  } else return { ...ss,
+                  checkedKeys: checkKeys,
+  }
+}
+export const search = (ss, { text }) => {
+  return { ...ss,
+           search: text,
+           currentModel: null,
+  }
+}
+
+export const onCheckByModule = (ss, { checkKeys, moduleKey}) => {
+  const modelsElse = ss.models.filter((a) =>  !!moduleKey && ((a.moduleKey) !== moduleKey)).map(a=>'model-'+a.key)
+  const modelFIlterElse = _.intersection(ss.checkedKeys, modelsElse)
+  const checkedKeys = [...modelFIlterElse, ...checkKeys]
+  return { ...ss,
+    checkedKeys,
+    currentModel: checkedKeys.find(k => k === ss.currentModel) ? ss.currentModel : null,
+  }
+}
+
+export const onCheckByModuleAll = (ss, { moduleKey }) => {
+  const modelsElse = ss.models.filter((a) =>  !!moduleKey && ((a.moduleKey) !== moduleKey)).map(a=>'model-'+a.key)
+  const modelFIlterElse = _.intersection(ss.checkedKeys, modelsElse)
+  const modelsKeys = ss.models.filter((a) =>  !moduleKey || ((a.moduleKey) === moduleKey)).map(a=>'model-'+a.key)
+  const checkedKeys = [...modelFIlterElse, ...modelsKeys]
+  return { ...ss,
+    checkedKeys,
+    currentModel: checkedKeys.find(k => k === ss.currentModel) ? ss.currentModel : null,
+  }
+}
+
+export const onCheckByModuleAllCancle = (ss, { moduleKey }) => {
+  const modelsElse = ss.models.filter((a) =>  !!moduleKey && ((a.moduleKey) !== moduleKey)).map(a=>'model-'+a.key)
+  const modelFIlterElse = _.intersection(ss.checkedKeys, modelsElse)
+  // const modelsKeys = ss.models.filter((a) =>  !moduleKey || ((a.moduleKey) === moduleKey)).map(a=>'model-'+a.key)
+  const checkedKeys = [...modelFIlterElse]
+  return { ...ss,
+    checkedKeys,
+    currentModel: checkedKeys.find(k => k === ss.currentModel) ? ss.currentModel : null,
+  }
+}
+
+export const lockMinZoom = (ss, { lockMinZoom }) => {
+  //  alert(lockMinZoom)
+  return {
+    ...ss,
+    lockMinZoom
+  }
+}
+
+export const showNameOrLabel = (ss, {showNameOrLabel}) => {
+  return {
+    ...ss,
+    showNameOrLabel
+  }
+}

package/webapp/src/page/dva-model/reducer/on-expand.tsx

@@ -0,0 +1,27 @@
+import Immer from 'immer'
+
+export const onExpand  =  (ss, { expanded, node }) => {
+  const resData = Immer(ss, (s) => {
+    // tslint:disable-next-line: prefer-conditional-expression
+    if (expanded) {
+      s.expandedKeys = [...s.expandedKeys, node.props.eventKey]
+    } else {
+      s.expandedKeys = s.expandedKeys.filter((a) => a !== node.props.eventKey)
+    }
+  })
+  return resData
+}
+
+export const openModel = (ss) => {
+  return { ...ss,
+           showModel: ss.currentModel,
+  }
+}
+
+export const modelEdit  = (ss, {
+  model,
+}) => {
+  return { ...ss,
+           showModel: model,
+  }
+}

package/webapp/src/page/dva-model/style.tsx

@@ -0,0 +1,88 @@
+
+export  const initStyle = ({primaryColor}) => {
+   const colors = {
+    // blue : '#495D9E',
+
+    // get blue() {
+    //   const res = (window.SYS_backEndConfig && window.SYS_backEndConfig.STYLE_PRIMARY_COLOR)  || '#495D9E'
+    //   if (_styleConfigLazy) {
+    //   _styleConfigLazy.selected.node.stroke = res
+    //   _styleConfigLazy.default.edge.stroke = res
+    //  }
+    //   return res
+    // // #0083EE
+    // },
+    // blue : window.SYS_backEndConfig && window.SYS_backEndConfig.PRESET_CSS_URL  ? '#0083EE' : '#495D9E',
+    // #0083EE
+    blue: primaryColor,
+    white: '#FFFFFF',
+    head: 'rgba(7,10,26,0.06)',
+    black: 'black',
+  }
+
+   const style = {
+    naviWidth: 370,
+    default: {
+      node: {
+        fill: '#FFFFFF',
+        // shadowColor: 'rgba(0,0,0,0.06)',
+        shadowBlur: 15,
+        shadowOffsetX: 8,
+        shadowOffsetY: 8,
+        radius: 10,
+        // stroke: undefined,
+        lineWidth: 4 ,
+        opacity: 0.8,
+        stroke: 'black',
+      },
+      edge: {
+        lineWidth: 2,
+        size: 2,
+        lineAppendWidth: 4,
+        endArrow: {
+          path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
+          d: 4,
+        },
+        opacity: 0.2,
+        radius: 5,
+        labelCfg: {
+          autoRotate: true,   // 使文本随边旋转
+          style: {
+            fontSize: 34,
+          },
+        },
+        stroke: 'rgba(11,108,149)',
+      },
+    },
+    inactive: {
+      edge: {
+        stroke: 'red',
+      }
+    },
+    selected: {
+      node: {
+        stroke: 'rgba(11,108,149)',
+      },
+    },
+    active: {
+      edge: {
+        stroke: 'red',
+      }
+    },
+    noSelected: {
+      node: {
+        stroke: 'red',
+      },
+    },
+    isNoModule : {
+      node: {
+        opacity: 0.2,
+      },
+    },
+  }
+
+   return {
+    colors,
+    style,
+  }
+}

package/webapp/src/page/hooks/callback.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef } from 'react'
+import Stats from 'stats.js'
+export const useLoadData = ({
+  dispatch,
+  namespace,
+  getModels,
+  getModules,
+  primaryColor,
+}) => {
+  const loadData = useCallback(() => {
+    if (getModels && getModules) {
+      const fun = async () => {
+        const data = await getModels({})
+        const modules = await getModules({})
+        dispatch({
+          type: `${namespace}/init`,
+          modules: modules.res,
+          models: data.res,
+          primaryColor,
+        })
+      }
+
+      fun()
+    }
+  }, [dispatch, getModels, getModules])
+  return {
+    loadData,
+  }
+}
+export const useFpsHook = () => {
+  const fpsRef = useRef(null)
+  useEffect(() => {
+    if (fpsRef.current && window.SYS_backEndConfig && window.SYS_backEndConfig.ERD_FPS) {
+      const stats = new Stats() // alert(stats.dom)
+
+      stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
+
+      fpsRef.current.appendChild(stats.dom)
+      stats.dom.style.position = 'relative'
+
+      function animate() {
+        stats.begin() // monitored code goes here
+
+        stats.end()
+        requestAnimationFrame(animate)
+      }
+
+      requestAnimationFrame(animate)
+    }
+  }, [])
+  return {
+    fpsRef,
+  }
+}

package/webapp/src/page/hooks/fullscreen.tsx

@@ -0,0 +1,34 @@
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+export const usefullScreen = (useAppContext) => {
+  const { shellContext, tabsRouteContext } = useAppContext()
+  const [layouted, setLayouted] = useState(false)
+  const [change, setChange] = useState(false)
+  useEffect(() => {
+    shellContext.setState({
+      fullScreen: true,
+    })
+    setLayouted(true)
+  }, [])
+  useEffect(() => {
+    shellContext.setState({
+      fullScreen: tabsRouteContext.current === '/model-map',
+    })
+    return () => {
+      shellContext.setState({
+        fullScreen: false,
+      })
+    }
+  }, [tabsRouteContext.current === '/model-map'])
+  return {
+    layouted,
+    change,
+  }
+}

package/webapp/src/page/hooks/pagehooks.tsx

@@ -0,0 +1,127 @@
+import { useDispatch, useSelector } from '../../hook'
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+// import { modelConfig } from '../config'
+import { createLinks, getNodes, layOutNodesByG6  } from '../util'
+import { usefullScreen } from './fullscreen'
+
+export const useLocalHooks = ({namespace, useAppContext}) => {
+  const graphRef = useRef(null)
+  // const { shellContext  } = useAppContext()
+  // const { loadData } =  useLoadData({dispatch , getTrantorMetaAllModels, getTrantorMetaModules})
+
+  const { layouted, change } = usefullScreen(useAppContext)
+  const {
+    models,
+    modules,
+    checkedKeys,
+    showModel,
+    currentModel,
+    showInsertModel,
+    search,
+    layouting,
+    isArrangeLayout,
+    fieldMap,
+    config: { topHeight, style, colors },
+  } = useSelector((s) => s[namespace])
+  const newModels = useMemo(() => models.map(fieldMap).map((a) => ({...a, isShow: (!search || a.name.indexOf(search) >= 0)})), [
+    models, search, checkedKeys,
+  ])
+
+  const [height] = useState(
+    document.documentElement.clientHeight ||
+      document.body.clientHeight - topHeight,
+  )
+  const [nodeState, setNodeState] = useState([])
+  const [edgeState, setEdgeState] = useState([])
+  const nodes = getNodes(newModels, checkedKeys, style)
+
+  const edgesRes = createLinks(
+      newModels,
+      nodes,
+      checkedKeys,
+      style,
+    )
+
+  const edges =
+  nodes.length >= 0 ? edgesRes.concat(nodes.filter((a) => !a.isSys).map((a) => ({
+      key:
+                  // 'model-' +
+                  a.id +
+                  '~' +
+                  +'~' +
+                  'model-SYS-CENTER-POINT',
+
+      source : a.id,
+      visible: false,
+      isSys : true,
+      style: {
+        visible: false,
+      },
+      target: 'model-SYS-CENTER-POINT',
+      type: 'console-line',
+
+    }))) :
+    edgesRes
+  const dispatch = useDispatch()
+  const setLayouting =  useCallback((layoutingSet) => {
+    dispatch({
+      type: `${namespace}/layouting`,
+      layouting: layoutingSet,
+    })
+  }, [])
+  useEffect(() => {
+      // alert(1)
+      setLayouting(true)
+      setImmediate(() => {
+        // layOutNodesByG6(nodes, edges, modules, setNodeState, setEdgeState, setLayouting, isArrangeLayout)
+        setEdgeState(edges)
+        setNodeState(nodes)
+       
+        setLayouting(false)
+       }, 10)
+  }, [newModels, checkedKeys, isArrangeLayout, search])
+
+  const graph = useMemo(() =>  ({
+    edges : edgeState,
+    nodes : nodeState,
+  }), [nodeState])
+
+  return {
+    height,
+    graph,
+    models: newModels,
+    checkedKeys,
+    graphRef,
+    showModel,
+    currentModel,
+    layouted,
+    change,
+    showInsertModel,
+    search,
+    modules,
+    layouting,
+    style,
+    colors,
+  }
+}
+
+// const createGroups = (modules) => {
+//   return modules.map((m) => {
+//     return {
+//       id: `module-${m.key}`,
+//       title: {
+//       text: m.name,
+//       fontSize: 35,
+//       stroke: '#444',
+//       offsetX: 0,
+//       offsetY: 0,
+//       },
+//     }
+//   })
+// }

package/webapp/src/page/hooks/resize.tsx

@@ -0,0 +1,20 @@
+
+import { useCallback, useEffect, useState } from 'react'
+
+export const useResizeUpdate = () => {
+
+  const [_, update] = useState(0)
+
+  const onResize = useCallback(() => {
+    // alert()
+    update(+new Date())
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize)
+    return (() => {
+        window.removeEventListener('resize', onResize)
+    })
+
+})
+}