图形编辑器开发：实现图形的复制粘贴

/**
 * 生成选中图形的快照，并保存到操作系统剪贴板中
 */
const getSelectedItemsSnapshot() => {
  const selectedItems = selectSet.getItems();
  if (selectedItems.length === 0) {
    return null;
  }

  // 提取图形原始属性，丢掉多余属性（比如 id）
  const copiedData = arrMap(selectedItems, (item) =>
    lodash.omit(item.getAttrs(), 'id'),
  );

  // 序列化
  return JSON.stringify({
    appVersion: this.editor.appVersion,
    paperId: this.editor.paperId,
    data: JSON.stringify(copiedData),
  });
}

/**
 * 绑定 Ctrl/Cmd + C 的事件响应函数
 */
const copyHandler = () => {
  const snapshot = getSelectedItemsSnapshot();
  if (!snapshot) {
    return;
  }

  // 将序列化结果保存到剪贴板
  navigator.clipboard.writeText(snapshot).then(() => {
    // 这里可以考虑加一个 “复制成功” 弹窗提示
    console.log('copied');
  });
};

hotkeys('cmd+c, ctrl+c', copyHandler);

const pasteHandler = (e: Event) => {
  const event = e as ClipboardEvent;
  const clipboardData = event.clipboardData;
  if (!clipboardData) {
    return;
  }
  // 拿到粘贴的文本内容
  const pastedData = clipboardData.getData('Text');
  // ...
};

// 监听 “粘贴” 事件
window.addEventListener('paste', pasteHandler);

class ClipboardManager {
  private unbindEvents = noop;
  constructor(private editor: Editor) {}

  bindEvents() {
    // Ctrl+C 键盘事件响应函数
    const copyHandler = () => {
      this.copy();
    };

    // 粘贴事件响应函数
    const pasteHandler = (e: Event) => {
      const event = e as ClipboardEvent;
      const clipboardData = event.clipboardData;
      if (!clipboardData) {
        return;
      }
      const pastedData = clipboardData.getData('Text');
      this.addGraphsFromClipboard(pastedData);
    };

    hotkeys('cmd+c, ctrl+c', copyHandler);
    window.addEventListener('paste', pasteHandler);

    this.unbindEvents = () => {
      hotkeys.unbind('cmd+c, ctrl+c', copyHandler);
      window.removeEventListener('paste', pasteHandler);
    };
  }

  /**
   * 将快照保存到剪贴板
   */
  copy() {
    const snapshot = this.getSelectedItemsSnapshot();
    if (!snapshot) {
      return;
    }

    navigator.clipboard.writeText(snapshot).then(() => {
      console.log('copied');
    });
  }

  pasteAt(x: number, y: number) {
    navigator.clipboard.readText().then((pastedData) => {
      this.addGraphsFromClipboard(pastedData, x, y);
    });
  }

  /**
   * 生成选中图形的快照（序列化）
   */
  private getSelectedItemsSnapshot() {
    const selectedItems = this.editor.selectedElements.getItems();
    if (selectedItems.length === 0) {
      return null;
    }


    const copiedData = arrMap(selectedItems, (item) =>
      omit(item.getAttrs(), 'id'),
    );

    return JSON.stringify({
      appVersion: this.editor.appVersion,
      paperId: this.editor.paperId,
      data: JSON.stringify(copiedData),
    });
  }

  // 在指定坐标位置粘贴内容
  private addGraphsFromClipboard(dataStr: string): void;
  private addGraphsFromClipboard(dataStr: string, x: number, y: number): void;
  private addGraphsFromClipboard(dataStr: string, x?: number, y?: number) {
    let pastedData: IEditorPaperData | null = null;
    try {
      // 反序列化
      pastedData = JSON.parse(dataStr);
    } catch (e) {
      return;
    }

    // 数据格式校验
    if (
      !(
        pastedData &&
        pastedData.appVersion.startsWith('suika-editor') &&
        pastedData.data
      )
    ) {
      return;
    }

    const editor = this.editor;
    // 将数据解析并添加到图形树中
    const pastedGraphs = editor.sceneGraph.addGraphsByStr(pastedData.data);
    if (pastedGraphs.length === 0) {
      return;
    }

    // 添加到历史记录（以实现撤销重做）
    editor.commandManager.pushCommand(
      new AddShapeCommand('pasted graphs', editor, pastedGraphs),
    );
    // 标记粘贴图形为选中状态
    editor.selectedElements.setItems(pastedGraphs);

    const bbox = editor.selectedElements.getBBox()!;
    // 如果是右键粘贴（x 和 y 没有值）且跨图纸粘贴，计算粘贴图形要移动的目标位置
    if (
      (x === undefined || y === undefined) &&
      pastedData.paperId !== editor.paperId
    ) {
      const vwCenter = this.editor.viewportManager.getCenter();
      x = vwCenter.x - bbox.width / 2;
      y = vwCenter.y - bbox.height / 2;
    }

    // 遍历粘贴图形，根据 x 和 y 进行位置修正
    if (x !== undefined && y !== undefined) {
      const dx = x - bbox.x;
      const dy = y - bbox.y;
      if (dx || dy) {
        Graph.dMove(pastedGraphs, dx, dy);
      }
    }

    // 渲染画布
    editor.sceneGraph.render();
  }

  // 销毁时解绑事件监听
  destroy() {
    this.unbindEvents();
  }
}

const blob = new Blob(
  [
    `<meta charset="utf-8">
    <span data-suika-meta="${这里是元数据}"></span>
    <span data-suika-data="${这里是主体数据}"><span>`,
  ],
  { type: 'text/html' },
);

navigator.clipboard
  .write([new ClipboardItem({ [blob.type]: blob })])
  .then(() => {
    console.log('copied');
  });