Split controls for grid rulers and placeholders, don't show placehold…

…ers during item resize (#6720) **Problem:** Grid control placeholders should not show while resizing a grid item. **Fix:** 1. Split the grid controls into two components - one for the placeholders and one for the ruler/markers. 2. Do not show the placeholders while resizing a grid item (via its edges) 3. Do some prep work to only show row/col placeholder lines during marker resize (an incremental PR will take care of that) | Before | After | |-----------|--------------| | ![Kapture 2024-12-11 at 12 22 44](https://github.com/user-attachments/assets/bca7def9-91fc-4095-9cff-9058b77ee609) | ![Kapture 2024-12-11 at 12 22 02](https://github.com/user-attachments/assets/255ceb5f-6a5e-4085-82b3-5e057ffb4c3e) | Fixes #[6719](#6719)
concrete-utopia · Dec 11, 2024 · 0a6ad3f · 0a6ad3f
1 parent e34fdc3
commit 0a6ad3f
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 48 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx
@@ -36,7 +36,10 @@ import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
@@ -130,7 +133,12 @@ export function basicResizeStrategy(
         key: 'parent-bounds-control',
         show: 'visible-only-while-active',
       }),
-      ...(isGridCell ? [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))] : []),
+      ...(isGridCell
+        ? [
+            controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+            controlsForGridRulers(gridItemIdentifier(selectedElement)),
+          ]
+        : []),
     ],
     fitness:
       interactionSession != null &&

diff --git a/...ts/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts b/...ts/canvas/canvas-strategies/strategies/grid-change-element-location-duplicate-strategy.ts
@@ -7,7 +7,10 @@ import { setCursorCommand } from '../../commands/set-cursor-command'
 
 import { updateHighlightedViews } from '../../commands/update-highlighted-views-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { CustomStrategyState, InteractionCanvasState } from '../canvas-strategy-types'
@@ -79,7 +82,10 @@ export const gridChangeElementLocationDuplicateStrategy: CanvasStrategyFactory =
       category: 'tools',
       type: 'pointer',
     },
-    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(selectedElement))],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+      controlsForGridRulers(gridItemIdentifier(selectedElement)),
+    ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 3),
     apply: () => {
       if (

diff --git a/...nts/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts b/...nts/canvas/canvas-strategies/strategies/grid-change-element-location-keyboard-strategy.ts
@@ -2,7 +2,10 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { GridPositionValue } from '../../../../core/shared/element-template'
 import { gridPositionValue } from '../../../../core/shared/element-template'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types'
 import {
   emptyStrategyApplicationResult,
@@ -68,7 +71,10 @@ export function gridChangeElementLocationResizeKeyboardStrategy(
       category: 'modalities',
       type: 'reorder-large',
     },
-    controlsToRender: [controlsForGridPlaceholders(gridItemIdentifier(target))],
+    controlsToRender: [
+      controlsForGridPlaceholders(gridItemIdentifier(target)),
+      controlsForGridRulers(gridItemIdentifier(target)),
+    ],
     fitness: fitness(interactionSession),
     apply: () => {
       if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') {

diff --git a/...c/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts b/...c/components/canvas/canvas-strategies/strategies/grid-change-element-location-strategy.ts
@@ -16,7 +16,10 @@ import { getTargetGridCellData } from '../../../inspector/grid-helpers'
 import type { CanvasCommand } from '../../commands/commands'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -97,6 +100,7 @@ export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
     },
     controlsToRender: [
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+      controlsForGridRulers(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts
@@ -23,7 +23,10 @@ import {
 } from '../../../../core/shared/math-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -102,6 +105,7 @@ export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
     },
     controlsToRender: [
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+      controlsForGridRulers(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_CELL_HANDLE', 2),
     apply: () => {

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.ts
@@ -11,7 +11,10 @@ import { absolute } from '../../../../utils/utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { reorderElement } from '../../commands/reorder-element-command'
 import { showGridControls } from '../../commands/show-grid-controls-command'
-import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies'
+import {
+  controlsForGridPlaceholders,
+  controlsForGridRulers,
+} from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
 import type { InteractionCanvasState } from '../canvas-strategy-types'
@@ -95,6 +98,7 @@ export const gridReorderStrategy: CanvasStrategyFactory = (
     },
     controlsToRender: [
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
+      controlsForGridRulers(gridItemIdentifier(selectedElement), 'visible-only-while-active'),
     ],
     fitness: onlyFitWhenDraggingThisControl(
       interactionSession,

diff --git a/.../src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts b/.../src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts
@@ -17,6 +17,7 @@ import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/sto
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import {
   controlsForGridPlaceholders,
+  controlsForGridRulers,
   GridResizeControls,
 } from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
@@ -82,6 +83,7 @@ export const gridResizeElementRulerStrategy: CanvasStrategyFactory = (
         show: 'always-visible',
       },
       controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+      controlsForGridRulers(gridItemIdentifier(selectedElement)),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_RULER_HANDLE', 1),
     apply: () => {

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
@@ -20,7 +20,7 @@ import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspecto
 import { CSSCursor } from '../../canvas-types'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import {
-  controlsForGridPlaceholders,
+  controlsForGridRulers,
   gridEdgeToEdgePosition,
   GridResizeControls,
 } from '../../controls/grid-controls-for-strategies'
@@ -88,7 +88,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
         key: `grid-resize-controls-${EP.toString(selectedElement)}`,
         show: 'always-visible',
       },
-      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
+      controlsForGridRulers(gridItemIdentifier(selectedElement)),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_HANDLE', 1),
     apply: () => {

diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx
@@ -25,6 +25,7 @@ import {
   GridControlsComponent,
   GridResizeControlsComponent,
   GridRowColumnResizingControlsComponent,
+  GridRulersControlsComponent,
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
 import { useMonitorChangesToElements } from '../../../components/editor/store/store-monitor'
@@ -167,6 +168,15 @@ export function isGridControlsProps(props: unknown): props is GridControlsProps
 
 export const GridControls = controlForStrategyMemoized<GridControlsProps>(GridControlsComponent)
 
+export interface GridRulersControlsProps {
+  type: 'GRID_RULERS_CONTROLS_PROPS'
+  targets: GridIdentifier[]
+}
+
+export const GridRulersControls = controlForStrategyMemoized<GridRulersControlsProps>(
+  GridRulersControlsComponent,
+)
+
 interface GridResizeControlProps {
   target: GridIdentifier
 }
@@ -221,3 +231,19 @@ export function controlsForGridPlaceholders(
     show: whenToShow,
   }
 }
+
+export function controlsForGridRulers(
+  gridPath: GridIdentifier | Array<GridIdentifier>,
+  whenToShow: WhenToShowControl = 'always-visible',
+  suffix: string | null = null,
+): ControlWithProps<any> {
+  return {
+    control: GridRulersControls,
+    props: {
+      type: 'GRID_RULERS_CONTROLS_PROPS',
+      targets: Array.isArray(gridPath) ? gridPath : [gridPath],
+    },
+    key: `GridRulersControls${suffix == null ? '' : suffix}`,
+    show: whenToShow,
+  }
+}