From 3eb25c1bcd95823df7ac17a8ed6b7887ec45b833 Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Mon, 17 Jan 2022 19:58:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Plot/index.less     | 14 ++++++++++++++
 src/editor/Plot/index.tsx      | 25 +++++++++++++++++++++++--
 src/editor/Property/index.less |  0
 src/editor/index.less          |  9 +++++++++
 src/editor/index.tsx           |  6 ++++--
 5 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/editor/Plot/index.less
 create mode 100644 src/editor/Property/index.less

diff --git a/src/editor/Plot/index.less b/src/editor/Plot/index.less
new file mode 100644
index 0000000..807feb6
--- /dev/null
+++ b/src/editor/Plot/index.less
@@ -0,0 +1,14 @@
+.map-stage{
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 40px);
+  top: 40px;
+  left: 0;
+}
+.tools-properties{
+  position: absolute;
+  width: 100%;
+  height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/src/editor/Plot/index.tsx b/src/editor/Plot/index.tsx
index 77b4801..7342801 100644
--- a/src/editor/Plot/index.tsx
+++ b/src/editor/Plot/index.tsx
@@ -1,7 +1,28 @@
+import { Layout } from "antd";
+import { useEffect, useRef } from "react";
+import { MapStage } from "../../mapStage";
 
 
+import "./index.less";
+
+const { Header, Footer, Sider, Content } = Layout;
+
 const Plot = () => {
-  return <h1>属性区域</h1>;
-}
+
+  const mapStageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const map = new MapStage(mapStageRef.current!);
+    map.init();
+  });
+
+  return (
+    <>
+      <div className="map-stage" ref={mapStageRef}></div>
+      <div className="tools-properties"></div>
+      <div className="tools-area"></div>
+    </>
+  );
+};
 
 export default Plot;
\ No newline at end of file
diff --git a/src/editor/Property/index.less b/src/editor/Property/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/editor/index.less b/src/editor/index.less
index 2d7af32..ebcee4e 100644
--- a/src/editor/index.less
+++ b/src/editor/index.less
@@ -2,6 +2,15 @@
 .editor-main{
   height: 100%;
 }
+.editor-header{
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px;
+  border-bottom: 1px solid #ccc;
+}
+.editor-body-center{
+  position: relative;
+}
 .editor-header, .editor-body-left, .editor-body-right{
   background-color: #fff;
 }
diff --git a/src/editor/index.tsx b/src/editor/index.tsx
index 7df82c4..887b4ec 100644
--- a/src/editor/index.tsx
+++ b/src/editor/index.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 import { Layout } from "antd";
-import { MapStage } from "../mapStage";
 
 import "./index.less";
+import Plot from "./Plot";
 
 const { Header, Footer, Sider, Content } = Layout;
 
@@ -12,7 +12,9 @@ export const Editor = () => {
       <Header className="editor-header">header</Header>
       <Layout className="editor-body">
         <Sider className="editor-body-left">Sider</Sider>
-        <Content className="editor-body-center">Content</Content>
+        <Content className="editor-body-center">
+          <Plot />
+        </Content>
         <Sider className="editor-body-right">Sider</Sider>
       </Layout>
     </Layout>