Offset distance indicators for grid absolute move

editor/src/components/canvas/controls/grid-controls.tsx

@@ -5,6 +5,7 @@ import type { AnimationControls } from 'framer-motion'
 import { motion, useAnimationControls } from 'framer-motion'
 import type { CSSProperties } from 'react'
 import React from 'react'
+import type { Sides } from 'utopia-api/core'
 import type { ElementPath } from 'utopia-shared/src/types'
 import type { GridDimension } from '../../../components/inspector/common/css-utils'
 import {
@@ -23,6 +24,7 @@ import {
 import type { CanvasPoint, CanvasRectangle } from '../../../core/shared/math-utils'
 import {
   canvasPoint,
+  canvasRectangle,
   isFiniteRectangle,
   isInfinityRectangle,
   pointsEqual,
@@ -39,9 +41,11 @@ import {
 } from '../../../core/shared/optics/optic-creators'
 import { toFirst } from '../../../core/shared/optics/optic-utilities'
 import type { Optic } from '../../../core/shared/optics/optics'
+import { optionalMap } from '../../../core/shared/optional-utils'
 import { assertNever } from '../../../core/shared/utils'
 import { Modifier } from '../../../utils/modifiers'
 import { when } from '../../../utils/react-conditionals'
+import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
 import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
@@ -52,16 +56,13 @@ import type {
   GridResizeEdgeProperties,
 } from '../canvas-strategies/interaction-state'
 import {
-  GridResizeEdges,
   createInteractionViaMouse,
   gridAxisHandle,
   gridCellHandle,
   gridResizeEdgeProperties,
+  GridResizeEdges,
   gridResizeHandle,
 } from '../canvas-strategies/interaction-state'
-import { windowToCanvasCoordinates } from '../dom-lookup'
-import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-helpers'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
 import type { EdgePosition } from '../canvas-types'
@@ -72,11 +73,11 @@ import {
   EdgePositionRight,
   EdgePositionTop,
 } from '../canvas-types'
+import { windowToCanvasCoordinates } from '../dom-lookup'
+import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
+import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
 import { CanvasLabel } from './select-mode/controls-common'
-import { optionalMap } from '../../../core/shared/optional-utils'
-import type { Sides } from 'utopia-api/core'
-import type { Axis } from '../gap-utils'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
@@ -962,11 +963,331 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
             }}
           />
         ) : null}
+        <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
       </CanvasOffsetWrapper>
     </React.Fragment>
   )
 })
 
+const AbsoluteDistanceIndicators = React.memo(
+  (props: { targetRootCell: GridCellCoordinates | null }) => {
+    const colorTheme = useColorTheme()
+
+    const cellFrame = useEditorState(
+      Substores.metadata,
+      (store) => {
+        if (store.editor.selectedViews.length !== 1) {
+          return null
+        }
+        const meta = MetadataUtils.findElementByElementPath(
+          store.editor.jsxMetadata,
+          store.editor.selectedViews[0],
+        )
+        if (
+          !MetadataUtils.isPositionAbsolute(meta) ||
+          meta?.globalFrame == null ||
+          !isFiniteRectangle(meta.globalFrame)
+        ) {
+          return null
+        }
+        return meta.globalFrame
+      },
+      'AbsoluteDistanceIndicators cellFrame',
+    )
+    const canvasScale = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.scale,
+      'AbsoluteDistanceIndicators canvasScale',
+    )
+
+    const canvasOffset = useEditorState(
+      Substores.canvasOffset,
+      (store) => store.editor.canvas.roundedCanvasOffset,
+      'AbsoluteDistanceIndicators canvasOffset',
+    )
+
+    const targetCellBoundingBox = React.useMemo(() => {
+      if (props.targetRootCell == null) {
+        return null
+      }
+      const element = document.querySelector(
+        `[data-grid-row="${props.targetRootCell.row}"]` +
+          `[data-grid-column="${props.targetRootCell.column}"]`,
+      )
+      const boundingBox = element?.getBoundingClientRect()
+      if (boundingBox == null) {
+        return null
+      }
+
+      const canvasOrigin = windowToCanvasCoordinates(
+        canvasScale,
+        canvasOffset,
+        windowPoint({ x: boundingBox.left, y: boundingBox.top }),
+      ).canvasPositionRounded
+      const canvasRect = canvasRectangle({
+        x: canvasOrigin.x,
+        y: canvasOrigin.y,
+        width: boundingBox.width * canvasScale,
+        height: boundingBox.height * canvasScale,
+      })
+
+      return canvasRect
+    }, [props.targetRootCell, canvasScale, canvasOffset])
+
+    const topDist = React.useMemo(() => {
+      if (targetCellBoundingBox == null || cellFrame == null) {
+        return 0
+      }
+      return cellFrame.y - targetCellBoundingBox.y
+    }, [cellFrame, targetCellBoundingBox])
+    const leftDist = React.useMemo(() => {
+      if (targetCellBoundingBox == null || cellFrame == null) {
+        return 0
+      }
+      return cellFrame.x - targetCellBoundingBox.x
+    }, [cellFrame, targetCellBoundingBox])
+
+    const positioning = React.useMemo(() => {
+      if (cellFrame == null || targetCellBoundingBox == null) {
+        return null
+      }
+
+      function position(
+        wantedCoord: 'x' | 'y',
+        cell: CanvasRectangle,
+        root: CanvasRectangle,
+        dominantDistance: number,
+        otherDistance: number,
+      ): { left: number; top: number } {
+        const otherCoord = wantedCoord === 'x' ? 'y' : 'x'
+        const dimension = wantedCoord === 'x' ? 'width' : 'height'
+        const dominant =
+          cell[wantedCoord] < root[wantedCoord] || dominantDistance < 32 || otherDistance < 0
+            ? root[wantedCoord] + root[dimension] / 2
+            : Math.max(root[wantedCoord], cell[wantedCoord])
+        const other = otherDistance < 0 ? cell[otherCoord] : root[otherCoord]
+        if (wantedCoord === 'x') {
+          return {
+            left: dominant,
+            top: other,
+          }
+        } else {
+          return {
+            left: other,
+            top: dominant,
+          }
+        }
+      }
+
+      function compensationNegative(
+        wantedCoord: 'x' | 'y',
+        cell: CanvasRectangle,
+        root: CanvasRectangle,
+        dist: number,
+      ): { width: number; height: number; left: number; top: number } | null {
+        const otherCoord = wantedCoord === 'x' ? 'y' : 'x'
+        const dimension = wantedCoord === 'x' ? 'width' : 'height'
+
+        const shouldCompensate =
+          dist < 0 && cell[wantedCoord] > root[wantedCoord] + root[dimension] / 2
+        if (!shouldCompensate) {
+          return null
+        }
+
+        const size = Math.abs(root[wantedCoord] + root[dimension] / 2 - cell[wantedCoord])
+        const dominant = root[wantedCoord] + root[dimension] / 2
+        const other = cell[otherCoord]
+
+        return wantedCoord === 'x'
+          ? {
+              width: size,
+              height: 1,
+              top: other,
+              left: dominant,
+            }
+          : {
+              width: 1,
+              height: size,
+              top: dominant,
+              left: other,
+            }
+      }
+
+      function compensationPositive(
+        wantedCoord: 'x' | 'y',
+        cell: CanvasRectangle,
+        root: CanvasRectangle,
+        dist: number,
+      ): { width: number; height: number; left: number; top: number } | null {
+        const otherCoord = wantedCoord === 'x' ? 'y' : 'x'
+        const dimension = wantedCoord === 'x' ? 'width' : 'height'
+
+        const shouldCompensate = dist > 0 && cell[wantedCoord] > root[wantedCoord] + root[dimension]
+        if (!shouldCompensate) {
+          return null
+        }
+
+        const size = Math.abs(root[wantedCoord] + root[dimension] / 2 - cell[wantedCoord])
+        const other = root[otherCoord]
+        const dominant = root[wantedCoord] + root[dimension] / 2
+
+        return wantedCoord === 'x'
+          ? {
+              width: size,
+              height: 1,
+              top: other,
+              left: dominant,
+            }
+          : {
+              height: size,
+              width: 1,
+              left: other,
+              top: dominant,
+            }
+      }
+
+      const topIndicator = {
+        ...position('x', cellFrame, targetCellBoundingBox, leftDist, topDist),
+        compensateNegative: compensationNegative('x', cellFrame, targetCellBoundingBox, topDist),
+        compensatePositive: compensationPositive('x', cellFrame, targetCellBoundingBox, topDist),
+      }
+
+      const leftIndicator = {
+        ...position('y', cellFrame, targetCellBoundingBox, leftDist, leftDist),
+        compensateNegative: compensationNegative('y', cellFrame, targetCellBoundingBox, leftDist),
+        compensatePositive: compensationPositive('y', cellFrame, targetCellBoundingBox, leftDist),
+      }
+
+      return { topIndicator, leftIndicator }
+    }, [cellFrame, targetCellBoundingBox, leftDist, topDist])
+
+    if (targetCellBoundingBox == null || cellFrame == null || positioning == null) {
+      return null
+    }
+
+    const backgroundColor = colorTheme.brandNeonPink.value
+    const dashedBorder = `1px dashed ${backgroundColor}`
+
+    return (
+      <React.Fragment>
+        {/* top distance */}
+        <React.Fragment>
+          <div
+            style={{
+              position: 'absolute',
+              borderLeft: dashedBorder,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+
+              left: positioning.topIndicator.left,
+              top: positioning.topIndicator.top,
+              width: 1,
+              height: Math.abs(topDist),
+            }}
+          >
+            <span
+              style={{
+                backgroundColor: backgroundColor,
+                padding: '0px 2px',
+                borderRadius: 2,
+                fontSize: 9,
+                color: '#fff',
+              }}
+            >
+              {topDist}
+            </span>
+          </div>
+          {/* compensate */}
+          {positioning.topIndicator.compensateNegative != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderTop: dashedBorder,
+
+                left: positioning.topIndicator.compensateNegative.left,
+                top: positioning.topIndicator.compensateNegative.top,
+                width: positioning.topIndicator.compensateNegative.width,
+                height: positioning.topIndicator.compensateNegative.height,
+              }}
+            />
+          ) : null}
+          {positioning.topIndicator.compensatePositive != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderTop: dashedBorder,
+
+                left: positioning.topIndicator.compensatePositive.left,
+                top: positioning.topIndicator.compensatePositive.top,
+                width: positioning.topIndicator.compensatePositive.width,
+                height: positioning.topIndicator.compensatePositive.height,
+              }}
+            />
+          ) : null}
+        </React.Fragment>
+
+        {/* left distance */}
+        <React.Fragment>
+          <div
+            style={{
+              position: 'absolute',
+              borderTop: dashedBorder,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+
+              left: positioning.leftIndicator.left,
+              top: positioning.leftIndicator.top,
+              width: Math.abs(leftDist),
+              height: 1,
+            }}
+          >
+            <span
+              style={{
+                backgroundColor: backgroundColor,
+                padding: '0px 2px',
+                borderRadius: 2,
+                fontSize: 9,
+                color: '#fff',
+              }}
+            >
+              {leftDist}
+            </span>
+          </div>
+          {/* compensate */}
+          {positioning.leftIndicator.compensateNegative != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderLeft: dashedBorder,
+
+                left: positioning.leftIndicator.compensateNegative.left,
+                top: positioning.leftIndicator.compensateNegative.top,
+                width: positioning.leftIndicator.compensateNegative.width,
+                height: positioning.leftIndicator.compensateNegative.height,
+              }}
+            />
+          ) : null}
+          {positioning.leftIndicator.compensatePositive != null ? (
+            <div
+              style={{
+                position: 'absolute',
+                borderLeft: dashedBorder,
+
+                left: positioning.leftIndicator.compensatePositive.left,
+                top: positioning.leftIndicator.compensatePositive.top,
+                width: positioning.leftIndicator.compensatePositive.width,
+                height: positioning.leftIndicator.compensatePositive.height,
+              }}
+            />
+          ) : null}
+        </React.Fragment>
+      </React.Fragment>
+    )
+  },
+)
+
 function useCellAnimation(params: {
   disabled: boolean
   gridPath: ElementPath | null