底部工具栏的子选项锚点 ref 改用查表
- src/components/image-editor/ImageCanvasBottomToolbarView.tsx:把 spec / music / model3d / publication 的三层三元 ref 选择链提成 toolWrapRefs 映射表,新增子选项时不再延长三元链 验证:npx vitest run src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx(3 用例全绿)、npm run typecheck
This commit is contained in:
@@ -100,6 +100,17 @@ export function ImageCanvasBottomToolbarView({
|
||||
onOpenToolOptions,
|
||||
onCloseToolOptions,
|
||||
}: ImageCanvasBottomToolbarViewProps) {
|
||||
// 每个可展开子选项挂在自己那一格上的定位锚点:查表比三层三元链更好加新工具。
|
||||
const toolWrapRefs: Record<
|
||||
ToolbarOptionTool,
|
||||
RefObject<HTMLSpanElement | null>
|
||||
> = {
|
||||
spec: specToolWrapRef,
|
||||
music: musicToolWrapRef,
|
||||
model3d: model3dToolWrapRef,
|
||||
publication: publicationToolWrapRef,
|
||||
};
|
||||
|
||||
return (
|
||||
<CanvasToolbar
|
||||
className={[
|
||||
@@ -118,15 +129,7 @@ export function ImageCanvasBottomToolbarView({
|
||||
<CanvasToolbarGroup key={id}>
|
||||
{separatorBefore ? <CanvasToolbarDivider /> : null}
|
||||
<span
|
||||
ref={
|
||||
id === 'spec'
|
||||
? specToolWrapRef
|
||||
: id === 'music'
|
||||
? musicToolWrapRef
|
||||
: id === 'model3d'
|
||||
? model3dToolWrapRef
|
||||
: publicationToolWrapRef
|
||||
}
|
||||
ref={toolWrapRefs[id]}
|
||||
className={[
|
||||
'image-canvas-editor__bottom-toolbar-option-wrap',
|
||||
id === 'spec' ? 'image-canvas-editor__spec-tool-wrap' : '',
|
||||
|
||||
Reference in New Issue
Block a user