2024-05-13 23:40:18 +02:00
|
|
|
// Copyright 2024, Command Line Inc.
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
2024-05-28 21:12:28 +02:00
|
|
|
import { Workspace } from "@/app/workspace/workspace";
|
2024-06-25 02:44:31 +02:00
|
|
|
import { ContextMenuModel } from "@/store/contextmenu";
|
2024-11-16 06:26:16 +01:00
|
|
|
import {
|
|
|
|
atoms,
|
|
|
|
createBlock,
|
|
|
|
globalStore,
|
|
|
|
isDev,
|
|
|
|
PLATFORM,
|
|
|
|
removeFlashError,
|
|
|
|
useSettingsPrefixAtom,
|
|
|
|
} from "@/store/global";
|
2024-08-30 01:06:15 +02:00
|
|
|
import { appHandleKeyDown } from "@/store/keymodel";
|
|
|
|
import { getElemAsStr } from "@/util/focusutil";
|
2024-06-21 21:32:38 +02:00
|
|
|
import * as keyutil from "@/util/keyutil";
|
2024-06-20 00:42:19 +02:00
|
|
|
import * as util from "@/util/util";
|
2024-08-15 03:40:41 +02:00
|
|
|
import clsx from "clsx";
|
2024-08-30 01:06:15 +02:00
|
|
|
import debug from "debug";
|
2024-10-17 20:14:59 +02:00
|
|
|
import { Provider, useAtomValue } from "jotai";
|
2024-08-15 03:40:41 +02:00
|
|
|
import "overlayscrollbars/overlayscrollbars.css";
|
2024-10-17 20:14:59 +02:00
|
|
|
import { Fragment, useEffect, useState } from "react";
|
2024-06-04 22:05:44 +02:00
|
|
|
import { DndProvider } from "react-dnd";
|
|
|
|
import { HTML5Backend } from "react-dnd-html5-backend";
|
2024-10-17 20:14:59 +02:00
|
|
|
import { AppBackground } from "./app-bg";
|
2024-08-15 03:40:41 +02:00
|
|
|
import { CenteredDiv } from "./element/quickelems";
|
2024-11-16 06:26:16 +01:00
|
|
|
import { NotificationBubbles } from "./notification/notificationbubbles";
|
|
|
|
|
2024-11-22 01:05:04 +01:00
|
|
|
import "./app.scss";
|
2024-06-21 05:04:00 +02:00
|
|
|
|
2024-08-30 01:06:15 +02:00
|
|
|
const dlog = debug("wave:app");
|
|
|
|
const focusLog = debug("wave:focus");
|
|
|
|
|
2024-10-17 23:34:02 +02:00
|
|
|
const App = ({ onFirstRender }: { onFirstRender: () => void }) => {
|
|
|
|
useEffect(() => {
|
|
|
|
onFirstRender();
|
|
|
|
}, []);
|
2024-05-10 05:24:24 +02:00
|
|
|
return (
|
2024-05-14 08:45:41 +02:00
|
|
|
<Provider store={globalStore}>
|
2024-05-10 05:24:24 +02:00
|
|
|
<AppInner />
|
|
|
|
</Provider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-10-16 20:04:22 +02:00
|
|
|
function isContentEditableBeingEdited(): boolean {
|
2024-06-25 02:44:31 +02:00
|
|
|
const activeElement = document.activeElement;
|
|
|
|
return (
|
|
|
|
activeElement &&
|
|
|
|
activeElement.getAttribute("contenteditable") !== null &&
|
|
|
|
activeElement.getAttribute("contenteditable") !== "false"
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-10-16 20:04:22 +02:00
|
|
|
function canEnablePaste(): boolean {
|
2024-06-25 02:44:31 +02:00
|
|
|
const activeElement = document.activeElement;
|
|
|
|
return activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isContentEditableBeingEdited();
|
|
|
|
}
|
|
|
|
|
2024-10-16 20:04:22 +02:00
|
|
|
function canEnableCopy(): boolean {
|
2024-06-25 02:44:31 +02:00
|
|
|
const sel = window.getSelection();
|
|
|
|
return !util.isBlank(sel?.toString());
|
|
|
|
}
|
|
|
|
|
2024-10-16 20:04:22 +02:00
|
|
|
function canEnableCut(): boolean {
|
2024-06-25 02:44:31 +02:00
|
|
|
const sel = window.getSelection();
|
|
|
|
if (document.activeElement?.classList.contains("xterm-helper-textarea")) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return !util.isBlank(sel?.toString()) && canEnablePaste();
|
|
|
|
}
|
|
|
|
|
2024-10-16 20:04:22 +02:00
|
|
|
async function getClipboardURL(): Promise<URL> {
|
|
|
|
try {
|
|
|
|
const clipboardText = await navigator.clipboard.readText();
|
|
|
|
if (clipboardText == null) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
const url = new URL(clipboardText);
|
2024-10-25 08:16:44 +02:00
|
|
|
if (!url.protocol.startsWith("http")) {
|
|
|
|
return null;
|
|
|
|
}
|
2024-10-16 20:04:22 +02:00
|
|
|
return url;
|
|
|
|
} catch (e) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function handleContextMenu(e: React.MouseEvent<HTMLDivElement>) {
|
2024-06-25 02:44:31 +02:00
|
|
|
e.preventDefault();
|
|
|
|
const canPaste = canEnablePaste();
|
|
|
|
const canCopy = canEnableCopy();
|
|
|
|
const canCut = canEnableCut();
|
2024-10-16 20:04:22 +02:00
|
|
|
const clipboardURL = await getClipboardURL();
|
|
|
|
if (!canPaste && !canCopy && !canCut && !clipboardURL) {
|
2024-06-25 02:44:31 +02:00
|
|
|
return;
|
2024-06-20 00:42:19 +02:00
|
|
|
}
|
2024-06-25 02:44:31 +02:00
|
|
|
let menu: ContextMenuItem[] = [];
|
|
|
|
if (canCut) {
|
|
|
|
menu.push({ label: "Cut", role: "cut" });
|
2024-06-20 00:42:19 +02:00
|
|
|
}
|
2024-06-25 02:44:31 +02:00
|
|
|
if (canCopy) {
|
|
|
|
menu.push({ label: "Copy", role: "copy" });
|
2024-06-20 00:42:19 +02:00
|
|
|
}
|
2024-06-25 02:44:31 +02:00
|
|
|
if (canPaste) {
|
|
|
|
menu.push({ label: "Paste", role: "paste" });
|
2024-06-20 00:42:19 +02:00
|
|
|
}
|
2024-10-16 20:04:22 +02:00
|
|
|
if (clipboardURL) {
|
|
|
|
menu.push({ type: "separator" });
|
|
|
|
menu.push({
|
|
|
|
label: "Open Clipboard URL (" + clipboardURL.hostname + ")",
|
|
|
|
click: () => {
|
|
|
|
createBlock({
|
|
|
|
meta: {
|
|
|
|
view: "web",
|
|
|
|
url: clipboardURL.toString(),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2024-06-25 02:44:31 +02:00
|
|
|
ContextMenuModel.showContextMenu(menu, e);
|
2024-06-20 00:42:19 +02:00
|
|
|
}
|
|
|
|
|
2024-07-26 22:30:11 +02:00
|
|
|
function AppSettingsUpdater() {
|
2024-10-09 19:49:25 +02:00
|
|
|
const windowSettingsAtom = useSettingsPrefixAtom("window");
|
2024-10-17 20:14:59 +02:00
|
|
|
const windowSettings = useAtomValue(windowSettingsAtom);
|
|
|
|
useEffect(() => {
|
2024-08-28 03:49:49 +02:00
|
|
|
const isTransparentOrBlur =
|
|
|
|
(windowSettings?.["window:transparent"] || windowSettings?.["window:blur"]) ?? false;
|
|
|
|
const opacity = util.boundNumber(windowSettings?.["window:opacity"] ?? 0.8, 0, 1);
|
2024-11-21 19:30:02 +01:00
|
|
|
const baseBgColor = windowSettings?.["window:bgcolor"];
|
2024-11-14 05:48:02 +01:00
|
|
|
const mainDiv = document.getElementById("main");
|
2024-10-17 23:34:02 +02:00
|
|
|
// console.log("window settings", windowSettings, isTransparentOrBlur, opacity, baseBgColor, mainDiv);
|
2024-07-27 01:18:53 +02:00
|
|
|
if (isTransparentOrBlur) {
|
2024-10-17 23:34:02 +02:00
|
|
|
mainDiv.classList.add("is-transparent");
|
2024-11-21 19:30:02 +01:00
|
|
|
if (opacity != null) {
|
|
|
|
document.body.style.setProperty("--window-opacity", `${opacity}`);
|
|
|
|
} else {
|
|
|
|
document.body.style.removeProperty("--window-opacity");
|
2024-07-26 22:30:11 +02:00
|
|
|
}
|
|
|
|
} else {
|
2024-10-17 23:34:02 +02:00
|
|
|
mainDiv.classList.remove("is-transparent");
|
2024-11-21 19:30:02 +01:00
|
|
|
document.body.style.removeProperty("--window-opacity");
|
|
|
|
}
|
|
|
|
if (baseBgColor != null) {
|
|
|
|
document.body.style.setProperty("--main-bg-color", baseBgColor);
|
|
|
|
} else {
|
|
|
|
document.body.style.removeProperty("--main-bg-color");
|
2024-07-26 22:30:11 +02:00
|
|
|
}
|
2024-08-28 03:49:49 +02:00
|
|
|
}, [windowSettings]);
|
2024-07-26 22:30:11 +02:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2024-08-30 01:06:15 +02:00
|
|
|
function appFocusIn(e: FocusEvent) {
|
|
|
|
focusLog("focusin", getElemAsStr(e.target), "<=", getElemAsStr(e.relatedTarget));
|
|
|
|
}
|
|
|
|
|
|
|
|
function appFocusOut(e: FocusEvent) {
|
|
|
|
focusLog("focusout", getElemAsStr(e.target), "=>", getElemAsStr(e.relatedTarget));
|
|
|
|
}
|
|
|
|
|
|
|
|
function appSelectionChange(e: Event) {
|
|
|
|
const selection = document.getSelection();
|
|
|
|
focusLog("selectionchange", getElemAsStr(selection.anchorNode));
|
|
|
|
}
|
|
|
|
|
|
|
|
function AppFocusHandler() {
|
2024-08-30 02:00:24 +02:00
|
|
|
return null;
|
|
|
|
|
|
|
|
// for debugging
|
2024-10-17 20:14:59 +02:00
|
|
|
useEffect(() => {
|
2024-08-30 01:06:15 +02:00
|
|
|
document.addEventListener("focusin", appFocusIn);
|
|
|
|
document.addEventListener("focusout", appFocusOut);
|
|
|
|
document.addEventListener("selectionchange", appSelectionChange);
|
|
|
|
const ivId = setInterval(() => {
|
|
|
|
const activeElement = document.activeElement;
|
|
|
|
if (activeElement instanceof HTMLElement) {
|
|
|
|
focusLog("activeElement", getElemAsStr(activeElement));
|
|
|
|
}
|
|
|
|
}, 2000);
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener("focusin", appFocusIn);
|
|
|
|
document.removeEventListener("focusout", appFocusOut);
|
|
|
|
document.removeEventListener("selectionchange", appSelectionChange);
|
|
|
|
clearInterval(ivId);
|
|
|
|
};
|
|
|
|
});
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2024-08-03 00:39:22 +02:00
|
|
|
const AppKeyHandlers = () => {
|
2024-10-17 20:14:59 +02:00
|
|
|
useEffect(() => {
|
2024-08-20 03:28:28 +02:00
|
|
|
const staticKeyDownHandler = keyutil.keydownWrapper(appHandleKeyDown);
|
2024-06-21 21:32:38 +02:00
|
|
|
document.addEventListener("keydown", staticKeyDownHandler);
|
2024-08-03 00:39:22 +02:00
|
|
|
|
2024-06-21 21:32:38 +02:00
|
|
|
return () => {
|
|
|
|
document.removeEventListener("keydown", staticKeyDownHandler);
|
|
|
|
};
|
|
|
|
}, []);
|
2024-08-03 00:39:22 +02:00
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
2024-09-13 01:02:18 +02:00
|
|
|
const FlashError = () => {
|
2024-10-17 20:14:59 +02:00
|
|
|
const flashErrors = useAtomValue(atoms.flashErrors);
|
|
|
|
const [hoveredId, setHoveredId] = useState<string>(null);
|
|
|
|
const [ticker, setTicker] = useState<number>(0);
|
2024-09-13 01:02:18 +02:00
|
|
|
|
2024-10-17 20:14:59 +02:00
|
|
|
useEffect(() => {
|
2024-09-13 01:02:18 +02:00
|
|
|
if (flashErrors.length == 0 || hoveredId != null) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const now = Date.now();
|
|
|
|
for (let ferr of flashErrors) {
|
|
|
|
if (ferr.expiration == null || ferr.expiration < now) {
|
|
|
|
removeFlashError(ferr.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setTimeout(() => setTicker(ticker + 1), 1000);
|
|
|
|
}, [flashErrors, ticker, hoveredId]);
|
|
|
|
|
|
|
|
if (flashErrors.length == 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
function copyError(id: string) {
|
|
|
|
const ferr = flashErrors.find((f) => f.id === id);
|
|
|
|
if (ferr == null) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let text = "";
|
|
|
|
if (ferr.title != null) {
|
|
|
|
text += ferr.title;
|
|
|
|
}
|
|
|
|
if (ferr.message != null) {
|
|
|
|
if (text.length > 0) {
|
|
|
|
text += "\n";
|
|
|
|
}
|
|
|
|
text += ferr.message;
|
|
|
|
}
|
|
|
|
navigator.clipboard.writeText(text);
|
|
|
|
}
|
|
|
|
|
|
|
|
function convertNewlinesToBreaks(text) {
|
|
|
|
return text.split("\n").map((part, index) => (
|
2024-10-17 20:14:59 +02:00
|
|
|
<Fragment key={index}>
|
2024-09-13 01:02:18 +02:00
|
|
|
{part}
|
|
|
|
<br />
|
2024-10-17 20:14:59 +02:00
|
|
|
</Fragment>
|
2024-09-13 01:02:18 +02:00
|
|
|
));
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="flash-error-container">
|
|
|
|
{flashErrors.map((err, idx) => (
|
|
|
|
<div
|
|
|
|
key={idx}
|
|
|
|
className={clsx("flash-error", { hovered: hoveredId === err.id })}
|
|
|
|
onClick={() => copyError(err.id)}
|
|
|
|
onMouseEnter={() => setHoveredId(err.id)}
|
|
|
|
onMouseLeave={() => setHoveredId(null)}
|
|
|
|
title="Click to Copy Error Message"
|
|
|
|
>
|
|
|
|
<div className="flash-error-scroll">
|
|
|
|
{err.title != null ? <div className="flash-error-title">{err.title}</div> : null}
|
|
|
|
{err.message != null ? (
|
|
|
|
<div className="flash-error-message">{convertNewlinesToBreaks(err.message)}</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-08-03 00:39:22 +02:00
|
|
|
const AppInner = () => {
|
2024-10-17 20:14:59 +02:00
|
|
|
const prefersReducedMotion = useAtomValue(atoms.prefersReducedMotionAtom);
|
|
|
|
const client = useAtomValue(atoms.client);
|
|
|
|
const windowData = useAtomValue(atoms.waveWindow);
|
|
|
|
const isFullScreen = useAtomValue(atoms.isFullScreen);
|
2024-08-15 06:47:09 +02:00
|
|
|
|
2024-08-03 00:39:22 +02:00
|
|
|
if (client == null || windowData == null) {
|
|
|
|
return (
|
|
|
|
<div className="mainapp">
|
|
|
|
<AppBackground />
|
|
|
|
<CenteredDiv>invalid configuration, client or window was not loaded</CenteredDiv>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2024-07-22 22:33:10 +02:00
|
|
|
|
2024-05-10 05:24:24 +02:00
|
|
|
return (
|
2024-08-15 06:47:09 +02:00
|
|
|
<div
|
|
|
|
className={clsx("mainapp", PLATFORM, {
|
|
|
|
fullscreen: isFullScreen,
|
2024-09-07 01:20:27 +02:00
|
|
|
"prefers-reduced-motion": prefersReducedMotion,
|
2024-08-15 06:47:09 +02:00
|
|
|
})}
|
|
|
|
onContextMenu={handleContextMenu}
|
|
|
|
>
|
2024-07-29 20:55:10 +02:00
|
|
|
<AppBackground />
|
2024-08-03 00:39:22 +02:00
|
|
|
<AppKeyHandlers />
|
2024-08-30 01:06:15 +02:00
|
|
|
<AppFocusHandler />
|
2024-07-26 22:30:11 +02:00
|
|
|
<AppSettingsUpdater />
|
2024-06-04 22:05:44 +02:00
|
|
|
<DndProvider backend={HTML5Backend}>
|
|
|
|
<Workspace />
|
|
|
|
</DndProvider>
|
2024-09-13 01:02:18 +02:00
|
|
|
<FlashError />
|
2024-11-16 06:26:16 +01:00
|
|
|
{isDev() ? <NotificationBubbles></NotificationBubbles> : null}
|
2024-05-10 05:24:24 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export { App };
|