architwin 1.12.4 → 1.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ONBOARDING.md +115 -0
- package/lib/architwin.d.ts +3 -2
- package/lib/architwin.js +1 -1
- package/lib/atwinui/components/toolbar/tagMessagingPane.d.ts +4 -0
- package/lib/atwinui/components/toolbar/tagMessagingPane.js +117 -10
- package/lib/atwinui/events.js +31 -14
- package/lib/tag.d.ts +1 -1
- package/lib/tag.js +2 -0
- package/lib/types.d.ts +2 -1
- package/lib/types.js +1 -0
- package/package.json +1 -1
- package/static/atwinui.css +4 -0
package/ONBOARDING.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# ArchiTwin Library Onboarding
|
|
2
|
+
|
|
3
|
+
Welcome to the ArchiTwin library! This document provides an introduction to the codebase for new developers.
|
|
4
|
+
|
|
5
|
+
## Introduction
|
|
6
|
+
|
|
7
|
+
The ArchiTwin library is a powerful tool that enhances the Matterport Bundle SDK with additional features and a ready-to-use UI. It simplifies the development process by providing pre-built methods for interacting with the Matterport SDK, as well as the Zoom SDK. The library also includes custom Three.js loaders for Matterport, enabling advanced 3D object manipulation.
|
|
8
|
+
|
|
9
|
+
The main goal of this library is to provide a comprehensive solution for developers working with the Matterport SDK, offering both a robust API and a user-friendly interface.
|
|
10
|
+
|
|
11
|
+
## Getting Started
|
|
12
|
+
|
|
13
|
+
To start working with the ArchiTwin library, you will need to have Node.js and npm installed on your machine. Once you have cloned the repository, you can install the dependencies by running the following command:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
After the installation is complete, you can build the project by running:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm run build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
This will compile the TypeScript code and create the necessary JavaScript files in the `lib` directory.
|
|
26
|
+
|
|
27
|
+
## Codebase Structure
|
|
28
|
+
|
|
29
|
+
The ArchiTwin library is organized into the following directories:
|
|
30
|
+
|
|
31
|
+
- **`bundle`**: Contains the Matterport Bundle SDK and other third-party libraries.
|
|
32
|
+
- **`lib`**: Contains the compiled JavaScript code.
|
|
33
|
+
- **`node_modules`**: Contains the project's dependencies.
|
|
34
|
+
- **`src`**: Contains the TypeScript source code.
|
|
35
|
+
- **`static`**: Contains static assets such as images and CSS files.
|
|
36
|
+
|
|
37
|
+
### `src` Directory
|
|
38
|
+
|
|
39
|
+
The `src` directory is where most of the development work takes place. It is further divided into the following subdirectories:
|
|
40
|
+
|
|
41
|
+
- **`atwinui`**: Contains the UI components of the library.
|
|
42
|
+
- **`loaders`**: Contains the custom Three.js loaders for Matterport.
|
|
43
|
+
- **`math`**: Contains math-related utility functions.
|
|
44
|
+
- **`meeting`**: Contains the Zoom SDK integration.
|
|
45
|
+
|
|
46
|
+
## Development Guidelines
|
|
47
|
+
|
|
48
|
+
To maintain a consistent code style and quality, please follow these guidelines when working on the ArchiTwin library:
|
|
49
|
+
|
|
50
|
+
- **Coding Style**: Follow the existing coding style and patterns in the codebase.
|
|
51
|
+
- **JSDoc Comments**: Write JSDoc comments for all new functions and methods.
|
|
52
|
+
- **Type Checking**: Use TypeScript to ensure type safety.
|
|
53
|
+
- **Linting**: Run the linter before committing your changes.
|
|
54
|
+
|
|
55
|
+
## UI Development
|
|
56
|
+
|
|
57
|
+
The UI components of the ArchiTwin library are located in the `src/atwinui` directory. When creating new UI components, please follow these guidelines:
|
|
58
|
+
|
|
59
|
+
- **Component Structure**: Each UI component should be in its own directory, with a TypeScript file for the component's logic. Styles should be handled via CSS classes.
|
|
60
|
+
- **Component Naming**: Use a consistent naming convention for your components.
|
|
61
|
+
- **Component Registration**: Register your new components in the `initToolbarUI` function in `src/atwinui/index.ts`.
|
|
62
|
+
- **CSS Styling**: Before creating new CSS classes, always check `static/atwinui.css` and `static/utility.css` to see if an existing class already serves your purpose.
|
|
63
|
+
- **CSS Variables**: Make use of the CSS variables defined in `static/atwinui.css` as much as possible to maintain a consistent look and feel across the UI.
|
|
64
|
+
- **Utility Classes**: For general-purpose styling, use the utility classes in `static/utility.css`. For component-specific styles, create new classes in `static/atwinui.css`.
|
|
65
|
+
|
|
66
|
+
### Creating a New UI Component
|
|
67
|
+
|
|
68
|
+
To create a new UI component, you can follow these steps:
|
|
69
|
+
|
|
70
|
+
1. Create a new directory for your component in `src/atwinui`.
|
|
71
|
+
2. Create a TypeScript file for your component's logic.
|
|
72
|
+
3. If needed, add new CSS classes to `static/atwinui.css` or `static/utility.css`, making sure to use existing CSS variables and classes as much as possible.
|
|
73
|
+
4. Register your new component in the `initToolbarUI` function in `src/atwinui/index.ts`.
|
|
74
|
+
|
|
75
|
+
## Loaders
|
|
76
|
+
|
|
77
|
+
The custom Three.js loaders for Matterport are located in the `src/loaders` directory. These loaders are responsible for loading and parsing 3D models and other assets.
|
|
78
|
+
|
|
79
|
+
**Notice**: Before working on any of the files in the `loaders` directory, you must have a good understanding of Three.js.
|
|
80
|
+
|
|
81
|
+
## Available Scripts
|
|
82
|
+
|
|
83
|
+
The following scripts are available in the `package.json` file:
|
|
84
|
+
|
|
85
|
+
- **`build`**: Builds the project.
|
|
86
|
+
- **`deploy:package`**: Deploys the package (ONLY FOR PERSON RESPONSIBLE FOR PUBLISHING TO NPM).
|
|
87
|
+
|
|
88
|
+
## Dependencies
|
|
89
|
+
|
|
90
|
+
The ArchiTwin library uses the following dependencies:
|
|
91
|
+
|
|
92
|
+
- **`@aws-sdk/client-s3`**: AWS SDK for S3 (no longer in use).
|
|
93
|
+
- **`@mdi/font`**: Material Design Icons font.
|
|
94
|
+
- **`@superviz/matterport-plugin`**: SuperViz Matterport plugin.
|
|
95
|
+
- **`@superviz/sdk`**: SuperViz SDK (no longer in use, package abandoned by devs).
|
|
96
|
+
- **`@zoom/videosdk`**: Zoom Video SDK.
|
|
97
|
+
- **`axios`**: Promise-based HTTP client (library no longer makes application specific api calls and should never do so).
|
|
98
|
+
- **`buffer`**: Buffer implementation for the browser.
|
|
99
|
+
- **`date-fns`**: Modern JavaScript date utility library.
|
|
100
|
+
- **`i18next`**: Internationalization framework.
|
|
101
|
+
- **`i18next-browser-languagedetector`**: i18next language detector.
|
|
102
|
+
- **`i18next-http-backend`**: i18next HTTP backend.
|
|
103
|
+
- **`jsrsasign`**: JavaScript RSA signing library.
|
|
104
|
+
- **`jsrsasign-util`**: Utility library for jsrsasign.
|
|
105
|
+
- **`jszip`**: Library for creating, reading and editing .zip files.
|
|
106
|
+
- **`jszip-utils`**: Utility functions for JSZip.
|
|
107
|
+
- **`lit`**: Simple library for building fast, lightweight web components.
|
|
108
|
+
- **`loglevel`**: Minimal lightweight logging for JavaScript.
|
|
109
|
+
- **`merge-images`**: Merge images together.
|
|
110
|
+
- **`notyf`**: A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
|
|
111
|
+
- **`pdfjs-dist`**: PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.
|
|
112
|
+
- **`short-unique-id`**: A fast and simple library for generating short, unique IDs.
|
|
113
|
+
- **`socket.io-client`**: Socket.IO client.
|
|
114
|
+
- **`ts-loader`**: TypeScript loader for webpack.
|
|
115
|
+
- **`tweakpane`**: A compact pane to tweak parameters and see results in real-time.
|
package/lib/architwin.d.ts
CHANGED
|
@@ -604,6 +604,7 @@ declare function renderTag(payload: {
|
|
|
604
604
|
}, addTo_tags?: boolean, iframeId?: string): Promise<MpSdk.Tag.TagData>;
|
|
605
605
|
declare function addTag(tagData: MpSdk.Tag.TagData): ITag;
|
|
606
606
|
declare function getMpTags(): ITag[];
|
|
607
|
+
declare function getTagDataCollection(): MpSdk.Dictionary<MpSdk.Tag.TagData>;
|
|
607
608
|
declare function disposeTag(payload: {
|
|
608
609
|
tagId: string;
|
|
609
610
|
}): Promise<void>;
|
|
@@ -616,7 +617,7 @@ declare function disposeTags(iframeId?: string): Promise<void>;
|
|
|
616
617
|
declare function attachTagMedia(payload: {
|
|
617
618
|
tagId: string;
|
|
618
619
|
attachments: string[];
|
|
619
|
-
}): Promise<
|
|
620
|
+
}): Promise<string[]>;
|
|
620
621
|
declare function detachTagMedia(payload: {
|
|
621
622
|
tagId: string;
|
|
622
623
|
attachmentIds: string[];
|
|
@@ -761,4 +762,4 @@ declare function setSpaceMetadata(payload: SpaceMetadata | null): void;
|
|
|
761
762
|
* @returns
|
|
762
763
|
*/
|
|
763
764
|
declare function getSpaceMetadata(): SpaceMetadata;
|
|
764
|
-
export { _atwin, _config, _mpConfig, tags, sweeps, selectedObject, previousObjTransform, currentObjTransform, actionHistory, state, _tags, _tagCategories, _tagMessageRecepients, _space, _spaceId, _api, _pointerCoord, _3DXObjects, _meetingParticipants, _generatedObjectIds, tagColors, domMousePosition, isFitScreenOccupied, isCdnMapDataAvailable, minimap, _modelDetails, _onMouseClickInstance, transformHistory, _partitionNodes, initAtwinApi, getAtwinSdk, connectSpace, disconnectSpace, clearActionHistory, getSweeps, getCurrentSweep, getCurrentSweepPosition, moveToSweep, getNearbySweeps, getAllSweeps, getCurrentCameraPose, getCurrentCameraZoom, getCameraPosition, getCurrentFloor, moveInDirection, cameraLookAt, cameraPan, cameraRotate, cameraSetRotation, getViewMode, setViewMode, captureSpaceScreenshot, captureScreenshotAndCameraDetails, captureCurrentView, cameraZoomBy, cameraZoomReset, cameraZoomTo, getNearbyObjects, setTransformMode, setSelectedObject, clearSelectedObject, revertTransform, setTransformControls, removeTransformControls, setRenderDistance, addObject, getObject, addObjectToSpace, addMediaScreen, attachMediaScreenContent, updateObject, updateShowcaseObject, deleteObject, deleteShowcaseObject, copyObject, replaceObject, getTargetPosition, setObjectTransformation, setPointerCoordinates, addTextMarkupScreen, setTextMarkupScreenContent, goTo3dx, goToModel, hasTimeElapsed, getSelectedObject, renderAvatar, setSpaceAvatar, get3DXObjects, clear3DXObjects, setLibrary, getLibrary, disposeModel, disposeAllModels, renderInSpaceMediaScreen, goToPosition, goToParticipant, getNearestSweepFromObject, cancelModelPlacement, renderViewpointMarker, toggleViewpointVisibility, convertDegRotationToEuler, isToolbarFeatureEnabled, goToMPOrigin, pauseVideo, playVideo, setVideoPlayback, setAnimationState, showMinimap, hideMinimap, getMapConfig, addTag, getTags, gotoTag, renderTag, disposeTag, disposeTags, getMpTags, getMpTag, showTags, attachTagMedia, detachTagMedia, moveTag, editTagLabel, editTagDescription, editTagStem, editTagIcon, editTagColor, saveTag, rotateCameraToObject, setModelVisibility, tagStateSubscriber, setTagIcon, setTagCategories, setUserAssignedCategories, getUserAssignedCategories, setTagMessageRecepients, getTagMessageRecepients, setTagMessages, getTagMessages, setSelectedTagUuid, getSelectedTagUuid, setCurrentSpace, toggleFitToScreen, getFloors, getLabels, renderMeetingSidebar, createMeetingTemplate, joinMeetingTemplate, meet, dispatchSpaceEvent, subscribeSpaceEvent, unsubscribeSpaceEvent, registerCustomSpaceEvent, clearSpaceEventQueue, initSocketIo, socketEmit, getParticipants, followParticipant, unFollowParticipant, enableHUD, disableHUD, getMediaScreenHUDs, canSetHud, saveMediaScreenHud, removeMediaScreenHud, enableFitScreen, disableFitScreen, initToolbarUI, themeManager, convertToEuler, disableSweeps, enableSweep, disableSweep, tubeLineType, _sceneObject, _tubes, drawPath, toggleSpaceNavigation, startDraw, exitDraw, cancelDraw, setPolygonPath, setTubeLinePath, getCurrentTubeLine, renderPolygon, toggleWallVisibility, toggleMeshChildrenVisibility, toggleFloorVisibility, getChildrenOfModel, toggleVerticeRingVisibility, setPolygonFloorOffset, getPolygonFloorOffset, setFloorBaseHeight, clearFloorBaseHeight, enableVerticeControls, deleteEdge, disposePathLine, getFloorBaseHeight, setMeshChildrenMaterialProperty, undoDrawAction, redoDrawAction, addUndoDrawActions, setWallBaseHeight, getWallBaseHeight, clearWallBaseHeight, setSpacePartitionNodes, setCurrentPolygon, getSpaceId, getCurrentPolygon, getPathBetweenSweeps, moveAlongPath, _atwinConnections, convertZupToYup, convertYupToZup, getRelativePosition, getOriginalWorldPosition, setSpaceMetadata, getSpaceMetadata, getAssetUrl };
|
|
765
|
+
export { _atwin, _config, _mpConfig, tags, sweeps, selectedObject, previousObjTransform, currentObjTransform, actionHistory, state, _tags, _tagCategories, _tagMessageRecepients, _space, _spaceId, _api, _pointerCoord, _3DXObjects, _meetingParticipants, _generatedObjectIds, tagColors, domMousePosition, isFitScreenOccupied, isCdnMapDataAvailable, minimap, _modelDetails, _onMouseClickInstance, transformHistory, _partitionNodes, initAtwinApi, getAtwinSdk, connectSpace, disconnectSpace, clearActionHistory, getSweeps, getCurrentSweep, getCurrentSweepPosition, moveToSweep, getNearbySweeps, getAllSweeps, getCurrentCameraPose, getCurrentCameraZoom, getCameraPosition, getCurrentFloor, moveInDirection, cameraLookAt, cameraPan, cameraRotate, cameraSetRotation, getViewMode, setViewMode, captureSpaceScreenshot, captureScreenshotAndCameraDetails, captureCurrentView, cameraZoomBy, cameraZoomReset, cameraZoomTo, getNearbyObjects, setTransformMode, setSelectedObject, clearSelectedObject, revertTransform, setTransformControls, removeTransformControls, setRenderDistance, addObject, getObject, addObjectToSpace, addMediaScreen, attachMediaScreenContent, updateObject, updateShowcaseObject, deleteObject, deleteShowcaseObject, copyObject, replaceObject, getTargetPosition, setObjectTransformation, setPointerCoordinates, addTextMarkupScreen, setTextMarkupScreenContent, goTo3dx, goToModel, hasTimeElapsed, getSelectedObject, renderAvatar, setSpaceAvatar, get3DXObjects, clear3DXObjects, setLibrary, getLibrary, disposeModel, disposeAllModels, renderInSpaceMediaScreen, goToPosition, goToParticipant, getNearestSweepFromObject, cancelModelPlacement, renderViewpointMarker, toggleViewpointVisibility, convertDegRotationToEuler, isToolbarFeatureEnabled, goToMPOrigin, pauseVideo, playVideo, setVideoPlayback, setAnimationState, showMinimap, hideMinimap, getMapConfig, addTag, getTags, gotoTag, renderTag, disposeTag, disposeTags, getMpTags, getTagDataCollection, getMpTag, showTags, attachTagMedia, detachTagMedia, moveTag, editTagLabel, editTagDescription, editTagStem, editTagIcon, editTagColor, saveTag, rotateCameraToObject, setModelVisibility, tagStateSubscriber, setTagIcon, setTagCategories, setUserAssignedCategories, getUserAssignedCategories, setTagMessageRecepients, getTagMessageRecepients, setTagMessages, getTagMessages, setSelectedTagUuid, getSelectedTagUuid, setCurrentSpace, toggleFitToScreen, getFloors, getLabels, renderMeetingSidebar, createMeetingTemplate, joinMeetingTemplate, meet, dispatchSpaceEvent, subscribeSpaceEvent, unsubscribeSpaceEvent, registerCustomSpaceEvent, clearSpaceEventQueue, initSocketIo, socketEmit, getParticipants, followParticipant, unFollowParticipant, enableHUD, disableHUD, getMediaScreenHUDs, canSetHud, saveMediaScreenHud, removeMediaScreenHud, enableFitScreen, disableFitScreen, initToolbarUI, themeManager, convertToEuler, disableSweeps, enableSweep, disableSweep, tubeLineType, _sceneObject, _tubes, drawPath, toggleSpaceNavigation, startDraw, exitDraw, cancelDraw, setPolygonPath, setTubeLinePath, getCurrentTubeLine, renderPolygon, toggleWallVisibility, toggleMeshChildrenVisibility, toggleFloorVisibility, getChildrenOfModel, toggleVerticeRingVisibility, setPolygonFloorOffset, getPolygonFloorOffset, setFloorBaseHeight, clearFloorBaseHeight, enableVerticeControls, deleteEdge, disposePathLine, getFloorBaseHeight, setMeshChildrenMaterialProperty, undoDrawAction, redoDrawAction, addUndoDrawActions, setWallBaseHeight, getWallBaseHeight, clearWallBaseHeight, setSpacePartitionNodes, setCurrentPolygon, getSpaceId, getCurrentPolygon, getPathBetweenSweeps, moveAlongPath, _atwinConnections, convertZupToYup, convertYupToZup, getRelativePosition, getOriginalWorldPosition, setSpaceMetadata, getSpaceMetadata, getAssetUrl };
|