Skip to content

Commit 3860dc3

Browse files
NikitaSkrynnikNikitaSkrynnik
committed
add more shortcuts + properly handle tab presses + prevent double shortcuts
Signed-off-by: NikitaSkrynnik <[email protected]>
1 parent 1cef0ff commit 3860dc3

File tree

13 files changed

+182
-128
lines changed

13 files changed

+182
-128
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "huly-browser",
2+
"name": "Huly Browser",
33
"version": "0.3.4",
44
"description": "",
55
"type": "module",

‎src-tauri/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[package]
2-
name = "huly-browser"
2+
name = "Huly Browser"
33
version = "0.3.4"
44
description = "A Tauri App"
55
authors = ["you"]

‎src-tauri/tauri.conf.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "https://schema.tauri.app/config/2",
3-
"productName": "huly-browser",
3+
"productName": "Huly Browser",
44
"version": "0.3.4",
55
"identifier": "huly-browser",
66
"build": {
@@ -12,7 +12,7 @@
1212
"app": {
1313
"windows": [
1414
{
15-
"title": "huly-browser",
15+
"title": "Huly Browser",
1616
"width": 800,
1717
"height": 600
1818
}

‎src/App.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ import Notification from "./components/Notification";
55
import "./App.css";
66
import { invoke } from "@tauri-apps/api/core";
77
import Sidebar from "./components/sidebar";
8-
import { ShortcutPlugin } from "./state/plugins/shortcut";
9-
10-
11-
128

139
function App() {
1410
let [event, setEvent] = createSignal<AppEvent>({ message: "Initializing App", type: "info" });
@@ -18,7 +14,6 @@ function App() {
1814
const args = await invoke("get_args") as Arguments;
1915
let app = await initializeApp(args, setEvent);
2016
if (!app) return;
21-
app.addPlugin(new ShortcutPlugin());
2217
setApp(app);
2318
});
2419

‎src/components/Browser.tsx‎

Lines changed: 37 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,7 @@ function Browser(props: { app: AppState }) {
5454
});
5555

5656
connection.events.on("Cursor", (cursor) => InputHandler.setCursor(canvas, cursor));
57-
58-
InputHandler.setupEventListeners(canvas, connection);
59-
57+
InputHandler.setupEventListeners(props.app, canvas, connection);
6058
});
6159

6260
return (
@@ -71,7 +69,6 @@ function Browser(props: { app: AppState }) {
7169

7270
export default Browser;
7371

74-
7572
class Renderer {
7673
private canvas: HTMLCanvasElement;
7774
private canvasCtx: CanvasRenderingContext2D;
@@ -119,52 +116,50 @@ class InputHandler {
119116
[Cursor.Crosshair]: "crosshair",
120117
};
121118

122-
static setupEventListeners(canvas: HTMLCanvasElement, connection: TabConnection) {
123-
canvas.onmousemove = (e) => this.handleMouseMove(e, connection);
124-
canvas.onmousedown = (e) => this.handleMouseDown(e, connection);
125-
canvas.onmouseup = (e) => this.handleMouseUp(e, connection);
126-
canvas.onwheel = (e) => this.handleWheel(e, connection);
119+
static setupEventListeners(app: AppState, canvas: HTMLCanvasElement, connection: TabConnection) {
120+
canvas.onmousemove = (e) => connection.page.mouseMove(e.offsetX, e.offsetY);
121+
canvas.onmousedown = (e) => connection.page.click(e.offsetX, e.offsetY, e.button, true);
122+
canvas.onmouseup = (e) => connection.page.click(e.offsetX, e.offsetY, e.button, false);
123+
canvas.onwheel = (e) => connection.page.scroll(e.offsetX, e.offsetY, e.deltaX, e.deltaY);
127124

128-
canvas.onkeydown = (e) => this.handleKeyDown(e, connection);
129-
canvas.onkeyup = (e) => this.handleKeyUp(e, connection);
130-
131-
canvas.onfocus = () => connection.page.focus(true);
132-
canvas.onblur = () => connection.page.focus(false);
133-
}
134-
135-
private static handleMouseMove(e: MouseEvent, connection: TabConnection) {
136-
connection.page.mouseMove(e.offsetX, e.offsetY);
137-
}
138-
139-
private static handleMouseDown(e: MouseEvent, connection: TabConnection) {
140-
connection.page.click(e.offsetX, e.offsetY, e.button, true);
141-
}
125+
canvas.onkeydown = (e) => {
126+
if (app.shortcuts.checkShortcutConflict(e)) return;
142127

143-
private static handleMouseUp(e: MouseEvent, connection: TabConnection) {
144-
connection.page.click(e.offsetX, e.offsetY, e.button, false);
145-
}
128+
if (e.key === "Tab") {
129+
e.preventDefault();
130+
}
146131

147-
private static handleWheel(e: WheelEvent, connection: TabConnection) {
148-
connection.page.scroll(e.offsetX, e.offsetY, e.deltaX, e.deltaY);
149-
}
132+
const keyCode = domCodeToKeyCode(e.code);
133+
if (keyCode !== undefined) {
134+
let unicode = 0;
135+
if (e.key.length === 1) {
136+
unicode = e.key.charCodeAt(0);
137+
}
138+
connection.page.key(keyCode, unicode, true, e.ctrlKey, e.shiftKey);
139+
}
140+
}
141+
canvas.onkeyup = (e) => {
142+
if (app.shortcuts.checkShortcutConflict(e)) return;
150143

151-
private static handleKeyDown(e: KeyboardEvent, connection: TabConnection) {
152-
const keyCode = domCodeToKeyCode(e.code);
153-
if (keyCode !== undefined) {
154-
let unicode = 0;
155-
if (e.key.length === 1) {
156-
unicode = e.key.charCodeAt(0);
144+
if (e.key === "Tab") {
145+
e.preventDefault();
157146
}
158-
connection.page.key(keyCode, unicode, true, e.ctrlKey, e.shiftKey);
159147

148+
const keyCode = domCodeToKeyCode(e.code);
149+
if (keyCode !== undefined) {
150+
connection.page.key(keyCode, 0, false, e.ctrlKey, e.shiftKey);
151+
}
160152
}
161-
}
162153

163-
private static handleKeyUp(e: KeyboardEvent, connection: TabConnection) {
164-
const keyCode = domCodeToKeyCode(e.code);
165-
if (keyCode !== undefined) {
166-
connection.page.key(keyCode, 0, false, e.ctrlKey, e.shiftKey);
167-
}
154+
canvas.onfocus = () => {
155+
app.setBrowserFocused(true);
156+
connection.page.focus(true);
157+
};
158+
canvas.onblur = () => {
159+
console.log("canvas blurred");
160+
app.setBrowserFocused(false);
161+
connection.page.focus(false);
162+
};
168163
}
169164

170165
static setCursor(canvas: HTMLCanvasElement, cursor: Cursor) {

‎src/components/sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Sidebar(props: { app: AppState }) {
1212
<ResizablePane.Content class="sidebar-content">
1313
<TabControls app={props.app} />
1414
<Input app={props.app} />
15-
<Show when={props.app.profileManager}>
15+
<Show when={props.app.profiles}>
1616
<Profiles app={props.app} />
1717
</Show>
1818
<div onClick={() => props.app.newTab()} class="new-tab-button">

‎src/components/sidebar/Input.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import styles from "./Input.module.scss";
22

3-
import { createEffect, createMemo, createSignal } from "solid-js";
3+
import { createEffect, createMemo, createSignal, onMount } from "solid-js";
44
import { AppState } from "../../state/state";
55

66
export default function Input(props: { app: AppState }) {
7+
let ref!: HTMLInputElement;
78
let [input, setInput] = createSignal<string>("");
8-
99
let activeTabMemo = createMemo(() => props.app.getActiveTab());
1010

11+
onMount(() => {
12+
props.app.setFocusUrlCallback(() => ref.focus());
13+
})
14+
1115
createEffect(() => {
1216
const activeTab = activeTabMemo();
1317
if (activeTab) {
@@ -33,10 +37,12 @@ export default function Input(props: { app: AppState }) {
3337
return (
3438
<div class={styles.wrapper}>
3539
<input
40+
ref={ref}
3641
class={styles.input}
3742
spellcheck="false"
3843
type="text"
3944
placeholder="Search..."
45+
tabindex="-1"
4046
onInput={(e) => setInput(e.target.value)}
4147
onKeyDown={onKeyDown}
4248
value={input()} />

‎src/components/sidebar/Profiles.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { AppState } from "../../state/state";
33

44
export function Profiles(props: { app: AppState }) {
55
const fetchProfiles = async () => {
6-
let profiles = await props.app.profileManager!.getProfiles();
7-
return profiles;
6+
let profiles = await props.app.profiles!.getProfiles();
7+
return profiles; profiles
88
};
99
const [profiles] = createResource(fetchProfiles);
1010

1111
createEffect(async () => {
12-
let profile = props.app.profileManager!.selected();
13-
let client = await props.app.profileManager!.connect(profile);
12+
let profile = props.app.profiles!.selected();
13+
let client = await props.app.profiles!.connect(profile);
1414
await props.app.setClient(client);
1515
});
1616

@@ -27,8 +27,8 @@ export function Profiles(props: { app: AppState }) {
2727
<Show when={profiles()}>
2828
<div>
2929
<select
30-
value={props.app.profileManager?.selected()}
31-
onInput={e => props.app.profileManager?.setSelected((e.target as HTMLSelectElement).value)}
30+
value={props.app.profiles?.selected()}
31+
onInput={e => props.app.profiles?.setSelected((e.target as HTMLSelectElement).value)}
3232
>
3333
<option value="" disabled selected>Select a profile</option>
3434
<For each={profiles()}>

‎src/state/plugins/plugin.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)