Merge branch 'master' into feat/pass-scene-size

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 &&

editor/src/components/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 (

editor/src/components/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') {

editor/src/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'
@@ -34,16 +37,8 @@ import {
   isAutoGridPin,
   getCommandsForGridItemPlacement,
   sortElementsByGridPosition,
-  getGridRelativeContainingBlock,
 } from './grid-helpers'
 import type { GridCellCoordinates } from './grid-cell-bounds'
-import {
-  canvasRectangle,
-  offsetPoint,
-  offsetRect,
-  rectContainsPoint,
-  zeroCanvasRect,
-} from '../../../../core/shared/math-utils'
 
 export const gridChangeElementLocationStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -105,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: () => {

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -19,6 +19,7 @@ import {
 } from '../../../../core/shared/element-template'
 import {
   localRectangle,
+  zeroRectangle,
   zeroRectIfNullOrInfinity,
   type CanvasRectangle,
   type LocalRectangle,
@@ -750,8 +751,8 @@ const TemporaryGridID = 'temporary-grid'
 
 export function getGridRelativeContainingBlock(
   gridMetadata: ElementInstanceMetadata,
-  cellMetadata: ElementInstanceMetadata,
-  cellProperties: GridElementProperties,
+  gridElements: ElementInstanceMetadata[],
+  targetElement: ElementPath,
   options?: {
     forcePositionRelative?: boolean
   },
@@ -828,47 +829,68 @@ export function getGridRelativeContainingBlock(
   }
   offsetContainer.appendChild(gridElement)
 
-  // Create a child of the grid element with the appropriate properties.
-  const gridChildElement = document.createElement('div')
+  function addItemToGrid(measurements: SpecialSizeMeasurements) {
+    // Create a child of the grid element with the appropriate properties.
+    const gridChildElement = document.createElement('div')
 
-  if (cellProperties.gridColumnStart != null) {
-    gridChildElement.style.gridColumnStart = printPinAsString(
-      gridProperties,
-      cellProperties.gridColumnStart,
-      'column',
-    )
-  }
-  if (cellProperties.gridColumnEnd != null) {
-    gridChildElement.style.gridColumnEnd = printPinAsString(
-      gridProperties,
-      cellProperties.gridColumnEnd,
-      'column',
-    )
-  }
-  if (cellProperties.gridRowStart != null) {
-    gridChildElement.style.gridRowStart = printPinAsString(
-      gridProperties,
-      cellProperties.gridRowStart,
-      'row',
-    )
-  }
-  if (cellProperties.gridRowEnd != null) {
-    gridChildElement.style.gridRowEnd = printPinAsString(
-      gridProperties,
-      cellProperties.gridRowEnd,
-      'row',
-    )
+    const { elementGridProperties, position } = measurements
+
+    if (elementGridProperties.gridColumnStart != null) {
+      gridChildElement.style.gridColumnStart = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridColumnStart,
+        'column',
+      )
+    }
+    if (elementGridProperties.gridColumnEnd != null) {
+      gridChildElement.style.gridColumnEnd = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridColumnEnd,
+        'column',
+      )
+    }
+    if (elementGridProperties.gridRowStart != null) {
+      gridChildElement.style.gridRowStart = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridRowStart,
+        'row',
+      )
+    }
+    if (elementGridProperties.gridRowEnd != null) {
+      gridChildElement.style.gridRowEnd = printPinAsString(
+        gridProperties,
+        elementGridProperties.gridRowEnd,
+        'row',
+      )
+    }
+    gridChildElement.style.position = options?.forcePositionRelative
+      ? 'relative'
+      : position ?? 'initial'
+    // Fill out the entire space available.
+    gridChildElement.style.top = '0'
+    gridChildElement.style.left = '0'
+    gridChildElement.style.bottom = '0'
+    gridChildElement.style.right = '0'
+
+    return gridChildElement
   }
-  gridChildElement.style.position = options?.forcePositionRelative
-    ? 'relative'
-    : cellMetadata.specialSizeMeasurements.position ?? 'initial'
-  // Fill out the entire space available.
-  gridChildElement.style.top = '0'
-  gridChildElement.style.left = '0'
-  gridChildElement.style.bottom = '0'
-  gridChildElement.style.right = '0'
 
-  gridElement.appendChild(gridChildElement)
+  // add every element into the grid, so flow elements will be correctly positioned
+  const createdElements = gridElements.map((element) =>
+    addItemToGrid(element.specialSizeMeasurements),
+  )
+  createdElements.forEach((elem) => gridElement.appendChild(elem))
+
+  // get the index of the generated target element
+  const targetIndex = gridElements.findIndex((element) =>
+    EP.pathsEqual(element.elementPath, targetElement),
+  )
+  if (targetIndex < 0 || targetIndex >= createdElements.length) {
+    // this should never happen
+    return localRectangle(zeroRectangle)
+  }
+  // grab the generated element via its index
+  const gridChildElement = createdElements[targetIndex]
 
   // Get the result and cleanup the temporary elements.
   try {

editor/src/components/canvas/canvas-strategies/strategies/grid-move-absolute.ts

@@ -1,33 +1,31 @@
 import type { ElementPath } from 'utopia-shared/src/types'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
-import type { JSXElementChild } from '../../../../core/shared/element-template'
+import type {
+  JSXElementChild,
+  SpecialSizeMeasurements,
+} from '../../../../core/shared/element-template'
 import {
   isJSXElement,
   type ElementInstanceMetadata,
   type ElementInstanceMetadataMap,
   type GridContainerProperties,
 } from '../../../../core/shared/element-template'
-import type { CanvasRectangle, CanvasVector } from '../../../../core/shared/math-utils'
+import type { CanvasRectangle } from '../../../../core/shared/math-utils'
 import {
   canvasRectangle,
   canvasRectangleToLocalRectangle,
   isNotNullFiniteRectangle,
   nullIfInfinity,
-  offsetPoint,
   offsetRect,
   rectangleContainsRectangleInclusive,
-  rectContainsPoint,
-  windowPoint,
-  zeroCanvasRect,
   zeroRectIfNullOrInfinity,
-  zeroSize,
 } from '../../../../core/shared/math-utils'
 import type { CanvasCommand } from '../../commands/commands'
 import { showGridControls } from '../../commands/show-grid-controls-command'
 import {
   controlsForGridPlaceholders,
-  GridElementChildContainingBlockKey,
+  controlsForGridRulers,
 } from '../../controls/grid-controls-for-strategies'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
 import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
@@ -57,8 +55,6 @@ import { getMoveCommandsForDrag } from './shared-move-strategies-helpers'
 import { toFirst } from '../../../../core/shared/optics/optic-utilities'
 import { eitherRight, fromTypeGuard } from '../../../../core/shared/optics/optic-creators'
 import { defaultEither } from '../../../../core/shared/either'
-import { forceNotNull } from '../../../..//core/shared/optional-utils'
-import { windowToCanvasCoordinates } from '../../dom-lookup'
 
 export const gridMoveAbsoluteStrategy: CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -109,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: () => {
@@ -197,8 +194,8 @@ export function getNewGridElementPropsCheckingOriginalGrid(
   // Identify the containing block position and size.
   const originalContainingBlockRectangle = getGridRelativeContainingBlock(
     originalGridMetadata,
-    selectedElementMetadata,
-    selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+    [selectedElementMetadata],
+    selectedElementMetadata.elementPath,
   )
 
   // Capture the original position of the grid child.
@@ -347,11 +344,21 @@ function runGridMoveAbsolute(
   )
 
   // Get the containing block of the grid child.
+  const patchedSpecialSizeMeasurements: SpecialSizeMeasurements = {
+    ...selectedElementMetadata.specialSizeMeasurements,
+    elementGridProperties:
+      newGridElementProps?.gridElementProperties ??
+      selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+  }
   const containingBlockRectangle = getGridRelativeContainingBlock(
     originalGrid,
-    selectedElementMetadata,
-    newGridElementProps?.gridElementProperties ??
-      selectedElementMetadata.specialSizeMeasurements.elementGridProperties,
+    [
+      {
+        ...selectedElementMetadata,
+        specialSizeMeasurements: patchedSpecialSizeMeasurements,
+      },
+    ],
+    selectedElementMetadata.elementPath,
   )
 
   // Get the appropriately shifted and typed local frame value to use.

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,

editor/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: () => {