Skip to content
Snippets Groups Projects
Commit 50a3c413 authored by Jack Reed's avatar Jack Reed Committed by Chris Beer
Browse files

Once again, recalculate a scaled version of the stroke. This time seems to be correct

parent 277b09f6
Branches
Tags
No related merge requests found
...@@ -412,7 +412,8 @@ describe('OpenSeadragonViewer', () => { ...@@ -412,7 +412,8 @@ describe('OpenSeadragonViewer', () => {
}; };
wrapper.instance().viewer = { wrapper.instance().viewer = {
viewport: { viewport: {
getZoom: () => (0.0005), getMaxZoom: () => (1),
getZoom: () => (0.05),
}, },
}; };
...@@ -424,7 +425,7 @@ describe('OpenSeadragonViewer', () => { ...@@ -424,7 +425,7 @@ describe('OpenSeadragonViewer', () => {
wrapper.instance().annotationsToContext(annotations); wrapper.instance().annotationsToContext(annotations);
const context = wrapper.instance().osdCanvasOverlay.context2d; const context = wrapper.instance().osdCanvasOverlay.context2d;
expect(context.strokeStyle).toEqual('yellow'); expect(context.strokeStyle).toEqual('yellow');
expect(context.lineWidth).toEqual(4); expect(context.lineWidth).toEqual(20);
expect(strokeRect).toHaveBeenCalledWith(10, 10, 100, 200); expect(strokeRect).toHaveBeenCalledWith(10, 10, 100, 200);
}); });
}); });
......
...@@ -10,7 +10,7 @@ function createSubject(args) { ...@@ -10,7 +10,7 @@ function createSubject(args) {
x: -100, x: -100,
y: 0, y: 0,
}, },
zoom: 0.0005, zoomRatio: 0.5,
...args, ...args,
}); });
} }
...@@ -72,7 +72,7 @@ describe('CanvasAnnotationDisplay', () => { ...@@ -72,7 +72,7 @@ describe('CanvasAnnotationDisplay', () => {
expect(context.restore).toHaveBeenCalledWith(); expect(context.restore).toHaveBeenCalledWith();
expect(context.translate).toHaveBeenCalledWith(-100, 0); expect(context.translate).toHaveBeenCalledWith(-100, 0);
expect(context.strokeStyle).toEqual('#00bfff'); expect(context.strokeStyle).toEqual('#00bfff');
expect(context.lineWidth).toEqual(617.4334); expect(context.lineWidth).toEqual(61.74334);
expect(context.fill).toHaveBeenCalled(); expect(context.fill).toHaveBeenCalled();
}); });
}); });
...@@ -88,7 +88,7 @@ describe('CanvasAnnotationDisplay', () => { ...@@ -88,7 +88,7 @@ describe('CanvasAnnotationDisplay', () => {
subject.fragmentContext(); subject.fragmentContext();
expect(context.strokeRect).toHaveBeenCalledWith(-90, 10, 100, 200); expect(context.strokeRect).toHaveBeenCalledWith(-90, 10, 100, 200);
expect(context.strokeStyle).toEqual('blue'); expect(context.strokeStyle).toEqual('blue');
expect(context.lineWidth).toEqual(20); expect(context.lineWidth).toEqual(2);
}); });
}); });
}); });
...@@ -189,14 +189,13 @@ export class OpenSeadragonViewer extends Component { ...@@ -189,14 +189,13 @@ export class OpenSeadragonViewer extends Component {
annotationsToContext(annotations, color = 'yellow') { annotationsToContext(annotations, color = 'yellow') {
const { canvasWorld } = this.props; const { canvasWorld } = this.props;
const context = this.osdCanvasOverlay.context2d; const context = this.osdCanvasOverlay.context2d;
const zoom = this.viewer.viewport.getZoom(true); const zoomRatio = this.viewer.viewport.getZoom(true) / this.viewer.viewport.getMaxZoom();
const width = canvasWorld.worldBounds()[2];
annotations.forEach((annotation) => { annotations.forEach((annotation) => {
annotation.resources.forEach((resource) => { annotation.resources.forEach((resource) => {
if (!canvasWorld.canvasIds.includes(resource.targetId)) return; if (!canvasWorld.canvasIds.includes(resource.targetId)) return;
const offset = canvasWorld.offsetByCanvas(resource.targetId); const offset = canvasWorld.offsetByCanvas(resource.targetId);
const canvasAnnotationDisplay = new CanvasAnnotationDisplay({ const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
color, offset, resource, width, zoom, color, offset, resource, zoomRatio,
}); });
canvasAnnotationDisplay.toContext(context); canvasAnnotationDisplay.toContext(context);
}); });
......
...@@ -5,13 +5,12 @@ ...@@ -5,13 +5,12 @@
export default class CanvasAnnotationDisplay { export default class CanvasAnnotationDisplay {
/** */ /** */
constructor({ constructor({
resource, color, zoom, offset, width, resource, color, zoomRatio, offset,
}) { }) {
this.resource = resource; this.resource = resource;
this.color = color; this.color = color;
this.zoom = zoom; this.zoomRatio = zoomRatio;
this.offset = offset; this.offset = offset;
this.width = width || 1000;
} }
/** */ /** */
...@@ -53,6 +52,7 @@ export default class CanvasAnnotationDisplay { ...@@ -53,6 +52,7 @@ export default class CanvasAnnotationDisplay {
'stroke-linecap': 'lineCap', 'stroke-linecap': 'lineCap',
'stroke-linejoin': 'lineJoin', 'stroke-linejoin': 'lineJoin',
'stroke-miterlimit': 'miterlimit', 'stroke-miterlimit': 'miterlimit',
'stroke-width': 'lineWidth',
}; };
Object.keys(svgToCanvasMap).forEach((key) => { Object.keys(svgToCanvasMap).forEach((key) => {
if (element.attributes[key]) { if (element.attributes[key]) {
...@@ -60,9 +60,8 @@ export default class CanvasAnnotationDisplay { ...@@ -60,9 +60,8 @@ export default class CanvasAnnotationDisplay {
} }
}); });
this.context.lineWidth = this.lineWidth( // eslint-disable-line no-param-reassign // Resize the stroke based off of the zoomRatio (currentZoom / maxZoom)
element.attributes, this.context.lineWidth /= this.zoomRatio;
);
this.context.stroke(p); this.context.stroke(p);
// Wait to set the fill, so we can adjust the globalAlpha value if we need to // Wait to set the fill, so we can adjust the globalAlpha value if we need to
...@@ -81,21 +80,11 @@ export default class CanvasAnnotationDisplay { ...@@ -81,21 +80,11 @@ export default class CanvasAnnotationDisplay {
const fragment = this.resource.fragmentSelector; const fragment = this.resource.fragmentSelector;
fragment[0] += this.offset.x; fragment[0] += this.offset.x;
fragment[1] += this.offset.y; fragment[1] += this.offset.y;
this.context.strokeStyle = this.color; // eslint-disable-line no-param-reassign this.context.strokeStyle = this.color;
this.context.lineWidth = this.lineWidth(); // eslint-disable-line no-param-reassign this.context.lineWidth = 1 / this.zoomRatio;
this.context.strokeRect(...fragment); 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() { get svgPaths() {
const parser = new DOMParser(); const parser = new DOMParser();
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment