@riil-frontend/component-topology 6.0.0-alpha.5 → 6.0.0-alpha.50

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,33 @@
+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);
+  var background = formatBackgroundRgbaColor(prevStyle, style);
+  element.s('textBackground', background);
+
+  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.selectionModel.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,21 @@
+@import '~@alifd/next/variables.scss';
+
+
+.panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+
+  
+  :global {
+    .#{$css-prefix}drawer-header {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
+}
+.body {
+  flex: 1;
+  overflow: auto;
+}

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

@@ -1,37 +1,61 @@
-import React from 'react';
+import classNames from 'classnames';
+import React, { useEffect, useMemo } from 'react';
+import CloseablePanel from "./CloseablePanel";
+import PropertyViewManager from "./core/PropertyViewManager";
 import Settings from "./Settings";
 import styles from "./Settings.module.scss";
-export default function PropertyView(props) {
+export default function PropertyPanel(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;
+  var propertyViewManager = useMemo(function () {
+    return new PropertyViewManager(topo);
+  }, []);
+  useEffect(function () {
+    if (graphLoaded) {
+      propertyViewManager.init();
+    }
 
-  if (!topoId || !topoShowType) {
-    return null;
-  }
+    return function () {
+      propertyViewManager.destroy();
+    };
+  }, [graphLoaded, propertyViewManager]);
 
   var renderContent = function renderContent() {
-    if (!topoId || !topoShowType) {
+    if (!propertyPanelVisible) {
       return null;
     }
 
     return /*#__PURE__*/React.createElement(Settings, {
       topo: topo,
+      selection: selection,
+      propertyViewManager: propertyViewManager,
       topoShowType: topoShowType,
       topoEditApi: topo.topoEdit,
-      selection: selection,
       editorProps: editorProps
     });
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.settingsPanel
-  }, renderContent());
+    className: classNames(styles.propertyPanel, (_classNames = {}, _classNames[styles.hide] = !propertyPanelVisible, _classNames))
+  }, /*#__PURE__*/React.createElement(CloseablePanel, {
+    title: "\u6570\u636E\u5C5E\u6027",
+    onClose: function onClose() {
+      propertyViewManager.close();
+    }
+  }, renderContent()));
 }

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

@@ -1,141 +1,67 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from "react";
-import { isEdge, isGroup, isLayer, isNode, isText } from "../../../../utils/htElementDataUtil";
-import propertyPanelMap from "./propertyViews";
+import React, { useEffect, useMemo, useState } from 'react';
 import useSettingRuntimeState from "./useSettingRuntimeState";
-import styles from "./Settings.module.scss";
+import updateElementProperty from "./core/updateElementProperty";
 
-function getElementType(selection) {
-  var selectionElement = selection[0];
-  var selectionSize = selection.length;
-  var elementType;
-
-  if (!selectionSize) {
-    // 未选
-    elementType = "view";
-  } else if (selectionSize >= 2) {
-    // 多选
-    elementType = "multiple";
-  } else if (isGroup(selectionElement)) {
-    elementType = "group";
-  } else if (selectionElement.attrObject.topLeftText) {
-    // TODO 临时方式
-    elementType = "box";
-  } else if (isNode(selectionElement)) {
-    elementType = "node";
-  } else if (isEdge(selectionElement)) {
-    elementType = "edge";
-  } else if (isLayer(selectionElement)) {
-    // 分层
-    elementType = "layer";
-  } else if (isText(selectionElement)) {
-    elementType = "text";
-  }
+function buildElementValues(selection) {
+  var values = _extends({}, selection[0]);
 
-  return elementType;
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
+  attrTypes.forEach(function (type) {
+    Object.keys(values[type] || {}).forEach(function (key) {
+      values[type + "." + key] = values[type][key];
+    });
+  });
+  return values;
 }
 
-export default function Settings(props) {
+export default function PropertyViewContainer(props) {
   var topo = props.topo,
       topoShowType = props.topoShowType,
       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 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.")) {
-      element.setAttr(name.replace("attrObject.", ""), value);
-    } else if (name.startsWith("position.")) {
-      element.setPosition(name.replace("position.", ""), value);
-    } else if (name.startsWith("styleMap.")) {
-      element.setStyle(name.replace("styleMap.", ""), value);
-    } else if (name === "name") {
-      element.setName(value);
-    } else if (name === "width") {
-      element.setWidth(value);
-    } else if (name === "height") {
-      element.setHeight(value);
-    } else if (name === "image") {
-      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);
+      editorProps = props.editorProps,
+      propertyViewManager = props.propertyViewManager;
+  var settingRuntimeState = useSettingRuntimeState();
+  var selectionElements = useMemo(function () {
+    return topo.selectionModel.getSelection();
+  }, [selection]);
+  var PropertyView = propertyViewManager.getPropertyView(selection); // 不建议使用，直接使用ht元素对象。待优化
+
+  var singleElementValues = useMemo(function () {
+    return selection.length === 1 ? buildElementValues(selection) : undefined;
+  }, [selection]);
+  useEffect(function () {
+    if (!PropertyView) {
+      propertyViewManager.close();
     }
-  };
-
-  var elementType = getElementType(selection);
-  var PropertyView = propertyPanelMap[elementType];
+  }, [PropertyView, propertyViewManager]);
 
   if (!PropertyView) {
     return null;
   }
 
-  var attrTypes = ["attrObject", "position", "styleMap"];
+  var elementProps = {};
 
-  var values = _extends({}, selection[0]);
+  if (selection.length === 1) {
+    elementProps = {
+      selectionElement: selectionElements[0],
+      values: singleElementValues
+    };
+  }
 
-  attrTypes.forEach(function (type) {
-    Object.keys(values[type] || {}).forEach(function (key) {
-      values[type + "." + key] = values[type][key];
-    });
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.settings
-  }, /*#__PURE__*/React.createElement(PropertyView, {
-    type: elementType,
+  return /*#__PURE__*/React.createElement(PropertyView, _extends({
     topo: topo,
+    selection: selection,
+    selectionElements: selectionElements,
     topoShowType: topoShowType,
     topoEdit: topoEditApi,
     topoEditApi: topoEditApi,
-    selection: selection,
-    values: values,
-    onChange: updateElementProperty,
-    editorProps: editorProps,
+    editorProps: editorProps
+  }, elementProps, {
+    onChange: function onChange(name, value) {
+      updateElementProperty(topo, name, value);
+    },
     settingRuntimeState: settingRuntimeState
   }));
 }

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

@@ -1,20 +1,23 @@
 @import '~@alifd/next/variables.scss';
 
-.settingsPanel {
+.propertyPanel {
   width: 280px;
   height: 100%;
   position: absolute;
   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;
+  &.hide {
+    width: 0;
+    border-left: none;
+  }
 
   :global {
     // 滚动条
@@ -71,10 +74,3 @@
     align-items: center;
   }
 }
-
-.settings {
-  flex: 1;
-  background: #FFFFFF;
-  overflow: auto;
-  // padding-bottom: 12px;
-}