@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/services/ConnectorRouter.js

@@ -0,0 +1,210 @@
+/**
+ * Чистая геометрия вычисления маршрутов коннекторов.
+ * Без зависимостей PIXI — только координатная математика.
+ */
+
+const BEZIER_CP_RATIO = 0.4;
+const BEZIER_SAMPLES  = 20;
+const ELBOW_STUB      = 24; // минимальный выход перпендикулярно грани до первого поворота
+
+/**
+ * Ортогональные точки излома для elbow-маршрута.
+ * Доминирующая ось определяет схему H-V-H или V-H-V.
+ *
+ * @param {{ x: number, y: number }} start
+ * @param {{ x: number, y: number }} end
+ * @returns {Array<{x:number,y:number}>}
+ */
+export function computeElbowWaypoints(start, end) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (Math.abs(dx) >= Math.abs(dy)) {
+        const mx = Math.round((start.x + end.x) / 2);
+        return [start, { x: mx, y: start.y }, { x: mx, y: end.y }, end];
+    }
+    const my = Math.round((start.y + end.y) / 2);
+    return [start, { x: start.x, y: my }, { x: end.x, y: my }, end];
+}
+
+/**
+ * Ортогональный маршрут с перпендикулярным выходом из грани и минимумом изгибов.
+ * S' = startPt + startDir*ELBOW_STUB; E' = endPt + endDir*ELBOW_STUB.
+ * Перпендикулярные грани → L-shape (1 изгиб); одна ось → Z-shape (навстречу)
+ * или U-shape (в одну сторону), оба по 2 изгиба.
+ *
+ * @param {{ x:number, y:number }} startPt
+ * @param {{ x:number, y:number }} startDir  единичная внешняя нормаль грани старта
+ * @param {{ x:number, y:number }} endPt
+ * @param {{ x:number, y:number }} endDir    единичная внешняя нормаль грани конца
+ * @returns {Array<{x:number,y:number}>}
+ */
+function computeElbowWithDirs(startPt, startDir, endPt, endDir) {
+    const S = {
+        x: Math.round(startPt.x + startDir.x * ELBOW_STUB),
+        y: Math.round(startPt.y + startDir.y * ELBOW_STUB),
+    };
+    const E = {
+        x: Math.round(endPt.x + endDir.x * ELBOW_STUB),
+        y: Math.round(endPt.y + endDir.y * ELBOW_STUB),
+    };
+
+    const startHoriz = Math.abs(startDir.x) >= Math.abs(startDir.y);
+    const endHoriz   = Math.abs(endDir.x)   >= Math.abs(endDir.y);
+
+    // Цель — минимум изгибов: L-shape = 1 изгиб, Z/U-shape = 2 изгиба.
+    let corners;
+    if (startHoriz === endHoriz) {
+        // Грани на одной оси
+        if (startHoriz) {
+            if (Math.sign(startDir.x) === Math.sign(endDir.x)) {
+                // Смотрят в одну сторону → U-shape: общий вынос по дальней кромке (2 изгиба)
+                const outerX = startDir.x >= 0 ? Math.max(S.x, E.x) : Math.min(S.x, E.x);
+                corners = [{ x: outerX, y: S.y }, { x: outerX, y: E.y }];
+            } else {
+                // Смотрят противоположно по горизонтали — различаем навстречу и врозь.
+                // Навстречу: стабы сходятся, признак: (E.x - S.x) * startDir.x > 0.
+                const facingEachOther = (E.x - S.x) * startDir.x > 0;
+                if (facingEachOther) {
+                    // Z-shape: одно вертикальное пересечение посередине (2 изгиба)
+                    const midX = Math.round((S.x + E.x) / 2);
+                    corners = [{ x: midX, y: S.y }, { x: midX, y: E.y }];
+                } else {
+                    // Грани смотрят врозь → C-shape: уходим вертикально (перпендикулярно нормали),
+                    // огибаем сверху или снизу.
+                    const outerY = S.y <= E.y
+                        ? Math.min(S.y, E.y) - ELBOW_STUB
+                        : Math.max(S.y, E.y) + ELBOW_STUB;
+                    corners = [{ x: S.x, y: outerY }, { x: E.x, y: outerY }];
+                }
+            }
+        } else if (Math.sign(startDir.y) === Math.sign(endDir.y)) {
+            const outerY = startDir.y >= 0 ? Math.max(S.y, E.y) : Math.min(S.y, E.y);
+            corners = [{ x: S.x, y: outerY }, { x: E.x, y: outerY }];
+        } else {
+            // Смотрят противоположно по вертикали — различаем навстречу и врозь.
+            // Навстречу: (E.y - S.y) * startDir.y > 0.
+            const facingEachOther = (E.y - S.y) * startDir.y > 0;
+            if (facingEachOther) {
+                const midY = Math.round((S.y + E.y) / 2);
+                corners = [{ x: S.x, y: midY }, { x: E.x, y: midY }];
+            } else {
+                // Грани смотрят врозь → C-shape: уходим горизонтально (перпендикулярно нормали),
+                // огибаем слева или справа.
+                const outerX = S.x <= E.x
+                    ? Math.min(S.x, E.x) - ELBOW_STUB
+                    : Math.max(S.x, E.x) + ELBOW_STUB;
+                corners = [{ x: outerX, y: S.y }, { x: outerX, y: E.y }];
+            }
+        }
+    } else {
+        // Перпендикулярные оси → L-shape (1 изгиб).
+        // Угол стыкуем к стабу: первый сегмент продолжает выход, чтобы не плодить изломы.
+        if (startHoriz) {
+            corners = [{ x: E.x, y: S.y }];
+        } else {
+            corners = [{ x: S.x, y: E.y }];
+        }
+    }
+
+    // Дедупликация соседних точек (вырожденные нулевые сегменты)
+    const raw = [startPt, S, ...corners, E, endPt];
+    const result = [{ x: Math.round(raw[0].x), y: Math.round(raw[0].y) }];
+    for (let i = 1; i < raw.length; i++) {
+        const p    = raw[i];
+        const prev = result[result.length - 1];
+        if (Math.abs(p.x - prev.x) > 0.5 || Math.abs(p.y - prev.y) > 0.5) {
+            result.push({ x: Math.round(p.x), y: Math.round(p.y) });
+        }
+    }
+    return result;
+}
+
+
+/**
+ * Сэмплирует кубическую кривую Безье при параметре t∈[0,1].
+ *
+ * @param {{ x: number, y: number }} s начало
+ * @param {{ x: number, y: number }} cp1 контрольная точка 1
+ * @param {{ x: number, y: number }} cp2 контрольная точка 2
+ * @param {{ x: number, y: number }} e конец
+ * @param {number} t параметр [0,1]
+ * @returns {{ x: number, y: number }}
+ */
+export function sampleBezier(s, cp1, cp2, e, t) {
+    const mt = 1 - t;
+    return {
+        x: mt * mt * mt * s.x + 3 * mt * mt * t * cp1.x + 3 * mt * t * t * cp2.x + t * t * t * e.x,
+        y: mt * mt * mt * s.y + 3 * mt * mt * t * cp1.y + 3 * mt * t * t * cp2.y + t * t * t * e.y,
+    };
+}
+
+/**
+ * Контрольные точки кубической кривой Безье.
+ * Если переданы dir-векторы — отводятся вдоль нормали грани (перпендикулярный заход).
+ * Иначе — вдоль доминирующей оси bbox (старый fallback для straight).
+ *
+ * @param {{ x: number, y: number }} start
+ * @param {{ x: number, y: number }} end
+ * @param {{ x: number, y: number }|null} startDir
+ * @param {{ x: number, y: number }|null} endDir
+ * @returns {{ cp1: {x:number,y:number}, cp2: {x:number,y:number} }}
+ */
+export function bezierControlPoints(start, end, startDir = null, endDir = null) {
+    if (startDir && endDir) {
+        const dist   = Math.hypot(end.x - start.x, end.y - start.y);
+        const offset = dist * BEZIER_CP_RATIO;
+        return {
+            cp1: { x: start.x + startDir.x * offset, y: start.y + startDir.y * offset },
+            cp2: { x: end.x   + endDir.x   * offset, y: end.y   + endDir.y   * offset },
+        };
+    }
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (Math.abs(dx) >= Math.abs(dy)) {
+        const offset = Math.abs(dx) * BEZIER_CP_RATIO;
+        return {
+            cp1: { x: start.x + offset, y: start.y },
+            cp2: { x: end.x - offset, y: end.y },
+        };
+    }
+    const offset = Math.abs(dy) * BEZIER_CP_RATIO;
+    return {
+        cp1: { x: start.x, y: start.y + offset },
+        cp2: { x: end.x, y: end.y - offset },
+    };
+}
+
+/**
+ * Строит массив опорных точек пути по двум world-точкам и route.
+ *
+ * straight → [start, end]
+ * elbow    → перпендикулярный выход через стаб + ортогональные изломы
+ * bezier   → BEZIER_SAMPLES+1 сэмплов вдоль кривой (для hitTest и направления головы)
+ *
+ * @param {{ x: number, y: number }} start
+ * @param {{ x: number, y: number }} end
+ * @param {string} route 'straight'|'elbow'|'bezier'
+ * @param {{ x: number, y: number }|null} startDir  внешняя нормаль грани старта
+ * @param {{ x: number, y: number }|null} endDir    внешняя нормаль грани конца
+ * @returns {Array<{x:number,y:number}>}
+ */
+export function buildPath(start, end, route, startDir = null, endDir = null) {
+    if (route === 'elbow') {
+        if (startDir && endDir) {
+            return computeElbowWithDirs(start, startDir, end, endDir);
+        }
+        return computeElbowWaypoints(start, end);
+    }
+    if (route === 'bezier') {
+        const { cp1, cp2 } = bezierControlPoints(start, end, startDir, endDir);
+        const pts = [];
+        for (let i = 0; i <= BEZIER_SAMPLES; i++) {
+            const p = sampleBezier(start, cp1, cp2, end, i / BEZIER_SAMPLES);
+            pts.push({ x: Math.round(p.x), y: Math.round(p.y) });
+        }
+        return pts;
+    }
+    return [start, end];
+}
+
+export { BEZIER_CP_RATIO, BEZIER_SAMPLES, ELBOW_STUB };

package/src/services/comments/CommentService.js

@@ -0,0 +1,344 @@
+import { Events } from '../../core/events/Events.js';
+
+/**
+ * Хранилище тредов/сообщений и вызовы инжектированного CommentsAdapter.
+ * Без HTTP — только adapter из options.
+ */
+export class CommentService {
+    constructor({ eventBus, boardId, adapter, currentUser }) {
+        this.eventBus = eventBus;
+        this.boardId = boardId;
+        this.adapter = adapter;
+        this.currentUser = currentUser || null;
+        /** @type {Map<number, object>} */
+        this.threads = new Map();
+        this._appliedMessageIds = new Set();
+        this._appliedThreadIds = new Set();
+        this._onObjectDeleted = this._onObjectDeleted.bind(this);
+    }
+
+    attach() {
+        this.eventBus.on(Events.Object.Deleted, this._onObjectDeleted);
+    }
+
+    detach() {
+        this.eventBus.off(Events.Object.Deleted, this._onObjectDeleted);
+    }
+
+    destroy() {
+        this.detach();
+        this.threads.clear();
+        this._appliedMessageIds.clear();
+        this._appliedThreadIds.clear();
+    }
+
+    getThread(threadId) {
+        return this.threads.get(Number(threadId)) || null;
+    }
+
+    getAllThreads() {
+        return Array.from(this.threads.values());
+    }
+
+    async loadInitial() {
+        if (!this.adapter?.loadThreads) return;
+        const data = await this.adapter.loadThreads(this.boardId, {
+            include_resolved: true,
+        });
+        const items = data?.items || [];
+        for (const item of items) {
+            this._upsertThread(item);
+            if (item.id != null) this._appliedThreadIds.add(Number(item.id));
+            for (const msg of item.messages?.items || []) {
+                if (msg?.id != null) this._appliedMessageIds.add(Number(msg.id));
+            }
+        }
+    }
+
+    /**
+     * @param {{ x: number, y: number, anchor_object_id?: string, anchor_dx?: number, anchor_dy?: number, content: string }} payload
+     */
+    async createThread(payload) {
+        if (!this.adapter?.createThread) {
+            throw new Error('CommentsAdapter.createThread is not configured');
+        }
+        const result = await this.adapter.createThread(this.boardId, payload);
+        const thread = result?.thread;
+        if (thread) {
+            this._upsertThread(thread);
+            if (thread.id != null) this._appliedThreadIds.add(Number(thread.id));
+            for (const msg of thread.messages?.items || []) {
+                if (msg?.id != null) this._appliedMessageIds.add(Number(msg.id));
+            }
+            this.eventBus.emit(Events.Comment.PinCreated, {
+                threadId: thread.id,
+                x: thread.x,
+                y: thread.y,
+                anchorObjectId: thread.anchor_object_id || undefined,
+            });
+        }
+        return thread;
+    }
+
+    async addReply(threadId, content) {
+        const message = await this.adapter.addReply(this.boardId, threadId, content);
+        this._applyMessageToThread(threadId, message);
+        this.eventBus.emit(Events.Comment.MessageAdded, { threadId, message });
+        if (message?.id != null) this._appliedMessageIds.add(Number(message.id));
+        return message;
+    }
+
+    async resolveThread(threadId, resolved) {
+        const thread = await this.adapter.resolveThread(this.boardId, threadId, resolved);
+        if (thread) {
+            this._upsertThread({ ...this.getThread(threadId), ...thread });
+            this.eventBus.emit(Events.Comment.Resolved, {
+                threadId,
+                resolved: !!thread.resolved,
+                resolvedBy: thread.resolved_by ?? undefined,
+            });
+        }
+        return thread;
+    }
+
+    async moveThread(threadId, payload) {
+        if (!this.adapter?.moveThread) {
+            throw new Error('CommentsAdapter.moveThread is not configured');
+        }
+        const prev = this.getThread(threadId);
+        if (!prev) return null;
+        this._upsertThread({ ...prev, ...payload });
+        try {
+            const thread = await this.adapter.moveThread(this.boardId, threadId, payload);
+            if (thread) {
+                this._upsertThread({ ...this.getThread(threadId), ...thread });
+                this.eventBus.emit(Events.Comment.RemoteUpdated, {
+                    action: 'thread.updated',
+                    boardId: this.boardId,
+                    thread,
+                    message: null,
+                    changes: payload,
+                });
+            }
+            return thread;
+        } catch (err) {
+            console.error('[CommentService] moveThread error', err);
+            this._upsertThread(prev);
+            this.eventBus.emit(Events.Comment.RemoteUpdated, {
+                action: 'thread.updated',
+                boardId: this.boardId,
+                thread: prev,
+                message: null,
+                changes: null,
+            });
+            return null;
+        }
+    }
+
+    async setThreadColor(threadId, color) {
+        if (!this.adapter?.setThreadColor) {
+            throw new Error('CommentsAdapter.setThreadColor is not configured');
+        }
+        const prev = this.getThread(threadId);
+        if (!prev) return null;
+        this._upsertThread({ ...prev, color });
+        this.eventBus.emit(Events.Comment.ColorChanged, { threadId, color });
+        try {
+            const thread = await this.adapter.setThreadColor(this.boardId, threadId, color);
+            if (thread) this._upsertThread({ ...this.getThread(threadId), ...thread });
+            return thread;
+        } catch (err) {
+            console.error('[CommentService] setThreadColor error', err);
+            this._upsertThread(prev);
+            this.eventBus.emit(Events.Comment.ColorChanged, { threadId, color: prev.color ?? null });
+            return null;
+        }
+    }
+
+    async deleteThread(threadId) {
+        if (!this.adapter?.deleteThread) {
+            throw new Error('CommentsAdapter.deleteThread is not configured');
+        }
+        await this.adapter.deleteThread(this.boardId, threadId);
+        const id = Number(threadId);
+        const thread = this.threads.get(id);
+        this.threads.delete(id);
+        this._appliedThreadIds.delete(id);
+        if (thread?.messages?.items) {
+            for (const m of thread.messages.items) {
+                if (m?.id != null) this._appliedMessageIds.delete(Number(m.id));
+            }
+        }
+        this.eventBus.emit(Events.Comment.ThreadDeleted, { threadId });
+    }
+
+    async updateMessage(messageId, content) {
+        return this.adapter.updateMessage(this.boardId, messageId, content);
+    }
+
+    async deleteMessage(messageId) {
+        const data = await this.adapter.deleteMessage(this.boardId, messageId);
+        const threadId = data?.thread_id;
+        const thread = threadId != null ? this.getThread(threadId) : null;
+        if (thread?.messages?.items) {
+            thread.messages.items = thread.messages.items.filter((m) => m.id !== messageId);
+            thread.messages.count = thread.messages.items.length;
+        }
+        this.eventBus.emit(Events.Comment.Deleted, { threadId, messageId });
+        return data;
+    }
+
+    openThread(threadId) {
+        this.eventBus.emit(Events.Comment.ThreadOpened, { threadId });
+    }
+
+    /**
+     * Payload из broadcastWith() §3.3
+     */
+    applyRemote(event) {
+        if (!event) return;
+        if (event.board_id != null && String(event.board_id) !== String(this.boardId)) return;
+        const action = event.action;
+        switch (action) {
+            case 'thread.created': {
+                const thread = event.thread;
+                if (thread?.id != null && this._appliedThreadIds.has(Number(thread.id))) break;
+                if (thread) {
+                    this._upsertThread(thread);
+                    if (thread.id != null) this._appliedThreadIds.add(Number(thread.id));
+                }
+                break;
+            }
+            case 'thread.updated': {
+                const thread = event.thread;
+                if (thread) {
+                    const prev = this.getThread(thread.id);
+                    this._upsertThread({ ...prev, ...thread, ...(event.changes || {}) });
+                }
+                break;
+            }
+            case 'thread.resolved': {
+                const thread = event.thread;
+                if (thread) {
+                    const prev = this.getThread(thread.id);
+                    this._upsertThread({ ...prev, ...thread });
+                }
+                break;
+            }
+            case 'comment.created': {
+                const message = event.message;
+                if (message?.id != null && this._appliedMessageIds.has(Number(message.id))) break;
+                if (message?.thread_id != null) {
+                    this._applyMessageToThread(message.thread_id, message);
+                    if (message.id != null) this._appliedMessageIds.add(Number(message.id));
+                }
+                if (event.thread) {
+                    const prev = this.getThread(event.thread.id);
+                    this._upsertThread({ ...prev, ...event.thread });
+                }
+                break;
+            }
+            case 'comment.updated': {
+                const message = event.message;
+                if (message?.thread_id != null) {
+                    this._replaceMessageInThread(message.thread_id, message);
+                }
+                break;
+            }
+            case 'comment.deleted': {
+                const message = event.message;
+                if (message?.thread_id != null && message?.id != null) {
+                    const thread = this.getThread(message.thread_id);
+                    if (thread?.messages?.items) {
+                        thread.messages.items = thread.messages.items.filter((m) => m.id !== message.id);
+                        thread.messages.count = thread.messages.items.length;
+                    }
+                }
+                break;
+            }
+            case 'thread.deleted': {
+                const deletedId = event.thread?.id;
+                if (deletedId != null) {
+                    const nid = Number(deletedId);
+                    this.threads.delete(nid);
+                    this._appliedThreadIds.delete(nid);
+                    this.eventBus.emit(Events.Comment.ThreadDeleted, { threadId: deletedId });
+                }
+                break;
+            }
+            default:
+                break;
+        }
+        this.eventBus.emit(Events.Comment.RemoteUpdated, {
+            action: event.action,
+            boardId: event.board_id,
+            thread: event.thread,
+            message: event.message,
+            changes: event.changes,
+        });
+    }
+
+    _upsertThread(thread) {
+        if (!thread || thread.id == null) return;
+        const id = Number(thread.id);
+        const prev = this.threads.get(id);
+        const messages = thread.messages || prev?.messages;
+        this.threads.set(id, { ...prev, ...thread, messages });
+    }
+
+    _applyMessageToThread(threadId, message) {
+        const thread = this.getThread(threadId);
+        if (!thread) return;
+        if (!thread.messages) {
+            thread.messages = { count: 0, has_more: false, items: [] };
+        }
+        const items = thread.messages.items || [];
+        const idx = items.findIndex((m) => m.id === message.id);
+        if (idx >= 0) items[idx] = message;
+        else items.push(message);
+        thread.messages.items = items;
+        thread.messages.count = items.length;
+        thread.messages_count = items.length;
+    }
+
+    _replaceMessageInThread(threadId, message) {
+        const thread = this.getThread(threadId);
+        if (!thread?.messages?.items) return;
+        const idx = thread.messages.items.findIndex((m) => m.id === message.id);
+        if (idx >= 0) thread.messages.items[idx] = message;
+    }
+
+    _onObjectDeleted({ objectId }) {
+        if (!objectId) return;
+        for (const thread of this.threads.values()) {
+            if (thread.detached || thread.anchor_object_id !== objectId) continue;
+            const wx = thread.x;
+            const wy = thread.y;
+            thread.detached = true;
+            thread.x = wx;
+            thread.y = wy;
+            thread.anchor_object_id = null;
+            thread.anchor_dx = null;
+            thread.anchor_dy = null;
+        }
+    }
+
+    /**
+     * World-позиция пина для отрисовки
+     */
+    getThreadWorldPosition(thread, core) {
+        if (!thread) return null;
+        if (thread.detached || !thread.anchor_object_id) {
+            return { x: thread.x, y: thread.y };
+        }
+        const pos = { objectId: thread.anchor_object_id, position: null };
+        this.eventBus.emit(Events.Tool.GetObjectPosition, pos);
+        if (!pos.position) {
+            return { x: thread.x, y: thread.y };
+        }
+        return {
+            x: pos.position.x + (thread.anchor_dx || 0),
+            y: pos.position.y + (thread.anchor_dy || 0),
+        };
+    }
+}

package/src/tools/object-tools/CommentTool.js

@@ -0,0 +1,85 @@
+import * as PIXI from 'pixi.js';
+import { BaseTool } from '../BaseTool.js';
+import { Events } from '../../core/events/Events.js';
+
+/**
+ * Инструмент «комментарий» — клик по холсту открывает черновик треда у world-точки.
+ */
+export class CommentTool extends BaseTool {
+    constructor(eventBus, core, commentService, threadPopover) {
+        super('comment', eventBus);
+        this.core = core;
+        this.commentService = commentService;
+        this.threadPopover = threadPopover;
+        this.cursor = CommentTool._buildCursor();
+        this.app = null;
+        this.world = null;
+    }
+
+    activate(app) {
+        super.activate(app);
+        this.app = app;
+        this.world = this.core?.pixi?.worldLayer || app?.stage;
+        if (this.app?.view) {
+            this.app.view.style.cursor = this.cursor;
+        }
+    }
+
+    deactivate() {
+        if (this.app?.view) this.app.view.style.cursor = '';
+        this.app = null;
+        this.world = null;
+        super.deactivate();
+    }
+
+    onMouseDown(event) {
+        super.onMouseDown(event);
+        if (!this.world) return;
+
+        const worldPt = this._toWorld(event.x, event.y);
+        const hitData = { x: event.x, y: event.y, result: null };
+        this.eventBus.emit(Events.Tool.HitTest, hitData);
+
+        let anchor = null;
+        if (hitData.result?.object) {
+            const objectId = hitData.result.object;
+            const pos = { objectId, position: null };
+            this.eventBus.emit(Events.Tool.GetObjectPosition, pos);
+            if (pos.position) {
+                anchor = {
+                    anchor_object_id: objectId,
+                    anchor_dx: worldPt.x - pos.position.x,
+                    anchor_dy: worldPt.y - pos.position.y,
+                };
+            }
+        }
+
+        this.threadPopover?.openDraftAt(
+            { x: worldPt.x, y: worldPt.y },
+            anchor
+        );
+        this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+    }
+
+    _toWorld(x, y) {
+        if (!this.world) return { x, y };
+        const local = this.world.toLocal(new PIXI.Point(x, y));
+        return { x: local.x, y: local.y };
+    }
+
+    /**
+     * Строит CSS-курсор: залитый пузырь комментария с острым углом снизу слева.
+     * Hotspot совпадает с острием уголка (2, 30).
+     */
+    static _buildCursor() {
+        const svg = [
+            '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">',
+            '<path d="M12 2 C6.477 2 2 6.477 2 12 C2 14.8 3.1 17.3 5 19.2 L2 22 L7 20.5',
+            ' C8.5 21.4 10.2 22 12 22 C17.523 22 22 17.523 22 12 C22 6.477 17.523 2 12 2 Z"',
+            ' fill="#193042" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>',
+            '</svg>',
+        ].join('');
+        const url = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}")`;
+        return `${url} 2 22, crosshair`;
+    }
+}