From 0c012a7d3e1a53a49c501fbcb1e318f06dbe42e3 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 22 Jan 2024 16:35:02 +0100
Subject: [PATCH 1/2] see if CanvasOffsetWrapper fixes comment indicator
 scrolling

---
 .../canvas/controls/comment-indicator.tsx        | 16 ++++++----------
 .../canvas/controls/new-canvas-controls.tsx      |  7 ++++---
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
index a2e2dfe41f2b..b7f224ba4962 100644
--- a/editor/src/components/canvas/controls/comment-indicator.tsx
+++ b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -68,6 +68,7 @@ import * as EP from '../../../core/shared/element-path'
 import { useRefAtom } from '../../editor/hook-utils'
 import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
 import * as PP from '../../../core/shared/property-path'
+import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 
 export const CommentIndicators = React.memo(() => {
   const projectId = useEditorState(
@@ -173,7 +174,7 @@ const CommentIndicatorsInner = React.memo(() => {
   const temporaryIndicatorData = useCommentBeingComposed()
 
   return (
-    <React.Fragment>
+    <CanvasOffsetWrapper>
       {threads.map((thread) => (
         <CommentIndicator key={thread.id} thread={thread} />
       ))}
@@ -189,7 +190,7 @@ const CommentIndicatorsInner = React.memo(() => {
           isRead={false}
         />
       ) : null}
-    </React.Fragment>
+    </CanvasOffsetWrapper>
   )
 })
 CommentIndicatorsInner.displayName = 'CommentIndicatorInner'
@@ -224,8 +225,8 @@ function getIndicatorStyle(
     pointerEvents: dragging ? 'none' : undefined,
     cursor: 'auto',
     padding: 2,
-    position: 'fixed',
-    bottom: canvasHeight - position.y - positionAdjust,
+    position: 'absolute',
+    top: position.y, // warning this is no longer bottom positioned, it should be shifted downwards by the height
     left: position.x,
     background: isRead ? colorTheme.bg1.value : colorTheme.primary.value,
     borderRadius: '24px 24px 24px 0px',
@@ -340,11 +341,6 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
     return !isActive && (hovered || dragging)
   }, [hovered, isActive, dragging])
 
-  const position = React.useMemo(
-    () => canvasPointToWindowPoint(dragPosition ?? location, canvasScale, canvasOffset),
-    [location, canvasScale, canvasOffset, dragPosition],
-  )
-
   const onMouseOut = React.useCallback(() => {
     if (dragging) {
       return
@@ -386,7 +382,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
       onMouseDown={onMouseDown}
       onClick={onClick}
       data-testid='comment-indicator'
-      css={getIndicatorStyle(position, {
+      css={getIndicatorStyle(location, {
         isRead: isRead,
         resolved: thread.metadata.resolved,
         isActive: isActive,
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index c309acce40ef..dc1cb5150e1b 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -24,6 +24,7 @@ import { ElementContextMenu } from '../../element-context-menu'
 import type { Mode } from '../../editor/editor-modes'
 import {
   isCommentMode,
+  isFollowMode,
   isLiveMode,
   isSelectMode,
   isSelectModeWithArea,
@@ -529,7 +530,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
         onMouseUp={onMouseUp}
       >
         {when(
-          isSelectMode(editorMode) || isCommentMode(editorMode),
+          isSelectMode(editorMode) || isCommentMode(editorMode) || isFollowMode(editorMode),
           <SceneLabelControl
             maybeHighlightOnHover={maybeHighlightOnHover}
             maybeClearHighlightsOnHoverEnd={maybeClearHighlightsOnHoverEnd}
@@ -544,7 +545,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
             <ZeroSizedElementControls.control showAllPossibleElements={false} />
 
             {when(
-              isSelectMode(editorMode) || isCommentMode(editorMode),
+              isSelectMode(editorMode) || isCommentMode(editorMode) || isFollowMode(editorMode),
               <RemixSceneLabelControl
                 maybeHighlightOnHover={maybeHighlightOnHover}
                 maybeClearHighlightsOnHoverEnd={maybeClearHighlightsOnHoverEnd}
@@ -573,7 +574,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                 {renderTextEditableControls()}
                 {when(isSelectMode(editorMode), <AbsoluteChildrenOutline />)}
                 {when(
-                  isSelectOrInsertMode(editorMode) &&
+                  (isSelectOrInsertMode(editorMode) || isFollowMode(editorMode)) &&
                     !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
                   <>
                     {strategyControls.map((c) => (

From 606fb8a6efb168eb00952d87037c8c8666b586b6 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 22 Jan 2024 16:36:42 +0100
Subject: [PATCH 2/2] ooops

---
 .../src/components/canvas/controls/new-canvas-controls.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index dc1cb5150e1b..c309acce40ef 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -24,7 +24,6 @@ import { ElementContextMenu } from '../../element-context-menu'
 import type { Mode } from '../../editor/editor-modes'
 import {
   isCommentMode,
-  isFollowMode,
   isLiveMode,
   isSelectMode,
   isSelectModeWithArea,
@@ -530,7 +529,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
         onMouseUp={onMouseUp}
       >
         {when(
-          isSelectMode(editorMode) || isCommentMode(editorMode) || isFollowMode(editorMode),
+          isSelectMode(editorMode) || isCommentMode(editorMode),
           <SceneLabelControl
             maybeHighlightOnHover={maybeHighlightOnHover}
             maybeClearHighlightsOnHoverEnd={maybeClearHighlightsOnHoverEnd}
@@ -545,7 +544,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
             <ZeroSizedElementControls.control showAllPossibleElements={false} />
 
             {when(
-              isSelectMode(editorMode) || isCommentMode(editorMode) || isFollowMode(editorMode),
+              isSelectMode(editorMode) || isCommentMode(editorMode),
               <RemixSceneLabelControl
                 maybeHighlightOnHover={maybeHighlightOnHover}
                 maybeClearHighlightsOnHoverEnd={maybeClearHighlightsOnHoverEnd}
@@ -574,7 +573,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                 {renderTextEditableControls()}
                 {when(isSelectMode(editorMode), <AbsoluteChildrenOutline />)}
                 {when(
-                  (isSelectOrInsertMode(editorMode) || isFollowMode(editorMode)) &&
+                  isSelectOrInsertMode(editorMode) &&
                     !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
                   <>
                     {strategyControls.map((c) => (