Only use ancestor strategy when parent has the same size as child (#4311

) * Only use ancestor strategy when parent has the same size as child * Fix and add test
concrete-utopia · Oct 5, 2023 · 7218263 · 7218263
1 parent 0b0ddfe
commit 7218263
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/...rc/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.spec.browser2.tsx b/...rc/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.spec.browser2.tsx
@@ -101,6 +101,50 @@ export var storyboard = (
 )
 `)
 
+const codeElementWithNoSiblingsAndMatchingOnlyWidth =
+  formatTestProjectCode(`import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+import { App } from '/src/app.js'
+import { View, Rectangle } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='0cd'>
+    <Scene
+      style={{
+        width: 700,
+        height: 759,
+        position: 'absolute',
+        left: 207,
+        top: 126,
+      }}
+      data-label='Playground'
+      data-uid='3fc'
+    >
+      <View
+        style={{
+          backgroundColor: '#B37DB7AB',
+          width: 100,
+          height: 100,
+        }}
+        data-uid='a50'
+      >
+        <div
+          data-testid='${DraggedDivId}'
+          data-uid='a75'
+          style={{
+            height: 50,
+            width: '100%',
+            backgroundColor: '#EB0A0A',
+            left: 245,
+            top: 196,
+          }}
+        />
+      </View>
+    </Scene>
+  </Storyboard>
+)
+`)
+
 const codeElementWithSibling = formatTestProjectCode(`import * as React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 import { App } from '/src/app.js'
@@ -231,7 +275,7 @@ export var storyboard = (
           style={{
             backgroundColor: '#B98731E8',
             width: '100%',
-            height: 114,
+            height: 104,
           }}
           data-uid='bb3'
         >
@@ -503,6 +547,22 @@ describe('finds an applicable strategy for the nearest ancestor', () => {
       expect(strategies[0].strategy.id.endsWith('_ANCESTOR_1')).toBeTruthy()
     }))
 
+  it('element with no siblings but only one matching dimension does not find ancestor strategy', () =>
+    runTest(
+      codeElementWithNoSiblingsAndMatchingOnlyWidth,
+      pathForShallowNestedElement,
+      (editor) => {
+        const strategies = editor.getEditorState().strategyState.sortedApplicableStrategies
+
+        expect(strategies?.length).toBeGreaterThan(0)
+        if (strategies == null) {
+          // here for type assertion
+          throw new Error('`strategies` should not be null')
+        }
+        expect(strategies[0].strategy.id.includes('_ANCESTOR_')).toBeFalsy()
+      },
+    ))
+
   it('deeply nested element with no siblings', () =>
     runTest(codeDeeplyNestedElement, pathForDeeplyNestedElement, (editor) => {
       const strategies = editor.getEditorState().strategyState.sortedApplicableStrategies

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/ancestor-metastrategy.tsx
@@ -89,8 +89,7 @@ export function ancestorMetaStrategy(
     const targetSmallerThatParent =
       targetFrame != null &&
       parentFrame != null &&
-      parentFrame.width > targetFrame.width &&
-      parentFrame.height > targetFrame.height
+      (parentFrame.width > targetFrame.width || parentFrame.height > targetFrame.height)
 
     if (targetSmallerThatParent) {
       return []