vgapp 1.1.5 → 1.1.7

package/CHANGELOG.md

@@ -1,18 +1,39 @@
-# VEGAS-APP 1.1.5 (Апрель, 9, 2026)
-## Новые фичи
-* В VGModal добавлены встроенные модули `VGModalDrag` и `VGModalResize` с поддержкой параметров `drag`/`resize` (включение, порог, зона edge, минимальные размеры, debug).
-
-## Изменения
-* В VGFilePreview при `ui.nameOnly=true` блок `.preview` отключается (очистка + скрытие), отображается только имя файла.
-* В VGFilePreview добавлена интеграция метаданных для audio/video. Audio: `title` и `cover` из ID3; Video: генерация poster-кадра в `icon`.
-* В VGFilePreview унифицировано поведение имени для audio/video: `name` показывает title из метаданных (если есть), иначе имя файла; `original_name` при наличии title показывает имя файла.
-* В VGFilePreview клик по `.vg-filepreview-audio-inline__name` теперь запускает/ставит на паузу аудио.
-* В VGFilePreview клик по картинке в `icon` (image/audio cover/video poster) открывает ImageModal.
-* В стилях VGFilePreview добавлен `.is-preview-action { cursor: pointer; }`.
-* В VGFilePreview добавлена конфигурация предпросмотра по группам через `this._params.preview.<group>.enable` (`audio`, `video`, `image`, `archive`, `text`, `office`, `pdf`), в текущем состоянии по умолчанию группы включены.
-* В VGModal добавлено автоматическое управление drag/resize при `show/hide/resize` модального окна, с синхронизацией позиции и границ внутри viewport.
-* В VGFilePreview изменены дефолты групп предпросмотра: `image` и `office` включены по умолчанию (теперь включены все группы предпросмотра).
-* В VGFilePreview для image-файлов в `_shouldRenderPreviewForCurrentFile()` добавлено принудительное отключение inline-preview.
+# VEGAS-APP 1.1.7 (Апрель, 13, 2026)
+## Новые фичи
+* В VGFilePreview добавлена поддержка атрибута `data-name` для явной установки отображаемого имени файла (в приоритете над `data-vg-filepreview-display-name`).
+
+## Изменения
+* Обновлена версия пакета в `package.json`: `1.1.6` -> `1.1.7`.
+
+---
+
+# VEGAS-APP 1.1.6 (Апрель, 10, 2026)
+## Новые фичи
+* **VGToast**: добавлены встроенные модули VGToastDrag и VGToastResize с поддержкой параметров drag/resize (enable, threshold, edgeSize, minWidth/minHeight, debug).
+
+## Изменения
+* В VGToast добавлено автоматическое управление drag/resize при show/hide/dispose и синхронизация позиции/размера внутри viewport.
+* Исправлен скачок тоста при начале drag/resize: при подготовке позиции сбрасывается translate.
+* Исправлено поведение автоскрытия при интеракции: таймер останавливается на pointerdown и корректно возобновляется на pointerup/pointercancel.
+* В VGToast.build() при static: true и отсутствии явного autohide автоскрытие по умолчанию отключается.
+* Исправлены некорректно отображавшиеся комментарии в vgtoast.js.
+
+---
+# VEGAS-APP 1.1.5 (Апрель, 9, 2026)
+## Новые фичи
+* В VGModal добавлены встроенные модули `VGModalDrag` и `VGModalResize` с поддержкой параметров `drag`/`resize` (включение, порог, зона edge, минимальные размеры, debug).
+
+## Изменения
+* В VGFilePreview при `ui.nameOnly=true` блок `.preview` отключается (очистка + скрытие), отображается только имя файла.
+* В VGFilePreview добавлена интеграция метаданных для audio/video. Audio: `title` и `cover` из ID3; Video: генерация poster-кадра в `icon`.
+* В VGFilePreview унифицировано поведение имени для audio/video: `name` показывает title из метаданных (если есть), иначе имя файла; `original_name` при наличии title показывает имя файла.
+* В VGFilePreview клик по `.vg-filepreview-audio-inline__name` теперь запускает/ставит на паузу аудио.
+* В VGFilePreview клик по картинке в `icon` (image/audio cover/video poster) открывает ImageModal.
+* В стилях VGFilePreview добавлен `.is-preview-action { cursor: pointer; }`.
+* В VGFilePreview добавлена конфигурация предпросмотра по группам через `this._params.preview.<group>.enable` (`audio`, `video`, `image`, `archive`, `text`, `office`, `pdf`), в текущем состоянии по умолчанию группы включены.
+* В VGModal добавлено автоматическое управление drag/resize при `show/hide/resize` модального окна, с синхронизацией позиции и границ внутри viewport.
+* В VGFilePreview изменены дефолты групп предпросмотра: `image` и `office` включены по умолчанию (теперь включены все группы предпросмотра).
+* В VGFilePreview для image-файлов в `_shouldRenderPreviewForCurrentFile()` добавлено принудительное отключение inline-preview.
 
 ---
 # VEGAS-APP 1.1.4 (Апрель, 9, 2026)
@@ -23,7 +44,6 @@
 * В модуле VGFilePreview параметр `ui.preview` сделан опциональным и выключен по умолчанию.
 * В модуле VGFilePreview длинные названия файлов и original name ограничены: `min-width: 60px` и `text-overflow: ellipsis`, чтобы название не схлопывалось.
 
-
 ---
 
 # VEGAS-APP 1.0.0 - 1.1.3 (Апрель, 9, 2026)
@@ -125,7 +145,6 @@
 
 * Исправлены ошибки в разных модулях
 
-
 ---
 
 # VEGAS-APP 0.7.2 - 0.7.4 (Декабрь, 04, 2025)
@@ -246,19 +265,16 @@
 * Новый параметр timeout. Задержка показа модального окна после закрытия других открытых окон.
 ---
 
-
 # VEGAS-APP 0.1.8 (Март, 13, 2025)
 ## Модуль VGSelect
 * Релиз
 ---
 
-
 # VEGAS-APP 0.1.7 (Март, 12, 2025)
 ## Модуль VGSelect
 * Исправлены ошибки
 ---
 
-
 # VEGAS-APP 0.1.5 (Март, 11, 2025)
 ## Модуль VGSelect
 ### Добавлено:
@@ -274,7 +290,6 @@
 * Событие после аякс запроса NAME_KEY.loaded
 ---
 
-
 # VEGAS-APP 0.1.4 (Март, 10, 2025)
 * Перенесен плагин (<a href="https://github.com/vegas-dev/vegas-select">VGSelect</a>) в модуль VGSelect
 * для модулей VGSidebar и VGModal добавлена возможность собирать параметры с кнопки вызова элемента
@@ -282,3 +297,4 @@
 * исправлены некоторые ошибки
 ---
 
+

package/agents.md

@@ -1,3 +1,9 @@
+### Окружение
+ - Проект, репозиторий, vegas-app является основным, фундаментальным. Тут идет разработка, редактирование проекта vgapp.
+ - Проект, репозиторий, vegas-app-backend является демонстрационным, для тестирования и проверки работоспособности.
+ - Оба проекта связаны между собой симлинками, но при этом имеют разные цели и функциональность.
+
+
 ### Свод правил:
 1. Правила по changelog для проекта vegas-app:
    - Правило: при команде "записать в changelog" или "дополни changelog" записываем вкратце изменения в файл `CHANGELOG.md`, которые были сделаны с прошлой версии. Записываем так: Версия (смотри `package.json`), дата и построчно что было внесено, нужно как-то выделить новые фичи.
@@ -5,3 +11,4 @@
    - Если версия в `package.json` не изменилась, нужно проверить, есть ли эта версия в `CHANGELOG.md`.
    - Если запись версии уже есть, дописывать изменения в существующую запись (как дополнение), а не создавать новый блок той же версии.
    - Если записи версии нет, создавать новый блок с версией из `package.json`, датой и списком изменений, запись добавляется сверху.
+2. Все файлы должны иметь кодировку UTF-8.

package/app/modules/vgfilepreview/js/vgfilepreview.js

@@ -760,9 +760,9 @@ class VGFilePreview extends BaseModule {
 			return this._isPreviewGroupEnabled('video');
 		}
 
-		if (this._isImageFile()) {
-			return false;
-		}
+		if (this._isImageFile()) {
+			return false;
+		}
 
 		if (this._isOfficeFile()) {
 			return this._isPreviewGroupEnabled('office');
@@ -937,6 +937,11 @@ class VGFilePreview extends BaseModule {
 	}
 
 	_getDataDisplayName() {
+		const dataName = String(this._element?.getAttribute('data-name') || '').trim();
+		if (dataName) {
+			return dataName;
+		}
+
 		return String(this._element?.getAttribute('data-vg-filepreview-display-name') || '').trim();
 	}
 

package/app/modules/vgfiles/js/base.js

@@ -528,9 +528,10 @@ class VGFilesBase extends BaseModule {
 				return;
 			}
 
-			if (existingNode) {
-				existingNode.remove();
-			}
+			if (existingNode) {
+				VGFilePreview.stopActiveInlineAudioIfDetached([existingNode]);
+				existingNode.remove();
+			}
 
 			const nextNode = this._createInfoListItem(file, i, $itemsTemplate, $itemsTemplateClasses, fileKey, signature);
 			nextNodes.push(nextNode);
@@ -934,11 +935,28 @@ class VGFilesBase extends BaseModule {
 		Selectors.findAll('[data-vg-files="generated"]', this._element).forEach(el => el.remove());
 	}
 
-	clear(resetInput = true) {
-		this._revokeUrls();
-		if (resetInput) {
-			this._resetFileInput();
-		}
+	clear(resetInput = true) {
+		const detachedNodes = [];
+		if (this._nodes.info) {
+			const $infoList = Selectors.find(`.${this._getClass('info-list')}`, this._element);
+			if ($infoList?.children?.length) {
+				detachedNodes.push(...Array.from($infoList.children));
+			}
+		}
+		if (this._nodes.drop) {
+			const $dropList = Selectors.find(`.${this._getClass('drop-list')}`, this._element);
+			if ($dropList?.children?.length) {
+				detachedNodes.push(...Array.from($dropList.children));
+			}
+		}
+		if (detachedNodes.length) {
+			VGFilePreview.stopActiveInlineAudioIfDetached(detachedNodes);
+		}
+
+		this._revokeUrls();
+		if (resetInput) {
+			this._resetFileInput();
+		}
 		this._cleanupFakeInputs();
 		this._cleanupErrors();
 		this._files = [];

package/app/modules/vgformsender/js/vgformsender.js

@@ -274,18 +274,18 @@ class VGFormSender extends BaseModule {
 	 * @param {FormData|null} data - Дополнительные данные для отправки
 	 */
 	request(event, data = null) {
-		const _this = this;
-		const mergeFormData = (target, source) => {
-			const replacedKeys = new Set();
-			source.forEach((value, key) => {
-				if (!replacedKeys.has(key)) {
-					target.delete(key);
-					replacedKeys.add(key);
-				}
-				target.append(key, value);
-			});
-			return target;
-		}
+		const _this = this;
+		const mergeFormData = (target, source) => {
+			const replacedKeys = new Set();
+			source.forEach((value, key) => {
+				if (!replacedKeys.has(key)) {
+					target.delete(key);
+					replacedKeys.add(key);
+				}
+				target.append(key, value);
+			});
+			return target;
+		}
 
 		_this._alertBefore();
 
@@ -621,7 +621,7 @@ class VGFormSender extends BaseModule {
 				response = data.response.view
 			} else if (typeof response !== 'string') {
 				if (status === 'danger') {
-					response.title = lang_titles(this._params.lang, 'errors').title;
+					response.title = ('title' in response) ? response.title : lang_titles(this._params.lang, 'errors').title;
 
 					if ('code' in data && data.code !== 200) {
 						const messages = {
@@ -782,4 +782,4 @@ EventHandler.on(document, EVENT_SUBMIT_DATA_API, function (event) {
 	}
 })
 
-export default VGFormSender;
+export default VGFormSender;

package/app/modules/vgtoast/js/vgtoast.drag.js

@@ -0,0 +1,335 @@
+const DEFAULT_OPTIONS = {
+	enable: false,
+	selector: '.vg-toast-wrapper',
+	threshold: 4,
+	resizeEdgeSize: 8,
+	debug: false,
+};
+
+class VGToastDrag {
+	constructor(modalElement, dialogElement, options = {}) {
+		this._modalElement = modalElement;
+		this._dialogElement = dialogElement;
+		this._options = this._normalizeOptions(options);
+		this._pointerId = null;
+		this._dragTarget = null;
+		this._isDragging = false;
+		this._startX = 0;
+		this._startY = 0;
+		this._currentX = 0;
+		this._currentY = 0;
+		this._dialogStartLeft = 0;
+		this._dialogStartTop = 0;
+		this._dialogWidth = 0;
+		this._dialogHeight = 0;
+		this._isEnabled = false;
+		this._previousUserSelect = '';
+		this._previousTransition = '';
+		this._previousWillChange = '';
+		this._initialRect = null;
+		this._lockedIframes = [];
+		this._debugElement = null;
+
+		this._onPointerMove = this._onPointerMove.bind(this);
+		this._onPointerUp = this._onPointerUp.bind(this);
+		this._onPointerDown = this._onPointerDown.bind(this);
+		this._onNativeDragStart = this._onNativeDragStart.bind(this);
+	}
+
+	setOptions(options = {}) {
+		this._options = this._normalizeOptions(options, this._options);
+		this._updateDebugOverlay();
+	}
+
+	enable() {
+		if (!this._dialogElement || this._isEnabled) return;
+
+		this._updateDebugOverlay();
+		this._dialogElement.addEventListener('pointerdown', this._onPointerDown);
+		this._isEnabled = true;
+	}
+
+	disable() {
+		if (!this._dialogElement || !this._isEnabled) return;
+
+		this._dialogElement.removeEventListener('pointerdown', this._onPointerDown);
+		document.removeEventListener('pointermove', this._onPointerMove);
+		document.removeEventListener('pointerup', this._onPointerUp);
+		document.removeEventListener('pointercancel', this._onPointerUp);
+		document.removeEventListener('dragstart', this._onNativeDragStart, true);
+		this._dialogElement.style.touchAction = '';
+		document.body.style.userSelect = this._previousUserSelect;
+		this._pointerId = null;
+		this._dragTarget = null;
+		this._isDragging = false;
+		this._initialRect = null;
+		this._unlockEmbeddedFrames();
+		this._restoreDragStyles();
+		delete this._modalElement.dataset.vgToastDragging;
+		this._setDebugVisibility(false);
+		this._isEnabled = false;
+	}
+
+	syncPosition() {
+		if (!this._isEnabled) return;
+		if (!this._isPreparedForInteraction()) return;
+
+		const rect = this._dialogElement.getBoundingClientRect();
+		const width = this._dialogElement.offsetWidth || rect.width;
+		const height = this._dialogElement.offsetHeight || rect.height;
+		const currentLeft = Number.parseFloat(this._dialogElement.style.left);
+		const currentTop = Number.parseFloat(this._dialogElement.style.top);
+		const left = Number.isFinite(currentLeft) ? currentLeft : rect.left;
+		const top = Number.isFinite(currentTop) ? currentTop : rect.top;
+		const maxLeft = Math.max(0, window.innerWidth - width);
+		const maxTop = Math.max(0, window.innerHeight - height);
+		const nextLeft = Math.min(maxLeft, Math.max(0, left));
+		const nextTop = Math.min(maxTop, Math.max(0, top));
+
+		this._dialogElement.style.left = `${nextLeft}px`;
+		this._dialogElement.style.top = `${nextTop}px`;
+		this._updateDebugValues('synced');
+	}
+
+	_onPointerDown(event) {
+		if (event.button !== 0) return;
+
+		const dragArea = this._resolveDragArea(event.target);
+		if (!dragArea || !this._dialogElement.contains(dragArea)) return;
+		if (this._isPointerOnResizeEdge(event)) return;
+		if (event.target.closest('input, textarea, select, button, a, [contenteditable="true"]')) return;
+		if (dragArea && dragArea.closest('[data-vg-dismiss="toast"]')) return;
+
+		this._pointerId = event.pointerId;
+		this._dragTarget = event.target;
+		this._isDragging = false;
+		event.preventDefault();
+		this._previousUserSelect = document.body.style.userSelect;
+		document.body.style.userSelect = 'none';
+		this._initialRect = this._dialogElement.getBoundingClientRect();
+		this._dialogStartLeft = this._initialRect.left;
+		this._dialogStartTop = this._initialRect.top;
+		this._dialogWidth = this._initialRect.width;
+		this._dialogHeight = this._initialRect.height;
+		this._startX = event.clientX;
+		this._startY = event.clientY;
+		this._currentX = event.clientX;
+		this._currentY = event.clientY;
+		this._lockEmbeddedFrames();
+		this._modalElement.dataset.vgToastDragging = 'true';
+		this._setDebugVisibility(true);
+		this._updateDebugValues('armed');
+
+		document.addEventListener('dragstart', this._onNativeDragStart, true);
+
+		if (this._dialogElement && this._dialogElement.setPointerCapture) {
+			this._dialogElement.setPointerCapture(event.pointerId);
+		}
+
+		document.addEventListener('pointermove', this._onPointerMove);
+		document.addEventListener('pointerup', this._onPointerUp);
+		document.addEventListener('pointercancel', this._onPointerUp);
+	}
+
+	_onPointerMove(event) {
+		if (event.pointerId !== this._pointerId) return;
+
+		this._currentX = event.clientX;
+		this._currentY = event.clientY;
+		if (!this._isDragging) {
+			const deltaX = this._currentX - this._startX;
+			const deltaY = this._currentY - this._startY;
+			const distance = Math.hypot(deltaX, deltaY);
+			if (distance < this._options.threshold) return;
+
+			this._isDragging = true;
+			this._dialogElement.style.touchAction = 'none';
+			this._applyDragStyles();
+			this._preparePosition(this._initialRect);
+			event.preventDefault();
+			this._updateDebugValues('dragging');
+		}
+		this._applyDragPosition();
+	}
+
+	_onPointerUp(event) {
+		if (event.pointerId !== this._pointerId) return;
+
+		document.removeEventListener('pointermove', this._onPointerMove);
+		document.removeEventListener('pointerup', this._onPointerUp);
+		document.removeEventListener('pointercancel', this._onPointerUp);
+		document.removeEventListener('dragstart', this._onNativeDragStart, true);
+		if (this._isDragging) {
+			this._applyDragPosition();
+		}
+		this._dialogElement.style.touchAction = '';
+		document.body.style.userSelect = this._previousUserSelect;
+
+		if (this._dialogElement && this._dialogElement.releasePointerCapture) {
+			this._dialogElement.releasePointerCapture(event.pointerId);
+		}
+
+		this._pointerId = null;
+		this._dragTarget = null;
+		this._isDragging = false;
+		this._initialRect = null;
+		this._unlockEmbeddedFrames();
+		this._restoreDragStyles();
+		delete this._modalElement.dataset.vgToastDragging;
+		this._setDebugVisibility(this._options.debug);
+		this._updateDebugValues('idle');
+	}
+
+	_preparePosition(rect = null) {
+		if (!this._dialogElement) return;
+
+		const currentRect = rect || this._dialogElement.getBoundingClientRect();
+		this._dialogElement.style.position = 'fixed';
+		this._dialogElement.style.margin = '0';
+		this._dialogElement.style.left = `${currentRect.left}px`;
+		this._dialogElement.style.top = `${currentRect.top}px`;
+		this._dialogElement.style.width = `${currentRect.width}px`;
+		this._dialogElement.style.height = `${currentRect.height}px`;
+		this._dialogElement.style.transform = 'none';
+		this._dialogElement.style.translate = 'none';
+	}
+
+	_isPreparedForInteraction() {
+		return this._dialogElement.style.position === 'fixed' && this._dialogElement.style.transform === 'none';
+	}
+
+	_isPointerOnResizeEdge(event) {
+		const rect = this._dialogElement.getBoundingClientRect();
+		const offsetX = event.clientX - rect.left;
+		const offsetY = event.clientY - rect.top;
+		const edgeSize = this._options.resizeEdgeSize;
+
+		const nearTop = offsetY >= 0 && offsetY <= edgeSize;
+		const nearBottom = offsetY <= rect.height && offsetY >= rect.height - edgeSize;
+		const nearLeft = offsetX >= 0 && offsetX <= edgeSize;
+		const nearRight = offsetX <= rect.width && offsetX >= rect.width - edgeSize;
+
+		return nearTop || nearBottom || nearLeft || nearRight;
+	}
+
+	_applyDragPosition() {
+		if (this._pointerId === null || !this._isDragging) return;
+
+		const deltaX = this._currentX - this._startX;
+		const deltaY = this._currentY - this._startY;
+		const maxLeft = Math.max(0, window.innerWidth - this._dialogWidth);
+		const maxTop = Math.max(0, window.innerHeight - this._dialogHeight);
+		const nextLeft = Math.min(maxLeft, Math.max(0, this._dialogStartLeft + deltaX));
+		const nextTop = Math.min(maxTop, Math.max(0, this._dialogStartTop + deltaY));
+
+		this._dialogElement.style.left = `${nextLeft}px`;
+		this._dialogElement.style.top = `${nextTop}px`;
+		this._updateDebugValues('dragging');
+	}
+
+	_onNativeDragStart(event) {
+		if (this._pointerId === null) return;
+		event.preventDefault();
+	}
+
+	_applyDragStyles() {
+		this._previousTransition = this._dialogElement.style.transition;
+		this._previousWillChange = this._dialogElement.style.willChange;
+		this._dialogElement.style.transition = 'none';
+		this._dialogElement.style.willChange = 'left, top';
+	}
+
+	_restoreDragStyles() {
+		this._dialogElement.style.transition = this._previousTransition;
+		this._dialogElement.style.willChange = this._previousWillChange;
+	}
+
+	_lockEmbeddedFrames() {
+		if (!this._dialogElement || this._lockedIframes.length) return;
+
+		const iframes = this._dialogElement.querySelectorAll('iframe');
+		for (const frame of iframes) {
+			this._lockedIframes.push({
+				element: frame,
+				pointerEvents: frame.style.pointerEvents,
+			});
+			frame.style.pointerEvents = 'none';
+		}
+	}
+
+	_unlockEmbeddedFrames() {
+		if (!this._lockedIframes.length) return;
+
+		for (const item of this._lockedIframes) {
+			item.element.style.pointerEvents = item.pointerEvents;
+		}
+		this._lockedIframes = [];
+	}
+
+	_normalizeOptions(options, base = DEFAULT_OPTIONS) {
+		const merged = {...base, ...options};
+		const threshold = Number(merged.threshold);
+		const resizeEdgeSize = Number(merged.resizeEdgeSize);
+		const selector = typeof merged.selector === 'string' && merged.selector.trim()
+			? merged.selector
+			: DEFAULT_OPTIONS.selector;
+
+		return {
+			...merged,
+			selector,
+			threshold: Number.isFinite(threshold) && threshold >= 0 ? threshold : DEFAULT_OPTIONS.threshold,
+			resizeEdgeSize: Number.isFinite(resizeEdgeSize) && resizeEdgeSize > 0 ? resizeEdgeSize : DEFAULT_OPTIONS.resizeEdgeSize,
+			debug: Boolean(merged.debug),
+		};
+	}
+
+	_resolveDragArea(target) {
+		try {
+			return target.closest(this._options.selector);
+		} catch (error) {
+			return target.closest(DEFAULT_OPTIONS.selector);
+		}
+	}
+
+	_updateDebugOverlay() {
+		if (!this._options.debug) {
+			this._setDebugVisibility(false);
+			return;
+		}
+
+		if (!this._debugElement) {
+			this._debugElement = document.createElement('div');
+			this._debugElement.style.position = 'absolute';
+			this._debugElement.style.left = '170px';
+			this._debugElement.style.bottom = '8px';
+			this._debugElement.style.zIndex = '7';
+			this._debugElement.style.padding = '4px 6px';
+			this._debugElement.style.borderRadius = '4px';
+			this._debugElement.style.background = 'rgba(0, 0, 0, 0.72)';
+			this._debugElement.style.color = '#fff';
+			this._debugElement.style.fontSize = '11px';
+			this._debugElement.style.lineHeight = '1.3';
+			this._debugElement.style.pointerEvents = 'none';
+			this._dialogElement.append(this._debugElement);
+		}
+
+		this._setDebugVisibility(true);
+		this._updateDebugValues(this._isDragging ? 'dragging' : 'idle');
+	}
+
+	_setDebugVisibility(visible) {
+		if (!this._debugElement) return;
+		this._debugElement.style.display = visible ? 'block' : 'none';
+	}
+
+	_updateDebugValues(state = 'idle') {
+		if (!this._debugElement || !this._options.debug) return;
+
+		const rect = this._dialogElement.getBoundingClientRect();
+		this._debugElement.textContent = `drag:${state} x:${Math.round(rect.left)} y:${Math.round(rect.top)} w:${Math.round(rect.width)} h:${Math.round(rect.height)}`;
+	}
+}
+
+export default VGToastDrag;
+
+