@riil-frontend/component-topology 6.0.0-alpha.9 → 6.0.1

package/es/core/editor/components/settings/propertyViews/group/SettingTab/GroupExpandSetting.js

@@ -1,6 +1,6 @@
 import _Form from "@alifd/next/es/form";
 import _Collapse from "@alifd/next/es/collapse";
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import GroupExpandStatus from "./GroupExpandStatus";
 import AlignSetting from "../../../common/AlignSetting";
 import LayoutSettings from "../../../common/LayoutSettings"; // import NodeIconSelect from '../../node/NodeIconSelect';
@@ -23,15 +23,17 @@ export default function GroupExpandSetting(props) {
     topo.historyManager.beginTransaction(); // console.log("setAlignmentBySelectionNodes", v);
     // topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
 
-    onChange("groupAlign", v); // topoEditApi.setAlignmentBySelectionNodes(v);
+    onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
 
     topo.historyManager.endTransaction();
   };
 
-  var layoutOnChange = function layoutOnChange(v) {
+  var layoutOnChange = function layoutOnChange(value) {
     topo.historyManager.beginTransaction();
-    setLayout(v);
-    onChange("layout", v);
+    setLayout(value); // onChange("layout", v);
+
+    var layouType = value.id === 'toward' ? "" + value.id + value.options.subId : value.id;
+    topo.getHtTopo().layoutInContainer(layouType);
     topo.historyManager.endTransaction();
   };
 
@@ -40,9 +42,9 @@ export default function GroupExpandSetting(props) {
     setLayout({}); // onChange("layout", {});
   }, [id]);
   return /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ["布局", "显示设置", "对齐方式"],
+    defaultExpandedKeys: ['布局', '显示设置', '对齐方式'],
     style: {
-      border: "none"
+      border: 'none'
     }
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u5E03\u5C40",
@@ -71,13 +73,5 @@ export default function GroupExpandSetting(props) {
     setExpanded: function setExpanded(val) {
       return group.setExpanded(val);
     }
-  }))), /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u5BF9\u9F50\u65B9\u5F0F",
-    title: "\u5BF9\u9F50\u65B9\u5F0F"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: ""
-  }, /*#__PURE__*/React.createElement(AlignSetting, {
-    onChange: alignOnChange,
-    selected: "left"
   }))));
 }

package/es/core/editor/components/settings/propertyViews/group/cluster/ClusterGroupRelateData.js

@@ -1,10 +1,10 @@
 import _Collapse from "@alifd/next/es/collapse";
 import _Form from "@alifd/next/es/form";
 import React, { useEffect } from 'react';
+import NoDataPage from '@riil-frontend/component-no-data-page';
 import GroupNodeList from "../DataTab/GroupNodeList";
 import CollapsePanel from "../../../../../../../components/collapse/Panel";
 import NodeRelateResourceButton from "../../node/data/NodeRelateResourceButton";
-import NoDataPage from '@riil-frontend/component-no-data-page';
 import CollapseFullheightStyles from "../../../common/GroupNodeList/CollapseFullheight.module.scss";
 import textStyles from "../../../../../../common/text.module.scss";
 export default function ClusterGroupRelateData(props) {
@@ -44,12 +44,13 @@ export default function ClusterGroupRelateData(props) {
     key: "\u76F8\u5173\u8D44\u6E90",
     title: "\u76F8\u5173\u8D44\u6E90"
   }, /*#__PURE__*/React.createElement(_Form, {
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5173\u8054\u8D44\u6E90",
+    labelAlign: "top",
     style: {
-      marginBottom: 4
+      marginTop: -4,
+      marginBottom: -12
     }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u8D44\u6E90"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex'
@@ -59,7 +60,8 @@ export default function ClusterGroupRelateData(props) {
     style: {
       flex: 1,
       paddingRight: 16,
-      color: '#4D6277'
+      color: '#4D6277',
+      lineHeight: '20px'
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {

package/es/core/editor/components/settings/propertyViews/index.js

@@ -1,19 +1,17 @@
 import NodePropertyView from "./node/NodePropertyView";
 import LayerPropertyView from "./layer/LayerPropertyView";
 import TextPropertyView from "./text/TextPropertyView";
-import ViewPropertyView from "./view/ViewPropertyView";
 import GroupPropertyView from "./group/GroupPropertyView";
-import MultipleElementPropertyView from "./multipleElements/MultipleElementPropertyView";
-import EdgePropertyView from "./edge/EdgePropertyView";
 import BoxPropertyView from "./box/BoxPropertyView";
 var propertyPanelMap = {
-  view: ViewPropertyView,
+  // view: ViewPropertyView,
   group: GroupPropertyView,
   node: NodePropertyView,
-  edge: EdgePropertyView,
+  // edge: EdgePropertyView,
+  // edgeGroup: EdgeGroupPropertyView,
   layer: LayerPropertyView,
   text: TextPropertyView,
-  multiple: MultipleElementPropertyView,
+  // multiple: MultipleElementPropertyView,
   box: BoxPropertyView
 };
 

package/es/core/editor/components/settings/propertyViews/layer/BasicSetting.js

@@ -0,0 +1,57 @@
+import _Form from "@alifd/next/es/form";
+import _extends from "@babel/runtime/helpers/extends";
+import _Field from "@alifd/next/es/field";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import React, { useEffect } from 'react';
+import { SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, validateSpecialCharacter } from "../../../../../../utils/SpecialCharacterValidateUtil";
+import NameInput from "../../common/NameInput";
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      layer = props.layer;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      if (name === 'styleMap.label' && !validateSpecialCharacter(value)) {
+        return;
+      }
+
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(values);
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 0 0 0'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, _extends({
+    label: "\u5206\u5C42\u540D\u79F0"
+  }, SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, {
+    patternTrigger: "onChange",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16
+    }
+  }), /*#__PURE__*/React.createElement(NameInput, {
+    name: "styleMap.label",
+    multipleLine: true,
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
+  })));
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.js

@@ -1,30 +1,24 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import TabView from "../../common/tab/TabView";
-import Setting from "./SettingTab/Setting";
 import RelateData from "./DataTab/RelateData";
-import useHtElement from "../../../../../common/hooks/useHtElement";
+import Setting from "./BasicSetting";
+import styles from "./LayerPropertyView.module.scss";
 export default function LayerPropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       onChange = props.onChange,
       settingRuntimeState = props.settingRuntimeState,
-      editorProps = props.editorProps;
-  var layer = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(RelateData, _extends({
-    layer: layer
-  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
   }, /*#__PURE__*/React.createElement(Setting, _extends({
     layer: layer
+  }, props)), /*#__PURE__*/React.createElement("div", {
+    className: styles.data
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
   }, props))));
 }

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.module.scss

@@ -0,0 +1,10 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .data {
+    flex: 1;
+    overflow: auto;
+  }
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyViewV1.js

@@ -0,0 +1,27 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../common/tab/TabView";
+import Setting from "./SettingTab/Setting";
+import RelateData from "./DataTab/RelateData";
+export default function LayerPropertyView(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
+  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Setting, _extends({
+    layer: layer
+  }, props))));
+}

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
-import LineType from "../../common/LineType";
+import { getEdgesBySelection, setEdgesType } from "../../../../utils/edgeTypeStyleUtil";
+import LineType from "../../../Toolbar/widgets/EdgeTypeButton/LineType";
 export default function MultipleElementLineType(props) {
   var topo = props.topo;
 
-  var setLineType = function setLineType(type) {};
-
-  var getSelectedEdges = function getSelectedEdges() {
-    return getEdgesBySelection(topo);
+  var setLineType = function setLineType(type) {
+    var edges = getEdgesBySelection(topo);
+    setEdgesType(edges, type, topo);
   };
 
   return /*#__PURE__*/React.createElement(LineType, {
-    getEdges: getSelectedEdges,
     onChange: setLineType,
     topo: topo
   });

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -34,19 +34,7 @@ export default function MultipleElementPropertyView(props) {
 
   useEffect(function () {
     field.setValues(values);
-  }, [values]);
-
-  var alignOnChange = function alignOnChange(v) {
-    // console.log('setAlignmentBySelectionNodes', v);
-    topo.historyManager.beginTransaction();
-    topo.getHtTopo().setAlignmentBySelectionNodes(v);
-
-    _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
-
-
-    topo.historyManager.endTransaction();
-  }; // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
-
+  }, [values]); // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
 
   if (!(editorProps !== null && editorProps !== void 0 && (_editorProps$multiple = editorProps.multipleElementPropertyViewProps) !== null && _editorProps$multiple !== void 0 && _editorProps$multiple.showElementAlign) && topoShowType === TPL_TREE) {
     return /*#__PURE__*/React.createElement(ViewPropertyView, props);
@@ -78,8 +66,7 @@ export default function MultipleElementPropertyView(props) {
     key: "\u5BF9\u9F50\u65B9\u5F0F",
     title: "\u5BF9\u9F50\u65B9\u5F0F"
   }, /*#__PURE__*/React.createElement(AlignSetting, {
-    onChange: alignOnChange,
-    selected: "left"
+    topo: topo
   })), /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u7EBF\u5F62",
     title: "\u7EBF\u5F62"

package/es/core/editor/components/settings/propertyViews/node/NodePropertyView.js

@@ -1,11 +1,8 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import useHtElement from "../../../../../common/hooks/useHtElement";
-import TabView from "../../common/tab/TabView";
 import Data from "./data/Data";
 import styles from "./NodePropertyView.module.scss";
-import Setting from "./Setting";
+import BasicSetting from "./Setting/BasicSetting";
 export default function NodePropertyView(props) {
   var _topo$options$editor;
 
@@ -14,40 +11,19 @@ export default function NodePropertyView(props) {
       values = props.values,
       onChange = props.onChange,
       editorProps = props.editorProps,
-      settingRuntimeState = props.settingRuntimeState;
-  var node = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-
-  var renderData = function renderData() {
-    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
-      node: node
-    }));
-  };
-
-  var renderSetting = function renderSetting() {
-    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
-    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
-  }; // 未绑定资源的节点，根据参数控制是否可关联资源
-
+      selectionElement = props.selectionElement;
+  var node = selectionElement; // 未绑定资源的节点，根据参数控制是否可关联资源
 
   var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
-  var content;
+  var dataContent = null;
 
   if (showRelateResource) {
-    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u6570\u636E",
-      key: "1"
-    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u8BBE\u7F6E",
-      key: "2"
-    }, renderSetting()));
-  } else {
-    content = renderSetting();
+    dataContent = /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
   }
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.NodePropertyView
-  }, content);
+  }, /*#__PURE__*/React.createElement(BasicSetting, props), dataContent);
 }

package/es/core/editor/components/settings/propertyViews/node/NodePropertyViewV1.js

@@ -0,0 +1,53 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import useHtElement from "../../../../../common/hooks/useHtElement";
+import TabView from "../../common/tab/TabView";
+import Data from "./data/Data";
+import styles from "./NodePropertyView.module.scss";
+import Setting from "./Setting";
+export default function NodePropertyView(props) {
+  var _topo$options$editor;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState;
+  var node = useHtElement({
+    topo: topo,
+    id: values.id
+  });
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
+  };
+
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  var content;
+
+  if (showRelateResource) {
+    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.NodePropertyView
+  }, content);
+}

package/es/core/editor/components/settings/propertyViews/node/Setting/BasicSetting.js

@@ -0,0 +1,49 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect } from 'react';
+import NameInput from "./NameInput";
+
+function parseValues(values) {
+  return _extends({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState,
+      _props$showImageSetti = props.showImageSetting,
+      showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 16px 0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u540D\u79F0"
+  }, /*#__PURE__*/React.createElement(NameInput, {
+    name: "attrObject.customName",
+    topo: topo
+  })));
+}

package/es/core/editor/components/settings/propertyViews/node/Setting/NameInput.js

@@ -1,7 +1,7 @@
-import _Input from "@alifd/next/es/input";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
-var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import NameInput from "../../../common/NameInput";
+var NodeNameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onChange = props.onChange,
       topo = props.topo;
 
@@ -33,12 +33,13 @@ var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/React.createElement(_Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NameInput, _extends({}, props, {
     ref: ref,
     value: value,
+    multipleLine: true,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });
-export default NameInput;
+export default NodeNameInput;

package/es/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -134,7 +134,8 @@ export default function Data(props) {
     style: {
       flex: 1,
       paddingRight: 16,
-      color: "#4D6277"
+      color: "#4D6277",
+      lineHeight: '20px'
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : "—"), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {

package/es/core/editor/components/settings/propertyViews/node/data/NodeRelateResourceButton.js

@@ -24,6 +24,7 @@ export default function NodeRelateResourceButton(props) {
   return !hide ? /*#__PURE__*/React.createElement(_Button, {
     type: "primary",
     text: true,
+    size: "small",
     onClick: function onClick() {
       setVisible(true);
     }

package/es/core/editor/components/settings/propertyViews/text/TextPropertyView.js

@@ -37,7 +37,7 @@ export default function TextPropertyView(props) {
 
         _onChange('styleMap.label.color', value.color, newValues);
 
-        var font = fontStyleUtil.build(value);
+        var font = fontStyleUtil.build(value.font);
 
         _onChange('styleMap.text.font', font, newValues);
 
@@ -59,23 +59,11 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 4
-    }
-  }, /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement(_Form, {
     field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['显示设置'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E",
+    labelAlign: "top",
     style: {
-      padding: 0
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6587\u672C"
@@ -92,8 +80,5 @@ export default function TextPropertyView(props) {
     onBlur: function onBlur() {
       topo.historyManager.endTransaction();
     }
-  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
-    name: "styleMap.textObj",
-    topo: topo
-  })))))));
+  })));
 }

package/es/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -1,15 +1,15 @@
 import _Box from "@alifd/next/es/box";
+import _extends from "@babel/runtime/helpers/extends";
 import _Dialog from "@alifd/next/es/dialog";
 import _Button from "@alifd/next/es/button";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
-import { useState } from 'react';
-import { useEffect } from 'react';
 import DebugTools from "./widgets/DebugTools";
+import SettingButtonWidget from "../../../viewer/components/titlebar/widgets/SettingButtonWidget";
 export default function TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
@@ -132,5 +132,9 @@ export default function TopoEditorTitleBar(props) {
         }
       });
     }
-  }, "\u9000\u51FA"))));
+  }, "\u9000\u51FA"), /*#__PURE__*/React.createElement(SettingButtonWidget, _extends({
+    isEditor: true
+  }, props, {
+    viewerProps: topo.viewProps.viewerProps
+  })))));
 }