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

package/dist/whiteboard/transform.js

@@ -0,0 +1,256 @@
+import { turn } from "../core/geometry.js";
+import { format } from "../locale.js";
+import { onBeforeUnmount, ref } from "vue";
+// src/whiteboard/transform.ts
+/** Degrees in `[0, 360)`, rounded to a whole degree. */
+var normalizeAngle = (degrees) => (Math.round(degrees) % 360 + 360) % 360;
+/** Where a turn lands: a multiple of 15° with Shift; near a right angle, the right angle. */
+function snapAngle(degrees, shift) {
+	if (shift) return normalizeAngle(Math.round(degrees / 15) * 15);
+	const right = Math.round(degrees / 90) * 90;
+	return normalizeAngle(Math.abs(degrees - right) < 4 ? right : degrees);
+}
+/** The eight handles, corners first. */
+var RESIZE_HANDLES = [
+	{
+		x: -1,
+		y: -1
+	},
+	{
+		x: 1,
+		y: -1
+	},
+	{
+		x: 1,
+		y: 1
+	},
+	{
+		x: -1,
+		y: 1
+	},
+	{
+		x: 0,
+		y: -1
+	},
+	{
+		x: 1,
+		y: 0
+	},
+	{
+		x: 0,
+		y: 1
+	},
+	{
+		x: -1,
+		y: 0
+	}
+];
+/**
+* The box a node gets when `handle` is dragged by `delta` (canvas units),
+* turned by `rotation` or not: it grows along the node's own axes, and the
+* corner or side across from the handle stays where it is. With `keepRatio`
+* a corner keeps the box's proportions.
+*/
+function resizeBox(start, rotation, handle, delta, min, keepRatio = false) {
+	const local = turn(delta, {
+		x: 0,
+		y: 0
+	}, -rotation);
+	let width = handle.x ? Math.max(min.width, start.width + handle.x * local.x) : start.width;
+	let height = handle.y ? Math.max(min.height, start.height + handle.y * local.y) : start.height;
+	if (keepRatio && handle.x && handle.y && start.width && start.height) {
+		const w = start.width + handle.x * local.x;
+		const h = start.height + handle.y * local.y;
+		const along = (w * start.width + h * start.height) / (start.width ** 2 + start.height ** 2);
+		const scale = Math.max(along, min.width / start.width, min.height / start.height);
+		width = start.width * scale;
+		height = start.height * scale;
+	}
+	const centre = {
+		x: start.x + start.width / 2,
+		y: start.y + start.height / 2
+	};
+	const across = (w, h) => turn({
+		x: -handle.x * w / 2,
+		y: -handle.y * h / 2
+	}, {
+		x: 0,
+		y: 0
+	}, rotation);
+	const from = across(start.width, start.height);
+	const to = across(width, height);
+	const next = {
+		x: centre.x + from.x - to.x,
+		y: centre.y + from.y - to.y
+	};
+	return {
+		x: next.x - width / 2,
+		y: next.y - height / 2,
+		width,
+		height
+	};
+}
+/**
+* Follows a pointer from a handle until it lets go: `move` on each step,
+* `end` when let go, `cancel` on Escape or when the pointer is lost.
+* Returns a function that cancels it.
+*/
+function follow(event, move, end, cancel) {
+	const el = event.currentTarget;
+	el.setPointerCapture?.(event.pointerId);
+	const id = event.pointerId;
+	const stop = () => {
+		el.removeEventListener("pointermove", onMove);
+		el.removeEventListener("pointerup", onUp);
+		el.removeEventListener("pointercancel", onCancel);
+		window.removeEventListener("keydown", onKey, true);
+	};
+	const onMove = (e) => e.pointerId === id && move(e);
+	const onUp = (e) => {
+		if (e.pointerId !== id) return;
+		stop();
+		end(e);
+	};
+	const onCancel = (e) => {
+		if (e.pointerId !== id) return;
+		stop();
+		cancel();
+	};
+	const onKey = (e) => {
+		if (e.key !== "Escape") return;
+		e.preventDefault();
+		e.stopPropagation();
+		stop();
+		cancel();
+	};
+	el.addEventListener("pointermove", onMove);
+	el.addEventListener("pointerup", onUp);
+	el.addEventListener("pointercancel", onCancel);
+	window.addEventListener("keydown", onKey, true);
+	return () => {
+		stop();
+		cancel();
+	};
+}
+/**
+* The turn and corner handles of a board node. While a handle is dragged
+* the node is only shown changed, through `previewNode`, so its frame,
+* handles, ports and edges all follow; the document changes once, when it
+* is let go. `turning` and `sizing` say what is being dragged to.
+*/
+function useTransformHandles(ctx, node, rotation, min) {
+	const turning = ref(null);
+	const sizing = ref(null);
+	let abort = null;
+	onBeforeUnmount(() => abort?.());
+	let held = null;
+	const show = (patch) => {
+		if (held) ctx.previewNode(held, patch);
+		if (!patch) held = null;
+	};
+	const rectOf = () => {
+		return ctx.getNodeRect(node.value.id) ?? {
+			x: node.value.x,
+			y: node.value.y,
+			width: 0,
+			height: 0
+		};
+	};
+	function startTurn(event) {
+		if (ctx.readonly.value || node.value.locked || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const rect = rectOf();
+		const centre = {
+			x: rect.x + rect.width / 2,
+			y: rect.y + rect.height / 2
+		};
+		const data = node.value.data;
+		const before = rotation.value;
+		held = node.value.id;
+		abort = follow(event, (e) => {
+			const p = ctx.toCanvas({
+				x: e.clientX,
+				y: e.clientY
+			});
+			const degrees = Math.atan2(p.y - centre.y, p.x - centre.x) * 180 / Math.PI - 90;
+			turning.value = snapAngle(degrees, e.shiftKey);
+			show({ data: {
+				...data,
+				rotation: turning.value || void 0
+			} });
+		}, () => {
+			const next = turning.value;
+			turning.value = null;
+			show(null);
+			if (next === null || next === before) return;
+			ctx.transact((tr) => tr.updateData(node.value.id, { rotation: next || void 0 }));
+			ctx.announce(format(ctx.messages.value.board.turned, { degrees: next }));
+		}, () => {
+			turning.value = null;
+			show(null);
+		});
+	}
+	/**
+	* Drags `handle`. `options.keepRatio` says whether a corner keeps the
+	* proportions: Shift turns it the other way. `options.widthOnly` changes
+	* only the width, for text whose height follows its lines.
+	*/
+	function startResize(event, handle, options = {}) {
+		if (ctx.readonly.value || node.value.locked || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const start = { ...rectOf() };
+		const turned = rotation.value;
+		const from = ctx.toCanvas({
+			x: event.clientX,
+			y: event.clientY
+		});
+		held = node.value.id;
+		abort = follow(event, (e) => {
+			const p = ctx.toCanvas({
+				x: e.clientX,
+				y: e.clientY
+			});
+			const delta = {
+				x: p.x - from.x,
+				y: p.y - from.y
+			};
+			const keep = !!options.keepRatio !== e.shiftKey;
+			const along = options.widthOnly ? {
+				x: handle.x,
+				y: 0
+			} : handle;
+			const next = resizeBox(start, turned, along, delta, min, keep);
+			sizing.value = next;
+			show(options.widthOnly ? {
+				...next,
+				height: void 0
+			} : next);
+		}, () => {
+			const next = sizing.value;
+			sizing.value = null;
+			show(null);
+			if (!next) return;
+			const patch = {
+				x: Math.round(next.x),
+				y: Math.round(next.y),
+				width: Math.round(next.width)
+			};
+			patch.height = options.widthOnly ? void 0 : Math.round(next.height);
+			ctx.transact((tr) => tr.updateNode(node.value.id, patch));
+		}, () => {
+			sizing.value = null;
+			show(null);
+		});
+	}
+	return {
+		turning,
+		sizing,
+		startTurn,
+		startResize
+	};
+}
+export { RESIZE_HANDLES, normalizeAngle, resizeBox, snapAngle, useTransformHandles };
+
+//# sourceMappingURL=transform.js.map

package/dist/whiteboard/transform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.js","names":[],"sources":["../../src/whiteboard/transform.ts"],"sourcesContent":["import { onBeforeUnmount, ref, type Ref } from 'vue'\nimport type { FlowEditorContext, FlowNodePreview } from '../context'\nimport type { FlowNode, Point } from '../core/model'\nimport { format } from '../locale'\nimport { turn } from '../core/geometry'\n\n/** Degrees in `[0, 360)`, rounded to a whole degree. */\nexport const normalizeAngle = (degrees: number) => ((Math.round(degrees) % 360) + 360) % 360\n\n/** Where a turn lands: a multiple of 15° with Shift; near a right angle, the right angle. */\nexport function snapAngle(degrees: number, shift: boolean) {\n  if (shift) return normalizeAngle(Math.round(degrees / 15) * 15)\n  const right = Math.round(degrees / 90) * 90\n  return normalizeAngle(Math.abs(degrees - right) < 4 ? right : degrees)\n}\n\n/** A resize handle: the side or corner it sits on, `-1`, `0` or `1` along each axis. */\nexport interface ResizeHandle {\n  x: -1 | 0 | 1\n  y: -1 | 0 | 1\n}\n\n/** The eight handles, corners first. */\nexport const RESIZE_HANDLES: readonly ResizeHandle[] = [\n  { x: -1, y: -1 },\n  { x: 1, y: -1 },\n  { x: 1, y: 1 },\n  { x: -1, y: 1 },\n  { x: 0, y: -1 },\n  { x: 1, y: 0 },\n  { x: 0, y: 1 },\n  { x: -1, y: 0 },\n]\n\n/**\n * The box a node gets when `handle` is dragged by `delta` (canvas units),\n * turned by `rotation` or not: it grows along the node's own axes, and the\n * corner or side across from the handle stays where it is. With `keepRatio`\n * a corner keeps the box's proportions.\n */\nexport function resizeBox(\n  start: { x: number; y: number; width: number; height: number },\n  rotation: number,\n  handle: ResizeHandle,\n  delta: Point,\n  min: { width: number; height: number },\n  keepRatio = false,\n) {\n  const local = turn(delta, { x: 0, y: 0 }, -rotation)\n  let width = handle.x ? Math.max(min.width, start.width + handle.x * local.x) : start.width\n  let height = handle.y ? Math.max(min.height, start.height + handle.y * local.y) : start.height\n  if (keepRatio && handle.x && handle.y && start.width && start.height) {\n    // the pointer taken onto the box's diagonal, so the corner stays under\n    // it; no smaller than the least size\n    const w = start.width + handle.x * local.x\n    const h = start.height + handle.y * local.y\n    const along = (w * start.width + h * start.height) / (start.width ** 2 + start.height ** 2)\n    const scale = Math.max(along, min.width / start.width, min.height / start.height)\n    width = start.width * scale\n    height = start.height * scale\n  }\n  const centre = { x: start.x + start.width / 2, y: start.y + start.height / 2 }\n  // the point across from the handle, on screen, stays put\n  const across = (w: number, h: number) =>\n    turn({ x: (-handle.x * w) / 2, y: (-handle.y * h) / 2 }, { x: 0, y: 0 }, rotation)\n  const from = across(start.width, start.height)\n  const to = across(width, height)\n  const next = { x: centre.x + from.x - to.x, y: centre.y + from.y - to.y }\n  return { x: next.x - width / 2, y: next.y - height / 2, width, height }\n}\n\ntype Drag = (event: PointerEvent) => void\n\n/**\n * Follows a pointer from a handle until it lets go: `move` on each step,\n * `end` when let go, `cancel` on Escape or when the pointer is lost.\n * Returns a function that cancels it.\n */\nfunction follow(event: PointerEvent, move: Drag, end: Drag, cancel: () => void) {\n  const el = event.currentTarget as HTMLElement\n  el.setPointerCapture?.(event.pointerId)\n  const id = event.pointerId\n  const stop = () => {\n    el.removeEventListener('pointermove', onMove)\n    el.removeEventListener('pointerup', onUp)\n    el.removeEventListener('pointercancel', onCancel)\n    window.removeEventListener('keydown', onKey, true)\n  }\n  const onMove = (e: PointerEvent) => e.pointerId === id && move(e)\n  const onUp = (e: PointerEvent) => {\n    if (e.pointerId !== id) return\n    stop()\n    end(e)\n  }\n  const onCancel = (e: PointerEvent) => {\n    if (e.pointerId !== id) return\n    stop()\n    cancel()\n  }\n  const onKey = (e: KeyboardEvent) => {\n    if (e.key !== 'Escape') return\n    e.preventDefault()\n    e.stopPropagation()\n    stop()\n    cancel()\n  }\n  el.addEventListener('pointermove', onMove)\n  el.addEventListener('pointerup', onUp)\n  el.addEventListener('pointercancel', onCancel)\n  window.addEventListener('keydown', onKey, true)\n  return () => {\n    stop()\n    cancel()\n  }\n}\n\n/**\n * The turn and corner handles of a board node. While a handle is dragged\n * the node is only shown changed, through `previewNode`, so its frame,\n * handles, ports and edges all follow; the document changes once, when it\n * is let go. `turning` and `sizing` say what is being dragged to.\n */\nexport function useTransformHandles(\n  ctx: FlowEditorContext,\n  node: Ref<FlowNode>,\n  rotation: Ref<number>,\n  min: { width: number; height: number },\n) {\n  const turning = ref<number | null>(null)\n  const sizing = ref<{ x: number; y: number; width: number; height: number } | null>(null)\n  let abort: (() => void) | null = null\n  onBeforeUnmount(() => abort?.())\n  // the id held when the drag began, in case the node is swapped meanwhile\n  let held: string | null = null\n  const show = (patch: FlowNodePreview | null) => {\n    if (held) ctx.previewNode(held, patch)\n    if (!patch) held = null\n  }\n\n  const rectOf = () => {\n    const rect = ctx.getNodeRect(node.value.id)\n    return rect ?? { x: node.value.x, y: node.value.y, width: 0, height: 0 }\n  }\n\n  function startTurn(event: PointerEvent) {\n    if (ctx.readonly.value || node.value.locked || event.button !== 0) return\n    event.preventDefault()\n    event.stopPropagation()\n    const rect = rectOf()\n    const centre = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }\n    // what it is turned to now: once dragging, the node shows the new turn\n    const data = node.value.data\n    const before = rotation.value\n    held = node.value.id\n    abort = follow(\n      event,\n      (e) => {\n        const p = ctx.toCanvas({ x: e.clientX, y: e.clientY })\n        // the handle sits below the centre: straight down is 0°\n        const degrees = (Math.atan2(p.y - centre.y, p.x - centre.x) * 180) / Math.PI - 90\n        turning.value = snapAngle(degrees, e.shiftKey)\n        show({ data: { ...data, rotation: turning.value || undefined } })\n      },\n      () => {\n        const next = turning.value\n        turning.value = null\n        show(null)\n        if (next === null || next === before) return\n        ctx.transact((tr) => tr.updateData(node.value.id, { rotation: next || undefined }))\n        ctx.announce(format(ctx.messages.value.board.turned, { degrees: next }))\n      },\n      () => {\n        turning.value = null\n        show(null)\n      },\n    )\n  }\n\n  /**\n   * Drags `handle`. `options.keepRatio` says whether a corner keeps the\n   * proportions: Shift turns it the other way. `options.widthOnly` changes\n   * only the width, for text whose height follows its lines.\n   */\n  function startResize(\n    event: PointerEvent,\n    handle: ResizeHandle,\n    options: { keepRatio?: boolean; widthOnly?: boolean } = {},\n  ) {\n    if (ctx.readonly.value || node.value.locked || event.button !== 0) return\n    event.preventDefault()\n    event.stopPropagation()\n    const start = { ...rectOf() }\n    const turned = rotation.value\n    const from = ctx.toCanvas({ x: event.clientX, y: event.clientY })\n    held = node.value.id\n    abort = follow(\n      event,\n      (e) => {\n        const p = ctx.toCanvas({ x: e.clientX, y: e.clientY })\n        const delta = { x: p.x - from.x, y: p.y - from.y }\n        const keep = !!options.keepRatio !== e.shiftKey\n        // only the width: a corner works as its side\n        const along = options.widthOnly ? { x: handle.x, y: 0 as const } : handle\n        const next = resizeBox(start, turned, along, delta, min, keep)\n        sizing.value = next\n        // text keeps no height: it follows its lines as it widens\n        show(options.widthOnly ? { ...next, height: undefined } : next)\n      },\n      () => {\n        const next = sizing.value\n        sizing.value = null\n        show(null)\n        if (!next) return\n        const patch: Partial<FlowNode> = {\n          x: Math.round(next.x),\n          y: Math.round(next.y),\n          width: Math.round(next.width),\n        }\n        // text keeps no height: it follows its lines\n        patch.height = options.widthOnly ? undefined : Math.round(next.height)\n        ctx.transact((tr) => tr.updateNode(node.value.id, patch))\n      },\n      () => {\n        sizing.value = null\n        show(null)\n      },\n    )\n  }\n\n  return { turning, sizing, startTurn, startResize }\n}\n"],"mappings":"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"}

package/dist/whiteboard/whiteboard-toolbar.js

@@ -0,0 +1,6 @@
+import whiteboard_toolbar_vue_vue_type_script_setup_true_lang_default from "./whiteboard-toolbar.vue_vue_type_script_setup_true_lang.js";
+// src/whiteboard/whiteboard-toolbar.vue
+var whiteboard_toolbar_default = whiteboard_toolbar_vue_vue_type_script_setup_true_lang_default;
+export { whiteboard_toolbar_default as default };
+
+//# sourceMappingURL=whiteboard-toolbar.js.map

package/dist/whiteboard/whiteboard-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard-toolbar.js","names":["_sfc_main"],"sources":["../../src/whiteboard/whiteboard-toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  CircleIcon,\n  CursorIcon,\n  DiamondIcon,\n  EraserIcon,\n  HandGrabIcon,\n  HandIcon,\n  ImageIcon,\n  PencilIcon,\n  SquareIcon,\n  StickyNoteIcon,\n  TypeIcon,\n} from '@dou-ui/icons'\nimport { DouTooltip, scrollPositionOf } from 'dou-ui'\nimport { computed, onBeforeUnmount, ref, useTemplateRef, watch, type Component } from 'vue'\nimport { useFlowEditor } from '../context'\nimport { pickImages } from './image'\nimport { imageKey, whiteboardKeys, type WhiteboardTool } from './model'\nimport { boardState } from './state'\n\ndefineOptions({ name: 'DouWhiteboardToolbar' })\n\nconst ctx = useFlowEditor()\nconst state = boardState(ctx)\nconst t = computed(() => ctx.messages.value.board)\n\nconst groups: { tool: WhiteboardTool; icon: Component }[][] = [\n  [\n    { tool: 'select', icon: CursorIcon },\n    { tool: 'hand', icon: HandIcon },\n  ],\n  [\n    { tool: 'rect', icon: SquareIcon },\n    { tool: 'ellipse', icon: CircleIcon },\n    { tool: 'diamond', icon: DiamondIcon },\n  ],\n  [\n    { tool: 'sticky', icon: StickyNoteIcon },\n    { tool: 'text', icon: TypeIcon },\n  ],\n  [\n    { tool: 'pen', icon: PencilIcon },\n    { tool: 'eraser', icon: EraserIcon },\n  ],\n]\n\n/** Tools that go back to select after one use, unless kept with a double click. */\nconst once = new Set<WhiteboardTool>(['rect', 'ellipse', 'diamond', 'sticky', 'text'])\n\n// A click picks the tool for one use; a double click keeps it. Focus goes\n// back to the canvas, where the tool is used and its keys work.\nfunction pick(tool: WhiteboardTool, keep: boolean) {\n  state.tool.value = tool\n  state.locked.value = keep && once.has(tool)\n  ctx.root.value?.focus({ preventScroll: true })\n}\n\nfunction insertImage() {\n  pickImages(ctx)\n}\n\n// Too narrow for every tool: one row that scrolls sideways, faded at the\n// side with more, and the tool in hand kept in view.\nconst el = useTemplateRef<HTMLElement>('el')\nconst more = ref({ start: false, end: false })\n/** Right to left; read when the row is laid out, not on every scroll. */\nlet rtl = false\nfunction measure() {\n  const box = el.value\n  if (!box) return\n  // from the start, also right to left, and kept in range while the row bounces\n  const left = Math.abs(scrollPositionOf(box, rtl).left)\n  const rest = box.scrollWidth - box.clientWidth - left\n  more.value = { start: left > 1, end: rest > 1 }\n}\nlet observer: ResizeObserver | undefined\nwatch(\n  el,\n  (box) => {\n    observer?.disconnect()\n    if (!box || typeof ResizeObserver === 'undefined') return\n    observer = new ResizeObserver(() => {\n      rtl = getComputedStyle(box).direction === 'rtl'\n      measure()\n    })\n    observer.observe(box)\n  },\n  { flush: 'post' },\n)\nonBeforeUnmount(() => observer?.disconnect())\nwatch(\n  () => state.tool.value,\n  () => {\n    const box = el.value\n    const button = box?.querySelector<HTMLElement>('[aria-pressed=\"true\"]')\n    if (!box || !button || box.scrollWidth <= box.clientWidth) return\n    const start = button.offsetLeft - 24\n    const end = button.offsetLeft + button.offsetWidth + 24 - box.clientWidth\n    if (box.scrollLeft > start) box.scrollLeft = start\n    else if (box.scrollLeft < end) box.scrollLeft = end\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    v-if=\"!ctx.readonly.value\"\n    class=\"dou-whiteboard-toolbar\"\n    data-flow-overlay\n    role=\"toolbar\"\n    :aria-label=\"t.tools\"\n  >\n    <div\n      ref=\"el\"\n      class=\"dou-whiteboard-toolbar__scroll\"\n      :class=\"{ 'has-more-start': more.start, 'has-more-end': more.end }\"\n      @scroll.passive=\"measure\"\n    >\n      <template v-for=\"(group, i) in groups\" :key=\"i\">\n        <span v-if=\"i\" class=\"dou-whiteboard-toolbar__divider\" />\n        <DouTooltip\n          v-for=\"item in group\"\n          :key=\"item.tool\"\n          :content=\"t[item.tool]\"\n          :shortcut=\"whiteboardKeys[item.tool]\"\n          placement=\"bottom\"\n        >\n          <button\n            type=\"button\"\n            class=\"dou-whiteboard-toolbar__button\"\n            :class=\"{ 'is-locked': state.tool.value === item.tool && state.locked.value }\"\n            :aria-pressed=\"state.tool.value === item.tool\"\n            :aria-label=\"t[item.tool]\"\n            @click=\"pick(item.tool, false)\"\n            @dblclick=\"pick(item.tool, true)\"\n          >\n            <component\n              :is=\"item.tool === 'hand' && state.panning.value ? HandGrabIcon : item.icon\"\n            />\n          </button>\n        </DouTooltip>\n      </template>\n      <DouTooltip :content=\"t.image\" :shortcut=\"imageKey\" placement=\"bottom\">\n        <button\n          type=\"button\"\n          class=\"dou-whiteboard-toolbar__button\"\n          :class=\"{ 'is-busy': state.uploading.value > 0 }\"\n          :aria-label=\"t.image\"\n          :aria-busy=\"state.uploading.value > 0 || undefined\"\n          @click=\"insertImage\"\n        >\n          <ImageIcon />\n        </button>\n      </DouTooltip>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/whiteboard/whiteboard-toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,171 @@
+import { useFlowEditor } from "../context.js";
+import { whiteboardKeys } from "./model.js";
+import { boardState } from "./state.js";
+import { pickImages } from "./image.js";
+import { DouTooltip, scrollPositionOf } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, resolveDynamicComponent, unref, useTemplateRef, watch, withCtx } from "vue";
+import { CircleIcon, CursorIcon, DiamondIcon, EraserIcon, HandGrabIcon, HandIcon, ImageIcon, PencilIcon, SquareIcon, StickyNoteIcon, TypeIcon } from "@dou-ui/icons";
+// src/whiteboard/whiteboard-toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-whiteboard-toolbar__divider"
+};
+var _hoisted_3 = [
+	"aria-pressed",
+	"aria-label",
+	"onClick",
+	"onDblclick"
+];
+var _hoisted_4 = ["aria-label", "aria-busy"];
+var whiteboard_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouWhiteboardToolbar",
+	__name: "whiteboard-toolbar",
+	setup(__props) {
+		const ctx = useFlowEditor();
+		const state = boardState(ctx);
+		const t = computed(() => ctx.messages.value.board);
+		const groups = [
+			[{
+				tool: "select",
+				icon: CursorIcon
+			}, {
+				tool: "hand",
+				icon: HandIcon
+			}],
+			[
+				{
+					tool: "rect",
+					icon: SquareIcon
+				},
+				{
+					tool: "ellipse",
+					icon: CircleIcon
+				},
+				{
+					tool: "diamond",
+					icon: DiamondIcon
+				}
+			],
+			[{
+				tool: "sticky",
+				icon: StickyNoteIcon
+			}, {
+				tool: "text",
+				icon: TypeIcon
+			}],
+			[{
+				tool: "pen",
+				icon: PencilIcon
+			}, {
+				tool: "eraser",
+				icon: EraserIcon
+			}]
+		];
+		/** Tools that go back to select after one use, unless kept with a double click. */
+		const once = /* @__PURE__ */ new Set([
+			"rect",
+			"ellipse",
+			"diamond",
+			"sticky",
+			"text"
+		]);
+		function pick(tool, keep) {
+			state.tool.value = tool;
+			state.locked.value = keep && once.has(tool);
+			ctx.root.value?.focus({ preventScroll: true });
+		}
+		function insertImage() {
+			pickImages(ctx);
+		}
+		const el = useTemplateRef("el");
+		const more = ref({
+			start: false,
+			end: false
+		});
+		/** Right to left; read when the row is laid out, not on every scroll. */
+		let rtl = false;
+		function measure() {
+			const box = el.value;
+			if (!box) return;
+			const left = Math.abs(scrollPositionOf(box, rtl).left);
+			const rest = box.scrollWidth - box.clientWidth - left;
+			more.value = {
+				start: left > 1,
+				end: rest > 1
+			};
+		}
+		let observer;
+		watch(el, (box) => {
+			observer?.disconnect();
+			if (!box || typeof ResizeObserver === "undefined") return;
+			observer = new ResizeObserver(() => {
+				rtl = getComputedStyle(box).direction === "rtl";
+				measure();
+			});
+			observer.observe(box);
+		}, { flush: "post" });
+		onBeforeUnmount(() => observer?.disconnect());
+		watch(() => state.tool.value, () => {
+			const box = el.value;
+			const button = box?.querySelector("[aria-pressed=\"true\"]");
+			if (!box || !button || box.scrollWidth <= box.clientWidth) return;
+			const start = button.offsetLeft - 24;
+			const end = button.offsetLeft + button.offsetWidth + 24 - box.clientWidth;
+			if (box.scrollLeft > start) box.scrollLeft = start;
+			else if (box.scrollLeft < end) box.scrollLeft = end;
+		}, { flush: "post" });
+		return (_ctx, _cache) => {
+			return !unref(ctx).readonly.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "dou-whiteboard-toolbar",
+				"data-flow-overlay": "",
+				role: "toolbar",
+				"aria-label": t.value.tools
+			}, [createElementVNode("div", {
+				ref_key: "el",
+				ref: el,
+				class: normalizeClass(["dou-whiteboard-toolbar__scroll", {
+					"has-more-start": more.value.start,
+					"has-more-end": more.value.end
+				}]),
+				onScrollPassive: measure
+			}, [(openBlock(), createElementBlock(Fragment, null, renderList(groups, (group, i) => {
+				return openBlock(), createElementBlock(Fragment, { key: i }, [i ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
+					return openBlock(), createBlock(unref(DouTooltip), {
+						key: item.tool,
+						content: t.value[item.tool],
+						shortcut: unref(whiteboardKeys)[item.tool],
+						placement: "bottom"
+					}, {
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(["dou-whiteboard-toolbar__button", { "is-locked": unref(state).tool.value === item.tool && unref(state).locked.value }]),
+							"aria-pressed": unref(state).tool.value === item.tool,
+							"aria-label": t.value[item.tool],
+							onClick: ($event) => pick(item.tool, false),
+							onDblclick: ($event) => pick(item.tool, true)
+						}, [(openBlock(), createBlock(resolveDynamicComponent(item.tool === "hand" && unref(state).panning.value ? unref(HandGrabIcon) : item.icon)))], 42, _hoisted_3)]),
+						_: 2
+					}, 1032, ["content", "shortcut"]);
+				}), 128))], 64);
+			}), 64)), createVNode(unref(DouTooltip), {
+				content: t.value.image,
+				shortcut: unref("i"),
+				placement: "bottom"
+			}, {
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(["dou-whiteboard-toolbar__button", { "is-busy": unref(state).uploading.value > 0 }]),
+					"aria-label": t.value.image,
+					"aria-busy": unref(state).uploading.value > 0 || void 0,
+					onClick: insertImage
+				}, [createVNode(unref(ImageIcon))], 10, _hoisted_4)]),
+				_: 1
+			}, 8, ["content", "shortcut"])], 34)], 8, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { whiteboard_toolbar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=whiteboard-toolbar.vue_vue_type_script_setup_true_lang.js.map

package/dist/whiteboard/whiteboard-toolbar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard-toolbar.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_Fragment","_renderList","_createCommentVNode","_createBlock","_withCtx","_resolveDynamicComponent","_createVNode"],"sources":["../../src/whiteboard/whiteboard-toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  CircleIcon,\n  CursorIcon,\n  DiamondIcon,\n  EraserIcon,\n  HandGrabIcon,\n  HandIcon,\n  ImageIcon,\n  PencilIcon,\n  SquareIcon,\n  StickyNoteIcon,\n  TypeIcon,\n} from '@dou-ui/icons'\nimport { DouTooltip, scrollPositionOf } from 'dou-ui'\nimport { computed, onBeforeUnmount, ref, useTemplateRef, watch, type Component } from 'vue'\nimport { useFlowEditor } from '../context'\nimport { pickImages } from './image'\nimport { imageKey, whiteboardKeys, type WhiteboardTool } from './model'\nimport { boardState } from './state'\n\ndefineOptions({ name: 'DouWhiteboardToolbar' })\n\nconst ctx = useFlowEditor()\nconst state = boardState(ctx)\nconst t = computed(() => ctx.messages.value.board)\n\nconst groups: { tool: WhiteboardTool; icon: Component }[][] = [\n  [\n    { tool: 'select', icon: CursorIcon },\n    { tool: 'hand', icon: HandIcon },\n  ],\n  [\n    { tool: 'rect', icon: SquareIcon },\n    { tool: 'ellipse', icon: CircleIcon },\n    { tool: 'diamond', icon: DiamondIcon },\n  ],\n  [\n    { tool: 'sticky', icon: StickyNoteIcon },\n    { tool: 'text', icon: TypeIcon },\n  ],\n  [\n    { tool: 'pen', icon: PencilIcon },\n    { tool: 'eraser', icon: EraserIcon },\n  ],\n]\n\n/** Tools that go back to select after one use, unless kept with a double click. */\nconst once = new Set<WhiteboardTool>(['rect', 'ellipse', 'diamond', 'sticky', 'text'])\n\n// A click picks the tool for one use; a double click keeps it. Focus goes\n// back to the canvas, where the tool is used and its keys work.\nfunction pick(tool: WhiteboardTool, keep: boolean) {\n  state.tool.value = tool\n  state.locked.value = keep && once.has(tool)\n  ctx.root.value?.focus({ preventScroll: true })\n}\n\nfunction insertImage() {\n  pickImages(ctx)\n}\n\n// Too narrow for every tool: one row that scrolls sideways, faded at the\n// side with more, and the tool in hand kept in view.\nconst el = useTemplateRef<HTMLElement>('el')\nconst more = ref({ start: false, end: false })\n/** Right to left; read when the row is laid out, not on every scroll. */\nlet rtl = false\nfunction measure() {\n  const box = el.value\n  if (!box) return\n  // from the start, also right to left, and kept in range while the row bounces\n  const left = Math.abs(scrollPositionOf(box, rtl).left)\n  const rest = box.scrollWidth - box.clientWidth - left\n  more.value = { start: left > 1, end: rest > 1 }\n}\nlet observer: ResizeObserver | undefined\nwatch(\n  el,\n  (box) => {\n    observer?.disconnect()\n    if (!box || typeof ResizeObserver === 'undefined') return\n    observer = new ResizeObserver(() => {\n      rtl = getComputedStyle(box).direction === 'rtl'\n      measure()\n    })\n    observer.observe(box)\n  },\n  { flush: 'post' },\n)\nonBeforeUnmount(() => observer?.disconnect())\nwatch(\n  () => state.tool.value,\n  () => {\n    const box = el.value\n    const button = box?.querySelector<HTMLElement>('[aria-pressed=\"true\"]')\n    if (!box || !button || box.scrollWidth <= box.clientWidth) return\n    const start = button.offsetLeft - 24\n    const end = button.offsetLeft + button.offsetWidth + 24 - box.clientWidth\n    if (box.scrollLeft > start) box.scrollLeft = start\n    else if (box.scrollLeft < end) box.scrollLeft = end\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    v-if=\"!ctx.readonly.value\"\n    class=\"dou-whiteboard-toolbar\"\n    data-flow-overlay\n    role=\"toolbar\"\n    :aria-label=\"t.tools\"\n  >\n    <div\n      ref=\"el\"\n      class=\"dou-whiteboard-toolbar__scroll\"\n      :class=\"{ 'has-more-start': more.start, 'has-more-end': more.end }\"\n      @scroll.passive=\"measure\"\n    >\n      <template v-for=\"(group, i) in groups\" :key=\"i\">\n        <span v-if=\"i\" class=\"dou-whiteboard-toolbar__divider\" />\n        <DouTooltip\n          v-for=\"item in group\"\n          :key=\"item.tool\"\n          :content=\"t[item.tool]\"\n          :shortcut=\"whiteboardKeys[item.tool]\"\n          placement=\"bottom\"\n        >\n          <button\n            type=\"button\"\n            class=\"dou-whiteboard-toolbar__button\"\n            :class=\"{ 'is-locked': state.tool.value === item.tool && state.locked.value }\"\n            :aria-pressed=\"state.tool.value === item.tool\"\n            :aria-label=\"t[item.tool]\"\n            @click=\"pick(item.tool, false)\"\n            @dblclick=\"pick(item.tool, true)\"\n          >\n            <component\n              :is=\"item.tool === 'hand' && state.panning.value ? HandGrabIcon : item.icon\"\n            />\n          </button>\n        </DouTooltip>\n      </template>\n      <DouTooltip :content=\"t.image\" :shortcut=\"imageKey\" placement=\"bottom\">\n        <button\n          type=\"button\"\n          class=\"dou-whiteboard-toolbar__button\"\n          :class=\"{ 'is-busy': state.uploading.value > 0 }\"\n          :aria-label=\"t.image\"\n          :aria-busy=\"state.uploading.value > 0 || undefined\"\n          @click=\"insertImage\"\n        >\n          <ImageIcon />\n        </button>\n      </DouTooltip>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,MAAM,cAAc;EAC1B,MAAM,QAAQ,WAAW,GAAG;EAC5B,MAAM,IAAI,eAAe,IAAI,SAAS,MAAM,KAAK;EAEjD,MAAM,SAAwD;GAC5D,CACE;IAAE,MAAM;IAAU,MAAM;GAAW,GACnC;IAAE,MAAM;IAAQ,MAAM;GAAS,CACjC;GACA;IACE;KAAE,MAAM;KAAQ,MAAM;IAAW;IACjC;KAAE,MAAM;KAAW,MAAM;IAAW;IACpC;KAAE,MAAM;KAAW,MAAM;IAAY;GACvC;GACA,CACE;IAAE,MAAM;IAAU,MAAM;GAAe,GACvC;IAAE,MAAM;IAAQ,MAAM;GAAS,CACjC;GACA,CACE;IAAE,MAAM;IAAO,MAAM;GAAW,GAChC;IAAE,MAAM;IAAU,MAAM;GAAW,CACrC;EACF;;EAGA,MAAM,uBAAO,IAAI,IAAoB;GAAC;GAAQ;GAAW;GAAW;GAAU;EAAM,CAAC;EAIrF,SAAS,KAAK,MAAsB,MAAe;GACjD,MAAM,KAAK,QAAQ;GACnB,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI,IAAI;GAC1C,IAAI,KAAK,OAAO,MAAM,EAAE,eAAe,KAAK,CAAC;EAC/C;EAEA,SAAS,cAAc;GACrB,WAAW,GAAG;EAChB;EAIA,MAAM,KAAK,eAA4B,IAAI;EAC3C,MAAM,OAAO,IAAI;GAAE,OAAO;GAAO,KAAK;EAAM,CAAC;;EAE7C,IAAI,MAAM;EACV,SAAS,UAAU;GACjB,MAAM,MAAM,GAAG;GACf,IAAI,CAAC,KAAK;GAEV,MAAM,OAAO,KAAK,IAAI,iBAAiB,KAAK,GAAG,CAAC,CAAC,IAAI;GACrD,MAAM,OAAO,IAAI,cAAc,IAAI,cAAc;GACjD,KAAK,QAAQ;IAAE,OAAO,OAAO;IAAG,KAAK,OAAO;GAAE;EAChD;EACA,IAAI;EACJ,MACE,KACC,QAAQ;GACP,UAAU,WAAW;GACrB,IAAI,CAAC,OAAO,OAAO,mBAAmB,aAAa;GACnD,WAAW,IAAI,qBAAqB;IAClC,MAAM,iBAAiB,GAAG,CAAC,CAAC,cAAc;IAC1C,QAAQ;GACV,CAAC;GACD,SAAS,QAAQ,GAAG;EACtB,GACA,EAAE,OAAO,OAAO,CAClB;EACA,sBAAsB,UAAU,WAAW,CAAC;EAC5C,YACQ,MAAM,KAAK,aACX;GACJ,MAAM,MAAM,GAAG;GACf,MAAM,SAAS,KAAK,cAA2B,yBAAuB;GACtE,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,eAAe,IAAI,aAAa;GAC3D,MAAM,QAAQ,OAAO,aAAa;GAClC,MAAM,MAAM,OAAO,aAAa,OAAO,cAAc,KAAK,IAAI;GAC9D,IAAI,IAAI,aAAa,OAAO,IAAI,aAAa;QACxC,IAAI,IAAI,aAAa,KAAK,IAAI,aAAa;EAClD,GACA,EAAE,OAAO,OAAO,CAClB;;GAKW,OAAA,CAAAA,MAAA,GAAA,CAAG,CAAC,SAAS,SADtBC,UAAA,GAAAC,mBAkDM,OAAA;;IAhDJ,OAAM;IACN,qBAAA;IACA,MAAK;IACJ,cAAY,EAAA,MAAE;G,IAEfC,mBA0CM,OAAA;IAzCA,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,kCAAgC;KAAA,kBACV,KAAA,MAAK;KAAK,gBAAkB,KAAA,MAAK;IAAG,CAAA,CAAA;IAC/C,iBAAA;G,KAEjBH,UAAA,GAAAC,mBAuBWG,UAAA,MAAAC,WAvBoB,SAAb,OAAO,MAAC;IAAmB,OAAAL,UAAA,GAAAC,mBAAAG,UAAA,EAAA,KAAA,EAAC,GAAA,CAChC,KAAZJ,UAAA,GAAAC,mBAAyD,QAAzD,UAAyD,K,+BACzDD,UAAA,IAAA,GAAAC,mBAoBaG,UAAA,MAAAC,WAnBI,QAAR,SAAI;KADb,OAAAL,UAAA,GAAAO,YAoBaR,MAAA,UAAA,GAAA;MAlBV,KAAK,KAAK;MACV,SAAS,EAAA,MAAE,KAAK;MAChB,UAAUA,MAAA,cAAA,CAAc,CAAC,KAAK;MAC/B,WAAU;;MAEV,SAAAS,cAYS,CAZTN,mBAYS,UAAA;OAXP,MAAK;OACL,OAAKC,eAAA,CAAC,kCAAgC,EAAA,aACfJ,MAAA,KAAA,CAAK,CAAC,KAAK,UAAU,KAAK,QAAQA,MAAA,KAAA,CAAK,CAAC,OAAO,MAAK,CAAA,CAAA;OAC1E,gBAAcA,MAAA,KAAA,CAAK,CAAC,KAAK,UAAU,KAAK;OACxC,cAAY,EAAA,MAAE,KAAK;OACnB,UAAK,WAAE,KAAK,KAAK,MAAI,KAAA;OACrB,aAAQ,WAAE,KAAK,KAAK,MAAI,IAAA;M,KAEzBC,UAAA,GAAAO,YAEEE,wBADK,KAAK,SAAI,UAAeV,MAAA,KAAA,CAAK,CAAC,QAAQ,QAAQA,MAAA,YAAA,IAAe,KAAK,IAAI,CAAA,E;;;;G,UAKnFW,YAWaX,MAAA,UAAA,GAAA;IAXA,SAAS,EAAA,MAAE;IAAQ,UAAUA,MAAAA,GAAA;IAAU,WAAU;;IAC5D,SAAAS,cASS,CATTN,mBASS,UAAA;KARP,MAAK;KACL,OAAKC,eAAA,CAAC,kCAAgC,EAAA,WACjBJ,MAAA,KAAA,CAAK,CAAC,UAAU,QAAK,EAAA,CAAA,CAAA;KACzC,cAAY,EAAA,MAAE;KACd,aAAWA,MAAA,KAAA,CAAK,CAAC,UAAU,QAAK,KAAQ,KAAA;KACxC,SAAO;I,IAERW,YAAaX,MAAA,SAAA,CAAA,C"}

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "@dou-ui/flow",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-alpha.0",
+  "description": "DouUI 的流程编辑器：在无限画布上拖动节点、连接端口",
+  "keywords": [
+    "vue",
+    "vue3",
+    "flow",
+    "node-editor",
+    "workflow",
+    "canvas"
+  ],
+  "license": "MIT",
+  "author": "daidr <daidr@daidr.me>",
+  "homepage": "https://github.com/daidr/dou-ui#readme",
+  "bugs": "https://github.com/daidr/dou-ui/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daidr/dou-ui.git",
+    "directory": "packages/flow"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "./dist/style.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./collaboration": {
+      "types": "./dist/types/collaboration/index.d.ts",
+      "import": "./dist/collaboration/index.js"
+    },
+    "./whiteboard": {
+      "types": "./dist/types/whiteboard/index.d.ts",
+      "import": "./dist/whiteboard/index.js"
+    },
+    "./style": {
+      "types": "./dist/style.d.ts",
+      "import": "./dist/style.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json && bun scripts/build-style.ts"
+  },
+  "peerDependencies": {
+    "dou-ui": "0.1.0-alpha.0",
+    "vue": "^3.5.0",
+    "yjs": "^13.6.0"
+  },
+  "peerDependenciesMeta": {
+    "yjs": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@dou-ui/icons": "0.1.0-alpha.0"
+  },
+  "devDependencies": {
+    "y-protocols": "^1.0.7",
+    "yjs": "^13.6.33"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}