I'm trying to create a user timestamp annotation that has the user name and date/time that the annotation was created. The problem that I'm running into is that if I set the date in the annotation's draw function, it updates every time I click on the annotation. So, I can create an annotation and come back to move it, etc, and the time updates. How can I set the date/time to be only the time that the initial user adds the annotation to the document?
Here's the code for the annotation prototype.
UserTimestamp.prototype = $.extend(new Annotations.MarkupAnnotation(), {
elementName: 'userTimestamp',
draw: function (ctx) {
var annotManager = readerControl.docViewer.getAnnotationManager();
var userName = annotManager.getCurrentUser();
var now = new Date();
var dateFormatted = now.toLocaleDateString("en-us", {month: 'short'}) + " " + now.getDate() + ", " + now.getFullYear().toString();
var hours = now.getHours();
var hoursTwelve;
var dayHalf;
if (hours >=12) {
hoursTwelve = hours - 12;
dayHalf = "PM";
} else {
hoursTwelve = hours;
dayHalf = "AM";
}
var timeFormatted = hoursTwelve + ":" + now.getMinutes() + " " + dayHalf;
ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.strokeRect(this.X, this.Y, 175, 90)
ctx.font = '21px sans-serif';
ctx.fillText('' + userName + '', this.X + 10, this.Y + 25, 175);
ctx.fillText(dateFormatted, this.X + 10, this.Y + 50, 175);
ctx.fillText(timeFormatted, this.X + 10, this.Y + 75, 175);
ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
ctx.fillRect(this.X, this.Y, 175, 90);
}
});