drawLayers aren't initialized correctly

[chriswoj]

Hi there,

I'm trying to create a simple measuring application, but I'm stuck with an error I can't understand. Maybe you can help me?

The HTML Code

<div id="dwv">
    <div id="pageMain" data-role="content" style="padding:2px;">
        <div class="toolbar"></div>
        <div class="layerContainer">
            <canvas class="imageLayer"></canvas>
            <div class="drawDiv"></div>
            <div class="infoLayer">
                <div class="infotl"></div>
                <div class="infotr"></div>
                <div class="infobl"></div>
            </div>
        </div>
    </div>
</div>

The scripts at the bottom of the page

    <script type="text/javascript" src="~/dwv/js/dwv.js"></script>
    <script type="text/javascript" src="~/dwv/ext/kinetic/kinetic-v5.1.1-06.10.min.js"></script>

    <script type="text/javascript">
        dwv.utils.decodeQuery = function (query, callback) {
            dwv.utils.base.decodeQuery(query, callback);
        };

        // base function to get elements
        dwv.gui.getElement = dwv.gui.base.getElement;
        dwv.gui.displayProgress = function (percent) { };
        dwv.gui.Draw = dwv.gui.base.Draw;
        dwv.gui.prompt = dwv.gui.base.prompt;
        dwv.gui.DrawList = dwv.gui.base.DrawList;

        // Toolbox
        dwv.gui.Toolbox = function (app) {
            var base = new dwv.gui.base.Toolbox(app);

            this.setup = function (list) {
                base.setup(list);

                // toolbar
                var buttonClass = "ui-btn ui-btn-inline ui-btn-icon-notext ui-mini";

                var drawList = document.createElement("a");
                drawList.href = "#drawList_page";
                drawList.setAttribute("class", buttonClass + " ui-icon-edit");

                var node = app.getElement("toolbar");
                node.appendChild(drawList);
                dwv.gui.refreshElement(node);
            };

            this.display = function (flag) {
                base.display(flag);
            };

            this.initialise = function (list) {
                base.initialise(list);
            };
        };

        function startApp() {
            // create the dwv app
            var app = new dwv.App();
            app.loadURLs(["https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm"]);

            // initialise with the id of the container div
            app.init({
                "containerDivId": "dwv",
                "tools": ["Draw"],
                "shapes": ["Ruler"]
            });

        }

        // Image decoders (for web workers)
        dwv.image.decoderScripts = {
            "jpeg2000": "~/dwv/ext/pdfjs/decode-jpeg2000.js",
            "jpeg-lossless": "~/dwv/ext/rii-mango/decode-jpegloss.js",
            "jpeg-baseline": "~/dwv/ext/pdfjs/decode-jpegbaseline.js"
        };

        // DOM ready?
        $(document).ready(function () {
            startApp();
        });

    </script>

Sorry for messing around with the code, but I'm lost with this error:

TypeError: Cannot read property '0' of undefined
    at dwv.DrawController.getCurrentDrawLayer (dwv.js:1394)
    at dwv.App.getCurrentDrawLayer (dwv.js:157)
    at dwv.tool.Draw.display (dwv.js:17341)
    at dwv.tool.Toolbox.setSelectedTool (dwv.js:20897)
    at dwv.tool.Toolbox.init (dwv.js:20871)
    at dwv.ToolboxController.initAndDisplay (dwv.js:2037)
    at postLoadInit (dwv.js:1311)
    at dwv.io.Url.urlIO.onload (dwv.js:539)
    at onLoadView (dwv.js:15343)
    at onDecodedFirstFrame (dwv.js:14053)

If you know anything, thanks a lot in advance! best chris

[ivmartel]

Hi, no worries, please mess up the code! That allows to find problems like this one. It seems the problem is the order in which the controllers are set once the data is loaded (application.js#L1304). Inverting them fixes it.

Even though it seems to work as it is, I would call app.loadURLs after app.init in your code. I also needed to include the jquery and i18next scripts.

[ivmartel]

I just committed the fix for application.js. Waiting for your feedback to close the issue...

[chriswoj]

It worked! Thanks for the tips and thanks for your fix! Greatly appreciated!