Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

🐛 Fix issue with annotation menu rerendering

Browse source
This commit is contained in:
Andrey Antukh 2024-06-07 11:55:43 +02:00
parent 38fa5be862
commit 2d527b2caf
1 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -38,8 +38,9 @@
(l/derived :workspace-annotations st/state)) (l/derived :workspace-annotations st/state))
(mf/defc component-annotation (mf/defc component-annotation
{::mf/props :obj} {::mf/props :obj
[{:keys [id shape component]}] ::mf/private true}
[{:keys [id shape component rerender-fn]}]
(let [main-instance? (:main-instance shape) (let [main-instance? (:main-instance shape)
component-id (:component-id shape) component-id (:component-id shape)
annotation (:annotation component) annotation (:annotation component)
@ -57,6 +58,7 @@
textarea-ref (mf/use-ref) textarea-ref (mf/use-ref)
state (mf/deref ref:annotations-state) state (mf/deref ref:annotations-state)
expanded? (:expanded state) expanded? (:expanded state)
create-id (:id-for-create state) create-id (:id-for-create state)
creating? (= id create-id) creating? (= id create-id)
@ -84,6 +86,7 @@
(mf/deps adjust-textarea-size creating?) (mf/deps adjust-textarea-size creating?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(rerender-fn)
(when-let [textarea (mf/ref-val textarea-ref)] (when-let [textarea (mf/ref-val textarea-ref)]
(dom/set-value! textarea annotation) (dom/set-value! textarea annotation)
(reset! editing* false) (reset! editing* false)
@ -95,6 +98,7 @@
(mf/use-fn (mf/use-fn
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(rerender-fn)
(when ^boolean main-instance? (when ^boolean main-instance?
(when-let [textarea (mf/ref-val textarea-ref)] (when-let [textarea (mf/ref-val textarea-ref)]
(reset! editing* true) (reset! editing* true)
@ -105,6 +109,7 @@
(mf/deps creating?) (mf/deps creating?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(rerender-fn)
(when-let [textarea (mf/ref-val textarea-ref)] (when-let [textarea (mf/ref-val textarea-ref)]
(let [text (dom/get-value textarea)] (let [text (dom/get-value textarea)]
(when-not (str/blank? text) (when-not (str/blank? text)
@ -113,13 +118,13 @@
(when ^boolean creating? (when ^boolean creating?
(st/emit! (dw/set-annotations-id-for-create nil)))))))) (st/emit! (dw/set-annotations-id-for-create nil))))))))
on-delete-annotation on-delete-annotation
(mf/use-fn (mf/use-fn
(mf/deps shape-id component-id creating?) (mf/deps shape-id component-id creating?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(let [on-accept (fn [] (let [on-accept (fn []
(rerender-fn)
(st/emit! (st/emit!
;; (ptk/data-event {::ev/name "delete-component-annotation"}) ;; (ptk/data-event {::ev/name "delete-component-annotation"})
(when creating? (when creating?
@ -566,6 +571,17 @@
(when can-swap? (st/emit! (dwsp/open-specialized-panel :component-swap))) (when can-swap? (st/emit! (dwsp/open-specialized-panel :component-swap)))
(tm/schedule-on-idle #(dom/focus! (dom/get-element search-id)))))) (tm/schedule-on-idle #(dom/focus! (dom/get-element search-id))))))
;; NOTE: function needed for force rerender from the bottom
;; components. This is because `component-annotation`
;; component changes the component but that has no direct
;; reflection on shape which is passed on params. So for avoid
;; the need to modify the shape artificially we just pass a
;; rerender helper to it via react context mechanism
rerender-fn
(mf/use-fn
(fn []
(swap! state* update :render inc)))
menu-entries (cmm/generate-components-menu-entries shapes components-v2) menu-entries (cmm/generate-components-menu-entries shapes components-v2)
show-menu? (seq menu-entries) show-menu? (seq menu-entries)
path (->> component (:path) (cfh/split-path) (cfh/join-path-with-dot))] path (->> component (:path) (cfh/split-path) (cfh/join-path-with-dot))]
@ -631,6 +647,6 @@
[:& component-swap {:shapes copies}]) [:& component-swap {:shapes copies}])
(when (and (not swap-opened?) (not multi) components-v2) (when (and (not swap-opened?) (not multi) components-v2)
[:& component-annotation {:id id :shape shape :component component}]) [:& component-annotation {:id id :shape shape :component component :rerender-fn rerender-fn}])
(when (dbg/enabled? :display-touched) (when (dbg/enabled? :display-touched)
[:div ":touched " (str (:touched shape))])])]))) [:div ":touched " (str (:touched shape))])])])))