3db7d69849
I profiled dragging and it looks like it takes ~3ms to save to localStorage a smallish scene and we're doing it twice per mousemove. Let's debounce so we don't pay that cost on every mouse move. Stole the implementation from #220 which got reverted.
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
export function getDateTime() {
|
|
const date = new Date();
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
const hr = date.getHours();
|
|
const min = date.getMinutes();
|
|
const secs = date.getSeconds();
|
|
|
|
return `${year}${month}${day}${hr}${min}${secs}`;
|
|
}
|
|
|
|
export function capitalizeString(str: string) {
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
}
|
|
|
|
export function isInputLike(
|
|
target: Element | EventTarget | null
|
|
): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
|
|
return (
|
|
(target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
|
|
target instanceof HTMLInputElement ||
|
|
target instanceof HTMLTextAreaElement ||
|
|
target instanceof HTMLSelectElement
|
|
);
|
|
}
|
|
|
|
// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
|
|
export function measureText(text: string, font: string) {
|
|
const line = document.createElement("div");
|
|
const body = document.body;
|
|
line.style.position = "absolute";
|
|
line.style.whiteSpace = "nowrap";
|
|
line.style.font = font;
|
|
body.appendChild(line);
|
|
// Now we can measure width and height of the letter
|
|
line.innerText = text;
|
|
const width = line.offsetWidth;
|
|
const height = line.offsetHeight;
|
|
// Now creating 1px sized item that will be aligned to baseline
|
|
// to calculate baseline shift
|
|
const span = document.createElement("span");
|
|
span.style.display = "inline-block";
|
|
span.style.overflow = "hidden";
|
|
span.style.width = "1px";
|
|
span.style.height = "1px";
|
|
line.appendChild(span);
|
|
// Baseline is important for positioning text on canvas
|
|
const baseline = span.offsetTop + span.offsetHeight;
|
|
document.body.removeChild(line);
|
|
|
|
return { width, height, baseline };
|
|
}
|
|
|
|
export function debounce<T extends any[]>(
|
|
fn: (...args: T) => void,
|
|
timeout: number
|
|
) {
|
|
let handle = 0;
|
|
return (...args: T) => {
|
|
clearTimeout(handle);
|
|
handle = window.setTimeout(() => fn(...args), timeout);
|
|
};
|
|
}
|