@riil-frontend/component-topology 5.0.18 → 6.0.0-alpha.2

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

@@ -0,0 +1,15 @@
+.sidebar {
+  // border-right: 1px solid #E6E7EB;
+  position: relative;
+  width: 60px;
+
+  .tabsContainer {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 320px;
+    background: #FFF;
+  }
+}

package/es/core/editor/components/Sidebar/views/BackgroundPanel/BackgroundPanel.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import BackgroundView from "../../../BackgroundView";
+export default function BackgroundPanel(props) {
+  var topo = props.topo,
+      editorProps = props.editorProps;
+  return /*#__PURE__*/React.createElement(BackgroundView, {
+    topo: topo,
+    editorProps: editorProps
+  });
+}

package/es/core/editor/components/Sidebar/views/BackgroundPanel/index.js

@@ -0,0 +1,2 @@
+import Panel from "./BackgroundPanel";
+export default Panel;

package/es/core/editor/components/Sidebar/views/CanvasPanel/ImagePanel.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function ImagePanel(props) {
+  return /*#__PURE__*/React.createElement("div", null, "ImagePanel");
+}

package/es/core/editor/components/Sidebar/views/CanvasPanel/index.js

@@ -0,0 +1,2 @@
+import Panel from "./ImagePanel";
+export default Panel;

package/es/core/editor/components/Sidebar/views/ComponentPanel.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+
+export default function ComponentPanel(props) {
+  var topo = props.topo; // 组件
+
+  var viewRef = useRef(null); // div容器
+
+  var divRef = useRef();
+  useEffect(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createBasicPalette(container);
+    } catch (error) {
+      rlog.error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

package/es/core/editor/components/Sidebar/views/ImagePanel/CiTypeImagePanel.js

@@ -0,0 +1,20 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import ImagePalette from "./ImagePalette";
+import { getNodeDefaultIcons } from "../../../../../common/icons/icon";
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+
+export default function CiTypeImagePanel(props) {
+  var topo = props.topo;
+  var icons = useMemo(function () {
+    return getNodeDefaultIcons(topo);
+  }, []);
+  return /*#__PURE__*/React.createElement(ImagePalette, {
+    icons: icons,
+    topo: topo
+  });
+}

package/es/core/editor/components/Sidebar/views/ImagePanel/CustomImagePanel.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { getUserCustomIconsForHt } from "../../../../../common/icons/icon";
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+
+export default function CustomImagePanel(props) {
+  var topo = props.topo; // 组件
+
+  var viewRef = useRef(null); // div容器
+
+  var divRef = useRef();
+  useEffect(function () {
+    // 初始化
+    var icons = getUserCustomIconsForHt(topo);
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createUploadImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      rlog.error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePalette.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+
+export default function ImagePalette(props) {
+  var topo = props.topo,
+      icons = props.icons; // 组件
+
+  var viewRef = useRef(null); // div容器
+
+  var divRef = useRef();
+  useEffect(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      rlog.error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js

@@ -0,0 +1,28 @@
+import _Collapse from "@alifd/next/es/collapse";
+import _Button from "@alifd/next/es/button";
+import _Icon from "@alifd/next/es/icon";
+import React from 'react';
+import CollapsePanel from "../../../../../../components/collapse/Panel";
+import CollapseStyles from "../../../../../../components/collapse/Collapse.module.scss";
+import CiTypeImagePanel from "./CiTypeImagePanel";
+import CustomImagePanel from "./CustomImagePanel";
+export default function ImagePanel(props) {
+  return /*#__PURE__*/React.createElement(_Collapse, {
+    defaultExpandedKeys: ['资源图片', '自定义图片'],
+    style: {
+      border: 'none'
+    },
+    className: CollapseStyles.collapse
+  }, /*#__PURE__*/React.createElement(CollapsePanel, {
+    key: "\u8D44\u6E90\u56FE\u7247",
+    title: "\u8D44\u6E90\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(CiTypeImagePanel, props)), /*#__PURE__*/React.createElement(CollapsePanel, {
+    key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    extra: /*#__PURE__*/React.createElement(_Button, {
+      title: "\u5BFC\u51FA"
+    }, /*#__PURE__*/React.createElement(_Icon, {
+      type: "topo_button_icon_export"
+    }))
+  }, /*#__PURE__*/React.createElement(CustomImagePanel, props)));
+}

package/es/core/editor/components/Sidebar/views/ImagePanel/index.js

@@ -0,0 +1,2 @@
+import Panel from "./ImagePanel";
+export default Panel;

package/es/core/editor/components/Sidebar/views/LinkPanel.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+/**
+ * 链路面板
+ * @param {*} props 
+ * @returns 
+ */
+
+function LinkPanel(props) {
+  var topo = props.topo; // 组件
+
+  var viewRef = useRef(null); // div容器
+
+  var divRef = useRef();
+  useEffect(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createLinkPalette(container);
+    } catch (error) {
+      rlog.error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}
+
+export default LinkPanel;

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

@@ -0,0 +1,40 @@
+import _Button from "@alifd/next/es/button";
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import buttons from "./buttons";
+import Toolbar from "./Toolbar";
+import styles from "./Toolbar.module.scss";
+
+function EditorToolbar(props) {
+  var _useState = useState(true),
+      showLabel = _useState[0],
+      setShowLabel = _useState[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.toolbarContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement(Toolbar, null, buttons.map(function (ToolbarButton, index) {
+    return /*#__PURE__*/React.createElement(ToolbarButton, _extends({
+      key: index
+    }, props, {
+      showLabel: showLabel
+    }));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.right
+  }, /*#__PURE__*/React.createElement(_Button, {
+    type: "normal",
+    text: true,
+    onClick: function onClick() {
+      setShowLabel(!showLabel);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: showLabel ? '/img/topo/editor/toolbar/ToolbarNarrowed/Normal.svg' : '/img/topo/editor/toolbar/ToolbbbarExpand/Normal.svg',
+    alt: "",
+    style: {
+      verticalAlign: 'middle'
+    }
+  }))));
+}
+
+export default EditorToolbar;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from "./Toolbar.module.scss";
+
+function Toolbar(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.widgets
+  }, props.children);
+}
+
+export default Toolbar;

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

@@ -0,0 +1,21 @@
+.toolbarContainer {
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.widgets {
+  display: flex;
+}
+
+.right {
+  padding-right: 12px;
+}

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

@@ -0,0 +1,36 @@
+import AddResourceButton from "./widgets/AddResourceButton";
+import CanvasMoveWidget from "./widgets/CanvasMoveWidget";
+import CanvasSelectWidget from "./widgets/CanvasSelectWidget";
+import Divider from "./widgets/Divider";
+import FontFamilyWidget from "./widgets/FontFamilyWidget";
+import FontSizeWidget from "./widgets/FontSizeWidget";
+import FontStyleButton from "./widgets/FontStyleButton";
+import FontColorButton from "./widgets/FontColorButton";
+import Layout from "./widgets/Layout";
+import NodeAlignWidget from "./widgets/NodeAlignWidget";
+import SearchWidget from "./widgets/SearchWidget";
+import HistoryUndoButton from "./widgets/HistoryUndoButton";
+import HistoryRedoButton from "./widgets/HistoryRedoButton";
+import EdgeTypeButton from "./widgets/EdgeTypeButton";
+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 // 搜索
+];

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import ButtonBox from "./components/ButtonBox";
+import WidgetBox from "./WidgetBox";
+
+function AddResourceButton(props) {
+  var showLabel = props.showLabel,
+      topo = props.topo,
+      topoEdit = props.topoEdit;
+  return /*#__PURE__*/React.createElement(WidgetBox, {
+    label: "\u6DFB\u52A0\u8D44\u6E90",
+    tooltip: "\u6DFB\u52A0\u8D44\u6E90",
+    showLabel: showLabel
+  }, /*#__PURE__*/React.createElement(ButtonBox, {
+    onClick: function onClick() {
+      topoEdit.showGlobalAddResourceDrawer();
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/add/Normal.svg",
+    alt: ""
+  })));
+}
+
+export default AddResourceButton;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import ButtonBox from "./components/ButtonBox";
+import WidgetBox from "./WidgetBox";
+
+function AddResourceWidget(props) {
+  var showLabel = props.showLabel;
+  return /*#__PURE__*/React.createElement(WidgetBox, {
+    label: "\u6DFB\u52A0\u8D44\u6E90",
+    tooltip: "\u6DFB\u52A0\u8D44\u6E90",
+    showLabel: showLabel
+  }, /*#__PURE__*/React.createElement(ButtonBox, null, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/add/Normal.svg",
+    alt: ""
+  })));
+}
+
+export default AddResourceWidget;

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

@@ -0,0 +1,46 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["topo", "showLabel"];
+import React, { useEffect, useState } from 'react';
+import DropdownButton from "../components/DropdownButton";
+import WidgetBox from "../WidgetBox";
+import BoxBackgroundSetting from "./BoxBackgroundSetting";
+/**
+ * 框背景设置
+ * @param {*} props 
+ * @returns 
+ */
+
+function BoxBackgroundButton(props) {
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState(true),
+      disabled = _useState[0],
+      setDisabled = _useState[1]; // 选中的元素
+
+
+  var selection = topo.selectionManager.useSelection();
+  useEffect(function () {
+    setDisabled(false);
+  }, [selection]);
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/Normal.svg",
+    alt: ""
+  });
+  return /*#__PURE__*/React.createElement(WidgetBox, {
+    label: "\u6846\u80CC\u666F",
+    tooltip: "\u6846\u80CC\u666F",
+    showLabel: showLabel
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
+    disabled: disabled,
+    trigger: icon
+  }, /*#__PURE__*/React.createElement(BoxBackgroundSetting, {
+    topo: topo
+  })));
+}
+
+export default BoxBackgroundButton;

package/es/core/editor/components/Toolbar/widgets/BoxBackgroundButton/BoxBackgroundSetting.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function BoxBackgroundSetting(props) {
+  // const {  } = props
+  return /*#__PURE__*/React.createElement("div", null, "xxx");
+}
+
+export default BoxBackgroundSetting;

package/es/core/editor/components/Toolbar/widgets/BoxBackgroundButton/index.js

@@ -0,0 +1,2 @@
+import BoxBackgroundButton from "./BoxBackgroundButton";
+export default BoxBackgroundButton;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import WidgetBox from "./WidgetBox";
+import ButtonBox from "./components/ButtonBox";
+
+function CanvasMoveWidget(props) {
+  var showLabel = props.showLabel;
+  return /*#__PURE__*/React.createElement(WidgetBox, {
+    label: "\u79FB\u52A8",
+    tooltip: "\u79FB\u52A8",
+    showLabel: showLabel
+  }, /*#__PURE__*/React.createElement(ButtonBox, null, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/drag/Normal.svg",
+    alt: ""
+  })));
+}
+
+export default CanvasMoveWidget;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import WidgetBox from "./WidgetBox";
+import ButtonBox from "./components/ButtonBox";
+
+function CanvasSelectWidget(props) {
+  var showLabel = props.showLabel;
+  return /*#__PURE__*/React.createElement(WidgetBox, {
+    label: "\u9009\u62E9",
+    tooltip: "\u9009\u62E9",
+    showLabel: showLabel
+  }, /*#__PURE__*/React.createElement(ButtonBox, {
+    active: true
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/select/Normal.svg",
+    alt: ""
+  })));
+}
+
+export default CanvasSelectWidget;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from "./Divider.module.scss";
+
+function Divider() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.divider
+  });
+}
+
+export default Divider;

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

@@ -0,0 +1,6 @@
+.divider {
+  width: 1px;
+  // height: 32px;
+  background: #E4E9EE;
+  margin: 4px 6px 0 6px;
+}

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

@@ -0,0 +1,14 @@
+import _Dropdown from "@alifd/next/es/dropdown";
+import _Menu from "@alifd/next/es/menu";
+import React from 'react';
+
+function Dropdown(props) {
+  var trigger = props.trigger;
+  var menu = /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, null, "Option 1"), /*#__PURE__*/React.createElement(_Menu.Item, null, "Option 2"), /*#__PURE__*/React.createElement(_Menu.Item, null, "Option 3"), /*#__PURE__*/React.createElement(_Menu.Item, null, "Option 4"));
+  return /*#__PURE__*/React.createElement(_Dropdown, {
+    trigger: /*#__PURE__*/React.createElement("a", null, "Click me"),
+    triggerType: "click"
+  }, /*#__PURE__*/React.createElement("div", null, "111"));
+}
+
+export default Dropdown;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function Content(props) {
+  // const {  } = props
+  return /*#__PURE__*/React.createElement("div", null, "xxx");
+}
+
+export default Content;

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

@@ -0,0 +1,46 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["topo", "showLabel"];
+import React, { useEffect, useState } from 'react';
+import DropdownButton from "../components/DropdownButton";
+import WidgetBox from "../WidgetBox";
+import Content from "./Content";
+/**
+ * 线条颜色
+ * @param {*} props 
+ * @returns 
+ */
+
+function EdgeColorButton(props) {
+  var topo = props.topo,
+      showLabel = props.showLabel,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState(true),
+      disabled = _useState[0],
+      setDisabled = _useState[1]; // 选中的元素
+
+
+  var selection = topo.selectionManager.useSelection();
+  useEffect(function () {
+    setDisabled(false);
+  }, [selection]);
+  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/Disable.svg",
+    alt: ""
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/Normal.svg",
+    alt: ""
+  });
+  return /*#__PURE__*/React.createElement(WidgetBox, {
+    label: "\u7EBF\u6761\u989C\u8272",
+    tooltip: "\u7EBF\u6761\u989C\u8272",
+    showLabel: showLabel
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
+    disabled: disabled,
+    trigger: icon
+  }, /*#__PURE__*/React.createElement(Content, {
+    topo: topo
+  })));
+}
+
+export default EdgeColorButton;

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

@@ -0,0 +1,2 @@
+import EdgeColorButton from "./EdgeColorButton";
+export default EdgeColorButton;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function EdgeType(props) {
+  // const {  } = props
+  return /*#__PURE__*/React.createElement("div", null, "\u7EBF\u5F62\u8BBE\u7F6E");
+}
+
+export default EdgeType;