@riil-frontend/component-topology 2.3.21 → 2.4.0

package/demo/5/345/205/266/344/273/226/347/273/204/344/273/266//345/233/276/346/240/207/351/200/211/346/213/251.md

@@ -7,18 +7,18 @@ order: 3
 
 图标原比例显示，垂直居中
 
-- onChange
 - defaultValue
 - value
+- onChange `function(value)`
 - dataSource
     ```
 [
     {
-        label: '图标库1',
+        name: '图标库1',
         icons: [
-           {value: '1', label: '图标1', url: ''},
-           {value: '2', label: '图标2', url: ''},
-           {value: '3', label: '图标3', url: ''}
+           {id: '1', name: '图标1', url: ''},
+           {id: '2', name: '图标2', url: ''},
+           {id: '3', name: '图标3', url: ''}
         ]
     },
 ]

package/es/components/Drawer/index.js

@@ -32,7 +32,8 @@ var Drawer = function Drawer(props) {
     width: "40%",
     headerStyle: headerStyle,
     bodyStyle: bodyStyle,
-    closeMode: ['close', 'esc']
+    closeMode: ['close', 'esc'],
+    className: styles.drawer
   }, drawerProps, {
     visible: visible,
     onClose: onClose

package/es/components/Drawer/index.module.scss

@@ -1,3 +1,16 @@
+.drawer {
+  & > div {
+    display: flex;
+  }
+
+  :global {
+    .next-drawer-body {
+      flex: 1;
+    }
+  }
+}
+
+
 .footer {
   position: absolute;
   bottom: 0;

package/es/components/ResourceList/ResourceSelect.js

@@ -5,12 +5,13 @@ import _ from 'lodash';
 import useNextFormTable from '@ahooksjs/next-form-table';
 import useFilterPlugin from '@ahooksjs/use-filter-plugin';
 import useSortablePlugin from '@ahooksjs/use-sortable-plugin';
-import useSelectionPlugin from '@riil-frontend/component-topology-utils/es/plugins/useSelectionPlugin';
+import useSelectionPlugin from "../../plugins/useSelectionPlugin";
 import { fetchCommonQuery } from '@riil-frontend/component-topology-utils/es/services/cmdb';
 import { getTitleCell } from '@riil-frontend/component-topology-utils/es/utils/table';
 import { DICT } from '@riil-frontend/component-topology-utils/es/utils/storage';
 import { formatDataForTable, getIp } from "../../utils/format";
 import RiilTable from "../FormTable";
+import styles from "./ResourceSelect.module.scss";
 var PRIMARY_KEY = 'id';
 
 var getTableData = /*#__PURE__*/function () {
@@ -181,7 +182,7 @@ var ResourceList = function ResourceList(props, ref) {
     }
   }];
   return /*#__PURE__*/React.createElement(RiilTable, {
-    className: className,
+    className: className || styles.table,
     formProps: formProps,
     tableProps: tableProps,
     paginationProps: paginationProps,

package/es/components/ResourceList/ResourceSelect.module.scss

@@ -0,0 +1,7 @@
+.table {
+  height: 100%;
+  :global {
+    .next-table-body {
+    }
+  }
+}

package/es/components/ResourceSelect/ResourceSelectDrawer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk"];
+var _excluded = ["visible", "setVisible", "onAdd", "getTableData", "onOk", "layer", "topo"];
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ResourceTable from "../../common/components/ResourceTable/ResourceTable";
 import Drawer from "../Drawer";
@@ -11,6 +11,8 @@ export default function ResourceSelectDrawer(props) {
       onAdd = props.onAdd,
       getTableData = props.getTableData,
       onOk = props.onOk,
+      layer = props.layer,
+      topo = props.topo,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var tableRef = useRef(); // TODO 默认处理

package/es/core/{editor/components/settings/group/GroupNodeList → common}/icons/defaultIcons.d.ts

@@ -1,3 +1,18 @@
+export const DEFAULT_NODE_ICONS: ({
+    url: any;
+    id: string;
+    name: string;
+    ciType: string;
+    jsonUrl: string;
+    oldId: string;
+} | {
+    url: any;
+    id: string;
+    name: string;
+    jsonUrl: string;
+    oldId: string;
+    ciType?: undefined;
+})[];
 declare var _default: {
     'editor.icon.cloud.small': {
         url: string;

package/es/core/{editor/components/settings/group/GroupNodeList → common}/icons/defaultIcons.js

@@ -1,3 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+export var DEFAULT_NODE_ICONS = [{
+  id: 'ciType/network.switch',
+  name: '交换机',
+  ciType: 'network.switch',
+  jsonUrl: '/ht/image/topo/l/交换机_96.json',
+  oldId: 'editor.icon.switch'
+}, {
+  id: 'ciType/network.coreswitch',
+  name: '核心交换机',
+  jsonUrl: '/ht/image/topo/l/核心交换机_96.json',
+  oldId: 'editor.icon.coreswitch'
+}, {
+  id: 'ciType/network.router',
+  name: '路由器',
+  ciType: 'network.router',
+  jsonUrl: '/ht/image/topo/l/路由器_96.json',
+  oldId: 'editor.icon.router'
+}, {
+  id: 'ciType/db',
+  name: '数据库',
+  jsonUrl: '/ht/image/topo/l/数据库_96.json',
+  oldId: 'editor.icon.db'
+}, {
+  id: 'dc',
+  name: '数据中心',
+  jsonUrl: '/ht/image/topo/l/数据中心_144.json',
+  oldId: 'editor.icon.dc'
+}, {
+  id: 'firewall',
+  name: '防火墙',
+  jsonUrl: '/ht/image/topo/l/防火墙_96.json',
+  oldId: 'editor.icon.firewall'
+}, {
+  id: 'server',
+  name: '服务器',
+  jsonUrl: '/ht/image/topo/l/服务器_96.json',
+  oldId: 'editor.icon.server'
+}, {
+  id: 'icon.cloud',
+  name: '云',
+  jsonUrl: '/ht/image/topo/l/云_144.json',
+  oldId: 'editor.icon.cloud'
+}, {
+  id: 'building',
+  name: '楼宇',
+  jsonUrl: '/ht/image/topo/l/楼宇_144.json',
+  oldId: 'editor.icon.building'
+}, {
+  id: 'internet',
+  name: '互联网',
+  jsonUrl: '/ht/image/topo/l/互联网_144.json',
+  oldId: 'editor.icon.internet'
+}].map(function (item) {
+  return _extends({}, item, {
+    url: item.url || item.jsonUrl.replace('.json', '.png')
+  });
+}); // 注册
+
+DEFAULT_NODE_ICONS.forEach(function (icon) {
+  ht.Default.setImage(icon.id, icon.jsonUrl || icon.url);
+});
 export default {
   'editor.icon.cloud.small': {
     url: '/ht/image/topo/s/云_64.png',

package/es/core/common/text.module.scss

@@ -0,0 +1,5 @@
+.textEllipsis {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}

package/es/core/editor/components/LinkDynamicStyleSettingDrawer/rule/ColorPicker.module.scss

@@ -1,11 +1,15 @@
-@import "@alifd/next/variables";
+@import "@alifd/theme-19926/variables";
 
 .swatch {
   background: #fff;
-  border-radius: 1px;
-  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  border: 1px solid $input-border-color;
   display: inline-block;
   cursor: pointer;
   width: 70px;
   height: 28px;
+
+  &:hover {
+    border: 1px solid $input-hover-border-color;
+  }
 }

package/es/core/editor/components/iconManage/UploadIconDialog.js

@@ -159,9 +159,9 @@ var UploadIconDialog = /*#__PURE__*/function (_React$Component) {
         type: _this.props.type,
         data: files.map(function (file) {
           return {
-            id: file.response.data,
+            id: file.response.result,
             name: getFileName(file),
-            url: topoServer.icon.getDownloadUrl(file.response.data),
+            url: topoServer.icon.getDownloadUrl(file.response.result),
             json: file.json
           };
         })

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

@@ -8,9 +8,31 @@ import TextPropertyView from "./text/TextPropertyView";
 import NodePropertyView from "./node/NodePropertyView";
 import ViewPropertyView from "./view/ViewPropertyView";
 import LinkPropertyView from "./link/LinkPropertyView";
-export default function Settings(props) {
-  var _selection$;
 
+function getElementType(selection) {
+  var selectionElement = selection[0];
+  var selectionSize = selection.length;
+  var elementType;
+
+  if (!selectionSize) {
+    elementType = 'view';
+  } else if (isGroup(selectionElement)) {
+    elementType = 'group';
+  } else if (isNode(selectionElement)) {
+    elementType = 'node';
+  } else if (isEdge(selectionElement)) {
+    elementType = 'line';
+  } else if (isLayer(selectionElement)) {
+    // 分层
+    elementType = 'layer';
+  } else if (isText(selectionElement)) {
+    elementType = 'text';
+  }
+
+  return elementType;
+}
+
+export default function Settings(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       selection = props.selection,
@@ -22,9 +44,27 @@ export default function Settings(props) {
   useEffect(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
   }, [selection]);
-  var attrTypes = ['attrObject', 'position', 'styleMap']; // TODO 待优化
+  var propertyPanelMap = {
+    view: SettingsForm,
+    node: NodePropertyView,
+    layer: LayerSettingsForm,
+    text: TextPropertyView
+  };
+
+  if (localStorage.getItem('topo.debug') === 'true') {
+    Object.assign(propertyPanelMap, {
+      line: LinkPropertyView,
+      view: ViewPropertyView
+    });
+  } else {
+    if (!selectionSize) {
+      // 未选择元素
+      return null;
+    }
+  } // TODO 待优化
+
 
-  var updateElementProperty = useCallback(function (name, value) {
+  var updateElementProperty = function updateElementProperty(name, value) {
     // const element = topo.getDataModel().getDataById(selection[0].id);
     var element = topo.getSelectionModel().getFirstData(); // console.info('updateElementProperty', {selection, element, name, value});
 
@@ -43,52 +83,17 @@ export default function Settings(props) {
     } else if (name === 'image') {
       element.setImage(value);
     }
-  }, [(_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.id]);
-  var propertyPanelMap = {
-    view: SettingsForm,
-    layer: LayerSettingsForm // text: TextPropertyView,
-    // node: NodePropertyView,
-
   };
 
-  if (localStorage.getItem('topo.debug') === 'true') {
-    Object.assign(propertyPanelMap, {
-      text: TextPropertyView,
-      node: NodePropertyView,
-      line: LinkPropertyView,
-      view: ViewPropertyView
-    });
-  } else {
-    if (!selectionSize) {
-      // 未选择元素
-      return null;
-    }
-  }
-
-  var elementType;
-  var selectionElement = selection[0];
-
-  if (!selectionSize) {
-    elementType = 'view';
-  } else if (isGroup(selectionElement)) {
-    elementType = 'group';
-  } else if (isNode(selectionElement)) {
-    elementType = 'node';
-  } else if (isEdge(selectionElement)) {
-    elementType = 'line';
-  } else if (isLayer(selectionElement)) {
-    // 分层
-    elementType = 'layer';
-  } else if (isText(selectionElement)) {
-    elementType = 'text';
-  }
-
+  var elementType = getElementType(selection);
   var Component = propertyPanelMap[elementType];
 
   if (!Component) {
     return null;
   }
 
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
+
   var values = _extends({}, selection[0]);
 
   attrTypes.forEach(function (type) {

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

@@ -1,5 +1,5 @@
 .settingsPanel {
-  width: 260px;
+  width: 280px;
   height: 100%;
   position: absolute;
   top: 0;
@@ -34,6 +34,11 @@
     }
     .next-collapse-panel-title {
       background: none;
+      font-size: 12px;
+      padding-bottom: 0;
+    }
+    .next-collapse-panel-content {
+      padding-left: 32px;
     }
   }
 

package/es/core/editor/components/settings/common/{NodeSizeInput.js → NodeSizeInput/NodeSizeInput.js}

@@ -33,6 +33,7 @@ export default function NodeSizeInput(props) {
   }, /*#__PURE__*/React.createElement(_NumberPicker, {
     name: "width",
     min: 1,
+    max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
@@ -43,6 +44,7 @@ export default function NodeSizeInput(props) {
   }, /*#__PURE__*/React.createElement(_NumberPicker, {
     name: "height",
     min: 1,
+    max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'

package/es/core/editor/components/settings/common/NodeSizeInput/img/icon_/350/247/243/351/224/201.svg

@@ -0,0 +1,16 @@
+<?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/解锁</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/解锁" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icon-HTSCIT_lianjieduankai" fill-rule="nonzero">
+            <g id="编组">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M12.16836,11.80814 L4.69432,4.33403 L5.41203,3.61632 L12.88607,11.09043 L12.16836,11.80814 Z M6.20072,10.5109 L5.48301,9.79326 L6.9976,8.27867 L7.71531,8.99638 L6.20072,10.5109 Z" id="形状" fill="#4D6277"></path>
+                <polygon id="路径" fill="#4D6277" points="9.79536 5.48126 10.51307 6.19897 8.99848 7.71363 8.28077 6.99592"></polygon>
+                <path d="M9.729,3.303 L12.704,6.271 L10.128,8.847 L10.842,9.554 L13.775,6.621 L14.132,6.264 L13.775,5.907 L10.086,2.225 L9.729,1.868 L9.379,2.225 L6.439,5.158 L7.16,5.872 L9.729,3.303 Z M6.264,12.711 L3.296,9.743 L5.879,7.16 L5.158,6.439 L2.225,9.372 L1.868,9.729 L2.225,10.086 L5.914,13.775 L6.271,14.132 L6.621,13.775 L9.561,10.842 L8.847,10.128 L6.264,12.711 Z" id="形状" fill="#4D6277"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/es/core/editor/components/settings/common/NodeSizeInput/img/icon_/351/224/201.svg

@@ -0,0 +1,15 @@
+<?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/锁</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/锁" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icon-HTSCIT_lianjie" fill-rule="nonzero">
+            <g id="编组">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M6.264,12.711 L3.296,9.743 L5.879,7.16 L5.158,6.439 L2.225,9.372 L1.868,9.729 L2.225,10.086 L5.914,13.775 L6.271,14.132 L6.621,13.775 L9.561,10.842 L8.847,10.128 L6.264,12.711 Z M9.729,3.303 L12.704,6.271 L10.128,8.847 L10.842,9.554 L13.775,6.621 L14.132,6.264 L13.775,5.907 L10.086,2.225 L9.729,1.868 L9.379,2.225 L6.439,5.158 L7.16,5.872 L9.729,3.303 Z" id="形状" fill="#4D6277"></path>
+                <polygon id="路径" fill="#4D6277" points="10.51846 6.20114 6.20226 10.51727 5.48462 9.79956 9.80075 5.48336"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

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

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

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

@@ -0,0 +1,50 @@
+import _Button from "@alifd/next/lib/button";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import styles from "./FontStyleCheckbox.module.scss";
+import b from "./img/bold.svg";
+import i from "./img/italics.svg";
+import u from "./img/underline.svg";
+export default function FontStyleCheckbox(props) {
+  var value = props.value,
+      onChange = props.onChange;
+  var options = [{
+    name: 'bold',
+    img: b,
+    title: '粗体'
+  }, {
+    name: 'italic',
+    img: i,
+    title: '斜体'
+  }, {
+    name: 'underline',
+    img: u,
+    title: '下划线'
+  }];
+
+  var handleClick = function handleClick(name) {
+    var _extends2;
+
+    onChange(_extends({}, value, (_extends2 = {}, _extends2[name] = !value[name], _extends2)));
+  };
+
+  return /*#__PURE__*/React.createElement(_Button.Group, {
+    className: styles.buttonGroup
+  }, options.map(function (item) {
+    var _classnames;
+
+    return /*#__PURE__*/React.createElement(_Button, {
+      key: item.name,
+      className: classnames(styles.button, (_classnames = {}, _classnames[styles.checked] = value[item.name], _classnames)),
+      onClick: function onClick() {
+        handleClick(item.name);
+      },
+      title: item.title
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item.img,
+      alt: ""
+    }));
+  }));
+}
+;

package/es/core/editor/components/settings/common/text/FontStyleCheckbox.module.scss

@@ -0,0 +1,31 @@
+@import "@alifd/theme-19926/variables";
+
+.buttonGroup {
+  display: flex;
+}
+
+.button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:global {
+    &.next-btn.next-btn-normal:hover {
+      background: #F2F7FD;
+      border: 1px solid $input-border-color;
+    }
+  }
+
+}
+
+.checked {
+
+  &:global {
+    &.next-btn.next-btn-normal {
+      background: #F2F7FD;
+    }
+  }
+
+}
+

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

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

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): {};
+}