kingkont 0.13.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "KingKont · Chatium — нод-редактор сцен с AI-генерацией (картинки/видео/голос/SFX/музыка/текст)",
   "main": "main.js",
   "bin": {

package/renderer/media.js

@@ -14,31 +14,59 @@ const _canvasFrame = $('canvasFrame');
 // layout-affecting свойство, его смена на каждом wheel-tick форсила 751ms Layout.
 // Транформ на canvas идёт через GPU (will-change: transform → composited),
 // scroll-bounds во время burst могут быть слегка off, на idle подстраиваются.
+// Канвас-frame теперь с padding'ом вокруг .canvas (см. styles.css
+// .canvas-frame --canvas-pad-x/y). Координаты:
+//   - frame-coords: 0..(6000*z + 2*padX). Лево-верх frame = (0,0).
+//   - canvas-coords: 0..6000 (до scale). Канвас расположен в frame'е
+//     по offset (padX, padY) и масштабирован transform: scale(z).
+//   - mouseInFrame = scrollLeft + (mouseClient - wrapClient)
+//   - contentCoord = (mouseInFrame - padX) / z
+function _getFramePadding() {
+  const cs = getComputedStyle(_canvasFrame);
+  return {
+    padX: parseInt(cs.getPropertyValue('--canvas-pad-x')) || 0,
+    padY: parseInt(cs.getPropertyValue('--canvas-pad-y')) || 0,
+  };
+}
 let _frameSizeTimer = null;
 function applyZoomStyles(z) {
   canvas.style.transform = `scale(${z})`;
   clearTimeout(_frameSizeTimer);
   _frameSizeTimer = setTimeout(() => {
     _frameSizeTimer = null;
-    _canvasFrame.style.width  = (6000 * z) + 'px';
-    _canvasFrame.style.height = (4000 * z) + 'px';
+    const { padX, padY } = _getFramePadding();
+    // Frame-размер = scaled-canvas + padding с обеих сторон.
+    // Раньше padding не учитывался → frame ужимался при zoom-out → весь
+    // padding-skill терялся, ноды с отрицательными coord'ами становились
+    // неперехватываемыми скроллом.
+    _canvasFrame.style.width  = (6000 * z + 2 * padX) + 'px';
+    _canvasFrame.style.height = (4000 * z + 2 * padY) + 'px';
   }, 200);
 }
 function applyZoom(nextZoom, anchorClientX, anchorClientY) {
   nextZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, nextZoom));
   if (nextZoom === state.zoom) return;
   const rect = canvasWrap.getBoundingClientRect();
-  // Если якорь не задан — берём центр видимой области
+  const { padX, padY } = _getFramePadding();
+  // Якорь = mouse client coord (или центр если не задан).
   const ax = anchorClientX ?? (rect.left + rect.width / 2);
   const ay = anchorClientY ?? (rect.top + rect.height / 2);
-  const visualX = canvasWrap.scrollLeft + (ax - rect.left);
-  const visualY = canvasWrap.scrollTop  + (ay - rect.top);
-  const contentX = visualX / state.zoom;
-  const contentY = visualY / state.zoom;
+  // mouse внутри wrap (без учёта scroll).
+  const mouseWrapX = ax - rect.left;
+  const mouseWrapY = ay - rect.top;
+  // mouse в frame-coords (со scroll).
+  const mouseFrameX = canvasWrap.scrollLeft + mouseWrapX;
+  const mouseFrameY = canvasWrap.scrollTop  + mouseWrapY;
+  // mouse в canvas content-coords (вычитаем padding и делим на zoom).
+  const contentX = (mouseFrameX - padX) / state.zoom;
+  const contentY = (mouseFrameY - padY) / state.zoom;
   state.zoom = nextZoom;
   applyZoomStyles(nextZoom);
-  canvasWrap.scrollLeft = contentX * nextZoom - (ax - rect.left);
-  canvasWrap.scrollTop  = contentY * nextZoom - (ay - rect.top);
+  // После нового zoom: contentCoord должен оказаться там же где был курсор.
+  // newMouseFrame = contentCoord * nextZoom + padX
+  // newScrollLeft = newMouseFrame - mouseWrapX
+  canvasWrap.scrollLeft = contentX * nextZoom + padX - mouseWrapX;
+  canvasWrap.scrollTop  = contentY * nextZoom + padY - mouseWrapY;
   $('zoomLabel').textContent = Math.round(nextZoom * 100) + '%';
   scheduleViewSave();
 }