API integration with React.js

(Tiredtire) #1

I am trying to integrate API with our application using React.js.
There is below error on using “new window.SDVApp.ParametricViewer(settings);”
The error looks like cloning objet problem with JSON in javascript
Is there anyone integrating API with React.js? how to solve this problem?

=== error ===
Uncaught TypeError: Converting circular structure to JSON
at JSON.stringify ()
at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (GlobalUtils.js:259)
at module$src$app$ViewerApp.default.module$src$shared$mixins$SettingsMixin.default (SettingsMixin.js:64)
at new module$src$app$ViewerApp.default (ViewerApp.js:80)
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:371)

=====javascript code in React component=====
const settings = {
container: window.document.getElementById(‘sdv-container’),
ticket: ‘my_ticket’,
this.api = new window.SDVApp.ParametricViewer(settings);

===== error occurs at =====
this.deepCopy = function(o, assign) {
if (o === undefined) return;
if (!assign) {
// simple case, copy everything, potentially loosing objects which can’t be stringified
return JSON.parse( JSON.stringify(o,that.deepCopyReplacer), that.deepCopyReviver );

===== variable o in the above =====
anchorElements: true
apiversion: “2”
authorization: “”
blurSceneWhenBusy: true
brandedMode: true
build_branch: “master”
build_commit: “3dc67e2fc3b4a29c26299eb23243ab3351858dd6”
build_date: “2019-02-01T17:50:34.944Z”
build_version: “2.5.0”
busyGraphic: null
commPluginRuntimeId: “CommPlugin_1”
container: div#sdv-container
containerControls: null
containerSettings: null
createButtons: true
deferGeometryLoading: false
domElementIdPrefix: “sdv-container”
editMode: false
exportModal: true
exposeViewer: false
iframeDebugging: false
loggingLevel: -1
messageLoggingLevel: -1
modelViewUrl: “”
showBusySpinner: true
showControlsButton: true
showControlsInitial: false
showFullscreenButton: true
showInitialSpinner: true
showSceneMode: 2
showSettingsButton: true
showSettingsInitial: false
showZoomButton: true
ticket: “my_ticket”
viewportOverlays: true
zoomButtonResetsCamera: false

(Alexander Schiftner) #2

It seems there are some specifics related to React which we would need to change in the viewer constructor to make this work. Please try this for now:

  1. Initially set the container property to an empty array, then call the viewer constructor.
  2. Use the viewport API to create a viewport: https://viewer.shapediver.com/v2/2.5.0/doc/module-ApiInterfaceV2-ApiViewportsInterface.html

Looking forward to your feedback.

(Tiredtire) #3

I changed my code to

const settings = {
container: [ ],
ticket: ‘my_ticket’,
this.api = new window.SDVApp.ParametricViewer(settings);

=== error ===
package.js:283 Uncaught TypeError: Cannot read property ‘parentElement’ of undefined
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:283)

not working because according to your link about viewport api, viewport can be created by api instance. but api construction is failed because above code.

(Alexander Schiftner) #4

I will review and get back to you. The viewer had not been used yet with react, but it shouldn’t be a problem.

(Alexander Schiftner) #5

There was a bug related to passing an empty container array to the constructor. This has been fixed in version 2.6.0, please give it a try: https://viewer.shapediver.com/v2/2.6.0/doc/index.html

(Alexander Schiftner) #6

@tiredtire could you get you react application to work with our viewer?