source/Component/Container/Container.scss

@@ -7,6 +7,7 @@ div.app-container {
 	height: 100%;
 	display: flex;
 	overflow: hidden;
+	justify-content: center;
 	box-sizing: border-box;
 
 	div.drag-bar {
@@ -21,20 +22,13 @@ div.app-container {
 			z-index: 10;
 			width: 100%;
 			height: 100%;
-			border: 2px solid rgba($color: #000000, $alpha: 0);
+			border: 4.5px solid rgba($color: #000000, $alpha: 0);
-			transition: all 300ms ease-in-out;
-		}
-
-		div:hover {
-			background-color: blue;
 		}
 	}
 
 	div.app-tab-header {
 		height: $container-header-tab-bar-height;
-		min-height: $container-header-tab-bar-height;
+		flex-shrink: 0;
-		flex-shrink: 1;
-		width: 100%;
 		display: flex;
 		user-select: none;
 		
@@ -72,10 +66,6 @@ div.app-container {
 				vertical-align: middle;
 				position: relative;
 				transition: all 300ms ease-in-out;
-				word-break: keep-all;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
 				z-index: 1;
 			}
 		}
@@ -104,15 +94,6 @@ div.app-container {
 	}
 }
 
-div.app-panel {
-	overflow: scroll;
-	-ms-overflow-style: none;
-}
-div.app-panel::-webkit-scrollbar {
-	width: 0 !important;
-	height: 0 !important;
-}
-
 div.dark.app-container.end-containe {
 	border: .8px solid $lt-bg-color-lvl3-dark;
 

source/Component/Container/Container.tsx

@@ -1,5 +1,4 @@
 import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
-import { Themes } from "@Context/Setting";
 import { ILayout, LayoutDirection } from "@Model/Layout";
 import { Component, ReactNode } from "react";
 import "./Container.scss";
@@ -7,50 +6,29 @@ import "./Container.scss";
 interface IContainerProps extends ILayout {
 	showBar?: boolean;
 	isRoot?: boolean;
-	theme?: Themes;
-	focusId?: string;
-	onScaleChange?: (id: number, scale: number) => any;
 }
 
 function getPanelById(id: string) {
-	return <Theme
+	return <Theme className="app-panel">{id}</Theme>
-		className="app-panel" draggable={false}
-	>{id}</Theme>
 }
 
 class Container extends Component<IContainerProps> {
 
-	private focusEdgeId: number | undefined;
-	private readonly edgeInfo = {
-		direction: LayoutDirection.Y,
-		rootWidth: 0,
-		rootHeight: 0,
-		edgeWidth: 0,
-		edgeHeight: 0,
-		mouseX: 0,
-		mouseY: 0
-	};
-
 	private renderPanel(panles: string[], showBar: boolean) {
-
-		const classList: string[] = [];
-		const theme: Themes = this.props.theme ?? Themes.dark;
-
-		classList.push(theme === Themes.light ? "light" : "dark");
-		classList.push(`background-${BackgroundLevel.Level3}`);
-		classList.push(`font-${FontLevel.Level3}`);
-		classList.push("app-tab-header");
-
 		return <>
 			{showBar ? 
-				<div className={classList.join(" ")} >{
+				<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>
 					})
-				}</div> : null
+				}</Theme> : null
 			}
 			{getPanelById(panles[0])}
 		</>
@@ -68,56 +46,16 @@ class Container extends Component<IContainerProps> {
 		const layout: LayoutDirection = props.layout ?? LayoutDirection.Y;
 		const scale: number = props.scale ?? 50;
 		const isRoot: boolean = !!props.isRoot;
-		const classList: string[] = [];
-		const theme: Themes = this.props.theme ?? Themes.dark;
 
-		classList.push(theme === Themes.light ? "light" : "dark");
+		return <Theme
-		classList.push(`background-${BackgroundLevel.Level4}`);
+			className={"app-container" + (panles.length > 0 && !items ? " end-containe" : "")}
-		classList.push(`font-${FontLevel.normal}`);
+			backgroundLevel={BackgroundLevel.Level4}
-		classList.push("app-container");
+			fontLevel={FontLevel.normal}
-		if (panles.length > 0 && !items) classList.push("end-containe");
-
-		return <div
-			className={classList.join(" ")}
-			draggable={false}
 			style={{
-				transition: "none",
 				flexDirection: layout === LayoutDirection.Y ? "column" : undefined,
 				width: isRoot ? "100%" : selfLayout === LayoutDirection.X ? `${selfScale}%` : undefined,
 				height: isRoot ? "100%" : selfLayout === LayoutDirection.Y ? `${selfScale}%` : undefined
 			}}
-			onMouseMove={isRoot ? (e) => {
-				if (this.props.onScaleChange && this.focusEdgeId !== undefined) {
-					e.preventDefault();
-					let mouveDist: number = 0;
-					let rootSize: number = 0;
-					let edgeSize: number = 0;
-					let newSize: number = 0;
-
-					if (this.edgeInfo.direction === LayoutDirection.X) {
-						mouveDist = e.clientX - this.edgeInfo.mouseX;
-						rootSize = this.edgeInfo.rootWidth;
-						edgeSize = this.edgeInfo.edgeWidth;
-						newSize = edgeSize + mouveDist;
-					}
-
-					if (this.edgeInfo.direction === LayoutDirection.Y) {
-						mouveDist = e.clientY - this.edgeInfo.mouseY;
-						rootSize = this.edgeInfo.rootHeight;
-						edgeSize = this.edgeInfo.edgeHeight
-						newSize = edgeSize + mouveDist;	
-					}
-
-					if (newSize < 38) { newSize = 38; }
-					if ((rootSize - newSize) < 38) { newSize = rootSize - 38; }
-
-					let newScale = newSize / rootSize;
-					this.props.onScaleChange(this.focusEdgeId, newScale * 100);
-				}
-			} : undefined}
-			onMouseUp={isRoot ? () => {
-				this.focusEdgeId = undefined;
-			} : undefined}
 		>
 			{panles.length > 0 && !items ? this.renderPanel(panles, showBar) : null}
 			{items && items[0] ? this.renderContainer(items[0], scale, layout) : null}
@@ -125,32 +63,13 @@ class Container extends Component<IContainerProps> {
 				width: layout === LayoutDirection.Y ? "100%" : 0,
 				height: layout === LayoutDirection.X ? "100%" : 0
 			}}>
-				<div
+				<div style={{
-					style={{ cursor: layout === LayoutDirection.Y ? "n-resize" : "e-resize" }}
+					cursor: layout === LayoutDirection.Y ? "n-resize" : "e-resize"
-					onMouseDown={(e) => {
+				}}>
-						const targetNode = e.target;
-						if (targetNode instanceof HTMLDivElement) {
-							let root = targetNode.parentNode?.parentNode;
-							let firstDiv = targetNode.parentNode?.parentNode?.childNodes[0];
-
-							if (root instanceof HTMLDivElement && firstDiv instanceof HTMLDivElement) {
-								this.edgeInfo.rootWidth = root.offsetWidth;
-								this.edgeInfo.rootHeight = root.offsetHeight;
-								this.edgeInfo.edgeWidth = firstDiv.offsetWidth;
-								this.edgeInfo.edgeHeight = firstDiv.offsetHeight;
-							}
-						}
-						this.edgeInfo.mouseX = e.clientX;
-						this.edgeInfo.mouseY = e.clientY;
-						this.edgeInfo.direction = props.layout ?? LayoutDirection.Y;
-						this.focusEdgeId = props.id ?? 0;
-					}}
-					onMouseUp={() => { this.focusEdgeId = undefined }}
-				>
 				</div>
 			</div> : null}
 			{items && items[1] ? this.renderContainer(items[1], 100 - scale, layout) : null}
-		</div>
+		</Theme>
 	}
 
 	public render(): ReactNode {

source/Component/Container/RootContainer.tsx

@@ -1,43 +0,0 @@
-import { Component, ReactNode } from "react";
-import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
-import { Container } from "./Container";
-
-@useSetting
-class RootContainer extends Component<IMixinSettingProps> {
-
-	private handelChange = () => {
-		this.forceUpdate();
-	}
-
-	public componentDidMount() {
-		if (this.props.setting) {
-			this.props.setting.layout.on("layoutChange", this.handelChange);
-			this.props.setting.layout.on("scaleChange", this.handelChange);
-			this.props.setting.on("themes", this.handelChange);
-		}
-	}
-
-	public componentWillUnmount() {
-		if (this.props.setting) {
-			this.props.setting.layout.off("layoutChange", this.handelChange);
-			this.props.setting.layout.off("scaleChange", this.handelChange);
-			this.props.setting.off("themes", this.handelChange);
-		}
-	}
-
-	public render(): ReactNode {
-		const layoutData = this.props.setting ? this.props.setting.layout.getData() : {};
-		const theme = this.props.setting?.themes ?? Themes.dark;
-		return <Container
-			scale={layoutData.scale}
-			items={layoutData.items}
-			layout={layoutData.layout}
-			theme={theme}
-			isRoot={true}
-			onScaleChange={this.props.setting?.layout.setScale}
-			id={layoutData.id}
-		/>
-	}
-}
-
-export { RootContainer }

source/Context/Setting.tsx

@@ -1,6 +1,5 @@
 import { createContext, Component, FunctionComponent } from "react";
 import { Emitter } from "@Model/Emitter";
-import { Layout } from "@Model/Layout";
 
 /**
  * 主题模式
@@ -26,11 +25,6 @@ class Setting extends Emitter<
      */
     public language: Language = "EN_US";
 
-    /**
-     * 布局
-     */
-    public layout: Layout = new Layout();
-
     /**
      * 设置参数
      */

source/Model/Layout.ts

@@ -10,58 +10,12 @@ class ILayout {
 	panles?: string[];
 	layout?: LayoutDirection;
 	scale?: number;
-	id?: number;
 }
 
-interface ILayoutEvent {
+class Layout extends Emitter<{}> {
-	layoutChange: Layout;
-	scaleChange: Layout;
-}
-
-class Layout extends Emitter<ILayoutEvent> {
-
-	private id: number = 0;
 
 	private data: ILayout = {};
 
-	private map(fn: (layout: ILayout) => boolean | void, layout?: ILayout) {
-		const currentLayout = layout ? layout : this.data;
-		if( fn(currentLayout) ) return;
-		if (currentLayout.items && currentLayout.items[0]) {
-			this.map(fn, currentLayout.items[0]);
-		}
-		if (currentLayout.items && currentLayout.items[1]) {
-			this.map(fn, currentLayout.items[1]);
-		}
-	}
-
-	public getData = (): ILayout => {
-		return this.data;
-	}
-
-	public setData = (data: ILayout) => {
-		this.data = data;
-		this.id = 0;
-		this.map((layout) => {
-			layout.id = this.id;
-			this.id ++;
-		});
-		this.emit("layoutChange", this);
-	}
-
-	public setScale = (id: number, scale: number) => {
-		let change = false;
-		this.map((layout) => {
-			if (layout.id === id) {
-				layout.scale = scale;
-				change = true;	
-			}
-			return change;
-		})
-		if (change) {
-			this.emit("scaleChange", this);
-		}
-	}
 };
 
 export { Layout, ILayout, LayoutDirection };

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -6,7 +6,7 @@ import { Entry } from "../Entry/Entry";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
-import { RootContainer } from "@Component/Container/RootContainer";
+import { Container } from "@Component/Container/Container";
 import { LayoutDirection } from "@Model/Layout";
 import "./SimulatorWeb.scss";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
@@ -55,36 +55,6 @@ class SimulatorWeb extends Component {
         (window as any).s = this;
     }
 
-    public componentDidMount() {
-        this.setting.layout.setData({
-            items: [
-                {
-                    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
-        })
-    }
-
     public render(): ReactNode {
         return <SettingProvider value={this.setting}>
             <StatusProvider value={this.status}>
@@ -104,7 +74,33 @@ class SimulatorWeb extends Component {
                 height: `calc( 100% - ${45}px)`
             }}>
                 <CommandBar width={45}/>
-                <RootContainer />
+                <Container items={[
+                        {
+                            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>
     }