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

package/es/core/editor/components/Toolbar/Toolbar.module.scss

@@ -1,19 +1,30 @@
-.toolbarContainer {
-  height: 54px;
+.toolbarWrap {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all .1s linear;
+
+  &.normal {
+    height: 54px;
+  }
+
+  &.expanded {
+    height: 40px;
+  }
 }
 
 .content {
+  height: 100%;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow-x: auto;
 }
 
-.widgets {
+.toolbarContainer {
   display: flex;
+  min-width: 1060px;
 }
 
 .right {

package/es/core/editor/components/Toolbar/buttons.js

@@ -16,21 +16,24 @@ import BoxBackgroundButton from "./widgets/BoxBackgroundButton";
 import EdgeColorButton from "./widgets/EdgeColorButton";
 import NodeImageButton from "./widgets/NodeImageButton";
 import NodeSizeButton from "./widgets/NodeSizeButton";
-export default [AddResourceButton, // 添加资源
-Divider, CanvasSelectWidget, // 选择
-CanvasMoveWidget, // 移动
-Divider, HistoryUndoButton, // 撤销
-HistoryRedoButton, // 恢复
-Divider, FontFamilyWidget, // 字体
-FontSizeWidget, // 字号
-FontStyleButton, // 文字样式
-FontColorButton, // 文字颜色
-Divider, BoxBackgroundButton, // 框背景
-Divider, EdgeColorButton, // 线条颜色
-EdgeTypeButton, // 线形
-Divider, NodeImageButton, // 替换图片
-NodeSizeButton, // 图片尺寸
-Divider, Layout, // 布局方式
-NodeAlignWidget, // 对齐方式
-SearchWidget // 搜索
-];
+export default function getButtons(isNetworkTopo) {
+  return [].concat(isNetworkTopo ? [AddResourceButton, // 添加资源
+  Divider] : [], [CanvasSelectWidget, // 选择
+  CanvasMoveWidget, // 移动
+  Divider], isNetworkTopo ? [HistoryUndoButton, // 撤销
+  // HistoryRedoButton, // 恢复
+  Divider] : [], [FontFamilyWidget, // 字体
+  FontSizeWidget, // 字号
+  FontStyleButton, // 文字样式
+  FontColorButton, // 文字颜色
+  Divider, // BoxBackgroundButton, // 框背景
+  // Divider,
+  EdgeColorButton, // 线条颜色
+  EdgeTypeButton, // 线形
+  Divider, NodeImageButton, // 替换图片
+  NodeSizeButton, // 图片尺寸
+  Divider, Layout, // 布局方式
+  NodeAlignWidget // 对齐方式
+  // SearchWidget, // 搜索
+  ]);
+}

package/es/core/editor/components/Toolbar/widgets/AddResourceButton.js

@@ -27,16 +27,16 @@ function AddResourceButton(props) {
 
   var _useState = useState(getAddType(selection)),
       addType = _useState[0],
-      setAddType = _useState[1]; // 选中分层添加
+      setAddType = _useState[1];
 
+  useEffect(function () {
+    setAddType(getAddType(selection));
+  }, [selection]); // 选中分层添加
 
   var layerAddResource = useLayerAddResource({
     topo: topo,
     topoEdit: topoEdit
   });
-  useEffect(function () {
-    setAddType(getAddType(selection));
-  }, [selection]);
 
   var handleClick = function handleClick() {
     if (!addType) {
@@ -48,11 +48,12 @@ function AddResourceButton(props) {
     } else if (addType === 'group') {
       // 选中区域添加资源
       var group = selection[0];
-      topoEdit.groupAddResource.open(group);
+      var htGroup = topo.getHtTopo().getGraphView().getDataModel().getDataById(group.id);
+      topoEdit.groupAddResource.open(htGroup);
     }
   };
 
-  return /*#__PURE__*/React.createElement(WidgetBox, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6DFB\u52A0\u8D44\u6E90",
     tooltip: "\u6DFB\u52A0\u8D44\u6E90",
     showLabel: showLabel
@@ -61,7 +62,7 @@ function AddResourceButton(props) {
   }, /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/add/Normal.svg",
     alt: ""
-  })), addType === 'layer' && /*#__PURE__*/React.createElement(LayerAddResourceDrawer, {
+  }))), addType === 'layer' && /*#__PURE__*/React.createElement(LayerAddResourceDrawer, {
     layer: selection[0],
     editorProps: editorProps,
     layerAddResource: layerAddResource

package/es/core/editor/components/Toolbar/widgets/CanvasMoveWidget.js

@@ -3,12 +3,23 @@ import WidgetBox from "./WidgetBox";
 import ButtonBox from "./components/ButtonBox";
 
 function CanvasMoveWidget(props) {
-  var showLabel = props.showLabel;
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      topoEdit = props.topoEdit;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoEdit'),
+      viewMouseMode = _topo$store$useModelS.viewMouseMode;
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u79FB\u52A8",
     tooltip: "\u79FB\u52A8",
     showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(ButtonBox, null, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(ButtonBox, {
+    active: viewMouseMode === 'move',
+    onClick: function onClick() {
+      topoEdit.setViewMouseMode('move');
+    }
+  }, /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/drag/Normal.svg",
     alt: ""
   })));

package/es/core/editor/components/Toolbar/widgets/CanvasSelectWidget.js

@@ -3,13 +3,22 @@ import WidgetBox from "./WidgetBox";
 import ButtonBox from "./components/ButtonBox";
 
 function CanvasSelectWidget(props) {
-  var showLabel = props.showLabel;
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      topoEdit = props.topoEdit;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoEdit'),
+      viewMouseMode = _topo$store$useModelS.viewMouseMode;
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u9009\u62E9",
     tooltip: "\u9009\u62E9",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(ButtonBox, {
-    active: true
+    active: viewMouseMode === 'select',
+    onClick: function onClick() {
+      topoEdit.setViewMouseMode('select');
+    }
   }, /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/select/Normal.svg",
     alt: ""

package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js

@@ -1,8 +1,52 @@
+/* eslint-disable no-undef */
+
+/* eslint-disable jsx-a11y/alt-text */
 import React from 'react';
+import ColorPanel from "../../../../../../components/ColorPanel";
+import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
 
 function Content(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "xxx");
+  var topo = props.topo,
+      onChange = props.onChange,
+      onPickerFocus = props.onPickerFocus,
+      onPickerBlur = props.onPickerBlur,
+      lineSizeChange = props.lineSizeChange,
+      lineWidth = props.lineWidth;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '6px',
+      marginLeft: '12px',
+      marginBottom: '6px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, "\u7EBF"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 183,
+      display: 'flex',
+      marginTop: '8px'
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    style: {
+      width: 14,
+      height: 14
+    },
+    src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/\u8FB9\u6846.svg",
+    title: "\u7EBF\u6761\u5BBD\u5EA6"
+  }), /*#__PURE__*/React.createElement(FontColorRange, {
+    defaultValue: lineWidth,
+    min: 1,
+    max: 10,
+    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    onChange: lineSizeChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '5px',
+      marginLeft: '-5px'
+    }
+  }, /*#__PURE__*/React.createElement(ColorPanel, {
+    onChange: onChange,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur
+  })));
 }
 
 export default Content;

package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "showLabel"];
 import React, { useEffect, useState } from 'react';
+import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
 import DropdownButton from "../components/DropdownButton";
 import WidgetBox from "../WidgetBox";
 import Content from "./Content";
@@ -17,13 +19,97 @@ function EdgeColorButton(props) {
 
   var _useState = useState(true),
       disabled = _useState[0],
-      setDisabled = _useState[1]; // 选中的元素
+      setDisabled = _useState[1];
 
+  var _useState2 = useState(1),
+      lineWidth = _useState2[0],
+      setLineWidth = _useState2[1]; // 拓扑图是否加载
+
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
+
+
+  var selection = topo.selectionManager.useHtSelection();
+
+  var loopEdges = function loopEdges(edges, operateEdgeFn) {
+    edges.forEach(function (edge) {
+      operateEdgeFn(edge);
+    });
+  };
+
+  var getLines = function getLines(list) {
+    // eslint-disable-next-line prefer-const
+    var arr = [];
+    loopEdges(list, function (edge) {
+      // eslint-disable-next-line eqeqeq
+      if (edge.getAttrObject().type == 'line') {
+        arr.push(edge);
+      }
+    });
+    return arr;
+  };
 
-  var selection = topo.selectionManager.useSelection();
   useEffect(function () {
-    setDisabled(false);
-  }, [selection]);
+    if (graphLoaded) {
+      var edges = getEdgesBySelection(topo);
+      var list = getLines(edges);
+      setLineWidth(1); // eslint-disable-next-line eqeqeq
+
+      if (selection.length == 1 && selection[0].a('type') == 'line') {
+        setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
+      }
+
+      setDisabled(!list.length);
+    }
+  }, [selection, graphLoaded]);
+
+  var colorOnChange = function colorOnChange(colors, type) {
+    // eslint-disable-next-line eqeqeq
+    if (type == 'select') topo.historyManager.beginTransaction();
+    var edges = getEdgesBySelection(topo);
+    loopEdges(edges, function (edge) {
+      // eslint-disable-next-line eqeqeq
+      if (edge.getAttrObject().type == 'line') {
+        var color = colors.hex;
+        edge.s('edge.color', color);
+        edge.s('edge.dash.color', color);
+        var style = edge.a('styles') || {};
+        edge.a('styles', _extends({}, style, {
+          color: color
+        }));
+      }
+    }); // eslint-disable-next-line eqeqeq
+
+    if (type == 'select') topo.historyManager.endTransaction();
+  };
+
+  var onPickerFocus = function onPickerFocus() {
+    // topo.getHtTopo().getGraphView().dm().sm().ld()
+    topo.historyManager.beginTransaction();
+  };
+
+  var onPickerBlur = function onPickerBlur() {
+    topo.historyManager.endTransaction();
+  };
+
+  var lineSizeChange = function lineSizeChange(width) {
+    var edges = getEdgesBySelection(topo);
+    topo.historyManager.beginTransaction();
+    loopEdges(edges, function (edge) {
+      // eslint-disable-next-line eqeqeq
+      if (edge.getAttrObject().type == 'line') {
+        edge.s('edge.dash.width', width);
+        edge.s('edge.width', width);
+        var style = edge.a('styles') || {};
+        edge.a('styles', _extends({}, style, {
+          width: width
+        }));
+      }
+    });
+    topo.historyManager.endTransaction();
+  };
+
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/Disable.svg",
     alt: ""
@@ -39,7 +125,12 @@ function EdgeColorButton(props) {
     disabled: disabled,
     trigger: icon
   }, /*#__PURE__*/React.createElement(Content, {
-    topo: topo
+    topo: topo,
+    onChange: colorOnChange,
+    onPickerFocus: onPickerFocus,
+    onPickerBlur: onPickerBlur,
+    lineSizeChange: lineSizeChange,
+    lineWidth: lineWidth
   })));
 }
 

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -1,8 +1,189 @@
-import React from 'react';
+import _Field from "@alifd/next/es/field";
+import _Select from "@alifd/next/es/select";
+import _Form from "@alifd/next/es/form";
+import React, { useEffect } from 'react';
+import styles from "./EdgeType.module.scss";
+import LineType from "./LineType";
+var FormItem = _Form.Item;
+var Option = _Select.Option;
+var START_TYPE_OPTIONS = [{
+  value: 'nil',
+  label: '无',
+  icon: 'topo_startEndPoint_icon_nothing'
+}, // {
+//   value: 'sourceNoneCircle',
+//   label: '空心圆',
+//   icon: 'topo_startPoint_icon_hollow_cricle',
+// },
+{
+  value: 'sourceSolidCircle',
+  label: '实心圆',
+  icon: 'topo_startPoint_icon_solid_cricle'
+}, {
+  value: 'sourceArrow',
+  label: '箭头',
+  icon: 'topo_startPoint_icon_arrow'
+}];
+var END_TYPE_OPTIONS = [{
+  value: 'nil',
+  label: '无',
+  icon: 'topo_startEndPoint_icon_nothing'
+}, // {
+//   value: 'targetNoneCircle',
+//   label: '空心圆',
+//   icon: 'topo_endPoint_icon_hollow_cricle',
+// },
+{
+  value: 'targetSolidCircle',
+  label: '实心圆',
+  icon: 'topo_endPoint_icon_solid_cricle'
+}, {
+  value: 'targetArrow',
+  label: '箭头',
+  icon: 'topo_endPoint_icon_arrow'
+}];
+var LINE_MOLD_OPTIONS = [{
+  value: 'solidLine',
+  label: '实线',
+  icon: 'topo_lineMold_solid'
+}, {
+  value: 'dottedLine',
+  label: '虚线',
+  icon: 'topo_lineMold_dotted'
+}, {
+  value: 'dottedLine1',
+  label: '虚线1',
+  icon: 'topo_lineMold_dotted_one'
+}, {
+  value: 'dottedLine2',
+  label: '虚线2',
+  icon: 'topo_lineMold_dotted_two'
+}];
+
+function getValuesBySelection(selection) {
+  var values = {
+    startPoint: undefined,
+    endPoint: undefined,
+    lineMold: undefined
+  }; // 仅一条连线选中时回显
+
+  if (selection.length === 1) {
+    var edge = selection[0];
+    values = {
+      startPoint: 'nil',
+      endPoint: 'nil',
+      lineMold: edge.a('lineMode') || 'solidLine'
+    };
+    var icons = edge.s('icons') || {};
+    ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (name) {
+      if (icons[name]) {
+        values.startPoint = name;
+      }
+    });
+    ['targetArrow', 'targetSolidCircle', 'targetNoneCircle'].forEach(function (name) {
+      if (icons[name]) {
+        values.endPoint = name;
+      }
+    });
+  }
+
+  return values;
+}
 
 function EdgeType(props) {
-  // const {  } = props
-  return /*#__PURE__*/React.createElement("div", null, "\u7EBF\u5F62\u8BBE\u7F6E");
+  var selection = props.selection,
+      _onChange = props.onChange;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: getValuesBySelection(selection),
+    onChange: function onChange(name, value) {
+      if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
+        _onChange(name, null);
+      } else {
+        _onChange(name, value);
+      }
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(getValuesBySelection(selection));
+  }, [selection]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.lineBox
+  }, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    inline: true,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(LineType, {
+    name: "lineButton"
+  })), /*#__PURE__*/React.createElement(FormItem, {
+    label: "\u8D77\u70B9"
+  }, /*#__PURE__*/React.createElement(_Select, {
+    name: "startPoint",
+    placeholder: " ",
+    popupProps: {
+      container: function container(trigger) {
+        return trigger.parentNode;
+      }
+    }
+  }, START_TYPE_OPTIONS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Option, {
+      value: item.value,
+      key: index,
+      title: item.label,
+      onchange: _onChange
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+      alt: "",
+      className: styles.iconImg
+    }));
+  }))), /*#__PURE__*/React.createElement(FormItem, {
+    label: "\u7EC8\u70B9"
+  }, /*#__PURE__*/React.createElement(_Select, {
+    name: "endPoint",
+    placeholder: " ",
+    popupProps: {
+      container: function container(trigger) {
+        return trigger.parentNode;
+      }
+    }
+  }, END_TYPE_OPTIONS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Option, {
+      value: item.value,
+      key: index,
+      title: item.label,
+      onchange: _onChange
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+      alt: "",
+      className: styles.iconImg
+    }));
+  }))), /*#__PURE__*/React.createElement(FormItem, {
+    label: "\u7C7B\u578B"
+  }, /*#__PURE__*/React.createElement(_Select, {
+    name: "lineMold",
+    popupProps: {
+      container: function container(trigger) {
+        return trigger.parentNode;
+      }
+    },
+    placeholder: " "
+  }, LINE_MOLD_OPTIONS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Option, {
+      value: item.value,
+      key: index // title={item.label}
+      ,
+      onchange: _onChange
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+      alt: "",
+      className: styles.iconImg
+    }));
+  })))));
 }
 
+EdgeType.defaultProps = {
+  onChange: function onChange(v) {}
+};
 export default EdgeType;

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss

@@ -0,0 +1,44 @@
+@import '~@alifd/next/variables.scss';
+
+.lineBox{
+  width: 236px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  margin-bottom: -7px;
+
+  :global {
+    .#{$css-prefix}form-item:first-child{
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    .#{$css-prefix}form-item {
+      margin-top: 7px;
+      margin-bottom: 7px;
+    }
+    .#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:not(:last-child) {
+      margin-right: 8px;
+      .#{$css-prefix}select-trigger {
+        min-width: 0;
+        width: 64px;
+        height: 28px;
+        .#{$css-prefix}select-inner {
+          min-width:0 !important;
+        }
+      }
+    }
+    .#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:last-child{
+    .#{$css-prefix}select-trigger {
+      min-width: 0;
+      width: 88px;
+      height: 28px;
+      .#{$css-prefix}select-inner {
+        min-width:0 !important;
+      }
+    }
+    }
+    .#{$css-prefix}input.#{$css-prefix}medium .#{$css-prefix}input-text-field {
+      line-height: calc(28px - 10px * 2);
+      padding: 0 7px;
+    }
+  }
+}

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -0,0 +1,53 @@
+import _Button from "@alifd/next/es/button";
+import _Balloon from "@alifd/next/es/balloon";
+import React, { useState } from 'react';
+import styles from "./LineType.module.scss";
+var Tooltip = _Balloon.Tooltip;
+var LINE_TYPE_OPTIONS = [{
+  value: 'boundary',
+  label: '直线',
+  icon: 'topo_linear_icon_straightline'
+}, {
+  value: 'oposite',
+  label: '内向双向箭头',
+  icon: 'topo_linear_icon_narrow_straightline'
+}, {
+  value: 'h.v',
+  label: '折线',
+  icon: 'topo_linear_icon_vertical_foldline'
+}, {
+  value: 'ortho',
+  label: '双折线',
+  icon: 'topo_linear_icon_bilinear'
+}, {
+  value: 'flex',
+  label: '双弧线',
+  icon: 'topo_linear_icon_arcline'
+}];
+var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onChange = props.onChange;
+
+  function lineButton(item) {
+    return /*#__PURE__*/React.createElement(_Button, {
+      className: "" + styles.redioBtn,
+      onClick: function onClick() {
+        onChange(item.value);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+      alt: "",
+      className: styles.iconImg
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.lineType
+  }, LINE_TYPE_OPTIONS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: lineButton(item),
+      align: "br",
+      key: index
+    }, item.label);
+  }));
+});
+export default LineType;

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss

@@ -0,0 +1,31 @@
+.lineType{
+  display:flex;
+  .redioBtn {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: none !important;
+    color: #4D6277;
+    padding: 0;
+    margin-right: 16px;
+    text-align: center;
+
+    .iconImg {
+      vertical-align: middle;
+    }
+
+    &:active {
+      background: #F2F7FD !important;
+    }
+
+    &:hover {
+      background: #F2F7FD !important;
+    }
+  }
+  .redioBtn:last-child{
+    margin-right: 0;
+  }
+}
+.iconImg {
+  vertical-align: middle;
+}