@enigmax/primitives 0.25.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-4SZ5N7BA.js +121 -0
- package/dist/chunk-EYZ366LP.js +189 -0
- package/dist/chunk-ISXB5RUH.js +380 -0
- package/dist/chunk-JJVZYW5C.js +946 -0
- package/dist/chunk-QIIV2QSV.js +108 -0
- package/dist/chunk-RUEQ3TGP.js +155 -0
- package/dist/clipboard-menu-BvXJCSFN.d.ts +93 -0
- package/dist/context-BfjYGPnH.d.ts +54 -0
- package/dist/{clipboard-menu-B_ouitfS.d.ts → context-menu-D3FtTn7v.d.ts} +1 -91
- package/dist/index.d.ts +266 -2
- package/dist/index.js +4 -2
- package/dist/menu-MSQSE6U5.js +54 -0
- package/dist/menu-PNQRTRNV.js +33 -0
- package/dist/next/index.d.ts +6 -2
- package/dist/next/index.js +10 -6
- package/dist/react/context-menu.d.ts +8 -54
- package/dist/react/image.d.ts +109 -0
- package/dist/react/image.js +3 -0
- package/dist/react/index.d.ts +6 -2
- package/dist/react/index.js +10 -6
- package/dist/react/input.js +1 -1
- package/dist/react/video.d.ts +120 -0
- package/dist/react/video.js +3 -0
- package/dist/react-router/index.d.ts +6 -2
- package/dist/react-router/index.js +10 -6
- package/dist/viewer-73LSE6RR.js +3 -0
- package/package.json +15 -2
- package/recipes/image/styles.css +182 -0
- package/recipes/video/styles.css +154 -0
- package/registry.json +465 -0
- package/src/core/image-viewer.ts +222 -0
- package/src/core/player.ts +303 -0
- package/src/index.ts +52 -0
- package/src/react/image/icons.tsx +55 -0
- package/src/react/image/index.tsx +185 -0
- package/src/react/image/menu.tsx +76 -0
- package/src/react/image/styles.ts +213 -0
- package/src/react/image/types.ts +113 -0
- package/src/react/image/viewer.tsx +571 -0
- package/src/react/index.ts +3 -0
- package/src/react/video/icons.tsx +135 -0
- package/src/react/video/index.tsx +724 -0
- package/src/react/video/menu.tsx +66 -0
- package/src/react/video/rail.tsx +99 -0
- package/src/react/video/styles.ts +161 -0
- package/src/react/video/types.ts +135 -0
- /package/dist/{chunk-3MGBZOAU.js → chunk-RMNXVWQ4.js} +0 -0
- /package/dist/{chunk-MSOCCQGH.js → chunk-T7I6WJSN.js} +0 -0
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
// src/core/image-viewer.ts
|
|
2
|
+
var IDENTITY = { scale: 1, x: 0, y: 0 };
|
|
3
|
+
var ZOOM_LIMITS = { min: 1, max: 8 };
|
|
4
|
+
var ZOOM_STEP = 1.35;
|
|
5
|
+
var ZOOM_DOUBLE = 2.5;
|
|
6
|
+
function clampScale(scale, limits = ZOOM_LIMITS) {
|
|
7
|
+
return Math.min(Math.max(scale, limits.min), limits.max);
|
|
8
|
+
}
|
|
9
|
+
function wheelFactor(deltaY, deltaMode = 0) {
|
|
10
|
+
const pixels = deltaMode === 1 ? deltaY * 16 : deltaMode === 2 ? deltaY * 400 : deltaY;
|
|
11
|
+
return Math.exp(-Math.min(Math.max(pixels, -240), 240) / 320);
|
|
12
|
+
}
|
|
13
|
+
function zoomAt(current, factor, point, box, limits = ZOOM_LIMITS) {
|
|
14
|
+
const scale = clampScale(current.scale * factor, limits);
|
|
15
|
+
if (scale === current.scale) return current;
|
|
16
|
+
const dx = point.x - (box.left + box.width / 2);
|
|
17
|
+
const dy = point.y - (box.top + box.height / 2);
|
|
18
|
+
const ratio = scale / current.scale;
|
|
19
|
+
return { scale, x: dx - (dx - current.x) * ratio, y: dy - (dy - current.y) * ratio };
|
|
20
|
+
}
|
|
21
|
+
function clampPan(transform, box, natural) {
|
|
22
|
+
const width = natural.width * transform.scale;
|
|
23
|
+
const height = natural.height * transform.scale;
|
|
24
|
+
const x = Math.max(0, (width - box.width) / 2);
|
|
25
|
+
const y = Math.max(0, (height - box.height) / 2);
|
|
26
|
+
return {
|
|
27
|
+
scale: transform.scale,
|
|
28
|
+
x: Math.min(Math.max(transform.x, -x), x),
|
|
29
|
+
y: Math.min(Math.max(transform.y, -y), y)
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
function fittedSize(natural, box) {
|
|
33
|
+
if (!natural.width || !natural.height) return { width: box.width, height: box.height };
|
|
34
|
+
const ratio = Math.min(box.width / natural.width, box.height / natural.height, 1);
|
|
35
|
+
return { width: natural.width * ratio, height: natural.height * ratio };
|
|
36
|
+
}
|
|
37
|
+
function pinchDistance(a, b) {
|
|
38
|
+
return Math.hypot(a.x - b.x, a.y - b.y);
|
|
39
|
+
}
|
|
40
|
+
function nextIndex(index, length, step, options = {}) {
|
|
41
|
+
const { loop = true, skip } = options;
|
|
42
|
+
if (length <= 0) return -1;
|
|
43
|
+
let next = index;
|
|
44
|
+
for (let moved = 0; moved < length; moved += 1) {
|
|
45
|
+
next += step;
|
|
46
|
+
if (next < 0 || next >= length) {
|
|
47
|
+
if (!loop) return -1;
|
|
48
|
+
next = (next % length + length) % length;
|
|
49
|
+
}
|
|
50
|
+
if (!skip?.has(next)) return next;
|
|
51
|
+
}
|
|
52
|
+
return -1;
|
|
53
|
+
}
|
|
54
|
+
function filenameFrom(url, fallback = "image") {
|
|
55
|
+
try {
|
|
56
|
+
const { pathname } = new URL(url, typeof location === "undefined" ? "https://localhost" : location.href);
|
|
57
|
+
const name = pathname.split("/").filter(Boolean).pop();
|
|
58
|
+
return name && name.includes(".") ? decodeURIComponent(name) : fallback;
|
|
59
|
+
} catch {
|
|
60
|
+
return fallback;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
async function downloadFile(url, filename) {
|
|
64
|
+
const name = filename ?? filenameFrom(url);
|
|
65
|
+
try {
|
|
66
|
+
const response = await fetch(url, { mode: "cors", credentials: "omit" });
|
|
67
|
+
if (!response.ok) throw new Error(`the file answered ${response.status}`);
|
|
68
|
+
const blob = await response.blob();
|
|
69
|
+
const href = URL.createObjectURL(blob);
|
|
70
|
+
saveAs(href, name);
|
|
71
|
+
setTimeout(() => URL.revokeObjectURL(href), 1e4);
|
|
72
|
+
} catch {
|
|
73
|
+
saveAs(url, name, true);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
function saveAs(href, name, external = false) {
|
|
77
|
+
if (typeof document === "undefined") return;
|
|
78
|
+
const anchor = document.createElement("a");
|
|
79
|
+
anchor.href = href;
|
|
80
|
+
anchor.download = name;
|
|
81
|
+
anchor.rel = "noopener";
|
|
82
|
+
if (external) anchor.target = "_blank";
|
|
83
|
+
document.body.append(anchor);
|
|
84
|
+
anchor.click();
|
|
85
|
+
anchor.remove();
|
|
86
|
+
}
|
|
87
|
+
var FLIGHT_MS = 300;
|
|
88
|
+
function flightMs(element) {
|
|
89
|
+
if (!element || typeof getComputedStyle === "undefined") return FLIGHT_MS;
|
|
90
|
+
const seconds = Number.parseFloat(getComputedStyle(element).transitionDuration);
|
|
91
|
+
return Number.isFinite(seconds) && seconds > 0 ? seconds * 1e3 : FLIGHT_MS;
|
|
92
|
+
}
|
|
93
|
+
function flightFrom(from, to) {
|
|
94
|
+
if (!from.width || !from.height || !to.width || !to.height) return null;
|
|
95
|
+
return {
|
|
96
|
+
scale: from.width / to.width,
|
|
97
|
+
// Centre to centre: `translate(x, y) scale(s)` scales about the element's own centre
|
|
98
|
+
// first, so the offset that lands it on the thumbnail is the distance between them.
|
|
99
|
+
x: from.left + from.width / 2 - (to.left + to.width / 2),
|
|
100
|
+
y: from.top + from.height / 2 - (to.top + to.height / 2)
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
function prefersReducedMotion() {
|
|
104
|
+
if (typeof window === "undefined" || !window.matchMedia) return false;
|
|
105
|
+
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export { FLIGHT_MS, IDENTITY, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, clampPan, clampScale, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, nextIndex, pinchDistance, prefersReducedMotion, wheelFactor, zoomAt };
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
// src/core/player.ts
|
|
2
|
+
var SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
|
|
3
|
+
var SEEK_STEP = 5;
|
|
4
|
+
var SEEK_JUMP = 10;
|
|
5
|
+
var VOLUME_STEP = 0.05;
|
|
6
|
+
function formatTime(seconds, duration = seconds) {
|
|
7
|
+
if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
|
|
8
|
+
const total = Math.floor(seconds);
|
|
9
|
+
const hours = Math.floor(total / 3600);
|
|
10
|
+
const minutes = Math.floor(total % 3600 / 60);
|
|
11
|
+
const rest = total % 60;
|
|
12
|
+
const withHours = Number.isFinite(duration) && duration >= 3600;
|
|
13
|
+
const pad = (value) => String(value).padStart(2, "0");
|
|
14
|
+
if (withHours || hours > 0) return `${hours}:${pad(minutes)}:${pad(rest)}`;
|
|
15
|
+
return `${minutes}:${pad(rest)}`;
|
|
16
|
+
}
|
|
17
|
+
function progress(time, duration) {
|
|
18
|
+
if (!Number.isFinite(duration) || duration <= 0) return 0;
|
|
19
|
+
return Math.min(Math.max(time / duration, 0), 1);
|
|
20
|
+
}
|
|
21
|
+
function fractionAt(box, clientX) {
|
|
22
|
+
if (!box.width) return 0;
|
|
23
|
+
return Math.min(Math.max((clientX - box.left) / box.width, 0), 1);
|
|
24
|
+
}
|
|
25
|
+
function bufferedAhead(ranges, time, duration) {
|
|
26
|
+
if (!ranges || !Number.isFinite(duration) || duration <= 0) return 0;
|
|
27
|
+
for (let at = 0; at < ranges.length; at += 1) {
|
|
28
|
+
if (ranges.start(at) <= time && ranges.end(at) >= time) return Math.min(ranges.end(at) / duration, 1);
|
|
29
|
+
}
|
|
30
|
+
return 0;
|
|
31
|
+
}
|
|
32
|
+
function nextSpeed(current, step = 1) {
|
|
33
|
+
const at = SPEEDS.indexOf(current);
|
|
34
|
+
const from = at === -1 ? SPEEDS.indexOf(1) : at;
|
|
35
|
+
return SPEEDS[(from + step + SPEEDS.length) % SPEEDS.length];
|
|
36
|
+
}
|
|
37
|
+
function commandFor(key) {
|
|
38
|
+
if (key === " " || key === "k" || key === "K") return { type: "toggle" };
|
|
39
|
+
if (key === "ArrowRight") return { type: "seek", by: SEEK_STEP };
|
|
40
|
+
if (key === "ArrowLeft") return { type: "seek", by: -SEEK_STEP };
|
|
41
|
+
if (key === "l" || key === "L") return { type: "seek", by: SEEK_JUMP };
|
|
42
|
+
if (key === "j" || key === "J") return { type: "seek", by: -SEEK_JUMP };
|
|
43
|
+
if (key === "ArrowUp") return { type: "volume", by: VOLUME_STEP };
|
|
44
|
+
if (key === "ArrowDown") return { type: "volume", by: -VOLUME_STEP };
|
|
45
|
+
if (key === "m" || key === "M") return { type: "mute" };
|
|
46
|
+
if (key === "f" || key === "F") return { type: "fullscreen" };
|
|
47
|
+
if (key === "c" || key === "C") return { type: "captions" };
|
|
48
|
+
if (key === "p" || key === "P") return { type: "pip" };
|
|
49
|
+
if (key >= "0" && key <= "9") return { type: "seekTo", fraction: Number(key) / 10 };
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
function isTypingTarget(target) {
|
|
53
|
+
const element = target;
|
|
54
|
+
if (!element || typeof element.tagName !== "string") return false;
|
|
55
|
+
if (element.isContentEditable) return true;
|
|
56
|
+
return ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName);
|
|
57
|
+
}
|
|
58
|
+
function fullscreenElement() {
|
|
59
|
+
if (typeof document === "undefined") return null;
|
|
60
|
+
const legacy = document;
|
|
61
|
+
return document.fullscreenElement ?? legacy.webkitFullscreenElement ?? null;
|
|
62
|
+
}
|
|
63
|
+
async function toggleFullscreen(container, video) {
|
|
64
|
+
const legacyDocument = document;
|
|
65
|
+
if (fullscreenElement()) {
|
|
66
|
+
await (document.exitFullscreen?.() ?? legacyDocument.webkitExitFullscreen?.());
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
const legacyElement = container;
|
|
70
|
+
if (container.requestFullscreen) return void await container.requestFullscreen();
|
|
71
|
+
if (legacyElement.webkitRequestFullscreen) return void await legacyElement.webkitRequestFullscreen();
|
|
72
|
+
const iosVideo = video;
|
|
73
|
+
iosVideo?.webkitEnterFullscreen?.();
|
|
74
|
+
}
|
|
75
|
+
function supportsPip() {
|
|
76
|
+
return typeof document !== "undefined" && Boolean(document.pictureInPictureEnabled);
|
|
77
|
+
}
|
|
78
|
+
async function togglePip(video) {
|
|
79
|
+
if (document.pictureInPictureElement) return void await document.exitPictureInPicture();
|
|
80
|
+
await video.requestPictureInPicture();
|
|
81
|
+
}
|
|
82
|
+
function captionTracks(list) {
|
|
83
|
+
if (!list) return [];
|
|
84
|
+
const found = [];
|
|
85
|
+
for (let at = 0; at < list.length; at += 1) {
|
|
86
|
+
const track = list[at];
|
|
87
|
+
if (!track || track.kind !== "subtitles" && track.kind !== "captions") continue;
|
|
88
|
+
found.push({ index: at, label: track.label || track.language || `Track ${found.length + 1}`, language: track.language });
|
|
89
|
+
}
|
|
90
|
+
return found;
|
|
91
|
+
}
|
|
92
|
+
function activeCaption(list) {
|
|
93
|
+
if (!list) return -1;
|
|
94
|
+
for (let at = 0; at < list.length; at += 1) if (list[at]?.mode === "showing") return at;
|
|
95
|
+
return -1;
|
|
96
|
+
}
|
|
97
|
+
function showCaption(list, index) {
|
|
98
|
+
if (!list) return;
|
|
99
|
+
for (let at = 0; at < list.length; at += 1) {
|
|
100
|
+
const track = list[at];
|
|
101
|
+
if (track) track.mode = at === index ? "showing" : "disabled";
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
function supportsRemote(video) {
|
|
105
|
+
const element = video;
|
|
106
|
+
if (!element || element.disableRemotePlayback) return false;
|
|
107
|
+
return Boolean(element.remote?.prompt ?? element.webkitShowPlaybackTargetPicker);
|
|
108
|
+
}
|
|
109
|
+
function watchRemote(video, onChange) {
|
|
110
|
+
const element = video;
|
|
111
|
+
const state = { available: false, connected: false };
|
|
112
|
+
const publish = (next) => {
|
|
113
|
+
Object.assign(state, next);
|
|
114
|
+
onChange({ ...state });
|
|
115
|
+
};
|
|
116
|
+
if (element.remote) {
|
|
117
|
+
const remote = element.remote;
|
|
118
|
+
const onState = () => publish({ connected: remote.state === "connected" });
|
|
119
|
+
let watch = null;
|
|
120
|
+
let cancelled = false;
|
|
121
|
+
remote.watchAvailability((available) => {
|
|
122
|
+
if (!cancelled) publish({ available });
|
|
123
|
+
}).then((id) => {
|
|
124
|
+
if (cancelled) void remote.cancelWatchAvailability(id).catch(() => {
|
|
125
|
+
});
|
|
126
|
+
else watch = id;
|
|
127
|
+
}).catch(() => {
|
|
128
|
+
if (!cancelled) publish({ available: true });
|
|
129
|
+
});
|
|
130
|
+
for (const name of ["connect", "connecting", "disconnect"]) remote.addEventListener(name, onState);
|
|
131
|
+
onState();
|
|
132
|
+
return () => {
|
|
133
|
+
cancelled = true;
|
|
134
|
+
for (const name of ["connect", "connecting", "disconnect"]) remote.removeEventListener(name, onState);
|
|
135
|
+
if (watch !== null) void remote.cancelWatchAvailability(watch).catch(() => {
|
|
136
|
+
});
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
const onAvailability = (event) => publish({ available: event.availability === "available" });
|
|
140
|
+
const onWireless = () => publish({ connected: Boolean(element.webkitCurrentPlaybackTargetIsWireless) });
|
|
141
|
+
element.addEventListener("webkitplaybacktargetavailabilitychanged", onAvailability);
|
|
142
|
+
element.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", onWireless);
|
|
143
|
+
onWireless();
|
|
144
|
+
return () => {
|
|
145
|
+
element.removeEventListener("webkitplaybacktargetavailabilitychanged", onAvailability);
|
|
146
|
+
element.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", onWireless);
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
async function promptRemote(video) {
|
|
150
|
+
const element = video;
|
|
151
|
+
if (element.remote?.prompt) return void await element.remote.prompt();
|
|
152
|
+
element.webkitShowPlaybackTargetPicker?.();
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
export { SEEK_JUMP, SEEK_STEP, SPEEDS, VOLUME_STEP, activeCaption, bufferedAhead, captionTracks, commandFor, formatTime, fractionAt, fullscreenElement, isTypingTarget, nextSpeed, progress, promptRemote, showCaption, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { b as ContextMenuEntry } from './context-menu-D3FtTn7v.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The rows every context menu on a desktop already has: Copy, Cut and Paste.
|
|
5
|
+
*
|
|
6
|
+
* A menu opened over a selection or over a field is expected to offer them - the browser's own
|
|
7
|
+
* does, and replacing that menu with a custom one takes them away without saying so. Which is
|
|
8
|
+
* why they are ON by default here and turned off with a prop, rather than the other way round:
|
|
9
|
+
* the defect is silent, so the default has to be the safe one.
|
|
10
|
+
*
|
|
11
|
+
* WHAT DECIDES THEY APPEAR is what was right-clicked, and it is read at the moment the menu
|
|
12
|
+
* opens, not from React state - by then the selection is settled (a `contextmenu` event fires
|
|
13
|
+
* after the press has adjusted it) and the caret is still where the visitor left it.
|
|
14
|
+
*
|
|
15
|
+
* - **Copy**, when there is selected text under the pointer.
|
|
16
|
+
* - **Cut**, when that selection is also in something writable.
|
|
17
|
+
* - **Paste**, in anything writable - and disabled when the clipboard is known to be empty.
|
|
18
|
+
*
|
|
19
|
+
* Not a React module: what a selection is, whether a field takes writes, and how text is put
|
|
20
|
+
* back into one are DOM questions, so a menu drawn by anything else gets the same rows.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/** The ids these rows carry. Namespaced, so they can never collide with a caller's own. */
|
|
24
|
+
declare const CLIPBOARD_PREFIX = "enigma:clipboard:";
|
|
25
|
+
type ClipboardAction = "copy" | "cut" | "paste";
|
|
26
|
+
/** What the menu was opened over, as far as the clipboard is concerned. */
|
|
27
|
+
interface ClipboardTarget {
|
|
28
|
+
/** The field or contenteditable under the pointer, or null when it is neither. */
|
|
29
|
+
editable: HTMLElement | null;
|
|
30
|
+
/** Whether that element takes writes: not disabled, not read-only. */
|
|
31
|
+
writable: boolean;
|
|
32
|
+
/** The selected text, from the field's own selection or the document's. */
|
|
33
|
+
selection: string;
|
|
34
|
+
/**
|
|
35
|
+
* Whether that text may be put on the clipboard.
|
|
36
|
+
*
|
|
37
|
+
* False for a password field. The clipboard is shared with every other application on the
|
|
38
|
+
* machine and is not cleared, so a menu that copies a password out of a masked field
|
|
39
|
+
* leaks it somewhere the visitor cannot see - and the browser's own menu refuses too.
|
|
40
|
+
*/
|
|
41
|
+
copyable: boolean;
|
|
42
|
+
/** Where the selection was, so it can be put back after the menu has taken focus. */
|
|
43
|
+
range: {
|
|
44
|
+
start: number;
|
|
45
|
+
end: number;
|
|
46
|
+
} | null;
|
|
47
|
+
}
|
|
48
|
+
interface ClipboardMenuLabels {
|
|
49
|
+
copy?: string;
|
|
50
|
+
cut?: string;
|
|
51
|
+
paste?: string;
|
|
52
|
+
}
|
|
53
|
+
interface ClipboardMenuOptions {
|
|
54
|
+
copy?: boolean;
|
|
55
|
+
cut?: boolean;
|
|
56
|
+
paste?: boolean;
|
|
57
|
+
labels?: ClipboardMenuLabels;
|
|
58
|
+
/** Whatever the renderer draws icons with. `unknown`, because a core cannot know. */
|
|
59
|
+
icons?: {
|
|
60
|
+
copy?: unknown;
|
|
61
|
+
cut?: unknown;
|
|
62
|
+
paste?: unknown;
|
|
63
|
+
};
|
|
64
|
+
/** The clipboard is known to be empty, so Paste is listed and greyed rather than missing. */
|
|
65
|
+
clipboardEmpty?: boolean;
|
|
66
|
+
}
|
|
67
|
+
/** What was right-clicked, read the moment the menu opens. */
|
|
68
|
+
declare function inspectClipboardTarget(node: EventTarget | null): ClipboardTarget;
|
|
69
|
+
/**
|
|
70
|
+
* Whether the clipboard has text in it, or null when that cannot be known.
|
|
71
|
+
*
|
|
72
|
+
* Null is the common answer and not a failure: reading the clipboard needs permission, and
|
|
73
|
+
* asking for it puts a browser prompt on screen just to decide whether to grey out a row -
|
|
74
|
+
* which is a worse trade than showing an enabled Paste that turns out to do nothing. So the
|
|
75
|
+
* permission is only READ, never requested, and the clipboard is only opened where it has
|
|
76
|
+
* already been granted.
|
|
77
|
+
*/
|
|
78
|
+
declare function clipboardHasText(): Promise<boolean | null>;
|
|
79
|
+
/** The rows for this target, in the order every desktop menu puts them. */
|
|
80
|
+
declare function clipboardEntries(target: ClipboardTarget, options?: ClipboardMenuOptions): ContextMenuEntry[];
|
|
81
|
+
/** Which clipboard row an id belongs to, or null for anything that is not one of ours. */
|
|
82
|
+
declare function clipboardAction(id: string): ClipboardAction | null;
|
|
83
|
+
/**
|
|
84
|
+
* Do what the row says.
|
|
85
|
+
*
|
|
86
|
+
* Called straight from the press that chose it, so the browser still counts it as a user
|
|
87
|
+
* gesture - which is what the clipboard API requires and what makes a paste possible at all.
|
|
88
|
+
* Returns whether the action happened: a refused permission and an empty clipboard are both
|
|
89
|
+
* "no", and neither is worth an exception the caller has to catch.
|
|
90
|
+
*/
|
|
91
|
+
declare function performClipboardAction(action: ClipboardAction, target: ClipboardTarget): Promise<boolean>;
|
|
92
|
+
|
|
93
|
+
export { CLIPBOARD_PREFIX as C, type ClipboardAction as a, type ClipboardMenuLabels as b, type ClipboardMenuOptions as c, type ClipboardTarget as d, clipboardAction as e, clipboardEntries as f, clipboardHasText as g, inspectClipboardTarget as i, performClipboardAction as p };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
|
+
import { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, j as ContextMenuState, h as ContextMenuPoint } from './context-menu-D3FtTn7v.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* One row, as React draws it. The core carries `icon` as `unknown` because it cannot know
|
|
6
|
+
* what a node is; here it is one.
|
|
7
|
+
*/
|
|
8
|
+
interface ContextMenuItem extends Omit<ContextMenuAction, "icon" | "items"> {
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
items?: readonly ContextMenuNode[];
|
|
11
|
+
}
|
|
12
|
+
/** Anything that can appear in a menu, with React's icon type. */
|
|
13
|
+
type ContextMenuNode = ContextMenuItem | Exclude<ContextMenuEntry, ContextMenuAction>;
|
|
14
|
+
interface ContextMenuContextValue {
|
|
15
|
+
instance: ContextMenuInstance;
|
|
16
|
+
state: ContextMenuState;
|
|
17
|
+
/**
|
|
18
|
+
* Open at a point, over what the press landed on. False when there was nothing to show,
|
|
19
|
+
* so the press is left alone.
|
|
20
|
+
*
|
|
21
|
+
* `target` is what the clipboard rows are built from - the field or the selection under
|
|
22
|
+
* the pointer - and a caller that leaves it out gets a menu with none of them, which is
|
|
23
|
+
* the right answer for a menu opened from somewhere that is not a press.
|
|
24
|
+
*/
|
|
25
|
+
open: (point: ContextMenuPoint, target?: EventTarget | null) => boolean;
|
|
26
|
+
close: () => void;
|
|
27
|
+
/** ids the parts need to point at each other. */
|
|
28
|
+
ids: {
|
|
29
|
+
trigger: string;
|
|
30
|
+
};
|
|
31
|
+
panelId: (level: number) => string;
|
|
32
|
+
itemId: (level: number, index: number) => string;
|
|
33
|
+
triggerRef: RefObject<HTMLElement | null>;
|
|
34
|
+
/** Which panel the keyboard is in. Always the deepest open one. */
|
|
35
|
+
onMenuKeyDown: (event: React.KeyboardEvent) => void;
|
|
36
|
+
/** How long the pointer must rest on a row before its submenu opens, and before one closes. */
|
|
37
|
+
delays: {
|
|
38
|
+
open: number;
|
|
39
|
+
close: number;
|
|
40
|
+
};
|
|
41
|
+
/** Drop the pending close, wherever it was scheduled. Called wherever the pointer lands. */
|
|
42
|
+
cancelClose: () => void;
|
|
43
|
+
/** Close everything below `level`, after the beat - replacing any close already waiting. */
|
|
44
|
+
scheduleClose: (level: number) => void;
|
|
45
|
+
/** Draw a row instead of the default icon / label / shortcut. */
|
|
46
|
+
renderItem?: (item: ContextMenuItem, level: number, index: number) => ReactNode;
|
|
47
|
+
/** Shown while a fetched submenu has not answered. */
|
|
48
|
+
loadingLabel: ReactNode;
|
|
49
|
+
/** Shown when a filter matched nothing, or a fetched submenu came back with nothing. */
|
|
50
|
+
emptyLabel: ReactNode;
|
|
51
|
+
}
|
|
52
|
+
declare function useContextMenuContext(part: string): ContextMenuContextValue;
|
|
53
|
+
|
|
54
|
+
export { type ContextMenuContextValue as C, type ContextMenuItem as a, type ContextMenuNode as b, useContextMenuContext as u };
|
|
@@ -171,94 +171,4 @@ interface ContextMenuInstance {
|
|
|
171
171
|
type ContextMenuMoveKey = "ArrowDown" | "ArrowUp" | "Home" | "End" | "PageDown" | "PageUp";
|
|
172
172
|
declare function createContextMenu(options?: ContextMenuOptions): ContextMenuInstance;
|
|
173
173
|
|
|
174
|
-
|
|
175
|
-
* The rows every context menu on a desktop already has: Copy, Cut and Paste.
|
|
176
|
-
*
|
|
177
|
-
* A menu opened over a selection or over a field is expected to offer them - the browser's own
|
|
178
|
-
* does, and replacing that menu with a custom one takes them away without saying so. Which is
|
|
179
|
-
* why they are ON by default here and turned off with a prop, rather than the other way round:
|
|
180
|
-
* the defect is silent, so the default has to be the safe one.
|
|
181
|
-
*
|
|
182
|
-
* WHAT DECIDES THEY APPEAR is what was right-clicked, and it is read at the moment the menu
|
|
183
|
-
* opens, not from React state - by then the selection is settled (a `contextmenu` event fires
|
|
184
|
-
* after the press has adjusted it) and the caret is still where the visitor left it.
|
|
185
|
-
*
|
|
186
|
-
* - **Copy**, when there is selected text under the pointer.
|
|
187
|
-
* - **Cut**, when that selection is also in something writable.
|
|
188
|
-
* - **Paste**, in anything writable - and disabled when the clipboard is known to be empty.
|
|
189
|
-
*
|
|
190
|
-
* Not a React module: what a selection is, whether a field takes writes, and how text is put
|
|
191
|
-
* back into one are DOM questions, so a menu drawn by anything else gets the same rows.
|
|
192
|
-
*/
|
|
193
|
-
|
|
194
|
-
/** The ids these rows carry. Namespaced, so they can never collide with a caller's own. */
|
|
195
|
-
declare const CLIPBOARD_PREFIX = "enigma:clipboard:";
|
|
196
|
-
type ClipboardAction = "copy" | "cut" | "paste";
|
|
197
|
-
/** What the menu was opened over, as far as the clipboard is concerned. */
|
|
198
|
-
interface ClipboardTarget {
|
|
199
|
-
/** The field or contenteditable under the pointer, or null when it is neither. */
|
|
200
|
-
editable: HTMLElement | null;
|
|
201
|
-
/** Whether that element takes writes: not disabled, not read-only. */
|
|
202
|
-
writable: boolean;
|
|
203
|
-
/** The selected text, from the field's own selection or the document's. */
|
|
204
|
-
selection: string;
|
|
205
|
-
/**
|
|
206
|
-
* Whether that text may be put on the clipboard.
|
|
207
|
-
*
|
|
208
|
-
* False for a password field. The clipboard is shared with every other application on the
|
|
209
|
-
* machine and is not cleared, so a menu that copies a password out of a masked field
|
|
210
|
-
* leaks it somewhere the visitor cannot see - and the browser's own menu refuses too.
|
|
211
|
-
*/
|
|
212
|
-
copyable: boolean;
|
|
213
|
-
/** Where the selection was, so it can be put back after the menu has taken focus. */
|
|
214
|
-
range: {
|
|
215
|
-
start: number;
|
|
216
|
-
end: number;
|
|
217
|
-
} | null;
|
|
218
|
-
}
|
|
219
|
-
interface ClipboardMenuLabels {
|
|
220
|
-
copy?: string;
|
|
221
|
-
cut?: string;
|
|
222
|
-
paste?: string;
|
|
223
|
-
}
|
|
224
|
-
interface ClipboardMenuOptions {
|
|
225
|
-
copy?: boolean;
|
|
226
|
-
cut?: boolean;
|
|
227
|
-
paste?: boolean;
|
|
228
|
-
labels?: ClipboardMenuLabels;
|
|
229
|
-
/** Whatever the renderer draws icons with. `unknown`, because a core cannot know. */
|
|
230
|
-
icons?: {
|
|
231
|
-
copy?: unknown;
|
|
232
|
-
cut?: unknown;
|
|
233
|
-
paste?: unknown;
|
|
234
|
-
};
|
|
235
|
-
/** The clipboard is known to be empty, so Paste is listed and greyed rather than missing. */
|
|
236
|
-
clipboardEmpty?: boolean;
|
|
237
|
-
}
|
|
238
|
-
/** What was right-clicked, read the moment the menu opens. */
|
|
239
|
-
declare function inspectClipboardTarget(node: EventTarget | null): ClipboardTarget;
|
|
240
|
-
/**
|
|
241
|
-
* Whether the clipboard has text in it, or null when that cannot be known.
|
|
242
|
-
*
|
|
243
|
-
* Null is the common answer and not a failure: reading the clipboard needs permission, and
|
|
244
|
-
* asking for it puts a browser prompt on screen just to decide whether to grey out a row -
|
|
245
|
-
* which is a worse trade than showing an enabled Paste that turns out to do nothing. So the
|
|
246
|
-
* permission is only READ, never requested, and the clipboard is only opened where it has
|
|
247
|
-
* already been granted.
|
|
248
|
-
*/
|
|
249
|
-
declare function clipboardHasText(): Promise<boolean | null>;
|
|
250
|
-
/** The rows for this target, in the order every desktop menu puts them. */
|
|
251
|
-
declare function clipboardEntries(target: ClipboardTarget, options?: ClipboardMenuOptions): ContextMenuEntry[];
|
|
252
|
-
/** Which clipboard row an id belongs to, or null for anything that is not one of ours. */
|
|
253
|
-
declare function clipboardAction(id: string): ClipboardAction | null;
|
|
254
|
-
/**
|
|
255
|
-
* Do what the row says.
|
|
256
|
-
*
|
|
257
|
-
* Called straight from the press that chose it, so the browser still counts it as a user
|
|
258
|
-
* gesture - which is what the clipboard API requires and what makes a paste possible at all.
|
|
259
|
-
* Returns whether the action happened: a refused permission and an empty clipboard are both
|
|
260
|
-
* "no", and neither is worth an exception the caller has to catch.
|
|
261
|
-
*/
|
|
262
|
-
declare function performClipboardAction(action: ClipboardAction, target: ClipboardTarget): Promise<boolean>;
|
|
263
|
-
|
|
264
|
-
export { CLIPBOARD_PREFIX as C, CONTEXT_MENU_SEARCH_KEYS as a, type ClipboardAction as b, type ClipboardMenuLabels as c, type ClipboardMenuOptions as d, type ClipboardTarget as e, type ContextMenuAction as f, type ContextMenuEntry as g, type ContextMenuInstance as h, type ContextMenuLabel as i, type ContextMenuLevel as j, type ContextMenuMoveKey as k, type ContextMenuOptions as l, type ContextMenuPoint as m, type ContextMenuSeparator as n, type ContextMenuState as o, clipboardAction as p, clipboardEntries as q, clipboardHasText as r, createContextMenu as s, inspectClipboardTarget as t, isAction as u, performClipboardAction as v };
|
|
174
|
+
export { CONTEXT_MENU_SEARCH_KEYS as C, type ContextMenuAction as a, type ContextMenuEntry as b, type ContextMenuInstance as c, type ContextMenuLabel as d, type ContextMenuLevel as e, type ContextMenuMoveKey as f, type ContextMenuOptions as g, type ContextMenuPoint as h, type ContextMenuSeparator as i, type ContextMenuState as j, createContextMenu as k, isAction as l };
|