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

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

@@ -5,7 +5,6 @@ import WidgetBox from "./WidgetBox";
 import ColorPanel from "../../../../../components/ColorPanel";
 import FontColorRange from "../../../../../components/ColorPanel/components/FontColorRange";
 import styles from "./FontColorButton.module.scss";
-import useFontStyleSetting from "../hooks/useFontStyleSetting";
 
 function FontFamilySelect(props) {
   var value = props.value,
@@ -16,9 +15,6 @@ function FontFamilySelect(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var fontStyleSetting = useFontStyleSetting({
-    topo: topo
-  });
   console.log(topo, 'topo这里需要处理颜色改变的事情');
 
   var backOpacityChange = function backOpacityChange(value) {

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,25 @@ 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({
+      topo.historyManager.beginTransaction();
+      setStyle({
         fontFamily: val
       });
+      topo.historyManager.endTransaction();
     }
   }));
 }
 
-export default FontFamilyWidget;
+export default textStyleSettingRouter(FontFamilyWidget, {
+  names: ['fontFamily']
+});

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,24 @@ 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({
+      topo.historyManager.beginTransaction();
+      setStyle({
         fontSize: val
       });
+      topo.historyManager.endTransaction();
     }
   }));
 }
 
-export default FontSizeWidget;
+export default textStyleSettingRouter(FontSizeWidget, {
+  names: ['fontSize']
+});

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,65 @@ 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);
+    topo.historyManager.beginTransaction();
+    setStyle(formatStyle(selectedKeys));
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/React.createElement(WidgetBox, {
@@ -108,4 +107,6 @@ function FontStyleButton(props) {
   })));
 }
 
-export default FontStyleButton;
+export default textStyleSettingRouter(FontStyleButton, {
+  names: ['bold', 'italic', 'underline']
+});

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,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["Component", "styleNames"];
+import React, { useMemo, useState } from 'react';
+import { getTextStyle, setTextStyle } from "./textStyleUtil";
+
+function ElementTextStyleSetting(props) {
+  var topo = props.topo;
+
+  var Component = props.Component,
+      styleNames = props.styleNames,
+      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, styleNames) || {};
+  }, [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,69 @@
+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, styleNames) {
+  if (htSelection.length === 1) {
+    var element = htSelection[0];
+    return getElementTextStyle(element);
+  } else if (htSelection.length) {
+    // 多选时值相同返回？
+    var values = htSelection.map(function (element) {
+      return getElementTextStyle(element);
+    }).filter(function (item) {
+      return !!item;
+    });
+
+    if (!values.length) {
+      return null;
+    }
+
+    var value = {};
+    styleNames.forEach(function (styleName) {
+      var val = values[0][styleName];
+      var different = values.filter(function (obj) {
+        return obj[styleName] !== val;
+      });
+
+      if (!different.length) {
+        value[styleName] = val;
+      }
+    });
+    return Object.keys(value).length ? value : null;
+  }
+
+  return null;
+}
+export function setTextStyle(element, style) {
+  var type = getElementType(element);
+  var handler = typeMap[type];
+
+  if (handler) {
+    handler.setTextStyle(element, style);
+  }
+}

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["Component"];
+import React, { useMemo } from 'react';
+import { setGlobalTagStyle, useValues } from "./globalTag";
+
+function GlobalTagStyleSetting(props) {
+  var topo = props.topo;
+
+  var Component = props.Component,
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var values = useValues(topo);
+  var setStyle = useMemo(function () {
+    return function (style) {
+      return setGlobalTagStyle(topo, style);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    style: values,
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+export default GlobalTagStyleSetting;

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/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/widgets/components/textStyleSetting/textStyleSettingRouter.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ElementTextStyleSetting from "./ElementTextStyleSetting/ElementTextStyleSetting";
+import GlobalTagStyleSetting from "./GlobalTagStyleSetting/GlobalTagStyleSetting";
+
+function textStyleSettingRouter(Component, options) {
+  var names = (options === null || options === void 0 ? void 0 : options.names) || [];
+  return function TextStyleSettingButton(props) {
+    var topo = props.topo;
+    var selection = topo.selectionManager.useHtSelection();
+    var Widget = !selection.length ? GlobalTagStyleSetting : ElementTextStyleSetting;
+    return /*#__PURE__*/React.createElement(Widget, _extends({
+      Component: Component
+    }, props, {
+      styleNames: names
+    }));
+  };
+}
+
+export default textStyleSettingRouter;

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
-import Settings from "./Settings";
-import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
+import React from 'react';
 import CloseablePanel from "./CloseablePanel";
+import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
+import Settings from "./Settings";
 import styles from "./Settings.module.scss";
 export default function PropertyView(props) {
   var _classNames;
@@ -28,6 +28,10 @@ export default function PropertyView(props) {
   }
 
   var renderContent = function renderContent() {
+    if (!propertyPanelVisible) {
+      return null;
+    }
+
     return /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
       topo: topo
     }, /*#__PURE__*/React.createElement(Settings, {
@@ -48,5 +52,7 @@ export default function PropertyView(props) {
         propertyPanelVisible: false
       });
     }
-  }, renderContent()));
+  }, /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
+    topo: topo
+  }, renderContent())));
 }