maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(classroom): рисование поверх открытого учебника

Browse Source 
Кнопка «Рисовать» в тулбаре учебника — переиспользует существующий
annotate-режим доски (так же, как для симуляций). Переключатель учителя
транслируется студентам через тот же SSE-канал /sim/annotate. При
закрытии учебника annotate-режим автоматически выключается.
This commit is contained in:
Maxim Dolgolyov
2026-05-29 11:46:22 +03:00
parent 566197df48
commit 2f4109cb7c
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/classroom.html
+25 -4
View File
@@ -2009,7 +2009,8 @@
/* ── Annotate-over-sim mode ───────────────────────────────────────────── */
/* Board floats above the sim panel (sim visible behind transparent canvas) */
.cr-board-area.annotate-active .cr-sim-panel { z-index: 1; }
.cr-board-area.annotate-active .cr-sim-panel,
.cr-board-area.annotate-active .cr-tb-panel { z-index: 1; }
.cr-board-area.annotate-active .cr-board-wrap {
z-index: 45;
background: transparent !important;
@@ -2164,6 +2165,19 @@
display: none; background: transparent; cursor: not-allowed; z-index: 10;
}
.cr-tb-blocker.active { display: block; }
/* Draw-over button (in tb-bar; only visible when textbook open) */
.cr-tb-annotate-btn {
display: none; padding: 5px 10px; border-radius: 99px;
border: 1.5px solid rgba(241,91,181,0.3); background: transparent;
color: rgba(255,255,255,0.7); font-family: 'Manrope',sans-serif;
font-size: 0.72rem; font-weight: 700; cursor: pointer;
transition: all .15s; align-items: center; gap: 4px; margin-right: 4px;
}
.cr-tb-annotate-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.cr-tb-annotate-btn:hover { color: rgba(255,255,255,0.85); border-color: rgba(241,91,181,0.55); }
.cr-tb-annotate-btn.active { background: rgba(241,91,181,0.18); border-color: rgba(241,91,181,0.55); color: #F15BB5; }
.cr-tb-panel.open .cr-tb-annotate-btn.teacher-ctrl { display: flex; }
</style>
</head>
<body>
@@ -2326,6 +2340,10 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
</div>
<span class="cr-tb-bar-title" id="cr-tb-bar-title">Учебник</span>
<button class="cr-tb-annotate-btn teacher-ctrl" id="cr-tb-annotate-btn" onclick="crToggleAnnotate()" title="Рисовать поверх учебника">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
Рисовать
</button>
<div class="cr-tb-mode" id="cr-tb-mode-toggle" style="display:none">
<button class="cr-tb-mode-btn active" id="cr-tb-mode-demo" onclick="crSetTbMode('demo')" title="Все видят то же, что и учитель">Демо</button>
<button class="cr-tb-mode-btn" id="cr-tb-mode-free" onclick="crSetTbMode('free')" title="Каждый листает самостоятельно">Свободно</button>
@@ -2343,7 +2361,7 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
Режим аннотации
</span>
<button class="cr-annotate-exit" id="cr-annotate-exit-btn" onclick="crToggleAnnotate()">Вернуться к симуляции</button>
<button class="cr-annotate-exit" id="cr-annotate-exit-btn" onclick="crToggleAnnotate()">Закончить рисование</button>
</div>
</div><!-- /.cr-board-area -->
<!-- student nav: page nav + follow toggle -->
@@ -7107,11 +7125,11 @@
let _annotateTool = 'pencil'; // saved tool before entering annotate mode
async function crToggleAnnotate() {
if (!_simActive) return;
if (!_simActive && !_tbActive) return;
const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
const newVal = !_annotateActive;
_crApplyAnnotate(newVal);
// Only teacher broadcasts to students
// Only teacher broadcasts to students (reuse sim/annotate channel — same payload)
if (isTeacher && _sessionId) {
try {
await LS.post(`/api/classroom/${_sessionId}/sim/annotate`, { active: newVal });
@@ -7123,10 +7141,12 @@
_annotateActive = active;
const boardArea = document.getElementById('cr-board-area');
const simBtn = document.getElementById('cr-sim-annotate-btn');
const tbBtn = document.getElementById('cr-tb-annotate-btn');
const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
boardArea?.classList.toggle('annotate-active', active);
if (simBtn) simBtn.classList.toggle('active', active);
if (tbBtn) tbBtn.classList.toggle('active', active);
if (!_wb) return;
_wb.setAnnotateMode(active);
@@ -7296,6 +7316,7 @@
}
function onTbClose() {
if (_annotateActive) _crApplyAnnotate(false);
_tbActive = null;
const panel = document.getElementById('cr-tb-panel');
const frame = document.getElementById('cr-tb-frame');