@sunspirytus/xflow-extension 1.0.52

package/es/canvas-scale-toolbar/config.js

@@ -0,0 +1,123 @@
+import { __awaiter } from "tslib";
+import { IconStore, MODELS, XFlowGraphCommands } from '@sunspirytus/xflow-core';
+import { ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, CompressOutlined, FullscreenOutlined, FullscreenExitOutlined, } from '@ant-design/icons';
+import { createToolbarConfig } from '../canvas-toolbar';
+export var CANVAS_SCALE_TOOLBAR_CONFIG;
+(function (CANVAS_SCALE_TOOLBAR_CONFIG) {
+    IconStore.set('ZoomInOutlined', ZoomInOutlined);
+    IconStore.set('ZoomOutOutlined', ZoomOutOutlined);
+    IconStore.set('OneToOneOutlined', OneToOneOutlined);
+    IconStore.set('CompressOutlined', CompressOutlined);
+    IconStore.set('FullscreenOutlined', FullscreenOutlined);
+    IconStore.set('FullscreenExitOutlined', FullscreenExitOutlined);
+    CANVAS_SCALE_TOOLBAR_CONFIG.ZOOM_IN = XFlowGraphCommands.GRAPH_ZOOM.id + '-zoom-in';
+    CANVAS_SCALE_TOOLBAR_CONFIG.ZOOM_OUT = XFlowGraphCommands.GRAPH_ZOOM.id + '-zoom-out';
+    CANVAS_SCALE_TOOLBAR_CONFIG.SCALE_TO_ONE = XFlowGraphCommands.GRAPH_ZOOM.id + '-scale-to-one';
+    CANVAS_SCALE_TOOLBAR_CONFIG.SCALE_TO_FIT = XFlowGraphCommands.GRAPH_ZOOM.id + '-scale-to-fit';
+    CANVAS_SCALE_TOOLBAR_CONFIG.FULLSCREEN = XFlowGraphCommands.GRAPH_ZOOM.id + '-fullscreen';
+    CANVAS_SCALE_TOOLBAR_CONFIG.MAX_SCALE = 1.5;
+    CANVAS_SCALE_TOOLBAR_CONFIG.MIN_SCALE = 0.05;
+    CANVAS_SCALE_TOOLBAR_CONFIG.zoomOptions = {
+        maxScale: CANVAS_SCALE_TOOLBAR_CONFIG.MAX_SCALE,
+        minScale: CANVAS_SCALE_TOOLBAR_CONFIG.MIN_SCALE,
+    };
+    CANVAS_SCALE_TOOLBAR_CONFIG.getToolbarConfig = ({ zoomFactor, fullscreen, }) => {
+        return [
+            {
+                name: 'main',
+                items: [
+                    {
+                        id: CANVAS_SCALE_TOOLBAR_CONFIG.ZOOM_IN,
+                        tooltip: '放大',
+                        iconName: 'ZoomInOutlined',
+                        onClick: ({ commandService }) => {
+                            commandService.executeCommand(XFlowGraphCommands.GRAPH_ZOOM.id, {
+                                factor: 0.1,
+                                zoomOptions: CANVAS_SCALE_TOOLBAR_CONFIG.zoomOptions,
+                            });
+                        },
+                    },
+                    {
+                        id: CANVAS_SCALE_TOOLBAR_CONFIG.ZOOM_OUT,
+                        tooltip: '缩小',
+                        iconName: 'ZoomOutOutlined',
+                        onClick: ({ commandService }) => {
+                            commandService.executeCommand(XFlowGraphCommands.GRAPH_ZOOM.id, {
+                                factor: -0.1,
+                                zoomOptions: CANVAS_SCALE_TOOLBAR_CONFIG.zoomOptions,
+                            });
+                        },
+                    },
+                    {
+                        id: CANVAS_SCALE_TOOLBAR_CONFIG.SCALE_TO_ONE,
+                        iconName: 'OneToOneOutlined',
+                        tooltip: '缩放到1:1',
+                        isEnabled: zoomFactor !== 1,
+                        onClick: ({ commandService }) => {
+                            commandService.executeCommand(XFlowGraphCommands.GRAPH_ZOOM.id, {
+                                factor: 'real',
+                                zoomOptions: CANVAS_SCALE_TOOLBAR_CONFIG.zoomOptions,
+                            });
+                        },
+                    },
+                    {
+                        id: CANVAS_SCALE_TOOLBAR_CONFIG.SCALE_TO_FIT,
+                        tooltip: '缩放到适应屏幕',
+                        iconName: 'CompressOutlined',
+                        onClick: ({ commandService }) => {
+                            commandService.executeCommand(XFlowGraphCommands.GRAPH_ZOOM.id, {
+                                factor: 'fit',
+                                zoomOptions: CANVAS_SCALE_TOOLBAR_CONFIG.zoomOptions,
+                            });
+                        },
+                    },
+                    {
+                        id: CANVAS_SCALE_TOOLBAR_CONFIG.FULLSCREEN,
+                        tooltip: !fullscreen ? '全屏' : '退出全屏',
+                        iconName: !fullscreen ? 'FullscreenOutlined' : 'FullscreenExitOutlined',
+                        onClick: ({ commandService }) => {
+                            commandService.executeCommand(XFlowGraphCommands.GRAPH_FULLSCREEN.id, {});
+                        },
+                    },
+                ],
+            },
+        ];
+    };
+})(CANVAS_SCALE_TOOLBAR_CONFIG || (CANVAS_SCALE_TOOLBAR_CONFIG = {}));
+export const TOOLBAR_TYPE = 'CANVAS_SCALE_TOOLBAR';
+export const useConfig = createToolbarConfig(config => {
+    config.setToolbarModelService((model, modelService) => __awaiter(void 0, void 0, void 0, function* () {
+        const graphScale = yield MODELS.GRAPH_SCALE.useValue(modelService);
+        /** 设置初始值*/
+        model.setValue(m => {
+            m.mainGroups = CANVAS_SCALE_TOOLBAR_CONFIG.getToolbarConfig({
+                zoomFactor: graphScale.zoomFactor,
+                fullscreen: false,
+            });
+        });
+        const graphFullscreenModel = yield MODELS.GRAPH_FULLSCREEN.getModel(modelService);
+        /** 初始化全屏默认值 */
+        graphFullscreenModel.setValue(false);
+        /** 全屏 */
+        graphFullscreenModel.watch(fullscreen => {
+            model.setValue(m => {
+                m.mainGroups = CANVAS_SCALE_TOOLBAR_CONFIG.getToolbarConfig({
+                    zoomFactor: graphScale.zoomFactor,
+                    fullscreen,
+                });
+            });
+        });
+        const graphScaleModel = yield MODELS.GRAPH_SCALE.getModel(modelService);
+        /** graphScaleModel更新时联动 Toolbar*/
+        graphScaleModel.watch(({ zoomFactor }) => __awaiter(void 0, void 0, void 0, function* () {
+            const fullscreen = yield MODELS.GRAPH_FULLSCREEN.useValue(modelService);
+            model.setValue(m => {
+                m.mainGroups = CANVAS_SCALE_TOOLBAR_CONFIG.getToolbarConfig({
+                    zoomFactor,
+                    fullscreen,
+                });
+            });
+        }));
+    }));
+});
+//# sourceMappingURL=config.js.map

package/es/canvas-scale-toolbar/config.js.map

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

package/es/canvas-scale-toolbar/index.d.ts

@@ -0,0 +1,11 @@
+import type { IPosition } from '@sunspirytus/xflow-core';
+import React from 'react';
+import { CANVAS_SCALE_TOOLBAR_CONFIG } from './config';
+interface IProps {
+    position: IPosition;
+    className?: string;
+    layout?: 'vertical' | 'horizontal';
+    style?: React.CSSProperties;
+}
+declare const CanvasScaleToolbar: React.FC<IProps>;
+export { CanvasScaleToolbar, IProps as ICanvasScaleToolbarProps, CANVAS_SCALE_TOOLBAR_CONFIG };

package/es/canvas-scale-toolbar/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CanvasToolbar } from '../canvas-toolbar';
+import { useConfig, CANVAS_SCALE_TOOLBAR_CONFIG } from './config';
+const CanvasScaleToolbar = props => {
+    const config = useConfig(props);
+    return (React.createElement(CanvasToolbar, Object.assign({ layout: "vertical" }, props, { config: config, position: props.position || { top: 12, right: 12 } })));
+};
+export { CanvasScaleToolbar, CANVAS_SCALE_TOOLBAR_CONFIG };
+//# sourceMappingURL=index.js.map

package/es/canvas-scale-toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas-scale-toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AASjE,MAAM,kBAAkB,GAAqB,KAAK,CAAC,EAAE;IACnD,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAC/B,OAAO,CACL,oBAAC,aAAa,kBACZ,MAAM,EAAC,UAAU,IACb,KAAK,IACT,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAClD,CACH,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAsC,2BAA2B,EAAE,CAAA"}

package/es/canvas-snapline/components/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IProps {
+    color?: string;
+}
+export declare const CONFIG_TYPE = "CanvasSnapline";
+/** 默认颜色 */
+export declare const SNAPLINE_COLOR = "#faad14";
+export declare const CanvasSnapline: React.FC<IProps>;

package/es/canvas-snapline/components/index.js

@@ -0,0 +1,32 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { createModule } from '../module';
+import { XFlowAppExtensionModule, useExtensionRegistry, insertCss } from '@sunspirytus/xflow-core';
+export const CONFIG_TYPE = 'CanvasSnapline';
+/** 默认颜色 */
+export const SNAPLINE_COLOR = '#faad14';
+export const CanvasSnapline = props => {
+    const { color = SNAPLINE_COLOR } = props;
+    const extension = useExtensionRegistry();
+    const config = React.useMemo(() => ({
+        CONFIG_TYPE,
+        getConfig: () => __awaiter(void 0, void 0, void 0, function* () { return ({}); }),
+    }), []);
+    /** 设置css 样式 */
+    React.useEffect(() => {
+        const className = `xflow-snapline-${Date.now()}`;
+        // 多xflow之间隔离
+        extension.addContainerClassNames(className);
+        const cssString = `
+    .${className} .xflow-snapline .x6-widget-snapline-horizontal,
+    .${className} .xflow-snapline .x6-widget-snapline-vertical {
+      border-color: ${color};
+    }`;
+        const $style = insertCss(cssString);
+        return () => {
+            document.head.removeChild($style);
+        };
+    }, [color, extension]);
+    return React.createElement(XFlowAppExtensionModule, { config: config, createModule: createModule });
+};
+//# sourceMappingURL=index.js.map

package/es/canvas-snapline/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/canvas-snapline/components/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAMlG,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAA;AAC3C,WAAW;AACX,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAA;AAEvC,MAAM,CAAC,MAAM,cAAc,GAAqB,KAAK,CAAC,EAAE;IACtD,MAAM,EAAE,KAAK,GAAG,cAAc,EAAE,GAAG,KAAK,CAAA;IACxC,MAAM,SAAS,GAAG,oBAAoB,EAAE,CAAA;IACxC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,SAAS,EAAE,GAAS,EAAE,kDAAC,OAAA,CAAC,EAAc,CAAA,CAAA,GAAA;KACvC,CAAC,EACF,EAAE,CACH,CAAA;IAED,eAAe;IACf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,GAAG,EAAE,EAAE,CAAA;QAChD,aAAa;QACb,SAAS,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAA;QAE3C,MAAM,SAAS,GAAG;OACf,SAAS;OACT,SAAS;sBACM,KAAK;MACrB,CAAA;QACF,MAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QACnC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IAEtB,OAAO,oBAAC,uBAAuB,IAAU,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,GAAI,CAAA;AACzF,CAAC,CAAA"}

package/es/canvas-snapline/contributions/hook.d.ts

@@ -0,0 +1,12 @@
+import type { ICmdHooks } from '@sunspirytus/xflow-core';
+import { DisposableCollection, Disposable } from '@sunspirytus/xflow-core';
+import { IHookContribution } from '@sunspirytus/xflow-core';
+/**
+ * 内置的hook contribution
+ * 处理 config上的runtime的注册项
+ */
+export declare class HookContribution implements IHookContribution<ICmdHooks> {
+    toDispose: DisposableCollection;
+    registerHookHub: () => Promise<Disposable>;
+    registerHook: (hooks: ICmdHooks) => Promise<Disposable>;
+}

package/es/canvas-snapline/contributions/hook.js

@@ -0,0 +1,39 @@
+import { __awaiter, __decorate } from "tslib";
+import { DisposableCollection, Disposable } from '@sunspirytus/xflow-core';
+import { IHookContribution, ManaSyringe } from '@sunspirytus/xflow-core';
+/**
+ * 内置的hook contribution
+ * 处理 config上的runtime的注册项
+ */
+let HookContribution = class HookContribution {
+    constructor() {
+        this.toDispose = new DisposableCollection();
+        // args: registry: IHookService<ICmdHooks>
+        this.registerHookHub = () => __awaiter(this, void 0, void 0, function* () {
+            return Disposable.create(() => { });
+        });
+        this.registerHook = (hooks) => __awaiter(this, void 0, void 0, function* () {
+            const toDispose = new DisposableCollection();
+            const disposables = [
+                hooks.graphOptions.registerHook({
+                    name: 'add snapline options',
+                    handler: (args) => __awaiter(this, void 0, void 0, function* () {
+                        // 对齐线配置，辅助移动节点排版（详细文档：https://X6.antv.vision/zh/docs/tutorial/basic/snapline）
+                        args.snapline = {
+                            enabled: true,
+                            className: 'xflow-snapline',
+                            clean: 5000,
+                        };
+                    }),
+                }),
+            ];
+            toDispose.pushAll(disposables);
+            return Disposable.create(() => { });
+        });
+    }
+};
+HookContribution = __decorate([
+    ManaSyringe.singleton({ contrib: IHookContribution })
+], HookContribution);
+export { HookContribution };
+//# sourceMappingURL=hook.js.map

package/es/canvas-snapline/contributions/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../src/canvas-snapline/contributions/hook.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAExE;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAgB;IAAtB;QACL,cAAS,GAAG,IAAI,oBAAoB,EAAE,CAAA;QAEtC,0CAA0C;QAC1C,oBAAe,GAAG,GAAS,EAAE;YAC3B,OAAO,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;QACpC,CAAC,CAAA,CAAA;QAED,iBAAY,GAAG,CAAO,KAAgB,EAAE,EAAE;YACxC,MAAM,SAAS,GAAG,IAAI,oBAAoB,EAAE,CAAA;YAC5C,MAAM,WAAW,GAAG;gBAClB,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC;oBAC9B,IAAI,EAAE,sBAAsB;oBAC5B,OAAO,EAAE,CAAM,IAAI,EAAC,EAAE;wBACpB,8EAA8E;wBAC9E,IAAI,CAAC,QAAQ,GAAG;4BACd,OAAO,EAAE,IAAI;4BACb,SAAS,EAAE,gBAAgB;4BAC3B,KAAK,EAAE,IAAI;yBACZ,CAAA;oBACH,CAAC,CAAA;iBACF,CAAC;aACH,CAAA;YACD,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;YAC9B,OAAO,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;QACpC,CAAC,CAAA,CAAA;IACH,CAAC;CAAA,CAAA;AA1BY,gBAAgB;IAD5B,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;GACzC,gBAAgB,CA0B5B;SA1BY,gBAAgB"}

package/es/canvas-snapline/index.d.ts

@@ -0,0 +1,2 @@
+export { CanvasSnapline } from './components';
+export type { IProps as ICanvasSnaplineProps } from './components';

package/es/canvas-snapline/index.js

@@ -0,0 +1,2 @@
+export { CanvasSnapline } from './components';
+//# sourceMappingURL=index.js.map

package/es/canvas-snapline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas-snapline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA"}

package/es/canvas-snapline/module.d.ts

@@ -0,0 +1,8 @@
+import 'reflect-metadata';
+/** Application 扩展依赖 */
+import { ManaSyringe } from '@sunspirytus/xflow-core';
+export interface IConfig {
+}
+/** 依赖扩展模块，必须要加载 */
+declare const createModule: () => ManaSyringe.SyringeModule;
+export { createModule };

package/es/canvas-snapline/module.js

@@ -0,0 +1,13 @@
+import 'reflect-metadata';
+/** Application 扩展依赖 */
+import { ManaSyringe } from '@sunspirytus/xflow-core';
+import { HookContribution } from './contributions/hook';
+/** 依赖扩展模块，必须要加载 */
+const createModule = () => {
+    return ManaSyringe.Module(register => {
+        /** 扩展 runtime hook */
+        register(HookContribution);
+    });
+};
+export { createModule };
+//# sourceMappingURL=module.js.map

package/es/canvas-snapline/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/canvas-snapline/module.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AACzB,uBAAuB;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAIvD,mBAAmB;AACnB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,OAAO,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;QACnC,sBAAsB;QACtB,QAAQ,CAAC,gBAAgB,CAAC,CAAA;IAC5B,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/es/canvas-toolbar/config.d.ts

@@ -0,0 +1,28 @@
+import type { IToolbarModelService, IToolbarCustomRenderService } from './interface';
+export declare const CONFIG_TYPE = "CanvasToolbar";
+export declare class ToolbarConfig {
+    /** config type */
+    readonly CONFIG_TYPE = "CanvasToolbar";
+    /** toolbar model service */
+    private toolbarModelService;
+    /** toolbar toolbarRender */
+    private customRenderService;
+    /** instance id */
+    moduleId: string;
+    /** uuid */
+    constructor();
+    /** 设置toolbar id */
+    setToolbarName: (moduleId: string) => void;
+    /** 通过订阅 modelService 设置toolbar model */
+    setToolbarModelService: (service: IToolbarModelService) => void;
+    /** 设置组件的props */
+    setCustomToolbarRender: (service: IToolbarCustomRenderService) => void;
+    /** 获取Props */
+    getConfig: () => {
+        CONFIG_TYPE: string;
+        toolbarCustomRender: IToolbarCustomRenderService;
+        toolbarModelService: IToolbarModelService;
+    };
+    /** dispose */
+    dispose(): void;
+}

package/es/canvas-toolbar/config.js

@@ -0,0 +1,33 @@
+import { uuidv4 } from '@sunspirytus/xflow-core';
+export const CONFIG_TYPE = 'CanvasToolbar';
+export class ToolbarConfig {
+    /** uuid */
+    constructor() {
+        /** config type */
+        this.CONFIG_TYPE = CONFIG_TYPE;
+        /** 设置toolbar id */
+        this.setToolbarName = (moduleId) => {
+            this.moduleId = CONFIG_TYPE + '__' + moduleId;
+        };
+        /** 通过订阅 modelService 设置toolbar model */
+        this.setToolbarModelService = (service) => {
+            this.toolbarModelService = service;
+        };
+        /** 设置组件的props */
+        this.setCustomToolbarRender = (service) => {
+            this.customRenderService = service;
+        };
+        /** 获取Props */
+        this.getConfig = () => {
+            return {
+                CONFIG_TYPE: this.CONFIG_TYPE,
+                toolbarCustomRender: this.customRenderService,
+                toolbarModelService: this.toolbarModelService,
+            };
+        };
+        this.moduleId = CONFIG_TYPE + '__' + uuidv4();
+    }
+    /** dispose */
+    dispose() { }
+}
+//# sourceMappingURL=config.js.map

package/es/canvas-toolbar/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/canvas-toolbar/config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAGhD,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAA;AAE1C,MAAM,OAAO,aAAa;IASxB,WAAW;IACX;QATA,kBAAkB;QACT,gBAAW,GAAG,WAAW,CAAA;QAWlC,mBAAmB;QACnB,mBAAc,GAAG,CAAC,QAAgB,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,IAAI,GAAG,QAAQ,CAAA;QAC/C,CAAC,CAAA;QACD,wCAAwC;QACxC,2BAAsB,GAAG,CAAC,OAA6B,EAAE,EAAE;YACzD,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAA;QACpC,CAAC,CAAA;QACD,iBAAiB;QACjB,2BAAsB,GAAG,CAAC,OAAoC,EAAE,EAAE;YAChE,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAA;QACpC,CAAC,CAAA;QACD,cAAc;QACd,cAAS,GAAG,GAAG,EAAE;YACf,OAAO;gBACL,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;gBAC7C,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;aAC9C,CAAA;QACH,CAAC,CAAA;QArBC,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,IAAI,GAAG,MAAM,EAAE,CAAA;IAC/C,CAAC;IAqBD,cAAc;IACd,OAAO,KAAI,CAAC;CACb"}

package/es/canvas-toolbar/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ToolbarConfig } from './config';
+import type { IToolbarProps } from './interface';
+export declare const CanvasToolbar: React.FC<IToolbarProps>;
+interface IValueProxy<T> {
+    getValue: () => T;
+}
+export declare const createToolbarConfig: <T extends unknown = any>(addOptions: (config: ToolbarConfig, proxy: IValueProxy<T>) => void) => (value?: T) => any;
+export { IToolbarProps };

package/es/canvas-toolbar/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useXFlowApp } from '@sunspirytus/xflow-core';
+import { ToolbarConfig } from './config';
+import { XFlowToolbar } from './render-components';
+export const CanvasToolbar = props => {
+    const app = useXFlowApp();
+    const hasApp = !!app;
+    /** 获取ContextMenu的配置 */
+    const contextMenuConfig = React.useMemo(() => (props.config ? props.config : new ToolbarConfig()), [props.config]);
+    if (!hasApp) {
+        return null;
+    }
+    return React.createElement(XFlowToolbar, Object.assign({}, props, { config: contextMenuConfig }));
+};
+export const createToolbarConfig = (addOptions) => (value) => {
+    /** bridge config and value */
+    const proxy = React.useMemo(() => ({ getValue: () => ({}) }), []);
+    proxy.getValue = () => value;
+    /** 生成config */
+    const toolbarConfig = React.useMemo(() => {
+        const config = new ToolbarConfig();
+        addOptions(config, proxy);
+        return config;
+    }, [proxy]);
+    return toolbarConfig;
+};
+//# sourceMappingURL=index.js.map

package/es/canvas-toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas-toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAGlD,MAAM,CAAC,MAAM,aAAa,GAA4B,KAAK,CAAC,EAAE;IAC5D,MAAM,GAAG,GAAG,WAAW,EAAE,CAAA;IACzB,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,CAAA;IACpB,uBAAuB;IACvB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,EAAE,CAAC,EACzD,CAAC,KAAK,CAAC,MAAM,CAAC,CACf,CAAA;IAED,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,oBAAC,YAAY,oBAAK,KAAK,IAAE,MAAM,EAAE,iBAAiB,IAAI,CAAA;AAC/D,CAAC,CAAA;AAOD,MAAM,CAAC,MAAM,mBAAmB,GAC9B,CAA0B,UAAkE,EAAE,EAAE,CAChG,CAAC,KAAS,EAAE,EAAE;IACZ,8BAA8B;IAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAQ,CAAA,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IACtE,KAAK,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,KAAK,CAAA;IAC5B,eAAe;IACf,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,MAAM,GAAG,IAAI,aAAa,EAAE,CAAA;QAClC,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;QACzB,OAAO,MAAM,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA"}

package/es/canvas-toolbar/interface.d.ts

@@ -0,0 +1,19 @@
+import type { IPosition, IModelService, IToolbarModel, IToolbarLayout, DisposableCollection, IToolbarOptions } from '@sunspirytus/xflow-core';
+import type React from 'react';
+import type { ToolbarConfig } from './config';
+export interface IToolbarProps {
+    config: ToolbarConfig;
+    layout: IToolbarLayout;
+    position: IPosition;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export interface IToolbarModelService {
+    (model: IToolbarModel, modelService: IModelService, toDispose: DisposableCollection): Promise<void>;
+}
+export interface IToolbarCustomRenderService {
+    (modelService: IModelService, updateComponent: (fc: React.FC<IToolbarCustomRenderProps>) => void): Promise<React.FC<IToolbarCustomRenderProps> | undefined>;
+}
+export interface IToolbarCustomRenderProps {
+    config: IToolbarOptions;
+}

package/es/canvas-toolbar/interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interface.js.map

package/es/canvas-toolbar/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/canvas-toolbar/interface.tsx"],"names":[],"mappings":""}

package/es/canvas-toolbar/render-components/index.d.ts

@@ -0,0 +1,2 @@
+/** connect 数据 */
+export declare const XFlowToolbar: any;

package/es/canvas-toolbar/render-components/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Spin } from 'antd';
+import classnames from 'classnames';
+import { usePositionStyle } from '@sunspirytus/xflow-core';
+// component
+import { Toolbar } from '@antv/x6-react-components';
+import { ToolbarGroup } from './toolbar-group';
+import { useToolbarModel } from '../service';
+import classNames from 'classnames';
+/** render toolbar */
+const ToolbarRender = props => {
+    const { idx, groups, layout, toolbarOptions } = props;
+    const { hoverEffect = true } = toolbarOptions;
+    return (React.createElement(Toolbar, { hoverEffect: hoverEffect }, groups.map((g, gIdx) => {
+        const key = idx + gIdx;
+        return React.createElement(ToolbarGroup, { key: key, group: g, layout: layout });
+    })));
+};
+const InnerRender = props => {
+    const { isModelReady, state } = useToolbarModel(props);
+    const positionStyle = usePositionStyle(props.position);
+    const { mainGroups = [], extraGroups = [], layout, customRender } = state;
+    const containerClz = classNames(props.className, layout, 'xflow-toolbar');
+    const clz = classnames({
+        [layout]: true,
+        ['xflow-toolbar-root']: true,
+    });
+    // loading
+    if (!isModelReady) {
+        return (React.createElement("div", { className: containerClz, style: Object.assign(Object.assign({}, positionStyle), props.style) },
+            React.createElement(Spin, { spinning: true, size: "small" })));
+    }
+    // render custom component
+    if (customRender) {
+        return (React.createElement("div", { className: containerClz, style: Object.assign(Object.assign({}, positionStyle), props.style) }, React.createElement(customRender, { config: state })));
+    }
+    // render toolbars
+    return (React.createElement("div", { className: containerClz, style: Object.assign(Object.assign({}, positionStyle), props.style) },
+        React.createElement("div", { className: clz },
+            mainGroups.length > 0 && (React.createElement(ToolbarRender, { idx: "mainGroups", groups: mainGroups, layout: layout, toolbarOptions: state })),
+            extraGroups.length > 0 && (React.createElement(ToolbarRender, { idx: "extraGroups", groups: extraGroups, layout: layout, toolbarOptions: state })))));
+};
+/** connect 数据 */
+export const XFlowToolbar = React.memo(InnerRender);
+//# sourceMappingURL=index.js.map

package/es/canvas-toolbar/render-components/index.js.map

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

package/es/canvas-toolbar/render-components/toolbar-group.d.ts

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

package/es/canvas-toolbar/render-components/toolbar-group.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Toolbar } from '@antv/x6-react-components';
+import { uuidv4 } from '@sunspirytus/xflow-core';
+import { ToolbarItem } from './toolbar-item';
+export const ToolbarGroup = props => {
+    const { group, layout } = props;
+    const groupKey = React.useMemo(() => {
+        return group.name || uuidv4();
+    }, [group.name]);
+    const { items = [] } = group;
+    if (items.length === 0) {
+        return null;
+    }
+    const clz = classnames({
+        ['xflow-toolbar-group']: true,
+    });
+    return (React.createElement(Toolbar.Group, { className: clz, key: groupKey }, items.map(item => (React.createElement(ToolbarItem, { item: item, layout: layout, key: item.id })))));
+};
+//# sourceMappingURL=toolbar-group.js.map

package/es/canvas-toolbar/render-components/toolbar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-group.js","sourceRoot":"","sources":["../../../src/canvas-toolbar/render-components/toolbar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C,MAAM,CAAC,MAAM,YAAY,GAAqB,KAAK,CAAC,EAAE;IACpD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAC/B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,KAAK,CAAC,IAAI,IAAI,MAAM,EAAE,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAA;IAChB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,KAAK,CAAA;IAE5B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,GAAG,GAAG,UAAU,CAAC;QACrB,CAAC,qBAAqB,CAAC,EAAE,IAAI;KAC9B,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,OAAO,CAAC,KAAK,IAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,IACzC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAC1D,CAAC,CACY,CACjB,CAAA;AACH,CAAC,CAAA"}

package/es/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/es/canvas-toolbar/render-components/toolbar-item.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Toolbar } from '@antv/x6-react-components';
+import { useXFlowApp } from '@sunspirytus/xflow-core';
+import { IconStore } from '@sunspirytus/xflow-core';
+export const ToolbarItem = props => {
+    const app = useXFlowApp();
+    const { item, layout } = props;
+    const clz = classnames({
+        ['xflow-toolbar-item']: true,
+    });
+    const text = layout === 'vertical' ? '' : item.text;
+    let icon = undefined;
+    if (item.icon) {
+        icon = item.icon;
+    }
+    else if (item.iconName) {
+        const Icon = IconStore.get(item.iconName);
+        icon = React.createElement(Icon, null);
+    }
+    const ToolbarItemWrap = item.render;
+    const { isEnabled = true } = item;
+    const { commandService, modelService } = app;
+    const onItemClick = () => {
+        if (item.onClick) {
+            item.onClick({ toolbarItem: item, commandService, modelService });
+        }
+    };
+    if (ToolbarItemWrap) {
+        return (React.createElement(ToolbarItemWrap, Object.assign({}, item, { onClick: onItemClick }),
+            React.createElement(Toolbar.Item, Object.assign({}, item, { icon: icon, text: text, className: clz, disabled: !isEnabled, tooltip: item.tooltip || item.text, tooltipProps: Object.assign({ placement: layout === 'vertical' ? 'left' : 'bottom' }, item.tooltipProps), onClick: () => { } }))));
+    }
+    return (React.createElement(Toolbar.Item, Object.assign({}, item, { icon: icon, text: text, className: clz, hidden: !item, disabled: !isEnabled, tooltip: item.tooltip || item.text, onClick: onItemClick, tooltipProps: Object.assign(Object.assign({}, item.tooltipProps), { placement: layout === 'vertical' ? 'left' : 'bottom' }) })));
+};
+//# sourceMappingURL=toolbar-item.js.map

package/es/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,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAQnD,MAAM,CAAC,MAAM,WAAW,GAAqB,KAAK,CAAC,EAAE;IACnD,MAAM,GAAG,GAAG,WAAW,EAAE,CAAA;IACzB,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAC9B,MAAM,GAAG,GAAG,UAAU,CAAC;QACrB,CAAC,oBAAoB,CAAC,EAAE,IAAI;KAC7B,CAAC,CAAA;IACF,MAAM,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,MAAM,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACzC,IAAI,GAAG,oBAAC,IAAI,OAAG,CAAA;KAChB;IAED,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAA;IACnC,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAA;IACjC,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,GAAG,CAAA;IAC5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC,CAAA;SAClE;IACH,CAAC,CAAA;IACD,IAAI,eAAe,EAAE;QACnB,OAAO,CACL,oBAAC,eAAe,oBAAK,IAAI,IAAE,OAAO,EAAE,WAAW;YAC7C,oBAAC,OAAO,CAAC,IAAI,oBACP,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,kBACV,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IACjD,IAAI,CAAC,YAAY,GAEtB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,IACjB,CACc,CACnB,CAAA;KACF;IAED,OAAO,CACL,oBAAC,OAAO,CAAC,IAAI,oBACP,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,kCACP,IAAI,CAAC,YAAY,KACpB,SAAS,EAAE,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,OAEtD,CACH,CAAA;AACH,CAAC,CAAA"}

package/es/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 {};