architwin 1.13.1 → 1.13.3

package/lib/atwinui/components/toolbar/i18n.js

@@ -192,7 +192,9 @@ i18n
                 "ConfirmDeletePipeCategory": "Are you sure you want to delete this pipe category?",
                 "DeletePipe": "Delete pipe",
                 "ConfirmDeletePipe": "Are you sure you want to delete this pipe?",
-                "AllCategory": "All Category"
+                "PipeCategoryName": "Enter pipe type",
+                "HideShowAllPipes": "Hide/Show All Pipes",
+                "PipePlaceHolder": "Ex: Gas Pipe",
             }
         },
         ja: {
@@ -364,7 +366,7 @@ i18n
                 "SelectPipeType": "配管種別選択",
                 "AddPipeType": "配管種別を追加",
                 "EditPipeType": "配管種別を編集",
-                "PipeTypeName": "改版種別名",
+                "PipeTypeName": "配管種別名",
                 "CategoryColor": "配管色",
                 "NoPipesToDisplay": "表示する快感がありません",
                 "DrawPipe": "配管を描画",
@@ -384,7 +386,9 @@ i18n
                 "ConfirmDeletePipeCategory": "この配管種別を削除してもよろしいですか？",
                 "DeletePipe": "配管を削除",
                 "ConfirmDeletePipe": "この快感を削除してもよろしいですか？",
-                "AllCategory": "「すべてのカテゴリ」"
+                "PipeCategoryName": "配管種別を入力",
+                "HideShowAllPipes": "全ての配管を表示/非表示",
+                "PipePlaceHolder": "ガス配管"
             }
         }
     },

package/lib/atwinui/components/toolbar/pipeFormPane.d.ts

@@ -1,7 +1,6 @@
 import { IPipeCategory, IPipe } from "../../../types";
 export declare class PipeForm {
     private category;
-    private mode;
     private collapse;
     private readonly colorCategory;
     constructor();

package/lib/atwinui/components/toolbar/pipeFormPane.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { _3DXObjects, _pipeCategories, _pipes, _selectedPipe, _selectedPipeCategory, cancelDraw, dispatchSpaceEvent, disposeModel, enableVerticeControls, getCurrentCameraPose, moveToSweep, redoDrawAction, renderPath, setModelVisibility, setPathLineOptions, setPipeCategories, setPipeIsDrawingMode, setPipes, startDraw, undoDrawAction } from "../../../architwin";
+import { _3DXObjects, _pipes, _selectedPipe, _selectedPipeCategory, _undoDrawActions, cancelDraw, dispatchSpaceEvent, disposeModel, enableVerticeControls, getCurrentCameraPose, moveToSweep, redoDrawAction, renderPath, setModelVisibility, setPathLineOptions, setPipeIsDrawingMode, setPipes, startDraw, undoDrawAction } from "../../../architwin";
 import i18n from './i18n';
 import { COLLAPSE, SPACE_EVENTS } from "../../../types";
 import { Collapse } from "./collapse";
@@ -36,10 +36,10 @@ export class PipeForm {
                 <div id="at_pipe_title"></div>
             </div>
             <div class="">
-            <input id="at_pipe_type_name_input" class="at_pipe_input" type="text" name="pipe-name" required>
-                <label class="at_pipe_label" for="at_pipe_type_name_input">${i18n.t('PipeTypeName')}</label>
+                <span class="">${i18n.t('PipeTypeName')}</span>
+                <input id="at_pipe_type_name_input" class="at_pipe_input" type="text" name="pipe-name" placeholder="${i18n.t('PipePlaceHolder')}" required>
             </div>
-            <div class="at_h-responsive-224">
+            <div class="at_h-responsive-264">
                 <div class="at_py-3">
                     <span class="">${i18n.t('CategoryColor')}</span>
                     <div class="at_py-3 ">
@@ -81,11 +81,18 @@ export class PipeForm {
         const element = document.createElement('div');
         element.id = 'at-pipe-pane';
         element.setAttribute('data-cy', 'at-pipe-pane');
-        element.innerHTML = pipes != undefined && (pipes === null || pipes === void 0 ? void 0 : pipes.filter(pipe => pipe.category_uuid === category.uuid).length)
+        element.innerHTML = pipes != undefined && (pipes === null || pipes === void 0 ? void 0 : pipes.filter(pipe => (pipe === null || pipe === void 0 ? void 0 : pipe.category_uuid) === category.uuid).length)
             ? `
             <div class="at_collapse-content at_flex at_flex_column at_field at_scrollable_container at_h-responsive-650 at_mb_3">
-                ${pipes === null || pipes === void 0 ? void 0 : pipes.filter(pipe => pipe.category_uuid === category.uuid).sort((a, b) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()).map(pipe => {
-                var _a, _b, _c;
+                ${pipes
+                .filter(pipe => pipe.category_uuid === category.uuid)
+                .sort((a, b) => {
+                const nameCompare = a.name.localeCompare(b.name);
+                if (nameCompare !== 0)
+                    return nameCompare;
+                return new Date(a.created_on).getTime() - new Date(b.created_on).getTime();
+            }).map(pipe => {
+                var _a;
                 return `
                     <div id="at-collapsible-${COLLAPSE.HEADER}-${pipe.uuid}" class="at_accent_forest at_rounded">
                         <div id="at-input-name-container-${pipe.uuid}" class="at_hidden">
@@ -100,6 +107,7 @@ export class PipeForm {
                                     <div class="at_px-2 at_flex at_justify_center at_items_center at_w-half at_mx-w-8 at_accent_forest at_rounded">
                                         <span id="at_pipe_name_label_${pipe.uuid}" class="at_px-2">${pipe.name}</span>
                                         <div id="${COLLAPSE.TOGGLE_ID}"></div>
+
                                         <span class="mdi mdi-pen" id="at-edit-btn-${COLLAPSE.HEADER}-${pipe.uuid}" data-uuid="${pipe.uuid}"></span>
                                     </div>
                                     <span class="mdi mdi-trash-can-outline at_text_xl" id="at-delete-btn-${COLLAPSE.HEADER}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.HEADER}"></span>
@@ -109,23 +117,40 @@ export class PipeForm {
                             
                             <div class="at_collapsible_content" id="${COLLAPSE.CONTENT_ID}">
                                 <div class="at_p-2">
-                                    ${JSON.parse(pipe.json_data) != undefined && JSON.parse(pipe.json_data).vertices.length ?
-                    (_c = (_b = JSON.parse(pipe.json_data)) === null || _b === void 0 ? void 0 : _b.vertices) === null || _c === void 0 ? void 0 : _c.map((vertex, index) => {
+                                ${(() => {
+                    console.log("TEMPLERE  ==>", pipe);
+                    let parsed, vertices;
+                    try {
+                        parsed = JSON.parse(pipe === null || pipe === void 0 ? void 0 : pipe.json_data);
+                        vertices = parsed === null || parsed === void 0 ? void 0 : parsed.vertices;
+                    }
+                    catch (e) {
+                        return `
+                                            <div class="at_flex at_justify_center at_items_center at_flex_column">
+                                                <div><span class="mdi mdi-ray-start-vertex-end  at_pipe_category-container"></span></div>
+                                                <div>${i18n.t('NoVertexToDisplay')}</div>
+                                            </div>`;
+                    }
+                    if (!Array.isArray(vertices) || vertices.length === 0) {
+                        return `
+
+                            
+                                            <div class="at_flex at_justify_center at_items_center at_flex_column">
+                                                <div><span class="mdi mdi-ray-start-vertex-end  at_pipe_category-container"></span></div>
+                                                <div>${i18n.t('NoVertexToDisplay')}</div>
+                                            </div>`;
+                    }
+                    return vertices.map((vertex, index) => {
                         var _a;
                         return `
-                    
-                                        <div class="at_flex at_justify_between at_items_center at_accent_forest at_px-2 at_rounded at_mb_1" id="at-collapsible-${COLLAPSE.LIST}-${vertex.x}">
-                                            <span id="at-vertex-color-indicator-${index}" class="mdi mdi-vector-line at_text_xl at_pipe-vertex-bg at_rounded" style="background-color:${(_a = JSON.parse(category.json_data)) === null || _a === void 0 ? void 0 : _a.color}"></span>
-                                            <span class="at_mr_3"> ${i18n.t('Vertex')} ${index + 1}</span>
-                                            <span class="mdi mdi-trash-can-outline at_text_xl" id="at-delete-btn-${COLLAPSE.LIST}-${vertex.x}" data-uuid="${vertex.x}" data-index="${index}" data-type="${COLLAPSE.LIST}"></span>
-                                        </div>
-                                    `;
-                    }).join('')
-                    :
-                        `<div class="at_flex at_justify_center at_items_center at_flex_column">
-                                    <div><span class="mdi mdi-ray-start-vertex-end  at_pipe_category-container"></span></div>
-                                    <div>${i18n.t('NoVertexToDisplay')}</div>
-                                </div>`}
+                                            <div class="at_flex at_justify_between at_items_center at_accent_forest at_px-2 at_rounded at_mb_1" id="at-collapsible-${COLLAPSE.LIST}-${vertex.x}">
+                                                <span id="at-vertex-color-indicator-${index}" class="mdi mdi-vector-line at_text_xl at_pipe-vertex-bg at_rounded" style="background-color:${(_a = JSON.parse(category.json_data)) === null || _a === void 0 ? void 0 : _a.color}"></span>
+                                                <span class="at_mr_3">${i18n.t('Vertex')} ${index + 1}</span>
+                                                <span class="mdi mdi-trash-can-outline at_text_xl" id="at-delete-btn-${COLLAPSE.LIST}-${vertex.x}" data-uuid="${vertex.x}" data-index="${index}" data-type="${COLLAPSE.LIST}"></span>
+                                            </div>
+                                        `;
+                    }).join('');
+                })()}
                                 </div>
                             </div>
                         </div>
@@ -146,7 +171,6 @@ export class PipeForm {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.resetInteractionState();
-            // this.category = category
             const pipeNameInput = document.getElementById('at_pipe_type_name_input');
             if (!pipeNameInput)
                 return;
@@ -167,6 +191,7 @@ export class PipeForm {
         });
     }
     observeInput() {
+        //bug the value of pipes gone when pipe
         const categoryNameInput = document.getElementById('at_pipe_type_name_input');
         observeInputToUpdate(categoryNameInput, () => _selectedPipeCategory, 'name');
     }
@@ -180,7 +205,7 @@ export class PipeForm {
                     const uuid = target.dataset.uuid;
                     const selectedPipe = _pipes.find(pipe => pipe.uuid == uuid);
                     const parsed = JSON.parse((_a = selectedPipe.json_data) !== null && _a !== void 0 ? _a : '{}');
-                    this.setEditMode(uuid);
+                    this.setEditMode(selectedPipe);
                     if (parsed.vertices) {
                         moveToSweep(parsed.sweepId, parsed.rotation);
                         _3DXObjects.filter(obj => obj.object.uuid != uuid).forEach(targetObj => {
@@ -194,13 +219,13 @@ export class PipeForm {
         });
     }
     // enables edit mode for a selected pipe
-    setEditMode(uuid) {
+    setEditMode(pipe) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_SELECTED, uuid);
-            // this.renderPipePath(_selectedPipe.uuid)
+            const uuid = pipe.uuid;
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_ON_CHANGE, pipe); //review
             this.collapse.setExpand(true);
-            this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
+            this.populateFormCollapse(_selectedPipeCategory, pipe);
             this.savePipe();
             this.delete();
             const inputName = document.getElementById(`at-input-name-container-${uuid}`);
@@ -223,7 +248,7 @@ export class PipeForm {
             });
         });
     }
-    //setup  save edited pipe listener
+    //setup  SAVE_PIPE edited pipe listener
     savePipe() {
         document.querySelectorAll(`[id^="at-save-edit-btn-${COLLAPSE.HEADER}"]`).forEach(btn => {
             btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
@@ -236,14 +261,13 @@ export class PipeForm {
                 }
                 const input = document.getElementById(`at_pipe_name_input_${uuid}`);
                 _selectedPipe.name = input.value;
-                console.log("SAVE PIPE =>", _selectedPipe);
                 yield this.savePiPeEventHandler();
             }));
         });
     }
     savePiPeEventHandler() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_SAVED, Object.assign({}, _selectedPipe));
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_ON_CHANGE, Object.assign({}, _selectedPipe));
             ~(_pipes.findIndex((c, i) => c.uuid === _selectedPipe.uuid && (setPipes((_pipes[i] = _selectedPipe, _pipes)), 1)));
             notyf.success(`${i18n.t('PipeSavedSuccessfully')}`);
             this.init(_selectedPipeCategory, _pipes);
@@ -253,10 +277,9 @@ export class PipeForm {
         return __awaiter(this, void 0, void 0, function* () {
             const updated = { vertices: payload, sweepId: getCurrentCameraPose().sweep, rotation: getCurrentCameraPose().rotation };
             _selectedPipe.json_data = JSON.stringify(updated);
-            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_SAVED, Object.assign({}, _selectedPipe));
-            ~(_pipes.findIndex((c, i) => c.uuid === _selectedPipe.uuid && (setPipes((_pipes[i] = _selectedPipe, _pipes)), 1)));
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_ON_CHANGE, Object.assign({}, _selectedPipe));
             this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
-            this.setEditMode(_selectedPipe.uuid);
+            this.setEditMode(_selectedPipe);
         });
     }
     // save category listener
@@ -270,11 +293,13 @@ export class PipeForm {
                 notyf.error(`${i18n.t('SaveTheCurrentPipeBeforeProceeding')}`);
                 return;
             }
-            // const payload = await this.extractCategoryPayload()
+            if (!_selectedPipeCategory.name) {
+                notyf.error(`${i18n.t('PipeCategoryName')}`);
+                return;
+            }
             this.getDrawButton(null, 'white').classList.remove('active');
             yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SAVED, Object.assign({}, _selectedPipeCategory));
-            ~(_pipeCategories.findIndex((c, i) => c.uuid === _selectedPipeCategory.uuid && (setPipeCategories((_pipeCategories[i] = _selectedPipeCategory, _pipeCategories)), 1)));
-            notyf.success(`${i18n.t('CategorySuccessfullySaved')}`);
+            yield waitForChange(() => _pipes, { interval: 500, timeout: 10000 });
             yield toggleDisplayPane(target.id);
         }));
     }
@@ -284,19 +309,17 @@ export class PipeForm {
             return;
         btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
             const target = e.currentTarget;
-            const titleElement = document.getElementById('at_pipe_title');
-            const pipes = _pipes.filter(p => p.category_uuid === _selectedPipeCategory.uuid);
-            console.log("delete _selectedPipeCategory", pipes.length);
-            if (titleElement.textContent !== i18n.t('EditPipeType')) {
-                dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_REMOVED, _selectedPipeCategory.uuid);
-                ~(_pipeCategories.findIndex((c, i) => c.uuid === _selectedPipeCategory.uuid && (setPipeCategories((_pipeCategories.splice(i, 1), _pipeCategories)), 1)));
-            }
-            yield toggleDisplayPane(target.id);
+            toggleDisplayPane(target.id);
         }));
     }
     // delete pipe/vertex listener
     delete() {
         document.querySelectorAll('[id^="at-delete-btn"]').forEach(el => {
+            var _a;
+            if (this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black').classList.contains('active')) {
+                el.classList.add("at_hide");
+                return;
+            }
             el.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
                 const target = e.currentTarget;
                 const type = target.dataset.type;
@@ -321,11 +344,9 @@ export class PipeForm {
                         else {
                             dispatchSpaceEvent(SPACE_EVENTS.PIPE_VERTEX_REMOVED, uuid);
                             const index = Number(target.dataset.index);
-                            console.log("INDEx =>", index);
                             this.renderPipePath(_selectedPipe.uuid);
                             if (this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black').classList.contains('active')) {
                                 const targetObj = _3DXObjects.find(obj => obj.object.uuid == _selectedPipe.uuid);
-                                // deleteVertex(index)
                                 enableVerticeControls(targetObj.component);
                             }
                             notyf.success(`${i18n.t('VertexDeletedSuccessfully!')}`);
@@ -373,16 +394,17 @@ export class PipeForm {
                     if (!targetObject)
                         return;
                     enableVerticeControls(targetObject.component);
-                    this.setEditMode(_selectedPipe.uuid);
+                    this.setEditMode(_selectedPipe);
                 }
                 else {
-                    yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_SAVED, {});
-                    const newPipe = yield waitForChange(() => _selectedPipe);
-                    this.setEditMode(newPipe.uuid);
+                    yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_ADD, {});
+                    this.setEditMode(_selectedPipe);
                 }
-                console.log("selectedPipeCategory. ==>", _selectedPipeCategory);
             }
             else {
+                document.querySelectorAll(`[id^="at-delete-btn-${COLLAPSE.LIST}"]`).forEach(el => {
+                    el.classList.remove('at_disabled');
+                });
                 this.savePiPeEventHandler();
                 cancelDraw();
                 setPipeIsDrawingMode(false);
@@ -398,14 +420,14 @@ export class PipeForm {
         return __awaiter(this, void 0, void 0, function* () {
             yield dispatchSpaceEvent(SPACE_EVENTS.DRAW_PIPE_UNDO);
             this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
-            this.setEditMode(_selectedPipe.uuid);
+            this.setEditMode(_selectedPipe);
             undoDrawAction();
         });
     }
     redoEventHandler() {
         dispatchSpaceEvent(SPACE_EVENTS.DRAW_PIPE_REDO, _selectedPipe);
         this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
-        this.setEditMode(_selectedPipe.uuid);
+        this.setEditMode(_selectedPipe);
         // this.renderPipePath()
         redoDrawAction();
     }
@@ -419,6 +441,8 @@ export class PipeForm {
                 notyf.error(`${i18n.t('DrawingModeIsCurrentlyInactive')}`);
                 return;
             }
+            if (_undoDrawActions.length == 0)
+                return;
             this.undoEventHandler();
         }));
     }
@@ -433,6 +457,8 @@ export class PipeForm {
                 notyf.error(`${i18n.t('DrawingModeIsCurrentlyInactive')}`);
                 return;
             }
+            if (_undoDrawActions.length == 0)
+                return;
             this.redoEventHandler();
         }));
     }
@@ -462,8 +488,6 @@ export class PipeForm {
                 document.querySelectorAll('[id*="at-vertex-color-indicator"]').forEach(el => {
                     el.style.backgroundColor = bgColor;
                 });
-                yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SAVED, Object.assign({}, _selectedPipeCategory));
-                ~(_pipeCategories.findIndex((c, i) => c.uuid === _selectedPipeCategory.uuid && (setPipeCategories((_pipeCategories[i] = _selectedPipeCategory, _pipeCategories)), 1)));
                 if (!this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black').classList.contains('active')) {
                     const uuid = _selectedPipe ? _selectedPipe.uuid : null;
                     this.renderPipePath(uuid);

package/lib/atwinui/components/toolbar/pipeListPane.d.ts

@@ -1,8 +1,6 @@
 export declare class PipeList {
     private form;
     private collapse;
-    private categories;
-    private pipes;
     constructor();
     renderPane(): HTMLElement;
     private createCollapseElement;

package/lib/atwinui/components/toolbar/pipeListPane.js

@@ -19,8 +19,6 @@ import { setModalAction, toggleModal } from "./modal";
 export class PipeList {
     // Initialize collapse UI and pipe form 
     constructor() {
-        this.categories = [];
-        this.pipes = [];
         this.collapse = new Collapse(undefined, { expand: false });
         this.form = new PipeForm();
     }
@@ -38,22 +36,20 @@ export class PipeList {
             <span>${i18n.t('Pipes')}</span>
         </div>
         <div class="at_form_container ">
-        <div class="at_field at_flex_column" style="${_pipeCategories ? '' : 'display: none;'}">
-            <div class="">
-                <span>${i18n.t('SelectPipeType')}</span>
-            </div>
-            <div id="at-custom-pipe-category-dropdown" data-cy="at-custom-pipe-category-dropdown">
-                <div id="at-pipe-category-dropdown" class=" at_dropdown at_flex at_flex_row at_space_between">    
-                    <div class="at_dropdown_toggle" id="at-pipe-category-dropdown-toggle" data-cy="at-pipe-category-dropdown-toggle">${i18n.t('NoSelection')}</div>
-                    <span class="mdi mdi-triangle-down at_chevron" id="at-pipe-category-chevron" data-cy="at-pipe-category-chevron"></span>
-                </div>
-                <div style="position:absolute">
-                    <div class="at_dropdown_options" id="at-pipe-category-options" data-cy="at-pipe-category-options">
+            <div class="at_field at_flex_column" style="${_pipeCategories ? '' : 'display: none;'}">
+                <label for="">${i18n.t('SelectPipeType')}</label>
+                <div  id="at-custom-pipe-category-dropdown" data-cy="at-custom-pipe-category-dropdown">
+                    <div id="at-pipe-category-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+                        <div class="at_dropdown_toggle" id="at-pipe-category-dropdown-toggle" data-cy="at-pipe-category-dropdown-toggle">${i18n.t('NoSelection')}</div>
+                        <span class="mdi mdi-triangle-down at_chevron" id="at-pipe-category-chevron" data-cy="at-pipe-category-chevron"></span>
+                    </div>
+                    <div style="position:absolute;">
+                        <div class="at_dropdown_options" id="at-pipe-category-options" data-cy="at-category-options">
+
+                        </div>
                     </div>
                 </div>
             </div>
-
-        </div>
         </div>
         <div class="at_form_container at_field ">
         <div class="at_collapsible_container" id="at-dropdown_container">
@@ -92,9 +88,15 @@ export class PipeList {
                 </div>
                 <div class="at_collapsible_content at_secondary_azusa" id="${COLLAPSE.CONTENT_ID}">
                     <div class="at_p-2">
-                        
                         ${pipes != undefined && pipes.filter(pipe => pipe.category_uuid === category.uuid).length ?
-                pipes.filter(pipe => pipe.category_uuid === category.uuid).sort((a, b) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()).map(pipe => `
+                pipes
+                    .filter(pipe => pipe.category_uuid === category.uuid)
+                    .sort((a, b) => {
+                    const nameCompare = a.name.localeCompare(b.name);
+                    if (nameCompare !== 0)
+                        return nameCompare;
+                    return new Date(a.created_on).getTime() - new Date(b.created_on).getTime();
+                }).map(pipe => `
                         <div class="at_locate_area_container at_flex at_justify_end at_gap_2" id="at-collapsible-${COLLAPSE.LIST}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}">
                             <div id="at-locate-area-${COLLAPSE.LIST}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}">
                             <span>${pipe.name}</span>
@@ -128,10 +130,14 @@ export class PipeList {
     //initialize pane, data binding and some handlers
     init() {
         return __awaiter(this, void 0, void 0, function* () {
+            // re render data
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_INIT);
+            const [categories, pipes] = yield waitForChange(() => _pipeCategories, () => _pipes, { interval: 300, timeout: 10000 });
+            const element = this.createCollapseElement(categories, pipes);
+            // setupDevtools(_pipes)
             const container = document.getElementById('at-pipe-type-collapse-html-element');
             if (!container)
                 return;
-            const element = this.createCollapseElement(_pipeCategories, _pipes);
             this.collapse.setElement(element);
             const rendered = this.collapse.render();
             container.replaceChildren(rendered);
@@ -191,12 +197,10 @@ export class PipeList {
             return;
         btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
             const target = e.currentTarget;
-            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SAVED, {});
-            //wait until the _selectedPipeCategory change  state value
-            const newCategory = yield waitForChange(() => _selectedPipeCategory);
-            console.log("CLICKED ADD CATEGORY =>", newCategory);
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_ADD, {});
+            console.log("CLICKED ADD CATEGORY =>", _selectedPipeCategory);
             this.form.setPipeTitle("AddPipeType");
-            yield this.form.init(newCategory);
+            yield this.form.init(_selectedPipeCategory);
             yield toggleDisplayPane(target.id);
         }));
     }
@@ -207,7 +211,8 @@ export class PipeList {
                 const target = e.currentTarget;
                 const uuid = target.dataset.uuid;
                 this.form.setPipeTitle("EditPipeType");
-                yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SELECTED, uuid);
+                const category = _pipeCategories.find(categories => categories.uuid === uuid);
+                yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SELECTED, category);
                 yield this.form.init(_selectedPipeCategory, _pipes);
                 yield toggleDisplayPane(target.id);
             }));
@@ -329,36 +334,32 @@ export class PipeList {
         });
     }
     initDropdown(options) {
-        // Ensure unique options
         const uniqueOptions = [i18n.t("NoSelection"), ...[...new Set(options)]];
         const toggleBtn = document.getElementById('at-custom-pipe-category-dropdown');
         const optionsContainer = document.getElementById('at-pipe-category-options');
         const toggleLabel = toggleBtn.querySelector('#at-pipe-category-dropdown-toggle');
         toggleLabel.textContent = i18n.t("NoSelection");
-        toggleBtn.onclick = () => {
-            const isNowOpen = optionsContainer.classList.toggle('open');
-            if (isNowOpen) {
+        // Toggle dropdown
+        toggleBtn.onclick = (e) => {
+            e.stopPropagation(); // prevent bubbling
+            const isOpen = optionsContainer.classList.contains('open');
+            if (!isOpen) {
+                optionsContainer.classList.add('open');
                 optionsContainer.innerHTML = '';
                 uniqueOptions.forEach(opt => {
                     const div = document.createElement('div');
-                    div.style.width = '228px';
-                    div.style.cursor = "pointer";
                     div.textContent = opt;
-                    div.classList.add('at_dropdown-option');
-                    // Mark the default selected (All Category)
-                    if (opt === toggleLabel.textContent) {
-                        div.classList.add('selected');
-                    }
-                    div.onclick = () => {
+                    div.classList.add('at_option');
+                    div.onclick = (event) => {
+                        event.stopPropagation(); // prevent toggleBtn click again
+                        // CLOSE the dropdown
+                        optionsContainer.classList.remove('open');
+                        optionsContainer.innerHTML = '';
+                        // Set selected label
                         toggleLabel.textContent = opt;
-                        // Remove .selected from all
-                        document.querySelectorAll('.at_dropdown-option.selected').forEach(el => el.classList.remove('selected'));
-                        div.classList.add('selected');
-                        console.log("OPT", opt);
                         const filteredCategory = opt === i18n.t('NoSelection')
                             ? _pipeCategories
                             : _pipeCategories.filter(category => category.name === opt);
-                        // Get all selected category UUIDs (can be multiple if same name)
                         const selectedCategoryUUIDs = filteredCategory.map(cat => cat.uuid);
                         _pipes.forEach(pipe => {
                             const isVisible = selectedCategoryUUIDs.includes(pipe.category_uuid);
@@ -375,14 +376,20 @@ export class PipeList {
                         const rendered = this.collapse.render();
                         container.replaceChildren(rendered);
                         this.eventHandler();
-                        optionsContainer.classList.remove('open');
                     };
                     optionsContainer.appendChild(div);
                 });
             }
             else {
+                optionsContainer.classList.remove('open');
                 optionsContainer.innerHTML = '';
             }
         };
+        document.addEventListener('click', (event) => {
+            if (!toggleBtn.contains(event.target)) {
+                optionsContainer.classList.remove('open');
+                optionsContainer.innerHTML = '';
+            }
+        });
     }
 }

package/lib/atwinui/components/toolbar/screenSharePane.d.ts

@@ -0,0 +1,18 @@
+import { ScreenShareRequest, ScreenShareSessionUser, ScreenShareUser } from '../../../types';
+export declare function renderScreenSharePane(): HTMLElement;
+export declare function renderUsersList(users: ScreenShareUser[]): void;
+export declare function renderOnlineUserRow(user: ScreenShareUser): HTMLTableRowElement;
+export declare function renderOfflineUserRow(user: ScreenShareUser): HTMLTableRowElement;
+export declare function handleClickEventUserRow(): void;
+export declare function renderSharingSpaceDetail(user: ScreenShareSessionUser): void;
+export declare function handleClickEventBackToUserListLink(): void;
+export declare function renderScreenShareRequestModal(request: ScreenShareRequest): void;
+export declare function handleInputEventSelectPointerSettings(): void;
+export declare function handleClickEventEndSessionBtn(): void;
+export declare function handleScreenShareUsersUpdated(payload: {
+    screen_share_users: ScreenShareUser[];
+    space_data: Record<string, any>;
+}): void;
+export declare function handleScreenShareEndSessionEvent(): void;
+export declare function handleScreenShareBackUserListPane(): void;
+export declare function handleScreenShareAcceptRequest(payload: ScreenShareRequest): void;