GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

复用编辑器缩放浮层菜单

Browse Source 
扩展 PlatformFloatingMenu 支持标签和四向定位

编辑器缩放菜单复用平台浮层菜单原语

更新 TRACKING 记录组件统一进展
This commit is contained in:
kdletters
2026-06-14 01:12:26 +08:00
parent 304d6806f0
commit f0cb7ac685
5 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/image-editor/ImageCanvasEditorView.tsx
View File

@@ -51,6 +51,10 @@ import {
EditorIconButton,
SidebarMediaItem,
} from './ImageCanvasEditorPrimitives';
import {
PlatformFloatingMenu,
PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
type EditorAsset = {
id: string;
@@ -1671,55 +1675,47 @@ export function ImageCanvasEditorView() {
<span>{formatPercent(viewport.scale)}</span>
</button>
{isZoomMenuOpen ? (
<div
className="image-canvas-editor__zoom-menu"
role="menu"
aria-label="缩放菜单"
>
<button
type="button"
role="menuitem"
<PlatformFloatingMenu label="缩放菜单" placement="bottom-end">
<PlatformFloatingMenuItem
className="image-canvas-editor__zoom-menu-item"
onClick={() => {
updateScaleFromCenter(viewport.scale * 1.16);
setIsZoomMenuOpen(false);
}}
>
放大
</button>
<button
type="button"
role="menuitem"
</PlatformFloatingMenuItem>
<PlatformFloatingMenuItem
className="image-canvas-editor__zoom-menu-item"
onClick={() => {
updateScaleFromCenter(viewport.scale * 0.86);
setIsZoomMenuOpen(false);
}}
>
缩小
</button>
<button
type="button"
role="menuitem"
</PlatformFloatingMenuItem>
<PlatformFloatingMenuItem
className="image-canvas-editor__zoom-menu-item"
onClick={() => {
fitLayers();
setIsZoomMenuOpen(false);
}}
>
显示画布所有元素
</button>
</PlatformFloatingMenuItem>
{[0.5, 1, 2].map((scale) => (
<button
<PlatformFloatingMenuItem
key={scale}
type="button"
role="menuitem"
className="image-canvas-editor__zoom-menu-item"
onClick={() => {
updateScaleFromCenter(scale);
setIsZoomMenuOpen(false);
}}
>
缩放至{Math.round(scale * 100)}%
</button>
</PlatformFloatingMenuItem>
))}
</div>
</PlatformFloatingMenu>
) : null}
</div>
</div>