hic-pageflip 1.0.0

package/core/engines/engine-2d.js

@@ -0,0 +1,470 @@
+/**
+ * HTML-in-Canvas 2D Pageflip Engine (HICPageflipEngine2D)
+ * Implements 2D geometric fold clipping, affine reflection matrices,
+ * fold drop shadows, spine shadows, and direct DOM element drawing via ctx.drawElementImage.
+ */
+
+import { BaseEngine } from './engine-base.js';
+import { calculateFold, clamp } from '../utils/math.js';
+
+export class HICPageflipEngine2D extends BaseEngine {
+  constructor(canvas, slides = []) {
+    super(canvas, slides);
+    this.ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
+    this.devicePixelRatio = 1;
+    this.resize();
+  }
+
+  resize() {
+    const rect = this.canvas.getBoundingClientRect();
+    this.devicePixelRatio = 1;
+
+    // Use CSS pixel dimensions directly for 1:1 context coordinate mapping
+    this.canvas.width = Math.round(rect.width) || this.pw;
+    this.canvas.height = Math.round(rect.height) || this.ph;
+    this.viewportWidth = this.canvas.width;
+    this.viewportHeight = this.canvas.height;
+    this.offsetX = this.canvas.width / 2;
+    this.offsetY = this.canvas.height / 2;
+
+    const pad = 40;
+    const availW = Math.max(100, this.canvas.width - pad);
+    const availH = Math.max(100, this.canvas.height - pad);
+    const spreadW = this.pw * 2;
+    const spreadH = this.ph;
+
+    this.scale = Math.min(availW / spreadW, availH / spreadH, 1);
+    this.zoom = 1.0;
+    this.panX = 0;
+    this.panY = 0;
+  }
+
+  requestRender(callback) {
+    if (this.canvas && typeof this.canvas.requestPaint === 'function') {
+      this.canvas.requestPaint();
+    }
+    super.requestRender(callback);
+  }
+
+  /**
+   * Main render loop
+   */
+  render(state) {
+    const [leftPage, rightPage] = state.currentSpread;
+    const totalPages = state.totalPages || this.slides.length;
+    const activePages = new Set();
+
+    // Once the pointer goes down (dragging) or during active fold animation, inert ALL pages
+    const isInteracting = state.isDragging || (state.activeFlip && !state.activeFlip.isPeek);
+    if (!isInteracting) {
+      if (leftPage > 0) activePages.add(leftPage);
+      if (rightPage <= totalPages) activePages.add(rightPage);
+    }
+
+    // Dynamically inert all non-active pages
+    this.slides.forEach((s) => {
+      if (s.element) {
+        s.element.inert = !activePages.has(s.pageNum);
+      }
+    });
+
+    const ctx = this.ctx;
+    const dpr = this.devicePixelRatio;
+    const width = this.canvas.width / dpr;
+    const height = this.canvas.height / dpr;
+
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+
+    // Apply main viewport transformations (center + zoom + pan)
+    ctx.translate(this.offsetX + this.panX, this.offsetY + this.panY);
+    ctx.scale(this.scale * this.zoom, this.scale * this.zoom);
+
+    // 1. Ambient shadow of the physical book block resting on the desk
+    this.renderBookShadow(ctx, state);
+
+    // 2. Render book pages, stationary gutter shadows, and turning flap on top
+    this.renderPages(ctx, state);
+
+    ctx.restore();
+  }
+
+  /**
+   * Ambient shadow of the physical book resting on the desk surface.
+   */
+  renderBookShadow(ctx, state) {
+    const pw = this.pw;
+    const ph = this.ph;
+    const [leftPageNum, rightPageNum] = state.currentSpread;
+    const flip = state.activeFlip;
+
+    let leftX = leftPageNum === 0 ? 0 : -pw;
+    let rightX = rightPageNum > state.totalPages ? 0 : pw;
+
+    if (flip) {
+      if (flip.dir < 0 && leftPageNum - 2 <= 0) {
+        leftX = 0;
+      }
+      if (flip.dir > 0 && rightPageNum + 2 > state.totalPages) {
+        rightX = 0;
+      }
+    }
+
+    const bookW = rightX - leftX;
+    if (bookW <= 0) return;
+
+    ctx.save();
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.55)';
+    ctx.shadowBlur = 38 * this.scale;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 16 * this.scale;
+
+    ctx.fillStyle = '#12141a';
+    ctx.fillRect(leftX, -ph / 2, bookW, ph);
+    ctx.restore();
+  }
+
+  /**
+   * Renders pages and dynamic page curl
+   */
+  renderPages(ctx, state) {
+    const pw = this.pw;
+    const ph = this.ph;
+    const [leftPageNum, rightPageNum] = state.currentSpread;
+    const flip = state.activeFlip;
+
+    if (!flip) {
+      // Static double-page spread
+      if (leftPageNum > 0) {
+        this.drawPage(ctx, leftPageNum, -pw, -ph / 2, pw, ph);
+      }
+      if (rightPageNum <= state.totalPages) {
+        this.drawPage(ctx, rightPageNum, 0, -ph / 2, pw, ph);
+      }
+      // Gutter shadow between the two stationary pages
+      if (leftPageNum > 0 && rightPageNum <= state.totalPages) {
+        this.renderSpineShadow(ctx, state);
+      }
+      return;
+    }
+
+    const fold = calculateFold(flip.px, flip.py, flip.sx, flip.sy, pw, ph);
+
+    if (flip.dir > 0) {
+      // ==========================================
+      // FORWARD FLIP: Right page turning to Left
+      // ==========================================
+
+      // 1. Current left page stays visible on the left desk
+      if (leftPageNum > 0) {
+        this.drawPage(ctx, leftPageNum, -pw, -ph / 2, pw, ph);
+      }
+
+      // 2. Underneath right page (Page N+2) revealed as page is peeled back
+      const nextRightPage = rightPageNum + 2;
+      if (nextRightPage <= state.totalPages) {
+        this.drawPage(ctx, nextRightPage, 0, -ph / 2, pw, ph);
+      }
+
+      if (!fold) {
+        if (rightPageNum <= state.totalPages) {
+          this.drawPage(ctx, rightPageNum, 0, -ph / 2, pw, ph);
+        }
+        if (leftPageNum > 0) {
+          this.renderSpineShadow(ctx, state);
+        }
+        return;
+      }
+
+      // 3. Drop shadow cast by the fold crease onto the revealed page underneath
+      if (nextRightPage <= state.totalPages) {
+        this.drawFoldUnderShadow(ctx, fold, 0, -ph / 2, pw, ph);
+      }
+
+      // 4. Flat unpeeled portion of Page N (contains spine: onDragSide = true)
+      if (rightPageNum <= state.totalPages) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, -ph / 2, pw, ph);
+        ctx.clip();
+        ctx.beginPath();
+        this.clipHalfPlane(ctx, fold, true);
+        ctx.clip();
+        this.drawPage(ctx, rightPageNum, 0, -ph / 2, pw, ph);
+        ctx.restore();
+      }
+
+      // 5. Gutter spine shadow on the flat stationary spread UNDER the turning flap
+      if (leftPageNum > 0 && rightPageNum <= state.totalPages) {
+        this.renderSpineShadow(ctx, state);
+      }
+
+      // 6. The Turning Flap (Back of turning page = Page N+1) rendered ON TOP
+      const backPageNum = rightPageNum + 1;
+      const theta = Math.atan2(fold.ny, fold.nx);
+
+      ctx.save();
+      // Clip to the dragged side of the fold (side containing P: onDragSide = true)
+      ctx.beginPath();
+      this.clipHalfPlane(ctx, fold, true);
+      ctx.clip();
+
+      // Apply reflection transformation across the fold crease line
+      ctx.translate(fold.cx, fold.cy);
+      ctx.rotate(theta);
+      ctx.scale(-1, 1);
+      ctx.rotate(-theta);
+      ctx.translate(-fold.cx, -fold.cy);
+
+      // Clip to the original right sheet boundary [0, -ph/2, pw, ph]
+      ctx.beginPath();
+      ctx.rect(0, -ph / 2, pw, ph);
+      ctx.clip();
+
+      // Draw Page N+1 on top
+      this.drawPageBack(ctx, backPageNum, 0, -ph / 2, pw, ph);
+      ctx.restore();
+
+    } else {
+      // ==========================================
+      // BACKWARD FLIP: Left page turning to Right
+      // ==========================================
+
+      // 1. Current right page stays visible on the right desk
+      if (rightPageNum <= state.totalPages) {
+        this.drawPage(ctx, rightPageNum, 0, -ph / 2, pw, ph);
+      }
+
+      // 2. Underneath left page (Page N-3) revealed as left page is peeled back
+      const prevLeftPage = leftPageNum - 2;
+      if (prevLeftPage > 0) {
+        this.drawPage(ctx, prevLeftPage, -pw, -ph / 2, pw, ph);
+      }
+
+      if (!fold) {
+        if (leftPageNum > 0) {
+          this.drawPage(ctx, leftPageNum, -pw, -ph / 2, pw, ph);
+        }
+        if (leftPageNum > 0 && rightPageNum <= state.totalPages) {
+          this.renderSpineShadow(ctx, state);
+        }
+        return;
+      }
+
+      // 3. Drop shadow cast by fold crease onto revealed page underneath
+      if (prevLeftPage > 0) {
+        this.drawFoldUnderShadow(ctx, fold, -pw, -ph / 2, pw, ph);
+      }
+
+      // 4. Flat unpeeled portion of Page N-1 (contains spine: onDragSide = true)
+      if (leftPageNum > 0) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(-pw, -ph / 2, pw, ph);
+        ctx.clip();
+        ctx.beginPath();
+        this.clipHalfPlane(ctx, fold, true);
+        ctx.clip();
+        this.drawPage(ctx, leftPageNum, -pw, -ph / 2, pw, ph);
+        ctx.restore();
+      }
+
+      // 5. Gutter spine shadow on the flat stationary spread UNDER the turning flap
+      if (leftPageNum > 0 && rightPageNum <= state.totalPages) {
+        this.renderSpineShadow(ctx, state);
+      }
+
+      // 6. The Turning Flap (Front of left sheet = Page N-1) rendered ON TOP
+      const frontPageNum = leftPageNum - 1;
+      const theta = Math.atan2(fold.ny, fold.nx);
+
+      ctx.save();
+      // Clip to the dragged side of the fold (side containing P: onDragSide = true)
+      ctx.beginPath();
+      this.clipHalfPlane(ctx, fold, true);
+      ctx.clip();
+
+      // Apply reflection transformation across the fold crease line
+      ctx.translate(fold.cx, fold.cy);
+      ctx.rotate(theta);
+      ctx.scale(-1, 1);
+      ctx.rotate(-theta);
+      ctx.translate(-fold.cx, -fold.cy);
+
+      // Clip to the left sheet boundary [-pw, -ph/2, pw, ph]
+      ctx.beginPath();
+      ctx.rect(-pw, -ph / 2, pw, ph);
+      ctx.clip();
+
+      // Draw Page N-1
+      this.drawPageFrontReflected(ctx, frontPageNum, -pw, -ph / 2, pw, ph);
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Clips to one half of the plane divided by the fold crease line.
+   */
+  clipHalfPlane(ctx, fold, onDragSide) {
+    const L = Math.max(this.pw, this.ph) * 6;
+    const tx = -fold.ny;
+    const ty = fold.nx;
+    const sign = onDragSide ? 1 : -1;
+    const nx = fold.nx * sign;
+    const ny = fold.ny * sign;
+
+    const p1 = { x: fold.cx - tx * L, y: fold.cy - ty * L };
+    const p2 = { x: fold.cx + tx * L, y: fold.cy + ty * L };
+    const p3 = { x: p2.x + nx * L, y: p2.y + ny * L };
+    const p4 = { x: p1.x + nx * L, y: p1.y + ny * L };
+
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.lineTo(p3.x, p3.y);
+    ctx.lineTo(p4.x, p4.y);
+    ctx.closePath();
+  }
+
+  /**
+   * Soft drop shadow under the fold crease onto the revealed page underneath.
+   */
+  drawFoldUnderShadow(ctx, fold, rx, ry, rw, rh) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(rx, ry, rw, rh);
+    ctx.clip();
+
+    ctx.beginPath();
+    this.clipHalfPlane(ctx, fold, false);
+    ctx.clip();
+
+    const shadowWidth = clamp(fold.len * 0.16, 12, 45);
+    const grad = ctx.createLinearGradient(
+      fold.cx,
+      fold.cy,
+      fold.cx - fold.nx * shadowWidth,
+      fold.cy - fold.ny * shadowWidth
+    );
+    grad.addColorStop(0, 'rgba(0, 0, 0, 0.35)');
+    grad.addColorStop(0.35, 'rgba(0, 0, 0, 0.14)');
+    grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+    ctx.fillStyle = grad;
+    ctx.fillRect(rx - 20, ry - 20, rw + 40, rh + 40);
+    ctx.restore();
+  }
+
+  /**
+   * Draws a flat DOM slide using ctx.drawElementImage.
+   */
+  drawPage(ctx, pageNum, x, y, w, h) {
+    const slide = this.slides[pageNum - 1];
+    if (!slide || !slide.element) return;
+
+    const el = slide.element;
+    if (typeof ctx.drawElementImage === 'function') {
+      try {
+        ctx.save();
+        ctx.translate(x, y);
+        const transform = ctx.drawElementImage(el, 0, 0);
+        if (transform && el.style) {
+          el.style.transform = transform.toString();
+        }
+        ctx.restore();
+      } catch (err) {
+        // Ignore if paint record not ready
+      }
+    }
+  }
+
+  /**
+   * Draws the backside of the turning page (Page N+1) onto the sheet [0, -ph/2, pw, ph].
+   */
+  drawPageBack(ctx, pageNum, x, y, w, h) {
+    const slide = this.slides[pageNum - 1];
+    if (!slide || !slide.element) return;
+
+    const el = slide.element;
+    if (typeof ctx.drawElementImage === 'function') {
+      try {
+        ctx.save();
+        ctx.translate(x + w, y);
+        ctx.scale(-1, 1);
+        const transform = ctx.drawElementImage(el, 0, 0);
+        if (transform && el.style) {
+          el.style.transform = transform.toString();
+        }
+        ctx.restore();
+      } catch (err) {
+        // Ignore
+      }
+    }
+  }
+
+  /**
+   * Draws the front of the turning left page reflected onto the right side.
+   */
+  drawPageFrontReflected(ctx, pageNum, x, y, w, h) {
+    const slide = this.slides[pageNum - 1];
+    if (!slide || !slide.element) return;
+
+    const el = slide.element;
+    if (typeof ctx.drawElementImage === 'function') {
+      try {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.scale(-1, 1);
+        ctx.translate(-w, 0);
+        const transform = ctx.drawElementImage(el, 0, 0);
+        if (transform && el.style) {
+          el.style.transform = transform.toString();
+        }
+        ctx.restore();
+      } catch (err) {
+        // Ignore
+      }
+    }
+  }
+
+  /**
+   * Center spine crease shadow on the flat spread between stationary pages.
+   */
+  renderSpineShadow(ctx, state) {
+    const ph = this.ph;
+    const spineWidth = 32;
+    const [leftPageNum, rightPageNum] = state.currentSpread;
+
+    ctx.save();
+    // Left side of spine
+    if (leftPageNum > 0) {
+      const leftGrad = ctx.createLinearGradient(-spineWidth, 0, 0, 0);
+      leftGrad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+      leftGrad.addColorStop(0.7, 'rgba(0, 0, 0, 0.14)');
+      leftGrad.addColorStop(1, 'rgba(0, 0, 0, 0.38)');
+      ctx.fillStyle = leftGrad;
+      ctx.fillRect(-spineWidth, -ph / 2, spineWidth, ph);
+    }
+
+    // Right side of spine
+    if (rightPageNum <= state.totalPages) {
+      const rightGrad = ctx.createLinearGradient(0, 0, spineWidth, 0);
+      rightGrad.addColorStop(0, 'rgba(0, 0, 0, 0.38)');
+      rightGrad.addColorStop(0.3, 'rgba(0, 0, 0, 0.14)');
+      rightGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = rightGrad;
+      ctx.fillRect(0, -ph / 2, spineWidth, ph);
+    }
+
+    // Fine center line
+    if (leftPageNum > 0 && rightPageNum <= state.totalPages) {
+      ctx.strokeStyle = 'rgba(0, 0, 0, 0.45)';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(0, -ph / 2);
+      ctx.lineTo(0, ph / 2);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+}