feat(grid): advanced grid controls (#6354)

This PR adds advanced grid controls: * add inspector modal for advanced controls * justify + Align items - as chain controls * justify + Align content - as dropdowns * adding the ability to unset by clicking on the same button <video src="https://github.com/user-attachments/assets/17fc9368-ad77-4802-9f50-faa0c798136a"></video> Reviewers: the main logic is in [`editor/src/components/inspector/controls/advanced-grid-modal.tsx`](https://github.com/concrete-utopia/utopia/pull/6354/files#diff-0c658c76e054ebe3b417768607e4f5b50552cef5825e33d0cf694a966a04bc36) **Manual Tests:** I hereby swear that: - [X] I opened a hydrogen project and it loaded - [X] I could navigate to various routes in Preview mode
concrete-utopia · Sep 16, 2024 · c7d1524 · c7d1524
1 parent 31d2174
commit c7d1524
Show file tree

Hide file tree

Showing 16 changed files with 520 additions and 136 deletions.
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
@@ -171,95 +171,116 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
 
   const allowedToEdit = useAllowedToEditProject()
 
+  const designPanelRef = React.useRef<HTMLDivElement>(null)
+
   if (!isRightMenuExpanded) {
     return null
   }
 
+  const panelWidth = designPanelRef.current?.offsetWidth ?? 0
+  const panelHeight = designPanelRef.current?.offsetHeight ?? 0
+
   return (
-    <FlexColumn
-      style={{
-        flex: 1,
-        overflow: 'hidden',
-        backgroundColor: colorTheme.inspectorBackground.value,
-        borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
-        boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
-      }}
-    >
-      <TitleBarUserProfile panelData={props.panelData} />
-      <FlexRow
+    <DesignPanelContext.Provider value={{ panelWidth, panelHeight }}>
+      <FlexColumn
+        ref={designPanelRef}
         style={{
-          marginBottom: 10,
-          gap: 2,
-          alignSelf: 'stretch',
-          flexShrink: 0,
-          overflowX: 'scroll',
+          flex: 1,
+          overflow: 'hidden',
+          backgroundColor: colorTheme.inspectorBackground.value,
+          borderRadius: UtopiaTheme.panelStyles.panelBorderRadius,
+          boxShadow: UtopiaStyles.shadowStyles.low.boxShadow,
         }}
-        css={undefined}
       >
-        <MenuTab
-          label={'Inspector'}
-          selected={selectedTab === RightMenuTab.Inspector}
-          onClick={onClickInspectorTab}
-        />
-        {when(
-          allowedToEdit,
-          <>
-            {when(
-              IS_TEST_ENVIRONMENT,
-              <MenuTab
-                label={'Insert'}
-                selected={selectedTab === RightMenuTab.Insert}
-                onClick={onClickInsertTab}
-              />,
-            )}
-          </>,
-        )}
-        {when(
-          canComment,
+        <TitleBarUserProfile panelData={props.panelData} />
+        <FlexRow
+          style={{
+            marginBottom: 10,
+            gap: 2,
+            alignSelf: 'stretch',
+            flexShrink: 0,
+            overflowX: 'scroll',
+          }}
+          css={undefined}
+        >
           <MenuTab
-            testId='comments-tab'
-            label={'Comments'}
-            selected={selectedTab === RightMenuTab.Comments}
-            onClick={onClickCommentsTab}
-          />,
-        )}
-        <MenuTab
-          label={'Settings'}
-          selected={selectedTab === RightMenuTab.Settings}
-          onClick={onClickSettingsTab}
-        />
-        {when(
-          isFeatureEnabled('Roll Your Own'),
+            label={'Inspector'}
+            selected={selectedTab === RightMenuTab.Inspector}
+            onClick={onClickInspectorTab}
+          />
+          {when(
+            allowedToEdit,
+            <>
+              {when(
+                IS_TEST_ENVIRONMENT,
+                <MenuTab
+                  label={'Insert'}
+                  selected={selectedTab === RightMenuTab.Insert}
+                  onClick={onClickInsertTab}
+                />,
+              )}
+            </>,
+          )}
+          {when(
+            canComment,
+            <MenuTab
+              testId='comments-tab'
+              label={'Comments'}
+              selected={selectedTab === RightMenuTab.Comments}
+              onClick={onClickCommentsTab}
+            />,
+          )}
           <MenuTab
-            label={'RYO'}
-            selected={selectedTab === RightMenuTab.RollYourOwn}
-            onClick={onClickRollYourOwnTab}
-          />,
-        )}
-      </FlexRow>
-      <SimpleFlexRow
-        className='Inspector-entrypoint'
-        id='inspector-root'
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          position: 'relative',
-          color: colorTheme.fg1.value,
-          overflowY: 'scroll',
-          backgroundColor: colorTheme.inspectorBackground.value,
-        }}
-      >
-        {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
-        {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
-        {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
-        {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
-      </SimpleFlexRow>
-      <CanvasStrategyInspector />
-    </FlexColumn>
+            label={'Settings'}
+            selected={selectedTab === RightMenuTab.Settings}
+            onClick={onClickSettingsTab}
+          />
+          {when(
+            isFeatureEnabled('Roll Your Own'),
+            <MenuTab
+              label={'RYO'}
+              selected={selectedTab === RightMenuTab.RollYourOwn}
+              onClick={onClickRollYourOwnTab}
+            />,
+          )}
+        </FlexRow>
+        <SimpleFlexRow
+          className='Inspector-entrypoint'
+          id='inspector-root'
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 1,
+            position: 'relative',
+            color: colorTheme.fg1.value,
+            overflowY: 'scroll',
+            backgroundColor: colorTheme.inspectorBackground.value,
+          }}
+        >
+          {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
+          {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
+          {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
+          {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
+        </SimpleFlexRow>
+        <CanvasStrategyInspector />
+      </FlexColumn>
+    </DesignPanelContext.Provider>
   )
 })
 
+// a context provider for the design panel measurements
+export const DesignPanelContext = React.createContext<{
+  panelWidth: number
+  panelHeight: number
+}>({
+  panelWidth: 0,
+  panelHeight: 0,
+})
+
+export const useDesignPanelContext = () => {
+  return React.useContext(DesignPanelContext)
+}
+
 interface CodeEditorPaneProps {
   panelData: StoredPanel
   small: boolean

diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts
@@ -681,7 +681,7 @@ function getSpecialMeasurements(
   const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null))
 
   const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
-  const alignContent = getFlexAlignment(elementStyle.alignContent)
+  const alignContent = getFlexJustifyContent(elementStyle.alignContent)
   const alignItems = getFlexAlignment(elementStyle.alignItems)
 
   const margin = applicative4Either(

diff --git a/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts b/editor/src/components/editor/store/store-deep-equality-instances-3.spec.ts
@@ -265,7 +265,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     gap: 11,
     flexDirection: 'column',
     justifyContent: 'center',
-    alignContent: 'auto',
+    alignContent: null,
     alignItems: 'auto',
     htmlElementName: 'div',
     renderedChildrenCount: 10,
@@ -384,7 +384,7 @@ describe('SpecialSizeMeasurementsKeepDeepEquality', () => {
     gap: 11,
     flexDirection: 'column',
     justifyContent: 'center',
-    alignContent: 'auto',
+    alignContent: null,
     alignItems: 'auto',
     htmlElementName: 'div',
     renderedChildrenCount: 10,
@@ -558,7 +558,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       gap: 11,
       flexDirection: 'column',
       justifyContent: 'center',
-      alignContent: 'auto',
+      alignContent: null,
       alignItems: 'auto',
       htmlElementName: 'div',
       renderedChildrenCount: 10,
@@ -709,7 +709,7 @@ describe('ElementInstanceMetadataKeepDeepEquality', () => {
       gap: 11,
       flexDirection: 'column',
       justifyContent: 'center',
-      alignContent: 'auto',
+      alignContent: null,
       alignItems: 'auto',
       htmlElementName: 'div',
       renderedChildrenCount: 10,
@@ -885,7 +885,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
-        alignContent: 'auto',
+        alignContent: null,
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
@@ -1038,7 +1038,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
-        alignContent: 'auto',
+        alignContent: null,
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,
@@ -1191,7 +1191,7 @@ describe('ElementInstanceMetadataMapKeepDeepEquality', () => {
         gap: 11,
         flexDirection: 'column',
         justifyContent: 'center',
-        alignContent: 'auto',
+        alignContent: null,
         alignItems: 'auto',
         htmlElementName: 'div',
         renderedChildrenCount: 10,