From 810f6b9b2737f3617910e498f577499fcbf3ffab Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 17 Jan 2020 10:33:05 -0500
Subject: moved multilcolumnview into collections directory

---
 .../collections/CollectionMulticolumnView.tsx      | 232 +++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 src/client/views/collections/CollectionMulticolumnView.tsx

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

diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
new file mode 100644
index 000000000..19a7b1123
--- /dev/null
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -0,0 +1,232 @@
+import { observer } from 'mobx-react';
+import { makeInterface } from '../../../new_fields/Schema';
+import { documentSchema } from '../../../new_fields/documentSchemas';
+import { CollectionSubView } from './CollectionSubView';
+import * as React from "react";
+import { Doc } from '../../../new_fields/Doc';
+import { NumCast, StrCast } from '../../../new_fields/Types';
+import { ContentFittingDocumentView } from './../nodes/ContentFittingDocumentView';
+import { Utils } from '../../../Utils';
+import "./collectionMulticolumnView.scss";
+import { computed } from 'mobx';
+
+type MulticolumnDocument = makeInterface<[typeof documentSchema]>;
+const MulticolumnDocument = makeInterface(documentSchema);
+
+interface Unresolved {
+    target: Doc;
+    magnitude: number;
+    unit: string;
+}
+
+interface Resolved {
+    target: Doc;
+    pixels: number;
+}
+
+interface LayoutData {
+    unresolved: Unresolved[];
+    numFixed: number;
+    numRatio: number;
+    starSum: number;
+}
+
+const resolvedUnits = ["*", "px"];
+const resizerWidth = 2;
+
+@observer
+export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) {
+    @computed
+    private get resolvedLayoutInformation(): LayoutData {
+        const unresolved: Unresolved[] = [];
+        let starSum = 0, numFixed = 0, numRatio = 0;
+        for (const target of this.childDocs) {
+            const unit = StrCast(target.widthUnit);
+            const magnitude = NumCast(target.widthMagnitude);
+            if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
+                if (unit === "*") {
+                    starSum += magnitude;
+                    numRatio++;
+                } else {
+                    numFixed++;
+                }
+                unresolved.push({ target, magnitude, unit });
+            }
+            // otherwise, the particular configuration entry is ignored and the remaining
+            // space is allocated as if the document were absent from the configuration list
+        }
+        return { unresolved, numRatio, numFixed, starSum };
+    }
+
+    /**
+     * This returns the total quantity, in pixels, that this
+     * view needs to reserve for child documents that have
+     * (with higher priority) requested a fixed pixel width.
+     * 
+     * If the underlying resolvedLayoutInformation returns null
+     * because we're waiting on promises to resolve, this value will be undefined as well.
+     */
+    @computed
+    private get totalFixedAllocation(): number | undefined {
+        return this.resolvedLayoutInformation?.unresolved.reduce(
+            (sum, { magnitude, unit }) => sum + (unit === "px" ? magnitude : 0), 0);
+    }
+
+    /**
+     * This returns the total quantity, in pixels, that this
+     * view needs to reserve for child documents that have
+     * (with lower priority) requested a certain relative proportion of the
+     * remaining pixel width not allocated for fixed widths.
+     * 
+     * If the underlying totalFixedAllocation returns undefined
+     * because we're waiting indirectly on promises to resolve, this value will be undefined as well.
+     */
+    @computed
+    private get totalRatioAllocation(): number | undefined {
+        const layoutInfoLen = this.resolvedLayoutInformation?.unresolved.length;
+        if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined)
+            return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1));
+    }
+
+    /**
+     * This returns the total quantity, in pixels, that
+     * 1* (relative / star unit) is worth. For example,
+     * if the configuration has three documents, with, respectively,
+     * widths of 2*, 2* and 1*, and the panel width returns 1000px,
+     * this accessor returns 1000 / (2 + 2 + 1), or 200px.
+     * Elsewhere, this is then multiplied by each relative-width
+     * document's (potentially decimal) * count to compute its actual width (400px, 400px and 200px).
+     * 
+     * If the underlying totalRatioAllocation or this.resolveLayoutInformation return undefined
+     * because we're waiting indirectly on promises to resolve, this value will be undefined as well.
+     */
+    @computed
+    private get columnUnitLength(): number | undefined {
+        if (this.resolvedLayoutInformation && this.totalRatioAllocation !== undefined) {
+            return this.totalRatioAllocation / this.resolvedLayoutInformation.starSum;
+        }
+    }
+
+    @computed
+    private get contents(): JSX.Element[] | null {
+        const layout = this.resolvedLayoutInformation;
+        const columnUnitLength = this.columnUnitLength;
+        if (layout === null || columnUnitLength === undefined) {
+            return (null); // we're still waiting on promises to resolve
+        }
+        const resolved: Resolved[] = [];
+        layout.unresolved.forEach(item => {
+            const { unit, magnitude, ...remaining } = item;
+            let width = magnitude;
+            if (unit === "*") {
+                width = magnitude * columnUnitLength;
+            }
+            resolved.push({ pixels: width, ...remaining });
+        });
+        const collector: JSX.Element[] = [];
+        for (let i = 0; i < resolved.length; i++) {
+            const { target, pixels } = resolved[i];
+            collector.push(
+                <div className={"fish"}>
+                    <ContentFittingDocumentView
+                        {...this.props}
+                        key={Utils.GenerateGuid()}
+                        Document={target}
+                        DataDocument={undefined}
+                        PanelWidth={() => pixels}
+                        getTransform={this.props.ScreenToLocalTransform}
+                    />
+                    <span className={"display"}>{NumCast(target.widthMagnitude).toFixed(3)} {StrCast(target.widthUnit)}</span>
+                </div>,
+                <ResizeBar
+                    width={resizerWidth}
+                    key={Utils.GenerateGuid()}
+                    columnUnitLength={columnUnitLength}
+                    toLeft={target}
+                    toRight={resolved[i + 1]?.target}
+                />
+            );
+        }
+        collector.pop(); // removes the final extraneous resize bar
+        return collector;
+    }
+
+    render(): JSX.Element {
+        return (
+            <div className={"collectionMulticolumnView_contents"}>
+                {this.contents}
+            </div>
+        );
+    }
+
+}
+
+interface SpacerProps {
+    width: number;
+    columnUnitLength: number;
+    toLeft?: Doc;
+    toRight?: Doc;
+}
+
+class ResizeBar extends React.Component<SpacerProps> {
+
+    private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+        window.removeEventListener("pointermove", this.onPointerMove);
+        window.removeEventListener("pointerup", this.onPointerUp);
+        window.addEventListener("pointermove", this.onPointerMove);
+        window.addEventListener("pointerup", this.onPointerUp);
+    }
+
+    private onPointerMove = ({ movementX }: PointerEvent) => {
+        const { toLeft, toRight, columnUnitLength } = this.props;
+        const target = movementX > 0 ? toRight : toLeft;
+        if (target) {
+            const { widthUnit, widthMagnitude } = target;
+            if (widthUnit === "*") {
+                target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / columnUnitLength;
+            }
+        }
+    }
+
+    private get opacity() {
+        const { toLeft, toRight } = this.props;
+        if (toLeft && toRight) {
+            if (StrCast(toLeft.widthUnit) === "px" && StrCast(toRight.widthUnit) === "px") {
+                return 0;
+            }
+            return 0.4;
+        } else if (toLeft) {
+            if (StrCast(toLeft.widthUnit) === "px") {
+                return 0;
+            }
+            return 0.4;
+        } else if (toRight) {
+            if (StrCast(toRight.widthUnit) === "px") {
+                return 0;
+            }
+            return 0.4;
+        }
+        return 0;
+    }
+
+    private onPointerUp = () => {
+        window.removeEventListener("pointermove", this.onPointerMove);
+        window.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    render() {
+        return (
+            <div
+                className={"resizer"}
+                style={{
+                    width: this.props.width,
+                    opacity: this.opacity
+                }}
+                onPointerDown={this.registerResizing}
+            />
+        );
+    }
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From fc4dd8c7d361bc848b6b27c67d5da26b8aab408e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 17 Jan 2020 10:58:19 -0500
Subject: adjustments to multiColumnView to support templates

---
 src/client/views/collections/CollectionMulticolumnView.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
index 19a7b1123..157c5e367 100644
--- a/src/client/views/collections/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -40,9 +40,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
     private get resolvedLayoutInformation(): LayoutData {
         const unresolved: Unresolved[] = [];
         let starSum = 0, numFixed = 0, numRatio = 0;
-        for (const target of this.childDocs) {
-            const unit = StrCast(target.widthUnit);
-            const magnitude = NumCast(target.widthMagnitude);
+        for (const pair of this.childLayoutPairs) {
+            const unit = StrCast(pair.layout.widthUnit);
+            const magnitude = NumCast(pair.layout.widthMagnitude);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
                 if (unit === "*") {
                     starSum += magnitude;
@@ -50,7 +50,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                 } else {
                     numFixed++;
                 }
-                unresolved.push({ target, magnitude, unit });
+                unresolved.push({ target: pair.layout, magnitude, unit });
             }
             // otherwise, the particular configuration entry is ignored and the remaining
             // space is allocated as if the document were absent from the configuration list
@@ -132,7 +132,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                         {...this.props}
                         key={Utils.GenerateGuid()}
                         Document={target}
-                        DataDocument={undefined}
+                        DataDocument={target.resolvedDataDoc as Doc}
                         PanelWidth={() => pixels}
                         getTransform={this.props.ScreenToLocalTransform}
                     />
-- 
cgit v1.2.3-70-g09d2


From 9af3c5967e45b98186a2862a1f23e2494630ddb3 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 17 Jan 2020 11:32:56 -0500
Subject: fixed placement of documentdecorations for multicolumnview

---
 src/client/views/collections/CollectionMulticolumnView.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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

diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
index 157c5e367..a04df171a 100644
--- a/src/client/views/collections/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -124,8 +124,10 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
             resolved.push({ pixels: width, ...remaining });
         });
         const collector: JSX.Element[] = [];
+        let offset = 0;
         for (let i = 0; i < resolved.length; i++) {
             const { target, pixels } = resolved[i];
+            const shiftX = offset;
             collector.push(
                 <div className={"fish"}>
                     <ContentFittingDocumentView
@@ -134,7 +136,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                         Document={target}
                         DataDocument={target.resolvedDataDoc as Doc}
                         PanelWidth={() => pixels}
-                        getTransform={this.props.ScreenToLocalTransform}
+                        getTransform={() => this.props.ScreenToLocalTransform().translate(-shiftX, 0)}
                     />
                     <span className={"display"}>{NumCast(target.widthMagnitude).toFixed(3)} {StrCast(target.widthUnit)}</span>
                 </div>,
@@ -146,6 +148,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                     toRight={resolved[i + 1]?.target}
                 />
             );
+            offset += pixels + resizerWidth;
         }
         collector.pop(); // removes the final extraneous resize bar
         return collector;
-- 
cgit v1.2.3-70-g09d2


From f783e6cd66d4a7e303bd327d028076e3d76815bc Mon Sep 17 00:00:00 2001
From: Sam Wilkins <samwilkins333@gmail.com>
Date: Fri, 17 Jan 2020 11:45:49 -0500
Subject: drop target added to mc view

---
 src/client/views/collections/CollectionMulticolumnView.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
index 157c5e367..4744de34c 100644
--- a/src/client/views/collections/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -36,6 +36,7 @@ const resizerWidth = 2;
 
 @observer
 export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) {
+
     @computed
     private get resolvedLayoutInformation(): LayoutData {
         const unresolved: Unresolved[] = [];
@@ -84,8 +85,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
     @computed
     private get totalRatioAllocation(): number | undefined {
         const layoutInfoLen = this.resolvedLayoutInformation?.unresolved.length;
-        if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined)
+        if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) {
             return this.props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1));
+        }
     }
 
     /**
@@ -153,7 +155,10 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
 
     render(): JSX.Element {
         return (
-            <div className={"collectionMulticolumnView_contents"}>
+            <div
+                className={"collectionMulticolumnView_contents"}
+                ref={this.createDropTarget}
+            >
                 {this.contents}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 203ec5b3570c96f22b1d9517770e36c695677f5e Mon Sep 17 00:00:00 2001
From: Sam Wilkins <samwilkins333@gmail.com>
Date: Fri, 17 Jan 2020 13:14:22 -0500
Subject: multicolumn performance improvements and refactor

---
 .../collections/CollectionMulticolumnView.scss     |   2 +-
 .../collections/CollectionMulticolumnView.tsx      | 149 ++++++++++++++-------
 2 files changed, 105 insertions(+), 46 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMulticolumnView.scss b/src/client/views/collections/CollectionMulticolumnView.scss
index 120603a0b..a54af748b 100644
--- a/src/client/views/collections/CollectionMulticolumnView.scss
+++ b/src/client/views/collections/CollectionMulticolumnView.scss
@@ -4,7 +4,7 @@
     height: 100%;
     overflow: hidden;
 
-    .fish {
+    .document-wrapper {
         display: flex;
         flex-direction: column;
 
diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
index 51064d5c3..2cb91f239 100644
--- a/src/client/views/collections/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -4,11 +4,12 @@ import { documentSchema } from '../../../new_fields/documentSchemas';
 import { CollectionSubView } from './CollectionSubView';
 import * as React from "react";
 import { Doc } from '../../../new_fields/Doc';
-import { NumCast, StrCast } from '../../../new_fields/Types';
+import { NumCast, StrCast, BoolCast } from '../../../new_fields/Types';
 import { ContentFittingDocumentView } from './../nodes/ContentFittingDocumentView';
 import { Utils } from '../../../Utils';
 import "./collectionMulticolumnView.scss";
-import { computed } from 'mobx';
+import { computed, trace } from 'mobx';
+import { Transform } from '../../util/Transform';
 
 type MulticolumnDocument = makeInterface<[typeof documentSchema]>;
 const MulticolumnDocument = makeInterface(documentSchema);
@@ -33,17 +34,24 @@ interface LayoutData {
 
 const resolvedUnits = ["*", "px"];
 const resizerWidth = 2;
+const resizerOpacity = 0.4;
 
 @observer
 export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocument) {
 
+    @computed
+    private get ratioDefinedDocs() {
+        return this.childLayoutPairs.map(({ layout }) => layout).filter(({ widthUnit }) => StrCast(widthUnit) === "*");
+    }
+
     @computed
     private get resolvedLayoutInformation(): LayoutData {
         const unresolved: Unresolved[] = [];
         let starSum = 0, numFixed = 0, numRatio = 0;
-        for (const pair of this.childLayoutPairs) {
-            const unit = StrCast(pair.layout.widthUnit);
-            const magnitude = NumCast(pair.layout.widthMagnitude);
+
+        for (const { layout } of this.childLayoutPairs) {
+            const unit = StrCast(layout.widthUnit);
+            const magnitude = NumCast(layout.widthMagnitude);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
                 if (unit === "*") {
                     starSum += magnitude;
@@ -51,11 +59,17 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                 } else {
                     numFixed++;
                 }
-                unresolved.push({ target: pair.layout, magnitude, unit });
+                unresolved.push({ target: layout, magnitude, unit });
             }
             // otherwise, the particular configuration entry is ignored and the remaining
             // space is allocated as if the document were absent from the configuration list
         }
+
+        setTimeout(() => {
+            const minimum = Math.min(...this.ratioDefinedDocs.map(({ widthMagnitude }) => NumCast(widthMagnitude)));
+            this.ratioDefinedDocs.forEach(layout => layout.widthMagnitude = NumCast(layout.widthMagnitude) / minimum);
+        });
+
         return { unresolved, numRatio, numFixed, starSum };
     }
 
@@ -109,48 +123,68 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         }
     }
 
-    @computed
-    private get contents(): JSX.Element[] | null {
-        const layout = this.resolvedLayoutInformation;
+    private getColumnUnitLength = () => this.columnUnitLength;
+
+    private lookupPixels = (layout: Doc): number => {
         const columnUnitLength = this.columnUnitLength;
-        if (layout === null || columnUnitLength === undefined) {
-            return (null); // we're still waiting on promises to resolve
+        if (columnUnitLength === undefined) {
+            return 0; // we're still waiting on promises to resolve
         }
-        const resolved: Resolved[] = [];
-        layout.unresolved.forEach(item => {
-            const { unit, magnitude, ...remaining } = item;
-            let width = magnitude;
-            if (unit === "*") {
-                width = magnitude * columnUnitLength;
+        let width = NumCast(layout.widthMagnitude);
+        if (StrCast(layout.widthUnit) === "*") {
+            width *= columnUnitLength;
+        }
+        return width;
+    }
+
+    private lookupIndividualTransform = (layout: Doc) => {
+        const columnUnitLength = this.columnUnitLength;
+        if (columnUnitLength === undefined) {
+            return Transform.Identity(); // we're still waiting on promises to resolve
+        }
+        let offset = 0;
+        for (const { layout: candidate } of this.childLayoutPairs) {
+            if (candidate === layout) {
+                const shift = offset;
+                return this.props.ScreenToLocalTransform().translate(-shift, 0);
             }
-            resolved.push({ pixels: width, ...remaining });
-        });
+            offset += this.lookupPixels(candidate) + resizerWidth;
+        }
+        return Transform.Identity(); // type coersion, this case should never be hit
+    }
+
+    @computed
+    private get contents(): JSX.Element[] | null {
+        trace();
+        const { childLayoutPairs } = this;
+        const { Document, PanelHeight } = this.props;
         const collector: JSX.Element[] = [];
-        let offset = 0;
-        for (let i = 0; i < resolved.length; i++) {
-            const { target, pixels } = resolved[i];
-            const shiftX = offset;
+        for (let i = 0; i < childLayoutPairs.length; i++) {
+            const { layout } = childLayoutPairs[i];
             collector.push(
-                <div className={"fish"}>
+                <div className={"document-wrapper"}>
                     <ContentFittingDocumentView
                         {...this.props}
                         key={Utils.GenerateGuid()}
-                        Document={target}
-                        DataDocument={target.resolvedDataDoc as Doc}
-                        PanelWidth={() => pixels}
-                        getTransform={() => this.props.ScreenToLocalTransform().translate(-shiftX, 0)}
+                        Document={layout}
+                        DataDocument={layout.resolvedDataDoc as Doc}
+                        PanelWidth={() => this.lookupPixels(layout)}
+                        PanelHeight={() => PanelHeight() - (BoolCast(Document.showWidthLabels) ? 20 : 0)}
+                        getTransform={() => this.lookupIndividualTransform(layout)}
+                    />
+                    <WidthLabel
+                        layout={layout}
+                        collectionDoc={Document}
                     />
-                    <span className={"display"}>{NumCast(target.widthMagnitude).toFixed(3)} {StrCast(target.widthUnit)}</span>
                 </div>,
                 <ResizeBar
                     width={resizerWidth}
                     key={Utils.GenerateGuid()}
-                    columnUnitLength={columnUnitLength}
-                    toLeft={target}
-                    toRight={resolved[i + 1]?.target}
+                    columnUnitLength={this.getColumnUnitLength}
+                    toLeft={layout}
+                    toRight={childLayoutPairs[i + 1]?.layout}
                 />
             );
-            offset += pixels + resizerWidth;
         }
         collector.pop(); // removes the final extraneous resize bar
         return collector;
@@ -171,11 +205,35 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
 
 interface SpacerProps {
     width: number;
-    columnUnitLength: number;
+    columnUnitLength(): number | undefined;
     toLeft?: Doc;
     toRight?: Doc;
 }
 
+interface WidthLabelProps {
+    layout: Doc;
+    collectionDoc: Doc;
+    decimals?: number;
+}
+
+@observer
+class WidthLabel extends React.Component<WidthLabelProps> {
+
+    @computed
+    private get contents() {
+        const { layout, decimals } = this.props;
+        const magnitude = NumCast(layout.widthMagnitude).toFixed(decimals ?? 3);
+        const unit = StrCast(layout.widthUnit);
+        return <span className={"display"}>{magnitude} {unit}</span>;
+    }
+
+    render() {
+        return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : (null);
+    }
+
+}
+
+@observer
 class ResizeBar extends React.Component<SpacerProps> {
 
     private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -190,33 +248,34 @@ class ResizeBar extends React.Component<SpacerProps> {
     private onPointerMove = ({ movementX }: PointerEvent) => {
         const { toLeft, toRight, columnUnitLength } = this.props;
         const target = movementX > 0 ? toRight : toLeft;
-        if (target) {
+        const unitLength = columnUnitLength();
+        if (target && unitLength) {
             const { widthUnit, widthMagnitude } = target;
             if (widthUnit === "*") {
-                target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / columnUnitLength;
+                target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / unitLength;
             }
         }
     }
 
-    private get opacity() {
+    private get isActivated() {
         const { toLeft, toRight } = this.props;
         if (toLeft && toRight) {
             if (StrCast(toLeft.widthUnit) === "px" && StrCast(toRight.widthUnit) === "px") {
-                return 0;
+                return false;
             }
-            return 0.4;
+            return true;
         } else if (toLeft) {
             if (StrCast(toLeft.widthUnit) === "px") {
-                return 0;
+                return false;
             }
-            return 0.4;
+            return true;
         } else if (toRight) {
             if (StrCast(toRight.widthUnit) === "px") {
-                return 0;
+                return false;
             }
-            return 0.4;
+            return true;
         }
-        return 0;
+        return false;
     }
 
     private onPointerUp = () => {
@@ -230,7 +289,7 @@ class ResizeBar extends React.Component<SpacerProps> {
                 className={"resizer"}
                 style={{
                     width: this.props.width,
-                    opacity: this.opacity
+                    opacity: this.isActivated ? resizerOpacity : 0
                 }}
                 onPointerDown={this.registerResizing}
             />
-- 
cgit v1.2.3-70-g09d2


From 9620d149a2051bc9b42a037b1c65b61deebd11fa Mon Sep 17 00:00:00 2001
From: Sam Wilkins <samwilkins333@gmail.com>
Date: Fri, 17 Jan 2020 15:27:39 -0500
Subject: scale mc view

---
 src/client/views/collections/CollectionMulticolumnView.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMulticolumnView.tsx b/src/client/views/collections/CollectionMulticolumnView.tsx
index 2cb91f239..955e87f13 100644
--- a/src/client/views/collections/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/CollectionMulticolumnView.tsx
@@ -248,12 +248,11 @@ class ResizeBar extends React.Component<SpacerProps> {
     private onPointerMove = ({ movementX }: PointerEvent) => {
         const { toLeft, toRight, columnUnitLength } = this.props;
         const target = movementX > 0 ? toRight : toLeft;
-        const unitLength = columnUnitLength();
-        if (target && unitLength) {
+        let scale = columnUnitLength();
+        if (target && scale) {
             const { widthUnit, widthMagnitude } = target;
-            if (widthUnit === "*") {
-                target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / unitLength;
-            }
+            scale = widthUnit === "*" ? scale : 1;
+            target.widthMagnitude = NumCast(widthMagnitude) - Math.abs(movementX) / scale;
         }
     }
 
-- 
cgit v1.2.3-70-g09d2

