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

package/es/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/es/core/components/TopoView/GraphViewPanel.js

@@ -1,7 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
+import classNames from 'classnames';
 import useCanvasTheme from "../../hooks/useCanvasTheme";
+import useTopoFullscreen from "../../hooks/useTopoFullscreen";
 import styles from "./TopoView.module.scss";
 export default function GraphViewPanel(props) {
+  var _classNames;
+
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
   var displayConfig = topo.store.useModelState('displayConfig');
@@ -12,8 +16,14 @@ export default function GraphViewPanel(props) {
     themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
-      canvasColor = _useCanvasTheme.canvasColor;
+      canvasColor = _useCanvasTheme.canvasColor,
+      canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
+  var panelRef = useRef();
+  useTopoFullscreen({
+    topo: topo,
+    panelRef: panelRef
+  });
   useEffect(function () {
     // eslint-disable-next-line no-underscore-dangle
     window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
@@ -29,9 +39,12 @@ export default function GraphViewPanel(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.viewPanel,
-    style: {
+    ref: panelRef,
+    className: classNames(styles.viewPanel, (_classNames = {}, _classNames[styles.backgroundImg] = !!canvasbackgroundImage, _classNames)),
+    style: canvasColor ? {
       background: canvasColor
+    } : {
+      backgroundImage: "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

package/es/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/es/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/es/core/editor/components/EditorPlugin.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import CustomIconPlugin from "./CustomIconPlugin";
 import SaveLoading from "./plugins/SaveLoading";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
@@ -17,7 +18,9 @@ export default function TopoEditorPlugin(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
   useEffect(function () {
+    rlog.debug('TopoEditorPlugin 进来了');
     return function () {
+      rlog.debug('TopoEditorPlugin 进来了');
       topoEdit.reset();
     };
   }, []);
@@ -29,7 +32,7 @@ export default function TopoEditorPlugin(props) {
   var plugins = [CorePlugin, SaveLoading, AddElementThemePlugin, CustomIconPlugin, GroupAddResourceDrawerPlugin, 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,
+      key: Plugin.pluginName || index,
       store: store
     }, props));
   }));

package/es/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/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -21,7 +21,7 @@ export default function CanvasPanel(props) {
     }, /*#__PURE__*/React.createElement(_Tag.Selectable, {
       className: styles.tag,
       style: {
-        background: item.color
+        background: item.color || "url(" + item.backgroundImageThumbnail + ")"
       },
       checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {

package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss

@@ -1,6 +1,7 @@
 @import "~@alifd/next/variables.scss";
 
   .canvasToggle {
+    width: 260px;
     display: flex;
     flex-wrap: wrap;
     .canvas {

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

@@ -34,7 +34,7 @@ export default function ComponentPanel(props) {
   return /*#__PURE__*/React.createElement("div", {
     ref: divRef,
     style: {
-      width: '100%',
+      width: '260px',
       height: '100%'
     }
   });

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

@@ -24,7 +24,8 @@ export default function ImagePanel(props) {
     accordion: true,
     defaultExpandedKeys: ['资源图片'],
     style: {
-      border: 'none'
+      border: 'none',
+      minWidth: '300px'
     },
     fullheight: true,
     noContentPadding: true

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

@@ -34,7 +34,7 @@ function LinkPanel(props) {
   return /*#__PURE__*/React.createElement("div", {
     ref: divRef,
     style: {
-      width: '100%',
+      width: '260px',
       height: '100%'
     }
   });

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -1,8 +1,9 @@
+import _Checkbox from "@alifd/next/es/checkbox";
 import _Field from "@alifd/next/es/field";
 import _Select from "@alifd/next/es/select";
 import _Form from "@alifd/next/es/form";
-import React, { useEffect } from 'react';
-import { getEdgesBySelection, loopEdgesAndChildren } from "../../../../utils/edgeTypeStyleUtil";
+import React, { useEffect, useState } from 'react';
+import { getEdgesBySelection, loopEdgesAndChildren, isNodeAllEdges } from "../../../../utils/edgeTypeStyleUtil";
 import styles from "./EdgeType.module.scss";
 import LineType from "./LineType";
 var FormItem = _Form.Item;
@@ -80,6 +81,8 @@ function getValuesByEdges(topo) {
     var edgeValues = [];
     edges.forEach(function (edge) {
       edgeValues.push({
+        baseAgreement: false,
+        //,
         lineButton: edge.s('edge.type'),
         startPoint: getStartPoint(edge),
         endPoint: getEndPoint(edge),
@@ -90,8 +93,9 @@ function getValuesByEdges(topo) {
   }
 
   var selectionEdges = getEdgesBySelection(topo);
-  var edgeValues = getEdgesValues(selectionEdges);
+  var edgeValues = getEdgesValues(selectionEdges, topo);
   var values = {
+    baseAgreement: false,
     lineButton: undefined,
     startPoint: undefined,
     endPoint: undefined,
@@ -117,6 +121,10 @@ function EdgeType(props) {
       selection = props.selection,
       _onChange = props.onChange;
 
+  var _useState = useState(false),
+      disable = _useState[0],
+      setDisable = _useState[1];
+
   var field = _Field.useField({
     autoUnmount: false,
     values: getValuesByEdges(topo),
@@ -131,6 +139,8 @@ function EdgeType(props) {
 
   useEffect(function () {
     field.setValues(getValuesByEdges(topo));
+    field.setValue('baseAgreement', topo.getHtTopo().getEdgeMultarc(getEdgesBySelection(topo)));
+    setDisable(isNodeAllEdges(topo));
   }, [selection]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.lineBox
@@ -139,8 +149,13 @@ function EdgeType(props) {
     inline: true,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(LineType, {
-    name: "lineButton"
-  })), /*#__PURE__*/React.createElement(FormItem, {
+    name: "lineButton",
+    disable: !!field.getValue('baseAgreement')
+  })), /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(_Checkbox, {
+    name: "baseAgreement",
+    onChange: _onChange,
+    disabled: disable
+  }, "\u81EA\u52A8\u8C03\u6574")), /*#__PURE__*/React.createElement(FormItem, {
     label: "\u8D77\u70B9"
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "startPoint",

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss

@@ -5,7 +5,6 @@
   background: #FFFFFF;
   border-radius: 4px;
   margin-bottom: -7px;
-
   :global {
     .#{$css-prefix}form-item:first-child{
       margin-top: 0;
@@ -15,6 +14,11 @@
       margin-top: 7px;
       margin-bottom: 7px;
     }
+    .#{$css-prefix}form-item:nth-child(2){
+      display: block !important;
+      margin-top: 7px;
+      margin-bottom: 0px;
+    }
     .#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:not(:last-child) {
       margin-right: 8px;
       .#{$css-prefix}select-trigger {

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -20,28 +20,47 @@ var LINE_TYPE_OPTIONS = [{
   value: 'ortho',
   label: '双折线',
   icon: 'topo_linear_icon_bilinear'
+}, {
+  value: 'ripple',
+  label: '单弧线',
+  icon: 'topo_linear_icon_arc_line'
 }, {
   value: 'doublearc',
   label: '双弧线',
   icon: 'topo_linear_icon_arcline'
+}, {
+  value: 'points',
+  label: '自由线形',
+  icon: 'topo_linear_icon_pointsline'
 }];
 var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disable = props.disable;
 
   function lineButton(item) {
-    var _classNames;
+    if (disable) {
+      return /*#__PURE__*/React.createElement(_Button, {
+        className: styles.redioBtnDisable
+      }, /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/lineType/" + item.icon + "_disable.svg",
+        alt: "",
+        className: styles.iconImg
+      }));
+    } else {
+      var _classNames;
 
-    return /*#__PURE__*/React.createElement(_Button, {
-      className: classNames(styles.redioBtn, (_classNames = {}, _classNames[styles.selected] = value === item.value, _classNames)),
-      onClick: function onClick() {
-        onChange(item.value);
-      }
-    }, /*#__PURE__*/React.createElement("img", {
-      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
-      alt: "",
-      className: styles.iconImg
-    }));
+      return /*#__PURE__*/React.createElement(_Button, {
+        className: classNames(styles.redioBtn, (_classNames = {}, _classNames[styles.selected] = value === item.value, _classNames)),
+        onClick: function onClick() {
+          onChange(item.value);
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+        alt: "",
+        className: styles.iconImg
+      }));
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss

@@ -1,5 +1,15 @@
 .lineType{
   display:flex;
+  .redioBtnDisable {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: none !important;
+    color: #4D6277;
+    padding: 0;
+    margin-right: 10px;
+    text-align: center;
+  }
   .redioBtn {
     width: 24px;
     height: 24px;
@@ -7,9 +17,9 @@
     border: none !important;
     color: #4D6277;
     padding: 0;
-    margin-right: 16px;
+    margin-right: 10px;
     text-align: center;
-
+  
     .iconImg {
       vertical-align: middle;
     }

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -49,6 +49,12 @@ function EdgeTypeButton(props) {
       return;
     }
 
+    if (name == 'baseAgreement') {
+      /** TODO: 自动调整api调用*/
+      htTopo.setEdgeMultarc(edges, value);
+      return;
+    }
+
     setEdgesAndChildren(topo, edges, function (edge) {
       if (name === 'startPoint') {
         // 删除设置

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

@@ -15,7 +15,7 @@ function FontSizeSelect(props) {
         style: {
           width: 18
         }
-      }, val || 12);
+      }, val || 20);
     },
     disabled: disabled,
     onSelect: function onSelect(val) {

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js

@@ -15,7 +15,7 @@ export function getTextStyle(element) {
     color: parseColor(element.s('group.title.color')),
     underline: underline
   }, fontStyleUtil.toMap(element.s('group.title.font')), {
-    fontSize: font.fontSize || 12,
+    fontSize: font.fontSize || (isClusterHtElement(element) ? 20 : 24),
     fontFamily: font.fontFamily || '微软雅黑'
   }, parseBackground(element.s('group.title.background')));
 }

package/es/core/editor/components/settings/core/getPropertyViewType.js

@@ -8,6 +8,9 @@ function getPropertyViewType(selection) {
   if (!selectionSize) {
     // 未选
     viewType = 'view';
+  } else if ((selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.getLayer()) === 'backgroundImage') {
+    // 背景图
+    viewType = 'view';
   } else if (selectionSize >= 2) {
     // 多选
     viewType = 'multiple';

package/es/core/editor/components/settings/core/updateElementProperty.js

@@ -1,6 +1,11 @@
 export default function updateElementProperty(topo, name, value) {
   // const element = topo.getDataModel().getDataById(selection[0].id);
-  var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
+  var element = topo.getSelectionModel().getFirstData();
+  console.info("updateElementProperty", topo.getSelectionModel().getSelection(), {
+    element: element,
+    name: name,
+    value: value
+  });
 
   if (name.startsWith('attrObject.')) {
     element.setAttr(name.replace('attrObject.', ''), value);

package/es/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { iconFactory } from "@riil-frontend/component-topology-graph";
 import sortBy from "lodash/sortBy";
-import { getGroupChildrenResourceElements } from "../../../../../../../../utils/htElementDataUtil";
-import { getNodeData } from "../../../../../../../../utils/htElementUtils";
+import { getGroupChildren, getNodeData } from "../../../../../../../../utils/htElementUtils";
 
 function sortResourcesByName(resources) {
   return sortBy(resources, "name");
@@ -19,7 +18,9 @@ export default function useGroupRelateResource(props) {
   } : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
   // 过滤出资源
 
-  var resourceNodes = getGroupChildrenResourceElements(group); // 资源按名称排序
+  var resourceNodes = getGroupChildren(group).filter(function (item) {
+    return !!item.getTag();
+  }); // 资源按名称排序
 
   var useSortNodes = useGroupSortResources || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
   var data = useSortNodes(resourceNodes.map(function (node) {

package/es/core/editor/components/settings/propertyViews/layer/DataTab/NodeList.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { iconFactory } from '@riil-frontend/component-topology-graph';
 import ResourceList from "../../../common/GroupNodeList/ResourceList";
-import { getLayerChildrenResourceElements } from "../../../../../../../utils/htElementDataUtil";
+import { getLayerChildren } from "../../../../../../../utils/htElementUtils";
+import { isResourceElement } from "../../../../../../../utils/htElementDataUtil";
 /**
  * 分层关联资源列表
  */
@@ -9,7 +10,7 @@ import { getLayerChildrenResourceElements } from "../../../../../../../utils/htE
 export default function LayerResourceList(props) {
   var topo = props.topo,
       layer = props.layer;
-  var relateDataNodes = getLayerChildrenResourceElements(layer);
+  var relateDataNodes = getLayerChildren(layer).filter(isResourceElement);
   var data = relateDataNodes.map(function (node) {
     return {
       title: node.a('name'),

package/es/core/editor/components/settings/propertyViews/node/data/BindIpInput.js

@@ -0,0 +1,95 @@
+import _Button from "@alifd/next/es/button";
+import _Input from "@alifd/next/es/input";
+import _Form from "@alifd/next/es/form";
+import React, { useState, useEffect } from "react";
+import { isUniqueIp } from "../../../../../../../networkTopo/utils/exitLinkUtil";
+var FormItem = _Form.Item;
+/**
+ * @return {React.ReactNode | null}
+ */
+
+export default function BindIpInput(props) {
+  var _values$attrObjectBi;
+
+  var nodeElement = props.nodeElement,
+      topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      fieldItem = props.fieldItem; // const currentResId = node.tag;
+  // console.log(
+  //   "nodeElement, topo, topoEditApi, node",
+  //   nodeElement,
+  //   topo,
+  //   topoEditApi,
+  //   values
+  // );
+
+  var _useState = useState(""),
+      error = _useState[0],
+      setError = _useState[1];
+
+  var _useState2 = useState((_values$attrObjectBi = values["attrObject.bindIp"]) !== null && _values$attrObjectBi !== void 0 ? _values$attrObjectBi : ""),
+      txtValue = _useState2[0],
+      setTxtValue = _useState2[1];
+
+  var saveIp = function saveIp(v) {
+    fieldItem.validate(function (errors, vals) {
+      if (errors) {
+        console.error("saveIp-error", errors, vals);
+      } else {
+        setError("");
+        onChange(txtValue);
+        topoEditApi.relateNodeIp(txtValue, nodeElement);
+      }
+    });
+  };
+
+  useEffect(function () {
+    fieldItem.reset();
+    setTxtValue(values["attrObject.bindIp"]);
+  }, [values]);
+
+  var inputChange = function inputChange(v) {
+    setTxtValue(v); // onChange(v);
+  }; // 图片节点验证ip唯一性
+
+
+  var checkIp = function checkIp(rule, value, callback) {
+    var dm = topo.getDataModel();
+    var isUnique = isUniqueIp(dm, value, nodeElement); // console.log("checkIp", isUnique);
+
+    if (!isUnique) {
+      return callback("ip不能重复");
+    } else {
+      return callback();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex"
+    }
+  }, /*#__PURE__*/React.createElement(FormItem, {
+    label: "\u5173\u8054IP",
+    pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
+    patternTrigger: "onBlur",
+    patternMessage: "IP\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E",
+    validator: checkIp
+  }, /*#__PURE__*/React.createElement(_Input, {
+    placeholder: "\u8BF7\u8F93\u5165Ip\u5730\u5740",
+    name: "attrObject.bindIp",
+    state: error,
+    value: txtValue,
+    maxLength: 128,
+    onChange: inputChange
+  })), /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    text: true,
+    onClick: saveIp,
+    style: {
+      marginLeft: 10,
+      marginTop: 27
+    }
+  }, "\u4FDD\u5B58"));
+}