From 3d91cbf03e046cc3b57ac1466a7a832a176a5d1e Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Wed, 17 Jan 2024 15:33:55 -0500 Subject: [PATCH 01/17] chore: package version updated --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 84ea1a358..4c335bedc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wordplay", - "version": "0.9.15", + "version": "0.9.16", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wordplay", - "version": "0.9.15", + "version": "0.9.16", "hasInstallScript": true, "dependencies": { "colorjs.io": "^0", From c8560108748992465d58ec83e20513b0f4df9dbd Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Thu, 18 Jan 2024 12:58:21 -0500 Subject: [PATCH 02/17] feat: added label and dropdown menu to glyphchooser --- src/components/editor/GlyphChooser.svelte | 128 +++++++++++++------ src/components/widgets/DropdownButton.svelte | 92 +++++++++++++ src/components/widgets/Label.svelte | 17 +++ 3 files changed, 197 insertions(+), 40 deletions(-) create mode 100644 src/components/widgets/DropdownButton.svelte create mode 100644 src/components/widgets/Label.svelte diff --git a/src/components/editor/GlyphChooser.svelte b/src/components/editor/GlyphChooser.svelte index 32b21bc57..ce1ba4b7d 100644 --- a/src/components/editor/GlyphChooser.svelte +++ b/src/components/editor/GlyphChooser.svelte @@ -10,12 +10,17 @@ import CommandButton from '../widgets/CommandButton.svelte'; import concretize from '../../locale/concretize'; import Toggle from '../widgets/Toggle.svelte'; + import Label from '@components/widgets/Label.svelte'; + import DropdownButton from '@components/widgets/DropdownButton.svelte'; export let sourceID: string; const Defaults = Commands.filter( (command) => command.category === Category.Insert ); + + const categories = ["Emojis", "Arrows", "Shapes", "Other"]; + let dropdownLabel = 'Symbols'; // [ // CHANGE_SYMBOL, // DEGREE_SYMBOL, @@ -42,49 +47,94 @@ } -
- l.ui.source.cursor.search)} - bind:text={query} - /> -
- {#if query === ''} - {#each Defaults as command}{/each} - {:else} - {#each results as glyph}{:else}—{/each} - {/if} +
+
+
+
+ + {#each Defaults as command}{/each} +
+ { + dropdownLabel = value; + query = ''; + expanded = true; + }} + > {dropdownLabel} +
+
+ l.ui.source.toggle.glyphs)} + on={expanded} + toggle={() => { + expanded = !expanded; + dropdownLabel = 'Symbols'; + }}>{expanded ? 'โ€“' : '+'} +
+
+
+ l.ui.source.cursor.search)} + bind:text={query} + /> +
+ {#if query !== ''} + {#each results as glyph}{:else}—{/each} + {/if} +
- l.ui.source.toggle.glyphs)} - on={expanded} - toggle={() => (expanded = !expanded)}>{expanded ? 'โ€“' : '+'}
diff --git a/src/components/widgets/DropdownButton.svelte b/src/components/widgets/DropdownButton.svelte new file mode 100644 index 000000000..61f164360 --- /dev/null +++ b/src/components/widgets/DropdownButton.svelte @@ -0,0 +1,92 @@ + + + + + + +
+ l.ui.source.toggle.glyphs)} on={menuOpen} toggle={() => (menuOpen = !menuOpen)}> + + {menuOpen === openUp ? `โ–ฒ` : `โ–ผ`} + + +
+ {#each menuItems as item} +
{ + onSelect(item); + menuOpen = false; + }} + class="item">{item}
+ {/each} +
+
+ + + diff --git a/src/components/widgets/Label.svelte b/src/components/widgets/Label.svelte new file mode 100644 index 000000000..e888b80b3 --- /dev/null +++ b/src/components/widgets/Label.svelte @@ -0,0 +1,17 @@ + + +
+ + From b7d2f2faee4db829194536e1bd98449a542d9c6a Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Thu, 18 Jan 2024 13:04:04 -0500 Subject: [PATCH 03/17] style: updated naming convention --- src/components/editor/GlyphChooser.svelte | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/editor/GlyphChooser.svelte b/src/components/editor/GlyphChooser.svelte index ce1ba4b7d..cc97eaea3 100644 --- a/src/components/editor/GlyphChooser.svelte +++ b/src/components/editor/GlyphChooser.svelte @@ -48,8 +48,8 @@
-
-
+
+
{#each Defaults as command}
-
+
l.ui.source.cursor.search)} @@ -108,7 +108,7 @@ border-top: var(--wordplay-border-color) solid 1px; } - .topBar { + .top-bar { display: flex; flex-direction: row; gap: var(--wordplay-spacing); @@ -119,13 +119,13 @@ overflow: none; } - .leftBar { + .left-bar { display: flex; flex-direction: row; gap: var(--wordplay-spacing); align-items: center; justify-content: start; - width: 95%; + min-width: 95%; } .operators { @@ -147,7 +147,7 @@ padding: var(--wordplay-spacing); } - .searchArea { + .search-area { display: none; } From 7e5da8bf6832d0656221fbe5e06176e698a1365e Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Tue, 23 Jan 2024 00:29:59 -0500 Subject: [PATCH 04/17] feat: fuzzy searchable categories and virtualized list --- package-lock.json | 12 ++ package.json | 2 + src/components/editor/GlyphChooser.svelte | 95 +++++------- src/components/editor/GlyphSearchArea.svelte | 146 +++++++++++++++++++ src/components/widgets/DropdownButton.svelte | 17 ++- src/unicode/Unicode.ts | 47 +++++- src/unicode/wordplay-categories.json | 72 +++++++++ 7 files changed, 319 insertions(+), 72 deletions(-) create mode 100644 src/components/editor/GlyphSearchArea.svelte create mode 100644 src/unicode/wordplay-categories.json diff --git a/package-lock.json b/package-lock.json index 4c335bedc..543ad8949 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,12 @@ "dexie": "^4.0.1-alpha.25", "firebase": "^10.7", "firebase-functions": "^4.6", + "fuzzysort": "^2.0.4", "graphemer": "^1.4.0", "matter-js": "^0.19.0", "pitchy": "^4.1.0", "recoverable-random": "^1.0.3", + "svelte-tiny-virtual-list": "^2.0.5", "uuid": "^9", "zod": "^3.22.4" }, @@ -5971,6 +5973,11 @@ "optional": true, "peer": true }, + "node_modules/fuzzysort": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-2.0.4.tgz", + "integrity": "sha512-Api1mJL+Ad7W7vnDZnWq5pGaXJjyencT+iKGia2PlHUcSsSzWwIQ3S1isiMpwpavjYtGd2FzhUIhnnhOULZgDw==" + }, "node_modules/gaxios": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz", @@ -10985,6 +10992,11 @@ "node": ">=12" } }, + "node_modules/svelte-tiny-virtual-list": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-2.0.5.tgz", + "integrity": "sha512-xg9ckb8UeeIme4/5qlwCrl2QNmUZ8SCQYZn3Ji83cUsoASqRNy3KWjpmNmzYvPDqCHSZjruBBsoB7t5hwuzw5g==" + }, "node_modules/teeny-request": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-8.0.3.tgz", diff --git a/package.json b/package.json index aa5c0eb79..bd4fdc3af 100644 --- a/package.json +++ b/package.json @@ -85,10 +85,12 @@ "dexie": "^4.0.1-alpha.25", "firebase": "^10.7", "firebase-functions": "^4.6", + "fuzzysort": "^2.0.4", "graphemer": "^1.4.0", "matter-js": "^0.19.0", "pitchy": "^4.1.0", "recoverable-random": "^1.0.3", + "svelte-tiny-virtual-list": "^2.0.5", "uuid": "^9", "zod": "^3.22.4" }, diff --git a/src/components/editor/GlyphChooser.svelte b/src/components/editor/GlyphChooser.svelte index cc97eaea3..484bdda30 100644 --- a/src/components/editor/GlyphChooser.svelte +++ b/src/components/editor/GlyphChooser.svelte @@ -1,17 +1,12 @@
@@ -62,11 +59,11 @@ { - dropdownLabel = value; - query = ''; + onSelect={(item) => { + dropdownLabel = item.label; expanded = true; }} + bind:value={dropdownValue} > {dropdownLabel}
@@ -81,34 +78,14 @@
- l.ui.source.cursor.search)} - bind:text={query} - /> -
- {#if query !== ''} - {#each results as glyph}{:else}—{/each} - {/if} -
+
\ No newline at end of file diff --git a/src/components/widgets/DropdownButton.svelte b/src/components/widgets/DropdownButton.svelte index 61f164360..491d2434e 100644 --- a/src/components/widgets/DropdownButton.svelte +++ b/src/components/widgets/DropdownButton.svelte @@ -1,14 +1,20 @@ + +
- l.ui.source.cursor.search)} - bind:text={query} - /> +
+ l.ui.source.cursor.search)} + fill + bind:text={query} + /> +
Date: Sun, 11 Feb 2024 20:34:51 -0500 Subject: [PATCH 06/17] feat: feedback on empty result --- src/components/editor/GlyphSearchArea.svelte | 78 +++++++++++--------- 1 file changed, 45 insertions(+), 33 deletions(-) diff --git a/src/components/editor/GlyphSearchArea.svelte b/src/components/editor/GlyphSearchArea.svelte index ebdb5863f..03ebf1cd3 100644 --- a/src/components/editor/GlyphSearchArea.svelte +++ b/src/components/editor/GlyphSearchArea.svelte @@ -50,46 +50,47 @@ />
+
+
+ +
+
+ {#each recentlyUsed as glyph}{/each} +
+
- {#if index == 0} -
-
- + {#if results.length > 0} +
+ {#each getGlyphRow(index, category) as glyph} +
+ +
+ {/each}
-
- {#each recentlyUsed as glyph}{/each} -
-
{:else} -
- {#each getGlyphRow(index - 2, category) as glyph} -
- -
- {/each} -
+ No results found {/if}
@@ -108,6 +109,7 @@ .search-wrapper { width:12%; overflow: hidden; + margin-right: var(--wordplay-spacing); } .label-wrapper { @@ -119,7 +121,7 @@ display:flex; flex-direction: column; flex-grow: 1; - max-height: 180px; + max-height: 190px; } .recents-bar { @@ -145,10 +147,20 @@ width: 100%; } + .glyph-row:first-child { + padding-top: var(--wordplay-spacing); + } + .glyph-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; } + + .no-response-text { + color: var(--wordplay-inactive-color); + font-style: italic; + opacity: 1; + } \ No newline at end of file From 275427f640e045d3e6409b47426a1e73bd42403a Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Mon, 12 Feb 2024 11:14:45 -0500 Subject: [PATCH 07/17] feat: glyph button selectable area fills full space --- src/components/editor/GlyphSearchArea.svelte | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/editor/GlyphSearchArea.svelte b/src/components/editor/GlyphSearchArea.svelte index 03ebf1cd3..a3cd16af8 100644 --- a/src/components/editor/GlyphSearchArea.svelte +++ b/src/components/editor/GlyphSearchArea.svelte @@ -68,7 +68,7 @@
@@ -78,6 +78,7 @@ {#each getGlyphRow(index, category) as glyph}
- { - dropdownLabel = item.label; - expanded = true; - }} - bind:value={dropdownValue} - > {dropdownLabel} +
+ { + dropdownLabel = item; + expanded = true; + }} + bind:value={dropdownValue} + /> +
diff --git a/src/components/widgets/DropdownButton.svelte b/src/components/widgets/DropdownButton.svelte index 491d2434e..e882005be 100644 --- a/src/components/widgets/DropdownButton.svelte +++ b/src/components/widgets/DropdownButton.svelte @@ -1,56 +1,374 @@ -
- l.ui.source.toggle.glyphs)} on={menuOpen} toggle={() => (menuOpen = !menuOpen)}> - - {menuOpen === openUp ? `โ–ฒ` : `โ–ผ`} +
+
+ l.ui.source.toggle.glyphs)} + on={menuOpen} + fill={fill} + toggle={() => (menuOpen = !menuOpen)} + onBlur={onComboBlur} + onKeyDown={onComboKeyDown} + > +
+ {options[activeIndex]} + {menuOpen === openUp ? `โ–ฒ` : `โ–ผ`} +
+
-
- {#each menuItems as item} -
{ - onSelect(item); + {#each options as item, i} +
+ value = item; + }} + class="item" + class:active={i === activeIndex} + > + {item} + {/each}
diff --git a/src/components/widgets/Toggle.svelte b/src/components/widgets/Toggle.svelte index 10a97d277..d920cb94c 100644 --- a/src/components/widgets/Toggle.svelte +++ b/src/components/widgets/Toggle.svelte @@ -11,6 +11,10 @@ export let active = true; export let uiid: string | undefined = undefined; export let command: Command | undefined = undefined; + export let fill: boolean = false; + + export let onBlur: ((event: FocusEvent) => void) | undefined = undefined + export let onKeyDown: ((event: KeyboardEvent) => void) | undefined = undefined; async function doToggle(event: Event) { if (active) { @@ -31,10 +35,13 @@ data-uiid={uiid} class:on {title} + class:fill aria-label={title} aria-disabled={!active} aria-pressed={on} on:dblclick|stopPropagation + on:blur={onBlur} + on:keydown={onKeyDown} on:click={(event) => event.button === 0 && active ? doToggle(event) : undefined} > @@ -86,4 +93,8 @@ background: none; color: var(--wordplay-inactive-color); } + + .fill { + width: 100%; + } From 1ae91290dfb0abdf106e9a27f6088f2cd70f8eed Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Thu, 11 Apr 2024 00:28:33 -0400 Subject: [PATCH 14/17] fix: deleted unused propertys to fix the warnings --- src/components/editor/GlyphSearchArea.svelte | 1 - src/components/widgets/DropdownButton.svelte | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/editor/GlyphSearchArea.svelte b/src/components/editor/GlyphSearchArea.svelte index 93be92337..d6510a4e5 100644 --- a/src/components/editor/GlyphSearchArea.svelte +++ b/src/components/editor/GlyphSearchArea.svelte @@ -12,7 +12,6 @@ export let sourceID: string; export let category: WordplayCategories | undefined; - export let expanded: boolean; const editors = getEditors(); diff --git a/src/components/widgets/DropdownButton.svelte b/src/components/widgets/DropdownButton.svelte index e882005be..d0fb4b2af 100644 --- a/src/components/widgets/DropdownButton.svelte +++ b/src/components/widgets/DropdownButton.svelte @@ -21,7 +21,6 @@ import Toggle from './Toggle.svelte'; export let direction: 'up' | 'down' = 'down'; - export let onSelect: (option: string) => void = () => {}; export let options:string[] = []; export let value: string = options[0]; export let fill: boolean = false; From ffe9b0d24a3cb26599bba21969cb966fdeb6f505 Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Sun, 14 Apr 2024 00:02:23 -0400 Subject: [PATCH 15/17] feat: recently used project level property --- src/components/editor/GlyphChooser.svelte | 5 +-- src/components/editor/GlyphSearchArea.svelte | 46 +++++++++++++++++--- src/components/widgets/DropdownButton.svelte | 1 + src/db/ProjectHistory.ts | 2 +- src/models/Project.ts | 12 +++++ src/models/ProjectSchemas.ts | 2 + 6 files changed, 56 insertions(+), 12 deletions(-) diff --git a/src/components/editor/GlyphChooser.svelte b/src/components/editor/GlyphChooser.svelte index 9b3bf4505..0682dcbed 100644 --- a/src/components/editor/GlyphChooser.svelte +++ b/src/components/editor/GlyphChooser.svelte @@ -21,7 +21,6 @@ "shapes", "other", ] - let dropdownLabel = 'Symbols'; let dropdownValue: WordplayCategories | undefined = undefined; let expanded = false; @@ -45,7 +44,6 @@ direction="up" fill onSelect={(item) => { - dropdownLabel = item; expanded = true; }} bind:value={dropdownValue} @@ -58,13 +56,12 @@ on={expanded} toggle={() => { expanded = !expanded; - dropdownLabel = 'Symbols'; }}>{expanded ? 'โ€“' : '+'}
- +
diff --git a/src/components/editor/GlyphSearchArea.svelte b/src/components/editor/GlyphSearchArea.svelte index d6510a4e5..63640eeda 100644 --- a/src/components/editor/GlyphSearchArea.svelte +++ b/src/components/editor/GlyphSearchArea.svelte @@ -1,12 +1,12 @@ @@ -61,7 +89,9 @@
- {#each recentlyUsed as glyph}{/each} + > +
{/each} void = () => {}; export let options:string[] = []; export let value: string = options[0]; export let fill: boolean = false; diff --git a/src/db/ProjectHistory.ts b/src/db/ProjectHistory.ts index da58e04b7..078d37949 100644 --- a/src/db/ProjectHistory.ts +++ b/src/db/ProjectHistory.ts @@ -77,7 +77,7 @@ export class ProjectHistory { // Is the undo pointer before the end? Trim the future before we add the future. this.history.splice( this.index + 1, - this.history.length - this.index - 1 + this.history.length - this.index - 1, ); // If we're remembering the last change, append the new project version. diff --git a/src/models/Project.ts b/src/models/Project.ts index 89b9a0a55..0c64189c1 100644 --- a/src/models/Project.ts +++ b/src/models/Project.ts @@ -147,6 +147,7 @@ export default class Project { flags: Moderation = moderatedFlags(), // This is last; omitting it updates the time. timestamp: number | undefined = undefined, + recentGlyphs: string[] = [], ) { return new Project({ v: ProjectSchemaLatestVersion, @@ -167,6 +168,7 @@ export default class Project { archived, persisted, gallery, + recentGlyphs, flags, timestamp: timestamp ?? Date.now(), nonPII: [], @@ -806,6 +808,7 @@ export default class Project { archived: project.archived, persisted: project.persisted, gallery: project.gallery, + recentGlyphs: project.recentGlyphs, flags: { ...project.flags }, timestamp: project.timestamp, nonPII: project.nonPII, @@ -854,6 +857,14 @@ export default class Project { return new Project({ ...this.data, gallery: id }); } + getRecentGlyphs() { + return this.data.recentGlyphs; + } + + withRecentGlyphs(glyphs: string[]) { + return new Project({ ...this.data, recentGlyphs: glyphs }); + } + getFlags() { return { ...this.data.flags }; } @@ -907,6 +918,7 @@ export default class Project { persisted: this.isPersisted(), timestamp: this.data.timestamp, gallery: this.data.gallery, + recentGlyphs: this.data.recentGlyphs, flags: { ...this.data.flags }, nonPII: this.data.nonPII, }; diff --git a/src/models/ProjectSchemas.ts b/src/models/ProjectSchemas.ts index 9ba4ee084..bb874143b 100644 --- a/src/models/ProjectSchemas.ts +++ b/src/models/ProjectSchemas.ts @@ -46,6 +46,8 @@ export const ProjectSchemaV1 = z.object({ persisted: z.boolean(), /** An optional gallery ID, indicating which gallery this project is in. */ gallery: z.nullable(z.string()), + /** Recently used Glyphs for the project */ + recentGlyphs: z.array(z.string()), /** Moderation state */ flags: z.object({ dehumanization: z.nullable(z.boolean()), From f5122faf33be7832b876c9c5948ddc914e37f436 Mon Sep 17 00:00:00 2001 From: "Roe, Elliot Benjamin" Date: Sun, 14 Apr 2024 00:14:40 -0400 Subject: [PATCH 16/17] fix: combobox mouse select working --- src/components/editor/GlyphSearchArea.svelte | 1 - src/components/widgets/DropdownButton.svelte | 16 ++++------------ 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/components/editor/GlyphSearchArea.svelte b/src/components/editor/GlyphSearchArea.svelte index 63640eeda..4ed57352e 100644 --- a/src/components/editor/GlyphSearchArea.svelte +++ b/src/components/editor/GlyphSearchArea.svelte @@ -50,7 +50,6 @@ } else { newGlyphs = [glyph].concat(recentGlyphs.splice(0, RECENTLY_USED_SIZE - 1)); } - console.log(newGlyphs); const newProj = $project.withRecentGlyphs(newGlyphs) Projects.reviseProject( diff --git a/src/components/widgets/DropdownButton.svelte b/src/components/widgets/DropdownButton.svelte index e882005be..ad764b971 100644 --- a/src/components/widgets/DropdownButton.svelte +++ b/src/components/widgets/DropdownButton.svelte @@ -196,18 +196,9 @@ return searchString; }; - const onComboBlur = (event: FocusEvent) => { - // select current option and close - if (menuOpen) { - selectOption(activeIndex); - updateMenuState(false, false); - } - }; - const onComboKeyDown = (event: KeyboardEvent) => { const { key } = event; const max = options.length - 1; - const action = getActionFromKey(event, menuOpen); switch (action) { @@ -328,7 +319,6 @@ on={menuOpen} fill={fill} toggle={() => (menuOpen = !menuOpen)} - onBlur={onComboBlur} onKeyDown={onComboKeyDown} >
@@ -338,14 +328,16 @@
-
{#each options as item, i}