@bud.sh/app 0.5.0 → 0.6.0

package/dist/{node-host/assets/canvas-TRUfxfL5.js → server/assets/canvas-CJWQ-jjv.js}

@@ -1,7 +1,8 @@
-import { $t as Button, H as CanvasWorkspace, U as captureCanvasPoint, Zt as Loader, _n as Icon, bt as conversationHref, en as ToolbarSeparator, et as BranchSidebar, gn as Text, in as IconButton, l as projectStore, ln as readPreference, mn as t, on as Tooltip, rn as Select, t as commentsUnavailable, tn as WorkspaceLayout, un as writePreference } from "./comment-data-DyIZNpfG.js";
-import { i as pictureKey, n as createProjectPreviews, t as createProjectBranches } from "./project-branches-B7HUGiVK.js";
-import { n as createProjectComments, r as loadComments, t as defineScreen } from "./screen-CZXWJEds.js";
-import { t as ProjectThreadLinks } from "./project-thread-links-CauJF0Cz.js";
+import { zn as Icon } from "./events-BH_rAu7O.js";
+import { Cn as IconButton, Fn as Text, Gt as Loader, K as BranchSidebar, Nn as t, On as readPreference, Sn as Select, Tn as Tooltip, U as CanvasWorkspace, W as captureCanvasPoint, bn as WorkspaceLayout, kn as writePreference, l as projectStore, mt as conversationHref, qt as Button, t as commentsUnavailable, yn as ToolbarSeparator } from "./comment-data-Rg42ToTW.js";
+import { i as pictureKey, n as createProjectPreviews, t as createProjectBranches } from "./project-branches-qG9ACZvo.js";
+import { n as createProjectComments, r as loadComments, t as defineScreen } from "./screen-CBrHPFug.js";
+import { n as ProjectThreadLinks, t as ProjectMakeTask } from "./project-thread-links-CqK0lqCF.js";
 import { on, ref } from "remix/component";
 import { Fragment, jsx, jsxs } from "remix/component/jsx-runtime";
 //#region app/client/preview-image.tsx
@@ -291,6 +292,92 @@ function PreviewRefresh(handle) {
 	};
 }
 //#endregion
+//#region app/client/task-context.ts
+var CROP = {
+	width: 1200,
+	height: 800
+};
+var QUALITY = .82;
+/**
+* What a task made from a canvas comment takes along: the page around the comment's point with
+* the point marked, and the element there with its source.
+* @param previews - The canvas's pictures, for the branch the comment is on.
+* @param thread - The discussion.
+* @param sizes - The project's viewports.
+* @returns The context, or undefined when the comment has no picture to take it from.
+*/
+async function canvasTaskContext(previews, thread, sizes) {
+	let anchor = thread.anchor;
+	if (!anchor || "type" in anchor) return void 0;
+	let size = sizes.find((candidate) => candidate.width === anchor.viewport) ?? sizes[0];
+	if (!size) return void 0;
+	let picture = await previews.picture(anchor.pageId, "light", size);
+	if (!picture) return void 0;
+	let { capture, images } = picture;
+	let pin = capture.pins?.find((entry) => entry.id === thread.id && entry.x !== null);
+	let point = pin && pin.x !== null && pin.y !== null ? {
+		x: pin.x,
+		y: pin.y
+	} : {
+		x: anchor.offsetX * capture.width,
+		y: anchor.offsetY
+	};
+	let [image, element] = await Promise.all([cropAround(capture, images, point).catch(() => void 0), previews.describe(anchor.pageId, capture, point.x, point.y).catch(() => null)]);
+	return {
+		...image ? { image } : {},
+		element,
+		point
+	};
+}
+/**
+* Cuts the page around a point out of a capture's slices and marks the point.
+* @param capture - The capture's size, scale and slices.
+* @param images - The slices' images, top to bottom.
+* @param point - The point in CSS pixels.
+* @returns The JPEG as base64.
+*/
+async function cropAround(capture, images, point) {
+	let width = Math.min(CROP.width, capture.width);
+	let height = Math.min(CROP.height, capture.height);
+	let left = Math.max(0, Math.min(capture.width - width, Math.round(point.x - width / 2)));
+	let top = Math.max(0, Math.min(capture.height - height, Math.round(point.y - height / 2)));
+	let canvas = new OffscreenCanvas(width, height);
+	let context = canvas.getContext("2d");
+	if (!context) throw new Error("No canvas.");
+	context.fillStyle = "#fff";
+	context.fillRect(0, 0, width, height);
+	let tileTop = 0;
+	for (let [index, tile] of capture.tiles.entries()) {
+		let tileBottom = tileTop + tile.height;
+		let from = Math.max(top, tileTop);
+		let to = Math.min(top + height, tileBottom);
+		if (to > from && images[index]) {
+			let bitmap = await createImageBitmap(images[index]);
+			context.drawImage(bitmap, left * capture.scale, (from - tileTop) * capture.scale, width * capture.scale, (to - from) * capture.scale, 0, from - top, width, to - from);
+			bitmap.close();
+		}
+		tileTop = tileBottom;
+	}
+	let x = point.x - left;
+	let y = point.y - top;
+	context.lineWidth = 6;
+	context.strokeStyle = "#fff";
+	context.beginPath();
+	context.arc(x, y, 18, 0, Math.PI * 2);
+	context.stroke();
+	context.lineWidth = 3;
+	context.strokeStyle = "#ef4444";
+	context.stroke();
+	let blob = await canvas.convertToBlob({
+		type: "image/jpeg",
+		quality: QUALITY
+	});
+	let bytes = new Uint8Array(await blob.arrayBuffer());
+	let binary = "";
+	for (let index = 0; index < bytes.length; index += 32768) binary += String.fromCharCode(...bytes.subarray(index, index + 32768));
+	return btoa(binary);
+}
+//#endregion
 //#region app/client/project-differences.ts
 var results = /* @__PURE__ */ new Map();
 function worker() {
@@ -1008,7 +1095,12 @@ function ProjectCanvas(handle) {
 						await comments.loadThread(thread.id, true);
 					}
 				}),
-				renderThreadActions: (thread) => /* @__PURE__ */ jsx(ProjectThreadLinks, {
+				renderThreadActions: (thread) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProjectMakeTask, {
+					thread,
+					canMake: comments.snapshot.capabilities.link && project.storage.work?.state === "ready",
+					busy: comments.busy,
+					onMake: async (id) => comments.makeTask(id, await canvasTaskContext(previews, thread, sizes).catch(() => void 0))
+				}), /* @__PURE__ */ jsx(ProjectThreadLinks, {
 					part: "action",
 					project,
 					thread,
@@ -1018,7 +1110,7 @@ function ProjectCanvas(handle) {
 						await comments.load();
 						await comments.loadThread(thread.id, true);
 					}
-				}),
+				})] }),
 				initialThreadId: requestedThread,
 				loaded: comments.loaded,
 				busy: comments.busy,