@taboo-avalanche/andesite-compiler 1.0.0 → 1.0.2

package/dist/compile.js

@@ -53,6 +53,8 @@ async function rasterizeAllInBrowser(browser, pageUrl, outputDir, options) {
     const kind = await page.$eval("[data-andesite-canvas]", (node) => {
       return node.getAttribute("data-andesite-page-kind") === "hud" ? "hud" : "menu";
     });
+    const mask = await page.$eval("[data-andesite-canvas]", (node) => node.getAttribute("data-andesite-mask"));
+    await page.$$eval("[data-andesite-screen-touch-mask]", (nodes) => nodes.forEach((node) => node.style.display = "none"));
     const pageBox = await page.$eval("[data-andesite-content-root]", (node) => {
       const rect = node.getBoundingClientRect();
       return { width: Math.round(rect.width), height: Math.round(rect.height) };
@@ -92,6 +94,43 @@ async function rasterizeAllInBrowser(browser, pageUrl, outputDir, options) {
     }
     const mounts = kind === "hud" ? await collectHudMounts(page) : [];
     const viewStacks = [];
+    for (const dialog of await page.$$('[data-andesite-type="dialog"]')) {
+      const dialogId = await dialog.evaluate((node) => node.getAttribute("data-andesite-id"));
+      const defaultVisible = await readDefaultVisible(dialog);
+      const openViewEl = await dialog.$('[data-andesite-view-name="open"]');
+      const box = openViewEl ? await measureAndesiteBox(openViewEl) : await measureAndesiteBox(dialog);
+      if (box.width <= 0 || box.height <= 0) throw new Error(`Collapsed ADialog: ${dialogId}`);
+      const controls = await dialog.evaluate(
+        (node) => Array.from(node.querySelectorAll('[data-andesite-view-name="open"] [data-andesite-id]')).map((child) => child.getAttribute("data-andesite-id"))
+      );
+      const openViewId = `${dialogId}:open`;
+      const closedViewId = `${dialogId}:closed`;
+      const isOpen = defaultVisible !== false;
+      viewStacks.push({
+        id: dialogId,
+        defaultView: isOpen ? "open" : "closed",
+        views: [
+          {
+            id: closedViewId,
+            name: "closed",
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+            controls: []
+          },
+          {
+            id: openViewId,
+            name: "open",
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+            controls: [openViewId + "/__background", ...controls]
+          }
+        ]
+      });
+    }
     for (const stack of await page.$$("[data-andesite-viewstack]")) {
       const info = await stack.evaluate((node) => ({ id: node.getAttribute("data-andesite-id"), defaultView: node.getAttribute("data-andesite-default-view") }));
       const views = [];
@@ -113,7 +152,7 @@ async function rasterizeAllInBrowser(browser, pageUrl, outputDir, options) {
     const inputs = await rasterizeTextInputs(page, outputDir);
     const backgroundPanels = kind === "hud" ? await rasterizeHudStaticBackgrounds(page, outputDir) : await rasterizeStaticBackground(page, outputDir);
     const panels = await rasterizePanels(page, outputDir);
-    const buttons = await rasterizeButtons(page, outputDir);
+    const buttons = await rasterizeButtons(page, outputDir, viewStacks);
     const progresses = await rasterizeProgresses(page, outputDir);
     const sprites = await rasterizeSprites(page, outputDir);
     const scrollViews = await rasterizeScrollViews(page, outputDir);
@@ -123,13 +162,14 @@ async function rasterizeAllInBrowser(browser, pageUrl, outputDir, options) {
     for (const stack of viewStacks) for (const view of stack.views) {
       view.controls = view.controls.filter((id) => exportedIds.has(id));
       for (const control of exported.filter((control2) => view.controls.includes(control2.id))) {
-        if (control.width <= 0 || control.height <= 0) throw new Error(`Collapsed AView control: ${control.id}`);
-        if (kind !== "hud" && (control.x < -1 || control.y < -1 || control.x + control.width > pageBox.width + 1 || control.y + control.height > pageBox.height + 1)) {
+        const isDialogMask = control.id.endsWith("_mask");
+        if (!isDialogMask && (control.width <= 0 || control.height <= 0)) throw new Error(`Collapsed AView control: ${control.id}`);
+        if (!isDialogMask && kind !== "hud" && (control.x < -1 || control.y < -1 || control.x + control.width > pageBox.width + 1 || control.y + control.height > pageBox.height + 1)) {
           throw new Error(`AView control outside page: ${control.id}`);
         }
       }
     }
-    return { kind, width: pageBox.width, height: pageBox.height, mounts, viewStacks, panels: [...backgroundPanels, ...panels], buttons, labels, inputs, slots, progresses, sprites, scrollViews };
+    return { kind, mask, width: pageBox.width, height: pageBox.height, mounts, viewStacks, panels: [...backgroundPanels, ...panels], buttons, labels, inputs, slots, progresses, sprites, scrollViews };
   } finally {
     await page.close();
   }
@@ -748,7 +788,7 @@ async function rasterizePanels(page, outputDir) {
   }
   return results;
 }
-async function rasterizeButtons(page, outputDir) {
+async function rasterizeButtons(page, outputDir, viewStacks) {
   const elements = await page.$$('[data-andesite-type="button"]');
   const results = [];
   for (const el of elements) {
@@ -758,7 +798,20 @@ async function rasterizeButtons(page, outputDir) {
     const id = await el.evaluate((node) => node.getAttribute("data-andesite-id") ?? "");
     const mountId = await collectHudMountId(el);
     const defaultVisible = await readDefaultVisible(el);
-    const box = await measureAndesiteBox(el);
+    const isDialogMask = id.endsWith("_mask");
+    let box;
+    if (isDialogMask) {
+      const dialogId = id.replace(/_mask$/, "");
+      const dialogStack = viewStacks.find((s) => s.id === dialogId);
+      const openView = dialogStack?.views.find((v) => v.name === "open");
+      if (openView) {
+        box = { x: openView.x, y: openView.y, width: openView.width, height: openView.height };
+      } else {
+        box = await measureAndesiteBox(el);
+      }
+    } else {
+      box = await measureAndesiteBox(el);
+    }
     const pressDuration = Number(await el.evaluate((node) => node.getAttribute("data-andesite-press-duration") ?? "2"));
     const clickable = await collectButtonClickable(el);
     const layer = optionalNumber(await el.evaluate((node) => node.getAttribute("data-andesite-layer")));
@@ -786,10 +839,16 @@ async function rasterizeButtons(page, outputDir) {
       frames.push(screenshot);
     }
     if (frames.length === 2) {
-      const atlas = await combinePngsVertically(page, frames);
+      const isDialogMask2 = id.endsWith("_mask");
+      let outputPng;
+      if (isDialogMask2) {
+        outputPng = frames[0];
+      } else {
+        outputPng = await combinePngsVertically(page, frames);
+      }
       const outputPath = path.join(outputDir, texturePath);
       fs.mkdirSync(path.dirname(outputPath), { recursive: true });
-      fs.writeFileSync(outputPath, atlas);
+      fs.writeFileSync(outputPath, outputPng);
       results.push({
         id,
         mountId,
@@ -925,13 +984,25 @@ async function captureButtonPng(page, el) {
     wrapper.style.zIndex = "2147483647";
     const rect = node.getBoundingClientRect();
     const clone = node.cloneNode(true);
+    const isDialogMask = node.getAttribute("data-andesite-id")?.endsWith("_mask");
+    let captureWidth = Math.max(1, Math.round(rect.width));
+    let captureHeight = Math.max(1, Math.round(rect.height));
+    if (isDialogMask) {
+      const dialogId = node.getAttribute("data-andesite-id")?.replace(/_mask$/, "");
+      const viewStackEl = document.querySelector(`[data-andesite-viewstack="${dialogId}"]`);
+      if (viewStackEl) {
+        const stackRect = viewStackEl.getBoundingClientRect();
+        captureWidth = Math.max(1, Math.round(stackRect.width));
+        captureHeight = Math.max(1, Math.round(stackRect.height));
+      }
+    }
     clone.style.position = "relative";
     clone.style.left = "0";
     clone.style.top = "0";
     clone.style.right = "auto";
     clone.style.bottom = "auto";
-    clone.style.width = `${Math.max(1, Math.round(rect.width))}px`;
-    clone.style.height = `${Math.max(1, Math.round(rect.height))}px`;
+    clone.style.width = `${captureWidth}px`;
+    clone.style.height = `${captureHeight}px`;
     clone.style.margin = "0";
     const cloneBoxShadow = getComputedStyle(node).boxShadow;
     clone.style.boxShadow = cloneBoxShadow;
@@ -2023,6 +2094,7 @@ async function compilePage(pageUrl, pageId, outputZipPath, options) {
     width: rasterResult.width,
     height: rasterResult.height,
     anchor: "center",
+    mask: rasterResult.mask,
     ...pageControls,
     slots: rasterResult.slots,
     progresses: rasterResult.progresses,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taboo-avalanche/andesite-compiler",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Rasterize Andesite React pages to Bedrock chest UI zip",
   "type": "module",
   "exports": {
@@ -18,7 +18,7 @@
   "dependencies": {
     "archiver": "^7.0.1",
     "puppeteer": "^23.0.0",
-    "@taboo-avalanche/andesite": "1.0.0"
+    "@taboo-avalanche/andesite": "1.0.3"
   },
   "devDependencies": {
     "@types/node": "^26.6.2",

package/src/compile.ts

@@ -89,7 +89,8 @@ export async function compilePage(
       // 页面整体尺寸与锚点：anchor=center 时运行时按屏幕把整体包围盒居中，解决左上锚定导致的偏移
       width: rasterResult.width,
       height: rasterResult.height,
-      anchor: 'center',
+      anchor: 'center',
+      mask: rasterResult.mask,
       ...pageControls,
       slots: rasterResult.slots,
       progresses: rasterResult.progresses,

package/src/rasterize/puppeteer.ts

@@ -68,8 +68,9 @@ interface RepeaterCellBox extends DomBox {
   index: number
 }
 
-export interface AndesiteRasterResult {
-  kind: 'menu' | 'hud'
+export interface AndesiteRasterResult {
+  kind: 'menu' | 'hud'
+  mask: string | null
   // 页面整体包围盒（内容根 px），供运行时居中摆放
   width: number
   height: number
@@ -143,7 +144,10 @@ export async function rasterizeAllInBrowser(
     const kind: AndesiteRasterResult['kind'] = await page.$eval('[data-andesite-canvas]', node => {
       return (node as HTMLElement).getAttribute('data-andesite-page-kind') === 'hud' ? 'hud' : 'menu'
     })
-    // 页面整体包围盒：菜单以内容根居中；HUD 控件另按最近 mount 作为局部坐标基准。
+    const mask = await page.$eval('[data-andesite-canvas]', node => node.getAttribute('data-andesite-mask'))
+    // 全屏遮罩由导入器单独创建，采集内容贴图时移除其像素，避免半透明背景重复叠色。
+    await page.$$eval('[data-andesite-screen-touch-mask]', nodes => nodes.forEach(node => (node as HTMLElement).style.display = 'none'))
+    // 页面整体包围盒：菜单以内容根居中；HUD 控件另按最近 mount 作为局部坐标基准。
     const pageBox = await page.$eval('[data-andesite-content-root]', node => {
       const rect = (node as HTMLElement).getBoundingClientRect()
       return { width: Math.round(rect.width), height: Math.round(rect.height) }
@@ -198,6 +202,49 @@ export async function rasterizeAllInBrowser(
     }
     const mounts = kind === 'hud' ? await collectHudMounts(page) : []
     const viewStacks: ViewStackDecl[] = []
+    // ADialog 弹窗：导出为 viewStack（id=弹窗id），含 closed/open 两个视图。
+    // closed 是空视图（弹窗关闭状态），open 包含遮罩与内容面板，随视图根整体开合。
+    for (const dialog of await page.$$('[data-andesite-type="dialog"]')) {
+      const dialogId = await dialog.evaluate(node => node.getAttribute('data-andesite-id')!)
+      const defaultVisible = await readDefaultVisible(dialog)
+      // 测量 open 视图（实际弹窗内容）的尺寸，而非 dialog 根节点（可能是 closed 空视图）
+      const openViewEl = await dialog.$('[data-andesite-view-name="open"]')
+      const box = openViewEl ? await measureAndesiteBox(openViewEl) : await measureAndesiteBox(dialog)
+      if (box.width <= 0 || box.height <= 0) throw new Error(`Collapsed ADialog: ${dialogId}`)
+      const controls = await dialog.evaluate(node =>
+        Array.from(node.querySelectorAll('[data-andesite-view-name="open"] [data-andesite-id]'))
+          .map(child => child.getAttribute('data-andesite-id')!),
+      )
+      // 弹窗遮罩（AButton clickable=false）与内容面板内控件都归入 open 视图。
+      // defaultVisible=false 时弹窗初始隐藏，对应 defaultView=closed；否则 defaultView=open。
+      const openViewId = `${dialogId}:open`
+      const closedViewId = `${dialogId}:closed`
+      const isOpen = defaultVisible !== false
+      viewStacks.push({
+        id: dialogId,
+        defaultView: isOpen ? 'open' : 'closed',
+        views: [
+          {
+            id: closedViewId,
+            name: 'closed',
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+            controls: [],
+          },
+          {
+            id: openViewId,
+            name: 'open',
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+            controls: [openViewId + '/__background', ...controls],
+          },
+        ],
+      })
+    }
     for (const stack of await page.$$('[data-andesite-viewstack]')) {
       const info = await stack.evaluate(node => ({ id: node.getAttribute('data-andesite-id')!, defaultView: node.getAttribute('data-andesite-default-view')! }))
       const views: ViewStackDecl['views'] = []
@@ -223,7 +270,7 @@ export async function rasterizeAllInBrowser(
       ? await rasterizeHudStaticBackgrounds(page, outputDir)
       : await rasterizeStaticBackground(page, outputDir)
     const panels = await rasterizePanels(page, outputDir)
-    const buttons = await rasterizeButtons(page, outputDir)
+    const buttons = await rasterizeButtons(page, outputDir, viewStacks)
     const progresses = await rasterizeProgresses(page, outputDir)
     const sprites = await rasterizeSprites(page, outputDir)
     const scrollViews = await rasterizeScrollViews(page, outputDir)
@@ -235,13 +282,15 @@ export async function rasterizeAllInBrowser(
     for (const stack of viewStacks) for (const view of stack.views) {
       view.controls = view.controls.filter(id => exportedIds.has(id))
       for (const control of exported.filter(control => view.controls.includes(control.id))) {
-        if (control.width <= 0 || control.height <= 0) throw new Error(`Collapsed AView control: ${control.id}`)
-        if (kind !== 'hud' && (control.x < -1 || control.y < -1 || control.x + control.width > pageBox.width + 1 || control.y + control.height > pageBox.height + 1)) {
+        // ADialog 的遮罩按钮（id 以 _mask 结尾）在关闭态尺寸为 0 是正常的
+        const isDialogMask = control.id.endsWith('_mask')
+        if (!isDialogMask && (control.width <= 0 || control.height <= 0)) throw new Error(`Collapsed AView control: ${control.id}`)
+        if (!isDialogMask && kind !== 'hud' && (control.x < -1 || control.y < -1 || control.x + control.width > pageBox.width + 1 || control.y + control.height > pageBox.height + 1)) {
           throw new Error(`AView control outside page: ${control.id}`)
         }
       }
     }
-    return { kind, width: pageBox.width, height: pageBox.height, mounts, viewStacks, panels: [...backgroundPanels, ...panels], buttons, labels, inputs, slots, progresses, sprites, scrollViews }
+    return { kind, mask, width: pageBox.width, height: pageBox.height, mounts, viewStacks, panels: [...backgroundPanels, ...panels], buttons, labels, inputs, slots, progresses, sprites, scrollViews }
   } finally {
     await page.close()
   }
@@ -913,7 +962,7 @@ async function rasterizePanels(page: Page, outputDir: string): Promise<PanelRast
   return results
 }
 
-async function rasterizeButtons(page: Page, outputDir: string): Promise<ButtonRaster[]> {
+async function rasterizeButtons(page: Page, outputDir: string, viewStacks: ViewStackDecl[]): Promise<ButtonRaster[]> {
   const elements = await page.$$('[data-andesite-type="button"]')
   const results: ButtonRaster[] = []
   for (const el of elements) {
@@ -922,8 +971,22 @@ async function rasterizeButtons(page: Page, outputDir: string): Promise<ButtonRa
     }
     const id = await el.evaluate((node: Element) => node.getAttribute('data-andesite-id') ?? '')
     const mountId = await collectHudMountId(el)
-     const defaultVisible = await readDefaultVisible(el)
-    const box = await measureAndesiteBox(el)
+    const defaultVisible = await readDefaultVisible(el)
+    // ADialog 的遮罩按钮（id 以 _mask 结尾）：从 dialog 的 viewStack 声明中取尺寸，确保铺满全屏拦截点击
+    const isDialogMask = id.endsWith('_mask')
+    let box: DomBox
+    if (isDialogMask) {
+      const dialogId = id.replace(/_mask$/, '')
+      const dialogStack = viewStacks.find(s => s.id === dialogId)
+      const openView = dialogStack?.views.find(v => v.name === 'open')
+      if (openView) {
+        box = { x: openView.x, y: openView.y, width: openView.width, height: openView.height }
+      } else {
+        box = await measureAndesiteBox(el)
+      }
+    } else {
+      box = await measureAndesiteBox(el)
+    }
     const pressDuration = Number(await el.evaluate((node: Element) => node.getAttribute('data-andesite-press-duration') ?? '2'))
     const clickable = await collectButtonClickable(el)
     const layer = optionalNumber(await el.evaluate((node: Element) => node.getAttribute('data-andesite-layer')))
@@ -955,10 +1018,17 @@ async function rasterizeButtons(page: Page, outputDir: string): Promise<ButtonRa
       frames.push(screenshot)
     }
     if (frames.length === 2) {
-      const atlas = await combinePngsVertically(page, frames)
+      // ADialog 遮罩按钮（id 以 _mask 结尾）：默认/按下态相同，直接用单帧，不生成纵向 atlas
+      const isDialogMask = id.endsWith('_mask')
+      let outputPng: Uint8Array
+      if (isDialogMask) {
+        outputPng = frames[0]
+      } else {
+        outputPng = await combinePngsVertically(page, frames)
+      }
       const outputPath = path.join(outputDir, texturePath)
       fs.mkdirSync(path.dirname(outputPath), { recursive: true })
-      fs.writeFileSync(outputPath, atlas)
+      fs.writeFileSync(outputPath, outputPng)
       results.push({
         id,
         mountId,
@@ -1104,14 +1174,28 @@ async function captureButtonPng(page: Page, el: Awaited<ReturnType<Page['$']>>):
 
     const rect = (node as HTMLElement).getBoundingClientRect()
     const clone = node.cloneNode(true) as HTMLElement
+    // ADialog 遮罩按钮（id 以 _mask 结尾）：按 dialog 声明尺寸截图，不受当前视图状态影响
+    const isDialogMask = (node as HTMLElement).getAttribute('data-andesite-id')?.endsWith('_mask')
+    let captureWidth = Math.max(1, Math.round(rect.width))
+    let captureHeight = Math.max(1, Math.round(rect.height))
+    if (isDialogMask) {
+      // 从 dialog 的 viewStack 取尺寸（ADialog 渲染为 AViewStack，data-andesite-viewstack=id）
+      const dialogId = (node as HTMLElement).getAttribute('data-andesite-id')?.replace(/_mask$/, '')
+      const viewStackEl = document.querySelector(`[data-andesite-viewstack="${dialogId}"]`)
+      if (viewStackEl) {
+        const stackRect = viewStackEl.getBoundingClientRect()
+        captureWidth = Math.max(1, Math.round(stackRect.width))
+        captureHeight = Math.max(1, Math.round(stackRect.height))
+      }
+    }
     // 按钮常用 w-full / absolute 子层，独立截图时必须脱离原布局后固化测量尺寸。
     clone.style.position = 'relative'
     clone.style.left = '0'
     clone.style.top = '0'
     clone.style.right = 'auto'
     clone.style.bottom = 'auto'
-    clone.style.width = `${Math.max(1, Math.round(rect.width))}px`
-    clone.style.height = `${Math.max(1, Math.round(rect.height))}px`
+    clone.style.width = `${captureWidth}px`
+    clone.style.height = `${captureHeight}px`
     clone.style.margin = '0'
     // 外层容器 box-shadow（底座/扩散投影）溢出边框盒，克隆截图需按外扩 clip 保留，
     // 与面板路径一致；否则按钮底部投影在编译产物里被裁掉（dev 实时渲染不受影响）。