From 3f5a1d34d4aa90f605500d464660c896e8168808 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 27 Dec 2023 16:18:31 -0500
Subject: closing info ui restores background of collection.

---
 .../CollectionFreeFormInfoState.tsx                |  7 ++-
 .../CollectionFreeFormInfoUI.tsx                   | 69 +++++++++++++++-------
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 22 +++----
 3 files changed, 63 insertions(+), 35 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index d9f7ca6ea..2606304d0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -51,6 +51,7 @@ export function InfoState(
 export interface CollectionFreeFormInfoStateProps {
     infoState: infoState;
     next: (state: infoState) => any;
+    close: () => void;
 }
 
 @observer
@@ -99,13 +100,13 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
     render() {
         return (
-            <div className="collectionFreeform-infoUI" style={{display:this._hide ? 'none':undefined}}>
+            <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
                 <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
                     <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img>
                 </div>
-               <div style={{position:"absolute", top:-10, left:-10}}>
-                   <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this._hide = true)} />
+                <div style={{ position: 'absolute', top: -10, left: -10 }}>
+                    <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 181f325f3..15e4d8360 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -10,10 +10,12 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { CollectionFreeFormInfoState, InfoState, infoState, StateEntryFunc } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
+import { StrCast } from '../../../../fields/Types';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
     Freeform: CollectionFreeFormView;
+    close: () => boolean;
 }
 
 @observer
@@ -25,11 +27,16 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         makeObservable(this);
         this.currState = this.setupStates();
     }
+    _originalbackground: string | undefined;
 
     @observable _currState: infoState | undefined = undefined;
     get currState() { return this._currState!; } // prettier-ignore
     set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
 
+    componentWillUnmount(): void {
+        this._props.Freeform.layoutDoc.backgroundColor = this._originalbackground;
+    }
+
     setCurrState = (state: infoState) => {
         if (state) {
             this.currState = state;
@@ -38,6 +45,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     };
 
     setupStates = () => {
+        this._originalbackground = StrCast(this._props.Freeform.layoutDoc.backgroundColor);
         //  state entry functions
         const setBackground = (colour: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = colour);
         const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity);
@@ -142,13 +150,21 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             activePen: [() => activeTool() === InkTool.Pen, () => penMode],
         }, setBackground("black")); // prettier-ignore
 
-        const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon in the top left corner.', {
-            docPinned: [() => pin().length > trail, () => {
-                trail = pin().length;
-                return pinnedDoc1;
-            }],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-        }, setBackground("black"), "/assets/dash-pin-with-view.gif");
+        const presentDocs = InfoState(
+            'Another document! You could make a presentation. Click the pin icon in the top left corner.',
+            {
+                docPinned: [
+                    () => pin().length > trail,
+                    () => {
+                        trail = pin().length;
+                        return pinnedDoc1;
+                    },
+                ],
+                docRemoved: [() => numDocs() < 3, () => viewedLink],
+            },
+            setBackground('black'),
+            '/assets/dash-pin-with-view.gif'
+        );
 
         const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
             // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
@@ -160,10 +176,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         // }); // prettier-ignore
 
         const pinnedDoc1 = InfoState('You just pinned your doc.', {
-            docPinned: [() => pin().length > trail, () => {
-                trail = pin().length;
-                return pinnedDoc2;
-            }],
+            docPinned: [
+                () => pin().length > trail,
+                () => {
+                    trail = pin().length;
+                    return pinnedDoc2;
+                },
+            ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
@@ -171,10 +190,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         });
 
         const pinnedDoc2 = InfoState(`You pinned another doc.`, {
-            docPinned: [() => pin().length > trail, () => {
-                trail = pin().length;
-                return pinnedDoc3;
-            }],
+            docPinned: [
+                () => pin().length > trail,
+                () => {
+                    trail = pin().length;
+                    return pinnedDoc3;
+                },
+            ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
@@ -182,10 +204,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         });
 
         const pinnedDoc3 = InfoState(`You pinned yet another doc.`, {
-            docPinned: [() => pin().length > trail, () => {
-                trail = pin().length;
-                return pinnedDoc2;
-            }],
+            docPinned: [
+                () => pin().length > trail,
+                () => {
+                    trail = pin().length;
+                    return pinnedDoc2;
+                },
+            ],
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
@@ -203,14 +228,14 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         //     docCreated: [() => numDocs() == 4, () => completed],
         // });
 
-        const manualPresentationMode = InfoState('You\'re in manual presentation mode.', {
+        const manualPresentationMode = InfoState("You're in manual presentation mode.", {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
             docCreated: [() => numDocs() == 4, () => completed],
         });
 
-        const autoPresentationMode = InfoState('You\'re in auto presentation mode.', {
+        const autoPresentationMode = InfoState("You're in auto presentation mode.", {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             docRemoved: [() => numDocs() < 3, () => viewedLink],
@@ -225,6 +250,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     };
 
     render() {
-        return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />;
+        return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 88cdd51ff..1574deede 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1435,7 +1435,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return anchor;
     };
 
-    infoUI = () => (this.Document.annotationOn ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} />);
+    @observable _hideInfo = false;
+    @action closeInfo = () => (this._hideInfo = true);
+    infoUI = () => (this._hideInfo || this.Document.annotationOn ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
 
     componentDidMount() {
         this._props.setContentView?.(this);
@@ -1985,38 +1987,38 @@ ScriptingGlobals.add(function sendToBack(doc: Doc) {
 });
 ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
     SelectionManager.Views.forEach(view => {
-        if (!view.layoutDoc.schema_columnKeys){
-            view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date'])
+        if (!view.layoutDoc.schema_columnKeys) {
+            view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date']);
         }
-        const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key!="text");
+        const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text');
         if (!keys) return;
 
         const children = DocListCast(view.Document[Doc.LayoutFieldKey(view.Document)]);
         let csvRows = [];
         csvRows.push(keys.join(','));
-        for (let i=0; i < children.length; i++) {
+        for (let i = 0; i < children.length; i++) {
             let eachRow = [];
-            for (let j=0; j<keys.length; j++){
+            for (let j = 0; j < keys.length; j++) {
                 var cell = children[i][keys[j]];
-                if (cell && cell as string)  cell = cell.toString().replace(/\,/g, '');
+                if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
                 eachRow.push(cell);
             }
             csvRows.push(eachRow);
         }
         const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' });
-        const options = { x:0, y:-300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' };
+        const options = { x: 0, y: -300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' };
         const file = new File([blob], 'schemaTable', options);
         const loading = Docs.Create.LoadingDocument(file, options);
         loading.presentation_openInLightbox = true;
         DocUtils.uploadFileToDoc(file, {}, loading);
 
         if (view.ComponentView?.addDocument) {
-          //  loading.dataViz_fromSchema = true;
+            //  loading.dataViz_fromSchema = true;
             loading.dataViz_asSchema = view.layoutDoc;
             SchemaCSVPopUp.Instance.setView(view);
             SchemaCSVPopUp.Instance.setTarget(view.layoutDoc);
             SchemaCSVPopUp.Instance.setDataVizDoc(loading);
             SchemaCSVPopUp.Instance.setVisible(true);
         }
-    })
+    });
 });
-- 
cgit v1.2.3-70-g09d2