@ray-js/robot-map-sdk 0.0.9 → 0.0.10

package/dist-docs/assets/chunks/vanilla-picker.B6E6ObS_.js

@@ -0,0 +1,8 @@
+/*!
+ * vanilla-picker v2.12.3
+ * https://vanilla-picker.js.org
+ *
+ * Copyright 2017-2024 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
+ * Released under the ISC license.
+ */var O=function(l,n){if(!(l instanceof n))throw new TypeError("Cannot call a class as a function")},R=function(){function l(n,e){for(var t=0;t<e.length;t++){var r=e[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}return function(n,e,t){return e&&l(n.prototype,e),t&&l(n,t),n}}(),y=function(){function l(n,e){var t=[],r=!0,i=!1,o=void 0;try{for(var c=n[Symbol.iterator](),a;!(r=(a=c.next()).done)&&(t.push(a.value),!(e&&t.length===e));r=!0);}catch(s){i=!0,o=s}finally{try{!r&&c.return&&c.return()}finally{if(i)throw o}}return t}return function(n,e){if(Array.isArray(n))return n;if(Symbol.iterator in Object(n))return l(n,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();String.prototype.startsWith=String.prototype.startsWith||function(l){return this.indexOf(l)===0};String.prototype.padStart=String.prototype.padStart||function(l,n){for(var e=this;e.length<l;)e=n+e;return e};var I={cb:"0f8ff",tqw:"aebd7",q:"-ffff",qmrn:"7fffd4",zr:"0ffff",bg:"5f5dc",bsq:"e4c4",bck:"---",nch:"ebcd",b:"--ff",bvt:"8a2be2",brwn:"a52a2a",brw:"deb887",ctb:"5f9ea0",hrt:"7fff-",chcT:"d2691e",cr:"7f50",rnw:"6495ed",crns:"8dc",crms:"dc143c",cn:"-ffff",Db:"--8b",Dcn:"-8b8b",Dgnr:"b8860b",Dgr:"a9a9a9",Dgrn:"-64-",Dkhk:"bdb76b",Dmgn:"8b-8b",Dvgr:"556b2f",Drng:"8c-",Drch:"9932cc",Dr:"8b--",Dsmn:"e9967a",Dsgr:"8fbc8f",DsTb:"483d8b",DsTg:"2f4f4f",Dtrq:"-ced1",Dvt:"94-d3",ppnk:"1493",pskb:"-bfff",mgr:"696969",grb:"1e90ff",rbrc:"b22222",rwht:"af0",stg:"228b22",chs:"-ff",gnsb:"dcdcdc",st:"8f8ff",g:"d7-",gnr:"daa520",gr:"808080",grn:"-8-0",grnw:"adff2f",hnw:"0fff0",htpn:"69b4",nnr:"cd5c5c",ng:"4b-82",vr:"0",khk:"0e68c",vnr:"e6e6fa",nrb:"0f5",wngr:"7cfc-",mnch:"acd",Lb:"add8e6",Lcr:"08080",Lcn:"e0ffff",Lgnr:"afad2",Lgr:"d3d3d3",Lgrn:"90ee90",Lpnk:"b6c1",Lsmn:"a07a",Lsgr:"20b2aa",Lskb:"87cefa",LsTg:"778899",Lstb:"b0c4de",Lw:"e0",m:"-ff-",mgrn:"32cd32",nn:"af0e6",mgnt:"-ff",mrn:"8--0",mqm:"66cdaa",mmb:"--cd",mmrc:"ba55d3",mmpr:"9370db",msg:"3cb371",mmsT:"7b68ee","":"-fa9a",mtr:"48d1cc",mmvt:"c71585",mnLb:"191970",ntc:"5fffa",mstr:"e4e1",mccs:"e4b5",vjw:"dead",nv:"--80",c:"df5e6",v:"808-0",vrb:"6b8e23",rng:"a5-",rngr:"45-",rch:"da70d6",pgnr:"eee8aa",pgrn:"98fb98",ptrq:"afeeee",pvtr:"db7093",ppwh:"efd5",pchp:"dab9",pr:"cd853f",pnk:"c0cb",pm:"dda0dd",pwrb:"b0e0e6",prp:"8-080",cc:"663399",r:"--",sbr:"bc8f8f",rb:"4169e1",sbrw:"8b4513",smn:"a8072",nbr:"4a460",sgrn:"2e8b57",ssh:"5ee",snn:"a0522d",svr:"c0c0c0",skb:"87ceeb",sTb:"6a5acd",sTgr:"708090",snw:"afa",n:"-ff7f",stb:"4682b4",tn:"d2b48c",t:"-8080",thst:"d8bfd8",tmT:"6347",trqs:"40e0d0",vt:"ee82ee",whT:"5deb3",wht:"",hts:"5f5f5",w:"-",wgrn:"9acd32"};function A(l){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1,e=n>0?l.toFixed(n).replace(/0+$/,"").replace(/\.$/,""):l.toString();return e||"0"}var N=function(){function l(n,e,t,r){O(this,l);var i=this;function o(a){if(a.startsWith("hsl")){var s=a.match(/([\-\d\.e]+)/g).map(Number),p=y(s,4),f=p[0],u=p[1],d=p[2],b=p[3];b===void 0&&(b=1),f/=360,u/=100,d/=100,i.hsla=[f,u,d,b]}else if(a.startsWith("rgb")){var m=a.match(/([\-\d\.e]+)/g).map(Number),h=y(m,4),v=h[0],g=h[1],E=h[2],k=h[3];k===void 0&&(k=1),i.rgba=[v,g,E,k]}else a.startsWith("#")?i.rgba=l.hexToRgb(a):i.rgba=l.nameToRgb(a)||l.hexToRgb(a)}if(n!==void 0)if(Array.isArray(n))this.rgba=n;else if(t===void 0){var c=n&&""+n;c&&o(c.toLowerCase())}else this.rgba=[n,e,t,r===void 0?1:r]}return R(l,[{key:"printRGB",value:function(e){var t=e?this.rgba:this.rgba.slice(0,3),r=t.map(function(i,o){return A(i,o===3?3:0)});return e?"rgba("+r+")":"rgb("+r+")"}},{key:"printHSL",value:function(e){var t=[360,100,100,1],r=["","%","%",""],i=e?this.hsla:this.hsla.slice(0,3),o=i.map(function(c,a){return A(c*t[a],a===3?3:1)+r[a]});return e?"hsla("+o+")":"hsl("+o+")"}},{key:"printHex",value:function(e){var t=this.hex;return e?t:t.substring(0,7)}},{key:"rgba",get:function(){if(this._rgba)return this._rgba;if(!this._hsla)throw new Error("No color is set");return this._rgba=l.hslToRgb(this._hsla)},set:function(e){e.length===3&&(e[3]=1),this._rgba=e,this._hsla=null}},{key:"rgbString",get:function(){return this.printRGB()}},{key:"rgbaString",get:function(){return this.printRGB(!0)}},{key:"hsla",get:function(){if(this._hsla)return this._hsla;if(!this._rgba)throw new Error("No color is set");return this._hsla=l.rgbToHsl(this._rgba)},set:function(e){e.length===3&&(e[3]=1),this._hsla=e,this._rgba=null}},{key:"hslString",get:function(){return this.printHSL()}},{key:"hslaString",get:function(){return this.printHSL(!0)}},{key:"hex",get:function(){var e=this.rgba,t=e.map(function(r,i){return i<3?r.toString(16):Math.round(r*255).toString(16)});return"#"+t.map(function(r){return r.padStart(2,"0")}).join("")},set:function(e){this.rgba=l.hexToRgb(e)}}],[{key:"hexToRgb",value:function(e){var t=(e.startsWith("#")?e.slice(1):e).replace(/^(\w{3})$/,"$1F").replace(/^(\w)(\w)(\w)(\w)$/,"$1$1$2$2$3$3$4$4").replace(/^(\w{6})$/,"$1FF");if(!t.match(/^([0-9a-fA-F]{8})$/))throw new Error("Unknown hex color; "+e);var r=t.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(i){return parseInt(i,16)});return r[3]=r[3]/255,r}},{key:"nameToRgb",value:function(e){var t=e.toLowerCase().replace("at","T").replace(/[aeiouyldf]/g,"").replace("ght","L").replace("rk","D").slice(-5,4),r=I[t];return r===void 0?r:l.hexToRgb(r.replace(/\-/g,"00").padStart(6,"f"))}},{key:"rgbToHsl",value:function(e){var t=y(e,4),r=t[0],i=t[1],o=t[2],c=t[3];r/=255,i/=255,o/=255;var a=Math.max(r,i,o),s=Math.min(r,i,o),p=void 0,f=void 0,u=(a+s)/2;if(a===s)p=f=0;else{var d=a-s;switch(f=u>.5?d/(2-a-s):d/(a+s),a){case r:p=(i-o)/d+(i<o?6:0);break;case i:p=(o-r)/d+2;break;case o:p=(r-i)/d+4;break}p/=6}return[p,f,u,c]}},{key:"hslToRgb",value:function(e){var t=y(e,4),r=t[0],i=t[1],o=t[2],c=t[3],a=void 0,s=void 0,p=void 0;if(i===0)a=s=p=o;else{var f=function(h,v,g){return g<0&&(g+=1),g>1&&(g-=1),g<.16666666666666666?h+(v-h)*6*g:g<.5?v:g<.6666666666666666?h+(v-h)*(.6666666666666666-g)*6:h},u=o<.5?o*(1+i):o+i-o*i,d=2*o-u;a=f(d,u,r+1/3),s=f(d,u,r),p=f(d,u,r-1/3)}var b=[a*255,s*255,p*255].map(Math.round);return b[3]=c,b}}]),l}(),z=function(){function l(){O(this,l),this._events=[]}return R(l,[{key:"add",value:function(e,t,r){e.addEventListener(t,r,!1),this._events.push({target:e,type:t,handler:r})}},{key:"remove",value:function(e,t,r){this._events=this._events.filter(function(i){var o=!0;return e&&e!==i.target&&(o=!1),t&&t!==i.type&&(o=!1),r&&r!==i.handler&&(o=!1),o&&l._doRemove(i.target,i.type,i.handler),!o})}},{key:"destroy",value:function(){this._events.forEach(function(e){return l._doRemove(e.target,e.type,e.handler)}),this._events=[]}}],[{key:"_doRemove",value:function(e,t,r){e.removeEventListener(t,r,!1)}}]),l}();function F(l){var n=document.createElement("div");return n.innerHTML=l,n.firstElementChild}function L(l,n,e){var t=!1;function r(a,s,p){return Math.max(s,Math.min(a,p))}function i(a,s,p){if(p&&(t=!0),!!t){a.preventDefault();var f=n.getBoundingClientRect(),u=f.width,d=f.height,b=s.clientX,m=s.clientY,h=r(b-f.left,0,u),v=r(m-f.top,0,d);e(h/u,v/d)}}function o(a,s){var p=a.buttons===void 0?a.which:a.buttons;p===1?i(a,a,s):t=!1}function c(a,s){a.touches.length===1?i(a,a.touches[0],s):t=!1}l.add(n,"mousedown",function(a){o(a,!0)}),l.add(n,"touchstart",function(a){c(a,!0)}),l.add(window,"mousemove",o),l.add(n,"touchmove",c),l.add(window,"mouseup",function(a){t=!1}),l.add(n,"touchend",function(a){t=!1}),l.add(n,"touchcancel",function(a){t=!1})}var U=`linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 2em 2em,
+                   linear-gradient(45deg, lightgrey 25%,       white 25%,       white 75%, lightgrey 75%) 1em 1em / 2em 2em`,B=360,P="keydown",x="mousedown",T="focusin";function _(l,n){return(n||document).querySelector(l)}function G(l){l.preventDefault(),l.stopPropagation()}function H(l,n,e,t,r){l.add(n,P,function(i){e.indexOf(i.key)>=0&&t(i)})}var K=function(){function l(n){O(this,l),this.settings={popup:"right",layout:"default",alpha:!0,editor:!0,editorFormat:"hex",cancelButton:!1,defaultColor:"#0cf"},this._events=new z,this.onChange=null,this.onDone=null,this.onOpen=null,this.onClose=null,this.setOptions(n)}return R(l,[{key:"setOptions",value:function(e){var t=this;if(!e)return;var r=this.settings;function i(s,p,f){for(var u in s)p[u]=s[u]}if(e instanceof HTMLElement)r.parent=e;else{r.parent&&e.parent&&r.parent!==e.parent&&(this._events.remove(r.parent),this._popupInited=!1),i(e,r),e.onChange&&(this.onChange=e.onChange),e.onDone&&(this.onDone=e.onDone),e.onOpen&&(this.onOpen=e.onOpen),e.onClose&&(this.onClose=e.onClose);var o=e.color||e.colour;o&&this._setColor(o)}var c=r.parent;if(c&&r.popup&&!this._popupInited){var a=function(p){return t.openHandler(p)};this._events.add(c,"click",a),H(this._events,c,[" ","Spacebar","Enter"],a),this._popupInited=!0}else e.parent&&!r.popup&&this.show()}},{key:"openHandler",value:function(e){if(this.show()){e&&e.preventDefault(),this.settings.parent.style.pointerEvents="none";var t=e&&e.type===P?this._domEdit:this.domElement;setTimeout(function(){return t.focus()},100),this.onOpen&&this.onOpen(this.colour)}}},{key:"closeHandler",value:function(e){var t=e&&e.type,r=!1;if(!e)r=!0;else if(t===x||t===T){var i=(this.__containedEvent||0)+100;e.timeStamp>i&&(r=!0)}else G(e),r=!0;r&&this.hide()&&(this.settings.parent.style.pointerEvents="",t!==x&&this.settings.parent.focus(),this.onClose&&this.onClose(this.colour))}},{key:"movePopup",value:function(e,t){this.closeHandler(),this.setOptions(e),t&&this.openHandler()}},{key:"setColor",value:function(e,t){this._setColor(e,{silent:t})}},{key:"_setColor",value:function(e,t){if(typeof e=="string"&&(e=e.trim()),!!e){t=t||{};var r=void 0;try{r=new N(e)}catch(o){if(t.failSilently)return;throw o}if(!this.settings.alpha){var i=r.hsla;i[3]=1,r.hsla=i}this.colour=this.color=r,this._setHSLA(null,null,null,null,t)}}},{key:"setColour",value:function(e,t){this.setColor(e,t)}},{key:"show",value:function(){var e=this.settings.parent;if(!e)return!1;if(this.domElement){var t=this._toggleDOM(!0);return this._setPosition(),t}var r=this.settings.template||'<div class="picker_wrapper" tabindex="-1"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_editor"><input aria-label="Type a color name or hex value"/></div><div class="picker_sample"></div><div class="picker_done"><button>Ok</button></div><div class="picker_cancel"><button>Cancel</button></div></div>',i=F(r);return this.domElement=i,this._domH=_(".picker_hue",i),this._domSL=_(".picker_sl",i),this._domA=_(".picker_alpha",i),this._domEdit=_(".picker_editor input",i),this._domSample=_(".picker_sample",i),this._domOkay=_(".picker_done button",i),this._domCancel=_(".picker_cancel button",i),i.classList.add("layout_"+this.settings.layout),this.settings.alpha||i.classList.add("no_alpha"),this.settings.editor||i.classList.add("no_editor"),this.settings.cancelButton||i.classList.add("no_cancel"),this._ifPopup(function(){return i.classList.add("popup")}),this._setPosition(),this.colour?this._updateUI():this._setColor(this.settings.defaultColor),this._bindEvents(),!0}},{key:"hide",value:function(){return this._toggleDOM(!1)}},{key:"destroy",value:function(){this._events.destroy(),this.domElement&&this.settings.parent.removeChild(this.domElement)}},{key:"_bindEvents",value:function(){var e=this,t=this,r=this.domElement,i=this._events;function o(s,p,f){i.add(s,p,f)}o(r,"click",function(s){return s.preventDefault()}),L(i,this._domH,function(s,p){return t._setHSLA(s)}),L(i,this._domSL,function(s,p){return t._setHSLA(null,s,1-p)}),this.settings.alpha&&L(i,this._domA,function(s,p){return t._setHSLA(null,null,null,1-p)});var c=this._domEdit;o(c,"input",function(s){t._setColor(this.value,{fromEditor:!0,failSilently:!0})}),o(c,"focus",function(s){var p=this;p.selectionStart===p.selectionEnd&&p.select()}),this._ifPopup(function(){var s=function(u){return e.closeHandler(u)};o(window,x,s),o(window,T,s),H(i,r,["Esc","Escape"],s);var p=function(u){e.__containedEvent=u.timeStamp};o(r,x,p),o(r,T,p),o(e._domCancel,"click",s)});var a=function(p){e._ifPopup(function(){return e.closeHandler(p)}),e.onDone&&e.onDone(e.colour)};o(this._domOkay,"click",a),H(i,r,["Enter"],a)}},{key:"_setPosition",value:function(){var e=this.settings.parent,t=this.domElement;e!==t.parentNode&&e.appendChild(t),this._ifPopup(function(r){getComputedStyle(e).position==="static"&&(e.style.position="relative");var i=r===!0?"popup_right":"popup_"+r;["popup_top","popup_bottom","popup_left","popup_right"].forEach(function(o){o===i?t.classList.add(o):t.classList.remove(o)}),t.classList.add(i)})}},{key:"_setHSLA",value:function(e,t,r,i,o){o=o||{};var c=this.colour,a=c.hsla;[e,t,r,i].forEach(function(s,p){(s||s===0)&&(a[p]=s)}),c.hsla=a,this._updateUI(o),this.onChange&&!o.silent&&this.onChange(c)}},{key:"_updateUI",value:function(e){if(!this.domElement)return;e=e||{};var t=this.colour,r=t.hsla,i="hsl("+r[0]*B+", 100%, 50%)",o=t.hslString,c=t.hslaString,a=this._domH,s=this._domSL,p=this._domA,f=_(".picker_selector",a),u=_(".picker_selector",s),d=_(".picker_selector",p);function b(M,S,C){S.style.left=C*100+"%"}function m(M,S,C){S.style.top=C*100+"%"}b(a,f,r[0]),this._domSL.style.backgroundColor=this._domH.style.color=i,b(s,u,r[1]),m(s,u,1-r[2]),s.style.color=o,m(p,d,1-r[3]);var h=o,v=h.replace("hsl","hsla").replace(")",", 0)"),g="linear-gradient("+[h,v]+")";if(this._domA.style.background=g+", "+U,!e.fromEditor){var E=this.settings.editorFormat,k=this.settings.alpha,w=void 0;switch(E){case"rgb":w=t.printRGB(k);break;case"hsl":w=t.printHSL(k);break;default:w=t.printHex(k)}this._domEdit.value=w}this._domSample.style.color=c}},{key:"_ifPopup",value:function(e,t){this.settings.parent&&this.settings.popup?e&&e(this.settings.popup):t&&t()}},{key:"_toggleDOM",value:function(e){var t=this.domElement;if(!t)return!1;var r=e?"":"none",i=t.style.display!==r;return i&&(t.style.display=r),i}}]),l}();{var D=document.createElement("style");D.textContent='.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}',document.documentElement.firstElementChild.appendChild(D),K.StyleElement=D}export{K as default};

package/dist-docs/assets/chunks/webworkerAll.BXgPGAoF.js

@@ -0,0 +1,56 @@
+import{ac as S,ae as I,af as B,aI as O,p as F,M as w,a4 as A,a0 as E,ak as m,T as y,aA as U,X as C,w as M,aj as Y,x as P}from"./index.nS-neZH_.js";import"./framework.CBLqO2Q1.js";import"./mapValues.D2X8cRgC.js";import"./theme.B9FcKggM.js";var X=`in vec2 vTextureCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+void main() {
+    finalColor = texture(uTexture, vTextureCoord);
+}
+`,v=`struct GlobalFilterUniforms {
+  uInputSize: vec4<f32>,
+  uInputPixel: vec4<f32>,
+  uInputClamp: vec4<f32>,
+  uOutputFrame: vec4<f32>,
+  uGlobalFrame: vec4<f32>,
+  uOutputTexture: vec4<f32>,
+};
+
+@group(0) @binding(0) var <uniform> gfu: GlobalFilterUniforms;
+@group(0) @binding(1) var uTexture: texture_2d<f32>;
+@group(0) @binding(2) var uSampler: sampler;
+
+struct VSOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>
+};
+
+fn filterVertexPosition(aPosition: vec2<f32>) -> vec4<f32>
+{
+    var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+
+    position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
+    position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
+
+    return vec4(position, 0.0, 1.0);
+}
+
+fn filterTextureCoord(aPosition: vec2<f32>) -> vec2<f32>
+{
+    return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
+}
+
+@vertex
+fn mainVertex(
+  @location(0) aPosition: vec2<f32>,
+) -> VSOutput {
+  return VSOutput(
+   filterVertexPosition(aPosition),
+   filterTextureCoord(aPosition)
+  );
+}
+
+@fragment
+fn mainFragment(
+  @location(0) uv: vec2<f32>,
+) -> @location(0) vec4<f32> {
+    return textureSample(uTexture, uSampler, uv);
+}
+`;class z extends S{constructor(){const e=I.from({vertex:{source:v,entryPoint:"mainVertex"},fragment:{source:v,entryPoint:"mainFragment"},name:"passthrough-filter"}),t=B.from({vertex:O,fragment:X,name:"passthrough-filter"});super({gpuProgram:e,glProgram:t})}}class R{constructor(e){this._renderer=e}push(e,t,r){this._renderer.renderPipes.batch.break(r),r.add({renderPipeId:"filter",canBundle:!1,action:"pushFilter",container:t,filterEffect:e})}pop(e,t,r){this._renderer.renderPipes.batch.break(r),r.add({renderPipeId:"filter",action:"popFilter",canBundle:!1})}execute(e){e.action==="pushFilter"?this._renderer.filter.push(e):e.action==="popFilter"&&this._renderer.filter.pop()}destroy(){this._renderer=null}}R.extension={type:[F.WebGLPipes,F.WebGPUPipes,F.CanvasPipes],name:"filter"};const k=new w;function V(g,e){e.clear();const t=e.matrix;for(let r=0;r<g.length;r++){const i=g[r];if(i.globalDisplayStatus<7)continue;const n=i.renderGroup??i.parentRenderGroup;n!=null&&n.isCachedAsTexture?e.matrix=k.copyFrom(n.textureOffsetInverseTransform).append(i.worldTransform):n!=null&&n._parentCacheAsTextureRenderGroup?e.matrix=k.copyFrom(n._parentCacheAsTextureRenderGroup.inverseWorldTransform).append(i.groupTransform):e.matrix=i.worldTransform,e.addBounds(i.bounds)}return e.matrix=t,e}const q=new U({attributes:{aPosition:{buffer:new Float32Array([0,0,1,0,1,1,0,1]),format:"float32x2",stride:2*4,offset:0}},indexBuffer:new Uint32Array([0,1,2,0,2,3])});class W{constructor(){this.skip=!1,this.inputTexture=null,this.backTexture=null,this.filters=null,this.bounds=new Y,this.container=null,this.blendRequired=!1,this.outputRenderSurface=null,this.globalFrame={x:0,y:0,width:0,height:0},this.firstEnabledIndex=-1,this.lastEnabledIndex=-1}}class G{constructor(e){this._filterStackIndex=0,this._filterStack=[],this._filterGlobalUniforms=new A({uInputSize:{value:new Float32Array(4),type:"vec4<f32>"},uInputPixel:{value:new Float32Array(4),type:"vec4<f32>"},uInputClamp:{value:new Float32Array(4),type:"vec4<f32>"},uOutputFrame:{value:new Float32Array(4),type:"vec4<f32>"},uGlobalFrame:{value:new Float32Array(4),type:"vec4<f32>"},uOutputTexture:{value:new Float32Array(4),type:"vec4<f32>"}}),this._globalFilterBindGroup=new E({}),this.renderer=e}get activeBackTexture(){var e;return(e=this._activeFilterData)==null?void 0:e.backTexture}push(e){const t=this.renderer,r=e.filterEffect.filters,i=this._pushFilterData();i.skip=!1,i.filters=r,i.container=e.container,i.outputRenderSurface=t.renderTarget.renderSurface;const n=t.renderTarget.renderTarget.colorTexture.source,s=n.resolution,a=n.antialias;if(r.every(d=>!d.enabled)){i.skip=!0;return}const c=i.bounds;if(this._calculateFilterArea(e,c),this._calculateFilterBounds(i,t.renderTarget.rootViewPort,a,s,1),i.skip)return;const l=this._getPreviousFilterData(),f=this._findFilterResolution(s);let u=0,o=0;l&&(u=l.bounds.minX,o=l.bounds.minY),this._calculateGlobalFrame(i,u,o,f,n.width,n.height),this._setupFilterTextures(i,c,t,l)}generateFilteredTexture({texture:e,filters:t}){const r=this._pushFilterData();this._activeFilterData=r,r.skip=!1,r.filters=t;const i=e.source,n=i.resolution,s=i.antialias;if(t.every(d=>!d.enabled))return r.skip=!0,e;const a=r.bounds;if(a.addRect(e.frame),this._calculateFilterBounds(r,a.rectangle,s,n,0),r.skip)return e;const c=n;this._calculateGlobalFrame(r,0,0,c,i.width,i.height),r.outputRenderSurface=m.getOptimalTexture(a.width,a.height,r.resolution,r.antialias),r.backTexture=y.EMPTY,r.inputTexture=e,this.renderer.renderTarget.finishRenderPass(),this._applyFiltersToTexture(r,!0);const o=r.outputRenderSurface;return o.source.alphaMode="premultiplied-alpha",o}pop(){const e=this.renderer,t=this._popFilterData();t.skip||(e.globalUniforms.pop(),e.renderTarget.finishRenderPass(),this._activeFilterData=t,this._applyFiltersToTexture(t,!1),t.blendRequired&&m.returnTexture(t.backTexture),m.returnTexture(t.inputTexture))}getBackTexture(e,t,r){const i=e.colorTexture.source._resolution,n=m.getOptimalTexture(t.width,t.height,i,!1);let s=t.minX,a=t.minY;r&&(s-=r.minX,a-=r.minY),s=Math.floor(s*i),a=Math.floor(a*i);const c=Math.ceil(t.width*i),l=Math.ceil(t.height*i);return this.renderer.renderTarget.copyToTexture(e,n,{x:s,y:a},{width:c,height:l},{x:0,y:0}),n}applyFilter(e,t,r,i){const n=this.renderer,s=this._activeFilterData,c=s.outputRenderSurface===r,l=n.renderTarget.rootRenderTarget.colorTexture.source._resolution,f=this._findFilterResolution(l);let u=0,o=0;if(c){const p=this._findPreviousFilterOffset();u=p.x,o=p.y}this._updateFilterUniforms(t,r,s,u,o,f,c,i);const d=e.enabled?e:this._getPassthroughFilter();this._setupBindGroupsAndRender(d,t,n)}calculateSpriteMatrix(e,t){const r=this._activeFilterData,i=e.set(r.inputTexture._source.width,0,0,r.inputTexture._source.height,r.bounds.minX,r.bounds.minY),n=t.worldTransform.copyTo(w.shared),s=t.renderGroup||t.parentRenderGroup;return s&&s.cacheToLocalTransform&&n.prepend(s.cacheToLocalTransform),n.invert(),i.prepend(n),i.scale(1/t.texture.orig.width,1/t.texture.orig.height),i.translate(t.anchor.x,t.anchor.y),i}destroy(){var e;(e=this._passthroughFilter)==null||e.destroy(!0),this._passthroughFilter=null}_getPassthroughFilter(){return this._passthroughFilter??(this._passthroughFilter=new z),this._passthroughFilter}_setupBindGroupsAndRender(e,t,r){if(r.renderPipes.uniformBatch){const i=r.renderPipes.uniformBatch.getUboResource(this._filterGlobalUniforms);this._globalFilterBindGroup.setResource(i,0)}else this._globalFilterBindGroup.setResource(this._filterGlobalUniforms,0);this._globalFilterBindGroup.setResource(t.source,1),this._globalFilterBindGroup.setResource(t.source.style,2),e.groups[0]=this._globalFilterBindGroup,r.encoder.draw({geometry:q,shader:e,state:e._state,topology:"triangle-list"}),r.type===C.WEBGL&&r.renderTarget.finishRenderPass()}_setupFilterTextures(e,t,r,i){if(e.backTexture=y.EMPTY,e.inputTexture=m.getOptimalTexture(t.width,t.height,e.resolution,e.antialias),e.blendRequired){r.renderTarget.finishRenderPass();const n=r.renderTarget.getRenderTarget(e.outputRenderSurface);e.backTexture=this.getBackTexture(n,t,i==null?void 0:i.bounds)}r.renderTarget.bind(e.inputTexture,!0),r.globalUniforms.push({offset:t})}_calculateGlobalFrame(e,t,r,i,n,s){const a=e.globalFrame;a.x=t*i,a.y=r*i,a.width=n*i,a.height=s*i}_updateFilterUniforms(e,t,r,i,n,s,a,c){const l=this._filterGlobalUniforms.uniforms,f=l.uOutputFrame,u=l.uInputSize,o=l.uInputPixel,d=l.uInputClamp,p=l.uGlobalFrame,x=l.uOutputTexture;a?(f[0]=r.bounds.minX-i,f[1]=r.bounds.minY-n):(f[0]=0,f[1]=0),f[2]=e.frame.width,f[3]=e.frame.height,u[0]=e.source.width,u[1]=e.source.height,u[2]=1/u[0],u[3]=1/u[1],o[0]=e.source.pixelWidth,o[1]=e.source.pixelHeight,o[2]=1/o[0],o[3]=1/o[1],d[0]=.5*o[2],d[1]=.5*o[3],d[2]=e.frame.width*u[2]-.5*o[2],d[3]=e.frame.height*u[3]-.5*o[3];const b=this.renderer.renderTarget.rootRenderTarget.colorTexture;p[0]=i*s,p[1]=n*s,p[2]=b.source.width*s,p[3]=b.source.height*s,t instanceof y&&(t.source.resource=null);const T=this.renderer.renderTarget.getRenderTarget(t);this.renderer.renderTarget.bind(t,!!c),t instanceof y?(x[0]=t.frame.width,x[1]=t.frame.height):(x[0]=T.width,x[1]=T.height),x[2]=T.isRoot?-1:1,this._filterGlobalUniforms.update()}_findFilterResolution(e){let t=this._filterStackIndex-1;for(;t>0&&this._filterStack[t].skip;)--t;return t>0&&this._filterStack[t].inputTexture?this._filterStack[t].inputTexture.source._resolution:e}_findPreviousFilterOffset(){let e=0,t=0,r=this._filterStackIndex;for(;r>0;){r--;const i=this._filterStack[r];if(!i.skip){e=i.bounds.minX,t=i.bounds.minY;break}}return{x:e,y:t}}_calculateFilterArea(e,t){if(e.renderables?V(e.renderables,t):e.filterEffect.filterArea?(t.clear(),t.addRect(e.filterEffect.filterArea),t.applyMatrix(e.container.worldTransform)):e.container.getFastGlobalBounds(!0,t),e.container){const i=(e.container.renderGroup||e.container.parentRenderGroup).cacheToLocalTransform;i&&t.applyMatrix(i)}}_applyFiltersToTexture(e,t){const r=e.inputTexture,i=e.bounds,n=e.filters,s=e.firstEnabledIndex,a=e.lastEnabledIndex;if(this._globalFilterBindGroup.setResource(r.source.style,2),this._globalFilterBindGroup.setResource(e.backTexture.source,3),s===a)n[s].apply(this,r,e.outputRenderSurface,t);else{let c=e.inputTexture;const l=m.getOptimalTexture(i.width,i.height,c.source._resolution,!1);let f=l;for(let u=s;u<a;u++){const o=n[u];if(!o.enabled)continue;o.apply(this,c,f,!0);const d=c;c=f,f=d}n[a].apply(this,c,e.outputRenderSurface,t),m.returnTexture(l)}}_calculateFilterBounds(e,t,r,i,n){var T;const s=this.renderer,a=e.bounds,c=e.filters;let l=1/0,f=0,u=!0,o=!1,d=!1,p=!0,x=-1,b=-1;for(let _=0;_<c.length;_++){const h=c[_];if(!h.enabled)continue;if(x===-1&&(x=_),b=_,l=Math.min(l,h.resolution==="inherit"?i:h.resolution),f+=h.padding,h.antialias==="off"?u=!1:h.antialias==="inherit"&&u&&(u=r),h.clipToViewport||(p=!1),!!!(h.compatibleRenderers&s.type)){d=!1;break}if(h.blendRequired&&!(((T=s.backBuffer)==null?void 0:T.useBackBuffer)??!0)){M("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options."),d=!1;break}d=!0,o||(o=h.blendRequired)}if(!d){e.skip=!0;return}if(p&&a.fitBounds(0,t.width/i,0,t.height/i),a.scale(l).ceil().scale(1/l).pad((f|0)*n),!a.isPositive){e.skip=!0;return}e.antialias=u,e.resolution=l,e.blendRequired=o,e.firstEnabledIndex=x,e.lastEnabledIndex=b}_popFilterData(){return this._filterStackIndex--,this._filterStack[this._filterStackIndex]}_getPreviousFilterData(){let e,t=this._filterStackIndex-1;for(;t>0&&(t--,e=this._filterStack[t],!!e.skip););return e}_pushFilterData(){let e=this._filterStack[this._filterStackIndex];return e||(e=this._filterStack[this._filterStackIndex]=new W),this._filterStackIndex++,e}}G.extension={type:[F.WebGLSystem,F.WebGPUSystem],name:"filter"};P.add(G);P.add(R);

package/dist-docs/assets/{guide_advanced-usage.md.BPrKHNKt.js → guide_advanced-usage.md.COVLyRkA.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1772617250000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="进阶使用" tabindex="-1">进阶使用 <a class="header-anchor" href="#进阶使用" aria-label="Permalink to &quot;进阶使用&quot;">​</a></h1><p>Tuya Robot Map 的进阶使用，包含了我们认为的最佳实践。</p><h2 id="自适应缩放" tabindex="-1">自适应缩放 <a class="header-anchor" href="#自适应缩放" aria-label="Permalink to &quot;自适应缩放&quot;">​</a></h2><p>自适应缩放是地图 SDK 的核心功能之一，它会自动调整地图的缩放比例和位置，确保地图能够以合适的大小居中显示在视口中。</p><h3 id="什么是-scale" tabindex="-1">什么是 scale？ <a class="header-anchor" href="#什么是-scale" aria-label="Permalink to &quot;什么是 scale？&quot;">​</a></h3><p><code>scale</code> 表示地图的缩放比例。<strong><code>scale = 1</code> 表示地图按照真实像素尺寸显示</strong>。</p><p>例如，如果你的地图数据是 300×300 的尺寸：</p><ul><li><code>scale = 1</code> 时，地图会用 300×300 像素显示</li><li><code>scale = 2</code> 时，地图会放大到 600×600 像素</li><li><code>scale = 0.5</code> 时，地图会缩小到 150×150 像素</li></ul><h3 id="自适应缩放的触发时机" tabindex="-1">自适应缩放的触发时机 <a class="header-anchor" href="#自适应缩放的触发时机" aria-label="Permalink to &quot;自适应缩放的触发时机&quot;">​</a></h3><p>自适应缩放会在以下情况自动触发：</p><ol><li><strong>地图首次绘制</strong>：当地图第一次加载时</li><li><strong>地图 ID 变化</strong>：切换到不同的地图时</li><li><strong>地图状态变化</strong>：地图的 <code>status</code> 字段变化时（例如从建图中变为建图完成）</li><li><strong>地图原点变化</strong>：地图的 <code>origin</code> 坐标变化超过阈值时</li><li><strong>地图尺寸变化</strong>：地图的 <code>size</code> (宽度或高度) 变化超过阈值时</li><li><strong>地图旋转</strong>：通过 <code>runtime.mapRotation</code> 旋转地图后</li></ol><h3 id="自适应缩放的计算逻辑" tabindex="-1">自适应缩放的计算逻辑 <a class="header-anchor" href="#自适应缩放的计算逻辑" aria-label="Permalink to &quot;自适应缩放的计算逻辑&quot;">​</a></h3><p>当触发自适应缩放时，SDK 会按照以下步骤计算最终的缩放比例：</p><h4 id="_1-计算初始缩放比例" tabindex="-1">1. 计算初始缩放比例 <a class="header-anchor" href="#_1-计算初始缩放比例" aria-label="Permalink to &quot;1. 计算初始缩放比例&quot;">​</a></h4><p>SDK 会根据 <a href="/reference/config.html#map-autopaddinghorizontalpercent"><code>map.autoPaddingHorizontalPercent</code></a> 和 <a href="/reference/config.html#map-autopaddingverticalpercent"><code>map.autoPaddingVerticalPercent</code></a> 计算出一个初始的缩放比例，确保地图能够完整显示并保留指定的边距。</p><p>例如，如果视口宽度是 375px，<code>autoPaddingHorizontalPercent</code> 是 0.05（默认值），那么：</p><ul><li>水平方向的可用空间 = 375 × (1 - 0.05 × 2) = 337.5px</li><li>如果地图实际宽度是 300px，则计算出的 scale = 337.5 / 300 ≈ 1.125</li><li>如果地图实际宽度是 600px，则计算出的 scale = 337.5 / 600 ≈ 0.5625</li></ul><h4 id="_2-应用缩放比例限制" tabindex="-1">2. 应用缩放比例限制 <a class="header-anchor" href="#_2-应用缩放比例限制" aria-label="Permalink to &quot;2. 应用缩放比例限制&quot;">​</a></h4><p>计算出的初始缩放比例会受到 <a href="/reference/config.html#interaction-fitminscale"><code>interaction.fitMinScale</code></a> 和 <a href="/reference/config.html#interaction-fitmaxscale"><code>interaction.fitMaxScale</code></a> 的限制：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>最终 scale = Math.max(fitMinScale, Math.min(初始 scale, fitMaxScale))</span></span></code></pre></div><h3 id="常见问题与解决方案" tabindex="-1">常见问题与解决方案 <a class="header-anchor" href="#常见问题与解决方案" aria-label="Permalink to &quot;常见问题与解决方案&quot;">​</a></h3><h4 id="问题-1-超大地图显示不全" tabindex="-1">问题 1：超大地图显示不全 <a class="header-anchor" href="#问题-1-超大地图显示不全" aria-label="Permalink to &quot;问题 1：超大地图显示不全&quot;">​</a></h4><p><strong>现象</strong>：地图很大，但只能看到部分内容，无法看到完整地图。</p><p><strong>原因</strong>：当地图尺寸超过视口时，SDK 计算出的缩放比例可能小于 1（需要缩小地图）。但是 <code>fitMinScale</code> 的默认值是 1，会限制地图不能缩小到小于原始尺寸，导致地图无法完整显示。</p><p><strong>解决方案</strong>：将 <code>fitMinScale</code> 设置为小于 1 的值，允许地图缩小。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
+import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1773044166000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="进阶使用" tabindex="-1">进阶使用 <a class="header-anchor" href="#进阶使用" aria-label="Permalink to &quot;进阶使用&quot;">​</a></h1><p>Tuya Robot Map 的进阶使用，包含了我们认为的最佳实践。</p><h2 id="自适应缩放" tabindex="-1">自适应缩放 <a class="header-anchor" href="#自适应缩放" aria-label="Permalink to &quot;自适应缩放&quot;">​</a></h2><p>自适应缩放是地图 SDK 的核心功能之一，它会自动调整地图的缩放比例和位置，确保地图能够以合适的大小居中显示在视口中。</p><h3 id="什么是-scale" tabindex="-1">什么是 scale？ <a class="header-anchor" href="#什么是-scale" aria-label="Permalink to &quot;什么是 scale？&quot;">​</a></h3><p><code>scale</code> 表示地图的缩放比例。<strong><code>scale = 1</code> 表示地图按照真实像素尺寸显示</strong>。</p><p>例如，如果你的地图数据是 300×300 的尺寸：</p><ul><li><code>scale = 1</code> 时，地图会用 300×300 像素显示</li><li><code>scale = 2</code> 时，地图会放大到 600×600 像素</li><li><code>scale = 0.5</code> 时，地图会缩小到 150×150 像素</li></ul><h3 id="自适应缩放的触发时机" tabindex="-1">自适应缩放的触发时机 <a class="header-anchor" href="#自适应缩放的触发时机" aria-label="Permalink to &quot;自适应缩放的触发时机&quot;">​</a></h3><p>自适应缩放会在以下情况自动触发：</p><ol><li><strong>地图首次绘制</strong>：当地图第一次加载时</li><li><strong>地图 ID 变化</strong>：切换到不同的地图时</li><li><strong>地图状态变化</strong>：地图的 <code>status</code> 字段变化时（例如从建图中变为建图完成）</li><li><strong>地图原点变化</strong>：地图的 <code>origin</code> 坐标变化超过阈值时</li><li><strong>地图尺寸变化</strong>：地图的 <code>size</code> (宽度或高度) 变化超过阈值时</li><li><strong>地图旋转</strong>：通过 <code>runtime.mapRotation</code> 旋转地图后</li></ol><h3 id="自适应缩放的计算逻辑" tabindex="-1">自适应缩放的计算逻辑 <a class="header-anchor" href="#自适应缩放的计算逻辑" aria-label="Permalink to &quot;自适应缩放的计算逻辑&quot;">​</a></h3><p>当触发自适应缩放时，SDK 会按照以下步骤计算最终的缩放比例：</p><h4 id="_1-计算初始缩放比例" tabindex="-1">1. 计算初始缩放比例 <a class="header-anchor" href="#_1-计算初始缩放比例" aria-label="Permalink to &quot;1. 计算初始缩放比例&quot;">​</a></h4><p>SDK 会根据 <a href="/reference/config.html#map-autopaddinghorizontalpercent"><code>map.autoPaddingHorizontalPercent</code></a> 和 <a href="/reference/config.html#map-autopaddingverticalpercent"><code>map.autoPaddingVerticalPercent</code></a> 计算出一个初始的缩放比例，确保地图能够完整显示并保留指定的边距。</p><p>例如，如果视口宽度是 375px，<code>autoPaddingHorizontalPercent</code> 是 0.05（默认值），那么：</p><ul><li>水平方向的可用空间 = 375 × (1 - 0.05 × 2) = 337.5px</li><li>如果地图实际宽度是 300px，则计算出的 scale = 337.5 / 300 ≈ 1.125</li><li>如果地图实际宽度是 600px，则计算出的 scale = 337.5 / 600 ≈ 0.5625</li></ul><h4 id="_2-应用缩放比例限制" tabindex="-1">2. 应用缩放比例限制 <a class="header-anchor" href="#_2-应用缩放比例限制" aria-label="Permalink to &quot;2. 应用缩放比例限制&quot;">​</a></h4><p>计算出的初始缩放比例会受到 <a href="/reference/config.html#interaction-fitminscale"><code>interaction.fitMinScale</code></a> 和 <a href="/reference/config.html#interaction-fitmaxscale"><code>interaction.fitMaxScale</code></a> 的限制：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>最终 scale = Math.max(fitMinScale, Math.min(初始 scale, fitMaxScale))</span></span></code></pre></div><h3 id="常见问题与解决方案" tabindex="-1">常见问题与解决方案 <a class="header-anchor" href="#常见问题与解决方案" aria-label="Permalink to &quot;常见问题与解决方案&quot;">​</a></h3><h4 id="问题-1-超大地图显示不全" tabindex="-1">问题 1：超大地图显示不全 <a class="header-anchor" href="#问题-1-超大地图显示不全" aria-label="Permalink to &quot;问题 1：超大地图显示不全&quot;">​</a></h4><p><strong>现象</strong>：地图很大，但只能看到部分内容，无法看到完整地图。</p><p><strong>原因</strong>：当地图尺寸超过视口时，SDK 计算出的缩放比例可能小于 1（需要缩小地图）。但是 <code>fitMinScale</code> 的默认值是 1，会限制地图不能缩小到小于原始尺寸，导致地图无法完整显示。</p><p><strong>解决方案</strong>：将 <code>fitMinScale</code> 设置为小于 1 的值，允许地图缩小。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    interaction: {</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 允许地图缩小到原始尺寸的 50%</span></span>
@@ -808,7 +808,100 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.DRADY2L-.js";const g
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      maxScaleRatio: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,   </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 最大放大到 200%</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }}</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><p>设置 <code>minScaleRatio: 0</code> 表示不限制最小缩放，设置 <code>maxScaleRatio: Infinity</code> 表示不限制最大缩放。</p><h3 id="相关配置项-2" tabindex="-1">相关配置项 <a class="header-anchor" href="#相关配置项-2" aria-label="Permalink to &quot;相关配置项&quot;">​</a></h3><table tabindex="0"><thead><tr><th>配置项</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><a href="/reference/config.html#furniture-assets"><code>furniture.assets</code></a></td><td><code>[内置双人床]</code></td><td>家具素材列表</td></tr><tr><td><a href="/reference/config.html#furniture-opacity"><code>furniture.opacity</code></a></td><td><code>1</code></td><td>家具图片透明度</td></tr><tr><td><a href="/reference/config.html#furniture-rotatedirection"><code>furniture.rotateDirection</code></a></td><td><code>&#39;cw&#39;</code></td><td>旋转方向</td></tr><tr><td><a href="/reference/config.html#furniture-minscaleratio"><code>furniture.minScaleRatio</code></a></td><td><code>0.5</code></td><td>最小缩放倍数</td></tr><tr><td><a href="/reference/config.html#furniture-maxscaleratio"><code>furniture.maxScaleRatio</code></a></td><td><code>2</code></td><td>最大缩放倍数</td></tr><tr><td><a href="/reference/config.html#furniture-iconwrapperfillcolor"><code>furniture.iconWrapperFillColor</code></a></td><td><code>&#39;#26a69a&#39;</code></td><td>编辑按钮颜色</td></tr></tbody></table><h2 id="自定义元素" tabindex="-1">自定义元素 <a class="header-anchor" href="#自定义元素" aria-label="Permalink to &quot;自定义元素&quot;">​</a></h2><p>你可以在地图上显示自定义的元素，它们完全受控于 <code>customElements</code> 中的数据。</p><p>目前支持自定义的元素有：</p><ul><li>图片</li><li>GIF</li><li>HTML</li></ul><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><p>设置 <code>minScaleRatio: 0</code> 表示不限制最小缩放，设置 <code>maxScaleRatio: Infinity</code> 表示不限制最大缩放。</p><h3 id="相关配置项-2" tabindex="-1">相关配置项 <a class="header-anchor" href="#相关配置项-2" aria-label="Permalink to &quot;相关配置项&quot;">​</a></h3><table tabindex="0"><thead><tr><th>配置项</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><a href="/reference/config.html#furniture-assets"><code>furniture.assets</code></a></td><td><code>[内置双人床]</code></td><td>家具素材列表</td></tr><tr><td><a href="/reference/config.html#furniture-opacity"><code>furniture.opacity</code></a></td><td><code>1</code></td><td>家具图片透明度</td></tr><tr><td><a href="/reference/config.html#furniture-rotatedirection"><code>furniture.rotateDirection</code></a></td><td><code>&#39;cw&#39;</code></td><td>旋转方向</td></tr><tr><td><a href="/reference/config.html#furniture-minscaleratio"><code>furniture.minScaleRatio</code></a></td><td><code>0.5</code></td><td>最小缩放倍数</td></tr><tr><td><a href="/reference/config.html#furniture-maxscaleratio"><code>furniture.maxScaleRatio</code></a></td><td><code>2</code></td><td>最大缩放倍数</td></tr><tr><td><a href="/reference/config.html#furniture-iconwrapperfillcolor"><code>furniture.iconWrapperFillColor</code></a></td><td><code>&#39;#26a69a&#39;</code></td><td>编辑按钮颜色</td></tr></tbody></table><h2 id="自定义地毯" tabindex="-1">自定义地毯 <a class="header-anchor" href="#自定义地毯" aria-label="Permalink to &quot;自定义地毯&quot;">​</a></h2><p>自定义地毯允许用户在地图上放置和编辑地毯区域。与地图协议中内置的地毯数据不同，自定义地毯是用户定义的叠加层，支持完整的增删改操作。</p><h3 id="地图地毯-vs-自定义地毯" tabindex="-1">地图地毯 vs 自定义地毯 <a class="header-anchor" href="#地图地毯-vs-自定义地毯" aria-label="Permalink to &quot;地图地毯 vs 自定义地毯&quot;">​</a></h3><table tabindex="0"><thead><tr><th>特性</th><th>地图地毯</th><th>自定义地毯</th></tr></thead><tbody><tr><td><strong>来源</strong></td><td>协议数据（来自机器人）</td><td>用户定义</td></tr><tr><td><strong>交互</strong></td><td>仅查看</td><td>支持拖拽、旋转、缩放、删除</td></tr><tr><td><strong>可见性</strong></td><td><code>runtime.showCarpet</code></td><td><code>runtime.showCarpet</code> + <code>editingCarpetIds</code> / <code>selectedCarpetIds</code></td></tr></tbody></table><h3 id="基本用法-1" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法-1" aria-label="Permalink to &quot;基本用法&quot;">​</a></h3><p>通过 <code>customCarpets</code> prop 传入地毯数据。支持三种形状：<code>rectangle</code>（矩形）、<code>round</code>（圆形/椭圆形）、<code>custom</code>（自定义多边形）。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap, CustomCarpetParam } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@ray-js/robot-map&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">customCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setCustomCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">CustomCarpetParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;carpet1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      shape: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rectangle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      points: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">250</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">250</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;carpet2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      shape: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;round&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      points: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">600</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ])</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      customCarpets</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{customCarpets}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        carpet: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          enableEdit: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          opacity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          scale: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // ... 其他属性</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    /&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="编辑地毯" tabindex="-1">编辑地毯 <a class="header-anchor" href="#编辑地毯" aria-label="Permalink to &quot;编辑地毯&quot;">​</a></h3><p>通过 <code>runtime.editingCarpetIds</code> 控制哪些地毯处于编辑状态。编辑模式下，地毯会显示删除、旋转和缩放控制按钮，用户可以通过手势进行拖拽移动。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">customCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setCustomCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">CustomCarpetParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // ...</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ])</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleUpdateCustomCarpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">carpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CustomCarpetParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    setCustomCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      prev.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (c.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> carpet.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> carpet </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleDeleteCustomCarpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">carpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    setCustomCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> prev.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> carpet.id))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      customCarpets</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{customCarpets}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      runtime</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        editingCarpetIds: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;carpet1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        carpet: { enableEdit: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      onUpdateCustomCarpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleUpdateCustomCarpet}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      onDeleteCustomCarpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleDeleteCustomCarpet}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    /&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="选中状态" tabindex="-1">选中状态 <a class="header-anchor" href="#选中状态" aria-label="Permalink to &quot;选中状态&quot;">​</a></h3><p>通过 <code>runtime.selectedCarpetIds</code> 可以设置地毯的选中高亮状态（仅显示边框，不显示编辑按钮）。适用于用户选择了某个地毯但尚未进入编辑模式的场景。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  customCarpets</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{customCarpets}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  runtime</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    selectedCarpetIds: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;carpet1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onClickCarpet</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">carpet</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 用户点击了地毯，可以进入选中或编辑状态</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;点击了地毯:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, carpet.id)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h3 id="材质贴图" tabindex="-1">材质贴图 <a class="header-anchor" href="#材质贴图" aria-label="Permalink to &quot;材质贴图&quot;">​</a></h3><p>通过 <code>config.carpet.material</code> 可以为不同 <code>type</code> 的地毯配置不同的贴图素材。如果未配置 <code>material</code>，则所有地毯使用 <code>config.carpet.src</code> 作为默认贴图。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    carpet: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      enableEdit: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      material: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, src: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;path/to/wool-texture.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, src: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;path/to/silk-texture.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }}</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  customCarpets</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{[</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;c1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, shape: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rectangle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, points: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;c2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, shape: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;round&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, points: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><code>rectangle</code> 和 <code>round</code> 形状支持旋转和缩放；<code>custom</code>（自定义多边形）仅支持拖拽移动。</li><li>地毯最小尺寸由 <a href="/reference/config.html#controls-carpet-minsize"><code>controls.carpet.minSize</code></a> 控制，默认为 1 米。</li><li>编辑模式需要同时设置 <code>config.carpet.enableEdit: true</code> 和 <code>runtime.editingCarpetIds</code>。</li></ul></div><h3 id="相关配置" tabindex="-1">相关配置 <a class="header-anchor" href="#相关配置" aria-label="Permalink to &quot;相关配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>配置</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><a href="/reference/config.html#carpet-src"><code>carpet.src</code></a></td><td>内置资源</td><td>默认地毯贴图</td></tr><tr><td><a href="/reference/config.html#carpet-opacity"><code>carpet.opacity</code></a></td><td><code>0.5</code></td><td>贴图透明度</td></tr><tr><td><a href="/reference/config.html#carpet-scale"><code>carpet.scale</code></a></td><td><code>0.2</code></td><td>贴图缩放比例</td></tr><tr><td><a href="/reference/config.html#carpet-material"><code>carpet.material</code></a></td><td>-</td><td>按类型配置不同贴图素材</td></tr><tr><td><a href="/reference/config.html#carpet-enableedit"><code>carpet.enableEdit</code></a></td><td><code>false</code></td><td>是否启用编辑功能</td></tr><tr><td><a href="/reference/config.html#controls-carpet-minsize"><code>controls.carpet.minSize</code></a></td><td><code>1</code></td><td>最小尺寸（米）</td></tr><tr><td><a href="/reference/config.html#controls-carpet-fillcolor"><code>controls.carpet.fillColor</code></a></td><td><code>rgba(93,104,254,0.1)</code></td><td>编辑区域填充色</td></tr><tr><td><a href="/reference/config.html#controls-carpet-strokecolor"><code>controls.carpet.strokeColor</code></a></td><td><code>#5d68fe</code></td><td>编辑区域边框色</td></tr></tbody></table><h2 id="自定义元素" tabindex="-1">自定义元素 <a class="header-anchor" href="#自定义元素" aria-label="Permalink to &quot;自定义元素&quot;">​</a></h2><p>你可以在地图上显示自定义的元素，它们完全受控于 <code>customElements</code> 中的数据。</p><p>目前支持自定义的元素有：</p><ul><li>图片</li><li>GIF</li><li>HTML</li></ul><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -959,4 +1052,4 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.DRADY2L-.js";const g
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mapApi) {</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forceEndGesture</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>地图 SDK 内部已针对双指缩放时的快速松手做了防抖缓冲处理，搭配上述方案可获得最佳手势体验。</p></div>`,208)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>地图 SDK 内部已针对双指缩放时的快速松手做了防抖缓冲处理，搭配上述方案可获得最佳手势体验。</p></div>`,227)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};

package/dist-docs/assets/guide_advanced-usage.md.COVLyRkA.lean.js

@@ -0,0 +1 @@
+import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1773044166000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h("",227)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};

package/dist-docs/assets/{guide_concepts.md.DBFk-g-l.js → guide_concepts.md.CJ87tk-r.js}

@@ -1,3 +1,3 @@
-import{_ as e,c as t,o,ag as s}from"./chunks/framework.DRADY2L-.js";const b=JSON.parse('{"title":"基本概念","description":"","frontmatter":{},"headers":[],"relativePath":"guide/concepts.md","filePath":"guide/concepts.md","lastUpdated":1767092645000}'),i={name:"guide/concepts.md"};function l(p,a,n,c,r,d){return o(),t("div",null,[...a[0]||(a[0]=[s(`<h1 id="基本概念" tabindex="-1">基本概念 <a class="header-anchor" href="#基本概念" aria-label="Permalink to &quot;基本概念&quot;">​</a></h1><p>了解 Tuya Robot Map 的核心概念。</p><h2 id="核心组件" tabindex="-1">核心组件 <a class="header-anchor" href="#核心组件" aria-label="Permalink to &quot;核心组件&quot;">​</a></h2><p>后续文档中，我们会使用 <code>RobotMap</code> 组件作为示例，你可以根据实际需求选择使用 <code>RobotMap</code> 或 <code>RjsRobotMap</code> 组件。</p><h3 id="robotmap-组件" tabindex="-1">RobotMap 组件 <a class="header-anchor" href="#robotmap-组件" aria-label="Permalink to &quot;RobotMap 组件&quot;">​</a></h3><p>React 地图组件，提供完整的地图渲染和交互功能：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><p><code>RobotMap</code> 组件是基于 <a href="https://developer.tuya.com/cn/miniapp/develop/ray/component/open/web-view" target="_blank" rel="noreferrer">WebView</a> 开发的，开发前请详细阅读<a href="https://developer.tuya.com/cn/miniapp/develop/miniapp/component/native-component/native-component" target="_blank" rel="noreferrer">原生组件说明</a>。</p></li><li><p><code>RobotMap</code> 默认铺满全屏，适用于<strong>首页实时地图</strong>等场景，一个页面只能有一个 <code>RobotMap</code> 组件。</p></li><li><p>需要在小程序<code>global.config.ts</code>中配置<code>webviewRoot</code>让小程序能够正确加载<code>RobotMap</code>的资源。</p></li></ul><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+import{_ as e,c as t,o,aq as s}from"./chunks/framework.CBLqO2Q1.js";const b=JSON.parse('{"title":"基本概念","description":"","frontmatter":{},"headers":[],"relativePath":"guide/concepts.md","filePath":"guide/concepts.md","lastUpdated":1767092645000}'),i={name:"guide/concepts.md"};function l(p,a,n,c,r,d){return o(),t("div",null,[...a[0]||(a[0]=[s(`<h1 id="基本概念" tabindex="-1">基本概念 <a class="header-anchor" href="#基本概念" aria-label="Permalink to &quot;基本概念&quot;">​</a></h1><p>了解 Tuya Robot Map 的核心概念。</p><h2 id="核心组件" tabindex="-1">核心组件 <a class="header-anchor" href="#核心组件" aria-label="Permalink to &quot;核心组件&quot;">​</a></h2><p>后续文档中，我们会使用 <code>RobotMap</code> 组件作为示例，你可以根据实际需求选择使用 <code>RobotMap</code> 或 <code>RjsRobotMap</code> 组件。</p><h3 id="robotmap-组件" tabindex="-1">RobotMap 组件 <a class="header-anchor" href="#robotmap-组件" aria-label="Permalink to &quot;RobotMap 组件&quot;">​</a></h3><p>React 地图组件，提供完整的地图渲染和交互功能：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><p><code>RobotMap</code> 组件是基于 <a href="https://developer.tuya.com/cn/miniapp/develop/ray/component/open/web-view" target="_blank" rel="noreferrer">WebView</a> 开发的，开发前请详细阅读<a href="https://developer.tuya.com/cn/miniapp/develop/miniapp/component/native-component/native-component" target="_blank" rel="noreferrer">原生组件说明</a>。</p></li><li><p><code>RobotMap</code> 默认铺满全屏，适用于<strong>首页实时地图</strong>等场景，一个页面只能有一个 <code>RobotMap</code> 组件。</p></li><li><p>需要在小程序<code>global.config.ts</code>中配置<code>webviewRoot</code>让小程序能够正确加载<code>RobotMap</code>的资源。</p></li></ul><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
 <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  &quot;webviewRoot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;node_modules/@ray-js/robot-map-sdk/dist-app&quot;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><h3 id="rjsrobotmap-组件" tabindex="-1">RjsRobotMap 组件 <a class="header-anchor" href="#rjsrobotmap-组件" aria-label="Permalink to &quot;RjsRobotMap 组件&quot;">​</a></h3><p>基于Rjs开发的地图组件，它拥有和 <code>RobotMap</code> 组件相同的Props。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RjsRobotMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>RjsRobotMap</code> 基于 <a href="https://developer.tuya.com/cn/miniapp/develop/ray/framework/render" target="_blank" rel="noreferrer">Rjs</a> 开发，它没有原生组件的限制，一个页面可以有多个 <code>RjsRobotMap</code> 组件。适用于<strong>多地图</strong>、<strong>弹窗里的地图</strong> 等场景。</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>引入 <code>RjsRobotMap</code> 对页面加载速度有一定影响。如无必要场景，我们建议始终使用 <code>RobotMap</code> 组件。</p></div><h2 id="坐标系统" tabindex="-1">坐标系统 <a class="header-anchor" href="#坐标系统" aria-label="Permalink to &quot;坐标系统&quot;">​</a></h2><h3 id="地图原点坐标" tabindex="-1">地图原点坐标 <a class="header-anchor" href="#地图原点坐标" aria-label="Permalink to &quot;地图原点坐标&quot;">​</a></h3><p>地图原点是扫地机器人运行过程中确定的参考点，地图上的元素都是基于这个原点计算的相对位置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>地图原点本身是相对于地图左上角来定位的。例如在一张100 x 100(宽 x 高)的 地图中，如果原点坐标是(20, 80)，表示原点位于相对于地图左上角(20, 80)的位置。</p></div><h3 id="地图坐标系" tabindex="-1">地图坐标系 <a class="header-anchor" href="#地图坐标系" aria-label="Permalink to &quot;地图坐标系&quot;">​</a></h3><p>地图坐标系是本 SDK 实际使用的坐标系，用于在地图上渲染和显示各种元素。地图坐标系以地图原点为中心(0, 0)：</p><ul><li>X轴：向右为正方向</li><li>Y轴：向下为正方向</li></ul><h4 id="与机器坐标系的不同" tabindex="-1">与机器坐标系的不同 <a class="header-anchor" href="#与机器坐标系的不同" aria-label="Permalink to &quot;与机器坐标系的不同&quot;">​</a></h4><p>需要注意的是，本 SDK 使用的地图坐标系与扫地机器人设备本身使用的机器坐标系在 Y 轴方向上相反：</p><ul><li><p><strong>机器坐标系</strong>（设备使用的坐标系）：</p><ul><li>X轴：向右为正方向</li><li>Y轴：向上为正方向</li></ul></li><li><p><strong>地图坐标系</strong>（本 SDK 使用的坐标系）：</p><ul><li>X轴：向右为正方向（与机器坐标系一致）</li><li>Y轴：向下为正方向（与机器坐标系相反）</li></ul></li></ul><p>SDK 采用标准的屏幕坐标系（Screen Coordinate System）进行渲染，因此 Y 轴方向与机器坐标系相反。在 SDK 中，如果原点在(0, 0)，坐标为(1, 1)的点会渲染在原点的右下方。</p><p>例如，以下元素的坐标均使用地图坐标系：</p><ul><li>充电桩</li><li>清扫路径 (含机器人位置)</li><li>虚拟墙</li><li>禁区</li><li>清扫区域</li><li>分割线</li><li>其他自定义元素</li><li>...</li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>本文档中，如果未特别说明，涉及到的坐标均指地图坐标系（X向右，Y向下）。</p></div>`,27)])])}const u=e(i,[["render",l]]);export{b as __pageData,u as default};

package/dist-docs/assets/{guide_concepts.md.DBFk-g-l.lean.js → guide_concepts.md.CJ87tk-r.lean.js}

@@ -1 +1 @@
-import{_ as e,c as t,o,ag as s}from"./chunks/framework.DRADY2L-.js";const b=JSON.parse('{"title":"基本概念","description":"","frontmatter":{},"headers":[],"relativePath":"guide/concepts.md","filePath":"guide/concepts.md","lastUpdated":1767092645000}'),i={name:"guide/concepts.md"};function l(p,a,n,c,r,d){return o(),t("div",null,[...a[0]||(a[0]=[s("",27)])])}const u=e(i,[["render",l]]);export{b as __pageData,u as default};
+import{_ as e,c as t,o,aq as s}from"./chunks/framework.CBLqO2Q1.js";const b=JSON.parse('{"title":"基本概念","description":"","frontmatter":{},"headers":[],"relativePath":"guide/concepts.md","filePath":"guide/concepts.md","lastUpdated":1767092645000}'),i={name:"guide/concepts.md"};function l(p,a,n,c,r,d){return o(),t("div",null,[...a[0]||(a[0]=[s("",27)])])}const u=e(i,[["render",l]]);export{b as __pageData,u as default};

package/dist-docs/assets/{guide_getting-started.md.Zvm4buzY.js → guide_getting-started.md.B8rkVqGP.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ag as p}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1770804529000}'),h={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[p(`<h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h1><p>Tuya Robot Map 提供了开箱即用的 React 组件，专为扫地机器人应用设计。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-oSPQR" id="tab-9P_-u_S" checked><label data-title="yarn" for="tab-9P_-u_S">yarn</label><input type="radio" name="group-oSPQR" id="tab-XRup7fd"><label data-title="npm" for="tab-XRup7fd">npm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div></div></div><h2 id="数据传入" tabindex="-1">数据传入 <a class="header-anchor" href="#数据传入" aria-label="Permalink to &quot;数据传入&quot;">​</a></h2><p>仅需传入几个基本的数据props，即可完成地图的呈现。</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-WRKwR" id="tab-NOIINpe" checked><label data-title="点阵协议地图数据" for="tab-NOIINpe">点阵协议地图数据</label><input type="radio" name="group-WRKwR" id="tab-VuIqaew"><label data-title="结构化协议地图数据" for="tab-VuIqaew">结构化协议地图数据</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
+import{_ as i,c as a,o as n,aq as p}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1770804529000}'),h={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[p(`<h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h1><p>Tuya Robot Map 提供了开箱即用的 React 组件，专为扫地机器人应用设计。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-NbSy6" id="tab-1PFQtQf" checked><label data-title="yarn" for="tab-1PFQtQf">yarn</label><input type="radio" name="group-NbSy6" id="tab-UKQFyyx"><label data-title="npm" for="tab-UKQFyyx">npm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div></div></div><h2 id="数据传入" tabindex="-1">数据传入 <a class="header-anchor" href="#数据传入" aria-label="Permalink to &quot;数据传入&quot;">​</a></h2><p>仅需传入几个基本的数据props，即可完成地图的呈现。</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-k6b5q" id="tab-ctQcmt-" checked><label data-title="点阵协议地图数据" for="tab-ctQcmt-">点阵协议地图数据</label><input type="radio" name="group-k6b5q" id="tab-8Ri_OKo"><label data-title="结构化协议地图数据" for="tab-8Ri_OKo">结构化协议地图数据</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { decodeRoomProperties } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"></span>

package/dist-docs/assets/{guide_getting-started.md.Zvm4buzY.lean.js → guide_getting-started.md.B8rkVqGP.lean.js}

@@ -1 +1 @@
-import{_ as i,c as a,o as n,ag as p}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1770804529000}'),h={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[p("",27)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};
+import{_ as i,c as a,o as n,aq as p}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1770804529000}'),h={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[p("",27)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};

package/dist-docs/assets/{guide_mcp.md.1UIpY4E0.js → guide_mcp.md.CabCiX8Z.js}

@@ -1 +1 @@
-import{_ as e,c as t,o as i,ag as s}from"./chunks/framework.DRADY2L-.js";const u=JSON.parse('{"title":"MCP","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mcp.md","filePath":"guide/mcp.md","lastUpdated":1770722482000}'),o={name:"guide/mcp.md"};function l(r,a,n,d,h,p){return i(),t("div",null,[...a[0]||(a[0]=[s('<h1 id="mcp" tabindex="-1">MCP <a class="header-anchor" href="#mcp" aria-label="Permalink to &quot;MCP&quot;">​</a></h1><p>为 AI 助手集成地图分析工具。</p><h2 id="安装-installation" tabindex="-1">安装 (Installation) <a class="header-anchor" href="#安装-installation" aria-label="Permalink to &quot;安装 (Installation)&quot;">​</a></h2><h3 id="cursor-一键安装" tabindex="-1">Cursor (一键安装) <a class="header-anchor" href="#cursor-一键安装" aria-label="Permalink to &quot;Cursor (一键安装)&quot;">​</a></h3><p>Cursor 用户可以通过点击下方按钮直接安装 MCP 服务：</p><p><a href="https://cursor.com/cn/install-mcp?name=ray-robot-map-mcp&amp;config=eyJjb21tYW5kIjoibnB4IC15IC1wIEByYXktanMvcm9ib3QtbWFwLXNkayByb2JvdC1tYXAtYW5hbHl6ZXIifQ%3D%3D" target="_blank" rel="noreferrer"><img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="安装 MCP 服务"></a></p><h3 id="claude-code" tabindex="-1">Claude Code <a class="header-anchor" href="#claude-code" aria-label="Permalink to &quot;Claude Code&quot;">​</a></h3><p>要在 Claude Code 中添加此服务，请使用 <code>mcp add</code> 指令。建议显式指定 <code>stdio</code> 传输模式：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">claude</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> mcp</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --transport</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> stdio</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ray-robot-map-analyzer</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npx</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -y</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -p</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map-sdk@latest</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> robot-map-analyzer</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>如果您希望在所有项目中都能使用该工具（不仅限于当前目录），可以添加 <code>--scope user</code> 参数。</p></div><h3 id="antigravity" tabindex="-1">Antigravity <a class="header-anchor" href="#antigravity" aria-label="Permalink to &quot;Antigravity&quot;">​</a></h3><p>对于 Antigravity 用户，请使用 <code>--add-mcp</code> 指令并传入 JSON 配置：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">antigravity</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --add-mcp</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;{&quot;name&quot;: &quot;ray-robot-map-analyzer&quot;, &quot;command&quot;: &quot;npx&quot;, &quot;args&quot;: [&quot;-y&quot;, &quot;-p&quot;, &quot;@ray-js/robot-map-sdk@latest&quot;, &quot;robot-map-analyzer&quot;]}&#39;</span></span></code></pre></div><h3 id="环境要求" tabindex="-1">环境要求 <a class="header-anchor" href="#环境要求" aria-label="Permalink to &quot;环境要求&quot;">​</a></h3><ul><li>Node.js &gt;= 16</li><li>网络连接（用于通过 npx 实时获取最新版 npm 包）</li></ul><h2 id="使用-usage" tabindex="-1">使用 (Usage) <a class="header-anchor" href="#使用-usage" aria-label="Permalink to &quot;使用 (Usage)&quot;">​</a></h2><h3 id="最佳实践-best-practices" tabindex="-1">最佳实践 (Best Practices) <a class="header-anchor" href="#最佳实践-best-practices" aria-label="Permalink to &quot;最佳实践 (Best Practices)&quot;">​</a></h3><p>为了获得最稳定的分析体验，建议遵循以下交互模式：</p><h4 id="_1-优先使用文件引用-推荐" tabindex="-1">1. 优先使用文件引用 (推荐) <a class="header-anchor" href="#_1-优先使用文件引用-推荐" aria-label="Permalink to &quot;1. 优先使用文件引用 (推荐)&quot;">​</a></h4><p>当您需要分析复杂的地图或长路径时，<strong>不要直接粘贴 Hex 字符串</strong>。请先将数据存为本地文件，然后在提问时提及该文件。</p><p><strong>操作示例：</strong></p><ol><li>在终端运行：<code>pbpaste &gt; map.hex</code> (将剪贴板内容存入文件)</li><li>向 AI 提问：<em>“请分析一下当前目录下 <code>map.hex</code> 这个文件的地图概况。”</em></li></ol><p>AI 会识别到路径并自动调用工具的 <code>path</code> 参数进行处理，这样可以完全避免因 Hex 字符串过长导致的对话中断。</p><h4 id="_2-常见提问示例" tabindex="-1">2. 常见提问示例 <a class="header-anchor" href="#_2-常见提问示例" aria-label="Permalink to &quot;2. 常见提问示例&quot;">​</a></h4><p>您可以尝试以下提问方式：</p><ul><li><em>“帮我分析一下 <code>map.hex</code> 的概要信息。”</em></li><li><em>“结合 <code>map.hex</code> 和 <code>path.hex</code>，告诉我机器人现在在哪个房间？离充电桩有多远？”</em></li><li><em>“这个地图里有多少个房间？分布状况如何？”</em></li><li><em>“为什么 <code>map.hex</code> 右上角的障碍物有交错重叠的现象？”</em></li><li><em>“分析一下 <code>path.hex</code> 里的清扫路径轨迹。”</em></li></ul><h3 id="大数据处理指引" tabindex="-1">大数据处理指引 <a class="header-anchor" href="#大数据处理指引" aria-label="Permalink to &quot;大数据处理指引&quot;">​</a></h3><p>由于扫地机地图和路径数据（Hex）通常非常庞大，直接在聊天框中粘贴大数据可能导致 AI 响应中断或 Token 溢出。</p><ol><li><strong>存为文件</strong>：建议将 Hex 数据保存为本地文件（如 <code>map.hex</code> 或 <code>path.hex</code>）。</li><li><strong>文件分析</strong>：直接告知 AI 文件绝对路径，它将优先使用工具的 <code>path</code> 参数进行静默读取分析。</li><li><strong>支持 Hex</strong>：对于较小的数据（如 DP 命令），仍可直接粘贴进行分析。</li></ol>',29)])])}const k=e(o,[["render",l]]);export{u as __pageData,k as default};
+import{_ as e,c as t,o as i,aq as s}from"./chunks/framework.CBLqO2Q1.js";const u=JSON.parse('{"title":"MCP","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mcp.md","filePath":"guide/mcp.md","lastUpdated":1770722482000}'),o={name:"guide/mcp.md"};function l(r,a,n,d,h,p){return i(),t("div",null,[...a[0]||(a[0]=[s('<h1 id="mcp" tabindex="-1">MCP <a class="header-anchor" href="#mcp" aria-label="Permalink to &quot;MCP&quot;">​</a></h1><p>为 AI 助手集成地图分析工具。</p><h2 id="安装-installation" tabindex="-1">安装 (Installation) <a class="header-anchor" href="#安装-installation" aria-label="Permalink to &quot;安装 (Installation)&quot;">​</a></h2><h3 id="cursor-一键安装" tabindex="-1">Cursor (一键安装) <a class="header-anchor" href="#cursor-一键安装" aria-label="Permalink to &quot;Cursor (一键安装)&quot;">​</a></h3><p>Cursor 用户可以通过点击下方按钮直接安装 MCP 服务：</p><p><a href="https://cursor.com/cn/install-mcp?name=ray-robot-map-mcp&amp;config=eyJjb21tYW5kIjoibnB4IC15IC1wIEByYXktanMvcm9ib3QtbWFwLXNkayByb2JvdC1tYXAtYW5hbHl6ZXIifQ%3D%3D" target="_blank" rel="noreferrer"><img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="安装 MCP 服务"></a></p><h3 id="claude-code" tabindex="-1">Claude Code <a class="header-anchor" href="#claude-code" aria-label="Permalink to &quot;Claude Code&quot;">​</a></h3><p>要在 Claude Code 中添加此服务，请使用 <code>mcp add</code> 指令。建议显式指定 <code>stdio</code> 传输模式：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">claude</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> mcp</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --transport</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> stdio</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ray-robot-map-analyzer</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npx</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -y</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -p</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map-sdk@latest</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> robot-map-analyzer</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">提示</p><p>如果您希望在所有项目中都能使用该工具（不仅限于当前目录），可以添加 <code>--scope user</code> 参数。</p></div><h3 id="antigravity" tabindex="-1">Antigravity <a class="header-anchor" href="#antigravity" aria-label="Permalink to &quot;Antigravity&quot;">​</a></h3><p>对于 Antigravity 用户，请使用 <code>--add-mcp</code> 指令并传入 JSON 配置：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">antigravity</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --add-mcp</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;{&quot;name&quot;: &quot;ray-robot-map-analyzer&quot;, &quot;command&quot;: &quot;npx&quot;, &quot;args&quot;: [&quot;-y&quot;, &quot;-p&quot;, &quot;@ray-js/robot-map-sdk@latest&quot;, &quot;robot-map-analyzer&quot;]}&#39;</span></span></code></pre></div><h3 id="环境要求" tabindex="-1">环境要求 <a class="header-anchor" href="#环境要求" aria-label="Permalink to &quot;环境要求&quot;">​</a></h3><ul><li>Node.js &gt;= 16</li><li>网络连接（用于通过 npx 实时获取最新版 npm 包）</li></ul><h2 id="使用-usage" tabindex="-1">使用 (Usage) <a class="header-anchor" href="#使用-usage" aria-label="Permalink to &quot;使用 (Usage)&quot;">​</a></h2><h3 id="最佳实践-best-practices" tabindex="-1">最佳实践 (Best Practices) <a class="header-anchor" href="#最佳实践-best-practices" aria-label="Permalink to &quot;最佳实践 (Best Practices)&quot;">​</a></h3><p>为了获得最稳定的分析体验，建议遵循以下交互模式：</p><h4 id="_1-优先使用文件引用-推荐" tabindex="-1">1. 优先使用文件引用 (推荐) <a class="header-anchor" href="#_1-优先使用文件引用-推荐" aria-label="Permalink to &quot;1. 优先使用文件引用 (推荐)&quot;">​</a></h4><p>当您需要分析复杂的地图或长路径时，<strong>不要直接粘贴 Hex 字符串</strong>。请先将数据存为本地文件，然后在提问时提及该文件。</p><p><strong>操作示例：</strong></p><ol><li>在终端运行：<code>pbpaste &gt; map.hex</code> (将剪贴板内容存入文件)</li><li>向 AI 提问：<em>“请分析一下当前目录下 <code>map.hex</code> 这个文件的地图概况。”</em></li></ol><p>AI 会识别到路径并自动调用工具的 <code>path</code> 参数进行处理，这样可以完全避免因 Hex 字符串过长导致的对话中断。</p><h4 id="_2-常见提问示例" tabindex="-1">2. 常见提问示例 <a class="header-anchor" href="#_2-常见提问示例" aria-label="Permalink to &quot;2. 常见提问示例&quot;">​</a></h4><p>您可以尝试以下提问方式：</p><ul><li><em>“帮我分析一下 <code>map.hex</code> 的概要信息。”</em></li><li><em>“结合 <code>map.hex</code> 和 <code>path.hex</code>，告诉我机器人现在在哪个房间？离充电桩有多远？”</em></li><li><em>“这个地图里有多少个房间？分布状况如何？”</em></li><li><em>“为什么 <code>map.hex</code> 右上角的障碍物有交错重叠的现象？”</em></li><li><em>“分析一下 <code>path.hex</code> 里的清扫路径轨迹。”</em></li></ul><h3 id="大数据处理指引" tabindex="-1">大数据处理指引 <a class="header-anchor" href="#大数据处理指引" aria-label="Permalink to &quot;大数据处理指引&quot;">​</a></h3><p>由于扫地机地图和路径数据（Hex）通常非常庞大，直接在聊天框中粘贴大数据可能导致 AI 响应中断或 Token 溢出。</p><ol><li><strong>存为文件</strong>：建议将 Hex 数据保存为本地文件（如 <code>map.hex</code> 或 <code>path.hex</code>）。</li><li><strong>文件分析</strong>：直接告知 AI 文件绝对路径，它将优先使用工具的 <code>path</code> 参数进行静默读取分析。</li><li><strong>支持 Hex</strong>：对于较小的数据（如 DP 命令），仍可直接粘贴进行分析。</li></ol>',29)])])}const k=e(o,[["render",l]]);export{u as __pageData,k as default};

package/dist-docs/assets/{guide_mcp.md.1UIpY4E0.lean.js → guide_mcp.md.CabCiX8Z.lean.js}

@@ -1 +1 @@
-import{_ as e,c as t,o as i,ag as s}from"./chunks/framework.DRADY2L-.js";const u=JSON.parse('{"title":"MCP","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mcp.md","filePath":"guide/mcp.md","lastUpdated":1770722482000}'),o={name:"guide/mcp.md"};function l(r,a,n,d,h,p){return i(),t("div",null,[...a[0]||(a[0]=[s("",29)])])}const k=e(o,[["render",l]]);export{u as __pageData,k as default};
+import{_ as e,c as t,o as i,aq as s}from"./chunks/framework.CBLqO2Q1.js";const u=JSON.parse('{"title":"MCP","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mcp.md","filePath":"guide/mcp.md","lastUpdated":1770722482000}'),o={name:"guide/mcp.md"};function l(r,a,n,d,h,p){return i(),t("div",null,[...a[0]||(a[0]=[s("",29)])])}const k=e(o,[["render",l]]);export{u as __pageData,k as default};

package/dist-docs/assets/{index.md.Sm6vD2Gl.js → index.md.wTsFvv0N.js}

@@ -1 +1 @@
-import{_ as e,c as t,o as a}from"./chunks/framework.DRADY2L-.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Tuya Robot Map","text":"涂鸦扫地机地图组件","actions":[{"theme":"brand","text":"快速开始","link":"/guide/concepts"},{"theme":"alt","text":"API 参考","link":"/reference/data"}]},"features":[{"icon":"✨","title":"轻松上手","details":"提供开箱即用的React组件，让地图集成变得简单高效。"},{"icon":"🚀","title":"高性能","details":"基于 PixiJS 高性能WebGL渲染，体验流畅的地图显示和丝滑的移动端交互。"},{"icon":"🎯","title":"丰富的交互功能","details":"支持大量地图交互功能，覆盖主流扫地机器人的所有操作需求"},{"icon":"🎛️","title":"纯受控设计","details":"数据即展示。每一个交互结果都在你的掌控中，享受简洁可预测的开发体验。"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1759993272000}'),i={name:"index.md"};function n(o,c,s,d,r,l){return a(),t("div")}const x=e(i,[["render",n]]);export{m as __pageData,x as default};
+import{_ as e,c as t,o as a}from"./chunks/framework.CBLqO2Q1.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Tuya Robot Map","text":"涂鸦扫地机地图组件","actions":[{"theme":"brand","text":"快速开始","link":"/guide/concepts"},{"theme":"alt","text":"API 参考","link":"/reference/data"}]},"features":[{"icon":"✨","title":"轻松上手","details":"提供开箱即用的React组件，让地图集成变得简单高效。"},{"icon":"🚀","title":"高性能","details":"基于 PixiJS 高性能WebGL渲染，体验流畅的地图显示和丝滑的移动端交互。"},{"icon":"🎯","title":"丰富的交互功能","details":"支持大量地图交互功能，覆盖主流扫地机器人的所有操作需求"},{"icon":"🎛️","title":"纯受控设计","details":"数据即展示。每一个交互结果都在你的掌控中，享受简洁可预测的开发体验。"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1759993272000}'),i={name:"index.md"};function n(o,c,s,d,r,l){return a(),t("div")}const x=e(i,[["render",n]]);export{m as __pageData,x as default};

package/dist-docs/assets/{index.md.Sm6vD2Gl.lean.js → index.md.wTsFvv0N.lean.js}

@@ -1 +1 @@
-import{_ as e,c as t,o as a}from"./chunks/framework.DRADY2L-.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Tuya Robot Map","text":"涂鸦扫地机地图组件","actions":[{"theme":"brand","text":"快速开始","link":"/guide/concepts"},{"theme":"alt","text":"API 参考","link":"/reference/data"}]},"features":[{"icon":"✨","title":"轻松上手","details":"提供开箱即用的React组件，让地图集成变得简单高效。"},{"icon":"🚀","title":"高性能","details":"基于 PixiJS 高性能WebGL渲染，体验流畅的地图显示和丝滑的移动端交互。"},{"icon":"🎯","title":"丰富的交互功能","details":"支持大量地图交互功能，覆盖主流扫地机器人的所有操作需求"},{"icon":"🎛️","title":"纯受控设计","details":"数据即展示。每一个交互结果都在你的掌控中，享受简洁可预测的开发体验。"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1759993272000}'),i={name:"index.md"};function n(o,c,s,d,r,l){return a(),t("div")}const x=e(i,[["render",n]]);export{m as __pageData,x as default};
+import{_ as e,c as t,o as a}from"./chunks/framework.CBLqO2Q1.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Tuya Robot Map","text":"涂鸦扫地机地图组件","actions":[{"theme":"brand","text":"快速开始","link":"/guide/concepts"},{"theme":"alt","text":"API 参考","link":"/reference/data"}]},"features":[{"icon":"✨","title":"轻松上手","details":"提供开箱即用的React组件，让地图集成变得简单高效。"},{"icon":"🚀","title":"高性能","details":"基于 PixiJS 高性能WebGL渲染，体验流畅的地图显示和丝滑的移动端交互。"},{"icon":"🎯","title":"丰富的交互功能","details":"支持大量地图交互功能，覆盖主流扫地机器人的所有操作需求"},{"icon":"🎛️","title":"纯受控设计","details":"数据即展示。每一个交互结果都在你的掌控中，享受简洁可预测的开发体验。"}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1759993272000}'),i={name:"index.md"};function n(o,c,s,d,r,l){return a(),t("div")}const x=e(i,[["render",n]]);export{m as __pageData,x as default};