mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 20:56:13 +02:00
✨ Add, edit and delete variant properties from layer panel (#6257)
This commit is contained in:
luisδμ
GitHub
parent
b6f2a434cf
commit
e7144142e5
6 changed files with 236 additions and 24 deletions
|
|
@ -17,6 +17,7 @@
|
|||
[app.common.types.component :as ctc]
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.shape.layout :as ctsl]
|
||||
[app.common.types.variant :as ctv]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.changes :as dch]
|
||||
[app.main.data.helpers :as dsh]
|
||||
|
|
@ -32,6 +33,59 @@
|
|||
[beicon.v2.core :as rx]
|
||||
[potok.v2.core :as ptk]))
|
||||
|
||||
(defn update-properties-names-and-values
|
||||
"Compares the previous properties with the updated ones and executes the correspondent action
|
||||
for each one depending on if it needs to be removed, updated or added"
|
||||
[component-id variant-id previous-properties updated-properties]
|
||||
(ptk/reify ::update-properties-names-and-values
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :workspace-local dissoc :shape-for-rename))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [page-id (:current-page-id state)
|
||||
data (dsh/lookup-file-data state)
|
||||
objects (-> (dsh/get-page data page-id)
|
||||
(get :objects))
|
||||
|
||||
properties-to-remove (ctv/find-properties-to-remove previous-properties updated-properties)
|
||||
properties-to-add (ctv/find-properties-to-add previous-properties updated-properties)
|
||||
properties-to-update (ctv/find-properties-to-update previous-properties updated-properties)
|
||||
|
||||
changes (-> (pcb/empty-changes it page-id)
|
||||
(pcb/with-objects objects)
|
||||
(pcb/with-library-data data))
|
||||
|
||||
changes (reduce
|
||||
(fn [changes {:keys [name]}]
|
||||
(-> changes
|
||||
(clvp/generate-update-property-value component-id (ctv/find-index-for-property-name previous-properties name) "")))
|
||||
changes
|
||||
properties-to-remove)
|
||||
|
||||
changes (reduce
|
||||
(fn [changes {:keys [name value]}]
|
||||
(-> changes
|
||||
(clvp/generate-update-property-value component-id (ctv/find-index-for-property-name previous-properties name) value)))
|
||||
changes
|
||||
properties-to-update)
|
||||
|
||||
changes (reduce
|
||||
(fn [changes [idx {:keys [name value]}]]
|
||||
(-> changes
|
||||
(clvp/generate-add-new-property variant-id {:property-name name})
|
||||
(clvp/generate-update-property-value component-id (+ idx (count previous-properties)) value)))
|
||||
changes
|
||||
(map-indexed vector properties-to-add))
|
||||
|
||||
undo-id (js/Symbol)]
|
||||
|
||||
(rx/of
|
||||
(dwu/start-undo-transaction undo-id)
|
||||
(dch/commit-changes changes)
|
||||
(dwu/commit-undo-transaction undo-id))))))
|
||||
|
||||
(defn update-property-name
|
||||
"Update the variant property name on the position pos
|
||||
in all the components with this variant-id"
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.common.files.helpers :as cfh]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.container :as ctn]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
[app.common.uuid :as uuid]
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name]]
|
||||
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name*]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -54,10 +55,16 @@
|
|||
(= uuid/zero (:parent-id item)))
|
||||
absolute? (ctl/item-absolute? item)
|
||||
main-instance? (:main-instance item)
|
||||
|
||||
variants? (features/use-feature "variants/v1")
|
||||
is-variant? (when variants? (ctk/is-variant? item))
|
||||
is-variant-container? (when variants? (ctk/is-variant-container? item))
|
||||
variant-id (when is-variant? (:variant-id item))
|
||||
variant-name (when is-variant? (:variant-name item))
|
||||
is-variant-container? (when variants? (ctk/is-variant-container? item))]
|
||||
|
||||
data (deref refs/workspace-data)
|
||||
component (ctkl/get-component data (:component-id item))
|
||||
variant-properties (:variant-properties component)]
|
||||
[:*
|
||||
[:div {:id id
|
||||
:ref dref
|
||||
|
|
@ -121,21 +128,24 @@
|
|||
{:shape item
|
||||
:main-instance? main-instance?}]]])
|
||||
|
||||
[:& layer-name {:ref name-ref
|
||||
:shape-id id
|
||||
:shape-name name
|
||||
:is-shape-touched touched?
|
||||
:disabled-double-click read-only?
|
||||
:on-start-edit on-disable-drag
|
||||
:on-stop-edit on-enable-drag
|
||||
:depth depth
|
||||
:is-blocked blocked?
|
||||
:parent-size parent-size
|
||||
:is-selected selected?
|
||||
:type-comp (or component-tree? is-variant-container?)
|
||||
:type-frame (cfh/frame-shape? item)
|
||||
:variant-name variant-name
|
||||
:is-hidden hidden?}]
|
||||
[:> layer-name* {:ref name-ref
|
||||
:shape-id id
|
||||
:shape-name name
|
||||
:is-shape-touched touched?
|
||||
:disabled-double-click read-only?
|
||||
:on-start-edit on-disable-drag
|
||||
:on-stop-edit on-enable-drag
|
||||
:depth depth
|
||||
:is-blocked blocked?
|
||||
:parent-size parent-size
|
||||
:is-selected selected?
|
||||
:type-comp (or component-tree? is-variant-container?)
|
||||
:type-frame (cfh/frame-shape? item)
|
||||
:variant-id variant-id
|
||||
:variant-name variant-name
|
||||
:variant-properties variant-properties
|
||||
:component-id (:id component)
|
||||
:is-hidden hidden?}]
|
||||
|
||||
(when (not read-only?)
|
||||
[:div {:class (stl/css-case
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.types.variant :as ctv]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.variants :as dwv]
|
||||
[app.main.store :as st]
|
||||
[app.util.debug :as dbg]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -24,12 +26,13 @@
|
|||
(-> (l/in [:workspace-local :shape-for-rename])
|
||||
(l/derived st/state)))
|
||||
|
||||
(mf/defc layer-name
|
||||
(mf/defc layer-name*
|
||||
{::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[{:keys [shape-id shape-name is-shape-touched disabled-double-click
|
||||
on-start-edit on-stop-edit depth parent-size is-selected
|
||||
type-comp type-frame variant-name is-hidden is-blocked]} external-ref]
|
||||
type-comp type-frame variant-id variant-name variant-properties
|
||||
component-id is-hidden is-blocked]} external-ref]
|
||||
(let [edition* (mf/use-state false)
|
||||
edition? (deref edition*)
|
||||
|
||||
|
|
@ -39,6 +42,9 @@
|
|||
shape-for-rename (mf/deref lens:shape-for-rename)
|
||||
|
||||
shape-name (d/nilv variant-name shape-name)
|
||||
default-value (if variant-id
|
||||
(ctv/properties-map-to-string variant-properties)
|
||||
shape-name)
|
||||
|
||||
has-path? (str/includes? shape-name "/")
|
||||
|
||||
|
|
@ -54,13 +60,17 @@
|
|||
|
||||
accept-edit
|
||||
(mf/use-fn
|
||||
(mf/deps shape-id on-stop-edit)
|
||||
(mf/deps shape-id on-stop-edit component-id variant-id variant-name variant-properties)
|
||||
(fn []
|
||||
(let [name-input (mf/ref-val ref)
|
||||
name (str/trim (dom/get-value name-input))]
|
||||
(on-stop-edit)
|
||||
(reset! edition* false)
|
||||
(st/emit! (dw/end-rename-shape shape-id name)))))
|
||||
(if variant-name
|
||||
(let [valid? (ctv/valid-properties-string? name)
|
||||
props (if valid? (ctv/properties-string-to-map name) {})]
|
||||
(st/emit! (dwv/update-properties-names-and-values component-id variant-id variant-properties props)))
|
||||
(st/emit! (dw/end-rename-shape shape-id name))))))
|
||||
|
||||
cancel-edit
|
||||
(mf/use-fn
|
||||
|
|
@ -99,7 +109,7 @@
|
|||
:on-blur accept-edit
|
||||
:on-key-down on-key-down
|
||||
:auto-focus true
|
||||
:default-value (d/nilv shape-name "")}]
|
||||
:default-value (d/nilv default-value "")}]
|
||||
[:*
|
||||
[:span
|
||||
{:class (stl/css-case
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue