Add layout model

source/Component/Container/Container.scss

@@ -10,6 +10,22 @@ div.app-container {
 	justify-content: center;
 	box-sizing: border-box;
 
+	div.drag-bar {
+		width: 0;
+		height: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		div {
+			position: relative;
+			z-index: 10;
+			width: 100%;
+			height: 100%;
+			border: 4.5px solid rgba($color: #000000, $alpha: 0);
+		}
+	}
+
 	div.app-tab-header {
 		height: $container-header-tab-bar-height;
 		flex-shrink: 0;
@@ -85,10 +101,6 @@ div.dark.app-container.end-containe {
 	div.app-tab-header-item:hover {
 		background-color: $lt-bg-color-lvl4-dark;
 		color: rgba($color: #FFFFFF, $alpha: .85);
-
-		div.border-view::after {
-			background-color: $lt-bg-color-lvl4-dark;
-		}
 	}
 	
 	div.app-tab-header-item.active {
@@ -103,7 +115,6 @@ div.light.app-container.end-containe {
 
 	div.app-tab-header-item.active,
 	div.app-tab-header-item:hover {
-		background-color: $lt-bg-color-lvl4-light;
 		color: rgba($color: #000000, $alpha: .85);
 	}
 

source/Component/Container/Container.tsx

@@ -1,18 +1,10 @@
-import Theme, { BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { ILayout, LayoutDirection } from "@Model/Layout";
 import { Component, ReactNode } from "react";
 import "./Container.scss";
 
-enum ContaineLayout {
+interface IContainerProps extends ILayout {
-	X = 1,
-	Y = 2
-}
-
-interface IContainerProps {
-	items?: [IContainerProps, IContainerProps];
 	showBar?: boolean;
-	panles?: string[];
-	layout?: ContaineLayout;
-	scale?: number;
 	isRoot?: boolean;
 }
 
@@ -45,13 +37,13 @@ class Container extends Component<IContainerProps> {
 	private renderContainer(
 		props: IContainerProps, 
 		selfScale: number = 50, 
-		selfLayout: ContaineLayout = ContaineLayout.Y
+		selfLayout: LayoutDirection = LayoutDirection.Y
 	) {
 
 		const items: [IContainerProps, IContainerProps] | undefined = props.items;
 		const showBar: boolean = props.showBar ?? true;
 		const panles: string[] = props.panles ?? [];
-		const layout: ContaineLayout = props.layout ?? ContaineLayout.Y;
+		const layout: LayoutDirection = props.layout ?? LayoutDirection.Y;
 		const scale: number = props.scale ?? 50;
 		const isRoot: boolean = !!props.isRoot;
 
@@ -60,13 +52,22 @@ class Container extends Component<IContainerProps> {
 			backgroundLevel={BackgroundLevel.Level4}
 			fontLevel={FontLevel.normal}
 			style={{
-				flexDirection: layout === ContaineLayout.Y ? "column" : undefined,
+				flexDirection: layout === LayoutDirection.Y ? "column" : undefined,
-				width: isRoot ? "100%" : selfLayout === ContaineLayout.X ? `${selfScale}%` : undefined,
+				width: isRoot ? "100%" : selfLayout === LayoutDirection.X ? `${selfScale}%` : undefined,
-				height: isRoot ? "100%" : selfLayout === ContaineLayout.Y ? `${selfScale}%` : undefined
+				height: isRoot ? "100%" : selfLayout === LayoutDirection.Y ? `${selfScale}%` : undefined
 			}}
 		>
 			{panles.length > 0 && !items ? this.renderPanel(panles, showBar) : null}
 			{items && items[0] ? this.renderContainer(items[0], scale, layout) : null}
+			{items && items[1] ? <div className="drag-bar" style={{
+				width: layout === LayoutDirection.Y ? "100%" : 0,
+				height: layout === LayoutDirection.X ? "100%" : 0
+			}}>
+				<div style={{
+					cursor: layout === LayoutDirection.Y ? "n-resize" : "e-resize"
+				}}>
+				</div>
+			</div> : null}
 			{items && items[1] ? this.renderContainer(items[1], 100 - scale, layout) : null}
 		</Theme>
 	}
@@ -76,4 +77,4 @@ class Container extends Component<IContainerProps> {
 	}
 }
 
-export { Container, ContaineLayout };
+export { Container };

source/Model/Layout.ts

@@ -0,0 +1,21 @@
+import { Emitter } from "./Emitter";
+
+enum LayoutDirection {
+	X = 1,
+	Y = 2
+}
+
+class ILayout {
+	items?: [ILayout, ILayout];
+	panles?: string[];
+	layout?: LayoutDirection;
+	scale?: number;
+}
+
+class Layout extends Emitter<{}> {
+
+	private data: ILayout = {};
+
+};
+
+export { Layout, ILayout, LayoutDirection };

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,7 +6,8 @@ import { Entry } from "../Entry/Entry";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
-import { Container, ContaineLayout } from "@Component/Container/Container";
+import { Container } from "@Component/Container/Container";
+import { LayoutDirection } from "@Model/Layout";
 import "./SimulatorWeb.scss";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 
@@ -76,28 +77,28 @@ class SimulatorWeb extends Component {
                 <Container items={[
                         {
                             items: [
-                                {panles: ["A", "Aa Bb", "aaa"]},
+                                {panles: ["Label A", "Label Aa Bb", "Label aaa"]},
                                 {
-                                    items: [{panles: ["b", "Bb", "bbb"]}, {panles: ["c", "cc", "ccc"]}],
+                                    items: [{panles: ["Label b", "Label bbb"]}, {panles: ["C"]}],
                                     scale: 80,
-                                    layout: ContaineLayout.X
+                                    layout: LayoutDirection.X
                                 }
                             ],
                             scale: 60,
-                            layout: ContaineLayout.Y
+                            layout: LayoutDirection.Y
                         },
                         {
                             items: [{
-                                panles: ["d"]
+                                panles: ["Label d"]
                             }, {
-                                items: [{panles: ["e", "ee"]}, {panles: ["f", "ff", "fff"]}],
+                                items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
-                                layout: ContaineLayout.Y
+                                layout: LayoutDirection.Y
                             }],
-                            layout: ContaineLayout.Y
+                            layout: LayoutDirection.Y
                         }
                     ]}
                     scale={60}
-                    layout={ContaineLayout.X}
+                    layout={LayoutDirection.X}
                     isRoot={true}
                 />
             </div>