@riil-frontend/component-topology 6.0.0-alpha.4 → 6.0.0-alpha.41

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

@@ -0,0 +1,33 @@
+.leftInput{
+  width: 100px !important;
+  margin: 0px 10px 10px 9px;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
+      background-position: 81px center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/水平间距_disable.svg')no-repeat 5px center !important;
+      background-position: 81px center !important;
+    }
+    .next-input.next-small input{
+      height: calc(30px - 1px * 2);
+    }
+  }
+}
+.rightInput{
+  width: 100px !important;
+  :global{
+    input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;
+      background-position: 82px center !important;
+    }
+    .next-disabled input{
+      background: url('/img/topo/editor/toolbar/对齐/垂直间距_disable.svg')no-repeat 5px center !important;
+      background-position: 82px center !important;
+    }
+    .next-input.next-small input{
+      height: calc(30px - 1px * 2);
+    }
+  }
+}

package/es/core/editor/components/Toolbar/widgets/NodeImageButton/BoxBackgroundSetting.js

@@ -1,8 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from "react";
+import TopoIconSelect from "../IconSelect";
+import { useNodeIcons } from "../../../../../common/icons/useIcons";
 
-function BoxBackgroundSetting(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+function NodeImageList(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  useEffect(function () {}, []);
+  var icons = useNodeIcons(topo);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TopoIconSelect, {
+    value: value,
+    iconList: icons,
+    onChange: onChange
+  }));
 }
 
-export default BoxBackgroundSetting;
+export default NodeImageList;

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

@@ -1,13 +1,14 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+import { isGroup, isNode } from "../../../../../../utils/htElementUtils";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
 /**
  * 替换图片设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeImageButton(props) {
@@ -17,13 +18,43 @@ function NodeImageButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
 
+  var _useState2 = useState(),
+      imgVal = _useState2[0],
+      setImgVal = _useState2[1]; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+
+  var selection = topo.selectionManager.useHtSelection();
   useEffect(function () {
-    setDisabled(false);
+    var nodes = selection.filter(function (ele) {
+      return isGroup(ele) || isNode(ele);
+    });
+
+    if (nodes.length > 0) {
+      setDisabled(false);
+      setImgVal(nodes[0].getImage());
+    } else {
+      setDisabled(true);
+    }
   }, [selection]);
+
+  var onChange = function onChange(prop) {
+    console.log("onChange-prop", prop, selection); //const { name, value } = prop;
+    // const gv = topo.view.topoClient.getGraphView();
+    //const element = topo.getSelectionModel().getFirstData();
+
+    var elements = topo.getSelectionModel();
+    console.log("onChange-elements", elements);
+    elements.each(function (element) {
+      element.setImage(prop);
+    }); // selection.map((element) => {
+    //   element.setImage(prop);
+    // });
+    // if (name === "image") {
+    // }
+  };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u66FF\u6362\u56FE\u7247/Disable.svg",
     alt: ""
@@ -34,12 +65,15 @@ function NodeImageButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u66FF\u6362\u56FE\u7247",
     tooltip: "\u66FF\u6362\u56FE\u7247",
+    disabled: disabled,
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement(BoxBackgroundSetting, {
-    topo: topo
+    topo: topo,
+    onChange: onChange,
+    value: imgVal
   })));
 }
 

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

@@ -1,13 +1,17 @@
 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";
 /**
  * 图片尺寸设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeSizeButton(props) {
@@ -17,25 +21,106 @@ function NodeSizeButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
+
+  var _useState2 = useState(),
+      size = _useState2[0],
+      setSize = _useState2[1]; // 选中的元素
 
 
   var selection = topo.selectionManager.useSelection();
+  var settingRuntimeState = useSettingRuntimeState();
   useEffect(function () {
-    setDisabled(false);
+    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);
+    });
+
+    if (nodes.length > 0) {
+      setDisabled(false);
+
+      if (selection.length === 1) {
+        var element = nodes[0];
+        setSize({
+          width: element.getWidth(),
+          height: element.getHeight()
+        });
+      }
+    } else {
+      setDisabled(true);
+      setSize({
+        width: null,
+        height: null
+      });
+    }
   }, [selection]);
+
+  var _onChange = function onChange(prop) {
+    var name = prop.name,
+        value = prop.value;
+    var element = topo.getSelectionModel().getFirstData();
+
+    if (name === 'width') {
+      element.setWidth(value);
+    } else if (name === 'height') {
+      element.setHeight(value);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
+    disabled: disabled,
     tooltip: "\u56FE\u7247\u5C3A\u5BF8",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 136
+    className: styles.toolbarNodeSizeSetting
+  }, selection.length > 1 ? /*#__PURE__*/React.createElement(BatchSetNodeSize, {
+    topo: topo // size="small"
+    ,
+    value: size,
+    disabled: disabled,
+    showLabel: false,
+    numberPickerProps: {
+      hasTrigger: false,
+      placeholder: '-'
+    } // onChange={(size) => {
+    //   topo.historyManager.beginTransaction();
+    //   onChange({ name: "width", value: size.width });
+    //   onChange({ name: "height", value: size.height });
+    //   topo.historyManager.endTransaction();
+    // }}
+
+  }) : /*#__PURE__*/React.createElement(NodeSizeInput, {
+    topo: topo // size="small"
+    ,
+    value: size,
+    disabled: disabled,
+    showLabel: false,
+    hasTrigger: false,
+    numberPickerProps: {
+      hasTrigger: false,
+      placeholder: '-'
+    },
+    settingRuntimeState: settingRuntimeState,
+    onChange: function onChange(size) {
+      topo.historyManager.beginTransaction();
+
+      _onChange({
+        name: 'width',
+        value: size.width
+      });
+
+      _onChange({
+        name: 'height',
+        value: size.height
+      });
+
+      topo.historyManager.endTransaction();
     }
-  }, /*#__PURE__*/React.createElement(BatchSetNodeSize, {
-    topo: topo,
-    size: "small",
-    showLabel: false
   })));
 }
 

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

@@ -0,0 +1,28 @@
+@import '~@alifd/next/variables.scss';
+
+.toolbarNodeSizeSetting {
+  width: 144px;
+
+  // 图片尺寸输入框
+  :global {
+    .#{$css-prefix}input-inner {
+      padding-right: 8px;
+    }
+
+    .#{$css-prefix}input.#{$css-prefix}medium {
+      height: 24px;
+    }
+
+    .#{$css-prefix}input {
+      border: none;
+
+      &:hover:not(.#{$css-prefix}disabled) {
+        background: #F2F7FD;
+      }
+    }
+
+    .#{$css-prefix}input.#{$css-prefix}medium input {
+      height: 24px;
+    }
+  }
+}

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

@@ -1,9 +1,10 @@
+import _Balloon from "@alifd/next/es/balloon";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import _Balloon from "@alifd/next/es/balloon";
-var _excluded = ["active", "disabled", "children"];
-import classNames from 'classnames';
+var _excluded = ["label", "showLabel", "tooltip", "disabled", "children"];
 import React from 'react';
+import classnames from 'classnames';
+import ButtonBox from "./components/ButtonBox";
 import styles from "./WidgetBox.module.scss";
 
 function WidgetBox(props) {
@@ -11,15 +12,16 @@ function WidgetBox(props) {
       showLabel = props.showLabel,
       tooltip = props.tooltip,
       disabled = props.disabled,
-      children = props.children;
-  var button = /*#__PURE__*/React.createElement("button", {
+      children = props.children,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var button = /*#__PURE__*/React.createElement("div", _extends({
     disabled: disabled,
-    type: "button",
     className: styles.container
-  }, /*#__PURE__*/React.createElement("div", {
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, children), showLabel !== false && /*#__PURE__*/React.createElement("div", {
-    className: styles.label
+    className: classnames(styles.label, disabled ? styles.disabledLabel : styles.normalLabel)
   }, label));
 
   if (!tooltip) {
@@ -28,22 +30,13 @@ function WidgetBox(props) {
 
   return /*#__PURE__*/React.createElement(_Balloon.Tooltip, {
     trigger: button,
-    align: "b"
+    align: "b" // 解决遮挡下拉浮层问题
+    ,
+    popupStyle: {
+      zIndex: 1000
+    }
   }, tooltip);
 }
 
-function ButtonBox(props) {
-  var _classNames;
-
-  var active = props.active,
-      disabled = props.disabled,
-      children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames))
-  }, otherProps), children);
-}
-
 WidgetBox.ButtonBox = ButtonBox;
 export default WidgetBox;

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

@@ -8,6 +8,7 @@
   border-width: 0;
   background-color: transparent;
   border-color: transparent;
+  user-select: none;
 
   &[disabled] {
     cursor: not-allowed;
@@ -43,6 +44,14 @@
   text-align: center;
 }
 
+.disabledLabel {
+  color: #C9CED2;
+}
+
+.normalLabel {
+  color: #78849C;
+}
+
 .ButtonBox {
   height: 24px;
   display: flex;
@@ -56,9 +65,10 @@
     background: rgba(76, 137, 255, 0.1);
     border-radius: 4px;
   }
+
   &.ButtonBoxDisabled:hover {
     background: transparent;
     cursor: not-allowed;
   }
-  
+
 }

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _Icon from "@alifd/next/es/icon";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["active", "disabled", "showArrow", "children"];
+var _excluded = ["active", "disabled", "showArrow", "children", "onClick"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -14,14 +14,16 @@ function ButtonBox(props) {
       disabled = props.disabled,
       showArrow = props.showArrow,
       children = props.children,
+      onClick = props.onClick,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames))
+    className: classNames(styles.ButtonBox, (_classNames = {}, _classNames[styles.ButtonBoxActive] = active, _classNames[styles.ButtonBoxDisabled] = disabled, _classNames)),
+    onClick: disabled ? undefined : onClick
   }, otherProps), children, showArrow && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", /*#__PURE__*/React.createElement(_Icon, {
     type: "tree_fold_arrow",
     size: "xxs",
-    className: classNames(styles.icon, (_classNames2 = {}, _classNames2[styles.active] = active, _classNames2))
+    className: classNames(styles.icon, (_classNames2 = {}, _classNames2[styles.active] = active, _classNames2[styles.disabled] = disabled, _classNames2))
   })));
 }
 

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

@@ -27,4 +27,7 @@
   &.active {
     transform: rotate(180deg) scale(0.5) !important;
   }
+  &.disabled {
+    color: #C9CED2;
+  }
 }

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";
@@ -6,26 +7,43 @@ import styles from "./DropdownButton.module.scss";
 
 function DropdownButton(props) {
   var trigger = props.trigger,
+      disabled = props.disabled,
       _props$showArrow = props.showArrow,
       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) {
+      return /*#__PURE__*/React.createElement("div", null);
+    }
+
+    if (showContainer) {
+      return /*#__PURE__*/React.createElement(PopupCard, null, children);
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/React.createElement(_Dropdown, {
     visible: visible,
+    disabled: disabled,
     trigger: button,
     triggerType: "click",
     onVisibleChange: setVisible
-  }, !showContainer ? children : /*#__PURE__*/React.createElement(PopupCard, null, children));
+  }, renderContent());
 }
 
 DropdownButton.propTypes = {

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

@@ -6,18 +6,28 @@ import DropdownButton from "./DropdownButton";
 function DropdownMenu(props) {
   var value = props.value,
       children = props.children,
+      multiple = props.multiple,
       onChange = props.onChange,
-      valueRender = props.valueRender;
+      valueRender = props.valueRender,
+      disabled = props.disabled;
   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,
+    disabled: disabled,
     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,49 @@
+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 _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
+  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 () {
+    if (!graphLoaded) {
+      return {};
+    }
+
+    return getTextStyle(htSelection, styleNames, topo) || {};
+  }, [graphLoaded, htSelection, topo]);
+  var setStyle = useMemo(function () {
+    return function (style) {
+      htSelection.forEach(function (element) {
+        setTextStyle(element, style, topo);
+      });
+    };
+  }, [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/colorUtil.js

@@ -0,0 +1,59 @@
+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 parseBackground(colorStr) {
+  var background = parseColor(colorStr);
+  return {
+    background: background,
+    // 背景颜色，格式: {rgba: {}, hex: ''} | null
+    opacity: background ? background.rgb.a : 1 // 背景透明度。值范围 0-1, null，null表示无
+
+  };
+}
+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 === null ? 1 : opacity) + ")";
+}

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

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+export function getTextStyle(element) {
+  var underline = element.a('text.decoration') === 'underline';
+  return _extends({
+    color: parseColor(element.a('topLeftTextColor')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.a('rectFont')), parseBackground(element.a('topLeftColor')));
+}
+export function setTextStyle(element, style) {
+  if ('underline' in style) {}
+
+  if ('color' in style) {
+    element.a('topLeftTextColor', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.a('topLeftColor', formatBackgroundRgbaColor(prevStyle, style));
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  element.a('rectFont', fontStr);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};