diff --git a/src/ide/settings.ts b/src/ide/settings.ts index 7fede98c..78050856 100644 --- a/src/ide/settings.ts +++ b/src/ide/settings.ts @@ -1,24 +1,27 @@ import { closeBrackets, deleteBracketPair } from "@codemirror/autocomplete"; import { indentUnit } from "@codemirror/language"; import { Compartment, EditorState, Extension } from "@codemirror/state"; -import { EditorView, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, keymap } from "@codemirror/view"; +import { EditorView, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, keymap, lineNumbers } from "@codemirror/view"; +import { isMobileDevice } from "./views/baseviews"; import { debugHighlightTagsTooltip } from "./views/debug"; import { insertTabKeymap, smartIndentKeymap } from "./views/tabs"; declare var bootbox; declare var $: JQueryStatic; +export const tabSizeCompartment = new Compartment(); +export const tabsToSpacesCompartment = new Compartment(); +export const showLineNumbersCompartment = new Compartment(); export const highlightSpecialCharsCompartment = new Compartment(); export const highlightWhitespaceCompartment = new Compartment(); export const highlightTrailingWhitespaceCompartment = new Compartment(); -export const tabSizeCompartment = new Compartment(); export const closeBracketsCompartment = new Compartment(); -export const tabsToSpacesCompartment = new Compartment(); export const debugHighlightTagsCompartment = new Compartment(); export interface EditorSettings { tabSize: number; tabsToSpaces: boolean; + showLineNumbers: boolean; highlightSpecialChars: boolean; highlightWhitespace: boolean; highlightTrailingWhitespace: boolean; @@ -31,7 +34,8 @@ const SETTINGS_KEY = "8bitworkshop/editorSettings"; const defaultSettings: EditorSettings = { tabSize: 8, tabsToSpaces: true, - highlightSpecialChars: false, + showLineNumbers: !isMobileDevice, + highlightSpecialChars: true, highlightWhitespace: false, highlightTrailingWhitespace: false, closeBrackets: false, @@ -55,6 +59,7 @@ export function saveSettings(settings: EditorSettings) { const compartmentValues: [Compartment, (s: EditorSettings) => Extension][] = [ [tabSizeCompartment, s => [EditorState.tabSize.of(s.tabSize), indentUnit.of(" ".repeat(s.tabSize))]], [tabsToSpacesCompartment, s => keymap.of(s.tabsToSpaces ? smartIndentKeymap : insertTabKeymap)], + [showLineNumbersCompartment, s => s.showLineNumbers ? lineNumbers() : []], [highlightSpecialCharsCompartment, s => s.highlightSpecialChars ? highlightSpecialChars() : []], [highlightWhitespaceCompartment, s => s.highlightWhitespace ? highlightWhitespace() : []], [highlightTrailingWhitespaceCompartment, s => s.highlightTrailingWhitespace ? highlightTrailingWhitespace() : []], @@ -86,20 +91,21 @@ export function applySettingsToAll(settings: EditorSettings) { export function openSettings() { var settings = loadSettings(); - bootbox.dialog({ + var dialog = bootbox.dialog({ onEscape: true, title: "Settings", message: `
Editor preferences
+
-
-
+
+

8bitworkshop IDE internal settings
-
+
`, buttons: { cancel: { @@ -112,6 +118,7 @@ export function openSettings() { callback: () => { settings.tabSize = parseInt($('#setting_tabSize').val() as string) || 8; settings.tabsToSpaces = $('#setting_tabsToSpaces').is(':checked'); + settings.showLineNumbers = $('#setting_showLineNumbers').is(':checked'); settings.highlightSpecialChars = $('#setting_highlightSpecialChars').is(':checked'); settings.highlightWhitespace = $('#setting_highlightWhitespace').is(':checked'); settings.highlightTrailingWhitespace = $('#setting_highlightTrailingWhitespace').is(':checked'); @@ -123,4 +130,13 @@ export function openSettings() { } } }); + dialog.on('shown.bs.modal', () => { + $('#setting_tabSize').focus().select(); + }); + dialog.on('keydown', (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + dialog.find('.btn-primary').trigger('click'); + } + }); } diff --git a/src/ide/views/editors.ts b/src/ide/views/editors.ts index cecd5394..abeb292a 100644 --- a/src/ide/views/editors.ts +++ b/src/ide/views/editors.ts @@ -96,9 +96,7 @@ export class SourceEditor implements ProjectView { var isAsm = isAsmOverride || modedef.isAsm; var lineWrap = !!modedef.lineWrap; var theme = modedef.theme || MODEDEFS.default.theme; - var lineNums = !isAsm && !modedef.noLineNumbers && !isMobileDevice; if (qs['embed']) { - lineNums = false; // no line numbers while embedded isAsm = false; // no opcode bytes either } const minimalGutters = modedef.noGutters || isMobileDevice; @@ -166,8 +164,6 @@ export class SourceEditor implements ProjectView { ]), keymap.of(defaultKeymap), - lineNums ? lineNumbers() : [], - // Undo history. history(), keymap.of(historyKeymap), diff --git a/src/themes/mbo.ts b/src/themes/mbo.ts index 1df863da..7ff5e72e 100644 --- a/src/themes/mbo.ts +++ b/src/themes/mbo.ts @@ -37,10 +37,10 @@ export const mboTheme = EditorView.theme({ color: "#33ff33 !important" }, ".cm-highlightSpace": { - backgroundImage: "radial-gradient(circle at 50% 55%, #aaa5 11%, transparent 5%)" + backgroundImage: "radial-gradient(circle at 50% 55%, #aaaaaa45 11%, transparent 5%)" }, ".cm-highlightTab": { - backgroundImage: `url('data:image/svg+xml,')`, + backgroundImage: `url('data:image/svg+xml,')`, backgroundPosition: "left 50%" }, }, { dark: true });