|
|
|
@ -6,9 +6,9 @@ export const SVG_NS = "http://www.w3.org/2000/svg";
|
|
|
|
|
|
|
|
|
|
|
|
let mockDateTime: string | null = null;
|
|
|
|
let mockDateTime: string | null = null;
|
|
|
|
|
|
|
|
|
|
|
|
export function setDateTimeForTests(dateTime: string) {
|
|
|
|
export const setDateTimeForTests = (dateTime: string) => {
|
|
|
|
mockDateTime = dateTime;
|
|
|
|
mockDateTime = dateTime;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export const getDateTime = () => {
|
|
|
|
export const getDateTime = () => {
|
|
|
|
if (mockDateTime) {
|
|
|
|
if (mockDateTime) {
|
|
|
|
@ -25,51 +25,43 @@ export const getDateTime = () => {
|
|
|
|
return `${year}-${month}-${day}-${hr}${min}`;
|
|
|
|
return `${year}-${month}-${day}-${hr}${min}`;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function capitalizeString(str: string) {
|
|
|
|
export const capitalizeString = (str: string) =>
|
|
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
|
|
str.charAt(0).toUpperCase() + str.slice(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function isToolIcon(
|
|
|
|
export const isToolIcon = (
|
|
|
|
target: Element | EventTarget | null,
|
|
|
|
target: Element | EventTarget | null,
|
|
|
|
): target is HTMLElement {
|
|
|
|
): target is HTMLElement =>
|
|
|
|
return target instanceof HTMLElement && target.className.includes("ToolIcon");
|
|
|
|
target instanceof HTMLElement && target.className.includes("ToolIcon");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function isInputLike(
|
|
|
|
export const isInputLike = (
|
|
|
|
target: Element | EventTarget | null,
|
|
|
|
target: Element | EventTarget | null,
|
|
|
|
): target is
|
|
|
|
): target is
|
|
|
|
| HTMLInputElement
|
|
|
|
| HTMLInputElement
|
|
|
|
| HTMLTextAreaElement
|
|
|
|
| HTMLTextAreaElement
|
|
|
|
| HTMLSelectElement
|
|
|
|
| HTMLSelectElement
|
|
|
|
| HTMLBRElement
|
|
|
|
| HTMLBRElement
|
|
|
|
| HTMLDivElement {
|
|
|
|
| HTMLDivElement =>
|
|
|
|
return (
|
|
|
|
|
|
|
|
(target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
|
|
|
|
(target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
|
|
|
|
target instanceof HTMLBRElement || // newline in wysiwyg
|
|
|
|
target instanceof HTMLBRElement || // newline in wysiwyg
|
|
|
|
target instanceof HTMLInputElement ||
|
|
|
|
target instanceof HTMLInputElement ||
|
|
|
|
target instanceof HTMLTextAreaElement ||
|
|
|
|
target instanceof HTMLTextAreaElement ||
|
|
|
|
target instanceof HTMLSelectElement
|
|
|
|
target instanceof HTMLSelectElement;
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function isWritableElement(
|
|
|
|
export const isWritableElement = (
|
|
|
|
target: Element | EventTarget | null,
|
|
|
|
target: Element | EventTarget | null,
|
|
|
|
): target is
|
|
|
|
): target is
|
|
|
|
| HTMLInputElement
|
|
|
|
| HTMLInputElement
|
|
|
|
| HTMLTextAreaElement
|
|
|
|
| HTMLTextAreaElement
|
|
|
|
| HTMLBRElement
|
|
|
|
| HTMLBRElement
|
|
|
|
| HTMLDivElement {
|
|
|
|
| HTMLDivElement =>
|
|
|
|
return (
|
|
|
|
|
|
|
|
(target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
|
|
|
|
(target instanceof HTMLElement && target.dataset.type === "wysiwyg") ||
|
|
|
|
target instanceof HTMLBRElement || // newline in wysiwyg
|
|
|
|
target instanceof HTMLBRElement || // newline in wysiwyg
|
|
|
|
target instanceof HTMLTextAreaElement ||
|
|
|
|
target instanceof HTMLTextAreaElement ||
|
|
|
|
(target instanceof HTMLInputElement &&
|
|
|
|
(target instanceof HTMLInputElement &&
|
|
|
|
(target.type === "text" || target.type === "number"))
|
|
|
|
(target.type === "text" || target.type === "number"));
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
|
|
|
|
// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
|
|
|
|
export function measureText(text: string, font: string) {
|
|
|
|
export const measureText = (text: string, font: string) => {
|
|
|
|
const line = document.createElement("div");
|
|
|
|
const line = document.createElement("div");
|
|
|
|
const body = document.body;
|
|
|
|
const body = document.body;
|
|
|
|
line.style.position = "absolute";
|
|
|
|
line.style.position = "absolute";
|
|
|
|
@ -93,12 +85,12 @@ export function measureText(text: string, font: string) {
|
|
|
|
document.body.removeChild(line);
|
|
|
|
document.body.removeChild(line);
|
|
|
|
|
|
|
|
|
|
|
|
return { width, height, baseline };
|
|
|
|
return { width, height, baseline };
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function debounce<T extends any[]>(
|
|
|
|
export const debounce = <T extends any[]>(
|
|
|
|
fn: (...args: T) => void,
|
|
|
|
fn: (...args: T) => void,
|
|
|
|
timeout: number,
|
|
|
|
timeout: number,
|
|
|
|
) {
|
|
|
|
) => {
|
|
|
|
let handle = 0;
|
|
|
|
let handle = 0;
|
|
|
|
let lastArgs: T;
|
|
|
|
let lastArgs: T;
|
|
|
|
const ret = (...args: T) => {
|
|
|
|
const ret = (...args: T) => {
|
|
|
|
@ -111,9 +103,9 @@ export function debounce<T extends any[]>(
|
|
|
|
fn(...lastArgs);
|
|
|
|
fn(...lastArgs);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
return ret;
|
|
|
|
return ret;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function selectNode(node: Element) {
|
|
|
|
export const selectNode = (node: Element) => {
|
|
|
|
const selection = window.getSelection();
|
|
|
|
const selection = window.getSelection();
|
|
|
|
if (selection) {
|
|
|
|
if (selection) {
|
|
|
|
const range = document.createRange();
|
|
|
|
const range = document.createRange();
|
|
|
|
@ -121,30 +113,28 @@ export function selectNode(node: Element) {
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.addRange(range);
|
|
|
|
selection.addRange(range);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function removeSelection() {
|
|
|
|
export const removeSelection = () => {
|
|
|
|
const selection = window.getSelection();
|
|
|
|
const selection = window.getSelection();
|
|
|
|
if (selection) {
|
|
|
|
if (selection) {
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.removeAllRanges();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function distance(x: number, y: number) {
|
|
|
|
export const distance = (x: number, y: number) => Math.abs(x - y);
|
|
|
|
return Math.abs(x - y);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function resetCursor() {
|
|
|
|
export const resetCursor = () => {
|
|
|
|
document.documentElement.style.cursor = "";
|
|
|
|
document.documentElement.style.cursor = "";
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function setCursorForShape(shape: string) {
|
|
|
|
export const setCursorForShape = (shape: string) => {
|
|
|
|
if (shape === "selection") {
|
|
|
|
if (shape === "selection") {
|
|
|
|
resetCursor();
|
|
|
|
resetCursor();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
document.documentElement.style.cursor = CURSOR_TYPE.CROSSHAIR;
|
|
|
|
document.documentElement.style.cursor = CURSOR_TYPE.CROSSHAIR;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export const isFullScreen = () =>
|
|
|
|
export const isFullScreen = () =>
|
|
|
|
document.fullscreenElement?.nodeName === "HTML";
|
|
|
|
document.fullscreenElement?.nodeName === "HTML";
|
|
|
|
@ -165,7 +155,7 @@ export const getShortcutKey = (shortcut: string): string => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return `${shortcut.replace(/CtrlOrCmd/i, "Ctrl")}`;
|
|
|
|
return `${shortcut.replace(/CtrlOrCmd/i, "Ctrl")}`;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
export function viewportCoordsToSceneCoords(
|
|
|
|
export const viewportCoordsToSceneCoords = (
|
|
|
|
{ clientX, clientY }: { clientX: number; clientY: number },
|
|
|
|
{ clientX, clientY }: { clientX: number; clientY: number },
|
|
|
|
{
|
|
|
|
{
|
|
|
|
scrollX,
|
|
|
|
scrollX,
|
|
|
|
@ -178,7 +168,7 @@ export function viewportCoordsToSceneCoords(
|
|
|
|
},
|
|
|
|
},
|
|
|
|
canvas: HTMLCanvasElement | null,
|
|
|
|
canvas: HTMLCanvasElement | null,
|
|
|
|
scale: number,
|
|
|
|
scale: number,
|
|
|
|
) {
|
|
|
|
) => {
|
|
|
|
const zoomOrigin = getZoomOrigin(canvas, scale);
|
|
|
|
const zoomOrigin = getZoomOrigin(canvas, scale);
|
|
|
|
const clientXWithZoom = zoomOrigin.x + (clientX - zoomOrigin.x) / zoom;
|
|
|
|
const clientXWithZoom = zoomOrigin.x + (clientX - zoomOrigin.x) / zoom;
|
|
|
|
const clientYWithZoom = zoomOrigin.y + (clientY - zoomOrigin.y) / zoom;
|
|
|
|
const clientYWithZoom = zoomOrigin.y + (clientY - zoomOrigin.y) / zoom;
|
|
|
|
@ -187,9 +177,9 @@ export function viewportCoordsToSceneCoords(
|
|
|
|
const y = clientYWithZoom - scrollY;
|
|
|
|
const y = clientYWithZoom - scrollY;
|
|
|
|
|
|
|
|
|
|
|
|
return { x, y };
|
|
|
|
return { x, y };
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function sceneCoordsToViewportCoords(
|
|
|
|
export const sceneCoordsToViewportCoords = (
|
|
|
|
{ sceneX, sceneY }: { sceneX: number; sceneY: number },
|
|
|
|
{ sceneX, sceneY }: { sceneX: number; sceneY: number },
|
|
|
|
{
|
|
|
|
{
|
|
|
|
scrollX,
|
|
|
|
scrollX,
|
|
|
|
@ -202,7 +192,7 @@ export function sceneCoordsToViewportCoords(
|
|
|
|
},
|
|
|
|
},
|
|
|
|
canvas: HTMLCanvasElement | null,
|
|
|
|
canvas: HTMLCanvasElement | null,
|
|
|
|
scale: number,
|
|
|
|
scale: number,
|
|
|
|
) {
|
|
|
|
) => {
|
|
|
|
const zoomOrigin = getZoomOrigin(canvas, scale);
|
|
|
|
const zoomOrigin = getZoomOrigin(canvas, scale);
|
|
|
|
const sceneXWithZoomAndScroll =
|
|
|
|
const sceneXWithZoomAndScroll =
|
|
|
|
zoomOrigin.x - (zoomOrigin.x - sceneX - scrollX) * zoom;
|
|
|
|
zoomOrigin.x - (zoomOrigin.x - sceneX - scrollX) * zoom;
|
|
|
|
@ -213,10 +203,7 @@ export function sceneCoordsToViewportCoords(
|
|
|
|
const y = sceneYWithZoomAndScroll;
|
|
|
|
const y = sceneYWithZoomAndScroll;
|
|
|
|
|
|
|
|
|
|
|
|
return { x, y };
|
|
|
|
return { x, y };
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export function getGlobalCSSVariable(name: string) {
|
|
|
|
export const getGlobalCSSVariable = (name: string) =>
|
|
|
|
return getComputedStyle(document.documentElement).getPropertyValue(
|
|
|
|
getComputedStyle(document.documentElement).getPropertyValue(`--${name}`);
|
|
|
|
`--${name}`,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
Lipis
5 years ago
committed by
GitHub