Reference Line issue

[PACS ID]

Hi,

Please see my sample code below, I am trying to add Reference Lines but it is not working.

I am using latest files of Cornerstone.js and CornerstoneTools.js.

function SampleEx() {

    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    var config = {
        maxWebWorkers: 2,
        startWebWorkersOnDemand: true,
        taskConfiguration: {
            'decodeTask': {
                initializeCodecsOnStartup: false,
            },
            'sleepTask': {
                sleepTime: 3000
            }
        }
    };

    cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
   
    cornerstoneTools.init({
        mouseEnabled: true,
        globalToolSyncEnabled: false,
        showSVGCursors: true,
    });

    const firstElement = document.getElementById('View1');
    cornerstone.enable(firstElement);

    const secondElement = document.getElementById('View2');
    cornerstone.enable(secondElement);

    var oStack = stacksArr[0].Stacks;

    firstStack = oStack[0];
    secondStack = oStack[3];

    cornerstoneTools.addStackStateManager(firstElement, ['stack']);
    cornerstoneTools.addToolState(firstElement, 'stack', firstStack);


    cornerstoneTools.addStackStateManager(secondElement, ['stack']);
    cornerstoneTools.addToolState(secondElement, 'stack', secondStack);

    // Add and activate tools
    cornerstoneTools.addTool(cornerstoneTools.StackScrollTool);
    cornerstoneTools.addTool(cornerstoneTools.StackScrollMouseWheelTool);
    cornerstoneTools.setToolActive('StackScroll', { mouseButtonMask: 1 });
    cornerstoneTools.setToolActive('StackScrollMouseWheel', {});

    const synchronizer = new cornerstoneTools.Synchronizer(      
        'cornerstonenewimage',      
        cornerstoneTools.updateImageSynchronizer
    )

    const firstLoadImagePromise = cornerstone.loadImage(firstStack.imageIds[0])
        .then((image) => {
            cornerstone.displayImage(firstElement, image)

            //// set the stack as tool state
            synchronizer.addSource(firstElement)
            cornerstoneTools.addStackStateManager(firstElement, ['stack', 'ReferenceLines'])
            cornerstoneTools.addToolState(firstElement, 'stack', firstStack)
        });

    const secondLoadImagePromise = cornerstone.loadImage(secondStack.imageIds[0])
        .then((image) => {
            cornerstone.displayImage(secondElement, image)

            //// set the stack as tool state
            synchronizer.addTarget(secondElement);
            cornerstoneTools.addStackStateManager(secondElement, ['stack', 'ReferenceLines']);
            cornerstoneTools.addToolState(secondElement, 'stack', secondStack);
        });

    // After images have loaded, and our sync context has added both elements
    Promise.all([firstLoadImagePromise, secondLoadImagePromise])
        .then(() => {
            cornerstoneTools.addTool(cornerstoneTools.ReferenceLinesTool);
            cornerstoneTools.setToolEnabled('ReferenceLines', {
                synchronizationContext: synchronizer,
            });

        });

}

Thanks