change to doc decorations to be more "lightweight". made linkBox render links in a freeform view as a DocView. added an auto-reset view option for freeforms. fixed highlighting ink strokes. Made groups behave better for selecting things 'inside' the group bounding box that aren't in the group. Added vertically centered text option.

1 files changed, 25 insertions, 25 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 40eb1fe2b..8b8b7fa4d 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -20,6 +20,7 @@ import { DocumentManager } from '../util/DocumentManager';
 import { DragManager } from '../util/DragManager';
 import { LinkFollower } from '../util/LinkFollower';
 import { SelectionManager } from '../util/SelectionManager';
+import { SettingsManager } from '../util/SettingsManager';
 import { SnappingManager } from '../util/SnappingManager';
 import { UndoManager } from '../util/UndoManager';
 import { CollectionDockingView } from './collections/CollectionDockingView';
@@ -46,9 +47,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     private _titleHeight = 20;
     private _resizeUndo?: UndoManager.Batch;
     private _offX = 0;
-    _offY = 0; // offset from click pt to inner edge of resize border
+    private _offY = 0; // offset from click pt to inner edge of resize border
     private _snapX = 0;
-    _snapY = 0; // last snapped location of resize border
+    private _snapY = 0; // last snapped location of resize border
     private _dragHeights = new Map<Doc, { start: number; lowest: number }>();
     private _inkDragDocs: { doc: Doc; x: number; y: number; width: number; height: number }[] = [];
 
@@ -70,8 +71,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         DocumentDecorations.Instance = this;
         reaction(
             () => SelectionManager.Views().slice(),
-            action(docs => {
-                this._showNothing = !DocumentView.LongPress && docs.length === 1; // show decorations if multiple docs are selected or we're long pressing
+            action(views => {
+                this._showNothing = !DocumentView.LongPress && views.length === 1; // show decorations if multiple docs are selected or we're long pressing
                 this._editingTitle = false;
             })
         );
@@ -80,8 +81,10 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             'pointermove',
             action(e => {
                 if (this.Bounds.x || this.Bounds.y || this.Bounds.r || this.Bounds.b) {
-                    if (this.Bounds.x !== Number.MAX_VALUE && (this.Bounds.x > e.clientX || this.Bounds.r < e.clientX || this.Bounds.y > e.clientY || this.Bounds.b < e.clientY)) {
+                    if (this.Bounds.x !== Number.MAX_VALUE && (this.Bounds.x > e.clientX + 10 || this.Bounds.r < e.clientX - 10 || this.Bounds.y > e.clientY + 10 || this.Bounds.b < e.clientY - 10)) {
                         this._showNothing = false;
+                    } else {
+                        this._showNothing = true;
                     }
                 }
             })
@@ -225,10 +228,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             e.x,
             e.y,
             {
-                dragComplete: action(e => {
-                    dragData.canEmbed && SelectionManager.DeselectAll();
-                    this._hidden = false;
-                }),
+                dragComplete: action(e => (this._hidden = false)),
                 hideSource: true,
             }
         );
@@ -255,7 +255,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             iconView.props.removeDocument?.(iconView.props.Document);
                         }
                     });
-                    SelectionManager.DeselectAll();
+                    views.forEach(v => SelectionManager.DeselectView());
                 }
                 this._iconifyBatch?.end();
                 this._iconifyBatch = undefined;
@@ -403,10 +403,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             }), // moveEvent
             action(action(() => (this._isRotating = false))), // upEvent
             action((e, doubleTap) => {
-                if (doubleTap) {
-                    seldocview.rootDoc.rotation_centerX = 0.5;
-                    seldocview.rootDoc.rotation_centerY = 0.5;
-                }
+                seldocview.rootDoc.rotation_centerX = 0;
+                seldocview.rootDoc.rotation_centerY = 0;
             })
         );
     };
@@ -777,10 +775,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         const hideDecorations = seldocview.props.hideDecorations || seldocview.rootDoc.hideDecorations;
         const hideResizers =
             ![AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(seldocview.rootDoc)) || hideDecorations || seldocview.props.hideResizeHandles || seldocview.rootDoc.layout_hideResizeHandles || this._isRounding || this._isRotating;
-        const hideTitle = hideDecorations || seldocview.props.hideDecorationTitle || seldocview.rootDoc.layout_hideDecorationTitle || this._isRounding || this._isRotating;
+        const hideTitle = this._showNothing || hideDecorations || seldocview.props.hideDecorationTitle || seldocview.rootDoc.layout_hideDecorationTitle || this._isRounding || this._isRotating;
         const hideDocumentButtonBar = hideDecorations || seldocview.props.hideDocumentButtonBar || seldocview.rootDoc.layout_hideDocumentButtonBar || this._isRounding || this._isRotating;
         // if multiple documents have been opened at the same time, then don't show open button
         const hideOpenButton =
+            this._showNothing ||
             hideDecorations ||
             seldocview.props.hideOpenButton ||
             seldocview.rootDoc.layout_hideOpenButton ||
@@ -788,6 +787,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
             this._isRounding ||
             this._isRotating;
         const hideDeleteButton =
+            this._showNothing ||
             hideDecorations ||
             this._isRounding ||
             this._isRotating ||
@@ -821,7 +821,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
 
         // Radius constants
         const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView;
-        const borderRadius = numberValue(StrCast(seldocview.rootDoc.layout_borderRounding));
+        const borderRadius = numberValue(Cast(seldocview.rootDoc.layout_borderRounding, 'string', null));
         const docMax = Math.min(NumCast(seldocview.rootDoc.width) / 2, NumCast(seldocview.rootDoc.height) / 2);
         const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
         const radiusHandle = (borderRadius / docMax) * maxDist;
@@ -884,9 +884,9 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 )}
             </div>
         );
-
+        const freeformDoc = SelectionManager.Views().some(v => v.props.CollectionFreeFormDocumentView?.());
         return (
-            <div className="documentDecorations" style={{ display: this._showNothing ? 'none' : undefined }}>
+            <div className="documentDecorations" style={{ display: this._showNothing && !freeformDoc ? 'none' : undefined }}>
                 <div
                     className="documentDecorations-background"
                     style={{
@@ -906,13 +906,13 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? null : (
                     <div>
                         <div
-                            className="documentDecorations-container"
+                            className={`documentDecorations-container  ${this._showNothing ? 'showNothing' : ''}`}
                             key="container"
                             style={{
                                 transform: `translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
                                 transformOrigin: `50% calc(50% + 10px)`,
                                 width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
-                                height: bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight + 'px',
+                                height: bounds.b - bounds.y + this._resizeBorderWidth + (this._showNothing ? 0 : this._titleHeight) + 'px',
                             }}>
                             <div
                                 className="documentDecorations-topbar"
@@ -944,17 +944,17 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             {useRounding && (
                                 <div
                                     key="rad"
+                                    className="documentDecorations-borderRadius"
                                     style={{
                                         background: `${this._isRounding ? Colors.MEDIUM_BLUE : undefined}`,
-                                        transform: `translate(${radiusHandleLocation}px, ${radiusHandleLocation}px)`,
+                                        transform: `translate(${radiusHandleLocation ?? 0}px, ${(radiusHandleLocation ?? 0) + (this._showNothing ? 0 : this._titleHeight)}px)`,
                                     }}
-                                    className={`documentDecorations-borderRadius`}
                                     onPointerDown={this.onRadiusDown}
                                     onContextMenu={e => e.preventDefault()}
                                 />
                             )}
 
-                            {hideDocumentButtonBar ? null : (
+                            {hideDocumentButtonBar || this._showNothing ? null : (
                                 <div
                                     className="link-button-container"
                                     key="links"
@@ -980,8 +980,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                     }}>
                                     {this._isRotating ? null : (
                                         <Tooltip enterDelay={750} title={<div className="dash-tooltip">tap to set rotate center, drag to rotate</div>}>
-                                            <div className="documentDecorations-rotation" style={{ pointerEvents: 'all', color: 'blue' }} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
-                                                <IconButton icon={<FaUndo />} color={Colors.LIGHT_GRAY} />
+                                            <div className="documentDecorations-rotation" style={{ pointerEvents: 'all', background: 'transparent' }} onPointerDown={this.onRotateDown} onContextMenu={e => e.preventDefault()}>
+                                                <IconButton icon={<FaUndo />} color={SettingsManager.userColor} />
                                             </div>
                                         </Tooltip>
                                     )}