Angular2 and cornerstoneWebImageLoader TypeError: dispatchEvent is not a function, Error: element not enabled

[Thanos Kaz]

Hello, 

I am trying to add cornerstone, cornerstoneTools and cornerstoneWebImageLoader   in an angular 2 project.

I have managed so far to show an image in my component and (I think) to use cornerstoneWebImageLoader  correctly...

After this part finishes 

cornerstone.loadImage(this.imageId).then(function (image) {

            cornerstone.displayImage(element, image);

I get  TypeError: u.external.cornerstone.events.dispatchEvent is not a function which is coming from cornerstoneWebImageLoader.js.
Also, on mouse action on the image i get ERROR Error: element not enabled.

I am trying to understand if this is happening because cornerstoneWebImageLoader  is not loaded correctly, or it has to do with the order of angular is loading components etc or ......

CODE:

in .angular.cli.json

 "scripts": ["../node_modules/jquery/dist/jquery.min.js",
                  "../node_modules/cornerstone-core/dist/cornerstone.min.js",
                  "../node_modules/cornerstone-math/dist/cornerstoneMath.min.js",
                  "../node_modules/cornerstone-tools/dist/cornerstoneTools.min.js",
                  "../node_modules/cornerstone-web-image-loader/dist/cornerstoneWebImageLoader.js"],

my directive (got it from the angular2-cornerstone example)

import { Directive, ElementRef, Input } from '@angular/core';
import * as $ from 'jquery';
import * as cornerstone from 'cornerstone-core';
import * as cornerstoneMath from 'cornerstone-math';
import * as cornerstoneTools from 'cornerstone-tools';
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader';


@Directive({
 selector: '[myCornerstoneElement]',
})
export class CornerstoneElementDirective {
 elementRef: ElementRef;


 @Input('myCornerstoneElement') imageId: string;
 constructor(elementRef: ElementRef) {
 this.elementRef = elementRef;
 }
 ngOnInit(el: ElementRef) {


 let s = document.createElement('script');
 s.type = 'text/javascript';
 s.innerText = 'cornerstoneWebImageLoader.external.cornerstone = cornerstone;';
 this.elementRef.nativeElement.appendChild(s);


 cornerstoneWebImageLoader.external.cornerstone = cornerstone;


 // If no imageId is given, do nothing
 if (!this.imageId) {
 return;
 }


 // Retrieve the DOM element itself
 let element = this.elementRef.nativeElement;


 // Enable the element with Cornerstone
 cornerstone.enable(element);


 // Load the image and enable tools
 cornerstone.loadImage(this.imageId).then(function (image) {
 cornerstone.displayImage(element, image);
 cornerstoneTools.mouseInput.enable(element);
 cornerstoneTools.mouseWheelInput.enable(element);
 // Enable all tools we want to use with this element
 cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
 cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
 cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
 cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel
 cornerstoneTools.probe.enable(element);
 cornerstoneTools.length.enable(element);
 cornerstoneTools.ellipticalRoi.enable(element);
 cornerstoneTools.rectangleRoi.enable(element);
 cornerstoneTools.angle.enable(element);
 cornerstoneTools.highlight.enable(element);
 });
 }
}

And my component.html

<div myCornerstoneElement="https://s3-eu-west-1.amazonaws.com/dev.opm.bucket/s.png"></div>

Any help would be appreciated.

Thank you in advance

Thanos

[Erik Ziegler]

Hi Thanos,

I think you need to update your version of Cornerstone Core to something > 1.0.0. We added the EventTarget interface to cornerstone.events, which seems to not be available in your case. The problem is that package.json only lists cornerstone as a dev dependency.

It should look like this: https://github.com/chafey/cornerstone/blob/f6133fb1ee3c5f9e272469439c5b9c9b8e09a5b8/src/events.js

Hope that helps,

Erik

[Thanos Kaz]

Hi Erik,

Thanks a lot for replying. The first error "dispatchEvent is not a function" is gone. I updated cornerstone* and I have them installed not in devdependencies 

"cornerstone-core": "^1.1.0",
 "cornerstone-math": "^0.1.6",
 "cornerstone-tools": "^1.0.2",
 "cornerstone-web-image-loader": "^1.0.0",

The second error is still there on image events

 ERROR Error: element not enabled.

Any ideas on this?

Thanks

Thanos

[Thanos Kaz]

On Tuesday, November 14, 2017 at 12:26:41 PM UTC+2, Thanos Kaz wrote:

Hi Erik,

Thanks a lot for replying. The first error "dispatchEvent is not a function" is gone. I updated cornerstone* and I have them installed not in devdependencies 

"cornerstone-core": "^1.1.0",
 "cornerstone-math": "^0.1.6",
 "cornerstone-tools": "^1.0.2",
 "cornerstone-web-image-loader": "^1.0.0",

The second error is still there on image events

 ERROR Error: element not enabled.

The error comes from line 

cornerstoneTools.probe.enable(element);

 

[Erik Ziegler]

Did you point web image loader / tools to the correct instance of Cornerstone? This has been added in the most recent major version:

See:
https://github.com/chafey/cornerstoneWebImageLoader/blob/master/changelog.md#version-100

https://github.com/chafey/cornerstoneTools/blob/master/changelog.md#version-100

You need lines like this:

cornerstoneTools.external.$ = $;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.external.cornerstone = cornerstone;

cornerstoneWebImageLoader.external.cornerstone = cornerstone;

[Thanos Kaz]

I was missing 

cornerstoneTools.external.cornerstone = cornerstone;

Now it worked!

I really appreciate the help Erik!

Thanks again!

Thanos

[Erik Ziegler]

No problem! This was a breaking change that was necessary because some build systems were pulling in multiple copies of Cornerstone Core since they were marked as dependencies in package.json. We had to move them from normal dependencies to dev dependencies and add this injection step.

[Krishna Reddy]

Hi ,

Glad that you have implemented cornerstone and showed images,

I am trying to implement cornerstone in angular 2, but I am unable to get it done as I am getting some exceptions can you please help me out to implement cornerstone in my application.

the following is the exception I am facing, it would be a great help if you could provide the implementation of cornerstone,.