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

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

@@ -0,0 +1,161 @@
+import { useFlowEditor } from "../context.js";
+import { DouTooltip } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, resolveDynamicComponent, shallowReactive, unref, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+// src/components/flow-toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-flow-controls__divider"
+};
+var _hoisted_3 = [
+	"disabled",
+	"aria-label",
+	"aria-pressed",
+	"aria-haspopup",
+	"aria-expanded",
+	"onClick"
+];
+var GAP = 8;
+var flow_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "flow-toolbar",
+	props: {
+		groups: {},
+		anchor: {},
+		size: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { messages, root, showMenu, menuFrom } = useFlowEditor();
+		const opensMenu = (item) => !!item.children?.length;
+		function press(item, event) {
+			if (!opensMenu(item)) return item.run?.();
+			const button = event.currentTarget;
+			const box = button.getBoundingClientRect();
+			showMenu(item.children, {
+				x: box.left,
+				y: box.bottom + 4
+			}, button, { focusChecked: event.detail === 0 });
+		}
+		const warned = /* @__PURE__ */ new Set();
+		/** Says once when a button does nothing when pressed. */
+		function warnOnce(item) {
+			if (process.env.NODE_ENV === "production" || warned.has(item.key)) return;
+			if (item.run || opensMenu(item)) return;
+			warned.add(item.key);
+			console.warn(`[@dou-ui/flow] the toolbar item "${item.key}" has no run or children: pressing it does nothing`);
+		}
+		watch(() => props.groups, (groups) => groups.flat().forEach(warnOnce), { immediate: true });
+		const el = useTemplateRef("el");
+		const box = ref({
+			width: 0,
+			height: 0
+		});
+		watch([el, () => props.groups], () => {
+			if (el.value) box.value = {
+				width: el.value.offsetWidth,
+				height: el.value.offsetHeight
+			};
+		}, { flush: "post" });
+		/** Room between the toolbar and the selection, and the editor's edges. */
+		const measured = ref(0);
+		watch(() => props.anchor, () => measured.value++, {
+			flush: "post",
+			immediate: true
+		});
+		/**
+		* Boxes of what the toolbar must not cover, from the editor's top left: what
+		* floats over the canvas, e.g. a whiteboard's tools, and handles on the
+		* selection, e.g. a whiteboard's turn handle.
+		*/
+		function overlays() {
+			measured.value;
+			const editor = root.value;
+			if (!editor) return [];
+			const origin = editor.getBoundingClientRect();
+			return [...editor.querySelectorAll("[data-flow-overlay]")].map((item) => {
+				const r = item.getBoundingClientRect();
+				return {
+					left: r.left - origin.left,
+					top: r.top - origin.top,
+					right: r.right - origin.left,
+					bottom: r.bottom - origin.top
+				};
+			});
+		}
+		const place = computed(() => {
+			const { width, height } = box.value;
+			const { anchor, size } = props;
+			const left = Math.min(Math.max(anchor.x - width / 2, GAP), size.width - width - GAP);
+			const above = anchor.top - GAP - height;
+			const under = anchor.bottom + GAP;
+			const boxes = [...overlays(), ...anchor.avoid ?? []];
+			const hits = (top) => boxes.filter((o) => left < o.right && left + width > o.left && top < o.bottom && top + height > o.top);
+			const fits = (top) => top >= GAP && top + height <= size.height - GAP && !hits(top).length;
+			const candidates = [above, under];
+			const over = hits(above);
+			if (over.length) candidates.push(Math.min(...over.map((o) => o.top)) - GAP - height);
+			const beneath = hits(under);
+			if (beneath.length) candidates.push(Math.max(...beneath.map((o) => o.bottom)) + GAP);
+			const top = candidates.find(fits) ?? (above >= GAP ? above : under);
+			return {
+				left,
+				top: Math.min(Math.max(top, GAP), size.height - height - GAP)
+			};
+		});
+		const style = computed(() => ({
+			left: `${Math.round(place.value.left)}px`,
+			top: `${Math.round(place.value.top)}px`
+		}));
+		/** Tips open away from the selection, so they never cover it. */
+		const tipPlacement = computed(() => place.value.top < props.anchor.top ? "top" : "bottom");
+		/** The buttons by key, to tell which one opened the menu. */
+		const buttons = shallowReactive(/* @__PURE__ */ new Map());
+		function setButton(key, button) {
+			if (button instanceof Element) buttons.set(key, button);
+			else buttons.delete(key);
+		}
+		const hidden = computed(() => props.anchor.bottom < 0 || props.anchor.top > props.size.height || props.anchor.x < 0 || props.anchor.x > props.size.width);
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				class: "dou-flow-toolbar",
+				role: "toolbar",
+				"aria-label": unref(messages).toolbar,
+				style: normalizeStyle(style.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (group, i) => {
+				return openBlock(), createElementBlock(Fragment, { key: i }, [i > 0 ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group, (item) => {
+					return openBlock(), createBlock(unref(DouTooltip), {
+						key: item.key,
+						content: item.label,
+						shortcut: item.shortcut,
+						disabled: !!unref(menuFrom) && unref(menuFrom) === unref(buttons).get(item.key),
+						placement: tipPlacement.value
+					}, {
+						default: withCtx(() => [createElementVNode("button", {
+							ref_for: true,
+							ref: (button) => setButton(item.key, button),
+							type: "button",
+							class: normalizeClass(["dou-flow-controls__button", { "is-active": item.pressed }]),
+							disabled: item.disabled,
+							"aria-label": item.label,
+							"aria-pressed": opensMenu(item) ? void 0 : item.pressed ?? void 0,
+							"aria-haspopup": opensMenu(item) ? "menu" : void 0,
+							"aria-expanded": opensMenu(item) ? !!unref(menuFrom) && unref(menuFrom) === unref(buttons).get(item.key) : void 0,
+							onClick: ($event) => press(item, $event)
+						}, [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))], 10, _hoisted_3)]),
+						_: 2
+					}, 1032, [
+						"content",
+						"shortcut",
+						"disabled",
+						"placement"
+					]);
+				}), 128))], 64);
+			}), 128))], 12, _hoisted_1)), [[vShow, !hidden.value]]);
+		};
+	}
+});
+export { flow_toolbar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=flow-toolbar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flow-toolbar.vue_vue_type_script_setup_true_lang.js","names":["_withDirectives","_openBlock","_createElementBlock","_unref","_normalizeStyle","_Fragment","_renderList","_createCommentVNode","_createBlock","_withCtx","_createElementVNode","_normalizeClass","_resolveDynamicComponent","_vShow"],"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":"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"}

package/dist/components/group-node.js

@@ -0,0 +1,6 @@
+import group_node_vue_vue_type_script_setup_true_lang_default from "./group-node.vue_vue_type_script_setup_true_lang.js";
+// src/components/group-node.vue
+var group_node_default = group_node_vue_vue_type_script_setup_true_lang_default;
+export { group_node_default as default };
+
+//# sourceMappingURL=group-node.js.map

package/dist/components/group-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-node.js","names":["_sfc_main"],"sources":["../../src/components/group-node.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChevronDownIcon } from '@dou-ui/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\nimport { useFlowEditor } from '../context'\nimport { format } from '../locale'\nimport type { NodeViewProps } from '../core/node-types'\nimport type { GroupNodeData } from './group-node'\n\nconst props = defineProps<NodeViewProps<GroupNodeData>>()\nconst { messages, announce } = useFlowEditor()\n\nconst editing = ref(false)\nconst draft = ref('')\nconst input = useTemplateRef<HTMLInputElement>('input')\n\nfunction edit() {\n  if (props.readonly) return\n  draft.value = props.data.label ?? ''\n  editing.value = true\n  void nextTick(() => {\n    input.value?.focus()\n    input.value?.select()\n  })\n}\n\nfunction finish(save: boolean) {\n  if (!editing.value) return\n  editing.value = false\n  if (save && draft.value.trim() !== (props.data.label ?? ''))\n    props.updateData({ label: draft.value.trim() })\n}\n\nfunction toggle() {\n  const collapsed = !props.data.collapsed\n  props.updateData({ collapsed: collapsed || undefined })\n  const t = messages.value\n  announce(format(collapsed ? t.collapsed : t.expanded, { group: props.data.label || t.group }))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.isComposing) return\n  if (event.key === 'Enter') finish(true)\n  else if (event.key === 'Escape') finish(false)\n  else return\n  event.preventDefault()\n  event.stopPropagation()\n}\n</script>\n\n<template>\n  <div class=\"dou-flow-group-node\" :class=\"{ 'is-collapsed': data.collapsed }\">\n    <div class=\"dou-flow-group-node__head\">\n      <button\n        type=\"button\"\n        class=\"dou-flow-group-node__toggle\"\n        :aria-label=\"data.collapsed ? messages.expand : messages.collapse\"\n        :aria-expanded=\"!data.collapsed\"\n        :disabled=\"readonly\"\n        @click=\"toggle\"\n      >\n        <ChevronDownIcon />\n      </button>\n      <input\n        v-if=\"editing\"\n        ref=\"input\"\n        v-model=\"draft\"\n        class=\"dou-flow-group-node__input\"\n        :aria-label=\"messages.groupName\"\n        @keydown=\"onKeydown\"\n        @blur=\"finish(true)\"\n      />\n      <span v-else class=\"dou-flow-group-node__title\" @dblclick.stop=\"edit\">\n        {{ data.label || messages.group }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/group-node.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import { useFlowEditor } from "../context.js";
+import { format } from "../locale.js";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, toDisplayString, unref, useTemplateRef, vModelText, withDirectives, withModifiers } from "vue";
+import { ChevronDownIcon } from "@dou-ui/icons";
+// src/components/group-node.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-flow-group-node__head" };
+var _hoisted_2 = [
+	"aria-label",
+	"aria-expanded",
+	"disabled"
+];
+var _hoisted_3 = ["aria-label"];
+var group_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "group-node",
+	props: {
+		node: {},
+		data: {},
+		ports: {},
+		selected: { type: Boolean },
+		readonly: { type: Boolean },
+		updateData: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const { messages, announce } = useFlowEditor();
+		const editing = ref(false);
+		const draft = ref("");
+		const input = useTemplateRef("input");
+		function edit() {
+			if (props.readonly) return;
+			draft.value = props.data.label ?? "";
+			editing.value = true;
+			nextTick(() => {
+				input.value?.focus();
+				input.value?.select();
+			});
+		}
+		function finish(save) {
+			if (!editing.value) return;
+			editing.value = false;
+			if (save && draft.value.trim() !== (props.data.label ?? "")) props.updateData({ label: draft.value.trim() });
+		}
+		function toggle() {
+			const collapsed = !props.data.collapsed;
+			props.updateData({ collapsed: collapsed || void 0 });
+			const t = messages.value;
+			announce(format(collapsed ? t.collapsed : t.expanded, { group: props.data.label || t.group }));
+		}
+		function onKeydown(event) {
+			if (event.isComposing) return;
+			if (event.key === "Enter") finish(true);
+			else if (event.key === "Escape") finish(false);
+			else return;
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["dou-flow-group-node", { "is-collapsed": __props.data.collapsed }]) }, [createElementVNode("div", _hoisted_1, [createElementVNode("button", {
+				type: "button",
+				class: "dou-flow-group-node__toggle",
+				"aria-label": __props.data.collapsed ? unref(messages).expand : unref(messages).collapse,
+				"aria-expanded": !__props.data.collapsed,
+				disabled: __props.readonly,
+				onClick: toggle
+			}, [createVNode(unref(ChevronDownIcon))], 8, _hoisted_2), editing.value ? withDirectives((openBlock(), createElementBlock("input", {
+				key: 0,
+				ref_key: "input",
+				ref: input,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => draft.value = $event),
+				class: "dou-flow-group-node__input",
+				"aria-label": unref(messages).groupName,
+				onKeydown,
+				onBlur: _cache[1] || (_cache[1] = ($event) => finish(true))
+			}, null, 40, _hoisted_3)), [[vModelText, draft.value]]) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: "dou-flow-group-node__title",
+				onDblclick: withModifiers(edit, ["stop"])
+			}, toDisplayString(__props.data.label || unref(messages).group), 33))])], 2);
+		};
+	}
+});
+export { group_node_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=group-node.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/group-node.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-node.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_unref","_createVNode","_withDirectives","_vModelText","_withModifiers","_toDisplayString"],"sources":["../../src/components/group-node.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChevronDownIcon } from '@dou-ui/icons'\nimport { nextTick, ref, useTemplateRef } from 'vue'\nimport { useFlowEditor } from '../context'\nimport { format } from '../locale'\nimport type { NodeViewProps } from '../core/node-types'\nimport type { GroupNodeData } from './group-node'\n\nconst props = defineProps<NodeViewProps<GroupNodeData>>()\nconst { messages, announce } = useFlowEditor()\n\nconst editing = ref(false)\nconst draft = ref('')\nconst input = useTemplateRef<HTMLInputElement>('input')\n\nfunction edit() {\n  if (props.readonly) return\n  draft.value = props.data.label ?? ''\n  editing.value = true\n  void nextTick(() => {\n    input.value?.focus()\n    input.value?.select()\n  })\n}\n\nfunction finish(save: boolean) {\n  if (!editing.value) return\n  editing.value = false\n  if (save && draft.value.trim() !== (props.data.label ?? ''))\n    props.updateData({ label: draft.value.trim() })\n}\n\nfunction toggle() {\n  const collapsed = !props.data.collapsed\n  props.updateData({ collapsed: collapsed || undefined })\n  const t = messages.value\n  announce(format(collapsed ? t.collapsed : t.expanded, { group: props.data.label || t.group }))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.isComposing) return\n  if (event.key === 'Enter') finish(true)\n  else if (event.key === 'Escape') finish(false)\n  else return\n  event.preventDefault()\n  event.stopPropagation()\n}\n</script>\n\n<template>\n  <div class=\"dou-flow-group-node\" :class=\"{ 'is-collapsed': data.collapsed }\">\n    <div class=\"dou-flow-group-node__head\">\n      <button\n        type=\"button\"\n        class=\"dou-flow-group-node__toggle\"\n        :aria-label=\"data.collapsed ? messages.expand : messages.collapse\"\n        :aria-expanded=\"!data.collapsed\"\n        :disabled=\"readonly\"\n        @click=\"toggle\"\n      >\n        <ChevronDownIcon />\n      </button>\n      <input\n        v-if=\"editing\"\n        ref=\"input\"\n        v-model=\"draft\"\n        class=\"dou-flow-group-node__input\"\n        :aria-label=\"messages.groupName\"\n        @keydown=\"onKeydown\"\n        @blur=\"finish(true)\"\n      />\n      <span v-else class=\"dou-flow-group-node__title\" @dblclick.stop=\"edit\">\n        {{ data.label || messages.group }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EACd,MAAM,EAAE,UAAU,aAAa,cAAc;EAE7C,MAAM,UAAU,IAAI,KAAK;EACzB,MAAM,QAAQ,IAAI,EAAE;EACpB,MAAM,QAAQ,eAAiC,OAAO;EAEtD,SAAS,OAAO;GACd,IAAI,MAAM,UAAU;GACpB,MAAM,QAAQ,MAAM,KAAK,SAAS;GAClC,QAAQ,QAAQ;GAChB,eAAoB;IAClB,MAAM,OAAO,MAAM;IACnB,MAAM,OAAO,OAAO;GACtB,CAAC;EACH;EAEA,SAAS,OAAO,MAAe;GAC7B,IAAI,CAAC,QAAQ,OAAO;GACpB,QAAQ,QAAQ;GAChB,IAAI,QAAQ,MAAM,MAAM,KAAK,OAAO,MAAM,KAAK,SAAS,KACtD,MAAM,WAAW,EAAE,OAAO,MAAM,MAAM,KAAK,EAAE,CAAC;EAClD;EAEA,SAAS,SAAS;GAChB,MAAM,YAAY,CAAC,MAAM,KAAK;GAC9B,MAAM,WAAW,EAAE,WAAW,aAAa,KAAA,EAAU,CAAC;GACtD,MAAM,IAAI,SAAS;GACnB,SAAS,OAAO,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC;EAC/F;EAEA,SAAS,UAAU,OAAsB;GACvC,IAAI,MAAM,aAAa;GACvB,IAAI,MAAM,QAAQ,SAAS,OAAO,IAAI;QACjC,IAAI,MAAM,QAAQ,UAAU,OAAO,KAAK;QACxC;GACL,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;;GAIE,OAAAA,UAAA,GAAAC,mBAyBM,OAAA,EAzBD,OAAKC,eAAA,CAAC,uBAAqB,EAAA,gBAA2B,QAAA,KAAK,UAAS,CAAA,CAAA,E,IACvEC,mBAuBM,OAvBN,YAuBM,CAtBJA,mBASS,UAAA;IARP,MAAK;IACL,OAAM;IACL,cAAY,QAAA,KAAK,YAAYC,MAAA,QAAA,CAAQ,CAAC,SAASA,MAAA,QAAA,CAAQ,CAAC;IACxD,iBAAa,CAAG,QAAA,KAAK;IACrB,UAAU,QAAA;IACV,SAAO;G,IAERC,YAAmBD,MAAA,eAAA,CAAA,C,mBAGb,QAAA,QADRE,gBAAAN,UAAA,GAAAC,mBAQE,SAAA;;IANI,SAAA;IAAJ,KAAI;IACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAK,QAAA;IACd,OAAM;IACL,cAAYG,MAAA,QAAA,CAAQ,CAAC;IACZ;IACT,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM,IAAA;G,4BAJJ,CAAAG,YAAA,MAAA,KAAK,C,MAMhBP,UAAA,GAAAC,mBAEO,QAAA;;IAFM,OAAM;IAA8B,YAAQO,cAAO,MAAI,CAAA,MAAA,CAAA;GAC/D,GAAAC,gBAAA,QAAA,KAAK,SAASL,MAAA,QAAA,CAAQ,CAAC,KAAK,GAAA,EAAA,E"}

package/dist/components/group-node2.js

@@ -0,0 +1,42 @@
+import { defineNodeType } from "../core/node-types.js";
+import { drawCard } from "../export/draw.js";
+import group_node_default from "./group-node.js";
+// src/components/group-node.ts
+/**
+* A titled frame that holds other nodes: nodes dropped inside move with it,
+* and it folds down to its title. Not in the palette; add
+* `{ ...groupNode, palette: { label } }` to offer it there.
+*/
+var groupNode = defineNodeType({
+	type: "group",
+	component: group_node_default,
+	container: true,
+	resizable: {
+		minWidth: 160,
+		minHeight: 96
+	},
+	size: {
+		width: 320,
+		height: 200
+	},
+	defaults: () => ({ label: "" }),
+	draw(node, draw) {
+		const title = draw.style("dou-flow-group-node__title");
+		return drawCard(draw, ["is-container"].concat(node.data?.collapsed ? ["is-collapsed"] : [])) + draw.text(node.data?.label || draw.messages.group, {
+			x: 12,
+			y: 0,
+			width: Math.max(0, draw.width - 24),
+			height: 40
+		}, {
+			size: Number.parseFloat(title.fontSize) || 13,
+			weight: title.fontWeight,
+			color: draw.color(title.color),
+			valign: "middle",
+			nowrap: true,
+			lineHeight: 40
+		});
+	}
+});
+export { groupNode };
+
+//# sourceMappingURL=group-node2.js.map

package/dist/components/group-node2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-node2.js","names":["GroupNode"],"sources":["../../src/components/group-node.ts"],"sourcesContent":["import { defineNodeType } from '../core/node-types'\nimport { drawCard } from '../export/draw'\nimport GroupNode from './group-node.vue'\n\nexport interface GroupNodeData {\n  [key: string]: unknown\n  /** The title. */\n  label?: string\n  /** Folded to its title; the nodes inside are hidden and their edges end on it. */\n  collapsed?: boolean\n}\n\n/**\n * A titled frame that holds other nodes: nodes dropped inside move with it,\n * and it folds down to its title. Not in the palette; add\n * `{ ...groupNode, palette: { label } }` to offer it there.\n */\nexport const groupNode = defineNodeType<GroupNodeData>({\n  type: 'group',\n  component: GroupNode,\n  container: true,\n  resizable: { minWidth: 160, minHeight: 96 },\n  size: { width: 320, height: 200 },\n  defaults: () => ({ label: '' }),\n  draw(node, draw) {\n    const title = draw.style('dou-flow-group-node__title')\n    // a picture has nothing to fold: no toggle, the title where it starts\n    return (\n      drawCard(draw, ['is-container'].concat(node.data?.collapsed ? ['is-collapsed'] : [])) +\n      draw.text(\n        node.data?.label || draw.messages.group,\n        { x: 12, y: 0, width: Math.max(0, draw.width - 24), height: 40 },\n        {\n          size: Number.parseFloat(title.fontSize) || 13,\n          weight: title.fontWeight,\n          color: draw.color(title.color),\n          valign: 'middle',\n          nowrap: true,\n          lineHeight: 40,\n        },\n      )\n    )\n  },\n})\n"],"mappings":";;;;;;;;;AAiBA,IAAa,YAAY,eAA8B;CACrD,MAAM;CACN,WAAWA;CACX,WAAW;CACX,WAAW;EAAE,UAAU;EAAK,WAAW;CAAG;CAC1C,MAAM;EAAE,OAAO;EAAK,QAAQ;CAAI;CAChC,iBAAiB,EAAE,OAAO,GAAG;CAC7B,KAAK,MAAM,MAAM;EACf,MAAM,QAAQ,KAAK,MAAM,4BAA4B;EAErD,OACE,SAAS,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,KAAK,MAAM,YAAY,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,IACpF,KAAK,KACH,KAAK,MAAM,SAAS,KAAK,SAAS,OAClC;GAAE,GAAG;GAAI,GAAG;GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,EAAE;GAAG,QAAQ;EAAG,GAC/D;GACE,MAAM,OAAO,WAAW,MAAM,QAAQ,KAAK;GAC3C,QAAQ,MAAM;GACd,OAAO,KAAK,MAAM,MAAM,KAAK;GAC7B,QAAQ;GACR,QAAQ;GACR,YAAY;EACd,CACF;CAEJ;AACF,CAAC"}

package/dist/components/node-view.js

@@ -0,0 +1,6 @@
+import node_view_vue_vue_type_script_setup_true_lang_default from "./node-view.vue_vue_type_script_setup_true_lang.js";
+// src/components/node-view.vue
+var node_view_default = node_view_vue_vue_type_script_setup_true_lang_default;
+export { node_view_default as default };
+
+//# sourceMappingURL=node-view.js.map

package/dist/components/node-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-view.js","names":["_sfc_main"],"sources":["../../src/components/node-view.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { flowNodeKey, type NodeMetrics, type PortAnchor, type PortState } from '../context'\nimport type { FlowNode, FlowPortSpec, PortSide } from '../core/model'\nimport { portSide, portsOf, resizeOf, type NodeTypeSpec } from '../core/node-types'\nimport DefaultNode from './default-node.vue'\nimport FlowPortView from './flow-port.vue'\n\nconst props = defineProps<{\n  node: FlowNode\n  spec: NodeTypeSpec | undefined\n  selected: boolean\n  readonly: boolean\n  dragging: boolean\n  connected: Set<string>\n  portStates: Map<string, PortState> | null\n  roleDescription: string\n  /** The node's accessible name. */\n  label: string\n  /** Read out after the name, e.g. the port counts. */\n  description: string\n  /** Where the nodes being dragged will be put. */\n  dropTarget?: boolean\n}>()\nconst emit = defineEmits<{\n  measure: [id: string, metrics: NodeMetrics]\n  update: [id: string, patch: Record<string, unknown>]\n}>()\n\nconst el = useTemplateRef<HTMLElement>('el')\nconst ports = computed(() => portsOf(props.spec, props.node))\n\n// Ports placed by the node's component, and the ones the editor places.\nconst placed = new Map<string, HTMLElement>()\nconst autoPlaced = new Map<string, HTMLElement>()\nconst placedIds = shallowRef(new Set<string>())\nconst mounted = shallowRef(false)\n\nprovide(flowNodeKey, {\n  node: computed(() => props.node),\n  ports,\n  connected: computed(() => props.connected),\n  portStates: computed(() => props.portStates),\n  registerPort(id, portEl, auto) {\n    if (auto) autoPlaced.set(id, portEl)\n    else {\n      placed.set(id, portEl)\n      placedIds.value = new Set(placed.keys())\n    }\n    scheduleMeasure()\n  },\n  unregisterPort(id, auto) {\n    if (auto) autoPlaced.delete(id)\n    else {\n      placed.delete(id)\n      placedIds.value = new Set(placed.keys())\n    }\n    scheduleMeasure()\n  },\n})\n\nconst autoPorts = computed(() =>\n  mounted.value ? ports.value.filter((port) => !placedIds.value.has(port.id)) : [],\n)\n\n/** Spreads the editor-placed ports evenly along each side. */\nfunction autoStyle(port: FlowPortSpec): CSSProperties {\n  const side = portSide(port)\n  const same = autoPorts.value.filter((p) => portSide(p) === side)\n  const at = `${((same.indexOf(port) + 1) / (same.length + 1)) * 100}%`\n  return side === 'left' || side === 'right' ? { top: at } : { left: at }\n}\n\nfunction measure() {\n  const node = el.value\n  if (!node || !node.offsetWidth) return\n  const box = node.getBoundingClientRect()\n  // The canvas is scaled; measure in its own units.\n  const scale = box.width / node.offsetWidth || 1\n  const anchors = new Map<string, PortAnchor>()\n  for (const port of ports.value) {\n    const portEl = placed.get(port.id) ?? autoPlaced.get(port.id)\n    if (!portEl) continue\n    const rect = portEl.getBoundingClientRect()\n    const side: PortSide = portSide(port)\n    anchors.set(port.id, {\n      x: (rect.left + rect.width / 2 - box.left) / scale,\n      y: (rect.top + rect.height / 2 - box.top) / scale,\n      side,\n    })\n  }\n  emit('measure', props.node.id, {\n    width: node.offsetWidth,\n    height: node.offsetHeight,\n    ports: anchors,\n  })\n}\n\nlet pending = false\nfunction scheduleMeasure() {\n  if (pending) return\n  pending = true\n  void nextTick(() => {\n    pending = false\n    measure()\n  })\n}\n\nlet observer: ResizeObserver | undefined\nonMounted(() => {\n  mounted.value = true\n  if (typeof ResizeObserver !== 'undefined') {\n    observer = new ResizeObserver(() => measure())\n    observer.observe(el.value!)\n  }\n  scheduleMeasure()\n})\nonBeforeUnmount(() => observer?.disconnect())\n\n// Content changes can move ports without resizing the node.\nwatch(\n  () => [props.node.data, props.node.type, ports.value],\n  () => scheduleMeasure(),\n  { flush: 'post' },\n)\n\nconst container = computed(() => !!props.spec?.container)\n// A collapsed container is as tall as its content, its title.\nconst collapsed = computed(() => container.value && !!props.node.data?.collapsed)\nconst resizable = computed(\n  () => !!resizeOf(props.spec, props.node) && !props.readonly && !collapsed.value,\n)\n\n/** How far the node is drawn turned, so its selection outline turns with it. */\nconst rotation = computed(() => props.spec?.rotation?.(props.node) ?? 0)\n\nconst style = computed<CSSProperties>(() => ({\n  transform: `translate(${props.node.x}px, ${props.node.y}px)`,\n  '--dou-flow-node-rotation': rotation.value ? `${rotation.value}deg` : undefined,\n  width: props.node.width != null ? `${props.node.width}px` : undefined,\n  height: props.node.height != null && !collapsed.value ? `${props.node.height}px` : undefined,\n}))\n\nconst viewProps = computed(() => ({\n  node: props.node,\n  data: props.node.data ?? {},\n  ports: ports.value,\n  selected: props.selected,\n  readonly: props.readonly,\n  updateData: (patch: Record<string, unknown>) => emit('update', props.node.id, patch),\n}))\n</script>\n\n<template>\n  <div\n    ref=\"el\"\n    class=\"dou-flow-editor__node\"\n    :class=\"{\n      'is-selected': selected,\n      'is-locked': node.locked,\n      'is-dragging': dragging,\n      'is-sized': node.width != null,\n      'is-container': container,\n      'is-bare': spec?.frame === false,\n      'is-turned': !!rotation,\n      'is-collapsed': collapsed,\n      'is-drop-target': dropTarget,\n    }\"\n    :style=\"style\"\n    :data-node-id=\"node.id\"\n    role=\"group\"\n    :aria-roledescription=\"roleDescription\"\n    :aria-label=\"label\"\n    :aria-description=\"description || undefined\"\n    tabindex=\"-1\"\n  >\n    <component :is=\"spec?.component ?? DefaultNode\" v-bind=\"viewProps\" />\n    <FlowPortView\n      v-for=\"port in autoPorts\"\n      :id=\"port.id\"\n      :key=\"port.id\"\n      auto\n      class=\"is-auto\"\n      :style=\"autoStyle(port)\"\n    />\n    <span v-if=\"resizable && selected\" class=\"dou-flow-editor__resize\" aria-hidden=\"true\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/node-view.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,179 @@
+import { flowNodeKey } from "../context.js";
+import { portSide, portsOf, resizeOf } from "../core/node-types.js";
+import flow_port_default from "./flow-port.js";
+import default_node_default from "./default-node.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, renderList, resolveDynamicComponent, shallowRef, useTemplateRef, watch } from "vue";
+// src/components/node-view.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-node-id",
+	"aria-roledescription",
+	"aria-label",
+	"aria-description"
+];
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-flow-editor__resize",
+	"aria-hidden": "true"
+};
+var node_view_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "node-view",
+	props: {
+		node: {},
+		spec: {},
+		selected: { type: Boolean },
+		readonly: { type: Boolean },
+		dragging: { type: Boolean },
+		connected: {},
+		portStates: {},
+		roleDescription: {},
+		label: {},
+		description: {},
+		dropTarget: { type: Boolean }
+	},
+	emits: ["measure", "update"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const el = useTemplateRef("el");
+		const ports = computed(() => portsOf(props.spec, props.node));
+		const placed = /* @__PURE__ */ new Map();
+		const autoPlaced = /* @__PURE__ */ new Map();
+		const placedIds = shallowRef(/* @__PURE__ */ new Set());
+		const mounted = shallowRef(false);
+		provide(flowNodeKey, {
+			node: computed(() => props.node),
+			ports,
+			connected: computed(() => props.connected),
+			portStates: computed(() => props.portStates),
+			registerPort(id, portEl, auto) {
+				if (auto) autoPlaced.set(id, portEl);
+				else {
+					placed.set(id, portEl);
+					placedIds.value = new Set(placed.keys());
+				}
+				scheduleMeasure();
+			},
+			unregisterPort(id, auto) {
+				if (auto) autoPlaced.delete(id);
+				else {
+					placed.delete(id);
+					placedIds.value = new Set(placed.keys());
+				}
+				scheduleMeasure();
+			}
+		});
+		const autoPorts = computed(() => mounted.value ? ports.value.filter((port) => !placedIds.value.has(port.id)) : []);
+		/** Spreads the editor-placed ports evenly along each side. */
+		function autoStyle(port) {
+			const side = portSide(port);
+			const same = autoPorts.value.filter((p) => portSide(p) === side);
+			const at = `${(same.indexOf(port) + 1) / (same.length + 1) * 100}%`;
+			return side === "left" || side === "right" ? { top: at } : { left: at };
+		}
+		function measure() {
+			const node = el.value;
+			if (!node || !node.offsetWidth) return;
+			const box = node.getBoundingClientRect();
+			const scale = box.width / node.offsetWidth || 1;
+			const anchors = /* @__PURE__ */ new Map();
+			for (const port of ports.value) {
+				const portEl = placed.get(port.id) ?? autoPlaced.get(port.id);
+				if (!portEl) continue;
+				const rect = portEl.getBoundingClientRect();
+				const side = portSide(port);
+				anchors.set(port.id, {
+					x: (rect.left + rect.width / 2 - box.left) / scale,
+					y: (rect.top + rect.height / 2 - box.top) / scale,
+					side
+				});
+			}
+			emit("measure", props.node.id, {
+				width: node.offsetWidth,
+				height: node.offsetHeight,
+				ports: anchors
+			});
+		}
+		let pending = false;
+		function scheduleMeasure() {
+			if (pending) return;
+			pending = true;
+			nextTick(() => {
+				pending = false;
+				measure();
+			});
+		}
+		let observer;
+		onMounted(() => {
+			mounted.value = true;
+			if (typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver(() => measure());
+				observer.observe(el.value);
+			}
+			scheduleMeasure();
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		watch(() => [
+			props.node.data,
+			props.node.type,
+			ports.value
+		], () => scheduleMeasure(), { flush: "post" });
+		const container = computed(() => !!props.spec?.container);
+		const collapsed = computed(() => container.value && !!props.node.data?.collapsed);
+		const resizable = computed(() => !!resizeOf(props.spec, props.node) && !props.readonly && !collapsed.value);
+		/** How far the node is drawn turned, so its selection outline turns with it. */
+		const rotation = computed(() => props.spec?.rotation?.(props.node) ?? 0);
+		const style = computed(() => ({
+			transform: `translate(${props.node.x}px, ${props.node.y}px)`,
+			"--dou-flow-node-rotation": rotation.value ? `${rotation.value}deg` : void 0,
+			width: props.node.width != null ? `${props.node.width}px` : void 0,
+			height: props.node.height != null && !collapsed.value ? `${props.node.height}px` : void 0
+		}));
+		const viewProps = computed(() => ({
+			node: props.node,
+			data: props.node.data ?? {},
+			ports: ports.value,
+			selected: props.selected,
+			readonly: props.readonly,
+			updateData: (patch) => emit("update", props.node.id, patch)
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				class: normalizeClass(["dou-flow-editor__node", {
+					"is-selected": __props.selected,
+					"is-locked": __props.node.locked,
+					"is-dragging": __props.dragging,
+					"is-sized": __props.node.width != null,
+					"is-container": container.value,
+					"is-bare": __props.spec?.frame === false,
+					"is-turned": !!rotation.value,
+					"is-collapsed": collapsed.value,
+					"is-drop-target": __props.dropTarget
+				}]),
+				style: normalizeStyle(style.value),
+				"data-node-id": __props.node.id,
+				role: "group",
+				"aria-roledescription": __props.roleDescription,
+				"aria-label": __props.label,
+				"aria-description": __props.description || void 0,
+				tabindex: "-1"
+			}, [
+				(openBlock(), createBlock(resolveDynamicComponent(__props.spec?.component ?? default_node_default), normalizeProps(guardReactiveProps(viewProps.value)), null, 16)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(autoPorts.value, (port) => {
+					return openBlock(), createBlock(flow_port_default, {
+						id: port.id,
+						key: port.id,
+						auto: "",
+						class: "is-auto",
+						style: normalizeStyle(autoStyle(port))
+					}, null, 8, ["id", "style"]);
+				}), 128)),
+				resizable.value && __props.selected ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true)
+			], 14, _hoisted_1);
+		};
+	}
+});
+export { node_view_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=node-view.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/node-view.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-view.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createBlock","_resolveDynamicComponent","DefaultNode","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","FlowPortView","_createCommentVNode"],"sources":["../../src/components/node-view.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { flowNodeKey, type NodeMetrics, type PortAnchor, type PortState } from '../context'\nimport type { FlowNode, FlowPortSpec, PortSide } from '../core/model'\nimport { portSide, portsOf, resizeOf, type NodeTypeSpec } from '../core/node-types'\nimport DefaultNode from './default-node.vue'\nimport FlowPortView from './flow-port.vue'\n\nconst props = defineProps<{\n  node: FlowNode\n  spec: NodeTypeSpec | undefined\n  selected: boolean\n  readonly: boolean\n  dragging: boolean\n  connected: Set<string>\n  portStates: Map<string, PortState> | null\n  roleDescription: string\n  /** The node's accessible name. */\n  label: string\n  /** Read out after the name, e.g. the port counts. */\n  description: string\n  /** Where the nodes being dragged will be put. */\n  dropTarget?: boolean\n}>()\nconst emit = defineEmits<{\n  measure: [id: string, metrics: NodeMetrics]\n  update: [id: string, patch: Record<string, unknown>]\n}>()\n\nconst el = useTemplateRef<HTMLElement>('el')\nconst ports = computed(() => portsOf(props.spec, props.node))\n\n// Ports placed by the node's component, and the ones the editor places.\nconst placed = new Map<string, HTMLElement>()\nconst autoPlaced = new Map<string, HTMLElement>()\nconst placedIds = shallowRef(new Set<string>())\nconst mounted = shallowRef(false)\n\nprovide(flowNodeKey, {\n  node: computed(() => props.node),\n  ports,\n  connected: computed(() => props.connected),\n  portStates: computed(() => props.portStates),\n  registerPort(id, portEl, auto) {\n    if (auto) autoPlaced.set(id, portEl)\n    else {\n      placed.set(id, portEl)\n      placedIds.value = new Set(placed.keys())\n    }\n    scheduleMeasure()\n  },\n  unregisterPort(id, auto) {\n    if (auto) autoPlaced.delete(id)\n    else {\n      placed.delete(id)\n      placedIds.value = new Set(placed.keys())\n    }\n    scheduleMeasure()\n  },\n})\n\nconst autoPorts = computed(() =>\n  mounted.value ? ports.value.filter((port) => !placedIds.value.has(port.id)) : [],\n)\n\n/** Spreads the editor-placed ports evenly along each side. */\nfunction autoStyle(port: FlowPortSpec): CSSProperties {\n  const side = portSide(port)\n  const same = autoPorts.value.filter((p) => portSide(p) === side)\n  const at = `${((same.indexOf(port) + 1) / (same.length + 1)) * 100}%`\n  return side === 'left' || side === 'right' ? { top: at } : { left: at }\n}\n\nfunction measure() {\n  const node = el.value\n  if (!node || !node.offsetWidth) return\n  const box = node.getBoundingClientRect()\n  // The canvas is scaled; measure in its own units.\n  const scale = box.width / node.offsetWidth || 1\n  const anchors = new Map<string, PortAnchor>()\n  for (const port of ports.value) {\n    const portEl = placed.get(port.id) ?? autoPlaced.get(port.id)\n    if (!portEl) continue\n    const rect = portEl.getBoundingClientRect()\n    const side: PortSide = portSide(port)\n    anchors.set(port.id, {\n      x: (rect.left + rect.width / 2 - box.left) / scale,\n      y: (rect.top + rect.height / 2 - box.top) / scale,\n      side,\n    })\n  }\n  emit('measure', props.node.id, {\n    width: node.offsetWidth,\n    height: node.offsetHeight,\n    ports: anchors,\n  })\n}\n\nlet pending = false\nfunction scheduleMeasure() {\n  if (pending) return\n  pending = true\n  void nextTick(() => {\n    pending = false\n    measure()\n  })\n}\n\nlet observer: ResizeObserver | undefined\nonMounted(() => {\n  mounted.value = true\n  if (typeof ResizeObserver !== 'undefined') {\n    observer = new ResizeObserver(() => measure())\n    observer.observe(el.value!)\n  }\n  scheduleMeasure()\n})\nonBeforeUnmount(() => observer?.disconnect())\n\n// Content changes can move ports without resizing the node.\nwatch(\n  () => [props.node.data, props.node.type, ports.value],\n  () => scheduleMeasure(),\n  { flush: 'post' },\n)\n\nconst container = computed(() => !!props.spec?.container)\n// A collapsed container is as tall as its content, its title.\nconst collapsed = computed(() => container.value && !!props.node.data?.collapsed)\nconst resizable = computed(\n  () => !!resizeOf(props.spec, props.node) && !props.readonly && !collapsed.value,\n)\n\n/** How far the node is drawn turned, so its selection outline turns with it. */\nconst rotation = computed(() => props.spec?.rotation?.(props.node) ?? 0)\n\nconst style = computed<CSSProperties>(() => ({\n  transform: `translate(${props.node.x}px, ${props.node.y}px)`,\n  '--dou-flow-node-rotation': rotation.value ? `${rotation.value}deg` : undefined,\n  width: props.node.width != null ? `${props.node.width}px` : undefined,\n  height: props.node.height != null && !collapsed.value ? `${props.node.height}px` : undefined,\n}))\n\nconst viewProps = computed(() => ({\n  node: props.node,\n  data: props.node.data ?? {},\n  ports: ports.value,\n  selected: props.selected,\n  readonly: props.readonly,\n  updateData: (patch: Record<string, unknown>) => emit('update', props.node.id, patch),\n}))\n</script>\n\n<template>\n  <div\n    ref=\"el\"\n    class=\"dou-flow-editor__node\"\n    :class=\"{\n      'is-selected': selected,\n      'is-locked': node.locked,\n      'is-dragging': dragging,\n      'is-sized': node.width != null,\n      'is-container': container,\n      'is-bare': spec?.frame === false,\n      'is-turned': !!rotation,\n      'is-collapsed': collapsed,\n      'is-drop-target': dropTarget,\n    }\"\n    :style=\"style\"\n    :data-node-id=\"node.id\"\n    role=\"group\"\n    :aria-roledescription=\"roleDescription\"\n    :aria-label=\"label\"\n    :aria-description=\"description || undefined\"\n    tabindex=\"-1\"\n  >\n    <component :is=\"spec?.component ?? DefaultNode\" v-bind=\"viewProps\" />\n    <FlowPortView\n      v-for=\"port in autoPorts\"\n      :id=\"port.id\"\n      :key=\"port.id\"\n      auto\n      class=\"is-auto\"\n      :style=\"autoStyle(port)\"\n    />\n    <span v-if=\"resizable && selected\" class=\"dou-flow-editor__resize\" aria-hidden=\"true\" />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/context.js

@@ -0,0 +1,13 @@
+import { inject } from "vue";
+// src/context.ts
+var flowEditorKey = Symbol("dou-flow-editor");
+/** The surrounding flow editor; for controls and panels placed in its default slot. */
+function useFlowEditor() {
+	const context = inject(flowEditorKey, null);
+	if (!context) throw new Error("[@dou-ui/flow] useFlowEditor() must be called inside <DouFlowEditor>");
+	return context;
+}
+var flowNodeKey = Symbol("dou-flow-node");
+export { flowEditorKey, flowNodeKey, useFlowEditor };
+
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../src/context.ts"],"sourcesContent":["import type { ContextMenuItem } from 'dou-ui'\nimport type { FlowExportOptions, FlowImageOptions } from './export/draw'\nimport type { FlowTree } from './core/groups'\nimport { inject, type ComputedRef, type InjectionKey, type Ref, type ShallowRef } from 'vue'\nimport type { FlowMessages, FlowMessagesOverride } from './locale'\nimport type {\n  FlowData,\n  FlowDocument,\n  FlowEndpoint,\n  FlowNode,\n  FlowPortSpec,\n  FlowSelection,\n  FlowViewport,\n  Point,\n  PortSide,\n  Rect,\n} from './core/model'\nimport type { FlowConnection, PortTypes, PortTypeSpec } from './core/connect'\nimport type { EdgeTypeSpec } from './core/edge-types'\nimport type { FlowExtension } from './core/extension'\nimport type { FlowMenuTarget } from './core/menu'\nimport type { NodeTypeSpec } from './core/node-types'\nimport type { FlowTransaction, FlowTransactionMeta } from './core/transaction'\n\nexport type FlowPanelPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n\nexport interface FlowControlsProps {\n  /** Corner of the editor to sit in. */\n  placement?: FlowPanelPlacement\n  /** Show undo and redo. */\n  history?: boolean\n  /** Show the tidy button, which lays the nodes out along their edges. */\n  tidy?: boolean\n}\n\nexport interface FlowMinimapProps {\n  /** Corner of the editor to sit in. */\n  placement?: FlowPanelPlacement\n  /** Size of the map in px. */\n  width?: number\n  height?: number\n}\n\n/** What the find panel looks for: text in the nodes' names. */\nexport interface FlowSearchQuery {\n  search: string\n  /** Tell capital letters from small ones. */\n  caseSensitive?: boolean\n}\n\nexport interface FlowEditorProps {\n  /**\n   * What the editor is made of: node types, port types, rules, keys and\n   * layers. `flowKit()` by default.\n   */\n  extensions?: (FlowExtension | FlowExtension[])[]\n  /** Node types besides the extensions'; they win over an extension's type of the same name. */\n  nodeTypes?: NodeTypeSpec<any>[]\n  /** Edge types besides the extensions'; they win over an extension's type of the same name. */\n  edgeTypes?: EdgeTypeSpec<any>[]\n  /** The type of edges without `type`, new ones included. `bezier` by default. */\n  edgeType?: string\n  /**\n   * Below this zoom nodes are drawn as plain boxes with their names, which\n   * keeps a large flow quick; see the `simple` slot. `0` never does. `0.4` by default.\n   */\n  simpleZoom?: number\n  /** Grid step for snapping and arrow keys, in px. `0` turns snapping to the grid off. */\n  grid?: number\n  /** Line nodes up with their neighbours while dragging. */\n  guides?: boolean\n  minZoom?: number\n  maxZoom?: number\n  /**\n   * Which way the flow runs: `horizontal` left to right, `vertical` top to\n   * bottom. Tidying lays nodes out this way.\n   */\n  direction?: 'horizontal' | 'vertical'\n  /** Fit all nodes into view once they are measured. */\n  fitView?: boolean\n  /**\n   * The furthest `fit-view` zooms out, so text stays readable; a larger flow\n   * starts at its top left and is panned to. `0` always fits everything.\n   */\n  fitMinZoom?: number\n  /** View, select and pan, but not change anything. */\n  readonly?: boolean\n  /** The built-in find panel (`Ctrl/⌘+F`). Off, the keys are left to the page. On by default. */\n  searchable?: boolean\n  /** Scrolling pans the canvas; with Ctrl / ⌘ it zooms. Off, only Ctrl / ⌘ + scroll zooms. */\n  panOnScroll?: boolean\n  /** Looks and connection rules of port types, by the name used in `dataType`. */\n  portTypes?: PortTypes\n  /** Refuse edges that would close a cycle. */\n  acyclic?: boolean\n  /**\n   * The last check before an edge is made. Return `false` to refuse it, or a\n   * sentence saying why. Called for every port while an edge is dragged.\n   */\n  canConnect?: (connection: FlowConnection, doc: FlowDocument) => boolean | string\n  /** Accessible name of the canvas. */\n  ariaLabel?: string\n  /** Texts to change; only the ones given are replaced. */\n  messages?: FlowMessagesOverride\n}\n\nexport interface FlowEditorEmits {\n  /** Every change to the document, with its steps; `update:modelValue` follows. */\n  transaction: [tr: FlowTransaction]\n  /**\n   * An extension's `transaction` hook cancelled a change; `tr.cancelReason`\n   * says why, and the editor shows it and reads it out.\n   */\n  transactionCancel: [tr: FlowTransaction]\n  nodeClick: [node: FlowNode, event: MouseEvent]\n  nodeDblclick: [node: FlowNode, event: MouseEvent]\n  nodeContextmenu: [node: FlowNode, event: MouseEvent]\n  edgeClick: [edge: FlowDocument['edges'][number], event: MouseEvent]\n  edgeContextmenu: [edge: FlowDocument['edges'][number], event: MouseEvent]\n  /** Clicking the empty canvas; `point` is in canvas coordinates. */\n  canvasClick: [point: Point, event: MouseEvent]\n  /**\n   * Right click or long press on the empty canvas. The context menu events\n   * come before the editor's own menu; `event.preventDefault()` keeps it closed.\n   */\n  canvasContextmenu: [point: Point, event: MouseEvent]\n  /** An edge was drawn, or moved to another port. */\n  connect: [edge: FlowDocument['edges'][number]]\n  /**\n   * A new edge was dropped on empty canvas; `point` is where, in canvas\n   * coordinates. The editor then offers the node types that can take the\n   * edge; `event.preventDefault()` handles it yourself instead.\n   */\n  connectToCanvas: [from: Required<FlowEndpoint>, point: Point, event: MouseEvent]\n}\n\nexport interface FlowEditorExpose {\n  /** Applies changes as one transaction, one undo step. */\n  transact: (fn: (tr: FlowTransaction) => void, meta?: FlowTransactionMeta) => FlowTransaction\n  undo: () => boolean\n  redo: () => boolean\n  readonly canUndo: boolean\n  readonly canRedo: boolean\n  /** Shows all nodes, or the given ones. */\n  fit: (ids?: string[]) => void\n  zoomTo: (zoom: number) => void\n  zoomIn: () => void\n  zoomOut: () => void\n  /** Centers a node in view without changing the zoom. */\n  centerNode: (id: string) => void\n  /** Opens the find panel (`Ctrl/⌘+F`), with a query put in; `false` when `searchable` is off. */\n  openSearch: (query?: Partial<FlowSearchQuery>) => boolean\n  /** Closes the find panel; `false` when it was not open. */\n  closeSearch: () => boolean\n  /** The ids of the nodes whose names contain the search, in reading order. */\n  findNodes: (query: FlowSearchQuery) => string[]\n  /**\n   * Moves the view like the user's pans do: no further than having the nodes\n   * just leave it. `v-model:viewport` goes anywhere.\n   */\n  setViewport: (viewport: FlowViewport, animate?: boolean) => void\n  /** Converts a point on screen (client coordinates) to canvas coordinates. */\n  toCanvas: (point: Point) => Point\n  /** A node's measured box in canvas coordinates. */\n  getNodeRect: (id: string) => Rect | null\n  /**\n   * The flow as an SVG document, as it looks now: every node and edge, what\n   * is in view, or the selected ones (it throws when nothing is selected). Colors are written as `rgb(…)`, `rgba(…)` or `#rrggbb`, so\n   * vector editors read them; nodes are drawn by their type's `draw`.\n   */\n  exportSVG: (options?: FlowExportOptions) => string\n  /** The flow as a PNG image, with images embedded where their address can be read. */\n  exportPNG: (options?: FlowImageOptions) => Promise<Blob>\n  /**\n   * Lays nodes out in columns along their edges, as one undo step: the given\n   * ones, the selection when two or more nodes are selected, or all.\n   */\n  tidy: (ids?: string[]) => void\n  /**\n   * Ids of edges whose ports no longer fit: a port is gone, or the types of\n   * its two ends don't match any more. They are drawn red and dashed.\n   */\n  readonly staleEdges: string[]\n  /** Removes the stale edges as one undo step; returns how many. */\n  removeStaleEdges: () => number\n  /**\n   * Adds a node of a type with its defaults and selects it, as one undo\n   * step; returns its id. See `FlowInsertOptions` for where it goes.\n   */\n  insertNode: (type: string, options?: FlowInsertOptions) => string | null\n  /**\n   * Starts dragging a new node of a type from `event`, a `pointerdown` on\n   * any element on the page; letting go over the canvas adds it there, and\n   * Escape cancels. The click that ends a drag is stopped. Returns `false`\n   * when nothing was started.\n   */\n  startInsertDrag: (type: string, event: PointerEvent) => boolean\n  /** Node types with a `palette` entry, in the order they were given. */\n  readonly paletteTypes: NodeTypeSpec[]\n  /** Selects an edge and opens the text field on its label. */\n  editLabel: (id: string) => void\n  /**\n   * Puts nodes, the selected ones by default, into a new container of\n   * `type` (`'group'` by default) drawn around them, as one undo step;\n   * returns its id, or `null` when nothing was grouped.\n   */\n  groupNodes: (ids?: string[], type?: string) => string | null\n  /** Removes a container and keeps the nodes inside, as one undo step. */\n  ungroupNode: (id: string) => boolean\n  /**\n   * Takes nodes, the selected ones by default, out of their groups and puts\n   * them just below, as one undo step; returns how many moved.\n   */\n  leaveGroup: (ids?: string[]) => number\n}\n\nexport interface FlowEditorSlots {\n  /** Panels over the canvas, e.g. `DouFlowControls`. */\n  default?: () => unknown\n  /** What follows the pointer while a new node is dragged in. */\n  ghost?: (props: { spec: NodeTypeSpec; over: boolean }) => unknown\n  /** Replaces the list offered when an edge is dropped on the empty canvas. */\n  quickAdd?: (props: {\n    types: NodeTypeSpec[]\n    choose: (type: string) => void\n    close: () => void\n  }) => unknown\n  /** A node's content while zoomed out past `simple-zoom`; its name by default. */\n  simple?: (props: { node: FlowNode }) => unknown\n}\n\nexport interface FlowInsertOptions {\n  /**\n   * Where the node goes, in canvas coordinates: its centre, or with `from`,\n   * the port that takes the edge. Without it the node goes after the one\n   * selected node, connected to it when it can be, or else in the middle\n   * of the view; either way clear of other nodes.\n   */\n  at?: Point\n  /** Connect the new node to this port, through the first port that can take it. */\n  from?: Required<FlowEndpoint>\n  /** Move focus to the new node, so keys such as undo act on it. `true` by default. */\n  focus?: boolean\n  /** Merged over the type's `defaults()`. */\n  data?: FlowData\n  /** The node's size instead of the type's `size`. */\n  size?: { width?: number; height?: number }\n}\n\n/** Where a port's centre is, from its node's top left corner. */\nexport interface PortAnchor extends Point {\n  side: PortSide\n}\n\nexport interface NodeMetrics {\n  width: number\n  height: number\n  ports: Map<string, PortAnchor>\n}\n\n/** What `previewNode` can show changed: the box, and the data. */\nexport type FlowNodePreview = Partial<Pick<FlowNode, 'x' | 'y' | 'width' | 'height' | 'data'>>\n\n/** How a port shows while an edge is being drawn. */\nexport type PortState = 'active' | 'valid' | 'candidate' | 'refused'\n\nexport interface FlowEditorContext {\n  doc: Ref<FlowDocument>\n  selection: Ref<FlowSelection>\n  viewport: Ref<FlowViewport>\n  /** See `FlowEditorExpose.setViewport`; writing `viewport` goes anywhere. */\n  setViewport: FlowEditorExpose['setViewport']\n  readonly: ComputedRef<boolean>\n  messages: ComputedRef<FlowMessages>\n  minZoom: ComputedRef<number>\n  maxZoom: ComputedRef<number>\n  transact: FlowEditorExpose['transact']\n  undo: () => boolean\n  redo: () => boolean\n  canUndo: Ref<boolean>\n  canRedo: Ref<boolean>\n  fit: FlowEditorExpose['fit']\n  zoomTo: FlowEditorExpose['zoomTo']\n  zoomIn: () => void\n  zoomOut: () => void\n  /** The registered type of a port, if any. */\n  portTypeOf: (port: FlowPortSpec) => PortTypeSpec | undefined\n  /** A port type's color as CSS. */\n  colorOf: (spec: PortTypeSpec | undefined) => string | undefined\n  getNodeRect: FlowEditorExpose['getNodeRect']\n  exportSVG: FlowEditorExpose['exportSVG']\n  exportPNG: FlowEditorExpose['exportPNG']\n  tidy: FlowEditorExpose['tidy']\n  centerNode: FlowEditorExpose['centerNode']\n  /** Says `text` to screen readers. */\n  announce: (text: string) => void\n  /** The editor's size on screen, in px. */\n  size: Ref<{ width: number; height: number }>\n  selectedNodes: ComputedRef<Set<string>>\n  insertNode: FlowEditorExpose['insertNode']\n  /** Node types with a `palette` entry, in the order they were given. */\n  paletteTypes: ComputedRef<NodeTypeSpec[]>\n  startInsertDrag: FlowEditorExpose['startInsertDrag']\n  editLabel: FlowEditorExpose['editLabel']\n  groupNodes: FlowEditorExpose['groupNodes']\n  ungroupNode: FlowEditorExpose['ungroupNode']\n  leaveGroup: FlowEditorExpose['leaveGroup']\n  /** Which node is inside which, from the nodes' `parent`. */\n  tree: ComputedRef<FlowTree>\n  /** Whether the node's type can hold other nodes. */\n  isContainer: (node: FlowNode) => boolean\n  /** How far the node is drawn turned about its centre, from its type's `rotation`. */\n  nodeRotation: (id: string) => number\n  /**\n   * While nodes are moved or resized, or an edge is bent: the document\n   * changes on every frame until the pointer is let go.\n   */\n  gesturing: ComputedRef<boolean>\n  /**\n   * Shows a node as if `patch` were applied, without changing the document:\n   * its frame, ports, edges and `getNodeRect` all follow. For handles that\n   * change the document once, when let go; `null` shows it as it is again,\n   * and must be passed when the drag ends or is cancelled. `patch.data`\n   * replaces the node's data, it is not merged. Only this editor shows it:\n   * peers see the change once it is committed. A preview is dropped when\n   * its node leaves the document.\n   */\n  previewNode: (id: string, patch: FlowNodePreview | null) => void\n  /** The edge being drawn, as an SVG path in canvas coordinates. */\n  connectingPath: ComputedRef<string | null>\n  /** The editor's element. */\n  root: Readonly<ShallowRef<HTMLElement | null>>\n  /**\n   * Opens the context menu for a target at a point on screen; `false` when\n   * no extension has items for it. Pass the button that opens it as `from`:\n   * the menu then opens below the button instead of at the point, or above\n   * it when there is no room, and pressing the button again closes it.\n   */\n  openMenu: (target: FlowMenuTarget, client: Point, from?: Element) => boolean\n  /** The items the context menu has for a target, as `openMenu` shows them. */\n  menuItems: (target: FlowMenuTarget) => ContextMenuItem[]\n  /**\n   * Opens the editor's menu with these items, e.g. the choices behind a\n   * toolbar button; `from` works as in `openMenu`.\n   */\n  showMenu: (\n    items: ContextMenuItem[],\n    client: Point,\n    from?: Element,\n    options?: { focusChecked?: boolean },\n  ) => boolean\n  /** The element that opened the menu, while it is open, e.g. to mark a button expanded. */\n  menuFrom: Readonly<ShallowRef<Element | null>>\n  toCanvas: (point: Point) => Point\n  /** Copies the selected nodes to the clipboard; `false` when none are selected. */\n  copy: () => boolean\n  cut: () => boolean\n  /** Pastes what was copied, at `at` (canvas coordinates) or next to the original. */\n  paste: (at?: Point) => Promise<boolean>\n  /** Adds a copy of the selected nodes next to them. */\n  duplicate: () => void\n  /** Deletes the selected nodes and edges, except locked nodes. */\n  deleteSelection: () => void\n  selectAll: () => void\n}\n\nexport const flowEditorKey: InjectionKey<FlowEditorContext> = Symbol('dou-flow-editor')\n\n/** The surrounding flow editor; for controls and panels placed in its default slot. */\nexport function useFlowEditor() {\n  const context = inject(flowEditorKey, null)\n  if (!context)\n    throw new Error('[@dou-ui/flow] useFlowEditor() must be called inside <DouFlowEditor>')\n  return context\n}\n\nexport interface FlowNodeContext {\n  node: ComputedRef<FlowNode>\n  ports: ComputedRef<FlowPortSpec[]>\n  /** Port ids with at least one edge. */\n  connected: ComputedRef<Set<string>>\n  /** While an edge is being drawn, how each port shows; `null` otherwise. */\n  portStates: ComputedRef<Map<string, PortState> | null>\n  registerPort: (id: string, el: HTMLElement, auto?: boolean) => void\n  unregisterPort: (id: string, auto?: boolean) => void\n}\n\nexport const flowNodeKey: InjectionKey<FlowNodeContext> = Symbol('dou-flow-node')\n"],"mappings":";;AA8WA,IAAa,gBAAiD,OAAO,iBAAiB;;AAGtF,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,OAAO,eAAe,IAAI;CAC1C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,sEAAsE;CACxF,OAAO;AACT;AAaA,IAAa,cAA6C,OAAO,eAAe"}