@riil-frontend/component-topology 6.0.0-alpha.4 → 6.0.0-alpha.41

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+export function getTextStyle(element) {
+  var underline = null;
+  return _extends({
+    color: parseColor(element.a('link_ind_left_color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.a('link_ind_left_font')), parseBackground(element.a('link_ind_background')));
+}
+export function setTextStyle(element, style, topo) {
+  if ('background' in style || 'opacity' in style) {
+    // 背景颜色
+    var prevStyle = getTextStyle(element);
+    topo.getHtTopo().setEdgeLabelStyle(element, {
+      background: formatBackgroundRgbaColor(prevStyle, style)
+    });
+  } else {
+    topo.getHtTopo().setEdgeLabelStyle(element, style);
+  }
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+import nodeTag from "./nodeTag";
+export function getTextStyle(element) {
+  if (!element.isExpanded()) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    return nodeTag.getTextStyle(element);
+  }
+
+  var underline = element.s('text.decoration') === 'underline';
+  return _extends({
+    color: parseColor(element.s('group.title.color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.s('group.title.font')), parseBackground(element.s('group.title.background')));
+}
+export function setTextStyle(element, style, topo) {
+  if (!element.isExpanded()) {
+    // eslint-disable-next-line import/no-named-as-default-member
+    return nodeTag.setTextStyle(element, style, topo);
+  } // if ('underline' in style) {
+  // }
+
+
+  if ('color' in style) {
+    element.s('group.title.color', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.s('group.title.background', formatBackgroundRgbaColor(prevStyle, style));
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  element.s('group.title.font', fontStr);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/index.js

@@ -0,0 +1,14 @@
+import text from "./text";
+import nodeTag from "./nodeTag";
+import edgeTag from "./edgeTag";
+import groupTitle from "./groupTitle";
+import layerTitle from "./layerTitle";
+import box from "./box";
+export default {
+  nodeTag: nodeTag,
+  edgeTag: edgeTag,
+  text: text,
+  groupTitle: groupTitle,
+  layerTitle: layerTitle,
+  box: box
+};

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/layerTitle.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+var defaultStyle = {};
+
+function getLabelStyle(element) {
+  return _extends({}, defaultStyle, element.a('labelStyle') || {});
+}
+
+function setLabelStyle(element, style) {
+  element.a('labelStyle', _extends({}, element.a('labelStyle'), style)); // eslint-disable-next-line no-underscore-dangle
+
+  element.__labelNode.a(style);
+
+  console.error(element.__labelNode.getAttrObject());
+} // 分层标题文字样式
+
+
+export function getTextStyle(element) {
+  var style = getLabelStyle(element);
+  var underline = null;
+  return _extends({
+    color: parseColor(style.fontColor),
+    underline: underline
+  }, fontStyleUtil.toMap(style.font), parseBackground(style.background));
+}
+export function setTextStyle(element, style) {
+  // if ('underline' in style) {
+  // }
+  var labelStyle = {};
+
+  if ('color' in style) {
+    labelStyle.fontColor = style.color.hex;
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  labelStyle.background = formatBackgroundRgbaColor(prevStyle, style);
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  labelStyle.font = fontStr;
+  setLabelStyle(element, labelStyle);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/nodeTag.js

@@ -0,0 +1,36 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["color", "background", "opacity"];
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+export function getTextStyle(element) {
+  var underline = null;
+  return _extends({
+    color: parseColor(element.a('ht.color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.a('ht.font')), parseBackground(element.a('ht.background')));
+}
+export function setTextStyle(element, style, topo) {
+  var color = style.color,
+      background = style.background,
+      opacity = style.opacity,
+      otherStyle = _objectWithoutPropertiesLoose(style, _excluded);
+
+  var tagStyle = _extends({}, otherStyle);
+
+  if ('color' in style) {
+    tagStyle.color = color.hex;
+  }
+
+  if ('background' in style || 'opacity' in style) {
+    // 背景颜色
+    var prevStyle = getTextStyle(element);
+    tagStyle.background = formatBackgroundRgbaColor(prevStyle, style);
+  }
+
+  topo.getHtTopo().setNodeLabelStyle(element, tagStyle);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import fontStyleUtil from "../../../../../../settings/common/text/fontStyleUtil";
+import { formatBackgroundRgbaColor, parseBackground, parseColor } from "../colorUtil";
+export function getTextStyle(element) {
+  var underline = element.s('text.decoration') === 'underline';
+  return _extends({
+    color: parseColor(element.s('text.color')),
+    underline: underline
+  }, fontStyleUtil.toMap(element.s('text.font')), parseBackground(element.s('textBackground')));
+}
+export function setTextStyle(element, style) {
+  if ('underline' in style) {
+    element.s('text.decoration', style.underline ? 'underline' : null);
+  }
+
+  if ('color' in style) {
+    element.s('text.color', style.color.hex);
+  } // 背景颜色
+
+
+  var prevStyle = getTextStyle(element);
+  element.s('textBackground', formatBackgroundRgbaColor(prevStyle, style));
+
+  var fontStyle = _extends({}, getTextStyle(element), style);
+
+  var fontStr = fontStyleUtil.build(fontStyle);
+  element.s('text.font', fontStr);
+}
+export default {
+  getTextStyle: getTextStyle,
+  setTextStyle: setTextStyle
+};

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/textStyleUtil.js

@@ -0,0 +1,71 @@
+import { isGroup, isLayer, isNode, isText, isEdge } from "../../../../../../../../utils/htElementUtils";
+import typeMap from "./elements";
+
+function getElementType(element) {
+  if (isText(element)) {
+    return 'text';
+  } else if (element.a('type') === 'box') {
+    return 'box';
+  } else if (isGroup(element)) {
+    return 'groupTitle';
+  } else if (isNode(element)) {
+    return 'nodeTag';
+  } else if (isEdge(element)) {
+    return 'edgeTag';
+  } else if (isLayer(element)) {
+    return 'layerTitle';
+  }
+
+  return null;
+}
+
+export function getElementTextStyle(element) {
+  var type = getElementType(element);
+  var handler = typeMap[type];
+
+  if (handler) {
+    return handler.getTextStyle(element);
+  }
+
+  return null;
+}
+export function getTextStyle(htSelection, styleNames) {
+  if (htSelection.length === 1) {
+    var element = htSelection[0];
+    return getElementTextStyle(element);
+  } else if (htSelection.length) {
+    // 多选时值相同返回？
+    var values = htSelection.map(function (element) {
+      return getElementTextStyle(element);
+    }).filter(function (item) {
+      return !!item;
+    });
+
+    if (!values.length) {
+      return null;
+    }
+
+    var value = {};
+    styleNames.forEach(function (styleName) {
+      var val = values[0][styleName];
+      var different = values.filter(function (obj) {
+        return obj[styleName] !== val;
+      });
+
+      if (!different.length) {
+        value[styleName] = val;
+      }
+    });
+    return Object.keys(value).length ? value : null;
+  }
+
+  return null;
+}
+export function setTextStyle(element, style, topo) {
+  var type = getElementType(element);
+  var handler = typeMap[type];
+
+  if (handler) {
+    handler.setTextStyle(element, style, topo);
+  }
+}

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["Component"];
+import React, { useMemo } from 'react';
+import { setGlobalTagStyle, useValues } from "./globalTag";
+
+function GlobalTagStyleSetting(props) {
+  var topo = props.topo;
+
+  var Component = props.Component,
+      widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var values = useValues(topo);
+  var setStyle = useMemo(function () {
+    return function (style) {
+      return setGlobalTagStyle(topo, style);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    style: values,
+    setStyle: setStyle
+  }, widgetProps));
+}
+
+export default GlobalTagStyleSetting;

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/globalTag.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { formatBackgroundRgbaColor, parseBackground } from "../ElementTextStyleSetting/colorUtil";
+var defaultStyle = {
+  color: '#AFB9C2',
+  fontFamily: '微软雅黑'
+};
+export function useValues(topo) {
+  var displayConfigState = topo.store.useModelState('displayConfig');
+  var nodeLabelStyle = displayConfigState.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfigState.defaultEdgeLabelStyle;
+  return _extends({
+    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
+  }, parseBackground(nodeLabelStyle === null || nodeLabelStyle === void 0 ? void 0 : nodeLabelStyle.background));
+}
+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 style = buildStyle(styleData, nodeLabelStyle);
+
+  var globalNodeLabelStyle = _extends({}, nodeLabelStyle, style);
+
+  topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
+  var globalEdgeTagStyle = globalNodeLabelStyle;
+  topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
+  displayConfigDispatchers.update({
+    nodeLabelStyle: globalNodeLabelStyle,
+    defaultEdgeLabelStyle: globalEdgeTagStyle
+  });
+};
+
+function buildStyle(styleData, prevTagStyle) {
+  var style = {};
+
+  if ('color' in styleData) {
+    style.color = styleData.color.hex;
+  }
+
+  if ('background' in styleData || 'opacity' in styleData) {
+    var prevBackgroundStyle = parseBackground(prevTagStyle === null || prevTagStyle === void 0 ? void 0 : prevTagStyle.background);
+    style.background = formatBackgroundRgbaColor(prevBackgroundStyle, styleData);
+  }
+
+  return style;
+}
+
+export function setStyle() {}

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/textStyleSettingRouter.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ElementTextStyleSetting from "./ElementTextStyleSetting/ElementTextStyleSetting";
+import GlobalTagStyleSetting from "./GlobalTagStyleSetting/GlobalTagStyleSetting";
+
+function textStyleSettingRouter(Component, options) {
+  var names = (options === null || options === void 0 ? void 0 : options.names) || [];
+  return function TextStyleSettingButton(props) {
+    var topo = props.topo;
+    var selection = topo.selectionManager.useHtSelection();
+    var Widget = !selection.length ? GlobalTagStyleSetting : ElementTextStyleSetting;
+    return /*#__PURE__*/React.createElement(Widget, _extends({
+      Component: Component
+    }, props, {
+      styleNames: names
+    }));
+  };
+}
+
+export default textStyleSettingRouter;

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

@@ -0,0 +1,33 @@
+import _ConfigProvider from "@alifd/next/es/config-provider";
+import _Icon from "@alifd/next/es/icon";
+import React from 'react';
+import styles from "./CloseablePanel.module.scss";
+
+function CloseablePanel(props) {
+  var prefix = props.prefix,
+      title = props.title,
+      onClose = props.onClose,
+      children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.panel
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "drawer-header",
+    role: "heading",
+    "aria-level": "1"
+  }, title, /*#__PURE__*/React.createElement("a", {
+    role: "button",
+    "aria-label": "\u5173\u95ED",
+    className: prefix + "drawer-close",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(_Icon, {
+    type: "close",
+    className: "next-drawer-close-icon"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, children));
+}
+
+CloseablePanel.defaultProps = {
+  prefix: 'next-'
+};
+export default _ConfigProvider.config(CloseablePanel);

package/es/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/es/core/editor/components/settings/OpenPropertyPanelListener.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+export default function OpenPropertyPanelListener(props) {
+  var topo = props.topo;
+  var topoEditDispatchers = topo.store.useModelDispatchers('topoEdit'); // 双击打开
+
+  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();
+  useEffect(function () {
+    if (!selection.length) {
+      topoEditDispatchers.update({
+        propertyPanelVisible: false
+      });
+    }
+  }, [selection]);
+  return props.children;
+}

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

@@ -1,37 +1,58 @@
+import classNames from 'classnames';
 import React from 'react';
+import CloseablePanel from "./CloseablePanel";
+import OpenPropertyPanelListener from "./OpenPropertyPanelListener";
 import Settings from "./Settings";
 import styles from "./Settings.module.scss";
 export default 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];
+
+  var propertyPanelVisible = topoEditState.propertyPanelVisible;
 
-  if (!topoId || !topoShowType) {
+  if (!graphLoaded) {
     return null;
   }
 
   var renderContent = function renderContent() {
-    if (!topoId || !topoShowType) {
+    if (!propertyPanelVisible) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Settings, {
+    return /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
+      topo: topo
+    }, /*#__PURE__*/React.createElement(Settings, {
       topo: topo,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
       selection: selection,
       editorProps: editorProps
-    });
+    }));
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.settingsPanel
-  }, renderContent());
+    className: classNames(styles.settingsPanel, (_classNames = {}, _classNames[styles.settingsPanelHide] = !propertyPanelVisible, _classNames))
+  }, /*#__PURE__*/React.createElement(CloseablePanel, {
+    title: "\u6570\u636E\u5C5E\u6027",
+    onClose: function onClose() {
+      topoEditDispatchers.update({
+        propertyPanelVisible: false
+      });
+    }
+  }, /*#__PURE__*/React.createElement(OpenPropertyPanelListener, {
+    topo: topo
+  }, renderContent())));
 }

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

@@ -41,17 +41,10 @@ export default function Settings(props) {
       topoEditApi = props.topoEditApi,
       selection = props.selection,
       editorProps = props.editorProps;
-  var settingRuntimeState = useSettingRuntimeState(); // 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 = useSettingRuntimeState(); // 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.")) {
@@ -70,41 +63,8 @@ export default 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);
     }
   };
 
@@ -125,7 +85,7 @@ export default function Settings(props) {
     });
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.settings
+    className: styles.content
   }, /*#__PURE__*/React.createElement(PropertyView, {
     type: elementType,
     topo: topo,

package/es/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/es/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss

@@ -6,7 +6,7 @@
       background: #EBECF0;
       margin-right: 3px;
       height: 16px;
-
+      width:1px;
     }
   }
 
@@ -16,7 +16,7 @@
     border-radius: 4px;
     border: none !important;
     color: #4D6277;
-    padding-left: 6px;
+    padding-left: 2px;
     margin-right: 3px;
 
     &:active {