jsMind 實現複製粘貼

最近在用jsMind做在線版的腦圖設計器，發現缺少複製粘貼功能，就自己添加了一個。效果如下：

實現方法：

1.首先在mapping配置項中，增添C和V鍵

2.在整體事件監聽方法內加上 ctrl+c 和 Ctrl+V 的判定

handler: function (e) {
    if (this.jm.view.is_editing()) { return; }
    var evt = e || event;
    if (!this.opts.enable) { return true; }
    var kc = evt.keyCode + (evt.metaKey << 13) + (evt.ctrlKey << 12) + (evt.altKey << 11) + (evt.shiftKey << 10);
    if(evt.keyCode==67||evt.keyCode==86) {
        if(evt.ctrlKey) {//加上Ctrl鍵判斷
            if(evt.keyCode==67) 
            this.handle_copy(this.jm, e);
            if(evt.keyCode==86)
            this.handle_paste(this.jm, e);
        }
    }else if (kc in this._mapping) {
        this._mapping[kc].call(this, this.jm, e);
    }
},

 3.聲明覆制方法

注意：這裏主要是把複製的節點信息數據 保存下來。由於get_selected_node()獲取到的不是個標準json對象，就沒有處理直接保存到了window 中，你可以自行遍歷，然後處理成所要的json後，放到localStorage裏

handle_copy:function(_jm, e) {
    var evt = e || event;
    var selected_node = _jm.get_selected_node();
    window.jsMindCopyNode = selected_node;
},

 4.聲明粘貼方法

handle_paste:function(_jm, e) {
    var evt = e || event;
    var selected_node = _jm.get_selected_node();
    if (!!selected_node) {//jsMind會查找三次 select節點所以用 !!
        this._mapAddNode(_jm,selected_node,window.jsMindCopyNode);
        delete window.jsMindCopyNode;
    }
},

粘貼方法裏，調用的是一個遞歸插入，因爲複製的節點裏可能含有子節點

//遞歸插入
_mapAddNode(_jm,parentNode,insertNode) {
    const me = this;
    var nodeid = jm.util.uuid.newid();
    if (!jm.util.is_node(insertNode)) return;
    var newNode =  _jm.add_node(parentNode,nodeid,insertNode.topic,{});
    if(insertNode.children) {
        insertNode.children.forEach(node=>{
            me._mapAddNode(_jm,newNode,node);
        });
    }
},

這樣就大工告成了。

PS:

你也可以藉助剪貼板，或者用clipboard.js 外部腳本，把處理成標準json數據格式的數據轉成字符串存到剪貼板中

後來回看了下processon 裏的做法，發現是把節點數據存入存到LocalStorage裏的，