Merge pull request projectstorm#41 from projectstorm/improvements/res…

…izing

Added r_overConstrained

.changeset/mean-fans-provide.md

@@ -0,0 +1,6 @@
+---
+'@projectstorm/react-workspaces-behavior-divider-dropzone': minor
+'@projectstorm/react-workspaces-core': minor
+---
+
+added r_overConstrained and fixed spelling mistake for internal r_dimensions field

demo/stories/helpers/complexModel.ts

@@ -7,6 +7,17 @@ import { WorkspaceEngine } from '@projectstorm/react-workspaces-core';
 
 export const createComplexModel = (engine: WorkspaceEngine) => {
   let model = new RootWorkspaceModel(engine);
+  model.registerListener({
+    overConstrainedChanged: () => {
+      console.log(`overconstrained: ${model.r_overConstrained ? 'true' : 'false'}`);
+
+      // when we overconstrained, we can use the directive below to cause the children layouts on the root model
+      // to be recomputed (this method exists on all ExpandNodeModels )
+      if (model.r_overConstrained) {
+        model.recomputeInitialSizes();
+      }
+    }
+  });
   model.setHorizontal(true);
 
   const trayFactory = engine.getFactory<WorkspaceTrayFactory>(WorkspaceTrayModel.NAME);

packages/behavior-divider-dropzone/src/DropzoneDividersLayer.tsx

@@ -41,7 +41,7 @@ export const DropzoneDividersLayerWidget: React.FC<DropzoneDividersLayerWidgetPr
         .flatten()
         .filter((p) => p instanceof WorkspaceNodeModel)
         .flatMap((m: WorkspaceNodeModel) => {
-          return m.r_divisons.map((division, index) => {
+          return m.r_divisions.map((division, index) => {
             return (
               <DropzoneDividerWidget
                 theme={props.theme?.()}

packages/core/src/core/WorkspaceEngine.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import { WorkspaceModelFactory } from './WorkspaceModelFactory';
 import { WorkspaceModel } from '../core-models/WorkspaceModel';
 import { WorkspaceEngineInterface } from './WorkspaceEngineInterface';
@@ -61,7 +62,7 @@ export class WorkspaceEngine extends BaseObserver<WorkspaceEngineListener> imple
         this.invalidateLayout();
       },
       dimensionsInvalidated: () => {
-        this.invalidateDimensions();
+        this.invalidateDimensionsDebounced();
       }
     });
     this.rootModel = model;
@@ -77,6 +78,10 @@ export class WorkspaceEngine extends BaseObserver<WorkspaceEngineListener> imple
     this.iterateListeners((cb) => cb.layoutInvalidated?.());
   }
 
+  invalidateDimensionsDebounced = _.debounce(() => {
+    this.invalidateDimensions();
+  }, 200);
+
   invalidateDimensions() {
     this.rootModel
       .flatten()

packages/core/src/core/dimensions/DimensionContainer.ts

@@ -39,9 +39,9 @@ export class DimensionContainer extends BaseObserver<DimensionContainerListener>
     });
   }
 
-  protected fireUpdated = _.debounce(() => {
+  protected fireUpdated = () => {
     this.iterateListeners((cb) => cb.updated?.());
-  }, 0);
+  };
 
   get dimensions(): IDimension {
     return {

packages/core/src/core/dimensions/Size.ts

@@ -1,7 +1,7 @@
 import { BaseListener, BaseObserver } from '../BaseObserver';
 
 export interface SizeListener extends BaseListener {
-  updated: () => any;
+  updated: (event: { prev: ISize }) => any;
 }
 
 export interface ISize {
@@ -53,6 +53,10 @@ export class Size extends BaseObserver<SizeListener> implements ISize {
 
   update(size: Partial<ISize>) {
     let updated = false;
+    let old: ISize = {
+      width: this._width,
+      height: this._height
+    };
     if (size.width != null && size.width !== this.width) {
       this._width = size.width;
       updated = true;
@@ -62,7 +66,11 @@ export class Size extends BaseObserver<SizeListener> implements ISize {
       updated = true;
     }
     if (updated) {
-      this.iterateListeners((cb) => cb.updated?.());
+      this.iterateListeners((cb) =>
+        cb.updated?.({
+          prev: old
+        })
+      );
     }
   }
 }

packages/core/src/entities/node/ExpandNodeModel.ts

@@ -13,6 +13,10 @@ export interface ExpandNodeModelSerialized extends WorkspaceNodeModelSerialized
 /**
  * This is a smarter version of the standard Node model which can work with
  * panels that expand, and treats them like standard panels, allowing them to resize
+ *
+ * The magic happens in the getPanelDirective() method, which tells child to behave slightly differently.
+ * This means for example, we can cause the last panel in a set to expand, even if none of the children actually
+ * want to expand (expandHorizontal/Vertical == false)
  */
 export class ExpandNodeModel<
   S extends ExpandNodeModelSerialized = ExpandNodeModelSerialized
@@ -104,11 +108,11 @@ export class ExpandNodeModel<
 
   getResizeDivisions(): ResizeDivision[] {
     let divs: ResizeDivision[] = [];
-    for (let i = 1; i < this.r_divisons.length - 1; i++) {
+    for (let i = 1; i < this.r_divisions.length - 1; i++) {
       divs.push({
         before: this.children[i - 1],
         after: this.children[i],
-        dimensions: this.r_divisons[i],
+        dimensions: this.r_divisions[i],
         vertical: !this.vertical
       });
     }

packages/core/src/entities/node/WorkspaceNodeModel.ts

@@ -18,6 +18,7 @@ export interface ResizeDivision {
 
 export interface WorkspaceNodeModelListener extends WorkspaceCollectionModelListener {
   divisionsRecomputed: () => any;
+  overConstrainedChanged: () => any;
 }
 
 export interface WorkspaceNodeModelSerialized extends SerializedCollectionModel {
@@ -31,12 +32,24 @@ export class WorkspaceNodeModel<
   static NAME = 'srw-node';
 
   vertical: boolean;
-  r_divisons: DimensionContainer[];
+  r_divisions: DimensionContainer[];
+  r_overConstrained: boolean;
 
   constructor(type: string = WorkspaceNodeModel.NAME) {
     super(type);
     this.vertical = true;
-    this.r_divisons = [];
+    this.r_divisions = [];
+    this.r_overConstrained = false;
+  }
+
+  // !----------- additional renders ---------
+
+  setOverConstrained(overConstrainedChanged: boolean) {
+    if (this.r_overConstrained === overConstrainedChanged) {
+      return;
+    }
+    this.r_overConstrained = overConstrainedChanged;
+    this.iterateListeners((cb) => cb.overConstrainedChanged?.());
   }
 
   // !----------- serialize ---------
@@ -57,7 +70,7 @@ export class WorkspaceNodeModel<
 
   getResizeDivisions(): ResizeDivision[] {
     let divs: ResizeDivision[] = [];
-    for (let i = 1; i < this.r_divisons.length - 1; i++) {
+    for (let i = 1; i < this.r_divisions.length - 1; i++) {
       if (this.vertical) {
         if (this.children[i - 1].expandVertical && this.children[i].expandVertical) {
           continue;
@@ -71,7 +84,7 @@ export class WorkspaceNodeModel<
       divs.push({
         before: this.children[i - 1],
         after: this.children[i],
-        dimensions: this.r_divisons[i],
+        dimensions: this.r_divisions[i],
         vertical: !this.vertical
       });
     }
@@ -86,11 +99,11 @@ export class WorkspaceNodeModel<
   }
 
   getAllRenderDimensions(): DimensionContainer[] {
-    return super.getAllRenderDimensions().concat(Array.from(this.r_divisons.values()));
+    return super.getAllRenderDimensions().concat(Array.from(this.r_divisions.values()));
   }
 
   recomputeDivisions() {
-    this.r_divisons = this.children
+    this.r_divisions = this.children
       .map((c) => {
         return new DimensionContainer();
       })

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

@@ -8,6 +8,7 @@ import { WorkspaceModel } from '../../core-models/WorkspaceModel';
 import { useModelElement } from '../../widgets/hooks/useModelElement';
 import { DirectionalLayoutWidget } from '../../widgets/layouts/DirectionalLayoutWidget';
 import { DimensionContainer } from '../../core/dimensions/DimensionContainer';
+import { useEffect } from 'react';
 
 export interface WorkspaceNodeWidgetProps {
   engine: WorkspaceEngine;
@@ -22,11 +23,22 @@ export const WorkspaceNodeWidget: React.FC<WorkspaceNodeWidgetProps> = (props) =
     engine: props.engine,
     model: props.model
   });
+  useEffect(() => {
+    return props.model.r_dimensions.registerListener({
+      updated: () => {
+        if (props.model.vertical) {
+          props.model.setOverConstrained(ref.current.scrollHeight > props.model.r_dimensions.size.height);
+        } else {
+          props.model.setOverConstrained(ref.current.scrollWidth > props.model.r_dimensions.size.width);
+        }
+      }
+    });
+  }, []);
   return (
     <S.DirectionalLayout
       forwardRef={ref}
       dimensionContainerForDivider={(index: number) => {
-        return props.model.r_divisons[index];
+        return props.model.r_divisions[index];
       }}
       getChildSizeDirective={(model) => {
         return props.model.getPanelDirective(model);

packages/core/src/widgets/layers/debug/DebugLayer.tsx

@@ -110,7 +110,7 @@ export const DebugLayerWidget: React.FC<DebugLayerWidgetProps> = (props) => {
         ? props.model
             .flatten()
             .filter((p) => p instanceof WorkspaceNodeModel)
-            .flatMap((m: WorkspaceNodeModel) => m.r_divisons)
+            .flatMap((m: WorkspaceNodeModel) => m.r_divisions)
             .map((m) => {
               return <S.Outline dimension={m} key={m.id} />;
             })