more expressive styleinfo

concrete-utopia · Oct 24, 2024 · 9e734d2 · 9e734d2
1 parent c4748e7
commit 9e734d2
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 49 deletions.
diff --git a/editor/src/components/canvas/canvas-types.ts b/editor/src/components/canvas/canvas-types.ts
@@ -537,27 +537,34 @@ export type SelectionLocked = 'locked' | 'locked-hierarchy' | 'selectable'
 
 export type PropertyTag = { type: 'hover' } | { type: 'breakpoint'; name: string }
 
-export interface WithPropertyTag<T> {
-  tag: PropertyTag | null
-  value: T
-}
-
-export const withPropertyTag = <T>(value: T): WithPropertyTag<T> => ({
-  tag: null,
-  value: value,
-})
-
-export type FlexGapInfo = WithPropertyTag<CSSNumber>
-
-export type FlexDirectionInfo = WithPropertyTag<FlexDirection>
-export type PaddingInfo = WithPropertyTag<CSSPadding>
-export type PaddingSideInfo = WithPropertyTag<CSSNumber>
-export type WidthInfo = WithPropertyTag<CSSNumber>
-export type HeightInfo = WithPropertyTag<CSSNumber>
-export type TopInfo = WithPropertyTag<CSSNumber>
-export type LeftInfo = WithPropertyTag<CSSNumber>
-export type RightInfo = WithPropertyTag<CSSNumber>
-export type BottomInfo = WithPropertyTag<CSSNumber>
+export type CSSStyleProperty<T> =
+  | { type: 'not-found' }
+  | { type: 'not-editable' }
+  | {
+      type: 'property'
+
+      tag: PropertyTag | null
+      value: T
+    }
+
+export function maybePropertyValue<T>(property: CSSStyleProperty<T>): T | null {
+  if (property.type === 'property') {
+    return property.value
+  }
+  return null
+}
+
+export type FlexGapInfo = CSSStyleProperty<CSSNumber>
+
+export type FlexDirectionInfo = CSSStyleProperty<FlexDirection>
+export type PaddingInfo = CSSStyleProperty<CSSPadding>
+export type PaddingSideInfo = CSSStyleProperty<CSSNumber>
+export type WidthInfo = CSSStyleProperty<CSSNumber>
+export type HeightInfo = CSSStyleProperty<CSSNumber>
+export type TopInfo = CSSStyleProperty<CSSNumber>
+export type LeftInfo = CSSStyleProperty<CSSNumber>
+export type RightInfo = CSSStyleProperty<CSSNumber>
+export type BottomInfo = CSSStyleProperty<CSSNumber>
 
 export interface StyleInfo {
   gap: FlexGapInfo | null

diff --git a/editor/src/components/canvas/gap-utils.ts b/editor/src/components/canvas/gap-utils.ts
@@ -17,7 +17,7 @@ import { canvasRectangle, isInfinityRectangle } from '../../core/shared/math-uti
 import type { ElementPath } from '../../core/shared/project-file-types'
 import { assertNever } from '../../core/shared/utils'
 import type { StyleInfo } from './canvas-types'
-import { CSSCursor } from './canvas-types'
+import { CSSCursor, maybePropertyValue } from './canvas-types'
 import type { CSSNumberWithRenderedValue } from './controls/select-mode/controls-common'
 import type { CSSNumber, FlexDirection } from '../inspector/common/css-utils'
 import type { Sides } from 'utopia-api/core'
@@ -34,6 +34,7 @@ import { treatElementAsFragmentLike } from './canvas-strategies/strategies/fragm
 import type { AllElementProps } from '../editor/store/editor-state'
 import type { GridData } from './controls/grid-controls-for-strategies'
 import { getNullableAutoOrTemplateBaseString } from './controls/grid-controls-for-strategies'
+import { optionalMap } from '../../core/shared/optional-utils'
 
 export interface PathWithBounds {
   bounds: CanvasRectangle
@@ -238,7 +239,7 @@ export function maybeFlexGapData(
   }
 
   const gap = element.specialSizeMeasurements.gap ?? 0
-  const gapFromReader = info.gap?.value
+  const gapFromReader = optionalMap(maybePropertyValue, info.gap)
 
   const flexDirection = element.specialSizeMeasurements.flexDirection ?? 'row'
 

diff --git a/editor/src/components/canvas/padding-utils.tsx b/editor/src/components/canvas/padding-utils.tsx
@@ -14,7 +14,7 @@ import type { ElementPath } from '../../core/shared/project-file-types'
 import { assertNever } from '../../core/shared/utils'
 import type { CSSNumber, CSSNumberUnit, CSSPadding } from '../inspector/common/css-utils'
 import { printCSSNumber } from '../inspector/common/css-utils'
-import type { EdgePiece, StyleInfo } from './canvas-types'
+import { maybePropertyValue, type EdgePiece, type StyleInfo } from './canvas-types'
 import type {
   AdjustPrecision,
   CSSNumberWithRenderedValue,
@@ -75,13 +75,13 @@ export function simplePaddingFromStyleInfo(
 
   const paddingNumbers = paddingFromSpecialSizeMeasurements(metadata, elementPath)
 
-  const padding: CSSPadding | undefined = styleInfo?.padding?.value
+  const padding = optionalMap(maybePropertyValue, styleInfo?.padding)
 
-  const paddingLonghands: CSSPaddingMappedValues<CSSNumber | undefined> = {
-    paddingTop: styleInfo?.paddingTop?.value,
-    paddingBottom: styleInfo?.paddingBottom?.value,
-    paddingLeft: styleInfo?.paddingLeft?.value,
-    paddingRight: styleInfo?.paddingRight?.value,
+  const paddingLonghands: CSSPaddingMappedValues<CSSNumber | null> = {
+    paddingTop: optionalMap(maybePropertyValue, styleInfo?.paddingTop),
+    paddingBottom: optionalMap(maybePropertyValue, styleInfo?.paddingBottom),
+    paddingLeft: optionalMap(maybePropertyValue, styleInfo?.paddingLeft),
+    paddingRight: optionalMap(maybePropertyValue, styleInfo?.paddingRight),
   }
 
   const make = (prop: CSSPaddingKey): CSSNumberWithRenderedValue | undefined => {

diff --git a/editor/src/components/canvas/plugins/inline-style-plugin.ts b/editor/src/components/canvas/plugins/inline-style-plugin.ts
@@ -1,6 +1,5 @@
-import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
-import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { getSimpleAttributeAtPath, MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import * as Either from '../../../core/shared/either'
 import type { JSXElement } from '../../../core/shared/element-template'
@@ -9,25 +8,30 @@ import {
   isJSXElement,
   jsExpressionValue,
 } from '../../../core/shared/element-template'
-import { optionalMap } from '../../../core/shared/optional-utils'
 import * as PP from '../../../core/shared/property-path'
-import { styleStringInArray } from '../../../utils/common-constants'
-import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
-import { withPropertyTag, type WithPropertyTag } from '../canvas-types'
+import { cssParsers, type ParsedCSSProperties } from '../../inspector/common/css-utils'
+import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
+import type { CSSStyleProperty } from '../canvas-types'
 import { applyValuesAtPath, deleteValuesAtPath } from '../commands/utils/property-utils'
 import type { StylePlugin } from './style-plugins'
 
 function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSProperties[P]>(
   prop: P,
   element: JSXElement,
-): WithPropertyTag<NonNullable<T>> | null {
-  return optionalMap(
-    withPropertyTag,
-    Either.defaultEither(
-      null,
-      getLayoutProperty(prop, Either.right(element.props), styleStringInArray),
-    ),
-  ) as WithPropertyTag<NonNullable<T>> | null
+): CSSStyleProperty<NonNullable<T>> | null {
+  const attribute = getSimpleAttributeAtPath(
+    Either.right(element.props),
+    stylePropPathMappingFn(prop, ['style']),
+  )
+  if (Either.isLeft(attribute) || attribute.value == null) {
+    return { type: 'not-found' }
+  }
+  const parser = cssParsers[prop] as (value: unknown) => Either.Either<string, T>
+  const parsed = parser(attribute.value)
+  if (Either.isLeft(parsed) || parsed.value == null) {
+    return { type: 'not-editable' }
+  }
+  return { type: 'property', tag: null, value: parsed.value }
 }
 
 export const InlineStylePlugin: StylePlugin = {

diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -9,8 +9,7 @@ import { mapDropNulls } from '../../../core/shared/array-utils'
 import { updateClassListCommand } from './../commands/update-class-list-command'
 import * as UCL from './../commands/update-class-list-command'
 import type { StylePlugin } from './style-plugins'
-import type { WithPropertyTag } from '../canvas-types'
-import { withPropertyTag } from '../canvas-types'
+import type { CSSStyleProperty } from '../canvas-types'
 import type { Config } from 'tailwindcss/types/config'
 import { emptyComments } from 'utopia-shared/src/types'
 import { jsExpressionValue } from '../../../core/shared/element-template'
@@ -29,12 +28,12 @@ import * as PP from '../../../core/shared/property-path'
 function parseTailwindProperty<T>(
   value: unknown,
   parse: Parser<T>,
-): WithPropertyTag<NonNullable<T>> | null {
+): CSSStyleProperty<NonNullable<T>> | null {
   const parsed = parse(value, null)
   if (isLeft(parsed) || parsed.value == null) {
-    return null
+    return { type: 'not-found' }
   }
-  return withPropertyTag(parsed.value)
+  return { type: 'property', tag: null, value: parsed.value }
 }
 
 const TailwindPropertyMapping: Record<string, string> = {