3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-29 19:16:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Change behavior on empty grid creation

Browse source
This commit is contained in:
alonso.torres 2023-05-24 09:25:09 +02:00
parent cf4e2f91d1
commit 0358eb51e8
4 changed files with 82 additions and 73 deletions
common/src/app/common/geom/shapes/grid_layout
layout_data.cljc
frontend/src/app/main
data/workspace
shape_layout.cljs
ui/workspace
viewport.cljs
viewport
grid_layout_editor.cljs

2
common/src/app/common/geom/shapes/grid_layout/layout_data.cljc
View file

@ -10,8 +10,6 @@
;; - Auto ;; - Auto
;; - Flex ;; - Flex
;; ;;
;;
;;
;; Min functions: ;; Min functions:
;; - Fixed: value ;; - Fixed: value
;; - Percent: value to pixels ;; - Percent: value to pixels

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

@ -88,84 +88,90 @@
([objects shapes] ([objects shapes]
(shapes->flex-params objects shapes nil)) (shapes->flex-params objects shapes nil))
([objects shapes parent] ([objects shapes parent]
(let [points (when (d/not-empty? shapes)
(->> shapes (let [points
(map :id) (->> shapes
(ctt/sort-z-index objects) (map :id)
(map (comp gsh/center-shape (d/getf objects)))) (ctt/sort-z-index objects)
(map (comp gsh/center-shape (d/getf objects))))
start (first points) start (first points)
end (reduce (fn [acc p] (gpt/add acc (gpt/to-vec start p))) points) end (reduce (fn [acc p] (gpt/add acc (gpt/to-vec start p))) points)
angle (gpt/signed-angle-with-other angle (gpt/signed-angle-with-other
(gpt/to-vec start end) (gpt/to-vec start end)
(gpt/point 1 0)) (gpt/point 1 0))
angle (mod angle 360) angle (mod angle 360)
t1 (min (abs (- angle 0)) (abs (- angle 360))) t1 (min (abs (- angle 0)) (abs (- angle 360)))
t2 (abs (- angle 90)) t2 (abs (- angle 90))
t3 (abs (- angle 180)) t3 (abs (- angle 180))
t4 (abs (- angle 270)) t4 (abs (- angle 270))
tmin (min t1 t2 t3 t4) tmin (min t1 t2 t3 t4)
direction direction
(cond (cond
(mth/close? tmin t1) :row (mth/close? tmin t1) :row
(mth/close? tmin t2) :column-reverse (mth/close? tmin t2) :column-reverse
(mth/close? tmin t3) :row-reverse (mth/close? tmin t3) :row-reverse
(mth/close? tmin t4) :column) (mth/close? tmin t4) :column)
selrects (->> shapes selrects (->> shapes
(mapv :selrect)) (mapv :selrect))
min-x (->> selrects min-x (->> selrects
(mapv #(min (:x1 %) (:x2 %))) (mapv #(min (:x1 %) (:x2 %)))
(apply min)) (apply min))
max-x (->> selrects max-x (->> selrects
(mapv #(max (:x1 %) (:x2 %))) (mapv #(max (:x1 %) (:x2 %)))
(apply max)) (apply max))
all-width (->> selrects all-width (->> selrects
(map :width) (map :width)
(reduce +)) (reduce +))
column-gap (if (and (> (count shapes) 1) column-gap (if (and (> (count shapes) 1)
(or (= direction :row) (= direction :row-reverse))) (or (= direction :row) (= direction :row-reverse)))
(/ (- (- max-x min-x) all-width) (/ (- (- max-x min-x) all-width)
(dec (count shapes))) (dec (count shapes)))
0) 0)
min-y (->> selrects min-y (->> selrects
(mapv #(min (:y1 %) (:y2 %))) (mapv #(min (:y1 %) (:y2 %)))
(apply min)) (apply min))
max-y (->> selrects max-y (->> selrects
(mapv #(max (:y1 %) (:y2 %))) (mapv #(max (:y1 %) (:y2 %)))
(apply max)) (apply max))
all-height (->> selrects all-height (->> selrects
(map :height) (map :height)
(reduce +)) (reduce +))
row-gap (if (and (> (count shapes) 1) row-gap (if (and (> (count shapes) 1)
(or (= direction :column) (= direction :column-reverse))) (or (= direction :column) (= direction :column-reverse)))
(/ (- (- max-y min-y) all-height) (/ (- (- max-y min-y) all-height)
(dec (count shapes))) (dec (count shapes)))
0) 0)
layout-gap {:row-gap (max row-gap 0) :column-gap (max column-gap 0)} layout-gap {:row-gap (max row-gap 0) :column-gap (max column-gap 0)}
parent-selrect (:selrect parent) parent-selrect (:selrect parent)
padding (when (and (not (nil? parent)) (> (count shapes) 0)) padding (when (and (not (nil? parent)) (> (count shapes) 0))
{:p1 (min (- min-y (:y1 parent-selrect)) (- (:y2 parent-selrect) max-y)) {:p1 (min (- min-y (:y1 parent-selrect)) (- (:y2 parent-selrect) max-y))
:p2 (min (- min-x (:x1 parent-selrect)) (- (:x2 parent-selrect) max-x))})] :p2 (min (- min-x (:x1 parent-selrect)) (- (:x2 parent-selrect) max-x))})]
(cond-> {:layout-flex-dir direction :layout-gap layout-gap} (cond-> {:layout-flex-dir direction :layout-gap layout-gap}
(not (nil? padding)) (not (nil? padding))
(assoc :layout-padding {:p1 (:p1 padding) :p2 (:p2 padding) :p3 (:p1 padding) :p4 (:p2 padding)}))))) (assoc :layout-padding {:p1 (:p1 padding) :p2 (:p2 padding) :p3 (:p1 padding) :p4 (:p2 padding)}))))))
(defn shapes->grid-params (defn shapes->grid-params
"Given the shapes calculate its flex parameters (horizontal vs vertical, gaps, etc)" "Given the shapes calculate its flex parameters (horizontal vs vertical, gaps, etc)"
([objects shapes] ([objects shapes]
(shapes->flex-params objects shapes nil)) (shapes->flex-params objects shapes nil))
([_objects _shapes _parent] ([_objects shapes _parent]
{})) (if (empty? shapes)
(ctl/create-cells
{:layout-grid-columns [{:type :auto} {:type :auto}]
:layout-grid-rows [{:type :auto} {:type :auto}]}
[1 1 2 2])
{})))
(defn create-layout-from-id (defn create-layout-from-id
[ids type from-frame?] [ids type from-frame?]
@ -176,10 +182,9 @@
children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids) children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)
children-shapes (map (d/getf objects) children-ids) children-shapes (map (d/getf objects) children-ids)
parent (get objects (first ids)) parent (get objects (first ids))
layout-params (when (d/not-empty? children-shapes) layout-params (case type
(case type :flex (shapes->flex-params objects children-shapes parent)
:flex (shapes->flex-params objects children-shapes parent) :grid (shapes->grid-params objects children-shapes parent))
:grid (shapes->grid-params objects children-shapes parent)))
undo-id (js/Symbol)] undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id) (rx/of (dwu/start-undo-transaction undo-id)
(dwc/update-shapes ids (get-layout-initializer type from-frame?)) (dwc/update-shapes ids (get-layout-initializer type from-frame?))
@ -190,7 +195,8 @@
(cond-> (not from-frame?) (cond-> (not from-frame?)
(assoc :layout-item-h-sizing :auto (assoc :layout-item-h-sizing :auto
:layout-item-v-sizing :auto)) :layout-item-v-sizing :auto))
(merge layout-params)))) (merge layout-params)
(cond-> (= type :grid) (ctl/assign-cells)))))
(ptk/data-event :layout/update ids) (ptk/data-event :layout/update ids)
(dwc/update-shapes children-ids #(dissoc % :constraints-h :constraints-v)) (dwc/update-shapes children-ids #(dissoc % :constraints-h :constraints-v))
(dwu/commit-undo-transaction undo-id)))))) (dwu/commit-undo-transaction undo-id))))))
@ -280,7 +286,7 @@
(let [new-shape-id (uuid/next) (let [new-shape-id (uuid/next)
undo-id (js/Symbol) undo-id (js/Symbol)
flex-params (shapes->flex-params objects selected-shapes)] flex-params (shapes->flex-params objects selected-shapes)]
(rx/of (rx/of
(dwu/start-undo-transaction undo-id) (dwu/start-undo-transaction undo-id)
(dws/create-artboard-from-selection new-shape-id) (dws/create-artboard-from-selection new-shape-id)

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

@ -356,8 +356,8 @@
[:clipPath {:id "clip-handlers"} [:clipPath {:id "clip-handlers"}
[:rect {:x (+ (:x vbox) rule-area-size) [:rect {:x (+ (:x vbox) rule-area-size)
:y (+ (:y vbox) rule-area-size) :y (+ (:y vbox) rule-area-size)
:width (- (:width vbox) (* rule-area-size 2)) :width (max 0 (- (:width vbox) (* rule-area-size 2)))
:height (- (:height vbox) (* rule-area-size 2))}]]] :height (max 0 (- (:height vbox) (* rule-area-size 2)))}]]]
[:g {:style {:pointer-events (if disable-events? "none" "auto")}} [:g {:style {:pointer-events (if disable-events? "none" "auto")}}
(when show-text-editor? (when show-text-editor?

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

@ -21,6 +21,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.viewport.viewport-ref :as uwvv] [app.main.ui.workspace.viewport.viewport-ref :as uwvv]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
@ -658,6 +659,8 @@
(remove :hidden) (remove :hidden)
(map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %))) (map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %)))
children (hooks/use-equal-memo children)
bounds (:points shape) bounds (:points shape)
hv #(gpo/start-hv bounds %) hv #(gpo/start-hv bounds %)
vv #(gpo/start-vv bounds %) vv #(gpo/start-vv bounds %)
@ -668,7 +671,9 @@
[layout-gap-row layout-gap-col] (ctl/gaps shape) [layout-gap-row layout-gap-col] (ctl/gaps shape)
{:keys [row-tracks column-tracks] :as layout-data} {:keys [row-tracks column-tracks] :as layout-data}
(gsg/calc-layout-data shape children bounds) (mf/use-memo
(mf/deps shape children)
#(gsg/calc-layout-data shape children bounds))
handle-pointer-down handle-pointer-down
(mf/use-callback (mf/use-callback