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

✨ Change column/row from cell options

Browse source
This commit is contained in:
alonso.torres 2023-05-10 12:42:43 +02:00
parent f5bb6b05f3
commit 47e927d571
9 changed files with 316 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/data/workspace/grid_layout/editor.cljs
View file

@ -61,3 +61,4 @@
srect (gsh/make-selrect x y width height)]
(-> local
(update :vbox merge (select-keys srect [:x :y :x1 :x2 :y1 :y2])))))))))))

46
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -8,6 +8,7 @@
(:require
[app.common.colors :as clr]
[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.math :as mth]
@ -52,13 +53,13 @@
:layout-padding-type :simple
:layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}})
(def initial-grid-layout ;; TODO
(def initial-grid-layout
{:layout :grid
:layout-grid-dir :row
:layout-gap-type :multiple
:layout-gap {:row-gap 0 :column-gap 0}
:layout-align-items :start
:layout-align-content :stretch
:layout-align-content :start
:layout-justify-items :start
:layout-justify-content :start
:layout-padding-type :simple
@ -549,3 +550,44 @@
(dwc/update-shapes parent-ids (partial fix-parent-sizing objects (set ids) changes))
(ptk/data-event :layout/update ids)
(dwu/commit-undo-transaction undo-id))))))
(defn update-grid-cell
[layout-id cell-id props]
(ptk/reify ::update-grid-cell
ptk/WatchEvent
(watch [_ _ _]
(let [undo-id (js/Symbol)]
(rx/of
(dwu/start-undo-transaction undo-id)
(dwc/update-shapes
[layout-id]
(fn [shape]
(-> shape
(d/update-in-when [:layout-grid-cells cell-id]
#(d/without-nils (merge % props))))))
(ptk/data-event :layout/update [layout-id])
(dwu/commit-undo-transaction undo-id))))))
(defn update-grid-cell-position
[layout-id cell-id props]
(ptk/reify ::update-grid-cell-position
ptk/WatchEvent
(watch [_ _ _]
(let [undo-id (js/Symbol)]
(rx/of
(dwu/start-undo-transaction undo-id)
(dwc/update-shapes
[layout-id]
(fn [shape]
(let [prev-data (-> (dm/get-in shape [:layout-grid-cells cell-id])
(select-keys [:row :column :row-span :column-span]))
new-data (merge prev-data props)]
(-> shape
(ctl/resize-cell-area (:row prev-data) (:column prev-data)
(:row new-data) (:column new-data)
(:row-span new-data) (:column-span new-data))
(ctl/assign-cells)))))
(ptk/data-event :layout/update [layout-id])
(dwu/commit-undo-transaction undo-id))))))

3
frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
View file

@ -151,7 +151,8 @@
(dom/class? node "frame-title")
(let [shape (gsh/transform-shape shape modifiers)
zoom (get-in @st/state [:workspace-local :zoom] 1)
mtx (vwu/title-transform shape zoom false)]
edit-grid? (= (dom/get-data node "edit-grid") "true")
mtx (vwu/title-transform shape zoom edit-grid?)]
(override-transform-att! node "transform" mtx))
(or (= (dom/get-tag-name node) "mask")

150
frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs
View file

@ -8,6 +8,8 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
@ -16,7 +18,8 @@
(mf/defc set-self-alignment
[{:keys [is-col? alignment set-alignment] :as props}]
(let [dir-v [:auto :start :center :end :stretch #_:baseline]]
(let [dir-v [:auto :start :center :end :stretch #_:baseline]
alignment (or alignment :auto)]
[:div.align-self-style
(for [align dir-v]
[:button.align-self.tooltip.tooltip-bottom
@ -31,51 +34,69 @@
(mf/defc options
{::mf/wrap [mf/memo]}
[{:keys [_shape cell] :as props}]
[{:keys [shape cell] :as props}]
(let [position-mode (mf/use-state :auto) ;; TODO this should come from shape
(let [{:keys [mode area-name align-self justify-self column column-span row row-span]} cell
column-end (+ column column-span)
row-end (+ row row-span)
set-position-mode (fn [mode]
(reset! position-mode mode))
cell-mode (or mode :auto)
cell-mode (if (and (= :auto cell-mode)
(or (> (:column-span cell) 1)
(> (:row-span cell) 1)))
:manual
cell-mode)
set-alignment
(mf/use-callback
(mf/deps align-self (:id shape) (:id cell))
(fn [value]
(if (= align-self value)
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:align-self nil}))
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:align-self value})))))
align-self (mf/use-state :auto) ;; TODO this should come from shape
justify-alignment (mf/use-state :auto) ;; TODO this should come from shape
set-alignment (fn [value]
(reset! 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}))))
set-justify-self (fn [value]
(reset! justify-alignment 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}))))
column-start (:column cell)
column-end (+ (:column cell) (:column-span cell))
row-start (:row cell)
row-end (+ (:row cell) (:row-span cell))
set-justify-self
(mf/use-callback
(mf/deps justify-self (:id shape) (:id cell))
(fn [value]
(if (= justify-self value)
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:justify-self nil}))
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:justify-self value})))))
on-change
(fn [_side _orientation _value]
;; TODO
#_(if (= orientation :column)
(case side
:all ((reset! column-start value)
(reset! column-end value))
:start (reset! column-start value)
:end (reset! column-end value))
(case side
:all ((reset! row-start value)
(reset! row-end value))
:start (reset! row-start value)
:end (reset! row-end value))))
(mf/use-callback
(mf/deps column row (:id shape) (:id cell))
(fn [field type value]
(let [[property value]
(cond
(and (= type :column) (or (= field :all) (= field :start)))
[:column value]
area-name (mf/use-state "header") ;; TODO this should come from shape
(and (= type :column) (= field :end))
[:column-span (max 1 (- value column))]
on-area-name-change (fn [value]
(reset! area-name value))
on-key-press (fn [_event])]
(and (= type :row) (or (= field :all) (= field :start)))
[:row value]
(and (= type :row) (= field :end))
[:row-span (max 1 (- value row))])]
(st/emit! (dwsl/update-grid-cell-position (:id shape) (:id cell) {property value})))))
on-area-name-change
(mf/use-callback
(mf/deps (:id shape) (:id cell))
(fn [event]
(let [value (dom/get-value (dom/get-target event))]
(if (= value "")
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:area-name nil}))
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:area-name value}))))))
set-cell-mode
(mf/use-callback
(mf/deps (:id shape) (:id cell))
(fn [mode]
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:mode mode}))))]
[:div.element-set
[:div.element-set-title
@ -86,16 +107,17 @@
[:div.row-title.sizing "Position"]
[:div.position-wrapper
[:button.position-btn
{:on-click #(set-position-mode :auto)
:class (dom/classnames :active (= :auto @position-mode))} "Auto"]
{:on-click #(set-cell-mode :auto)
:class (dom/classnames :active (= :auto cell-mode))} "Auto"]
[:button.position-btn
{:on-click #(set-position-mode :manual)
:class (dom/classnames :active (= :manual @position-mode))} "Manual"]
{:on-click #(set-cell-mode :manual)
:class (dom/classnames :active (= :manual cell-mode))} "Manual"]
[:button.position-btn
{:on-click #(set-position-mode :area)
:class (dom/classnames :active (= :area @position-mode))} "Area"]]]
{:on-click #(set-cell-mode :area)
:class (dom/classnames :active (= :area cell-mode))} "Area"]]]
[:div.manage-grid-columns
(when (= :auto @position-mode)
(when (= :auto cell-mode)
[:div.grid-auto
[:div.grid-columns-auto
[:span.icon i/layout-rows]
@ -103,42 +125,42 @@
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :all :column) ;; TODO cambiar este on-change y el value
:value column-start}]]]
:on-change (partial on-change :all :column)
:value column}]]]
[:div.grid-rows-auto
[:span.icon i/layout-columns]
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :all :row) ;; TODO cambiar este on-change y el value
:value row-start}]]]])
(when (= :area @position-mode)
:on-change (partial on-change :all :row)
:value row}]]]])
(when (= :area cell-mode)
[:div.input-wrapper
[:input.input-text
{:key "grid-area-name"
{:key (dm/str "name-" (:id cell))
:id "grid-area-name"
:type "text"
:aria-label "grid-area-name"
:placeholder "--"
:default-value @area-name
:default-value area-name
:auto-complete "off"
:on-change on-area-name-change
:on-key-press on-key-press}]])
:on-change on-area-name-change}]])
(when (or (= :manual @position-mode) (= :area @position-mode))
(when (or (= :manual cell-mode) (= :area cell-mode))
[:div.grid-manual
[:div.grid-columns-auto
[:span.icon i/layout-rows]
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-pointer-down #(dom/select-target %)
:on-change (partial on-change :start :column)
:value column-start}]
:value column}]
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-pointer-down #(dom/select-target %)
:on-change (partial on-change :end :column)
:value column-end}]]]
[:div.grid-rows-auto
@ -146,12 +168,12 @@
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-pointer-down #(dom/select-target %)
:on-change (partial on-change :start :row)
:value row-start}]
:value row}]
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-pointer-down #(dom/select-target %)
:on-change (partial on-change :end :row)
:value row-end}]]]])]
@ -159,13 +181,11 @@
[:div.row-title "Align"]
[:div.btn-wrapper
[:& set-self-alignment {:is-col? false
:alignment @align-self
:alignment align-self
:set-alignment set-alignment}]]]
[:div.layout-row
[:div.row-title "Justify"]
[:div.btn-wrapper
[:& set-self-alignment {:is-col? true
:alignment @justify-alignment
:alignment justify-self
:set-alignment set-justify-self}]]]]]))

6
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -204,8 +204,7 @@
(>= zoom 8))
show-text-editor? (and editing-shape (= :text (:type editing-shape)))
;; Debug utility
;; hover-grid? (and (some? @hover-top-frame-id) (ctl/grid-layout? objects @hover-top-frame-id))
hover-grid? (and (some? @hover-top-frame-id) (ctl/grid-layout? objects @hover-top-frame-id))
show-grid-editor? (and editing-shape (ctl/grid-layout? editing-shape))
show-presence? page-id
@ -591,8 +590,7 @@
:zoom zoom}])
(when show-grid-editor?
#_(or show-grid-editor? hover-grid?) ;; Debug utility
(when (or show-grid-editor? hover-grid?)
[:& grid-layout/editor
{:zoom zoom
:objects objects-modified

151
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -572,7 +572,6 @@
:on-key-down handle-keydown-track-input
:on-blur handle-blur-track-input}]]]
[:& resize-track-handler
{:index index
:layout-data layout-data
@ -662,85 +661,85 @@
[:& plus-btn {:start-p start-p
:zoom zoom
:type :row
:on-click handle-add-row}])])
:on-click handle-add-row}])
(for [[idx column-data] (d/enumerate column-tracks)]
[:& track {:key (dm/str "column-track-" idx)
:shape shape
:zoom zoom
:type :column
:index idx
:layout-data layout-data
:snap-pixel? snap-pixel?
:track-data column-data}])
(for [[idx column-data] (d/enumerate column-tracks)]
[:& track {:key (dm/str "column-track-" idx)
:shape shape
:zoom zoom
:type :column
:index idx
:layout-data layout-data
:snap-pixel? snap-pixel?
:track-data column-data}])
;; Last track resize handler
(when-not (empty? column-tracks)
(let [last-track (last column-tracks)
start-p (:start-p (last column-tracks))
relative (gpt/to-vec origin start-p)
marker-p (-> origin
(gpt/add (hv (:x relative)))
(gpt/subtract (vv (/ 20 zoom)))
(gpt/add (hv (:size last-track))))]
[:g.track
[:& track-marker {:center marker-p
:index (count column-tracks)
:shape shape
:snap-pixel? snap-pixel?
:track-before (last column-tracks)
:type :column
:value (dm/str (inc (count column-tracks)))
:zoom zoom}]
[:& resize-track-handler
{:index (count column-tracks)
:shape shape
:layout-data layout-data
:snap-pixel? snap-pixel?
:start-p (-> start-p (gpt/add (hv (+ layout-gap-col (:size last-track)))))
:type :column
:track-before (last column-tracks)
:zoom zoom}]]))
;; Last track resize handler
(when-not (empty? column-tracks)
(let [last-track (last column-tracks)
start-p (:start-p (last column-tracks))
relative (gpt/to-vec origin start-p)
marker-p (-> origin
(gpt/add (hv (:x relative)))
(gpt/subtract (vv (/ 20 zoom)))
(gpt/add (hv (:size last-track))))]
[:g.track
[:& track-marker {:center marker-p
:index (count column-tracks)
:shape shape
:snap-pixel? snap-pixel?
:track-before (last column-tracks)
:type :column
:value (dm/str (inc (count column-tracks)))
:zoom zoom}]
[:& resize-track-handler
{:index (count column-tracks)
:shape shape
:layout-data layout-data
:snap-pixel? snap-pixel?
:start-p (-> start-p (gpt/add (hv (+ layout-gap-col (:size last-track)))))
:type :column
:track-before (last column-tracks)
:zoom zoom}]]))
(for [[idx row-data] (d/enumerate row-tracks)]
[:& track {:index idx
:key (dm/str "row-track-" idx)
:layout-data layout-data
:shape shape
:snap-pixel? snap-pixel?
:track-data row-data
:type :row
:zoom zoom}])
(for [[idx row-data] (d/enumerate row-tracks)]
[:& track {:index idx
:key (dm/str "row-track-" idx)
:layout-data layout-data
:shape shape
:snap-pixel? snap-pixel?
:track-data row-data
:type :row
:zoom zoom}])
(when-not (empty? row-tracks)
(let [last-track (last row-tracks)
start-p (:start-p (last row-tracks))
relative (gpt/to-vec origin start-p)
marker-p
(-> origin
(gpt/add (vv (:y relative)))
(gpt/subtract (hv (/ 20 zoom)))
(gpt/add (vv (:size last-track))))]
[:g.track
[:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))}
[:& track-marker {:center marker-p
:index (count row-tracks)
:shape shape
:snap-pixel? snap-pixel?
:track-before (last row-tracks)
:type :row
:value (dm/str (inc (count row-tracks)))
:zoom zoom}]]
[:& resize-track-handler
{:index (count row-tracks)
:shape shape
:layout-data layout-data
:start-p (-> start-p
(gpt/add (vv (+ layout-gap-row (:size last-track)))))
:type :row
:track-before (last row-tracks)
:snap-pixel? snap-pixel?
:zoom zoom}]]))
(when-not (empty? row-tracks)
(let [last-track (last row-tracks)
start-p (:start-p (last row-tracks))
relative (gpt/to-vec origin start-p)
marker-p
(-> origin
(gpt/add (vv (:y relative)))
(gpt/subtract (hv (/ 20 zoom)))
(gpt/add (vv (:size last-track))))]
[:g.track
[:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))}
[:& track-marker {:center marker-p
:index (count row-tracks)
:shape shape
:snap-pixel? snap-pixel?
:track-before (last row-tracks)
:type :row
:value (dm/str (inc (count row-tracks)))
:zoom zoom}]]
[:& resize-track-handler
{:index (count row-tracks)
:shape shape
:layout-data layout-data
:start-p (-> start-p
(gpt/add (vv (+ layout-gap-row (:size last-track)))))
:type :row
:track-before (last row-tracks)
:snap-pixel? snap-pixel?
:zoom zoom}]]))])
(for [[_ cell] (:layout-grid-cells shape)]
[:& grid-cell {:key (dm/str "cell-" (:id cell))

1
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -171,6 +171,7 @@
(when (not (:hidden frame))
[:g.frame-title {:id (dm/str "frame-title-" (:id frame))
:data-edit-grid grid-edition?
:transform (vwu/title-transform frame zoom grid-edition?)
:pointer-events (when (:blocked frame) "none")}
(cond