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

package/dist/components/flow-minimap.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,238 @@
+import { useFlowEditor } from "../context.js";
+import { boundsOf } from "../core/geometry.js";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, watch } from "vue";
+// src/components/flow-minimap.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = [
+	"width",
+	"height",
+	"viewBox"
+];
+var _hoisted_3 = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"rx"
+];
+var _hoisted_4 = ["d"];
+var _hoisted_5 = [
+	"x",
+	"y",
+	"width",
+	"height"
+];
+var LIFT_GAP = 8;
+/**
+* On a narrow editor the map would cover a panel in the same corner row,
+* e.g. the controls: then it sits above (or below) them instead.
+*/
+var flow_minimap_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFlowMinimap",
+	__name: "flow-minimap",
+	props: {
+		placement: { default: "bottom-right" },
+		width: { default: 200 },
+		height: { default: 136 }
+	},
+	setup(__props) {
+		const props = __props;
+		const flow = useFlowEditor();
+		const { messages } = flow;
+		/** The part of the canvas on screen, in canvas coordinates. */
+		const visible = computed(() => {
+			const { x, y, zoom } = flow.viewport.value;
+			const { width, height } = flow.size.value;
+			return {
+				x: -x / zoom,
+				y: -y / zoom,
+				width: width / zoom,
+				height: height / zoom
+			};
+		});
+		const rects = computed(() => flow.doc.value.nodes.flatMap((node) => {
+			const rect = flow.getNodeRect(node.id);
+			return rect ? [{
+				id: node.id,
+				rect,
+				selected: flow.selectedNodes.value.has(node.id)
+			}] : [];
+		}));
+		/** What the map shows: every node and the view, with some room around. */
+		const fitted = computed(() => {
+			const all = boundsOf([...rects.value.map((r) => r.rect), visible.value]);
+			const pad = Math.max(all.width, all.height) * .05;
+			return {
+				x: all.x - pad,
+				y: all.y - pad,
+				width: all.width + pad * 2,
+				height: all.height + pad * 2
+			};
+		});
+		/**
+		* Held still while the view is dragged: a map that grew to take in the view
+		* as it went would slide away under the pointer, sending the view further
+		* each time.
+		*/
+		const held = ref(null);
+		const world = computed(() => held.value ?? fitted.value);
+		/** Canvas units per map pixel; the map keeps the canvas's proportions. */
+		const scale = computed(() => Math.max(world.value.width / props.width, world.value.height / props.height, 1e-6));
+		const viewBox = computed(() => {
+			const w = props.width * scale.value;
+			const h = props.height * scale.value;
+			const { x, y, width, height } = world.value;
+			return `${x - (w - width) / 2} ${y - (h - height) / 2} ${w} ${h}`;
+		});
+		/** Everything outside the view, shaded: the map's box with the view cut out. */
+		const shade = computed(() => {
+			const [x, y, w, h] = viewBox.value.split(" ").map(Number);
+			const v = visible.value;
+			return `M${x} ${y}h${w}v${h}h${-w}Z M${v.x} ${v.y}v${v.height}h${v.width}v${-v.height}Z`;
+		});
+		const svg = ref();
+		const dragging = ref(false);
+		/** How far along a side `at` is, from 0 to 1, staying on it when past its ends. */
+		const along = (at, start, length) => length ? Math.min(1, Math.max(0, (at - start) / length)) : .5;
+		/** The point of the map under the pointer; past its edges, the nearest point on them. */
+		function toWorld(event) {
+			const box = svg.value.getBoundingClientRect();
+			const [x, y, w, h] = viewBox.value.split(" ").map(Number);
+			return {
+				x: x + along(event.clientX, box.left, box.width) * w,
+				y: y + along(event.clientY, box.top, box.height) * h
+			};
+		}
+		/** Centres the view on a point of the map, as far as the nodes allow. */
+		function moveTo(event) {
+			const p = toWorld(event);
+			const { zoom } = flow.viewport.value;
+			const { width, height } = flow.size.value;
+			flow.setViewport({
+				x: width / 2 - p.x * zoom,
+				y: height / 2 - p.y * zoom,
+				zoom
+			});
+		}
+		function onPointerDown(event) {
+			if (event.button !== 0) return;
+			event.stopPropagation();
+			dragging.value = true;
+			held.value = fitted.value;
+			try {
+				svg.value.setPointerCapture(event.pointerId);
+			} catch {}
+			moveTo(event);
+		}
+		function onPointerMove(event) {
+			if (dragging.value) moveTo(event);
+		}
+		function onPointerUp() {
+			dragging.value = false;
+			held.value = null;
+		}
+		const el = ref();
+		/** How far the map moves away from its edge to clear the other panels there, in px. */
+		const lift = ref(0);
+		function place() {
+			const self = el.value;
+			const root = flow.root.value;
+			if (!self || !root) return;
+			const upper = props.placement.startsWith("top");
+			const box = self.getBoundingClientRect();
+			const top = box.top + (upper ? -lift.value : lift.value);
+			const bottom = top + box.height;
+			let next = 0;
+			for (const panel of root.querySelectorAll(".dou-flow-editor__panels > *")) {
+				if (panel === self || panel.classList.contains("dou-flow-minimap")) continue;
+				const rect = panel.getBoundingClientRect();
+				if (!rect.width || !rect.height) continue;
+				if (rect.right <= box.left || rect.left >= box.right) continue;
+				if (rect.bottom <= top || rect.top >= bottom) continue;
+				next = Math.max(next, upper ? rect.bottom - top + LIFT_GAP : bottom - rect.top + LIFT_GAP);
+			}
+			lift.value = next;
+		}
+		let resizes;
+		let changes;
+		function watchPanels() {
+			const panels = el.value?.parentElement;
+			if (!panels) return;
+			resizes?.disconnect();
+			if (typeof ResizeObserver !== "undefined") {
+				resizes = new ResizeObserver(() => place());
+				for (const panel of panels.children) if (panel !== el.value) resizes.observe(panel);
+			}
+			place();
+		}
+		onMounted(() => {
+			nextTick(watchPanels);
+			const panels = el.value?.parentElement;
+			if (panels && typeof MutationObserver !== "undefined") {
+				changes = new MutationObserver(watchPanels);
+				changes.observe(panels, { childList: true });
+			}
+		});
+		onBeforeUnmount(() => {
+			resizes?.disconnect();
+			changes?.disconnect();
+		});
+		watch(() => [
+			flow.size.value.width,
+			flow.size.value.height,
+			props.width,
+			props.height,
+			props.placement
+		], () => nextTick(place));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				class: normalizeClass(["dou-flow-minimap", [`is-${__props.placement}`, { "is-dragging": dragging.value }]]),
+				"data-flow-overlay": "",
+				style: normalizeStyle(lift.value ? { translate: `0 ${__props.placement.startsWith("top") ? lift.value : -lift.value}px` } : void 0),
+				role: "img",
+				"aria-label": unref(messages).minimap
+			}, [(openBlock(), createElementBlock("svg", {
+				ref_key: "svg",
+				ref: svg,
+				width: __props.width,
+				height: __props.height,
+				viewBox: viewBox.value,
+				preserveAspectRatio: "xMidYMid meet",
+				"aria-hidden": "true",
+				onPointerdown: onPointerDown,
+				onPointermove: onPointerMove,
+				onPointerup: onPointerUp,
+				onPointercancel: onPointerUp
+			}, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(rects.value, (item) => {
+					return openBlock(), createElementBlock("rect", {
+						key: item.id,
+						class: normalizeClass(["dou-flow-minimap__node", { "is-selected": item.selected }]),
+						x: item.rect.x,
+						y: item.rect.y,
+						width: item.rect.width,
+						height: item.rect.height,
+						rx: 2 * scale.value
+					}, null, 10, _hoisted_3);
+				}), 128)),
+				createElementVNode("path", {
+					class: "dou-flow-minimap__shade",
+					d: shade.value,
+					"fill-rule": "evenodd"
+				}, null, 8, _hoisted_4),
+				createElementVNode("rect", {
+					class: "dou-flow-minimap__view",
+					x: visible.value.x,
+					y: visible.value.y,
+					width: visible.value.width,
+					height: visible.value.height
+				}, null, 8, _hoisted_5)
+			], 40, _hoisted_2))], 14, _hoisted_1);
+		};
+	}
+});
+export { flow_minimap_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=flow-minimap.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/flow-minimap.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-minimap.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_unref","_Fragment","_renderList","_createElementVNode"],"sources":["../../src/components/flow-minimap.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { useFlowEditor, type FlowMinimapProps } from '../context'\nimport { boundsOf } from '../core/geometry'\nimport type { Point, Rect } from '../core/model'\n\ndefineOptions({ name: 'DouFlowMinimap' })\n\nconst props = withDefaults(defineProps<FlowMinimapProps>(), {\n  placement: 'bottom-right',\n  width: 200,\n  height: 136,\n})\n\nconst flow = useFlowEditor()\nconst { messages } = flow\n\n/** The part of the canvas on screen, in canvas coordinates. */\nconst visible = computed<Rect>(() => {\n  const { x, y, zoom } = flow.viewport.value\n  const { width, height } = flow.size.value\n  return { x: -x / zoom, y: -y / zoom, width: width / zoom, height: height / zoom }\n})\n\nconst rects = computed(() =>\n  flow.doc.value.nodes.flatMap((node) => {\n    const rect = flow.getNodeRect(node.id)\n    return rect ? [{ id: node.id, rect, selected: flow.selectedNodes.value.has(node.id) }] : []\n  }),\n)\n\n/** What the map shows: every node and the view, with some room around. */\nconst fitted = computed<Rect>(() => {\n  const all = boundsOf([...rects.value.map((r) => r.rect), visible.value])!\n  const pad = Math.max(all.width, all.height) * 0.05\n  return {\n    x: all.x - pad,\n    y: all.y - pad,\n    width: all.width + pad * 2,\n    height: all.height + pad * 2,\n  }\n})\n\n/**\n * Held still while the view is dragged: a map that grew to take in the view\n * as it went would slide away under the pointer, sending the view further\n * each time.\n */\nconst held = ref<Rect | null>(null)\nconst world = computed(() => held.value ?? fitted.value)\n\n/** Canvas units per map pixel; the map keeps the canvas's proportions. */\nconst scale = computed(() =>\n  Math.max(world.value.width / props.width, world.value.height / props.height, 1e-6),\n)\nconst viewBox = computed(() => {\n  const w = props.width * scale.value\n  const h = props.height * scale.value\n  const { x, y, width, height } = world.value\n  return `${x - (w - width) / 2} ${y - (h - height) / 2} ${w} ${h}`\n})\n\n/** Everything outside the view, shaded: the map's box with the view cut out. */\nconst shade = computed(() => {\n  const [x, y, w, h] = viewBox.value.split(' ').map(Number) as [number, number, number, number]\n  const v = visible.value\n  return `M${x} ${y}h${w}v${h}h${-w}Z M${v.x} ${v.y}v${v.height}h${v.width}v${-v.height}Z`\n})\n\nconst svg = ref<SVGSVGElement>()\nconst dragging = ref(false)\n\n/** How far along a side `at` is, from 0 to 1, staying on it when past its ends. */\nconst along = (at: number, start: number, length: number) =>\n  length ? Math.min(1, Math.max(0, (at - start) / length)) : 0.5\n\n/** The point of the map under the pointer; past its edges, the nearest point on them. */\nfunction toWorld(event: PointerEvent): Point {\n  const box = svg.value!.getBoundingClientRect()\n  const [x, y, w, h] = viewBox.value.split(' ').map(Number) as [number, number, number, number]\n  return {\n    x: x + along(event.clientX, box.left, box.width) * w,\n    y: y + along(event.clientY, box.top, box.height) * h,\n  }\n}\n\n/** Centres the view on a point of the map, as far as the nodes allow. */\nfunction moveTo(event: PointerEvent) {\n  const p = toWorld(event)\n  const { zoom } = flow.viewport.value\n  const { width, height } = flow.size.value\n  flow.setViewport({ x: width / 2 - p.x * zoom, y: height / 2 - p.y * zoom, zoom })\n}\n\nfunction onPointerDown(event: PointerEvent) {\n  if (event.button !== 0) return\n  event.stopPropagation()\n  dragging.value = true\n  // The map as it is now: the press lands where it was seen.\n  held.value = fitted.value\n  try {\n    svg.value!.setPointerCapture(event.pointerId)\n  } catch {\n    // Synthetic events have no pointer to capture.\n  }\n  moveTo(event)\n}\n\nfunction onPointerMove(event: PointerEvent) {\n  if (dragging.value) moveTo(event)\n}\n\nfunction onPointerUp() {\n  dragging.value = false\n  held.value = null\n}\n\nconst el = ref<HTMLElement>()\n/** How far the map moves away from its edge to clear the other panels there, in px. */\nconst lift = ref(0)\nconst LIFT_GAP = 8\n\n/**\n * On a narrow editor the map would cover a panel in the same corner row,\n * e.g. the controls: then it sits above (or below) them instead.\n */\nfunction place() {\n  const self = el.value\n  const root = flow.root.value\n  if (!self || !root) return\n  const upper = props.placement.startsWith('top')\n  const box = self.getBoundingClientRect()\n  // where the map is without the lift\n  const top = box.top + (upper ? -lift.value : lift.value)\n  const bottom = top + box.height\n  let next = 0\n  for (const panel of root.querySelectorAll('.dou-flow-editor__panels > *')) {\n    if (panel === self || panel.classList.contains('dou-flow-minimap')) continue\n    const rect = panel.getBoundingClientRect()\n    if (!rect.width || !rect.height) continue\n    if (rect.right <= box.left || rect.left >= box.right) continue\n    if (rect.bottom <= top || rect.top >= bottom) continue\n    next = Math.max(next, upper ? rect.bottom - top + LIFT_GAP : bottom - rect.top + LIFT_GAP)\n  }\n  lift.value = next\n}\n\n// Panels come, go and change size after the map is shown (controls put in\n// later, undo hidden when made read-only…): place it again each time.\nlet resizes: ResizeObserver | undefined\nlet changes: MutationObserver | undefined\nfunction watchPanels() {\n  const panels = el.value?.parentElement\n  if (!panels) return\n  resizes?.disconnect()\n  if (typeof ResizeObserver !== 'undefined') {\n    resizes = new ResizeObserver(() => place())\n    for (const panel of panels.children) if (panel !== el.value) resizes.observe(panel)\n  }\n  place()\n}\n\nonMounted(() => {\n  nextTick(watchPanels)\n  const panels = el.value?.parentElement\n  if (panels && typeof MutationObserver !== 'undefined') {\n    changes = new MutationObserver(watchPanels)\n    changes.observe(panels, { childList: true })\n  }\n})\nonBeforeUnmount(() => {\n  resizes?.disconnect()\n  changes?.disconnect()\n})\nwatch(\n  () => [flow.size.value.width, flow.size.value.height, props.width, props.height, props.placement],\n  () => nextTick(place),\n)\n</script>\n\n<template>\n  <div\n    ref=\"el\"\n    class=\"dou-flow-minimap\"\n    data-flow-overlay\n    :style=\"lift ? { translate: `0 ${placement.startsWith('top') ? lift : -lift}px` } : undefined\"\n    :class=\"[`is-${placement}`, { 'is-dragging': dragging }]\"\n    role=\"img\"\n    :aria-label=\"messages.minimap\"\n  >\n    <svg\n      ref=\"svg\"\n      :width=\"width\"\n      :height=\"height\"\n      :viewBox=\"viewBox\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      aria-hidden=\"true\"\n      @pointerdown=\"onPointerDown\"\n      @pointermove=\"onPointerMove\"\n      @pointerup=\"onPointerUp\"\n      @pointercancel=\"onPointerUp\"\n    >\n      <rect\n        v-for=\"item in rects\"\n        :key=\"item.id\"\n        class=\"dou-flow-minimap__node\"\n        :class=\"{ 'is-selected': item.selected }\"\n        :x=\"item.rect.x\"\n        :y=\"item.rect.y\"\n        :width=\"item.rect.width\"\n        :height=\"item.rect.height\"\n        :rx=\"2 * scale\"\n      />\n      <path class=\"dou-flow-minimap__shade\" :d=\"shade\" fill-rule=\"evenodd\" />\n      <rect\n        class=\"dou-flow-minimap__view\"\n        :x=\"visible.x\"\n        :y=\"visible.y\"\n        :width=\"visible.width\"\n        :height=\"visible.height\"\n      />\n    </svg>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwHA,IAAM,WAAW;;;;;;;;;;;;;;EAhHjB,MAAM,QAAQ;EAMd,MAAM,OAAO,cAAc;EAC3B,MAAM,EAAE,aAAa;;EAGrB,MAAM,UAAU,eAAqB;GACnC,MAAM,EAAE,GAAG,GAAG,SAAS,KAAK,SAAS;GACrC,MAAM,EAAE,OAAO,WAAW,KAAK,KAAK;GACpC,OAAO;IAAE,GAAG,CAAC,IAAI;IAAM,GAAG,CAAC,IAAI;IAAM,OAAO,QAAQ;IAAM,QAAQ,SAAS;GAAK;EAClF,CAAC;EAED,MAAM,QAAQ,eACZ,KAAK,IAAI,MAAM,MAAM,SAAS,SAAS;GACrC,MAAM,OAAO,KAAK,YAAY,KAAK,EAAE;GACrC,OAAO,OAAO,CAAC;IAAE,IAAI,KAAK;IAAI;IAAM,UAAU,KAAK,cAAc,MAAM,IAAI,KAAK,EAAE;GAAE,CAAC,IAAI,CAAC;EAC5F,CAAC,CACH;;EAGA,MAAM,SAAS,eAAqB;GAClC,MAAM,MAAM,SAAS,CAAC,GAAG,MAAM,MAAM,KAAK,MAAM,EAAE,IAAI,GAAG,QAAQ,KAAK,CAAC;GACvE,MAAM,MAAM,KAAK,IAAI,IAAI,OAAO,IAAI,MAAM,IAAI;GAC9C,OAAO;IACL,GAAG,IAAI,IAAI;IACX,GAAG,IAAI,IAAI;IACX,OAAO,IAAI,QAAQ,MAAM;IACzB,QAAQ,IAAI,SAAS,MAAM;GAC7B;EACF,CAAC;;;;;;EAOD,MAAM,OAAO,IAAiB,IAAI;EAClC,MAAM,QAAQ,eAAe,KAAK,SAAS,OAAO,KAAK;;EAGvD,MAAM,QAAQ,eACZ,KAAK,IAAI,MAAM,MAAM,QAAQ,MAAM,OAAO,MAAM,MAAM,SAAS,MAAM,QAAQ,IAAI,CACnF;EACA,MAAM,UAAU,eAAe;GAC7B,MAAM,IAAI,MAAM,QAAQ,MAAM;GAC9B,MAAM,IAAI,MAAM,SAAS,MAAM;GAC/B,MAAM,EAAE,GAAG,GAAG,OAAO,WAAW,MAAM;GACtC,OAAO,GAAG,KAAK,IAAI,SAAS,EAAE,GAAG,KAAK,IAAI,UAAU,EAAE,GAAG,EAAE,GAAG;EAChE,CAAC;;EAGD,MAAM,QAAQ,eAAe;GAC3B,MAAM,CAAC,GAAG,GAAG,GAAG,KAAK,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;GACxD,MAAM,IAAI,QAAQ;GAClB,OAAO,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,OAAO,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,OAAO;EACxF,CAAC;EAED,MAAM,MAAM,IAAmB;EAC/B,MAAM,WAAW,IAAI,KAAK;;EAG1B,MAAM,SAAS,IAAY,OAAe,WACxC,SAAS,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,SAAS,MAAM,CAAC,IAAI;;EAG7D,SAAS,QAAQ,OAA4B;GAC3C,MAAM,MAAM,IAAI,MAAO,sBAAsB;GAC7C,MAAM,CAAC,GAAG,GAAG,GAAG,KAAK,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;GACxD,OAAO;IACL,GAAG,IAAI,MAAM,MAAM,SAAS,IAAI,MAAM,IAAI,KAAK,IAAI;IACnD,GAAG,IAAI,MAAM,MAAM,SAAS,IAAI,KAAK,IAAI,MAAM,IAAI;GACrD;EACF;;EAGA,SAAS,OAAO,OAAqB;GACnC,MAAM,IAAI,QAAQ,KAAK;GACvB,MAAM,EAAE,SAAS,KAAK,SAAS;GAC/B,MAAM,EAAE,OAAO,WAAW,KAAK,KAAK;GACpC,KAAK,YAAY;IAAE,GAAG,QAAQ,IAAI,EAAE,IAAI;IAAM,GAAG,SAAS,IAAI,EAAE,IAAI;IAAM;GAAK,CAAC;EAClF;EAEA,SAAS,cAAc,OAAqB;GAC1C,IAAI,MAAM,WAAW,GAAG;GACxB,MAAM,gBAAgB;GACtB,SAAS,QAAQ;GAEjB,KAAK,QAAQ,OAAO;GACpB,IAAI;IACF,IAAI,MAAO,kBAAkB,MAAM,SAAS;GAC9C,QAAQ,CAER;GACA,OAAO,KAAK;EACd;EAEA,SAAS,cAAc,OAAqB;GAC1C,IAAI,SAAS,OAAO,OAAO,KAAK;EAClC;EAEA,SAAS,cAAc;GACrB,SAAS,QAAQ;GACjB,KAAK,QAAQ;EACf;EAEA,MAAM,KAAK,IAAiB;;EAE5B,MAAM,OAAO,IAAI,CAAC;EAOlB,SAAS,QAAQ;GACf,MAAM,OAAO,GAAG;GAChB,MAAM,OAAO,KAAK,KAAK;GACvB,IAAI,CAAC,QAAQ,CAAC,MAAM;GACpB,MAAM,QAAQ,MAAM,UAAU,WAAW,KAAK;GAC9C,MAAM,MAAM,KAAK,sBAAsB;GAEvC,MAAM,MAAM,IAAI,OAAO,QAAQ,CAAC,KAAK,QAAQ,KAAK;GAClD,MAAM,SAAS,MAAM,IAAI;GACzB,IAAI,OAAO;GACX,KAAK,MAAM,SAAS,KAAK,iBAAiB,8BAA8B,GAAG;IACzE,IAAI,UAAU,QAAQ,MAAM,UAAU,SAAS,kBAAkB,GAAG;IACpE,MAAM,OAAO,MAAM,sBAAsB;IACzC,IAAI,CAAC,KAAK,SAAS,CAAC,KAAK,QAAQ;IACjC,IAAI,KAAK,SAAS,IAAI,QAAQ,KAAK,QAAQ,IAAI,OAAO;IACtD,IAAI,KAAK,UAAU,OAAO,KAAK,OAAO,QAAQ;IAC9C,OAAO,KAAK,IAAI,MAAM,QAAQ,KAAK,SAAS,MAAM,WAAW,SAAS,KAAK,MAAM,QAAQ;GAC3F;GACA,KAAK,QAAQ;EACf;EAIA,IAAI;EACJ,IAAI;EACJ,SAAS,cAAc;GACrB,MAAM,SAAS,GAAG,OAAO;GACzB,IAAI,CAAC,QAAQ;GACb,SAAS,WAAW;GACpB,IAAI,OAAO,mBAAmB,aAAa;IACzC,UAAU,IAAI,qBAAqB,MAAM,CAAC;IAC1C,KAAK,MAAM,SAAS,OAAO,UAAU,IAAI,UAAU,GAAG,OAAO,QAAQ,QAAQ,KAAK;GACpF;GACA,MAAM;EACR;EAEA,gBAAgB;GACd,SAAS,WAAW;GACpB,MAAM,SAAS,GAAG,OAAO;GACzB,IAAI,UAAU,OAAO,qBAAqB,aAAa;IACrD,UAAU,IAAI,iBAAiB,WAAW;IAC1C,QAAQ,QAAQ,QAAQ,EAAE,WAAW,KAAK,CAAC;GAC7C;EACF,CAAC;EACD,sBAAsB;GACpB,SAAS,WAAW;GACpB,SAAS,WAAW;EACtB,CAAC;EACD,YACQ;GAAC,KAAK,KAAK,MAAM;GAAO,KAAK,KAAK,MAAM;GAAQ,MAAM;GAAO,MAAM;GAAQ,MAAM;EAAS,SAC1F,SAAS,KAAK,CACtB;;GAIE,OAAAA,UAAA,GAAAC,mBAyCM,OAAA;IAxCA,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,oBAAkB,CAAA,MAGT,QAAA,aAAS,EAAA,eAAqB,SAAA,MAAQ,CAAA,CAAA,CAAA;IAFrD,qBAAA;IACC,OAAKC,eAAE,KAAA,QAAI,EAAA,WAAA,KAAqB,QAAA,UAAU,WAAU,KAAA,IAAU,KAAA,QAAI,CAAI,KAAA,MAAI,IAAA,IAAS,KAAA,CAAS;IAE7F,MAAK;IACJ,cAAYC,MAAA,QAAA,CAAQ,CAAC;G,KAEtBJ,UAAA,GAAAC,mBA+BM,OAAA;IA9BA,SAAA;IAAJ,KAAI;IACH,OAAO,QAAA;IACP,QAAQ,QAAA;IACR,SAAS,QAAA;IACV,qBAAoB;IACpB,eAAY;IACX,eAAa;IACb,eAAa;IACb,aAAW;IACX,iBAAe;;KAEhBD,UAAA,IAAA,GAAAC,mBAUEI,UAAA,MAAAC,WATe,MAAA,QAAR,SAAI;KADb,OAAAN,UAAA,GAAAC,mBAUE,QAAA;MARC,KAAK,KAAK;MACX,OAAKC,eAAA,CAAC,0BAAwB,EAAA,eACL,KAAK,SAAQ,CAAA,CAAA;MACrC,GAAG,KAAK,KAAK;MACb,GAAG,KAAK,KAAK;MACb,OAAO,KAAK,KAAK;MACjB,QAAQ,KAAK,KAAK;MAClB,IAAE,IAAM,MAAA;;;IAEXK,mBAAuE,QAAA;KAAjE,OAAM;KAA2B,GAAG,MAAA;KAAO,aAAU;;IAC3DA,mBAME,QAAA;KALA,OAAM;KACL,GAAG,QAAA,MAAQ;KACX,GAAG,QAAA,MAAQ;KACX,OAAO,QAAA,MAAQ;KACf,QAAQ,QAAA,MAAQ"}

package/dist/components/flow-port.js

@@ -0,0 +1,6 @@
+import flow_port_vue_vue_type_script_setup_true_lang_default from "./flow-port.vue_vue_type_script_setup_true_lang.js";
+// src/components/flow-port.vue
+var flow_port_default = flow_port_vue_vue_type_script_setup_true_lang_default;
+export { flow_port_default as default };
+
+//# sourceMappingURL=flow-port.js.map

package/dist/components/flow-port.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-port.js","names":["_sfc_main"],"sources":["../../src/components/flow-port.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'\nimport { flowEditorKey, flowNodeKey } from '../context'\nimport { portSide } from '../core/node-types'\n\ndefineOptions({ name: 'DouFlowPort' })\n\nconst props = defineProps<{\n  /** The id of one of the node's ports. */\n  id: string\n  /** @internal placed by the editor, not by the node's component */\n  auto?: boolean\n}>()\n\nconst node = inject(flowNodeKey, null)\n\nconst el = useTemplateRef<HTMLElement>('el')\nconst port = computed(() => node?.ports.value.find((p) => p.id === props.id))\nconst side = computed(() => (port.value ? portSide(port.value) : 'left'))\nconst connected = computed(() => !!node?.connected.value.has(props.id))\nconst editor = inject(flowEditorKey, null)\nconst type = computed(() => (port.value ? editor?.portTypeOf(port.value) : undefined))\nconst shape = computed(() => type.value?.shape ?? 'circle')\nconst color = computed(() => editor?.colorOf(type.value))\nconst states = computed(() => node?.portStates.value)\nconst state = computed(() => states.value?.get(props.id))\n\nonMounted(() => {\n  if (el.value) node?.registerPort(props.id, el.value, props.auto)\n})\nonBeforeUnmount(() => node?.unregisterPort(props.id, props.auto))\n</script>\n\n<template>\n  <span\n    ref=\"el\"\n    class=\"dou-flow-port\"\n    :class=\"[\n      `is-${side}`,\n      `is-${port?.kind ?? 'input'}`,\n      `is-${shape}`,\n      state && `is-${state}`,\n      { 'is-connected': connected, 'is-unavailable': states && !state },\n    ]\"\n    :style=\"color ? { '--dou-flow-port-color': color } : undefined\"\n    :data-port=\"id\"\n    aria-hidden=\"true\"\n  >\n    <svg v-if=\"shape === 'triangle'\" viewBox=\"0 0 10 10\">\n      <path d=\"M2 1.5 8 5 2 8.5Z\" />\n    </svg>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/flow-port.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,57 @@
+import { flowEditorKey, flowNodeKey } from "../context.js";
+import { portSide } from "../core/node-types.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, useTemplateRef } from "vue";
+// src/components/flow-port.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-port"];
+var _hoisted_2 = {
+	key: 0,
+	viewBox: "0 0 10 10"
+};
+var flow_port_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFlowPort",
+	__name: "flow-port",
+	props: {
+		id: {},
+		auto: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const node = inject(flowNodeKey, null);
+		const el = useTemplateRef("el");
+		const port = computed(() => node?.ports.value.find((p) => p.id === props.id));
+		const side = computed(() => port.value ? portSide(port.value) : "left");
+		const connected = computed(() => !!node?.connected.value.has(props.id));
+		const editor = inject(flowEditorKey, null);
+		const type = computed(() => port.value ? editor?.portTypeOf(port.value) : void 0);
+		const shape = computed(() => type.value?.shape ?? "circle");
+		const color = computed(() => editor?.colorOf(type.value));
+		const states = computed(() => node?.portStates.value);
+		const state = computed(() => states.value?.get(props.id));
+		onMounted(() => {
+			if (el.value) node?.registerPort(props.id, el.value, props.auto);
+		});
+		onBeforeUnmount(() => node?.unregisterPort(props.id, props.auto));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "el",
+				ref: el,
+				class: normalizeClass(["dou-flow-port", [
+					`is-${side.value}`,
+					`is-${port.value?.kind ?? "input"}`,
+					`is-${shape.value}`,
+					state.value && `is-${state.value}`,
+					{
+						"is-connected": connected.value,
+						"is-unavailable": states.value && !state.value
+					}
+				]]),
+				style: normalizeStyle(color.value ? { "--dou-flow-port-color": color.value } : void 0),
+				"data-port": __props.id,
+				"aria-hidden": "true"
+			}, [shape.value === "triangle" ? (openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M2 1.5 8 5 2 8.5Z" }, null, -1)])])) : createCommentVNode("", true)], 14, _hoisted_1);
+		};
+	}
+});
+export { flow_port_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=flow-port.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/flow-port.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-port.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_createCommentVNode"],"sources":["../../src/components/flow-port.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'\nimport { flowEditorKey, flowNodeKey } from '../context'\nimport { portSide } from '../core/node-types'\n\ndefineOptions({ name: 'DouFlowPort' })\n\nconst props = defineProps<{\n  /** The id of one of the node's ports. */\n  id: string\n  /** @internal placed by the editor, not by the node's component */\n  auto?: boolean\n}>()\n\nconst node = inject(flowNodeKey, null)\n\nconst el = useTemplateRef<HTMLElement>('el')\nconst port = computed(() => node?.ports.value.find((p) => p.id === props.id))\nconst side = computed(() => (port.value ? portSide(port.value) : 'left'))\nconst connected = computed(() => !!node?.connected.value.has(props.id))\nconst editor = inject(flowEditorKey, null)\nconst type = computed(() => (port.value ? editor?.portTypeOf(port.value) : undefined))\nconst shape = computed(() => type.value?.shape ?? 'circle')\nconst color = computed(() => editor?.colorOf(type.value))\nconst states = computed(() => node?.portStates.value)\nconst state = computed(() => states.value?.get(props.id))\n\nonMounted(() => {\n  if (el.value) node?.registerPort(props.id, el.value, props.auto)\n})\nonBeforeUnmount(() => node?.unregisterPort(props.id, props.auto))\n</script>\n\n<template>\n  <span\n    ref=\"el\"\n    class=\"dou-flow-port\"\n    :class=\"[\n      `is-${side}`,\n      `is-${port?.kind ?? 'input'}`,\n      `is-${shape}`,\n      state && `is-${state}`,\n      { 'is-connected': connected, 'is-unavailable': states && !state },\n    ]\"\n    :style=\"color ? { '--dou-flow-port-color': color } : undefined\"\n    :data-port=\"id\"\n    aria-hidden=\"true\"\n  >\n    <svg v-if=\"shape === 'triangle'\" viewBox=\"0 0 10 10\">\n      <path d=\"M2 1.5 8 5 2 8.5Z\" />\n    </svg>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAOd,MAAM,OAAO,OAAO,aAAa,IAAI;EAErC,MAAM,KAAK,eAA4B,IAAI;EAC3C,MAAM,OAAO,eAAe,MAAM,MAAM,MAAM,MAAM,MAAM,EAAE,OAAO,MAAM,EAAE,CAAC;EAC5E,MAAM,OAAO,eAAgB,KAAK,QAAQ,SAAS,KAAK,KAAK,IAAI,MAAO;EACxE,MAAM,YAAY,eAAe,CAAC,CAAC,MAAM,UAAU,MAAM,IAAI,MAAM,EAAE,CAAC;EACtE,MAAM,SAAS,OAAO,eAAe,IAAI;EACzC,MAAM,OAAO,eAAgB,KAAK,QAAQ,QAAQ,WAAW,KAAK,KAAK,IAAI,KAAA,CAAU;EACrF,MAAM,QAAQ,eAAe,KAAK,OAAO,SAAS,QAAQ;EAC1D,MAAM,QAAQ,eAAe,QAAQ,QAAQ,KAAK,KAAK,CAAC;EACxD,MAAM,SAAS,eAAe,MAAM,WAAW,KAAK;EACpD,MAAM,QAAQ,eAAe,OAAO,OAAO,IAAI,MAAM,EAAE,CAAC;EAExD,gBAAgB;GACd,IAAI,GAAG,OAAO,MAAM,aAAa,MAAM,IAAI,GAAG,OAAO,MAAM,IAAI;EACjE,CAAC;EACD,sBAAsB,MAAM,eAAe,MAAM,IAAI,MAAM,IAAI,CAAC;;GAI9D,OAAAA,UAAA,GAAAC,mBAiBO,QAAA;IAhBD,SAAA;IAAJ,KAAI;IACJ,OAAKC,eAAA,CAAC,iBAAe;KACC,MAAA,KAAA;KAAoB,MAAA,KAAA,OAAM,QAAI;KAA2B,MAAA,MAAA;KAAe,MAAA,SAAK,MAAU,MAAA;KAAiC;MAAA,gBAAA,UAAA;MAAS,kBAAoB,OAAA,SAAM,CAAK,MAAA;KAAK;;IAO1L,OAAKC,eAAE,MAAA,QAAK,EAAA,yBAA8B,MAAA,MAAK,IAAK,KAAA,CAAS;IAC7D,aAAW,QAAA;IACZ,eAAY;G,IAED,MAAA,UAAK,cAAhBH,UAAA,GAAAC,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJG,mBAA8B,QAAA,EAAxB,GAAE,oBAAmB,GAAA,MAAA,EAAA,C"}

package/dist/components/flow-quick-add.js

@@ -0,0 +1,6 @@
+import flow_quick_add_vue_vue_type_script_setup_true_lang_default from "./flow-quick-add.vue_vue_type_script_setup_true_lang.js";
+// src/components/flow-quick-add.vue
+var flow_quick_add_default = flow_quick_add_vue_vue_type_script_setup_true_lang_default;
+export { flow_quick_add_default as default };
+
+//# sourceMappingURL=flow-quick-add.js.map

package/dist/components/flow-quick-add.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-quick-add.js","names":["_sfc_main"],"sources":["../../src/components/flow-quick-add.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCommand, useFloating, useLayer, useZIndex, type CommandItem } from 'dou-ui'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\nimport { useFlowEditor } from '../context'\nimport type { Point } from '../core/model'\nimport type { NodeTypeSpec } from '../core/node-types'\n\nconst props = defineProps<{\n  /** Where the edge was dropped, on screen, and the types offered. */\n  state: { client: Point; types: NodeTypeSpec[]; touch: boolean } | null\n}>()\nconst emit = defineEmits<{ choose: [type: string | null] }>()\nconst slots = defineSlots<{\n  /** Replaces the search list. */\n  default?: (props: {\n    types: NodeTypeSpec[]\n    choose: (type: string) => void\n    close: () => void\n  }) => unknown\n}>()\n\nconst { messages } = useFlowEditor()\nconst panel = useTemplateRef<HTMLElement>('panel')\nconst command = useTemplateRef<InstanceType<typeof DouCommand>>('command')\nconst open = computed(() => !!props.state)\nconst query = shallowRef('')\n\nconst items = computed<CommandItem[]>(() =>\n  (props.state?.types ?? []).map((spec) => ({\n    value: spec.type,\n    label: spec.palette!.label,\n    group: spec.palette!.group,\n    description: spec.palette!.description,\n    keywords: spec.palette!.keywords,\n    icon: spec.palette!.icon,\n  })),\n)\n\n// Hangs off the point where the edge was dropped.\nconst anchor = {\n  getBoundingClientRect() {\n    const at = props.state?.client\n    return at ? new DOMRect(at.x, at.y, 0, 0) : new DOMRect()\n  },\n}\nconst { style, placement, update } = useFloating(() => (open.value ? anchor : null), panel, {\n  open,\n  placement: 'bottom-start',\n  offset: 6,\n})\nconst { next } = useZIndex()\nconst zIndex = shallowRef(0)\nuseLayer({\n  open,\n  elements: () => [panel.value],\n  onOutside: () => emit('choose', null),\n  onEscape: () => emit('choose', null),\n})\n\n/** A label cut into the matched letters and the rest. */\nfunction parts(text: string, indices: number[]) {\n  const hit = new Set(indices)\n  const out: { text: string; match: boolean }[] = []\n  for (let i = 0; i < text.length; i++) {\n    const match = hit.has(i)\n    const last = out[out.length - 1]\n    if (last && last.match === match) last.text += text[i]\n    else out.push({ text: text[i]!, match })\n  }\n  return out\n}\n\nwatch(open, (value) => {\n  if (!value) return\n  query.value = ''\n  zIndex.value = next()\n  void nextTick(() => {\n    update()\n    // A phone's keyboard would cover the list: search only when typing is likely.\n    if (!props.state?.touch) command.value?.focus()\n  })\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dou-floating\">\n      <div\n        v-if=\"state\"\n        ref=\"panel\"\n        class=\"dou-dropdown dou-floating dou-flow-quick-add\"\n        :class=\"{ 'is-custom': slots.default }\"\n        :style=\"[style, { zIndex }]\"\n        :data-placement=\"placement\"\n      >\n        <slot\n          v-if=\"slots.default\"\n          :types=\"state.types\"\n          :choose=\"(type: string) => emit('choose', type)\"\n          :close=\"() => emit('choose', null)\"\n        />\n        <DouCommand\n          v-else\n          ref=\"command\"\n          v-model:query=\"query\"\n          :items=\"items\"\n          :placeholder=\"messages.search\"\n          :aria-label=\"messages.search\"\n          :empty-text=\"messages.noTypes\"\n          :max-height=\"280\"\n          @select=\"emit('choose', String($event.value))\"\n        >\n          <template #item=\"{ item, indices }\">\n            <span class=\"dou-flow-quick-add__icon\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n            </span>\n            <span class=\"dou-command__label\">\n              <template v-for=\"(part, at) in parts(item.label, indices)\" :key=\"at\">\n                <mark v-if=\"part.match\" class=\"dou-command__match\">{{ part.text }}</mark>\n                <template v-else>{{ part.text }}</template>\n              </template>\n            </span>\n            <span v-if=\"item.description\" class=\"dou-command__description\">\n              {{ item.description }}\n            </span>\n          </template>\n        </DouCommand>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/flow-quick-add.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,126 @@
+import { useFlowEditor } from "../context.js";
+import { DouCommand, useFloating, useLayer, useZIndex } from "dou-ui";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+// src/components/flow-quick-add.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-placement"];
+var _hoisted_2 = { class: "dou-flow-quick-add__icon" };
+var _hoisted_3 = { class: "dou-command__label" };
+var _hoisted_4 = {
+	key: 0,
+	class: "dou-command__match"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "dou-command__description"
+};
+var flow_quick_add_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "flow-quick-add",
+	props: { state: {} },
+	emits: ["choose"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const { messages } = useFlowEditor();
+		const panel = useTemplateRef("panel");
+		const command = useTemplateRef("command");
+		const open = computed(() => !!props.state);
+		const query = shallowRef("");
+		const items = computed(() => (props.state?.types ?? []).map((spec) => ({
+			value: spec.type,
+			label: spec.palette.label,
+			group: spec.palette.group,
+			description: spec.palette.description,
+			keywords: spec.palette.keywords,
+			icon: spec.palette.icon
+		})));
+		const anchor = { getBoundingClientRect() {
+			const at = props.state?.client;
+			return at ? new DOMRect(at.x, at.y, 0, 0) : new DOMRect();
+		} };
+		const { style, placement, update } = useFloating(() => open.value ? anchor : null, panel, {
+			open,
+			placement: "bottom-start",
+			offset: 6
+		});
+		const { next } = useZIndex();
+		const zIndex = shallowRef(0);
+		useLayer({
+			open,
+			elements: () => [panel.value],
+			onOutside: () => emit("choose", null),
+			onEscape: () => emit("choose", null)
+		});
+		/** A label cut into the matched letters and the rest. */
+		function parts(text, indices) {
+			const hit = new Set(indices);
+			const out = [];
+			for (let i = 0; i < text.length; i++) {
+				const match = hit.has(i);
+				const last = out[out.length - 1];
+				if (last && last.match === match) last.text += text[i];
+				else out.push({
+					text: text[i],
+					match
+				});
+			}
+			return out;
+		}
+		watch(open, (value) => {
+			if (!value) return;
+			query.value = "";
+			zIndex.value = next();
+			nextTick(() => {
+				update();
+				if (!props.state?.touch) command.value?.focus();
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "dou-floating" }, {
+				default: withCtx(() => [__props.state ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: panel,
+					class: normalizeClass(["dou-dropdown dou-floating dou-flow-quick-add", { "is-custom": slots.default }]),
+					style: normalizeStyle([unref(style), { zIndex: zIndex.value }]),
+					"data-placement": unref(placement)
+				}, [slots.default ? renderSlot(_ctx.$slots, "default", {
+					types: __props.state.types,
+					choose: (type) => emit("choose", type),
+					close: () => emit("choose", null)
+				}, void 0, void 0, 0) : (openBlock(), createBlock(unref(DouCommand), {
+					key: 1,
+					ref_key: "command",
+					ref: command,
+					query: query.value,
+					"onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+					items: items.value,
+					placeholder: unref(messages).search,
+					"aria-label": unref(messages).search,
+					"empty-text": unref(messages).noTypes,
+					"max-height": 280,
+					onSelect: _cache[1] || (_cache[1] = ($event) => emit("choose", String($event.value)))
+				}, {
+					item: withCtx(({ item, indices }) => [
+						createElementVNode("span", _hoisted_2, [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : createCommentVNode("", true)]),
+						createElementVNode("span", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(parts(item.label, indices), (part, at) => {
+							return openBlock(), createElementBlock(Fragment, { key: at }, [part.match ? (openBlock(), createElementBlock("mark", _hoisted_4, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))]),
+						item.description ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.description), 1)) : createCommentVNode("", true)
+					]),
+					_: 1
+				}, 8, [
+					"query",
+					"items",
+					"placeholder",
+					"aria-label",
+					"empty-text"
+				]))], 14, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 3
+			})]);
+		};
+	}
+});
+export { flow_quick_add_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=flow-quick-add.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/flow-quick-add.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-quick-add.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createBlock","_Teleport","_createVNode","_Transition","_withCtx","_createElementBlock","_normalizeClass","_normalizeStyle","_unref","_renderSlot","_createElementVNode","_resolveDynamicComponent","_createCommentVNode","_Fragment","_renderList","_toDisplayString","_createTextVNode"],"sources":["../../src/components/flow-quick-add.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouCommand, useFloating, useLayer, useZIndex, type CommandItem } from 'dou-ui'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\nimport { useFlowEditor } from '../context'\nimport type { Point } from '../core/model'\nimport type { NodeTypeSpec } from '../core/node-types'\n\nconst props = defineProps<{\n  /** Where the edge was dropped, on screen, and the types offered. */\n  state: { client: Point; types: NodeTypeSpec[]; touch: boolean } | null\n}>()\nconst emit = defineEmits<{ choose: [type: string | null] }>()\nconst slots = defineSlots<{\n  /** Replaces the search list. */\n  default?: (props: {\n    types: NodeTypeSpec[]\n    choose: (type: string) => void\n    close: () => void\n  }) => unknown\n}>()\n\nconst { messages } = useFlowEditor()\nconst panel = useTemplateRef<HTMLElement>('panel')\nconst command = useTemplateRef<InstanceType<typeof DouCommand>>('command')\nconst open = computed(() => !!props.state)\nconst query = shallowRef('')\n\nconst items = computed<CommandItem[]>(() =>\n  (props.state?.types ?? []).map((spec) => ({\n    value: spec.type,\n    label: spec.palette!.label,\n    group: spec.palette!.group,\n    description: spec.palette!.description,\n    keywords: spec.palette!.keywords,\n    icon: spec.palette!.icon,\n  })),\n)\n\n// Hangs off the point where the edge was dropped.\nconst anchor = {\n  getBoundingClientRect() {\n    const at = props.state?.client\n    return at ? new DOMRect(at.x, at.y, 0, 0) : new DOMRect()\n  },\n}\nconst { style, placement, update } = useFloating(() => (open.value ? anchor : null), panel, {\n  open,\n  placement: 'bottom-start',\n  offset: 6,\n})\nconst { next } = useZIndex()\nconst zIndex = shallowRef(0)\nuseLayer({\n  open,\n  elements: () => [panel.value],\n  onOutside: () => emit('choose', null),\n  onEscape: () => emit('choose', null),\n})\n\n/** A label cut into the matched letters and the rest. */\nfunction parts(text: string, indices: number[]) {\n  const hit = new Set(indices)\n  const out: { text: string; match: boolean }[] = []\n  for (let i = 0; i < text.length; i++) {\n    const match = hit.has(i)\n    const last = out[out.length - 1]\n    if (last && last.match === match) last.text += text[i]\n    else out.push({ text: text[i]!, match })\n  }\n  return out\n}\n\nwatch(open, (value) => {\n  if (!value) return\n  query.value = ''\n  zIndex.value = next()\n  void nextTick(() => {\n    update()\n    // A phone's keyboard would cover the list: search only when typing is likely.\n    if (!props.state?.touch) command.value?.focus()\n  })\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dou-floating\">\n      <div\n        v-if=\"state\"\n        ref=\"panel\"\n        class=\"dou-dropdown dou-floating dou-flow-quick-add\"\n        :class=\"{ 'is-custom': slots.default }\"\n        :style=\"[style, { zIndex }]\"\n        :data-placement=\"placement\"\n      >\n        <slot\n          v-if=\"slots.default\"\n          :types=\"state.types\"\n          :choose=\"(type: string) => emit('choose', type)\"\n          :close=\"() => emit('choose', null)\"\n        />\n        <DouCommand\n          v-else\n          ref=\"command\"\n          v-model:query=\"query\"\n          :items=\"items\"\n          :placeholder=\"messages.search\"\n          :aria-label=\"messages.search\"\n          :empty-text=\"messages.noTypes\"\n          :max-height=\"280\"\n          @select=\"emit('choose', String($event.value))\"\n        >\n          <template #item=\"{ item, indices }\">\n            <span class=\"dou-flow-quick-add__icon\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n            </span>\n            <span class=\"dou-command__label\">\n              <template v-for=\"(part, at) in parts(item.label, indices)\" :key=\"at\">\n                <mark v-if=\"part.match\" class=\"dou-command__match\">{{ part.text }}</mark>\n                <template v-else>{{ part.text }}</template>\n              </template>\n            </span>\n            <span v-if=\"item.description\" class=\"dou-command__description\">\n              {{ item.description }}\n            </span>\n          </template>\n        </DouCommand>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":"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"}

package/dist/components/flow-toolbar.js

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

package/dist/components/flow-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-toolbar.js","names":["_sfc_main"],"sources":["../../src/components/flow-toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouTooltip } from 'dou-ui'\nimport { computed, ref, shallowReactive, useTemplateRef, watch } from 'vue'\nimport { useFlowEditor } from '../context'\nimport type { FlowToolbarItem } from '../core/menu'\n\nconst props = defineProps<{\n  /** Each extension's buttons, with a divider between them. */\n  groups: FlowToolbarItem[][]\n  /** The selection on screen, in px from the editor's top left. */\n  anchor: {\n    x: number\n    top: number\n    bottom: number\n    /** Boxes it should rather not cover, e.g. nodes beside selected edges, in the same px. */\n    avoid?: { left: number; top: number; right: number; bottom: number }[]\n  }\n  size: { width: number; height: number }\n}>()\n\nconst { messages, root, showMenu, menuFrom } = useFlowEditor()\n\nconst opensMenu = (item: FlowToolbarItem) => !!item.children?.length\n\n// A button with `children` opens its choices under it; a click from the\n// keyboard (no pointer, `detail` 0) puts focus on the one in use.\nfunction press(item: FlowToolbarItem, event: MouseEvent) {\n  if (!opensMenu(item)) return item.run?.()\n  const button = event.currentTarget as HTMLElement\n  const box = button.getBoundingClientRect()\n  showMenu(item.children!, { x: box.left, y: box.bottom + 4 }, button, {\n    focusChecked: event.detail === 0,\n  })\n}\n// By key: extensions give new item objects on every update.\nconst warned = new Set<string>()\n/** Says once when a button does nothing when pressed. */\nfunction warnOnce(item: FlowToolbarItem) {\n  // the app's bundler replaces this, as for Vue's own warnings\n  if (process.env.NODE_ENV === 'production' || warned.has(item.key)) return\n  if (item.run || opensMenu(item)) return\n  warned.add(item.key)\n  console.warn(\n    `[@dou-ui/flow] the toolbar item \"${item.key}\" has no run or children: pressing it does nothing`,\n  )\n}\nwatch(\n  () => props.groups,\n  (groups) => groups.flat().forEach(warnOnce),\n  { immediate: true },\n)\n\nconst el = useTemplateRef<HTMLElement>('el')\nconst box = ref({ width: 0, height: 0 })\n\nwatch(\n  [el, () => props.groups],\n  () => {\n    if (el.value) box.value = { width: el.value.offsetWidth, height: el.value.offsetHeight }\n  },\n  { flush: 'post' },\n)\n\n/** Room between the toolbar and the selection, and the editor's edges. */\nconst GAP = 8\n\n/*\n * What it keeps clear of is read from the page, so it is read again once the\n * page has caught up with the selection: a handle drawn for the selected node\n * appears in the same update as the toolbar's new anchor.\n */\nconst measured = ref(0)\nwatch(\n  () => props.anchor,\n  () => measured.value++,\n  { flush: 'post', immediate: true },\n)\n\n/**\n * Boxes of what the toolbar must not cover, from the editor's top left: what\n * floats over the canvas, e.g. a whiteboard's tools, and handles on the\n * selection, e.g. a whiteboard's turn handle.\n */\nfunction overlays() {\n  void measured.value\n  const editor = root.value\n  if (!editor) return []\n  const origin = editor.getBoundingClientRect()\n  return [...editor.querySelectorAll<HTMLElement>('[data-flow-overlay]')].map((item) => {\n    const r = item.getBoundingClientRect()\n    return {\n      left: r.left - origin.left,\n      top: r.top - origin.top,\n      right: r.right - origin.left,\n      bottom: r.bottom - origin.top,\n    }\n  })\n}\n\n// Above the selection, below it when there is no room or it would cover\n// something floating there, kept inside the editor.\nconst place = computed(() => {\n  const { width, height } = box.value\n  const { anchor, size } = props\n  const left = Math.min(Math.max(anchor.x - width / 2, GAP), size.width - width - GAP)\n  const above = anchor.top - GAP - height\n  const under = anchor.bottom + GAP\n  const boxes = [...overlays(), ...(anchor.avoid ?? [])]\n  const hits = (top: number) =>\n    boxes.filter(\n      (o) => left < o.right && left + width > o.left && top < o.bottom && top + height > o.top,\n    )\n  const fits = (top: number) => top >= GAP && top + height <= size.height - GAP && !hits(top).length\n  // Above, else below; when something is in the way, just past it.\n  const candidates = [above, under]\n  const over = hits(above)\n  if (over.length) candidates.push(Math.min(...over.map((o) => o.top)) - GAP - height)\n  const beneath = hits(under)\n  if (beneath.length) candidates.push(Math.max(...beneath.map((o) => o.bottom)) + GAP)\n  const top = candidates.find(fits) ?? (above >= GAP ? above : under)\n  return { left, top: Math.min(Math.max(top, GAP), size.height - height - GAP) }\n})\nconst style = computed(() => ({\n  left: `${Math.round(place.value.left)}px`,\n  top: `${Math.round(place.value.top)}px`,\n}))\n/** Tips open away from the selection, so they never cover it. */\nconst tipPlacement = computed(() => (place.value.top < props.anchor.top ? 'top' : 'bottom'))\n\n/** The buttons by key, to tell which one opened the menu. */\nconst buttons = shallowReactive(new Map<string, Element>())\nfunction setButton(key: string, button: unknown) {\n  if (button instanceof Element) buttons.set(key, button)\n  else buttons.delete(key)\n}\n\n// The selection scrolled out of view: nothing to point at.\nconst hidden = computed(\n  () =>\n    props.anchor.bottom < 0 ||\n    props.anchor.top > props.size.height ||\n    props.anchor.x < 0 ||\n    props.anchor.x > props.size.width,\n)\n</script>\n\n<template>\n  <div\n    v-show=\"!hidden\"\n    ref=\"el\"\n    class=\"dou-flow-toolbar\"\n    role=\"toolbar\"\n    :aria-label=\"messages.toolbar\"\n    :style=\"style\"\n  >\n    <template v-for=\"(group, i) in groups\" :key=\"i\">\n      <span v-if=\"i > 0\" class=\"dou-flow-controls__divider\" />\n      <!-- The tip stands aside while the button's menu is open. -->\n      <DouTooltip\n        v-for=\"item in group\"\n        :key=\"item.key\"\n        :content=\"item.label\"\n        :shortcut=\"item.shortcut\"\n        :disabled=\"!!menuFrom && menuFrom === buttons.get(item.key)\"\n        :placement=\"tipPlacement\"\n      >\n        <button\n          :ref=\"(button) => setButton(item.key, button)\"\n          type=\"button\"\n          class=\"dou-flow-controls__button\"\n          :class=\"{ 'is-active': item.pressed }\"\n          :disabled=\"item.disabled\"\n          :aria-label=\"item.label\"\n          :aria-pressed=\"opensMenu(item) ? undefined : (item.pressed ?? undefined)\"\n          :aria-haspopup=\"opensMenu(item) ? 'menu' : undefined\"\n          :aria-expanded=\"\n            opensMenu(item) ? !!menuFrom && menuFrom === buttons.get(item.key) : undefined\n          \"\n          @click=\"press(item, $event)\"\n        >\n          <component :is=\"item.icon\" />\n        </button>\n      </DouTooltip>\n    </template>\n  </div>\n</template>\n"],"mappings":""}