@sunspirytus/xflow-extension 1.0.52

package/lib/canvas-toolbar/render-components/toolbar-item.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IToolbarItemOptions, IToolbarLayout } from '@sunspirytus/xflow-core';
+export interface IProps {
+    item: IToolbarItemOptions;
+    layout: IToolbarLayout;
+}
+export declare const ToolbarItem: React.FC<IProps>;

package/lib/canvas-toolbar/render-components/toolbar-item.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var x6_react_components_1 = require("@antv/x6-react-components");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var xflow_core_2 = require("@sunspirytus/xflow-core");
+var ToolbarItem = function (props) {
+    var _a;
+    var app = (0, xflow_core_1.useXFlowApp)();
+    var item = props.item, layout = props.layout;
+    var clz = (0, classnames_1.default)((_a = {},
+        _a['xflow-toolbar-item'] = true,
+        _a));
+    var text = layout === 'vertical' ? '' : item.text;
+    var icon = undefined;
+    if (item.icon) {
+        icon = item.icon;
+    }
+    else if (item.iconName) {
+        var Icon = xflow_core_2.IconStore.get(item.iconName);
+        icon = react_1.default.createElement(Icon, null);
+    }
+    var ToolbarItemWrap = item.render;
+    var _b = item.isEnabled, isEnabled = _b === void 0 ? true : _b;
+    var commandService = app.commandService, modelService = app.modelService;
+    var onItemClick = function () {
+        if (item.onClick) {
+            item.onClick({ toolbarItem: item, commandService: commandService, modelService: modelService });
+        }
+    };
+    if (ToolbarItemWrap) {
+        return (react_1.default.createElement(ToolbarItemWrap, tslib_1.__assign({}, item, { onClick: onItemClick }),
+            react_1.default.createElement(x6_react_components_1.Toolbar.Item, tslib_1.__assign({}, item, { icon: icon, text: text, className: clz, disabled: !isEnabled, tooltip: item.tooltip || item.text, tooltipProps: tslib_1.__assign({ placement: layout === 'vertical' ? 'left' : 'bottom' }, item.tooltipProps), onClick: function () { } }))));
+    }
+    return (react_1.default.createElement(x6_react_components_1.Toolbar.Item, tslib_1.__assign({}, item, { icon: icon, text: text, className: clz, hidden: !item, disabled: !isEnabled, tooltip: item.tooltip || item.text, onClick: onItemClick, tooltipProps: tslib_1.__assign(tslib_1.__assign({}, item.tooltipProps), { placement: layout === 'vertical' ? 'left' : 'bottom' }) })));
+};
+exports.ToolbarItem = ToolbarItem;
+//# sourceMappingURL=toolbar-item.js.map

package/lib/canvas-toolbar/render-components/toolbar-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-item.js","sourceRoot":"","sources":["../../../src/canvas-toolbar/render-components/toolbar-item.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,kEAAmC;AACnC,iEAAmD;AACnD,sDAAqD;AACrD,sDAAmD;AAQ5C,IAAM,WAAW,GAAqB,UAAA,KAAK;;IAChD,IAAM,GAAG,GAAG,IAAA,wBAAW,GAAE,CAAA;IACjB,IAAA,IAAI,GAAa,KAAK,KAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAU;IAC9B,IAAM,GAAG,GAAG,IAAA,oBAAU;QACpB,GAAC,oBAAoB,IAAG,IAAI;YAC5B,CAAA;IACF,IAAM,IAAI,GAAG,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAA;IAEnD,IAAI,IAAI,GAAoB,SAAS,CAAA;IACrC,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;KACjB;SAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;QACxB,IAAM,IAAI,GAAG,sBAAS,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACzC,IAAI,GAAG,8BAAC,IAAI,OAAG,CAAA;KAChB;IAED,IAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAA;IAC3B,IAAA,KAAqB,IAAI,UAAT,EAAhB,SAAS,mBAAG,IAAI,KAAA,CAAS;IACzB,IAAA,cAAc,GAAmB,GAAG,eAAtB,EAAE,YAAY,GAAK,GAAG,aAAR,CAAQ;IAC5C,IAAM,WAAW,GAAG;QAClB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,gBAAA,EAAE,YAAY,cAAA,EAAE,CAAC,CAAA;SAClE;IACH,CAAC,CAAA;IACD,IAAI,eAAe,EAAE;QACnB,OAAO,CACL,8BAAC,eAAe,uBAAK,IAAI,IAAE,OAAO,EAAE,WAAW;YAC7C,8BAAC,6BAAO,CAAC,IAAI,uBACP,IAAI,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,EAClC,YAAY,qBACV,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IACjD,IAAI,CAAC,YAAY,GAEtB,OAAO,EAAE,cAAO,CAAC,IACjB,CACc,CACnB,CAAA;KACF;IAED,OAAO,CACL,8BAAC,6BAAO,CAAC,IAAI,uBACP,IAAI,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,GAAG,EACd,MAAM,EAAE,CAAC,IAAI,EACb,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,EAClC,OAAO,EAAE,WAAW,EACpB,YAAY,wCACP,IAAI,CAAC,YAAY,KACpB,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,OAEtD,CACH,CAAA;AACH,CAAC,CAAA;AA5DY,QAAA,WAAW,eA4DvB"}

package/lib/canvas-toolbar/service.d.ts

@@ -0,0 +1,17 @@
+import type { IToolbarOptions } from '@sunspirytus/xflow-core';
+import React from 'react';
+import type { IToolbarProps } from './interface';
+declare namespace NsToolbarModel {
+    interface IState extends IToolbarOptions {
+        customRender?: React.FC<{
+            config: IToolbarOptions;
+        }>;
+    }
+}
+export declare const useToolbarModel: (props: IToolbarProps) => {
+    isModelReady: boolean;
+    state: NsToolbarModel.IState;
+    setState: import("@sunspirytus/xflow-core").NsModel.ISetValue<NsToolbarModel.IState>;
+    toolbarModel: import("@sunspirytus/xflow-core").RxModel<NsToolbarModel.IState>;
+};
+export {};

package/lib/canvas-toolbar/service.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToolbarModel = void 0;
+var tslib_1 = require("tslib");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useToolbarModel = function (props) {
+    var config = props.config;
+    var modelId = config.moduleId;
+    var app = (0, xflow_core_1.useXFlowApp)();
+    var _a = (0, xflow_core_1.createComponentModel)({
+        name: modelId,
+        layout: props.layout,
+        mainGroups: [],
+        extraGroups: [],
+        customRender: null,
+    }), state = _a[0], setState = _a[1], toolbarModel = _a[2], isModelReady = _a[3];
+    /** 注册全局的model */
+    react_1.default.useEffect(function () {
+        var toDispose = new xflow_core_1.DisposableCollection();
+        var deferredModel = app.modelService.findDeferredModel(modelId);
+        if (!deferredModel) {
+            var _a = config.getConfig(), toolbarCustomRender_1 = _a.toolbarCustomRender, toolbarModelService_1 = _a.toolbarModelService;
+            var d = app.modelService.registerModel({
+                id: modelId,
+                modelFactory: function () { return toolbarModel; },
+                watchChange: function (self) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                    var updateCustomRender;
+                    return tslib_1.__generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!toolbarModelService_1) return [3 /*break*/, 2];
+                                return [4 /*yield*/, toolbarModelService_1(self, app.modelService, toDispose)];
+                            case 1:
+                                _a.sent();
+                                _a.label = 2;
+                            case 2:
+                                if (!toolbarCustomRender_1) return [3 /*break*/, 4];
+                                updateCustomRender = function (customRender) {
+                                    self.setValue(function (m) { return (m.customRender = customRender); });
+                                };
+                                return [4 /*yield*/, toolbarCustomRender_1(app.modelService, updateCustomRender)];
+                            case 3:
+                                _a.sent();
+                                _a.label = 4;
+                            case 4: return [2 /*return*/, toDispose];
+                        }
+                    });
+                }); },
+            });
+            toDispose.push(d);
+        }
+        return function () {
+            toDispose.dispose();
+        };
+        /* eslint-disable-next-line  */
+    }, []);
+    return { isModelReady: isModelReady, state: state, setState: setState, toolbarModel: toolbarModel };
+};
+exports.useToolbarModel = useToolbarModel;
+//# sourceMappingURL=service.js.map

package/lib/canvas-toolbar/service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../src/canvas-toolbar/service.tsx"],"names":[],"mappings":";;;;AACA,sDAAiG;AACjG,wDAAyB;AASlB,IAAM,eAAe,GAAG,UAAC,KAAoB;IAC1C,IAAA,MAAM,GAAK,KAAK,OAAV,CAAU;IACxB,IAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAA;IAC/B,IAAM,GAAG,GAAG,IAAA,wBAAW,GAAE,CAAA;IAEnB,IAAA,KAAgD,IAAA,iCAAoB,EACxE;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,UAAU,EAAE,EAAE;QACd,WAAW,EAAE,EAAE;QACf,YAAY,EAAE,IAAI;KACnB,CACF,EARM,KAAK,QAAA,EAAE,QAAQ,QAAA,EAAE,YAAY,QAAA,EAAE,YAAY,QAQjD,CAAA;IACD,iBAAiB;IACjB,eAAK,CAAC,SAAS,CAAC;QACd,IAAM,SAAS,GAAG,IAAI,iCAAoB,EAAE,CAAA;QAC5C,IAAM,aAAa,GAAG,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;QACjE,IAAI,CAAC,aAAa,EAAE;YACZ,IAAA,KAA+C,MAAM,CAAC,SAAS,EAAE,EAA/D,qBAAmB,yBAAA,EAAE,qBAAmB,yBAAuB,CAAA;YACvE,IAAM,CAAC,GAAG,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC;gBACvC,EAAE,EAAE,OAAO;gBACX,YAAY,EAAE,cAAM,OAAA,YAAY,EAAZ,CAAY;gBAChC,WAAW,EAAE,UAAM,IAAI;;;;;qCACjB,qBAAmB,EAAnB,wBAAmB;gCACrB,qBAAM,qBAAmB,CAAC,IAAI,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,EAAA;;gCAA5D,SAA4D,CAAA;;;qCAE1D,qBAAmB,EAAnB,wBAAmB;gCACf,kBAAkB,GAAG,UAAA,YAAY;oCACrC,IAAI,CAAC,QAAQ,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC,EAA/B,CAA+B,CAAC,CAAA;gCACrD,CAAC,CAAA;gCACD,qBAAM,qBAAmB,CAAC,GAAG,CAAC,YAAY,EAAE,kBAAkB,CAAC,EAAA;;gCAA/D,SAA+D,CAAA;;oCAEjE,sBAAO,SAAS,EAAA;;;qBACjB;aACF,CAAC,CAAA;YACF,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;SAClB;QACD,OAAO;YACL,SAAS,CAAC,OAAO,EAAE,CAAA;QACrB,CAAC,CAAA;QACD,+BAA+B;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,YAAY,cAAA,EAAE,KAAK,OAAA,EAAE,QAAQ,UAAA,EAAE,YAAY,cAAA,EAAE,CAAA;AACxD,CAAC,CAAA;AA7CY,QAAA,eAAe,mBA6C3B"}

package/lib/canvas-toolbar/style/index.css

@@ -0,0 +1,326 @@
+.x6-dropdown {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  z-index: 9999;
+  display: block;
+  max-height: 320px;
+  overflow-y: scroll;
+  border-radius: 3px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+}
+.x6-dropdown-hidden {
+  display: none;
+}
+.x6-dropdown-overlay {
+  display: inline-block;
+}
+.x6-dropdown.slide-down-enter.slide-down-enter-active.x6-dropdown-placement-bottomLeft,
+.x6-dropdown.slide-down-appear.slide-down-appear-active.x6-dropdown-placement-bottomLeft,
+.x6-dropdown.slide-down-enter.slide-down-enter-active.x6-dropdown-placement-bottomCenter,
+.x6-dropdown.slide-down-appear.slide-down-appear-active.x6-dropdown-placement-bottomCenter,
+.x6-dropdown.slide-down-enter.slide-down-enter-active.x6-dropdown-placement-bottomRight,
+.x6-dropdown.slide-down-appear.slide-down-appear-active.x6-dropdown-placement-bottomRight {
+  animation-name: x6SlideUpIn;
+}
+.x6-dropdown.slide-up-enter.slide-up-enter-active.x6-dropdown-placement-topLeft,
+.x6-dropdown.slide-up-appear.slide-up-appear-active.x6-dropdown-placement-topLeft,
+.x6-dropdown.slide-up-enter.slide-up-enter-active.x6-dropdown-placement-topCenter,
+.x6-dropdown.slide-up-appear.slide-up-appear-active.x6-dropdown-placement-topCenter,
+.x6-dropdown.slide-up-enter.slide-up-enter-active.x6-dropdown-placement-topRight,
+.x6-dropdown.slide-up-appear.slide-up-appear-active.x6-dropdown-placement-topRight {
+  animation-name: x6SlideDownIn;
+}
+.x6-dropdown.slide-down-leave.slide-down-leave-active.x6-dropdown-placement-bottomLeft,
+.x6-dropdown.slide-down-leave.slide-down-leave-active.x6-dropdown-placement-bottomCenter,
+.x6-dropdown.slide-down-leave.slide-down-leave-active.x6-dropdown-placement-bottomRight {
+  animation-name: x6SlideUpOut;
+}
+.x6-dropdown.slide-up-leave.slide-up-leave-active.x6-dropdown-placement-topLeft,
+.x6-dropdown.slide-up-leave.slide-up-leave-active.x6-dropdown-placement-topCenter,
+.x6-dropdown.slide-up-leave.slide-up-leave-active.x6-dropdown-placement-topRight {
+  animation-name: x6SlideDownOut;
+}
+@keyframes x6SlideUpIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@keyframes x6SlideUpOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+@keyframes x6SlideDownIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@keyframes x6SlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+.x6-toolbar {
+  display: flex;
+  flex-direction: row;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  padding-left: 4px;
+  overflow: hidden;
+}
+.x6-toolbar-content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.x6-toolbar-content-inner,
+.x6-toolbar-content-extras,
+.x6-toolbar-group,
+.x6-toolbar-item,
+.x6-toolbar-item-icon,
+.x6-toolbar-item-text {
+  display: flex;
+  flex-direction: row;
+}
+.x6-toolbar-content-extras {
+  align-content: center;
+  align-items: center;
+  font-size: 14px;
+}
+.x6-toolbar-group::before {
+  align-self: center;
+  width: 1px;
+  height: 40%;
+  margin: 0 6px;
+  background-color: rgba(0, 0, 0, 0.15);
+  content: ' ';
+  pointer-events: none;
+}
+.x6-toolbar-group:first-child::before {
+  content: none;
+}
+.x6-toolbar-item {
+  align-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0 4px;
+  color: #595959;
+  background-color: transparent;
+  border: 0;
+  border-radius: 2px;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
+  user-select: none;
+}
+.x6-toolbar-item.x6-toolbar-item-hidden {
+  display: none;
+}
+.x6-toolbar-item.x6-toolbar-item-disabled,
+.x6-toolbar-item.x6-toolbar-item-disabled:hover {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.x6-toolbar-item.x6-toolbar-item-disabled .x6-toolbar-item-icon .x6-toolbar-item:active {
+  transform: none;
+}
+.x6-toolbar-item-icon,
+.x6-toolbar-item-text {
+  align-content: center;
+  align-items: center;
+}
+.x6-toolbar-item-icon {
+  font-size: 14px;
+  transition: transform 50ms ease;
+}
+.x6-toolbar-item-icon:active {
+  transform: scale(1.27201965);
+}
+.x6-toolbar-item-text {
+  padding-left: 4px;
+  font-size: 12px;
+}
+.x6-toolbar-item-dropdown-wrap {
+  margin-top: -13px;
+}
+.x6-toolbar-item-dropdown-arrow {
+  width: 0;
+  height: 0;
+  margin-left: 6px;
+  border-color: #262626 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 4px 0 4px;
+  opacity: 0.4;
+}
+.x6-toolbar.x6-toolbar-hover-effect {
+  height: 32px;
+}
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item {
+  margin: 4px 2px 4px 0;
+  padding: 0 6px;
+  color: #595959;
+}
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item-disabled.x6-toolbar-item:hover {
+  color: #595959;
+  background-color: transparent;
+}
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item-disabled.x6-toolbar-item:hover .x6-toolbar-item-dropdown-arrow {
+  opacity: 0.4;
+}
+.x6-toolbar-item.x6-toolbar-item-active,
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item.x6-toolbar-item-active,
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item:hover {
+  color: #262626;
+  background-color: #e0e0e0;
+}
+.x6-toolbar-item.x6-toolbar-item-active .x6-toolbar-item-dropdown-arrow,
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item.x6-toolbar-item-active .x6-toolbar-item-dropdown-arrow,
+.x6-toolbar.x6-toolbar-hover-effect .x6-toolbar-item:hover .x6-toolbar-item-dropdown-arrow {
+  opacity: 0.75;
+}
+.x6-toolbar-item.x6-toolbar-item-active {
+  margin: 4px 0;
+}
+.x6-toolbar.x6-toolbar-big {
+  height: 32px;
+}
+.x6-toolbar.x6-toolbar-big .x6-toolbar-content-extras {
+  font-size: 16px;
+}
+.x6-toolbar.x6-toolbar-big .x6-toolbar-item {
+  margin: 4px 4px 4px 0;
+  padding: 0 5px;
+  border-radius: 3px;
+}
+.x6-toolbar.x6-toolbar-big .x6-toolbar-item-text {
+  font-size: 14px;
+}
+.x6-toolbar.x6-toolbar-big .x6-toolbar-item-icon {
+  font-size: 16px;
+}
+.x6-toolbar.x6-toolbar-hover-effect.x6-toolbar-big {
+  height: 40px;
+}
+.x6-toolbar.x6-toolbar-hover-effect.x6-toolbar-big .x6-toolbar-item {
+  padding: 0 10px;
+}
+.x6-toolbar.x6-toolbar-small {
+  height: 22px;
+}
+.x6-toolbar.x6-toolbar-small .x6-toolbar-content-extras {
+  font-size: 12px;
+}
+.x6-toolbar.x6-toolbar-small .x6-toolbar-item {
+  padding: 0 3px;
+}
+.x6-toolbar.x6-toolbar-small .x6-toolbar-item-text {
+  margin-right: 2px;
+  padding-left: 2px;
+  font-size: 10px;
+}
+.x6-toolbar.x6-toolbar-small .x6-toolbar-item-icon {
+  font-size: 12px;
+}
+.x6-toolbar.x6-toolbar-small .x6-toolbar-item.x6-toolbar-item-active {
+  margin: 2px 0;
+}
+.x6-toolbar.x6-toolbar-hover-effect.x6-toolbar-small {
+  height: 28px;
+}
+.x6-toolbar.x6-toolbar-hover-effect.x6-toolbar-small .x6-toolbar-item {
+  margin: 4px 2px 4px 0;
+  padding: 0 5px;
+}
+.x6-toolbar.x6-toolbar-hover-effect.x6-toolbar-small .x6-toolbar-item.x6-toolbar-item-active {
+  margin: 4px 2px 4px 0;
+}
+.x6-toolbar.x6-toolbar-align-right .x6-toolbar-content {
+  flex-direction: row-reverse;
+}
+.xflow-toolbar {
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  height: 40px;
+  background: #fff;
+}
+.xflow-toolbar-root {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.xflow-toolbar-root.horizontal-center {
+  justify-content: center;
+}
+.xflow-toolbar-root.vertical {
+  flex-direction: column;
+}
+.xflow-toolbar-root .x6-toolbar.x6-toolbar-hover-effect {
+  align-items: center;
+  height: 100%;
+}
+.xflow-toolbar-root .x6-toolbar-content {
+  height: 100%;
+}
+.xflow-toolbar.vertical {
+  right: unset;
+  left: unset;
+  width: 32px;
+  height: auto;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  box-shadow: 0 0 20px rgb(0 0 0 / 1%);
+}
+.xflow-toolbar.vertical .x6-toolbar.x6-toolbar-hover-effect {
+  height: auto;
+  padding: 8px 0;
+}
+.xflow-toolbar.vertical .x6-toolbar-content-inner,
+.xflow-toolbar.vertical .x6-toolbar-group {
+  flex-direction: column;
+}
+.xflow-toolbar.vertical .x6-toolbar-item {
+  margin: 0;
+  padding: 6px 8px;
+  color: #595959;
+}
+.xflow-toolbar.horizontal {
+  right: 0;
+  left: 0;
+}
+.xflow-toolbar.horizontal .x6-toolbar.x6-toolbar-hover-effect {
+  height: 40px;
+  line-height: 40px;
+}

package/lib/canvas-toolbar/style/index.less

@@ -0,0 +1,61 @@
+@import (once) '~@sunspirytus/xflow-core/es/style/themes/index.less';
+@import (once) '~@antv/x6-react-components/es/toolbar/style/index.less';
+
+@xflow-toolbar-prefix-cls: ~'@{xflow-prefix}-toolbar';
+
+.@{xflow-toolbar-prefix-cls} {
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  height: 40px;
+  background: #fff;
+  &-root {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    &.horizontal-center {
+      justify-content: center;
+    }
+    &.vertical {
+      flex-direction: column;
+    }
+    .@{x6-prefix}-toolbar.x6-toolbar-hover-effect {
+      align-items: center;
+      height: 100%;
+    }
+    .@{x6-prefix}-toolbar-content {
+      height: 100%;
+    }
+  }
+  &.vertical {
+    right: unset;
+    left: unset;
+    width: 32px;
+    height: auto;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    box-shadow: ~'0 0 20px rgb(0 0 0 / 1%)';
+    .@{x6-prefix}-toolbar.@{x6-prefix}-toolbar-hover-effect {
+      height: auto;
+      padding: 8px 0;
+    }
+    .@{x6-prefix}-toolbar-content-inner,
+    .@{x6-prefix}-toolbar-group {
+      flex-direction: column;
+    }
+    .@{x6-prefix}-toolbar-item {
+      margin: 0;
+      padding: 6px 8px;
+      color: #595959;
+    }
+  }
+
+  &.horizontal {
+    right: 0;
+    left: 0;
+    .@{x6-prefix}-toolbar.@{x6-prefix}-toolbar-hover-effect {
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}

package/lib/demo-utils/form-builder/index.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentClass, FunctionComponent } from 'react';
+import type { FormInstance, ButtonProps } from 'antd';
+import type { Rule } from 'rc-field-form/es/interface';
+import React from 'react';
+export interface IFormSchema {
+    name: string;
+    label: string;
+    rules?: Rule[];
+    render: string | FunctionComponent<any> | ComponentClass<any, any>;
+    renderProps?: any;
+    itemProps?: any;
+}
+interface IProps<T> {
+    className?: string;
+    onFinish: (values: T) => Promise<void>;
+    initialValues: T;
+    layout?: 'horizontal' | 'inline' | 'vertical';
+    form: FormInstance;
+    formItems: IFormSchema[];
+    buttonProps?: ButtonProps;
+    submitButton?: React.ReactNode;
+}
+export declare function FormBuilder<T>(props: IProps<T>): any;
+export {};

package/lib/demo-utils/form-builder/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilder = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+function FormBuilder(props) {
+    var className = props.className, layout = props.layout, initialValues = props.initialValues, form = props.form, _a = props.formItems, formItems = _a === void 0 ? [] : _a, onFinish = props.onFinish, submitButton = props.submitButton, buttonProps = props.buttonProps;
+    if (!form) {
+        return null;
+    }
+    var style = layout === 'vertical' ? { padding: '0px 12px' } : { padding: '8px 12px' };
+    return (react_1.default.createElement(antd_1.Form, { size: "small", form: form, style: style, layout: layout, onFinish: onFinish, className: className, initialValues: initialValues, labelCol: layout === 'vertical' ? { span: 24 } : { span: 8 }, wrapperCol: layout === 'vertical' ? { span: 24 } : { span: 16 } },
+        formItems.map(function (item) { return (react_1.default.createElement(antd_1.Form.Item, tslib_1.__assign({ label: item.label, name: item.name, rules: item.rules }, item.itemProps), react_1.default.createElement(item.render, item.renderProps))); }),
+        react_1.default.createElement(antd_1.Form.Item, { wrapperCol: { offset: 0, span: 24 } }, submitButton ? (submitButton) : (react_1.default.createElement(antd_1.Button, tslib_1.__assign({ type: "primary", htmlType: "submit", style: { width: '100%' } }, buttonProps), "\u6267\u884C\u547D\u4EE4")))));
+}
+exports.FormBuilder = FormBuilder;
+//# sourceMappingURL=index.js.map

package/lib/demo-utils/form-builder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/demo-utils/form-builder/index.tsx"],"names":[],"mappings":";;;;AAGA,wDAAyB;AACzB,6BAAmC;AAsBnC,SAAgB,WAAW,CAAI,KAAgB;IAE3C,IAAA,SAAS,GAQP,KAAK,UARE,EACT,MAAM,GAOJ,KAAK,OAPD,EACN,aAAa,GAMX,KAAK,cANM,EACb,IAAI,GAKF,KAAK,KALH,EACJ,KAIE,KAAK,UAJO,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,QAAQ,GAGN,KAAK,SAHC,EACR,YAAY,GAEV,KAAK,aAFK,EACZ,WAAW,GACT,KAAK,YADI,CACJ;IACT,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IACD,IAAM,KAAK,GAAG,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAA;IACvF,OAAO,CACL,8BAAC,WAAI,IACH,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAC5D,UAAU,EAAE,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;QAE9D,SAAS,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CACrB,8BAAC,WAAI,CAAC,IAAI,qBAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAM,IAAI,CAAC,SAAS,GACjF,eAAK,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CACzC,CACb,EAJsB,CAItB,CAAC;QACF,8BAAC,WAAI,CAAC,IAAI,IAAC,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAC3C,YAAY,CAAC,CAAC,CAAC,CACd,YAAY,CACb,CAAC,CAAC,CAAC,CACF,8BAAC,aAAM,qBAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAM,WAAW,8BAEzE,CACV,CACS,CACP,CACR,CAAA;AACH,CAAC;AA3CD,kCA2CC"}

package/lib/demo-utils/index.d.ts

@@ -0,0 +1,2 @@
+export { FormBuilder, IFormSchema } from './form-builder';
+export { randomInt } from './random';

package/lib/demo-utils/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.randomInt = exports.FormBuilder = void 0;
+var form_builder_1 = require("./form-builder");
+Object.defineProperty(exports, "FormBuilder", { enumerable: true, get: function () { return form_builder_1.FormBuilder; } });
+var random_1 = require("./random");
+Object.defineProperty(exports, "randomInt", { enumerable: true, get: function () { return random_1.randomInt; } });
+//# sourceMappingURL=index.js.map

package/lib/demo-utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/demo-utils/index.tsx"],"names":[],"mappings":";;;AAAA,+CAAyD;AAAhD,2GAAA,WAAW,OAAA;AACpB,mCAAoC;AAA3B,mGAAA,SAAS,OAAA"}

package/lib/demo-utils/random/index.d.ts

@@ -0,0 +1 @@
+export declare function randomInt(min: any, max: any): number;

package/lib/demo-utils/random/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.randomInt = void 0;
+function randomInt(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+}
+exports.randomInt = randomInt;
+//# sourceMappingURL=index.js.map

package/lib/demo-utils/random/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/demo-utils/random/index.ts"],"names":[],"mappings":";;;AAAA,SAAgB,SAAS,CAAC,GAAG,EAAE,GAAG;IAChC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;AACtD,CAAC;AAFD,8BAEC"}

package/lib/flowchart-canvas/config-graph.d.ts

@@ -0,0 +1,16 @@
+import type { NsGraph } from '@sunspirytus/xflow-core';
+import type { Edge } from '@antv/x6';
+import type { IFlowchartGraphProps } from './interface';
+export declare namespace NsAddEdgeEvent {
+    const EVENT_NAME = "ADD_FLOWCHART_EDGE_CMD_EVENT";
+    interface IArgs {
+        targetPortId: string;
+        sourcePortId: string;
+        source: string;
+        target: string;
+        edge: Edge;
+        tempEdgeId?: string;
+        attrs?: NsGraph.IEdgeConfig['attrs'];
+    }
+}
+export declare const useGraphConfig: (props?: IFlowchartGraphProps) => any;