Merge branch 'master' into feature/read-unread-comments

concrete-utopia · Dec 7, 2023 · e1cd267 · e1cd267
2 parents b8dedc3 + 851740f
commit e1cd267
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 114 deletions.
diff --git a/editor/resources/editor/icons/light/semantic/[email protected] b/editor/resources/editor/icons/light/semantic/[email protected]
diff --git a/editor/resources/editor/icons/light/semantic/[email protected] b/editor/resources/editor/icons/light/semantic/[email protected]
diff --git a/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx b/editor/src/components/canvas/controls/comment-mode/comment-mode-hooks.tsx
@@ -33,13 +33,14 @@ import {
 } from '../../../../core/shared/jsx-attributes'
 import { create } from '../../../../core/shared/property-path'
 import { optionalMap } from '../../../../core/shared/optional-utils'
-import { useScenesWithId } from '../../../../core/commenting/comment-hooks'
+import { useScenes } from '../../../../core/commenting/comment-hooks'
 import { safeIndex } from '../../../../core/shared/array-utils'
+import * as EP from '../../../../core/shared/element-path'
 
 export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCallbacks {
   const dispatch = useDispatch()
 
-  const scenes = useScenesWithId()
+  const scenes = useScenes()
 
   const storeRef = useRefEditorState((store) => {
     return {
@@ -56,7 +57,7 @@ export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCa
           storeRef.current.canvasOffset,
           windowPoint({ x: event.clientX, y: event.clientY }),
         )
-        const scene = getSceneWithIdUnderPoint(loc.canvasPositionRaw, scenes)
+        const scene = getSceneUnderPoint(loc.canvasPositionRaw, scenes)
 
         if (scene == null) {
           dispatch([clearHighlightedViews()])
@@ -76,16 +77,15 @@ export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCa
           storeRef.current.canvasOffset,
           windowPoint({ x: event.clientX, y: event.clientY }),
         )
-
-        const scene = getSceneWithIdUnderPoint(loc.canvasPositionRaw, scenes)
+        const scene = getSceneUnderPoint(loc.canvasPositionRaw, scenes)
         const sceneId = optionalMap(getIdOfScene, scene)
 
         const offset =
-          scene != null && sceneId != null && isNotNullFiniteRectangle(scene.globalFrame)
+          scene != null && isNotNullFiniteRectangle(scene.globalFrame)
             ? getLocalPointInNewParentContext(scene.globalFrame, loc.canvasPositionRounded)
             : null
 
-        if (scene == null || sceneId == null || offset == null) {
+        if (scene == null || offset == null) {
           dispatch([
             switchEditorMode(
               EditorModes.commentMode(
@@ -97,11 +97,13 @@ export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCa
           return
         }
 
+        const sceneIdToUse = sceneId ?? EP.toUid(scene.elementPath)
+
         dispatch([
           setHighlightedView(scene.elementPath),
           switchEditorMode(
             EditorModes.commentMode(
-              newComment(sceneCommentLocation(sceneId, offset)),
+              newComment(sceneCommentLocation(sceneIdToUse, offset)),
               'not-dragging',
             ),
           ),
@@ -120,16 +122,13 @@ export function useCommentModeSelectAndHover(comment: CommentId | null): MouseCa
   })
 }
 
-function getSceneWithIdUnderPoint(
+function getSceneUnderPoint(
   location: CanvasPoint,
   scenes: ElementInstanceMetadata[],
 ): ElementInstanceMetadata | null {
   const scenesUnderTheMouse = scenes.filter((scene) => {
-    const sceneId = getIdOfScene(scene)
     return (
-      sceneId != null &&
-      isNotNullFiniteRectangle(scene.globalFrame) &&
-      rectContainsPoint(scene.globalFrame, location)
+      isNotNullFiniteRectangle(scene.globalFrame) && rectContainsPoint(scene.globalFrame, location)
     )
   })
   return safeIndex(scenesUnderTheMouse, 0) ?? null // TODO: choose the topmost one in z-order

diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx
@@ -15,13 +15,17 @@ import {
   useScenesWithId,
   useSetThreadReadStatus,
   useSetThreadReadStatusOnMount,
+  useScenes,
 } from '../../../core/commenting/comment-hooks'
-import * as EP from '../../../core/shared/element-path'
 import { assertNever } from '../../../core/shared/utils'
 import { CommentWrapper, MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { when } from '../../../utils/react-conditionals'
 import { Button, UtopiaStyles, useColorTheme } from '../../../uuiui'
-import { setRightMenuTab, switchEditorMode } from '../../editor/actions/action-creators'
+import {
+  setRightMenuTab,
+  switchEditorMode,
+  setProp_UNSAFE,
+} from '../../editor/actions/action-creators'
 import type { CommentId } from '../../editor/editor-modes'
 import {
   EditorModes,
@@ -36,6 +40,9 @@ import { stopPropagation } from '../../inspector/common/inspector-utils'
 import { canvasPointToWindowPoint } from '../dom-lookup'
 import { RemixNavigationAtom } from '../remix/utopia-remix-root-component'
 import { getIdOfScene } from './comment-mode/comment-mode-hooks'
+import * as EP from '../../../core/shared/element-path'
+import { create } from '../../../core/shared/property-path'
+import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
 
 export const CommentPopup = React.memo(() => {
   const mode = useEditorState(
@@ -84,7 +91,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
 
   const createThread = useCreateThread()
 
-  const scenes = useScenesWithId()
+  const scenes = useScenes()
   const [remixSceneRoutes] = useAtom(RemixNavigationAtom)
 
   const onCreateThread = React.useCallback(
@@ -96,10 +103,10 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
       }
 
       // Create a new thread
-      const newThread = (() => {
+      const [newThread, auxiliaryActions] = (() => {
         switch (comment.location.type) {
           case 'canvas':
-            return createThread({
+            const newThreadOnCanvas = createThread({
               body,
               metadata: {
                 resolved: false,
@@ -108,13 +115,27 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
                 y: comment.location.position.y,
               },
             })
+            return [newThreadOnCanvas, []]
           case 'scene':
             const sceneId = comment.location.sceneId
-            const scene = scenes.find((s) => getIdOfScene(s) === sceneId)
+            const scene = scenes.find(
+              (s) => getIdOfScene(s) === sceneId || EP.toUid(s.elementPath) === sceneId,
+            )
             const remixRoute =
               scene != null ? remixSceneRoutes[EP.toString(scene?.elementPath)] : undefined
 
-            return createThread({
+            const addSceneIdPropAction =
+              scene == null
+                ? []
+                : [
+                    setProp_UNSAFE(
+                      scene.elementPath,
+                      create('id'),
+                      jsExpressionValue(sceneId, emptyComments),
+                    ),
+                  ]
+
+            const newThreadOnScene = createThread({
               body,
               metadata: {
                 resolved: false,
@@ -125,12 +146,14 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
                 remixLocationRoute: remixRoute != null ? remixRoute.location.pathname : undefined,
               },
             })
+            return [newThreadOnScene, addSceneIdPropAction]
           default:
             assertNever(comment.location)
         }
       })()
       createNewThreadReadStatus(newThread.id, 'read')
       dispatch([
+        ...auxiliaryActions,
         switchEditorMode(EditorModes.commentMode(existingComment(newThread.id), 'not-dragging')),
         setRightMenuTab(RightMenuTab.Comments),
       ])