Documentation edits

packages/sdk/src/basictypes/index.ts

@@ -9,12 +9,20 @@
  * * Use with {@link treeview | treeview} , to configure the appearance and behaviour of
  * {@link treeview!TreeView | TreeViews} for navigating basic element hierachies.
  *
- * ## Installation
+ *  # Installation
  *
  * ````bash
  * npm install @xeokit/sdk
  * ````
  *
+ * # Usage
+ *
+ * ````javascript
+ * import {BasicEntity, BasicAggregation} from "@xeokit/sdk/basctypes";
+ *
+ * //...
+ * ````
+ *
  * @module basictypes
  */
 

packages/sdk/src/boundaries/index.ts

@@ -16,18 +16,20 @@
  * * Find center of positions
  * * FrustumProjection-boundary intersection tests
  *
- * ## Installation
+ * # Installation
  *
  * ````bash
  * npm install @xeokit/sdk
  * ````
  *
- * ## Usage
+ * # Usage
  *
  * ````javascript
- * import * as boundaries from "@xeokit/sdk/boundaries";
+ * import {createAABB3} from "@xeokit/sdk/boundaries";
  *
- * //..TODO
+ * const aabb = createAABB([-100,-100,-100,100,100,100]);
+ *
+ * //...
  * ````
  *
  * @module boundaries

packages/sdk/src/cameracontrol/index.ts

@@ -3,12 +3,97 @@
  *
  * # Mouse and touch controller for a Viewer's Camera
  *
- * ---
+ * # Installation
  *
- * ***TODO ***
+ * ````bash
+ * npm install @xeokit/sdk
+ * ````
  *
- * ---
- * TODO
+ * # Usage
+ *
+ * In the example below, we will create a {@link viewer!Viewer | Viewer} with
+ * a {@link webglrenderer!WebGLRenderer | WebGLRenderer}  and a {@link scene!Scene | Scene}, which holds model geometry and materials.
+ *
+ * We'll also create a {@link data!Data | Data}, which will hold semantic data for our model.
+ *
+ * On our Viewer, we will create a single {@link viewer!View | View} to render it to a canvas element on the page. We will
+ * also attach a {@link cameracontrol!CameraControl | CameraControl} to our View, allowing us to control its camera with mouse and touch input.
+ *
+ * Within the Scene, we will create a {@link scene!SceneModel | SceneModel} to hold model geometry and materials. Within Data, we will
+ * create a {@link data!DataModel | DataModel} to hold semantic IFC data, which includes IFC elements and property sets.
+ *
+ * We will then use
+ * {@link cityjson!loadCityJSON | loadCityJSON} to load a CityJSON file into our SceneModel and DataModel.
+ *
+ * The {@link core!SDKError | SDKError} class will be used to handle any errors that may occur during this process.
+ *
+ * ````javascript
+ * import {SDKError} from "@xeokit/sdk/core";
+ * import {Scene} from "@xeokit/sdk/scene";
+ * import {WebGLRenderer} from "@xeokit/sdk/webglrenderer";
+ * import {Viewer} from "@xeokit/sdk/viewer";
+ * import {CameraControl} from "@xeokit/sdk/cameracontrol";
+ * import {loadCityJSON} from "@xeokit/sdk/cityjson";
+ *
+ * const scene = new Scene();
+ * const data = new Data();
+ *
+ * const renderer = new WebGLRenderer({});
+ *
+ * const viewer = new Viewer({
+ *     id: "myViewer",
+ *     scene,
+ *     renderer
+ * });
+ *
+ * const view = viewer.createView({
+ *     id: "myView",
+ *     elementId: "myCanvas" // << Ensure that this HTMLElement exists in the page
+ * });
+ *
+ * view.camera.eye = [1841982.93, 10.03, -5173286.74];
+ * view.camera.look = [1842009.49, 9.68, -5173295.85];
+ * view.camera.up = [0.0, 1.0, 0.0];
+ *
+ * new CameraControl(view, {});
+ *
+ * const sceneModel = scene.createModel({
+ *     id: "myModel"
+ * });
+ *
+ * const dataModel = data.createModel({
+ *     id: "myModel"
+ * });
+ *
+ * fetch("model.json").then(response => {
+ *
+ *     response.json().then(fileData => {
+ *
+ *         loadCityJSON({
+ *             fileData,
+ *             sceneModel,
+ *             dataModel
+ *         }).then(() => {
+ *
+ *             sceneModel.build();
+ *             dataModel.build();
+ *
+ *         }).catch(err => {
+ *
+ *             sceneModel.destroy();
+ *             dataModel.destroy();
+ *
+ *             console.error(`Error loading CityJSON: ${err}`);
+ *         });
+ *
+ *     }).catch(err => {
+ *         console.error(`Error creating JSON from fetch response: ${err}`);
+ *     });
+ *
+ * }).catch(err => {
+ *     console.error(`Error fetching CityJSON file: ${err}`);
+ * });
+ * ````
  *
  * @module cameracontrol
  */

packages/sdk/src/cameraflight/index.ts

@@ -11,15 +11,97 @@
  *
  * <br>
  *
- * ## Installation
+ * # Installation
  *
  * ````bash
  * npm install @xeokit/sdk
  * ````
  *
- * ## Usage
+ * # Usage
  *
- * TODO
+ * In the example below, we will create a {@link viewer!Viewer | Viewer} with
+ * a {@link webglrenderer!WebGLRenderer | WebGLRenderer}  and a {@link scene!Scene | Scene}, which holds model geometry and materials.
+ *
+ * We'll also create a {@link data!Data | Data}, which will hold semantic data for our model.
+ *
+ * On our Viewer, we will create a single {@link viewer!View | View} to render it to a canvas element on the page. We will
+ * also attach a {@link cameracontrol!CameraControl | CameraControl} to our View, allowing us to control its camera with mouse and touch input.
+ *
+ * Within the Scene, we will create a {@link scene!SceneModel | SceneModel} to hold model geometry and materials. Within Data, we will
+ * create a {@link data!DataModel | DataModel} to hold semantic IFC data, which includes IFC elements and property sets.
+ *
+ * We will then use
+ * {@link cityjson!loadCityJSON | loadCityJSON} to load a CityJSON file into our SceneModel and DataModel.
+ *
+ * The {@link core!SDKError | SDKError} class will be used to handle any errors that may occur during this process.
+ *
+ * ````javascript
+ * import {SDKError} from "@xeokit/sdk/core";
+ * import {Scene} from "@xeokit/sdk/scene";
+ * import {WebGLRenderer} from "@xeokit/sdk/webglrenderer";
+ * import {Viewer} from "@xeokit/sdk/viewer";
+ * import {CameraControl} from "@xeokit/sdk/cameracontrol";
+ * import {loadCityJSON} from "@xeokit/sdk/cityjson";
+ *
+ * const scene = new Scene();
+ * const data = new Data();
+ *
+ * const renderer = new WebGLRenderer({});
+ *
+ * const viewer = new Viewer({
+ *     id: "myViewer",
+ *     scene,
+ *     renderer
+ * });
+ *
+ * const view = viewer.createView({
+ *     id: "myView",
+ *     elementId: "myCanvas" // << Ensure that this HTMLElement exists in the page
+ * });
+ *
+ * view.camera.eye = [1841982.93, 10.03, -5173286.74];
+ * view.camera.look = [1842009.49, 9.68, -5173295.85];
+ * view.camera.up = [0.0, 1.0, 0.0];
+ *
+ * new CameraControl(view, {});
+ *
+ * const sceneModel = scene.createModel({
+ *     id: "myModel"
+ * });
+ *
+ * const dataModel = data.createModel({
+ *     id: "myModel"
+ * });
+ *
+ * fetch("model.json").then(response => {
+ *
+ *     response.json().then(fileData => {
+ *
+ *         loadCityJSON({
+ *             fileData,
+ *             sceneModel,
+ *             dataModel
+ *         }).then(() => {
+ *
+ *             sceneModel.build();
+ *             dataModel.build();
+ *
+ *         }).catch(err => {
+ *
+ *             sceneModel.destroy();
+ *             dataModel.destroy();
+ *
+ *             console.error(`Error loading CityJSON: ${err}`);
+ *         });
+ *
+ *     }).catch(err => {
+ *         console.error(`Error creating JSON from fetch response: ${err}`);
+ *     });
+ *
+ * }).catch(err => {
+ *     console.error(`Error fetching CityJSON file: ${err}`);
+ * });
+ * ````
  *
  * @module cameraflight
  */

packages/sdk/src/cityjson/index.ts

@@ -5,7 +5,7 @@
  *
  * ---
  *
- * ### *Import 3D urban models from CityJSON format*
+ * ***Import 3D urban models from CityJSON format***
  *
  * ---
  *
@@ -23,6 +23,12 @@
  *
  * <br>
  *
+ * # Installation
+ *
+ * ````bash
+ * npm install @xeokit/sdk
+ * ````
+ *
  * ## Usage
  *
  * In the example below, we will create a {@link viewer!Viewer | Viewer} with

packages/sdk/src/cityjsontypes_1_1_3/index.ts

@@ -9,12 +9,20 @@
  * * Use with {@link "treeview" | treeview} , to configure the appearance and behaviour of
  * {@link treeview!TreeView | TreeViews} for navigating CityJSON objects.
  *
- * ## Installation
+ * # Installation
  *
  * ````bash
  * npm install @xeokit/sdk
  * ````
  *
+ * # Usage
+ *
+ * ````javascript
+ * import {BasicEntity, BasicAggregation} from "@xeokit/sdk/basctypes";
+ *
+ * //...
+ * ````
+ *
  * @module cityjsontypes_1_1_3
  */
 

packages/sdk/src/compression/index.ts

@@ -26,21 +26,21 @@
  * and then use {@link scene!SceneModel.createGeometryCompressed | SceneModel.createGeometryCompressed}
  * to create the compressed geometry directly.
  *
- * ### Compression Techniques Used
+ * # Compression Techniques
  *
  * * Simplifies geometry by combining duplicate positions and adjusting indices
  * * Generates edge indices for triangle meshes
  * * Ignores normals (our shaders auto-generate them)
  * * Converts positions to relative-to-center (RTC) coordinates
  * * Quantizes positions and UVs as 16-bit unsigned integers
  *
- * ## Installation
+ * # Installation
  *
  * ````bash
  * npm install @xeokit/sdk
  * ````
  *
- * ## Usage
+ * # Usage
  *
  * In the example below, we'll use {@link scene!compressGeometryParams | compressGeometryParams} to compress
  * a {@link scene!SceneGeometryParams | SceneGeometryParams} into a

packages/sdk/src/constants/index.ts

@@ -10,6 +10,36 @@
  * @module constants
  */
 
+
+
+/**
+ * <img style="padding:10px; width:300px" src="/docs/assets/xeokit_components_icon.png"/>
+ *
+ * # xeokit SDK Constant Definitions
+ *
+ * * Defines numeric constants for a basic set of entity and relationship types.
+ * * Use with {@link data | data}  to assign basic types to {@link data!DataObject | DataObjects}
+ * and {@link data!Relationship | Relationships} and treat them as elements of a basic entity-relationship graph.
+ * * Use with {@link treeview | treeview} , to configure the appearance and behaviour of
+ * {@link treeview!TreeView | TreeViews} for navigating basic element hierachies.
+ *
+ * # Installation
+ *
+ * ````bash
+ * npm install @xeokit/sdk
+ * ````
+ *
+ * # Usage
+ *
+ * ````javascript
+ * import {RepeatWrapping, ClampToEdgeWrapping} from "@xeokit/sdk/constants";
+ *
+ * //...
+ * ````
+ *
+ * @module constants
+ */
+
 /**
  * SceneTexture wrapping mode in which the texture repeats to infinity.
  */

packages/sdk/src/contextmenu/index.ts

@@ -4,18 +4,20 @@
  *
  * [<img src="http://xeokit.io/img/docs/ContextMenu/ContextMenu.gif">](https://xeokit.github.io/xeokit-sdk/examples/index.html#ContextMenu_Canvas_TreeViewPlugin_Custom)
  *
- * * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/index.html#ContextMenu_Canvas_TreeViewPlugin_Custom)]
- *
- * ## Overview
- *
  * * A pure JavaScript, lightweight context menu
  * * Dynamically configure menu items
  * * Dynamically enable or disable items
  * * Dynamically show or hide items
  * * Supports cascading sub-menus
  * * Configure custom style with CSS (see examples above)
  *
- * ## Usage
+ * # Installation
+ *
+ * ````bash
+ * npm install @xeokit/sdk
+ * ````
+ *
+ * # Usage
  *
  * In the example below we'll create a ````ContextMenu```` that pops up whenever we right-click on an object within
  * our {@link Scene}.