3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 18:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Create variant from component with path

Browse source
This commit is contained in:
Pablo Alba 2025-03-05 16:57:19 +01:00
parent 2c789e48f3
commit 7eb9325047
1 changed files with 56 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

83
frontend/src/app/main/data/workspace/variants.cljs
View file

@ -10,6 +10,7 @@
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.changes-builder :as pcb] [app.common.files.changes-builder :as pcb]
[app.common.files.helpers :as cfh]
[app.common.logic.libraries :as cll] [app.common.logic.libraries :as cll]
[app.common.logic.variants :as clv] [app.common.logic.variants :as clv]
[app.common.types.component :as ctc] [app.common.types.component :as ctc]
@ -211,40 +212,68 @@
(watch [_ state _] (watch [_ state _]
(let [variant-id (uuid/next) (let [variant-id (uuid/next)
variant-vec [variant-id] variant-vec [variant-id]
new-component-id (uuid/next)
file-id (:current-file-id state) file-id (:current-file-id state)
page-id (:current-page-id state) page-id (:current-page-id state)
objects (dsh/lookup-page-objects state file-id page-id) objects (dsh/lookup-page-objects state file-id page-id)
main (get objects main-instance-id) main (get objects main-instance-id)
main-id (:id main) main-id (:id main)
component-id (:component-id main)
cpath (cfh/split-path (:name main))
name (first cpath)
num-props (max 1 (dec (count cpath)))
cont-props {:layout-item-h-sizing :auto
:layout-item-v-sizing :auto
:layout-padding {:p1 30 :p2 30 :p3 30 :p4 30}
:layout-gap {:row-gap 0 :column-gap 20}
:name name
:r1 20
:r2 20
:r3 20
:r4 20
:is-variant-container true}
main-props {:layout-item-h-sizing :fix
:layout-item-v-sizing :fix
:variant-id variant-id
:name name}
stroke-props {:stroke-alignment :inner
:stroke-style :solid
:stroke-color "#bb97d8" ;; todo use color var?
:stroke-opacity 1
:stroke-width 2}
undo-id (js/Symbol)] undo-id (js/Symbol)]
(rx/of
(dwu/start-undo-transaction undo-id) (rx/concat
(dwsh/create-artboard-from-selection variant-id) (rx/of
(cl/remove-all-fills variant-vec {:color clr/black :opacity 1}) (dwu/start-undo-transaction undo-id)
(dwsl/create-layout-from-id variant-id :flex)
(dwsh/update-shapes variant-vec #(assoc % :layout-item-h-sizing :auto (when (not= name (:name main))
:layout-item-v-sizing :auto (dwl/rename-component component-id name))
:layout-padding {:p1 30 :p2 30 :p3 30 :p4 30}
:layout-gap {:row-gap 0 :column-gap 20} ;; Create variant container
:name (:name main) (dwsh/create-artboard-from-selection variant-id)
:r1 20 (cl/remove-all-fills variant-vec {:color clr/black :opacity 1})
:r2 20 (dwsl/create-layout-from-id variant-id :flex)
:r3 20 (dwsh/update-shapes variant-vec #(merge % cont-props))
:r4 20 (dwsh/update-shapes [main-id] #(merge % main-props))
:is-variant-container true)) (cl/add-stroke variant-vec stroke-props)
(dwsh/update-shapes [main-id] #(assoc % :layout-item-h-sizing :fix :layout-item-v-sizing :fix :variant-id variant-id)) (set-variant-id component-id variant-id))
(cl/add-stroke variant-vec {:stroke-alignment :inner
:stroke-style :solid ;; Add the necessary number of new properties, with default values
:stroke-color "#bb97d8" ;; todo use color var? (rx/from
:stroke-opacity 1 (repeatedly num-props
:stroke-width 2}) #(add-new-property variant-id {:fill-values? true})))
(dwl/duplicate-component file-id (:component-id main) new-component-id)
(set-variant-id (:component-id main) variant-id) ;; When the component has path, set the path items as properties values
(set-variant-id new-component-id variant-id) (when (> (count cpath) 1)
(add-new-property variant-id {:fill-values? true}) (rx/from
(dwu/commit-undo-transaction undo-id)))))) (map
#(update-property-value component-id % (nth cpath (inc %)))
(range num-props))))
(rx/of
(add-new-variant main-instance-id)
(dwu/commit-undo-transaction undo-id)))))))
(defn add-component-or-variant (defn add-component-or-variant
[] []