RemPlanner Export

UserScript для RemPlanner, добавляющий на страницу редактора панель экспорта чертежа в PNG, PDF (растровый/векторный) и SVG.

📋 Требования

• Node.js: >=20
• npm: >=10
• Tampermonkey / Violentmonkey / Greasemonkey в браузере

🚀 Быстрый старт

Установка готового скрипта

Прямая ссылка для установки (требуется Tampermonkey/Violentmonkey/Greasemonkey): remplanner-export.user.js

1. Установите менеджер пользовательских скриптов в браузер.
2. Откройте ссылку выше — менеджер предложит установить скрипт.
3. Перейдите в любой проект на https://remplanner.ru/planner/* — в правом верхнем углу появится панель «Экспорт чертежа».

Файл собирается автоматически из main через GitHub Actions и публикуется в релиз latest. В заголовке скрипта прописаны @updateURL / @downloadURL, поэтому Tampermonkey будет периодически проверять обновления сам.

Локальная сборка

npm install && npm run build
# dist/remplanner-export.user.js

Использование

1. Выберите формат: PNG, PDF (растровый), PDF (векторный) или SVG.
2. При необходимости настройте поля, фон, масштаб, размер страницы и качество.
3. Нажмите кнопку «Сохранить …» — файл будет скачан в браузере.

Формат	Когда выбирать
PNG	Быстрый снимок чертежа, картинка в чате/документе
PDF (растровый)	Печать «как на экране», точное соответствие отображению
PDF (векторный)	Печать без потерь, масштабирование на любой размер
SVG	Дальнейшее редактирование в Inkscape / Illustrator / Figma

⚙️ Как это работает

1. Скрипт находит на странице корневой <svg id="main_svg"> с чертежом.
2. Клонирует его, рассчитывает viewBox по getBBox() с учётом отступа и инлайнит вычисленные стили (чтобы экспорт не зависел от внешнего CSS).
3. В зависимости от выбранного формата:
   • SVG — сериализует клон и отдаёт как файл.
   • PNG — рендерит клон через <img> в <canvas> с заданным масштабом и сохраняет PNG.
   • PDF (растровый) — то же, что PNG, но добавляет картинку в PDF через jsPDF.
   • PDF (векторный) — рисует клон в PDF через svg2pdf.js поверх jsPDF.
4. jsPDF и svg2pdf подключаются через @require (менеджер юзерскриптов грузит их в контекст скрипта в обход CSP страницы), поэтому они не входят в бандл и кешируются менеджером.

Алгоритм страницы

• Размер страницы = auto — страница расширяется под чертёж (+ 10 мм со всех сторон).
• Ориентация = auto — выбирается портретная/альбомная по соотношению сторон чертежа.
• Поля 5 мм — внутренний отступ от края страницы PDF, изображение центрируется.

🏗️ Структура проекта

Архитектура — Feature-Sliced Design:

remplanner-export/
├── src/
│   ├── main.ts                       # Точка входа UserScript
│   ├── app/
│   │   └── init.ts                   # Инициализация: монтаж панели
│   ├── widgets/
│   │   └── export-panel/             # UI панели + сбор настроек формы
│   │       ├── ExportPanel.ts
│   │       ├── template.ts
│   │       └── styles.ts
│   ├── features/
│   │   ├── export-png/               # Экспорт в PNG
│   │   ├── export-pdf-raster/        # Экспорт в растровый PDF
│   │   ├── export-pdf-vector/        # Экспорт в векторный PDF
│   │   └── export-svg/               # Экспорт в SVG
│   ├── entities/
│   │   └── drawing/                  # Подготовка SVG-клона и инлайн стилей
│   └── shared/
│       ├── config/                   # Константы (размеры страниц и пр.)
│       ├── lib/                      # Утилиты (canvas, download, pdf-page, …)
│       └── types/                    # Общие TypeScript-типы
├── tests/
│   └── pdf-page.test.ts              # Модульные тесты расчётов страницы
├── vite.config.ts                    # Vite + vite-plugin-monkey
├── tsconfig.json
├── .eslintrc.cjs
└── .prettierrc

🛠️ Разработка

Установка зависимостей

npm install

Команды

npm run dev          # Запуск Vite в режиме разработки UserScript
npm run build        # Сборка dist/remplanner-export.user.js
npm run typecheck    # Проверка типов TypeScript
npm run lint         # ESLint
npm run lint:fix     # ESLint с автофиксом
npm run format       # Prettier
npm test             # Запуск модульных тестов (vitest)
npm run test:watch   # Vitest в режиме отслеживания

Режим разработки

npm run dev поднимает Vite-сервер. vite-plugin-monkey сам положит на странице установочный UserScript-«заглушку», который грузит скрипт с dev-сервера и поддерживает HMR на странице RemPlanner. Открывайте раздел planner — панель будет обновляться без переустановки скрипта.

Финальная сборка

npm run build

В dist/remplanner-export.user.js появится готовый UserScript с заголовком ==UserScript== и всеми зависимостями.

📦 Подключаемые библиотеки (@require)

Библиотека	Зачем	URL
jspdf	Генерация PDF	https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
svg2pdf.js	Векторный PDF из SVG	https://unpkg.com/svg2pdf.js@2.2.3/dist/svg2pdf.umd.min.js

Подключаются через @require в манифесте UserScript: менеджер (Tampermonkey/Violentmonkey/Greasemonkey) сам скачивает их и подключает в контекст скрипта в обход CSP страницы. Порядок важен — сначала jsPDF, затем svg2pdf (он регистрирует метод jsPDF.API.svg).

🔍 Качество кода

• TypeScript — строгая типизация ("strict": true)
• ESLint + @typescript-eslint — статический анализ
• Prettier — форматирование
• Vitest — модульные тесты
• vite-plugin-monkey — сборка UserScript

📚 Стек технологий

• TypeScript 5 — JavaScript со статической типизацией
• Vite 5 — сборка и dev-сервер
• vite-plugin-monkey — генерация UserScript-обёртки и HMR
• jsPDF + svg2pdf.js — генерация PDF (подключаются через @require)

⚖️ Лицензия и дисклеймер

Проект распространяется под лицензией MIT.

Это неофициальный инструмент. Проект не аффилирован, не одобрен и не поддерживается ООО «Техноплан», ООО «Ремпланнер», Montek FZC LLC или иными правообладателями сервиса RemPlanner. «RemPlanner» / «Ремпланнер» — товарный знак соответствующих правообладателей и упоминается здесь исключительно в описательных целях.

Скрипт работает только с DOM в браузере пользователя — он читает SVG, отрисованный самим планировщиком, и не обходит технических средств защиты, не модифицирует серверную часть, не передаёт данные третьим лицам. Используйте на свой страх и риск; ответственность за соответствие пользовательскому соглашению сервиса и применимому законодательству лежит на пользователе.