menghao
03a4410272
主要工作是共享同一套“画布内核与通用 UI 源码”，网站和 Tauri 只分别实现宿主适配层。 --------- Co-authored-by: 段舒康 <kdletters@qq.com> Co-authored-by: kdletters <kdletters@qq.com> Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/136 Co-authored-by: menghao <mh18530625731@163.com> Co-committed-by: menghao <mh18530625731@163.com>
37 lines
1016 B
TypeScript
37 lines
1016 B
TypeScript
import {
|
|
canvasDisplayScaleToViewportScale,
|
|
type CanvasViewport,
|
|
formatCanvasDisplayScalePercent,
|
|
} from '@genarrative/image-canvas-core';
|
|
import type { ReactNode } from 'react';
|
|
|
|
export type CanvasZoomActions = {
|
|
displayPercent: string;
|
|
fit: () => void;
|
|
zoomIn: () => void;
|
|
zoomOut: () => void;
|
|
zoomToDisplayScale: (displayScale: number) => void;
|
|
};
|
|
|
|
export function ZoomControls({
|
|
children,
|
|
onFit,
|
|
onScaleFromCenter,
|
|
viewport,
|
|
}: {
|
|
children: (actions: CanvasZoomActions) => ReactNode;
|
|
onFit: () => void;
|
|
onScaleFromCenter: (scale: number) => void;
|
|
viewport: CanvasViewport;
|
|
}) {
|
|
const actions: CanvasZoomActions = {
|
|
displayPercent: formatCanvasDisplayScalePercent(viewport.scale),
|
|
fit: onFit,
|
|
zoomIn: () => onScaleFromCenter(viewport.scale * 1.16),
|
|
zoomOut: () => onScaleFromCenter(viewport.scale * 0.86),
|
|
zoomToDisplayScale: (displayScale) =>
|
|
onScaleFromCenter(canvasDisplayScaleToViewportScale(displayScale)),
|
|
};
|
|
return <>{children(actions)}</>;
|
|
}
|