My event handler is not removing guides as it should

[dane13860245]

I'm experimenting with a script that can add guides, and then separately, remove one of them. The upper half of the script is just a dialog with some variable names, particularly an editable text field.

Then there's a for-loop drawing several guides, followed by an event handler function and then the event handler itself. 

I get an alert when I change the text field so this assures me the event handler function is successfully called, but for some reason, I have no idea why, the guide doesn't get removed. Can anyone fix this?

var myWindow = new Window("dialog");

var ProportionsGroup = myWindow.add("group");

ProportionsGroup.orientation = "column";

ProportionsGroup.alignment = "left";

ProportionsGroup.add("statictext", undefined, "Proportions (enter values between 0 and 1)");

var ProportionEntries = ProportionsGroup.add("group");

ProportionEntries.alignment = "left";

var ProportionA = ProportionEntries.add("edittext", undefined, "0.2");

ProportionA.characters = 6;

ProportionA.active = true;

var A = ProportionA.text;

var docWidth = Number(app.activeDocument.documentPreferences.pageWidth);

var docHeight = Number(app.activeDocument.documentPreferences.pageHeight);

for (var i = 1; i < 5; ++i) {

    app.activeWindow.activePage.guides.add({name:"Blah"+i,location: docWidth*i*0.1, orientation: HorizontalOrVertical.VERTICAL});

}

function myEventHandler() {

     alert("guide blah2: " + app.activeWindow.activePage.guides.itemByName("Blah2"));

     app.activeWindow.activePage.guides.itemByName("Blah2").remove();

}

ProportionA.addEventListener('change', myEventHandler);

myWindow.show();

[m1b]

Hi @dane13860245, you cannot make changes to the DOM while a modal dialog is active. The error is:

Here is one approach to get you moving forward. I'm pretty sure it isn't the best way, because it re-creates the dialog each time, rather than re-using the existing dialog. I would like to see a neater way, if you come up with it. The crux is that everytime you click the Apply button it closes, then *does stuff*, then re-creates the dialog with the new values (you must keep the settings object up-to-date).

Anyway, here it is:

function main() {

    var settings = {
        proportionA: '0.2',
    };

    var docWidth = Number(app.activeDocument.documentPreferences.pageWidth);
    var docHeight = Number(app.activeDocument.documentPreferences.pageHeight);

    for (var i = 1; i < 5; ++i) {
        app.activeWindow.activePage.guides.add({ name: "Blah" + i, location: docWidth * i * 0.1, orientation: HorizontalOrVertical.VERTICAL });
    }

    while (makeWindow(settings).show() === 1) {

        // anything here happens every time the apply button is clicked

        // you can access anything you store in settings object
        $.writeln(settings.proportionA);

        var myGuide = app.activeWindow.activePage.guides.itemByName("Blah2");        
        if (myGuide.isValid) {
            alert("guide blah2: " + myGuide);
            app.activeWindow.activePage.guides.itemByName("Blah2").remove();
        }

    }

};

app.doScript(main, ScriptLanguage.JAVASCRIPT, undefined, UndoModes.ENTIRE_SCRIPT, 'Add guides');


function makeWindow(settings) {

    var myWindow = new Window("dialog");

    var ProportionsGroup = myWindow.add("group");
    ProportionsGroup.orientation = "column";
    ProportionsGroup.alignment = "left";
    ProportionsGroup.add("statictext", undefined, "Proportions (enter values between 0 and 1)");

    var ProportionEntries = ProportionsGroup.add("group");
    ProportionEntries.alignment = "left";

    var ProportionA = ProportionEntries.add("edittext", undefined, "");
    ProportionA.characters = 6;
    ProportionA.active = true;
    ProportionA.text = settings.proportionA || '0.2';

    var buttons = myWindow.add('group');
    var cancelButton = buttons.add("Button { text:'Cancel', enabled: true, properties: { name:'cancel' } }");
    var applyButton = buttons.add("Button { text:'Apply', enabled: true, properties: { name:'ok' } }");
    applyButton.onClick = function () { myWindow.close(1) };

    ProportionA.addEventListener('change', function () { settings.proportionA = parseFloat(this.text) });

    return myWindow;

};

See what you think.

 - Mark

[dane13860245]

Thank you mb, I will give this a try and see what I can do. 
So okay, you can't "delete" guides in a dialog, for whatever reason. But, can you HIDE guides instead? If so, then I might render all possible guides, and then reveal them gradually as desired in an event listener, if that's possible. 

[dane13860245]

Also, what is "DOM"?

[Robert Tkaczyk]

You can easily find definition in Google - Document Object Model. 

Here is one for InDesign:

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#about.html

[dane13860245]

Here's code very similar to yours except at the bottom, I've reinstated the event handler function to do something. What I intend it to do is to "hide" a guide that has already been made earlier on, though it doesn't work.

function main() {

    var settings = {

        proportionA: '0.2',

    };

    var docWidth = Number(app.activeDocument.documentPreferences.pageWidth);

    var docHeight = Number(app.activeDocument.documentPreferences.pageHeight);

    for (var i = 1; i < 5; ++i) {

        app.activeWindow.activePage.guides.add({ name: "Blah" + i, location: docWidth * i * 0.1, orientation: HorizontalOrVertical.VERTICAL });

    }

    while (makeWindow(settings).show() === 1) {

        // anything here happens every time the apply button is clicked

        // you can access anything you store in settings object

        $.writeln(settings.proportionA);

        var myGuide = app.activeWindow.activePage.guides.itemByName("Blah2");        

        if (myGuide.isValid) {

            alert("guide blah2: " + myGuide);

            app.activeWindow.activePage.guides.itemByName("Blah2").remove();

        }

    }

};

app.doScript(main, ScriptLanguage.JAVASCRIPT, undefined, UndoModes.ENTIRE_SCRIPT, 'Add guides');

function makeWindow(settings) {

    var myWindow = new Window("dialog");

    var ProportionsGroup = myWindow.add("group");

    ProportionsGroup.orientation = "column";

    ProportionsGroup.alignment = "left";

    ProportionsGroup.add("statictext", undefined, "Proportions (enter values between 0 and 1)");

    var ProportionEntries = ProportionsGroup.add("group");

    ProportionEntries.alignment = "left";

    var ProportionA = ProportionEntries.add("edittext", undefined, "");

    ProportionA.characters = 6;

    ProportionA.active = true;

    ProportionA.text = settings.proportionA || '0.2';

    var buttons = myWindow.add('group');

    var cancelButton = buttons.add("Button { text:'Cancel', enabled: true, properties: { name:'cancel' } }");

    // Here we are defining a new button in the wondow, which closes and then reopens the window

    var applyButton = buttons.add("Button { text:'Apply', enabled: true, properties: { name:'ok' } }");

    applyButton.onClick = function () { myWindow.close(1) };

    function myEventHandler(){

        app.activeDocument.activePage.itemByName(Blah3).hidden

    }

    ProportionA.addEventListener('change', myEventHandler);

    return myWindow;

};

[Robert Tkaczyk]

Shouldn't "Blah3" here:

app.activeDocument.activePage.itemByName(Blah3).hidden

be in ""? 

[m1b]

Hi @dane13860245, the DOM in this case is the Indesign Document Object Model, meaning any objects belonging to the Indesign app, as opposed to ExtendScript itself. You can do whatever you want in ExtendScript when a scriptUI dialog is open, but you can't do anything that changes the document. So you cannot change the visibility of a guide while the dialog is open. Also, more importantly, there doesn't seem to be any way to hide a single guide. There's nothing I could see in the api for Guide except maybe a workaround: guideColor. You could "hide" a guide by coloring it the same color as the paper:

// just an example guide
var guide = app.activeDocument.guides[0];
// this stops the guide being visible into the pasteboard
guide.fitToPage = true;
// make this match your paper
guide.guideColor = [255, 255, 255];

However you must do it in part of the code *after* the dialog is closed. See my while loop for example. It cannot be done in the eventListener as you wrote.

If you really need the document to update while the user is editing the dialog values, you might need to use a "palette" instead of a "dialog". I'm not very familiar with those, and they are more tricky to set up, but I'm pretty sure they can be made to do what you want.

- Mark

P.S. You can post code with the  </>  button in the forum editor.