@sequent-org/moodboard 1.4.30 → 1.4.31

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;
 

package/src/ui/handles/HandlesInteractionController.js

@@ -42,10 +42,10 @@ export class HandlesInteractionController {
         const screenX = cssRect.left - offsetLeft;
         const screenY = cssRect.top - offsetTop;
         return {
-            x: ((screenX * rendererRes) - tx) / s,
-            y: ((screenY * rendererRes) - ty) / s,
-            width: (cssRect.width * rendererRes) / s,
-            height: (cssRect.height * rendererRes) / s,
+            x: (screenX - tx) / s,
+            y: (screenY - ty) / s,
+            width: cssRect.width / s,
+            height: cssRect.height / s,
         };
     }
 
@@ -155,6 +155,37 @@ export class HandlesInteractionController {
         const dir = e.currentTarget.dataset.dir;
         const id = e.currentTarget.dataset.id;
         const isGroup = id === '__group__';
+
+        // Детектируем двойной клик/тап по ручке текстового объекта → открываем редактор вместо resize.
+        // Необходимо, т.к. при dblclick второй mousedown попадает на HTML-ручку (stopPropagation
+        // обрывает bubbling до canvas), поэтому нативный dblclick до canvas не доходит.
+        if (!isGroup) {
+            const _now = performance.now();
+            if (!this._lastHandleDownTime) this._lastHandleDownTime = {};
+            const _prevTime = this._lastHandleDownTime[id];
+            this._lastHandleDownTime[id] = _now;
+            if (_prevTime !== undefined && (_now - _prevTime) < 300) {
+                const _typeReq = { objectId: id, pixiObject: null };
+                this.host.eventBus.emit(Events.Tool.GetObjectPixi, _typeReq);
+                const _mbType = _typeReq.pixiObject?._mb?.type;
+                if (_mbType === 'text' || _mbType === 'simple-text' || _mbType === 'note') {
+                    const _posData = { objectId: id, position: null };
+                    this.host.eventBus.emit(Events.Tool.GetObjectPosition, _posData);
+                    if (_posData.position) {
+                        this.host.eventBus.emit(Events.Tool.ObjectEdit, {
+                            id,
+                            type: _mbType,
+                            position: _posData.position,
+                            properties: _typeReq.pixiObject?._mb?.properties || {},
+                            caretClick: { clientX: e.clientX, clientY: e.clientY },
+                            create: false,
+                        });
+                    }
+                    return;
+                }
+            }
+        }
+
         const world = this.host.core.pixi.worldLayer || this.host.core.pixi.app.stage;
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
@@ -328,10 +359,10 @@ export class HandlesInteractionController {
             const screenY = (newTop - offsetTop);
             const screenW = newW;
             const screenH = newH;
-            const worldX = ((screenX * rendererRes) - tx) / s;
-            const worldY = ((screenY * rendererRes) - ty) / s;
-            const worldW = (screenW * rendererRes) / s;
-            const worldH = (screenH * rendererRes) / s;
+            const worldX = (screenX - tx) / s;
+            const worldY = (screenY - ty) / s;
+            const worldW = screenW / s;
+            const worldH = screenH / s;
 
             if (isGroup) {
                 this.host.eventBus.emit(Events.Tool.GroupResizeUpdate, {
@@ -359,8 +390,8 @@ export class HandlesInteractionController {
         };
 
         const onUp = () => {
-            document.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
             const endCSS = {
                 left: parseFloat(box.style.left),
                 top: parseFloat(box.style.top),
@@ -371,10 +402,10 @@ export class HandlesInteractionController {
             const screenY = (endCSS.top - offsetTop);
             const screenW = endCSS.width;
             const screenH = endCSS.height;
-            const worldX = ((screenX * rendererRes) - tx) / s;
-            const worldY = ((screenY * rendererRes) - ty) / s;
-            const worldW = (screenW * rendererRes) / s;
-            const worldH = (screenH * rendererRes) / s;
+            const worldX = (screenX - tx) / s;
+            const worldY = (screenY - ty) / s;
+            const worldW = screenW / s;
+            const worldH = screenH / s;
 
             if (isGroup) {
                 this.host.eventBus.emit(Events.Tool.GroupResizeEnd, { objects });
@@ -406,7 +437,7 @@ export class HandlesInteractionController {
                             el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
                             el.style.height = 'auto';
                             const measured = Math.max(1, Math.round(el.scrollHeight));
-                            const worldH2 = (measured * rendererRes) / s;
+                            const worldH2 = measured / s;
                             const fixData = {
                                 object: id,
                                 size: { width: worldW, height: worldH2 },
@@ -419,8 +450,8 @@ export class HandlesInteractionController {
             }
         };
 
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
     }
 
     onEdgeResizeDown(e) {
@@ -600,10 +631,10 @@ export class HandlesInteractionController {
             const screenY = (newTop - offsetTop);
             const screenW = newW;
             const screenH = newH;
-            const worldX = ((screenX * rendererRes) - tx) / s;
-            const worldY = ((screenY * rendererRes) - ty) / s;
-            const worldW = (screenW * rendererRes) / s;
-            const worldH = (screenH * rendererRes) / s;
+            const worldX = (screenX - tx) / s;
+            const worldY = (screenY - ty) / s;
+            const worldW = screenW / s;
+            const worldH = screenH / s;
             const edgePositionChanged = (newLeft !== startCSS.left) || (newTop !== startCSS.top);
 
             if (isGroup) {
@@ -624,8 +655,8 @@ export class HandlesInteractionController {
         };
 
         const onUp = () => {
-            document.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', onUp);
             const endCSS = {
                 left: parseFloat(box.style.left),
                 top: parseFloat(box.style.top),
@@ -636,10 +667,10 @@ export class HandlesInteractionController {
             const screenY = (endCSS.top - offsetTop);
             const screenW = endCSS.width;
             const screenH = endCSS.height;
-            const worldX = ((screenX * rendererRes) - tx) / s;
-            const worldY = ((screenY * rendererRes) - ty) / s;
-            const worldW = (screenW * rendererRes) / s;
-            const worldH = (screenH * rendererRes) / s;
+            const worldX = (screenX - tx) / s;
+            const worldY = (screenY - ty) / s;
+            const worldW = screenW / s;
+            const worldH = screenH / s;
 
             if (isGroup) {
                 this.host.eventBus.emit(Events.Tool.GroupResizeEnd, { objects });
@@ -654,7 +685,7 @@ export class HandlesInteractionController {
                             el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
                             el.style.height = 'auto';
                             const measured = Math.max(1, Math.round(el.scrollHeight));
-                            finalWorldH = (measured * rendererRes) / s;
+                            finalWorldH = measured / s;
                         }
                     } catch (_) {}
                 }
@@ -670,8 +701,8 @@ export class HandlesInteractionController {
             }
         };
 
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
     }
 
     onRotateHandleDown(e, box) {
@@ -741,8 +772,8 @@ export class HandlesInteractionController {
         };
 
         const onRotateUp = (ev) => {
-            document.removeEventListener('mousemove', onRotateMove);
-            document.removeEventListener('mouseup', onRotateUp);
+            document.removeEventListener('pointermove', onRotateMove);
+            document.removeEventListener('pointerup', onRotateUp);
 
             if (handleElement) {
                 handleElement.style.cursor = 'grab';
@@ -766,7 +797,7 @@ export class HandlesInteractionController {
             }
         };
 
-        document.addEventListener('mousemove', onRotateMove);
-        document.addEventListener('mouseup', onRotateUp);
+        document.addEventListener('pointermove', onRotateMove);
+        document.addEventListener('pointerup', onRotateUp);
     }
 }

package/src/ui/handles/HandlesPositioningService.js

@@ -102,14 +102,49 @@ export class HandlesPositioningService {
         const screenX = cssRect.left - offsetLeft;
         const screenY = cssRect.top - offsetTop;
         return {
-            x: ((screenX * rendererRes) - tx) / s,
-            y: ((screenY * rendererRes) - ty) / s,
-            width: (cssRect.width * rendererRes) / s,
-            height: (cssRect.height * rendererRes) / s,
+            x: (screenX - tx) / s,
+            y: (screenY - ty) / s,
+            width: cssRect.width / s,
+            height: cssRect.height / s,
         };
     }
 
     getSingleSelectionWorldBounds(id, pixi) {
+        // Для текстовых объектов (type=text/simple-text) рамку строим по реальному DOM-боксу
+        // букв, а не по сохранённому width/height из state. Только для неповёрнутых объектов:
+        // getBoundingClientRect повёрнутого элемента — axis-aligned, даст неверный размер.
+        if (typeof document !== 'undefined') {
+            const textEl = document.querySelector(`.mb-text[data-id="${id}"]`);
+            if (textEl) {
+                const rotationData = { objectId: id, rotation: 0 };
+                this.host.eventBus.emit(Events.Tool.GetObjectRotation, rotationData);
+                if (Math.abs(rotationData.rotation || 0) < 0.001) {
+                    try {
+                        const r = textEl.getBoundingClientRect();
+                        // Пустой/создаваемый текст: .mb-text схлопнут (высота ~2px),
+                        // плейсхолдер живёт в textarea редактора, а не в этом div.
+                        // В этом случае DOM-боксу не доверяем — падаем в state-размер ниже.
+                        const hasContent = !!(textEl.textContent && textEl.textContent.trim());
+                        if (hasContent && r.width > 2 && r.height > 2) {
+                            const view = this.host.core.pixi.app.view;
+                            const viewRect = view.getBoundingClientRect();
+                            const { world } = this.getWorldTransform();
+                            // getBoundingClientRect в CSS pixels; viewRect тоже; разность —
+                            // глобальные PIXI-координаты (toGlobal/toLocal работают в CSS px).
+                            const tl = world.toLocal(new PIXI.Point(r.left - viewRect.left, r.top - viewRect.top));
+                            const br = world.toLocal(new PIXI.Point(r.right - viewRect.left, r.bottom - viewRect.top));
+                            return {
+                                x: Math.min(tl.x, br.x),
+                                y: Math.min(tl.y, br.y),
+                                width: Math.max(1, Math.abs(br.x - tl.x)),
+                                height: Math.max(1, Math.abs(br.y - tl.y)),
+                            };
+                        }
+                    } catch (_) {}
+                }
+            }
+        }
+
         const positionData = { objectId: id, position: null };
         const sizeData = { objectId: id, size: null };
         this.host.eventBus.emit(Events.Tool.GetObjectPosition, positionData);
@@ -199,8 +234,8 @@ export class HandlesPositioningService {
         const screenX = centerX - offsetLeft;
         const screenY = centerY - offsetTop;
         return {
-            x: ((screenX * rendererRes) - tx) / s,
-            y: ((screenY * rendererRes) - ty) / s,
+            x: (screenX - tx) / s,
+            y: (screenY - ty) / s,
         };
     }
 }