@riil-frontend/component-topology 6.0.7 → 6.0.9

package/es/core/common/icons/useIcons.js

@@ -1,14 +1,12 @@
 import topoManager from '@riil-frontend/component-topology-graph/es/manager';
 import { getBasicIcons, getGroupDefaultIcons, getResourceIcons, transformCustomIcon2HtIcon } from "./icon";
-
-function useCustomIcons(topo) {
+export function useCustomIcons(topo) {
   var _topo$store$useModelS = topo.store.useModelState('customIcon'),
       icons = _topo$store$useModelS.icons;
 
   var customIcons = icons.node.map(transformCustomIcon2HtIcon);
   return customIcons;
 }
-
 export function useNodeIcons(topo) {
   var customIcons = useCustomIcons(topo);
   var groups = [{

package/es/core/components/TopoView/GraphViewPanel.js

@@ -9,14 +9,15 @@ export default function GraphViewPanel(props) {
 
   var _useCanvasTheme = useCanvasTheme({
     topo: topo,
-    themeName: themeName
+    themeName: themeName,
+    hideBackgroundColor: hideBackgroundColor
   }),
       canvasColor = _useCanvasTheme.canvasColor;
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.viewPanel,
     style: {
-      background: hideBackgroundColor ? null : canvasColor
+      background: canvasColor
     }
   }, props.children);
 }

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

@@ -9,10 +9,8 @@ import HtCustomImagePanel from "./HtCustomImagePanel";
  */
 
 export default function CustomImagePanel(props) {
-  var topo = props.topo;
-  var icons = useMemo(function () {
-    return getUserCustomIconsForHt(topo);
-  }, []);
+  var topo = props.topo,
+      icons = props.icons;
   return /*#__PURE__*/React.createElement(HtCustomImagePanel, {
     icons: icons,
     topo: topo

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

@@ -1,18 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import React, { useMemo } from 'react';
-import classNames from 'classnames';
 import Collapse from "../../../../../../components/collapse/Collapse";
 import CiTypeImagePanel from "./CiTypeImagePanel";
 import CustomImagePanel from "./CustomImagePanel";
 import { getBasicIcons } from "../../../../../common/icons/icon";
 import ImagePalette from "./HtImagePalette";
+import { useCustomIcons } from "../../../../../common/icons/useIcons";
 var CollapsePanel = Collapse.Panel;
 export default function ImagePanel(props) {
   var topo = props.topo;
   var basicIcons = useMemo(function () {
     return getBasicIcons(topo, false);
   }, []);
+  var customIcons = useCustomIcons(topo);
 
   var handleDownloadCustomImages = function handleDownloadCustomImages() {
     window.open('/topo/v1/api/shape/download/all');
@@ -40,9 +42,12 @@ export default function ImagePanel(props) {
     title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
     extra: /*#__PURE__*/React.createElement(_Button, {
       title: "\u5BFC\u51FA",
-      onClick: handleDownloadCustomImages
+      onClick: handleDownloadCustomImages,
+      disabled: !customIcons.length
     }, /*#__PURE__*/React.createElement(_Icon, {
       type: "topo_button_icon_export"
     }))
-  }, /*#__PURE__*/React.createElement(CustomImagePanel, props)));
+  }, /*#__PURE__*/React.createElement(CustomImagePanel, _extends({}, props, {
+    icons: customIcons
+  }))));
 }

package/es/core/hooks/useCanvasTheme.js

@@ -30,15 +30,16 @@ var themeMap = [{
 }, {});
 export default function useCanvasTheme(props) {
   var topo = props.topo,
-      themeName = props.themeName; // 拓扑图是否加载
+      themeName = props.themeName,
+      hideBackgroundColor = props.hideBackgroundColor; // 拓扑图是否加载
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
+  var themeConfig = themeMap[themeName || 'white'];
+  var canvasColor = hideBackgroundColor ? null : themeConfig.color;
   useEffect(function () {
     // 设置
-    var themeConfig = themeMap[themeName || 'white'];
-
     if (graphLoaded && themeConfig) {
       try {
         topo.getHtTopo().setTheme(themeName);
@@ -47,8 +48,18 @@ export default function useCanvasTheme(props) {
         console.error('切换主题失败', error);
       }
     }
-  }, [themeName, graphLoaded]);
+  }, [graphLoaded, themeName]);
+  useEffect(function () {
+    // 设置
+    if (graphLoaded) {
+      try {
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
+      } catch (error) {
+        console.error('切换主题失败', error);
+      }
+    }
+  }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: themeMap[themeName].color
+    canvasColor: canvasColor
   };
 }

package/es/core/models/TopoApp.js

@@ -23,7 +23,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.7" === 'string' ? "6.0.7" : null;
+var version = typeof "6.0.9" === 'string' ? "6.0.9" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/common/icons/useIcons.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.useCustomIcons = useCustomIcons;
 exports.useGroupIcons = useGroupIcons;
 exports.useNodeIcons = useNodeIcons;
 

package/lib/core/components/TopoView/GraphViewPanel.js

@@ -19,14 +19,15 @@ function GraphViewPanel(props) {
 
   var _useCanvasTheme = (0, _useCanvasTheme2["default"])({
     topo: topo,
-    themeName: themeName
+    themeName: themeName,
+    hideBackgroundColor: hideBackgroundColor
   }),
       canvasColor = _useCanvasTheme.canvasColor;
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _TopoViewModule["default"].viewPanel,
     style: {
-      background: hideBackgroundColor ? null : canvasColor
+      background: canvasColor
     }
   }, props.children);
 }

package/lib/core/editor/components/Sidebar/views/ImagePanel/CustomImagePanel.js

@@ -23,10 +23,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @returns 
  */
 function CustomImagePanel(props) {
-  var topo = props.topo;
-  var icons = (0, _react.useMemo)(function () {
-    return (0, _icon.getUserCustomIconsForHt)(topo);
-  }, []);
+  var topo = props.topo,
+      icons = props.icons;
   return /*#__PURE__*/_react["default"].createElement(_HtCustomImagePanel["default"], {
     icons: icons,
     topo: topo

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

@@ -5,14 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = ImagePanel;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
 var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Collapse = _interopRequireDefault(require("../../../../../../components/collapse/Collapse"));
 
 var _CiTypeImagePanel = _interopRequireDefault(require("./CiTypeImagePanel"));
@@ -23,6 +23,8 @@ var _icon2 = require("../../../../../common/icons/icon");
 
 var _HtImagePalette = _interopRequireDefault(require("./HtImagePalette"));
 
+var _useIcons = require("../../../../../common/icons/useIcons");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,6 +36,7 @@ function ImagePanel(props) {
   var basicIcons = (0, _react.useMemo)(function () {
     return (0, _icon2.getBasicIcons)(topo, false);
   }, []);
+  var customIcons = (0, _useIcons.useCustomIcons)(topo);
 
   var handleDownloadCustomImages = function handleDownloadCustomImages() {
     window.open('/topo/v1/api/shape/download/all');
@@ -61,9 +64,12 @@ function ImagePanel(props) {
     title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
     extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {
       title: "\u5BFC\u51FA",
-      onClick: handleDownloadCustomImages
+      onClick: handleDownloadCustomImages,
+      disabled: !customIcons.length
     }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
       type: "topo_button_icon_export"
     }))
-  }, /*#__PURE__*/_react["default"].createElement(_CustomImagePanel["default"], props)));
+  }, /*#__PURE__*/_react["default"].createElement(_CustomImagePanel["default"], (0, _extends2["default"])({}, props, {
+    icons: customIcons
+  }))));
 }

package/lib/core/hooks/useCanvasTheme.js

@@ -44,15 +44,16 @@ var themeMap = [{
 
 function useCanvasTheme(props) {
   var topo = props.topo,
-      themeName = props.themeName; // 拓扑图是否加载
+      themeName = props.themeName,
+      hideBackgroundColor = props.hideBackgroundColor; // 拓扑图是否加载
 
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
+  var themeConfig = themeMap[themeName || 'white'];
+  var canvasColor = hideBackgroundColor ? null : themeConfig.color;
   (0, _react.useEffect)(function () {
     // 设置
-    var themeConfig = themeMap[themeName || 'white'];
-
     if (graphLoaded && themeConfig) {
       try {
         topo.getHtTopo().setTheme(themeName);
@@ -61,8 +62,18 @@ function useCanvasTheme(props) {
         console.error('切换主题失败', error);
       }
     }
-  }, [themeName, graphLoaded]);
+  }, [graphLoaded, themeName]);
+  (0, _react.useEffect)(function () {
+    // 设置
+    if (graphLoaded) {
+      try {
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
+      } catch (error) {
+        console.error('切换主题失败', error);
+      }
+    }
+  }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: themeMap[themeName].color
+    canvasColor: canvasColor
   };
 }

package/lib/core/models/TopoApp.js

@@ -54,7 +54,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "6.0.7" === 'string' ? "6.0.7" : null;
+var version = typeof "6.0.9" === 'string' ? "6.0.9" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "6.0.7",
+  "version": "6.0.9",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.7/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.9/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }