From 56c7f0722e8e99eb67e352246dcc59375102e7d9 Mon Sep 17 00:00:00 2001 From: Doug Martin Date: Fri, 28 Jun 2024 08:27:24 -0400 Subject: [PATCH] feat: Add keyboard annotation deletes [PT-185363141] This adds support for deleting annotations while editing the annotation text. If the user pressed the delete or backspace key when the previous value of the text area was empty the annotation is deleted. --- app/scripts/fabric-extensions/annotations.js | 35 ++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/app/scripts/fabric-extensions/annotations.js b/app/scripts/fabric-extensions/annotations.js index c1b6720..e74d7d8 100644 --- a/app/scripts/fabric-extensions/annotations.js +++ b/app/scripts/fabric-extensions/annotations.js @@ -90,6 +90,32 @@ function handleAnnotations(annotationTool) { }); } }); + + canvas.on('text:editing:entered', (e) => { + e.target.__annotationTextLastValue = e.target.hiddenTextarea.value; + if (e.target.__annotationKeyUpHandler) { + e.target.hiddenTextarea.removeEventListener("keyup", e.target.__annotationKeyUpHandler); + } + + e.target.__annotationKeyUpHandler = (keyEvent) => { + var key = keyEvent.key; + var value = e.target.hiddenTextarea.value; + if (((key === "Delete") || (key === "Backspace")) && (value === "") && (e.target.__annotationTextLastValue === "")) { + e.target.hiddenTextarea.removeEventListener("keyup", e.target.__annotationKeyUpHandler); + e.target.__annotationKeyUpHandler = null; + canvas.remove(e.target); + } + e.target.__annotationTextLastValue = value; + } + e.target.hiddenTextarea.addEventListener("keyup", e.target.__annotationKeyUpHandler); + }); + + canvas.on('text:editing:exiting', (e) => { + if (e.target.__annotationKeyUpHandler) { + e.target.hiddenTextarea.removeEventListener("keyup", e.target.__annotationKeyUpHandler); + e.target.__annotationKeyUpHandler = null; + } + }); } module.exports = handleAnnotations; @@ -305,6 +331,15 @@ module.exports = handleAnnotations; point.y >= borderRect.top && point.y <= borderRect.top + borderRect.height; }, + exitEditing: function() { + // fire this before calling into the library so we have access to the hidden textarea + // which isn't present when the 'text:editing:exited' event is fired + if (this.canvas) { + this.canvas.fire('text:editing:exiting', { target: this }); + } + this.callSuper('exitEditing'); + }, + _renderTextCommon: function (ctx, method) { this.callSuper('_renderTextCommon', ctx, method);