merging

1 files changed, 100 insertions, 98 deletions

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index f5eb534aa..37600fa4d 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -27,6 +27,8 @@ import { TreeView } from "./TreeView";
 import React = require("react");
 
 export type collectionTreeViewProps = {
+    treeViewExpandedView?: "fields" | "layout" | "links" | "data";
+    treeViewOpen?: boolean;
     treeViewHideTitle?: boolean;
     treeViewHideHeaderFields?: boolean;
     treeViewSkipFields?: string[]; // prevents specific fields from being displayed (see LinkBox)
@@ -38,12 +40,19 @@ export type collectionTreeViewProps = {
 export class
     CollectionTreeView extends CollectionSubView<Document, Partial<collectionTreeViewProps>>(Document) {
     private treedropDisposer?: DragManager.DragDropDisposer;
-    private _isChildActive = false;
     private _mainEle?: HTMLDivElement;
-    public _uniqueId = Utils.GenerateGuid();
-
-    @computed get doc() { TraceMobx(); return this.props.Document; }
+    MainEle = () => this._mainEle;
+    @computed get doc() { return this.props.Document; }
     @computed get dataDoc() { return this.props.DataDoc || this.doc; }
+    @computed get treeViewtruncateTitleWidth() { return NumCast(this.doc.treeViewTruncateTitleWidth, this.panelWidth()); }
+    @computed get treeChildren() { return this.props.childDocuments || this.childDocs; }
+    @computed get outlineMode() { return this.doc.treeViewType === "outline"; }
+    @computed get fileSysMode() { return this.doc.treeViewType === "fileSystem"; }
+
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.treedropDisposer?.();
+    }
 
     protected createTreeDropTarget = (ele: HTMLDivElement) => {
         this.treedropDisposer?.();
@@ -53,19 +62,13 @@ export class
     protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent, targetAction: dropActionType) => {
         const dragData = de.complete.docDragData;
         if (dragData) {
-            if (targetAction && !dragData.draggedDocuments.some(d => d.context === this.doc && this.childDocs.includes(d))) {
-                dragData.dropAction = targetAction;
-            } else dragData.dropAction = this.doc === dragData?.treeViewDoc ? "same" : dragData.dropAction;
+            const isInTree = () => dragData.draggedDocuments.some(d => d.context === this.doc && this.childDocs.includes(d));
+            dragData.dropAction = targetAction && !isInTree() ? targetAction : this.doc === dragData?.treeViewDoc ? "same" : dragData.dropAction;
         }
     }
 
-    componentWillUnmount() {
-        super.componentWillUnmount();
-        this.treedropDisposer?.();
-    }
-
-    @undoBatch
-    remove = action((doc: Doc | Doc[]): boolean => {
+    @action
+    remove = (doc: Doc | Doc[]): boolean => {
         const docs = doc instanceof Doc ? [doc] : doc;
         const targetDataDoc = this.doc[DataSym];
         const value = DocListCast(targetDataDoc[this.props.fieldKey]);
@@ -83,27 +86,24 @@ export class
             return true;
         }
         return false;
-    });
+    }
+
     @action
-    addDoc = (doc: Doc | Doc[], relativeTo: Opt<Doc>, before?: boolean): boolean => {
+    addDoc = (docs: Doc | Doc[], relativeTo: Opt<Doc>, before?: boolean): boolean => {
         const doAddDoc = (doc: Doc | Doc[]) =>
-            (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) =>
-                flg && Doc.AddDocToList(this.doc[DataSym], this.props.fieldKey, doc, relativeTo, before, false, false, false), true);
-        if (this.doc.resolvedDataDoc instanceof Promise) {
-            this.doc.resolvedDataDoc.then((resolved: any) => doAddDoc(doc));
-        } else if (relativeTo === undefined) {
-            this.props.addDocument?.(doc);
-        } else {
-            doAddDoc(doc);
-            (doc instanceof Doc ? [doc] : doc).forEach(d => d.context = this.props.Document);
-        }
-        return true;
+            (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => {
+                const res = flg && Doc.AddDocToList(this.doc[DataSym], this.props.fieldKey, doc, relativeTo, before);
+                res && (doc.context = this.props.Document);
+                return res;
+            }, true);
+        if (this.doc.resolvedDataDoc instanceof Promise) return false;
+        return relativeTo === undefined ? this.props.addDocument?.(docs) || false : doAddDoc(docs);
     }
     onContextMenu = (e: React.MouseEvent): void => {
         // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
         if (!Doc.UserDoc().noviceMode) {
             const layoutItems: ContextMenuProps[] = [];
-            layoutItems.push({ description: (this.doc.treeViewPreventOpen ? "Persist" : "Abandon") + "Treeview State", event: () => this.doc.treeViewPreventOpen = !this.doc.treeViewPreventOpen, icon: "paint-brush" });
+            layoutItems.push({ description: "Make tree state " + (this.doc.treeViewOpenIsTransient ? "persistent" : "transient"), event: () => this.doc.treeViewOpenIsTransient = !this.doc.treeViewOpenIsTransient, icon: "paint-brush" });
             layoutItems.push({ description: (this.doc.treeViewHideHeaderFields ? "Show" : "Hide") + " Header Fields", event: () => this.doc.treeViewHideHeaderFields = !this.doc.treeViewHideHeaderFields, icon: "paint-brush" });
             layoutItems.push({ description: (this.doc.treeViewHideTitle ? "Show" : "Hide") + " Title", event: () => this.doc.treeViewHideTitle = !this.doc.treeViewHideTitle, icon: "paint-brush" });
             ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "eye" });
@@ -113,50 +113,30 @@ export class
             !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "mouse-pointer" });
         }
     }
-    outerXf = () => Utils.GetScreenTransform(this._mainEle!);
     onTreeDrop = (e: React.DragEvent) => this.onExternalDrop(e, {});
 
-    @computed get renderClearButton() {
-        return !this.doc.allowClear ? (null) : <div key="toolbar">
-            <button className="toolbar-button round-button" title="Empty" onClick={undoBatch(action(() => Doc.GetProto(this.doc)[this.props.fieldKey] = undefined))}>
-                <FontAwesomeIcon icon={"trash"} size="sm" />
-            </button>
-        </div >;
-    }
-
     @undoBatch
-    makeTextCollection = action((childDocs: Doc[]) => {
-        Doc.SetInPlace(this.doc, "editTitle", undefined, false);
-        const bullet = TreeView.makeTextBullet();
-        bullet.context = this.doc;
-        this.addDoc(bullet, childDocs.length ? childDocs[0] : undefined, true);
-    });
+    makeTextCollection = (childDocs: Doc[]) => {
+        this.addDoc(TreeView.makeTextBullet(), childDocs.length ? childDocs[0] : undefined, true);
+    }
 
     editableTitle = (childDocs: Doc[]) => {
-        return !this.dataDoc ? (null) : <EditableView
-            contents={this.dataDoc.title}
-            editing={false}
-            display={"block"}
-            maxHeight={72}
-            height={"auto"}
-            GetValue={() => StrCast(this.dataDoc.title)}
-            SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => {
-                if (enter) {
-                    switch (this.props.Document.treeViewType) {
-                        case "outline": this.makeTextCollection(childDocs); break;
-                        case "fileSystem": break;
-                    }
-                }
-                return Doc.SetInPlace(this.dataDoc, "title", value, false);
-            })} />;
+        return !this.dataDoc ? (null) :
+            <EditableView
+                contents={this.dataDoc.title}
+                display={"block"}
+                maxHeight={72}
+                height={"auto"}
+                GetValue={() => StrCast(this.dataDoc.title)}
+                SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => {
+                    if (enter && this.props.Document.treeViewType === "outline") this.makeTextCollection(childDocs);
+                    this.dataDoc.title = value;
+                    return true;
+                })} />;
     }
 
-
-    rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.props.PanelWidth() - 20);
-    rtfOutlineHeight = () => Math.min(this.layoutDoc?.[HeightSym](), (StrCast(this.layoutDoc?._fontSize) ? Number(StrCast(this.layoutDoc?._fontSize, "32px").replace("px", "")) : NumCast(this.layoutDoc?._fontSize)) * 2);
-    titleTransform = () => this.props.ScreenToLocalTransform().translate(-NumCast(this.doc._xPadding, 10), -NumCast(this.doc._yPadding, 20));
     documentTitle = (childDocs: Doc[]) => {
-        return <div style={{ display: "inline-block", width: "100%", height: this.rtfOutlineHeight() }} key={this.doc[Id]}
+        return <div style={{ display: "inline-block", width: "100%", height: this.documentTitleHeight() }} key={this.doc[Id]}
             onKeyDown={e => {
                 e.stopPropagation();
                 e.key === "Enter" && this.makeTextCollection(childDocs);
@@ -166,15 +146,15 @@ export class
                 DataDoc={undefined}
                 LayoutTemplateString={FormattedTextBox.LayoutString("text")}
                 renderDepth={this.props.renderDepth + 1}
+                isContentActive={this.isContentActive}
                 rootSelected={returnTrue}
-                //dontRegisterView={true}
                 docViewPath={this.props.docViewPath}
                 styleProvider={this.props.styleProvider}
                 layerProvider={this.props.layerProvider}
-                PanelWidth={this.rtfWidth}
-                PanelHeight={this.rtfOutlineHeight}
-                NativeWidth={this.rtfWidth}
-                NativeHeight={this.rtfOutlineHeight}
+                PanelWidth={this.documentTitleWidth}
+                PanelHeight={this.documentTitleHeight}
+                NativeWidth={this.documentTitleWidth}
+                NativeHeight={this.documentTitleHeight}
                 focus={this.props.focus}
                 ScreenToLocalTransform={this.titleTransform}
                 docFilters={returnEmptyFilter}
@@ -185,54 +165,77 @@ export class
                 addDocument={this.props.addDocument}
                 moveDocument={returnFalse}
                 removeDocument={returnFalse}
-                parentActive={this.props.active}
-                whenActiveChanged={this.props.whenActiveChanged}
+                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
                 addDocTab={this.props.addDocTab}
                 pinToPres={this.props.pinToPres}
                 bringToFront={returnFalse}
             />
         </div>;
     }
-    @computed get treeViewtruncateTitleWidth() { return NumCast(this.doc.treeViewTruncateTitleWidth, this.panelWidth()); }
-    truncateTitleWidth = () => this.treeViewtruncateTitleWidth;
-    @computed get outlineMode() { return this.doc.treeViewType === "outline"; }
-    @computed get fileSysMode() { return this.doc.treeViewType === "fileSystem"; }
-    onChildClick = () => this.props.onChildClick?.() || ScriptCast(this.doc.onChildClick);
-    whenActiveChanged = (isActive: boolean) => { this.props.whenActiveChanged(this._isChildActive = isActive); };
-    active = (outsideReaction: boolean | undefined) => this.props.active(outsideReaction) || this._isChildActive;
-    panelWidth = () => this.props.PanelWidth() - 20; // bcz: 20 is the 10 + 10 for the left and right padding.
-    @computed get treeChildren() {
-        TraceMobx();
-        return this.props.childDocuments || this.childDocs;
-    }
     @computed get treeViewElements() {
         TraceMobx();
         const dropAction = StrCast(this.doc.childDropAction) as dropActionType;
         const addDoc = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => this.addDoc(doc, relativeTo, before);
         const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument?.(d, target, addDoc) || false;
-        return TreeView.GetChildElements(this.treeChildren, this, this.doc, this.props.DataDoc, this.props.fieldKey, this.props.ContainingCollectionDoc, undefined, addDoc, this.remove,
-            moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.styleProvider, returnTrue, this.props.ScreenToLocalTransform,
-            this.outerXf, this.active, this.panelWidth, this.props.renderDepth, () => this.props.treeViewHideHeaderFields || BoolCast(this.doc.treeViewHideHeaderFields),
-            BoolCast(this.doc.treeViewPreventOpen), [], this.props.onCheckedClick,
-            this.onChildClick, this.props.treeViewSkipFields, true, this.whenActiveChanged, this.props.dontRegisterView || Cast(this.props.Document.childDontRegisterViews, "boolean", null), this);
+        return TreeView.GetChildElements(
+            this.treeChildren,
+            this,
+            this,
+            this.doc,
+            this.props.DataDoc,
+            this.props.ContainingCollectionDoc,
+            undefined,
+            addDoc,
+            this.remove,
+            moveDoc,
+            dropAction,
+            this.props.addDocTab,
+            this.props.styleProvider,
+            this.props.ScreenToLocalTransform,
+            this.props.isContentActive,
+            this.panelWidth,
+            this.props.renderDepth,
+            () => this.props.treeViewHideHeaderFields || BoolCast(this.doc.treeViewHideHeaderFields),
+            [],
+            this.props.onCheckedClick,
+            this.onChildClick,
+            this.props.treeViewSkipFields,
+            true,
+            this.props.whenChildContentsActiveChanged,
+            this.props.dontRegisterView || Cast(this.props.Document.childDontRegisterViews, "boolean", null));
     }
     @computed get titleBar() {
         const hideTitle = this.props.treeViewHideTitle || this.doc.treeViewHideTitle;
         return hideTitle ? (null) : (this.doc.treeViewType === "outline" ? this.documentTitle : this.editableTitle)(this.treeChildren);
     }
+
+    @computed get renderClearButton() {
+        return !this.doc.treeViewShowClearButton ? (null) : <div key="toolbar">
+            <button className="toolbar-button round-button" title="Empty" onClick={undoBatch(action(() => Doc.GetProto(this.doc)[this.props.fieldKey] = undefined))}>
+                <FontAwesomeIcon icon={"trash"} size="sm" />
+            </button>
+        </div >;
+    }
+
+    paddingX = () => NumCast(this.doc._xPadding, 15);
+    documentTitleWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.panelWidth());
+    documentTitleHeight = () => Math.min(this.layoutDoc?.[HeightSym](), (StrCast(this.layoutDoc?._fontSize) ? Number(StrCast(this.layoutDoc?._fontSize, "32px").replace("px", "")) : NumCast(this.layoutDoc?._fontSize)) * 2);
+    titleTransform = () => this.props.ScreenToLocalTransform().translate(-NumCast(this.doc._xPadding, 10), -NumCast(this.doc._yPadding, 20));
+    truncateTitleWidth = () => this.treeViewtruncateTitleWidth;
+    onChildClick = () => this.props.onChildClick?.() || ScriptCast(this.doc.onChildClick);
+    panelWidth = () => this.props.PanelWidth() - 2 * this.paddingX();
+    isContentActive = () => this.props.isContentActive() || this.props.isSelected();
     render() {
         TraceMobx();
-        if (!(this.doc instanceof Doc)) return (null);
-        const background = this.props.treeViewHideTitle && this.props.treeViewHideHeaderFields ? "#9F9F9F" : this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
-        const paddingX = `${NumCast(this.doc._xPadding, 15)}px`;
-        const paddingTop = `${NumCast(this.doc._yPadding, 20)}px`;
-        const pointerEvents = !this.props.active() && !SnappingManager.GetIsDragging() && !this._isChildActive ? "none" : undefined;
+        const background = () => this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
+        const paddingTop = () => `${NumCast(this.doc._yPadding, 20)}px`;
+        const pointerEvents = () => !this.props.isContentActive() && !SnappingManager.GetIsDragging() ? "none" : undefined;
 
-        return !this.treeChildren ? (null) : (
+        return !(this.doc instanceof Doc) || !this.treeChildren ? (null) :
             <div className="collectionTreeView-container" onContextMenu={this.onContextMenu}>
                 <div className="collectionTreeView-dropTarget"
-                    style={{ background, paddingLeft: paddingX, paddingRight: paddingX, paddingTop, pointerEvents }}
-                    onWheel={(e) => this._mainEle && this._mainEle.scrollHeight > this._mainEle.clientHeight && e.stopPropagation()}
+                    style={{ background: background(), paddingLeft: `${this.paddingX()}px`, paddingRight: `${this.paddingX()}px`, paddingTop: paddingTop(), pointerEvents: pointerEvents() }}
+                    onWheel={e => e.stopPropagation()}
                     onDrop={this.onTreeDrop}
                     ref={this.createTreeDropTarget}>
                     {this.titleBar}
@@ -241,7 +244,6 @@ export class
                         {this.treeViewElements}
                     </ul>
                 </div >
-            </div>
-        );
+            </div>;
     }
 }
\ No newline at end of file