mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 00:01:51 -05:00
🐛 Fix some errors on flex layout
This commit is contained in:
Eva
Alonso Torres
parent
acf51ea744
commit
31dfdf51c9
3 changed files with 78 additions and 64 deletions
|
|
@ -67,10 +67,13 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [objects (wsh/lookup-page-objects state)
|
||||
children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)]
|
||||
(rx/of (dwc/update-shapes ids (get-layout-initializer type))
|
||||
children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)
|
||||
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)
|
||||
(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`
|
||||
|
|
@ -155,7 +158,7 @@
|
|||
parent-id (:parent-id (first selected-shapes))
|
||||
shapes-ids (:shapes (first selected-shapes))
|
||||
ordered-ids (into (d/ordered-set) shapes-ids)
|
||||
undo-id (uuid/next)]
|
||||
undo-id (js/Symbol)]
|
||||
(rx/of
|
||||
(dwu/start-undo-transaction undo-id)
|
||||
(dwse/select-shapes ordered-ids)
|
||||
|
|
@ -175,7 +178,7 @@
|
|||
(dwu/commit-undo-transaction undo-id)))
|
||||
|
||||
(let [new-shape-id (uuid/next)
|
||||
undo-id (uuid/next)
|
||||
undo-id (js/Symbol)
|
||||
flex-params (shapes->flex-params objects selected-shapes)]
|
||||
(rx/of
|
||||
(dwu/start-undo-transaction undo-id)
|
||||
|
|
@ -199,7 +202,7 @@
|
|||
(ptk/reify ::remove-layout
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(let [undo-id (uuid/next)]
|
||||
(let [undo-id (js/Symbol)]
|
||||
(rx/of
|
||||
(dwu/start-undo-transaction undo-id)
|
||||
(dwc/update-shapes ids #(apply dissoc % layout-keys))
|
||||
|
|
@ -217,7 +220,7 @@
|
|||
selected-shapes (map (d/getf objects) selected)
|
||||
single? (= (count selected-shapes) 1)
|
||||
is-frame? (= :frame (:type (first selected-shapes)))
|
||||
undo-id (uuid/next)]
|
||||
undo-id (js/Symbol)]
|
||||
|
||||
(if (and single? is-frame?)
|
||||
(rx/of
|
||||
|
|
|
|||
|
|
@ -92,13 +92,16 @@
|
|||
(ctst/generate-unique-name (:name attrs)))
|
||||
|
||||
shape (make-new-shape
|
||||
(assoc attrs :id id :name name)
|
||||
objects
|
||||
selected)
|
||||
(assoc attrs :id id :name name)
|
||||
objects
|
||||
selected)
|
||||
|
||||
changes (-> (pcb/empty-changes it page-id)
|
||||
(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))
|
||||
(pcb/change-parent (:parent-id attrs) [shape])))]
|
||||
|
||||
|
|
@ -357,7 +360,13 @@
|
|||
(let [page-id (:current-page-id state)
|
||||
objects (wsh/lookup-page-objects state page-id)
|
||||
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)
|
||||
(let [srect (gsh/selection-rect selected-objs)
|
||||
frame-id (get-in objects [(first selected) :frame-id])
|
||||
|
|
@ -367,6 +376,7 @@
|
|||
(cond-> id
|
||||
(assoc :id id))
|
||||
(assoc :frame-id frame-id :parent-id parent-id)
|
||||
(with-meta {:index new-index})
|
||||
(cond-> (not= frame-id uuid/zero)
|
||||
(assoc :fills [] :hide-in-viewer true))
|
||||
(cts/setup-rect-selrect))
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@
|
|||
:on-change (partial set-gap (= :no-wrap wrap-type) :row-gap)
|
||||
:on-blur #(reset! gap-selected? :none)
|
||||
: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
|
||||
{:alt "Row gap"}
|
||||
|
|
@ -269,7 +269,7 @@
|
|||
:on-change (partial set-gap (= :no-wrap wrap-type) :column-gap)
|
||||
:on-blur #(reset! gap-selected? :none)
|
||||
: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/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
|
||||
|
|
@ -364,67 +364,68 @@
|
|||
[:div.element-set-title
|
||||
[:*
|
||||
[:span "Layout"]
|
||||
(if (and (not multiple)(:layout values))
|
||||
(if (and (not multiple) (:layout values))
|
||||
[:div.title-actions
|
||||
#_[:div.layout-btns
|
||||
[:button {:on-click set-flex
|
||||
:class (dom/classnames
|
||||
:active (= :flex layout-type))} "Flex"]
|
||||
[:button {:on-click set-grid
|
||||
:class (dom/classnames
|
||||
:active (= :grid layout-type))} "Grid"]]
|
||||
[:button {:on-click set-flex
|
||||
:class (dom/classnames
|
||||
:active (= :flex layout-type))} "Flex"]
|
||||
[:button {:on-click set-grid
|
||||
:class (dom/classnames
|
||||
:active (= :grid layout-type))} "Grid"]]
|
||||
[:button.remove-layout {:on-click on-remove-layout} i/minus]]
|
||||
|
||||
[:button.add-page {:on-click on-add-layout} i/close])]]
|
||||
|
||||
(when (:layout values)
|
||||
(if (= :flex layout-type)
|
||||
[:div.element-set-content.layout-menu
|
||||
[:div.layout-row
|
||||
[: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)
|
||||
(when (not= :multiple layout-type)
|
||||
(if (= :flex layout-type)
|
||||
[:div.element-set-content.layout-menu
|
||||
[:div.layout-row
|
||||
[:div.align-content.row-title "Content"]
|
||||
[:div.direction-wrap.row-title "Direction"]
|
||||
[:div.btn-wrapper
|
||||
[:& align-content-row {:is-col? is-col?
|
||||
:align-content align-content
|
||||
:set-align-content set-align-content}]]])
|
||||
[: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.layout-row
|
||||
[:div.align-items.row-title "Align"]
|
||||
[:div.btn-wrapper
|
||||
[:& align-row {:is-col? is-col?
|
||||
:align-items align-items
|
||||
:set-align set-align-items}]]]
|
||||
[:div.wrap-type
|
||||
[:& wrap-row {:wrap-type wrap-type
|
||||
:set-wrap set-wrap}]]]]
|
||||
|
||||
[: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)}]
|
||||
(when (= :wrap wrap-type)
|
||||
[:div.layout-row
|
||||
[:div.align-content.row-title "Content"]
|
||||
[:div.btn-wrapper
|
||||
[:& align-content-row {:is-col? is-col?
|
||||
:align-content align-content
|
||||
:set-align-content set-align-content}]]])
|
||||
|
||||
[:div.layout-row
|
||||
[:div.align-items.row-title "Align"]
|
||||
[: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
|
||||
:on-change-style change-padding-type
|
||||
:on-change on-padding-change}]]
|
||||
[:& padding-section {:values values
|
||||
:on-change-style change-padding-type
|
||||
:on-change on-padding-change}]]
|
||||
|
||||
[:div "GRID TO COME"]))]))
|
||||
[:div "GRID TO COME"])))]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue