|
import React, { useEffect, useMemo, useState } from 'react' |
|
import * as Menubar from '@radix-ui/react-menubar' |
|
import { CheckIcon, DotFilledIcon } from '@radix-ui/react-icons' |
|
|
|
import classes from './styles.module.css' |
|
import { BodyEditor } from '../../editor' |
|
import i18n, { IsChina } from '../../i18n' |
|
import { Helper } from '../../environments/online/helper' |
|
import { uploadImage } from '../../utils/transfer' |
|
import { getCurrentTime } from '../../utils/time' |
|
import useForceUpdate from '../../hooks/useFoceUpdate' |
|
import classNames from 'classnames' |
|
import { useLanguageSelect } from '../../hooks' |
|
import { ShowContextMenu } from '../ContextMenu' |
|
import { ShowDialog } from '../Dialog' |
|
import { SetCDNBase } from '../../utils/detect' |
|
|
|
const { |
|
MenubarRoot, |
|
MenubarTrigger, |
|
MenubarContent, |
|
MenubarItem, |
|
MenubarCheckboxItem, |
|
MenubarRadioItem, |
|
MenubarItemIndicator, |
|
MenubarSeparator, |
|
RightSlot, |
|
Blue, |
|
inset, |
|
} = classes |
|
const MenubarDemo: React.FC<{ |
|
editor: BodyEditor |
|
onChangeBackground: (url: string) => void |
|
onScreenShot: (data: Record<string, { src: string; title: string }>) => void |
|
style?: React.CSSProperties |
|
}> = ({ editor, onChangeBackground, onScreenShot, style }) => { |
|
const forceUpdate = useForceUpdate() |
|
const helper = useMemo(() => new Helper(editor), [editor]) |
|
const { current, changeLanguage, languagList } = useLanguageSelect() |
|
|
|
useEffect(() => { |
|
const show = (data: { mouseX: number; mouseY: number }) => { |
|
ShowContextMenu({ ...data, editor, onChangeBackground }) |
|
} |
|
editor?.ContextMenuEventManager.AddEventListener(show) |
|
return () => { |
|
editor?.ContextMenuEventManager.RemoveEventListener(show) |
|
} |
|
}, [editor]) |
|
|
|
return ( |
|
<Menubar.Root className={MenubarRoot} style={style}> |
|
<Menubar.Menu> |
|
<Menubar.Trigger className={MenubarTrigger}> |
|
{i18n.t('File')} |
|
</Menubar.Trigger> |
|
<Menubar.Portal> |
|
<Menubar.Content |
|
className={MenubarContent} |
|
align="start" |
|
sideOffset={5} |
|
alignOffset={-3} |
|
> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.ResetScene()} |
|
> |
|
{i18n.t('Reset Scene')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.LoadScene()} |
|
> |
|
{i18n.t('Load Scene')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.SaveScene()} |
|
> |
|
{i18n.t('Save Scene')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => helper.LoadGesture()} |
|
> |
|
{i18n.t('Load Gesture')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => helper.SaveGesture()} |
|
> |
|
{i18n.t('Save Gesture')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => { |
|
helper.GenerateSceneURL() |
|
}} |
|
> |
|
{i18n.t('Generate Scene URL')} |
|
</Menubar.Item> |
|
<Menubar.Separator className={MenubarSeparator} /> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.RestoreLastSavedScene()} |
|
> |
|
{i18n.t('Restore Last Scene')} |
|
</Menubar.Item> |
|
<Menubar.Separator className={MenubarSeparator} /> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => |
|
helper.DetectFromImage(onChangeBackground) |
|
} |
|
> |
|
{i18n.t('Detect From Image')} |
|
</Menubar.Item> |
|
{IsChina() ? ( |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => { |
|
SetCDNBase(false) |
|
helper.DetectFromImage(onChangeBackground) |
|
}} |
|
> |
|
{i18n.t('Detect From Image') + ' [中国]'} |
|
</Menubar.Item> |
|
) : undefined} |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => helper.SetRandomPose()} |
|
> |
|
{i18n.t('Set Random Pose')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={async () => { |
|
const image = await uploadImage() |
|
if (image) onChangeBackground(image) |
|
}} |
|
> |
|
{i18n.t('Set Background Image')} |
|
</Menubar.Item> |
|
<Menubar.Item className={MenubarItem}> |
|
v{__APP_VERSION__} |
|
</Menubar.Item> |
|
</Menubar.Content> |
|
</Menubar.Portal> |
|
</Menubar.Menu> |
|
|
|
<Menubar.Menu> |
|
<Menubar.Trigger className={MenubarTrigger}> |
|
{i18n.t('Edit')} |
|
</Menubar.Trigger> |
|
<Menubar.Portal> |
|
<Menubar.Content |
|
className={MenubarContent} |
|
align="start" |
|
sideOffset={5} |
|
alignOffset={-3} |
|
> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.Undo()} |
|
> |
|
{i18n.t('Undo')} |
|
<div className={RightSlot}>⌘ Z</div> |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.Redo()} |
|
> |
|
{i18n.t('Redo')} |
|
<div className={RightSlot}>⇧ ⌘ Z</div> |
|
</Menubar.Item> |
|
<Menubar.Separator className={MenubarSeparator} /> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.CopySelectedBody()} |
|
> |
|
{i18n.t('Duplicate Skeleton')} |
|
<div className={RightSlot}>⇧ D</div> |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={MenubarItem} |
|
onSelect={() => editor.RemoveBody()} |
|
> |
|
{i18n.t('Delete Skeleton')} |
|
<div className={RightSlot}>{i18n.t('Del')}</div> |
|
</Menubar.Item> |
|
</Menubar.Content> |
|
</Menubar.Portal> |
|
</Menubar.Menu> |
|
|
|
<Menubar.Menu> |
|
<Menubar.Trigger className={MenubarTrigger}> |
|
{i18n.t('View')} |
|
</Menubar.Trigger> |
|
<Menubar.Portal> |
|
<Menubar.Content |
|
className={MenubarContent} |
|
align="start" |
|
sideOffset={5} |
|
alignOffset={-14} |
|
> |
|
<Menubar.Item |
|
className={classNames(MenubarItem, inset)} |
|
onSelect={() => { |
|
editor.LockView() |
|
}} |
|
> |
|
{i18n.t('Lock View')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={classNames(MenubarItem, inset)} |
|
onSelect={() => { |
|
editor.UnlockView() |
|
}} |
|
> |
|
{i18n.t('Unlock View')} |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={classNames(MenubarItem, inset)} |
|
onSelect={() => { |
|
editor.RestoreView() |
|
}} |
|
> |
|
{i18n.t('Restore View')} |
|
</Menubar.Item> |
|
</Menubar.Content> |
|
</Menubar.Portal> |
|
</Menubar.Menu> |
|
|
|
<Menubar.Menu> |
|
<Menubar.Trigger className={MenubarTrigger}> |
|
{i18n.t('Setting')} |
|
</Menubar.Trigger> |
|
<Menubar.Portal> |
|
<Menubar.Content |
|
className={MenubarContent} |
|
align="start" |
|
sideOffset={5} |
|
alignOffset={-14} |
|
> |
|
<Menubar.CheckboxItem |
|
className={classNames(MenubarCheckboxItem, inset)} |
|
checked={editor.MoveMode} |
|
onCheckedChange={() => { |
|
editor.MoveMode = !editor.MoveMode |
|
forceUpdate() |
|
}} |
|
> |
|
<Menubar.ItemIndicator |
|
className={MenubarItemIndicator} |
|
> |
|
<CheckIcon /> |
|
</Menubar.ItemIndicator> |
|
{i18n.t('Move Mode')} |
|
</Menubar.CheckboxItem> |
|
<Menubar.CheckboxItem |
|
className={classNames(MenubarCheckboxItem, inset)} |
|
checked={editor.FreeMode} |
|
onCheckedChange={() => { |
|
editor.FreeMode = !editor.FreeMode |
|
forceUpdate() |
|
}} |
|
> |
|
<Menubar.ItemIndicator |
|
className={MenubarItemIndicator} |
|
> |
|
<CheckIcon /> |
|
</Menubar.ItemIndicator> |
|
{i18n.t('Free Mode')} |
|
</Menubar.CheckboxItem> |
|
<Menubar.CheckboxItem |
|
className={classNames(MenubarCheckboxItem, inset)} |
|
checked={editor.OnlyHand} |
|
onCheckedChange={() => { |
|
editor.OnlyHand = !editor.OnlyHand |
|
forceUpdate() |
|
}} |
|
> |
|
<Menubar.ItemIndicator |
|
className={MenubarItemIndicator} |
|
> |
|
<CheckIcon /> |
|
</Menubar.ItemIndicator> |
|
{i18n.t('Only Hand')} |
|
</Menubar.CheckboxItem> |
|
<Menubar.CheckboxItem |
|
className={classNames(MenubarCheckboxItem, inset)} |
|
checked={editor.enablePreview} |
|
onCheckedChange={() => { |
|
editor.enablePreview = !editor.enablePreview |
|
forceUpdate() |
|
}} |
|
> |
|
<Menubar.ItemIndicator |
|
className={MenubarItemIndicator} |
|
> |
|
<CheckIcon /> |
|
</Menubar.ItemIndicator> |
|
{i18n.t('Show Preview')} |
|
</Menubar.CheckboxItem> |
|
<Menubar.CheckboxItem |
|
className={classNames(MenubarCheckboxItem, inset)} |
|
checked={editor.EnableHelper} |
|
onCheckedChange={() => { |
|
editor.EnableHelper = !editor.EnableHelper |
|
forceUpdate() |
|
}} |
|
> |
|
<Menubar.ItemIndicator |
|
className={MenubarItemIndicator} |
|
> |
|
<CheckIcon /> |
|
</Menubar.ItemIndicator> |
|
{i18n.t('Show Grid')} |
|
</Menubar.CheckboxItem> |
|
</Menubar.Content> |
|
</Menubar.Portal> |
|
</Menubar.Menu> |
|
|
|
<Menubar.Menu> |
|
<Menubar.Trigger className={MenubarTrigger}> |
|
{i18n.t('Feedback')} |
|
</Menubar.Trigger> |
|
<Menubar.Portal> |
|
<Menubar.Content |
|
className={MenubarContent} |
|
align="start" |
|
sideOffset={5} |
|
alignOffset={-14} |
|
> |
|
<Menubar.Item |
|
className={classNames(MenubarItem, inset)} |
|
onSelect={() => { |
|
helper.FeedbackByGithub() |
|
}} |
|
> |
|
Github |
|
</Menubar.Item> |
|
<Menubar.Item |
|
className={classNames(MenubarItem, inset)} |
|
onSelect={() => { |
|
helper.FeedbackByQQ() |
|
}} |
|
> |
|
QQ |
|
</Menubar.Item> |
|
</Menubar.Content> |
|
</Menubar.Portal> |
|
</Menubar.Menu> |
|
<Menubar.Menu> |
|
<Menubar.Trigger className={MenubarTrigger}> |
|
Language |
|
</Menubar.Trigger> |
|
<Menubar.Portal> |
|
<Menubar.Content |
|
className={MenubarContent} |
|
align="start" |
|
sideOffset={5} |
|
alignOffset={-14} |
|
> |
|
<Menubar.RadioGroup |
|
value={current} |
|
onValueChange={(v) => { |
|
changeLanguage(v) |
|
}} |
|
> |
|
{languagList.map((item) => ( |
|
<Menubar.RadioItem |
|
className={classNames( |
|
MenubarRadioItem, |
|
inset |
|
)} |
|
key={item} |
|
value={item} |
|
> |
|
<Menubar.ItemIndicator |
|
className={MenubarItemIndicator} |
|
> |
|
<DotFilledIcon /> |
|
</Menubar.ItemIndicator> |
|
{item} |
|
</Menubar.RadioItem> |
|
))} |
|
</Menubar.RadioGroup> |
|
</Menubar.Content> |
|
</Menubar.Portal> |
|
</Menubar.Menu> |
|
<Menubar.Menu> |
|
<Menubar.Trigger |
|
className={classNames(MenubarTrigger, Blue)} |
|
onClick={async () => { |
|
const image = editor.MakeImages() |
|
const result = Object.fromEntries( |
|
Object.entries(image).map(([name, imgData]) => [ |
|
name, |
|
{ |
|
src: imgData, |
|
title: name + '_' + getCurrentTime(), |
|
}, |
|
]) |
|
) |
|
onScreenShot(result) |
|
}} |
|
> |
|
{i18n.t('Generate')} |
|
</Menubar.Trigger> |
|
</Menubar.Menu> |
|
</Menubar.Root> |
|
) |
|
} |
|
|
|
export default MenubarDemo |
|
|
