From 1238bb71bddcc6c21300e8b4452fbe2f1502da6c Mon Sep 17 00:00:00 2001 From: MrKBear Date: Mon, 28 Feb 2022 19:54:44 +0800 Subject: [PATCH] Add layout model --- source/Component/Container/Container.scss | 21 ++++++++++---- source/Component/Container/Container.tsx | 35 ++++++++++++----------- source/Model/Layout.ts | 21 ++++++++++++++ source/Page/SimulatorWeb/SimulatorWeb.tsx | 21 +++++++------- 4 files changed, 66 insertions(+), 32 deletions(-) create mode 100644 source/Model/Layout.ts diff --git a/source/Component/Container/Container.scss b/source/Component/Container/Container.scss index fc13215..a21aeab 100644 --- a/source/Component/Container/Container.scss +++ b/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); } diff --git a/source/Component/Container/Container.tsx b/source/Component/Container/Container.tsx index ee4fa91..cc9ee54 100644 --- a/source/Component/Container/Container.tsx +++ b/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 { - X = 1, - Y = 2 -} - -interface IContainerProps { - items?: [IContainerProps, IContainerProps]; +interface IContainerProps extends ILayout { showBar?: boolean; - panles?: string[]; - layout?: ContaineLayout; - scale?: number; isRoot?: boolean; } @@ -45,13 +37,13 @@ class Container extends Component { 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 { backgroundLevel={BackgroundLevel.Level4} fontLevel={FontLevel.normal} style={{ - flexDirection: layout === ContaineLayout.Y ? "column" : undefined, - width: isRoot ? "100%" : selfLayout === ContaineLayout.X ? `${selfScale}%` : undefined, - height: isRoot ? "100%" : selfLayout === ContaineLayout.Y ? `${selfScale}%` : undefined + 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] ?
+
+
+
: null} {items && items[1] ? this.renderContainer(items[1], 100 - scale, layout) : null} } @@ -76,4 +77,4 @@ class Container extends Component { } } -export { Container, ContaineLayout }; \ No newline at end of file +export { Container }; \ No newline at end of file diff --git a/source/Model/Layout.ts b/source/Model/Layout.ts new file mode 100644 index 0000000..5d6b224 --- /dev/null +++ b/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 }; \ No newline at end of file diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index 53700c8..8fef91d 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/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 {