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>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import type { CanvasLayer } from '@genarrative/image-canvas-core';
|
|
import type { HTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
|
|
|
|
export function LayerRenderer({
|
|
as = 'button',
|
|
children,
|
|
className = '',
|
|
generating = false,
|
|
hovered = false,
|
|
layer,
|
|
selected = false,
|
|
style,
|
|
...props
|
|
}: Omit<HTMLAttributes<HTMLElement>, 'style'> & {
|
|
as?: 'button' | 'div';
|
|
children: ReactNode;
|
|
generating?: boolean;
|
|
hovered?: boolean;
|
|
layer: CanvasLayer;
|
|
selected?: boolean;
|
|
style?: HTMLAttributes<HTMLElement>['style'];
|
|
onKeyDown?: KeyboardEventHandler<HTMLElement>;
|
|
}) {
|
|
const sharedProps = {
|
|
...props,
|
|
className: [
|
|
'genarrative-image-canvas__layer',
|
|
selected ? 'genarrative-image-canvas__layer--selected' : '',
|
|
hovered ? 'genarrative-image-canvas__layer--hovered' : '',
|
|
generating ? 'genarrative-image-canvas__layer--generating' : '',
|
|
layer.locked ? 'genarrative-image-canvas__layer--locked' : '',
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' '),
|
|
style: {
|
|
...style,
|
|
left: layer.x,
|
|
top: layer.y,
|
|
width: layer.width,
|
|
height: layer.height,
|
|
zIndex: layer.zIndex,
|
|
display: layer.hidden ? 'none' : style?.display,
|
|
},
|
|
children,
|
|
};
|
|
return as === 'div' ? (
|
|
<div {...sharedProps} role={props.role ?? 'button'} />
|
|
) : (
|
|
<button {...sharedProps} type="button" />
|
|
);
|
|
}
|