feat: add bubbleLayout demo

package.json

@@ -25,12 +25,13 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-scripts": "3.4.0",
-    "regraph-next": "^0.0.1",
+    "regraph-next": "^0.0.2-beta1",
     "typescript": "^3.7.5",
     "uuid": "^3.3.2"
   },
   "devDependencied": {
     "gh-pages": "^2.2.0",
+    "d3-format": "^1.4.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -57,6 +58,8 @@
   "devDependencies": {
     "@types/classnames": "^2.2.9",
     "@types/lodash": "^4.14.149",
-    "@types/uuid": "^7.0.0"
+    "@types/uuid": "^7.0.0",
+    "d3-format": "^1.4.3",
+    "react-router-dom": "^5.1.2"
   }
 }

src/App.tsx

@@ -1,11 +1,48 @@
 import * as React from "react";
+import { Layout, Menu } from "antd";
+import { Switch, Route, Link, useLocation, useHistory } from "react-router-dom";
 import Editor from "./editor";
-import "./styles.css";
+import Bubble from "./bubble";
+
+import "./styles.scss";
+const { useState, useEffect } = React;
+const { Header, Content } = Layout;
 
 export default function App() {
+  const [menuKey, setMenuKey] = useState("/");
+  const location = useLocation();
+  useEffect(() => {
+    const pathname = location.pathname;
+    setMenuKey(pathname);
+  }, [location]);
+
+  console.log('menuKey',menuKey)
   return (
-    <div className="App">
-      <Editor />
-    </div>
+    <Layout className="layout">
+      <Header>
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          selectedKeys={[menuKey]}
+          style={{ lineHeight: "64px" }}
+        >
+          <Menu.Item key="/">
+            <Link to="/">图编排</Link>
+          </Menu.Item>
+          <Menu.Item key="/bubble">
+            <Link to="/bubble">气泡图</Link>
+          </Menu.Item>
+        </Menu>
+      </Header>
+      <Content>
+        <div className="site-layout-content">
+          <Switch>
+            <Route exact path="/" component={Editor} />
+            <Route exact path="/bubble" component={Bubble} />
+          </Switch>
+        </div>
+      </Content>
+    </Layout>
   );
 }

src/bubble/Bubble.scss

@@ -0,0 +1,94 @@
+.bubble-wrapper {
+  margin:0px auto;
+  width:850px;
+  height:600px;
+}
+.bubble-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .icon-back {
+    font-size: 20px;
+    position: absolute;
+    top: 8px;
+    left: 420px;
+    cursor: pointer;
+    color: #6ca0f5;
+    z-index: 99;
+  }
+
+  .scene-center-title {
+    position: absolute;
+    font-size: 20px;
+    color: #fff;
+    top: 5px;
+    left: 274px;
+  }
+
+  .scene-center-legend {
+    position: absolute;
+    left: 220px;
+    bottom: 16px;
+
+    .data-storage {
+      display: inline-block;
+      line-height: 26px;
+      margin: 0 8px;
+
+      > div {
+        display: inline-block;
+        border: 1px solid #6ca0f5;
+        margin-left: 8px;
+        margin-right: 4px;
+        vertical-align: middle;
+      }
+
+      .small {
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+      }
+
+      .middle {
+        width: 17px;
+        height: 17px;
+        border-radius: 17px;
+      }
+
+      .big {
+        width: 26px;
+        height: 26px;
+        border-radius: 26px;
+      }
+    }
+
+    .data-flow {
+      display: inline-block;
+      line-height: 26px;
+      margin: 0 8px;
+
+      .flow-arrow {
+        display: inline-block;
+        vertical-align: middle;
+        width: 120px;
+        height: 26px;
+      }
+    }
+  }
+
+  .scene-center-legend-selected {
+    left: 135px;
+  }
+}
+
+.bubble {
+  .bubble-nodes {
+    cursor: pointer;
+  }
+
+  .bubble-text {
+    cursor: pointer;
+  }
+}
+