@hirokisakabe/pom 0.2.0 → 0.3.0

package/README.md

@@ -4,10 +4,11 @@
 
 ## Requirements
 
-- Node.js 18 or higher
+- Node.js 18 or higher (for Node.js environments)
+- Modern browser with ES2020+ support (for browser environments)
 
 > [!NOTE]
-> The PPTX generation feature (`buildPptx`) only works in Node.js environments. However, if you only need the input schema, you can import it from `@hirokisakabe/pom/schema` for use in browser environments.
+> pom works in both Node.js and browser environments. Text measurement uses opentype.js with bundled Noto Sans JP fonts, ensuring consistent layout across all environments.
 
 ## Installation
 

package/dist/calcYogaLayout/calcYogaLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calcYogaLayout.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/calcYogaLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAOxC;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,iBAiBpC"}
+{"version":3,"file":"calcYogaLayout.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/calcYogaLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAA0B,MAAM,UAAU,CAAC;AAOhE;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,iBAiBpC"}

package/dist/calcYogaLayout/calcYogaLayout.js

@@ -172,94 +172,12 @@ async function applyStyleToYogaNode(node, yn) {
             break;
         case "vstack": {
             yn.setFlexDirection(yoga.FLEX_DIRECTION_COLUMN);
-            if (node.gap !== undefined) {
-                yn.setGap(yoga.GUTTER_ROW, node.gap);
-                yn.setGap(yoga.GUTTER_COLUMN, node.gap);
-            }
-            if (node.alignItems !== undefined) {
-                switch (node.alignItems) {
-                    case "start":
-                        yn.setAlignItems(yoga.ALIGN_FLEX_START);
-                        break;
-                    case "center":
-                        yn.setAlignItems(yoga.ALIGN_CENTER);
-                        break;
-                    case "end":
-                        yn.setAlignItems(yoga.ALIGN_FLEX_END);
-                        break;
-                    case "stretch":
-                        yn.setAlignItems(yoga.ALIGN_STRETCH);
-                        break;
-                }
-            }
-            if (node.justifyContent !== undefined) {
-                switch (node.justifyContent) {
-                    case "start":
-                        yn.setJustifyContent(yoga.JUSTIFY_FLEX_START);
-                        break;
-                    case "center":
-                        yn.setJustifyContent(yoga.JUSTIFY_CENTER);
-                        break;
-                    case "end":
-                        yn.setJustifyContent(yoga.JUSTIFY_FLEX_END);
-                        break;
-                    case "spaceBetween":
-                        yn.setJustifyContent(yoga.JUSTIFY_SPACE_BETWEEN);
-                        break;
-                    case "spaceAround":
-                        yn.setJustifyContent(yoga.JUSTIFY_SPACE_AROUND);
-                        break;
-                    case "spaceEvenly":
-                        yn.setJustifyContent(yoga.JUSTIFY_SPACE_EVENLY);
-                        break;
-                }
-            }
+            applyFlexProperties(node, yn, yoga);
             break;
         }
         case "hstack": {
             yn.setFlexDirection(yoga.FLEX_DIRECTION_ROW);
-            if (node.gap !== undefined) {
-                yn.setGap(yoga.GUTTER_ROW, node.gap);
-                yn.setGap(yoga.GUTTER_COLUMN, node.gap);
-            }
-            if (node.alignItems !== undefined) {
-                switch (node.alignItems) {
-                    case "start":
-                        yn.setAlignItems(yoga.ALIGN_FLEX_START);
-                        break;
-                    case "center":
-                        yn.setAlignItems(yoga.ALIGN_CENTER);
-                        break;
-                    case "end":
-                        yn.setAlignItems(yoga.ALIGN_FLEX_END);
-                        break;
-                    case "stretch":
-                        yn.setAlignItems(yoga.ALIGN_STRETCH);
-                        break;
-                }
-            }
-            if (node.justifyContent !== undefined) {
-                switch (node.justifyContent) {
-                    case "start":
-                        yn.setJustifyContent(yoga.JUSTIFY_FLEX_START);
-                        break;
-                    case "center":
-                        yn.setJustifyContent(yoga.JUSTIFY_CENTER);
-                        break;
-                    case "end":
-                        yn.setJustifyContent(yoga.JUSTIFY_FLEX_END);
-                        break;
-                    case "spaceBetween":
-                        yn.setJustifyContent(yoga.JUSTIFY_SPACE_BETWEEN);
-                        break;
-                    case "spaceAround":
-                        yn.setJustifyContent(yoga.JUSTIFY_SPACE_AROUND);
-                        break;
-                    case "spaceEvenly":
-                        yn.setJustifyContent(yoga.JUSTIFY_SPACE_EVENLY);
-                        break;
-                }
-            }
+            applyFlexProperties(node, yn, yoga);
             break;
         }
         case "text":
@@ -359,3 +277,50 @@ async function applyStyleToYogaNode(node, yn) {
             break;
     }
 }
+/**
+ * vstack/hstack 共通の Flex プロパティを適用する
+ */
+function applyFlexProperties(node, yn, yoga) {
+    if (node.gap !== undefined) {
+        yn.setGap(yoga.GUTTER_ROW, node.gap);
+        yn.setGap(yoga.GUTTER_COLUMN, node.gap);
+    }
+    if (node.alignItems !== undefined) {
+        switch (node.alignItems) {
+            case "start":
+                yn.setAlignItems(yoga.ALIGN_FLEX_START);
+                break;
+            case "center":
+                yn.setAlignItems(yoga.ALIGN_CENTER);
+                break;
+            case "end":
+                yn.setAlignItems(yoga.ALIGN_FLEX_END);
+                break;
+            case "stretch":
+                yn.setAlignItems(yoga.ALIGN_STRETCH);
+                break;
+        }
+    }
+    if (node.justifyContent !== undefined) {
+        switch (node.justifyContent) {
+            case "start":
+                yn.setJustifyContent(yoga.JUSTIFY_FLEX_START);
+                break;
+            case "center":
+                yn.setJustifyContent(yoga.JUSTIFY_CENTER);
+                break;
+            case "end":
+                yn.setJustifyContent(yoga.JUSTIFY_FLEX_END);
+                break;
+            case "spaceBetween":
+                yn.setJustifyContent(yoga.JUSTIFY_SPACE_BETWEEN);
+                break;
+            case "spaceAround":
+                yn.setJustifyContent(yoga.JUSTIFY_SPACE_AROUND);
+                break;
+            case "spaceEvenly":
+                yn.setJustifyContent(yoga.JUSTIFY_SPACE_EVENLY);
+                break;
+        }
+    }
+}

package/dist/calcYogaLayout/fontLoader.d.ts

@@ -0,0 +1,20 @@
+/**
+ * opentype.js を使用したフォント読み込みモジュール
+ * Node.js とブラウザ両方で動作する
+ */
+import { Font } from "opentype.js";
+/**
+ * フォントを取得する（キャッシュ付き）
+ * @param weight フォントウェイト ("normal" or "bold")
+ * @returns opentype.js の Font オブジェクト
+ */
+export declare function getFont(weight: "normal" | "bold"): Font;
+/**
+ * 指定したテキストの幅を計測する
+ * @param text 計測するテキスト
+ * @param fontSizePx フォントサイズ（ピクセル）
+ * @param weight フォントウェイト
+ * @returns テキスト幅（ピクセル）
+ */
+export declare function measureTextWidth(text: string, fontSizePx: number, weight: "normal" | "bold"): number;
+//# sourceMappingURL=fontLoader.d.ts.map

package/dist/calcYogaLayout/fontLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontLoader.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/fontLoader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAiB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AA6B7C;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,CAqBvD;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,QAAQ,GAAG,MAAM,GACxB,MAAM,CAGR"}

package/dist/calcYogaLayout/fontLoader.js

@@ -0,0 +1,59 @@
+/**
+ * opentype.js を使用したフォント読み込みモジュール
+ * Node.js とブラウザ両方で動作する
+ */
+import opentype from "opentype.js";
+import { NOTO_SANS_JP_REGULAR_BASE64 } from "./fonts/notoSansJPRegular.js";
+import { NOTO_SANS_JP_BOLD_BASE64 } from "./fonts/notoSansJPBold.js";
+// フォントキャッシュ
+const fontCache = new Map();
+/**
+ * Base64 文字列を ArrayBuffer に変換する
+ * Node.js とブラウザ両方で動作する
+ */
+function base64ToArrayBuffer(base64) {
+    // Node.js 環境
+    if (typeof Buffer !== "undefined") {
+        const buffer = Buffer.from(base64, "base64");
+        return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+    }
+    // ブラウザ環境
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+/**
+ * フォントを取得する（キャッシュ付き）
+ * @param weight フォントウェイト ("normal" or "bold")
+ * @returns opentype.js の Font オブジェクト
+ */
+export function getFont(weight) {
+    const cacheKey = weight;
+    // キャッシュがあればそれを返す
+    const cached = fontCache.get(cacheKey);
+    if (cached) {
+        return cached;
+    }
+    // Base64 データを選択
+    const base64 = weight === "bold" ? NOTO_SANS_JP_BOLD_BASE64 : NOTO_SANS_JP_REGULAR_BASE64;
+    // ArrayBuffer に変換してパース
+    const buffer = base64ToArrayBuffer(base64);
+    const font = opentype.parse(buffer);
+    // キャッシュに保存
+    fontCache.set(cacheKey, font);
+    return font;
+}
+/**
+ * 指定したテキストの幅を計測する
+ * @param text 計測するテキスト
+ * @param fontSizePx フォントサイズ（ピクセル）
+ * @param weight フォントウェイト
+ * @returns テキスト幅（ピクセル）
+ */
+export function measureTextWidth(text, fontSizePx, weight) {
+    const font = getFont(weight);
+    return font.getAdvanceWidth(text, fontSizePx, { kerning: true });
+}