e7dec57644
* Moved EditorMenu/helpers.ts file to src/helpers. Reused STL download helper on a new button in the project profile page * Tweak download STL style - flex-wrap the column and grow original "built with" content so the button is pushed write but remains responsive on smaller screens
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 'src/helpers/download_stl'
|
|
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>
|
|
}
|