Track frame changes on the page

[Funfy]

Hello. I'm making a script. Is there any way to track frame changes on the page through the script? For example, I made a test script. It makes a frame on the page according to the height and width specified in the input fields. When I click the Preview checkbox, this frame appears on the page. If I change the height or width in the input fields, it updates the dimensions of the frame on the page. Since it is a ‘pallet’ window, I can interact with the frame on the page. That is, I can manually resize it (by dragging the corners or side) and to update the fields in the script, I made a ‘Refresh’ button. But it's not very practical to click on the button every time. Is there any way to make it so that when I manually resize it, it will automatically add new data to the input fields? Is there any such functionality?

#targetengine "session";

var palette = new Window("palette", "Test");
palette.orientation = "column";
palette.alignChildren = "left";

var groupSize = palette.add("group");
groupSize.orientation = "row";
groupSize.alignChildren = "top";

var groupWidth = groupSize.add("group");
groupWidth.orientation = "column";
groupWidth.alignChildren = "left";
groupWidth.add("statictext", undefined, "width:");
var widthInput = groupWidth.add("edittext", undefined, "10");
widthInput.characters = 10;

var groupHeight = groupSize.add("group");
groupHeight.orientation = "column";
groupHeight.alignChildren = "left";
groupHeight.add("statictext", undefined, "height:");
var heightInput = groupHeight.add("edittext", undefined, "10");
heightInput.characters = 10;

var previewCheck = palette.add("checkbox", undefined, "Preview");

var groupButtons = palette.add("group");
groupButtons.orientation = "row";
var okButton = groupButtons.add("button", undefined, "OK", {name: "ok"});
var cancelButton = groupButtons.add("button", undefined, "Cancel", {name: "cancel"});
var updateButton = groupButtons.add("button", undefined, "Update", {name: "update"});

var rectangle = null;

function createRectangle() {
    if (rectangle !== null) {
        rectangle.remove();
        rectangle = null;
    }
    try {
        var width = Number(widthInput.text);
        var height = Number(heightInput.text);
        if (app.documents.length == 0) {
            alert("Error");
            return;
        }
        
        var doc = app.activeDocument;
        var currentPage = doc.layoutWindows[0].activePage;
        rectangle = currentPage.rectangles.add({
            geometricBounds: [
                currentPage.bounds[0] + (currentPage.bounds[2] - currentPage.bounds[0] - height) / 2,
                currentPage.bounds[1] + (currentPage.bounds[3] - currentPage.bounds[1] - width) / 2,
                currentPage.bounds[0] + (currentPage.bounds[2] - currentPage.bounds[0] + height) / 2,
                currentPage.bounds[1] + (currentPage.bounds[3] - currentPage.bounds[1] + width) / 2
            ],
            strokeWeight: 1,
            strokeColor: doc.swatches.item("Black")
        });
    } catch(e) {
        alert("Error: " + e);
    }
}

function updateInputFields() {
    if (rectangle !== null) {
        var width = rectangle.geometricBounds[3] - rectangle.geometricBounds[1];
        var height = rectangle.geometricBounds[2] - rectangle.geometricBounds[0];
        widthInput.text = width.toFixed(2);
        heightInput.text = height.toFixed(2);
    }
}

previewCheck.onClick = function() {
    if (this.value && widthInput.text && heightInput.text) {
        createRectangle();
    } else if (!this.value && rectangle !== null) {
        rectangle.remove();
        rectangle = null;
    }
}

widthInput.onChanging = heightInput.onChanging = function() {
    if (previewCheck.value) {
        createRectangle();
    }
}

updateButton.onClick = function() {
    updateInputFields();
}

okButton.onClick = function() {
    if (rectangle === null) {
        createRectangle();
    }
    app.activate();
}

cancelButton.onClick = function() {
    if (rectangle !== null) {
        rectangle.remove();
    }
    palette.close();
    app.activate();
}

palette.onClose = function() {
    if (rectangle !== null) {
        rectangle.remove();
    }
}

palette.show();

[Robert at ID-Tasker]

Probably through events. 

[Funfy]

Could you be a little more specific? What events?

[Funfy · Accepted solution]

Oh, I found it myself. This can be done through app.addEventListener("afterSelectionChanged", trackFrameChanges); Thanks

[Robert at ID-Tasker]

You're welcome.