Maxim Dolgolyov
8a7091ddec
Копия пользовательской автопамяти (29 фактов + индекс MEMORY.md) в .claude/memory/, чтобы переносить между машинами через git. README.md — как восстановить в пользовательскую папку на другой машине. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
37 lines
3.0 KiB
Markdown
37 lines
3.0 KiB
Markdown
---
|
|
name: reference_svg_drawer
|
|
description: "Лёгкий векторный SVG-редактор (рисовалка) для уроков — API виджета, санитайзер, точки переиспользования"
|
|
metadata:
|
|
node_type: memory
|
|
type: reference
|
|
originSessionId: 60467058-b40e-4bd9-9f7f-d1e362e8039a
|
|
---
|
|
|
|
SVG-рисовалка в редакторе уроков. Сделано 2026-06-03 (commit ef59023).
|
|
|
|
**Виджет:** `frontend/js/svg-draw.js` → `window.SvgDraw.mount(container, {svg, width, height, onChange})`
|
|
→ `{getSVG(), destroy(), el}`. Vanilla, рендер в SVG-DOM (НЕ canvas, в отличие от whiteboard.js).
|
|
Инструменты: перо (Catmull-Rom→bezier), линия, прямоугольник, эллипс, стрелка, текст,
|
|
цвет/толщина/заливка, выбор (перемещение+Delete), undo/redo, очистка. Стили инжектятся сами.
|
|
Координаты через `svg.getScreenCTM().inverse()`. viewBox по умолчанию 800×500.
|
|
|
|
**Санитайзер:** `frontend/js/svg-sanitize.js` — UMD (`window.SvgSanitize` + `module.exports`),
|
|
`clean(str)`. Браузер → DOM-whitelist; node → консервативный regex. Whitelist тегов
|
|
(svg,g,path,line,rect,circle,ellipse,polyline,polygon,text,tspan,defs,*Gradient,stop) и
|
|
геометрия/стиль-атрибутов; режет script/foreignObject/style/image/a/use, on*=, href/xlink:href,
|
|
javascript:. БЕЗ зависимостей. Бэкенд `lessonController.js` подключает его кросс-путём
|
|
`require('../../../frontend/js/svg-sanitize.js')` — единый источник правды.
|
|
|
|
**Блок урока `svg-draw`** (хранение inline, переоткрывается для дорисовки):
|
|
- `lessonController.js`: `svg-draw` в VALID_TYPES + `cleanSvg(data.svg)` при сохранении (defense-in-depth).
|
|
- `lesson-editor.html`: палитра «Рисунок», BLOCK_DEFAULTS `{svg:'',caption:''}`, `renderBlockEditor`
|
|
case (host `.svgdraw-host[data-bid]` + подпись), `mountSvgDrawEditors()` (монтаж/перемонтаж в
|
|
renderBlocks, инстансы в `_svgDrawInst`), `renderPreviewBlock` case (санитизированный inline-svg).
|
|
- `lesson.html`: `renderBlock` case svg-draw (санитизированный inline-svg, адаптивно `max-width:100%`).
|
|
|
|
**Переиспользование (заявлено):** тот же `SvgDraw`/`SvgSanitize` пригодны для картинок флешкарт и
|
|
**фигур генератора задач** (см. [[reference_exam_textbook_links]] / обсуждение параметрического генератора).
|
|
|
|
**MVP-ограничения (на доработку):** select только move+delete (нет resize/rotate); нет слоёв/
|
|
группировки, привязки к сетке, импорта картинки-подложки; текст однострочный; один размер холста.
|