Pinch to resize

js/dressup.js

@@ -1,25 +1,26 @@
 import { loadPrincesses, loadClothes, blobToURL } from './store.js';
-import {
-  getCategoryInfo, DEFAULT_ANCHORS,
-  SNAP_THRESHOLD_PX, MAGNETIC_START_PX, DRAG_DEAD_ZONE_PX, DOUBLE_TAP_MS,
-} from './models.js';
+import { getCategoryInfo, DRAG_DEAD_ZONE_PX, DOUBLE_TAP_MS } from './models.js';
 
 let princesses = [];
 let clothes = [];
 let currentIdx = 0;
-let placedItems = []; // { clothingId, anchorUsed, x, y, scale, zIndex, url }
+let placedItems = []; // { clothingId, x, y, scale, zIndex, url }
 let objectURLs = [];
 let clothesURLMap = {}; // id -> objectURL
 
-// Drag state
-let drag = null; // { source:'tray'|'canvas', id, url, anchor, scale, zIndex, startX, startY, canvasIdx?, hasMoved }
-let ghost = null; // the floating drag element
-let snapZones = []; // computed pixel positions [{name, x, y}]
-let activeSnap = null; // index into snapZones or null
+// Single-finger drag state
+let drag = null;
+let ghost = null;
 
-// Double-tap tracking for placed items
+// Pinch-to-resize state
+let pinch = null; // { idx, startDist, startScale }
+
+// Double-tap tracking
 let lastPlacedTap = { idx: -1, time: 0 };
 
+// Track active pointers on placed items
+let activePointers = new Map(); // pointerId -> { x, y, origIdx }
+
 export async function initDressUp() {
   const screen = document.getElementById('dressup-screen');
 
@@ -30,7 +31,6 @@ export async function initDressUp() {
   objectURLs = [];
   clothesURLMap = {};
 
-  // Pre-create object URLs for all clothes
   clothes.forEach(c => {
     const url = blobToURL(c.imageBlob);
     objectURLs.push(url);
@@ -57,7 +57,6 @@ export async function initDressUp() {
         <div id="princess-canvas" class="princess-canvas">
           <img id="princess-img" class="princess-img" src="" alt=""/>
           <div id="placed-layer" class="placed-layer"></div>
-          <div id="snap-rings" class="snap-rings"></div>
         </div>
       </div>
 
@@ -77,9 +76,10 @@ export async function initDressUp() {
     </div>
   `;
 
+  currentIdx = 0;
   renderPrincess();
   renderTray();
-  bindDressUpEvents();
+  bindEvents();
 }
 
 // ---- Rendering ----
@@ -100,7 +100,6 @@ function renderPrincess() {
 
   placedItems = [];
   renderPlaced();
-  renderSnapRings();
 }
 
 function renderTray() {
@@ -112,7 +111,7 @@ function renderTray() {
     const catInfo = getCategoryInfo(c.category);
     return `
       <div class="tray-item" data-id="${c.id}"
-           data-anchor="${c.targetAnchor}" data-scale="${c.scale}" data-z="${c.zIndex}">
+           data-scale="${c.scale}" data-z="${c.zIndex}">
         <img src="${url}" class="tray-thumb" alt="${c.name}" draggable="false"/>
         <span class="tray-label">${catInfo ? catInfo.emoji : ''} ${c.name}</span>
       </div>
@@ -141,80 +140,19 @@ function renderPlaced() {
   `).join('');
 }
 
-function renderSnapRings() {
-  const container = document.getElementById('snap-rings');
-  if (!container) return;
-  const p = princesses[currentIdx];
-  if (!p) return;
-
-  const anchors = p.anchors || DEFAULT_ANCHORS;
-  container.innerHTML = Object.entries(anchors).map(([name, pos]) => `
-    <div class="snap-ring" data-anchor="${name}"
-         style="left:${pos.x * 100}%; top:${pos.y * 100}%;">
-    </div>
-  `).join('');
-}
-
-function updateSnapRingActive(anchorName) {
-  document.querySelectorAll('.snap-ring').forEach(el => {
-    el.classList.toggle('active', el.dataset.anchor === anchorName);
-  });
-}
-
-function clearSnapRingActive() {
-  document.querySelectorAll('.snap-ring').forEach(el => el.classList.remove('active'));
-}
-
-// ---- Snap zone computation ----
-
-function computeSnapZones() {
-  const canvas = document.getElementById('princess-canvas');
-  if (!canvas) return [];
-  const rect = canvas.getBoundingClientRect();
-  const p = princesses[currentIdx];
-  if (!p) return [];
-
-  const anchors = p.anchors || DEFAULT_ANCHORS;
-  return Object.entries(anchors).map(([name, pos]) => ({
-    name,
-    x: rect.left + pos.x * rect.width,
-    y: rect.top + pos.y * rect.height,
-    nx: pos.x, // normalized
-    ny: pos.y,
-  }));
-}
-
-function findNearestZone(fingerX, fingerY) {
-  let best = null;
-  let bestDist = Infinity;
-  snapZones.forEach((z, i) => {
-    const d = dist(fingerX, fingerY, z.x, z.y);
-    if (d < bestDist) { bestDist = d; best = i; }
-  });
-  if (bestDist < SNAP_THRESHOLD_PX) return { idx: best, dist: bestDist, locked: true };
-  if (bestDist < MAGNETIC_START_PX) return { idx: best, dist: bestDist, locked: false };
-  return null;
-}
-
-function magneticPosition(fingerX, fingerY, zone) {
-  const d = dist(fingerX, fingerY, zone.x, zone.y);
-  if (d < SNAP_THRESHOLD_PX) return { x: zone.x, y: zone.y };
-  const t = 1.0 - (d / MAGNETIC_START_PX);
-  const pull = t * t; // quadratic
-  return {
-    x: lerp(fingerX, zone.x, pull),
-    y: lerp(fingerY, zone.y, pull),
-  };
-}
-
-function dist(x1, y1, x2, y2) {
-  const dx = x1 - x2, dy = y1 - y2;
-  return Math.sqrt(dx * dx + dy * dy);
+// Update a single placed item's style without re-rendering the whole layer.
+// Avoids flicker during pinch.
+function updatePlacedStyle(origIdx) {
+  const el = document.querySelector(`.placed-item[data-orig-idx="${origIdx}"]`);
+  if (!el) return;
+  const item = placedItems[origIdx];
+  if (!item) return;
+  el.style.left = `${item.x * 100}%`;
+  el.style.top = `${item.y * 100}%`;
+  el.style.width = `${item.scale * 100}%`;
 }
 
-function lerp(a, b, t) { return a + (b - a) * t; }
-
-// ---- Ghost element ----
+// ---- Ghost (for tray drag) ----
 
 function createGhost(url) {
   if (ghost) ghost.remove();
@@ -223,7 +161,6 @@ function createGhost(url) {
   ghost.className = 'drag-ghost';
   ghost.draggable = false;
   document.body.appendChild(ghost);
-  return ghost;
 }
 
 function moveGhost(x, y) {
@@ -233,14 +170,22 @@ function moveGhost(x, y) {
 
 function removeGhost() {
   if (ghost) { ghost.remove(); ghost = null; }
-  clearSnapRingActive();
-  activeSnap = null;
 }
 
-// ---- Drag & drop events ----
+// ---- Helpers ----
 
-function bindDressUpEvents() {
-  // Princess switcher
+function pointerDist(a, b) {
+  const dx = a.x - b.x, dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function pointerMid(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+
+// ---- Events ----
+
+function bindEvents() {
   document.getElementById('prev-btn').addEventListener('click', () => {
     if (currentIdx > 0) { currentIdx--; renderPrincess(); }
   });
@@ -248,33 +193,28 @@ function bindDressUpEvents() {
     if (currentIdx < princesses.length - 1) { currentIdx++; renderPrincess(); }
   });
 
-  // Tray: pointerdown starts potential drag
   const tray = document.getElementById('clothing-tray');
   tray.addEventListener('pointerdown', onTrayPointerDown, { passive: false });
 
-  // Placed items: pointerdown for drag or double-tap
   const placedLayer = document.getElementById('placed-layer');
   placedLayer.addEventListener('pointerdown', onPlacedPointerDown, { passive: false });
 
-  // Global move/up (on window so we don't lose events)
   window.addEventListener('pointermove', onPointerMove, { passive: false });
   window.addEventListener('pointerup', onPointerUp);
-  window.addEventListener('pointercancel', onPointerCancel);
+  window.addEventListener('pointercancel', onPointerUp);
 }
 
+// ---- Tray drag ----
+
 function onTrayPointerDown(e) {
   const item = e.target.closest('.tray-item');
   if (!item) return;
-
   e.preventDefault();
-  const id = item.dataset.id;
-  const url = clothesURLMap[id];
 
   drag = {
     source: 'tray',
-    id,
-    url,
-    anchor: item.dataset.anchor,
+    id: item.dataset.id,
+    url: clothesURLMap[item.dataset.id],
     scale: parseFloat(item.dataset.scale),
     zIndex: parseInt(item.dataset.z),
     startX: e.clientX,
@@ -283,34 +223,60 @@ function onTrayPointerDown(e) {
   };
 }
 
+// ---- Placed item: drag, pinch, double-tap ----
+
 function onPlacedPointerDown(e) {
   const img = e.target.closest('.placed-item');
   if (!img) return;
-
   e.preventDefault();
+
   const origIdx = parseInt(img.dataset.origIdx);
-  const item = placedItems[origIdx];
-  if (!item) return;
+  const ptr = { x: e.clientX, y: e.clientY, origIdx };
+  activePointers.set(e.pointerId, ptr);
+
+  // Check if this is a second finger on the same item -> start pinch
+  const sameItem = [...activePointers.values()].filter(p => p.origIdx === origIdx);
+  if (sameItem.length === 2 && !pinch) {
+    // Cancel any single-finger drag
+    if (drag && drag.source === 'canvas') {
+      drag = null;
+      removeGhost();
+    }
+    const d = pointerDist(sameItem[0], sameItem[1]);
+    pinch = {
+      idx: origIdx,
+      startDist: d,
+      startScale: placedItems[origIdx].scale,
+      startMidX: (sameItem[0].x + sameItem[1].x) / 2,
+      startMidY: (sameItem[0].y + sameItem[1].y) / 2,
+      startItemX: placedItems[origIdx].x,
+      startItemY: placedItems[origIdx].y,
+    };
+    return;
+  }
 
-  // Check for double-tap
+  // Single finger: check double-tap first
   const now = Date.now();
   if (lastPlacedTap.idx === origIdx && (now - lastPlacedTap.time) < DOUBLE_TAP_MS) {
-    // Double tap - remove with poof
     img.classList.add('poof');
     setTimeout(() => {
       placedItems.splice(origIdx, 1);
       renderPlaced();
     }, 300);
     lastPlacedTap = { idx: -1, time: 0 };
+    activePointers.delete(e.pointerId);
     return;
   }
   lastPlacedTap = { idx: origIdx, time: now };
 
+  // Start single-finger drag
+  const item = placedItems[origIdx];
+  if (!item) return;
+
   drag = {
     source: 'canvas',
     id: item.clothingId,
     url: item.url,
-    anchor: item.anchorUsed,
     scale: item.scale,
     zIndex: item.zIndex,
     startX: e.clientX,
@@ -321,6 +287,38 @@ function onPlacedPointerDown(e) {
 }
 
 function onPointerMove(e) {
+  // Update active pointer position
+  if (activePointers.has(e.pointerId)) {
+    const ptr = activePointers.get(e.pointerId);
+    ptr.x = e.clientX;
+    ptr.y = e.clientY;
+  }
+
+  // Pinch-to-resize
+  if (pinch) {
+    e.preventDefault();
+    const sameItem = [...activePointers.values()].filter(p => p.origIdx === pinch.idx);
+    if (sameItem.length >= 2) {
+      const d = pointerDist(sameItem[0], sameItem[1]);
+      const ratio = d / pinch.startDist;
+      const newScale = Math.max(0.1, Math.min(2.0, pinch.startScale * ratio));
+      placedItems[pinch.idx].scale = newScale;
+
+      // Also move item with the midpoint
+      const canvas = document.getElementById('princess-canvas');
+      const rect = canvas.getBoundingClientRect();
+      const mid = pointerMid(sameItem[0], sameItem[1]);
+      const dx = mid.x - pinch.startMidX;
+      const dy = mid.y - pinch.startMidY;
+      placedItems[pinch.idx].x = pinch.startItemX + dx / rect.width;
+      placedItems[pinch.idx].y = pinch.startItemY + dy / rect.height;
+
+      updatePlacedStyle(pinch.idx);
+    }
+    return;
+  }
+
+  // Single-finger drag
   if (!drag) return;
   e.preventDefault();
 
@@ -331,96 +329,64 @@ function onPointerMove(e) {
     if (Math.abs(dx) < DRAG_DEAD_ZONE_PX && Math.abs(dy) < DRAG_DEAD_ZONE_PX) return;
     drag.hasMoved = true;
 
-    // Create ghost
-    createGhost(drag.url);
-    ghost.classList.add('lifting');
-    snapZones = computeSnapZones();
-
-    // If dragging from canvas, hide the original
-    if (drag.source === 'canvas') {
+    if (drag.source === 'tray') {
+      createGhost(drag.url);
+      ghost.classList.add('lifting');
+    } else if (drag.source === 'canvas') {
+      // Remove from placed and drag as ghost
       placedItems.splice(drag.canvasIdx, 1);
       renderPlaced();
+      createGhost(drag.url);
+      ghost.classList.add('lifting');
     }
   }
 
-  // Compute position (with magnetic snap)
-  let gx = e.clientX, gy = e.clientY;
-  const snap = findNearestZone(e.clientX, e.clientY);
-
-  if (snap) {
-    const zone = snapZones[snap.idx];
-    const pos = magneticPosition(e.clientX, e.clientY, zone);
-    gx = pos.x;
-    gy = pos.y;
-    activeSnap = snap.idx;
-    updateSnapRingActive(zone.name);
-    ghost.classList.toggle('snapping', snap.locked);
-  } else {
-    activeSnap = null;
-    clearSnapRingActive();
-    ghost.classList.remove('snapping');
-  }
-
-  moveGhost(gx, gy);
+  moveGhost(e.clientX, e.clientY);
 }
 
 function onPointerUp(e) {
+  activePointers.delete(e.pointerId);
+
+  // End pinch if we lost a finger
+  if (pinch) {
+    const sameItem = [...activePointers.values()].filter(p => p.origIdx === pinch.idx);
+    if (sameItem.length < 2) {
+      pinch = null;
+    }
+    return;
+  }
+
   if (!drag) return;
 
   if (!drag.hasMoved) {
-    // It was a tap, not a drag
+    // Tap on tray -> place at center
     if (drag.source === 'tray') {
-      // Tap on tray -> auto-snap
-      const p = princesses[currentIdx];
-      const anchors = p?.anchors || DEFAULT_ANCHORS;
-      const anchorPos = anchors[drag.anchor];
-      if (anchorPos) {
-        placedItems.push({
-          clothingId: drag.id,
-          anchorUsed: drag.anchor,
-          x: anchorPos.x,
-          y: anchorPos.y,
-          scale: drag.scale,
-          zIndex: drag.zIndex,
-          url: drag.url,
-        });
-        renderPlaced();
-        sparkleAt(anchorPos.x, anchorPos.y);
-      }
+      placedItems.push({
+        clothingId: drag.id,
+        x: 0.5,
+        y: 0.5,
+        scale: drag.scale,
+        zIndex: drag.zIndex,
+        url: drag.url,
+      });
+      renderPlaced();
     }
-    // Tap on canvas item is handled by double-tap in pointerdown
     drag = null;
     return;
   }
 
-  // Drag ended - place the item
+  // Drop
   const canvas = document.getElementById('princess-canvas');
   const rect = canvas.getBoundingClientRect();
 
-  if (activeSnap !== null) {
-    // Snap to anchor
-    const zone = snapZones[activeSnap];
-    placedItems.push({
-      clothingId: drag.id,
-      anchorUsed: zone.name,
-      x: zone.nx,
-      y: zone.ny,
-      scale: drag.scale,
-      zIndex: drag.zIndex,
-      url: drag.url,
-    });
-    renderPlaced();
-    sparkleAt(zone.nx, zone.ny);
-  } else if (
+  if (
     e.clientX >= rect.left && e.clientX <= rect.right &&
     e.clientY >= rect.top && e.clientY <= rect.bottom
   ) {
-    // Free-place on canvas
     const nx = (e.clientX - rect.left) / rect.width;
     const ny = (e.clientY - rect.top) / rect.height;
     placedItems.push({
       clothingId: drag.id,
-      anchorUsed: null,
       x: nx,
       y: ny,
       scale: drag.scale,
@@ -429,41 +395,7 @@ function onPointerUp(e) {
     });
     renderPlaced();
   }
-  // else: dropped outside canvas, item is lost (bounced back)
-
-  removeGhost();
-  drag = null;
-}
 
-function onPointerCancel() {
-  // If dragging from canvas and we cancel, put the item back
-  if (drag && drag.hasMoved && drag.source === 'canvas') {
-    // Item was already removed from placedItems - it's gone. That's okay for now.
-  }
   removeGhost();
   drag = null;
 }
-
-// ---- Sparkle effect ----
-
-function sparkleAt(nx, ny) {
-  const canvas = document.getElementById('princess-canvas');
-  if (!canvas) return;
-
-  const sparkle = document.createElement('div');
-  sparkle.className = 'sparkle-burst';
-  sparkle.style.left = `${nx * 100}%`;
-  sparkle.style.top = `${ny * 100}%`;
-
-  // 8 stars radiating outward
-  for (let i = 0; i < 8; i++) {
-    const star = document.createElement('span');
-    star.className = 'sparkle-star';
-    star.textContent = i % 2 === 0 ? '\u2728' : '\u2B50';
-    star.style.setProperty('--angle', `${i * 45}deg`);
-    sparkle.appendChild(star);
-  }
-
-  canvas.appendChild(sparkle);
-  setTimeout(() => sparkle.remove(), 700);
-}

style.css

@@ -442,10 +442,13 @@ h2 { font-size: 1.5rem; font-weight: 700; color: var(--lavender-dk); }
 
 /* ---- Placed items ---- */
 
+.placed-layer {
+  touch-action: none;
+}
+
 .placed-item {
   pointer-events: auto;
   cursor: grab;
-  transition: transform 0.2s var(--spring);
 }
 
 .placed-item.poof {