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

small progress

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-15 22:42:06 +01:00
parent 17e30a506e
commit 427a6e470f
6 changed files with 124 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/EditorSetup.ts
View File

@ -92,7 +92,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
},
".cm-activeLine": {
// backgroundColor: highlightBackground
backgroundColor: `${selection_background}`,
backgroundColor: `${selection_foreground}`,
},
".cm-selectionMatch": {
backgroundColor: yellow,
@ -123,17 +123,17 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
},
".cm-tooltip": {
border: "none",
backgroundColor: yellow,
backgroundColor: background,
},
".cm-tooltip .cm-tooltip-arrow:before": {},
".cm-tooltip .cm-tooltip-arrow:after": {
borderTopColor: yellow,
borderBottomColor: yellow,
borderTopColor: background,
borderBottomColor: background,
},
".cm-tooltip-autocomplete": {
"& > ul > li[aria-selected]": {
backgroundColor: blue,
color: blue,
backgroundColor: background,
color: background,
},
},
},
@ -141,60 +141,25 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
);
let toposHighlightStyle = HighlightStyle.define([
{ tag: t.paren, color: brightwhite },
{ tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite },
{ tag: t.keyword, color: yellow },
{
tag: [t.name, t.deleted, t.character, t.macroName],
color: red,
},
{ tag: [t.propertyName], color: red },
{ tag: [t.variableName], color: red },
{ tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
{ tag: [t.function(t.variableName)], color: blue },
{ tag: [t.labelName], color: red },
{
tag: [t.color, t.constant(t.name), t.standard(t.name)], color: yellow,
},
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
{ tag: [t.definition(t.name), t.separator], color: magenta },
{ tag: [t.brace], color: magenta },
{
tag: [t.annotation],
color: white ,
},
{
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
color: yellow ,
},
{
tag: [t.typeName, t.className],
color: magenta,
},
{
tag: [t.operator, t.operatorKeyword],
color: blue ,
},
{
tag: [t.tagName],
color: blue,
},
{
tag: [t.squareBracket],
color: yellow,
},
{
tag: [t.angleBracket],
color: yellow,
},
{
tag: [t.attributeName],
color: red,
},
{
tag: [t.regexp],
color: brightgreen,
},
{
tag: [t.quote],
color: green,
},
{ tag: [t.brace], color: white },
{ tag: [t.annotation], color: blue, },
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
{ tag: [t.typeName, t.className], color: magenta, },
{ tag: [t.operator, t.operatorKeyword], color: blue, },
{ tag: [t.tagName], color: blue, },
{ tag: [t.squareBracket], color: blue, },
{ tag: [t.angleBracket], color: blue, },
{ tag: [t.attributeName], color: red, },
{ tag: [t.regexp], color: brightgreen, },
{ tag: [t.quote], color: green, },
{ tag: [t.string], color: green },
{
tag: t.link,
@ -206,14 +171,14 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
tag: [t.url, t.escape, t.special(t.string)],
color: green,
},
{ tag: [t.meta], color: brightblack },
{ tag: [t.comment], color: brightblack, fontStyle: "italic" },
{ tag: t.monospace, color: black },
{ tag: t.strong, fontWeight: "bold", color: magenta },
{ tag: t.emphasis, fontStyle: "italic", color: magenta },
{ tag: [t.meta], color: brightwhite },
{ tag: [t.comment], color: brightwhite, fontStyle: "italic" },
{ tag: t.monospace, color: brightwhite },
{ tag: t.strong, fontWeight: "bold", color: white },
{ tag: t.emphasis, fontStyle: "italic", color: white },
{ tag: t.strikethrough, textDecoration: "line-through" },
{ tag: t.heading, fontWeight: "bold", color: magenta },
{ tag: t.heading1, fontWeight: "bold", color: magenta },
{ tag: t.heading, fontWeight: "bold", color: white },
{ tag: t.heading1, fontWeight: "bold", color: white },
{
tag: [t.heading2, t.heading3, t.heading4],
fontWeight: "bold",
@ -238,6 +203,35 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
]
}
const debugTheme = EditorView.theme({
".cm-line span": {
position: "relative",
},
".cm-line span:hover::after": {
position: "absolute",
bottom: "100%",
left: 0,
background: "black",
color: "white",
border: "solid 2px",
borderRadius: "5px",
content: "var(--tags)",
width: `max-content`,
padding: "1px 4px",
zIndex: 10,
pointerEvents: "none",
},
});
const debugHighlightStyle = HighlightStyle.define(
// @ts-ignore
Object.entries(t).map(([key, value]) => {
return { tag: value, "--tags": `"tag.${key}"` };
})
);
const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
export const jsCompletions = javascriptLanguage.data.of({
autocomplete: toposCompletions,
});
@ -304,6 +298,7 @@ export const installEditor = (app: Editor) => {
editorSetup,
app.themeCompartment.of(
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
// debug
),
app.chosenLanguage.of(javascript()),
];

4
src/InterfaceLogic.ts
View File

@ -59,9 +59,9 @@ export const installInterfaceLogic = (app: Editor) => {
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", (event) => {
// Updating the CSS accordingly
tabs[i].classList.add("bg-orange-300");
tabs[i].classList.add("bg-foreground");
for (let j = 0; j < tabs.length; j++) {
if (j != i) tabs[j].classList.remove("bg-orange-300");
if (j != i) tabs[j].classList.remove("bg-foreground");
}
app.currentFile().candidate = app.view.state.doc.toString();

23
src/main.ts
View File

@ -34,7 +34,6 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions";
// @ts-ignore
import { registerSW } from "virtual:pwa-register";
import colors from "./colors.json";
import { code } from "./documentation/basics/code";
if ("serviceWorker" in navigator) {
registerSW();
@ -211,7 +210,7 @@ export class Editor {
loadUniverserFromUrl(this);
// Set the color scheme for the application
this.readTheme(this.settings.theme);
// this.readTheme(this.settings.theme);
}
private getBuffer(type: string): any {
@ -267,7 +266,7 @@ export class Editor {
let list = document.createElement("ul");
list.className =
"lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
"lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-selection_background bg-background lg:mb-4 border rounded-lg";
list.append(
...Object.keys(this.universes).map((it) => {
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
@ -299,9 +298,9 @@ export class Editor {
*/
const tabs = document.querySelectorAll('[id^="tab-"]');
const tab = tabs[i] as HTMLElement;
tab.classList.add("bg-color3");
tab.classList.add("bg-foreground");
for (let j = 0; j < tabs.length; j++) {
if (j != i) tabs[j].classList.remove("bg-color3");
if (j != i) tabs[j].classList.remove("bg-foreground_selection");
}
let tab_id = tab.id.split("-")[1];
this.local_index = parseInt(tab_id);
@ -324,15 +323,15 @@ export class Editor {
let changeColor = (button: HTMLElement) => {
interface_buttons.forEach((button) => {
let svg = button.children[0] as HTMLElement;
if (svg.classList.contains("text-color3")) {
svg.classList.remove("text-color3");
button.classList.remove("text-color3");
if (svg.classList.contains("text-foreground_selection")) {
svg.classList.remove("text-foreground_selection");
button.classList.remove("text-foreground_selection");
}
});
button.children[0].classList.remove("text-white");
button.children[0].classList.add("text-color3");
button.classList.add("text-color3");
button.classList.add("fill-color3");
button.children[0].classList.add("text-foreground_selection");
button.classList.add("text-foreground_selection");
button.classList.add("fill-foreground_selection");
};
switch (mode) {
@ -447,7 +446,7 @@ export class Editor {
unfocusPlayButtons() {
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
button.children[0].classList.remove("fill-color3");
button.children[0].classList.remove("fill-foreground_selection");
button.children[0].classList.remove("animate-pulse");
});
}

35
src/style.css
View File

@ -1176,6 +1176,11 @@ video {
background-color: rgb(var(--red) / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(var(--white) / var(--tw-bg-opacity));
}
.p-1 {
padding: 0.25rem;
}
@ -1242,6 +1247,11 @@ video {
padding-bottom: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
@ -1426,6 +1436,11 @@ video {
color: rgb(var(--selection_background) / var(--tw-text-opacity));
}
.text-brightred {
--tw-text-opacity: 1;
color: rgb(var(--brightred) / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
@ -1472,10 +1487,20 @@ video {
background-color: rgb(var(--background) / var(--tw-bg-opacity));
}
.hover\:bg-foreground:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
}
.hover\:fill-black:hover {
fill: rgb(var(--black) / 1);
}
.hover\:text-xl:hover {
font-size: 1.25rem;
line-height: 1.75rem;
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgb(var(--black) / var(--tw-text-opacity));
@ -1486,6 +1511,16 @@ video {
color: rgb(var(--foreground) / var(--tw-text-opacity));
}
.hover\:text-selection_foreground:hover {
--tw-text-opacity: 1;
color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
}
.hover\:text-red:hover {
--tw-text-opacity: 1;
color: rgb(var(--red) / var(--tw-text-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;

221
src/themes/toposTheme.ts
View File

@ -1,221 +0,0 @@
import { EditorView } from "@codemirror/view";
import { Extension } from "@codemirror/state";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";
const base00 = "#262626",
base01 = "#3B4252",
base02 = "#BBBBBB",
base03 = "#4C566A",
base04 = "#D8DEE9",
base05 = "#E5E9F0",
base07 = "#8FBCBB",
base_red = "#BF616A",
base_deeporange = "#D08770",
base_pink = "#B48EAD",
base_cyan = "#FBCF8B",
base_yellow = "#88C0D0",
base_orange = "#D08770",
base_indigo = "#5E81AC",
base_purple = "#B48EAD",
base_green = "#A3BE8C",
base_lightgreen = "#A3BE8C";
const invalid = base_red,
darkBackground = "#262626",
highlightBackground = "#252525",
// background = base00,
tooltipBackground = base01,
cursor = base04;
/// The editor theme styles for Material Dark.
export const toposDarkTheme = EditorView.theme(
{
"&": {
color: base05,
// backgroundColor: background,
backgroundColor: "transparent",
fontSize: "24px",
fontFamily: "IBM Plex Mono",
},
".cm-content": {
caretColor: cursor,
fontFamily: "IBM Plex Mono",
},
".cm-cursor, .cm-dropCursor": {
borderLeftColor: cursor,
},
"&.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-bottom": { borderTop: "2px solid black" },
".cm-search.cm-panel": { backgroundColor: "transparent" },
".cm-searchMatch": {
outline: `1px solid ${base_cyan}`,
},
".cm-searchMatch.cm-searchMatch-selected": {
backgroundColor: highlightBackground,
},
".cm-activeLine": {
// backgroundColor: highlightBackground
backgroundColor: "rgb(76,76,106, 0.1)",
},
".cm-selectionMatch": {
backgroundColor: base04,
outline: `1px solid ${base_red}`,
},
"&.cm-focused .cm-matchingBracket": {
color: base02,
// outline: `1px solid ${base02}`,
},
"&.cm-focused .cm-nonmatchingBracket": {
color: base_red,
},
".cm-gutters": {
//backgroundColor: base00,
backgroundColor: "transparent",
color: base02,
},
".cm-activeLineGutter": {
backgroundColor: highlightBackground,
color: base02,
},
".cm-foldPlaceholder": {
border: "none",
color: `${base07}`,
},
".cm-tooltip": {
border: "none",
backgroundColor: tooltipBackground,
},
".cm-tooltip .cm-tooltip-arrow:before": {},
".cm-tooltip .cm-tooltip-arrow:after": {
borderTopColor: tooltipBackground,
borderBottomColor: tooltipBackground,
},
".cm-tooltip-autocomplete": {
"& > ul > li[aria-selected]": {
backgroundColor: highlightBackground,
color: base03,
},
},
},
{ dark: true },
);
/// The highlighting style for code in the Material Dark theme.
export const toposDarkHighlightStyle = HighlightStyle.define([
{ tag: t.keyword, color: base_purple },
{
tag: [t.name, t.deleted, t.character, t.macroName],
color: base_cyan,
},
{ tag: [t.propertyName], color: base_yellow },
{ tag: [t.variableName], color: base05 },
{ tag: [t.function(t.variableName)], color: base_cyan },
{ tag: [t.labelName], color: base_purple },
{
tag: [t.color, t.constant(t.name), t.standard(t.name)],
color: base_yellow,
},
{ tag: [t.definition(t.name), t.separator], color: base_pink },
{ tag: [t.brace], color: base_purple },
{
tag: [t.annotation],
color: invalid,
},
{
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
color: base_orange,
},
{
tag: [t.typeName, t.className],
color: base_orange,
},
{
tag: [t.operator, t.operatorKeyword],
color: base_indigo,
},
{
tag: [t.tagName],
color: base_deeporange,
},
{
tag: [t.squareBracket],
color: base_red,
},
{
tag: [t.angleBracket],
color: base02,
},
{
tag: [t.attributeName],
color: base05,
},
{
tag: [t.regexp],
color: invalid,
},
{
tag: [t.quote],
color: base_green,
},
{ tag: [t.string], color: base_lightgreen },
{
tag: t.link,
color: base_cyan,
textDecoration: "underline",
textUnderlinePosition: "under",
},
{
tag: [t.url, t.escape, t.special(t.string)],
color: base_yellow,
},
{ tag: [t.meta], color: base03 },
{ tag: [t.comment], color: base02, fontStyle: "italic" },
{ tag: t.monospace, color: base05 },
{ tag: t.strong, fontWeight: "bold", color: base_red },
{ tag: t.emphasis, fontStyle: "italic", color: base_lightgreen },
{ tag: t.strikethrough, textDecoration: "line-through" },
{ tag: t.heading, fontWeight: "bold", color: base_yellow },
{ tag: t.heading1, fontWeight: "bold", color: base_yellow },
{
tag: [t.heading2, t.heading3, t.heading4],
fontWeight: "bold",
color: base_yellow,
},
{
tag: [t.heading5, t.heading6],
color: base_yellow,
},
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan },
{
tag: [t.processingInstruction, t.inserted],
color: base_red,
},
{
tag: [t.contentSeparator],
color: base_cyan,
},
{ tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` },
]);
/// Extension to enable the Material Dark theme (both the editor theme and
/// the highlight style).
export const toposTheme: Extension = [
toposDarkTheme,
syntaxHighlighting(toposDarkHighlightStyle),
];