@needle-tools/engine 4.11.4-next.a568de7 → 4.11.5-beta

package/src/engine/engine_camera.fit.ts

@@ -1,14 +1,13 @@
 import { Camera, Object3D, PerspectiveCamera, Vector3, Vector3Like } from "three";
 
 import { GroundProjectedEnv } from "../engine-components/GroundProjection.js";
+import type { OrbitControls } from "../engine-components/OrbitControls.js";
 import { findObjectOfType } from "./engine_components.js";
 import { Context } from "./engine_context.js";
 import { Gizmos } from "./engine_gizmos.js";
 import { getBoundingBox } from "./engine_three_utils.js";
 import { NeedleXRSession } from "./xr/NeedleXRSession.js";
 
-import type { OrbitControls } from "../engine-components/OrbitControls.js";
-
 
 /**
  * Options for fitting a camera to the scene or specific objects.

package/src/engine/extensions/NEEDLE_components.ts

@@ -1,8 +1,8 @@
 import { Object3D } from "three";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { type GLTF, type GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { isDevEnvironment } from "../debug/debug.js";
 
+import { isDevEnvironment } from "../debug/debug.js";
 import { builtinComponentKeyName } from "../engine_constants.js";
 import { debugExtension } from "../engine_default_parameters.js";
 import { getLoader } from "../engine_gltf.js";

package/src/engine/webcomponents/buttons.ts

@@ -8,7 +8,9 @@ import { getIconElement } from "./icons.js";
  * Use the ButtonsFactory to create buttons with icons and functionality   
  * Get access to the default buttons by using `ButtonsFactory.instance`  
  * The factory will create the buttons if they don't exist yet, and return the existing ones if they do (this allows you to reparent or modify created buttons) 
- */
+ * 
+ * @category HTML
+*/
 export class ButtonsFactory {
 
     private static _instance?: ButtonsFactory;

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -48,11 +48,13 @@ export declare type ButtonInfo = {
 }
 
 /**
- * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.
+ * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.  
+ * 
  * The menu can be used to add buttons to the needle engine that can be used to interact with the application.  
- * The menu can be positioned at the top or the bottom of the needle engine webcomponent  
  * 
- * @example Create a button using the NeedleMenu
+ * The menu can be positioned at the top or the bottom of the <needle-engine> webcomponent.
+ * 
+ * @example Add a new button using the NeedleMenu
  * ```typescript
  * onStart(ctx => {
  *   ctx.menu.appendChild({ 
@@ -76,6 +78,20 @@ export declare type ButtonInfo = {
  *    }
  * }, "*");
  * ```
+ * 
+ * @example Access the menu from a component
+ * ```typescript
+ * import { Behaviour, OnStart } from '@needle-tools/engine';
+ * 
+ * export class MyComponent extends Behaviour {
+ * 
+ *   start() {
+ *    this.context.menu.appendChild({ ... });
+ *   }
+ * }
+ * ```
+ * 
+ * @category HTML
  */
 export class NeedleMenu {
     private readonly _context: Context;
@@ -909,6 +925,27 @@ export class NeedleMenuElement extends HTMLElement {
             }
         }
     }
+    /**
+     * Appends a button or HTML element to the needle-menu options.
+     * @param node a Node or ButtonInfo to create a button from
+     * @returns the appended Node
+     * 
+     * @example Append a button
+     * ```javascript
+     * const button = document.createElement("button");
+     * button.textContent = "Click Me";
+     * needleMenu.appendChild(button);
+     * ```
+     * @example Append a button using ButtonInfo
+     * ```javascript
+     * needleMenu.appendChild({
+     *    label: "Click Me",
+     *    onClick: () => { alert("Button clicked!"); },
+     *    icon: "info",
+     *    title: "This is a button",
+     * });
+     * ```
+     */
     appendChild<T extends Node>(node: T | ButtonInfo): T {
 
         if (!(node instanceof Node)) {