3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-07 17:35:54 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

@ -88,6 +88,7 @@
([objects shapes] ([objects shapes]
(shapes->flex-params objects shapes nil)) (shapes->flex-params objects shapes nil))
([objects shapes parent] ([objects shapes parent]
(when (d/not-empty? shapes)
(let [points (let [points
(->> shapes (->> shapes
(map :id) (map :id)
@ -158,14 +159,19 @@
(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))))))

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