diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 15fdbb9367..b24e1af90d 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -124,6 +124,11 @@ :move-overlay-index]) workspace-local =)) +(def typography-data + (l/derived #(select-keys % [:rename-typography + :edit-typography]) + workspace-local =)) + (def local-displacement (l/derived #(select-keys % [:modifiers :selected]) workspace-local =)) @@ -158,9 +163,6 @@ (def current-hover-ids (l/derived :hover-ids context-menu)) -(def editors - (l/derived :editors workspace-local)) - (def selected-assets (l/derived :selected-assets workspace-local)) diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs index b4ba927be0..742066c822 100644 --- a/frontend/src/app/main/ui/hooks/resize.cljs +++ b/frontend/src/app/main/ui/hooks/resize.cljs @@ -32,34 +32,38 @@ start-ref (mf/use-ref nil) on-pointer-down - (fn [event] - (dom/capture-pointer event) - (mf/set-ref-val! start-size-ref @size-state) - (mf/set-ref-val! dragging-ref true) - (mf/set-ref-val! start-ref (dom/get-client-position event)) - (set! last-resize-type resize-type)) + (mf/use-callback + (mf/deps @size-state) + (fn [event] + (dom/capture-pointer event) + (mf/set-ref-val! start-size-ref @size-state) + (mf/set-ref-val! dragging-ref true) + (mf/set-ref-val! start-ref (dom/get-client-position event)) + (set! last-resize-type resize-type))) on-lost-pointer-capture - (fn [event] - (dom/release-pointer event) - (mf/set-ref-val! start-size-ref nil) - (mf/set-ref-val! dragging-ref false) - (mf/set-ref-val! start-ref nil) - (set! last-resize-type nil)) + (mf/use-callback + (fn [event] + (dom/release-pointer event) + (mf/set-ref-val! start-size-ref nil) + (mf/set-ref-val! dragging-ref false) + (mf/set-ref-val! start-ref nil) + (set! last-resize-type nil))) on-mouse-move - (fn [event] - (when (mf/ref-val dragging-ref) - (let [start (mf/ref-val start-ref) - pos (dom/get-client-position event) - delta (-> (gpt/to-vec start pos) - (cond-> negate? gpt/negate) - (get axis)) - start-size (mf/ref-val start-size-ref) - new-size (-> (+ start-size delta) (max min-val) (min max-val))] - - (reset! size-state new-size) - (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))] + (mf/use-callback + (mf/deps min-val max-val) + (fn [event] + (when (mf/ref-val dragging-ref) + (let [start (mf/ref-val start-ref) + pos (dom/get-client-position event) + delta (-> (gpt/to-vec start pos) + (cond-> negate? gpt/negate) + (get axis)) + start-size (mf/ref-val start-size-ref) + new-size (-> (+ start-size delta) (max min-val) (min max-val))] + (reset! size-state new-size) + (swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))] {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-mouse-move on-mouse-move @@ -68,16 +72,18 @@ (defn use-resize-observer [callback] + (assert (some? callback)) (let [prev-val-ref (mf/use-ref nil) current-observer-ref (mf/use-ref nil) + ;; We use the ref as a callback when the dom node is ready (or change) node-ref (mf/use-callback (mf/deps callback) - (fn [node] - (let [current-observer (mf/ref-val current-observer-ref) - prev-val (mf/ref-val prev-val-ref)] + (fn [^js node] + (let [^js current-observer (mf/ref-val current-observer-ref) + ^js prev-val (mf/ref-val prev-val-ref)] (when (and (not= prev-val node) (some? current-observer)) (log/debug :action "disconnect" :js/prev-val prev-val :js/node node) @@ -85,11 +91,8 @@ (mf/set-ref-val! current-observer-ref nil)) (when (and (not= prev-val node) (some? node)) - (let [observer - (js/ResizeObserver. - (fn [] - (let [size (dom/get-client-size node)] - (when callback (callback last-resize-type size)))))] + (let [^js observer + (js/ResizeObserver. #(callback last-resize-type (dom/get-client-size node)))] (mf/set-ref-val! current-observer-ref observer) (log/debug :action "observe" :js/node node :js/observer observer) (.observe observer node)))) @@ -97,6 +100,7 @@ (mf/use-effect (fn [] + ;; On dismount we need to disconnect the current observer (fn [] (let [current-observer (mf/ref-val current-observer-ref)] (when (some? current-observer) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 13b6506961..ca278502c9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -1087,7 +1087,7 @@ ;; ---- Typography box ---- (mf/defc typographies-group - [{:keys [file-id prefix groups open-groups file local? selected-typographies local + [{:keys [file-id prefix groups open-groups file local? selected-typographies local-data editing-id on-asset-click handle-change apply-typography on-rename-group on-ungroup on-context-menu]}] (let [group-open? (get open-groups prefix true)] @@ -1115,7 +1115,7 @@ :on-click #(on-asset-click % (:id typography) (partial apply-typography typography)) :editing? (= editing-id (:id typography)) - :focus-name? (= (:rename-typography local) (:id typography))}])]) + :focus-name? (= (:rename-typography local-data) (:id typography))}])]) (for [[path-item content] groups] (when-not (empty? path-item) @@ -1127,7 +1127,7 @@ :local? local? :selected-typographies selected-typographies :editing-id editing-id - :local local + :local-data local-data :on-asset-click on-asset-click :handle-change handle-change :apply-typography apply-typography @@ -1141,11 +1141,9 @@ (let [state (mf/use-state {:detail-open? false :id nil}) + local-data (mf/deref refs/typography-data) menu-state (mf/use-state auto-pos-menu-state) - - local (deref refs/workspace-local) - - groups (group-assets typographies reverse-sort?) + groups (group-assets typographies reverse-sort?) selected-typographies (:typographies selected-assets) multi-typographies? (> (count selected-typographies) 1) @@ -1174,7 +1172,11 @@ {:typography-ref-file file-id :typography-ref-id (:id typography)} (dissoc typography :id :name))] - (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs})) + (run! #(st/emit! + (dwt/update-text-attrs + {:id % + :editor (get @refs/workspace-editor-state %) + :attrs attrs})) ids))) create-group @@ -1273,14 +1275,15 @@ (dwl/sync-file file-id file-id) (dwu/commit-undo-transaction))))) - editing-id (or (:rename-typography local) (:edit-typography local))] + editing-id (or (:rename-typography local-data) + (:edit-typography local-data))] (mf/use-effect - (mf/deps local) + (mf/deps local-data) (fn [] - (when (:rename-typography local) + (when (:rename-typography local-data) (st/emit! #(update % :workspace-local dissoc :rename-typography))) - (when (:edit-typography local) + (when (:edit-typography local-data) (st/emit! #(update % :workspace-local dissoc :edit-typography))))) [:& asset-section {:file-id file-id @@ -1303,7 +1306,7 @@ :local? local? :selected-typographies selected-typographies :editing-id editing-id - :local local + :local-data local-data :on-asset-click (partial on-asset-click groups) :handle-change handle-change :apply-typography apply-typography diff --git a/frontend/src/app/main/ui/workspace/textpalette.cljs b/frontend/src/app/main/ui/workspace/textpalette.cljs index 72225aa20d..4d9ca61586 100644 --- a/frontend/src/app/main/ui/workspace/textpalette.cljs +++ b/frontend/src/app/main/ui/workspace/textpalette.cljs @@ -12,30 +12,35 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.context :as ctx] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [cuerdas.core :as str] - [okulary.core :as l] [rumext.alpha :as mf])) (mf/defc typography-item - [{:keys [local file-id selected-ids typography name-only?]}] + [{:keys [file-id selected-ids typography name-only?]}] (let [font-data (f/get-font-data (:font-id typography)) font-variant-id (:font-variant-id typography) variant-data (->> font-data :variants (d/seek #(= (:id %) font-variant-id))) handle-click (mf/use-callback - (mf/deps local typography selected-ids) + (mf/deps typography selected-ids) (fn [] (let [attrs (merge {:typography-ref-file file-id :typography-ref-id (:id typography)} (dissoc typography :id :name))] - (->> selected-ids - (run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs})))))))] + + (run! #(st/emit! + (dwt/update-text-attrs + {:id % + :editor (get @refs/workspace-editor-state %) + :attrs attrs})) + selected-ids))))] [:div.typography-item {:on-click handle-click} [:div.typography-name @@ -49,7 +54,7 @@ [:div.typography-data (str (:font-size typography) "pt | " (:name variant-data))]])])) (mf/defc palette - [{:keys [local selected-ids current-file-id file-typographies shared-libs]}] + [{:keys [selected-ids current-file-id file-typographies shared-libs]}] (let [state (mf/use-state {:show-menu false}) selected (mf/use-state :file) @@ -129,25 +134,19 @@ [:& typography-item {:key idx :file-id file-id - :local local :selected-ids selected-ids :typography item}])]] [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])) -(def local-data - (l/derived #(select-keys % [:editors]) refs/workspace-local =)) - (mf/defc textpalette {::mf/wrap [mf/memo]} [] - (let [local (mf/deref local-data) - selected-ids (mf/deref refs/selected-shapes) + (let [selected-ids (mf/deref refs/selected-shapes) file-typographies (mf/deref refs/workspace-file-typography) shared-libs (mf/deref refs/workspace-libraries) - current-file-id (mf/deref refs/current-file-id)] - [:& palette {:local local - :current-file-id current-file-id + current-file-id (mf/use-ctx ctx/current-file-id)] + [:& palette {:current-file-id current-file-id :selected-ids selected-ids :file-typographies file-typographies :shared-libs shared-libs}]))