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

package/dist/whiteboard/board-node.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,332 @@
+import { useFlowEditor } from "../context.js";
+import flow_port_default from "../components/flow-port.js";
+import { fitInk, inkOutline, unpack } from "./ink.js";
+import { anchorSides } from "./model.js";
+import { boardState } from "./state.js";
+import { RESIZE_HANDLES, useTransformHandles } from "./transform.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, toRef, unref, useTemplateRef, vModelText, watch, withDirectives, withModifiers } from "vue";
+import { ImageOffIcon } from "@dou-ui/icons";
+// src/whiteboard/board-node.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["viewBox"];
+var _hoisted_2 = ["width", "height"];
+var _hoisted_3 = [
+	"cx",
+	"cy",
+	"rx",
+	"ry"
+];
+var _hoisted_4 = ["points"];
+var _hoisted_5 = ["viewBox"];
+var _hoisted_6 = ["d"];
+var _hoisted_7 = ["d"];
+var _hoisted_8 = ["aria-label"];
+var _hoisted_9 = ["src", "alt"];
+var _hoisted_10 = ["aria-label"];
+var _hoisted_11 = ["textContent"];
+var _hoisted_12 = {
+	key: 6,
+	class: "dou-whiteboard-node__anchors"
+};
+var _hoisted_13 = ["data-handle", "onPointerdown"];
+var _hoisted_14 = ["data-handle", "onPointerdown"];
+var board_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "board-node",
+	props: {
+		node: {},
+		data: {},
+		ports: {},
+		selected: { type: Boolean },
+		readonly: { type: Boolean },
+		updateData: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const ctx = useFlowEditor();
+		const state = boardState(ctx);
+		const KINDS = [
+			"sticky",
+			"text",
+			"ink",
+			"image"
+		];
+		/** What the node is: one of the shapes, a note, text, a pen stroke or an image. */
+		const kind = computed(() => KINDS.find((k) => k === props.node.type) ?? "shape");
+		const shape = computed(() => props.data.shape ?? "rect");
+		const tone = computed(() => props.data.tone ?? (kind.value === "sticky" ? "warning" : "neutral"));
+		const writable = computed(() => [
+			"shape",
+			"sticky",
+			"text"
+		].includes(kind.value));
+		const MIN = {
+			shape: 24,
+			sticky: 64,
+			text: 40,
+			ink: 8,
+			image: 24
+		};
+		const rotation = computed(() => props.data.rotation ?? 0);
+		const { turning, startTurn, startResize } = useTransformHandles(ctx, toRef(props, "node"), rotation, {
+			width: MIN[kind.value],
+			height: MIN[kind.value]
+		});
+		const transform = computed(() => rotation.value ? { rotate: `${rotation.value}deg` } : void 0);
+		/**
+		* The resize handles: an image keeps its proportions, from its corners; text
+		* only widens, so it has no top or bottom side; the rest has every corner
+		* and side.
+		*/
+		const resizeHandles = computed(() => kind.value === "image" ? RESIZE_HANDLES.filter((h) => h.x && h.y) : kind.value === "text" ? RESIZE_HANDLES.filter((h) => h.x) : RESIZE_HANDLES);
+		const sideHandles = computed(() => resizeHandles.value.filter((h) => !h.x || !h.y));
+		const cornerHandles = computed(() => resizeHandles.value.filter((h) => h.x && h.y));
+		/** The node's box, turned with it, for the handles drawn above every node. */
+		const frameStyle = computed(() => {
+			const rect = ctx.getNodeRect(props.node.id) ?? {
+				...props.node,
+				width: 0,
+				height: 0
+			};
+			return {
+				translate: `${rect.x}px ${rect.y}px`,
+				width: `${rect.width}px`,
+				height: `${rect.height}px`,
+				rotate: rotation.value ? `${rotation.value}deg` : void 0
+			};
+		});
+		const CURSORS = [
+			"ew-resize",
+			"nwse-resize",
+			"ns-resize",
+			"nesw-resize"
+		];
+		/** The resize cursor along a handle's way out, turned with the node. */
+		function cursorOf(handle) {
+			if (kind.value === "text") handle = {
+				x: handle.x,
+				y: 0
+			};
+			const degrees = Math.atan2(handle.y, handle.x) * 180 / Math.PI + rotation.value;
+			return CURSORS[(Math.round(degrees / 45) % 4 + 4) % 4];
+		}
+		function onResize(event, handle) {
+			startResize(event, handle, {
+				keepRatio: kind.value === "image",
+				widthOnly: kind.value === "text"
+			});
+		}
+		/** Where a handle sits on the box: `-1` is the start, `1` the end. */
+		const place = (v) => `${(v + 1) * 50}%`;
+		/** Handles show on the one selected node, while the select tool is in hand. */
+		const handles = computed(() => props.selected && !props.readonly && !editing.value && state.tool.value === "select" && ctx.selection.value.nodes.length === 1);
+		/** The stroke fitted to the box shown, so stretching it keeps its thickness. */
+		const ink = computed(() => {
+			const { points, box: inkBox } = props.data;
+			if (kind.value !== "ink" || !points || !inkBox) return "";
+			const size = props.data.size ?? 4;
+			return inkOutline(fitInk(unpack(points), inkBox, shown.value.w, shown.value.h, size), size);
+		});
+		const erasing = computed(() => state.erasing.value.has(props.node.id));
+		const shown = computed(() => ({
+			w: props.node.width ?? 160,
+			h: props.node.height ?? 100
+		}));
+		const diamond = computed(() => {
+			const { w, h } = shown.value;
+			const i = 1;
+			return `${w / 2},${i} ${w - i},${h / 2} ${w / 2},${h - i} ${i},${h / 2}`;
+		});
+		const textEl = useTemplateRef("textEl");
+		const textMetrics = ref(null);
+		watch(textEl, (el) => {
+			if (!el) return;
+			const s = getComputedStyle(el);
+			const line = Number.parseFloat(s.lineHeight);
+			if (!line) return;
+			const padding = Number.parseFloat(s.paddingTop) + Number.parseFloat(s.paddingBottom);
+			textMetrics.value = {
+				line,
+				padding: padding || 0
+			};
+		}, { flush: "post" });
+		const textStyle = computed(() => {
+			const m = textMetrics.value;
+			if (!m || kind.value === "text") return void 0;
+			const height = shown.value.h;
+			return { "-webkit-line-clamp": Math.max(1, Math.floor((height - m.padding + .5) / m.line)) };
+		});
+		const broken = ref(false);
+		watch(() => props.data.src, () => broken.value = false);
+		const editing = computed(() => state.editing.value === props.node.id);
+		const draft = ref("");
+		const field = useTemplateRef("field");
+		watch(editing, (on) => {
+			if (!on) return;
+			draft.value = props.data.text ?? "";
+			nextTick(() => {
+				fit();
+				field.value?.focus();
+				field.value?.select();
+			});
+		}, { immediate: true });
+		function fit() {
+			const el = field.value;
+			if (!el || CSS.supports?.("field-sizing", "content")) return;
+			el.style.height = "auto";
+			el.style.height = `${el.scrollHeight}px`;
+		}
+		watch(draft, () => void nextTick(fit));
+		function edit() {
+			if (props.readonly || !writable.value) return;
+			state.editing.value = props.node.id;
+		}
+		function finish() {
+			if (!editing.value) return;
+			state.editing.value = null;
+			const text = draft.value.replace(/\s+$/, "");
+			if (!text && kind.value === "text") ctx.transact((tr) => tr.removeNode(props.node.id));
+			else if (text !== (props.data.text ?? "")) props.updateData({ text: text || void 0 });
+			ctx.root.value?.focus({ preventScroll: true });
+		}
+		function onKeydown(event) {
+			if (event.isComposing) return;
+			if (event.key === "Escape" || event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				event.stopPropagation();
+				finish();
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["dou-whiteboard-node", [
+					`is-${kind.value}`,
+					kind.value === "shape" && `is-${shape.value}`,
+					`is-${tone.value}`,
+					{
+						"is-editing": editing.value,
+						"is-turned": !!rotation.value,
+						"is-turning": unref(turning) !== null,
+						"is-selected": __props.selected,
+						"is-erasing": erasing.value
+					}
+				]]),
+				style: normalizeStyle(transform.value),
+				onDblclick: withModifiers(edit, ["stop"])
+			}, [
+				kind.value === "shape" ? (openBlock(), createElementBlock("svg", {
+					key: 0,
+					class: "dou-whiteboard-node__shape",
+					viewBox: `0 0 ${shown.value.w} ${shown.value.h}`,
+					"aria-hidden": "true"
+				}, [shape.value === "rect" ? (openBlock(), createElementBlock("rect", {
+					key: 0,
+					x: "0.75",
+					y: "0.75",
+					width: Math.max(0, shown.value.w - 1.5),
+					height: Math.max(0, shown.value.h - 1.5),
+					rx: "8"
+				}, null, 8, _hoisted_2)) : shape.value === "ellipse" ? (openBlock(), createElementBlock("ellipse", {
+					key: 1,
+					cx: shown.value.w / 2,
+					cy: shown.value.h / 2,
+					rx: Math.max(0, shown.value.w / 2 - .75),
+					ry: Math.max(0, shown.value.h / 2 - .75)
+				}, null, 8, _hoisted_3)) : (openBlock(), createElementBlock("polygon", {
+					key: 2,
+					points: diamond.value
+				}, null, 8, _hoisted_4))], 8, _hoisted_1)) : kind.value === "ink" && __props.data.box ? (openBlock(), createElementBlock("svg", {
+					key: 1,
+					class: "dou-whiteboard-node__ink",
+					viewBox: `0 0 ${shown.value.w} ${shown.value.h}`,
+					"aria-hidden": "true"
+				}, [createElementVNode("path", {
+					class: "dou-whiteboard-node__ink-hit",
+					d: ink.value
+				}, null, 8, _hoisted_6), createElementVNode("path", { d: ink.value }, null, 8, _hoisted_7)], 8, _hoisted_5)) : kind.value === "image" && broken.value ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: "dou-whiteboard-node__image is-broken",
+					role: "img",
+					"aria-label": __props.data.alt || void 0
+				}, [createVNode(unref(ImageOffIcon))], 8, _hoisted_8)) : kind.value === "image" ? (openBlock(), createElementBlock("img", {
+					key: 3,
+					class: "dou-whiteboard-node__image",
+					src: __props.data.src,
+					alt: __props.data.alt ?? "",
+					draggable: "false",
+					onError: _cache[0] || (_cache[0] = ($event) => broken.value = true)
+				}, null, 40, _hoisted_9)) : createCommentVNode("", true),
+				editing.value ? withDirectives((openBlock(), createElementBlock("textarea", {
+					key: 4,
+					ref_key: "field",
+					ref: field,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => draft.value = $event),
+					class: "dou-whiteboard-node__text dou-whiteboard-node__field",
+					"aria-label": unref(ctx).messages.value.board.editText,
+					onKeydown,
+					onBlur: finish,
+					onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+				}, null, 40, _hoisted_10)), [[vModelText, draft.value]]) : writable.value ? (openBlock(), createElementBlock("div", {
+					key: 5,
+					ref_key: "textEl",
+					ref: textEl,
+					class: "dou-whiteboard-node__text",
+					style: normalizeStyle(textStyle.value),
+					textContent: toDisplayString(__props.data.text)
+				}, null, 12, _hoisted_11)) : createCommentVNode("", true),
+				kind.value !== "ink" ? (openBlock(), createElementBlock("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(anchorSides), (side) => {
+					return openBlock(), createElementBlock(Fragment, { key: side }, [createVNode(flow_port_default, {
+						id: `${side}-in`,
+						class: "dou-whiteboard-node__anchor"
+					}, null, 8, ["id"]), createVNode(flow_port_default, {
+						id: side,
+						class: "dou-whiteboard-node__anchor"
+					}, null, 8, ["id"])], 64);
+				}), 128))])) : createCommentVNode("", true),
+				handles.value ? (openBlock(), createElementBlock(Fragment, { key: 7 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(sideHandles.value, (handle) => {
+					return openBlock(), createElementBlock("span", {
+						key: `${handle.x},${handle.y}`,
+						class: normalizeClass(["dou-whiteboard-node__side", handle.x ? "is-x" : "is-y"]),
+						style: normalizeStyle({
+							left: place(handle.x),
+							top: place(handle.y),
+							cursor: cursorOf(handle)
+						}),
+						"data-handle": `${handle.x},${handle.y}`,
+						"data-dou-nodrag": "",
+						"aria-hidden": "true",
+						onPointerdown: ($event) => onResize($event, handle)
+					}, null, 46, _hoisted_13);
+				}), 128)), (openBlock(), createBlock(Teleport, {
+					to: unref(state).handles.value,
+					disabled: !unref(state).handles.value
+				}, [createElementVNode("div", {
+					class: "dou-whiteboard-node__frame",
+					style: normalizeStyle(frameStyle.value),
+					"aria-hidden": "true"
+				}, [createElementVNode("span", {
+					class: "dou-whiteboard-node__turn",
+					"data-dou-nodrag": "",
+					onPointerdown: _cache[3] || (_cache[3] = (...args) => unref(startTurn) && unref(startTurn)(...args))
+				}, [..._cache[4] || (_cache[4] = [createElementVNode("span", {
+					class: "dou-whiteboard-node__target",
+					"data-flow-overlay": ""
+				}, null, -1)])], 32), (openBlock(true), createElementBlock(Fragment, null, renderList(cornerHandles.value, (handle) => {
+					return openBlock(), createElementBlock("span", {
+						key: `${handle.x},${handle.y}`,
+						class: "dou-whiteboard-node__corner",
+						style: normalizeStyle({
+							left: place(handle.x),
+							top: place(handle.y),
+							cursor: cursorOf(handle)
+						}),
+						"data-handle": `${handle.x},${handle.y}`,
+						"data-dou-nodrag": "",
+						onPointerdown: ($event) => onResize($event, handle)
+					}, null, 44, _hoisted_14);
+				}), 128))], 4)], 8, ["to", "disabled"]))], 64)) : createCommentVNode("", true)
+			], 38);
+		};
+	}
+});
+export { board_node_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=board-node.vue_vue_type_script_setup_true_lang.js.map

package/dist/whiteboard/board-node.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-node.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_withModifiers","_createElementVNode","_createVNode","_createCommentVNode","_withDirectives","_vModelText","_toDisplayString","_Fragment","_renderList","DouFlowPort","_createBlock","_Teleport"],"sources":["../../src/whiteboard/board-node.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ImageOffIcon } from '@dou-ui/icons'\nimport { computed, nextTick, ref, toRef, useTemplateRef, watch } from 'vue'\nimport DouFlowPort from '../components/flow-port.vue'\nimport { useFlowEditor } from '../context'\nimport type { NodeViewProps } from '../core/node-types'\nimport type { Tone } from 'dou-ui'\nimport { fitInk, inkOutline, INK_SIZE, unpack } from './ink'\nimport { anchorSides, type WhiteboardShape } from './model'\nimport { boardState } from './state'\nimport { RESIZE_HANDLES, useTransformHandles, type ResizeHandle } from './transform'\n\ntype BoardData = {\n  [key: string]: unknown\n  text?: string\n  shape?: WhiteboardShape\n  tone?: Tone\n  rotation?: number\n  points?: number[]\n  box?: [number, number]\n  size?: number\n  src?: string\n  alt?: string\n}\n\ntype Kind = 'shape' | 'sticky' | 'text' | 'ink' | 'image'\n\nconst props = defineProps<NodeViewProps<BoardData>>()\nconst ctx = useFlowEditor()\nconst state = boardState(ctx)\n\nconst KINDS: readonly Kind[] = ['sticky', 'text', 'ink', 'image']\n/** What the node is: one of the shapes, a note, text, a pen stroke or an image. */\nconst kind = computed<Kind>(() => KINDS.find((k) => k === props.node.type) ?? 'shape')\nconst shape = computed<WhiteboardShape>(() => props.data.shape ?? 'rect')\nconst tone = computed<Tone>(\n  () => props.data.tone ?? (kind.value === 'sticky' ? 'warning' : 'neutral'),\n)\nconst writable = computed(() => ['shape', 'sticky', 'text'].includes(kind.value))\n\nconst MIN: Record<Kind, number> = { shape: 24, sticky: 64, text: 40, ink: 8, image: 24 }\nconst rotation = computed(() => props.data.rotation ?? 0)\nconst { turning, startTurn, startResize } = useTransformHandles(\n  ctx,\n  toRef(props, 'node'),\n  rotation,\n  { width: MIN[kind.value], height: MIN[kind.value] },\n)\n/*\n * A handle being dragged shows the node changed through the editor, so\n * `node` and `data` already are what it is dragged to: the node's own frame,\n * its ports and its edges follow along with it.\n */\nconst transform = computed(() => (rotation.value ? { rotate: `${rotation.value}deg` } : undefined))\n/**\n * The resize handles: an image keeps its proportions, from its corners; text\n * only widens, so it has no top or bottom side; the rest has every corner\n * and side.\n */\nconst resizeHandles = computed(() =>\n  kind.value === 'image'\n    ? RESIZE_HANDLES.filter((h) => h.x && h.y)\n    : kind.value === 'text'\n      ? RESIZE_HANDLES.filter((h) => h.x)\n      : RESIZE_HANDLES,\n)\nconst sideHandles = computed(() => resizeHandles.value.filter((h) => !h.x || !h.y))\nconst cornerHandles = computed(() => resizeHandles.value.filter((h) => h.x && h.y))\n/** The node's box, turned with it, for the handles drawn above every node. */\nconst frameStyle = computed(() => {\n  const rect = ctx.getNodeRect(props.node.id) ?? { ...props.node, width: 0, height: 0 }\n  return {\n    // `translate`, not `transform`: it applies before `rotate`, so the box\n    // turns about its own centre and its offset is not turned with it\n    translate: `${rect.x}px ${rect.y}px`,\n    width: `${rect.width}px`,\n    height: `${rect.height}px`,\n    rotate: rotation.value ? `${rotation.value}deg` : undefined,\n  }\n})\nconst CURSORS = ['ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize'] as const\n/** The resize cursor along a handle's way out, turned with the node. */\nfunction cursorOf(handle: ResizeHandle) {\n  // text only widens, from a corner too\n  if (kind.value === 'text') handle = { x: handle.x, y: 0 }\n  const degrees = (Math.atan2(handle.y, handle.x) * 180) / Math.PI + rotation.value\n  return CURSORS[((Math.round(degrees / 45) % 4) + 4) % 4]\n}\nfunction onResize(event: PointerEvent, handle: ResizeHandle) {\n  startResize(event, handle, {\n    keepRatio: kind.value === 'image',\n    widthOnly: kind.value === 'text',\n  })\n}\n/** Where a handle sits on the box: `-1` is the start, `1` the end. */\nconst place = (v: -1 | 0 | 1) => `${(v + 1) * 50}%`\n\n/** Handles show on the one selected node, while the select tool is in hand. */\nconst handles = computed(\n  () =>\n    props.selected &&\n    !props.readonly &&\n    !editing.value &&\n    state.tool.value === 'select' &&\n    ctx.selection.value.nodes.length === 1,\n)\n\n/** The stroke fitted to the box shown, so stretching it keeps its thickness. */\nconst ink = computed(() => {\n  const { points, box: inkBox } = props.data\n  if (kind.value !== 'ink' || !points || !inkBox) return ''\n  const size = props.data.size ?? INK_SIZE\n  return inkOutline(fitInk(unpack(points), inkBox, shown.value.w, shown.value.h, size), size)\n})\nconst erasing = computed(() => state.erasing.value.has(props.node.id))\n\n// drawn in the node's own units, half the 1.5px stroke in from the edge\nconst shown = computed(() => ({ w: props.node.width ?? 160, h: props.node.height ?? 100 }))\nconst diamond = computed(() => {\n  const { w, h } = shown.value\n  const i = 1\n  return `${w / 2},${i} ${w - i},${h / 2} ${w / 2},${h - i} ${i},${h / 2}`\n})\n\n// Whole lines that fit, the last one ending in an ellipsis, as an export draws them.\nconst textEl = useTemplateRef<HTMLElement>('textEl')\nconst textMetrics = ref<{ line: number; padding: number } | null>(null)\nwatch(\n  textEl,\n  (el) => {\n    if (!el) return\n    const s = getComputedStyle(el)\n    const line = Number.parseFloat(s.lineHeight)\n    if (!line) return\n    const padding = Number.parseFloat(s.paddingTop) + Number.parseFloat(s.paddingBottom)\n    textMetrics.value = { line, padding: padding || 0 }\n  },\n  { flush: 'post' },\n)\nconst textStyle = computed(() => {\n  const m = textMetrics.value\n  if (!m || kind.value === 'text') return undefined\n  const height = shown.value.h\n  return { '-webkit-line-clamp': Math.max(1, Math.floor((height - m.padding + 0.5) / m.line)) }\n})\n\n// An image that can't be loaded: a plain box with a sign, as an export draws it.\nconst broken = ref(false)\nwatch(\n  () => props.data.src,\n  () => (broken.value = false),\n)\n\nconst editing = computed(() => state.editing.value === props.node.id)\nconst draft = ref('')\nconst field = useTemplateRef<HTMLTextAreaElement>('field')\n\nwatch(\n  editing,\n  (on) => {\n    if (!on) return\n    draft.value = props.data.text ?? ''\n    void nextTick(() => {\n      fit()\n      field.value?.focus()\n      field.value?.select()\n    })\n  },\n  { immediate: true },\n)\n\n// browsers without `field-sizing` grow the field by hand\nfunction fit() {\n  const el = field.value\n  if (!el || CSS.supports?.('field-sizing', 'content')) return\n  el.style.height = 'auto'\n  el.style.height = `${el.scrollHeight}px`\n}\nwatch(draft, () => void nextTick(fit))\n\nfunction edit() {\n  if (props.readonly || !writable.value) return\n  state.editing.value = props.node.id\n}\n\nfunction finish() {\n  if (!editing.value) return\n  state.editing.value = null\n  const text = draft.value.replace(/\\s+$/, '')\n  // text with nothing written in it is nothing at all\n  if (!text && kind.value === 'text') ctx.transact((tr) => tr.removeNode(props.node.id))\n  else if (text !== (props.data.text ?? '')) props.updateData({ text: text || undefined })\n  // back to the canvas, so the keys go on working\n  ctx.root.value?.focus({ preventScroll: true })\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.isComposing) return\n  // Escape, or mod+Enter, puts the text down; Enter is a new line\n  if (event.key === 'Escape' || (event.key === 'Enter' && (event.metaKey || event.ctrlKey))) {\n    event.preventDefault()\n    event.stopPropagation()\n    finish()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"dou-whiteboard-node\"\n    :class=\"[\n      `is-${kind}`,\n      kind === 'shape' && `is-${shape}`,\n      `is-${tone}`,\n      {\n        'is-editing': editing,\n        'is-turned': !!rotation,\n        'is-turning': turning !== null,\n        'is-selected': selected,\n        'is-erasing': erasing,\n      },\n    ]\"\n    :style=\"transform\"\n    @dblclick.stop=\"edit\"\n  >\n    <svg\n      v-if=\"kind === 'shape'\"\n      class=\"dou-whiteboard-node__shape\"\n      :viewBox=\"`0 0 ${shown.w} ${shown.h}`\"\n      aria-hidden=\"true\"\n    >\n      <rect\n        v-if=\"shape === 'rect'\"\n        x=\"0.75\"\n        y=\"0.75\"\n        :width=\"Math.max(0, shown.w - 1.5)\"\n        :height=\"Math.max(0, shown.h - 1.5)\"\n        rx=\"8\"\n      />\n      <ellipse\n        v-else-if=\"shape === 'ellipse'\"\n        :cx=\"shown.w / 2\"\n        :cy=\"shown.h / 2\"\n        :rx=\"Math.max(0, shown.w / 2 - 0.75)\"\n        :ry=\"Math.max(0, shown.h / 2 - 0.75)\"\n      />\n      <polygon v-else :points=\"diamond\" />\n    </svg>\n    <svg\n      v-else-if=\"kind === 'ink' && data.box\"\n      class=\"dou-whiteboard-node__ink\"\n      :viewBox=\"`0 0 ${shown.w} ${shown.h}`\"\n      aria-hidden=\"true\"\n    >\n      <path class=\"dou-whiteboard-node__ink-hit\" :d=\"ink\" />\n      <path :d=\"ink\" />\n    </svg>\n    <div\n      v-else-if=\"kind === 'image' && broken\"\n      class=\"dou-whiteboard-node__image is-broken\"\n      role=\"img\"\n      :aria-label=\"data.alt || undefined\"\n    >\n      <ImageOffIcon />\n    </div>\n    <img\n      v-else-if=\"kind === 'image'\"\n      class=\"dou-whiteboard-node__image\"\n      :src=\"data.src\"\n      :alt=\"data.alt ?? ''\"\n      draggable=\"false\"\n      @error=\"broken = true\"\n    />\n    <textarea\n      v-if=\"editing\"\n      ref=\"field\"\n      v-model=\"draft\"\n      class=\"dou-whiteboard-node__text dou-whiteboard-node__field\"\n      :aria-label=\"ctx.messages.value.board.editText\"\n      @keydown=\"onKeydown\"\n      @blur=\"finish\"\n      @pointerdown.stop\n    />\n    <div\n      v-else-if=\"writable\"\n      ref=\"textEl\"\n      class=\"dou-whiteboard-node__text\"\n      :style=\"textStyle\"\n      v-text=\"data.text\"\n    />\n    <div v-if=\"kind !== 'ink'\" class=\"dou-whiteboard-node__anchors\">\n      <template v-for=\"side in anchorSides\" :key=\"side\">\n        <DouFlowPort :id=\"`${side}-in`\" class=\"dou-whiteboard-node__anchor\" />\n        <DouFlowPort :id=\"side\" class=\"dou-whiteboard-node__anchor\" />\n      </template>\n    </div>\n    <template v-if=\"handles\">\n      <!-- the sides stay on the node, under its anchors; the turn and the\n           corners go above every node, so a neighbour never covers them -->\n      <span\n        v-for=\"handle in sideHandles\"\n        :key=\"`${handle.x},${handle.y}`\"\n        :class=\"['dou-whiteboard-node__side', handle.x ? 'is-x' : 'is-y']\"\n        :style=\"{ left: place(handle.x), top: place(handle.y), cursor: cursorOf(handle) }\"\n        :data-handle=\"`${handle.x},${handle.y}`\"\n        data-dou-nodrag\n        aria-hidden=\"true\"\n        @pointerdown=\"onResize($event, handle)\"\n      />\n      <Teleport :to=\"state.handles.value\" :disabled=\"!state.handles.value\">\n        <div class=\"dou-whiteboard-node__frame\" :style=\"frameStyle\" aria-hidden=\"true\">\n          <!-- data-flow-overlay on its target: the selection's toolbar keeps\n               clear of where a finger can take it, when it floats below the\n               node or the node is turned upside down -->\n          <span class=\"dou-whiteboard-node__turn\" data-dou-nodrag @pointerdown=\"startTurn\">\n            <span class=\"dou-whiteboard-node__target\" data-flow-overlay />\n          </span>\n          <span\n            v-for=\"handle in cornerHandles\"\n            :key=\"`${handle.x},${handle.y}`\"\n            class=\"dou-whiteboard-node__corner\"\n            :style=\"{ left: place(handle.x), top: place(handle.y), cursor: cursorOf(handle) }\"\n            :data-handle=\"`${handle.x},${handle.y}`\"\n            data-dou-nodrag\n            @pointerdown=\"onResize($event, handle)\"\n          />\n        </div>\n      </Teleport>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/whiteboard/connector.js

@@ -0,0 +1,180 @@
+import { bezierEdge, defineEdgeType, stepEdge } from "../core/edge-types.js";
+import { format } from "../locale.js";
+import { ArrowEndsIcon, ArrowLeftRightIcon, ArrowRightIcon, ConnectorCurveIcon, ConnectorElbowIcon, ConnectorStraightIcon, LineDashDotIcon, LineDashedIcon, LineDottedIcon, LineSolidIcon, LineStyleIcon, MinusIcon, RouteIcon } from "@dou-ui/icons";
+// src/whiteboard/connector.ts
+var ARROW = {
+	length: 10,
+	spread: .45
+};
+var r2 = (v) => Math.round(v * 100) / 100;
+var p = (pt) => `${r2(pt.x)} ${r2(pt.y)}`;
+/** Out of a side, away from the node. */
+var outward = {
+	left: {
+		x: -1,
+		y: 0
+	},
+	right: {
+		x: 1,
+		y: 0
+	},
+	top: {
+		x: 0,
+		y: -1
+	},
+	bottom: {
+		x: 0,
+		y: 1
+	}
+};
+/** An open arrowhead with its tip at `tip`, pointing along `angle`. */
+function arrowhead(tip, angle) {
+	const wing = (spread) => ({
+		x: tip.x - ARROW.length * Math.cos(angle + spread),
+		y: tip.y - ARROW.length * Math.sin(angle + spread)
+	});
+	return `M${p(wing(ARROW.spread))}L${p(tip)}L${p(wing(-ARROW.spread))}`;
+}
+/** The way a run arrives at `end`: straight from `from`, or into the side it faces. */
+function arrival(end, from, straight) {
+	if (straight) return Math.atan2(end.y - from.y, end.x - from.x);
+	const out = outward[end.side];
+	return Math.atan2(-out.y, -out.x);
+}
+/** Dash patterns, in px of a 1.5px stroke with round ends: a 0 dash is a dot. */
+var DASHES = {
+	solid: void 0,
+	dashed: "6 5",
+	dotted: "0 4",
+	"dash-dot": "8 4 0 4"
+};
+/**
+* The whiteboard's line: straight, with right-angled turns or curved
+* (`data.route`), solid or dashed (`data.dash`), with arrowheads at the end,
+* both ends or neither (`data.arrow`).
+*/
+var connectorEdge = defineEdgeType({
+	type: "connector",
+	route(source, target, edge) {
+		const data = edge?.data ?? {};
+		const route = data.route ?? "straight";
+		const straight = route === "straight";
+		const base = straight ? {
+			path: `M${p(source)}L${p(target)}`,
+			label: {
+				x: (source.x + target.x) / 2,
+				y: (source.y + target.y) / 2
+			}
+		} : (route === "elbow" ? stepEdge : bezierEdge).route(source, target, edge);
+		const arrow = data.arrow ?? "end";
+		let marks = "";
+		if (arrow !== "none") marks += arrowhead(target, arrival(target, source, straight));
+		if (arrow === "both") marks += arrowhead(source, arrival(source, target, straight));
+		return {
+			...base,
+			marks: marks || void 0
+		};
+	},
+	style(edge) {
+		const dash = DASHES[edge.data?.dash ?? "solid"];
+		return dash ? { strokeDasharray: dash } : void 0;
+	}
+});
+var ROUTES = [
+	{
+		value: "straight",
+		icon: ConnectorStraightIcon
+	},
+	{
+		value: "elbow",
+		icon: ConnectorElbowIcon
+	},
+	{
+		value: "curve",
+		icon: ConnectorCurveIcon
+	}
+];
+var DASH_CHOICES = [
+	{
+		value: "solid",
+		icon: LineSolidIcon
+	},
+	{
+		value: "dashed",
+		icon: LineDashedIcon
+	},
+	{
+		value: "dotted",
+		icon: LineDottedIcon
+	},
+	{
+		value: "dash-dot",
+		icon: LineDashDotIcon
+	}
+];
+var ARROWS = [
+	{
+		value: "none",
+		icon: MinusIcon
+	},
+	{
+		value: "end",
+		icon: ArrowRightIcon
+	},
+	{
+		value: "both",
+		icon: ArrowLeftRightIcon
+	}
+];
+var data = (edge) => edge.data ?? {};
+var isConnector = (edge) => (edge.type ?? "connector") === "connector";
+/** Route, dash and arrow choices over the selected connectors. */
+function connectorToolbar(ctx, edges) {
+	if (!edges.every(isConnector)) return [];
+	const t = ctx.messages.value.board;
+	/**
+	* One button: its label and icon say the value in use, or that the
+	* selected connectors differ; its menu sets one value on all of them.
+	*/
+	function choice(key, fallback, options, names, text, mixedIcon) {
+		const values = new Set(edges.map((edge) => data(edge)[key] ?? fallback));
+		const only = values.size === 1 ? [...values][0] : null;
+		return {
+			key,
+			label: format(text.of, { value: only ? names[only] : t.mixed }),
+			icon: only ? options.find((item) => item.value === only).icon : mixedIcon,
+			children: options.map((item) => ({
+				key: `${key}-${item.value}`,
+				label: names[item.value],
+				icon: item.icon,
+				checked: item.value === only,
+				run() {
+					ctx.transact((tr) => {
+						for (const edge of edges) tr.updateEdge(edge.id, { data: {
+							...edge.data,
+							[key]: item.value
+						} });
+					});
+					ctx.announce(format(text.set, { value: names[item.value] }));
+				}
+			}))
+		};
+	}
+	return [
+		choice("route", "straight", ROUTES, t.routes, {
+			of: t.routeOf,
+			set: t.routeSet
+		}, RouteIcon),
+		choice("dash", "solid", DASH_CHOICES, t.dashes, {
+			of: t.dashOf,
+			set: t.dashSet
+		}, LineStyleIcon),
+		choice("arrow", "end", ARROWS, t.arrows, {
+			of: t.arrowOf,
+			set: t.arrowSet
+		}, ArrowEndsIcon)
+	];
+}
+export { connectorEdge, connectorToolbar };
+
+//# sourceMappingURL=connector.js.map

package/dist/whiteboard/connector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connector.js","names":[],"sources":["../../src/whiteboard/connector.ts"],"sourcesContent":["import {\n  ArrowEndsIcon,\n  ArrowLeftRightIcon,\n  ArrowRightIcon,\n  ConnectorCurveIcon,\n  ConnectorElbowIcon,\n  ConnectorStraightIcon,\n  LineDashDotIcon,\n  LineDashedIcon,\n  LineDottedIcon,\n  LineSolidIcon,\n  LineStyleIcon,\n  MinusIcon,\n  RouteIcon,\n} from '@dou-ui/icons'\nimport type { Component } from 'vue'\nimport type { FlowEditorContext } from '../context'\nimport { bezierEdge, defineEdgeType, stepEdge, type EdgeAnchor } from '../core/edge-types'\nimport type { FlowToolbarItem } from '../core/menu'\nimport type { FlowEdge, Point, PortSide } from '../core/model'\nimport { format } from '../locale'\nimport type {\n  WhiteboardArrow,\n  WhiteboardConnectorData,\n  WhiteboardDash,\n  WhiteboardRoute,\n} from './model'\n\nconst ARROW = { length: 10, spread: 0.45 }\nconst r2 = (v: number) => Math.round(v * 100) / 100\nconst p = (pt: Point) => `${r2(pt.x)} ${r2(pt.y)}`\n\n/** Out of a side, away from the node. */\nconst outward: Record<PortSide, Point> = {\n  left: { x: -1, y: 0 },\n  right: { x: 1, y: 0 },\n  top: { x: 0, y: -1 },\n  bottom: { x: 0, y: 1 },\n}\n\n/** An open arrowhead with its tip at `tip`, pointing along `angle`. */\nfunction arrowhead(tip: Point, angle: number) {\n  const wing = (spread: number) => ({\n    x: tip.x - ARROW.length * Math.cos(angle + spread),\n    y: tip.y - ARROW.length * Math.sin(angle + spread),\n  })\n  return `M${p(wing(ARROW.spread))}L${p(tip)}L${p(wing(-ARROW.spread))}`\n}\n\n/** The way a run arrives at `end`: straight from `from`, or into the side it faces. */\nfunction arrival(end: EdgeAnchor, from: Point, straight: boolean) {\n  if (straight) return Math.atan2(end.y - from.y, end.x - from.x)\n  const out = outward[end.side]\n  return Math.atan2(-out.y, -out.x)\n}\n\n/** Dash patterns, in px of a 1.5px stroke with round ends: a 0 dash is a dot. */\nconst DASHES: Record<WhiteboardDash, string | undefined> = {\n  solid: undefined,\n  dashed: '6 5',\n  dotted: '0 4',\n  'dash-dot': '8 4 0 4',\n}\n\n/**\n * The whiteboard's line: straight, with right-angled turns or curved\n * (`data.route`), solid or dashed (`data.dash`), with arrowheads at the end,\n * both ends or neither (`data.arrow`).\n */\nexport const connectorEdge = defineEdgeType<WhiteboardConnectorData>({\n  type: 'connector',\n  route(source, target, edge) {\n    const data = edge?.data ?? {}\n    const route = data.route ?? 'straight'\n    const straight = route === 'straight'\n    const base = straight\n      ? {\n          path: `M${p(source)}L${p(target)}`,\n          label: { x: (source.x + target.x) / 2, y: (source.y + target.y) / 2 },\n        }\n      : (route === 'elbow' ? stepEdge : bezierEdge).route(source, target, edge as FlowEdge)\n    const arrow = data.arrow ?? 'end'\n    let marks = ''\n    if (arrow !== 'none') marks += arrowhead(target, arrival(target, source, straight))\n    if (arrow === 'both') marks += arrowhead(source, arrival(source, target, straight))\n    return { ...base, marks: marks || undefined }\n  },\n  style(edge) {\n    const dash = DASHES[edge.data?.dash ?? 'solid']\n    return dash ? { strokeDasharray: dash } : undefined\n  },\n})\n\nconst ROUTES: { value: WhiteboardRoute; icon: Component }[] = [\n  { value: 'straight', icon: ConnectorStraightIcon },\n  { value: 'elbow', icon: ConnectorElbowIcon },\n  { value: 'curve', icon: ConnectorCurveIcon },\n]\nconst DASH_CHOICES: { value: WhiteboardDash; icon: Component }[] = [\n  { value: 'solid', icon: LineSolidIcon },\n  { value: 'dashed', icon: LineDashedIcon },\n  { value: 'dotted', icon: LineDottedIcon },\n  { value: 'dash-dot', icon: LineDashDotIcon },\n]\nconst ARROWS: { value: WhiteboardArrow; icon: Component }[] = [\n  { value: 'none', icon: MinusIcon },\n  { value: 'end', icon: ArrowRightIcon },\n  { value: 'both', icon: ArrowLeftRightIcon },\n]\n\nconst data = (edge: FlowEdge) => (edge.data ?? {}) as WhiteboardConnectorData\nconst isConnector = (edge: FlowEdge) => (edge.type ?? 'connector') === 'connector'\n\n/** Route, dash and arrow choices over the selected connectors. */\nexport function connectorToolbar(ctx: FlowEditorContext, edges: FlowEdge[]): FlowToolbarItem[] {\n  if (!edges.every(isConnector)) return []\n  const t = ctx.messages.value.board\n\n  /**\n   * One button: its label and icon say the value in use, or that the\n   * selected connectors differ; its menu sets one value on all of them.\n   */\n  function choice<V extends string>(\n    key: 'route' | 'dash' | 'arrow',\n    fallback: V,\n    options: { value: V; icon: Component }[],\n    names: Record<V, string>,\n    text: { of: string; set: string },\n    mixedIcon: Component,\n  ): FlowToolbarItem {\n    const values = new Set(edges.map((edge) => (data(edge)[key] as V | undefined) ?? fallback))\n    const only = values.size === 1 ? [...values][0]! : null\n    return {\n      key,\n      label: format(text.of, { value: only ? names[only] : t.mixed }),\n      icon: only ? options.find((item) => item.value === only)!.icon : mixedIcon,\n      children: options.map((item) => ({\n        key: `${key}-${item.value}`,\n        label: names[item.value],\n        icon: item.icon,\n        checked: item.value === only,\n        run() {\n          ctx.transact((tr) => {\n            for (const edge of edges)\n              tr.updateEdge(edge.id, { data: { ...edge.data, [key]: item.value } })\n          })\n          ctx.announce(format(text.set, { value: names[item.value] }))\n        },\n      })),\n    }\n  }\n\n  return [\n    choice('route', 'straight', ROUTES, t.routes, { of: t.routeOf, set: t.routeSet }, RouteIcon),\n    choice(\n      'dash',\n      'solid',\n      DASH_CHOICES,\n      t.dashes,\n      { of: t.dashOf, set: t.dashSet },\n      LineStyleIcon,\n    ),\n    choice('arrow', 'end', ARROWS, t.arrows, { of: t.arrowOf, set: t.arrowSet }, ArrowEndsIcon),\n  ]\n}\n"],"mappings":"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"}

package/dist/whiteboard/draw.js

@@ -0,0 +1,68 @@
+import { fitInk, inkOutline, unpack } from "./ink.js";
+// src/whiteboard/draw.ts
+var px = (value, fallback) => {
+	const n = Number.parseFloat(value);
+	return Number.isFinite(n) ? n : fallback;
+};
+var r = (value) => Math.round(value * 100) / 100;
+/** A board node as SVG, as `board-node.vue` draws it. */
+function drawBoardNode(node, draw) {
+	const data = node.data ?? {};
+	const kind = node.type === "shape" || !node.type ? "shape" : node.type;
+	const tone = data.tone ?? (kind === "sticky" ? "warning" : "neutral");
+	const shape = data.shape ?? "rect";
+	const nodeClass = `dou-whiteboard-node is-${kind}${kind === "shape" ? ` is-${shape}` : ""} is-${tone}`;
+	const { width: w, height: h } = draw;
+	const parts = [];
+	if (kind === "shape") {
+		const s = draw.style(nodeClass, "dou-whiteboard-node__shape");
+		const stroke = px(s.strokeWidth, 1.5);
+		const i = stroke / 2;
+		const paint = `fill="${draw.color(s.fill)}" stroke="${draw.color(s.stroke)}" stroke-width="${stroke}" stroke-linejoin="round"`;
+		if (shape === "ellipse") parts.push(`<ellipse cx="${r(w / 2)}" cy="${r(h / 2)}" rx="${r(Math.max(0, w / 2 - i))}" ry="${r(Math.max(0, h / 2 - i))}" ${paint}/>`);
+		else if (shape === "diamond") parts.push(`<polygon points="${r(w / 2)},1 ${r(w - 1)},${r(h / 2)} ${r(w / 2)},${r(h - 1)} 1,${r(h / 2)}" ${paint}/>`);
+		else parts.push(`<rect x="${i}" y="${i}" width="${r(Math.max(0, w - stroke))}" height="${r(Math.max(0, h - stroke))}" rx="8" ${paint}/>`);
+	} else if (kind === "sticky") {
+		const s = draw.style(nodeClass);
+		parts.push(`<rect width="${r(w)}" height="${r(h)}" rx="${px(s.borderTopLeftRadius, 4)}" fill="${draw.color(s.backgroundColor)}"/>`);
+	} else if (kind === "ink" && data.points && data.box) {
+		const s = draw.style(nodeClass, "dou-whiteboard-node__ink");
+		const size = data.size ?? 4;
+		const d = inkOutline(fitInk(unpack(data.points), data.box, w, h, size), size);
+		parts.push(`<path d="${d}" fill="${draw.color(s.fill)}"/>`);
+	} else if (kind === "image" && data.src) {
+		const s = draw.style(nodeClass, "dou-whiteboard-node__image");
+		parts.push(draw.image(data.src, {
+			x: 0,
+			y: 0,
+			width: w,
+			height: h
+		}, { radius: px(s.borderTopLeftRadius, 4) }));
+	}
+	if (data.text && (kind === "shape" || kind === "sticky" || kind === "text")) {
+		const s = draw.style(nodeClass, "dou-whiteboard-node__text");
+		const size = px(s.fontSize, 14);
+		const top = px(s.paddingTop, 12);
+		const side = px(s.paddingLeft, 16);
+		const lineHeight = px(s.lineHeight, size * 1.5);
+		const centred = kind !== "text";
+		parts.push(draw.text(data.text, {
+			x: side,
+			y: top,
+			width: Math.max(0, w - side * 2),
+			height: Math.max(0, h - top * 2)
+		}, {
+			size,
+			lineHeight,
+			color: draw.color(draw.style(nodeClass).color),
+			align: centred ? "center" : "start",
+			valign: centred ? "middle" : "top"
+		}));
+	}
+	const body = parts.join("");
+	const rotation = data.rotation;
+	return rotation ? `<g transform="rotate(${rotation} ${r(w / 2)} ${r(h / 2)})">${body}</g>` : body;
+}
+export { drawBoardNode };
+
+//# sourceMappingURL=draw.js.map

package/dist/whiteboard/draw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw.js","names":[],"sources":["../../src/whiteboard/draw.ts"],"sourcesContent":["import type { FlowNode } from '../core/model'\nimport type { FlowDrawContext } from '../export/context'\nimport { fitInk, inkOutline, INK_SIZE, unpack } from './ink'\nimport type { WhiteboardNodeData, WhiteboardShape } from './model'\n\nconst px = (value: string, fallback: number) => {\n  const n = Number.parseFloat(value)\n  return Number.isFinite(n) ? n : fallback\n}\nconst r = (value: number) => Math.round(value * 100) / 100\n\n/** A board node as SVG, as `board-node.vue` draws it. */\nexport function drawBoardNode(node: FlowNode<WhiteboardNodeData>, draw: FlowDrawContext): string {\n  const data = (node.data ?? {}) as WhiteboardNodeData & {\n    shape?: WhiteboardShape\n    text?: string\n    tone?: string\n    points?: number[]\n    box?: [number, number]\n    size?: number\n    src?: string\n  }\n  const kind = node.type === 'shape' || !node.type ? 'shape' : node.type\n  const tone = data.tone ?? (kind === 'sticky' ? 'warning' : 'neutral')\n  const shape = data.shape ?? 'rect'\n  const nodeClass = `dou-whiteboard-node is-${kind}${kind === 'shape' ? ` is-${shape}` : ''} is-${tone}`\n  const { width: w, height: h } = draw\n  const parts: string[] = []\n\n  if (kind === 'shape') {\n    const s = draw.style(nodeClass, 'dou-whiteboard-node__shape')\n    const stroke = px(s.strokeWidth, 1.5)\n    const i = stroke / 2\n    const paint = `fill=\"${draw.color(s.fill)}\" stroke=\"${draw.color(s.stroke)}\" stroke-width=\"${stroke}\" stroke-linejoin=\"round\"`\n    if (shape === 'ellipse')\n      parts.push(\n        `<ellipse cx=\"${r(w / 2)}\" cy=\"${r(h / 2)}\" rx=\"${r(Math.max(0, w / 2 - i))}\" ry=\"${r(Math.max(0, h / 2 - i))}\" ${paint}/>`,\n      )\n    else if (shape === 'diamond')\n      parts.push(\n        `<polygon points=\"${r(w / 2)},${1} ${r(w - 1)},${r(h / 2)} ${r(w / 2)},${r(h - 1)} 1,${r(h / 2)}\" ${paint}/>`,\n      )\n    else\n      parts.push(\n        `<rect x=\"${i}\" y=\"${i}\" width=\"${r(Math.max(0, w - stroke))}\" height=\"${r(Math.max(0, h - stroke))}\" rx=\"8\" ${paint}/>`,\n      )\n  } else if (kind === 'sticky') {\n    const s = draw.style(nodeClass)\n    parts.push(\n      `<rect width=\"${r(w)}\" height=\"${r(h)}\" rx=\"${px(s.borderTopLeftRadius, 4)}\" fill=\"${draw.color(s.backgroundColor)}\"/>`,\n    )\n  } else if (kind === 'ink' && data.points && data.box) {\n    const s = draw.style(nodeClass, 'dou-whiteboard-node__ink')\n    const size = data.size ?? INK_SIZE\n    const d = inkOutline(fitInk(unpack(data.points), data.box, w, h, size), size)\n    parts.push(`<path d=\"${d}\" fill=\"${draw.color(s.fill)}\"/>`)\n  } else if (kind === 'image' && data.src) {\n    const s = draw.style(nodeClass, 'dou-whiteboard-node__image')\n    parts.push(\n      draw.image(\n        data.src,\n        { x: 0, y: 0, width: w, height: h },\n        { radius: px(s.borderTopLeftRadius, 4) },\n      ),\n    )\n  }\n\n  if (data.text && (kind === 'shape' || kind === 'sticky' || kind === 'text')) {\n    const s = draw.style(nodeClass, 'dou-whiteboard-node__text')\n    const size = px(s.fontSize, 14)\n    const top = px(s.paddingTop, 12)\n    const side = px(s.paddingLeft, 16)\n    const lineHeight = px(s.lineHeight, size * 1.5)\n    const centred = kind !== 'text'\n    parts.push(\n      draw.text(\n        data.text,\n        { x: side, y: top, width: Math.max(0, w - side * 2), height: Math.max(0, h - top * 2) },\n        {\n          size,\n          lineHeight,\n          color: draw.color(draw.style(nodeClass).color),\n          align: centred ? 'center' : 'start',\n          valign: centred ? 'middle' : 'top',\n        },\n      ),\n    )\n  }\n\n  const body = parts.join('')\n  const rotation = data.rotation\n  return rotation ? `<g transform=\"rotate(${rotation} ${r(w / 2)} ${r(h / 2)})\">${body}</g>` : body\n}\n"],"mappings":"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"}