116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import type { Position } from "@/types/canvas";
|
|
|
|
type Props = {
|
|
position: Position | null;
|
|
isMac: boolean;
|
|
videoUploading: boolean;
|
|
onClose: () => void;
|
|
onUploadImage: () => void;
|
|
onUploadVideo: () => void;
|
|
onPaste: () => void;
|
|
onZoomIn: () => void;
|
|
onZoomOut: () => void;
|
|
onFitAll: () => void;
|
|
onResetZoom: () => void;
|
|
};
|
|
|
|
export function CanvasBlankContextMenu({
|
|
position,
|
|
isMac,
|
|
videoUploading,
|
|
onClose,
|
|
onUploadImage,
|
|
onUploadVideo,
|
|
onPaste,
|
|
onZoomIn,
|
|
onZoomOut,
|
|
onFitAll,
|
|
onResetZoom,
|
|
}: Props) {
|
|
const modifier = isMac ? "⌘" : "Ctrl+";
|
|
const itemClass =
|
|
"h-8 cursor-pointer justify-between whitespace-nowrap rounded-[5px] px-0 text-[14px] font-normal focus:bg-[#f5f5f5] dark:focus:bg-white/10";
|
|
const shortcut = (label: string) => (
|
|
<span className="ml-2 whitespace-nowrap text-[13px] text-[#aaa]">
|
|
{label}
|
|
</span>
|
|
);
|
|
return (
|
|
<DropdownMenu
|
|
modal={false}
|
|
open={position !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) onClose();
|
|
}}
|
|
>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
data-canvas-no-drag="true"
|
|
className="pointer-events-none fixed h-px w-px opacity-0"
|
|
style={{ left: position?.x ?? 0, top: position?.y ?? 0 }}
|
|
type="button"
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
aria-label="画布右键菜单"
|
|
align="start"
|
|
sideOffset={0}
|
|
collisionPadding={8}
|
|
data-canvas-blank-menu="true"
|
|
data-canvas-no-drag="true"
|
|
className="z-[10005] w-[200px] rounded-[12px] border-[#ededed] bg-white px-3 py-[5px] text-[#242424] shadow-[0_8px_20px_rgba(0,0,0,0.06)] ring-0 dark:border-white/10 dark:bg-zinc-900 dark:text-white"
|
|
style={{
|
|
fontFamily:
|
|
'Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
|
|
}}
|
|
onCloseAutoFocus={(event) => event.preventDefault()}
|
|
onClick={(event) => event.stopPropagation()}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
onContextMenu={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}}
|
|
>
|
|
<DropdownMenuItem className={itemClass} onSelect={onUploadImage}>
|
|
上传图片
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className={itemClass}
|
|
disabled={videoUploading}
|
|
onSelect={onUploadVideo}
|
|
>
|
|
上传视频
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className="mx-0 my-[6.5px] bg-[#ededed] dark:bg-white/10" />
|
|
<DropdownMenuItem className={itemClass} onSelect={onPaste}>
|
|
粘贴{shortcut(`${modifier}V`)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className="mx-0 my-[6.5px] bg-[#ededed] dark:bg-white/10" />
|
|
<DropdownMenuItem className={itemClass} onSelect={onZoomIn}>
|
|
放大{shortcut(`${modifier}+`)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={itemClass} onSelect={onZoomOut}>
|
|
缩小{shortcut(`${modifier}-`)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={itemClass} onSelect={onFitAll}>
|
|
显示画布所有元素{shortcut(isMac ? "⇧1" : "Shift+1")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className={itemClass} onSelect={onResetZoom}>
|
|
缩放至100%{shortcut(`${modifier}0`)}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|