@riil-frontend/component-topology 6.0.0-alpha.3 → 6.0.0-alpha.31

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

@@ -5,35 +5,37 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
+
 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"];
+var _excluded = ["label", "showLabel", "tooltip", "disabled", "children"];
 
 function WidgetBox(props) {
   var label = props.label,
       showLabel = props.showLabel,
       tooltip = props.tooltip,
       disabled = props.disabled,
-      children = props.children;
+      children = props.children,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
 
-  var button = /*#__PURE__*/_react["default"].createElement("button", {
+  var button = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     disabled: disabled,
-    type: "button",
     className: _WidgetBoxModule["default"].container
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, otherProps), /*#__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 +44,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,
@@ -33,15 +34,29 @@ function DropdownButton(props) {
 
   var button = /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], {
     active: visible,
+    disabled: disabled,
     showArrow: showArrow
   }, trigger);
 
+  var renderContent = function renderContent() {
+    if (!visible) {
+      return /*#__PURE__*/_react["default"].createElement("div", null);
+    }
+
+    if (showContainer) {
+      return /*#__PURE__*/_react["default"].createElement(PopupCard, null, children);
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
     visible: visible,
+    disabled: disabled,
     trigger: button,
     triggerType: "click",
     onVisibleChange: setVisible
-  }, !showContainer ? children : /*#__PURE__*/_react["default"].createElement(PopupCard, null, children));
+  }, renderContent());
 }
 
 DropdownButton.propTypes = {

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

@@ -16,18 +16,23 @@ var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
 function DropdownMenu(props) {
   var value = props.value,
       children = props.children,
+      multiple = props.multiple,
       onChange = props.onChange,
       valueRender = props.valueRender;
   var selectedKeys = Array.isArray(value) ? value : [value];
   var valueDisplay = valueRender ? valueRender(value) : value;
+  var selectMode = multiple ? 'multiple' : 'single';
+
+  var menu = /*#__PURE__*/_react["default"].createElement(_menu["default"], {
+    selectMode: selectMode,
+    selectedKeys: selectedKeys,
+    onSelect: onChange
+  }, children);
+
   return /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
     trigger: valueDisplay,
     showContainer: false
-  }, /*#__PURE__*/_react["default"].createElement(_menu["default"], {
-    selectMode: "single",
-    selectedKeys: selectedKeys,
-    onSelect: onChange
-  }, children));
+  }, multiple ? /*#__PURE__*/_react["default"].createElement("div", null, menu) : menu);
 }
 
 _DropdownButton["default"].propTypes = {

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _configProvider = _interopRequireDefault(require("@alifd/next/lib/config-provider"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CloseablePanelModule = _interopRequireDefault(require("./CloseablePanel.module.scss"));
+
+function CloseablePanel(props) {
+  var prefix = props.prefix,
+      title = props.title,
+      onClose = props.onClose,
+      children = props.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _CloseablePanelModule["default"].panel
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix + "drawer-header",
+    role: "heading",
+    "aria-level": "1"
+  }, title, /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    "aria-label": "\u5173\u95ED",
+    className: prefix + "drawer-close",
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    type: "close",
+    className: "next-drawer-close-icon"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _CloseablePanelModule["default"].body
+  }, children));
+}
+
+CloseablePanel.defaultProps = {
+  prefix: 'next-'
+};
+
+var _default = _configProvider["default"].config(CloseablePanel);
+
+exports["default"] = _default;

package/lib/core/editor/components/settings/CloseablePanel.module.scss

@@ -0,0 +1,9 @@
+.panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+.body {
+  flex: 1;
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = OpenPropertyPanelListener;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 OpenPropertyPanelListener(props) {
+  var topo = props.topo;
+  var topoEditDispatchers = topo.store.useModelDispatchers('topoEdit'); // 双击打开
+
+  (0, _react.useEffect)(function () {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on('topo_element_double_click', handleDblClick);
+
+    function handleDblClick(element) {
+      topoEditDispatchers.update({
+        propertyPanelVisible: true
+      });
+    }
+
+    return function () {
+      notifier.off('topo_element_double_click', handleDblClick);
+      topoEditDispatchers.update({
+        propertyPanelVisible: false
+      });
+    };
+  }, []); // 未选择元素关闭
+
+  var selection = topo.selectionManager.useHtSelection();
+  (0, _react.useEffect)(function () {
+    if (!selection.length) {
+      topoEditDispatchers.update({
+        propertyPanelVisible: false
+      });
+    }
+  }, [selection]);
+  return props.children;
+}

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

@@ -7,41 +7,59 @@ exports["default"] = PropertyView;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Settings = _interopRequireDefault(require("./Settings"));
 
+var _OpenPropertyPanelListener = _interopRequireDefault(require("./OpenPropertyPanelListener"));
+
+var _CloseablePanel = _interopRequireDefault(require("./CloseablePanel"));
+
 var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
 
 function PropertyView(props) {
+  var _classNames;
+
   var topo = props.topo,
       editorProps = props.editorProps;
   var store = topo.store;
   var topoState = store.useModelState('topoMod');
+  var topoShowType = topoState.type,
+      graphLoaded = topoState.graphLoaded;
 
   var _store$useModelState = store.useModelState('selection'),
       selection = _store$useModelState.selection;
 
-  var topoId = topoState.topoId,
-      topoShowType = topoState.type;
+  var _topo$store$useModel = topo.store.useModel('topoEdit'),
+      topoEditState = _topo$store$useModel[0],
+      topoEditDispatchers = _topo$store$useModel[1];
 
-  if (!topoId || !topoShowType) {
+  var propertyPanelVisible = topoEditState.propertyPanelVisible;
+
+  if (!graphLoaded) {
     return null;
   }
 
   var renderContent = function renderContent() {
-    if (!topoId || !topoShowType) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_OpenPropertyPanelListener["default"], {
+      topo: topo
+    }, /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
       topo: topo,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
       selection: selection,
       editorProps: editorProps
-    });
+    }));
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _SettingsModule["default"].settingsPanel
-  }, renderContent());
+    className: (0, _classnames["default"])(_SettingsModule["default"].settingsPanel, (_classNames = {}, _classNames[_SettingsModule["default"].settingsPanelHide] = !propertyPanelVisible, _classNames))
+  }, /*#__PURE__*/_react["default"].createElement(_CloseablePanel["default"], {
+    title: "\u6570\u636E\u5C5E\u6027",
+    onClose: function onClose() {
+      topoEditDispatchers.update({
+        propertyPanelVisible: false
+      });
+    }
+  }, renderContent()));
 }

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

@@ -53,17 +53,10 @@ function Settings(props) {
       topoEditApi = props.topoEditApi,
       selection = props.selection,
       editorProps = props.editorProps;
-  var settingRuntimeState = (0, _useSettingRuntimeState["default"])(); // const selectionSize = selection.length;
-  // const selectionIds = selection.map((item) => item.id).join(",");
-  // useEffect(() => {
-  // const selectionModel = topo.getSelectionModel();
-  // console.info('selection change', selection)
-  // }, [selection]);
-  // TODO 待优化
+  var settingRuntimeState = (0, _useSettingRuntimeState["default"])(); // TODO 待优化
 
   var updateElementProperty = function updateElementProperty(name, value) {
     // const element = topo.getDataModel().getDataById(selection[0].id);
-    var gv = topo.view.topoClient.getGraphView();
     var element = topo.getSelectionModel().getFirstData(); // console.info("updateElementProperty",topo.getSelectionModel().getSelection(), { selection, element, name, value });
 
     if (name.startsWith("attrObject.")) {
@@ -82,41 +75,8 @@ function Settings(props) {
       element.setImage(value);
     } else if (name === "layout") {
       // console.info("element----layout", element, value);
-      var layouType = value.id === "toward" ? "" + value.id + value.options.subId : value.id; // console.info(
-      //   "element----layout",
-      //   topo.view.topoClient.htTopoClient,
-      //   layouType
-      // );
-
-      topo.getHtTopo().layoutInContainer(layouType); // let autoLayout = new ht.layout.AutoLayout(gv);
-      // const layouType=value.id==='toward'?`${value.id}${value.options.subId}`:value.id;
-      // gv.dm().sm().ss(element.getChildren());
-      // 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);
+      var layouType = value.id === "toward" ? "" + value.id + value.options.subId : value.id;
+      topo.getHtTopo().layoutInContainer(layouType);
     }
   };
 
@@ -135,7 +95,7 @@ function Settings(props) {
     });
   });
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _SettingsModule["default"].settings
+    className: _SettingsModule["default"].content
   }, /*#__PURE__*/_react["default"].createElement(PropertyView, {
     type: elementType,
     topo: topo,

package/lib/core/editor/components/settings/Settings.module.scss

@@ -7,14 +7,17 @@
   top: 0;
   right: 0;
   border-radius: 2px;
-  //border: 1px solid #E6E7EB;
-  //border-left: none;
+  border-left: 1px solid #E6E7EB;
 
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: width .1s linear;
 
-  //margin-top: 47px;
+  &.settingsPanelHide {
+    width: 0;
+    border-left: none;
+  }
 
   :global {
     // 滚动条
@@ -72,9 +75,10 @@
   }
 }
 
-.settings {
+.content {
   flex: 1;
   background: #FFFFFF;
   overflow: auto;
   // padding-bottom: 12px;
+
 }

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;