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

package/lib/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/lib/core/editor/components/Toolbar/widgets/WidgetBox.js

@@ -5,20 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
+var _ButtonBox = _interopRequireDefault(require("./components/ButtonBox"));
 
 var _WidgetBoxModule = _interopRequireDefault(require("./WidgetBox.module.scss"));
 
-var _excluded = ["active", "disabled", "children"];
-
 function WidgetBox(props) {
   var label = props.label,
       showLabel = props.showLabel,
@@ -26,14 +22,13 @@ function WidgetBox(props) {
       disabled = props.disabled,
       children = props.children;
 
-  var button = /*#__PURE__*/_react["default"].createElement("button", {
+  var button = /*#__PURE__*/_react["default"].createElement("div", {
     disabled: disabled,
-    type: "button",
     className: _WidgetBoxModule["default"].container
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _WidgetBoxModule["default"].content
   }, children), showLabel !== false && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _WidgetBoxModule["default"].label
+    className: (0, _classnames["default"])(_WidgetBoxModule["default"].label, disabled ? _WidgetBoxModule["default"].disabledLabel : _WidgetBoxModule["default"].normalLabel)
   }, label));
 
   if (!tooltip) {
@@ -42,22 +37,14 @@ function WidgetBox(props) {
 
   return /*#__PURE__*/_react["default"].createElement(_balloon["default"].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 = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: (0, _classnames["default"])(_WidgetBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_WidgetBoxModule["default"].ButtonBoxActive] = active, _classNames[_WidgetBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames))
-  }, otherProps), children);
-}
-
-WidgetBox.ButtonBox = ButtonBox;
+WidgetBox.ButtonBox = _ButtonBox["default"];
 var _default = WidgetBox;
 exports["default"] = _default;

package/lib/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/lib/core/editor/components/Toolbar/widgets/components/ButtonBox.js

@@ -19,7 +19,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ButtonBoxModule = _interopRequireDefault(require("./ButtonBox.module.scss"));
 
-var _excluded = ["active", "disabled", "showArrow", "children"];
+var _excluded = ["active", "disabled", "showArrow", "children", "onClick"];
 
 function ButtonBox(props) {
   var _classNames, _classNames2;
@@ -28,9 +28,11 @@ function ButtonBox(props) {
       disabled = props.disabled,
       showArrow = props.showArrow,
       children = props.children,
+      onClick = props.onClick,
       otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: (0, _classnames["default"])(_ButtonBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_ButtonBoxModule["default"].ButtonBoxActive] = active, _classNames[_ButtonBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames))
+    className: (0, _classnames["default"])(_ButtonBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_ButtonBoxModule["default"].ButtonBoxActive] = active, _classNames[_ButtonBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames)),
+    onClick: disabled ? undefined : onClick
   }, otherProps), children, showArrow && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "\xA0", /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     type: "tree_fold_arrow",
     size: "xxs",

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

@@ -21,6 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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,
@@ -28,19 +29,21 @@ function DropdownButton(props) {
       children = props.children;
 
   var _useState = (0, _react.useState)(false),
-      visible = _useState[0],
-      setVisible = _useState[1];
+      active = _useState[0],
+      setActive = _useState[1];
 
   var button = /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], {
-    active: visible,
+    active: active,
+    disabled: disabled,
     showArrow: showArrow
   }, trigger);
 
   return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
-    visible: visible,
+    visible: active,
+    disabled: disabled,
     trigger: button,
     triggerType: "click",
-    onVisibleChange: setVisible
+    onVisibleChange: setActive
   }, !showContainer ? children : /*#__PURE__*/_react["default"].createElement(PopupCard, null, children));
 }
 

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

@@ -94,29 +94,6 @@ 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/lib/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/lib/core/editor/components/settings/common/AlignSetting/AlignTypeList.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.module.scss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 = (0, _react.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["default"].createElement("div", {
+    className: _AlignSettingModule["default"].AlignSetting
+  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
+    return item.value === "divide" ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      key: index,
+      direction: "ver"
+    }) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      key: index,
+      className: "" + _AlignSettingModule["default"].redioBtn,
+      onClick: function onClick() {
+        handleChange(item);
+      },
+      title: item.label
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      type: item.icon
+    }));
+  }));
+};
+
+var _default = AlignTypeList;
+exports["default"] = _default;

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

@@ -3,91 +3,30 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = AlignSetting;
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _react = _interopRequireDefault(require("react"));
 
-var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
 
-var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+var _AlignTypeList = _interopRequireDefault(require("./AlignTypeList"));
 
-var _react = _interopRequireWildcard(require("react"));
+function AlignSetting(props) {
+  var topo = props.topo;
 
-var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.module.scss"));
+  var alignOnChange = function alignOnChange(type) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
+    }); // console.info("element--selectList", element, selectList);
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 AlignSetting = function AlignSetting(props) {
-  var _props$selected = props.selected,
-      selected = _props$selected === void 0 ? "left" : _props$selected,
-      onChange = props.onChange;
-
-  var _useState = (0, _react.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["default"].createElement("div", {
-    className: _AlignSettingModule["default"].AlignSetting
-  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
-    return item.value === "divide" ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-      key: index,
-      direction: "ver"
-    }) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      key: index,
-      className: "" + _AlignSettingModule["default"].redioBtn,
-      onClick: function onClick() {
-        handleChange(item);
-      },
-      title: item.label
-    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-      type: item.icon
-    }));
-  }));
-};
-
-var _default = AlignSetting;
-exports["default"] = _default;
+  return /*#__PURE__*/_react["default"].createElement(_AlignTypeList["default"], {
+    onChange: alignOnChange,
+    selected: "left"
+  });
+}

package/lib/core/editor/components/settings/common/LineType/index.js

@@ -3,137 +3,24 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = LineTypeSetting;
 
-var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+var _react = _interopRequireDefault(require("react"));
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
 
-var _react = _interopRequireWildcard(require("react"));
+var _LineType = _interopRequireDefault(require("../../../Toolbar/widgets/EdgeTypeButton/LineType"));
 
-var _LineTypeModule = _interopRequireDefault(require("./LineType.module.scss"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-//  直线 2. 直线单向箭头 3. 直线双向箭头 4. 双折线 5. 双折线单向箭头 6. 弧线
-// 7. 弧线单向箭头 8. 内向双向箭头 9. 纵向折线 10. 纵向折线带箭头 11. 水平折线 12. 水平折线带箭头
-var LINE_TYPE_OPTIONS = [{
-  value: "boundary",
-  label: "直线",
-  icon: "topo_linear_icon_straightline"
-}, {
-  value: "boundary.arrow",
-  label: "直线单向箭头",
-  icon: "topo_linear_icon_oneway_straightline"
-}, {
-  value: "boundary.both.arrow",
-  label: "直线双向箭头",
-  icon: "topo_linear_icon_expanded_straightline"
-}, {
-  value: "ortho",
-  label: "双折线",
-  icon: "topo_linear_icon_bilinear"
-}, {
-  value: "ortho.arrow",
-  label: "双折线单向箭头",
-  icon: "topo_linear_icon_oneway_bilinear"
-}, {
-  value: "flex",
-  label: "弧线",
-  icon: "topo_linear_icon_arcline"
-}, {
-  value: "flex.arrow",
-  label: "弧线单向箭头",
-  icon: "topo_linear_icon_oneway_arcline"
-}, {
-  value: "oposite",
-  label: "内向双向箭头",
-  icon: "topo_linear_icon_narrow_straightline"
-}, {
-  value: "h.v",
-  label: "纵向折线",
-  icon: "topo_linear_icon_vertical_foldline"
-}, {
-  value: "h.v.arrow",
-  label: "纵向折线带箭头",
-  icon: "topo_linear_icon_oneway_vertical_foldline"
-}, {
-  value: "v.h",
-  label: "水平折线",
-  icon: "topo_linear_icon_horizontal_foldline"
-}, {
-  value: "v.h.arrow",
-  label: "水平折线带箭头",
-  icon: "topo_linear_icon_oneway_horizontal_foldline"
-}];
-
-var LineType = function LineType(props) {
-  var topo = props.topo,
-      getEdges = props.getEdges,
-      selected = props.selected,
-      onChange = props.onChange;
-
-  var _useState = (0, _react.useState)(selected),
-      value = _useState[0],
-      setValue = _useState[1];
+function LineTypeSetting(props) {
+  var topo = props.topo;
 
   var setLineType = function setLineType(type) {
-    var edges = getEdges();
-    var htTopo = topo.getHtTopo();
-    edges.forEach(function (edge) {
-      htTopo.setGraphLinear(edge, {
-        type: type
-      });
-
-      if (edge.isEdgeGroupAgent()) {
-        // 连线组折叠时同时设置子连线
-        var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
-        htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), true);
-        edgeChildren.forEach(function (edgeChild) {
-          htTopo.setGraphLinear(edgeChild, {
-            type: type
-          });
-        });
-        htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), false);
-      }
-    });
+    var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
+    (0, _edgeTypeStyleUtil.setEdgesType)(edges, type, topo);
   };
 
-  var handleChange = function handleChange(data) {
-    // console.log("handleChange", data);
-    topo.historyManager.beginTransaction();
-
-    if (onChange) {
-      onChange(data.value);
-    }
-
-    setValue(data.value);
-    setLineType(data.value);
-    topo.historyManager.endTransaction();
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(_box["default"], {
-    spacing: 16,
-    wrap: true,
-    direction: "row",
-    className: _LineTypeModule["default"].LineType
-  }, LINE_TYPE_OPTIONS.map(function (item, index, array) {
-    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      key: index,
-      className: "" + _LineTypeModule["default"].redioBtn,
-      title: item.label,
-      onClick: function onClick() {
-        handleChange(item);
-      }
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
-      alt: "",
-      className: _LineTypeModule["default"].iconImg
-    }));
-  }));
-};
-
-var _default = LineType;
-exports["default"] = _default;
+  return /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
+    onChange: setLineType,
+    topo: topo
+  });
+}

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -124,14 +124,14 @@ function NodeSizeInput(props) {
     return val ? Math.round(val) : val;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_SizeInput["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_SizeInput["default"], (0, _extends3["default"])({}, props, {
     value: value,
     lock: lock,
     max: max,
     step: step,
     onChange: handleChange,
     onLockChange: switchLock
-  });
+  }));
 }
 
 NodeSizeInput.propTypes = {