122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
import React from 'react'
|
|
import { useRender } from 'src/components/IdeWrapper/useRender'
|
|
import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
|
|
import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
|
|
import { DropdownItem } from './Dropdowns'
|
|
import { useShortcutsModalContext } from './AllShortcutsModal'
|
|
import type { State } from 'src/helpers/hooks/useIdeState'
|
|
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
|
|
|
|
export function cmdOrCtrl() {
|
|
return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
|
|
}
|
|
|
|
const fileMenuConfig: EditorMenuConfig = {
|
|
name: 'file',
|
|
label: 'File',
|
|
disabled: false,
|
|
items: [
|
|
{
|
|
label: 'Save & Render',
|
|
shortcut: 'ctrl+s, command+s',
|
|
shortcutLabel: cmdOrCtrl() + ' S',
|
|
Component: (props) => {
|
|
const { state, config } = props
|
|
const handleRender = useRender()
|
|
const saveCode = useSaveCode()
|
|
function onRender(e) {
|
|
e.preventDefault()
|
|
handleRender()
|
|
saveCode({ code: state.code })
|
|
}
|
|
|
|
config.callback = onRender
|
|
|
|
return <DropdownItem {...props} />
|
|
},
|
|
},
|
|
{
|
|
label: 'Download STL',
|
|
shortcut: 'ctrl+shift+d, command+shift+d',
|
|
shortcutLabel: cmdOrCtrl() + ' Shift D',
|
|
Component: (props) => {
|
|
const { state, thunkDispatch, config } = props
|
|
const { project } = useIdeContext()
|
|
const handleStlDownload = makeStlDownloadHandler({
|
|
type: state.objectData?.type,
|
|
ideType: state.ideType,
|
|
geometry: state.objectData?.data,
|
|
quality: state.objectData?.quality,
|
|
fileName: project
|
|
? `${project.title}.stl`
|
|
: PullTitleFromFirstLine(state.code || ''),
|
|
thunkDispatch,
|
|
})
|
|
|
|
config.callback = handleStlDownload
|
|
|
|
return <DropdownItem {...props} />
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
const editMenuConfig: EditorMenuConfig = {
|
|
name: 'edit',
|
|
label: 'Edit',
|
|
disabled: true,
|
|
items: [],
|
|
}
|
|
|
|
const viewMenuConfig: EditorMenuConfig = {
|
|
name: 'view',
|
|
label: 'View',
|
|
disabled: false,
|
|
items: [
|
|
{
|
|
label: 'Reset layout',
|
|
shortcut: 'ctrl+shift+r',
|
|
shortcutLabel: 'Ctrl Shift R',
|
|
Component: (props) => {
|
|
const { config, thunkDispatch } = props
|
|
config.callback = () => thunkDispatch({ type: 'resetLayout' })
|
|
return <DropdownItem {...props} />
|
|
},
|
|
},
|
|
{
|
|
label: 'All shortcuts',
|
|
shortcut: 'ctrl+shift+/',
|
|
shortcutLabel: 'Ctrl Shift /',
|
|
Component: (props) => {
|
|
const { config } = props
|
|
const { toggleOpen } = useShortcutsModalContext()
|
|
config.callback = toggleOpen
|
|
return <DropdownItem {...props} />
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
export const editorMenuConfig = [fileMenuConfig, editMenuConfig, viewMenuConfig]
|
|
|
|
interface EditorMenuItemConfigBase {
|
|
label: string
|
|
shortcut: string
|
|
shortcutLabel: React.ReactElement | string
|
|
callback?: (...a: any[]) => void
|
|
}
|
|
export interface EditorMenuItemConfig extends EditorMenuItemConfigBase {
|
|
Component: React.FC<{
|
|
config: EditorMenuItemConfigBase
|
|
state: State
|
|
thunkDispatch: any
|
|
}>
|
|
}
|
|
|
|
export interface EditorMenuConfig {
|
|
name: string
|
|
label: string
|
|
disabled: boolean
|
|
items: Array<EditorMenuItemConfig>
|
|
}
|