@ray-js/robot-map 0.0.5-beta.2 → 0.0.5-beta.4

package/lib/RjsComponent/index.js

@@ -16,6 +16,9 @@ const componentOptions = {
     mapApi: null
   },
   properties: {
+    containerId: {
+      type: String
+    },
     path: {
       type: String,
       observer: function (newValue, oldValue) {
@@ -129,8 +132,11 @@ const componentOptions = {
       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
       });

package/lib/RjsComponent/index.rjs

@@ -5,16 +5,16 @@ 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 = {}

package/lib/RjsRobotMap.js

@@ -9,6 +9,7 @@ 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 { nanoid } from 'nanoid/non-secure';
 import RjsComponent from './RjsComponent';
 import { robotMapDefaultProps } from './props';
 
@@ -39,6 +40,8 @@ const RjsRobotMap = _ref => {
     callbacks = _objectWithoutProperties(_ref, _excluded);
   const componentRef = useRef(null);
   const callbacksRef = useRef(callbacks);
+  // 为每个组件实例生成唯一的 containerId
+  const containerId = useRef("robot-map-container-".concat(nanoid())).current;
 
   // 更新回调引用
   useEffect(() => {
@@ -92,7 +95,8 @@ const RjsRobotMap = _ref => {
     detectedObjects: detectedObjects,
     customElements: customElements,
     config: config,
-    runtime: runtime
+    runtime: runtime,
+    containerId: containerId
   }, eventBindings));
 };
 RjsRobotMap.defaultProps = robotMapDefaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/robot-map",
-  "version": "0.0.5-beta.2",
+  "version": "0.0.5-beta.4",
   "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.2",
+    "@ray-js/robot-map-sdk": "0.0.4-beta.3",
     "clsx": "^1.2.1",
     "nanoid": "^5.1.6"
   },