From e3709b4445732791f696cdf26274ab09294ce208 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 27 Jan 2024 04:21:08 -0500
Subject: made dataViz nodes linked to schema nodes update automatically as
 cahnges are made.  fixed user created templates from disappearing from menu,
 and made them work.  added toJavascriptString and made DashField views
 convert to text.  added support for turning text into javascript rendering
 (paint) code.

---
 .../collectionFreeForm/CollectionFreeFormView.scss | 48 +++++++++++-----------
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 21 +++++++++-
 2 files changed, 44 insertions(+), 25 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 7d3acaea7..9e7d364ea 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -176,6 +176,11 @@
     // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions.
     touch-action: none;
     transform-origin: top left;
+    > svg {
+        height: 100%;
+        width: 100%;
+        margin: auto;
+    }
 
     .collectionfreeformview-placeholder {
         background: gray;
@@ -270,34 +275,31 @@
     padding: 10px;
 
     .msg {
-      position: relative;
-      // display: block;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-      
+        position: relative;
+        // display: block;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        user-select: none;
     }
-    
+
     .gif-container {
-      position: relative;
-      margin-top: 5px;
-      // display: block;
-
-      justify-content: center;
-      align-items: center;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-
-      
+        position: relative;
+        margin-top: 5px;
+        // display: block;
+
+        justify-content: center;
+        align-items: center;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+
         .gif {
             background-color: transparent;
             height: 300px;
         }
     }
-
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 53dc389b4..be19fc50f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -39,7 +39,7 @@ import { LightboxView } from '../../LightboxView';
 import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView';
 import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
 import { DocumentView, OpenWhere } from '../../nodes/DocumentView';
-import { FocusViewOptions, FieldViewProps } from '../../nodes/FieldView';
+import { FieldViewProps, FocusViewOptions } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { PinProps, PresBox } from '../../nodes/trails/PresBox';
 import { CreateImage } from '../../nodes/WebBoxRenderer';
@@ -73,6 +73,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return 'CollectionFreeFormView(' + this.Document.title?.toString() + ')';
     } // this makes mobx trace() statements more descriptive
 
+    @observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, '');
+    @computed get paintFunc() {
+        const paintFunc = StrCast(this.Document[DocData].paintFunc).trim();
+        return !paintFunc
+            ? ''
+            : `const dashDiv = document.querySelector('#${this._paintedId}'); 
+        (async () => {  ${paintFunc} })()`;
+    }
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -1227,6 +1235,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 onKey={this.onKeyDown}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
                 onBrowseClickScript={this.onBrowseClickHandler}
+                bringToFront={this.bringToFront}
                 ScreenToLocalTransform={childLayout.z ? this.ScreenToLocalBoxXf : this.ScreenToContentsXf}
                 PanelWidth={childLayout[Width]}
                 PanelHeight={childLayout[Height]}
@@ -1482,6 +1491,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 );
             })
         );
+
+        this._disposers.paintFunc = reaction(
+            () => ({ code: this.paintFunc, first: this._firstRender, width: this.Document._width, height: this.Document._height }),
+            ({ code, first }) => code && !first && eval(code),
+            { fireImmediately: true }
+        );
+
         this._disposers.layoutElements = reaction(
             // layoutElements can't be a computed value because doLayoutComputation() is an action that has side effect of updating clusters
             () => this.doInternalLayoutComputation,
@@ -1847,6 +1863,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return (
             <div
                 className="collectionfreeformview-container"
+                id={this._paintedId}
                 ref={r => {
                     this.createDashEventsTarget(r);
                     this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
@@ -1868,7 +1885,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     width: `${100 / (this.nativeDimScaling || 1)}%`,
                     height: this._props.getScrollHeight?.() ?? `${100 / (this.nativeDimScaling || 1)}%`,
                 }}>
-                {this._lightboxDoc ? (
+                {this.paintFunc ? null : this._lightboxDoc ? (
                     <div style={{ padding: 15, width: '100%', height: '100%' }}>
                         <DocumentView
                             {...this._props}
-- 
cgit v1.2.3-70-g09d2