Skip to content

Commit

Permalink
malvim basics working
Browse files Browse the repository at this point in the history
  • Loading branch information
stjet committed Nov 24, 2023
1 parent e779082 commit ac1020a
Show file tree
Hide file tree
Showing 9 changed files with 610 additions and 24 deletions.
10 changes: 7 additions & 3 deletions src/mingde/components/text_box.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,16 @@ export class TextBox<MessageType> implements FocusableComponent<MessageType> {
if (this.focused) {
const value_lines: string[] = this.value.split(" \n ");
const rest_width: number = context.measureText(value_lines[this.line_pos].slice(0, this.cursor_pos)).width;
const rest_height: number = this.line_pos * line_height;
const rest_height: number = this.line_pos * line_height; //line_height is already multiplied by SCALE
//use the char cursor/selector is over to get cursor width. if no char (this.cursor_pos is this.value.length), use the letter a
const cursor_width: number = context.measureText(this.value[this.cursor_pos] || "a").width;
const cursor_width: number = context.measureText(value_lines[this.line_pos][this.cursor_pos] || "a").width;
context.fillStyle = theme_info.highlight;
context.fillRect(this.coords[0] + rest_width + margin * SCALE, this.coords[1] + rest_height + margin * SCALE, cursor_width, line_height);
//
//draw the cursor text a different colour so it is legible
if (this.value[this.cursor_pos]) {
context.fillStyle = theme_info.text_highlight;
context.fillText(this.value[this.cursor_pos], this.coords[0] + rest_width + margin * SCALE, this.coords[1] + rest_height + line_height + margin * SCALE);
}
}
//
}
Expand Down
21 changes: 11 additions & 10 deletions src/mingde/components/text_input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ValidationState } from '../utils.js';

//cursor here does not mean the mouse cursor

const margin: number = 2 * SCALE;
const margin_scaled: number = 2 * SCALE;

export class TextInput<MessageType> implements FocusableComponent<MessageType> {
readonly type: string = "text-input";
Expand Down Expand Up @@ -78,7 +78,7 @@ export class TextInput<MessageType> implements FocusableComponent<MessageType> {
fill_text = this.placeholder;
}
context.fillStyle = theme_info.text_primary;
context.fillText(fill_text, this.coords[0] + margin, this.coords[1] + this.size[1] - margin);
context.fillText(fill_text, this.coords[0] + margin_scaled, this.coords[1] + this.size[1] - margin_scaled);
} else {
let write_text: string;
let write_cursor_pos: number;
Expand All @@ -104,20 +104,21 @@ export class TextInput<MessageType> implements FocusableComponent<MessageType> {
//since cursor is at the end
write_cursor_pos = write_text.length - 1;
}
//write the text
context.fillStyle = theme_info.text_primary;
context.fillText(write_text, this.coords[0] + margin_scaled, this.coords[1] + this.size[1] - margin_scaled);
//draw cursor
if (this.focused) {
const rest_width: number = context.measureText(write_text.slice(0, write_cursor_pos)).width;
//use the char cursor/selector is over to get cursor width. if no char (this.cursor_pos is this.value.length), use the letter a
const cursor_width: number = context.measureText(this.value[this.cursor_pos] || "a").width;
context.fillStyle = theme_info.highlight;
context.fillRect(this.coords[0] + rest_width + margin, this.coords[1], cursor_width, this.size[1]);
}
//write the text
context.fillStyle = theme_info.text_primary;
context.fillText(write_text, this.coords[0] + margin, this.coords[1] + this.size[1] - margin);
//todo: draw the cursor text a different colour so it is legible
if (this.value[this.cursor_pos]) {
//
context.fillRect(this.coords[0] + rest_width + margin_scaled, this.coords[1], cursor_width, this.size[1]);
//draw the cursor text a different colour so it is legible
if (this.value[this.cursor_pos]) {
context.fillStyle = theme_info.text_highlight;
context.fillText(this.value[this.cursor_pos], this.coords[0] + rest_width + margin_scaled, this.coords[1] + this.size[1] - margin_scaled);
}
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions src/mingde/registry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Calculator } from './windows/calculator.js';
import { ImageViewer } from './windows/image_viewer.js';
import { Notepad } from './windows/notepad.js';
import { Malvim } from './windows/malvim.js';
import { Exporter } from './windows/exporter.js';

export interface Permission {
change_theme?: boolean;
Expand Down Expand Up @@ -133,5 +134,12 @@ export const registry: Registry = {
category: ApplicationCategories.Editing,
name: "malvim",
},
"exporter": {
class: Exporter,
args: [[300, 200]],
display_name: "Exporter",
category: ApplicationCategories.Misc,
name: "exporter",
},
};

12 changes: 11 additions & 1 deletion src/mingde/themes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface ThemeInfo {
background: string;
alt_background: string; //used for terminal
alt_text: string; //used for terminal
alt_text_light: string; //used for terminal
border_left_top: string;
border_right_bottom: string;
}
Expand All @@ -42,6 +43,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#c0c0c0",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand All @@ -54,6 +56,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#222222",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand All @@ -66,6 +69,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#c0c0c0",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand All @@ -78,6 +82,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#c0c0c0",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand All @@ -90,6 +95,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#a0a0a0",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand All @@ -102,6 +108,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#ffffd8",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "#b2b3b5",
border_right_bottom: "black",
},
Expand All @@ -114,8 +121,9 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "black",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "white",
border_right_bottom: "black",
},
[Themes.Royal]: {
top: "purple",
Expand All @@ -126,6 +134,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#c0c0c0",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand All @@ -138,6 +147,7 @@ export const THEME_INFOS: { [theme_type: string]: ThemeInfo } = {
background: "#c0c0c0",
alt_background: "black",
alt_text: "white",
alt_text_light: "gray",
border_left_top: "white",
border_right_bottom: "black",
},
Expand Down
14 changes: 10 additions & 4 deletions src/mingde/windows/alert_box.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,17 @@ export class AlertBox extends WindowWithFocus<AlertBoxMessage> {
constructor(title: string, message: string) {
super(alert_box_size, title, "alert-box", false);
this.layers = [new Layer(this, "alert-body")];
this.layers[0].add_member(new Paragraph(this, message, [margin, WINDOW_TOP_HEIGHT / SCALE + FONT_SIZES.NORMAL / SCALE + 4], "text_primary", "NORMAL", alert_box_size[0] - margin * 2));
const button_height: number = 22;
this.layers[0].add_member(new Button(this, "Ok", [alert_box_size[0] / 2 - button_width / 2, alert_box_size[1] - button_height - 10], button_width, (button_height - FONT_SIZES.BUTTON / SCALE)/ 2, () => {
this.send_request(WindowRequest.CloseWindow, {});
}));
this.layers[0].add_members(
{
member: new Paragraph(this, message, [margin, WINDOW_TOP_HEIGHT / SCALE + FONT_SIZES.NORMAL / SCALE + 4], "text_primary", "NORMAL", alert_box_size[0] - margin * 2),
},
{
member: new Button(this, "Ok", [alert_box_size[0] / 2 - button_width / 2, alert_box_size[1] - button_height - 10], button_width, (button_height - FONT_SIZES.BUTTON / SCALE)/ 2, () => {
this.send_request(WindowRequest.CloseWindow, {});
}),
}
);
}
render_view(theme: Themes) {
let components = this.components;
Expand Down
86 changes: 86 additions & 0 deletions src/mingde/windows/exporter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { WindowWithFocus, WindowMessage, Layer } from '../wm.js';
import { WindowRequest } from '../requests.js';
import { Themes } from '../themes.js';
import { WINDOW_TOP_HEIGHT, SCALE, FONT_SIZES } from '../constants.js';
import { isTextInput } from '../guards.js';
import { ValidationState } from '../utils.js';

import { Button } from '../components/button.js';
import { TextInput } from '../components/text_input.js';
import { TextLine } from '../components/text_line.js';

const margin: number = 10;

enum ExporterMessage {
//
}

export class Exporter extends WindowWithFocus<ExporterMessage> {
//
constructor(size: [number, number]) {
super(size, "Exporter", "exporter");
this.layers = [new Layer(this, "body")];
const top_y: number = margin + WINDOW_TOP_HEIGHT / SCALE;
this.layers[0].add_members(
{
member: new TextLine(this, "Download a specific file/directory:", [margin, top_y + FONT_SIZES.NORMAL / SCALE], "text_primary", "NORMAL", undefined, true, false),
},
{
member: new TextInput(this, "/path/to/location", [margin, top_y + FONT_SIZES.NORMAL / SCALE + 5], "NORMAL", 150),
},
{
member: new Button(this, "Export File/Directory", [margin * 2 + 150, top_y + FONT_SIZES.NORMAL / SCALE + 5], 125, 3, () =>{
//get file path
let text_input = this.layers[0].members[1];
if (isTextInput(text_input)) {
const input_value: string = text_input.value;
if (!input_value.startsWith("/")) {
text_input.valid = ValidationState.Invalid;
return;
}
//read file path
const response = this.send_request(WindowRequest.ReadFileSystem, {
permission_type: "read_all_file_system",
path: `/${input_value.slice(1)}`,
});
if (typeof response === "undefined") {
//
} else {
//download file or director
//
}
}
}, undefined, undefined, undefined, true),
},
{
member: new TextLine(this, "Download the entire file system:", [margin, top_y + FONT_SIZES.NORMAL * 3 / SCALE + 15], "text_primary", "NORMAL", undefined, true, false),
},
{
member: new Button(this, "Export All", [margin, top_y + FONT_SIZES.NORMAL * 3 / SCALE + 20], 75, 3, () => {
const response = this.send_request(WindowRequest.ReadFileSystem, {
permission_type: "read_all_file_system",
path: "/",
});
if (typeof response === "undefined") {
//
} else {
//download everything
//
}
}, undefined, undefined, undefined, true),
}
);
//
}
render_view(theme: Themes) {
let components = this.components;
for (let j = 0; j < components.length; j++) {
components[j].render_view(theme);
}
}
handle_message(message: ExporterMessage | WindowMessage, data: any): boolean {
this.do_rerender = super.handle_message(message, data);
return this.do_rerender;
}
}

Loading

0 comments on commit ac1020a

Please sign in to comment.