@riil-frontend/component-topology 9.0.0-a.8 → 9.0.1

package/es/networkTopo/utils/exitLinkUtil.js

@@ -0,0 +1,257 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { getNodes } from "../../utils/htElementUtils";
+
+function findPingNodeFromHt(nodes, ip) {
+  return nodes.find(function (node) {
+    return node.a('ciType') === "ping" && node.a('ipAddress') === ip;
+  });
+}
+
+function isPingHtNode(node, ip) {
+  return node.a('ciType') === "ping" && node.a('ipAddress') === ip;
+}
+
+function isIpHtNode(node, ip) {
+  return node.a("bindType") === 'ip' && node.a("bindIp") === ip;
+}
+
+export function buildIpNode(ip) {
+  return {
+    id: "ip:" + ip,
+    name: ip,
+    bindType: "ip",
+    // 绑定资源类型。关联资源 值为空，关联IP ip
+    bindIp: ip,
+    // TODO 所属区域，从序列化拿
+    // 'groupId': null,
+    // 'groupTag': null,
+    ipAddress: ip,
+    // 'attributes': [],
+    // 'metrics': [],
+    type: "node",
+    isbinding: true,
+    // 'dtype': 'device'
+    operation: "delete"
+  };
+}
+
+function getHtSerialize(serialize) {
+  if (serialize) {
+    return JSON.parse(serialize);
+  }
+
+  return null;
+}
+
+function isExitLink(link) {
+  return link.attributes.destination_type === "ip";
+} // 判断拓扑图上ip是否唯一
+
+
+export function isUniqueIp(dataModel, ip, nodeElement) {
+  var nodes = getNodes(dataModel);
+  var isUnique = true; // console.log("nodes-nodeElement", nodes, nodeElement);
+
+  if (nodeElement) {
+    var arr = nodes.filter(function (node) {
+      return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
+    }).filter(function (node) {
+      return isPingHtNode(node, ip) || isIpHtNode(node, ip);
+    });
+    isUnique = arr.length === 0;
+  } else {
+    isUnique = nodes.filter(function (node) {
+      return node.a("ipAddress") === ip;
+    }).length === 0;
+  }
+
+  return isUnique;
+}
+/**
+ * 打开拓扑出口链路处理
+ * @param {*} topoData 
+ * @returns 
+ */
+
+export function processExitLink(topoData) {
+  var nodes = topoData.nodes,
+      links = topoData.links; // 出口链路目的端设置为IP节点或者ping资源节点id
+
+  var newLinks = updateLinkTarget(links, nodes);
+
+  if (!topoData.serialize) {
+    return _extends({}, topoData, {
+      links: newLinks
+    });
+  }
+
+  var serialize = _extends({}, getHtSerialize(topoData.serialize)); // 历史数据升级
+
+
+  links.filter(isExitLink) // 升级V1.4前配置的出口链路目的端节点为IP节点
+  .forEach(function (link) {
+    return upgradeExitLinkTarget(link, serialize);
+  }); // 历史数据适配：同IP节点关联多个不同IP的链路、分级拓扑。target匹配不到元素时，根据序列化匹配
+
+  newLinks = upgradeLinkTargetNotExisted(newLinks); // IP节点构造为node。如果有相同ip的ping资源和图片节点，图片节点消失（不构造）
+
+  var ipNodes = getIpNodes(serialize, nodes);
+  return _extends({}, topoData, {
+    nodes: [].concat(nodes, ipNodes),
+    links: newLinks,
+    serialize: serialize
+  }); // 历史数据适配：同IP节点关联多个不同IP的链路、分级拓扑。target匹配不到元素时，根据序列化匹配
+
+  function upgradeLinkTargetNotExisted(links) {
+    newLinks = links.map(function (link) {
+      if (!isExitLink(link) || link.target && nodes.find(function (node) {
+        return node.id === link.target;
+      })) {
+        return link;
+      }
+
+      var destinationIp = link.attributes['network_link.destination_ipv4'];
+      var pingNode = findPingNode(nodes, destinationIp); // 出口链路目的端设置为IP节点或者ping资源节点id
+
+      var target = link.target; // 历史数据适配：同IP节点关联多个不同IP的链路、分级拓扑。target匹配不到元素时，根据序列化匹配
+
+      var targetSerialize = findElementSerializeById(serialize, target);
+
+      if (!targetSerialize) {
+        var linkSerialize = findElementSerializeById(serialize, link.id);
+
+        if (linkSerialize) {
+          // 根据链路序列化数据找目的端节点
+          // eslint-disable-next-line no-underscore-dangle
+          var targetNodeSerialize = serialize.d.find(function (item) {
+            var _linkSerialize$p$targ;
+
+            return item.i === (linkSerialize === null || linkSerialize === void 0 ? void 0 : (_linkSerialize$p$targ = linkSerialize.p.target) === null || _linkSerialize$p$targ === void 0 ? void 0 : _linkSerialize$p$targ.__i);
+          });
+
+          if (targetNodeSerialize) {
+            target = targetNodeSerialize.p.tag;
+          }
+        }
+      }
+
+      return _extends({}, link, {
+        target: target
+      });
+    });
+    return newLinks;
+  }
+
+  function getIpNodes(serialize, nodes) {
+    // 从序列化获取关联的IP
+    var ips = serialize.d.filter(function (item) {
+      return item.a.bindType === 'ip';
+    }).map(function (item) {
+      return item.a.bindIp;
+    }).filter(function (item) {
+      return !!item;
+    }) // 过滤ping资源对应的ip
+    .filter(function (ip) {
+      return !findPingNode(nodes, ip);
+    });
+    return ips.map(buildIpNode);
+  }
+
+  function findIpNodeSerialize(serialize, ip) {
+    return serialize.d.find(function (item) {
+      return item.p.tag === "ip:" + ip;
+    });
+  }
+
+  function findElementSerializeById(serialize, id) {
+    return serialize.d.find(function (item) {
+      return item.a.id === id;
+    });
+  }
+  /**
+   * 链路在序列化存在且目的端不是ping资源、IP节点时，升级链路目的端序列化数据为IP节点
+   * @param {*} link 
+   */
+
+
+  function upgradeExitLinkTarget(link, serialize) {
+    var destinationIp = link.attributes['network_link.destination_ipv4'];
+    var linkSerialize = findElementSerializeById(serialize, link.id);
+
+    if (linkSerialize) {
+      // 根据链路序列化数据找目的端节点
+      // eslint-disable-next-line no-underscore-dangle
+      var targetNodeSerialize = serialize.d.find(function (item) {
+        var _linkSerialize$p$targ2;
+
+        return item.i === (linkSerialize === null || linkSerialize === void 0 ? void 0 : (_linkSerialize$p$targ2 = linkSerialize.p.target) === null || _linkSerialize$p$targ2 === void 0 ? void 0 : _linkSerialize$p$targ2.__i);
+      });
+
+      if (targetNodeSerialize && !targetNodeSerialize.p.tag) {
+        targetNodeSerialize.a = _extends({}, targetNodeSerialize.a, buildIpNode(destinationIp), {
+          isbinding: true
+        });
+        targetNodeSerialize.p.tag = "ip:" + destinationIp;
+      }
+    }
+  }
+} // 从拓扑数据查找
+
+function findPingNode(nodes, ip) {
+  return nodes.find(function (node) {
+    return node.ciType === "ping" && (node.ipAddress || node.attributes.ipv4_address) === ip;
+  });
+} // 出口链路目的端设置为IP节点或者ping资源节点id
+
+
+function updateLinkTarget(links, nodes) {
+  var newLinks = links.map(function (link) {
+    if (!isExitLink(link) || link.target && nodes.find(function (node) {
+      return node.id === link.target;
+    })) {
+      return link;
+    }
+
+    var destinationIp = link.attributes['network_link.destination_ipv4'];
+    var pingNode = findPingNode(nodes, destinationIp); // 出口链路目的端设置为IP节点或者ping资源节点id
+
+    var target = pingNode ? pingNode.id : "ip:" + destinationIp;
+    return _extends({}, link, {
+      target: target
+    });
+  });
+  return newLinks;
+}
+/**
+ * 编辑模式按资源查询拓扑数据处理出口链路target
+ * 1. 出口链路目的端设置为IP节点或者ping资源节点id
+ * 2. IP构造为node节点
+ * FIXME 移到frontend 网络拓扑编辑
+ * @param {*} topoData 
+ * @returns 
+ */
+
+
+export function processByConditionResult(topoData, groupConfigs) {
+  var nodes = topoData.nodes,
+      links = topoData.links;
+  var ipNodes = getIpNodes(groupConfigs, nodes); // 出口链路目的端设置为IP节点或者ping资源节点id
+
+  var newLinks = updateLinkTarget(links, nodes);
+  return _extends({}, topoData, {
+    nodes: [].concat(nodes, ipNodes),
+    links: newLinks
+  });
+
+  function getIpNodes(groupConfigs, nodes) {
+    var ips = groupConfigs.map(function (g) {
+      return g.condition.linkIps;
+    }).reduce(function (result, groupIps) {
+      return [].concat(result, groupIps);
+    }, []) // 过滤ping资源对应的ip节点
+    .filter(function (ip) {
+      return !findPingNode(nodes, ip);
+    });
+    return ips.map(buildIpNode);
+  }
+}

package/es/style.js

@@ -14,6 +14,7 @@ import '@riil-frontend/component-pager/es/style';
 import '@alifd/next/es/button/style';
 import '@alifd/next/es/icon/style';
 import '@alifd/next/es/loading/style';
+import '@alifd/next/es/switch/style';
 import '@alifd/next/es/divider/style';
 import '@riil-frontend/component-no-data-page/es/style';
 

package/es/utils/ResourceConfigUtil.js

@@ -2,8 +2,7 @@ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import sortBy from 'lodash/sortBy';
 import { isExitLink } from "../core/models/utils/linkUtils";
 import { isClusterHtElement } from "./clusterUtil";
-import { getGroupChildrenResourceElements, getLayerChildrenResourceElements } from "./htElementDataUtil";
-import { getEdges, getGroups, getLayers, getNodes } from "./htElementUtils";
+import { getEdges, getGroupChildren, getGroups, getLayerChildren, getLayers, getNodes } from "./htElementUtils";
 /**
  * 从拓扑图解析出拓扑资源配置
  *
@@ -104,7 +103,9 @@ function getLayerDatas(dataModel) {
       name: layerElement.s('label'),
       order: layerElement.a('order'),
       resources: {
-        "static": getLayerChildrenResourceElements(layerElement).map(function (node) {
+        "static": getLayerChildren(layerElement).filter(function (item) {
+          return !!item.getTag();
+        }).map(function (node) {
           return node.getTag();
         })
       }
@@ -133,7 +134,7 @@ function getGroupConfigByElement(groupElement) {
     name: groupElement.a('name'),
     order: groupElement.a('order'),
     resources: {
-      "static": getGroupChildrenResourceElements(groupElement).filter(function (node) {
+      "static": getGroupChildren(groupElement).filter(function (node) {
         return !!node.getTag();
       }).map(function (node) {
         return node.getTag();

package/es/utils/htElementDataUtil.js

@@ -1,4 +1,4 @@
-import { getEdges, getGroupChildren, getLayerChildren } from "./htElementUtils";
+import { getEdges } from "./htElementUtils";
 import * as htElementUtils from "./htElementUtils";
 export function isLayer(element) {
   return element.className === 'ht.Grid';
@@ -21,12 +21,6 @@ export function isResourceElement(element) {
 export function isResourceNodeElement(element) {
   return (htElementUtils.isGroup(element) || htElementUtils.isNode(element)) && isResourceElement(element);
 }
-export function getGroupChildrenResourceElements(element) {
-  return getGroupChildren(element).filter(isResourceElement);
-}
-export function getLayerChildrenResourceElements(layerElement) {
-  return getLayerChildren(layerElement).filter(isResourceElement);
-}
 export var getAllEdgeResourceIds = function getAllEdgeResourceIds(dm) {
   return getEdges(dm).filter(function (node) {
     return !!node.getTag();

package/es/utils/htElementUtils.js

@@ -15,7 +15,7 @@ function getElementData(element) {
     styleMap: element.getStyleMap()
   };
 
-  if (className === 'ht.Edge') {
+  if (className === "ht.Edge") {
     return _extends({}, commonData);
   }
 
@@ -27,7 +27,7 @@ function getElementData(element) {
 export function isNode(element) {
   // HT为了支持区域内无节点可展开增加了站位节点，因此 节点的layer等于container_blank的过滤掉就可以了
   // eslint-disable-next-line no-underscore-dangle
-  return element instanceof ht.Node && !isLayer(element) && element._layer !== 'container_blank';
+  return element instanceof ht.Node && !isLayer(element) && element._layer !== "container_blank";
 }
 export function isEdge(element) {
   return element instanceof ht.Edge;
@@ -38,7 +38,7 @@ export function isValidEdge(element) {
   }
 
   if (!element.getSource() || !element.getTarget()) {
-    rlog.error('isValidEdge 连线异常：源或目的为空', element);
+    rlog.error("isValidEdge 连线异常：源或目的为空", element);
     return false;
   }
 
@@ -51,7 +51,7 @@ export function isLayer(element) {
   return element instanceof ht.Grid;
 }
 export function isText(element) {
-  return element instanceof ht.Text && element.a('isText');
+  return element instanceof ht.Text && element.a("isText");
 }
 export function getElements(dataModel) {
   // console.error(111, dataModel.getDatas().getArray())
@@ -72,7 +72,7 @@ export function getGroupDatas(dataModel) {
 }
 export function getGroupElementByTag(dataModel, tag) {
   return dataModel.getDataByTag(tag) || dataModel.getDatas().toArray().filter(function (item) {
-    return item.a('tag') === tag;
+    return item.a("tag") === tag;
   })[0];
 }
 export function getGroupData(element) {
@@ -83,14 +83,14 @@ export function getGroupData(element) {
   var parent = element.getParent();
   var groupInfo = parent ? {
     groupId: parent.getTag(),
-    groupTag: parent.a('tag') // 父容器
+    groupTag: parent.a("tag") // 父容器
 
   } : {};
   return _extends({
     name: element.getStyleMap().label
   }, element.getAttrObject(), {
     id: element.getTag(),
-    tag: element.a('tag'),
+    tag: element.a("tag"),
     image: element.getImage()
   }, groupInfo);
 }
@@ -104,7 +104,7 @@ export function getNodeData(element) {
   var parent = element.getParent();
   var groupInfo = parent ? {
     groupId: parent.getTag(),
-    groupTag: parent.a('tag') // 父容器
+    groupTag: parent.a("tag") // 父容器
 
   } : {};
   return _extends({}, element.getAttrObject(), {
@@ -116,12 +116,12 @@ export function getEdges(dataModel) {
   return getElements(dataModel).filter(isValidEdge);
 }
 export function isEdgeGroupExpanded(edge) {
-  return isEdge(edge) && edge.getEdgeGroup() && !!edge.s('edge.expanded');
+  return isEdge(edge) && edge.getEdgeGroup() && !!edge.s("edge.expanded");
 }
 /**
  * 是否连线组代理
- * @param {*} edge 
- * @returns 
+ * @param {*} edge
+ * @returns
  */
 
 export function isEdgeGroupAgent(edge) {
@@ -129,9 +129,9 @@ export function isEdgeGroupAgent(edge) {
 }
 /**
  * 获得两个节点间的连线列表
- * @param {*} node1 
- * @param {*} node2 
- * @returns 
+ * @param {*} node1
+ * @param {*} node2
+ * @returns
  */
 
 export function getEdgesBetweenNodes(node1, node2) {
@@ -153,7 +153,7 @@ export function getEdgesBetweenNodes(node1, node2) {
 }
 /**
  * 获得节点间的连线组，连线<=1时返回null
- * @returns 
+ * @returns
  */
 
 export function getEdgeGroupByNodes(node1, node2) {
@@ -172,7 +172,7 @@ export function getEdgeGroupByNodes(node1, node2) {
 }
 /**
  * 获得节点间的连线组，连线<=1时返回null
- * @returns 
+ * @returns
  */
 
 export function getEdgeGroupByNodeTags(dataModel, nodeTag1, nodeTag2) {
@@ -180,7 +180,7 @@ export function getEdgeGroupByNodeTags(dataModel, nodeTag1, nodeTag2) {
   var node2 = dataModel.getDataByTag(nodeTag2);
 
   if (!node1 || !node2) {
-    console.warn('getEdgeGroupByNodes 未找到节点', {
+    console.warn("getEdgeGroupByNodes 未找到节点", {
       node1: node1,
       node2: node2,
       nodeTag1: nodeTag1,
@@ -261,7 +261,7 @@ export function getGroupChildren(group) {
 
 
   return group.getChildren().getArray().filter(function (node) {
-    return node._layer !== 'container_blank';
+    return node._layer !== "container_blank";
   });
 }
 /**
@@ -291,7 +291,7 @@ export function getGroupChildrenData(group) {
 export function setElementRuntimeStyle(element, name, value) {
   var _extends2;
 
-  var prevRuntimeStyle = element.a('runtimeStyles') || {};
+  var prevRuntimeStyle = element.a("runtimeStyles") || {};
 
   var runtimeStyle = _extends({}, prevRuntimeStyle, (_extends2 = {}, _extends2[name] = value, _extends2)); // if (prevRuntimeStyle[name] === undefined && value === undefined) {
   //   return
@@ -302,7 +302,7 @@ export function setElementRuntimeStyle(element, name, value) {
     runtimeStyle[name] = undefined; // delete runtimeStyle[name]
   }
 
-  element.a('runtimeStyles', runtimeStyle);
+  element.a("runtimeStyles", runtimeStyle);
 }
 /**
  * 判断拓扑图是否存在元素
@@ -315,7 +315,7 @@ export function isExistedElement(htTopo, dataModel, data) {
 
 
   var element = getElements(dataModel).find(function (item) {
-    return data.tag && item.a('tag') === data.tag;
+    return data.tag && item.a("tag") === data.tag;
   });
 
   if (element) {

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -3,8 +3,8 @@
 
 .tabs {
   height: 100%;
-
-}
+  display: flex;
+} 
 
 // 导航
 .nav {
@@ -49,17 +49,23 @@
 
 // 标签页内容区
 .content {
-  width: 260px;
+  // width: 260px;
   height: 100%;
   border-left: none !important;
-  border-right: 1px solid var(--tab-wrapped-border-line-color);
   transition: width .1s linear;
+  overflow: initial !important;
 
   :global {
     .#{$css-prefix}tabs-tabpane {
-      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      // width: 250px;
       height: 100%;
       overflow: auto;
+      background: #FFF;
+      border-right: 1px solid var(--tab-wrapped-border-line-color);
     }
   }
 

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

@@ -7,8 +7,12 @@ exports["default"] = GraphViewPanel;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _useCanvasTheme2 = _interopRequireDefault(require("../../hooks/useCanvasTheme"));
 
+var _useTopoFullscreen = _interopRequireDefault(require("../../hooks/useTopoFullscreen"));
+
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.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); }
@@ -16,6 +20,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 GraphViewPanel(props) {
+  var _classNames;
+
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
   var displayConfig = topo.store.useModelState('displayConfig');
@@ -26,8 +32,14 @@ function GraphViewPanel(props) {
     themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
-      canvasColor = _useCanvasTheme.canvasColor;
+      canvasColor = _useCanvasTheme.canvasColor,
+      canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
+  var panelRef = (0, _react.useRef)();
+  (0, _useTopoFullscreen["default"])({
+    topo: topo,
+    panelRef: panelRef
+  });
   (0, _react.useEffect)(function () {
     // eslint-disable-next-line no-underscore-dangle
     window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
@@ -43,9 +55,12 @@ function GraphViewPanel(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TopoViewModule["default"].viewPanel,
-    style: {
+    ref: panelRef,
+    className: (0, _classnames["default"])(_TopoViewModule["default"].viewPanel, (_classNames = {}, _classNames[_TopoViewModule["default"].backgroundImg] = !!canvasbackgroundImage, _classNames)),
+    style: canvasColor ? {
       background: canvasColor
+    } : {
+      backgroundImage: "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

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

@@ -10,14 +10,28 @@
   flex: 1;
   overflow: hidden;
   position: relative;
+
+  &.backgroundImg {
+    /* 背景图垂直、水平均居中 */
+    background-position: center center;
+    /* 背景图不平铺 */
+    background-repeat: no-repeat;
+    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+    background-attachment: fixed;
+    /* 让背景图基于容器大小伸缩 */
+    background-size: cover;
+    /* 设置背景颜色，背景图加载过程中会显示背景色 */
+    // background-color: #464646;
+  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题
 :global {
-  body > .ht-ui-view {
+  body>.ht-ui-view {
     z-index: 10000;
   }
-  body > div[ht="ht-view ht.ui.ContextMenu"] {
+
+  body>div[ht="ht-view ht.ui.ContextMenu"] {
     z-index: 1000;
   }
-}
+}

package/lib/core/editor/components/BackgroundView/index.module.scss

@@ -1,8 +1,11 @@
 @import "~@alifd/next/variables.scss";
 
 .background-view {
+  width: 260px;
   padding: 16px;
   background: #fff;
+  height: 100%;
+  overflow: auto;
   .option {
     text-align: right;
     button {

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

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _CustomIconPlugin = _interopRequireDefault(require("./CustomIconPlugin"));
 
 var _SaveLoading = _interopRequireDefault(require("./plugins/SaveLoading"));
@@ -36,7 +38,11 @@ function TopoEditorPlugin(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
   (0, _react.useEffect)(function () {
+    _rlog["default"].debug('TopoEditorPlugin 进来了');
+
     return function () {
+      _rlog["default"].debug('TopoEditorPlugin 进来了');
+
       topoEdit.reset();
     };
   }, []);
@@ -48,7 +54,7 @@ function TopoEditorPlugin(props) {
   var plugins = [_CorePlugin["default"], _SaveLoading["default"], _AddElementThemePlugin["default"], _CustomIconPlugin["default"], _GroupAddResourceDrawerPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/_react["default"].createElement(Plugin, (0, _extends2["default"])({
-      key: index,
+      key: Plugin.pluginName || index,
       store: store
     }, props));
   }));

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

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

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

@@ -36,7 +36,7 @@ function CanvasPanel(props) {
     }, /*#__PURE__*/_react["default"].createElement(_tag["default"].Selectable, {
       className: _CanvasPanelModule["default"].tag,
       style: {
-        background: item.color
+        background: item.color || "url(" + item.backgroundImageThumbnail + ")"
       },
       checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {