@riil-frontend/component-topology 2.3.20 → 2.4.2

package/es/core/editor/components/settings/common/text/TextStyle.js

@@ -0,0 +1,133 @@
+import _NumberPicker from "@alifd/next/lib/number-picker";
+import _Form from "@alifd/next/lib/form";
+import _Field from "@alifd/next/lib/field";
+import _Select from "@alifd/next/lib/select";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ColorPicker from "../../../LinkDynamicStyleSettingDrawer/rule/ColorPicker";
+import FontStyleCheckbox from "./FontStyleCheckbox";
+var Option = _Select.Option;
+
+function parseValue(value) {
+  return {
+    fontFamily: value.font.fontFamily || '黑体',
+    fontSize: value.font.fontSize || 12,
+    color: value.color || '#000000',
+    fontStyleChecked: {
+      underline: value.underline,
+      bold: value.font.bold,
+      italic: value.font.italic
+    }
+  };
+}
+
+export default function TextStyle(props) {
+  var value = props.value,
+      _onChange = props.onChange;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValue(value),
+    onChange: function onChange(name, value) {
+      var values = field.getValues();
+      var aValues = {
+        color: values.color,
+        underline: values.fontStyleChecked.underline,
+        font: {
+          fontFamily: values.fontFamily,
+          fontSize: values.fontSize,
+          bold: values.fontStyleChecked.bold,
+          italic: values.fontStyleChecked.italic
+        }
+      };
+      _onChange && _onChange(aValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValue(value));
+  }, [value]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    component: "div"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      paddingRight: 12
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5B57\u4F53"
+  }, /*#__PURE__*/React.createElement(_Select, {
+    defaultValue: "\u9ED1\u4F53",
+    name: "fontFamily",
+    style: {
+      width: '100%',
+      marginRight: 8
+    }
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "\u5B8B\u4F53"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: '宋体'
+    }
+  }, "\u5B8B\u4F53")), /*#__PURE__*/React.createElement(Option, {
+    value: "\u9ED1\u4F53"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: '黑体'
+    }
+  }, "\u9ED1\u4F53")), /*#__PURE__*/React.createElement(Option, {
+    value: "Arial"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontFamily: 'Arial'
+    }
+  }, "Arial"))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 70
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5B57\u53F7",
+    hasFeedback: true,
+    required: true,
+    requiredMessage: "\u4E0D\u80FD\u4E3A\u7A7A",
+    requiredTrigger: "onBlur",
+    asterisk: false
+  }, /*#__PURE__*/React.createElement(_NumberPicker, {
+    name: "fontSize",
+    min: 8,
+    max: 36,
+    style: {
+      width: '100%',
+      marginRight: 8
+    },
+    placeholder: "\u8BF7\u8F93\u5165"
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      paddingRight: 12
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u6837\u5F0F"
+  }, /*#__PURE__*/React.createElement(FontStyleCheckbox, {
+    name: "fontStyleChecked"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 70
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u989C\u8272"
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    name: "color",
+    align: "br"
+  }))))));
+}
+;

package/es/core/editor/components/settings/common/text/fontStyleUtil.d.ts

@@ -0,0 +1,19 @@
+export default fontStyleUtil;
+declare namespace fontStyleUtil {
+    export function toMap(font?: string): {
+        fontFamily: string;
+        fontSize: number;
+        bold: boolean;
+        italic: boolean;
+    };
+    export function toMap(font?: string): {
+        fontFamily: string;
+        fontSize: number;
+        bold: boolean;
+        italic: boolean;
+    };
+    export function build(style: any): string;
+    export function build(style: any): string;
+    export function getFontStyleMap(obj: any, prefix: any): {};
+    export function getFontStyleMap(obj: any, prefix: any): {};
+}

package/es/core/editor/components/settings/common/text/fontStyleUtil.js

@@ -0,0 +1,53 @@
+var fontStyleUtil = {
+  // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
+  toMap: function toMap(font) {
+    if (font === void 0) {
+      font = '';
+    }
+
+    var arr = font.trim().split(' ');
+    var bold = font.indexOf('bold') > -1;
+    var italic = font.indexOf('italic') > -1;
+    var fontFamily, fontSize;
+
+    if (arr.length) {
+      fontFamily = arr[arr.length - 1];
+    }
+
+    if (arr.length >= 2) {
+      fontSize = parseInt(arr[arr.length - 2].replace('px', ''), 10);
+    }
+
+    return {
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      bold: bold,
+      italic: italic
+    };
+  },
+  // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
+  build: function build(style) {
+    var font = '';
+
+    if (style.font.bold) {
+      font += 'bold ';
+    }
+
+    if (style.font.italic) {
+      font += 'italic ';
+    }
+
+    return "" + font + style.font.fontSize + "px " + style.font.fontFamily;
+  },
+  getFontStyleMap: function getFontStyleMap(obj, prefix) {
+    var map = {};
+    Object.keys(obj).forEach(function (key) {
+      if (key.startsWith(prefix)) {
+        map[key.replace(prefix, '')] = obj[key];
+      }
+    });
+    console.error(obj, prefix, map);
+    return map;
+  }
+};
+export default fontStyleUtil;

package/es/core/editor/components/settings/common/text/img/bold.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/bold</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/bold" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+        <g id="Icon-zitijiacu" transform="translate(4.000000, 3.000000)" fill="#4D6277" fill-rule="nonzero">
+            <path d="M7.01125,5.739125 C6.75175,5.339375 6.368875,5.0735 5.863,4.941875 L5.863,4.916375 C6.131125,4.788875 6.3565,4.646375 6.539125,4.488875 C6.722125,4.34 6.862375,4.1825 6.96025,4.01675 C7.1515,3.668 7.243,3.302375 7.234375,2.9195 C7.234375,2.171 7.002625,1.569125 6.539125,1.113875 C6.07975,0.663125 5.39275,0.433625 4.4785,0.425 L0.52225,0.425 L0.52225,9.7265 L4.79125,9.7265 C5.522875,9.7265 6.133,9.482 6.622375,8.992625 C7.115875,8.524625 7.36675,7.889 7.375,7.085375 C7.375,6.6005 7.253875,6.151625 7.01125,5.739125 Z M2.035,1.681625 L4.319125,1.681625 C4.833625,1.69025 5.212375,1.8155 5.454625,2.058125 C5.701375,2.317625 5.82475,2.6345 5.82475,3.00875 C5.82475,3.383 5.701375,3.6935 5.454625,3.94025 C5.212375,4.208 4.833625,4.34225 4.319125,4.34225 L2.035,4.34225 L2.035,1.681625 Z M5.601625,7.965875 C5.359375,8.24225 4.9765,8.38475 4.453375,8.393375 L2.035,8.393375 L2.035,5.59925 L4.453,5.59925 C4.976125,5.6075 5.359,5.745875 5.60125,6.014 C5.8435,6.28625 5.965,6.613625 5.965,6.9965 C5.965,7.370375 5.843875,7.693625 5.601625,7.965875 L5.601625,7.965875 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

package/es/core/editor/components/settings/common/text/img/italics.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/italics</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/italics" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="2" y="2" width="12" height="12"></rect>
+        <polygon id="路径" fill="#4D6277" fill-rule="nonzero" points="8.77666667 4.29166666 7.19333333 12.2083333 8.77666667 12.2083333 8.77666667 13 4.02666667 13 4.02666667 12.2083333 5.60999999 12.2083333 7.19333333 4.29166666 5.60999999 4.29166666 5.60999999 3.5 10.36 3.5 10.36 4.29166666"></polygon>
+    </g>
+</svg>

package/es/core/editor/components/settings/common/text/img/underline.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/underline</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/underline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+        <g id="Icon-zitixiahuaxian" transform="translate(3.000000, 3.000000)" fill="#4D6277" fill-rule="nonzero">
+            <path d="M5,8.507375 C7.01929112,8.507375 8.65625,6.87041612 8.65625,4.851125 L8.65625,0.05 L7.34375,0.05 L7.34375,4.851125 C7.34375,6.14554238 6.29441738,7.194875 5,7.194875 C3.70558262,7.194875 2.65625,6.14554238 2.65625,4.851125 L2.65625,0.05 L1.34375,0.05 L1.34375,4.851125 C1.34375,6.87041612 2.98070888,8.507375 5,8.507375 Z M9.125,9.380375 L0.875,9.380375 C0.667893219,9.380375 0.5,9.54826822 0.5,9.755375 C0.5,9.96248178 0.667893219,10.130375 0.875,10.130375 L9.125,10.130375 C9.33210678,10.130375 9.5,9.96248178 9.5,9.755375 C9.5,9.54826822 9.33210678,9.380375 9.125,9.380375 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

package/es/core/editor/components/settings/group/GroupNodeList/ResourceList.js

@@ -1,10 +1,30 @@
 import _List from "@alifd/next/lib/list";
-import _Avatar from "@alifd/next/lib/avatar";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import styles from "./ResourceList.module.scss";
 
 function ResourceList(props) {
   var data = props.data;
+
+  var renderIcon = function renderIcon(src) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 28,
+        height: 28,
+        background: "url(" + src + ") no-repeat center center"
+      }
+    });
+  };
+
+  var renderIcon2 = function renderIcon2(src) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.iconWarp
+    }, /*#__PURE__*/React.createElement("img", {
+      src: src,
+      className: styles.iconImg,
+      alt: ""
+    }));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.list
   }, /*#__PURE__*/React.createElement(_List, {
@@ -14,11 +34,7 @@ function ResourceList(props) {
       return /*#__PURE__*/React.createElement(_List.Item, {
         key: i,
         extra: item.money,
-        media: /*#__PURE__*/React.createElement(_Avatar, {
-          src: item.img,
-          shape: "square",
-          size: "small"
-        })
+        media: renderIcon2(item.img)
       }, item.title);
     }
   }));

package/es/core/editor/components/settings/group/GroupNodeList/ResourceList.module.scss

@@ -13,3 +13,19 @@
     }
   }
 }
+
+.iconWarp {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 28px;
+    max-height: 100%;
+    vertical-align: middle;
+  }
+}

package/es/core/editor/components/settings/group/GroupNodeList/icon.d.ts

@@ -66,4 +66,14 @@ export function getIconMap(topo: any): {
     'editor.icon.balanc.small': string;
     'editor.icon.calendar.small': string;
 };
+/**
+ *
+ * @param topo
+ * @param type {'node' | 'container'}
+ * @return {{label: string, icons: *[]}[]}
+ */
+export function getIconGroups(topo: any, type: 'node' | 'container'): {
+    label: string;
+    icons: any[];
+}[];
 export function getIconById(id: any, topo: any): any;

package/es/core/editor/components/settings/group/GroupNodeList/icon.js

@@ -1,5 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import defaultIcons from "./icons/defaultIcons";
+import defaultIcons, { DEFAULT_NODE_ICONS } from "../../../../../common/icons/defaultIcons";
+
+function getUserCustomIcons(topo) {
+  var uploadIcons = topo.store.getModelState('iconManage').icons;
+  return [];
+}
+
 export function getIconMap(topo) {
   var bizIconMap = {};
   var uploadIcons = topo.store.getModelState('iconManage').icons.node;
@@ -8,6 +14,19 @@ export function getIconMap(topo) {
   });
   return _extends({}, defaultIcons, bizIconMap);
 }
+/**
+ *
+ * @param topo
+ * @param type {'node' | 'container'}
+ * @return {{label: string, icons: *[]}[]}
+ */
+
+export function getIconGroups(topo, type) {
+  return [{
+    label: '默认',
+    icons: [].concat(DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
 export function getIconById(id, topo) {
   var iconMap = getIconMap(topo);
   var icon = iconMap[id];

package/es/core/editor/components/settings/node/NodeIconSelect.d.ts

@@ -0,0 +1 @@
+export default function NodeIconSelect(props: any): JSX.Element;

package/es/core/editor/components/settings/node/NodeIconSelect.js

@@ -0,0 +1,42 @@
+import _Avatar from "@alifd/next/lib/avatar";
+import _Select from "@alifd/next/lib/select";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { getIconGroups, getIconMap } from "../group/GroupNodeList/icon";
+var Option = _Select.Option;
+export default function NodeIconSelect(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      topo = props.topo;
+  var iconGroups = getIconGroups(topo, 'node');
+  var newId = value;
+  var a = iconGroups[0].icons.filter(function (item) {
+    return newId.indexOf(item.oldId) !== -1;
+  });
+
+  if (a.length) {
+    newId = a[0].id;
+  }
+
+  return /*#__PURE__*/React.createElement(_Select, {
+    value: newId,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  }, iconGroups.map(function (group) {
+    return /*#__PURE__*/React.createElement(_Select.OptionGroup, {
+      label: group.label,
+      key: group.label
+    }, group.icons.map(function (icon) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: icon.id,
+        value: icon.id
+      }, /*#__PURE__*/React.createElement(_Avatar, {
+        src: icon.url,
+        shape: "square",
+        size: "small"
+      }), "\xA0", icon.name);
+    }));
+  }));
+}
+;

package/es/core/editor/components/settings/node/NodePropertyView.d.ts

@@ -1 +1 @@
-export default function TextPropertyView(props: any): JSX.Element;
+export default function NodePropertyView(props: any): JSX.Element;