@riil-frontend/component-topology 2.3.20 → 2.4.2

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

@@ -1,6 +1,5 @@
-import _Input from "@alifd/next/lib/input";
 import _Tab from "@alifd/next/lib/tab";
-import _Button from "@alifd/next/lib/button";
+import _Input from "@alifd/next/lib/input";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
 import _Radio from "@alifd/next/lib/radio";
@@ -12,94 +11,49 @@ import React, { useState, useEffect } from 'react';
 import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
 import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
 import { getIconMap } from "../group/GroupNodeList/icon";
-import NodeSizeInput from "../common/NodeSizeInput";
+import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
+import textStyles from "../../../../common/text.module.scss";
+import TopoTreeSelect from "./TopoTreeSelect";
+import NodeIconSelect from "./NodeIconSelect";
+import NodeRelateResourceButton from "./NodeRelateResourceButton";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;
 var Option = _Select.Option;
 var CollapsePanel = _Collapse.Panel;
-var RadioGroup = _Radio.Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
+var RadioGroup = _Radio.Group;
 
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
+function parseValues(values) {
+  return _extends({}, values);
+}
+
+function getBindType(values) {
+  if (values.tag) {
+    return 'resource';
   }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
 
-function parseValues(values) {
-  return _extends({}, values, fontStyleUtil.toMap(values['styleMap.label.font'], 'styleMap.label.fontStyle.'), {
-    // 层间线
-    'styleMap.borderType': values['styleMap.dash'] === false ? 'solid' : 'dash',
-    'styleMap.dashColor': values['styleMap.dashColor'] || 'rgb(173,173,173)',
-    'styleMap.borderWidth': values['styleMap.borderWidth'] || 1
-  });
+  if (values.attr.bindType) {
+    return values.attr.bindType;
+  }
+
+  return 'none';
 }
 
-export default function TextPropertyView(props) {
+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;
+  var bindType = getBindType(values);
 
   var field = _Field.useField({
     autoUnmount: false,
     values: parseValues(values),
     onChange: function onChange(name, value) {
-      var newValues = field.getValues(); // 文字font样式
-
-      if (name.startsWith('styleMap.label.fontStyle.')) {
-        name = 'styleMap.label.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.label.fontStyle.'));
-      } // 层间线
-
-
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
-      }
+      var newValues = field.getValues();
 
       if (values[name] !== value) {
         _onChange(name, value, newValues);
@@ -107,67 +61,108 @@ export default function TextPropertyView(props) {
     }
   });
 
+  var setBindType = function setBindType(value) {
+    _onChange('attrObject.bindType', value);
+  };
+
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Tab, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/React.createElement(_Collapse, {
+      defaultExpandedKeys: ['相关资源'],
+      style: {
+        border: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(CollapsePanel, {
+      key: "\u76F8\u5173\u8D44\u6E90",
+      title: "\u76F8\u5173\u8D44\u6E90"
+    }, /*#__PURE__*/React.createElement(_Form, {
+      field: field,
+      labelAlign: "top"
+    }, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
+      label: "\u5173\u8054\u7C7B\u578B"
+    }, /*#__PURE__*/React.createElement(_Select, {
+      name: "bindType",
+      value: bindType,
+      style: {
+        width: '100%',
+        marginRight: 8
+      },
+      onChange: setBindType
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "none"
+    }, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
+      value: "resource"
+    }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/React.createElement(Option, {
+      value: "topo"
+    }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
+      label: "\u5173\u8054\u8D44\u6E90"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: textStyles.textEllipsis,
+      style: {
+        flex: 1,
+        paddingRight: 16,
+        color: '#4D6277'
+      },
+      title: values.tag ? values.name : null
+    }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
+      node: values,
+      topo: topo,
+      topoEditApi: topoEditApi
+    }))), bindType === 'topo' && /*#__PURE__*/React.createElement(_Form.Item, {
+      label: "\u5173\u8054\u62D3\u6251"
+    }, /*#__PURE__*/React.createElement(TopoTreeSelect, null)))));
+  };
+
+  var renderViewSetting = function renderViewSetting() {
+    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"
+    }, /*#__PURE__*/React.createElement(_Form.Item, {
+      label: "\u56FE\u7247\u540D\u79F0"
+    }, /*#__PURE__*/React.createElement(_Input, {
+      name: "attrObject.name"
+    })), /*#__PURE__*/React.createElement(_Form.Item, {
+      label: "\u663E\u793A\u56FE\u7247"
+    }, /*#__PURE__*/React.createElement(NodeIconSelect, {
+      name: "image",
+      topo: topo
+    })), /*#__PURE__*/React.createElement(_Form.Item, {
+      label: "\u56FE\u7247\u5C3A\u5BF8"
+    }, /*#__PURE__*/React.createElement(NodeSizeInput, {
+      value: {
+        width: values.width,
+        height: values.height
+      },
+      onChange: function onChange(size) {
+        _onChange('width', size.width);
+
+        _onChange('height', size.height);
+      }
+    }))))));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  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;
+  return /*#__PURE__*/React.createElement("div", null, showRelateResource ? /*#__PURE__*/React.createElement(_Tab, null, /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u6570\u636E",
     key: "1"
-  }, /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ['相关资源'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u76F8\u5173\u8D44\u6E90",
-    title: "\u76F8\u5173\u8D44\u6E90"
-  }, "\u5173\u8054\u8D44\u6E90", /*#__PURE__*/React.createElement("br", null), values.name, /*#__PURE__*/React.createElement(_Button, {
-    text: true,
-    onClick: function onClick() {
-      topoEditApi.bindNodeResource({});
-    }
-  })))), /*#__PURE__*/React.createElement(_Tab.Item, {
+  }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u8BBE\u7F6E",
     key: "2"
-  }, /*#__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"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u540D\u79F0"
-  }, /*#__PURE__*/React.createElement(_Input, {
-    name: "attrObject.name"
-  })), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u663E\u793A\u56FE\u7247"
-  }, /*#__PURE__*/React.createElement(_Select, {
-    name: "image",
-    style: {
-      width: '100%',
-      marginRight: 8
-    }
-  }, Object.keys(getIconMap(topo)).map(function (id) {
-    return /*#__PURE__*/React.createElement(Option, {
-      key: id,
-      value: id
-    }, id);
-  }))), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u56FE\u7247\u5C3A\u5BF8"
-  }, /*#__PURE__*/React.createElement(NodeSizeInput, {
-    value: {
-      width: values.width,
-      height: values.height
-    },
-    onChange: function onChange(size) {
-      _onChange('width', size.width);
-
-      _onChange('height', size.height);
-    }
-  })))))))));
+  }, renderViewSetting())) : renderViewSetting());
 }

package/es/core/editor/components/settings/node/NodeRelateResourceButton.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function NodeRelateResourceButton(props: any): any | null;

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

@@ -0,0 +1,22 @@
+import _Button from "@alifd/next/lib/button";
+import React from 'react';
+
+/**
+ * @return {React.ReactNode | null}
+ */
+export default function NodeRelateResourceButton(props) {
+  var _node$attr$data;
+
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      node = props.node;
+  var hide = ((_node$attr$data = node.attr.data) === null || _node$attr$data === void 0 ? void 0 : _node$attr$data.relateResource) === false;
+  return !hide ? /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    text: true,
+    onClick: function onClick() {
+      topoEditApi.bindNodeResource({});
+    }
+  }, "\u9009\u62E9\u8D44\u6E90") : null;
+}
+;

package/es/core/editor/components/settings/node/TopoTreeSelect.d.ts

@@ -0,0 +1 @@
+export default function TopoTreeSelect(props: any): JSX.Element;

package/es/core/editor/components/settings/node/TopoTreeSelect.js

@@ -0,0 +1,40 @@
+import _TreeSelect from "@alifd/next/lib/tree-select";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+var TreeNode = _TreeSelect.Node;
+export default function TopoTreeSelect(props) {
+  var onChange = props.onChange;
+  return /*#__PURE__*/React.createElement(_TreeSelect, {
+    treeDefaultExpandAll: true,
+    onChange: onChange,
+    style: {
+      width: '100%',
+      marginRight: 8
+    }
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "1",
+    value: "1",
+    label: "Component"
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "2",
+    value: "2",
+    label: "Form"
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "4",
+    value: "4",
+    label: "Input"
+  }), /*#__PURE__*/React.createElement(TreeNode, {
+    key: "5",
+    value: "5",
+    label: "Select",
+    disabled: true
+  })), /*#__PURE__*/React.createElement(TreeNode, {
+    key: "3",
+    value: "3",
+    label: "Display"
+  }, /*#__PURE__*/React.createElement(TreeNode, {
+    key: "6",
+    value: "6",
+    label: "Table"
+  }))));
+}
+;

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

@@ -1,77 +1,19 @@
-import _NumberPicker from "@alifd/next/lib/number-picker";
-import _Input from "@alifd/next/lib/input";
+import _Form from "@alifd/next/lib/form";
 import _Field from "@alifd/next/lib/field";
 import _extends from "@babel/runtime/helpers/extends";
-import _Radio from "@alifd/next/lib/radio";
 import _Collapse from "@alifd/next/lib/collapse";
-import _Select from "@alifd/next/lib/select";
-import _Grid from "@alifd/next/lib/grid";
-import _Form from "@alifd/next/lib/form";
-import React, { useState, useEffect } from 'react';
-import ColorPicker from "../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
-import GroupNodeList from "../group/GroupNodeList/GroupNodeList";
-import ResourceSelectButton from "../group/GroupNodeList/ResourceSelectButton";
-var FormItem = _Form.Item;
-var Row = _Grid.Row,
-    Col = _Grid.Col;
-var Option = _Select.Option;
+import React, { useEffect } from 'react';
+import TextStyle from "../common/text/TextStyle";
+import fontStyleUtil from "../common/text/fontStyleUtil";
 var CollapsePanel = _Collapse.Panel;
-var RadioGroup = _Radio.Group; // 字体样式格式 label.font: bold italic 12px 黑体 / 12px 黑体
-
-var fontStyleUtil = {
-  toMap: function toMap(font, prefix) {
-    var arr = font.trim().split(' ');
-    var bold = font.indexOf('bold') > -1;
-    var italic = font.indexOf('bold') > -1;
-    var map = {
-      fontFamily: arr[1],
-      fontSize: parseInt(arr[0].replace('px', ''), 10),
-      bold: bold,
-      italic: italic,
-      underline: false
-    };
-    return Object.keys(map).reduce(function (result, key) {
-      result["" + prefix + key] = map[key];
-      return result;
-    }, {});
-  },
-  getFontStyleMap: function getFontStyleMap(obj, prefix) {
-    var map = {};
-    Object.keys(obj).forEach(function (key) {
-      if (key.startsWith(prefix)) {
-        map[key.replace(prefix, '')] = obj[key];
-      }
-    });
-    console.error(obj, prefix, map);
-    return map;
-  },
-  build: function build(style) {
-    return style.fontSize + "px " + style.fontFamily;
-  }
-}; // 线型--node.s('dash',false) ---false代表是实线，默认为true代表虚线
-// 线型为实线时设置颜色--node.s('borderColor','rgba(0,0,0,0.00)') //默认颜色rgba(0,0,0,0.00)
-// 线型为虚线时设置颜色--node.s('dashColor','rgb(173,173,173)') //默认颜色rgb(173,173,173)
-// 线宽--node.s('borderWidth',1)//默认宽度是1
-//
-//
-// 为了实现切换时更好的效果，在设置线型为虚线时可以这样设置：
-// node.s('dash',true);
-// node.s('borderColor','rgba(0,0,0,0.00)');//将borderColor改为默认
-// node.s('dashColor','当前设置的颜色')
-// 虚线颜色用的是dashColor
-//
-// 设置线型为实线时
-// node.s('dash',false);
-// node.s('borderColor','当前设置的颜色');
-// node.s('dashColor','rgb(173,173,173)');dash可设置为默认
-// 实线用的是borderColor
 
 function parseValues(values) {
-  return _extends({}, values, fontStyleUtil.toMap(values['styleMap.label.font'], 'styleMap.label.fontStyle.'), {
-    // 层间线
-    'styleMap.borderType': values['styleMap.dash'] === false ? 'solid' : 'dash',
-    'styleMap.dashColor': values['styleMap.dashColor'] || 'rgb(173,173,173)',
-    'styleMap.borderWidth': values['styleMap.borderWidth'] || 1
+  return _extends({}, values, {
+    'styleMap.textObj': {
+      color: values.styleMap['text.color'],
+      underline: values.styleMap['text.decoration'] === 'underline',
+      font: fontStyleUtil.toMap(values.styleMap['text.font'])
+    }
   });
 }
 
@@ -87,15 +29,18 @@ export default function TextPropertyView(props) {
     onChange: function onChange(name, value) {
       var newValues = field.getValues(); // 文字font样式
 
-      if (name.startsWith('styleMap.label.fontStyle.')) {
-        name = 'styleMap.label.font';
-        value = fontStyleUtil.build(fontStyleUtil.getFontStyleMap(newValues, 'styleMap.label.fontStyle.'));
-      } // 层间线
+      if (name === 'styleMap.textObj') {
+        _onChange('styleMap.text.color', value.color, newValues);
 
+        _onChange('styleMap.label.color', value.color, newValues);
 
-      if (name === 'styleMap.borderType') {
-        name = 'styleMap.dash';
-        value = value === 'dash';
+        var font = fontStyleUtil.build(value);
+
+        _onChange('styleMap.text.font', font, newValues);
+
+        _onChange('styleMap.text.decoration', value.underline ? 'underline' : undefined, newValues);
+
+        return;
       }
 
       if (values[name] !== value) {
@@ -107,84 +52,25 @@ export default function TextPropertyView(props) {
   useEffect(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Form, {
-    field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u540D\u79F0",
+  return /*#__PURE__*/React.createElement("div", {
     style: {
-      paddingLeft: 12,
-      paddingRight: 12
+      paddingTop: 8
     }
-  }, /*#__PURE__*/React.createElement(_Input, {
-    name: "name"
-  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
+  }, /*#__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: "\u6587\u672C"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5B57\u4F53"
-  }, /*#__PURE__*/React.createElement(_Select, {
-    name: "styleMap.label.fontStyle.fontFamily",
+    title: "\u663E\u793A\u8BBE\u7F6E",
     style: {
-      width: '100%',
-      marginRight: 8
+      padding: 0
     }
-  }, /*#__PURE__*/React.createElement(Option, {
-    value: "\u5B8B\u4F53"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u5B8B\u4F53")), /*#__PURE__*/React.createElement(Option, {
-    value: "\u9ED1\u4F53"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontFamily: '宋体'
-    }
-  }, "\u9ED1\u4F53")), /*#__PURE__*/React.createElement(Option, {
-    value: "Arial"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontFamily: 'Arial'
-    }
-  }, "Arial")))), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5B57\u53F7",
-    hasFeedback: true,
-    required: true,
-    requiredMessage: "\u4E0D\u80FD\u4E3A\u7A7A",
-    requiredTrigger: "onBlur",
-    asterisk: false
-  }, /*#__PURE__*/React.createElement(_NumberPicker, {
-    name: "styleMap.label.fontStyle.fontSize",
-    min: 8,
-    max: 36,
-    style: {
-      width: '100%',
-      marginRight: 8
-    },
-    placeholder: "\u8BF7\u8F93\u5165"
-  })), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u6837\u5F0F"
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
-    shape: "button"
-  }, /*#__PURE__*/React.createElement(_Radio, {
-    id: "banana",
-    value: "banana"
-  }, "B"), /*#__PURE__*/React.createElement(_Radio, {
-    id: "watermelon",
-    value: "watermelon"
-  }, "I"), /*#__PURE__*/React.createElement(_Radio, {
-    id: "peach",
-    value: "peach"
-  }, "U"))), /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u989C\u8272"
-  }, /*#__PURE__*/React.createElement(ColorPicker, {
-    name: "styleMap.label.color",
-    align: "bl"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(TextStyle, {
+    name: "styleMap.textObj"
   })))))));
 }

package/es/core/editor/components/settings/view/ViewPropertyView.js

@@ -13,7 +13,7 @@ import { getIconMap } from "../group/GroupNodeList/icon";
 import LayoutSettings from "../common/LayoutSettings";
 import LineType from "../common/LineType";
 import NodeAlignType from "../common/NodeAlignType";
-import NodeSizeInput from "../common/NodeSizeInput";
+import NodeSizeInput from "../common/NodeSizeInput/NodeSizeInput";
 var FormItem = _Form.Item;
 var Row = _Grid.Row,
     Col = _Grid.Col;

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

@@ -1,12 +1,13 @@
 import _Button from "@alifd/next/lib/button";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
 import TitleWidget from "../../../components/titlebar/widgets/TitleWidget";
 import styles from "../../../components/titlebar/TitleBar.module.scss";
 export default function TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.titlebar
+    className: classnames(styles.titlebar, styles.titlebarEditMode)
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.left
   }, /*#__PURE__*/React.createElement(TitleWidget, {
@@ -22,16 +23,15 @@ export default function TopoEditorTitleBar(props) {
       topoEditApi.addResourceToView();
     }
   }, "\u6DFB\u52A0\u8D44\u6E90"), /*#__PURE__*/React.createElement(_Button, {
-    type: "primary",
     className: styles.button,
     onClick: function onClick() {
       topo.save();
     }
   }, "\u4FDD\u5B58"), /*#__PURE__*/React.createElement(_Button, {
+    className: styles.button,
     onClick: function onClick() {
       topo.exitEditMode();
-    },
-    className: styles.button
+    }
   }, "\u9000\u51FA"))));
 }
 ;

package/es/core/editor/{buildContextmenu.d.ts → contextmenu/buildContextmenu.d.ts}

@@ -1,9 +1,6 @@
 export default function buildContextmenu(topoApp: any): {
     node: {
         enable: boolean;
-        items: {
-            label: string;
-            id: string;
-        }[];
+        items: any[];
     };
 };

package/es/core/editor/contextmenu/buildContextmenu.js

@@ -0,0 +1,10 @@
+export default function buildContextmenu(topoApp) {
+  return {
+    node: {
+      enable: true,
+      items: [// { label: '打开属性设置', id: 'openSet' },
+        // { label: '打开全局属性设置', id: 'openAllSet' },
+      ]
+    }
+  };
+}

package/es/hooks/useSelection.js

@@ -10,7 +10,9 @@ function getElementData(element) {
     // 业务id
     name: element.getName(),
     attrObject: element.getAttrObject(),
-    styleMap: element.getStyleMap()
+    attr: element.getAttrObject(),
+    styleMap: element.getStyleMap(),
+    style: element.getStyleMap()
   };
 
   if (className === 'ht.Edge') {
@@ -51,18 +53,22 @@ export default function (props) {
     var selectionModel = topoApp.getSelectionModel();
     updateSelection();
     selectionModel.addSelectionChangeListener(function (e) {
-      // console.info('SelectionChange');
+      // console.info('selectionChangeListener', e);
       updateSelection();
     });
     dataModel.addDataPropertyChangeListener(function (e) {
       var property = e.property,
           data = e.data;
+
+      if (['position'].indexOf(property) !== -1) {
+        return;
+      }
+
       var selectionIds = selectionModel.getSelection().getArray().map(function (item) {
         return item.getId();
       });
 
       if (selectionIds.indexOf(data.getId()) > -1) {
-        // console.info('DataPropertyChange');
         updateSelection();
       }
     });