Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 00:01:51 -05:00
Code Issues Activity

🐛 Fix some errors on flex layout

Browse source
This commit is contained in:
Eva 2023-01-11 14:18:26 +01:00 • committed by Alonso Torres
parent acf51ea744
commit 31dfdf51c9
3 changed files with 78 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -67,10 +67,13 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state _] (watch [_ state _]
(let [objects (wsh/lookup-page-objects state) (let [objects (wsh/lookup-page-objects state)
children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)] children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)
(rx/of (dwc/update-shapes ids (get-layout-initializer type)) undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id)
(dwc/update-shapes ids (get-layout-initializer type))
(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))))))
;; Never call this directly but through the data-event `:layout/update` ;; Never call this directly but through the data-event `:layout/update`
@ -155,7 +158,7 @@
parent-id (:parent-id (first selected-shapes)) parent-id (:parent-id (first selected-shapes))
shapes-ids (:shapes (first selected-shapes)) shapes-ids (:shapes (first selected-shapes))
ordered-ids (into (d/ordered-set) shapes-ids) ordered-ids (into (d/ordered-set) shapes-ids)
undo-id (uuid/next)] undo-id (js/Symbol)]
(rx/of (rx/of
(dwu/start-undo-transaction undo-id) (dwu/start-undo-transaction undo-id)
(dwse/select-shapes ordered-ids) (dwse/select-shapes ordered-ids)
@ -175,7 +178,7 @@
(dwu/commit-undo-transaction undo-id))) (dwu/commit-undo-transaction undo-id)))
(let [new-shape-id (uuid/next) (let [new-shape-id (uuid/next)
undo-id (uuid/next) 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)
@ -199,7 +202,7 @@
(ptk/reify ::remove-layout (ptk/reify ::remove-layout
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
(let [undo-id (uuid/next)] (let [undo-id (js/Symbol)]
(rx/of (rx/of
(dwu/start-undo-transaction undo-id) (dwu/start-undo-transaction undo-id)
(dwc/update-shapes ids #(apply dissoc % layout-keys)) (dwc/update-shapes ids #(apply dissoc % layout-keys))
@ -217,7 +220,7 @@
selected-shapes (map (d/getf objects) selected) selected-shapes (map (d/getf objects) selected)
single? (= (count selected-shapes) 1) single? (= (count selected-shapes) 1)
is-frame? (= :frame (:type (first selected-shapes))) is-frame? (= :frame (:type (first selected-shapes)))
undo-id (uuid/next)] undo-id (js/Symbol)]
(if (and single? is-frame?) (if (and single? is-frame?)
(rx/of (rx/of

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

@ -92,13 +92,16 @@
(ctst/generate-unique-name (:name attrs))) (ctst/generate-unique-name (:name attrs)))
shape (make-new-shape shape (make-new-shape
(assoc attrs :id id :name name) (assoc attrs :id id :name name)
objects objects
selected) selected)
changes (-> (pcb/empty-changes it page-id) changes (-> (pcb/empty-changes it page-id)
(pcb/with-objects objects) (pcb/with-objects objects)
(pcb/add-object shape) (cond-> (some? (:index (meta attrs)))
(pcb/add-object shape {:index (:index (meta attrs))}))
(cond-> (nil? (:index (meta attrs)))
(pcb/add-object shape))
(cond-> (some? (:parent-id attrs)) (cond-> (some? (:parent-id attrs))
(pcb/change-parent (:parent-id attrs) [shape])))] (pcb/change-parent (:parent-id attrs) [shape])))]
@ -357,7 +360,13 @@
(let [page-id (:current-page-id state) (let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id) objects (wsh/lookup-page-objects state page-id)
selected (wsh/lookup-selected state) selected (wsh/lookup-selected state)
selected-objs (map #(get objects %) selected)] selected (cph/clean-loops objects selected)
selected-objs (map #(get objects %) selected)
new-index (->> selected
(cph/order-by-indexed-shapes objects)
first
(cph/get-position-on-parent objects)
inc)]
(when (d/not-empty? selected) (when (d/not-empty? selected)
(let [srect (gsh/selection-rect selected-objs) (let [srect (gsh/selection-rect selected-objs)
frame-id (get-in objects [(first selected) :frame-id]) frame-id (get-in objects [(first selected) :frame-id])
@ -367,6 +376,7 @@
(cond-> id (cond-> id
(assoc :id id)) (assoc :id id))
(assoc :frame-id frame-id :parent-id parent-id) (assoc :frame-id frame-id :parent-id parent-id)
(with-meta {:index new-index})
(cond-> (not= frame-id uuid/zero) (cond-> (not= frame-id uuid/zero)
(assoc :fills [] :hide-in-viewer true)) (assoc :fills [] :hide-in-viewer true))
(cts/setup-rect-selrect)) (cts/setup-rect-selrect))

105
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -255,7 +255,7 @@
:on-change (partial set-gap (= :no-wrap wrap-type) :row-gap) :on-change (partial set-gap (= :no-wrap wrap-type) :row-gap)
:on-blur #(reset! gap-selected? :none) :on-blur #(reset! gap-selected? :none)
:value (:row-gap gap-value) :value (:row-gap gap-value)
:disabled (and (= :no-wrap wrap-type) (not is-col?))}]] :disabled (and (= :no-wrap wrap-type) is-col?)}]]
[:div.gap-row.tooltip.tooltip-bottom-left [:div.gap-row.tooltip.tooltip-bottom-left
{:alt "Row gap"} {:alt "Row gap"}
@ -269,7 +269,7 @@
:on-change (partial set-gap (= :no-wrap wrap-type) :column-gap) :on-change (partial set-gap (= :no-wrap wrap-type) :column-gap)
:on-blur #(reset! gap-selected? :none) :on-blur #(reset! gap-selected? :none)
:value (:column-gap gap-value) :value (:column-gap gap-value)
:disabled (and (= :no-wrap wrap-type) is-col?)}]]]]) :disabled (and (= :no-wrap wrap-type) (not is-col?))}]]]])
(mf/defc layout-container-menu (mf/defc layout-container-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
@ -364,67 +364,68 @@
[:div.element-set-title [:div.element-set-title
[:* [:*
[:span "Layout"] [:span "Layout"]
(if (and (not multiple)(:layout values)) (if (and (not multiple) (:layout values))
[:div.title-actions [:div.title-actions
#_[:div.layout-btns #_[:div.layout-btns
[:button {:on-click set-flex [:button {:on-click set-flex
:class (dom/classnames :class (dom/classnames
:active (= :flex layout-type))} "Flex"] :active (= :flex layout-type))} "Flex"]
[:button {:on-click set-grid [:button {:on-click set-grid
:class (dom/classnames :class (dom/classnames
:active (= :grid layout-type))} "Grid"]] :active (= :grid layout-type))} "Grid"]]
[:button.remove-layout {:on-click on-remove-layout} i/minus]] [:button.remove-layout {:on-click on-remove-layout} i/minus]]
[:button.add-page {:on-click on-add-layout} i/close])]] [:button.add-page {:on-click on-add-layout} i/close])]]
(when (:layout values) (when (:layout values)
(if (= :flex layout-type) (when (not= :multiple layout-type)
[:div.element-set-content.layout-menu (if (= :flex layout-type)
[:div.layout-row [:div.element-set-content.layout-menu
[:div.direction-wrap.row-title "Direction"]
[:div.btn-wrapper
[:div.direction
[:*
(for [dir [:row :reverse-row :column :reverse-column]]
[:& direction-btn {:key (d/name dir)
:dir dir
:saved-dir saved-dir
:set-direction set-direction}])]]
[:div.wrap-type
[:& wrap-row {:wrap-type wrap-type
:set-wrap set-wrap}]]]]
(when (= :wrap wrap-type)
[:div.layout-row [:div.layout-row
[:div.align-content.row-title "Content"] [:div.direction-wrap.row-title "Direction"]
[:div.btn-wrapper [:div.btn-wrapper
[:& align-content-row {:is-col? is-col? [:div.direction
:align-content align-content [:*
:set-align-content set-align-content}]]]) (for [dir [:row :reverse-row :column :reverse-column]]
[:& direction-btn {:key (d/name dir)
:dir dir
:saved-dir saved-dir
:set-direction set-direction}])]]
[:div.layout-row [:div.wrap-type
[:div.align-items.row-title "Align"] [:& wrap-row {:wrap-type wrap-type
[:div.btn-wrapper :set-wrap set-wrap}]]]]
[:& align-row {:is-col? is-col?
:align-items align-items
:set-align set-align-items}]]]
[:div.layout-row (when (= :wrap wrap-type)
[:div.justify-content.row-title "Justify"] [:div.layout-row
[:div.btn-wrapper.justify-content [:div.align-content.row-title "Content"]
[:& justify-content-row {:is-col? is-col? [:div.btn-wrapper
:justify-content justify-content [:& align-content-row {:is-col? is-col?
:set-justify set-justify-content}]]] :align-content align-content
[:& gap-section {:is-col? is-col? :set-align-content set-align-content}]]])
:wrap-type wrap-type
:gap-selected? gap-selected? [:div.layout-row
:set-gap set-gap [:div.align-items.row-title "Align"]
:gap-value (:layout-gap values)}] [:div.btn-wrapper
[:& align-row {:is-col? is-col?
:align-items align-items
:set-align set-align-items}]]]
[:div.layout-row
[:div.justify-content.row-title "Justify"]
[:div.btn-wrapper.justify-content
[:& justify-content-row {:is-col? is-col?
:justify-content justify-content
:set-justify set-justify-content}]]]
[:& gap-section {:is-col? is-col?
:wrap-type wrap-type
:gap-selected? gap-selected?
:set-gap set-gap
:gap-value (:layout-gap values)}]
[:& padding-section {:values values [:& padding-section {:values values
:on-change-style change-padding-type :on-change-style change-padding-type
:on-change on-padding-change}]] :on-change on-padding-change}]]
[:div "GRID TO COME"]))])) [:div "GRID TO COME"])))]))