changed backspace to iconify then delete

2 files changed, 32 insertions, 18 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 9d9505c08..062ca1181 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -146,15 +146,17 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
 
     _iconifyTimeout: NodeJS.Timeout | undefined;
     onCloseClick = () => {
-        const views = SelectionManager.Views().slice().filter(v => v);
-        const icons = this._iconifyTimeout ? views : views.filter(view => view.rootDoc.layoutKey === "layout_icon");
-        const others = this._iconifyTimeout ? [] : views.filter(view => view.rootDoc.layoutKey !== "layout_icon");
-        icons.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
-        others.forEach(dv => dv.iconify());
-        others.length && (this._iconifyTimeout = setTimeout(() => {
-            views.forEach(view => SelectionManager.DeselectView(view));
-            this._iconifyTimeout = undefined;
-        }, 1000));
+        if (this.canDelete) {
+            const views = SelectionManager.Views().slice().filter(v => v);
+            const icons = this._iconifyTimeout ? views : views.filter(view => view.rootDoc.layoutKey === "layout_icon");
+            const others = this._iconifyTimeout ? [] : views.filter(view => view.rootDoc.layoutKey !== "layout_icon");
+            icons.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
+            others.forEach(dv => dv.iconify());
+            others.length && (this._iconifyTimeout = setTimeout(() => {
+                views.forEach(view => SelectionManager.DeselectView(view));
+                this._iconifyTimeout = undefined;
+            }, 1000));
+        }
     }
     onMaximizeDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, () => {
@@ -443,6 +445,15 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
         return SelectionManager.Views().length > 1 ? "-multiple-" : "-unset-";
     }
 
+    @computed get canDelete() {
+        return SelectionManager.Views().some(docView => {
+            if (docView.rootDoc.stayInCollection) return false;
+            const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
+            //return (!docView.rootDoc._stayInCollection || docView.rootDoc.isInkMask) &&
+            return (collectionAcl === AclAdmin || collectionAcl === AclEdit || GetEffectiveAcl(docView.rootDoc) === AclAdmin);
+        });
+    }
+
     render() {
         const bounds = this.Bounds;
         const seldoc = SelectionManager.Views().slice(-1)[0];
@@ -452,11 +463,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number, P
         const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc.isGroup;
         const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle;
         const canOpen = SelectionManager.Views().some(docView => !docView.props.Document._stayInCollection && !docView.props.Document.isGroup && !docView.props.Document.hideOpenButton);
-        const canDelete = SelectionManager.Views().some(docView => {
-            const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
-            //return (!docView.rootDoc._stayInCollection || docView.rootDoc.isInkMask) &&
-            return (collectionAcl === AclAdmin || collectionAcl === AclEdit || GetEffectiveAcl(docView.rootDoc) === AclAdmin);
-        });
+        const canDelete = this.canDelete;
         const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
             <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
                 <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 4a327a842..91e0503b3 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -142,11 +142,18 @@ export class KeyManager {
             case "delete":
             case "backspace":
                 if (document.activeElement?.tagName !== "INPUT" && document.activeElement?.tagName !== "TEXTAREA") {
-                    const selected = SelectionManager.Views().filter(dv => !dv.topMost);
                     UndoManager.RunInBatch(() => {
-                        SelectionManager.DeselectAll();
-                        selected.map(dv => !dv.props.Document._stayInCollection && dv.props.removeDocument?.(dv.props.Document));
-                    }, "delete");
+                        if (LightboxView.LightboxDoc) {
+                            LightboxView.SetLightboxDoc(undefined);
+                            SelectionManager.DeselectAll();
+                        }
+                        else DocumentDecorations.Instance.onCloseClick();
+                    }, "backspace");
+                    // const selected = SelectionManager.Views().filter(dv => !dv.topMost);
+                    // UndoManager.RunInBatch(() => {
+                    //     SelectionManager.DeselectAll();
+                    //     selected.map(dv => !dv.props.Document._stayInCollection && dv.props.removeDocument?.(dv.props.Document));
+                    // }, "delete");
                     return { stopPropagation: true, preventDefault: true };
                 }
                 break;