architwin 1.0.75 → 1.0.76

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

@@ -1,6 +1,6 @@
 import { _tagCategories, _tags, getMpTags } from "../../../architwin";
 import { convertToCssRgb, stringContains } from "../../../utils";
-import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList } from './tagListPane';
+import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories } from './tagListPane';
 let mode = 'adding';
 let tagNameInput, tagDescriptionInput, tagEmbedInput, tagCategoryDropdown, tagSubcategoryDropdown;
 let selectedCategoryId = undefined;
@@ -111,6 +111,19 @@ export function initFormData(tagId) {
             tagNameInput.value = targetTag.json_data.label;
             tagDescriptionInput.value = targetTag.json_data.description;
             tagEmbedInput.value = targetTag.media_url && targetTag.media_url !== '' ? targetTag.media_url : '';
+            const subcategories = getAllSubcategories();
+            const selectectedSubcategory = subcategories.find(sub => sub.uuid === targetTag.category_uuid);
+            if (selectectedSubcategory) {
+                const selectedCategory = _tagCategories.find(tag => tag.uuid === selectectedSubcategory.parent_uuid);
+                if (selectedCategory) {
+                    console.log("Edit tag category found ", selectedCategory);
+                    const catOption = createOptionElement(selectedCategory, 'category');
+                    selectOption(catOption, 'at-category-dropdown-toggle', true);
+                }
+                console.log("Edit tag subcategory found ", selectectedSubcategory);
+                const subcatOption = createOptionElement(selectectedSubcategory, 'subcategory');
+                selectOption(subcatOption, 'at-subcategory-dropdown-toggle', true);
+            }
             // const tagCategoryOption = tagCategoryDropdown.querySelector(`option[value="${tagCategory.uuid}"]`) as HTMLOptionElement
             // if (tagCategoryOption) {
             //     tagCategoryOption.selected = true;
@@ -293,7 +306,7 @@ export function toggleDropdown(elementId) {
     const dropdownOptions = document.getElementById(elementId);
     dropdownOptions.classList.toggle('open');
 }
-function selectOption(option, elementId) {
+function selectOption(option, elementId, skipToggle = false) {
     console.log("selectOption()");
     //const dropdownToggle = document.querySelector('.at_dropdown_toggle');
     if (!elementId || elementId === '' || elementId == null) {
@@ -347,7 +360,32 @@ function selectOption(option, elementId) {
     else if (elementId === 'at-subcategory-filter-dropdown-toggle') {
         toggleId = 'at-subcategory-filter-options';
     }
-    toggleDropdown(toggleId);
+    if (skipToggle == false) {
+        toggleDropdown(toggleId);
+    }
+}
+function createOptionElement(item, dropdownType) {
+    console.log("createOptionElement");
+    const option = document.createElement('div');
+    option.classList.add('at_option');
+    option.setAttribute('category-uuid', item.uuid);
+    option.setAttribute('dropdown-type', dropdownType);
+    option.setAttribute('data-cy', `at-category-option-${item.uuid}`);
+    if (dropdownType == 'category') {
+        option.innerHTML = `
+            <span class="at_colored-indicator" style="background-color:${convertToCssRgb(item.json_data.color.rgb)}"></span>
+            ${item.name}
+        `;
+        return option;
+    }
+    option.innerHTML = `
+    ${item.json_data.iconUrl ? `
+        <img class="at_avatar_xs" style="display:inline-block" src="${item.json_data.iconUrl}"/>
+    ` : `
+        <span class="at_colored-indicator" style="background-color:rgb(255,255,255)"></span>
+    `}
+    ${item.name}`;
+    return option;
 }
 export function renderCategoryDropdownOptions(elementId, items, toggleId) {
     console.log("renderCategoryDropdownOptions()");
@@ -374,16 +412,16 @@ export function renderCategoryDropdownOptions(elementId, items, toggleId) {
         return;
     }
     items.forEach(item => {
-        console.log("Appending option ", toggleId);
-        const option = document.createElement('div');
-        option.classList.add('at_option');
-        option.setAttribute('category-uuid', item.uuid);
-        option.setAttribute('dropdown-type', 'category');
-        option.setAttribute('data-cy', `at-category-option-${item.uuid}`);
-        option.innerHTML = `
-            <span class="at_colored-indicator" style="background-color:${convertToCssRgb(item.json_data.color.rgb)}"></span>
-            ${item.name}
-        `;
+        const option = createOptionElement(item, 'category');
+        // const option = document.createElement('div')
+        // option.classList.add('at_option')
+        // option.setAttribute('category-uuid',item.uuid)
+        // option.setAttribute('dropdown-type','category')
+        // option.setAttribute('data-cy',`at-category-option-${item.uuid}`)
+        // option.innerHTML = `
+        //     <span class="at_colored-indicator" style="background-color:${convertToCssRgb(item.json_data.color.rgb)}"></span>
+        //     ${item.name}
+        // `
         option.onclick = () => {
             selectOption(option, toggleId ? toggleId : 'at-category-dropdown-toggle');
         };
@@ -421,19 +459,20 @@ export function renderSubcategoryDropdownOptions(elementId, items) {
         return;
     }
     items.forEach(item => {
-        const option = document.createElement('div');
-        option.classList.add('at_option');
-        option.setAttribute('category-uuid', item.uuid);
-        option.setAttribute('dropdown-type', 'subcategory');
-        option.setAttribute('data-cy', `at-category-option-${item.uuid}`);
-        option.innerHTML = `
-            ${item.json_data.iconUrl ? `
-                <img class="at_avatar_xs" style="display:inline-block" src="${item.json_data.iconUrl}"/>
-            ` : `
-                <span class="at_colored-indicator" style="background-color:rgb(255,255,255)"></span>
-            `}
-            ${item.name}
-        `;
+        const option = createOptionElement(item, 'subcategory');
+        // const option = document.createElement('div')
+        // option.classList.add('at_option')
+        // option.setAttribute('category-uuid',item.uuid)
+        // option.setAttribute('dropdown-type','subcategory')
+        // option.setAttribute('data-cy',`at-category-option-${item.uuid}`)
+        // option.innerHTML = `
+        //     ${item.json_data.iconUrl ? `
+        //         <img class="at_avatar_xs" style="display:inline-block" src="${item.json_data.iconUrl}"/>
+        //     ` : `
+        //         <span class="at_colored-indicator" style="background-color:rgb(255,255,255)"></span>
+        //     `}
+        //     ${item.name}
+        // `
         option.onclick = () => {
             selectOption(option, isFilterDropdown ? 'at-subcategory-filter-dropdown-toggle' : 'at-subcategory-dropdown-toggle');
         };

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

@@ -158,10 +158,10 @@ export function renderTags(tags) {
     batchAddEventListenerByClassName('at_tag_row', (event) => __awaiter(this, void 0, void 0, function* () {
         console.log('Event', event);
         //@ts-ignore
-        const tagRow = document.getElementById(event.target.id);
+        const tagRow = event.target.closest('.at_tag_row');
         if (tagRow) {
-            const tagId = tagRow.getAttribute('tag-id');
-            if (tagId) {
+            const tagId = tagRow.children[1].getAttribute('tag-id');
+            if (tagId && tagId != null) {
                 yield gotoTag(tagId);
             }
         }

package/lib/tag.js

@@ -102,19 +102,19 @@ function setTagIcon(payload) {
             // get color as image
             const colorImg = getTagColorImageSrc(payload.color);
             console.log('__@ ICON colorImg:', colorImg);
-            const colorImageRes = yield axios.get(colorImg
-            //   {
-            //   responseType: 'arraybuffer',
-            // }
-            );
+            const colorImageRes = yield axios.get(colorImg, {
+                responseType: 'arraybuffer',
+            });
             console.log('__@ ICON responsessss:', colorImageRes.data);
-            const response = yield axios.get(payload.icon);
+            const response = yield axios.get(payload.icon, {
+                responseType: 'arraybuffer',
+            });
             console.log('__@ ICON response:', JSON.stringify(response));
             // convert image to base64
-            const base64 = arrayBufferToBase64(response);
-            console.log('__@ ICON base64:', colorImg);
+            const base64 = arrayBufferToBase64(response.data);
+            console.log('__@ ICON base64:', base64);
             const colorImgB64 = arrayBufferToBase64(colorImageRes.data);
-            console.log('__@ ICON colorImgB64:', colorImg);
+            console.log('__@ ICON colorImgB64:', colorImgB64);
             const base64Image = `data:image/jpeg;base64,${base64}`;
             const colorBase64Image = `data:image/jpeg;base64,${colorImgB64}`;
             // merge bg color image and icon 

package/package.json

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