命令与工具 API

Molio 的宿主按钮、快捷键和插件 UI 都应该优先复用命令总线与工具对象。

EDITOR_COMMANDS

import { EDITOR_COMMANDS } from '@shangchien/molio'

await editorRef.value?.executeCommand(EDITOR_COMMANDS.historyUndo)
await editorRef.value?.executeCommand(EDITOR_COMMANDS.viewAutofit)

分组	命令
history	historyUndo, historyRedo
selection	selectionSelectAll, selectionClearAndResetTool, selectionDelete, selectionBeautify
selection transform	selectionFlipHorizontal, selectionFlipVertical
selection copy	selectionCopyJson, selectionCopySmiles, selectionCopyMolblock, selectionCopyPng, selectionCopySvg, selectionCopyAll, selectionCopyShareLink
selection download	selectionDownloadSvg, selectionDownloadPng, selectionDownloadMpz, selectionDownloadSmi, selectionDownloadSdf, selectionDownloadCsv
clipboard	clipboardCopy, clipboardCut, clipboardPaste, clipboardPasteAt
document	documentDeleteMolecule, documentDeleteImage, documentEditText, documentEditImage
view	viewToggleGrid, viewZoomIn, viewZoomOut, viewAutofit
annotation	annotationApply

注册宿主命令

const unregister = editorRef.value?.registerCommand('host:save-draft', async () => {
  const snapshot = editorRef.value?.getDocumentSnapshot()
  if (snapshot)
    await saveDraft(snapshot)
  return true
})

注册后的命令可以被宿主自己的按钮调用，也可以被 UIContributionPlugin.toolbar、contextMenu、selectionBar 或 shortcuts 引用。

PRESET_TOOLS

import { PRESET_TOOLS } from '@shangchien/molio'

editorRef.value?.setTool(PRESET_TOOLS.carbon)
editorRef.value?.setTool(PRESET_TOOLS.doubleBond)

常用预置：

类型	预置
selection	select, polyBrush, rectBrush
edit	eraser
atoms	carbon, nitrogen, oxygen, sulfur, phosphorus, fluorine, chlorine, bromine
bonds	singleBond, doubleBond, tripleBond, aromaticBond, coordinateBond, hydrogenBond, wedgeUpBond, wedgeDownBond, wedgeEitherBond, anyBond
templates	benzene, cyclopentane, cyclohexane, cyclopropane, cyclobutane
connectors	connectorSymbolPlus, connectorLineForward, connectorLineRetro, connectorLineEquilibrium, connectorLineResonance, connectorLineNoGo
other	chain, text, image, measure

自定义工具对象

你也可以直接传入符合 EditorTool 联合类型的对象：

editorRef.value?.setAtomTool(8, 'O')
editorRef.value?.setBondTool(1, 'up', 'Wedge Up')
editorRef.value?.setTool({ type: 'ring', ringSize: 6, aromatic: true, label: 'Benzene' })

UI 插件中使用命令

import { EDITOR_COMMANDS, type UIContributionPlugin } from '@shangchien/molio'

export const hostUiPlugin: UIContributionPlugin = {
  manifest: { id: 'host:ui', name: 'Host UI', version: '1.0.0' },
  toolbar: [
    {
      id: 'host:toolbar.autofit',
      slot: 'top-utility',
      label: '适配视图',
      commandId: EDITOR_COMMANDS.viewAutofit,
    },
  ],
  shortcuts: [
    {
      id: 'host:shortcut.save',
      keys: 'mod+s',
      scope: 'global',
      commandId: 'host:save-draft',
    },
  ],
}

何时用 ref，何时用命令

• 父组件一两个按钮直接调用 editorRef.value?.undo() 更直观。
• 多个 UI 入口复用同一动作时，用 registerCommand() + executeCommand()。
• 插件贡献 toolbar、context menu、selection bar 或 shortcut 时，用 commandId。
• 需要传鼠标位置等运行时参数时，用 executeCommand(id, args)。