diff --git a/src/public/app/components/app_context.ts b/src/public/app/components/app_context.ts index e93994fd5..8b5b7eb7c 100644 --- a/src/public/app/components/app_context.ts +++ b/src/public/app/components/app_context.ts @@ -22,10 +22,9 @@ import type LoadResults from "../services/load_results.js"; import type { Attribute } from "../services/attribute_parser.js"; import type NoteTreeWidget from "../widgets/note_tree.js"; import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js"; -import type { ContextMenuEvent } from "../menus/context_menu.js"; import type TypeWidget from "../widgets/type_widgets/type_widget.js"; import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js"; -import TouchBarWidget from "../widgets/touch_bar.js"; +import type { NativeImage } from "electron"; interface Layout { getRootWidget: (appContext: AppContext) => RootWidget; @@ -256,6 +255,11 @@ export type CommandMappings = { refreshResults: {}; refreshSearchDefinition: {}; + + buildTouchBar: CommandData & { + TouchBar: typeof import("electron").TouchBar; + buildIcon(name: string): NativeImage; + }; }; type EventMappings = { @@ -448,10 +452,6 @@ class AppContext extends Component { this.components = [this.tabManager, new RootCommandExecutor(), new Entrypoints(), new MainTreeExecutors(), new ShortcutComponent()]; - if (utils.isElectron() && utils.isMac()) { - this.components.push(new TouchBarWidget()); - } - if (utils.isMobile()) { this.components.push(new MobileScreenSwitcherExecutor()); } diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index ecb97fe5f..f5b3dc2eb 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -88,6 +88,7 @@ import utils from "../services/utils.js"; import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js"; import ContextualHelpButton from "../widgets/floating_buttons/help_button.js"; import CloseZenButton from "../widgets/close_zen_button.js"; +import TouchBarWidget from "../widgets/touch_bar.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -153,6 +154,7 @@ export default class DesktopLayout { .filling() .collapsible() .id("center-pane") + .child(new TouchBarWidget()) .child( new SplitNoteContainer(() => new NoteWrapperWidget() diff --git a/src/public/app/widgets/touch_bar.ts b/src/public/app/widgets/touch_bar.ts index 61166a6fc..534de0ded 100644 --- a/src/public/app/widgets/touch_bar.ts +++ b/src/public/app/widgets/touch_bar.ts @@ -1,6 +1,8 @@ import utils from "../services/utils.js"; import Component from "../components/component.js"; import appContext from "../components/app_context.js"; +import NoteContextAwareWidget from "./note_context_aware_widget.js"; +import type FNote from "../entities/fnote.js"; async function triggerTextEditorCommand(command: string, args?: object) { const editor = await appContext.tabManager.getActiveContext().getTextEditor(); @@ -12,7 +14,7 @@ async function triggerTextEditorCommand(command: string, args?: object) { (editor as any).execute(command, args); } -export default class TouchBarWidget extends Component { +export default class TouchBarWidget extends NoteContextAwareWidget { nativeImage: typeof import("electron").nativeImage; remote: typeof import("@electron/remote"); @@ -21,15 +23,30 @@ export default class TouchBarWidget extends Component { super(); this.nativeImage = utils.dynamicRequire("electron").nativeImage; this.remote = utils.dynamicRequire("@electron/remote") as typeof import("@electron/remote"); - this.#setTouchBar(); + this.$widget = $("
"); + + $(window).on("focusin", async (e) => { + const target = e.target; + const parentComponentEl = $(target).closest(".component"); + // TODO: Remove typecast once it's no longer necessary. + const parentComponent = appContext.getComponentByEl(parentComponentEl[0]) as Component; + const { TouchBar } = this.remote; + if (!parentComponent) { + return; + } + + const result = parentComponent.triggerCommand("buildTouchBar", { + TouchBar, + buildIcon: this.buildIcon.bind(this) + }); + + if (result) { + this.remote.getCurrentWindow().setTouchBar(result); + } + }); } - #setTouchBar() { - const touchBarData = this.#buildTouchBar(); - this.remote.getCurrentWindow().setTouchBar(touchBarData); - } - - #buildIcon(name: string) { + buildIcon(name: string) { const sourceImage = this.nativeImage.createFromNamedImage(name, [-1, 0, 1]); const { width, height } = sourceImage.getSize(); const newImage = this.nativeImage.createEmpty(); @@ -48,58 +65,21 @@ export default class TouchBarWidget extends Component { return newImage; } - #buildTouchBar() { + #buildTextTouchBar() { const { TouchBar } = this.remote; const { TouchBarButton, TouchBarSpacer, TouchBarGroup, TouchBarSegmentedControl, TouchBarOtherItemsProxy } = this.remote.TouchBar; const items = [ new TouchBarButton({ - icon: this.#buildIcon("NSTouchBarComposeTemplate"), + icon: this.buildIcon("NSTouchBarComposeTemplate"), click: () => this.triggerCommand("createNoteIntoInbox") }), new TouchBarSpacer({ size: "large" }), - new TouchBarSegmentedControl({ - segments: [ - { label: "P" }, - { label: "H2" }, - { label: "H3" } - ], - change(selectedIndex, isSelected) { - switch (selectedIndex) { - case 0: - triggerTextEditorCommand("paragraph") - break; - case 1: - triggerTextEditorCommand("heading", { value: "heading2" }); - break; - case 2: - triggerTextEditorCommand("heading", { value: "heading3" }); - break; - } - }, - }), - new TouchBarGroup({ - items: new TouchBar({ - items: [ - new TouchBarButton({ - icon: this.#buildIcon("NSTouchBarTextBoldTemplate"), - click: () => triggerTextEditorCommand("bold") - }), - new TouchBarButton({ - icon: this.#buildIcon("NSTouchBarTextItalicTemplate"), - click: () => triggerTextEditorCommand("italic") - }), - new TouchBarButton({ - icon: this.#buildIcon("NSTouchBarTextUnderlineTemplate"), - click: () => triggerTextEditorCommand("underline") - }) - ] - }) - }), + // data should go here new TouchBarOtherItemsProxy(), new TouchBarSpacer({ size: "flexible" }), new TouchBarButton({ - icon: this.#buildIcon("NSTouchBarAddDetailTemplate"), + icon: this.buildIcon("NSTouchBarAddDetailTemplate"), click: () => this.triggerCommand("jumpToNote") }) ]; diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js index 9ac5f1b56..c950a562b 100644 --- a/src/public/app/widgets/type_widgets/editable_text.js +++ b/src/public/app/widgets/type_widgets/editable_text.js @@ -507,4 +507,49 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget { await this.reinitialize(data); } + buildTouchBarCommand(data) { + const { TouchBar, buildIcon } = data; + const { TouchBarSegmentedControl, TouchBarGroup, TouchBarButton } = TouchBar; + return [ + new TouchBarSegmentedControl({ + segments: [ + { label: "P" }, + { label: "H2" }, + { label: "H3" } + ], + change(selectedIndex, isSelected) { + switch (selectedIndex) { + case 0: + triggerTextEditorCommand("paragraph") + break; + case 1: + triggerTextEditorCommand("heading", { value: "heading2" }); + break; + case 2: + triggerTextEditorCommand("heading", { value: "heading3" }); + break; + } + }, + }), + new TouchBarGroup({ + items: new TouchBar({ + items: [ + new TouchBarButton({ + icon: buildIcon("NSTouchBarTextBoldTemplate"), + click: () => triggerTextEditorCommand("bold") + }), + new TouchBarButton({ + icon: buildIcon("NSTouchBarTextItalicTemplate"), + click: () => triggerTextEditorCommand("italic") + }), + new TouchBarButton({ + icon: buildIcon("NSTouchBarTextUnderlineTemplate"), + click: () => triggerTextEditorCommand("underline") + }) + ] + }) + }) + ]; + } + }