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

package/es/core/editor/components/EditorPlugin.js

@@ -4,13 +4,14 @@ import CustomIconPlugin from "./CustomIconPlugin";
 import SaveLoading from "./plugins/SaveLoading";
 import MultipleResourceSelectPlugin from "./plugins/MultipleResourceSelectPlugin";
 import GroupAddResourceDrawerPlugin from "./GroupAddResourceDrawerPlugin";
+import MetricPollingPlugin from "../../viewer/components/plugins/MetricPollingPlugin";
 export default function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  var plugins = [SaveLoading, GroupAddResourceDrawerPlugin, MultipleResourceSelectPlugin, CustomIconPlugin, MetricPollingPlugin].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

package/es/core/editor/components/Sidebar/Sidebar.js

@@ -26,7 +26,8 @@ function Sidebar(props) {
         resourceTabActiveKey: null
       });
     };
-  }, []);
+  }, []); // 通过url参数打开对应面板
+
   useEffect(function () {
     var _topo$viewProps$urlPa;
 

package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -45,7 +45,7 @@ export default function CanvasPanel(props) {
     topo.historyManager.beginTransaction();
     displayConfigDispatchers.update({
       canvasTheme: theme
-    }); // 设置资源标注
+    }); // 设置资源/链路标注样式
 
     var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
         nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle,
@@ -65,8 +65,7 @@ export default function CanvasPanel(props) {
     displayConfigDispatchers.update({
       nodeLabelStyle: globalNodeLabelStyle,
       defaultEdgeLabelStyle: globalEdgeTagStyle
-    }); // 设置链路标注
-
+    });
     topo.historyManager.endTransaction();
   };
 

package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js

@@ -23,6 +23,7 @@ export default function HtImagePalette(props) {
       viewRef.current = htTopo.createImagePalette(container, {
         icons: icons
       });
+      console.error(viewRef.current);
     } catch (error) {
       rlog.error('初始化资源面板失败', error);
     } // 注销组件

package/es/core/editor/components/Toolbar/buttons.js

@@ -26,13 +26,14 @@ export default function getButtons(isNetworkTopo) {
   FontSizeWidget, // 字号
   FontStyleButton, // 文字样式
   FontColorButton, // 文字颜色
-  Divider, BoxBackgroundButton, // 框背景
-  Divider, EdgeColorButton, // 线条颜色
+  Divider, // BoxBackgroundButton, // 框背景
+  // Divider,
+  EdgeColorButton, // 线条颜色
   EdgeTypeButton, // 线形
   Divider, NodeImageButton, // 替换图片
   NodeSizeButton, // 图片尺寸
   Divider, Layout, // 布局方式
-  NodeAlignWidget, // 对齐方式
-  SearchWidget // 搜索
+  NodeAlignWidget // 对齐方式
+  // SearchWidget, // 搜索
   ]);
 }

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/EmptySetting.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/edgeTagSetting.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/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/hooks/textStyleSetting/nodeTagSetting.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/textStyleSetting/text.js

@@ -0,0 +1,8 @@
+export function useValues(topo) {
+  return {
+    color: null,
+    fontFamily: null,
+    fontSize: null,
+    fontStyle: []
+  };
+}

package/es/core/editor/components/Toolbar/hooks/useFontStyleSetting.js

@@ -1,33 +1,73 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { isText } from "../../../../../utils/htElementDataUtil";
 import { isGroup, isLayer, isNode } from "../../../../../utils/htElementUtils";
+import * as globalTagSetting from "./textStyleSetting/globalTag";
+import * as EmptySetting from "./textStyleSetting/EmptySetting"; // 文本
+
+function getElementType(element) {
+  if (isNode(element)) {
+    return 'nodeTag';
+  } else if (isGroup(element)) {
+    return 'group';
+  } else if (isText(element)) {
+    return 'text';
+  } else if (isLayer(element)) {
+    return 'layer';
+  }
+
+  return null;
+}
+
+function getType(selectionElements) {
+  if (!selectionElements.length) {
+    return 'globalTag';
+  } else if (selectionElements.length === 1) {
+    var element = selectionElements[0];
+    return getElementType(element);
+  }
+
+  return null;
+}
+
+var useValuesHookMap = {
+  globalTag: globalTagSetting.useValues,
+  empty: EmptySetting.useValues
+};
+
+function useValues(topo, selection) {
+  var type = getType(selection);
+  var useValuesHandle = useValuesHookMap[type] || useValuesHookMap.empty;
+  var values = useValuesHandle(topo, selection);
+  return values;
+}
+
+var elementSetStyleMap = {};
 
 function useFontStyleSetting(props) {
   var topo = props.topo;
-  var selectionElements = topo.selectionManager.useHtSelection();
-  var buttonEnabled = true; // 全局配置
+  var selection = topo.selectionManager.useHtSelection();
+  var buttonEnabled = true; // const values = useValues(topo, selection)
 
-  var _topo$store$useModel = topo.store.useModel('displayConfig'),
-      nodeLabelStyle = _topo$store$useModel[0].nodeLabelStyle,
-      displayConfigDispatchers = _topo$store$useModel[1];
+  var values = {};
 
   var setStyle = function setStyle(styleData) {
-    // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
-    if (!selectionElements.length) {
-      topo.getHtTopo().setGlobalNodeLabelStyle(styleData);
-      displayConfigDispatchers.update({
-        nodeLabelStyle: _extends({}, nodeLabelStyle, styleData)
-      });
+    topo.historyManager.beginTransaction(); // 全局调整（资源和链路）：无选择时，按钮亮起，即可修改全局资源和链路的标注，不影响“文本”、框名称、区域名称、分层名称的格式。
+
+    if (!selection.length) {
+      globalTagSetting.setGlobalTagStyle(topo, styleData);
     } else {
-      selectionElements.forEach(function (element) {
-        if (isNode(element)) {} else if (isGroup(element)) {} else if (isText(element)) {} else if (isLayer(element)) {}
+      selection.forEach(function (element) {
+        var elementType = getElementType(element);
       });
     }
+
+    topo.historyManager.endTransaction();
   };
 
   return {
+    selection: selection,
     buttonEnabled: buttonEnabled,
+    values: values,
     setStyle: setStyle
   };
 }

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

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useEffect, useState } from 'react';
-import { getEdgesBySelection, setEdgesAndChildren, loopEdgesAndChildren } from "../../../../utils/edgeTypeStyleUtil";
+import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import Content from "./Content";
@@ -31,10 +32,16 @@ function EdgeColorButton(props) {
 
   var selection = topo.selectionManager.useHtSelection();
 
+  var loopEdges = function loopEdges(edges, operateEdgeFn) {
+    edges.forEach(function (edge) {
+      operateEdgeFn(edge);
+    });
+  };
+
   var getLines = function getLines(list) {
     // eslint-disable-next-line prefer-const
     var arr = [];
-    loopEdgesAndChildren(topo, list, function (edge) {
+    loopEdges(list, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
         arr.push(edge);
@@ -49,7 +56,7 @@ function EdgeColorButton(props) {
       var list = getLines(edges);
       setLineWidth(0); // eslint-disable-next-line eqeqeq
 
-      if (selection.length == 1 && selection[0].getAttrObject().type == 'line') {
+      if (selection.length == 1 && selection[0].a('type') == 'line') {
         setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
       }
 
@@ -57,14 +64,20 @@ function EdgeColorButton(props) {
     }
   }, [selection, graphLoaded]);
 
-  var colorOnChange = function colorOnChange(color, type) {
+  var colorOnChange = function colorOnChange(colors, type) {
     // eslint-disable-next-line eqeqeq
     if (type == 'select') topo.historyManager.beginTransaction();
     var edges = getEdgesBySelection(topo);
-    loopEdgesAndChildren(topo, edges, function (edge) {
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.color', color.hex);
+        var color = colors.hex;
+        edge.s('edge.color', color);
+        edge.s('edge.dash.color', color);
+        var style = edge.a('styles') || {};
+        edge.a('styles', _extends({}, style, {
+          color: color
+        }));
       }
     }); // eslint-disable-next-line eqeqeq
 
@@ -80,14 +93,21 @@ function EdgeColorButton(props) {
     topo.historyManager.endTransaction();
   };
 
-  var lineSizeChange = function lineSizeChange(value) {
+  var lineSizeChange = function lineSizeChange(width) {
     var edges = getEdgesBySelection(topo);
-    setEdgesAndChildren(topo, edges, function (edge) {
+    topo.historyManager.beginTransaction();
+    loopEdges(edges, function (edge) {
       // eslint-disable-next-line eqeqeq
       if (edge.getAttrObject().type == 'line') {
-        edge.s('edge.width', value); // 设置
+        edge.s('edge.dash.width', width);
+        edge.s('edge.width', width);
+        var style = edge.a('styles') || {};
+        edge.a('styles', _extends({}, style, {
+          width: width
+        }));
       }
     });
+    topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -67,8 +67,23 @@ function EdgeTypeButton(props) {
         edge.s('icons', _extends({}, edge.s('icons')));
         edge.addStyleIcon(value, EDGE_END_POINT_TYPE_MAP[value]);
       } else if (name === 'lineMold') {
+        // 修改实线虚线
         edge.a('lineMode', value);
         htTopo.setElementStyle(edge, LINE_MOLD_MAP[value]);
+
+        if (value !== 'solid') {
+          var edgeWidth = edge.s('edge.width');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.width', edgeWidth);
+          }
+
+          var color = edge.s('edge.color');
+
+          if (edgeWidth) {
+            edge.s('edge.dash.color', color);
+          }
+        }
       }
     });
   };

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

@@ -5,6 +5,7 @@ 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,
@@ -15,6 +16,9 @@ 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,21 @@ 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({
+      setStyle({
         fontFamily: val
       });
     }
   }));
 }
 
-export default FontFamilyWidget;
+export default textStyleSettingRouter(FontFamilyWidget);

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,20 @@ 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({
+      setStyle({
         fontSize: val
       });
     }
   }));
 }
 
-export default FontSizeWidget;
+export default textStyleSettingRouter(FontSizeWidget);

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

@@ -1,62 +1,108 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
+var items = [{
+  key: 'bold',
+  label: '加粗',
+  icon: 'bold'
+}, {
+  key: 'italic',
+  label: '斜体',
+  icon: 'Italics'
+}, {
+  key: 'underline',
+  label: '下划线',
+  icon: 'Underline'
+}];
 
-function FontFamilySelect(props) {
-  var value = props.value,
-      disabled = props.disabled,
-      onChange = props.onChange;
-  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Normal.svg",
-    alt: ""
+function buildValue(obj) {
+  return Object.keys(obj).filter(function (key) {
+    return !!obj[key];
   });
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
-    valueRender: function valueRender() {
-      return icon;
-    },
-    onChange: onChange
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      key: item
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontFamily: item
-      }
-    }, item));
-  }));
+}
+
+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('微软雅黑'),
-      value = _useState[0],
-      setValue = _useState[1];
+  var _useState = useState(false),
+      disabled = _useState[0],
+      setDisabled = _useState[1];
 
-  var _useState2 = useState(true),
-      disabled = _useState2[0],
-      setDisabled = _useState2[1]; // 选中的元素
+  var bold = style.bold,
+      italic = style.italic,
+      underline = style.underline;
 
+  var _useState2 = useState(buildValue({
+    bold: bold,
+    italic: italic,
+    underline: underline
+  })),
+      value = _useState2[0],
+      setValue = _useState2[1]; // 选中的元素
 
-  var selection = topo.selectionManager.useSelection();
+
+  var selection = topo.selectionManager.useHtSelection();
   useEffect(function () {
     setDisabled(false);
   }, [selection]);
+  useEffect(function () {
+    setValue(buildValue({
+      bold: bold,
+      italic: italic,
+      underline: underline
+    }));
+  }, [bold, italic, underline]);
+  /**
+   * 
+   * @param {Array} selectedKeys 
+   */
+
+  var handleChange = function handleChange(selectedKeys) {
+    setStyle(formatStyle(selectedKeys));
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6587\u5B57\u6837\u5F0F",
     tooltip: "\u6587\u5B57\u6837\u5F0F",
     showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(FontFamilySelect, {
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
     value: value,
-    disabled: disabled,
-    onChange: setValue
-  }));
+    valueRender: function valueRender() {
+      return /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+        alt: ""
+      });
+    },
+    multiple: true,
+    onChange: handleChange
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      key: item.key
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/Normal.svg",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", null, item.label)));
+  })));
 }
 
-export default FontStyleButton;
+export default textStyleSettingRouter(FontStyleButton);