✨ Add select layer to contest menu

CHANGES.md

@@ -4,10 +4,11 @@
 
 ### :sparkles: New features
 
+- Add select layer option to context menu [Taiga #2474](https://tree.taiga.io/project/penpot/us/2474).
 - Guides [Taiga #290](https://tree.taiga.io/project/penpot/us/290?milestone=307334)
 - Improve file menu by adding semantically groups [Github #1203](https://github.com/penpot/penpot/issues/1203).
 - Add update components in bulk option in context menu [Taiga #1975](https://tree.taiga.io/project/penpot/us/1975).
-- Create e2e tests for drawing basic fors [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608).
+- Create e2e tests for drawing basic shapes [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608).
 - Create firsts e2e test [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608).
 
 ## 1.11.0-beta

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

@@ -34,11 +34,11 @@
       margin: 2px;
     }
 
-    span:first-child {
+    span {
       color: $color-gray-60;
     }
 
-    span:last-child {
+    span.shortcut {
       color: $color-gray-20;
       font-size: $fs12;
     }
@@ -57,6 +57,40 @@
       }
     }
   }
+
+  .sub-menu-item {
+    display: flex;
+    justify-content: flex-start;
+
+    &:hover {
+      background-color: $color-primary-lighter;
+    }
+
+    span.title {
+      margin-left: 5px;
+    }
+
+    .selected-icon {
+      svg {
+        width: 10px;
+        height: 10px;
+      }
+    }
+
+    .shape-icon {
+      margin-left: 3px;
+      svg {
+        width: 13px;
+        height: 13px;
+      }
+    }
+
+    .icon-wrapper {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      margin: 0;
+    }
+  }
 }
 
 .workspace-loader {

frontend/src/app/main/refs.cljs

@@ -152,6 +152,12 @@
 (def current-hover
   (l/derived :hover workspace-local))
 
+(def context-menu
+  (l/derived :context-menu workspace-local))
+
+(def current-hover-ids
+  (l/derived :hover-ids context-menu))
+
 (def editors
   (l/derived :editors workspace-local))
 

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

@@ -13,6 +13,7 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.interactions :as dwi]
    [app.main.data.workspace.libraries :as dwl]
+   [app.main.data.workspace.selection :as dws]
    [app.main.data.workspace.shortcuts :as sc]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -33,8 +34,33 @@
   (dom/prevent-default event)
   (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] :as props}]
+  [{:keys [title shortcut on-click children selected has-icon? shape] :as props}]
   (let [submenu-ref (mf/use-ref nil)
         hovering? (mf/use-ref false)
 
@@ -64,6 +90,17 @@
              (when (and (some? dom) (some? submenu-node))
                (dom/set-css-property! submenu-node "top" (str (.-offsetTop dom) "px"))))))]
 
+    (if has-icon?
+      [:li.sub-menu-item {:ref set-dom-node
+                          :on-click on-click
+                          :on-pointer-enter on-pointer-enter
+                          :on-pointer-leave on-pointer-leave}
+       (when has-icon?
+         [:span.icon-wrapper
+          (if selected [:span.selected-icon i/tick]
+              [:span.selected-icon])
+          [:span.shape-icon (element-icon {:shape shape})]])
+       [:span.title title]]
       [:li {:ref set-dom-node
             :on-click on-click
             :on-pointer-enter on-pointer-enter
@@ -79,7 +116,7 @@
           {:ref submenu-ref
            :style {:display "none" :left 250}
            :on-context-menu prevent-default}
-        children])]))
+          children])])))
 
 (mf/defc menu-separator
   []
@@ -108,12 +145,21 @@
      [:& menu-separator]]))
 
 (mf/defc context-menu-layer-position
-  []
+  [{:keys [hover-objs shapes]}]
   (let [do-bring-forward  (st/emitf (dw/vertical-order-selected :up))
         do-bring-to-front (st/emitf (dw/vertical-order-selected :top))
         do-send-backward  (st/emitf (dw/vertical-order-selected :down))
-        do-send-to-back   (st/emitf (dw/vertical-order-selected :bottom))]
+        do-send-to-back   (st/emitf (dw/vertical-order-selected :bottom))
+        select-shapes     (fn [id] (st/emitf (dws/select-shape id)))]
     [:*
+     (when (> (count hover-objs) 1)
+       [:& menu-entry {:title (tr "workspace.shape.menu.select-layer")}
+        (for [object hover-objs]
+          [:& menu-entry {:title (:name object)
+                          :selected (some #(= object %) shapes)
+                          :on-click (select-shapes (:id object))
+                          :has-icon? true
+                          :shape object}])])
      [:& menu-entry {:title (tr "workspace.shape.menu.forward")
                      :shortcut (sc/get-tooltip :bring-forward)
                      :on-click do-bring-forward}]
@@ -392,8 +438,11 @@
   [{:keys [mdata] :as props}]
   (let [{:keys [disable-booleans? disable-flatten?]} mdata
         shapes (mf/deref refs/selected-objects)
+        hover-ids (mf/deref refs/current-hover-ids)
+        hover-objs (mf/deref (refs/objects-by-id hover-ids))
 
         props #js {:shapes shapes
+                   :hover-objs hover-objs
                    :disable-booleans? disable-booleans?
                    :disable-flatten? disable-flatten?}]
     (when-not (empty? shapes)

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

@@ -115,7 +115,7 @@
         text-editing?     (and edition (= :text (get-in base-objects [edition :type])))
 
         on-click          (actions/on-click hover selected edition drawing-path? drawing-tool)
-        on-context-menu   (actions/on-context-menu hover)
+        on-context-menu   (actions/on-context-menu hover hover-ids)
         on-double-click   (actions/on-double-click hover hover-ids drawing-path? base-objects edition)
         on-drag-enter     (actions/on-drag-enter)
         on-drag-over      (actions/on-drag-over)

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

@@ -186,9 +186,9 @@
                          (dw/start-editing-selected))))))))
 
 (defn on-context-menu
-  [hover]
+  [hover hover-ids]
   (mf/use-callback
-   (mf/deps @hover)
+   (mf/deps @hover @hover-ids)
    (fn [event]
      (when (or (dom/class? (dom/get-target event) "viewport-controls")
                (dom/class? (dom/get-target event) "viewport-selrect"))
@@ -200,18 +200,19 @@
           #(st/emit!
             (if (some? @hover)
               (dw/show-shape-context-menu {:position position
-                                           :shape @hover})
+                                           :shape @hover
+                                           :hover-ids @hover-ids})
               (dw/show-context-menu {:position position})))))))))
 
 (defn on-menu-selected
   [hover hover-ids selected]
   (mf/use-callback
-   (mf/deps @hover hover-ids selected)
+   (mf/deps @hover @hover-ids selected)
    (fn [event]
      (dom/prevent-default event)
      (dom/stop-propagation event)
      (let [position (dom/get-client-position event)]
-       (st/emit! (dw/show-shape-context-menu {:position position}))))))
+       (st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids}))))))
 
 (defn on-mouse-up
   [disable-paste]

frontend/translations/en.po

@@ -3162,6 +3162,10 @@ msgstr "Flip vertical"
 msgid "workspace.shape.menu.flow-start"
 msgstr "Flow start"
 
+#: src/app/main/ui/workspace/context_menu.cljs
+msgid "workspace.shape.menu.select-layer"
+msgstr "Select layer"
+
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.forward"
 msgstr "Bring forward"

frontend/translations/es.po

@@ -3175,6 +3175,10 @@ msgstr "Voltear vertical"
 msgid "workspace.shape.menu.flow-start"
 msgstr "Inicio de flujo"
 
+#: src/app/main/ui/workspace/context_menu.cljs
+msgid "workspace.shape.menu.select-layer"
+msgstr "Seleccionar capa"
+
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.forward"
 msgstr "Mover hacia delante"