diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index ab1a18070..0ebad4a3e 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -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 diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index de4af3244..12d6f5e1d 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/frontend/src/app/main/data/workspace/shapes.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index cb216fd4d..5ddedf697 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -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"])))]))