danvics/ProzillaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved windows rendering

Browse source
This commit is contained in:
Prozilla 2023-08-08 15:24:12 +02:00
parent 46163e3029
commit 47525f1347
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
9 changed files with 95 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
public/media/applications/icons/calculator.svg Normal file
View file

@ -0,0 +1,44 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M168.75 0H31.25C21.25 0 12.5 8.75 12.5 18.75V181.25C12.5 191.25 21.25 200 31.25 200H168.75C178.75 200 187.5 191.25 187.5 181.25V18.75C187.5 8.75 178.75 0 168.75 0ZM62.5 170C62.5 172.5 60 175 57.5 175H42.5C40 175 37.5 172.5 37.5 170V155C37.5 152.5 40 150 42.5 150H57.5C60 150 62.5 152.5 62.5 155V170ZM62.5 120C62.5 122.5 60 125 57.5 125H42.5C40 125 37.5 122.5 37.5 120V105C37.5 102.5 40 100 42.5 100H57.5C60 100 62.5 102.5 62.5 105V120ZM112.5 170C112.5 172.5 110 175 107.5 175H92.5C90 175 87.5 172.5 87.5 170V155C87.5 152.5 90 150 92.5 150H107.5C110 150 112.5 152.5 112.5 155V170ZM112.5 120C112.5 122.5 110 125 107.5 125H92.5C90 125 87.5 122.5 87.5 120V105C87.5 102.5 90 100 92.5 100H107.5C110 100 112.5 102.5 112.5 105V120ZM162.5 170C162.5 172.5 160 175 157.5 175H142.5C140 175 137.5 172.5 137.5 170V105C137.5 102.5 140 100 142.5 100H157.5C160 100 162.5 102.5 162.5 105V170ZM162.5 70C162.5 72.5 160 75 157.5 75H42.5C40 75 37.5 72.5 37.5 70V30C37.5 27.5 40 25 42.5 25H157.5C160 25 162.5 27.5 162.5 30V70Z" fill="#222F3E"/>
<g filter="url(#filter0_d_116_74)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M157.5 175C160 175 162.5 172.5 162.5 170V105C162.5 102.5 160 100 157.5 100H142.5C140 100 137.5 102.5 137.5 105V170C137.5 172.5 140 175 142.5 175H157.5Z" fill="#2E86DE"/>
</g>
<g filter="url(#filter1_d_116_74)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.5 175C60 175 62.5 172.5 62.5 170V155C62.5 152.5 60 150 57.5 150H42.5C40 150 37.5 152.5 37.5 155V170C37.5 172.5 40 175 42.5 175H57.5ZM57.5 125C60 125 62.5 122.5 62.5 120V105C62.5 102.5 60 100 57.5 100H42.5C40 100 37.5 102.5 37.5 105V120C37.5 122.5 40 125 42.5 125H57.5ZM107.5 175C110 175 112.5 172.5 112.5 170V155C112.5 152.5 110 150 107.5 150H92.5C90 150 87.5 152.5 87.5 155V170C87.5 172.5 90 175 92.5 175H107.5ZM107.5 125C110 125 112.5 122.5 112.5 120V105C112.5 102.5 110 100 107.5 100H92.5C90 100 87.5 102.5 87.5 105V120C87.5 122.5 90 125 92.5 125H107.5Z" fill="#8395A7"/>
</g>
<g filter="url(#filter2_d_116_74)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M157.5 75C160 75 162.5 72.5 162.5 70V30C162.5 27.5 160 25 157.5 25H42.5C40 25 37.5 27.5 37.5 30V70C37.5 72.5 40 75 42.5 75H157.5Z" fill="#48DBFB"/>
</g>
<defs>
<filter id="filter0_d_116_74" x="117.5" y="80" width="65" height="115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_74"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_74" result="shape"/>
</filter>
<filter id="filter1_d_116_74" x="17.5" y="80" width="115" height="115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_74"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_74" result="shape"/>
</filter>
<filter id="filter2_d_116_74" x="17.5" y="5" width="165" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_116_74"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_116_74" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

7
src/components/applications/calculator/Calculator.jsx Normal file
View file

@ -0,0 +1,7 @@
import styles from "./Calculator.module.css";
export function Calculator() {
return (
<div></div>
);
}

0
src/components/applications/calculator/Calculator.module.css Normal file
View file

7
src/components/applications/settings/Settings.jsx
View file

@ -62,7 +62,12 @@ function StorageTab({ virtualRoot }) {
</div>
<div className={styles["Option"]}>
<p className={styles["Label"]}>Manage data</p>
<Button className={`${styles.Button} ${styles["Button-red"]}`}>Reset</Button>
<Button
className={`${styles.Button} ${styles["Button-red"]}`}
onClick={() => { virtualRoot.reset?.(); }}
>
Reset
</Button>
</div>
</>);
}

2
src/components/applications/settings/Settings.module.css
View file

@ -119,7 +119,7 @@
cursor: pointer;
}
.Button:hover, .Button:focus-visible-visible {
.Button:hover, .Button:focus-visible {
background-color: var(--hover-color);
}

4
src/components/task-bar/menus/HomeMenu.jsx
View file

@ -9,6 +9,7 @@ import { closeTab } from "../../../features/utils/browser.js";
import { useKeyboardListener } from "../../../hooks/utils/keyboard.js";
import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
import { useEffect, useState } from "react";
import Vector2 from "../../../features/math/vector2.js";
/**
* @param {object} props
@ -72,7 +73,8 @@ export function HomeMenu({ active, setActive, search }) {
setActive(false);
windowsManager.open("text-editor", {
mode: "view",
file: virtualRoot.navigate("~/Documents").findFile("info", "md")
file: virtualRoot.navigate("~/Documents").findFile("info", "md"),
size: new Vector2(575, 675),
});
}}>
<FontAwesomeIcon icon={faCircleInfo}/>

6
src/components/windows/Window.jsx
View file

@ -1,7 +1,6 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styles from "./Window.module.css";
import { faMinus, faXmark } from "@fortawesome/free-solid-svg-icons";
import { faSquare } from "@fortawesome/free-regular-svg-icons";
import { faMinus, faWindowMaximize as fasWindowMaximize, faXmark } from "@fortawesome/free-solid-svg-icons";
import { ReactSVG } from "react-svg";
import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
import Draggable from "react-draggable";
@ -10,6 +9,7 @@ import { useEffect, useRef, useState } from "react";
import Application from "../../features/applications/application.js";
import Vector2 from "../../features/math/vector2.js";
import { faWindowMaximize } from "@fortawesome/free-regular-svg-icons";
/**
* @param {object} props
@ -123,7 +123,7 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
<FontAwesomeIcon icon={faMinus}/>
</button>
<button title="Maximize" tabIndex={0} onClick={() => setMaximized(!maximized)}>
<FontAwesomeIcon icon={faSquare}/>
<FontAwesomeIcon icon={maximized ? fasWindowMaximize : faWindowMaximize}/>
</button>
<button title="Close" tabIndex={0} id="close-window" onClick={close}>
<FontAwesomeIcon icon={faXmark}/>

20
src/features/applications/applications.js
View file

@ -5,24 +5,36 @@ import { WebView } from "../../components/applications/.templates/WebView.jsx";
import { Terminal } from "../../components/applications/terminal/Terminal.jsx";
import { TextEditor } from "../../components/applications/text-editor/TextEditor.jsx";
import { Settings } from "../../components/applications/settings/Settings.jsx";
import { Calculator } from "../../components/applications/calculator/Calculator.jsx";
import Vector2 from "../math/vector2.js";
export default class ApplicationsManager {
static APPLICATIONS = [
new Application("Terminal", "terminal", Terminal),
new Application("Settings", "settings", Settings),
// new Application("Browser", "browser"),
new Application("Calculator", "calculator", Calculator, { size: new Vector2(400, 600) }),
new Application("Text Editor", "text-editor", TextEditor),
// new Application("Code Editor", "code-editor"),
new Application("File Explorer", "file-explorer", FileExplorer),
new Application("Media Viewer", "media-viewer", MediaViewer),
new Application("Wordle", "wordle", WebView, { source: "https://prozilla.dev/wordle" }),
new Application("Balls", "balls", WebView, { source: "https://prozilla.dev/ball-maze" }),
new Application("Minesweeper", "minesweeper", WebView, { source: "https://prozilla.dev/minesweeper" }),
new Application("Wordle", "wordle", WebView, {
source: "https://prozilla.dev/wordle",
size: new Vector2(400, 650)
}),
new Application("Balls", "balls", WebView, {
source: "https://prozilla.dev/ball-maze",
size: new Vector2(600, 600)
}),
new Application("Minesweeper", "minesweeper", WebView, {
source: "https://prozilla.dev/minesweeper",
size: new Vector2(500, 580)
}),
];
/**
* @param {string} id
* @returns {Application}
* @returns {Application | null}
*/
static getApplication(id) {
let application = null;

20
src/features/windows/windows.js
View file

@ -3,6 +3,9 @@ import { randomRange } from "../math/random.js";
import Vector2 from "../math/vector2.js";
import { VirtualFile } from "../virtual-drive/virtual-file.js";
export const SCREEN_MARGIN = 32;
export const TASKBAR_HEIGHT = 48;
export default class WindowsManager {
constructor() {
this.windows = {};
@ -12,12 +15,19 @@ export default class WindowsManager {
/**
* @param {string} appId
* @param {object | null} options
* @returns {object}
* @returns {object | null}
*/
open(appId, options) {
const app = ApplicationsManager.getApplication(appId);
const size = new Vector2(700, 400);
const position = new Vector2(randomRange(50, 600), randomRange(50, 450));
if (app == null) {
console.warn(`Failed to open app ${appId}: app not found`);
return;
}
const size = options?.size ?? app.windowOptions?.size ?? new Vector2(700, 400);
const position = new Vector2(randomRange(SCREEN_MARGIN, window.innerWidth - size.x - SCREEN_MARGIN),
randomRange(SCREEN_MARGIN, window.innerHeight - size.y - SCREEN_MARGIN - TASKBAR_HEIGHT));
let id = 0;
while (this.windowIds.includes(id.toString())) {
@ -59,7 +69,7 @@ export default class WindowsManager {
windowId = windowId.toString();
if (!this.windowIds.includes(windowId)) {
console.log(`Failed to close window ${windowId}: window not found`);
console.warn(`Failed to close window ${windowId}: window not found`);
return;
}
@ -77,7 +87,7 @@ export default class WindowsManager {
windowId = windowId.toString();
if (!this.windowIds.includes(windowId)) {
console.log(`Failed to focus window ${windowId}: window not found`);
console.warn(`Failed to focus window ${windowId}: window not found`);
return;
}