Add state handler implementations and documentation

- Implemented StateHandler class with methods for entering, exiting, and updating states. - Created TypeStateHandler for handling typing state with appropriate animations and transitions. - Developed WaitStateHandler for managing idle state with quirk animations. - Added JSDoc documentation for all new classes and methods. - Included CSS styles for documentation formatting and syntax highlighting. fix: update standard configuration to include ignore for scripts directory
2025-05-24 12:31:01 +02:00
parent e217642174
commit e2402d8fdc
66 changed files with 27837 additions and 5 deletions
--- a/docs/animation_AnimationClip.js.html
+++ b/docs/animation_AnimationClip.js.html
@ -0,0 +1,375 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>JSDoc: Source: animation/AnimationClip.js</title>
+
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="styles/prettify-tomorrow.css"
+    />
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
+  </head>
+
+  <body>
+    <div id="main">
+      <h1 class="page-title">Source: animation/AnimationClip.js</h1>
+
+      <section>
+        <article>
+          <pre class="prettyprint source linenums"><code>/**
+ * @fileoverview Core animation classes for clip management and creation
+ * @module animation
+ */
+
+import * as THREE from 'three'
+import { ClipTypes, Config } from '../constants.js'
+
+/**
+ * Represents a single animation clip with metadata and Three.js action
+ * @class
+ */
+export class AnimationClip {
+  /**
+   * Create an animation clip
+   * @param {string} name - The name of the animation clip
+   * @param {THREE.AnimationClip} threeAnimation - The Three.js animation clip
+   * @param {Object} metadata - Parsed metadata from animation name
+   */
+  constructor (name, threeAnimation, metadata) {
+    /**
+     * The name of the animation clip
+     * @type {string}
+     */
+    this.name = name
+
+    /**
+     * The Three.js animation clip
+     * @type {THREE.AnimationClip}
+     */
+    this.animation = threeAnimation
+
+    /**
+     * Parsed metadata about the animation
+     * @type {Object}
+     */
+    this.metadata = metadata
+
+    /**
+     * The Three.js animation action
+     * @type {THREE.AnimationAction|null}
+     */
+    this.action = null
+
+    /**
+     * The animation mixer
+     * @type {THREE.AnimationMixer|null}
+     */
+    this.mixer = null
+  }
+
+  /**
+   * Create and configure a Three.js action for this clip
+   * @param {THREE.AnimationMixer} mixer - The animation mixer
+   * @returns {THREE.AnimationAction} The created action
+   */
+  createAction (mixer) {
+    this.mixer = mixer
+    this.action = mixer.clipAction(this.animation)
+
+    // Configure based on type
+    if (
+      this.metadata.type === ClipTypes.LOOP ||
+      this.metadata.type === ClipTypes.NESTED_LOOP
+    ) {
+      this.action.setLoop(THREE.LoopRepeat, Infinity)
+    } else {
+      this.action.setLoop(THREE.LoopOnce)
+      this.action.clampWhenFinished = true
+    }
+
+    return this.action
+  }
+
+  /**
+   * Play the animation with optional fade in
+   * @param {number} [fadeInDuration=0.3] - Fade in duration in seconds
+   * @returns {Promise&lt;void>} Promise that resolves when fade in completes
+   */
+  play (fadeInDuration = Config.DEFAULT_FADE_IN) {
+    if (this.action) {
+      this.action.reset()
+      this.action.fadeIn(fadeInDuration)
+      this.action.play()
+    }
+  }
+
+  /**
+   * Stop the animation with optional fade out
+   * @param {number} [fadeOutDuration=0.3] - Fade out duration in seconds
+   * @returns {Promise&lt;void>} Promise that resolves when fade out completes
+   */
+  stop (fadeOutDuration = Config.DEFAULT_FADE_OUT) {
+    if (this.action) {
+      this.action.fadeOut(fadeOutDuration)
+      setTimeout(() => {
+        if (this.action) {
+          this.action.stop()
+        }
+      }, fadeOutDuration * 1000)
+    }
+  }
+
+  /**
+   * Check if the animation is currently playing
+   * @returns {boolean} True if playing, false otherwise
+   */
+  isPlaying () {
+    return this.action?.isRunning() || false
+  }
+}
+
+/**
+ * Factory for creating animation clips with parsed metadata
+ * @class
+ */
+export class AnimationClipFactory {
+  /**
+   * Create an animation clip factory
+   * @param {AnimationLoader} animationLoader - The animation loader instance
+   */
+  constructor (animationLoader) {
+    /**
+     * The animation loader for loading animation data
+     * @type {AnimationLoader}
+     */
+    this.animationLoader = animationLoader
+
+    /**
+     * Cache for created animation clips
+     * @type {Map&lt;string, AnimationClip>}
+     */
+    this.clipCache = new Map()
+  }
+
+  /**
+   * Parse animation name and create clip metadata
+   * Format: [state]_[action]_[type] or [state]_[action]2[toState]_[emotion]_T
+   * @param {string} name - The animation name to parse
+   * @returns {Object} Parsed metadata object
+   */
+  parseAnimationName (name) {
+    const parts = name.split('_')
+    const state = parts[0]
+    const action = parts[1]
+
+    // Handle transitions with emotions
+    if (parts[2]?.includes('2') &amp;&amp; parts[3] === ClipTypes.TRANSITION) {
+      const [, toState] = parts[2].split('2')
+      return {
+        state,
+        action,
+        toState,
+        emotion: parts[2] || '',
+        type: ClipTypes.TRANSITION,
+        isTransition: true,
+        hasEmotion: true
+      }
+    }
+
+    // Handle regular transitions
+    if (parts[2] === ClipTypes.TRANSITION) {
+      return {
+        state,
+        action,
+        type: ClipTypes.TRANSITION,
+        isTransition: true
+      }
+    }
+
+    // Handle nested animations
+    if (parts[2] === ClipTypes.NESTED_IN || parts[2] === ClipTypes.NESTED_OUT) {
+      return {
+        state,
+        action,
+        type: parts[2],
+        nestedType: parts[3],
+        isNested: true
+      }
+    }
+
+    // Handle nested loops and quirks
+    if (
+      parts[3] === ClipTypes.NESTED_LOOP ||
+      parts[3] === ClipTypes.NESTED_QUIRK
+    ) {
+      return {
+        state,
+        action,
+        subAction: parts[2],
+        type: parts[3],
+        isNested: true
+      }
+    }
+
+    // Handle standard loops and quirks
+    return {
+      state,
+      action,
+      type: parts[2],
+      isStandard: true
+    }
+  }
+
+  /**
+   * Create an animation clip from a name
+   * @param {string} name - The animation name
+   * @returns {Promise&lt;AnimationClip>} The created animation clip
+   */
+  async createClip (name) {
+    if (this.clipCache.has(name)) {
+      return this.clipCache.get(name)
+    }
+
+    const metadata = this.parseAnimationName(name)
+    const animation = await this.animationLoader.loadAnimation(name)
+
+    const clip = new AnimationClip(name, animation, metadata)
+    this.clipCache.set(name, clip)
+
+    return clip
+  }
+
+  /**
+   * Create all animation clips from a model's animations
+   * @param {THREE.Object3D} model - The 3D model containing animations
+   * @returns {Promise&lt;Map&lt;string, AnimationClip>>} Map of animation name to clip
+   */
+  async createClipsFromModel (model) {
+    const clips = new Map()
+    const animations = model.animations || []
+
+    for (const animation of animations) {
+      const clip = await this.createClip(animation.name, model)
+      clips.set(animation.name, clip)
+    }
+
+    return clips
+  }
+
+  /**
+   * Clear the clip cache
+   * @returns {void}
+   */
+  clearCache () {
+    this.clipCache.clear()
+  }
+
+  /**
+   * Get cached clip by name
+   * @param {string} name - The animation name
+   * @returns {AnimationClip|undefined} The cached clip or undefined
+   */
+  getCachedClip (name) {
+    return this.clipCache.get(name)
+  }
+}
+</code></pre>
+        </article>
+      </section>
+    </div>
+
+    <nav>
+      <h2><a href="index.html">Home</a></h2>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-StateHandler.html">StateHandler</a></li>
+        <li><a href="module-animation.html">animation</a></li>
+        <li>
+          <a href="module-animation_AnimationConstants.html"
+            >animation/AnimationConstants</a
+          >
+        </li>
+        <li>
+          <a href="module-animation_AnimationNameMapper.html"
+            >animation/AnimationNameMapper</a
+          >
+        </li>
+        <li><a href="module-constants.html">constants</a></li>
+        <li><a href="module-core.html">core</a></li>
+        <li><a href="module-factories.html">factories</a></li>
+        <li><a href="module-loaders.html">loaders</a></li>
+        <li><a href="module-owen.html">owen</a></li>
+        <li><a href="module-states.html">states</a></li>
+      </ul>
+      <h3>Classes</h3>
+      <ul>
+        <li>
+          <a href="module-StateHandler.StateHandler.html">StateHandler</a>
+        </li>
+        <li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
+        <li>
+          <a href="module-animation.AnimationClipFactory.html"
+            >AnimationClipFactory</a
+          >
+        </li>
+        <li>
+          <a
+            href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
+            >AnimationNameMapper</a
+          >
+        </li>
+        <li>
+          <a href="module-core.OwenAnimationContext.html"
+            >OwenAnimationContext</a
+          >
+        </li>
+        <li>
+          <a href="module-factories.OwenSystemFactory.html"
+            >OwenSystemFactory</a
+          >
+        </li>
+        <li>
+          <a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
+        </li>
+        <li>
+          <a href="module-loaders.GLTFAnimationLoader.html"
+            >GLTFAnimationLoader</a
+          >
+        </li>
+        <li>
+          <a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
+        </li>
+        <li><a href="module-states.StateFactory.html">StateFactory</a></li>
+        <li>
+          <a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
+        </li>
+        <li>
+          <a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
+        </li>
+      </ul>
+    </nav>
+
+    <br class="clear" />
+
+    <footer>
+      Documentation generated by
+      <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
+      2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
+    </footer>
+
+    <script>
+      prettyPrint();
+    </script>
+    <script src="scripts/linenumber.js"></script>
+  </body>
+</html>