ru.coon 2.8.66 → 3.0.2

package/src/VisualLinker.js

@@ -0,0 +1,610 @@
+Ext.define('Coon.util.VisualLinker', {
+    xtype: 'VisualLinker',
+    singleton: true,
+
+    /**
+     * хранилище пар соединённых компонентов и их конфиг-параметров
+     * в качестве ключей - строка leadComponent-id + secondaryComponent-id
+     */
+    linkedElementList: new Map(),
+
+    /**
+     * CSS StyleSheet с правилами, исправляющими стили border у leadElement
+     * тэг <style#linkedStyleSheet> создаётся при первой записи в linkedElementList
+     * потом при добавлении новой пары создаются CSS правила для leadElement'a
+     * можно добавить опциональный параметр в конфиге для создания новых CSS-правил
+     */
+    linkedStyleSheet: null,
+
+    /**
+     * регистрация новой пары
+     */
+    createLinkedPair(leadComponent, secondaryComponent, options = {}) {
+        const parameters = this.processInputArguments(leadComponent, secondaryComponent, options);
+
+        const key = leadComponent.id + secondaryComponent.id;
+
+        if (this.linkedElementList.has(key)) {
+            return;
+        }
+
+        Object.assign(parameters, this.getLeadStyles(leadComponent));
+
+        this.linkedElementList.set(key, parameters);
+
+        if (!this.linkedStyleSheet) {
+            this.linkedStyleSheet = this.createLinkedStyleSheet();
+        }
+
+        this.setLinkedStyleSheetRules(parameters);
+    },
+
+    /**
+     * принимает ключ [leadComponent, secondaryComponent] для linkedElementList
+     * получает по ключу параметры для линковки
+     * соединяет элементы
+     */
+    link(leadComponent, secondaryComponent) {
+        const key = leadComponent.id + secondaryComponent.id;
+        const parameters = this.linkedElementList.get(key);
+
+        if (!parameters) {
+            console.error('No registred pair found');
+            return;
+        }
+
+        const {
+            leadComponentClass,
+            align,
+            outerBgColor,
+            verticalOffset,
+            roundCorners,
+            leadBgColor,
+            leadBorderColor,
+        } = parameters;
+
+        const {elemLead, elemSecondary} = this.getDomElements(leadComponent, secondaryComponent);
+
+        if (!elemLead) {
+            console.error('No lead DOM element found.');
+            return;
+        }
+        if (!elemSecondary) {
+            console.error('No secondary DOM element found. Make sure it is added to DOM before "link" call.');
+            return;
+        }
+
+        this.handleLeadClassName(leadComponent, leadComponentClass, align, 'add');
+
+        this.handleSecondaryClassName(secondaryComponent, leadComponentClass, align, 'add');
+
+        this.setSecondaryCssVariables(elemSecondary, leadBgColor, leadBorderColor);
+
+        this.setPositionSecondaryElement(secondaryComponent, elemLead, align, verticalOffset);
+
+        const linkerElements = this.createLinkerElements(
+            elemLead,
+            elemSecondary,
+            verticalOffset,
+            align,
+            outerBgColor,
+            roundCorners,
+            leadBgColor,
+            leadBorderColor
+        );
+
+        linkerElements.forEach((el) => {
+            if (el) {
+                document.body.append(el);
+            }
+        });
+
+        this.setLinkersRects(elemLead, elemSecondary, linkerElements, align);
+
+        const onLeadDestroyListener = leadComponent.on('beforedestroy', this.onLeadDestroy, this, {
+            args: [
+                secondaryComponent,
+                this.removeLinkers
+            ],
+            destroyable: true,
+        });
+
+        this.linkedElementList.set(key, Object.assign(parameters, {onLeadDestroyListener}));
+    },
+
+    /**
+    * принимает ключ [leadComponent, secondaryComponent] для linkedElementList
+    * получает по ключу параметры для линковки
+    * разъединяет элементы
+    */
+    unlink(leadComponent, secondaryComponent) {
+        const key = leadComponent.id + secondaryComponent.id;
+        const parameters = this.linkedElementList.get(key);
+
+        if (!parameters) {
+            console.error('No registred pair found');
+            return;
+        }
+
+        const {
+            leadComponentClass,
+            align,
+            onLeadDestroyListener,
+        } = parameters;
+
+        this.handleLeadClassName(leadComponent, leadComponentClass, align, 'remove');
+        this.removeLinkers();
+        if (onLeadDestroyListener) {
+            onLeadDestroyListener.destroy();
+        }
+    },
+
+    /**
+    * Before destroy event handler. Removes linkers from DOM
+    */
+    onLeadDestroy(secondaryComponent, removeLinkers) {
+        secondaryComponent.destroy();
+        removeLinkers();
+    },
+
+    /**
+    * @param {*} args - input arguments of createLinkedPair function
+    */
+    processInputArguments(leadComponent, secondaryComponent, options) {
+        if (!this.validateParameters(leadComponent, secondaryComponent, options)) {
+            console.error(`Check function's input parameters!`);
+            return;
+        }
+
+        const newOptions = this.setDefaultParameters(leadComponent, options);
+
+        const align = this.setAlign(options.alignment);
+
+        return ({...newOptions, align});
+    },
+
+    validateParameters(leadComponent, secondaryComponent, options) {
+        if (leadComponent && secondaryComponent) {
+            if (!leadComponent.isComponent || !secondaryComponent.isComponent) {
+                console.error('Some of input elements are not instantiated Components');
+                return false;
+            }
+        } else {
+            console.error('Not all required input components found.');
+            return false;
+        }
+
+        if (options.alignment) {
+            const validAlignment = {
+                horizontal: ['t', 'b'],
+                vertical: ['l', 'r', 'f'],
+            };
+            if (
+                !validAlignment.horizontal.includes(options.alignment[0]) ||
+                !validAlignment.vertical.includes(options.alignment[1])
+            ) {
+                console.error('Not valid "alignment" parameter.');
+                return false;
+            }
+        }
+
+        if (options.leadComponentClass && typeof options.leadComponentClass !== 'string') {
+            console.error('Class of the Lead element argument(leadComponentClass) must be of string type.');
+            return false;
+        }
+
+        if (options.outerBgColor && typeof options.outerBgColor !== 'string') {
+            console.error('Outer background color argument(outerBgColor) must be of string type.');
+            return false;
+        }
+
+        if (options.verticalOffset && !Number.isInteger(options.verticalOffset)) {
+            console.error('Vertical offset argument (verticalOffset) must be of integer type.');
+            return false;
+        }
+
+        if (options.roundCorners && typeof options.roundCorners !== 'boolean') {
+            console.error('Round corners argument (roundCorners) must be of boolean type.');
+            return false;
+        }
+
+        return true;
+    },
+
+    setDefaultParameters(leadComponent, options) {
+        const leadComponentClass = options.leadComponentClass || leadComponent.cls || 'VisualLinkerLead';
+        const alignment = options.alignment || 'bl';
+        const outerBgColor = options.outerBgColor || 'white';
+        const verticalOffset = options.verticalOffset || 8;
+        const roundCorners = options.roundCorners || false;
+
+        return {
+            leadComponentClass,
+            alignment,
+            outerBgColor,
+            verticalOffset,
+            roundCorners,
+        };
+    },
+
+    setAlign(alignment) {
+        const align = {
+            top: (alignment[0] === 't'),
+            bottom: (alignment[0] === 'b'),
+            left: (alignment[1] === 'l'),
+            right: (alignment[1] === 'r'),
+            full: (alignment[1] === 'f'),
+        };
+
+        const horizontal = Object.keys(align).filter((key) => (key === 'left' || key === 'right' || key === 'full') && align[key]);
+        const vertical = Object.keys(align).filter((key) => (key === 'top' || key === 'bottom') && align[key]);
+
+        return {...align, horizontal, vertical};
+    },
+
+    createLinkedStyleSheet() {
+        const el = document.createElement('style');
+        el.id = 'linkedStyleSheet';
+        document.head.appendChild(el);
+        return el;
+    },
+
+    getLeadStyles(leadComponent) {
+        const elemLead = leadComponent.getEl().dom;
+
+        const leadStyles = getComputedStyle(elemLead);
+        const borderColor = leadStyles.borderLeftColor ||
+            leadStyles.borderRightColor;
+        const bgColor = this.getEffectiveBgColor(elemLead);
+
+        return {leadBorderColor: borderColor, leadBgColor: bgColor};
+    },
+
+    /**
+     * Определяет цвет фона элемента, рекурсивно проходясь по родительским элементам, если цвет фона прозрачный.
+     * @param {DOM element} elem
+     * @returns color value
+     */
+    getEffectiveBgColor(elem) {
+        const elemStyles = getComputedStyle(elem);
+        const bgColor = elemStyles.backgroundColor;
+
+        if (bgColor && bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') {
+            return bgColor;
+        }
+
+        if (elem.parentElement) {
+            return this.getEffectiveBgColor(elem.parentElement);
+        }
+
+        // default white if no background found
+        return 'rgba(255, 255, 255, 1)';
+    },
+
+    /**
+     * Создаёт новые CSS правила в stylesheet, созданном этим классом.
+     * Это нужно для соединения селекторов исходного класса ведущего элемента и класса активации соединения.
+     * По данному селектору изменяются стили ведущего элемента - выпрямляются скруглённые границы.
+     */
+    setLinkedStyleSheetRules(options) {
+        const {leadComponentClass, align} = options;
+
+        const styleSheetRules = this.linkedStyleSheet.sheet.cssRules;
+
+        const leadRules = [
+            `border-${align.vertical}: none;`,
+            `border-${align.vertical}-left-radius: 0;`,
+            `border-${align.vertical}-right-radius: 0;`
+        ];
+
+        const contentRules = [
+            'border: 1px solid var(--border-color);',
+            'backround-color: var(--bd-color);'
+        ];
+
+        // Check if we already have this selector in our styleSheet
+        for (let i = 0; i < styleSheetRules.length; i++) {
+            if (styleSheetRules[i].selectorText.includes(leadComponentClass)) {
+                return;
+            }
+        }
+
+        this.linkedStyleSheet.sheet.insertRule(
+            `.${leadComponentClass}.${leadComponentClass}--active {${leadRules.join('')}}`
+        );
+
+        this.linkedStyleSheet.sheet.insertRule(
+            `.${leadComponentClass}-content {${contentRules.join('')}}`
+        );
+    },
+
+    /**
+     * Добавляет или убирает активный класс у ведущего элемента при активации/деактивации модального окна
+     * @param {*} leadComponent - ведущий компонент
+     * @param {*} leadComponentClass - главный класс ведущего компонента
+     * @param {*} alignment - позиция модалки относительно ведущего элемента
+     * @param {*} method - добавить класс или удалить (add/remove)
+     */
+    handleLeadClassName(leadComponent, leadComponentClass, align, method) {
+        const classNameActive = `${leadComponentClass}--active`;
+        const alignClassName = `${leadComponentClass}--${align.vertical}`;
+
+        if (method === 'add') {
+            leadComponent.addCls([classNameActive, alignClassName]);
+        } else if (method === 'remove') {
+            leadComponent.removeCls([classNameActive, alignClassName]);
+        }
+    },
+
+    /**
+     * Добавляет или убирает класс у модального окна при активации/деактивации
+     * @param {*} elemLead - ведущий элемент
+     * @param {*} leadComponentClass - главный класс ведущего компонента
+     * @param {*} alignment - позиция модалки относительно ведущего элемента
+     * @param {*} method - добавить класс или удалить (add/remove)
+     */
+    handleSecondaryClassName(secondaryComponent, leadComponentClass, align, method) {
+        const classNameSecondary = `${leadComponentClass}-content`;
+        const verticalAlignClassName = `${classNameSecondary}--${align.vertical}`;
+        const horizontalAlignClassName = `${classNameSecondary}--${align.horizontal}`;
+
+        if (method === 'add') {
+            secondaryComponent.addCls([classNameSecondary, verticalAlignClassName, horizontalAlignClassName]);
+        } else if (method === 'remove') {
+            secondaryComponent.removeCls([classNameSecondary, verticalAlignClassName, horizontalAlignClassName]);
+        }
+    },
+
+    /**
+     * Определение CSS переменных для контент-панели
+    */
+    setSecondaryCssVariables(elemSecondary, leadBgColor, leadBorderColor) {
+        elemSecondary.style.setProperty('--border-color', leadBorderColor);
+        // elemSecondary.style.setProperty('--bg-color', leadBgColor);
+        elemSecondary.style.setProperty('--bg-color', '#fff');
+        elemSecondary.style.setProperty('background-color', leadBgColor);
+    },
+
+    /**
+     * Позиционирование модалки (secondary элемент)
+     */
+    setPositionSecondaryElement(secondaryComponent, elemLead, align, verticalOffset) {
+        const elemLeadRect = elemLead.getBoundingClientRect();
+        const elemSecondary = secondaryComponent.getEl()?.dom;
+        if (!elemSecondary) {
+            return;
+        }
+        const elemSecondaryRect = elemSecondary.getBoundingClientRect();
+
+        if (align.full) {
+            this.setSecondaryElementRect(secondaryComponent, elemLeadRect, verticalOffset, align);
+        }
+
+        const elemSecondaryCoords = this.getElemSecondaryCoords(elemLeadRect, elemSecondaryRect, align, verticalOffset);
+
+        secondaryComponent.showAt(elemSecondaryCoords);
+    },
+
+    /**
+     * Если у нас фулл-скрин alignment='bf',
+     * то определяем размеры контент-части по всей ширине окна,
+     * а также определить высоту элемента как вся высота экрана за вычетом высоты кнопки и офсета
+    */
+    setSecondaryElementRect(secondaryComponent, elemLeadRect, verticalOffset, align) {
+        let height;
+        if (align.bottom) {
+            height = innerHeight - verticalOffset - elemLeadRect.bottom;
+        }
+        if (align.top) {
+            height = elemLeadRect.top - verticalOffset;
+        }
+        secondaryComponent.setHeight(`${height}px`);
+        secondaryComponent.setWidth('100%');
+    },
+
+    /**
+     * Calculates coords for elemSecondary
+     */
+    getElemSecondaryCoords(elemLeadRect, elemSecondaryRect, align, verticalOffset) {
+        let x = 0;
+        let y = 0;
+        if (align.bottom) {
+            y = elemLeadRect.bottom + verticalOffset;
+        } else if (align.top && !align.full) {
+            y = elemLeadRect.top - verticalOffset - elemSecondaryRect.height;
+        }
+
+        if (align.right) {
+            x = elemLeadRect.right - elemSecondaryRect.width;
+        } else if (align.left) {
+            x = elemLeadRect.x;
+        } else if (align.full) {
+            x = 0;
+        }
+
+        return [x, y];
+    },
+
+    /**
+     * Creates linker elements
+     * Sets element's classes, CSS variables and styles
+     * @param {*} elemLead - takes it's width, x/y coords and background color
+     * @param {*} elemSecondary - takes it's z-index
+     * @param {*} verticalOffset - used for sizes of linkers
+     * @param {*} alignment - alignments for linked elements
+     * @param {*} outerBgColor - outer background color around lead component
+     * @param {*} roundCorners - if we need roun corners in the connection of linkers and content element
+     * @returns array with linkers. [0] - Line Linker; [1] - Corner LInker
+     */
+    createLinkerElements(elemLead, elemSecondary, verticalOffset, align, outerBgColor, roundCorners, leadBgColor, leadBorderColor) {
+        let linkerLine = document.querySelector('.visualLinker-linkerLine');
+        let linkerCorner = document.querySelector('.visualLinker-linkerCorner');
+        if (linkerLine || linkerCorner) {
+            this.removeLinkers();
+        }
+
+        const elemLeadRect = elemLead.getBoundingClientRect();
+        const linkerZIndex = elemSecondary.style.zIndex + 10;
+
+        linkerLine = this.createLinkerLine(elemLeadRect, verticalOffset, linkerZIndex, leadBorderColor, roundCorners, align, leadBgColor);
+        if (roundCorners) {
+            linkerCorner = this.createLinkerCorner(align, verticalOffset, linkerZIndex, leadBorderColor, outerBgColor);
+        } else {
+            linkerCorner = null;
+        }
+
+        return [linkerLine, linkerCorner];
+    },
+
+    /**
+     * Creates line linker element with CSS variables and classes
+    */
+    createLinkerLine(elemLeadRect, verticalOffset, linkerZIndex, linkerBorderColor, roundCorners, align, bgColor) {
+        const linker = document.createElement('div');
+        linker.classList.add('visualLinker-linkerLine');
+
+        linker.style.setProperty('--width', `${elemLeadRect.width}`);
+        linker.style.setProperty('--size', `${verticalOffset + 2}px`);
+        linker.style.setProperty('--z-index', linkerZIndex);
+        linker.style.setProperty('--border-color', linkerBorderColor);
+        linker.style.setProperty('--bg-color', bgColor);
+
+        linker.style.setProperty('border', 'none');
+        linker.style.setProperty('border-left', `1px solid ${linkerBorderColor}`);
+        linker.style.setProperty('border-right', `1px solid ${linkerBorderColor}`);
+
+        linker.classList.add(`linker-${align.vertical}`, `linker-${align.horizontal}`);
+
+        if (!roundCorners || align.full) {
+            linker.classList.add('linker-full');
+        } else {
+            linker.classList.add(`linker-${align.horizontal}`);
+        }
+
+        return linker;
+    },
+
+    /**
+     * Creates corner linker element with CSS variables and classes
+    */
+    createLinkerCorner(align, verticalOffset, linkerZIndex, linkerBorderColor, outerBgColor) {
+        if (align.full) {
+            return null;
+        };
+
+        const linkerCorner = document.createElement('div');
+        linkerCorner.classList.add('visualLinker-linkerCorner');
+
+        linkerCorner.style.setProperty('--size', `${verticalOffset + 4}px`);
+        linkerCorner.style.setProperty('--z-index', linkerZIndex + 1);
+        linkerCorner.style.setProperty('--border-color', linkerBorderColor);
+        linkerCorner.style.setProperty('--outer-bg-color', outerBgColor);
+
+        linkerCorner.classList.add(`linkerCorner-${align.vertical}`, `linkerCorner-${align.horizontal}`);
+
+        return linkerCorner;
+    },
+
+    /**
+     * Рассчёт размеров и позиционирование линкеров
+    */
+    setLinkersRects(elemLead, elemSecondary, linkerElements, align) {
+        this.setLinkerLineElementRect(elemLead, elemSecondary, linkerElements[0], align);
+        if (linkerElements[1]) {
+            this.setLinkerCornerElementRect(elemLead, elemSecondary, linkerElements[1], align);
+        }
+    },
+
+    /**
+    * Позиционирование line linker'a
+    */
+    setLinkerLineElementRect(elemLead, elemSecondary, linkerLineElement, align) {
+        const elemLeadRect = elemLead.getBoundingClientRect();
+        const elemSecondaryRect = elemSecondary.getBoundingClientRect();
+        const linkerLineCoords = this.getLinkerLineCoords(elemLeadRect, elemSecondaryRect, align, linkerLineElement);
+
+        linkerLineElement.style.width = `${elemLeadRect.width}px`;
+        this.positionElem(linkerLineElement, linkerLineCoords);
+    },
+
+    /**
+    * Позиционирование corner linker'a
+    */
+    setLinkerCornerElementRect(elemLead, elemSecondary, linkerCornerElement, align) {
+        const elemLeadRect = elemLead.getBoundingClientRect();
+        const elemSecondaryRect = elemSecondary.getBoundingClientRect();
+        const linkerCornerCoords = this.getLinkerCornerCoords(elemLeadRect, elemSecondaryRect, align, linkerCornerElement);
+
+        this.positionElem(linkerCornerElement, linkerCornerCoords);
+    },
+
+    /**
+     * Calculates coords for line linker element
+     */
+    getLinkerLineCoords(elemLeadRect, elemSecondaryRect, align, linkerElement) {
+        let x = 0;
+        let y = 0;
+        const linkerRect = linkerElement.getBoundingClientRect();
+        if (align.bottom) {
+            x = elemLeadRect.x;
+            y = elemSecondaryRect.top - linkerRect.height;
+        } else if (align.top) {
+            x = elemLeadRect.x;
+            y = elemSecondaryRect.bottom;
+        }
+        return [x, y];
+    },
+
+    /**
+    * Calculates coords for corner linker element
+    */
+    getLinkerCornerCoords(elemLeadRect, elemSecondaryRect, align, linkerCornerElement) {
+        let x = 0;
+        let y = 0;
+        const linkerRect = linkerCornerElement.getBoundingClientRect();
+        if (align.bottom) {
+            y = elemSecondaryRect.top - linkerRect.height;
+        } else if (align.top) {
+            y = elemSecondaryRect.bottom;
+        }
+
+        if (align.left) {
+            x = elemLeadRect.right;
+        } else if (align.right) {
+            x = elemLeadRect.left - linkerRect.width;
+        }
+
+        return [x, y];
+    },
+
+    getDomElements(leadComponent, secondaryComponent) {
+        const elemLead = leadComponent?.getEl()?.dom;
+        const elemSecondary = secondaryComponent?.getEl()?.dom;
+
+        return {elemLead, elemSecondary};
+    },
+
+    /**
+     * Remove linker elements from the DOM
+    */
+    removeLinkers() {
+        const linkerElement = document.querySelector('.visualLinker-linkerLine');
+        const linkerCornerElement = document.querySelector('.visualLinker-linkerCorner');
+        if (linkerElement) {
+            linkerElement.remove();
+        }
+        if (linkerCornerElement) {
+            linkerCornerElement.remove();
+        }
+    },
+
+    /**
+     * Position DOM element by coordinates
+     * @param {*} elem
+     * @param {*} coords
+     */
+    positionElem(elem, coords) {
+        elem.style.left = `${coords[0]}px`;
+        elem.style.top = `${coords[1]}px`;
+    },
+});