@riil-frontend/component-topology 12.0.0-dev.8 → 12.0.1

package/es/components/TemplateButton/index.module.scss

@@ -26,7 +26,7 @@
   line-height: 20px;
   font-size: 18px;
   margin-top: 14px;
-  color: $color-text1-3;
+  color: $color-text1-4;
   outline: none;
 }
 

package/es/core/components/AlarmListPanel/components/AlarmListItem.js

@@ -1,3 +1,5 @@
+import _Balloon from "@alifd/next/es/balloon";
+import _extends from "@babel/runtime/helpers/extends";
 import _List from "@alifd/next/es/list";
 import _Icon from "@alifd/next/es/icon";
 import React, { useState, useEffect } from 'react';
@@ -30,7 +32,8 @@ function AlarmListItem(props) {
   // 传入参数
   var topo = props.topo,
       alarmInfo = props.alarmInfo,
-      onClick = props.onClick;
+      onClick = props.onClick; // console.log("AlarmListPanel", topo, alarmInfo);
+
   return /*#__PURE__*/React.createElement(_List.Item, {
     className: styles.AlarmListItem,
     media: /*#__PURE__*/React.createElement(_Icon, {
@@ -85,10 +88,62 @@ function RiskListItem(props) {
   }, "\u67E5\u770B\u8BE6\u60C5"))));
 }
 
+function SubListItem(props) {
+  // 传入参数
+  var topo = props.topo,
+      alarmInfo = props.alarmInfo,
+      onClick = props.onClick;
+  var creatAlarmTips = topo.viewProps.creatAlarmTips;
+  var subNode = topo.getData().nodes.find(function (node) {
+    return node.ciId === alarmInfo.mainCiId;
+  });
+  var plarm = alarmInfo.cmpCode ? "\u3010" + (subNode === null || subNode === void 0 ? void 0 : subNode.sourceName) + "\u3011" : "【本级平台】";
+  return /*#__PURE__*/React.createElement(_List.Item, {
+    className: styles.AlarmListItem,
+    media: /*#__PURE__*/React.createElement(_Icon, {
+      type: "gaojing-3",
+      size: "xs",
+      className: styles["alarm-color-icon"] + " alarm-color-icon-lv" + alarmInfo.alertLevel
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.list,
+    onClick: function onClick() {
+      getNode(topo, alarmInfo);
+    }
+  }, "" + plarm + alarmInfo.alertObject + alarmInfo.alertTitle), alarmInfo.cmpCode ? /*#__PURE__*/React.createElement(_Balloon, {
+    trigger: /*#__PURE__*/React.createElement("span", {
+      className: styles.listLink
+    }, "\u67E5\u770B\u8BE6\u60C5"),
+    closable: true,
+    triggerType: "click",
+    align: "bl",
+    popupClassName: styles["enjoydata-alarm-table-balloon"],
+    popupStyle: {
+      maxWidth: "700px",
+      width: 530
+    }
+  }, creatAlarmTips(_extends({}, alarmInfo, {
+    sourceName: plarm
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: styles.listLink
+  }, /*#__PURE__*/React.createElement(Link, {
+    onClick: onClick,
+    to: alarmLink(alarmInfo)
+  }, "\u67E5\u770B\u8BE6\u60C5"))));
+}
+
 function ListItem(props) {
-  var alarmInfo = props.alarmInfo;
-  var ListItemWidget = alarmInfo.eventType === 'risk' ? RiskListItem : AlarmListItem;
-  return /*#__PURE__*/React.createElement(ListItemWidget, props);
+  var topo = props.topo,
+      alarmInfo = props.alarmInfo;
+
+  if (topo.isCMPTopo) {
+    return /*#__PURE__*/React.createElement(SubListItem, props);
+  } else {
+    var ListItemWidget = alarmInfo.eventType === "risk" ? RiskListItem : AlarmListItem;
+    return /*#__PURE__*/React.createElement(ListItemWidget, props);
+  }
 }
 
 export default ListItem;

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

@@ -161,7 +161,11 @@ var Topology = function Topology(props) {
 
     if (initSelectionId) {
       var ele = topo.getHtTopo().getGraphView().dm().getDataByTag(initSelectionId);
-      topo.getHtTopo().getGraphView().sm().setSelection([ele]);
+
+      if (ele) {
+        topo.getHtTopo().getGraphView().sm().setSelection([ele]);
+      }
+
       var selectionDispatchers = topo.store.getModelDispatchers('selection');
       selectionDispatchers.update({
         initSelectionId: null

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
+import { isCustomEdge } from "../../../../../utils/edgeUtil";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import Content from "./Content";
@@ -36,15 +37,7 @@ function EdgeColorButton(props) {
   };
 
   var getLines = function getLines(list) {
-    // eslint-disable-next-line prefer-const
-    var arr = [];
-    loopEdges(list, function (edge) {
-      // eslint-disable-next-line eqeqeq
-      if (edge.getAttrObject().type == 'line') {
-        arr.push(edge);
-      }
-    });
-    return arr;
+    return list.filter(isCustomEdge);
   };
 
   useEffect(function () {
@@ -53,7 +46,7 @@ function EdgeColorButton(props) {
       var list = getLines(edges);
       setLineWidth(1); // eslint-disable-next-line eqeqeq
 
-      if (selection.length == 1 && selection[0].a('type') == 'line') {
+      if (selection.length == 1 && list.length === 1) {
         setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
       }
 
@@ -67,7 +60,7 @@ function EdgeColorButton(props) {
     var edges = getEdgesBySelection(topo);
     loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
-      if (edge.getAttrObject().type == 'line') {
+      if (isCustomEdge(edge)) {
         var color = colors.hex;
         edge.s('edge.color', color);
         edge.s('edge.dash.color', color);
@@ -95,7 +88,7 @@ function EdgeColorButton(props) {
     topo.historyManager.beginTransaction();
     loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
-      if (edge.getAttrObject().type == 'line') {
+      if (isCustomEdge(edge)) {
         edge.s('edge.dash.width', width);
         edge.s('edge.width', width);
         var style = edge.a('styles') || {};

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

@@ -1,8 +1,9 @@
+import _Box from "@alifd/next/es/box";
 import _Field from "@alifd/next/es/field";
 import _Select from "@alifd/next/es/select";
 import _Form from "@alifd/next/es/form";
 import React, { useEffect, useState } from 'react';
-import { getEdgesBySelection, loopEdgesAndChildren, isNodeAllEdges } from "../../../../utils/edgeTypeStyleUtil";
+import { getEdgesBySelection, isNodeAllEdges } from "../../../../utils/edgeTypeStyleUtil";
 import styles from "./EdgeType.module.scss";
 import LineType from "./LineType";
 var FormItem = _Form.Item;
@@ -142,12 +143,19 @@ function EdgeType(props) {
     className: styles.lineBox
   }, /*#__PURE__*/React.createElement(_Form, {
     field: field,
-    inline: true,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(LineType, {
     name: "lineButton"
-  })), /*#__PURE__*/React.createElement(FormItem, {
-    label: "\u8D77\u70B9"
+  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Box, {
+    direction: "row",
+    style: {
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement(FormItem, {
+    label: "\u8D77\u70B9",
+    style: {
+      margin: 0
+    }
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "startPoint",
     placeholder: " ",
@@ -155,7 +163,8 @@ function EdgeType(props) {
       container: function container(trigger) {
         return trigger.parentNode;
       }
-    }
+    },
+    className: styles.endPointSelect
   }, START_TYPE_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
@@ -168,7 +177,10 @@ function EdgeType(props) {
       className: styles.iconImg
     }));
   }))), /*#__PURE__*/React.createElement(FormItem, {
-    label: "\u7EC8\u70B9"
+    label: "\u7EC8\u70B9",
+    style: {
+      margin: 0
+    }
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "endPoint",
     placeholder: " ",
@@ -176,7 +188,8 @@ function EdgeType(props) {
       container: function container(trigger) {
         return trigger.parentNode;
       }
-    }
+    },
+    className: styles.endPointSelect
   }, END_TYPE_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
@@ -189,7 +202,10 @@ function EdgeType(props) {
       className: styles.iconImg
     }));
   }))), /*#__PURE__*/React.createElement(FormItem, {
-    label: "\u7C7B\u578B"
+    label: "\u7C7B\u578B",
+    style: {
+      margin: 0
+    }
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "lineMold",
     popupProps: {
@@ -197,7 +213,8 @@ function EdgeType(props) {
         return trigger.parentNode;
       }
     },
-    placeholder: " "
+    placeholder: " ",
+    className: styles.lineMoldSelect
   }, LINE_MOLD_OPTIONS.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Option, {
       value: item.value,
@@ -209,7 +226,7 @@ function EdgeType(props) {
       alt: "",
       className: styles.iconImg
     }));
-  })))));
+  })))))));
 }
 
 EdgeType.defaultProps = {

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

@@ -1,10 +1,30 @@
 @import '~@alifd/next/variables.scss';
 
 .lineBox{
-  width: 236px;
   background: #FFFFFF;
   border-radius: 4px;
   margin-bottom: -7px;
+
+  .endPointSelect {
+    min-width: 0;
+    width: 64px;
+    :global {
+      .#{$css-prefix}select-inner {
+        min-width:0 !important;
+      }
+    }
+  }
+
+  .lineMoldSelect {
+    min-width: 0;
+    width: 88px;
+    :global {
+      .#{$css-prefix}select-inner {
+        min-width:0 !important;
+      }
+    }
+  }
+
   :global {
     .#{$css-prefix}form-item:first-child{
       margin-top: 0;

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

@@ -38,6 +38,15 @@ var LINE_TYPE_OPTIONS = [{
 //   icon: 'topo_linear_icon_pointsline',
 // },
 ];
+
+if (localStorage.getItem('topo.test.edge.customType') === 'true') {
+  LINE_TYPE_OPTIONS.push({
+    value: 'points',
+    label: '自由线形',
+    icon: 'topo_linear_icon_pointsline'
+  });
+}
+
 var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var value = props.value,
       onChange = props.onChange,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
-import { getEdgesBySelection, setEdgesAndChildren, setEdgesType } from "../../../../utils/edgeTypeStyleUtil";
+import { getEdgesBySelection, setEdgesType, updateEdgesData } from "../../../../utils/edgeTypeStyleUtil";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import { EDGE_END_POINT_TYPE_MAP, LINE_MOLD_MAP } from "./constants";
@@ -52,7 +52,7 @@ function EdgeTypeButton(props) {
       return;
     }
 
-    setEdgesAndChildren(topo, edges, function (edge) {
+    updateEdgesData(topo, edges, function (edge) {
       if (name === 'startPoint') {
         // 删除设置
         ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (iconName) {

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

@@ -7,7 +7,7 @@ import React, { useState, useMemo } from 'react';
 import LayoutSettings from "./components/LayoutSettings";
 import WidgetBox from "../WidgetBox";
 import DropdownButton from "../components/DropdownButton";
-import { isGroup, isLayer } from "../../../../../../utils/htElementDataUtil";
+import { isGroup, isLayer, isNode } from "../../../../../../utils/htElementDataUtil";
 
 function Layout(props) {
   var topo = props.topo,
@@ -24,6 +24,11 @@ function Layout(props) {
       selection = _topo$store$useModelS.selection;
 
   var setDisabled = function setDisabled(data) {
+    if (topoShowType !== 'layers' && selection.length === 1) {
+      //中心节点布局，选中一个节点非分层情况下，需要星型和树形布局亮起来
+      return data == 'rectangle' || data == 'hierarchical';
+    }
+
     if (topoShowType == 'layers' && selection.length == 1 && !isGroup(selection[0])) {
       return data != 'rectangle';
     } else {
@@ -41,7 +46,11 @@ function Layout(props) {
 
 
     if (topoShowType != 'layers' && selection.length == 1) {
-      topo.getHtTopo().layoutInContainer(layouType);
+      if (layouType == 'hierarchical') {
+        topo.getHtTopo().layoutInContainer(layouType);
+      } else {
+        topo.getHtTopo().layoutTopoBySelectNode(layouType, selectionElements[0]);
+      }
     } // eslint-disable-next-line eqeqeq
 
 
@@ -56,7 +65,7 @@ function Layout(props) {
     topo.historyManager.beginTransaction();
     setLayout(v); // eslint-disable-next-line eqeqeq
 
-    if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1) {
+    if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1 || topoShowType !== 'layers' && selection.length === 1) {
       globalLayout(v);
     }
 
@@ -135,6 +144,11 @@ function isLayoutEnabled(props) {
 
   if (topoShowType !== 'layers' && !selection.length) {
     return true;
+  } //中心节点布局,选中一个节点不是分层的情况下，按钮亮起
+
+
+  if (topoShowType !== 'layers' && selection.length === 1 && (isNode(selection[0]) || isGroup(selection[0]))) {
+    return true;
   }
 
   return false;

package/es/core/editor/hooks/useKeyboardShortcut.js

@@ -1,6 +1,6 @@
 import hotkeys from 'hotkeys-js';
 import { useEffect } from 'react';
-import { handleCopyHotkey, handlePasteHotkey } from "../utils/copyElementUtil";
+import { destroyPasteEventListener, handleCopyHotkey, handlePasteHotkey, initPasteEventListener } from "../utils/copyElementUtil";
 
 function initKeyboardShortcuts(props) {
   var topo = props.topo,
@@ -35,8 +35,10 @@ function unbindKeyboardShortcuts(props) {
 
 export default function useKeyboardShortcut(props) {
   useEffect(function () {
+    initPasteEventListener();
     initKeyboardShortcuts(props);
     return function () {
+      destroyPasteEventListener();
       unbindKeyboardShortcuts(props);
     };
   }, []);

package/es/core/editor/utils/copyElementUtil.js

@@ -9,6 +9,18 @@ export function handleCopyHotkey(event, options) {
     copy(options.topo);
   }
 }
+export function initPasteEventListener() {
+  document.addEventListener("paste", handlePasteEventListener);
+}
+export function destroyPasteEventListener() {
+  document.removeEventListener("paste", handlePasteEventListener);
+}
+
+function handlePasteEventListener(e) {
+  var clipdata = e.clipboardData || window.clipboardData;
+  console.log("主动粘贴", clipdata.getData("text/plain"));
+}
+
 export function handlePasteHotkey(event, options) {
   var target = event.target || event.srcElement;
   var tagName = target.tagName;

package/es/core/editor/utils/edgeTypeStyleUtil.js

@@ -1,5 +1,4 @@
-import { getEdges } from "../../../utils/htElementUtils";
-import { getEdgesBetweenNodes } from "../../../utils/htElementUtils";
+import { getEdges, getEdgesBetweenNodes } from "../../../utils/htElementUtils";
 var ht = window.ht;
 export function getEdgesBySelection(topo) {
   var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
@@ -105,16 +104,18 @@ export function loopEdgesAndChildren(topo, edges, operateEdgeFn) {
  * 设置连线及子连线。带回退事务控制
  * @param {*} topo 
  * @param {*} edges 
- * @param {*} operateEdgeFn 
+ * @param {*} updateEdgeFn 
  */
 
-export function setEdgesAndChildren(topo, edges, operateEdgeFn) {
+export function updateEdgesData(topo, edges, updateEdgeFn) {
   topo.historyManager.beginTransaction();
-  loopEdgesAndChildren(topo, edges, operateEdgeFn);
+  edges.forEach(function (edge) {
+    updateEdgeFn(edge);
+  });
   topo.historyManager.endTransaction();
 }
 /**
- * 批量设置连线线形
+ * 批量设置连线线形。带回退事务控制
  * 
  * @param {*} edges 
  * @param {*} type 
@@ -123,7 +124,7 @@ export function setEdgesAndChildren(topo, edges, operateEdgeFn) {
 
 export function setEdgesType(edges, type, topo) {
   var htTopo = topo.getHtTopo();
-  setEdgesAndChildren(topo, edges, function (edge) {
+  updateEdgesData(topo, edges, function (edge) {
     htTopo.setGraphLinear(edge, {
       type: type
     });