@sequent-org/moodboard 1.3.5 → 1.4.1

package/src/grid/LineGrid.js

@@ -1,4 +1,6 @@
 import { BaseGrid } from './BaseGrid.js';
+import { getScreenAnchor } from './ScreenGridPhaseMachine.js';
+import { resolveLineGridState } from './LineGridZoomPhases.js';
 
 /**
  * Линейная прямоугольная сетка
@@ -7,16 +9,30 @@ export class LineGrid extends BaseGrid {
     constructor(options = {}) {
         super(options);
         this.type = 'line';
-        
-        // Дополнительные настройки для линейной сетки
-        // Параметры не задаём по умолчанию здесь — их поставляет GridFactory.
-        this.showSubGrid = options.showSubGrid;
-        this.subGridDivisions = options.subGridDivisions;
-        this.subGridColor = options.subGridColor;
-        this.subGridOpacity = options.subGridOpacity;
-        this.lineWidth = options.lineWidth;
-        this.color = options.color;
-        this.opacity = options.opacity;
+
+        // Жесткий Miro-профиль line-grid: не зависим от сохраненных override.
+        this.showSubGrid = false;
+        this.subGridDivisions = 0;
+        this.subGridColor = 0xFEFEFE;
+        this.subGridOpacity = 1;
+        this.bigGridColor = 0xECECEC;
+        this.bigGridOpacity = 1;
+        this.lineWidth = 1;
+        this.color = 0xF4F4F4;
+        this.opacity = 1;
+
+        this._majorAnchorX = null;
+        this._majorAnchorY = null;
+        this._majorStepX = null;
+        this._majorStepY = null;
+        this._minorAnchorX = null;
+        this._minorAnchorY = null;
+        this._minorStepX = null;
+        this._minorStepY = null;
+        this._majorCursorOffsetX = 0;
+        this._majorCursorOffsetY = 0;
+        this._minorCursorOffsetX = 0;
+        this._minorCursorOffsetY = 0;
     }
     
     /**
@@ -27,20 +43,26 @@ export class LineGrid extends BaseGrid {
         if (typeof this.opacity === 'number') {
             this.graphics.alpha = this.opacity;
         }
+        const state = this.getScreenGridState();
         try {
-            // В новых версиях можно указать alignment для большей чёткости
-            this.graphics.lineStyle({ width: this.lineWidth, color: this.color, alpha: 1, alignment: 0.5 });
+            this.graphics.lineStyle({
+                width: Math.max(1, Math.round(this.lineWidth || 1)),
+                color: this.color,
+                alpha: 1,
+                alignment: 0
+            });
         } catch (_) {
-            this.graphics.lineStyle(this.lineWidth, this.color, 1);
+            this.graphics.lineStyle(Math.max(1, Math.round(this.lineWidth || 1)), this.color, 1);
         }
         
         // Основные линии сетки
         this.drawMainGrid();
-        
-        // Дополнительная подсетка
-        if (this.showSubGrid) {
-            this.drawSubGrid();
+
+        // Вторая (крупная) сетка.
+        if ((state.secondGridStep || 0) > 0) {
+            this.drawSecondGrid();
         }
+        
     }
     
     /**
@@ -48,21 +70,32 @@ export class LineGrid extends BaseGrid {
      */
     drawMainGrid() {
         const b = this.getDrawBounds();
-        const step = this.size;
-        const half = this.lineWidth / 2;
-        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;
+        const { screenStep } = this.getScreenGridState();
+        const step = Math.max(1, screenStep);
+        const worldX = this.viewportTransform?.worldX || 0;
+        const worldY = this.viewportTransform?.worldY || 0;
+        const cursorX = this.viewportTransform?.zoomCursorX;
+        const cursorY = this.viewportTransform?.zoomCursorY;
+        const useCursorAnchor = this.viewportTransform?.useCursorAnchor === true;
+        const anchorX = this._resolveScreenAnchor('x', worldX, step, cursorX, useCursorAnchor, 'major');
+        const anchorY = this._resolveScreenAnchor('y', worldY, step, cursorY, useCursorAnchor, 'major');
+        const alignStart = (min, anchor) => {
+            const d = ((anchor - min) % step + step) % step;
+            return min + d;
+        };
+        const startX = alignStart(b.left, anchorX);
+        const endX = b.right + step;
+        const startY = alignStart(b.top, anchorY);
+        const endY = b.bottom + step;
         // Вертикальные линии
         for (let x = startX; x <= endX; x += step) {
-            const px = Math.round(x) + (Number.isFinite(half) ? 0.5 : 0);
+            const px = Math.round(x);
             this.graphics.moveTo(px, b.top);
             this.graphics.lineTo(px, b.bottom);
         }
         // Горизонтальные линии
         for (let y = startY; y <= endY; y += step) {
-            const py = Math.round(y) + (Number.isFinite(half) ? 0.5 : 0);
+            const py = Math.round(y);
             this.graphics.moveTo(b.left, py);
             this.graphics.lineTo(b.right, py);
         }
@@ -72,32 +105,136 @@ export class LineGrid extends BaseGrid {
      * Рисует подсетку (более мелкие линии)
      */
     drawSubGrid() {
-        const subSize = this.size / this.subGridDivisions;
+        const { screenStep, minorScreenStep } = this.getScreenGridState();
+        const subSize = Math.max(1, Math.round(minorScreenStep || (screenStep / this.subGridDivisions)));
         try {
-            this.graphics.lineStyle({ width: 0.5, color: this.subGridColor, alpha: this.subGridOpacity, alignment: 0.5 });
+            this.graphics.lineStyle({
+                width: 1,
+                color: this.subGridColor,
+                alpha: this.subGridOpacity,
+                alignment: 0
+            });
         } catch (_) {
-            this.graphics.lineStyle(0.5, this.subGridColor, this.subGridOpacity);
+            this.graphics.lineStyle(1, this.subGridColor, this.subGridOpacity);
         }
         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;
+        const worldX = this.viewportTransform?.worldX || 0;
+        const worldY = this.viewportTransform?.worldY || 0;
+        const cursorX = this.viewportTransform?.zoomCursorX;
+        const cursorY = this.viewportTransform?.zoomCursorY;
+        const useCursorAnchor = this.viewportTransform?.useCursorAnchor === true;
+        const anchorX = this._resolveScreenAnchor('x', worldX, subSize, cursorX, useCursorAnchor, 'minor');
+        const anchorY = this._resolveScreenAnchor('y', worldY, subSize, cursorY, useCursorAnchor, 'minor');
+        const alignStart = (min, anchor) => {
+            const d = ((anchor - min) % subSize + subSize) % subSize;
+            return min + d;
+        };
+        const startX = alignStart(b.left, anchorX);
+        const endX = b.right + subSize;
+        const startY = alignStart(b.top, anchorY);
+        const endY = b.bottom + subSize;
+        const majorStep = Math.max(1, screenStep);
+        const majorAnchorX = this._resolveScreenAnchor('x', worldX, majorStep, cursorX, useCursorAnchor, 'major');
+        const majorAnchorY = this._resolveScreenAnchor('y', worldY, majorStep, cursorY, useCursorAnchor, 'major');
+        const isOnMajor = (value, major, anchor) => {
+            const rel = (value - anchor) / major;
+            return Math.abs(rel - Math.round(rel)) < 1e-4;
+        };
         for (let x = startX; x <= endX; x += subSize) {
-            if (x % this.size !== 0) {
-                const px = Math.round(x) + 0.5;
+            if (!isOnMajor(x, majorStep, majorAnchorX)) {
+                const px = Math.round(x);
                 this.graphics.moveTo(px, b.top);
                 this.graphics.lineTo(px, b.bottom);
             }
         }
         for (let y = startY; y <= endY; y += subSize) {
-            if (y % this.size !== 0) {
-                const py = Math.round(y) + 0.5;
+            if (!isOnMajor(y, majorStep, majorAnchorY)) {
+                const py = Math.round(y);
                 this.graphics.moveTo(b.left, py);
                 this.graphics.lineTo(b.right, py);
             }
         }
     }
+
+    drawSecondGrid() {
+        const { secondGridStep } = this.getScreenGridState();
+        const step = Math.max(1, Math.round(secondGridStep || 0));
+        if (step <= 0) return;
+        try {
+            this.graphics.lineStyle({
+                width: 1,
+                color: this.bigGridColor,
+                alpha: this.bigGridOpacity,
+                alignment: 0
+            });
+        } catch (_) {
+            this.graphics.lineStyle(1, this.bigGridColor, this.bigGridOpacity);
+        }
+        const b = this.getDrawBounds();
+        const worldX = this.viewportTransform?.worldX || 0;
+        const worldY = this.viewportTransform?.worldY || 0;
+        const cursorX = this.viewportTransform?.zoomCursorX;
+        const cursorY = this.viewportTransform?.zoomCursorY;
+        const useCursorAnchor = this.viewportTransform?.useCursorAnchor === true;
+        const anchorX = this._resolveScreenAnchor('x', worldX, step, cursorX, useCursorAnchor, 'major');
+        const anchorY = this._resolveScreenAnchor('y', worldY, step, cursorY, useCursorAnchor, 'major');
+        const alignStart = (min, anchor) => {
+            const d = ((anchor - min) % step + step) % step;
+            return min + d;
+        };
+        const startX = alignStart(b.left, anchorX);
+        const endX = b.right + step;
+        const startY = alignStart(b.top, anchorY);
+        const endY = b.bottom + step;
+        for (let x = startX; x <= endX; x += step) {
+            const px = Math.round(x);
+            this.graphics.moveTo(px, b.top);
+            this.graphics.lineTo(px, b.bottom);
+        }
+        for (let y = startY; y <= endY; y += step) {
+            const py = Math.round(y);
+            this.graphics.moveTo(b.left, py);
+            this.graphics.lineTo(b.right, py);
+        }
+    }
+
+    _normalizeAnchor(anchor, stepPx) {
+        const step = Math.max(1, Math.round(stepPx));
+        return ((Math.round(anchor) % step) + step) % step;
+    }
+
+    _resolveScreenAnchor(axis, worldOffset, stepPx, cursorPx, useCursorAnchor, layer) {
+        const step = Math.max(1, Math.round(stepPx));
+        const anchorKey = `_${layer}Anchor${axis === 'x' ? 'X' : 'Y'}`;
+        const stepKey = `_${layer}Step${axis === 'x' ? 'X' : 'Y'}`;
+        const cursorOffsetKey = `_${layer}CursorOffset${axis === 'x' ? 'X' : 'Y'}`;
+        const raw = this._normalizeAnchor(getScreenAnchor(worldOffset, step), step);
+        if (useCursorAnchor && Number.isFinite(cursorPx)) {
+            const prevAnchor = Number(this[anchorKey]);
+            const prevStep = Math.max(1, Math.round(Number(this[stepKey]) || step));
+            if (Number.isFinite(prevAnchor)) {
+                this[cursorOffsetKey] = this._normalizeAnchor(Math.round(cursorPx) - prevAnchor, prevStep);
+            } else if (!Number.isFinite(this[cursorOffsetKey])) {
+                this[cursorOffsetKey] = 0;
+            }
+            const offset = this._normalizeAnchor(this[cursorOffsetKey], step);
+            const locked = this._normalizeAnchor(Math.round(cursorPx) - offset, step);
+            this[anchorKey] = locked;
+            this[stepKey] = step;
+            return locked;
+        }
+        this[anchorKey] = raw;
+        this[stepKey] = step;
+        return raw;
+    }
+
+    getScreenGridState() {
+        return resolveLineGridState(this._zoom, {
+            minScreenSpacing: this.minScreenSpacing,
+            phases: this.screenPhases,
+            subGridDivisions: this.subGridDivisions,
+        });
+    }
     
     /**
      * Вычисляет точку привязки для линейной сетки
@@ -134,7 +271,9 @@ export class LineGrid extends BaseGrid {
             showSubGrid: this.showSubGrid,
             subGridDivisions: this.subGridDivisions,
             subGridColor: this.subGridColor,
-            subGridOpacity: this.subGridOpacity
+            subGridOpacity: this.subGridOpacity,
+            bigGridColor: this.bigGridColor,
+            bigGridOpacity: this.bigGridOpacity
         };
     }
 }

package/src/grid/LineGridZoomPhases.js

@@ -0,0 +1,163 @@
+import { resolveScreenGridState } from './ScreenGridPhaseMachine.js';
+
+function clampZoom(zoom) {
+    return Math.max(0.01, Math.min(5, zoom || 1));
+}
+
+const MAJOR_SCREEN_POINTS = [
+    { zoomPercent: 1.4, majorPx: 17 },
+    { zoomPercent: 1.6, majorPx: 20 },
+    { zoomPercent: 1.8, majorPx: 22 },
+    { zoomPercent: 2.0, majorPx: 25 },
+    { zoomPercent: 2.2, majorPx: 27 },
+    { zoomPercent: 2.4, majorPx: 31 },
+    { zoomPercent: 2.6, majorPx: 35 },
+    { zoomPercent: 3.0, majorPx: 39 },
+    { zoomPercent: 3.4, majorPx: 44 },
+    { zoomPercent: 3.6, majorPx: 49 },
+    { zoomPercent: 4.0, majorPx: 55 },
+    { zoomPercent: 4.6, majorPx: 60 }, // label 5 (second pass), single grid
+    { zoomPercent: 5.4, majorPx: 17 }, // label 5 (first pass), double grid
+    { zoomPercent: 6.0, majorPx: 20 },
+    { zoomPercent: 7.0, majorPx: 22 },
+    { zoomPercent: 7.6, majorPx: 24 }, // label 8 (second pass)
+    { zoomPercent: 8.4, majorPx: 27 }, // label 8 (first pass)
+    { zoomPercent: 10.0, majorPx: 30 },
+    { zoomPercent: 11.0, majorPx: 34 },
+    { zoomPercent: 12.0, majorPx: 38 },
+    { zoomPercent: 13.0, majorPx: 42 },
+    { zoomPercent: 15.0, majorPx: 48 },
+    { zoomPercent: 17.0, majorPx: 54 },
+    { zoomPercent: 19.0, majorPx: 60 }, // single grid
+    { zoomPercent: 21.0, majorPx: 17 },
+    { zoomPercent: 24.0, majorPx: 19 },
+    { zoomPercent: 26.0, majorPx: 21 },
+    { zoomPercent: 30.0, majorPx: 24 },
+    { zoomPercent: 33.0, majorPx: 26 },
+    { zoomPercent: 37.0, majorPx: 30 },
+    { zoomPercent: 41.0, majorPx: 33 },
+    { zoomPercent: 46.0, majorPx: 37 },
+    { zoomPercent: 52.0, majorPx: 42 },
+    { zoomPercent: 58.0, majorPx: 46 },
+    { zoomPercent: 65.0, majorPx: 52 },
+    { zoomPercent: 73, majorPx: 60 },
+    { zoomPercent: 82, majorPx: 16 },
+    { zoomPercent: 92, majorPx: 18 },
+    { zoomPercent: 103, majorPx: 20 },
+    { zoomPercent: 115, majorPx: 23 },
+    { zoomPercent: 129, majorPx: 25 },
+    { zoomPercent: 144, majorPx: 30 },
+    { zoomPercent: 162, majorPx: 35 },
+    { zoomPercent: 181, majorPx: 35 },
+    { zoomPercent: 203, majorPx: 40 },
+    { zoomPercent: 227, majorPx: 45 },
+    { zoomPercent: 254, majorPx: 50 },
+    { zoomPercent: 285, majorPx: 60 },
+    { zoomPercent: 319, majorPx: 64 },
+    { zoomPercent: 357, majorPx: 70 },
+    { zoomPercent: 400, majorPx: 80 },
+];
+
+function interpolateMajorStep(zoomPercent) {
+    if (zoomPercent <= MAJOR_SCREEN_POINTS[0].zoomPercent) {
+        const ratio = zoomPercent / MAJOR_SCREEN_POINTS[0].zoomPercent;
+        return Math.max(1, Math.round(MAJOR_SCREEN_POINTS[0].majorPx * ratio));
+    }
+    if (zoomPercent >= MAJOR_SCREEN_POINTS[MAJOR_SCREEN_POINTS.length - 1].zoomPercent) {
+        const ratio = zoomPercent / MAJOR_SCREEN_POINTS[MAJOR_SCREEN_POINTS.length - 1].zoomPercent;
+        return Math.max(1, Math.round(MAJOR_SCREEN_POINTS[MAJOR_SCREEN_POINTS.length - 1].majorPx * ratio));
+    }
+
+    for (let i = 0; i < MAJOR_SCREEN_POINTS.length - 1; i += 1) {
+        const a = MAJOR_SCREEN_POINTS[i];
+        const b = MAJOR_SCREEN_POINTS[i + 1];
+        if (zoomPercent >= a.zoomPercent && zoomPercent <= b.zoomPercent) {
+            const t = (zoomPercent - a.zoomPercent) / (b.zoomPercent - a.zoomPercent);
+            const value = a.majorPx + (b.majorPx - a.majorPx) * t;
+            return Math.max(1, Math.round(value));
+        }
+    }
+    return Math.max(1, Math.round(resolveScreenGridState(zoomPercent / 100).screenStep));
+}
+
+function normalizeZoomPercent(zoomPercent) {
+    return Math.round(zoomPercent * 10) / 10;
+}
+
+const EXACT_MAJOR_BY_PERCENT = new Map(
+    MAJOR_SCREEN_POINTS.map((row) => [normalizeZoomPercent(row.zoomPercent), row.majorPx])
+);
+
+/**
+ * Профиль line-grid под наблюдаемые checkpoint'ы из MIRO_LINE_GRID.md.
+ * Возвращает major/minor screen-step и видимость подсетки.
+ */
+export function resolveLineGridState(zoom, options = {}) {
+    const z = clampZoom(zoom);
+    const base = resolveScreenGridState(z, options);
+    const zoomPercent = z * 100;
+
+    const roundedPercent = Math.round(zoomPercent);
+    const normalizedPercent = normalizeZoomPercent(zoomPercent);
+    let majorScreenStep = EXACT_MAJOR_BY_PERCENT.get(normalizedPercent) ?? interpolateMajorStep(zoomPercent);
+    const minorScreenStep = null;
+    const showSubGridByZoom = false;
+    const hasSecondGridByRoundedPercent =
+        roundedPercent === 254 ||
+        roundedPercent === 227 ||
+        roundedPercent === 203 ||
+        roundedPercent === 181 ||
+        roundedPercent === 162 ||
+        roundedPercent === 144 ||
+        roundedPercent === 129 ||
+        roundedPercent === 115 ||
+        roundedPercent === 103 ||
+        roundedPercent === 92 ||
+        roundedPercent === 82 ||
+        roundedPercent === 65 ||
+        roundedPercent === 58 ||
+        roundedPercent === 52 ||
+        roundedPercent === 46 ||
+        roundedPercent === 41 ||
+        roundedPercent === 37;
+    const hasSecondGridByExactPercent =
+        normalizedPercent === 33.0 ||
+        normalizedPercent === 30.0 ||
+        normalizedPercent === 26.0 ||
+        normalizedPercent === 24.0 ||
+        normalizedPercent === 21.0 ||
+        normalizedPercent === 17.0 ||
+        normalizedPercent === 15.0 ||
+        normalizedPercent === 13.0 ||
+        normalizedPercent === 12.0 ||
+        normalizedPercent === 11.0 ||
+        normalizedPercent === 10.0 ||
+        normalizedPercent === 8.4 ||
+        normalizedPercent === 7.6 ||
+        normalizedPercent === 7.0 ||
+        normalizedPercent === 6.0 ||
+        normalizedPercent === 5.4 ||
+        normalizedPercent === 65.0 ||
+        normalizedPercent === 58.0 ||
+        normalizedPercent === 52.0 ||
+        normalizedPercent === 46.0 ||
+        normalizedPercent === 41.0 ||
+        normalizedPercent === 37.0;
+    const hasSecondGrid = hasSecondGridByRoundedPercent || hasSecondGridByExactPercent;
+    const hasSecondGridForUltraLowZoom = normalizedPercent < 5.0 && normalizedPercent !== 4.6;
+    const secondGridStep = (roundedPercent === 100 || hasSecondGrid)
+        || hasSecondGridForUltraLowZoom
+        ? Math.max(1, Math.round(majorScreenStep * 4))
+        : null;
+
+    return {
+        ...base,
+        screenStep: majorScreenStep,
+        majorScreenStep,
+        minorScreenStep,
+        secondGridStep,
+        showSubGridByZoom,
+        subDivisions: 0,
+    };
+}
+

package/src/grid/ScreenGridPhaseMachine.js

@@ -0,0 +1,51 @@
+/**
+ * Общая state machine для screen-grid.
+ * Возвращает world-step активной фазы и screen-step (px) для текущего zoom.
+ */
+
+/** @type {{ zoomMin: number, zoomMax: number, worldStep: number }[]} */
+const DEFAULT_PHASES = [
+    { zoomMin: 0.02, zoomMax: 0.12, worldStep: 160 },
+    { zoomMin: 0.12, zoomMax: 0.25, worldStep: 80 },
+    { zoomMin: 0.25, zoomMax: 0.5, worldStep: 40 },
+    { zoomMin: 0.5, zoomMax: 5, worldStep: 20 },
+];
+
+function clampZoom(zoom) {
+    return Math.max(0.02, Math.min(5, zoom || 1));
+}
+
+function pickPhase(zoom, phases = DEFAULT_PHASES) {
+    const z = clampZoom(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;
+    }
+    return phases[phases.length - 1];
+}
+
+export function resolveScreenGridState(zoom, options = {}) {
+    const z = clampZoom(zoom);
+    const phases = options.phases || DEFAULT_PHASES;
+    const minScreenSpacing = options.minScreenSpacing ?? 8;
+    const phase = pickPhase(z, phases);
+    const worldStep = phase.worldStep;
+    const screenStep = Math.max(minScreenSpacing, worldStep * z);
+    return { zoom: z, phase, worldStep, screenStep };
+}
+
+export function getScreenAnchor(worldOffset, stepPx) {
+    const step = Math.max(1e-6, stepPx || 1);
+    const mod = worldOffset % step;
+    return mod < 0 ? mod + step : mod;
+}
+
+export function snapScreenValue(valuePx, anchorPx, stepPx) {
+    const step = Math.max(1e-6, stepPx || 1);
+    return Math.round((valuePx - anchorPx) / step) * step + anchorPx;
+}
+
+export { DEFAULT_PHASES };