@sunspirytus/xflow-extension 1.0.52

package/es/canvas-node-tree-panel/panel-body.js

@@ -0,0 +1,137 @@
+import { __awaiter } from "tslib";
+import React, { useState } from 'react';
+import { Tree, Empty, Popover } from 'antd';
+import { FolderFilled, FolderOpenFilled } from '@ant-design/icons';
+import { Addon } from '@antv/x6';
+import { getNodeReactComponent, useXFlowApp, XFlowConstants } from '@sunspirytus/xflow-core';
+import { XFlowNode } from '../canvas-dag-extension/x6-extension/node';
+const { DirectoryTree, TreeNode } = Tree;
+const FolderIcon = ({ expanded }) => {
+    return expanded ? React.createElement(FolderOpenFilled, null) : React.createElement(FolderFilled, null);
+};
+export const defaultNodeFactory = (args) => {
+    return new XFlowNode(args);
+};
+export const renderNode = (props) => {
+    const { nodeConfig, onMouseDown, graphConfig, modelService, commandService } = props;
+    if (!graphConfig) {
+        return React.createElement("div", null);
+    }
+    if (nodeConfig.renderComponent) {
+        return (React.createElement("div", { onMouseDown: onMouseDown }, React.createElement(nodeConfig.renderComponent, {
+            data: nodeConfig,
+            isNodeTreePanel: true,
+        })));
+    }
+    const renderKey = graphConfig.nodeTypeParser(nodeConfig) || XFlowConstants.XFLOW_DEFAULT_NODE;
+    const reactComponent = graphConfig.nodeRender.get(renderKey);
+    return (React.createElement("div", { onMouseDown: onMouseDown }, React.createElement(reactComponent, {
+        commandService,
+        modelService,
+        data: nodeConfig,
+        isNodeTreePanel: true,
+    })));
+};
+export const NodeTitle = (props) => {
+    const [isVisible, setVisible] = useState(false);
+    const [appContainer, setAppContainer] = useState();
+    const { getGraphConfig } = useXFlowApp();
+    React.useEffect(() => {
+        getGraphConfig().then(graphConfig => {
+            setAppContainer(graphConfig.appContainer);
+        });
+    });
+    const { prefixClz, graphConfig, commandService, modelService, popoverContent, onMouseDown, item, } = props;
+    return (React.createElement(React.Fragment, null,
+        popoverContent && (React.createElement(Popover, { placement: "right", destroyTooltipOnHide: true, content: popoverContent, visible: isVisible, onVisibleChange: val => {
+                setVisible(val);
+            }, getPopupContainer: () => appContainer || document.body },
+            React.createElement("div", { className: `${prefixClz}-node-wrapper`, onMouseEnter: () => {
+                    setVisible(true);
+                } }, renderNode({
+                graphConfig,
+                commandService: commandService,
+                onMouseDown,
+                modelService,
+                nodeConfig: item,
+            })))),
+        !popoverContent && (React.createElement("div", { className: `${prefixClz}-node-wrapper`, onMouseEnter: () => {
+                setVisible(true);
+            } }, renderNode({
+            graphConfig,
+            commandService: commandService,
+            onMouseDown,
+            modelService,
+            nodeConfig: item,
+        })))));
+};
+export const NodePanelBody = props => {
+    const { x6NodeFactory, dndOptions, onNodeDrop, state, onFolderExpand, prefixClz } = props;
+    const { graphProvider, modelService, commandService } = useXFlowApp();
+    const [graphConfig, setConfig] = React.useState();
+    const [dnd, setDnd] = React.useState();
+    const [graph, setGraph] = React.useState();
+    React.useEffect(() => {
+        graphProvider.getGraphInstance().then(x6Graph => {
+            setGraph(x6Graph);
+        });
+    });
+    React.useEffect(() => {
+        graphProvider.getGraphOptions().then(x6GraphConfig => {
+            setConfig(x6GraphConfig);
+        });
+        if (!graph) {
+            return;
+        }
+        const dndInstance = new Addon.Dnd(Object.assign(Object.assign({ scaled: false, animation: false }, dndOptions), { target: graph, 
+            /** 这里考虑到需要新增群组的需求，不使用x6的getDropNod方法
+             * 在validateNode时调用command添加
+             */
+            validateNode: (droppingNode) => __awaiter(void 0, void 0, void 0, function* () {
+                const nodeConfig = Object.assign(Object.assign({}, droppingNode.getData()), droppingNode.getPosition());
+                if (onNodeDrop) {
+                    yield onNodeDrop(nodeConfig, commandService, modelService);
+                }
+                else {
+                    console.error('onNodeDrop method is required in NodeTree Panel');
+                }
+                return false;
+            }) }));
+        setDnd(dndInstance);
+    }, [commandService, dndOptions, graph, graphProvider, modelService, onNodeDrop]);
+    const onMouseDown = React.useCallback((nodeConfig) => (e) => {
+        if (!graph || !dnd || !graphConfig) {
+            return;
+        }
+        const renderKey = graphConfig.nodeTypeParser(nodeConfig);
+        const reactComponent = nodeConfig.renderComponent
+            ? nodeConfig.renderComponent
+            : graphConfig.nodeRender.get(renderKey);
+        const wrappedComponent = getNodeReactComponent(reactComponent, commandService, modelService);
+        const nodeData = {
+            data: nodeConfig,
+            width: nodeConfig.width || 180,
+            height: nodeConfig.height || 40,
+            view: graphConfig.graphId,
+            component: wrappedComponent,
+        };
+        const x6Node = x6NodeFactory ? x6NodeFactory(nodeData) : defaultNodeFactory(nodeData);
+        dnd.start(x6Node, e.nativeEvent);
+    }, [commandService, dnd, graph, graphConfig, modelService, x6NodeFactory]);
+    const renderTree = React.useCallback((treeList = []) => {
+        return treeList.map(item => {
+            const { isDirectory, children, popoverContent } = item;
+            if (isDirectory) {
+                return (React.createElement(TreeNode, { icon: FolderIcon, key: item.id, title: item.label, className: `${prefixClz}-tree-folder` }, renderTree(children)));
+            }
+            return (React.createElement(TreeNode, { isLeaf: true, key: item.id, className: `${prefixClz}-tree-leaf`, icon: React.createElement("span", null), title: React.createElement(NodeTitle, { item: item, onMouseDown: onMouseDown(item), popoverContent: popoverContent, prefixClz: prefixClz, modelService: modelService, commandService: commandService, graphConfig: graphConfig }) }));
+        });
+    }, [commandService, graphConfig, modelService, onMouseDown, prefixClz]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `${prefixClz}-body`, style: props.style },
+            !state.keyword && (React.createElement(DirectoryTree, { showIcon: true, selectable: false, autoExpandParent: false, onExpand: onFolderExpand, expandedKeys: state.expandedKeys, className: `${prefixClz}-tree` }, renderTree(state.treeData))),
+            state.searchList.length > 0 && (React.createElement("ul", { className: `${prefixClz}-body-list` }, state.searchList.map(treeNode => (React.createElement("li", { key: treeNode.id, className: `${prefixClz}-body-list-item` },
+                React.createElement(NodeTitle, { item: treeNode, onMouseDown: onMouseDown(treeNode), popoverContent: treeNode.popoverContent, prefixClz: prefixClz, modelService: modelService, commandService: commandService, graphConfig: graphConfig })))))),
+            state.keyword && state.searchList.length === 0 && React.createElement(Empty, { style: { marginTop: '48px' } }))));
+};
+//# sourceMappingURL=panel-body.js.map

package/es/canvas-node-tree-panel/panel-body.js.map

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

package/es/canvas-node-tree-panel/panel-footer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IProps } from './interface';
+import type { NsNodeTreePanelModel } from './service';
+export interface IFooterProps extends IProps {
+    state: NsNodeTreePanelModel.IState;
+}
+export declare const NodePanelFooter: React.FC<IFooterProps>;

package/es/canvas-node-tree-panel/panel-footer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { usePanelContext } from '../base-panel/context';
+export const NodePanelFooter = props => {
+    const { prefixClz } = props;
+    const { propsProxy } = usePanelContext();
+    const panelProps = propsProxy.getValue();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `${prefixClz}-footer`, style: props.style }, panelProps.footer && React.isValidElement(panelProps.footer) && panelProps.footer)));
+};
+//# sourceMappingURL=panel-footer.js.map

package/es/canvas-node-tree-panel/panel-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-footer.js","sourceRoot":"","sources":["../../src/canvas-node-tree-panel/panel-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAMvD,MAAM,CAAC,MAAM,eAAe,GAA2B,KAAK,CAAC,EAAE;IAC7D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC3B,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAU,CAAA;IAChD,MAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;IAExC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,6BAAK,SAAS,EAAE,GAAG,SAAS,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACtD,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM,CAC9E,CACS,CAClB,CAAA;AACH,CAAC,CAAA"}

package/es/canvas-node-tree-panel/panel-header.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IProps, IOnKeywordChange } from './interface';
+import type { NsNodeTreePanelModel } from './service';
+export interface IHeaderProps extends IProps {
+    onKeywordChange: IOnKeywordChange;
+    state: NsNodeTreePanelModel.IState;
+}
+export declare const NodePanelHeader: React.FC<IHeaderProps>;

package/es/canvas-node-tree-panel/panel-header.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Input } from 'antd';
+import { usePanelContext } from '../base-panel/context';
+export const NodePanelHeader = props => {
+    const { prefixClz, onKeywordChange } = props;
+    const { propsProxy } = usePanelContext();
+    const panelProps = propsProxy.getValue();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `${prefixClz}-header`, style: props.style },
+            panelProps.header && React.isValidElement(panelProps.header) && panelProps.header,
+            panelProps.searchService && (React.createElement("div", { className: `${prefixClz}-header-search` },
+                React.createElement(Input, { placeholder: "\u641C\u7D22\u7EC4\u4EF6", allowClear: true, onChange: e => onKeywordChange(e.target.value), style: { width: '100%', border: 0 } }))))));
+};
+//# sourceMappingURL=panel-header.js.map

package/es/canvas-node-tree-panel/panel-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-header.js","sourceRoot":"","sources":["../../src/canvas-node-tree-panel/panel-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAA;AAG5B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAOvD,MAAM,CAAC,MAAM,eAAe,GAA2B,KAAK,CAAC,EAAE;IAC7D,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAU,CAAA;IAChD,MAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;IAExC,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,6BAAK,SAAS,EAAE,GAAG,SAAS,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;YACtD,UAAU,CAAC,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM;YACjF,UAAU,CAAC,aAAa,IAAI,CAC3B,6BAAK,SAAS,EAAE,GAAG,SAAS,gBAAgB;gBAC1C,oBAAC,KAAK,IACJ,WAAW,EAAC,0BAAM,EAClB,UAAU,QACV,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,GACnC,CACE,CACP,CACG,CACS,CAClB,CAAA;AACH,CAAC,CAAA"}

package/es/canvas-node-tree-panel/service.d.ts

@@ -0,0 +1,26 @@
+import type { IModelService, IGraphCommandService } from '@sunspirytus/xflow-core';
+import type { IProps, ITreeNode } from './interface';
+export declare namespace NsNodeTreePanelModel {
+    const id = "TREE_PANEL_MODEL";
+    interface IState {
+        treeNodeList: ITreeNode[];
+        treeData: ITreeNode[];
+        expandedKeys: string[];
+        defaultExpandAll: boolean;
+        keyword: string;
+        searchList: ITreeNode[];
+    }
+    const useModel: (model: IModelService) => Promise<import("@sunspirytus/xflow-core").NsModel.IModel<IState>>;
+}
+/** 方便其他组件执行Command改变Panel内部状态 */
+export declare const executeNodeDndTreeCommand: (cmds: IGraphCommandService, updateModel: (state: NsNodeTreePanelModel.IState) => Promise<void>) => void;
+export declare const useTreePanelData: (props: IProps) => {
+    state: NsNodeTreePanelModel.IState;
+    setState: import("@sunspirytus/xflow-core").NsModel.ISetValue<NsNodeTreePanelModel.IState>;
+    onKeywordChange: any;
+    onFolderExpand: any;
+};
+export declare function NodeList2Tree(treeNodes?: ITreeNode[]): {
+    treeData: ITreeNode[];
+    rootNodes: any;
+};

package/es/canvas-node-tree-panel/service.js

@@ -0,0 +1,149 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import uniqBy from 'lodash/uniqBy';
+import cloneDeep from 'lodash/cloneDeep';
+import { 
+// utils
+Disposable, 
+// context
+useXFlowApp, 
+// models
+MODELS, createComponentModel, 
+// commands
+XFlowModelCommands, } from '@sunspirytus/xflow-core';
+import { TREE_ROOT_ID } from './constants';
+export var NsNodeTreePanelModel;
+(function (NsNodeTreePanelModel) {
+    NsNodeTreePanelModel.id = 'TREE_PANEL_MODEL';
+    NsNodeTreePanelModel.useModel = (model) => __awaiter(this, void 0, void 0, function* () {
+        return model.awaitModel(NsNodeTreePanelModel.id);
+    });
+})(NsNodeTreePanelModel || (NsNodeTreePanelModel = {}));
+/** 方便其他组件执行Command改变Panel内部状态 */
+export const executeNodeDndTreeCommand = (cmds, updateModel) => {
+    cmds.executeCommand(XFlowModelCommands.UPDATE_MODEL.id, {
+        getModel: (modelService) => __awaiter(void 0, void 0, void 0, function* () {
+            return NsNodeTreePanelModel.useModel(modelService);
+        }),
+        updateModel: updateModel,
+    });
+};
+export const useTreePanelData = (props) => {
+    const { treeDataService, searchService } = props;
+    const { modelService } = useXFlowApp();
+    /** 使用model */
+    const [state, setState, panelModel] = createComponentModel({
+        treeData: [],
+        searchList: [],
+        treeNodeList: [],
+        expandedKeys: [],
+        defaultExpandAll: false,
+        keyword: '',
+    });
+    /** 注册成为全局状态，方便其他组件联动 */
+    React.useEffect(() => {
+        if (modelService.findDeferredModel(NsNodeTreePanelModel.id)) {
+            return;
+        }
+        modelService.registerModel({
+            id: NsNodeTreePanelModel.id,
+            modelFactory: () => panelModel,
+            watchChange: (self) => __awaiter(void 0, void 0, void 0, function* () {
+                const graphMetaModel = yield MODELS.GRAPH_META.getModel(modelService); //useContext(MODELS.GRAPH_META.id)
+                const fetch = (meta) => __awaiter(void 0, void 0, void 0, function* () {
+                    const listData = yield treeDataService(meta, modelService);
+                    const { treeData, rootNodes } = NodeList2Tree(listData);
+                    const currentState = yield self.getValidValue();
+                    // 设置默认展开的keys
+                    const expandedKeys = currentState.expandedKeys.length > 0
+                        ? currentState.expandedKeys
+                        : rootNodes.map(i => i.id);
+                    return { listData, treeData, expandedKeys };
+                });
+                const graphMetaDisposable = graphMetaModel.watch((meta) => __awaiter(void 0, void 0, void 0, function* () {
+                    const data = yield fetch(meta);
+                    self.setValue({
+                        treeNodeList: data.listData,
+                        treeData: data.treeData,
+                        expandedKeys: data.expandedKeys,
+                        defaultExpandAll: false,
+                        keyword: '',
+                        searchList: [],
+                    });
+                }));
+                return Disposable.create(() => {
+                    graphMetaDisposable.dispose();
+                });
+            }),
+        });
+        /* eslint-disable-next-line  */
+    }, []);
+    /** 折叠文件夹 */
+    const onFolderExpand = React.useCallback((expandedKeys) => {
+        setState(modelState => {
+            modelState.expandedKeys = expandedKeys;
+        });
+    }, [setState]);
+    /** 搜索 */
+    const onKeywordChange = React.useCallback((keyword) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!searchService) {
+            return console.warn('searchService is not defined');
+        }
+        if (keyword) {
+            const list = yield searchService(state.treeNodeList, keyword);
+            setState(modelState => {
+                modelState.keyword = keyword;
+                modelState.searchList = list;
+            });
+        }
+        else {
+            setState(modelState => {
+                modelState.keyword = '';
+                modelState.searchList = [];
+            });
+        }
+    }), 
+    // eslint-disable-next-line
+    [searchService, state.treeNodeList]);
+    return {
+        state,
+        setState,
+        onKeywordChange,
+        onFolderExpand,
+    };
+};
+// 将list数据转换为树
+export function NodeList2Tree(treeNodes = []) {
+    const getGroupByIdMap = (list) => {
+        const uniqList = uniqBy(list, 'id');
+        const groups = uniqList.reduce((map, node) => {
+            const parentId = node.parentId || TREE_ROOT_ID;
+            if (!map.has(parentId)) {
+                map.set(parentId, []);
+            }
+            const group = map.get(parentId);
+            group.push(node);
+            return map;
+        }, new Map());
+        return groups;
+    };
+    const groupMap = getGroupByIdMap(cloneDeep(treeNodes));
+    function iterator(nodes, groupMapArgs) {
+        return nodes.map(node => {
+            if (groupMapArgs.has(node.id)) {
+                const children = groupMapArgs.get(node.id);
+                node.key = node.id;
+                node.isDirectory = true;
+                node.children = iterator(children, groupMapArgs) || [];
+            }
+            else {
+                node.isLeaf = true;
+            }
+            return node;
+        });
+    }
+    const rootNodes = groupMap.get(TREE_ROOT_ID) || [];
+    const treeData = iterator(rootNodes, groupMap);
+    return { treeData, rootNodes };
+}
+//# sourceMappingURL=service.js.map

package/es/canvas-node-tree-panel/service.js.map

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

package/es/canvas-node-tree-panel/style/index.css

@@ -0,0 +1,87 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.xflow-node-dnd-panel {
+  border-right: 1px solid #d9d9d9;
+}
+.xflow-node-dnd-panel-header {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
+}
+.xflow-node-dnd-panel-header-title {
+  font-size: 16px;
+}
+.xflow-node-dnd-panel-header-search {
+  width: 100%;
+  padding: 0 12px;
+}
+.xflow-node-dnd-panel-body {
+  padding: 0;
+  padding: 8px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+}
+.xflow-node-dnd-panel-body .ant-tree-iconEle.ant-tree-icon__customize {
+  display: none !important;
+  width: auto;
+  margin-right: 0;
+  color: rgba(0, 0, 0, 0.45);
+}
+.xflow-node-dnd-panel-body .ant-tree {
+  background: unset;
+}
+.xflow-node-dnd-panel-body .ant-tree-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.xflow-node-dnd-panel-body .ant-tree-node-content-wrapper {
+  display: flex;
+  align-items: center;
+  padding-left: 0;
+  overflow: hidden;
+}
+.xflow-node-dnd-panel-body-list {
+  margin: 0;
+  padding: 0;
+}
+.xflow-node-dnd-panel-body-list-item {
+  margin: 0;
+  padding: 4px 12px;
+  overflow: hidden;
+  list-style-type: none;
+}
+.xflow-node-dnd-panel-body-list-item .xflow-node-dnd-panel-node-wrapper {
+  justify-content: center;
+}
+.xflow-node-dnd-panel-tree-leaf {
+  position: relative;
+}
+.xflow-node-dnd-panel-tree-leaf .ant-tree-iconEle {
+  display: none;
+}
+.xflow-node-dnd-panel-tree-leaf .ant-tree-title {
+  padding: 2px;
+}
+.xflow-node-dnd-panel-node-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.xflow-node-dnd-panel-footer {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-top: 1px solid #d9d9d9;
+}
+.xflow-node-dnd-panel-footer-title {
+  font-size: 16px;
+}
+.xflow-dnd-node {
+  width: 100%;
+  height: 40px;
+}

package/es/canvas-node-tree-panel/style/index.less

@@ -0,0 +1,104 @@
+@import '~antd/es/style/themes/default.less';
+@import (reference) '~@sunspirytus/xflow-core/es/style/themes/index.less';
+
+@light-border: ~'1px solid #d9d9d9';
+@header-bg: #fff;
+@body-bg: #fff;
+
+@dnd-panel-prefix-cls: ~'@{xflow-prefix}-node-dnd-panel';
+
+.@{dnd-panel-prefix-cls} {
+  border-right: @light-border;
+
+  &-header {
+    display: flex;
+    justify-content: space-evenly;
+    background: @header-bg;
+    border-bottom: @light-border;
+    &-title {
+      font-size: 16px;
+    }
+    &-search {
+      width: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  &-body {
+    padding: 0;
+    padding: 8px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: @body-bg;
+
+    .@{ant-prefix}-tree-iconEle.@{ant-prefix}-tree-icon__customize {
+      display: none !important;
+      width: auto;
+      margin-right: 0;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .@{ant-prefix}-tree {
+      background: unset;
+    }
+
+    .@{ant-prefix}-tree-switcher {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .@{ant-prefix}-tree-node-content-wrapper {
+      display: flex;
+      align-items: center;
+      padding-left: 0;
+      overflow: hidden;
+    }
+    &-list {
+      margin: 0;
+      padding: 0;
+    }
+    &-list-item {
+      margin: 0;
+      padding: 4px 12px;
+      overflow: hidden;
+      list-style-type: none;
+      .@{dnd-panel-prefix-cls}-node-wrapper {
+        justify-content: center;
+      }
+    }
+  }
+
+  &-tree-leaf {
+    position: relative;
+
+    .@{ant-prefix}-tree-iconEle {
+      display: none;
+    }
+
+    .@{ant-prefix}-tree-title {
+      padding: 2px;
+    }
+  }
+
+  &-node-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: space-evenly;
+    background: @header-bg;
+    border-top: @light-border;
+    &-title {
+      font-size: 16px;
+    }
+  }
+}
+
+.@{xflow-prefix}-dnd-node {
+  width: 100%;
+  height: 40px;
+}

package/es/canvas-node-tree-panel/utils.d.ts

@@ -0,0 +1,6 @@
+import type { IPanelProps } from './interface';
+export declare const usePanelLyaoutStyle: (config: IPanelProps) => {
+    headerStyle: any;
+    bodyStyle: any;
+    footerStyle: any;
+};

package/es/canvas-node-tree-panel/utils.js

@@ -0,0 +1,12 @@
+import { usePositionStyle } from '@sunspirytus/xflow-core';
+import { PANEL_HEADER_HEIGHT, PANEL_FOOTER_HEIGHT } from './constants';
+export const usePanelLyaoutStyle = (config) => {
+    const headerHeight = (config && config.headerPosition && config.headerPosition.height) || PANEL_HEADER_HEIGHT;
+    const footerHeight = (config.footerPosition && config.footerPosition.height) || PANEL_FOOTER_HEIGHT;
+    return {
+        headerStyle: usePositionStyle(Object.assign({ height: headerHeight, lineHeight: headerHeight, top: 0, left: 0, right: 0 }, config.headerPosition)),
+        bodyStyle: usePositionStyle(Object.assign({ left: 0, right: 0, top: headerHeight, bottom: footerHeight }, config.bodyPosition)),
+        footerStyle: usePositionStyle(Object.assign({ left: 0, right: 0, lineHeight: footerHeight, height: footerHeight, bottom: 0 }, config.footerPosition)),
+    };
+};
+//# sourceMappingURL=utils.js.map

package/es/canvas-node-tree-panel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/canvas-node-tree-panel/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAEtE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,MAAmB,EAAE,EAAE;IACzD,MAAM,YAAY,GAChB,CAAC,MAAM,IAAI,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,mBAAmB,CAAA;IAC1F,MAAM,YAAY,GAChB,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,mBAAmB,CAAA;IAEhF,OAAO;QACL,WAAW,EAAE,gBAAgB,iBAC3B,MAAM,EAAE,YAAY,EACpB,UAAU,EAAE,YAAY,EACxB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,IACL,MAAM,CAAC,cAAc,EACxB;QACF,SAAS,EAAE,gBAAgB,iBACzB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,YAAY,IACjB,MAAM,CAAC,YAAY,EACtB;QACF,WAAW,EAAE,gBAAgB,iBAC3B,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,EACR,UAAU,EAAE,YAAY,EACxB,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,CAAC,IACN,MAAM,CAAC,cAAc,EACxB;KACH,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,20 @@
+import type { IToolbarGroupOptions } from '@sunspirytus/xflow-core';
+export declare namespace CANVAS_SCALE_TOOLBAR_CONFIG {
+    const ZOOM_IN: string;
+    const ZOOM_OUT: string;
+    const SCALE_TO_ONE: string;
+    const SCALE_TO_FIT: string;
+    const FULLSCREEN: string;
+    const MAX_SCALE = 1.5;
+    const MIN_SCALE = 0.05;
+    const zoomOptions: {
+        maxScale: number;
+        minScale: number;
+    };
+    const getToolbarConfig: ({ zoomFactor, fullscreen, }: {
+        zoomFactor?: number;
+        fullscreen?: boolean;
+    }) => IToolbarGroupOptions[];
+}
+export declare const TOOLBAR_TYPE = "CANVAS_SCALE_TOOLBAR";
+export declare const useConfig: (value?: any) => any;