add: Scene parcels shortcut

packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/SceneInspector.css

@@ -0,0 +1,3 @@
+.Container.Scene .content svg {
+  cursor: pointer;
+}

packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/SceneInspector.tsx

@@ -1,17 +1,34 @@
+import { useCallback, useState } from 'react'
+import { RxBorderAll } from 'react-icons/rx'
+
 import { useComponentInput } from '../../../hooks/sdk/useComponentInput'
 import { useHasComponent } from '../../../hooks/sdk/useHasComponent'
 import { withSdk } from '../../../hoc/withSdk'
 import { Block } from '../../Block'
 import { Container } from '../../Container'
 import { TextField } from '../TextField'
 import { Props } from './types'
-import { fromScene, toScene, isValidInput } from './utils'
+import { fromScene, toScene, toSceneAuto, getInputValidation } from './utils'
+
+import './SceneInspector.css'
 
 export default withSdk<Props>(({ sdk, entity }) => {
+  const [auto, setAuto] = useState(false)
   const { Scene } = sdk.components
 
   const hasScene = useHasComponent(entity, Scene)
-  const { getInputProps } = useComponentInput(entity, Scene, fromScene, toScene, isValidInput)
+  const { getInputProps } = useComponentInput(
+    entity,
+    Scene,
+    fromScene,
+    auto ? toSceneAuto : toScene,
+    getInputValidation(auto)
+  )
+  const parcelsProps = getInputProps('layout.parcels')
+
+  const handleClick = useCallback(() => {
+    setAuto(!auto)
+  }, [auto])
 
   if (!hasScene) {
     return null
@@ -20,7 +37,8 @@ export default withSdk<Props>(({ sdk, entity }) => {
   return (
     <Container label="Settings" className="Scene">
       <Block label="Parcels">
-        <TextField label="" {...getInputProps('layout.parcels')} />
+        <TextField {...parcelsProps} />
+        <RxBorderAll onClick={handleClick} style={{ opacity: auto ? 1 : 0.3 }} />
       </Block>
     </Container>
   )

packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/utils.spec.ts

@@ -0,0 +1,32 @@
+import { getCoordinatesBetweenPoints } from './utils'
+import { Coords } from '../../../lib/utils/layout'
+
+describe('getCoordinatesBetweenPoints', () => {
+  it('should return an array of coordinates between two points', () => {
+    const pointA: Coords = { x: 0, y: 0 }
+    const pointB: Coords = { x: 2, y: 2 }
+
+    const result = getCoordinatesBetweenPoints(pointA, pointB)
+
+    expect(result).toEqual([
+      { x: 0, y: 0 },
+      { x: 0, y: 1 },
+      { x: 0, y: 2 },
+      { x: 1, y: 0 },
+      { x: 1, y: 1 },
+      { x: 1, y: 2 },
+      { x: 2, y: 0 },
+      { x: 2, y: 1 },
+      { x: 2, y: 2 }
+    ])
+  })
+
+  it('should return an array with a single coordinate when both points are the same', () => {
+    const pointA: Coords = { x: 3, y: 3 }
+    const pointB: Coords = { x: 3, y: 3 }
+
+    const result = getCoordinatesBetweenPoints(pointA, pointB)
+
+    expect(result).toEqual([{ x: 3, y: 3 }])
+  })
+})

packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/utils.ts

@@ -34,17 +34,55 @@ export function toScene(inputs: SceneInput): EditorComponentsTypes['Scene'] {
   }
 }
 
-export function isValidInput(input: SceneInput): boolean {
-  const parcels = input.layout.parcels.split(' ')
+export function toSceneAuto(inputs: SceneInput): EditorComponentsTypes['Scene'] {
+  const parcels = parseParcels(inputs.layout.parcels)
+  const points = getCoordinatesBetweenPoints(parcels[0], parcels[1])
+  return {
+    layout: {
+      base: points[0],
+      parcels: points
+    }
+  }
+}
+
+export function parseParcels(value: string): Coords[] {
+  const parcels = value.split(' ')
   const coordsList: Coords[] = []
 
   for (const parcel of parcels) {
     const coords = parcel.split(',')
     const x = parseInt(coords[0])
     const y = parseInt(coords[1])
-    if (coords.length !== 2 || isNaN(x) || isNaN(y)) return false
+    if (coords.length !== 2 || isNaN(x) || isNaN(y)) return []
     coordsList.push({ x, y })
   }
 
-  return areConnected(coordsList)
+  return coordsList
+}
+
+export function getInputValidation(auto?: boolean) {
+  return function isValidInput(input: SceneInput): boolean {
+    const parcels = parseParcels(input.layout.parcels)
+    return auto ? parcels.length === 2 : areConnected(parcels)
+  }
+}
+
+export function getCoordinatesBetweenPoints(pointA: Coords, pointB: Coords): Coords[] {
+  const coordinates: Coords[] = []
+
+  // Ensure pointA is to the left or above pointB
+  if (pointA.x > pointB.x) {
+    ;[pointA.x, pointB.x] = [pointB.x, pointA.x]
+  }
+  if (pointA.y > pointB.y) {
+    ;[pointA.y, pointB.y] = [pointB.y, pointA.y]
+  }
+
+  for (let x = pointA.x; x <= pointB.x; x++) {
+    for (let y = pointA.y; y <= pointB.y; y++) {
+      coordinates.push({ x, y })
+    }
+  }
+
+  return coordinates
 }