bimdata / documentation Goto Github PK

const viewer = makeBIMDataViewer({ /* viewer config */ });

viewer.registerPlugin({
  name: 'buttonPlugin',
  component: {
    name: 'ButtonPluginComponent',
    template: '<div>Hello World !</div>'
  },
  button: {
    position: 'right',
    content: 'simple',
  },
  addToWindows: [ '3d' ] // <-- Here is the trick :)
});

viewer.mount('#viewerId', '3d');

const viewer = makeBIMDataViewer({ /* viewer config */ });

viewer.registerPlugin({
  name: 'windowPlugin',
  component: {
    name: 'WindowPluginComponent',
    template: `
    <div style="
      height: 100%;
      display: flex;
      justify-content:center;
      align-items:center;
      overflow-y: scroll;
    ">
      <ul>
        <li v-for="obj in objects" :key="obj.id">{{ obj.uuid }}</li>
      </ul>
    </div>`,
    data() {
      return {
        objects: []
      };
    },
    created() {
      this.subSelect = this.$viewer.state.hub.on('objects-selected', () => {
        this.objects = this.$viewer.state.selectedObjects;
      });
      this.subUnselect = this.$viewer.state.hub.on('objects-deselected', () => {
        this.objects = this.$viewer.state.selectedObjects;
      });
    },
    // THIS IS IMPORTANT
    destroyed() {
      this.$viewer.state.hub.off(this.subSelect);
      this.$viewer.state.hub.off(this.subUnselect);
    }
    // ================
  }
});

viewer.registerWindow({
  name: 'my-window',
  plugins: [
    'windowPlugin',
  ],
});

viewer.mount('#viewerId', {
  ratios: [ 50, 50 ],
  children: [
    '3d',
    'my-window'
  ],
});