moved edit on click script to developer. fixed highlight options for My text. enabled chromeHidden for all doc types and applied it to RTF text boxes. updated sliders in properties view to undo properly and to autorange, and cleaned up ode.

8 files changed, 99 insertions, 116 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d939470e9..8b2b77aca 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -512,7 +512,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {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.chromeButton, { display: isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
                 {/* {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })} */}
                 {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
index b72e048df..0e7cd7e92 100644
--- a/src/client/views/PropertiesSection.tsx
+++ b/src/client/views/PropertiesSection.tsx
@@ -8,7 +8,7 @@ import { StrCast } from '../../fields/Types';
 
 export interface PropertiesSectionProps {
     title: string;
-    content?: JSX.Element | string | null;
+    children?: JSX.Element | string | null;
     isOpen: boolean;
     setIsOpen: (bool: boolean) => any;
     inSection?: boolean;
@@ -33,7 +33,7 @@ export class PropertiesSection extends React.Component<PropertiesSectionProps> {
     @observable isDouble: boolean = false;
 
     render() {
-        if (this.props.content === undefined || this.props.content === null) return null;
+        if (this.props.children === undefined || this.props.children === null) return null;
         else
             return (
                 <div className="propertiesView-section" onPointerEnter={action(() => this.props.setInSection && this.props.setInSection(true))} onPointerLeave={action(() => this.props.setInSection && this.props.setInSection(false))}>
@@ -58,7 +58,7 @@ export class PropertiesSection extends React.Component<PropertiesSectionProps> {
                             <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" />
                         </div>
                     </div>
-                    {!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.content}</div>}
+                    {!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.children}</div>}
                 </div>
             );
     }
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 510defce4..2da2ec568 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -46,8 +46,7 @@
     }
 
     .propertiesView-info {
-        margin-top: 20;
-        margin-right: 10;
+        margin-top: -5;
         float: right;
         font-size: 20;
         path {
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 9cc75b1c6..b25ac7903 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
 import { Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
 import { concat } from 'lodash';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
 import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
@@ -783,39 +783,39 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get shapeXps() {
-        return this.getField('x');
+        return NumCast(this.selectedDoc?.x);
     }
     @computed get shapeYps() {
-        return this.getField('y');
+        return NumCast(this.selectedDoc?.y);
     }
     @computed get shapeHgt() {
-        return this.getField('_height');
+        return NumCast(this.selectedDoc?._height);
     }
     @computed get shapeWid() {
-        return this.getField('_width');
+        return NumCast(this.selectedDoc?._width);
     }
     set shapeXps(value) {
-        this.selectedDoc && (this.selectedDoc.x = Number(value));
+        this.selectedDoc && (this.selectedDoc.x = Math.round(value * 100) / 100);
     }
     set shapeYps(value) {
-        this.selectedDoc && (this.selectedDoc.y = Number(value));
+        this.selectedDoc && (this.selectedDoc.y = Math.round(value * 100) / 100);
     }
     set shapeWid(value) {
-        this.selectedDoc && (this.selectedDoc._width = Number(value));
+        this.selectedDoc && (this.selectedDoc._width = Math.round(value * 100) / 100);
     }
     set shapeHgt(value) {
-        this.selectedDoc && (this.selectedDoc._height = Number(value));
+        this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100);
     }
 
     @computed get hgtInput() {
         return this.inputBoxDuo(
             'hgt',
             this.shapeHgt,
-            undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height'),
+            undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = +val), 'set height'),
             'H:',
             'wid',
             this.shapeWid,
-            undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width'),
+            undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = +val), 'set width'),
             'W:'
         );
     }
@@ -823,11 +823,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return this.inputBoxDuo(
             'Xps',
             this.shapeXps,
-            undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord'),
+            undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeXps = +val), 'set x coord'),
             'X:',
             'Yps',
             this.shapeYps,
-            undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeYps = val), 'set y coord'),
+            undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeYps = +val), 'set y coord'),
             'Y:'
         );
     }
@@ -1067,11 +1067,31 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         );
     }
 
-    getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any) => {
+    _sliderBatch: UndoManager.Batch | undefined;
+    setFinalNumber = () => {
+        this._sliderBatch?.end();
+    };
+    getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any, autorange?: number, autorangeMinVal?: number) => {
         return (
-            <div>
+            <div key={label + this.selectedDoc?.title}>
                 <NumberInput formLabel={label} formLabelPlacement={'left'} type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} />
-                <Slider multithumb={false} color={this.color} size={Size.XSMALL} min={min} max={max} unit={unit} number={number} setNumber={setNumber} fillWidth />
+                <Slider
+                    key={label}
+                    onPointerDown={e => (this._sliderBatch = UndoManager.StartBatch('slider ' + label))}
+                    multithumb={false}
+                    color={this.color}
+                    size={Size.XSMALL}
+                    min={min}
+                    max={max}
+                    autorangeMinVal={autorangeMinVal}
+                    autorange={autorange}
+                    number={number}
+                    unit={unit}
+                    decimals={1}
+                    setFinalNumber={this.setFinalNumber}
+                    setNumber={setNumber}
+                    fillWidth
+                />
             </div>
         );
     };
@@ -1080,80 +1100,40 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <div className="transform-editor">
                 {this.isInk ? this.controlPointsButton : null}
-                {this.getNumber(
-                    'Height',
-                    ' px',
-                    0,
-                    1000,
-                    Number(this.shapeHgt),
-                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height')
-                )}
-                {this.getNumber(
-                    'Width',
-                    ' px',
-                    0,
-                    1000,
-                    Number(this.shapeWid),
-                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width')
-                )}
-                {this.getNumber(
-                    'X', //'X Coordinate',
-                    ' px',
-                    -2000,
-                    2000,
-                    Number(this.shapeXps),
-                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord')
-                )}
-                {this.getNumber(
-                    'Y', //'Y Coordinate',
-                    ' px',
-                    -2000,
-                    2000,
-                    Number(this.shapeYps),
-                    undoable((val: string) => !isNaN(Number(val)) && (this.shapeYps = val), 'set y coord')
-                )}
+                {this.getNumber('Width', ' px', 0, Math.max(1000, this.shapeWid), this.shapeWid, (val: number) => !isNaN(val) && (this.shapeWid = val), 1000, 1)}
+                {this.getNumber('Height', ' px', 0, Math.max(1000, this.shapeHgt), this.shapeHgt, (val: number) => !isNaN(val) && (this.shapeHgt = val), 1000, 1)}
+                {this.getNumber('X', ' px', this.shapeXps - 500, this.shapeXps + 500, this.shapeXps, (val: number) => !isNaN(val) && (this.shapeXps = val), 1000)}
+                {this.getNumber('Y', ' px', this.shapeYps - 500, this.shapeYps + 500, this.shapeYps, (val: number) => !isNaN(val) && (this.shapeYps = val), 1000)}
             </div>
         );
     }
 
     @computed get optionsSubMenu() {
         return (
-            <PropertiesSection
-                title="Options"
-                content={<PropertiesButtons />}
-                inSection={this.inOptions}
-                isOpen={this.openOptions}
-                setInSection={bool => (this.inOptions = bool)}
-                setIsOpen={bool => (this.openOptions = bool)}
-                onDoubleClick={this.CloseAll}
-            />
+            <PropertiesSection title="Options" inSection={this.inOptions} isOpen={this.openOptions} setInSection={bool => (this.inOptions = bool)} setIsOpen={bool => (this.openOptions = bool)} onDoubleClick={this.CloseAll}>
+                <PropertiesButtons />
+            </PropertiesSection>
         );
     }
 
     @computed get sharingSubMenu() {
         return (
-            <PropertiesSection
-                title="Sharing & Permissions"
-                content={
-                    <>
-                        {/* <div className="propertiesView-buttonContainer"> */}
-                        <div className="propertiesView-acls-checkbox">
-                            Layout Permissions
-                            <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
-                        </div>
-                        {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
-                        <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
-                            <FontAwesomeIcon icon="redo-alt"  size="1x" />
-                        </button>
+            <PropertiesSection title="Sharing and Permissions" isOpen={this.openSharing} setIsOpen={bool => (this.openSharing = bool)} onDoubleClick={() => this.CloseAll()}>
+                <>
+                    {/* <div className="propertiesView-buttonContainer"> */}
+                    <div className="propertiesView-acls-checkbox">
+                        Layout Permissions
+                        <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
+                    </div>
+                    {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
+                    <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
+                        <FontAwesomeIcon icon="redo-alt"  size="1x" />
+                    </button>
                     </Tooltip> */}
-                        {/* </div> */}
-                        {this.sharingTable}
-                    </>
-                }
-                isOpen={this.openSharing}
-                setIsOpen={bool => (this.openSharing = bool)}
-                onDoubleClick={() => this.CloseAll()}
-            />
+                    {/* </div> */}
+                    {this.sharingTable}
+                </>
+            </PropertiesSection>
         );
     }
 
@@ -1183,17 +1163,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get filtersSubMenu() {
         return (
-            <PropertiesSection
-                title="Filters"
-                content={
-                    <div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}>
-                        <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} />
-                    </div>
-                }
-                isOpen={this.openFilters}
-                setIsOpen={bool => (this.openFilters = bool)}
-                onDoubleClick={() => this.CloseAll()}
-            />
+            <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={bool => (this.openFilters = bool)} onDoubleClick={() => this.CloseAll()}>
+                <div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}>
+                    <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} />
+                </div>
+            </PropertiesSection>
         );
     }
 
@@ -1202,36 +1176,46 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return (
             <>
-                <PropertiesSection title="Appearance" content={this.isInk ? this.appearanceEditor : null} isOpen={this.openAppearance} setIsOpen={bool => (this.openAppearance = bool)} onDoubleClick={() => this.CloseAll()} />
-                <PropertiesSection title="Transform" content={this.transformEditor} isOpen={this.openTransform} setIsOpen={bool => (this.openTransform = bool)} onDoubleClick={() => this.CloseAll()} />
+                <PropertiesSection title="Appearance" isOpen={this.openAppearance} setIsOpen={bool => (this.openAppearance = bool)} onDoubleClick={() => this.CloseAll()}>
+                    {this.isInk ? this.appearanceEditor : null}
+                </PropertiesSection>
+                <PropertiesSection title="Transform" isOpen={this.openTransform} setIsOpen={bool => (this.openTransform = bool)} onDoubleClick={() => this.CloseAll()}>
+                    {this.transformEditor}
+                </PropertiesSection>
             </>
         );
     }
 
     @computed get fieldsSubMenu() {
         return (
-            <PropertiesSection
-                title="Fields & Tags"
-                content={<div className="propertiesView-content fields">{Doc.noviceMode ? this.noviceFields : this.expandedField}</div>}
-                isOpen={this.openFields}
-                setIsOpen={bool => (this.openFields = bool)}
-                onDoubleClick={() => this.CloseAll()}
-            />
+            <PropertiesSection title="Fields & Tags" isOpen={this.openFields} setIsOpen={bool => (this.openFields = bool)} onDoubleClick={() => this.CloseAll()}>
+                <div className="propertiesView-content fields">{Doc.noviceMode ? this.noviceFields : this.expandedField}</div>
+            </PropertiesSection>
         );
     }
 
     @computed get contextsSubMenu() {
         return (
-            <PropertiesSection title="Other Contexts" content={this.contextCount > 0 ? this.contexts : 'There are no other contexts.'} isOpen={this.openContexts} setIsOpen={bool => (this.openContexts = bool)} onDoubleClick={() => this.CloseAll()} />
+            <PropertiesSection title="Other Contexts" isOpen={this.openContexts} setIsOpen={bool => (this.openContexts = bool)} onDoubleClick={() => this.CloseAll()}>
+                {this.contextCount > 0 ? this.contexts : 'There are no other contexts.'}
+            </PropertiesSection>
         );
     }
 
     @computed get linksSubMenu() {
-        return <PropertiesSection title="Linked To" content={this.linkCount > 0 ? this.links : 'There are no current links.'} isOpen={this.openLinks} setIsOpen={bool => (this.openLinks = bool)} onDoubleClick={this.CloseAll} />;
+        return (
+            <PropertiesSection title="Linked To" isOpen={this.openLinks} setIsOpen={bool => (this.openLinks = bool)} onDoubleClick={this.CloseAll}>
+                {this.linkCount > 0 ? this.links : 'There are no current links.'}
+            </PropertiesSection>
+        );
     }
 
     @computed get layoutSubMenu() {
-        return <PropertiesSection title="Layout" content={this.layoutPreview} isOpen={this.openLayout} setIsOpen={bool => (this.openLayout = bool)} onDoubleClick={this.CloseAll} />;
+        return (
+            <PropertiesSection title="Layout" isOpen={this.openLayout} setIsOpen={bool => (this.openLayout = bool)} onDoubleClick={this.CloseAll}>
+                {this.layoutPreview}
+            </PropertiesSection>
+        );
     }
 
     @computed get description() {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ae9977d7a..da93a1b13 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -764,10 +764,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' });
 
                         onClicks.push({ description: this.onClickHandler ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(false, false), icon: 'link' });
-                        onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
+                        !Doc.noviceMode && onClicks.push({ description: 'Edit onClick Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, 'onClick'), 'edit onClick'), icon: 'terminal' });
                         !existingOnClick && cm.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
                     } else if (LinkManager.Links(this.Document).length) {
-                        onClicks.push({ description: 'Select on Click', event: () => this.noOnClick(), icon: 'link' });
+                        onClicks.push({ description: 'Restore On Click default', event: () => this.noOnClick(), icon: 'link' });
                         onClicks.push({ description: 'Follow Link on Click', event: () => this.followLinkOnClick(), icon: 'link' });
                         !existingOnClick && cm.addItem({ description: 'OnClick...', subitems: onClicks, icon: 'mouse-pointer' });
                     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 6fdde4b6b..42cc14f9c 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -666,7 +666,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-remote', { background: 'yellow' });
         }
         if (highlights.includes('My Text')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace('.', '').replace('@', ''), { background: 'moccasin' });
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace(/\./g, '').replace(/@/g, ''), { background: 'moccasin' });
         }
         if (highlights.includes('Todo Items')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-todo', { outline: 'black solid 1px' });
@@ -862,7 +862,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             event: () => (this.layoutDoc._layout_enableAltContentUI = !this.layoutDoc._layout_enableAltContentUI),
             icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye',
         });
-        uicontrols.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' });
+        !Doc.noviceMode && uicontrols.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' });
         !Doc.noviceMode &&
             uicontrols.push({
                 description: 'Broadcast Message',
@@ -2117,7 +2117,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     onPointerDown={this.onPointerDown}
                     onDoubleClick={this.onDoubleClick}>
                     <div
-                        className={`formattedTextBox-outer`}
+                        className="formattedTextBox-outer"
                         ref={this._scrollRef}
                         style={{
                             width: this.props.dontSelectOnLoad ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
@@ -2138,9 +2138,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         />
                     </div>
                     {this.noSidebar || this.props.dontSelectOnLoad || !this.SidebarShown || this.layout_sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
-                    {this.noSidebar || this.Document._layout_noSidebar || this.props.dontSelectOnLoad || this.Document._createDocOnCR ? null : this.sidebarHandle}
+                    {this.noSidebar || this.Document._layout_noSidebar || this.props.dontSelectOnLoad || this.Document._createDocOnCR || this.layoutDoc._chromeHidden ? null : this.sidebarHandle}
                     {this.audioHandle}
-                    {this.layoutDoc._layout_enableAltContentUI ? this.overlayAlternateIcon : null}
+                    {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null}
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index 7e17008bb..6f07588b3 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -348,7 +348,7 @@ export const marks: { [index: string]: MarkSpec } = {
         excludes: 'user_mark',
         group: 'inline',
         toDOM(node: any) {
-            const uid = node.attrs.userid.replace('.', '').replace('@', '');
+            const uid = node.attrs.userid.replace(/\./g, '').replace(/@/g, '');
             const min = Math.round(node.attrs.modified / 60);
             const hr = Math.round(min / 60);
             const day = Math.round(hr / 60 / 24);
diff --git a/src/fields/DocSymbols.ts b/src/fields/DocSymbols.ts
index bb974ee74..df74cc9fe 100644
--- a/src/fields/DocSymbols.ts
+++ b/src/fields/DocSymbols.ts
@@ -25,4 +25,4 @@ export const Initializing = Symbol('DocInitializing');
 export const ForceServerWrite = Symbol('DocForceServerWrite');
 export const CachedUpdates = Symbol('DocCachedUpdates');
 
-export const DashVersion = 'v0.5.99';
+export const DashVersion = 'v0.6.00';