wip

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

@@ -211,8 +211,13 @@
   [ids]
   (ptk/reify ::remove-shape-layout
     ptk/WatchEvent
-    (watch [_ _ _]
+    (watch [_ state _]
-      (let [undo-id (js/Symbol)]
+      (let [objects   (dsh/lookup-page-objects state)
+            ids    (->> ids
+                        (map #(get objects %))
+                        (remove ctc/is-variant-container?)
+                        (map :id))
+            undo-id (js/Symbol)]
         (rx/of
          (dwu/start-undo-transaction undo-id)
          (dwsh/update-shapes ids #(apply dissoc % layout-keys))
@@ -234,11 +239,12 @@
             selected-shapes  (map (d/getf objects) selected)
             single?          (= (count selected-shapes) 1)
             is-frame?        (= :frame (:type (first selected-shapes)))
+            is-variant-cont? (ctc/is-variant-container? (first selected-shapes))
             undo-id          (js/Symbol)]
 
         (rx/of
          (dwu/start-undo-transaction undo-id)
-         (if (and single? is-frame?)
+         (if (and single? is-frame? (not is-variant-cont?))
            (create-layout-from-id (first selected) type :from-frame? true)
            (create-layout-from-selection type))
          (dwu/commit-undo-transaction undo-id))))))

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

@@ -968,7 +968,10 @@
      (watch [_ state _]
        (let [objects   (dsh/lookup-page-objects state)
              selected  (or ids (dsh/lookup-selected state {:omit-blocked? true}))
-             shapes    (map #(get objects %) selected)
+             shapes    (->> selected
+                            (map #(get objects %))
+                            (remove ctk/is-variant-container?))
+             selected  (->> shapes (map :id))
              selrect   (gsh/shapes->rect shapes)
              center    (grc/rect->center selrect)
              modifiers (dwm/create-modif-tree selected (ctm/resize-modifiers (gpt/point -1.0 1.0) center))]
@@ -983,7 +986,10 @@
      (watch [_ state _]
        (let [objects   (dsh/lookup-page-objects state)
              selected  (or ids (dsh/lookup-selected state {:omit-blocked? true}))
-             shapes    (map #(get objects %) selected)
+             shapes    (->> selected
+                            (map #(get objects %))
+                            (remove ctk/is-variant-container?))
+             selected  (->> shapes (map :id))
              selrect   (gsh/shapes->rect shapes)
              center    (grc/rect->center selrect)
              modifiers (dwm/create-modif-tree selected (ctm/resize-modifiers (gpt/point 1.0 -1.0) center))]

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

@@ -146,7 +146,7 @@
             objects      (dsh/lookup-page-objects state file-id page-id)
             main         (get objects main-instance-id)
             main-id      (:id main)
-            undo-id      (js/Symbol)]
+            undo-id      (js/Symbol)            ]
 
         (rx/of
          (dwu/start-undo-transaction undo-id)

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

@@ -317,11 +317,12 @@
   {::mf/props :obj
    ::mf/private true}
   [{:keys [shapes]}]
-  (let [multiple?    (> (count shapes) 1)
+  (let [multiple?       (> (count shapes) 1)
-        single?      (= (count shapes) 1)
+        single?         (= (count shapes) 1)
 
-        objects      (deref refs/workspace-page-objects)
+        objects         (deref refs/workspace-page-objects)
-        any-in-copy? (some true? (map #(ctn/has-any-copy-parent? objects %) shapes))
+        any-in-copy?    (some true? (map #(ctn/has-any-copy-parent? objects %) shapes))
+        any-is-variant? (some ctk/is-variant? shapes)
 
         ;; components can't be ungrouped
         has-frame? (->> shapes (d/seek #(and (cfh/frame-shape? %) (not (ctk/instance-head? %)) (not (ctk/is-variant-container? %)))))
@@ -340,7 +341,7 @@
         #(st/emit! (dwsh/create-artboard-from-selection))]
 
     [:*
-     (when (not any-in-copy?)
+     (when (not (or any-in-copy? any-is-variant?))
        [:*
         (when (or has-bool? has-group? has-mask? has-frame?)
           [:> menu-entry* {:title (tr "workspace.shape.menu.ungroup")
@@ -503,6 +504,8 @@
         has-grid?
         (and single? (every? ctl/grid-layout? shapes))
 
+        any-is-variant? (some ctk/is-variant? shapes)
+
         on-add-layout
         (mf/use-fn
          (fn [event]
@@ -532,16 +535,17 @@
                              :shortcut (sc/get-tooltip :toggle-layout-grid)
                              :on-click on-remove-layout}])]
 
-         [:div
+         (when (or single? (not any-is-variant?))
-          [:> menu-separator* {}]
+           [:div
-          [:> menu-entry* {:title (tr "workspace.shape.menu.add-flex")
+            [:> menu-separator* {}]
-                           :shortcut (sc/get-tooltip :toggle-layout-flex)
+            [:> menu-entry* {:title (tr "workspace.shape.menu.add-flex")
-                           :value "flex"
+                             :shortcut (sc/get-tooltip :toggle-layout-flex)
-                           :on-click on-add-layout}]
+                             :value "flex"
-          [:> menu-entry* {:title (tr "workspace.shape.menu.add-grid")
+                             :on-click on-add-layout}]
-                           :shortcut (sc/get-tooltip :toggle-layout-grid)
+            [:> menu-entry* {:title (tr "workspace.shape.menu.add-grid")
-                           :value "grid"
+                             :shortcut (sc/get-tooltip :toggle-layout-grid)
-                           :on-click on-add-layout}]]))]))
+                             :value "grid"
+                             :on-click on-add-layout}]])))]))
 
 (mf/defc context-menu-component*
   {:mf/private true}
@@ -593,6 +597,7 @@
   [{:keys [mdata]}]
   (let [{:keys [disable-booleans disable-flatten]} mdata
         shapes (mf/deref refs/selected-objects)
+        is-not-variant-container? (->> shapes (d/seek #(not (ctk/is-variant-container? %))))
         props  (mf/props
                 {:shapes shapes
                  :disable-booleans disable-booleans
@@ -601,7 +606,8 @@
       [:*
        [:> context-menu-edit* props]
        [:> context-menu-layer-position* props]
-       [:> context-menu-flip* props]
+       (when is-not-variant-container?
+         [:> context-menu-flip* props])
        [:> context-menu-thumbnail* props]
        [:> context-menu-rename* props]
        [:> context-menu-group* props]
@@ -609,7 +615,8 @@
        [:> context-menu-path* props]
        [:> context-menu-layer-options* props]
        [:> context-menu-prototype* props]
-       [:> context-menu-layout* props]
+       (when is-not-variant-container?
+         [:> context-menu-layout* props])
        [:> context-menu-component* props]
        [:> context-menu-delete* props]])))
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -739,8 +739,7 @@
 
 (mf/defc variant-menu*
   [{:keys [shapes]}]
-  (let [;; TODO check multi. What is shown? User can change properties like width?
+  (let [multi              (> (count shapes) 1)
-        multi              (> (count shapes) 1)
 
         shape              (first shapes)
         shape-name         (:name shape)
@@ -838,13 +837,14 @@
                                     :on-close on-menu-close
                                     :menu-entries menu-entries
                                     :main-instance true}]])]
-        [:*
+        (when-not multi
-         (for [[pos property] (map vector (range) properties)]
+          [:*
-           (let [val (str/join ", " (:values property))]
+           (for [[pos property] (map vector (range) properties)]
-             [:div {:key (str (:id shape) (:name property)) :class (stl/css :variant-property-row)}
+             (let [val (str/join ", " (:values property))]
-              [:> input-with-values* {:name (:name property) :values val :on-blur (partial update-property-name pos)}]
+               [:div {:key (str (:id shape) (:name property)) :class (stl/css :variant-property-row)}
-              [:> icon-button* {:variant "ghost"
+                [:> input-with-values* {:name (:name property) :values val :on-blur (partial update-property-name pos)}]
-                                :aria-label (tr "workspace.shape.menu.remove-variant-property")
+                [:> icon-button* {:variant "ghost"
-                                :on-click (partial remove-property pos)
+                                  :aria-label (tr "workspace.shape.menu.remove-variant-property")
-                                :icon "remove"
+                                  :on-click (partial remove-property pos)
-                                :disabled (<= (count properties) 1)}]]))]]])))
+                                  :icon "remove"
+                                  :disabled (<= (count properties) 1)}]]))])]])))

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -71,8 +71,6 @@
         variants?                 (features/use-feature "variants/v1")
         is-variant?               (when variants? (:is-variant-container shape))]
 
-    (if is-variant?
-      [:> variant-menu* {:shapes [shape]}]
       [:*
        [:& layer-menu {:ids ids
                        :type shape-type
@@ -84,6 +82,9 @@
 
        [:& component-menu {:shapes [shape]}]
 
+       (when is-variant?
+         [:> variant-menu* {:shapes [shape]}])
+
        [:& layout-container-menu
         {:type shape-type
          :ids [(:id shape)]
@@ -125,4 +126,4 @@
        [:> shadow-menu* {:ids ids :values (get shape :shadow)}]
        [:& blur-menu {:ids ids
                       :values (select-keys shape [:blur])}]
-       [:& frame-grid {:shape shape}]])))
+       [:& frame-grid {:shape shape}]]))