mirror of
https://github.com/rio-labs/rio.git
synced 2026-02-05 21:28:30 -06:00
442 lines
14 KiB
TypeScript
442 lines
14 KiB
TypeScript
import { pixelsPerRem } from './app';
|
|
import { componentsById } from './componentManagement';
|
|
import { ComponentBase } from './components/componentBase';
|
|
import { markEventAsHandled } from './eventHandling';
|
|
import { callRemoteMethodDiscardResponse } from './rpc';
|
|
|
|
export class AsyncQueue<T> {
|
|
private waitingForValue: ((value: T) => void)[] = [];
|
|
private values: T[] = [];
|
|
|
|
push(value: T): void {
|
|
// If someone is waiting for a value, give it to them
|
|
let notifyFirstWaiter = this.waitingForValue.shift();
|
|
if (notifyFirstWaiter !== undefined) {
|
|
notifyFirstWaiter(value);
|
|
return;
|
|
}
|
|
|
|
// Otherwise, push it onto the stack
|
|
this.values.push(value);
|
|
}
|
|
|
|
async get(): Promise<T> {
|
|
// If a value exists in the queue, just return that
|
|
let value = this.values.shift();
|
|
if (value !== undefined) {
|
|
return value;
|
|
}
|
|
|
|
// Otherwise, create a Promise that will be resolved when a new value is
|
|
// added to the queue
|
|
let waitForValue = new Promise((resolve: (value: T) => void) => {
|
|
this.waitingForValue.push(resolve);
|
|
});
|
|
return await waitForValue;
|
|
}
|
|
}
|
|
|
|
export function commitCss(element: HTMLElement): void {
|
|
element.offsetHeight;
|
|
}
|
|
|
|
export function disableTransitions(element: HTMLElement) {
|
|
element.style.transition = 'none';
|
|
element.offsetHeight;
|
|
}
|
|
|
|
export function enableTransitions(element: HTMLElement) {
|
|
element.style.removeProperty('transition');
|
|
element.offsetHeight;
|
|
}
|
|
|
|
export function withoutTransitions(
|
|
element: HTMLElement,
|
|
func: () => void
|
|
): void {
|
|
disableTransitions(element);
|
|
|
|
func();
|
|
|
|
enableTransitions(element);
|
|
}
|
|
|
|
/// Asynchronously sleeps for the given number of seconds.
|
|
export async function sleep(durationInSeconds: number): Promise<void> {
|
|
await new Promise((resolve, reject) =>
|
|
setTimeout(resolve, durationInSeconds * 1000)
|
|
);
|
|
}
|
|
|
|
export function reprElement(element: Element): string {
|
|
let chunks = [element.tagName.toLowerCase()];
|
|
|
|
for (let attr of element.attributes) {
|
|
chunks.push(`${attr.name}=${JSON.stringify(attr.value)}`);
|
|
}
|
|
|
|
return `<${chunks.join(' ')}>`;
|
|
}
|
|
|
|
/// Returns an array containing all numbers from `start` (inclusive) to `end`
|
|
/// (exclusive).
|
|
export function range(start: number, end: number): number[] {
|
|
let result: number[] = [];
|
|
|
|
for (let ii = start; ii < end; ii++) {
|
|
result.push(ii);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
export function zip<T1, T2>(
|
|
iterable1: Iterable<T1>,
|
|
iterable2: Iterable<T2>
|
|
): Array<[T1, T2]> {
|
|
const result: Array<[T1, T2]> = [];
|
|
const iter1 = iterable1[Symbol.iterator]();
|
|
const iter2 = iterable2[Symbol.iterator]();
|
|
|
|
let next1 = iter1.next();
|
|
let next2 = iter2.next();
|
|
|
|
while (!next1.done && !next2.done) {
|
|
result.push([next1.value, next2.value]);
|
|
next1 = iter1.next();
|
|
next2 = iter2.next();
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
/// Returns the first argument that isn't `undefined`. Returns `undefined` if
|
|
/// none of the arguments are defined.
|
|
export function firstDefined(...args: any[]): any {
|
|
for (let arg of args) {
|
|
if (arg !== undefined) {
|
|
return arg;
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
/// Removes `oldElement` from the DOM and inserts `newElement` at its position
|
|
export function replaceElement(oldElement: Element, newElement: Node): void {
|
|
oldElement.parentElement?.insertBefore(newElement, oldElement);
|
|
oldElement.remove();
|
|
}
|
|
|
|
/// Wraps the given Element in a DIV
|
|
export function insertWrapperElement(wrappedElement: Element): HTMLElement {
|
|
let wrapperElement = document.createElement('div');
|
|
|
|
replaceElement(wrappedElement, wrapperElement);
|
|
wrapperElement.appendChild(wrappedElement);
|
|
|
|
return wrapperElement;
|
|
}
|
|
|
|
/// Adds a timeout to a promise. Throws TimeoutError if the time limit is
|
|
/// exceeded before the promise resolves.
|
|
export function timeout<T>(
|
|
promise: Promise<T>,
|
|
timeoutInSeconds: number
|
|
): Promise<T> {
|
|
return Promise.race([promise, rejectAfter(timeoutInSeconds)]);
|
|
}
|
|
|
|
function rejectAfter(timeoutInSeconds: number): Promise<never> {
|
|
return new Promise((resolve, reject) => {
|
|
setTimeout(reject, timeoutInSeconds * 1000);
|
|
});
|
|
}
|
|
|
|
export class TimeoutError extends Error {
|
|
constructor(message: string) {
|
|
super(message);
|
|
this.name = this.constructor.name;
|
|
}
|
|
}
|
|
|
|
export class ClipboardError extends Error {
|
|
constructor(message: string) {
|
|
super(message);
|
|
this.name = this.constructor.name;
|
|
}
|
|
}
|
|
|
|
export async function setClipboard(text: string): Promise<void> {
|
|
if (navigator.clipboard) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
return;
|
|
} catch (error) {
|
|
console.warn(`Failed to set clipboard content: ${error}`);
|
|
throw new ClipboardError(
|
|
`Failed to set clipboard content: ${error}`
|
|
);
|
|
}
|
|
}
|
|
|
|
// Fallback in case `navigator.clipboard` isn't available or didn't work
|
|
if (document.execCommand) {
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = text;
|
|
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand('copy');
|
|
textArea.remove();
|
|
}
|
|
|
|
console.warn('Failed to set clipboard content: No clipboard API available');
|
|
throw new ClipboardError(
|
|
'Failed to set clipboard content: No clipboard API available'
|
|
);
|
|
}
|
|
|
|
export async function getClipboard(): Promise<string> {
|
|
if (navigator.clipboard) {
|
|
try {
|
|
return await navigator.clipboard.readText();
|
|
} catch (error) {
|
|
console.warn(`Failed to get clipboard content: ${error}`);
|
|
throw new ClipboardError(
|
|
`Failed to get clipboard content: ${error}`
|
|
);
|
|
}
|
|
}
|
|
|
|
throw new ClipboardError('Clipboard API is not available');
|
|
}
|
|
|
|
/// Checks if there's an #url-fragment, and if so, scrolls the corresponding
|
|
/// ScrollTarget into view
|
|
export function scrollToUrlFragment(
|
|
behavior: 'instant' | 'smooth' = 'smooth'
|
|
): void {
|
|
let fragment = window.location.hash.substring(1);
|
|
if (!fragment) {
|
|
return;
|
|
}
|
|
|
|
let element = document.getElementById(fragment);
|
|
if (element === null) {
|
|
return;
|
|
}
|
|
|
|
element.scrollIntoView({ behavior: behavior });
|
|
}
|
|
|
|
/// Returns `true` if the given URL is local to this app and `false` otherwise.
|
|
function isLocalUrl(url: string): boolean {
|
|
let parsedUrl = new URL(url);
|
|
return parsedUrl.host === document.location.host;
|
|
}
|
|
|
|
/// Navigates to the given URL. If the URL is local to this app, does so without
|
|
/// reloading the page. Otherwise, does a full page reload.
|
|
export function navigateToUrl(url: string, openInNewTab: boolean): void {
|
|
// TODO: If the websocket connection to the server is closed, handle it
|
|
// locally even if it would usually be handled by the server
|
|
|
|
// If only the url fragment is different, just scroll the relevant
|
|
// element into view and we're done
|
|
if (!openInNewTab) {
|
|
let currentUrlWithoutHash = window.location.href.split('#')[0];
|
|
let [urlWithoutHash, hash] = url.split('#');
|
|
|
|
if (urlWithoutHash === currentUrlWithoutHash && hash) {
|
|
window.location.hash = hash;
|
|
scrollToUrlFragment();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// First, decide whether we can do the navigation ourselves or if we have to
|
|
// let the server handle it.
|
|
//
|
|
// Note: We don't want to needlessly close the session and create a new one,
|
|
// so if the URL points to another page of the rio app, we'll also tell the
|
|
// server about it instead of doing it ourselves.
|
|
let sendToServer: boolean;
|
|
|
|
// If it's not a HTTP(S) url, just let the browser/webview handle it
|
|
if (!['http:', 'https:'].includes(new URL(url).protocol.toLowerCase())) {
|
|
sendToServer = false;
|
|
}
|
|
// If RUNNING_IN_WINDOW, the server has to do it for us:
|
|
// - We can't open a new tab
|
|
// - External urls must be opened in a new tab
|
|
// - Local urls are sent to the server in order to keep this session alive
|
|
else if (globalThis.RUNNING_IN_WINDOW) {
|
|
sendToServer = true;
|
|
}
|
|
// If running in a browser and we're supposed to open a new tab, we can
|
|
// do that.
|
|
else if (openInNewTab) {
|
|
sendToServer = false;
|
|
}
|
|
// If running in a browser and not opening a new tab, it depends on whether
|
|
// it's an external url or not. Navigating to an external URL closes the
|
|
// session anyways, so we can just navigate away. But for local urls it's
|
|
// more efficient to let the server handle it.
|
|
else {
|
|
sendToServer = isLocalUrl(url);
|
|
}
|
|
|
|
if (sendToServer) {
|
|
// The server knows exactly what to do with the URL, so it doesn't even
|
|
// accept a `openInNewTab` argument
|
|
callRemoteMethodDiscardResponse('openUrl', { url: url });
|
|
} else if (openInNewTab) {
|
|
let link = document.createElement('a');
|
|
link.href = url;
|
|
link.target = '_blank';
|
|
link.click();
|
|
} else {
|
|
window.location.href = url;
|
|
}
|
|
}
|
|
|
|
export function hijackLinkElement(linkElement: HTMLAnchorElement) {
|
|
linkElement.addEventListener(
|
|
'click',
|
|
(event) => {
|
|
let openInNewTab: boolean;
|
|
|
|
if (event.button === 0) {
|
|
openInNewTab = linkElement.target === '_blank';
|
|
} else if (event.button === 1) {
|
|
openInNewTab = true;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
markEventAsHandled(event);
|
|
|
|
navigateToUrl(linkElement.href, openInNewTab);
|
|
},
|
|
true
|
|
);
|
|
}
|
|
|
|
/// Determines the preferred format string for dates in the given locale. The
|
|
/// string is suitable for use with Python's `strftime` function.
|
|
export function getPreferredPythonDateFormatString(locale: string): string {
|
|
/// Format an already known date
|
|
let formattedDate = new Date(3333, 2, 1).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
});
|
|
|
|
/// Parse the format string
|
|
formattedDate = formattedDate.replace('3333', '%Y');
|
|
formattedDate = formattedDate.replace('33', '%y');
|
|
|
|
formattedDate = formattedDate.replace('03', '%m');
|
|
formattedDate = formattedDate.replace('3', '%m'); // %-m is not supported on Windows
|
|
|
|
formattedDate = formattedDate.replace('01', '%d');
|
|
formattedDate = formattedDate.replace('1', '%d'); // %-d is not supported on Windows
|
|
|
|
return formattedDate;
|
|
}
|
|
|
|
/// Gathers layout information for the given components.
|
|
export async function getComponentLayouts(
|
|
componentIds: number[]
|
|
): Promise<(object | null)[]> {
|
|
let result: (object | null)[] = [];
|
|
|
|
for (let componentId of componentIds) {
|
|
{
|
|
// Find the component
|
|
let component: ComponentBase = componentsById[componentId];
|
|
|
|
if (component === undefined) {
|
|
result.push(null);
|
|
continue;
|
|
}
|
|
|
|
// And its parent
|
|
let parentComponent = component.getParent()!;
|
|
|
|
if (parentComponent === null) {
|
|
result.push(null);
|
|
continue;
|
|
}
|
|
|
|
// Position in the viewport
|
|
let rect = component.element.getBoundingClientRect();
|
|
let left_in_viewport = rect.left / pixelsPerRem;
|
|
let top_in_viewport = rect.top / pixelsPerRem;
|
|
|
|
// Position in the parent
|
|
let parentRect = parentComponent.element.getBoundingClientRect();
|
|
let left_in_parent = (rect.left - parentRect.left) / pixelsPerRem;
|
|
let top_in_parent = (rect.top - parentRect.top) / pixelsPerRem;
|
|
|
|
// Find the alignment component, if any
|
|
let alignmentElement = component.alignmentElement;
|
|
|
|
let allocated_width_before_alignment: number,
|
|
allocated_height_before_alignment: number;
|
|
|
|
if (alignmentElement === null) {
|
|
allocated_width_before_alignment = rect.width / pixelsPerRem;
|
|
allocated_height_before_alignment = rect.height / pixelsPerRem;
|
|
} else {
|
|
[
|
|
allocated_width_before_alignment,
|
|
allocated_height_before_alignment,
|
|
] = getElementSize(alignmentElement);
|
|
}
|
|
|
|
let [naturalWidth, naturalHeight] = getNaturalSize(component);
|
|
|
|
let [parentNaturalWidth, parentNaturalHeight] =
|
|
getNaturalSize(component);
|
|
let [parentAllocatedWidth, parentAllocatedHeight] = getElementSize(
|
|
parentComponent.outerElement
|
|
);
|
|
|
|
// Store the subresult
|
|
result.push({
|
|
left_in_viewport: left_in_viewport,
|
|
top_in_viewport: top_in_viewport,
|
|
left_in_parent: left_in_parent,
|
|
top_in_parent: top_in_parent,
|
|
natural_width: naturalWidth,
|
|
natural_height: naturalHeight,
|
|
allocated_width: rect.width / pixelsPerRem,
|
|
allocated_height: rect.height / pixelsPerRem,
|
|
allocated_width_before_alignment:
|
|
allocated_width_before_alignment,
|
|
allocated_height_before_alignment:
|
|
allocated_height_before_alignment,
|
|
parent_id: parentComponent.id,
|
|
parent_natural_width: parentNaturalWidth,
|
|
parent_natural_height: parentNaturalHeight,
|
|
parent_allocated_width: parentAllocatedWidth,
|
|
parent_allocated_height: parentAllocatedHeight,
|
|
});
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function getElementSize(element: HTMLElement): [number, number] {
|
|
let rect = element.getBoundingClientRect();
|
|
return [rect.width / pixelsPerRem, rect.height / pixelsPerRem];
|
|
}
|
|
|
|
function getNaturalSize(component: ComponentBase): [number, number] {
|
|
// FIXME
|
|
throw new Error('getNaturalSize is not yet implemented');
|
|
}
|