@open-wxa/wxa-runner-core 0.4.0 → 0.5.0

package/dist/runtime/host.js

@@ -433,8 +433,11 @@
   var SOURCES = ["camera", "album"];
   var SOURCE_LABELS = { camera: "\u62CD\u6444", album: "\u4ECE\u624B\u673A\u76F8\u518C\u9009\u62E9" };
   var DEFAULT_COUNT = 9;
+  var MEDIA_KINDS = ["image", "video"];
+  var FIRST_FRAME_TIMEOUT = 1e3;
+  var countOf = (args) => Math.max(1, Number(args.count) || DEFAULT_COUNT);
   function createMediaApis({ showActionSheet, chooseFiles: chooseFiles2, hasUserActivation: hasUserActivation2, showImagePreview }) {
-    async function chooseImages(args) {
+    async function pickFiles(args, accept) {
       const allowed = SOURCES.filter((source2) => args.sourceType?.includes(source2));
       const sources = allowed.length ? allowed : SOURCES;
       let source = sources[0];
@@ -443,28 +446,33 @@
         if (index === null) return null;
         source = sources[index];
       }
-      const count = Math.max(1, Number(args.count) || DEFAULT_COUNT);
-      const files = await chooseFiles2({ accept: "image/*", multiple: count > 1, capture: source === "camera" });
-      return files && files.slice(0, count);
+      return chooseFiles2({ accept, multiple: countOf(args) > 1, capture: source === "camera" });
     }
-    const saveAll = (files) => Promise.all(files.map((file) => saveTempFile(file, tempFileType(file.name, file.type, "jpg"))));
+    const saveImage = (file) => saveTempFile(file, tempFileType(file.name, file.type, "jpg"));
     return {
       chooseImage: async (args, { api }) => {
-        const files = await chooseImages(args);
+        const files = (await pickFiles(args, "image/*"))?.slice(0, countOf(args));
         if (!files) return fail(api, "cancel");
-        const paths = await saveAll(files);
+        const paths = await Promise.all(files.map(saveImage));
         return ok(api, { tempFilePaths: paths, tempFiles: files.map((file, i) => ({ path: paths[i], size: file.size })) });
       },
       chooseMedia: async (args, { api }) => {
-        const mediaType = args.mediaType?.length ? args.mediaType : ["image", "video"];
-        if (!mediaType.includes("image") && !mediaType.includes("mix")) return fail(api, "wxa-runner \u6682\u4E0D\u652F\u6301\u9009\u62E9\u89C6\u9891");
-        const files = await chooseImages(args);
-        if (!files) return fail(api, "cancel");
-        const paths = await saveAll(files);
-        return ok(api, {
-          type: "image",
-          tempFiles: files.map((file, i) => ({ tempFilePath: paths[i], size: file.size, fileType: "image" }))
-        });
+        const mediaType = args.mediaType?.length ? args.mediaType : MEDIA_KINDS;
+        const mix = mediaType.includes("mix");
+        const requested = MEDIA_KINDS.filter((kind) => mix || mediaType.includes(kind));
+        const kinds = requested.length ? requested : MEDIA_KINDS;
+        const picked = await pickFiles(args, kinds.map((kind) => `${kind}/*`).join(","));
+        if (!picked) return fail(api, "cancel");
+        const kindOf = (file) => kinds.length === 1 ? kinds[0] : file.type.startsWith("video/") ? "video" : "image";
+        const videos = picked.filter((file) => kindOf(file) === "video");
+        const files = (mix || !videos.length ? picked : videos).slice(0, countOf(args));
+        const tempFiles = await Promise.all(files.map(async (file) => kindOf(file) === "video" ? { ...await saveVideo(file), fileType: "video" } : { tempFilePath: await saveImage(file), size: file.size, fileType: "image" }));
+        return ok(api, { type: mix ? "mix" : tempFiles[0].fileType, tempFiles });
+      },
+      chooseVideo: async (args, { api }) => {
+        const file = (await pickFiles({ sourceType: args.sourceType, count: 1 }, "video/*"))?.[0];
+        if (!file) return fail(api, "cancel");
+        return ok(api, await saveVideo(file));
       },
       // 基础库已经把 current 换成了 urls 里的地址；也兼容直接传下标
       previewImage: (args) => {
@@ -493,6 +501,45 @@
       }
     };
   }
+  async function saveVideo(file) {
+    const [tempFilePath, { duration, width, height, thumb }] = await Promise.all([
+      saveTempFile(file, tempFileType(file.name, file.type, "mp4")),
+      readVideo(file)
+    ]);
+    const thumbTempFilePath = thumb ? await saveTempFile(thumb, "jpg") : "";
+    return { tempFilePath, size: file.size, duration, height, width, thumbTempFilePath };
+  }
+  async function readVideo(file) {
+    const video = document.createElement("video");
+    video.muted = true;
+    video.preload = "auto";
+    video.src = URL.createObjectURL(file);
+    try {
+      await new Promise((resolve, reject) => {
+        video.addEventListener("loadedmetadata", resolve, { once: true });
+        video.addEventListener("error", reject, { once: true });
+      });
+      const { videoWidth: width, videoHeight: height } = video;
+      const duration = Number.isFinite(video.duration) ? video.duration : 0;
+      return { duration, width, height, thumb: width && height ? await firstFrame(video) : null };
+    } catch {
+      return { duration: 0, width: 0, height: 0, thumb: null };
+    } finally {
+      URL.revokeObjectURL(video.src);
+    }
+  }
+  async function firstFrame(video) {
+    const loaded = video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA || await Promise.race([
+      new Promise((resolve) => video.addEventListener("loadeddata", () => resolve(true), { once: true })),
+      new Promise((resolve) => setTimeout(() => resolve(false), FIRST_FRAME_TIMEOUT))
+    ]);
+    if (!loaded) return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0);
+    return new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg"));
+  }
   async function fetchFile(path) {
     const url = /^[a-z][a-z\d+.-]*:/i.test(path) ? path : "/" + path.replace(/^\//, "");
     const res = await fetch(url);
@@ -798,11 +845,10 @@
       });
       return regionTree;
     };
-    const showCascade = (model, headerText) => {
+    const showCascade = (model) => {
       const session = showPicker({
         columns: model.columns(),
         current: model.current(),
-        headerText,
         onColumnChange(column, index) {
           model.select(column, index);
           const columns = model.columns();
@@ -816,8 +862,7 @@
       showPickerView: async (args, { api }) => {
         const result = await showPicker({
           columns: [labels(args.array)],
-          current: [Number(args.current) || 0],
-          headerText: args.headerText
+          current: [Number(args.current) || 0]
         }).result;
         return result ? ok(api, { index: result[0] }) : fail(api, "cancel");
       },
@@ -825,7 +870,6 @@
         const session = showPicker({
           columns: (args.array || []).map(labels),
           current: (args.current || []).map((index) => Number(index) || 0),
-          headerText: args.headerText,
           onColumnChange: (column, current) => emitToWebview(webviewId, "onMultiPickerViewChange", { column, current })
         });
         multiPicker = session;
@@ -840,7 +884,7 @@
       },
       showDatePickerView: async (args, { api }) => {
         const model = new DateCascade(args.mode === "time" ? "time" : "date", args.fields, args.range || {}, String(args.current || ""));
-        const result = await showCascade(model, args.headerText);
+        const result = await showCascade(model);
         return result ? ok(api, { value: model.value() }) : fail(api, "cancel");
       },
       showAddressPickerView: async (args, { api }) => {
@@ -920,7 +964,7 @@
     }
     label(column, value) {
       if (this.mode === "time") return pad(value);
-      return value + ["\u5E74", "\u6708", "\u65E5"][column];
+      return column === 0 ? value + "\u5E74" : pad(value) + ["\u6708", "\u65E5"][column - 1];
     }
   };
   function parseParts(text) {
@@ -1578,6 +1622,18 @@
       if (this.bridge && this.win) fn(this.bridge, this.win);
       else this.pending.push(fn);
     }
+    /**
+     * 把逻辑层的画布放进这一页编号为 canvasNumber 的 wx-canvas，盖在它自己的 canvas 上（样式见 webviewHtml 的 .wxa-service-canvas）。
+     * 编号在 wx-canvas 的组件实例上，DOM 节点经 __wxElement 找到组件实例
+     */
+    placeCanvas(canvas, canvasNumber) {
+      const target = Array.from(this.win?.document.querySelectorAll("wx-canvas") ?? []).find((element2) => element2.__wxElement?._canvasNumber === canvasNumber);
+      const own = target?.querySelector(":scope > canvas");
+      if (!own) return false;
+      canvas.classList.add("wxa-service-canvas");
+      own.after(canvas);
+      return true;
+    }
     /** 页面样式里的 env(safe-area-inset-*) 构建时已改写成这些变量，见 rewriteSafeAreaInsets */
     setSafeAreaInsets(insets) {
       this.dispatch((_bridge, win) => {
@@ -1694,7 +1750,7 @@
   var DEVICE_BEZEL = 13;
   var STAGE_PADDING = 24;
   var STAGE_GAP = 16;
-  var PICKER_ITEM_HEIGHT = 34;
+  var PICKER_ITEM_HEIGHT = 48;
   var SHELL_CSS = `
 html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50% 0%, #f6f7f9 0%, #e6e9ee 100%); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
 .wxa-stage { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${STAGE_GAP}px; padding: ${STAGE_PADDING}px; box-sizing: border-box; }
@@ -1748,18 +1804,23 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
 .wxa-actionsheet-alert { padding: 16px; font-size: 13px; color: #888; text-align: center; background: #fff; }
 .wxa-actionsheet button { display: block; width: 100%; height: 56px; border: 0; border-top: 1px solid rgba(0,0,0,.06); background: #fff; font-size: 17px; cursor: pointer; }
 .wxa-actionsheet .wxa-actionsheet-cancel { margin-top: 8px; border-top: 0; }
-.wxa-picker { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: var(--wxa-safe-bottom, 0px); background: #fff; border-radius: 12px 12px 0 0; pointer-events: auto; user-select: none; }
-.wxa-picker-header { display: flex; align-items: center; height: 56px; padding: 0 8px; }
-.wxa-picker-header button { flex: none; border: 0; background: none; padding: 8px 12px; font-size: 17px; cursor: pointer; }
-.wxa-picker-cancel { color: rgba(0,0,0,.9); }
-.wxa-picker-confirm { color: #07c160; font-weight: 600; }
-.wxa-picker-title { flex: 1; overflow: hidden; font-size: 17px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
-.wxa-picker-body { position: relative; display: flex; height: ${PICKER_ITEM_HEIGHT * 5}px; margin: 0 16px 24px; }
+.wxa-picker-layer .wxa-mask.is-dim { background: rgba(0,0,0,.6); animation: wxa-fade-in .3s ease forwards; }
+.wxa-picker { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: var(--wxa-safe-bottom, 0px); background: #fff; pointer-events: auto; user-select: none; animation: wxa-slide-up .3s ease forwards; }
+.wxa-picker-header { position: relative; display: flex; padding: 16px; font-size: 17px; line-height: 1.4; }
+.wxa-picker-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid rgba(0,0,0,.1); transform: scaleY(.5); transform-origin: 0 100%; }
+.wxa-picker-header button { flex: 1; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
+.wxa-picker-cancel { color: rgba(0,0,0,.5); text-align: left; }
+.wxa-picker-confirm { color: #07c160; text-align: right; }
+.wxa-picker-body { position: relative; display: flex; height: ${PICKER_ITEM_HEIGHT * 5}px; overflow: hidden; }
 .wxa-picker-column { flex: 1; min-width: 0; overflow-y: auto; padding: ${PICKER_ITEM_HEIGHT * 2}px 0; box-sizing: border-box; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
 .wxa-picker-column::-webkit-scrollbar { display: none; }
-.wxa-picker-item { height: ${PICKER_ITEM_HEIGHT}px; line-height: ${PICKER_ITEM_HEIGHT}px; padding: 0 4px; overflow: hidden; font-size: 17px; color: rgba(0,0,0,.4); text-align: center; white-space: nowrap; text-overflow: ellipsis; scroll-snap-align: center; cursor: pointer; }
-.wxa-picker-item.is-selected { color: rgba(0,0,0,.9); }
-.wxa-picker-indicator { position: absolute; left: 0; right: 0; top: ${PICKER_ITEM_HEIGHT * 2}px; height: ${PICKER_ITEM_HEIGHT}px; border-radius: 8px; background: rgba(0,0,0,.05); pointer-events: none; }
+/* \u5F00\u53D1\u8005\u5DE5\u5177\u91CC\u9009\u9879\u6CA1\u6709\u5355\u72EC\u8BBE\u7F6E\u5B57\u53F7\uFF0C\u7EE7\u627F\u5230\u7684\u662F 11px\uFF08\u6309\u5B83\u7684\u622A\u56FE\u91CF\u5F97\uFF09 */
+.wxa-picker-item { height: ${PICKER_ITEM_HEIGHT}px; line-height: ${PICKER_ITEM_HEIGHT}px; overflow: hidden; font-size: 11px; color: rgba(0,0,0,.9); text-align: center; white-space: nowrap; text-overflow: ellipsis; scroll-snap-align: center; cursor: pointer; }
+.wxa-picker-mask { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)), linear-gradient(0deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); background-position: top, bottom; background-size: 100% 92px; background-repeat: no-repeat; }
+.wxa-picker-indicator { position: absolute; left: 0; right: 0; top: 92px; z-index: 1; height: 56px; pointer-events: none; }
+.wxa-picker-indicator::before, .wxa-picker-indicator::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; transform: scaleY(.5); }
+.wxa-picker-indicator::before { top: 0; border-top: 1px solid rgba(0,0,0,.1); transform-origin: 0 0; }
+.wxa-picker-indicator::after { bottom: 0; border-bottom: 1px solid rgba(0,0,0,.1); transform-origin: 0 100%; }
 .wxa-preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; pointer-events: auto; }
 .wxa-preview-image { max-width: 100%; max-height: 100%; object-fit: contain; }
 .wxa-preview-position { position: absolute; top: 60px; left: 0; right: 0; color: #fff; font-size: 15px; text-align: center; pointer-events: none; }
@@ -1778,6 +1839,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
 .wxa-notice-close { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: #999; font-size: 16px; line-height: 20px; cursor: pointer; }
 .wxa-notice-close:hover { background: rgba(0,0,0,.06); color: #111214; }
 @keyframes wxa-spin { to { transform: rotate(360deg); } }
+@keyframes wxa-fade-in { from { opacity: 0; } }
+@keyframes wxa-slide-up { from { transform: translateY(100%); } }
 @keyframes wxa-notice-in { from { opacity: 0; transform: translateY(-8px); } }
 `;
 
@@ -1795,10 +1858,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     const header = element("div", "wxa-picker-header");
     const cancel = element("button", "wxa-picker-cancel", "\u53D6\u6D88");
     const confirm = element("button", "wxa-picker-confirm", "\u786E\u5B9A");
-    header.append(cancel, element("div", "wxa-picker-title", options.headerText || ""), confirm);
+    header.append(cancel, confirm);
     const body = element("div", "wxa-picker-body");
     const columns = options.columns.map((_, index) => new PickerColumn((next) => options.onColumnChange?.(index, next)));
-    body.append(...columns.map((column) => column.el), element("div", "wxa-picker-indicator"));
+    body.append(...columns.map((column) => column.el), element("div", "wxa-picker-mask"), element("div", "wxa-picker-indicator"));
     sheet.append(header, body);
     layer.append(mask, sheet);
     container.appendChild(layer);
@@ -2200,6 +2263,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
   // src/runtime/host/Host.ts
   var ROUTE_DONE_DELAY = 300;
   var PAGE_LOAD_TIMEOUT = 15e3;
+  var BINDING_CANVAS_TYPES = /* @__PURE__ */ new Set(["2d", "webgl", "webgl2"]);
+  var PROBE_TOP = -54321;
   var Host = class {
     constructor(info, root) {
       this.info = info;
@@ -2222,6 +2287,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.nextWebviewId = 1;
       this.routeChain = Promise.resolve();
       this.routeListeners = [];
+      /** 渲染层报来的 2d、webgl 画布，按编号记下所在页面和最近的位置，供 placeCanvas 认出逻辑层的画布元素 */
+      this.canvases = /* @__PURE__ */ new Map();
       this.device = info.device;
       this.shell = new PhoneShell(root, info.device);
       this.tabPaths = new Set((info.wxConfig.tabBar?.list || []).map((item) => stripHtml(item.pagePath)));
@@ -2260,6 +2327,30 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     registerAppContext(win) {
       this.appContext = win;
     }
+    /**
+     * 逻辑层的画布元素上没有编号，只能问基础库：给每个还没放好的同类型画布发一条 top 带记号的 canvasUpdated，
+     * 基础库把位置写到那个编号的元素上，记号落在这个元素上就是它；随后用原来的位置再发一次，恢复原样。
+     * 基础库只在类型与画布一致时才调到元素的 getContext，按类型筛选不会漏掉
+     */
+    placeCanvas(canvas, type) {
+      const service = this.service;
+      if (!service) return;
+      const update = (canvasNumber, record, top) => service.bridge.__dispatchSub(
+        "canvasUpdated",
+        this.cloneForService({ data: { canvasNumber, ...record.box, top }, options: { timestamp: Date.now() } }),
+        record.webviewId
+      );
+      for (const [canvasNumber, record] of this.canvases) {
+        if (record.placed || record.type !== type) continue;
+        update(canvasNumber, record, PROBE_TOP);
+        const matched = canvas.style.top === `${PROBE_TOP}px`;
+        update(canvasNumber, record, record.box.top);
+        if (matched) {
+          record.placed = this.pages.get(record.webviewId)?.placeCanvas(canvas, canvasNumber) ?? false;
+          return;
+        }
+      }
+    }
     frameLoaded(kind, webviewId) {
       if (kind === "service") this.serviceLoaded();
       else this.pages.get(webviewId)?.loaded();
@@ -2283,11 +2374,27 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       }
       if (event === "operateMapCallback" && this.mapOperations.receive(data)) return;
       const fromId = this.webviewIdOf(win);
+      this.trackCanvas(event, data?.data, fromId);
       const service = this.service;
       if (!service) return;
       const payload = this.cloneForService(data);
       queueMicrotask(() => service.bridge.__dispatchSub(event, payload, fromId));
     }
+    /**
+     * xr-frame 的画布不记：基础库收到它的 canvasUpdated 会派发 resize 给 xr-frame，探测会带来多余的 resize，
+     * 而 xr-frame 在 wxa-runner 里没有验证过，保持原样
+     */
+    trackCanvas(event, data, webviewId) {
+      if (!data) return;
+      const record = this.canvases.get(data.canvasNumber);
+      if (event === "canvasInserted" && data.type && BINDING_CANVAS_TYPES.has(data.type) && !data.isXrFrame) {
+        this.canvases.set(data.canvasNumber, { webviewId, type: data.type, box: { top: 0, left: 0, width: 0, height: 0, ...boxOf(data) }, placed: false });
+      } else if (event === "canvasUpdated" && record) {
+        record.box = { ...record.box, ...boxOf(data) };
+      } else if (event === "canvasRemoved") {
+        this.canvases.delete(data.canvasNumber);
+      }
+    }
     /** 不指定目标时发给所有页面：旧版 canvas 的绘制指令就是这样发的，由 canvasNumber 找到对应画布 */
     publishToPages(event, data, webviewIds) {
       const targets = webviewIds?.length ? webviewIds.map((id) => this.pages.get(Number(id))) : this.livePages();
@@ -2445,6 +2552,9 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       if (this.tabPages.get(page.path) === page) this.tabPages.delete(page.path);
       this.pages.delete(page.id);
       page.destroy();
+      for (const [canvasNumber, record] of this.canvases) {
+        if (record.webviewId === page.id) this.canvases.delete(canvasNumber);
+      }
     }
     activate(page, openType) {
       for (const other of this.pages.values()) {
@@ -2593,6 +2703,13 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       }
     };
   }
+  function boxOf(data) {
+    const box = {};
+    for (const key of ["top", "left", "width", "height"]) {
+      if (data[key] !== void 0) box[key] = data[key];
+    }
+    return box;
+  }
   function stripHtml(path) {
     return path.replace(/\.html$/, "");
   }