@riil-frontend/component-topology 6.0.0-alpha.31 → 6.0.0-alpha.32

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _dropdown = _interopRequireDefault(require("@alifd/next/lib/dropdown"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -26,17 +28,18 @@ function DropdownButton(props) {
       showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
       _props$showContainer = props.showContainer,
       showContainer = _props$showContainer === void 0 ? true : _props$showContainer,
+      buttonBoxProps = props.buttonBoxProps,
       children = props.children;
 
   var _useState = (0, _react.useState)(false),
       visible = _useState[0],
       setVisible = _useState[1];
 
-  var button = /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], {
+  var button = /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], (0, _extends2["default"])({
     active: visible,
     disabled: disabled,
     showArrow: showArrow
-  }, trigger);
+  }, buttonBoxProps), trigger);
 
   var renderContent = function renderContent() {
     if (!visible) {

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

@@ -23,10 +23,14 @@ function DropdownMenu(props) {
   var valueDisplay = valueRender ? valueRender(value) : value;
   var selectMode = multiple ? 'multiple' : 'single';
 
+  var handleChange = function handleChange(keys) {
+    onChange(multiple ? keys : keys[0]);
+  };
+
   var menu = /*#__PURE__*/_react["default"].createElement(_menu["default"], {
     selectMode: selectMode,
     selectedKeys: selectedKeys,
-    onSelect: onChange
+    onSelect: handleChange
   }, children);
 
   return /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _textStyleUtil = require("./textStyleUtil");
+
+var _excluded = ["Component"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ElementTextStyleSetting(props) {
+  var topo = props.topo;
+  var Component = props.Component,
+      widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // 选中的元素
+
+  var selection = topo.selectionManager.useSelection();
+  var htSelection = (0, _react.useMemo)(function () {
+    if (!selection.length) {
+      return [];
+    }
+
+    return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+  }, [selection, topo]);
+  var value = (0, _react.useMemo)(function () {
+    return (0, _textStyleUtil.getTextStyle)(htSelection) || {};
+  }, [htSelection, topo]);
+  var setStyle = (0, _react.useMemo)(function () {
+    return function (style) {
+      htSelection.forEach(function (element) {
+        (0, _textStyleUtil.setTextStyle)(element, style);
+      });
+    };
+  }, [htSelection]);
+  return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
+    disabled: false,
+    htSelection: htSelection,
+    style: value,
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+var _default = ElementTextStyleSetting;
+exports["default"] = _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+
+function setTextStyle(element, style) {}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+
+function setTextStyle(element, style) {}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _text = _interopRequireDefault(require("./text"));
+
+var _nodeTag = _interopRequireDefault(require("./nodeTag"));
+
+var _edgeTag = _interopRequireDefault(require("./edgeTag"));
+
+var _groupTitle = _interopRequireDefault(require("./groupTitle"));
+
+var _layerTitle = _interopRequireDefault(require("./layerTitle"));
+
+var _default = {
+  nodeTag: _nodeTag["default"],
+  edgeTag: _edgeTag["default"],
+  text: _text["default"],
+  groupTitle: _groupTitle["default"],
+  layerTitle: _layerTitle["default"]
+};
+exports["default"] = _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+
+function setTextStyle(element, style) {}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+
+function setTextStyle(element, style) {}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _fontStyleUtil = _interopRequireDefault(require("../../../../../../settings/common/text/fontStyleUtil"));
+
+function getTextStyle(element) {
+  var underline = element.s('text.decoration') === 'underline';
+  return (0, _extends2["default"])({
+    color: null,
+    underline: underline
+  }, _fontStyleUtil["default"].toMap(element.s('text.font')));
+}
+
+function setTextStyle(element, style) {
+  var underline = style.underline;
+
+  if ('underline' in style) {
+    element.s('text.decoration', underline ? 'underline' : null);
+  }
+
+  var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
+
+  var fontStr = _fontStyleUtil["default"].build(fontStyle);
+
+  element.s('text.font', fontStr);
+}
+
+var _default = {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};
+exports["default"] = _default;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getElementTextStyle = getElementTextStyle;
+exports.getTextStyle = getTextStyle;
+exports.setTextStyle = setTextStyle;
+
+var _htElementUtils = require("../../../../../../../../utils/htElementUtils");
+
+var _elements = _interopRequireDefault(require("./elements"));
+
+function getElementType(element) {
+  if ((0, _htElementUtils.isText)(element)) {
+    return 'text';
+  } else if ((0, _htElementUtils.isGroup)(element)) {
+    return 'groupTitle';
+  } else if ((0, _htElementUtils.isNode)(element)) {
+    return 'nodeTag';
+  } else if ((0, _htElementUtils.isEdge)(element)) {
+    return 'edgeTag';
+  } else if ((0, _htElementUtils.isLayer)(element)) {
+    return 'layerTitle';
+  }
+
+  return null;
+}
+
+function getElementTextStyle(element) {
+  var type = getElementType(element);
+  var handler = _elements["default"][type];
+
+  if (handler) {
+    return handler.getTextStyle(element);
+  }
+
+  return null;
+}
+
+function getTextStyle(htSelection) {
+  if (htSelection.length === 1) {
+    var element = htSelection[0];
+    return getElementTextStyle(element);
+  } // 多选时值相同返回？
+
+
+  return null;
+}
+
+function setTextStyle(element, style) {
+  var type = getElementType(element);
+  var handler = _elements["default"][type];
+
+  if (handler) {
+    handler.setTextStyle(element, style);
+  }
+}

package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _globalTag = require("./globalTag");
+
+var _excluded = ["Component"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function GlobalTagStyleSetting(props) {
+  var topo = props.topo;
+  var Component = props.Component,
+      widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  var values = (0, _globalTag.useValues)(topo);
+  var setStyle = (0, _react.useMemo)(function () {
+    return function (style) {
+      return (0, _globalTag.setGlobalTagStyle)(topo, style);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
+    style: values,
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+var _default = GlobalTagStyleSetting;
+exports["default"] = _default;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.setGlobalTagStyle = void 0;
+exports.setStyle = setStyle;
+exports.useValues = useValues;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var defaultStyle = {
+  color: '#AFB9C2',
+  fontFamily: '微软雅黑'
+};
+
+function useValues(topo) {
+  var displayConfigState = topo.store.useModelState('displayConfig');
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  return {
+    color: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.color) || defaultStyle.color,
+    fontFamily: (nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontFamily) || defaultStyle.fontFamily,
+    fontSize: nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.fontSize
+  };
+}
+
+var setGlobalTagStyle = function setGlobalTagStyle(topo, styleData) {
+  var _topo$store$getModel = topo.store.getModel('displayConfig'),
+      displayConfigState = _topo$store$getModel[0],
+      displayConfigDispatchers = _topo$store$getModel[1];
+
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  var globalNodeLabelStyle = (0, _extends2["default"])({}, nodeLabelStyle, styleData);
+  topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+  var globalEdgeTagStyle = (0, _extends2["default"])({}, defaultEdgeLabelStyle, styleData);
+  topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+  displayConfigDispatchers.update({
+    nodeLabelStyle: globalNodeLabelStyle,
+    defaultEdgeLabelStyle: globalEdgeTagStyle
+  });
+};
+
+exports.setGlobalTagStyle = setGlobalTagStyle;
+
+function setStyle() {}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ElementTextStyleSetting = _interopRequireDefault(require("./ElementTextStyleSetting/ElementTextStyleSetting"));
+
+var _GlobalTagStyleSetting = _interopRequireDefault(require("./GlobalTagStyleSetting/GlobalTagStyleSetting"));
+
+function textStyleSettingRouter(Component, options) {
+  return function TextStyleSettingButton(props) {
+    var topo = props.topo;
+    var selection = topo.selectionManager.useHtSelection();
+    var Widget = !selection.length ? _GlobalTagStyleSetting["default"] : _ElementTextStyleSetting["default"];
+    return /*#__PURE__*/_react["default"].createElement(Widget, (0, _extends2["default"])({
+      Component: Component
+    }, props));
+  };
+}
+
+var _default = textStyleSettingRouter;
+exports["default"] = _default;

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

@@ -5,15 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = PropertyView;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Settings = _interopRequireDefault(require("./Settings"));
+var _react = _interopRequireDefault(require("react"));
+
+var _CloseablePanel = _interopRequireDefault(require("./CloseablePanel"));
 
 var _OpenPropertyPanelListener = _interopRequireDefault(require("./OpenPropertyPanelListener"));
 
-var _CloseablePanel = _interopRequireDefault(require("./CloseablePanel"));
+var _Settings = _interopRequireDefault(require("./Settings"));
 
 var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
 
@@ -41,6 +41,10 @@ function PropertyView(props) {
   }
 
   var renderContent = function renderContent() {
+    if (!propertyPanelVisible) {
+      return null;
+    }
+
     return /*#__PURE__*/_react["default"].createElement(_OpenPropertyPanelListener["default"], {
       topo: topo
     }, /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
@@ -61,5 +65,7 @@ function PropertyView(props) {
         propertyPanelVisible: false
       });
     }
-  }, renderContent()));
+  }, /*#__PURE__*/_react["default"].createElement(_OpenPropertyPanelListener["default"], {
+    topo: topo
+  }, renderContent())));
 }

package/lib/core/editor/components/settings/common/text/fontStyleUtil.js

@@ -12,7 +12,8 @@ var fontStyleUtil = {
     var arr = font.trim().split(' ');
     var bold = font.indexOf('bold') > -1;
     var italic = font.indexOf('italic') > -1;
-    var fontFamily, fontSize;
+    var fontFamily;
+    var fontSize;
 
     if (arr.length) {
       fontFamily = arr[arr.length - 1];
@@ -33,15 +34,15 @@ var fontStyleUtil = {
   build: function build(style) {
     var font = '';
 
-    if (style.font.bold) {
+    if (style.bold) {
       font += 'bold ';
     }
 
-    if (style.font.italic) {
+    if (style.italic) {
       font += 'italic ';
     }
 
-    return "" + font + style.font.fontSize + "px " + style.font.fontFamily;
+    return "" + font + style.fontSize + "px " + style.fontFamily;
   },
   getFontStyleMap: function getFontStyleMap(obj, prefix) {
     var map = {};

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

@@ -56,7 +56,7 @@ function TextPropertyView(props) {
 
         _onChange('styleMap.label.color', value.color, newValues);
 
-        var font = _fontStyleUtil["default"].build(value);
+        var font = _fontStyleUtil["default"].build(value.font);
 
         _onChange('styleMap.text.font', font, newValues);
 

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.31" === 'string' ? "6.0.0-alpha.31" : null;
+var version = typeof "6.0.0-alpha.32" === 'string' ? "6.0.0-alpha.32" : 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.31",
+  "version": "6.0.0-alpha.32",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -115,6 +115,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.31/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.32/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }