From bd21e98fc63b4bf49061446b66a73b112f00a667 Mon Sep 17 00:00:00 2001 From: Dylan Vorster Date: Mon, 30 Sep 2024 22:17:39 -0600 Subject: [PATCH] No longer need layout directives --- demo/stories/helpers/tools.tsx | 11 ++++++--- .../src/ResizeDividerWidget.tsx | 24 ++++++++++--------- .../core/src/entities/node/ExpandNodeModel.ts | 20 ++++------------ .../src/entities/node/WorkspaceNodeModel.ts | 8 ++----- .../src/entities/node/WorkspaceNodeWidget.tsx | 4 ++-- .../layouts/DirectionalChildWidget.tsx | 9 ++----- .../layouts/DirectionalLayoutWidget.tsx | 10 ++++---- 7 files changed, 36 insertions(+), 50 deletions(-) diff --git a/demo/stories/helpers/tools.tsx b/demo/stories/helpers/tools.tsx index d7776f4..03ae80f 100644 --- a/demo/stories/helpers/tools.tsx +++ b/demo/stories/helpers/tools.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import * as _ from 'lodash'; import { useEffect, useState } from 'react'; +import * as _ from 'lodash'; import styled from '@emotion/styled'; import 'typeface-open-sans'; import { @@ -31,11 +31,16 @@ import { ConvertToTrayZone, getDirectiveForTrayModel } from '@projectstorm/react import { css, Global } from '@storybook/theming'; export const genVerticalNode = () => { + const m2 = new DefaultWorkspacePanelModel('Panel 2'); + m2.minimumSize.update({ + width: 10, + height: 100 + }); const node = new ExpandNodeModel() .setExpand(false, true) .setVertical(true) - .addModel(new DefaultWorkspacePanelModel('Panel 1')) - .addModel(new DefaultWorkspacePanelModel('Panel 2')); + .addModel(new DefaultWorkspacePanelModel('Panel 1').setExpand(false, false)) + .addModel(m2); return node; }; diff --git a/packages/behavior-resize/src/ResizeDividerWidget.tsx b/packages/behavior-resize/src/ResizeDividerWidget.tsx index 08efdaa..53ef17c 100644 --- a/packages/behavior-resize/src/ResizeDividerWidget.tsx +++ b/packages/behavior-resize/src/ResizeDividerWidget.tsx @@ -20,9 +20,9 @@ export interface ResizeDividerWidgetProps { } const isAligned = (divider: ResizeDivision, aligned: Alignment, parent: WorkspaceNodeModel) => { - let beforeDirective = parent.getPanelDirective(divider.before); - const afterDirective = parent.getPanelDirective(divider.after); - if (beforeDirective.expand !== afterDirective.expand) { + let beforeDirective = parent.shouldChildExpand(divider.before); + const afterDirective = parent.shouldChildExpand(divider.after); + if (beforeDirective !== afterDirective) { return false; } let before = divider.before; @@ -31,8 +31,8 @@ const isAligned = (divider: ResizeDivision, aligned: Alignment, parent: Workspac if (!before) { return true; } - let beforeDirective = parent.getPanelDirective(before); - if (beforeDirective.expand) { + let beforeDirective = parent.shouldChildExpand(before); + if (beforeDirective) { return false; } } while (before); @@ -66,10 +66,6 @@ const getResizeStrategy = ( ): Pick => { let sizeSnapshot = new Map(); - const isExpand = (model: WorkspaceModel) => { - return parent.getPanelDirective(model).expand; - }; - const setSize = (model: WorkspaceModel, val: number) => { if (divider.vertical) { model.setWidth(val); @@ -96,12 +92,18 @@ const getResizeStrategy = ( let { before, after } = divider; // shrink|expand OR left aligned - if ((!isExpand(before) && isExpand(after)) || isAligned(divider, alignment, parent)) { + if ( + (!parent.shouldChildExpand(before) && parent.shouldChildExpand(after)) || + isAligned(divider, alignment, parent) + ) { before = getAvailableElement(before, alignment); setSize(before, sizeSnapshot.get(before) + distance); } // expand|shrink OR right aligned - if ((isExpand(before) && !isExpand(after)) || !isAligned(divider, alignment, parent)) { + if ( + (parent.shouldChildExpand(before) && !parent.shouldChildExpand(after)) || + !isAligned(divider, alignment, parent) + ) { after = getAvailableElement(after, getAlignmentInverted(alignment)); setSize(after, sizeSnapshot.get(after) - distance); } diff --git a/packages/core/src/entities/node/ExpandNodeModel.ts b/packages/core/src/entities/node/ExpandNodeModel.ts index a50898e..3ed96e6 100644 --- a/packages/core/src/entities/node/ExpandNodeModel.ts +++ b/packages/core/src/entities/node/ExpandNodeModel.ts @@ -1,14 +1,8 @@ -import { DirectionLayoutChildDirective } from '../../widgets/layouts/DirectionalChildWidget'; import { ResizeDivision, WorkspaceNodeModel, WorkspaceNodeModelSerialized } from './WorkspaceNodeModel'; import { WorkspaceModel } from '../../core-models/WorkspaceModel'; import * as _ from 'lodash'; import { WorkspaceEngine } from '../../core/WorkspaceEngine'; -export interface ExpandNodeModelChild { - originalWidth: number; - originalHeight: number; -} - export interface ExpandNodeModelSerialized extends WorkspaceNodeModelSerialized {} /** @@ -99,25 +93,19 @@ export class ExpandNodeModel< }); } - getPanelDirective(child: WorkspaceModel): DirectionLayoutChildDirective { + shouldChildExpand(child: WorkspaceModel): boolean { const expandNodes = this.getExpandNodes(); //no expand nodes, so treat the last one as the expand node if (expandNodes.length === 0 && this.children.indexOf(child) === this.children.length - 1) { - return { - ...super.getPanelDirective(child), - expand: true - }; + return true; } // only expand the last one if there are multiple if (expandNodes.length > 1) { - return { - ...super.getPanelDirective(child), - expand: expandNodes.indexOf(child) === expandNodes.length - 1 - }; + return expandNodes.indexOf(child) === expandNodes.length - 1; } - return super.getPanelDirective(child); + return super.shouldChildExpand(child); } } diff --git a/packages/core/src/entities/node/WorkspaceNodeModel.ts b/packages/core/src/entities/node/WorkspaceNodeModel.ts index 41441a8..9206db7 100644 --- a/packages/core/src/entities/node/WorkspaceNodeModel.ts +++ b/packages/core/src/entities/node/WorkspaceNodeModel.ts @@ -7,7 +7,6 @@ import { WorkspaceEngine } from '../../core/WorkspaceEngine'; import { WorkspaceModel } from '../../core-models/WorkspaceModel'; import { Alignment } from '../../core/tools'; import { DimensionContainer } from '../../core/dimensions/DimensionContainer'; -import { DirectionLayoutChildDirective } from '../../widgets/layouts/DirectionalChildWidget'; import { ResizeDimensionContainer } from './ResizeDimensionContainer'; export interface ResizeDivision { @@ -101,11 +100,8 @@ export class WorkspaceNodeModel< return divs; } - getPanelDirective(child: WorkspaceModel): DirectionLayoutChildDirective { - return { - expand: this.vertical ? child.expandVertical : child.expandHorizontal, - size: this.vertical ? child.size.height : child.size.width - }; + shouldChildExpand(child: WorkspaceModel): boolean { + return this.vertical ? child.expandVertical : child.expandHorizontal; } getAllRenderDimensions(): DimensionContainer[] { diff --git a/packages/core/src/entities/node/WorkspaceNodeWidget.tsx b/packages/core/src/entities/node/WorkspaceNodeWidget.tsx index a66a36a..6ac3114 100644 --- a/packages/core/src/entities/node/WorkspaceNodeWidget.tsx +++ b/packages/core/src/entities/node/WorkspaceNodeWidget.tsx @@ -40,8 +40,8 @@ export const WorkspaceNodeWidget: React.FC = (props) = dimensionContainerForDivider={(index: number) => { return props.model.r_divisions[index]; }} - getChildSizeDirective={(model) => { - return props.model.getPanelDirective(model); + shouldModelExpand={(model) => { + return props.model.shouldChildExpand(model); }} className={props.className} data={props.model.children} diff --git a/packages/core/src/widgets/layouts/DirectionalChildWidget.tsx b/packages/core/src/widgets/layouts/DirectionalChildWidget.tsx index 1718ca5..1611954 100644 --- a/packages/core/src/widgets/layouts/DirectionalChildWidget.tsx +++ b/packages/core/src/widgets/layouts/DirectionalChildWidget.tsx @@ -4,11 +4,6 @@ import { WorkspaceModel } from '../../core-models/WorkspaceModel'; import styled from '@emotion/styled'; import { useForceUpdate } from '../../widgets/hooks/useForceUpdate'; -export interface DirectionLayoutChildDirective { - expand: boolean; - size: number; -} - namespace S { export const ChildContainer = styled.div<{ width: number; height: number; expand: boolean }>` ${(p) => (p.width ? `min-width: ${p.width}px; width: ${p.width}px` : '')}; @@ -21,14 +16,14 @@ namespace S { export interface DirectionChildWidgetProps { vertical: boolean; model: WorkspaceModel; - directive: DirectionLayoutChildDirective; + expand: boolean; generateElement: (model: WorkspaceModel) => JSX.Element; } export const DirectionChildWidget: React.FC = (props) => { let width = null; let height = null; - let expand = props.directive.expand; + let expand = props.expand; if (!expand && props.vertical) { height = props.model.size.height; diff --git a/packages/core/src/widgets/layouts/DirectionalLayoutWidget.tsx b/packages/core/src/widgets/layouts/DirectionalLayoutWidget.tsx index 57dd170..1eb2045 100644 --- a/packages/core/src/widgets/layouts/DirectionalLayoutWidget.tsx +++ b/packages/core/src/widgets/layouts/DirectionalLayoutWidget.tsx @@ -5,16 +5,16 @@ import { WorkspaceModel } from '../../core-models/WorkspaceModel'; import { WorkspaceEngine } from '../../core/WorkspaceEngine'; import styled from '@emotion/styled'; import { DividerWidget } from '../../widgets/primitives/DividerWidget'; -import { DirectionChildWidget, DirectionLayoutChildDirective } from './DirectionalChildWidget'; +import { DirectionChildWidget } from './DirectionalChildWidget'; import { ResizeDimensionContainer } from '../../entities/node/ResizeDimensionContainer'; export interface DirectionalLayoutWidgetProps { vertical: boolean; engine: WorkspaceEngine; data: WorkspaceModel[]; - getChildSizeDirective: (model: WorkspaceModel) => DirectionLayoutChildDirective; - generateElement: (model: WorkspaceModel) => JSX.Element; - generateDivider: (divider: ResizeDimensionContainer) => JSX.Element; + shouldModelExpand: (model: WorkspaceModel) => boolean; + generateElement: (model: WorkspaceModel) => React.JSX.Element; + generateDivider: (divider: ResizeDimensionContainer) => React.JSX.Element; dimensionContainerForDivider: (index: number) => ResizeDimensionContainer; forwardRef: React.RefObject; className?: any; @@ -51,7 +51,7 @@ export const DirectionalLayoutWidget: React.FC = ( const dimension = props.dimensionContainerForDivider(index + 1); return ( - + {generateDivider(dimension)} );