From 84a66a188c42aea3be9b0c37a9a6fe13fd6c701d Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Thu, 17 Oct 2024 13:46:26 +0200
Subject: [PATCH 1/2] basic label hover interaction

---
 .../canvas/controls/grid-controls.tsx         | 91 +++++++++++--------
 1 file changed, 55 insertions(+), 36 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 0ca1c10c48db..38cb7d2ce7f4 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -126,6 +126,7 @@ interface GridResizingControlProps {
   setResizingIndex: (v: number | null) => void
   resizeLocked: boolean
   stripedAreaLength: number | null
+  labelsHovered: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 const GridResizingControl = React.memo((props: GridResizingControlProps) => {
@@ -211,6 +212,12 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
     [scale, props.padding],
   )
 
+  const [labelsHovered, setLabelsHovered] = props.labelsHovered
+
+  const onMouseOver = React.useCallback(() => {
+    setLabelsHovered(true)
+  }, [setLabelsHovered])
+
   return (
     <div
       key={containerId}
@@ -241,9 +248,13 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
             ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
             : 'default',
           pointerEvents: 'initial',
+          width: labelsHovered ? `calc-size(min-content, size)` : 10, // FIXME
+          overflow: 'hidden',
+          transition: 'width 0.2s ease',
         }}
         onMouseDown={mouseDownHandler}
         onMouseMove={onMouseMove}
+        onMouseOver={onMouseOver}
       >
         {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
       </div>
@@ -314,6 +325,7 @@ interface GridResizingProps {
   padding: Sides | null
   justifyContent: string | null
   alignContent: string | null
+  labelsHovered: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 const GridResizing = React.memo((props: GridResizingProps) => {
@@ -440,6 +452,7 @@ const GridResizing = React.memo((props: GridResizingProps) => {
                     ? props.padding.top ?? 0
                     : props.padding.left ?? 0
                 }
+                labelsHovered={props.labelsHovered}
               />
             )
           })}
@@ -519,44 +532,50 @@ export const GridRowColumnResizingControlsComponent = ({
     })
   }, [scale, grids])
 
+  const labelsHovered = React.useState(false)
+
   return (
     <CanvasOffsetWrapper>
-      {gridsWithVisibleResizeControls.flatMap((grid) => {
-        return (
-          <GridResizing
-            key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
-            axisValues={grid.gridTemplateColumns}
-            fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
-            containingFrame={grid.frame}
-            axis={'column'}
-            gap={grid.columnGap ?? grid.gap}
-            padding={grid.padding}
-            stripedAreaLength={
-              getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
-            }
-            alignContent={grid.justifyContent}
-            justifyContent={grid.alignContent}
-          />
-        )
-      })}
-      {gridsWithVisibleResizeControls.flatMap((grid) => {
-        return (
-          <GridResizing
-            key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
-            axisValues={grid.gridTemplateRows}
-            fromPropsAxisValues={grid.gridTemplateRowsFromProps}
-            containingFrame={grid.frame}
-            axis={'row'}
-            gap={grid.rowGap ?? grid.gap}
-            padding={grid.padding}
-            stripedAreaLength={
-              getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
-            }
-            alignContent={grid.alignContent}
-            justifyContent={grid.justifyContent}
-          />
-        )
-      })}
+      <div onMouseLeave={() => labelsHovered[1](false)}>
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
+          return (
+            <GridResizing
+              key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
+              axisValues={grid.gridTemplateColumns}
+              fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
+              containingFrame={grid.frame}
+              axis={'column'}
+              gap={grid.columnGap ?? grid.gap}
+              padding={grid.padding}
+              stripedAreaLength={
+                getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
+              }
+              alignContent={grid.justifyContent}
+              justifyContent={grid.alignContent}
+              labelsHovered={labelsHovered}
+            />
+          )
+        })}
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
+          return (
+            <GridResizing
+              key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
+              axisValues={grid.gridTemplateRows}
+              fromPropsAxisValues={grid.gridTemplateRowsFromProps}
+              containingFrame={grid.frame}
+              axis={'row'}
+              gap={grid.rowGap ?? grid.gap}
+              padding={grid.padding}
+              stripedAreaLength={
+                getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
+              }
+              alignContent={grid.alignContent}
+              justifyContent={grid.justifyContent}
+              labelsHovered={labelsHovered}
+            />
+          )
+        })}
+      </div>
     </CanvasOffsetWrapper>
   )
 }

From c40d2edca92f78af731f46aed916e36eb581d67d Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:03:18 +0200
Subject: [PATCH 2/2] proto progress

---
 .../canvas/controls/grid-controls.tsx         | 62 ++++++++++++-------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 6b061a4a6a76..055b6413e673 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -232,31 +232,49 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
       }}
     >
       <div
-        data-testid={labelId}
         style={{
-          zoom: 1 / scale,
-          height: GRID_RESIZE_HANDLE_SIZE,
-          borderRadius: 3,
-          padding: '0 4px',
-          border: `.1px solid ${colorTheme.white.value}`,
-          background: colorTheme.primary.value,
-          color: colorTheme.white.value,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: canResize
-            ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
-            : 'default',
-          pointerEvents: 'initial',
-          width: labelsHovered ? `calc-size(min-content, size)` : 10, // FIXME
-          overflow: 'hidden',
-          transition: 'width 0.2s ease',
+          // display: 'flex',
+          justifyContent: 'flex-end',
+          width: 0,
+          height: 0,
+          alignSelf: 'center',
+          justifySelf: 'center',
+          overflow: 'visible',
         }}
-        onMouseDown={mouseDownHandler}
-        onMouseMove={onMouseMove}
-        onMouseOver={onMouseOver}
       >
-        {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
+        <div
+          data-testid={labelId}
+          style={{
+            position: 'absolute',
+            right: props.axis === 'row' ? 0 : undefined,
+            zoom: 1 / scale,
+            height: GRID_RESIZE_HANDLE_SIZE,
+            borderRadius: 3,
+            // padding: '0 4px',
+            border: `.1px solid ${colorTheme.white.value}`,
+            background: colorTheme.primary.value,
+            color: colorTheme.white.value,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: canResize
+              ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
+              : 'default',
+            pointerEvents: 'initial',
+            width: labelsHovered ? `calc-size(min-content, size)` : 4, // FIXME
+            overflow: 'hidden',
+            rotate: props.axis === 'column' ? (labelsHovered ? '-45deg' : '-90deg') : '0deg',
+            transformOrigin: 'left center',
+            transition: 'width 0.0s ease',
+          }}
+          onMouseDown={mouseDownHandler}
+          onMouseMove={onMouseMove}
+          onMouseOver={onMouseOver}
+        >
+          {!labelsHovered
+            ? ''
+            : getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
+        </div>
       </div>
       {when(
         props.resizing !== 'not-resizing',