Merge pull request #62 from projectstorm/simplify_layout_directives

Simplify layout directives

Author: dylanvorster

.changeset/forty-mails-act.md

@@ -0,0 +1,5 @@
+---
+'@projectstorm/react-workspaces-core': patch
+---
+
+Improved node normalization by updating the size of the child to the parent before completely removing the parent

.changeset/rich-carrots-taste.md

@@ -0,0 +1,5 @@
+---
+'@projectstorm/react-workspaces-core': major
+---
+
+Layout directives have been removed in favor of simple expand booleans

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,12 +31,18 @@ import { ConvertToTrayZone, getDirectiveForTrayModel } from '@projectstorm/react
 import { css, Global } from '@storybook/theming';
 
 export const genVerticalNode = () => {
-  const node = new ExpandNodeModel()
-    .setExpand(false, true)
-    .setVertical(true)
-    .addModel(new DefaultWorkspacePanelModel('Panel 1'))
-    .addModel(new DefaultWorkspacePanelModel('Panel 2'));
-  return node;
+  const m1 = new DefaultWorkspacePanelModel('Panel 1');
+  m1.minimumSize.update({
+    width: 10,
+    height: 100
+  });
+
+  const m2 = new DefaultWorkspacePanelModel('Panel 2');
+  m2.minimumSize.update({
+    width: 10,
+    height: 100
+  });
+  return new ExpandNodeModel().setExpand(false, true).setVertical(true).addModel(m1).addModel(m2);
 };
 
 export enum DebugOptions {

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<UseMouseDragDistanceProps, 'startMove' | 'moved'> => {
   let sizeSnapshot = new Map<WorkspaceModel, number>();
 
-  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);
       }

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);
   }
 }

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 {
@@ -47,6 +46,7 @@ export class WorkspaceNodeModel<
     super.normalize();
     if (this.parent && this.parent instanceof WorkspaceCollectionModel) {
       if (this.children.length === 1) {
+        this.children[0].size.update(this.size.value);
         this.parent.replaceModel(this, this.children[0]);
       }
     }
@@ -101,11 +101,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[] {

packages/core/src/entities/node/WorkspaceNodeWidget.tsx

@@ -40,8 +40,8 @@ export const WorkspaceNodeWidget: React.FC<WorkspaceNodeWidgetProps> = (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}

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<DirectionChildWidgetProps> = (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;

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<HTMLDivElement>;
   className?: any;
@@ -51,7 +51,7 @@ export const DirectionalLayoutWidget: React.FC<DirectionalLayoutWidgetProps> = (
         const dimension = props.dimensionContainerForDivider(index + 1);
         return (
           <React.Fragment key={model.id}>
-            <DirectionChildWidget {...props} directive={props.getChildSizeDirective(model)} model={model} />
+            <DirectionChildWidget {...props} expand={props.shouldModelExpand(model)} model={model} />
             <React.Fragment key={dimension.id}>{generateDivider(dimension)}</React.Fragment>
           </React.Fragment>
         );