fix(lab-organic): колбы «Качественных реакций» уезжали за пределы экрана
Canvas был прямым flex-ребёнком (flex:1). _drawQual выставляет c.height = rect.height*dpr → intrinsic-высота канваса росла, а при min-height:auto flex-элемент не сжимался ниже неё → разгон высоты (×dpr на каждую перерисовку). Пробирки центрировались по H/2 и оказывались далеко ниже видимой области. Канвас обёрнут в position:relative;flex:1;overflow:hidden и сам стал position:absolute (как рабочий канвас конструктора молекул) — intrinsic-размер больше не влияет на раскладку. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1252,10 +1252,16 @@ class OrganicSim {
|
|||||||
center.style.cssText = 'flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative';
|
center.style.cssText = 'flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative';
|
||||||
panel.appendChild(center);
|
panel.appendChild(center);
|
||||||
|
|
||||||
|
// wrapper makes the canvas position:absolute so its intrinsic pixel size
|
||||||
|
// (set in _drawQual) can't feed back into the flex layout and inflate height
|
||||||
|
const canvasWrap = document.createElement('div');
|
||||||
|
canvasWrap.style.cssText = 'flex:1;position:relative;overflow:hidden';
|
||||||
|
center.appendChild(canvasWrap);
|
||||||
|
|
||||||
const qualCanvas = document.createElement('canvas');
|
const qualCanvas = document.createElement('canvas');
|
||||||
qualCanvas.style.cssText = 'width:100%;flex:1;display:block';
|
qualCanvas.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%';
|
||||||
this._qualCanvas = qualCanvas;
|
this._qualCanvas = qualCanvas;
|
||||||
center.appendChild(qualCanvas);
|
canvasWrap.appendChild(qualCanvas);
|
||||||
|
|
||||||
// compounds area
|
// compounds area
|
||||||
const compArea = document.createElement('div');
|
const compArea = document.createElement('div');
|
||||||
|
|||||||
Reference in New Issue
Block a user