Need help with finalizing the script

Hi! Please help me finalize the script.

It takes information from the note to the selected rectangle

Снимок экрана 2024-04-13 в 22.08.28

And after activating the script, additional rectangles are created around the blue rectangle
Снимок экрана 2024-04-13 в 22.09.01

I can’t make the created rectangles group, they are constantly created without a group. That’s on the left the way it’s created now, and on the right the way I want it to be created. Ideally, magnets (north-south) should also be included for the group, but as far as I understand from the site with api, you can’t do so now.

I would be very grateful for your help

/*{
    "author": "Your Name",
    "targets": ["omnigraffle"],
    "type": "action",
    "identifier": "com.example.Block",
    "version": "1.0",
    "description": "Create diagram based on text",
    "label": "Block",
    "mediumLabel": "Block",
    "longLabel": "Block",
    "paletteLabel": "Block"
}*/

(() => {
    var action = new PlugIn.Action(function(selection, sender) {
        if (selection.graphics.length === 0) {
            createDefaultRectangle();
        } else {
            selection.graphics.forEach(function(selectedRectangle) {
                if (selectedRectangle.shape === 'Rectangle') {
                    var textToInsert = "";

                    // Получаем текст из примечания прямоугольника
                    if (selectedRectangle.notes) {
                        var noteLines = selectedRectangle.notes.split('\n');

                        // Убираем кавычки из всех строк примечания
                        noteLines = noteLines.map(line => line.replace(/"/g, ''));

                        // Проверяем, что примечание имеет как минимум 5 строк
                        if (noteLines.length >= 5) {
                            // Записываем текст из второй строки примечания в переменную для вставки в прямоугольники
                            textToInsert = noteLines[1];

                            // Создаем прямоугольники только если есть текст в строках
                            if (noteLines[0] && (noteLines[0].includes("QFD") || noteLines[0].includes("QD"))) {
                                selectedRectangle.fillColor = Color.RGB(0.7490, 1, 1); // Желтый цвет
                            }

                            if (noteLines[0]) createRectangleAbove(selectedRectangle, noteLines[0]); // Прямоугольник над выбранным

                            // Проверяем наличие текста в каждой из строк и создаем прямоугольники поочередно
                            if (noteLines[2]) createRectangleRightAbove1(selectedRectangle, noteLines[2]); // Первый правый прямоугольник
                            if (noteLines[3]) createRectangleRightAbove2(selectedRectangle, noteLines[3]); // Второй правый прямоугольник
                            if (noteLines[4]) createRectangleRightAbove3(selectedRectangle, noteLines[4]); // Третий правый прямоугольник

                            if (noteLines.length >= 7 && noteLines[5]) createAdditionalRectangle(selectedRectangle, noteLines[5], noteLines[6]); // Дополнительные прямоугольники
                            if (noteLines.length >= 8 && noteLines[7]) createLeftBottomRectangle(selectedRectangle, noteLines[7]); // Прямоугольник слева снизу
                            if (noteLines.length >= 9 && noteLines[8]) createBottomCenterRectangle(selectedRectangle, noteLines[8]); // Прямоугольник с текстом из 9 строки примечания
                            if (noteLines.length >= 10 && noteLines[9]) createRectangleBelow(selectedRectangle, noteLines[9]); // Прямоугольник под выбранным
                            if (noteLines.length >= 11 && noteLines[10]) createRectangleBelow2(selectedRectangle, noteLines[10]); // Прямоугольник под выбранным


                            // Обновляем отображение
                            document.windows[0].selection.canvas.needsDisplay = true;
                        }
                    }

                    // Обрезаем текст до 43 символов и добавляем ".." в конце, если текст длиннее
                    textToInsert = textToInsert.length > 43 ? textToInsert.slice(0, 43) + ".." : textToInsert;
                    // Вписываем текст из второй строки примечания в выделенный прямоугольник
                    selectedRectangle.text = textToInsert;
                    selectedRectangle.textSize = 16;

                }
            });
        }
    });

    function createRectangleAbove(referenceRectangle, text) {
        var canvas = document.windows[0].selection.canvas;
        var rectangle = canvas.newShape();

        // Настройки прямоугольника
        var x = referenceRectangle.geometry.x;
        var y = referenceRectangle.geometry.y - 22.6772;
        rectangle.geometry = new Rect(x, y, 56.69291333, 22.6772); // Положение и размер прямоугольника
        rectangle.fillColor = Color.RGB(0.9882, 0.8980, 0.0); // Цвет заливки (желтый)
        rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
        rectangle.strokeThickness = 1; // Толщина обводки
        rectangle.shadowColor = null; // Отключаем тень
        rectangle.textSize = 14;

        // Вписываем текст из первой строки примечания в прямоугольник
        rectangle.text = text;

        // Обновляем отображение
        canvas.needsDisplay = true;
    }

    function createRectangleRightAbove1(referenceRectangle, text) {
        if (text) { // Создаем прямоугольник только если есть текст
            var canvas = document.windows[0].selection.canvas;
            var rectangle = canvas.newShape();

            // Настройки прямоугольника
            var x = referenceRectangle.geometry.x + referenceRectangle.geometry.width - 32.34645633;
            var y = referenceRectangle.geometry.y - 22.6772;
            rectangle.geometry = new Rect(x, y, 32.34645633, 22.6772); // Положение и размер прямоугольника
            rectangle.fillColor = Color.RGB(1.0, 0.4941, 0.4745); // Цвет заливки (оранжевый)
            rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
            rectangle.strokeThickness = 1; // Толщина обводки
            rectangle.shadowColor = null; // Отключаем тень

            // Вписываем текст из массива texts в прямоугольник
            rectangle.text = text;

            // Обновляем отображение
            canvas.needsDisplay = true;
        }
    }

    function createRectangleRightAbove2(referenceRectangle, text) {
        if (text) { // Создаем прямоугольник только если есть текст
            var canvas = document.windows[0].selection.canvas;
            var rectangle = canvas.newShape();

            // Настройки прямоугольника
            var x = referenceRectangle.geometry.x + referenceRectangle.geometry.width - 60.69291333;
            var y = referenceRectangle.geometry.y - 22.6772;
            rectangle.geometry = new Rect(x, y, 28.34645633, 22.6772); // Положение и размер прямоугольника
            rectangle.fillColor = Color.RGB(1, 0.8314, 0.4745); // Цвет заливки (желтый)
            rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
            rectangle.strokeThickness = 1; // Толщина обводки
            rectangle.shadowColor = null; // Отключаем тень

            // Вписываем текст из массива texts в прямоугольник
            rectangle.text = text;

            // Обновляем отображение
            canvas.needsDisplay = true;
        }
    }

    function createRectangleRightAbove3(referenceRectangle, text) {
        if (text) { // Создаем прямоугольник только если есть текст
            var canvas = document.windows[0].selection.canvas;
            var rectangle = canvas.newShape();

            // Настройки прямоугольника
            var x = referenceRectangle.geometry.x + referenceRectangle.geometry.width - 89.03936966;
            var y = referenceRectangle.geometry.y - 22.6772;
            rectangle.geometry = new Rect(x, y, 28.34645633, 22.6772); // Положение и размер прямоугольника
            rectangle.fillColor = Color.RGB(0.4627, 0.8392, 1.0); // Цвет заливки (голубой)
            rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
            rectangle.strokeThickness = 1; // Толщина обводки
            rectangle.shadowColor = null; // Отключаем тень

            // Вписываем текст из массива texts в прямоугольник
            rectangle.text = text;

            // Обновляем отображение
            canvas.needsDisplay = true;
        }
    }

    function createAdditionalRectangle(referenceRectangle, text1, text2) {
        if (text1 || text2) { // Создаем прямоугольники только если есть текст
            var canvas = document.windows[0].selection.canvas;

            // Создаем первый дополнительный прямоугольник
            if (text1) {
                var rectangle1 = canvas.newShape();
                rectangle1.geometry = new Rect(referenceRectangle.geometry.x + referenceRectangle.geometry.width - 38.35518084, referenceRectangle.geometry.y + referenceRectangle.geometry.height, 38.35518084, 22.6772);
                rectangle1.fillColor = Color.RGB(0.7490, 1, 0.7490); // Синий цвет
                rectangle1.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
                rectangle1.strokeThickness = 1; // Толщина обводки
                rectangle1.shadowColor = null; // Отключаем тень
                rectangle1.text = text1;
            }

            // Создаем второй дополнительный прямоугольник
            if (text2) {
                var rectangle2 = canvas.newShape();
                rectangle2.geometry = new Rect(referenceRectangle.geometry.x + referenceRectangle.geometry.width - 66.69291333, referenceRectangle.geometry.y + referenceRectangle.geometry.height, 28.34645633, 22.6772);
                rectangle2.fillColor = Color.RGB(1.0, 0.50196, 1.0); // Маджента цвет
                rectangle2.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
                rectangle2.strokeThickness = 1; // Толщина обводки
                rectangle2.shadowColor = null; // Отключаем тень
                rectangle2.text = text2;
            }

            // Обновляем отображение
            canvas.needsDisplay = true;
        }
    }

    function createLeftBottomRectangle(referenceRectangle, text) {
        if (text) { // Создаем прямоугольник только если есть текст
            var canvas = document.windows[0].selection.canvas;

            // Создаем прямоугольник слева снизу
            var rectangle = canvas.newShape();
            rectangle.geometry = new Rect(referenceRectangle.geometry.x - 45.3544, referenceRectangle.geometry.y + referenceRectangle.geometry.height - 45.3543, 68.0315, 22.6772);
            rectangle.fillColor = determineFillColor(text); // Определяем цвет заливки в зависимости от текста
            rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
            rectangle.strokeThickness = 1; // Толщина обводки
            rectangle.shadowColor = null; // Отключаем тень
            rectangle.rotation = 270; // Поворачиваем на 270 градусов по часовой стрелке

            // Устанавливаем цвет текста
            rectangle.text = text;
            rectangle.textSize = 16;
            if (text === "2 фаза") {
                rectangle.textColor = Color.RGB(0.95, 0.95, 0.95); // Белый цвет текста
            }

            // Обновляем отображение
            canvas.needsDisplay = true;
        }
    }

    function createBottomCenterRectangle(referenceRectangle, text) {
        if (text) { // Создаем прямоугольник только если есть текст
            var canvas = document.windows[0].selection.canvas;
            var rectangle = canvas.newShape();

            // Настройки прямоугольника
            var x = referenceRectangle.geometry.x;
            var y = referenceRectangle.geometry.y + referenceRectangle.geometry.height;
            rectangle.geometry = new Rect(x, y, 76, 22.6772); // Положение и размер прямоугольника
            rectangle.fillColor = Color.RGB(0, 0.5882, 1.0); // Цвет заливки (белый)
            rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
            rectangle.strokeThickness = 1; // Толщина обводки
            rectangle.shadowColor = null; // Отключаем тень
            rectangle.text = text;
            rectangle.textSize = 13;
            rectangle.text = text.length <= 7 ? text : text.slice(0, 7) + ".."; // Обрезаем текст, если необходимо

            // Обновляем отображение
            canvas.needsDisplay = true;
        }
    }

    function createRectangleBelow(referenceRectangle, text) {
        if (text) { // Создаем прямоугольники только если есть текст
            var canvas = document.windows[0].selection.canvas;
            var values = text.split(","); // Разбиваем текст на отдельные значения по запятой
    
            // Переменные для расположения новых прямоугольников
            var x = referenceRectangle.geometry.x +76;
            var y = referenceRectangle.geometry.y + referenceRectangle.geometry.height; // Располагаем ниже выбранного прямоугольника с отступом в 5 пикселей
            var elementsInRow = 0; // Счетчик элементов в текущем ряду
    
            // Создаем прямоугольники для каждого значения
            values.forEach(function(value, index) {
                if (elementsInRow >= 2) { // Если достигнут лимит элементов в ряду, начинаем новый ряд
                    x = referenceRectangle.geometry.x+ 76; // Сбрасываем x
                    y += 22.6772; // Переходим на следующую строку
                    elementsInRow = 0; // Сбрасываем счетчик элементов в ряду
                }
    
                var rectangle = canvas.newShape();
    
                // Настройки прямоугольника
                rectangle.geometry = new Rect(x, y, 47.0394, 22.6772); // Положение и размер прямоугольника
                rectangle.fillColor = Color.RGB(0.7490, 0.7490, 0.7490); // Серый цвет
                rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
                rectangle.strokeThickness = 1; // Толщина обводки
                rectangle.shadowColor = null; // Отключаем тень
                rectangle.text = value.trim(); // Убираем лишние пробелы вокруг значения
                rectangle.textSize = 16;
    
                // Обновляем координату X для следующего прямоугольника
                x += 47.0394; // Добавляем ширину прямоугольника и отступ
                elementsInRow++; // Увеличиваем счетчик элементов в ряду
    
                // Обновляем отображение
                canvas.needsDisplay = true;
            });
        }
    }
    
    function createRectangleBelow2(referenceRectangle, text) {
        if (text) { // Создаем прямоугольники только если есть текст
            var canvas = document.windows[0].selection.canvas;
            var values = text.split(","); // Разбиваем текст на отдельные значения по запятой
    
            // Переменные для расположения новых прямоугольников
            var x = referenceRectangle.geometry.x ;
            var y = referenceRectangle.geometry.y + referenceRectangle.geometry.height + 22.6772; // Располагаем ниже выбранного прямоугольника с отступом в 5 пикселей
            var existingRectanglesBelow = getRectanglesBelow(referenceRectangle); // Получаем уже существующие прямоугольники ниже выбранного
    
            // Вычисляем количество элементов в ряду, учитывая уже существующие прямоугольники ниже
            var elementsInRow = existingRectanglesBelow.reduce(function(acc, rect) {
                return rect.geometry.x === x ? acc + 1 : acc;
            }, 0);
    
            // Создаем прямоугольники для каждого значения
            values.forEach(function(value) {
                if (elementsInRow >= 2) { // Если достигнут лимит элементов в ряду, начинаем новый ряд
                    x = referenceRectangle.geometry.x; // Сбрасываем x
                    y += 22.6772; // Переходим на следующую строку
                    elementsInRow = 0; // Сбрасываем счетчик элементов в ряду
                }
    
                var rectangle = canvas.newShape();
    
                // Настройки прямоугольника
                rectangle.geometry = new Rect(x, y, 38, 22.6772); // Положение и размер прямоугольника
                rectangle.fillColor = Color.RGB(0.5765, 0.2863, 0); // Серый цвет
                rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
                rectangle.strokeThickness = 1; // Толщина обводки
                rectangle.shadowColor = null; // Отключаем тень
                rectangle.text = value.trim(); // Убираем лишние пробелы вокруг значения
                rectangle.textSize = 16;
                rectangle.textColor = Color.RGB(0.95, 0.95, 0.95); // Белый цвет текста
    
                // Обновляем координату X для следующего прямоугольника
                x += 38; // Добавляем ширину прямоугольника и отступ
                elementsInRow++; // Увеличиваем счетчик элементов в ряду
    
                // Обновляем отображение
                canvas.needsDisplay = true;
            });
        }
    }
    
    // Функция для получения прямоугольников, расположенных ниже заданного прямоугольника
    function getRectanglesBelow(referenceRectangle) {
        return document.windows[0].selection.graphics.filter(function(rectangle) {
            return rectangle.geometry.y > referenceRectangle.geometry.y + referenceRectangle.geometry.height;
        });
    }



    function determineFillColor(text) {
        // Определяем цвет заливки в зависимости от текста
        if (text.includes("1 фаза")) {
            return Color.RGB(0.8471, 0.1176, 0.0); // Красный цвет
        } else if (text.includes("2 фаза")) {
            return Color.RGB(0.2, 0.2, 0.2); // Черный цвет
        } else if (text.includes("3 фаза")) {
            return Color.RGB(0.5686, 0.5686, 0.5686); // Серый цвет
        } else {
            return Color.RGB(1.0, 1.0, 1.0); // Белый цвет
        }
    }

    function createDefaultRectangle() {
        // Создаем новый прямоугольник
        var canvas = document.windows[0].selection.canvas;
        var rectangle = canvas.newShape();

        // Настройки прямоугольника
        rectangle.geometry = new Rect(100, 100, 170.07874, 68.0315); // Положение и размер прямоугольника
        rectangle.fillColor = Color.RGB(1.0, 1.0, 1.0); // Цвет заливки (желтый)
        rectangle.strokeColor = Color.RGB(0.0, 0.0, 0.0); // Цвет обводки (черный)
        rectangle.strokeThickness = 1; // Толщина обводки
        rectangle.shadowColor = null; // Отключаем тень

        // Обновляем отображение
        canvas.needsDisplay = true;
    }

    return action;
})();