cleaned up color setting for templates so that instances can override template default color.

4 files changed, 32 insertions, 10 deletions

diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index d33f3b713..b8b70d9d2 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -49,6 +49,13 @@ export function DocComponent<P extends DocComponentProps>() {
         get rootDoc() {
             return DocCast(this.Document.rootDocument, this.Document);
         }
+
+        /**
+         * Whether the doc is a sub-componentn of a compound template doc.
+         */
+        get isTemplate() {
+            return this.rootDoc !== this.layoutDoc;
+        }
         /**
          * This is the document being rendered by the React component. In the
          * case of a compound template, this will be the  expanded template Doc
@@ -110,6 +117,12 @@ export function ViewBoxBaseComponent<P extends FieldViewProps>() {
             return DocCast(this.Document.rootDocument, this.Document);
         }
         /**
+         * Whether the doc is a sub-componentn of a compound template doc.
+         */
+        get isTemplate() {
+            return this.rootDoc !== this.layoutDoc;
+        }
+        /**
          * This is the document being rendered by the React component. In the
          * case of a compound template, this will be the  expanded template Doc
          * that represents the component of the compound Doc being rendered.
@@ -184,6 +197,12 @@ export function ViewBoxAnnotatableComponent<P extends FieldViewProps>() {
             return DocCast(this.Document.rootDocument, this.Document);
         }
         /**
+         * Whether the doc is a sub-componentn of a compound template doc.
+         */
+        get isTemplate() {
+            return this.rootDoc !== this.layoutDoc;
+        }
+        /**
          * This is the document being rendered.  It may be a template so it may or may no inherit from the data doc.
          */
         @computed get layoutDoc() {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index ae94c206c..a1c6aa1a2 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -251,9 +251,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             const dataKey = doc ? Doc.LayoutFieldKey(doc) : "";
             const usePath = StrCast(doc?.[dataKey + "_usePath"]);
             const alternate = usePath.includes(":hover") ? ( isHovering?.() ? '_' + usePath.replace(":hover","") : "") : usePath ? "_" +usePath:usePath;
-            let docColor: Opt<string> = StrCast(doc?.[fieldKey+alternate], StrCast(doc?.['backgroundColor' +alternate], isCaption ? 'rgba(0,0,0,0.4)' : ''));
-            if (!docColor && doc?.[StrCast(doc?.layout_fieldKey)] instanceof Doc) docColor = StrCast(doc._backgroundColor,docColor);
-            if (docColor && doc?._override_backgroundColor) docColor = StrCast(doc._backgroundColor,docColor);
+            let docColor:Opt<string> = StrCast(doc?._backgroundColor, // renderDoc === this.layoutDoc
+                StrCast(doc?.[fieldKey+alternate],       // doc === this.Document
+                    StrCast(doc?.['backgroundColor' +alternate], 
+                        isCaption ? 'rgba(0,0,0,0.4)' : '')));
+            
             // prettier-ignore
             switch (layoutDoc?.type) {
                 case DocumentType.PRESELEMENT: docColor = docColor || ""; break;
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 04b2873d1..caacd0a11 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -38,6 +38,7 @@ import { VideoBox } from '../nodes/VideoBox';
 import { WebBox } from '../nodes/WebBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
+import { DocData } from '../../../fields/DocSymbols';
 
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function IsNoneSelected() {
@@ -131,10 +132,10 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b
                 obj[fieldKey] = color;
                 CollectionFreeFormDocumentView.setStringValues(contentFrameNumber, dv.Document, obj);
             } else {
-                const dataKey = Doc.LayoutFieldKey(dv.Document);
+                const colorDoc = dv.isTemplate ? dv.layoutDoc : dv.dataDoc; // assigning to a template should not assign to the data doc
+                const dataKey = Doc.LayoutFieldKey(colorDoc);
                 const alternate = (dv.layoutDoc[dataKey + '_usePath'] ? '_' + dv.layoutDoc[dataKey + '_usePath'] : '').replace(':hover', '');
-                dv.layoutDoc[fieldKey + alternate] = undefined;
-                dv.dataDoc[fieldKey + alternate] = color;
+                colorDoc[fieldKey + alternate] = color;
             }
         });
     } else {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 4cf60d356..436f35d4c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -103,14 +103,14 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
     @computed get border()            { return this.style(this.layoutDoc, StyleProp.Border) as string || ""; } // prettier-ignore
     @computed get borderRounding()    { return this.style(this.layoutDoc, StyleProp.BorderRounding) as string; } // prettier-ignore
     @computed get widgetDecorations() { return this.style(this.layoutDoc, StyleProp.Decorations) as JSX.Element; } // prettier-ignore
-    @computed get backgroundBoxColor(){ return this.style(this.Document, StyleProp.BackgroundColor + ':docView') as string; } // prettier-ignore
+    @computed get backgroundBoxColor(){ return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':docView') as string; } // prettier-ignore
     @computed get showTitle()         { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore
     @computed get showCaption()       { return this.style(this.layoutDoc, StyleProp.ShowCaption) as string ?? "";  } // prettier-ignore
     @computed get headerMargin()      { return this.style(this.layoutDoc, StyleProp.HeaderMargin)  as number ?? 0; } // prettier-ignore
     @computed get titleHeight()       { return this.style(this.layoutDoc, StyleProp.TitleHeight) as number ?? 0;  } // prettier-ignore
-    @computed get docContents()       { return this.style(this.Document, StyleProp.DocContents) as JSX.Element; } // prettier-ignore
-    @computed get highlighting()      { return this.style(this.Document, StyleProp.Highlighting); } // prettier-ignore
-    @computed get borderPath()        { return this.style(this.Document, StyleProp.BorderPath); } // prettier-ignore
+    @computed get docContents()       { return this.style(this.Document,  StyleProp.DocContents) as JSX.Element; } // prettier-ignore
+    @computed get highlighting()      { return this.style(this.Document,  StyleProp.Highlighting); } // prettier-ignore
+    @computed get borderPath()        { return this.style(this.Document,  StyleProp.BorderPath); } // prettier-ignore
 
     @computed get onClickHdlr()       { return this._props.onClickScript?.()       ?? ScriptCast(this.layoutDoc.onClick       ?? this.Document.onClick); } // prettier-ignore
     @computed get onDoubleClickHdlr() { return this._props.onDoubleClickScript?.() ?? ScriptCast(this.layoutDoc.onDoubleClick ?? this.Document.onDoubleClick); } // prettier-ignore