From 646de60fc314198b97172c62f414ffb9576ffb98 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 3 Feb 2020 11:33:24 -0500
Subject: fixed timeline bug.  made multirow/multicol use same fields.

---
 .../collectionMulticolumn/MulticolumnResizer.tsx     | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx')

diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index 11e210958..46c39d817 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { observable, action } from "mobx";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, StrCast } from "../../../../new_fields/Types";
-import { WidthUnit } from "./CollectionMulticolumnView";
+import { DimUnit } from "./CollectionMulticolumnView";
 
 interface ResizerProps {
     width: number;
@@ -46,14 +46,14 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         const unitLength = columnUnitLength();
         if (unitLength) {
             if (toNarrow) {
-                const { widthUnit, widthMagnitude } = toNarrow;
-                const scale = widthUnit === WidthUnit.Ratio ? unitLength : 1;
-                toNarrow.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / scale;
+                const { dimUnit, dimMagnitude } = toNarrow;
+                const scale = dimUnit === DimUnit.Ratio ? unitLength : 1;
+                toNarrow.dimMagnitude = NumCast(dimMagnitude) - Math.abs(movementX) / scale;
             }
             if (this.resizeMode === ResizeMode.Pinned && toWiden) {
-                const { widthUnit, widthMagnitude } = toWiden;
-                const scale = widthUnit === WidthUnit.Ratio ? unitLength : 1;
-                toWiden.widthMagnitude = NumCast(widthMagnitude) + Math.abs(movementX) / scale;
+                const { dimUnit, dimMagnitude } = toWiden;
+                const scale = dimUnit === DimUnit.Ratio ? unitLength : 1;
+                toWiden.dimMagnitude = NumCast(dimMagnitude) + Math.abs(movementX) / scale;
             }
         }
     }
@@ -61,17 +61,17 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     private get isActivated() {
         const { toLeft, toRight } = this.props;
         if (toLeft && toRight) {
-            if (StrCast(toLeft.widthUnit) === WidthUnit.Pixel && StrCast(toRight.widthUnit) === WidthUnit.Pixel) {
+            if (StrCast(toLeft.dimUnit) === DimUnit.Pixel && StrCast(toRight.dimUnit) === DimUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toLeft) {
-            if (StrCast(toLeft.widthUnit) === WidthUnit.Pixel) {
+            if (StrCast(toLeft.dimUnit) === DimUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toRight) {
-            if (StrCast(toRight.widthUnit) === WidthUnit.Pixel) {
+            if (StrCast(toRight.dimUnit) === DimUnit.Pixel) {
                 return false;
             }
             return true;
-- 
cgit v1.2.3-70-g09d2


From 471dce0623a751aed34f1cf69e022049a45e56bd Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 4 Feb 2020 11:37:06 -0500
Subject: added defaults for mulitirow/col

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 15 ++++-----
 .../CollectionMulticolumnView.tsx                  | 36 +++++++++++-----------
 .../CollectionMultirowView.tsx                     | 16 +++++-----
 .../collectionMulticolumn/MulticolumnResizer.tsx   | 16 +++++-----
 .../collectionMulticolumn/MultirowResizer.tsx      | 16 +++++-----
 5 files changed, 48 insertions(+), 51 deletions(-)

(limited to 'src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6453cfe17..63544a637 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -824,13 +824,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
     get doLayoutComputation() {
         const { newPool, computedElementData } = this.doInternalLayoutComputation;
-        Array.from(newPool.keys()).map(key => {
-            const lastPos = this._cachedPool.get(key); // last computed pos
-            const newPos = newPool.get(key);
-            if (!lastPos || newPos.x !== lastPos.x || newPos.y !== lastPos.y || newPos.z !== lastPos.z || newPos.zIndex !== lastPos.zIndex || newPos.width !== lastPos.width || newPos.height !== lastPos.height) {
-                runInAction(() => this._layoutPoolData.set(key, { transition: "transform 1s", ...newPos }));
-            }
-        });
+        runInAction(() =>
+            Array.from(newPool.keys()).map(key => {
+                const lastPos = this._cachedPool.get(key); // last computed pos
+                const newPos = newPool.get(key);
+                if (!lastPos || newPos.x !== lastPos.x || newPos.y !== lastPos.y || newPos.z !== lastPos.z || newPos.zIndex !== lastPos.zIndex || newPos.width !== lastPos.width || newPos.height !== lastPos.height) {
+                    this._layoutPoolData.set(key, newPos);
+                }
+            }));
         this._cachedPool.clear();
         Array.from(newPool.keys()).forEach(k => this._cachedPool.set(k, newPool.get(k)));
         this.childLayoutPairs.filter((pair, i) => this.isCurrent(pair.layout)).forEach(pair =>
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 65862f34f..cbe064ec0 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -1,19 +1,19 @@
+import { action, computed } from 'mobx';
 import { observer } from 'mobx-react';
-import { makeInterface } from '../../../../new_fields/Schema';
-import { documentSchema } from '../../../../new_fields/documentSchemas';
-import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView';
 import * as React from "react";
 import { Doc } from '../../../../new_fields/Doc';
-import { NumCast, StrCast, BoolCast, ScriptCast } from '../../../../new_fields/Types';
-import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { documentSchema } from '../../../../new_fields/documentSchemas';
+import { makeInterface } from '../../../../new_fields/Schema';
+import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../new_fields/Types';
 import { Utils } from '../../../../Utils';
-import "./collectionMulticolumnView.scss";
-import { computed, trace, observable, action } from 'mobx';
+import { DragManager } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
-import WidthLabel from './MulticolumnWidthLabel';
-import ResizeBar from './MulticolumnResizer';
 import { undoBatch } from '../../../util/UndoManager';
-import { DragManager } from '../../../util/DragManager';
+import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { CollectionSubView } from '../CollectionSubView';
+import "./collectionMulticolumnView.scss";
+import ResizeBar from './MulticolumnResizer';
+import WidthLabel from './MulticolumnWidthLabel';
 
 type MulticolumnDocument = makeInterface<[typeof documentSchema]>;
 const MulticolumnDocument = makeInterface(documentSchema);
@@ -45,7 +45,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
      */
     @computed
     private get ratioDefinedDocs() {
-        return this.childLayoutPairs.map(({ layout }) => layout).filter(({ dimUnit }) => StrCast(dimUnit) === DimUnit.Ratio);
+        return this.childLayoutPairs.map(pair => pair.layout).filter(layout => StrCast(layout.dimUnit, "*") === DimUnit.Ratio);
     }
 
     /**
@@ -60,9 +60,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
     private get resolvedLayoutInformation(): LayoutData {
         let starSum = 0;
         const widthSpecifiers: WidthSpecifier[] = [];
-        this.childLayoutPairs.map(({ layout: { dimUnit, dimMagnitude } }) => {
-            const unit = StrCast(dimUnit);
-            const magnitude = NumCast(dimMagnitude);
+        this.childLayoutPairs.map(pair => {
+            const unit = StrCast(pair.layout.dimUnit, "*");
+            const magnitude = NumCast(pair.layout.dimMagnitude, 1);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
                 (unit === DimUnit.Ratio) && (starSum += magnitude);
                 widthSpecifiers.push({ magnitude, unit });
@@ -82,9 +82,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         setTimeout(() => {
             const { ratioDefinedDocs } = this;
             if (this.childLayoutPairs.length) {
-                const minimum = Math.min(...ratioDefinedDocs.map(({ dimMagnitude }) => NumCast(dimMagnitude)));
+                const minimum = Math.min(...ratioDefinedDocs.map(doc => NumCast(doc.dimMagnitude, 1)));
                 if (minimum !== 0) {
-                    ratioDefinedDocs.forEach(layout => layout.dimMagnitude = NumCast(layout.dimMagnitude) / minimum);
+                    ratioDefinedDocs.forEach(layout => layout.dimMagnitude = NumCast(layout.dimMagnitude, 1) / minimum, 1);
                 }
             }
         });
@@ -160,8 +160,8 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         if (columnUnitLength === undefined) {
             return 0; // we're still waiting on promises to resolve
         }
-        let width = NumCast(layout.dimMagnitude);
-        if (StrCast(layout.dimUnit) === DimUnit.Ratio) {
+        let width = NumCast(layout.dimMagnitude, 1);
+        if (StrCast(layout.dimUnit, "*") === DimUnit.Ratio) {
             width *= columnUnitLength;
         }
         return width;
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index aa440b677..d20338bf2 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -45,7 +45,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
      */
     @computed
     private get ratioDefinedDocs() {
-        return this.childLayoutPairs.map(({ layout }) => layout).filter(({ dimUnit }) => StrCast(dimUnit) === DimUnit.Ratio);
+        return this.childLayoutPairs.map(pair => pair.layout).filter(layout => StrCast(layout.dimUnit, "*") === DimUnit.Ratio);
     }
 
     /**
@@ -60,9 +60,9 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
     private get resolvedLayoutInformation(): LayoutData {
         let starSum = 0;
         const heightSpecifiers: HeightSpecifier[] = [];
-        this.childLayoutPairs.map(({ layout: { dimUnit, dimMagnitude } }) => {
-            const unit = StrCast(dimUnit);
-            const magnitude = NumCast(dimMagnitude);
+        this.childLayoutPairs.map(pair => {
+            const unit = StrCast(pair.layout.dimUnit, "*");
+            const magnitude = NumCast(pair.layout.dimMagnitude, 1);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
                 (unit === DimUnit.Ratio) && (starSum += magnitude);
                 heightSpecifiers.push({ magnitude, unit });
@@ -82,9 +82,9 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
         setTimeout(() => {
             const { ratioDefinedDocs } = this;
             if (this.childLayoutPairs.length) {
-                const minimum = Math.min(...ratioDefinedDocs.map(({ dimMagnitude }) => NumCast(dimMagnitude)));
+                const minimum = Math.min(...ratioDefinedDocs.map(layout => NumCast(layout.dimMagnitude, 1)));
                 if (minimum !== 0) {
-                    ratioDefinedDocs.forEach(layout => layout.dimMagnitude = NumCast(layout.dimMagnitude) / minimum);
+                    ratioDefinedDocs.forEach(layout => layout.dimMagnitude = NumCast(layout.dimMagnitude, 1) / minimum);
                 }
             }
         });
@@ -160,8 +160,8 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
         if (rowUnitLength === undefined) {
             return 0; // we're still waiting on promises to resolve
         }
-        let height = NumCast(layout.dimMagnitude);
-        if (StrCast(layout.dimUnit) === DimUnit.Ratio) {
+        let height = NumCast(layout.dimMagnitude, 1);
+        if (StrCast(layout.dimUnit, "*") === DimUnit.Ratio) {
             height *= rowUnitLength;
         }
         return height;
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index 46c39d817..51fd8b820 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -46,14 +46,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         const unitLength = columnUnitLength();
         if (unitLength) {
             if (toNarrow) {
-                const { dimUnit, dimMagnitude } = toNarrow;
-                const scale = dimUnit === DimUnit.Ratio ? unitLength : 1;
-                toNarrow.dimMagnitude = NumCast(dimMagnitude) - Math.abs(movementX) / scale;
+                const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
+                toNarrow.dimMagnitude = NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementX) / scale;
             }
             if (this.resizeMode === ResizeMode.Pinned && toWiden) {
-                const { dimUnit, dimMagnitude } = toWiden;
-                const scale = dimUnit === DimUnit.Ratio ? unitLength : 1;
-                toWiden.dimMagnitude = NumCast(dimMagnitude) + Math.abs(movementX) / scale;
+                const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
+                toWiden.dimMagnitude = NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementX) / scale;
             }
         }
     }
@@ -61,17 +59,17 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     private get isActivated() {
         const { toLeft, toRight } = this.props;
         if (toLeft && toRight) {
-            if (StrCast(toLeft.dimUnit) === DimUnit.Pixel && StrCast(toRight.dimUnit) === DimUnit.Pixel) {
+            if (StrCast(toLeft.dimUnit, "*") === DimUnit.Pixel && StrCast(toRight.dimUnit, "*") === DimUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toLeft) {
-            if (StrCast(toLeft.dimUnit) === DimUnit.Pixel) {
+            if (StrCast(toLeft.dimUnit, "*") === DimUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toRight) {
-            if (StrCast(toRight.dimUnit) === DimUnit.Pixel) {
+            if (StrCast(toRight.dimUnit, "*") === DimUnit.Pixel) {
                 return false;
             }
             return true;
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
index 4f58f3fa8..4b05a0a29 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
@@ -46,14 +46,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         const unitLength = columnUnitLength();
         if (unitLength) {
             if (toNarrow) {
-                const { dimUnit, dimMagnitude } = toNarrow;
-                const scale = dimUnit === DimUnit.Ratio ? unitLength : 1;
-                toNarrow.dimMagnitude = NumCast(dimMagnitude) - Math.abs(movementY) / scale;
+                const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
+                toNarrow.dimMagnitude = NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementY) / scale;
             }
             if (this.resizeMode === ResizeMode.Pinned && toWiden) {
-                const { dimUnit, dimMagnitude } = toWiden;
-                const scale = dimUnit === DimUnit.Ratio ? unitLength : 1;
-                toWiden.dimMagnitude = NumCast(dimMagnitude) + Math.abs(movementY) / scale;
+                const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
+                toWiden.dimMagnitude = NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementY) / scale;
             }
         }
     }
@@ -61,17 +59,17 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     private get isActivated() {
         const { toTop, toBottom } = this.props;
         if (toTop && toBottom) {
-            if (StrCast(toTop.dimUnit) === DimUnit.Pixel && StrCast(toBottom.dimUnit) === DimUnit.Pixel) {
+            if (StrCast(toTop.dimUnit, "*") === DimUnit.Pixel && StrCast(toBottom.dimUnit, "*") === DimUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toTop) {
-            if (StrCast(toTop.dimUnit) === DimUnit.Pixel) {
+            if (StrCast(toTop.dimUnit, "*") === DimUnit.Pixel) {
                 return false;
             }
             return true;
         } else if (toBottom) {
-            if (StrCast(toBottom.dimUnit) === DimUnit.Pixel) {
+            if (StrCast(toBottom.dimUnit, "*") === DimUnit.Pixel) {
                 return false;
             }
             return true;
-- 
cgit v1.2.3-70-g09d2


From 23190ee16a7f54474060ea87767f5336242d03d7 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 5 Feb 2020 10:20:26 -0500
Subject: fixed multicol/row layout rendering

---
 .../CollectionMulticolumnView.scss                 |  4 +--
 .../CollectionMulticolumnView.tsx                  | 39 ++++++++++++----------
 .../CollectionMultirowView.scss                    |  4 +--
 .../CollectionMultirowView.tsx                     | 34 +++++++++++--------
 .../collectionMulticolumn/MulticolumnResizer.tsx   | 10 +++---
 .../collectionMulticolumn/MultirowResizer.tsx      | 10 +++---
 6 files changed, 56 insertions(+), 45 deletions(-)

(limited to 'src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx')

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
index a5d5617bc..0c74b8ddb 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
@@ -18,13 +18,13 @@
 
     }
 
-    .resizer {
+    .multiColumnResizer {
         cursor: ew-resize;
         transition: 0.5s opacity ease;
         display: flex;
         flex-direction: column;
 
-        .internal {
+        .multiColumnResizer-hdl {
             width: 100%;
             height: 100%;
             transition: 0.5s background-color ease;
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 56f777f43..92b908ab6 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -34,7 +34,7 @@ export const DimUnit = {
 };
 
 const resolvedUnits = Object.values(DimUnit);
-const resizerWidth = 4;
+const resizerWidth = 8;
 
 @observer
 export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) {
@@ -203,6 +203,19 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
 
     @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
+    getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
+        return <ContentFittingDocumentView
+            {...this.props}
+            Document={layout}
+            DataDocument={layout.resolvedDataDoc as Doc}
+            CollectionDoc={this.props.Document}
+            PanelWidth={width}
+            PanelHeight={height}
+            getTransform={dxf}
+            onClick={this.onChildClickHandler}
+            renderDepth={this.props.renderDepth + 1}
+        />
+    }
     /**
      * @returns the resolved list of rendered child documents, displayed
      * at their resolved pixel widths, each separated by a resizer. 
@@ -214,22 +227,14 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         const collector: JSX.Element[] = [];
         for (let i = 0; i < childLayoutPairs.length; i++) {
             const { layout } = childLayoutPairs[i];
+            const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin));
+            const width = () => this.lookupPixels(layout) - 2 * NumCast(Document._xMargin);
+            const height = () => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
             collector.push(
-                <div
-                    className={"document-wrapper"}
-                    key={Utils.GenerateGuid()}
-                >
-                    <ContentFittingDocumentView
-                        {...this.props}
-                        Document={layout}
-                        DataDocument={layout.resolvedDataDoc as Doc}
-                        CollectionDoc={this.props.Document}
-                        PanelWidth={() => this.lookupPixels(layout) - 2 * NumCast(Document._xMargin)}
-                        PanelHeight={() => PanelHeight() - 2 * NumCast(Document._yMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0)}
-                        getTransform={() => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin))}
-                        onClick={this.onChildClickHandler}
-                        renderDepth={this.props.renderDepth + 1}
-                    />
+                <div className={"document-wrapper"}
+                    key={"wrapper" + i}
+                    style={{ width: width() }} >
+                    {this.getDisplayDoc(layout, dxf, width, height)}
                     <WidthLabel
                         layout={layout}
                         collectionDoc={Document}
@@ -237,7 +242,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                 </div>,
                 <ResizeBar
                     width={resizerWidth}
-                    key={Utils.GenerateGuid()}
+                    key={"resizer" + i}
                     columnUnitLength={this.getColumnUnitLength}
                     toLeft={layout}
                     toRight={childLayoutPairs[i + 1]?.layout}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
index ed737ea59..64f607680 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
@@ -19,13 +19,13 @@
 
     }
 
-    .resizer {
+    .multiRowResizer {
         cursor: ew-resize;
         transition: 0.5s opacity ease;
         display: flex;
         flex-direction: row;
 
-        .internal {
+        .multiRowResizer-hdl {
             width: 100%;
             height: 100%;
             transition: 0.5s background-color ease;
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 8a2498458..d92ba9a9f 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -34,7 +34,7 @@ export const DimUnit = {
 };
 
 const resolvedUnits = Object.values(DimUnit);
-const resizerHeight = 10;
+const resizerHeight = 8;
 
 @observer
 export class CollectionMultirowView extends CollectionSubView(MultirowDocument) {
@@ -203,6 +203,19 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
 
     @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
 
+    getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
+        return <ContentFittingDocumentView
+            {...this.props}
+            Document={layout}
+            DataDocument={layout.resolvedDataDoc as Doc}
+            CollectionDoc={this.props.Document}
+            PanelWidth={width}
+            PanelHeight={height}
+            getTransform={dxf}
+            onClick={this.onChildClickHandler}
+            renderDepth={this.props.renderDepth + 1}
+        />
+    }
     /**
      * @returns the resolved list of rendered child documents, displayed
      * at their resolved pixel widths, each separated by a resizer. 
@@ -214,22 +227,15 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
         const collector: JSX.Element[] = [];
         for (let i = 0; i < childLayoutPairs.length; i++) {
             const { layout } = childLayoutPairs[i];
+            const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin));
+            const height = () => this.lookupPixels(layout) - 2 * NumCast(Document._yMargin);
+            const width = () => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showWidthLabels) ? 20 : 0);
             collector.push(
                 <div
                     className={"document-wrapper"}
-                    key={Utils.GenerateGuid()}
+                    key={"wrapper" + i}
                 >
-                    <ContentFittingDocumentView
-                        {...this.props}
-                        Document={layout}
-                        DataDocument={layout.resolvedDataDoc as Doc}
-                        CollectionDoc={this.props.Document}
-                        PanelHeight={() => this.lookupPixels(layout) - 2 * NumCast(Document._yMargin)}
-                        PanelWidth={() => PanelWidth() - 2 * NumCast(Document._xMargin) - (BoolCast(Document.showHeightLabels) ? 20 : 0)}
-                        getTransform={() => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin))}
-                        onClick={this.onChildClickHandler}
-                        renderDepth={this.props.renderDepth + 1}
-                    />
+                    {this.getDisplayDoc(layout, dxf, width, height)}
                     <HeightLabel
                         layout={layout}
                         collectionDoc={Document}
@@ -237,7 +243,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
                 </div>,
                 <ResizeBar
                     height={resizerHeight}
-                    key={Utils.GenerateGuid()}
+                    key={"resizer" + i}
                     columnUnitLength={this.getRowUnitLength}
                     toTop={layout}
                     toBottom={childLayoutPairs[i + 1]?.layout}
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index 51fd8b820..6b89402e6 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -47,11 +47,11 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         if (unitLength) {
             if (toNarrow) {
                 const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
-                toNarrow.dimMagnitude = NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementX) / scale;
+                toNarrow.dimMagnitude = Math.max(0.05, NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementX) / scale);
             }
             if (this.resizeMode === ResizeMode.Pinned && toWiden) {
                 const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
-                toWiden.dimMagnitude = NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementX) / scale;
+                toWiden.dimMagnitude = Math.max(0.05, NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementX) / scale);
             }
         }
     }
@@ -89,7 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     render() {
         return (
             <div
-                className={"resizer"}
+                className={"multiColumnResizer"}
                 style={{
                     width: this.props.width,
                     opacity: this.isActivated && this.isHoverActive ? resizerOpacity : 0
@@ -98,12 +98,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                 onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
             >
                 <div
-                    className={"internal"}
+                    className={"multiColumnResizer-hdl"}
                     onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)}
                     style={{ backgroundColor: this.resizeMode }}
                 />
                 <div
-                    className={"internal"}
+                    className={"multiColumnResizer-hdl"}
                     onPointerDown={e => this.registerResizing(e, ResizeMode.Global)}
                     style={{ backgroundColor: this.resizeMode }}
                 />
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
index 4b05a0a29..d00939b26 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
@@ -47,11 +47,11 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         if (unitLength) {
             if (toNarrow) {
                 const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
-                toNarrow.dimMagnitude = NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementY) / scale;
+                toNarrow.dimMagnitude = Math.max(0.05, NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementY) / scale);
             }
             if (this.resizeMode === ResizeMode.Pinned && toWiden) {
                 const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
-                toWiden.dimMagnitude = NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementY) / scale;
+                toWiden.dimMagnitude = Math.max(0.05, NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementY) / scale);
             }
         }
     }
@@ -89,7 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     render() {
         return (
             <div
-                className={"resizer"}
+                className={"multiRowResizer"}
                 style={{
                     height: this.props.height,
                     opacity: this.isActivated && this.isHoverActive ? resizerOpacity : 0
@@ -98,12 +98,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                 onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
             >
                 <div
-                    className={"internal"}
+                    className={"multiRowResizer-hdl"}
                     onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)}
                     style={{ backgroundColor: this.resizeMode }}
                 />
                 <div
-                    className={"internal"}
+                    className={"multiRowResizer-hdl"}
                     onPointerDown={e => this.registerResizing(e, ResizeMode.Global)}
                     style={{ backgroundColor: this.resizeMode }}
                 />
-- 
cgit v1.2.3-70-g09d2


From 46ee7dc4934de6bf2f7c6e49558ff8cf6485d161 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 18 Feb 2020 21:22:15 -0500
Subject: fixed multicol/row resizers (undo, cursors, code)

---
 .../CollectionMultirowView.scss                    |  2 +-
 .../collectionMulticolumn/MulticolumnResizer.tsx   | 29 ++++++----------------
 .../collectionMulticolumn/MultirowResizer.tsx      | 29 ++++++----------------
 3 files changed, 17 insertions(+), 43 deletions(-)

(limited to 'src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx')

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
index a7e2c5707..79fb195e8 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
@@ -20,7 +20,7 @@
     }
 
     .multiRowResizer {
-        cursor: ew-resize;
+        cursor: ns-resize;
         transition: 0.5s opacity ease;
         display: flex;
         flex-direction: row;
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index 6b89402e6..2cbeb3526 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -4,6 +4,7 @@ import { observable, action } from "mobx";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, StrCast } from "../../../../new_fields/Types";
 import { DimUnit } from "./CollectionMulticolumnView";
+import { UndoManager } from "../../../util/UndoManager";
 
 interface ResizerProps {
     width: number;
@@ -12,30 +13,24 @@ interface ResizerProps {
     toRight?: Doc;
 }
 
-enum ResizeMode {
-    Global = "blue",
-    Pinned = "red",
-    Undefined = "black"
-}
-
 const resizerOpacity = 1;
 
 @observer
 export default class ResizeBar extends React.Component<ResizerProps> {
     @observable private isHoverActive = false;
     @observable private isResizingActive = false;
-    @observable private resizeMode = ResizeMode.Undefined;
+    private _resizeUndo?: UndoManager.Batch;
 
     @action
-    private registerResizing = (e: React.PointerEvent<HTMLDivElement>, mode: ResizeMode) => {
+    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        this.resizeMode = mode;
         window.removeEventListener("pointermove", this.onPointerMove);
         window.removeEventListener("pointerup", this.onPointerUp);
         window.addEventListener("pointermove", this.onPointerMove);
         window.addEventListener("pointerup", this.onPointerUp);
         this.isResizingActive = true;
+        this._resizeUndo = UndoManager.StartBatch("multcol resizing");
     }
 
     private onPointerMove = ({ movementX }: PointerEvent) => {
@@ -49,7 +44,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                 const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
                 toNarrow.dimMagnitude = Math.max(0.05, NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementX) / scale);
             }
-            if (this.resizeMode === ResizeMode.Pinned && toWiden) {
+            if (toWiden) {
                 const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
                 toWiden.dimMagnitude = Math.max(0.05, NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementX) / scale);
             }
@@ -79,11 +74,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
-        this.resizeMode = ResizeMode.Undefined;
         this.isResizingActive = false;
         this.isHoverActive = false;
         window.removeEventListener("pointermove", this.onPointerMove);
         window.removeEventListener("pointerup", this.onPointerUp);
+        this._resizeUndo?.end();
+        this._resizeUndo = undefined;
     }
 
     render() {
@@ -97,16 +93,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                 onPointerEnter={action(() => this.isHoverActive = true)}
                 onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
             >
-                <div
-                    className={"multiColumnResizer-hdl"}
-                    onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)}
-                    style={{ backgroundColor: this.resizeMode }}
-                />
-                <div
-                    className={"multiColumnResizer-hdl"}
-                    onPointerDown={e => this.registerResizing(e, ResizeMode.Global)}
-                    style={{ backgroundColor: this.resizeMode }}
-                />
+                <div className={"multiColumnResizer-hdl"} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
index d00939b26..9df8cc3e2 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
@@ -4,6 +4,7 @@ import { observable, action } from "mobx";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, StrCast } from "../../../../new_fields/Types";
 import { DimUnit } from "./CollectionMultirowView";
+import { UndoManager } from "../../../util/UndoManager";
 
 interface ResizerProps {
     height: number;
@@ -12,30 +13,24 @@ interface ResizerProps {
     toBottom?: Doc;
 }
 
-enum ResizeMode {
-    Global = "blue",
-    Pinned = "red",
-    Undefined = "black"
-}
-
 const resizerOpacity = 1;
 
 @observer
 export default class ResizeBar extends React.Component<ResizerProps> {
     @observable private isHoverActive = false;
     @observable private isResizingActive = false;
-    @observable private resizeMode = ResizeMode.Undefined;
+    private _resizeUndo?: UndoManager.Batch;
 
     @action
-    private registerResizing = (e: React.PointerEvent<HTMLDivElement>, mode: ResizeMode) => {
+    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        this.resizeMode = mode;
         window.removeEventListener("pointermove", this.onPointerMove);
         window.removeEventListener("pointerup", this.onPointerUp);
         window.addEventListener("pointermove", this.onPointerMove);
         window.addEventListener("pointerup", this.onPointerUp);
         this.isResizingActive = true;
+        this._resizeUndo = UndoManager.StartBatch("multcol resizing");
     }
 
     private onPointerMove = ({ movementY }: PointerEvent) => {
@@ -49,7 +44,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                 const scale = StrCast(toNarrow.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
                 toNarrow.dimMagnitude = Math.max(0.05, NumCast(toNarrow.dimMagnitude, 1) - Math.abs(movementY) / scale);
             }
-            if (this.resizeMode === ResizeMode.Pinned && toWiden) {
+            if (toWiden) {
                 const scale = StrCast(toWiden.dimUnit, "*") === DimUnit.Ratio ? unitLength : 1;
                 toWiden.dimMagnitude = Math.max(0.05, NumCast(toWiden.dimMagnitude, 1) + Math.abs(movementY) / scale);
             }
@@ -79,11 +74,12 @@ export default class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
-        this.resizeMode = ResizeMode.Undefined;
         this.isResizingActive = false;
         this.isHoverActive = false;
         window.removeEventListener("pointermove", this.onPointerMove);
         window.removeEventListener("pointerup", this.onPointerUp);
+        this._resizeUndo?.end();
+        this._resizeUndo = undefined;
     }
 
     render() {
@@ -97,16 +93,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                 onPointerEnter={action(() => this.isHoverActive = true)}
                 onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}
             >
-                <div
-                    className={"multiRowResizer-hdl"}
-                    onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)}
-                    style={{ backgroundColor: this.resizeMode }}
-                />
-                <div
-                    className={"multiRowResizer-hdl"}
-                    onPointerDown={e => this.registerResizing(e, ResizeMode.Global)}
-                    style={{ backgroundColor: this.resizeMode }}
-                />
+                <div className={"multiRowResizer-hdl"} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2

