TreeViewPlugin

[vadimt2]

I need to add some logic to TreeViewPlugin. When do i know the TreeViewPlugin is loaded? model.on("loaded", () is not a good option for me because the model can be loaded before then the TreeViewPlugin with all the tree nodes

[samouray69]

I have a problem with TreeViewPlugin , when i deloyed my application on Ubuntu system , the metadata are not visible , could you help me please ?

[djamel2288]

Hi, me too I have the same problem, i tried with: let model = xktLoader.load({ id: idModel, xkt: xktFile, metaModelData: metaModel, edges: true, saoEnabled: true, excludeUnclassifiedObjects: false, });

it works fine on local (windows), but when i try to deployed my app on an Ubuntu system, I have the same problem...

then I changed to this...

let model = xktLoader.load({ id: idModel, src: xktFileBlobUrl, metaModelSrc: metaModelBlobUrl, edges: true, saoEnabled: true, excludeUnclassifiedObjects: false, });

where xktFileBlobUrl and metaModelBlobUrl is on blob format convertet to url using this...

const blob: any = new Blob([data], { type: 'application/*; charset=utf-8' }); const url = window.URL.createObjectURL(blob); xktFileBlobUrl = url;

also it works fine on localhost, i don't testing it on server yet but i tested it on docker image (ubunto), and ( Content-Security-Policy) error.

if there is someone a can help i will be very grateful

[xeolabs]

Are there any error messages in the JS console?

[djamel2288]

thank you for responding me, if I use this... let model = xktLoader.load({ id: idModel, xkt: xktFile, metaModelData: metaModel, edges: true, saoEnabled: true, excludeUnclassifiedObjects: false, }); locally it works fine, but on the server the model display but the treeView stay empty without error.

if I use this... const blob: any = new Blob([data], { type: 'application/*; charset=utf-8' }); const url = window.URL.createObjectURL(blob); xktFileBlobUrl = url; locally work fine too, but on ubunto docker image (not on server) I have ( Content-Security-Policy) error.

I don't know what's wrong, and what is the best way to get xkt / metamodel from my server and desplay it

Thank you again.

[djamel2288]

hi, it seems that the problem is the metaObject

[vadimt2]

I did the same use u: const blob: any = new Blob([response.data], { type: 'application/*; charset=utf-8' }); const url = window.URL.createObjectURL(blob); xktFileBlobUrl = url; and i've got this issue: Uncaught incorrect header check

[djamel2288]

hi,I solved my problem with the blob solution by adding those in my index header, also in my backend's header configuration.

default-src * data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline';font-src * data: blob: 'unsafe-inline'

nb: if you add this, you will allow types of access.

now my problem is, my metaObject on server gives wrong IDs for entities a don't know why, since it's the same code on localhost and every thing work fin.

[vadimt2]

how do you add header to blob in js ? axios.get("./models/xkt/duplex/duplex.xkt").then(response => { const blob = new Blob([response.data], { type: 'application/*; charset=utf-8' }); const url = window.URL.createObjectURL(blob); let xktFileBlobUrl = url;

• metaObject - i have generated the metaObject from ifc file with xeokit-metadata tool and it worked.

[djamel2288]

I use angular with spring-boot, so for the blob I use this function to create xktFileBlobUrl and metaModelBlobUrl ( global variables )

ANGULAR const blob: any = new Blob([data], { type: 'application/*; charset=utf-8' }); const url = window.URL.createObjectURL(blob); xktFileBlobUrl = url;

and then I use the URL like this...

JS file let model = xktLoader.load({ id: idModel, src: xktFileBlobUrl, metaModelSrc: metaModelBlobUrl, edges: true, saoEnabled: true, excludeUnclassifiedObjects: false, });

I added those in my index.html header and in my spring-boot configuration... default-src * data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline';font-src * data: blob: 'unsafe-inline'

[djamel2288]

and for the metaObject when I run my project locally ( windows ) it works well, but if I try to run it on docker Or server ( I use ubuntu for both ), I can't show the TreeView and I can't understand where is the problem.

and I found that for example when I click over un element console tel me that metaobject is undefined, and when I compare element ID's I found that is wrong for example it should give $0sdsd5ds, but it gives me some thing like this ( product -....-body)

[vadimt2]

I did the same thing as you: axios.get("./models/xkt/duplex/duplex.xkt").then((response) => { const blob = new Blob([response.data], { type: "application/*; charset=utf-8", }); const url = window.URL.createObjectURL(blob); let xktFileBlobUrl = url; let mechanical = xktLoader.load({ id: index + "", src: xktFileBlobUrl, metaModelSrc: element.metaModelSrc, edges: true, saoEnabled: true, excludeUnclassifiedObjects: false, }); and this is to my header: <meta http-equiv="Content-Security-Policy" content="default-src * data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline';font-src * data: blob: 'unsafe-inline'"> and i have this error: Uncaught incorrect header check

[djamel2288]

i don't know , but metaModelSrc must be JSON

[vadimt2]

This is working great: src: "./models/xkt/duplex/duplex.xkt", metaModelSrc: "./metaModels/duplex/metaModel.json", and here i'm getting the error: ` axios.get("./models/xkt/duplex/duplex.xkt").then((response) => { const blob = new Blob([response.data], { type: "application/*; charset=utf-8", }); const url = window.URL.createObjectURL(blob); let mechanical = xktLoader.load({ id: index + "", src: url, metaModelSrc: "./metaModels/duplex/metaModel.json", edges: true, saoEnabled: true, exclude });

`

[djamel2288]

for metaModelSrc try to add JSON.stringify to your response data.

[djamel2288]

@xeolabs, @Amoki can you help me please?

[Amoki]

axios.get("./models/xkt/duplex/duplex.xkt")

You can't load local files from JS for security reasons (you don't want any web page to be able to access your local files).

XMLHttpRequest replaces automatically ./models/xkt/duplex/duplex.xkt by ${current_url}/models/xkt/duplex/duplex.xkt, so it kinda works if ${current_url}/models/xkt/duplex/duplex.xkt is a valid path.

Axios does not do that so you must give it a valid URL: axios.get("https://domain.tld/models/xkt/duplex/duplex.xkt")

Disabling browser security is a big mistake.

[vadimt2]

I got it here: https://github.com/xeokit/xeokit-sdk/issues/557 I have already solved it, tnx)