@sequent-org/moodboard 1.0.0

package/src/services/ImageUploadService.js

@@ -0,0 +1,246 @@
+/**
+ * Сервис для загрузки и управления изображениями на сервере
+ */
+export class ImageUploadService {
+    constructor(apiClient) {
+        this.apiClient = apiClient;
+        this.uploadEndpoint = '/api/images/upload';
+        this.deleteEndpoint = '/api/images';
+    }
+
+    /**
+     * Загружает изображение на сервер
+     * @param {File|Blob} file - файл изображения
+     * @param {string} name - имя файла
+     * @returns {Promise<{id: string, url: string, width: number, height: number}>}
+     */
+    async uploadImage(file, name = null) {
+        try {
+            // Получаем размеры изображения перед загрузкой
+            const dimensions = await this._getImageDimensions(file);
+            
+            // Создаем FormData для отправки файла
+            const formData = new FormData();
+            formData.append('image', file);
+            formData.append('name', name || file.name || 'image.png');
+            formData.append('width', dimensions.width.toString());
+            formData.append('height', dimensions.height.toString());
+
+            // Получаем CSRF токен
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            if (!csrfToken) {
+                throw new Error('CSRF токен не найден');
+            }
+
+            const response = await fetch(this.uploadEndpoint, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'same-origin',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            
+            if (!result.success) {
+                throw new Error(result.message || 'Ошибка загрузки изображения');
+            }
+
+            return {
+                id: result.data.id,
+                url: result.data.url,
+                width: result.data.width,
+                height: result.data.height,
+                name: result.data.name,
+                size: result.data.size
+            };
+
+        } catch (error) {
+            console.error('Ошибка загрузки изображения:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Загружает изображение из base64 DataURL
+     * @param {string} dataUrl - base64 DataURL
+     * @param {string} name - имя файла
+     * @returns {Promise<{id: string, url: string, width: number, height: number}>}
+     */
+    async uploadFromDataUrl(dataUrl, name = 'clipboard-image.png') {
+        const blob = await this._dataUrlToBlob(dataUrl);
+        return this.uploadImage(blob, name);
+    }
+
+    /**
+     * Удаляет изображение с сервера
+     * @param {string} imageId - ID изображения
+     */
+    async deleteImage(imageId) {
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            const response = await fetch(`${this.deleteEndpoint}/${imageId}`, {
+                method: 'DELETE',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                },
+                credentials: 'same-origin'
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            return result.success;
+
+        } catch (error) {
+            console.error('Ошибка удаления изображения:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Очищает неиспользуемые изображения с сервера
+     * @returns {Promise<{deletedCount: number, errors: Array}>}
+     */
+    async cleanupUnusedImages() {
+        try {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+            
+            const response = await fetch(`${this.deleteEndpoint}/cleanup`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRF-TOKEN': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'Accept': 'application/json'
+                },
+                credentials: 'same-origin'
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.message || `HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            
+            if (result.success) {
+                // Защитная проверка на существование result.data
+                const data = result.data || {};
+                return {
+                    deletedCount: data.deleted_count || 0,
+                    errors: data.errors || []
+                };
+            } else {
+                throw new Error(result.message || 'Ошибка очистки изображений');
+            }
+
+        } catch (error) {
+            console.error('Ошибка очистки неиспользуемых изображений:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Получает информацию об изображении
+     * @param {string} imageId - ID изображения  
+     */
+    async getImageInfo(imageId) {
+        try {
+            const response = await fetch(`${this.deleteEndpoint}/${imageId}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'same-origin'
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            return result.data;
+
+        } catch (error) {
+            console.error('Ошибка получения информации об изображении:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Получает размеры изображения из файла или blob
+     * @private
+     */
+    _getImageDimensions(file) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            const url = URL.createObjectURL(file);
+            
+            img.onload = () => {
+                resolve({
+                    width: img.naturalWidth || img.width,
+                    height: img.naturalHeight || img.height
+                });
+                URL.revokeObjectURL(url);
+            };
+            
+            img.onerror = () => {
+                reject(new Error('Не удалось загрузить изображение для определения размеров'));
+                URL.revokeObjectURL(url);
+            };
+            
+            img.src = url;
+        });
+    }
+
+    /**
+     * Конвертирует DataURL в Blob
+     * @private
+     */
+    _dataUrlToBlob(dataUrl) {
+        return new Promise((resolve) => {
+            const arr = dataUrl.split(',');
+            const mime = arr[0].match(/:(.*?);/)[1];
+            const bstr = atob(arr[1]);
+            let n = bstr.length;
+            const u8arr = new Uint8Array(n);
+            
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            
+            resolve(new Blob([u8arr], { type: mime }));
+        });
+    }
+
+    /**
+     * Проверяет, является ли URL внешней ссылкой на изображение
+     */
+    static isExternalImageUrl(url) {
+        if (!url || typeof url !== 'string') return false;
+        return /^https?:\/\/.+\.(png|jpe?g|gif|webp|bmp|svg)(\?.*)?$/i.test(url);
+    }
+
+    /**
+     * Проверяет, является ли строка base64 DataURL
+     */
+    static isDataUrl(str) {
+        if (!str || typeof str !== 'string') return false;
+        return /^data:image\/.+;base64,/.test(str);
+    }
+}

package/src/services/ZOrderManager.js

@@ -0,0 +1,50 @@
+import { Events } from '../core/events/Events.js';
+
+export class ZOrderManager {
+	constructor(eventBus, pixi, state) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+		this.state = state;
+	}
+
+	attach() {
+		const ensureFramesBottom = () => {
+			const arr = this.state.state.objects || [];
+			if (arr.length === 0) return;
+			const frames = [];
+			const others = [];
+			for (const o of arr) {
+				if (o?.type === 'frame') frames.push(o); else others.push(o);
+			}
+			const newOrder = [...frames, ...others];
+			let changed = false;
+			if (newOrder.length === arr.length) {
+				for (let i = 0; i < arr.length; i++) {
+					if (arr[i] !== newOrder[i]) { changed = true; break; }
+				}
+			}
+			if (!changed) return;
+			this.state.state.objects = newOrder;
+			const world = this.pixi?.worldLayer || this.pixi?.app?.stage;
+			if (world) world.sortableChildren = true;
+			let z = 0;
+			for (const o of this.state.state.objects || []) {
+				const pixi = this.pixi.objects.get(o.id);
+				if (!pixi) continue;
+				if (o.type === 'frame') {
+					pixi.zIndex = -100000;
+				} else {
+					pixi.zIndex = z++;
+				}
+			}
+			this.state.markDirty();
+		};
+
+		this.eventBus.on(Events.Object.Created, () => ensureFramesBottom());
+		this.eventBus.on(Events.Object.Deleted, () => ensureFramesBottom());
+		this.eventBus.on(Events.Object.Reordered, () => ensureFramesBottom());
+		this.eventBus.on(Events.UI.LayerGroupSendToBack, () => ensureFramesBottom());
+	}
+}
+
+

package/src/services/ZoomPanController.js

@@ -0,0 +1,78 @@
+import { Events } from '../core/events/Events.js';
+
+export class ZoomPanController {
+	constructor(eventBus, pixi) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+	}
+
+	attach() {
+		// Масштабирование колесом — глобально отрабатываем Ctrl+Wheel
+		this.eventBus.on(Events.Tool.WheelZoom, ({ x, y, delta }) => {
+			const factor = 1 + (-delta) * 0.0015;
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const oldScale = world.scale.x || 1;
+			const newScale = Math.max(0.1, Math.min(5, oldScale * factor));
+			if (newScale === oldScale) return;
+			// Вычисляем мировые координаты точки под курсором до изменения скейла
+			const worldX = (x - world.x) / oldScale;
+			const worldY = (y - world.y) / oldScale;
+			// Применяем новый скейл и пересчитываем позицию, чтобы точка под курсором осталась на месте
+			world.scale.set(newScale);
+			world.x = x - worldX * newScale;
+			world.y = y - worldY * newScale;
+			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
+		});
+
+		// Кнопки зума из UI
+		this.eventBus.on(Events.UI.ZoomIn, () => {
+			const center = { x: this.pixi.app.view.clientWidth / 2, y: this.pixi.app.view.clientHeight / 2 };
+			this.eventBus.emit(Events.Tool.WheelZoom, { x: center.x, y: center.y, delta: -120 });
+		});
+		this.eventBus.on(Events.UI.ZoomOut, () => {
+			const center = { x: this.pixi.app.view.clientWidth / 2, y: this.pixi.app.view.clientHeight / 2 };
+			this.eventBus.emit(Events.Tool.WheelZoom, { x: center.x, y: center.y, delta: 120 });
+		});
+		this.eventBus.on(Events.UI.ZoomReset, () => {
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const centerX = this.pixi.app.view.clientWidth / 2;
+			const centerY = this.pixi.app.view.clientHeight / 2;
+			const oldScale = world.scale.x || 1;
+			const worldX = (centerX - world.x) / oldScale;
+			const worldY = (centerY - world.y) / oldScale;
+			world.scale.set(1);
+			world.x = centerX - worldX * 1;
+			world.y = centerY - worldY * 1;
+			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: 100 });
+		});
+		this.eventBus.on(Events.UI.ZoomFit, () => {
+			const objs = (this.pixi?.objects ? Array.from(this.pixi.objects.values()) : []);
+			if (objs.length === 0) return;
+			let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+			for (const p of objs) {
+				const b = p.getBounds();
+				minX = Math.min(minX, b.x);
+				minY = Math.min(minY, b.y);
+				maxX = Math.max(maxX, b.x + b.width);
+				maxY = Math.max(maxY, b.y + b.height);
+			}
+			const bboxW = Math.max(1, maxX - minX);
+			const bboxH = Math.max(1, maxY - minY);
+			const viewW = this.pixi.app.view.clientWidth;
+			const viewH = this.pixi.app.view.clientHeight;
+			const padding = 40;
+			const scaleX = (viewW - padding) / bboxW;
+			const scaleY = (viewH - padding) / bboxH;
+			const newScale = Math.max(0.1, Math.min(5, Math.min(scaleX, scaleY)));
+			const world = this.pixi.worldLayer || this.pixi.app.stage;
+			const worldCenterX = minX + bboxW / 2;
+			const worldCenterY = minY + bboxH / 2;
+			world.scale.set(newScale);
+			world.x = viewW / 2 - worldCenterX * newScale;
+			world.y = viewH / 2 - worldCenterY * newScale;
+			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
+		});
+	}
+}
+
+