diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index 3a47fdcd5..de34e6b74 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -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}}) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 98a767711..32f54e16e 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -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)) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index fb66b3b6b..4f6015f09 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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 diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index 77fa6f5a1..a2627d2da 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -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) diff --git a/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs b/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs index 0b7af463a..9d3325710 100644 --- a/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs @@ -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)] diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index 72d822828..51b136d11 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -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)))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 4eb03a287..71545cb59 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -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"] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index f36291ca2..4ce0b57e3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -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