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.

1 files changed, 19 insertions, 19 deletions

diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 3c9d821a9..b2076e1a5 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -38,16 +38,16 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
 
     componentDidMount() {
         runInAction(() => (this._items.length = 0));
-        if ((this.props as SubmenuProps)?.subitems) {
-            (this.props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i)));
+        if ((this._props as SubmenuProps)?.subitems) {
+            (this._props as SubmenuProps).subitems?.forEach(i => runInAction(() => this._items.push(i)));
         }
     }
 
     handleEvent = async (e: React.MouseEvent<HTMLDivElement>) => {
-        if ('event' in this.props) {
-            this.props.closeMenu?.();
-            const batch = this.props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this.props.description}`) : undefined;
-            await this.props.event({ x: e.clientX, y: e.clientY });
+        if ('event' in this._props) {
+            this._props.closeMenu?.();
+            const batch = this._props.undoable !== false ? UndoManager.StartBatch(`Click Menu item: ${this._props.description}`) : undefined;
+            await this._props.event({ x: e.clientX, y: e.clientY });
             batch?.end();
         }
     };
@@ -91,11 +91,11 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
     }
 
     render() {
-        if ('event' in this.props) {
+        if ('event' in this._props) {
             return (
-                <div className={'contextMenu-item' + (this.props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}>
-                    {this.props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this.props.icon) ? this.props.icon : <FontAwesomeIcon icon={this.props.icon} size="sm" />}</span> : null}
-                    <div className="contextMenu-description">{this.props.description.replace(':', '')}</div>
+                <div className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}>
+                    {this._props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this._props.icon) ? this._props.icon : <FontAwesomeIcon icon={this._props.icon} size="sm" />}</span> : null}
+                    <div className="contextMenu-description">{this._props.description.replace(':', '')}</div>
                     <div
                         className={`contextMenu-item-background`}
                         style={{
@@ -104,7 +104,7 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                     />
                 </div>
             );
-        } else if ('subitems' in this.props) {
+        } else if ('subitems' in this._props) {
             const where = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? 'flex-start' : this._overPosY > (window.innerHeight * 2) / 3 ? 'flex-end' : 'center';
             const marginTop = !this.overItem ? '' : this._overPosY < window.innerHeight / 3 ? '20px' : this._overPosY > (window.innerHeight * 2) / 3 ? '-20px' : '';
 
@@ -118,32 +118,32 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
                         background: SettingsManager.userBackgroundColor,
                     }}>
                     {this._items.map(prop => (
-                        <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
+                        <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />
                     ))}
                 </div>
             );
-            if (!(this.props as SubmenuProps).noexpand) {
+            if (!(this._props as SubmenuProps).noexpand) {
                 return (
                     <div className="contextMenu-inlineMenu">
                         {this._items.map(prop => (
-                            <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
+                            <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />
                         ))}
                     </div>
                 );
             }
             return (
                 <div
-                    className={'contextMenu-item' + (this.props.selected ? ' contextMenu-itemSelected' : '')}
-                    style={{ alignItems: where, borderTop: this.props.addDivider ? 'solid 1px' : undefined }}
+                    className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')}
+                    style={{ alignItems: where, borderTop: this._props.addDivider ? 'solid 1px' : undefined }}
                     onMouseLeave={this.onPointerLeave}
                     onMouseEnter={this.onPointerEnter}>
-                    {this.props.icon ? (
+                    {this._props.icon ? (
                         <span className="contextMenu-item-icon-background" onMouseEnter={this.onPointerLeave} style={{ alignItems: 'center', alignSelf: 'center' }}>
-                            <FontAwesomeIcon icon={this.props.icon} size="sm" />
+                            <FontAwesomeIcon icon={this._props.icon} size="sm" />
                         </span>
                     ) : null}
                     <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} style={{ alignItems: 'center', alignSelf: 'center' }}>
-                        {this.props.description}
+                        {this._props.description}
                         <FontAwesomeIcon icon={'angle-right'} size="lg" style={{ position: 'absolute', right: '10px' }} />
                     </div>
                     <div