@sunspirytus/xflow-core 1.0.52

package/lib/model-service/model-registry.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelRegistry = void 0;
+var tslib_1 = require("tslib");
+var disposable_1 = require("../common/disposable");
+var interface_1 = require("../xflow-main/interface");
+var rx_model_1 = require("../common/rx-model");
+var deferred_1 = require("../common/deferred");
+var graph_provider_1 = require("../xflow-main/graph/graph-provider");
+var interface_2 = require("./interface");
+var mana_syringe_1 = require("mana-syringe");
+var ModelRegistry = /** @class */ (function () {
+    function ModelRegistry() {
+        var _this = this;
+        /** disposables */
+        this.toDispose = new disposable_1.DisposableCollection();
+        /** Deferred Model Map */
+        this.deferredModelMap = new Map();
+        /**
+         * 注册model
+         * @param options IModelOptions<T>
+         */
+        this.registerModel = function (options) {
+            var id = options.id, getInitialValue = options.getInitialValue, modelFactory = options.modelFactory;
+            var toDispose = new disposable_1.DisposableCollection();
+            var defer = _this.ensureModel(id);
+            if (defer.isResolved) {
+                console.error(options, 'model has been registerd');
+                return;
+            }
+            var initialValue = getInitialValue ? getInitialValue() : rx_model_1.NsModel.EMPTY_VALUE;
+            var model = modelFactory
+                ? modelFactory()
+                : new rx_model_1.RxModel(initialValue);
+            if (rx_model_1.NsModel.isValidValue(initialValue)) {
+                defer.resolve(model);
+            }
+            if (options.watchChange) {
+                /** 绑定watch事件 */
+                options.watchChange(model, _this).then(function (d) {
+                    /** createModel 后 resolve */
+                    if (!defer.isResolved) {
+                        defer.resolve(model);
+                    }
+                    _this.toDispose.pushAll([d, toDispose]);
+                    toDispose.push(d);
+                });
+            }
+            return toDispose;
+        };
+        /**
+         * 查找 model
+         * @param token: Token<T>
+         */
+        this.findDeferredModel = function (token) {
+            return _this.deferredModelMap.get(token);
+        };
+        /**
+         *  消费Model: await model resolve
+         * @param token: Token<T>
+         */
+        this.awaitModel = function (token) {
+            var defer = _this.ensureModel(token);
+            return defer.promise;
+        };
+        /**
+         * 注册 定义在IModelOptionProvider中的Model
+         */
+        this.registerRuntimeModel = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var modelRegisterFunc, graphInstance;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.modelOptionProvider.getOption()];
+                    case 1:
+                        modelRegisterFunc = (_a.sent()).modelRegisterFunc;
+                        return [4 /*yield*/, this.graphProvider.getGraphInstance()];
+                    case 2:
+                        graphInstance = _a.sent();
+                        if (modelRegisterFunc) {
+                            modelRegisterFunc(this, graphInstance);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        /**
+         * 确保调用时有可用的Model
+         * @param id ModelId
+         */
+        this.ensureModel = function (token) {
+            var existDeferred = _this.deferredModelMap.get(token);
+            if (existDeferred) {
+                return existDeferred;
+            }
+            /** 注册ModelDeferred */
+            var newDeferred = new deferred_1.Deferred();
+            _this.deferredModelMap.set(token, newDeferred);
+            _this.toDispose.push(disposable_1.Disposable.create(function () { return _this.deferredModelMap.delete(token); }));
+            return newDeferred;
+        };
+    }
+    /** app启动时，收集Model扩展点的注册项 */
+    ModelRegistry.prototype.onStart = function () {
+        var contributions = this.contributionProvider.getContributions();
+        for (var _i = 0, contributions_1 = contributions; _i < contributions_1.length; _i++) {
+            var contribution = contributions_1[_i];
+            contribution.registerModel(this);
+        }
+        this.registerRuntimeModel();
+    };
+    /** app停止的逻辑 */
+    ModelRegistry.prototype.onStop = function () {
+        this.toDispose.dispose();
+    };
+    tslib_1.__decorate([
+        (0, mana_syringe_1.contrib)(interface_2.IModelContribution),
+        tslib_1.__metadata("design:type", Object)
+    ], ModelRegistry.prototype, "contributionProvider", void 0);
+    tslib_1.__decorate([
+        (0, mana_syringe_1.inject)(interface_2.IModelOptionProvider),
+        tslib_1.__metadata("design:type", Object)
+    ], ModelRegistry.prototype, "modelOptionProvider", void 0);
+    tslib_1.__decorate([
+        (0, mana_syringe_1.inject)(graph_provider_1.IGraphProvider),
+        tslib_1.__metadata("design:type", Object)
+    ], ModelRegistry.prototype, "graphProvider", void 0);
+    ModelRegistry = tslib_1.__decorate([
+        (0, mana_syringe_1.singleton)({ contrib: [interface_1.IFrontendApplicationContribution, interface_2.IModelService] })
+    ], ModelRegistry);
+    return ModelRegistry;
+}());
+exports.ModelRegistry = ModelRegistry;
+//# sourceMappingURL=model-registry.js.map

package/lib/model-service/model-registry.js.map

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

package/lib/model-service/module.d.ts

@@ -0,0 +1,9 @@
+import 'reflect-metadata';
+import { Syringe } from 'mana-syringe';
+/** Application 扩展  */
+import type { ModelServiceConfig } from './config';
+/** 模块 */
+export declare const modelServiceModule: import("mana-syringe").SyringeModule;
+export declare const registerModelServiceConfig: (register: Syringe.Register, config: ModelServiceConfig) => void;
+/** 组件的 config 模块，必须要加载 */
+export declare const createModule: (config: ModelServiceConfig) => import("mana-syringe").SyringeModule;

package/lib/model-service/module.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createModule = exports.registerModelServiceConfig = exports.modelServiceModule = void 0;
+var tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-redeclare */
+require("reflect-metadata");
+var mana_syringe_1 = require("mana-syringe");
+var model_registry_1 = require("./model-registry");
+/**  model service 扩展  */
+var interface_1 = require("./interface");
+var command_model_1 = require("./contributions/command-model");
+var graph_model_1 = require("./contributions/graph-model");
+/** 模块 */
+exports.modelServiceModule = (0, mana_syringe_1.Module)(function (register) {
+    /** 注册 IModelService Contribution */
+    mana_syringe_1.Contribution.register(register, interface_1.IModelContribution);
+    /** 注册 ModelRegistry 到 IFrontendApplicationContribution  */
+    /** 注册 ModelRegistry alias IModelService Service */
+    register(model_registry_1.ModelRegistry);
+    /** 注册 Graph 相关的ModelService  */
+    register(graph_model_1.GraphModelContribution);
+    /** 注册 Command 相关的ModelService  */
+    register(command_model_1.CommandModelContribution);
+});
+var registerModelServiceConfig = function (register, config) {
+    register({
+        token: interface_1.IModelOptionProvider,
+        useDynamic: function () {
+            return {
+                getOption: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    return tslib_1.__generator(this, function (_a) {
+                        return [2 /*return*/, config.getConfig()];
+                    });
+                }); },
+            };
+        },
+        lifecycle: mana_syringe_1.Syringe.Lifecycle.singleton,
+    });
+};
+exports.registerModelServiceConfig = registerModelServiceConfig;
+/** 组件的 config 模块，必须要加载 */
+var createModule = function (config) {
+    return (0, mana_syringe_1.Module)(function (register) {
+        /** 绑定 ModelService  配置 */
+        (0, exports.registerModelServiceConfig)(register, config);
+    });
+};
+exports.createModule = createModule;
+//# sourceMappingURL=module.js.map

package/lib/model-service/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/model-service/module.ts"],"names":[],"mappings":";;;;AAAA,oDAAoD;AACpD,4BAAyB;AACzB,6CAA4D;AAG5D,mDAAgD;AAChD,yBAAyB;AACzB,yCAAsE;AACtE,+DAAwE;AACxE,2DAAoE;AAEpE,SAAS;AACI,QAAA,kBAAkB,GAAG,IAAA,qBAAM,EAAC,UAAA,QAAQ;IAC/C,oCAAoC;IACpC,2BAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,8BAAkB,CAAC,CAAA;IAEnD,2DAA2D;IAC3D,mDAAmD;IACnD,QAAQ,CAAC,8BAAa,CAAC,CAAA;IAEvB,gCAAgC;IAChC,QAAQ,CAAC,oCAAsB,CAAC,CAAA;IAEhC,kCAAkC;IAClC,QAAQ,CAAC,wCAAwB,CAAC,CAAA;AACpC,CAAC,CAAC,CAAA;AAEK,IAAM,0BAA0B,GAAG,UACxC,QAA0B,EAC1B,MAA0B;IAE1B,QAAQ,CAAC;QACP,KAAK,EAAE,gCAAoB;QAC3B,UAAU,EAAE;YACV,OAAO;gBACL,SAAS,EAAE;;wBACT,sBAAO,MAAM,CAAC,SAAS,EAAE,EAAA;;qBAC1B;aACsB,CAAA;QAC3B,CAAC;QACD,SAAS,EAAE,sBAAO,CAAC,SAAS,CAAC,SAAS;KACvC,CAAC,CAAA;AACJ,CAAC,CAAA;AAfY,QAAA,0BAA0B,8BAetC;AAED,0BAA0B;AACnB,IAAM,YAAY,GAAG,UAAC,MAA0B;IACrD,OAAO,IAAA,qBAAM,EAAC,UAAA,QAAQ;QACpB,0BAA0B;QAC1B,IAAA,kCAA0B,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AALY,QAAA,YAAY,gBAKxB"}

package/lib/model-service/utils.d.ts

@@ -0,0 +1,5 @@
+import { RxModel, NsModel } from '../common/rx-model';
+/** 将model和react绑定 */
+export declare const useModel: <T>(model: RxModel<T>) => [T, NsModel.ISetValue<T>, boolean];
+/** 在组件内新建一个model */
+export declare const useComponentCtx: <T>(initialState: T) => [T, NsModel.ISetValue<T>, RxModel<T>, boolean];

package/lib/model-service/utils.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentCtx = exports.useModel = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var rx_model_1 = require("../common/rx-model");
+/** 判断model是否Mount */
+var isRefMounted = function (ref) {
+    return ref && ref.current;
+};
+/** 用于判断model是否Mount */
+var useIsMoutedRef = function () {
+    /** 记录当前组件的加载状态 */
+    var ref = react_1.default.useRef(true);
+    react_1.default.useEffect(function () {
+        return function () {
+            ref.current = false;
+        };
+    }, []);
+    return ref;
+};
+/** 将model和react绑定 */
+var useModel = function (model) {
+    /** 记录当前组件的加载状态 */
+    var ref = useIsMoutedRef();
+    var _a = react_1.default.useState(model.getValue()), state = _a[0], setState = _a[1];
+    react_1.default.useEffect(function () {
+        var disposeable = model.watch(function (val) {
+            if (isRefMounted(ref)) {
+                setState(val);
+            }
+        });
+        return function () {
+            disposeable.dispose();
+        };
+        /* eslint-disable-next-line  */
+    }, [model]);
+    var value = state;
+    var canRender = rx_model_1.NsModel.isValidValue(value);
+    var setValue = react_1.default.useCallback(function (val) { return model.setValue(val); }, [model]);
+    return [value, setValue, canRender];
+};
+exports.useModel = useModel;
+/** 在组件内新建一个model */
+var useComponentCtx = function (initialState) {
+    var model = react_1.default.useMemo(function () { return new rx_model_1.RxModel(initialState); }, [initialState]);
+    /** model 和 state 绑定触发view刷新 */
+    var _a = (0, exports.useModel)(model), modelValue = _a[0], setModelValue = _a[1], canRender = _a[2];
+    /** unMount时dispose */
+    react_1.default.useEffect(function () {
+        return function () {
+            model.dispose();
+        };
+    }, [model]);
+    return [modelValue, setModelValue, model, canRender];
+};
+exports.useComponentCtx = useComponentCtx;
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/model-service/utils.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,+CAAqD;AAErD,qBAAqB;AACrB,IAAM,YAAY,GAAG,UAAC,GAA6B;IACjD,OAAO,GAAG,IAAI,GAAG,CAAC,OAAO,CAAA;AAC3B,CAAC,CAAA;AAED,uBAAuB;AACvB,IAAM,cAAc,GAAG;IACrB,kBAAkB;IAClB,IAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC9B,eAAK,CAAC,SAAS,CAAC;QACd,OAAO;YACL,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;QACrB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,qBAAqB;AACd,IAAM,QAAQ,GAAG,UAAK,KAAiB;IAC5C,kBAAkB;IAClB,IAAM,GAAG,GAAG,cAAc,EAAE,CAAA;IACtB,IAAA,KAAoB,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAnD,KAAK,QAAA,EAAE,QAAQ,QAAoC,CAAA;IAC1D,eAAK,CAAC,SAAS,CAAC;QACd,IAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,UAAA,GAAG;YACjC,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE;gBACrB,QAAQ,CAAC,GAAG,CAAC,CAAA;aACd;QACH,CAAC,CAAC,CAAA;QACF,OAAO;YACL,WAAW,CAAC,OAAO,EAAE,CAAA;QACvB,CAAC,CAAA;QACD,+BAA+B;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACX,IAAM,KAAK,GAAG,KAAK,CAAA;IACnB,IAAM,SAAS,GAAG,kBAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC7C,IAAM,QAAQ,GAAG,eAAK,CAAC,WAAW,CAAuB,UAAA,GAAG,IAAI,OAAA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAnB,CAAmB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAC7F,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,CAAuC,CAAA;AAC3E,CAAC,CAAA;AAnBY,QAAA,QAAQ,YAmBpB;AACD,oBAAoB;AACb,IAAM,eAAe,GAAG,UAAK,YAAe;IACjD,IAAM,KAAK,GAAG,eAAK,CAAC,OAAO,CAAC,cAAM,OAAA,IAAI,kBAAO,CAAC,YAAY,CAAC,EAAzB,CAAyB,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAC5E,+BAA+B;IACzB,IAAA,KAAyC,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAvD,UAAU,QAAA,EAAE,aAAa,QAAA,EAAE,SAAS,QAAmB,CAAA;IAC9D,sBAAsB;IACtB,eAAK,CAAC,SAAS,CAAC;QACd,OAAO;YACL,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;AAhBY,QAAA,eAAe,mBAgB3B"}

package/lib/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/lib/style/components.less

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

package/lib/style/index.less

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

package/lib/style/themes/default.less

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

package/lib/style/themes/index.less

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

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

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

package/lib/toolbar/components/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarRegistry = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var module_1 = require("../module");
+var extension_context_1 = require("../../xflow-main/components/extension-context");
+var ToolbarRegistry = function (props) {
+    var _a = props;
+    /** 获取配置中心 */
+    var extensionRegistry = (0, extension_context_1.useExtensionRegistry)();
+    react_1.default.useEffect(function () {
+        var disposable = extensionRegistry.addCoreModule({
+            config: { CONFIG_TYPE: 'ToolbarRegistry', getConfig: function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () { return tslib_1.__generator(this, function (_a) {
+                    return [2 /*return*/];
+                }); }); } },
+            createModule: module_1.createModule,
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [extensionRegistry]);
+    return null;
+};
+exports.ToolbarRegistry = ToolbarRegistry;
+exports.ToolbarRegistry.defaultProps = { XFlowModuleType: 'ToolbarRegistry' };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toolbar/components/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,oCAAwC;AACxC,mFAAoF;AAI7E,IAAM,eAAe,GAAqB,UAAA,KAAK;IAC9C,IAAA,KAAK,KAAK,CAAA;IAChB,aAAa;IACb,IAAM,iBAAiB,GAAG,IAAA,wCAAoB,GAAE,CAAA;IAEhD,eAAK,CAAC,SAAS,CAAC;QACd,IAAM,UAAU,GAAG,iBAAiB,CAAC,aAAa,CAAC;YACjD,MAAM,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE;;yBAAc,EAAE;YACrE,YAAY,uBAAA;SACb,CAAC,CAAA;QACF,OAAO;YACL,UAAU,CAAC,OAAO,EAAE,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAhBY,QAAA,eAAe,mBAgB3B;AAED,uBAAe,CAAC,YAAY,GAAG,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAA"}

package/lib/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/lib/toolbar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IToolbarContribution = exports.IToolbarService = exports.ToolbarRegistry = void 0;
+var interface_1 = require("./interface");
+Object.defineProperty(exports, "IToolbarService", { enumerable: true, get: function () { return interface_1.IToolbarService; } });
+Object.defineProperty(exports, "IToolbarContribution", { enumerable: true, get: function () { return interface_1.IToolbarContribution; } });
+var components_1 = require("./components");
+Object.defineProperty(exports, "ToolbarRegistry", { enumerable: true, get: function () { return components_1.ToolbarRegistry; } });
+//# sourceMappingURL=index.js.map

package/lib/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":";;;AAAA,yCAUoB;AAOlB,gGAhBA,2BAAe,OAgBA;AACf,qGAdA,gCAAoB,OAcA;AAPtB,2CAA8C;AAI5C,gGAJO,4BAAe,OAIP"}

package/lib/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/lib/toolbar/interface.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IToolbarContribution = exports.IToolbarService = void 0;
+var mana_syringe_1 = require("mana-syringe");
+/** IToolbarService: 用于注册/消费item */
+exports.IToolbarService = Symbol('IToolbarService');
+/**
+ * Clients should implement this interface if they want to contribute to the tab-bar toolbar.
+ */
+exports.IToolbarContribution = mana_syringe_1.Syringe.defineToken('IToolbarContribution');
+//# sourceMappingURL=interface.js.map

package/lib/toolbar/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/toolbar/interface.ts"],"names":[],"mappings":";;;AACA,6CAAsC;AAwBtC,mCAAmC;AACtB,QAAA,eAAe,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;AAYxD;;GAEG;AACU,QAAA,oBAAoB,GAAG,sBAAO,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAA"}

package/lib/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/lib/toolbar/module.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createModule = exports.ToolbarRegistry = exports.IToolbarContribution = void 0;
+require("reflect-metadata");
+/** Application 扩展依赖 */
+/** Toolbar扩展点依赖 */
+var toolbar_registry_1 = require("./toolbar-registry");
+Object.defineProperty(exports, "ToolbarRegistry", { enumerable: true, get: function () { return toolbar_registry_1.ToolbarRegistry; } });
+var mana_syringe_1 = require("mana-syringe");
+var interface_1 = require("./interface");
+Object.defineProperty(exports, "IToolbarContribution", { enumerable: true, get: function () { return interface_1.IToolbarContribution; } });
+/** 依赖扩展模块，必须要加载 */
+var createModule = function () {
+    return (0, mana_syringe_1.Module)(function (register) {
+        /** 注册 IToolbarContribution扩展点 */
+        mana_syringe_1.Contribution.register(register, interface_1.IToolbarContribution);
+        /** 注册 ToolbarRegistry 到 IFrontendApplicationContribution */
+        /** 注册 ToolbarRegistry */
+        register(toolbar_registry_1.ToolbarRegistry);
+    });
+};
+exports.createModule = createModule;
+//# sourceMappingURL=module.js.map

package/lib/toolbar/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/toolbar/module.ts"],"names":[],"mappings":";;;AAAA,4BAAyB;AACzB,uBAAuB;AACvB,mBAAmB;AACnB,uDAAoD;AAGrB,gGAHtB,kCAAe,OAGsB;AAF9C,6CAAmD;AACnD,yCAAkD;AACzC,qGADA,gCAAoB,OACA;AAE7B,mBAAmB;AACZ,IAAM,YAAY,GAAG;IAC1B,OAAO,IAAA,qBAAM,EAAC,UAAA,QAAQ;QACpB,iCAAiC;QACjC,2BAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,gCAAoB,CAAC,CAAA;QAErD,4DAA4D;QAC5D,yBAAyB;QACzB,QAAQ,CAAC,kCAAe,CAAC,CAAA;IAC3B,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AATY,QAAA,YAAY,gBASxB"}