{"action":"opened","issue":{"url":"https://api.github.com/repos/chshapple/vue-krpano/issues/6","repository_url":"https://api.github.com/repos/chshapple/vue-krpano","labels_url":"https://api.github.com/repos/chshapple/vue-krpano/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/chshapple/vue-krpano/issues/6/comments","events_url":"https://api.github.com/repos/chshapple/vue-krpano/issues/6/events","html_url":"https://github.com/chshapple/vue-krpano/issues/6","id":310228831,"number":6,"title":"Is it possible to add hotspots after the vuejs component is loaded","user":{"login":"mlgrozev","id":788176,"avatar_url":"https://avatars3.githubusercontent.com/u/788176?v=4","gravatar_id":"","url":"https://api.github.com/users/mlgrozev","html_url":"https://github.com/mlgrozev","followers_url":"https://api.github.com/users/mlgrozev/followers","following_url":"https://api.github.com/users/mlgrozev/following{/other_user}","gists_url":"https://api.github.com/users/mlgrozev/gists{/gist_id}","starred_url":"https://api.github.com/users/mlgrozev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mlgrozev/subscriptions","organizations_url":"https://api.github.com/users/mlgrozev/orgs","repos_url":"https://api.github.com/users/mlgrozev/repos","events_url":"https://api.github.com/users/mlgrozev/events{/privacy}","received_events_url":"https://api.github.com/users/mlgrozev/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-31T09:58:03Z","updated_at":"2018-03-31T09:58:03Z","closed_at":null,"author_association":"NONE","body":"Hi,\r\nI'm trying to add some hotspots after the component is loaded using @panoCreated=\"panoCreated\"\r\nBut unfortunately with no success. After using the function above the component is reloaded an all settings that were made are overwritten. Here is my code:\r\n\r\n`<template>\r\n    <div>\r\n\r\n    <a href=\"#\" @click.prevent=\"addHotspot\">ADd</a>\r\n    <krpano :xml=\"xml\" basepath=\"/assets/krpano/templates/xml/\" :initvars=\"initvars\" :consolelog=\"true\"\r\n            :hooks=\"hooks\" :debug=\"true\" :lazy-load=\"false\"\r\n            style=\"width:100%;height:400px\" @panoCreated=\"panoCreated\" @sceneChanged=\"sceneChanged\" @loadSceneData.prevent=\"loadSceneData\"></krpano>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\n    export default {\r\n        methods: {\r\n            addHotspot(krpano, hotSpot) {\r\n                krpano = this.krpanoPano\r\n                console.log('add hotspot')\r\n                console.log(krpano);\r\n\r\n                if (krpano) {\r\n                    var h = krpano.get(\"view.hlookat\");\r\n                    var v = krpano.get(\"view.vlookat\");\r\n                    var hs_name = \"hs\" + ((Date.now() + Math.random()) | 0);\t// create unique/randome name\r\n                    krpano.call(\"addhotspot(\" + hs_name + \")\");\r\n                    krpano.set(\"hotspot[\" + hs_name + \"].url\", \"/img/infospot.png\");\r\n                    krpano.set(\"hotspot[\" + hs_name + \"].ath\", h);\r\n                    krpano.set(\"hotspot[\" + hs_name + \"].atv\", v);\r\n                    krpano.set(\"hotspot[\" + hs_name + \"].distorted\", true);\r\n\r\n                    if (krpano.get(\"device.html5\")) {\r\n                        // for HTML5 it's possible to assign JS functions directly to krpano events\r\n                        krpano.set(\"hotspot[\" + hs_name + \"].onclick\", function (hs) {\r\n                            alert('hotspot \"' + hs + '\" clicked');\r\n\r\n                        }.bind(null, hs_name));\r\n                    }\r\n                    else {\r\n                        // for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)\r\n                        krpano.set(\"hotspot[\" + hs_name + \"].onclick\", \"js( alert(calc('hotspot \\\"' + name + '\\\" clicked')) );\");\r\n                    }\r\n\r\n                }\r\n            },\r\n            loadSceneData() {\r\n              console.log('load scene data')\r\n            },\r\n            panoCreated(pano) {\r\n                this.krpanoPano = pano\r\n                pano.call(\"lookto(\" + (Math.random() * 360.0 - 180.0) + \",\" + (Math.random() * 180.0 - 90.0) + \",\" + (80.0 + Math.random() * 100.0) + \")\");\r\n                var krpano = this.krpanoPano\r\n                console.log('add hotspot')\r\n\r\n                if (krpano) {\r\n                console.log(pano);\r\n                    var h = pano.get(\"view.hlookat\");\r\n                    var v = pano.get(\"view.vlookat\");\r\n                    var hs_name = \"hs\" + ((Date.now() + Math.random()) | 0);\t// create unique/randome name\r\n                    pano.call(\"addhotspot(\" + hs_name + \")\");\r\n                    pano.set(\"hotspot[\" + hs_name + \"].url\", \"/img/infospot.png\");\r\n                    pano.set(\"hotspot[\" + hs_name + \"].ath\", h);\r\n                    pano.set(\"hotspot[\" + hs_name + \"].atv\", v);\r\n                    pano.set(\"hotspot[\" + hs_name + \"].distorted\", true);\r\n\r\n                    if (krpano.get(\"device.html5\")) {\r\n                        // for HTML5 it's possible to assign JS functions directly to krpano events\r\n                        krpano.set(\"hotspot[\" + hs_name + \"].onclick\", function (hs) {\r\n                            alert('hotspot \"' + hs + '\" clicked');\r\n\r\n                        }.bind(null, hs_name));\r\n                    }\r\n                    else {\r\n                        // for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)\r\n                        krpano.set(\"hotspot[\" + hs_name + \"].onclick\", \"js( alert(calc('hotspot \\\"' + name + '\\\" clicked')) );\");\r\n                    }\r\n                }\r\n            },\r\n            sceneChanged(scene) {\r\n                \r\n            }\r\n        },\r\n        mounted() {\r\n            // this.addHotspot()\r\n        },\r\n        data() {\r\n            const vm = this;\r\n            return {\r\n                xml: \"/uploads/panorama/21/vtour/tour_edit.xml\",\r\n                initvars: {\r\n                    krpanoPano: null,\r\n                    basepath: '/public/assets/',\r\n                    hotspots: {\r\n                        hotspot: {\r\n                            id: 0,\r\n                            name: 'hotSpotName',\r\n                            title: 'name',\r\n                            ath: 0,\r\n                            atv: 1,\r\n                            html: '',\r\n                            icon_path: '/img/infospot.png',\r\n                            type: 'info',\r\n                            onclick: \"looktohotspot(get(name),90);iframe_open('');\",\r\n                            linkedScene: '',\r\n                            scene: 'scene_1'\r\n                        }\r\n                    }\r\n                },\r\n                hooks: {\r\n                    loadSceneData(scene) {\r\n                        console.log(scene)\r\n                    },\r\n                    sceneChanged(scene) {\r\n                        console.log(scene)\r\n                        // this.sceneChanged(scene)\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n</script>\r\n`\r\n\r\n"}}
{"actor":{"display_login":"mlgrozev"}}