Merge branch 'main' of github.com:nocobase/nocobase
This commit is contained in:
commit
9d33da0437
@ -10,7 +10,7 @@ process.env.DID_YOU_KNOW = 'none';
|
|||||||
const pluginPrefix = (process.env.PLUGIN_PACKAGE_PREFIX || '').split(',').filter((item) => !item.includes('preset')); // 因为现在 preset 是直接引入的,所以不能忽略,如果以后 preset 也是动态插件的形式引入,那么这里可以去掉
|
const pluginPrefix = (process.env.PLUGIN_PACKAGE_PREFIX || '').split(',').filter((item) => !item.includes('preset')); // 因为现在 preset 是直接引入的,所以不能忽略,如果以后 preset 也是动态插件的形式引入,那么这里可以去掉
|
||||||
const pluginDirs = 'packages/plugins/,packages/samples/'.split(',').map((item) => path.join(process.cwd(), item));
|
const pluginDirs = 'packages/plugins/,packages/samples/'.split(',').map((item) => path.join(process.cwd(), item));
|
||||||
|
|
||||||
const outputPluginPath = path.join(__dirname, 'src', '.plugins', 'index.ts');
|
const outputPluginPath = path.join(__dirname, 'src', '.plugins');
|
||||||
const indexGenerator = new IndexGenerator(outputPluginPath, pluginDirs);
|
const indexGenerator = new IndexGenerator(outputPluginPath, pluginDirs);
|
||||||
indexGenerator.generate();
|
indexGenerator.generate();
|
||||||
|
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
import { Application } from '@nocobase/client';
|
import { Application } from '@nocobase/client';
|
||||||
import { NocoBaseClientPresetPlugin } from '@nocobase/preset-nocobase/client';
|
import { NocoBaseClientPresetPlugin } from '@nocobase/preset-nocobase/client';
|
||||||
import devPlugins from '../.plugins/index';
|
import devDynamicImport from '../.plugins/index';
|
||||||
|
|
||||||
export const app = new Application({
|
export const app = new Application({
|
||||||
apiClient: {
|
apiClient: {
|
||||||
baseURL: process.env.API_BASE_URL,
|
baseURL: process.env.API_BASE_URL,
|
||||||
},
|
},
|
||||||
plugins: [NocoBaseClientPresetPlugin],
|
plugins: [NocoBaseClientPresetPlugin],
|
||||||
devPlugins,
|
devDynamicImport,
|
||||||
});
|
});
|
||||||
|
|
||||||
export default app.getRootComponent();
|
export default app.getRootComponent();
|
||||||
|
@ -24,6 +24,7 @@ declare global {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type DevDynamicImport = (packageName: string) => Promise<{ default: typeof Plugin }>;
|
||||||
export type ComponentAndProps<T = any> = [ComponentType, T];
|
export type ComponentAndProps<T = any> = [ComponentType, T];
|
||||||
export interface ApplicationOptions {
|
export interface ApplicationOptions {
|
||||||
apiClient?: APIClientOptions;
|
apiClient?: APIClientOptions;
|
||||||
@ -33,7 +34,7 @@ export interface ApplicationOptions {
|
|||||||
components?: Record<string, ComponentType>;
|
components?: Record<string, ComponentType>;
|
||||||
scopes?: Record<string, any>;
|
scopes?: Record<string, any>;
|
||||||
router?: RouterOptions;
|
router?: RouterOptions;
|
||||||
devPlugins?: Record<string, Promise<{ default: typeof Plugin }>>;
|
devDynamicImport?: DevDynamicImport;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Application {
|
export class Application {
|
||||||
@ -44,12 +45,12 @@ export class Application {
|
|||||||
public apiClient: APIClient;
|
public apiClient: APIClient;
|
||||||
public components: Record<string, ComponentType> = { ...defaultAppComponents };
|
public components: Record<string, ComponentType> = { ...defaultAppComponents };
|
||||||
public pm: PluginManager;
|
public pm: PluginManager;
|
||||||
public devPlugins: Record<string, Promise<{ default: typeof Plugin }>> = {};
|
public devDynamicImport: DevDynamicImport;
|
||||||
public requirejs: RequireJS;
|
public requirejs: RequireJS;
|
||||||
|
|
||||||
constructor(protected options: ApplicationOptions = {}) {
|
constructor(protected options: ApplicationOptions = {}) {
|
||||||
this.initRequireJs();
|
this.initRequireJs();
|
||||||
this.devPlugins = options.devPlugins || {};
|
this.devDynamicImport = options.devDynamicImport;
|
||||||
this.scopes = merge(this.scopes, options.scopes);
|
this.scopes = merge(this.scopes, options.scopes);
|
||||||
this.components = merge(this.components, options.components);
|
this.components = merge(this.components, options.components);
|
||||||
this.apiClient = new APIClient(options.apiClient);
|
this.apiClient = new APIClient(options.apiClient);
|
||||||
|
@ -17,7 +17,10 @@ export class PluginManager {
|
|||||||
protected pluginsAliases: Record<string, Plugin> = {};
|
protected pluginsAliases: Record<string, Plugin> = {};
|
||||||
private initPlugins: Promise<void>;
|
private initPlugins: Promise<void>;
|
||||||
|
|
||||||
constructor(protected _plugins: PluginType[], protected app: Application) {
|
constructor(
|
||||||
|
protected _plugins: PluginType[],
|
||||||
|
protected app: Application,
|
||||||
|
) {
|
||||||
this.app = app;
|
this.app = app;
|
||||||
this.initPlugins = this.init(_plugins);
|
this.initPlugins = this.init(_plugins);
|
||||||
}
|
}
|
||||||
@ -43,7 +46,7 @@ export class PluginManager {
|
|||||||
requirejs: this.app.requirejs,
|
requirejs: this.app.requirejs,
|
||||||
pluginData: pluginList,
|
pluginData: pluginList,
|
||||||
baseURL: this.app.apiClient.axios?.defaults?.baseURL,
|
baseURL: this.app.apiClient.axios?.defaults?.baseURL,
|
||||||
devPlugins: this.app.devPlugins,
|
devDynamicImport: this.app.devDynamicImport,
|
||||||
});
|
});
|
||||||
for await (const plugin of plugins) {
|
for await (const plugin of plugins) {
|
||||||
await this.add(plugin);
|
await this.add(plugin);
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import type { Plugin } from '../Plugin';
|
import type { Plugin } from '../Plugin';
|
||||||
import type { PluginData } from '../PluginManager';
|
import type { PluginData } from '../PluginManager';
|
||||||
import type { RequireJS } from './requirejs';
|
import type { RequireJS } from './requirejs';
|
||||||
|
import type { DevDynamicImport } from '../Application';
|
||||||
|
|
||||||
export function defineDevPlugins(plugins: Record<string, typeof Plugin>) {
|
export function defineDevPlugins(plugins: Record<string, typeof Plugin>) {
|
||||||
Object.entries(plugins).forEach(([name, plugin]) => {
|
Object.entries(plugins).forEach(([name, plugin]) => {
|
||||||
@ -44,11 +45,11 @@ interface GetPluginsOption {
|
|||||||
requirejs: RequireJS;
|
requirejs: RequireJS;
|
||||||
pluginData: PluginData[];
|
pluginData: PluginData[];
|
||||||
baseURL?: string;
|
baseURL?: string;
|
||||||
devPlugins?: Record<string, Promise<{ default: typeof Plugin }>>;
|
devDynamicImport?: DevDynamicImport;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getPlugins(options: GetPluginsOption): Promise<Array<typeof Plugin>> {
|
export async function getPlugins(options: GetPluginsOption): Promise<Array<typeof Plugin>> {
|
||||||
const { requirejs, pluginData, baseURL, devPlugins = {} } = options;
|
const { requirejs, pluginData, baseURL, devDynamicImport } = options;
|
||||||
|
|
||||||
if (pluginData.length === 0) return [];
|
if (pluginData.length === 0) return [];
|
||||||
|
|
||||||
@ -57,16 +58,18 @@ export async function getPlugins(options: GetPluginsOption): Promise<Array<typeo
|
|||||||
|
|
||||||
const resolveDevPlugins: Record<string, typeof Plugin> = {};
|
const resolveDevPlugins: Record<string, typeof Plugin> = {};
|
||||||
const pluginPackageNames = pluginData.map((item) => item.packageName);
|
const pluginPackageNames = pluginData.map((item) => item.packageName);
|
||||||
|
if (devDynamicImport) {
|
||||||
for await (const packageName of pluginPackageNames) {
|
for await (const packageName of pluginPackageNames) {
|
||||||
if (devPlugins[packageName]) {
|
const plugin = await devDynamicImport(packageName);
|
||||||
const plugin = await devPlugins[packageName];
|
if (plugin) {
|
||||||
plugins.push(plugin.default);
|
plugins.push(plugin.default);
|
||||||
resolveDevPlugins[packageName] = plugin.default;
|
resolveDevPlugins[packageName] = plugin.default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
defineDevPlugins(resolveDevPlugins);
|
defineDevPlugins(resolveDevPlugins);
|
||||||
|
}
|
||||||
|
|
||||||
const remotePlugins = pluginData.filter((item) => !devPlugins[item.packageName]);
|
const remotePlugins = pluginData.filter((item) => !resolveDevPlugins[item.packageName]);
|
||||||
|
|
||||||
if (remotePlugins.length === 0) {
|
if (remotePlugins.length === 0) {
|
||||||
return plugins;
|
return plugins;
|
||||||
|
@ -55,6 +55,9 @@ const getSchema = (schema: IField, record: any, compile, getContainer): ISchema
|
|||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
|
'x-component-props': {
|
||||||
|
getContainer: '{{ getContainer }}',
|
||||||
|
},
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues(options) {
|
useValues(options) {
|
||||||
|
@ -29,6 +29,9 @@ const getSchema = (schema: IField, record: any, compile, getContainer): ISchema
|
|||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
|
'x-component-props': {
|
||||||
|
getContainer: '{{ getContainer }}',
|
||||||
|
},
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues(options) {
|
useValues(options) {
|
||||||
|
@ -10,7 +10,11 @@ export const CollectionCategory = observer(
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{value.map((item) => {
|
{value.map((item) => {
|
||||||
return <Tag color={item.color}>{compile(item?.name)}</Tag>;
|
return (
|
||||||
|
<Tag key={item.name} color={item.color}>
|
||||||
|
{compile(item?.name)}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -132,9 +132,6 @@ export const view: ICollectionTemplate = {
|
|||||||
schema: {
|
schema: {
|
||||||
'x-component-props': '{{$form.values}}', //任意层次属性都支持表达式
|
'x-component-props': '{{$form.values}}', //任意层次属性都支持表达式
|
||||||
},
|
},
|
||||||
state: {
|
|
||||||
visible: `{{$deps[1]?.length > 0}}`,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { css, cx } from '@emotion/css';
|
import { css, cx } from '@emotion/css';
|
||||||
import { ArrayCollapse, ArrayItems, FormLayout, FormItem as Item } from '@formily/antd-v5';
|
import { ArrayCollapse, FormLayout, FormItem as Item } from '@formily/antd-v5';
|
||||||
import { Field } from '@formily/core';
|
import { Field } from '@formily/core';
|
||||||
import { ISchema, observer, useField, useFieldSchema } from '@formily/react';
|
import { ISchema, observer, useField, useFieldSchema } from '@formily/react';
|
||||||
import { Select } from 'antd';
|
import { Select } from 'antd';
|
||||||
@ -70,6 +70,7 @@ export const FormItem: any = observer(
|
|||||||
const variablesCtx = useVariablesCtx();
|
const variablesCtx = useVariablesCtx();
|
||||||
const { getCollectionJoinField } = useCollectionManager();
|
const { getCollectionJoinField } = useCollectionManager();
|
||||||
const collectionField = getCollectionJoinField(schema['x-collection-field']);
|
const collectionField = getCollectionJoinField(schema['x-collection-field']);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (ctx?.block === 'form') {
|
if (ctx?.block === 'form') {
|
||||||
ctx.field.data = ctx.field.data || {};
|
ctx.field.data = ctx.field.data || {};
|
||||||
@ -88,7 +89,10 @@ export const FormItem: any = observer(
|
|||||||
let iniValues = [];
|
let iniValues = [];
|
||||||
contextData?.map((v) => {
|
contextData?.map((v) => {
|
||||||
const data = parseVariables(schema.default, { $context: v });
|
const data = parseVariables(schema.default, { $context: v });
|
||||||
iniValues = iniValues.concat(data);
|
iniValues = iniValues.concat(data).map((v) => {
|
||||||
|
delete v[collectionField.through];
|
||||||
|
return v;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
const data = _.uniqBy(iniValues, 'id');
|
const data = _.uniqBy(iniValues, 'id');
|
||||||
field.setInitialValue?.(data.length > 0 ? data : [{}]);
|
field.setInitialValue?.(data.length > 0 ? data : [{}]);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { ArrayCollapse, ArrayItems, FormItem, FormLayout, Input } from '@formily/antd-v5';
|
import { ArrayCollapse, ArrayItems, FormItem, FormLayout, Input } from '@formily/antd-v5';
|
||||||
import { createForm, Field, GeneralField } from '@formily/core';
|
import { Field, GeneralField, createForm } from '@formily/core';
|
||||||
import { ISchema, Schema, SchemaOptionsContext, useField, useFieldSchema, useForm } from '@formily/react';
|
import { ISchema, Schema, SchemaOptionsContext, useField, useFieldSchema, useForm } from '@formily/react';
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { error } from '@nocobase/utils/client';
|
import { error } from '@nocobase/utils/client';
|
||||||
@ -21,33 +21,34 @@ import {
|
|||||||
} from 'antd';
|
} from 'antd';
|
||||||
import _, { cloneDeep } from 'lodash';
|
import _, { cloneDeep } from 'lodash';
|
||||||
import React, {
|
import React, {
|
||||||
createContext,
|
|
||||||
ReactNode,
|
ReactNode,
|
||||||
|
createContext,
|
||||||
useCallback,
|
useCallback,
|
||||||
useContext,
|
useContext,
|
||||||
useMemo,
|
useMemo,
|
||||||
useState,
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
useTransition as useReactTransition,
|
useTransition as useReactTransition,
|
||||||
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import {
|
import {
|
||||||
ActionContextProvider,
|
|
||||||
APIClientProvider,
|
APIClientProvider,
|
||||||
|
ActionContextProvider,
|
||||||
CollectionFieldOptions,
|
CollectionFieldOptions,
|
||||||
CollectionManagerContext,
|
CollectionManagerContext,
|
||||||
CollectionProvider,
|
CollectionProvider,
|
||||||
createDesignable,
|
|
||||||
Designable,
|
Designable,
|
||||||
findFormBlock,
|
|
||||||
FormDialog,
|
FormDialog,
|
||||||
FormProvider,
|
FormProvider,
|
||||||
RemoteSchemaComponent,
|
RemoteSchemaComponent,
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
SchemaComponentContext,
|
SchemaComponentContext,
|
||||||
SchemaComponentOptions,
|
SchemaComponentOptions,
|
||||||
|
createDesignable,
|
||||||
|
findFormBlock,
|
||||||
useAPIClient,
|
useAPIClient,
|
||||||
|
useActionContext,
|
||||||
useBlockRequestContext,
|
useBlockRequestContext,
|
||||||
useCollection,
|
useCollection,
|
||||||
useCollectionManager,
|
useCollectionManager,
|
||||||
@ -57,7 +58,6 @@ import {
|
|||||||
useGlobalTheme,
|
useGlobalTheme,
|
||||||
useLinkageCollectionFilterOptions,
|
useLinkageCollectionFilterOptions,
|
||||||
useSortFields,
|
useSortFields,
|
||||||
useActionContext,
|
|
||||||
} from '..';
|
} from '..';
|
||||||
import { useTableBlockContext } from '../block-provider';
|
import { useTableBlockContext } from '../block-provider';
|
||||||
import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks';
|
import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks';
|
||||||
@ -1678,9 +1678,19 @@ SchemaSettings.SortingRule = function SortRuleConfigure(props) {
|
|||||||
// 是否显示默认值配置项
|
// 是否显示默认值配置项
|
||||||
export const isShowDefaultValue = (collectionField: CollectionFieldOptions, getInterface) => {
|
export const isShowDefaultValue = (collectionField: CollectionFieldOptions, getInterface) => {
|
||||||
return (
|
return (
|
||||||
!['o2o', 'oho', 'obo', 'o2m', 'attachment', 'expression', 'point', 'lineString', 'circle', 'polygon'].includes(
|
![
|
||||||
collectionField?.interface,
|
'o2o',
|
||||||
) && !isSystemField(collectionField, getInterface)
|
'oho',
|
||||||
|
'obo',
|
||||||
|
'o2m',
|
||||||
|
'attachment',
|
||||||
|
'expression',
|
||||||
|
'point',
|
||||||
|
'lineString',
|
||||||
|
'circle',
|
||||||
|
'polygon',
|
||||||
|
'sequence',
|
||||||
|
].includes(collectionField?.interface) && !isSystemField(collectionField, getInterface)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -708,6 +708,7 @@ export class Database extends EventEmitter implements AsyncEmitter {
|
|||||||
console.log('Connection has been established successfully.');
|
console.log('Connection has been established successfully.');
|
||||||
return true;
|
return true;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
console.log(`Unable to connect to the database: ${error.message}`);
|
||||||
if (count >= (retry as number)) {
|
if (count >= (retry as number)) {
|
||||||
throw new Error('Connection failed, please check your database connection credentials and try again.');
|
throw new Error('Connection failed, please check your database connection credentials and try again.');
|
||||||
}
|
}
|
||||||
|
@ -105,70 +105,101 @@ class IndexGenerator {
|
|||||||
this.pluginsPath = pluginsPath;
|
this.pluginsPath = pluginsPath;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get indexPath() {
|
||||||
|
return path.join(this.outputPath, 'index.ts');
|
||||||
|
}
|
||||||
|
|
||||||
|
get packageMapPath() {
|
||||||
|
return path.join(this.outputPath, 'packageMap.json');
|
||||||
|
}
|
||||||
|
|
||||||
|
get packagesPath() {
|
||||||
|
return path.join(this.outputPath, 'packages');
|
||||||
|
}
|
||||||
|
|
||||||
generate() {
|
generate() {
|
||||||
this.generatePluginIndex();
|
this.generatePluginContent();
|
||||||
if (process.env.NODE_ENV === 'production') return;
|
if (process.env.NODE_ENV === 'production') return;
|
||||||
this.pluginsPath.forEach((pluginPath) => {
|
this.pluginsPath.forEach((pluginPath) => {
|
||||||
if (!fs.existsSync(pluginPath)) {
|
if (!fs.existsSync(pluginPath)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
fs.watch(pluginPath, { recursive: false }, () => {
|
fs.watch(pluginPath, { recursive: false }, () => {
|
||||||
this.generatePluginIndex();
|
this.generatePluginContent();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
generatePluginIndex() {
|
get indexContent() {
|
||||||
if (!fs.existsSync(this.outputPath)) {
|
return `// @ts-nocheck
|
||||||
fs.mkdirSync(path.dirname(this.outputPath), { recursive: true });
|
import packageMap from './packageMap.json';
|
||||||
fs.writeFileSync(this.outputPath, 'export default {}');
|
|
||||||
|
function devDynamicImport(packageName: string): Promise<any> {
|
||||||
|
const fileName = packageMap[packageName];
|
||||||
|
if (!fileName) {
|
||||||
|
return Promise.resolve(null);
|
||||||
}
|
}
|
||||||
|
return import(\`./packages/\${fileName}\`)
|
||||||
|
}
|
||||||
|
export default devDynamicImport;`;
|
||||||
|
}
|
||||||
|
|
||||||
|
get emptyIndexContent() {
|
||||||
|
return `
|
||||||
|
export default function devDynamicImport(packageName: string): Promise<any> {
|
||||||
|
return Promise.resolve(null);
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
generatePluginContent() {
|
||||||
|
if (fs.existsSync(this.outputPath)) {
|
||||||
|
fs.rmdirSync(this.outputPath, { recursive: true, force: true });
|
||||||
|
}
|
||||||
|
fs.mkdirSync(this.outputPath);
|
||||||
const validPluginPaths = this.pluginsPath.filter((pluginPath) => fs.existsSync(pluginPath));
|
const validPluginPaths = this.pluginsPath.filter((pluginPath) => fs.existsSync(pluginPath));
|
||||||
if (!validPluginPaths.length) {
|
if (!validPluginPaths.length || process.env.NODE_ENV === 'production') {
|
||||||
|
fs.writeFileSync(this.indexPath, this.emptyIndexContent);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (process.env.NODE_ENV === 'production') {
|
|
||||||
fs.writeFileSync(this.outputPath, 'export default {}');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const pluginInfo = validPluginPaths.map((pluginPath) => this.getContent(pluginPath));
|
|
||||||
const importContent = pluginInfo.map(({ indexContent }) => indexContent).join('\n');
|
|
||||||
const exportContent = pluginInfo.map(({ exportContent }) => exportContent).join('\n');
|
|
||||||
|
|
||||||
const fileContent = `${importContent}\n\nexport default {\n${exportContent}\n}`;
|
const pluginInfos = validPluginPaths.map((pluginPath) => this.getContent(pluginPath)).flat();
|
||||||
|
|
||||||
fs.writeFileSync(this.outputPath, fileContent);
|
// index.ts
|
||||||
|
fs.writeFileSync(this.indexPath, this.indexContent);
|
||||||
|
// packageMap.json
|
||||||
|
const packageMapContent = pluginInfos.reduce((memo, item) => {
|
||||||
|
memo[item.packageJsonName] = item.pluginFileName + '.ts';
|
||||||
|
return memo;
|
||||||
|
}, {});
|
||||||
|
fs.writeFileSync(this.packageMapPath, JSON.stringify(packageMapContent, null, 2));
|
||||||
|
// packages
|
||||||
|
fs.mkdirSync(this.packagesPath, { recursive: true });
|
||||||
|
pluginInfos.forEach((item) => {
|
||||||
|
const pluginPackagePath = path.join(this.packagesPath, item.pluginFileName + '.ts');
|
||||||
|
fs.writeFileSync(pluginPackagePath, item.exportStatement);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getContent(pluginPath) {
|
getContent(pluginPath) {
|
||||||
const pluginFolders = fs.readdirSync(pluginPath);
|
const pluginFolders = fs.readdirSync(pluginPath);
|
||||||
const pluginImports = pluginFolders
|
const pluginInfos = pluginFolders
|
||||||
.filter((folder) => {
|
.filter((folder) => {
|
||||||
const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json');
|
const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json');
|
||||||
const pluginSrcClientPath = path.join(pluginPath, folder, 'src', 'client');
|
const pluginSrcClientPath = path.join(pluginPath, folder, 'src', 'client');
|
||||||
return fs.existsSync(pluginPackageJsonPath) && fs.existsSync(pluginSrcClientPath);
|
return fs.existsSync(pluginPackageJsonPath) && fs.existsSync(pluginSrcClientPath);
|
||||||
})
|
})
|
||||||
.map((folder, index) => {
|
.map((folder) => {
|
||||||
const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json');
|
const pluginPackageJsonPath = path.join(pluginPath, folder, 'package.json');
|
||||||
const pluginPackageJson = require(pluginPackageJsonPath);
|
const pluginPackageJson = require(pluginPackageJsonPath);
|
||||||
const pluginSrcClientPath = path
|
const pluginSrcClientPath = path
|
||||||
.relative(path.dirname(this.outputPath), path.join(pluginPath, folder, 'src', 'client'))
|
.relative(this.packagesPath, path.join(pluginPath, folder, 'src', 'client'))
|
||||||
.replaceAll('\\', '/');
|
.replaceAll('\\', '/');
|
||||||
const pluginName = `${folder.replaceAll('-', '_')}${index}`;
|
const pluginFileName = `${path.basename(pluginPath)}_${folder.replaceAll('-', '_')}`;
|
||||||
const importStatement = `const ${pluginName} = import('${pluginSrcClientPath}');`;
|
const exportStatement = `export { default } from '${pluginSrcClientPath}';`;
|
||||||
return { importStatement, pluginName, packageJsonName: pluginPackageJson.name };
|
return { exportStatement, pluginFileName, packageJsonName: pluginPackageJson.name };
|
||||||
});
|
});
|
||||||
|
|
||||||
const indexContent = pluginImports.map(({ importStatement }) => importStatement).join('\n');
|
return pluginInfos;
|
||||||
|
|
||||||
const exportContent = pluginImports
|
|
||||||
.map(({ pluginName, packageJsonName }) => ` "${packageJsonName}": ${pluginName},`)
|
|
||||||
.join('\n');
|
|
||||||
|
|
||||||
return {
|
|
||||||
indexContent,
|
|
||||||
exportContent,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -9,8 +9,14 @@
|
|||||||
"main": "./dist/server/index.js",
|
"main": "./dist/server/index.js",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@ant-design/icons": "5.x",
|
"@ant-design/icons": "5.x",
|
||||||
"@antv/x6": "^1.9.0",
|
"@antv/x6": "^2.0.0",
|
||||||
"@antv/x6-react-shape": "^1.6.2",
|
"@antv/x6-plugin-minimap": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-scroller": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-selection": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-snapline": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-dnd": "^2.0.0",
|
||||||
|
"@antv/x6-plugin-export": "^2.0.0",
|
||||||
|
"@antv/x6-react-shape": "^2.0.0",
|
||||||
"@formily/react": "2.x",
|
"@formily/react": "2.x",
|
||||||
"@formily/reactive": "2.x",
|
"@formily/reactive": "2.x",
|
||||||
"@formily/shared": "2.x",
|
"@formily/shared": "2.x",
|
||||||
|
@ -5,9 +5,6 @@ import { useGCMTranslation } from './utils';
|
|||||||
|
|
||||||
export const GraphCollectionProvider = React.memo((props) => {
|
export const GraphCollectionProvider = React.memo((props) => {
|
||||||
const ctx = useContext(PluginManagerContext);
|
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 { t } = useGCMTranslation();
|
||||||
const items = useContext(SettingsCenterContext);
|
const items = useContext(SettingsCenterContext);
|
||||||
|
|
||||||
|
@ -7,7 +7,11 @@ import {
|
|||||||
ShareAltOutlined,
|
ShareAltOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import { Graph } from '@antv/x6';
|
import { Graph } from '@antv/x6';
|
||||||
import '@antv/x6-react-shape';
|
import { register } from '@antv/x6-react-shape';
|
||||||
|
import { Scroller } from '@antv/x6-plugin-scroller';
|
||||||
|
import { MiniMap } from '@antv/x6-plugin-minimap';
|
||||||
|
import { Selection } from '@antv/x6-plugin-selection';
|
||||||
|
import { Snapline } from '@antv/x6-plugin-snapline';
|
||||||
import { SchemaOptionsContext } from '@formily/react';
|
import { SchemaOptionsContext } from '@formily/react';
|
||||||
import {
|
import {
|
||||||
APIClientProvider,
|
APIClientProvider,
|
||||||
@ -20,17 +24,16 @@ import {
|
|||||||
SchemaComponentOptions,
|
SchemaComponentOptions,
|
||||||
Select,
|
Select,
|
||||||
collection,
|
collection,
|
||||||
css,
|
|
||||||
cx,
|
|
||||||
useAPIClient,
|
useAPIClient,
|
||||||
useCollectionManager,
|
useCollectionManager,
|
||||||
useCompile,
|
useCompile,
|
||||||
useCurrentAppInfo,
|
useCurrentAppInfo,
|
||||||
useGlobalTheme,
|
useGlobalTheme,
|
||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
|
import { css, cx } from '@emotion/css';
|
||||||
import lodash from 'lodash';
|
import lodash from 'lodash';
|
||||||
import { useFullscreen } from 'ahooks';
|
import { useFullscreen } from 'ahooks';
|
||||||
import { Button, ConfigProvider, Input, Layout, Menu, Popover, Switch, Tooltip } from 'antd';
|
import { Button, ConfigProvider, Input, Layout, Menu, Popover, Switch, Tooltip, App, Spin } from 'antd';
|
||||||
import dagre from 'dagre';
|
import dagre from 'dagre';
|
||||||
import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
|
import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
|
||||||
import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
|
import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
|
||||||
@ -47,7 +50,6 @@ import {
|
|||||||
getPopupContainer,
|
getPopupContainer,
|
||||||
useGCMTranslation,
|
useGCMTranslation,
|
||||||
} from './utils';
|
} from './utils';
|
||||||
|
|
||||||
const { drop, groupBy, last, maxBy, minBy, take } = lodash;
|
const { drop, groupBy, last, maxBy, minBy, take } = lodash;
|
||||||
|
|
||||||
const LINE_HEIGHT = 40;
|
const LINE_HEIGHT = 40;
|
||||||
@ -90,11 +92,10 @@ async function layout(createPositions) {
|
|||||||
g.setNode(node.id, { width, height });
|
g.setNode(node.id, { width, height });
|
||||||
});
|
});
|
||||||
dagre.layout(g);
|
dagre.layout(g);
|
||||||
targetGraph.freeze();
|
|
||||||
const dNodes = getGridData(15, g.nodes());
|
const dNodes = getGridData(15, g.nodes());
|
||||||
dNodes.forEach((arr, row) => {
|
dNodes.forEach((arr, row) => {
|
||||||
arr.forEach((id, index) => {
|
arr.forEach((id, index) => {
|
||||||
const node = targetGraph.getCell(id);
|
const node = targetGraph.getCellById(id);
|
||||||
const col = index % 15;
|
const col = index % 15;
|
||||||
if (node) {
|
if (node) {
|
||||||
const targetPosition =
|
const targetPosition =
|
||||||
@ -119,7 +120,6 @@ async function layout(createPositions) {
|
|||||||
edges.forEach((edge) => {
|
edges.forEach((edge) => {
|
||||||
optimizeEdge(edge);
|
optimizeEdge(edge);
|
||||||
});
|
});
|
||||||
targetGraph.unfreeze();
|
|
||||||
if (targetNode) {
|
if (targetNode) {
|
||||||
typeof targetNode === 'string'
|
typeof targetNode === 'string'
|
||||||
? targetGraph.positionCell(last(nodes), 'top', { padding: 100 })
|
? targetGraph.positionCell(last(nodes), 'top', { padding: 100 })
|
||||||
@ -141,13 +141,13 @@ function optimizeEdge(edge) {
|
|||||||
} = edge;
|
} = edge;
|
||||||
const source = edge.getSource();
|
const source = edge.getSource();
|
||||||
const target = edge.getTarget();
|
const target = edge.getTarget();
|
||||||
const sorceNodeX = targetGraph.getCell(source.cell).position().x;
|
const sorceNodeX = targetGraph.getCellById(source.cell).position().x;
|
||||||
const targeNodeX = targetGraph.getCell(target.cell).position().x;
|
const targeNodeX = targetGraph.getCellById(target.cell).position().x;
|
||||||
const leftAnchor = connectionType
|
const leftAnchor = connectionType
|
||||||
? {
|
? {
|
||||||
name: 'topLeft',
|
name: 'topLeft',
|
||||||
args: {
|
args: {
|
||||||
dy: -20,
|
dy: 20,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
@ -157,7 +157,7 @@ function optimizeEdge(edge) {
|
|||||||
? {
|
? {
|
||||||
name: 'topRight',
|
name: 'topRight',
|
||||||
args: {
|
args: {
|
||||||
dy: -20,
|
dy: 20,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
: 'right';
|
: 'right';
|
||||||
@ -181,8 +181,8 @@ function optimizeEdge(edge) {
|
|||||||
direction: 'H',
|
direction: 'H',
|
||||||
});
|
});
|
||||||
} else if (Math.abs(sorceNodeX - targeNodeX) < 100) {
|
} else if (Math.abs(sorceNodeX - targeNodeX) < 100) {
|
||||||
const sourceCell = targetGraph.getCell(source.cell);
|
const sourceCell = targetGraph.getCellById(source.cell);
|
||||||
const targetCell = targetGraph.getCell(target.cell);
|
const targetCell = targetGraph.getCellById(target.cell);
|
||||||
edge.setSource({
|
edge.setSource({
|
||||||
cell: source.cell,
|
cell: source.cell,
|
||||||
port: source.port,
|
port: source.port,
|
||||||
@ -219,24 +219,6 @@ function optimizeEdge(edge) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNodes(nodes) {
|
|
||||||
targetGraph.addNodes(nodes);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEdges(edges) {
|
|
||||||
edges.forEach((item) => {
|
|
||||||
if (item.source && item.target) {
|
|
||||||
targetGraph.addEdge({
|
|
||||||
...item,
|
|
||||||
connector: {
|
|
||||||
name: 'normal',
|
|
||||||
zIndex: 1000,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const CollapsedContext = createContext<any>({});
|
const CollapsedContext = createContext<any>({});
|
||||||
const formatNodeData = () => {
|
const formatNodeData = () => {
|
||||||
const layoutNodes = [];
|
const layoutNodes = [];
|
||||||
@ -280,12 +262,11 @@ const handelResetLayout = () => {
|
|||||||
g.setEdge(source.cell, target.cell, {});
|
g.setEdge(source.cell, target.cell, {});
|
||||||
});
|
});
|
||||||
dagre.layout(g);
|
dagre.layout(g);
|
||||||
targetGraph.freeze();
|
|
||||||
const gNodes = g.nodes();
|
const gNodes = g.nodes();
|
||||||
const nodeWithEdges = take(gNodes, linkNodes.length);
|
const nodeWithEdges = take(gNodes, linkNodes.length);
|
||||||
const nodeWithoutEdges = drop(gNodes, linkNodes.length);
|
const nodeWithoutEdges = drop(gNodes, linkNodes.length);
|
||||||
nodeWithEdges.forEach((id) => {
|
nodeWithEdges.forEach((id) => {
|
||||||
const node = targetGraph.getCell(id);
|
const node = targetGraph.getCellById(id);
|
||||||
const positionId = positions.find((v) => v.collectionName === node.id)?.id;
|
const positionId = positions.find((v) => v.collectionName === node.id)?.id;
|
||||||
if (node) {
|
if (node) {
|
||||||
const pos = g.node(id);
|
const pos = g.node(id);
|
||||||
@ -319,7 +300,7 @@ const handelResetLayout = () => {
|
|||||||
return Math.abs(targetGraph.getCellById(v).position().y - maxY) < 50;
|
return Math.abs(targetGraph.getCellById(v).position().y - maxY) < 50;
|
||||||
});
|
});
|
||||||
const referenceNode: any = targetGraph
|
const referenceNode: any = targetGraph
|
||||||
.getCell(maxBy(yNodes, (k) => targetGraph.getCellById(k).position().x))
|
.getCellById(maxBy(yNodes, (k) => targetGraph.getCellById(k).position().x))
|
||||||
?.position();
|
?.position();
|
||||||
num = Math.round(maxX / 320) || 1;
|
num = Math.round(maxX / 320) || 1;
|
||||||
alternateNum = Math.floor((4500 - (maxX + 100 - referenceNode.x)) / 280);
|
alternateNum = Math.floor((4500 - (maxX + 100 - referenceNode.x)) / 280);
|
||||||
@ -328,7 +309,7 @@ const handelResetLayout = () => {
|
|||||||
const alternateNodes = take(nodeWithoutEdges, alternateNum);
|
const alternateNodes = take(nodeWithoutEdges, alternateNum);
|
||||||
rawEntity = getGridData(num, drop(nodeWithoutEdges, alternateNum));
|
rawEntity = getGridData(num, drop(nodeWithoutEdges, alternateNum));
|
||||||
alternateNodes.forEach((id, index) => {
|
alternateNodes.forEach((id, index) => {
|
||||||
const node = targetGraph.getCell(id);
|
const node = targetGraph.getCellById(id);
|
||||||
if (node) {
|
if (node) {
|
||||||
const calculatedPosition = { x: referenceNode.x + 320 * index + 280, y: referenceNode.y };
|
const calculatedPosition = { x: referenceNode.x + 320 * index + 280, y: referenceNode.y };
|
||||||
node.position(calculatedPosition.x, calculatedPosition.y);
|
node.position(calculatedPosition.x, calculatedPosition.y);
|
||||||
@ -346,7 +327,7 @@ const handelResetLayout = () => {
|
|||||||
}
|
}
|
||||||
rawEntity.forEach((arr, row) => {
|
rawEntity.forEach((arr, row) => {
|
||||||
arr.forEach((id, index) => {
|
arr.forEach((id, index) => {
|
||||||
const node = targetGraph.getCell(id);
|
const node = targetGraph.getCellById(id);
|
||||||
const col = index % num;
|
const col = index % num;
|
||||||
if (node) {
|
if (node) {
|
||||||
const calculatedPosition = { x: col * 325 + minX, y: row * 300 + maxY + 300 };
|
const calculatedPosition = { x: col * 325 + minX, y: row * 300 + maxY + 300 };
|
||||||
@ -359,7 +340,6 @@ const handelResetLayout = () => {
|
|||||||
edges.forEach((edge) => {
|
edges.forEach((edge) => {
|
||||||
optimizeEdge(edge);
|
optimizeEdge(edge);
|
||||||
});
|
});
|
||||||
targetGraph.unfreeze();
|
|
||||||
targetGraph.positionCell(nodes[0], 'top-left', { padding: 100 });
|
targetGraph.positionCell(nodes[0], 'top-left', { padding: 100 });
|
||||||
targetGraph.updatePositionAction(updatePositionData, true);
|
targetGraph.updatePositionAction(updatePositionData, true);
|
||||||
};
|
};
|
||||||
@ -374,7 +354,8 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
const { t } = useGCMTranslation();
|
const { t } = useGCMTranslation();
|
||||||
const [collectionData, setCollectionData] = useState<any>([]);
|
const [collectionData, setCollectionData] = useState<any>([]);
|
||||||
const [collectionList, setCollectionList] = useState<any>([]);
|
const [collectionList, setCollectionList] = useState<any>([]);
|
||||||
const { refreshCM } = useCollectionManager();
|
const [loading, setLoading] = useState(false);
|
||||||
|
const { refreshCM, collections } = useCollectionManager();
|
||||||
const currentAppInfo = useCurrentAppInfo();
|
const currentAppInfo = useCurrentAppInfo();
|
||||||
const {
|
const {
|
||||||
data: { database },
|
data: { database },
|
||||||
@ -410,8 +391,8 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
refreshPositions();
|
refreshPositions();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const refreshGM = async () => {
|
const refreshGM = async (collections?) => {
|
||||||
const data = await refreshCM();
|
const data = collections?.length > 0 ? collections : await refreshCM();
|
||||||
targetGraph.collections = data;
|
targetGraph.collections = data;
|
||||||
targetGraph.updatePositionAction = updatePositionAction;
|
targetGraph.updatePositionAction = updatePositionAction;
|
||||||
const currentNodes = targetGraph.getNodes();
|
const currentNodes = targetGraph.getNodes();
|
||||||
@ -427,39 +408,8 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
targetGraph = new Graph({
|
targetGraph = new Graph({
|
||||||
container: document.getElementById('container')!,
|
container: document.getElementById('container')!,
|
||||||
moveThreshold: 0,
|
moveThreshold: 0,
|
||||||
scroller: {
|
virtual: false,
|
||||||
enabled: true,
|
|
||||||
pannable: true,
|
|
||||||
padding: { top: 0, left: 500, right: 300, bottom: 400 },
|
|
||||||
},
|
|
||||||
selecting: {
|
|
||||||
enabled: false,
|
|
||||||
multiple: true,
|
|
||||||
rubberband: true,
|
|
||||||
movable: true,
|
|
||||||
className: 'node-selecting',
|
|
||||||
modifiers: 'shift',
|
|
||||||
},
|
|
||||||
minimap: {
|
|
||||||
enabled: true,
|
|
||||||
container: document.getElementById('graph-minimap'),
|
|
||||||
width: 300,
|
|
||||||
height: 250,
|
|
||||||
padding: 10,
|
|
||||||
graphOptions: {
|
|
||||||
async: true,
|
async: true,
|
||||||
getCellView(cell) {
|
|
||||||
if (cell.isNode()) {
|
|
||||||
return SimpleNodeView;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createCellView(cell) {
|
|
||||||
if (cell.isEdge()) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
connecting: {
|
connecting: {
|
||||||
anchor: {
|
anchor: {
|
||||||
name: 'midSide',
|
name: 'midSide',
|
||||||
@ -469,19 +419,9 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
enabled: true,
|
enabled: true,
|
||||||
modifiers: ['ctrl', 'meta'],
|
modifiers: ['ctrl', 'meta'],
|
||||||
},
|
},
|
||||||
snapline: {
|
|
||||||
enabled: !0,
|
|
||||||
},
|
|
||||||
keyboard: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
clipboard: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
interacting: {
|
interacting: {
|
||||||
magnetConnectable: false,
|
magnetConnectable: false,
|
||||||
},
|
},
|
||||||
async: true,
|
|
||||||
preventDefaultBlankAction: true,
|
preventDefaultBlankAction: true,
|
||||||
});
|
});
|
||||||
targetGraph.connectionType = ConnectionType.Both;
|
targetGraph.connectionType = ConnectionType.Both;
|
||||||
@ -502,32 +442,11 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
},
|
},
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
Graph.registerNode(
|
|
||||||
'er-rect',
|
register({
|
||||||
{
|
shape: 'er-rect',
|
||||||
inherit: 'react-shape',
|
width: NODE_WIDTH,
|
||||||
component: (node) => (
|
height: LINE_HEIGHT,
|
||||||
<CurrentAppInfoContext.Provider value={currentAppInfo}>
|
|
||||||
<APIClientProvider apiClient={api}>
|
|
||||||
<SchemaComponentOptions inherit scope={scope} components={components}>
|
|
||||||
<CollectionCategroriesProvider {...categoryCtx}>
|
|
||||||
<CollectionManagerProvider
|
|
||||||
collections={targetGraph?.collections}
|
|
||||||
refreshCM={refreshGM}
|
|
||||||
interfaces={ctx.interfaces}
|
|
||||||
>
|
|
||||||
{/* TODO: 因为画布中的卡片是一次性注册进 Graph 的,这里的 theme 是存在闭包里的,因此当主题动态变更时,并不会触发卡片的重新渲染 */}
|
|
||||||
<ConfigProvider theme={theme}>
|
|
||||||
<div style={{ height: 'auto' }}>
|
|
||||||
<Entity node={node} setTargetNode={setTargetNode} targetGraph={targetGraph} />
|
|
||||||
</div>
|
|
||||||
</ConfigProvider>
|
|
||||||
</CollectionManagerProvider>
|
|
||||||
</CollectionCategroriesProvider>
|
|
||||||
</SchemaComponentOptions>
|
|
||||||
</APIClientProvider>
|
|
||||||
</CurrentAppInfoContext.Provider>
|
|
||||||
),
|
|
||||||
ports: {
|
ports: {
|
||||||
groups: {
|
groups: {
|
||||||
list: {
|
list: {
|
||||||
@ -554,8 +473,73 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
refWidth: 100,
|
refWidth: 100,
|
||||||
refHeight: 100,
|
refHeight: 100,
|
||||||
},
|
},
|
||||||
|
component: React.forwardRef((props, ref) => {
|
||||||
|
return (
|
||||||
|
<CurrentAppInfoContext.Provider value={currentAppInfo}>
|
||||||
|
<APIClientProvider apiClient={api}>
|
||||||
|
<SchemaComponentOptions inherit scope={scope} components={components}>
|
||||||
|
<CollectionCategroriesProvider {...categoryCtx}>
|
||||||
|
<CollectionManagerProvider
|
||||||
|
collections={targetGraph?.collections}
|
||||||
|
refreshCM={refreshGM}
|
||||||
|
interfaces={ctx.interfaces}
|
||||||
|
>
|
||||||
|
{/* TODO: 因为画布中的卡片是一次性注册进 Graph 的,这里的 theme 是存在闭包里的,因此当主题动态变更时,并不会触发卡片的重新渲染 */}
|
||||||
|
<ConfigProvider theme={theme}>
|
||||||
|
<div style={{ height: 'auto' }}>
|
||||||
|
<App>
|
||||||
|
<Entity {...props} setTargetNode={setTargetNode} targetGraph={targetGraph} />
|
||||||
|
</App>
|
||||||
|
</div>
|
||||||
|
</ConfigProvider>
|
||||||
|
</CollectionManagerProvider>
|
||||||
|
</CollectionCategroriesProvider>
|
||||||
|
</SchemaComponentOptions>
|
||||||
|
</APIClientProvider>
|
||||||
|
</CurrentAppInfoContext.Provider>
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
targetGraph.use(
|
||||||
|
new Scroller({
|
||||||
|
enabled: true,
|
||||||
|
pannable: true,
|
||||||
|
padding: { top: 0, left: 500, right: 300, bottom: 400 },
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
targetGraph.use(
|
||||||
|
new MiniMap({
|
||||||
|
container: document.getElementById('graph-minimap'),
|
||||||
|
width: 300,
|
||||||
|
height: 250,
|
||||||
|
padding: 10,
|
||||||
|
graphOptions: {
|
||||||
|
async: true,
|
||||||
|
createCellView(cell) {
|
||||||
|
if (cell.isEdge()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (cell.isNode()) {
|
||||||
|
return SimpleNodeView;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
true,
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
targetGraph.use(
|
||||||
|
new Selection({
|
||||||
|
enabled: false,
|
||||||
|
multiple: true,
|
||||||
|
rubberband: true,
|
||||||
|
movable: true,
|
||||||
|
className: 'node-selecting',
|
||||||
|
modifiers: 'shift',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
targetGraph.use(
|
||||||
|
new Snapline({
|
||||||
|
enabled: true,
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
targetGraph.on('edge:mouseleave', ({ e, edge: targetEdge }) => {
|
targetGraph.on('edge:mouseleave', ({ e, edge: targetEdge }) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -594,7 +578,7 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
handleEdgeUnActive(targetGraph?.activeEdge);
|
handleEdgeUnActive(targetGraph?.activeEdge);
|
||||||
}
|
}
|
||||||
targetGraph.collapseNodes?.map((v) => {
|
targetGraph.collapseNodes?.map((v) => {
|
||||||
const node = targetGraph.getCell(Object.keys(v)[0]);
|
const node = targetGraph.getCellById(Object.keys(v)[0]);
|
||||||
Object.values(v)[0] && node.setData({ collapse: false });
|
Object.values(v)[0] && node.setData({ collapse: false });
|
||||||
});
|
});
|
||||||
targetGraph.cleanSelection();
|
targetGraph.cleanSelection();
|
||||||
@ -699,9 +683,7 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
const renderInitGraphCollection = (rawData) => {
|
const renderInitGraphCollection = (rawData) => {
|
||||||
const { nodesData, edgesData, inheritEdges } = formatData(rawData);
|
const { nodesData, edgesData, inheritEdges } = formatData(rawData);
|
||||||
targetGraph.data = { nodes: nodesData, edges: edgesData };
|
targetGraph.data = { nodes: nodesData, edges: edgesData };
|
||||||
getNodes(nodesData);
|
targetGraph.fromJSON({ nodes: nodesData, edges: inheritEdges.concat(edgesData) });
|
||||||
getEdges(edgesData);
|
|
||||||
getEdges(inheritEdges);
|
|
||||||
layout(saveGraphPositionAction);
|
layout(saveGraphPositionAction);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -784,7 +766,7 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
};
|
};
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
renderDiffEdges(diffEdges.concat(diffInheritEdge));
|
renderDiffEdges(diffEdges.concat(diffInheritEdge));
|
||||||
});
|
}, 300);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSearchCollection = (e) => {
|
const handleSearchCollection = (e) => {
|
||||||
@ -1012,14 +994,18 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
refreshPositions()
|
refreshPositions()
|
||||||
.then(() => {
|
.then(async () => {
|
||||||
refreshGM();
|
await refreshGM(collections);
|
||||||
|
setLoading(false);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
|
setLoading(false);
|
||||||
throw err;
|
throw err;
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const loadCollections = async () => {
|
const loadCollections = async () => {
|
||||||
return targetGraph.collections?.map((collection: any) => ({
|
return targetGraph.collections?.map((collection: any) => ({
|
||||||
label: compile(collection.title),
|
label: compile(collection.title),
|
||||||
@ -1029,6 +1015,7 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className={styles.graphCollectionContainerClass}>
|
<div className={styles.graphCollectionContainerClass}>
|
||||||
|
<Spin spinning={loading}>
|
||||||
<CollectionManagerProvider collections={targetGraph?.collections} refreshCM={refreshGM}>
|
<CollectionManagerProvider collections={targetGraph?.collections} refreshCM={refreshGM}>
|
||||||
<CollapsedContext.Provider value={{ collectionList, handleSearchCollection }}>
|
<CollapsedContext.Provider value={{ collectionList, handleSearchCollection }}>
|
||||||
<div className={cx(styles.collectionListClass)}>
|
<div className={cx(styles.collectionListClass)}>
|
||||||
@ -1382,6 +1369,7 @@ export const GraphDrawPage = React.memo(() => {
|
|||||||
className={styles.graphMinimap}
|
className={styles.graphMinimap}
|
||||||
style={{ width: '300px', height: '250px', right: '10px', bottom: '20px', position: 'fixed' }}
|
style={{ width: '300px', height: '250px', right: '10px', bottom: '20px', position: 'fixed' }}
|
||||||
></div>
|
></div>
|
||||||
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
@ -10,7 +10,7 @@ import {
|
|||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
import { error } from '@nocobase/utils/client';
|
import { error } from '@nocobase/utils/client';
|
||||||
import { Select, message } from 'antd';
|
import { Select, message } from 'antd';
|
||||||
import { lodash } from '@nocobase/utils/client'
|
import { lodash } from '@nocobase/utils/client';
|
||||||
import React, { useContext, useEffect } from 'react';
|
import React, { useContext, useEffect } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { GraphCollectionContext } from './components/CollectionNodeProvder';
|
import { GraphCollectionContext } from './components/CollectionNodeProvder';
|
||||||
|
@ -1,32 +1,21 @@
|
|||||||
import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
|
import { DeleteOutlined, DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons';
|
||||||
import '@antv/x6-react-shape';
|
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
|
import { css } from '@emotion/css';
|
||||||
import {
|
import {
|
||||||
Action,
|
|
||||||
Checkbox,
|
|
||||||
CollectionCategroriesContext,
|
CollectionCategroriesContext,
|
||||||
CollectionField,
|
|
||||||
CollectionProvider,
|
CollectionProvider,
|
||||||
Form,
|
|
||||||
FormItem,
|
|
||||||
Formula,
|
|
||||||
Grid,
|
|
||||||
Input,
|
|
||||||
InputNumber,
|
|
||||||
Radio,
|
|
||||||
ResourceActionProvider,
|
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
SchemaComponentProvider,
|
SchemaComponentProvider,
|
||||||
Select,
|
Select,
|
||||||
collection,
|
collection,
|
||||||
css,
|
|
||||||
useCollectionManager,
|
useCollectionManager,
|
||||||
useCompile,
|
useCompile,
|
||||||
useCurrentAppInfo,
|
useCurrentAppInfo,
|
||||||
useRecord,
|
useRecord,
|
||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
import lodash from 'lodash';
|
import lodash from 'lodash';
|
||||||
import { Badge, Dropdown, Popover, Tag } from 'antd';
|
import { SchemaOptionsContext } from '@formily/react';
|
||||||
|
import { Badge, Popover, Tag } from 'antd';
|
||||||
import React, { useContext, useRef, useState } from 'react';
|
import React, { useContext, useRef, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
useAsyncDataSource,
|
useAsyncDataSource,
|
||||||
@ -46,219 +35,34 @@ import { FieldSummary } from './FieldSummary';
|
|||||||
import { OverrideFieldAction } from './OverrideFieldAction';
|
import { OverrideFieldAction } from './OverrideFieldAction';
|
||||||
import { ViewFieldAction } from './ViewFieldAction';
|
import { ViewFieldAction } from './ViewFieldAction';
|
||||||
|
|
||||||
const Entity: React.FC<{
|
const OperationButton: any = React.memo((props: any) => {
|
||||||
node?: Node | any;
|
const { property, loadCollections, collectionData, setTargetNode, node, handelOpenPorts, title, name } = props;
|
||||||
setTargetNode: Function | any;
|
const isInheritField = !(property.collectionName !== name);
|
||||||
targetGraph: any;
|
const options = useContext(SchemaOptionsContext);
|
||||||
}> = (props) => {
|
|
||||||
const { styles } = useStyles();
|
|
||||||
const { node, setTargetNode, targetGraph } = props;
|
|
||||||
const {
|
|
||||||
store: {
|
|
||||||
data: { title, name, item, attrs, select },
|
|
||||||
},
|
|
||||||
id,
|
|
||||||
} = node;
|
|
||||||
const {
|
const {
|
||||||
data: { database },
|
data: { database },
|
||||||
} = useCurrentAppInfo();
|
} = useCurrentAppInfo();
|
||||||
const collectionData = useRef();
|
|
||||||
const categoryData = useContext(CollectionCategroriesContext);
|
|
||||||
collectionData.current = { ...item, title, inherits: item.inherits && new Proxy(item.inherits, {}) };
|
|
||||||
const { category } = item;
|
|
||||||
const compile = useCompile();
|
|
||||||
const loadCollections = async (field: any) => {
|
|
||||||
return targetGraph.collections?.map((collection: any) => ({
|
|
||||||
label: compile(collection.title),
|
|
||||||
value: collection.name,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
const loadCategories = async () => {
|
|
||||||
return categoryData?.data.map((item: any) => ({
|
|
||||||
label: compile(item.name),
|
|
||||||
value: item.id,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
const portsProps = {
|
|
||||||
targetGraph,
|
|
||||||
collectionData,
|
|
||||||
setTargetNode,
|
|
||||||
node,
|
|
||||||
loadCollections,
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={styles.entityContainer}
|
|
||||||
style={{ boxShadow: attrs?.boxShadow, border: select ? '2px dashed #f5a20a' : 0 }}
|
|
||||||
>
|
|
||||||
{category.map((v, index) => {
|
|
||||||
return (
|
|
||||||
<Badge.Ribbon
|
|
||||||
key={index}
|
|
||||||
color={v.color}
|
|
||||||
style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
|
|
||||||
placement="start"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<div
|
|
||||||
className={styles.headClass}
|
|
||||||
style={{ background: attrs?.hightLight ? '#1890ff' : null, paddingTop: category.length * 3 }}
|
|
||||||
>
|
|
||||||
<span className={styles.tableNameClass}>{compile(title)}</span>
|
|
||||||
|
|
||||||
<div className={styles.tableBtnClass}>
|
|
||||||
<SchemaComponentProvider>
|
|
||||||
<CollectionNodeProvder setTargetNode={setTargetNode} node={node}>
|
|
||||||
<CollectionProvider collection={collection}>
|
|
||||||
<SchemaComponent
|
|
||||||
scope={{
|
|
||||||
useUpdateCollectionActionAndRefreshCM,
|
|
||||||
useCancelAction,
|
|
||||||
loadCollections,
|
|
||||||
loadCategories,
|
|
||||||
useAsyncDataSource,
|
|
||||||
Action,
|
|
||||||
DeleteOutlined,
|
|
||||||
enableInherits: database?.dialect === 'postgres',
|
|
||||||
}}
|
|
||||||
components={{
|
|
||||||
Action,
|
|
||||||
EditOutlined,
|
|
||||||
FormItem,
|
|
||||||
CollectionField,
|
|
||||||
Input,
|
|
||||||
Form,
|
|
||||||
Select,
|
|
||||||
EditCollectionAction,
|
|
||||||
Checkbox,
|
|
||||||
}}
|
|
||||||
schema={{
|
|
||||||
type: 'object',
|
|
||||||
properties: {
|
|
||||||
update: {
|
|
||||||
type: 'void',
|
|
||||||
title: '{{ t("Edit") }}',
|
|
||||||
'x-component': 'EditCollectionAction',
|
|
||||||
'x-component-props': {
|
|
||||||
type: 'primary',
|
|
||||||
item: collectionData.current,
|
|
||||||
className: 'btn-edit-in-head',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
delete: {
|
|
||||||
type: 'void',
|
|
||||||
'x-action': 'destroy',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-component-props': {
|
|
||||||
component: DeleteOutlined,
|
|
||||||
icon: 'DeleteOutlined',
|
|
||||||
className: 'btn-del',
|
|
||||||
|
|
||||||
confirm: {
|
|
||||||
title: "{{t('Delete record')}}",
|
|
||||||
getContainer: getPopupContainer,
|
|
||||||
collectionConten: "{{t('Are you sure you want to delete it?')}}",
|
|
||||||
},
|
|
||||||
useAction: () => useDestroyActionAndRefreshCM({ name, id }),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CollectionProvider>
|
|
||||||
</CollectionNodeProvder>
|
|
||||||
</SchemaComponentProvider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PortsCom {...portsProps} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
|
|
||||||
const {
|
|
||||||
store: {
|
|
||||||
data: { title, name, item, ports, data, sourcePort, associated, targetPort },
|
|
||||||
},
|
|
||||||
} = node;
|
|
||||||
const [collapse, setCollapse] = useState(false);
|
|
||||||
const { t } = useGCMTranslation();
|
|
||||||
const compile = useCompile();
|
|
||||||
const { styles } = useStyles();
|
|
||||||
const {
|
|
||||||
data: { database },
|
|
||||||
} = useCurrentAppInfo();
|
|
||||||
const portsData = lodash.groupBy(ports.items, (v) => {
|
|
||||||
if (
|
|
||||||
v.isForeignKey ||
|
|
||||||
v.primaryKey ||
|
|
||||||
['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
|
|
||||||
) {
|
|
||||||
return 'initPorts';
|
|
||||||
} else {
|
|
||||||
return 'morePorts';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const useNewId = (prefix) => {
|
const useNewId = (prefix) => {
|
||||||
return `${prefix || ''}${uid()}`;
|
return `${prefix || ''}${uid()}`;
|
||||||
};
|
};
|
||||||
const CollectionConten = (data) => {
|
// 获取当前字段列表
|
||||||
const { type, name, primaryKey, allowNull, autoIncrement } = data;
|
const useCurrentFields = () => {
|
||||||
return (
|
const record = useRecord();
|
||||||
<div className={styles.collectionPopoverClass}>
|
const { getCollectionFields } = useCollectionManager();
|
||||||
<div className="field-content">
|
const fields = getCollectionFields(record.collectionName || record.name) as any[];
|
||||||
<div>
|
return fields;
|
||||||
<span>name</span>: <span className="field-type">{name}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>type</span>: <span className="field-type">{type}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
{primaryKey && <Tag color="green">PRIMARY</Tag>}
|
|
||||||
{allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
|
|
||||||
{autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
const typeColor = (v) => {
|
|
||||||
if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
|
|
||||||
return 'red';
|
|
||||||
} else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
|
|
||||||
return 'orange';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const OperationButton = ({ property }) => {
|
|
||||||
const isInheritField = !(property.collectionName !== name);
|
|
||||||
return (
|
return (
|
||||||
<div className="field-operator">
|
<div className="field-operator">
|
||||||
<SchemaComponentProvider
|
<SchemaComponentProvider
|
||||||
components={{
|
components={{
|
||||||
FormItem,
|
Select: (props) => <Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />,
|
||||||
CollectionField,
|
|
||||||
Input,
|
|
||||||
Form,
|
|
||||||
ResourceActionProvider,
|
|
||||||
Select: (props) => (
|
|
||||||
<Select popupMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
|
|
||||||
),
|
|
||||||
Checkbox,
|
|
||||||
Radio,
|
|
||||||
InputNumber,
|
|
||||||
Grid,
|
|
||||||
FieldSummary,
|
FieldSummary,
|
||||||
Action,
|
|
||||||
EditOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
AddFieldAction,
|
AddFieldAction,
|
||||||
OverrideFieldAction,
|
OverrideFieldAction,
|
||||||
ViewFieldAction,
|
ViewFieldAction,
|
||||||
Dropdown,
|
EditFieldAction,
|
||||||
Formula,
|
...options.components,
|
||||||
}}
|
}}
|
||||||
scope={{
|
scope={{
|
||||||
useAsyncDataSource,
|
useAsyncDataSource,
|
||||||
@ -269,6 +73,7 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
|
|||||||
useValuesFromRecord,
|
useValuesFromRecord,
|
||||||
useUpdateCollectionActionAndRefreshCM,
|
useUpdateCollectionActionAndRefreshCM,
|
||||||
isInheritField,
|
isInheritField,
|
||||||
|
...options.scope,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CollectionNodeProvder
|
<CollectionNodeProvder
|
||||||
@ -298,7 +103,7 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
|
|||||||
update: {
|
update: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-action': 'update',
|
'x-action': 'update',
|
||||||
'x-component': EditFieldAction,
|
'x-component': 'EditFieldAction',
|
||||||
'x-visible': '{{isInheritField}}',
|
'x-visible': '{{isInheritField}}',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
item: {
|
item: {
|
||||||
@ -365,31 +170,53 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
|
|||||||
</SchemaComponentProvider>
|
</SchemaComponentProvider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
const { getInterface } = useCollectionManager();
|
|
||||||
// 获取当前字段列表
|
|
||||||
const useCurrentFields = () => {
|
|
||||||
const record = useRecord();
|
|
||||||
const { getCollectionFields } = useCollectionManager();
|
|
||||||
const fields = getCollectionFields(record.collectionName || record.name) as any[];
|
|
||||||
return fields;
|
|
||||||
};
|
|
||||||
const handelOpenPorts = (isCollapse?) => {
|
|
||||||
targetGraph.getCellById(item.name)?.toFront();
|
|
||||||
setCollapse(isCollapse);
|
|
||||||
const collapseNodes = targetGraph.collapseNodes || [];
|
|
||||||
collapseNodes.push({
|
|
||||||
[item.name]: isCollapse,
|
|
||||||
});
|
});
|
||||||
targetGraph.collapseNodes = collapseNodes;
|
|
||||||
targetGraph.getCellById(item.name).setData({ collapse: true });
|
const PopoverContent = React.memo((props: any) => {
|
||||||
|
const { property, node, ...other } = props;
|
||||||
|
const {
|
||||||
|
store: {
|
||||||
|
data: { title, name, sourcePort, associated, targetPort },
|
||||||
|
},
|
||||||
|
} = node;
|
||||||
|
const compile = useCompile();
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const { getInterface } = useCollectionManager();
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
const CollectionConten = React.useCallback((data) => {
|
||||||
|
const { type, name, primaryKey, allowNull, autoIncrement } = data;
|
||||||
|
return (
|
||||||
|
<div className={styles.collectionPopoverClass}>
|
||||||
|
<div className="field-content">
|
||||||
|
<div>
|
||||||
|
<span>name</span>: <span className="field-type">{name}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>type</span>: <span className="field-type">{type}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
{primaryKey && <Tag color="green">PRIMARY</Tag>}
|
||||||
|
{allowNull && <Tag color="geekblue">ALLOWNULL</Tag>}
|
||||||
|
{autoIncrement && <Tag color="purple">AUTOINCREMENT</Tag>}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
const operatioBtnProps = {
|
||||||
|
title,
|
||||||
|
name,
|
||||||
|
node,
|
||||||
|
...other,
|
||||||
|
};
|
||||||
|
const typeColor = (v) => {
|
||||||
|
if (v.isForeignKey || v.primaryKey || v.interface === 'id') {
|
||||||
|
return 'red';
|
||||||
|
} else if (['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(v.interface)) {
|
||||||
|
return 'orange';
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const isCollapse = collapse && data?.collapse;
|
|
||||||
return (
|
return (
|
||||||
<div className="body">
|
|
||||||
{portsData['initPorts']?.map((property) => {
|
|
||||||
return (
|
|
||||||
property.uiSchema && (
|
|
||||||
<Popover
|
<Popover
|
||||||
content={CollectionConten(property)}
|
content={CollectionConten(property)}
|
||||||
getPopupContainer={getPopupContainer}
|
getPopupContainer={getPopupContainer}
|
||||||
@ -398,9 +225,7 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
|
|||||||
title={
|
title={
|
||||||
<div>
|
<div>
|
||||||
{compile(property.uiSchema?.title)}
|
{compile(property.uiSchema?.title)}
|
||||||
<span style={{ color: '#ffa940', float: 'right' }}>
|
<span style={{ color: '#ffa940', float: 'right' }}>{compile(getInterface(property.interface)?.title)}</span>
|
||||||
{compile(getInterface(property.interface)?.title)}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
key={property.id}
|
key={property.id}
|
||||||
@ -414,60 +239,68 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
|
|||||||
background:
|
background:
|
||||||
targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
|
targetPort || sourcePort === property.id || associated?.includes(property.name) ? '#e6f7ff' : null,
|
||||||
}}
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setIsHovered(true);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
>
|
>
|
||||||
<div className="name">
|
<div className="name">
|
||||||
<Badge color={typeColor(property)} />
|
<Badge color={typeColor(property)} />
|
||||||
{compile(property.uiSchema?.title)}
|
{compile(property.uiSchema?.title)}
|
||||||
</div>
|
</div>
|
||||||
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
|
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
|
||||||
<OperationButton property={property} />
|
{isHovered && <OperationButton property={property} {...operatioBtnProps} />}
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode, node, loadCollections }) => {
|
||||||
|
const {
|
||||||
|
store: {
|
||||||
|
data: { item, ports, data },
|
||||||
|
},
|
||||||
|
} = node;
|
||||||
|
const [collapse, setCollapse] = useState(false);
|
||||||
|
const { t } = useGCMTranslation();
|
||||||
|
const portsData = lodash.groupBy(ports.items, (v) => {
|
||||||
|
if (
|
||||||
|
v.isForeignKey ||
|
||||||
|
v.primaryKey ||
|
||||||
|
['obo', 'oho', 'o2o', 'o2m', 'm2o', 'm2m', 'linkTo', 'id'].includes(v.interface)
|
||||||
|
) {
|
||||||
|
return 'initPorts';
|
||||||
|
} else {
|
||||||
|
return 'morePorts';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const handelOpenPorts = (isCollapse?) => {
|
||||||
|
targetGraph.getCellById(item.name)?.toFront();
|
||||||
|
setCollapse(isCollapse);
|
||||||
|
const collapseNodes = targetGraph.collapseNodes || [];
|
||||||
|
collapseNodes.push({
|
||||||
|
[item.name]: isCollapse,
|
||||||
|
});
|
||||||
|
targetGraph.collapseNodes = collapseNodes;
|
||||||
|
targetGraph.getCellById(item.name).setData({ collapse: true });
|
||||||
|
};
|
||||||
|
const isCollapse = collapse && data?.collapse;
|
||||||
|
const popoverProps = {
|
||||||
|
collectionData,
|
||||||
|
setTargetNode,
|
||||||
|
loadCollections,
|
||||||
|
handelOpenPorts,
|
||||||
|
node,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="body">
|
||||||
|
{portsData['initPorts']?.map((property) => {
|
||||||
|
return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
|
||||||
})}
|
})}
|
||||||
<div className="morePorts">
|
<div className="morePorts">
|
||||||
{isCollapse &&
|
{isCollapse &&
|
||||||
portsData['morePorts']?.map((property) => {
|
portsData['morePorts']?.map((property) => {
|
||||||
return (
|
return property.uiSchema && <PopoverContent {...popoverProps} property={property} key={property.id} />;
|
||||||
property.uiSchema && (
|
|
||||||
<Popover
|
|
||||||
content={CollectionConten(property)}
|
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
mouseLeaveDelay={0}
|
|
||||||
zIndex={100}
|
|
||||||
title={
|
|
||||||
<div>
|
|
||||||
{compile(property.uiSchema?.title)}
|
|
||||||
<span style={{ color: '#ffa940', float: 'right' }}>
|
|
||||||
{compile(getInterface(property.interface)?.title)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
key={property.id}
|
|
||||||
placement="right"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="body-item"
|
|
||||||
key={property.id}
|
|
||||||
id={property.id}
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
targetPort || sourcePort === property.id || associated?.includes(property.name)
|
|
||||||
? '#e6f7ff'
|
|
||||||
: null,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="name">
|
|
||||||
<Badge color="green" />
|
|
||||||
{compile(property.uiSchema?.title)}
|
|
||||||
</div>
|
|
||||||
<div className={`type field_type`}>{compile(getInterface(property.interface)?.title)}</div>
|
|
||||||
<OperationButton property={property} />
|
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
@ -495,4 +328,127 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const Entity: React.FC<{
|
||||||
|
node?: Node | any;
|
||||||
|
setTargetNode: Function | any;
|
||||||
|
targetGraph: any;
|
||||||
|
}> = (props) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const options = useContext(SchemaOptionsContext);
|
||||||
|
const { node, setTargetNode, targetGraph } = props;
|
||||||
|
const {
|
||||||
|
store: {
|
||||||
|
data: { title, name, item, attrs, select },
|
||||||
|
},
|
||||||
|
id,
|
||||||
|
} = node;
|
||||||
|
const {
|
||||||
|
data: { database },
|
||||||
|
} = useCurrentAppInfo();
|
||||||
|
const collectionData = useRef();
|
||||||
|
const categoryData = useContext(CollectionCategroriesContext);
|
||||||
|
collectionData.current = { ...item, title, inherits: item.inherits && new Proxy(item.inherits, {}) };
|
||||||
|
const { category } = item;
|
||||||
|
const compile = useCompile();
|
||||||
|
const loadCollections = async (field: any) => {
|
||||||
|
return targetGraph.collections?.map((collection: any) => ({
|
||||||
|
label: compile(collection.title),
|
||||||
|
value: collection.name,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
const loadCategories = async () => {
|
||||||
|
return categoryData?.data.map((item: any) => ({
|
||||||
|
label: compile(item.name),
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
const portsProps = {
|
||||||
|
targetGraph,
|
||||||
|
collectionData,
|
||||||
|
setTargetNode,
|
||||||
|
node,
|
||||||
|
loadCollections,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={styles.entityContainer}
|
||||||
|
style={{ boxShadow: attrs?.boxShadow, border: select ? '2px dashed #f5a20a' : 0 }}
|
||||||
|
>
|
||||||
|
{category.map((v, index) => {
|
||||||
|
return (
|
||||||
|
<Badge.Ribbon
|
||||||
|
key={index}
|
||||||
|
color={v.color}
|
||||||
|
style={{ width: '103%', height: '3px', marginTop: index * 5 - 8, borderRadius: 0 }}
|
||||||
|
placement="start"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<div
|
||||||
|
className={styles.headClass}
|
||||||
|
style={{ background: attrs?.hightLight ? '#1890ff' : null, paddingTop: category.length * 3 }}
|
||||||
|
>
|
||||||
|
<span className={styles.tableNameClass}>{compile(title)}</span>
|
||||||
|
|
||||||
|
<div className={styles.tableBtnClass}>
|
||||||
|
<SchemaComponentProvider>
|
||||||
|
<CollectionNodeProvder setTargetNode={setTargetNode} node={node}>
|
||||||
|
<CollectionProvider collection={collection}>
|
||||||
|
<SchemaComponent
|
||||||
|
scope={{
|
||||||
|
useUpdateCollectionActionAndRefreshCM,
|
||||||
|
useCancelAction,
|
||||||
|
loadCollections,
|
||||||
|
loadCategories,
|
||||||
|
useAsyncDataSource,
|
||||||
|
enableInherits: database?.dialect === 'postgres',
|
||||||
|
}}
|
||||||
|
components={{
|
||||||
|
EditOutlined,
|
||||||
|
EditCollectionAction,
|
||||||
|
...options.components,
|
||||||
|
}}
|
||||||
|
schema={{
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
update: {
|
||||||
|
type: 'void',
|
||||||
|
title: '{{ t("Edit") }}',
|
||||||
|
'x-component': 'EditCollectionAction',
|
||||||
|
'x-component-props': {
|
||||||
|
type: 'primary',
|
||||||
|
item: collectionData.current,
|
||||||
|
className: 'btn-edit-in-head',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delete: {
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'destroy',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-component-props': {
|
||||||
|
component: DeleteOutlined,
|
||||||
|
icon: 'DeleteOutlined',
|
||||||
|
className: 'btn-del',
|
||||||
|
|
||||||
|
confirm: {
|
||||||
|
title: "{{t('Delete record')}}",
|
||||||
|
getContainer: getPopupContainer,
|
||||||
|
collectionConten: "{{t('Are you sure you want to delete it?')}}",
|
||||||
|
},
|
||||||
|
useAction: () => useDestroyActionAndRefreshCM({ name, id }),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</CollectionProvider>
|
||||||
|
</CollectionNodeProvder>
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<PortsCom {...portsProps} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default Entity;
|
export default Entity;
|
||||||
|
@ -90,7 +90,7 @@ export const formatData = (data) => {
|
|||||||
item: item,
|
item: item,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
const edges = formatEdgeData(edgeData, targetTablekeys, tableData);
|
const edges = formatRelationEdgeData(edgeData, targetTablekeys, tableData);
|
||||||
const inheritEdges = formatInheritEdgeData(data);
|
const inheritEdges = formatInheritEdgeData(data);
|
||||||
return { nodesData: tableData, edgesData: edges, inheritEdges };
|
return { nodesData: tableData, edgesData: edges, inheritEdges };
|
||||||
};
|
};
|
||||||
@ -119,7 +119,6 @@ export const formatInheritEdgeData = (collections) => {
|
|||||||
textVerticalAnchor: 'middle',
|
textVerticalAnchor: 'middle',
|
||||||
stroke: '#ddd',
|
stroke: '#ddd',
|
||||||
sourceMarker: null,
|
sourceMarker: null,
|
||||||
// targetMarker: null,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
router: {
|
router: {
|
||||||
@ -185,7 +184,10 @@ export const formatInheritEdgeData = (collections) => {
|
|||||||
cell: k,
|
cell: k,
|
||||||
connectionPoint: 'rect',
|
connectionPoint: 'rect',
|
||||||
},
|
},
|
||||||
connector: 'rounded',
|
connector: {
|
||||||
|
name: 'normal',
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
connectionType: 'inherited',
|
connectionType: 'inherited',
|
||||||
...commonAttrs,
|
...commonAttrs,
|
||||||
});
|
});
|
||||||
@ -195,7 +197,7 @@ export const formatInheritEdgeData = (collections) => {
|
|||||||
return inheritEdges;
|
return inheritEdges;
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatEdgeData = (data, targetTables, tableData) => {
|
const formatRelationEdgeData = (data, targetTables, tableData) => {
|
||||||
const edges = [];
|
const edges = [];
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
if (targetTables.includes(data[i].target)) {
|
if (targetTables.includes(data[i].target)) {
|
||||||
@ -314,6 +316,10 @@ const formatEdgeData = (data, targetTables, tableData) => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
connector: {
|
||||||
|
name: 'normal',
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
const isuniq = (id) => {
|
const isuniq = (id) => {
|
||||||
const targetEdge = edges.find((v) => v.id === id);
|
const targetEdge = edges.find((v) => v.id === id);
|
||||||
|
@ -20,8 +20,9 @@ import { BaseTypeSets, defaultFieldNames, nodesOptions, triggerOptions } from '.
|
|||||||
function matchToManyField(field, appends): boolean {
|
function matchToManyField(field, appends): boolean {
|
||||||
const fieldPrefix = `${field.name}.`;
|
const fieldPrefix = `${field.name}.`;
|
||||||
return (
|
return (
|
||||||
['hasMany', 'belongsToMany'].includes(field.type) &&
|
(['hasOne', 'belongsTo'].includes(field.type) &&
|
||||||
(appends ? appends.includes(field.name) || appends.some((item) => item.startsWith(fieldPrefix)) : true)
|
(appends ? appends.includes(field.name) || appends.some((item) => item.startsWith(fieldPrefix)) : true)) ||
|
||||||
|
['hasMany', 'belongsToMany'].includes(field.type)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -265,6 +265,8 @@ export function JobButton() {
|
|||||||
border: 2px solid #d9d9d9;
|
border: 2px solid #d9d9d9;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
`,
|
`,
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
@ -165,13 +165,12 @@ function getNextAppends(field, appends: string[]) {
|
|||||||
|
|
||||||
function filterTypedFields({ fields, types, appends, compile, getCollectionFields }) {
|
function filterTypedFields({ fields, types, appends, compile, getCollectionFields }) {
|
||||||
return fields.filter((field) => {
|
return fields.filter((field) => {
|
||||||
const match = types?.length ? types.some((type) => matchFieldType(field, type, appends)) : true;
|
if (types?.length) {
|
||||||
|
return types.some((type) => matchFieldType(field, type, appends));
|
||||||
|
}
|
||||||
if (isAssociationField(field)) {
|
if (isAssociationField(field)) {
|
||||||
const nextAppends = getNextAppends(field, appends);
|
const nextAppends = getNextAppends(field, appends);
|
||||||
const included = appends.includes(field.name);
|
const included = appends.includes(field.name);
|
||||||
if (match) {
|
|
||||||
return included;
|
|
||||||
} else {
|
|
||||||
return (
|
return (
|
||||||
(nextAppends.length || included) &&
|
(nextAppends.length || included) &&
|
||||||
filterTypedFields({
|
filterTypedFields({
|
||||||
@ -184,9 +183,7 @@ function filterTypedFields({ fields, types, appends, compile, getCollectionField
|
|||||||
}).length
|
}).length
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else {
|
return true;
|
||||||
return match;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user