feature(grid) Grid Markers Mouse Down Behaviour (#6678)

- Ruler markers now take a colour and scale directly.
- Added a short vertical and horizontal pipe marker.
- Grid outlines shown when triggered from the grid markers.
- `RulerMarkers` now takes a callback to trigger the showing of grid
markers.
- Additional properties added to `RulerMarkerData` and
`RulerMarkerPositionData`.
- The additional markers are built up using `addOtherMarker`.
- When the row and column grid markers are mouse downed, their
respective ruler and additional markers are shown.
- A `GridRuler` component was added and the `RulerMarkerIndicator`
components respective to their axis are now children of those rulers.
- `RulerMarkerIndicator` components were reworked to cater for their new
functionality and also that they are now within a `GridRuler` component.
- Added `getRulerMarkerColor` utility function.
- Deleted `skewMarkerPosition` as now all of the markers are a fixed
size.
- Removed `priority` setting in `controlsForGridPlaceholders` so the
grid
  controls sit above other controls.
- Introduced `MarkerSVG` component to handle scaling of the SVGs.
- Put the selected ruler markers on top of the other ruler markers.

editor/src/components/canvas/controls/grid-controls-for-strategies.tsx

@@ -217,6 +217,5 @@ export function controlsForGridPlaceholders(
     },
     key: `GridControls${suffix == null ? '' : suffix}`,
     show: whenToShow,
-    priority: 'bottom',
   }
 }

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

@@ -1,82 +1,110 @@
 import React from 'react'
-import { colorTheme } from '../../../uuiui'
+import type { UtopiColor } from '../../../uuiui'
+import { RulerMarkerIconSize } from './grid-controls'
 
-export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'pinned'
+export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'auto-short' | '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>
-)
+interface MarkerSVGProps {
+  scale: number
+}
+
+function MarkerSVG({ scale, children }: React.PropsWithChildren<MarkerSVGProps>) {
+  return (
+    <svg
+      width={`${RulerMarkerIconSize / scale}`}
+      height={`${RulerMarkerIconSize / scale}`}
+      viewBox={`0 0 ${RulerMarkerIconSize} ${RulerMarkerIconSize}`}
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      {children}
+    </svg>
+  )
+}
+
+function upFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`${
+          RulerMarkerIconSize / 2
+        },0 ${RulerMarkerIconSize},${RulerMarkerIconSize} 0,${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
+
+function rightFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`${RulerMarkerIconSize},${RulerMarkerIconSize / 2} 0,0 0,${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
+
+function downFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`${RulerMarkerIconSize / 2},${RulerMarkerIconSize} 0,0 ${RulerMarkerIconSize},0`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
+
+function leftFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <polygon
+        points={`0,${
+          RulerMarkerIconSize / 2
+        } ${RulerMarkerIconSize},0 ${RulerMarkerIconSize},${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+      />
+    </MarkerSVG>
+  )
+}
 
-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>
-)
+function regularVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='4' y='0' width='3' height={`${RulerMarkerIconSize}`} fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-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>
-)
+function regularHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='0' y='4' width={`${RulerMarkerIconSize}`} height='3' fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-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>
-)
+function shortVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='4' y='2' width='3' height='9' fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-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>
-)
+function shortHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
+  return (
+    <MarkerSVG scale={scale}>
+      <rect x='2' y='4' width='9' height='3' fill={fillColor.value} />
+    </MarkerSVG>
+  )
+}
 
-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>
-)
+type ColorToReactNode = (fillColor: UtopiColor, scale: number) => React.ReactNode
 
 export const rulerMarkerIcons: {
-  [key in RulerMarkerType]: { column: React.ReactNode; row: React.ReactNode }
+  [key in RulerMarkerType]: { column: ColorToReactNode; row: ColorToReactNode }
 } = {
   'span-start': {
     column: rightFacingTriangle,
@@ -87,8 +115,12 @@ export const rulerMarkerIcons: {
     row: upFacingTriangle,
   },
   auto: {
-    column: verticalPipe,
-    row: horizontalPipe,
+    column: regularVerticalPipe,
+    row: regularHorizontalPipe,
+  },
+  'auto-short': {
+    column: shortVerticalPipe,
+    row: shortHorizontalPipe,
   },
   pinned: {
     column: downFacingTriangle,