@riil-frontend/component-topology 6.0.0-alpha.43 → 6.0.0-alpha.44

package/es/core/editor/components/settings/propertyViews/box/BoxPropertyView.js

@@ -14,11 +14,9 @@ function parseValues(values) {
 export default function BoxPropertyView(props) {
   var topo = props.topo,
       values = props.values,
-      _onChange = props.onChange;
-  var boxNode = useHtElement({
-    topo: topo,
-    id: values.id
-  });
+      _onChange = props.onChange,
+      selectionElement = props.selectionElement;
+  var boxNode = selectionElement;
 
   var field = _Field.useField({
     autoUnmount: false,
@@ -42,7 +40,7 @@ export default function BoxPropertyView(props) {
     field: field,
     labelAlign: "top",
     style: {
-      margin: '12px 0 0 32px'
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6807\u9898\u540D\u79F0"

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

@@ -59,7 +59,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/layer/BasicSetting.js

@@ -0,0 +1,57 @@
+import _Form from "@alifd/next/es/form";
+import _extends from "@babel/runtime/helpers/extends";
+import _Input from "@alifd/next/es/input";
+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";
+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;
+      }
+
+      rlog.debug(values[name], value);
+      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(_Input, {
+    name: "styleMap.label",
+    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/node/Setting/BasicSetting.js

@@ -38,7 +38,7 @@ export default function BasicSetting(props) {
     field: field,
     labelAlign: "top",
     style: {
-      margin: '12px 0 0 32px'
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u56FE\u7247\u540D\u79F0"

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: "xs",
     onClick: function onClick() {
       setVisible(true);
     }

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

@@ -63,7 +63,7 @@ export default function TextPropertyView(props) {
     field: field,
     labelAlign: "top",
     style: {
-      margin: '12px 0 0 32px'
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/React.createElement(_Form.Item, {
     label: "\u6587\u672C"

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.43" === 'string' ? "6.0.0-alpha.43" : null;
+var version = typeof "6.0.0-alpha.44" === 'string' ? "6.0.0-alpha.44" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/editor/components/settings/propertyViews/box/BoxPropertyView.js

@@ -32,11 +32,9 @@ function parseValues(values) {
 function BoxPropertyView(props) {
   var topo = props.topo,
       values = props.values,
-      _onChange = props.onChange;
-  var boxNode = (0, _useHtElement["default"])({
-    topo: topo,
-    id: values.id
-  });
+      _onChange = props.onChange,
+      selectionElement = props.selectionElement;
+  var boxNode = selectionElement;
 
   var field = _field["default"].useField({
     autoUnmount: false,
@@ -60,7 +58,7 @@ function BoxPropertyView(props) {
     field: field,
     labelAlign: "top",
     style: {
-      margin: '12px 0 0 32px'
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u6807\u9898\u540D\u79F0"

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

@@ -79,7 +79,8 @@ 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["default"].createElement(_NodeRelateResourceButton["default"], {

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BasicSetting;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _SpecialCharacterValidateUtil = require("../../../../../../utils/SpecialCharacterValidateUtil");
+
+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; }
+
+function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      layer = props.layer;
+
+  var field = _field["default"].useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      if (name === 'styleMap.label' && !(0, _SpecialCharacterValidateUtil.validateSpecialCharacter)(value)) {
+        return;
+      }
+
+      _rlog["default"].debug(values[name], value);
+
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValues(values);
+  }, [values]);
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 0 0 0'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, (0, _extends2["default"])({
+    label: "\u5206\u5C42\u540D\u79F0"
+  }, _SpecialCharacterValidateUtil.SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, {
+    patternTrigger: "onChange",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    name: "styleMap.label",
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
+  })));
+}

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

@@ -5,19 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = LayerPropertyView;
 
-var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _TabView = _interopRequireDefault(require("../../common/tab/TabView"));
-
-var _Setting = _interopRequireDefault(require("./SettingTab/Setting"));
-
 var _RelateData = _interopRequireDefault(require("./DataTab/RelateData"));
 
-var _useHtElement = _interopRequireDefault(require("../../../../../common/hooks/useHtElement"));
+var _BasicSetting = _interopRequireDefault(require("./BasicSetting"));
+
+var _LayerPropertyViewModule = _interopRequireDefault(require("./LayerPropertyView.module.scss"));
 
 function LayerPropertyView(props) {
   var topo = props.topo,
@@ -25,20 +21,16 @@ function LayerPropertyView(props) {
       values = props.values,
       onChange = props.onChange,
       settingRuntimeState = props.settingRuntimeState,
-      editorProps = props.editorProps;
-  var layer = (0, _useHtElement["default"])({
-    topo: topo,
-    id: values.id
-  });
-  return /*#__PURE__*/_react["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/_react["default"].createElement(_RelateData["default"], (0, _extends2["default"])({
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _LayerPropertyViewModule["default"].container
+  }, /*#__PURE__*/_react["default"].createElement(_BasicSetting["default"], (0, _extends2["default"])({
     layer: layer
-  }, props))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
-  }, /*#__PURE__*/_react["default"].createElement(_Setting["default"], (0, _extends2["default"])({
+  }, props)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _LayerPropertyViewModule["default"].data
+  }, /*#__PURE__*/_react["default"].createElement(_RelateData["default"], (0, _extends2["default"])({
     layer: layer
   }, props))));
 }

package/lib/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/lib/core/editor/components/settings/propertyViews/layer/LayerPropertyViewV1.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = LayerPropertyView;
+
+var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TabView = _interopRequireDefault(require("../../common/tab/TabView"));
+
+var _Setting = _interopRequireDefault(require("./SettingTab/Setting"));
+
+var _RelateData = _interopRequireDefault(require("./DataTab/RelateData"));
+
+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["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/_react["default"].createElement(_RelateData["default"], (0, _extends2["default"])({
+    layer: layer
+  }, props))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/_react["default"].createElement(_Setting["default"], (0, _extends2["default"])({
+    layer: layer
+  }, props))));
+}

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

@@ -53,7 +53,7 @@ function BasicSetting(props) {
     field: field,
     labelAlign: "top",
     style: {
-      margin: '12px 0 0 32px'
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u56FE\u7247\u540D\u79F0"

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

@@ -156,7 +156,8 @@ 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["default"].createElement(_NodeRelateResourceButton["default"], {

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

@@ -39,6 +39,7 @@ function NodeRelateResourceButton(props) {
   return !hide ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
     type: "primary",
     text: true,
+    size: "xs",
     onClick: function onClick() {
       setVisible(true);
     }

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

@@ -82,7 +82,7 @@ function TextPropertyView(props) {
     field: field,
     labelAlign: "top",
     style: {
-      margin: '12px 0 0 32px'
+      margin: '12px 16px 0 32px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u6587\u672C"

package/lib/core/models/TopoApp.js

@@ -52,7 +52,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "6.0.0-alpha.43" === 'string' ? "6.0.0-alpha.43" : null;
+var version = typeof "6.0.0-alpha.44" === 'string' ? "6.0.0-alpha.44" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "6.0.0-alpha.43",
+  "version": "6.0.0-alpha.44",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.43/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.44/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }