WIP：增加中台通用布局

README.md

@@ -96,3 +96,35 @@ For more development and build issues, please refer to[《CONTRIBUTING》](/docs
 ## 05 Open Source Graph Visualization Platform
 
 ![](https://api.star-history.com/svg?repos=noduslabs/infranodus,glato/emerge,cytoscape/cytoscape,antvis/G6VP,constellation-app/constellation,aws/graph-explorer,graphia-app/graphia,dmlc/GNNLens2,invana/invana-studio,cylynx/motif.gl,kyleruss/graphi&type=Date#id=d2DaR&originHeight=533&originWidth=800&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
+
+- https://github.com/gephi/gephi
+
+- https://github.com/neo4j/neo4j-browser
+
+- https://github.com/antvis/G6VP
+
+- https://github.com/noduslabs/infranodus
+
+- https://github.com/glato/emerge
+
+- https://github.com/cytoscape/cytoscape
+
+- https://github.com/constellation-app/constellation
+
+- https://github.com/aws/graph-explorer
+
+- https://github.com/graphia-app/graphia
+
+- https://github.com/dmlc/GNNLens2
+
+- https://github.com/invana/invana-studio
+
+- https://github.com/cylynx/motif.gl
+
+- https://github.com/kyleruss/graphi
+
+## 06 Business Graph Analysis Software
+
+- GraphXR：https://www.kineviz.com/
+
+- Graphaware：https://graphaware.com/features/

docs/open-source-platform.md

@@ -6,6 +6,8 @@
 
 - https://github.com/gephi/gephi
 
+- https://github.com/neo4j/neo4j-browser
+
 - https://github.com/antvis/G6VP
 
 - https://github.com/noduslabs/infranodus

docs/open-source-platform.zh-CN.md

@@ -6,6 +6,8 @@
 
 - https://github.com/gephi/gephi
 
+- https://github.com/neo4j/neo4j-browser
+
 - https://github.com/antvis/G6VP
 
 - https://github.com/noduslabs/infranodus

packages/gi-assets-basic/src/components/OperatorHeader/WrapContainer.tsx

@@ -227,10 +227,15 @@ const WrapContainer = (Component, componentId, GISDK_ID) => {
             tooltipPlacement={tooltipPlacement}
             isShowTooltip={isShowTooltip}
           >
-            <Button type="text" style={isVertical ? { height: '60px' } : {}} onClick={onClick} disabled={disabled}>
+            <Button
+              type="text"
+              // style={isVertical ? { height: '60px' } : {}}
+              onClick={onClick}
+              disabled={disabled}
+            >
               {isShowIcon && <Icon type={icon} />}
-              {isVertical && <br />}
-              {isShowTitle && title}
+              {/* {isVertical && <br />}
+              {isShowTitle && title} */}
             </Button>
           </WrapTooltip>
           {hasDivider && <Divider type="vertical" />}

packages/gi-assets-basic/src/components/Placeholder/Component.tsx

@@ -1,7 +1,7 @@
 import { useContext } from '@antv/gi-sdk';
 import * as React from 'react';
-import './index.less';
 import $i18n from '../../i18n';
+import './index.less';
 
 export interface LoadingProps {
   img?: string;
@@ -13,7 +13,7 @@ const Placeholder: React.FunctionComponent<LoadingProps> = props => {
   const context = useContext();
   const {
     width = 200,
-    img = 'https://gw.alipayobjects.com/zos/bmw-prod/db278704-6158-432e-99d2-cc5db457585d.svg',
+    img = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BGfQ78mW4kAAAAAAAAAAAAADmJ7AQ/original',
     text,
   } = props;
 

packages/gi-assets-basic/src/components/Placeholder/registerMeta.ts

@@ -6,7 +6,7 @@ export default () => {
       'x-component': 'Input',
       'x-decorator': 'FormItem',
       title: $i18n.get({ id: 'basic.components.Placeholder.registerMeta.ImageAddress', dm: '图片地址' }),
-      default: 'https://gw.alipayobjects.com/zos/bmw-prod/db278704-6158-432e-99d2-cc5db457585d.svg',
+      default: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BGfQ78mW4kAAAAAAAAAAAAADmJ7AQ/original',
     },
     text: {
       type: 'string',

packages/gi-assets-basic/src/components/RichContainer/Component.tsx

@@ -0,0 +1,162 @@
+import { Icon, useContainer, useContext, utils } from '@antv/gi-sdk';
+import { Select, Space } from 'antd';
+import React from 'react';
+import Toolbar from './Toolbar';
+import './index.less';
+const URL_SEARCH_KEY = 'ActiveAssetID';
+const visibleStyle: React.CSSProperties = {
+  visibility: 'visible',
+  width: '100%',
+};
+const hiddenStyle: React.CSSProperties = {
+  visibility: 'hidden',
+  position: 'absolute',
+  bottom: '-800px',
+};
+
+export interface RichContainerState {
+  /** 当前激活的面板 */
+  activeKey: string;
+  /** 当前的模式 */
+  viewMode: string;
+}
+const RichContainer = props => {
+  const { children } = props;
+  const context = useContext();
+  const { HAS_GRAPH } = context;
+  const Containers = useContainer(context);
+  const [state, setState] = React.useState<RichContainerState>({
+    activeKey: utils.searchParamOf(URL_SEARCH_KEY) || 'FilterPanel',
+    viewMode: 'GISDK_CANVAS',
+  });
+  const { activeKey, viewMode } = state;
+
+  const [NavbarLeftArea, NavbarRightArea, ViewArea, DataArea, StylingArea, CanvasArea, AnalysisArea] = Containers;
+
+  const handleChange = id => {
+    const { searchParams, path } = utils.getSearchParams(window.location);
+    searchParams.set(URL_SEARCH_KEY, id);
+    window.location.hash = `${path}?${searchParams.toString()}`;
+
+    setState(preState => {
+      return {
+        ...preState,
+        activeKey: id,
+      };
+    });
+  };
+
+  const handleChangeViewMode = id => {
+    setState(preState => {
+      return {
+        ...preState,
+        viewMode: id,
+      };
+    });
+  };
+
+  const ViewModeOptions = [
+    {
+      value: 'GISDK_CANVAS',
+      label: (
+        <Space>
+          <Icon type="icon-deploymentunit1"></Icon>
+          图谱视图
+        </Space>
+      ),
+    },
+    ...ViewArea.components.map(item => {
+      const { icon, title } = item.props.GIAC_CONTENT;
+      return {
+        value: item.id,
+        label: (
+          <Space>
+            <Icon type={icon}></Icon>
+            {title}
+          </Space>
+        ),
+      };
+    }),
+  ];
+
+  console.log('render.....', Containers, HAS_GRAPH, ViewModeOptions, viewMode);
+
+  return (
+    <div className="gi-rich-container">
+      <div className="gi-rich-container-navbar">
+        <div className="navbar-back">
+          {NavbarLeftArea.components.map(item => {
+            return <item.component key={item.id} {...item.props} />;
+          })}
+        </div>
+        <div className="navbar-setting">
+          {NavbarRightArea.components.map(item => {
+            return <item.component key={item.id} {...item.props} />;
+          })}
+        </div>
+      </div>
+      <div className="gi-rich-container-toolbar">
+        <div className="toolbar-item">
+          <Select
+            bordered={false}
+            defaultValue="GISDK_CANVAS"
+            style={{ width: 120 }}
+            onChange={handleChangeViewMode}
+            options={ViewModeOptions}
+          />
+        </div>
+        <Toolbar
+          value={activeKey}
+          onChange={handleChange}
+          title="查询过滤"
+          displayText
+          options={DataArea.components}
+          HAS_GRAPH={HAS_GRAPH}
+        />
+        <Toolbar
+          value={activeKey}
+          onChange={handleChange}
+          title="布局样式"
+          options={StylingArea.components}
+          HAS_GRAPH={HAS_GRAPH}
+        />
+        <Toolbar
+          value={activeKey}
+          onChange={handleChange}
+          title="画布操作"
+          options={CanvasArea.components}
+          HAS_GRAPH={HAS_GRAPH}
+        />
+        <div className="toolbar-item"></div>
+        <div className="toolbar-item"></div>
+      </div>
+
+      <div className="gi-rich-container-content">
+        <div style={viewMode === 'GISDK_CANVAS' ? visibleStyle : hiddenStyle}>
+          <div className="gi-rich-container-side">
+            {[...DataArea.components, ...StylingArea.components].map(item => {
+              const isActive = activeKey === item.id;
+              return (
+                <div key={item.id} style={{ display: isActive ? 'block' : 'none' }}>
+                  <item.component key={item.id} {...item.props} />
+                </div>
+              );
+            })}
+          </div>
+          <div className="gi-rich-container-canvas">{children}</div>
+        </div>
+        {ViewArea.components.map(item => {
+          const isActive = item.id === viewMode;
+          const viewStyle = isActive ? visibleStyle : hiddenStyle;
+          return (
+            <div key={item.id} style={{ ...viewStyle, background: 'var(--background-color)' }}>
+              {HAS_GRAPH && <item.component key={item.id} {...item.props} />}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default RichContainer;

packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx

@@ -0,0 +1,55 @@
+import { Icon } from '@antv/gi-sdk';
+import { Button, Divider } from 'antd';
+import React from 'react';
+export interface ToolbarProps {
+  /** 分类的标题 */
+  title: string;
+  /** 分类信息 */
+  options: any;
+  /** 当前激活的值 */
+  value: string;
+  /** 触发函数 */
+  onChange: (id: string) => void;
+  /** 是否展示文本 */
+  displayText?: boolean;
+  /** Context.HAS_GRAPH */
+  HAS_GRAPH: boolean;
+}
+const Toolbar = (props: ToolbarProps) => {
+  const { title, options, value, onChange, displayText, HAS_GRAPH } = props;
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <Divider type="vertical" />
+      <span style={{ padding: '0px 16px 0px 8px' }}>{title}</span>
+      {options.map(item => {
+        const isActive = value === item.id;
+        const { id, props: itemProps, component: ItemComponent } = item;
+        const { GIAC_CONTENT } = itemProps;
+        const title = GIAC_CONTENT ? GIAC_CONTENT.title : 'EMPTY';
+        const buttonType = isActive ? 'primary' : 'text';
+        if (!HAS_GRAPH) {
+          return null;
+        }
+        if (!GIAC_CONTENT) {
+          return <ItemComponent {...itemProps} />;
+        }
+        const { icon } = GIAC_CONTENT || {};
+        return (
+          <Button
+            type={buttonType}
+            icon={<Icon type={icon} />}
+            key={id}
+            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+            onClick={() => {
+              onChange(id);
+            }}
+          >
+            {displayText ? title : null}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Toolbar;

packages/gi-assets-basic/src/components/RichContainer/index.less

@@ -0,0 +1,63 @@
+@side-width: 320px;
+.gi-rich-container {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: block;
+
+  .gi-rich-container-navbar {
+    padding: 0px 20px;
+    position: relative;
+    height: 54px;
+    width: 100%;
+    background: var(--background-color);
+    display: flex;
+    justify-content: space-between;
+    .navbar-back {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .navbar-setting {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .gi-rich-container-toolbar {
+    position: relative;
+    height: 44px;
+    width: 100%;
+    background: #f3f5f9;
+    border-bottom: 1px solid #ddd;
+    display: flex;
+    padding: 0px 12px;
+    .toolbar-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .gi-rich-container-content {
+    position: absolute;
+    bottom: 0px;
+    top: 98px;
+    left: 0px;
+    right: 0px;
+    display: flex;
+    .gi-rich-container-side {
+      width: @side-width;
+      height: 100%;
+      background: #f3f5f9;
+    }
+    .gi-rich-container-canvas {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: @side-width;
+      right: 0px;
+    }
+  }
+}

packages/gi-assets-basic/src/components/RichContainer/index.tsx

@@ -0,0 +1,5 @@
+import Component from './Component';
+import info from './info';
+import registerMeta from './registerMeta';
+
+export default { info, component: Component, registerMeta };

packages/gi-assets-basic/src/components/RichContainer/info.ts

@@ -0,0 +1,10 @@
+const info = {
+  id: 'RichContainer',
+  name: '中台布局',
+  desc: '中台布局',
+  cover: 'http://xxx.jpg',
+  category: 'system-interaction',
+  icon: 'icon-home',
+  type: 'GICC_LAYOUT',
+};
+export default info;