@riil-frontend/component-topology 5.0.18 → 6.0.0-alpha.2

package/lib/core/components/ResourceViewAttributeSetting/Setting.js

@@ -9,8 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
-
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
 var _BatchAttrMetric = _interopRequireDefault(require("../../../components/BatchAttrMetric"));
@@ -63,27 +61,15 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var saveMarkSetting = function saveMarkSetting(showType, parm, selectType) {
     _rlog["default"].debug("saveMarkSetting", showType, parm);
 
-    if (elementType === "node") {
-      onChange({
-        isCustom: true,
-        data: parm
-      });
-    }
-
-    if (elementType === "link") {
-      onChange({
-        isCustom: true,
-        data: parm
-      });
-    }
+    onChange({
+      isCustom: true,
+      data: parm
+    });
   };
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
-      show: openMarkSetting,
-      openGlobalTootipSetting: function openGlobalTootipSetting() {
-        openMarkSetting();
-      }
+      show: openMarkSetting
     };
   });
   var newValue = (0, _react.useMemo)(function () {

package/lib/core/components/TopoView/TopoView.module.scss

@@ -10,10 +10,6 @@
   flex: 1;
   overflow: hidden;
   position: relative;
-
-  &.viewPanelEditMode {
-    border-top: 1px solid #E6E7EB;
-  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题

package/lib/core/components/TopoView/editor.module.scss

@@ -0,0 +1,3 @@
+.borderLine {
+  border-top: 1px solid #E6E7EB;
+}

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

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -45,22 +47,27 @@ var _graphLinkUtil = require("../../utils/graphLinkUtil");
 
 var _clusterUtil = require("../../../utils/clusterUtil");
 
-var _SelectionManager = _interopRequireDefault(require("../../models/SelectionManager"));
+var _EditorToolbar = _interopRequireDefault(require("../../editor/components/Toolbar/EditorToolbar"));
+
+var _Sidebar = _interopRequireDefault(require("../../editor/components/Sidebar/Sidebar"));
 
 var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
 
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
+var _editorModule = _interopRequireDefault(require("./editor.module.scss"));
+
 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; }
 
 var Topology = function Topology(props) {
-  var _classnames, _graphViewProps$creat;
+  var _classnames;
 
   var topo = props.topo,
       defaultEnterEditMode = props.defaultEnterEditMode,
       titleBar = props.titleBar,
+      toolbar = props.toolbar,
       buildLoadOptions = props.buildLoadOptions,
       onReady = props.onReady,
       onLoaded = props.onLoaded,
@@ -99,9 +106,7 @@ var Topology = function Topology(props) {
       setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
 
 
-  var selectionManager = (0, _react.useMemo)(function () {
-    return new _SelectionManager["default"](topo);
-  }, []);
+  var selectionManager = topo.selectionManager;
   (0, _useRouterAdapter["default"])(props);
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
@@ -157,7 +162,11 @@ var Topology = function Topology(props) {
     }
   }, []);
   var handleGraphDataLoaded = (0, _react.useCallback)(function () {
-    _rlog["default"].info('TopoView.handleGraphDataLoaded', topoData, topo.getDataModel().getDatas().toArray());
+    _rlog["default"].info('TopoView.handleGraphDataLoaded', new Date().toString(), {
+      topoMod: topo.store.getState().topoMod,
+      topoData: topoData,
+      htElements: topo.getDataModel().getDatas().toArray()
+    });
 
     (0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
     (0, _graphLinkUtil.fixLink)(topo);
@@ -179,7 +188,11 @@ var Topology = function Topology(props) {
     }
   }, [topoData]);
   var handleGraphLoaded = (0, _react.useCallback)(function () {
-    _rlog["default"].info('TopoView.handleGraphLoaded', topoData, topo.getDataModel().getDatas().toArray());
+    _rlog["default"].info('TopoView.handleGraphLoaded', new Date().toString(), {
+      topoMod: topo.store.getState().topoMod,
+      topoData: topoData,
+      htElements: topo.getDataModel().getDatas().toArray()
+    });
 
     (0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
     (0, _graphLinkUtil.fixLink)(topo);
@@ -280,6 +293,37 @@ var Topology = function Topology(props) {
     });
   };
 
+  var renderCanvas = function renderCanvas() {
+    var _graphViewProps$creat;
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _TopoViewModule["default"].viewPanel,
+      onKeyDown: function onKeyDown(e) {
+        topo.historyManager && topo.historyManager.handleKeyDown(e);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
+      createHtTopoProps: (0, _extends2["default"])({}, graphViewProps.createHtTopoProps, {
+        editor: (0, _extends2["default"])({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
+      }),
+      data: tData,
+      defaultEnterEditMode: defaultEnterEditMode,
+      renderPropertyView: renderPropertyView,
+      renderBackgroundView: renderBackgroundView,
+      onCreate: onGraphCreated,
+      onLoaded: handleGraphLoaded,
+      onDataLoaded: handleGraphDataLoaded,
+      onDestroy: onDestroy,
+      onEvent: handleEvent,
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      debugId: topo.debugId
+    })));
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _TopoViewModule["default"].topoView,
     "data-version": topo.version
@@ -288,32 +332,25 @@ var Topology = function Topology(props) {
     viewerProps: viewerProps,
     onEnterEdit: onEnterEdit,
     topoEditApi: topoEdit
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(_TopoViewModule["default"].viewPanel, (_classnames = {}, _classnames[_TopoViewModule["default"].viewPanelEditMode] = isEditMode, _classnames)),
-    onKeyDown: function onKeyDown(e) {
-      topo.historyManager && topo.historyManager.handleKeyDown(e);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
-    createHtTopoProps: (0, _extends2["default"])({}, graphViewProps.createHtTopoProps, {
-      editor: (0, _extends2["default"])({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
-    }),
-    data: tData,
-    defaultEnterEditMode: defaultEnterEditMode,
-    renderPropertyView: renderPropertyView,
-    renderBackgroundView: renderBackgroundView,
-    onCreate: onGraphCreated,
-    onLoaded: handleGraphLoaded,
-    onDataLoaded: handleGraphDataLoaded,
-    onDestroy: onDestroy,
-    onEvent: handleEvent,
-    style: {
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden'
+  })), isEditMode && /*#__PURE__*/_react["default"].createElement(_EditorToolbar["default"], {
+    topo: topo,
+    topoEdit: topoEdit,
+    topoContext: {
+      urlParams: urlParams
+    },
+    editorProps: editorProps
+  }), /*#__PURE__*/_react["default"].createElement(_box["default"], {
+    direction: "row",
+    flex: 1,
+    className: (0, _classnames2["default"])((_classnames = {}, _classnames[_editorModule["default"].borderLine] = isEditMode, _classnames))
+  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], {
+    topo: topo,
+    topoEdit: topoEdit,
+    topoContext: {
+      urlParams: urlParams
     },
-    debugId: topo.debugId
-  }))), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
+    editorProps: editorProps
+  }), renderCanvas()), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
     topo: topo,
     viewerProps: viewerProps,
     topoContext: topoContext

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _VerticalIconTab = _interopRequireDefault(require("../../../../components/VerticalIconTab"));
+
+var _LinkPanel = _interopRequireDefault(require("./views/LinkPanel"));
+
+var _ComponentPanel = _interopRequireDefault(require("./views/ComponentPanel"));
+
+var _ImagePanel = _interopRequireDefault(require("./views/ImagePanel"));
+
+var _BackgroundPanel = _interopRequireDefault(require("./views/BackgroundPanel"));
+
+var _CanvasPanel = _interopRequireDefault(require("./views/CanvasPanel"));
+
+var _SidebarModule = _interopRequireDefault(require("./Sidebar.module.scss"));
+
+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; }
+
+function Sidebar(props) {
+  var topo = props.topo;
+
+  var _useState = (0, _react.useState)(null),
+      activeKey = _useState[0],
+      setActivekey = _useState[1];
+
+  var panes = [{
+    title: '链路',
+    key: '1',
+    icon: '/img/topo/editor/sidebar/icon/链路.svg',
+    content: _LinkPanel["default"]
+  }, {
+    title: '组件',
+    key: '2',
+    icon: '/img/topo/editor/sidebar/icon/组件.svg',
+    content: _ComponentPanel["default"]
+  }, {
+    title: '图片',
+    key: '3',
+    icon: '/img/topo/editor/sidebar/icon/图片.svg',
+    content: _ImagePanel["default"]
+  }, {
+    title: '背景',
+    key: '4',
+    icon: '/img/topo/editor/sidebar/icon/背景.svg',
+    content: _BackgroundPanel["default"]
+  }, {
+    title: '画布',
+    key: '5',
+    icon: '/img/topo/editor/sidebar/icon/画布.svg',
+    content: _CanvasPanel["default"]
+  }].map(function (item) {
+    var View = item.content;
+    return (0, _extends2["default"])({}, item, {
+      content: function content() {
+        return /*#__PURE__*/_react["default"].createElement(View, (0, _extends2["default"])({}, props, {
+          topo: topo,
+          active: activeKey === item.key
+        }));
+      }
+    });
+  });
+
+  var renderTabItem = function renderTabItem(pane) {
+    var View = pane.content;
+    return /*#__PURE__*/_react["default"].createElement(_VerticalIconTab["default"].Item, (0, _extends2["default"])({
+      key: pane.key
+    }, pane), /*#__PURE__*/_react["default"].createElement(View, {
+      topo: topo,
+      active: activeKey === pane.key
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _SidebarModule["default"].sidebar
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _SidebarModule["default"].tabsContainer
+  }, /*#__PURE__*/_react["default"].createElement(_VerticalIconTab["default"], {
+    activeKey: activeKey,
+    onChange: setActivekey
+  }, panes.map(renderTabItem))));
+}
+
+var _default = Sidebar;
+exports["default"] = _default;

package/lib/core/editor/components/Sidebar/Sidebar.module.scss

@@ -0,0 +1,15 @@
+.sidebar {
+  // border-right: 1px solid #E6E7EB;
+  position: relative;
+  width: 60px;
+
+  .tabsContainer {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 320px;
+    background: #FFF;
+  }
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BackgroundPanel;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BackgroundView = _interopRequireDefault(require("../../../BackgroundView"));
+
+function BackgroundPanel(props) {
+  var topo = props.topo,
+      editorProps = props.editorProps;
+  return /*#__PURE__*/_react["default"].createElement(_BackgroundView["default"], {
+    topo: topo,
+    editorProps: editorProps
+  });
+}

package/lib/core/editor/components/Sidebar/views/BackgroundPanel/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _BackgroundPanel = _interopRequireDefault(require("./BackgroundPanel"));
+
+var _default = _BackgroundPanel["default"];
+exports["default"] = _default;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ImagePanel;
+
+var _react = _interopRequireDefault(require("react"));
+
+function ImagePanel(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, "ImagePanel");
+}

package/lib/core/editor/components/Sidebar/views/CanvasPanel/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ImagePanel = _interopRequireDefault(require("./ImagePanel"));
+
+var _default = _ImagePanel["default"];
+exports["default"] = _default;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ComponentPanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+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; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function ComponentPanel(props) {
+  var topo = props.topo; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createBasicPalette(container);
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = CiTypeImagePanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _ImagePalette = _interopRequireDefault(require("./ImagePalette"));
+
+var _icon = require("../../../../../common/icons/icon");
+
+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; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function CiTypeImagePanel(props) {
+  var topo = props.topo;
+  var icons = (0, _react.useMemo)(function () {
+    return (0, _icon.getNodeDefaultIcons)(topo);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_ImagePalette["default"], {
+    icons: icons,
+    topo: topo
+  });
+}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = CustomImagePanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _icon = require("../../../../../common/icons/icon");
+
+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; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function CustomImagePanel(props) {
+  var topo = props.topo; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var icons = (0, _icon.getUserCustomIconsForHt)(topo);
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createUploadImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ImagePalette;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+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; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function ImagePalette(props) {
+  var topo = props.topo,
+      icons = props.icons; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ImagePanel;
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Panel = _interopRequireDefault(require("../../../../../../components/collapse/Panel"));
+
+var _CollapseModule = _interopRequireDefault(require("../../../../../../components/collapse/Collapse.module.scss"));
+
+var _CiTypeImagePanel = _interopRequireDefault(require("./CiTypeImagePanel"));
+
+var _CustomImagePanel = _interopRequireDefault(require("./CustomImagePanel"));
+
+function ImagePanel(props) {
+  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+    defaultExpandedKeys: ['资源图片', '自定义图片'],
+    style: {
+      border: 'none'
+    },
+    className: _CollapseModule["default"].collapse
+  }, /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    key: "\u8D44\u6E90\u56FE\u7247",
+    title: "\u8D44\u6E90\u56FE\u7247"
+  }, /*#__PURE__*/_react["default"].createElement(_CiTypeImagePanel["default"], props)), /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      title: "\u5BFC\u51FA"
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      type: "topo_button_icon_export"
+    }))
+  }, /*#__PURE__*/_react["default"].createElement(_CustomImagePanel["default"], props)));
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ImagePanel = _interopRequireDefault(require("./ImagePanel"));
+
+var _default = _ImagePanel["default"];
+exports["default"] = _default;