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

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

@@ -1,4 +1,4 @@
-import _Input from "@alifd/next/es/input";
+import _NumberPicker from "@alifd/next/es/number-picker";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useState, useEffect } from 'react';
@@ -51,27 +51,13 @@ function NodeAlignWidget(props) {
   };
 
   var leftInputChange = function leftInputChange(v) {
-    if (v * 1 < 0) {
-      setLeftInputVal(0);
-    } else if (v * 1 > 10000) {
-      setLeftInputVal(10000);
-    } else {
-      setLeftInputVal(v);
-    }
-
-    setSpace('v', leftInputVal);
+    setLeftInputVal(v);
+    setSpace('h', v);
   };
 
   var rightInputChange = function rightInputChange(v) {
-    if (v * 1 < 0) {
-      setRightInputVal(0);
-    } else if (v * 1 > 10000) {
-      setRightInputVal(10000);
-    } else {
-      setRightInputVal(v);
-    }
-
-    setSpace('h', rightInputVal);
+    setRightInputVal(v);
+    setSpace('v', v);
   };
 
   useEffect(function () {
@@ -82,10 +68,17 @@ function NodeAlignWidget(props) {
       });
       setDisabled(nodes.length <= 1);
       getClickType('none');
+      setLeftInputVal();
+      setRightInputVal();
     }
   }, [graphLoaded, selection]);
 
   var getClickType = function getClickType(type) {
+    if (leftInputVal || rightInputVal) {
+      setLeftInputVal();
+      setRightInputVal();
+    }
+
     setLeftDisable(true);
     setRightDisable(true);
 
@@ -116,23 +109,25 @@ function NodeAlignWidget(props) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlignSetting, {
     topo: topo,
     getClickType: getClickType
-  }), /*#__PURE__*/React.createElement(_Input, {
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
     disabled: leftDisable,
     size: "small",
+    hasTrigger: false,
     placeholder: "\u591A\u4E2A\u503C",
     className: styles.leftInput,
     value: leftInputVal,
-    htmlType: "number",
-    maxLength: 5,
+    min: 0,
+    max: 10000,
     onChange: leftInputChange
-  }), /*#__PURE__*/React.createElement(_Input, {
+  }), /*#__PURE__*/React.createElement(_NumberPicker, {
     disabled: rightDisable,
     size: "small",
+    hasTrigger: false,
     placeholder: "\u591A\u4E2A\u503C",
     className: styles.rightInput,
     value: rightInputVal,
-    htmlType: "number",
-    maxLength: 5,
+    min: 0,
+    max: 10000,
     onChange: rightInputChange
   }))));
 }

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -1,12 +1,28 @@
 .leftInput{
-  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
-  background-position: right center;
-  width: 100px;
+  width: 100px !important;
   margin-right: 10px;
   margin-left: 5px;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_disable.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+  }
 }
 .rightInput{
-  width: 100px;
-  background: url('/img/topo/editor/toolbar/对齐/Disable.svg')no-repeat 5px center;
-  background-position: right center;
+  width: 100px !important;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距_disable.svg')no-repeat 5px center !important;
+      background-position: right center !important;
+    }
+  }
 }

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

@@ -1,12 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from "react"; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
+import React, { useEffect, useState } from 'react'; // import BatchSetNodeSize from "../../../settings/propertyViews/view/BatchSetNodeSize";
 
 import BatchSetNodeSize from "../../../settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize";
 import NodeSizeInput from "../../../settings/common/NodeSizeInput/NodeSizeInput";
 import useSettingRuntimeState from "../../../settings/useSettingRuntimeState";
 import WidgetBox from "../WidgetBox";
-import BoxBackgroundSetting from "./BoxBackgroundSetting";
 import styles from "./NodeSizeButton.module.scss";
 import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
 /**
@@ -29,10 +28,15 @@ function NodeSizeButton(props) {
       setSize = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useHtSelection();
+  var selection = topo.selectionManager.useSelection();
   var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
-    var nodes = selection.filter(function (ele) {
+    var elements = selection.map(function (item) {
+      return item.id;
+    }).map(function (id) {
+      return topo.getDataModel().getDataById(id);
+    });
+    var nodes = elements.filter(function (ele) {
       return isGroup(ele) || isNode(ele);
     });
 
@@ -40,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 {
@@ -57,12 +62,11 @@ function NodeSizeButton(props) {
   var _onChange = function onChange(prop) {
     var name = prop.name,
         value = prop.value;
-    var gv = topo.view.topoClient.getGraphView();
     var element = topo.getSelectionModel().getFirstData();
 
-    if (name === "width") {
+    if (name === 'width') {
       element.setWidth(value);
-    } else if (name === "height") {
+    } else if (name === 'height') {
       element.setHeight(value);
     }
   };
@@ -106,12 +110,12 @@ function NodeSizeButton(props) {
       topo.historyManager.beginTransaction();
 
       _onChange({
-        name: "width",
+        name: 'width',
         value: size.width
       });
 
       _onChange({
-        name: "height",
+        name: 'height',
         value: size.height
       });
 

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,24 +12,38 @@ 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),
-      active = _useState[0],
-      setActive = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
 
-  var button = /*#__PURE__*/React.createElement(ButtonBox, {
-    active: active,
+  var button = /*#__PURE__*/React.createElement(ButtonBox, _extends({
+    active: visible,
     disabled: disabled,
     showArrow: showArrow
-  }, trigger);
+  }, buttonBoxProps), trigger);
+
+  var renderContent = function renderContent() {
+    if (!visible) {
+      return /*#__PURE__*/React.createElement("div", null);
+    }
+
+    if (showContainer) {
+      return /*#__PURE__*/React.createElement(PopupCard, null, children);
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/React.createElement(_Dropdown, {
-    visible: active,
+    visible: visible,
     disabled: disabled,
     trigger: button,
     triggerType: "click",
-    onVisibleChange: setActive
-  }, !showContainer ? children : /*#__PURE__*/React.createElement(PopupCard, null, children));
+    onVisibleChange: setVisible
+  }, renderContent());
 }
 
 DropdownButton.propTypes = {

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

@@ -6,18 +6,26 @@ import DropdownButton from "./DropdownButton";
 function DropdownMenu(props) {
   var value = props.value,
       children = props.children,
+      multiple = props.multiple,
       onChange = props.onChange,
       valueRender = props.valueRender;
   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: handleChange
+  }, children);
   return /*#__PURE__*/React.createElement(DropdownButton, {
     trigger: valueDisplay,
     showContainer: false
-  }, /*#__PURE__*/React.createElement(_Menu, {
-    selectMode: "single",
-    selectedKeys: selectedKeys,
-    onSelect: onChange
-  }, children));
+  }, multiple ? /*#__PURE__*/React.createElement("div", null, menu) : menu);
 }
 
 DropdownButton.propTypes = {

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

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,17 @@
+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) {
+  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));
+  };
+}
+
+export default textStyleSettingRouter;

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

@@ -1,13 +1,16 @@
 import _ConfigProvider from "@alifd/next/es/config-provider";
 import _Icon from "@alifd/next/es/icon";
 import React from 'react';
+import styles from "./CloseablePanel.module.scss";
 
 function CloseablePanel(props) {
   var prefix = props.prefix,
       title = props.title,
       onClose = props.onClose,
       children = props.children;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.panel
+  }, /*#__PURE__*/React.createElement("div", {
     className: prefix + "drawer-header",
     role: "heading",
     "aria-level": "1"
@@ -19,7 +22,9 @@ function CloseablePanel(props) {
   }, /*#__PURE__*/React.createElement(_Icon, {
     type: "close",
     className: "next-drawer-close-icon"
-  }))), /*#__PURE__*/React.createElement("div", null, children));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, children));
 }
 
 CloseablePanel.defaultProps = {

package/es/core/editor/components/settings/CloseablePanel.module.scss

@@ -0,0 +1,9 @@
+.panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+.body {
+  flex: 1;
+}

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

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

package/es/core/editor/components/settings/common/AlignSetting/index.js

@@ -13,8 +13,7 @@ export default function AlignSetting(props) {
       return !isLayer(ele) && !isEdge(ele);
     }); // console.info("element--selectList", element, selectList);
 
-    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes); // topo.view.topoClient.htTopoClient.setElementsSpace(nodes,'h',300)
-
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
     topo.historyManager.endTransaction();
   };
 

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

@@ -8,7 +8,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];
@@ -29,15 +30,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 = {};