architwin 1.12.5 → 1.13.0

package/lib/types.d.ts

@@ -446,6 +446,8 @@ export interface ComponentOptions {
     polygonData?: PolygonData | undefined;
     wallHeight?: number | undefined;
     floorLevel?: number | undefined;
+    lineComponentType?: string | undefined;
+    id?: number | undefined;
 }
 export interface VectorCoords {
     object_position: Vector3;
@@ -731,7 +733,23 @@ export declare enum SPACE_EVENTS {
     CUSTOM_SWEEP_OFFSETY_UPDATED = "CUSTOM_SWEEP_OFFSETY_UPDATED",
     CUSTOM_MAP_SETTINGS_UPDATED = "CUSTOM_MAP_SETTINGS_UPDATED",
     SPACE_METADATA_RETRIEVED = "SPACE_METADATA_RETRIEVED",
-    TAG_MESSAGE_UNSEND = "TAG_MESSAGE_UNSEND"
+    RENDER_PIPE_CATEGORY = "RENDER_PIPE_CATEGORY",
+    PIPE_CATEGORY_REMOVED = "PIPE_CATEGORY_REMOVED",
+    PIPE_CATEGORY_SAVED = "PIPE_CATEGORY_SAVED",
+    PIPE_CATEGORY_SELECTED = "PIPE_CATEGORY_SELECTED",
+    PIPE_CATEGORY_ON_CHANGE = "PIPE_CATEGORY_ON_CHANGE",
+    PIPE_SAVED = "PIPE_SAVED",
+    PIPE_REMOVED = "PIPE_REMOVED",
+    PIPE_ON_CHANGE = "PIPE_ON_CHANGE",
+    PIPE_CLICKED = "PIPE_CLICKED",
+    PIPE_ADD = "PIPE_ADD",
+    PIPE_SELECTED = "PIPE_SELECTED",
+    DRAW_PIPE = "DRAW_PIPE",
+    DRAW_PIPE_UNDO = "DRAW_PIPE_UNDO",
+    DRAW_PIPE_REDO = "DRAW_PIPE_REDO",
+    PIPE_VERTEX_REMOVED = "PIPE_VERTEX_REMOVED",
+    TAG_MESSAGE_UNSEND = "TAG_MESSAGE_UNSEND",
+    PATH_UPDATED = "PATH_UPDATED"
 }
 export declare const enum TAG_COLOR {
     MAROON = "MAROON",
@@ -885,6 +903,7 @@ export interface IToolbarConfig {
             includeMeasurements?: boolean;
             includeViews?: boolean;
         };
+        pipe?: boolean;
         models?: boolean;
         minimap?: boolean;
         theme?: boolean;
@@ -1280,6 +1299,18 @@ export interface SpaceMetadata {
         };
     };
 }
+export interface PathConfig {
+    lineType: string;
+    verticeType: string;
+    lineTypeComponentConfig?: ComponentOptions;
+    verticeTypeComponentConfig?: ComponentOptions;
+}
+export interface ModelPayload {
+    mediaUrl: string;
+    objectType: string;
+    config?: ObjectConfig;
+    object_data?: I3DObject;
+}
 export declare enum COORDINATE_SYSTEM {
     MATTERPORT = "YUP",
     BIM = "ZUP"
@@ -1304,3 +1335,50 @@ export declare enum MAP_OPTIONS {
     DEFAULT_MAP = "Default Minimap",
     CUSTOM_MAP = "Custom Minimap"
 }
+export interface VetexData {
+    uuid: string;
+    name: string;
+    path: Array<Vector3>;
+}
+export interface IPipeCategory {
+    uuid: string;
+    space_uuid: string;
+    name: string;
+    parent_uuid: string;
+    json_data: string;
+    color?: string;
+    pipes: Array<IPipe>;
+    owner_uuid?: string;
+    created_on: Date;
+}
+export interface IPipe {
+    uuid: string;
+    space_uuid: string;
+    name: string;
+    category_uuid: string;
+    json_data: string;
+    created_on: Date;
+}
+export declare enum COLLAPSE {
+    TOGGLE_ID = "at-collapse-toggle-btn",
+    CONTENT_ID = "at-collapse-content",
+    ACTIVE = "active",
+    EXPAND = "expand",
+    TOGGLE = "toggle",
+    INACTIVE = "inactive",
+    LIST = "at-collapse-list",
+    HEADER = "at-collapse-header",
+    FORM = "at-collapse-form",
+    ITEM = "item"
+}
+export declare enum DRAWING_MODE {
+    ACTIVE = "active",
+    INACTIVE = "inactive"
+}
+export interface PipePayload {
+    uuid?: string | undefined;
+    space_uuid?: string | undefined;
+    name?: string | undefined;
+    parent_uuid?: string | undefined;
+    json_data: PolygonData;
+}

package/lib/types.js

@@ -107,7 +107,23 @@ export var SPACE_EVENTS;
     SPACE_EVENTS["CUSTOM_SWEEP_OFFSETY_UPDATED"] = "CUSTOM_SWEEP_OFFSETY_UPDATED";
     SPACE_EVENTS["CUSTOM_MAP_SETTINGS_UPDATED"] = "CUSTOM_MAP_SETTINGS_UPDATED";
     SPACE_EVENTS["SPACE_METADATA_RETRIEVED"] = "SPACE_METADATA_RETRIEVED";
+    SPACE_EVENTS["RENDER_PIPE_CATEGORY"] = "RENDER_PIPE_CATEGORY";
+    SPACE_EVENTS["PIPE_CATEGORY_REMOVED"] = "PIPE_CATEGORY_REMOVED";
+    SPACE_EVENTS["PIPE_CATEGORY_SAVED"] = "PIPE_CATEGORY_SAVED";
+    SPACE_EVENTS["PIPE_CATEGORY_SELECTED"] = "PIPE_CATEGORY_SELECTED";
+    SPACE_EVENTS["PIPE_CATEGORY_ON_CHANGE"] = "PIPE_CATEGORY_ON_CHANGE";
+    SPACE_EVENTS["PIPE_SAVED"] = "PIPE_SAVED";
+    SPACE_EVENTS["PIPE_REMOVED"] = "PIPE_REMOVED";
+    SPACE_EVENTS["PIPE_ON_CHANGE"] = "PIPE_ON_CHANGE";
+    SPACE_EVENTS["PIPE_CLICKED"] = "PIPE_CLICKED";
+    SPACE_EVENTS["PIPE_ADD"] = "PIPE_ADD";
+    SPACE_EVENTS["PIPE_SELECTED"] = "PIPE_SELECTED";
+    SPACE_EVENTS["DRAW_PIPE"] = "DRAW_PIPE";
+    SPACE_EVENTS["DRAW_PIPE_UNDO"] = "DRAW_PIPE_UNDO";
+    SPACE_EVENTS["DRAW_PIPE_REDO"] = "DRAW_PIPE_REDO";
+    SPACE_EVENTS["PIPE_VERTEX_REMOVED"] = "PIPE_VERTEX_REMOVED";
     SPACE_EVENTS["TAG_MESSAGE_UNSEND"] = "TAG_MESSAGE_UNSEND";
+    SPACE_EVENTS["PATH_UPDATED"] = "PATH_UPDATED";
 })(SPACE_EVENTS || (SPACE_EVENTS = {}));
 export var MEETING_SIDEBAR;
 (function (MEETING_SIDEBAR) {
@@ -151,3 +167,21 @@ export var MAP_OPTIONS;
     MAP_OPTIONS["DEFAULT_MAP"] = "Default Minimap";
     MAP_OPTIONS["CUSTOM_MAP"] = "Custom Minimap";
 })(MAP_OPTIONS || (MAP_OPTIONS = {}));
+export var COLLAPSE;
+(function (COLLAPSE) {
+    COLLAPSE["TOGGLE_ID"] = "at-collapse-toggle-btn";
+    COLLAPSE["CONTENT_ID"] = "at-collapse-content";
+    COLLAPSE["ACTIVE"] = "active";
+    COLLAPSE["EXPAND"] = "expand";
+    COLLAPSE["TOGGLE"] = "toggle";
+    COLLAPSE["INACTIVE"] = "inactive";
+    COLLAPSE["LIST"] = "at-collapse-list";
+    COLLAPSE["HEADER"] = "at-collapse-header";
+    COLLAPSE["FORM"] = "at-collapse-form";
+    COLLAPSE["ITEM"] = "item";
+})(COLLAPSE || (COLLAPSE = {}));
+export var DRAWING_MODE;
+(function (DRAWING_MODE) {
+    DRAWING_MODE["ACTIVE"] = "active";
+    DRAWING_MODE["INACTIVE"] = "inactive";
+})(DRAWING_MODE || (DRAWING_MODE = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.12.5",
+  "version": "1.13.0",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",

package/static/atwinui.css

@@ -75,8 +75,271 @@
     --button-bg-color: var(--bg-secondary);
     --button-border-color: var(--border-color);
     --button-font-weight: normal;
+
+    --bg-dark-gray: rgb(48, 48, 48);
+        /* pipe color category */
+    --bg-dark-red: rgb(130, 0, 0); 
+    --bg-red: rgb(255, 0, 0);
+    --bg-amber: rgb(250, 170, 0);
+    --bg-chartreuse: rgb(251, 255, 0);
+    --bg-light-chartreuse: rgb(237, 255, 0, 1);
+    --bg-light-green:rgb(137, 255, 0);
+    --bg-dark-green: rgb(0, 138, 0);
+    --bg-sky-blue:  rgb(169, 229, 255, 1);
+    --bg-purple: rgb(109, 0, 255);
+    --bg-dark-purple: rgb(56, 0, 152);
+
+}
+
+/*pipe  color  category*/
+.at_pipe_category-bg-dark-red {
+    background-color: var(--bg-dark-red);
+}
+
+.at_pipe_category-bg-red {
+    background-color: var(--bg-red);
+}
+
+.at_pipe_category-bg-amber {
+    background-color: var(--bg-amber);
+}
+
+.at_pipe_category-bg-light-chartreuse {
+    background-color: var(--bg-light-chartreuse);
+}
+
+.at_pipe_category-bg-chartreuse {
+    background-color: var(--bg-chartreuse);
+}
+
+.at_pipe_category-bg-light-green {
+    background-color: var(--bg-light-green);
+}
+
+.at_pipe_category-bg-dark-green {
+    background-color: var(--bg-dark-green);
+}
+
+.at_pipe_category-bg-sky-blue {
+    background-color: var(--bg-sky-blue);
+}
+
+.at_pipe_category-bg-purple {
+    background-color: var(--bg-purple);
+}
+
+.at_pipe_category-bg-dark-purple {
+    background-color: var(--bg-dark-purple);
+}
+
+/* end pipe color category  */
+
+.at_pipe-save-btn{
+    /* background: var(--bg-highlight-light); */
+    color: var(--text-color-light);
+    line-height: 20px;
+}
+
+/* pipe circle */
+.at_circle {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: inline-grid;
+  place-items: center;
+  position: relative;
+  color: white; /* for checkmark */
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.at_circle.selected::after {
+  content: "✓";
+  position: absolute;
+  color: black;
+  font-size: 20px;
+  font-weight: 900;
+}
+/* end circle */
+
+/* pipe classes */
+
+
+.at_dropdown-option{
+    transition: background-color 0.2s ease;
+}
+
+.at_dropdown-option.selected{
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_dropdown-option:hover{
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_locate_area_container {
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.2s ease;
+}
+
+.at_locate_area_container.selected {
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_locate_area_container:hover {
+    background-color: var(--bg-secondary-light);
+    color: var(--text-color-dark);
+    border-radius: 2px;
+}
+
+.at_pipe-dots-bg{
+    color: black;
+    line-height: 20px;
+}
+
+.at_draw_pipe_btn{
+    white-space: nowrap;
+    width: 100%;
+    font-weight: 900;
+}
+
+.at_pipe-vertex-bg{
+    /* background-color: var(--bg-lime-yellow); */
+    color: black;
+    line-height: 20px;
+    
+}
+
+
+.at_pipe_content{
+    background-color: var(--bg-dark-gray);
+    padding: 5px;
+    font-size: 12px;
+    text-align: center;
+}
+.at_pipe_container{
+    background-color: var(--bg-accent-forest);
+    padding: 10px;
+    border-radius: 10px;
+    /* height: 40vh; */
+}
+.at_pipe_category-container{
+    font-size: 35px;
+}
+
+.at_pipe_label {
+    position: absolute;
+    top: 20px; 
+    /* left: 12px;   */
+    text-align: left;
+    display: inline-block;
+    /* padding: 0 4px; */
+    height: 14px;
+    line-height: 14px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-light);
+    cursor: text;
+    transition: all .15s ease-in-out;
+}
+
+.at_pipe_input {
+    position: relative;
+    display: block;
+    width: 100%;
+    border: 0;
+    border-bottom: 1px solid var(--bg-highlight-light);
+    color: var(--text-color-light);
+    background-color: transparent;
+    margin: 0px auto;
+    /* padding: 6px 4px 4px 14px; */
+    height: 40px;
+    outline: none !important;
+    /* font-size: 14px; */
+    transition: all .1s ease-in-out;
+}
+.at_pipe_input:hover, .at_pipe_input:focus { border-bottom: 2px solid var(--bg-highlight-light); }
+
+.at_pipe_input:valid + label, .at_pipe_input:focus + label { 
+    top: -4px;
+    color: var(--text-color-light);
+    font-weight: bold;
+}
+/* end pipe classes */
+
+/* collapse classes */
+
+.at_collapse_container{
+    width: 100%;
+    /* height: calc(100vh - 298px); */
+    overflow: auto;
+}
+
+.at_collapsible_section{
+    margin-bottom: 0 20px;
+}
+
+.at_collapse-content{
+    /* height: 400px; */
 }
 
+.at_collapsible_container {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    font-family: Arial, sans-serif;
+}
+
+.at_collapsible_header {
+
+    cursor: pointer;
+    border-bottom: none;
+}
+
+.at_collapsible_content {
+    height: 0;
+    overflow: hidden;
+    border: none;
+}
+
+.at_collapsible_content.expand {
+    height: 100%; 
+}
+
+.at-collapse-toggle-btn{
+    display: inline-block;
+    transform: rotate(-90deg); 
+}
+
+.at-collapse-toggle-btn.active{
+    transform: rotate(0deg); 
+}
+
+.at_collapsible_content div {
+    margin: 0;
+}
+
+.at_collapsible_content span{
+    cursor: pointer;
+}
+
+/* end collapse classed */
+
+
+
+.at_align_item_end{
+    align-items: end
+}
+
+
+
 .at_topLeft {
     top: var(--position-top);
     left: var(--position-left);

package/static/utility.css

@@ -1,5 +1,70 @@
 /* Width Utility Classes */
 
+/* .at_h-full-screen{
+  height: calc(100vh - 64px);
+} */
+
+.at_has_border{
+  border: 3px solid ;
+}
+.at_h-responsive-64{
+ height: calc(100vh - 64px);
+}
+
+.at_h-responsive-10{
+ height: calc(100vh - 10px);
+}
+
+.at_h-responsive-224{
+ height: calc(100vh - 224px);
+}
+
+.at_h-responsive-250{
+ height: calc(100vh - 250px);
+}
+
+.at_h-responsive-268{
+ height: calc(100vh - 268px);
+}
+.at_h-responsive-290{
+height: calc(100vh - 290px)
+}
+
+.at_h-responsive-304{
+height: calc(100vh - 304px)
+}
+
+.at_h-responsive-650{
+   height: calc(100vh - 650px);
+}
+
+.at_p-2{
+  padding: 0.5rem;
+}
+
+.at_px-1{
+  padding:0 0.2rem;
+}
+
+.at_px-2{
+  padding:0 0.5rem;
+}
+
+.at_py-2{
+  padding:0.5rem 0;
+}
+
+.at_py-3{
+  padding:0.75rem 0;
+}
+
+.at_pt-2{
+  padding-top:0.5rem ;
+}
+
+.at_mb-2{
+  margin-bottom: 5px;
+}
 .at_w-auto {
   width: auto;
 }
@@ -242,6 +307,9 @@ width: 100vw;
   .at_text_xl {
     font-size: 1.25rem;
   }
+  .at_text-xxl{
+    font-size: 32px;
+  } 
 
   .at_text_white {
     color: white;
@@ -295,11 +363,19 @@ width: 100vw;
   .at_mb_1 {
     margin-bottom: 0.25rem !important;
   }
-
+  
   .at_mb_2 {
     margin-bottom: 0.5rem !important;
   }
   
+  .at_mb_3 {
+    margin-bottom:  0.75rem !important;
+  }
+
+   .at_mb_4 {
+    margin-bottom: 1rem !important;
+  }
+  
   .at_gap_1 {
     gap: 0.25rem;
   }
@@ -324,6 +400,10 @@ width: 100vw;
     display: inline-block
   }
 
+  .no_scroll{
+    overflow: hidden !important;
+  }
+
   /* Spinner container style */
   .at_spinner {
     border: 8px solid grey;