Skip to content

Commit

Permalink
Add option to allow the control and command keys to be swapped
Browse files Browse the repository at this point in the history 
Makes it easier to trigger Command-Q, Command-W and other shortcuts
in the emulator (in browsers running on macOS, those shortcuts are
handled by the browser and pages do not get a chance to intercept them).

Fixes #10
  • Loading branch information
@mihaip
mihaip committed Oct 3, 2022
1 parent 32c2682 commit 5aec328
Show file tree
Hide file tree
Showing 6 changed files with 227 additions and 22 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# CHANGELOG

2022-10-02: Added setting to allow the control and command keys to be swapped.

2022-09-17: Audio is less laggy.

2022-09-07: Stickies are now generated as part of the image building process (and include this changelog).
Expand Down
6 changes: 5 additions & 1 deletion scripts/import-disks.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ def import_disk_image_data(

def import_archive(
manifest_json: typing.Dict[str, typing.Any]) -> machfs.Folder:

def normalize(name: str) -> str:
# Replaces : with /, to undo the escaping that unar does for path
# separators.
Expand Down Expand Up @@ -270,6 +271,7 @@ def update_folder_from_lsar_entry(folder: machfs.Folder,
def update_file_or_folder_from_lsar_entry(
file_or_folder: typing.Union[machfs.File, machfs.Folder],
entry: typing.Dict[str, typing.Any]) -> None:

def convert_date(date_str: str) -> int:
# Dates produced by lsar/XADMaster are not quite ISO 8601 compliant in
# the way they represent timezones.
Expand Down Expand Up @@ -555,7 +557,9 @@ def build_desktop_db(images: typing.List[ImageDef]) -> bytes:
• To add additional files (e.g. downloads from archives like Macintosh Repository and Macintosh Garden), simply drag them onto the screen. They will appear in the “Downloads” folder in The Outside World.
• Conversely, to get folders or files out the Mac, you put them in the “Uploads” folder. A .zip archive with them will be generated and downloaded by your browser.
• Files in the “Saved” folder will be saved across emulator runs (best-effort)
• To go full screen, you can click on the monitor's Apple logo. Or if you're on an iOS device, you can add this site to your home screen via the share icon.""",
• To go full screen, you can use the command that appears next to the monitor's Apple logo.
• Additional settings can be toggled by using the “Settings” command, also next to the monitor's Apple logo.
• If you're on an iOS device, you can add this site to your home screen via the share icon.""",
),
stickies.Sticky(
top=315,
Expand Down
26 changes: 22 additions & 4 deletions src/BasiliskII/emulator-ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ export type EmulatorConfig = {
ethernetProvider?: EmulatorEthernetProvider;
};

export type EmulatorSettings = {
swapControlAndCommand: boolean;
};

export interface EmulatorEthernetProvider {
init(macAddress: string): void;
close?(): void;
Expand Down Expand Up @@ -93,6 +97,7 @@ export interface EmulatorDelegate {
emulator: Emulator,
peers: ReadonlyArray<EmulatorEthernetPeer>
): void;
emulatorSettings?(emulator: Emulator): EmulatorSettings;
}

export type EmulatorFallbackCommandSender = (
Expand Down Expand Up @@ -438,7 +443,8 @@ export class Emulator {
#handleKeyDown = (event: KeyboardEvent) => {
event.preventDefault();
const {code} = event;
if (code in JS_CODE_TO_ADB_KEYCODE) {
const adbKeyCode = this.#getAdbKeyCode(code);
if (adbKeyCode !== undefined) {
// If this is a paste operation, send the updated clipboard contents
// to the emulator so that it can be used when executing the paste.
// Ideally we would watch for a clipboardchage event, but that's not
Expand All @@ -451,7 +457,7 @@ export class Emulator {
}
this.#input.handleInput({
type: "keydown",
keyCode: JS_CODE_TO_ADB_KEYCODE[code],
keyCode: adbKeyCode,
});
} else {
console.warn(`Unhandled key: ${code}`);
Expand All @@ -460,14 +466,26 @@ export class Emulator {

#handleKeyUp = (event: KeyboardEvent) => {
const {code} = event;
if (code in JS_CODE_TO_ADB_KEYCODE) {
const adbKeyCode = this.#getAdbKeyCode(code);
if (adbKeyCode !== undefined) {
this.#input.handleInput({
type: "keyup",
keyCode: JS_CODE_TO_ADB_KEYCODE[code],
keyCode: adbKeyCode,
});
}
};

#getAdbKeyCode(code: string): number | undefined {
if (this.#delegate?.emulatorSettings?.(this).swapControlAndCommand) {
if (code.startsWith("Control")) {
code = "Meta" + code.slice("Control".length);
} else if (code.startsWith("Meta")) {
code = "Control" + code.slice("Meta".length);
}
}
return JS_CODE_TO_ADB_KEYCODE[code];
}

#handleBeforeUnload = () => {
// Mostly necessary for the fallback mode, otherwise the page can hang
// during reload because the worker is not yielding.
Expand Down
92 changes: 78 additions & 14 deletions src/Mac.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
--screen-inner-chamfer-size: 8px;
--screen-corner-radius: 8px;
--screen-underscan: 20px;
--screen-apple-logo-display: block;
--screen-apple-logo-bottom: -16px;
--screen-controls-display: flex;
--screen-controls-bottom: -46px;
--screen-led-display: block;
--screen-led-bottom: -40px;
--screen-ethernet-status-bottom: -46px;
Expand All @@ -29,7 +29,7 @@
--screen-outer-chamfer-size: 2px;
--screen-inner-chamfer-size: 4px;
--screen-underscan: 10px;
--screen-apple-logo-bottom: -5px;
--screen-controls-bottom: -34px;
--screen-led-bottom: -28px;
--screen-ethernet-status-bottom: -34px;
}
Expand All @@ -40,7 +40,7 @@
--screen-inner-chamfer-size: 1px;
--screen-corner-radius: 4px;
--screen-underscan: 1px;
--screen-apple-logo-display: none;
--screen-controls-display: none;
--screen-led-display: none;
--screen-ethernet-status-display: none;
}
Expand All @@ -56,7 +56,7 @@ body.fullscreen .Mac {
--screen-outer-chamfer-size: 0;
--screen-inner-chamfer-size: 0;
--screen-underscan: 0;
--screen-apple-logo-display: none;
--screen-controls-display: none;
--screen-led-display: none;
--screen-ethernet-status-display: none;
}
Expand Down Expand Up @@ -99,14 +99,30 @@ body.fullscreen .Mac {
pointer-events: none;
}

.Mac-Apple-Logo {
.Mac-Controls-Container {
position: absolute;
bottom: var(--screen-apple-logo-bottom);
display: var(--screen-apple-logo-display);
bottom: var(--screen-controls-bottom);
display: var(--screen-controls-display);
left: 0;
align-items: center;
}

.Mac-Controls-Container .Mac-Control {
visibility: hidden;
margin-left: 16px;
cursor: pointer;
}

.Mac-Controls-Container:hover .Mac-Control {
visibility: visible;
}

.Mac-Apple-Logo {
position: relative;
color: transparent;
font-size: 28px;
cursor: pointer;
height: 32px;
width: 20px;
}

.Mac-Apple-Logo::before,
Expand Down Expand Up @@ -266,23 +282,24 @@ body.fullscreen .Mac {
cursor: pointer;
}

.Mac-Ethernet-Status-Text {
.Mac-Screen-Bezel-Text {
color: rgba(255, 255, 255, 0.5);
position: relative;
}

.Mac-Ethernet-Status-Text::before,
.Mac-Ethernet-Status-Text::after {
.Mac-Screen-Bezel-Text::before,
.Mac-Screen-Bezel-Text::after {
content: attr(data-text);
position: absolute;
}

.Mac-Ethernet-Status-Text::before {
.Mac-Screen-Bezel-Text::before {
top: -1px;
left: -1px;
color: rgba(0, 0, 0, 0.5);
}

.Mac-Ethernet-Status-Text::after {
.Mac-Screen-Bezel-Text::after {
position: absolute;
top: -0.5px;
left: -0.5px;
Expand Down Expand Up @@ -311,3 +328,50 @@ body.fullscreen .Mac {
margin: 0;
padding-left: 16px;
}

.Mac-Settings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
padding: 8px;
border-radius: 8px;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.Mac-Settings h1 {
font-size: 16px;
font-weight: bold;
margin: 0 0 8px 0;
}

.Mac-Settings input[type="checkbox"] {
padding: 0;
margin: 0 4px 2px 4px;
width: 12px;
vertical-align: middle;
}

.Mac-Settings-Description {
font-size: 12px;
color: #999;
margin: 2px 0 0 22px;
}

.Mac-Settings footer {
margin: 8px 0 0 0;
display: flex;
justify-content: flex-end;
}

.Mac-Settings button {
border-radius: 8px;
background: #fff;
border: solid 1px #000;
color: #000;
padding: 2px 4px;
min-width: 60px;
font-size: 14px;
}
Loading

0 comments on commit 5aec328

Please sign in to comment.