@avs/go-react 0.12.71739 → 0.13.71745

package/demo/src/App.tsx

@@ -1,38 +1,48 @@
-import './App.css'
-import { useRef } from 'react';
-import { AvsGoDataViz } from '@avs/go-react/src/AvsGoDataViz';
-
-const serverUrl = "http://localhost:8080/OpenVizAppServer/chart"
-//const serverUrl = "hydrogen.json";
+import './App.css'
+import { AvsGoDataViz } from '@avs/go-react/src/AvsGoDataViz';
+import { useRef } from 'react';
 
-const myStyle = {
-	'--avs-transform-animation': '[{"time":0,"rotation":[-75,0,0,"XYZ"],"position":[0,0,0],"scale":100},{"time":2000,"rotation":[-75,0,-90,"XYZ"],"position":[0,0,0],"scale":100},{"time":4000,"rotation":[-75,0,-90,"XYZ"],"position":[0,0,0],"scale":200},{"time":6000,"rotation":[0,0,-90,"XYZ"],"position":[0,0,0],"scale":200}]'
-};
+const startupAnimation = null; // btoa('[{"time":0,"rotation":[-75,0,0,"XYZ"],"position":[0,0,0],"scale":100},{"time":2000,"rotation":[-75,0,-90,"XYZ"],"position":[0,0,0],"scale":100},{"time":4000,"rotation":[-75,0,-90,"XYZ"],"position":[0,0,0],"scale":200},{"time":6000,"rotation":[0,0,-90,"XYZ"],"position":[0,0,0],"scale":200}]');
+const params = new URLSearchParams(window.location.search);
+const param = params.get('animation');
 
-function App() {
+function App() {
 	const dataVizRef = useRef(null);
 
-	function handleLoadComplete() {
+	function handleLoadComplete() {
 		if (dataVizRef.current) {
 			dataVizRef.current.runAnimation();
 		}
-	}
-
-  return (
-    <div style={{width: '100vw', height: '100vh'}}>
-		  <AvsGoDataViz
-			  ref={dataVizRef}
-			  url={serverUrl}
-			  xurlLoadJsonFile
-			  sceneName="contour3dConstraint"
-			  streamEnable
-			  style={myStyle}
-			  renderer='THREEJS'
-			  transformEnable
-			  onLoadComplete={handleLoadComplete}
-	  />
-    </div>
-  )
-}
-
-export default App
+	}
+
+	function handleTransformAnimationShare(animation: string) {
+		const url = window.location.origin + window.location.pathname + "?animation=" + animation;
+		navigator.clipboard.writeText(url);
+
+		const dialog = document.createElement("dialog");
+		document.body.appendChild(dialog);
+		dialog.innerText = "URL copied to clipboard";
+		dialog.show();
+		setTimeout(function () {
+			dialog.close();
+		}, 1000);
+	}
+
+  return (
+    <div style={{width: '100vw', height: '100vh', backgroundColor: 'white'}}>
+	    <AvsGoDataViz
+				url='hydrogen.json'
+				ref={dataVizRef}
+				urlLoadJsonFile
+				renderer='THREEJS'
+				transformEnable
+				transformAnimation={param ?? startupAnimation}
+				animationControlsEnable
+				onLoadComplete={handleLoadComplete}
+				onTransformAnimationShare={handleTransformAnimationShare}
+	    />
+    </div>
+  )
+}
+
+export default App

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avs/go-react",
-  "version": "0.12.71739",
+  "version": "0.13.71745",
   "description": "React wrapper for AVS/Go web components",
   "keywords": [
     "visualization",
@@ -11,7 +11,7 @@
   "author": "Advanced Visual Systems Inc.",
   "license": "Apache-2.0",
   "dependencies": {
-    "@avs/go": "0.12.71739",
+    "@avs/go": "0.13.71745",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/src/AvsGoDataViz.jsx

@@ -73,6 +73,7 @@ export const AvsGoDataViz = forwardRef(({
   transformTwistAngle,
   transformTiltAngle,
   transformScale,
+  transformAnimation,
   zoomRectangleEnable,
   panEnable,
   panZoomEnable,
@@ -81,9 +82,11 @@ export const AvsGoDataViz = forwardRef(({
   panMaximumZoomLevel,
   animatedGlyphsVisible,
   animatedGlyphsEnable,
+  animationControlsEnable,
   onSceneInfo,
   onLoadComplete,
   onPanInfo,
+  onTransformAnimationShare,
   onError
 }, ref) => {
 
@@ -130,6 +133,12 @@ export const AvsGoDataViz = forwardRef(({
       }
     }
 
+    function handleTransformAnimationShare(e) {
+      if (onTransformAnimationShare) {
+        onTransformAnimationShare(e.detail);
+      }
+    }
+
     function handleError(e) {
       if (onError) {
         onError(e.detail);
@@ -142,6 +151,7 @@ export const AvsGoDataViz = forwardRef(({
     dataVizRef.current.addEventListener('avs-scene-info', handleSceneInfo);
     dataVizRef.current.addEventListener('avs-load-complete', handleLoadComplete);
     dataVizRef.current.addEventListener('avs-pan-info', handlePanInfo);
+    dataVizRef.current.addEventListener('avs-transform-animation-share', handleTransformAnimationShare);
     dataVizRef.current.addEventListener('avs-error', handleError);
 
     return () => {
@@ -152,6 +162,7 @@ export const AvsGoDataViz = forwardRef(({
         dataVizRef.current.removeEventListener('avs-scene-info', handleSceneInfo);
         dataVizRef.current.removeEventListener('avs-load-complete', handleLoadComplete);
         dataVizRef.current.removeEventListener('avs-pan-info', handlePanInfo);
+        dataVizRef.current.removeEventListener('avs-transform-animation-share', handleTransformAnimationShare);
         dataVizRef.current.removeEventListener('avs-error', handleError);
       }
     }
@@ -197,63 +208,65 @@ export const AvsGoDataViz = forwardRef(({
 
   return (
     <avs-go-dataviz
-        style={style}
-	    ref={dataVizRef}
-	    manual-update={manualUpdate}
-	    display-canvas={displayCanvas}
-	    url={url}
-	    url-load-json-file={urlLoadJsonFile}
-	    scene-name={sceneName}
-	    scene-user-properties={sceneUserProperties}
-	    data-source-name={dataSourceName}
-	    data-source-user-properties={dataSourceUserProperties}
-	    renderer-name={rendererName}
-	    renderer-user-properties={rendererUserProperties}
-	    renderer={renderer}
-	    stream-enable={streamEnable}
-	    stream-chunk-size-first={streamChunkSizeFirst}
-	    stream-chunk-size={streamChunkSize}
-	    theme-name={themeName}
-	    hidden={hidden}
-	    resize-threshold={resizeThreshold}
-	    aspect-ratio={aspectRatio}
-	    pointer-timeout={pointerTimeout}
-	    tap-enable={tapEnable}
-	    tap-level={tapLevel}
-	    tap-depth={tapDepth}
-	    tap-highlight-enable={tapHighlightEnable}
-	    tap-highlight-color={tapHighlightColor}
-	    tap-highlight-layer-enable={tapHighlightLayerEnable}
-	    tap-process-event-on-client={tapProcessEventOnClient}
-	    track-enable={trackEnable}
-	    track-level={trackLevel}
-	    track-depth={trackDepth}
-	    track-highlight-enable={trackHighlightEnable}
-	    track-highlight-color={trackHighlightColor}
-	    track-highlight-layer-enable={trackHighlightLayerEnable}
-	    track-process-event-on-client={trackProcessEventOnClient}
-	    hover-enable={hoverEnable}
-	    hover-level={hoverLevel}
-	    horer-depth={hoverDepth}
-	    hover-highlight-enable={hoverHighlightEnable}
-	    hover-highlight-color={hoverHighlightColor}
-	    hover-highlight-layer-enable={hoverHighlightLayerEnable}
-	    transform-enable={transformEnable}
-	    transform-client-only={transformClientOnly}
-	    transform-rotate-disable={transformRotateDisable}
-	    transform-zoom-disable={transformZoomDisable}
-	    transform-pan-disable={transformPanDisable}
-	    transform-twist-angle={transformTwistAngle}
-	    transform-tilt-angle={transformTiltAngle}
-	    transform-scale={transformScale}
-	    zoom-reactangle-enable={zoomRectangleEnable}
-	    pan-enable={panEnable}
-	    pan-zoom-enable={panZoomEnable}
-	    pan-width-zoom-level={panWidthZoomLevel}
-	    pan-height-zoom-level={panHeightZoomLevel}
-	    pan-maximum-zoom-level={panMaximumZoomLevel}
-	    animated-glyphs-visible={animatedGlyphsVisible}
-	    animated-glyphs-enable={animatedGlyphsEnable}
+      style={style}
+      ref={dataVizRef}
+      manual-update={manualUpdate}
+      display-canvas={displayCanvas}
+      url={url}
+      url-load-json-file={urlLoadJsonFile}
+      scene-name={sceneName}
+      scene-user-properties={sceneUserProperties}
+      data-source-name={dataSourceName}
+      data-source-user-properties={dataSourceUserProperties}
+      renderer-name={rendererName}
+      renderer-user-properties={rendererUserProperties}
+      renderer={renderer}
+      stream-enable={streamEnable}
+      stream-chunk-size-first={streamChunkSizeFirst}
+      stream-chunk-size={streamChunkSize}
+      theme-name={themeName}
+      hidden={hidden}
+      resize-threshold={resizeThreshold}
+      aspect-ratio={aspectRatio}
+      pointer-timeout={pointerTimeout}
+      tap-enable={tapEnable}
+      tap-level={tapLevel}
+      tap-depth={tapDepth}
+      tap-highlight-enable={tapHighlightEnable}
+      tap-highlight-color={tapHighlightColor}
+      tap-highlight-layer-enable={tapHighlightLayerEnable}
+      tap-process-event-on-client={tapProcessEventOnClient}
+      track-enable={trackEnable}
+      track-level={trackLevel}
+      track-depth={trackDepth}
+      track-highlight-enable={trackHighlightEnable}
+      track-highlight-color={trackHighlightColor}
+      track-highlight-layer-enable={trackHighlightLayerEnable}
+      track-process-event-on-client={trackProcessEventOnClient}
+      hover-enable={hoverEnable}
+      hover-level={hoverLevel}
+      horer-depth={hoverDepth}
+      hover-highlight-enable={hoverHighlightEnable}
+      hover-highlight-color={hoverHighlightColor}
+      hover-highlight-layer-enable={hoverHighlightLayerEnable}
+      transform-enable={transformEnable}
+      transform-client-only={transformClientOnly}
+      transform-rotate-disable={transformRotateDisable}
+      transform-zoom-disable={transformZoomDisable}
+      transform-pan-disable={transformPanDisable}
+      transform-twist-angle={transformTwistAngle}
+      transform-tilt-angle={transformTiltAngle}
+      transform-scale={transformScale}
+      transformAnimation={transformAnimation}
+      zoom-reactangle-enable={zoomRectangleEnable}
+      pan-enable={panEnable}
+      pan-zoom-enable={panZoomEnable}
+      pan-width-zoom-level={panWidthZoomLevel}
+      pan-height-zoom-level={panHeightZoomLevel}
+      pan-maximum-zoom-level={panMaximumZoomLevel}
+      animated-glyphs-visible={animatedGlyphsVisible}
+      animated-glyphs-enable={animatedGlyphsEnable}
+      animation-controls-enable={animationControlsEnable}
 	  >
 	  </avs-go-dataviz>
   );