MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add panel drag resize ctrl

Browse Source
This commit is contained in:
MrKBear
2022-03-01 14:16:14 +08:00
parent 1238bb71bd
commit 38b7f1850e
6 changed files with 246 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/Component/Container/Container.scss
+22 -3
View File
@@ -7,7 +7,6 @@ div.app-container {
height: 100%;
display: flex;
overflow: hidden;
justify-content: center;
box-sizing: border-box;
div.drag-bar {
@@ -22,13 +21,20 @@ div.app-container {
z-index: 10;
width: 100%;
height: 100%;
border: 4.5px solid rgba($color: #000000, $alpha: 0);
border: 2px 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;
flex-shrink: 0;
min-height: $container-header-tab-bar-height;
flex-shrink: 1;
width: 100%;
display: flex;
user-select: none;
@@ -66,6 +72,10 @@ 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;
}
}
@@ -94,6 +104,15 @@ 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
+96 -15
View File
@@ -1,4 +1,5 @@
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";
@@ -6,29 +7,50 @@ 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 className="app-panel">{id}</Theme>
return <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 ?
<Theme
className="app-tab-header"
backgroundLevel={BackgroundLevel.Level3}
fontLevel={FontLevel.Level3}
>{
<div className={classList.join(" ")} >{
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
}</div> : null
}
{getPanelById(panles[0])}
</>
@@ -46,16 +68,56 @@ 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;
return <Theme
className={"app-container" + (panles.length > 0 && !items ? " end-containe" : "")}
backgroundLevel={BackgroundLevel.Level4}
fontLevel={FontLevel.normal}
classList.push(theme === Themes.light ? "light" : "dark");
classList.push(`background-${BackgroundLevel.Level4}`);
classList.push(`font-${FontLevel.normal}`);
classList.push("app-container");
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}
@@ -63,13 +125,32 @@ class Container extends Component<IContainerProps> {
width: layout === LayoutDirection.Y ? "100%" : 0,
height: layout === LayoutDirection.X ? "100%" : 0
}}>
<div style={{
cursor: layout === LayoutDirection.Y ? "n-resize" : "e-resize"
}}>
<div
style={{ 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}
</Theme>
</div>
}
public render(): ReactNode {
source/Component/Container/RootContainer.tsx
+43
View File
@@ -0,0 +1,43 @@
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 }