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

✨ Adapt to handoff changes

Browse source
This commit is contained in:
alonso.torres 2022-10-27 15:18:41 +02:00
parent 94602feab1
commit cebda20dd4
8 changed files with 384 additions and 372 deletions
Download patch file Download diff file Expand all files Collapse all files

180
common/src/app/common/pages/common.cljc
View file

@ -83,14 +83,16 @@
:layout-h-orientation :layout-container :layout-h-orientation :layout-container
:layout-v-orientation :layout-container :layout-v-orientation :layout-container
:layout-margin :layout-item :layout-item-margin :layout-item
:layout-margin-type :layout-item :layout-item-margin-type :layout-item
:layout-h-behavior :layout-item :layout-item-h-sizing :layout-item
:layout-v-behavior :layout-item :layout-item-v-sizing :layout-item
:layout-max-h :layout-item :layout-item-max-h :layout-item
:layout-min-h :layout-item :layout-item-min-h :layout-item
:layout-max-w :layout-item :layout-item-max-w :layout-item
:layout-min-w :layout-item}) :layout-item-min-w :layout-item
:layout-item-align-self :layout-item
})
;; Attributes that may directly be edited by the user with forms ;; Attributes that may directly be edited by the user with forms
(def editable-attrs (def editable-attrs
@ -133,23 +135,25 @@
:exports :exports
:layout :layout
:layout-dir :layout-flex-dir
:layout-gap :layout-gap
:layout-type :layout-gap-type
:layout-align-items
:layout-justify-content
:layout-align-content
:layout-wrap-type :layout-wrap-type
:layout-padding-type :layout-padding-type
:layout-padding :layout-padding
:layout-h-orientation
:layout-v-orientation
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:group #{:proportion-lock :group #{:proportion-lock
:width :height :width :height
@ -175,14 +179,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:rect #{:proportion-lock :rect #{:proportion-lock
:width :height :width :height
@ -229,14 +234,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:circle #{:proportion-lock :circle #{:proportion-lock
:width :height :width :height
@ -281,14 +287,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:path #{:proportion-lock :path #{:proportion-lock
:width :height :width :height
@ -333,14 +340,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:text #{:proportion-lock :text #{:proportion-lock
:width :height :width :height
@ -408,14 +416,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:image #{:proportion-lock :image #{:proportion-lock
:width :height :width :height
@ -443,14 +452,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:svg-raw #{:proportion-lock :svg-raw #{:proportion-lock
:width :height :width :height
@ -497,14 +507,15 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w} :layout-item-min-w
:layout-item-align-self}
:bool #{:proportion-lock :bool #{:proportion-lock
:width :height :width :height
@ -549,12 +560,13 @@
:exports :exports
:layout-margin :layout-item-margin
:layout-margin-type :layout-item-margin-type
:layout-h-behavior :layout-item-h-sizing
:layout-v-behavior :layout-item-v-sizing
:layout-max-h :layout-item-max-h
:layout-min-h :layout-item-min-h
:layout-max-w :layout-item-max-w
:layout-min-w}}) :layout-item-min-w
:layout-item-align-self}})

92
common/src/app/common/types/shape/layout.cljc
View file

@ -21,14 +21,14 @@
;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative ;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
;; ITEMS ;; ITEMS
;; :layout-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0} ;; :layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
;; :layout-margin-type ;; :simple :multiple ;; :layout-item-margin-type ;; :simple :multiple
;; :layout-h-behavior ;; :fill :fix :auto ;; :layout-item-h-sizing ;; :fill :fix :auto
;; :layout-v-behavior ;; :fill :fix :auto ;; :layout-item-v-sizing ;; :fill :fix :auto
;; :layout-max-h ;; num ;; :layout-item-max-h ;; num
;; :layout-min-h ;; num ;; :layout-item-min-h ;; num
;; :layout-max-w ;; num ;; :layout-item-max-w ;; num
;; :layout-min-w ;; :layout-item-min-w
(s/def ::layout #{:flex :grid}) (s/def ::layout #{:flex :grid})
(s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column}) (s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column})
@ -74,38 +74,38 @@
(s/def ::m3 ::us/safe-number) (s/def ::m3 ::us/safe-number)
(s/def ::m4 ::us/safe-number) (s/def ::m4 ::us/safe-number)
(s/def ::layout-margin (s/keys :req-un [::m1] (s/def ::layout-item-margin (s/keys :req-un [::m1]
:opt-un [::m2 ::m3 ::m4])) :opt-un [::m2 ::m3 ::m4]))
(s/def ::layout-margin-type #{:simple :multiple}) (s/def ::layout-item-margin-type #{:simple :multiple})
(s/def ::layout-h-behavior #{:fill :fix :auto}) (s/def ::layout-item-h-sizing #{:fill :fix :auto})
(s/def ::layout-v-behavior #{:fill :fix :auto}) (s/def ::layout-item-v-sizing #{:fill :fix :auto})
(s/def ::layout-align-self #{:start :end :center :stretch}) (s/def ::layout-item-align-self #{:start :end :center :stretch})
(s/def ::layout-max-h ::us/safe-number) (s/def ::layout-item-max-h ::us/safe-number)
(s/def ::layout-min-h ::us/safe-number) (s/def ::layout-item-min-h ::us/safe-number)
(s/def ::layout-max-w ::us/safe-number) (s/def ::layout-item-max-w ::us/safe-number)
(s/def ::layout-min-w ::us/safe-number) (s/def ::layout-item-min-w ::us/safe-number)
(s/def ::layout-child-props (s/def ::layout-child-props
(s/keys :opt-un [::layout-margin (s/keys :opt-un [::layout-item-margin
::layout-margin-type ::layout-item-margin-type
::layout-h-behavior ::layout-item-h-sizing
::layout-v-behavior ::layout-item-v-sizing
::layout-max-h ::layout-item-max-h
::layout-min-h ::layout-item-min-h
::layout-max-w ::layout-item-max-w
::layout-min-w ::layout-item-min-w
::layout-align-self])) ::layout-item-align-self]))
(defn wrap? [{:keys [layout-wrap-type]}] (defn wrap? [{:keys [layout-wrap-type]}]
(= layout-wrap-type :wrap)) (= layout-wrap-type :wrap))
(defn fill-width? [child] (defn fill-width? [child]
(= :fill (:layout-h-behavior child))) (= :fill (:layout-item-h-sizing child)))
(defn fill-height? [child] (defn fill-height? [child]
(= :fill (:layout-v-behavior child))) (= :fill (:layout-item-v-sizing child)))
(defn col? (defn col?
[{:keys [layout-flex-dir]}] [{:keys [layout-flex-dir]}]
@ -126,38 +126,38 @@
(defn child-min-width (defn child-min-width
[child] [child]
(if (and (fill-width? child) (if (and (fill-width? child)
(some? (:layout-min-w child))) (some? (:layout-item-min-w child)))
(max 0 (:layout-min-w child)) (max 0 (:layout-item-min-w child))
0)) 0))
(defn child-max-width (defn child-max-width
[child] [child]
(if (and (fill-width? child) (if (and (fill-width? child)
(some? (:layout-max-w child))) (some? (:layout-item-max-w child)))
(max 0 (:layout-max-w child)) (max 0 (:layout-item-max-w child))
##Inf)) ##Inf))
(defn child-min-height (defn child-min-height
[child] [child]
(if (and (fill-height? child) (if (and (fill-height? child)
(some? (:layout-min-h child))) (some? (:layout-item-min-h child)))
(max 0 (:layout-min-h child)) (max 0 (:layout-item-min-h child))
0)) 0))
(defn child-max-height (defn child-max-height
[child] [child]
(if (and (fill-height? child) (if (and (fill-height? child)
(some? (:layout-max-h child))) (some? (:layout-item-max-h child)))
(max 0 (:layout-max-h child)) (max 0 (:layout-item-max-h child))
##Inf)) ##Inf))
(defn child-margins (defn child-margins
[{{:keys [m1 m2 m3 m4]} :layout-margin :keys [layout-margin-type]}] [{{:keys [m1 m2 m3 m4]} :layout-item-margin :keys [layout-item-margin-type]}]
(let [m1 (or m1 0) (let [m1 (or m1 0)
m2 (or m2 0) m2 (or m2 0)
m3 (or m3 0) m3 (or m3 0)
m4 (or m4 0)] m4 (or m4 0)]
(if (= layout-margin-type :multiple) (if (= layout-item-margin-type :multiple)
[m1 m2 m3 m4] [m1 m2 m3 m4]
[m1 m1 m1 m1]))) [m1 m1 m1 m1])))
@ -252,14 +252,14 @@
[{:keys [layout-justify-content]}] [{:keys [layout-justify-content]}]
(= layout-justify-content :space-around)) (= layout-justify-content :space-around))
(defn align-self-start? [{:keys [layout-align-self]}] (defn align-self-start? [{:keys [layout-item-align-self]}]
(= :start layout-align-self)) (= :start layout-item-align-self))
(defn align-self-end? [{:keys [layout-align-self]}] (defn align-self-end? [{:keys [layout-item-align-self]}]
(= :end layout-align-self)) (= :end layout-item-align-self))
(defn align-self-center? [{:keys [layout-align-self]}] (defn align-self-center? [{:keys [layout-item-align-self]}]
(= :center layout-align-self)) (= :center layout-item-align-self))
(defn align-self-stretch? [{:keys [layout-align-self]}] (defn align-self-stretch? [{:keys [layout-item-align-self]}]
(= :stretch layout-align-self)) (= :stretch layout-item-align-self))

5
frontend/src/app/main/refs.cljs
View file

@ -442,7 +442,10 @@
(l/derived (l/derived
(fn [state] (fn [state]
(let [objects (wsh/lookup-viewer-objects state page-id)] (let [objects (wsh/lookup-viewer-objects state page-id)]
(filterv #(= :flex (:layout (cph/get-parent objects %))) ids))) (into []
(comp (filter #(= :flex (:layout (cph/get-parent objects %))))
(map #(get objects %)))
ids)))
st/state =)) st/state =))
(def colorpicker (def colorpicker

10
frontend/src/app/main/render.cljs
View file

@ -254,7 +254,7 @@
objects objects
(mf/with-memo [frame-id objects vector] (mf/with-memo [frame-id objects vector]
(let [update-fn #(update-in %1 %2 ctm/add-move vector)] (let [update-fn #(update %1 %2 gsh/transform-shape (ctm/move vector))]
(->> children-ids (->> children-ids
(into [frame-id]) (into [frame-id])
(reduce update-fn objects)))) (reduce update-fn objects))))
@ -290,7 +290,6 @@
:xmlnsXlink "http://www.w3.org/1999/xlink" :xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns") :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
:fill "none"} :fill "none"}
[:& shape-wrapper {:shape frame}]]])) [:& shape-wrapper {:shape frame}]]]))
@ -313,10 +312,9 @@
(mf/use-memo (mf/use-memo
(mf/deps vector objects group-id) (mf/deps vector objects group-id)
(fn [] (fn []
(let [modifier-ids (cons group-id (cph/get-children-ids objects group-id)) (let [children-ids (cons group-id (cph/get-children-ids objects group-id))
update-fn #(update %1 %2 ctm/add-move vector) update-fn #(update %1 %2 gsh/transform-shape (ctm/move vector))]
modifiers (reduce update-fn {} modifier-ids)] (reduce update-fn objects children-ids))))
(ctm/merge-modifiers objects modifiers))))
group (get objects group-id) group (get objects group-id)
width (* (:width group) zoom) width (* (:width group) zoom)

2
frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs
View file

@ -57,8 +57,6 @@
shapes (resolve-shapes objects [hover]) shapes (resolve-shapes objects [hover])
hover-shape (or (first shapes) frame) hover-shape (or (first shapes) frame)
hover-shape (gsh/translate-to-frame hover-shape size)
selected-shapes (resolve-shapes objects selected) selected-shapes (resolve-shapes objects selected)
selrect (gsh/selection-rect selected-shapes)] selrect (gsh/selection-rect selected-shapes)]

8
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -9,6 +9,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.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.modifiers :as ctm] [app.common.types.modifiers :as ctm]
[app.common.types.page :as ctp] [app.common.types.page :as ctp]
@ -29,13 +30,10 @@
(defn prepare-objects (defn prepare-objects
[frame size objects] [frame size objects]
(let [ (let [frame-id (:id frame)
frame-id (:id frame)
vector (-> (gpt/point (:x size) (:y size)) vector (-> (gpt/point (:x size) (:y size))
(gpt/negate)) (gpt/negate))
update-fn #(d/update-when %1 %2 gsh/transform-shape (ctm/move vector))]
update-fn #(d/update-when %1 %2 ctm/add-move vector)]
(->> (cph/get-children-ids objects frame-id) (->> (cph/get-children-ids objects frame-id)
(into [frame-id]) (into [frame-id])
(reduce update-fn objects)))) (reduce update-fn objects))))

19
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -129,7 +129,7 @@
[{:keys [is-col? align-items set-align] :as props}] [{:keys [is-col? align-items set-align] :as props}]
[:div.align-items-style [:div.align-items-style
(for [align [:start :center :end :stretch]] (for [align [:start :center :end #_:stretch #_:baseline]]
[:button.align-start.tooltip [:button.align-start.tooltip
{:class (dom/classnames :active (= align-items align) {:class (dom/classnames :active (= align-items align)
:tooltip-bottom-left (not= align :start) :tooltip-bottom-left (not= align :start)
@ -274,13 +274,14 @@
(st/emit! (dwsl/remove-layout ids)) (st/emit! (dwsl/remove-layout ids))
(reset! open? false)) (reset! open? false))
set-flex (fn [] ;; Uncomment when activating the grid options
(st/emit! (dwsl/remove-layout ids)) ;; set-flex (fn []
(on-add-layout :flex)) ;; (st/emit! (dwsl/remove-layout ids))
;; (on-add-layout :flex))
set-grid (fn [] ;;
(st/emit! (dwsl/remove-layout ids)) ;; set-grid (fn []
(on-add-layout :grid)) ;; (st/emit! (dwsl/remove-layout ids))
;; (on-add-layout :grid))
;; Flex-direction ;; Flex-direction
@ -365,7 +366,7 @@
[:span "Layout"] [:span "Layout"]
(if (:layout values) (if (:layout values)
[:div.title-actions [:div.title-actions
[:div.layout-btns #_[:div.layout-btns
[:button {:on-click set-flex [:button {:on-click set-flex
:class (dom/classnames :class (dom/classnames
:active (= :flex layout-type))} "Flex"] :active (= :flex layout-type))} "Flex"]

52
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -32,7 +32,7 @@
(mf/defc margin-section (mf/defc margin-section
[{:keys [values change-margin-style on-margin-change] :as props}] [{:keys [values change-margin-style on-margin-change] :as props}]
(let [margin-type (or (:layout-margin-type values) :simple)] (let [margin-type (or (:layout-item-margin-type values) :simple)]
[:div.margin-row [:div.margin-row
[:div.margin-icons [:div.margin-icons
@ -57,7 +57,7 @@
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-margin-change :simple) :on-change (partial on-margin-change :simple)
:value (or (-> values :layout-margin :m1) 0)}]]] :value (or (-> values :layout-item-margin :m1) 0)}]]]
(= margin-type :multiple) (= margin-type :multiple)
(for [num [:m1 :m2 :m3 :m4]] (for [num [:m1 :m2 :m3 :m4]]
@ -73,10 +73,10 @@
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-margin-change num) :on-change (partial on-margin-change num)
:value (or (-> values :layout-margin num) 0)}]]]))]])) :value (or (-> values :layout-item-margin num) 0)}]]]))]]))
(mf/defc element-behavior (mf/defc element-behavior
[{:keys [is-layout-container? is-layout-child? layout-h-behavior layout-v-behavior on-change-behavior] :as props}] [{:keys [is-layout-container? is-layout-child? layout-item-h-sizing layout-item-v-sizing on-change-behavior] :as props}]
(let [fill? is-layout-child? (let [fill? is-layout-child?
auto? is-layout-container?] auto? is-layout-container?]
@ -84,45 +84,45 @@
[:div.layout-behavior.horizontal [:div.layout-behavior.horizontal
[:button.behavior-btn.tooltip.tooltip-bottom [:button.behavior-btn.tooltip.tooltip-bottom
{:alt "Fix width" {:alt "Fix width"
:class (dom/classnames :active (= layout-h-behavior :fix)) :class (dom/classnames :active (= layout-item-h-sizing :fix))
:on-click #(on-change-behavior :h :fix)} :on-click #(on-change-behavior :h :fix)}
i/auto-fix-layout] i/auto-fix-layout]
(when fill? (when fill?
[:button.behavior-btn.tooltip.tooltip-bottom [:button.behavior-btn.tooltip.tooltip-bottom
{:alt "Width 100%" {:alt "Width 100%"
:class (dom/classnames :active (= layout-h-behavior :fill)) :class (dom/classnames :active (= layout-item-h-sizing :fill))
:on-click #(on-change-behavior :h :fill)} :on-click #(on-change-behavior :h :fill)}
i/auto-fill]) i/auto-fill])
(when auto? (when auto?
[:button.behavior-btn.tooltip.tooltip-bottom [:button.behavior-btn.tooltip.tooltip-bottom
{:alt "Fit content" {:alt "Fit content"
:class (dom/classnames :active (= layout-v-behavior :auto)) :class (dom/classnames :active (= layout-item-v-sizing :auto))
:on-click #(on-change-behavior :h :auto)} :on-click #(on-change-behavior :h :auto)}
i/auto-hug])] i/auto-hug])]
[:div.layout-behavior [:div.layout-behavior
[:button.behavior-btn.tooltip.tooltip-bottom [:button.behavior-btn.tooltip.tooltip-bottom
{:alt "Fix height" {:alt "Fix height"
:class (dom/classnames :active (= layout-v-behavior :fix)) :class (dom/classnames :active (= layout-item-v-sizing :fix))
:on-click #(on-change-behavior :v :fix)} :on-click #(on-change-behavior :v :fix)}
i/auto-fix-layout] i/auto-fix-layout]
(when fill? (when fill?
[:button.behavior-btn.tooltip.tooltip-bottom [:button.behavior-btn.tooltip.tooltip-bottom
{:alt "Height 100%" {:alt "Height 100%"
:class (dom/classnames :active (= layout-v-behavior :fill)) :class (dom/classnames :active (= layout-item-v-sizing :fill))
:on-click #(on-change-behavior :v :fill)} :on-click #(on-change-behavior :v :fill)}
i/auto-fill]) i/auto-fill])
(when auto? (when auto?
[:button.behavior-btn.tooltip.tooltip-bottom-left [:button.behavior-btn.tooltip.tooltip-bottom-left
{:alt "Fit content" {:alt "Fit content"
:class (dom/classnames :active (= layout-v-behavior :auto)) :class (dom/classnames :active (= layout-item-v-sizing :auto))
:on-click #(on-change-behavior :v :auto)} :on-click #(on-change-behavior :v :auto)}
i/auto-hug])]])) i/auto-hug])]]))
(mf/defc align-self-row (mf/defc align-self-row
[{:keys [is-col? align-self set-align-self] :as props}] [{:keys [is-col? align-self set-align-self] :as props}]
(let [dir-v [:start :center :end :stretch :baseline]] (let [dir-v [:start :center :end #_:stretch #_:baseline]]
[:div.align-self-style [:div.align-self-style
(for [align dir-v] (for [align dir-v]
[:button.align-self.tooltip.tooltip-bottom [:button.align-self.tooltip.tooltip-bottom
@ -143,11 +143,13 @@
change-margin-style change-margin-style
(fn [type] (fn [type]
(st/emit! (dwsl/update-layout-child ids {:layout-margin-type type}))) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
align-self (:layout-align-self values) align-self (:layout-item-align-self values)
set-align-self (fn [value] set-align-self (fn [value]
(st/emit! (dwsl/update-layout-child ids {:layout-align-self value}))) (if (= align-self value)
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
saved-dir (:layout-flex-dir values) saved-dir (:layout-flex-dir values)
is-col? (or (= :column saved-dir) (= :reverse-column saved-dir)) is-col? (or (= :column saved-dir) (= :reverse-column saved-dir))
@ -155,14 +157,14 @@
on-margin-change on-margin-change
(fn [type val] (fn [type val]
(if (= type :simple) (if (= type :simple)
(st/emit! (dwsl/update-layout-child ids {:layout-margin {:m1 val :m2 val :m3 val :m4 val}})) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m1 val :m2 val :m3 val :m4 val}}))
(st/emit! (dwsl/update-layout-child ids {:layout-margin {type val}})))) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {type val}}))))
on-change-behavior on-change-behavior
(fn [dir value] (fn [dir value]
(if (= dir :h) (if (= dir :h)
(st/emit! (dwsl/update-layout-child ids {:layout-h-behavior value})) (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))
(st/emit! (dwsl/update-layout-child ids {:layout-v-behavior value})))) (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))
on-size-change on-size-change
(fn [measure value] (fn [measure value]
@ -177,8 +179,8 @@
[:div.row-title "Sizing"] [:div.row-title "Sizing"]
[:& element-behavior {:is-layout-child? is-layout-child? [:& element-behavior {:is-layout-child? is-layout-child?
:is-layout-container? is-layout-container? :is-layout-container? is-layout-container?
:layout-v-behavior (or (:layout-v-behavior values) :fix) :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
:layout-h-behavior (or (:layout-h-behavior values) :fix) :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
:on-change-behavior on-change-behavior}]] :on-change-behavior on-change-behavior}]]
@ -201,14 +203,14 @@
:align-self align-self :align-self align-self
:set-align-self set-align-self}]]] :set-align-self set-align-self}]]]
[:div.input-wrapper [:div.input-wrapper
(for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]] (for [item [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w]]
[:div.tooltip.tooltip-bottom [:div.tooltip.tooltip-bottom
{:key (d/name item) {:key (d/name item)
:alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
:class (dom/classnames "maxH" (= item :layout-max-h) :class (dom/classnames "maxH" (= item :layout-item-max-h)
"minH" (= item :layout-min-h) "minH" (= item :layout-item-min-h)
"maxW" (= item :layout-max-w) "maxW" (= item :layout-item-max-w)
"minW" (= item :layout-min-w))} "minW" (= item :layout-item-min-w))}
[:div.input-element [:div.input-element
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))}
[:> numeric-input [:> numeric-input