diff --git a/__tests__/src/lib/CanvasAnnotationDisplay.test.js b/__tests__/src/lib/CanvasAnnotationDisplay.test.js index 0427dec5209f1f1f556ec349a5f36fb1b0bb2942..8ad1b6fd6300160515998f0753c6d3b8579c88b8 100644 --- a/__tests__/src/lib/CanvasAnnotationDisplay.test.js +++ b/__tests__/src/lib/CanvasAnnotationDisplay.test.js @@ -64,7 +64,8 @@ describe('CanvasAnnotationDisplay', () => { const subject = createSubject({ resource: new AnnotationResource(dualStrategyAnno), }); - subject.svgContext(context); + subject.context = context; + subject.svgContext(); expect(context.stroke).toHaveBeenCalledWith({}); expect(context.save).toHaveBeenCalledWith(); expect(context.restore).toHaveBeenCalledWith(); @@ -81,7 +82,8 @@ describe('CanvasAnnotationDisplay', () => { const subject = createSubject({ resource: new AnnotationResource({ on: 'www.example.com/#xywh=10,10,100,200' }), }); - subject.fragmentContext(context); + subject.context = context; + subject.fragmentContext(); expect(context.strokeRect).toHaveBeenCalledWith(-90, 10, 100, 200); expect(context.strokeStyle).toEqual('blue'); expect(context.lineWidth).toEqual(20); diff --git a/src/lib/CanvasAnnotationDisplay.js b/src/lib/CanvasAnnotationDisplay.js index c1955b0598e2b204aa7f5a0c8126f060e4f4524b..5ca6bbd0b0bd19bf34b06eeddeed5926443a5bd2 100644 --- a/src/lib/CanvasAnnotationDisplay.js +++ b/src/lib/CanvasAnnotationDisplay.js @@ -16,10 +16,11 @@ export default class CanvasAnnotationDisplay { /** */ toContext(context) { + this.context = context; if (this.resource.svgSelector) { - this.svgContext(context); + this.svgContext(); } else { - this.fragmentContext(context); + this.fragmentContext(); } } @@ -29,15 +30,15 @@ export default class CanvasAnnotationDisplay { } /** */ - svgContext(context) { + svgContext() { [...this.svgPaths].forEach((element) => { /** * Note: Path2D is not supported in IE11. * TODO: Support multi canvas offset * One example: https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath */ - context.save(); - context.translate(this.offset.x, this.offset.y); + this.context.save(); + this.context.translate(this.offset.x, this.offset.y); const p = new Path2D(element.attributes.d.nodeValue); /** * Note: we could do something to return the svg styling attributes as @@ -46,35 +47,34 @@ export default class CanvasAnnotationDisplay { * context.strokeStyle = element.attributes.stroke.nodeValue; * context.lineWidth = element.attributes['stroke-width'].nodeValue; */ - this.setupLineDash(context, element.attributes); - context.strokeStyle = this.strokeColor( // eslint-disable-line no-param-reassign + this.setupLineDash(element.attributes); + this.context.strokeStyle = this.strokeColor( // eslint-disable-line no-param-reassign element.attributes, ); - context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign + this.context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign element.attributes, ); - context.stroke(p); - context.restore(); + this.context.stroke(p); + this.context.restore(); }); } - /* eslint-disable require-jsdoc, class-methods-use-this */ - setupLineDash(context, elementAttributes) { + /** */ + setupLineDash(elementAttributes) { // stroke-dasharray if (elementAttributes['stroke-dasharray']) { - context.setLineDash(elementAttributes['stroke-dasharray'].nodeValue.split(',')); + this.context.setLineDash(elementAttributes['stroke-dasharray'].nodeValue.split(',')); } } - /* eslint-enable require-jsdoc, class-methods-use-this */ /** */ - fragmentContext(context) { + fragmentContext() { const fragment = this.resource.fragmentSelector; fragment[0] += this.offset.x; fragment[1] += this.offset.y; - context.strokeStyle = this.color; // eslint-disable-line no-param-reassign - context.lineWidth = this.lineWidth(); // eslint-disable-line no-param-reassign - context.strokeRect(...fragment); + this.context.strokeStyle = this.color; // eslint-disable-line no-param-reassign + this.context.lineWidth = this.lineWidth(); // eslint-disable-line no-param-reassign + this.context.strokeRect(...fragment); } /** */