3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-18 12:51: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

5
frontend/src/app/main/refs.cljs
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

10
frontend/src/app/main/render.cljs
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)

2
frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs
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)]

8
frontend/src/app/main/ui/viewer/interactions.cljs
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))))

23
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
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"]

52
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
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