Add Only Transient Tag Functionality

by Jowed

HTML

<head>
  <script src="https://static.matterport.com/showcase-sdk/latest.js"></script>
</head>
<body>
  <div class="container">
    <iframe id="showcase-iframe" allow='xr-spatial-tracking; fullscreen' frameborder='0'></iframe>
    <button id="btn">
    Add arbitrary tag
    </button>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
}
#showcase-iframe{
  width: 100%;
  height: 100%;
}
#btn{
  height: 150px;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key
const modelSid = "iL4RdJqi2yK"; 
const urlParameters = "&play=1&qs=1";

const iframe = document.getElementById('showcase-iframe')
function connect() {
	window.MP_SDK.connect(iframe, key, '')
    .then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = `https://my.matterport.com/show/?m=${modelSid}${urlParameters}`;

function loadedShowcaseHandler(mpSdk) {
	giveTagAddButtonFunctionality(mpSdk);
  addCustomTagsAfterMPTags(mpSdk);
}

function giveTagAddButtonFunctionality(mpSdk){
	const btn = document.getElementById('btn');
  btn.addEventListener('click', ()=>{
  	mpSdk.Mattertag.add({
    	label: "Transient Tag",
      anchorPosition: {x: 1.5, y: .2, z: 2},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 1, g: 0, b: 1}
    });
  });
}

function addCustomTagsAfterMPTags(mpSdk){
	const customTags = {
    savedId1: {
      label: "Tag 1",
      anchorPosition: {x: 0, y: .2, z: 0},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 1, g: 0, b: 0}
    },
    savedId2: {
      label: "Tag 2",
      anchorPosition: {x: 0, y: .4, z: 0},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 0, g: 1, b: 0}
    },
    savedId3: {
      label: "Tag 3",
      anchorPosition: {x: 0, y: .6, z: 0},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 0, g: 0, b: 1}
    },
  };
  
  class TagSeparator{
    constructor(transientTags){
      this.customTags = transientTags;
      this.matterportTags= {};
      this.addedMatterportTags = false;
      mpSdk.Mattertag.data.subscribe(this);
    }

    onAdded(idx, item){
      if(this.addedMatterportTags){
        console.log("Added Transient Tag");
        this.customTags[idx] = item;
      }else{
        console.log("Added Matterport Tag");
      }
    }

    onCollectionUpdated(collection){
      if(this.addedMatterportTags) return;
      console.log("Matterport tags finished initially adding");
      this.addedMatterportTags =...