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

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/EmptySetting.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/edgeTagSetting.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/globalTag.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+var defaultStyle = {
+  color: '#AFB9C2',
+  fontFamily: '微软雅黑'
+};
+export 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
+  };
+}
+export 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 = _extends({}, nodeLabelStyle, styleData);
+
+  topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+
+  var globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, styleData);
+
+  topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+  displayConfigDispatchers.update({
+    nodeLabelStyle: globalNodeLabelStyle,
+    defaultEdgeLabelStyle: globalEdgeTagStyle
+  });
+};
+export function setStyle() {}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/nodeTagSetting.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/text.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/useFontStyleSetting.js

@@ -1,42 +1,63 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { isText } from "../../../../../utils/htElementDataUtil";
 import { isGroup, isLayer, isNode } from "../../../../../utils/htElementUtils";
+import * as globalTagSetting from "./textStyleSetting/globalTag";
+import * as EmptySetting from "./textStyleSetting/EmptySetting"; // 文本
 
-function useFontStyleSetting(props) {
-  var topo = props.topo;
-  var selectionElements = topo.selectionManager.useHtSelection();
-  var buttonEnabled = true; // 全局配置
+function getElementType(element) {
+  if (isNode(element)) {
+    return 'nodeTag';
+  } else if (isGroup(element)) {
+    return 'group';
+  } else if (isText(element)) {
+    return 'text';
+  } else if (isLayer(element)) {
+    return 'layer';
+  }
+
+  return null;
+}
+
+function getType(selectionElements) {
+  if (!selectionElements.length) {
+    return 'globalTag';
+  } else if (selectionElements.length === 1) {
+    var element = selectionElements[0];
+    return getElementType(element);
+  }
 
-  var _topo$store$useModel = topo.store.useModel('displayConfig'),
-      displayConfigState = _topo$store$useModel[0],
-      displayConfigDispatchers = _topo$store$useModel[1];
+  return null;
+}
 
-  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
-      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+var useValuesHookMap = {
+  globalTag: globalTagSetting.useValues,
+  empty: EmptySetting.useValues
+};
 
-  var setGlobalTagStyle = function setGlobalTagStyle(styleData) {
-    var globalNodeLabelStyle = _extends({}, nodeLabelStyle, styleData);
+function useValues(topo, selection) {
+  var type = getType(selection);
+  var useValuesHandle = useValuesHookMap[type] || useValuesHookMap.empty;
+  var values = useValuesHandle(topo, selection);
+  return values;
+}
 
-    topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+var elementSetStyleMap = {};
 
-    var globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, styleData);
+function useFontStyleSetting(props) {
+  var topo = props.topo;
+  var selection = topo.selectionManager.useHtSelection();
+  var buttonEnabled = true; // const values = useValues(topo, selection)
 
-    topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
-    displayConfigDispatchers.update({
-      nodeLabelStyle: globalNodeLabelStyle,
-      defaultEdgeLabelStyle: globalEdgeTagStyle
-    });
-  };
+  var values = {};
 
   var setStyle = function setStyle(styleData) {
     topo.historyManager.beginTransaction(); // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
 
-    if (!selectionElements.length) {
-      setGlobalTagStyle(styleData);
+    if (!selection.length) {
+      globalTagSetting.setGlobalTagStyle(topo, styleData);
     } else {
-      selectionElements.forEach(function (element) {
-        if (isNode(element)) {} else if (isGroup(element)) {} else if (isText(element)) {} else if (isLayer(element)) {}
+      selection.forEach(function (element) {
+        var elementType = getElementType(element);
       });
     }
 
@@ -44,7 +65,9 @@ function useFontStyleSetting(props) {
   };
 
   return {
+    selection: selection,
     buttonEnabled: buttonEnabled,
+    values: values,
     setStyle: setStyle
   };
 }

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import useFontStyleSetting from "../hooks/useFontStyleSetting";
+import React, { useState, useEffect } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
 
 function FontFamilySelect(props) {
@@ -8,7 +8,14 @@ function FontFamilySelect(props) {
       onChange = props.onChange;
   var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
+    value: value || '',
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 48
+        }
+      }, val || '微软雅黑');
+    },
     onChange: onChange
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
@@ -23,28 +30,21 @@ function FontFamilySelect(props) {
 
 function FontFamilyWidget(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
-
-  var _useState = useState('微软雅黑'),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var fontStyleSetting = useFontStyleSetting({
-    topo: topo
-  });
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u5B57\u4F53",
     tooltip: "\u5B57\u4F53",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(FontFamilySelect, {
-    value: value,
+    value: style.fontFamily,
     onChange: function onChange(val) {
-      setValue(val);
-      fontStyleSetting.setStyle({
+      setStyle({
         fontFamily: val
       });
     }
   }));
 }
 
-export default FontFamilyWidget;
+export default textStyleSettingRouter(FontFamilyWidget);

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

@@ -1,15 +1,24 @@
-import React, { useState } from 'react';
-import useFontStyleSetting from "../hooks/useFontStyleSetting";
+import React, { useEffect, useState } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
 
 function FontSizeSelect(props) {
   var value = props.value,
-      onChange = props.onChange;
+      _onChange = props.onChange;
   var items = [9, 10, 11, 12, 14, 16, 18, 20, 24, 30, 36];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
-    onChange: onChange
+    value: "" + (value || ''),
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 18
+        }
+      }, val || 12);
+    },
+    onChange: function onChange(val) {
+      return _onChange(parseInt(val, 10));
+    }
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
       key: item
@@ -19,27 +28,20 @@ function FontSizeSelect(props) {
 
 function FontSizeWidget(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
-  var fontStyleSetting = useFontStyleSetting({
-    topo: topo
-  });
-
-  var _useState = useState(12),
-      fontSize = _useState[0],
-      setFontSize = _useState[1];
-
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u5B57\u53F7",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(FontSizeSelect, {
-    value: fontSize,
+    value: style.fontSize,
     onChange: function onChange(val) {
-      setFontSize(val);
-      fontStyleSetting.setStyle({
+      setStyle({
         fontSize: val
       });
     }
   }));
 }
 
-export default FontSizeWidget;
+export default textStyleSettingRouter(FontSizeWidget);

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

@@ -1,8 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect } from 'react';
-import { isText } from "../../../../../utils/htElementUtils";
-import fontStyleUtil from "../../settings/common/text/fontStyleUtil";
-import useFontStyleSetting from "../hooks/useFontStyleSetting";
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
 var items = [{
   key: 'bold',
@@ -18,65 +17,63 @@ var items = [{
   icon: 'Underline'
 }];
 
-function getTextFontStyle(textElement) {
-  var underline = textElement.s('text.decoration') === 'underline';
-  var fontStyle = fontStyleUtil.toMap(textElement.s('text.font'));
-  return {
-    underline: underline,
-    bold: fontStyle.bold,
-    italic: fontStyle.italic
-  };
+function buildValue(obj) {
+  return Object.keys(obj).filter(function (key) {
+    return !!obj[key];
+  });
+}
+
+function formatStyle(arr) {
+  return items.map(function (item) {
+    return item.key;
+  }).reduce(function (map, name) {
+    var _extends2;
+
+    return _extends({}, map, (_extends2 = {}, _extends2[name] = arr.includes(name), _extends2));
+  }, {});
 }
 
 function FontStyleButton(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
+
+  var _useState = useState(false),
+      disabled = _useState[0],
+      setDisabled = _useState[1];
 
-  var _useState = useState(['bold']),
-      value = _useState[0],
-      setValue = _useState[1];
+  var bold = style.bold,
+      italic = style.italic,
+      underline = style.underline;
 
-  var _useState2 = useState(true),
-      disabled = _useState2[0],
-      setDisabled = _useState2[1]; // 选中的元素
+  var _useState2 = useState(buildValue({
+    bold: bold,
+    italic: italic,
+    underline: underline
+  })),
+      value = _useState2[0],
+      setValue = _useState2[1]; // 选中的元素
 
 
   var selection = topo.selectionManager.useHtSelection();
-  var fontStyleSetting = useFontStyleSetting({
-    topo: topo
-  });
   useEffect(function () {
     setDisabled(false);
-    var fontObj = {};
-
-    if (selection.length === 1) {
-      var element = selection[0];
-
-      if (isText(element)) {
-        fontObj = getTextFontStyle(element);
-      }
-    }
-
-    var newValue = Object.keys(fontObj).reduce(function (result, key) {
-      if (fontObj[key]) {
-        return [].concat(result, [key]);
-      }
-
-      return result;
-    }, []);
-    setValue(newValue);
   }, [selection]);
+  useEffect(function () {
+    setValue(buildValue({
+      bold: bold,
+      italic: italic,
+      underline: underline
+    }));
+  }, [bold, italic, underline]);
   /**
    * 
    * @param {Array} selectedKeys 
    */
 
   var handleChange = function handleChange(selectedKeys) {
-    setValue(selectedKeys);
-    var style = {
-      fontBold: selectedKeys.includes('bold')
-    };
-    fontStyleSetting.setStyle(style);
+    setStyle(formatStyle(selectedKeys));
   };
 
   return /*#__PURE__*/React.createElement(WidgetBox, {
@@ -108,4 +105,4 @@ function FontStyleButton(props) {
   })));
 }
 
-export default FontStyleButton;
+export default textStyleSettingRouter(FontStyleButton);

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

@@ -44,9 +44,10 @@ function NodeSizeButton(props) {
       setDisabled(false);
 
       if (selection.length === 1) {
+        var element = nodes[0];
         setSize({
-          width: selection[0].width,
-          height: selection[0].height
+          width: element.getWidth(),
+          height: element.getHeight()
         });
       }
     } else {

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

@@ -1,4 +1,5 @@
 import _Dropdown from "@alifd/next/es/dropdown";
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ButtonBox from "./ButtonBox";
@@ -11,17 +12,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 = useState(false),
       visible = _useState[0],
       setVisible = _useState[1];
 
-  var button = /*#__PURE__*/React.createElement(ButtonBox, {
+  var button = /*#__PURE__*/React.createElement(ButtonBox, _extends({
     active: visible,
     disabled: disabled,
     showArrow: showArrow
-  }, trigger);
+  }, buttonBoxProps), trigger);
 
   var renderContent = function renderContent() {
     if (!visible) {

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

@@ -12,10 +12,15 @@ function DropdownMenu(props) {
   var selectedKeys = Array.isArray(value) ? value : [value];
   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.createElement(_Menu, {
     selectMode: selectMode,
     selectedKeys: selectedKeys,
-    onSelect: onChange
+    onSelect: handleChange
   }, children);
   return /*#__PURE__*/React.createElement(DropdownButton, {
     trigger: valueDisplay,

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["Component"];
+import React, { useMemo, useState } from 'react';
+import { getTextStyle, setTextStyle } from "./textStyleUtil";
+
+function ElementTextStyleSetting(props) {
+  var topo = props.topo;
+
+  var Component = props.Component,
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded); // 选中的元素
+
+
+  var selection = topo.selectionManager.useSelection();
+  var htSelection = useMemo(function () {
+    if (!selection.length) {
+      return [];
+    }
+
+    return topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+  }, [selection, topo]);
+  var value = useMemo(function () {
+    return getTextStyle(htSelection) || {};
+  }, [htSelection, topo]);
+  var setStyle = useMemo(function () {
+    return function (style) {
+      htSelection.forEach(function (element) {
+        setTextStyle(element, style);
+      });
+    };
+  }, [htSelection]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    disabled: false,
+    htSelection: htSelection,
+    style: value,
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+export default ElementTextStyleSetting;

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

@@ -0,0 +1,13 @@
+export function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+export function setTextStyle(element, style) {}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

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

@@ -0,0 +1,13 @@
+export function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+export function setTextStyle(element, style) {}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

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

@@ -0,0 +1,12 @@
+import text from "./text";
+import nodeTag from "./nodeTag";
+import edgeTag from "./edgeTag";
+import groupTitle from "./groupTitle";
+import layerTitle from "./layerTitle";
+export default {
+  nodeTag: nodeTag,
+  edgeTag: edgeTag,
+  text: text,
+  groupTitle: groupTitle,
+  layerTitle: layerTitle
+};

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

@@ -0,0 +1,13 @@
+export function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+export function setTextStyle(element, style) {}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

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

@@ -0,0 +1,13 @@
+export function getTextStyle(element) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}
+export function setTextStyle(element, style) {}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+export function getTextStyle(element) {
+  var underline = element.s('text.decoration') === 'underline';
+  return _extends({
+    color: null,
+    underline: underline
+  }, fontStyleUtil.toMap(element.s('text.font')));
+}
+export function setTextStyle(element, style) {
+  var underline = style.underline;
+
+  if ('underline' in style) {
+    element.s('text.decoration', underline ? 'underline' : null);
+  }
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  element.s('text.font', fontStr);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

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

@@ -0,0 +1,46 @@
+import { isGroup, isLayer, isNode, isText, isEdge } from "../../../../../../../../utils/htElementUtils";
+import typeMap from "./elements";
+
+function getElementType(element) {
+  if (isText(element)) {
+    return 'text';
+  } else if (isGroup(element)) {
+    return 'groupTitle';
+  } else if (isNode(element)) {
+    return 'nodeTag';
+  } else if (isEdge(element)) {
+    return 'edgeTag';
+  } else if (isLayer(element)) {
+    return 'layerTitle';
+  }
+
+  return null;
+}
+
+export function getElementTextStyle(element) {
+  var type = getElementType(element);
+  var handler = typeMap[type];
+
+  if (handler) {
+    return handler.getTextStyle(element);
+  }
+
+  return null;
+}
+export function getTextStyle(htSelection) {
+  if (htSelection.length === 1) {
+    var element = htSelection[0];
+    return getElementTextStyle(element);
+  } // 多选时值相同返回？
+
+
+  return null;
+}
+export function setTextStyle(element, style) {
+  var type = getElementType(element);
+  var handler = typeMap[type];
+
+  if (handler) {
+    handler.setTextStyle(element, style);
+  }
+}