DrawPane.destroyItems and erase methods error when drawItem has resize knobs

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-24/Enterprise Development Only (built 2016-02-24)

Chrome on OSX

please modify the #drawKnobs sample like this (I've just added an ID 'testDrawRect' to the "DrawRect" DrawPane):

// In this sample, a DrawPane is created to hold each of nine different types
// of DrawItems:  DrawLine, DrawRect, DrawOval, DrawTriangle, DrawCurve,
// DrawShape, DrawLinePath, DrawImage, and DrawLabel.  For each item a
// DynamicForm is created with checkboxes to toggle the control knobs available
// to the item.

// The nine DrawPanes will all have the same configuration defined in the
// following class:
isc.defineClass("DemoDrawPane", "DrawPane").addProperties({
    autoDraw: false,
    margin: 2,
    width: "100%",
    height: "*",
    border: "1px solid #f0f0f0",
    overflow: "hidden"
});

// The nine forms will be instances of the following DemoForm class.  It
// creates a checkbox for each KnobType and handles calling DrawItme.showKnobs()
// and hideKnobs() when the checkboxes are toggled.
isc.defineClass("DemoForm", "DynamicForm").addProperties({

    addPropertiesOnCreate: false,
    init : function (drawItem, knobTypes) {
        var numKnobTypes = knobTypes.length,
            items = this.items = new Array(numKnobTypes),
            initialValues = this.values = {};

        this.numCols = numKnobTypes;

        // Create a checkbox for each KnobType that shows/hides that type of
        // control knob.
        for (var i = 0; i < numKnobTypes; i++) {
            var knobType = knobTypes[i];

            items[i] = {
                editorType: "CheckboxItem",
                name: knobType,
                title: knobType,
                showTitle: false,
                changed : function (form, item, value) {
                    var drawItem = form.drawItem,
                        // The KnobType controlled by this checkbox was used
                        // for the name.
                        knob = item.name;
                    drawItem[value ? "showKnobs" : "hideKnobs"].call(drawItem, knob);
                }
            };

            // Initially check the checkbox if the DrawItem is showing this
            // type of control knob.
            initialValues[knobType] = (
                drawItem.knobs != null &&
                drawItem.knobs.contains(knobType));
        }

        // Save the DrawItem with this form so that it may be referenced from within
        // the changed() method of the checkboxes.
        this.drawItem = drawItem;

        this.Super("init", arguments);
    }
});

// The nine DrawPanes and accompanying DynamicForms will be placed in their own
// section of a SectionStack.  This method generates these sections.
var createSection = function (drawItem, expanded, knobTypes) {

    var title = drawItem.getClassName(),
        drawPane = drawItem.drawPane,
        knobsForm = isc.DemoForm.create(drawItem, knobTypes);

    // Place a slider at the bottom of each section to control the rotation of
    // the DrawItem.
    var minValue = 0, maxValue = 360, numValues = 361,
        rotationSlider = isc.Slider.create({
        vertical: false,
        value: 0,
        minValue: minValue,
        maxValue: maxValue,
        numValues: numValues,
        showValue: false,
        width: 300,
        height: 50,
        title: "Rotation",

        previousValue: 0,
        drawItem: drawItem,
        valueChanged : function (value) {
            this.drawItem.rotateBy(value - this.previousValue);
            this.previousValue = value;
        }
    });

    return {
        title: title,
        expanded: expanded,
        controls: [knobsForm],
        items: [
            isc.VLayout.create({
                width: "100%",
                height: 250,
                members: [drawPane, rotationSlider]
            })
        ]
    };
};

// Create the nine DrawItems:

var drawLine = isc.DrawLine.create({
    drawPane: isc.DemoDrawPane.create(),
    startPoint: [200, 20],
    endPoint: [400, 70],
    keepInParentRect: true
});

var drawRect = isc.DrawRect.create({
    drawPane: isc.DemoDrawPane.create({ID:"testDrawRect"}),
    left: 160,
    top: 30,
    width: 50,
    height: 120,
    keepInParentRect: true,
    knobs: ["resize"]
});

var drawOval = isc.DrawOval.create({
    drawPane: isc.DemoDrawPane.create(),
    left: 450,
    top: 10,
    width: 70,
    height: 140,
    keepInParentRect: true,
    knobs: ["resize"]
});

var drawTriangle = isc.DrawTriangle.create({
    drawPane: isc.DemoDrawPane.create(),
    points: [[75, 50], [100, 100], [50, 100]],
    keepInParentRect: true,
    knobs: ["resize"]
});

var drawCurve = isc.DrawCurve.create({
    drawPane: isc.DemoDrawPane.create(),
    startPoint: [60, 140],
    endPoint: [200, 10],
    controlPoint1: [20, 20],
    controlPoint2: [300, 120],
    keepInParentRect: true
});

var drawShape = isc.DrawShape.create({
    drawPane: isc.DemoDrawPane.create(),
    commands: [{
        type: "moveto", args: [275, 50]
    }, {
        type: "lineto",
        args: [
            [287, 50], [300, 62], [312, 62], [325, 62], [325, 87], [312, 87],
            [300, 87], [287, 100], [275, 100]]
    }, {
        type: "close"
    }],
    keepInParentRect: true,
    knobs: ["resize"]
});

var drawLinePath = isc.DrawLinePath.create({
    drawPane: isc.DemoDrawPane.create(),
    startPoint: [200, 20],
    endPoint: [400, 70],
    keepInParentRect: true
});

var drawImage = isc.DrawImage.create({
    drawPane: isc.DemoDrawPane.create(),
    left: 250,
    top: 30,
    width: 48,
    height: 48,
    src: "/isomorphic/system/reference/exampleImages/pieces/48/piece_red.png",
    keepInParentRect: true,
    knobs: ["resize"],
    useMatrixFilter: true
});

var drawLabel = isc.DrawLabel.create({
    drawPane: isc.DemoDrawPane.create(),
    left: 160,
    top: 30,
    contents: "DrawLabel",
    fontSize: 25,
    fontWeight: "normal",
    fontStyle: "italic",
    fontFamily: "Times New Roman, serif",
    keepInParentRect: true
});


// Put everything together in a SectionStack.
isc.SectionStack.create({
    width: "100%",
    overflow: "visible",
    visibilityMode: "multiple",
    sections: [
        createSection(drawLine, true, ["startPoint", "endPoint"]),
        createSection(drawRect, false, ["resize", "move"]),
        createSection(drawOval, false, ["resize", "move"]),
        createSection(drawTriangle, true, ["resize", "move"]),
        createSection(drawCurve, false,
            ["startPoint", "endPoint", "controlPoint1", "controlPoint2"]),
        createSection(drawShape, true, ["resize", "move"]),
        createSection(drawLinePath, false,
            ["startPoint", "endPoint", "controlPoint1", "controlPoint2"]),
        createSection(drawImage, false, ["resize", "move"]),
        createSection(drawLabel, false, ["move"])
    ]
});

then open the 'DrawRect' section, and execute testDrawRect.destroyItems() or testDrawRect.erase() and you'll see that only the resize knobs are destroyed and then there's this error:

15:47:13.850:TMR4:WARN:Log:TypeError: Cannot read property 'destroy' of undefined
Stack from error.stack:
    DrawPane.erase(<no args: exited>) on [DemoDrawPane ID:testDrawRect] @ ISC_Drawing.js:201:156
    DrawPane.destroyItems(<no args: exited>) on [DemoDrawPane ID:testDrawRect] @ ISC_Drawing.js:202:313
    eval(<no args: exited>) @ [no file]:1:14
    eval(<no args: exited>) on [Class Log] @ [no file]:3:8
    [c]Class.evalWithVars(<no args: exited>) on [Class Class] @ ISC_Core.js:306:62
    [c]Log.evaluate(_1=>"testDrawRect.destroyItems()", _2=>Obj) on [Class Log] @ ISC_Core.js:1075:667
    LogViewer.evaluate(_1=>"testDrawRect.destroyItems()", _2=>Obj) on [LogViewer ID:undefined] @ ISC_Core.js:1107:350
    DebugTarget.evalJSWithDevConsoleVars(_1=>"testDrawRect.destroyItems()", _2=>Obj, _3=>null) on [DebugTarget ID:undefined] @ ISC_Core.js:1879:1563
    call(_1=>Obj, _2=>undef, _3=>undef) on [DebugTarget ID:undefined] @ ISC_Core.js:1859:17
    handlePacket(_1=>Obj, _2=>[MessagingDMISocket ID:isc_MessagingDMISocket_5], _3=>[object Window]) on [DebugTarget ID:undefined] @ ISC_Core.js:1849:208
    packetReceived(_6=>Obj, _7=>[MessagingDMISocket ID:isc_MessagingDMISocket_5], _8=>[object Window]) on [MessagingDMISocket ID:isc_MessagingDMISocket_0] @ ISC_Core.js:1851:164
    receive(_1=>Obj, _2=>[MessagingDMISocket ID:isc_MessagingDMISocket_5], _3=>[object Window]) on [MessagingDMISocket ID:isc_MessagingDMISocket_0] @ ISC_Core.js:1839:80
    [c]Class.fireCallback(_1=>Obj, _2=>null, _3=>null, _4=>null, _5=>true) on [Class Timer] @ ISC_Core.js:295:104
    Timer._fireTimeout(_1=>"$ir394", _2=>426, _3=>undef) on [Class Timer] @ ISC_Core.js:1353:166
    <anonymous>() @ ISC_Core.js:1350:40

15:47:13.853:TMR4[E0]:WARN:Log:TypeError: Cannot read property 'quadTree' of null
Stack from error.stack:
    DrawItem._setupEventParent(<no args: exited>) on [DrawRect ID:isc_DrawRect_0] @ ISC_Drawing.js:414:51
    DrawPane._drawBitmapDrawItems(<no args: exited>) on [DemoDrawPane ID:testDrawRect] @ ISC_Drawing.js:277:23
    DrawPane.redrawBitmapNow(<no args: exited>) on [DemoDrawPane ID:testDrawRect] @ ISC_Drawing.js:275:216
    <anonymous>(<no args: exited>) @ ISC_Drawing.js:269:177
    [c]EventHandler.runTeas(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1717:106
    EventHandler._clearThread(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1716:103
    Timer._fireTimeout(<no args: exited>) on [Class Timer] @ ISC_Core.js:1353:210
    <anonymous>(<no args: exited>) @ ISC_Core.js:1350:40

[Isomorphic]

We've applied a fix to SC 10.0p and newer that will be in the nightly builds dated 2016-02-28.

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-28/Enterprise Deployment (built 2016-02-28)

Now it's working, thank you very much.