✨ Add artboard selection

CHANGES.md

@@ -5,6 +5,7 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
+- Add shortcut to create artboard from selected objects [Taiga #2412](https://tree.taiga.io/project/penpot/us/2412).
 - Add shortcut for opacity [Taiga #2442](https://tree.taiga.io/project/penpot/us/2442).
 - Setting fill automatically for new texts [Taiga #2441](https://tree.taiga.io/project/penpot/us/2441).
 - Add shortcut to move action [Github #1213](https://github.com/penpot/penpot/issues/1213).

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

@@ -97,7 +97,7 @@
 
 (def layout-presets
   {:assets
-   {:del #{:sitemap :layers :document-history }
+   {:del #{:sitemap :layers :document-history}
     :add #{:assets}}
 
    :document-history
@@ -1900,6 +1900,35 @@
                                  :value previous-color}]
                  :origin it}))))))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Artboard
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn create-artboard-from-selection
+  []
+  (ptk/reify ::create-artboard-from-selection
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [page-id       (:current-page-id state)
+            objects       (wsh/lookup-page-objects state page-id)
+            shapes        (cp/select-toplevel-shapes objects {:include-frames? true})
+            selected      (wsh/lookup-selected state)
+            selected-objs (map #(get objects %) selected)
+            has-frame?    (some #(= (:type %) :frame) selected-objs)]
+        (when (not (or (empty? selected) has-frame?))
+          (let [srect    (gsh/selection-rect selected-objs)
+                frame-id (:frame-id (first shapes))
+                shape    (-> (cp/make-minimal-shape :frame)
+                             (merge {:x (:x srect) :y (:y srect) :width (:width srect) :height (:height srect)})
+                             (assoc :frame-id frame-id)
+                             (gsh/setup-selrect))]
+            (rx/of
+              (dwu/start-undo-transaction)
+              (dwc/add-shape shape) 
+              (dwc/move-shapes-into-frame (:id shape) selected)
+              (dwu/commit-undo-transaction))))))))
+
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Exports
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

@@ -332,7 +332,11 @@
 
    :toggle-lock-size     {:tooltip (ds/meta (ds/alt "L"))
                           :command (ds/c-mod "alt+l")
-                          :fn #(st/emit! (dw/toggle-proportion-lock))}})
+                          :fn #(st/emit! (dw/toggle-proportion-lock))}
+
+   :create-artboard-from-selection   {:tooltip (ds/meta (ds/alt "G"))
+                          :command (ds/c-mod "alt+g")
+                          :fn #(st/emit! (dw/create-artboard-from-selection))}})
 
 (def opacity-shortcuts
   (into {} (->>

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

@@ -148,6 +148,7 @@
 
   (let [multiple? (> (count shapes) 1)
         single?   (= (count shapes) 1)
+        do-create-artboard-from-selection (st/emitf (dw/create-artboard-from-selection))
 
         has-group? (->> shapes (d/seek #(= :group (:type %))))
         has-bool? (->> shapes (d/seek #(= :bool (:type %))))
@@ -184,7 +185,11 @@
                        :on-click do-unmask-group}])
 
      (when (not has-frame?)
-       [:& menu-separator])]))
+       [:*
+         [:& menu-entry {:title (tr "workspace.shape.menu.create-artboard-from-selection")
+                         :shortcut (sc/get-tooltip :create-artboard-from-selection)
+                         :on-click do-create-artboard-from-selection}]
+         [:& menu-separator]])]))
 
 (mf/defc context-menu-path
   [{:keys [shapes disable-flatten? disable-booleans?]}]

frontend/translations/en.po

@@ -3041,6 +3041,10 @@ msgstr "Flip horizontal"
 msgid "workspace.shape.menu.flip-vertical"
 msgstr "Flip vertical"
 
+#: src/app/main/ui/workspace/context_menu.cljs
+msgid "workspace.shape.menu.create-artboard-from-selection"
+msgstr "Selection to artboard"
+
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.flow-start"
 msgstr "Flow start"

frontend/translations/es.po

@@ -3040,6 +3040,10 @@ msgstr "Voltear horizontal"
 msgid "workspace.shape.menu.flip-vertical"
 msgstr "Voltear vertical"
 
+#: src/app/main/ui/workspace/context_menu.cljs
+msgid "workspace.shape.menu.create-artboard-from-selection"
+msgstr "Tablero de selección"
+
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.flow-start"
 msgstr "Inicio de flujo"