@ray-js/robot-map 0.0.2 → 0.0.5-beta.10

package/lib/RjsComponent/index.js

@@ -5,17 +5,19 @@ import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 /* eslint-disable func-names */
 import Render from './index.rjs';
-import { MAP_API_METHODS, MAP_CALLBACK_METHODS } from '@ray-js/robot-map-sdk';
+import { MAP_CALLBACK_METHODS } from '@ray-js/robot-map-sdk';
 import { isEqual } from 'lodash-es';
 const componentOptions = {
   options: {
     pureDataPattern: /^init$/
   },
   data: {
-    initialized: false,
-    mapApi: null
+    initialized: false
   },
   properties: {
+    containerId: {
+      type: String
+    },
     path: {
       type: String,
       observer: function (newValue, oldValue) {
@@ -126,11 +128,13 @@ const componentOptions = {
   lifetimes: {
     created() {
       this.render = new Render(this);
-      this.mapApi = null;
     },
     async ready() {
-      const config = this.properties.config || {};
-      await this.render.initialize(config);
+      const {
+        config: configProp = {},
+        containerId
+      } = this.properties;
+      await this.render.initialize(configProp || {}, containerId);
       this.setData({
         initialized: true
       });
@@ -183,56 +187,26 @@ const componentOptions = {
   },
   pageLifetimes: {},
   methods: {
-    // 为 render 对象动态添加 API 代理方法
-    setupApiProxyMethods() {
-      const {
-        render
-      } = this;
-      if (!render) {
-        return;
+    // 调用 RJS 层的 mapInstance 方法（异步，通过回调返回结果）
+    invokeMapApi(requestId, methodName, args) {
+      if (this.render) {
+        this.render.callMapInstanceMethodAsync(requestId, methodName, ...args);
       }
-
-      // 如果已经设置过，不重复设置（使用标记避免重复执行）
-      if (render.__apiProxyMethodsSetup) {
-        return;
-      }
-      MAP_API_METHODS.forEach(methodName => {
-        // 为 this.render 添加代理方法，通过 callMapInstanceMethod 来间接调用
-        // 因为 render.mapInstance 在外部无法访问（封装的私有属性）
-        render[methodName] = function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          return render.callMapInstanceMethod(methodName, ...args);
-        };
-      });
-
-      // 标记已设置，避免重复执行
-      render.__apiProxyMethodsSetup = true;
-    },
-    // 创建MapApi对象，将rjs方法映射为API
-    createMapApi() {
-      if (!this.render) {
-        return null;
-      }
-      const mapApi = {};
-      MAP_API_METHODS.forEach(methodName => {
-        // 将方法绑定到 this.render，这样调用时会通过 render 代理到 mapInstance
-        if (typeof this.render[methodName] === 'function') {
-          mapApi[methodName] = this.render[methodName].bind(this.render);
-        }
+    },
+    // 接收 RJS 层的 API 调用结果回调
+    onApiResponse(requestId, result, error) {
+      this.triggerEvent('onApiResponse', {
+        requestId,
+        result,
+        error
       });
-      return mapApi;
     },
     // 处理rjs回调事件
     onInitialized() {
-      // 确保代理方法已设置（防止时序问题）
-      this.setupApiProxyMethods();
-      this.mapApi = this.createMapApi();
-      this.setData({
-        mapApi: this.mapApi
+      // 传递组件实例，让 TS 层可以通过 instance.invokeMapApi() 调用方法
+      this.triggerEvent('onInitialized', {
+        instance: this
       });
-      this.triggerEvent('onInitialized', this.mapApi);
     }
   }
 };
@@ -240,8 +214,8 @@ const componentOptions = {
 // 动态添加所有 MAP_CALLBACK_METHODS 中定义的回调方法
 MAP_CALLBACK_METHODS.forEach(methodName => {
   componentOptions.methods[methodName] = function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
     this.triggerEvent(methodName, ...args);
   };

package/lib/RjsComponent/index.rjs

@@ -1,20 +1,20 @@
-import { MapApplication, MAP_API_METHODS, MAP_CALLBACK_METHODS } from "@ray-js/robot-map-sdk/rjs";
+import { MapApplication, MAP_CALLBACK_METHODS } from "@ray-js/robot-map-sdk/rjs";
 import { decodeMap, decodeMapStructured, decodePath } from '@ray-js/robot-protocol'
 
 export default Render({
   mapInstance: null,
   initialized: false,
 
-  async initialize(config = {}) {
+  async initialize(config = {}, containerId = 'container') {
     const { mapInstance } = this;
-    
+
     if (mapInstance) {
       console.warn('Map instance already initialized')
       return
     }
 
     this.mapInstance = new MapApplication()
-    const containerElement = document.getElementById('container')
+    const containerElement = document.getElementById(containerId)
 
     // 定义事件处理器
     const events = {}
@@ -140,11 +140,22 @@ export default Render({
 
   // 通用的 API 调用方法，用于代理所有 mapInstance 上的方法
   // 因为外部无法直接访问 this.mapInstance，所以提供这个方法来间接调用
-  callMapInstanceMethod(methodName, ...args) {
+  // 注意：RJS 层无法直接 return 值给 JS 层，需要通过 callMethod 回调
+  callMapInstanceMethodAsync(requestId, methodName, ...args) {
+    let result = null
+    let error = null
+
     if (this.mapInstance && typeof this.mapInstance[methodName] === 'function') {
-      return this.mapInstance[methodName](...args)
+      try {
+        result = this.mapInstance[methodName](...args)
+      } catch (e) {
+        error = e?.message || String(e)
+      }
+    } else {
+      error = `Method ${methodName} not available on mapInstance`
     }
-    console.warn(`Method ${methodName} not available on mapInstance`)
-    return null
+
+    // 通过 callMethod 将结果回调给 JS 层
+    this.callMethod('onApiResponse', requestId, result, error)
   }
 })

package/lib/RjsComponent/index.tyml

@@ -1 +1 @@
-<view id="container" />
+<view id="{{containerId}}" class="container" />

package/lib/RjsComponent/index.tyss

@@ -1,4 +1,4 @@
-#container {
+.container {
   position: absolute;
   width: 100%;
   height: 100%;

package/lib/RjsRobotMap.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 const _excluded = ["map", "path", "roomProperties", "forbiddenSweepZones", "forbiddenMopZones", "cleanZones", "virtualWalls", "spots", "wayPoints", "detectedObjects", "customElements", "config", "runtime", "onMapReady"];
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.for-each.js";
@@ -8,17 +7,13 @@ import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/esnext.iterator.reduce.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useCallback, useEffect, useRef, useMemo } from 'react';
-import { MAP_CALLBACK_METHODS } from '@ray-js/robot-map-sdk';
+import { MAP_CALLBACK_METHODS, MAP_API_METHODS } from '@ray-js/robot-map-sdk';
+import { nanoid } from 'nanoid/non-secure';
 import RjsComponent from './RjsComponent';
 import { robotMapDefaultProps } from './props';
 
-// 回调名到事件名的映射
-const CALLBACK_TO_EVENT_MAP = _objectSpread({
-  onInitialized: 'onInitialized'
-}, MAP_CALLBACK_METHODS.reduce((acc, methodName) => {
-  acc[methodName] = methodName;
-  return acc;
-}, {}));
+// 存储待处理的请求：requestId -> { resolve, reject }
+
 const RjsRobotMap = _ref => {
   let {
       map,
@@ -39,35 +34,98 @@ const RjsRobotMap = _ref => {
     callbacks = _objectWithoutProperties(_ref, _excluded);
   const componentRef = useRef(null);
   const callbacksRef = useRef(callbacks);
+  // 存储小程序组件实例的引用
+  const instanceRef = useRef(null);
+  // 存储待处理的 API 请求
+  const pendingRequestsRef = useRef(new Map());
+  // 为每个组件实例生成唯一的 containerId
+  const containerId = useRef("robot-map-container-".concat(nanoid())).current;
 
   // 更新回调引用
   useEffect(() => {
     callbacksRef.current = callbacks;
   });
 
-  // 事件分发函数 - 这个函数是稳定的，不会随渲染变化
+  // 事件分发函数
   const eventDispatcher = useCallback(function (eventName) {
-    const propName = CALLBACK_TO_EVENT_MAP[eventName];
-    if (propName && callbacksRef.current[propName]) {
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
+    var _callbacksRef$current, _callbacksRef$current2;
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    (_callbacksRef$current = (_callbacksRef$current2 = callbacksRef.current)[eventName]) === null || _callbacksRef$current === void 0 || _callbacksRef$current.call(_callbacksRef$current2, ...args);
+  }, []);
+
+  // 在 TS 层创建 mapApi，每个方法返回 Promise
+  const createMapApi = useCallback(() => {
+    const mapApi = MAP_API_METHODS.reduce((acc, methodName) => {
+      acc[methodName] = function () {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return new Promise((resolve, reject) => {
+          const instance = instanceRef.current;
+          if (!instance) {
+            reject(new Error('Map instance not available'));
+            return;
+          }
+
+          // 生成唯一的请求 ID
+          const requestId = nanoid();
+
+          // 存储 resolve/reject，等待回调
+          pendingRequestsRef.current.set(requestId, {
+            resolve,
+            reject
+          });
+
+          // 调用组件实例的方法，通知 RJS 层执行
+          instance.invokeMapApi(requestId, methodName, args);
+        });
+      };
+      return acc;
+    }, {});
+    return mapApi;
+  }, []);
+
+  // 处理 API 响应事件
+  const handleApiResponse = useCallback(event => {
+    const {
+      requestId,
+      result,
+      error
+    } = event.detail || {};
+    const pending = pendingRequestsRef.current.get(requestId);
+    if (pending) {
+      pendingRequestsRef.current.delete(requestId);
+      if (error) {
+        pending.reject(new Error(error));
+      } else {
+        pending.resolve(result);
       }
-      // 调用最新的prop回调
-      callbacksRef.current[propName](...args);
     }
   }, []);
 
   // 处理初始化完成事件
   const handleInitialized = useCallback(event => {
-    const api = event.detail;
-    onMapReady === null || onMapReady === void 0 || onMapReady(api);
-    eventDispatcher('onInitialized', api);
-  }, [onMapReady, eventDispatcher]);
+    const {
+      instance
+    } = event.detail || {};
+    if (instance) {
+      // 保存组件实例引用
+      instanceRef.current = instance;
+
+      // 创建 mapApi
+      const mapApi = createMapApi();
+      onMapReady === null || onMapReady === void 0 || onMapReady(mapApi);
+      eventDispatcher('onInitialized', mapApi);
+    }
+  }, [onMapReady, eventDispatcher, createMapApi]);
 
   // 动态生成所有回调处理函数的绑定属性
   const eventBindings = useMemo(() => {
     const bindings = {
-      bindonInitialized: handleInitialized
+      bindonInitialized: handleInitialized,
+      bindonApiResponse: handleApiResponse
     };
 
     // 为 MAP_CALLBACK_METHODS 中的每个方法创建绑定
@@ -77,7 +135,7 @@ const RjsRobotMap = _ref => {
       };
     });
     return bindings;
-  }, [handleInitialized, eventDispatcher]);
+  }, [handleInitialized, handleApiResponse, eventDispatcher]);
   return /*#__PURE__*/React.createElement(RjsComponent, _extends({
     ref: componentRef,
     map: map,
@@ -92,7 +150,8 @@ const RjsRobotMap = _ref => {
     detectedObjects: detectedObjects,
     customElements: customElements,
     config: config,
-    runtime: runtime
+    runtime: runtime,
+    containerId: containerId
   }, eventBindings));
 };
 RjsRobotMap.defaultProps = robotMapDefaultProps;

package/lib/RobotMap.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AppOptions } from '@ray-js/robot-map-sdk';
 import { RobotMapProps } from './props';
 declare const RobotMap: {
-    ({ map, path, roomProperties, forbiddenSweepZones, forbiddenMopZones, cleanZones, virtualWalls, spots, wayPoints, detectedObjects, customElements, onMapReady, config, runtime, ...callbacks }: RobotMapProps & AppOptions['events']): React.JSX.Element;
+    ({ map, path, roomProperties, forbiddenSweepZones, forbiddenMopZones, cleanZones, virtualWalls, spots, wayPoints, detectedObjects, customElements, customCarpets, onMapReady, config, runtime, ...callbacks }: RobotMapProps & AppOptions['events']): React.JSX.Element;
     defaultProps: RobotMapProps;
     displayName: string;
 };

package/lib/RobotMap.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-const _excluded = ["map", "path", "roomProperties", "forbiddenSweepZones", "forbiddenMopZones", "cleanZones", "virtualWalls", "spots", "wayPoints", "detectedObjects", "customElements", "onMapReady", "config", "runtime"];
+const _excluded = ["map", "path", "roomProperties", "forbiddenSweepZones", "forbiddenMopZones", "cleanZones", "virtualWalls", "spots", "wayPoints", "detectedObjects", "customElements", "customCarpets", "onMapReady", "config", "runtime"];
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
@@ -13,7 +13,6 @@ import { createWebviewContext, WebView } from '@ray-js/ray';
 import { MAP_API_METHODS, MAP_CALLBACK_METHODS } from '@ray-js/robot-map-sdk';
 import { nanoid } from 'nanoid/non-secure';
 import { robotMapDefaultProps } from './props';
-
 // 回调名到事件名的映射
 const CALLBACK_TO_EVENT_MAP = _objectSpread({
   onInitialized: 'onInitialized'
@@ -34,6 +33,7 @@ const RobotMap = _ref => {
       wayPoints,
       detectedObjects,
       customElements,
+      customCarpets,
       onMapReady,
       config = {},
       runtime = {}
@@ -56,7 +56,8 @@ const RobotMap = _ref => {
     onReceiveWayPoints: () => {},
     onReceiveDetectedObjects: () => {},
     onReceiveCustomElements: () => {},
-    onUpdateRuntime: () => {}
+    onUpdateRuntime: () => {},
+    onReceiveCustomCarpets: () => {}
   });
   const handleMessage = useCallback(event => {
     if (invoke.current) {
@@ -104,6 +105,7 @@ const RobotMap = _ref => {
     triggersRef.current.onReceiveDetectedObjects = invoke.current.bind('onReceiveDetectedObjects');
     triggersRef.current.onReceiveCustomElements = invoke.current.bind('onReceiveCustomElements');
     triggersRef.current.onUpdateRuntime = invoke.current.bind('onUpdateRuntime');
+    triggersRef.current.onReceiveCustomCarpets = invoke.current.bind('onReceiveCustomCarpets');
 
     // 为每个需要的事件定义分发函数
     Object.keys(CALLBACK_TO_EVENT_MAP).forEach(eventName => {
@@ -178,6 +180,11 @@ const RobotMap = _ref => {
       triggersRef.current.onReceiveCustomElements(customElements);
     }
   }, [customElements, mapApi]);
+  useEffect(() => {
+    if (mapApi && customCarpets) {
+      triggersRef.current.onReceiveCustomCarpets(customCarpets);
+    }
+  }, [customCarpets, mapApi]);
   useEffect(() => {
     if (mapApi && runtime) {
       var _runtime$dividingRoom;

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export { RobotMap } from './RobotMap';
 export { RjsRobotMap } from './RjsRobotMap';
+export type { MapApi } from './types';
 export * from '@ray-js/robot-map-sdk';

package/lib/index.js

@@ -1,3 +1,7 @@
 export { RobotMap } from './RobotMap';
 export { RjsRobotMap } from './RjsRobotMap';
+
+// 先导出我们的类型定义（覆盖 MapApi 为 Promise 版本）
+
+// 然后导出 SDK 的其他内容（MapApi 会被我们的定义覆盖）
 export * from '@ray-js/robot-map-sdk';

package/lib/props.d.ts

@@ -1,4 +1,5 @@
-import { DeepPartialAppConfig, DeepPartialRuntimeConfig, MapApi, RoomProperty, ZoneParam, VirtualWallParam, DetectedObjectParam, CustomElementParam, MapState, PathState, Point, RoomData, SpotParam, WayPointParam } from '@ray-js/robot-map-sdk';
+import { DeepPartialAppConfig, DeepPartialRuntimeConfig, RoomProperty, ZoneParam, VirtualWallParam, DetectedObjectParam, CustomElementParam, MapState, PathState, Point, RoomData, SpotParam, WayPointParam, CustomCarpetParam } from '@ray-js/robot-map-sdk';
+import { MapApi } from './types';
 /**
  * 机器人地图组件属性接口
  *
@@ -83,6 +84,13 @@ export interface RobotMapProps {
      * @description.en User-defined map elements, which can be images, GIFs, and HTML.
      */
     customElements?: CustomElementParam[];
+    /**
+     * @description.zh 自定义地毯
+     * @description.en Custom carpets
+     * @description.zh 用户自定义的地毯信息，支持图片、GIF和HTML三种格式。
+     * @description.en User-defined carpet information, which can be images, GIFs, and HTML.
+     */
+    customCarpets?: CustomCarpetParam[];
     /**
      * @description.zh 配置项
      * @description.en Configuration options
@@ -102,7 +110,7 @@ export interface RobotMapProps {
      * @description.en Callback when the map is initialized and the API is ready
      * @description.zh 当地图组件初始化完成并且所有API功能可用时触发的回调函数。
      * @description.en Callback function triggered when the map component is initialized and all API functions are available.
-     * @param mapApi - 可供使用的地图 API 函数对象 / Available map API functions object
+     * @param mapApi - 可供使用的地图 API 函数对象，所有方法返回 Promise / Available map API functions object, all methods return Promise
      */
     onMapReady?: (mapApi: MapApi) => void;
     /**
@@ -114,6 +122,7 @@ export interface RobotMapProps {
      * @param.en mapState - Map state information including map ID, origin, dimensions, etc.
      */
     onMapFirstDrawed?: (mapState: MapState) => void;
+    onCarpetsUpdated?: (carpets: CustomCarpetParam[]) => void;
     /**
      * @description.zh 地图绘制完成回调
      * @description.en Callback when the map is drawn

package/lib/types.d.ts

@@ -0,0 +1,8 @@
+import { MapApi as OriginalMapApi } from '@ray-js/robot-map-sdk';
+/**
+ * MapApi 类型定义（所有方法返回 Promise）
+ * MapApi type definition (all methods return Promise)
+ */
+export type MapApi = {
+    [K in keyof OriginalMapApi]: OriginalMapApi[K] extends (...args: infer Args) => infer Return ? (...args: Args) => Promise<Return> : OriginalMapApi[K];
+};

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/robot-map",
-  "version": "0.0.2",
+  "version": "0.0.5-beta.10",
   "description": "机器人地图组件",
   "main": "lib/index",
   "files": [
@@ -33,7 +33,7 @@
     "@ray-js/ray": "^1.7.39"
   },
   "dependencies": {
-    "@ray-js/robot-map-sdk": "^0.0.4-beta.1",
+    "@ray-js/robot-map-sdk": "^0.0.5-beta.1",
     "clsx": "^1.2.1",
     "nanoid": "^5.1.6"
   },