🎉 Add shape outline on hover upon layers in the left sidebar of workspace

Signed-off-by: Andrew Zhurov <zhurov.andrew@gmail.com>

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

@@ -45,6 +45,7 @@
    [app.main.data.workspace.path.shapes-to-path :as dwps]
    [app.main.data.workspace.persistence :as dwp]
    [app.main.data.workspace.selection :as dws]
+   [app.main.data.workspace.highlight :as dwh]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.state-helpers :as wsh]
@@ -1732,6 +1733,10 @@
 (dm/export dws/select-shape)
 (dm/export dws/shift-select-shapes)
 
+;; Highlight
+(dm/export dwh/highlight-shape)
+(dm/export dwh/dehighlight-shape)
+
 ;; Groups
 (dm/export dwg/mask-group)
 (dm/export dwg/unmask-group)

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

@@ -0,0 +1,28 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.data.workspace.highlight
+  (:require
+   [app.common.spec :as us]
+   [potok.core :as ptk]))
+
+;; --- Manage shape's highlight status
+
+(defn highlight-shape
+  [id]
+  (us/verify ::us/uuid id)
+  (ptk/reify ::highlight-shape
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:workspace-local :highlighted] clojure.set/union #{id}))))
+
+(defn dehighlight-shape
+  [id]
+  (us/verify ::us/uuid id)
+  (ptk/reify ::dehighlight-shape
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:workspace-local :highlighted] disj id))))

frontend/src/app/main/refs.cljs

@@ -117,6 +117,9 @@
      (wsh/process-selected-shapes objects selected))
    selected-shapes-data))
 
+(def highlighted-shapes
+  (l/derived :highlighted workspace-local))
+
 (defn make-selected-ref
   [id]
   (l/derived #(contains? % id) selected-shapes))

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -144,6 +144,16 @@
               :else
               (st/emit! (dw/select-shape id)))))
 
+        on-pointer-enter
+        (fn [event]
+          (let [id (:id item)]
+            (st/emit! (dw/highlight-shape id))))
+
+        on-pointer-leave
+        (fn [event]
+          (let [id (:id item)]
+            (st/emit! (dw/dehighlight-shape id))))
+
         on-context-menu
         (fn [event]
           (dom/prevent-default event)
@@ -217,6 +227,8 @@
      [:div.element-list-body {:class (dom/classnames :selected selected?
                                                      :icon-layer (= (:type item) :icon))
                               :on-click select-shape
+                              :on-pointer-enter on-pointer-enter
+                              :on-pointer-leave on-pointer-leave
                               :on-double-click #(dom/stop-propagation %)}
       [:& si/element-icon {:shape item}]
       [:& layer-name {:shape item

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -70,6 +70,7 @@
         drawing           (mf/deref refs/workspace-drawing)
         options           (mf/deref refs/workspace-page-options)
         focus             (mf/deref refs/workspace-focus-selected)
+        highlighted       (mf/deref refs/highlighted-shapes)
 
         objects-ref       (mf/use-memo #(refs/workspace-page-objects-by-id page-id))
         objects           (mf/deref objects-ref)
@@ -286,6 +287,7 @@
           {:objects base-objects
            :selected selected
            :hover #{(:id @hover) @frame-hover}
+           :highlighted highlighted
            :edition edition
            :zoom zoom}])
 

frontend/src/app/main/ui/workspace/viewport/outline.cljs

@@ -78,8 +78,9 @@
 (mf/defc shape-outlines
   {::mf/wrap-props false}
   [props]
-  (let [selected  (or (obj/get props "selected") #{})
+  (let [selected        (or (obj/get props "selected") #{})
-        hover     (or (obj/get props "hover") #{})
+        hover           (or (obj/get props "hover") #{})
+        highlighted     (or (obj/get props "highlighted") #{})
 
         objects   (obj/get props "objects")
         edition   (obj/get props "edition")
@@ -89,12 +90,18 @@
         show-outline? (fn [shape] (and (not (:hidden shape))
                                        (not (:blocked shape))))
 
-        shapes (->> outlines-ids
+        shapes (set
-                    (filter #(not= edition %))
+                (into
-                    (map #(get objects %))
+                 (->> outlines-ids
-                    (filterv show-outline?)
+                      (filter #(not= edition %))
-                    (filter some?))]
+                      (map #(get objects %))
-
+                      (filterv show-outline?)
+                      (filter some?))
+                 ;; outline highlighted shapes even if they are hidden or blocked
+                 (->> highlighted
+                      (filter #(not= edition %))
+                      (map #(get objects %))
+                      (filter some?))))]
     [:g.outlines
      [:& shape-outlines-render {:shapes shapes
                                 :zoom zoom}]]))