mirror of
https://github.com/penpot/penpot.git
synced 2025-05-21 00:06:12 +02:00
Properly reinitialize alignment index when page metadata is updated.
This commit is contained in:
Andrey Antukh
parent
0c3d1a5ded
commit
a3a43d4b8a
2 changed files with 57 additions and 55 deletions
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
;; --- Initialize Workspace
|
||||
|
||||
(declare initialize-alignment-index)
|
||||
(declare initialize-alignment)
|
||||
|
||||
(defrecord InitializeWorkspace [project page]
|
||||
ptk/UpdateEvent
|
||||
|
|
@ -64,15 +64,17 @@
|
|||
;; Activate loaded if page is not fetched.
|
||||
(when-not page (reset! st/loader true))
|
||||
|
||||
(println "initialize")
|
||||
|
||||
(rx/merge
|
||||
(if page
|
||||
(rx/of (initialize-alignment-index page-id))
|
||||
(rx/of (initialize-alignment page-id))
|
||||
(rx/merge
|
||||
(rx/of (udp/fetch-pages project))
|
||||
(->> (rx/filter udp/pages-fetched? s)
|
||||
(rx/take 1)
|
||||
(rx/do #(reset! st/loader false))
|
||||
(rx/map #(initialize-alignment-index page-id)))))
|
||||
(rx/map #(initialize-alignment page-id)))))
|
||||
|
||||
;; Initial history loading
|
||||
(rx/of
|
||||
|
|
@ -206,7 +208,7 @@
|
|||
|
||||
;; --- Initialize Alignment Index
|
||||
|
||||
(defrecord InitializeAlignmentIndex [id]
|
||||
(defrecord InitializeAlignment [id]
|
||||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
(let [page (get-in state [:pages id])
|
||||
|
|
@ -222,9 +224,9 @@
|
|||
(when (:grid-alignment opts)
|
||||
(rx/of (activate-flag :grid-alignment)))))))
|
||||
|
||||
(defn initialize-alignment-index
|
||||
(defn initialize-alignment
|
||||
[id]
|
||||
(InitializeAlignmentIndex. id))
|
||||
(InitializeAlignment. id))
|
||||
|
||||
;; --- Update Metadata
|
||||
|
||||
|
|
@ -234,7 +236,7 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state s]
|
||||
(rx/of (udp/update-metadata id metadata)
|
||||
(initialize-alignment-index id))))
|
||||
(initialize-alignment id))))
|
||||
|
||||
(defn update-metadata
|
||||
[id metadata]
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
[potok.core :as ptk]
|
||||
[uxbox.store :as st]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.main.ui.workspace.base :refer [page-ref]]
|
||||
|
|
@ -93,52 +94,51 @@
|
|||
(udp/update-metadata id)
|
||||
(st/emit!))))
|
||||
(on-magnet-change []
|
||||
(let [checked? (dom/checked? (mx/ref-node own "magnet"))]
|
||||
(->> (assoc metadata :grid-alignment checked?)
|
||||
(udp/update-metadata id)
|
||||
(st/emit!))))
|
||||
(show-color-picker [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
opts {:x x :y y
|
||||
:transparent? true
|
||||
:default "#cccccc"
|
||||
:attr :grid-color}]
|
||||
(udl/open! :workspace/page-colorpicker opts)))]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
[:span "Size"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:ref "x-axis"
|
||||
:value (:grid-x-axis metadata 10)
|
||||
:on-change on-x-change
|
||||
:placeholder "x"}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:ref "y-axis"
|
||||
:value (:grid-y-axis metadata 10)
|
||||
:on-change on-y-change
|
||||
:placeholder "y"}]]]
|
||||
[:span "Color"]
|
||||
[:div.row-flex.color-dat
|
||||
[:span.color-th
|
||||
{:style {:background-color (:grid-color metadata "#cccccc")}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:span (:grid-color metadata "#cccccc")]]]
|
||||
(let [checked? (dom/checked? (mx/ref-node own "magnet"))
|
||||
metadata (assoc metadata :grid-alignment checked?)]
|
||||
(st/emit! (udw/update-metadata id metadata))))
|
||||
(show-color-picker [event]
|
||||
(let [x (.-clientX event)
|
||||
y (.-clientY event)
|
||||
opts {:x x :y y
|
||||
:transparent? true
|
||||
:default "#cccccc"
|
||||
:attr :grid-color}]
|
||||
(udl/open! :workspace/page-colorpicker opts)))]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
[:span "Size"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:ref "x-axis"
|
||||
:value (:grid-x-axis metadata 10)
|
||||
:on-change on-x-change
|
||||
:placeholder "x"}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:ref "y-axis"
|
||||
:value (:grid-y-axis metadata 10)
|
||||
:on-change on-y-change
|
||||
:placeholder "y"}]]]
|
||||
[:span "Color"]
|
||||
[:div.row-flex.color-dat
|
||||
[:span.color-th
|
||||
{:style {:background-color (:grid-color metadata "#cccccc")}
|
||||
:on-click show-color-picker}]
|
||||
[:div.color-info
|
||||
[:span (:grid-color metadata "#cccccc")]]]
|
||||
|
||||
[:span "Magnet option"]
|
||||
[:div.row-flex
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input
|
||||
{:type "checkbox"
|
||||
:ref "magnet"
|
||||
:id "magnet"
|
||||
:on-change on-magnet-change
|
||||
:checked (when (:grid-alignment metadata) "checked")}]
|
||||
[:label {:for "magnet"} "Activate magnet"]]]]])))
|
||||
[:span "Magnet option"]
|
||||
[:div.row-flex
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input
|
||||
{:type "checkbox"
|
||||
:ref "magnet"
|
||||
:id "magnet"
|
||||
:on-change on-magnet-change
|
||||
:checked (when (:grid-alignment metadata) "checked")}]
|
||||
[:label {:for "magnet"} "Activate magnet"]]]]])))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue