working FontTagGroups

diff --git a/tagger2/Panel.js b/tagger2/Panel.js
index a582884b1a0e6044887dfd83b25fc4eff7c8e26f..e66cb72c22e227874ce5a8397658ead832b757f9 100644 (file)
--- a/tagger2/Panel.js
+++ b/tagger2/Panel.js
@@ -9,7 +9,7 @@ export default {
     <div class="panel" style="border:1px solid #ccc; padding:1em; margin-bottom:1em;">
       <button @click="remove" style="float:right">✕</button>
       <tags-by-font v-if="panel.type === 'font'" :tags="tags" :font="panel.font"></tags-by-font>
-      <tags-by-categories v-else-if="panel.type === 'categories'" :tags="tags" :categories="panel.categories"></tags-by-categories>
+      <tags-by-categories v-else-if="panel.type === 'categories'" :tags="tags" :categories="panel.categories" :tagGroups="panel.tagGroups"></tags-by-categories>
       <vf-view v-else-if="panel.type === 'vf-view'" :families="panel.families"></vf-view>
     </div>
   `

diff --git a/tagger2/TagsByCategories.js b/tagger2/TagsByCategories.js
index 2654089bb962510dcd6e7b311f9e1e4e5cf33387..1ede096286d9baaa623efd7b428dea4551190918 100644 (file)
--- a/tagger2/TagsByCategories.js
+++ b/tagger2/TagsByCategories.js
@@ -1,5 +1,5 @@
 export default {
-  props: ['tags', 'categories'],
+  props: ['tags', 'categories', 'tagGroups'],
   data() {
     return {
       selectedCategories: [...this.categories],
@@ -51,6 +51,11 @@ export default {
         <div v-for="tag in filteredTags" :key="tag.family.name + tag.tagName + tag.score">
           <tag-view :tag="tag"></tag-view>
         </div>
+        <div v-for="group in tagGroups" :key="group.name"> 
+          <div v-for="tag in group.tags" :key="tag.tagName + tag.family.name + tag.score" style="background-color: lightgray;">
+            <tag-view :tag="tag"></tag-view>
+          </div>
+        </div>
     </div>
   `
 };

diff --git a/tagger2/index.html b/tagger2/index.html
index ad1413710d7d99d20ce7383535d4f98f8c14e8a4..fa96c7948b4fcd584e4ba9569ec0414e398ec675 100644 (file)
--- a/tagger2/index.html
+++ b/tagger2/index.html
@@ -28,7 +28,7 @@
     </div>
   </div>
   <script type="module">
-    import { GF, Tags, FontTag } from './models.js';
+    import { GF, Tags, FontTag, FontTagGroup } from './models.js';
     import TagsByFont from "./TagsByFont.js";
     import TagsByCategories from "./TagsByCategories.js";
     import Panel from "./Panel.js";
@@ -58,6 +58,7 @@
       data: {
         gf: null,
         tags: null,
+        tagGroups: [],
         panels: [
           { type: 'font', font: 'Roboto' },
           { type: 'categories', categories: ['/Expressive/Loud', '/Expressive/Childlike'] }
@@ -68,7 +69,7 @@
           this.panels.push({ type: 'font', font });
         },
         addCategoriesPanel(categories) {
-          this.panels.push({ type: 'categories', categories });
+          this.panels.push({ type: 'categories', categories , tagGroups: this.tagGroups });
         },
         addVFViewPanel() {
           this.panels.push({ type: 'vf-view', families: this.gf.families });
@@ -104,8 +105,10 @@
               for (let category of filterSet.categories) {
                 const lowTag = new FontTag(category, family, [{tag: "wght", value: 100}], filterSet.lowTag.score);
                 const highTag = new FontTag(category, family, [{tag: "wght", value: 900}], filterSet.highTag.score);
-                this.tags.items.push(lowTag);
-                this.tags.items.push(highTag);
+                const fontTag = new FontTagGroup();
+                fontTag.addTag(lowTag);
+                fontTag.addTag(highTag);
+                this.tagGroups.push(fontTag);
               }
             }
           }
@@ -134,6 +137,13 @@
 
         // Subscribe to events
         this.$root.$on("remove-tag", this.removeTag);
+        const family = this.gf.families.find(f => f.name === 'Maven Pro');
+        const tag1 = new FontTag('/Purpose/Easy Reading', family, [{tag: "wght", value: 400}], 10);
+        const tag2 = new FontTag('/Purpose/Easy Reading', family, [{tag: "wght", value: 900}], 100);
+        const tagGroup = new FontTagGroup();
+        tagGroup.addTag(tag1);
+        tagGroup.addTag(tag2);
+        this.tagGroups.push(tagGroup);
       }
     });
     window.app = app

diff --git a/tagger2/models.js b/tagger2/models.js
index a50e9e8bcdab320c8c82bf7247443d58f07fc376..96db27bc3e203455e17f924e2bd2fcad0ec070e9 100644 (file)
--- a/tagger2/models.js
+++ b/tagger2/models.js
@@ -44,6 +44,15 @@ export class FontTag {
 
 }
 
+export class FontTagGroup {
+    constructor() {
+        this.tags = [];
+    }
+    addTag(tag) {
+        this.tags.push(tag);
+    }
+}
+
 export class Font {
     constructor(name, axes) {
         this.name = name;