🐛 Fix problem with hover-ids

frontend/resources/styles/main/partials/workspace.scss

@@ -58,7 +58,7 @@
     }
   }
 
-  .sub-menu-item {
+  .icon-menu-item {
     display: flex;
     justify-content: flex-start;
 

frontend/src/app/main/ui/components/shape_icon.cljs

@@ -0,0 +1,34 @@
+;; 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.ui.components.shape-icon
+  (:require
+   [app.main.ui.icons :as i]
+   [rumext.alpha :as mf]))
+
+
+(mf/defc element-icon
+  [{:keys [shape] :as props}]
+  (case (:type shape)
+    :frame i/artboard
+    :image i/image
+    :line i/line
+    :circle i/circle
+    :path i/curve
+    :rect i/box
+    :text i/text
+    :group (if (some? (:component-id shape))
+             i/component
+             (if (:masked-group? shape)
+               i/mask
+               i/folder))
+    :bool (case (:bool-type shape)
+            :difference   i/bool-difference
+            :exclude      i/bool-exclude
+            :intersection i/bool-intersection
+            #_:default    i/bool-union)
+    :svg-raw i/file-svg
+    nil))

frontend/src/app/main/ui/viewer/handoff/left_sidebar.cljs

@@ -9,8 +9,9 @@
    [app.common.data :as d]
    [app.main.data.viewer :as dv]
    [app.main.store :as st]
+   [app.main.ui.components.shape-icon :as si]
    [app.main.ui.icons :as i]
-   [app.main.ui.workspace.sidebar.layers :refer [element-icon layer-name]]
+   [app.main.ui.workspace.sidebar.layers :refer [layer-name]]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [okulary.core :as l]
@@ -70,7 +71,7 @@
      [:div.element-list-body {:class (dom/classnames :selected selected?
                                                      :icon-layer (= (:type item) :icon))
                               :on-click select-shape}
-      [:& element-icon {:shape item}]
+      [:& si/element-icon {:shape item}]
       [:& layer-name {:shape item}]
 
       (when (and (not disable-collapse?) (:shapes item))

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -7,12 +7,12 @@
 (ns app.main.ui.viewer.handoff.right-sidebar
   (:require
    [app.common.data :as d]
+   [app.main.ui.components.shape-icon :as si]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.handoff.attributes :refer [attributes]]
    [app.main.ui.viewer.handoff.code :refer [code]]
    [app.main.ui.viewer.handoff.selection-feedback :refer [resolve-shapes]]
-   [app.main.ui.workspace.sidebar.layers :refer [element-icon]]
    [app.util.i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
@@ -44,7 +44,7 @@
              [:span.tool-window-bar-title (tr "handoff.tabs.code.selected.multiple" (count shapes))]]
             [:*
              [:span.tool-window-bar-icon
-              [:& element-icon {:shape first-shape}]]
+              [:& si/element-icon {:shape first-shape}]]
              [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])
           ]
          [:div.tool-window-content

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

@@ -18,6 +18,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
+   [app.main.ui.components.shape-icon :as si]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -35,32 +36,10 @@
   (dom/stop-propagation event))
 
 
-(mf/defc element-icon
-  [{:keys [shape] :as props}]
-  (case (:type shape)
-    :frame i/artboard
-    :image i/image
-    :line i/line
-    :circle i/circle
-    :path i/curve
-    :rect i/box
-    :text i/text
-    :group (if (some? (:component-id shape))
-             i/component
-             (if (:masked-group? shape)
-               i/mask
-               i/folder))
-    :bool (case (:bool-type shape)
-            :difference   i/bool-difference
-            :exclude      i/bool-exclude
-            :intersection i/bool-intersection
-            #_:default    i/bool-union)
-    :svg-raw i/file-svg
-    nil))
 
 
 (mf/defc menu-entry
-  [{:keys [title shortcut on-click children selected has-icon? shape] :as props}]
+  [{:keys [title shortcut on-click children selected? icon] :as props}]
   (let [submenu-ref (mf/use-ref nil)
         hovering? (mf/use-ref false)
 
@@ -90,16 +69,15 @@
              (when (and (some? dom) (some? submenu-node))
                (dom/set-css-property! submenu-node "top" (str (.-offsetTop dom) "px"))))))]
 
-    (if has-icon?
+    (if icon
-      [:li.sub-menu-item {:ref set-dom-node
+      [:li.icon-menu-item {:ref set-dom-node
-                          :on-click on-click
+                           :on-click on-click
-                          :on-pointer-enter on-pointer-enter
+                           :on-pointer-enter on-pointer-enter
-                          :on-pointer-leave on-pointer-leave}
+                           :on-pointer-leave on-pointer-leave}
-       (when has-icon?
+       [:span.icon-wrapper
-         [:span.icon-wrapper
+        (if selected? [:span.selected-icon i/tick]
-          (if selected [:span.selected-icon i/tick]
+            [:span.selected-icon])
-              [:span.selected-icon])
+        [:span.shape-icon icon]]
-          [:span.shape-icon (element-icon {:shape shape})]])
        [:span.title title]]
       [:li {:ref set-dom-node
             :on-click on-click
@@ -156,10 +134,9 @@
        [:& menu-entry {:title (tr "workspace.shape.menu.select-layer")}
         (for [object hover-objs]
           [:& menu-entry {:title (:name object)
-                          :selected (some #(= object %) shapes)
+                          :selected? (some #(= object %) shapes)
                           :on-click (select-shapes (:id object))
-                          :has-icon? true
+                          :icon (si/element-icon {:shape object})}])])
-                          :shape object}])])
      [:& menu-entry {:title (tr "workspace.shape.menu.forward")
                      :shortcut (sc/get-tooltip :bring-forward)
                      :on-click do-bring-forward}]

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

@@ -13,6 +13,7 @@
    [app.main.data.workspace.common :as dwc]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.components.shape-icon :as si]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -24,31 +25,6 @@
    [okulary.core :as l]
    [rumext.alpha :as mf]))
 
-;; --- Helpers
-
-(mf/defc element-icon
-  [{:keys [shape] :as props}]
-  (case (:type shape)
-    :frame i/artboard
-    :image i/image
-    :line i/line
-    :circle i/circle
-    :path i/curve
-    :rect i/box
-    :text i/text
-    :group (if (some? (:component-id shape))
-             i/component
-             (if (:masked-group? shape)
-               i/mask
-               i/folder))
-    :bool (case (:bool-type shape)
-            :difference   i/bool-difference
-            :exclude      i/bool-exclude
-            :intersection i/bool-intersection
-            #_:default    i/bool-union)
-    :svg-raw i/file-svg
-    nil))
-
 ;; --- Layer Name
 
 (def shape-for-rename-ref
@@ -227,7 +203,7 @@
                                                      :icon-layer (= (:type item) :icon))
                               :on-click select-shape
                               :on-double-click #(dom/stop-propagation %)}
-      [:& element-icon {:shape item}]
+      [:& si/element-icon {:shape item}]
       [:& layer-name {:shape item
                       :on-start-edit #(reset! disable-drag true)
                       :on-stop-edit #(reset! disable-drag false)}]

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

@@ -164,9 +164,10 @@
                           @ctrl?
                           (into (filter is-group?) ids))
 
-             ids         (filterv (comp not remove-id?) ids)
+             hover-shape (->> ids
-             hover-shape (get objects (first ids))]
+                              (filterv (comp not remove-id?))
-
+                              (first)
+                              (get objects))]
          (reset! hover hover-shape)
          (reset! hover-ids ids))))))