@riil-frontend/component-topology 6.0.0-alpha.42 → 6.0.0-alpha.44

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.js

@@ -1,30 +1,24 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import TabView from "../../common/tab/TabView";
-import Setting from "./SettingTab/Setting";
 import RelateData from "./DataTab/RelateData";
-import useHtElement from "../../../../../common/hooks/useHtElement";
+import Setting from "./BasicSetting";
+import styles from "./LayerPropertyView.module.scss";
 export default function LayerPropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       onChange = props.onChange,
       settingRuntimeState = props.settingRuntimeState,
-      editorProps = props.editorProps;
-  var layer = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(RelateData, _extends({
-    layer: layer
-  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
   }, /*#__PURE__*/React.createElement(Setting, _extends({
     layer: layer
+  }, props)), /*#__PURE__*/React.createElement("div", {
+    className: styles.data
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
   }, props))));
 }

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.module.scss

@@ -0,0 +1,10 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .data {
+    flex: 1;
+    overflow: auto;
+  }
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyViewV1.js

@@ -0,0 +1,27 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../common/tab/TabView";
+import Setting from "./SettingTab/Setting";
+import RelateData from "./DataTab/RelateData";
+export default function LayerPropertyView(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
+  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Setting, _extends({
+    layer: layer
+  }, props))));
+}

package/es/core/editor/components/settings/propertyViews/node/NodePropertyView.js

@@ -1,11 +1,8 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import useHtElement from "../../../../../common/hooks/useHtElement";
-import TabView from "../../common/tab/TabView";
 import Data from "./data/Data";
 import styles from "./NodePropertyView.module.scss";
-import Setting from "./Setting";
+import BasicSetting from "./Setting/BasicSetting";
 export default function NodePropertyView(props) {
   var _topo$options$editor;
 
@@ -14,40 +11,19 @@ export default function NodePropertyView(props) {
       values = props.values,
       onChange = props.onChange,
       editorProps = props.editorProps,
-      settingRuntimeState = props.settingRuntimeState;
-  var node = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-
-  var renderData = function renderData() {
-    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
-      node: node
-    }));
-  };
-
-  var renderSetting = function renderSetting() {
-    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
-    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
-  }; // 未绑定资源的节点，根据参数控制是否可关联资源
-
+      selectionElement = props.selectionElement;
+  var node = selectionElement; // 未绑定资源的节点，根据参数控制是否可关联资源
 
   var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
-  var content;
+  var dataContent = null;
 
   if (showRelateResource) {
-    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u6570\u636E",
-      key: "1"
-    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u8BBE\u7F6E",
-      key: "2"
-    }, renderSetting()));
-  } else {
-    content = renderSetting();
+    dataContent = /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
   }
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.NodePropertyView
-  }, content);
+  }, /*#__PURE__*/React.createElement(BasicSetting, props), dataContent);
 }

package/es/core/editor/components/settings/propertyViews/node/NodePropertyViewV1.js

@@ -0,0 +1,53 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import useHtElement from "../../../../../common/hooks/useHtElement";
+import TabView from "../../common/tab/TabView";
+import Data from "./data/Data";
+import styles from "./NodePropertyView.module.scss";
+import Setting from "./Setting";
+export default function NodePropertyView(props) {
+  var _topo$options$editor;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState;
+  var node = useHtElement({
+    topo: topo,
+    id: values.id
+  });
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
+  };
+
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  var content;
+
+  if (showRelateResource) {
+    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.NodePropertyView
+  }, content);
+}

package/es/core/editor/components/settings/propertyViews/node/Setting/BasicSetting.js

@@ -0,0 +1,49 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect } from 'react';
+import NameInput from "./NameInput";
+
+function parseValues(values) {
+  return _extends({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState,
+      _props$showImageSetti = props.showImageSetting,
+      showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 16px 0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u540D\u79F0"
+  }, /*#__PURE__*/React.createElement(NameInput, {
+    name: "attrObject.customName",
+    topo: topo
+  })));
+}

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

@@ -134,7 +134,8 @@ export default function Data(props) {
     style: {
       flex: 1,
       paddingRight: 16,
-      color: "#4D6277"
+      color: "#4D6277",
+      lineHeight: '20px'
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {

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

@@ -24,6 +24,7 @@ export default function NodeRelateResourceButton(props) {
   return !hide ? /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     text: true,
+    size: "xs",
     onClick: function onClick() {
       setVisible(true);
     }

package/es/core/editor/components/settings/propertyViews/text/TextPropertyView.js

@@ -59,23 +59,11 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 4
-    }
-  }, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement(_Form, {
     field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['显示设置'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E",
+    labelAlign: "top",
     style: {
-      padding: 0
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6587\u672C"
@@ -92,8 +80,5 @@ export default function TextPropertyView(props) {
     onBlur: function onBlur() {
       topo.historyManager.endTransaction();
     }
-  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
-    name: "styleMap.textObj",
-    topo: topo
-  })))))));
+  })));
 }

package/es/core/models/HistoryManager.js

@@ -65,6 +65,10 @@ var HistoryManager = /*#__PURE__*/function () {
     var _this = this;
 
     this.htHistoryManager.beginTransaction();
+    var displayConfigProperties = [// 单多链路
+    'expandAllEdges', // 节点标注
+    'nodeLabelStyle', // 画布主题
+    'canvasTheme', 'linkTag', 'linkTip', 'nodeTag', 'nodeTip'];
     var items = [{
       modelName: 'topoMod',
       property: 'data'
@@ -72,23 +76,16 @@ var HistoryManager = /*#__PURE__*/function () {
     {
       modelName: 'topoMod',
       property: 'type'
-    }, // 单多链路
-    {
-      modelName: 'displayConfig',
-      property: 'expandAllEdges'
-    }, // 节点标注
-    {
-      modelName: 'displayConfig',
-      property: 'nodeLabelStyle'
-    }, // 画布主题
-    {
-      modelName: 'displayConfig',
-      property: 'canvasTheme'
-    }, // 背景
+    }].concat(displayConfigProperties.map(function (property) {
+      return {
+        modelName: 'displayConfig',
+        property: property
+      };
+    }), [// 背景
     {
       modelName: 'background',
       property: 'current'
-    }];
+    }]);
     this.storeHistory = items.map(function (item) {
       return _extends({}, item, {
         oldValue: _this.topo.store.getModelState(item.modelName)[item.property]

package/es/core/models/{SelectionManager.js → SelectionModel.js}

@@ -3,25 +3,13 @@ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useHtElements from "../common/hooks/useHtElements";
 import ignoreList from "./selection/ignoreList";
 
-var SelectionManager = /*#__PURE__*/function () {
-  function SelectionManager(topo) {
+var SelectionModel = /*#__PURE__*/function () {
+  function SelectionModel(topo) {
     var _this = this;
 
     this.topo = null;
     this.inited = false;
 
-    this.setSelection = function (selection) {
-      var selectionDispatchers = _this.topo.store.getModelDispatchers('selection');
-
-      _this.selectionIds = selection.map(function (item) {
-        return item.id;
-      });
-      selectionDispatchers.update({
-        selection: selection,
-        selectionIds: _this.selectionIds
-      });
-    };
-
     this.updateSelection = function () {
       try {
         var selectionModel = _this.topo.getSelectionModel();
@@ -30,18 +18,30 @@ var SelectionManager = /*#__PURE__*/function () {
 
         var selectionArr = htSelection.map(getElementData); // rlog.info("updateSelection", selectionArr.map((element) => element.id));
 
-        _this.setSelection(selectionArr);
+        _this.updateStoreSelection(selectionArr);
       } catch (e) {
         rlog.error('updateSelection error', e);
       }
     };
 
+    this.updateStoreSelection = function (selection) {
+      var selectionDispatchers = _this.topo.store.getModelDispatchers('selection');
+
+      _this.selectionIds = selection.map(function (item) {
+        return item.id;
+      });
+      selectionDispatchers.update({
+        selection: selection,
+        selectionIds: _this.selectionIds
+      });
+    };
+
     this.topo = topo;
     this.handleSelectionChange = this.handleSelectionChange.bind(this);
     this.handleDataPropertyChange = this.handleDataPropertyChange.bind(this);
   }
 
-  var _proto = SelectionManager.prototype;
+  var _proto = SelectionModel.prototype;
 
   _proto.init = function init() {
     if (this.inited) {
@@ -75,6 +75,15 @@ var SelectionManager = /*#__PURE__*/function () {
     return elements;
   };
 
+  _proto.getSelection = function getSelection() {
+    var selectionModel = this.topo.getSelectionModel();
+    return selectionModel.getSelection().getArray();
+  }
+  /**
+   * 同步选中元素到store
+   */
+  ;
+
   _proto.handleSelectionChange = function handleSelectionChange(e) {
     rlog.info('Selection handleSelectionChange', e);
     this.updateSelection();
@@ -121,10 +130,10 @@ var SelectionManager = /*#__PURE__*/function () {
     dataModel.removeDataPropertyChangeListener(this.handleDataPropertyChange);
   };
 
-  return SelectionManager;
+  return SelectionModel;
 }();
 
-export { SelectionManager as default };
+export { SelectionModel as default };
 ; // 构造元素数据
 
 var map = {

package/es/core/models/TopoApp.js

@@ -20,9 +20,9 @@ import { updateEdgeExpanded } from "../utils/edgeUtil";
 import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
-import SelectionManager from "./SelectionManager"; // eslint-disable-next-line no-undef
+import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.42" === 'string' ? "6.0.0-alpha.42" : null;
+var version = typeof "6.0.0-alpha.44" === 'string' ? "6.0.0-alpha.44" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -78,7 +78,7 @@ var Topo = /*#__PURE__*/function () {
 
     this.test = new Test(this);
     this.uid = topoFactory.add(options.name, this);
-    this.selectionManager = new SelectionManager(this);
+    this.selectionModel = new SelectionModel(this);
   };
 
   _proto.destroy = function destroy() {

package/es/networkTopo/components/editor/propertyViews/edge/EdgePropertyView.js

@@ -1,10 +1,43 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import CommonEdgePropertyView from "../../../../../core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import React, { useEffect } from 'react';
 import BindExitLinkSelect from "./link/BindExitLinkSelect";
+
+function parseValues(values, edge) {
+  return _extends({}, values);
+}
+
 export default function EdgePropertyView(props) {
-  var extraDisplaySetting = /*#__PURE__*/React.createElement(BindExitLinkSelect, props);
-  return /*#__PURE__*/React.createElement(CommonEdgePropertyView, _extends({}, props, {
-    extraDisplaySetting: extraDisplaySetting
-  }));
+  var topo = props.topo,
+      edge = props.edge,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      extraDisplaySetting = props.extraDisplaySetting;
+  var store = topo.store;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values, edge),
+    onChange: function onChange(name, value) {
+      rlog.debug('CommonEdgePropertyView', name, value);
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values, edge));
+  }, [values]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '12px 0 0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(BindExitLinkSelect, props))));
 }

package/es/networkTopo/components/editor/propertyViews/edge/LinkPropertyView/LinkPropertyView.js

@@ -1,37 +1,31 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
-import React from "react";
-import TabView from "../../../../../../core/editor/components/settings/common/tab/TabView";
+import NoDataPage from '@riil-frontend/component-no-data-page';
+import React from 'react';
 import Data from "./Data";
-import Setting from "./Setting";
 export default function LinkPropertyView(props) {
   var edge = props.edge,
       topo = props.topo; // 无权限不显示数据页签
 
-  var _topo$store$useModelS = topo.store.useModelState("topoMod").data,
+  var _topo$store$useModelS = topo.store.useModelState('topoMod').data,
       links = _topo$store$useModelS.links,
       linkGroups = _topo$store$useModelS.linkGroups;
   var link = [].concat(links, linkGroups).find(function (item) {
     return item.id === edge.getTag();
-  }); // console.log('LinkPropertyView',link)
+  });
 
   if (link) {
     var readable = link.permission.readable;
 
     if (!readable) {
-      return /*#__PURE__*/React.createElement(Setting, props);
+      return /*#__PURE__*/React.createElement(NoDataPage, {
+        statusCode: "\u6CA1\u6709\u67E5\u770B\u6743\u9650"
+      });
     }
   } else {
-    return /*#__PURE__*/React.createElement(Setting, props);
+    return null;
   }
 
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
     link: link
-  }))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
-  }, /*#__PURE__*/React.createElement(Setting, props)));
+  }));
 }

package/es/networkTopo/components/editor/propertyViews/edge/LinkPropertyView/LinkPropertyViewV1.js

@@ -0,0 +1,37 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../../../../../core/editor/components/settings/common/tab/TabView";
+import Data from "./Data";
+import Setting from "./Setting";
+export default function LinkPropertyView(props) {
+  var edge = props.edge,
+      topo = props.topo; // 无权限不显示数据页签
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod').data,
+      links = _topo$store$useModelS.links,
+      linkGroups = _topo$store$useModelS.linkGroups;
+  var link = [].concat(links, linkGroups).find(function (item) {
+    return item.id === edge.getTag();
+  }); // console.log('LinkPropertyView',link)
+
+  if (link) {
+    var readable = link.permission.readable;
+
+    if (!readable) {
+      return /*#__PURE__*/React.createElement(Setting, props);
+    }
+  } else {
+    return /*#__PURE__*/React.createElement(Setting, props);
+  }
+
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+    link: link
+  }))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Setting, props)));
+}

package/es/networkTopo/components/editor/propertyViews/edge/link/LinkInfoPreview.module.scss

@@ -53,7 +53,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-top: 8px;
+  padding-top: 12px;
   padding-left: 16px;
 
   :global {

package/es/networkTopo/models/LinkDynamicStyleExecutor.js

@@ -54,13 +54,13 @@ var LinkDynamicStyleExecutor = /*#__PURE__*/function () {
     var _this = this;
 
     var topo = this.topo;
-    topo.historyManager && topo.historyManager.setDisabled(true, '链路动态样式');
 
     var _topo$dataModel$getDa = topo.dataModel.getData(),
         links = _topo$dataModel$getDa.links,
         linkGroups = _topo$dataModel$getDa.linkGroups;
 
-    var dataModel = this.topo.getDataModel(); // 1、如果连线可见，设置线宽
+    var dataModel = this.topo.getDataModel();
+    topo.historyManager && topo.historyManager.setDisabled(true, '链路动态样式'); // 1、如果连线可见，设置线宽
 
     links.forEach(function (link) {
       var edge = dataModel.getDataByTag(link.id);

package/es/style.js

@@ -38,8 +38,8 @@ import '@alifd/next/es/menu/style';
 import '@alifd/next/es/collapse/style';
 import '@alifd/next/es/select/style';
 import '@alifd/next/es/number-picker/style';
-
 import '@alifd/next/es/tag/style';
+
 import '@riil-frontend/component-riil-event-emitter/es/style';
 import '@alifd/next/es/range/style';
 import './index.scss';