architwin 1.14.1 → 1.14.3

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

@@ -16,6 +16,7 @@ import { Notyf } from 'notyf';
 import i18n from './i18n';
 import { getBasepoint, getCoordinateSystem, getMeasurementUnit, getMPBasepoint, getScaleFactor } from "./actionSettingsPane";
 import { convertYupScaleToZupScale } from "../../../worldConversion";
+import { toggleActionBarButtons } from "../../components/toolbar";
 let activeCard, activeLibraryCard;
 let _basePath = '../../../../architwin/static';
 export function renderObjectCard(payload, objectComponent) {
@@ -161,6 +162,10 @@ export function setActiveCard(cardId) {
             //@ts-expect-error
             transformHistory.addAction(selected.object.id, selected.node.position, selected.node.obj3D.rotation, selected.node.scale);
         }
+        if (_mpConfig.toolbarConfig) {
+            toggleActionBarButtons('at-redo-action-btn', transformHistory.canRedo(selected.object.id));
+            toggleActionBarButtons('at-undo-action-btn', transformHistory.canUndo(selected.object.id));
+        }
     });
 }
 export function clearActiveCard() {

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

@@ -196,6 +196,12 @@ i18n
                 "HideShowAllPipes": "Hide/Show All Pipes",
                 "Pipe": "Pipe",
                 "Vertex": "Vertex",
+                "ConfirmDeleteVertex": "Are you sure you want to delete this vertex?",
+                "DeleteVertex": "Delete vertex",
+                "Ascending": "Ascending",
+                "Descending": "Descending",
+                "Newest": "Newest",
+                "Oldest": "Oldest",
                 "ScreenShare": "Screen Share",
                 "Users": "Users",
                 "EndSession": "End Session",
@@ -390,7 +396,7 @@ i18n
                 "EditPipeType": "矢印マーカー種別を編集",
                 "PipeTypeName": "矢印マーカー名",
                 "CategoryColor": "矢印マーカー色",
-                "NoPipesToDisplay": "表示する快感がありません",
+                "NoPipesToDisplay": "表示する矢印マーカーがありません",
                 "DrawPipe": "	矢印マーカーを描画",
                 "NoVertexToDisplay": "表示する頂点がありません",
                 "NoPipesTypeToDisplay": "表示する矢印マーカー種別がありません",
@@ -412,6 +418,12 @@ i18n
                 "HideShowAllPipes": "全ての矢印マーカーを表示/非表示",
                 "Pipe": "矢印マーカー",
                 "Vertex": "頂点",
+                "ConfirmDeleteVertex": "この頂点を削除してもよろしいですか？",
+                "DeleteVertex": "削除",
+                "Ascending": "オブジェクト名称昇順",
+                "Descending": "オブジェクト名称降順",
+                "Newest": "新しく登録された順",
+                "Oldest": "古く登録された順",
                 "Screen Share": "画面共有",
                 "Users": "ユーザー",
                 "EndSession": "画面共有を終了",

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

@@ -51,9 +51,9 @@ export function renderMenuBar(iFrame) {
         <span class="mdi mdi-arrow-decision" id="at-pipe-btn" data-cy="at-pipe-btn" target-pane="at-pipe-list-pane"></span>
         <div class="at_icon_tooltip" data-cy="at-tooltip-pipe">${i18n.t('Pipes')}</div>
     </div>
-    <div class="at_sidebar_button_icon" style="display:${isThemeEnabled ? 'block' : 'none'}">
-        <span class="mdi mdi-palette" id="at-theme-picker-btn" data-cy="at-theme-picker-btn" target-pane="at-theme-pane"></span>
-        <div class="at_icon_tooltip" data-cy="at-tooltip-theme">${i18n.t('Theme')}</div>
+    <div class="at_sidebar_button_icon" style="display:${isSpaceScreenSharingEnabled ? 'block' : 'none'}">
+        <span class="mdi mdi-monitor-multiple" id="at-screen-share-btn" data-cy="at-screen-share-pane" target-pane="at-screen-share-pane"></span>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-screen-share">${i18n.t('Screen Share')}</div>
     </div>
     <div class="at_sidebar_button_icon" style="display:${isRoomCreationEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-ruler-square-compass" id="at-room-creation-btn" data-cy="at-room-creation-btn" target-pane="at-room-tree-pane"></span>
@@ -63,14 +63,14 @@ export function renderMenuBar(iFrame) {
         <img class="mdi at_bim_settings_img" src="${bimImageIcon}" alt="bim" id="at-settings-btn" data-cy="at-settings-btn" target-pane="at-settings-pane"/>
         <div class="at_icon_tooltip" data-cy="at-tooltip-settings">${i18n.t('Settings')}</div>
     </div>
+    <div class="at_sidebar_button_icon" style="display:${isThemeEnabled ? 'block' : 'none'}">
+        <span class="mdi mdi-palette" id="at-theme-picker-btn" data-cy="at-theme-picker-btn" target-pane="at-theme-pane"></span>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-theme">${i18n.t('Theme')}</div>
+    </div>
     <div class="at_sidebar_button_icon" style="display:${isGeneralSettingsEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-cog-outline" id="at-general-setting-btn" data-cy="at-general-setting-btn" target-pane="at-general-setting-pane"></span>
         <div class="at_icon_tooltip" data-cy="at-tooltip-general-setting">${i18n.t('General Settings')}</div>
     </div>
-    <div class="at_sidebar_button_icon" style="display:${isSpaceScreenSharingEnabled ? 'block' : 'none'}">
-        <span class="mdi mdi-monitor-multiple" id="at-screen-share-btn" data-cy="at-screen-share-pane" target-pane="at-screen-share-pane"></span>
-        <div class="at_icon_tooltip" data-cy="at-tooltip-screen-share">${i18n.t('Screen Share')}</div>
-    </div>
     `;
     return menuBarElement;
 }

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

@@ -1,12 +1,12 @@
 import { convertMeasurement, degreesToRadians, percentToScale, radiansToDegrees, scaleToPercent, useCapitalizeFirstLetter } from "../../../utils";
-import { getSelectedObject, setObjectTransformation, get3DXObjects, _mpConfig, _3DXObjects, isToolbarFeatureEnabled, actionHistory, transformHistory } from "../../../architwin";
+import { getSelectedObject, setObjectTransformation, get3DXObjects, _3DXObjects, isToolbarFeatureEnabled } from "../../../architwin";
 import { COORDINATE_SYSTEM, UNITS } from "../../../types";
 import { convertZupToYup, convertYupToZup, getOffsetPositionFromBasepoint, convertYupScaleToZupScale, convertZupScaleToYupScale } from "../../../worldConversion";
 import { getScaleFactor, getMeasurementUnit, getBasepoint, getCoordinateSystem, isAdjust, getMPBasepoint, getRotationUnit } from "./actionSettingsPane";
 import { Notyf } from 'notyf';
 import log from 'loglevel';
 import i18n from "./i18n";
-import { toggleActionBarButtons } from "../../components/toolbar";
+// import { toggleActionBarButtons } from "../../components/toolbar"
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500 });
 export let activeModelControlPane = false;
 export let modelControlPane;
@@ -290,23 +290,23 @@ export function getCoordinateValues() {
     transform.object_scale = transformType === 'scale' ? mpScale : selectedObject.node.scale;
     transform.object_rotation = transformType === 'rotate' ? mpRotation : selectedObject.object.object_rotation;
     console.log("caroline input transform", transform, formCoords);
-    if (transform && formCoords) {
-        console.log("caroline input undo coordinates", transform, formCoords);
-        setObjectTransformation(selectedObject.node, transform);
-        //Add to the action history so it can be reverse with undo or redo
-        console.log("caroline input undo test", formCoords);
-        const currentTransform = JSON.stringify(formCoords);
-        if (currentTransform) {
-            console.log("caroline input current transform", transform, currentTransform);
-            actionHistory.push(currentTransform);
-            // @ts-expect-error
-            transformHistory.addAction(selectedObject.object.id, transform.object_position, transform.object_rotation, transform.object_scale);
-        }
-        if (_mpConfig.toolbarConfig) {
-            toggleActionBarButtons('at-redo-action-btn', transformHistory.canRedo(selectedObject.object.id));
-            toggleActionBarButtons('at-undo-action-btn', transformHistory.canUndo(selectedObject.object.id));
-        }
-    }
+    // if (transform && formCoords) {
+    //     console.log("caroline input undo coordinates", transform, formCoords)
+    //     setObjectTransformation(selectedObject.node, transform)
+    //     //Add to the action history so it can be reverse with undo or redo
+    //     console.log("caroline input undo test", formCoords)
+    //     const currentTransform = JSON.stringify(formCoords)
+    //     if (currentTransform) {
+    //         console.log("caroline input current transform", transform, currentTransform)
+    //         actionHistory.push(currentTransform)
+    //         // @ts-expect-error
+    //         transformHistory.addAction(selectedObject.object.id, transform.object_position, transform.object_rotation, transform.object_scale)   
+    //     }
+    //     if (_mpConfig.toolbarConfig) {
+    //         toggleActionBarButtons('at-redo-action-btn',transformHistory.canRedo(selectedObject.object.id))
+    //         toggleActionBarButtons('at-undo-action-btn',transformHistory.canUndo(selectedObject.object.id))
+    //     }
+    // }
     console.log("getCoordinateValues rotation quaternion values", selectedObject.node.quaternion);
     return transform;
 }

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

@@ -8,5 +8,5 @@ export declare function removeObjectCard(elementId: string): void;
 export declare function updateObjectCard(objectCards: HTMLElement, payload: IShowcaseObject): void;
 export declare function renderObjectList(cardList: Array<IShowcaseObject>, objectComponents?: Array<Scene.IComponent>): void;
 export declare const sortShowcaseObjects: (items: IShowcaseObject[], options: SortConfig) => IShowcaseObject[];
-export declare function updateSelectedObjectSortOption(textSortOption: string): void;
+export declare function updateSelectedObjectSortOption(sortOption: string): void;
 export declare function resetSelectedObjectSortOption(): void;

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

@@ -39,14 +39,14 @@ export function renderObjectListPane(cardList) {
             <div class="at_button at_ghost" id="at-models-list-view-btn" data-cy="at-models-list-view-btn">
                 <span class="mdi mdi-list-box"></span>
             </div>
-            <!-- <div id="at-object-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
+            <div id="at-object-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
                 <span id="at-object-sort-options-tooltip" class="at_custom_tooltip">
-                    <p class="at_object_sort_option at_sort_option_selected">Ascending</p>
-                    <p class="at_object_sort_option">Descending</p>
-                    <p class="at_object_sort_option">Newest</p>
-                    <p class="at_object_sort_option">Oldest</p>
+                    <p class="at_object_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
+                    <p class="at_object_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
+                    <p class="at_object_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
+                    <p class="at_object_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
                 </span>
-            </div> -->
+            </div>
         </div>
         <div class="at_scrollable_container at_h-min-60" id="at-object-cards" data-cy="at-object-cards">
 
@@ -260,12 +260,12 @@ export const sortShowcaseObjects = (items, options) => {
         return options.order === 'desc' ? -comparison : comparison;
     });
 };
-export function updateSelectedObjectSortOption(textSortOption) {
-    selectedObjectSortOption = sortObjectOptions[textSortOption] || { by: 'label', order: 'asc' };
+export function updateSelectedObjectSortOption(sortOption) {
+    selectedObjectSortOption = sortObjectOptions[sortOption] || { by: 'label', order: 'asc' };
     const tooltip = document.getElementById('at-object-sort-options-tooltip');
     const options = tooltip.querySelectorAll('.at_object_sort_option');
     options.forEach((option) => {
-        if (option.innerText === textSortOption) {
+        if (option.dataset.sort === sortOption) {
             option.classList.add('at_sort_option_selected');
         }
         else {
@@ -281,7 +281,7 @@ export function resetSelectedObjectSortOption() {
         const options = tooltip.querySelectorAll('.at_object_sort_option');
         if (options) {
             options.forEach((option) => {
-                if (option.innerText === 'Ascending') {
+                if (option.dataset.sort === 'Ascending') {
                     option.classList.add('at_sort_option_selected');
                 }
                 else {

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

@@ -16,6 +16,8 @@ export declare class PipeForm {
     save(): void;
     cancel(): void;
     delete(): void;
+    private handlePipeDelete;
+    private handleVertexDelete;
     draw(): void;
     undoEventHandler(): Promise<void>;
     redoEventHandler(): void;

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, _pathConfig, _pipes, _selectedPipe, _selectedPipeCategory, _undoDrawActions, cancelDraw, dispatchSpaceEvent, disposeModel, enableVerticeControls, getCurrentCameraPose, moveToSweep, redoDrawAction, renderPath, setModelVisibility, setPathLineOptions, setPipeIsDrawingMode, setPipes, startDraw, undoDrawAction } from "../../../architwin";
+import { _3DXObjects, _pathConfig, _pipes, _selectedPipe, _selectedPipeCategory, cancelDraw, dispatchSpaceEvent, disposeModel, enableVerticeControls, getCurrentCameraPose, moveToSweep, pathHistory, redoPipePath, renderPath, setPathLineOptions, setPipeIsDrawingMode, setPipes, startDraw, undoPipePath } from "../../../architwin";
 import i18n from './i18n';
 import { COLLAPSE, SPACE_EVENTS } from "../../../types";
 import { Collapse } from "./collapse";
@@ -79,7 +79,7 @@ export class PipeForm {
     // Creates collapse pipe  under a category
     createCollapseElement(category, pipes) {
         const element = document.createElement('div');
-        element.id = 'at-pipe-pane';
+        element.id = 'at-pipe-form-collapse';
         element.setAttribute('data-cy', 'at-pipe-pane');
         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)
             ? `
@@ -118,7 +118,6 @@ export class PipeForm {
                             <div class="at_collapsible_content" id="${COLLAPSE.CONTENT_ID}">
                                 <div class="at_p-2">
                                 ${(() => {
-                    console.log("TEMPLERE  ==>", pipe);
                     let parsed, vertices;
                     try {
                         parsed = JSON.parse(pipe === null || pipe === void 0 ? void 0 : pipe.json_data);
@@ -160,7 +159,7 @@ export class PipeForm {
             </div>
         ` : `
             <div class="at_flex at_justify_center at_items_center at_flex_column at_h-responsive-650">
-                <div><span class="mdi mdi-pipe-disconnected at_pipe_category-container"></span></div>
+                <div><span class="mdi mdi-arrow-decision at_pipe_category-container"></span></div>
                 <div> ${i18n.t('NoPipesToDisplay')}</div>
             </div>
             `;
@@ -210,7 +209,7 @@ export class PipeForm {
                         moveToSweep(parsed.sweepId, parsed.rotation);
                         _3DXObjects.filter(obj => obj.object.uuid != uuid).forEach(targetObj => {
                             if (targetObj) {
-                                setModelVisibility(targetObj.object.id);
+                                disposeModel(targetObj);
                             }
                         });
                     }
@@ -278,7 +277,7 @@ export class PipeForm {
             const updated = { vertices: payload, sweepId: getCurrentCameraPose().sweep, rotation: getCurrentCameraPose().rotation };
             _selectedPipe.json_data = JSON.stringify(updated);
             yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_ON_CHANGE, Object.assign({}, _selectedPipe));
-            this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
+            // this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
             this.setEditMode(_selectedPipe);
         });
     }
@@ -324,47 +323,65 @@ export class PipeForm {
                 const target = e.currentTarget;
                 const type = target.dataset.type;
                 const uuid = target.dataset.uuid;
+                const isHeader = type === COLLAPSE.HEADER;
+                const config = {
+                    title: i18n.t(isHeader ? 'DeletePipe' : 'DeleteVertex'),
+                    description: i18n.t(isHeader ? 'ConfirmDeletePipe' : 'ConfirmDeleteVertex'),
+                    buttonLabel: i18n.t('YesDelete'),
+                };
                 toggleModal();
-                setModalAction({
-                    title: `${i18n.t('DeletePipe')}`,
-                    description: `${i18n.t('ConfirmDeletePipe')}`,
-                    buttonLabel: `${i18n.t('YesDelete')}`
-                }, () => {
-                    var _a;
-                    if (uuid) {
-                        if (type == COLLAPSE.HEADER) {
-                            dispatchSpaceEvent(SPACE_EVENTS.PIPE_REMOVED, uuid);
-                            const targetObj = _3DXObjects.find(obj => obj.object.uuid == uuid);
-                            if (targetObj) {
-                                disposeModel(targetObj);
-                            }
-                            notyf.success(`${i18n.t('PipeSuccessfullyDeleted')}`);
-                            toggleModal(false);
-                        }
-                        else {
-                            dispatchSpaceEvent(SPACE_EVENTS.PIPE_VERTEX_REMOVED, uuid);
-                            const index = Number(target.dataset.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);
-                                enableVerticeControls(targetObj.component);
-                            }
-                            notyf.success(`${i18n.t('VertexDeletedSuccessfully!')}`);
-                            toggleModal(false);
-                        }
-                        this.collapse.removeElement(uuid, type);
-                    }
-                });
+                setModalAction(config, () => __awaiter(this, void 0, void 0, function* () {
+                    dispatchSpaceEvent(isHeader ? SPACE_EVENTS.PIPE_REMOVED : SPACE_EVENTS.PIPE_VERTEX_REMOVED, uuid);
+                    yield waitForChange(() => (isHeader ? _pipes : Object.assign({}, _selectedPipe)), { interval: 500, timeout: 10000 });
+                    isHeader ? this.handlePipeDelete(uuid) : this.handleVertexDelete(uuid);
+                    toggleModal(false);
+                    this.collapse.removeElement(uuid, type);
+                }));
             }));
         });
     }
+    handlePipeDelete(uuid) {
+        if (!_pipes.some(p => p.category_uuid === _selectedPipeCategory.uuid)) {
+            document.getElementById('at-pipe-form-collapse').innerHTML = `
+            <div class="at_flex at_justify_center at_items_center at_flex_column at_h-responsive-650">
+                <div><span class="mdi mdi-arrow-decision at_pipe_category-container"></span></div>
+                <div> ${i18n.t('NoPipesToDisplay')}</div>
+            </div>
+            `;
+        }
+        const obj = _3DXObjects.find(o => o.object.uuid === uuid);
+        if (obj)
+            disposeModel(obj);
+        notyf.success(i18n.t('PipeDeletedSuccessfully'));
+    }
+    handleVertexDelete(uuid) {
+        var _a, _b, _c;
+        if (((_b = (_a = JSON.parse(_selectedPipe.json_data)) === null || _a === void 0 ? void 0 : _a.vertices) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+            document.getElementById(`${COLLAPSE.CONTENT_ID}`).innerHTML = `
+                <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>
+            `;
+        }
+        else {
+            this.renderPipePath(_selectedPipe.uuid);
+        }
+        if (this.getDrawButton((_c = JSON.parse(_selectedPipeCategory.json_data)) === null || _c === void 0 ? void 0 : _c.color, 'black').classList.contains('active')) {
+            const targetObj = _3DXObjects.find(obj => obj.object.uuid == _selectedPipe.uuid);
+            if (!targetObj)
+                return;
+            enableVerticeControls(targetObj.component);
+        }
+        notyf.success(`${i18n.t('VertexDeletedSuccessfully!')}`);
+    }
     // draw pipe listener
     draw() {
         const btn = this.getDrawButton(null, 'white');
         if (!btn)
             return;
         btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const target = e.currentTarget;
             const uuid = target.dataset.uuid;
             const categoryData = JSON.parse((_a = _selectedPipeCategory === null || _selectedPipeCategory === void 0 ? void 0 : _selectedPipeCategory.json_data) !== null && _a !== void 0 ? _a : '{}');
@@ -378,26 +395,21 @@ export class PipeForm {
                 target.style.backgroundColor = (_b = JSON.parse(_selectedPipeCategory.json_data)) === null || _b === void 0 ? void 0 : _b.color;
                 target.style.color = 'black';
                 target.textContent = `${i18n.t('DoneDrawing')}`;
-                _pipes.forEach(pipe => {
-                    const targetObj = _3DXObjects.find(obj => obj.object.uuid === pipe.uuid);
-                    if (targetObj) {
-                        setModelVisibility(targetObj.object.id, false);
-                    }
-                });
+                _3DXObjects.filter(obj => obj.object.uuid != _selectedPipe.uuid).forEach(disposeModel);
                 setPipeIsDrawingMode(true);
                 startDraw({
                     lineTypeComponentConfig: Object.assign(Object.assign({}, _pathConfig.lineTypeComponentConfig), { scrollSpeed: 0.70, radialSegments: 3, radius: 0.11 })
                 });
                 notyf.success(`${i18n.t('DrawingModeIsNowActive')}`);
                 if (_selectedPipe.uuid) {
-                    console.log("EDIT PIPE ACTIVE", _selectedPipe.uuid);
                     const targetObject = _3DXObjects.find(obj => obj.object.uuid === _selectedPipe.uuid);
-                    console.log("OBJECT", _3DXObjects, targetObject);
-                    if (!targetObject)
-                        return;
-                    enableVerticeControls(targetObject.component);
-                    disposeModel(targetObject);
-                    this.setEditMode(_selectedPipe);
+                    if (targetObject) {
+                        if (Array.isArray((_d = (_c = targetObject === null || targetObject === void 0 ? void 0 : targetObject.component) === null || _c === void 0 ? void 0 : _c.inputs) === null || _d === void 0 ? void 0 : _d.path) && targetObject.component.inputs.path.length > 1) {
+                            disposeModel(targetObject);
+                            enableVerticeControls(targetObject.component);
+                        }
+                        this.setEditMode(_selectedPipe);
+                    }
                 }
                 else {
                     yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_ADD, {});
@@ -411,7 +423,7 @@ export class PipeForm {
                 this.savePiPeEventHandler();
                 cancelDraw();
                 setPipeIsDrawingMode(false);
-                this.renderPipePath(uuid);
+                // this.renderPipePath(uuid)
                 target.textContent = i18n.t('DrawPipe');
                 target.style.backgroundColor = null;
                 target.style.color = 'white';
@@ -424,15 +436,14 @@ export class PipeForm {
             yield dispatchSpaceEvent(SPACE_EVENTS.DRAW_PIPE_UNDO);
             this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
             this.setEditMode(_selectedPipe);
-            undoDrawAction();
+            undoPipePath();
         });
     }
     redoEventHandler() {
         dispatchSpaceEvent(SPACE_EVENTS.DRAW_PIPE_REDO, _selectedPipe);
         this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
         this.setEditMode(_selectedPipe);
-        // this.renderPipePath()
-        redoDrawAction();
+        redoPipePath();
     }
     undo() {
         const btn = document.getElementById('at-pipe-undo-btn');
@@ -444,7 +455,7 @@ export class PipeForm {
                 notyf.error(`${i18n.t('DrawingModeIsCurrentlyInactive')}`);
                 return;
             }
-            if (_undoDrawActions.length == 0)
+            if (!pathHistory.canUndo())
                 return;
             this.undoEventHandler();
         }));
@@ -460,7 +471,7 @@ export class PipeForm {
                 notyf.error(`${i18n.t('DrawingModeIsCurrentlyInactive')}`);
                 return;
             }
-            if (_undoDrawActions.length == 0)
+            if (!pathHistory.canRedo())
                 return;
             this.redoEventHandler();
         }));
@@ -479,9 +490,7 @@ export class PipeForm {
                     return;
                 document.querySelectorAll('.at_circle.selected').forEach(el => el.classList.remove('selected'));
                 target.classList.add('selected');
-                console.log("clicked");
                 const bgColor = getComputedStyle(target).backgroundColor;
-                console.log("CAHNGE COLOR ==>", bgColor);
                 this.getDrawButton(bgColor, 'black');
                 const obj = { color: bgColor };
                 _selectedPipeCategory.json_data = JSON.stringify(obj);
@@ -511,7 +520,6 @@ export class PipeForm {
         if (!btn)
             return;
         if (btn === null || btn === void 0 ? void 0 : btn.classList.contains('active')) {
-            console.log("DRAW BUTTON ===>", btn.classList);
             btn.style.backgroundColor = background;
             btn.style.color = color;
         }
@@ -552,7 +560,11 @@ export class PipeForm {
     // render specific pipe category and its pipes 
     renderPipePath(uuid) {
         var _a;
-        _3DXObjects.filter(x => x.type === 'PATH').forEach(disposeModel);
+        _3DXObjects.filter(x => x.type === 'PATH').forEach(obj => {
+            if (obj) {
+                disposeModel(obj);
+            }
+        });
         const category = JSON.parse((_a = _selectedPipeCategory === null || _selectedPipeCategory === void 0 ? void 0 : _selectedPipeCategory.json_data) !== null && _a !== void 0 ? _a : '{}');
         const targetPipes = uuid
             ? _pipes.filter(p => p.uuid === uuid)

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

@@ -12,6 +12,9 @@ export declare class PipeList {
     edit(): void;
     toggle(): void;
     delete(): void;
+    private handleDisposePipeObjectModel;
+    private handleCategoryDelete;
+    private handlePipeDelete;
     renderPipePaths(): void;
     initDropdown(options: string[]): void;
 }

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

@@ -69,6 +69,7 @@ export class PipeList {
     createCollapseElement(categories, pipes) {
         const element = document.createElement('div');
         element.classList.add('at_collapse_container', 'at_h-responsive-304');
+        element.id = 'at-pipe-list-collapse';
         element.innerHTML = categories.length ? categories.sort((a, b) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()).map((category, index) => {
             var _a;
             return `
@@ -86,7 +87,7 @@ export class PipeList {
                         <span class="mdi mdi-eye" id="at-view-btn-${COLLAPSE.HEADER}-${category.uuid}" data-type="${COLLAPSE.HEADER}"  data-cy="at-pipe-type-view-btn" data-uuid="${category.uuid}"></span>
                     </div>
                 </div>
-                <div class="at_collapsible_content at_secondary_azusa" id="${COLLAPSE.CONTENT_ID}">
+                <div class="at_collapsible_content at_secondary_azusa" id="${COLLAPSE.CONTENT_ID}-${category.uuid}" data-cy="at-collapsible-content-${category.uuid}">
                     <div class="at_p-2">
                         ${pipes != undefined && pipes.filter(pipe => pipe.category_uuid === category.uuid).length ?
                 pipes
@@ -100,14 +101,14 @@ export class PipeList {
                         <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.split(' ')[0] === 'Pipe' ? i18n.t('Pipe') + ' ' + pipe.name.split(' ')[1] : pipe.name}</span>
-                            <span class="mdi mdi-trash-can-outline at-pipe-filter-chevron" id="at-delete-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-delete-btn" data-type="${COLLAPSE.LIST}" data-uuid="${pipe.uuid}"></span>
+                            <span class="mdi mdi-trash-can-outline at-pipe-filter-chevron" id="at-delete-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-delete-btn" data-type="${COLLAPSE.LIST}" data-uuid="${pipe.uuid}" data-categoryuuid="${category.uuid}"></span>
                             <span class="mdi mdi-eye at-pipe-filter-chevron" id="at-view-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-view-btn" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}"></span>
                             </div>
                         </div>
                         `).join('')
                 :
                     `
-                        <div class="at_flex at_justify_center at_items_center at_flex_column">
+                        <div class="at_flex at_justify_center at_items_center at_flex_column at_text_sm">
                             <div style="white-space:nowrap"> ${i18n.t('NoPipesToDisplay')}</div>
                         </div>
                         `}
@@ -179,7 +180,6 @@ export class PipeList {
                 const target = currentTarget;
                 const uuid = target.dataset.uuid;
                 const type = target.dataset.type;
-                console.log("CLICKED");
                 const pipe = type === COLLAPSE.HEADER
                     ? _pipes.find(p => p.category_uuid === uuid)
                     : _pipes.find(p => p.uuid === uuid);
@@ -198,7 +198,6 @@ export class PipeList {
         btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
             const target = e.currentTarget;
             yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_ADD, {});
-            console.log("CLICKED ADD CATEGORY =>", _selectedPipeCategory);
             this.form.setPipeTitle("AddPipeType");
             yield this.form.init(_selectedPipeCategory);
             yield toggleDisplayPane(target.id);
@@ -270,46 +269,61 @@ export class PipeList {
             }));
         });
     }
-    //delete and dispose 3d objects
     delete() {
-        document.querySelectorAll('[id^="at-delete-btn"]').forEach(el => {
-            el.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
-                const target = e.currentTarget;
-                const uuid = target.dataset.uuid;
-                const type = target.dataset.type;
-                toggleModal();
-                setModalAction({
-                    title: `${i18n.t('DeletePipeCategory')}`,
-                    description: `${i18n.t('ConfirmDeletePipeCategory')}`,
-                    buttonLabel: `${i18n.t('YesDelete')}`
-                }, () => {
-                    if (uuid) {
-                        if (type == COLLAPSE.HEADER) {
-                            dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_REMOVED, uuid);
-                            _pipes.filter(pipe => pipe.category_uuid == uuid).forEach(pipe => {
-                                const targetObj = _3DXObjects.find(obj => obj.object.uuid == pipe.uuid);
-                                if (targetObj) {
-                                    disposeModel(targetObj);
-                                }
-                            });
-                            notyf.success(`${i18n.t('PipeCategoryDeletedSuccessfully')}`);
-                            toggleModal(false);
-                        }
-                        else {
-                            dispatchSpaceEvent(SPACE_EVENTS.PIPE_REMOVED, uuid);
-                            const targetObj = _3DXObjects.find(obj => obj.object.uuid == uuid);
-                            if (targetObj) {
-                                disposeModel(targetObj);
-                            }
-                            notyf.success(`${i18n.t('PipeSuccessfullyDeleted')}`);
-                            toggleModal(false);
-                        }
-                        this.collapse.removeElement(uuid, type);
-                    }
-                });
+        document.querySelectorAll('[id^="at-delete-btn"]').forEach(el => el.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+            const target = e.currentTarget;
+            const { uuid, type, categoryuuid } = target.dataset;
+            if (!uuid)
+                return;
+            const isHeader = type === COLLAPSE.HEADER;
+            const config = {
+                title: i18n.t(isHeader ? 'DeletePipeCategory' : 'DeletePipe'),
+                description: i18n.t(isHeader ? 'ConfirmDeletePipeCategory' : 'ConfirmDeletePipe'),
+                buttonLabel: i18n.t('YesDelete'),
+            };
+            toggleModal();
+            setModalAction(config, () => __awaiter(this, void 0, void 0, function* () {
+                this.handleDisposePipeObjectModel(uuid, isHeader);
+                dispatchSpaceEvent(isHeader ? SPACE_EVENTS.PIPE_CATEGORY_REMOVED : SPACE_EVENTS.PIPE_REMOVED, uuid);
+                yield waitForChange(() => _pipeCategories, () => _pipes, { interval: 300, timeout: 10000 });
+                isHeader ? this.handleCategoryDelete() : this.handlePipeDelete(categoryuuid);
+                toggleModal(false);
+                this.collapse.removeElement(uuid, type);
             }));
+        })));
+    }
+    handleDisposePipeObjectModel(uuid, isHeader) {
+        (isHeader
+            ? _pipes.filter(p => p.category_uuid === uuid).map(p => p.uuid)
+            : [uuid]).forEach(id => {
+            const obj = _3DXObjects.find(o => o.object.uuid === id);
+            if (obj)
+                disposeModel(obj);
         });
     }
+    handleCategoryDelete() {
+        if (_pipeCategories.length == 0) {
+            document.getElementById('at-pipe-list-collapse').innerHTML = `
+            <div class="at_h-responsive-304">
+                <div class="at_flex at_justify_center at_items_center at_flex_column at_h-full">
+                    <span class="mdi mdi-pipe-disconnected at_pipe_category at_text-xxl"></span>
+                <div class="at_text_xs" style="white-space:nowrap">${i18n.t('NoPipesTypeToDisplay')}</div>
+                </div>
+            </div>`;
+        }
+        notyf.success(i18n.t('PipeCategoryDeletedSuccessfully'));
+    }
+    handlePipeDelete(categoryuuid) {
+        if (!_pipes.some(p => p.category_uuid === categoryuuid)) {
+            document.getElementById(`${COLLAPSE.CONTENT_ID}-${categoryuuid}`).innerHTML = `
+            <div class="at_flex at_justify_center at_items_center at_flex_column">
+                <div class="at_p-2">
+                    <div style="white-space:nowrap">${i18n.t('NoPipesToDisplay')}</div>
+                </div>
+            </div>`;
+        }
+        notyf.success(i18n.t('PipeDeletedSuccessfully'));
+    }
     //render pipe path 3D objects
     renderPipePaths() {
         // initialize to empty