Add new Scene Layout (#945)

* initial commit for new Scene Layout

* add grid setup

* some refactor + fns doc

* more fixes

* some refactor + make it work with negative values

* add enable/disable parcels interaction

* add manual (advanced) mode

* lint

* more fixes

* advanced mode should not apply new layout, only update grid

* lint

* add tests

* fix styling issues

* CR fixes

* add new texts

Author: nicoecheza

packages/@dcl/inspector/src/components/Box/Box.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
+
 import './Box.css'
 
 interface Props {

packages/@dcl/inspector/src/components/Button/Button.css

@@ -33,3 +33,27 @@
 .Button.danger.active {
   background-color: var(--primary-dark);
 }
+
+.Button.dark {
+  background-color: var(--base-20);
+  border: 1px solid var(--base-15);
+}
+
+.Button.dark:hover,
+.Button.dark.active {
+  background-color: var(--base-15);
+}
+
+.Button.blue {
+  background-color: var(--accent-blue-05);
+  border: 0;
+}
+
+.Button.blue:hover,
+.Button.blue.active {
+  background-color: var(--accent-blue-07);
+}
+
+.Button.blue.big {
+  font-weight: 700;
+}

packages/@dcl/inspector/src/components/Button/types.ts

@@ -1,6 +1,6 @@
 type Button = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 
 export type PropTypes = Omit<Button, 'type' | 'size'> & {
-  type?: 'danger' | 'etc'
+  type?: 'danger' | 'dark' | 'blue' | 'etc'
   size?: 'big' | 'etc'
 }

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

@@ -0,0 +1,44 @@
+.Grid .row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Grid .tile {
+  background-color: var(--base-16);
+  display: flex;
+  align-items: flex-end;
+  font-size: 8px;
+}
+
+.Grid .tile:hover {
+  background-color: var(--base-10);
+  cursor: pointer;
+}
+
+.Grid .tile .info {
+  opacity: 0;
+  position: absolute;
+  background-color: var(--base-20);
+  color: var(--base-5);
+  padding: 0 6px;
+  border: 1px solid var(--base-16);
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.Grid .tile .info svg {
+  font-size: 15px;
+}
+
+.Grid .tile:hover .info {
+  opacity: 1;
+}
+
+.Grid .tile svg.base {
+  font-size: 13px;
+  margin: 0 0 -8px -8px;
+  z-index: 999;
+}

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

@@ -0,0 +1,104 @@
+import { useCallback } from 'react'
+import { BsPlusLg } from 'react-icons/bs'
+import { IoIosPin } from 'react-icons/io'
+
+import { chunkCoords, getAxisLengths, getLargestAxis } from './utils'
+import { Props } from './types'
+
+import './Grid.css'
+
+function Grid({
+  coords,
+  maxTileSize = 50,
+  minTileSize = 3,
+  visualThreshold = 10,
+  isBaseTile,
+  isTileDisabled,
+  handleTileClick
+}: Props) {
+  const largestAxis = getLargestAxis(coords)
+  const tileSize = Math.max(maxTileSize / largestAxis, minTileSize) // % of parent's size to use for max/min tile size
+  const disableEnhancements = largestAxis >= visualThreshold // disable visual enhancements when grid is large
+
+  const gridStyles = {
+    width: `${tileSize}%`,
+    aspectRatio: '1/1',
+    border: `${disableEnhancements ? 1 : 2}px solid var(--base-10)`,
+    margin: `${disableEnhancements ? 1 : 2}px`
+  }
+
+  const numberOfRows = coords.length / getAxisLengths(coords).y
+  // actually chunking the array is not necessary
+  // we could just use the `numberOfRows` to render the grid
+  // but it's easier to read/use `[].map` than a for-loop in React...
+  const chunks = chunkCoords(coords, numberOfRows)
+
+  return (
+    <div className="Grid">
+      {chunks.map((row) => (
+        <Row
+          key={`row-${row[0].y}`}
+          row={row}
+          tileStyles={gridStyles}
+          isTileDisabled={isTileDisabled}
+          onTileClick={handleTileClick}
+          isBaseTile={isBaseTile}
+        />
+      ))}
+    </div>
+  )
+}
+
+type Row = {
+  row: Props['coords']
+  tileStyles: React.CSSProperties
+  isTileDisabled: Props['isTileDisabled']
+  onTileClick: Props['handleTileClick']
+  isBaseTile: Props['isBaseTile']
+}
+function Row({ row, tileStyles, isTileDisabled, onTileClick, isBaseTile }: Row) {
+  return (
+    <div className={`row y-${row[0].y}`}>
+      {row.map((col) => (
+        <Tile
+          key={`${col.x}-${col.y}`}
+          x={col.x}
+          y={col.y}
+          style={tileStyles}
+          isTileDisabled={isTileDisabled}
+          onTileClick={onTileClick}
+          isBaseTile={isBaseTile}
+        />
+      ))}
+    </div>
+  )
+}
+
+type Tile = {
+  x: number
+  y: number
+  style: React.CSSProperties
+  isTileDisabled: Props['isTileDisabled']
+  onTileClick: Props['handleTileClick']
+  isBaseTile: Props['isBaseTile']
+}
+function Tile({ x, y, style, isTileDisabled, onTileClick, isBaseTile }: Tile) {
+  const isDisabled = isTileDisabled && isTileDisabled({ x, y })
+  const isBase = isBaseTile && isBaseTile({ x, y })
+  const handleClick = useCallback(() => {
+    onTileClick && onTileClick({ x, y })
+  }, [x, y, isTileDisabled])
+
+  const styles = { ...style, border: isDisabled ? 0 : style.border }
+
+  return (
+    <div className={`tile x-${x}`} style={styles} onClick={handleClick}>
+      <div className="info">
+        <IoIosPin /> {`${x},${y}`}
+      </div>
+      {isBase && <BsPlusLg className="base" />}
+    </div>
+  )
+}
+
+export default Grid

packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/Layout/Grid/index.ts

@@ -0,0 +1,3 @@
+import Grid from './Grid'
+import { Props } from './types'
+export { Grid, Props }

packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/Layout/Grid/types.ts

@@ -0,0 +1,11 @@
+import { Coords } from '@dcl/ecs'
+
+export type Props = {
+  coords: Coords[]
+  isBaseTile?: (coord: Coords) => boolean
+  isTileDisabled?: (coord: Coords) => boolean
+  handleTileClick?: (coord: Coords) => void
+  maxTileSize?: number // in %
+  minTileSize?: number // in %
+  visualThreshold?: number // in %
+}

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

@@ -0,0 +1,124 @@
+import { getAxisLengths, getLargestAxis, chunkCoords } from './utils'
+
+describe('getAxisLengths', () => {
+  it('returns correct lengths for coordinates', () => {
+    const coords = [
+      { x: 0, y: 0 },
+      { x: 2, y: 2 }
+    ]
+    const expected = { x: 3, y: 3 }
+    expect(getAxisLengths(coords)).toEqual(expected)
+  })
+
+  it('handles coordinates with negative values', () => {
+    const coords = [
+      { x: -1, y: -1 },
+      { x: 1, y: 1 }
+    ]
+    const expected = { x: 3, y: 3 }
+    expect(getAxisLengths(coords)).toEqual(expected)
+  })
+
+  it('handles single coordinate', () => {
+    const coords = [{ x: 0, y: 0 }]
+    const expected = { x: 1, y: 1 }
+    expect(getAxisLengths(coords)).toEqual(expected)
+  })
+})
+
+describe('getLargestAxis', () => {
+  it('returns correct length of the largest axis', () => {
+    const coords = [
+      { x: 0, y: 0 },
+      { x: 2, y: 2 }
+    ]
+    const expected = 3
+    expect(getLargestAxis(coords)).toEqual(expected)
+  })
+
+  it('handles coordinates with negative values', () => {
+    const coords = [
+      { x: -1, y: -1 },
+      { x: 1, y: 1 }
+    ]
+    const expected = 3
+    expect(getLargestAxis(coords)).toEqual(expected)
+  })
+
+  it('handles single coordinate', () => {
+    const coords = [{ x: 0, y: 0 }]
+    const expected = 1
+    expect(getLargestAxis(coords)).toEqual(expected)
+  })
+})
+
+describe('chunkCoords', () => {
+  it('returns correct chunks for coordinates', () => {
+    const coords = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 }
+    ]
+    const chunkSize = 2
+    const expected = [
+      [
+        { x: 0, y: 0 },
+        { x: 1, y: 1 }
+      ],
+      [{ x: 2, y: 2 }]
+    ]
+    expect(chunkCoords(coords, chunkSize)).toEqual(expected)
+  })
+
+  it('handles chunk size larger than coordinates length', () => {
+    const coords = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 }
+    ]
+    const chunkSize = 5
+    const expected = [
+      [
+        { x: 0, y: 0 },
+        { x: 1, y: 1 },
+        { x: 2, y: 2 }
+      ]
+    ]
+    expect(chunkCoords(coords, chunkSize)).toEqual(expected)
+  })
+
+  it('handles chunk size of 1', () => {
+    const coords = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 }
+    ]
+    const chunkSize = 1
+    const expected = [[{ x: 0, y: 0 }], [{ x: 1, y: 1 }], [{ x: 2, y: 2 }]]
+    expect(chunkCoords(coords, chunkSize)).toEqual(expected)
+  })
+
+  it('handles empty coordinates array', () => {
+    const coords = []
+    const chunkSize = 2
+    const expected = [[]]
+    expect(chunkCoords(coords, chunkSize)).toEqual(expected)
+  })
+
+  it('handles chunk size of 0', () => {
+    const coords = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 }
+    ]
+    const chunkSize = 0
+    const expected = [
+      [
+        { x: 0, y: 0 },
+        { x: 1, y: 1 },
+        { x: 2, y: 2 }
+      ]
+    ]
+    expect(chunkCoords(coords, chunkSize)).toEqual(expected)
+  })
+})

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

@@ -0,0 +1,40 @@
+import { Coords } from '@dcl/ecs'
+
+import { Props } from './types'
+
+/*
+ ** Get the length of the axis (x,y) on the grid
+ */
+export function getAxisLengths(coords: Props['coords']): Coords {
+  const [first, last] = [coords[0], coords[coords.length - 1]]
+  return {
+    x: Math.abs(last.x - first.x) + 1, // zero-based
+    y: Math.abs(first.y - last.y) + 1 // zero-based
+  }
+}
+
+/*
+ ** Get's the axis with the bigger length
+ */
+export function getLargestAxis(coords: Props['coords']): number {
+  const axisLength = getAxisLengths(coords)
+  return Math.max(axisLength.x, axisLength.y)
+}
+
+/*
+ ** Splits coords into chunks of specific size
+ */
+export function chunkCoords(coords: Props['coords'], chunkSize: number): Props['coords'][] {
+  if (chunkSize <= 0 || chunkSize >= coords.length) return [coords]
+
+  const chunks = []
+  for (let i = 0; i < coords.length; i += chunkSize) {
+    const tmp = []
+    for (let j = i; j < i + chunkSize; j++) {
+      tmp.push(coords[j])
+    }
+    chunks.push(tmp)
+  }
+
+  return chunks
+}