Learn_System/plans/sim-builder/IMPROVEMENTS.md

SimForge — раунд улучшений (визуал / графика / рабочее поле)

Branch: feature/sim-builder · Mode: Automated · Execution: Orchestrator · Strategy: Incremental Started: 2026-06-13

Полировка конструктора симуляций по всем направлениям. Каждая фаза — реализатор + независимый ревьюер, коммит поимённо. ⛔ Эмодзи нет (SVG .ic); ast-index/Read; общая ветка с параллельной сессией — править свои файлы движка/билдера, чужое (materials/quota) не трогать.

Контекст бага «съехало вправо»

_sim_engine.js._build рисует фикс-панель контролов width:260px СЛЕВА + сцену справа. У пустой/новой симуляции панель всё равно 260px → сцена и сетка визуально смещены вправо (правые ~70% хоста). _fit (DPR, центрирование по stage) корректен. Фикс — в раскладке (Фаза 1).

Фазы

• P1 — Рабочее поле (fix смещения + основа сцены). Контролы из фикс-260px-колонки → плавающая/ нижняя ненавязчивая панель (collapsible); canvas-сцена центрирована и во всю ширину. Сетка major/minor + числовые подписи осей + маркер origin. Zoom (колесо к курсору) + pan (drag пустого места) + кнопки fit/reset-view. Работает и в билдере, и в /lab, и на доске (один движок). Подтвердить DPR-резкость. Файлы: frontend/js/labs/_sim_engine.js (sim-builder.html НЕ потребовался — старый CSS превью .sbu-preview .sim-spec-root{position:absolute;inset:0} уже корректно растягивает новый full-bleed root).

  Handoff (P1 → P2):

  • Раскладка: _build теперь делает root (position:relative) → внутри stage (position:absolute; inset:0, canvas+labels на всю площадь) + плавающая panel (position:absolute;left/top:10px;z-index:5; pointer-events:auto, сворачивается кнопкой _togglePanel, есть только при наличии params) + бар кнопок вида (right/bottom:10px). Смещение вправо устранено: панель больше не отжимает сцену.
  • Transform-модель: _fit() считает БАЗУ _baseScale/_baseOffX/_baseOffY (центрированный fit) и ЭФФЕКТИВНЫЙ _scale/_offX/_offY. _zoom — пользовательский множитель к базе, _viewLocked — был ли zoom/pan (ресайз тогда сохраняет мир-центр и zoom, не сбрасывает вид). _toPx/_toWorld — без изменений сигнатур.
  • API вида (новое, публичное): inst.fitView() / inst.resetView() (оба → центрированный viewport). Внутреннее: _zoomAt(lx,ly,factor) (зум к экранной точке, инвариант мир-точки), _setupZoomPan(), _pickHandleAt(lx,ly) (вынесен из _setupDrag, общий хит-тест — pan стартует только если вернул null → приоритет ручек/тел сохранён), _visibleWorld(W,H).
  • Сетка/оси: _niceStep(targetPx) теперь завязан на _scale (адаптивен к zoom, шаги 1/2/5·10^n); _drawGrid рисует minor(~34px) + major(×5) через всю видимую область (_visibleWorld), линии на .5px (резкость, без «ступенек»); _drawAxes рисует оси (прижимаются к краю если 0 вне вида) + числовые подписи делений (светлый текст + тень для тёмного фона, хелперы _axisNum/_stepDecimals) + маркер origin (0,0).
  • destroy: снимает wheel + pan-листенеры (_onWheel/_onPanDown/_onPanMove/_onPanUp) и ResizeObserver.
  • На P2: качество графики ОБЪЕКТОВ (lineJoin/cap, стрелки векторов, dash/opacity/градиент/glow, стили точек, затухающие трассы) — это _drawObject/_drawTrail/_arrowHead/_drawPlot/_prepareObjects в том же файле. Поля стилей объектов уже читаются в _prepareObjects (color/fill/width) — расширять там.

• P2 — Качество графики объектов. Скругление/сглаживание линий (lineJoin/cap), красивые стрелки векторов, стили линий (solid/dashed/dotted), opacity, градиент-заливки, опц. тень/glow, стили точек (filled/hollow/cross), затухающие трассы; приятная дефолтная палитра. Файл: _sim_engine.js.

• P3 — Графики/диаграммы (визуал charts). Для plot: оси с делениями/подписями, несколько кривых, заливка под кривой, маркеры точек, легенда; аккуратный стиль диаграмм. Файл: _sim_engine.js (+ билдер поля plot).

• P4 — UI билдера + контролы стиля. Дизайн-полировка панелей/тулбара (ls.css), нативные color- пикеры + opacity/width/dash/линестиль на объект, z-order/дублирование/видимость объектов, пустые состояния, мобайл. Файлы: frontend/sim-builder.html, frontend/js/sim-builder.js.

• P5 — Прямое манипулирование на сцене + история. Drag всех типов (не только point/circle), snap-к-сетке, выравнивание; undo/redo в билдере. Файлы: _sim_engine.js, frontend/js/sim-builder.js.

Progress

Phase	Status	Review	Committed
P1 Working field	Done	✅ PASS	✅
P2 Object graphics	⬜	⬜	⬜
P3 Charts	⬜	⬜	⬜
P4 Builder UI	⬜	⬜	⬜
P5 Direct manip + history	⬜	⬜	⬜