TypeError: Cannot set property 'quat' of undefined when trying to load xbim-viewer.js in VueJS/CLI

Truning commented 5 years ago

I am building a webapp with vuejs/cli that uses the xbim-viewer. I downloaded the develop branch and built the project in visual studio as described in "Getting Started". When loading the compiled file in plain html and javascript, it works perfectly.

<script src="static/assets/ext/xbim/xbim-viewer.js></script>
<script>
  $(document).ready(function() {
    let check = Viewer.check();
    if (check.noErrors) {
      let canvas = document.getElementbyId('canvas');
      let viewer = new Viewer(canvas);
      viewer.load("static/_WEXBIM/psamplehouse/samplehouse.wexbim");

      viewer.on("loaded", function(model) {
        console.log("Loaded model!");
      });
      viewer.start();
    }
  });
</script>

However, when I want to load the file in a vuejs environment it throws a TypeError: Cannot set property 'quat' of undefined. I am fairly new to vuejs, so it could be that I am not using the framework correctly. Below is the full error that is thrown:

Expected behavior:

That the xbim-viewer.js is loaded and functions as with plain html and javascript.

Actual behavior or exception details:

"TypeError: Cannot set property 'quat' of undefined" upon loading the file.

Version of the xBIM Viewer:

0.1.41

Minimal code (or steps) to reproduce the issue:

var xbimViewer = require('@/assets/ext/xbim/xbim-viewer'); // is that the correct way to import the viewer?

let check = Viewer.check();
if (check.noErrors) {
  let canvas = document.getElementbyId('canvas');
  let viewer = new Viewer(canvas);
  viewer.load("static/_WEXBIM/psamplehouse/samplehouse.wexbim");

  viewer.on("loaded", function(model) {
    console.log("Loaded model!");
  });
  viewer.start();
}

Minimal file to reproduce the issue:

Below are two versions of the xbim-viewer. xbim-viewer90f7.js is identical to how it is saved under '@/assets/ext/xbim/xbim-viewer'. xbim-viewer.js is injected with the webpack exports etc. They are named such that they correspond to the error trace above. (I had to rename them with .txt, since I cannot upload .js files here.)

xbim-viewer.txt xbim-viewer90f7.txt

Thank you in advance for any help.

xujunpro2 commented 5 years ago

Import xbim-viewer.debug.bundle.js into vue cli，you need add "export{xViewer,xState}"

Truning commented 5 years ago

Thank you for your comment. I actually found an npm package here: https://www.npmjs.com/package/@dangl/xbim-viewer and import it with

import { Viewer, NavigationCube, State } from "@dangl/xbim-viewer";

Does anyone know, however, how current this version is and how I could modify some of its code?

GeorgDangl commented 5 years ago

That's my fork from: https://github.com/GeorgDangl/XbimWebUI.

It's missing a few commits from master as far as I can see, should be the 8 last ones from here: https://github.com/xBimTeam/XbimWebUI/commits/master The two relevant ones with functionality are these two:

I haven't updated it in quite some time, since there was no critical feature that I needed. I'm using the packages as-is in some projects. If there's demand, I can update the packages on npm, but it will take me a few days until I find time to do it.

I don't think it's easy to modify the code from the package, except by creating your own package.

GeorgDangl commented 5 years ago

This is also related to #137

Truning commented 5 years ago

I see, thank you for the response. Well, I would really appreciate any progress on this package, since it is really nice and easy to use in VueJS. Anything I could do to help? I would also like to have the fly functionality implemented by Edocuments (here: https://github.com/Edocuments/XbimWebUI) and the mobile functionality that is implemented in the debug branch.

GeorgDangl commented 5 years ago

You could create a pull request😀

Truning commented 5 years ago

Hi GeorgDangl! So just that I do this correctly: I fork your repo, create a new branch from feature/npm-publish, do my modifications and create a merge request with my new branch?

Also I had implemented a second highlight state, when I was still using plain .js, so I could have one object highlighted differently from a selection of highlighted objects for the user. It was something that I couldn't solve with styles. Is this something I could include in my pull request?

Thank you in advance.

GeorgDangl commented 5 years ago

Exactly, that's how you can do it. You can try to merge any changes you want, as long as they make sense😊

Long term, I don't plan on having a separate version of the official repository at all, so I think we should look at how to get an official package for xBim published to npm. But I guess you guys have some plans for that, @martin1cerny?

Also, I've noticed that develop and master haven't been merged in quite some time, and both have had active development. Do you know which branch is the current one?

martin1cerny commented 5 years ago

Yes I have @GeorgDangl. I have it all set up in a private branch with loads of other improvements and changes. But I currently don't have enough time to merge it in the public repository. But it is planned. It will than be pure web project with no dependency on VisualStudio and will be published as a proper NPM package.

Truning commented 5 years ago

@GeorgDangl Okay, I did the pull request. Hope everything works as intended. Thanks a lot!

@martin1cerny I would really appreaciate these improvements! If there's is anything I could do to speed up this process, please tell me.

Other than that, thank you very much for your work!

xBimTeam / XbimWebUI