Merge pull request #4245 from penpot/ladybenko-6799-comments-moving

🐛 Fix comments thread displacing bubbles

frontend/resources/styles/main/partials/workspace.scss

@@ -152,16 +152,6 @@ $height-palette-max: 80px;
   }
 }
 
-// .workspace-loader {
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-
-//   svg {
-//     fill: $color-gray-50;
-//   }
-// }
-
 .workspace-content {
   background-color: $color-canvas;
   display: flex;
@@ -242,20 +232,22 @@ $height-palette-max: 80px;
 
     .viewport-overlays {
       cursor: initial;
-      height: 100%;
       overflow: hidden;
       pointer-events: none;
       position: absolute;
-      width: 100%;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
       z-index: 10;
 
       .pixel-overlay {
-        height: 100%;
         left: 0;
         pointer-events: initial;
         position: absolute;
         top: 0;
-        width: 100%;
+        right: 0;
+        bottom: 0;
         z-index: 1;
       }
     }

frontend/src/app/main/ui/comments.cljs

@@ -355,22 +355,41 @@
   [thread-id]
   (l/derived (l/in [:comments thread-id]) st/state))
 
+(defn- offset-position [position viewport zoom bubble-margin]
+  (let [base-x (+ (* (:x position) zoom) (:offset-x viewport))
+        base-y (+ (* (:y position) zoom) (:offset-y viewport))
+        w (:width viewport)
+        h (:height viewport)
+        comment-width 284 ;; TODO: this is the width set via CSS in an outer container…
+                          ;; We should probably do this in a different way.
+        orientation-left? (>= (+ base-x comment-width (:x bubble-margin)) w)
+        orientation-top? (>= base-y (/ h 2))
+        h-dir (if orientation-left? :left :right)
+        v-dir (if orientation-top? :top :bottom)
+        x (:x position)
+        y (:y position)]
+    {:x x :y y :h-dir h-dir :v-dir v-dir}))
+
 (mf/defc thread-comments
   {::mf/wrap [mf/memo]}
-  [{:keys [thread zoom users origin position-modifier]}]
+  [{:keys [thread zoom users origin position-modifier viewport]}]
   (let [ref          (mf/use-ref)
-
-
         thread-id    (:id thread)
         thread-pos   (:position thread)
 
-        pos          (cond-> thread-pos
+        base-pos     (cond-> thread-pos
                        (some? position-modifier)
                        (gpt/transform position-modifier))
 
-        pos-x        (+ (* (:x pos) zoom) 24)
-        pos-y        (- (* (:y pos) zoom) 28)
+        max-height   (int (* (:height viewport) 0.75))
+                          ;; We should probably look for a better way of doing this.
+        bubble-margin {:x 24 :y 0}
+        pos          (offset-position base-pos viewport zoom bubble-margin)
 
+        margin-x     (* (:x bubble-margin) (if (= (:h-dir pos) :left) -1 1))
+        margin-y     (* (:y bubble-margin) (if (= (:v-dir pos) :top) -1 1))
+        pos-x        (+ (* (:x pos) zoom) margin-x)
+        pos-y        (- (* (:y pos) zoom) margin-y)
 
         comments-ref (mf/with-memo [thread-id]
                        (make-comments-ref thread-id))
@@ -393,9 +412,14 @@
         (dom/scroll-into-view-if-needed! node)))
 
     (when (some? comment)
-      [:div {:class (stl/css :thread-content)
-             :style {:top (str pos-y "px")
-                     :left (str pos-x "px")}
+      [:div {:class (stl/css-case :thread-content true
+                                  :thread-content-left (= (:h-dir pos) :left)
+                                  :thread-content-top (= (:v-dir pos) :top))
+             :id (str "thread-" thread-id)
+             :style {:left (str pos-x "px")
+                     :top (str pos-y "px")
+                     :max-height max-height
+                     :overflow-y "scroll"}
              :on-click dom/stop-propagation}
 
        [:div {:class (stl/css :comments)}

frontend/src/app/main/ui/comments.scss

@@ -140,6 +140,9 @@
   border-radius: $br-8;
   border: $s-2 solid var(--modal-border-color);
   background-color: var(--comment-modal-background-color);
+  --translate-x: 0%;
+  --translate-y: 0%;
+  transform: translate(var(--translate-x), var(--translate-y));
   .comments {
     display: flex;
     flex-direction: column;
@@ -147,6 +150,13 @@
   }
 }
 
+.thread-content-left {
+  --translate-x: -100%;
+}
+.thread-content-top {
+  --translate-y: -100%;
+}
+
 // comment-item
 
 .comment-container {

frontend/src/app/main/ui/workspace/viewport/comments.cljs

@@ -84,6 +84,7 @@
            (when (seq (dcm/apply-filters local profile [thread]))
              [:& cmt/thread-comments {:thread (update-position positions thread)
                                       :users users
+                                      :viewport {:offset-x pos-x :offset-y pos-y :width (:width vport) :height (:height vport)}
                                       :zoom zoom}])))
 
        (when-let [draft (:comment drawing)]
@@ -91,3 +92,4 @@
                                :on-cancel on-draft-cancel
                                :on-submit on-draft-submit
                                :zoom zoom}])]]]))
+

frontend/src/app/main/ui/workspace/viewport/comments.scss

@@ -15,10 +15,13 @@
   pointer-events: none;
   overflow: hidden;
   user-select: text;
+  position: absolute;
 }
 
 .threads {
   position: absolute;
-  top: $s-0;
-  left: $s-0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }