diff --git a/src/draw.js b/src/draw.js index e02b02dc..5266e91f 100644 --- a/src/draw.js +++ b/src/draw.js @@ -11,9 +11,5 @@ import drawImage from './internal/drawImage.js'; export default function (element) { const enabledElement = getEnabledElement(element); - if (enabledElement.image === undefined) { - throw new Error('draw: image has not been loaded yet'); - } - drawImage(enabledElement); } diff --git a/src/internal/drawImageSync.js b/src/internal/drawImageSync.js index 88fa19d0..cae5ae7e 100644 --- a/src/internal/drawImageSync.js +++ b/src/internal/drawImageSync.js @@ -21,7 +21,7 @@ export default function (enabledElement, invalidated) { const layers = enabledElement.layers || []; // Check if enabledElement can be redrawn - if (!enabledElement.canvas || !(enabledElement.image || layers.length)) { + if (!enabledElement.canvas || !enabledElement.image) { return; } diff --git a/src/updateImage.js b/src/updateImage.js index 6773e18d..cfa292f2 100644 --- a/src/updateImage.js +++ b/src/updateImage.js @@ -12,9 +12,5 @@ import drawImage from './internal/drawImage.js'; export default function (element, invalidated = false) { const enabledElement = getEnabledElement(element); - if (enabledElement.image === undefined && !enabledElement.layers.length) { - throw new Error('updateImage: image has not been loaded yet'); - } - drawImage(enabledElement, invalidated); } diff --git a/test/drawImageSync_test.js b/test/drawImageSync_test.js new file mode 100644 index 00000000..11893055 --- /dev/null +++ b/test/drawImageSync_test.js @@ -0,0 +1,146 @@ +import { assert } from 'chai'; // eslint-disable-line import/extensions + +import enable from '../src/enable.js'; +import disable from '../src/disable.js'; +import displayImage from '../src/displayImage.js'; +import drawImageSync from '../src/internal/drawImageSync.js'; +import { addLayer } from '../src/layers.js'; +import { getEnabledElement } from '../src/enabledElements.js'; + +const IMAGE_DATA = [1, 1, 1, 255, 255, 255, 255, 255, 255, 255, 255, 255, 1, 1, 1, 255]; +const EMPTY_IMAGE_DATA = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + +function createImage () { + const height = 2; + const width = 2; + const getPixelData = () => new Uint8Array([0, 255, 255, 0]); + + return { + imageId: 'exampleImageId', + minPixelValue: 0, + maxPixelValue: 255, + slope: 1.0, + intercept: 0, + windowCenter: 127, + windowWidth: 256, + getPixelData, + rows: height, + columns: width, + height, + width, + color: false, + sizeInBytes: width * height * 2 + }; +} + + +describe('drawImageSync', function () { + beforeEach(function () { + const el = document.createElement('div'); + + el.style.width = '2px'; + el.style.height = '2px'; + el.style.position = 'absolute'; + + document.body.appendChild(el); + enable(el); + + this.element = el; + this.enabledElement = getEnabledElement(el); + }); + afterEach(function () { + disable(this.element); + document.body.removeChild(this.element); + }); + + + it('should draw the image', function () { + const image = createImage(); + + displayImage(this.element, image); + drawImageSync(this.enabledElement); + + // Grab the pixel data from the canvas + const ctx = this.enabledElement.canvas.getContext('2d'); + const imageData = ctx.getImageData(0, 0, 2, 2); + + // Check it matches what we expect + assert.deepEqual( + Array.from(imageData.data), + IMAGE_DATA + ); + }); + + + describe('should validate or resolve required state', function () { + it('when there is no image or layer', function () { + const element = this.element; + const enabledElement = getEnabledElement(element); + + // Add a new layer with no image. + addLayer(element, undefined); + + // This should not throw + drawImageSync(enabledElement); + + // We're sure we don't have an image + assert.isUndefined(enabledElement.image); + + // And our canvas is still empty + const ctx = this.enabledElement.canvas.getContext('2d'); + const imageData = ctx.getImageData(0, 0, 2, 2); + + assert.deepEqual( + Array.from(imageData.data), + EMPTY_IMAGE_DATA + ); + + }); + + it('when element has a layer but no image', function () { + const element = this.element; + const enabledElement = getEnabledElement(element); + + // Add a new layer with an image- note that this will also set enabledElement.image. + const image = createImage(); + + addLayer(element, image); + + // This should not throw + drawImageSync(enabledElement); + + // And we have rendered the image + const ctx = this.enabledElement.canvas.getContext('2d'); + const imageData = ctx.getImageData(0, 0, 2, 2); + + assert.deepEqual( + Array.from(imageData.data), + IMAGE_DATA + ); + }); + + it('element has only one empty layer', function () { + const element = this.element; + const enabledElement = getEnabledElement(element); + + // Add a new layer without an image + const image = undefined; + + addLayer(element, image); + + // This should not throw + drawImageSync(enabledElement); + + // Grab the pixel data from the canvas + const ctx = this.enabledElement.canvas.getContext('2d'); + const imageData = ctx.getImageData(0, 0, 2, 2); + + // Check our image is empty (has not rendered) + assert.deepEqual( + Array.from(imageData.data), + EMPTY_IMAGE_DATA + ); + }); + + }); +}); diff --git a/test/draw_test.js b/test/draw_test.js index 90f4feed..371d290d 100644 --- a/test/draw_test.js +++ b/test/draw_test.js @@ -34,11 +34,6 @@ describe('draw', function () { enable(this.element); }); - it('should throw an error if no image is displayed in the enabled element', function () { - // Act - assert.throws(() => draw(this.element)); - }); - it('should draw immediately', function (done) { // Arrange const element = this.element; diff --git a/test/updateImage_test.js b/test/updateImage_test.js index 9bd2b379..82b0ce49 100644 --- a/test/updateImage_test.js +++ b/test/updateImage_test.js @@ -52,11 +52,6 @@ describe('Update a displayed image', function () { }); }); - it('should throw an Error if the image is not loaded', function () { - // Act - assert.throws(() => updateImage(this.element)); - }); - afterEach(function () { disable(this.element); });