@nocobase/plugin-graph-collection-manager 0.10.1-alpha.1 → 0.11.1-alpha.1

package/lib/client/style.js

@@ -3,216 +3,231 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableNameClass = exports.tableBtnClass = exports.nodeSubtreeClass = exports.headClass = exports.graphCollectionContainerClass = exports.entityContainer = exports.collectionListClass = exports.collectiionPopoverClass = exports.addButtonClass = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+exports.default = void 0;
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-const nodeSubtreeClass = (0, _css().css)`
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-`;
-exports.nodeSubtreeClass = nodeSubtreeClass;
-const addButtonClass = (0, _css().css)`
-  flex-shrink: 0;
-  padding: 2em 0;
-`;
-exports.addButtonClass = addButtonClass;
-const entityContainer = (0, _css().css)`
-  width: 250px;
-  height: 100%;
-  border-radius: 2px;
-  background-color: #fff;
-  border: 0;
-  &:hover {
-    box-shadow: 0 1px 2px -2px rgb(0 0 0 / 16%), 0 3px 6px 0 rgb(0 0 0 / 12%), 0 5px 12px 4px rgb(0 0 0 / 9%);
-  }
-  .body {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    cursor: pointer;
-    .morePorts {
-      max-height: 300px;
-      overflow: auto;
-    }
-    .body-item {
-      display: inline-table;
-      width: 100%;
-      max-width: 250px;
-      height: 40px;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.85);
-      height: 40px;
-      border-top: 1px solid #f0f0f0;
-      text-overflow: ellipsis;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      .field-operator {
-        display: none;
+const useStyles = (0, _client().createStyles)(({
+  token,
+  css
+}) => {
+  return {
+    // 右下角的小画布
+    graphMinimap: css`
+      .x6-widget-minimap {
+        background-color: ${token.colorBgContainer};
+      }
+    `,
+    addButtonClass: css`
+      flex-shrink: 0;
+      padding: 2em 0;
+    `,
+    entityContainer: css`
+      .btn-del {
+        border-color: transparent;
+        background-color: ${token.colorErrorBg};
+        color: ${token.colorErrorText};
+        height: 20px;
+        width: 20px;
+        &:hover {
+          background-color: ${token.colorErrorBgHover};
+        }
       }
+      .btn-add {
+        background: ${token.colorSuccessBg};
+        border-color: transparent;
+        color: ${token.colorSuccessText};
+        width: 20px;
+        &:hover {
+          background-color: ${token.colorSuccessBgHover};
+        }
+      }
+      .btn-edit {
+        color: ${token.colorText};
+        display: flex;
+        &:hover {
+          background: ${token.colorBgTextHover};
+        }
+      }
+      .btn-edit-in-head {
+        border-color: transparent;
+        color: ${token.colorText};
+        height: 20px;
+        width: 22px;
+        margin: 0px 5px 4px;
+        line-height: 25px;
+        &:hover {
+          background: ${token.colorBgTextHover};
+        }
+      }
+      width: 250px;
+      height: 100%;
+      border-radius: ${token.borderRadiusLG}px;
+      background-color: ${token.colorBgContainer};
+      border: 0;
+      overflow: hidden;
       &:hover {
-        .field-operator {
+        box-shadow: ${token.boxShadowTertiary};
+      }
+      .body {
+        width: 100%;
+        height: 100%;
+        background-color: ${token.colorBgContainer};
+        cursor: pointer;
+        .morePorts {
+          max-height: 300px;
+          overflow: auto;
+        }
+        .body-item {
+          display: inline-table;
+          width: 100%;
+          max-width: 250px;
+          height: 40px;
+          font-size: 14px;
+          color: ${token.colorText};
+          border-top: 1px solid ${token.colorBorderSecondary};
+          text-overflow: ellipsis;
           display: flex;
-          flex-direction: row-reverse;
-          height: 32px;
-          line-height: 32px;
-          z-index: 999;
-          cursor: pointer;
-          text-align: right;
-          background: #fff;
-          padding-right: 3px;
-          span {
-            margin: 3px;
-            margin-left: 4px;
-            padding: 3px;
-            height: 20px;
-            width: 20px;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+
+          .field-operator {
+            display: none;
           }
-          .btn-del {
-            border-color: transparent;
-            color: rgb(78 89 105);
-            height: 20px;
-            width: 20px;
-            &:hover {
-              background-color: rgb(229 230 235);
+          &:hover {
+            .field-operator {
+              display: flex;
+              flex-direction: row-reverse;
+              height: 32px;
+              line-height: 32px;
+              z-index: 999;
+              cursor: pointer;
+              text-align: right;
+              background: ${token.colorBgContainer};
+              padding-right: 3px;
+              span {
+                margin: 3px;
+                margin-left: 4px;
+                padding: 3px;
+                height: 20px;
+                width: 20px;
+              }
+              .btn-override {
+                border-color: transparent;
+                width: 20px;
+                color: ${token.colorText};
+                &:hover {
+                  background-color: ${token.colorBgTextHover};
+                }
+              }
+              .btn-view {
+                border-color: transparent;
+                color: ${token.colorText};
+                width: 20px;
+              }
+              .btn-view:hover {
+                background: ${token.colorBgTextHover};
+              }
             }
-          }
-          .btn-add {
-            background: rgb(232 255 234);
-            border-color: transparent;
-            color: rgb(0, 180, 42);
-            width: 20px;
-          }
-          .btn-edit {
-            color: rgba(0, 0, 0, 0.85);
-            display: flex;
-          }
-          .btn-edit:hover {
-            background: rgb(229 230 235);
-          }
-          .btn-override {
-            border-color: transparent;
-            width: 20px;
-            color: rgba(0, 0, 0, 0.85);
-            &:hover {
-              background-color: rgb(229 230 235);
+            .field_type {
+              display: none;
             }
           }
-          .btn-view {
-            border-color: transparent;
-            color: rgba(0, 0, 0, 0.85);
-            width: 20px;
+
+          .name {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            margin-left: 8px;
           }
-          .btn-view:hover {
-            background: rgb(229 230 235);
+
+          .type {
+            color: ${token.colorTextTertiary};
+            margin-right: 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
           }
         }
-        .field_type {
-          display: none;
-        }
       }
-
-      .name {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        margin-left: 8px;
+    `,
+    headClass: css`
+      height: 50px;
+      font-size: 14px;
+      font-weight: 500;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      background: ${token.colorFillAlter};
+      color: ${token.colorTextHeading};
+      padding: 0 8px;
+    `,
+    tableNameClass: css`
+      max-width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    `,
+    tableBtnClass: css`
+      display: flex;
+      span {
+        cursor: pointer;
       }
-
-      .type {
-        color: rgba(0, 0, 0, 0.45);
-        margin-right: 8px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-    }
-  }
-`;
-exports.entityContainer = entityContainer;
-const headClass = (0, _css().css)`
-  height: 50px;
-  font-size: 14px;
-  font-weight: 500;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background: #fafafa;
-  color: rgb(29 33 41);
-  padding: 0 8px;
-  border-radius: 3px;
-`;
-exports.headClass = headClass;
-const tableNameClass = (0, _css().css)`
-  max-width: 80%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 500;
-`;
-exports.tableNameClass = tableNameClass;
-const tableBtnClass = (0, _css().css)`
-  display: flex;
-  span {
-    cursor: pointer;
-  }
-`;
-exports.tableBtnClass = tableBtnClass;
-const collectiionPopoverClass = (0, _css().css)`
-  div.field-content {
-    font-size: 14px;
-    color: rgb(134 144 156);
-    opacity: 0.8;
-    display: block;
-    .field-type {
-      color: #333;
+    `,
+    collectionPopoverClass: css`
+      div.field-content {
+        font-size: 14px;
+        color: ${token.colorTextSecondary};
+        opacity: 0.8;
+        display: block;
+        .field-type {
+          color: ${token.colorText};
+          float: right;
+        }
+      }
+    `,
+    collectionListClass: css`
       float: right;
-    }
-  }
-`;
-exports.collectiionPopoverClass = collectiionPopoverClass;
-const collectionListClass = (0, _css().css)`
-  float: right;
-  position: fixed;
-  margin-top: 24px;
-  right: 24px;
-  z-index: 1000;
-  .trigger {
-    float: right;
-    margin: 2px 4px;
-    font-size: 16px;
-  }
-  .ant-input {
-    margin: 4px;
-  }
-  .ant-menu-inline {
-    border-top: 1px solid #f0f0f0;
-  }
-  .ant-layout-sider {
-    margin-top: 24px;
-  }
-  .ant-menu-item {
-    height: 32px;
-  }
-  .ant-btn {
-    border: 0;
-  }
-`;
-exports.collectionListClass = collectionListClass;
-const graphCollectionContainerClass = (0, _css().css)`
-  overflow: hidden;
-  .x6-graph-scroller {
-    height: calc(100vh) !important;
-    width: calc(100vw) !important;
-  }
-`;
-exports.graphCollectionContainerClass = graphCollectionContainerClass;
+      position: fixed;
+      margin-top: 24px;
+      right: 24px;
+      z-index: 1000;
+      .trigger {
+        float: right;
+        margin: 2px 4px;
+        font-size: 16px;
+      }
+      .ant-input {
+        margin: 4px;
+      }
+      .ant-menu-inline {
+        border-top: 1px solid ${token.colorBorderSecondary};
+      }
+      .ant-layout-sider {
+        margin-top: 24px;
+      }
+      .ant-menu-item {
+        height: 32px;
+      }
+      .ant-btn {
+        border: 0;
+      }
+    `,
+    graphCollectionContainerClass: css`
+      overflow: hidden;
+      .x6-graph-scroller {
+        height: calc(100vh) !important;
+        width: calc(100vw) !important;
+      }
+    `
+  };
+});
+var _default = useStyles;
+exports.default = _default;

package/lib/client/utils.d.ts

@@ -1,12 +1,12 @@
 export declare const useGCMTranslation: () => import("react-i18next").UseTranslationResponse<"graph-collection-manager", undefined>;
-export declare const getInheritCollections: (collections: any, name: any) => any[];
+export declare const getInheritCollections: (collections: any, name: any) => any;
 export declare const getChildrenCollections: (collections: any, name: any) => any[];
 export declare const formatData: (data: any) => {
     nodesData: any;
-    edgesData: any[];
+    edgesData: any;
     inheritEdges: any[];
 };
-export declare const formatPortData: (ports: any) => import("lodash").Dictionary<any[]>;
+export declare const formatPortData: (ports: any) => any;
 export declare const formatInheritEdgeData: (collections: any) => any[];
 export declare const getDiffNode: (newNodes: any, oldNodes: any) => any[];
 export declare const getDiffEdge: (newEdges: any, oldEdges: any) => any[];

package/lib/client/utils.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGCMTranslation = exports.getPopupContainer = exports.getInheritCollections = exports.getDiffNode = exports.getDiffEdge = exports.getChildrenCollections = exports.formatPortData = exports.formatInheritEdgeData = exports.formatData = void 0;
-function _lodash() {
-  const data = require("lodash");
-  _lodash = function _lodash() {
+function _client() {
+  const data = require("@nocobase/utils/client");
+  _client = function _client() {
     return data;
   };
   return data;
@@ -23,6 +23,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const groupBy = _client().lodash.groupBy,
+  reduce = _client().lodash.reduce,
+  uniq = _client().lodash.uniq,
+  uniqBy = _client().lodash.uniqBy;
 const shape = {
   ER: 'er-rect',
   EDGE: 'edge'
@@ -45,7 +49,7 @@ const getInheritCollections = (collections, name) => {
         }
       }
     }
-    return (0, _lodash().uniq)(parents);
+    return uniq(parents);
   };
   return getParents(name);
 };
@@ -74,7 +78,7 @@ const formatData = data => {
     const ports = [];
     const totalFields = [...item.fields];
     const inheritCollections = getInheritCollections(data, item.name);
-    const inheritedFields = (0, _lodash().reduce)(inheritCollections, (result, value) => {
+    const inheritedFields = reduce(inheritCollections, (result, value) => {
       var _data$find;
       const arr = result;
       const parentFields = (_data$find = data.find(k => k.name === value)) === null || _data$find === void 0 ? void 0 : _data$find.fields.map(v => {
@@ -84,7 +88,7 @@ const formatData = data => {
       });
       return arr.concat(parentFields);
     }, []);
-    (0, _lodash().uniqBy)(totalFields.concat(inheritedFields), 'name').forEach(field => {
+    uniqBy(totalFields.concat(inheritedFields), 'name').forEach(field => {
       field.uiSchema && ports.push(_objectSpread({
         id: field.key,
         group: 'list'
@@ -114,7 +118,7 @@ const formatData = data => {
 };
 exports.formatData = formatData;
 const formatPortData = ports => {
-  const portsData = (0, _lodash().groupBy)(ports, v => {
+  const portsData = groupBy(ports, v => {
     if (v.isForeignKey || v.primaryKey || ['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)) {
       return 'initPorts';
     } else {
@@ -168,7 +172,7 @@ const formatInheritEdgeData = collections => {
           ref: 'labelText',
           refWidth: '100%',
           refHeight: '100%',
-          fill: '#f0f2f5'
+          fill: 'var(--nb-box-bg)'
         }
       },
       position: {
@@ -258,7 +262,7 @@ const formatEdgeData = (data, targetTables, tableData) => {
               refWidth: '100%',
               refHeight: '100%',
               stroke: '#ddd',
-              fill: '#f0f2f5',
+              fill: 'var(--nb-box-bg)',
               strokeWidth: 1,
               rx: 10,
               ry: 10
@@ -297,7 +301,7 @@ const formatEdgeData = (data, targetTables, tableData) => {
               refWidth: '100%',
               refHeight: '100%',
               stroke: '#ddd',
-              fill: '#f0f2f5',
+              fill: 'var(--nb-box-bg)',
               rx: 10,
               ry: 10,
               strokeWidth: 1
@@ -425,7 +429,7 @@ const formatEdgeData = (data, targetTables, tableData) => {
       }
     }
   }
-  return (0, _lodash().uniqBy)(edges, 'id');
+  return uniqBy(edges, 'id');
 };
 const getRelationship = relatioship => {
   switch (relatioship) {

package/package.json

@@ -4,18 +4,39 @@
   "displayName.zh-CN": "数据库可视化管理",
   "description": "database collection manage",
   "description.zh-CN": "数据库管理。",
-  "version": "0.10.1-alpha.1",
+  "version": "0.11.1-alpha.1",
   "license": "AGPL-3.0",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./lib/server/index.js",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "README.zh-CN.md",
+    "CHANGELOG.md",
+    "server.js",
+    "server.d.ts",
+    "client.js",
+    "client.d.ts"
+  ],
   "dependencies": {
     "@antv/x6": "^1.9.0",
     "@antv/x6-react-shape": "^1.6.2",
+    "ahooks": "^3.7.2",
     "dagre": "^0.8.5"
   },
   "devDependencies": {
-    "@nocobase/client": "0.10.1-alpha.1",
-    "@nocobase/test": "0.10.1-alpha.1"
+    "@ant-design/icons": "^5.1.4",
+    "@formily/react": "2.2.26",
+    "@formily/reactive": "2.2.26",
+    "@formily/shared": "2.2.26",
+    "@nocobase/client": "0.11.1-alpha.1",
+    "@nocobase/database": "0.11.1-alpha.1",
+    "@nocobase/server": "0.11.1-alpha.1",
+    "@nocobase/test": "0.11.1-alpha.1",
+    "@nocobase/utils": "0.11.1-alpha.1",
+    "antd": "^5.6.4",
+    "react": "^18.2.0",
+    "react-i18next": "^11.15.1"
   },
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "gitHead": "9ed1dba520bc5f3a7cb1255ea8d92ccbefc11bc8"
 }

package/server.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/server';
-export { default } from './lib/server';
+export * from './src/server';
+export { default } from './src/server';
 

package/server.js

@@ -1,30 +1 @@
-"use strict";
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _index = _interopRequireWildcard(require("./lib/server"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/server/index.js');

package/src/client/GraphCollectionProvider.tsx

@@ -0,0 +1,33 @@
+import { PluginManagerContext, SettingsCenterContext, SettingsCenterProvider } from '@nocobase/client';
+import React, { useContext } from 'react';
+import { GraphCollectionPane } from './GraphCollectionShortcut';
+import { useGCMTranslation } from './utils';
+
+export const GraphCollectionProvider = React.memo((props) => {
+  const ctx = useContext(PluginManagerContext);
+  // i18n.addResources('en-US', 'graphPositions', enUS);
+  // i18n.addResources('ja-JP', 'graphPositions', jaJP);
+  // i18n.addResources('zh-CN', 'graphPositions', zhCN);
+  const { t } = useGCMTranslation();
+  const items = useContext(SettingsCenterContext);
+
+  items['collection-manager']['tabs']['graph'] = {
+    title: t('Graphical interface'),
+    component: GraphCollectionPane,
+  };
+
+  return (
+    <SettingsCenterProvider settings={items}>
+      <PluginManagerContext.Provider
+        value={{
+          components: {
+            ...ctx?.components,
+          },
+        }}
+      >
+        {props.children}
+      </PluginManagerContext.Provider>
+    </SettingsCenterProvider>
+  );
+});
+GraphCollectionProvider.displayName = 'GraphCollectionProvider';