source/Component/CommandBar/CommandBar.scss

@@ -10,7 +10,6 @@ div.command-bar {
         text-align: center;
         display: flex;
         justify-content: center;
-        transition: all 100ms ease-in-out;
         color:  inherit;
         
         span.ms-Button-flexContainer i.ms-Icon {

source/Component/CommandBar/CommandBar.tsx

@@ -14,7 +14,7 @@ class CommandBar extends Component<ICommandBarProps> {
     render(): ReactNode {
         return <Theme
             className="command-bar"
-            backgroundLevel={BackgroundLevel.Level2}
+            backgroundLevel={BackgroundLevel.Level3}
             style={{ width: this.props.width }}
         >
             <div>
@@ -43,7 +43,7 @@ class CommandBar extends Component<ICommandBarProps> {
             i18nKey={param.i18NKey}
             directionalHint={DirectionalHint.rightCenter}
         >
-            <IconButton
+            <IconButton 
                 style={{ height: this.props.width }}
                 iconProps={{ iconName: param.iconName }}
                 onClick={ param.click }

source/Component/Container/Container.scss

@@ -1,126 +0,0 @@
-@import "../Theme/Theme.scss";
-
-$container-header-tab-bar-height: 32px;
-
-div.app-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	overflow: hidden;
-	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;
-		display: flex;
-		user-select: none;
-		
-		div.app-tab-header-item {
-			height: 100%;
-			box-sizing: border-box;
-			display: flex;
-			border: .8px solid rgba($color: #000000, $alpha: 0);
-			justify-content: space-between;
-			align-items: stretch;
-			flex-direction: column;
-			cursor: pointer;
-
-			div.border-view {
-				position: relative;
-				display: flex;
-				justify-content: center;
-				flex-direction: row;
-				max-height: 0;
-				height: 0;
-			}
-
-			div.border-view::after {
-				content: "";
-				width: 100%;
-				box-sizing: border-box;
-				height: 32.8px;
-				border: .8px solid rgba($color: #000000, $alpha: 0);
-				transition: all 300ms ease-in-out;
-			}
-
-			div.title-view {
-				padding: 0 10px;
-				display: inline-block;
-				vertical-align: middle;
-				position: relative;
-				transition: all 300ms ease-in-out;
-				z-index: 1;
-			}
-		}
-
-		div.app-tab-header-item.active {
-			border: .8px solid blue;
-		}
-
-		div.app-tab-header-item::after {
-			content: "";
-			width: 0;
-			height: 0;
-			display: block;
-		}
-	}
-
-	div.app-panel {
-		width: 100%;
-		height: 100%;
-		box-sizing: border-box;
-		border: .8px solid rgba($color: #000000, $alpha: 0);
-	}
-
-	div.app-panel.active {
-		border: .8px solid blue !important;
-	}
-}
-
-div.dark.app-container.end-containe {
-	border: .8px solid $lt-bg-color-lvl3-dark;
-
-	div.app-tab-header-item.active,
-	div.app-tab-header-item:hover {
-		background-color: $lt-bg-color-lvl4-dark;
-		color: rgba($color: #FFFFFF, $alpha: .85);
-	}
-	
-	div.app-tab-header-item.active {
-		div.border-view::after {
-			background-color: $lt-bg-color-lvl4-dark;
-		}
-	}
-}
-
-div.light.app-container.end-containe {
-	border: .8px solid $lt-bg-color-lvl3-light;
-
-	div.app-tab-header-item.active,
-	div.app-tab-header-item:hover {
-		color: rgba($color: #000000, $alpha: .85);
-	}
-
-	div.app-tab-header-item.active {
-		div.border-view::after {
-			background-color: $lt-bg-color-lvl4-light;
-		}
-	}
-}

source/Component/Container/Container.tsx

@@ -1,80 +0,0 @@
-import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
-import { ILayout, LayoutDirection } from "@Model/Layout";
-import { Component, ReactNode } from "react";
-import "./Container.scss";
-
-interface IContainerProps extends ILayout {
-	showBar?: boolean;
-	isRoot?: boolean;
-}
-
-function getPanelById(id: string) {
-	return <Theme className="app-panel">{id}</Theme>
-}
-
-class Container extends Component<IContainerProps> {
-
-	private renderPanel(panles: string[], showBar: boolean) {
-		return <>
-			{showBar ? 
-				<Theme
-					className="app-tab-header"
-					backgroundLevel={BackgroundLevel.Level3}
-					fontLevel={FontLevel.Level3}
-				>{
-					panles.map((panelId: string) => {
-						return <div key={panelId} className="app-tab-header-item">
-							<div className="border-view"></div>
-							<div className="title-view" >{panelId}</div>
-						</div>
-					})
-				}</Theme> : null
-			}
-			{getPanelById(panles[0])}
-		</>
-	}
-
-	private renderContainer(
-		props: IContainerProps, 
-		selfScale: number = 50, 
-		selfLayout: LayoutDirection = LayoutDirection.Y
-	) {
-
-		const items: [IContainerProps, IContainerProps] | undefined = props.items;
-		const showBar: boolean = props.showBar ?? true;
-		const panles: string[] = props.panles ?? [];
-		const layout: LayoutDirection = props.layout ?? LayoutDirection.Y;
-		const scale: number = props.scale ?? 50;
-		const isRoot: boolean = !!props.isRoot;
-
-		return <Theme
-			className={"app-container" + (panles.length > 0 && !items ? " end-containe" : "")}
-			backgroundLevel={BackgroundLevel.Level4}
-			fontLevel={FontLevel.normal}
-			style={{
-				flexDirection: layout === LayoutDirection.Y ? "column" : undefined,
-				width: isRoot ? "100%" : selfLayout === LayoutDirection.X ? `${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>
-	}
-
-	public render(): ReactNode {
-		return this.renderContainer(this.props);
-	}
-}
-
-export { Container };

source/Model/Layout.ts

@@ -1,21 +0,0 @@
-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,8 +6,6 @@ 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 } from "@Component/Container/Container";
-import { LayoutDirection } from "@Model/Layout";
 import "./SimulatorWeb.scss";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
 
@@ -74,33 +72,7 @@ class SimulatorWeb extends Component {
                 height: `calc( 100% - ${45}px)`
             }}>
                 <CommandBar width={45}/>
-                <Container items={[
+                <div></div>
-                        {
-                            items: [
-                                {panles: ["Label A", "Label Aa Bb", "Label aaa"]},
-                                {
-                                    items: [{panles: ["Label b", "Label bbb"]}, {panles: ["C"]}],
-                                    scale: 80,
-                                    layout: LayoutDirection.X
-                                }
-                            ],
-                            scale: 60,
-                            layout: LayoutDirection.Y
-                        },
-                        {
-                            items: [{
-                                panles: ["Label d"]
-                            }, {
-                                items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}],
-                                layout: LayoutDirection.Y
-                            }],
-                            layout: LayoutDirection.Y
-                        }
-                    ]}
-                    scale={60}
-                    layout={LayoutDirection.X}
-                    isRoot={true}
-                />
             </div>
         </Theme>
     }