@shopware-ag/dive 1.16.0 → 1.16.2

package/README.md

@@ -1,3 +1,11 @@
+<!--
+
+
+This file is automatically generated
+You can find the template in ci/readme/template/TEMPLATE_README.md
+
+
+-->
 
 <p align="center">
     <img alt="DIVE logo" src="./assets/svg/dive.svg" style="width: 100%; height: auto; max-height: 500px;">
@@ -16,24 +24,37 @@
 </p>
 
 # About
-DIVE is a spatial framework made by and optimized for Shopware. It can be used directly integrated in a Shopware frontend such as Storefront or in any other frontend you want to use it in, it is not tied to Shopware.
 
-DIVE supplies your frontend application with all needed tooling to set up a basic 3D application with event-based controls called "Actions". For further information, see [Getting started](#getting-started).
+DIVE is a spatial framework made by and optimized for Shopware. It can be used
+directly integrated in a Shopware frontend such as Storefront or in any other
+frontend you want to use it in, it is not tied to Shopware.
+
+DIVE supplies your frontend application with all needed tooling to set up a
+basic 3D application with event-based controls called "Actions". For further
+information, see [Getting started](#getting-started).
 
 # Installation
 
 #### npm:
+
 ```
 npm install @shopware-ag/dive
 ```
 
 #### yarn:
+
 ```
 yarn add @shopware-ag/dive
 ```
 
+# Formatter
+
+DIVE uses Prettier as a preconfigured formatter.
+
 #### Setup in Shopware
+
 Don't forget to include DIVE in your webpack.config.js:
+
 ```js
 const path = require('path');
 
@@ -75,7 +96,11 @@ module.exports = () => {
 ```
 
 # Quick View
-QuickView is used to quickly display your assets with as few lines of code as possible. Simply call the static ``QuickView()`` method (with your data-uri as a parameter) to create an instance of DIVE with your asset to use in further code.
+
+QuickView is used to quickly display your assets with as few lines of code as
+possible. Simply call the static `QuickView()` method (with your data-uri as a
+parameter) to create an instance of DIVE with your asset to use in further code.
+
 ```ts
 import { DIVE } from '@shopware-ag/dive';
 
@@ -83,23 +108,27 @@ const dive = DIVE.QuickView('your/asset/uri.glb'); // <-- call QuickView()
 
 const myCanvasWrapper = document.createElement('div');
 myCanvasWrapper.appendChild(dive.Canvas);
-
 ```
 
 # Getting started
+
 Import:
+
 ```ts
 import { DIVE } from '@shopware-ag/dive'; // <-- import DIVE
 ```
 
 Instantiate:
+
 ```ts
 import { DIVE } from '@shopware-ag/dive';
 
 const dive = new DIVE(); // <-- instantiate DIVE
 ```
 
-DIVE supplies your application with a HTMLCanvasElement that it uses as a render target. After instantiating, you can use the supplied canvas within you frontend code to attach it to your DOM.
+DIVE supplies your application with a HTMLCanvasElement that it uses as a render
+target. After instantiating, you can use the supplied canvas within you frontend
+code to attach it to your DOM.
 
 ```ts
 const dive = new DIVE();
@@ -108,7 +137,9 @@ const myCanvasWrapper = document.createElement('div'); // <-- create wrapper ele
 myCanvasWrapper.appendChild(dive.Canvas); // <-- reference DIVE canvas
 ```
 
-To interact with your newly created DIVE instance you have to perform actions via DIVECommunication. For further information, see [Actions](#actions).
+To interact with your newly created DIVE instance you have to perform actions
+via DIVECommunication. For further information, see [Actions](#actions).
+
 ```ts
 const dive = new DIVE();
 
@@ -117,16 +148,21 @@ myCanvasWrapper.appendChild(dive.Canvas);
 
 const com = dive.Communication; // <-- reference DIVECommunication
 
-com.PerformAction('SET_CAMERA_TRANSFORM', { // <-- perform action on DIVECommunication
+com.PerformAction('SET_CAMERA_TRANSFORM', {
+    // <-- perform action on DIVECommunication
     position: { x: 0, y: 2, z: 2 },
     target: { x: 0, y: 0.5, z: 0 },
 });
 ```
 
 # Actions
-Actions symbolize the communication between frontend and 3D space. All actions can be performed anywhere, no matter if you are in frontend or 3D.
 
-In addition to the impact that specific actions have, every action can be subscribed to.
+Actions symbolize the communication between frontend and 3D space. All actions
+can be performed anywhere, no matter if you are in frontend or 3D.
+
+In addition to the impact that specific actions have, every action can be
+subscribed to.
+
 ```ts
 const myCanvasWrapper = document.createElement('div');
 const dive = new DIVE();
@@ -135,7 +171,8 @@ myCanvasWrapper.appendChild(dive.Canvas);
 
 const com = dive.Communication;
 
-com.Subscribe('SET_CAMERA_TRANSFORM', () => { // <-- add subscription
+com.Subscribe('SET_CAMERA_TRANSFORM', () => {
+    // <-- add subscription
     // do something
 });
 
@@ -145,7 +182,9 @@ com.PerformAction('SET_CAMERA_TRANSFORM', {
 });
 ```
 
-Subscribing to an action returns a `unsubscribe()`-callback that should be executed when not needed anymore.
+Subscribing to an action returns a `unsubscribe()`-callback that should be
+executed when not needed anymore.
+
 ```ts
 const myCanvasWrapper = document.createElement('div');
 const dive = new DIVE();
@@ -154,7 +193,8 @@ myCanvasWrapper.appendChild(dive.Canvas);
 
 const com = dive.Communication;
 
-const unsubscribe = com.Subscribe('SET_CAMERA_TRANSFORM', () => { // <-- save unsubscribe callback
+const unsubscribe = com.Subscribe('SET_CAMERA_TRANSFORM', () => {
+    // <-- save unsubscribe callback
     // do something
 });
 
@@ -167,31 +207,222 @@ unsubscribe(); // <-- execute unsubscribe callback when done
 ```
 
 # Actions (List)
-In the following you find a list of all available actions to perform on DIVECommunication class via [`com.PerformAction()`](https://github.com/shopware/dive/blob/2e193c58843939ce07a1d35bfbd5b3c9d26eeeca/src/com/Communication.ts#L85).
-
-| Action                                                                                | Description
-|:--------------------------------------------------------------------------------------| :---
-| [GET_ALL_SCENE_DATA](./src/com/actions/scene/getallscenedata.ts)                      | Return all scene data that is currently set
-| [GET_ALL_OBJECTS](./src/com/actions/object/getallobjects.ts)                          | Return a map of all objects
-| [GET_OBJECTS](./src/com/actions/object/getobjects.ts)                                 | Return an array of all objects with given ids
-| [ADD_OBJECT](./src/com/actions/object/addobject.ts)                                   | Add an object to the scene
-| [UPDATE_OBJECT](./src/com/actions/object/updateobject.ts)                             | Update an existing object
-| [DELETE_OBJECT](./src/com/actions/object/deleteobject.ts)                             | Delete an existing object
-| [SELECT_OBJECT](./src/com/actions/object/selectobject.ts)                             | Select an existing object in the scene
-| [DESELECT_OBJECT](./src/com/actions/object/deselectobject.ts)                         | Deselect an existing object in the scene
-| [SET_BACKGROUND](./src/com/actions/scene/setbackground.ts)                            | Set a background color
-| [DROP_IT](./src/com/actions/object/model/dropit.ts)                                   | Places the model onto the next underlying object's bounding box
-| [PLACE_ON_FLOOR](./src/com/actions/object/model/placeonfloor.ts)                      | Places the model onto the floor (zero plane)
-| [SET_CAMERA_TRANSFORM](./src/com/actions/camera/setcameratransform.ts)                | Set camera transformation (w/o animation, used to initially set up camera)
-| [GET_CAMERA_TRANSFORM](./src/com/actions/camera/getcameratransform.ts)                | Return currenty camera transformation
-| [MOVE_CAMERA](./src/com/actions/camera/movecamera.ts)                                 | Move camera to a specific position or the position of a previously defined POV (with an animation)
-| [RESET_CAMERA](./src/com/actions/camera/resetcamera.ts)                               | Reset camera to original position after MOVE_CAMERA was performed
-| [COMPUTE_ENCOMPASSING_VIEW](./src/com/actions/camera/computeencompassingview.ts),     | Calculates the camera position and target to view the whole scene
-| [SET_CAMERA_LAYER](./src/com/actions/camera/setcameralayer.ts)                        | Set camera layer to switch between live view and editor view
-| [ZOOM_CAMERA](./src/com/actions/camera/zoomcamera.ts)                                 | Zoom in or out
-| [SET_GIZMO_MODE](./src/com/actions/toolbox/select/setgizmomode.ts)                    | Set gizmo mode
-| [SET_GIZMO_VISIBILITY](./src/com/actions/toolbox/select/setgizmovisibility.ts)        | Set gizmo visibility
-| [USE_TOOL](./src/com/actions/toolbox/usetool.ts)                                      | Use a specific tool
-| [MODEL_LOADED](./src/com/actions/object/model/modelloaded.ts)                         | Is performed when a model file is completely loaded
-| [UPDATE_SCENE](./src/com/actions/scene/updatescene.ts)                                | Update scene data
-| [GENERATE_MEDIA](./src/com/actions/media/generatemedia.ts)                            | Generate a screenshot with the specified parameters
+
+In the following you find a list of all available actions to perform on
+DIVECommunication class via
+[`com.PerformAction()`](https://github.com/shopware/dive/blob/2e193c58843939ce07a1d35bfbd5b3c9d26eeeca/src/com/Communication.ts#L85).
+
+<table>
+    <tr>
+        <th>Actions</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> ADD_OBJECT </a>
+        </td>
+        <td>
+            Adds an object to the scene.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> COMPUTE_ENCOMPASSING_VIEW </a>
+        </td>
+        <td>
+            Calculates the camera position and target to view the whole scene. (experimental)
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> DELETE_OBJECT </a>
+        </td>
+        <td>
+            Deletes an object from the scene.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> DESELECT_OBJECT </a>
+        </td>
+        <td>
+            Deselects an existing object.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> DROP_IT </a>
+        </td>
+        <td>
+            Places an object on top of an underlying object or the floor.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> EXPORT_SCENE </a>
+        </td>
+        <td>
+            Exports the current scene to a blob and returns the URL.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> GENERATE_MEDIA </a>
+        </td>
+        <td>
+            Generates a screenshot, stores it in a Blob and writes the URL into the payload.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> GET_ALL_OBJECTS </a>
+        </td>
+        <td>
+            Retrieves all objects in the scene.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> GET_ALL_SCENE_DATA </a>
+        </td>
+        <td>
+            Retrieves all current scene data.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> GET_CAMERA_TRANSFORM </a>
+        </td>
+        <td>
+            Returns the current camera position and target.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> GET_OBJECTS </a>
+        </td>
+        <td>
+            Returns a list of objects of given IDs.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> MODEL_LOADED </a>
+        </td>
+        <td>
+            Is triggered when a model is loaded.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> MOVE_CAMERA </a>
+        </td>
+        <td>
+            Moves the camera to a new position and target.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> PLACE_ON_FLOOR </a>
+        </td>
+        <td>
+            Places an object on the floor.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> RESET_CAMERA </a>
+        </td>
+        <td>
+            Reset the camera to its initial position and rotation.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SELECT_OBJECT </a>
+        </td>
+        <td>
+            Selects an existing object.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SET_BACKGROUND </a>
+        </td>
+        <td>
+            Set the background color of the scene.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SET_CAMERA_LAYER </a>
+        </td>
+        <td>
+            Sets the camera layer to a certain layer.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SET_CAMERA_TRANSFORM </a>
+        </td>
+        <td>
+            Sets the camera position and target.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SET_GIZMO_MODE </a>
+        </td>
+        <td>
+            Sets the gizmo's mode.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SET_GIZMO_VISIBILITY </a>
+        </td>
+        <td>
+            Sets the gizmo's visibility.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> SET_PARENT </a>
+        </td>
+        <td>
+            Attach an object to another object.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> UPDATE_OBJECT </a>
+        </td>
+        <td>
+            Updates an existing object.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> UPDATE_SCENE </a>
+        </td>
+        <td>
+            Updates global scene data.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> USE_TOOL </a>
+        </td>
+        <td>
+            Activates a specific tool from the toolbox.
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <a href=".undefined"> ZOOM_CAMERA </a>
+        </td>
+        <td>
+            Zooms the camera in or out by a certain amount.
+        </td>
+    </tr>
+</table>