Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

💄 Add cosmetic enhancements to viewport comments layer

Browse source 
That also improves performance
This commit is contained in:
Andrey Antukh 2024-03-04 14:13:50 +01:00
parent 1c38883ddd
commit 638cf6daff
2 changed files with 39 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/comments.cljs
View file

@ -391,6 +391,7 @@
(mf/with-layout-effect [thread-pos comments-map] (mf/with-layout-effect [thread-pos comments-map]
(when-let [node (mf/ref-val ref)] (when-let [node (mf/ref-val ref)]
(dom/scroll-into-view-if-needed! node))) (dom/scroll-into-view-if-needed! node)))
(when (some? comment) (when (some? comment)
[:div {:class (stl/css :thread-content) [:div {:class (stl/css :thread-content)
:style {:top (str pos-y "px") :style {:top (str pos-y "px")

70
frontend/src/app/main/ui/workspace/viewport/comments.cljs
View file

@ -7,61 +7,67 @@
(ns app.main.ui.workspace.viewport.comments (ns app.main.ui.workspace.viewport.comments
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm]
[app.main.data.comments :as dcm] [app.main.data.comments :as dcm]
[app.main.data.workspace.comments :as dwcm] [app.main.data.workspace.comments :as dwcm]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.comments :as cmt] [app.main.ui.comments :as cmt]
[cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn- update-position
[positions {:keys [id] :as thread}]
(if (contains? positions id)
(-> thread
(assoc :position (dm/get-in positions [id :position]))
(assoc :frame-id (dm/get-in positions [id :frame-id])))
thread))
(mf/defc comments-layer (mf/defc comments-layer
{::mf/props :obj}
[{:keys [vbox vport zoom file-id page-id drawing] :as props}] [{:keys [vbox vport zoom file-id page-id drawing] :as props}]
(let [pos-x (* (- (:x vbox)) zoom) (let [pos-x (* (- (:x vbox)) zoom)
pos-y (* (- (:y vbox)) zoom) pos-y (* (- (:y vbox)) zoom)
profile (mf/deref refs/profile) profile (mf/deref refs/profile)
users (mf/deref refs/current-file-comments-users) users (mf/deref refs/current-file-comments-users)
local (mf/deref refs/comments-local) local (mf/deref refs/comments-local)
threads-position-ref (l/derived (l/in [:workspace-data :pages-index page-id :options :comment-threads-position]) st/state)
threads-position-map (mf/deref threads-position-ref)
threads-map (mf/deref refs/threads-ref)
update-thread-position (fn update-thread-position [thread] positions-ref
(if (contains? threads-position-map (:id thread)) (mf/with-memo [page-id]
(-> thread (-> (l/in [:workspace-data :pages-index page-id :options :comment-threads-position])
(assoc :position (get-in threads-position-map [(:id thread) :position])) (l/derived st/state)))
(assoc :frame-id (get-in threads-position-map [(:id thread) :frame-id])))
thread))
threads (->> (vals threads-map) positions (mf/deref positions-ref)
(filter #(= (:page-id %) page-id)) threads-map (mf/deref refs/threads-ref)
(mapv update-thread-position)
(dcm/apply-filters local profile)) threads
(mf/with-memo [threads-map positions local profile]
(->> (vals threads-map)
(filter #(= (:page-id %) page-id))
(mapv (partial update-position positions))
(dcm/apply-filters local profile)))
on-draft-cancel on-draft-cancel
(mf/use-callback (mf/use-fn #(st/emit! :interrupt))
#(st/emit! :interrupt))
on-draft-submit on-draft-submit
(mf/use-callback (mf/use-fn
(fn [draft] (fn [draft]
(st/emit! (dcm/create-thread-on-workspace draft))))] (st/emit! (dcm/create-thread-on-workspace draft))))]
(mf/use-effect (mf/with-effect [file-id]
(mf/deps file-id) (st/emit! (dwcm/initialize-comments file-id))
(fn [] (fn [] (st/emit! ::dwcm/finalize)))
(st/emit! (dwcm/initialize-comments file-id))
(fn []
(st/emit! ::dwcm/finalize))))
[:div {:class (stl/css :comments-section)} [:div {:class (stl/css :comments-section)}
[:div [:div
{:class (stl/css :workspace-comments-container) {:class (stl/css :workspace-comments-container)
:style {:width (str (:width vport) "px") :style {:width (dm/str (:width vport) "px")
:height (str (:height vport) "px")}} :height (dm/str (:height vport) "px")}}
[:div {:class (stl/css :threads) [:div {:class (stl/css :threads)
:style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}} :style {:transform (dm/fmt "translate(%px, %px)" pos-x pos-y)}}
(for [item threads] (for [item threads]
[:& cmt/thread-bubble {:thread item [:& cmt/thread-bubble {:thread item
:zoom zoom :zoom zoom
@ -70,7 +76,7 @@
(when-let [id (:open local)] (when-let [id (:open local)]
(when-let [thread (get threads-map id)] (when-let [thread (get threads-map id)]
[:& cmt/thread-comments {:thread (update-thread-position thread) [:& cmt/thread-comments {:thread (update-position positions thread)
:users users :users users
:zoom zoom}])) :zoom zoom}]))