@sequent-org/moodboard 1.4.30 → 1.4.31

package/src/ui/chat/ChatComposer.js

@@ -97,11 +97,6 @@ export class ChatComposer {
         if (!trimmed && !hasAttachments) return;
         if (this._send.dataset.state === 'streaming') return;
         const attachments = [...this._attachments];
-        this._attachments = [];
-        this._textarea.value = '';
-        this._resizeTextarea();
-        this._renderAttachmentsPreview();
-        this._refreshSendState();
         this._handlers.onSubmit?.(trimmed, attachments);
     }
 

package/src/ui/chat/ChatWindow.js

@@ -56,6 +56,10 @@ const BOARD_IMAGE_STEP = 320;
 const BOARD_IMAGE_GAP = BOARD_IMAGE_STEP - BOARD_IMAGE_WIDTH;
 // Скорость перестановки AI-изображений на доске и въезда заглушек регулируется здесь.
 const BOARD_IMAGE_REARRANGE_MS = 520;
+// На сколько колонок «справа» появляется блок-заглушка перед въездом в финальную позицию.
+const BOARD_IMAGE_PENDING_ENTER_FACTOR = 1.6;
+// Каскад между блоками одного батча (мс): пользователь видит, что они приезжают друг за другом.
+const BOARD_IMAGE_PENDING_STAGGER_MS = 90;
 const REFERENCE_DRAG_PREVIEW_SIZE = 96;
 
 const MODEL_OPTIONS = [
@@ -68,25 +72,25 @@ const MODEL_OPTIONS = [
     {
         id: 'yandex',
         label: 'Алиса',
-        icon: '<img src="/icons/alice.png" width="36" height="36" alt="Алиса" style="object-fit: contain;" />',
+        icon: ICONS.modelAlice,
         description: 'YandexGPT'
     },
     {
         id: 'gpt',
         label: 'GPT',
-        icon: '<img src="/icons/gpt.svg" width="36" height="36" alt="GPT" style="object-fit: contain;" />',
+        icon: ICONS.modelGpt,
         description: 'OpenAI'
     },
     {
         id: 'google',
         label: 'Google',
-        icon: '<img src="/icons/google.svg" width="36" height="36" alt="Google" style="object-fit: contain;" />',
+        icon: ICONS.modelGoogle,
         description: 'Gemini'
     },
     {
         id: 'qwen',
         label: 'Qwen',
-        icon: '<img src="/icons/qwen.svg" width="36" height="36" alt="Qwen" style="object-fit: contain;" />',
+        icon: ICONS.modelQwen,
         description: 'Alibaba'
     }
 ];
@@ -137,14 +141,16 @@ export class ChatWindow {
         this._attached = false;
         this._boardImageMessageIds = new Set();
         this._shiftedForImageBatchKeys = new Set();
-        this._pendingOverlayEls = [];
-        this._pendingOverlayMessageIds = new Set();
+        this._boardImageShiftHistory = new Map();
+        this._pendingOverlays = new Map();
+        this._pendingOverlayTimers = new Map();
         this._boardImageShiftAnimations = new Map();
         this._boardCursor = null;
         this._draggedReferenceObject = null;
         this._draggedReferenceStartPosition = null;
         this._referenceDragPreview = null;
         this._referenceDragHandlers = null;
+        this._clearSelectionOnSendClick = null;
     }
 
     attach() {
@@ -165,10 +171,15 @@ export class ChatWindow {
                 statusBar: this._refs.statusBar
             },
             {
-                onSubmit: (text, attachments) => this._session.send(text, this._getImageRequestOptions()),
+                onSubmit: (text, attachments) => {
+                    this._clearBoardSelection();
+                    return this._session.send(text, { ...this._getImageRequestOptions(), referenceImages: attachments });
+                },
                 onAbort: () => this._session.abort()
             }
         );
+        this._clearSelectionOnSendClick = () => this._clearBoardSelection();
+        this._refs.send.addEventListener('click', this._clearSelectionOnSendClick);
         this._composer.attach();
         this._attachReferenceDragEvents();
 
@@ -255,9 +266,13 @@ export class ChatWindow {
         this._cancelBoardImageShiftAnimations();
         this._clearReferenceDragState();
         if (this._unsubscribe) { this._unsubscribe(); this._unsubscribe = null; }
+        if (this._clearSelectionOnSendClick && this._refs?.send) {
+            this._refs.send.removeEventListener('click', this._clearSelectionOnSendClick);
+            this._clearSelectionOnSendClick = null;
+        }
         this._detachReferenceDragEvents();
         this._shiftedForImageBatchKeys.clear();
-        this._pendingOverlayMessageIds.clear();
+        this._boardImageShiftHistory.clear();
         this._composer?.destroy();
         this._extendedPromptModal?.destroy();
         this._contentTypeMenu?.destroy();
@@ -282,6 +297,15 @@ export class ChatWindow {
         this.detach();
     }
 
+    _clearBoardSelection() {
+        if (typeof this._boardCore?.selectTool?.clearSelection === 'function') {
+            this._boardCore.selectTool.clearSelection();
+            return;
+        }
+
+        this._boardCore?.eventBus?.emit(Events.Tool.SelectionClear);
+    }
+
     _updateCountPillIcon() {
         const active = COUNT_OPTIONS.find((o) => o.id === this._countId);
         if (!active) return;
@@ -314,6 +338,9 @@ export class ChatWindow {
     _render(state) {
         if (!this._attached && !this._refs) return;
         this._syncGeneratedImagesToBoard(state.messages);
+        if (state.status !== 'streaming') {
+            this._revertFailedBatchShifts(state.messages);
+        }
         this._messageList.render(state.messages);
         this._contentTypeMenu.refresh();
         this._modelMenu.refresh();
@@ -327,9 +354,17 @@ export class ChatWindow {
     }
 
     _updatePendingImages(messages) {
-        this._clearPendingOverlays();
-
         const pending = (messages || []).filter((m) => m.pending && m.kind === 'image');
+        const activeIds = new Set(pending.map((m) => m.id));
+
+        for (const [id, record] of this._pendingOverlays) {
+            if (!activeIds.has(id)) {
+                record.el.remove();
+                this._pendingOverlays.delete(id);
+                this._cancelPendingOverlayTimer(id);
+            }
+        }
+
         if (pending.length === 0) return;
 
         const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
@@ -341,27 +376,31 @@ export class ChatWindow {
         const ratio = wr / hr;
         const wScreen = Math.round(BOARD_IMAGE_WIDTH * s);
         const hScreen = Math.round(wScreen / ratio);
+        const enterDistance = Math.round(BOARD_IMAGE_STEP * s * BOARD_IMAGE_PENDING_ENTER_FACTOR);
 
-        for (const message of pending) {
+        let newIndex = 0;
+        pending.forEach((message) => {
             const slot = this._getImageBatchSlot(messages, message.id, s);
             const left = Math.round(slot.x - wScreen / 2);
             const top = Math.round(slot.y - hScreen / 2);
 
+            const existing = this._pendingOverlays.get(message.id);
+            if (existing) {
+                const el = existing.el;
+                el.style.left = `${left}px`;
+                el.style.top = `${top}px`;
+                el.style.width = `${wScreen}px`;
+                el.style.height = `${hScreen}px`;
+                el.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
+                el.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
+                return;
+            }
+
             const overlay = document.createElement('div');
-            overlay.className = 'moodboard-chat__pending-overlay';
+            overlay.className = 'moodboard-chat__pending-overlay moodboard-chat__pending-overlay--enter';
             overlay.style.cssText = `left:${left}px;top:${top}px;width:${wScreen}px;height:${hScreen}px`;
             overlay.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
-            overlay.style.setProperty('--moodboard-chat-pending-enter-x', `${Math.round(BOARD_IMAGE_STEP * s)}px`);
-
-            if (!this._pendingOverlayMessageIds.has(message.id)) {
-                overlay.classList.add('moodboard-chat__pending-overlay--enter');
-                this._pendingOverlayMessageIds.add(message.id);
-                this._scheduleAnimationFrame(() => {
-                    if (overlay.isConnected) {
-                        overlay.classList.add('moodboard-chat__pending-overlay--entered');
-                    }
-                });
-            }
+            overlay.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
 
             const label = document.createElement('span');
             label.className = 'moodboard-chat__pending-image-label';
@@ -369,15 +408,52 @@ export class ChatWindow {
             overlay.appendChild(label);
 
             document.body.appendChild(overlay);
-            this._pendingOverlayEls.push(overlay);
+
+            // Принудительный reflow: фиксируем стартовое состояние (translateX справа + opacity 0)
+            // в layout до переключения класса. Без этого браузер может смерджить два состояния
+            // в один кадр и transition не запустится — заглушка появится мгновенно.
+            void overlay.offsetWidth;
+
+            this._pendingOverlays.set(message.id, { el: overlay });
+
+            const stagger = newIndex * BOARD_IMAGE_PENDING_STAGGER_MS;
+            newIndex += 1;
+
+            const trigger = () => {
+                if (!overlay.isConnected) return;
+                overlay.classList.remove('moodboard-chat__pending-overlay--enter');
+                overlay.classList.add('moodboard-chat__pending-overlay--entered');
+            };
+
+            if (stagger > 0) {
+                const timer = setTimeout(() => {
+                    this._pendingOverlayTimers.delete(message.id);
+                    this._scheduleAnimationFrame(trigger);
+                }, stagger);
+                this._pendingOverlayTimers.set(message.id, timer);
+            } else {
+                this._scheduleAnimationFrame(trigger);
+            }
+        });
+    }
+
+    _cancelPendingOverlayTimer(id) {
+        const timer = this._pendingOverlayTimers.get(id);
+        if (timer !== undefined) {
+            clearTimeout(timer);
+            this._pendingOverlayTimers.delete(id);
         }
     }
 
     _clearPendingOverlays() {
-        for (const el of this._pendingOverlayEls) {
-            el.remove();
+        for (const record of this._pendingOverlays.values()) {
+            record.el.remove();
+        }
+        this._pendingOverlays.clear();
+        for (const timer of this._pendingOverlayTimers.values()) {
+            clearTimeout(timer);
         }
-        this._pendingOverlayEls = [];
+        this._pendingOverlayTimers.clear();
     }
 
     _getImageRequestOptions() {
@@ -406,11 +482,15 @@ export class ChatWindow {
         const onDragEnd = (data) => {
             void this._handleReferenceDragEnd(data);
         };
+        const onSelectionAdd = (data) => {
+            void this._handleSelectionAdd(data);
+        };
 
-        this._referenceDragHandlers = { onCursorMove, onDragStart, onDragEnd };
+        this._referenceDragHandlers = { onCursorMove, onDragStart, onDragEnd, onSelectionAdd };
         eventBus.on(Events.UI.CursorMove, onCursorMove);
         eventBus.on(Events.Tool.DragStart, onDragStart);
         eventBus.on(Events.Tool.DragEnd, onDragEnd);
+        eventBus.on(Events.Tool.SelectionAdd, onSelectionAdd);
     }
 
     _detachReferenceDragEvents() {
@@ -421,9 +501,19 @@ export class ChatWindow {
         eventBus.off(Events.UI.CursorMove, handlers.onCursorMove);
         eventBus.off(Events.Tool.DragStart, handlers.onDragStart);
         eventBus.off(Events.Tool.DragEnd, handlers.onDragEnd);
+        eventBus.off(Events.Tool.SelectionAdd, handlers.onSelectionAdd);
         this._referenceDragHandlers = null;
     }
 
+    async _handleSelectionAdd(data = {}) {
+        const objectId = data?.object;
+        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
+        
+        if (!isReferenceImageObject(object)) return;
+
+        await this._addImageObjectAsReference(object);
+    }
+
     _handleReferenceDragStart(data = {}) {
         const objectId = data?.object;
         const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
@@ -591,7 +681,7 @@ export class ChatWindow {
         if (this._shiftedForImageBatchKeys.has(batchKey)) return;
 
         this._shiftedForImageBatchKeys.add(batchKey);
-        this._shiftBoardAiImagesLeft(this._getImageBatchWorldBounds(messages, messageId, scale));
+        this._shiftBoardAiImagesLeft(this._getImageBatchWorldBounds(messages, messageId, scale), batchKey);
     }
 
     _getImageBatchWorldBounds(messages, messageId, scale = 1) {
@@ -611,7 +701,7 @@ export class ChatWindow {
         };
     }
 
-    _shiftBoardAiImagesLeft(nextBatchBounds) {
+    _shiftBoardAiImagesLeft(nextBatchBounds, batchKey) {
         const aiObjects = this._getBoardAiImageObjects();
         if (aiObjects.length === 0 || !nextBatchBounds) return;
 
@@ -621,14 +711,56 @@ export class ChatWindow {
 
         const ids = new Set(aiObjects.map((object) => object.id));
         const objects = this._boardCore?.state?.state?.objects;
+        const shiftRecord = [];
         for (const id of ids) {
             const obj = objects?.find((item) => item.id === id);
             if (obj?.position) {
-                this._animateBoardImageToPosition(
-                    id,
-                    obj.position,
-                    { x: Math.round(obj.position.x - shift), y: obj.position.y }
-                );
+                const from = { x: obj.position.x, y: obj.position.y };
+                const to = { x: Math.round(obj.position.x - shift), y: obj.position.y };
+                shiftRecord.push({ id, from });
+                this._animateBoardImageToPosition(id, from, to);
+            }
+        }
+
+        if (batchKey && shiftRecord.length > 0) {
+            this._boardImageShiftHistory.set(batchKey, shiftRecord);
+        }
+    }
+
+    _revertBoardImageShiftForBatch(batchKey) {
+        const record = this._boardImageShiftHistory.get(batchKey);
+        if (!record) return;
+
+        const objects = this._boardCore?.state?.state?.objects;
+        for (const { id, from } of record) {
+            const obj = objects?.find((item) => item.id === id);
+            if (obj?.position) {
+                this._animateBoardImageToPosition(id, obj.position, from);
+            }
+        }
+
+        this._boardImageShiftHistory.delete(batchKey);
+        this._shiftedForImageBatchKeys.delete(batchKey);
+    }
+
+    _revertFailedBatchShifts(messages) {
+        if (this._boardImageShiftHistory.size === 0) return;
+
+        for (const batchKey of [...this._boardImageShiftHistory.keys()]) {
+            if (batchKey === 'unknown') continue;
+
+            const messageIds = batchKey.split('|');
+            const batchMessages = messageIds
+                .map((id) => messages?.find((m) => m.id === id))
+                .filter(Boolean);
+
+            if (batchMessages.length === 0) continue;
+
+            const allResolved = batchMessages.every((m) => !m.pending);
+            const anyImage = batchMessages.some((m) => Boolean(m.imageBase64));
+
+            if (allResolved && !anyImage) {
+                this._revertBoardImageShiftForBatch(batchKey);
             }
         }
     }

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);
+    }
+}