@dou-ui/flow 0.0.0-stage → 0.1.0-alpha.0

package/dist/whiteboard/image.js

@@ -0,0 +1,104 @@
+import { format } from "../locale.js";
+import { boardState } from "./state.js";
+// src/whiteboard/image.ts
+/** Without an upload, images are kept in the document as data URLs. */
+var readAsDataUrl = (file) => new Promise((resolve, reject) => {
+	const reader = new FileReader();
+	reader.addEventListener("load", () => resolve(String(reader.result)));
+	reader.addEventListener("error", () => reject(reader.error));
+	reader.readAsDataURL(file);
+});
+/** An image's own size, or `null` when it can't be loaded. */
+function naturalSize(src) {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.addEventListener("load", () => resolve({
+			width: img.naturalWidth,
+			height: img.naturalHeight
+		}));
+		img.addEventListener("error", () => resolve(null));
+		setTimeout(() => resolve(null), 4e3);
+		img.src = src;
+	});
+}
+/** New images are at most this wide or tall, in canvas units. */
+var MAX_SIDE = 320;
+var imageFiles = (files) => [...files ?? []].filter((file) => file.type.startsWith("image/"));
+/**
+* Adds an image node for each file, centred on `at` and stepped down and
+* right when there are several. Files go through the kit's `upload` option.
+*/
+async function insertImages(ctx, files, options = {}) {
+	const state = boardState(ctx);
+	const upload = options.upload ?? state.upload ?? readAsDataUrl;
+	const at = options.at;
+	const t = ctx.messages.value.board;
+	const root = ctx.root.value;
+	if (!root || ctx.readonly.value) return;
+	const box = root.getBoundingClientRect();
+	const centre = at ?? ctx.toCanvas({
+		x: box.left + box.width / 2,
+		y: box.top + box.height / 2
+	});
+	state.uploading.value += files.length;
+	const ids = [];
+	try {
+		await Promise.all(files.map(async (file, i) => {
+			let src;
+			let alt = file.name.replace(/\.[^.]+$/, "");
+			try {
+				const done = await upload(file);
+				if (typeof done === "string") src = done;
+				else {
+					src = done.src;
+					if (done.alt !== void 0) alt = done.alt;
+				}
+			} catch {
+				ctx.announce(format(t.imageFailed, { name: file.name }));
+				return;
+			}
+			const size = await naturalSize(src) ?? {
+				width: MAX_SIDE,
+				height: MAX_SIDE * .75
+			};
+			const scale = Math.min(1, MAX_SIDE / Math.max(size.width, size.height));
+			const id = ctx.insertNode("image", {
+				at: {
+					x: centre.x + i * 24,
+					y: centre.y + i * 24
+				},
+				data: {
+					src,
+					alt
+				},
+				size: {
+					width: Math.round(size.width * scale),
+					height: Math.round(size.height * scale)
+				},
+				focus: false
+			});
+			if (id) ids.push(id);
+		}));
+	} finally {
+		state.uploading.value -= files.length;
+	}
+	if (ids.length > 1) ctx.selection.value = {
+		nodes: ids,
+		edges: []
+	};
+}
+/** Opens the file picker and inserts what is picked, as `insertImages` does. */
+function pickImages(ctx, options = {}) {
+	const input = document.createElement("input");
+	input.type = "file";
+	input.accept = "image/*";
+	input.multiple = true;
+	input.addEventListener("change", () => {
+		const files = imageFiles(input.files);
+		if (files.length) insertImages(ctx, files, options);
+	});
+	input.click();
+}
+export { imageFiles, insertImages, pickImages };
+
+//# sourceMappingURL=image.js.map

package/dist/whiteboard/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":[],"sources":["../../src/whiteboard/image.ts"],"sourcesContent":["import type { FlowEditorContext } from '../context'\nimport type { Point } from '../core/model'\nimport { format } from '../locale'\nimport { boardState } from './state'\n\n/**\n * Turns a file into the `src` an image node keeps, e.g. by uploading it.\n * Return `{ src, alt }` to give the image its description; it is the file's\n * name otherwise.\n */\nexport type WhiteboardUpload = (file: File) => WhiteboardUploaded | Promise<WhiteboardUploaded>\n\n/** An image's address, or its address and description. */\nexport type WhiteboardUploaded = string | { src: string; alt?: string }\n\nexport interface WhiteboardImageOptions {\n  /** Where the images go, in canvas units; the middle of the view by default. */\n  at?: Point\n  /** Overrides the kit's `upload` option for these images. */\n  upload?: WhiteboardUpload\n}\n\n/** Without an upload, images are kept in the document as data URLs. */\nconst readAsDataUrl: WhiteboardUpload = (file) =>\n  new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.addEventListener('load', () => resolve(String(reader.result)))\n    reader.addEventListener('error', () => reject(reader.error))\n    reader.readAsDataURL(file)\n  })\n\n/** An image's own size, or `null` when it can't be loaded. */\nfunction naturalSize(src: string): Promise<{ width: number; height: number } | null> {\n  return new Promise((resolve) => {\n    const img = new Image()\n    img.addEventListener('load', () =>\n      resolve({ width: img.naturalWidth, height: img.naturalHeight }),\n    )\n    img.addEventListener('error', () => resolve(null))\n    // an image that never answers gets the default size\n    setTimeout(() => resolve(null), 4000)\n    img.src = src\n  })\n}\n\n/** New images are at most this wide or tall, in canvas units. */\nconst MAX_SIDE = 320\n\nexport const imageFiles = (files: Iterable<File> | null | undefined) =>\n  [...(files ?? [])].filter((file) => file.type.startsWith('image/'))\n\n/**\n * Adds an image node for each file, centred on `at` and stepped down and\n * right when there are several. Files go through the kit's `upload` option.\n */\nexport async function insertImages(\n  ctx: FlowEditorContext,\n  files: File[],\n  options: WhiteboardImageOptions = {},\n) {\n  const state = boardState(ctx)\n  const upload = options.upload ?? state.upload ?? readAsDataUrl\n  const at = options.at\n  const t = ctx.messages.value.board\n  const root = ctx.root.value\n  if (!root || ctx.readonly.value) return\n  const box = root.getBoundingClientRect()\n  const centre = at ?? ctx.toCanvas({ x: box.left + box.width / 2, y: box.top + box.height / 2 })\n  state.uploading.value += files.length\n  const ids: string[] = []\n  try {\n    await Promise.all(\n      files.map(async (file, i) => {\n        let src: string\n        let alt = file.name.replace(/\\.[^.]+$/, '')\n        try {\n          const done = await upload(file)\n          if (typeof done === 'string') src = done\n          else {\n            src = done.src\n            if (done.alt !== undefined) alt = done.alt\n          }\n        } catch {\n          ctx.announce(format(t.imageFailed, { name: file.name }))\n          return\n        }\n        const size = (await naturalSize(src)) ?? { width: MAX_SIDE, height: MAX_SIDE * 0.75 }\n        const scale = Math.min(1, MAX_SIDE / Math.max(size.width, size.height))\n        const id = ctx.insertNode('image', {\n          at: { x: centre.x + i * 24, y: centre.y + i * 24 },\n          data: { src, alt },\n          size: { width: Math.round(size.width * scale), height: Math.round(size.height * scale) },\n          focus: false,\n        })\n        if (id) ids.push(id)\n      }),\n    )\n  } finally {\n    state.uploading.value -= files.length\n  }\n  if (ids.length > 1) ctx.selection.value = { nodes: ids, edges: [] }\n}\n\n/** Opens the file picker and inserts what is picked, as `insertImages` does. */\nexport function pickImages(ctx: FlowEditorContext, options: WhiteboardImageOptions = {}) {\n  const input = document.createElement('input')\n  input.type = 'file'\n  input.accept = 'image/*'\n  input.multiple = true\n  input.addEventListener('change', () => {\n    const files = imageFiles(input.files)\n    if (files.length) void insertImages(ctx, files, options)\n  })\n  input.click()\n}\n"],"mappings":"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"}

package/dist/whiteboard/index.js

@@ -0,0 +1,5 @@
+import { imageKey, whiteboardKeys } from "./model.js";
+import { insertImages, pickImages } from "./image.js";
+import { connectorEdge } from "./connector.js";
+import { imageNode, inkNode, shapeNode, stickyNode, textNode, whiteboardKit } from "./kit.js";
+export { connectorEdge, imageKey, imageNode, inkNode, insertImages, pickImages, shapeNode, stickyNode, textNode, whiteboardKeys, whiteboardKit };

package/dist/whiteboard/ink.js

@@ -0,0 +1,168 @@
+import { turn } from "../core/geometry.js";
+var round = (v) => Math.round(v * 10) / 10;
+/** The stroke's width at a pressure; a mouse, always 0.5, gets the plain size. */
+var widthAt = (size, pressure) => size * (.4 + 1.2 * pressure);
+/**
+* Follows the pointer with a little lag, which smooths out the shake of a
+* hand; samples closer than `gap` to the last one are dropped.
+*/
+function follow(points, next, gap) {
+	const last = points[points.length - 1];
+	if (!last) return void points.push(next);
+	const point = {
+		x: last.x + (next.x - last.x) * .5,
+		y: last.y + (next.y - last.y) * .5,
+		pressure: last.pressure + (next.pressure - last.pressure) * .5
+	};
+	if (Math.hypot(point.x - last.x, point.y - last.y) >= gap) points.push(point);
+}
+/** The node a finished stroke becomes: its box with room for the stroke's width. */
+function strokeNode(id, points, size = 4) {
+	const pad = widthAt(size, 1) / 2 + 1;
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const p of points) {
+		minX = Math.min(minX, p.x);
+		minY = Math.min(minY, p.y);
+		maxX = Math.max(maxX, p.x);
+		maxY = Math.max(maxY, p.y);
+	}
+	const x = minX - pad;
+	const y = minY - pad;
+	const width = round(maxX - minX + pad * 2);
+	const height = round(maxY - minY + pad * 2);
+	const flat = [];
+	for (const p of points) flat.push(round(p.x - x), round(p.y - y), round(p.pressure));
+	return {
+		id,
+		type: "ink",
+		x: round(x),
+		y: round(y),
+		width,
+		height,
+		data: {
+			points: flat,
+			box: [width, height]
+		}
+	};
+}
+/**
+* A stroke's points in a box of `width` by `height`: the line itself
+* stretches, but the room left around it for the pen's width does not, so
+* a stretched stroke keeps its thickness.
+*/
+function fitInk(points, box, width, height, size = 4) {
+	const pad = widthAt(size, 1) / 2 + 1;
+	const axis = (from, to) => {
+		const span = from - pad * 2;
+		return span > .01 ? {
+			scale: (to - pad * 2) / span,
+			shift: 0
+		} : {
+			scale: 1,
+			shift: (to - from) / 2
+		};
+	};
+	const ax = axis(box[0], width);
+	const ay = axis(box[1], height);
+	if (ax.scale === 1 && ay.scale === 1 && !ax.shift && !ay.shift) return [...points];
+	return points.map((p) => ({
+		x: pad + (p.x - pad) * ax.scale + ax.shift,
+		y: pad + (p.y - pad) * ay.scale + ay.shift,
+		pressure: p.pressure
+	}));
+}
+/** The triples of `data.points` as points. */
+function unpack(flat) {
+	const out = [];
+	for (let i = 0; i + 2 < flat.length; i += 3) out.push({
+		x: flat[i],
+		y: flat[i + 1],
+		pressure: flat[i + 2]
+	});
+	return out;
+}
+var fmt = (p) => `${round(p.x)} ${round(p.y)}`;
+/**
+* The outline of a stroke as a filled path: each side offset by half the
+* width at that point, joined by round ends, with curves through the middles
+* of the samples.
+*/
+function inkOutline(points, size = 4) {
+	if (!points.length) return "";
+	const first = points[0];
+	if (points.length === 1) {
+		const r = widthAt(size, first.pressure) / 2;
+		return `M${round(first.x - r)} ${round(first.y)}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0Z`;
+	}
+	const left = [];
+	const right = [];
+	for (let i = 0; i < points.length; i++) {
+		const a = points[Math.max(0, i - 1)];
+		const b = points[Math.min(points.length - 1, i + 1)];
+		const p = points[i];
+		const length = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+		const nx = -(b.y - a.y) / length;
+		const ny = (b.x - a.x) / length;
+		const r = widthAt(size, p.pressure) / 2;
+		left.push({
+			x: p.x + nx * r,
+			y: p.y + ny * r
+		});
+		right.push({
+			x: p.x - nx * r,
+			y: p.y - ny * r
+		});
+	}
+	const side = (list) => {
+		let d = "";
+		for (let i = 1; i < list.length - 1; i++) {
+			const p = list[i];
+			const n = list[i + 1];
+			d += `Q${fmt(p)} ${fmt({
+				x: (p.x + n.x) / 2,
+				y: (p.y + n.y) / 2
+			})}`;
+		}
+		return d + `L${fmt(list[list.length - 1])}`;
+	};
+	const last = points[points.length - 1];
+	const rEnd = round(widthAt(size, last.pressure) / 2);
+	const rStart = round(widthAt(size, first.pressure) / 2);
+	right.reverse();
+	return `M${fmt(left[0])}${side(left)}A${rEnd} ${rEnd} 0 0 0 ${fmt(right[0])}${side(right)}A${rStart} ${rStart} 0 0 0 ${fmt(left[0])}Z`;
+}
+function segmentDistance(p, a, b) {
+	const dx = b.x - a.x;
+	const dy = b.y - a.y;
+	const length = dx * dx + dy * dy;
+	const t = length ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / length)) : 0;
+	return Math.hypot(p.x - a.x - t * dx, p.y - a.y - t * dy);
+}
+/** Whether a stroke passes within `radius` of a canvas point. */
+function inkHit(node, point, radius) {
+	const data = node.data;
+	if (!data?.points?.length) return false;
+	const width = node.width ?? data.box[0];
+	const height = node.height ?? data.box[1];
+	const centre = {
+		x: node.x + width / 2,
+		y: node.y + height / 2
+	};
+	const local = turn(point, centre, -(data.rotation ?? 0));
+	const size = data.size ?? 4;
+	const points = fitInk(unpack(data.points), data.box, width, height, size).map((p) => ({
+		x: node.x + p.x,
+		y: node.y + p.y,
+		pressure: p.pressure
+	}));
+	const reach = radius + size / 2;
+	if (points.length === 1) return Math.hypot(local.x - points[0].x, local.y - points[0].y) <= reach;
+	for (let i = 1; i < points.length; i++) if (segmentDistance(local, points[i - 1], points[i]) <= reach) return true;
+	return false;
+}
+export { fitInk, follow, inkHit, inkOutline, strokeNode, unpack };
+
+//# sourceMappingURL=ink.js.map

package/dist/whiteboard/ink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ink.js","names":[],"sources":["../../src/whiteboard/ink.ts"],"sourcesContent":["import { turn } from '../core/geometry'\nimport type { FlowNode, Point } from '../core/model'\nimport type { WhiteboardInkData } from './model'\n\n/** A sampled point: canvas position and pen pressure from 0 to 1. */\nexport interface InkPoint extends Point {\n  pressure: number\n}\n\nexport const INK_SIZE = 4\n\nconst round = (v: number) => Math.round(v * 10) / 10\n\n/** The stroke's width at a pressure; a mouse, always 0.5, gets the plain size. */\nconst widthAt = (size: number, pressure: number) => size * (0.4 + 1.2 * pressure)\n\n/**\n * Follows the pointer with a little lag, which smooths out the shake of a\n * hand; samples closer than `gap` to the last one are dropped.\n */\nexport function follow(points: InkPoint[], next: InkPoint, gap: number) {\n  const last = points[points.length - 1]\n  if (!last) return void points.push(next)\n  const point = {\n    x: last.x + (next.x - last.x) * 0.5,\n    y: last.y + (next.y - last.y) * 0.5,\n    pressure: last.pressure + (next.pressure - last.pressure) * 0.5,\n  }\n  if (Math.hypot(point.x - last.x, point.y - last.y) >= gap) points.push(point)\n}\n\n/** The node a finished stroke becomes: its box with room for the stroke's width. */\nexport function strokeNode(\n  id: string,\n  points: InkPoint[],\n  size = INK_SIZE,\n): FlowNode<WhiteboardInkData> {\n  const pad = widthAt(size, 1) / 2 + 1\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n  for (const p of points) {\n    minX = Math.min(minX, p.x)\n    minY = Math.min(minY, p.y)\n    maxX = Math.max(maxX, p.x)\n    maxY = Math.max(maxY, p.y)\n  }\n  const x = minX - pad\n  const y = minY - pad\n  const width = round(maxX - minX + pad * 2)\n  const height = round(maxY - minY + pad * 2)\n  const flat: number[] = []\n  for (const p of points) flat.push(round(p.x - x), round(p.y - y), round(p.pressure))\n  return {\n    id,\n    type: 'ink',\n    x: round(x),\n    y: round(y),\n    width,\n    height,\n    data: { points: flat, box: [width, height] },\n  }\n}\n\n/**\n * A stroke's points in a box of `width` by `height`: the line itself\n * stretches, but the room left around it for the pen's width does not, so\n * a stretched stroke keeps its thickness.\n */\nexport function fitInk(\n  points: readonly InkPoint[],\n  box: readonly [number, number],\n  width: number,\n  height: number,\n  size = INK_SIZE,\n): InkPoint[] {\n  const pad = widthAt(size, 1) / 2 + 1\n  const axis = (from: number, to: number) => {\n    const span = from - pad * 2\n    // a flat stroke has no span to stretch: it stays centred\n    return span > 0.01\n      ? { scale: (to - pad * 2) / span, shift: 0 }\n      : { scale: 1, shift: (to - from) / 2 }\n  }\n  const ax = axis(box[0], width)\n  const ay = axis(box[1], height)\n  if (ax.scale === 1 && ay.scale === 1 && !ax.shift && !ay.shift) return [...points]\n  return points.map((p) => ({\n    x: pad + (p.x - pad) * ax.scale + ax.shift,\n    y: pad + (p.y - pad) * ay.scale + ay.shift,\n    pressure: p.pressure,\n  }))\n}\n\n/** The triples of `data.points` as points. */\nexport function unpack(flat: readonly number[]): InkPoint[] {\n  const out: InkPoint[] = []\n  for (let i = 0; i + 2 < flat.length; i += 3)\n    out.push({ x: flat[i]!, y: flat[i + 1]!, pressure: flat[i + 2]! })\n  return out\n}\n\nconst fmt = (p: Point) => `${round(p.x)} ${round(p.y)}`\n\n/**\n * The outline of a stroke as a filled path: each side offset by half the\n * width at that point, joined by round ends, with curves through the middles\n * of the samples.\n */\nexport function inkOutline(points: readonly InkPoint[], size = INK_SIZE): string {\n  if (!points.length) return ''\n  const first = points[0]!\n  if (points.length === 1) {\n    const r = widthAt(size, first.pressure) / 2\n    return `M${round(first.x - r)} ${round(first.y)}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0Z`\n  }\n  const left: Point[] = []\n  const right: Point[] = []\n  for (let i = 0; i < points.length; i++) {\n    const a = points[Math.max(0, i - 1)]!\n    const b = points[Math.min(points.length - 1, i + 1)]!\n    const p = points[i]!\n    const length = Math.hypot(b.x - a.x, b.y - a.y) || 1\n    // the normal to the direction through the neighbours\n    const nx = -(b.y - a.y) / length\n    const ny = (b.x - a.x) / length\n    const r = widthAt(size, p.pressure) / 2\n    left.push({ x: p.x + nx * r, y: p.y + ny * r })\n    right.push({ x: p.x - nx * r, y: p.y - ny * r })\n  }\n  const side = (list: Point[]) => {\n    let d = ''\n    for (let i = 1; i < list.length - 1; i++) {\n      const p = list[i]!\n      const n = list[i + 1]!\n      d += `Q${fmt(p)} ${fmt({ x: (p.x + n.x) / 2, y: (p.y + n.y) / 2 })}`\n    }\n    return d + `L${fmt(list[list.length - 1]!)}`\n  }\n  const last = points[points.length - 1]!\n  const rEnd = round(widthAt(size, last.pressure) / 2)\n  const rStart = round(widthAt(size, first.pressure) / 2)\n  right.reverse()\n  return (\n    `M${fmt(left[0]!)}${side(left)}` +\n    `A${rEnd} ${rEnd} 0 0 0 ${fmt(right[0]!)}${side(right)}` +\n    `A${rStart} ${rStart} 0 0 0 ${fmt(left[0]!)}Z`\n  )\n}\n\nfunction segmentDistance(p: Point, a: Point, b: Point) {\n  const dx = b.x - a.x\n  const dy = b.y - a.y\n  const length = dx * dx + dy * dy\n  const t = length ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / length)) : 0\n  return Math.hypot(p.x - a.x - t * dx, p.y - a.y - t * dy)\n}\n\n/** Whether a stroke passes within `radius` of a canvas point. */\nexport function inkHit(node: FlowNode, point: Point, radius: number): boolean {\n  const data = node.data as WhiteboardInkData | undefined\n  if (!data?.points?.length) return false\n  const width = node.width ?? data.box[0]\n  const height = node.height ?? data.box[1]\n  // into the stroke's own units: undo the turn, then the stretch\n  const centre = { x: node.x + width / 2, y: node.y + height / 2 }\n  const local = turn(point, centre, -(data.rotation ?? 0))\n  const size = data.size ?? INK_SIZE\n  const points = fitInk(unpack(data.points), data.box, width, height, size).map((p) => ({\n    x: node.x + p.x,\n    y: node.y + p.y,\n    pressure: p.pressure,\n  }))\n  const reach = radius + size / 2\n  if (points.length === 1)\n    return Math.hypot(local.x - points[0]!.x, local.y - points[0]!.y) <= reach\n  for (let i = 1; i < points.length; i++)\n    if (segmentDistance(local, points[i - 1]!, points[i]!) <= reach) return true\n  return false\n}\n"],"mappings":"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"}