{
panles.map((panelId: string) => {
- return
+
+ const classList: string[] = ["app-tab-header-item"];
+ if (panelId === this.props.focusId) classList.push("active");
+ if (panelId === showPanelId) classList.push("tab");
+
+ return
this.props.onFocusTab ? this.props.onFocusTab(panelId) : undefined}
+ >
-
{panelId}
+
{panelId}
})
}
: null
}
- {getPanelById(panles[0])}
+
this.props.onFocusTab ? this.props.onFocusTab(showPanelId) : undefined}
+ className={"app-panel" + (hasActivePanel ? " active" : "")}
+ draggable={false}
+ >
+ {getPanelById(showPanelId)}
+
}
- private renderContainer(
- props: IContainerProps,
- selfScale: number = 50,
+ /**
+ * 处理鼠标移动数据
+ */
+ private handelMouseMove = (e: MouseEvent
) => {
+
+ 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);
+ }
+ }
+
+ /**
+ * 处理鼠标按下事件
+ * 记录鼠标数据
+ */
+ private handelMouseDown = (props: ILayout, e: MouseEvent) => {
+ 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;
+ }
+
+ /**
+ * 递归渲染全部容器
+ */
+ private renderContainer (
+ props: IContainerProps, selfScale: number = 50,
selfLayout: LayoutDirection = LayoutDirection.Y
) {
@@ -70,6 +152,7 @@ class Container extends Component {
const isRoot: boolean = !!props.isRoot;
const classList: string[] = [];
const theme: Themes = this.props.theme ?? Themes.dark;
+ const focusPanel: string | undefined = props.focusPanel;
classList.push(theme === Themes.light ? "light" : "dark");
classList.push(`background-${BackgroundLevel.Level4}`);
@@ -86,69 +169,30 @@ class Container extends Component {
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}
+ onMouseMove={isRoot ? this.handelMouseMove : 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}
- {items && items[1] ?
-
{
- const targetNode = e.target;
- if (targetNode instanceof HTMLDivElement) {
- let root = targetNode.parentNode?.parentNode;
- let firstDiv = targetNode.parentNode?.parentNode?.childNodes[0];
+ {/* 渲染 Panel */}
+ {panles.length > 0 && !items ? this.renderPanel(panles, showBar, focusPanel) : null}
- 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 }}
- >
-
-
+
this.focusEdgeId = undefined }
+ />
+
: null
+ }
+
+ {/* 渲染第二部分 */}
{items && items[1] ? this.renderContainer(items[1], 100 - scale, layout) : null}