fixed : contextMenu . fixed some fitWidth issues for text where heights weren't working right

6 files changed, 33 insertions, 77 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ad6a4dd3c..fc73deb36 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -363,7 +363,7 @@ export namespace Docs {
                 layout: { view: FormattedTextBox, dataField: "text" },
                 options: {
                     _height: 35, _xMargin: 10, _yMargin: 10, nativeDimModifiable: true, nativeHeightUnfrozen: true, treeViewGrowsHorizontally: true,
-                    links: "@links(self)"
+                    forceReflow: true, links: "@links(self)"
                 }
             }],
             [DocumentType.SEARCH, {
@@ -400,7 +400,7 @@ export namespace Docs {
             }],
             [DocumentType.AUDIO, {
                 layout: { view: AudioBox, dataField: defaultDataKey },
-                options: { _height: 100, backgroundColor: "lightGray", links: "@links(self)" }
+                options: { _height: 100, backgroundColor: "lightGray", forceReflow: true, nativeDimModifiable: true, links: "@links(self)" }
             }],
             [DocumentType.REC, {
                 layout: { view: VideoBox, dataField: defaultDataKey },
@@ -412,7 +412,7 @@ export namespace Docs {
             }],
             [DocumentType.MAP, {
                 layout: { view: MapBox, dataField: defaultDataKey },
-                options: { _height: 600, _width: 800, links: "@links(self)" }
+                options: { _height: 600, _width: 800, nativeDimModifiable: true, links: "@links(self)" }
             }],
             [DocumentType.IMPORT, {
                 layout: { view: DirectoryImportBox, dataField: defaultDataKey },
@@ -450,11 +450,11 @@ export namespace Docs {
             }],
             [DocumentType.EQUATION, {
                 layout: { view: EquationBox, dataField: defaultDataKey },
-                options: { links: "@links(self)", hideResizeHandles: true, hideDecorationTitle: true }
+                options: { links: "@links(self)", nativeDimModifiable: true, hideResizeHandles: true, hideDecorationTitle: true }
             }],
             [DocumentType.FUNCPLOT, {
                 layout: { view: FunctionPlotBox, dataField: defaultDataKey },
-                options: { links: "@links(self)" }
+                options: { nativeDimModifiable: true, links: "@links(self)" }
             }],
             [DocumentType.BUTTON, {
                 layout: { view: LabelBox, dataField: "onClick" },
@@ -493,7 +493,7 @@ export namespace Docs {
             }],
             [DocumentType.COMPARISON, {
                 layout: { view: ComparisonBox, dataField: defaultDataKey },
-                options: { clipWidth: 50, backgroundColor: "gray", targetDropAction: "alias", links: "@links(self)" }
+                options: { clipWidth: 50, nativeDimModifiable: true, backgroundColor: "gray", targetDropAction: "alias", links: "@links(self)" }
             }],
             [DocumentType.GROUPDB, {
                 data: new List<Doc>(),
@@ -506,7 +506,7 @@ export namespace Docs {
             }],
             [DocumentType.DATAVIZ, {
                 layout: { view: DataVizBox, dataField: defaultDataKey },
-                options: { _fitWidth: true, _fitHeight: true, links: "@links(self)" }
+                options: { _fitWidth: true, nativeDimModifiable: true, links: "@links(self)" }
             }]
         ]);
 
@@ -530,15 +530,6 @@ export namespace Docs {
             const prototypeIds = Object.values(DocumentType).filter(type => type !== DocumentType.NONE).map(type => type + suffix);
             // fetch the actual prototype documents from the server
             const actualProtos = Docs.newAccount ? {} : await DocServer.GetRefFields(prototypeIds);
-            if (!Docs.newAccount) {
-                Cast(actualProtos[DocumentType.WEB + suffix], Doc, null).nativeHeightUnfrozen = true; // to avoid having to recreate the DB
-                Cast(actualProtos[DocumentType.PDF + suffix], Doc, null).nativeHeightUnfrozen = true;
-                Cast(actualProtos[DocumentType.RTF + suffix], Doc, null).nativeHeightUnfrozen = true;
-                Cast(actualProtos[DocumentType.WEB + suffix], Doc, null).nativeDimModifiable = true; // to avoid having to recreate the DB
-                Cast(actualProtos[DocumentType.PDF + suffix], Doc, null).nativeDimModifiable = true;
-                Cast(actualProtos[DocumentType.RTF + suffix], Doc, null).nativeDimModifiable = true;
-            }
-
             // update this object to include any default values: DocumentOptions for all prototypes
             prototypeIds.map(id => {
                 const existing = actualProtos[id] as Doc;
@@ -1273,8 +1264,8 @@ export namespace DocUtils {
             })) as ContextMenuProps[],
             icon: "sticky-note"
         });
-        const documentList: ContextMenuProps[] = DocListCast(DocListCast(CurrentUserUtils.MyTools?.data).lastElement()?.data).filter(btnDoc => !btnDoc.hidden).map(btnDoc => Cast(btnDoc?.dragFactory, Doc, null)).filter(doc => doc && doc !== Doc.UserDoc().emptyPresentation).map((dragDoc, i) => ({
-            description: ":" + StrCast(dragDoc.title),
+        const documentList: ContextMenuProps[] = DocListCast(DocListCast(CurrentUserUtils.MyTools?.data)[0]?.data).filter(btnDoc => !btnDoc.hidden).map(btnDoc => Cast(btnDoc?.dragFactory, Doc, null)).filter(doc => doc && doc !== Doc.UserDoc().emptyPresentation).map((dragDoc, i) => ({
+            description: ":" + StrCast(dragDoc.title).replace("Untitled ",""),
             event: undoBatch((args: { x: number, y: number }) => {
                 const newDoc = Doc.copyDragFactory(dragDoc);
                 if (newDoc) {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b9724051a..28d20c56b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -282,13 +282,13 @@ export class CurrentUserUtils {
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _autoHeight: true }},
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100 }},
-            {key: "Equation",   creator: opts => Docs.Create.EquationDocument(opts),        opts: { _width: 300, _height: 35, _backgroundGridShow: true, }},
+            {key: "Equation",   creator: opts => Docs.Create.EquationDocument(opts),        opts: { _width: 300, _height: 35, _fitWidth:false, _backgroundGridShow: true, }},
             {key: "Webpage",    creator: opts => Docs.Create.WebDocument("",opts),          opts: { _width: 400, _height: 512, _nativeWidth: 850, useCors: true, }},
             {key: "Comparison", creator: Docs.Create.ComparisonDocument,                    opts: { _width: 300, _height: 300 }},
             {key: "Audio",      creator: opts => Docs.Create.AudioDocument(nullAudio, opts),opts: { _width: 200, _height: 100, }},
             {key: "Map",        creator: opts => Docs.Create.MapDocument([], opts),         opts: { _width: 800, _height: 600, _showSidebar: true,  }},
             {key: "Screengrab", creator: Docs.Create.ScreenshotDocument,                    opts: { _width: 400, _height: 200 }},
-            {key: "WebCam",     creator: opts => Docs.Create.WebCamDocument("", opts),      opts: { _width: 400, _height: 200, title: "recording", recording:true, system: true, cloneFieldFilter: new List<string>(["system"]) }},
+            {key: "WebCam",     creator: opts => Docs.Create.WebCamDocument("", opts),      opts: { _width: 400, _height: 200, recording:true, system: true, cloneFieldFilter: new List<string>(["system"]) }},
             {key: "Button",     creator: Docs.Create.ButtonDocument,                        opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, }},
             {key: "Script",     creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }},
             {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument(opts),         opts: { _width: 300, _height: 300 }},
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index e2f98de1e..9034cacb2 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,10 +1,10 @@
 import React = require("react");
-import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
-import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, IReactionDisposer, observable } from "mobx";
 import { observer } from "mobx-react";
 import "./ContextMenu.scss";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Measure from "react-measure";
+import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
+import { Utils } from "../../Utils";
 
 @observer
 export class ContextMenu extends React.Component {
@@ -116,10 +116,6 @@ export class ContextMenu extends React.Component {
         this._defaultItem = item;
     }
 
-    getItems() {
-        return this._items;
-    }
-
     static readonly buffer = 20;
     get pageX() {
         const x = this._pageX;
@@ -199,37 +195,25 @@ export class ContextMenu extends React.Component {
 
             return eles;
         };
-        return flattenItems(this._items, name => [name]);
+        return flattenItems(this._items.slice(), name => [name]);
     }
 
     @computed get flatItems(): OriginalMenuProps[] {
         return this.filteredItems.filter(item => !Array.isArray(item)) as OriginalMenuProps[];
     }
 
-    @computed get filteredViews() {
-        const createGroupHeader = (contents: any) => {
-            return (
-                <div className="contextMenu-group">
-                    <div className="contextMenu-description">{contents}</div>
-                </div>
-            );
-        };
-        const createItem = (item: ContextMenuProps, selected: boolean) => <ContextMenuItem {...item} key={item.description} closeMenu={this.closeMenu} selected={selected} />;
-        let itemIndex = 0;
-        return this.filteredItems.map(value => {
-            if (Array.isArray(value)) {
-                return createGroupHeader(value.join(" -> "));
-            } else {
-                return createItem(value, itemIndex++ === this.selectedIndex);
-            }
-        });
-    }
-
     @computed get menuItems() {
         if (!this._searchString) {
             return this._items.map((item, ind) => <ContextMenuItem {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} key={ind + item.description} closeMenu={this.closeMenu} />);
         }
-        return this.filteredViews;
+        return this.filteredItems.map((value, index) => 
+            Array.isArray(value)  ?
+                <div className="contextMenu-group">
+                    <div className="contextMenu-description">{value.join(" -> ")}</div>
+                </div>
+                :
+                <ContextMenuItem {...value} key={index+value.description} closeMenu={this.closeMenu} selected={index === this.selectedIndex} />
+        );
     }
 
     @computed get itemsNeedSearch() {
@@ -237,14 +221,8 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
-        if (!this._display) {
-            return null;
-        }
-        const style = this._yRelativeToTop ? { left: this.pageX, top: this.pageY } :
-            { left: this.pageX, bottom: this.pageY };
-
-        const contents = (
-            <>
+        return !this._display ? (null) : 
+            <div className="contextMenu-cont" style={{left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY })}}>
                 {!this.itemsNeedSearch ? (null) :
                     <span className={"search-icon"}>
                         <span className="icon-background">
@@ -253,17 +231,7 @@ export class ContextMenu extends React.Component {
                         <input className="contextMenu-item contextMenu-description search" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
                     </span>}
                 {this.menuItems}
-            </>
-        );
-        return (
-            <Measure offset onResize={action((r: any) => { this._width = r.offset.width; this._height = r.offset.height; })}>
-                {({ measureRef }) => (
-                    <div className="contextMenu-cont" style={style} ref={measureRef}>
-                        {contents}
-                    </div>
-                )}
-            </Measure>
-        );
+            </div>;
     }
 
     @action
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 25d00f701..c136de1c3 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -28,11 +28,10 @@ export type ContextMenuProps = OriginalMenuProps | SubmenuProps;
 export class ContextMenuItem extends React.Component<ContextMenuProps & { selected?: boolean }> {
     @observable private _items: Array<ContextMenuProps> = [];
     @observable private overItem = false;
-    @observable private subRef = React.createRef<HTMLDivElement>();
 
-    constructor(props: ContextMenuProps | SubmenuProps) {
-        super(props);
-        if ((this.props as SubmenuProps).subitems) {
+    componentDidMount() {
+        this._items.length = 0;
+        if ((this.props as SubmenuProps)?.subitems) {
             (this.props as SubmenuProps).subitems?.forEach(i => this._items.push(i));
         }
     }
@@ -78,9 +77,6 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
     }
 
     render() {
-
-
-
         if ("event" in this.props) {
             return (
                 <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onPointerDown={this.handleEvent}>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5d2adc321..8d4fd376f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1251,7 +1251,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed get Xshift() { return this.effectiveNativeWidth ? (this.props.PanelWidth() - this.effectiveNativeWidth * this.nativeScaling) / 2 : 0; }
     @computed get Yshift() { return this.effectiveNativeWidth && this.effectiveNativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.effectiveNativeHeight * this.nativeScaling) / 2 : 0; }
     @computed get centeringX() { return this.props.dontCenter?.includes("x") ? 0 : this.Xshift; }
-    @computed get centeringY() { return this.fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
+    @computed get centeringY() { return this.props.dontCenter?.includes("y") ? 0 : this.Yshift; }
 
     toggleNativeDimensions = () => this.docView && Doc.toggleNativeDimensions(this.layoutDoc, this.docView.ContentScale, this.props.PanelWidth(), this.props.PanelHeight());
     focus = (doc: Doc, options?: DocFocusOptions) => this.docView?.focus(doc, options);
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 600730d87..d3dee3c89 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -862,6 +862,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         if (nh) this.layoutDoc._nativeHeight = scrollHeight;
     }
 
+    @computed get contentScaling() { return Doc.NativeAspect(this.rootDoc, this.dataDoc, false) ? this.props.scaling?.() || 1 : 1;}
     componentDidMount() {
         !this.props.dontSelectOnLoad && this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
         this._cachedLinks = DocListCast(this.Document.links);
@@ -875,7 +876,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         this._disposers.componentHeights = reaction(  // set the document height when one of the component heights changes and autoHeight is on
             () => ({ sidebarHeight: this.sidebarHeight, textHeight: this.textHeight, autoHeight: this.autoHeight, marginsHeight: this.autoHeightMargins }),
             ({ sidebarHeight, textHeight, autoHeight, marginsHeight }) => {
-                autoHeight && this.props.setHeight?.((this.props.scaling?.() || 1) * (marginsHeight + Math.max(sidebarHeight, textHeight)));
+                autoHeight && this.props.setHeight?.(this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight)));
             }, { fireImmediately: true });
         this._disposers.links = reaction(() => DocListCast(this.dataDoc.links), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
             newLinks => {