fixed template/scripting problem. added collectionDoc parameter for onClick scripts. made buxton layout update hero image on click.

7 files changed, 28 insertions, 24 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d7292837c..634c223a7 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -88,6 +88,7 @@ export interface DocumentOptions {
     defaultBackgroundColor?: string;
     dropAction?: dropActionType;
     chromeStatus?: string;
+    disableLOD?: boolean;
     columnWidth?: number;
     fontSize?: number;
     curPage?: number;
@@ -330,7 +331,7 @@ export namespace Docs {
      */
     export namespace Create {
 
-        const delegateKeys = ["x", "y", "width", "height", "panX", "panY", "nativeWidth", "nativeHeight", "dropAction", "annotationOn", "forceActive", "fitWidth"];
+        const delegateKeys = ["x", "y", "width", "height", "panX", "panY", "nativeWidth", "nativeHeight", "dropAction", "annotationOn", "forceActive", "fitWidth", "diableLOD"];
 
         /**
          * This function receives the relevant document prototype and uses
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index ff0e19347..3e2cc6a2e 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -7,7 +7,7 @@ import { StrCast } from "../../new_fields/Types";
 import { Docs } from "../documents/Documents";
 import { ScriptField } from "../../new_fields/ScriptField";
 
-export function makeTemplate(doc: Doc, suppressTitle = false): boolean {
+export function makeTemplate(doc: Doc): boolean {
     const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateField ? doc.layout : doc;
     const layout = StrCast(layoutDoc.layout).match(/fieldKey={'[^']*'}/)![0];
     const fieldKey = layout.replace("fieldKey={'", "").replace(/'}$/, "");
@@ -16,7 +16,7 @@ export function makeTemplate(doc: Doc, suppressTitle = false): boolean {
     docs.forEach(d => {
         if (!StrCast(d.title).startsWith("-")) {
             any = true;
-            Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc), suppressTitle);
+            Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc));
         } else if (d.type === DocumentType.COL) {
             any = makeTemplate(d) || any;
         }
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 229a23294..f0dcadb5b 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -145,7 +145,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             if (created) {
                 created.title = fieldKey;
                 if (this.props.parent.Document.isTemplateDoc) {
-                    Doc.MakeMetadataFieldTemplate(created, this.props.parent.props.Document, true);
+                    Doc.MakeMetadataFieldTemplate(created, this.props.parent.props.Document);
                 }
             }
             return created ? addDocument(created) : false;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 48b5d91e9..2433cc40e 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -633,19 +633,20 @@ export class CollectionTreeView extends CollectionSubView(Document) {
         }
         ContextMenu.Instance.addItem({
             description: "Buxton Layout", icon: "eye", event: () => {
-                const { TextDocument, ImageDocument } = Docs.Create;
+                const { TextDocument, ImageDocument, MulticolumnDocument } = Docs.Create;
                 const { Document } = this.props;
                 const fallback = "http://www.cs.brown.edu/~bcz/face.gif";
+                const imageRack = MulticolumnDocument([], { title: "data", height: 100 });
                 const wrapper = Docs.Create.StackingDocument([
                     ImageDocument(fallback, { title: "hero" }),
+                    imageRack,
                     ...["short_description", "year", "company", "degrees_of_freedom"].map(key => TextDocument({ title: key }))
-                ], { autoHeight: true, chromeStatus: "disabled" });
-                wrapper.disableLOD = true;
-                wrapper.isTemplateDoc = makeTemplate(wrapper, true);
+                ], { autoHeight: true, chromeStatus: "disabled", disableLOD: true, title: "detailed layout stack" });
+                wrapper.isTemplateDoc = makeTemplate(wrapper);
+                imageRack.onChildClick = ScriptField.MakeFunction(`containingCollection.resolvedDataDoc.hero = copyField(this.data)`, { containingCollection: Doc.name });
 
                 const cardLayout = ImageDocument(fallback);
-                const proto = Doc.GetProto(cardLayout);
-                proto.layout = ImageBox.LayoutString("hero");
+                cardLayout.proto!.layout = ImageBox.LayoutString("hero");
                 cardLayout.showTitle = "title";
                 cardLayout.showTitleHover = "titlehover";
                 cardLayout.isTemplateField = true; // make this document act like a template field
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 70e56183c..b9b367106 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -4,7 +4,7 @@ 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 } from '../../../../new_fields/Types';
+import { NumCast, StrCast, BoolCast, ScriptCast } from '../../../../new_fields/Types';
 import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
 import { Utils } from '../../../../Utils';
 import "./collectionMulticolumnView.scss";
@@ -186,6 +186,8 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         return Transform.Identity(); // type coersion, this case should never be hit
     }
 
+    @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); }
+
     /**
      * @returns the resolved list of rendered child documents, displayed
      * at their resolved pixel widths, each separated by a resizer. 
@@ -206,9 +208,11 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
                         {...this.props}
                         Document={layout}
                         DataDocument={layout.resolvedDataDoc as Doc}
+                        CollectionDoc={this.props.Document}
                         PanelWidth={() => this.lookupPixels(layout)}
                         PanelHeight={() => PanelHeight() - (BoolCast(Document.showWidthLabels) ? 20 : 0)}
                         getTransform={() => this.lookupIndividualTransform(layout)}
+                        onClick={this.onChildClickHandler}
                     />
                     <WidthLabel
                         layout={layout}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2ccfad448..36f2e7a4d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -268,7 +268,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 SelectionManager.DeselectAll();
                 Doc.UnBrushDoc(this.props.Document);
             } else if (this.onClickHandler && this.onClickHandler.script) {
-                this.onClickHandler.script.run({ this: this.Document.isTemplateField && this.props.DataDoc ? this.props.DataDoc : this.props.Document }, console.log);
+                this.onClickHandler.script.run({ this: this.Document.isTemplateField && this.props.DataDoc ? this.props.DataDoc : this.props.Document, containingCollection: this.props.ContainingCollectionDoc }, console.log);
             } else if (this.Document.type === DocumentType.BUTTON) {
                 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
@@ -552,7 +552,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
             const docTemplate = Docs.Create.FreeformDocument([fieldTemplate], { title: doc.title + "_layout", width: width + 20, height: Math.max(100, height + 45) });
 
-            Doc.MakeMetadataFieldTemplate(fieldTemplate, Doc.GetProto(docTemplate), true);
+            Doc.MakeMetadataFieldTemplate(fieldTemplate, Doc.GetProto(docTemplate));
             Doc.ApplyTemplateTo(docTemplate, dataDoc || doc, "layoutCustom", undefined);
         } else {
             doc.layoutKey = "layoutCustom";
@@ -659,14 +659,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @undoBatch
     @action
-    setCustomView = 
-    (custom: boolean): void => {
-        if (this.props.ContainingCollectionView?.props.DataDoc || this.props.ContainingCollectionView?.props.Document.isTemplateDoc) {
-            Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.ContainingCollectionView.props.Document);
-        } else {
-            custom ? DocumentView.makeCustomViewClicked(this.props.Document, this.props.DataDoc) : DocumentView.makeNativeViewClicked(this.props.Document);
+    setCustomView =
+        (custom: boolean): void => {
+            if (this.props.ContainingCollectionView?.props.DataDoc || this.props.ContainingCollectionView?.props.Document.isTemplateDoc) {
+                Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.ContainingCollectionView.props.Document);
+            } else {
+                custom ? DocumentView.makeCustomViewClicked(this.props.Document, this.props.DataDoc) : DocumentView.makeNativeViewClicked(this.props.Document);
+            }
         }
-    }
 
     @undoBatch
     @action
@@ -996,6 +996,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 color: StrCast(this.Document.color),
                 outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px",
                 border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined,
+                boxShadow: this.props.Document.isTemplateField ? "black 0.2vw 0.2vw 0.8vw" : undefined,
                 background: this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc.viewType === CollectionViewType.Linear ? undefined : backgroundColor,
                 width: animwidth,
                 height: animheight,
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 674c7cc25..9620f753f 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -614,7 +614,7 @@ export namespace Doc {
         templateField.templateField = metadataFieldKey;
         templateField.isTemplateField = true;
         templateField.title = metadataFieldKey;
-        templateField.showTitle = suppressTitle ? undefined : "title";
+        // templateField.showTitle = suppressTitle ? undefined : "title";
 
         // move any data that the template field had been rendering over to the template doc so that things will 
         // appear the same after the conversion to a template has completed.  (otherwise, there would be no data for the template to render)
@@ -636,9 +636,6 @@ export namespace Doc {
             templateField.defaultBackgroundColor = templateField.backgroundColor;
         }
 
-        // finally, make the templateField be a delegate of the templateDoc so that it can find all the fields needed to render itselt
-        // (note that this is only useful to see the template doc itself which may not be necessary for many use cases)
-        templateField.proto = templateDoc;
         return true;
     }