From 6ae368ebac1ff5b83eaff73ef73a7c109fa3acb5 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 23 Apr 2021 19:02:28 +0200 Subject: [PATCH] Reduce typing overhead in ts/editor-toolbar/index.ts and export buttonGroup --- qt/aqt/editor.py | 4 +- ts/editor-toolbar/hideable.ts | 17 ++++++ ts/editor-toolbar/identifiable.ts | 2 +- ts/editor-toolbar/index.ts | 89 +++++++++---------------------- ts/editor/addons.ts | 2 + 5 files changed, 47 insertions(+), 67 deletions(-) create mode 100644 ts/editor-toolbar/hideable.ts diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 9ab134b6b..2d7acb39a 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -173,10 +173,10 @@ class Editor: ) righttopbtns_js = ( f""" -$editorToolbar.addButtonGroup({{ +$editorToolbar.addButtonGroup(editorToolbar.buttonGroup({{ id: "addons", items: [ {righttopbtns_defs} ] -}}); +}})); """ if righttopbtns_defs else "" diff --git a/ts/editor-toolbar/hideable.ts b/ts/editor-toolbar/hideable.ts new file mode 100644 index 000000000..a236278bd --- /dev/null +++ b/ts/editor-toolbar/hideable.ts @@ -0,0 +1,17 @@ +// Copyright: Ankitects Pty Ltd and contributors +// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +interface Hideable { + hidden?: boolean; +} + +export function showComponent(component: Hideable): void { + component.hidden = false; +} + +export function hideComponent(component: Hideable): void { + component.hidden = true; +} + +export function toggleComponent(component: Hideable): void { + component.hidden = !component.hidden; +} diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts index 7b708c983..e4acb0b44 100644 --- a/ts/editor-toolbar/identifiable.ts +++ b/ts/editor-toolbar/identifiable.ts @@ -1,6 +1,6 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -export interface Identifiable { +interface Identifiable { id?: string; } diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index e1fddd15b..2909a7a88 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -1,51 +1,28 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import type { SvelteComponentDev } from "svelte/internal"; -import type { ToolbarItem } from "./types"; +import type { ToolbarItem, IterableToolbarItem } from "./types"; -import ButtonGroup from "./ButtonGroup.svelte"; -import type { ButtonGroupProps } from "./ButtonGroup"; - -import { dynamicComponent } from "sveltelib/dynamicComponent"; import { Writable, writable } from "svelte/store"; import EditorToolbarSvelte from "./EditorToolbar.svelte"; import "./bootstrap.css"; -import { Identifiable, search, add, insert } from "./identifiable"; +import { search, add, insert } from "./identifiable"; +import { showComponent, hideComponent, toggleComponent } from "./hideable"; -interface Hideable { - hidden?: boolean; -} - -function showComponent(component: Hideable): void { - component.hidden = false; -} - -function hideComponent(component: Hideable): void { - component.hidden = true; -} - -function toggleComponent(component: Hideable): void { - component.hidden = !component.hidden; -} - -const buttonGroup = dynamicComponent(ButtonGroup); - -let buttonsResolve: ( - value: Writable<(ToolbarItem & ButtonGroupProps)[]> -) => void; +let buttonsResolve: (value: Writable) => void; let menusResolve: (value: Writable) => void; export class EditorToolbar extends HTMLElement { component?: SvelteComponentDev; - buttonsPromise: Promise< - Writable<(ToolbarItem & ButtonGroupProps)[]> - > = new Promise((resolve) => { - buttonsResolve = resolve; - }); + buttonsPromise: Promise> = new Promise( + (resolve) => { + buttonsResolve = resolve; + } + ); menusPromise: Promise> = new Promise((resolve): void => { menusResolve = resolve; }); @@ -69,10 +46,8 @@ export class EditorToolbar extends HTMLElement { menusResolve(menus); } - updateButtonGroup( - update: ( - component: ToolbarItem & ButtonGroupProps & T - ) => void, + updateButtonGroup( + update: (component: IterableToolbarItem) => void, group: string | number ): void { this.buttonsPromise.then((buttons) => { @@ -80,11 +55,7 @@ export class EditorToolbar extends HTMLElement { const foundGroup = search(buttonGroups, group); if (foundGroup) { - update( - foundGroup as ToolbarItem & - ButtonGroupProps & - T - ); + update(foundGroup as IterableToolbarItem); } return buttonGroups; @@ -95,33 +66,31 @@ export class EditorToolbar extends HTMLElement { } showButtonGroup(group: string | number): void { - this.updateButtonGroup(showComponent, group); + this.updateButtonGroup(showComponent, group); } hideButtonGroup(group: string | number): void { - this.updateButtonGroup(hideComponent, group); + this.updateButtonGroup(hideComponent, group); } toggleButtonGroup(group: string | number): void { - this.updateButtonGroup(toggleComponent, group); + this.updateButtonGroup(toggleComponent, group); } - insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0): void { + insertButtonGroup(newGroup: IterableToolbarItem, group: string | number = 0): void { this.buttonsPromise.then((buttons) => { buttons.update((buttonGroups) => { - const newButtonGroup = buttonGroup(newGroup); - return insert(buttonGroups, newButtonGroup, group); + return insert(buttonGroups, newGroup, group); }); return buttons; }); } - addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1): void { + addButtonGroup(newGroup: IterableToolbarItem, group: string | number = -1): void { this.buttonsPromise.then((buttons) => { buttons.update((buttonGroups) => { - const newButtonGroup = buttonGroup(newGroup); - return add(buttonGroups, newButtonGroup, group); + return add(buttonGroups, newGroup, group); }); return buttons; @@ -155,30 +124,22 @@ export class EditorToolbar extends HTMLElement { } insertButton( - newButton: ToolbarItem & Identifiable, + newButton: ToolbarItem, group: string | number, button: string | number = 0 ): void { - this.updateButtonGroup((component) => { - component.items = insert( - component.items as (ToolbarItem & Identifiable)[], - newButton, - button - ); + this.updateButtonGroup((component: IterableToolbarItem) => { + component.items = insert(component.items, newButton, button); }, group); } addButton( - newButton: ToolbarItem & Identifiable, + newButton: ToolbarItem, group: string | number, button: string | number = -1 ): void { - this.updateButtonGroup((component) => { - component.items = add( - component.items as (ToolbarItem & Identifiable)[], - newButton, - button - ); + this.updateButtonGroup((component: IterableToolbarItem) => { + component.items = add(component.items, newButton, button); }, group); } } diff --git a/ts/editor/addons.ts b/ts/editor/addons.ts index 2dfc2a628..c7383cf1f 100644 --- a/ts/editor/addons.ts +++ b/ts/editor/addons.ts @@ -3,6 +3,7 @@ import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent"; import { + buttonGroup, rawButton, labelButton, iconButton, @@ -18,6 +19,7 @@ export const editorToolbar: Record< string, (props: Record) => DynamicSvelteComponent > = { + buttonGroup, rawButton, labelButton, iconButton,