explicit canvas control ordering (#6219)

## Problem
it turns out that large controls can obscure small ones so that the
smaller control is still visible, but it cannot be grabbed because of
the large, invisible one.

Practical example: for CSS grids, we render a control that makes it
possible to drag a grid element, but in the case a CSS grid within a CSS
grid, the same grid outline control can overlay the grid-specific resize
controls, and make it impossible to grab them. However, if there was a
way to "force" some grid controls to the bottom of the control stack
this wouldn't be a problem

## Fix
Add a prop to `ControlWithProps` that makes it possible to force the
control to be near the top of the control stack, or near the bottom. If
the property is omitted, the control will be near the middle (between
the controls that have `bottom` specified and between the ones that have
`top` specified).

editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx

@@ -597,6 +597,17 @@ export function interactionInProgress(interactionSession: InteractionSession | n
   }
 }
 
+function controlPriorityToNumber(prio: ControlWithProps<any>['priority']): number {
+  switch (prio) {
+    case 'bottom':
+      return 0
+    case undefined:
+      return 1
+    case 'top':
+      return 2
+  }
+}
+
 export function useGetApplicableStrategyControls(): Array<ControlWithProps<unknown>> {
   const applicableStrategies = useGetApplicableStrategies()
   const currentStrategy = useDelayedCurrentStrategy()
@@ -626,6 +637,11 @@ export function useGetApplicableStrategyControls(): Array<ControlWithProps<unkno
     if (!isResizable && !currentlyInProgress) {
       applicableControls.push(notResizableControls)
     }
+
+    applicableControls = applicableControls.sort(
+      (a, b) => controlPriorityToNumber(a.priority) - controlPriorityToNumber(b.priority),
+    )
+
     return applicableControls
   }, [applicableStrategies, currentStrategy, currentlyInProgress])
 }

editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts

@@ -98,6 +98,7 @@ export interface ControlWithProps<P> {
   props: P
   key: string
   show: WhenToShowControl
+  priority?: 'top' | 'bottom'
 }
 
 export function controlWithProps<P>(value: ControlWithProps<P>): ControlWithProps<P> {