@sequent-org/moodboard 1.4.30 → 1.4.32

package/src/services/ConnectorBindingResolver.js

@@ -0,0 +1,204 @@
+/**
+ * ConnectorBindingResolver — чистая логика преобразования терминала в world-точку.
+ *
+ * Реализует алгоритм из раздела 4 CONNECTORS.md:
+ *  1. isPrecise=false  → центр объекта
+ *  2. isPrecise=true   → worldAnchor = topLeft + { anchor.x·w, anchor.y·h }
+ *  3. isExact=false    → проекция на кромку AABB через Liang–Barsky;
+ *                        для повёрнутого объекта: луч переводится в локальные координаты.
+ *  4. isExact=true     → точная world-точка без отсечения
+ *  5. Свободный терминал { point } → возвращается как есть
+ *
+ * Нет зависимостей от PIXI; только чистые математические операции.
+ */
+
+// ---------------------------------------------------------------------------
+// Вспомогательные функции
+
+/**
+ * Поворачивает вектор на угол (в радианах).
+ * @param {{ x: number, y: number }} pt
+ * @param {number} angle  радианы, положительный = CCW
+ * @returns {{ x: number, y: number }}
+ */
+function rotateVector(pt, angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return {
+        x: pt.x * cos - pt.y * sin,
+        y: pt.x * sin + pt.y * cos,
+    };
+}
+
+/**
+ * Liang–Barsky для AABB с центром в начале координат (half-widths hw × hh).
+ *
+ * `from` — точка внутри (или на границе) прямоугольника [-hw..hw] × [-hh..hh].
+ * `to`   — произвольная точка; возвращает точку выхода из прямоугольника по лучу from→to.
+ *
+ * Если from === to, возвращает from (на границе) через simple clamp.
+ *
+ * @param {{ x: number, y: number }} from
+ * @param {{ x: number, y: number }} to
+ * @param {number} hw  half-width (> 0)
+ * @param {number} hh  half-height (> 0)
+ * @returns {{ x: number, y: number }}
+ */
+function clipRayToAABB(from, to, hw, hh) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+
+    if (Math.abs(dx) < 1e-10 && Math.abs(dy) < 1e-10) {
+        // Вырожденный луч — clamp from на границу
+        const cx = Math.max(-hw, Math.min(hw, from.x));
+        const cy = Math.max(-hh, Math.min(hh, from.y));
+        return { x: cx, y: cy };
+    }
+
+    // Минимальный t такой, что p(t) = from + t*(to−from) выходит за AABB
+    let tExit = 1.0;
+
+    if (Math.abs(dx) > 1e-10) {
+        const tEdge = (dx > 0 ? hw - from.x : -hw - from.x) / dx;
+        if (tEdge >= 0) tExit = Math.min(tExit, tEdge);
+    }
+    if (Math.abs(dy) > 1e-10) {
+        const tEdge = (dy > 0 ? hh - from.y : -hh - from.y) / dy;
+        if (tEdge >= 0) tExit = Math.min(tExit, tEdge);
+    }
+
+    return {
+        x: from.x + tExit * dx,
+        y: from.y + tExit * dy,
+    };
+}
+
+// ---------------------------------------------------------------------------
+
+export class ConnectorBindingResolver {
+    /**
+     * Разрешает терминал в world-point.
+     *
+     * @param {Object} terminal
+     *   Привязанный:  { boundId, anchor:{x,y}, isPrecise, isExact }
+     *   Свободный:    { point:{x,y} }
+     * @param {Object|null} target
+     *   Объект из state.objects с полями: position:{x,y}, width, height, rotation?
+     * @param {{ x: number, y: number }|null} otherTerminalWorld
+     *   Уже разрешённая world-точка противоположного конца.
+     *   Используется при isExact=false для проекции на кромку.
+     *   Если null — отсечение не производится, возвращается precisePoint.
+     * @returns {{ x: number, y: number }}
+     */
+    static resolve(terminal, target, otherTerminalWorld = null) {
+        // --- Свободный терминал ---
+        if (!terminal?.boundId) {
+            return { x: terminal?.point?.x ?? 0, y: terminal?.point?.y ?? 0 };
+        }
+
+        if (!target) {
+            return { x: 0, y: 0 };
+        }
+
+        const left   = target.position?.x ?? 0;
+        const top    = target.position?.y ?? 0;
+        const width  = target.width  ?? target.properties?.width  ?? 0;
+        const height = target.height ?? target.properties?.height ?? 0;
+        const angle  = target.rotation ?? target.properties?.rotation ?? 0;
+
+        const cx = left + width  / 2;
+        const cy = top  + height / 2;
+        const hw = width  / 2;
+        const hh = height / 2;
+
+        // --- Точка привязки в локальных координатах (начало в центре объекта) ---
+        // isPrecise=false → центр объекта (0, 0) в локальных
+        // isPrecise=true  → anchor.x·w − w/2, anchor.y·h − h/2
+        let localAnchorX = 0;
+        let localAnchorY = 0;
+        if (terminal.isPrecise) {
+            const ax = terminal.anchor?.x ?? 0.5;
+            const ay = terminal.anchor?.y ?? 0.5;
+            localAnchorX = ax * width  - hw;
+            localAnchorY = ay * height - hh;
+        }
+
+        // --- precisePoint в world-space ---
+        const worldPrecise = angle !== 0
+            ? {
+                x: cx + rotateVector({ x: localAnchorX, y: localAnchorY }, angle).x,
+                y: cy + rotateVector({ x: localAnchorX, y: localAnchorY }, angle).y,
+              }
+            : { x: cx + localAnchorX, y: cy + localAnchorY };
+
+        // --- isExact=true → возвращаем точную точку без отсечения ---
+        if (terminal.isExact) {
+            return worldPrecise;
+        }
+
+        // --- isExact=false → проекция на кромку AABB ---
+        if (!otherTerminalWorld) {
+            // Нет информации о другом конце — вернуть precisePoint
+            return worldPrecise;
+        }
+
+        if (hw <= 0 || hh <= 0) {
+            return worldPrecise;
+        }
+
+        // Переводим противоположный терминал в локальную систему координат цели
+        const ox = otherTerminalWorld.x - cx;
+        const oy = otherTerminalWorld.y - cy;
+        const localOther = angle !== 0
+            ? rotateVector({ x: ox, y: oy }, -angle)
+            : { x: ox, y: oy };
+
+        // Обрезаем луч localAnchor → localOther по AABB
+        const exitLocal = clipRayToAABB(
+            { x: localAnchorX, y: localAnchorY },
+            localOther,
+            hw,
+            hh
+        );
+
+        // Возвращаем в world-space
+        const worldExit = angle !== 0
+            ? {
+                x: cx + rotateVector(exitLocal,  angle).x,
+                y: cy + rotateVector(exitLocal,  angle).y,
+              }
+            : { x: cx + exitLocal.x, y: cy + exitLocal.y };
+
+        return worldExit;
+    }
+}
+
+// ---------------------------------------------------------------------------
+
+/**
+ * Расстояние от точки до отрезка [a, b].
+ * Используется в ConnectorLayer.hitTest (Фаза 2).
+ *
+ * @param {{ x: number, y: number }} point
+ * @param {{ x: number, y: number }} a
+ * @param {{ x: number, y: number }} b
+ * @returns {number}
+ */
+export function distanceToSegment(point, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lenSq = dx * dx + dy * dy;
+
+    if (lenSq < 1e-10) {
+        return Math.hypot(point.x - a.x, point.y - a.y);
+    }
+
+    const t = Math.max(0, Math.min(1,
+        ((point.x - a.x) * dx + (point.y - a.y) * dy) / lenSq
+    ));
+
+    return Math.hypot(
+        point.x - (a.x + t * dx),
+        point.y - (a.y + t * dy)
+    );
+}

package/src/services/ai/AiClient.js

@@ -115,17 +115,20 @@ export class AiClient {
      * @param {number} [args.seed]
      * @param {string} [args.mimeType]
      * @param {string} [args.model]
+     * @param {File[]} [args.referenceImages]
      * @param {AbortSignal} [args.signal]
      * @returns {Promise<{operationId: string, imageBase64: string, mimeType: string}>}
      */
-    async generateImage({ signal, ...payload }) {
+    async generateImage({ signal, referenceImages: files, ...payload }) {
+        const referenceImages = await filesToBase64(files);
+        const body = referenceImages ? { ...payload, referenceImages } : payload;
         const res = await this._fetch(`${this._baseUrl}/yandex-art/image`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json'
             },
-            body: JSON.stringify(payload),
+            body: JSON.stringify(body),
             signal
         });
         if (!res.ok) {
@@ -222,3 +225,28 @@ async function safeReadError(res) {
         return res.statusText;
     }
 }
+
+/**
+ * Конвертирует массив File в [{mimeType, data}] с base64-encoded данными.
+ * Возвращает undefined, если массив пустой или не передан.
+ *
+ * @param {File[]|undefined} files
+ * @returns {Promise<Array<{mimeType: string, data: string}>|undefined>}
+ */
+async function filesToBase64(files) {
+    if (!Array.isArray(files) || files.length === 0) return undefined;
+    return Promise.all(
+        files.map(async (file) => {
+            const buffer = await file.arrayBuffer();
+            const bytes = new Uint8Array(buffer);
+            let binary = '';
+            for (let i = 0; i < bytes.length; i++) {
+                binary += String.fromCharCode(bytes[i]);
+            }
+            return {
+                mimeType: file.type || 'image/png',
+                data: btoa(binary)
+            };
+        })
+    );
+}

package/src/services/ai/ChatSessionController.js

@@ -154,6 +154,7 @@ export class ChatSessionController {
                             widthRatio: options.widthRatio,
                             heightRatio: options.heightRatio,
                             model: options.model,
+                            referenceImages: options.referenceImages,
                             signal: abort.signal
                         })
                         .then((result) => {

package/src/tools/ToolManager.js

@@ -1,5 +1,6 @@
 import { Events } from '../core/events/Events.js';
 import cursorDefaultSvg from '../assets/icons/cursor-default.svg?raw';
+import { PointerGestureController } from './manager/PointerGestureController.js';
 import { ToolActivationController } from './manager/ToolActivationController.js';
 import { ToolEventRouter } from './manager/ToolEventRouter.js';
 import { ToolManagerGuards } from './manager/ToolManagerGuards.js';
@@ -42,12 +43,14 @@ export class ToolManager {
         this.lastMousePos = null;
         this.isMouseOverContainer = false;
         this._originalPixiCursorStyles = null;
+        this._lastPointerType = null;
         
         // Устанавливаем курсор по умолчанию на контейнер, если инструмент ещё не активирован
         if (this.container) {
             this.container.style.cursor = DEFAULT_CURSOR; // пусто → берётся глобальный CSS-курсор
         }
 
+        this.gestures = new PointerGestureController(this);
         this.initEventListeners();
     }
     

package/src/tools/manager/PointerGestureController.js

@@ -0,0 +1,206 @@
+import { Events } from '../../core/events/Events.js';
+
+const PINCH_SCALE_MIN = 0.02;
+const PINCH_SCALE_MAX = 5;
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_MOVE_THRESHOLD = 10;
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_DIST = 24;
+
+/**
+ * Единый роутер ввода для мыши / пера / тача через Pointer Events API.
+ * Добавляет pinch-zoom, двухпальцевый pan и long-press для тача,
+ * не меняя контракты существующих тул-методов.
+ */
+export class PointerGestureController {
+    constructor(manager) {
+        this.manager = manager;
+        /** @type {Map<number, {x: number, y: number}>} — активные нажатые указатели */
+        this.pointers = new Map();
+        /** Подавлять одиночный указатель во время мультитач-жеста */
+        this.suppressSingle = false;
+
+        this._pinchPrevDist = null;
+        this._pinchPrevMid = null;
+
+        this._longPressTimer = null;
+        this._longPressDownPos = null;
+
+        this._lastTapTime = 0;
+        this._lastTapPos = null;
+    }
+
+    _dist(p1, p2) {
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    _mid(p1, p2) {
+        return { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
+    }
+
+    _clearLongPress() {
+        if (this._longPressTimer !== null) {
+            clearTimeout(this._longPressTimer);
+            this._longPressTimer = null;
+        }
+        this._longPressDownPos = null;
+    }
+
+    _screenPos(e) {
+        const rect = this.manager.container.getBoundingClientRect();
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+
+    onPointerDown(e) {
+        const manager = this.manager;
+        manager._lastPointerType = e.pointerType;
+
+        const pos = this._screenPos(e);
+        this.pointers.set(e.pointerId, pos);
+
+        if (this.pointers.size === 2) {
+            this._clearLongPress();
+            // Безопасно завершить одиночное взаимодействие до начала жеста
+            if (manager.activeTool && typeof manager.activeTool.onMouseUp === 'function') {
+                manager.activeTool.onMouseUp({ x: pos.x, y: pos.y, button: 0, originalEvent: e });
+            }
+            this.suppressSingle = true;
+            const pts = Array.from(this.pointers.values());
+            this._pinchPrevDist = this._dist(pts[0], pts[1]);
+            this._pinchPrevMid = this._mid(pts[0], pts[1]);
+            return;
+        }
+
+        if (this.suppressSingle) return;
+
+        // Long-press: таймер только для тача
+        if (e.pointerType === 'touch') {
+            this._longPressDownPos = pos;
+            this._longPressTimer = setTimeout(() => {
+                this._longPressTimer = null;
+                this._longPressDownPos = null;
+                if (manager.activeTool && typeof manager.activeTool.onContextMenu === 'function') {
+                    manager.activeTool.onContextMenu({ x: pos.x, y: pos.y, originalEvent: e });
+                }
+            }, LONG_PRESS_MS);
+        }
+
+        manager.handleMouseDown(e);
+    }
+
+    onPointerMove(e) {
+        const manager = this.manager;
+        const isTracked = this.pointers.has(e.pointerId);
+
+        // Тач без зарегистрированного pointerdown — пропускаем
+        if (e.pointerType === 'touch' && !isTracked) return;
+
+        const pos = this._screenPos(e);
+        if (isTracked) {
+            this.pointers.set(e.pointerId, pos);
+        }
+
+        if (this.pointers.size >= 2) {
+            if (!isTracked) return;
+            const pts = Array.from(this.pointers.values());
+            const curDist = this._dist(pts[0], pts[1]);
+            const curMid = this._mid(pts[0], pts[1]);
+
+            if (this._pinchPrevDist !== null) {
+                const world = manager.core?.pixi?.worldLayer || manager.core?.pixi?.app?.stage;
+                if (world) {
+                    const oldScale = world.scale.x || 1;
+                    const factor = curDist / this._pinchPrevDist;
+                    const newScale = Math.max(PINCH_SCALE_MIN, Math.min(PINCH_SCALE_MAX, oldScale * factor));
+
+                    // Мировая точка под серединой пальцев — она должна остаться на месте
+                    const worldX = (curMid.x - world.x) / oldScale;
+                    const worldY = (curMid.y - world.y) / oldScale;
+                    // Дельта двухпальцевого pan
+                    const panDx = this._pinchPrevMid ? curMid.x - this._pinchPrevMid.x : 0;
+                    const panDy = this._pinchPrevMid ? curMid.y - this._pinchPrevMid.y : 0;
+
+                    world.scale.set(newScale);
+                    // integer-контракт: round screen-space координаты
+                    world.x = Math.round(curMid.x - worldX * newScale + panDx);
+                    world.y = Math.round(curMid.y - worldY * newScale + panDy);
+
+                    manager.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
+                    manager.eventBus.emit(Events.Viewport.Changed);
+                }
+            }
+
+            this._pinchPrevDist = curDist;
+            this._pinchPrevMid = curMid;
+            return;
+        }
+
+        if (this.suppressSingle) return;
+
+        // Отменить long-press если палец сдвинулся более чем на порог
+        if (isTracked && e.pointerType === 'touch' && this._longPressDownPos) {
+            const dx = pos.x - this._longPressDownPos.x;
+            const dy = pos.y - this._longPressDownPos.y;
+            if (Math.sqrt(dx * dx + dy * dy) > LONG_PRESS_MOVE_THRESHOLD) {
+                this._clearLongPress();
+            }
+        }
+
+        manager.handleMouseMove(e);
+    }
+
+    onPointerUp(e) {
+        const manager = this.manager;
+        this._clearLongPress();
+
+        const hadPointer = this.pointers.has(e.pointerId);
+        this.pointers.delete(e.pointerId);
+
+        const wasSuppressed = this.suppressSingle;
+        if (this.pointers.size === 0) {
+            this.suppressSingle = false;
+            this._pinchPrevDist = null;
+            this._pinchPrevMid = null;
+        }
+
+        if (wasSuppressed || !hadPointer) return;
+
+        manager.handleMouseUp(e);
+
+        // Double-tap для тача: синтетический doubleClick после обычного up
+        if (e.pointerType === 'touch') {
+            const pos = this._screenPos(e);
+            const now = performance.now();
+            const elapsed = now - this._lastTapTime;
+            if (
+                elapsed < DOUBLE_TAP_MS &&
+                this._lastTapPos &&
+                this._dist(pos, this._lastTapPos) < DOUBLE_TAP_DIST
+            ) {
+                if (manager.activeTool && typeof manager.activeTool.onDoubleClick === 'function') {
+                    // Если вторым тапом был случайно запущен resize через PIXI hitTest — отменяем до открытия редактора
+                    if (manager.activeTool.isResizing || manager.activeTool.isGroupResizing) {
+                        manager.activeTool.onMouseUp({ x: pos.x, y: pos.y, button: 0, originalEvent: e });
+                    }
+                    manager.activeTool.onDoubleClick({ x: pos.x, y: pos.y, originalEvent: e, target: e.target });
+                }
+                this._lastTapTime = 0;
+                this._lastTapPos = null;
+                return;
+            }
+            this._lastTapTime = now;
+            this._lastTapPos = pos;
+        }
+    }
+
+    destroy() {
+        this._clearLongPress();
+        this.pointers.clear();
+        this._pinchPrevDist = null;
+        this._pinchPrevMid = null;
+        this._lastTapTime = 0;
+        this._lastTapPos = null;
+    }
+}

package/src/tools/manager/ToolEventRouter.js

@@ -188,6 +188,8 @@ export class ToolEventRouter {
     }
 
     static handleDoubleClick(manager, event) {
+        // Нативный dblclick на тач-устройствах гасим — его заменяет синтетический double-tap из PointerGestureController
+        if (manager._lastPointerType === 'touch') return;
         if (!manager.activeTool) return;
 
         const toolEvent = createPointerEvent(manager, event, {
@@ -559,6 +561,10 @@ export class ToolEventRouter {
     static handleKeyDown(manager, event) {
         this.handleHotkeys(manager, event);
 
+        if (ToolManagerGuards.shouldIgnoreHotkeys(event)) {
+            return;
+        }
+
         if (!manager.activeTool) return;
 
         const toolEvent = {
@@ -578,6 +584,10 @@ export class ToolEventRouter {
     }
 
     static handleKeyUp(manager, event) {
+        if (ToolManagerGuards.shouldIgnoreHotkeys(event)) {
+            return;
+        }
+
         if (!manager.activeTool) return;
 
         const toolEvent = {

package/src/tools/manager/ToolManagerGuards.js

@@ -1,3 +1,5 @@
+import { isInputElement } from '../../core/keyboard/KeyboardContextGuards.js';
+
 export class ToolManagerGuards {
     static isCursorLockedToActiveTool(manager) {
         return !!manager.activeTool && manager.activeTool.name !== 'select';
@@ -18,7 +20,7 @@ export class ToolManagerGuards {
     }
 
     static shouldIgnoreHotkeys(event) {
-        return event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA';
+        return isInputElement(event.target);
     }
 
     static isAuxPanStart(manager, event) {