@riil-frontend/component-topology 6.0.0-alpha.9 → 6.0.1

package/es/core/components/titlebar/TitleBar.module.scss

@@ -12,7 +12,7 @@
   }
 
   &.titlebarViewMode {
-    padding: 16px 16px 0 16px;
+    padding: 16px;
   }
 
   &.titlebarEditMode {

package/es/core/editor/components/EditorPlugin.js

@@ -1,16 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from "react";
+import React, { useEffect } from 'react';
 import CustomIconPlugin from "./CustomIconPlugin";
 import SaveLoading from "./plugins/SaveLoading";
 import MultipleResourceSelectPlugin from "./plugins/MultipleResourceSelectPlugin";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
+import MetricPollingPlugin from "../../viewer/components/plugins/MetricPollingPlugin";
+import AddElementThemePlugin from "./plugins/AddElementThemePlugin";
+import useKeyboardShortcut from "../hooks/useKeyboardShortcut";
+import useUpdateHtTopoDefaultTagStyle from "./Sidebar/views/CanvasPanel/hooks/useUpdateHtTopoDefaultTagStyle";
 export default function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  useEffect(function () {
+    return function () {
+      topoEdit.reset();
+    };
+  }, []);
+  useKeyboardShortcut({
+    topo: topo,
+    topoEdit: topoEdit
+  });
+  useUpdateHtTopoDefaultTagStyle({
+    topo: topo
+  });
+  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, AddElementThemePlugin, CustomIconPlugin, MetricPollingPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

package/es/core/editor/components/Sidebar/Sidebar.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import Tab from "../../../../components/VerticalIconTab";
 import panes from "./panes";
@@ -8,21 +8,43 @@ import styles from "./Sidebar.module.scss";
 function Sidebar(props) {
   var _classNames;
 
-  var topo = props.topo;
+  var topo = props.topo,
+      getPanels = props.getPanels;
 
   var _topo$store$useModel = topo.store.useModel('topoEdit'),
       topoEditState = _topo$store$useModel[0],
       topoEditDispatchers = _topo$store$useModel[1];
 
-  var activeKey = topoEditState.resourceTabactiveKey;
+  var activeKey = topoEditState.resourceTabActiveKey; // 拓扑图是否加载
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
+  var visiblePanels = useMemo(function () {
+    return getPanels ? getPanels(panes) : panes;
+  }, [getPanels]);
   useEffect(function () {
     return function () {
       // 退出编辑模式，关闭资源面板状态
       topoEditDispatchers.update({
-        resourceTabactiveKey: null
+        resourceTabActiveKey: null
       });
     };
-  }, []);
+  }, []); // 通过url参数打开对应面板
+
+  useEffect(function () {
+    var _topo$viewProps$urlPa;
+
+    if (graphLoaded && (_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.resourceTabActiveKey) {
+      setTimeout(function () {
+        var _topo$viewProps$urlPa2;
+
+        topoEditDispatchers.update({
+          resourceTabActiveKey: ((_topo$viewProps$urlPa2 = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa2 === void 0 ? void 0 : _topo$viewProps$urlPa2.resourceTabActiveKey) || null
+        });
+      }, 2000);
+    }
+  }, [graphLoaded]);
 
   var renderTabItem = function renderTabItem(pane) {
     var View = pane.content;
@@ -42,10 +64,10 @@ function Sidebar(props) {
     activeKey: activeKey,
     onChange: function onChange(key) {
       return topoEditDispatchers.update({
-        resourceTabactiveKey: key
+        resourceTabActiveKey: key
       });
     }
-  }, panes.map(renderTabItem))));
+  }, visiblePanels.map(renderTabItem))));
 }
 
 export default Sidebar;

package/es/core/editor/components/Sidebar/panes.js

@@ -4,28 +4,33 @@ import ComponentPanel from "./views/ComponentPanel";
 import ImagePanel from "./views/ImagePanel";
 import LinkPanel from "./views/LinkPanel";
 var panes = [{
+  key: 'link',
   title: '链路',
-  key: '1',
+  titleTootip: '在两个节点之间添加链路&线',
   icon: '/img/topo/editor/sidebar/icon/链路.svg',
   content: LinkPanel
 }, {
   title: '组件',
-  key: '2',
+  key: 'basicComponent',
+  titleTootip: '基础组件',
   icon: '/img/topo/editor/sidebar/icon/组件.svg',
   content: ComponentPanel
 }, {
   title: '图片',
-  key: '3',
+  key: 'image',
+  titleTootip: '图片素材',
   icon: '/img/topo/editor/sidebar/icon/图片.svg',
   content: ImagePanel
 }, {
   title: '背景',
-  key: '4',
+  key: 'background',
+  titleTootip: '背景素材',
   icon: '/img/topo/editor/sidebar/icon/背景.svg',
   content: BackgroundPanel
 }, {
   title: '画布',
-  key: '5',
+  key: 'canvas',
+  titleTootip: '拓扑图画布底图',
   icon: '/img/topo/editor/sidebar/icon/画布.svg',
   content: CanvasPanel
 }];

package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -1,38 +1,20 @@
 import _Tag from "@alifd/next/es/tag";
 import React, { useState } from 'react';
 import styles from "./CanvasPanel.module.scss";
-var CANVAS_TOGGLE = [{
-  value: 'white',
-  label: '白色',
-  color: '#FFFFFF'
-}, {
-  value: 'blue',
-  label: '蓝色',
-  color: '#F9FBFF'
-}, {
-  value: 'yellow',
-  label: '黄色',
-  color: '#FFFDE6'
-}, {
-  value: 'green',
-  label: '绿色',
-  color: '#EAFFE8'
-}, {
-  value: 'dark',
-  label: '深色',
-  color: '#031425'
-}];
+import useCanvasThemeConfig from "./hooks/useCanvasThemeConfig";
 export default function CanvasPanel(props) {
-  var selected = props.selected,
-      onSelect = props.onSelect;
+  var topo = props.topo;
 
-  var _useState = useState('white'),
-      selectVal = _useState[0],
-      setSelectVal = _useState[1];
+  var _useCanvasThemeConfig = useCanvasThemeConfig({
+    topo: topo
+  }),
+      themes = _useCanvasThemeConfig.themes,
+      canvasThemeName = _useCanvasThemeConfig.canvasThemeName,
+      setCanvasTheme = _useCanvasThemeConfig.setCanvasTheme;
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.canvasToggle
-  }, CANVAS_TOGGLE.map(function (item, index) {
+  }, themes.map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
       className: styles.canvas,
       key: index
@@ -41,10 +23,9 @@ export default function CanvasPanel(props) {
       style: {
         background: item.color
       },
-      checked: selected ? selected === item.value : selectVal === item.value,
+      checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {
-        setSelectVal(item.value);
-        onSelect && onSelect(item);
+        setCanvasTheme(item.name);
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.box

package/es/core/editor/components/Sidebar/views/CanvasPanel/hooks/useCanvasThemeConfig.js

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { isClusterHtElement } from "../../../../../../../utils/clusterUtil";
+import { getElements, isEdge, isGroup, isLayer, isNode, isText } from "../../../../../../../utils/htElementUtils";
+import THEMES from "../../../../../config/themes";
+import ThemeUtil from "../../../../../utils/themeUtil";
+
+function useCanvasThemeConfig(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModel = topo.store.useModel('displayConfig'),
+      displayConfig = _topo$store$useModel[0],
+      displayConfigDispatchers = _topo$store$useModel[1];
+
+  var canvasThemeName = displayConfig.canvasTheme || 'white';
+
+  var setCanvasTheme = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeName) {
+      var themeConfig;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              themeConfig = THEMES.find(function (item) {
+                return item.name === themeName;
+              });
+              topo.historyManager.beginTransaction();
+              _context.next = 4;
+              return displayConfigDispatchers.update({
+                canvasTheme: themeName
+              });
+
+            case 4:
+              _context.next = 6;
+              return setGlobalTagTheme(themeConfig);
+
+            case 6:
+              setElementsTheme(themeConfig);
+              topo.historyManager.endTransaction();
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function setCanvasTheme(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(); // 设置资源/链路标注样式
+
+
+  function setGlobalTagTheme(_x2) {
+    return _setGlobalTagTheme.apply(this, arguments);
+  }
+
+  function _setGlobalTagTheme() {
+    _setGlobalTagTheme = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeConfig) {
+      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle;
+
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              topo.getHtTopo().setGlobalNodeLabelStyle(themeConfig.globalNodeLabelStyle);
+              topo.getHtTopo().setGlobalEdgeTagStyle(themeConfig.globalEdgeTagStyle); // 更新默认配置
+
+              _topo$store$getModelS = topo.store.getModelState('displayConfig'), nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle, defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
+              _context2.next = 5;
+              return displayConfigDispatchers.update({
+                nodeLabelStyle: _extends({}, nodeLabelStyle, themeConfig.globalNodeLabelStyle),
+                defaultEdgeLabelStyle: _extends({}, defaultEdgeLabelStyle, themeConfig.globalEdgeTagStyle)
+              });
+
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _setGlobalTagTheme.apply(this, arguments);
+  }
+
+  function setElementsTheme(themeConfig) {
+    var dm = topo.getHtTopo().getGraphView().dm();
+    var elements = getElements(dm);
+
+    var _ThemeUtil = ThemeUtil({
+      topo: topo
+    }),
+        setElementTheme = _ThemeUtil.setElementTheme;
+
+    elements.forEach(function (element) {
+      setElementTheme(element, themeConfig);
+    });
+  }
+
+  return {
+    themes: THEMES,
+    canvasThemeName: canvasThemeName,
+    setCanvasTheme: setCanvasTheme
+  };
+}
+
+export default useCanvasThemeConfig;

package/es/core/editor/components/Sidebar/views/CanvasPanel/hooks/useUpdateHtTopoDefaultTagStyle.js

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+/**
+ * 用于标注样式配置变化后通知ht更新。新增元素按改标注样式显示
+ * 场景1：设置标注样式，新增元素按改标注样式显示
+ * 场景1：设置标注样式（工具栏、主题切换），回退，新增元素按改标注样式显示
+ * 
+ * @param {*} props 
+ */
+
+function useUpdateHtTopoDefaultTagStyle(props) {
+  var topo = props.topo;
+  var displayConfig = topo.store.useModelState('displayConfig');
+  var nodeLabelStyle = displayConfig.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfig.defaultEdgeLabelStyle;
+  useEffect(function () {
+    if (nodeLabelStyle) {
+      topo.getHtTopo().setDefaultNodeLabelStyle(nodeLabelStyle);
+    }
+  }, [nodeLabelStyle]);
+  useEffect(function () {
+    if (defaultEdgeLabelStyle) {
+      topo.getHtTopo().setDefaultEdgeTagStyle(defaultEdgeLabelStyle);
+    }
+  }, [defaultEdgeLabelStyle]);
+}
+
+export default useUpdateHtTopoDefaultTagStyle;

package/es/core/editor/components/Sidebar/views/ImagePanel/CiTypeImagePanel.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import ImagePalette from "./HtImagePalette";
-import { getNodeDefaultIcons } from "../../../../../common/icons/icon";
+import { getResourceIcons } from "../../../../../common/icons/icon";
 /**
  * 组件面板
  * @param {*} props 
@@ -11,7 +11,7 @@ import { getNodeDefaultIcons } from "../../../../../common/icons/icon";
 export default function CiTypeImagePanel(props) {
   var topo = props.topo;
   var icons = useMemo(function () {
-    return getNodeDefaultIcons(topo);
+    return getResourceIcons(topo);
   }, []);
   return /*#__PURE__*/React.createElement(ImagePalette, {
     icons: icons,

package/es/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import styles from "./HtImagePalette.module.scss";
 /**
@@ -25,10 +26,20 @@ export default function HtCustomImagePanel(props) {
       });
     } catch (error) {
       rlog.error('初始化资源面板失败', error);
-    } // 注销组件
+    }
 
+    var hanleResize = function hanleResize() {
+      if (viewRef.current) {
+        topo.getHtTopo().invalideComponents();
+      }
+    };
+
+    var resizeObserver = new ResizeObserver(hanleResize);
+    resizeObserver.observe(container); // 注销组件
 
     return function () {
+      resizeObserver.disconnect();
+
       if (viewRef.current) {
         viewRef.current.destroy();
         viewRef.current = null;

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import ResizeObserver from 'resize-observer-polyfill';
 import styles from "./HtImagePalette.module.scss";
 /**
  * 组件面板
@@ -25,10 +26,20 @@ export default function HtImagePalette(props) {
       });
     } catch (error) {
       rlog.error('初始化资源面板失败', error);
-    } // 注销组件
+    }
 
+    var hanleResize = function hanleResize() {
+      if (viewRef.current) {
+        topo.getHtTopo().invalideComponents();
+      }
+    };
+
+    var resizeObserver = new ResizeObserver(hanleResize);
+    resizeObserver.observe(container); // 注销组件
 
     return function () {
+      resizeObserver.disconnect();
+
       if (viewRef.current) {
         viewRef.current.destroy();
         viewRef.current = null;

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss

@@ -1,5 +1,5 @@
 .container {
-  width: '100%';
-  max-height: 400px;
-  overflow: auto;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }

package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js

@@ -1,27 +1,46 @@
-import _Collapse from "@alifd/next/es/collapse";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import CollapsePanel from "../../../../../../components/collapse/Panel";
-import CollapseStyles from "../../../../../../components/collapse/Collapse.module.scss";
+import Collapse from "../../../../../../components/collapse/Collapse";
 import CiTypeImagePanel from "./CiTypeImagePanel";
 import CustomImagePanel from "./CustomImagePanel";
+import { getBasicIcons } from "../../../../../common/icons/icon";
+import ImagePalette from "./HtImagePalette";
+var CollapsePanel = Collapse.Panel;
 export default function ImagePanel(props) {
-  return /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['资源图片', '自定义图片'],
+  var topo = props.topo;
+  var basicIcons = useMemo(function () {
+    return getBasicIcons(topo, false);
+  }, []);
+
+  var handleDownloadCustomImages = function handleDownloadCustomImages() {
+    window.open('/topo/v1/api/shape/download/all');
+  };
+
+  return /*#__PURE__*/React.createElement(Collapse, {
+    accordion: true,
+    defaultExpandedKeys: ['资源图片'],
     style: {
       border: 'none'
     },
-    className: classNames(CollapseStyles.collapse, CollapseStyles.contentNoPadding)
+    fullheight: true,
+    noContentPadding: true
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u8D44\u6E90\u56FE\u7247",
     title: "\u8D44\u6E90\u56FE\u7247"
   }, /*#__PURE__*/React.createElement(CiTypeImagePanel, props)), /*#__PURE__*/React.createElement(CollapsePanel, {
+    key: "\u57FA\u7840\u56FE\u7247",
+    title: "\u57FA\u7840\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(ImagePalette, {
+    icons: basicIcons,
+    topo: topo
+  })), /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
     title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
     extra: /*#__PURE__*/React.createElement(_Button, {
-      title: "\u5BFC\u51FA"
+      title: "\u5BFC\u51FA",
+      onClick: handleDownloadCustomImages
     }, /*#__PURE__*/React.createElement(_Icon, {
       type: "topo_button_icon_export"
     }))

package/es/core/editor/components/Toolbar/buttons.js

@@ -32,7 +32,7 @@ export default function getButtons(isNetworkTopo) {
   Divider, NodeImageButton, // 替换图片
   NodeSizeButton, // 图片尺寸
   Divider, Layout, // 布局方式
-  NodeAlignWidget, // 对齐方式
-  SearchWidget // 搜索
+  NodeAlignWidget // 对齐方式
+  // SearchWidget, // 搜索
   ]);
 }

package/es/core/editor/components/Toolbar/widgets/AddResourceButton.js

@@ -23,7 +23,7 @@ function AddResourceButton(props) {
       topoEdit = props.topoEdit,
       editorProps = props.editorProps; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
 
   var _useState = useState(getAddType(selection)),
       addType = _useState[0],

package/es/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxBackgroundButton.js

@@ -20,9 +20,8 @@ function BoxBackgroundButton(props) {
       setDisabled = _useState[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
-  useEffect(function () {
-    setDisabled(false);
+  var selection = topo.selectionModel.useSelection();
+  useEffect(function () {// setDisabled(false)
   }, [selection]);
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/Disable.svg",
@@ -34,6 +33,7 @@ function BoxBackgroundButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6846\u80CC\u666F",
     tooltip: "\u6846\u80CC\u666F",
+    disabled: disabled,
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,

package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js

@@ -1,8 +1,52 @@
+/* eslint-disable no-undef */
+
+/* eslint-disable jsx-a11y/alt-text */
 import React from 'react';
+import ColorPanel from "../../../../../../components/ColorPanel";
+import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
 
 function Content(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+  var topo = props.topo,
+      onChange = props.onChange,
+      onPickerFocus = props.onPickerFocus,
+      onPickerBlur = props.onPickerBlur,
+      lineSizeChange = props.lineSizeChange,
+      lineWidth = props.lineWidth;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '6px',
+      marginLeft: '12px',
+      marginBottom: '6px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "\u7EBF"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 183,
+      display: 'flex',
+      marginTop: '8px'
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    style: {
+      width: 14,
+      height: 14
+    },
+    src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/\u8FB9\u6846.svg",
+    title: "\u7EBF\u6761\u5BBD\u5EA6"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    defaultValue: lineWidth,
+    min: 1,
+    max: 10,
+    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    onChange: lineSizeChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '5px',
+      marginLeft: '-5px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    onChange: onChange,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur
+  })));
 }
 
 export default Content;