@archvisioninc/canvas 3.3.7 → 3.3.9

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(wc -l /c/Users/ArchVision/Documents/git/archvision-canvas/src/package/helpers/*.js)",
+      "Bash(npx eslint:*)"
+    ]
+  }
+}

package/README_DEV.md

@@ -30,7 +30,10 @@ You will need to be invited to the Archvision, Inc. team on [NPM](https://npmjs.
 
 Since the canvas package is under Archvision, Inc.  It will be identified as [@archvisioninc/canvas](https://npmjs.com/package/@archvisioninc/canvas).
 
-
+> npm has updated their packaging publishing process that may require the developer to add 2FA to their account.  Once this is added to the developer's account, they will need to run
+>> npm login
+>
+> to reauthenticate with the 2FA enabled.  This 2FA process will also be required when publishing a new version of canvas to npm. 
 
 ## Project structure and organization
 This project's main development environment is found in `/src`.  Each file and folder, except the `/src/package` folder,

package/dist/helpers/canvasUpdateHelpers.js

@@ -257,6 +257,60 @@ const dataUrlToBlob = dataURI => {
   });
   return blob;
 };
+const getActiveAnimationGroup = animationGroups => {
+  const selectedAnimationIndex = scene.metadata?.selectedAnimation;
+  if (selectedAnimationIndex === null || selectedAnimationIndex === undefined) {
+    return null;
+  }
+  return animationGroups.find((_group, index) => {
+    return `${index}` === `${selectedAnimationIndex}`;
+  }) || null;
+};
+let animationSyncObserver = null;
+let lastAnimationSerializeAt = 0;
+const ANIMATION_SYNC_MS = 50;
+const pushAnimationStateToReact = () => {
+  const activeAnimationGroup = getActiveAnimationGroup(scene.animationGroups || []);
+  syncSelectedAnimationMeta(activeAnimationGroup);
+  const now = performance.now();
+  if (props.setSerializedData && now - lastAnimationSerializeAt >= ANIMATION_SYNC_MS) {
+    lastAnimationSerializeAt = now;
+    props.setSerializedData(serializeScene());
+  }
+};
+const ensureAnimationStateSync = () => {
+  if (animationSyncObserver || !scene?.onBeforeRenderObservable) {
+    return;
+  }
+  animationSyncObserver = scene.onBeforeRenderObservable.add(() => {
+    const activeAnimationGroup = getActiveAnimationGroup(scene.animationGroups || []);
+    if (!activeAnimationGroup) {
+      return;
+    }
+    pushAnimationStateToReact();
+  });
+};
+const syncSelectedAnimationMeta = animationGroup => {
+  if (!scene.metadata) return;
+  if (!animationGroup) {
+    scene.metadata.selectedAnimationTime = 0;
+    scene.metadata.selectedAnimationProgress = 0;
+    scene.metadata.selectedAnimationDuration = 0;
+    scene.metadata.selectedAnimationIsPlaying = false;
+    return;
+  }
+  const runtimeAnimation = animationGroup.animatables?.[0]?.getAnimations?.()?.[0];
+  const currentFrame = runtimeAnimation?.currentFrame ?? animationGroup.from ?? 0;
+  const from = animationGroup.from ?? 0;
+  const to = animationGroup.to ?? 0;
+  const totalFrames = Math.max(to - from, 1);
+  const progress = BABYLON.Scalar.Clamp((currentFrame - from) / totalFrames, 0, 1);
+  const duration = animationGroup.getLength?.() ?? 0;
+  scene.metadata.selectedAnimationProgress = progress;
+  scene.metadata.selectedAnimationTime = progress * duration;
+  scene.metadata.selectedAnimationDuration = duration;
+  scene.metadata.selectedAnimationIsPlaying = Boolean(animationGroup.isPlaying);
+};
 export const updateMaterial = inboundData => {
   const {
     payload
@@ -599,6 +653,10 @@ export const updateMesh = inboundData => {
     animationId,
     resetAnimation,
     loopAnimation = true,
+    playAnimation,
+    pauseAnimation,
+    seekAnimation,
+    animationProgress,
     sourceUnit,
     displayUnit
   } = payload;
@@ -741,6 +799,8 @@ export const updateMesh = inboundData => {
   if (resetAnimation) {
     stopAllAnimationGroups();
     newMetaDataEntry('selectedAnimation', null);
+    syncSelectedAnimationMeta(null);
+    props.setSerializedData?.(serializeScene());
   }
 
   // Change active animation
@@ -750,8 +810,39 @@ export const updateMesh = inboundData => {
     if (animationGroup) {
       animationGroup.start(Boolean(loopAnimation));
       newMetaDataEntry('selectedAnimation', `${animationId}`);
+      syncSelectedAnimationMeta(animationGroup);
+      ensureAnimationStateSync();
+      props.setSerializedData?.(serializeScene());
     }
   }
+  const activeAnimationGroup = getActiveAnimationGroup(animationGroups);
+
+  // Play current animation
+  if (playAnimation && activeAnimationGroup) {
+    activeAnimationGroup.play(Boolean(loopAnimation));
+    syncSelectedAnimationMeta(activeAnimationGroup);
+    ensureAnimationStateSync();
+    props.setSerializedData?.(serializeScene());
+  }
+
+  // Pause current animation
+  if (pauseAnimation && activeAnimationGroup) {
+    activeAnimationGroup.pause();
+    syncSelectedAnimationMeta(activeAnimationGroup);
+    props.setSerializedData?.(serializeScene());
+  }
+
+  // Seek current animation to a progress position (0–1)
+  if (seekAnimation && activeAnimationGroup && animationProgress !== undefined) {
+    const {
+      from,
+      to
+    } = activeAnimationGroup;
+    const frame = from + animationProgress * (to - from);
+    activeAnimationGroup.goToFrame(frame);
+    syncSelectedAnimationMeta(activeAnimationGroup);
+    props.setSerializedData?.(serializeScene());
+  }
 
   // Bounding Box Toggle
   if (boundingBoxEnabled !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "3.3.7",
+  "version": "3.3.9",
   "private": false,
   "main": "dist/Canvas.js",
   "module": "dist/Canvas.js",
@@ -28,6 +28,7 @@
     ]
   },
   "dependencies": {
+    "@archvisioninc/canvas": "^3.3.8",
     "d3-array": "^3.2.2",
     "lodash": "^4.17.21",
     "styled-components": "^5.3.6"

package/src/package/helpers/canvasUpdateHelpers.js

@@ -317,6 +317,85 @@ const dataUrlToBlob = dataURI => {
   return blob;
 };
 
+const getActiveAnimationGroup = animationGroups => {
+  const selectedAnimationIndex = scene.metadata?.selectedAnimation;
+
+  if (selectedAnimationIndex === null || selectedAnimationIndex === undefined) {
+    return null;
+  }
+
+  return animationGroups.find((_group, index) => {
+    return `${index}` === `${selectedAnimationIndex}`;
+  }) || null;
+};
+
+let animationSyncObserver = null;
+let lastAnimationSerializeAt = 0;
+const ANIMATION_SYNC_MS = 50;
+
+const pushAnimationStateToReact = () => {
+  const activeAnimationGroup = getActiveAnimationGroup(scene.animationGroups || []);
+
+  syncSelectedAnimationMeta(activeAnimationGroup);
+
+  const now = performance.now();
+  if (
+    props.setSerializedData
+    && now - lastAnimationSerializeAt >= ANIMATION_SYNC_MS
+  ) {
+    lastAnimationSerializeAt = now;
+    props.setSerializedData(serializeScene());
+  }
+};
+
+const ensureAnimationStateSync = () => {
+  if (animationSyncObserver || !scene?.onBeforeRenderObservable) {
+    return;
+  }
+
+  animationSyncObserver = scene.onBeforeRenderObservable.add(() => {
+    const activeAnimationGroup = getActiveAnimationGroup(scene.animationGroups || []);
+
+    if (!activeAnimationGroup) {
+      return;
+    }
+
+    pushAnimationStateToReact();
+  });
+};
+
+const syncSelectedAnimationMeta = animationGroup => {
+  if (!scene.metadata) return;
+
+  if (!animationGroup) {
+    scene.metadata.selectedAnimationTime = 0;
+    scene.metadata.selectedAnimationProgress = 0;
+    scene.metadata.selectedAnimationDuration = 0;
+    scene.metadata.selectedAnimationIsPlaying = false;
+    return;
+  }
+
+  const runtimeAnimation = animationGroup.animatables?.[0]?.getAnimations?.()?.[0];
+  const currentFrame = runtimeAnimation?.currentFrame ?? animationGroup.from ?? 0;
+  const from = animationGroup.from ?? 0;
+  const to = animationGroup.to ?? 0;
+  const totalFrames = Math.max(to - from, 1);
+
+  const progress = BABYLON.Scalar.Clamp(
+    (currentFrame - from) / totalFrames,
+    0,
+    1
+  );
+
+  const duration = animationGroup.getLength?.() ?? 0;
+
+  scene.metadata.selectedAnimationProgress = progress;
+  scene.metadata.selectedAnimationTime = progress * duration;
+  scene.metadata.selectedAnimationDuration = duration;
+  scene.metadata.selectedAnimationIsPlaying = Boolean(animationGroup.isPlaying);
+};
+
+
 export const updateMaterial = inboundData => {
   const { payload } = inboundData;
   const {
@@ -669,6 +748,10 @@ export const updateMesh = inboundData => {
     animationId,
     resetAnimation,
     loopAnimation = true,
+    playAnimation,
+    pauseAnimation,
+    seekAnimation,
+    animationProgress,
     sourceUnit,
     displayUnit,
   } = payload;
@@ -790,6 +873,8 @@ export const updateMesh = inboundData => {
   if (resetAnimation) {
     stopAllAnimationGroups();
     newMetaDataEntry('selectedAnimation', null);
+    syncSelectedAnimationMeta(null);
+    props.setSerializedData?.(serializeScene());
   }
 
   // Change active animation
@@ -801,9 +886,38 @@ export const updateMesh = inboundData => {
     if (animationGroup) {
       animationGroup.start(Boolean(loopAnimation));
       newMetaDataEntry('selectedAnimation', `${animationId}`);
+      syncSelectedAnimationMeta(animationGroup);
+      ensureAnimationStateSync();
+      props.setSerializedData?.(serializeScene());
     }
   }
 
+  const activeAnimationGroup = getActiveAnimationGroup(animationGroups);
+
+  // Play current animation
+  if (playAnimation && activeAnimationGroup) {
+    activeAnimationGroup.play(Boolean(loopAnimation));
+    syncSelectedAnimationMeta(activeAnimationGroup);
+    ensureAnimationStateSync();
+    props.setSerializedData?.(serializeScene());
+  }
+
+  // Pause current animation
+  if (pauseAnimation && activeAnimationGroup) {
+    activeAnimationGroup.pause();
+    syncSelectedAnimationMeta(activeAnimationGroup);
+    props.setSerializedData?.(serializeScene());
+  }
+
+  // Seek current animation to a progress position (0–1)
+  if (seekAnimation && activeAnimationGroup && animationProgress !== undefined) {
+    const { from, to } = activeAnimationGroup;
+    const frame = from + animationProgress * (to - from);
+    activeAnimationGroup.goToFrame(frame);
+    syncSelectedAnimationMeta(activeAnimationGroup);
+    props.setSerializedData?.(serializeScene());
+  }
+
   // Bounding Box Toggle
   if (boundingBoxEnabled !== undefined) {
     toggleBoundingBoxWidget();