tweak resizing grid stretching item

concrete-utopia · Dec 10, 2024 · 178c515 · 178c515
1 parent 544461a
commit 178c515
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -17,6 +17,8 @@ import {
 import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
 import { cssKeyword } from '../../../inspector/common/css-utils'
 import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common'
+import { CSSCursor } from '../../canvas-types'
+import { setCursorCommand } from '../../commands/set-cursor-command'
 import {
   controlsForGridPlaceholders,
   gridEdgeToEdgePosition,
@@ -172,9 +174,18 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         ),
       }
 
+      const cursor =
+        interactionSession.activeControl.edge === 'column-start' ||
+        interactionSession.activeControl.edge === 'column-end'
+          ? CSSCursor.ColResize
+          : CSSCursor.RowResize
+
       return strategyApplicationResult(
-        getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
-        [EP.parentPath(selectedElement), selectedElement],
+        [
+          ...getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps),
+          setCursorCommand(cursor),
+        ],
+        [(EP.parentPath(selectedElement), selectedElement)],
       )
     },
   }

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -1682,7 +1682,6 @@ interface GridResizeControlProps {
 
 export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) => {
   const gridTarget = getGridIdentifierContainerOrComponentPath(target)
-  const colorTheme = useColorTheme()
 
   const element = useEditorState(
     Substores.metadata,
@@ -1854,7 +1853,7 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps)
           left: bounds?.x ?? element.globalFrame.x,
           width: bounds?.width ?? element.globalFrame.width,
           height: bounds?.height ?? element.globalFrame.height,
-          backgroundColor: isResizing ? colorTheme.primary25.value : 'transparent',
+          backgroundColor: 'transparent',
         }}
       >
         <div