architwin 1.13.4 → 1.13.5

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

@@ -1,8 +1,12 @@
-import { IShowcaseObject } from "../../../types";
+import { IShowcaseObject, SortConfig } from "../../../types";
 import { Scene } from "../../../../bundle/sdk";
+export declare let selectedObjectSortOption: SortConfig;
 export declare function renderObjectListPane(cardList: Array<IShowcaseObject>): HTMLElement;
 export declare function renderObjectCards(cardList: Array<IShowcaseObject>, objectComponents?: Array<Scene.IComponent>): void;
 export declare function addObjectCard(objectCards: HTMLElement, payload: IShowcaseObject): void;
 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 resetSelectedObjectSortOption(): void;

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

@@ -7,12 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { sortObjectOptions } from "../../../types";
 import { renderObjectCard, renderObjectRow, setActiveCard } from "./card";
 import { batchAddEventListenerByClassName, toggleActionBar, handleModelVisibility, handleDeleteModel } from "../../events";
 import i18n from './i18n';
 import { setModalAction, toggleModal } from "./modal";
 import { getBundleVersion } from "../../../utils";
 import { toggleModelControl } from "./modelControlsPane";
+export let selectedObjectSortOption = { by: 'showcase_object_name', order: 'asc' };
 export function renderObjectListPane(cardList) {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -37,6 +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">
+                <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>
+                </span>
+            </div>
         </div>
         <div class="at_scrollable_container at_h-min-60" id="at-object-cards" data-cy="at-object-cards">
 
@@ -158,6 +168,7 @@ export function updateObjectCard(objectCards, payload) {
         targetCard.textContent = payload.object_data.name;
     }
 }
+// IShowcaseObject.object_data.filename (asc | desc), IShowcaseObject.created_on (newest | oldest)
 export function renderObjectList(cardList, objectComponents) {
     console.log("renderObjectList(): ", objectComponents);
     const objectList = document.getElementById('at-object-cards');
@@ -222,3 +233,62 @@ export function renderObjectList(cardList, objectComponents) {
         objectList.innerHTML = '<p>No objects in space</p>';
     }
 }
+export const sortShowcaseObjects = (items, options) => {
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return [];
+    return [...items].sort((a, b) => {
+        var _a, _b;
+        let comparison = 0;
+        if (options.by === 'showcase_object_name') {
+            // Sort by object_data.filename
+            const filenameA = (_a = a.showcase_object_name) !== null && _a !== void 0 ? _a : '';
+            const filenameB = (_b = b.showcase_object_name) !== null && _b !== void 0 ? _b : '';
+            // Use natural sorting for filenames (handles numbers in names correctly)
+            comparison = filenameA.localeCompare(filenameB, undefined, {
+                numeric: true,
+                sensitivity: 'base',
+                caseFirst: 'lower'
+            });
+        }
+        else if (options.by === 'created_on') {
+            // Sort by created_on date
+            const dateA = a.object_data.created_on ? new Date(a.object_data.created_on).getTime() : 0;
+            const dateB = b.object_data.created_on ? new Date(b.object_data.created_on).getTime() : 0;
+            comparison = dateA - dateB;
+        }
+        // Apply sort order
+        return options.order === 'desc' ? -comparison : comparison;
+    });
+};
+export function updateSelectedObjectSortOption(textSortOption) {
+    selectedObjectSortOption = sortObjectOptions[textSortOption] || { 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) {
+            option.classList.add('at_sort_option_selected');
+        }
+        else {
+            option.style.backgroundColor = '';
+            option.classList.remove('at_sort_option_selected');
+        }
+    });
+}
+export function resetSelectedObjectSortOption() {
+    selectedObjectSortOption = { by: 'showcase_object_name', order: 'asc' };
+    const tooltip = document.getElementById('at-object-sort-options-tooltip');
+    if (tooltip) {
+        const options = tooltip.querySelectorAll('.at_object_sort_option');
+        if (options) {
+            options.forEach((option) => {
+                if (option.innerText === 'Ascending') {
+                    option.classList.add('at_sort_option_selected');
+                }
+                else {
+                    option.style.backgroundColor = '';
+                    option.classList.remove('at_sort_option_selected');
+                }
+            });
+        }
+    }
+}

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

@@ -1,7 +1,8 @@
-import { ITag, ITagCategory } from "../../../types";
+import { ITag, ITagCategory, SortConfig } from "../../../types";
 import { MpSdk } from "../../../../bundle/sdk";
 export declare let selectedCategoryFilterId: any;
 export declare let selectedSubCategoryFilterId: any;
+export declare let selectedTagSortOption: SortConfig;
 export declare function renderTagListPane(): HTMLElement;
 export declare function isTagPartOfCategory(categoryUUID: string): boolean;
 export declare function renderTags(tags: Array<ITag>, showOwnTagsOnly?: boolean): void;
@@ -17,3 +18,6 @@ export declare function getSearchTagTerm(): string;
 export declare function searchTagList(tags: Array<ITag>): Array<ITag>;
 export declare function setSearchTagTerm(searchTagName: string): void;
 export declare function searchClearfield(): void;
+export declare const sortTags: (items: ITag[], options: SortConfig) => ITag[];
+export declare function updateSelectedTagSortOption(textSortOption: string): void;
+export declare function resetSelectedTagSortOption(): void;

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { SPACE_EVENTS } from "../../../types";
+import { SPACE_EVENTS, sortTagOptions } from "../../../types";
 import { batchAddEventListenerByClassName, toggleDisplayPane, batchAddEventListenerByDataAttribute } from "../../events";
 import { convertToCssRgb, getBundleVersion } from "../../../utils";
 import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig } from "../../../architwin";
@@ -24,6 +24,7 @@ let allSubcategories = [];
 let tagSearchTerm = '';
 export let selectedCategoryFilterId = undefined;
 export let selectedSubCategoryFilterId = undefined;
+export let selectedTagSortOption = { by: 'label', order: 'asc' };
 export function renderTagListPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -36,6 +37,16 @@ export function renderTagListPane() {
             <span>${i18n.t('Tags')}</span>
         </div>
         <div class="at_form_container at_h-min-65 at_tag_list_pane">
+            <div class="at_sort_btn_container">
+                <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
+                    <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
+                        <p class="at_tag_sort_option at_sort_option_selected">Ascending</p>
+                        <p class="at_tag_sort_option">Descending</p>
+                        <p class="at_tag_sort_option">Newest</p>
+                        <p class="at_tag_sort_option">Oldest</p>
+                    </span>
+                </div>
+            </div>
             <div class="at_flex_row">
                 <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
                 <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
@@ -357,6 +368,7 @@ export function addClickEventToTagRow(tag) {
 //     }
 //     return filteredByCategory
 // }
+// ITag.json_data.label (asc | desc), ITag.created_on (newest | oldest)
 export function filterTagList(tags) {
     log.info("filterTagList()", tags);
     if (tagSearchTerm && (!selectedCategoryFilterId && selectedCategoryFilterId !== '')) {
@@ -486,3 +498,67 @@ export function searchClearfield() {
         tagSearchTerm = '';
     }
 }
+export const sortTags = (items, options) => {
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return [];
+    return [...items].sort((a, b) => {
+        var _a, _b, _c, _d;
+        let comparison = 0;
+        if (options.by === 'label') {
+            // Sort by json_data.label
+            const labelA = (_b = (_a = a.json_data) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';
+            const labelB = (_d = (_c = b.json_data) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : '';
+            // Handle different types - numbers vs strings
+            if (typeof labelA === 'number' && typeof labelB === 'number') {
+                comparison = labelA - labelB;
+            }
+            else {
+                // Convert to strings for consistent comparison
+                comparison = String(labelA).localeCompare(String(labelB), undefined, {
+                    numeric: true,
+                    sensitivity: 'base'
+                });
+            }
+        }
+        else if (options.by === 'created_on') {
+            // Sort by created_on date
+            const dateA = a.created_on ? new Date(a.created_on).getTime() : 0;
+            const dateB = b.created_on ? new Date(b.created_on).getTime() : 0;
+            comparison = dateA - dateB;
+        }
+        // Apply sort order
+        return options.order === 'desc' ? -comparison : comparison;
+    });
+};
+export function updateSelectedTagSortOption(textSortOption) {
+    selectedTagSortOption = sortTagOptions[textSortOption] || { by: 'label', order: 'asc' };
+    const tooltip = document.getElementById('at-tag-sort-options-tooltip');
+    const options = tooltip.querySelectorAll('.at_tag_sort_option');
+    options.forEach((option) => {
+        if (option.innerText === textSortOption) {
+            option.classList.add('at_sort_option_selected');
+        }
+        else {
+            option.style.backgroundColor = '';
+            option.classList.remove('at_sort_option_selected');
+        }
+    });
+}
+export function resetSelectedTagSortOption() {
+    selectedTagSortOption = { by: 'label', order: 'asc' };
+    const tooltip = document.getElementById('at-tag-sort-options-tooltip');
+    if (tooltip) {
+        const options = tooltip.querySelectorAll('.at_tag_sort_option');
+        if (options) {
+            options.forEach((option) => {
+                if (option.innerText === 'Ascending') {
+                    option.classList.add('at_sort_option_selected');
+                }
+                else {
+                    option.style.backgroundColor = '';
+                    option.classList.remove('at_sort_option_selected');
+                }
+            });
+        }
+    }
+}

package/lib/atwinui/events.js

@@ -11,9 +11,9 @@ import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTag
 import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, setTagIcon, setObjectTransformation, getSelectedObject, _atwin, isCdnMapDataAvailable, captureScreenshotAndCameraDetails, _mpConfig, cancelModelPlacement, _modelDetails, actionHistory, get3DXObjects, transformHistory, goToModel, themeManager, _partitionNodes, setSpacePartitionNodes, getSpaceId, setFloorBaseHeight, toggleWallVisibility, getChildrenOfModel, toggleFloorVisibility, renderPolygon, getCurrentPolygon, getFloorBaseHeight, setSelectedObject, redoDrawAction, undoDrawAction, setWallBaseHeight, clearWallBaseHeight, clearFloorBaseHeight, isToolbarFeatureEnabled, captureCurrentView, getCurrentFloor, setPipeCategories, setPipes, detachTagMedia, getTagDataCollection } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
-import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS, CUSTOM_MAP_MODE } from "../types";
+import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS, sortTagOptions, sortObjectOptions, CUSTOM_MAP_MODE } from "../types";
 import { initFormData, setTagFormMode } from "./components/toolbar/tagFormPane";
-import { renderObjectList } from "./components/toolbar/objectListPane";
+import { renderObjectList, resetSelectedObjectSortOption, selectedObjectSortOption, sortShowcaseObjects, updateSelectedObjectSortOption } from "./components/toolbar/objectListPane";
 import { renderLibraryList } from "./components/toolbar/libraryPane";
 import { renderObjectCard } from "./components/toolbar/card";
 import { toggleModelControl, getCoordinateValues, showCurrentCoordinateValue, handleModelControlInputs, setSelectedObjectCoordinateSystem, getSelectedObjectCoordinateSystem, getCurrentTransformationValues, setCurrentTransformationValues, getTransformValues, clearCurrentTransformationValues } from "./components/toolbar/modelControlsPane";
@@ -28,7 +28,7 @@ import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMo
 import { actionSettingsSelectOption, getTempCoordinateSystem, getTempMeasurementUnit, getTempRotationUnit, setCoordinateSystem, setMeasurementUnit, setRotationUnit, initSettingsValues, setTempCoordinateSystem, setTempMeasurementUnit, setTempRotationUnit, toggleActionSettingsDropdown, toggleCalibrateBasepoint, setScaleFactor, getTempScaleFactor, setTempScaleFactor, setBasepoint, getTempBasepoint, setTempBasepoint, getBasepoint, toggleActionSettings, getBasepointObjectPayload, displayConvertedCoordinates, getCoordinateSystem, getScaleFactor, getMeasurementUnit, getRotationUnit, setBasepointObjectPayload } from "./components/toolbar/actionSettingsPane";
 import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordinateValues, initBsepointCalibratePane, toggleBasepointCalibratePane } from "./components/toolbar/basepointCalibratePane";
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
-import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm } from './components/toolbar/tagListPane';
+import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption } from './components/toolbar/tagListPane';
 import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
 // import { EditPipeForm, initPipeFormPane, pipeFormData, setPipeFormMode } from "./components/toolbar/pipeFormPane";
@@ -176,12 +176,14 @@ function toggleDisplayPane(targetId) {
                     const objectsInSpace = get3DXObjects();
                     const objectComponents = objectsInSpace.map(obj => obj.component);
                     const spaceObjects = objectsInSpace.filter(obj => obj.type !== 'POLYGON' && obj.type !== 'BASEPOINT' && obj.type !== "PATH").map(obj => obj.object);
-                    renderObjectCards(spaceObjects, objectComponents);
+                    const sortedObjects = sortShowcaseObjects(spaceObjects, { by: 'showcase_object_name', order: 'asc' });
+                    renderObjectCards(sortedObjects, objectComponents);
                     if (targetId === 'at-cancel-library-btn') {
                         yield cancelModelPlacement();
                     }
                 }
                 else {
+                    resetSelectedObjectSortOption();
                     clearSelectedObject();
                     removeTransformControls();
                 }
@@ -205,10 +207,12 @@ function toggleDisplayPane(targetId) {
                     const tags = getMpTags();
                     if (selectedCategoryFilterId || selectedSubCategoryFilterId) {
                         const filteredTags = filterTagList(tags);
-                        renderTags(filteredTags);
+                        const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
+                        renderTags(sortedTags);
                     }
                     else if (tags.length > 0) {
-                        renderTags(tags, true);
+                        const sortedTags = sortTags(tags, { by: 'label', order: 'asc' });
+                        renderTags(sortedTags, true);
                     }
                     //Render the category dropdown elements if tagCategories is populated
                     if (_tagCategories && _tagCategories.length > 0) {
@@ -220,6 +224,9 @@ function toggleDisplayPane(targetId) {
                         searchTagList(tags);
                     }
                 }
+                else {
+                    resetSelectedTagSortOption();
+                }
                 if (paneId === 'at-tag-form-pane') {
                     log.info("Tag Form Pane");
                     setTagFormMode("ADD" /* FORM_MODE.ADD */);
@@ -358,6 +365,8 @@ function setupIndividualEventListeners() {
     handleCloseCustomMinimap();
     handleCustomMapControls();
     handleCloseActiveMinimap();
+    handleClickEventInTagSortOption();
+    handleClickEventInObjectSortOption();
     handlePipeForm();
     handlePipeList();
 }
@@ -1502,7 +1511,8 @@ function handleSetModelsView() {
         log.info("modelCardViewBtn", modelsView);
         const spaceObjects = _3DXObjects.filter(obj => obj.type !== 'POLYGON' && obj.type !== "BASEPOINT" && obj.type !== "PATH").map(obj => obj.object);
         const objectComponents = _3DXObjects.map(obj => obj.component);
-        renderObjectCards(spaceObjects, objectComponents);
+        const sortedObjects = sortShowcaseObjects(spaceObjects, selectedObjectSortOption);
+        renderObjectCards(sortedObjects, objectComponents);
     });
     modelsListViewBtn.addEventListener('click', () => {
         modelsListViewBtn.classList.add('at_ghost_active');
@@ -1511,7 +1521,8 @@ function handleSetModelsView() {
         log.info("modelListViewBtn", modelsView);
         const spaceObjects = _3DXObjects.filter(obj => obj.type !== "POLYGON" && obj.type !== "BASEPOINT" && obj.type !== "PATH").map(obj => obj.object);
         const objectComponents = _3DXObjects.map(obj => obj.component);
-        renderObjectList(spaceObjects, objectComponents);
+        const sortedObjects = sortShowcaseObjects(spaceObjects, selectedObjectSortOption);
+        renderObjectList(sortedObjects, objectComponents);
     });
 }
 function handleSetLibraryModelsView() {
@@ -3059,6 +3070,67 @@ function handleCloseActiveMinimap() {
         });
     }
 }
+function handleClickEventInTagSortOption() {
+    const sortIcon = document.getElementById('at-tag-sort-icon');
+    let clickListenerAdded = false;
+    if (sortIcon) {
+        sortIcon.addEventListener('mouseover', () => {
+            const sortTooltip = document.getElementById('at-tag-sort-options-tooltip');
+            // console.log('Tooltip ready:', !!sortTooltip)
+            // Only add the click listener once
+            if (sortTooltip && !clickListenerAdded) {
+                clickListenerAdded = true;
+                sortTooltip.addEventListener('click', (event) => {
+                    const target = event.target;
+                    const closestOption = target.closest('.at_tag_sort_option');
+                    if (closestOption) {
+                        const innerText = closestOption.innerText;
+                        updateSelectedTagSortOption(innerText);
+                        const tags = getMpTags();
+                        const filteredTags = filterTagList(tags);
+                        const sortConfig = sortTagOptions[innerText] || { by: 'label', order: 'asc' };
+                        if (selectedCategoryFilterId || selectedSubCategoryFilterId) {
+                            const sortedTags = sortTags(filteredTags, sortConfig);
+                            renderTags(sortedTags);
+                        }
+                        else if (tags.length > 0) {
+                            const sortedTags = sortTags(tags, sortConfig);
+                            renderTags(sortedTags);
+                        }
+                    }
+                });
+            }
+        });
+    }
+}
+function handleClickEventInObjectSortOption() {
+    const sortIcon = document.getElementById('at-object-sort-icon');
+    let clickListenerAdded = false;
+    if (sortIcon) {
+        sortIcon.addEventListener('mouseover', () => {
+            const sortTooltip = document.getElementById('at-object-sort-options-tooltip');
+            // console.log('Tooltip ready:', !!sortTooltip)
+            // Only add the click listener once
+            if (sortTooltip && !clickListenerAdded) {
+                clickListenerAdded = true;
+                sortTooltip.addEventListener('click', (event) => {
+                    const target = event.target;
+                    const closestOption = target.closest('.at_object_sort_option');
+                    if (closestOption) {
+                        const innerText = closestOption.innerText;
+                        updateSelectedObjectSortOption(innerText);
+                        const objectsInSpace = get3DXObjects();
+                        const objectComponents = objectsInSpace.map(obj => obj.component);
+                        const spaceObjects = objectsInSpace.filter(obj => obj.type !== 'POLYGON' && obj.type !== 'BASEPOINT').map(obj => obj.object);
+                        const sortConfig = sortObjectOptions[innerText] || { by: 'label', order: 'asc' };
+                        const sortedObjects = sortShowcaseObjects(spaceObjects, sortConfig);
+                        renderObjectCards(sortedObjects, objectComponents);
+                    }
+                });
+            }
+        });
+    }
+}
 export { 
 //state
 activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, 

package/lib/types.d.ts

@@ -29,6 +29,7 @@ export interface ITag {
     category_uuid?: string;
     uuid?: string;
     media_url?: string;
+    created_on?: string;
 }
 export interface ITagCategory {
     uuid: string;
@@ -237,6 +238,7 @@ export interface IShowcaseObject {
     object_data: I3DObject;
     coordinate_system?: string;
     json_data?: string;
+    created_on?: string;
 }
 export interface IVideoObject {
     data: IShowcaseObject;
@@ -1338,6 +1340,48 @@ export declare enum MAP_OPTIONS {
     DEFAULT_MAP = "Default Minimap",
     CUSTOM_MAP = "Custom Minimap"
 }
+export type SortBy = 'label' | 'showcase_object_name' | 'created_on';
+export type SortOrder = 'asc' | 'desc';
+export interface SortConfig {
+    by: SortBy;
+    order: SortOrder;
+}
+export declare const sortTagOptions: {
+    readonly Ascending: {
+        readonly by: "label";
+        readonly order: "asc";
+    };
+    readonly Descending: {
+        readonly by: "label";
+        readonly order: "desc";
+    };
+    readonly Newest: {
+        readonly by: "created_on";
+        readonly order: "desc";
+    };
+    readonly Oldest: {
+        readonly by: "created_on";
+        readonly order: "asc";
+    };
+};
+export declare const sortObjectOptions: {
+    readonly Ascending: {
+        readonly by: "showcase_object_name";
+        readonly order: "asc";
+    };
+    readonly Descending: {
+        readonly by: "showcase_object_name";
+        readonly order: "desc";
+    };
+    readonly Newest: {
+        readonly by: "created_on";
+        readonly order: "desc";
+    };
+    readonly Oldest: {
+        readonly by: "created_on";
+        readonly order: "asc";
+    };
+};
 export declare enum CUSTOM_MAP_MODE {
     DEFAULT = "DEFAULT",
     EDIT = "EDIT"

package/lib/types.js

@@ -168,6 +168,18 @@ export var MAP_OPTIONS;
     MAP_OPTIONS["DEFAULT_MAP"] = "Default Minimap";
     MAP_OPTIONS["CUSTOM_MAP"] = "Custom Minimap";
 })(MAP_OPTIONS || (MAP_OPTIONS = {}));
+export const sortTagOptions = {
+    'Ascending': { by: 'label', order: 'asc' },
+    'Descending': { by: 'label', order: 'desc' },
+    'Newest': { by: 'created_on', order: 'desc' },
+    'Oldest': { by: 'created_on', order: 'asc' }
+};
+export const sortObjectOptions = {
+    'Ascending': { by: 'showcase_object_name', order: 'asc' },
+    'Descending': { by: 'showcase_object_name', order: 'desc' },
+    'Newest': { by: 'created_on', order: 'desc' },
+    'Oldest': { by: 'created_on', order: 'asc' }
+};
 export var CUSTOM_MAP_MODE;
 (function (CUSTOM_MAP_MODE) {
     CUSTOM_MAP_MODE["DEFAULT"] = "DEFAULT";

package/package.json

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

package/static/atwinui.css

@@ -491,6 +491,7 @@
     flex-direction: row;
     gap: 4px;
     margin-bottom: 8px;
+    margin-top: 8px;
 }
 
 .at_button_search_tag{
@@ -2067,4 +2068,37 @@
 
 .at_comment_unsend_container{
     cursor: pointer;
+}
+
+.at_tag_sort_option,
+.at_object_sort_option {
+    margin: 3px 0 3px 0;
+    cursor: pointer;
+    padding: 2px 5px 2px 5px;
+    border-radius: 2px;
+}
+
+.at_tag_sort_option:hover,
+.at_object_sort_option:hover {
+    background-color: grey;
+}
+
+.at_sort_btn_container {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+}
+
+#at-tag-sort-icon {
+    background-color: var(--bg-secondary);
+    margin-bottom: 15px;
+    margin-right: -15px;
+}
+
+#at-object-sort-icon {
+    background-color: var(--bg-secondary);
+}
+
+.at_sort_option_selected {
+    background-color: var(--bg-accent) !important;
 }