-
Notifications
You must be signed in to change notification settings - Fork 172
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Description This PR adds a basic convert-to-grid strategy, makes the flex <-> grid toggle work again, and turns the layout system + button into a menu-on-button where on can pick between grid or flex ### Details/breakdown - add the convert-to-grid strategy (and a remove grid strategy) - make the flex <-> grid toggle work again - add the menu-on-button to choose between grid and flex - add a shortcut that turns a layout into a grid - expose a prop on the radix-based dropdown to align the dropdown element relative to the opener - update tests --------- Co-authored-by: Federico Ruggi <[email protected]> Co-authored-by: McKayla Lankau <[email protected]> Co-authored-by: RheeseyB <[email protected]>
- Loading branch information
Showing
17 changed files
with
547 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
editor/src/components/common/shared-strategies/convert-strategies-common.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import type { ElementPath } from 'utopia-shared/src/types' | ||
| import { MetadataUtils } from '../../../core/model/element-metadata-utils' | ||
| import type { ElementPathTrees } from '../../../core/shared/element-path-tree' | ||
| import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template' | ||
| import { | ||
| isElementNonDOMElement, | ||
| replaceNonDOMElementPathsWithTheirChildrenRecursive, | ||
| } from '../../canvas/canvas-strategies/strategies/fragment-like-helpers' | ||
| import type { AllElementProps } from '../../editor/store/editor-state' | ||
|
|
||
| export type FlexDirectionRowColumn = 'row' | 'column' // a limited subset as we never guess row-reverse or column-reverse | ||
| export type FlexAlignItems = 'center' | 'flex-end' | ||
|
|
||
| export function getChildrenPathsForContainer( | ||
| metadata: ElementInstanceMetadataMap, | ||
| elementPathTree: ElementPathTrees, | ||
| path: ElementPath, | ||
| allElementProps: AllElementProps, | ||
| ) { | ||
| return MetadataUtils.getChildrenPathsOrdered(metadata, elementPathTree, path).flatMap((child) => | ||
| isElementNonDOMElement(metadata, allElementProps, elementPathTree, child) | ||
| ? replaceNonDOMElementPathsWithTheirChildrenRecursive( | ||
| metadata, | ||
| allElementProps, | ||
| elementPathTree, | ||
| [child], | ||
| ) | ||
| : child, | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
editor/src/components/common/shared-strategies/convert-to-grid-strategy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import type { ElementPath } from 'utopia-shared/src/types' | ||
| import type { ElementPathTrees } from '../../../core/shared/element-path-tree' | ||
| import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template' | ||
| import type { AllElementProps } from '../../editor/store/editor-state' | ||
| import type { CanvasCommand } from '../../canvas/commands/commands' | ||
| import { | ||
| flexContainerProps, | ||
| gridContainerProps, | ||
| nukeAllAbsolutePositioningPropsCommands, | ||
| prunePropsCommands, | ||
| sizeToVisualDimensions, | ||
| } from '../../inspector/inspector-common' | ||
| import { getChildrenPathsForContainer } from './convert-strategies-common' | ||
| import type { CanvasFrameAndTarget } from '../../canvas/canvas-types' | ||
| import { MetadataUtils } from '../../../core/model/element-metadata-utils' | ||
| import { setProperty } from '../../canvas/commands/set-property-command' | ||
| import * as PP from '../../../core/shared/property-path' | ||
|
|
||
| function guessLayoutInfoAlongAxis( | ||
| children: Array<CanvasFrameAndTarget>, | ||
| sortFn: (a: CanvasFrameAndTarget, b: CanvasFrameAndTarget) => number, | ||
| comesAfter: (a: CanvasFrameAndTarget, b: CanvasFrameAndTarget) => boolean, | ||
| gapBetween: (a: CanvasFrameAndTarget, b: CanvasFrameAndTarget) => number, | ||
| ): { nChildren: number; averageGap: number } { | ||
| if (children.length === 0) { | ||
| return { nChildren: 0, averageGap: 0 } | ||
| } | ||
|
|
||
| const sortedChildren = children.sort(sortFn) | ||
| let childrenAlongAxis = 1 | ||
| let gaps: number[] = [] | ||
| let currentChild = sortedChildren[0] | ||
| for (const child of sortedChildren.slice(1)) { | ||
| if (comesAfter(currentChild, child)) { | ||
| childrenAlongAxis += 1 | ||
| gaps.push(gapBetween(currentChild, child)) | ||
| currentChild = child | ||
| } | ||
| } | ||
|
|
||
| const averageGap = | ||
| gaps.length === 0 ? 0 : Math.floor(gaps.reduce((a, b) => a + b, 0) / gaps.length) | ||
|
|
||
| return { | ||
| nChildren: childrenAlongAxis, | ||
| averageGap: averageGap, | ||
| } | ||
| } | ||
|
|
||
| function guessMatchingGridSetup(children: Array<CanvasFrameAndTarget>): { | ||
| gap: number | ||
| numberOfColumns: number | ||
| numberOfRows: number | ||
| } { | ||
| const horizontalData = guessLayoutInfoAlongAxis( | ||
| children, | ||
| (a, b) => a.frame.x - b.frame.x, | ||
| (a, b) => a.frame.x + a.frame.width <= b.frame.x, | ||
| (a, b) => b.frame.x - (a.frame.x + a.frame.width), | ||
| ) | ||
| const verticalData = guessLayoutInfoAlongAxis( | ||
| children, | ||
| (a, b) => a.frame.y - b.frame.y, | ||
| (a, b) => a.frame.y + a.frame.height <= b.frame.y, | ||
| (a, b) => b.frame.y - (a.frame.y + a.frame.height), | ||
| ) | ||
|
|
||
| return { | ||
| gap: (horizontalData.averageGap + verticalData.averageGap) / 2, | ||
| numberOfColumns: horizontalData.nChildren, | ||
| numberOfRows: verticalData.nChildren, | ||
| } | ||
| } | ||
|
|
||
| export function convertLayoutToGridCommands( | ||
| metadata: ElementInstanceMetadataMap, | ||
| elementPathTree: ElementPathTrees, | ||
| elementPaths: Array<ElementPath>, | ||
| allElementProps: AllElementProps, | ||
| ): Array<CanvasCommand> { | ||
| return elementPaths.flatMap((elementPath) => { | ||
| const childrenPaths = getChildrenPathsForContainer( | ||
| metadata, | ||
| elementPathTree, | ||
| elementPath, | ||
| allElementProps, | ||
| ) | ||
| const childFrames: Array<CanvasFrameAndTarget> = childrenPaths.map((child) => ({ | ||
| target: child, | ||
| frame: MetadataUtils.getFrameOrZeroRectInCanvasCoords(child, metadata), | ||
| })) | ||
|
|
||
| const { gap, numberOfColumns, numberOfRows } = guessMatchingGridSetup(childFrames) | ||
|
|
||
| return [ | ||
| ...prunePropsCommands(flexContainerProps, elementPath), | ||
| ...prunePropsCommands(gridContainerProps, elementPath), | ||
| ...childrenPaths.flatMap((child) => [ | ||
| ...nukeAllAbsolutePositioningPropsCommands(child), | ||
| ...sizeToVisualDimensions(metadata, elementPathTree, child), | ||
| ]), | ||
| setProperty('always', elementPath, PP.create('style', 'display'), 'grid'), | ||
| setProperty('always', elementPath, PP.create('style', 'gap'), gap), | ||
| setProperty( | ||
| 'always', | ||
| elementPath, | ||
| PP.create('style', 'gridTemplateColumns'), | ||
| Array(numberOfColumns).fill('1fr').join(' '), | ||
| ), | ||
| setProperty( | ||
| 'always', | ||
| elementPath, | ||
| PP.create('style', 'gridTemplateRows'), | ||
| Array(numberOfRows).fill('1fr').join(' '), | ||
| ), | ||
| ] | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.