@objectifthunes/three-book 0.5.6 → 0.5.7

package/demo-kit/dist/index.js

@@ -0,0 +1,331 @@
+import { BookDirection as y, BookPointerInteraction as k, getSpreadPairs as L, computeDefaultImageRect as N, loadImage as S, drawImageWithFit as I } from "@objectifthunes/three-book";
+import { PX_PER_UNIT as Q, createPageTexture as ee, drawImageWithFit as te, loadImage as ne } from "@objectifthunes/three-book";
+import * as E from "three";
+import { OrbitControls as R } from "three/addons/controls/OrbitControls.js";
+const j = [
+  "Georgia",
+  "Times New Roman",
+  "Garamond",
+  "Palatino",
+  "Arial",
+  "Helvetica",
+  "Verdana",
+  "Trebuchet MS",
+  "Tahoma",
+  "Courier New",
+  "Lucida Console",
+  "Comic Sans MS"
+];
+function D(n, o) {
+  return {
+    text: "Your text here",
+    x: Math.round(n * 0.06),
+    y: Math.round(o * 0.55),
+    width: Math.round(n * 0.88),
+    fontFamily: "",
+    fontSize: 22,
+    fontWeight: "normal",
+    fontStyle: "normal",
+    color: "#1a1a1a",
+    textAlign: "left"
+  };
+}
+function F(n) {
+  switch (n) {
+    case "right-to-left":
+      return y.RightToLeft;
+    case "up-to-down":
+      return y.UpToDown;
+    case "down-to-up":
+      return y.DownToUp;
+    case "left-to-right":
+    default:
+      return y.LeftToRight;
+  }
+}
+function H() {
+  return {
+    image: null,
+    objectUrl: null,
+    useImage: !1,
+    fitMode: "cover",
+    fullBleed: !0,
+    imageRect: null
+  };
+}
+function M(n) {
+  n.objectUrl && URL.revokeObjectURL(n.objectUrl), n.objectUrl = null, n.image = null, n.useImage = !1, n.imageRect = null;
+}
+function O(n, o, e) {
+  const d = document.createElement("div");
+  d.className = "demo-section-title", d.style.cursor = "pointer", d.style.display = "flex", d.style.justifyContent = "space-between", d.style.alignItems = "center", d.style.userSelect = "none";
+  const t = document.createElement("span");
+  t.textContent = o;
+  const a = document.createElement("span");
+  a.textContent = e ? "▴" : "▾", a.style.fontSize = "10px", d.appendChild(t), d.appendChild(a), n.appendChild(d);
+  const c = document.createElement("div");
+  return c.style.display = e ? "block" : "none", n.appendChild(c), d.addEventListener("click", () => {
+    const r = c.style.display !== "none";
+    c.style.display = r ? "none" : "block", a.textContent = r ? "▾" : "▴";
+  }), { header: d, body: c };
+}
+function W(n, o) {
+  const e = document.createElement("div");
+  return e.textContent = o, e.className = "demo-section-title", n.appendChild(e), e;
+}
+function $(n, o, e, d, t, a, c) {
+  const r = document.createElement("label");
+  r.className = "demo-field";
+  const i = document.createElement("div");
+  i.className = "demo-field-row";
+  const h = document.createElement("span");
+  h.textContent = o;
+  const l = document.createElement("span"), f = t < 0.01 ? 3 : t < 0.1 ? 2 : 1;
+  l.textContent = a.toFixed(f);
+  const m = document.createElement("input");
+  return m.type = "range", m.min = String(e), m.max = String(d), m.step = String(t), m.value = String(a), m.className = "demo-slider", m.addEventListener("input", () => {
+    const b = parseFloat(m.value);
+    l.textContent = b.toFixed(f), c(b);
+  }), i.appendChild(h), i.appendChild(l), r.appendChild(i), r.appendChild(m), n.appendChild(r), m;
+}
+function z(n, o, e, d) {
+  const t = document.createElement("label");
+  t.className = "demo-field";
+  const a = document.createElement("div");
+  a.className = "demo-field-row";
+  const c = document.createElement("span");
+  c.textContent = o;
+  const r = document.createElement("span");
+  r.textContent = e;
+  const i = document.createElement("input");
+  return i.type = "color", i.value = e, i.className = "demo-color-input", i.addEventListener("input", () => {
+    r.textContent = i.value, d(i.value);
+  }), a.appendChild(c), a.appendChild(r), t.appendChild(a), t.appendChild(i), n.appendChild(t), i;
+}
+function A(n, o, e, d) {
+  const t = document.createElement("label");
+  t.className = "demo-checkbox-field";
+  const a = document.createElement("span");
+  a.textContent = o;
+  const c = document.createElement("input");
+  return c.type = "checkbox", c.checked = e, c.className = "demo-checkbox", c.addEventListener("change", () => {
+    d(c.checked);
+  }), t.appendChild(a), t.appendChild(c), n.appendChild(t), c;
+}
+function G(n, o, e, d, t) {
+  const a = document.createElement("label");
+  a.className = "demo-field";
+  const c = document.createElement("div");
+  c.className = "demo-field-row";
+  const r = document.createElement("span");
+  r.textContent = o;
+  const i = document.createElement("select");
+  i.className = "demo-select";
+  for (const h of d) {
+    const l = document.createElement("option");
+    l.value = h.value, l.textContent = h.label, l.selected = h.value === e, i.appendChild(l);
+  }
+  return i.addEventListener("change", () => {
+    t(i.value);
+  }), c.appendChild(r), a.appendChild(c), a.appendChild(i), n.appendChild(a), i;
+}
+function _() {
+  const n = new E.Scene();
+  n.background = new E.Color(1710638);
+  const o = new E.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    100
+  );
+  o.position.set(0, 4, 5), o.lookAt(0, 0, 0);
+  const e = new E.WebGLRenderer({ antialias: !0 });
+  e.setSize(window.innerWidth, window.innerHeight), e.setPixelRatio(window.devicePixelRatio), e.shadowMap.enabled = !0, document.body.appendChild(e.domElement);
+  const d = new E.AmbientLight(16777215, 0.6);
+  n.add(d);
+  const t = new E.DirectionalLight(16777215, 1.2);
+  t.position.set(5, 10, 5), t.castShadow = !0, t.shadow.mapSize.set(2048, 2048), n.add(t);
+  const a = new R(o, e.domElement);
+  a.enableDamping = !0, a.dampingFactor = 0.05, a.target.set(0, 0.5, 0);
+  const c = new E.PlaneGeometry(20, 20), r = new E.MeshStandardMaterial({ color: 2763338 }), i = new E.Mesh(c, r);
+  i.rotation.x = -Math.PI / 2, i.position.y = -0.01, i.receiveShadow = !0, n.add(i);
+  function h(l) {
+    d.intensity = l.ambientIntensity, t.intensity = l.sunIntensity, t.position.set(l.sunX, l.sunY, l.sunZ);
+  }
+  return window.addEventListener("resize", () => {
+    o.aspect = window.innerWidth / window.innerHeight, o.updateProjectionMatrix(), e.setSize(window.innerWidth, window.innerHeight);
+  }), { scene: n, camera: o, renderer: e, controls: a, ambientLight: d, dirLight: t, syncLights: h };
+}
+function X(n, o, e, d) {
+  const t = new k(n, o);
+  return t.enabled = d, t.onTurnStart = () => {
+    e.enabled = !1;
+  }, t.onTurnEnd = () => {
+    e.enabled = !0;
+  }, t;
+}
+function Y(n) {
+  const { title: o, subtitle: e, tabs: d } = n, t = document.createElement("div");
+  t.className = "demo-panel", t.style.left = "10px", t.style.width = "min(92vw, 380px)", t.addEventListener("pointerdown", (p) => p.stopPropagation());
+  const a = document.createElement("div");
+  a.className = "demo-panel-header";
+  const c = document.createElement("div"), r = document.createElement("h1");
+  r.textContent = o, r.className = "demo-panel-title";
+  const i = document.createElement("p");
+  i.textContent = e, i.className = "demo-panel-subtitle", c.appendChild(r), c.appendChild(i), a.appendChild(c);
+  const h = document.createElement("button");
+  h.textContent = "✕", h.className = "demo-close-btn", a.appendChild(h), t.appendChild(a);
+  const l = document.createElement("div");
+  l.className = "demo-status", l.textContent = "Building...", t.appendChild(l);
+  const f = document.createElement("div");
+  f.className = "demo-tab-bar";
+  const m = [], b = [];
+  function C(p) {
+    for (let s = 0; s < d.length; s++) {
+      const u = d[s].key === p;
+      b[s].style.display = u ? "block" : "none", m[s].className = u ? "demo-tab demo-tab--active" : "demo-tab";
+    }
+  }
+  for (let p = 0; p < d.length; p++) {
+    const s = d[p], u = document.createElement("button");
+    u.textContent = s.label, u.className = p === 0 ? "demo-tab demo-tab--active" : "demo-tab", u.addEventListener("click", () => C(s.key)), m.push(u), f.appendChild(u), s.content.style.display = p === 0 ? "block" : "none", b.push(s.content);
+  }
+  t.appendChild(f);
+  for (const p of b) t.appendChild(p);
+  const g = document.createElement("button");
+  return g.textContent = "☰ Panel", g.className = "demo-toggle-btn", g.style.display = "none", h.addEventListener("click", () => {
+    t.style.display = "none", g.style.display = "block";
+  }), g.addEventListener("click", () => {
+    t.style.display = "", g.style.display = "none";
+  }), document.body.appendChild(t), document.body.appendChild(g), {
+    root: t,
+    toggleBtn: g,
+    statusEl: l,
+    setStatus(p) {
+      l.textContent = p;
+    },
+    switchTab: C
+  };
+}
+function T(n, o, e) {
+  const t = o.has(n - 1) ? n - 1 : Math.min(n, e - 1), a = o.has(t);
+  return { effectiveIdx: t, isSpread: a };
+}
+function V(n) {
+  const o = document.createElement("div");
+  function e(d) {
+    o.innerHTML = "";
+    const { pageCount: t, currentPage: a, spreadPages: c, onPageChange: r, onSpreadToggle: i } = d, h = new Set(L(t)), { effectiveIdx: l, isSpread: f } = T(a, c, t);
+    if (h.has(l)) {
+      const s = document.createElement("label");
+      s.className = "demo-spread-toggle";
+      const u = document.createElement("input");
+      u.type = "checkbox", u.checked = f, u.className = "demo-spread-checkbox", u.addEventListener("change", () => {
+        i(l, u.checked);
+      }), s.appendChild(u), s.appendChild(
+        document.createTextNode(`Double-page spread: Pages ${l + 1}–${l + 2}`)
+      ), o.appendChild(s);
+    }
+    const m = document.createElement("div");
+    m.className = "demo-page-nav";
+    const b = document.createElement("button");
+    b.textContent = "←", b.className = "demo-btn", b.disabled = l <= 0, b.addEventListener("click", () => r(l - 1));
+    const C = document.createElement("input");
+    C.type = "number", C.min = "1", C.max = String(t), C.value = String(l + 1), C.className = "demo-input--page", C.addEventListener("change", () => {
+      const s = Math.max(1, Math.min(t, parseInt(C.value, 10) || 1)) - 1;
+      r(s);
+    });
+    const g = document.createElement("span");
+    if (g.className = "demo-page-count", g.textContent = `/ ${t}`, m.appendChild(b), m.appendChild(C), m.appendChild(g), f) {
+      const s = document.createElement("span");
+      s.className = "demo-spread-label", s.textContent = `(Spread ${l + 1}–${l + 2})`, m.appendChild(s);
+    }
+    const p = document.createElement("button");
+    p.textContent = "→", p.className = "demo-btn", p.disabled = l >= t - 1, p.addEventListener("click", () => r(l + 1)), m.appendChild(p), o.appendChild(m);
+  }
+  return e(n), {
+    root: o,
+    update(d) {
+      e(d);
+    }
+  };
+}
+function U(n, o, e = 64, d = 64) {
+  const t = document.createElement("canvas");
+  t.width = 128, t.height = 128;
+  const a = t.getContext("2d");
+  if (a.fillStyle = o, a.fillRect(0, 0, 128, 128), n.useImage && n.image) {
+    const c = n.fullBleed ? 0 : 14;
+    I(a, n.image, c, c, 128 - c * 2, 128 - c * 2, n.fitMode);
+  }
+  return t.className = "demo-thumb", t.style.width = `${e}px`, t.style.height = `${d}px`, t;
+}
+function Z(n) {
+  const { label: o, slot: e, bgColor: d, showFitControls: t, canvasWidth: a, canvasHeight: c, onChanged: r } = n, i = a ?? 512, h = c ?? 512, l = document.createElement("div");
+  l.className = "demo-card";
+  const f = document.createElement("div");
+  f.className = "demo-card-row", f.appendChild(U(e, d));
+  const m = document.createElement("div");
+  m.className = "demo-card-body";
+  const b = document.createElement("div");
+  b.className = "demo-card-label", b.textContent = o, m.appendChild(b);
+  const C = document.createElement("div");
+  if (C.className = "demo-card-controls", t) {
+    const s = document.createElement("select");
+    s.className = "demo-select demo-select--mini";
+    for (const w of ["contain", "cover", "fill"]) {
+      const x = document.createElement("option");
+      x.value = w, x.textContent = w.charAt(0).toUpperCase() + w.slice(1), x.selected = w === e.fitMode, s.appendChild(x);
+    }
+    s.addEventListener("change", () => {
+      e.fitMode = s.value, e.image && (e.imageRect = N(e.image, i, h, e.fitMode, e.fullBleed)), r();
+    }), C.appendChild(s);
+    const u = document.createElement("label");
+    u.className = "demo-inline-label";
+    const v = document.createElement("input");
+    v.type = "checkbox", v.checked = e.fullBleed, v.className = "demo-checkbox--sm", v.addEventListener("change", () => {
+      e.fullBleed = v.checked, e.image && (e.imageRect = N(e.image, i, h, e.fitMode, e.fullBleed)), r();
+    }), u.appendChild(v), u.appendChild(document.createTextNode("Bleed")), C.appendChild(u);
+  }
+  const g = document.createElement("button");
+  g.type = "button", g.textContent = "Clear", g.className = "demo-btn", g.addEventListener("click", () => {
+    M(e), r();
+  }), C.appendChild(g), m.appendChild(C);
+  const p = document.createElement("input");
+  return p.type = "file", p.accept = "image/*", p.className = "demo-file-input", p.addEventListener("change", () => {
+    var s;
+    S(((s = p.files) == null ? void 0 : s[0]) ?? null).then((u) => {
+      u && (e.objectUrl && URL.revokeObjectURL(e.objectUrl), e.objectUrl = u.objectUrl, e.image = u.image, e.useImage = !0, e.imageRect = N(u.image, i, h, e.fitMode, e.fullBleed), r());
+    });
+  }), m.appendChild(p), f.appendChild(m), l.appendChild(f), l;
+}
+async function q(n, o) {
+  if (!o) return;
+  n.objectUrl && URL.revokeObjectURL(n.objectUrl);
+  const e = await S(o);
+  e && (n.objectUrl = e.objectUrl, n.image = e.image, n.useImage = !0);
+}
+export {
+  j as FONT_OPTIONS,
+  Q as PX_PER_UNIT,
+  A as addCheckbox,
+  O as addCollapseToggle,
+  z as addColor,
+  W as addSectionTitle,
+  G as addSelect,
+  $ as addSlider,
+  M as clearImageSlot,
+  D as createDefaultTextBlock,
+  X as createDemoInteraction,
+  Y as createDemoPanel,
+  _ as createDemoScene,
+  H as createImageSlot,
+  Z as createImageSlotCard,
+  V as createPageNavigation,
+  ee as createPageTexture,
+  te as drawImageWithFit,
+  ne as loadImage,
+  q as loadImageFromFile,
+  T as resolvePageIndex,
+  F as toBookDirection
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectifthunes/three-book",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -9,16 +9,22 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./demo.css": "./demo.css"
+    "./demo.css": "./demo.css",
+    "./demo-kit": {
+      "import": "./demo-kit/dist/index.js",
+      "types": "./demo-kit/dist/index.d.ts"
+    }
   },
   "files": [
     "dist",
-    "demo.css"
+    "demo.css",
+    "demo-kit/dist"
   ],
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
+    "build:demo-kit": "cd demo-kit && vite build",
     "typecheck": "tsc --noEmit",
-    "prepack": "pnpm run build"
+    "prepack": "pnpm run build && pnpm run build:demo-kit"
   },
   "peerDependencies": {
     "three": ">=0.150.0"