@sequent-org/moodboard 1.4.29 → 1.4.31

package/src/ui/chat/icons.js

@@ -45,6 +45,18 @@ const ENHANCE_PROMPT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16"
 /** public/icons/extend-promt-field.svg */
 const EXTEND_PROMPT_FIELD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M9.696 7.151a.599.599 0 1 1-.847-.847L12.55 2.6H9.272a.6.6 0 0 1 0-1.2H14a.6.6 0 0 1 .6.599v4.728a.6.6 0 1 1-1.2 0V3.449zM1.4 9.272a.6.6 0 1 1 1.2 0v3.28l3.704-3.703a.599.599 0 1 1 .847.847L3.45 13.4h3.279a.6.6 0 0 1 0 1.2H2A.6.6 0 0 1 1.4 14z"/></svg>`;
 
+/** public/icons/google.svg — цветной логотип Google 36×36 */
+const MODEL_GOOGLE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 0 36 36"><path fill="#4285F4" d="M29.251 18.49c0-.813-.073-1.596-.209-2.347H18.23v4.445h6.179c-.272 1.43-1.086 2.64-2.307 3.455v2.89h3.726c2.17-2.003 3.423-4.946 3.423-8.442"/><path fill="#34A853" d="M18.229 29.71c3.1 0 5.698-1.023 7.597-2.776l-3.725-2.89c-1.023.688-2.328 1.105-3.872 1.105-2.985 0-5.52-2.014-6.429-4.727H7.98v2.964c1.89 3.746 5.761 6.324 10.249 6.324"/><path fill="#FBBC05" d="M11.801 20.412a6.9 6.9 0 0 1-.365-2.181c0-.762.136-1.492.365-2.181v-2.964h-3.82A11.34 11.34 0 0 0 6.75 18.23c0 1.858.449 3.6 1.231 5.145l2.975-2.317z"/><path fill="#EA4335" d="M18.229 11.321c1.69 0 3.193.585 4.393 1.712l3.288-3.288c-1.994-1.857-4.582-2.995-7.681-2.995-4.488 0-8.36 2.578-10.249 6.335l3.82 2.964c.908-2.714 3.444-4.728 6.429-4.728"/></svg>`;
+
+/** Placeholder OpenAI GPT — буква G в круге, 36×36 */
+const MODEL_GPT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="16" fill="#10a37f"/><text x="18" y="23" text-anchor="middle" font-size="16" font-family="Arial,sans-serif" fill="#fff" font-weight="bold">G</text></svg>`;
+
+/** Placeholder Alibaba Qwen — буква Q в круге, 36×36 */
+const MODEL_QWEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="16" fill="#6e42ca"/><text x="18" y="23" text-anchor="middle" font-size="16" font-family="Arial,sans-serif" fill="#fff" font-weight="bold">Q</text></svg>`;
+
+/** Placeholder Yandex Alice — буква А в круге, 36×36 */
+const MODEL_ALICE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="16" fill="#fc3f1d"/><text x="18" y="23" text-anchor="middle" font-size="16" font-family="Arial,sans-serif" fill="#fff" font-weight="bold">А</text></svg>`;
+
 export const ICONS = {
     image: IMAGE_ICON,
     video: VIDEO_ICON,
@@ -63,7 +75,11 @@ export const ICONS = {
     chevronDown: svg('<path d="M6 9l6 6 6-6"/>'),
     trash: svg('<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M6 6l1 14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-14"/>'),
     close: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.575 12.726a.6.6 0 0 1-.849.849zm-.849-10.3a.6.6 0 0 1 .849.848L8.848 7.999l4.727 4.727-.425.424-.424.425-4.727-4.727-4.725 4.727a.6.6 0 0 1-.848-.849l4.726-4.727-4.726-4.725a.599.599 0 1 1 .848-.848l4.725 4.726z"></path></svg>`,
-    sparkles: svg('<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>')
+    sparkles: svg('<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>'),
+    modelGoogle: MODEL_GOOGLE_ICON,
+    modelGpt: MODEL_GPT_ICON,
+    modelQwen: MODEL_QWEN_ICON,
+    modelAlice: MODEL_ALICE_ICON,
 };
 
 /**

package/src/ui/connectors/ConnectionAnchorsLayer.js

@@ -0,0 +1,231 @@
+import { Events } from '../../core/events/Events.js';
+import { HandlesPositioningService } from '../handles/HandlesPositioningService.js';
+import { ConnectorDragController } from '../../tools/object-tools/connector/ConnectorDragController.js';
+
+const ALLOWED_TYPES = new Set(['shape', 'note', 'image', 'text', 'simple-text', 'file']);
+
+export class ConnectionAnchorsLayer {
+    constructor(container, eventBus, core) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.core = core;
+        this.layer = null;
+        this.positioningService = new HandlesPositioningService(this);
+        
+        this.subscriptions = [];
+        this._eventsAttached = false;
+        
+        this.hoveredObjectId = null;
+        this._dragController = null;
+        this._onAnchorPointerDown = null;
+    }
+
+    attach() {
+        if (!this.layer) {
+            this.layer = document.createElement('div');
+            this.layer.className = 'mb-connection-anchors-layer';
+            Object.assign(this.layer.style, {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none',
+                zIndex: '35'
+            });
+            this.container.appendChild(this.layer);
+
+            this._dragController = new ConnectorDragController(this.core, this.eventBus);
+            this._onAnchorPointerDown = (e) => {
+                if (!e.target.dataset.connectorAnchor) return;
+                e.preventDefault();
+                e.stopPropagation();
+                this._dragController.startFromAnchor(e);
+            };
+            this.layer.addEventListener('pointerdown', this._onAnchorPointerDown);
+        }
+        
+        this._attachEvents();
+        this.update();
+    }
+
+    destroy() {
+        this._detachEvents();
+        if (this._onAnchorPointerDown && this.layer) {
+            this.layer.removeEventListener('pointerdown', this._onAnchorPointerDown);
+            this._onAnchorPointerDown = null;
+        }
+        if (this._dragController) {
+            this._dragController.destroy();
+            this._dragController = null;
+        }
+        if (this.layer && this.layer.parentNode) {
+            this.layer.parentNode.removeChild(this.layer);
+        }
+        this.layer = null;
+        this.eventBus = null;
+        this.core = null;
+        this.container = null;
+    }
+
+    _attachEvents() {
+        if (this._eventsAttached) return;
+        
+        const bindings = [
+            [Events.Object.Hover, (e) => {
+                this.hoveredObjectId = e.objectId || null;
+                this.update();
+            }],
+            [Events.Tool.SelectionAdd, () => this.update()],
+            [Events.Tool.SelectionRemove, () => this.update()],
+            [Events.Tool.SelectionClear, () => this.update()],
+            [Events.Object.Created, () => this.update()],
+            [Events.Object.Deleted, () => this.update()],
+            [Events.Object.Updated, () => this.update()],
+            [Events.Object.StateChanged, () => this.update()],
+            [Events.Tool.DragUpdate, () => this.update()],
+            [Events.Tool.DragEnd, () => this.update()],
+            [Events.Tool.ResizeUpdate, () => this.update()],
+            [Events.Tool.ResizeEnd, () => this.update()],
+            [Events.Tool.GroupDragUpdate, () => this.update()],
+            [Events.Tool.GroupResizeUpdate, () => this.update()],
+            [Events.Tool.RotateUpdate, () => this.update()],
+            [Events.Tool.PanUpdate, () => this.update()],
+            [Events.UI.ZoomPercent, () => this.update()],
+            [Events.History.Changed, () => this.update()],
+            [Events.Board.Loaded, () => this.update()]
+        ];
+        
+        bindings.forEach(([event, handler]) => {
+            this.eventBus.on(event, handler);
+            this.subscriptions.push([event, handler]);
+        });
+        
+        this._eventsAttached = true;
+    }
+
+    _detachEvents() {
+        if (typeof this.eventBus?.off !== 'function') {
+            this.subscriptions = [];
+            this._eventsAttached = false;
+            return;
+        }
+        this.subscriptions.forEach(([event, handler]) => {
+            this.eventBus.off(event, handler);
+        });
+        this.subscriptions = [];
+        this._eventsAttached = false;
+    }
+
+    _getSingleSelectionWorldBounds(id) {
+        const positionData = { objectId: id, position: null };
+        const sizeData = { objectId: id, size: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, positionData);
+        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
+        
+        if (positionData.position && sizeData.size) {
+            return {
+                x: positionData.position.x,
+                y: positionData.position.y,
+                width: sizeData.size.width,
+                height: sizeData.size.height,
+            };
+        }
+        return null;
+    }
+
+    update() {
+        if (!this.layer) return;
+        this.layer.innerHTML = '';
+        
+        const selection = Array.from(this.core?.selectTool?.selectedObjects || []);
+        let selectedId = null;
+        if (selection.length === 1) {
+            selectedId = selection[0];
+        }
+        
+        const targets = new Set();
+        if (this.hoveredObjectId) targets.add(this.hoveredObjectId);
+        if (selectedId) targets.add(selectedId);
+        
+        targets.forEach(id => {
+            this._renderAnchorsFor(id);
+        });
+    }
+
+    _renderAnchorsFor(id) {
+        const req = { objectId: id, pixiObject: null };
+        this.eventBus.emit(Events.Tool.GetObjectPixi, req);
+        const mbType = req.pixiObject?._mb?.type;
+        
+        if (!mbType || !ALLOWED_TYPES.has(mbType)) {
+            return;
+        }
+
+        const worldBounds = this._getSingleSelectionWorldBounds(id);
+        if (!worldBounds) return;
+
+        const cssRect = this.positioningService.worldBoundsToCssRect(worldBounds);
+        
+        const left = Math.round(cssRect.left);
+        const top = Math.round(cssRect.top);
+        const width = Math.max(1, Math.round(cssRect.width));
+        const height = Math.max(1, Math.round(cssRect.height));
+        
+        const rotationData = { objectId: id, rotation: 0 };
+        this.eventBus.emit(Events.Tool.GetObjectRotation, rotationData);
+        const rotation = rotationData.rotation || 0;
+
+        const wrapper = document.createElement('div');
+        Object.assign(wrapper.style, {
+            position: 'absolute',
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+            pointerEvents: 'none',
+            transformOrigin: 'center center',
+            transform: `rotate(${rotation}deg)`,
+            boxSizing: 'border-box'
+        });
+        
+        const offset = 12;
+        const radius = 5;
+        const dotSize = radius * 2;
+        
+        const createDot = (side, x, y, ax, ay) => {
+            const dot = document.createElement('div');
+            dot.className = 'mb-connection-anchor';
+            Object.assign(dot.style, {
+                position: 'absolute',
+                left: `${Math.round(x - radius)}px`,
+                top: `${Math.round(y - radius)}px`,
+                width: `${dotSize}px`,
+                height: `${dotSize}px`,
+                backgroundColor: '#2563EB',
+                borderRadius: '50%',
+                pointerEvents: 'auto',
+                boxSizing: 'border-box',
+                border: '2px solid #ffffff'
+            });
+            
+            dot.dataset.connectorAnchor = "1";
+            dot.dataset.id = id;
+            dot.dataset.side = side;
+            dot.dataset.anchorX = ax;
+            dot.dataset.anchorY = ay;
+            
+            wrapper.appendChild(dot);
+        };
+        
+        const cx = Math.round(width / 2);
+        const cy = Math.round(height / 2);
+        
+        createDot('top', cx, -offset, 0.5, 0);
+        createDot('right', width + offset, cy, 1, 0.5);
+        createDot('bottom', cx, height + offset, 0.5, 1);
+        createDot('left', -offset, cy, 0, 0.5);
+        
+        this.layer.appendChild(wrapper);
+    }
+}

package/src/ui/connectors/ConnectorLayer.js

@@ -0,0 +1,251 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../core/events/Events.js';
+import { ConnectorBindingResolver, distanceToSegment } from '../../services/ConnectorBindingResolver.js';
+
+const HIT_TEST_SCREEN_PX = 8;
+const ARROW_LEN   = 12;
+const ARROW_HALF  = 4;
+const DASH_LEN    = 8;
+const GAP_LEN     = 5;
+
+function asArray(value) {
+    return Array.isArray(value) ? value : [];
+}
+
+/**
+ * Рисует пунктирную линию через последовательность moveTo/lineTo.
+ * @param {PIXI.Graphics} g
+ */
+function drawDashedLine(g, x1, y1, x2, y2) {
+    const dx  = x2 - x1;
+    const dy  = y2 - y1;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6) return;
+    const ux = dx / len;
+    const uy = dy / len;
+    let dist    = 0;
+    let drawing = true;
+    g.moveTo(Math.round(x1), Math.round(y1));
+    while (dist < len) {
+        const step = drawing ? DASH_LEN : GAP_LEN;
+        const next = Math.min(dist + step, len);
+        const px   = x1 + ux * next;
+        const py   = y1 + uy * next;
+        if (drawing) {
+            g.lineTo(Math.round(px), Math.round(py));
+        } else {
+            g.moveTo(Math.round(px), Math.round(py));
+        }
+        dist    = next;
+        drawing = !drawing;
+    }
+}
+
+/**
+ * Рисует треугольный наконечник стрелки в точке `to`, направление from→to.
+ * Вызывать после g.lineStyle(0) не нужно — сбрасывает линию сам.
+ * @param {PIXI.Graphics} g
+ * @param {{ x: number, y: number }} from
+ * @param {{ x: number, y: number }} to
+ * @param {number} color  PIXI-цвет
+ */
+function drawArrow(g, from, to, color) {
+    const dx  = to.x - from.x;
+    const dy  = to.y - from.y;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6) return;
+    const ux = dx / len;
+    const uy = dy / len;
+    // перпендикуляр
+    const px = -uy;
+    const py =  ux;
+    const bx = to.x - ux * ARROW_LEN;
+    const by = to.y - uy * ARROW_LEN;
+    g.lineStyle(0);
+    g.beginFill(color, 1);
+    g.drawPolygon([
+        Math.round(to.x),               Math.round(to.y),
+        Math.round(bx + px * ARROW_HALF), Math.round(by + py * ARROW_HALF),
+        Math.round(bx - px * ARROW_HALF), Math.round(by - py * ARROW_HALF),
+    ]);
+    g.endFill();
+}
+
+/**
+ * ConnectorLayer — слой рендера универсальных коннекторов.
+ *
+ * Паттерн: MindmapConnectionLayer (один PIXI.Graphics, полная перерисовка на события).
+ * Рисует connector-объекты из state.objects в worldLayer.
+ * Резолвинг end-point: ConnectorBindingResolver.resolve() двумя проходами
+ * (грубый → точный) для корректной проекции на кромку при isExact=false.
+ */
+export class ConnectorLayer {
+    /**
+     * @param {Object} eventBus  Экземпляр EventBus
+     * @param {Object} core      Экземпляр CoreMoodBoard
+     */
+    constructor(eventBus, core) {
+        this.eventBus        = eventBus;
+        this.core            = core;
+        this.graphics        = null;
+        this.subscriptions   = [];
+        this._eventsAttached = false;
+        /** @type {Array<{ id: string, start: {x,y}, end: {x,y} }>} */
+        this._lastSegments   = [];
+    }
+
+    /** Инициализирует слой: подписки на события и первый рендер. */
+    attach() {
+        if (!this.core?.pixi) return;
+        if (!this._eventsAttached) {
+            this._attachEvents();
+        }
+        this.updateAll();
+    }
+
+    /** Уничтожает слой: отписка от событий и очистка PIXI-объектов. */
+    destroy() {
+        this._detachEvents();
+        if (this.graphics) {
+            this.graphics.clear();
+            this.graphics.removeFromParent();
+            this.graphics.destroy();
+            this.graphics = null;
+        }
+        this._lastSegments = [];
+        this.eventBus = null;
+        this.core     = null;
+    }
+
+    _attachEvents() {
+        if (this._eventsAttached) return;
+        const bindings = [
+            [Events.Object.Created,          () => this.updateAll()],
+            [Events.Object.Deleted,          () => this.updateAll()],
+            [Events.Object.Updated,          () => this.updateAll()],
+            [Events.Object.StateChanged,     () => this.updateAll()],
+            [Events.Tool.DragUpdate,         () => this.updateAll()],
+            [Events.Tool.DragEnd,            () => this.updateAll()],
+            [Events.Tool.ResizeUpdate,       () => this.updateAll()],
+            [Events.Tool.ResizeEnd,          () => this.updateAll()],
+            [Events.Tool.GroupDragUpdate,    () => this.updateAll()],
+            [Events.Tool.GroupResizeUpdate,  () => this.updateAll()],
+            [Events.Tool.RotateUpdate,       () => this.updateAll()],
+            [Events.Tool.PanUpdate,          () => this.updateAll()],
+            [Events.UI.ZoomPercent,          () => this.updateAll()],
+            [Events.History.Changed,         () => this.updateAll()],
+            [Events.Board.Loaded,            () => this.updateAll()],
+        ];
+        bindings.forEach(([event, handler]) => {
+            this.eventBus.on(event, handler);
+            this.subscriptions.push([event, handler]);
+        });
+        this._eventsAttached = true;
+    }
+
+    _detachEvents() {
+        if (typeof this.eventBus?.off !== 'function') {
+            this.subscriptions   = [];
+            this._eventsAttached = false;
+            return;
+        }
+        this.subscriptions.forEach(([event, handler]) => this.eventBus.off(event, handler));
+        this.subscriptions   = [];
+        this._eventsAttached = false;
+    }
+
+    /** Перерисовывает все коннекторы из state. */
+    updateAll() {
+        const objects    = asArray(this.core?.state?.state?.objects);
+        const connectors = objects.filter((o) => o?.type === 'connector');
+
+        if (connectors.length === 0) {
+            if (this.graphics) this.graphics.clear();
+            this._lastSegments = [];
+            return;
+        }
+
+        if (!this.graphics) {
+            this.graphics      = new PIXI.Graphics();
+            this.graphics.name   = 'connector-layer';
+            this.graphics.zIndex = 3;
+            const world = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+            world?.addChild?.(this.graphics);
+        }
+
+        const byId = new Map(objects.map((o) => [o.id, o]));
+        const g    = this.graphics;
+        g.clear();
+        this._lastSegments = [];
+
+        connectors.forEach((connector) => {
+            const style        = connector?.properties?.style ?? {};
+            const startTerm    = connector?.properties?.start;
+            const endTerm      = connector?.properties?.end;
+            if (!startTerm || !endTerm) return;
+
+            const startTarget = startTerm.boundId ? (byId.get(startTerm.boundId) ?? null) : null;
+            const endTarget   = endTerm.boundId   ? (byId.get(endTerm.boundId)   ?? null) : null;
+
+            // Двухпроходное резолвание для корректной проекции isExact=false:
+            // проход 1 — грубые точки (без взаимной информации)
+            const roughStart = ConnectorBindingResolver.resolve(startTerm, startTarget, null);
+            const roughEnd   = ConnectorBindingResolver.resolve(endTerm,   endTarget,   null);
+            // проход 2 — уточнение с кромочной проекцией
+            const start = ConnectorBindingResolver.resolve(startTerm, startTarget, roughEnd);
+            const end   = ConnectorBindingResolver.resolve(endTerm,   endTarget,   start);
+
+            const sx = Math.round(start.x);
+            const sy = Math.round(start.y);
+            const ex = Math.round(end.x);
+            const ey = Math.round(end.y);
+
+            const color  = style.stroke ?? 0x2563EB;
+            const width  = style.width  ?? 2;
+            const isDash = !!style.dash;
+            const head   = style.head ?? { start: false, end: true };
+
+            try {
+                g.lineStyle({ width, color, alpha: 1, alignment: 0, cap: 'round', join: 'round' });
+            } catch (_) {
+                g.lineStyle(width, color, 1, 0);
+            }
+
+            if (isDash) {
+                drawDashedLine(g, sx, sy, ex, ey);
+            } else {
+                g.moveTo(sx, sy);
+                g.lineTo(ex, ey);
+            }
+
+            if (head?.end)   drawArrow(g, { x: sx, y: sy }, { x: ex, y: ey }, color);
+            if (head?.start) drawArrow(g, { x: ex, y: ey }, { x: sx, y: sy }, color);
+
+            this._lastSegments.push({ id: connector.id, start: { x: sx, y: sy }, end: { x: ex, y: ey } });
+        });
+    }
+
+    /**
+     * Возвращает id ближайшего коннектора, если worldPoint в пределах порога.
+     * Порог задан в экранных пикселях, пересчитывается в world через текущий scale.
+     *
+     * @param {{ x: number, y: number }} worldPoint
+     * @returns {string|null}
+     */
+    hitTest(worldPoint) {
+        if (this._lastSegments.length === 0) return null;
+        // worldLayer.scale.x = zoom; 1 screen px = 1/scale world units
+        const scale          = this.core?.pixi?.worldLayer?.scale?.x ?? 1;
+        const worldThreshold = HIT_TEST_SCREEN_PX / scale;
+        let closest = null;
+        let minDist = worldThreshold;
+        for (const seg of this._lastSegments) {
+            const d = distanceToSegment(worldPoint, seg.start, seg.end);
+            if (d < minDist) {
+                minDist = d;
+                closest = seg.id;
+            }
+        }
+        return closest;
+    }
+}

package/src/ui/handles/HandlesDomRenderer.js

@@ -1223,6 +1223,8 @@ export class HandlesDomRenderer {
             transformOrigin: 'center center',
             transform: `rotate(${rotation}deg)`,
         });
+        box.style.setProperty('--box-w', `${width}px`);
+        box.style.setProperty('--box-h', `${height}px`);
         this.host.layer.appendChild(box);
         if (this.host._handlesSuppressed) {
             this.host.visible = true;
@@ -1252,12 +1254,12 @@ export class HandlesDomRenderer {
                 h.style.cursor = cursor;
             });
             h.addEventListener('mouseleave', () => {
-                h.style.background = HANDLES_ACCENT_COLOR;
+                h.style.background = '#ffffff';
                 h.style.borderColor = HANDLES_ACCENT_COLOR;
             });
 
             if (!isNonResizableTarget) {
-                h.addEventListener('mousedown', (e) => this.host._onHandleDown(e, box));
+                h.addEventListener('pointerdown', (e) => this.host._onHandleDown(e, box));
             }
 
             box.appendChild(h);
@@ -1286,7 +1288,7 @@ export class HandlesDomRenderer {
             });
             if (isNonResizableTarget) e.dataset.lockedHidden = '1';
             if (!isNonResizableTarget) {
-                e.addEventListener('mousedown', (evt) => this.host._onEdgeResizeDown(evt));
+                e.addEventListener('pointerdown', (evt) => this.host._onEdgeResizeDown(evt));
             }
             box.appendChild(e);
         };
@@ -1341,7 +1343,7 @@ export class HandlesDomRenderer {
                 svgEl.style.height = '100%';
                 svgEl.style.display = 'block';
             }
-            rotateHandle.addEventListener('mousedown', (e) => this.host._onRotateHandleDown(e, box));
+            rotateHandle.addEventListener('pointerdown', (e) => this.host._onRotateHandleDown(e, box));
         }
         box.appendChild(rotateHandle);
 
@@ -1626,7 +1628,7 @@ export class HandlesDomRenderer {
                     btn.style.left = `${Math.round(left + width + centerOffset)}px`;
                 }
                 btn.style.top = `${centerY}px`;
-                btn.addEventListener('mousedown', (evt) => {
+                btn.addEventListener('pointerdown', (evt) => {
                     evt.preventDefault();
                     evt.stopPropagation();
                 });
@@ -1651,7 +1653,7 @@ export class HandlesDomRenderer {
                 const centerOffset = edgeGap + buttonRadius;
                 btn.style.left = `${centerX}px`;
                 btn.style.top = `${Math.round(top + height + centerOffset)}px`;
-                btn.addEventListener('mousedown', (evt) => {
+                btn.addEventListener('pointerdown', (evt) => {
                     evt.preventDefault();
                     evt.stopPropagation();
                 });
@@ -1680,7 +1682,7 @@ export class HandlesDomRenderer {
             showInModelButton.innerHTML = `${REVIT_SHOW_IN_MODEL_ICON_SVG}<span>Показать в модели</span>`;
             showInModelButton.style.left = `${Math.round(left + width / 2)}px`;
             showInModelButton.style.top = `${Math.round(top - 34)}px`;
-            showInModelButton.addEventListener('mousedown', (evt) => {
+            showInModelButton.addEventListener('pointerdown', (evt) => {
                 evt.preventDefault();
                 evt.stopPropagation();
             });
@@ -1702,6 +1704,8 @@ export class HandlesDomRenderer {
     repositionBoxChildren(box) {
         const width = parseFloat(box.style.width);
         const height = parseFloat(box.style.height);
+        box.style.setProperty('--box-w', `${width}px`);
+        box.style.setProperty('--box-h', `${height}px`);
         const cx = width / 2;
         const cy = height / 2;