@ohos-ports/slides-grab 1.5.0-beta.0

package/src/editor/screenshot.js

@@ -0,0 +1,82 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+// OHOS: Use system Haitai browser via CDP bridge instead of standalone Chromium
+const { launchBrowserViaCdp, loadPageUrl } = require('../ohos-browser-bridge.cjs');
+
+export const SCREENSHOT_SIZE = { width: 1600, height: 900 };
+
+/**
+ * Launch a reusable headless Chromium browser.
+ * Caller is responsible for closing the browser when done.
+ */
+export async function createScreenshotBrowser() {
+  if (process.platform === 'openharmony') {
+    const browser = await launchBrowserViaCdp();
+    return { browser };
+  }
+  const { chromium } = require('playwright');
+  const browser = await chromium.launch({ headless: true });
+  return { browser };
+}
+
+/**
+ * Create a fresh screenshot page/context from an existing browser.
+ * Caller must close the returned context.
+ */
+export async function createScreenshotPage(browser, screenshotSize = SCREENSHOT_SIZE) {
+  const context = await browser.newContext({ viewport: screenshotSize });
+  const page = await context.newPage();
+  return { context, page };
+}
+
+/**
+ * Capture a screenshot of a single slide HTML file.
+ *
+ * @param {import('playwright').Page} page  – reusable Playwright page
+ * @param {string} slideFile               – filename, e.g. "slide-04.html"
+ * @param {string} screenshotPath          – output PNG path
+ * @param {string} slidesDir               – directory containing the slide files
+ * @param {object} [options]
+ * @param {boolean} [options.useHttp]       – if true, slidesDir is treated as a base URL
+ */
+export async function captureSlideScreenshot(page, slideFile, screenshotPath, slidesDir, options = {}) {
+  const screenshotSize = options.screenshotSize || SCREENSHOT_SIZE;
+  const slideUrl = options.useHttp
+    ? `${slidesDir}/${slideFile}`
+    : pathToFileURL(join(slidesDir, slideFile)).href;
+
+  await loadPageUrl(page, slideUrl, { waitUntil: 'load' });
+  await page.evaluate(async () => {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+  });
+
+  await page.evaluate(({ width, height }) => {
+    const htmlStyle = document.documentElement.style;
+    const bodyStyle = document.body.style;
+
+    htmlStyle.margin = '0';
+    htmlStyle.padding = '0';
+    htmlStyle.overflow = 'hidden';
+    htmlStyle.background = '#ffffff';
+
+    bodyStyle.margin = '0';
+    bodyStyle.padding = '0';
+    bodyStyle.transformOrigin = 'top left';
+
+    const rect = document.body.getBoundingClientRect();
+    const sourceWidth = rect.width > 0 ? rect.width : width;
+    const sourceHeight = rect.height > 0 ? rect.height : height;
+    const scale = Math.min(width / sourceWidth, height / sourceHeight);
+
+    bodyStyle.transform = `scale(${scale})`;
+  }, screenshotSize);
+
+  await page.screenshot({
+    path: screenshotPath,
+    fullPage: false,
+  });
+}

package/src/export-resolution.cjs

@@ -0,0 +1,68 @@
+const {
+  DEFAULT_SLIDE_MODE,
+  getSlideModeConfig,
+} = require('./slide-mode.cjs');
+
+const RESOLUTION_HEIGHTS = Object.freeze({
+  '720p': 720,
+  '1080p': 1080,
+  '1440p': 1440,
+  '2160p': 2160,
+});
+
+const RESOLUTION_ALIASES = Object.freeze({
+  '4k': '2160p',
+  uhd: '2160p',
+});
+
+function getResolutionChoices() {
+  return Object.keys(RESOLUTION_HEIGHTS);
+}
+
+function normalizeResolutionPreset(value, options = {}) {
+  const { allowEmpty = true } = options;
+
+  if (typeof value !== 'string') {
+    if (allowEmpty) {
+      return '';
+    }
+    throw new Error(`--resolution must be one of: ${getResolutionChoices().join(', ')}, 4k`);
+  }
+
+  const trimmed = value.trim().toLowerCase();
+  if (trimmed === '') {
+    if (allowEmpty) {
+      return '';
+    }
+    throw new Error(`--resolution must be one of: ${getResolutionChoices().join(', ')}, 4k`);
+  }
+
+  const normalized = RESOLUTION_ALIASES[trimmed] || trimmed;
+  if (!RESOLUTION_HEIGHTS[normalized]) {
+    throw new Error(`Unknown resolution "${value}". Expected one of: ${getResolutionChoices().join(', ')}, 4k`);
+  }
+
+  return normalized;
+}
+
+function getResolutionSize(value, slideMode = DEFAULT_SLIDE_MODE) {
+  const normalized = normalizeResolutionPreset(value);
+  if (!normalized) {
+    return null;
+  }
+
+  const height = RESOLUTION_HEIGHTS[normalized];
+  const { framePx } = getSlideModeConfig(slideMode);
+  const aspectRatio = framePx.width / framePx.height;
+  return {
+    width: Math.round(height * aspectRatio),
+    height,
+  };
+}
+
+module.exports = {
+  RESOLUTION_PRESETS: RESOLUTION_HEIGHTS,
+  getResolutionChoices,
+  getResolutionSize,
+  normalizeResolutionPreset,
+};

package/src/figma.js

@@ -0,0 +1,71 @@
+import { createRequire } from 'node:module';
+import { mkdir } from 'node:fs/promises';
+import { basename, dirname, extname, join, resolve } from 'node:path';
+
+const require = createRequire(import.meta.url);
+const {
+  DEFAULT_SLIDE_MODE,
+  getSlideModeConfig,
+} = require('./slide-mode.cjs');
+
+export const DEFAULT_FIGMA_SUFFIX = '-figma.pptx';
+export const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
+export const FIGMA_EXPORT_LAYOUT_NAME = 'SLIDES_GRAB_STANDARD';
+export const SLIDE_WIDTH_INCHES = 10;
+export const SLIDE_HEIGHT_INCHES = 5.625;
+
+export function buildDefaultFigmaOutput(slidesDir) {
+  const absoluteSlidesDir = resolve(slidesDir);
+  const deckName = basename(absoluteSlidesDir);
+  const parentDir = dirname(absoluteSlidesDir);
+  return join(parentDir, `${deckName}${DEFAULT_FIGMA_SUFFIX}`);
+}
+
+export function normalizeFigmaOutput(slidesDir, output) {
+  if (typeof output === 'string' && output.trim() !== '') {
+    const trimmed = output.trim();
+    return extname(trimmed).toLowerCase() === '.pptx' ? trimmed : `${trimmed}.pptx`;
+  }
+
+  return buildDefaultFigmaOutput(slidesDir);
+}
+
+export function getFigmaImportCaveats() {
+  return [
+    'Figma export is experimental / unstable. Figma imports PPTX best-effort, and complex layouts, shadows, and grouped elements can shift or flatten.',
+    'Fonts are resolved inside Figma. If Pretendard is unavailable there, expect substitution and reflow.',
+    'Import is one-way. Re-importing creates a new Figma Slides file instead of updating the existing one.',
+    'Review every imported slide, especially chart-heavy slides and text near slide edges.',
+  ];
+}
+
+export function getFigmaManualImportInstructions() {
+  return 'Figma Slides -> Import -> select the generated .pptx file.';
+}
+
+export function configureFigmaExportPresentation(pres, slideMode = DEFAULT_SLIDE_MODE) {
+  const { figmaSizeIn } = getSlideModeConfig(slideMode);
+  pres.defineLayout({
+    name: FIGMA_EXPORT_LAYOUT_NAME,
+    width: figmaSizeIn.width,
+    height: figmaSizeIn.height,
+  });
+  pres.layout = FIGMA_EXPORT_LAYOUT_NAME;
+  return pres;
+}
+
+export async function ensureOutputDirectory(outputFile) {
+  await mkdir(dirname(resolve(outputFile)), { recursive: true });
+}
+
+function toSlideOrder(fileName) {
+  const match = fileName.match(/\d+/);
+  return match ? Number.parseInt(match[0], 10) : Number.POSITIVE_INFINITY;
+}
+
+export function sortFigmaSlideFiles(a, b) {
+  const orderA = toSlideOrder(a);
+  const orderB = toSlideOrder(b);
+  if (orderA !== orderB) return orderA - orderB;
+  return a.localeCompare(b);
+}

package/src/html2pptx-scale.cjs

@@ -0,0 +1,120 @@
+const PX_PER_IN = 96;
+const EMU_PER_IN = 914400;
+
+function validateDimensions(bodyDimensions, pres, options = {}) {
+  const errors = [];
+  const widthInches = bodyDimensions.width / PX_PER_IN;
+  const heightInches = bodyDimensions.height / PX_PER_IN;
+  const { fitToLayout = false } = options;
+
+  if (!pres.presLayout) return errors;
+
+  const layoutWidth = pres.presLayout.width / EMU_PER_IN;
+  const layoutHeight = pres.presLayout.height / EMU_PER_IN;
+
+  if (fitToLayout) {
+    const sourceAspectRatio = widthInches / heightInches;
+    const layoutAspectRatio = layoutWidth / layoutHeight;
+    if (Math.abs(sourceAspectRatio - layoutAspectRatio) > 0.01) {
+      errors.push(
+        `HTML aspect ratio (${widthInches.toFixed(1)}" × ${heightInches.toFixed(1)}") ` +
+        `doesn't match presentation layout (${layoutWidth.toFixed(1)}" × ${layoutHeight.toFixed(1)}")`,
+      );
+    }
+    return errors;
+  }
+
+  if (Math.abs(layoutWidth - widthInches) > 0.1 || Math.abs(layoutHeight - heightInches) > 0.1) {
+    errors.push(
+      `HTML dimensions (${widthInches.toFixed(1)}" × ${heightInches.toFixed(1)}") ` +
+      `don't match presentation layout (${layoutWidth.toFixed(1)}" × ${layoutHeight.toFixed(1)}")`,
+    );
+  }
+  return errors;
+}
+
+function getLayoutScale(bodyDimensions, pres) {
+  if (!pres.presLayout) {
+    return { x: 1, y: 1, point: 1 };
+  }
+
+  const layoutWidth = pres.presLayout.width / EMU_PER_IN;
+  const layoutHeight = pres.presLayout.height / EMU_PER_IN;
+  const sourceWidth = bodyDimensions.width / PX_PER_IN;
+  const sourceHeight = bodyDimensions.height / PX_PER_IN;
+  const x = layoutWidth / sourceWidth;
+  const y = layoutHeight / sourceHeight;
+
+  return { x, y, point: (x + y) / 2 };
+}
+
+function scaleTextRun(run, pointScale) {
+  if (!run || !run.options) return;
+  if (Number.isFinite(run.options.fontSize)) run.options.fontSize *= pointScale;
+  if (run.options.bullet && Number.isFinite(run.options.bullet.indent)) {
+    run.options.bullet.indent *= pointScale;
+  }
+}
+
+function scaleSlideData(slideData, scale) {
+  if (!slideData || (Math.abs(scale.x - 1) < 0.001 && Math.abs(scale.y - 1) < 0.001)) {
+    return;
+  }
+
+  for (const placeholder of slideData.placeholders || []) {
+    placeholder.x *= scale.x;
+    placeholder.y *= scale.y;
+    placeholder.w *= scale.x;
+    placeholder.h *= scale.y;
+  }
+
+  for (const element of slideData.elements || []) {
+    if (element.position) {
+      element.position.x *= scale.x;
+      element.position.y *= scale.y;
+      element.position.w *= scale.x;
+      element.position.h *= scale.y;
+    }
+
+    if (element.type === 'line') {
+      element.x1 *= scale.x;
+      element.x2 *= scale.x;
+      element.y1 *= scale.y;
+      element.y2 *= scale.y;
+      element.width *= scale.point;
+    }
+
+    if (element.style) {
+      for (const key of ['fontSize', 'lineSpacing', 'paraSpaceBefore', 'paraSpaceAfter']) {
+        if (Number.isFinite(element.style[key])) element.style[key] *= scale.point;
+      }
+      if (Array.isArray(element.style.margin)) {
+        element.style.margin = element.style.margin.map((value) => value * scale.point);
+      }
+    }
+
+    if (element.shape) {
+      if (Number.isFinite(element.shape.rectRadius)) element.shape.rectRadius *= scale.point;
+      if (element.shape.line && Number.isFinite(element.shape.line.width)) {
+        element.shape.line.width *= scale.point;
+      }
+      if (element.shape.shadow) {
+        if (Number.isFinite(element.shape.shadow.blur)) element.shape.shadow.blur *= scale.point;
+        if (Number.isFinite(element.shape.shadow.offset)) element.shape.shadow.offset *= scale.point;
+      }
+    }
+
+    if (Array.isArray(element.text)) {
+      for (const run of element.text) scaleTextRun(run, scale.point);
+    }
+    if (Array.isArray(element.items)) {
+      for (const run of element.items) scaleTextRun(run, scale.point);
+    }
+  }
+}
+
+module.exports = {
+  getLayoutScale,
+  scaleSlideData,
+  validateDimensions,
+};