Merge branch 'master' into advanced-trails

1 files changed, 269 insertions, 175 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 11b89fd69..8cae34d7d 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Icon, Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
@@ -21,6 +21,17 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView';
 import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
+import { JsxElement } from 'typescript';
+import { FaBraille, FaHighlighter, FaLock, FaLockOpen, FaThumbtack } from 'react-icons/fa';
+import { AiOutlineApple, AiOutlineColumnWidth, AiOutlinePicture } from 'react-icons/ai';
+import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff, MdTouchApp } from 'react-icons/md';
+import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb';
+import { BiHide, BiShow } from 'react-icons/bi';
+import { BsGrid3X3GapFill } from 'react-icons/bs';
+import { TfiBarChart } from 'react-icons/tfi';
+import { CiGrid31 } from 'react-icons/ci';
+import { RxWidth } from 'react-icons/rx';
+import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -30,6 +41,7 @@ enum UtilityButtonState {
     OpenRight,
     OpenExternally,
 }
+
 @observer
 export class PropertiesButtons extends React.Component<{}, {}> {
     @observable public static Instance: PropertiesButtons;
@@ -41,242 +53,291 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost;
     }
 
-    propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => string, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
+    propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
         const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
         return !targetDoc ? null : (
-            <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
-                <div>
-                    <div
-                        className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
-                        onPointerDown={e => e.stopPropagation()}
-                        onClick={undoable(() => {
-                            if (SelectionManager.Views().length > 1) {
-                                SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
-                            } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
-                        }, property)}>
-                        <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} />
-                    </div>
-                    <div className="propertiesButtons-title">{label}</div>
-                </div>
-            </Tooltip>
+            <Toggle
+                toggleStatus={BoolCast(targetDoc[property])}
+                text={label(targetDoc?.[property])}
+                color={StrCast(Doc.UserDoc().userColor)}
+                icon={icon(targetDoc?.[property] as any)}
+                iconPlacement={'left'}
+                align={'flex-start'}
+                fillWidth={true}
+                toggleType={ToggleType.BUTTON}
+                onClick={undoable(() => {
+                    if (SelectionManager.Views().length > 1) {
+                        SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
+                    } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
+                }, property)}
+            />
         );
     };
+
+    // this implments a container pattern by marking the targetDoc (collection) as a lightbox
+    // that always fits its contents to its container and that hides all other documents when
+    // a link is followed that targets a 'lightbox' destination
+    @computed get isLightboxButton() {
+        return this.propertyToggleBtn(
+            on => 'Lightbox',
+            'isLightbox',
+            on => `${on ? 'Set' : 'Remove'} lightbox flag`,
+            on => 'window-restore',
+            onClick => {
+                SelectionManager.Views().forEach(dv => {
+                    const containerDoc = dv.rootDoc;
+                    //containerDoc.followAllLinks =
+                    // containerDoc.noShadow =
+                    // containerDoc.layout_disableBrushing =
+                    // containerDoc._forceActive =
+                    //containerDoc._freeform_fitContentsToBox =
+                    containerDoc._isLightbox = !containerDoc._isLightbox;
+                    //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+                    const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+                    //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+                    containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.link_displayLine = false)));
+                });
+            }
+        );
+    }
+
+    @computed get titleButton() {
+        return this.propertyToggleBtn(
+            on => (!on ? 'SHOW TITLE' : this.selectedDoc?.['_layout_showTitle'] === 'title:hover' ? 'HIDE TITLE' : 'HOVER TITLE'),
+            '_layout_showTitle',
+            on => 'Switch between title styles',
+            on => (on ? <MdSubtitlesOff /> : <MdSubtitles />), // {currentIcon}, //(on ?  <MdSubtitles/> :)  , //,'text-width', on ?  <MdSubtitles/> : <MdSubtitlesOff/>,
+            (dv, doc) => {
+                const tdoc = dv?.rootDoc || doc;
+                const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
+                tdoc._layout_showTitle = newtitle ? newtitle : undefined;
+            }
+        );
+    }
+
     @computed get lockButton() {
         return this.propertyToggleBtn(
-            'No\xA0Drag',
+            on => (on ? 'UNLOCK' : 'LOCK'), // 'No\xA0Drag',
             '_lockedPosition',
             on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
-            on => 'thumbtack'
+            on => (on ? <FaLockOpen /> : <FaLock />)
+            // on => 'thumbtack'
         );
     }
+
     @computed get maskButton() {
+        //highlight text while going down and reading through
         return this.propertyToggleBtn(
-            'Mask',
+            on => (on ? 'PLAIN INK' : 'HIGHLIGHTER MASK'),
             'stroke_isInkMask',
             on => (on ? 'Make plain ink' : 'Make highlight mask'),
-            on => 'paint-brush',
+            on => (on ? <TbHighlightOff /> : <TbHighlight />), // <FaHighlighter/>,// 'paint-brush',
             (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
         );
     }
+
     @computed get hideImageButton() {
+        // put in developer -- can trace on top of object and drawing is still there
         return this.propertyToggleBtn(
-            'Background',
+            on => (on ? 'SHOW BACKGROUND IMAGE' : 'HIDE BACKGROUND IMAGE'), //'Background',
             '_hideImage',
             on => (on ? 'Show Image' : 'Show Background'),
-            on => 'portrait'
+            on => (on ? <BiShow /> : <BiHide />) //'portrait'
         );
     }
+
     @computed get clustersButton() {
         return this.propertyToggleBtn(
-            'Clusters',
+            on => (on ? 'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
             '_freeform_useClusters',
             on => `${on ? 'Hide' : 'Show'} clusters`,
-            on => 'braille'
+            on => <FaBraille />
         );
     }
     @computed get panButton() {
         return this.propertyToggleBtn(
-            'Lock\xA0View',
+            on => (on ? 'ENABLE PANNING' : 'DISABLE PANNING'), //'Lock\xA0View',
             '_lockedTransform',
             on => `${on ? 'Unlock' : 'Lock'} panning of view`,
-            on => 'lock'
+            on => (on ? <TbHandStop /> : <TbHandOff />) //'lock'
         );
     }
+
     @computed get forceActiveButton() {
+        //select text
         return this.propertyToggleBtn(
-            'Active',
+            on => (on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION'),
             '_forceActive',
             on => `${on ? 'Select to activate' : 'Contents always active'} `,
-            on => 'eye'
+            on => <MdTouchApp /> // 'eye'
         );
     }
+
     @computed get fitContentButton() {
         return this.propertyToggleBtn(
-            'View All',
+            on => (on ? 'PREVIOUS VIEW' : 'VIEW ALL'), //'View All',
             '_freeform_fitContentsToBox',
             on => `${on ? "Don't" : 'Do'} fit content to container visible area`,
-            on => 'object-group'
-        );
-    }
-    // this implments a container pattern by marking the targetDoc (collection) as a lightbox
-    // that always fits its contents to its container and that hides all other documents when
-    // a link is followed that targets a 'lightbox' destination
-    @computed get isLightboxButton() {
-        return this.propertyToggleBtn(
-            'Lightbox',
-            'isLightbox',
-            on => `${on ? 'Set' : 'Remove'} lightbox flag`,
-            on => 'window-restore',
-            onClick => {
-                SelectionManager.Views().forEach(dv => {
-                    const containerDoc = dv.rootDoc;
-                    //containerDoc.followAllLinks =
-                    // containerDoc.noShadow =
-                    // containerDoc.layout_disableBrushing =
-                    // containerDoc._forceActive =
-                    //containerDoc._freeform_fitContentsToBox =
-                    containerDoc._isLightbox = !containerDoc._isLightbox;
-                    //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
-                    const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
-                    //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
-                    containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.link_displayLine = false)));
-                });
-            }
+            on => (on ? <CiGrid31 /> : <BsGrid3X3GapFill />) //'object-group'
         );
     }
+
+    // // this implments a container pattern by marking the targetDoc (collection) as a lightbox
+    // // that always fits its contents to its container and that hides all other documents when
+    // // a link is followed that targets a 'lightbox' destination
+    // @computed get isLightboxButton() { // developer
+    //     return this.propertyToggleBtn(
+    //         on => 'Lightbox',
+    //         'isLightbox',
+    //         on => `${on ? 'Set' : 'Remove'} lightbox flag`,
+    //         on => 'window-restore',
+    //         onClick => {
+    //             SelectionManager.Views().forEach(dv => {
+    //                 const containerDoc = dv.rootDoc;
+    //                 //containerDoc.followAllLinks =
+    //                 // containerDoc.noShadow =
+    //                 // containerDoc.disableDocBrushing =
+    //                 // containerDoc._forceActive =
+    //                 //containerDoc._freeform_fitContentsToBox =
+    //                 containerDoc._isLightbox = !containerDoc._isLightbox;
+    //                 //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+    //                 const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+    //                 //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+    //                 containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false)));
+    //             });
+    //         }
+    //     );
+    // }
+
     @computed get layout_fitWidthButton() {
         return this.propertyToggleBtn(
-            'Fit\xA0Width',
+            on => (on ? 'RESTRICT WIDTH' : 'FIT WIDTH'), //'Fit\xA0Width',
             '_layout_fitWidth',
             on => `${on ? "Don't" : 'Do'} fit content to width of container`,
-            on => 'arrows-alt-h'
+            on => (on ? <AiOutlineColumnWidth /> : <RxWidth />) // 'arrows-alt-h'
         );
     }
+
     @computed get captionButton() {
         return this.propertyToggleBtn(
-            'Caption',
+            //DEVELOPER
+            on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
             '_layout_showCaption',
             on => `${on ? 'Hide' : 'Show'} caption footer`,
-            on => 'closed-captioning',
+            on => (on ? <MdClosedCaptionDisabled /> : <MdClosedCaption />), //'closed-captioning',
             (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined)
         );
     }
+
     @computed get chromeButton() {
+        // developer -- removing UI decoration
         return this.propertyToggleBtn(
-            'Controls',
+            on => (on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS'),
             '_chromeHidden',
             on => `${on ? 'Show' : 'Hide'} editing UI`,
-            on => 'edit',
+            on => (on ? <TbEditCircle /> : <TbEditCircleOff />), // 'edit',
             (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
         );
     }
-    @computed get titleButton() {
-        return this.propertyToggleBtn(
-            'Title',
-            '_layout_showTitle',
-            on => 'Switch between title styles',
-            on => 'text-width',
-            (dv, doc) => {
-                const tdoc = dv?.rootDoc || doc;
-                const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
-                tdoc._layout_showTitle = newtitle;
-            }
-        );
-    }
+
     @computed get layout_autoHeightButton() {
+        // store previous dimensions to store old values
         return this.propertyToggleBtn(
-            'Auto\xA0Size',
+            on => (on ? 'AUTO\xA0SIZE' : 'FIXED SIZE'),
             '_layout_autoHeight',
             on => `Automatical vertical sizing to show all content`,
-            on => 'arrows-alt-v'
+            on => <FontAwesomeIcon icon="arrows-alt-v" size="lg" />
         );
     }
+
     @computed get gridButton() {
         return this.propertyToggleBtn(
-            'Grid',
+            on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
             '_freeform_backgroundGrid',
             on => `Display background grid in collection`,
-            on => 'border-all'
-        );
-    }
-    @computed get groupButton() {
-        return this.propertyToggleBtn(
-            'Group',
-            'isGroup',
-            on => `Display collection as a Group`,
-            on => 'object-group',
-            (dv, doc) => {
-                doc.isGroup = !doc.isGroup;
-                doc.forceActive = doc.isGroup;
-            }
-        );
-    }
-    @computed get freezeThumb() {
-        return this.propertyToggleBtn(
-            'FreezeThumb',
-            '_thumb-frozen',
-            on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
-            on => 'snowflake',
-            (dv, doc) => {
-                if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
-                else {
-                    document.body.focus(); // so that we can access the clipboard without an error
-                    setTimeout(() =>
-                        pasteImageBitmap((data_url: any, error: any) => {
-                            error && console.log(error);
-                            data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
-                        })
-                    );
-                }
-            }
+            on => (on ? <MdGridOff /> : <MdGridOn />) //'border-all'
         );
     }
+
+    // @computed get groupButton() { //developer
+    //     return this.propertyToggleBtn(
+    //         on => 'Group',
+    //         'isGroup',
+    //         on => `Display collection as a Group`,
+    //         on => 'object-group',
+    //         (dv, doc) => {
+    //             doc.isGroup = !doc.isGroup;
+    //             doc.forceActive = doc.isGroup;
+    //         }
+    //     );
+    // }
+
+    // @computed get freezeThumb() {
+    //     return this.propertyToggleBtn(
+    //         'FreezeThumb',
+    //         '_thumb-frozen',
+    //         on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
+    //         on => 'snowflake',
+    //         (dv, doc) => {
+    //             if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
+    //             else {
+    //                 document.body.focus(); // so that we can access the clipboard without an error
+    //                 setTimeout(() =>
+    //                     pasteImageBitmap((data_url: any, error: any) => {
+    //                         error && console.log(error);
+    //                         data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
+    //                     })
+    //                 );
+    //             }
+    //         }
+    //     );
+    // }
     @computed get snapButton() {
+        // THESE ARE NOT COMING
         return this.propertyToggleBtn(
-            'Snap\xA0Lines',
+            on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
             'freeform_snapLines',
             on => `Display snapping lines when objects are dragged`,
-            on => 'th',
-            undefined,
-            true
+            on => <TfiBarChart />, //'th',
+            undefined
         );
     }
 
-    @computed
-    get onClickButton() {
-        return !this.selectedDoc ? null : (
-            <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
-                <div>
-                    <div className="propertiesButtons-linkFlyout">
-                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
-                            <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
-                            </div>
-                        </Flyout>
-                    </div>
-                    <div className="propertiesButtons-title"> onclick </div>
-                </div>
-            </Tooltip>
-        );
-    }
-    @computed
-    get perspectiveButton() {
-        return !this.selectedDoc ? null : (
-            <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
-                <div>
-                    <div className="propertiesButtons-linkFlyout">
-                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
-                            <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
-                            </div>
-                        </Flyout>
-                    </div>
-                    <div className="propertiesButtons-title"> Perspective </div>
-                </div>
-            </Tooltip>
-        );
-    }
+    // @computed
+    // get onClickButton() {
+    //     return !this.selectedDoc ? null : (
+    //         <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
+    //             <div>
+    //                 <div className="propertiesButtons-linkFlyout">
+    //                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
+    //                         <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+    //                             <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+    //                         </div>
+    //                     </Flyout>
+    //                 </div>
+    //                 <div className="propertiesButtons-title"> onclick </div>
+    //             </div>
+    //         </Tooltip>
+    //     );
+    // }
+    // @computed
+    // get perspectiveButton() { // gone
+    //     return !this.selectedDoc ? null : (
+    //         <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
+    //             <div>
+    //                 <div className="propertiesButtons-linkFlyout">
+    //                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
+    //                         <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+    //                             <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+    //                         </div>
+    //                     </Flyout>
+    //                 </div>
+    //                 <div className="propertiesButtons-title"> Perspective </div>
+    //             </div>
+    //         </Tooltip>
+    //     );
+    // }
 
     @undoBatch
     handlePerspectiveChange = (e: any) => {
@@ -286,6 +347,60 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             .map(dv => dv.docView!)
             .forEach(docView => (docView.layoutDoc._type_collection = e.target.value));
     };
+    @computed get onClickVal() {
+        const linkButton = IsFollowLinkScript(this.selectedDoc.onClick);
+        const followLoc = this.selectedDoc._followLinkLocation;
+        const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
+
+        if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace';
+        else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight';
+        else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal';
+        else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail';
+        else return 'nothing';
+    }
+
+    @computed
+    get onClickButton() {
+        const buttonList = [
+            ['nothing', 'Select Document'],
+            ['enterPortal', 'Enter Portal'],
+            ['toggleDetail', 'Toggle Detail'],
+            ['linkInPlace', 'Open Link in Lightbox'],
+            ['linkOnRight', 'Open Link on Right'],
+        ];
+
+        const items: IListItemProps[] = buttonList.map(value => {
+            return {
+                text: value[1],
+                val: value[1],
+            };
+        });
+        return !this.selectedDoc ? null : (
+            <Dropdown
+                tooltip={'Choose onClick behavior'}
+                items={items}
+                selectedVal={this.onClickVal}
+                setSelectedVal={val => this.handleOptionChange(val as string)}
+                title={'Choose onClick behaviour'}
+                color={StrCast(Doc.UserDoc().userColor)}
+                dropdownType={DropdownType.SELECT}
+                type={Type.SEC}
+                fillWidth
+            />
+            // <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
+            //     <div>
+            //         <div className="propertiesButtons-linkFlyout">
+            //             <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
+            //                 <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+            //                     <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+            //                 </div>
+            //             </Flyout>
+            //         </div>
+            //         <div className="propertiesButtons-title"> onclick </div>
+            //     </div>
+            // </Tooltip>
+        );
+    }
 
     @undoBatch
     @action
@@ -365,26 +480,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             </div>
         );
     }
-    @computed
-    get onPerspectiveFlyout() {
-        const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear];
-
-        const makeLabel = (value: string, label: string) => (
-            <div className="radio" key={label}>
-                <label>
-                    <input type="radio" value={value} checked={(this.selectedDoc?._type_collection ?? 'invalid') === value} onChange={this.handlePerspectiveChange} />
-                    {label}
-                </label>
-            </div>
-        );
-        return (
-            <form>
-                {Object.values(CollectionViewType)
-                    .filter(type => !excludedViewTypes.includes(type))
-                    .map(type => makeLabel(type, type))}
-            </form>
-        );
-    }
 
     render() {
         const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
@@ -410,22 +505,21 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.titleButton)}
                 {toggle(this.captionButton)}
                 {toggle(this.lockButton)}
-                {toggle(this.onClickButton)}
+                {/* {toggle(this.onClickButton)} */}
                 {toggle(this.layout_fitWidthButton)}
-                {toggle(this.freezeThumb)}
+                {/* {toggle(this.freezeThumb)} */}
                 {toggle(this.forceActiveButton)}
                 {toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
-                {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
+                {/* {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })} */}
                 {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
                 {toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
                 {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
                 {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
-                {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
+                {/* {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })} */}
                 {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
                 {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
                 {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
-                {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })}
             </div>
         );
     }