No multiselect controls for selection with the same uids

editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx

@@ -20,6 +20,7 @@ import { defaultCustomStrategyState } from './canvas-strategy-types'
 import type { InteractionSession } from './interaction-state'
 import { boundingArea } from './interaction-state'
 import { createMouseInteractionForTests } from './interaction-state.test-utils'
+import { NonResizableControlTestId } from '../controls/select-mode/non-resizable-control'
 
 interface StyleRectangle {
   left: string
@@ -863,7 +864,7 @@ describe('special case controls', () => {
       await dispatchDone
     })
 
-    const nonResizableControl = renderResult.renderedDOM.queryByTestId('non-resizable-control')
+    const nonResizableControl = renderResult.renderedDOM.queryByTestId(NonResizableControlTestId)
     expect(nonResizableControl).toEqual(null)
   })
 })

editor/src/components/canvas/controls/new-canvas-controls.tsx

@@ -544,7 +544,8 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
             <MultiSelectOutlineControl localSelectedElements={localSelectedViews} />
             <ZeroSizedElementControls.control showAllPossibleElements={false} />
             {when(
-              isSelectOrInsertMode(editorMode),
+              isSelectOrInsertMode(editorMode) &&
+                !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
               <>
                 {strategyControls.map((c) => (
                   <RenderControlMemoized

editor/src/components/canvas/controls/select-mode/non-resizable-control.tsx

@@ -9,6 +9,8 @@ import type { EdgePosition } from '../../canvas-types'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 
+export const NonResizableControlTestId = 'non-resizable-control'
+
 const selectedElementsSelector = (store: { editor: { selectedViews: ElementPath[] } }) =>
   store.editor.selectedViews
 
@@ -51,7 +53,7 @@ export const NonResizableControl = controlForStrategyMemoized(() => {
           position: 'absolute',
           pointerEvents: 'none',
         }}
-        data-testid={'non-resizable-control'}
+        data-testid={NonResizableControlTestId}
       >
         <NonResizablePoint ref={topLeftRef} position={{ x: 0, y: 0 }} />
         <NonResizablePoint ref={topRightRef} position={{ x: 1, y: 0 }} />

editor/src/components/canvas/controls/select-mode/simple-outline-control.tsx

@@ -10,45 +10,62 @@ import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import { isZeroSizedElement } from '../outline-utils'
 import type { ThemeObject } from '../../../../uuiui/styles/theme/theme-helpers'
 
+export const MultiSelectOutlineTestId = 'multiselect-outline'
+
+export function getMultiSelectElementOutlineTestId(p: ElementPath) {
+  return `multiselect-element-outline-${EP.toString(p)}`
+}
+
 interface MultiSelectOutlineControlProps {
   localSelectedElements: Array<ElementPath>
 }
 
-export const MultiSelectOutlineControl = React.memo<MultiSelectOutlineControlProps>((props) => {
-  const hiddenInstances = useEditorState(
-    Substores.restOfEditor,
-    (store) => store.editor.hiddenInstances,
-    'MultiSelectOutlineControl hiddenInstances',
-  )
-  const localSelectedElements = props.localSelectedElements.filter(
-    (sv) => !hiddenInstances.includes(sv) && !EP.isStoryboardPath(sv),
-  )
-  return (
-    <CanvasOffsetWrapper>
-      {[
-        <OutlineControl
-          testId={`multiselect-outline`}
-          key='multiselect-outline'
-          targets={localSelectedElements}
-          color='multiselect-bounds'
-          outlineStyle='solid'
-        />,
-        ...localSelectedElements.map((path) => {
-          const outlineId = `multiselect-element-outline-${EP.toString(path)}`
-          return (
-            <OutlineControl
-              testId={outlineId}
-              key={outlineId}
-              targets={[path]}
-              color='primary'
-              outlineStyle='solid'
-            />
-          )
-        }),
-      ]}
-    </CanvasOffsetWrapper>
-  )
-})
+export const MultiSelectOutlineControl = React.memo<MultiSelectOutlineControlProps>(
+  (props: MultiSelectOutlineControlProps) => {
+    const hiddenInstances = useEditorState(
+      Substores.restOfEditor,
+      (store) => store.editor.hiddenInstances,
+      'MultiSelectOutlineControl hiddenInstances',
+    )
+    const localSelectedElements = props.localSelectedElements.filter(
+      (sv) =>
+        hiddenInstances.find((hiddenInstance) => EP.pathsEqual(sv, hiddenInstance)) == null &&
+        !EP.isStoryboardPath(sv),
+    )
+
+    const showMultiselectOutline = !EP.multiplePathsAllWithTheSameUID(localSelectedElements)
+
+    return (
+      <CanvasOffsetWrapper>
+        {[
+          ...(showMultiselectOutline
+            ? [
+                <OutlineControl
+                  testId={MultiSelectOutlineTestId}
+                  key='multiselect-outline'
+                  targets={localSelectedElements}
+                  color='multiselect-bounds'
+                  outlineStyle='solid'
+                />,
+              ]
+            : []),
+          ...localSelectedElements.map((path) => {
+            const outlineId = getMultiSelectElementOutlineTestId(path)
+            return (
+              <OutlineControl
+                testId={outlineId}
+                key={outlineId}
+                targets={[path]}
+                color='primary'
+                outlineStyle='solid'
+              />
+            )
+          }),
+        ]}
+      </CanvasOffsetWrapper>
+    )
+  },
+)
 
 interface OutlineControlProps {
   testId: string

editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx

@@ -12,7 +12,11 @@ import {
   setFeatureForBrowserTestsUseInDescribeBlockOnly,
   wait,
 } from '../../../utils/utils.test-utils'
-import { runDOMWalker, switchEditorMode } from '../../editor/actions/action-creators'
+import {
+  runDOMWalker,
+  selectComponents,
+  switchEditorMode,
+} from '../../editor/actions/action-creators'
 import { EditorModes } from '../../editor/editor-modes'
 import { StoryboardFilePath, navigatorEntryToKey } from '../../editor/store/editor-state'
 import type { PersistentModel } from '../../editor/store/editor-state'
@@ -45,6 +49,11 @@ import {
   RemixNavigationBarHomeLabel,
   RemixNavigationBarPathTestId,
 } from '../../editor/remix-navigation-bar'
+import { NonResizableControlTestId } from '../controls/select-mode/non-resizable-control'
+import {
+  MultiSelectOutlineTestId,
+  getMultiSelectElementOutlineTestId,
+} from '../controls/select-mode/simple-outline-control'
 import { updateFromCodeEditor } from '../../editor/actions/actions-from-vscode'
 
 const DefaultRouteTextContent = 'Hello Remix!'
@@ -1977,6 +1986,101 @@ export default function Index() {
   })
 })
 
+describe('Canvas controls with Remix', () => {
+  setFeatureForBrowserTestsUseInDescribeBlockOnly('Remix support', true)
+  it('Multiselect from the same element in different scenes does not render multiselect outline', async () => {
+    const project = createModifiedProject({
+      [StoryboardFilePath]: `import * as React from 'react'
+      import { RemixScene, Storyboard } from 'utopia-api'
+
+      export var storyboard = (
+        <Storyboard data-uid='storyboard-multiselect-uids'>
+          <RemixScene
+            style={{
+              width: 700,
+              height: 759,
+              position: 'absolute',
+              left: 212,
+              top: 128,
+            }}
+            data-label='Playground'
+            data-uid='remix-scene'
+          />
+           <RemixScene
+            style={{
+              width: 700,
+              height: 759,
+              position: 'absolute',
+              left: 0,
+              top: 0,
+            }}
+            data-label='Playground'
+            data-uid='remix-scene-2'
+          />
+        </Storyboard>
+      )
+      `,
+      ['/src/root.js']: `import React from 'react'
+      import { Outlet } from '@remix-run/react'
+
+      export default function Root() {
+        return (
+          <div data-uid='rootdiv'>
+            ${RootTextContent}
+            <Outlet data-uid='outlet'/>
+          </div>
+        )
+      }
+      `,
+      ['/src/routes/_index.js']: `import React from 'react'
+
+      export default function Index() {
+        return <div
+          style={{
+            width: 200,
+            height: 200,
+            position: 'absolute',
+            left: 0,
+            top: 0,
+          }}
+          data-uid='remix-div'
+        >
+          ${DefaultRouteTextContent}
+        </div>
+      }
+      `,
+    })
+
+    const renderResult = await renderRemixProject(project)
+
+    // Both are the same elements (with same uid) from different Remix scenes
+    const path1 = EP.fromString('storyboard-multiselect-uids/remix-scene:rootdiv/outlet:remix-div')
+    const path2 = EP.fromString(
+      'storyboard-multiselect-uids/remix-scene-2:rootdiv/outlet:remix-div',
+    )
+
+    await renderResult.dispatch([selectComponents([path1, path2], false)], true)
+    await renderResult.getDispatchFollowUpActionsFinished()
+
+    const nonResizableControl = renderResult.renderedDOM.queryByTestId(NonResizableControlTestId)
+    expect(nonResizableControl).toBeNull()
+
+    const multiselectOutlineControl =
+      renderResult.renderedDOM.queryByTestId(MultiSelectOutlineTestId)
+    expect(multiselectOutlineControl).toBeNull()
+
+    const elementOutlineControl1 = await renderResult.renderedDOM.findByTestId(
+      getMultiSelectElementOutlineTestId(path1),
+    )
+    expect(elementOutlineControl1).not.toBeNull()
+
+    const elementOutlineControl2 = await renderResult.renderedDOM.findByTestId(
+      getMultiSelectElementOutlineTestId(path2),
+    )
+    expect(elementOutlineControl2).not.toBeNull()
+  })
+})
+
 async function clickElementOnCanvasControlsLayer(
   renderResult: EditorRenderResult,
   testId: string,

editor/src/core/shared/element-path.ts

@@ -1139,3 +1139,15 @@ export function getStoryboardPathFromPath(path: ElementPath): ElementPath | null
 export function appendTwoPaths(base: ElementPath, other: ElementPath): ElementPath {
   return elementPath([...base.parts, ...other.parts])
 }
+
+export function multiplePathsAllWithTheSameUID(paths: Array<ElementPath>): boolean {
+  if (paths.length <= 1) {
+    return false
+  }
+
+  const firstUid = toUid(paths[0])
+  if (paths.every((v) => toUid(v) === firstUid)) {
+    return true
+  }
+  return false
+}