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

今天这篇文字来讲解一下图形编辑器如何实现图形的复制粘贴。

编辑器 github 地址：

https://github.com/F-star/suika

线上体验：

https://blog.fstars.wang/app/suika/

首先需要确认一下粘贴的范围。

如果只支持粘贴到当前编辑器下，方案很简单：只需要监听 Ctrl + C 键盘事件深拷贝一份选中图形对象，然后再监听 Ctrl + V 事件，将拷贝出来的对象添加到图形树的末尾。

但通常我们希望可以跨 tab 页，跨图纸，跨浏览器，甚至从 Web 端复制到桌面端。

很明显，要实现这样的场景，我们需要操作系统级的支持：剪贴板。

我们看看怎么实现通过剪贴板实现图形的复制粘贴。

先是复制逻辑。

复制通常为两种方式：

如下图：

当调用复制命令时，我们要将 选中的图形生成序列化快照。

所谓序列化，就是将内存中的对象转换为可以持久化的数据。
最简单快捷的就是用 JSON.stringify() 序列化为 JSON 字符串。

除了图形对象 data，我们还要保存一些必要的元信息。

最后我们要保存的信息有：

/生成选中图形的快照，并保存到操作系统剪贴板中/constgetSelectedItemsSnapshot()=>{constselectedItems=selectSet.getItems();if(selectedItems.length===0){returnnull;}//提取图形原始属性，丢掉多余属性（比如id）constcopiedData=arrMap(selectedItems,(item)=>lodash.omit(item.getAttrs(),'id'),);//序列化returnJSON.stringify({appVersion:this.editor.appVersion,paperId:this.editor.paperId,data:JSON.stringify(copiedData),});}

拿到快照信息后，我们会调用 navigator.clipboard.writeText() 方法，将数据保存到操作系统的剪贴板中。

/绑定Ctrl/Cmd+C的事件响应函数/constcopyHandler=()=>{constsnapshot=getSelectedItemsSnapshot();if(!snapshot){return;}//将序列化结果保存到剪贴板navigator.clipboard.writeText(snapshot).then(()=>{//这里可以考虑加一个“复制成功”弹窗提示console.log('copied');});};hotkeys('cmd+c,ctrl+c',copyHandler);

然后就是粘贴了。

粘贴分为右键粘贴和快捷键粘贴。

这里的右键粘贴使用了 clipboard.readText() 方法。
因为该方法不是用户的主动动作，涉及到用户隐私问题，所以需要用户授权剪贴板权限才行。

另外，Firefox 浏览器直接报错，不会弹出剪贴板授权弹窗。

这不是个技术问题，因为可以手动修改 Firefox 浏览器设置启用剪贴板授权。
它更是一个安全问题，Firefox 不认为用户能够正确地授权粘贴板操作，以及开发者不会滥用这个权限收集用户隐私。

右键粘贴因为提供了光标位置，所以我们可以将图形的位置对上这个位置。

前面我们因为主动获取剪贴板的内容，所以有权限问题。

但如果我们监听用户的 “粘贴” 操作，权限就宽松了很多，不需要授权。

因为这是用户的主动行为，用户从剪贴板取出了数据交给你，而不是你主动去访问剪贴板的数据。

constpasteHandler=(e:Event)=>{constevent=easClipboardEvent;constclipboardData=event.clipboardData;if(!clipboardData){return;}//拿到粘贴的文本内容constpastedData=clipboardData.getData('Text');//...};//监听“粘贴”事件window.addEventListener('paste',pasteHandler);

如果用户拒绝授权，我们可以考虑提示用户 “用 Ctrl + C 的方式粘贴”，或者用用户上次右键粘贴的内容凑数，虽然可能货不对版，但好歹有个东西。

快捷键粘贴没有光标操作，所以粘贴图形的位置需要用另一种方式去处理。

我们需要考虑两种情况：相同图纸和跨图纸。

对于在同一个图纸下快捷键粘贴，图形复制时在哪里，粘贴也在哪里。

或者你可以给一个小的右下偏移，让用户感知到粘贴成功了。
我个人不喜欢这个偏移，因为通常我复制，就是为了让图形做重复对齐排列的，我还得给它移动回去。

如果是在另一张图纸下粘贴，我们就不能这么做了。

为什么呢？

举个例子，假设用户复制了图纸 A 中在 (10000, 10000) 坐标的图形。
然后我打开图纸 B，图纸 B 此时视口的中心坐标在 (0, 0)。

用户一粘贴，然后说，诶，粘贴的图形哪去了？你说我可以让视口移动到粘贴图形的位置，那用户会说，诶，我在哪里，我的其他图形哪去了？

所以 对于跨图纸场景，最好的做法是将图形粘贴到画布正中心。

代码实现

代码逻辑有点多，就不文字叙述了，看代码里面的注释吧。

classClipboardManager{privateunbindEvents=noop;constructor(privateeditor:Editor){}bindEvents(){//Ctrl+C键盘事件响应函数constcopyHandler=()=>{this.copy();};//粘贴事件响应函数constpasteHandler=(e:Event)=>{constevent=easClipboardEvent;constclipboardData=event.clipboardData;if(!clipboardData){return;}constpastedData=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(){constsnapshot=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);});}/生成选中图形的快照（序列化）/privategetSelectedItemsSnapshot(){constselectedItems=this.editor.selectedElements.getItems();if(selectedItems.length===0){returnnull;}constcopiedData=arrMap(selectedItems,(item)=>omit(item.getAttrs(),'id'),);returnJSON.stringify({appVersion:this.editor.appVersion,paperId:this.editor.paperId,data:JSON.stringify(copiedData),});}//在指定坐标位置粘贴内容privateaddGraphsFromClipboard(dataStr:string):void;privateaddGraphsFromClipboard(dataStr:string,x:number,y:number):void;privateaddGraphsFromClipboard(dataStr:string,x?:number,y?:number){letpastedData:IEditorPaperData|null=null;try{//反序列化pastedData=JSON.parse(dataStr);}catch(e){return;}//数据格式校验if(!(pastedData&&pastedData.appVersion.startsWith('suika-editor')&&pastedData.data)){return;}consteditor=this.editor;//将数据解析并添加到图形树中constpastedGraphs=editor.sceneGraph.addGraphsByStr(pastedData.data);if(pastedGraphs.length===0){return;}//添加到历史记录（以实现撤销重做）editor.commandManager.pushCommand(newAddShapeCommand('pastedgraphs',editor,pastedGraphs),);//标记粘贴图形为选中状态editor.selectedElements.setItems(pastedGraphs);constbbox=editor.selectedElements.getBBox()!;//如果是右键粘贴（x和y没有值）且跨图纸粘贴，计算粘贴图形要移动的目标位置if((x===undefined||y===undefined)&&pastedData.paperId!==editor.paperId){constvwCenter=this.editor.viewportManager.getCenter();x=vwCenter.x-bbox.width/2;y=vwCenter.y-bbox.height/2;}//遍历粘贴图形，根据x和y进行位置修正if(x!==undefined&&y!==undefined){constdx=x-bbox.x;constdy=y-bbox.y;if(dx||dy){Graph.dMove(pastedGraphs,dx,dy);}}//渲染画布editor.sceneGraph.render();}//销毁时解绑事件监听destroy(){this.unbindEvents();}}一些优化点

这里补充一些可以优化的点。

前面的实现其实有个用户体验不好的地方，就是用户复制后，在图形编辑器外粘贴，会粘贴出一堆意义不明的字符串。

最好是用户粘贴不出任何东西，这个有办法解决。

之前我们用的是 clipboard.writeText() 方法，给数据指定的是 text/plain 的 MIME 类型。

实际上我们可以用另一个方法 clipboard.write()，该方法可以指定其他的文本相关 MIME 类型，然后将我们真正的数据放到到一些不会被其他软件解析的角落里。

我们来看看隔壁 Figma 是怎么做的？它将复制的数据设置为 text/html 类型。

我再看看它的 HTML 都是什么内容。

可以看到数据主要保存在两个 span 元素上，它们都没有文本内容，所以在文本编辑器中进行标准的粘贴是粘贴不出任何内容的。

但这里 Figma 巧妙地用了一个自定义的 data-metadata 和 data-buffer 去保存真正的数据。
这个数据看着像是序列化后的类似 base64 格式的内容。

这样就能巧妙地防止其他文本编辑器能够粘贴出内容，自己的编辑器却会在解析 html 结构时特意去读这个自定义属性拿到数据。

代码实现大概为：

constblob=newBlob([`<metacharset="utf-8"><span data-suika-meta="${这里是元数据}"></span><span data-suika-data="${这里是主体数据}"><span>`,],{type:'text/html'},);navigator.clipboard.write([newClipboardItem({[blob.type]:blob})]).then(()=>{console.log('copied');});

Firefox 目前（2023.08.06）不支持 ClipboardItem，需要 document.execCommand('copy') 的旧方法来兼容。

如果要用 text/html 这种方式，还要做多几个工作：

然后就是粘贴文字、图形的情况，这时我们就不能用 clipboard.writeText()，要用 clipboard.write() 了。

总结一下图形编辑器的图形复制粘贴的逻辑。

在复制时，要将选中图形进行序列化保存到剪贴板。

粘贴的场景就比较多了。
粘贴时需要反序列化解析数据，并创建对象添加到图形树上。

粘贴要注意权限问题，快捷键粘贴权限比较宽松，不需要用户授权；右键粘贴则因为是开发者的主动行为，所以需要授权，如果用户不授权，可以考虑提示用户用快捷键粘贴的方式，或粘贴上一次快捷键粘贴的内容。

右键粘贴时需要将图形粘贴到光标位置上。
快捷键粘贴时则需要考虑是否跨图纸，如果是相同图纸，原地粘贴即可；如果是另一张图纸，则粘贴到视口正中心。

我是前端西瓜哥，欢迎关注我，学习更多图形编辑器开发知识。