architwin 1.12.4 → 1.13.0

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

@@ -0,0 +1,545 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        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 i18n from './i18n';
+import { COLLAPSE, SPACE_EVENTS } from "../../../types";
+import { Collapse } from "./collapse";
+import { notyf, toggleDisplayPane } from "../../events";
+import { observeInputToUpdate, waitForChange } from "../../helpers";
+import { getShortcutTooltipHTML } from "./static/common";
+import { setModalAction, toggleModal } from "./modal";
+export class PipeForm {
+    // Initialize collapse UI and  color category
+    constructor() {
+        this.category = {};
+        this.collapse = new Collapse(undefined);
+        this.colorCategory = ['dark-red', 'red', 'amber', 'light-chartreuse', 'chartreuse', 'light-green', 'dark-green', 'sky-blue', 'purple', 'dark-purple'];
+    }
+    // Render the main form pane
+    renderPane() {
+        const element = document.createElement('div');
+        element.className = 'at_container at_w-12 at_h-responsive-64';
+        element.id = 'at-pipe-form-pane';
+        element.setAttribute('data-cy', 'at-pipe-form-pane');
+        element.innerHTML = `
+            <div class="at_panel_header at_flex at_justify_between  at_items_center at_mb_4">
+                <span class="mdi mdi-keyboard at_pull_left at_icon_hover ">
+                    ${getShortcutTooltipHTML()}
+                </span>
+                <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>
+            </div>
+            <div class="at_h-responsive-224">
+                <div class="at_py-3">
+                    <span class="">${i18n.t('CategoryColor')}</span>
+                    <div class="at_py-3 ">
+                        ${this.colorCategory.map(color => `
+                            <div class="at_circle at_pipe_category-bg-${color}" id="at-color-pipe-category-btn-${color}" data-cy="at-color-btn-${color}"></div>
+                        `).join('')}
+                    </div>
+                </div>
+                <div class="at_pipe_container at_h-responsive-600">
+                    <div class="at_py-2">
+                        <div class="at_pipe_content at_rounded at_mb_2">
+                        <span class="mdi mdi-pipe"></span>
+                            ${i18n.t('Pipes')}
+                        </div>
+                        <div id="at-pipe-form-collapse-html-element"></div>
+                        <div class="at_flex at_gap_2 at_pt-2">
+                            <div class="at_button at_ghost at_draw_pipe_btn" id="at-draw-pipe-btn" data-cy="at-draw-pipe-btn">${i18n.t('DrawPipe')}</div>
+                            <div class="at_button at_ghost" id="at-pipe-undo-btn"><span class="mdi mdi-undo"></span></div>
+                            <div class="at_button at_ghost" id="at-pipe-redo-btn"><span class="mdi mdi-redo"></span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="at_flex at_justify_between">
+                <div class="at_button at_ghost" id="at-cancel-pipe-btn" data-cy="at-cancel-pipe-btn" target-pane="at-pipe-list-pane">
+                    ${i18n.t('Cancel')}
+                    <span class="mdi mdi-close-circle-outline"></span>
+                </div>
+                <div class="at_button at_ghost" id="at-save-pipe-btn" data-cy="at-save-pipe-btn" target-pane="at-pipe-list-pane">
+                    ${i18n.t('Save')}
+                    <span class="mdi mdi-plus-circle-outline"></span>
+                </div>
+            </div>
+        `;
+        return element;
+    }
+    // Creates collapse pipe  under a category
+    createCollapseElement(category, pipes) {
+        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)
+            ? `
+            <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;
+                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">
+                            <div class="at_flex at_justify_between at_items_center">
+                                <input id="at_pipe_name_input_${pipe.uuid}" class="at_pipe_input" data-uuid="${pipe.uuid}" type="text" value="${pipe.name}" required>
+                            </div>
+                        </div>
+                        <div class="at_collapsible_section at_pipe_content at_rounded">
+                            <div class="at_collapsible_header" id="at-header-collapse-">
+                                <div class="at_flex at_justify_between at_items_center">
+                                    <span class="mdi mdi-ray-start-vertex-end at_text_xl at_pipe-dots-bg at_px-1 at_rounded" id="at-pipe-color-indicator-${pipe.uuid}" style="background-color:${(_a = JSON.parse(category.json_data)) === null || _a === void 0 ? void 0 : _a.color}"></span>
+                                    <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>
+                                    <span class="mdi mdi-check-bold at_text_xl at_hidden at_pipe-save-btn at_rounded" id="at-save-edit-btn-${COLLAPSE.HEADER}-${pipe.uuid}" data-uuid="${pipe.uuid}"></span>
+                                </div>
+                            </div>
+                            
+                            <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) => {
+                        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>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).join('')}
+            </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> ${i18n.t('NoPipesToDisplay')}</div>
+            </div>
+            `;
+        return element;
+    }
+    // Initializes the form with the selected category and its pipes
+    init(category, pipes) {
+        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;
+            pipeNameInput.value = (_a = category === null || category === void 0 ? void 0 : category.name) !== null && _a !== void 0 ? _a : '';
+            const container = document.getElementById('at-pipe-form-collapse-html-element');
+            if (!container)
+                return;
+            const element = this.createCollapseElement(category, pipes);
+            this.collapse.setElement(element);
+            container.replaceChildren(this.collapse.render());
+            this.collapse.init();
+            // Setup event listeners
+            this.edit();
+            this.delete();
+            this.setColorListeners();
+            this.renderPipePath();
+            this.observeInput();
+        });
+    }
+    observeInput() {
+        const categoryNameInput = document.getElementById('at_pipe_type_name_input');
+        observeInputToUpdate(categoryNameInput, () => _selectedPipeCategory, 'name');
+    }
+    //setup pipe edit listener
+    edit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            document.querySelectorAll(`[id^="at-edit-btn-${COLLAPSE.HEADER}"]`).forEach((btn, index) => {
+                btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+                    var _a;
+                    const target = e.currentTarget;
+                    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);
+                    if (parsed.vertices) {
+                        moveToSweep(parsed.sweepId, parsed.rotation);
+                        _3DXObjects.filter(obj => obj.object.uuid != uuid).forEach(targetObj => {
+                            if (targetObj) {
+                                setModelVisibility(targetObj.object.id);
+                            }
+                        });
+                    }
+                }));
+            });
+        });
+    }
+    // enables edit mode for a selected pipe
+    setEditMode(uuid) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_SELECTED, uuid);
+            // this.renderPipePath(_selectedPipe.uuid)
+            this.collapse.setExpand(true);
+            this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
+            this.savePipe();
+            this.delete();
+            const inputName = document.getElementById(`at-input-name-container-${uuid}`);
+            const editBtn = document.getElementById(`at-edit-btn-${COLLAPSE.HEADER}-${uuid}`);
+            const deleteBtn = document.getElementById(`at-delete-btn-${COLLAPSE.HEADER}-${uuid}`);
+            const saveBtn = document.getElementById(`at-save-edit-btn-${COLLAPSE.HEADER}-${uuid}`);
+            if (editBtn && deleteBtn && saveBtn) {
+                editBtn.classList.add('at_hidden');
+                deleteBtn.classList.add('at_hidden');
+                saveBtn.classList.remove('at_hidden');
+                inputName === null || inputName === void 0 ? void 0 : inputName.classList.remove('at_hidden');
+            }
+            this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black');
+            const labels = document.querySelectorAll("[id*=at_pipe_name_label_]");
+            document.querySelectorAll('[id*="at_pipe_name_input_"]').forEach((input, index) => {
+                input.addEventListener('keyup', (e) => {
+                    const inputValue = e.target.value;
+                    labels[index].textContent = inputValue;
+                });
+            });
+        });
+    }
+    //setup  save 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* () {
+                var _a;
+                const target = e.currentTarget;
+                const uuid = target.dataset.uuid;
+                if (this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black').classList.contains('active')) {
+                    notyf.error(`${i18n.t('DrawingModeIsActive!')}`);
+                    return;
+                }
+                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));
+            ~(_pipes.findIndex((c, i) => c.uuid === _selectedPipe.uuid && (setPipes((_pipes[i] = _selectedPipe, _pipes)), 1)));
+            notyf.success(`${i18n.t('PipeSavedSuccessfully')}`);
+            this.init(_selectedPipeCategory, _pipes);
+        });
+    }
+    setPipeVertices(payload) {
+        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)));
+            this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
+            this.setEditMode(_selectedPipe.uuid);
+        });
+    }
+    // save category listener
+    save() {
+        const btn = document.getElementById('at-save-pipe-btn');
+        if (!btn)
+            return;
+        btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+            const target = e.currentTarget;
+            if (_selectedPipe.uuid) {
+                notyf.error(`${i18n.t('SaveTheCurrentPipeBeforeProceeding')}`);
+                return;
+            }
+            // const payload = await this.extractCategoryPayload()
+            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 toggleDisplayPane(target.id);
+        }));
+    }
+    cancel() {
+        const btn = document.getElementById('at-cancel-pipe-btn');
+        if (!btn)
+            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);
+        }));
+    }
+    // delete pipe/vertex listener
+    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 type = target.dataset.type;
+                const uuid = target.dataset.uuid;
+                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);
+                            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!')}`);
+                            toggleModal(false);
+                        }
+                        this.collapse.removeElement(uuid, type);
+                    }
+                });
+            }));
+        });
+    }
+    // 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;
+            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 : '{}');
+            const color = categoryData === null || categoryData === void 0 ? void 0 : categoryData.color;
+            if (!color) {
+                notyf.error(`${i18n.t('CannotDrawNoColorSelected')}`);
+                return;
+            }
+            target.classList.toggle('active');
+            if (target.classList.contains('active')) {
+                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);
+                    }
+                });
+                setPipeIsDrawingMode(true);
+                startDraw();
+                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);
+                    this.setEditMode(_selectedPipe.uuid);
+                }
+                else {
+                    yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_SAVED, {});
+                    const newPipe = yield waitForChange(() => _selectedPipe);
+                    this.setEditMode(newPipe.uuid);
+                }
+                console.log("selectedPipeCategory. ==>", _selectedPipeCategory);
+            }
+            else {
+                this.savePiPeEventHandler();
+                cancelDraw();
+                setPipeIsDrawingMode(false);
+                this.renderPipePath(uuid);
+                target.textContent = i18n.t('DrawPipe');
+                target.style.backgroundColor = null;
+                target.style.color = 'white';
+            }
+        }));
+    }
+    // undo pipe listener
+    undoEventHandler() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield dispatchSpaceEvent(SPACE_EVENTS.DRAW_PIPE_UNDO);
+            this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
+            this.setEditMode(_selectedPipe.uuid);
+            undoDrawAction();
+        });
+    }
+    redoEventHandler() {
+        dispatchSpaceEvent(SPACE_EVENTS.DRAW_PIPE_REDO, _selectedPipe);
+        this.populateFormCollapse(_selectedPipeCategory, _selectedPipe);
+        this.setEditMode(_selectedPipe.uuid);
+        // this.renderPipePath()
+        redoDrawAction();
+    }
+    undo() {
+        const btn = document.getElementById('at-pipe-undo-btn');
+        if (!btn)
+            return;
+        btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black').classList.contains('active')) {
+                notyf.error(`${i18n.t('DrawingModeIsCurrentlyInactive')}`);
+                return;
+            }
+            this.undoEventHandler();
+        }));
+    }
+    // redo pipe listener
+    redo() {
+        const btn = document.getElementById('at-pipe-redo-btn');
+        if (!btn)
+            return;
+        btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!this.getDrawButton((_a = JSON.parse(_selectedPipeCategory.json_data)) === null || _a === void 0 ? void 0 : _a.color, 'black').classList.contains('active')) {
+                notyf.error(`${i18n.t('DrawingModeIsCurrentlyInactive')}`);
+                return;
+            }
+            this.redoEventHandler();
+        }));
+    }
+    // Sets listeners on color buttons to update selection and styling
+    setColorListeners() {
+        document.querySelectorAll('[id^="at-color-pipe-category-btn-"]').forEach(el => {
+            el.classList.remove('selected');
+            if (JSON.parse(_selectedPipeCategory === null || _selectedPipeCategory === void 0 ? void 0 : _selectedPipeCategory.json_data) && getComputedStyle(el).backgroundColor === JSON.parse(_selectedPipeCategory.json_data).color) {
+                el.classList.add('selected');
+            }
+            el.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const target = e.currentTarget;
+                if (!target.classList.contains('at_circle'))
+                    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);
+                document.querySelectorAll('[id*="at-pipe-color-indicator"]').forEach(el => {
+                    el.style.backgroundColor = bgColor;
+                });
+                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);
+                }
+                else {
+                    const updatedOptions = {
+                        textColor: bgColor
+                        //...other properties you want to update
+                    };
+                    setPathLineOptions(undefined, updatedOptions);
+                }
+            }));
+        });
+    }
+    // Gets the draw button and sets its color
+    getDrawButton(background, color) {
+        const btn = document.getElementById('at-draw-pipe-btn');
+        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;
+        }
+        return btn;
+    }
+    // Renders updated pipe items during edit mode
+    populateFormCollapse(categories, pipes) {
+        const container = document.getElementById('at-pipe-form-collapse-html-element');
+        if (!container)
+            return;
+        const element = this.createCollapseElement(categories, [pipes]);
+        this.collapse.setElement(element);
+        container.replaceChildren(this.collapse.render());
+        this.collapse.init();
+    }
+    // Resets internal state (form mode, collapse state)
+    resetInteractionState() {
+        this.collapse.setExpand(false);
+        cancelDraw();
+        setPipeIsDrawingMode(false);
+        dispatchSpaceEvent(SPACE_EVENTS.PIPE_SELECTED, null);
+        if (this.getDrawButton(null, 'white').classList.contains('active')) {
+            this.getDrawButton(null, 'white').classList.remove('active');
+        }
+        document.querySelectorAll('[id^="at-color-pipe-category-btn"]').forEach(color => {
+            if (color.classList.contains('at_disabled')) {
+                color.classList.remove('at_disabled');
+            }
+        });
+    }
+    // toggle pane tittle 
+    setPipeTitle(text) {
+        const titleElement = document.getElementById('at_pipe_title');
+        if (!titleElement)
+            return;
+        titleElement.textContent = i18n.t(text);
+    }
+    // render specific pipe category and its pipes 
+    renderPipePath(uuid) {
+        var _a;
+        _3DXObjects.filter(x => x.type === 'PATH').forEach(disposeModel);
+        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)
+            : _pipes.filter(p => p.category_uuid === _selectedPipeCategory.uuid);
+        targetPipes.forEach(pipe => {
+            var _a;
+            const data = JSON.parse((_a = pipe === null || pipe === void 0 ? void 0 : pipe.json_data) !== null && _a !== void 0 ? _a : '{}');
+            if (!(data === null || data === void 0 ? void 0 : data.vertices))
+                return;
+            renderPath(data.vertices, {
+                uuid: pipe.uuid,
+                fillColor: 'none',
+                textColor: category.color,
+            });
+        });
+    }
+}

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

@@ -0,0 +1,19 @@
+export declare class PipeList {
+    private form;
+    private collapse;
+    private categories;
+    private pipes;
+    constructor();
+    renderPane(): HTMLElement;
+    private createCollapseElement;
+    init(): Promise<void>;
+    private eventHandler;
+    private handleClickItem;
+    locate(): void;
+    add(): void;
+    edit(): void;
+    toggle(): void;
+    delete(): void;
+    renderPipePaths(): void;
+    initDropdown(options: string[]): void;
+}