I am using joint js and rappid with the angular 8 and I have done most of the tasks but in using keyboard events there seems to be a issue. When I copy an element and pasted it on graph it works fine. But for the next element selected it is pasting that new element multiple times.
Here is my code.
var keyboard = this.keyboard = new joint.ui.Keyboard();
var clipboard = this.clipboard = new joint.ui.Clipboard();
selection.collection.on('reset add remove', this.onSelectionChange.bind(this));
paper.on('element:pointerdown', function(elementView: joint.dia.ElementView,evt: joint.dia.Event) {
clipboard.clear();
keyboard.on({
'ctrl+c': function(evt) {
selection.collection.reset();
//clipboard.clear();
selection.collection.add(elementView.model);
clipboard.copyElements(selection.collection, paper.model);
//console.log(clipboard);
},
'ctrl+v': function(evt) {
//console.log(clipboard);
var pastedCells = clipboard.pasteCells(graph, {
translate: { dx: 20, dy: 20 },
useLocalStorage: true
});
var elements = _.filter(pastedCells, function(cell) {
return cell.isElement();
});
//console.log(elements);
// Make sure pasted elements get selected immediately. This makes the UX better as
// the user can immediately manipulate the pasted elements.
selection.collection.reset(elements);
},
});
});
onSelectionChange() {
const { paper, selection,clipboard } = this;
const { collection } = selection;
//console.log(collection.models.child);
// collection.models.forEach(function(model: joint.dia.Element) { if(!model.collection) { clipboard.clear();}});
paper.removeTools();
joint.ui.Halo.clear(paper);
joint.ui.FreeTransform.clear(paper);
joint.ui.Inspector.close();
if(collection.first() == undefined){
clipboard.clear();
}
if (collection.length === 1) {
var primaryCell = collection.first();
var primaryCellView = paper.requireView(primaryCell);
selection.destroySelectionBox(primaryCell);
this.selectPrimaryCell(primaryCellView);
} else if (collection.length === 2) {
collection.each(function(cell) {
selection.createSelectionBox(cell);
});
}
}
selectPrimaryCell(cellView) {
var cell = cellView.model
if (cell.isElement()) {
this.selectPrimaryElement(cellView);
} else {
this.selectPrimaryLink(cellView);
}
//this.createInspector(cell);
}
selectPrimaryElement(elementView) {
var element = elementView.model;
console.log(element.collection);
new joint.ui.FreeTransform({
cellView: elementView,
allowRotation: false,
preserveAspectRatio: !!element.get('preserveAspectRatio'),
allowOrthogonalResize: element.get('allowOrthogonalResize') !== false
}).render();
}
I have different thing like resetting the clipboard , resetting the selection and resetting the keyboard but nothing seems to be working.