npm - @riil-frontend/component-topology - Versions diffs - 6.0.0-alpha.66 → 6.0.0-alpha.68 - Mend

@riil-frontend/component-topology 6.0.0-alpha.66 → 6.0.0-alpha.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/es/components/ColorPanel/index.js CHANGED Viewed

@@ -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/editor/components/Sidebar/views/CanvasPanel/hooks/useCanvasThemeConfig.js CHANGED Viewed

@@ -50,7 +50,8 @@ function useCanvasThemeConfig(props) {
     return function setCanvasTheme(_x) {
       return _ref.apply(this, arguments);
     };
-  }();
+  }(); // 设置资源/链路标注样式
   function setGlobalTagTheme(_x2) {
     return _setGlobalTagTheme.apply(this, arguments);
@@ -58,27 +59,23 @@ function useCanvasThemeConfig(props) {
   function _setGlobalTagTheme() {
     _setGlobalTagTheme = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeConfig) {
-      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle, globalNodeLabelStyle, globalEdgeTagStyle;
+      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              // 设置资源/链路标注样式
+              topo.getHtTopo().setGlobalNodeLabelStyle(themeConfig.globalNodeLabelStyle);
+              topo.getHtTopo().setGlobalEdgeTagStyle(themeConfig.globalEdgeTagStyle); // 更新默认配置
               _topo$store$getModelS = topo.store.getModelState('displayConfig'), nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle, defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
-              globalNodeLabelStyle = _extends({}, nodeLabelStyle, {
-                color: themeConfig.globalNodeLabelColor
-              });
-              topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
-              globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, themeConfig.globalEdgeTagStyle);
-              topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
-              _context2.next = 7;
+              _context2.next = 5;
               return displayConfigDispatchers.update({
-                nodeLabelStyle: globalNodeLabelStyle,
-                defaultEdgeLabelStyle: globalEdgeTagStyle
+                nodeLabelStyle: _extends({}, nodeLabelStyle, themeConfig.globalNodeLabelStyle),
+                defaultEdgeLabelStyle: _extends({}, defaultEdgeLabelStyle, themeConfig.globalEdgeTagStyle)
               });
-            case 7:
+            case 5:
             case "end":
               return _context2.stop();
           }

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

@@ -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 CHANGED Viewed

@@ -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/config/themes.js CHANGED Viewed

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 var baseLightTheme = {
   color: '#FFFFFF',
   globalNodeLabelColor: '#4d6277',
+  globalNodeLabelStyle: {
+    color: '#4d6277'
+  },
   globalEdgeTagStyle: {
     color: '#777B9A',
     background: '#FFFFFF',
@@ -61,7 +64,9 @@ var THEMES = [_extends({}, baseLightTheme, {
   label: '深色',
   color: '#031425',
   toolsTheme: 'black',
-  globalNodeLabelColor: '#ffffff',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
   globalEdgeTagStyle: {
     color: '#E4E9EE',
     background: '#063658',

package/es/core/models/TopoApp.js CHANGED Viewed

@@ -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.66" === 'string' ? "6.0.0-alpha.66" : null;
+var version = typeof "6.0.0-alpha.68" === 'string' ? "6.0.0-alpha.68" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/components/ColorPanel/index.js CHANGED Viewed

@@ -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/editor/components/Sidebar/views/CanvasPanel/hooks/useCanvasThemeConfig.js CHANGED Viewed

@@ -63,7 +63,8 @@ function useCanvasThemeConfig(props) {
     return function setCanvasTheme(_x) {
       return _ref.apply(this, arguments);
     };
-  }();
+  }(); // 设置资源/链路标注样式
   function setGlobalTagTheme(_x2) {
     return _setGlobalTagTheme.apply(this, arguments);
@@ -71,27 +72,23 @@ function useCanvasThemeConfig(props) {
   function _setGlobalTagTheme() {
     _setGlobalTagTheme = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(themeConfig) {
-      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle, globalNodeLabelStyle, globalEdgeTagStyle;
+      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              // 设置资源/链路标注样式
+              topo.getHtTopo().setGlobalNodeLabelStyle(themeConfig.globalNodeLabelStyle);
+              topo.getHtTopo().setGlobalEdgeTagStyle(themeConfig.globalEdgeTagStyle); // 更新默认配置
               _topo$store$getModelS = topo.store.getModelState('displayConfig'), nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle, defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
-              globalNodeLabelStyle = (0, _extends2["default"])({}, nodeLabelStyle, {
-                color: themeConfig.globalNodeLabelColor
-              });
-              topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
-              globalEdgeTagStyle = (0, _extends2["default"])({}, defaultEdgeLabelStyle, themeConfig.globalEdgeTagStyle);
-              topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
-              _context2.next = 7;
+              _context2.next = 5;
               return displayConfigDispatchers.update({
-                nodeLabelStyle: globalNodeLabelStyle,
-                defaultEdgeLabelStyle: globalEdgeTagStyle
+                nodeLabelStyle: (0, _extends2["default"])({}, nodeLabelStyle, themeConfig.globalNodeLabelStyle),
+                defaultEdgeLabelStyle: (0, _extends2["default"])({}, defaultEdgeLabelStyle, themeConfig.globalEdgeTagStyle)
               });
-            case 7:
+            case 5:
             case "end":
               return _context2.stop();
           }

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

@@ -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 CHANGED Viewed

@@ -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);
     }

package/lib/core/editor/config/themes.js CHANGED Viewed

@@ -10,6 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var baseLightTheme = {
   color: '#FFFFFF',
   globalNodeLabelColor: '#4d6277',
+  globalNodeLabelStyle: {
+    color: '#4d6277'
+  },
   globalEdgeTagStyle: {
     color: '#777B9A',
     background: '#FFFFFF',
@@ -69,7 +72,9 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
   label: '深色',
   color: '#031425',
   toolsTheme: 'black',
-  globalNodeLabelColor: '#ffffff',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
   globalEdgeTagStyle: {
     color: '#E4E9EE',
     background: '#063658',

package/lib/core/models/TopoApp.js CHANGED Viewed

@@ -54,7 +54,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 // eslint-disable-next-line no-undef
-var version = typeof "6.0.0-alpha.66" === 'string' ? "6.0.0-alpha.66" : null;
+var version = typeof "6.0.0-alpha.68" === 'string' ? "6.0.0-alpha.68" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "6.0.0-alpha.66",
+  "version": "6.0.0-alpha.68",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.66/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.68/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }