Merge pull request #32 from 0918nobita/v0.3.3-bugfix

🐛 画面外の要素のレイアウトが崩れる不具合を修正した
0918nobita · Dec 25, 2023 · f3b6e4a · f3b6e4a
2 parents 488acc1 + 736e037
commit f3b6e4a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/src/code-block-processor.ts b/src/code-block-processor.ts
@@ -4,11 +4,28 @@ import type { Settings } from './settings';
 
 import * as styles from './style.css';
 
-export const codeBlockProcessor = (
+const waitAndMeasureCorrectWidth = (element: HTMLElement): Promise<number> =>
+    new Promise((resolve) => {
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.length === 0) {
+                return;
+            }
+
+            const { width } = entries[0].boundingClientRect;
+            if (width !== 0) {
+                observer.disconnect();
+                resolve(width);
+            }
+        });
+
+        observer.observe(element);
+    });
+
+export const codeBlockProcessor = async (
     source: string,
     element: HTMLElement,
     settings: Settings,
-): void => {
+): Promise<void> => {
     const gap = 2;
 
     const pinyinData = pinyin(source, { type: 'all' });
@@ -23,39 +40,42 @@ export const codeBlockProcessor = (
             : styles.pinyinLineDisplayedOnHover,
     });
 
-    const chineseCharLine = container.createDiv({
-        cls: styles.chineseCharLine,
+    const zhCharLine = container.createDiv({
+        cls: styles.zhCharLine,
     });
 
     for (const pinyinDatum of pinyinData) {
         const pinyinSpan = pinyinLine.createSpan({
             text: pinyinDatum.pinyin,
             cls: styles.pinyinSpan,
         });
-        const pinyinWidth = pinyinSpan.getBoundingClientRect().width;
 
-        const chineseCharSpan = chineseCharLine.createSpan({
+        let pinyinWidth = pinyinSpan.getBoundingClientRect().width;
+        if (pinyinDatum.pinyin !== '' && pinyinWidth === 0) {
+            pinyinWidth = await waitAndMeasureCorrectWidth(pinyinSpan);
+        }
+
+        const zhCharSpan = zhCharLine.createSpan({
             text: pinyinDatum.origin,
-            cls: styles.chineseCharSpan,
+            cls: styles.zhCharSpan,
         });
-        const chineseCharWidth = chineseCharSpan.getBoundingClientRect().width;
+        const zhCharWidth = zhCharSpan.getBoundingClientRect().width;
 
-        const { pinyinPadding, chineseCharPadding } =
-            pinyinWidth >= chineseCharWidth
+        const { pinyinPadding, zhCharPadding } =
+            pinyinWidth >= zhCharWidth
                 ? {
                       pinyinPadding: gap,
-                      chineseCharPadding:
-                          (pinyinWidth - chineseCharWidth) / 2 + gap,
+                      zhCharPadding: (pinyinWidth - zhCharWidth) / 2 + gap,
                   }
                 : {
-                      pinyinPadding: (chineseCharWidth - pinyinWidth) / 2 + gap,
-                      chineseCharPadding: gap,
+                      pinyinPadding: (zhCharWidth - pinyinWidth) / 2 + gap,
+                      zhCharPadding: gap,
                   };
 
         pinyinSpan.style.paddingLeft = `${pinyinPadding}px`;
         pinyinSpan.style.paddingRight = `${pinyinPadding}px`;
 
-        chineseCharSpan.style.paddingLeft = `${chineseCharPadding}px`;
-        chineseCharSpan.style.paddingRight = `${chineseCharPadding}px`;
+        zhCharSpan.style.paddingLeft = `${zhCharPadding}px`;
+        zhCharSpan.style.paddingRight = `${zhCharPadding}px`;
     }
 };
diff --git a/src/plugin-impl.ts b/src/plugin-impl.ts
@@ -33,7 +33,7 @@ export class PluginImpl extends Obsidian.Plugin implements Plugin {
             async (source, element) => {
                 await domReady();
 
-                codeBlockProcessor(source, element, this.settings);
+                await codeBlockProcessor(source, element, this.settings);
             },
         );
     }

diff --git a/src/style.css.ts b/src/style.css.ts
@@ -9,13 +9,13 @@ export const container = style({
     },
 });
 
-export const chineseCharLine = style({
+export const zhCharLine = style({
     position: 'relative',
     overflowWrap: 'anywhere',
     lineHeight: '2.7rem',
 });
 
-export const chineseCharSpan = style({
+export const zhCharSpan = style({
     display: 'inline-block',
 });
 
@@ -38,7 +38,7 @@ export const pinyinLineDisplayedOnHover = style([
         opacity: '0',
         transition: 'opacity .3s ease',
         selectors: {
-            [`${container}:has(> ${chineseCharLine}:hover) > &`]: {
+            [`${container}:has(> ${zhCharLine}:hover) > &`]: {
                 opacity: '1',
             },
         },