🐛 Restore viewport and selection when exiting focus mode (#6827)

* 📚 Provide guidance on how to exit focus mode

* 🐛 Restore viewport & selection post focus mode

* 📎 Update changelog

CHANGES.md

@@ -19,6 +19,7 @@
 - Copying font size does not copy the unit [Taiga #11143](https://tree.taiga.io/project/penpot/issue/11143)
 - Fix text-decoration line-through that displays a wrong property value [Taiga #11145](https://tree.taiga.io/project/penpot/issue/11145)
 - Fix display error message on register form [Taiga #11444](https://tree.taiga.io/project/penpot/issue/11444)
+- Fix toggle focus mode did not restore viewport and selection upon exit [GitHub #6280](https://github.com/penpot/penpot/issues/6820)
 
 ## 2.8.0 (Next / Unreleased)
 

docs/user-guide/layer-basics/index.njk

@@ -281,12 +281,15 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
 
 
 <h2 id="focus-mode">Focus mode</h2>
-<p>Select the elements of a page you want to work with in a specific moment hiding the rest so they don’t get in the way of your attention. This option is also useful to improve the performance in cases where the page has a large number of elements.</p>
+<p>Focus mode zooms into the elements of a page you want to work with in a specific moment, and hides the rest so that they don’t get in the way. When the page has many elements, focus mode can also improve performance.</p>
 <p>To activate focus mode:</p>
-<ol>
+<ol> 
   <li>Select one or more elements.</li>
-  <li>Right click to show the menu and select the option "Focus on" or press <kbd>F</kbd>.</li>
+  <li>Right click on the selection to show the menu and select the option “Focus on” or press <kbd>F</kbd>.</li>
 </ol>
+<p>Notice that the layer panel will now only show the focused layers. A focus mode status line will also appear at the top.</p>
+<p>To exit focus mode and return to the original viewport and selection, right click anywhere and select “Focus off” or just press <kbd>F</kbd> again. You can also click anywhere on the focus mode status line at the top of the layer panel.
+</p>
 <figure>
   <video title="Focus mode" muted="" playsinline="" controls="" width="100%" poster="/img/layers/layers-focus.webp" height="auto">
     <source src="/img/layers/layers-focus.mp4" type="video/mp4">

frontend/src/app/main/data/workspace/selection.cljs

@@ -555,6 +555,11 @@
             (assoc :workspace-focus-selected focus))))))
 
 (defn toggle-focus-mode
+  "Zoom in on and center viewport on selection; 
+   hide all other layers in viewport and layer panel.
+
+   When in focus mode, exit restoring previous viewport and selection. 
+  "
   []
   (ptk/reify ::toggle-focus-mode
     ev/Event
@@ -562,14 +567,22 @@
 
     ptk/UpdateEvent
     (update [_ state]
-      (let [selected (dsh/lookup-selected state)]
-        (cond-> state
-          (and (empty? (:workspace-focus-selected state))
-               (d/not-empty? selected))
-          (assoc :workspace-focus-selected selected)
+      (let [selected (dsh/lookup-selected state)
+            have-selection? (d/not-empty? selected)
+            in-mode? (d/not-empty? (:workspace-focus-selected state))]
 
-          (d/not-empty? (:workspace-focus-selected state))
-          (dissoc :workspace-focus-selected))))
+        (if in-mode?
+          ;; Exit focus, restoring previous viewport, selection, etc
+          (-> state
+              (assoc :workspace-local (:workspace-pre-focus state))
+              (dissoc :workspace-focus-selected)
+              (dissoc :workspace-pre-focus))
+          (if have-selection?
+            ;; Enter focus and save viewport, selection, etc
+            (-> state
+                (assoc :workspace-focus-selected selected)
+                (assoc :workspace-pre-focus (:workspace-local state)))
+            state))))
 
     ptk/WatchEvent
     (watch [_ state stream]
@@ -584,6 +597,7 @@
                 (rx/map (comp set keys))
                 (rx/buffer 2 1)
                 (rx/merge-map
+                ;; While focus is active, update it with any new and deleted shapes 
                  (fn [[old-keys new-keys]]
                    (let [removed (set/difference old-keys new-keys)
                          added (set/difference new-keys old-keys)]