fix (and reworkit a little bit) the Layout Grid

decentraland · Oct 11, 2024 · 914f5fa · 914f5fa
1 parent c201492
commit 914f5fa
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 169 deletions.
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/Layout/Layout.tsx b/packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/Layout/Layout.tsx
@@ -9,16 +9,17 @@ import { Grid, Props as GridProps } from './Grid'
 
 import {
   coordToStr,
-  getCoordinates,
   getMinMaxFromOrderedCoords,
   getOption,
-  getLayoutInfo,
   stringifyGridError,
   getLayoutInfoFromString,
   strToCoord,
   transformCoordsToString,
   getEnabledCoords,
-  hasCoord
+  hasCoord,
+  getGridInfo,
+  isCoord,
+  generateGridFrom
 } from './utils'
 import { getAxisLengths } from './Grid/utils'
 import { ModeAdvanced } from './ModeAdvanced'
@@ -30,17 +31,15 @@ import './Layout.css'
 type Coords = GridProps['coords'][0]
 
 function Layout({ value, onChange }: Props) {
-  const currentLayout = getLayoutInfo(value.parcels)
-  const coordinates = getCoordinates(currentLayout.min, currentLayout.max)
+  const { grid: _grid } = getGridInfo(value.parcels)
 
-  const [grid, setGrid] = useState<Coords[]>(coordinates)
-  const [disabled, setDisabled] = useState(new Set<string>())
+  const [grid, setGrid] = useState(_grid)
   const [mode, setMode] = useState<Mode>(Mode.GRID)
   const [base, setBase] = useState(value.base)
 
   const [gridMin, gridMax] = getMinMaxFromOrderedCoords(grid)
   const axisLengths = getAxisLengths(grid)
-  const enabledCoords = getEnabledCoords(grid, disabled)
+  const enabledCoords = getEnabledCoords(grid)
   const numberOfCoords = enabledCoords.length
 
   const handleGridChange = (type: keyof Coords) => (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -51,15 +50,14 @@ function Layout({ value, onChange }: Props) {
     const diff = Math.abs(axisLength - num)
     const value = num > axisLength ? grixMaxAxis + diff : grixMaxAxis - diff
     const newMax: Coords = { ...gridMax, [type]: value }
-    return setGrid(getCoordinates(gridMin, newMax))
+    return setGrid(generateGridFrom(grid, gridMin, newMax))
   }
 
   const isTileDisabled = useCallback(
     (coord: Coords) => {
-      const str = coordToStr(coord)
-      return disabled.has(str)
+      return !enabledCoords.find(($) => isCoord($, coord))
     },
-    [grid, disabled]
+    [enabledCoords]
   )
 
   // const isTileDisconnected = useCallback((coord: Coords) => {}, [grid, disabled])
@@ -73,15 +71,13 @@ function Layout({ value, onChange }: Props) {
 
   const handleTileClick = useCallback(
     (coord: Coords) => {
-      const str = coordToStr(coord)
-      if (disabled.has(str)) {
-        disabled.delete(str)
-      } else {
-        disabled.add(str)
-      }
-      setDisabled(new Set(disabled))
+      const newGrid = grid.map(($) => {
+        if (isCoord($, coord)) return { ...$, disabled: !$.disabled }
+        return $
+      })
+      setGrid(newGrid)
     },
-    [grid, disabled]
+    [grid]
   )
 
   const handleAdvancedConfirm = useCallback(
@@ -91,17 +87,15 @@ function Layout({ value, onChange }: Props) {
         x: length.x > MAX_AXIS_PARCELS ? min.x + Math.min(MAX_AXIS_PARCELS, max.x) : max.x,
         y: length.y > MAX_AXIS_PARCELS ? min.y + Math.min(MAX_AXIS_PARCELS, max.y) : max.y
       }
-      const parcels = getCoordinates(min, clampMax)
-      const base = strToCoord(value.base) || min
-      setGrid(parcels)
-      setBase(base)
+      setGrid(generateGridFrom(grid, min, clampMax))
+      setBase(strToCoord(value.base) || min)
     },
-    [grid, base, disabled]
+    [grid, base]
   )
 
   const applyCurrentState = useCallback(() => {
     onChange({ parcels: enabledCoords, base })
-  }, [grid, base, disabled])
+  }, [grid, base])
 
   const handleModeChange = useCallback(
     (mode: Mode) => () => {
@@ -115,12 +109,12 @@ function Layout({ value, onChange }: Props) {
     if (!areConnected(enabledCoords)) return GridError.NOT_CONNECTED
     if (!hasCoord(enabledCoords, base)) return GridError.MISSING_BASE_PARCEL
     return null
-  }, [grid, base, disabled])
+  }, [grid, base])
 
   const getTitle = useCallback(() => {
     if (mode === Mode.ADVANCED) return 'Set Coordinates'
     return `${numberOfCoords} Parcel${numberOfCoords === 1 ? '' : 's'}`
-  }, [grid, mode, disabled])
+  }, [grid, mode])
 
   const getInstruction = useCallback(() => {
     if (mode === Mode.ADVANCED) return 'Type in the layout coordinates you want to deploy'
@@ -151,7 +145,7 @@ function Layout({ value, onChange }: Props) {
       {mode === Mode.ADVANCED ? (
         <ModeAdvanced
           value={{
-            coords: transformCoordsToString(grid, disabled),
+            coords: transformCoordsToString(enabledCoords),
             base: coordToStr(base)
           }}
           disabled={!!gridError}

diff --git a/packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/Layout/utils.spec.ts b/packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/Layout/utils.spec.ts
@@ -1,17 +1,16 @@
 import { MAX_AXIS_PARCELS, TILE_OPTIONS } from './types'
 import {
-  getLayoutInfo,
+  generateCoordinatesBetweenPoints,
   getLayoutInfoFromString,
-  getCoordinatesBetweenPoints,
-  getCoordinatesInGridOrder,
   getOption,
   getMinMaxFromOrderedCoords,
   coordToStr,
-  transformCoordsToString
+  transformCoordsToString,
+  getGridInfo
 } from './utils'
 
-describe('getLayoutInfo', () => {
-  it('returns correct parcel info', () => {
+describe('getGridInfo', () => {
+  it('returns correct grid info', () => {
     const parcels = [
       { x: 0, y: 0 },
       { x: 0, y: 1 },
@@ -22,9 +21,14 @@ describe('getLayoutInfo', () => {
       min: { x: 0, y: 0 },
       max: { x: 1, y: 1 },
       length: { x: 1, y: 1 },
-      parcels: parcels
+      grid: [
+        { x: 0, y: 1, disabled: false },
+        { x: 1, y: 1, disabled: false },
+        { x: 0, y: 0, disabled: false },
+        { x: 1, y: 0, disabled: false },
+      ]
     }
-    expect(getLayoutInfo(parcels)).toEqual(expected)
+    expect(getGridInfo(parcels)).toEqual(expected)
   })
 })
 
@@ -35,51 +39,33 @@ describe('getLayoutInfoFromString', () => {
       min: { x: 0, y: 0 },
       max: { x: 1, y: 1 },
       length: { x: 1, y: 1 },
-      parcels: [
-        { x: 0, y: 0 },
-        { x: 0, y: 1 },
-        { x: 1, y: 0 },
-        { x: 1, y: 1 }
+      grid: [
+        { x: 0, y: 1, disabled: false },
+        { x: 1, y: 1, disabled: false },
+        { x: 0, y: 0, disabled: false },
+        { x: 1, y: 0, disabled: false },
       ]
     }
     expect(getLayoutInfoFromString(parcelsString)).toEqual(expected)
   })
 })
 
-describe('getCoordinatesBetweenPoints', () => {
-  it('returns correct coordinates between two points', () => {
+describe('generateCoordinatesBetweenPoints', () => {
+  it('returns correct coordinates between two points sorted in grid order', () => {
     const pointA = { x: 0, y: 0 }
     const pointB = { x: 2, y: 2 }
     const expected = [
-      { 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 }
-    ]
-    expect(getCoordinatesBetweenPoints(pointA, pointB)).toEqual(expected)
-  })
-})
-
-describe('getCoordinatesInGridOrder', () => {
-  it('returns coordinates sorted in grid order', () => {
-    const unsorted = [
-      { x: 0, y: 0 },
-      { x: 0, y: 1 },
-      { x: 1, y: 0 },
-      { x: 1, y: 1 }
-    ]
-    const expected = [
+      { x: 2, y: 2 },
       { x: 0, y: 1 },
       { x: 1, y: 1 },
+      { x: 2, y: 1 },
       { x: 0, y: 0 },
-      { x: 1, y: 0 }
+      { x: 1, y: 0 },
+      { x: 2, y: 0 },
     ]
-    expect(getCoordinatesInGridOrder(unsorted)).toEqual(expected)
+    expect(generateCoordinatesBetweenPoints(pointA, pointB)).toEqual(expected)
   })
 })
 
@@ -185,38 +171,14 @@ describe('transformCoordsToString', () => {
       { x: 1, y: 1 },
       { x: 2, y: 2 }
     ]
-    const disabledCoords = new Set<string>()
     const expected = '0,0 1,1 2,2'
-    expect(transformCoordsToString(coords, disabledCoords)).toEqual(expected)
-  })
-
-  it('filters disabled coordinates', () => {
-    const coords = [
-      { x: 0, y: 0 },
-      { x: 1, y: 1 },
-      { x: 2, y: 2 }
-    ]
-    const disabledCoords = new Set(['1,1'])
-    const expected = '0,0 2,2'
-    expect(transformCoordsToString(coords, disabledCoords)).toEqual(expected)
+    expect(transformCoordsToString(coords)).toEqual(expected)
   })
 
   it('returns empty string for empty coordinates array', () => {
     const coords = []
-    const disabledCoords = new Set<string>()
-    const expected = ''
-    expect(transformCoordsToString(coords, disabledCoords)).toEqual(expected)
-  })
-
-  it('returns empty string for all coordinates disabled', () => {
-    const coords = [
-      { x: 0, y: 0 },
-      { x: 1, y: 1 },
-      { x: 2, y: 2 }
-    ]
-    const disabledCoords = new Set(['0,0', '1,1', '2,2'])
     const expected = ''
-    expect(transformCoordsToString(coords, disabledCoords)).toEqual(expected)
+    expect(transformCoordsToString(coords)).toEqual(expected)
   })
 
   it('handles coordinates with negative values', () => {
@@ -225,19 +187,17 @@ describe('transformCoordsToString', () => {
       { x: 0, y: 0 },
       { x: 1, y: 1 }
     ]
-    const disabledCoords = new Set(['-1,-1'])
-    const expected = '0,0 1,1'
-    expect(transformCoordsToString(coords, disabledCoords)).toEqual(expected)
+    const expected = '-1,-1 0,0 1,1'
+    expect(transformCoordsToString(coords)).toEqual(expected)
   })
 
   it('handles large coordinate values', () => {
     const coords = [
       { x: 1000000, y: 1000000 },
       { x: 2000000, y: 2000000 }
     ]
-    const disabledCoords = new Set<string>()
     const expected = '1000000,1000000 2000000,2000000'
-    expect(transformCoordsToString(coords, disabledCoords)).toEqual(expected)
+    expect(transformCoordsToString(coords)).toEqual(expected)
   })
 })