3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 03:31: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-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,23 +135,25 @@
: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
@ -175,14 +179,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}
: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,14 +287,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}
:path #{:proportion-lock
:width :height
@ -333,14 +340,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}
:text #{:proportion-lock
:width :height
@ -408,14 +416,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}
:image #{:proportion-lock
:width :height
@ -443,14 +452,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}
:svg-raw #{:proportion-lock
:width :height
@ -497,14 +507,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}
:bool #{:proportion-lock
:width :height
@ -549,12 +560,13 @@
: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}})

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
;; 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]
(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))

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))))

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}]
[: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