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

package/dist/whiteboard/kit.js

@@ -0,0 +1,406 @@
+import { defineNodeType } from "../core/node-types.js";
+import { defineFlowExtension } from "../core/extension.js";
+import { format } from "../locale.js";
+import { createId } from "../core/model.js";
+import { anchorPorts, whiteboardKeys } from "./model.js";
+import { boardState } from "./state.js";
+import board_node_default from "./board-node.js";
+import board_draft_default from "./board-draft.js";
+import { imageFiles, insertImages, pickImages } from "./image.js";
+import whiteboard_toolbar_default from "./whiteboard-toolbar.js";
+import { connectorEdge, connectorToolbar } from "./connector.js";
+import { drawBoardNode } from "./draw.js";
+import { drawInk, erase } from "./pen.js";
+import { watch } from "vue";
+import { RotateCwIcon } from "@dou-ui/icons";
+// src/whiteboard/kit.ts
+/** The node types the whiteboard adds; only they turn. */
+var BOARD_TYPES = /* @__PURE__ */ new Set([
+	"shape",
+	"sticky",
+	"text",
+	"ink",
+	"image"
+]);
+/** "Rectangle: text", or just "Rectangle" while it has none. */
+var nameOf = (kind, text, t) => text ? format(t.board.named, {
+	kind,
+	text
+}) : kind;
+/** How far a board node is turned, from `data.rotation`. */
+var turnedBy = (node) => node.data?.rotation ?? 0;
+/** A rectangle, ellipse or diamond with centred text; `data.shape` says which. */
+var shapeNode = defineNodeType({
+	type: "shape",
+	component: board_node_default,
+	ports: anchorPorts,
+	frame: false,
+	resizable: {
+		minWidth: 24,
+		minHeight: 24
+	},
+	rotation: turnedBy,
+	draw: drawBoardNode,
+	size: {
+		width: 160,
+		height: 100
+	},
+	defaults: () => ({ shape: "rect" }),
+	label: (node, t) => nameOf(t.board[node.data?.shape ?? "rect"], node.data?.text, t)
+});
+/** A square note in a soft color. */
+var stickyNode = defineNodeType({
+	type: "sticky",
+	component: board_node_default,
+	ports: anchorPorts,
+	frame: false,
+	resizable: {
+		minWidth: 64,
+		minHeight: 64
+	},
+	rotation: turnedBy,
+	draw: drawBoardNode,
+	size: {
+		width: 160,
+		height: 160
+	},
+	defaults: () => ({}),
+	label: (node, t) => nameOf(t.board.sticky, node.data?.text, t)
+});
+/** Text on its own; it grows as it is typed. */
+var textNode = defineNodeType({
+	type: "text",
+	component: board_node_default,
+	ports: anchorPorts,
+	frame: false,
+	resizable: {
+		minWidth: 24,
+		minHeight: 24
+	},
+	rotation: turnedBy,
+	draw: drawBoardNode,
+	size: {
+		width: 200,
+		height: 40
+	},
+	defaults: () => ({}),
+	label: (node, t) => nameOf(t.board.text, node.data?.text, t)
+});
+/** A pen stroke; it stretches with its box. */
+var inkNode = defineNodeType({
+	type: "ink",
+	component: board_node_default,
+	frame: false,
+	resizable: {
+		minWidth: 8,
+		minHeight: 8
+	},
+	rotation: turnedBy,
+	draw: drawBoardNode,
+	defaults: () => ({
+		points: [],
+		box: [0, 0]
+	}),
+	label: (_, t) => t.board.ink
+});
+/** An image; `data.src` is its address. */
+var imageNode = defineNodeType({
+	type: "image",
+	component: board_node_default,
+	ports: anchorPorts,
+	frame: false,
+	resizable: {
+		minWidth: 24,
+		minHeight: 24
+	},
+	rotation: turnedBy,
+	draw: drawBoardNode,
+	size: {
+		width: 240,
+		height: 180
+	},
+	defaults: () => ({ src: "" }),
+	label: (node, t) => nameOf(t.board.image, node.data?.alt, t)
+});
+/** The node type and data each drawing tool adds. */
+function kindOf(tool) {
+	if (tool === "sticky" || tool === "text") return {
+		type: tool,
+		data: {}
+	};
+	return {
+		type: "shape",
+		data: { shape: tool }
+	};
+}
+function nodeFor(tool, rect) {
+	const height = tool === "text" ? void 0 : rect.height;
+	return {
+		id: createId(),
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height,
+		...kindOf(tool)
+	};
+}
+var SIZES = {
+	rect: {
+		width: 160,
+		height: 100
+	},
+	ellipse: {
+		width: 140,
+		height: 100
+	},
+	diamond: {
+		width: 140,
+		height: 120
+	},
+	sticky: {
+		width: 160,
+		height: 160
+	},
+	text: {
+		width: 200,
+		height: 40
+	}
+};
+/** After a tool put down a node: back to select unless kept, and notes and text open to be written in. */
+function added(ctx, tool, id) {
+	const state = boardState(ctx);
+	if (!state.locked.value) state.tool.value = "select";
+	if (tool === "sticky" || tool === "text") state.editing.value = id;
+}
+/**
+* The whiteboard: shape, sticky note and text nodes, the `connector` edge,
+* the drawing tools with their keys, and a toolbar. Add it after `flowKit()`.
+*/
+function whiteboardKit(options = {}) {
+	return defineFlowExtension({
+		name: "whiteboard",
+		nodeTypes: [
+			shapeNode,
+			stickyNode,
+			textNode,
+			inkNode,
+			imageNode
+		],
+		edgeTypes: [connectorEdge],
+		edgeToolbarItems: connectorToolbar,
+		edgeType: "connector",
+		layers: { above: [board_draft_default] },
+		overlays: options.toolbar === false ? [] : [whiteboard_toolbar_default],
+		setup(ctx) {
+			const state = boardState(ctx);
+			state.upload = options.upload;
+			const stops = [];
+			if (options.tool) {
+				const outer = options.tool;
+				state.tool.value = outer.value;
+				stops.push(watch(outer, (tool) => state.tool.value = tool), watch(state.tool, (tool) => outer.value = tool));
+			}
+			stops.push(watch(state.tool, (tool) => {
+				const root = ctx.root.value;
+				if (root) root.dataset.boardTool = tool;
+			}, { immediate: true }), watch(state.panning, (panning) => {
+				const root = ctx.root.value;
+				if (root) root.toggleAttribute("data-board-panning", panning);
+			}));
+			const root = ctx.root.value;
+			const onDragOver = (event) => {
+				if (ctx.readonly.value || !event.dataTransfer?.types.includes("Files")) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "copy";
+			};
+			const onDrop = (event) => {
+				const files = imageFiles(event.dataTransfer?.files);
+				if (ctx.readonly.value || !files.length) return;
+				event.preventDefault();
+				const at = ctx.toCanvas({
+					x: event.clientX,
+					y: event.clientY
+				});
+				insertImages(ctx, files, { at });
+			};
+			const onPaste = (event) => {
+				const active = document.activeElement;
+				if (ctx.readonly.value || !root || !active || !root.contains(active)) return;
+				if (active.closest("input, textarea, [contenteditable]")) return;
+				const files = imageFiles(event.clipboardData?.files);
+				if (!files.length) return;
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				insertImages(ctx, files);
+			};
+			root?.addEventListener("dragover", onDragOver);
+			root?.addEventListener("drop", onDrop);
+			document.addEventListener("paste", onPaste, true);
+			return () => {
+				for (const stop of stops) stop();
+				root?.removeEventListener("dragover", onDragOver);
+				root?.removeEventListener("drop", onDrop);
+				document.removeEventListener("paste", onPaste, true);
+				delete ctx.root.value?.dataset.boardTool;
+				ctx.root.value?.removeAttribute("data-board-panning");
+			};
+		},
+		press(ctx, press) {
+			const state = boardState(ctx);
+			const tool = state.tool.value;
+			if (tool === "select") return;
+			state.editing.value = null;
+			if (tool === "hand") {
+				const start = {
+					x: press.event.clientX,
+					y: press.event.clientY
+				};
+				const origin = { ...ctx.viewport.value };
+				state.panning.value = true;
+				const stop = () => state.panning.value = false;
+				return {
+					end: stop,
+					cancel: stop,
+					move(_, event) {
+						ctx.setViewport({
+							...origin,
+							x: origin.x + event.clientX - start.x,
+							y: origin.y + event.clientY - start.y
+						});
+					}
+				};
+			}
+			if (tool === "pen") return drawInk(ctx, press.event);
+			if (tool === "eraser") return erase(ctx, press.point);
+			const start = press.point;
+			const rectTo = (point, square) => {
+				let width = Math.abs(point.x - start.x);
+				let height = Math.abs(point.y - start.y);
+				if (square) width = height = Math.max(width, height);
+				return {
+					x: point.x < start.x ? start.x - width : start.x,
+					y: point.y < start.y ? start.y - height : start.y,
+					width,
+					height
+				};
+			};
+			const done = (rect) => {
+				state.draft.value = null;
+				if (!rect) return;
+				const node = nodeFor(tool, rect);
+				ctx.transact((tr) => tr.addNode(node));
+				ctx.selection.value = {
+					nodes: [node.id],
+					edges: []
+				};
+				ctx.announce(format(ctx.messages.value.added, { node: ctx.messages.value.board[tool] }));
+				added(ctx, tool, node.id);
+			};
+			return {
+				move(point, event) {
+					state.draft.value = {
+						...rectTo(point, event.shiftKey),
+						tool
+					};
+				},
+				end(point, event) {
+					const rect = rectTo(point, event.shiftKey);
+					const min = 8 / ctx.viewport.value.zoom;
+					if (rect.width < min && rect.height < min) {
+						const size = SIZES[tool];
+						done({
+							x: start.x - size.width / 2,
+							y: start.y - size.height / 2,
+							...size
+						});
+					} else done({
+						...rect,
+						width: Math.max(rect.width, 24),
+						height: tool === "text" ? Math.max(rect.height, 40) : Math.max(rect.height, 24)
+					});
+				},
+				cancel: () => done(null)
+			};
+		},
+		contextMenu(ctx, target) {
+			if (target.kind !== "node" || ctx.readonly.value) return [];
+			const t = ctx.messages.value.board;
+			const items = [];
+			const node = target.node;
+			if (BOARD_TYPES.has(node.type ?? "") && ctx.selection.value.nodes.length <= 1) {
+				const rotation = node.data?.rotation ?? 0;
+				const rotate = (to) => {
+					ctx.transact((tr) => tr.updateData(node.id, { rotation: to || void 0 }));
+					ctx.announce(format(t.turned, { degrees: to }));
+				};
+				items.push({
+					key: "rotate",
+					label: t.rotate,
+					icon: RotateCwIcon,
+					divided: true,
+					disabled: !!node.locked,
+					run: () => rotate((rotation + 90) % 360)
+				}, {
+					key: "unrotate",
+					label: t.unrotate,
+					disabled: !rotation || !!node.locked,
+					run: () => rotate(0)
+				});
+			}
+			return items;
+		},
+		keymap(ctx) {
+			const state = boardState(ctx);
+			const pick = (tool) => () => {
+				state.tool.value = tool;
+				state.locked.value = false;
+				const t = ctx.messages.value.board;
+				ctx.announce(format(t.picked, { tool: t[tool] }));
+			};
+			const keys = {};
+			for (const [tool, key] of Object.entries(whiteboardKeys)) keys[key] = pick(tool);
+			return {
+				...keys,
+				["i"]: () => {
+					if (ctx.readonly.value) return false;
+					pickImages(ctx);
+				},
+				enter: () => {
+					if (ctx.readonly.value) return false;
+					const tool = state.tool.value;
+					if (tool !== "select" && tool !== "hand" && tool !== "pen" && tool !== "eraser") {
+						const { type, data } = kindOf(tool);
+						const size = tool === "text" ? {
+							width: SIZES.text.width,
+							height: void 0
+						} : SIZES[tool];
+						const writes = tool === "sticky" || tool === "text";
+						const id = ctx.insertNode(type, {
+							data,
+							size,
+							focus: !writes
+						});
+						if (id) added(ctx, tool, id);
+						return;
+					}
+					const { nodes, edges } = ctx.selection.value;
+					if (nodes.length !== 1 || edges.length || ctx.readonly.value) return false;
+					const node = ctx.doc.value.nodes.find((n) => n.id === nodes[0]);
+					if (!node || ![
+						"shape",
+						"sticky",
+						"text"
+					].includes(node.type ?? "")) return false;
+					state.editing.value = node.id;
+				},
+				escape: () => {
+					if (state.tool.value === "select") return false;
+					state.tool.value = "select";
+				}
+			};
+		}
+	});
+}
+export { connectorEdge, imageNode, inkNode, shapeNode, stickyNode, textNode, whiteboardKit };
+
+//# sourceMappingURL=kit.js.map

package/dist/whiteboard/kit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kit.js","names":["BoardNode","BoardDraft","WhiteboardToolbar"],"sources":["../../src/whiteboard/kit.ts"],"sourcesContent":["import type { ContextMenuItem } from 'dou-ui'\nimport { RotateCwIcon } from '@dou-ui/icons'\nimport { watch, type Ref } from 'vue'\nimport type { FlowEditorContext } from '../context'\nimport { defineFlowExtension, type FlowExtension } from '../core/extension'\nimport { createId, type FlowData, type FlowNode, type Point, type Rect } from '../core/model'\nimport { defineNodeType } from '../core/node-types'\nimport { format, type FlowMessages } from '../locale'\nimport BoardNode from './board-node.vue'\nimport BoardDraft from './board-draft.vue'\nimport WhiteboardToolbar from './whiteboard-toolbar.vue'\nimport {\n  anchorPorts,\n  imageKey,\n  type WhiteboardImageData,\n  type WhiteboardInkData,\n  type WhiteboardNodeData,\n  type WhiteboardShapeData,\n  type WhiteboardShapeTool,\n  type WhiteboardStickyData,\n  type WhiteboardTextData,\n  type WhiteboardTool,\n  whiteboardKeys,\n} from './model'\nimport { imageFiles, insertImages, pickImages, type WhiteboardUpload } from './image'\nimport { connectorEdge, connectorToolbar } from './connector'\nimport { drawBoardNode } from './draw'\nimport { drawInk, erase } from './pen'\nimport { boardState } from './state'\n\n/** The node types the whiteboard adds; only they turn. */\nconst BOARD_TYPES = new Set(['shape', 'sticky', 'text', 'ink', 'image'])\n\n/** \"Rectangle: text\", or just \"Rectangle\" while it has none. */\nconst nameOf = (kind: string, text: string | undefined, t: FlowMessages) =>\n  text ? format(t.board.named, { kind, text }) : kind\n\n/** How far a board node is turned, from `data.rotation`. */\nconst turnedBy = (node: FlowNode<WhiteboardNodeData>) => node.data?.rotation ?? 0\n\n/** A rectangle, ellipse or diamond with centred text; `data.shape` says which. */\nexport const shapeNode = defineNodeType<WhiteboardShapeData>({\n  type: 'shape',\n  component: BoardNode,\n  ports: anchorPorts,\n  frame: false,\n  resizable: { minWidth: 24, minHeight: 24 },\n  rotation: turnedBy,\n  draw: drawBoardNode,\n  size: { width: 160, height: 100 },\n  defaults: () => ({ shape: 'rect' }),\n  label: (node, t) => nameOf(t.board[node.data?.shape ?? 'rect'], node.data?.text, t),\n})\n\n/** A square note in a soft color. */\nexport const stickyNode = defineNodeType<WhiteboardStickyData>({\n  type: 'sticky',\n  component: BoardNode,\n  ports: anchorPorts,\n  frame: false,\n  resizable: { minWidth: 64, minHeight: 64 },\n  rotation: turnedBy,\n  draw: drawBoardNode,\n  size: { width: 160, height: 160 },\n  defaults: () => ({}),\n  label: (node, t) => nameOf(t.board.sticky, node.data?.text, t),\n})\n\n/** Text on its own; it grows as it is typed. */\nexport const textNode = defineNodeType<WhiteboardTextData>({\n  type: 'text',\n  component: BoardNode,\n  ports: anchorPorts,\n  frame: false,\n  resizable: { minWidth: 24, minHeight: 24 },\n  rotation: turnedBy,\n  draw: drawBoardNode,\n  size: { width: 200, height: 40 },\n  defaults: () => ({}),\n  label: (node, t) => nameOf(t.board.text, node.data?.text, t),\n})\n\n/** A pen stroke; it stretches with its box. */\nexport const inkNode = defineNodeType<WhiteboardInkData>({\n  type: 'ink',\n  component: BoardNode,\n  frame: false,\n  resizable: { minWidth: 8, minHeight: 8 },\n  rotation: turnedBy,\n  draw: drawBoardNode,\n  defaults: () => ({ points: [], box: [0, 0] }),\n  label: (_, t) => t.board.ink,\n})\n\n/** An image; `data.src` is its address. */\nexport const imageNode = defineNodeType<WhiteboardImageData>({\n  type: 'image',\n  component: BoardNode,\n  ports: anchorPorts,\n  frame: false,\n  resizable: { minWidth: 24, minHeight: 24 },\n  rotation: turnedBy,\n  draw: drawBoardNode,\n  size: { width: 240, height: 180 },\n  defaults: () => ({ src: '' }),\n  label: (node, t) => nameOf(t.board.image, node.data?.alt, t),\n})\n\n/** The node type and data each drawing tool adds. */\nfunction kindOf(tool: WhiteboardShapeTool): { type: string; data: FlowData } {\n  if (tool === 'sticky' || tool === 'text') return { type: tool, data: {} }\n  return { type: 'shape', data: { shape: tool } }\n}\n\nfunction nodeFor(tool: WhiteboardShapeTool, rect: Rect): FlowNode {\n  // text grows with what is typed: it keeps no height\n  const height = tool === 'text' ? undefined : rect.height\n  return { id: createId(), x: rect.x, y: rect.y, width: rect.width, height, ...kindOf(tool) }\n}\n\nconst SIZES: Record<WhiteboardShapeTool, { width: number; height: number }> = {\n  rect: { width: 160, height: 100 },\n  ellipse: { width: 140, height: 100 },\n  diamond: { width: 140, height: 120 },\n  sticky: { width: 160, height: 160 },\n  text: { width: 200, height: 40 },\n}\n\n/** After a tool put down a node: back to select unless kept, and notes and text open to be written in. */\nfunction added(ctx: FlowEditorContext, tool: WhiteboardShapeTool, id: string) {\n  const state = boardState(ctx)\n  if (!state.locked.value) state.tool.value = 'select'\n  if (tool === 'sticky' || tool === 'text') state.editing.value = id\n}\n\nexport interface WhiteboardKitOptions {\n  /**\n   * The current tool, to share with your own toolbar. Made inside the kit\n   * when left out.\n   */\n  tool?: Ref<WhiteboardTool>\n  /** The built-in toolbar at the top of the editor. Defaults to `true`. */\n  toolbar?: boolean\n  /**\n   * Turns an image file that is dropped, pasted or picked into the `src` it\n   * is kept as, e.g. by uploading it and returning its address. Without it,\n   * images are kept in the document as data URLs.\n   */\n  upload?: WhiteboardUpload\n}\n\n/**\n * The whiteboard: shape, sticky note and text nodes, the `connector` edge,\n * the drawing tools with their keys, and a toolbar. Add it after `flowKit()`.\n */\nexport function whiteboardKit(options: WhiteboardKitOptions = {}): FlowExtension {\n  return defineFlowExtension({\n    name: 'whiteboard',\n    nodeTypes: [shapeNode, stickyNode, textNode, inkNode, imageNode],\n    edgeTypes: [connectorEdge],\n    edgeToolbarItems: connectorToolbar,\n    edgeType: 'connector',\n    layers: { above: [BoardDraft] },\n    overlays: options.toolbar === false ? [] : [WhiteboardToolbar],\n\n    setup(ctx) {\n      const state = boardState(ctx)\n      state.upload = options.upload\n      const stops: (() => void)[] = []\n      if (options.tool) {\n        const outer = options.tool\n        state.tool.value = outer.value\n        stops.push(\n          watch(outer, (tool) => (state.tool.value = tool)),\n          watch(state.tool, (tool) => (outer.value = tool)),\n        )\n      }\n      // the cursor says what a press will do\n      stops.push(\n        watch(\n          state.tool,\n          (tool) => {\n            const root = ctx.root.value\n            if (root) root.dataset.boardTool = tool\n          },\n          { immediate: true },\n        ),\n        watch(state.panning, (panning) => {\n          const root = ctx.root.value\n          if (root) root.toggleAttribute('data-board-panning', panning)\n        }),\n      )\n      // images dropped on the board or pasted into it\n      const root = ctx.root.value\n      const onDragOver = (event: DragEvent) => {\n        if (ctx.readonly.value || !event.dataTransfer?.types.includes('Files')) return\n        event.preventDefault()\n        event.dataTransfer.dropEffect = 'copy'\n      }\n      const onDrop = (event: DragEvent) => {\n        const files = imageFiles(event.dataTransfer?.files)\n        if (ctx.readonly.value || !files.length) return\n        event.preventDefault()\n        const at = ctx.toCanvas({ x: event.clientX, y: event.clientY })\n        void insertImages(ctx, files, { at })\n      }\n      const onPaste = (event: ClipboardEvent) => {\n        const active = document.activeElement\n        if (ctx.readonly.value || !root || !active || !root.contains(active)) return\n        // pasting into a field is the field's\n        if (active.closest('input, textarea, [contenteditable]')) return\n        const files = imageFiles(event.clipboardData?.files)\n        if (!files.length) return\n        event.preventDefault()\n        event.stopImmediatePropagation()\n        void insertImages(ctx, files)\n      }\n      root?.addEventListener('dragover', onDragOver)\n      root?.addEventListener('drop', onDrop)\n      // before the editor's own paste, which reads nodes from text\n      document.addEventListener('paste', onPaste, true)\n      return () => {\n        for (const stop of stops) stop()\n        root?.removeEventListener('dragover', onDragOver)\n        root?.removeEventListener('drop', onDrop)\n        document.removeEventListener('paste', onPaste, true)\n        delete ctx.root.value?.dataset.boardTool\n        ctx.root.value?.removeAttribute('data-board-panning')\n      }\n    },\n\n    press(ctx, press) {\n      const state = boardState(ctx)\n      const tool = state.tool.value\n      if (tool === 'select') return\n      // a press puts down whatever text was being typed\n      state.editing.value = null\n      if (tool === 'hand') {\n        const start = { x: press.event.clientX, y: press.event.clientY }\n        const origin = { ...ctx.viewport.value }\n        state.panning.value = true\n        const stop = () => (state.panning.value = false)\n        return {\n          end: stop,\n          cancel: stop,\n          move(_, event) {\n            ctx.setViewport({\n              ...origin,\n              x: origin.x + event.clientX - start.x,\n              y: origin.y + event.clientY - start.y,\n            })\n          },\n        }\n      }\n      if (tool === 'pen') return drawInk(ctx, press.event)\n      if (tool === 'eraser') return erase(ctx, press.point)\n      const start = press.point\n      const rectTo = (point: Point, square: boolean) => {\n        let width = Math.abs(point.x - start.x)\n        let height = Math.abs(point.y - start.y)\n        if (square) width = height = Math.max(width, height)\n        return {\n          x: point.x < start.x ? start.x - width : start.x,\n          y: point.y < start.y ? start.y - height : start.y,\n          width,\n          height,\n        }\n      }\n      const done = (rect: Rect | null) => {\n        state.draft.value = null\n        if (!rect) return\n        const node = nodeFor(tool, rect)\n        ctx.transact((tr) => tr.addNode(node))\n        ctx.selection.value = { nodes: [node.id], edges: [] }\n        ctx.announce(format(ctx.messages.value.added, { node: ctx.messages.value.board[tool] }))\n        added(ctx, tool, node.id)\n      }\n      return {\n        move(point, event) {\n          state.draft.value = { ...rectTo(point, event.shiftKey), tool }\n        },\n        end(point, event) {\n          const rect = rectTo(point, event.shiftKey)\n          const min = 8 / ctx.viewport.value.zoom\n          if (rect.width < min && rect.height < min) {\n            // a click: the default size, centred where it was clicked\n            const size = SIZES[tool]\n            done({ x: start.x - size.width / 2, y: start.y - size.height / 2, ...size })\n          } else {\n            done({\n              ...rect,\n              width: Math.max(rect.width, 24),\n              height: tool === 'text' ? Math.max(rect.height, 40) : Math.max(rect.height, 24),\n            })\n          }\n        },\n        cancel: () => done(null),\n      }\n    },\n\n    contextMenu(ctx, target) {\n      if (target.kind !== 'node' || ctx.readonly.value) return []\n      const t = ctx.messages.value.board\n      const items: ContextMenuItem[] = []\n      const node = target.node\n      if (BOARD_TYPES.has(node.type ?? '') && ctx.selection.value.nodes.length <= 1) {\n        const rotation = (node.data?.rotation as number | undefined) ?? 0\n        const rotate = (to: number) => {\n          ctx.transact((tr) => tr.updateData(node.id, { rotation: to || undefined }))\n          ctx.announce(format(t.turned, { degrees: to }))\n        }\n        items.push(\n          {\n            key: 'rotate',\n            label: t.rotate,\n            icon: RotateCwIcon,\n            divided: true,\n            disabled: !!node.locked,\n            run: () => rotate((rotation + 90) % 360),\n          },\n          {\n            key: 'unrotate',\n            label: t.unrotate,\n            disabled: !rotation || !!node.locked,\n            run: () => rotate(0),\n          },\n        )\n      }\n      return items\n    },\n\n    keymap(ctx) {\n      const state = boardState(ctx)\n      const pick = (tool: WhiteboardTool) => () => {\n        state.tool.value = tool\n        state.locked.value = false\n        const t = ctx.messages.value.board\n        ctx.announce(format(t.picked, { tool: t[tool] }))\n      }\n      const keys: Record<string, () => boolean | void> = {}\n      for (const [tool, key] of Object.entries(whiteboardKeys))\n        keys[key] = pick(tool as WhiteboardTool)\n      return {\n        ...keys,\n        [imageKey]: () => {\n          if (ctx.readonly.value) return false\n          pickImages(ctx)\n        },\n        enter: () => {\n          if (ctx.readonly.value) return false\n          const tool = state.tool.value\n          // with a drawing tool, Enter puts one down: after the selected node, or mid-view\n          if (tool !== 'select' && tool !== 'hand' && tool !== 'pen' && tool !== 'eraser') {\n            const { type, data } = kindOf(tool)\n            // text keeps no height, as when drawn\n            const size =\n              tool === 'text' ? { width: SIZES.text.width, height: undefined } : SIZES[tool]\n            // notes and text take focus in their own field\n            const writes = tool === 'sticky' || tool === 'text'\n            const id = ctx.insertNode(type, { data, size, focus: !writes })\n            if (id) added(ctx, tool, id)\n            return\n          }\n          // otherwise it writes in the selected note or shape\n          const { nodes, edges } = ctx.selection.value\n          if (nodes.length !== 1 || edges.length || ctx.readonly.value) return false\n          const node = ctx.doc.value.nodes.find((n) => n.id === nodes[0])\n          if (!node || !['shape', 'sticky', 'text'].includes(node.type ?? '')) return false\n          state.editing.value = node.id\n        },\n        escape: () => {\n          if (state.tool.value === 'select') return false\n          state.tool.value = 'select'\n        },\n      }\n    },\n  })\n}\n\nexport { connectorEdge }\n"],"mappings":"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"}

package/dist/whiteboard/model.js

@@ -0,0 +1,52 @@
+// src/whiteboard/model.ts
+/** Keys for the tools. */
+var whiteboardKeys = {
+	select: "v",
+	hand: "h",
+	rect: "r",
+	ellipse: "o",
+	diamond: "d",
+	sticky: "s",
+	text: "t",
+	pen: "p",
+	eraser: "x"
+};
+/** The key that inserts an image. */
+var imageKey = "i";
+var SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+/**
+* Four anchors, one on each side. Each is an output and an input at the
+* same spot, so a connector can start and end on any of them. Edges in
+* data go from an output (`right`) to an input (`left-in`). The order puts
+* `right` and `left-in` first, so a node added after another joins it left
+* to right.
+*/
+var anchorPorts = [...[
+	"right",
+	"bottom",
+	"left",
+	"top"
+].map((side) => ({
+	id: side,
+	kind: "output",
+	side
+})), ...[
+	"left",
+	"top",
+	"right",
+	"bottom"
+].map((side) => ({
+	id: `${side}-in`,
+	kind: "input",
+	side,
+	max: Number.POSITIVE_INFINITY
+}))];
+var anchorSides = SIDES;
+export { anchorPorts, anchorSides, imageKey, whiteboardKeys };
+
+//# sourceMappingURL=model.js.map

package/dist/whiteboard/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","names":[],"sources":["../../src/whiteboard/model.ts"],"sourcesContent":["import type { Tone } from 'dou-ui'\nimport type { FlowPortSpec } from '../core/model'\n\n/** What a press on the board does. */\nexport type WhiteboardTool =\n  'select' | 'hand' | 'rect' | 'ellipse' | 'diamond' | 'sticky' | 'text' | 'pen' | 'eraser'\n\n/** The tools that put down a node with a box. */\nexport type WhiteboardShapeTool = Exclude<WhiteboardTool, 'select' | 'hand' | 'pen' | 'eraser'>\n\nexport type WhiteboardShape = 'rect' | 'ellipse' | 'diamond'\n\n/** What every board node can carry. */\nexport interface WhiteboardNodeData {\n  [key: string]: unknown\n  /** Degrees clockwise around the node's centre. */\n  rotation?: number\n}\n\nexport interface WhiteboardShapeData extends WhiteboardNodeData {\n  shape: WhiteboardShape\n  text?: string\n  /** `neutral` by default. */\n  tone?: Tone\n}\n\nexport interface WhiteboardStickyData extends WhiteboardNodeData {\n  text?: string\n  /** `warning` (yellow) by default. */\n  tone?: Tone\n}\n\nexport interface WhiteboardTextData extends WhiteboardNodeData {\n  text?: string\n}\n\n/** A pen stroke. */\nexport interface WhiteboardInkData extends WhiteboardNodeData {\n  /**\n   * The points as `x, y, pressure` triples, flat, in the node's own units:\n   * `0, 0` is its top left corner when it is `box` in size.\n   */\n  points: number[]\n  /** The size the points were drawn at; the stroke stretches with the node. */\n  box: [number, number]\n  /**\n   * The stroke's width drawn with a mouse or finger. `4` by default; a pen\n   * makes it 0.4 to 1.6 times as wide as it presses lighter or harder.\n   */\n  size?: number\n  /** The text color when left out. */\n  tone?: Tone\n}\n\n/** How a connector runs: one straight line, right-angled turns, or a smooth curve. */\nexport type WhiteboardRoute = 'straight' | 'elbow' | 'curve'\nexport type WhiteboardDash = 'solid' | 'dashed' | 'dotted' | 'dash-dot'\n/** Which ends of a connector have an arrowhead. */\nexport type WhiteboardArrow = 'none' | 'end' | 'both'\n\n/** A `connector` edge's look. */\nexport interface WhiteboardConnectorData {\n  [key: string]: unknown\n  /** `straight` by default. */\n  route?: WhiteboardRoute\n  /** `solid` by default. */\n  dash?: WhiteboardDash\n  /** `end` by default. */\n  arrow?: WhiteboardArrow\n  /** Where an `elbow` connector's middle run sits, from 0 to 1; set by dragging it. */\n  bend?: number\n}\n\nexport interface WhiteboardImageData extends WhiteboardNodeData {\n  src: string\n  /** Read by screen readers. */\n  alt?: string\n}\n\n/** Keys for the tools. */\nexport const whiteboardKeys: Record<WhiteboardTool, string> = {\n  select: 'v',\n  hand: 'h',\n  rect: 'r',\n  ellipse: 'o',\n  diamond: 'd',\n  sticky: 's',\n  text: 't',\n  pen: 'p',\n  eraser: 'x',\n}\n\n/** The key that inserts an image. */\nexport const imageKey = 'i'\n\nconst SIDES = ['top', 'right', 'bottom', 'left'] as const\n\n/**\n * Four anchors, one on each side. Each is an output and an input at the\n * same spot, so a connector can start and end on any of them. Edges in\n * data go from an output (`right`) to an input (`left-in`). The order puts\n * `right` and `left-in` first, so a node added after another joins it left\n * to right.\n */\nexport const anchorPorts: FlowPortSpec[] = [\n  ...(['right', 'bottom', 'left', 'top'] as const).map((side) => ({\n    id: side,\n    kind: 'output' as const,\n    side,\n  })),\n  ...(['left', 'top', 'right', 'bottom'] as const).map((side) => ({\n    id: `${side}-in`,\n    kind: 'input' as const,\n    side,\n    max: Number.POSITIVE_INFINITY,\n  })),\n]\n\nexport const anchorSides = SIDES\n"],"mappings":";;AAgFA,IAAa,iBAAiD;CAC5D,QAAQ;CACR,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,KAAK;CACL,QAAQ;AACV;;AAGA,IAAa,WAAW;AAExB,IAAM,QAAQ;CAAC;CAAO;CAAS;CAAU;AAAM;;;;;;;;AAS/C,IAAa,cAA8B,CACzC,GAAI;CAAC;CAAS;CAAU;CAAQ;AAAK,CAAC,CAAW,KAAK,UAAU;CAC9D,IAAI;CACJ,MAAM;CACN;AACF,EAAE,GACF,GAAI;CAAC;CAAQ;CAAO;CAAS;AAAQ,CAAC,CAAW,KAAK,UAAU;CAC9D,IAAI,GAAG,KAAK;CACZ,MAAM;CACN;CACA,KAAK,OAAO;AACd,EAAE,CACJ;AAEA,IAAa,cAAc"}

package/dist/whiteboard/pen.js

@@ -0,0 +1,88 @@
+import { format } from "../locale.js";
+import { createId } from "../core/model.js";
+import { follow, inkHit, strokeNode } from "./ink.js";
+import { boardState } from "./state.js";
+// src/whiteboard/pen.ts
+/** The points of a pointer event, with the ones the browser merged into it. */
+function samples(ctx, event) {
+	const merged = event.getCoalescedEvents?.() ?? [];
+	return (merged.length ? merged : [event]).map((e) => ({
+		...ctx.toCanvas({
+			x: e.clientX,
+			y: e.clientY
+		}),
+		pressure: e.pointerType === "pen" && e.pressure > 0 ? e.pressure : .5
+	}));
+}
+/** Draws a stroke with the pen; it becomes an `ink` node once let go. */
+function drawInk(ctx, event) {
+	const state = boardState(ctx);
+	const gap = 1 / ctx.viewport.value.zoom;
+	const points = [];
+	for (const point of samples(ctx, event)) follow(points, point, gap);
+	state.ink.value = [...points];
+	return {
+		move(_, e) {
+			for (const point of samples(ctx, e)) follow(points, point, gap);
+			state.ink.value = [...points];
+		},
+		end(_, e) {
+			state.ink.value = null;
+			const [last] = samples(ctx, e).slice(-1);
+			const tail = points[points.length - 1];
+			if (last && tail && Math.hypot(last.x - tail.x, last.y - tail.y) >= gap) points.push(last);
+			const node = strokeNode(createId(), points);
+			ctx.transact((tr) => tr.addNode(node));
+			ctx.announce(format(ctx.messages.value.added, { node: ctx.messages.value.board.ink }));
+		},
+		cancel() {
+			state.ink.value = null;
+		}
+	};
+}
+/** Wipes the strokes the eraser passes over; they go once it lets go. */
+function erase(ctx, start) {
+	const state = boardState(ctx);
+	const radius = 8 / ctx.viewport.value.zoom;
+	const touched = /* @__PURE__ */ new Set();
+	const at = (point) => {
+		state.eraser.value = point;
+		let changed = false;
+		for (const node of ctx.doc.value.nodes) {
+			if (node.type !== "ink" || node.locked || touched.has(node.id)) continue;
+			if (!inkHit(node, point, radius)) continue;
+			touched.add(node.id);
+			changed = true;
+		}
+		if (changed) state.erasing.value = new Set(touched);
+	};
+	let last = start;
+	const sweep = (point) => {
+		const steps = Math.max(1, Math.ceil(Math.hypot(point.x - last.x, point.y - last.y) / radius));
+		for (let i = 1; i <= steps; i++) at({
+			x: last.x + (point.x - last.x) * i / steps,
+			y: last.y + (point.y - last.y) * i / steps
+		});
+		last = point;
+	};
+	at(start);
+	const clear = () => {
+		state.eraser.value = null;
+		state.erasing.value = /* @__PURE__ */ new Set();
+	};
+	return {
+		move: sweep,
+		end() {
+			clear();
+			if (!touched.size) return;
+			ctx.transact((tr) => {
+				for (const id of touched) tr.removeNode(id);
+			});
+			ctx.announce(format(ctx.messages.value.board.erased, { count: touched.size }));
+		},
+		cancel: clear
+	};
+}
+export { drawInk, erase };
+
+//# sourceMappingURL=pen.js.map

package/dist/whiteboard/pen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pen.js","names":[],"sources":["../../src/whiteboard/pen.ts"],"sourcesContent":["import type { FlowEditorContext } from '../context'\nimport type { FlowPressHandler } from '../core/extension'\nimport { createId, type Point } from '../core/model'\nimport { format } from '../locale'\nimport { follow, inkHit, strokeNode, type InkPoint } from './ink'\nimport { boardState } from './state'\n\n/** The points of a pointer event, with the ones the browser merged into it. */\nfunction samples(ctx: FlowEditorContext, event: PointerEvent): InkPoint[] {\n  const merged = event.getCoalescedEvents?.() ?? []\n  return (merged.length ? merged : [event]).map((e) => ({\n    ...ctx.toCanvas({ x: e.clientX, y: e.clientY }),\n    // only a pen tells pressure apart; a mouse or finger draws the plain width\n    pressure: e.pointerType === 'pen' && e.pressure > 0 ? e.pressure : 0.5,\n  }))\n}\n\n/** Draws a stroke with the pen; it becomes an `ink` node once let go. */\nexport function drawInk(ctx: FlowEditorContext, event: PointerEvent): FlowPressHandler {\n  const state = boardState(ctx)\n  const gap = 1 / ctx.viewport.value.zoom\n  const points: InkPoint[] = []\n  for (const point of samples(ctx, event)) follow(points, point, gap)\n  state.ink.value = [...points]\n  return {\n    move(_, e) {\n      for (const point of samples(ctx, e)) follow(points, point, gap)\n      state.ink.value = [...points]\n    },\n    end(_, e) {\n      state.ink.value = null\n      // the lag that smooths the line stops short of where it was let go\n      const [last] = samples(ctx, e).slice(-1)\n      const tail = points[points.length - 1]\n      if (last && tail && Math.hypot(last.x - tail.x, last.y - tail.y) >= gap) points.push(last)\n      const node = strokeNode(createId(), points)\n      ctx.transact((tr) => tr.addNode(node))\n      ctx.announce(format(ctx.messages.value.added, { node: ctx.messages.value.board.ink }))\n    },\n    cancel() {\n      state.ink.value = null\n    },\n  }\n}\n\n/** Wipes the strokes the eraser passes over; they go once it lets go. */\nexport function erase(ctx: FlowEditorContext, start: Point): FlowPressHandler {\n  const state = boardState(ctx)\n  const radius = 8 / ctx.viewport.value.zoom\n  const touched = new Set<string>()\n  const at = (point: Point) => {\n    state.eraser.value = point\n    let changed = false\n    for (const node of ctx.doc.value.nodes) {\n      if (node.type !== 'ink' || node.locked || touched.has(node.id)) continue\n      if (!inkHit(node, point, radius)) continue\n      touched.add(node.id)\n      changed = true\n    }\n    if (changed) state.erasing.value = new Set(touched)\n  }\n  // between two samples, so a quick swipe misses nothing\n  let last = start\n  const sweep = (point: Point) => {\n    const steps = Math.max(1, Math.ceil(Math.hypot(point.x - last.x, point.y - last.y) / radius))\n    for (let i = 1; i <= steps; i++)\n      at({\n        x: last.x + ((point.x - last.x) * i) / steps,\n        y: last.y + ((point.y - last.y) * i) / steps,\n      })\n    last = point\n  }\n  at(start)\n  const clear = () => {\n    state.eraser.value = null\n    state.erasing.value = new Set()\n  }\n  return {\n    move: sweep,\n    end() {\n      clear()\n      if (!touched.size) return\n      ctx.transact((tr) => {\n        for (const id of touched) tr.removeNode(id)\n      })\n      ctx.announce(format(ctx.messages.value.board.erased, { count: touched.size }))\n    },\n    cancel: clear,\n  }\n}\n"],"mappings":"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"}

package/dist/whiteboard/state.js

@@ -0,0 +1,26 @@
+import { ref, shallowRef } from "vue";
+// src/whiteboard/state.ts
+var states = /* @__PURE__ */ new WeakMap();
+/** The board's state in an editor, made on first use. */
+function boardState(context) {
+	let state = states.get(context);
+	if (!state) {
+		state = {
+			tool: ref("select"),
+			locked: ref(false),
+			panning: ref(false),
+			editing: shallowRef(null),
+			draft: shallowRef(null),
+			ink: shallowRef(null),
+			erasing: shallowRef(/* @__PURE__ */ new Set()),
+			eraser: shallowRef(null),
+			handles: shallowRef(null),
+			uploading: ref(0)
+		};
+		states.set(context, state);
+	}
+	return state;
+}
+export { boardState };
+
+//# sourceMappingURL=state.js.map

package/dist/whiteboard/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":[],"sources":["../../src/whiteboard/state.ts"],"sourcesContent":["import { ref, shallowRef, type Ref, type ShallowRef } from 'vue'\nimport type { FlowEditorContext } from '../context'\nimport type { Point, Rect } from '../core/model'\nimport type { WhiteboardUpload } from './image'\nimport type { InkPoint } from './ink'\nimport type { WhiteboardShapeTool, WhiteboardTool } from './model'\n\n/** What the board's pieces share within one editor. */\nexport interface WhiteboardState {\n  tool: Ref<WhiteboardTool>\n  /** Keeps the tool after drawing, instead of going back to select. */\n  locked: Ref<boolean>\n  /** The hand is dragging the view. */\n  panning: Ref<boolean>\n  /** The node whose text is being typed. */\n  editing: ShallowRef<string | null>\n  /** The box being drawn, with the tool drawing it. */\n  draft: ShallowRef<(Rect & { tool: WhiteboardShapeTool }) | null>\n  /** The stroke being drawn with the pen, in canvas coordinates. */\n  ink: ShallowRef<InkPoint[] | null>\n  /** Strokes the eraser has touched, removed once it lets go. */\n  erasing: ShallowRef<ReadonlySet<string>>\n  /** Where the eraser is, while it is pressed. */\n  eraser: ShallowRef<Point | null>\n  /**\n   * Where the turn and corner handles of the selected node are drawn: a\n   * layer above every node, so a neighbour never covers them.\n   */\n  handles: ShallowRef<HTMLElement | null>\n  /** Images being uploaded. */\n  uploading: Ref<number>\n  /** The kit's `upload` option. */\n  upload?: WhiteboardUpload\n}\n\nconst states = new WeakMap<FlowEditorContext, WhiteboardState>()\n\n/** The board's state in an editor, made on first use. */\nexport function boardState(context: FlowEditorContext): WhiteboardState {\n  let state = states.get(context)\n  if (!state) {\n    state = {\n      tool: ref('select'),\n      locked: ref(false),\n      panning: ref(false),\n      editing: shallowRef(null),\n      draft: shallowRef(null),\n      ink: shallowRef(null),\n      erasing: shallowRef(new Set()),\n      eraser: shallowRef(null),\n      handles: shallowRef(null),\n      uploading: ref(0),\n    }\n    states.set(context, state)\n  }\n  return state\n}\n"],"mappings":";;AAmCA,IAAM,yBAAS,IAAI,QAA4C;;AAG/D,SAAgB,WAAW,SAA6C;CACtE,IAAI,QAAQ,OAAO,IAAI,OAAO;CAC9B,IAAI,CAAC,OAAO;EACV,QAAQ;GACN,MAAM,IAAI,QAAQ;GAClB,QAAQ,IAAI,KAAK;GACjB,SAAS,IAAI,KAAK;GAClB,SAAS,WAAW,IAAI;GACxB,OAAO,WAAW,IAAI;GACtB,KAAK,WAAW,IAAI;GACpB,SAAS,2BAAW,IAAI,IAAI,CAAC;GAC7B,QAAQ,WAAW,IAAI;GACvB,SAAS,WAAW,IAAI;GACxB,WAAW,IAAI,CAAC;EAClB;EACA,OAAO,IAAI,SAAS,KAAK;CAC3B;CACA,OAAO;AACT"}