@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.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/README.md +152 -18
- package/dist/react.js +516 -61
- package/dist/server.js +342 -14
- package/dist/types/capture/api.d.ts +30 -0
- package/dist/types/capture/editor.d.ts +10 -0
- package/dist/types/capture/ignore.d.ts +19 -0
- package/dist/types/capture/index.d.ts +1 -0
- package/dist/types/capture/picker.d.ts +9 -0
- package/dist/types/capture/picture.d.ts +29 -0
- package/dist/types/capture/surface.d.ts +39 -0
- package/dist/types/core/index.d.ts +2 -2
- package/dist/types/core/resolve.d.ts +2 -1
- package/dist/types/core/types.d.ts +11 -0
- package/dist/types/debug-context.d.ts +7 -0
- package/dist/types/dictation.d.ts +9 -0
- package/dist/types/embed/controller.d.ts +61 -0
- package/dist/types/embed/index.d.ts +1 -0
- package/dist/types/embed/options.d.ts +35 -0
- package/dist/types/help/index.d.ts +1 -0
- package/dist/types/help/panel-index.d.ts +1 -0
- package/dist/types/help/panel-styles.d.ts +1 -0
- package/dist/types/help/panel.d.ts +4 -0
- package/dist/types/help/pill-styles.d.ts +11 -0
- package/dist/types/help/pill.d.ts +44 -0
- package/dist/types/help/react.d.ts +12 -0
- package/dist/types/help/requests.d.ts +2 -0
- package/dist/types/help/types.d.ts +119 -0
- package/dist/types/help/wire.d.ts +61 -0
- package/dist/types/native-wire.d.ts +63 -0
- package/dist/types/native.d.ts +43 -0
- package/dist/types/react.d.ts +8 -1
- package/dist/types/replay.d.ts +6 -0
- package/dist/types/runtime/api.d.ts +250 -0
- package/dist/types/runtime/attachment-model.d.ts +16 -0
- package/dist/types/runtime/attachments.d.ts +43 -7
- package/dist/types/runtime/boot.d.ts +39 -0
- package/dist/types/runtime/browser-label.d.ts +5 -0
- package/dist/types/runtime/build-id.d.ts +7 -0
- package/dist/types/runtime/capture-ui.d.ts +45 -21
- package/dist/types/runtime/clarity-model.d.ts +260 -0
- package/dist/types/runtime/clarity-ui.d.ts +62 -0
- package/dist/types/runtime/client.d.ts +6 -197
- package/dist/types/runtime/composer-size.d.ts +30 -0
- package/dist/types/runtime/dashboard.d.ts +17 -2
- package/dist/types/runtime/debug-context-core.d.ts +88 -0
- package/dist/types/runtime/debug-context-host.d.ts +39 -0
- package/dist/types/runtime/debug-context-model.d.ts +352 -0
- package/dist/types/runtime/debug-context-redact.d.ts +48 -0
- package/dist/types/runtime/debug-context.d.ts +36 -0
- package/dist/types/runtime/details-model.d.ts +7 -0
- package/dist/types/runtime/details.d.ts +7 -5
- package/dist/types/runtime/dictation-engine.d.ts +98 -0
- package/dist/types/runtime/dictation-model.d.ts +28 -0
- package/dist/types/runtime/dictation-ui.d.ts +56 -0
- package/dist/types/runtime/dictation.d.ts +66 -0
- package/dist/types/runtime/draft-dock.d.ts +32 -0
- package/dist/types/runtime/draft-model.d.ts +104 -0
- package/dist/types/runtime/draft-store.d.ts +15 -0
- package/dist/types/runtime/edits.d.ts +1 -1
- package/dist/types/runtime/font.d.ts +16 -0
- package/dist/types/runtime/format.d.ts +30 -1
- package/dist/types/runtime/host-watch.d.ts +20 -0
- package/dist/types/runtime/icons.d.ts +16 -2
- package/dist/types/runtime/index.d.ts +3 -1
- package/dist/types/runtime/ink.d.ts +8 -0
- package/dist/types/runtime/kind-model.d.ts +14 -0
- package/dist/types/runtime/live-model.d.ts +25 -0
- package/dist/types/runtime/loader.d.ts +5 -11
- package/dist/types/runtime/markup-editor.d.ts +54 -0
- package/dist/types/runtime/markup-model.d.ts +126 -0
- package/dist/types/runtime/markup.d.ts +69 -0
- package/dist/types/runtime/mention-parse.d.ts +18 -0
- package/dist/types/runtime/mentions.d.ts +4 -4
- package/dist/types/runtime/page-background.d.ts +9 -0
- package/dist/types/runtime/page-image.d.ts +123 -0
- package/dist/types/runtime/placement.d.ts +6 -3
- package/dist/types/runtime/record.d.ts +18 -2
- package/dist/types/runtime/related.d.ts +1 -1
- package/dist/types/runtime/replay-model.d.ts +80 -0
- package/dist/types/runtime/replay.d.ts +5 -38
- package/dist/types/runtime/runtime.d.ts +6 -0
- package/dist/types/runtime/screen.d.ts +47 -0
- package/dist/types/runtime/screenshot.d.ts +60 -6
- package/dist/types/runtime/session-source.d.ts +45 -0
- package/dist/types/runtime/session.d.ts +20 -18
- package/dist/types/runtime/shield.d.ts +9 -0
- package/dist/types/runtime/shot.d.ts +45 -0
- package/dist/types/runtime/sketch.d.ts +26 -0
- package/dist/types/runtime/styles.d.ts +1 -1
- package/dist/types/runtime/sync.d.ts +1 -0
- package/dist/types/runtime/thread-model.d.ts +18 -0
- package/dist/types/runtime/ticket-form-model.d.ts +57 -0
- package/dist/types/runtime/ticket-form.d.ts +9 -0
- package/dist/types/runtime/toolbar.d.ts +37 -1
- package/dist/types/runtime/ui-scale.d.ts +17 -0
- package/dist/types/runtime/update.d.ts +37 -0
- package/dist/types/runtime/use-debug-context.d.ts +27 -0
- package/dist/types/server/index.d.ts +22 -0
- package/dist/types/server/support.d.ts +20 -0
- package/dist/types/server.d.ts +2 -0
- package/dist/types/vite/plugin.d.ts +15 -0
- package/dist/vite.js +121 -41
- package/package.json +26 -13
- package/src/capture/api.ts +128 -0
- package/src/capture/editor.tsx +178 -0
- package/src/capture/ignore.ts +38 -0
- package/src/capture/index.ts +27 -0
- package/src/capture/picker.tsx +171 -0
- package/src/capture/picture.ts +90 -0
- package/src/capture/surface.tsx +185 -0
- package/src/compiler/annotate.ts +202 -0
- package/src/compiler/babel.d.ts +11 -0
- package/src/compiler/enabled.ts +55 -0
- package/src/compiler/index.ts +2 -0
- package/src/core/index.ts +8 -0
- package/src/core/resolve.ts +307 -0
- package/src/core/types.ts +58 -0
- package/src/debug-context.ts +47 -0
- package/src/dictation.ts +17 -0
- package/src/embed/controller.ts +215 -0
- package/src/embed/index.ts +68 -0
- package/src/embed/options.ts +100 -0
- package/src/help/index.ts +38 -0
- package/src/help/panel-index.ts +17 -0
- package/src/help/panel-styles.ts +123 -0
- package/src/help/panel.ts +840 -0
- package/src/help/pill-styles.ts +75 -0
- package/src/help/pill.ts +338 -0
- package/src/help/react.tsx +143 -0
- package/src/help/requests.ts +111 -0
- package/src/help/types.ts +124 -0
- package/src/help/wire.ts +55 -0
- package/src/native-wire.ts +124 -0
- package/src/native.ts +282 -0
- package/src/react.ts +27 -0
- package/src/replay.ts +13 -0
- package/src/runtime/api.ts +531 -0
- package/src/runtime/attachment-model.ts +42 -0
- package/src/runtime/attachments.tsx +1260 -0
- package/src/runtime/boot.ts +95 -0
- package/src/runtime/browser-label.ts +31 -0
- package/src/runtime/build-id.ts +10 -0
- package/src/runtime/capture-ui.tsx +306 -0
- package/src/runtime/capture.ts +508 -0
- package/src/runtime/clarity-model.ts +634 -0
- package/src/runtime/clarity-ui.tsx +454 -0
- package/src/runtime/client.ts +151 -0
- package/src/runtime/composer-size.tsx +146 -0
- package/src/runtime/dashboard.tsx +1130 -0
- package/src/runtime/debug-context-core.ts +681 -0
- package/src/runtime/debug-context-host.ts +56 -0
- package/src/runtime/debug-context-model.ts +1319 -0
- package/src/runtime/debug-context-redact.ts +259 -0
- package/src/runtime/debug-context.ts +613 -0
- package/src/runtime/details-model.ts +30 -0
- package/src/runtime/details.tsx +395 -0
- package/src/runtime/dictation-engine.ts +616 -0
- package/src/runtime/dictation-model.ts +79 -0
- package/src/runtime/dictation-ui.tsx +363 -0
- package/src/runtime/dictation.ts +271 -0
- package/src/runtime/dock.ts +108 -0
- package/src/runtime/draft-dock.tsx +124 -0
- package/src/runtime/draft-model.ts +251 -0
- package/src/runtime/draft-store.ts +149 -0
- package/src/runtime/edits.tsx +165 -0
- package/src/runtime/font.ts +42 -0
- package/src/runtime/format.ts +129 -0
- package/src/runtime/freshness.ts +23 -0
- package/src/runtime/handoff.ts +76 -0
- package/src/runtime/host-watch.ts +64 -0
- package/src/runtime/icons.tsx +295 -0
- package/src/runtime/idle.ts +20 -0
- package/src/runtime/index.ts +11 -0
- package/src/runtime/ink.ts +6 -0
- package/src/runtime/kind-model.ts +20 -0
- package/src/runtime/live-model.ts +32 -0
- package/src/runtime/loader.tsx +87 -0
- package/src/runtime/markup-editor.tsx +1333 -0
- package/src/runtime/markup-model.ts +485 -0
- package/src/runtime/markup.ts +382 -0
- package/src/runtime/members.ts +58 -0
- package/src/runtime/mention-parse.ts +56 -0
- package/src/runtime/mentions.tsx +205 -0
- package/src/runtime/page-background.ts +51 -0
- package/src/runtime/page-image.ts +1592 -0
- package/src/runtime/placement.ts +336 -0
- package/src/runtime/record.ts +402 -0
- package/src/runtime/redact.ts +30 -0
- package/src/runtime/related.ts +34 -0
- package/src/runtime/render-page.ts +2 -0
- package/src/runtime/replay-model.ts +232 -0
- package/src/runtime/replay.ts +173 -0
- package/src/runtime/runtime-version.ts +7 -0
- package/src/runtime/runtime.tsx +51 -0
- package/src/runtime/screen.ts +182 -0
- package/src/runtime/screenshot.ts +260 -0
- package/src/runtime/session-source.ts +112 -0
- package/src/runtime/session.ts +108 -0
- package/src/runtime/shield.ts +34 -0
- package/src/runtime/shot.tsx +422 -0
- package/src/runtime/sketch.ts +139 -0
- package/src/runtime/styles.ts +1541 -0
- package/src/runtime/sync.ts +300 -0
- package/src/runtime/thread-model.ts +71 -0
- package/src/runtime/ticket-form-model.ts +128 -0
- package/src/runtime/ticket-form.tsx +342 -0
- package/src/runtime/toolbar.tsx +4427 -0
- package/src/runtime/ui-scale.ts +75 -0
- package/src/runtime/update.ts +98 -0
- package/src/runtime/use-debug-context.ts +81 -0
- package/src/server/index.ts +133 -0
- package/src/server/support.ts +499 -0
- package/src/server.ts +4 -0
- package/src/vite/plugin.ts +102 -0
- package/src/vite.ts +1 -0
- package/dist/chunks/chunk-CSKXLF33.js +0 -153
- package/dist/chunks/chunk-HUM5FQII.js +0 -160
- package/dist/chunks/render-page-76MLIT6M.js +0 -1421
- package/dist/chunks/runtime-JX75TKER.js +0 -9267
- package/dist/chunks/screenshot-66ARTBGR.js +0 -12
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
// src/runtime/runtime-version.ts
|
|
2
|
-
var runtimeVersion = 1;
|
|
3
|
-
|
|
4
|
-
// src/runtime/handoff.ts
|
|
5
|
-
var key = "devaccel.comment.handoff";
|
|
6
|
-
var ttl = 30 * 60 * 1e3;
|
|
7
|
-
function readHandoff() {
|
|
8
|
-
try {
|
|
9
|
-
const value = JSON.parse(sessionStorage.getItem(key) ?? "null");
|
|
10
|
-
return value && Date.now() - value.at < ttl ? value : null;
|
|
11
|
-
} catch {
|
|
12
|
-
return null;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
function write(value) {
|
|
16
|
-
try {
|
|
17
|
-
if (value.invite || value.thread) sessionStorage.setItem(key, JSON.stringify(value));
|
|
18
|
-
else sessionStorage.removeItem(key);
|
|
19
|
-
} catch {
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
function linkParams() {
|
|
23
|
-
const url = new URL(window.location.href);
|
|
24
|
-
const hash = new URLSearchParams(url.hash.slice(1));
|
|
25
|
-
return {
|
|
26
|
-
url,
|
|
27
|
-
hash,
|
|
28
|
-
invite: url.searchParams.get("cs-invite") ?? hash.get("cs-invite"),
|
|
29
|
-
thread: url.searchParams.get("cs-thread") ?? hash.get("cs-thread")
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
function captureHandoff() {
|
|
33
|
-
if (typeof window === "undefined") return;
|
|
34
|
-
const { invite, thread } = linkParams();
|
|
35
|
-
if (!invite && !thread) return;
|
|
36
|
-
write({
|
|
37
|
-
...readHandoff(),
|
|
38
|
-
...invite ? { invite } : {},
|
|
39
|
-
...thread ? { thread } : {},
|
|
40
|
-
at: Date.now()
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
function dropHandoff(part) {
|
|
44
|
-
const current = readHandoff();
|
|
45
|
-
if (!current) return;
|
|
46
|
-
const { [part]: _dropped, ...rest } = current;
|
|
47
|
-
write(rest);
|
|
48
|
-
}
|
|
49
|
-
function stripHandoffFromUrl() {
|
|
50
|
-
const { url, hash } = linkParams();
|
|
51
|
-
const inQuery = url.searchParams.has("cs-invite") || url.searchParams.has("cs-thread");
|
|
52
|
-
const inHash = hash.has("cs-invite") || hash.has("cs-thread");
|
|
53
|
-
if (!inQuery && !inHash) return;
|
|
54
|
-
url.searchParams.delete("cs-invite");
|
|
55
|
-
url.searchParams.delete("cs-thread");
|
|
56
|
-
if (inHash) url.hash = "";
|
|
57
|
-
history.replaceState(history.state, "", url);
|
|
58
|
-
}
|
|
59
|
-
function linkWith(href, name, value) {
|
|
60
|
-
const url = new URL(href, window.location.origin);
|
|
61
|
-
url.searchParams.delete("cs-invite");
|
|
62
|
-
url.searchParams.delete("cs-thread");
|
|
63
|
-
url.hash = `${name}=${encodeURIComponent(value)}`;
|
|
64
|
-
return url.toString();
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// src/runtime/idle.ts
|
|
68
|
-
var FALLBACK_SLICE_MS = 8;
|
|
69
|
-
function whenIdle(task, timeout) {
|
|
70
|
-
if (typeof requestIdleCallback === "function") {
|
|
71
|
-
const id2 = requestIdleCallback(task, { timeout });
|
|
72
|
-
return () => cancelIdleCallback(id2);
|
|
73
|
-
}
|
|
74
|
-
const id = setTimeout(
|
|
75
|
-
() => {
|
|
76
|
-
const end = performance.now() + FALLBACK_SLICE_MS;
|
|
77
|
-
task({ didTimeout: false, timeRemaining: () => Math.max(0, end - performance.now()) });
|
|
78
|
-
},
|
|
79
|
-
Math.min(timeout, 200)
|
|
80
|
-
);
|
|
81
|
-
return () => clearTimeout(id);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// src/runtime/session.ts
|
|
85
|
-
var EXPIRY_MARGIN_MS = 6e4;
|
|
86
|
-
var UNKNOWN_EXPIRY_MS = 5 * 6e4;
|
|
87
|
-
function readJwt(token) {
|
|
88
|
-
try {
|
|
89
|
-
const part = token.split(".")[1];
|
|
90
|
-
if (!part) return null;
|
|
91
|
-
const pad = part.length % 4 === 0 ? "" : "=".repeat(4 - part.length % 4);
|
|
92
|
-
return JSON.parse(atob(part.replaceAll("-", "+").replaceAll("_", "/") + pad));
|
|
93
|
-
} catch {
|
|
94
|
-
return null;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
function sessionFrom(payload) {
|
|
98
|
-
const value = payload;
|
|
99
|
-
if (!value?.enabled || !value.apiUrl || !value.project || !value.environment || !value.hostToken)
|
|
100
|
-
return null;
|
|
101
|
-
return {
|
|
102
|
-
apiUrl: value.apiUrl,
|
|
103
|
-
project: value.project,
|
|
104
|
-
environment: value.environment,
|
|
105
|
-
hostToken: value.hostToken
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
async function fetchSession(path) {
|
|
109
|
-
const response = await fetch(path, {
|
|
110
|
-
headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
|
|
111
|
-
cache: "no-store"
|
|
112
|
-
});
|
|
113
|
-
return response.json();
|
|
114
|
-
}
|
|
115
|
-
function sessionSource(path, load = fetchSession, now = Date.now) {
|
|
116
|
-
let kept = null;
|
|
117
|
-
let pending = null;
|
|
118
|
-
return ({ refresh = false } = {}) => {
|
|
119
|
-
if (!refresh && kept && now() < kept.until) return Promise.resolve(kept.session);
|
|
120
|
-
if (pending) return pending;
|
|
121
|
-
pending = load(path).then((payload) => {
|
|
122
|
-
const session = sessionFrom(payload);
|
|
123
|
-
const expires = session ? readJwt(session.hostToken)?.exp : void 0;
|
|
124
|
-
const until = !session ? Infinity : expires ? expires * 1e3 - EXPIRY_MARGIN_MS : now() + UNKNOWN_EXPIRY_MS;
|
|
125
|
-
kept = { session, until };
|
|
126
|
-
return session;
|
|
127
|
-
}).finally(() => {
|
|
128
|
-
pending = null;
|
|
129
|
-
});
|
|
130
|
-
return pending;
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
var sources = /* @__PURE__ */ new Map();
|
|
134
|
-
function sessionFor(path) {
|
|
135
|
-
let source = sources.get(path);
|
|
136
|
-
if (!source) {
|
|
137
|
-
source = sessionSource(path);
|
|
138
|
-
sources.set(path, source);
|
|
139
|
-
}
|
|
140
|
-
return source;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
export {
|
|
144
|
-
readHandoff,
|
|
145
|
-
captureHandoff,
|
|
146
|
-
dropHandoff,
|
|
147
|
-
stripHandoffFromUrl,
|
|
148
|
-
linkWith,
|
|
149
|
-
whenIdle,
|
|
150
|
-
runtimeVersion,
|
|
151
|
-
readJwt,
|
|
152
|
-
sessionFor
|
|
153
|
-
};
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
// src/runtime/screenshot.ts
|
|
2
|
-
var MAX_WIDTH = 1200;
|
|
3
|
-
var BROWSERS = [
|
|
4
|
-
["Edge", /Edg\/(\d+)/],
|
|
5
|
-
["Firefox", /Firefox\/(\d+)/],
|
|
6
|
-
["Chrome", /Chrome\/(\d+)/],
|
|
7
|
-
["Safari", /Version\/(\d+)[\d.]* .*Safari/]
|
|
8
|
-
];
|
|
9
|
-
var SYSTEMS = [
|
|
10
|
-
["iOS", /iPhone|iPad/],
|
|
11
|
-
["Android", /Android/],
|
|
12
|
-
["macOS", /Mac OS X/],
|
|
13
|
-
["Windows", /Windows/],
|
|
14
|
-
["Linux", /Linux/]
|
|
15
|
-
];
|
|
16
|
-
function browserLabel(agent) {
|
|
17
|
-
let browser;
|
|
18
|
-
for (const [name, pattern] of BROWSERS) {
|
|
19
|
-
const version = agent.match(pattern)?.[1];
|
|
20
|
-
if (version) {
|
|
21
|
-
browser = `${name} ${version}`;
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
const system = SYSTEMS.find(([, pattern]) => pattern.test(agent))?.[0];
|
|
26
|
-
return [browser, system].filter(Boolean).join(" \xB7 ") || void 0;
|
|
27
|
-
}
|
|
28
|
-
function describeCapture(url) {
|
|
29
|
-
return {
|
|
30
|
-
url,
|
|
31
|
-
viewport: { width: document.documentElement.clientWidth, height: window.innerHeight },
|
|
32
|
-
browser: browserLabel(navigator.userAgent)
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
function roundedRect(ctx, x, y, w, h, r) {
|
|
36
|
-
ctx.moveTo(x + r, y);
|
|
37
|
-
ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
38
|
-
ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
39
|
-
ctx.arcTo(x, y + h, x, y, r);
|
|
40
|
-
ctx.arcTo(x, y, x + w, y, r);
|
|
41
|
-
ctx.closePath();
|
|
42
|
-
}
|
|
43
|
-
async function renderViewport(scale, timeout = 6e3) {
|
|
44
|
-
const { domToCanvas } = await import("./render-page-76MLIT6M.js");
|
|
45
|
-
return domToCanvas(document.documentElement, {
|
|
46
|
-
width: document.documentElement.clientWidth,
|
|
47
|
-
height: window.innerHeight,
|
|
48
|
-
scale,
|
|
49
|
-
timeout,
|
|
50
|
-
backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
|
|
51
|
-
filter: (node) => !(node instanceof Element && node.id === "cs-root"),
|
|
52
|
-
style: {
|
|
53
|
-
transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`,
|
|
54
|
-
transformOrigin: "0 0"
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
function outline(ctx, width, height, ring, scale) {
|
|
59
|
-
const radius = Math.min(12 * scale, ring.w / 2, ring.h / 2);
|
|
60
|
-
ctx.beginPath();
|
|
61
|
-
ctx.rect(0, 0, width, height);
|
|
62
|
-
roundedRect(ctx, ring.x, ring.y, ring.w, ring.h, radius);
|
|
63
|
-
ctx.fillStyle = "rgba(15, 15, 20, 0.22)";
|
|
64
|
-
ctx.fill("evenodd");
|
|
65
|
-
ctx.beginPath();
|
|
66
|
-
roundedRect(ctx, ring.x, ring.y, ring.w, ring.h, radius);
|
|
67
|
-
ctx.lineWidth = 3 * scale;
|
|
68
|
-
ctx.strokeStyle = "#007aff";
|
|
69
|
-
ctx.stroke();
|
|
70
|
-
}
|
|
71
|
-
async function capturePage(highlight) {
|
|
72
|
-
const scale = Math.min(window.devicePixelRatio || 1, 2);
|
|
73
|
-
let page;
|
|
74
|
-
try {
|
|
75
|
-
page = await renderViewport(scale);
|
|
76
|
-
} catch {
|
|
77
|
-
return null;
|
|
78
|
-
}
|
|
79
|
-
const width = document.documentElement.clientWidth;
|
|
80
|
-
const outScale = Math.min(scale, 1600 / width);
|
|
81
|
-
const out = document.createElement("canvas");
|
|
82
|
-
out.width = Math.round(width * outScale);
|
|
83
|
-
out.height = Math.round(window.innerHeight * outScale);
|
|
84
|
-
const ctx = out.getContext("2d");
|
|
85
|
-
if (!ctx) return null;
|
|
86
|
-
ctx.drawImage(page, 0, 0, out.width, out.height);
|
|
87
|
-
const rect = highlight?.getBoundingClientRect();
|
|
88
|
-
if (rect && rect.width > 0 && rect.bottom > 0 && rect.top < window.innerHeight) {
|
|
89
|
-
const pad = 6;
|
|
90
|
-
outline(
|
|
91
|
-
ctx,
|
|
92
|
-
out.width,
|
|
93
|
-
out.height,
|
|
94
|
-
{
|
|
95
|
-
x: (rect.left - pad) * outScale,
|
|
96
|
-
y: (rect.top - pad) * outScale,
|
|
97
|
-
w: (rect.width + pad * 2) * outScale,
|
|
98
|
-
h: (rect.height + pad * 2) * outScale
|
|
99
|
-
},
|
|
100
|
-
outScale
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
return new Promise((resolve) => out.toBlob((blob) => resolve(blob), "image/jpeg", 0.85));
|
|
104
|
-
}
|
|
105
|
-
async function captureAround(element) {
|
|
106
|
-
const rect = element.getBoundingClientRect();
|
|
107
|
-
const viewportWidth = document.documentElement.clientWidth;
|
|
108
|
-
const viewportHeight = window.innerHeight;
|
|
109
|
-
if (rect.width < 1 || rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth)
|
|
110
|
-
return null;
|
|
111
|
-
const scale = Math.min(window.devicePixelRatio || 1, 2);
|
|
112
|
-
let page;
|
|
113
|
-
try {
|
|
114
|
-
page = await renderViewport(scale);
|
|
115
|
-
} catch {
|
|
116
|
-
return null;
|
|
117
|
-
}
|
|
118
|
-
const width = Math.min(viewportWidth, Math.max(rect.width + 200, 760));
|
|
119
|
-
const height = Math.min(viewportHeight, Math.max(rect.height + 200, 420));
|
|
120
|
-
const x = Math.max(0, Math.min(rect.left + rect.width / 2 - width / 2, viewportWidth - width));
|
|
121
|
-
const y = Math.max(0, Math.min(rect.top + rect.height / 2 - height / 2, viewportHeight - height));
|
|
122
|
-
const out = document.createElement("canvas");
|
|
123
|
-
const outScale = Math.min(scale, MAX_WIDTH / width);
|
|
124
|
-
out.width = Math.round(width * outScale);
|
|
125
|
-
out.height = Math.round(height * outScale);
|
|
126
|
-
const ctx = out.getContext("2d");
|
|
127
|
-
if (!ctx) return null;
|
|
128
|
-
ctx.drawImage(
|
|
129
|
-
page,
|
|
130
|
-
x * scale,
|
|
131
|
-
y * scale,
|
|
132
|
-
width * scale,
|
|
133
|
-
height * scale,
|
|
134
|
-
0,
|
|
135
|
-
0,
|
|
136
|
-
out.width,
|
|
137
|
-
out.height
|
|
138
|
-
);
|
|
139
|
-
const pad = 6;
|
|
140
|
-
outline(
|
|
141
|
-
ctx,
|
|
142
|
-
out.width,
|
|
143
|
-
out.height,
|
|
144
|
-
{
|
|
145
|
-
x: (rect.left - x - pad) * outScale,
|
|
146
|
-
y: (rect.top - y - pad) * outScale,
|
|
147
|
-
w: (rect.width + pad * 2) * outScale,
|
|
148
|
-
h: (rect.height + pad * 2) * outScale
|
|
149
|
-
},
|
|
150
|
-
outScale
|
|
151
|
-
);
|
|
152
|
-
return out.toDataURL("image/jpeg", 0.82);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
export {
|
|
156
|
-
describeCapture,
|
|
157
|
-
renderViewport,
|
|
158
|
-
capturePage,
|
|
159
|
-
captureAround
|
|
160
|
-
};
|