template preview columns update with resizing

3 files changed, 55 insertions, 14 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 81fd3386c..b3bacb13c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -259,7 +259,7 @@
 
 .docCreatorMenu-preview-container {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 140px);
     grid-template-rows: 140px;
     grid-auto-rows: 141px;
     overflow-y: scroll;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index e5288f4f8..34bec3b88 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -296,7 +296,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
         return (
-            <div className='docCreatorMenu-preview-container'>
+            <div className='docCreatorMenu-preview-container'
+                style={{gridTemplateColumns: `repeat(${Math.floor((this._menuDimensions.width - 10) / 140)}, 140px)`}}>
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 2792f3aba..5a4573a4f 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-namespace */
 /* eslint-disable default-param-last */
 /* eslint-disable no-use-before-define */
 import { action, computed, makeObservable, observable, ObservableMap, ObservableSet, runInAction } from 'mobx';
@@ -38,7 +36,7 @@ export namespace Field {
      * @param showComputedValue whether copmuted function should display its value instead of its function
      * @returns string representation of the field
      */
-    export function toKeyValueString(doc: Doc, key: string, showComputedValue?: boolean): string {
+    export function toKeyValueString(doc: Doc, key: string, showComputedValue?: boolean, schemaCell?: boolean): string {
         const isOnDelegate = !Doc.IsDataProto(doc) && Object.keys(doc).includes(key.replace(/^_/, ''));
         const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key]));
         const valFunc = (field: FieldType): string => {
@@ -49,7 +47,7 @@ export namespace Field {
                       ? `:=${field.script.originalScript.replace(/dashCallChat\(_setCacheResult_, this, `(.*)`\)/, '(($1))')}`
                       : field instanceof ScriptField
                         ? `$=${field.script.originalScript}`
-                        : Field.toScriptString(field);
+                        : Field.toScriptString(field, schemaCell);
             const resStr = (res + '').replace(/^`(.*)`$/, '$1');
             return typeof field === 'string' && (+resStr).toString() !== resStr && !Array.from('+-*/.').some(k => Array.from(resStr).includes(k))
                 ? resStr
@@ -59,10 +57,10 @@ export namespace Field {
         };
         return !Field.IsField(cfield) ? (key.startsWith('_') ? '=' : '') : (isOnDelegate ? '=' : '') + valFunc(cfield);
     }
-    export function toScriptString(field: FieldType) {
+    export function toScriptString(field: FieldType, schemaCell?: boolean) {
         switch (typeof field) {
             case 'string': if (field.startsWith('{"')) return `'${field}'`; // bcz: hack ... want to quote the string the right way. if there are nested "'s, then use ' instead of ".  In this case, test for the start of a JSON string of the format {"property": ... } and use outer 's instead of "s
-                           return !field.includes('`') ? `\`${field}\`` : `"${field}"`;
+                           return !field.includes('`') ? schemaCell ? `${field}` : `\`${field}\`` : `"${field}"`;
             case 'number':
             case 'boolean':return String(field);
             default:       return field?.[ToScriptString]?.() ?? 'null';
@@ -176,6 +174,49 @@ export function updateCachedAcls(doc: Doc) {
     return undefined;
 }
 
+export function ActiveInkPen(): Doc { return Doc.UserDoc(); } // prettier-ignore
+export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, 'black'); } // prettier-ignore
+export function ActiveFillColor(): string { return StrCast(ActiveInkPen()?.activeFillColor, ''); } // prettier-ignore
+export function ActiveIsInkMask(): boolean { return BoolCast(ActiveInkPen()?.activeIsInkMask, false); } // prettier-ignore
+export function ActiveInkHideTextLabels(): boolean { return BoolCast(ActiveInkPen().activeInkHideTextLabels, false); } // prettier-ignore
+export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, ''); } // prettier-ignore
+export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, ''); } // prettier-ignore
+export function ActiveArrowScale(): number { return NumCast(ActiveInkPen()?.activeArrowScale, 1); } // prettier-ignore
+export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, '0'); } // prettier-ignore
+export function ActiveInkWidth(): number { return Number(ActiveInkPen()?.activeInkWidth); } // prettier-ignore
+export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); } // prettier-ignore
+
+export function SetActiveInkWidth(width: string): void {
+    !isNaN(parseInt(width)) && ActiveInkPen() && (ActiveInkPen().activeInkWidth = width);
+}
+export function SetActiveBezierApprox(bezier: string): void {
+    ActiveInkPen() && (ActiveInkPen().activeInkBezier = isNaN(parseInt(bezier)) ? '' : bezier);
+}
+export function SetActiveInkColor(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeInkColor = value);
+}
+export function SetActiveIsInkMask(value: boolean) {
+    ActiveInkPen() && (ActiveInkPen().activeIsInkMask = value);
+}
+export function SetActiveInkHideTextLabels(value: boolean) {
+    ActiveInkPen() && (ActiveInkPen().activeInkHideTextLabels = value);
+}
+export function SetActiveFillColor(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeFillColor = value);
+}
+export function SetActiveArrowStart(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeArrowStart = value);
+}
+export function SetActiveArrowEnd(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeArrowEnd = value);
+}
+export function SetActiveArrowScale(value: number) {
+    ActiveInkPen() && (ActiveInkPen().activeArrowScale = value);
+}
+export function SetActiveDash(dash: string): void {
+    !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash);
+}
+
 @scriptingGlobal
 @Deserializable('Doc', updateCachedAcls, ['id'])
 export class Doc extends RefField {
@@ -212,7 +253,7 @@ export class Doc extends RefField {
     public static DeleteLink: (link: Doc) => void;
     public static Links: (link: Doc | undefined) => Doc[];
     public static getOppositeAnchor: (linkDoc: Doc, anchor: Doc) => Doc | undefined;
-    // KeyValue SetField
+    // KeyValueBox SetField (defined there)
     public static SetField: (doc: Doc, key: string, value: string, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) => boolean;
     // UserDoc "API"
     public static get MySharedDocs()          { return DocCast(Doc.UserDoc().mySharedDocs); } // prettier-ignore
@@ -1044,12 +1085,13 @@ export namespace Doc {
             const target = Doc.MakeDelegate(proto);
             const targetKey = StrCast(templateDoc.layout_fieldKey, 'layout');
             const applied = ApplyTemplateTo(templateDoc, target, targetKey, templateDoc.title + '(...' + _applyCount++ + ')');
-            target.layout_fieldKey = targetKey;
+            target.layout_fieldKey = targetKey; //this and line above
             applied && (Doc.GetProto(applied).type = templateDoc.type);
             return applied;
         }
         return undefined;
     }
+
     export function ApplyTemplateTo(templateDoc: Doc, target: Doc, targetKey: string, titleTarget: string | undefined) {
         if (!Doc.AreProtosEqual(target[targetKey] as Doc, templateDoc)) {
             if (target.resolvedDataDoc) {
@@ -1256,12 +1298,10 @@ export namespace Doc {
         document.removeEventListener('pointerdown', linkFollowUnhighlight);
         document.addEventListener('pointerdown', linkFollowUnhighlight);
         if (UnhighlightTimer) clearTimeout(UnhighlightTimer);
-        const presTransition = Number(presentationEffect?.presentation_transition);
-        const duration = isNaN(presTransition) ? 5000 : presTransition;
         UnhighlightTimer = window.setTimeout(() => {
             linkFollowUnhighlight();
             UnhighlightTimer = 0;
-        }, duration);
+        }, 5000);
     }
 
     export const highlightedDocs = new ObservableSet<Doc>();
@@ -1314,7 +1354,7 @@ export namespace Doc {
         doc._lockedPosition = !doc._lockedPosition;
         doc._pointerEvents = doc._lockedPosition ? 'none' : undefined;
     }
-
+    
     export function deiconifyView(doc: Doc) {
         StrCast(doc.layout_fieldKey).split('_')[1] === 'icon' && setNativeView(doc);
     }