From 613c2c8de636927fb38a7a32ec6b0427b238db2b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 21 Jan 2020 21:33:42 -0500
Subject: added filter resizer for pivot viewer.  fixed click/drag confusion
 with mainview divider.

---
 .../views/collections/CollectionPivotView.tsx      | 90 +++++++++++++---------
 1 file changed, 54 insertions(+), 36 deletions(-)

(limited to 'src/client/views/collections/CollectionPivotView.tsx')

diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx
index f31f1aba6..8e712e370 100644
--- a/src/client/views/collections/CollectionPivotView.tsx
+++ b/src/client/views/collections/CollectionPivotView.tsx
@@ -65,7 +65,7 @@ export class CollectionPivotView extends CollectionSubView(doc => doc) {
         return Doc.fieldExtensionDoc(this.props.DataDoc || this.props.Document, this.props.fieldKey);
     }
 
-    bodyPanelWidth = () => this.props.PanelWidth() - 200;
+    bodyPanelWidth = () => this.props.PanelWidth() - this._facetWidth;
     getTransform = () => this.props.ScreenToLocalTransform().translate(-200, 0);
 
     @computed get _allFacets() {
@@ -78,39 +78,53 @@ export class CollectionPivotView extends CollectionSubView(doc => doc) {
      * Responds to clicking the check box in the flyout menu
      */
     facetClick = (facetHeader: string) => {
-        const { Document, fieldKey } = this.props;
-        const facetCollection = Document.facetCollection;
+        const facetCollection = this.props.Document.facetCollection;
         if (facetCollection instanceof Doc) {
             const found = DocListCast(facetCollection.data).findIndex(doc => doc.title === facetHeader);
             if (found !== -1) {
-                //Doc.RemoveDocFromList(facetCollection, "data", DocListCast(facetCollection.data)[found]);
                 (facetCollection.data as List<Doc>).splice(found, 1);
             } else {
                 const newFacet = Docs.Create.FreeformDocument([], { title: facetHeader, treeViewOpen: true, isFacetFilter: true });
+                const capturedVariables = { layoutDoc: this.props.Document, dataDoc: this.dataDoc };
+                const params = { layoutDoc: Doc.name, dataDoc: Doc.name, };
+                newFacet.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, dataDoc, "${this.props.fieldKey}", "${facetHeader}")`, params, capturedVariables);
                 Doc.AddDocToList(facetCollection, "data", newFacet);
-                const { dataDoc } = this;
-                const capturedVariables = {
-                    layoutDoc: Document,
-                    dataDoc,
-                    dataKey: fieldKey,
-                    facetHeader
-                };
-                const params = {
-                    layoutDoc: Doc.name,
-                    dataDoc: Doc.name,
-                    dataKey: "string",
-                    facetHeader: "string"
-                };
-                newFacet.container = dataDoc;
-                newFacet.data = ComputedField.MakeFunction("readFacetData(layoutDoc, dataDoc, dataKey, facetHeader)", params, capturedVariables);
             }
         }
     }
+    _canClick = false;
+    _facetWidthOnDown = 0;
+    @observable _facetWidth = 200;
+    onPointerDown = (e: React.PointerEvent) => {
+        this._canClick = true;
+        this._facetWidthOnDown = e.screenX;
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+
+    @action
+    onPointerMove = (e: PointerEvent) => {
+        this._facetWidth = Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0);
+        Math.abs(e.movementX) > 6 && (this._canClick = false);
+    }
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        if (Math.abs(e.screenX - this._facetWidthOnDown) < 6 && this._canClick) {
+            this._facetWidth = this._facetWidth < 15 ? 200 : 0;
+        }
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
 
     render() {
         const facetCollection = Cast(this.props.Document?.facetCollection, Doc, null);
         const flyout = (
-            <div className="collectionPivotView-flyout" title=" ">
+            <div className="collectionPivotView-flyout" style={{ width: `${this._facetWidth}` }}>
                 {this._allFacets.map(facet => <label className="collectionPivotView-flyout-item" onClick={e => this.facetClick(facet)}>
                     <input type="checkbox" checked={this.props.Document.facetCollection instanceof Doc && DocListCast(this.props.Document.facetCollection.data).some(d => {
                         return d.title === facet;
@@ -120,23 +134,27 @@ export class CollectionPivotView extends CollectionSubView(doc => doc) {
                 </label>)}
             </div>
         );
-        return !facetCollection ? (null) : <div className="collectionPivotView">
-            <div className="collectionPivotView-treeView">
-                <div className="collectionPivotView-addFacet" onPointerDown={e => e.stopPropagation()}>
-                    <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
-                        <div className="collectionPivotView-button">
-                            <span className="collectionPivotView-span">Facet Filters</span>
-                            <FontAwesomeIcon icon={faEdit} size={"lg"} />
-                        </div>
-                    </Flyout>
+        return !facetCollection ? (null) :
+            <div className="collectionPivotView">
+                <div className="collectionPivotView-dragger" onPointerDown={this.onPointerDown} style={{ transform: `translate(${this._facetWidth}px, 0px)` }} >
+                    <span title="library View Dragger" style={{ width: "5px", position: "absolute", top: "0" }} />
                 </div>
-                <div className="collectionPivotView-tree">
-                    <CollectionTreeView {...this.props} Document={facetCollection} />
+                <div className="collectionPivotView-treeView" style={{ width: `${this._facetWidth}px`, overflow: this._facetWidth < 15 ? "hidden" : undefined }}>
+                    <div className="collectionPivotView-addFacet" style={{ width: `${this._facetWidth}px` }} onPointerDown={e => e.stopPropagation()}>
+                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
+                            <div className="collectionPivotView-button">
+                                <span className="collectionPivotView-span">Facet Filters</span>
+                                <FontAwesomeIcon icon={faEdit} size={"lg"} />
+                            </div>
+                        </Flyout>
+                    </div>
+                    <div className="collectionPivotView-tree">
+                        <CollectionTreeView {...this.props} Document={facetCollection} />
+                    </div>
                 </div>
-            </div>
-            <div className="collectionPivotView-pivot">
-                <CollectionFreeFormView  {...this.props} ScreenToLocalTransform={this.getTransform} PanelWidth={this.bodyPanelWidth} />
-            </div>
-        </div>;
+                <div className="collectionPivotView-pivot" style={{ width: this.bodyPanelWidth() }}>
+                    <CollectionFreeFormView  {...this.props} ScreenToLocalTransform={this.getTransform} PanelWidth={this.bodyPanelWidth} />
+                </div>
+            </div>;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2