@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/grid/DotGrid.js

@@ -1,47 +1,98 @@
 import { BaseGrid } from './BaseGrid.js';
+import { getActivePhases, getEffectiveSize } from './DotGridZoomPhases.js';
 
 /**
- * Точечная сетка
+ * Точечная сетка с фазовым переключением при зуме (как в Miro).
+ * При переходе между фазами точки затухают, на смену приходит другой набор.
  */
 export class DotGrid extends BaseGrid {
     constructor(options = {}) {
         super(options);
         this.type = 'dot';
         
-        // Настройки точек
-        this.dotSize = options.dotSize || 2;
         this.dotStyle = options.dotStyle || 'circle'; // 'circle' | 'square'
         this.highlightIntersections = options.highlightIntersections ?? true;
-        // Пересечения делаем такими же, как обычные точки по умолчанию
-        this.intersectionSize = options.intersectionSize || this.dotSize;
-        this.intersectionColor = options.intersectionColor || this.color;
+        this.dotSize = options.dotSize ?? 1; // для serialize/setDotSize; фазы переопределяют при отрисовке
+        this.snapSize = options.snapSize ?? 20; // фиксированный шаг привязки в world-координатах
+        // Порог видимости точки на экране и лимит плотности отрисовки.
+        this.minScreenDotRadius = options.minScreenDotRadius ?? 0.45;
+        this.minScreenSpacing = options.minScreenSpacing ?? 8;
+        this.maxDotsPerPhase = options.maxDotsPerPhase ?? 25000;
+        this.intersectionSize = options.intersectionSize ?? this.dotSize;
+        this.intersectionColor = options.intersectionColor ?? this.color;
+
+        /** Текущий zoom (scale) для выбора фазы. 1 = 100%. */
+        this._zoom = 1;
+    }
+
+    /**
+     * Устанавливает текущий масштаб (для фазового переключения).
+     * @param {number} scale - world.scale.x (1 = 100%)
+     */
+    setZoom(scale) {
+        this._zoom = Math.max(0.02, Math.min(5, scale));
+    }
+
+    /** @returns {Array<{ phase: object, alpha: number }>} */
+    _getActivePhases() {
+        return getActivePhases(this._zoom);
+    }
+
+    /** @returns {number} */
+    _getEffectiveSize() {
+        return getEffectiveSize(this._zoom);
     }
     
     /**
      * Создает визуальное представление точечной сетки
      */
     createVisual() {
-        // Рисуем обычные точки
-        this.drawDots();
-        
-        // Выделение пересечений отключено для равномерного тона точек (как в Miro)
-        // if (this.highlightIntersections) {
-        //     this.drawIntersections();
-        // }
+        this.size = this._getEffectiveSize();
+        const phases = this._getActivePhases();
+        const baseOpacity = this.opacity ?? 0.7;
+        for (const { phase, alpha } of phases) {
+            this._drawPhaseDots(phase, baseOpacity * alpha);
+        }
     }
-    
+
     /**
-     * Рисует основные точки сетки
+     * Рисует точки одной фазы с заданной прозрачностью.
      */
-    drawDots() {
-        this.graphics.beginFill(this.color);
-        
-        for (let x = 0; x <= this.width; x += this.size) {
-            for (let y = 0; y <= this.height; y += this.size) {
-                this.drawDot(x, y, this.dotSize);
+    _drawPhaseDots(phase, alpha) {
+        const b = this.getDrawBounds();
+        const scale = Math.max(0.001, this._zoom || 1);
+        const baseSize = phase.size;
+        const minWorldSpacing = this.minScreenSpacing / scale;
+        let size = Math.max(baseSize, minWorldSpacing);
+
+        const widthWorld = Math.max(0, b.right - b.left);
+        const heightWorld = Math.max(0, b.bottom - b.top);
+        const estimateDots = () => {
+            const nx = Math.floor(widthWorld / size) + 3;
+            const ny = Math.floor(heightWorld / size) + 3;
+            return nx * ny;
+        };
+        const dots = estimateDots();
+        if (dots > this.maxDotsPerPhase) {
+            const densityFactor = Math.sqrt(dots / this.maxDotsPerPhase);
+            size *= Math.max(1, densityFactor);
+        }
+
+        const startX = Math.floor(b.left / size) * size;
+        const startY = Math.floor(b.top / size) * size;
+        const endX = Math.ceil(b.right / size) * size;
+        const endY = Math.ceil(b.bottom / size) * size;
+
+        const minWorldRadius = this.minScreenDotRadius / scale;
+        const maxWorldRadius = size * 0.2;
+        const dotSize = Math.min(Math.max(phase.dotSize, minWorldRadius), maxWorldRadius);
+
+        this.graphics.beginFill(this.color, alpha);
+        for (let x = startX; x <= endX; x += size) {
+            for (let y = startY; y <= endY; y += size) {
+                this.drawDot(x, y, dotSize);
             }
         }
-        
         this.graphics.endFill();
     }
     
@@ -50,16 +101,17 @@ export class DotGrid extends BaseGrid {
      */
     drawIntersections() {
         const intersectionStep = this.size * 5;
-        
-        // Используем те же параметры, что и у обычных точек
+        const b = this.getDrawBounds();
+        const startX = Math.floor(b.left / intersectionStep) * intersectionStep;
+        const startY = Math.floor(b.top / intersectionStep) * intersectionStep;
+        const endX = Math.ceil(b.right / intersectionStep) * intersectionStep;
+        const endY = Math.ceil(b.bottom / intersectionStep) * intersectionStep;
         this.graphics.beginFill(this.color);
-        
-        for (let x = 0; x <= this.width; x += intersectionStep) {
-            for (let y = 0; y <= this.height; y += intersectionStep) {
+        for (let x = startX; x <= endX; x += intersectionStep) {
+            for (let y = startY; y <= endY; y += intersectionStep) {
                 this.drawDot(x, y, this.dotSize);
             }
         }
-        
         this.graphics.endFill();
     }
     
@@ -79,8 +131,9 @@ export class DotGrid extends BaseGrid {
      * Вычисляет точку привязки для точечной сетки
      */
     calculateSnapPoint(x, y) {
-        const snapX = Math.round(x / this.size) * this.size;
-        const snapY = Math.round(y / this.size) * this.size;
+        const step = this.snapSize || this.size;
+        const snapX = Math.round(x / step) * step;
+        const snapY = Math.round(y / step) * step;
         
         return { x: snapX, y: snapY };
     }
@@ -98,11 +151,10 @@ export class DotGrid extends BaseGrid {
     }
     
     /**
-     * Устанавливает размер точек
+     * Устанавливает размер точек (для совместимости; при фазовом зуме фазы переопределяют размер).
      */
     setDotSize(size) {
-        this.dotSize = Math.max(1, size);
-        // Синхронизируем размер точек пересечений
+        this.dotSize = Math.max(0.5, size);
         this.intersectionSize = this.dotSize;
         this.updateVisual();
     }
@@ -140,6 +192,10 @@ export class DotGrid extends BaseGrid {
             ...super.serialize(),
             dotSize: this.dotSize,
             dotStyle: this.dotStyle,
+            snapSize: this.snapSize,
+            minScreenDotRadius: this.minScreenDotRadius,
+            minScreenSpacing: this.minScreenSpacing,
+            maxDotsPerPhase: this.maxDotsPerPhase,
             highlightIntersections: this.highlightIntersections,
             intersectionSize: this.intersectionSize,
             intersectionColor: this.intersectionColor

package/src/grid/DotGridZoomPhases.js

@@ -0,0 +1,42 @@
+/**
+ * Логика фаз точечной сетки при зуме (чистые функции, тестируемые без PIXI).
+ * Фазы подобраны по зафиксированным checkpoint'ам Miro:
+ * - high zoom: базовый шаг 20 world units;
+ * - low zoom: шаг укрупняется, чтобы избежать перегруза при отрисовке.
+ */
+
+/** @type {{ zoomMin: number, zoomMax: number, size: number, dotSize: number }[]} */
+export const PHASES = [
+    { zoomMin: 0.02, zoomMax: 0.12, size: 160, dotSize: 0.7 },
+    { zoomMin: 0.12, zoomMax: 0.25, size: 80, dotSize: 0.8 },
+    { zoomMin: 0.25, zoomMax: 0.5, size: 40, dotSize: 0.9 },
+    { zoomMin: 0.5, zoomMax: 5, size: 20, dotSize: 1 }
+];
+
+/**
+ * Возвращает активные фазы и их alpha для crossfade.
+ * @param {number} zoom - world.scale.x (1 = 100%)
+ * @returns {Array<{ phase: object, alpha: number }>}
+ */
+export function getActivePhases(zoom) {
+    const z = Math.max(0.02, Math.min(5, zoom));
+    for (let i = 0; i < PHASES.length; i++) {
+        const phase = PHASES[i];
+        const inRange = i === PHASES.length - 1
+            ? (z >= phase.zoomMin && z <= phase.zoomMax)
+            : (z >= phase.zoomMin && z < phase.zoomMax);
+        if (inRange) {
+            return [{ phase, alpha: 1 }];
+        }
+    }
+    return [{ phase: PHASES[PHASES.length - 1], alpha: 1 }];
+}
+
+/**
+ * Эффективный size для snap (доминирующая фаза).
+ * @param {number} zoom
+ * @returns {number}
+ */
+export function getEffectiveSize(zoom) {
+    return getActivePhases(zoom)[0].phase.size;
+}

package/src/grid/LineGrid.js

@@ -47,23 +47,24 @@ export class LineGrid extends BaseGrid {
      * Рисует основную сетку
      */
     drawMainGrid() {
-        const w = this.width;
-        const h = this.height;
+        const b = this.getDrawBounds();
         const step = this.size;
         const half = this.lineWidth / 2;
-        // Выравниваем к половине пикселя для чётких линий на любых DPI
+        const startX = Math.floor(b.left / step) * step;
+        const endX = Math.ceil(b.right / step) * step;
+        const startY = Math.floor(b.top / step) * step;
+        const endY = Math.ceil(b.bottom / step) * step;
         // Вертикальные линии
-        for (let x = 0; x <= w; x += step) {
+        for (let x = startX; x <= endX; x += step) {
             const px = Math.round(x) + (Number.isFinite(half) ? 0.5 : 0);
-            this.graphics.moveTo(px, 0);
-            this.graphics.lineTo(px, h);
+            this.graphics.moveTo(px, b.top);
+            this.graphics.lineTo(px, b.bottom);
         }
-        
         // Горизонтальные линии
-        for (let y = 0; y <= h; y += step) {
+        for (let y = startY; y <= endY; y += step) {
             const py = Math.round(y) + (Number.isFinite(half) ? 0.5 : 0);
-            this.graphics.moveTo(0, py);
-            this.graphics.lineTo(w, py);
+            this.graphics.moveTo(b.left, py);
+            this.graphics.lineTo(b.right, py);
         }
     }
     
@@ -77,23 +78,23 @@ export class LineGrid extends BaseGrid {
         } catch (_) {
             this.graphics.lineStyle(0.5, this.subGridColor, this.subGridOpacity);
         }
-        const w = this.width;
-        const h = this.height;
-        // Вертикальные подлинии
-        for (let x = subSize; x < w; x += subSize) {
+        const b = this.getDrawBounds();
+        const startX = Math.floor(b.left / subSize) * subSize;
+        const endX = Math.ceil(b.right / subSize) * subSize;
+        const startY = Math.floor(b.top / subSize) * subSize;
+        const endY = Math.ceil(b.bottom / subSize) * subSize;
+        for (let x = startX; x <= endX; x += subSize) {
             if (x % this.size !== 0) {
                 const px = Math.round(x) + 0.5;
-                this.graphics.moveTo(px, 0);
-                this.graphics.lineTo(px, h);
+                this.graphics.moveTo(px, b.top);
+                this.graphics.lineTo(px, b.bottom);
             }
         }
-        
-        // Горизонтальные подлинии
-        for (let y = subSize; y < h; y += subSize) {
+        for (let y = startY; y <= endY; y += subSize) {
             if (y % this.size !== 0) {
                 const py = Math.round(y) + 0.5;
-                this.graphics.moveTo(0, py);
-                this.graphics.lineTo(w, py);
+                this.graphics.moveTo(b.left, py);
+                this.graphics.lineTo(b.right, py);
             }
         }
     }