WebViewer Version: 7.x.x
I need to create a custom annotation that extends StampAnnotation which is serializable and deserializable from xfdf.
In v7 of webviewer, we must extend CustomAnnotation class and reimplement methods that matches StampAnnotation.
In v8 of webviewer, the following is provided
Annotations.CustomAnnotation.createFromClass(string, AnnotationCtor)
And our custom annotation is able to extend from StampAnnotation directly and passed to
CustomAnnotation.createFromClass
to create a serializable custom annotation.
How can we mimic what
Annotations.CustomAnnotation.createFromClass(string, AnnotationCtor)
does in v8, in v7 of webviewer?
system
June 13, 2022, 2:48pm
2
Hello, I’m Ron, an automated tech support bot
While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:
Guides:
APIs:
Forums:
Hi James,
It is possible to mimic that API by creating your class and calling the methods from the StampAnnotation class prototype:
class MyCustomAnnotation extends Annotations.CustomAnnotation {
constructor(initializer) {
super('myAnnotation', initializer);
Annotations.StampAnnotation.apply(this, [initializer]);
}
serialize(el) {
// Serialize custom annotation properties first
el = Annotations.CustomAnnotation.prototype.serialize.apply(this, arguments);
// Serialize stamp properties second
el = Annotations.StampAnnotation.prototype.serialize.apply(this, arguments);
// Remove duplicate child nodes since we are serializing twice
for (let i = 0; i < el.childElementCount; i++) {
const node = el.childNodes[i];
const duplicateNodes = [...el.getElementsByTagName(node.tagName)];
while (duplicateNodes.length > 1) {
const duplicate = duplicateNodes.pop();
if (!duplicate.parentElement || duplicate.parentElement !== el) {
continue;
}
el.removeChild(duplicate);
}
}
return el;
}
deserialize() {
Annotations.CustomAnnotation.prototype.deserialize.apply(this, arguments);
Annotations.StampAnnotation.prototype.deserialize.apply(this, arguments);
}
}
MyCustomAnnotation.prototype.elementName = 'myAnnotation';
MyCustomAnnotation.prototype.draw = Annotations.StampAnnotation.prototype.draw;
MyCustomAnnotation.prototype = Object.assign(new Annotations.StampAnnotation(), Annotations.CustomAnnotation.prototype, MyCustomAnnotation.prototype);
I will also just leave the custom annotation guide here for reference: PDFTron Systems Inc. | Documentation
Let me know if this helps!
1 Like
So in your example, you are extending CustomAnnotation and calling methods from StampAnnotation. Can it be the other way around? In other words, “Can I extend StampAnnotation and call methods or add properties from CustomAnnotation?” so I can extend built-in annotations and create CustomAnnotation class definitions from them such that are serializable/deserializable to/from xfdf?
Annotations.CustomAnnotation.createFromClass(string, AnnotationCtor) allows me to do this
class MyCustomStampAnnotation extends Annotations.StampAnnotation {
// ...
}
const CustomStamp = Annotations.CustomAnnotation.createFromClass('CustomStamp', MyCustomStampAnnotation);
Sure. With JavaScript prototypes, you can call any method from another class as long as you provide the this context. However, I cannot guarantee that everything will work as expected due to the differences in type.
