| 1 |
- var TagView=function(){"use strict";KanKan.Viewmode;var t=function(t){function n(n,i){var e=this;t.call(this),this.app=n,this.rendered=!1,this.options=i||{},this.sid=null,this.$tag=null,this.tags_dom={},this.isPositioning=!1,this.player=null,this.isHideAll=!1,this.app.TagManager.on("update",(function(t){e.tags&&e.tags.length&&(e.player||(e.player=e.app.core.get("Player")),e.tags.forEach((function(t){if(t&&e.tags_dom[t.sid])return e.isHideAll?e.tags_dom[t.sid].style.display="none":void(t.visible?(e.tags_dom[t.sid].style.transform="translate("+t.x+"px,"+t.y+"px)",e.tags_dom[t.sid].style.display="block"):e.tags_dom[t.sid].style.display="none")})),t.hasChanged.cameraChanged3?e.waitToAimAtTag(!1):e.waitToAimAtTag(!0))}))}t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n;var i={tags:{configurable:!0}};return i.tags.get=function(){return this.app.TagManager.tags||[]},i.tags.set=function(t){var n=this;this.TagManager.tags||(this.TagManager.tags=[]),t&&t.length&&t.forEach((function(t){n.TagManager.tags.push(t)}))},n.prototype.remove=function(t){var n=document.querySelector("[xui_tags_view]"),i=n.querySelector('[data-tag-id="'+t+'"]');n.removeChild(i)},n.prototype.removeAll=function(){document.querySelector("[xui_tags_view]").innerHTML=""},n.prototype.bind=function(t){var n=this,i=[],e=this.options.render||function(){},r=document.querySelector("[xui_tags_view]");if(this.tags_dom=this.tags_dom||{},t.forEach((function(t){if(!r.querySelector('[data-tag-id="'+t.sid+'"]')){t.icon?0!==t.icon.indexOf("http")&&(t.icon=n.app.resource.getUserResourceURL(t.icon)):t.icon=n.app.resource.base("images/tag_icon_default.svg");var a=e(t)||'<span class="tag-icon animate" style="background-image:url({{icon}})"></span>';"string"==typeof a?i.push('\n <div data-tag-unbind data-tag-id="'+t.sid+'" data-tag-type="'+t.type+'">\n '+a.replace(/\{\{(\w+)\}\}/g,(function(n,i){return t[i]}))+"\n </div>"):a instanceof HTMLElement&&(a.setAttribute("data-tag-id",t.sid),a.setAttribute("data-tag-type",t.type),a.setAttribute("data-tag-unbind",!0),r.insertAdjacentElement("beforeend",a))}})),i.length){var a=document.createElement("template");a.innerHTML=i.join(""),r.appendChild(a.content)}r.querySelectorAll("[data-tag-unbind]").forEach((function(t){t.removeAttribute("data-tag-unbind");var i=t.getAttribute("data-tag-id");i&&(n.tags_dom[i]=t),t.addEventListener("mouseenter",(function(t){n.emit("mouseenter",t)})),t.addEventListener("mouseleave",(function(t){n.emit("mouseleave",t)})),t.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),t.data=n.tags.find((function(t){return t.sid==i})),n.emit("click",t)}))}))},n.prototype.render=function(){var t=this;if(!this.rendered){var n=[];this.tags.forEach((function(i){t.tags_dom[i.sid]||n.push(i)})),this.emit("loaded",{tags:this.tags}),this.bind(n),this.emit("rendered",{tags:this.tags,elem:document.querySelector("[xui_tags_view]")}),this.rendered=!0}},n.prototype.refresh=function(){var t=this;if(this.tags.length){var n=[];this.tags.forEach((function(i){t.tags_dom[i.sid]||n.push(i)})),this.bind(n)}},n.prototype.showAll=function(){this.isHideAll=!1},n.prototype.hideAll=function(){this.isHideAll=!0},n.prototype.focus=function(t){var n=this;return new Promise((function(i){var e=n.tags.find((function(n){return n.sid==t}));if(!e)return i();var r=n.player||n.app.core.get("Player"),a=r.model.panos.closestPanoTowardPoint({point:e.position,getAll:!0}).map((function(t){return t.pano})).filter((function(t){return e.visiblePanos.indexOf(t)>-1&&t.position.clone().setY(e.position.y).sub(e.position).length()>1.5})),o=a[0],s=a.filter((function(t){return t.floorIndex==r.model.currentFloor.floorIndex}));s.length>0&&(o=s[0]),o||(console.warn("该热点无可视点位"),o=r.currentPano),r.flyToPano({pano:o,lookAtPoint:e.position},(function(){n.isPositioning=!1,i()}))}))},n.prototype.aimAtTag=function(){var t=this.player.getDirection(),n=1/0,i=null;for(var e in this.tags){var r=this.tags[e],a=r.position.clone().sub(this.player.position).angleTo(t);a<n&&(n=a,i=r)}if(i){if(this.activeTag&&this.activeTag==i)return;this.activeTag=i,this.$tag=this.tags_dom[this.activeTag.sid],this.emit("focus",{data:this.activeTag,target:this.$tag})}},n.prototype.waitToAimAtTag=function(t){var n=this;t?this.aimAtTagTimer||(this.aimAtTagTimer=setTimeout((function(){n.aimAtTag()}),200)):this.aimAtTagTimer&&(clearTimeout(this.aimAtTagTimer),this.aimAtTagTimer=null)},Object.defineProperties(n.prototype,i),n}(KanKan.MITT.Emiter);return function(n,i){var e=KanKan.Deferred();return n.Scene.on("loaded",(function(){var r=new t(n,i);r.$name="TagView",r.$html="<div xui_tags_view></div> <style> [xui_tags_view] {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n [xui_tags_view] > div {\r\n pointer-events: all;\r\n display: none;\r\n position: absolute;\r\n width: 48px;\r\n height: 48px;\r\n margin-left: -24px;\r\n margin-top: -24px;\r\n }\r\n\r\n [xui_tags_view] .tag-icon {\r\n display: block;\r\n width: 48px;\r\n height: 48px;\r\n background-size: cover;\r\n cursor: pointer;\r\n }\r\n\r\n [xui_tags_view] .tag-icon.animate {\r\n animation: tag-animate-zoom 3s -1s linear infinite;\r\n }\r\n\r\n /* [xui_tags_view] > div.open,\r\n [xui_tags_view] > div.hover{\r\n z-index: 999;\r\n }\r\n\r\n [xui_tags_view] > div.open .tag-billboard,\r\n [xui_tags_view] > div.hover .tag-billboard {\r\n transform: translateY(-50%) scale(1);\r\n \r\n }\r\n [xui_tags_view] .tag-body .tag-billboard {\r\n padding: 0 40px 0 0;\r\n position: absolute;\r\n right: 35px;\r\n top: 50%;\r\n min-width: 420px;\r\n min-height: 60px;\r\n z-index: 1000;\r\n transform: translateY(-50%) scale(0);\r\n transform-origin: center right;\r\n transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);\r\n pointer-events: none;\r\n }\r\n [xui_tags_view] .tag-body .tag-billboard::before {\r\n pointer-events: all;\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 1px;\r\n width: 0;\r\n height: 0;\r\n border-top: 15px solid transparent;\r\n border-bottom: 15px solid transparent;\r\n border-left: 40px solid rgba(27, 27, 28, 0.8);\r\n transform: translateY(-50%);\r\n }\r\n [xui_tags_view] .tag-body .tag-billboard-content {\r\n pointer-events: auto;\r\n background: rgba(27, 27, 28, 0.8);\r\n border-radius: 4px;\r\n min-width: 400px;\r\n padding: 30px 20px;\r\n color: #fff;\r\n } */\r\n\r\n @keyframes tag-animate-zoom {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(0.7);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n } </style> ",r.$load=function(){n.TagManager.install("view",r)},e.resolve(r)})),e}}();
|
