@sunspirytus/xflow-core 1.0.52

package/es/model-service/utils.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { RxModel, NsModel } from '../common/rx-model';
+/** 判断model是否Mount */
+const isRefMounted = (ref) => {
+    return ref && ref.current;
+};
+/** 用于判断model是否Mount */
+const useIsMoutedRef = () => {
+    /** 记录当前组件的加载状态 */
+    const ref = React.useRef(true);
+    React.useEffect(() => {
+        return () => {
+            ref.current = false;
+        };
+    }, []);
+    return ref;
+};
+/** 将model和react绑定 */
+export const useModel = (model) => {
+    /** 记录当前组件的加载状态 */
+    const ref = useIsMoutedRef();
+    const [state, setState] = React.useState(model.getValue());
+    React.useEffect(() => {
+        const disposeable = model.watch(val => {
+            if (isRefMounted(ref)) {
+                setState(val);
+            }
+        });
+        return () => {
+            disposeable.dispose();
+        };
+        /* eslint-disable-next-line  */
+    }, [model]);
+    const value = state;
+    const canRender = NsModel.isValidValue(value);
+    const setValue = React.useCallback(val => model.setValue(val), [model]);
+    return [value, setValue, canRender];
+};
+/** 在组件内新建一个model */
+export const useComponentCtx = (initialState) => {
+    const model = React.useMemo(() => new RxModel(initialState), [initialState]);
+    /** model 和 state 绑定触发view刷新 */
+    const [modelValue, setModelValue, canRender] = useModel(model);
+    /** unMount时dispose */
+    React.useEffect(() => {
+        return () => {
+            model.dispose();
+        };
+    }, [model]);
+    return [modelValue, setModelValue, model, canRender];
+};
+//# sourceMappingURL=utils.js.map

package/es/model-service/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/model-service/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAErD,qBAAqB;AACrB,MAAM,YAAY,GAAG,CAAC,GAA6B,EAAE,EAAE;IACrD,OAAO,GAAG,IAAI,GAAG,CAAC,OAAO,CAAA;AAC3B,CAAC,CAAA;AAED,uBAAuB;AACvB,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,kBAAkB;IAClB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC9B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;QACrB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,qBAAqB;AACrB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAK,KAAiB,EAAE,EAAE;IAChD,kBAAkB;IAClB,MAAM,GAAG,GAAG,cAAc,EAAE,CAAA;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACpC,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;gBACrB,QAAQ,CAAC,GAAG,CAAC,CAAA;aACd;QACH,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,OAAO,EAAE,CAAA;QACvB,CAAC,CAAA;QACD,+BAA+B;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACX,MAAM,KAAK,GAAG,KAAK,CAAA;IACnB,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAuB,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAC7F,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,CAAuC,CAAA;AAC3E,CAAC,CAAA;AACD,oBAAoB;AACpB,MAAM,CAAC,MAAM,eAAe,GAAG,CAAK,YAAe,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5E,+BAA+B;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC9D,sBAAsB;IACtB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,OAAO,EAAE,CAAA;QACjB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACX,OAAO,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAKlD,CAAA;AACH,CAAC,CAAA"}

package/es/style/components.css

@@ -0,0 +1,108 @@
+.xflow-default-node {
+  z-index: 10;
+  display: flex;
+  width: 180px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #c1cdf7;
+  border-radius: 2px;
+  box-shadow: -1px -1px 4px 0 rgba(223,223,223,0.50), -2px 2px 4px 0 rgba(244,244,244,0.50), 2px 3px 8px 2px rgba(151,151,151,0.05);
+  transition: all ease-in-out 0.15s;
+}
+.xflow-default-node:hover {
+  background-color: #fff;
+  border: 1px solid #3057e3;
+  box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);
+  cursor: move;
+}
+.xflow-default-node .icon {
+  width: 36px;
+}
+.xflow-default-node .label {
+  width: 108px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xflow-default-node .status {
+  width: 36px;
+}
+.xflow-default-node.panel-node {
+  border: 0;
+}
+.x6-node-selected .xflow-default-node {
+  background-color: rgba(48, 86, 227, 0.05);
+  border: 1px solid #3057e3;
+  box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);
+}
+.x6-node-selected .xflow-default-node:hover {
+  background-color: #fff;
+  box-shadow: 0 0 5px 5px rgba(48, 86, 227, 0.15);
+}
+.xflow-default-group-node {
+  z-index: 9;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 4px;
+  box-shadow: rgb(17 49 96 / 12%) 0px 1px 3px 0px, rgb(17 49 96 / 4%) 0px 0px 0px 1px;
+  cursor: grab;
+}
+.xflow-default-group-node:hover {
+  background-color: rgba(227, 244, 255, 0.45);
+  border: 1px solid #c1cdf7;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+  cursor: move;
+}
+.xflow-default-group-node .xflow-group-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 38px;
+}
+.xflow-default-group-node .xflow-group-header .header-left {
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.xflow-default-group-node .xflow-group-header .header-right {
+  display: inline-flex;
+  align-items: center;
+}
+.xflow-default-group-node .xflow-group-header .header-right span.anticon {
+  margin-left: 8px;
+}
+.x6-node-selected .xflow-default-group-node {
+  background-color: rgba(243, 249, 255, 0.92);
+  border: 1px solid #c1cdf7;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+}
+.x6-node-selected .xflow-default-group-node:hover {
+  background-color: rgba(243, 249, 255, 0.6);
+}
+.xflow-canvas-root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.xflow-x6-canvas {
+  width: 100%;
+  height: 100%;
+}
+.xflow-app-workspace {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.xflow-hide {
+  display: none;
+}
+.x6-widget-dnd.dragging {
+  cursor: grabbing !important;
+}

package/es/style/components.less

@@ -0,0 +1 @@
+@import "../xflow-main/style/index.less";

package/es/style/index.less

@@ -0,0 +1 @@
+@import './themes/index';

package/es/style/themes/default.less

@@ -0,0 +1,2 @@
+// The prefix to use on all css classes from x6.
+@xflow-prefix: xflow;

package/es/style/themes/index.less

@@ -0,0 +1 @@
+@import './default.less';

package/es/toolbar/components/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface IProps {
+}
+export declare const ToolbarRegistry: React.FC<IProps>;

package/es/toolbar/components/index.js

@@ -0,0 +1,21 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { createModule } from '../module';
+import { useExtensionRegistry } from '../../xflow-main/components/extension-context';
+export const ToolbarRegistry = props => {
+    const {} = props;
+    /** 获取配置中心 */
+    const extensionRegistry = useExtensionRegistry();
+    React.useEffect(() => {
+        const disposable = extensionRegistry.addCoreModule({
+            config: { CONFIG_TYPE: 'ToolbarRegistry', getConfig: () => __awaiter(void 0, void 0, void 0, function* () { }) },
+            createModule,
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [extensionRegistry]);
+    return null;
+};
+ToolbarRegistry.defaultProps = { XFlowModuleType: 'ToolbarRegistry' };
+//# sourceMappingURL=index.js.map

package/es/toolbar/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toolbar/components/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAA;AAIpF,MAAM,CAAC,MAAM,eAAe,GAAqB,KAAK,CAAC,EAAE;IACvD,MAAM,EAAE,GAAG,KAAK,CAAA;IAChB,aAAa;IACb,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAA;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,UAAU,GAAG,iBAAiB,CAAC,aAAa,CAAC;YACjD,MAAM,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAS,EAAE,kDAAE,CAAC,CAAA,EAAE;YACrE,YAAY;SACb,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,EAAE,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,eAAe,CAAC,YAAY,GAAG,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}

package/es/toolbar/index.d.ts

@@ -0,0 +1,3 @@
+import { IToolbarService, IToolbarModel, IToolbarLayout, IToolbarContribution, IRegisterToolbarItemFunction, IToolbarOptions, IToolbarItemOptions, IToolbarGroupOptions } from './interface';
+import { ToolbarRegistry } from './components';
+export { ToolbarRegistry, IToolbarService, IToolbarContribution, IToolbarModel, IToolbarLayout, IToolbarOptions, IToolbarItemOptions, IToolbarGroupOptions, IRegisterToolbarItemFunction, };

package/es/toolbar/index.js

@@ -0,0 +1,8 @@
+import { IToolbarService, IToolbarContribution, } from './interface';
+import { ToolbarRegistry } from './components';
+export { 
+// component
+ToolbarRegistry, 
+// ioc 扩展
+IToolbarService, IToolbarContribution, };
+//# sourceMappingURL=index.js.map

package/es/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAGf,oBAAoB,GAMrB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO;AACL,YAAY;AACZ,eAAe;AACf,SAAS;AACT,eAAe,EACf,oBAAoB,GAUrB,CAAA"}

package/es/toolbar/interface.d.ts

@@ -0,0 +1,104 @@
+import type React from 'react';
+import { Syringe } from 'mana-syringe';
+/** 工具类型 */
+import type { Disposable } from '../common/disposable';
+import type { NsModel } from '../common/rx-model';
+/** context 类型 */
+import type { IModelService, IUseModel } from '../model-service';
+/** command 类型 */
+import type { IGraphCommandService } from '../command/interface';
+/** 组件类型定义 */
+import type { Toolbar as X6Toolbar } from '@antv/x6-react-components/es/toolbar/toolbar';
+import type { ToolbarGroup as X6ToolbarGroup } from '@antv/x6-react-components/es/toolbar/group';
+import type { ToolbarItem as X6ToolbarItem } from '@antv/x6-react-components/es/toolbar/item';
+import type { Simplify } from '../common/types';
+import type { ReactElement } from 'react';
+/** 用于了批量注册 可销毁的 Toolbar Item*/
+export interface IStandaloneToolbarService {
+    /** 注册Toolbar Item */
+    registerToolbarItem: (config: IToolbarItemOptions) => Disposable;
+}
+/** 用于临时注册 toolbar*/
+export interface IRegisterToolbarItemFunction {
+    (registry: IStandaloneToolbarService): void;
+}
+/** IToolbarService: 用于注册/消费item */
+export declare const IToolbarService: unique symbol;
+/** IToolbarService: 用于注册/消费item */
+export interface IToolbarService {
+    /** 注册item */
+    registerItem: (config: IToolbarItemOptions) => Disposable;
+    /** 注册可注销的item */
+    registerDisposableToolbar?: (externalRegisterFn: IRegisterToolbarItemFunction) => Disposable;
+    /** 获取toolbar渲染需要 的 model */
+    getToolbarModel: (toolbarConfig: IToolbarOptions) => IToolbarModel;
+}
+/**
+ * Clients should implement this interface if they want to contribute to the tab-bar toolbar.
+ */
+export declare const IToolbarContribution: Syringe.DefinedToken;
+/**
+ * Representation of a toolbar contribution.
+ */
+export interface IToolbarContribution {
+    /**
+     * Registers toolbar items.
+     * @param registry the tabbar toolbar registry.
+     */
+    registerToolbarItems: (registry: IToolbarService) => void;
+}
+export interface ICustomRenderProps extends Omit<IToolbarItemOptions, 'onClick'> {
+    /** call IToolbarItemOptions.onClick with args */
+    onClick: () => void;
+}
+/** 描述toolbar的一个按钮 */
+export interface IToolbarItemOptions extends Omit<X6ToolbarItem.Props, 'onClick' | 'hidden' | 'disabled'> {
+    /**  The unique ID of the toolbar item. */
+    id: string;
+    /** 是否可见 */
+    isVisible?: boolean;
+    /** 是否可用 */
+    isEnabled?: boolean;
+    /** Optional text of the item. */
+    text?: string;
+    /** Optional tooltip for the item. */
+    tooltip?: string;
+    /** React element to be used as an icon for the menu item; optional */
+    icon?: ReactElement;
+    /** Optional icon for the item. */
+    iconName?: string;
+    /** runtime 处理context */
+    useModel?: IUseModel<IToolbarItemOptions>;
+    /** 自定义渲染 */
+    render?: React.FC<ICustomRenderProps>;
+    /** Optional icon for the item. */
+    onClick?: (args: IClickArgs) => void;
+}
+export interface IClickArgs {
+    toolbarItem: IToolbarItemOptions;
+    commandService: IGraphCommandService;
+    modelService: IModelService;
+}
+/**
+ * Toolbar的布局方向
+ * horizontal：水平
+ * vertical：竖直
+ */
+export type IToolbarLayout = 'horizontal' | 'vertical' | 'vertical' | 'horizontal-center';
+/**
+ * ToolbarGroup的json配置
+ * items是id string的集合
+ */
+export interface IToolbarGroupOptions extends X6ToolbarGroup.Props {
+    name?: string;
+    items: IToolbarItemOptions[];
+}
+/**  Toolbar的json配置 */
+export interface IToolbarOptions extends X6Toolbar.Props {
+    name?: string;
+    layout: IToolbarLayout;
+    mainGroups: IToolbarGroupOptions[];
+    extraGroups: IToolbarGroupOptions[];
+}
+/**  ToolbarItem的 Model: 渲染时生成 */
+export type IToolbarModel = Simplify<NsModel.IModel<IToolbarOptions>>;

package/es/toolbar/interface.js

@@ -0,0 +1,8 @@
+import { Syringe } from 'mana-syringe';
+/** IToolbarService: 用于注册/消费item */
+export const IToolbarService = Symbol('IToolbarService');
+/**
+ * Clients should implement this interface if they want to contribute to the tab-bar toolbar.
+ */
+export const IToolbarContribution = Syringe.defineToken('IToolbarContribution');
+//# sourceMappingURL=interface.js.map

package/es/toolbar/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/toolbar/interface.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAwBtC,mCAAmC;AACnC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;AAYxD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,OAAO,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAA"}

package/es/toolbar/module.d.ts

@@ -0,0 +1,8 @@
+import 'reflect-metadata';
+/** Application 扩展依赖 */
+/** Toolbar扩展点依赖 */
+import { ToolbarRegistry } from './toolbar-registry';
+import { IToolbarContribution } from './interface';
+export { IToolbarContribution, ToolbarRegistry };
+/** 依赖扩展模块，必须要加载 */
+export declare const createModule: () => import("mana-syringe").SyringeModule;

package/es/toolbar/module.js

@@ -0,0 +1,18 @@
+import 'reflect-metadata';
+/** Application 扩展依赖 */
+/** Toolbar扩展点依赖 */
+import { ToolbarRegistry } from './toolbar-registry';
+import { Contribution, Module } from 'mana-syringe';
+import { IToolbarContribution } from './interface';
+export { IToolbarContribution, ToolbarRegistry };
+/** 依赖扩展模块，必须要加载 */
+export const createModule = () => {
+    return Module(register => {
+        /** 注册 IToolbarContribution扩展点 */
+        Contribution.register(register, IToolbarContribution);
+        /** 注册 ToolbarRegistry 到 IFrontendApplicationContribution */
+        /** 注册 ToolbarRegistry */
+        register(ToolbarRegistry);
+    });
+};
+//# sourceMappingURL=module.js.map

package/es/toolbar/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/toolbar/module.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AACzB,uBAAuB;AACvB,mBAAmB;AACnB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAA;AAEhD,mBAAmB;AACnB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,MAAM,CAAC,QAAQ,CAAC,EAAE;QACvB,iCAAiC;QACjC,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA;QAErD,4DAA4D;QAC5D,yBAAyB;QACzB,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC3B,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/es/toolbar/toolbar-registry.d.ts

@@ -0,0 +1,80 @@
+import 'reflect-metadata';
+import { Contribution } from 'mana-syringe';
+import { DisposableCollection } from '../common/disposable';
+import { IFrontendApplicationContribution } from '../xflow-main/interface';
+import type { NsModel } from '../common/rx-model';
+import { RxModel } from '../common/rx-model';
+import { IGraphCommandService } from '../command';
+import { IModelService } from '../model-service';
+import type { IToolbarItemOptions, IToolbarOptions, IToolbarGroupOptions, IRegisterToolbarItemFunction } from './interface';
+import { IToolbarContribution } from './interface';
+/**
+ * Main, shared registry for toolbar items.
+ */
+export declare class ToolbarRegistry implements IFrontendApplicationContribution {
+    /** disposables */
+    protected readonly toDispose: DisposableCollection;
+    /** 储存所有toolbar items */
+    protected toolbarItems: Map<string, IToolbarItemOptions>;
+    /** CommandRegistry */
+    protected readonly commandService: IGraphCommandService;
+    /** IModelService */
+    protected readonly modelService: IModelService;
+    /** ToolbarItems的扩展 */
+    protected readonly contributionProvider: Contribution.Provider<IToolbarContribution>;
+    /** 注册ToolbarRegistry的onChange的事件 */
+    protected readonly onDidChangeEvent: RxModel<null>;
+    /** 通过ToolbarRegistry.onDidChange监听ToolbarRegistry items的变化  */
+    readonly onDidChange: NsModel.IWatch<void>;
+    /** debounce in order to avoid to fire more than once in the same tick */
+    protected fireOnDidChange: any;
+    /** App启动时，收集Toolbar扩展点的注册项 */
+    onStart(): void;
+    /**
+     * App 销毁时调用
+     * dispose toolbarProvider
+     */
+    onStop(): void;
+    /**
+     * 注册ToolbarItem
+     * item所需的command需要提前在command registry注册
+     * @param config IToolbarItem
+     */
+    registerItem(config: IToolbarItemOptions): DisposableCollection;
+    /**
+     * 批量注册可单独dispose的扩展项目
+     * @param externalRegisterFn IRegisterMenuFunction
+     */
+    registerDisposableToolbar: (externalRegisterFn: IRegisterToolbarItemFunction) => DisposableCollection;
+    /**
+     * 获取 ToolbarModel
+     * @param toolbarConfig IToolbarOptions
+     */
+    getToolbarModel: (toolbarConfig: IToolbarOptions) => RxModel<{
+        layout: import("./interface").IToolbarLayout;
+        mainGroups: {
+            items: IToolbarItemOptions[];
+            name?: string;
+            className?: string;
+        }[];
+        extraGroups: {
+            items: IToolbarItemOptions[];
+            name?: string;
+            className?: string;
+        }[];
+    }>;
+    /**
+     * 创建 ToolbarModel
+     * @param groups IToolbarGroupOptions[]
+     */
+    protected createToolbarGroupModel: (groups: IToolbarGroupOptions[]) => {
+        items: IToolbarItemOptions[];
+        name?: string;
+        className?: string;
+    }[];
+    /**
+     * 创建 ToolbarModel
+     * @param option IToolbarItem
+     */
+    protected createToolbarModel(option: Partial<IToolbarItemOptions>): IToolbarItemOptions;
+}

package/es/toolbar/toolbar-registry.js

@@ -0,0 +1,127 @@
+import { __decorate, __metadata } from "tslib";
+import 'reflect-metadata';
+import { singleton, inject, contrib, Contribution } from 'mana-syringe';
+import debounce from 'lodash/debounce';
+import cloneDeep from 'lodash/cloneDeep';
+import isBoolean from 'lodash/isBoolean';
+import { Disposable, DisposableCollection } from '../common/disposable';
+import { IFrontendApplicationContribution } from '../xflow-main/interface';
+import { RxModel } from '../common/rx-model';
+import { IGraphCommandService } from '../command';
+import { IModelService } from '../model-service';
+import { IToolbarService, IToolbarContribution } from './interface';
+/**
+ * Main, shared registry for toolbar items.
+ */
+let ToolbarRegistry = class ToolbarRegistry {
+    constructor() {
+        /** disposables */
+        this.toDispose = new DisposableCollection();
+        /** 储存所有toolbar items */
+        this.toolbarItems = new Map();
+        /** 注册ToolbarRegistry的onChange的事件 */
+        this.onDidChangeEvent = new RxModel(null);
+        /** 通过ToolbarRegistry.onDidChange监听ToolbarRegistry items的变化  */
+        this.onDidChange = this.onDidChangeEvent.watch;
+        /** debounce in order to avoid to fire more than once in the same tick */
+        this.fireOnDidChange = debounce(() => this.onDidChangeEvent.setValue(undefined), 16);
+        /**
+         * 批量注册可单独dispose的扩展项目
+         * @param externalRegisterFn IRegisterMenuFunction
+         */
+        this.registerDisposableToolbar = (externalRegisterFn) => {
+            const toDispose = new DisposableCollection();
+            const disposableRegistry = {
+                registerToolbarItem: config => {
+                    const disposable = this.registerItem(config);
+                    toDispose.push(disposable);
+                    return disposable;
+                },
+            };
+            externalRegisterFn(disposableRegistry);
+            this.toDispose.push(toDispose);
+            return toDispose;
+        };
+        /**
+         * 获取 ToolbarModel
+         * @param toolbarConfig IToolbarOptions
+         */
+        this.getToolbarModel = (toolbarConfig) => {
+            const { layout, mainGroups = [], extraGroups = [] } = toolbarConfig;
+            return new RxModel({
+                layout,
+                mainGroups: this.createToolbarGroupModel(mainGroups),
+                extraGroups: this.createToolbarGroupModel(extraGroups),
+            });
+        };
+        /**
+         * 创建 ToolbarModel
+         * @param groups IToolbarGroupOptions[]
+         */
+        this.createToolbarGroupModel = (groups) => {
+            const groupModels = groups.map(group => {
+                const { items = [] } = group;
+                return Object.assign(Object.assign({}, group), { items: items.map(item => this.createToolbarModel({ id: item.id })).filter(i => !!i) });
+            });
+            return groupModels;
+        };
+    }
+    /** App启动时，收集Toolbar扩展点的注册项 */
+    onStart() {
+        const contributions = this.contributionProvider.getContributions();
+        for (const contribution of contributions) {
+            contribution.registerToolbarItems(this);
+        }
+    }
+    /**
+     * App 销毁时调用
+     * dispose toolbarProvider
+     */
+    onStop() {
+        this.toDispose.dispose();
+    }
+    /**
+     * 注册ToolbarItem
+     * item所需的command需要提前在command registry注册
+     * @param config IToolbarItem
+     */
+    registerItem(config) {
+        if (this.toolbarItems.has(config.id)) {
+            console.warn(`ToolbarRegistry ${config.id} is duplicated, in`, config);
+        }
+        /** 注册 */
+        this.toolbarItems.set(config.id, config);
+        /** 通知更新 */
+        this.fireOnDidChange();
+        const toDispose = new DisposableCollection(Disposable.create(() => this.fireOnDidChange()), Disposable.create(() => this.toolbarItems.delete(config.id)));
+        return toDispose;
+    }
+    /**
+     * 创建 ToolbarModel
+     * @param option IToolbarItem
+     */
+    createToolbarModel(option) {
+        const item = cloneDeep(this.toolbarItems.get(option.id));
+        const isEnabled = isBoolean(item.isEnabled) ? item.isEnabled : true;
+        const isVisible = isBoolean(item.isVisible) ? item.isVisible : true;
+        const toolbarItem = Object.assign(Object.assign({}, item), { isEnabled: isEnabled, isVisible: isVisible, iconName: item.iconName, text: item.text });
+        return toolbarItem;
+    }
+};
+__decorate([
+    inject(IGraphCommandService),
+    __metadata("design:type", Object)
+], ToolbarRegistry.prototype, "commandService", void 0);
+__decorate([
+    inject(IModelService),
+    __metadata("design:type", Object)
+], ToolbarRegistry.prototype, "modelService", void 0);
+__decorate([
+    contrib(IToolbarContribution),
+    __metadata("design:type", Object)
+], ToolbarRegistry.prototype, "contributionProvider", void 0);
+ToolbarRegistry = __decorate([
+    singleton({ contrib: [IFrontendApplicationContribution, IToolbarService] })
+], ToolbarRegistry);
+export { ToolbarRegistry };
+//# sourceMappingURL=toolbar-registry.js.map

package/es/toolbar/toolbar-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-registry.js","sourceRoot":"","sources":["../../src/toolbar/toolbar-registry.tsx"],"names":[],"mappings":"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"}

package/es/xflow-main/application-module.d.ts

@@ -0,0 +1,8 @@
+import 'reflect-metadata';
+/** Application */
+import { FrontendApplication } from './application';
+/** Extension 注册中心 */
+import { ExtensionRegistry } from './components/extension-registry';
+export { ExtensionRegistry };
+export type ICreateApp = (registry: ExtensionRegistry) => FrontendApplication;
+export declare const initApp: ICreateApp;

package/es/xflow-main/application-module.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-redeclare */
+import 'reflect-metadata';
+/** Application */
+import { FrontendApplication, IFrontendApplicationContribution } from './application';
+/** Command 模块 */
+import { commandRegistryModule } from '../command/module';
+import { modelServiceModule } from '../model-service/module';
+/** Extension 注册中心 */
+import { ExtensionRegistry } from './components/extension-registry';
+/** 类型定义 */
+import { Contribution, Container, Module } from 'mana-syringe';
+export { ExtensionRegistry };
+/** application */
+const appMainModule = Module(register => {
+    /** 声明IFrontendApplicationContribution扩展点*/
+    Contribution.register(register, IFrontendApplicationContribution);
+    /** 声明 FrontendApplication */
+    register(FrontendApplication);
+});
+export const initApp = (moduleRegistry) => {
+    const extensions = moduleRegistry.getAllExtensions();
+    const container = new Container();
+    /** command */
+    /** react renderer */
+    /** 批量创建 extension module */
+    const modules = extensions.map(module => {
+        const { createModule, config } = module;
+        return createModule(config);
+    });
+    /** 单独加载 appMainModule */
+    container.load(appMainModule);
+    /** 单独加载 commandRegistryModule */
+    container.load(commandRegistryModule);
+    // /** 单独加载 modelServiceModule */
+    container.load(modelServiceModule);
+    /**
+     * 批量加载 extension module
+     * 包括：menu/toolbar/keybinding/graph
+     */
+    modules.forEach(module => {
+        container.load(module);
+    });
+    const app = container.get(FrontendApplication);
+    return app;
+};
+//# sourceMappingURL=application-module.js.map