fix errors

diff --git a/tagger2/index.html b/tagger2/index.html
index 478e40414cea1b036d89baafa2af9a44c5e9f66d..1871ae7edd728bf495b13e6edc9ee792fef1ecfd 100644 (file)
--- a/tagger2/index.html
+++ b/tagger2/index.html
@@ -10,7 +10,8 @@
     </div>
     <button @click="addFontPanel('Maven Pro')">Add Font View</button>
     <button @click="addCategoriesPanel(['/Expressive/Loud'])">Add Tag View</button>
-    <add-tag :categories="sortedCategories" @tag-added="addTag"></add-tag>
+    <add-tag :categories="categories" @tag-added="addTag"></add-tag>
+    <add-category @category-added="addCategory"></add-category>
     <div style="display: flex; flex-direction: row; width: 100vw; min-height: 100vh;">
       <div v-for="(panel, idx) in panels" :key="idx" :style="{ flex: '1 1 0', minWidth: 0, borderRight: idx < panels.length - 1 ? '1px solid #eee' : 'none', height: '100vh', overflow: 'auto' }">
         <panel :panel="panel" :tags="tags && tags.items ? tags.items : []" @remove="removePanel(idx)"></panel>
@@ -24,12 +25,14 @@
     import Panel from "./Panel.js";
     import TagView from "./TagView.js";
     import AddTag from "./AddTag.js";
+    import AddCategory from "./AddCategory.js";
 
     Vue.component('tags-by-font', TagsByFont);
     Vue.component('tags-by-categories', TagsByCategories);
     Vue.component('panel', Panel);
     Vue.component('tag-view', TagView);
     Vue.component('add-tag', AddTag);
+    Vue.component('add-category', AddCategory);
     
     var app = new Vue({
       el: '#app',
@@ -41,15 +44,6 @@
           { type: 'categories', categories: ['/Expressive/Loud', '/Expressive/Childlike'] }
         ],
       },
-
-      computed: {
-        sortedCategories() {
-          const res = this.tags.items.map(tag => tag.tagName)
-            .filter((value, index, self) => self.indexOf(value) === index)
-            .sort();
-          return res;
-        }
-      },
       methods: {
         addFontPanel(font) {
           this.panels.push({ type: 'font', font });
@@ -61,7 +55,6 @@
           this.panels.splice(idx, 1);
         },
         removeTag(tag) {
-          console.log("Removing tag:", tag);
           const index = this.tags.items.indexOf(tag)
           if (index !== -1) {
             this.tags.items.splice(index, 1);
@@ -71,6 +64,17 @@
           const family = this.gf.families.find(f => f.name === tag.family);
           tag.family = family
           this.tags.items.push(tag);
+        },
+        addCategory(category) {
+          console.log("Adding category", category);
+          if (!this.tags.categories.includes(category)) {
+            this.tags.categories.push(category);
+          }
+        },
+      },
+      computed: {
+        categories() {
+          return this.tags ? this.tags.categories : [];
         }
       },
       async created() {
@@ -79,7 +83,7 @@
         await this.gf.getFamilyData();
         this.gf.loadFamilies();
         this.tags = new Tags(this.gf);
-        this.tags.items = this.tags.items;
+        this.tags.sortCategories();
         this.$root.$on("remove-tag", this.removeTag);
       }
     });

diff --git a/tagger2/models.js b/tagger2/models.js
index 5283d0164d2612ac96cb92c88714e2da1d79f82f..4746e97c4ca94cf33bb3bc213b882b62813869e7 100644 (file)
--- a/tagger2/models.js
+++ b/tagger2/models.js
@@ -26,9 +26,10 @@ export class FontTag {
         return `${this.tagName},${this.family.name},${axesCSV},${this.score}`;
     }
     get cssStyle() {
-      if (!this.family.isVF) {
+      if (this.axes.length === 0) {
         return `font-family: ${this.family.name}; font-size: 32pt;`;
       }
+      // TODO after lunch
       let cleaned = this.family.name.replaceAll('"', '')
       let [name, axes] = cleaned.split(":");
       let [axisTag, axisCoords] = this.family.axes.split("@");
@@ -116,6 +117,7 @@ export class Tags {
         this.gf = gf;
         this.items = []
         this.loadTags();
+        this.categories = [];
     }
     toCSV() {
         return this.items.map(tag => tag.toCSV()).join('\n');
@@ -127,6 +129,9 @@ export class Tags {
     sort() {
         this.items.sort((a, b) => a.tagName.localeCompare(b.tagName));
     }
+    sortCategories() {
+        this.categories.sort((a, b) => a.localeCompare(b));
+    }
     loadTags(commit) {
         if (commit === undefined) {
             commit = "refs/head/main"; // Default to main branch if no commit is specified
@@ -148,6 +153,9 @@ export class Tags {
                 }
                 const tag = new FontTag(tagName, family, [], score);
                 this.items.push(tag);
+                if (!this.categories.includes(tag.tagName)) {
+                    this.categories.push(tag.tagName);
+                }
             }
         })
     }