@riil-frontend/component-topology 6.0.0-alpha.41 → 6.0.0-alpha.43

package/demo/CHANGELOG/CHANGELOG.md

@@ -1,3 +1,8 @@
+## V1.2 (6.X)
+
+移除参数：
+- editorProps.getEdgeGroupPropertyViewType
+
 
 ## v3.2.0 `2022-4-22 14:44:37`
 

package/es/components/VerticalIconTab/VerticalIconTab.js

@@ -1,5 +1,6 @@
 import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
+import _Balloon from "@alifd/next/es/balloon";
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import styles from "./VerticalIconTab.module.scss";
@@ -11,8 +12,9 @@ import styles from "./VerticalIconTab.module.scss";
 
 function CustomTabItem(_ref) {
   var title = _ref.title,
+      titleTootip = _ref.titleTootip,
       icon = _ref.icon;
-  return /*#__PURE__*/React.createElement("div", {
+  var tabItem = /*#__PURE__*/React.createElement("div", {
     className: "v-icon-tab-item"
   }, /*#__PURE__*/React.createElement("img", {
     src: icon,
@@ -20,6 +22,14 @@ function CustomTabItem(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "tab-title"
   }, title));
+  return /*#__PURE__*/React.createElement(_Balloon.Tooltip, {
+    trigger: tabItem,
+    align: "r" // 解决遮挡下拉浮层问题
+    ,
+    popupStyle: {
+      zIndex: 1000
+    }
+  }, titleTootip);
 }
 /**
  * 竖向

package/es/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -33,6 +33,7 @@
       justify-content: center;
       margin: 0 4px;
       border-radius: 4px;
+      user-select: none;
 
       &:hover {
         background-color: rgba(76, 137, 255, 0.1);

package/es/core/components/DisplaySettingDrawer/hooks/useDisplaySetting.js

@@ -76,13 +76,18 @@ export default (function (props) {
             case 7:
               extraOnOk = displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onOk;
 
-              if (extraOnOk) {
-                extraOnOk(displayConfig);
+              if (!extraOnOk) {
+                _context2.next = 11;
+                break;
               }
 
+              _context2.next = 11;
+              return extraOnOk(displayConfig);
+
+            case 11:
               topo.historyManager.endTransaction();
 
-            case 10:
+            case 12:
             case "end":
               return _context2.stop();
           }

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

@@ -109,7 +109,7 @@ var Topology = function Topology(props) {
     // 拓扑退出注销
     return function () {
       rlog.info('TopoView 退出');
-      topo.selectionManager.destroy();
+      topo.selectionModel.destroy();
       topoDispatchers.reset();
     };
   }, []);
@@ -137,7 +137,7 @@ var Topology = function Topology(props) {
       topo.historyManager = new HistoryManager(topo, htHistoryManager);
     }
 
-    topo.selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded2: true
     });
@@ -156,7 +156,7 @@ var Topology = function Topology(props) {
     fixLink(topo);
     handleClusterNoPermission(topo);
     updateEdgeExpanded(topo);
-    topo.selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded: true
     });

package/es/core/editor/components/Sidebar/panes.js

@@ -4,28 +4,33 @@ import ComponentPanel from "./views/ComponentPanel";
 import ImagePanel from "./views/ImagePanel";
 import LinkPanel from "./views/LinkPanel";
 var panes = [{
-  title: '链路',
   key: '1',
+  title: '链路',
+  titleTootip: '在两个节点之间添加链路&线',
   icon: '/img/topo/editor/sidebar/icon/链路.svg',
   content: LinkPanel
 }, {
   title: '组件',
   key: '2',
+  titleTootip: '基础组件',
   icon: '/img/topo/editor/sidebar/icon/组件.svg',
   content: ComponentPanel
 }, {
   title: '图片',
   key: '3',
+  titleTootip: '图片素材',
   icon: '/img/topo/editor/sidebar/icon/图片.svg',
   content: ImagePanel
 }, {
   title: '背景',
   key: '4',
+  titleTootip: '背景素材',
   icon: '/img/topo/editor/sidebar/icon/背景.svg',
   content: BackgroundPanel
 }, {
   title: '画布',
   key: '5',
+  titleTootip: '拓扑图画布底图',
   icon: '/img/topo/editor/sidebar/icon/画布.svg',
   content: CanvasPanel
 }];

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

@@ -23,7 +23,7 @@ function AddResourceButton(props) {
       topoEdit = props.topoEdit,
       editorProps = props.editorProps; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
 
   var _useState = useState(getAddType(selection)),
       addType = _useState[0],

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

@@ -20,7 +20,7 @@ function BoxBackgroundButton(props) {
       setDisabled = _useState[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   useEffect(function () {// setDisabled(false)
   }, [selection]);
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {

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

@@ -30,7 +30,7 @@ function EdgeColorButton(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
 
   var loopEdges = function loopEdges(edges, operateEdgeFn) {
     edges.forEach(function (edge) {

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

@@ -27,7 +27,7 @@ function EdgeTypeButton(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {
     if (graphLoaded) {
       var edges = getEdgesBySelection(topo);

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

@@ -10,30 +10,42 @@ import textStyleSettingRouter from "./components/textStyleSetting/textStyleSetti
 function FontColorDropdown(props) {
   var onChange = props.onChange,
       topo = props.topo,
-      color = props.color,
-      background = props.background,
       opacity = props.opacity;
 
   var _useState = useState(false),
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var backOpacityChange = function backOpacityChange(value) {
+  var onPickerFocus = function onPickerFocus() {
+    topo.historyManager.beginTransaction();
+  };
+
+  var onPickerBlur = function onPickerBlur() {
+    topo.historyManager.endTransaction();
+  };
+
+  var backOpacityChange = function backOpacityChange(value, type) {
+    if (type === 'select') onPickerFocus();
     onChange({
       opacity: value / 100
     });
+    if (type === 'select') onPickerBlur();
   };
 
-  var colorChang = function colorChang(value) {
+  var colorChang = function colorChang(value, type) {
+    if (type === 'select') onPickerFocus();
     onChange({
       color: value
     });
+    if (type === 'select') onPickerBlur();
   };
 
   var backgroundChang = function backgroundChang(value) {
+    onPickerFocus();
     onChange({
       background: value
     });
+    onPickerBlur();
   };
 
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
@@ -50,9 +62,16 @@ function FontColorDropdown(props) {
     className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.fontColor
-  }, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement(ColorPanel, {
-    onChange: colorChang
-  })), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    onChange: colorChang,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles.backgroundColor
   }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
     className: styles.backOpacity
@@ -64,11 +83,19 @@ function FontColorDropdown(props) {
     unit: "%",
     list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
     onChange: backOpacityChange,
-    defaultValue: opacity
-  })), /*#__PURE__*/React.createElement(ColorPanel, {
+    defaultValue: opacity * 100
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '10px',
+      marginLeft: '-4px',
+      marginBottom: '3px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
     showClear: true,
-    onChange: backgroundChang
-  }))));
+    onChange: backgroundChang,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur
+  })))));
 }
 
 function FontColorButton(props) {
@@ -85,7 +112,6 @@ function FontColorButton(props) {
     background: style.background,
     opacity: style.opacity,
     onChange: function onChange(val) {
-      topo.historyManager.beginTransaction();
       setStyle(val);
       topo.historyManager.endTransaction();
     },

package/es/core/editor/components/Toolbar/widgets/FontColorButton.module.scss

@@ -1,20 +1,20 @@
 .content {
-  height: 296px;
+  margin: 4px 0px 0px 6px;
  .fontColor{
   width: 100%;
-  height: 143px;//159px
+  margin-bottom: 16px;
   .colorPanelBox{
     padding: 9px;
     padding-top: 8px;
   }
   &>span{
     font-size: 12px;
-    color: black;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #4D6277;
     line-height: 17px;
    }
+   
  }
  .backgroundColor{
   width: 100%;
@@ -32,9 +32,8 @@
     line-height: 17px;
    }
    .backOpacity{
-    margin-top: 2px;
+    margin-top: 5px;
     margin-bottom: 5px;
-    margin-left: 11px;
     line-height: 8px;
     display: flex;
     flex-direction: row;

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

@@ -57,7 +57,7 @@ function FontStyleButton(props) {
       setValue = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {
     var isAllText = !selection.filter(function (ele) {
       return !isText(ele);

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

@@ -18,7 +18,7 @@ function Layout(props) {
       setLayout = _useState[1]; // 选中的元素
 
 
-  var selectionElements = topo.selectionManager.useHtSelection();
+  var selectionElements = topo.selectionModel.useHtSelection();
 
   var _topo$store$useModelS = topo.store.useModelState('selection'),
       selection = _topo$store$useModelS.selection;
@@ -87,7 +87,7 @@ function LayoutWidget(props) {
   // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
   // type为auto且selection.length==0时可以点击布局 
 
-  var selectionElements = topo.selectionManager.useHtSelection();
+  var selectionElements = topo.selectionModel.useHtSelection();
   var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
 
   var disabled = useMemo(function () {

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

@@ -34,7 +34,7 @@ function NodeAlignWidget(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
 
   var setSpace = function setSpace(type, num) {
     topo.historyManager.beginTransaction(); // eslint-disable-next-line no-shadow
@@ -68,6 +68,13 @@ function NodeAlignWidget(props) {
       setLeftInputVal();
       setRightInputVal();
       setDistributionDisabled(nodes.length <= 2);
+
+      if (nodes.length === 2) {
+        var h = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'h')[0];
+        var v = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'v')[0];
+        setLeftInputVal(h * 1 > 0 ? h : 0);
+        setRightInputVal(v * 1 > 0 ? v : 0);
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [graphLoaded, selection]);

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

@@ -25,7 +25,7 @@ function NodeImageButton(props) {
       setImgVal = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {
     var nodes = selection.filter(function (ele) {
       return isGroup(ele) || isNode(ele);

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

@@ -28,7 +28,7 @@ function NodeSizeButton(props) {
       setSize = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
     var elements = selection.map(function (item) {

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

@@ -16,7 +16,7 @@ function ElementTextStyleSetting(props) {
       graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useSelection();
   var htSelection = useMemo(function () {
     if (!selection.length) {
       return [];

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/textStyleSettingRouter.js

@@ -7,7 +7,7 @@ function textStyleSettingRouter(Component, options) {
   var names = (options === null || options === void 0 ? void 0 : options.names) || [];
   return function TextStyleSettingButton(props) {
     var topo = props.topo;
-    var selection = topo.selectionManager.useHtSelection();
+    var selection = topo.selectionModel.useHtSelection();
     var Widget = !selection.length ? GlobalTagStyleSetting : ElementTextStyleSetting;
     return /*#__PURE__*/React.createElement(Widget, _extends({
       Component: Component

package/es/core/editor/components/settings/CloseablePanel.module.scss

@@ -1,9 +1,21 @@
+@import '~@alifd/next/variables.scss';
+
+
 .panel {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: #FFFFFF;
+
+  
+  :global {
+    .#{$css-prefix}drawer-header {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
 }
 .body {
   flex: 1;
+  overflow: auto;
 }

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

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import CloseablePanel from "./CloseablePanel";
-import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
+import PropertyViewManager from "./core/PropertyViewManager";
 import Settings from "./Settings";
 import styles from "./Settings.module.scss";
-export default function PropertyView(props) {
+export default function PropertyPanel(props) {
   var _classNames;
 
   var topo = props.topo,
@@ -22,37 +22,40 @@ export default function PropertyView(props) {
       topoEditDispatchers = _topo$store$useModel[1];
 
   var propertyPanelVisible = topoEditState.propertyPanelVisible;
+  var propertyViewManager = useMemo(function () {
+    return new PropertyViewManager(topo);
+  }, []);
+  useEffect(function () {
+    if (graphLoaded) {
+      propertyViewManager.init();
+    }
 
-  if (!graphLoaded) {
-    return null;
-  }
+    return function () {
+      propertyViewManager.destroy();
+    };
+  }, [graphLoaded, propertyViewManager]);
 
   var renderContent = function renderContent() {
     if (!propertyPanelVisible) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
-      topo: topo
-    }, /*#__PURE__*/React.createElement(Settings, {
+    return /*#__PURE__*/React.createElement(Settings, {
       topo: topo,
+      selection: selection,
+      propertyViewManager: propertyViewManager,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
-      selection: selection,
       editorProps: editorProps
-    }));
+    });
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.settingsPanel, (_classNames = {}, _classNames[styles.settingsPanelHide] = !propertyPanelVisible, _classNames))
+    className: classNames(styles.propertyPanel, (_classNames = {}, _classNames[styles.hide] = !propertyPanelVisible, _classNames))
   }, /*#__PURE__*/React.createElement(CloseablePanel, {
     title: "\u6570\u636E\u5C5E\u6027",
     onClose: function onClose() {
-      topoEditDispatchers.update({
-        propertyPanelVisible: false
-      });
+      propertyViewManager.close();
     }
-  }, /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
-    topo: topo
-  }, renderContent())));
+  }, renderContent()));
 }

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

@@ -1,101 +1,63 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from "react";
-import { isEdge, isGroup, isLayer, isNode, isText } from "../../../../utils/htElementDataUtil";
-import propertyPanelMap from "./propertyViews";
+import React, { useEffect, useMemo, useState } from 'react';
 import useSettingRuntimeState from "./useSettingRuntimeState";
-import styles from "./Settings.module.scss";
+import updateElementProperty from "./core/updateElementProperty";
 
-function getElementType(selection) {
-  var selectionElement = selection[0];
-  var selectionSize = selection.length;
-  var elementType;
-
-  if (!selectionSize) {
-    // 未选
-    elementType = "view";
-  } else if (selectionSize >= 2) {
-    // 多选
-    elementType = "multiple";
-  } else if (isGroup(selectionElement)) {
-    elementType = "group";
-  } else if (selectionElement.attrObject.topLeftText) {
-    // TODO 临时方式
-    elementType = "box";
-  } else if (isNode(selectionElement)) {
-    elementType = "node";
-  } else if (isEdge(selectionElement)) {
-    elementType = "edge";
-  } else if (isLayer(selectionElement)) {
-    // 分层
-    elementType = "layer";
-  } else if (isText(selectionElement)) {
-    elementType = "text";
-  }
+function buildElementValues(selection) {
+  var values = _extends({}, selection[0]);
 
-  return elementType;
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
+  attrTypes.forEach(function (type) {
+    Object.keys(values[type] || {}).forEach(function (key) {
+      values[type + "." + key] = values[type][key];
+    });
+  });
+  return values;
 }
 
-export default function Settings(props) {
+export default function PropertyViewContainer(props) {
   var topo = props.topo,
       topoShowType = props.topoShowType,
       topoEditApi = props.topoEditApi,
       selection = props.selection,
-      editorProps = props.editorProps;
-  var settingRuntimeState = useSettingRuntimeState(); // TODO 待优化
-
-  var updateElementProperty = function updateElementProperty(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 });
-
-    if (name.startsWith("attrObject.")) {
-      element.setAttr(name.replace("attrObject.", ""), value);
-    } else if (name.startsWith("position.")) {
-      element.setPosition(name.replace("position.", ""), value);
-    } else if (name.startsWith("styleMap.")) {
-      element.setStyle(name.replace("styleMap.", ""), value);
-    } else if (name === "name") {
-      element.setName(value);
-    } else if (name === "width") {
-      element.setWidth(value);
-    } else if (name === "height") {
-      element.setHeight(value);
-    } else if (name === "image") {
-      element.setImage(value);
-    } else if (name === "layout") {
-      // console.info("element----layout", element, value);
-      var layouType = value.id === "toward" ? "" + value.id + value.options.subId : value.id;
-      topo.getHtTopo().layoutInContainer(layouType);
-    }
-  };
-
-  var elementType = getElementType(selection);
-  var PropertyView = propertyPanelMap[elementType];
+      editorProps = props.editorProps,
+      propertyViewManager = props.propertyViewManager;
+  var settingRuntimeState = useSettingRuntimeState();
+  var selectionElements = useMemo(function () {
+    return topo.selectionModel.getSelection();
+  }, [selection]);
+  var PropertyView = propertyViewManager.getPropertyView(selection); // 不建议使用，直接使用ht元素对象。待优化
+
+  var singleElementValues = useMemo(function () {
+    return selection.length === 1 ? buildElementValues(selection) : undefined;
+  }, [selection]);
 
   if (!PropertyView) {
+    propertyViewManager.close();
     return null;
   }
 
-  var attrTypes = ["attrObject", "position", "styleMap"];
+  var elementProps = {};
 
-  var values = _extends({}, selection[0]);
+  if (selection.length === 1) {
+    elementProps = {
+      selectionElement: selectionElements[0],
+      values: singleElementValues
+    };
+  }
 
-  attrTypes.forEach(function (type) {
-    Object.keys(values[type] || {}).forEach(function (key) {
-      values[type + "." + key] = values[type][key];
-    });
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(PropertyView, {
-    type: elementType,
+  return /*#__PURE__*/React.createElement(PropertyView, _extends({
     topo: topo,
+    selection: selection,
+    selectionElements: selectionElements,
     topoShowType: topoShowType,
     topoEdit: topoEditApi,
     topoEditApi: topoEditApi,
-    selection: selection,
-    values: values,
-    onChange: updateElementProperty,
-    editorProps: editorProps,
+    editorProps: editorProps
+  }, elementProps, {
+    onChange: function onChange(name, value) {
+      updateElementProperty(topo, name, value);
+    },
     settingRuntimeState: settingRuntimeState
   }));
 }

package/es/core/editor/components/settings/Settings.module.scss

@@ -1,6 +1,6 @@
 @import '~@alifd/next/variables.scss';
 
-.settingsPanel {
+.propertyPanel {
   width: 280px;
   height: 100%;
   position: absolute;
@@ -14,7 +14,7 @@
   overflow: hidden;
   transition: width .1s linear;
 
-  &.settingsPanelHide {
+  &.hide {
     width: 0;
     border-left: none;
   }
@@ -74,11 +74,3 @@
     align-items: center;
   }
 }
-
-.content {
-  flex: 1;
-  background: #FFFFFF;
-  overflow: auto;
-  // padding-bottom: 12px;
-
-}