@riil-frontend/component-topology 6.0.0-alpha.9 → 6.0.1

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

@@ -0,0 +1,42 @@
+.content {
+  margin: 4px 0px 0px 6px;
+ .fontColor{
+  width: 100%;
+  margin-bottom: 16px;
+  .colorPanelBox{
+    padding: 9px;
+    padding-top: 8px;
+  }
+  &>span{
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 17px;
+   }
+   
+ }
+ .backgroundColor{
+  width: 100%;
+  height: 159px;
+  .colorPanelBox{
+    padding: 9px;
+    padding-top: 0px;
+  }
+  &>span{
+    font-size: 12px;
+    color: black;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #4D6277;
+    line-height: 17px;
+   }
+   .backOpacity{
+    margin-top: 5px;
+    margin-bottom: 5px;
+    line-height: 8px;
+    display: flex;
+    flex-direction: row;
+   }
+ }
+}

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
 
 function FontFamilySelect(props) {
@@ -7,8 +8,15 @@ function FontFamilySelect(props) {
       onChange = props.onChange;
   var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
-    onChange: onChange
+    value: (items.includes(value) ? value : null) || '',
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 48
+        }
+      }, val || '微软雅黑');
+    },
+    onSelect: onChange
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
       key: item
@@ -21,20 +29,26 @@ function FontFamilySelect(props) {
 }
 
 function FontFamilyWidget(props) {
-  var showLabel = props.showLabel;
-
-  var _useState = useState('微软雅黑'),
-      value = _useState[0],
-      setValue = _useState[1];
-
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u5B57\u4F53",
     tooltip: "\u5B57\u4F53",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement(FontFamilySelect, {
-    value: value,
-    onChange: setValue
+    value: style.fontFamily,
+    onChange: function onChange(val) {
+      topo.historyManager.beginTransaction();
+      setStyle({
+        fontFamily: val
+      });
+      topo.historyManager.endTransaction();
+    }
   }));
 }
 
-export default FontFamilyWidget;
+export default textStyleSettingRouter(FontFamilyWidget, {
+  names: ['fontFamily']
+});

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

@@ -1,14 +1,26 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
 
 function FontSizeSelect(props) {
   var value = props.value,
+      disabled = props.disabled,
       onChange = props.onChange;
   var items = [9, 10, 11, 12, 14, 16, 18, 20, 24, 30, 36];
   return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
-    onChange: onChange
+    value: "" + (value || ''),
+    valueRender: function valueRender(val) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 18
+        }
+      }, val || 12);
+    },
+    disabled: disabled,
+    onSelect: function onSelect(val) {
+      return onChange(parseInt(val, 10));
+    }
   }, items.map(function (item) {
     return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
       key: item
@@ -17,19 +29,32 @@ function FontSizeSelect(props) {
 }
 
 function FontSizeWidget(props) {
-  var showLabel = props.showLabel;
-
-  var _useState = useState(12),
-      fontSize = _useState[0],
-      setFontSize = _useState[1];
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      style = props.style,
+      fieldDisabled = props.fieldDisabled,
+      setStyle = props.setStyle;
+  var disabled = fieldDisabled.fontSize; // 选中的元素
 
+  var selection = topo.selectionModel.useHtSelection();
+  useEffect(function () {}, [selection]);
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u5B57\u53F7",
-    showLabel: showLabel
+    showLabel: showLabel,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(FontSizeSelect, {
-    value: fontSize,
-    onChange: setFontSize
+    value: style.fontSize,
+    disabled: disabled,
+    onChange: function onChange(val) {
+      topo.historyManager.beginTransaction();
+      setStyle({
+        fontSize: val
+      });
+      topo.historyManager.endTransaction();
+    }
   }));
 }
 
-export default FontSizeWidget;
+export default textStyleSettingRouter(FontSizeWidget, {
+  names: ['fontSize']
+});

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

@@ -1,62 +1,115 @@
 import React, { useState, useEffect } from 'react';
+import { isText } from "../../../../../utils/htElementUtils";
 import DropdownMenu from "./components/DropdownMenu";
+import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
 import WidgetBox from "./WidgetBox";
+var items = [{
+  key: 'bold',
+  label: '加粗',
+  icon: 'bold'
+}, {
+  key: 'italic',
+  label: '斜体',
+  icon: 'Italics'
+}, {
+  key: 'underline',
+  label: '下划线',
+  icon: 'Underline'
+}];
 
-function FontFamilySelect(props) {
-  var value = props.value,
-      disabled = props.disabled,
-      onChange = props.onChange;
-  var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
-  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Disable.svg",
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/toolbar/bold/Normal.svg",
-    alt: ""
+function buildValue(obj) {
+  return Object.keys(obj).filter(function (key) {
+    return !!obj[key];
   });
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    value: value,
-    valueRender: function valueRender() {
-      return icon;
-    },
-    onChange: onChange
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      key: item
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontFamily: item
-      }
-    }, item));
-  }));
 }
 
 function FontStyleButton(props) {
   var topo = props.topo,
-      showLabel = props.showLabel;
+      showLabel = props.showLabel,
+      style = props.style,
+      setStyle = props.setStyle;
+
+  var _useState = useState(true),
+      disabled = _useState[0],
+      setDisabled = _useState[1];
 
-  var _useState = useState('微软雅黑'),
-      value = _useState[0],
-      setValue = _useState[1];
+  var bold = style.bold,
+      italic = style.italic,
+      underline = style.underline;
 
-  var _useState2 = useState(true),
-      disabled = _useState2[0],
-      setDisabled = _useState2[1]; // 选中的元素
+  var _useState2 = useState(buildValue({
+    bold: bold,
+    italic: italic,
+    underline: underline
+  })),
+      value = _useState2[0],
+      setValue = _useState2[1]; // 选中的元素
 
 
-  var selection = topo.selectionManager.useSelection();
+  var selection = topo.selectionModel.useHtSelection();
   useEffect(function () {
-    setDisabled(false);
+    var containText = selection.filter(function (ele) {
+      return isText(ele);
+    }).length;
+    setDisabled(!containText);
   }, [selection]);
+  useEffect(function () {
+    setValue(buildValue({
+      bold: bold,
+      italic: italic,
+      underline: underline
+    }));
+  }, [bold, italic, underline]);
+  /**
+   * 
+   * @param {Array} selectedKeys 
+   */
+
+  var handleSelect = function handleSelect(selectedKeys, item, extra) {
+    var _setStyle;
+
+    var key = extra.key,
+        select = extra.select;
+    topo.historyManager.beginTransaction();
+    setStyle((_setStyle = {}, _setStyle[key] = select, _setStyle));
+    topo.historyManager.endTransaction();
+  };
+
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u6587\u5B57\u6837\u5F0F",
     tooltip: "\u6587\u5B57\u6837\u5F0F",
+    disabled: disabled,
     showLabel: showLabel
-  }, /*#__PURE__*/React.createElement(FontFamilySelect, {
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
     value: value,
+    valueRender: function valueRender() {
+      return /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
+        alt: ""
+      });
+    },
+    multiple: true,
     disabled: disabled,
-    onChange: setValue
-  }));
+    onSelect: handleSelect
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      key: item.key
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: "/img/topo/editor/toolbar/" + item.icon + "/Normal.svg",
+      alt: ""
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: '#4d6277'
+      }
+    }, item.label)));
+  })));
 }
 
-export default FontStyleButton;
+export default textStyleSettingRouter(FontStyleButton, {
+  names: ['bold', 'italic', 'underline']
+});

package/es/core/editor/components/Toolbar/widgets/IconSelect/index.module.scss

@@ -13,6 +13,7 @@
   width: 240px;
   max-height: 218px;
   overflow-y: auto;
+  border: none;
 
   :global {
     .#{$css-prefix}collapse-panel-expanded {
@@ -104,7 +105,7 @@
   width: 52px;
   height: 68px;
   text-align: center;
-  border: 2px solid #FFF;
+  //border: 2px solid #FFF;
   overflow: hidden;
   cursor: pointer;
 
@@ -147,5 +148,6 @@
 
 .selectedTag {
   border-radius: 4px;
-  border: 2px solid #4C89FF;
+  // border: 2px solid #4C89FF;
+  background-color: #F2F7FD;
 }

package/es/core/editor/components/Toolbar/widgets/IconSelect/popUpContent.js

@@ -14,8 +14,7 @@ function PopUpContent(props) {
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Collapse, {
-    className: styles.iconCollapse,
-    defaultExpandedKeys: [0]
+    className: styles.iconCollapse
   }, iconList.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Panel, {
       title: item.name,

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.js

@@ -0,0 +1,99 @@
+import _Form from "@alifd/next/es/form";
+import _Radio from "@alifd/next/es/radio";
+import React, { useState, useEffect } from 'react';
+import TemplateGroup from "./LayoutTagImageSelect";
+import styles from "./LayoutSettings.module.scss";
+var LAYOUTS = {
+  circular: '星型布局',
+  hierarchical: '均衡布局',
+  toward: '树形布局',
+  rectangle: '分层排布'
+};
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'east',
+  label: '横向'
+}, {
+  value: 'south',
+  label: '纵向'
+}];
+
+var LayoutSettings = function LayoutSettings(props) {
+  var _props$layout = props.layout,
+      layout = _props$layout === void 0 ? {} : _props$layout,
+      onChange = props.onChange,
+      regionId = props.regionId,
+      size = props.size,
+      disabled = props.disabled;
+  var layoutId = layout.id,
+      layoutOptions = layout.options; // const [value, setValue] = useState();
+
+  var handleChange = function handleChange(data) {
+    onChange && onChange(data);
+  };
+
+  var onLayoutSelect = function onLayoutSelect(id) {
+    // console.log("onLayoutSelect", id, layout, value);
+    var options;
+
+    if (id === 'toward') {
+      options = {
+        subId: TREE_LAYOUT_OPTIONS[0].value
+      };
+    } // setValue(id);
+
+
+    handleChange({
+      id: id,
+      options: options
+    });
+  };
+
+  var layoutGroup = Object.keys(LAYOUTS).map(function (id) {
+    return {
+      id: id,
+      name: LAYOUTS[id],
+      icon: "layout_" + id,
+      selected: layoutId === id
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['layout-setting-template-group']
+  }, /*#__PURE__*/React.createElement(TemplateGroup, {
+    dataSource: layoutGroup,
+    value: layoutId,
+    size: size,
+    disabled: disabled,
+    onChange: onLayoutSelect,
+    boxProps: {
+      spacing: 12,
+      className: styles.tagBox
+    },
+    tagProps: {
+      className: styles.tag,
+      style: {
+        background: '#FFF'
+      },
+      type: 'primary'
+    },
+    itemProps: {
+      className: styles.card,
+      iconClassName: styles.icon,
+      textClassName: styles.text
+    }
+  }), layoutId === 'toward' ? /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5E03\u5C40\u65B9\u5411"
+  }, /*#__PURE__*/React.createElement(_Radio.Group, {
+    dataSource: TREE_LAYOUT_OPTIONS,
+    defaultValue: layoutOptions.subId || TREE_LAYOUT_OPTIONS[0].value,
+    onChange: function onChange(subId) {
+      return handleChange({
+        id: layoutId,
+        options: {
+          subId: subId
+        }
+      });
+    }
+  })) : null);
+};
+
+export default LayoutSettings;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutSettings.module.scss

@@ -0,0 +1,70 @@
+@import "@alifd/next/variables";
+@import '@alifd/next/reset.scss';
+
+.label {
+  margin: 0 10px;
+}
+
+.tagBox {
+  color: #4D6277;
+
+
+  :global {
+    .checked {
+      // border: 2px solid $color-brand1-5 !important;
+      color: #4D6277 !important;
+      border-color: #fff !important;
+      background:#F2F7FD !important;
+    }
+  }
+}
+
+.tag {
+  // border: 2px solid $color-gitfill1-1 !important;
+  border-color: #fff !important;
+  color: #4D6277;
+
+  &:hover {
+    background-color: $color-brand1-1 !important;
+    border-color: #fff !important;
+    // border: 2px solid #FFFFFF;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1) !important;
+    border-color: #fff !important;
+    // border: 2px solid $color-brand1-5 !important;
+    color: $color-fill1-1;
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  height: 76px;
+  border: none;
+  padding-top: 12px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $color-brand1-1;
+  }
+
+  &:active {
+    background-color: rgba(76, 137, 255, 0.1);
+  }
+}
+
+.icon {
+  width: 30px;
+}
+
+.text {
+  height: 12px;
+  line-height: 12px;
+  font-size: 12px;
+  margin-top: 8px;
+  color: $color-text1-3;
+  outline: none;
+}

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataSource", "onChange", "size", "boxProps", "tagProps", "itemProps", "ItemComponent", "disabled", "value"];
+import React from 'react';
+import TemplateButton from "../LayoutTemplateButton";
+import TagSelect from "../LayoutTagSelect";
+import styles from "./index.module.scss";
+
+var TagImageSelect = function TagImageSelect(props) {
+  var dataSource = props.dataSource,
+      onChange = props.onChange,
+      size = props.size,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps,
+      itemProps = props.itemProps,
+      ItemComponent = props.ItemComponent,
+      disabled = props.disabled,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var Item = ItemComponent || TemplateButton;
+  return /*#__PURE__*/React.createElement(TagSelect, _extends({}, otherProps, {
+    onChange: onChange,
+    className: styles.tagSelect,
+    value: value,
+    disabled: disabled,
+    dataSource: dataSource.map(function (item) {
+      return {
+        key: item.id,
+        content: /*#__PURE__*/React.createElement(Item, _extends({
+          key: item.id
+        }, item, {
+          size: size
+        }, itemProps), item.name)
+      };
+    }),
+    boxProps: boxProps,
+    tagProps: tagProps
+  }));
+};
+
+export default TagImageSelect;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagImageSelect/index.module.scss

@@ -0,0 +1,7 @@
+.name {
+  margin: 20px 0 0 10px;
+}
+
+.tagSelect {
+  border: none;
+}

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagSelect/index.js

@@ -0,0 +1,75 @@
+import _Box from "@alifd/next/es/box";
+import _extends from "@babel/runtime/helpers/extends";
+import _Tag from "@alifd/next/es/tag";
+
+/* eslint-disable eqeqeq */
+import React, { useState, useEffect, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import "./index.scss";
+import classNames from 'classnames';
+var SelectableTag = _Tag.Selectable;
+
+var TagSelect = function TagSelect(props) {
+  var _onChange = props.onChange,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      dataSource = props.dataSource,
+      size = props.size,
+      disabled = props.disabled,
+      boxProps = props.boxProps,
+      tagProps = props.tagProps;
+
+  var _useState = useState(value || defaultValue),
+      current = _useState[0],
+      setCurrent = _useState[1];
+
+  useEffect(function () {
+    // if (value) {
+    // }
+    setCurrent(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tag-select-wrap"
+  }, /*#__PURE__*/React.createElement(_Box, _extends({
+    spacing: 12,
+    wrap: true,
+    direction: "row"
+  }, boxProps), dataSource.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tag-select-item",
+      key: "wrap-" + item.key
+    }, /*#__PURE__*/React.createElement(SelectableTag, _extends({
+      key: item.key,
+      checked: current === item.key // eslint-disable-next-line eqeqeq
+      ,
+      disabled: disabled(item.key),
+      onChange: function onChange(checked) {
+        _onChange && _onChange(item.key);
+
+        if (!('value' in props)) {
+          setCurrent(item.key);
+        }
+      }
+    }, tagProps), /*#__PURE__*/React.createElement("span", {
+      className: classNames({
+        'tag-select-texts': disabled(item.key)
+      })
+    }, item.content)));
+  })));
+};
+
+TagSelect.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  onChange: PropTypes.func,
+  // eslint-disable-next-line react/require-default-props
+  value: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  defaultValue: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  dataSource: PropTypes.array,
+  boxProps: PropTypes.any
+};
+TagSelect.defaultProps = {
+  boxProps: {}
+};
+export default TagSelect;

package/es/core/editor/components/Toolbar/widgets/Layout/components/LayoutTagSelect/index.scss

@@ -0,0 +1,32 @@
+/* write style here */
+@import '@alifd/next/variables.scss';
+
+.tag-select-wrap {
+  .tag-select-item {
+    text-align: -webkit-center;
+
+    .#{$css-prefix}tag {
+      height: auto;
+      line-height: 0;
+
+      &::before {
+        z-index: 1;
+      }
+
+      &::after {
+        z-index: 1;
+      }
+
+      .#{$css-prefix}tag-body {
+        width: 100%;
+        padding: 0;
+
+        .tag-select-img {}
+      }
+      .tag-select-texts{
+        color: #C9CED2;
+        opacity: 0.6;
+      }
+    }
+  }
+}