pptx-angular-viewer 4.7.0 → 4.8.0

package/fesm2022/pptx-angular-viewer-chart-3d-view-scene-CM71j9A9.mjs

@@ -0,0 +1,1703 @@
+import { s as shade, c as createSvgEl, a as appendChartLegendSvg, r as renderChartLineSvg, b as renderChartTextSvg, C as CHART_3D_DRAG_THRESHOLD_PX, d as buildBarChart3DHoverTooltip, i as isChartInteractionArmed, e as roundDragValue, o as obliqueBarTaper, p as perspBoxMatrix, D as DEFAULT_PALETTE, f as buildPerspCamera, g as perspToScreen, h as pieRimPoint, j as computePieChartLayout, k as perspScreenToPlaneY, l as resolvePieSliceShareValue, m as createSurfaceChart3DScene, n as createPieChart3DScene, q as createAreaChart3DScene, u as createLineChart3DScene, v as createBarChart3DScene, w as widenPieViewModel } from './pptx-angular-viewer-pptx-angular-viewer-Cf08ueRA.mjs';
+
+/**
+ * chart-3d-shading.ts: PowerPoint's flat chart-space shading for a 3D chart's
+ * box faces, as one colour multiplier per named face.
+ *
+ * PowerPoint's 3D charts (bar3D, pie3D, line3D ribbons, area3D slabs, surface
+ * bands) are flat-shaded in "chart space": every face of a given orientation
+ * gets the SAME multiplier applied to the mark's base colour, regardless of
+ * the chart's `c:view3D` tilt. Measured directly off the pixels of
+ * `gt/chart-01.webp` (a 3-D Clustered Column, series 1 = theme accent1
+ * `#156082`): the front (camera-facing) rect samples the base colour exactly
+ * (`front = base`), the top face samples ~0.75x, and the visible side face
+ * ~0.64x. `back`/`left` (mirrors of `right`) and `bottom` (rarely visible)
+ * are not independently measured; `back`/`left` reuse the measured side
+ * multiplier and `bottom` is a reasonable approximation between side and a
+ * fully unlit face.
+ *
+ * @module chart-3d-shading
+ */
+/**
+ * Darken amount (0-1, `chart-palette.ts#shade`'s `amount`) per face,
+ * derived from the measured multipliers: `amount = 1 - multiplier`.
+ */
+const FACE_SHADE_AMOUNT = {
+    front: 0,
+    top: 0.25,
+    right: 0.36,
+    left: 0.36,
+    back: 0.36,
+    bottom: 0.5,
+};
+/** Apply PowerPoint's measured per-face flat shading to a mark's base colour. */
+function shadeChart3DFace(baseColor, face) {
+    const amount = FACE_SHADE_AMOUNT[face];
+    return amount === 0 ? baseColor : shade(baseColor, amount);
+}
+/**
+ * The six face colours for a box mesh, in the order three.js `BoxGeometry`
+ * expects its `material` array (`[+x, -x, +y, -y, +z, -z]`): right, left,
+ * top, bottom, front, back. `front`/`back` name whichever world axis the
+ * scene treats as the camera-facing depth axis; the caller picks that
+ * mapping (see `chart-3d-view-scene.ts`).
+ */
+function buildChart3DBoxFaceColors(baseColor) {
+    return [
+        shadeChart3DFace(baseColor, 'right'),
+        shadeChart3DFace(baseColor, 'left'),
+        shadeChart3DFace(baseColor, 'top'),
+        shadeChart3DFace(baseColor, 'bottom'),
+        shadeChart3DFace(baseColor, 'front'),
+        shadeChart3DFace(baseColor, 'back'),
+    ];
+}
+/**
+ * Per-shape shade coefficients `[x, y, z]` for {@link chart3DNormalShade}.
+ * `box` reproduces the face multipliers above (right 0.64, top 0.75, front
+ * 1.0); the others are fitted to `gt/chart-07..09.webp` (accent1 columns):
+ * a cylinder runs 1.07x at its centre line to ~0.64x at the silhouette, a
+ * cone 1.16x to ~0.7x, a pyramid's front face 1.03x and its side 0.68x. Tops
+ * (cylinder cap, box top) sample 0.75x throughout.
+ */
+const NORMAL_SHADE = {
+    box: [0.64, 0.75, 1],
+    cylinder: [0.62, 0.75, 1.07],
+    cone: [0.7, 0.75, 1.16],
+    pyramid: [0.68, 0.75, 1.03],
+};
+/** Multiplier for a downward-facing surface (a bar's underside), rarely visible. */
+const UNDERSIDE_SHADE = 0.5;
+function shadeFamily(shape) {
+    switch (shape) {
+        case 'cylinder':
+            return 'cylinder';
+        case 'cone':
+        case 'coneToMax':
+            return 'cone';
+        case 'pyramid':
+        case 'pyramidToMax':
+            return 'pyramid';
+        default:
+            return 'box';
+    }
+}
+/**
+ * PowerPoint's flat chart-space shade for a surface of a `c:shape` bar with
+ * unit world normal `(nx, ny, nz)` (x right, y up, z toward the viewer), as
+ * a multiplier of the base colour: the quadratic form
+ * `cx nx^2 + cy ny^2 + cz nz^2`, which for a box's axis-aligned faces is
+ * exactly the per-face table above.
+ */
+function chart3DNormalShade(shape, nx, ny, nz) {
+    const [cx, cy, cz] = NORMAL_SHADE[shadeFamily(shape)];
+    return cx * nx * nx + (ny >= 0 ? cy : UNDERSIDE_SHADE) * ny * ny + cz * nz * nz;
+}
+
+/** Radial segments of a round shape: smooth at any chart size. */
+const ROUND_SEGMENTS = 48;
+/** Whether a bar is drawn with this module rather than as a box. */
+function isShapedObliqueBar(bar) {
+    return bar.shape !== 'box';
+}
+/** Cache key of a bar's unit geometry (shape, taper and orientation). */
+function obliqueShapeKey(bar, horizontal) {
+    return `${bar.shape}:${bar.taper.bottom.toFixed(4)}:${bar.taper.top.toFixed(4)}:${horizontal ? 'h' : 'v'}`;
+}
+/**
+ * The unit geometry of a shaped bar, its axis along +Y (or +X for a
+ * horizontal chart, the base at the value-axis baseline end).
+ */
+function buildObliqueShapeGeometry(three, bar, horizontal) {
+    const pointed = bar.shape === 'pyramid' || bar.shape === 'pyramidToMax';
+    let geometry;
+    if (pointed) {
+        // A 4-segment cylinder is a diamond of "radius" r; turned 45 degrees and
+        // widened by sqrt(2) its base is the full unit square.
+        const r = Math.SQRT1_2;
+        const faceted = new three.CylinderGeometry(r * bar.taper.top, r * bar.taper.bottom, 1, 4).rotateY(Math.PI / 4);
+        geometry = faceted.toNonIndexed();
+        faceted.dispose();
+        geometry.computeVertexNormals();
+    }
+    else {
+        geometry = new three.CylinderGeometry(0.5 * bar.taper.top, 0.5 * bar.taper.bottom, 1, ROUND_SEGMENTS);
+    }
+    if (horizontal) {
+        geometry.rotateZ(-Math.PI / 2);
+    }
+    return geometry;
+}
+/**
+ * (Re)write a shaped bar's vertex colours for its current world `scale`, so
+ * each vertex gets the shade of its world-space normal.
+ */
+function shadeObliqueShapeGeometry(three, geometry, bar, scale, viewYaw) {
+    const round = bar.shape !== 'pyramid' && bar.shape !== 'pyramidToMax';
+    const cos = Math.cos(round ? viewYaw : 0);
+    const sin = Math.sin(round ? viewYaw : 0);
+    const normals = geometry.getAttribute('normal');
+    const count = normals.count;
+    let colors = geometry.getAttribute('color');
+    if (!colors || colors.count !== count) {
+        colors = new three.Float32BufferAttribute(new Float32Array(count * 3), 3);
+        geometry.setAttribute('color', colors);
+    }
+    const base = new three.Color(bar.color);
+    const srgb = base.getRGB(new three.Color(), three.SRGBColorSpace);
+    const out = new three.Color();
+    for (let i = 0; i < count; i++) {
+        // Normals transform by the inverse scale.
+        let nx = normals.getX(i) / Math.max(scale.x, 1e-6);
+        let ny = normals.getY(i) / Math.max(scale.y, 1e-6);
+        let nz = normals.getZ(i) / Math.max(scale.z, 1e-6);
+        const len = Math.hypot(nx, ny, nz) || 1;
+        nx /= len;
+        ny /= len;
+        nz /= len;
+        const f = chart3DNormalShade(bar.shape, nx * cos - nz * sin, ny, nx * sin + nz * cos);
+        out.setRGB(Math.min(1, srgb.r * f), Math.min(1, srgb.g * f), Math.min(1, srgb.b * f), three.SRGBColorSpace);
+        colors.setXYZ(i, out.r, out.g, out.b);
+    }
+    colors.needsUpdate = true;
+}
+
+/** PowerPoint's default major gridline colour (tx1 at 15% tint, `#D9D9D9`). */
+const GRIDLINE_COLOR$1 = 0xd9d9d9;
+/** Scene position of a layout world point. */
+function obliqueToScene(layout, svgWidth, svgHeight, p) {
+    return [layout.origin.x + p[0] - svgWidth / 2, svgHeight / 2 - layout.origin.y + p[1], -p[2]];
+}
+/**
+ * Place (and for a `c:shape` bar, reshape and reshade) a bar's mesh at a
+ * bar's current world box. Used at build time and for the drag preview.
+ */
+function placeObliqueBarMesh(three, mesh, layout, svgWidth, svgHeight, bar) {
+    mesh.position.set(...obliqueToScene(layout, svgWidth, svgHeight, [
+        bar.x + bar.w / 2,
+        bar.y + bar.h / 2,
+        bar.z + bar.d / 2,
+    ]));
+    mesh.scale.set(Math.max(bar.w, 0.001), Math.max(bar.h, 0.001), bar.d);
+    if (!isShapedObliqueBar(bar)) {
+        return;
+    }
+    const key = obliqueShapeKey(bar, layout.horizontal);
+    const data = mesh.userData;
+    if (data.shapeKey !== key) {
+        const previous = mesh.geometry;
+        mesh.geometry = buildObliqueShapeGeometry(three, bar, layout.horizontal);
+        previous.dispose();
+        data.shapeKey = key;
+    }
+    shadeObliqueShapeGeometry(three, mesh.geometry, bar, mesh.scale, Math.atan(layout.shear.x));
+}
+/** Build the bar boxes and gridlines of an oblique layout into a new group. */
+function buildChart3DBarMeshes(three, layout, svgWidth, svgHeight) {
+    const group = new three.Group();
+    const meshes = [];
+    const lineGeometries = [];
+    const materials = [];
+    const points = [];
+    for (const line of layout.gridlines) {
+        points.push(...obliqueToScene(layout, svgWidth, svgHeight, line.from), ...obliqueToScene(layout, svgWidth, svgHeight, line.to));
+    }
+    if (points.length > 0) {
+        const lineGeometry = new three.BufferGeometry();
+        lineGeometry.setAttribute('position', new three.Float32BufferAttribute(points, 3));
+        const lineMaterial = new three.LineBasicMaterial({ color: GRIDLINE_COLOR$1 });
+        lineGeometries.push(lineGeometry);
+        materials.push(lineMaterial);
+        group.add(new three.LineSegments(lineGeometry, lineMaterial));
+    }
+    for (const bar of layout.bars) {
+        let mesh;
+        if (isShapedObliqueBar(bar)) {
+            const material = new three.MeshBasicMaterial({ vertexColors: true });
+            materials.push(material);
+            mesh = new three.Mesh(new three.BufferGeometry(), material);
+        }
+        else {
+            const faceMaterials = buildChart3DBoxFaceColors(bar.color).map((color) => new three.MeshBasicMaterial({ color }));
+            materials.push(...faceMaterials);
+            mesh = new three.Mesh(new three.BoxGeometry(1, 1, 1), faceMaterials);
+        }
+        mesh.userData = { seriesIndex: bar.seriesIndex, categoryIndex: bar.categoryIndex };
+        placeObliqueBarMesh(three, mesh, layout, svgWidth, svgHeight, bar);
+        group.add(mesh);
+        meshes.push(mesh);
+    }
+    return {
+        group,
+        meshes,
+        dispose: () => {
+            // A drag preview may have swapped a shaped bar's geometry, so free
+            // whatever each mesh holds now.
+            for (const geometry of [...lineGeometries, ...meshes.map((m) => m.geometry)]) {
+                geometry.dispose();
+            }
+            for (const material of materials) {
+                material.dispose();
+            }
+        },
+    };
+}
+
+/**
+ * chart-3d-chrome-overlay.ts: the SVG "chrome" (chart-area fill/border,
+ * title, legend, value-axis gridlines/ticks, category labels) a 3D chart
+ * scene draws OVER its WebGL canvas via `ctx.overlay`.
+ *
+ * PowerPoint's own 3D charts always show this chrome exactly like the 2D
+ * chart does (see the parity brief's "hybrid rendering" requirement); for a
+ * chart in the oblique (`rAngAx=1`) projection family this chrome is
+ * ALREADY pixel-correct in the flat 2D `ChartViewModel` (verified against
+ * `gt/chart-01.webp`: axes/gridlines/title/legend sit exactly where a plain
+ * 2D chart would put them, perfectly undistorted), so this module reuses the
+ * SAME `chart-view-model-dom.ts` piece-renderers the 2D/vanilla projector
+ * uses, just WITHOUT `vm.primitives`/`vm.dataLabels` (the flat oblique
+ * bars/extrusion polygons, replaced by real WebGL geometry).
+ *
+ * @module chart-3d-chrome-overlay
+ */
+/**
+ * Render a `ChartViewModel`'s chrome (everything except data marks) to an
+ * `<svg>` sized to `vm.svgWidth` x `vm.svgHeight`, matching the WebGL
+ * scene's own world-unit convention (1 world unit = 1 authored chart px) so
+ * an element positioned from the same view-model's rects lines up exactly.
+ */
+function renderChart3DChromeOverlaySvg(doc, source, box) {
+    const vm = box ? withBoxChromePositions(source) : source;
+    const svg = createSvgEl(doc, 'svg', {
+        class: 'pptxv-chart-3d-chrome',
+        viewBox: `0 0 ${vm.svgWidth} ${vm.svgHeight}`,
+        preserveAspectRatio: 'none',
+    });
+    svg.style.setProperty('width', '100%');
+    svg.style.setProperty('height', '100%');
+    svg.style.setProperty('display', 'block');
+    svg.style.setProperty('position', 'absolute');
+    svg.style.setProperty('inset', '0');
+    // The WebGL canvas paints the marks; this overlay only adds chrome on top
+    // of them, so pointer events must fall through to the canvas underneath.
+    svg.style.setProperty('pointer-events', 'none');
+    if (vm.areaFill) {
+        svg.appendChild(createSvgEl(doc, 'rect', {
+            x: 0,
+            y: 0,
+            width: vm.svgWidth,
+            height: vm.svgHeight,
+            rx: vm.areaRadius,
+            fill: vm.areaFill,
+        }));
+    }
+    if (vm.title) {
+        const title = createSvgEl(doc, 'text', {
+            x: vm.titleX,
+            y: vm.titleY,
+            'text-anchor': 'middle',
+            'font-size': vm.titleStyle?.fontSize ?? 12,
+            'font-weight': vm.titleStyle?.fontWeight ?? 600,
+            'font-family': vm.titleStyle?.fontFamily,
+            fill: vm.titleStyle?.fill ?? '#1e293b',
+            'data-chart-part': 'title',
+        });
+        if (vm.titleRunSpans && vm.titleRunSpans.length > 0) {
+            for (const run of vm.titleRunSpans) {
+                const tspan = createSvgEl(doc, 'tspan', {
+                    'font-size': run.fontSize,
+                    'font-weight': run.fontWeight,
+                    'font-style': run.fontStyle,
+                    'font-family': run.fontFamily,
+                    fill: run.fill,
+                });
+                tspan.textContent = run.text;
+                title.appendChild(tspan);
+            }
+        }
+        else {
+            title.textContent = vm.title;
+        }
+        svg.appendChild(title);
+    }
+    if (box) {
+        // The box's gridlines are drawn in the scene (marks hide the back
+        // wall); only its axis labels go here.
+        appendBoxLabels(doc, svg, vm, box.labels);
+        // A 3D chart keys every series with a plain swatch, lines included.
+        const legend = box.legend ?? vm.legend.map((item) => ({ ...item, lineSwatch: undefined }));
+        const legendVm = { ...vm, legend: box.reverseLegend ? legend.reverse() : legend };
+        appendChartLegendSvg(doc, svg, legendVm);
+        return svg;
+    }
+    for (const gl of vm.gridlines) {
+        svg.appendChild(renderChartLineSvg(doc, gl));
+    }
+    for (const gl of vm.secondaryGridlines ?? []) {
+        svg.appendChild(renderChartLineSvg(doc, gl));
+    }
+    for (const lbl of vm.axisLabels) {
+        svg.appendChild(renderChartTextSvg(doc, lbl));
+    }
+    for (const lbl of vm.secondaryAxisLabels ?? []) {
+        svg.appendChild(renderChartTextSvg(doc, lbl));
+    }
+    if (vm.zeroLine) {
+        svg.appendChild(renderChartLineSvg(doc, vm.zeroLine));
+    }
+    for (const lbl of vm.categoryLabels) {
+        svg.appendChild(renderChartTextSvg(doc, lbl));
+    }
+    appendChartLegendSvg(doc, svg, vm);
+    return svg;
+}
+/** Points to chart px (96 dpi). */
+const PT = 4 / 3;
+/** Title baseline below the chart top, and legend baseline above its bottom, measured on `gt/chart-01`. */
+const OBLIQUE_TITLE_BASELINE = 24 * PT;
+const OBLIQUE_LEGEND_BASELINE = 14 * PT;
+/** The flat view model with its title and legend moved to where PowerPoint puts them on a 3D chart. */
+function withBoxChromePositions(vm) {
+    const legendBottom = (vm.legendY ?? vm.svgHeight - 8) >= vm.svgHeight / 2;
+    return {
+        ...vm,
+        titleY: OBLIQUE_TITLE_BASELINE,
+        // Legend text sits 3px below `legendY` (see `appendChartLegendSvg`).
+        legendY: legendBottom ? vm.svgHeight - OBLIQUE_LEGEND_BASELINE - 3 : vm.legendY,
+    };
+}
+function appendBoxLabels(doc, svg, vm, labels) {
+    const style = vm.axisLabels[0];
+    for (const label of labels) {
+        svg.appendChild(renderChartTextSvg(doc, {
+            kind: 'text',
+            x: label.x,
+            y: label.y,
+            text: label.text,
+            fontSize: label.fontSize,
+            fill: style?.fill ?? '#595959',
+            fontFamily: style?.fontFamily,
+            textAnchor: label.anchor,
+            dominantBaseline: label.baseline ?? 'central',
+        }));
+    }
+}
+
+function partOf(point) {
+    return point
+        ? { role: 'dataPoint', seriesIndex: point.seriesIndex, pointIndex: point.pointIndex }
+        : null;
+}
+/** Attach hover/select/drag to a 3D chart scene's marks. */
+function attachChart3DMarkInteraction(options) {
+    const { ctx, camera, adapter, chartData } = options;
+    const three = ctx.three;
+    const target = ctx.eventTarget;
+    const raycaster = new three.Raycaster();
+    const far = new three.Vector3();
+    let interactive = ctx.interactive;
+    let press = null;
+    let hoveredTooltip;
+    function pointAt(clientX, clientY) {
+        const rect = target.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            return null;
+        }
+        options.scene.updateMatrixWorld();
+        camera.updateMatrixWorld();
+        const x = ((clientX - rect.left) / rect.width) * 2 - 1;
+        const y = -((clientY - rect.top) / rect.height) * 2 + 1;
+        raycaster.ray.origin.set(x, y, -1).unproject(camera);
+        far.set(x, y, 1).unproject(camera);
+        raycaster.ray.direction.copy(far).sub(raycaster.ray.origin).normalize();
+        const hit = raycaster.intersectObjects(adapter.targets, false)[0];
+        return hit ? adapter.pointAt(hit) : null;
+    }
+    const onPointerMove = (event) => {
+        if (press?.drag) {
+            const dx = event.clientX - press.startX;
+            const dy = event.clientY - press.startY;
+            if (!press.drag.moved && Math.hypot(dx, dy) < CHART_3D_DRAG_THRESHOLD_PX) {
+                return;
+            }
+            press.drag.moved = true;
+            const k = press.chartPxPerClientPx;
+            const rect = target.getBoundingClientRect();
+            const value = press.drag.session.preview(dx * k, dy * k, {
+                x: (event.clientX - rect.left) * k,
+                y: (event.clientY - rect.top) * k,
+            });
+            press.lastValue = value;
+            ctx.requestRender();
+            const part = partOf(press.point);
+            if (part) {
+                ctx.emit({ type: 'drag', detail: { part, value, phase: 'move' } });
+            }
+            return;
+        }
+        const point = pointAt(event.clientX, event.clientY);
+        const value = point ? adapter.valueOf(point) : undefined;
+        const tooltip = point && value !== undefined
+            ? buildBarChart3DHoverTooltip({ seriesIndex: point.seriesIndex, categoryIndex: point.pointIndex, value }, {
+                categoryLabels: options.categoryLabels,
+                seriesNames: options.seriesNames,
+                numberFormats: chartData.series.map((s) => s.numberFormat),
+            })
+            : undefined;
+        if (tooltip !== hoveredTooltip) {
+            hoveredTooltip = tooltip;
+            target.title = tooltip ?? '';
+        }
+    };
+    const onPointerDown = (event) => {
+        if (!interactive) {
+            return;
+        }
+        const point = pointAt(event.clientX, event.clientY);
+        const armed = point !== null && isChartInteractionArmed(target);
+        if (armed) {
+            event.stopPropagation();
+        }
+        const session = armed && point ? adapter.beginDrag(point) : null;
+        if (session) {
+            event.preventDefault();
+            target.setPointerCapture?.(event.pointerId);
+        }
+        const rect = target.getBoundingClientRect();
+        press = {
+            point,
+            drag: session ? { session, moved: false } : null,
+            startX: event.clientX,
+            startY: event.clientY,
+            chartPxPerClientPx: rect.height > 0 ? options.svgHeight / rect.height : 1,
+            lastValue: null,
+        };
+    };
+    const onPointerUp = (event) => {
+        const current = press;
+        press = null;
+        if (!current || !interactive) {
+            return;
+        }
+        const part = partOf(current.point);
+        if (current.drag?.moved && current.lastValue !== null && part) {
+            ctx.emit({ type: 'drag', detail: { part, value: current.lastValue, phase: 'commit' } });
+            return;
+        }
+        const travel = Math.hypot(event.clientX - current.startX, event.clientY - current.startY);
+        if (travel < CHART_3D_DRAG_THRESHOLD_PX) {
+            ctx.emit({ type: 'select', part });
+        }
+    };
+    const onPointerLeave = () => {
+        if (hoveredTooltip !== undefined) {
+            hoveredTooltip = undefined;
+            target.title = '';
+        }
+    };
+    target.addEventListener('pointermove', onPointerMove);
+    target.addEventListener('pointerdown', onPointerDown);
+    target.addEventListener('pointerup', onPointerUp);
+    target.addEventListener('pointerleave', onPointerLeave);
+    return {
+        setInteractive(on) {
+            interactive = on;
+            if (!on) {
+                press = null;
+            }
+        },
+        setSelectedPart(part) {
+            adapter.highlight(part?.role === 'dataPoint' && part.pointIndex !== undefined
+                ? { seriesIndex: part.seriesIndex, pointIndex: part.pointIndex }
+                : null);
+            ctx.requestRender();
+        },
+        dispose() {
+            target.removeEventListener('pointermove', onPointerMove);
+            target.removeEventListener('pointerdown', onPointerDown);
+            target.removeEventListener('pointerup', onPointerUp);
+            target.removeEventListener('pointerleave', onPointerLeave);
+            adapter.dispose?.();
+        },
+    };
+}
+
+/**
+ * Value-drag maths for the right-angle-axes 3D bar chart
+ * (`chart-3d-oblique-layout.ts`), kept pure so it is testable without WebGL.
+ *
+ * A bar's front face is drawn flat, so dragging along the value axis moves
+ * its value by `chart px / valueScale`, rounded like every other chart drag
+ * (`roundDragValue`). Columns drag vertically (up = larger), horizontal bars
+ * horizontally (right = larger). Like the 2D chart, only `clustered` and
+ * `standard` bars are value-draggable: a stacked segment sits on a running
+ * sum, so dragging one would not track the pointer.
+ *
+ * @module chart-3d-oblique-drag
+ */
+/** Whether a bar in this layout can be value-dragged. */
+function isObliqueBarDraggable(layout) {
+    return layout.grouping === 'clustered' || layout.grouping === 'standard';
+}
+/**
+ * The value after dragging by a pointer delta, in chart px (`dx` right,
+ * `dy` down).
+ */
+function obliqueDragValue(layout, startValue, dx, dy) {
+    const along = layout.horizontal ? dx : -dy;
+    const raw = startValue + along / layout.valueScale;
+    const span = layout.range.max - layout.range.min;
+    return roundDragValue(raw, { min: layout.range.min, max: layout.range.max, span });
+}
+/**
+ * A bar's extent along the value axis after a drag to `value` (the baseline
+ * end stays put), clipped to the axis, in the layout's world units.
+ */
+function obliqueDraggedExtent(layout, value) {
+    const { min, max } = layout.range;
+    const base = Math.min(Math.max(0, min), max);
+    const clamp = (v) => Math.min(Math.max(v, min), max);
+    const lo = (clamp(Math.min(base, value)) - min) * layout.valueScale;
+    const hi = (clamp(Math.max(base, value)) - min) * layout.valueScale;
+    return { from: lo, length: hi - lo };
+}
+/** `bar` with its value-axis extent (and taper) replaced: a live drag preview. */
+function obliqueBarAtValue(layout, bar, value) {
+    const { from, length } = obliqueDraggedExtent(layout, value);
+    const extent = (layout.range.max - layout.range.min) * layout.valueScale;
+    const taper = obliqueBarTaper(bar.shape, from, from + length, extent, value);
+    return layout.horizontal
+        ? { ...bar, x: from, w: length, value, taper }
+        : { ...bar, y: from, h: length, value, taper };
+}
+
+/** Colour of the selected box's outline (matches the 2D selected-mark accent). */
+const SELECTED_OUTLINE_COLOR = 0x2563eb;
+/** Attach hover/select/drag to an oblique bar scene's boxes. */
+function attachObliqueBarInteraction(options) {
+    const { ctx, meshes, layout } = options;
+    const bars = layout.bars;
+    const three = ctx.three;
+    const outline = new three.LineSegments(new three.EdgesGeometry(new three.BoxGeometry(1, 1, 1)), new three.LineBasicMaterial({ color: SELECTED_OUTLINE_COLOR }));
+    outline.visible = false;
+    options.scene.add(outline);
+    let selected = -1;
+    const indexOf = (point) => bars.findIndex((b) => b.seriesIndex === point.seriesIndex && b.categoryIndex === point.pointIndex);
+    function syncOutline() {
+        outline.visible = selected >= 0;
+        if (selected >= 0) {
+            outline.position.copy(meshes[selected].position);
+            outline.scale.copy(meshes[selected].scale);
+        }
+    }
+    return attachChart3DMarkInteraction({
+        ctx,
+        camera: options.camera,
+        scene: options.scene,
+        svgHeight: options.svgHeight,
+        chartData: options.chartData,
+        categoryLabels: options.categoryLabels,
+        seriesNames: options.seriesNames,
+        adapter: {
+            targets: meshes,
+            pointAt(hit) {
+                const data = hit.object.userData;
+                if (data.seriesIndex === undefined || data.categoryIndex === undefined) {
+                    return null;
+                }
+                return { seriesIndex: data.seriesIndex, pointIndex: data.categoryIndex };
+            },
+            valueOf(point) {
+                return bars[indexOf(point)]?.value;
+            },
+            beginDrag(point) {
+                const index = indexOf(point);
+                if (index < 0 || !isObliqueBarDraggable(layout)) {
+                    return null;
+                }
+                const start = bars[index];
+                return {
+                    preview(dx, dy) {
+                        const value = obliqueDragValue(layout, start.value, dx, dy);
+                        placeObliqueBarMesh(three, meshes[index], layout, options.svgWidth, options.svgHeight, obliqueBarAtValue(layout, start, value));
+                        syncOutline();
+                        return value;
+                    },
+                };
+            },
+            highlight(point) {
+                selected = point ? indexOf(point) : -1;
+                syncOutline();
+            },
+            dispose() {
+                outline.geometry.dispose();
+                outline.material.dispose();
+                outline.removeFromParent();
+            },
+        },
+    });
+}
+
+const DEFAULT_GAP_WIDTH = 150;
+function valueY(layout, v) {
+    const clamped = Math.min(Math.max(v, layout.range.min), layout.range.max);
+    return (clamped - layout.range.min) * layout.valueScale;
+}
+/** One prism per bar; `override` replaces one point's value (a drag preview). */
+function buildPerspBarPrisms(chartData, layout, override) {
+    const nCat = layout.categoryX.length;
+    const nSer = chartData.series.length;
+    const slot = nCat > 0 ? 1 / nCat : 1;
+    const gapWidth = (chartData.barGapWidth ?? DEFAULT_GAP_WIDTH) / 100;
+    const slots = layout.grouping === 'clustered' ? nSer : 1;
+    const barW = slot / (slots + gapWidth);
+    const depth = Math.min(barW, layout.rowDepth);
+    const stacked = layout.grouping === 'stacked' || layout.grouping === 'percentStacked';
+    const baseline = Math.min(Math.max(0, layout.range.min), layout.range.max);
+    const prisms = [];
+    for (let c = 0; c < nCat; c++) {
+        const valueOf = (s) => {
+            if (override && override.seriesIndex === s && override.pointIndex === c) {
+                return override.value;
+            }
+            const v = chartData.series[s]?.values[c];
+            return v !== undefined && Number.isFinite(v) ? v : 0;
+        };
+        const total = chartData.series.reduce((t, _s, s) => t + Math.abs(valueOf(s)), 0);
+        let pos = baseline;
+        let neg = baseline;
+        for (let s = 0; s < nSer; s++) {
+            const raw = valueOf(s);
+            const value = layout.grouping === 'percentStacked' ? (total ? raw / total : 0) : raw;
+            let from = baseline;
+            let to = value;
+            if (stacked) {
+                from = value >= 0 ? pos : neg;
+                to = from + value;
+                if (value >= 0) {
+                    pos = to;
+                }
+                else {
+                    neg = to;
+                }
+            }
+            const slotIndex = layout.grouping === 'clustered' ? s : 0;
+            const row = layout.grouping === 'standard' ? s : 0;
+            const x0 = c * slot + (gapWidth * barW) / 2 + slotIndex * barW;
+            const y0 = valueY(layout, Math.min(from, to));
+            const y1 = Math.max(valueY(layout, Math.max(from, to)), y0 + 1e-6);
+            const z0 = row * layout.rowDepth + (layout.rowDepth - depth) / 2;
+            prisms.push({
+                seriesIndex: s,
+                pointIndex: c,
+                color: layout.colors[s],
+                outline: [
+                    [x0, y0],
+                    [x0 + barW, y0],
+                    [x0 + barW, y1],
+                    [x0, y1],
+                ],
+                z0,
+                z1: z0 + depth,
+            });
+        }
+    }
+    return prisms;
+}
+
+/** Ribbon thickness, as a fraction of the box height. */
+const RIBBON_THICKNESS = 0.012;
+/** Box y of a value, clipped to the axis. */
+function perspValueY(layout, v) {
+    const clamped = Math.min(Math.max(v, layout.range.min), layout.range.max);
+    return (clamped - layout.range.min) * layout.valueScale;
+}
+/** Depth range of a row's mark. */
+function perspRowSpan(layout, row) {
+    const z0 = row * layout.rowDepth + (layout.rowDepth - layout.markDepth) / 2;
+    return [z0, z0 + layout.markDepth];
+}
+function finite(v) {
+    return v !== undefined && Number.isFinite(v) ? v : 0;
+}
+/** Values series by series, `percentStacked` normalised to category totals. */
+function plottedValues(chartData, layout, nCat) {
+    const raw = chartData.series.map((s) => Array.from({ length: nCat }, (_, c) => finite(s.values[c])));
+    if (layout.grouping !== 'percentStacked') {
+        return raw;
+    }
+    const totals = Array.from({ length: nCat }, (_, c) => raw.reduce((t, s) => t + Math.abs(s[c]), 0));
+    return raw.map((s) => s.map((v, c) => (totals[c] ? v / totals[c] : 0)));
+}
+/**
+ * The prisms for a line or area chart; `override` replaces one point's value
+ * (a live drag preview).
+ */
+function buildPerspPrisms(chartData, layout, override) {
+    if (layout.kind === 'bar') {
+        return buildPerspBarPrisms(chartData, layout, override);
+    }
+    const nCat = layout.categoryX.length;
+    const values = plottedValues(chartData, layout, nCat);
+    if (override) {
+        const row = values[override.seriesIndex];
+        if (row && override.pointIndex < nCat) {
+            row[override.pointIndex] = override.value;
+        }
+    }
+    const xs = layout.categoryX;
+    const baseY = perspValueY(layout, Math.max(0, layout.range.min));
+    const prisms = [];
+    if (layout.kind === 'line') {
+        const t = (layout.view.box.h * RIBBON_THICKNESS) / 2;
+        values.forEach((series, s) => {
+            const ys = series.map((v) => perspValueY(layout, v));
+            const [z0, z1] = perspRowSpan(layout, s);
+            prisms.push({
+                seriesIndex: s,
+                color: layout.colors[s],
+                outline: [
+                    ...xs.map((x, c) => [x, ys[c] - t]),
+                    ...xs.map((x, c) => [x, ys[c] + t]).reverse(),
+                ],
+                z0,
+                z1,
+            });
+        });
+        return prisms;
+    }
+    const stacked = layout.grouping !== 'standard';
+    const running = new Array(nCat).fill(0);
+    values.forEach((series, s) => {
+        const lower = stacked ? running.map((v) => perspValueY(layout, v)) : xs.map(() => baseY);
+        const upper = series.map((v, c) => perspValueY(layout, stacked ? running[c] + v : v));
+        if (stacked) {
+            series.forEach((v, c) => {
+                running[c] += v;
+            });
+        }
+        const [z0, z1] = perspRowSpan(layout, stacked ? 0 : s);
+        prisms.push({
+            seriesIndex: s,
+            color: layout.colors[s],
+            outline: [
+                ...xs.map((x, c) => [x, lower[c]]),
+                ...xs.map((x, c) => [x, upper[c]]).reverse(),
+            ],
+            z0,
+            z1,
+        });
+    });
+    return prisms;
+}
+
+/** PowerPoint's default major gridline colour (tx1 at 15% tint, `#D9D9D9`). */
+const GRIDLINE_COLOR = 0xd9d9d9;
+/** Bake face shading into a geometry's vertex colours. */
+function shadePerspGeometry(three, geometry, color) {
+    const normals = geometry.getAttribute('normal');
+    const colors = new Float32Array(normals.count * 3);
+    const base = new three.Color(color).getRGB(new three.Color(), three.SRGBColorSpace);
+    const out = new three.Color();
+    for (let i = 0; i < normals.count; i++) {
+        // Box-space -z faces the viewer.
+        const f = chart3DNormalShade('box', normals.getX(i), normals.getY(i), -normals.getZ(i));
+        out.setRGB(Math.min(1, base.r * f), Math.min(1, base.g * f), Math.min(1, base.b * f), three.SRGBColorSpace);
+        colors[i * 3] = out.r;
+        colors[i * 3 + 1] = out.g;
+        colors[i * 3 + 2] = out.b;
+    }
+    geometry.setAttribute('color', new three.Float32BufferAttribute(colors, 3));
+}
+/** An extruded, shaded prism geometry in box space. */
+function buildPrismGeometry(three, prism) {
+    const shape = new three.Shape(prism.outline.map(([x, y]) => new three.Vector2(x, y)));
+    const extruded = new three.ExtrudeGeometry(shape, {
+        depth: Math.max(prism.z1 - prism.z0, 1e-6),
+        bevelEnabled: false,
+        steps: 1,
+    });
+    const geometry = extruded.index ? extruded.toNonIndexed() : extruded;
+    if (geometry !== extruded) {
+        extruded.dispose();
+    }
+    geometry.translate(0, 0, prism.z0);
+    geometry.computeVertexNormals();
+    shadePerspGeometry(three, geometry, prism.color);
+    return geometry;
+}
+/** The wall gridlines and floor edges of a perspective layout, in box space. */
+function buildPerspGridlines(three, layout) {
+    const points = [];
+    for (const line of layout.gridlines) {
+        points.push(...line.from, ...line.to);
+    }
+    const geometry = new three.BufferGeometry();
+    geometry.setAttribute('position', new three.Float32BufferAttribute(points, 3));
+    return new three.LineSegments(geometry, new three.LineBasicMaterial({ color: GRIDLINE_COLOR }));
+}
+/** Build the gridlines and prism meshes of a perspective layout. */
+function buildPerspMeshes(three, layout, prisms) {
+    const group = new three.Group();
+    group.matrixAutoUpdate = false;
+    group.matrix.copy(perspBoxMatrix(three, layout.view));
+    const gridlines = buildPerspGridlines(three, layout);
+    group.add(gridlines);
+    const material = new three.MeshBasicMaterial({ vertexColors: true, side: three.DoubleSide });
+    const meshes = prisms.map((prism) => {
+        const mesh = new three.Mesh(buildPrismGeometry(three, prism), material);
+        mesh.userData = { seriesIndex: prism.seriesIndex, pointIndex: prism.pointIndex };
+        group.add(mesh);
+        return mesh;
+    });
+    return {
+        group,
+        meshes,
+        setPrism(i, prism) {
+            const mesh = meshes[i];
+            if (!mesh) {
+                return;
+            }
+            const previous = mesh.geometry;
+            mesh.geometry = buildPrismGeometry(three, prism);
+            previous.dispose();
+        },
+        dispose() {
+            gridlines.geometry.dispose();
+            gridlines.material.dispose();
+            material.dispose();
+            for (const mesh of meshes) {
+                mesh.geometry.dispose();
+            }
+        },
+    };
+}
+
+/** Box z of series row `s` of `n` (front edge to back wall). */
+function surfaceRowZ(layout, s, n) {
+    return n > 1 ? (s / (n - 1)) * layout.view.box.d : layout.view.box.d / 2;
+}
+/** The value band edges (min, min + unit, ..., max). */
+function bandEdges(range) {
+    const unit = range.majorUnit > 0 ? range.majorUnit : range.max - range.min || 1;
+    const edges = [];
+    for (let v = range.min; v < range.max - unit * 1e-9; v += unit) {
+        edges.push(Number(v.toPrecision(12)));
+    }
+    edges.push(range.max);
+    return edges;
+}
+function formatEdge(v) {
+    return String(Number(v.toPrecision(10)));
+}
+/** Colours and legend labels for each band. */
+function surfaceBands(chartData, range, palette) {
+    const edges = bandEdges(range);
+    return edges.slice(0, -1).map((lo, i) => {
+        const fmt = chartData.bandFmts?.find((b) => b.index === i)?.spPr;
+        const cycle = palette.length > 0 ? palette : ['#4472C4'];
+        const base = cycle[i % cycle.length];
+        const fallback = Math.floor(i / cycle.length) % 2 === 1 ? shade(base, 0.4) : base;
+        return {
+            label: `${formatEdge(lo)}-${formatEdge(edges[i + 1])}`,
+            color: fmt?.fillColor ?? fmt?.strokeColor ?? fallback,
+        };
+    });
+}
+/** Clip a polygon to `lo <= y <= hi` (box y). */
+function clipY(poly, lo, hi) {
+    const clip = (pts, keep, edge) => {
+        const out = [];
+        for (let i = 0; i < pts.length; i++) {
+            const a = pts[i];
+            const b = pts[(i + 1) % pts.length];
+            const ina = keep(a);
+            const inb = keep(b);
+            if (ina) {
+                out.push(a);
+            }
+            if (ina !== inb) {
+                const t = (edge - a[1]) / (b[1] - a[1]);
+                out.push([a[0] + (b[0] - a[0]) * t, edge, a[2] + (b[2] - a[2]) * t]);
+            }
+        }
+        return out;
+    };
+    return clip(clip(poly, (p) => p[1] >= lo, lo), (p) => p[1] <= hi, hi);
+}
+/** A grid cell's two triangles. */
+function cellTriangles(point, s, c) {
+    return [
+        [point(s, c), point(s, c + 1), point(s + 1, c + 1)],
+        [point(s, c), point(s + 1, c + 1), point(s + 1, c)],
+    ];
+}
+/**
+ * A grid edge drawn once per band with the surface clamped into that band
+ * (PowerPoint's wireframe: each band is its own layer, flat where the
+ * surface runs above or below it). Only the front series line keeps its
+ * flat stretches: that is all `gt/chart-17` shows of the lower layers.
+ */
+function clampedBandSegments(a, b, edgesY, out, keepFlat) {
+    for (let band = 0; band + 1 < edgesY.length; band++) {
+        const lo = edgesY[band];
+        const hi = edgesY[band + 1];
+        const cuts = [0, 1];
+        for (const e of [lo, hi]) {
+            const t = (e - a[1]) / (b[1] - a[1]);
+            if (t > 0 && t < 1) {
+                cuts.push(t);
+            }
+        }
+        cuts.sort((x, y) => x - y);
+        const at = (t) => [
+            a[0] + (b[0] - a[0]) * t,
+            Math.min(hi, Math.max(lo, a[1] + (b[1] - a[1]) * t)),
+            a[2] + (b[2] - a[2]) * t,
+        ];
+        for (let i = 0; i + 1 < cuts.length; i++) {
+            const from = at(cuts[i]);
+            const to = at(cuts[i + 1]);
+            const flat = from[1] === to[1] && (from[1] === lo || from[1] === hi);
+            if (keepFlat || !flat) {
+                out.push({ from, to, band });
+            }
+        }
+    }
+}
+/**
+ * The surface's triangles (filled) or segments (wireframe) in box space;
+ * `override` replaces one point's value (a drag preview).
+ */
+function buildSurfaceGeometry(chartData, layout, palette, override) {
+    const nSer = chartData.series.length;
+    const nCat = layout.categoryX.length;
+    const bands = surfaceBands(chartData, layout.range, palette);
+    const edgesY = bandEdges(layout.range).map((v) => perspValueY(layout, v));
+    const point = (s, c) => {
+        let v = chartData.series[s]?.values[c];
+        if (override && override.seriesIndex === s && override.pointIndex === c) {
+            v = override.value;
+        }
+        const value = v !== undefined && Number.isFinite(v) ? v : layout.range.min;
+        return [layout.categoryX[c], perspValueY(layout, value), surfaceRowZ(layout, s, nSer)];
+    };
+    const geometry = { bands, triangles: [], segments: [] };
+    if (chartData.wireframe) {
+        for (let s = 0; s < nSer; s++) {
+            for (let c = 0; c < nCat; c++) {
+                if (c + 1 < nCat) {
+                    clampedBandSegments(point(s, c), point(s, c + 1), edgesY, geometry.segments, s === 0);
+                }
+                if (s + 1 < nSer) {
+                    clampedBandSegments(point(s, c), point(s + 1, c), edgesY, geometry.segments, false);
+                }
+            }
+        }
+        return geometry;
+    }
+    for (let s = 0; s + 1 < nSer; s++) {
+        for (let c = 0; c + 1 < nCat; c++) {
+            for (const tri of cellTriangles(point, s, c)) {
+                for (let b = 0; b < bands.length; b++) {
+                    const piece = clipY(tri, edgesY[b], edgesY[b + 1]);
+                    for (let i = 1; i + 1 < piece.length; i++) {
+                        geometry.triangles.push({ points: [piece[0], piece[i], piece[i + 1]], band: b });
+                    }
+                }
+            }
+        }
+    }
+    return geometry;
+}
+
+function srgb(three, hex, f) {
+    const base = new three.Color(hex).getRGB(new three.Color(), three.SRGBColorSpace);
+    return new three.Color().setRGB(Math.min(1, base.r * f), Math.min(1, base.g * f), Math.min(1, base.b * f), three.SRGBColorSpace);
+}
+function buildVisual(three, chartData, layout, palette, override) {
+    const geo = buildSurfaceGeometry(chartData, layout, palette, override);
+    const positions = [];
+    const colors = [];
+    if (chartData.wireframe) {
+        for (const seg of geo.segments) {
+            const c = srgb(three, geo.bands[seg.band].color, 1);
+            positions.push(...seg.from, ...seg.to);
+            colors.push(c.r, c.g, c.b, c.r, c.g, c.b);
+        }
+        const g = new three.BufferGeometry();
+        g.setAttribute('position', new three.Float32BufferAttribute(positions, 3));
+        g.setAttribute('color', new three.Float32BufferAttribute(colors, 3));
+        return new three.LineSegments(g, new three.LineBasicMaterial({ vertexColors: true }));
+    }
+    const a = new three.Vector3();
+    const b = new three.Vector3();
+    const n = new three.Vector3();
+    for (const tri of geo.triangles) {
+        const [p0, p1, p2] = tri.points;
+        a.set(p1[0] - p0[0], p1[1] - p0[1], p1[2] - p0[2]);
+        b.set(p2[0] - p0[0], p2[1] - p0[1], p2[2] - p0[2]);
+        n.crossVectors(a, b).normalize();
+        if (n.y < 0) {
+            n.negate();
+        }
+        // Box-space -z faces the viewer.
+        const c = srgb(three, geo.bands[tri.band].color, chart3DNormalShade('box', n.x, n.y, -n.z));
+        positions.push(...p0, ...p1, ...p2);
+        colors.push(c.r, c.g, c.b, c.r, c.g, c.b, c.r, c.g, c.b);
+    }
+    const g = new three.BufferGeometry();
+    g.setAttribute('position', new three.Float32BufferAttribute(positions, 3));
+    g.setAttribute('color', new three.Float32BufferAttribute(colors, 3));
+    return new three.Mesh(g, new three.MeshBasicMaterial({ vertexColors: true, side: three.DoubleSide }));
+}
+function buildPickGeometry(three, chartData, layout) {
+    const nSer = chartData.series.length;
+    const nCat = layout.categoryX.length;
+    const at = (s, c) => {
+        const v = chartData.series[s]?.values[c];
+        return [
+            layout.categoryX[c],
+            perspValueY(layout, v !== undefined && Number.isFinite(v) ? v : layout.range.min),
+            surfaceRowZ(layout, s, nSer),
+        ];
+    };
+    const positions = [];
+    for (let s = 0; s + 1 < nSer; s++) {
+        for (let c = 0; c + 1 < nCat; c++) {
+            positions.push(...at(s, c), ...at(s, c + 1), ...at(s + 1, c + 1));
+            positions.push(...at(s, c), ...at(s + 1, c + 1), ...at(s + 1, c));
+        }
+    }
+    const g = new three.BufferGeometry();
+    g.setAttribute('position', new three.Float32BufferAttribute(positions, 3));
+    return g;
+}
+function disposeObject(object) {
+    const withGeometry = object;
+    withGeometry.geometry?.dispose();
+    withGeometry.material?.dispose();
+}
+/** Build the surface's objects into a box-space group. */
+function buildSurfaceMarks(three, chartData, layout, palette) {
+    const group = new three.Group();
+    group.matrixAutoUpdate = false;
+    group.matrix.copy(perspBoxMatrix(three, layout.view));
+    const gridlines = buildPerspGridlines(three, layout);
+    group.add(gridlines);
+    let visual = buildVisual(three, chartData, layout, palette);
+    group.add(visual);
+    const pickMaterial = new three.MeshBasicMaterial({ side: three.DoubleSide, visible: false });
+    const pickTarget = new three.Mesh(buildPickGeometry(three, chartData, layout), pickMaterial);
+    group.add(pickTarget);
+    return {
+        group,
+        pickTarget,
+        rebuild(override) {
+            group.remove(visual);
+            disposeObject(visual);
+            visual = buildVisual(three, chartData, layout, palette, override);
+            group.add(visual);
+        },
+        dispose() {
+            disposeObject(visual);
+            disposeObject(gridlines);
+            pickTarget.geometry.dispose();
+            pickMaterial.dispose();
+        },
+    };
+}
+
+function nearestIndex(xs, x) {
+    let best = 0;
+    xs.forEach((v, i) => {
+        if (Math.abs(v - x) < Math.abs(xs[best] - x)) {
+            best = i;
+        }
+    });
+    return best;
+}
+/** Build the mark set for a laid-out perspective chart. */
+function buildPerspMarkSet(three, chartData, layout, palette) {
+    if (layout.kind === 'surface') {
+        const nSer = chartData.series.length;
+        const zs = Array.from({ length: nSer }, (_, s) => surfaceRowZ(layout, s, nSer));
+        const surface = buildSurfaceMarks(three, chartData, layout, palette);
+        return {
+            group: surface.group,
+            targets: [surface.pickTarget],
+            pointAt: (_object, local) => ({
+                seriesIndex: nearestIndex(zs, local.z),
+                pointIndex: nearestIndex(layout.categoryX, local.x),
+            }),
+            anchor: (point, value) => [
+                layout.categoryX[point.pointIndex],
+                perspValueY(layout, value),
+                zs[point.seriesIndex],
+            ],
+            draggable: true,
+            preview: (point, value) => surface.rebuild({ ...point, value }),
+            dispose: () => surface.dispose(),
+        };
+    }
+    if (layout.kind === 'bar') {
+        return buildBarMarkSet(three, chartData, layout);
+    }
+    const stacked = layout.grouping !== 'standard' && layout.grouping !== 'clustered';
+    const meshes = buildPerspMeshes(three, layout, buildPerspPrisms(chartData, layout));
+    return {
+        group: meshes.group,
+        targets: meshes.meshes,
+        pointAt(object, local) {
+            const seriesIndex = object.userData.seriesIndex;
+            return seriesIndex === undefined
+                ? null
+                : { seriesIndex, pointIndex: nearestIndex(layout.categoryX, local.x) };
+        },
+        anchor(point, value) {
+            const [z0, z1] = perspRowSpan(layout, stacked ? 0 : point.seriesIndex);
+            return [layout.categoryX[point.pointIndex], perspValueY(layout, value), (z0 + z1) / 2];
+        },
+        draggable: !stacked,
+        preview(point, value) {
+            meshes.setPrism(point.seriesIndex, buildPerspPrisms(chartData, layout, { ...point, value })[point.seriesIndex]);
+        },
+        dispose: () => meshes.dispose(),
+    };
+}
+/** Bars: one prism per point, dragged one at a time (not stacked ones, as in the 2D chart). */
+function buildBarMarkSet(three, chartData, layout) {
+    const prisms = buildPerspPrisms(chartData, layout);
+    const meshes = buildPerspMeshes(three, layout, prisms);
+    const indexOf = (point) => prisms.findIndex((p) => p.seriesIndex === point.seriesIndex && p.pointIndex === point.pointIndex);
+    return {
+        group: meshes.group,
+        targets: meshes.meshes,
+        pointAt(object) {
+            const data = object.userData;
+            return data.seriesIndex === undefined || data.pointIndex === undefined
+                ? null
+                : { seriesIndex: data.seriesIndex, pointIndex: data.pointIndex };
+        },
+        anchor(point, value) {
+            const prism = prisms[indexOf(point)];
+            if (!prism) {
+                return [0, perspValueY(layout, value), 0];
+            }
+            const xs = prism.outline.map(([x]) => x);
+            return [
+                (Math.min(...xs) + Math.max(...xs)) / 2,
+                perspValueY(layout, value),
+                (prism.z0 + prism.z1) / 2,
+            ];
+        },
+        draggable: layout.grouping === 'clustered' || layout.grouping === 'standard',
+        preview(point, value) {
+            const i = indexOf(point);
+            const next = buildPerspPrisms(chartData, layout, { ...point, value })[i];
+            if (next) {
+                meshes.setPrism(i, next);
+            }
+        },
+        dispose: () => meshes.dispose(),
+    };
+}
+
+/** Selection marker colour (the 2D selected-mark accent). */
+const SELECTED_COLOR$1 = 0x2563eb;
+/** A surface's legend: one entry per value band (hollow keys for a wireframe). */
+function surfaceLegend(chartData, layout, palette, background, textStyle) {
+    return surfaceBands(chartData, layout.range, palette).map((band) => ({
+        label: band.label,
+        color: band.color,
+        ...(textStyle ? { textStyle } : {}),
+        ...(chartData.wireframe
+            ? {
+                lineSwatch: {
+                    primitives: [
+                        { kind: 'rect', x: 0, y: -7, w: 10, h: 10, fill: band.color },
+                        { kind: 'rect', x: 1, y: -6, w: 8, h: 8, fill: background },
+                    ],
+                },
+            }
+            : {}),
+    }));
+}
+function mountPerspChartView(input, ctx) {
+    const three = ctx.three;
+    const { vm, layout, chartData } = input;
+    const palette = chartData.colorPalette?.length ? chartData.colorPalette : DEFAULT_PALETTE;
+    const camera = buildPerspCamera(three, layout.view, vm.svgWidth, vm.svgHeight);
+    const scene = new three.Scene();
+    const marks = buildPerspMarkSet(three, chartData, layout, palette);
+    scene.add(marks.group);
+    const markerGeometry = new three.OctahedronGeometry(layout.view.box.w * 0.012);
+    const markerMaterial = new three.MeshBasicMaterial({ color: SELECTED_COLOR$1 });
+    const marker = new three.Mesh(markerGeometry, markerMaterial);
+    marker.visible = false;
+    marks.group.add(marker);
+    const overlay = renderChart3DChromeOverlaySvg(ctx.document, vm, {
+        labels: layout.labels,
+        reverseLegend: false,
+        legend: layout.kind === 'surface'
+            ? surfaceLegend(chartData, layout, palette, vm.areaFill ?? '#ffffff', vm.legend[0]?.textStyle)
+            : undefined,
+    });
+    ctx.overlay.appendChild(overlay);
+    const valueAt = (point) => {
+        const v = chartData.series[point.seriesIndex]?.values[point.pointIndex];
+        return v !== undefined && Number.isFinite(v) ? v : undefined;
+    };
+    const placeMarker = (point, value) => {
+        marker.position.set(...marks.anchor(point, value));
+    };
+    const interaction = attachChart3DMarkInteraction({
+        ctx,
+        camera,
+        scene,
+        svgHeight: vm.svgHeight,
+        chartData,
+        categoryLabels: input.categoryLabels,
+        seriesNames: chartData.series.map((s) => s.name),
+        adapter: {
+            targets: marks.targets,
+            pointAt: (hit) => marks.pointAt(hit.object, marks.group.worldToLocal(hit.point.clone())),
+            valueOf: valueAt,
+            beginDrag(point) {
+                const start = valueAt(point);
+                if (!marks.draggable || start === undefined) {
+                    return null;
+                }
+                const unit = layout.range.majorUnit || 1;
+                const [x, y, z] = marks.anchor(point, start);
+                const y0 = perspToScreen(layout.view, [x, y, z]).y;
+                const y1 = perspToScreen(layout.view, [x, y + unit * layout.valueScale, z]).y;
+                const pxPerValue = (y0 - y1) / unit || 1;
+                const span = layout.range.max - layout.range.min;
+                return {
+                    preview(_dx, dy) {
+                        const value = roundDragValue(start - dy / pxPerValue, {
+                            min: layout.range.min,
+                            max: layout.range.max,
+                            span,
+                        });
+                        marks.preview(point, value);
+                        if (marker.visible) {
+                            placeMarker(point, value);
+                        }
+                        return value;
+                    },
+                };
+            },
+            highlight(point) {
+                const value = point ? valueAt(point) : undefined;
+                marker.visible = point !== null && value !== undefined;
+                if (point && value !== undefined) {
+                    placeMarker(point, value);
+                }
+            },
+            dispose() {
+                markerGeometry.dispose();
+                markerMaterial.dispose();
+            },
+        },
+    });
+    let disposed = false;
+    return {
+        render(renderer) {
+            renderer.render(scene, camera);
+        },
+        resize() {
+            // The projection is fixed in authored chart px, like the overlay.
+        },
+        isAnimating: () => false,
+        setInteractive: (on) => interaction.setInteractive(on),
+        setSelectedPart: (part) => interaction.setSelectedPart(part),
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            interaction.dispose();
+            marks.dispose();
+            overlay.remove();
+        },
+    };
+}
+
+const SEAM_COLOR = 0xffffff;
+/** Arc segments per full turn. */
+const SEGMENTS_PER_TURN = 144;
+/** Shade multiplier for a box-space normal (box -z faces the viewer); `cut` for a slice's flat cut face. */
+function pieFaceShade(nx, ny, nz, cut = false) {
+    if (ny > 0.5) {
+        return 1;
+    }
+    if (ny < -0.5) {
+        return 0.3;
+    }
+    const phi = Math.atan2(nx, -nz);
+    if (cut) {
+        return 0.5 + 0.2 * Math.sin(phi);
+    }
+    return Math.max(0.385, 0.57 - 0.275 * phi);
+}
+function sliceBuffers(three, layout, slice) {
+    const base = new three.Color(slice.color).getRGB(new three.Color(), three.SRGBColorSpace);
+    const out = new three.Color();
+    const positions = [];
+    const colors = [];
+    const cx = layout.center.x + slice.offset.x;
+    const cz = layout.center.z + slice.offset.z;
+    const top = layout.center.y;
+    const r = layout.radius;
+    const push = (p, n, cut = false) => {
+        const f = pieFaceShade(n[0], n[1], n[2], cut);
+        out.setRGB(Math.min(1, base.r * f), Math.min(1, base.g * f), Math.min(1, base.b * f), three.SRGBColorSpace);
+        positions.push(...p);
+        colors.push(out.r, out.g, out.b);
+    };
+    const span = slice.endAngle - slice.startAngle;
+    const steps = Math.max(2, Math.ceil((span / (Math.PI * 2)) * SEGMENTS_PER_TURN));
+    const angles = Array.from({ length: steps + 1 }, (_, i) => slice.startAngle + (span * i) / steps);
+    const rim = (a, y) => {
+        const p = pieRimPoint(cx, cz, r, a);
+        return [p.x, y, p.z];
+    };
+    const radial = (a) => [Math.sin(a), 0, Math.cos(a)];
+    for (let i = 0; i < steps; i++) {
+        const a0 = angles[i];
+        const a1 = angles[i + 1];
+        // Top and bottom fans.
+        push([cx, top, cz], [0, 1, 0]);
+        push(rim(a0, top), [0, 1, 0]);
+        push(rim(a1, top), [0, 1, 0]);
+        push([cx, 0, cz], [0, -1, 0]);
+        push(rim(a1, 0), [0, -1, 0]);
+        push(rim(a0, 0), [0, -1, 0]);
+        // Rim, smooth-shaded by the radial normal.
+        push(rim(a0, top), radial(a0));
+        push(rim(a0, 0), radial(a0));
+        push(rim(a1, 0), radial(a1));
+        push(rim(a0, top), radial(a0));
+        push(rim(a1, 0), radial(a1));
+        push(rim(a1, top), radial(a1));
+    }
+    // The two cut faces, normals perpendicular to their radius.
+    for (const [a, sign] of [
+        [slice.startAngle, -1],
+        [slice.endAngle, 1],
+    ]) {
+        const n = [sign * Math.cos(a), 0, -sign * Math.sin(a)];
+        push([cx, top, cz], n, true);
+        push([cx, 0, cz], n, true);
+        push(rim(a, 0), n, true);
+        push([cx, top, cz], n, true);
+        push(rim(a, 0), n, true);
+        push(rim(a, top), n, true);
+    }
+    const seams = [];
+    for (let i = 0; i < steps; i++) {
+        seams.push(...rim(angles[i], top), ...rim(angles[i + 1], top));
+    }
+    for (const a of [slice.startAngle, slice.endAngle]) {
+        seams.push(cx, top, cz, ...rim(a, top), ...rim(a, top), ...rim(a, 0));
+    }
+    return { positions, colors, seams };
+}
+/** Build the slice meshes and seams of a pie layout. */
+function buildPieMarks(three, layout) {
+    const group = new three.Group();
+    group.matrixAutoUpdate = false;
+    group.matrix.copy(perspBoxMatrix(three, layout.view));
+    const material = new three.MeshBasicMaterial({
+        vertexColors: true,
+        side: three.DoubleSide,
+        polygonOffset: true,
+        polygonOffsetFactor: 1,
+        polygonOffsetUnits: 1,
+    });
+    const seamMaterial = new three.LineBasicMaterial({ color: SEAM_COLOR });
+    // Stable array: the scene's pick targets keep pointing at it across rebuilds.
+    const meshes = [];
+    let seams = null;
+    const clear = () => {
+        for (const mesh of meshes) {
+            group.remove(mesh);
+            mesh.geometry.dispose();
+        }
+        if (seams) {
+            group.remove(seams);
+            seams.geometry.dispose();
+        }
+    };
+    const build = (slices) => {
+        clear();
+        const seamPoints = [];
+        const built = slices.map((slice) => {
+            const b = sliceBuffers(three, layout, slice);
+            const geometry = new three.BufferGeometry();
+            geometry.setAttribute('position', new three.Float32BufferAttribute(b.positions, 3));
+            geometry.setAttribute('color', new three.Float32BufferAttribute(b.colors, 3));
+            const mesh = new three.Mesh(geometry, material);
+            mesh.userData = { seriesIndex: 0, pointIndex: slice.pointIndex };
+            group.add(mesh);
+            seamPoints.push(...b.seams);
+            return mesh;
+        });
+        meshes.splice(0, meshes.length, ...built);
+        const seamGeometry = new three.BufferGeometry();
+        seamGeometry.setAttribute('position', new three.Float32BufferAttribute(seamPoints, 3));
+        seams = new three.LineSegments(seamGeometry, seamMaterial);
+        group.add(seams);
+    };
+    build(layout.slices);
+    return {
+        group,
+        meshes,
+        setSlices: build,
+        dispose() {
+            clear();
+            material.dispose();
+            seamMaterial.dispose();
+        },
+    };
+}
+
+/** Selection marker colour (the 2D selected-mark accent). */
+const SELECTED_COLOR = 0x2563eb;
+/** The layout's slices with one value replaced (a drag preview). */
+function slicesWith(input, pointIndex, value) {
+    const series = input.chartData.series.map((s, i) => i === 0 ? { ...s, values: s.values.map((v, j) => (j === pointIndex ? value : v)) } : s);
+    const element = {
+        ...input.element,
+        chartData: { ...input.chartData, series },
+    };
+    return computePieChartLayout(element, input.vm)?.slices ?? input.layout.slices;
+}
+function mountPieChartView(input, ctx) {
+    const three = ctx.three;
+    const { vm, layout, chartData } = input;
+    const camera = buildPerspCamera(three, layout.view, vm.svgWidth, vm.svgHeight);
+    const scene = new three.Scene();
+    const marks = buildPieMarks(three, layout);
+    scene.add(marks.group);
+    const markerGeometry = new three.OctahedronGeometry(0.03);
+    const markerMaterial = new three.MeshBasicMaterial({ color: SELECTED_COLOR });
+    const marker = new three.Mesh(markerGeometry, markerMaterial);
+    marker.visible = false;
+    marks.group.add(marker);
+    const overlay = renderChart3DChromeOverlaySvg(ctx.document, vm, {
+        labels: [],
+        reverseLegend: false,
+    });
+    ctx.overlay.appendChild(overlay);
+    const values = () => chartData.series[0]?.values.slice() ?? [];
+    const interaction = attachChart3DMarkInteraction({
+        ctx,
+        camera,
+        scene,
+        svgHeight: vm.svgHeight,
+        chartData,
+        categoryLabels: input.categoryLabels,
+        seriesNames: chartData.series.map((s) => s.name),
+        adapter: {
+            targets: marks.meshes,
+            pointAt(hit) {
+                const pointIndex = hit.object.userData.pointIndex;
+                return pointIndex === undefined ? null : { seriesIndex: 0, pointIndex };
+            },
+            valueOf(point) {
+                const v = chartData.series[0]?.values[point.pointIndex];
+                return v !== undefined && Number.isFinite(v) ? v : undefined;
+            },
+            beginDrag(point) {
+                const slice = layout.slices[point.pointIndex];
+                if (!slice) {
+                    return null;
+                }
+                const start = values();
+                return {
+                    preview(_dx, _dy, at) {
+                        const hit = perspScreenToPlaneY(layout.view, at.x, at.y, layout.center.y);
+                        if (!hit) {
+                            return start[point.pointIndex];
+                        }
+                        const angle = Math.atan2(hit.x - layout.center.x - slice.offset.x, hit.z - layout.center.z - slice.offset.z);
+                        const value = resolvePieSliceShareValue(angle, slice.startAngle, start, point.pointIndex);
+                        marks.setSlices(slicesWith(input, point.pointIndex, value));
+                        return value;
+                    },
+                };
+            },
+            highlight(point) {
+                const slice = point ? layout.slices[point.pointIndex] : undefined;
+                marker.visible = slice !== undefined;
+                if (slice) {
+                    const mid = (slice.startAngle + slice.endAngle) / 2;
+                    const p = pieRimPoint(layout.center.x + slice.offset.x, layout.center.z + slice.offset.z, layout.radius * 0.6, mid);
+                    marker.position.set(p.x, layout.center.y, p.z);
+                }
+            },
+            dispose() {
+                markerGeometry.dispose();
+                markerMaterial.dispose();
+            },
+        },
+    });
+    let disposed = false;
+    return {
+        render(renderer) {
+            renderer.render(scene, camera);
+        },
+        resize() {
+            // The projection is fixed in authored chart px, like the overlay.
+        },
+        isAnimating: () => false,
+        setInteractive: (on) => interaction.setInteractive(on),
+        setSelectedPart: (part) => interaction.setSelectedPart(part),
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            interaction.dispose();
+            marks.dispose();
+            overlay.remove();
+        },
+    };
+}
+
+/**
+ * The oblique chart camera. Camera distance is chosen so `NEAR`/`FAR` stay
+ * tight around the scene's own (tiny) depth extent. Exported for tests.
+ */
+function buildObliqueCamera(three, svgWidth, svgHeight, shearX, shearY) {
+    const halfW = svgWidth / 2;
+    const halfH = svgHeight / 2;
+    const distance = halfW + halfH + 500;
+    const camera = new three.OrthographicCamera(-halfW, halfW, halfH, -halfH, 1, distance + 2000);
+    camera.position.set(0, 0, distance);
+    camera.lookAt(0, 0, 0);
+    camera.updateProjectionMatrix();
+    // Hand-insert the oblique shear: clip_x += kX * ndcScaleX * world_z,
+    // clip_y += kY * ndcScaleY * world_z (see the module doc + the chart
+    // track's progress log for the sign derivation between the flat 2D
+    // fallback's SVG-Y-down depth vector and this scene's world-Y-up frame:
+    // X needs no flip (kX = -shearX), Y does (kY = +shearY)).
+    const m = camera.projectionMatrix.elements;
+    const ndcScaleX = m[0];
+    const ndcScaleY = m[5];
+    m[8] = -shearX * ndcScaleX;
+    m[9] = shearY * ndcScaleY;
+    // The shear multiplies VIEW-space z, which is `-distance` at the chart's
+    // front plane (world z = 0). Offset it so the front plane is unsheared
+    // and lands exactly on the 2D layout; only depth behind it shifts.
+    m[12] += m[8] * distance;
+    m[13] += m[9] * distance;
+    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+    return camera;
+}
+/** The hosted perspective scene for a spec whose oblique geometry is `null`. */
+function mountPerspectiveScene(perspective, ctx) {
+    switch (perspective.kind) {
+        case 'bar':
+            return createBarChart3DScene(ctx, perspective.options);
+        case 'line':
+            return createLineChart3DScene(ctx, perspective.options);
+        case 'area':
+            return createAreaChart3DScene(ctx, perspective.options);
+        case 'pie':
+            return createPieChart3DScene(ctx, perspective.options);
+        case 'surface':
+            return createSurfaceChart3DScene(ctx, perspective.options);
+        default: {
+            const exhaustive = perspective;
+            return exhaustive;
+        }
+    }
+}
+async function mountChart3DView(spec, ctx) {
+    if (spec.geometry?.kind === 'pie') {
+        const chartData = spec.element.chartData;
+        if (!chartData) {
+            throw new Error('3D chart spec without chart data');
+        }
+        return mountPieChartView({
+            element: spec.element,
+            vm: widenPieViewModel(spec.vm, spec.element),
+            layout: spec.geometry.layout,
+            chartData,
+            categoryLabels: spec.categoryLabels,
+        }, ctx);
+    }
+    if (spec.geometry?.kind === 'perspective') {
+        const chartData = spec.element.chartData;
+        if (!chartData) {
+            throw new Error('3D chart spec without chart data');
+        }
+        return mountPerspChartView({ vm: spec.vm, layout: spec.geometry.layout, chartData, categoryLabels: spec.categoryLabels }, ctx);
+    }
+    if (spec.projection.mode !== 'oblique' || spec.geometry?.kind !== 'oblique') {
+        if (spec.perspective) {
+            return mountPerspectiveScene(spec.perspective, ctx);
+        }
+        throw new Error(`no 3D chart scene for chartType=${spec.chartType}`);
+    }
+    const three = ctx.three;
+    const { vm, geometry } = spec;
+    const chartData = spec.element.chartData;
+    if (!chartData) {
+        throw new Error('3D chart spec without chart data');
+    }
+    const camera = buildObliqueCamera(three, vm.svgWidth, vm.svgHeight, spec.projection.shearX, spec.projection.shearY);
+    const scene = new three.Scene();
+    const { layout } = geometry;
+    const bars = buildChart3DBarMeshes(three, layout, vm.svgWidth, vm.svgHeight);
+    scene.add(bars.group);
+    const overlay = renderChart3DChromeOverlaySvg(ctx.document, vm, {
+        labels: layout.labels,
+        // PowerPoint lists a clustered horizontal bar chart's legend bottom-up,
+        // matching the order the series stack up the category axis.
+        reverseLegend: layout.horizontal && layout.grouping === 'clustered',
+    });
+    ctx.overlay.appendChild(overlay);
+    const interaction = attachObliqueBarInteraction({
+        ctx,
+        camera,
+        meshes: bars.meshes,
+        layout,
+        svgWidth: vm.svgWidth,
+        svgHeight: vm.svgHeight,
+        chartData,
+        categoryLabels: spec.categoryLabels,
+        seriesNames: chartData.series.map((series) => series.name),
+        scene,
+    });
+    let disposed = false;
+    return {
+        render(renderer) {
+            renderer.render(scene, camera);
+        },
+        resize() {
+            // The orthographic frustum is fixed in authored chart-px units
+            // (svgWidth/svgHeight), independent of the element's on-screen CSS
+            // size, so nothing needs recomputing here.
+        },
+        isAnimating: () => false,
+        setInteractive: (on) => interaction.setInteractive(on),
+        setSelectedPart: (part) => interaction.setSelectedPart(part),
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            interaction.dispose();
+            bars.dispose();
+            overlay.remove();
+        },
+    };
+}
+
+export { buildObliqueCamera, mountChart3DView };
+//# sourceMappingURL=pptx-angular-viewer-chart-3d-view-scene-CM71j9A9.mjs.map