@ray-js/robot-map 0.0.2-beta-3 → 0.0.2-beta-5

package/lib/RjsComponent/index.js

@@ -0,0 +1,230 @@
+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";
+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';
+const componentOptions = {
+  options: {
+    pureDataPattern: /^init$/
+  },
+  data: {
+    initialized: false,
+    mapApi: null
+  },
+  properties: {
+    path: {
+      type: String,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceivePath(newValue);
+        }
+      }
+    },
+    map: {
+      type: String,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveMap(newValue);
+        }
+      }
+    },
+    roomProperties: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveRoomProperties(newValue);
+        }
+      }
+    },
+    forbiddenSweepZones: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveForbiddenSweepZones(newValue);
+        }
+      }
+    },
+    forbiddenMopZones: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveForbiddenMopZones(newValue);
+        }
+      }
+    },
+    cleanZones: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveCleanZones(newValue);
+        }
+      }
+    },
+    spots: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveSpots(newValue);
+        }
+      }
+    },
+    virtualWalls: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveVirtualWalls(newValue);
+        }
+      }
+    },
+    detectedObjects: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveDetectedObjects(newValue);
+        }
+      }
+    },
+    customElements: {
+      type: Array,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onReceiveCustomElements(newValue);
+        }
+      }
+    },
+    config: {
+      type: Object,
+      observer: function () {
+        // config在初始化时设置，不需要动态更新
+      }
+    },
+    runtime: {
+      type: Object,
+      observer: function (newValue, oldValue) {
+        if (newValue !== oldValue && this.data.initialized && this.render) {
+          this.render.onUpdateRuntime(newValue);
+        }
+      }
+    }
+  },
+  lifetimes: {
+    created() {
+      this.render = new Render(this);
+      this.mapApi = null;
+    },
+    async ready() {
+      const config = this.properties.config || {};
+      await this.render.initialize(config);
+      this.setData({
+        initialized: true
+      });
+      if (this.data.map) {
+        this.render.onReceiveMap(this.data.map);
+      }
+      if (this.data.path) {
+        this.render.onReceivePath(this.data.path);
+      }
+      if (this.data.roomProperties) {
+        this.render.onReceiveRoomProperties(this.data.roomProperties);
+      }
+      if (this.data.forbiddenSweepZones) {
+        this.render.onReceiveForbiddenSweepZones(this.data.forbiddenSweepZones);
+      }
+      if (this.data.forbiddenMopZones) {
+        this.render.onReceiveForbiddenMopZones(this.data.forbiddenMopZones);
+      }
+      if (this.data.cleanZones) {
+        this.render.onReceiveCleanZones(this.data.cleanZones);
+      }
+      if (this.data.virtualWalls) {
+        this.render.onReceiveVirtualWalls(this.data.virtualWalls);
+      }
+      if (this.data.spots) {
+        this.render.onReceiveSpots(this.data.spots);
+      }
+      if (this.data.detectedObjects) {
+        this.render.onReceiveDetectedObjects(this.data.detectedObjects);
+      }
+      if (this.data.customElements) {
+        this.render.onReceiveCustomElements(this.data.customElements);
+      }
+      if (this.data.runtime) {
+        this.render.onUpdateRuntime(this.data.runtime);
+      }
+    },
+    detached() {
+      if (this.render) {
+        this.render.destroy();
+      }
+    }
+  },
+  pageLifetimes: {},
+  methods: {
+    // 为 render 对象动态添加 API 代理方法
+    setupApiProxyMethods() {
+      const {
+        render
+      } = this;
+      if (!render) {
+        return;
+      }
+
+      // 如果已经设置过，不重复设置（使用标记避免重复执行）
+      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);
+        }
+      });
+      return mapApi;
+    },
+    // 处理rjs回调事件
+    onInitialized() {
+      // 确保代理方法已设置（防止时序问题）
+      this.setupApiProxyMethods();
+      this.mapApi = this.createMapApi();
+      this.setData({
+        mapApi: this.mapApi
+      });
+      this.triggerEvent('onInitialized', this.mapApi);
+    }
+  }
+};
+
+// 动态添加所有 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];
+    }
+    this.triggerEvent(methodName, ...args);
+  };
+});
+
+// eslint-disable-next-line no-undef
+Component(componentOptions);

package/lib/RjsComponent/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/lib/RjsComponent/index.rjs

@@ -0,0 +1,144 @@
+import { MapApplication, MAP_API_METHODS, MAP_CALLBACK_METHODS } from "@ray-js/robot-map-sdk";
+import { decodeMap, decodeMapStructured, decodePath } from '@ray-js/robot-protocol'
+
+export default Render({
+  mapInstance: null,
+  initialized: false,
+
+  async initialize(config = {}) {
+    const { mapInstance } = this;
+    
+    if (mapInstance) {
+      console.warn('Map instance already initialized')
+      return
+    }
+
+    this.mapInstance = new MapApplication()
+    const containerElement = document.getElementById('container')
+
+    console.log('=====================containerElement', containerElement)
+
+    // 定义事件处理器
+    const events = {}
+    
+    // 使用从SDK导入的回调方法
+    MAP_CALLBACK_METHODS.forEach(methodName => {
+      events[methodName] = (...args) => {
+        // 通过callMethod与ts通信
+        this.callMethod(methodName, ...args)
+      }
+    })
+
+    await this.mapInstance.initialize({
+      resizeTo: containerElement ?? window,
+      events,
+      config,
+    })
+
+    if (containerElement) {
+      containerElement.appendChild(this.mapInstance.canvas)
+    } else {
+      document.body.appendChild(this.mapInstance.canvas)
+    }
+
+    this.initialized = true
+    this.callMethod('onInitialized')
+  },
+
+  // 接收地图数据
+  onReceiveMap(map) {
+    if (!this.mapInstance || !map) return
+
+    if (map.startsWith('7b22')) {
+      // 结构化协议地图数据
+      this.mapInstance.drawMap(decodeMapStructured(map))
+    } else {
+      // 点云结构地图数据
+      const rasterMapData = decodeMap(map)
+      if (rasterMapData) {
+        this.mapInstance.drawRasterMap(rasterMapData)
+      } else {
+        console.error('Failed to decode raster map data')
+      }
+    }
+  },
+
+  // 接收路径数据
+  onReceivePath(path) {
+    if (!this.mapInstance || !path) return
+    this.mapInstance.drawPath(decodePath(path))
+  },
+
+  // 接收房间属性
+  onReceiveRoomProperties(roomProperties) {
+    if (!this.mapInstance || !roomProperties) return
+    this.mapInstance.drawRoomProperty(roomProperties)
+  },
+
+  // 接收禁扫区域
+  onReceiveForbiddenSweepZones(zones) {
+    if (!this.mapInstance || !zones) return
+    this.mapInstance.drawForbiddenSweepZones(zones)
+  },
+
+  // 接收禁拖区域
+  onReceiveForbiddenMopZones(zones) {
+    if (!this.mapInstance || !zones) return
+    this.mapInstance.drawForbiddenMopZones(zones)
+  },
+
+  // 接收清洁区域
+  onReceiveCleanZones(zones) {
+    if (!this.mapInstance || !zones) return
+    this.mapInstance.drawCleanZones(zones)
+  },
+
+  // 接收虚拟墙
+  onReceiveVirtualWalls(walls) {
+    if (!this.mapInstance || !walls) return
+    this.mapInstance.drawVirtualWalls(walls)
+  },
+
+  // 接收定点清扫
+  onReceiveSpots(spots) {
+    if (!this.mapInstance || !spots) return
+    this.mapInstance.drawSpots(spots)
+  },
+
+  // 接收检测对象
+  onReceiveDetectedObjects(objects) {
+    if (!this.mapInstance || !objects) return
+    this.mapInstance.drawDetectedObjects(objects)
+  },
+
+  // 接收自定义元素
+  onReceiveCustomElements(elements) {
+    if (!this.mapInstance || !elements) return
+    this.mapInstance.drawCustomElements(elements)
+  },
+
+  // 更新运行时配置
+  onUpdateRuntime(runtime) {
+    if (!this.mapInstance || !runtime) return
+    this.mapInstance.updateRuntime(runtime)
+  },
+
+  // 销毁地图实例
+  destroy() {
+    if (this.mapInstance) {
+      this.mapInstance.destroy()
+      this.mapInstance = null
+      this.initialized = false
+    }
+  },
+
+  // 通用的 API 调用方法，用于代理所有 mapInstance 上的方法
+  // 因为外部无法直接访问 this.mapInstance，所以提供这个方法来间接调用
+  callMapInstanceMethod(methodName, ...args) {
+    if (this.mapInstance && typeof this.mapInstance[methodName] === 'function') {
+      return this.mapInstance[methodName](...args)
+    }
+    console.warn(`Method ${methodName} not available on mapInstance`)
+    return null
+  }
+})

package/lib/RjsComponent/index.tyml

@@ -0,0 +1 @@
+<view id="container" />

package/lib/RjsComponent/index.tyss

@@ -0,0 +1,5 @@
+#container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}

package/lib/RjsRobotMap.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { AppOptions } from '@ray-js/robot-map-sdk';
+import { RobotMapProps } from './props';
+declare const RjsRobotMap: FC<RobotMapProps & AppOptions['events']>;
+export default RjsRobotMap;

package/lib/RjsRobotMap.js

@@ -0,0 +1,98 @@
+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", "detectedObjects", "customElements", "config", "runtime", "onMapReady"];
+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";
+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 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;
+}, {}));
+const RjsRobotMap = _ref => {
+  let {
+      map,
+      path,
+      roomProperties,
+      forbiddenSweepZones,
+      forbiddenMopZones,
+      cleanZones,
+      virtualWalls,
+      spots,
+      detectedObjects,
+      customElements,
+      config,
+      runtime,
+      onMapReady
+    } = _ref,
+    callbacks = _objectWithoutProperties(_ref, _excluded);
+  const componentRef = useRef(null);
+  const callbacksRef = useRef(callbacks);
+
+  // 更新回调引用
+  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];
+      }
+      // 调用最新的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 eventBindings = useMemo(() => {
+    const bindings = {
+      bindonInitialized: handleInitialized
+    };
+
+    // 为 MAP_CALLBACK_METHODS 中的每个方法创建绑定
+    MAP_CALLBACK_METHODS.forEach(methodName => {
+      bindings["bind".concat(methodName)] = event => {
+        eventDispatcher(methodName, event.detail);
+      };
+    });
+    return bindings;
+  }, [handleInitialized, eventDispatcher]);
+  return /*#__PURE__*/React.createElement(RjsComponent, _extends({
+    ref: componentRef,
+    map: map,
+    path: path,
+    roomProperties: roomProperties,
+    forbiddenSweepZones: forbiddenSweepZones,
+    forbiddenMopZones: forbiddenMopZones,
+    cleanZones: cleanZones,
+    virtualWalls: virtualWalls,
+    spots: spots,
+    detectedObjects: detectedObjects,
+    customElements: customElements,
+    config: config,
+    runtime: runtime
+  }, eventBindings));
+};
+RjsRobotMap.defaultProps = robotMapDefaultProps;
+RjsRobotMap.displayName = 'RjsRobotMap';
+export default RjsRobotMap;

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export { default as RobotMap } from './RobotMap';
+export { default as RjsRobotMap } from './RjsRobotMap';
 export * from '@ray-js/robot-map-sdk';

package/lib/index.js

@@ -1,2 +1,3 @@
 export { default as RobotMap } from './RobotMap';
+export { default as RjsRobotMap } from './RjsRobotMap';
 export * from '@ray-js/robot-map-sdk';

package/package.json

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