Merge pull request #7947 from penpot/elenatorro-12880-fix-variant-ui

🔧 Support variants interactivity on the new render's UI

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

@@ -12,10 +12,12 @@
    [app.common.files.helpers :as cfh]
    [app.common.geom.shapes :as gsh]
    [app.common.types.color :as clr]
+   [app.common.types.component :as ctk]
    [app.common.types.path :as path]
    [app.common.types.shape :as cts]
    [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.transforms :as dwt]
+   [app.main.data.workspace.variants :as dwv]
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -257,6 +259,16 @@
 
         first-shape (first selected-shapes)
 
+        show-add-variant?        (and single-select?
+                                      (or (ctk/is-variant-container? first-shape)
+                                          (ctk/is-variant? first-shape)))
+
+        add-variant
+        (mf/use-fn
+         (mf/deps first-shape)
+         #(st/emit!
+           (dwv/add-new-variant (:id first-shape))))
+
         show-padding?
         (and (nil? transform)
              single-select?
@@ -663,6 +675,11 @@
           {:id (first selected)
            :zoom zoom}])
 
+       (when show-add-variant?
+         [:> widgets/button-add* {:shape first-shape
+                                  :zoom zoom
+                                  :on-click add-variant}])
+
        [:g.grid-layout-editor {:clipPath "url(#clip-handlers)"}
         (when show-grid-editor?
           [:& grid-layout/editor