@riil-frontend/component-topology 6.0.0-alpha.2 → 6.0.0-alpha.21

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

@@ -1,13 +1,13 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import BoxBackgroundSetting from "./BoxBackgroundSetting";
 /**
  * 替换图片设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeImageButton(props) {
@@ -17,13 +17,41 @@ 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();
   useEffect(function () {
-    setDisabled(false);
+    console.log("NodeImageButton-selection", selection);
+
+    if (selection && selection.length > 0) {
+      setDisabled(false);
+      setImgVal(selection[0].image);
+    } 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 +62,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";
 /**
  * 图片尺寸设置
- * @param {*} props 
- * @returns 
+ * @param {*} props
+ * @returns
  */
 
 function NodeSizeButton(props) {
@@ -17,25 +21,99 @@ 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);
+    if (selection && selection.length > 0) {
+      console.log("NodeSizeButton-selection", selection);
+      setDisabled(false);
+
+      if (selection.length === 1) {
+        setSize({
+          width: selection[0].width,
+          height: selection[0].height
+        });
+      }
+    } else {
+      setDisabled(true);
+      setSize({
+        width: null,
+        height: null
+      });
+    }
   }, [selection]);
+
+  var _onChange = function onChange(prop) {
+    console.log("onChange-prop", prop);
+    var name = prop.name,
+        value = prop.value;
+    var gv = topo.view.topoClient.getGraphView();
+    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,7 @@
-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';
 import React from 'react';
+import classnames from 'classnames';
+import ButtonBox from "./components/ButtonBox";
 import styles from "./WidgetBox.module.scss";
 
 function WidgetBox(props) {
@@ -12,14 +10,13 @@ function WidgetBox(props) {
       tooltip = props.tooltip,
       disabled = props.disabled,
       children = props.children;
-  var button = /*#__PURE__*/React.createElement("button", {
+  var button = /*#__PURE__*/React.createElement("div", {
     disabled: disabled,
-    type: "button",
     className: styles.container
   }, /*#__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 +25,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,10 +14,12 @@ 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",

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

@@ -6,6 +6,7 @@ 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,
@@ -13,18 +14,20 @@ function DropdownButton(props) {
       children = props.children;
 
   var _useState = useState(false),
-      visible = _useState[0],
-      setVisible = _useState[1];
+      active = _useState[0],
+      setActive = _useState[1];
 
   var button = /*#__PURE__*/React.createElement(ButtonBox, {
-    active: visible,
+    active: active,
+    disabled: disabled,
     showArrow: showArrow
   }, trigger);
   return /*#__PURE__*/React.createElement(_Dropdown, {
-    visible: visible,
+    visible: active,
+    disabled: disabled,
     trigger: button,
     triggerType: "click",
-    onVisibleChange: setVisible
+    onVisibleChange: setActive
   }, !showContainer ? children : /*#__PURE__*/React.createElement(PopupCard, null, children));
 }
 

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

@@ -82,29 +82,6 @@ export default function Settings(props) {
       // autoLayout.layout(layouType, function () {
       //   gv.dm().sm().ss(element);
       // });
-    } else if (name === "groupAlign") {
-      var selectList = [];
-
-      if (selection.length === 1) {
-        // 选择分层
-        if (element instanceof ht.Grid) {
-          // selectList = gv
-          //   .dm()
-          //   .toDatas((d) => d.getHost() === gv.dm().sm().ld())
-          //   .toArray();
-          selectList = element.getChildren().toArray();
-        } // 选择分区
-
-
-        if (element instanceof ht.Group) {
-          selectList = element.getChildren().toArray();
-        }
-      } else {
-        selectList = topo.getSelectionModel().getSelection().toArray();
-      } // console.info("element--selectList", element, selectList);
-
-
-      topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(value, selectList);
     }
   };
 

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

@@ -7,8 +7,7 @@
   top: 0;
   right: 0;
   border-radius: 2px;
-  //border: 1px solid #E6E7EB;
-  //border-left: none;
+  border-left: 1px solid #E6E7EB;
 
   display: flex;
   flex-direction: column;

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

@@ -0,0 +1,76 @@
+import _Button from "@alifd/next/es/button";
+import _Icon from "@alifd/next/es/icon";
+import _Divider from "@alifd/next/es/divider";
+import React, { useState } from "react";
+import styles from "./AlignSetting.module.scss";
+var TREE_LAYOUT_OPTIONS = [{
+  value: "left",
+  label: "左对齐",
+  icon: "tuopu_zuoceduiqi"
+}, {
+  value: "center",
+  label: "水平居中",
+  icon: "tuopu_shuipingjuzhongduiqi"
+}, {
+  value: "right",
+  label: "右对齐",
+  icon: "tuopu_youceduiqi"
+}, {
+  value: "top",
+  label: "靠上对齐",
+  icon: "tuopu_dingbuduiqi"
+}, {
+  value: "middle",
+  label: "垂直居中",
+  icon: "tuopu_chuizhijuzhongduiqi"
+}, {
+  value: "bottom",
+  label: "靠下对齐",
+  icon: "tuopu_dibuduiqi"
+}, {
+  value: "divide"
+}, {
+  value: "distributeHorizontal",
+  label: "横向分布",
+  icon: "tuopu_shuipingdengjianjuduiqi"
+}, {
+  value: "distributeVertical",
+  label: "纵向分布",
+  icon: "tuopu_chuizhidengjianjuduiqi"
+}];
+
+var AlignTypeList = function AlignTypeList(props) {
+  var _props$selected = props.selected,
+      selected = _props$selected === void 0 ? "left" : _props$selected,
+      onChange = props.onChange;
+
+  var _useState = useState(selected),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var handleChange = function handleChange(data) {
+    // console.log("handleChange", data);
+    onChange && onChange(data.value);
+    setValue(data.value); // setValue(data)
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.AlignSetting
+  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
+    return item.value === "divide" ? /*#__PURE__*/React.createElement(_Divider, {
+      key: index,
+      direction: "ver"
+    }) : /*#__PURE__*/React.createElement(_Button, {
+      key: index,
+      className: "" + styles.redioBtn,
+      onClick: function onClick() {
+        handleChange(item);
+      },
+      title: item.label
+    }, /*#__PURE__*/React.createElement(_Icon, {
+      type: item.icon
+    }));
+  }));
+};
+
+export default AlignTypeList;

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

@@ -1,76 +1,22 @@
-import _Button from "@alifd/next/es/button";
-import _Icon from "@alifd/next/es/icon";
-import _Divider from "@alifd/next/es/divider";
-import React, { useState } from "react";
-import styles from "./AlignSetting.module.scss";
-var TREE_LAYOUT_OPTIONS = [{
-  value: "left",
-  label: "左对齐",
-  icon: "tuopu_zuoceduiqi"
-}, {
-  value: "center",
-  label: "水平居中",
-  icon: "tuopu_shuipingjuzhongduiqi"
-}, {
-  value: "right",
-  label: "右对齐",
-  icon: "tuopu_youceduiqi"
-}, {
-  value: "top",
-  label: "靠上对齐",
-  icon: "tuopu_dingbuduiqi"
-}, {
-  value: "middle",
-  label: "垂直居中",
-  icon: "tuopu_chuizhijuzhongduiqi"
-}, {
-  value: "bottom",
-  label: "靠下对齐",
-  icon: "tuopu_dibuduiqi"
-}, {
-  value: "divide"
-}, {
-  value: "distributeHorizontal",
-  label: "横向分布",
-  icon: "tuopu_shuipingdengjianjuduiqi"
-}, {
-  value: "distributeVertical",
-  label: "纵向分布",
-  icon: "tuopu_chuizhidengjianjuduiqi"
-}];
+import React from 'react';
+import { isEdge, isLayer } from "../../../../../../utils/htElementUtils";
+import AlignTypeList from "./AlignTypeList";
+export default function AlignSetting(props) {
+  var topo = props.topo;
 
-var AlignSetting = function AlignSetting(props) {
-  var _props$selected = props.selected,
-      selected = _props$selected === void 0 ? "left" : _props$selected,
-      onChange = props.onChange;
+  var alignOnChange = function alignOnChange(type) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !isLayer(ele) && !isEdge(ele);
+    }); // console.info("element--selectList", element, selectList);
 
-  var _useState = useState(selected),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var handleChange = function handleChange(data) {
-    // console.log("handleChange", data);
-    onChange && onChange(data.value);
-    setValue(data.value); // setValue(data)
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
+    topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.AlignSetting
-  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
-    return item.value === "divide" ? /*#__PURE__*/React.createElement(_Divider, {
-      key: index,
-      direction: "ver"
-    }) : /*#__PURE__*/React.createElement(_Button, {
-      key: index,
-      className: "" + styles.redioBtn,
-      onClick: function onClick() {
-        handleChange(item);
-      },
-      title: item.label
-    }, /*#__PURE__*/React.createElement(_Icon, {
-      type: item.icon
-    }));
-  }));
-};
-
-export default AlignSetting;
+  return /*#__PURE__*/React.createElement(AlignTypeList, {
+    onChange: alignOnChange,
+    selected: "left"
+  });
+}