Remove findElementAtPath usages (#4345)

* Remove unused functions

* Replace findElementAtPath with getElementFromProjectContents in clipboard.ts

* getElementFromProjectContents is not a good name

* More fixes

* Remove unused code

* Remove editorMoveTemplate calls

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx

@@ -14,7 +14,7 @@ import {
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import type { AllElementProps } from '../../../editor/store/editor-state'
 import {
-  getElementFromProjectContents,
+  getJSXElementFromProjectContents,
   trueUpElementChanged,
 } from '../../../editor/store/editor-state'
 import { getSafeGroupChildConstraintsArray } from '../../../inspector/fill-hug-fixed-control'
@@ -166,7 +166,7 @@ export function absoluteResizeBoundingBoxStrategy(
             )
 
             const commandsForSelectedElements = retargetedTargets.flatMap((selectedElement) => {
-              const element = getElementFromProjectContents(
+              const element = getJSXElementFromProjectContents(
                 selectedElement,
                 canvasState.projectContents,
               )

editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx

@@ -38,7 +38,7 @@ import {
 } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import { fastForEach } from '../../../../core/shared/utils'
-import { getElementFromProjectContents } from '../../../editor/store/editor-state'
+import { getJSXElementFromProjectContents } from '../../../editor/store/editor-state'
 import type { FullFrame } from '../../../frame'
 import { getFullFrame } from '../../../frame'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
@@ -438,7 +438,7 @@ function filterPinsToSet(
   path: ElementPath,
   canvasState: InteractionCanvasState,
 ): Array<LayoutPinnedProp> {
-  const element = getElementFromProjectContents(path, canvasState.projectContents)
+  const element = getJSXElementFromProjectContents(path, canvasState.projectContents)
   if (element == null) {
     return ['top', 'left', 'width', 'height']
   } else {

editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts

@@ -23,7 +23,7 @@ import type { ElementPath, PropertyPath } from '../../../../../core/shared/proje
 import * as PP from '../../../../../core/shared/property-path'
 import type { ProjectContentTreeRoot } from '../../../../assets'
 import type { AllElementProps } from '../../../../editor/store/editor-state'
-import { getElementFromProjectContents } from '../../../../editor/store/editor-state'
+import { getJSXElementFromProjectContents } from '../../../../editor/store/editor-state'
 import type { CSSPosition, Direction } from '../../../../inspector/common/css-utils'
 import { cssNumber } from '../../../../inspector/common/css-utils'
 import { stylePropPathMappingFn } from '../../../../inspector/common/property-path-hooks'
@@ -78,7 +78,7 @@ export function getAbsoluteReparentPropertyChanges(
   newParentStartingMetadata: ElementInstanceMetadataMap,
   projectContents: ProjectContentTreeRoot,
 ): Array<AdjustCssLengthProperties | ConvertCssPercentToPx> {
-  const element: JSXElement | null = getElementFromProjectContents(target, projectContents)
+  const element: JSXElement | null = getJSXElementFromProjectContents(target, projectContents)
 
   const originalParentInstance = MetadataUtils.findElementByElementPath(
     targetStartingMetadata,

editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts

@@ -26,7 +26,7 @@ import {
 } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 
-import { getElementFromProjectContents } from '../../../editor/store/editor-state'
+import { getJSXElementFromProjectContents } from '../../../editor/store/editor-state'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import { determineConstrainedDragAxis } from '../../canvas-controls-frame'
 import type { CanvasFrameAndTarget } from '../../canvas-types'
@@ -177,7 +177,10 @@ export function getMoveCommandsForSelectedElement(
   commands: Array<AdjustCssLengthProperties>
   intendedBounds: Array<CanvasFrameAndTarget>
 } {
-  const element: JSXElement | null = getElementFromProjectContents(selectedElement, projectContents)
+  const element: JSXElement | null = getJSXElementFromProjectContents(
+    selectedElement,
+    projectContents,
+  )
 
   const elementMetadata = MetadataUtils.findElementByElementPath(
     startingMetadata, // TODO should this be using the current metadata?

editor/src/components/canvas/canvas-utils.ts

@@ -15,7 +15,6 @@ import {
 import {
   findElementAtPath,
   findJSXElementAtPath,
-  findJSXElementLikeAtPath,
   getSimpleAttributeAtPath,
   MetadataUtils,
 } from '../../core/model/element-metadata-utils'
@@ -104,6 +103,8 @@ import {
   withUnderlyingTargetFromEditorState,
   modifyUnderlyingElementForOpenFile,
   isSyntheticNavigatorEntry,
+  getElementFromProjectContents,
+  getJSXElementFromProjectContents,
 } from '../editor/store/editor-state'
 import * as Frame from '../frame'
 import { getImageSizeFromMetadata, MultipliersForImages, scaleImageDimensions } from '../images'
@@ -1851,9 +1852,9 @@ export function reorderComponent(
 ): Array<UtopiaJSXComponent> {
   let workingComponents = [...components]
 
-  const jsxElement = findElementAtPath(target, workingComponents)
+  const jsxElement = getElementFromProjectContents(target, projectContents)
   const parentPath = EP.parentPath(target)
-  const parentElement = findJSXElementLikeAtPath(parentPath, workingComponents)
+  const parentElement = getJSXElementFromProjectContents(parentPath, projectContents)
 
   if (jsxElement != null && parentElement != null) {
     const indexOfRemovedElement = parentElement.children.indexOf(jsxElement)

editor/src/components/editor/actions/actions.tsx

@@ -154,12 +154,12 @@ import {
 } from '../../assets'
 import type { CanvasFrameAndTarget, PinOrFlexFrameChange } from '../../canvas/canvas-types'
 import { pinSizeChange } from '../../canvas/canvas-types'
+import type { SkipFrameChange } from '../../canvas/canvas-utils'
 import {
   canvasPanelOffsets,
   duplicate,
   getFrameChange,
   moveTemplate,
-  SkipFrameChange,
   updateFramesOfScenesAndComponents,
 } from '../../canvas/canvas-utils'
 import type { ResizeLeftPane, SetFocus } from '../../common/actions'
@@ -1017,17 +1017,10 @@ function setZIndexOnSelected(
     }
 
     const indexPosition = indexPositionForAdjustment(selectedView, working, index)
-    return editorMoveTemplate(
-      selectedView,
-      selectedView,
-      SkipFrameChange,
-      indexPosition,
-      EP.parentPath(selectedView),
-      null,
-      editor,
-      null,
-      null,
-    ).editor
+
+    const reorderElementCommand = reorderElement('always', selectedView, indexPosition)
+
+    return foldAndApplyCommandsSimple(working, [reorderElementCommand])
   }, editor)
 }
 
@@ -1569,17 +1562,9 @@ export const UPDATE_FNS = {
     return setCanvasFramesInnerNew(editor, action.framesAndTargets, null)
   },
   SET_Z_INDEX: (action: SetZIndex, editor: EditorModel): EditorModel => {
-    return editorMoveTemplate(
-      action.target,
-      action.target,
-      SkipFrameChange,
-      action.indexPosition,
-      EP.parentPath(action.target),
-      null,
-      editor,
-      null,
-      null,
-    ).editor
+    return foldAndApplyCommandsSimple(editor, [
+      reorderElement('always', action.target, action.indexPosition),
+    ])
   },
   DELETE_SELECTED: (editorForAction: EditorModel, dispatch: EditorDispatch): EditorModel => {
     // This function returns whether the given path will have the following deletion behavior:

editor/src/components/editor/store/editor-state.ts

@@ -3462,7 +3462,7 @@ export function forUnderlyingTargetFromEditorState(
   withUnderlyingTargetFromEditorState<any>(target, editor, {}, withTarget)
 }
 
-export function getElementFromProjectContents(
+export function getJSXElementFromProjectContents(
   target: ElementPath | null,
   projectContents: ProjectContentTreeRoot,
 ): JSXElement | null {
@@ -3475,6 +3475,13 @@ export function getElementFromProjectContents(
   })
 }
 
+export function getElementFromProjectContents(
+  target: ElementPath | null,
+  projectContents: ProjectContentTreeRoot,
+): JSXElementChild | null {
+  return withUnderlyingTarget(target, projectContents, null, (_, element) => element)
+}
+
 export function getCurrentTheme(userConfiguration: ThemeSubstate['userState']): Theme {
   const currentTheme = userConfiguration.themeConfig ?? DefaultTheme
   if (currentTheme === 'system') {

editor/src/components/inspector/common/property-path-hooks.ts

@@ -41,32 +41,14 @@ import {
   isLayoutPropDetectedInCSS,
   maybePrintCSSValue,
   parseAnyParseableValue,
-  ParsedCSSPropertiesKeysNoLayout,
   printCSSValue,
-  cssNumber,
   isTrivialDefaultValue,
-  CSSNumber,
 } from '../../../components/inspector/common/css-utils'
 import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
-import { findElementAtPath, MetadataUtils } from '../../../core/model/element-metadata-utils'
-import {
-  getFilePathForImportedComponent,
-  getUtopiaJSXComponentsFromSuccess,
-  isHTMLComponent,
-  isUtopiaAPIComponent,
-} from '../../../core/model/project-file-utils'
-import { addUniquely, mapDropNulls, stripNulls } from '../../../core/shared/array-utils'
+import { isHTMLComponent, isUtopiaAPIComponent } from '../../../core/model/project-file-utils'
+import { stripNulls } from '../../../core/shared/array-utils'
 import type { Either } from '../../../core/shared/either'
-import {
-  defaultEither,
-  eitherToMaybe,
-  flatMapEither,
-  foldEither,
-  isRight,
-  left,
-  mapEither,
-  unwrapEither,
-} from '../../../core/shared/either'
+import { eitherToMaybe, flatMapEither, isRight, left } from '../../../core/shared/either'
 import type {
   JSXAttributes,
   ComputedStyle,
@@ -75,11 +57,8 @@ import type {
 } from '../../../core/shared/element-template'
 import {
   getJSXElementNameLastPart,
-  getJSXElementNameNoPathName,
   isJSXElement,
-  UtopiaJSXComponent,
   getJSXAttribute,
-  JSExpression,
   isRegularJSXAttribute,
   clearExpressionUniqueIDs,
 } from '../../../core/shared/element-template'
@@ -92,31 +71,24 @@ import {
   getModifiableJSXAttributeAtPath,
   jsxSimpleAttributeToValue,
 } from '../../../core/shared/jsx-attributes'
-import { forEachOptional, optionalMap } from '../../../core/shared/optional-utils'
+import { optionalMap } from '../../../core/shared/optional-utils'
 import type {
   PropertyPath,
   ElementPath,
   PropertyPathPart,
 } from '../../../core/shared/project-file-types'
 
-import { fastForEach } from '../../../core/shared/utils'
-import { KeepDeepEqualityCall } from '../../../utils/deep-equality'
 import {
-  keepDeepReferenceEqualityIfPossible,
   useKeepReferenceEqualityIfPossible,
   useKeepShallowReferenceEquality,
 } from '../../../utils/react-performance'
 import { default as Utils } from '../../../utils/utils'
-import { descriptionParseError, ParseResult } from '../../../utils/value-parser-utils'
 import type { ReadonlyRef } from './inspector-utils'
 import type { MapLike } from 'typescript'
 import { omitWithPredicate } from '../../../core/shared/object-utils'
 import { UtopiaKeys } from '../../../core/model/utopia-constants'
-import fastDeepEquals from 'fast-deep-equal'
-import { getPropertyControlNames } from '../../../core/property-controls/property-control-values'
 import type { EditorAction } from '../../editor/action-types'
 import { useDispatch } from '../../editor/store/dispatch-context'
-import { Optic } from '../../../core/shared/optics/optics'
 import { eitherRight, fromTypeGuard } from '../../../core/shared/optics/optic-creators'
 import { modify } from '../../../core/shared/optics/optic-utilities'
 

editor/src/components/inspector/inspector.tsx

@@ -26,9 +26,9 @@ import {
 
 import type { ElementsToRerender } from '../editor/store/editor-state'
 import {
-  getElementFromProjectContents,
   getJSXComponentsAndImportsForPathFromState,
   isOpenFileUiJs,
+  getElementFromProjectContents,
 } from '../editor/store/editor-state'
 import { Substores, useEditorState, useRefEditorState } from '../editor/store/store-hook'
 import {

editor/src/core/model/element-metadata-utils.ts

@@ -1634,30 +1634,6 @@ export const MetadataUtils = {
       return null
     }
   },
-  getJSXElementBaseName(path: ElementPath, components: Array<UtopiaJSXComponent>): string | null {
-    const jsxElement = findElementAtPath(path, components)
-    if (jsxElement != null) {
-      if (isJSXElement(jsxElement)) {
-        return jsxElement.name.baseVariable
-      } else {
-        return null
-      }
-    } else {
-      return null
-    }
-  },
-  getJSXElementTagName(path: ElementPath, components: Array<UtopiaJSXComponent>): string | null {
-    const jsxElement = findElementAtPath(path, components)
-    if (jsxElement != null) {
-      if (isJSXElement(jsxElement)) {
-        return getJSXElementNameAsString(jsxElement.name)
-      } else {
-        return null
-      }
-    } else {
-      return null
-    }
-  },
   getDuplicationParentTargets(targets: ElementPath[]): ElementPath | null {
     return EP.getCommonParent(targets)
   },
@@ -2659,20 +2635,6 @@ export function findJSXElementAtPath(
   }, elem)
 }
 
-export function findJSXElementLikeAtPath(
-  target: ElementPath | null,
-  components: Array<UtopiaJSXComponent>,
-): JSXElementLike | null {
-  const elem = findElementAtPath(target, components)
-  return Utils.optionalMap((e) => {
-    if (isJSXElementLike(e)) {
-      return e
-    } else {
-      return null
-    }
-  }, elem)
-}
-
 export function getScenePropsOrElementAttributes(
   target: ElementPath,
   metadata: ElementInstanceMetadataMap,