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

fix(lab-organic): колбы больше + гарантированно в зоне видимости

Browse Source 
Пробирки «Качественных реакций» масштабируются по высоте канваса
(190..340px вместо фикс. 150, шире), а вертикальная позиция ty
клампится (≤210) — даже при некорректно большой высоте канваса
колбы всегда остаются в верхней видимой части, а не уезжают за экран.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-24 19:38:54 +03:00
parent 09dc62dc96
commit 7829360391
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/labs/organic.js
+15 -9
View File
@@ -1382,15 +1382,21 @@ class OrganicSim {
const comp = this._qualCompound;
const anim = this._qualAnim;
// draw multiple test tubes
// draw multiple test tubes — sized to fill the available height (bigger flasks)
const tubes = rxn.compounds;
const tubeW = 56, tubeH = 150, gap = 20;
const badgePad = 48; // room above tubes for the +/−/? badge
const labelPad = 62; // room below tubes for the name + reagent labels
const tubeH = Math.max(190, Math.min(H - badgePad - labelPad, 340));
const tubeW = Math.round(tubeH * 0.46);
const gap = Math.round(tubeW * 0.6);
const totalW = tubes.length * (tubeW + gap) - gap;
let startX = (W - totalW) / 2;
const startX = (W - totalW) / 2;
// centre vertically, but never push the tubes so low they leave the viewport
let ty = badgePad + Math.max(0, (H - badgePad - labelPad - tubeH) / 2);
ty = Math.min(ty, 210);
tubes.forEach((tube, i) => {
const tx = startX + i * (tubeW + gap);
const ty = (H - tubeH) / 2 - 10;
const isActive = comp && comp === tube;
const progress = (isActive && anim) ? Math.min(anim.t / anim.maxT, 1) : 0;
@@ -1398,19 +1404,19 @@ class OrganicSim {
// label
ctx.fillStyle = isActive ? '#C9A0FF' : 'rgba(255,255,255,0.5)';
ctx.font = `${isActive ? '700' : '400'} 10px Manrope,sans-serif`;
ctx.font = `${isActive ? '700' : '400'} 11px Manrope,sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
const label = tube.name.length > 12 ? tube.name.substring(0,11)+'…' : tube.name;
ctx.fillText(label, tx + tubeW/2, ty + tubeH + 8);
const label = tube.name.length > 14 ? tube.name.substring(0,13)+'…' : tube.name;
ctx.fillText(label, tx + tubeW/2, ty + tubeH + 10);
});
// reagent label
ctx.fillStyle = 'rgba(255,255,255,0.35)';
ctx.font = '11px Manrope,sans-serif';
ctx.font = '12px Manrope,sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText(`Реагент: ${rxn.reagent}`, W/2, H - 4);
ctx.fillText(`Реагент: ${rxn.reagent}`, W/2, Math.min(H - 6, ty + tubeH + 44));
}
_drawTestTube(ctx, x, y, w, h, rxn, comp, progress, isActive) {