@riil-frontend/component-topology 6.0.0-alpha.34 → 6.0.0-alpha.35

package/es/components/collapse/Collapse.module.scss

@@ -37,20 +37,21 @@
     flex-direction: column;
 
     :global {
-      .#{$css-prefix}collapse-panel-content {
-        flex: 1;
-        overflow: auto;
-      }
       .#{$css-prefix}collapse-panel.#{$css-prefix}collapse-panel-expanded {
         flex: 1;
         display: flex;
         flex-direction: column;
+        overflow: auto;
         
         .#{$css-prefix}collapse-panel-content {
           flex: 1;
           overflow: auto;
         }
       }
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
     }
   }
 

package/es/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import styles from "./HtImagePalette.module.scss";
 /**
@@ -25,10 +26,20 @@ export default function HtCustomImagePanel(props) {
       });
     } catch (error) {
       rlog.error('初始化资源面板失败', error);
-    } // 注销组件
+    }
 
+    var hanleResize = function hanleResize() {
+      if (viewRef.current) {
+        topo.getHtTopo().invalideComponents();
+      }
+    };
+
+    var resizeObserver = new ResizeObserver(hanleResize);
+    resizeObserver.observe(container); // 注销组件
 
     return function () {
+      resizeObserver.disconnect();
+
       if (viewRef.current) {
         viewRef.current.destroy();
         viewRef.current = null;

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import ResizeObserver from 'resize-observer-polyfill';
 import styles from "./HtImagePalette.module.scss";
 /**
  * 组件面板
@@ -23,13 +24,22 @@ export default function HtImagePalette(props) {
       viewRef.current = htTopo.createImagePalette(container, {
         icons: icons
       });
-      console.error(viewRef.current);
     } catch (error) {
       rlog.error('初始化资源面板失败', error);
-    } // 注销组件
+    }
 
+    var hanleResize = function hanleResize() {
+      if (viewRef.current) {
+        topo.getHtTopo().invalideComponents();
+      }
+    };
+
+    var resizeObserver = new ResizeObserver(hanleResize);
+    resizeObserver.observe(container); // 注销组件
 
     return function () {
+      resizeObserver.disconnect();
+
       if (viewRef.current) {
         viewRef.current.destroy();
         viewRef.current = null;

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss

@@ -1,5 +1,5 @@
 .container {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
 }

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

@@ -0,0 +1,50 @@
+import Color from 'color';
+/**
+ * 解析颜色字符串为对象
+ * 
+ * @param {string} colorStr 
+ * @returns {null|{hex, rgb:{r,g,b,a}}}
+ */
+
+export function parseColor(colorStr) {
+  if (!colorStr) {
+    return null;
+  }
+
+  var color = Color(colorStr);
+  var rgb = color.rgb();
+  return {
+    hex: color.hex(),
+    rgb: {
+      r: rgb.color[0],
+      g: rgb.color[1],
+      b: rgb.color[2],
+      a: rgb.valpha
+    }
+  };
+}
+export function formatHexColor(color) {
+  return color ? color.hex : null;
+}
+/**
+ * 格式化背景rgba颜色
+ * @param {{background, opacity}} prevColor
+ * @param {{background, opacity}} currentColor
+ */
+
+export function formatBackgroundRgbaColor(prevColor, currentColor) {
+  if (!('background' in currentColor) && !('opacity' in currentColor)) {
+    return null;
+  }
+
+  var colorObj = Object.assign(prevColor, currentColor);
+  var background = colorObj.background,
+      opacity = colorObj.opacity;
+
+  if (!background) {
+    return null;
+  }
+
+  var rgb = background.rgb;
+  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + opacity + ")";
+}

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

@@ -1,9 +1,14 @@
 export function getTextStyle(element) {
   return {
     color: null,
+    // 文字颜色
     fontFamily: null,
-    fontSize: null,
-    fontStyle: []
+    fontSize: null // fontBold: false, // 文字样式加粗 @V1.2
+    // fontItalic: false, // 文字样式斜体 @V1.2
+    // fontUnderline: false, // 文字样式下划线 @V1.2
+    // background: {rgb: {}, hex: ''}, // 背景颜色，rgba格式。null表示无
+    // opacity: 1, // 背景透明度。值范围 0-1, null，null表示无
+
   };
 }
 export function setTextStyle(element, style) {}

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

@@ -1,19 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
 import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseColor } from "../colorUtil";
 export function getTextStyle(element) {
+  var _background$rgb;
+
   var underline = element.s('text.decoration') === 'underline';
+  var background = parseColor(element.s('textBackground'));
   return _extends({
-    color: null,
+    color: parseColor(element.s('text.color')),
     underline: underline
-  }, fontStyleUtil.toMap(element.s('text.font')));
+  }, fontStyleUtil.toMap(element.s('text.font')), {
+    background: background,
+    // 背景颜色，格式: {rgba: {}, hex: ''} | null
+    opacity: background === null || background === void 0 ? void 0 : (_background$rgb = background.rgb) === null || _background$rgb === void 0 ? void 0 : _background$rgb.a // 背景透明度。值范围 0-1, null，null表示无
+
+  });
 }
 export function setTextStyle(element, style) {
-  var underline = style.underline;
-
   if ('underline' in style) {
-    element.s('text.decoration', underline ? 'underline' : null);
+    element.s('text.decoration', style.underline ? 'underline' : null);
   }
 
+  if ('color' in style) {
+    element.s('text.color', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.s('textBackground', formatBackgroundRgbaColor(prevStyle, style));
+
   var fontStyle = _extends({}, getTextStyle(element), style);
 
   var fontStr = fontStyleUtil.build(fontStyle);

package/es/core/models/TopoApp.js

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

package/lib/components/collapse/Collapse.module.scss

@@ -37,20 +37,21 @@
     flex-direction: column;
 
     :global {
-      .#{$css-prefix}collapse-panel-content {
-        flex: 1;
-        overflow: auto;
-      }
       .#{$css-prefix}collapse-panel.#{$css-prefix}collapse-panel-expanded {
         flex: 1;
         display: flex;
         flex-direction: column;
+        overflow: auto;
         
         .#{$css-prefix}collapse-panel-content {
           flex: 1;
           overflow: auto;
         }
       }
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
     }
   }
 

package/lib/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js

@@ -7,6 +7,8 @@ exports["default"] = HtCustomImagePanel;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
 var _HtImagePaletteModule = _interopRequireDefault(require("./HtImagePalette.module.scss"));
@@ -38,10 +40,20 @@ function HtCustomImagePanel(props) {
       });
     } catch (error) {
       _rlog["default"].error('初始化资源面板失败', error);
-    } // 注销组件
+    }
+
+    var hanleResize = function hanleResize() {
+      if (viewRef.current) {
+        topo.getHtTopo().invalideComponents();
+      }
+    };
 
+    var resizeObserver = new _resizeObserverPolyfill["default"](hanleResize);
+    resizeObserver.observe(container); // 注销组件
 
     return function () {
+      resizeObserver.disconnect();
+
       if (viewRef.current) {
         viewRef.current.destroy();
         viewRef.current = null;

package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
 var _HtImagePaletteModule = _interopRequireDefault(require("./HtImagePalette.module.scss"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -36,13 +38,22 @@ function HtImagePalette(props) {
       viewRef.current = htTopo.createImagePalette(container, {
         icons: icons
       });
-      console.error(viewRef.current);
     } catch (error) {
       _rlog["default"].error('初始化资源面板失败', error);
-    } // 注销组件
+    }
+
+    var hanleResize = function hanleResize() {
+      if (viewRef.current) {
+        topo.getHtTopo().invalideComponents();
+      }
+    };
 
+    var resizeObserver = new _resizeObserverPolyfill["default"](hanleResize);
+    resizeObserver.observe(container); // 注销组件
 
     return function () {
+      resizeObserver.disconnect();
+
       if (viewRef.current) {
         viewRef.current.destroy();
         viewRef.current = null;

package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss

@@ -1,5 +1,5 @@
 .container {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
 }

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.formatBackgroundRgbaColor = formatBackgroundRgbaColor;
+exports.formatHexColor = formatHexColor;
+exports.parseColor = parseColor;
+
+var _color = _interopRequireDefault(require("color"));
+
+/**
+ * 解析颜色字符串为对象
+ * 
+ * @param {string} colorStr 
+ * @returns {null|{hex, rgb:{r,g,b,a}}}
+ */
+function parseColor(colorStr) {
+  if (!colorStr) {
+    return null;
+  }
+
+  var color = (0, _color["default"])(colorStr);
+  var rgb = color.rgb();
+  return {
+    hex: color.hex(),
+    rgb: {
+      r: rgb.color[0],
+      g: rgb.color[1],
+      b: rgb.color[2],
+      a: rgb.valpha
+    }
+  };
+}
+
+function formatHexColor(color) {
+  return color ? color.hex : null;
+}
+/**
+ * 格式化背景rgba颜色
+ * @param {{background, opacity}} prevColor
+ * @param {{background, opacity}} currentColor
+ */
+
+
+function formatBackgroundRgbaColor(prevColor, currentColor) {
+  if (!('background' in currentColor) && !('opacity' in currentColor)) {
+    return null;
+  }
+
+  var colorObj = Object.assign(prevColor, currentColor);
+  var background = colorObj.background,
+      opacity = colorObj.opacity;
+
+  if (!background) {
+    return null;
+  }
+
+  var rgb = background.rgb;
+  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + opacity + ")";
+}

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

@@ -8,9 +8,14 @@ exports.setTextStyle = setTextStyle;
 function getTextStyle(element) {
   return {
     color: null,
+    // 文字颜色
     fontFamily: null,
-    fontSize: null,
-    fontStyle: []
+    fontSize: null // fontBold: false, // 文字样式加粗 @V1.2
+    // fontItalic: false, // 文字样式斜体 @V1.2
+    // fontUnderline: false, // 文字样式下划线 @V1.2
+    // background: {rgb: {}, hex: ''}, // 背景颜色，rgba格式。null表示无
+    // opacity: 1, // 背景透明度。值范围 0-1, null，null表示无
+
   };
 }
 

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js

@@ -11,21 +11,36 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _fontStyleUtil = _interopRequireDefault(require("../../../../../../settings/common/text/fontStyleUtil"));
 
+var _colorUtil = require("../colorUtil");
+
 function getTextStyle(element) {
+  var _background$rgb;
+
   var underline = element.s('text.decoration') === 'underline';
+  var background = (0, _colorUtil.parseColor)(element.s('textBackground'));
   return (0, _extends2["default"])({
-    color: null,
+    color: (0, _colorUtil.parseColor)(element.s('text.color')),
     underline: underline
-  }, _fontStyleUtil["default"].toMap(element.s('text.font')));
+  }, _fontStyleUtil["default"].toMap(element.s('text.font')), {
+    background: background,
+    // 背景颜色，格式: {rgba: {}, hex: ''} | null
+    opacity: background === null || background === void 0 ? void 0 : (_background$rgb = background.rgb) === null || _background$rgb === void 0 ? void 0 : _background$rgb.a // 背景透明度。值范围 0-1, null，null表示无
+
+  });
 }
 
 function setTextStyle(element, style) {
-  var underline = style.underline;
-
   if ('underline' in style) {
-    element.s('text.decoration', underline ? 'underline' : null);
+    element.s('text.decoration', style.underline ? 'underline' : null);
   }
 
+  if ('color' in style) {
+    element.s('text.color', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.s('textBackground', (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style));
   var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
 
   var fontStr = _fontStyleUtil["default"].build(fontStyle);

package/lib/core/models/TopoApp.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "6.0.0-alpha.34",
+  "version": "6.0.0-alpha.35",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -41,6 +41,7 @@
     "@ahooksjs/use-sortable-plugin": "^0.2.1",
     "@ahooksjs/use-tree-plugin": "^0.2.1",
     "@alifd/biz-anchor": "^1.1.7",
+    "color": "^4.2.3",
     "@ice/store": "^1.4.2",
     "@riil-frontend/component-topo-icon-select": "^1.0.17",
     "@riil-frontend/component-topology-utils": "^2.1.0",
@@ -115,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.34/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.35/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }