Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into pen

1 files changed, 17 insertions, 32 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index 11e210958..2cbeb3526 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -3,7 +3,8 @@ 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";
+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) => {
@@ -46,14 +41,12 @@ 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 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) {
-                const { widthUnit, widthMagnitude } = toWiden;
-                const scale = widthUnit === WidthUnit.Ratio ? unitLength : 1;
-                toWiden.widthMagnitude = NumCast(widthMagnitude) + Math.abs(movementX) / scale;
+            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);
             }
         }
     }
@@ -61,17 +54,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;
@@ -81,17 +74,18 @@ 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() {
         return (
             <div
-                className={"resizer"}
+                className={"multiColumnResizer"}
                 style={{
                     width: this.props.width,
                     opacity: this.isActivated && this.isHoverActive ? resizerOpacity : 0
@@ -99,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={"internal"}
-                    onPointerDown={e => this.registerResizing(e, ResizeMode.Pinned)}
-                    style={{ backgroundColor: this.resizeMode }}
-                />
-                <div
-                    className={"internal"}
-                    onPointerDown={e => this.registerResizing(e, ResizeMode.Global)}
-                    style={{ backgroundColor: this.resizeMode }}
-                />
+                <div className={"multiColumnResizer-hdl"} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
     }