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/ring), затухающие трассы; приятная дефолтная палитра. Файл: _sim_engine.js.

  Handoff (P2 → P3/P4): новые поля стиля спеки (контракт для контролов билдера в P4). Все рендерятся ТОЛЬКО на canvas (fillStyle/strokeStyle/createLinearGradient/shadowColor) — XSS нет, мусорный цвет игнорится canvas. Читаются в _prepareObjects, применяются в _drawObject через хелперы _applyStroke (alpha/lineWidth/join/cap/dash/glow) и _fillStyleFor (градиент или сплошная заливка):

  • opacity — число 0..1 (деф. 1) → globalAlpha на время отрисовки объекта (восстанавливается).
  • lineStyle — 'solid'|'dashed'|'dotted' (деф. solid) → setLineDash (паттерн масштабируется от width).
  • width — толщина штриха (деф. 2); для circle/rect width:0 отключает обводку (только заливка).
  • fill/fillColor — цвет заливки (circle/rect/закрытый path). gradient:[c0,c1] — линейный градиент (вертикальный по bbox), приоритетнее fill. Полигон-заливка только при closed:true.
  • glow:true ИЛИ shadow:'#color' ИЛИ shadow:{blur} — свечение (shadowColor/shadowBlur); деф. ВЫКЛ (производительность). glowColor/glowBlur — точечная настройка (деф. цвет объекта / blur 12).
  • pointStyle (point) — 'filled'|'hollow'|'cross'|'ring' (деф. filled: заполненный кружок + тонкая белая обводка). hollow — только обводка, ring — толстое кольцо, cross — крестик.
  • trailFade (деф. true) — затухающая трасса (старые сегменты прозрачнее, посегментно alpha 0.08→0.68); trailWidth (деф. 1.6), trailLen (деф. 2000, макс 5000) — толщина/длина следа. trailColor — как было.
  • Палитра по умолчанию: если color не задан — циклически DEFAULT_PALETTE[i % 8] (cyan/violet/pink/ emerald/amber/blue/rose/green) вместо единого #06D6E0. Явный color всегда сохраняется.
  • Стрелки векторов (_arrowHead/_arrowHeadLen): заполненный «барбед»-треугольник (вырез у основания), длина = max(9, width*3.2) px; тело линии укорочено на длину головы (не торчит сквозь остриё).
  • На P3 (графики/диаграммы): _drawPlot уже использует _applyStroke (dash/opacity/glow работают на кривых). Для P3 расширять _drawPlot — оси-делений plot, несколько кривых, заливка под кривой, маркеры точек (можно переиспользовать _drawPoint), легенда. Хелперы _applyStroke/_fillStyleFor/_drawPoint готовы к переиспользованию.

• 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	Done	✅ PASS	✅
P3 Charts	⬜	⬜	⬜
P4 Builder UI	⬜	⬜	⬜
P5 Direct manip + history	⬜	⬜	⬜