@riil-frontend/component-topology 6.0.0-alpha.65 → 6.0.0-alpha.67

package/es/components/ColorPanel/index.js

@@ -34,6 +34,10 @@ function ColorPanel(props) {
       active = _useState2[0],
       setActive = _useState2[1];
 
+  var _useState3 = useState(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
   var colorChange = function colorChange(value, type, key) {
     setActive(key);
     onChange(getColor16(value), type);
@@ -66,21 +70,7 @@ function ColorPanel(props) {
   };
 
   var handleChange = function handleChange(color) {
-    var prevValue = color.hex;
-    var rgb = color.rgb;
-    var rgba = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")";
-
-    if (data !== prevValue) {
-      setData({
-        hex: prevValue,
-        rgb: rgb
-      });
-    }
-  };
-
-  var pickerBlur = function pickerBlur() {
-    onChange(data, 'change');
-    onPickerBlur();
+    setData(color); // onChange(color,'change');
   };
 
   var getColor16 = function getColor16(color) {
@@ -118,11 +108,23 @@ function ColorPanel(props) {
     return that;
   };
 
+  var open = function open() {
+    setVisible(true);
+    onPickerFocus();
+  };
+
+  var close = function close() {
+    setVisible(false);
+    onPickerBlur();
+    onChange(data, 'select');
+  };
+
   var defaultTrigger = /*#__PURE__*/React.createElement("div", {
     className: styles.swatch,
     style: {
       background: value
-    }
+    },
+    onClick: open
   }, /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/\u66F4\u591A\u989C\u8272.svg",
     alt: ""
@@ -151,6 +153,7 @@ function ColorPanel(props) {
       changClick('17');
     }
   }, /*#__PURE__*/React.createElement(_Balloon, {
+    visible: visible,
     trigger: defaultTrigger,
     closable: false,
     triggerType: "click",
@@ -161,8 +164,7 @@ function ColorPanel(props) {
     style: {
       paddingBottom: 0
     },
-    onBlur: pickerBlur,
-    onFocus: onPickerFocus
+    onClose: close
   }, /*#__PURE__*/React.createElement(SketchPicker, {
     color: data // width={230}
     ,

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

@@ -268,14 +268,14 @@ var Topology = function Topology(props) {
     direction: "row",
     flex: 1,
     className: classnames((_classnames = {}, _classnames[editorStyles.borderLine] = isEditMode, _classnames))
-  }, isEditMode && /*#__PURE__*/React.createElement(Sidebar, {
+  }, isEditMode && /*#__PURE__*/React.createElement(Sidebar, _extends({
     topo: topo,
     topoEdit: topoEdit,
     topoContext: {
       urlParams: urlParams
     },
     editorProps: editorProps
-  }), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/React.createElement(PropertyView, {
+  }, editorProps === null || editorProps === void 0 ? void 0 : editorProps.sidebarProps)), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/React.createElement(PropertyView, {
     topo: topo,
     editorProps: editorProps
   })), !isEditMode && /*#__PURE__*/React.createElement(ViewerPlugin, {

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import Tab from "../../../../components/VerticalIconTab";
 import panes from "./panes";
@@ -8,7 +8,8 @@ import styles from "./Sidebar.module.scss";
 function Sidebar(props) {
   var _classNames;
 
-  var topo = props.topo;
+  var topo = props.topo,
+      getPanels = props.getPanels;
 
   var _topo$store$useModel = topo.store.useModel('topoEdit'),
       topoEditState = _topo$store$useModel[0],
@@ -19,6 +20,9 @@ function Sidebar(props) {
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
+  var visiblePanels = useMemo(function () {
+    return getPanels ? getPanels(panes) : panes;
+  }, [getPanels]);
   useEffect(function () {
     return function () {
       // 退出编辑模式，关闭资源面板状态
@@ -63,7 +67,7 @@ function Sidebar(props) {
         resourceTabActiveKey: key
       });
     }
-  }, panes.map(renderTabItem))));
+  }, visiblePanels.map(renderTabItem))));
 }
 
 export default Sidebar;

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

@@ -1,3 +1,6 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 /* eslint-disable jsx-a11y/alt-text */
 import React, { useState } from 'react';
 import DropdownButton from "./components/DropdownButton";
@@ -10,7 +13,8 @@ import textStyleSettingRouter from "./components/textStyleSetting/textStyleSetti
 function FontColorDropdown(props) {
   var onChange = props.onChange,
       topo = props.topo,
-      opacity = props.opacity;
+      opacity = props.opacity,
+      setStyle = props.setStyle;
 
   var _useState = useState(false),
       disabled = _useState[0],
@@ -24,36 +28,90 @@ function FontColorDropdown(props) {
     topo.historyManager.endTransaction();
   };
 
-  var colorBackgroundChanges = function colorBackgroundChanges(type, name, value) {
-    if (type === 'select') topo.historyManager.beginTransaction();
-
-    if (name === 'color') {
-      onChange({
-        color: value
-      });
-    } else {
-      onChange({
-        background: value
-      });
-    }
+  var colorChang = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, type) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(type === 'select')) {
+                _context.next = 7;
+                break;
+              }
 
-    if (type === 'select') topo.historyManager.endTransaction();
-  };
+              topo.historyManager.beginTransaction();
+              _context.next = 4;
+              return setStyle({
+                color: value
+              });
 
-  var colorChang = function colorChang(value, type) {
-    colorBackgroundChanges(type, 'color', value);
-  };
+            case 4:
+              topo.historyManager.endTransaction();
+              _context.next = 8;
+              break;
 
-  var backgroundChang = function backgroundChang(value, type) {
-    colorBackgroundChanges(type, 'background', value);
-  };
+            case 7:
+              setStyle({
+                background: value
+              });
 
-  var onFocus = function onFocus() {
-    topo.historyManager.beginTransaction();
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function colorChang(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var backgroundChang = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, type) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(type === 'select')) {
+                _context2.next = 7;
+                break;
+              }
+
+              topo.historyManager.beginTransaction();
+              _context2.next = 4;
+              return setStyle({
+                background: value
+              });
+
+            case 4:
+              topo.historyManager.endTransaction();
+              _context2.next = 8;
+              break;
+
+            case 7:
+              setStyle({
+                background: value
+              });
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function backgroundChang(_x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
   };
 
-  var onBlur = function onBlur() {
-    topo.historyManager.endTransaction();
+  var onBlur = function onBlur() {// topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
@@ -119,9 +177,9 @@ function FontColorButton(props) {
     color: style.color,
     background: style.background,
     opacity: style.opacity,
+    setStyle: setStyle,
     onChange: function onChange(val) {
       setStyle(val);
-      topo.historyManager.endTransaction();
     },
     topo: topo
   }));

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

@@ -26,10 +26,6 @@ function DropdownButton(props) {
   }, buttonBoxProps), trigger);
 
   var renderContent = function renderContent() {
-    if (!visible) {
-      return /*#__PURE__*/React.createElement("div", null);
-    }
-
     if (showContainer) {
       return /*#__PURE__*/React.createElement(PopupCard, null, children);
     }

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/globalTag.js

@@ -1,7 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["color", "background", "opacity"];
-import { formatBackgroundRgbaColor, parseBackground } from "../ElementTextStyleSetting/colorUtil";
+var _excluded = ["color", "background", "opacity"],
+    _excluded2 = ["color", "background", "opacity", "bold", "italic"];
+import fontStyleUtil from "../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../ElementTextStyleSetting/colorUtil";
 var defaultStyle = {
   color: '#AFB9C2',
   fontFamily: '微软雅黑'
@@ -29,12 +31,13 @@ export var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
 
   var globalEdgeTagStyle = _extends({}, nodeLabelStyle, defaultEdgeLabelStyle, style);
 
-  topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
-  topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
   displayConfigDispatchers.update({
     nodeLabelStyle: globalNodeLabelStyle,
     defaultEdgeLabelStyle: globalEdgeTagStyle
   });
+  var styles = setTextStyle(styleData, nodeLabelStyle);
+  topo.getHtTopo().setGlobalNodeLabelStyle(styles);
+  topo.getHtTopo().setGlobalEdgeTagStyle(styles);
 };
 
 function buildStyle(styleData, prevTagStyle) {
@@ -57,4 +60,40 @@ function buildStyle(styleData, prevTagStyle) {
   return style;
 }
 
+function setTextStyle(styleData, nodeLabelStyle) {
+  var _fontStyleUtil$remove = fontStyleUtil.removeBoldItalic(styleData),
+      color = _fontStyleUtil$remove.color,
+      background = _fontStyleUtil$remove.background,
+      opacity = _fontStyleUtil$remove.opacity,
+      bold = _fontStyleUtil$remove.bold,
+      italic = _fontStyleUtil$remove.italic,
+      otherStyle = _objectWithoutPropertiesLoose(_fontStyleUtil$remove, _excluded2);
+
+  var tagStyle = _extends({}, otherStyle);
+
+  if ('color' in styleData) {
+    tagStyle.color = color.hex;
+  }
+
+  if ('bold' in styleData) {
+    tagStyle.fontBold = bold;
+  }
+
+  if ('italic' in styleData) {
+    tagStyle.fontItalic = italic;
+  }
+
+  if ('background' in styleData) {
+    // 背景颜色
+    var prevBackgroundStyle = parseBackground(nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.background);
+    tagStyle.background = formatBackgroundRgbaColor(prevBackgroundStyle, styleData);
+  }
+
+  if ('opacity' in styleData) {
+    tagStyle.opacity = opacity;
+  }
+
+  return tagStyle;
+}
+
 export function setStyle() {}

package/es/core/models/TopoApp.js

@@ -23,7 +23,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.65" === 'string' ? "6.0.0-alpha.65" : null;
+var version = typeof "6.0.0-alpha.67" === 'string' ? "6.0.0-alpha.67" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/components/ColorPanel/index.js

@@ -50,6 +50,10 @@ function ColorPanel(props) {
       active = _useState2[0],
       setActive = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      visible = _useState3[0],
+      setVisible = _useState3[1];
+
   var colorChange = function colorChange(value, type, key) {
     setActive(key);
     onChange(getColor16(value), type);
@@ -82,21 +86,7 @@ function ColorPanel(props) {
   };
 
   var handleChange = function handleChange(color) {
-    var prevValue = color.hex;
-    var rgb = color.rgb;
-    var rgba = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")";
-
-    if (data !== prevValue) {
-      setData({
-        hex: prevValue,
-        rgb: rgb
-      });
-    }
-  };
-
-  var pickerBlur = function pickerBlur() {
-    onChange(data, 'change');
-    onPickerBlur();
+    setData(color); // onChange(color,'change');
   };
 
   var getColor16 = function getColor16(color) {
@@ -134,11 +124,23 @@ function ColorPanel(props) {
     return that;
   };
 
+  var open = function open() {
+    setVisible(true);
+    onPickerFocus();
+  };
+
+  var close = function close() {
+    setVisible(false);
+    onPickerBlur();
+    onChange(data, 'select');
+  };
+
   var defaultTrigger = /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].swatch,
     style: {
       background: value
-    }
+    },
+    onClick: open
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/\u66F4\u591A\u989C\u8272.svg",
     alt: ""
@@ -168,6 +170,7 @@ function ColorPanel(props) {
       changClick('17');
     }
   }, /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
+    visible: visible,
     trigger: defaultTrigger,
     closable: false,
     triggerType: "click",
@@ -178,8 +181,7 @@ function ColorPanel(props) {
     style: {
       paddingBottom: 0
     },
-    onBlur: pickerBlur,
-    onFocus: onPickerFocus
+    onClose: close
   }, /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
     color: data // width={230}
     ,

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

@@ -310,14 +310,14 @@ var Topology = function Topology(props) {
     direction: "row",
     flex: 1,
     className: (0, _classnames2["default"])((_classnames = {}, _classnames[_editorModule["default"].borderLine] = isEditMode, _classnames))
-  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], {
+  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], (0, _extends2["default"])({
     topo: topo,
     topoEdit: topoEdit,
     topoContext: {
       urlParams: urlParams
     },
     editorProps: editorProps
-  }), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
+  }, editorProps === null || editorProps === void 0 ? void 0 : editorProps.sidebarProps)), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
     topo: topo,
     editorProps: editorProps
   })), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {

package/lib/core/editor/components/Sidebar/Sidebar.js

@@ -24,7 +24,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function Sidebar(props) {
   var _classNames;
 
-  var topo = props.topo;
+  var topo = props.topo,
+      getPanels = props.getPanels;
 
   var _topo$store$useModel = topo.store.useModel('topoEdit'),
       topoEditState = _topo$store$useModel[0],
@@ -35,6 +36,9 @@ function Sidebar(props) {
   var _topo$store$useModelS = topo.store.useModelState('topoMod'),
       graphLoaded = _topo$store$useModelS.graphLoaded;
 
+  var visiblePanels = (0, _react.useMemo)(function () {
+    return getPanels ? getPanels(_panes["default"]) : _panes["default"];
+  }, [getPanels]);
   (0, _react.useEffect)(function () {
     return function () {
       // 退出编辑模式，关闭资源面板状态
@@ -79,7 +83,7 @@ function Sidebar(props) {
         resourceTabActiveKey: key
       });
     }
-  }, _panes["default"].map(renderTabItem))));
+  }, visiblePanels.map(renderTabItem))));
 }
 
 var _default = Sidebar;

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

@@ -5,6 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _DropdownButton = _interopRequireDefault(require("./components/DropdownButton"));
@@ -27,7 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function FontColorDropdown(props) {
   var onChange = props.onChange,
       topo = props.topo,
-      opacity = props.opacity;
+      opacity = props.opacity,
+      setStyle = props.setStyle;
 
   var _useState = (0, _react.useState)(false),
       disabled = _useState[0],
@@ -41,36 +46,90 @@ function FontColorDropdown(props) {
     topo.historyManager.endTransaction();
   };
 
-  var colorBackgroundChanges = function colorBackgroundChanges(type, name, value) {
-    if (type === 'select') topo.historyManager.beginTransaction();
-
-    if (name === 'color') {
-      onChange({
-        color: value
-      });
-    } else {
-      onChange({
-        background: value
-      });
-    }
-
-    if (type === 'select') topo.historyManager.endTransaction();
-  };
-
-  var colorChang = function colorChang(value, type) {
-    colorBackgroundChanges(type, 'color', value);
+  var colorChang = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(value, type) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(type === 'select')) {
+                _context.next = 7;
+                break;
+              }
+
+              topo.historyManager.beginTransaction();
+              _context.next = 4;
+              return setStyle({
+                color: value
+              });
+
+            case 4:
+              topo.historyManager.endTransaction();
+              _context.next = 8;
+              break;
+
+            case 7:
+              setStyle({
+                background: value
+              });
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function colorChang(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var backgroundChang = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(value, type) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(type === 'select')) {
+                _context2.next = 7;
+                break;
+              }
+
+              topo.historyManager.beginTransaction();
+              _context2.next = 4;
+              return setStyle({
+                background: value
+              });
+
+            case 4:
+              topo.historyManager.endTransaction();
+              _context2.next = 8;
+              break;
+
+            case 7:
+              setStyle({
+                background: value
+              });
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function backgroundChang(_x3, _x4) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
   };
 
-  var backgroundChang = function backgroundChang(value, type) {
-    colorBackgroundChanges(type, 'background', value);
-  };
-
-  var onFocus = function onFocus() {
-    topo.historyManager.beginTransaction();
-  };
-
-  var onBlur = function onBlur() {
-    topo.historyManager.endTransaction();
+  var onBlur = function onBlur() {// topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
@@ -136,9 +195,9 @@ function FontColorButton(props) {
     color: style.color,
     background: style.background,
     opacity: style.opacity,
+    setStyle: setStyle,
     onChange: function onChange(val) {
       setStyle(val);
-      topo.historyManager.endTransaction();
     },
     topo: topo
   }));

package/lib/core/editor/components/Toolbar/widgets/components/DropdownButton.js

@@ -42,10 +42,6 @@ function DropdownButton(props) {
   }, buttonBoxProps), trigger);
 
   var renderContent = function renderContent() {
-    if (!visible) {
-      return /*#__PURE__*/_react["default"].createElement("div", null);
-    }
-
     if (showContainer) {
       return /*#__PURE__*/_react["default"].createElement(PopupCard, null, children);
     }