merchi_product_editor
Version:
A React component for editing product images using Fabric.js
41 lines (40 loc) • 1.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.setupKeyboardEvents = void 0;
var setupKeyboardEvents = function (canvas, onObjectRemoved, customDeleteHandler) {
if (!canvas || !canvas.getElement()) {
return function () { };
}
var canvasEl = canvas.getElement();
canvasEl.setAttribute('tabindex', '1');
var handleKeyDown = function (e) {
if (e.key === 'Delete' || e.key === 'Backspace') {
var activeObject = canvas.getActiveObject();
if (activeObject) {
if (customDeleteHandler) {
customDeleteHandler(activeObject);
}
else {
canvas.remove(activeObject);
canvas.renderAll();
}
if (onObjectRemoved) {
onObjectRemoved('');
}
}
}
};
document.addEventListener('keydown', handleKeyDown);
canvasEl.addEventListener('keydown', handleKeyDown);
canvas.on('selection:created', function () { return canvasEl.focus(); });
canvas.on('selection:updated', function () { return canvasEl.focus(); });
canvas.on('mouse:down', function () { return canvasEl.focus(); });
return function () {
document.removeEventListener('keydown', handleKeyDown);
canvasEl.removeEventListener('keydown', handleKeyDown);
canvas.off('selection:created');
canvas.off('selection:updated');
canvas.off('mouse:down');
};
};
exports.setupKeyboardEvents = setupKeyboardEvents;