@conduction/nextcloud-vue 2.72.0 → 2.73.1

package/dist/esm/components/CnGraphCanvas/CnGraphCanvas.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnGraphCanvas.vue3.js","sources":["../../../../src/components/CnGraphCanvas/CnGraphCanvas.vue?vue&type=template&id=1d8bc107&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>\n  - SPDX-License-Identifier: EUPL-1.2\n  -->\n<template>\n\t<div class=\"cn-graph-canvas\" @drop=\"onDrop\" @dragover.prevent>\n\t\t<VueFlow\n\t\t\t:nodes=\"nodes\"\n\t\t\t:edges=\"edges\"\n\t\t\t:minZoom=\"minZoom\"\n\t\t\t:maxZoom=\"maxZoom\"\n\t\t\t:fitViewOnInit=\"fitView\"\n\t\t\t:snapToGrid=\"snapToGrid\"\n\t\t\t:snapGrid=\"snapGrid\"\n\t\t\t:nodesDraggable=\"interactive\"\n\t\t\t:nodesConnectable=\"interactive\"\n\t\t\t:elementsSelectable=\"interactive\"\n\t\t\t:connectionMode=\"connectionMode\"\n\t\t\t@nodesChange=\"onNodesChange\"\n\t\t\t@edgesChange=\"onEdgesChange\"\n\t\t\t@connect=\"onConnect\"\n\t\t\t@nodeClick=\"onNodeClick\"\n\t\t\t@edgeClick=\"onEdgeClick\"\n\t\t\t@paneClick=\"onPaneClick\">\n\t\t\t<!-- Per-type node components, Vue Flow's convention. A host that\n\t\t\t     registers `type: 'trigger'` gets `#node-trigger`; anything\n\t\t\t     unregistered falls back to CnFlowNode, which carries the\n\t\t\t     keyboard contract. -->\n\t\t\t<template #node-default=\"nodeProps\">\n\t\t\t\t<!-- `@connect` routes a KEYBOARD-completed connection into the\n\t\t\t\t     same handler as a pointer one, so `onConnect` is the single\n\t\t\t\t     place a new edge leaves this component regardless of input.\n\t\t\t\t     Without it the keyboard path wrote into Vue Flow's internal\n\t\t\t\t     graph and the host never heard about it — the edge drew and\n\t\t\t\t     the save dropped it. -->\n\t\t\t\t<CnFlowNode\n\t\t\t\t\tv-bind=\"nodeProps\"\n\t\t\t\t\t:deletable=\"!readOnly\"\n\t\t\t\t\t@connect=\"onConnect\"\n\t\t\t\t\t@remove=\"onNodeRemove\">\n\t\t\t\t\t<template #default=\"slotProps\">\n\t\t\t\t\t\t<!-- @slot node The body of a step, rendered inside the\n\t\t\t\t\t\t     focusable node wrapper. Receives `{ node }` with the\n\t\t\t\t\t\t     node's `id`, `data` and `selected`. The wrapper — and\n\t\t\t\t\t\t     with it the keyboard contract and ARIA state — stays\n\t\t\t\t\t\t     the canvas's, so a host cannot accidentally replace a\n\t\t\t\t\t\t     focusable node with an inert div. -->\n\t\t\t\t\t\t<slot name=\"node\" v-bind=\"slotProps\" />\n\t\t\t\t\t</template>\n\t\t\t\t</CnFlowNode>\n\t\t\t</template>\n\n\t\t\t<!-- Per-type edge components, the same convention as nodes above.\n\t\t\t     Registered on `default` because that is the type an edge gets\n\t\t\t     when nothing else is asked for — which is every edge, now that\n\t\t\t     the ROUTER moved off `type` and into `data.lineType`.\n\n\t\t\t     That move is the edge half of the lesson the node slot records:\n\t\t\t     `type` selects a COMPONENT, and a router is not a component. So\n\t\t\t     long as `type` carried `smoothstep`, Vue Flow answered with its\n\t\t\t     own built-in edge and no consumer could add anything to a line\n\t\t\t     at all. -->\n\t\t\t<template #edge-default=\"edgeProps\">\n\t\t\t\t<CnFlowEdge\n\t\t\t\t\tv-bind=\"edgeProps\"\n\t\t\t\t\t:lineType=\"edgeProps.data && edgeProps.data.lineType\"\n\t\t\t\t\t:animated=\"!(edgeProps.data && edgeProps.data.animated === false)\"\n\t\t\t\t\t:label-aria-label=\"edgeProps.data && edgeProps.data.labelAriaLabel\"\n\t\t\t\t\t@labelMove=\"onEdgeLabelMove\"\n\t\t\t\t\t@labelClick=\"onEdgeLabelClick\"\n\t\t\t\t\t@labelContext=\"onEdgeLabelContext\">\n\t\t\t\t\t<template #label=\"slotProps\">\n\t\t\t\t\t\t<!-- @slot edge-label The chrome of a connection's\n\t\t\t\t\t\t     label. Receives `{ edge }` with the edge's `id`,\n\t\t\t\t\t\t     `data` and `selected`. Rendered inside a focusable\n\t\t\t\t\t\t     control the canvas owns, so render inert content:\n\t\t\t\t\t\t     the arrow keys, the focus ring and the ARIA name\n\t\t\t\t\t\t     are already handled. An edge whose host renders\n\t\t\t\t\t\t     nothing here draws no label control at all. -->\n\t\t\t\t\t\t<slot name=\"edge-label\" v-bind=\"slotProps\" />\n\t\t\t\t\t</template>\n\n\t\t\t\t\t<template #adornment=\"slotProps\">\n\t\t\t\t\t\t<!-- @slot edge-adornment A host's own controls beside a\n\t\t\t\t\t\t     connection's label. Receives `{ edge }`. Unlike\n\t\t\t\t\t\t     `edge-label` this is NOT inside the label's button,\n\t\t\t\t\t\t     so what goes here may be interactive — a replay's\n\t\t\t\t\t\t     payload control is the case it exists for. -->\n\t\t\t\t\t\t<slot name=\"edge-adornment\" v-bind=\"slotProps\" />\n\t\t\t\t\t</template>\n\t\t\t\t</CnFlowEdge>\n\t\t\t</template>\n\n\t\t\t<Background v-if=\"showBackground\" :gap=\"snapGrid[0]\" />\n\t\t\t<MiniMap v-if=\"showMiniMap\" />\n\t\t</VueFlow>\n\n\t\t<!-- OUR OWN CONTROLS, not `@vue-flow/controls`.\n\t\t     The library's control bar renders bare <button> elements with an\n\t\t     icon and no accessible name, which axe reports as `button-name` at\n\t\t     SERIOUS impact — caught by the e2e in this change, not by the unit\n\t\t     lane or the gates. Rather than ship a control bar a screen-reader\n\t\t     user cannot identify, the buttons are ours and carry real labels. -->\n\t\t<div v-if=\"showControls\" class=\"cn-graph-canvas__controls\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cn-graph-canvas__control\"\n\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Zoom in')\"\n\t\t\t\t@click=\"zoomIn()\">\n\t\t\t\t+\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cn-graph-canvas__control\"\n\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Zoom out')\"\n\t\t\t\t@click=\"zoomOut()\">\n\t\t\t\t−\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cn-graph-canvas__control\"\n\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Fit the whole flow in view')\"\n\t\t\t\t@click=\"fitViewNow()\">\n\t\t\t\t⤢\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { Background } from '@vue-flow/background'\nimport { useVueFlow, VueFlow } from '@vue-flow/core'\nimport { MiniMap } from '@vue-flow/minimap'\nimport CnFlowEdge from './CnFlowEdge.vue'\nimport CnFlowNode from './CnFlowNode.vue'\n\n/**\n * A graph canvas built on Vue Flow — the library n8n runs.\n *\n * WHY THIS IS NOT A WRAPPER AROUND THE OLD API\n * --------------------------------------------\n * This component used to be ~1,300 hand-written lines re-implementing pan,\n * zoom, drag, connect, resize and hit-testing on a bare SVG, because the fleet\n * was on Vue 2.7 and every maintained canvas library is Vue-3-only (ADR-065\n * §5). ADR-081 removed that constraint and named this library as the reason for\n * the migration.\n *\n * The props therefore MOVED rather than being translated. The graph page was\n * not in production, so there was no consumer to protect, and a shim can only\n * ever expose what the old API could already express — `fitView`, `<MiniMap>`,\n * `connectionMode` and the node resizer would all have stayed unreachable\n * behind props designed for a hand-drawn SVG.\n *\n * `nodeWidth` / `nodeHeight` are gone entirely. They existed only so hand-drawn\n * edges could guess where a node's centre was, and the old docblock admitted\n * the failure mode: \"set them to match what your node slot actually renders, or\n * edges will attach off-centre\". Vue Flow measures the rendered node, so the\n * whole class of bug went with the props.\n *\n * ⚠️ THE CANVAS STILL NEVER MUTATES THE GRAPH. Vue Flow is perfectly willing to\n * own node positions internally; here it does not. Changes are emitted and the\n * host decides what to persist — the same rule the previous implementation\n * held, and the reason a canvas can be dropped into a read-only surface without\n * auditing it first.\n *\n * ⚠️ KEYBOARD OPERATION LIVES IN {@see CnFlowNode}. Vue Flow is pointer-first;\n * the focus/ARIA/key contract is re-implemented in the node component, not\n * inherited from the library. See that file for why the multi-exit case is the\n * one that matters.\n */\nexport default {\n\tname: 'CnGraphCanvas',\n\n\tcomponents: { VueFlow, Background, MiniMap, CnFlowNode, CnFlowEdge },\n\n\tprops: {\n\t\t/** Nodes in Vue Flow's shape: `{ id, type, position: {x,y}, data }`. */\n\t\tnodes: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Edges in Vue Flow's shape: `{ id, source, target }`. */\n\t\tedges: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * When true, every interaction is refused — drag, connect AND select.\n\t\t *\n\t\t * Expressed as three Vue Flow flags below. Missing one produces a canvas\n\t\t * that LOOKS locked and is not, so the three are set together and tested\n\t\t * together.\n\t\t */\n\t\treadOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Frame the whole graph on first render. */\n\t\tfitView: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Snap dragged nodes to the grid. */\n\t\tsnapToGrid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Grid spacing, as Vue Flow's `[x, y]`. */\n\t\tsnapGrid: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [16, 16],\n\t\t},\n\n\t\t/** Minimum zoom. */\n\t\tminZoom: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0.2,\n\t\t},\n\n\t\t/** Maximum zoom. */\n\t\tmaxZoom: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/** Vue Flow's connection mode — `loose` or `strict`. */\n\t\tconnectionMode: {\n\t\t\ttype: String,\n\t\t\tdefault: 'loose',\n\t\t},\n\n\t\t/** Draw the dotted background. */\n\t\tshowBackground: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Draw the zoom/fit controls. */\n\t\tshowControls: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Draw the minimap. */\n\t\tshowMiniMap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'nodes-change',\n\t\t'edges-change',\n\t\t'connect',\n\t\t'node-select',\n\t\t'edge-select',\n\t\t'edge-label-move',\n\t\t'edge-label-click',\n\t\t'edge-label-context',\n\t\t'canvas-click',\n\t\t'canvas-drop',\n\n\t\t'node-remove',\n\n\t\t/**\n\t\t * The canvas zoom changed, by any route — a control here, the host's own\n\t\t * toolbar, the wheel, or a fit-view.\n\t\t *\n\t\t * @type {number}\n\t\t */\n\t\t'zoom-change',\n\t],\n\n\tsetup() {\n\t\t// ⚠️ ALIASED. `fitView` is already a BOOLEAN PROP on this component\n\t\t// (frame the graph on first render), and Vue Flow's composable exports a\n\t\t// FUNCTION of the same name. Returning both puts two `fitView` bindings\n\t\t// on the instance — eslint's `vue/no-dupe-keys` catches it, but the\n\t\t// symptom would have been a fit button that tries to call `true`.\n\t\t// `zoomTo` and `viewport` so a HOST toolbar can drive the zoom and show\n\t\t// the real figure — including one the wheel or a fit-view changed.\n\t\tconst { project, zoomIn, zoomOut, zoomTo, fitView: fitViewNow, viewport } = useVueFlow()\n\n\t\treturn { project, zoomIn, zoomOut, zoomTo, fitViewNow, viewport }\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {boolean} Whether the canvas accepts interaction at all.\n\t\t */\n\t\tinteractive() {\n\t\t\treturn this.readOnly === false\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Reported rather than owned: Vue Flow holds the transform, so a host\n\t\t// that mirrors it in its own toolbar must hear every change, not only\n\t\t// the ones its own buttons caused.\n\t\t'viewport.zoom': {\n\t\t\timmediate: true,\n\t\t\thandler(value) {\n\t\t\t\tthis.$emit('zoom-change', value)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward Vue Flow's node changes.\n\t\t *\n\t\t * @param {Array<object>} changes The changes.\n\t\t * @return {void}\n\t\t */\n\t\tonNodesChange(changes) {\n\t\t\t/**\n\t\t\t * @event nodes-change Vue Flow's node change stream — position,\n\t\t\t *   selection, dimensions, removal. The canvas does NOT apply these;\n\t\t\t *   the host decides what to persist. Drag frames arrive with\n\t\t\t *   `dragging: true`, so a host that writes on every change writes\n\t\t\t *   once per animation frame.\n\t\t\t */\n\t\t\tthis.$emit('nodes-change', changes)\n\t\t},\n\n\t\t/**\n\t\t * Forward Vue Flow's edge changes.\n\t\t *\n\t\t * @param {Array<object>} changes The changes.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgesChange(changes) {\n\t\t\t/**\n\t\t\t * @event edges-change Vue Flow's edge change stream, same contract\n\t\t\t *   as `nodes-change`: reported, never applied here.\n\t\t\t */\n\t\t\tthis.$emit('edges-change', changes)\n\t\t},\n\n\t\t/**\n\t\t * Forward a new connection.\n\t\t *\n\t\t * @param {object} connection The connection.\n\t\t * @return {void}\n\t\t */\n\t\t/**\n\t\t * Pass a node's removal request up to the host.\n\t\t *\n\t\t * @param {string} id The node that asked to be removed.\n\t\t * @return {void}\n\t\t */\n\t\tonNodeRemove(id) {\n\t\t\t/**\n\t\t\t * @event node-remove The focused node should be removed, by id.\n\t\t\t *   Raised by Delete/Backspace on a node. The canvas removes\n\t\t\t *   nothing itself — the host owns `nodes` and `edges`, and a node\n\t\t\t *   dropped here would leave the edges pointing at it behind.\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('node-remove', id)\n\t\t},\n\n\t\tonConnect(connection) {\n\t\t\t/**\n\t\t\t * @event connect A new connection was made, by pointer OR by\n\t\t\t *   keyboard. Carries Vue Flow's\n\t\t\t *   `{ source, target, sourceHandle, targetHandle }`, with the\n\t\t\t *   handles reduced to the PORT the host declared — see\n\t\t\t *   `portIdOf` below.\n\t\t\t */\n\t\t\tthis.$emit('connect', {\n\t\t\t\t...connection,\n\t\t\t\tsourceHandle: this.portIdOf(connection?.sourceHandle),\n\t\t\t\ttargetHandle: this.portIdOf(connection?.targetHandle),\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Reduce a HANDLE id to the PORT id the host declared.\n\t\t *\n\t\t * A node draws more handles than it has ports — one exit is offered on\n\t\t * both the right and the bottom edge, one entry on both the left and the\n\t\t * top — because a line has to be able to leave and arrive on the side\n\t\t * the graph reads best from. Vue Flow keys handles by id, so those\n\t\t * cannot share one, and the side is encoded into the id instead\n\t\t * (`yes__right`). See CnFlowNode's `exitHandles`.\n\t\t *\n\t\t * ⚠️ WHICH MEANS THE ENCODED ID MUST NEVER LEAVE THE CANVAS. A branch\n\t\t * recorded as `yes__bottom` names a port the engine has never heard of,\n\t\t * and a flow whose branch ids do not match its catalogue is one the\n\t\t * engine cannot route — it would take the default exit and the canvas\n\t\t * would keep showing the branch the author drew. So both routes into\n\t\t * this method (pointer via <VueFlow>, keyboard via CnFlowNode) are\n\t\t * stripped here, in the one place every connection passes through.\n\t\t *\n\t\t * An entry handle carries no port of its own — a node has exactly one\n\t\t * inbound port — so it reduces to null rather than to the literal `in`.\n\t\t *\n\t\t * @param {string|null|undefined} handleId The handle id Vue Flow reports.\n\t\t * @return {string|null} The port id, or null.\n\t\t */\n\t\tportIdOf(handleId) {\n\t\t\tif (typeof handleId !== 'string') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst cut = handleId.lastIndexOf('__')\n\t\t\tconst port = cut === -1 ? handleId : handleId.slice(0, cut)\n\n\t\t\treturn port === 'in' ? null : port\n\t\t},\n\n\t\t/**\n\t\t * Forward a node click.\n\t\t *\n\t\t * @param {object} event Vue Flow's node event.\n\t\t * @return {void}\n\t\t */\n\t\tonNodeClick(event) {\n\t\t\t/**\n\t\t\t * @event node-select A node was clicked. Payload is Vue Flow's\n\t\t\t *   `{ node }`, so a host tracking bare ids reads `event.node.id`.\n\t\t\t */\n\t\t\tthis.$emit('node-select', event)\n\t\t},\n\n\t\t/**\n\t\t * Forward an edge click.\n\t\t *\n\t\t * @param {object} event Vue Flow's edge event.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeClick(event) {\n\t\t\t/**\n\t\t\t * @event edge-select An edge was clicked.\n\t\t\t */\n\t\t\tthis.$emit('edge-select', event)\n\t\t},\n\n\t\t/**\n\t\t * Forward a label slid along its line.\n\t\t *\n\t\t * @param {{id: string, labelT: number}} payload The edge and its new\n\t\t *   fraction, already clamped.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeLabelMove(payload) {\n\t\t\t/**\n\t\t\t * @event edge-label-move A connection's label was moved, by pointer\n\t\t\t *   or by keyboard. Carries `{ id, labelT }`. As everywhere else in\n\t\t\t *   this component the change is REPORTED, not applied — the host\n\t\t\t *   stores `labelT` and feeds it back down.\n\t\t\t */\n\t\t\tthis.$emit('edge-label-move', payload)\n\t\t},\n\n\t\t/**\n\t\t * Forward an activated label.\n\t\t *\n\t\t * @param {string} id The edge id.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeLabelClick(id) {\n\t\t\t/**\n\t\t\t * @event edge-label-click A connection's label was activated.\n\t\t\t */\n\t\t\tthis.$emit('edge-label-click', id)\n\t\t},\n\n\t\t/**\n\t\t * Forward a right-click on a label.\n\t\t *\n\t\t * @param {{id: string, event: MouseEvent}} payload The edge and event.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeLabelContext(payload) {\n\t\t\t/**\n\t\t\t * @event edge-label-context A connection's label was right-clicked.\n\t\t\t *   Hosts open the same menu they open for the line itself.\n\t\t\t */\n\t\t\tthis.$emit('edge-label-context', payload)\n\t\t},\n\n\t\t/**\n\t\t * Forward a click on the empty pane.\n\t\t *\n\t\t * @param {object} event The click event.\n\t\t * @return {void}\n\t\t */\n\t\tonPaneClick(event) {\n\t\t\t/**\n\t\t\t * @event canvas-click The empty pane was clicked — hosts use this to\n\t\t\t *   clear a selection.\n\t\t\t */\n\t\t\tthis.$emit('canvas-click', event)\n\t\t},\n\n\t\t/**\n\t\t * A palette drop, with the point already converted to canvas space.\n\t\t *\n\t\t * Kept as a Conduction-level event because HTML5 drop plus coordinate\n\t\t * projection is glue every consumer would otherwise write. The\n\t\t * projection is Vue Flow's `project()` rather than the old hand-rolled\n\t\t * `(clientX - rect.left - panOffset.x) / zoom`.\n\t\t *\n\t\t * The canvas does not create the node — the host does, mirroring the\n\t\t * rule that it never mutates positions either.\n\t\t *\n\t\t * @param {DragEvent} event The drop event.\n\t\t * @return {void}\n\t\t */\n\t\tonDrop(event) {\n\t\t\tif (this.readOnly === true) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst bounds = this.$el.getBoundingClientRect()\n\t\t\tconst position = this.project({\n\t\t\t\tx: event.clientX - bounds.left,\n\t\t\t\ty: event.clientY - bounds.top,\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * @event canvas-drop An HTML5 drop landed on the canvas, with\n\t\t\t *   `position` already projected into canvas space and the native\n\t\t\t *   `event` alongside so the host can read `dataTransfer`. The canvas\n\t\t\t *   never creates the node itself.\n\t\t\t */\n\t\t\tthis.$emit('canvas-drop', { position, event })\n\t\t},\n\t},\n}\n</script>\n\n<style>\n/* Vue Flow's own stylesheet, themed through Nextcloud variables. Imported\n   un-scoped because it styles elements Vue Flow renders outside this\n   component's scope. */\n@import '@vue-flow/core/dist/style.css';\n@import '@vue-flow/core/dist/theme-default.css';\n\n/* ⚠️ EVERY VUE FLOW PLUGIN SHIPS ITS OWN STYLESHEET, AND ONLY CORE'S WAS HERE.\n\n   `@vue-flow/node-resizer` was the one that mattered: its stylesheet is what\n   gives a resize control `position: absolute` and a 5px handle. Without it the\n   handles CnFlowNode renders have no size and no position, so a node that is\n   resizable looks exactly like a node that is not — the component was mounted\n   and the affordance was invisible.\n\n   The minimap's own sheet is small (a background colour and the grab cursors);\n   its geometry comes from `.vue-flow__panel` in core, which was already here.\n   Imported for the cursors, and before our own rules so the theme below still\n   wins. */\n@import '@vue-flow/node-resizer/dist/style.css';\n@import '@vue-flow/minimap/dist/style.css';\n\n.cn-graph-canvas {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 320px;\n}\n\n/* ⚠️ VUE FLOW'S DEFAULT NODE DRAWS A BOX WE NEVER ASKED FOR.\n\n   Every node this canvas renders goes through the `#node-default` slot, so\n   Vue Flow wraps our CnFlowNode in `.vue-flow__node-default` — and\n   `theme-default.css` gives that wrapper a 1px border, a white background and\n   10px of padding. The result was a box around our box: the wrapper's border,\n   then `.cn-flow-node`'s own. Nothing failed and nothing warned; a node just\n   quietly had one more outline than it was designed to have.\n\n   Stripped, not restyled: `.cn-flow-node` is the node's chrome, and it is the\n   ONLY border a node draws. `width` stays 150px because Vue Flow measures the\n   wrapper to route edges and place handles — dropping it would move every\n   node's footprint, which is a layout change, not a fix for a stray border. */\n.cn-graph-canvas .vue-flow__node-default {\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbackground: none;\n\n\t/* The handle colour reaches `.cn-flow-node__handle` through this variable.\n\t   Vue Flow's own `.vue-flow__node-default .vue-flow__handle` rule outranks\n\t   our single-class one, so a themed handle lost to a hard-coded #1a192b on\n\t   every node — setting the variable themes it at the source instead of\n\t   fighting the specificity. */\n\t--vf-handle: var(--color-primary-element, #0082c9);\n}\n\n/* The selected/focus/hover states re-assert the border and shadow the rule\n   above just removed, so they have to be stripped too — otherwise clicking a\n   node brought the extra box back. Selection is shown by `.cn-flow-node--selected`,\n   and focus by `.cn-flow-node:focus-visible`, both on the node itself. */\n.cn-graph-canvas .vue-flow__node-default.selected,\n.cn-graph-canvas .vue-flow__node-default.selected:hover,\n.cn-graph-canvas .vue-flow__node-default.selectable:hover,\n.cn-graph-canvas .vue-flow__node-default:focus,\n.cn-graph-canvas .vue-flow__node-default:focus-visible {\n\tborder: 0;\n\tbox-shadow: none;\n}\n\n/* THEME, NOT OVERRIDE. Every colour comes from a Nextcloud variable with a\n   fallback, so the canvas follows the user's theme — including dark — instead\n   of being the one component that ignores it. */\n.cn-graph-canvas .vue-flow__background {\n\tbackground: var(--color-main-background, #fff);\n}\n\n.cn-graph-canvas .vue-flow__edge-path {\n\tstroke: var(--color-border-dark, #888);\n}\n\n.cn-graph-canvas .vue-flow__edge.selected .vue-flow__edge-path {\n\tstroke: var(--color-primary-element, #0082c9);\n}\n\n/* An edge says which way the data flows, and it can only say it with an\n   arrowhead — the direction is the one thing a line cannot express on its own.\n\n   ⚠️ `!important` IS LOAD-BEARING HERE, not laziness. Vue Flow writes the\n   arrowhead's colour as an INLINE style on the polyline it generates, and an\n   inline style beats any class selector. The alternative is passing a colour\n   through the marker definition in JS, which would hard-code a hex and take\n   the arrowhead out of the theme — it would stay dark grey in dark mode while\n   the line it terminates went light. Themed here, it follows the user.\n\n   `markerUnits` defaults to `strokeWidth`, so the size set alongside this in\n   `useFlowStore.canvasEdges` is what keeps the arrow clear of the target\n   node's port handle. */\n.cn-graph-canvas .vue-flow__arrowhead polyline,\n.cn-graph-canvas .vue-flow__arrowhead path {\n\tfill: var(--color-text-maxcontrast, #6b6b6b) !important;\n\tstroke: var(--color-text-maxcontrast, #6b6b6b) !important;\n}\n\n.cn-graph-canvas__controls {\n\tposition: absolute;\n\tbottom: 12px;\n\tleft: 12px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tz-index: 5;\n}\n\n.cn-graph-canvas__control {\n\twidth: 28px;\n\theight: 28px;\n\tborder: 1px solid var(--color-border, #d0d0d0);\n\tbackground: var(--color-main-background, #fff);\n\tcolor: var(--color-main-text, #222);\n\tcursor: pointer;\n}\n\n.cn-graph-canvas__control:focus-visible {\n\toutline: 2px solid var(--color-primary-element, #0082c9);\n\toutline-offset: 1px;\n}\n\n.cn-graph-canvas .vue-flow__minimap {\n\tbackground: var(--color-background-dark, #ededed);\n}\n</style>\n"],"names":["_createElementBlock","_createVNode","_withCtx","_mergeProps","_renderSlot","_createBlock","_openBlock","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"CnGraphCanvas.vue3.js","sources":["../../../../src/components/CnGraphCanvas/CnGraphCanvas.vue?vue&type=template&id=1d8bc107&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>\n  - SPDX-License-Identifier: EUPL-1.2\n  -->\n<template>\n\t<div class=\"cn-graph-canvas\" @drop=\"onDrop\" @dragover.prevent>\n\t\t<VueFlow\n\t\t\t:nodes=\"nodes\"\n\t\t\t:edges=\"edges\"\n\t\t\t:minZoom=\"minZoom\"\n\t\t\t:maxZoom=\"maxZoom\"\n\t\t\t:fitViewOnInit=\"fitView\"\n\t\t\t:snapToGrid=\"snapToGrid\"\n\t\t\t:snapGrid=\"snapGrid\"\n\t\t\t:nodesDraggable=\"interactive\"\n\t\t\t:nodesConnectable=\"interactive\"\n\t\t\t:elementsSelectable=\"interactive\"\n\t\t\t:connectionMode=\"connectionMode\"\n\t\t\t@nodesChange=\"onNodesChange\"\n\t\t\t@edgesChange=\"onEdgesChange\"\n\t\t\t@connect=\"onConnect\"\n\t\t\t@nodeClick=\"onNodeClick\"\n\t\t\t@edgeClick=\"onEdgeClick\"\n\t\t\t@paneClick=\"onPaneClick\">\n\t\t\t<!-- Per-type node components, Vue Flow's convention. A host that\n\t\t\t     registers `type: 'trigger'` gets `#node-trigger`; anything\n\t\t\t     unregistered falls back to CnFlowNode, which carries the\n\t\t\t     keyboard contract. -->\n\t\t\t<template #node-default=\"nodeProps\">\n\t\t\t\t<!-- `@connect` routes a KEYBOARD-completed connection into the\n\t\t\t\t     same handler as a pointer one, so `onConnect` is the single\n\t\t\t\t     place a new edge leaves this component regardless of input.\n\t\t\t\t     Without it the keyboard path wrote into Vue Flow's internal\n\t\t\t\t     graph and the host never heard about it — the edge drew and\n\t\t\t\t     the save dropped it. -->\n\t\t\t\t<CnFlowNode\n\t\t\t\t\tv-bind=\"nodeProps\"\n\t\t\t\t\t:deletable=\"!readOnly\"\n\t\t\t\t\t@connect=\"onConnect\"\n\t\t\t\t\t@remove=\"onNodeRemove\"\n\t\t\t\t\t@activate=\"onNodeActivate\"\n\t\t\t\t\t@menu=\"onNodeMenu\">\n\t\t\t\t\t<template #default=\"slotProps\">\n\t\t\t\t\t\t<!-- @slot node The body of a step, rendered inside the\n\t\t\t\t\t\t     focusable node wrapper. Receives `{ node }` with the\n\t\t\t\t\t\t     node's `id`, `data` and `selected`. The wrapper — and\n\t\t\t\t\t\t     with it the keyboard contract and ARIA state — stays\n\t\t\t\t\t\t     the canvas's, so a host cannot accidentally replace a\n\t\t\t\t\t\t     focusable node with an inert div. -->\n\t\t\t\t\t\t<slot name=\"node\" v-bind=\"slotProps\" />\n\t\t\t\t\t</template>\n\t\t\t\t</CnFlowNode>\n\t\t\t</template>\n\n\t\t\t<!-- Per-type edge components, the same convention as nodes above.\n\t\t\t     Registered on `default` because that is the type an edge gets\n\t\t\t     when nothing else is asked for — which is every edge, now that\n\t\t\t     the ROUTER moved off `type` and into `data.lineType`.\n\n\t\t\t     That move is the edge half of the lesson the node slot records:\n\t\t\t     `type` selects a COMPONENT, and a router is not a component. So\n\t\t\t     long as `type` carried `smoothstep`, Vue Flow answered with its\n\t\t\t     own built-in edge and no consumer could add anything to a line\n\t\t\t     at all. -->\n\t\t\t<template #edge-default=\"edgeProps\">\n\t\t\t\t<CnFlowEdge\n\t\t\t\t\tv-bind=\"edgeProps\"\n\t\t\t\t\t:lineType=\"edgeProps.data && edgeProps.data.lineType\"\n\t\t\t\t\t:animated=\"!(edgeProps.data && edgeProps.data.animated === false)\"\n\t\t\t\t\t:label-aria-label=\"edgeProps.data && edgeProps.data.labelAriaLabel\"\n\t\t\t\t\t@labelMove=\"onEdgeLabelMove\"\n\t\t\t\t\t@labelClick=\"onEdgeLabelClick\"\n\t\t\t\t\t@labelContext=\"onEdgeLabelContext\">\n\t\t\t\t\t<template #label=\"slotProps\">\n\t\t\t\t\t\t<!-- @slot edge-label The chrome of a connection's\n\t\t\t\t\t\t     label. Receives `{ edge }` with the edge's `id`,\n\t\t\t\t\t\t     `data` and `selected`. Rendered inside a focusable\n\t\t\t\t\t\t     control the canvas owns, so render inert content:\n\t\t\t\t\t\t     the arrow keys, the focus ring and the ARIA name\n\t\t\t\t\t\t     are already handled. An edge whose host renders\n\t\t\t\t\t\t     nothing here draws no label control at all. -->\n\t\t\t\t\t\t<slot name=\"edge-label\" v-bind=\"slotProps\" />\n\t\t\t\t\t</template>\n\n\t\t\t\t\t<template #adornment=\"slotProps\">\n\t\t\t\t\t\t<!-- @slot edge-adornment A host's own controls beside a\n\t\t\t\t\t\t     connection's label. Receives `{ edge }`. Unlike\n\t\t\t\t\t\t     `edge-label` this is NOT inside the label's button,\n\t\t\t\t\t\t     so what goes here may be interactive — a replay's\n\t\t\t\t\t\t     payload control is the case it exists for. -->\n\t\t\t\t\t\t<slot name=\"edge-adornment\" v-bind=\"slotProps\" />\n\t\t\t\t\t</template>\n\t\t\t\t</CnFlowEdge>\n\t\t\t</template>\n\n\t\t\t<Background v-if=\"showBackground\" :gap=\"snapGrid[0]\" />\n\t\t\t<MiniMap v-if=\"showMiniMap\" />\n\t\t</VueFlow>\n\n\t\t<!-- OUR OWN CONTROLS, not `@vue-flow/controls`.\n\t\t     The library's control bar renders bare <button> elements with an\n\t\t     icon and no accessible name, which axe reports as `button-name` at\n\t\t     SERIOUS impact — caught by the e2e in this change, not by the unit\n\t\t     lane or the gates. Rather than ship a control bar a screen-reader\n\t\t     user cannot identify, the buttons are ours and carry real labels. -->\n\t\t<div v-if=\"showControls\" class=\"cn-graph-canvas__controls\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cn-graph-canvas__control\"\n\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Zoom in')\"\n\t\t\t\t@click=\"zoomIn()\">\n\t\t\t\t+\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cn-graph-canvas__control\"\n\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Zoom out')\"\n\t\t\t\t@click=\"zoomOut()\">\n\t\t\t\t−\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cn-graph-canvas__control\"\n\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Fit the whole flow in view')\"\n\t\t\t\t@click=\"fitViewNow()\">\n\t\t\t\t⤢\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { Background } from '@vue-flow/background'\nimport { useVueFlow, VueFlow } from '@vue-flow/core'\nimport { MiniMap } from '@vue-flow/minimap'\nimport CnFlowEdge from './CnFlowEdge.vue'\nimport CnFlowNode from './CnFlowNode.vue'\n\n/**\n * A graph canvas built on Vue Flow — the library n8n runs.\n *\n * WHY THIS IS NOT A WRAPPER AROUND THE OLD API\n * --------------------------------------------\n * This component used to be ~1,300 hand-written lines re-implementing pan,\n * zoom, drag, connect, resize and hit-testing on a bare SVG, because the fleet\n * was on Vue 2.7 and every maintained canvas library is Vue-3-only (ADR-065\n * §5). ADR-081 removed that constraint and named this library as the reason for\n * the migration.\n *\n * The props therefore MOVED rather than being translated. The graph page was\n * not in production, so there was no consumer to protect, and a shim can only\n * ever expose what the old API could already express — `fitView`, `<MiniMap>`,\n * `connectionMode` and the node resizer would all have stayed unreachable\n * behind props designed for a hand-drawn SVG.\n *\n * `nodeWidth` / `nodeHeight` are gone entirely. They existed only so hand-drawn\n * edges could guess where a node's centre was, and the old docblock admitted\n * the failure mode: \"set them to match what your node slot actually renders, or\n * edges will attach off-centre\". Vue Flow measures the rendered node, so the\n * whole class of bug went with the props.\n *\n * ⚠️ THE CANVAS STILL NEVER MUTATES THE GRAPH. Vue Flow is perfectly willing to\n * own node positions internally; here it does not. Changes are emitted and the\n * host decides what to persist — the same rule the previous implementation\n * held, and the reason a canvas can be dropped into a read-only surface without\n * auditing it first.\n *\n * ⚠️ KEYBOARD OPERATION LIVES IN {@see CnFlowNode}. Vue Flow is pointer-first;\n * the focus/ARIA/key contract is re-implemented in the node component, not\n * inherited from the library. See that file for why the multi-exit case is the\n * one that matters.\n */\nexport default {\n\tname: 'CnGraphCanvas',\n\n\tcomponents: { VueFlow, Background, MiniMap, CnFlowNode, CnFlowEdge },\n\n\tprops: {\n\t\t/** Nodes in Vue Flow's shape: `{ id, type, position: {x,y}, data }`. */\n\t\tnodes: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Edges in Vue Flow's shape: `{ id, source, target }`. */\n\t\tedges: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * When true, every interaction is refused — drag, connect AND select.\n\t\t *\n\t\t * Expressed as three Vue Flow flags below. Missing one produces a canvas\n\t\t * that LOOKS locked and is not, so the three are set together and tested\n\t\t * together.\n\t\t */\n\t\treadOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Frame the whole graph on first render. */\n\t\tfitView: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Snap dragged nodes to the grid. */\n\t\tsnapToGrid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Grid spacing, as Vue Flow's `[x, y]`. */\n\t\tsnapGrid: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [16, 16],\n\t\t},\n\n\t\t/** Minimum zoom. */\n\t\tminZoom: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0.2,\n\t\t},\n\n\t\t/** Maximum zoom. */\n\t\tmaxZoom: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/** Vue Flow's connection mode — `loose` or `strict`. */\n\t\tconnectionMode: {\n\t\t\ttype: String,\n\t\t\tdefault: 'loose',\n\t\t},\n\n\t\t/** Draw the dotted background. */\n\t\tshowBackground: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Draw the zoom/fit controls. */\n\t\tshowControls: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Draw the minimap. */\n\t\tshowMiniMap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'nodes-change',\n\t\t'edges-change',\n\t\t'connect',\n\t\t'node-select',\n\t\t'edge-select',\n\t\t'edge-label-move',\n\t\t'edge-label-click',\n\t\t'edge-label-context',\n\t\t'canvas-click',\n\t\t'canvas-drop',\n\n\t\t'node-remove',\n\t\t'node-activate',\n\t\t'node-menu',\n\n\t\t/**\n\t\t * The canvas zoom changed, by any route — a control here, the host's own\n\t\t * toolbar, the wheel, or a fit-view.\n\t\t *\n\t\t * @type {number}\n\t\t */\n\t\t'zoom-change',\n\t],\n\n\tsetup() {\n\t\t// ⚠️ ALIASED. `fitView` is already a BOOLEAN PROP on this component\n\t\t// (frame the graph on first render), and Vue Flow's composable exports a\n\t\t// FUNCTION of the same name. Returning both puts two `fitView` bindings\n\t\t// on the instance — eslint's `vue/no-dupe-keys` catches it, but the\n\t\t// symptom would have been a fit button that tries to call `true`.\n\t\t// `zoomTo` and `viewport` so a HOST toolbar can drive the zoom and show\n\t\t// the real figure — including one the wheel or a fit-view changed.\n\t\tconst { project, zoomIn, zoomOut, zoomTo, fitView: fitViewNow, viewport } = useVueFlow()\n\n\t\treturn { project, zoomIn, zoomOut, zoomTo, fitViewNow, viewport }\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {boolean} Whether the canvas accepts interaction at all.\n\t\t */\n\t\tinteractive() {\n\t\t\treturn this.readOnly === false\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Reported rather than owned: Vue Flow holds the transform, so a host\n\t\t// that mirrors it in its own toolbar must hear every change, not only\n\t\t// the ones its own buttons caused.\n\t\t'viewport.zoom': {\n\t\t\timmediate: true,\n\t\t\thandler(value) {\n\t\t\t\tthis.$emit('zoom-change', value)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward Vue Flow's node changes.\n\t\t *\n\t\t * @param {Array<object>} changes The changes.\n\t\t * @return {void}\n\t\t */\n\t\tonNodesChange(changes) {\n\t\t\t/**\n\t\t\t * @event nodes-change Vue Flow's node change stream — position,\n\t\t\t *   selection, dimensions, removal. The canvas does NOT apply these;\n\t\t\t *   the host decides what to persist. Drag frames arrive with\n\t\t\t *   `dragging: true`, so a host that writes on every change writes\n\t\t\t *   once per animation frame.\n\t\t\t */\n\t\t\tthis.$emit('nodes-change', changes)\n\t\t},\n\n\t\t/**\n\t\t * Forward Vue Flow's edge changes.\n\t\t *\n\t\t * @param {Array<object>} changes The changes.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgesChange(changes) {\n\t\t\t/**\n\t\t\t * @event edges-change Vue Flow's edge change stream, same contract\n\t\t\t *   as `nodes-change`: reported, never applied here.\n\t\t\t */\n\t\t\tthis.$emit('edges-change', changes)\n\t\t},\n\n\t\t/**\n\t\t * Forward a new connection.\n\t\t *\n\t\t * @param {object} connection The connection.\n\t\t * @return {void}\n\t\t */\n\t\t/**\n\t\t * Pass a node's removal request up to the host.\n\t\t *\n\t\t * @param {string} id The node that asked to be removed.\n\t\t * @return {void}\n\t\t */\n\t\tonNodeRemove(id) {\n\t\t\t/**\n\t\t\t * @event node-remove The focused node should be removed, by id.\n\t\t\t *   Raised by Delete/Backspace on a node. The canvas removes\n\t\t\t *   nothing itself — the host owns `nodes` and `edges`, and a node\n\t\t\t *   dropped here would leave the edges pointing at it behind.\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('node-remove', id)\n\t\t},\n\n\t\tonConnect(connection) {\n\t\t\t/**\n\t\t\t * @event connect A new connection was made, by pointer OR by\n\t\t\t *   keyboard. Carries Vue Flow's\n\t\t\t *   `{ source, target, sourceHandle, targetHandle }`, with the\n\t\t\t *   handles reduced to the PORT the host declared — see\n\t\t\t *   `portIdOf` below.\n\t\t\t */\n\t\t\tthis.$emit('connect', {\n\t\t\t\t...connection,\n\t\t\t\tsourceHandle: this.portIdOf(connection?.sourceHandle),\n\t\t\t\ttargetHandle: this.portIdOf(connection?.targetHandle),\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Reduce a HANDLE id to the PORT id the host declared.\n\t\t *\n\t\t * A node draws more handles than it has ports — one exit is offered on\n\t\t * both the right and the bottom edge, one entry on both the left and the\n\t\t * top — because a line has to be able to leave and arrive on the side\n\t\t * the graph reads best from. Vue Flow keys handles by id, so those\n\t\t * cannot share one, and the side is encoded into the id instead\n\t\t * (`yes__right`). See CnFlowNode's `exitHandles`.\n\t\t *\n\t\t * ⚠️ WHICH MEANS THE ENCODED ID MUST NEVER LEAVE THE CANVAS. A branch\n\t\t * recorded as `yes__bottom` names a port the engine has never heard of,\n\t\t * and a flow whose branch ids do not match its catalogue is one the\n\t\t * engine cannot route — it would take the default exit and the canvas\n\t\t * would keep showing the branch the author drew. So both routes into\n\t\t * this method (pointer via <VueFlow>, keyboard via CnFlowNode) are\n\t\t * stripped here, in the one place every connection passes through.\n\t\t *\n\t\t * An entry handle carries no port of its own — a node has exactly one\n\t\t * inbound port — so it reduces to null rather than to the literal `in`.\n\t\t *\n\t\t * @param {string|null|undefined} handleId The handle id Vue Flow reports.\n\t\t * @return {string|null} The port id, or null.\n\t\t */\n\t\tportIdOf(handleId) {\n\t\t\tif (typeof handleId !== 'string') {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tconst cut = handleId.lastIndexOf('__')\n\t\t\tconst port = cut === -1 ? handleId : handleId.slice(0, cut)\n\n\t\t\treturn port === 'in' ? null : port\n\t\t},\n\n\t\t/**\n\t\t * Forward Enter or Space on a node: the keyboard double-click.\n\t\t *\n\t\t * @param {string} id The node id.\n\t\t * @return {void}\n\t\t */\n\t\tonNodeActivate(id) {\n\t\t\tif (this.readOnly === true) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @event node-activate Enter or Space on a node. Payload is the id.\n\t\t\t */\n\t\t\tthis.$emit('node-activate', id)\n\t\t},\n\n\t\t/**\n\t\t * Forward Shift+F10 or the menu key on a node: the keyboard click menu.\n\t\t *\n\t\t * @param {object} request `{ id, clientX, clientY }`, a point at the node.\n\t\t * @return {void}\n\t\t */\n\t\tonNodeMenu(request) {\n\t\t\tif (this.readOnly === true) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @event node-menu Shift+F10 or the menu key on a node. Payload is\n\t\t\t *   `{ id, clientX, clientY }`.\n\t\t\t */\n\t\t\tthis.$emit('node-menu', request)\n\t\t},\n\n\t\t/**\n\t\t * Forward a node click.\n\t\t *\n\t\t * @param {object} event Vue Flow's node event.\n\t\t * @return {void}\n\t\t */\n\t\tonNodeClick(event) {\n\t\t\t/**\n\t\t\t * @event node-select A node was clicked. Payload is Vue Flow's\n\t\t\t *   `{ node }`, so a host tracking bare ids reads `event.node.id`.\n\t\t\t */\n\t\t\tthis.$emit('node-select', event)\n\t\t},\n\n\t\t/**\n\t\t * Forward an edge click.\n\t\t *\n\t\t * @param {object} event Vue Flow's edge event.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeClick(event) {\n\t\t\t/**\n\t\t\t * @event edge-select An edge was clicked.\n\t\t\t */\n\t\t\tthis.$emit('edge-select', event)\n\t\t},\n\n\t\t/**\n\t\t * Forward a label slid along its line.\n\t\t *\n\t\t * @param {{id: string, labelT: number}} payload The edge and its new\n\t\t *   fraction, already clamped.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeLabelMove(payload) {\n\t\t\t/**\n\t\t\t * @event edge-label-move A connection's label was moved, by pointer\n\t\t\t *   or by keyboard. Carries `{ id, labelT }`. As everywhere else in\n\t\t\t *   this component the change is REPORTED, not applied — the host\n\t\t\t *   stores `labelT` and feeds it back down.\n\t\t\t */\n\t\t\tthis.$emit('edge-label-move', payload)\n\t\t},\n\n\t\t/**\n\t\t * Forward an activated label.\n\t\t *\n\t\t * @param {string} id The edge id.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeLabelClick(id) {\n\t\t\t/**\n\t\t\t * @event edge-label-click A connection's label was activated.\n\t\t\t */\n\t\t\tthis.$emit('edge-label-click', id)\n\t\t},\n\n\t\t/**\n\t\t * Forward a right-click on a label.\n\t\t *\n\t\t * @param {{id: string, event: MouseEvent}} payload The edge and event.\n\t\t * @return {void}\n\t\t */\n\t\tonEdgeLabelContext(payload) {\n\t\t\t/**\n\t\t\t * @event edge-label-context A connection's label was right-clicked.\n\t\t\t *   Hosts open the same menu they open for the line itself.\n\t\t\t */\n\t\t\tthis.$emit('edge-label-context', payload)\n\t\t},\n\n\t\t/**\n\t\t * Forward a click on the empty pane.\n\t\t *\n\t\t * @param {object} event The click event.\n\t\t * @return {void}\n\t\t */\n\t\tonPaneClick(event) {\n\t\t\t/**\n\t\t\t * @event canvas-click The empty pane was clicked — hosts use this to\n\t\t\t *   clear a selection.\n\t\t\t */\n\t\t\tthis.$emit('canvas-click', event)\n\t\t},\n\n\t\t/**\n\t\t * A palette drop, with the point already converted to canvas space.\n\t\t *\n\t\t * Kept as a Conduction-level event because HTML5 drop plus coordinate\n\t\t * projection is glue every consumer would otherwise write. The\n\t\t * projection is Vue Flow's `project()` rather than the old hand-rolled\n\t\t * `(clientX - rect.left - panOffset.x) / zoom`.\n\t\t *\n\t\t * The canvas does not create the node — the host does, mirroring the\n\t\t * rule that it never mutates positions either.\n\t\t *\n\t\t * @param {DragEvent} event The drop event.\n\t\t * @return {void}\n\t\t */\n\t\tonDrop(event) {\n\t\t\tif (this.readOnly === true) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst bounds = this.$el.getBoundingClientRect()\n\t\t\tconst position = this.project({\n\t\t\t\tx: event.clientX - bounds.left,\n\t\t\t\ty: event.clientY - bounds.top,\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * @event canvas-drop An HTML5 drop landed on the canvas, with\n\t\t\t *   `position` already projected into canvas space and the native\n\t\t\t *   `event` alongside so the host can read `dataTransfer`. The canvas\n\t\t\t *   never creates the node itself.\n\t\t\t */\n\t\t\tthis.$emit('canvas-drop', { position, event })\n\t\t},\n\t},\n}\n</script>\n\n<style>\n/* Vue Flow's own stylesheet, themed through Nextcloud variables. Imported\n   un-scoped because it styles elements Vue Flow renders outside this\n   component's scope. */\n@import '@vue-flow/core/dist/style.css';\n@import '@vue-flow/core/dist/theme-default.css';\n\n/* ⚠️ EVERY VUE FLOW PLUGIN SHIPS ITS OWN STYLESHEET, AND ONLY CORE'S WAS HERE.\n\n   `@vue-flow/node-resizer` was the one that mattered: its stylesheet is what\n   gives a resize control `position: absolute` and a 5px handle. Without it the\n   handles CnFlowNode renders have no size and no position, so a node that is\n   resizable looks exactly like a node that is not — the component was mounted\n   and the affordance was invisible.\n\n   The minimap's own sheet is small (a background colour and the grab cursors);\n   its geometry comes from `.vue-flow__panel` in core, which was already here.\n   Imported for the cursors, and before our own rules so the theme below still\n   wins. */\n@import '@vue-flow/node-resizer/dist/style.css';\n@import '@vue-flow/minimap/dist/style.css';\n\n.cn-graph-canvas {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 320px;\n}\n\n/* ⚠️ VUE FLOW'S DEFAULT NODE DRAWS A BOX WE NEVER ASKED FOR.\n\n   Every node this canvas renders goes through the `#node-default` slot, so\n   Vue Flow wraps our CnFlowNode in `.vue-flow__node-default` — and\n   `theme-default.css` gives that wrapper a 1px border, a white background and\n   10px of padding. The result was a box around our box: the wrapper's border,\n   then `.cn-flow-node`'s own. Nothing failed and nothing warned; a node just\n   quietly had one more outline than it was designed to have.\n\n   Stripped, not restyled: `.cn-flow-node` is the node's chrome, and it is the\n   ONLY border a node draws. `width` stays 150px because Vue Flow measures the\n   wrapper to route edges and place handles — dropping it would move every\n   node's footprint, which is a layout change, not a fix for a stray border. */\n.cn-graph-canvas .vue-flow__node-default {\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbackground: none;\n\n\t/* The handle colour reaches `.cn-flow-node__handle` through this variable.\n\t   Vue Flow's own `.vue-flow__node-default .vue-flow__handle` rule outranks\n\t   our single-class one, so a themed handle lost to a hard-coded #1a192b on\n\t   every node — setting the variable themes it at the source instead of\n\t   fighting the specificity. */\n\t--vf-handle: var(--color-primary-element, #0082c9);\n}\n\n/* The selected/focus/hover states re-assert the border and shadow the rule\n   above just removed, so they have to be stripped too — otherwise clicking a\n   node brought the extra box back. Selection is shown by `.cn-flow-node--selected`,\n   and focus by `.cn-flow-node:focus-visible`, both on the node itself. */\n.cn-graph-canvas .vue-flow__node-default.selected,\n.cn-graph-canvas .vue-flow__node-default.selected:hover,\n.cn-graph-canvas .vue-flow__node-default.selectable:hover,\n.cn-graph-canvas .vue-flow__node-default:focus,\n.cn-graph-canvas .vue-flow__node-default:focus-visible {\n\tborder: 0;\n\tbox-shadow: none;\n}\n\n/* THEME, NOT OVERRIDE. Every colour comes from a Nextcloud variable with a\n   fallback, so the canvas follows the user's theme — including dark — instead\n   of being the one component that ignores it. */\n.cn-graph-canvas .vue-flow__background {\n\tbackground: var(--color-main-background, #fff);\n}\n\n.cn-graph-canvas .vue-flow__edge-path {\n\tstroke: var(--color-border-dark, #888);\n}\n\n.cn-graph-canvas .vue-flow__edge.selected .vue-flow__edge-path {\n\tstroke: var(--color-primary-element, #0082c9);\n}\n\n/* An edge says which way the data flows, and it can only say it with an\n   arrowhead — the direction is the one thing a line cannot express on its own.\n\n   ⚠️ `!important` IS LOAD-BEARING HERE, not laziness. Vue Flow writes the\n   arrowhead's colour as an INLINE style on the polyline it generates, and an\n   inline style beats any class selector. The alternative is passing a colour\n   through the marker definition in JS, which would hard-code a hex and take\n   the arrowhead out of the theme — it would stay dark grey in dark mode while\n   the line it terminates went light. Themed here, it follows the user.\n\n   `markerUnits` defaults to `strokeWidth`, so the size set alongside this in\n   `useFlowStore.canvasEdges` is what keeps the arrow clear of the target\n   node's port handle. */\n.cn-graph-canvas .vue-flow__arrowhead polyline,\n.cn-graph-canvas .vue-flow__arrowhead path {\n\tfill: var(--color-text-maxcontrast, #6b6b6b) !important;\n\tstroke: var(--color-text-maxcontrast, #6b6b6b) !important;\n}\n\n.cn-graph-canvas__controls {\n\tposition: absolute;\n\tbottom: 12px;\n\tleft: 12px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tz-index: 5;\n}\n\n.cn-graph-canvas__control {\n\twidth: 28px;\n\theight: 28px;\n\tborder: 1px solid var(--color-border, #d0d0d0);\n\tbackground: var(--color-main-background, #fff);\n\tcolor: var(--color-main-text, #222);\n\tcursor: pointer;\n}\n\n.cn-graph-canvas__control:focus-visible {\n\toutline: 2px solid var(--color-primary-element, #0082c9);\n\toutline-offset: 1px;\n}\n\n.cn-graph-canvas .vue-flow__minimap {\n\tbackground: var(--color-background-dark, #ededed);\n}\n</style>\n"],"names":["_createElementBlock","_createVNode","_withCtx","_mergeProps","_renderSlot","_createBlock","_openBlock","_createElementVNode"],"mappings":";;;;AA6G2B,EAAA,KAAK,EAAC,2BAAa;;;;;;;;;;;;;uBApG3CA;AAAG,IAAA,KAAK,EAAC,iBAAQ;AAAA,IAAA,MAAA,0CAAA,QAAA,CAAA,MAAA,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA,CAAA;AAAA,IAAA,UAAA,0CAAA,MAAA,EAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;;IACjBC,WA2FS,CAAA,kBAAA,EAAA;AA1FR,MAAA,KAAK,EAAE,MAAK,CAAA,KAAA;AACZ,MAAA,KAAK,EAAE,MAAK,CAAA,KAAA;AACZ,MAAA,OAAO,EAAE,MAAO,CAAA,OAAA;AAChB,MAAA,OAAO,EAAE,MAAO,CAAA,OAAA;AAChB,MAAA,aAAa,EAAE,MAAO,CAAA,OAAA;AACtB,MAAA,UAAU,EAAE,MAAU,CAAA,UAAA;AACtB,MAAA,QAAQ,EAAE,MAAQ,CAAA,QAAA;AAClB,MAAA,cAAc,EAAE,QAAU,CAAA,WAAA;AAC1B,MAAA,gBAAgB,EAAE,QAAQ,CAAA,WAAA;AAC1B,MAAA,kBAAkB,EAAA,QAAA,CAAA,WAAA;AAClB,MAAA,cAAc,EAAE,MAAM,CAAA,cAAA;AACtB,MAAA,aAAW,EAAE,QAAS,CAAA,aAAA;AACtB,MAAA,aAAW,EAAE,QAAU,CAAA,aAAA;AACvB,MAAA,SAAO,EAAE,QAAS,CAAA,SAAA;iBACT,EAAE,QAAW,CAAA,WAAA;iBACb,EAAE,QAAU,CAAA,WAAA;AACjB,MAAA,WAAK,EAAE,QAAU,CAAA,WAAA;;MAKX,cAAY,EAAAC,OAAA,CAOrB,CAgBY,SAvBmB,KAAA;QAO/BD,WAgBY,CAAA,qBAAA,EAhBZE,UACQ,CAeI,SAfK,EAAA;AAChB,UAAA,SAAS,GAAG,MAAK,CAAA,QAAA;AACjB,UAAA,SAAO,EAAE,QAAS,CAAA,SAAA;AAClB,UAAA,QAAM,EAAE,QAAY,CAAA,YAAA;AACf,UAAA,UAAG,EAAE,QAAc,CAAA,cAAA;AACnB,UAAA,MAAA,EAAC,QAAU,CAAA,UAAA;;UACN,OAAO,EAAAD,OAAA,WAAW,KAAA;;;;;;MAsBpB,cAAY,EAAAA,OAAA,CACrB,CA2BY,SA5BoB,KAAA;QAChCD,WA2BY,CAAA,qBAAA,EA3BZE,UACQ,CA0BI,SA1BK,EAAA;UAChB,QAAQ,EAAE,SAAS,CAAC,IAAI,IAAI,SAAA,CAAA,IAAA,CAAA,QAAA;UAC5B,QAAQ,EAAA,EAAI,SAAS,CAAC,IAAI,IAAI,SAAG,CAAA,IAAA,CAAA,QAAA,KAAA,KAAA,CAAA;UACjC,kBAAgB,EAAE,SAAS,CAAA,IAAA,IAAA,SAAA,CAAA,IAAA,CAAA,cAAA;AAC3B,UAAA,WAAS,EAAE,QAAe,CAAA,eAAA;AACrB,UAAA,YAAK,EAAE,QAAiB,CAAA,gBAAA;AACxB,UAAA,cAAO,EAAE,QAAkB,CAAA,kBAAA;;UACtB,KAAK,EAAAD,OAAA,CAQf,CAA6C,SARnB,KAAA;AAQ1B,YAAAE,UAAA,CAA6C,6DAAb,SAAS,CAAA,CAAA,CAAA;;UAG/B,SAAS,EAAAF,OAAA,WAAW,KAAA;;;;;;uBAWjC,MAA8C;SAA5B,MAAc,CAAA,cAAA;0BAAhCG,WAA8C,CAAA,qBAAA,EAAA;;AAAX,cAAA,GAAG,EAAE,MAAM,CAAA,QAAA,CAAA,CAAA,CAAA;;;SAC/B,MAAW,CAAA,WAAA;qCAAI,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA;;;;;KASpB,MAAY,CAAA,YAAA;AAArB,SAAAC,SAAA,EAAA,EAAAN,kBAAA,QAAA;UACAO,kBAMQ,CAAA,QAAA,EAAA;AALR,YAAA,IAAA,EAAA,QAAA;AACA,YAAA,KAAK,EAAC,0BAAC;AACN,YAAA,YAAI,EAAA,IAAA,CAAA,CAAA,CAAA,eAAA,EAAA,SAAA,CAAA;AACJ,YAAA,OAAK,uCAAE,MAAI,CAAA,MAAA,EAAA,CAAA,CAAA;aAAA,KAEZ,EAAA,CAAA,cAAA,UAAA,CAAA;UACAA,kBAMQ,CAAA,QAAA,EAAA;AALR,YAAA,IAAA,EAAA,QAAA;AACA,YAAA,KAAK,EAAC,0BAAC;AACN,YAAA,YAAI,EAAA,IAAA,CAAA,CAAA,CAAA,eAAA,EAAA,UAAA,CAAA;AACJ,YAAA,OAAK,uCAAE,MAAI,CAAA,OAAA,EAAA,CAAA,CAAA;aAAA;UAGZA;AACA,YAAA,IAAA,EAAA,QAAA;AACA,YAAA,KAAK,EAAC,0BAAC;AACN,YAAA,YAAE,EAAA,IAAA,CAAA,CAAA,CAAA,eAAA,EAAA,4BAAA,CAAA;AACF,YAAA,OAAC,uCAAA,MAAA,CAAA,UAAA,EAAA,CAAA,CAAA;aAAA;;;;;;;;"}

package/dist/esm/components/CnIndexPage/CnIndexPage.vue2.js

@@ -250,7 +250,7 @@ function namedFilterToQuery(values) {
  * @event {object} row-aux-click — Table row or card middle-clicked. Payload: (row, event) — the row object and the native auxclick event
  * @event {{ key: string, order: string }} sort — Column sort changed
  * @event {number} page-changed — Pagination page changed
- * @event {number} page-size-changed — Pagination page size changed
+ * @event {number} page-size-changed — Pagination page size changed. In self-fetch mode the list refetches page 1 at the new size first.
  * @event {string[]} select — Selection changed. Payload: array of selected IDs
  * @event {object} action — Row action triggered. Payload: { action, row }
  * @event {{ action: string, id: string, selectedIds: Array, count: number }} bulk-action — A declarative bulk action was triggered from the selection strip. The SELECTION travels with it: an action that has to go and find out what was selected is one re-render away from acting on a different set than the user saw highlighted.
@@ -4675,6 +4675,21 @@ var script = {
 			this.$emit('page-changed', page);
 		},
 
+		/**
+		 * Page-size pick from CnPagination. In self-fetch mode the list refetches
+		 * page 1 at the new size — the event alone left the select changing and
+		 * the table not, since a manifest page has no host listening.
+		 *
+		 * @param {number} size Requested page size.
+		 * @return {void}
+		 */
+		onPageSizeEvent(size) {
+			if (this.isSelfFetchMode && typeof this.list.onPageSizeChange === 'function') {
+				this.list.onPageSizeChange(size);
+			}
+			this.$emit('page-size-changed', size);
+		},
+
 		/**
 		 * @param {{key: string, values: Array}} payload Facet-filter change from the sidebar.
 		 * @return {void}