BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding widget for time position visualisation

Browse Source
This commit is contained in:
Raphaël Forment
2023-09-07 18:01:41 +02:00
parent c9ec65a8aa
commit 281c630827
5 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -47,15 +47,17 @@
width: 100%; width: 100%;
height: 92vh; height: 92vh;
max-height: 100vh; max-height: 100vh;
z-index: 0;
} }
.cm-scroller { .cm-scroller {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
z-index: 0;
} }
</style> </style>
<body class="bg-neutral-800 overflow-y-hidden"> <body class="z-0 bg-neutral-800 overflow-y-hidden">
<!-- The header is hidden on smaller devices --> <!-- The header is hidden on smaller devices -->
<header class="py-2 block text-white bg-neutral-900"> <header class="py-2 block text-white bg-neutral-900">
@ -219,11 +221,17 @@
<label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label> <label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
</div> </div>
</div> </div>
<!-- Line Numbers --> <!-- Checkboxes -->
<div class="flex items-center mb-4 ml-8"> <div class="flex flex-row">
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <div class="flex items-center mb-4 ml-8">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label> <input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
</div> <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
</div>
<div class="flex items-center mb-4 ml-8">
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
</div>
</div>
<!-- Information card --> <!-- Information card -->
<div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0"> <div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
<a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700"> <a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
@ -328,4 +336,5 @@
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
</html> </html>

5
src/AppSettings.ts
View File

@ -50,6 +50,7 @@ export interface Settings {
universes: Universes; universes: Universes;
selected_universe: string; selected_universe: string;
line_numbers: boolean; line_numbers: boolean;
time_position: boolean;
} }
export const template_universe = { export const template_universe = {
@ -113,6 +114,7 @@ export class AppSettings {
public universes: Universes; public universes: Universes;
public selected_universe: string = "Default"; public selected_universe: string = "Default";
public line_numbers: boolean = true; public line_numbers: boolean = true;
public time_position: boolean = true;
constructor() { constructor() {
const settingsFromStorage = JSON.parse( const settingsFromStorage = JSON.parse(
@ -128,6 +130,7 @@ export class AppSettings {
this.universes = settingsFromStorage.universes; this.universes = settingsFromStorage.universes;
this.selected_universe = settingsFromStorage.selected_universe; this.selected_universe = settingsFromStorage.selected_universe;
this.line_numbers = settingsFromStorage.line_numbers; this.line_numbers = settingsFromStorage.line_numbers;
this.time_position = settingsFromStorage.time_position;
} else { } else {
this.universes = template_universes; this.universes = template_universes;
} }
@ -149,6 +152,7 @@ export class AppSettings {
universes: this.universes, universes: this.universes,
selected_universe: this.selected_universe, selected_universe: this.selected_universe,
line_numbers: this.line_numbers, line_numbers: this.line_numbers,
time_position: this.time_position
}; };
} }
@ -168,6 +172,7 @@ export class AppSettings {
this.font_size = settings.font_size; this.font_size = settings.font_size;
this.selected_universe = settings.selected_universe; this.selected_universe = settings.selected_universe;
this.line_numbers = settings.line_numbers; this.line_numbers = settings.line_numbers;
this.time_position = settings.time_position;
localStorage.setItem("topos", JSON.stringify(this.data)); localStorage.setItem("topos", JSON.stringify(this.data));
} }
} }

4
src/TransportNode.js
View File

@ -8,6 +8,7 @@ export class TransportNode extends AudioWorkletNode {
this.app = application this.app = application
this.port.addEventListener("message", this.handleMessage); this.port.addEventListener("message", this.handleMessage);
this.port.start(); this.port.start();
this.timeviewer = document.getElementById("timeviewer");
} }
/** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */ /** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */
@ -17,6 +18,7 @@ export class TransportNode extends AudioWorkletNode {
this.app.clock.tick++ this.app.clock.tick++
const futureTimeStamp = this.app.clock.convertTicksToTimeposition(this.app.clock.tick); const futureTimeStamp = this.app.clock.convertTicksToTimeposition(this.app.clock.tick);
this.app.clock.time_position = futureTimeStamp; this.app.clock.time_position = futureTimeStamp;
this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat+1}:${zeroPad(futureTimeStamp.pulse, 2)}`;
if (this.app.exampleIsPlaying) { if (this.app.exampleIsPlaying) {
tryEvaluate(this.app, this.app.example_buffer); tryEvaluate(this.app, this.app.example_buffer);
@ -48,4 +50,4 @@ export class TransportNode extends AudioWorkletNode {
this.port.postMessage("stop"); this.port.postMessage("stop");
} }
} }

15
src/main.ts
View File

@ -180,6 +180,12 @@ export class Editor {
"show-line-numbers" "show-line-numbers"
) as HTMLInputElement; ) as HTMLInputElement;
// Time Position checkbox
time_position_checkbox: HTMLInputElement = document.getElementById(
"show-time-position"
) as HTMLInputElement;
// Editor mode selection // Editor mode selection
normal_mode_button: HTMLButtonElement = document.getElementById( normal_mode_button: HTMLButtonElement = document.getElementById(
"normal-mode" "normal-mode"
@ -523,6 +529,7 @@ export class Editor {
`font-size: ${this.settings.font_size}px;` `font-size: ${this.settings.font_size}px;`
); );
this.line_numbers_checkbox.checked = this.settings.line_numbers; this.line_numbers_checkbox.checked = this.settings.line_numbers;
this.time_position_checkbox.checked = this.settings.time_position;
let modal_settings = document.getElementById("modal-settings"); let modal_settings = document.getElementById("modal-settings");
let editor = document.getElementById("editor"); let editor = document.getElementById("editor");
modal_settings?.classList.remove("invisible"); modal_settings?.classList.remove("invisible");
@ -581,6 +588,14 @@ export class Editor {
}); });
}); });
this.time_position_checkbox.addEventListener("change", () => {
let timeviewer = document.getElementById("timeviewer") as HTMLElement;
let checked = this.time_position_checkbox.checked ? true : false;
this.settings.time_position = checked;
checked ? timeviewer.classList.remove('hidden') : timeviewer.classList.add('hidden');
});
this.vim_mode_button.addEventListener("click", () => { this.vim_mode_button.addEventListener("click", () => {
this.settings.vimMode = true; this.settings.vimMode = true;
this.view.dispatch({ this.view.dispatch({

15
src/themes/toposTheme.ts
View File

@ -42,10 +42,17 @@ export const toposDarkTheme = EditorView.theme(
caretColor: cursor, caretColor: cursor,
fontFamily: "'Victor Mono', monospace", fontFamily: "'Victor Mono', monospace",
}, },
".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, ".cm-cursor, .cm-dropCursor": {
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": borderLeftColor: cursor,
{ backgroundColor: base00, border: `0.5px solid ${base00}` }, },
".cm-panels": { backgroundColor: darkBackground, color: base05 }, "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
backgroundColor: base00,
border: `0.5px solid ${base00}`,
},
".cm-panels": {
backgroundColor: darkBackground,
color: base05,
},
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
".cm-searchMatch": { ".cm-searchMatch": {