add drag select in sketches

Author: stewartoallen

src/void/interact.js

@@ -41,6 +41,8 @@ const interact = {
     sketchLineStart: null,
     sketchLineStartSeq: null,
     sketchPointerSeq: 0,
+    sketchMarquee: null,
+    sketchMarqueeEl: null,
     _lastSketchDownStamp: null,
     _lastSketchUpStamp: null,
     _skipNextWindowSketchDown: false,
@@ -75,6 +77,7 @@ const interact = {
         });
         window.addEventListener('mousemove', event => {
             if (this.isSketchEditing()) {
+                this.handleSketchPointerMove?.(event);
                 this.handleSketchHover(event);
             }
         });

src/void/interact/sketch.js

@@ -48,6 +48,7 @@ function clearSketchSelection() {
     this.selectedSketchEntities.clear();
     this.hoveredSketchEntityId = null;
     this.sketchLinePreview = null;
+    this.clearSketchMarquee();
     this.updateSketchInteractionVisuals();
 }
 
@@ -63,6 +64,10 @@ function handleSketchKeyDown(event) {
     }
 
     if (event.code === 'Escape') {
+        const hadMarquee = !!this.sketchMarquee;
+        if (hadMarquee) {
+            this.clearSketchMarquee();
+        }
         const hadLine = !!this.sketchLineStart;
         if (hadLine) {
             this.cancelSketchLine();
@@ -71,7 +76,7 @@ function handleSketchKeyDown(event) {
             this.setSketchTool('select');
             return true;
         }
-        return hadLine;
+        return hadLine || hadMarquee;
     }
 
     if (event.code === 'KeyV') {
@@ -237,11 +242,47 @@ function handleSketchHover(event, intersections) {
     return true;
 }
 
+function handleSketchPointerMove(event) {
+    const feature = this.getEditingSketchFeature();
+    if (!feature || this.getSketchTool() !== 'select') {
+        return false;
+    }
+    if (!this.sketchPointerDown) {
+        return false;
+    }
+    if (!(event?.buttons & 1)) {
+        return false;
+    }
+    if (this.sketchDrag) {
+        return false;
+    }
+    const offsetMag = this.pointerDistance(event, this.sketchPointerDown);
+    if (offsetMag < SKETCH_DRAG_START_PX) {
+        return false;
+    }
+    const downId = this.sketchPointerDown.hitId || this.hoveredSketchEntityId || null;
+    if (downId && downId !== SKETCH_VIRTUAL_ORIGIN_ID) {
+        return false;
+    }
+    if (!this.sketchMarquee) {
+        this.startSketchMarquee(feature, this.sketchPointerDown, event);
+    } else {
+        this.updateSketchMarquee(event);
+    }
+    this.hoveredSketchEntityId = null;
+    this.updateSketchInteractionVisuals();
+    return true;
+}
+
 function handleSketchMouseUp(event, intersections) {
     const feature = this.getEditingSketchFeature();
     if (!feature) {
         return false;
     }
+    if (this.sketchMarquee) {
+        this.finishSketchMarquee(feature);
+        return true;
+    }
 
     const pointerDown = this.sketchPointerDown;
     const dist = pointerDown ? this.pointerDistance(event, pointerDown) : 0;
@@ -329,6 +370,10 @@ function handleSketchDrag(delta, offset, isDone) {
     }
 
     if (isDone) {
+        if (this.sketchMarquee) {
+            this.finishSketchMarquee(feature);
+            return true;
+        }
         if (!this.sketchDrag) {
             return false;
         }
@@ -356,7 +401,10 @@ function handleSketchDrag(delta, offset, isDone) {
         }
         const downId = this.sketchPointerDown.hitId || this.hoveredSketchEntityId || null;
         if (!downId || downId === SKETCH_VIRTUAL_ORIGIN_ID) {
-            return false;
+            this.startSketchMarquee(feature, this.sketchPointerDown, event);
+            this.hoveredSketchEntityId = null;
+            this.updateSketchInteractionVisuals();
+            return true;
         }
         const activeIds = this.selectedSketchEntities.has(downId)
             ? new Set(this.selectedSketchEntities)
@@ -378,6 +426,11 @@ function handleSketchDrag(delta, offset, isDone) {
         this.updateSketchInteractionVisuals();
     }
 
+    if (this.sketchMarquee) {
+        this.updateSketchMarquee(event);
+        return true;
+    }
+
     const local = this.projectEventToSketchLocal(event, feature);
     if (!local) {
         return true;
@@ -397,6 +450,195 @@ function handleSketchDrag(delta, offset, isDone) {
     return true;
 }
 
+function startSketchMarquee(feature, pointerDown, event) {
+    const start = this.viewportPointFromClient(pointerDown?.clientX, pointerDown?.clientY);
+    const end = this.getEventViewportXY(event);
+    if (!start || !end) {
+        return;
+    }
+    this.sketchMarquee = {
+        featureId: feature?.id || null,
+        startX: start.x,
+        startY: start.y,
+        endX: end.x,
+        endY: end.y,
+        mode: end.x >= start.x ? 'window' : 'cross'
+    };
+    this.updateSketchMarqueeVisual();
+}
+
+function updateSketchMarquee(event) {
+    if (!this.sketchMarquee) {
+        return;
+    }
+    const end = this.getEventViewportXY(event);
+    if (!end) {
+        return;
+    }
+    this.sketchMarquee.endX = end.x;
+    this.sketchMarquee.endY = end.y;
+    this.sketchMarquee.mode = end.x >= this.sketchMarquee.startX ? 'window' : 'cross';
+    this.updateSketchMarqueeVisual();
+}
+
+function finishSketchMarquee(feature) {
+    if (!this.sketchMarquee) {
+        return;
+    }
+    const marquee = this.sketchMarquee;
+    this.clearSketchMarquee();
+    const selectIds = this.selectSketchEntitiesInMarquee(feature, marquee);
+    this.selectedSketchEntities = new Set(selectIds);
+    this.hoveredSketchEntityId = null;
+    this.updateSketchInteractionVisuals();
+}
+
+function clearSketchMarquee() {
+    this.sketchMarquee = null;
+    if (this.sketchMarqueeEl?.parentElement) {
+        this.sketchMarqueeEl.parentElement.removeChild(this.sketchMarqueeEl);
+    }
+    this.sketchMarqueeEl = null;
+}
+
+function updateSketchMarqueeVisual() {
+    const marquee = this.sketchMarquee;
+    if (!marquee) {
+        this.clearSketchMarquee();
+        return;
+    }
+    const { container } = space.internals();
+    if (!container) {
+        return;
+    }
+    if (!this.sketchMarqueeEl) {
+        const el = document.createElement('div');
+        el.className = 'sketch-marquee sketch-marquee-window';
+        container.appendChild(el);
+        this.sketchMarqueeEl = el;
+    }
+    const left = Math.min(marquee.startX, marquee.endX);
+    const top = Math.min(marquee.startY, marquee.endY);
+    const width = Math.abs(marquee.endX - marquee.startX);
+    const height = Math.abs(marquee.endY - marquee.startY);
+    this.sketchMarqueeEl.className = `sketch-marquee ${marquee.mode === 'cross' ? 'sketch-marquee-cross' : 'sketch-marquee-window'}`;
+    this.sketchMarqueeEl.style.left = `${left}px`;
+    this.sketchMarqueeEl.style.top = `${top}px`;
+    this.sketchMarqueeEl.style.width = `${width}px`;
+    this.sketchMarqueeEl.style.height = `${height}px`;
+}
+
+function viewportPointFromClient(clientX, clientY) {
+    const { container } = space.internals();
+    if (!container) {
+        return null;
+    }
+    const rect = container.getBoundingClientRect();
+    return {
+        x: (clientX || 0) - rect.left,
+        y: (clientY || 0) - rect.top
+    };
+}
+
+function selectSketchEntitiesInMarquee(feature, marquee) {
+    const entities = Array.isArray(feature?.entities) ? feature.entities : [];
+    const basis = this.getSketchBasis(feature);
+    if (!basis) {
+        return [];
+    }
+    const minX = Math.min(marquee.startX, marquee.endX);
+    const maxX = Math.max(marquee.startX, marquee.endX);
+    const minY = Math.min(marquee.startY, marquee.endY);
+    const maxY = Math.max(marquee.startY, marquee.endY);
+    const rect = { minX, maxX, minY, maxY };
+    const isWindow = marquee.mode !== 'cross';
+
+    const out = [];
+    const pointById = new Map();
+    for (const entity of entities) {
+        if (entity?.type === 'point' && entity.id) {
+            pointById.set(entity.id, entity);
+        }
+    }
+    for (const entity of entities) {
+        if (!entity?.id) continue;
+        if (entity.type === 'point') {
+            const p = this.projectSketchLocalToScreen({ x: entity.x || 0, y: entity.y || 0 }, basis);
+            if (!p) continue;
+            if (this.isPointInRect(p.x, p.y, rect)) {
+                out.push(entity.id);
+            }
+            continue;
+        }
+        if (entity.type === 'line') {
+            const [a, b] = this.getLineEndpoints(entity, pointById);
+            if (!a || !b) continue;
+            const pa = this.projectSketchLocalToScreen({ x: a.x || 0, y: a.y || 0 }, basis);
+            const pb = this.projectSketchLocalToScreen({ x: b.x || 0, y: b.y || 0 }, basis);
+            if (!pa || !pb) continue;
+            const hit = isWindow
+                ? (this.isPointInRect(pa.x, pa.y, rect) && this.isPointInRect(pb.x, pb.y, rect))
+                : this.segmentTouchesRect(pa, pb, rect);
+            if (hit) {
+                out.push(entity.id);
+            }
+        }
+    }
+    return out;
+}
+
+function projectSketchLocalToScreen(local, basis) {
+    const world = this.sketchLocalToWorld(local, basis);
+    const proj = api.overlay.project3Dto2D(world);
+    if (!proj?.visible) {
+        return null;
+    }
+    return { x: proj.x, y: proj.y };
+}
+
+function isPointInRect(x, y, rect) {
+    return x >= rect.minX && x <= rect.maxX && y >= rect.minY && y <= rect.maxY;
+}
+
+function segmentTouchesRect(a, b, rect) {
+    if (this.isPointInRect(a.x, a.y, rect) || this.isPointInRect(b.x, b.y, rect)) {
+        return true;
+    }
+    const edges = [
+        [{ x: rect.minX, y: rect.minY }, { x: rect.maxX, y: rect.minY }],
+        [{ x: rect.maxX, y: rect.minY }, { x: rect.maxX, y: rect.maxY }],
+        [{ x: rect.maxX, y: rect.maxY }, { x: rect.minX, y: rect.maxY }],
+        [{ x: rect.minX, y: rect.maxY }, { x: rect.minX, y: rect.minY }]
+    ];
+    for (const [c, d] of edges) {
+        if (this.segmentsIntersect(a, b, c, d)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function segmentsIntersect(a, b, c, d) {
+    const orient = (p, q, r) => (q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x);
+    const onSeg = (p, q, r) =>
+        Math.min(p.x, r.x) <= q.x && q.x <= Math.max(p.x, r.x) &&
+        Math.min(p.y, r.y) <= q.y && q.y <= Math.max(p.y, r.y);
+
+    const o1 = orient(a, b, c);
+    const o2 = orient(a, b, d);
+    const o3 = orient(c, d, a);
+    const o4 = orient(c, d, b);
+
+    if ((o1 > 0) !== (o2 > 0) && (o3 > 0) !== (o4 > 0)) {
+        return true;
+    }
+    if (Math.abs(o1) < 1e-9 && onSeg(a, c, b)) return true;
+    if (Math.abs(o2) < 1e-9 && onSeg(a, d, b)) return true;
+    if (Math.abs(o3) < 1e-9 && onSeg(c, a, d)) return true;
+    if (Math.abs(o4) < 1e-9 && onSeg(c, b, d)) return true;
+    return false;
+}
+
 function collectSelectedCoordinateRefs(feature) {
     return this.collectCoordinateRefsFromIds(feature, this.selectedSketchEntities);
 }
@@ -796,6 +1038,7 @@ export {
     handleSketchKeyDown,
     handleSketchPointerDown,
     handleSketchHover,
+    handleSketchPointerMove,
     handleSketchMouseUp,
     handleSketchDrag,
     toggleSelectedConstruction,
@@ -811,6 +1054,17 @@ export {
     getSketchBasis,
     sketchLocalToWorld,
     projectEventToSketchLocal,
+    viewportPointFromClient,
+    startSketchMarquee,
+    updateSketchMarquee,
+    finishSketchMarquee,
+    clearSketchMarquee,
+    updateSketchMarqueeVisual,
+    selectSketchEntitiesInMarquee,
+    projectSketchLocalToScreen,
+    isPointInRect,
+    segmentTouchesRect,
+    segmentsIntersect,
     collectSelectedCoordinateRefs,
     collectCoordinateRefsFromIds,
     createSketchPoint,

web/void/style.css

@@ -145,6 +145,23 @@ html, body {
     height: 100%;
 }
 
+.sketch-marquee {
+    position: absolute;
+    pointer-events: none;
+    z-index: 140;
+    border-radius: 2px;
+}
+
+.sketch-marquee-window {
+    background: rgba(90, 159, 212, 0.18);
+    border: 1px solid rgba(90, 159, 212, 0.95);
+}
+
+.sketch-marquee-cross {
+    background: rgba(255, 153, 51, 0.16);
+    border: 1px dashed rgba(255, 153, 51, 0.95);
+}
+
 /* Sketch overlay (2D SVG overlay) */
 #sketch-overlay {
     position: absolute;