rehabilitate maybeFlexGapData

concrete-utopia · Oct 10, 2024 · 5146ef8 · 5146ef8
1 parent b31a2aa
commit 5146ef8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx
@@ -29,7 +29,7 @@ import type { FlexGapData } from '../../gap-utils'
 import {
   cursorFromFlexDirection,
   dragDeltaForOrientation,
-  getFlexGapData,
+  maybeFlexGapData,
   recurseIntoChildrenOfMapOrFragment,
 } from '../../gap-utils'
 import type { CanvasStrategyFactory } from '../canvas-strategies'
@@ -95,7 +95,7 @@ export const setFlexGapStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const flexGap = getFlexGapData(
+  const flexGap = maybeFlexGapData(
     canvasState.styleInfoReader(selectedElement),
     MetadataUtils.findElementByElementPath(canvasState.startingMetadata, selectedElement),
   )

diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -26,7 +26,7 @@ import type { FlexGapData } from '../../gap-utils'
 import {
   cursorFromFlexDirection,
   gapControlBoundsFromMetadata,
-  getFlexGapData,
+  maybeFlexGapData,
   recurseIntoChildrenOfMapOrFragment,
 } from '../../gap-utils'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
@@ -136,7 +136,7 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
   const flexGapFromEditor = useEditorState(
     Substores.fullStore,
     (store) =>
-      getFlexGapData(
+      maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
           metadata: metadata,

diff --git a/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx b/editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx
@@ -6,7 +6,7 @@ import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 import type { FlexGapData, PathWithBounds } from '../../gap-utils'
 import {
   gapControlBoundsFromMetadata,
-  getFlexGapData,
+  maybeFlexGapData,
   recurseIntoChildrenOfMapOrFragment,
 } from '../../gap-utils'
 import type { ElementPath } from 'utopia-shared/src/types'
@@ -40,7 +40,7 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
   const flexGap = useEditorState(
     Substores.fullStore,
     (store) =>
-      getFlexGapData(
+      maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
           metadata: store.editor.jsxMetadata,

diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
@@ -332,23 +332,35 @@ export interface FlexGapData {
   direction: FlexDirection
 }
 
-export function getFlexGapData(
+export function maybeFlexGapData(
   info: StyleInfo | null,
-  instance: ElementInstanceMetadata | null,
+  element: ElementInstanceMetadata | null,
 ): FlexGapData | null {
-  if (instance == null || info == null) {
+  if (
+    element == null ||
+    element.specialSizeMeasurements.display !== 'flex' ||
+    isLeft(element.element) ||
+    !isJSXElement(element.element.value) ||
+    info == null
+  ) {
     return null
   }
 
-  const gap = info.gap?.value
-  const renderedValuePx = instance.specialSizeMeasurements.gap
-  if (gap == null || renderedValuePx == null) {
+  if (element.specialSizeMeasurements.justifyContent?.startsWith('space')) {
     return null
   }
 
+  const gap = element.specialSizeMeasurements.gap ?? 0
+  const gapFromReader = info.gap?.value
+
+  const flexDirection = element.specialSizeMeasurements.flexDirection ?? 'row'
+
   return {
-    value: cssNumberWithRenderedValue(gap, renderedValuePx),
-    direction: info.flexDirection?.value ?? 'row',
+    value: {
+      renderedValuePx: gap,
+      value: gapFromReader ?? null,
+    },
+    direction: flexDirection,
   }
 }