From 1c446a011e97b7cc8336b456b4651825c8e1b41c Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 7 Jul 2022 13:19:03 +0200 Subject: [PATCH] :sparkles: Move comments --- CHANGES.md | 1 + backend/src/app/migrations.clj | 3 + .../sql/0077-mod-comment-thread-table.sql | 3 + backend/src/app/rpc/mutations/comments.clj | 45 ++++- .../styles/main/partials/comments.scss | 6 +- frontend/src/app/main/data/comments.cljs | 168 +++++++++++++++--- frontend/src/app/main/data/workspace.cljs | 143 +-------------- .../src/app/main/data/workspace/comments.cljs | 87 ++++++++- .../src/app/main/data/workspace/shapes.cljs | 5 +- .../app/main/data/workspace/transforms.cljs | 2 + .../src/app/main/data/workspace/viewport.cljs | 148 +++++++++++++++ frontend/src/app/main/ui/comments.cljs | 135 ++++++++++++-- frontend/src/app/main/ui/viewer/comments.cljs | 20 ++- .../src/app/main/ui/workspace/viewport.cljs | 2 +- .../main/ui/workspace/viewport/comments.cljs | 40 +++-- 15 files changed, 596 insertions(+), 212 deletions(-) create mode 100644 backend/src/app/migrations/sql/0077-mod-comment-thread-table.sql create mode 100644 frontend/src/app/main/data/workspace/viewport.cljs diff --git a/CHANGES.md b/CHANGES.md index 93a9de8a8..1a9713d0a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -29,6 +29,7 @@ - Improved share link options. Now you can allow non-team members to comment and/or inspect [Taiga #3056] (https://tree.taiga.io/project/penpot/us/3056) - Signin/Signup from shared link [Taiga #3472](https://tree.taiga.io/project/penpot/us/3472) - Support for import/export binary format [Taiga #2991](https://tree.taiga.io/project/penpot/us/2991) +- Comments positioning [Taiga #https://2007](tree.taiga.io/project/penpot/us/2007) ### :bug: Bugs fixed diff --git a/backend/src/app/migrations.clj b/backend/src/app/migrations.clj index a861fe218..086147ad2 100644 --- a/backend/src/app/migrations.clj +++ b/backend/src/app/migrations.clj @@ -238,6 +238,9 @@ {:name "0076-mod-storage-object-table" :fn (mg/resource "app/migrations/sql/0076-mod-storage-object-table.sql")} + + {:name "0077-mod-comment-thread-table" + :fn (mg/resource "app/migrations/sql/0077-mod-comment-thread-table.sql")} ]) diff --git a/backend/src/app/migrations/sql/0077-mod-comment-thread-table.sql b/backend/src/app/migrations/sql/0077-mod-comment-thread-table.sql new file mode 100644 index 000000000..7898ca2cf --- /dev/null +++ b/backend/src/app/migrations/sql/0077-mod-comment-thread-table.sql @@ -0,0 +1,3 @@ +--- Add frame_id field. +ALTER TABLE comment_thread + ADD COLUMN frame_id uuid NULL DEFAULT '00000000-0000-0000-0000-000000000000'; diff --git a/backend/src/app/rpc/mutations/comments.clj b/backend/src/app/rpc/mutations/comments.clj index e8a60c8b7..feda6566b 100644 --- a/backend/src/app/rpc/mutations/comments.clj +++ b/backend/src/app/rpc/mutations/comments.clj @@ -31,9 +31,10 @@ (s/def ::profile-id ::us/uuid) (s/def ::position ::gpt/point) (s/def ::content ::us/string) +(s/def ::frame-id ::us/uuid) (s/def ::create-comment-thread - (s/keys :req-un [::profile-id ::file-id ::position ::content ::page-id] + (s/keys :req-un [::profile-id ::file-id ::position ::content ::page-id ::frame-id] :opt-un [::share-id])) (sv/defmethod ::create-comment-thread @@ -53,7 +54,7 @@ (:next-seqn res))) (defn- create-comment-thread - [conn {:keys [profile-id file-id page-id position content] :as params}] + [conn {:keys [profile-id file-id page-id position content frame-id] :as params}] (let [seqn (retrieve-next-seqn conn file-id) now (dt/now) pname (retrieve-page-name conn params) @@ -66,7 +67,8 @@ :created-at now :modified-at now :seqn seqn - :position (db/pgpoint position)})] + :position (db/pgpoint position) + :frame-id frame-id})] ;; Create a comment entry @@ -281,3 +283,40 @@ :code :not-allowed)) (db/delete! conn :comment {:id id})))) + +;; --- Mutation: Update comment thread position + +(s/def ::update-comment-thread-position + (s/keys :req-un [::profile-id ::id ::position ::frame-id])) + +(sv/defmethod ::update-comment-thread-position + [{:keys [pool] :as cfg} {:keys [profile-id id position frame-id] :as params}] + (db/with-atomic [conn pool] + (let [thread (db/get-by-id conn :comment-thread id {:for-update true})] + (when-not (= (:owner-id thread) profile-id) + (ex/raise :type :validation + :code :not-allowed)) + (db/update! conn :comment-thread + {:modified-at (dt/now) + :position (db/pgpoint position) + :frame-id frame-id} + {:id (:id thread)}) + nil))) + +;; --- Mutation: Update comment frame + +(s/def ::update-comment-thread-frame + (s/keys :req-un [::profile-id ::id ::frame-id])) + +(sv/defmethod ::update-comment-thread-frame + [{:keys [pool] :as cfg} {:keys [profile-id id frame-id] :as params}] + (db/with-atomic [conn pool] + (let [thread (db/get-by-id conn :comment-thread id {:for-update true})] + (when-not (= (:owner-id thread) profile-id) + (ex/raise :type :validation + :code :not-allowed)) + (db/update! conn :comment-thread + {:modified-at (dt/now) + :frame-id frame-id} + {:id (:id thread)}) + nil))) diff --git a/frontend/resources/styles/main/partials/comments.scss b/frontend/resources/styles/main/partials/comments.scss index 7019ee9c3..e3bd0904e 100644 --- a/frontend/resources/styles/main/partials/comments.scss +++ b/frontend/resources/styles/main/partials/comments.scss @@ -29,6 +29,9 @@ &.unread { background-color: $color-primary; } + span { + user-select: none; + } } .thread-content { @@ -77,7 +80,7 @@ resize: none; width: 100%; border-radius: 2px; - border: 1px solid $color-gray-10; + border: 1px solid $color-gray-20; max-height: 4rem; } @@ -188,6 +191,7 @@ margin: 0 $size-2 0 26px; white-space: pre-wrap; display: inline-block; + word-break: break-all; } } } diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs index 8d749e5f3..5490e0743 100644 --- a/frontend/src/app/main/data/comments.cljs +++ b/frontend/src/app/main/data/comments.cljs @@ -8,7 +8,10 @@ (:require [app.common.data :as d] [app.common.geom.point :as gpt] + [app.common.pages.helpers :as cph] [app.common.spec :as us] + [app.common.uuid :as uuid] + [app.main.data.workspace.state-helpers :as wsh] [app.main.repo :as rp] [beicon.core :as rx] [cljs.spec.alpha :as s] @@ -59,29 +62,70 @@ (declare retrieve-comment-threads) (declare refresh-comment-thread) -(s/def ::create-thread-params +(s/def ::create-thread-on-workspace-params (s/keys :req-un [::page-id ::file-id ::position ::content])) -(defn create-thread - [params] - (us/assert ::create-thread-params params) - (letfn [(created [{:keys [id comment] :as thread} state] - (-> state - (update :comment-threads assoc id (dissoc thread :comment)) - (update :comments-local assoc :open id) - (update :comments-local dissoc :draft) - (update :workspace-drawing dissoc :comment) - (update-in [:comments id] assoc (:id comment) comment)))] +(s/def ::create-thread-on-viewer-params + (s/keys :req-un [::page-id ::file-id ::position ::content ::frame-id])) - (ptk/reify ::create-comment-thread - ptk/WatchEvent - (watch [_ state _] - (let [share-id (-> state :viewer-local :share-id) - params (assoc params :share-id share-id)] - (->> (rp/mutation :create-comment-thread params) - (rx/mapcat #(rp/query :comment-thread {:file-id (:file-id %) :id (:id %) :share-id share-id})) - (rx/map #(partial created %)) - (rx/catch #(rx/throw {:type :comment-error})))))))) +(defn created-thread-on-workspace + [{:keys [id comment page-id] :as thread}] + + (ptk/reify ::created-thread-on-workspace + ptk/UpdateEvent + (update [_ state] + (-> state + (update :comment-threads assoc id (dissoc thread :comment)) + (update-in [:workspace-data :pages-index page-id :options :comment-threads-position] assoc id (select-keys thread [:position :frame-id])) + (update :comments-local assoc :open id) + (update :comments-local dissoc :draft) + (update :workspace-drawing dissoc :comment) + (update-in [:comments id] assoc (:id comment) comment))))) + +(defn create-thread-on-workspace + [params] + (us/assert ::create-thread-on-workspace-params params) + + (ptk/reify ::create-thread-on-workspace + ptk/WatchEvent + (watch [_ state _] + (let [page-id (:current-page-id state) + objects (wsh/lookup-page-objects state page-id) + frame-id (cph/frame-id-by-position objects (:position params)) + params (assoc params :frame-id frame-id)] + (->> (rp/mutation :create-comment-thread params) + (rx/mapcat #(rp/query :comment-thread {:file-id (:file-id %) :id (:id %)})) + (rx/map created-thread-on-workspace) + (rx/catch #(rx/throw {:type :comment-error}))))))) + +(defn created-thread-on-viewer + [{:keys [id comment page-id] :as thread}] + + (ptk/reify ::created-thread-on-workspace + ptk/UpdateEvent + (update [_ state] + (-> state + (update :comment-threads assoc id (dissoc thread :comment)) + (update-in [:viewer :pages page-id :options :comment-threads-position] assoc id (select-keys thread [:position :frame-id])) + (update :comments-local assoc :open id) + (update :comments-local dissoc :draft) + (update :workspace-drawing dissoc :comment) + (update-in [:comments id] assoc (:id comment) comment))))) + +(defn create-thread-on-viewer + [params] + (us/assert ::create-thread-on-viewer-params params) + + (ptk/reify ::create-thread-on-viewer + ptk/WatchEvent + (watch [_ state _] + (let [share-id (-> state :viewer-local :share-id) + frame-id (:frame-id params) + params (assoc params :share-id share-id :frame-id frame-id)] + (->> (rp/mutation :create-comment-thread params) + (rx/mapcat #(rp/query :comment-thread {:file-id (:file-id %) :id (:id %) :share-id share-id})) + (rx/map created-thread-on-viewer) + (rx/catch #(rx/throw {:type :comment-error}))))))) (defn update-comment-thread-status [{:keys [id] :as thread}] @@ -95,7 +139,6 @@ (rx/map (constantly done)) (rx/catch #(rx/throw {:type :comment-error}))))))) - (defn update-comment-thread [{:keys [id is-resolved] :as thread}] (us/assert ::comment-thread thread) @@ -114,7 +157,6 @@ (rx/catch #(rx/throw {:type :comment-error})) (rx/ignore)))))) - (defn add-comment [thread content] (us/assert ::comment-thread thread) @@ -146,15 +188,35 @@ (rx/catch #(rx/throw {:type :comment-error})) (rx/ignore)))))) -(defn delete-comment-thread +(defn delete-comment-thread-on-workspace [{:keys [id] :as thread}] (us/assert ::comment-thread thread) - (ptk/reify ::delete-comment-thread + (ptk/reify ::delete-comment-thread-on-workspace ptk/UpdateEvent (update [_ state] - (-> state - (update :comments dissoc id) - (update :comment-threads dissoc id))) + (let [page-id (:current-page-id state)] + (-> state + (update-in [:workspace-data :pages-index page-id :options :comment-threads-position] dissoc id) + (update :comments dissoc id) + (update :comment-threads dissoc id)))) + + ptk/WatchEvent + (watch [_ _ _] + (->> (rp/mutation :delete-comment-thread {:id id}) + (rx/catch #(rx/throw {:type :comment-error})) + (rx/ignore))))) + +(defn delete-comment-thread-on-viewer + [{:keys [id] :as thread}] + (us/assert ::comment-thread thread) + (ptk/reify ::delete-comment-thread-on-viewer + ptk/UpdateEvent + (update [_ state] + (let [page-id (:current-page-id state)] + (-> state + (update-in [:viewer :pages page-id :options :comment-threads-position] dissoc id) + (update :comments dissoc id) + (update :comment-threads dissoc id)))) ptk/WatchEvent (watch [_ state _] @@ -194,8 +256,18 @@ (defn retrieve-comment-threads [file-id] (us/assert ::us/uuid file-id) - (letfn [(fetched [data state] - (assoc state :comment-threads (d/index-by :id data)))] + (letfn [(set-comment-threds [state comment-thread] + (let [path [:workspace-data :pages-index (:page-id comment-thread) :options :comment-threads-position (:id comment-thread)] + thread-position (get-in state path)] + (cond-> state + (nil? thread-position) + (-> + (assoc-in (conj path :position) (:position comment-thread)) + (assoc-in (conj path :frame-id) (:frame-id comment-thread)))))) + (fetched [data state] + (let [state (assoc state :comment-threads (d/index-by :id data))] + (reduce set-comment-threds state data)))] + (ptk/reify ::retrieve-comment-threads ptk/WatchEvent (watch [_ state _] @@ -338,3 +410,41 @@ (= :yours mode) (filter #(contains? (:participants %) (:id profile)))))) + +(defn update-comment-thread-frame + ([thread ] + (update-comment-thread-frame thread uuid/zero)) + + ([thread frame-id] + (us/assert ::comment-thread thread) + (ptk/reify ::update-comment-thread-frame + ptk/UpdateEvent + (update [_ state] + (let [thread-id (:id thread)] + (assoc-in state [:comment-threads thread-id :frame-id] frame-id))) + + ptk/WatchEvent + (watch [_ _ _] + (let [thread-id (:id thread)] + (->> (rp/mutation :update-comment-thread-frame {:id thread-id :frame-id frame-id}) + (rx/catch #(rx/throw {:type :comment-error :code :update-comment-thread-frame})) + (rx/ignore))))))) + +(defn detach-comment-thread + "Detach comment threads that are inside a frame when that frame is deleted" + [ids] + (us/verify (s/coll-of uuid?) ids) + + (ptk/reify ::detach-comment-thread + ptk/WatchEvent + (watch [_ state _] + (let [objects (wsh/lookup-page-objects state) + is-frame? (fn [id] (= :frame (get-in objects [id :type]))) + frame-ids? (into #{} (filter is-frame?) ids)] + + (->> state + :comment-threads + (vals) + (filter (fn [comment] (some #(= % (:frame-id comment)) frame-ids?))) + (map update-comment-thread-frame) + (rx/from)))))) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 8d2abf1c8..397d3824e 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -13,7 +13,6 @@ [app.common.geom.point :as gpt] [app.common.geom.proportions :as gpr] [app.common.geom.shapes :as gsh] - [app.common.math :as mth] [app.common.pages :as cp] [app.common.pages.changes-builder :as pcb] [app.common.pages.helpers :as cph] @@ -50,6 +49,7 @@ [app.main.data.workspace.thumbnails :as dwth] [app.main.data.workspace.transforms :as dwt] [app.main.data.workspace.undo :as dwu] + [app.main.data.workspace.viewport :as dwv] [app.main.data.workspace.zoom :as dwz] [app.main.repo :as rp] [app.main.streams :as ms] @@ -397,140 +397,6 @@ (assoc-in state [:workspace-global :tooltip] content) (assoc-in state [:workspace-global :tooltip] nil))))) -;; --- Viewport Sizing - -(defn initialize-viewport - [{:keys [width height] :as size}] - (letfn [(update* [{:keys [vport] :as local}] - (let [wprop (/ (:width vport) width) - hprop (/ (:height vport) height)] - (-> local - (assoc :vport size) - (update :vbox (fn [vbox] - (-> vbox - (update :width #(/ % wprop)) - (update :height #(/ % hprop)))))))) - - (initialize [state local] - (let [page-id (:current-page-id state) - objects (wsh/lookup-page-objects state page-id) - shapes (cph/get-immediate-children objects) - srect (gsh/selection-rect shapes) - local (assoc local :vport size :zoom 1)] - (cond - (or (not (d/num? (:width srect))) - (not (d/num? (:height srect)))) - (assoc local :vbox (assoc size :x 0 :y 0)) - - (or (> (:width srect) width) - (> (:height srect) height)) - (let [srect (gal/adjust-to-viewport size srect {:padding 40}) - zoom (/ (:width size) (:width srect))] - (-> local - (assoc :zoom zoom) - (update :vbox merge srect))) - - :else - (assoc local :vbox (assoc size - :x (+ (:x srect) (/ (- (:width srect) width) 2)) - :y (+ (:y srect) (/ (- (:height srect) height) 2))))))) - - (setup [state local] - (if (and (:vbox local) (:vport local)) - (update* local) - (initialize state local)))] - - (ptk/reify ::initialize-viewport - ptk/UpdateEvent - (update [_ state] - (update state :workspace-local - (fn [local] - (setup state local))))))) - -(defn update-viewport-position - [{:keys [x y] :or {x identity y identity}}] - (us/assert fn? x) - (us/assert fn? y) - (ptk/reify ::update-viewport-position - ptk/UpdateEvent - (update [_ state] - (update-in state [:workspace-local :vbox] - (fn [vbox] - (-> vbox - (update :x x) - (update :y y))))))) - -(defn update-viewport-size - [resize-type {:keys [width height] :as size}] - (ptk/reify ::update-viewport-size - ptk/UpdateEvent - (update [_ state] - (update state :workspace-local - (fn [{:keys [vport] :as local}] - (if (or (nil? vport) - (mth/almost-zero? width) - (mth/almost-zero? height)) - ;; If we have a resize to zero just keep the old value - local - (let [wprop (/ (:width vport) width) - hprop (/ (:height vport) height) - - vbox (:vbox local) - vbox-x (:x vbox) - vbox-y (:y vbox) - vbox-width (:width vbox) - vbox-height (:height vbox) - - vbox-width' (/ vbox-width wprop) - vbox-height' (/ vbox-height hprop) - - vbox-x' - (case resize-type - :left (+ vbox-x (- vbox-width vbox-width')) - :right vbox-x - (+ vbox-x (/ (- vbox-width vbox-width') 2))) - - vbox-y' - (case resize-type - :top (+ vbox-y (- vbox-height vbox-height')) - :bottom vbox-y - (+ vbox-y (/ (- vbox-height vbox-height') 2)))] - (-> local - (assoc :vport size) - (assoc-in [:vbox :x] vbox-x') - (assoc-in [:vbox :y] vbox-y') - (assoc-in [:vbox :width] vbox-width') - (assoc-in [:vbox :height] vbox-height'))))))))) - -(defn start-panning [] - (ptk/reify ::start-panning - ptk/WatchEvent - (watch [_ state stream] - (let [stopper (->> stream (rx/filter (ptk/type? ::finish-panning))) - zoom (-> (get-in state [:workspace-local :zoom]) gpt/point)] - (when-not (get-in state [:workspace-local :panning]) - (rx/concat - (rx/of #(-> % (assoc-in [:workspace-local :panning] true))) - (->> stream - (rx/filter ms/pointer-event?) - (rx/filter #(= :delta (:source %))) - (rx/map :pt) - (rx/take-until stopper) - (rx/map (fn [delta] - (let [delta (gpt/divide delta zoom)] - (update-viewport-position {:x #(- % (:x delta)) - :y #(- % (:y delta))}))))))))))) - -(defn finish-panning [] - (ptk/reify ::finish-panning - ptk/UpdateEvent - (update [_ state] - (-> state - (update :workspace-local dissoc :panning))))) - - - - ;; --- Update Shape Attrs (defn update-shape @@ -1762,3 +1628,10 @@ ;; Thumbnails (dm/export dwth/update-thumbnail) + +;; Viewport +(dm/export dwv/initialize-viewport) +(dm/export dwv/update-viewport-position) +(dm/export dwv/update-viewport-size) +(dm/export dwv/start-panning) +(dm/export dwv/finish-panning) diff --git a/frontend/src/app/main/data/workspace/comments.cljs b/frontend/src/app/main/data/workspace/comments.cljs index b7f9f2030..2e8293042 100644 --- a/frontend/src/app/main/data/workspace/comments.cljs +++ b/frontend/src/app/main/data/workspace/comments.cljs @@ -6,13 +6,22 @@ (ns app.main.data.workspace.comments (:require + [app.common.geom.point :as gpt] + [app.common.geom.shapes :as gsh] + [app.common.pages.changes-builder :as pcb] + [app.common.pages.helpers :as cph] [app.common.spec :as us] [app.main.data.comments :as dcm] - [app.main.data.workspace :as dw] - [app.main.data.workspace.common :as dwc] + [app.main.data.workspace.changes :as dwc] + [app.main.data.workspace.common :as dwco] + [app.main.data.workspace.drawing :as dwd] + [app.main.data.workspace.state-helpers :as wsh] + [app.main.data.workspace.viewport :as dwv] + [app.main.repo :as rp] [app.main.streams :as ms] [app.util.router :as rt] [beicon.core :as rx] + [cljs.spec.alpha :as s] [potok.core :as ptk])) (declare handle-interrupt) @@ -33,7 +42,7 @@ (rx/map handle-comment-layer-click) (rx/take-until stoper)) (->> stream - (rx/filter dwc/interrupt?) + (rx/filter dwco/interrupt?) (rx/map handle-interrupt) (rx/take-until stoper))))))) @@ -95,8 +104,76 @@ (rx/merge (rx/of (rt/nav :workspace pparams qparams)) (->> stream - (rx/filter (ptk/type? ::dw/initialize-viewport)) + (rx/filter (ptk/type? ::dwv/initialize-viewport)) (rx/take 1) (rx/mapcat #(rx/of (center-to-comment-thread thread) - (dw/select-for-drawing :comments) + (dwd/select-for-drawing :comments) (dcm/open-thread thread))))))))) + +(defn update-comment-thread-position + ([thread [new-x new-y]] + (update-comment-thread-position thread [new-x new-y] nil)) + + ([thread [new-x new-y] frame-id] + (us/assert ::dcm/comment-thread thread) + (ptk/reify ::update-comment-thread-position + ptk/WatchEvent + (watch [it state _] + (let [thread-id (:id thread) + page (wsh/lookup-page state) + page-id (:id page) + objects (wsh/lookup-page-objects state page-id) + new-frame-id (if (nil? frame-id) + (cph/frame-id-by-position objects {:x new-x :y new-y}) + (:frame-id thread)) + thread (assoc thread + :position {:x new-x :y new-y} + :frame-id new-frame-id) + + changes + (-> (pcb/empty-changes it) + (pcb/with-page page) + (pcb/update-page-option :comment-threads-position assoc thread-id (select-keys thread [:position :frame-id])))] + + (rx/merge + (rx/of (dwc/commit-changes changes)) + (->> (rp/mutation :update-comment-thread-position thread) + (rx/catch #(rx/throw {:type :update-comment-thread-position})) + (rx/ignore)))))))) + +(defn move-frame-comment-threads + "Move comment threads that are inside a frame when that frame is moved" + [ids] + (us/verify (s/coll-of uuid?) ids) + + (ptk/reify ::move-frame-comment-threads + ptk/WatchEvent + (watch [_ state _] + (let [objects (wsh/lookup-page-objects state) + + is-frame? (fn [id] (= :frame (get-in objects [id :type]))) + frame-ids? (into #{} (filter is-frame?) ids) + + object-modifiers (:workspace-modifiers state) + + threads-position-map (:comment-threads-position (wsh/lookup-page-options state)) + + build-move-event + (fn [comment-thread] + (let [frame (get objects (:frame-id comment-thread)) + frame' (-> (merge frame (get object-modifiers (:frame-id comment-thread))) + (gsh/transform-shape)) + moved (gpt/to-vec (gpt/point (:x frame) (:y frame)) + (gpt/point (:x frame') (:y frame'))) + position (get-in threads-position-map [(:id comment-thread) :position]) + new-x (+ (:x position) (:x moved)) + new-y (+ (:y position) (:y moved))] + (update-comment-thread-position comment-thread [new-x new-y] (:id frame))))] + + (->> (:comment-threads state) + (vals) + (map #(assoc % :position (get-in threads-position-map [(:id %) :position]))) + (map #(assoc % :frame-id (get-in threads-position-map [(:id %) :frame-id]))) + (filter (comp frame-ids? :frame-id)) + (map build-move-event) + (rx/from)))))) diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index 2b9a2f23b..a072e3023 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/frontend/src/app/main/data/workspace/shapes.cljs @@ -17,6 +17,7 @@ [app.common.types.shape :as spec.shape] [app.common.types.shape.interactions :as csi] [app.common.uuid :as uuid] + [app.main.data.comments :as dc] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.edition :as dwe] [app.main.data.workspace.selection :as dws] @@ -237,7 +238,9 @@ (->> (map :id starting-flows) (reduce csp/remove-flow flows))))))] - (rx/of (dch/commit-changes changes)))))) + (rx/of + (dc/detach-comment-thread ids) + (dch/commit-changes changes)))))) (defn- viewport-center [state] diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 5a20b2946..92c193c5f 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -18,6 +18,7 @@ [app.common.spec :as us] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.collapse :as dwc] + [app.main.data.workspace.comments :as dwcm] [app.main.data.workspace.guides :as dwg] [app.main.data.workspace.selection :as dws] [app.main.data.workspace.state-helpers :as wsh] @@ -201,6 +202,7 @@ (rx/of (dwu/start-undo-transaction)) (rx/empty)) (rx/of (dwg/move-frame-guides ids-with-children) + (dwcm/move-frame-comment-threads ids-with-children) (dch/update-shapes ids-with-children (fn [shape] diff --git a/frontend/src/app/main/data/workspace/viewport.cljs b/frontend/src/app/main/data/workspace/viewport.cljs new file mode 100644 index 000000000..aad315aa1 --- /dev/null +++ b/frontend/src/app/main/data/workspace/viewport.cljs @@ -0,0 +1,148 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.data.workspace.viewport + (:require + [app.common.data :as d] + [app.common.geom.align :as gal] + [app.common.geom.point :as gpt] + [app.common.geom.shapes :as gsh] + [app.common.math :as mth] + [app.common.pages.helpers :as cph] + [app.common.spec :as us] + [app.main.data.workspace.state-helpers :as wsh] + [app.main.streams :as ms] + [beicon.core :as rx] + [potok.core :as ptk])) + +(defn initialize-viewport + [{:keys [width height] :as size}] + (letfn [(update* [{:keys [vport] :as local}] + (let [wprop (/ (:width vport) width) + hprop (/ (:height vport) height)] + (-> local + (assoc :vport size) + (update :vbox (fn [vbox] + (-> vbox + (update :width #(/ % wprop)) + (update :height #(/ % hprop)))))))) + + (initialize [state local] + (let [page-id (:current-page-id state) + objects (wsh/lookup-page-objects state page-id) + shapes (cph/get-immediate-children objects) + srect (gsh/selection-rect shapes) + local (assoc local :vport size :zoom 1)] + (cond + (or (not (d/num? (:width srect))) + (not (d/num? (:height srect)))) + (assoc local :vbox (assoc size :x 0 :y 0)) + + (or (> (:width srect) width) + (> (:height srect) height)) + (let [srect (gal/adjust-to-viewport size srect {:padding 40}) + zoom (/ (:width size) (:width srect))] + (-> local + (assoc :zoom zoom) + (update :vbox merge srect))) + + :else + (assoc local :vbox (assoc size + :x (+ (:x srect) (/ (- (:width srect) width) 2)) + :y (+ (:y srect) (/ (- (:height srect) height) 2))))))) + + (setup [state local] + (if (and (:vbox local) (:vport local)) + (update* local) + (initialize state local)))] + + (ptk/reify ::initialize-viewport + ptk/UpdateEvent + (update [_ state] + (update state :workspace-local + (fn [local] + (setup state local))))))) + +(defn update-viewport-position + [{:keys [x y] :or {x identity y identity}}] + (us/assert fn? x) + (us/assert fn? y) + (ptk/reify ::update-viewport-position + ptk/UpdateEvent + (update [_ state] + (update-in state [:workspace-local :vbox] + (fn [vbox] + (-> vbox + (update :x x) + (update :y y))))))) + +(defn update-viewport-size + [resize-type {:keys [width height] :as size}] + (ptk/reify ::update-viewport-size + ptk/UpdateEvent + (update [_ state] + (update state :workspace-local + (fn [{:keys [vport] :as local}] + (if (or (nil? vport) + (mth/almost-zero? width) + (mth/almost-zero? height)) + ;; If we have a resize to zero just keep the old value + local + (let [wprop (/ (:width vport) width) + hprop (/ (:height vport) height) + + vbox (:vbox local) + vbox-x (:x vbox) + vbox-y (:y vbox) + vbox-width (:width vbox) + vbox-height (:height vbox) + + vbox-width' (/ vbox-width wprop) + vbox-height' (/ vbox-height hprop) + + vbox-x' + (case resize-type + :left (+ vbox-x (- vbox-width vbox-width')) + :right vbox-x + (+ vbox-x (/ (- vbox-width vbox-width') 2))) + + vbox-y' + (case resize-type + :top (+ vbox-y (- vbox-height vbox-height')) + :bottom vbox-y + (+ vbox-y (/ (- vbox-height vbox-height') 2)))] + (-> local + (assoc :vport size) + (assoc-in [:vbox :x] vbox-x') + (assoc-in [:vbox :y] vbox-y') + (assoc-in [:vbox :width] vbox-width') + (assoc-in [:vbox :height] vbox-height'))))))))) + +(defn start-panning [] + (ptk/reify ::start-panning + ptk/WatchEvent + (watch [_ state stream] + (let [stopper (->> stream (rx/filter (ptk/type? ::finish-panning))) + zoom (-> (get-in state [:workspace-local :zoom]) gpt/point)] + (when-not (get-in state [:workspace-local :panning]) + (rx/concat + (rx/of #(-> % (assoc-in [:workspace-local :panning] true))) + (->> stream + (rx/filter ms/pointer-event?) + (rx/filter #(= :delta (:source %))) + (rx/map :pt) + (rx/take-until stopper) + (rx/map (fn [delta] + (let [delta (gpt/divide delta zoom)] + (update-viewport-position {:x #(- % (:x delta)) + :y #(- % (:y delta))}))))))))))) + +(defn finish-panning [] + (ptk/reify ::finish-panning + ptk/UpdateEvent + (update [_ state] + (-> state + (update :workspace-local dissoc :panning))))) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 5aa993a27..14361b96f 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -9,6 +9,7 @@ [app.config :as cfg] [app.main.data.comments :as dcm] [app.main.data.modal :as modal] + [app.main.data.workspace.comments :as dwcm] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] @@ -183,7 +184,7 @@ [:input.btn-secondary {:type "button" :value "Cancel" :on-click on-cancel}]]])) (mf/defc comment-item - [{:keys [comment thread users] :as props}] + [{:keys [comment thread users origin] :as props}] (let [owner (get users (:owner-id comment)) profile (mf/deref refs/profile) options (mf/use-state false) @@ -210,7 +211,9 @@ (mf/use-callback (mf/deps thread) #(st/emit! (dcm/close-thread) - (dcm/delete-comment-thread thread))) + (if (= origin :viewer) + (dcm/delete-comment-thread-on-viewer thread) + (dcm/delete-comment-thread-on-workspace thread)))) on-delete-thread @@ -278,9 +281,10 @@ (l/derived (l/in [:comments id]) st/state)) (mf/defc thread-comments - [{:keys [thread zoom users]}] + [{:keys [thread zoom users origin]}] (let [ref (mf/use-ref) pos (:position thread) + pos-x (+ (* (:x pos) zoom) 14) pos-y (- (* (:y pos) zoom) 14) @@ -313,33 +317,134 @@ [:div.comments [:& comment-item {:comment comment :users users - :thread thread}] + :thread thread + :origin origin}] (for [item (rest comments)] [:* [:hr] - [:& comment-item {:comment item :users users}]]) + [:& comment-item {:comment item + :users users + :origin origin}]]) [:div {:ref ref}]] [:& reply-form {:thread thread}]]))) +(defn use-buble + [zoom {:keys [position frame-id]}] + (let [dragging-ref (mf/use-ref false) + start-ref (mf/use-ref nil) + + state (mf/use-state {:hover false + :new-position-x nil + :new-position-y nil + :new-frame-id frame-id}) + + on-pointer-down + (mf/use-callback + (fn [event] + (dom/capture-pointer event) + (mf/set-ref-val! dragging-ref true) + (mf/set-ref-val! start-ref (dom/get-client-position event)))) + + on-pointer-up + (mf/use-callback + (mf/deps (select-keys @state [:new-position-x :new-position-y :new-frame-id])) + (fn [_ thread] + (when (and + (some? (:new-position-x @state)) + (some? (:new-position-y @state))) + (st/emit! (dwcm/update-comment-thread-position thread [(:new-position-x @state) (:new-position-y @state)]))))) + + on-lost-pointer-capture + (mf/use-callback + (fn [event] + (dom/release-pointer event) + (mf/set-ref-val! dragging-ref false) + (mf/set-ref-val! start-ref nil) + (swap! state assoc :new-position-x nil) + (swap! state assoc :new-position-y nil))) + + on-mouse-move + (mf/use-callback + (mf/deps position zoom) + (fn [event] + (when-let [_ (mf/ref-val dragging-ref)] + (let [start-pt (mf/ref-val start-ref) + current-pt (dom/get-client-position event) + delta-x (/ (- (:x current-pt) (:x start-pt)) zoom) + delta-y (/ (- (:y current-pt) (:y start-pt)) zoom)] + (swap! state assoc + :new-position-x (+ (:x position) delta-x) + :new-position-y (+ (:y position) delta-y))))))] + + {:on-pointer-down on-pointer-down + :on-pointer-up on-pointer-up + :on-mouse-move on-mouse-move + :on-lost-pointer-capture on-lost-pointer-capture + :state state})) + (mf/defc thread-bubble {::mf/wrap [mf/memo]} - [{:keys [thread zoom on-click] :as params}] + [{:keys [thread zoom open? on-click origin]}] (let [pos (:position thread) - pos-x (* (:x pos) zoom) - pos-y (* (:y pos) zoom) - on-click* (fn [event] - (dom/stop-propagation event) - (on-click thread))] + drag? (mf/use-ref nil) + was-open? (mf/use-ref nil) + + {:keys [on-pointer-down + on-pointer-up + on-mouse-move + state + on-lost-pointer-capture]} (use-buble zoom thread) + + pos-x (* (or (:new-position-x @state) (:x pos)) zoom) + pos-y (* (or (:new-position-y @state) (:y pos)) zoom) + + on-pointer-down* (mf/use-callback + (mf/deps origin was-open? open? drag? on-pointer-down) + (fn [event] + (when (not= origin :viewer) + (mf/set-ref-val! was-open? open?) + (when open? (st/emit! (dcm/close-thread))) + (mf/set-ref-val! drag? false) + (dom/stop-propagation event) + (on-pointer-down event)))) + + on-pointer-up* (mf/use-callback + (mf/deps origin thread was-open? drag? on-pointer-up) + (fn [event] + (when (not= origin :viewer) + (dom/stop-propagation event) + (on-pointer-up event thread) + + (when (or (and (mf/ref-val was-open?) (mf/ref-val drag?)) + (and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?)))) + (st/emit! (dcm/open-thread thread)))))) + + on-mouse-move* (mf/use-callback + (mf/deps origin drag? on-mouse-move) + (fn [event] + (when (not= origin :viewer) + (mf/set-ref-val! drag? true) + (dom/stop-propagation event) + (on-mouse-move event)))) + + on-click* (mf/use-callback + (mf/deps origin thread on-click) + (fn [event] + (dom/stop-propagation event) + (when (= origin :viewer) + (on-click thread))))] [:div.thread-bubble {:style {:top (str pos-y "px") :left (str pos-x "px")} - :on-mouse-down (fn [event] - (dom/prevent-default event)) + :on-pointer-down on-pointer-down* + :on-pointer-up on-pointer-up* + :on-mouse-move on-mouse-move* + :on-click on-click* + :on-lost-pointer-capture on-lost-pointer-capture :class (dom/classnames :resolved (:is-resolved thread) - :unread (pos? (:count-unread-comments thread))) - :on-click on-click*} + :unread (pos? (:count-unread-comments thread)))} [:span (:seqn thread)]])) (mf/defc comment-thread diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index bc69fd66f..c46147ed9 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/frontend/src/app/main/ui/viewer/comments.cljs @@ -85,6 +85,8 @@ (mf/defc comments-layer [{:keys [zoom file users frame page] :as props}] (let [profile (mf/deref refs/profile) + threads-position-ref (l/derived (l/in [:viewer :pages (:id page) :options :comment-threads-position]) st/state) + threads-position-map (mf/deref threads-position-ref) threads-map (mf/deref threads-ref) frame-corner (-> frame :points gsh/points->selrect gpt/point) @@ -96,7 +98,16 @@ cstate (mf/deref refs/comments-local) + update-thread-position (fn update-thread-position [thread] + (if (contains? threads-position-map (:id thread)) + (-> thread + (assoc :position (get-in threads-position-map [(:id thread) :position])) + (assoc :frame-id (get-in threads-position-map [(:id thread) :frame-id]))) + thread)) + threads (->> (vals threads-map) + (map update-thread-position) + (filter #(= (:frame-id %) (:id frame))) (dcm/apply-filters cstate profile) (filter (fn [{:keys [position]}] (gsh/has-point? frame position)))) @@ -135,8 +146,10 @@ (mf/use-callback (mf/deps frame) (fn [draft] - (let [params (update draft :position gpt/transform modifier2)] - (st/emit! (dcm/create-thread params) + (let [params (-> draft + (update :position gpt/transform modifier2) + (assoc :frame-id (:id frame)))] + (st/emit! (dcm/create-thread-on-viewer params) (dcm/close-thread)))))] [:div.comments-section {:on-click on-click} @@ -148,7 +161,8 @@ :zoom zoom :on-click on-bubble-click :open? (= (:id item) (:open cstate)) - :key (:seqn item)}])) + :key (:seqn item) + :origin :viewer}])) (when-let [id (:open cstate)] (when-let [thread (as-> (get threads-map id) $ diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 3dfbe8cb8..07f60122d 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -144,7 +144,7 @@ on-pointer-move (actions/on-pointer-move viewport-ref zoom move-stream) on-pointer-up (actions/on-pointer-up) on-move-selected (actions/on-move-selected hover hover-ids selected space?) - on-menu-selected (actions/on-menu-selected hover hover-ids selected) + on-menu-selected (actions/on-menu-selected hover hover-ids selected) on-frame-enter (actions/on-frame-enter frame-hover) on-frame-leave (actions/on-frame-leave frame-hover) diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index f13a88cfc..34dd92aeb 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -12,27 +12,32 @@ [app.main.store :as st] [app.main.ui.comments :as cmt] [cuerdas.core :as str] + [okulary.core :as l] [rumext.alpha :as mf])) (mf/defc comments-layer [{:keys [vbox vport zoom file-id page-id drawing] :as props}] - (let [pos-x (* (- (:x vbox)) zoom) - pos-y (* (- (:y vbox)) zoom) + (let [pos-x (* (- (:x vbox)) zoom) + pos-y (* (- (:y vbox)) zoom) - profile (mf/deref refs/profile) - users (mf/deref refs/current-file-comments-users) - local (mf/deref refs/comments-local) - threads-map (mf/deref refs/threads-ref) + profile (mf/deref refs/profile) + users (mf/deref refs/current-file-comments-users) + 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) - threads (->> (vals threads-map) - (filter #(= (:page-id %) page-id)) - (dcm/apply-filters local profile)) + update-thread-position (fn update-thread-position [thread] + (if (contains? threads-position-map (:id thread)) + (-> thread + (assoc :position (get-in threads-position-map [(:id thread) :position])) + (assoc :frame-id (get-in threads-position-map [(:id thread) :frame-id]))) + thread)) - on-bubble-click - (fn [{:keys [id] :as thread}] - (if (= (:open local) id) - (st/emit! (dcm/close-thread)) - (st/emit! (dcm/open-thread thread)))) + threads (->> (vals threads-map) + (filter #(= (:page-id %) page-id)) + (mapv update-thread-position) + (dcm/apply-filters local profile)) on-draft-cancel (mf/use-callback @@ -41,7 +46,7 @@ on-draft-submit (mf/use-callback (fn [draft] - (st/emit! (dcm/create-thread draft))))] + (st/emit! (dcm/create-thread-on-workspace draft))))] (mf/use-effect (mf/deps file-id) @@ -58,13 +63,12 @@ (for [item threads] [:& cmt/thread-bubble {:thread item :zoom zoom - :on-click on-bubble-click :open? (= (:id item) (:open local)) :key (:seqn item)}]) (when-let [id (:open local)] (when-let [thread (get threads-map id)] - [:& cmt/thread-comments {:thread thread + [:& cmt/thread-comments {:thread (update-thread-position thread) :users users :zoom zoom}])) @@ -73,5 +77,3 @@ :on-cancel on-draft-cancel :on-submit on-draft-submit :zoom zoom}])]]])) - -