@riil-frontend/component-topology 6.0.0-alpha.1 → 6.0.0-alpha.3

package/es/components/VerticalIconTab/VerticalIconTab.js

@@ -10,11 +10,12 @@ import styles from "./VerticalIconTab.module.scss";
  */
 
 function CustomTabItem(_ref) {
-  var title = _ref.title;
+  var title = _ref.title,
+      icon = _ref.icon;
   return /*#__PURE__*/React.createElement("div", {
     className: "v-icon-tab-item"
   }, /*#__PURE__*/React.createElement("img", {
-    src: "/img/topo/editor/sidebar/icon/\u94FE\u8DEF.svg",
+    src: icon,
     alt: ""
   }), /*#__PURE__*/React.createElement("div", {
     className: "tab-title"
@@ -46,7 +47,7 @@ function VerticalIconTab(props) {
       }, props));
     }
   }, props, {
-    className: styles.tab,
+    className: styles.tabs,
     navClassName: styles.nav,
     contentClassName: classNames(styles.content, (_classNames = {}, _classNames[styles.hide] = !activeKey, _classNames)),
     onClick: handleClick

package/es/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -1,25 +1,42 @@
 @import '~@alifd/next/variables.scss';
 
 
-.tab {
+.tabs {
   height: 100%;
+
 }
 
 // 导航
 .nav {
   width: 60px;
   height: 100%;
-  border-right: 1px solid #E6E7EB;
+  padding-top: 4px;
+  border-right: 1px solid var(--tab-wrapped-border-line-color);
+  background: none !important;
 
   :global {
 
+    .#{$css-prefix}tabs-tab {
+      background-color: transparent !important;
+
+      &.active .v-icon-tab-item {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
+    }
+
     // 图标区
     .v-icon-tab-item {
+      height: 76px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 76px;
+      margin: 0 4px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
     }
   }
 }
@@ -28,15 +45,20 @@
 .content {
   width: 260px;
   height: 100%;
+  transition: all .1s linear;
+  border-left: none !important;
+  border-right: 1px solid var(--tab-wrapped-border-line-color);
 
   :global {
     .#{$css-prefix}tabs-tabpane {
       width: 100%;
       height: 100%;
+      overflow: auto;
     }
   }
 
   &.hide {
-    display: none;
+    width: 0;
+    border-right: none;
   }
 }

package/es/components/collapse/Collapse.js

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

package/es/components/collapse/Collapse.module.scss

@@ -0,0 +1,44 @@
+@import "@alifd/next/variables";
+
+.collapse {
+  :global {
+
+    // 折叠模板标题
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title:hover {
+      background: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      padding-left: 32px;
+
+      &>.#{$css-prefix}collapse-panel-icon {
+        left: 12px;
+        margin-top: 0;
+        margin-left: 0;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel-content,
+    .#{$css-prefix}collapse-panel-expanded>.#{$css-prefix}collapse-panel-content {
+      // padding-left: 32px;
+      padding-top: 8px;
+    }
+  }
+
+  &.contentNoPadding {
+
+    :global {
+
+      .#{$css-prefix}collapse-panel-content,
+      .#{$css-prefix}collapse-panel-expanded>.#{$css-prefix}collapse-panel-content {
+        padding: 8px 0;
+      }
+    }
+  }
+}

package/es/components/collapse/CollapseFullheight.module.scss

@@ -0,0 +1,20 @@
+@import "@alifd/next/variables";
+
+.fullheight {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .panelFullHeight {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :global {
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
+}

package/es/components/collapse/Panel.js

@@ -52,6 +52,9 @@ function CollapsePanel(props) {
     },
     onBlur: function onBlur() {
       setHoverExtra(false);
+    },
+    style: {
+      height: 20
     }
   }, extra));
   return /*#__PURE__*/React.createElement(_Collapse.Panel, _extends({

package/es/core/common/icons/icon.js

@@ -12,6 +12,19 @@ export function getNodeDefaultIcons(topo) {
 export function getGroupDefaultIcons(topo) {
   return [].concat(topoManager.iconLibManager.getIcons());
 }
+export function getUserCustomIconsForHt(topo) {
+  return getUserCustomIcons(topo).map(function (_ref) {
+    var id = _ref.id,
+        name = _ref.name,
+        url = _ref.url,
+        jsonUrl = _ref.jsonUrl;
+    return {
+      id: id,
+      name: name,
+      url: jsonUrl || url
+    };
+  });
+}
 /**
  * 获取编辑模式左侧图片列表
  * @param {*} topo 
@@ -22,11 +35,11 @@ export function getEditorIcons(topo) {
     // 默认图标
     system: getNodeDefaultIcons(topo),
     // 自定义上传图标
-    custom: getUserCustomIcons(topo).map(function (_ref) {
-      var id = _ref.id,
-          name = _ref.name,
-          url = _ref.url,
-          jsonUrl = _ref.jsonUrl;
+    custom: getUserCustomIcons(topo).map(function (_ref2) {
+      var id = _ref2.id,
+          name = _ref2.name,
+          url = _ref2.url,
+          jsonUrl = _ref2.jsonUrl;
       return {
         id: id,
         name: name,

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

@@ -1,10 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState } from 'react';
+import VerticalIconTab from "../../../../components/VerticalIconTab";
+import LinkPanel from "./views/LinkPanel";
+import ComponentPanel from "./views/ComponentPanel";
+import ImagePanel from "./views/ImagePanel";
+import BackgroundPanel from "./views/BackgroundPanel";
+import CanvasPanel from "./views/CanvasPanel";
 import styles from "./Sidebar.module.scss";
-import LinkView from "./views/LinkView";
-import VerticalIconTab from "../../../../components/VerticalIconTab/VerticalIconTab";
+import classNames from 'classnames';
 
 function Sidebar(props) {
+  var _classNames;
+
   var topo = props.topo;
 
   var _useState = useState(null),
@@ -15,43 +22,35 @@ function Sidebar(props) {
     title: '链路',
     key: '1',
     icon: '/img/topo/editor/sidebar/icon/链路.svg',
-    content: LinkView
+    content: LinkPanel
   }, {
     title: '组件',
     key: '2',
     icon: '/img/topo/editor/sidebar/icon/组件.svg',
-    content: function content() {
-      return /*#__PURE__*/React.createElement("div", null, "222");
-    }
+    content: ComponentPanel
   }, {
     title: '图片',
     key: '3',
     icon: '/img/topo/editor/sidebar/icon/图片.svg',
-    content: function content() {
-      return /*#__PURE__*/React.createElement("div", null, "333");
-    }
+    content: ImagePanel
   }, {
     title: '背景',
     key: '4',
     icon: '/img/topo/editor/sidebar/icon/背景.svg',
-    content: function content() {
-      return /*#__PURE__*/React.createElement("div", null, "333");
-    }
+    content: BackgroundPanel
   }, {
     title: '画布',
     key: '5',
     icon: '/img/topo/editor/sidebar/icon/画布.svg',
-    content: function content() {
-      return /*#__PURE__*/React.createElement("div", null, "333");
-    }
+    content: CanvasPanel
   }].map(function (item) {
     var View = item.content;
     return _extends({}, item, {
       content: function content() {
-        return /*#__PURE__*/React.createElement(View, {
+        return /*#__PURE__*/React.createElement(View, _extends({}, props, {
           topo: topo,
           active: activeKey === item.key
-        });
+        }));
       }
     });
   });
@@ -68,10 +67,12 @@ function Sidebar(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.sidebar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.tabsContainer, (_classNames = {}, _classNames[styles.expanded] = !!activeKey, _classNames))
   }, /*#__PURE__*/React.createElement(VerticalIconTab, {
     activeKey: activeKey,
     onChange: setActivekey
-  }, panes.map(renderTabItem)));
+  }, panes.map(renderTabItem))));
 }
 
 export default Sidebar;

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

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

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

@@ -0,0 +1,9 @@
+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
+  });
+}

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 "./HtImagePalette";
+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,20 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { getUserCustomIconsForHt } from "../../../../../common/icons/icon";
+import HtCustomImagePanel from "./HtCustomImagePanel";
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+
+export default function CustomImagePanel(props) {
+  var topo = props.topo;
+  var icons = useMemo(function () {
+    return getUserCustomIconsForHt(topo);
+  }, []);
+  return /*#__PURE__*/React.createElement(HtCustomImagePanel, {
+    icons: icons,
+    topo: topo
+  });
+}

package/es/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.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 HtCustomImagePanel(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.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/HtImagePalette.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 HtImagePalette(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/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,29 @@
+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 classNames from 'classnames';
+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: classNames(CollapseStyles.collapse, CollapseStyles.contentNoPadding)
+  }, /*#__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;