圖片預覽位置亂跳

[GrandPrix-ptt]

如圖所示，正確的顯示方式（PttChrome）：

https://imgur.com/4Glkgkp

異常（term.ptt.cc）：

https://imgur.com/zDhx9wI

可看到最下面那張圖片的預覽窗格跳到上方的邊界之外了

（範例來源： #1ZK1c_RV (MobileComm) [ptt.cc] [討論] 安卓手機APP各種BUG）

經測試，只在按下F11的全螢幕模式下才會有此bug，一般模式則似乎正常

--
10/23補充：經再次確認，一般模式位置亦會亂跳，不限全螢幕模式

[IepIweidieng]

與 #40, #48, & #55 重複。

[IepIweidieng]

#40 與 #55 初步闡述了該問題發生的原理。以下對其進一步分析。

#55 指出該問題位於函式 getTop()。

PttChrome/src/components/ImagePreviewer.js

Lines 80 to 92 in 7f2d668

	const getTop = (top, height) => {
	const pageHeight = $(window).height();
	// opening image would pass the bottom of the page
	if (top + height / 2 > pageHeight - 20) {
	if (height / 2 < top) {
	return pageHeight - 20 - height;
	}
	} else if (top - 20 > height / 2) {
	return top - height / 2;
	}
	return 20;
	};

（相關的參數 left 與 top 應該會是游標的位置，故以下如此假設）

目前的圖片位置邏輯是：

• 水平位置固定在游標右方 30 CSS 像素處。（爲何不定義 getLeft()？）
• 垂直位置則以 getTop() 函式求出：
  • if (top + height / 2 > pageHeight - 20) {
    「如果頁尾底上方 20 CSS 像素處到游標處之間的空間無法容下圖片的一半原始高度的話」……
    • if (height / 2 < top) { return pageHeight - 20 - height; }
      「如果頁首頂到 游標處 之間的空間容得下圖片的 一半原始高度 的話，就以頁尾底上方 20 CSS 像素處爲 原始圖片底端 顯示圖片」（虫舍？）
      • 理應檢査的是頁首頂到頁尾底間的空間容不容得下整個圖片。
      • 如果圖片已被縮小，那實際的圖片底端就會落在原始圖片底端的上方，且愈縮愈嚴重。
    • (else { return 20; })
      （「否則的話以頁首頂下方 20 CSS 像素處爲圖片頂端顯示圖片」）
  • } else if (top - 20 > height / 2) { return top - height / 2; }
    「如果容得下，且頁首頂下方 20 CSS 像素處到游標處之間的空間也容得下圖片的一半原始高度的話，就以游標位置爲原始圖片中心顯示圖片」
  • return 20;
    「否則的話，以頁首頂下方 20 CSS 像素處爲圖片頂端顯示圖片」

#40 提到，目前的計算方式 (實際上是 getTop()) 是使用圖片未經縮放的原始尺寸計算，如果圖片縮小的話會算錯以圖片中心或底端爲基準時的位置。

　　雖然我不是邏輯學家，但這看起來很複雜對吧？

　　它的理念是讓圖片中心橫軸對齊游標，但以不超出頁緣減 20 CSS 像素的界線爲前提。
　　但我有個更簡單的方案：

const getTop = (top, height) => { 
  const pageHeight = $(window).height(); 
  height = min(0.8 * pageHeight, height); // 可能有些許誤差，先暫時忽略
  return max(20, min(pageHeight - 20 - height, top - height / 2));
};