linter + baseline functional multicolumn view

3 files changed, 43 insertions, 5 deletions

diff --git a/src/client/views/CollectionMulticolumnView.scss b/src/client/views/CollectionMulticolumnView.scss
new file mode 100644
index 000000000..84e80da4a
--- /dev/null
+++ b/src/client/views/CollectionMulticolumnView.scss
@@ -0,0 +1,7 @@
+.collectionMulticolumnView_outer,
+.collectionMulticolumnView_contents {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
diff --git a/src/client/views/CollectionMulticolumnView.tsx b/src/client/views/CollectionMulticolumnView.tsx
index ea1f0c189..0aa615ffc 100644
--- a/src/client/views/CollectionMulticolumnView.tsx
+++ b/src/client/views/CollectionMulticolumnView.tsx
@@ -1,12 +1,16 @@
 import { observer } from 'mobx-react';
 import { makeInterface, listSpec } from '../../new_fields/Schema';
 import { documentSchema } from '../../new_fields/documentSchemas';
-import { CollectionSubView, SubCollectionViewProps } from './collections/CollectionSubView';
+import { CollectionSubView } from './collections/CollectionSubView';
 import { DragManager } from '../util/DragManager';
 import * as React from "react";
 import { Doc, DocListCast } from '../../new_fields/Doc';
-import { NumCast, Cast } from '../../new_fields/Types';
+import { NumCast, Cast, StrCast } from '../../new_fields/Types';
 import { List } from '../../new_fields/List';
+import { ContentFittingDocumentView } from './nodes/ContentFittingDocumentView';
+import { Utils } from '../../Utils';
+import { Transform } from '../util/Transform';
+import "./collectionMulticolumnView.scss";
 
 type MulticolumnDocument = makeInterface<[typeof documentSchema]>;
 const MulticolumnDocument = makeInterface(documentSchema);
@@ -29,14 +33,41 @@ export default class CollectionMulticolumnView extends CollectionSubView(Multico
         }
     }
 
+    getTransform = (ele: React.RefObject<HTMLDivElement>) => () => {
+        if (!ele.current) return Transform.Identity();
+        const { scale, translateX, translateY } = Utils.GetScreenTransform(ele.current);
+        return new Transform(-translateX, -translateY, 1 / scale);
+    }
+
     public isCurrent(doc: Doc) { return !doc.isMinimized && (Math.abs(NumCast(doc.displayTimecode, -1) - NumCast(this.Document.currentTimecode, -1)) < 1.5 || NumCast(doc.displayTimecode, -1) === -1); }
 
     render() {
+        const { PanelWidth } = this.props;
         return (
             <div className={"collectionMulticolumnView_outer"}>
                 <div className={"collectionMulticolumnView_contents"}>
-                    {this.configuration.map(config => ).filter(pair => this.isCurrent(pair.layout)).map(({ layout, data }) => {
-
+                    {this.configuration.map(config => {
+                        const { target } = config;
+                        if (target instanceof Doc) {
+                            let computedWidth: number = 0;
+                            const widthSpecifier = Cast(config.columnWidth, "number");
+                            let matches: RegExpExecArray | null;
+                            if (widthSpecifier !== undefined) {
+                                computedWidth = widthSpecifier;
+                            } else if ((matches = /([\d.]+)\%/.exec(StrCast(config.columnWidth))) !== null) {
+                                computedWidth = Number(matches[1]) / 100 * PanelWidth();
+                            }
+                            return (!computedWidth ? (null) :
+                                <ContentFittingDocumentView
+                                    {...this.props}
+                                    Document={target}
+                                    DataDocument={undefined}
+                                    PanelWidth={() => computedWidth}
+                                    getTransform={this.props.ScreenToLocalTransform}
+                                />
+                            );
+                        }
+                        return (null);
                     })}
                 </div>
             </div>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index e45c19533..8f3fa4530 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -196,7 +196,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY);
             } else if (this.props.Document.isButton === "Selector") {  // this should be moved to an OnClick script
                 FormattedTextBoxComment.Hide();
-                this.Document.links?.[0] instanceof Doc && (Doc.UserDoc().SelectedDocs = new List([Doc.LinkOtherAnchor(this.Document.links[0]!, this.props.Document)]));
+                this.Document.links?.[0] instanceof Doc && (Doc.UserDoc().SelectedDocs = new List([Doc.LinkOtherAnchor(this.Document.links[0], this.props.Document)]));
             } else if (this.Document.isButton) {
                 SelectionManager.SelectDoc(this, e.ctrlKey); // don't think this should happen if a button action is actually triggered.
                 this.buttonClick(e.altKey, e.ctrlKey);