@sunspirytus/xflow-extension 1.0.52

package/es/canvas-collapse-panel/panel-collapse-btn.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IProps } from './interface';
+export interface ICollapseBtnProps extends IProps {
+    isCollapsed: boolean;
+    onCollapseBtnClick: () => void;
+}
+/** collapseBtn */
+export declare const NodePanelCollapseBtn: React.FC<ICollapseBtnProps>;

package/es/canvas-collapse-panel/panel-collapse-btn.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CaretLeftOutlined } from '@ant-design/icons';
+/** collapseBtn */
+export const NodePanelCollapseBtn = props => {
+    const { prefixClz, onCollapseBtnClick, isCollapsed, collapseButtonStyle, style } = props;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `${prefixClz}-header`, style: Object.assign(Object.assign({}, style), collapseButtonStyle), onClick: onCollapseBtnClick },
+            React.createElement(CaretLeftOutlined, { rotate: isCollapsed ? 180 : 0 }))));
+};
+//# sourceMappingURL=panel-collapse-btn.js.map

package/es/canvas-collapse-panel/panel-collapse-btn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-collapse-btn.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/panel-collapse-btn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAOrD,kBAAkB;AAClB,MAAM,CAAC,MAAM,oBAAoB,GAAgC,KAAK,CAAC,EAAE;IACvE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAExF,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ;QACb,6BACE,SAAS,EAAE,GAAG,SAAS,SAAS,EAChC,KAAK,kCAAO,KAAK,GAAK,mBAAmB,GACzC,OAAO,EAAE,kBAAkB;YAE3B,oBAAC,iBAAiB,IAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAC/C,CACS,CAClB,CAAA;AACH,CAAC,CAAA"}

package/es/canvas-collapse-panel/panel-footer.d.ts

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

package/es/canvas-collapse-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-collapse-panel/panel-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-footer.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/panel-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAQvD,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-collapse-panel/panel-header.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IProps, IOnKeywordChange, NsCollapsePanelModel } from './interface';
+export interface IHeaderProps extends IProps {
+    /** 关键字变化 */
+    onKeywordChange: IOnKeywordChange;
+    /** panel state */
+    state: NsCollapsePanelModel.IState;
+}
+export declare const NodePanelHeader: React.FC<IHeaderProps>;

package/es/canvas-collapse-panel/panel-header.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Input } from 'antd';
+import { usePanelContext } from '../base-panel/context';
+export const NodePanelHeader = props => {
+    const { prefixClz, onKeywordChange, state } = props;
+    const { propsProxy } = usePanelContext();
+    const panelProps = propsProxy.getValue();
+    const onChange = (e) => {
+        const panelNodes = state.collapseData.reduce((acc, item) => {
+            if (item.children) {
+                acc.push(...item.children);
+            }
+            return acc;
+        }, []);
+        onKeywordChange(e.target.value, panelNodes);
+    };
+    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 => onChange(e), style: { width: '100%', border: 0 } }))))));
+};
+//# sourceMappingURL=panel-header.js.map

package/es/canvas-collapse-panel/panel-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-header.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/panel-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAUvD,MAAM,CAAC,MAAM,eAAe,GAA2B,KAAK,CAAC,EAAE;IAC7D,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAU,CAAA;IAChD,MAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;IAExC,MAAM,QAAQ,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACzD,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;aAC3B;YACD,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAE,CAAC,CAAA;QACN,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;IAC7C,CAAC,CAAA;IACD,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,QAAQ,CAAC,CAAC,CAAC,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,GACnC,CACE,CACP,CACG,CACS,CAClB,CAAA;AACH,CAAC,CAAA"}

package/es/canvas-collapse-panel/service.d.ts

@@ -0,0 +1,14 @@
+import type { IGraphCommandService } from '@sunspirytus/xflow-core';
+import type { IProps } from './interface';
+import { NsCollapsePanelModel } from './interface';
+/** 方便其他组件执行Command改变Panel内部状态 */
+export declare const executeCollapsePanelCommand: (cmds: IGraphCommandService, updateModel: (state: NsCollapsePanelModel.IState) => Promise<void>) => void;
+/** 方便其他组件执行Command改变Panel内部状态 */
+export declare const useCollapsePanelData: (props: IProps) => {
+    state: NsCollapsePanelModel.IState;
+    collapsible: boolean;
+    setState: import("@sunspirytus/xflow-core").NsModel.ISetValue<NsCollapsePanelModel.IState>;
+    onKeywordChange: any;
+    onActiveKeyChange: any;
+    onCollapseChange: (isCollapsed: boolean) => void;
+};

package/es/canvas-collapse-panel/service.js

@@ -0,0 +1,105 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { 
+// utils
+Disposable, 
+// context
+useXFlowApp, 
+// models
+MODELS, createComponentModel, 
+// commands
+XFlowModelCommands, } from '@sunspirytus/xflow-core';
+import { NsCollapsePanelModel } from './interface';
+/** 方便其他组件执行Command改变Panel内部状态 */
+export const executeCollapsePanelCommand = (cmds, updateModel) => {
+    cmds.executeCommand(XFlowModelCommands.UPDATE_MODEL.id, {
+        getModel: (modelService) => __awaiter(void 0, void 0, void 0, function* () {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            return NsCollapsePanelModel.useModel(modelService);
+        }),
+        updateModel: updateModel,
+    });
+};
+/** 方便其他组件执行Command改变Panel内部状态 */
+export const useCollapsePanelData = (props) => {
+    const { collapsible, nodeDataService, searchService, onCollapseChange } = props;
+    const { modelService } = useXFlowApp();
+    /** 创建model */
+    const [state, setState, panelModel] = createComponentModel({
+        /** service: onKeywordChange */
+        keyword: '',
+        /** 展开的key id */
+        collapseData: [],
+        /** 搜索结果 */
+        searchResult: [],
+    });
+    /** 注册model成为全局状态，方便其他组件联动 */
+    React.useEffect(() => {
+        if (modelService.findDeferredModel(NsCollapsePanelModel.id)) {
+            return;
+        }
+        modelService.registerModel({
+            id: NsCollapsePanelModel.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 data = yield nodeDataService(meta, modelService);
+                    return { collapseData: data };
+                });
+                const graphMetaDisposable = graphMetaModel.watch((meta) => __awaiter(void 0, void 0, void 0, function* () {
+                    const { collapseData } = yield fetch(meta);
+                    self.setValue(m => {
+                        m.keyword = '';
+                        m.collapseData = collapseData;
+                        m.searchResult = [];
+                    });
+                }));
+                return Disposable.create(() => {
+                    graphMetaDisposable.dispose();
+                });
+            }),
+        });
+        /* eslint-disable-next-line  */
+    }, []);
+    /** 折叠文件夹 */
+    const onActiveKeyChange = React.useCallback((activeKey) => {
+        setState(modelState => {
+            modelState.collapseData.forEach(item => {
+                if (item.id === activeKey && item.collapsible !== false) {
+                    item.isCollapsed = !item.isCollapsed;
+                }
+            });
+        });
+    }, [setState]);
+    /** 搜索 */
+    const onKeywordChange = React.useCallback((keyword, panelNodes) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!searchService) {
+            return console.warn('searchService is not defined');
+        }
+        if (keyword) {
+            const searchResult = yield searchService(panelNodes, keyword);
+            setState(modelState => {
+                modelState.keyword = keyword;
+                modelState.searchResult = searchResult;
+            });
+        }
+        else {
+            setState(modelState => {
+                modelState.keyword = '';
+                modelState.searchResult = [];
+            });
+        }
+    }), 
+    // eslint-disable-next-line
+    [searchService]);
+    return {
+        state,
+        collapsible,
+        setState,
+        onKeywordChange,
+        onActiveKeyChange,
+        onCollapseChange,
+    };
+};
+//# sourceMappingURL=service.js.map

package/es/canvas-collapse-panel/service.js.map

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

package/es/canvas-collapse-panel/style/index.css

@@ -0,0 +1,124 @@
+/* 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-collapse-panel {
+  border-right: 1px solid #d9d9d9;
+}
+.xflow-collapse-panel .disabled {
+  position: relative;
+  opacity: 0.45;
+}
+.xflow-collapse-panel .disabled::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  cursor: not-allowed;
+  content: '';
+}
+.xflow-collapse-panel-node-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  cursor: grab;
+}
+.xflow-collapse-panel-header {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
+}
+.xflow-collapse-panel-header-title {
+  font-size: 16px;
+}
+.xflow-collapse-panel-header-search {
+  width: 100%;
+  padding: 0 12px;
+}
+.xflow-collapse-panel-body {
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+}
+.xflow-collapse-panel-footer {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-top: 1px solid #d9d9d9;
+}
+.xflow-collapse-panel-footer-title {
+  font-size: 16px;
+}
+.xflow-collapse-panel .xflow-collapse-search-list {
+  height: 100%;
+  margin: 0;
+  padding: 8px 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.xflow-collapse-panel .xflow-collapse-search-list-item {
+  margin: 0;
+  padding: 4px 0;
+}
+.xflow-collapse-panel .xflow-collapse-list {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.xflow-collapse-panel .xflow-collapse-list-item {
+  margin: 0;
+  padding: 0;
+}
+.xflow-collapse-panel .xflow-collapse-list-item.close .xflow-collapse-content {
+  height: 0;
+  transform: scaleY(0);
+}
+.xflow-collapse-panel .xflow-collapse-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+  color: rgba(0, 0, 0, 0.65);
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all 0.3s;
+  user-select: none;
+}
+.xflow-collapse-panel .xflow-collapse-header:hover {
+  background: #f5f5f5;
+}
+.xflow-collapse-panel .xflow-collapse-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+}
+.xflow-collapse-panel .xflow-collapse-header-icon svg {
+  transition: all 0.5s;
+}
+.xflow-collapse-panel .xflow-collapse-header-label {
+  flex: 1;
+}
+.xflow-collapse-panel .xflow-collapse-header-extra {
+  width: auto;
+}
+.xflow-collapse-panel .xflow-collapse-content {
+  height: 100%;
+  height: auto;
+  overflow: hidden;
+  transform: scaleY(1);
+  transition: scale 0.15s ease-in-out;
+}
+.xflow-collapse-panel .xflow-collapse-content-item {
+  padding: 4px 0;
+  transition: all 0.5s;
+}
+.xflow-collapse-panel .xflow-collapse-content-item:hover {
+  background: #f5f5f5;
+}

package/es/canvas-collapse-panel/style/index.less

@@ -0,0 +1,143 @@
+@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;
+@list-item-hover: #f5f5f5;
+
+@panel-prefix-cls: ~'@{xflow-prefix}-collapse-panel';
+
+.@{panel-prefix-cls} {
+  border-right: @light-border;
+
+  .disabled {
+    position: relative;
+    opacity: 0.45;
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 999;
+      cursor: not-allowed;
+      content: '';
+    }
+  }
+
+  &-node-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    cursor: grab;
+  }
+
+  &-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;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: @body-bg;
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: space-evenly;
+    background: @header-bg;
+    border-top: @light-border;
+    &-title {
+      font-size: 16px;
+    }
+  }
+  .xflow-collapse {
+    // 搜索
+    &-search-list {
+      height: 100%;
+      margin: 0;
+      padding: 8px 0;
+      overflow-y: auto;
+      list-style: none;
+    }
+    &-search-list-item {
+      margin: 0;
+      padding: 4px 0;
+    }
+
+    &-list {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow-y: auto;
+      list-style: none;
+      &-item {
+        margin: 0;
+        padding: 0;
+        &.close {
+          .xflow-collapse-content {
+            height: 0;
+            transform: scaleY(0);
+          }
+        }
+      }
+    }
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 16px;
+      color: rgba(0, 0, 0, 0.65);
+      line-height: 1.5;
+      cursor: pointer;
+      transition: all 0.3s;
+      user-select: none;
+      &:hover {
+        background: @list-item-hover;
+      }
+      &-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        svg {
+          transition: all 0.5s;
+        }
+      }
+      &-label {
+        flex: 1;
+      }
+      &-extra {
+        width: auto;
+      }
+    }
+
+    &-content {
+      height: 100%;
+      height: auto;
+      overflow: hidden;
+      transform: scaleY(1);
+      transition: scale 0.15s ease-in-out;
+      &-item {
+        padding: 4px 0;
+        transition: all 0.5s;
+        &:hover {
+          background: @list-item-hover;
+        }
+      }
+    }
+  }
+}

package/es/canvas-collapse-panel/utils.d.ts

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

package/es/canvas-collapse-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-collapse-panel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/canvas-collapse-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,MAAoB,EAAE,EAAE;IAC1D,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-context-menu/components/index.d.ts

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

package/es/canvas-context-menu/components/index.js

@@ -0,0 +1,58 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { Dropdown } from '@antv/x6-react-components';
+import { useXFlowApp, useModelAsync } from '@sunspirytus/xflow-core';
+import { CONTEXT_MENU_MODEL } from '../interface';
+import { XFlowMenu } from './menu';
+const DisposeHelper = ({ toDispose }) => {
+    React.useEffect(() => {
+        return () => {
+            toDispose.dispose();
+        };
+    }, [toDispose]);
+    return null;
+};
+export const ContextMenuRender = () => {
+    const domRef = React.useRef();
+    const xflow = useXFlowApp();
+    const [state, , renderModel] = useModelAsync({
+        /** 绑定Model到state */
+        getModel: () => __awaiter(void 0, void 0, void 0, function* () {
+            return yield CONTEXT_MENU_MODEL.getModel(xflow.modelService);
+        }),
+        /** 设置state的默认值 */
+        initialState: {
+            anchor: null,
+            menuModel: null,
+            target: null,
+            customRender: null,
+            toDispose: null,
+        },
+    });
+    const { target, anchor, menuModel, customRender, toDispose } = state;
+    if (!target || !anchor || !menuModel) {
+        return null;
+    }
+    const onMaskClick = () => {
+        renderModel.setValue({
+            anchor: null,
+            menuModel: null,
+            target: null,
+            customRender: null,
+            toDispose: null,
+        });
+    };
+    const overlay = customRender ? (React.createElement(customRender, {
+        target,
+        modelService: xflow.modelService,
+        onHide: onMaskClick,
+    })) : (React.createElement(XFlowMenu, { target: target, menuModel: menuModel, onHide: onMaskClick }));
+    return (React.createElement("div", { className: "xflow-menu-mask", ref: domRef, onClick: onMaskClick, onContextMenu: e => {
+            e.preventDefault();
+            e.stopPropagation();
+        } },
+        React.createElement(DisposeHelper, { toDispose: toDispose }),
+        React.createElement(Dropdown, { visible: true, getPopupContainer: () => domRef.current, overlay: overlay },
+            React.createElement("div", { className: "xflow-context-menu-anchor", style: { top: anchor.y, left: anchor.x } }))));
+};
+//# sourceMappingURL=index.js.map

package/es/canvas-context-menu/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/canvas-context-menu/components/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,aAAa,GAAkD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,EAAE,CAAA;QACrB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAqB,GAAG,EAAE;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAA;IAC7C,MAAM,KAAK,GAAG,WAAW,EAAE,CAAA;IAE3B,MAAM,CAAC,KAAK,EAAE,AAAD,EAAG,WAAW,CAAC,GAAG,aAAa,CAA4B;QACtE,oBAAoB;QACpB,QAAQ,EAAE,GAAS,EAAE;YACnB,OAAO,MAAM,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;QAC9D,CAAC,CAAA;QACD,kBAAkB;QAClB,YAAY,EAAE;YACZ,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,IAAI;SAChB;KACF,CAAC,CAAA;IAEF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAEpE,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE;QACpC,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,WAAW,CAAC,QAAQ,CAAC;YACnB,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,CAC7B,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;QAChC,MAAM;QACN,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,MAAM,EAAE,WAAW;KACpB,CAAC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,GAAI,CACzE,CAAA;IAED,OAAO,CACL,6BACE,SAAS,EAAC,iBAAiB,EAC3B,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,CAAC,CAAC,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;QAED,oBAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAI;QACvC,oBAAC,QAAQ,IAAC,OAAO,QAAC,iBAAiB,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO;YACzE,6BAAK,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,EAAE,GAAI,CAC9E,CACP,CACP,CAAA;AACH,CAAC,CAAA"}

package/es/canvas-context-menu/components/menu-render.d.ts

@@ -0,0 +1,10 @@
+import type { IMenuTarget, IMenuOptions, IModelService, IGraphCommandService } from '@sunspirytus/xflow-core';
+export interface IRenderProps {
+    idx: number;
+    onHide: () => void;
+    target: IMenuTarget;
+    menuOptions: IMenuOptions;
+    modelService: IModelService;
+    commandService: IGraphCommandService;
+}
+export declare const renderMenuOptions: (props: IRenderProps) => any;

package/es/canvas-context-menu/components/menu-render.js

@@ -0,0 +1,53 @@
+import { __awaiter } from "tslib";
+import React from 'react';
+import { 
+// app service
+IconStore, } from '@sunspirytus/xflow-core';
+import { Menu } from '@antv/x6-react-components';
+export const renderMenuOptions = (props) => {
+    const { idx, menuOptions: menuItem, target, modelService, commandService, onHide } = props;
+    const { id, label, isEnabled = true, isVisible = true, iconName, submenu = [], active, hotkey, render, onClick, } = menuItem;
+    if (!isVisible) {
+        return null;
+    }
+    /** 分隔符：separator */
+    if (menuItem.type === 'separator') {
+        return React.createElement(Menu.Divider, { key: String(menuItem.id) + idx });
+    }
+    /** 根结点：root */
+    if (menuItem.type === 'root') {
+        return (React.createElement(Menu, { hasIcon: true }, submenu.map((item, submenuIdx) => renderMenuOptions({
+            idx: submenuIdx,
+            target,
+            commandService,
+            modelService,
+            menuOptions: item,
+            onHide,
+        }))));
+    }
+    /** 子菜单：submenu */
+    if (menuItem.submenu && Array.isArray(menuItem.submenu)) {
+        const Icon = IconStore.get(iconName);
+        const isDisable = !isEnabled;
+        return (React.createElement(Menu.SubMenu, { key: String(id), text: label, disabled: isDisable || submenu.length === 0, icon: Icon ? React.createElement(Icon, null) : null, active: active, hotkey: hotkey }, submenu.map((item, submenuIdx) => renderMenuOptions({
+            idx: submenuIdx,
+            target,
+            commandService,
+            modelService,
+            menuOptions: item,
+            onHide,
+        }))));
+    }
+    /** 叶子节点 */
+    const Icon = IconStore.get(iconName);
+    if (render) {
+        return React.createElement(render, { menuItem, target, commandService, modelService, onHide }, [
+            React.createElement(Menu.Item, { key: String(id), text: label, disabled: !isEnabled, icon: Icon ? React.createElement(Icon, null) : null, active: active, hotkey: hotkey }),
+        ]);
+    }
+    return (React.createElement(Menu.Item, { key: String(id), text: label, disabled: !isEnabled, icon: Icon ? React.createElement(Icon, null) : null, active: active, hotkey: hotkey, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+            yield onClick({ menuItem, target, commandService, modelService });
+            onHide && onHide();
+        }) }));
+};
+//# sourceMappingURL=menu-render.js.map

package/es/canvas-context-menu/components/menu-render.js.map

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

package/es/canvas-context-menu/components/menu.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type { IMenuModel, IMenuTarget } from '@sunspirytus/xflow-core';
+interface IProps {
+    onHide: () => void;
+    target: IMenuTarget;
+    menuModel: IMenuModel;
+}
+export declare const XFlowMenu: React.FC<IProps>;
+export {};