From 50a3c413374230e6349538b64b2c6571c4a4c5c4 Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Tue, 28 Apr 2020 17:05:15 -0600
Subject: [PATCH] Once again, recalculate a scaled version of the stroke. This
time seems to be correct
---
.../components/OpenSeadragonViewer.test.js | 5 ++--
.../src/lib/CanvasAnnotationDisplay.test.js | 6 ++---
src/components/OpenSeadragonViewer.js | 5 ++--
src/lib/CanvasAnnotationDisplay.js | 25 ++++++-------------
4 files changed, 15 insertions(+), 26 deletions(-)
diff --git a/__tests__/src/components/OpenSeadragonViewer.test.js b/__tests__/src/components/OpenSeadragonViewer.test.js
index 1c8f04186..10cf73d77 100644
--- a/__tests__/src/components/OpenSeadragonViewer.test.js
+++ b/__tests__/src/components/OpenSeadragonViewer.test.js
@@ -412,7 +412,8 @@ describe('OpenSeadragonViewer', () => {
};
wrapper.instance().viewer = {
viewport: {
- getZoom: () => (0.0005),
+ getMaxZoom: () => (1),
+ getZoom: () => (0.05),
},
};
@@ -424,7 +425,7 @@ describe('OpenSeadragonViewer', () => {
wrapper.instance().annotationsToContext(annotations);
const context = wrapper.instance().osdCanvasOverlay.context2d;
expect(context.strokeStyle).toEqual('yellow');
- expect(context.lineWidth).toEqual(4);
+ expect(context.lineWidth).toEqual(20);
expect(strokeRect).toHaveBeenCalledWith(10, 10, 100, 200);
});
});
diff --git a/__tests__/src/lib/CanvasAnnotationDisplay.test.js b/__tests__/src/lib/CanvasAnnotationDisplay.test.js
index f96c6d09f..1e8904d47 100644
--- a/__tests__/src/lib/CanvasAnnotationDisplay.test.js
+++ b/__tests__/src/lib/CanvasAnnotationDisplay.test.js
@@ -10,7 +10,7 @@ function createSubject(args) {
x: -100,
y: 0,
},
- zoom: 0.0005,
+ zoomRatio: 0.5,
...args,
});
}
@@ -72,7 +72,7 @@ describe('CanvasAnnotationDisplay', () => {
expect(context.restore).toHaveBeenCalledWith();
expect(context.translate).toHaveBeenCalledWith(-100, 0);
expect(context.strokeStyle).toEqual('#00bfff');
- expect(context.lineWidth).toEqual(617.4334);
+ expect(context.lineWidth).toEqual(61.74334);
expect(context.fill).toHaveBeenCalled();
});
});
@@ -88,7 +88,7 @@ describe('CanvasAnnotationDisplay', () => {
subject.fragmentContext();
expect(context.strokeRect).toHaveBeenCalledWith(-90, 10, 100, 200);
expect(context.strokeStyle).toEqual('blue');
- expect(context.lineWidth).toEqual(20);
+ expect(context.lineWidth).toEqual(2);
});
});
});
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index 0d7037322..0c615161c 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -189,14 +189,13 @@ export class OpenSeadragonViewer extends Component {
annotationsToContext(annotations, color = 'yellow') {
const { canvasWorld } = this.props;
const context = this.osdCanvasOverlay.context2d;
- const zoom = this.viewer.viewport.getZoom(true);
- const width = canvasWorld.worldBounds()[2];
+ const zoomRatio = this.viewer.viewport.getZoom(true) / this.viewer.viewport.getMaxZoom();
annotations.forEach((annotation) => {
annotation.resources.forEach((resource) => {
if (!canvasWorld.canvasIds.includes(resource.targetId)) return;
const offset = canvasWorld.offsetByCanvas(resource.targetId);
const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
- color, offset, resource, width, zoom,
+ color, offset, resource, zoomRatio,
});
canvasAnnotationDisplay.toContext(context);
});
diff --git a/src/lib/CanvasAnnotationDisplay.js b/src/lib/CanvasAnnotationDisplay.js
index 6520703a4..80638297a 100644
--- a/src/lib/CanvasAnnotationDisplay.js
+++ b/src/lib/CanvasAnnotationDisplay.js
@@ -5,13 +5,12 @@
export default class CanvasAnnotationDisplay {
/** */
constructor({
- resource, color, zoom, offset, width,
+ resource, color, zoomRatio, offset,
}) {
this.resource = resource;
this.color = color;
- this.zoom = zoom;
+ this.zoomRatio = zoomRatio;
this.offset = offset;
- this.width = width || 1000;
}
/** */
@@ -53,6 +52,7 @@ export default class CanvasAnnotationDisplay {
'stroke-linecap': 'lineCap',
'stroke-linejoin': 'lineJoin',
'stroke-miterlimit': 'miterlimit',
+ 'stroke-width': 'lineWidth',
};
Object.keys(svgToCanvasMap).forEach((key) => {
if (element.attributes[key]) {
@@ -60,9 +60,8 @@ export default class CanvasAnnotationDisplay {
}
});
- this.context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign
- element.attributes,
- );
+ // Resize the stroke based off of the zoomRatio (currentZoom / maxZoom)
+ this.context.lineWidth /= this.zoomRatio;
this.context.stroke(p);
// Wait to set the fill, so we can adjust the globalAlpha value if we need to
@@ -81,21 +80,11 @@ export default class CanvasAnnotationDisplay {
const fragment = this.resource.fragmentSelector;
fragment[0] += this.offset.x;
fragment[1] += this.offset.y;
- this.context.strokeStyle = this.color; // eslint-disable-line no-param-reassign
- this.context.lineWidth = this.lineWidth(); // eslint-disable-line no-param-reassign
+ this.context.strokeStyle = this.color;
+ this.context.lineWidth = 1 / this.zoomRatio;
this.context.strokeRect(...fragment);
}
- /** */
- lineWidth(elementAttributes) {
- console.log(this.zoom, this.width);
- let calculatedWidth = Math.ceil(10 / (this.zoom * this.width));
- if (elementAttributes && elementAttributes['stroke-width']) {
- calculatedWidth *= elementAttributes['stroke-width'].nodeValue;
- }
- return calculatedWidth;
- }
-
/** */
get svgPaths() {
const parser = new DOMParser();
--
GitLab