architwin 1.18.5 → 1.19.0

package/README.md

@@ -1,5 +1,4 @@
-# Architwin Library
-ArchiTwin Library
+# ArchiTwin Library
 
 ## Table of Contents
 ---------------------
@@ -35,10 +34,10 @@ ArchiTwin Library
       - [Hiding expand/dock buttons of Media Screens](#hiding-expanddock-buttons-of-media-screens)
     - [Setting Video Playback in the Space](#setting-video-playback-in-the-space)
     - [Setting Animation Control in the Space](#setting-animation-control-in-the-space)
-    - [Copying object To Your Space](#copying-object-to-your-space)
+    - [Copying an Object to Your Space](#copying-object-to-your-space)
     - [Navigate to Object](#navigate-to-object)
-    - [Deleting Object To Your Space](#deleting-object-to-your-space)
-    - [Replacing Object To Your Space](#replacing-object-to-your-space)
+    - [Deleting an Object from Your Space](#deleting-object-to-your-space)
+    - [Replacing an Object in Your Space](#replacing-object-to-your-space)
     - [Creating Text Markup Screen in the space](#creating-text-markup-screen-in-the-space)
       - [Setting Content to Text Markup Screen](#setting-content-to-text-markup-screen)
   - [Typescript Interface Reference](#typescript-interface-reference)
@@ -62,7 +61,7 @@ ArchiTwin Library
       - [Enable Meeting Sidebar](#enable-meeting-sidebar)
       - [Create Meeting](#create-meeting)
       - [Pre-Meeting Setup](#pre-meeting-setup)
-      - [Join Meeting](#jpin-meeting)
+      - [Join Meeting](#join-meeting)
       - [In-Meeting](#in-meeting)
   - [Function Reference](#function-reference)
     - [Space](#space)
@@ -183,6 +182,96 @@ ArchiTwin Library
     - [Viewpoint](#viewpoint)
       - [renderViewpointMarker()](#renderViewpointMarker)
       - [toggleViewpointVisibility()](#toggleViewpointVisibility)
+    - [Draw Polygon and Path Methods](#draw-polygon-and-path-methods)
+      <!-- - [drawPath()](#drawpath) -->
+      - [toggleSpaceNavigation()](#togglespacenavigation)
+      - [startDraw()](#startdraw)
+      - [exitDraw()](#exitdraw)
+      - [cancelDraw()](#canceldraw)
+      - [setPolygonPath()](#setpolygonpath)
+      - [setPolygonDrawingMode()](#setpolygondrawingmode)
+      - [setPathLine()](#setpathline)
+      - [setPathLineOptions()](#setpathlineoptions)
+      - [getCurrentTubeLine()](#getcurrenttubeline)
+      - [renderPolygon()](#renderpolygon)
+      - [toggleWallVisibility()](#togglewallvisibility)
+      - [toggleMeshChildrenVisibility()](#togglemeshchildrenvisibility)
+      - [toggleFloorVisibility()](#togglefloorvisibility)
+      - [getChildrenOfModel()](#getchildrenofmodel)
+      - [toggleVerticeRingVisibility()](#toggleverticeringvisibility)
+      - [setPolygonFloorOffset()](#setpolygonflooroffset)
+      - [getPolygonFloorOffset()](#getpolygonflooroffset)
+      - [setFloorBaseHeight()](#setfloorbaseheight)
+      - [clearFloorBaseHeight()](#clearfloorbaseheight)
+      - [enableVerticeControls()](#enableverticecontrols)
+      <!-- - [deleteEdge()](#deleteedge) -->
+      - [disposePathLine()](#disposepathline)
+      - [getFloorBaseHeight()](#getfloorbaseheight)
+      - [setMeshChildrenMaterialProperty()](#setmeshchildrenmaterialproperty)
+      - [undoDrawAction()](#undodrawaction)
+      - [redoDrawAction()](#redodrawaction)
+      - [setWallBaseHeight()](#setwallbaseheight)
+      - [getWallBaseHeight()](#getwallbaseheight)
+      - [clearWallBaseHeight()](#clearwallbaseheight)
+      - [getVertexPath()](#getvertexpath)
+      - [renderPath()](#renderpath)
+      - [setDrawingConfig()](#setdrawingconfig)
+      - [getDrawingConfig()](#getdrawingconfig)
+      - [resetDrawingConfig()](#resetdrawingconfig)
+      - [setPointerEnabled()](#setpointerenabled)
+      - [removeScreenShareSessionData()](#removescreensharesessiondata)
+      - [setVertexPath()](#setvertexpath)
+      - [clearTagVisibilityStorage()](#cleartagvisibilitystorage)
+      - [clearActivePane()](#clearactivepane)
+    - [Space Partition](#space-partition)
+      <!-- - [setSpacePartitionNodes()](#setspacepartitionnodes) -->
+      - [setCurrentPolygon()](#setcurrentpolygon)
+    - [Others](#others)
+      - [getSpaceId()](#getspaceid)
+      - [getCurrentPolygon()](#getcurrentpolygon)
+      - [getPathBetweenSweeps()](#getpathbetweensweeps)
+      - [moveAlongPath()](#movealongpath)
+      <!-- - [convertZupToYup()](#convertzuptoyup) 
+      [convertYupToZup()](#convertyuptozup) -->
+      - [getRelativePosition()](#getrelativeposition)
+      - [getOriginalWorldPosition()](#getoriginalworldposition)
+      - [setSpaceMetadata()](#setspacemetadata)
+      - [getSpaceMetadata()](#getspacemetadata)
+      - [getAssetUrl()](#getasseturl)
+    <!-- - [IoT (Internet of Things)](#iot-internet-of-things)
+      - [setIotCategoryTypes()](#setiotcategorytypes)
+      - [setIotDeviceTypes()](#setiotdevicetypes)
+      - [setIoTDeviceTagIcons()](#setiotdevicetagicons)
+      - [getIoTDeviceTagIcons()](#getiotdevicetagicons)
+      - [setIoTLinkedSystemOptions()](#setiotlinkedsystemoptions) -->
+    - [Space Screen Share](#space-screen-share)
+      - [setScreenSharingHostUser()](#setscreensharinghostuser)
+      - [setScreenSharingParticipantUsers()](#setscreensharingparticipantusers)
+      - [renderCursorMarkerPointer()](#rendercursormarkerpointer)
+      - [updatePointerTexture()](#updatepointertexture)
+      - [toggleElementVisibility()](#toggleelementvisibility)
+    <!-- - [setPipeCategories()](#setpipecategories) 
+      - [setSelectedPipeCategory()](#setselectedpipecategory)
+      - [getSelectedPipeCategory()](#getselectedpipecategory)
+      - [setPipes()](#setpipes)
+      - [setSelectedPipe()](#setselectedpipe)
+      - [getSelectedPipe()](#getselectedpipe)
+      - [deleteVertex()](#deletevertex)
+      - [setPipeIsDrawingMode()](#setpipeisdrawingmode)
+      - [getPipeIsDrawingMode()](#getpipeisdrawingmode)
+      - [undoPipePath()](#undopipepath)
+      - [redoPipePath()](#redopipepath) -->
+    <!-- - [Preview Modal](#preview-modal)
+      - [renderPreviewModal()](#renderpreviewmodal)
+      - [togglePreviewModal()](#togglepreviewmodal)
+      - [closePreviewModal()](#closepreviewmodal)
+      - [setPreviewModalAction()](#setpreviewmodalaction)
+      - [getIsPolygonVisible()](#getispolygonvisible)
+      - [appendNotionUrlTagDescription()](#appendnotionurltagdescription) -->
+    - [Copy Object](#copy-object)
+      - [clearLastCopiedObjectPosition()](#clearlastcopiedobjectposition)
+
+
 ## Installation
 ### Install Using NPM
 To install the latest ArchiTwin package:
@@ -196,10 +285,11 @@ npm i architwin
 
 Before you start coding your architwin powered app, there are a few things you need to have ready to ensure that you are able to run the app properly without interruptions. For a seamless development experience, make sure to have the following ready:
 
-- **appKey:** your appKey is used to authenticate your connection when loading the 3D showcase. For security purposes, the appKey can only be used by a domain (e.g. awesomesite.com) it is associated with. This key is important especially when you launch your app in production and utilize your own site domain. Please contact us to request your appKey
-- **apiKey:** not to be confused with the appKey, the apiKey is used to authenticate all API requests sent to our servers including user authentication and fetching object data connected to a showcase. Please contact us to request your apiKey
-- **apiURL:**  an optional key in the [auth object](#connection-parameters) which if set, will point all internal API calls to the api endpoint or base URL you assign. If this is not set, all api calls will be directed to the proxy address set in the `vite.config.ts` file during **local development**. Example: `apiURL: "apps.awesomesite.com/api"` will resolve internally to `apps.awesomesite.com/api/cas/tickets?someparams` or `apps.awesomesite.com/api/v1/showcase/id/1`. It is important to add `/api` to the base url of your custom apiURL to ensure the api requests are properly sent. There is no need to add a forward slash at the end of our custom apiURL. Please take note that you *may* have to setup a proxy server to bypass CORS issues when you deploy your application on your production servers
-- **Username and password:** User credentials used to authenticate the user. Please contact us to request your username and password
+- **appKey:** your appKey is used to authenticate your connection to Matterport when loading the 3D space. For security purposes, the appKey can only be used by a domain (e.g. awesomesite.com) it is associated with. This key is important especially when you launch your app in production and utilize your own site domain. Go to your Matterport dashboard to get your app key and make sure to whitelist your app domain that you will use this key with.
+- **Matterport Bundle SDK:** You must have a copy of Matterport's Bundle SDK and serve it under your applications public directory or the equivalent directory your chosen framework recommends you to place public assets. As of the time of this writing, the library has been tested to work with version 25.10.1 of the bundle SDK. We recommend using this version for your app or use the latest version of the bundle SDK. You can get the latest version of the bundle SDK from matterport by [clicking here](https://matterport.github.io/showcase-sdk/sdkbundle_home.html)
+<!-- - **apiKey:** not to be confused with the appKey, the apiKey is used to authenticate all API requests sent to our servers including user authentication and fetching object data connected to a showcase. Please contact us to request your apiKey -->
+<!-- - **apiURL:**  an optional key in the [auth object](#connection-parameters) which if set, will point all internal API calls to the api endpoint or base URL you assign. If this is not set, all api calls will be directed to the proxy address set in the `vite.config.ts` file during **local development**. Example: `apiURL: "apps.awesomesite.com/api"` will resolve internally to `apps.awesomesite.com/api/cas/tickets?someparams` or `apps.awesomesite.com/api/v1/showcase/id/1`. It is important to add `/api` to the base url of your custom apiURL to ensure the api requests are properly sent. There is no need to add a forward slash at the end of our custom apiURL. Please take note that you *may* have to setup a proxy server to bypass CORS issues when you deploy your application on your production servers -->
+<!-- - **Username and password:** User credentials used to authenticate the user. Please contact us to request your username and password -->
   
 #### Define an iFrame as target for the Showcase
 
@@ -228,20 +318,15 @@ import { onMounted, ref } from 'vue';
 
 const mpIframe = ref<HTMLIFrameElement>()
 
-// replace with your api key and user
-const apiKey = "YOUR-API-KEY" 
-const authUser = {
-  email: "su@email.com",
-  password: "su123"
-} as IUser
-
 ....
 </script>
 ````
 
 #### Setup your proxy
 
-In your `vite.config.ts`, add the followig block of code. This will allow your app in your development environment to send API request to our servers and circumvent CORS issues. If you are not using vite as your build tool, please refer on the official documentation of your build tool of choice on how to setup the proxy.
+This section may not apply to you depending on your setup and use case. You may proceed to the next section if so.
+
+In your `vite.config.ts`, add the following block of code. This will allow your app in your development environment to send API request to our servers and circumvent CORS issues. If you are not using vite as your build tool, please refer on the official documentation of your build tool of choice on how to setup the proxy.
 
 You may have to change the VITE_PROXY value if you intend to direct your api requests on another server during development.
 
@@ -312,49 +397,32 @@ export default defineConfig(({ command, mode }) => {
 
 #### Connect to a Space
 
-In order to connect to space you may use [connectSpace()](#connectspace) method.
+In order to connect to a space, you may use [connectSpace()](#connectspace) method.
 ````typescript
 <script lang="ts">
 
-  ...
   onMounted( async() => {
 
-  // set spaceUrl
-  const spaceUrl = "https://basic-dev.rev-kitten.com/showcase/model3d_public/1?token=e707880f-0fc5-48a6-b3f6-643a19f81464";
-
-  // space url can also be a matterport url 
-  // ex: const spaceUrl = "https://my.matterport.com/show/?m=qSGGhhjTYbN";
-
-  const auth = {
-    apiURL: 'YOUR-API-URL'
-    apiKey: apiKey,
-    user: authUser
-  }
+  //matterport url 
+  const spaceUrl = "https://my.matterport.com/show/?m=<space-id>";
 
   const config: IMPConfig = {
     iframeId: 'mp-showcase',
-    bundlePath: "path/to/bundle/", // optional. Iframe src should be something like this: <bundlePath>/showcase.html?
+    bundlePath: "path/to/bundle/",
     appKey: 'YOUR-APP-KEY'
     play: 1,
   }
 
-  // more config options as explain later
-  await atwin.connectSpace(spaceUrl, auth, config)
-  
-  // after connected to space, the following objects should be available
-  // tags - an array of tag objects found in the space
-  // sweeps - an array of sweep objects found in the space
-  ...
+  // more config options as explained later
+  await atwin.connectSpace(spaceUrl, null, config)
 
 })
 
 </script>
 ````
-Once connected, the interactive Space will be rendered in the target iFrame.  
-A Space generally contains Tags, 3D objects, Video Screens , Slideshow Screens and Sweeps.  
-You should be able to move around the Space using keyboard and mouse. 
+Once connected, the interactive Space will be rendered in the target iFrame. A Space generally contains Tags, 3D objects, and Sweeps, and via the custom loaders the library provides, may also render videos, slideshows, etc.
 
-Or programmatically using methods defined in this library.
+You can navigate the Space using a keyboard and mouse, or programmatically using the methods defined in this library.
 
 ## Executing methods on specific App Phases
 
@@ -368,11 +436,11 @@ Your application may need to execute certain methods during the initialization o
 - **STARTING:** Matterport begins the transition to the start location
 - **PLAYING** The 3D space is now ready for user interaction
 
-You can also view the technical diagram of how this work below:
+You can also view the technical diagram of how this works below:
 
-<img src="https://drive.google.com/uc?id=1I_NuuI_PWkRzB0DueCmBCBH-1V_upiOB" width="400" height="300" />
+<img src="https://i.ibb.co/Z1pK04X5/Architwin-Library-Phases-Diagram.png" width="400" height="300" />
 
-To invoke a function from your application during one of the phases. Simply pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
+To invoke a function from your application during one of the phases, simply pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
 
 *Example:*
 
@@ -430,7 +498,7 @@ Vue is the framework we use in the code snippets provided above. If your team in
       appKey: 'YOUR-APP-KEY'
     } as IMPConfig
 
-    // more config options as explain later
+    // more config options as explained later
     await atwin.connectSpace(spaceUrl, auth, config)
   })
 </script>
@@ -550,22 +618,20 @@ await atwin.connectSpace(url, auth, config)
 
 A user should be able to navigate around using PC or devices (keyboard and mouse), measure real object dimensions and interact with the virtual objects as if you are actually visiting the physical space.
 
-**Sweeps** - Space have static sweep markers (white circles on floor) which serves as primary navigation points. Users can go to sweeps (or click), stand and look around. 
+**Sweeps** - Spaces have static sweep markers (white circles on the floor) which serve as primary navigation points. Users can go to sweeps (or click), stand, and look around.
 
-**Tags** - Space also have tags which are virtual markers attached to Objects or Locations in space. Tags can be clicked which will render and display relevant contents like
-web pages, videos, images or text descriptions. It is possible to go directly to any specifig tag ([gotoTag](#gototag))  from anywhere in Space.
+**Tags** - Spaces also have tags, which are virtual markers attached to objects or locations in the space. Tags can be clicked to render and display relevant content such as web pages, videos, images, or text descriptions. It is possible to go directly to any specific tag ([gotoTag](#gototag)) from anywhere in the Space.
 
-It can be used as quick way to navigate around the space.
+They can be used as a quick way to navigate around the space.
 
-**3D Objects** - Space usually contains 3D objects or three-dimentional models. Some 3D objects may have some simple animations. 
+**3D Objects** - Spaces usually contain 3D objects or three-dimensional models. Some 3D objects may have simple animations.
 
-**Video Screens** - Another interesting objects that can be found inside the space are Video Screens. They practially look like TV 
-screens placed at selected locations. The Video screens will automatically play when a User is nearby (2 meters). And automatically turns off when the User leaves.
+**Video Screens** - Another interesting type of object that can be found inside the space is Video Screens. They practically look like TV screens placed at selected locations. Video screens automatically play when a user is nearby (within 2 meters) and automatically turn off when the user moves away.
 
 
 **Slideshow Screens** - Space can also contain Image Slideshow Screens. This is similar to the Video Screen, but uses static images. 
 Clicking on the right section of the current slide image will display the next slide. 
-Clicking on the the left section will display the previous slide. 
+Clicking on the left section will display the previous slide. 
 
 The slideshow can be auto played in whole by clicking the lower-right corner.
 
@@ -584,7 +650,7 @@ The method accepts the following as its parameters:
 | callback | Function or Array of Functions | yes | none | function or async function |
 
 ### Subscribing a method to an event
-To subscribe to an event, simpley call the `subscribeSpaceEvent()` and pass the event you want to subscribe to and the method you want to trigger. Subscribing to an event will also return to you the data of an object if you are interacting with one. Said object data will implement the `IShowcaseObject` interface.
+To subscribe to an event, simply call the `subscribeSpaceEvent()` and pass the event you want to subscribe to and the method you want to trigger. Subscribing to an event will also return to you the data of an object if you are interacting with one. Said object data will implement the `IShowcaseObject` interface.
 
 *Example:*
 ```typescript
@@ -658,7 +724,7 @@ You can subscribe your method to more than one event. Currently, we support subs
 For more information regarding the loading,starting, and playing phase events. Please refer to [this section](#executing-methods-on-specific-app-phases)
 
 ### Subscribing multiple methods to an event
-If you wish to subscribe multiple methods to an event. You can use the folliwing methods listed below
+If you wish to subscribe multiple methods to an event, you can use the following methods listed below.
 
 **Method 1:**
 Subscribing each method one at a time
@@ -713,10 +779,10 @@ const functionArray = [myFunction,myFunction2]
 atwin.subscribeSpaceEvent('DRAG_END',functionArray)
 ```
 
-Keep in mind that the library's event system utilizes an FIFO algorithm. Your functions will always be executed in chronological order meaning functions that were subscribed first will be executed first.
+Keep in mind that the library's event system utilizes a FIFO algorithm. Your functions will always be executed in chronological order, meaning functions that were subscribed first will be executed first.
 
 ### Unsubscribing a method from an event
-If you wish to unsubscribe your method from a subscribed event, simply call the `unsubscribeSpaceEvent()` method to so. The method accepts the following parameters:
+If you wish to unsubscribe your method from a subscribed event, simply call the `unsubscribeSpaceEvent()` method to do so. The method accepts the following parameters:
 
 The method accepts the following as its parameters:
 | parameter | type | required | default | values |
@@ -741,13 +807,13 @@ const functionArray = [myFunction,myFunction2]
 atwin.unsubscribeSpaceEvent('DRAG_END',functionArray)
 ```
 
-### Creating Custom Events
+## Creating Custom Events
 The library has a list of default event types you can subscribe to but you may at times need to create your own event type to use for a specific task. You can easily create and subscribe to your own custom event by using `registerCustomSpaceEvent()` and `subscribeSpaceEvent()` respectively. Here is how to do it.
 
 **IMPORTANT:** Your custom event type name must **not** be the same as an existing custom event type or a default event type. Doing so will return an error and the registration will fail.
 
 **STEP 1:**
-Register your event type name. As a convention, the name of your event type should be in uppercase and use snake_case (e.g. FOO_BAR). It is important to register you custom event type first before subscribing a method to it. You can register one or multiple events using the method.
+Register your event type name. As a convention, the name of your event type should be in uppercase and use snake_case (e.g. FOO_BAR). It is important to register your custom event type first before subscribing a method to it. You can register one or multiple events using the method.
 
 ```typescript
 //Register one custom event type
@@ -788,15 +854,15 @@ atwin.dispatchSpaceEvent('MY_EVENT',someData)
 
 ## Points of Interest
 
-Tags are primarily use to mark locations or objects in space for quick and direct navigation.
+Tags are primarily used to mark locations or objects in space for quick and direct navigation.
 Tags usually contain additional content that will be rendered when hovered. Contents can be web pages, 
 text descriptions, videos, or images.
 
 You may use the [getTags()](#gettags) method in order to get a list of Tags found in the space.
 
-You may use the [goToTag()](#gototag) method in order to navigate to specific Tag
+You may use the [goToTag()](#gototag) method in order to navigate to a specific Tag
 
-You may use the [getSweeps()](#getsweeps) method in order get a list of Sweeps found in the Space. 
+You may use the [getSweeps()](#getsweeps) method in order to get a list of Sweeps found in the Space. 
 
 You may use the [moveToSweep()](#movetosweep) method in order to move to a specific Sweep
 
@@ -809,7 +875,7 @@ import * as atwin from 'architwin';
 
 ...
 
-const spaceUrl = "https://basic-dev.rev-kitten.com/showcase/model3d_public/1?token=e707880f-0fc5-48a6-b3f6-643a19f81464"
+const spaceUrl = "https://my.matterport.com/space/m?=<space-id>"
 
 const ispace = {
   id: 1;
@@ -954,7 +1020,7 @@ You can enable a minimap display of your 3D space by setting the following key-v
   } as IMPConfig;
 ```
 
-To ensure that you will not encounter any errors. Make sure to follow the prescribed markup structure under the [defining an iFrame section](#define-an-iframe-as-target-for-the-showcase). All CSS classes or ids used internally by the library will have an `at_` prefix for classes and an `at-` for ids. The classes and ids are named this way to avoid any naming conflicts with your apps own CSS classes or ids.
+To ensure that you will not encounter any errors. Make sure to follow the prescribed markup structure under the [defining an iFrame section](#define-an-iframe-as-target-for-the-showcase). All CSS classes or ids used internally by the library will have an `at_` prefix for classes and an `at-` for ids. The classes and ids are named this way to avoid any naming conflicts with your app's own CSS classes or IDs.
 
 You can technically forego the at_showcase_container class of the parent div with your own class. Just make sure it has the `position` attribute set to `relative` otherwise things may not position correctly.
 
@@ -962,7 +1028,7 @@ You can technically forego the at_showcase_container class of the parent div wit
 
 - **mapId** - The id attribute value of the div element that will hold the map.
 - **position** - (optional) Specify where to place the minimap. Valid positions are topLeft, topRight, bottomRight, bottomLeft. By default, the map is placed at the topRight corner if this value is not set.
-- **fixedSized** - (optional) Specify a fixed width of the minimap. By default, the minimap has width of 100px and expands to 250px upon mouse hover. Please take note that setting a fixed width of your minimap will disable the hover-to-expand animation. Any numberic value you provide will be translated into pixel units
+- **fixedSized** - (optional) Specify a fixed width of the minimap. By default, the minimap has width of 100px and expands to 250px upon mouse hover. Please take note that setting a fixed width of your minimap will disable the hover-to-expand animation. Any numeric value you provide will be translated into pixel units
 
 Example:
 
@@ -990,11 +1056,11 @@ Your application may need to execute certain methods during the initialization o
 - **STARTING:** Matterport begins the transition to the start location
 - **PLAYING** The 3D space is now ready for user interaction
 
-You can also view the technical diagram of how this work below:
+You can also view the technical diagram of how this works below:
 
 <img src="https://drive.google.com/uc?id=1I_NuuI_PWkRzB0DueCmBCBH-1V_upiOB" width="400" height="300" />
 
-To invoke a function from your application during one of the phases. Simple pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
+To invoke a function from your application during one of the phases, simply pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
 
 *Example:*
 
@@ -1025,7 +1091,7 @@ In this example, the method named `runThisOnPlayState` is passed as a value to t
 
 You can navigate around the space using keyboard arrow keys or using a mouse.
 
-Progmmatically, you also can navigate the space. You may use [moveInDirection()](#moveindirection) method to move around inside the space. 
+Programmatically, you can also navigate the space. You may use [moveInDirection()](#moveindirection) method to move around inside the space. 
 This will move the user to the nearest Sweep marker in the indicated direction.
 
 ````typescript
@@ -1107,7 +1173,7 @@ await atwin.cameraPan(30,0)
 
 ## Tags
 
-Tags refer to interactive annotations or markers that can be added to a 3D Space provide additional information or context about specific areas or objects within the space.
+Tags refer to interactive annotations or markers that can be added to a 3D Space to provide additional information or context about specific areas or objects within the space.
 
 ### Adding tag to Space
 
@@ -1153,17 +1219,17 @@ try {
 }
 ```
 
-### Removing tag to Space
+### Removing a Tag from a Space
 
 
 
-### Customization of Tag
+### Customization of a Tag
 
-### Moving tag in Space
+### Moving a Tag in the Space
 
 ## Loading and Interacting with 3D/2D Objects
 
-Architwin allows you to load and interact with 3D or 2D objects into a 3D showcase. Architwin has internal functions that performs GET requests from an API enpoint, parses it, and then renders it to your 3D showcase. The result fetched data implement the `IShowcaseObject` type interface which matches the schema of the response of the API. Please take note that this guide assumes that you have implemented the recommended database schema for storing your showcase objects.
+Architwin allows you to load and interact with 3D or 2D objects into a 3D showcase. Architwin has internal functions that perform GET requests from an API endpoint, parse the data, and then render it to your 3D showcase. The fetched data implements the `IShowcaseObject` type interface, which matches the schema of the API response. Please take note that this guide assumes that you have implemented the recommended database schema for storing your showcase objects.
 
 ### What is an Object?
 
@@ -1171,7 +1237,7 @@ We define objects as 3D or 2D assets that have or will be loaded into a space. T
 
 **3D Models**
 
-- GTLF/GLB
+- GLTF/GLB
 - FBX
 
 **2D Objects**
@@ -1182,13 +1248,13 @@ We define objects as 3D or 2D assets that have or will be loaded into a space. T
 - JPEG (Images)
 - ZIP (Image/Image slideshows)
 
-We add support for more file types in future updates
+We will add support for more file types in future updates
 
 ### Loading Objects
 
 Objects come in many shapes and sizes. Loading objects may sometimes take a lot of resources especially if you intend to load a lot of objects in your space. Architwin is optimized to load your 3D spaces and its associated objects as fast and efficiently as possible to reduce the TTI. 
 
-To achieve this, instead of loading all of your objects at the same time at the start which causes long initial load times, Architwin eagerly renders objects in the space when the user is at a certain distance from the objects intended position. We call this feature **Render On Demand**.
+To achieve this, instead of loading all of your objects at the same time at the start which causes long initial load times, Architwin eagerly renders objects in the space when the user is at a certain distance from the object's intended position. We call this feature **Render On Demand**.
 
 By default, objects are rendered in the space when objects are within a **2 meters** diameter from the Camera (User view). You can increase or decrease this distance by setting the render distance using the `setRenderDistance()` method.
 
@@ -1209,7 +1275,7 @@ atwin.connectSpace(url, auth, config)
 ...
 ```
 
-You only need to set the render distance once. Make sure to invoke the function before running [connectSpace](###connectSpace) method.
+You only need to set the render distance once. Make sure to invoke the function before calling the [connectSpace](#connectspace) method.
 
 Architwin also allows you to get **rendered** objects near the user by calling the [getNearbyObjects()](#getnearbyobjects) method which will return an array of nodes of the rendered objects within the target range.
 
@@ -1232,7 +1298,7 @@ atwin.getNearbyObjects(payload)
 ...
 ```
 
-You can learn more about the different paramaters of this function under the [function reference](#function-reference) section. If you need to get all the nearby objects everytime the user moves, then you can simply add the following key-value pair in your config.
+You can learn more about the different parameters of this function under the [function reference](#function-reference) section. If you need to get all the nearby objects every time the user moves, then you can simply add the following key-value pair in your config.
 
 ```typescript
 import * as atwin from 'architwin'
@@ -1256,15 +1322,15 @@ import * as atwin from 'architwin'
 
 ...
 
-//Gets updated everytime the User camera moves
+//Gets updated every time the User camera moves
 atwin.nearbyObjects 
 
 ...
 ``` -->
 
-### Adding, removing and customizing Tags
+## Adding, removing and customizing Tags
 
-Tags are interactive elements that can be added to a 3D Space. Tags are essentially clickable anotations or markers that can be placed within the 3D model of a space, typically linking to additional information or media. They enhance the user experience by providing context and additional details about specific features or objects within the Space.
+Tags are interactive elements that can be added to a 3D Space. Tags are essentially clickable annotations or markers that can be placed within the 3D model of a space, typically linking to additional information or media. They enhance the user experience by providing context and additional details about specific features or objects within the Space.
 
 To render a tag in the Space, you can use [renderTag()](#rendertag) method. The [renderTag()](#rendertag) method accepts payload input.
 
@@ -1343,7 +1409,7 @@ try {
 }
 ```
 
-Tags are customizables, you customize tag labels, description, stem, icon and its color.
+Tags are customizable. You can customize the tag label, description, stem, icon, and color.
 
 [editTagLabel()](#edittaglabel) is the right method to change or edit the label of a specific tag.
 
@@ -1364,7 +1430,7 @@ try {
 }
 ```
 
-To edit or change the description of a tag, the [editTagDescription()](#edittagdescription) is the method you can use.
+To edit or change the description of a tag, use the [editTagDescription()](#edittagdescription) method.
 
 
 *Example:*
@@ -1384,7 +1450,7 @@ try {
 }
 ```
 
-You can also choose not show or hide the tag stem by invoking [editTagStem()](#edittagstem).
+You can also choose to show or hide the tag stem by invoking [editTagStem()](#edittagstem).
 
 *Example:*
 ```typescript
@@ -1403,7 +1469,7 @@ try {
 }
 ```
 
-Tag icon also editable, you can utilize the [editTagIcon()](#edittagicon) method for this.
+The tag icon is also editable; use the [editTagIcon()](#edittagicon) method for this.
 
 *Example:*
 ```typescript
@@ -1442,7 +1508,7 @@ try {
 }
 ```
 
-Ataching media to a tag is also possible, you can utilize the [attachTagMedia()](#attachtagmedia) method.
+Attaching media to a tag is also possible; use the [attachTagMedia()](#attachtagmedia) method.
 
 *Example:*
 ```typescript
@@ -1485,13 +1551,13 @@ Please explore the [Tags](#tags) related function to learn more what you can do
 
 ### Accessing List of Rendered Objects and Object Structure
 
-Objects that have been loaded and **rendered** into the 3D space are stored in an array called _3DXObjects which you can access by doing calling it this way
+Objects that have been loaded and **rendered** into the 3D space are stored in an array called _3DXObjects which you can access by calling it this way
 
 ```typescript
 atwin._3DXObjects
 ```
 
-All the elements in this array implement the `IObjectData` interface. Each element in the array contains all the data you would need manipulate the object.
+All the elements in this array implement the `IObjectData` interface. Each element in the array contains all the data you would need to manipulate the object.
 
 *interface used* (TS)
 ```typescript
@@ -1506,7 +1572,7 @@ interface IObjectData {
 
 Each object element inside `atwin._3DXObjects` contains the value keys:
 
-**collider** - Collider components define the shape of an 3D/2D object for the purposes of physical collisions. A collider, which is invisible, does not need to be the exact same shape as the GameObject’s mesh.
+**collider** - Collider components define the shape of a 3D/2D object for the purposes of physical collisions. A collider, which is invisible, does not need to be the exact same shape as the GameObject’s mesh.
 
 **object** - The object key is an object that implements the `IShowcaseObject` interface. This is one of the most important values as the object contains all the information about an object such as its id,name,position,rotation,scale,amazon_uri link, and etc. You can look at the interface below to view the full makeup of the object key.
 
@@ -1545,9 +1611,9 @@ export interface IShowcaseObject {
 }
 ```
 
-**component:** This objects contains functions and variables responsible for intializing, updating, and destroying a rendered objects mesh, texture, etc. This object also contains the three.js instance. Since the 3D space is rendered with Three.js under the hood. You can use this instance to invoke methods made available by three.js. This gives you a lot of flexibility and control provided you know how to use it. This documentation will not cover Three.js specific methods. Visit their [official website](https://threejs.org/) if you want to learn more about it.
+**component:** This object contains functions and variables responsible for initializing, updating, and destroying a rendered object's mesh, texture, etc. This object also contains the three.js instance. Since the 3D space is rendered with Three.js under the hood. You can use this instance to invoke methods made available by three.js. This gives you a lot of flexibility and control provided you know how to use it. This documentation will not cover Three.js specific methods. Visit their [official website](https://threejs.org/) if you want to learn more about it.
 
-**node:** The node is responsible for managing the lifecycle of a 3D/2D objects. The node can be used to `start()` and `stop()` a rendered model. Invoking `start()` will render the model into the scene while `stop()` will destroy it and remove it from the scene. 
+**node:** The node is responsible for managing the lifecycle of a 3D/2D object. The node can be used to `start()` and `stop()` a rendered model. Invoking `start()` will render the model into the scene while `stop()` will destroy it and remove it from the scene. 
 
 **type:** A string that states the file or object type of a 3D/2D object. The file type could be any of the following
 
@@ -1560,7 +1626,7 @@ export interface IShowcaseObject {
 | FRAME | Media Screen | A customizable [media screen](#creating-a-customizable-media-screen) |
 | ZIP | slideshow | A zip file rendered as a image slideshow |
 
-The `atwin.selectedObject` variable is an example of a variable that implements this interfacea and contains this data.
+The `atwin.selectedObject` variable is an example of a variable that implements this interface and contains this data.
 
 ### Transforming Objects
 
@@ -1578,15 +1644,15 @@ There are several methods that allows you to transform an object. Let's go throu
 
 #### Transforming Object by clicking it
 
-Clicking on any object in the space will attach the axis controls to it. By default, clicking on an object will show axis controls for translating the object. You can then use your mouse cursor to click and drag the object to modify its position,rotation, and scale in however way that pleases you. See screenshot for reference
+Clicking on any object in the space will attach the axis controls to it. By default, clicking on an object will show axis controls for translating the object. You can then use your mouse cursor to click and drag the object to modify its position, rotation, and scale in whatever way you prefer. See screenshot for reference
 
 <img src="https://matterport.github.io/showcase-sdk/images/sdkbundle-components-transform-controls.png" width="300" height="200" />
 
 You can switch the transform mode on the currently selected object by using the [setTransformMode()](#settransformmode) method. 
 
-Please take note that transform controls can only be attached to one object at a time. Clicking on another object will remove the transform controls in the previous object and add it the currently selected object. It is impractical to attach multiple transform controls on more than one object. If you wish to programmatically transform multiple methods, then the next method offers a solution.
+Please take note that transform controls can only be attached to one object at a time. Clicking on another object will remove the transform controls from the previous object and add them to the currently selected object. It is impractical to attach multiple transform controls on more than one object. If you wish to programmatically transform multiple objects, the next method offers a solution.
 
-If you wish the to access the object data of the object that has been clicked on. You can do so by calling the `atwin.selectedObject` variable which returns an object implementing the `IObjectData` interface containing all the necessary data you need. Know more about the structure of an object by going to this section
+If you wish to access the object data of the object that has been clicked on, You can do so by calling the `atwin.selectedObject` variable which returns an object implementing the `IObjectData` interface containing all the necessary data you need. Know more about the structure of an object by going to this section
 
 ```typescript
 import * as atwin from 'architwin';
@@ -1600,7 +1666,7 @@ console.log("Selected object data", atwin.selectedObject)
 
 **Switching Transform Modes**
 
-If you wish switch transformation mode, you can pass either 'translate' or 'scale' or 'rotate' as parameters to the [setTransformMode()](#settransformmode) method. This will switch the transform controls on the currently selected object
+If you wish to switch transformation mode, you can pass either 'translate', 'scale', or 'rotate' as parameters to the [setTransformMode()](#settransformmode) method. This will switch the transform controls on the currently selected object
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1698,7 +1764,7 @@ atwin.setObjectTransformation(mirrorMediaScreen.node, mirrorObjectPosition)
 ...
 ```
 
-If done correctly, you should see your target object(s) display or reposition to your intended position, rotation, and scale. Please take note that the transform controls UI will not be attached to the object if you use this method
+If done correctly, you should see your target object(s) display or reposition to your intended position, rotation, and scale. Please note that the transform controls UI will not be attached to the object when using this method.
 
 ### Undoing and Redoing Transformation Changes
 
@@ -1718,7 +1784,7 @@ atwin.revertTransform()
 ...
 ```
 
-If you want to redo a tranformation, change the parameter to 'redo'.
+If you want to redo a transformation, change the parameter to 'redo'.
 
 ```typescript
 import * as atwin from 'architwin';
@@ -1777,7 +1843,7 @@ atwin.addObjectToSpace(objectUrl,objectType, objectConfig)
 
 **Method 2: Adding with click method using getTargetPosition**
 
-The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the [addObjectToSpace()](#addobjecttospace) method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+The library has several helper methods that provide a range of common functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do so by using the `getTargetPosition()` helper method in tandem with the [addObjectToSpace()](#addobjecttospace) method. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
 
 Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
 
@@ -1838,7 +1904,7 @@ By default, your media screen will show a blank white canvas if you set the medi
 
 There are many ways you can use this method to add a media screen to your 3D space. Let's go through each one.
 
-**NOTE:** The following examples utilize typescript and will utilize the TypeScript (TS) interfaces the library provides. While you can use just plain JavaScript (JS) for your project and copy the following code snippets (minus the TS interfaces) to your plain JS project, we **highly** recommend that you use TypeScript instead for your Architwin powered projects to take advantage of the type-safety and the custom interfaces provided by the library
+**NOTE:** The following examples utilize typescript and will utilize the TypeScript (TS) interfaces the library provides. While you can use just plain JavaScript (JS) for your project and copy the following code snippets (minus the TS interfaces) to your plain JS project, we **highly** recommend that you use TypeScript instead for your Architwin-powered projects to take advantage of the type-safety and the custom interfaces provided by the library
 
 **Method 1: Adding Programmatically**
 
@@ -1872,7 +1938,7 @@ If done correctly, you should be able to see your media screen in your intended
 
 **Method 2: Adding with click method using getTargetPosition**
 
-The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the [addMediaScreen()](#addmediascreen) method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+The library has several helper methods that provide a range of common functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do so by using the `getTargetPosition()` helper method in tandem with the [addMediaScreen()](#addmediascreen) method. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
 
 Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
 
@@ -1945,7 +2011,7 @@ await atwin.attachMediaScreenContent(targetMediaScreenId, validUrl, 'video')
 
 When setting a video as the media screen content. You can use the [setVideoPlayback()](#setvideoplayback) method to programmatically play,pause,mute,and unmute a video. You can navigate to the [playback controls section](#setting-video-playback-in-the-space) to learn more about the method. Here is an example on how to use it. 
 
-In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the [setVideoPlayback()](#setvideoplayback) method. Please take note that this variable is not acessible if the media type of the media screen content is an image.
+In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the [setVideoPlayback()](#setvideoplayback) method. Please take note that this variable is not accessible if the media type of the media screen content is an image.
 
 *Interface used*
 ```typescript
@@ -1992,9 +2058,9 @@ const config = {
 
 Setting video playback refers to the act of adjusting various controls associated with the playback of a video in the space. It involves manipulating controls such as pause, play, mute, and unmute to modify the playback behavior according to user's preferences.
 
-**Pause** - Pausing a video temporarily allows user to freeze the video at a specific moment.
+**Pause** - Pausing a video temporarily freezes it at a specific moment.
 
-**Play** - Playing a video resumes its playback from paused state, allowing the user to watch the video in real-time .
+**Play** - Playing a video resumes its playback from a paused state, allowing the user to watch the video in real-time.
 
 **Mute** - Muting a video disables the audio playback, suppressing any sound embedded within the video.
 
@@ -2002,7 +2068,7 @@ Setting video playback refers to the act of adjusting various controls associate
 
 Assuming that you have already selected a video, you can now set the playback of the video.
 
-Inorder to set the playback of a video, you may use the [setVideoPlayback()](#setvideoplayback) method.
+In order to set the playback of a video, you may use the [setVideoPlayback()](#setvideoplayback) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -2035,17 +2101,17 @@ atwin.setVideoPlayback('unmute', targetVideoElement)
 ...
 ```
 
-**NOTE:** Please take note that this variable is not acessible if the media type of the media screen content is an image.
+**NOTE:** Please take note that this variable is not accessible if the media type of the media screen content is an image.
 
 ### Setting Animation Control in the Space
 
-Setting animation control refers to the process of manipulating the playback of animations applied to 3D objects in the space. It involves utilizing controls such as play and pause to control the the animation.
+Setting animation control refers to the process of manipulating the playback of animations applied to 3D objects in the space. It involves utilizing controls such as play and pause to control the animation.
 
-Assuming that you have already selected an animated 3D object, you can now control the setting of the animation.
+Assuming that you have already selected an animated 3D object, you can now control the animation.
 
-In order to set the animation control of a 3D object, you may use the [setAnimationState()](#setanimationstate) method. By default the action is set to 'play'. 
+In order to set the animation control of a 3D object, you may use the [setAnimationState()](#setanimationstate) method. By default, the action is set to 'play'.
 
-**NOTE:** Please take note that the 3D object MUST be fully rendered first in the space before you can manipuate its animation state. This method will have no affect on 3D objects that do not have any animations in them.
+**NOTE:** Please note that the 3D object MUST be fully rendered in the space before you can manipulate its animation state. This method will have no affect on 3D objects that do not have any animations in them.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -2075,7 +2141,7 @@ atwin.setAnimationState('pause', modelID)
 ...
 ```
 
-### Copying object To Your Space
+### Copying an Object to Your Space
 Copying an object refers to creating a duplicate or clone of an object. When an object is copied in the space, it means that the object's data is duplicated.
 
 Assuming that you have already selected an object to be copied, you may now copy the object by calling [copyObject()](#copyobject) method. You may also specify a custom offset position and rotation of the object to be cloned.
@@ -2105,9 +2171,9 @@ if (atwin.selectedObject.object) {
 
 ### Navigate to Object
 
-Navigating to an object in space refers to the process of moving the camera's location near to the object.
+Navigating to an object in space refers to the process of moving the camera's location near the object.
 
-Assuming that you have already selected an object to navigate to, you may now navigate to the object by using [goToModel()](#goToModel) method.
+Assuming that you have already selected an object to navigate to, you may now navigate to the object by using the [goToModel()](#goToModel) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -2124,7 +2190,7 @@ await atwin.goToModel(objectId)
 
 ```
 
-### Deleting Object To Your Space
+### Deleting an Object from Your Space
 
 Deleting an object in space refers to the process of removing a pre-existing 2D or 3D object from the 3D environment or space. This action results in the elimination of the visual representation and physical presence of the object within the virtual space. By removing the object, users can maintain control over the composition and contents of their space, allowing for more dynamic and tailored virtual experiences. 
 
@@ -2147,9 +2213,9 @@ async function handleDeleteObjectFromSpace() {
 ...
 ```
 
-**NOTE:** This is only deleting the object from the space and not from the database.
+**NOTE:** This only removes the object from the space, not from the database.
 
-### Replacing Object To Your Space
+### Replacing an Object in Your Space
 
 Replacing an object in space refers to the process of substituting a pre-existing 2D or 3D object within a 3D environment or space with another object. This action involves removing the original object and introducing a new one in its place, while maintaining the object's location and any associated properties or attributes.
 
@@ -2183,7 +2249,7 @@ async function handleReplaceObject() {
 
 ### Creating Text Markup Screen in the space
 
-A text markup screen is a graphical user interface objecet that allows users to input and display formatted text in the 3D space. The method internally generates elements and programmatically applies CSS styling. You can use this method to display text messages to the 3D screen.
+A text markup screen is a graphical user interface object that allows users to input and display formatted text in the 3D space. The method internally generates elements and programmatically applies CSS styling. You can use this method to display text messages to the 3D screen.
 
 In order to add a text markup screen in your space, you may use the [addTextMarkupScreen()](#addtextmarkupscreen) method.
 
@@ -2251,7 +2317,7 @@ atwin.setTextMarkupScreenContent(id, title, text, textColor, backgroundColor)
 ```
 
 ## Typescript Interface Reference
-We encourage that you use typescript for any new project you intend to use the library with. With typescript, you can take advantage of the type interfaces provided by the library. This helps you catch errors more easily on your IDE instead of seeing it on production. If you do intend to just use vanilla JS for your project, you can still use this section as reference on how how to structure the javascript objects in yours project 
+We encourage you to use TypeScript for any new project you intend to use the library with. With typescript, you can take advantage of the type interfaces provided by the library. This helps you catch errors more easily on your IDE instead of seeing it on production. If you do intend to just use vanilla JS for your project, you can still use this section as a reference on how to structure the javascript objects in yours project 
 
 You can use the library's type interfaces by importing it using the following import path
 
@@ -2268,7 +2334,7 @@ The library also exports a couple enums that you can use in your project too. He
 import {type IShowcaseObject,SPACE_EVENTS} from 'architwin/lib/types'
 
 //Method 2: Import interface and enums separately
-import type {IShowcaseObject} from 'archtwin/lib/types'
+import type {IShowcaseObject} from 'architwin/lib/types'
 import {SPACE_EVENTS} from 'architwin/lib/types'
 
 const spaceObject:IShowcaseObject = {}
@@ -3031,7 +3097,7 @@ _______
 
 ### Space
 
-#### connectSpace()
+### connectSpace()
 Connect and load a 3D space into an HTML iframe asynchronously using this function. It initializes various configuration settings and view modes based on the provided parameters.
 
 ```typescript
@@ -3051,7 +3117,7 @@ async function connectSpace(
 
 **url** - the URL of the space you wish to connect to.
 
- - The [connectSpace](#connectSpace) method can also accomodate the following URL parameters: 
+ - The [connectSpace](#connectSpace) method can also accommodate the following URL parameters: 
     - "tagId" : ID of the tag
       * In cases where the 'tag' is included in the URL with an assigned value, the camera location will swiftly adjust to the specified tag within the 3D space once the loading is complete. The particular tag to focus on will be determined by the value of the 'tag' parameter.
 
@@ -3064,7 +3130,7 @@ async function connectSpace(
 
     - "hr" : 0 | 1
       * 0 : Hide the highlight reel located at the bottom of the 3D Showcase user interface.
-      * 1 (Default) : Dispaly highlight reel
+      * 1 (Default) : Display highlight reel
 
     - "tour" : 0 | 1 | 2 | 3
        * 0 : Tour controls and highlight reel will not be visible.
@@ -3274,7 +3340,7 @@ You can enable a minimap display of your 3D space by setting the following key-v
   } as IMPConfig;
 ```
 
-To ensure that you will not encounter any errors. Make sure to follow the prescribed markup structure under the [defining an iFrame section](#define-an-iframe-as-target-for-the-showcase). All CSS classes or ids used internally by the library will have an `at_` prefix for classes and an `at-` for ids. The classes and ids are named this way to avoid any naming conflicts with your apps own CSS classes or ids.
+To ensure that you will not encounter any errors. Make sure to follow the prescribed markup structure under the [defining an iFrame section](#define-an-iframe-as-target-for-the-showcase). All CSS classes or ids used internally by the library will have an `at_` prefix for classes and an `at-` for ids. The classes and ids are named this way to avoid any naming conflicts with your app's own CSS classes or IDs.
 
 You can technically forego the at_showcase_container class of the parent div with your own class. Just make sure it has the `position` attribute set to `relative` otherwise things may not position correctly.
 
@@ -3282,7 +3348,7 @@ You can technically forego the at_showcase_container class of the parent div wit
 
 - **mapId** - The id attribute value of the div element that will hold the map.
 - **position** - (optional) Specify where to place the minimap. Valid positions are topLeft, topRight, bottomRight, bottomLeft. By default, the map is placed at the topRight corner if this value is not set.
-- **fixedSized** - (optional) Specify a fixed width of the minimap. By default, the minimap has width of 100px and expands to 250px upon mouse hover. Please take note that setting a fixed width of your minimap will disable the hover-to-expand animation. Any numberic value you provide will be translated into pixel units
+- **fixedSized** - (optional) Specify a fixed width of the minimap. By default, the minimap has width of 100px and expands to 250px upon mouse hover. Please take note that setting a fixed width of your minimap will disable the hover-to-expand animation. Any numeric value you provide will be translated into pixel units
 
 *Example:*
 
@@ -3643,10 +3709,10 @@ import * as atwin from 'architwin'
 
 atwin.disconnectSpace();
 ````
------
-### Tags
 
-#### getTags()
+## Tags
+
+### getTags()
 
 This method returns an array of `ITag` containing information of all tags in the space.
 
@@ -3674,7 +3740,7 @@ if (tags) {
 ```
 
 
-#### gotoTag()
+### gotoTag()
 
 This method enables direct navigation to the tag within the space, identified by a specific ID. 
 
@@ -3934,7 +4000,7 @@ try {
 
 ### detachTagMedia()
 
-In contrary of [attachTagMedia()](#attachtagmedia), this asynchronous function available for detaching media attachments from a particular tag, identified by its tagId, using an object payload as its input. The process involves retrieving the tag and subsequently separating the specified media attachments.
+In contrast to [attachTagMedia()](#attachtagmedia), this asynchronous function is available for detaching media attachments from a particular tag, identified by its tagId, using an object payload as its input. The process involves retrieving the tag and subsequently separating the specified media attachments.
 
 
 *Function Signature*
@@ -3969,7 +4035,7 @@ try {
 
 ### moveTag()
 
-An asynchronous operation is provided for relocating a specific tag identified by its tagId, with the tagId as its input parameter.
+This asynchronous function relocates a specific tag identified by its tagId, which is passed as its input parameter.
 
 *Function Signature*
 ```typescript
@@ -4171,11 +4237,10 @@ try {
 
 ```
 
------
 
-### Sweeps
+## Sweeps
 
-#### getSweeps()
+### getSweeps()
 
 Retrieve information about the sweeps (viewpoints) within the loaded 3D space using this asynchronous method.
 
@@ -4196,7 +4261,7 @@ if (sweeps) {
 }
 ```
 
-#### moveToSweep()
+### moveToSweep()
 
 This asynchronous function moves the camera location to a specific sweep (viewpoint) within the loaded 3D space. 
 
@@ -4221,7 +4286,7 @@ console.log('Camera view moved to sweep ' + sweepId);
 ```
 
 
-#### getNearbySweeps()
+### getNearbySweeps()
 
 Retrieve information about nearby sweeps (viewpoints) for a given sweep within the loaded 3D space using this asynchronous function.
 
@@ -4244,7 +4309,7 @@ const nearbySweeps = await atwin.getNearbySweeps(sweepId);
 console.log('Nearby Sweeps:', nearbySweeps);
 ```
 
-#### getCurrentSweep()
+### getCurrentSweep()
 
 Obtain information about the current sweep that the camera view is focused on within the loaded 3D space using this function.
 
@@ -4262,9 +4327,9 @@ console.log('Current Sweep:', currentSweep);
 ```
 
 
-#### getCurrentSweepPosition()
+### getCurrentSweepPosition()
 
-Retrieve information about the exact location of the current sweep's position. This function will return sweep's (x,y,z) coordinates.
+Retrieve the exact position of the current sweep. This function returns the sweep's (x, y, z) coordinates.
 
 *Function Signature*
 ```typescript
@@ -4280,7 +4345,7 @@ console.log('Current Sweep Position:', currentSweepPosition);
 ```
 
 
-#### getAllSweeps()
+### getAllSweeps()
 
 This function retrieves all sweep data within the currently loaded space. It will return an array of objects, each containing information about a sweep. Each object includes properties such as id, position, and neighbors.
 
@@ -4306,7 +4371,7 @@ const allSweeps = atwin.getAllSweeps();
 console.log('All Sweeps:', allSweeps);
 ```
 
-#### disableSweeps()
+### disableSweeps()
 
 This function disables all Sweeps when the iframeId is passed.
 
@@ -4322,7 +4387,7 @@ iframeId = "mp-showcase";
 const disableSweeps = atwin.disableSweeps(iframeId) (edited) 
 ```
 
-#### disableSweep()
+### disableSweep()
 
 Disables the current sweep or multiple sweeps by passing an array of sweep ids. If no parameter is passed the current sweep will be disabled using the current SDK instance
 
@@ -4338,7 +4403,7 @@ const iframeId = "mp-showcase";
 const disableSweeps = atwin.disableSweep(['sweep1','sweep2'],iframeId)
 ```
 
-#### enableSweep()
+### enableSweep()
 
 Enables the current sweep or multiple sweeps by passing an array of sweep ids. If no parameter is passed the current sweep will be enabled using the current SDK instance
 
@@ -4354,7 +4419,7 @@ const iframeId = "mp-showcase";
 const disableSweeps = atwin.enableSweep(['sweep1','sweep2'],iframeId)
 ```
 
-#### Using custom sweep pucks
+### Using custom sweep pucks
 
 Custom sweep pucks allow you to place a 2D circle or 3D torus as an additional visual indicator in your sweeps. Do take note that the sweep pucks do not replace the existing sweep markers on the space. To add custom sweep pucks to your space simply add the following to your config object that you pass to `connectSpace`
 
@@ -4394,11 +4459,11 @@ const config = {
 atwin.connectSpace(url,config)
 ```
 
------
 
-### Video
 
-#### playVideo()
+## Video
+
+### playVideo()
 
 Initiate playback of a video object with a specified ID in the loaded 3D space using this function. It fetches the video object using the provided video ID and starts playback.
 
@@ -4420,7 +4485,7 @@ const videoId = /* specify the video ID */;
 atwin.playVideo(videoId);
 ```
 
-#### pauseVideo()
+### pauseVideo()
 
 Pause playback of a video object with a specified ID in the loaded 3D space using this function. It retrieves the video object using the provided video ID and halts its playback.
 
@@ -4442,7 +4507,7 @@ const videoId = /* specify the video ID */;
 atwin.pauseVideo(videoId);
 ```
 
-#### setVideoPlayback()
+### setVideoPlayback()
 
 This function enables you to control the playback and mute state of an HTML video element by specifying an action. Supported actions include "play," "pause", "mute," and "unmute." The function modifies the playback and mute settings of the provided video element based on the action.
 
@@ -4466,11 +4531,10 @@ const videoElement = /* Specify the HTML video element */;
 atwin.setVideoPlayback(action, videoElement);
 ```
 
------
 
-### Navigation
+## Navigation
 
-#### moveInDirection()
+### moveInDirection()
 
 Move the camera within the space in a specified direction using this asynchronous function. Supported directions comprise 'LEFT,' 'RIGHT,' 'UP,' 'DOWN,' 'FORWARD,' and 'BACK'.
 
@@ -4498,13 +4562,12 @@ atwin.moveInDirection(desiredDirection)
   });
 ```
 
------
 
-### Camera
+## Camera
 
-#### getCurrentCameraPose()
+### getCurrentCameraPose()
 
-Retrieve the current camera pose, including the details about the camera's spatial orientation and position within the space. The camera pose provides details about the camera's spatial location and orientation, allowing you to understand its position in the virtual environment.
+Retrieve the current camera pose, including the camera's spatial orientation and position within the space. This data provides details about the camera's location and orientation, allowing you to understand its position in the virtual environment.
 
 *Function Signature*
 ```typescript
@@ -4519,9 +4582,9 @@ const cameraPose = atwin.getCurrentCameraPose();
 console.log("Current Camera Pose:", cameraPose);
 ```
 
-#### getCurrentCameraPose()
+### getCurrentCameraZoom()
 
-Retrieve the current camera zoom data specifically camera zoom level.
+Retrieve the current camera zoom data, specifically the camera zoom level.
 
 *Function Signature*
 ```typescript
@@ -4536,7 +4599,7 @@ const cameraZoomData = atwin.getCurrentCameraZoom();
 console.log("Current Camera Pose:", cameraZoomData);
 ```
 
-#### getCameraPosition()
+### getCameraPosition()
 
 Retrieve the present camera position within the 3D space using this function. The function provides the coordinates (x, y, z) that signify the camera's placement in the 3D space.
 
@@ -4553,9 +4616,9 @@ const cameraPosition = atwin.getCameraPosition();
 console.log("Current Camera Position:", cameraPosition);
 ```
 
-#### cameraPan()
+### cameraPan()
 
-Pan the camera view adjustments by specifying rotation angles along both the horizontal and vertical axes using this function. The panning action simulates looking sideways left and right (horizontal) and looking up and down (vertical).
+Pan the camera view by specifying rotation angles along both the horizontal and vertical axes using this function. The panning action simulates looking sideways left and right (horizontal) and looking up and down (vertical).
 
 *Function Signature*
 ```typescript
@@ -4582,7 +4645,7 @@ atwin.cameraPan(30, 10)
   });
 ```
 
-#### cameraRotate()
+### cameraRotate()
 This function allows you to rotate the camera's view by specifying rotation angles along the horizontal and vertical axes. The rotation action simulates changing the direction the camera is facing.
 
 *Function Signature*
@@ -4595,7 +4658,7 @@ async function cameraRotate(x: number, y: number, speed: number): Promise<void>;
 | :----: | :----: | :---: | :---: | :---: |
 | x | number | yes |  | number of degrees will pan the camera to the right |
 | y | number | yes |  | number of degrees will tilt the camera upward |
-| speed | number | yes |  | number of second will camera animate to specified angle ( x , y) |
+| speed | number | yes |  | number of seconds the camera will take to animate to the specified angle (x, y) |
 
 *Example:*
 ```typescript
@@ -4611,7 +4674,7 @@ cameraRotate(45, 15, 0.5)
   });
 ```
 
-#### cameraSetRotation()
+### cameraSetRotation()
 This function allows you to rotate the camera's view by specifying rotation angles along the horizontal and vertical axes. It sets the orientation of the camera (user’s viewpoint) while in Panorama View.
 
 *Function Signature*
@@ -4640,7 +4703,7 @@ cameraSetRotation(45, 15, 0.5)
   });
 ```
 
-#### getViewMode()
+### getViewMode()
 
 Obtain the existing view mode of the Matterport scene using this function. The view mode illustrates the manner in which the scene is presented, which includes 3D walkthrough mode, dollhouse mode, or floor plan mode.
 
@@ -4657,7 +4720,7 @@ const currentViewMode = atwin.getViewMode();
 console.log("Current view mode:", currentViewMode);
 ```
 
-#### setViewMode()
+### setViewMode()
 
 Change the current view mode of the 3D space scene to the designated mode using this function. The chosen view mode dictates the presentation style of the space, including options like 3D walkthrough mode, dollhouse mode, or floor plan mode.
 
@@ -4681,7 +4744,7 @@ async function changeToDollhouseMode() {
 }
 ```
 
-#### cameraLookAt()
+### cameraLookAt()
 
 This function adjusts the camera's view to focus on a specific point in the Matterport scene. The point is defined in screen coordinates, where x and y represent the pixel coordinates from the upper-left corner of the screen.
 
@@ -4707,7 +4770,7 @@ async function focusOnPoint(x, y) {
 
 ```
 
-#### captureSpaceScreenshot()
+### captureSpaceScreenshot()
 
 This function takes a screenshot (JPEG) of the user’s current space view. It creates a temporary download link for the screenshot image with the filename 'image.png', and then triggers the download.
 
@@ -4752,7 +4815,7 @@ async function captureSpace() {
 }
 ```
 
-#### captureScreenshotAndCameraDetails()
+### captureScreenshotAndCameraDetails()
 
 This function captures a screenshot of a virtual space and retrieves details about the camera's position and rotation at the time of the capture. It is designed to provide an easy way to get both a visual snapshot and the camera's state.
 
@@ -4807,9 +4870,9 @@ async function captureScreenshotAndCameraDetails() {
 
 -----
 
-### Objects
+## Objects
 
-#### getNearbyObjects()
+### getNearbyObjects()
 The [getNearbyObjects()](#getnearbyobjects) method retrieves nearby rendered objects based on a given payload containing type and distance parameters. It calculates the distance between the camera position and the objects' positions and returns a categorized list of nearby objects.
 
 *Function Signature*
@@ -4837,7 +4900,7 @@ const nearByObjects:NearbyObjects = atwin.getNearbyObjects(payload)
 ...
 ```
 
-#### addMediaScreen()
+### addMediaScreen()
 The [addMediaScreen()](#addmediascreen) method is asynchronous function allows you to add a media screen to the space. The media screen displays a media content specified by the mediaUrl parameter. You can customize the media screen's position, scale, and rotation using the transform parameter. Additional options such as readonly mode and autoplay can also be configured. This function logs information about the provided parameters and performs media handling.
 
 *Function Signature*
@@ -4881,7 +4944,7 @@ awtwin.addMediaScreen(mediaUrl, transform, readonly, autoplay)
   });
 ```
 
-#### setTransformMode()
+### setTransformMode()
 The [setTransformMode()](#settransformmode) asynchronous void function sets the transform mode for a specific type of transformation. The mode parameter defines the transformation mode, which can be translation, rotation, or scaling.
 
 *Function Signature*
@@ -4909,7 +4972,7 @@ atwin.setTransformMode(desiredMode)
   });
 ```
 
-#### revertTransform()
+### revertTransform()
 The [revertTransform()](#reverttransform) function allows you to revert transformations applied to a selected object. The function retrieves previous or next transformation data from the history, applies it to the selected object, and updates the internal state.
 
 *Function Signature*
@@ -4941,7 +5004,7 @@ if (atwin.revertTransform('redo')) {
 }
 ```
 
-#### removeTransformControls()
+### removeTransformControls()
 
 Use this function to remove transformation controls and associated components from the scene. It stops the transformation control node and potentially cancels any input control component, if available. The function ensures that the transformation controls are properly removed to maintain the integrity of the scene.
 
@@ -4962,7 +5025,7 @@ import * as atwin from 'architwin'
 atwin.removeTransformControls();
 ```
 
-#### setAnimationState()
+### setAnimationState()
 This function is used to set the animation state of a specific model object in the scene. It allows you to play or stop the animation associated with the specified model using the provided action parameter. The function locates the animation state path corresponding to the given modelId and updates it accordingly.
 
 *Function Signature*
@@ -4985,7 +5048,7 @@ const modelId = 123;
 setAnimationState(action, modelId);
 ```
 
-#### showObjectDimensions()
+### showObjectDimensions()
 
 Use this function to display the dimensions of a chosen object within a 3D space. The function computes the object's width, height, and depth through its bounding box and showcases this data as 3D text labels strategically positioned around the object.
 
@@ -5006,7 +5069,7 @@ import * as atwin from 'architwin'
 atwin.showObjectDimensions(selectedObject)
 ```
 
-#### copyObject()
+### copyObject()
 
 Generate a duplicate of a showcase object asynchronously, with the option to include positional and rotational offsets. The function generates a fresh ID for the duplicated object, applies provided positional and rotational adjustments, and integrates the object into the scene.
 
@@ -5043,7 +5106,7 @@ atwin.copyObject(objectToCopy, positionOffset, rotationOffset)
   });
 ```
 
-#### deleteObject()
+### deleteObject()
 
 Use asynchronous function to delete an existing 3D object. The deletion target is determined by the `id` parameter value.
 
@@ -5071,7 +5134,7 @@ atwin.deleteObject(objectId)
   });
 ```
 
-#### deleteObjectFromSpace()
+### deleteObjectFromSpace()
 
 To remove a designated object from a 3D space use [deleteObjectFromSpace()](#deleteobjectfromspace). Provide an `IObjectData` object as input, and the function will eliminate the object from the scene. Additionally, it undertakes essential cleanup tasks like halting animations and removing linked markup elements.
 
@@ -5099,7 +5162,7 @@ atwin.deleteObjectFromSpace(targetObject)
   });
 ```
 
-#### replaceObject()
+### replaceObject()
 
 To replace a particular object within a 3D space with a fresh one use [replaceObject()](#replaceobject) method. Provide an `I3DObject` payload for the new object, an IObjectData target for the object to be replaced, and optional configuration choices. The function eliminates the target object from the scene and introduces the new object in its designated position.
 
@@ -5131,7 +5194,7 @@ atwin.replaceObject(newObjectPayload, targetObject, replacementOptions)
     console.error('Error replacing object:', error);
   });
 ```
-#### addTextMarkupScreen()
+### addTextMarkupScreen()
 
 To introduce a text markup screen into the 3D space use the [addTextMarkupScreen()](#addtextmarkupscreen) method. The function generates a 3D object based on the supplied title and message. The screen's placement, scaling, and rotation align with the designated transformation parameters.
 
@@ -5162,7 +5225,7 @@ async function addTextMarkupScreen(
 import * as atwin from 'architwin'
 ```
 
-#### setTextMarkupScreenContent()
+### setTextMarkupScreenContent()
 
 To set the content of a text markup screen within a 3D space use the [setTextMarkupScreenContent()](#settextmarkupscreencontent). The function modifies multiple properties of the screen, including its title, text content, text color, and background color.
 
@@ -6545,4 +6608,1920 @@ await atwin.toggleViewpointVisibility()
 const ids = [012345, 6789,]
 
 await atwin.toggleViewpointVisibility(ids)
-````
+````
+
+## Draw Polygon and Path Methods
+
+Draw polygon functions enable users to interactively draw polygons inside 3D space to define custom room boundaries, partitions, and spatial zones. This is useful for creating custom floor plans, marking restricted areas, setting up room divisions, or defining zones with specific properties. Users can click points in the 3D space to create vertices, and the system will connect them to form a closed polygon or a linear tubular path. Enclosed polygons will additionally display measurement details such as the length and area the polygon occupies. These functions allow developers to perform creating, editing, validating, and managing polygon geometry either via user input or programmatically.
+
+<!-- ### drawPath()
+
+Draws a semi transparent tube line along a path.
+@deprecated - Use renderPath instead to render a path and setPathLine to update an existing path
+
+*Function Signature*
+```typescript
+async function drawPath(vertices: Array<Vector3>, options?: ComponentOptions): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| vertices | Array<Vector3> | yes | | Array of coordinates or vertices |
+| options | ComponentOptions | optional | | |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const pathVertices = [
+  new Vector3(0, 0, 0),
+  new Vector3(5, 0, 0),
+  new Vector3(5, 5, 0)
+]
+
+await atwin.drawPath(pathVertices)
+```
+-->
+
+### toggleSpaceNavigation()
+
+Toggle space navigation on/off to enable or disable user navigation within the 3D space.
+
+*Function Signature*
+```typescript
+function toggleSpaceNavigation(state: boolean = true): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| state | boolean | optional | true | true to enable navigation, false to disable |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Disable space navigation
+atwin.toggleSpaceNavigation(false)
+
+// Enable space navigation
+atwin.toggleSpaceNavigation(true)
+```
+
+### startDraw()
+
+Begin drawing mode in the space. This disables certain features (measurements, space search, mattertags) while drawing is active.
+
+*Function Signature*
+```typescript
+function startDraw(config?: PathConfig): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| config | PathConfig | optional | undefined | Configuration for line type, vertice type, and component options |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Start drawing with default config
+atwin.startDraw()
+
+// Start drawing with custom config
+const config = {
+  lineType: 'tubeLineType',
+  verticeType: 'verticeType'
+}
+atwin.startDraw(config)
+```
+
+### exitDraw()
+
+Exit drawing mode in the space. This re-enables features that were disabled during drawing (measurements, space search, mattertags).
+
+*Function Signature*
+```typescript
+function exitDraw(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Exit drawing mode
+atwin.exitDraw()
+```
+
+### cancelDraw()
+
+Cancel the current drawing operation and exit drawing mode. This also clears the history for pipe or room creation tools.
+
+*Function Signature*
+```typescript
+function cancelDraw(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Cancel current drawing
+atwin.cancelDraw()
+```
+
+### setPolygonPath()
+
+Updates the polygons by passing a new array of vertices. Do note that any vertex markers visible will not automatically update their position.
+
+*Function Signature*
+```typescript
+function setPolygonPath(id: number, vertices: Array<Vector3>): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | | id of the polygon object |
+| vertices | Array<Vector3> | yes | | array of vertices that are used to render the geometry of the polygon |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const polygonId = 123
+const newVertices = [
+  new Vector3(0, 0, 0),
+  new Vector3(10, 0, 0),
+  new Vector3(10, 10, 0),
+  new Vector3(0, 10, 0)
+]
+
+atwin.setPolygonPath(polygonId, newVertices)
+```
+
+### setPolygonDrawingMode()
+
+Updates the drawing mode of a polygon loader. Drawing supports two modes, `floor` which is the default and `window`. If drawing mode is set to `floor`, this will allow the user to draw a set of points inside the 3D space and render a flat horizontal polygon shape on the floor, each edge of the polygon in this mode with have vertical polygon forming a wall that when combined together completes the enclosed polygon. If mode is set to `window`, the user will be able to draw polygon shapes vertically, the vertical polygon shapes rendered in this mode will not render any additional shapes on its edges like floor mode does.
+
+*Function Signature*
+```typescript
+function setPolygonDrawingMode(id: number, mode: string): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | | id of the polygon object |
+| mode | string | yes | floor | floor or window |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const polygonId = 123
+
+// Set polygon to floor mode
+atwin.setPolygonDrawingMode(polygonId, 'floor')
+
+// Set polygon to window drawing mode
+atwin.setPolygonDrawingMode(polygonId, 'window')
+```
+
+### setPathLine()
+
+Update the path of an existing path created by `renderPath` by setting the new vertices of the path line.
+
+*Function Signature*
+```typescript
+function setPathLine(id: number, path: Array<Vector3>): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | | id of the object/path |
+| path | Array<Vector3> | yes | | array of xyz coordinates |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const pathId = 456
+const newPath = [
+  new Vector3(1, 0, 0),
+  new Vector3(6, 0, 0),
+  new Vector3(6, 6, 0)
+]
+
+atwin.setPathLine(pathId, newPath)
+```
+
+### setPathLineOptions()
+
+Update the inputs of a rendered path line.
+
+*Function Signature*
+```typescript
+function setPathLineOptions(id: number, options: ComponentOptions): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | | id of the object/path |
+| options | ComponentOptions | yes | | keys you want to update, you should only populate keys that you explicitly wanted to update |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const pathId = 456
+const pathOptions = {
+  visible: true,
+  color: '#0000FF',
+  width: 2
+}
+
+atwin.setPathLineOptions(pathId, pathOptions)
+```
+
+### getCurrentTubeLine()
+
+Returns the current tube line and data instance.
+
+*Function Signature*
+```typescript
+function getCurrentTubeLine(): IObjectData | undefined
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const currentTubeLine = atwin.getCurrentTubeLine()
+
+if (currentTubeLine) {
+  console.log('Current tube line ID:', currentTubeLine.object.id)
+  console.log('Current tube line object:', currentTubeLine)
+}
+```
+
+### renderPolygon()
+
+Renders a polygon from an array of coordinates or an object containing an array of coordinates.
+
+*Function Signature*
+```typescript
+function renderPolygon(payload: PartitionPayload | Array<Vector3>, options?: ComponentOptions): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | PartitionPayload \| Array<Vector3> | yes | | PartitionPayload or array of xyz coordinates |
+| options | ComponentOptions | optional | | customization options to dictate the look and behavior of the polygon |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const vertices = [
+  new Vector3(0, 0, 0),
+  new Vector3(10, 0, 0),
+  new Vector3(10, 10, 0),
+  new Vector3(0, 10, 0)
+]
+
+const options = {
+  visible: true,
+  color: '#FF0000'
+}
+
+atwin.renderPolygon(vertices, options)
+```
+
+### toggleWallVisibility()
+
+Wrapper function around toggleMeshChildrenVisibility that also toggles associated wall label visibility.
+
+*Function Signature*
+```typescript
+function toggleWallVisibility(component: MpSdk.Scene.IComponent, name: string, visible?: boolean): boolean
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | Component of the model |
+| name | string | yes | | name of the model |
+| visible | boolean | optional | undefined | true to show, false to hide, undefined to toggle |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const component = atwin.selectedObject?.component
+const wallName = 'wall_001'
+
+// Toggle wall visibility
+if (component) {
+  atwin.toggleWallVisibility(component, wallName)
+  
+  // Show wall
+  atwin.toggleWallVisibility(component, wallName, true)
+}
+```
+
+### toggleMeshChildrenVisibility()
+
+Toggles the visibility of the children of a mesh.
+
+*Function Signature*
+```typescript
+function toggleMeshChildrenVisibility(component: MpSdk.Scene.IComponent, name: string, visible?: boolean): boolean
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | Component of the model |
+| name | string | yes | | name of the model |
+| visible | boolean | optional | undefined | true to show, false to hide, undefined to toggle |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const component = atwin.selectedObject?.component
+const childName = 'mesh_child_001'
+
+// Toggle mesh children visibility
+if (component) {
+  atwin.toggleMeshChildrenVisibility(component, childName)
+  
+  // Show mesh children
+  atwin.toggleMeshChildrenVisibility(component, childName, true)
+}
+```
+
+### toggleFloorVisibility()
+
+Wrapper function around toggleMeshChildrenVisibility that also toggles associated edge labels.
+
+*Function Signature*
+```typescript
+function toggleFloorVisibility(component: MpSdk.Scene.IComponent, name: string, visible?: boolean): boolean
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | Component of the model |
+| name | string | yes | | name of the model |
+| visible | boolean | optional | undefined | true to show, false to hide, undefined to toggle |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const component = atwin.selectedObject?.component
+const floorName = 'floor_001'
+
+// Toggle floor visibility
+if (component) {
+  atwin.toggleFloorVisibility(component, floorName)
+  
+  // Hide floor
+  atwin.toggleFloorVisibility(component, floorName, false)
+}
+```
+
+### getChildrenOfModel()
+
+Returns the children of a model's component.
+
+*Function Signature*
+```typescript
+function getChildrenOfModel(component: MpSdk.Scene.IComponent): Array<any>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | Component of the model |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const component = atwin.selectedObject?.component
+
+if (component) {
+  const children = atwin.getChildrenOfModel(component)
+  
+  if (children && children.length > 0) {
+    console.log('Model has', children.length, 'child elements')
+    children.forEach(child => console.log(child.name))
+  }
+}
+```
+
+### toggleVerticeRingVisibility()
+
+During edit mode when drawing a path or polygon and you switch to a different view such as floor plan mode in the Matterport space, you may sometimes find it hard to see the vertice markers. You can use this method to toggle the visibility of a red circular marker on each vertice to make it easier to spot. By default, these vertice rings are hidden.
+
+*Function Signature*
+```typescript
+function toggleVerticeRingVisibility(visibility?: boolean): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| visibility | boolean | optional | false | Default is false |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Hide vertex rings
+atwin.toggleVerticeRingVisibility(false)
+
+// Show vertex rings
+atwin.toggleVerticeRingVisibility(true)
+```
+
+### setPolygonFloorOffset()
+
+Sets the global offset value of the y axis of a rendered polygon.
+
+*Function Signature*
+```typescript
+function setPolygonFloorOffset(offset: number): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| offset | number | yes | | vertical offset value in meters |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Set polygon offset to 2 meters above floor
+atwin.setPolygonFloorOffset(2.0)
+```
+
+### getPolygonFloorOffset()
+
+Returns the value of the global floor offset.
+
+*Function Signature*
+```typescript
+function getPolygonFloorOffset(): number
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const polygonOffset = atwin.getPolygonFloorOffset()
+console.log('Current polygon floor offset:', polygonOffset)
+```
+
+### setFloorBaseHeight()
+
+Set the value of the base height or y-axis of the vertex of a polygon.
+
+*Function Signature*
+```typescript
+function setFloorBaseHeight(baseHeight: number): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| baseHeight | number | yes | | base height reference value |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Set floor base height to 0.5 meters
+atwin.setFloorBaseHeight(0.5)
+```
+
+### clearFloorBaseHeight()
+
+Clear the value of the base height for floors of polygons.
+
+*Function Signature*
+```typescript
+function clearFloorBaseHeight(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Clear the floor base height
+atwin.clearFloorBaseHeight()
+```
+
+### enableVerticeControls()
+
+Enable vertex controls for polygon editing. This allows users to manipulate vertices of the polygon.
+
+*Function Signature*
+```typescript
+function enableVerticeControls(component: MpSdk.Scene.IComponent): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | Component of the model |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const component = atwin.selectedObject?.component
+
+if (component) {
+  atwin.enableVerticeControls(component)
+}
+```
+
+<!-- ### deleteEdge()
+
+Deletes the edge of a polygon.
+
+*Function Signature*
+```typescript
+function deleteEdge(component: MpSdk.Scene.IComponent, endPoint: Vector3): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | The component of the polygon instance |
+| endPoint | Vector3 | yes | | Endpoint of the edge to be deleted |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const component = atwin.selectedObject?.component
+const edgeEndpoint = new Vector3(10, 0, 0)
+
+if (component) {
+  atwin.deleteEdge(component, edgeEndpoint)
+}
+```
+-->
+
+
+### disposePathLine()
+
+Destroys the current path line instance.
+
+*Function Signature*
+```typescript
+function disposePathLine(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Dispose of current path line
+atwin.disposePathLine()
+```
+
+### getFloorBaseHeight()
+
+Returns the value of the global base height.
+
+*Function Signature*
+```typescript
+function getFloorBaseHeight(): number
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const floorHeight = atwin.getFloorBaseHeight()
+console.log('Current floor base height:', floorHeight)
+```
+
+### setMeshChildrenMaterialProperty()
+
+Updates the value of a property of a child of the mesh.
+
+*Function Signature*
+```typescript
+function setMeshChildrenMaterialProperty(component: MpSdk.Scene.IComponent, name: string, key: string, value: any): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| component | MpSdk.Scene.IComponent | yes | | Component of the model |
+| name | string | yes | | name of the model |
+| key | string | yes | | property key |
+| value | any | yes | | value for the property |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const component = atwin.selectedObject?.component
+const meshName = 'mesh_child_001'
+const propertyKey = 'color'
+const colorValue = '#FF0000'
+
+if (component) {
+  atwin.setMeshChildrenMaterialProperty(component, meshName, propertyKey, colorValue)
+}
+```
+
+### undoDrawAction()
+
+Undo the last drawing action.
+
+*Function Signature*
+```typescript
+function undoDrawAction(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Undo the last drawing action
+atwin.undoDrawAction()
+```
+
+### redoDrawAction()
+
+Redo the last undone drawing action.
+
+*Function Signature*
+```typescript
+function redoDrawAction(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Redo the last undone drawing action
+atwin.redoDrawAction()
+```
+
+### setWallBaseHeight()
+
+Set the value of the base height or y-axis of the vertex of a polygon.
+
+*Function Signature*
+```typescript
+function setWallBaseHeight(baseHeight: number): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| baseHeight | number | yes | | base height reference value |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Set wall base height to 3 meters
+atwin.setWallBaseHeight(3.0)
+```
+
+### getWallBaseHeight()
+
+Returns the value of the global base height.
+
+*Function Signature*
+```typescript
+function getWallBaseHeight(): number
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const wallHeight = atwin.getWallBaseHeight()
+console.log('Current wall base height:', wallHeight)
+```
+
+### clearWallBaseHeight()
+
+Clear the value of the base height for floors of polygons.
+
+*Function Signature*
+```typescript
+function clearWallBaseHeight(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Clear the wall base height
+atwin.clearWallBaseHeight()
+```
+
+### getVertexPath()
+
+Get the array of vertices that form the current drawing path.
+
+*Function Signature*
+```typescript
+function getVertexPath(): Array<Vector3>
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const vertexPath = atwin.getVertexPath()
+
+if (vertexPath && vertexPath.length > 0) {
+  console.log('Current vertex path:', vertexPath)
+  console.log('Number of vertices:', vertexPath.length)
+  vertexPath.forEach((vertex, index) => {
+    console.log(`Vertex ${index}:`, vertex.x, vertex.y, vertex.z)
+  })
+}
+```
+
+### renderPath()
+
+Renders a 3D path in the space, the path can display any valid ASCII value and display it as an animated value that follows along the line.
+
+*Function Signature*
+```typescript
+function renderPath(vertices: Array<Vector3>, options?: ComponentOptions): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| vertices | Array<Vector3> | yes | | array of xyz coordinates |
+| options | ComponentOptions | optional | undefined | customization options to dictate the look and behavior of the path |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const pathVertices = [
+  new Vector3(0, 0, 0),
+  new Vector3(5, 0, 0),
+  new Vector3(5, 5, 0),
+  new Vector3(0, 5, 0)
+]
+
+const options = {
+  visible: true,
+  color: '#FF0000'
+}
+
+atwin.renderPath(pathVertices, options)
+```
+
+### setDrawingConfig()
+
+Configure the loader to be used for the vertice and path of the drawing system. You can also pass different customization options for both path and vertex components. You only need to run this once unless you intend to switch the configuration again.
+
+*Function Signature*
+```typescript
+function setDrawingConfig(config: PathConfig): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| config | PathConfig | yes | | Configuration object with lineType, verticeType, and component config options |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const drawingConfig = {
+  lineType: 'tubeLineType',
+  verticeType: 'verticeType',
+  lineTypeComponentConfig: {
+    renderPolygonOnAdd: true
+  },
+  verticeTypeComponentConfig: {
+    visible: true
+  }
+}
+
+atwin.setDrawingConfig(drawingConfig)
+```
+
+### getDrawingConfig()
+
+Gets the current configuration used by the drawing system.
+
+*Function Signature*
+```typescript
+function getDrawingConfig(): PathConfig
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const currentConfig = atwin.getDrawingConfig()
+console.log('Current drawing config:', currentConfig)
+```
+
+### resetDrawingConfig()
+
+Resets the configuration for the drawing system to its defaults.
+
+*Function Signature*
+```typescript
+function resetDrawingConfig(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Reset to default configuration
+atwin.resetDrawingConfig()
+```
+
+<!-- ### deleteVertex()
+
+Removes a vertex sphere from the space. If no argument is passed it will remove the last vertex that has been added.
+
+*Function Signature*
+```typescript
+function deleteVertex(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Delete the last vertex added to the current path
+atwin.deleteVertex()
+```
+-->
+
+### setPointerEnabled()
+
+Sets whether the screen sharing pointer is enabled.
+
+*Function Signature*
+```typescript
+function setPointerEnabled(enabled: boolean): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| enabled | boolean | yes | | Whether to enable the pointer |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Enable the pointer
+atwin.setPointerEnabled(true)
+
+// Disable the pointer
+atwin.setPointerEnabled(false)
+```
+
+### removeScreenShareSessionData()
+
+Remove screen share session data.
+
+*Function Signature*
+```typescript
+function removeScreenShareSessionData(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Remove the screen share session data
+atwin.removeScreenShareSessionData()
+```
+
+### setVertexPath()
+
+Set _thisVertexPath value.
+
+*Function Signature*
+```typescript
+function setVertexPath(path: Array<Vector3>): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| path | Array<Vector3> | yes | | Array of x,y,z coordinates for the path vertices |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const vertexPath = [
+  new Vector3(0, 0, 0),
+  new Vector3(10, 0, 0),
+  new Vector3(10, 10, 0)
+]
+
+atwin.setVertexPath(vertexPath)
+```
+
+### clearTagVisibilityStorage()
+
+Clear tag visibility storage.
+
+*Function Signature*
+```typescript
+function clearTagVisibilityStorage(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Clear the tag visibility storage
+atwin.clearTagVisibilityStorage()
+```
+
+### clearActivePane()
+
+Clear the active pane.
+
+*Function Signature*
+```typescript
+function clearActivePane(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Clear the currently active pane
+atwin.clearActivePane()
+```
+
+
+## Space Partition
+
+Space partition functions manage spatial partitioning of the 3D environment, allowing you to organize and divide the space into logical segments or regions. These partitions can be used for spatial organization, collision detection, occlusion culling, or semantic segmentation of different areas within the space. Partitions help optimize rendering performance and enable spatial queries like finding objects within a specific partition.
+
+<!-- ### setSpacePartitionNodes()
+
+This function sets and manages the partition nodes.
+
+*Function Signature*
+```typescript
+function setSpacePartitionNodes(partitionNodes: Array<PartitionNode>): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| partitionNodes | Array<PartitionNode> | yes | | Array of partition nodes |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const partitionNodes = [
+  { id: 'partition_1', bounds: { min: [0, 0, 0], max: [10, 10, 10] } },
+  { id: 'partition_2', bounds: { min: [10, 0, 0], max: [20, 10, 10] } }
+]
+
+await atwin.setSpacePartitionNodes(partitionNodes)
+```
+-->
+
+### setCurrentPolygon()
+
+Set the current polygon for space partitioning.
+
+*Function Signature*
+```typescript
+function setCurrentPolygon(polygonData: IObjectData): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| polygonData | IObjectData | yes | | The polygon object data |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const selectedPolygon = atwin.getSelectedObject()
+
+if (selectedPolygon) {
+  atwin.setCurrentPolygon(selectedPolygon)
+}
+```
+
+## Others
+
+Miscellaneous utility functions for space management and coordinate conversion. These include functions for retrieving space metadata, converting between coordinate systems (Z-up to Y-up and vice versa), managing space IDs, getting relative positions within the space, and handling asset URL resolution. These utilities provide essential support for space operations and coordinate transformations needed throughout the application.
+
+### getSpaceId()
+
+Get the current space ID.
+
+*Function Signature*
+```typescript
+function getSpaceId(): string
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const spaceId = atwin.getSpaceId()
+console.log('Current space ID:', spaceId)
+```
+
+### getCurrentPolygon()
+
+Get the currently active polygon.
+
+*Function Signature*
+```typescript
+function getCurrentPolygon(): any
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const currentPolygon = atwin.getCurrentPolygon()
+if (currentPolygon) {
+  console.log('Current polygon ID:', currentPolygon.object.id)
+}
+```
+
+### getPathBetweenSweeps()
+
+Get the path between two sweeps.
+
+*Function Signature*
+```typescript
+function getPathBetweenSweeps(): Array<Vector3>
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const path = atwin.getPathBetweenSweeps()
+if (path && path.length > 0) {
+  console.log('Path between sweeps:', path)
+}
+```
+
+### moveAlongPath()
+
+Move along a defined path in the space.
+
+*Function Signature*
+```typescript
+function moveAlongPath(path: Array<Vector3>): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| path | Array<Vector3> | yes | | Array of x,y,z coordinates defining the path |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const path = [
+  new Vector3(0, 0, 0),
+  new Vector3(5, 0, 0),
+  new Vector3(5, 5, 0)
+]
+
+atwin.moveAlongPath(path)
+```
+
+<!-- ### convertZupToYup()
+
+Converts a coordinate from a right handed Z-up coordinates system to a right handed Y-up coordinate system.
+
+*Function Signature*
+```typescript
+function convertZupToYup(revitCoords: Vector3, mpBasePoint?: Vector3, bimBasepoint?: Vector3, unit?: string, scaleFactor?: number): Vector3
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| revitCoords | Vector3 | yes | | coordinates |
+| mpBasePoint | Vector3 | optional | {x:0,y:0,z:0} | if defined will offset the position based on the MP basepoint |
+| bimBasepoint | Vector3 | optional | {x:0,y:0,z:0} | if defined will offset the position based on the BIM basepoint |
+| unit | string | optional | METER | Supported units: MILLIMETER, CENTIMETER, METER, FOOT, INCH |
+| scaleFactor | number | optional | 1 | default is 1 (1:1 scale). Applied after conversion to meters |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const zupPoint = new Vector3(0, 5, 10)
+const yupPoint = atwin.convertZupToYup(zupPoint)
+
+console.log('Converted point:', yupPoint)
+```
+
+### convertYupToZup()
+
+Converts a coordinate from a right handed Y-up coordinate system to a right handed Z-up coordinate system.
+
+*Function Signature*
+```typescript
+function convertYupToZup(objectPosition: Vector3, mpBasePoint?: Vector3, bimBasepoint?: Vector3, unit?: string, scaleFactor?: number): Vector3
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| objectPosition | Vector3 | yes | | coordinates in meters (ThreeJS uses meters) |
+| mpBasePoint | Vector3 | optional | {x:0,y:0,z:0} | if defined will offset the position based on the MP basepoint |
+| bimBasepoint | Vector3 | optional | {x:0,y:0,z:0} | if defined will offset the position based on the BIM basepoint |
+| unit | string | optional | METER | Supported units: MILLIMETER, CENTIMETER, METER, FOOT, INCH. Only affects the basePoint conversion |
+| scaleFactor | number | optional | 1 | default is 1 (1:1 scale). Applied to coordinates in meters |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const yupPoint = new Vector3(0, 10, 5)
+const zupPoint = atwin.convertYupToZup(yupPoint)
+
+console.log('Converted point:', zupPoint)
+```
+-->
+
+### getRelativePosition()
+
+Gives you the simple relative position of an object to another object in the Matterport Space.
+
+*Function Signature*
+```typescript
+function getRelativePosition(position: Vector3, relativeTo: Vector3): Vector3
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| position | Vector3 | yes | | position coordinates |
+| relativeTo | Vector3 | yes | | reference position |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const relativePosition = atwin.getRelativePosition()
+console.log('Relative position:', relativePosition)
+```
+
+### getOriginalWorldPosition()
+
+Gives your the original position of an object's relative position to another object. use this to reverse the result given by getRelativePosition.
+
+*Function Signature*
+```typescript
+function getOriginalWorldPosition(position: Vector3, relativeTo: Vector3): Vector3
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| position | Vector3 | yes | | relative position coordinates |
+| relativeTo | Vector3 | yes | | reference position |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const worldPosition = atwin.getOriginalWorldPosition()
+console.log('Original world position:', worldPosition)
+```
+
+### setSpaceMetadata()
+
+Set the space meta data variable.
+
+*Function Signature*
+```typescript
+function setSpaceMetadata(payload: SpaceMetadata | null): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | SpaceMetadata \| null | yes | | space metadata object |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Set space metadata
+atwin.setSpaceMetadata('theme', 'dark')
+atwin.setSpaceMetadata('version', 1.5)
+atwin.setSpaceMetadata('features', ['feature1', 'feature2'])
+```
+
+### getSpaceMetadata()
+
+Returns the value of the space meta data.
+
+*Function Signature*
+```typescript
+function getSpaceMetadata(): SpaceMetadata
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const themeValue = atwin.getSpaceMetadata('theme')
+console.log('Space theme:', themeValue)
+```
+
+### getAssetUrl()
+
+Returns the path to an asset placed in the static folder.
+
+*Function Signature*
+```typescript
+function getAssetUrl(filename: string): string
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| filename | string | yes | | filename of the file including the extension. If the file is placed in a subfolder of static folder include that without any / in the beginning |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const assetUrl = atwin.getAssetUrl('images/logo.png')
+console.log('Asset URL:', assetUrl)
+```
+
+
+<!-- ## IoT (Internet of Things)
+
+IoT functions enable integration of Internet of Things devices within the 3D space, allowing you to represent and manage smart devices, sensors, and connected equipment as interactive objects in the visualization. You can define device categories, set device types and properties, customize device icons and tags, and link IoT devices to external systems. This enables users to monitor and interact with real-world IoT devices within the immersive 3D environment.
+
+### setIotCategoryTypes()
+
+Set the available IoT device category types.
+
+*Function Signature*
+```typescript
+function setIotCategoryTypes(payload: Array<ITagIOTCategory>): Array<ITagIOTCategory>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | Array<ITagIOTCategory> | yes | | Array of IoT category objects |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const categories = [
+  { id: '1', name: 'Sensors', icon: 'sensor.png' },
+  { id: '2', name: 'Actuators', icon: 'actuator.png' }
+]
+
+atwin.setIotCategoryTypes(categories)
+```
+
+### setIotDeviceTypes()
+
+Set the available IoT device types.
+
+*Function Signature*
+```typescript
+function setIotDeviceTypes(payload: Array<DeviceInfo>): Array<DeviceInfo>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | Array<DeviceInfo> | yes | | Array of device info objects |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const devices = [
+  { id: '1', name: 'Temperature Sensor', type: 'Sensor' },
+  { id: '2', name: 'Door Lock', type: 'Actuator' }
+]
+
+atwin.setIotDeviceTypes(devices)
+```
+
+### setIoTDeviceTagIcons()
+
+Set custom icons for IoT device tags.
+
+*Function Signature*
+```typescript
+function setIoTDeviceTagIcons(payload: any): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | any | yes | | Icon configuration object |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const iconConfig = {
+  sensor: 'path/to/sensor-icon.png',
+  actuator: 'path/to/actuator-icon.png'
+}
+
+atwin.setIoTDeviceTagIcons(iconConfig)
+```
+
+### getIoTDeviceTagIcons()
+
+Retrieve the currently configured IoT device tag icons.
+
+*Function Signature*
+```typescript
+function getIoTDeviceTagIcons(): any
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const icons = atwin.getIoTDeviceTagIcons()
+console.log('Current IoT device tag icons:', icons)
+```
+
+### setIoTLinkedSystemOptions()
+
+Set available linked system options for IoT devices.
+
+*Function Signature*
+```typescript
+function setIoTLinkedSystemOptions(payload: Array<string>): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | Array<string> | yes | | Array of system option strings |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const linkedSystems = ['Building Management System', 'Home Automation', 'Industrial Control']
+
+atwin.setIoTLinkedSystemOptions(linkedSystems)
+```
+-->
+
+## Space Screen Share
+
+Screen sharing functions enable users to share their screens within the collaborative 3D space, allowing multiple participants to view shared content simultaneously. Includes functionality to designate a host user sharing their screen, manage participant viewers, render cursor markers to show where the host is pointing, and update cursor textures for visual feedback. This facilitates collaborative work sessions and presentations within the immersive environment.
+
+### setScreenSharingHostUser()
+
+Set value to screen sharing host user.
+
+*Function Signature*
+```typescript
+function setScreenSharingHostUser(user: ScreenShareUser | null): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| user | ScreenShareUser \| null | yes | | ScreenShareUser object or null |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const hostUser = {
+  id: 'user123',
+  name: 'John Doe',
+  color: '#FF0000'
+}
+
+atwin.setScreenSharingHostUser(hostUser)
+```
+
+### setScreenSharingParticipantUsers()
+
+Set value to screen sharing participant users.
+
+*Function Signature*
+```typescript
+function setScreenSharingParticipantUsers(users: Array<ScreenShareUser>): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| users | Array<ScreenShareUser> | yes | | ScreenShareUser array |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const participants = [
+  { id: 'user234', name: 'Jane Smith', color: '#00FF00' },
+  { id: 'user345', name: 'Bob Wilson', color: '#0000FF' }
+]
+
+atwin.setScreenSharingParticipantUsers(participants)
+```
+
+### renderCursorMarkerPointer()
+
+Syncs an object's position and rotation to align with a pointer intersection surface. If an object is provided, its transformation is updated. Otherwise, a new marker is added at the intersection point.
+
+*Function Signature*
+```typescript
+function renderCursorMarkerPointer(pointerIntersection: MpSdk.Pointer.Intersection, _object?: IObjectData, markerTexture?: string): Promise<IShowcaseObject | void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| pointerIntersection | MpSdk.Pointer.Intersection | yes | | The pointer intersection from Matterport SDK |
+| _object | IObjectData | optional | | Optional object to transform |
+| markerTexture | string | optional | | Optional texture URL for a new marker |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+import { Vector3 } from 'architwin/lib/types'
+
+const cursorPosition = new Vector3(5, 2, 3)
+atwin.renderCursorMarkerPointer(cursorPosition)
+```
+
+### updatePointerTexture()
+
+Update the texture of the pointer reticle using a registered texture ID. Defaults to 'targetPointer' if no ID is provided.
+
+*Function Signature*
+```typescript
+function updatePointerTexture(textureId?: string): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| textureId | string | optional | targetPointer | Optional texture ID to apply to the pointer, if equal to 'resetTexture' it will reset texture |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const textureUrl = 'https://example.com/cursor-texture.png'
+atwin.updatePointerTexture(textureUrl)
+```
+
+### toggleElementVisibility()
+
+Toggles the visibility of an HTML element by its ID.
+
+*Function Signature*
+```typescript
+function toggleElementVisibility(id: string, shouldShow: boolean): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | string | yes | | The ID of the HTML element to be shown or hidden |
+| shouldShow | boolean | yes | | Boolean flag to show (true) or hide (false) the element |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Toggle visibility of an element
+atwin.toggleElementVisibility('element-123')
+```
+
+
+<!-- ### setPipeCategories()
+
+Set pipes categories value.
+
+*Function Signature*
+```typescript
+function setPipeCategories(pipes: IPipeCategory[]): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| pipes | IPipeCategory[] | yes | | IPipeCategory array |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const pipeCategories = [
+  { id: '1', name: 'HVAC', color: '#FF0000' },
+  { id: '2', name: 'Plumbing', color: '#0000FF' }
+]
+
+atwin.setPipeCategories(pipeCategories)
+```
+
+### setSelectedPipeCategory() -->
+
+<!-- ### setSelectedPipeCategory()
+
+Set selected pipes catrgory value.
+
+*Function Signature*
+```typescript
+function setSelectedPipeCategory(pipe: IPipeCategory): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| pipe | IPipeCategory | yes | | IPipeCategory object |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const pipeCategory = { id: '1', name: 'HVAC', color: '#FF0000' }
+
+atwin.setSelectedPipeCategory(pipeCategory)
+```
+
+### getSelectedPipeCategory()
+
+Gets the current pipe category for the pipe form.
+
+*Function Signature*
+```typescript
+function getSelectedPipeCategory(): IPipeCategory
+```
+-->
+
+<!-- ### setPipes()
+
+Set pipes value.
+
+*Function Signature*
+```typescript
+function setPipes(pipes: IPipe[]): IPipe[]
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| pipes | IPipe[] | yes | | Array of pipe objects |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const pipes = [
+  { id: '1', name: '6 inch duct', diameter: 6 },
+  { id: '2', name: '8 inch duct', diameter: 8 }
+]
+
+atwin.setPipes(pipes)
+```
+
+### setSelectedPipe() -->
+
+<!-- ### setSelectedPipe()
+
+Set selected pipes value.
+
+*Function Signature*
+```typescript
+function setSelectedPipe(pipe: IPipe): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| pipe | IPipe | yes | | The pipe object to set as active |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const pipe = { id: '1', name: '6 inch duct', diameter: 6 }
+
+atwin.setSelectedPipe(pipe)
+```
+
+### getSelectedPipe()
+
+Gets the current pipe for the pipe form.
+
+*Function Signature*
+```typescript
+function getSelectedPipe(): IPipe
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const selectedPipe = atwin.getSelectedPipe()
+console.log('Currently selected pipe:', selectedPipe)
+```
+-->
+
+<!-- ### setPipeIsDrawingMode()
+
+Set selected pipes value.
+
+*Function Signature*
+```typescript
+function setPipeIsDrawingMode(isDrawing: boolean): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| isDrawing | boolean | yes | | Whether pipe drawing mode should be enabled |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Enable pipe drawing mode
+atwin.setPipeIsDrawingMode(true)
+
+// Disable pipe drawing mode
+atwin.setPipeIsDrawingMode(false)
+```
+
+### getPipeIsDrawingMode() -->
+
+<!-- ### getPipeIsDrawingMode()
+
+Gets the current pipe for the pipe form.
+
+*Function Signature*
+```typescript
+function getPipeIsDrawingMode(): boolean
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const isDrawing = atwin.getPipeIsDrawingMode()
+console.log('Pipe drawing mode active:', isDrawing)
+```
+-->
+
+<!-- ### undoPipePath()
+
+Undo the last pipe path action.
+
+*Function Signature*
+```typescript
+function undoPipePath(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Undo the last pipe path action
+atwin.undoPipePath()
+```
+
+### redoPipePath()
+
+Redo the last undone pipe path action.
+
+*Function Signature*
+```typescript
+function redoPipePath(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Redo the last undone pipe path action
+atwin.redoPipePath()
+```
+-->
+
+<!-- ## Preview Modal
+
+Preview modal functions for rendering and managing preview interfaces, typically displayed as overlay dialogs or popups above the 3D scene. These modals can show previews of objects, properties, configurations, or information. Functions allow you to display content, toggle visibility, set action callbacks for user interactions, manage edit modes, and check visibility status of elements like polygons. Used for displaying detailed information, settings, or confirmations to users.
+
+### renderPreviewModal()
+
+Render a preview modal dialog with custom content.
+
+*Function Signature*
+```typescript
+function renderPreviewModal(content?: any, options?: ComponentOptions): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| content | any | optional | undefined | Content to display in the modal |
+| options | ComponentOptions | optional | undefined | Customization options for the modal |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const modalContent = {
+  title: 'Object Preview',
+  description: 'This is a preview of the selected object'
+}
+
+const options = {
+  width: 400,
+  height: 300
+}
+
+atwin.renderPreviewModal(modalContent, options)
+```
+
+### togglePreviewModal()
+
+Toggle the preview modal visibility between shown and hidden.
+
+*Function Signature*
+```typescript
+function togglePreviewModal(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Toggle preview modal visibility
+atwin.togglePreviewModal()
+```
+
+### closePreviewModal()
+
+Close the preview modal.
+
+*Function Signature*
+```typescript
+function closePreviewModal(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Close the preview modal
+atwin.closePreviewModal()
+```
+
+### setPreviewModalAction()
+
+Set the action callback for the preview modal. This callback is executed when the user performs an action in the modal.
+
+*Function Signature*
+```typescript
+function setPreviewModalAction(callback: Function): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| callback | Function | yes | | Function to execute on modal action |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const actionCallback = (data) => {
+  console.log('Modal action triggered:', data)
+}
+
+atwin.setPreviewModalAction(actionCallback)
+```
+
+### getIsPolygonVisible()
+
+Check if polygon is currently visible.
+
+*Function Signature*
+```typescript
+function getIsPolygonVisible(): boolean
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const isVisible = atwin.getIsPolygonVisible()
+console.log('Polygon visible:', isVisible)
+```
+
+### appendNotionUrlTagDescription()
+
+Append a notion URL to a tag description.
+
+*Function Signature*
+```typescript
+function appendNotionUrlTagDescription(tagId: string, notionUrl: string): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| tagId | string | yes | | ID of the tag |
+| notionUrl | string | yes | | URL to append to tag description |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const tagId = 'tag-123'
+const notionUrl = 'https://notion.so/page-123'
+
+atwin.appendNotionUrlTagDescription(tagId, notionUrl)
+```
+-->
+
+## Copy Object
+
+Copy object functions for managing object duplication operations, allowing users to create copies of existing 3D objects with optional transformations. When copying objects, you can specify position and rotation offsets to place the duplicate relative to the original. The system generates new unique IDs for copied objects and integrates them into the scene. This utilities help track the last copied object position to optimize subsequent copy operations.
+
+### clearLastCopiedObjectPosition()
+
+Sets _lastCopiedObjectPosition to undefined.
+
+*Function Signature*
+```typescript
+function clearLastCopiedObjectPosition(): void
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Clear the last copied object position
+atwin.clearLastCopiedObjectPosition()
+```