Learn_System/.claude/memory/reference_svg_drawer.md at master

Files

T

Maxim Dolgolyov 8a7091ddec chore(memory): снимок файлов памяти Claude в репозиторий для переноса

Копия пользовательской автопамяти (29 фактов + индекс MEMORY.md) в
.claude/memory/, чтобы переносить между машинами через git.
README.md — как восстановить в пользовательскую папку на другой машине.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-05 08:32:16 +03:00

3.0 KiB

Raw Permalink Blame History

name, description, metadata

name

description

metadata

reference_svg_drawer

Лёгкий векторный SVG-редактор (рисовалка) для уроков — API виджета, санитайзер, точки переиспользования

node_type	type	originSessionId
memory	reference	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); нет слоёв/ группировки, привязки к сетке, импорта картинки-подложки; текст однострочный; один размер холста.

3.0 KiB Raw Permalink Blame History

3.0 KiB

Raw Permalink Blame History