常用操作

以下代码中的 editor 是已经创建的 SkyNoteEditor。

创建与选择

export function addNote(editor: SkyNoteEditor<HTMLElement>): void {
  const id = editor.insertNodeAtViewportCenter({ nodeType: 'sticky', options: { text: '新的想法' } });
  if (id) editor.select([id]);
}

使用 createNode() 指定世界或父容器局部坐标。使用 insertNodeAtViewportCenter() 可以把新内容放到当前视口中心。

历史与视口

export function showNavigation(editor: SkyNoteEditor<HTMLElement>): void {
  editor.undo();
  editor.redo();
  editor.fitContent();
  editor.applyInitialView('actual-size');
  editor.zoomAt(1.2);
}

上面的函数逐项演示接口用途；实际应用中应由不同按钮分别调用相应操作，而不是把导航与历史串成一个用户命令。

fitContent() 缩放以容纳全部内容，actual-size 保持100%显示。视口操作不产生撤销记录。

观察变化

export function observeSelection(editor: SkyNoteEditor<HTMLElement>, render: (ids: string[]) => void): () => void {
  return editor.onSelectionChange(() => render([...editor.selectedNodeIds]));
}

observeSelection返回解绑函数，页面卸载时调用。传入的render负责更新自己的UI。

文档变更优先使用增量事件。不要在拖动等高频路径反复导出整份文档。

只读与快捷键

export function makeReadOnly(editor: SkyNoteEditor<HTMLElement>): void {
  editor.setReadOnly(true);
}

只读限制文档编辑，仍可导航。快捷键在画布持有焦点时生效：双击编辑文字，空格拖动或中键平移，Ctrl/⌘ + Z 撤销，Shift + 1 适配内容。输入法组合输入期间不会触发快捷键。