insert menu grid

concrete-utopia · Oct 10, 2024 · cbc4531 · cbc4531
1 parent 9311c22
commit cbc4531
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 0 deletions.
diff --git a/editor/src/components/editor/canvas-toolbar-states.tsx b/editor/src/components/editor/canvas-toolbar-states.tsx
@@ -8,6 +8,9 @@ import type { Optic } from '../../core/shared/optics/optics'
 import { fromField, fromTypeGuard } from '../../core/shared/optics/optic-creators'
 import { anyBy, set } from '../../core/shared/optics/optic-utilities'
 import type { EditorAction } from './action-types'
+import { MetadataUtils } from '../../core/model/element-metadata-utils'
+import { getJSXAttributesAtPath } from '../../core/shared/jsx-attribute-utils'
+import { create } from '../../core/shared/property-path'
 
 // This is the data structure that governs the Canvas Toolbar's submenus and active buttons
 type ToolbarMode =
@@ -21,6 +24,7 @@ type ToolbarMode =
         imageInsertionActive: boolean
         buttonInsertionActive: boolean
         conditionalInsertionActive: boolean
+        gridInsertionActive: boolean
         insertSidebarOpen: boolean
       }
     }
@@ -110,6 +114,28 @@ export function useToolbarMode(): ToolbarMode {
     const insertionTargetConditional =
       editorMode.type === 'insert' &&
       editorMode.subjects.some((subject) => subject.insertionSubjectWrapper === 'conditional')
+    const insertionTargetGrid =
+      editorMode.type === 'insert' &&
+      editorMode.subjects.some((subject) => {
+        if (subject.element.name.baseVariable !== 'div') {
+          return false
+        }
+
+        const style = subject.element.props.find(
+          (p) => p.type === 'JSX_ATTRIBUTES_ENTRY' && p.key === 'style',
+        )
+        if (style == null) {
+          return false
+        }
+
+        const display = getJSXAttributesAtPath(subject.element.props, create('style', 'display'))
+        return (
+          style.type === 'JSX_ATTRIBUTES_ENTRY' &&
+          style.value.type === 'ATTRIBUTE_VALUE' &&
+          display.attribute.type === 'PART_OF_ATTRIBUTE_VALUE' &&
+          display.attribute.value === 'grid'
+        )
+      })
 
     return {
       primary: 'insert',
@@ -119,6 +145,7 @@ export function useToolbarMode(): ToolbarMode {
         imageInsertionActive: insertionTargetImage,
         buttonInsertionActive: insertionTargetButton,
         conditionalInsertionActive: insertionTargetConditional,
+        gridInsertionActive: insertionTargetGrid,
         insertSidebarOpen: rightMenuTab === RightMenuTab.Insert,
       },
     }

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -28,6 +28,7 @@ import {
   useEnterDrawToInsertForButton,
   useEnterDrawToInsertForConditional,
   useEnterDrawToInsertForDiv,
+  useEnterDrawToInsertForGrid,
   useEnterDrawToInsertForImage,
   useEnterTextEditMode,
 } from './insert-callbacks'
@@ -79,6 +80,7 @@ export const InsertOrEditTextButtonTestId = 'insert-or-edit-text-button'
 export const PlayModeButtonTestId = 'canvas-toolbar-play-mode'
 export const CommentModeButtonTestId = (status: string) => `canvas-toolbar-comment-mode-${status}`
 export const InsertConditionalButtonTestId = 'insert-mode-conditional'
+export const InsertGridButtonTestId = 'insert-mode-grid'
 export const CanvasToolbarId = 'canvas-toolbar'
 
 export const CanvasToolbarSearchPortalId = 'canvas-toolbar-search-portal'
@@ -220,6 +222,7 @@ export const CanvasToolbar = React.memo(() => {
   const insertTextCallback = useEnterTextEditMode()
   const insertButtonCallback = useEnterDrawToInsertForButton()
   const insertConditionalCallback = useEnterDrawToInsertForConditional()
+  const insertGridCallback = useEnterDrawToInsertForGrid()
 
   // Back to select mode, close the "floating" menu and turn off the forced insert mode.
   const dispatchSwitchToSelectModeCloseMenus = React.useCallback(() => {
@@ -548,6 +551,15 @@ export const CanvasToolbar = React.memo(() => {
                     onClick={insertDivCallback}
                   />
                 </Tooltip>
+                <Tooltip title='Insert grid' placement='bottom'>
+                  <ToolbarButton
+                    testid={InsertGridButtonTestId}
+                    iconCategory='navigator-element'
+                    iconType='grid'
+                    onClick={insertGridCallback}
+                    size={12}
+                  />
+                </Tooltip>
                 <Tooltip title='Insert image' placement='bottom'>
                   <ToolbarButton
                     iconType='image'

diff --git a/editor/src/components/editor/defaults.ts b/editor/src/components/editor/defaults.ts
@@ -171,6 +171,28 @@ export function defaultButtonElement(uid: string): JSXElement {
   )
 }
 
+export function defaultGridElement(uid: string): JSXElement {
+  return jsxElement(
+    jsxElementName('div', []),
+    uid,
+    jsxAttributesFromMap({
+      'data-uid': jsExpressionValue(uid, emptyComments),
+      style: jsExpressionValue(
+        {
+          position: 'absolute',
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gap: 10,
+          padding: 10,
+        },
+        emptyComments,
+      ),
+    }),
+    [],
+  )
+}
+
 export function defaultFlexRowOrColStyle(): JSExpression {
   return jsExpressionValue(
     {

diff --git a/editor/src/components/editor/insert-callbacks.ts b/editor/src/components/editor/insert-callbacks.ts
@@ -23,6 +23,7 @@ import { enableInsertModeForJSXElement, showToast } from './actions/action-creat
 import {
   defaultButtonElement,
   defaultDivElement,
+  defaultGridElement,
   defaultImgElement,
   defaultSpanElement,
 } from './defaults'
@@ -106,6 +107,10 @@ export function useEnterDrawToInsertForButton(): (event: React.MouseEvent<Elemen
   return useEnterDrawToInsertForElement(defaultButtonElement)
 }
 
+export function useEnterDrawToInsertForGrid(): (event: React.MouseEvent<Element>) => void {
+  return useEnterDrawToInsertForElement(defaultGridElement)
+}
+
 export function useEnterDrawToInsertForConditional(): (event: React.MouseEvent<Element>) => void {
   const conditionalInsertCallback = useEnterDrawToInsertForElement(defaultDivElement)