@sunspirytus/xflow-extension 1.0.52

package/es/flowchart-canvas/config-graph.js

@@ -0,0 +1,212 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import { ConfigProvider, Tooltip } from 'antd';
+import merge from 'lodash/merge';
+import { createGraphConfig } from '@sunspirytus/xflow-core';
+import { Shape } from '@antv/x6';
+import { NODE_HEIGHT, ASPECTRATIONODE, setNodeRender, setGroupRender, } from '../flowchart-node-panel';
+import { movedNode, resizeNode, changePortsVisible, addTools, removeTools, setProps } from './utils';
+/** 临时边 */
+const TEMP_EGDE = 'flowchart-connecting-edge';
+/** 自定义React节点 */
+const ANT_PREFIX = 'ant';
+export var NsAddEdgeEvent;
+(function (NsAddEdgeEvent) {
+    NsAddEdgeEvent.EVENT_NAME = 'ADD_FLOWCHART_EDGE_CMD_EVENT';
+})(NsAddEdgeEvent || (NsAddEdgeEvent = {}));
+const defaultEdgeConfig = {
+    attrs: {
+        line: {
+            stroke: '#A2B1C3',
+            targetMarker: {
+                name: 'block',
+                width: 12,
+                height: 8,
+            },
+            strokeDasharray: '5 5',
+            strokeWidth: 1,
+        },
+    },
+};
+const XFlowEdge = Shape.Edge.registry.register('xflow', Shape.Edge.define({
+    zIndex: 1,
+    highlight: true,
+    name: TEMP_EGDE,
+    label: '',
+    anchor: {
+        name: 'midSide',
+        args: {
+            dx: 10,
+        },
+    },
+    attrs: defaultEdgeConfig.attrs,
+    data: {
+        label: '',
+    },
+}), true);
+export const useGraphConfig = createGraphConfig((config, proxy) => {
+    const { config: canvasConfig = {}, useConfig, mode = 'edit', showPortsOnNodeSelected = false, edgeConfig = {}, } = proxy.getValue();
+    config.setEdgeTypeParser(edge => edge === null || edge === void 0 ? void 0 : edge.renderKey);
+    /** 这里比较黑，props 共享*/
+    setProps(Object.assign(Object.assign({}, proxy.getValue()), { graphConfig: config }));
+    setNodeRender(config);
+    setGroupRender(config);
+    config.setX6Config(merge({
+        grid: true,
+        history: true,
+        resizing: {
+            enabled: true,
+            minWidth: NODE_HEIGHT,
+            minHeight: NODE_HEIGHT,
+            preserveAspectRatio: shape => {
+                const { data } = shape;
+                return ASPECTRATIONODE.includes(data.name);
+            },
+        },
+        snapline: {
+            enabled: true,
+        },
+        connecting: {
+            router: 'manhattan',
+            connector: {
+                name: 'rounded',
+                args: {
+                    radius: 8,
+                },
+            },
+            anchor: 'center',
+            connectionPoint: 'anchor',
+            allowBlank: false,
+            snap: {
+                radius: 20,
+            },
+            createEdge() {
+                const tempEdge = new XFlowEdge({});
+                this.once('edge:connected', args => {
+                    const { edge, isNew } = args;
+                    /** 没有edge:connected时，会导致graph.once的事件没有执行 */
+                    if (isNew && edge && edge.isEdge() && tempEdge === edge) {
+                        const targetNode = edge.getTargetCell();
+                        if (targetNode && targetNode.isNode()) {
+                            const targetPortId = edge.getTargetPortId();
+                            const sourcePortId = edge.getSourcePortId();
+                            const sourceCellId = edge.getSourceCellId();
+                            const targetCellId = edge.getTargetCellId();
+                            const customEdgeConfig = typeof edgeConfig === 'function' ? edgeConfig(edge) : edgeConfig;
+                            this.trigger(NsAddEdgeEvent.EVENT_NAME, Object.assign({ targetPortId,
+                                sourcePortId, source: sourceCellId, target: targetCellId, edge: edge, tempEdgeId: tempEdge.id }, merge(defaultEdgeConfig, customEdgeConfig)));
+                        }
+                    }
+                });
+                return tempEdge;
+            },
+            validateEdge: args => {
+                var _a;
+                const { edge } = args;
+                return !!((_a = edge === null || edge === void 0 ? void 0 : edge.target) === null || _a === void 0 ? void 0 : _a.port);
+            },
+            // 是否触发交互事件
+            validateMagnet() {
+                // 所有锚点均可触发
+                return true;
+            },
+            // 显示可用的链接桩
+            validateConnection({ sourceView, targetView, targetMagnet }) {
+                // 不允许连接到自己
+                if (sourceView === targetView) {
+                    return false;
+                }
+                const node = targetView.cell;
+                // 判断目标链接桩是否可连接
+                if (targetMagnet) {
+                    const portId = targetMagnet.getAttribute('port');
+                    const port = node.getPort(portId);
+                    return !(port && port.connected);
+                }
+                return;
+            },
+        },
+        highlighting: {
+            nodeAvailable: {
+                name: 'className',
+                args: {
+                    className: 'available',
+                },
+            },
+            magnetAvailable: {
+                name: 'className',
+                args: {
+                    className: 'available',
+                },
+            },
+            magnetAdsorbed: {
+                name: 'className',
+                args: {
+                    className: 'adsorbed',
+                },
+            },
+        },
+        onPortRendered(args) {
+            const { port } = args;
+            const { contentSelectors } = args;
+            const container = contentSelectors && contentSelectors.content;
+            const placement = port.group;
+            const clz = classnames('xflow-port', { connected: port.connected });
+            if (container) {
+                ReactDOM.render((React.createElement(ConfigProvider, { prefixCls: ANT_PREFIX },
+                    React.createElement(Tooltip, { title: port.tooltip, placement: placement },
+                        React.createElement("span", { className: clz })))), container);
+            }
+        },
+    }, canvasConfig));
+    /** 内交互，上层通过实例绑定 */
+    config.setEvents([
+        {
+            eventName: 'node:selected',
+            callback: () => {
+                mode === 'edit' && changePortsVisible(false);
+            },
+        },
+        {
+            eventName: 'edge:dblclick',
+            callback: e => {
+                addTools(e);
+            },
+        },
+        {
+            eventName: 'edge:mouseleave',
+            callback: (e, cmds) => {
+                removeTools(e, cmds);
+            },
+        },
+        {
+            eventName: 'node:mouseenter',
+            callback: e => {
+                mode === 'edit' && changePortsVisible(true, e, showPortsOnNodeSelected);
+            },
+        },
+        {
+            eventName: 'node:mouseleave',
+            callback: e => {
+                changePortsVisible(false, e);
+            },
+        },
+        {
+            eventName: 'node:moved',
+            callback: (e, cmds) => {
+                movedNode(e, cmds);
+            },
+        },
+        {
+            eventName: 'node:resized',
+            callback: (e, cmds) => {
+                resizeNode(e, cmds);
+            },
+        },
+    ]);
+    if (typeof useConfig === 'function') {
+        useConfig(config);
+    }
+});
+//# sourceMappingURL=config-graph.js.map

package/es/flowchart-canvas/config-graph.js.map

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

package/es/flowchart-canvas/extension/components/index.css

@@ -0,0 +1,65 @@
+.flowchart-extension-container .x6-edge {
+  stroke-width: 1px;
+}
+.flowchart-extension-container .x6-edge.success path:nth-child(2) {
+  stroke: #888 !important;
+}
+.flowchart-extension-container .x6-edge.success path:nth-child(3) {
+  fill: #888 !important;
+  stroke: #888 !important;
+}
+.flowchart-extension-container .x6-edge.error {
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge.error path:nth-child(2) {
+  stroke: rgba(245, 34, 45, 0.45) !important;
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge.guideProcessing path:nth-child(2) {
+  stroke: rgba(57, 202, 116, 0.8);
+  stroke-width: 2px;
+  stroke-dasharray: 8px, 2px;
+}
+.flowchart-extension-container .x6-edge.guideProcessing path:nth-child(2):local {
+  animation: processing-line 30s infinite linear;
+}
+.flowchart-extension-container .x6-edge.x6-edge-selected path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge:hover path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+.flowchart-extension-container .x6-edge.hoverHighlight path:nth-child(2) {
+  stroke: #1890ff;
+  stroke-width: 2px;
+}
+@keyframes processing-line {
+  to {
+    stroke-dashoffset: -1000;
+  }
+}
+.flowchart-extension-container .x6-widget-transform {
+  margin: -1px 0 0 -1px;
+  padding: 0;
+  border: 1px solid #239edd;
+}
+.flowchart-extension-container .x6-widget-transform > div {
+  border: 1px solid #239edd;
+}
+.flowchart-extension-container .x6-widget-transform > div:hover {
+  background-color: #3dafe4;
+}
+.flowchart-extension-container .x6-widget-transform-active-handle {
+  background-color: #3dafe4;
+}
+.flowchart-extension-container .x6-widget-transform-resize {
+  border-radius: 0;
+}
+.flowchart-extension-container .x6-widget-selection-inner {
+  border: 1px solid #239edd;
+}
+.flowchart-extension-container .x6-widget-selection-box {
+  opacity: 0;
+}

package/es/flowchart-canvas/extension/components/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FlowchartExtension: React.FC<{}>;

package/es/flowchart-canvas/extension/components/index.js

@@ -0,0 +1,26 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { useExtensionRegistry } from '@sunspirytus/xflow-core';
+import { createFlowchartExtensionModule } from '../module';
+export const FlowchartExtension = () => {
+    /** 获取扩展Registry */
+    const extensionRegistry = useExtensionRegistry();
+    const config = React.useMemo(() => ({
+        CONFIG_TYPE: 'FLOWCHART_EXTENSION',
+        getConfig: () => __awaiter(void 0, void 0, void 0, function* () { }),
+    }), []);
+    React.useEffect(() => {
+        /** 注册 extension 到 Registry */
+        const disposable = extensionRegistry.addExtension({
+            config: config,
+            createModule: createFlowchartExtensionModule,
+        });
+        /** 添加 classname */
+        extensionRegistry.addContainerClassNames('flowchart-extension-container');
+        return () => {
+            disposable.dispose();
+        };
+    }, [config, extensionRegistry]);
+    return null;
+};
+//# sourceMappingURL=index.js.map

package/es/flowchart-canvas/extension/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/flowchart-canvas/extension/components/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAA;AAE1D,MAAM,CAAC,MAAM,kBAAkB,GAAiB,GAAG,EAAE;IACnD,mBAAmB;IACnB,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAA;IAChD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,WAAW,EAAE,qBAAqB;QAClC,SAAS,EAAE,GAAS,EAAE,kDAAE,CAAC,CAAA;KAC1B,CAAC,EACF,EAAE,CACH,CAAA;IACD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,8BAA8B;QAC9B,MAAM,UAAU,GAAG,iBAAiB,CAAC,YAAY,CAAC;YAChD,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,8BAA8B;SAC7C,CAAC,CAAA;QACF,mBAAmB;QACnB,iBAAiB,CAAC,sBAAsB,CAAC,+BAA+B,CAAC,CAAA;QAEzE,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,EAAE,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAE/B,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/es/flowchart-canvas/extension/components/index.less

@@ -0,0 +1,78 @@
+.flowchart-extension-container {
+  .x6-edge {
+    stroke-width: 1px;
+    &.success {
+      path:nth-child(2) {
+        stroke: #888 !important;
+      }
+      path:nth-child(3) {
+        fill: #888 !important;
+        stroke: #888 !important;
+      }
+    }
+    &.error {
+      stroke-width: 2px;
+      path:nth-child(2) {
+        stroke: rgba(245, 34, 45, 0.45) !important;
+        stroke-width: 2px;
+      }
+    }
+    &.guideProcessing {
+      path:nth-child(2) {
+        stroke: rgba(57, 202, 116, 0.8);
+        stroke-width: 2px;
+        stroke-dasharray: 8px, 2px;
+        &:local {
+          animation: processing-line 30s infinite linear;
+        }
+      }
+    }
+    &.x6-edge-selected {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    &:hover {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    &.hoverHighlight {
+      path:nth-child(2) {
+        stroke: #1890ff;
+        stroke-width: 2px;
+      }
+    }
+    @keyframes processing-line {
+      to {
+        stroke-dashoffset: -1000;
+      }
+    }
+  }
+
+  .x6-widget-transform {
+    margin: -1px 0 0 -1px;
+    padding: 0;
+    border: 1px solid #239edd;
+  }
+  .x6-widget-transform > div {
+    border: 1px solid #239edd;
+  }
+  .x6-widget-transform > div:hover {
+    background-color: #3dafe4;
+  }
+  .x6-widget-transform-active-handle {
+    background-color: #3dafe4;
+  }
+  .x6-widget-transform-resize {
+    border-radius: 0;
+  }
+  .x6-widget-selection-inner {
+    border: 1px solid #239edd;
+  }
+  .x6-widget-selection-box {
+    opacity: 0;
+  }
+}

package/es/flowchart-canvas/extension/contributions/flow.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 FlowHooksContribution implements IHookContribution<ICmdHooks> {
+    toDispose: DisposableCollection;
+    registerHookHub: () => Promise<Disposable>;
+    registerHook: (hooks: ICmdHooks) => Promise<Disposable>;
+}

package/es/flowchart-canvas/extension/contributions/flow.js

@@ -0,0 +1,75 @@
+import { __awaiter, __decorate, __rest } from "tslib";
+import { singleton } from 'mana-syringe';
+import { DisposableCollection, Disposable, XFlowEdgeCommands, XFlowNodeCommands, } from '@sunspirytus/xflow-core';
+import { IHookContribution } from '@sunspirytus/xflow-core';
+import { NsAddEdgeEvent } from '../../config-graph';
+import { getProps } from '../../utils';
+/**
+ * 内置的hook contribution
+ * 处理 config上的runtime的注册项
+ */
+let FlowHooksContribution = class FlowHooksContribution {
+    constructor() {
+        this.toDispose = new DisposableCollection();
+        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.afterGraphInit.registerHook({
+                    name: 'call add edge to replace temp edge',
+                    handler: (handlerArgs) => __awaiter(this, void 0, void 0, function* () {
+                        const { commandService, graph } = handlerArgs;
+                        graph.on(NsAddEdgeEvent.EVENT_NAME, (args) => __awaiter(this, void 0, void 0, function* () {
+                            const { edge } = args, edgeConfig = __rest(args, ["edge"]);
+                            const { tempEdgeId } = edgeConfig, rest = __rest(edgeConfig, ["tempEdgeId"]);
+                            const config = {
+                                edgeConfig: Object.assign(Object.assign({}, rest), { 
+                                    // renderKey: FLOWCHART_EDGE, // 暂不支持
+                                    source: {
+                                        cell: edgeConfig.source,
+                                        port: edgeConfig.sourcePortId,
+                                    }, target: {
+                                        cell: edgeConfig.target,
+                                        port: edgeConfig.targetPortId,
+                                    }, zIndex: 1, data: Object.assign({}, rest) }),
+                            };
+                            yield commandService.executeCommand(XFlowEdgeCommands.ADD_EDGE.id, config);
+                            /** 删除 createEdge() 产生的 tempEdge */
+                            yield commandService.executeCommand(XFlowEdgeCommands.DEL_EDGE.id, {
+                                edgeConfig: {
+                                    id: tempEdgeId,
+                                },
+                            });
+                            /**
+                             * 新增边时更新入边、出边信息
+                             * @link https://github.com/ant-design/ant-design-charts/issues/1189
+                             */
+                            const sourceNode = graph.getCellById(edgeConfig.source);
+                            const targetNode = graph.getCellById(edgeConfig.target);
+                            yield commandService.executeCommand(XFlowNodeCommands.UPDATE_NODE.id, {
+                                nodeConfig: Object.assign(Object.assign({}, sourceNode.data), { incomingEdges: graph.getIncomingEdges(sourceNode), outgoingEdges: graph.getOutgoingEdges(sourceNode) }),
+                            });
+                            yield commandService.executeCommand(XFlowNodeCommands.UPDATE_NODE.id, {
+                                nodeConfig: Object.assign(Object.assign({}, targetNode.data), { incomingEdges: graph.getIncomingEdges(targetNode), outgoingEdges: graph.getOutgoingEdges(targetNode) }),
+                            });
+                            const onAddEdge = getProps('onAddEdge');
+                            if (typeof onAddEdge === 'function') {
+                                onAddEdge(config.edgeConfig);
+                            }
+                            args.edge.remove();
+                        }));
+                    }),
+                }),
+            ];
+            toDispose.pushAll(disposables);
+            return Disposable.create(() => { });
+        });
+    }
+};
+FlowHooksContribution = __decorate([
+    singleton({ contrib: IHookContribution })
+], FlowHooksContribution);
+export { FlowHooksContribution };
+//# sourceMappingURL=flow.js.map

package/es/flowchart-canvas/extension/contributions/flow.js.map

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

package/es/flowchart-canvas/extension/module.d.ts

@@ -0,0 +1,5 @@
+import 'reflect-metadata';
+import { FlowchartExtension } from './components';
+/** 依赖扩展模块，必须要加载 */
+declare const createFlowchartExtensionModule: () => import("mana-syringe").SyringeModule;
+export { createFlowchartExtensionModule, FlowchartExtension };

package/es/flowchart-canvas/extension/module.js

@@ -0,0 +1,14 @@
+import 'reflect-metadata';
+/** Application 扩展依赖 */
+import { Module } from 'mana-syringe';
+import { FlowHooksContribution } from './contributions/flow';
+import { FlowchartExtension } from './components';
+/** 依赖扩展模块，必须要加载 */
+const createFlowchartExtensionModule = () => {
+    return Module(register => {
+        /** 扩展 runtime hook */
+        register(FlowHooksContribution);
+    });
+};
+export { createFlowchartExtensionModule, FlowchartExtension };
+//# sourceMappingURL=module.js.map

package/es/flowchart-canvas/extension/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../../src/flowchart-canvas/extension/module.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AACzB,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEjD,mBAAmB;AACnB,MAAM,8BAA8B,GAAG,GAAG,EAAE;IAC1C,OAAO,MAAM,CAAC,QAAQ,CAAC,EAAE;QACvB,sBAAsB;QACtB,QAAQ,CAAC,qBAAqB,CAAC,CAAA;IACjC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,OAAO,EAAE,8BAA8B,EAAE,kBAAkB,EAAE,CAAA"}

package/es/flowchart-canvas/index.css

@@ -0,0 +1,71 @@
+.flowchart-extension-container.xflow-app-workspace {
+  overflow: hidden;
+  border: 1px solid #d9d9d9;
+}
+.flowchart-extension-container.xflow-app-workspace .xflow-workspace-panel {
+  z-index: 1;
+  background: #fff;
+}
+.flowchart-extension-container.xflow-app-workspace svg {
+  overflow: visible !important;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge {
+  stroke-width: 1px;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge.x6-edge-selected path:nth-child(2) {
+  stroke: #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge:hover path:nth-child(2) {
+  stroke: #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-edge.hoverHighlight path:nth-child(2) {
+  stroke: #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-port > circle {
+  stroke: #69c0ff;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-widget-transform {
+  box-sizing: border-box !important;
+  margin: 0;
+  padding: 0;
+  border: 2px solid #3572f9;
+  box-shadow: 0 4px 4px 0 #dbe6ff;
+}
+.flowchart-extension-container.xflow-app-workspace .x6-widget-transform > div {
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 1px solid #3572f9;
+}
+.flowchart-extension-container.xflow-app-workspace .xflow-json-form .ant-tabs-content-holder {
+  padding: 0 !important;
+}
+.flowchart-container-collpase {
+  transition: left 0.5s;
+}
+.flowchart-container-collpase-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.flowchart-container-collpase-nodes {
+  border-right: 1px solid #d9d9d9;
+}
+.flowchart-container-collpase-icon {
+  position: absolute;
+  z-index: 99;
+  width: 20px;
+  color: #aaa;
+  font-size: 12px;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #ccc;
+  transform: translate(0, -50%);
+  cursor: pointer;
+}
+.flowchart-container-collpase-icon:hover {
+  color: #2b84c0;
+}
+.flowchart-container-collpase .xflow-workspace-panel {
+  transition: left 0.5s;
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export { FlowchartExtension } from './extension/module';
+import type { IFlowchartGraphProps } from './interface';
+export * from './interface';
+export declare const FlowchartCanvas: React.FC<IFlowchartGraphProps>;

package/es/flowchart-canvas/index.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { XFlowCanvas, useXFlowApp } from '@sunspirytus/xflow-core';
+import { useGraphConfig } from './config-graph';
+import { setInstance } from './utils';
+export { FlowchartExtension } from './extension/module';
+export * from './interface';
+export const FlowchartCanvas = props => {
+    const { position = { top: 40, left: 240, right: 240, bottom: 0 } } = props;
+    const graphConfig = useGraphConfig(props);
+    const app = useXFlowApp();
+    useEffect(() => {
+        if (app) {
+            setInstance(app);
+        }
+    }, [app]);
+    return (React.createElement(XFlowCanvas, Object.assign({}, props, { config: graphConfig, position: position }), props.children));
+};
+FlowchartCanvas.defaultProps = {
+    isXFlowCanvas: true,
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/flowchart-canvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAEvD,cAAc,aAAa,CAAA;AAE3B,MAAM,CAAC,MAAM,eAAe,GAAmC,KAAK,CAAC,EAAE;IACrE,MAAM,EAAE,QAAQ,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,CAAA;IAC1E,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;IACzC,MAAM,GAAG,GAAG,WAAW,EAAE,CAAA;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,EAAE;YACP,WAAW,CAAC,GAAG,CAAC,CAAA;SACjB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,IAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,KAC5D,KAAK,CAAC,QAAQ,CACH,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,CAAC,YAAY,GAAG;IAC7B,aAAa,EAAE,IAAI;CACpB,CAAA"}