diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 1b734551c..451180143 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/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) diff --git a/frontend/src/app/main/data/workspace/highlight.cljs b/frontend/src/app/main/data/workspace/highlight.cljs new file mode 100644 index 000000000..3968295c7 --- /dev/null +++ b/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)))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index ce4f0b8d5..650c648d9 100644 --- a/frontend/src/app/main/refs.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 05ad9bdfd..46c69b657 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 3dfbe8cb8..d808c7cc5 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/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}]) diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs index d1f6eaf46..731fb192c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs +++ b/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") #{}) - hover (or (obj/get props "hover") #{}) + (let [selected (or (obj/get props "selected") #{}) + 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 - (filter #(not= edition %)) - (map #(get objects %)) - (filterv show-outline?) - (filter some?))] - + shapes (set + (into + (->> outlines-ids + (filter #(not= edition %)) + (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}]]))