Grid ruler markers (#6654)

**Problem:**

Selected grid items should show ruler markers on the borders of the grid
to indicate their placement properties.

**Fix:**

Add the ruler markers to the grid controls for items.

**Notes:**
- markers currently target the cell bounds, it should change to the
middle of the space between cells when we have offset indicator lines
(future PR)



https://github.com/user-attachments/assets/b0dd3450-70fa-47cc-b627-e9f792f13ad8



**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6656

Author: ruggi

editor/src/components/canvas/canvas-strategies/strategies/grid-cell-bounds.ts

@@ -68,20 +68,25 @@ export function getClosestGridCellToPointFromMetadata(
     return null
   }
 
-  return getClosestGridCellToPoint(gridCellGlobalFrames, point)
+  return getClosestGridCellToPoint(gridCellGlobalFrames, point, 'exclusive')
 }
 
 export function getClosestGridCellToPoint(
   gridCellGlobalFrames: GridCellGlobalFrames,
   point: CanvasPoint,
+  distanceMatch: 'inclusive' | 'exclusive',
 ): TargetGridCellData | null {
   let closestCell: TargetGridCellData | null = null
   let closestDistance = Infinity
 
   for (let i = 0; i < gridCellGlobalFrames.length; i++) {
     for (let j = 0; j < gridCellGlobalFrames[i].length; j++) {
       const currentDistance = distanceFromPointToRectangle(point, gridCellGlobalFrames[i][j])
-      if (currentDistance < closestDistance) {
+      const closeEnough =
+        distanceMatch === 'inclusive'
+          ? currentDistance <= closestDistance
+          : currentDistance < closestDistance
+      if (closeEnough) {
         closestCell = {
           gridCellCoordinates: gridCellCoordinates(i + 1, j + 1),
           cellCanvasRectangle: gridCellGlobalFrames[i][j],
@@ -102,7 +107,7 @@ export function getGridChildCellCoordBoundsFromCanvas(
     return null
   }
 
-  const cellOrigin = getClosestGridCellToPoint(gridCellGlobalFrames, cellFrame)
+  const cellOrigin = getClosestGridCellToPoint(gridCellGlobalFrames, cellFrame, 'inclusive')
   if (cellOrigin == null) {
     return null
   }
@@ -114,7 +119,7 @@ export function getGridChildCellCoordBoundsFromCanvas(
       y: cellFrame.height,
     }),
   )
-  const cellEnd = getClosestGridCellToPoint(gridCellGlobalFrames, cellEndPoint)
+  const cellEnd = getClosestGridCellToPoint(gridCellGlobalFrames, cellEndPoint, 'exclusive')
   if (cellEnd == null) {
     return null
   }

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -73,7 +73,7 @@ export function gridPositionToValue(
   return p.numericalPosition
 }
 
-export function isAutoGridPin(v: GridPositionOrSpan): boolean {
+export function isAutoGridPin(v: GridPositionOrSpan | null): boolean {
   return isCSSKeyword(v) && v.value === 'auto'
 }
 
@@ -498,6 +498,7 @@ export function getOriginalElementGridConfiguration(
   const draggingFromCellCoords = getClosestGridCellToPoint(
     gridCellGlobalFrames,
     interactionData.dragStart,
+    'exclusive',
   )?.gridCellCoordinates
   if (draggingFromCellCoords == null) {
     return null

editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { colorTheme } from '../../../uuiui'
+
+export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'pinned'
+
+const upFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='5,1 10,10 0,10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const rightFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='10,5 0,0 0,10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const downFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='5,10 0,0 10,0'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const leftFacingTriangle = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <polygon
+      points='0,5 10,0 10,10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const verticalPipe = (
+  <svg width='4' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <rect
+      x='0.25'
+      y='0.25'
+      width='3'
+      height='10'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+const horizontalPipe = (
+  <svg width='11' height='11' xmlns='http://www.w3.org/2000/svg'>
+    <rect
+      x='0.25'
+      y='3.50'
+      width='10'
+      height='3'
+      fill={colorTheme.primary.value}
+      stroke={colorTheme.white.value}
+      strokeWidth='0.5'
+    />
+  </svg>
+)
+
+export const rulerMarkerIcons: {
+  [key in RulerMarkerType]: { column: React.ReactNode; row: React.ReactNode }
+} = {
+  'span-start': {
+    column: rightFacingTriangle,
+    row: downFacingTriangle,
+  },
+  'span-end': {
+    column: leftFacingTriangle,
+    row: upFacingTriangle,
+  },
+  auto: {
+    column: verticalPipe,
+    row: horizontalPipe,
+  },
+  pinned: {
+    column: downFacingTriangle,
+    row: rightFacingTriangle,
+  },
+}