@riil-frontend/component-topology 7.0.0-dev.2 → 7.0.0-dev.20

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

@@ -7,7 +7,6 @@ import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog'; // 通用
 
 import showMessage from "../../utils/showMessage";
-import TitleBar from "../titlebar/TitleBar";
 import { TPL_TREE } from "../../../utils/template";
 import { updateEdgeExpanded } from "../../utils/edgeUtil";
 import useRouterAdapter from "../../hooks/useRouterAdapter";
@@ -39,7 +38,6 @@ var Topology = function Topology(props) {
       onLoad = props.onLoad,
       onDestroy = props.onDestroy,
       onRefreshTopo = props.onRefresh,
-      onEnterEdit = props.onEnterEdit,
       onSave = props.onSave,
       nodeDeleteable = props.nodeDeleteable,
       onNodeDelete = props.onNodeDelete,
@@ -205,10 +203,6 @@ var Topology = function Topology(props) {
         rightEventHandle(event);
         break;
 
-      case TopoEvent.EVENT_DATA_PICK:
-        topoEdit.onBindData(event.data);
-        break;
-
       case TopoEvent.EVENT_DATA_DELETE:
         topoEdit.onDeleteElement(event.data);
         break;
@@ -222,10 +216,6 @@ var Topology = function Topology(props) {
         onRefresh(event.data);
         break;
 
-      case TopoEvent.EVENT_EDIT_EXIT:
-        topoEdit.onExitEdit(event.data);
-        break;
-
       case TopoEvent.EVENT_CONTEXT_TOOL:
         rlog.debug('自定义工具栏事件', event);
         break;
@@ -264,12 +254,7 @@ var Topology = function Topology(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.topoView,
     "data-version": topo.version
-  }, titleBar !== false && (titleBar || /*#__PURE__*/React.createElement(TitleBar, {
-    topo: topo,
-    viewerProps: viewerProps,
-    onEnterEdit: onEnterEdit,
-    topoEditApi: topoEdit
-  })), isEditMode && /*#__PURE__*/React.createElement(EditorToolbar, {
+  }, titleBar !== false && titleBar, isEditMode && /*#__PURE__*/React.createElement(EditorToolbar, {
     topo: topo,
     topoEdit: topoEdit,
     topoContext: {
@@ -311,8 +296,6 @@ Topology.propTypes = {
   viewerProps: PropTypes.object,
   editorProps: PropTypes.object,
   topoContext: PropTypes.object,
-  // 进入编辑模式
-  onEnterEdit: PropTypes.func,
   onRefresh: PropTypes.func,
   onSave: PropTypes.func,
   nodeDeleteable: PropTypes.func,
@@ -324,7 +307,7 @@ Topology.propTypes = {
   /**
    * @deprecated 工具栏
    */
-  titleBar: PropTypes.oneOf([React.ReactNode, false])
+  titleBar: PropTypes.any
 };
 Topology.defaultProps = {
   defaultEnterEditMode: false,

package/es/core/components/titlebar/index.js

@@ -5,4 +5,5 @@ import NodesDragSwitch from "../../viewer/components/titlebar/widgets/NodesDragS
 import AlarmListShowButton from "../../viewer/components/titlebar/widgets/AlarmListShowButton";
 import TitleWidget from "./widgets/TitleWidget";
 import ViewerTools from "../../viewer/components/titlebar/ViewerTools";
-export { TitleBar, SearchWidget, NodesDragSwitch, DisplaySettingButton, AlarmListShowButton, TitleWidget, ViewerTools };
+import DebugTools from "../../editor/components/titlebar/widgets/DebugTools";
+export { TitleBar, SearchWidget, NodesDragSwitch, DisplaySettingButton, AlarmListShowButton, TitleWidget, ViewerTools, DebugTools };

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import CustomIconPlugin from "./CustomIconPlugin";
 import SaveLoading from "./plugins/SaveLoading";
-import MultipleResourceSelectPlugin from "./plugins/MultipleResourceSelectPlugin";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
 import MetricPollingPlugin from "../../viewer/components/plugins/MetricPollingPlugin";
 import AddElementThemePlugin from "./plugins/AddElementThemePlugin";
@@ -27,7 +26,7 @@ export default function TopoEditorPlugin(props) {
     return null;
   }
 
-  var plugins = [CorePlugin, SaveLoading, AddElementThemePlugin, CustomIconPlugin, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, MetricPollingPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  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,

package/es/core/editor/components/Toolbar/buttons.js

@@ -32,7 +32,7 @@ export default function getButtons(isNetworkTopo) {
   Divider, NodeImageButton, // 替换图片
   NodeSizeButton, // 图片尺寸
   Divider, Layout, // 布局方式
-  NodeAlignWidget // 对齐方式
-  // SearchWidget, // 搜索
+  NodeAlignWidget, // 对齐方式
+  SearchWidget // 搜索
   ]);
 }

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

@@ -1,15 +1,23 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["color", "background", "opacity", "bold", "italic"];
-import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
 import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
+  var opacity = element.a('edge.tag.opacity');
+
+  if (opacity === null || opacity === undefined) {
+    opacity = 1;
+  }
+
   return _extends({
     color: parseColor(element.a('edge.tag.color')),
     fontFamily: element.a('edge.tag.fontFamily') || '微软雅黑',
+    fontSize: element.a('edge.tag.fontSize'),
     bold: !!element.a('edge.tag.fontBold'),
-    itatic: !!element.a('edge.tag.fontItalic')
-  }, parseBackground(element.a('edge.tag.background')));
+    italic: !!element.a('edge.tag.fontItalic')
+  }, parseBackground(element.a('edge.tag.background')), {
+    opacity: opacity
+  });
 }
 export function setTextStyle(element, style, topo) {
   var color = style.color,

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

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["color", "background", "opacity", "bold", "italic"];
+var _excluded = ["color", "background", "opacity", "bold", "italic", "underline"];
 import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
 import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
@@ -16,6 +16,7 @@ export function setTextStyle(element, style, topo) {
       opacity = style.opacity,
       bold = style.bold,
       italic = style.italic,
+      underline = style.underline,
       otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
 
   var tagStyle = _extends({}, otherStyle);
@@ -32,6 +33,10 @@ export function setTextStyle(element, style, topo) {
     tagStyle.fontItalic = italic;
   }
 
+  if ('underline' in style) {
+    tagStyle.fontUnderline = underline;
+  }
+
   if ('background' in style) {
     // 背景颜色
     var prevStyle = getTextStyle(element);

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

@@ -86,6 +86,11 @@ export function getTextStyle(htSelection, styleNames) {
 
     var val = fieldValueList[0];
     var different = fieldValueList.filter(function (item) {
+      // 如果是颜色，特殊处理
+      if (item && val && item.rgb) {
+        return item.rgb.r + "," + item.rgb.g + "," + item.rgb.b + "," + item.rgb.a !== val.rgb.r + "," + val.rgb.g + "," + val.rgb.b + "," + val.rgb.a;
+      }
+
       return item !== val;
     });
 

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

@@ -5,8 +5,11 @@ import { adapterGetEdgePropertyViewType, addEdgePropertyViews } from "./core/edg
 import PropertyViewManager from "./core/PropertyViewManager";
 import Settings from "./Settings";
 import styles from "./Settings.module.scss";
+
+function PropertyViewProvider(props) {}
+
 export default function PropertyPanel(props) {
-  var _classNames;
+  var _editorProps$property, _editorProps$property2, _classNames;
 
   var topo = props.topo,
       editorProps = props.editorProps;
@@ -18,21 +21,19 @@ export default function PropertyPanel(props) {
   var _store$useModelState = store.useModelState('selection'),
       selection = _store$useModelState.selection;
 
-  var _topo$store$useModel = topo.store.useModel('topoEdit'),
-      topoEditState = _topo$store$useModel[0],
-      topoEditDispatchers = _topo$store$useModel[1];
-
+  var topoEditState = topo.store.useModelState('topoEdit');
   var propertyPanelVisible = topoEditState.propertyPanelVisible;
   var propertyViewManager = useMemo(function () {
     return new PropertyViewManager(topo);
-  }, []); // 临时适配连线属性面板类型，后期组件支持自定义适配
-
-  addEdgePropertyViews(propertyViewManager, editorProps);
+  }, []);
+  propertyViewManager.addViews((_editorProps$property = editorProps.propertyView) === null || _editorProps$property === void 0 ? void 0 : _editorProps$property.views);
 
-  propertyViewManager.customGetViewType = editorProps.getPropertyViewType || function (elements) {
+  propertyViewManager.customGetViewType = ((_editorProps$property2 = editorProps.propertyView) === null || _editorProps$property2 === void 0 ? void 0 : _editorProps$property2.getPropertyViewType) || function (elements) {
     return adapterGetEdgePropertyViewType(elements, editorProps);
-  };
+  }; // 临时适配连线属性面板类型，后期组件支持自定义适配
 
+
+  addEdgePropertyViews(propertyViewManager, editorProps);
   var PropertyView = propertyViewManager.getPropertyView();
   useEffect(function () {
     if (graphLoaded) {

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useMemo, useState } from 'react';
 import useSettingRuntimeState from "./useSettingRuntimeState";
 import updateElementProperty from "./core/updateElementProperty";
+import { isEdge } from "../../../../utils/htElementUtils";
 
 function buildElementValues(selection) {
   var values = _extends({}, selection[0]);
@@ -33,10 +34,16 @@ export default function PropertyViewContainer(props) {
   var elementProps = {};
 
   if (selection.length === 1) {
+    var element = selectionElements[0];
     elementProps = {
-      selectionElement: selectionElements[0],
+      element: element,
+      selectionElement: element,
       values: singleElementValues
     };
+
+    if (isEdge(element)) {
+      elementProps.edge = element;
+    }
   }
 
   return /*#__PURE__*/React.createElement(PropertyView, _extends({

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

@@ -4,17 +4,18 @@ import _getPropertyViewType from "./getPropertyViewType";
 
 var PropertyViewManager = /*#__PURE__*/function () {
   function PropertyViewManager(topo) {
-    this.viewMap = propertyViews;
+    this.viewMap = _extends({}, propertyViews);
     this.topo = void 0;
     this.customGetViewType = void 0;
     this.topo = topo;
+    this.topo.propertyViewManager = this;
     this.open = this.open.bind(this);
   }
 
   var _proto = PropertyViewManager.prototype;
 
-  _proto.updateViews = function updateViews(viewMap) {
-    this.viewMap = _extends({}, propertyViews, viewMap);
+  _proto.addViews = function addViews(viewMap) {
+    Object.assign(this.viewMap, viewMap);
   };
 
   _proto.init = function init() {

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

@@ -1,5 +1,4 @@
 import { isEdge } from "../../../../../utils/htElementUtils";
-import addEdgeProps from "../propertyViews/edge/addEdgeProps";
 export function adapterGetEdgePropertyViewType(selection, editorProps) {
   var fn = editorProps.getEdgePropertyViewType;
 
@@ -13,10 +12,5 @@ export function adapterGetEdgePropertyViewType(selection, editorProps) {
   return null;
 }
 export function addEdgePropertyViews(propertyViewManager, editorProps) {
-  var oldMap = editorProps.edgePropertyViews || {};
-  var map = {};
-  Object.keys(oldMap).forEach(function (name) {
-    map[name] = addEdgeProps(oldMap[name]);
-  });
-  propertyViewManager.updateViews(map);
+  propertyViewManager.addViews(editorProps.edgePropertyViews || {});
 }

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

@@ -6,9 +6,9 @@ import _Collapse from "@alifd/next/es/collapse";
 import _Select from "@alifd/next/es/select";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect } from "react";
-import useHtElement from "../../../../../../common/hooks/useHtElement";
 import textStyles from "../../../../../../common/text.module.scss";
 import NodeRelateResourceButton from "./NodeRelateResourceButton";
+import PlatformDisplay from "./PlatformDisplay";
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
 
@@ -142,12 +142,15 @@ export default function Data(props) {
     nodeElement: node,
     node: values,
     topo: topo,
-    topoEditApi: topoEditApi
+    topoEditApi: topoEditApi,
+    nodeBindResourceDrawerComponent: editorProps.nodeBindResourceDrawerComponent
   }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/React.createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",
     topo: topo,
     onChange: handleBindTopoChange
-  })))));
+  })), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === 'cmpTopo' && node.getTag() && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u6240\u5C5E\u5E73\u53F0"
+  }, /*#__PURE__*/React.createElement(PlatformDisplay, props)))));
 }

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

@@ -1,7 +1,7 @@
 import _Button from "@alifd/next/es/button";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
-import BindResourceDrawer from "./BindResourceDrawer";
+import DefaultBindResourceDrawer from "./BindResourceDrawer";
 import { isClusterMemberHtElement } from "../../../../../../../utils/clusterUtil";
 /**
  * @return {React.ReactNode | null}
@@ -13,7 +13,8 @@ export default function NodeRelateResourceButton(props) {
   var nodeElement = props.nodeElement,
       topo = props.topo,
       topoEditApi = props.topoEditApi,
-      node = props.node;
+      node = props.node,
+      nodeBindResourceDrawerComponent = props.nodeBindResourceDrawerComponent;
   var hide = isClusterMemberHtElement(nodeElement) || ((_node$attrObject$data = node.attrObject.data) === null || _node$attrObject$data === void 0 ? void 0 : _node$attrObject$data.relateResource) === false;
   var currentResId = node.tag;
 
@@ -21,6 +22,7 @@ export default function NodeRelateResourceButton(props) {
       visible = _useState[0],
       setVisible = _useState[1];
 
+  var BindResourceDrawer = nodeBindResourceDrawerComponent || DefaultBindResourceDrawer;
   return !hide ? /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     text: true,

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+function PlatformDisplay(props) {
+  var topo = props.topo,
+      node = props.node;
+  var data = topo.dataModel.useDataById(node.getTag());
+  return data.isSubResource ? data.attributes.platform : '本级平台';
+}
+
+export default PlatformDisplay;

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

@@ -22,7 +22,7 @@ export default function useKeyboardShortcut(props) {
 
       }
 
-      if (e.keyCode === 32) {
+      if (e.keyCode === 32 && e.target.nodeName !== 'TEXTAREA') {
         // 空格
         var _topo$store$getModelS = topo.store.getModelState('topoEdit'),
             viewMouseMode = _topo$store$getModelS.viewMouseMode;

package/es/core/hooks/usePolling.js

@@ -13,12 +13,7 @@ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 var usePolling = function usePolling(props) {
   var topo = props.topo;
   var store = topo.store;
-  var topoState = store.useModelState('topoMod');
-
-  var _store$useModel = store.useModel('topoBizMod'),
-      bizState = _store$useModel[0],
-      bizDispatchers = _store$useModel[1];
-
+  var bizState = store.useModelState('topoBizMod');
   var resAndMetrics = bizState.resAndMetrics,
       pollingSwitch = bizState.pollingSwitch;
   var displayConfig = topo.store.useModelState('displayConfig');