0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00

Adapt to handoff changes

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

View file

@ -83,14 +83,16 @@
:layout-h-orientation :layout-container
:layout-v-orientation :layout-container
:layout-margin :layout-item
:layout-margin-type :layout-item
:layout-h-behavior :layout-item
:layout-v-behavior :layout-item
:layout-max-h :layout-item
:layout-min-h :layout-item
:layout-max-w :layout-item
:layout-min-w :layout-item})
:layout-item-margin :layout-item
:layout-item-margin-type :layout-item
:layout-item-h-sizing :layout-item
:layout-item-v-sizing :layout-item
:layout-item-max-h :layout-item
:layout-item-min-h :layout-item
:layout-item-max-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
(def editable-attrs
@ -133,56 +135,59 @@
:exports
:layout
:layout-dir
:layout-flex-dir
:layout-gap
:layout-type
:layout-gap-type
:layout-align-items
:layout-justify-content
:layout-align-content
:layout-wrap-type
:layout-padding-type
:layout-padding
:layout-h-orientation
:layout-v-orientation
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:group #{:proportion-lock
:width :height
:x :y
:rotation
:selrect
:points
:x :y
:rotation
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:opacity
:blend-mode
:blocked
:hidden
:shadow
:shadow
:blur
:blur
:exports
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:rect #{:proportion-lock
:width :height
@ -229,14 +234,15 @@
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:circle #{:proportion-lock
:width :height
@ -281,143 +287,237 @@
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:path #{:proportion-lock
:width :height
:x :y
:rotation
:selrect
:points
:path #{:proportion-lock
:width :height
:x :y
:rotation
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:opacity
:blend-mode
:blocked
:hidden
:fills
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:fills
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:strokes
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:strokes
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:shadow
:shadow
:blur
:blur
:exports
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:text #{:proportion-lock
:width :height
:x :y
:rotation
:selrect
:points
:text #{:proportion-lock
:width :height
:x :y
:rotation
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:opacity
:blend-mode
:blocked
:hidden
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:shadow
:shadow
:blur
:blur
:typography-ref-id
:typography-ref-file
:typography-ref-id
:typography-ref-file
:font-id
:font-family
:font-variant-id
:font-size
:font-weight
:font-style
:font-id
:font-family
:font-variant-id
:font-size
:font-weight
:font-style
:text-align
:text-align
:text-direction
:text-direction
:line-height
:letter-spacing
:line-height
:letter-spacing
:vertical-align
:vertical-align
:text-decoration
:text-decoration
:text-transform
:text-transform
:grow-type
:grow-type
:exports
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:image #{:proportion-lock
:image #{:proportion-lock
:width :height
:x :y
:rotation
:rx :ry
:r1 :r2 :r3 :r4
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:shadow
:blur
:exports
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:svg-raw #{:proportion-lock
:width :height
:x :y
:rotation
:rx :ry
:r1 :r2 :r3 :r4
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:fills
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:strokes
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:shadow
:blur
:exports
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}
:bool #{:proportion-lock
:width :height
:x :y
:rotation
@ -437,124 +537,36 @@
:blocked
:hidden
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:shadow
:blur
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:svg-raw #{:proportion-lock
:width :height
:x :y
:rotation
:rx :ry
:r1 :r2 :r3 :r4
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:fills
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:strokes
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:shadow
:blur
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}
:bool #{:proportion-lock
:width :height
:x :y
:rotation
:rx :ry
:r1 :r2 :r3 :r4
:selrect
:points
:constraints-h
:constraints-v
:fixed-scroll
:parent-id
:frame-id
:opacity
:blend-mode
:blocked
:hidden
:fill-color
:fill-opacity
:fill-color-ref-id
:fill-color-ref-file
:fill-color-gradient
:stroke-style
:stroke-alignment
:stroke-width
:stroke-color
:stroke-color-ref-id
:stroke-color-ref-file
:stroke-opacity
:stroke-color-gradient
:stroke-cap-start
:stroke-cap-end
:shadow
:blur
:exports
:layout-margin
:layout-margin-type
:layout-h-behavior
:layout-v-behavior
:layout-max-h
:layout-min-h
:layout-max-w
:layout-min-w}})
:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing
:layout-item-v-sizing
:layout-item-max-h
:layout-item-min-h
:layout-item-max-w
:layout-item-min-w
:layout-item-align-self}})

View file

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

View file

@ -442,7 +442,10 @@
(l/derived
(fn [state]
(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 =))
(def colorpicker

View file

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

View file

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

View file

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

View file

@ -18,7 +18,7 @@
(def layout-container-flex-attrs
[:layout ;; :flex, :grid in the future
:layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column
:layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column
:layout-gap-type ;; :simple, :multiple
:layout-gap ;; {:row-gap number , :column-gap number}
:layout-align-items ;; :start :end :center :stretch
@ -67,7 +67,7 @@
:space-around i/align-content-column-around
:space-between i/align-content-column-between
:stretch nil)
(case val
:start i/align-content-row-start
:end i/align-content-row-end
@ -129,7 +129,7 @@
[{:keys [is-col? align-items set-align] :as props}]
[:div.align-items-style
(for [align [:start :center :end :stretch]]
(for [align [:start :center :end #_:stretch #_:baseline]]
[:button.align-start.tooltip
{:class (dom/classnames :active (= align-items align)
:tooltip-bottom-left (not= align :start)
@ -274,13 +274,14 @@
(st/emit! (dwsl/remove-layout ids))
(reset! open? false))
set-flex (fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :flex))
set-grid (fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :grid))
;; Uncomment when activating the grid options
;; set-flex (fn []
;; (st/emit! (dwsl/remove-layout ids))
;; (on-add-layout :flex))
;;
;; set-grid (fn []
;; (st/emit! (dwsl/remove-layout ids))
;; (on-add-layout :grid))
;; Flex-direction
@ -365,7 +366,7 @@
[:span "Layout"]
(if (:layout values)
[:div.title-actions
[:div.layout-btns
#_[:div.layout-btns
[:button {:on-click set-flex
:class (dom/classnames
:active (= :flex layout-type))} "Flex"]

View file

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