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: несколько кривых, заливка под кривой, маркеры точек, легенда; аккуратный стиль диаграмм (оси/сетка/подписи — уже из P1). Файл: _sim_engine.js.

  Handoff (P3 → P4): новые поля plot-объекта (контракт для контролов билдера в P4). Все читаются в _prepareObjects (ветка type==='plot'), рендерятся ТОЛЬКО на canvas (без DOM-style/eval). Старый одиночный expr/var/range/samples/trace работает как раньше (обратная совместимость):

  • Несколько кривых. Источник (приоритет): curves:[{...}] → exprs:['sin(x)','x^2'] → expr (легаси). Нормализуются в prep.curves[]. Каждой кривой свой цвет: явный color или DEFAULT_PALETTE[i%8]. prep.exprFn = первая кривая (для trace-режима).
  • Поля кривой (curves[i]): expr (строка), color, label (строка → легенда), width, lineStyle (solid|dashed|dotted), opacity (0..1), fill (true → полупрозр. цвет кривой / строка цвета), marker (none|dot|ring). Не заданные наследуются от plot-уровня (width/lineStyle/opacity) или дефолтов.
  • Plot-уровневые fill и marker — дефолт для всех кривых (если у кривой не задано).
  • Заливка под кривой — между кривой и осью y=0, посегментно (разрывы у не-finite точек не сливаются), _fillUnderCurve. Прозрачность через _fillAlpha(color, 0.18) для fill:true.
  • Маркеры узлов — _drawCurveMarkers (переиспользует _drawPoint), прорежены ~28px по экрану (не рисуем сотни точек). dot → filled, ring → hollow.
  • Легенда — _drawLegend (на canvas: тёмная плашка + цветной свотч + светлый текст), верх-право, не наезжает на бар кнопок вида. Включается авто при наличии label; legend:false отключает.
  • Качество кривой — пропуск не-finite (разрывы), переиспользован существующий equidistant sampling (samples, деф. 200, макс 2000), _applyStroke (dash/opacity/glow/lineJoin/cap).
  • На P4 (билдер): дать этим полям контролы — список кривых (добавить/удалить, expr + color-picker + label + width + lineStyle + opacity + fill toggle/color + marker select), plot-уровневые fill/marker, тумблер легенды. Хелпер _markerStyle/_fillAlpha — модульного уровня, рядом с _dashFor/_opacity.

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