@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/services/BoardService.js

@@ -26,7 +26,6 @@ export class BoardService {
 				this.grid?.setEnabled(false);
 				this.grid?.updateVisual();
 				this.pixi.setGrid(this.grid);
-				// Обновляем сохранённые данные
 				try {
 					this.eventBus.emit(Events.Grid.BoardDataChanged, {
 						grid: { type: 'off', options: this.grid?.serialize ? this.grid.serialize() : {} }
@@ -34,6 +33,7 @@ export class BoardService {
 				} catch (_) {}
 				return;
 			}
+			this.grid?.destroy?.();
 			const gridOptions = {
 				...GridFactory.getDefaultOptions(type),
 				enabled: true,
@@ -44,8 +44,8 @@ export class BoardService {
 			};
 			try {
 				this.grid = GridFactory.createGrid(type, gridOptions);
-				this.grid.updateVisual();
 				this.pixi.setGrid(this.grid);
+				this.refreshGridViewport();
 				this.eventBus.emit(Events.UI.GridCurrent, { type });
 				// Сообщаем об обновлении данных сетки для сохранения в boardData
 				try {
@@ -67,6 +67,7 @@ export class BoardService {
 			req.view = { width: viewEl.clientWidth, height: viewEl.clientHeight };
 			// Прокидываем только метаданные объектов через ядро (сам список формирует Core)
 		});
+		this.eventBus.on(Events.Viewport.Changed, () => this.refreshGridViewport());
 		this.eventBus.on(Events.UI.MinimapCenterOn, ({ worldX, worldY }) => {
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const viewW = this.pixi.app.view.clientWidth;
@@ -74,6 +75,11 @@ export class BoardService {
 			const s = world.scale?.x || 1;
 			world.x = viewW / 2 - worldX * s;
 			world.y = viewH / 2 - worldY * s;
+			if (this.pixi.gridLayer) {
+				this.pixi.gridLayer.x = world.x;
+				this.pixi.gridLayer.y = world.y;
+			}
+			this.refreshGridViewport();
 		});
 	}
 
@@ -81,9 +87,43 @@ export class BoardService {
 		if (!this.grid) return;
 		const size = this._getCanvasSize?.() || { width: 800, height: 600 };
 		this.grid.resize(size.width, size.height);
+		this.grid.viewportBounds = null;
 		this.grid.updateVisual();
 		this.pixi.setGrid(this.grid);
 	}
+
+	/**
+	 * Синхронизирует gridLayer с world (позиция + масштаб) и перерисовывает сетку.
+	 */
+	refreshGridViewport() {
+		if (!this.grid?.enabled || !this.pixi?.gridLayer) return;
+		const view = this.pixi.app?.view;
+		if (!view) return;
+		const world = this.pixi.worldLayer || this.pixi.app.stage;
+		const gl = this.pixi.gridLayer;
+		const scale = world.scale?.x ?? 1;
+
+		// Синхронизация gridLayer с world — сетка зуммируется вместе с доской
+		gl.x = world.x;
+		gl.y = world.y;
+		if (gl.scale) {
+			gl.scale.set(scale);
+		}
+
+		// DotGrid: передаём zoom до setVisibleBounds (чтобы createVisual видел актуальный zoom)
+		if (this.grid.type === 'dot' && typeof this.grid.setZoom === 'function') {
+			this.grid.setZoom(scale);
+		}
+
+		// Видимая область в мировых координатах (с учётом scale)
+		const gridSize = this.grid._getEffectiveSize?.() ?? this.grid.size;
+		const pad = Math.max(100, (gridSize || 20) * 4);
+		const left = (-gl.x - pad) / scale;
+		const top = (-gl.y - pad) / scale;
+		const right = (view.clientWidth - gl.x + pad) / scale;
+		const bottom = (view.clientHeight - gl.y + pad) / scale;
+		this.grid.setVisibleBounds(left, top, right, bottom);
+	}
 }
 
 

package/src/services/FrameService.js

@@ -50,8 +50,10 @@ export class FrameService {
 	}
 
 	attach() {
-		// Автоприкрепление объектов при создании произвольного фрейма
-		this.eventBus.on(Events.Object.Created, ({ objectId, objectData }) => {
+		if (this._attached) return;
+		this._attached = true;
+
+		this._onObjectCreated = ({ objectId, objectData }) => {
 			try {
 				if (!objectData || objectData.type !== 'frame') return;
 				const isArbitrary = (objectData.properties && objectData.properties.lockedAspect === false)
@@ -66,14 +68,14 @@ export class FrameService {
 				// И оповестим общий менеджер на всякий случай
 				this.eventBus.emit(Events.Object.Reordered, { reason: 'attach_arbitrary_frame_children' });
 			} catch (_) { /* no-op */ }
-		});
+		};
+		this.eventBus.on(Events.Object.Created, this._onObjectCreated);
 
-		// Визуал подсветки при drag над фреймом и перенос детей на drag
-		this.eventBus.on(Events.Tool.DragStart, (data) => {
+		this._onDragStart = (data) => {
 			const moved = this.state.state.objects.find(o => o.id === data.object);
 			if (moved && moved.type === 'frame') {
 				// Серый фон
-				this.pixi.setFrameFill(moved.id, moved.width, moved.height, 0xEEEEEE);
+				this.pixi.setFrameFill(moved.id, moved.width, moved.height, 0xFAFAFA);
 				// Cнимок стартовых позиций по центру PIXI
 				const fp = this.pixi.objects.get(moved.id);
 				this._frameDragFrameStart = { x: fp?.x || 0, y: fp?.y || 0 };
@@ -84,9 +86,10 @@ export class FrameService {
 					if (childPixi) this._frameDragChildStart.set(childId, { x: childPixi.x, y: childPixi.y });
 				}
 			}
-		});
+		};
+		this.eventBus.on(Events.Tool.DragStart, this._onDragStart);
 
-		this.eventBus.on(Events.Tool.DragUpdate, (data) => {
+		this._onDragUpdate = (data) => {
 			const moved = this.state.state.objects.find(o => o.id === data.object);
 			if (!moved) return;
 			if (moved.type === 'frame') {
@@ -125,40 +128,14 @@ export class FrameService {
 						});
 					}
 				}
-				// Во время перетаскивания тоже гарантируем порядок
-				this._forceFramesBelow();
 			} else {
-				// Hover-эффект: подсветка фрейма, если центр объекта внутри
-				const centerX = moved.position.x + (moved.width || 0) / 2;
-				const centerY = moved.position.y + (moved.height || 0) / 2;
-				const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
-				const ordered = frames.slice().sort((a, b) => {
-					const pa = this.pixi.objects.get(a.id);
-					const pb = this.pixi.objects.get(b.id);
-					return (pb?.zIndex || 0) - (pa?.zIndex || 0);
-				});
-				let hoverId = null;
-				for (const f of ordered) {
-					const rect = { x: f.position.x, y: f.position.y, w: f.width || 0, h: f.height || 0 };
-					if (centerX >= rect.x && centerX <= rect.x + rect.w && centerY >= rect.y && centerY <= rect.y + rect.h) {
-						hoverId = f.id; break;
-					}
-				}
-				if (hoverId !== this._frameHoverId) {
-					if (this._frameHoverId) {
-						const prev = frames.find(fr => fr.id === this._frameHoverId);
-						if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
-					}
-					if (hoverId) {
-						const cur = frames.find(fr => fr.id === hoverId);
-						if (cur) this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xEEEEEE);
-					}
-					this._frameHoverId = hoverId || null;
-				}
+				// Hover-эффект: throttle, чтобы не вызывать setFrameFill на каждый кадр
+				this._applyHoverThrottled(data.object);
 			}
-		});
+		};
+		this.eventBus.on(Events.Tool.DragUpdate, this._onDragUpdate);
 
-		this.eventBus.on(Events.Tool.DragEnd, (data) => {
+		this._onDragEnd = (data) => {
 			const movedObj = this.state.state.objects.find(o => o.id === data.object);
 			if (!movedObj) return;
 			if (movedObj.type === 'frame') {
@@ -172,9 +149,32 @@ export class FrameService {
 				const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
 				const prev = frames.find(fr => fr.id === this._frameHoverId);
 				if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
-				this._frameHoverId = null;
-			}
-		});
+			this._frameHoverId = null;
+		}
+		};
+		this.eventBus.on(Events.Tool.DragEnd, this._onDragEnd);
+	}
+
+	detach() {
+		if (!this._attached) return;
+		this._attached = false;
+		if (this._hoverRafId != null) {
+			cancelAnimationFrame(this._hoverRafId);
+			this._hoverRafId = null;
+		}
+		this._hoverRafScheduled = false;
+		this._hoverPendingObjectId = null;
+		if (this._onObjectCreated) this.eventBus.off(Events.Object.Created, this._onObjectCreated);
+		if (this._onDragStart) this.eventBus.off(Events.Tool.DragStart, this._onDragStart);
+		if (this._onDragUpdate) this.eventBus.off(Events.Tool.DragUpdate, this._onDragUpdate);
+		if (this._onDragEnd) this.eventBus.off(Events.Tool.DragEnd, this._onDragEnd);
+		this._onObjectCreated = null;
+		this._onDragStart = null;
+		this._onDragUpdate = null;
+		this._onDragEnd = null;
+		this._frameDragFrameStart = null;
+		this._frameDragChildStart = null;
+		this._frameHoverId = null;
 	}
 
 	_getFrameChildren(frameId) {
@@ -186,6 +186,47 @@ export class FrameService {
 		return res;
 	}
 
+	_applyHoverThrottled(movedObjectId) {
+		if (this._hoverRafScheduled) return;
+		this._hoverRafScheduled = true;
+		this._hoverPendingObjectId = movedObjectId;
+		this._hoverRafId = requestAnimationFrame(() => {
+			this._hoverRafScheduled = false;
+			this._hoverRafId = null;
+			const oid = this._hoverPendingObjectId;
+			this._hoverPendingObjectId = null;
+			if (!oid) return;
+			const moved = this.state.state.objects.find(o => o.id === oid);
+			if (!moved || moved.type === 'frame') return;
+			const centerX = moved.position.x + (moved.width || 0) / 2;
+			const centerY = moved.position.y + (moved.height || 0) / 2;
+			const frames = (this.state.state.objects || []).filter(o => o.type === 'frame');
+			const ordered = frames.slice().sort((a, b) => {
+				const pa = this.pixi.objects.get(a.id);
+				const pb = this.pixi.objects.get(b.id);
+				return (pb?.zIndex || 0) - (pa?.zIndex || 0);
+			});
+			let hoverId = null;
+			for (const f of ordered) {
+				const rect = { x: f.position.x, y: f.position.y, w: f.width || 0, h: f.height || 0 };
+				if (centerX >= rect.x && centerX <= rect.x + rect.w && centerY >= rect.y && centerY <= rect.y + rect.h) {
+					hoverId = f.id; break;
+				}
+			}
+			if (hoverId !== this._frameHoverId) {
+				if (this._frameHoverId) {
+					const prev = frames.find(fr => fr.id === this._frameHoverId);
+					if (prev) this.pixi.setFrameFill(prev.id, prev.width, prev.height, 0xFFFFFF);
+				}
+				if (hoverId) {
+					const cur = frames.find(fr => fr.id === hoverId);
+					if (cur) this.pixi.setFrameFill(cur.id, cur.width, cur.height, 0xFAFAFA);
+				}
+				this._frameHoverId = hoverId || null;
+			}
+		});
+	}
+
 	_recomputeFrameAttachment(objectId) {
 		const obj = (this.state.state.objects || []).find(o => o.id === objectId);
 		if (!obj) return;

package/src/services/ResizePolicyService.js

@@ -0,0 +1,152 @@
+const MIN_FRAME_AREA = 1800;
+
+function getRoundedSize(width, height) {
+    return {
+        width: Math.max(1, Math.round(width || 1)),
+        height: Math.max(1, Math.round(height || 1)),
+    };
+}
+
+function isHandleEdge(handle) {
+    return ['n', 's', 'e', 'w'].includes(handle);
+}
+
+export function getSingleResizePolicy({ objectType = null, properties = {} } = {}) {
+    const isEmojiImage = objectType === 'image' && !!properties?.isEmojiIcon;
+    const isEmoji = objectType === 'emoji' || isEmojiImage;
+    const isNote = objectType === 'note';
+    const lockedAspect = objectType === 'frame' && properties?.lockedAspect === true;
+    const keepAspect = objectType === 'image' || lockedAspect || isEmoji || isNote;
+
+    return {
+        keepAspect,
+        square: isEmoji || isNote,
+        minArea: objectType === 'frame' ? MIN_FRAME_AREA : 0,
+    };
+}
+
+export function resolveAnchoredResizePosition({
+    startPosition,
+    startSize,
+    normalizedSize,
+    handle,
+}) {
+    if (!startPosition || !startSize || !normalizedSize || !handle) return null;
+
+    const normalizedHandle = String(handle).toLowerCase();
+    const startW = Math.max(1, startSize.width || 1);
+    const startH = Math.max(1, startSize.height || 1);
+    const nextW = Math.max(1, normalizedSize.width || 1);
+    const nextH = Math.max(1, normalizedSize.height || 1);
+    let x = startPosition.x;
+    let y = startPosition.y;
+
+    if (normalizedHandle.includes('w')) x = startPosition.x + (startW - nextW);
+    if (normalizedHandle.includes('n')) y = startPosition.y + (startH - nextH);
+
+    if (isHandleEdge(normalizedHandle)) {
+        if (normalizedHandle === 'n' || normalizedHandle === 's') {
+            x = startPosition.x + ((startW - nextW) / 2);
+        } else if (normalizedHandle === 'e' || normalizedHandle === 'w') {
+            y = startPosition.y + ((startH - nextH) / 2);
+        }
+    }
+
+    return {
+        x: Math.round(x),
+        y: Math.round(y),
+    };
+}
+
+export function resolveSingleResizeDominantAxis({
+    startSize,
+    size,
+    objectType = null,
+    properties = {},
+    preferredDominantAxis = null,
+}) {
+    if (!size) return 'none';
+
+    const policy = getSingleResizePolicy({ objectType, properties });
+    if (policy.square) return 'square';
+    if (!policy.keepAspect) return 'free';
+    if (preferredDominantAxis === 'width' || preferredDominantAxis === 'height') {
+        return preferredDominantAxis;
+    }
+
+    const startW = Math.max(1, startSize?.width || size.width || 1);
+    const startH = Math.max(1, startSize?.height || size.height || 1);
+    const rawWidth = Math.max(1, size.width || 1);
+    const rawHeight = Math.max(1, size.height || 1);
+    const deltaWidth = Math.abs(rawWidth - startW);
+    const deltaHeight = Math.abs(rawHeight - startH);
+    return deltaWidth >= deltaHeight ? 'width' : 'height';
+}
+
+export function normalizeSingleResizeGeometry({
+    startSize,
+    startPosition,
+    handle,
+    size,
+    position = null,
+    objectType = null,
+    properties = {},
+    preferredDominantAxis = null,
+}) {
+    if (!size) {
+        return { size: null, position };
+    }
+
+    const startW = Math.max(1, startSize?.width || size.width || 1);
+    const startH = Math.max(1, startSize?.height || size.height || 1);
+    const policy = getSingleResizePolicy({ objectType, properties });
+    let width = Math.max(1, size.width || 1);
+    let height = Math.max(1, size.height || 1);
+    const dominantAxis = resolveSingleResizeDominantAxis({
+        startSize: { width: startW, height: startH },
+        size: { width, height },
+        objectType,
+        properties,
+        preferredDominantAxis,
+    });
+
+    if (policy.square) {
+        const squareSize = Math.max(width, height);
+        width = squareSize;
+        height = squareSize;
+    } else if (policy.keepAspect) {
+        const aspect = startW / startH;
+        if (dominantAxis === 'width') {
+            height = width / aspect;
+        } else {
+            width = height * aspect;
+        }
+    }
+
+    if (policy.minArea > 0) {
+        const area = Math.max(1, width * height);
+        if (area < policy.minArea) {
+            const scale = Math.sqrt(policy.minArea / area);
+            width *= scale;
+            height *= scale;
+        }
+    }
+
+    const normalizedSize = getRoundedSize(width, height);
+    const shouldResolvePosition = (policy.keepAspect || policy.square || policy.minArea > 0)
+        && !!startPosition
+        && !!handle;
+    const resolvedPosition = shouldResolvePosition
+        ? resolveAnchoredResizePosition({
+            startPosition,
+            startSize: { width: startW, height: startH },
+            normalizedSize,
+            handle,
+        })
+        : position;
+
+    return {
+        size: normalizedSize,
+        position: resolvedPosition,
+    };
+}

package/src/services/SettingsApplier.js

@@ -72,9 +72,10 @@ export class SettingsApplier {
         if (partial.zoom && s.zoom && (typeof s.zoom.current === 'number')) {
             const world = this.pixi?.worldLayer || this.pixi?.app?.stage;
             if (world) {
-                const z = Math.max(0.1, Math.min(5, s.zoom.current));
+                const z = Math.max(0.02, Math.min(5, s.zoom.current));
                 world.scale.set(z);
                 try { this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(z * 100) }); } catch (_) {}
+                try { this.eventBus.emit(Events.Viewport.Changed); } catch (_) {}
             }
         }
 
@@ -84,7 +85,11 @@ export class SettingsApplier {
             if (world) {
                 world.x = s.pan.x;
                 world.y = s.pan.y;
-                // Обновление зависимых слоёв/панелей выполняется по их событиям; здесь только применяем позицию
+                if (this.pixi?.gridLayer) {
+                    this.pixi.gridLayer.x = s.pan.x;
+                    this.pixi.gridLayer.y = s.pan.y;
+                }
+                try { this.eventBus.emit(Events.Viewport.Changed); } catch (_) {}
             }
         }
     }

package/src/services/ZoomPanController.js

@@ -1,29 +1,48 @@
 import { Events } from '../core/events/Events.js';
 
+/**
+ * Уровни зума, выровненные под профиль Miro.
+ * Верхняя граница — 500%.
+ */
+const ZOOM_LEVELS = [
+	2, 5, 10, 15, 20, 25, 33, 50, 75, 100, 125, 150, 200, 250, 300, 400, 500
+];
+
 export class ZoomPanController {
 	constructor(eventBus, pixi) {
 		this.eventBus = eventBus;
 		this.pixi = pixi;
 	}
 
+	_nearestLevelIndex(percent) {
+		let best = 0;
+		let bestDist = Math.abs(ZOOM_LEVELS[0] - percent);
+		for (let i = 1; i < ZOOM_LEVELS.length; i++) {
+			const d = Math.abs(ZOOM_LEVELS[i] - percent);
+			if (d < bestDist) {
+				bestDist = d;
+				best = i;
+			}
+		}
+		return best;
+	}
+
 	attach() {
 		// Масштабирование колесом — глобально отрабатываем Ctrl+Wheel
 		this.eventBus.on(Events.Tool.WheelZoom, ({ x, y, delta }) => {
-			// Дискретный шаг зума 10%
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const oldScale = world.scale.x || 1;
 			const oldPercent = Math.round(oldScale * 100);
+			const idx = this._nearestLevelIndex(oldPercent);
 			let targetPercent;
 			if (delta < 0) {
-				// Zoom in: к ближайшему следующему кратному 10 плюс шаг
-				targetPercent = Math.min(500, Math.floor(oldPercent / 10) * 10 + 10);
+				targetPercent = ZOOM_LEVELS[Math.min(ZOOM_LEVELS.length - 1, idx + 1)];
 			} else if (delta > 0) {
-				// Zoom out: к ближайшему предыдущему кратному 10 минус шаг
-				targetPercent = Math.max(10, Math.ceil(oldPercent / 10) * 10 - 10);
+				targetPercent = ZOOM_LEVELS[Math.max(0, idx - 1)];
 			} else {
 				return;
 			}
-			const newScale = Math.max(0.1, Math.min(5, targetPercent / 100));
+			const newScale = Math.max(0.02, Math.min(5, targetPercent / 100));
 			if (Math.abs(newScale - oldScale) < 0.0001) return;
 			// Вычисляем мировые координаты точки под курсором до изменения скейла
 			const worldX = (x - world.x) / oldScale;
@@ -33,15 +52,20 @@ export class ZoomPanController {
 			world.x = x - worldX * newScale;
 			world.y = y - worldY * newScale;
 			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
+			this.eventBus.emit(Events.Viewport.Changed);
 		});
 
 		// Кнопки зума из UI
 		this.eventBus.on(Events.UI.ZoomIn, () => {
-			const center = { x: this.pixi.app.view.clientWidth / 2, y: this.pixi.app.view.clientHeight / 2 };
+			const view = this.pixi?.app?.view;
+			if (!view) return;
+			const center = { x: view.clientWidth / 2, y: 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 };
+			const view = this.pixi?.app?.view;
+			if (!view) return;
+			const center = { x: view.clientWidth / 2, y: view.clientHeight / 2 };
 			this.eventBus.emit(Events.Tool.WheelZoom, { x: center.x, y: center.y, delta: 120 });
 		});
 		this.eventBus.on(Events.UI.ZoomReset, () => {
@@ -55,6 +79,7 @@ export class ZoomPanController {
 			world.x = centerX - worldX * 1;
 			world.y = centerY - worldY * 1;
 			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: 100 });
+			this.eventBus.emit(Events.Viewport.Changed);
 		});
 		this.eventBus.on(Events.UI.ZoomFit, () => {
 			const objs = (this.pixi?.objects ? Array.from(this.pixi.objects.values()) : []);
@@ -74,7 +99,7 @@ export class ZoomPanController {
 			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 newScale = Math.max(0.02, 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;
@@ -82,6 +107,7 @@ export class ZoomPanController {
 			world.x = viewW / 2 - worldCenterX * newScale;
 			world.y = viewH / 2 - worldCenterY * newScale;
 			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
+			this.eventBus.emit(Events.Viewport.Changed);
 		});
 	}
 }