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

package/lib/client/index.d.ts

@@ -1 +1,5 @@
-export { GraphCollectionProvider as default } from './GraphCollectionProvider';
+import { Plugin } from '@nocobase/client';
+export declare class GraphCollectionPlugin extends Plugin {
+    load(): Promise<void>;
+}
+export default GraphCollectionPlugin;

package/lib/client/index.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _GraphCollectionProvider.GraphCollectionProvider;
+exports.default = exports.GraphCollectionPlugin = void 0;
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+var _GraphCollectionProvider = require("./GraphCollectionProvider");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+class GraphCollectionPlugin extends _client().Plugin {
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.app.use(_GraphCollectionProvider.GraphCollectionProvider);
+    })();
   }
-});
-var _GraphCollectionProvider = require("./GraphCollectionProvider");
+}
+exports.GraphCollectionPlugin = GraphCollectionPlugin;
+var _default = GraphCollectionPlugin;
+exports.default = _default;

package/lib/client/style.js

@@ -4,25 +4,25 @@ 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() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-const nodeSubtreeClass = (0, _css().css)`
+const nodeSubtreeClass = (0, _client().css)`
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
 `;
 exports.nodeSubtreeClass = nodeSubtreeClass;
-const addButtonClass = (0, _css().css)`
+const addButtonClass = (0, _client().css)`
   flex-shrink: 0;
   padding: 2em 0;
 `;
 exports.addButtonClass = addButtonClass;
-const entityContainer = (0, _css().css)`
+const entityContainer = (0, _client().css)`
   width: 250px;
   height: 100%;
   border-radius: 2px;
@@ -138,7 +138,7 @@ const entityContainer = (0, _css().css)`
   }
 `;
 exports.entityContainer = entityContainer;
-const headClass = (0, _css().css)`
+const headClass = (0, _client().css)`
   height: 50px;
   font-size: 14px;
   font-weight: 500;
@@ -152,7 +152,7 @@ const headClass = (0, _css().css)`
   border-radius: 3px;
 `;
 exports.headClass = headClass;
-const tableNameClass = (0, _css().css)`
+const tableNameClass = (0, _client().css)`
   max-width: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -160,14 +160,14 @@ const tableNameClass = (0, _css().css)`
   font-weight: 500;
 `;
 exports.tableNameClass = tableNameClass;
-const tableBtnClass = (0, _css().css)`
+const tableBtnClass = (0, _client().css)`
   display: flex;
   span {
     cursor: pointer;
   }
 `;
 exports.tableBtnClass = tableBtnClass;
-const collectiionPopoverClass = (0, _css().css)`
+const collectiionPopoverClass = (0, _client().css)`
   div.field-content {
     font-size: 14px;
     color: rgb(134 144 156);
@@ -180,7 +180,7 @@ const collectiionPopoverClass = (0, _css().css)`
   }
 `;
 exports.collectiionPopoverClass = collectiionPopoverClass;
-const collectionListClass = (0, _css().css)`
+const collectionListClass = (0, _client().css)`
   float: right;
   position: fixed;
   margin-top: 24px;
@@ -208,7 +208,7 @@ const collectionListClass = (0, _css().css)`
   }
 `;
 exports.collectionListClass = collectionListClass;
-const graphCollectionContainerClass = (0, _css().css)`
+const graphCollectionContainerClass = (0, _client().css)`
   overflow: hidden;
   .x6-graph-scroller {
     height: calc(100vh) !important;

package/lib/client/utils.d.ts

@@ -1,3 +1,4 @@
+import { lodash } from '@nocobase/utils/client';
 export declare const useGCMTranslation: () => import("react-i18next").UseTranslationResponse<"graph-collection-manager", undefined>;
 export declare const getInheritCollections: (collections: any, name: any) => any[];
 export declare const getChildrenCollections: (collections: any, name: any) => any[];
@@ -6,7 +7,7 @@ export declare const formatData: (data: any) => {
     edgesData: any[];
     inheritEdges: any[];
 };
-export declare const formatPortData: (ports: any) => import("lodash").Dictionary<any[]>;
+export declare const formatPortData: (ports: any) => lodash.Dictionary<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.0-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.0-alpha.1",
+    "@nocobase/database": "0.11.0-alpha.1",
+    "@nocobase/server": "0.11.0-alpha.1",
+    "@nocobase/test": "0.11.0-alpha.1",
+    "@nocobase/utils": "0.11.0-alpha.1",
+    "antd": "^5.6.4",
+    "react": "^18.2.0",
+    "react-i18next": "^11.15.1"
   },
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "gitHead": "7581b6d3a3a54f09f06a9effb7e3e65328281b2b"
 }

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';

package/src/client/GraphCollectionShortcut.tsx

@@ -0,0 +1,141 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { uid } from '@formily/shared';
+import { css, SchemaComponent, useActionContext, useRequest } from '@nocobase/client';
+import React, { useEffect } from 'react';
+import { useCreateActionAndRefreshCM } from './action-hooks';
+import { GraphDrawPage } from './GraphDrawPage';
+
+const useCollectionValues = (options) => {
+  const { visible } = useActionContext();
+  const result = useRequest(
+    () =>
+      Promise.resolve({
+        data: {
+          name: `t_${uid()}`,
+          createdBy: true,
+          updatedBy: true,
+          sortable: true,
+          logging: true,
+          fields: [
+            {
+              name: 'id',
+              type: 'integer',
+              autoIncrement: true,
+              primaryKey: true,
+              allowNull: false,
+              uiSchema: { type: 'number', title: '{{t("ID")}}', 'x-component': 'InputNumber', 'x-read-pretty': true },
+              interface: 'id',
+            },
+            {
+              interface: 'createdAt',
+              type: 'date',
+              field: 'createdAt',
+              name: 'createdAt',
+              uiSchema: {
+                type: 'datetime',
+                title: '{{t("Created at")}}',
+                'x-component': 'DatePicker',
+                'x-component-props': {},
+                'x-read-pretty': true,
+              },
+            },
+            {
+              interface: 'createdBy',
+              type: 'belongsTo',
+              target: 'users',
+              foreignKey: 'createdById',
+              name: 'createdBy',
+              uiSchema: {
+                type: 'object',
+                title: '{{t("Created by")}}',
+                'x-component': 'RecordPicker',
+                'x-component-props': {
+                  fieldNames: {
+                    value: 'id',
+                    label: 'nickname',
+                  },
+                },
+                'x-read-pretty': true,
+              },
+            },
+            {
+              type: 'date',
+              field: 'updatedAt',
+              name: 'updatedAt',
+              interface: 'updatedAt',
+              uiSchema: {
+                type: 'string',
+                title: '{{t("Last updated at")}}',
+                'x-component': 'DatePicker',
+                'x-component-props': {},
+                'x-read-pretty': true,
+              },
+            },
+            {
+              type: 'belongsTo',
+              target: 'users',
+              foreignKey: 'updatedById',
+              name: 'updatedBy',
+              interface: 'updatedBy',
+              uiSchema: {
+                type: 'object',
+                title: '{{t("Last updated by")}}',
+                'x-component': 'RecordPicker',
+                'x-component-props': {
+                  fieldNames: {
+                    value: 'id',
+                    label: 'nickname',
+                  },
+                },
+                'x-read-pretty': true,
+              },
+            },
+          ],
+        },
+      }),
+    {
+      ...options,
+      manual: true,
+    },
+  );
+
+  useEffect(() => {
+    if (visible) {
+      result.run();
+    }
+  }, [visible]);
+
+  return result;
+};
+
+export const GraphCollectionPane = () => {
+  return (
+    <div
+      className={css`
+        height: calc(100vh - 160px);
+        overflow: auto;
+        margin: calc(var(--nb-spacing) * -1);
+        position: relative;
+      `}
+      id="graph_container"
+    >
+      <SchemaComponent
+        schema={{
+          type: 'void',
+          'x-component': 'div',
+          properties: {
+            editor: {
+              type: 'void',
+              'x-component': 'GraphDrawPage',
+            },
+          },
+        }}
+        components={{
+          GraphDrawPage,
+          DeleteOutlined,
+        }}
+        scope={{ useCollectionValues, useCreateActionAndRefreshCM }}
+      />
+    </div>
+  );
+};