@pascal-app/nodes 0.1.1

package/dist/pipe-fitting/selection.js

@@ -0,0 +1,579 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { analyzePortConnectivity, pauseSceneHistory, resolveConnectivityUpdates, resumeSceneHistory, sceneRegistry, useScene, } from '@pascal-app/core';
+import { ARROW_COLOR, EDITOR_LAYER, swallowNextClick, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useMemo, useState } from 'react';
+import { BufferGeometry, Euler, Float32BufferAttribute, LineSegments, OrthographicCamera, Plane, Quaternion, Raycaster, SphereGeometry, Vector2, Vector3, } from 'three';
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu';
+import { AXIS_VECTORS, cycleRotationAxis, ROTATE_STEP_RAD, } from '../shared/fitting-rotation';
+import { HandleCube, MoveChevron, RotateArc } from '../shared/selection-handles';
+import { pipeFittingLegLength } from './ports';
+const ARROW_GAP = 0.34;
+const RESIZE_HANDLE_GAP = 0.3;
+const RESIZE_STEP_IN = 0.25;
+const RESIZE_GUIDE_DASH = 0.07;
+const RESIZE_GUIDE_GAP = 0.045;
+const RESIZE_SPHERE_RADIUS = 0.065;
+const RESIZE_HIT_RADIUS = 0.13;
+const INCHES_TO_METERS = 0.0254;
+const UP = new Vector3(0, 1, 0);
+function snap(value, step) {
+    if (step <= 0)
+        return value;
+    return Math.round(value / step) * step;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function fittingExtentM(node) {
+    return Math.max(pipeFittingLegLength(node.diameter), pipeFittingLegLength(node.diameter2));
+}
+function fittingParameterPatch(node) {
+    return {
+        fittingType: node.fittingType,
+        angle: node.angle,
+        diameter: node.diameter,
+        diameter2: node.diameter2,
+        pipeMaterial: node.pipeMaterial,
+        system: node.system,
+    };
+}
+function preserveFittingParameters(node, data) {
+    return { ...fittingParameterPatch(node), ...data };
+}
+function dimensionPatch(fitting, dimension, value) {
+    if (dimension === 'diameter' && fitting.fittingType === 'elbow') {
+        return { diameter: value, diameter2: value };
+    }
+    return { [dimension]: value };
+}
+function closestAxisParameterToRay(axisOrigin, axisDirection, ray) {
+    const originToRay = axisOrigin.clone().sub(ray.origin);
+    const b = axisDirection.dot(ray.direction);
+    const d = axisDirection.dot(originToRay);
+    const e = ray.direction.dot(originToRay);
+    const denominator = 1 - b * b;
+    if (Math.abs(denominator) < 1e-6)
+        return -d;
+    const axisParameter = (b * e - d) / denominator;
+    const rayParameter = e + b * axisParameter;
+    return rayParameter < 0 ? -d : axisParameter;
+}
+function DashedResizeGuide({ from, to }) {
+    const line = useMemo(() => {
+        const a = new Vector3(from[0], from[1], from[2]);
+        const b = new Vector3(to[0], to[1], to[2]);
+        const span = b.clone().sub(a);
+        const length = span.length();
+        const points = [];
+        if (length > 1e-4) {
+            const dir = span.clone().normalize();
+            let t = 0;
+            while (t < length) {
+                const start = a.clone().addScaledVector(dir, t);
+                const end = a.clone().addScaledVector(dir, Math.min(t + RESIZE_GUIDE_DASH, length));
+                points.push(start.x, start.y, start.z, end.x, end.y, end.z);
+                t += RESIZE_GUIDE_DASH + RESIZE_GUIDE_GAP;
+            }
+        }
+        const geometry = new BufferGeometry();
+        geometry.setAttribute('position', new Float32BufferAttribute(new Float32Array(points), 3));
+        const material = new LineBasicNodeMaterial({
+            color: ARROW_COLOR,
+            transparent: true,
+            opacity: 0.8,
+            depthWrite: false,
+        });
+        const next = new LineSegments(geometry, material);
+        next.frustumCulled = false;
+        next.layers.set(EDITOR_LAYER);
+        next.renderOrder = 1002;
+        next.raycast = () => { };
+        return next;
+    }, [from, to]);
+    useEffect(() => () => {
+        line.geometry.dispose();
+        line.material.dispose();
+    }, [line]);
+    return _jsx("primitive", { object: line });
+}
+function ResizeSphereHandle({ cursor, onPointerDown, position, }) {
+    const { camera } = useThree();
+    const [hovered, setHovered] = useState(false);
+    const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1;
+    const sphereGeometry = useMemo(() => new SphereGeometry(RESIZE_SPHERE_RADIUS, 18, 12), []);
+    const hitGeometry = useMemo(() => new SphereGeometry(RESIZE_HIT_RADIUS, 12, 8), []);
+    const sphereMaterial = useMemo(() => new MeshBasicNodeMaterial({
+        color: ARROW_COLOR,
+        transparent: true,
+        opacity: 0.92,
+        depthTest: false,
+        depthWrite: false,
+    }), []);
+    const hitMaterial = useMemo(() => new MeshBasicNodeMaterial({
+        color: ARROW_COLOR,
+        transparent: true,
+        opacity: 0,
+        depthTest: false,
+        depthWrite: false,
+    }), []);
+    useEffect(() => {
+        sphereMaterial.opacity = hovered ? 1 : 0.92;
+    }, [sphereMaterial, hovered]);
+    useEffect(() => () => {
+        hitGeometry.dispose();
+        sphereGeometry.dispose();
+        sphereMaterial.dispose();
+        hitMaterial.dispose();
+    }, [hitGeometry, hitMaterial, sphereGeometry, sphereMaterial]);
+    const consumePress = (event) => {
+        event.stopPropagation();
+        event.nativeEvent.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        swallowNextClick();
+        onPointerDown(event);
+    };
+    return (_jsxs("group", { position: position, scale: zoom, children: [_jsx("mesh", { geometry: hitGeometry, material: hitMaterial, onPointerDown: consumePress, onPointerEnter: (event) => {
+                    event.stopPropagation();
+                    setHovered(true);
+                    document.body.style.cursor = cursor;
+                }, onPointerLeave: (event) => {
+                    event.stopPropagation();
+                    setHovered(false);
+                    if (document.body.style.cursor === cursor)
+                        document.body.style.cursor = '';
+                } }), _jsx("mesh", { geometry: sphereGeometry, material: sphereMaterial, renderOrder: 1004 })] }));
+}
+const PipeFittingSelectionAffordance = () => {
+    const selectedIds = useViewer((s) => s.selection.selectedIds);
+    const fitting = useScene((s) => {
+        if (selectedIds.length !== 1)
+            return null;
+        const node = s.nodes[selectedIds[0]];
+        return node?.type === 'pipe-fitting' ? node : null;
+    });
+    const hasSelectedFitting = !!fitting;
+    useEffect(() => {
+        if (!hasSelectedFitting)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key !== 'Alt' || e.repeat)
+                return;
+            const tag = e.target?.tagName;
+            if (tag === 'INPUT' || tag === 'TEXTAREA')
+                return;
+            e.preventDefault();
+            cycleRotationAxis();
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [hasSelectedFitting]);
+    const fittingId = fitting?.id ?? null;
+    const [target, setTarget] = useState(null);
+    useEffect(() => {
+        if (!fittingId) {
+            setTarget(null);
+            return;
+        }
+        let frameId = 0;
+        const resolve = () => {
+            const next = sceneRegistry.nodes.get(fittingId) ?? null;
+            setTarget((cur) => (cur === next ? cur : next));
+            if (!next)
+                frameId = window.requestAnimationFrame(resolve);
+        };
+        resolve();
+        return () => window.cancelAnimationFrame(frameId);
+    }, [fittingId]);
+    if (!fitting || !target)
+        return null;
+    const mount = target.parent ?? target;
+    return createPortal(_jsx(FittingHandles, { fitting: fitting }), mount, undefined);
+};
+const FittingHandles = ({ fitting }) => {
+    const { camera, gl } = useThree();
+    const [frame, setFrame] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const [sideSign, setSideSign] = useState(1);
+    const makeRay = (clientX, clientY) => {
+        const rect = gl.domElement.getBoundingClientRect();
+        const ndc = new Vector2(((clientX - rect.left) / rect.width) * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
+        const raycaster = new Raycaster();
+        raycaster.setFromCamera(ndc, camera);
+        return raycaster.ray;
+    };
+    const intersect = (clientX, clientY, plane) => {
+        const hit = new Vector3();
+        return makeRay(clientX, clientY).intersectPlane(plane, hit) ? hit : null;
+    };
+    const sampleAxisParameter = (clientX, clientY, axisOrigin, axisDirection) => closestAxisParameterToRay(axisOrigin, axisDirection, makeRay(clientX, clientY));
+    const intersectVerticalY = (clientX, clientY, anchorWorld) => {
+        if (!frame)
+            return null;
+        const forward = camera.getWorldDirection(new Vector3());
+        forward.y = 0;
+        if (forward.lengthSq() < 1e-6)
+            forward.set(0, 0, 1);
+        forward.normalize();
+        const plane = new Plane().setFromNormalAndCoplanarPoint(forward, anchorWorld);
+        const hit = intersect(clientX, clientY, plane);
+        return hit ? frame.worldToLocal(hit.clone()).y : null;
+    };
+    const toWorld = (p) => frame ? frame.localToWorld(new Vector3(p[0], p[1], p[2])) : new Vector3(p[0], p[1], p[2]);
+    const axisToWorld = (origin, axis) => {
+        const originWorld = toWorld(origin);
+        const tipWorld = frame
+            ? frame.localToWorld(new Vector3(origin[0] + axis.x, origin[1] + axis.y, origin[2] + axis.z))
+            : new Vector3(origin[0] + axis.x, origin[1] + axis.y, origin[2] + axis.z);
+        return tipWorld.sub(originWorld).normalize();
+    };
+    const sampleAxis = (axis, clientX, clientY, anchorWorld) => {
+        if (axis === 'y')
+            return intersectVerticalY(clientX, clientY, anchorWorld);
+        const plane = new Plane().setFromNormalAndCoplanarPoint(UP, anchorWorld);
+        const hit = intersect(clientX, clientY, plane);
+        if (!hit || !frame)
+            return null;
+        const local = frame.worldToLocal(hit.clone());
+        return axis === 'x' ? local.x : local.z;
+    };
+    const connectivityUpdates = (connectivity, transform) => {
+        if (!connectivity)
+            return [];
+        const preview = { ...fitting, ...transform };
+        const nodes = useScene.getState().nodes;
+        return resolveConnectivityUpdates(connectivity, preview)
+            .filter((u) => nodes[u.id])
+            .map((u) => {
+            const node = nodes[u.id];
+            if (node?.type !== 'pipe-fitting')
+                return u;
+            return {
+                id: u.id,
+                data: preserveFittingParameters(node, u.data),
+            };
+        });
+    };
+    const beginDrag = (cursor, makeCompute) => (e) => {
+        e.stopPropagation();
+        const initialPosition = [...fitting.position];
+        const initialRotation = [...fitting.rotation];
+        const connectivity = analyzePortConnectivity(fitting, useScene.getState().nodes);
+        const compute = makeCompute(e);
+        pauseSceneHistory(useScene);
+        useViewer.getState().setInputDragging(true);
+        setDragging(true);
+        document.body.style.cursor = cursor;
+        let current = null;
+        const buildBatch = (t) => [
+            {
+                id: fitting.id,
+                data: preserveFittingParameters(fitting, t),
+            },
+            ...connectivityUpdates(connectivity, t),
+        ];
+        const onMove = (event) => {
+            const next = compute(event);
+            if (!next)
+                return;
+            current = next;
+            useScene.getState().updateNodes(buildBatch(next));
+        };
+        const cleanup = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onUp);
+            useViewer.getState().setInputDragging(false);
+            setDragging(false);
+            if (document.body.style.cursor === cursor)
+                document.body.style.cursor = '';
+        };
+        const onUp = () => {
+            swallowNextClick();
+            cleanup();
+            const reverts = (connectivity?.connections ?? []).map((conn) => {
+                if (conn.kind !== 'rigid-node') {
+                    return { id: conn.nodeId, data: { path: conn.startPath } };
+                }
+                const node = useScene.getState().nodes[conn.nodeId];
+                return {
+                    id: conn.nodeId,
+                    data: node?.type === 'pipe-fitting'
+                        ? preserveFittingParameters(node, {
+                            position: conn.startPosition,
+                        })
+                        : { position: conn.startPosition },
+                };
+            });
+            useScene.getState().updateNodes([
+                {
+                    id: fitting.id,
+                    data: preserveFittingParameters(fitting, {
+                        position: initialPosition,
+                        rotation: initialRotation,
+                    }),
+                },
+                ...reverts.filter((u) => useScene.getState().nodes[u.id]),
+            ]);
+            resumeSceneHistory(useScene);
+            if (current)
+                useScene.getState().updateNodes(buildBatch(current));
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    };
+    const moveCompute = (axis) => (e) => {
+        const anchorWorld = toWorld(fitting.position);
+        const start = sampleAxis(axis, e.nativeEvent.clientX, e.nativeEvent.clientY, anchorWorld);
+        const base = [...fitting.position];
+        const axisIndex = axis === 'x' ? 0 : axis === 'y' ? 1 : 2;
+        let lastDelta = Number.NaN;
+        return (event) => {
+            if (start === null)
+                return null;
+            const s = sampleAxis(axis, event.clientX, event.clientY, anchorWorld);
+            if (s === null)
+                return null;
+            const step = event.shiftKey ? 0 : useEditor.getState().gridSnapStep;
+            const delta = snap(s - start, step);
+            if (delta === lastDelta)
+                return null;
+            lastDelta = delta;
+            if (step > 0)
+                triggerSFX('sfx:grid-snap');
+            const next = [...base];
+            next[axisIndex] = base[axisIndex] + delta;
+            return { position: next };
+        };
+    };
+    const rotateCompute = (axis) => (e) => {
+        const normal = AXIS_VECTORS[axis].clone();
+        const center = toWorld(fitting.position);
+        const ref = axis === 'y' ? new Vector3(1, 0, 0) : new Vector3(0, 1, 0);
+        const u = ref
+            .clone()
+            .sub(normal.clone().multiplyScalar(ref.dot(normal)))
+            .normalize();
+        const v = new Vector3().crossVectors(normal, u);
+        const plane = new Plane().setFromNormalAndCoplanarPoint(normal, center);
+        const bearing = (clientX, clientY) => {
+            const hit = intersect(clientX, clientY, plane);
+            if (!hit)
+                return null;
+            const d = hit.sub(center);
+            return Math.atan2(d.dot(v), d.dot(u));
+        };
+        const startBearing = bearing(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        const startQuat = new Quaternion().setFromEuler(new Euler(fitting.rotation[0], fitting.rotation[1], fitting.rotation[2]));
+        let lastStep = Number.NaN;
+        return (event) => {
+            if (startBearing === null)
+                return null;
+            const b = bearing(event.clientX, event.clientY);
+            if (b === null)
+                return null;
+            const raw = b - startBearing;
+            const delta = event.shiftKey ? raw : Math.round(raw / ROTATE_STEP_RAD) * ROTATE_STEP_RAD;
+            if (!event.shiftKey) {
+                const step = Math.round(raw / ROTATE_STEP_RAD);
+                if (step !== lastStep) {
+                    lastStep = step;
+                    triggerSFX('sfx:item-rotate');
+                }
+            }
+            const turn = new Quaternion().setFromAxisAngle(normal, delta);
+            const euler = new Euler().setFromQuaternion(turn.multiply(startQuat));
+            return { rotation: [euler.x, euler.y, euler.z] };
+        };
+    };
+    const beginDimensionDrag = (dimension, axisLocal, cursor) => (e) => {
+        e.stopPropagation();
+        const baseValue = fitting[dimension];
+        const initialPatch = dimensionPatch(fitting, dimension, baseValue);
+        const centerWorld = toWorld(fitting.position);
+        const axisWorld = axisToWorld(fitting.position, axisLocal);
+        const start = sampleAxisParameter(e.nativeEvent.clientX, e.nativeEvent.clientY, centerWorld, axisWorld);
+        pauseSceneHistory(useScene);
+        useViewer.getState().setInputDragging(true);
+        setDragging(true);
+        document.body.style.cursor = cursor;
+        let current = null;
+        let lastValue = Number.NaN;
+        const apply = (patch) => {
+            useScene.getState().updateNodes([
+                {
+                    id: fitting.id,
+                    data: preserveFittingParameters(fitting, patch),
+                },
+            ]);
+        };
+        const onMove = (event) => {
+            const rawDeltaM = sampleAxisParameter(event.clientX, event.clientY, centerWorld, axisWorld) - start;
+            const deltaIn = (rawDeltaM / INCHES_TO_METERS) * 2;
+            const nextRaw = baseValue + deltaIn;
+            const nextValue = clamp(event.shiftKey ? nextRaw : snap(nextRaw, RESIZE_STEP_IN), 1.25, 8);
+            if (nextValue === lastValue)
+                return;
+            lastValue = nextValue;
+            current = dimensionPatch(fitting, dimension, nextValue);
+            if (!event.shiftKey)
+                triggerSFX('sfx:grid-snap');
+            apply(current);
+        };
+        const cleanup = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onUp);
+            useViewer.getState().setInputDragging(false);
+            setDragging(false);
+            if (document.body.style.cursor === cursor)
+                document.body.style.cursor = '';
+        };
+        const onUp = () => {
+            swallowNextClick();
+            cleanup();
+            apply(initialPatch);
+            resumeSceneHistory(useScene);
+            if (current)
+                apply(current);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    };
+    const extent = useMemo(() => fittingExtentM(fitting), [fitting]);
+    const p = fitting.position;
+    const base = extent + ARROW_GAP;
+    const fittingRotation = useMemo(() => new Euler(fitting.rotation[0], fitting.rotation[1], fitting.rotation[2]), [fitting.rotation]);
+    const runDiameterAxis = useMemo(() => {
+        const axis = new Vector3(0, 1, 0).applyEuler(fittingRotation).normalize();
+        return axis.dot(UP) >= 0 ? axis : axis.multiplyScalar(-1);
+    }, [fittingRotation]);
+    const baseBranchAxis = useMemo(() => new Vector3(0, 0, 1).applyEuler(fittingRotation).normalize(), [fittingRotation]);
+    const branchAxis = useMemo(() => baseBranchAxis.clone().multiplyScalar(sideSign), [baseBranchAxis, sideSign]);
+    useFrame(() => {
+        if (!frame || fitting.fittingType === 'elbow')
+            return;
+        const cameraPosition = camera.getWorldPosition(new Vector3());
+        const cameraLocal = frame.worldToLocal(cameraPosition);
+        const toCamera = cameraLocal.sub(new Vector3(p[0], p[1], p[2]));
+        const nextSign = baseBranchAxis.dot(toCamera) >= 0 ? 1 : -1;
+        setSideSign((current) => (current === nextSign ? current : nextSign));
+    });
+    const resizeHandleBase = extent + RESIZE_HANDLE_GAP;
+    const resizeHandles = [
+        {
+            key: 'diameter',
+            axis: runDiameterAxis,
+            cursor: 'ns-resize',
+            guideFrom: [
+                p[0] + runDiameterAxis.x * resizeHandleBase,
+                p[1] + runDiameterAxis.y * resizeHandleBase,
+                p[2] + runDiameterAxis.z * resizeHandleBase,
+            ],
+            guideTo: [
+                p[0] + runDiameterAxis.x * Math.max(extent * 0.18, 0.04),
+                p[1] + runDiameterAxis.y * Math.max(extent * 0.18, 0.04),
+                p[2] + runDiameterAxis.z * Math.max(extent * 0.18, 0.04),
+            ],
+            position: [
+                p[0] + runDiameterAxis.x * resizeHandleBase,
+                p[1] + runDiameterAxis.y * resizeHandleBase,
+                p[2] + runDiameterAxis.z * resizeHandleBase,
+            ],
+        },
+        ...(fitting.fittingType === 'elbow'
+            ? []
+            : [
+                {
+                    key: 'diameter2',
+                    axis: branchAxis,
+                    cursor: 'ew-resize',
+                    guideFrom: [
+                        p[0] + branchAxis.x * resizeHandleBase,
+                        p[1] + branchAxis.y * resizeHandleBase,
+                        p[2] + branchAxis.z * resizeHandleBase,
+                    ],
+                    guideTo: [
+                        p[0] + branchAxis.x * Math.max(extent * 0.18, 0.04),
+                        p[1] + branchAxis.y * Math.max(extent * 0.18, 0.04),
+                        p[2] + branchAxis.z * Math.max(extent * 0.18, 0.04),
+                    ],
+                    position: [
+                        p[0] + branchAxis.x * resizeHandleBase,
+                        p[1] + branchAxis.y * resizeHandleBase,
+                        p[2] + branchAxis.z * resizeHandleBase,
+                    ],
+                },
+            ]),
+    ];
+    const moveArrows = [
+        { key: '+x', axis: 'x', position: [p[0] + base, p[1], p[2]], rotationY: 0, cursor: 'grab' },
+        {
+            key: '-x',
+            axis: 'x',
+            position: [p[0] - base, p[1], p[2]],
+            rotationY: Math.PI,
+            cursor: 'grab',
+        },
+        {
+            key: '+z',
+            axis: 'z',
+            position: [p[0], p[1], p[2] + base],
+            rotationY: -Math.PI / 2,
+            cursor: 'grab',
+        },
+        {
+            key: '-z',
+            axis: 'z',
+            position: [p[0], p[1], p[2] - base],
+            rotationY: Math.PI / 2,
+            cursor: 'grab',
+        },
+        {
+            key: '+y',
+            axis: 'y',
+            position: [p[0], p[1] + base, p[2]],
+            rotationY: 0,
+            vertical: 'up',
+            cursor: 'ns-resize',
+        },
+        {
+            key: '-y',
+            axis: 'y',
+            position: [p[0], p[1] - base, p[2]],
+            rotationY: 0,
+            vertical: 'down',
+            cursor: 'ns-resize',
+        },
+    ];
+    const d = base * Math.SQRT1_2;
+    const rotateArcs = ['x', 'y', 'z'].map((axis) => {
+        const q = new Quaternion().setFromUnitVectors(UP, AXIS_VECTORS[axis]);
+        if (axis === 'z') {
+            q.premultiply(new Quaternion().setFromAxisAngle(AXIS_VECTORS.z, Math.PI / 4));
+        }
+        else if (axis === 'x') {
+            q.premultiply(new Quaternion().setFromAxisAngle(AXIS_VECTORS.x, (-145 * Math.PI) / 180));
+        }
+        else if (axis === 'y') {
+            q.premultiply(new Quaternion().setFromAxisAngle(AXIS_VECTORS.y, (-45 * Math.PI) / 180));
+        }
+        const e = new Euler().setFromQuaternion(q);
+        const position = axis === 'x'
+            ? [p[0], p[1] + d, p[2] + d]
+            : axis === 'y'
+                ? [p[0] + d, p[1], p[2] + d]
+                : [p[0] + d, p[1] + d, p[2]];
+        return { key: `r${axis}`, axis, position, rotation: [e.x, e.y, e.z] };
+    });
+    if (dragging)
+        return _jsx("group", { ref: setFrame });
+    return (_jsxs("group", { ref: setFrame, children: [_jsx(HandleCube, { active: open, onClick: () => setOpen((o) => !o), position: p }), !open &&
+                resizeHandles.map((handle) => (_jsxs("group", { children: [_jsx(DashedResizeGuide, { from: handle.guideFrom, to: handle.guideTo }), _jsx(ResizeSphereHandle, { cursor: handle.cursor, onPointerDown: beginDimensionDrag(handle.key, handle.axis, handle.cursor), position: handle.position })] }, handle.key))), open && (_jsxs(_Fragment, { children: [moveArrows.map((a) => (_jsx(MoveChevron, { cursor: a.cursor, onPointerDown: beginDrag(a.axis === 'y' ? 'ns-resize' : 'grabbing', moveCompute(a.axis)), position: a.position, rotationY: a.rotationY, vertical: a.vertical }, a.key))), rotateArcs.map((arc) => (_jsx(RotateArc, { onPointerDown: beginDrag('grabbing', rotateCompute(arc.axis)), position: arc.position, rotation: arc.rotation }, arc.key)))] }))] }));
+};
+export default PipeFittingSelectionAffordance;

package/dist/pipe-fitting/tool.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Click-place tool for DWV pipe fittings (elbow / wye / sanitary tee) —
+ * the plumbing sibling of the duct-fitting tool.
+ *
+ * A translucent ghost of the fitting follows the cursor. Within snap
+ * range of any DWV port (pipe run ends, other fittings' collars) the
+ * ghost jumps onto the port — position AND orientation — so one click
+ * mates the fitting onto the run.
+ *
+ * Rotation while placing: **R / T** turn the ghost ±45° around the
+ * active world axis; **Alt** cycles the axis (Y → X → Z). The HUD badge
+ * above the ghost shows the current axis. When snapped to a port the
+ * rotation pivots around the inlet collar so the joint stays mated.
+ * Handlers run in the capture phase so R doesn't also spin whatever
+ * node happens to be selected.
+ */
+declare const PipeFittingTool: () => import("react").JSX.Element | null;
+export default PipeFittingTool;
+//# sourceMappingURL=tool.d.ts.map

package/dist/pipe-fitting/tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/pipe-fitting/tool.tsx"],"names":[],"mappings":"AA2FA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,eAAe,0CAuJpB,CAAA;AAED,eAAe,eAAe,CAAA"}