3D viewer overhaul: full-bleed + responsive, Web Worker STEP parse, progress bar, caption stats, inline models in text notes, STL fix, app widget; weekday dates (dateText); fix shields badge escaping; docs + licenses
This commit is contained in:
trilium-share-gruvbox
@@ -0,0 +1,306 @@
|
||||
import { defineWidget, useNoteContext, useEffect, useRef } from "trilium:preact";
|
||||
|
||||
const THREE_JS = "api/notes/__THREE_ID__/download";
|
||||
const ORBIT_JS = "api/notes/__THREE_ORBIT_ID__/download";
|
||||
const STL_JS = "api/notes/__THREE_STL_ID__/download";
|
||||
const OCCT_JS = "api/notes/__OCCT_JS_ID__/download";
|
||||
const OCCT_WASM = "api/notes/__OCCT_WASM_ID__/download";
|
||||
const WORKER_URL = "api/notes/__3D_WORKER_ID__/download";
|
||||
|
||||
const STEP_PARAMS = { linearDeflection: 0.0002, angularDeflection: 0.1 };
|
||||
|
||||
const WORKER_ABS = new URL(WORKER_URL, location.href).href;
|
||||
const OCCT_JS_ABS = new URL(OCCT_JS, location.href).href;
|
||||
const OCCT_WASM_ABS = new URL(OCCT_WASM, location.href).href;
|
||||
|
||||
function formatBytes(n) {
|
||||
if (n >= 1048576) return (n / 1048576).toFixed(1) + " MB";
|
||||
if (n >= 1024) return (n / 1024).toFixed(1) + " KB";
|
||||
return n + " B";
|
||||
}
|
||||
function formatCount(n) {
|
||||
n = Math.round(n);
|
||||
if (n >= 1000000) return (n / 1000000).toFixed(2) + "M";
|
||||
if (n >= 1000) return (n / 1000).toFixed(1) + "k";
|
||||
return String(n);
|
||||
}
|
||||
function loadScript(src, cb) {
|
||||
var s = document.createElement("script");
|
||||
s.src = src;
|
||||
s.onload = cb;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
function fetchProgress(url, onProgress) {
|
||||
return fetch(url).then(function (r) {
|
||||
if (!r.ok) throw new Error("fetch " + r.status);
|
||||
var total = parseInt(r.headers.get("Content-Length") || "0", 10);
|
||||
var reader = r.body.getReader();
|
||||
var chunks = [];
|
||||
var received = 0;
|
||||
function pump() {
|
||||
return reader.read().then(function (res) {
|
||||
if (res.done) {
|
||||
var buf = new Uint8Array(received);
|
||||
var off = 0;
|
||||
chunks.forEach(function (c) { buf.set(c, off); off += c.length; });
|
||||
return buf.buffer;
|
||||
}
|
||||
chunks.push(res.value);
|
||||
received += res.value.length;
|
||||
if (total) onProgress(received / total);
|
||||
return pump();
|
||||
});
|
||||
}
|
||||
return pump();
|
||||
});
|
||||
}
|
||||
|
||||
let styleInjected = false;
|
||||
function injectStyle() {
|
||||
if (styleInjected) return;
|
||||
styleInjected = true;
|
||||
var st = document.createElement("style");
|
||||
st.textContent = [
|
||||
".model-viewer { position: relative; box-sizing: border-box; width: 100%; margin: 1em 0; background: #1d2021; border: 1px solid #504945; border-radius: 8px; overflow: hidden; }",
|
||||
".model-viewer-data { position: absolute; top: 8px; right: 10px; z-index: 3; display: none; font-size: 0.75em; color: #a89984; background: rgba(40,40,40,0.8); border: 1px solid #504945; border-radius: 6px; padding: 2px 10px; font-variant-numeric: tabular-nums; pointer-events: none; }",
|
||||
".model-viewer-canvas { position: relative; width: 100%; height: min(70vh, 900px); min-height: 420px; }",
|
||||
".model-viewer-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 48px; box-sizing: border-box; color: #a89984; font-size: 0.9em; }",
|
||||
".model-viewer-status.error { color: #fb4934; }",
|
||||
".model-viewer-progress { position: absolute; left: 0; right: 0; bottom: 40px; height: 6px; width: min(60%, 480px); margin: 0 auto; background: #3c3836; border-radius: 3px; overflow: hidden; }",
|
||||
".model-viewer-progress-fill { height: 100%; width: 0; background: #b8bb26; border-radius: 3px; transition: width 150ms ease; }",
|
||||
".model-viewer-progress-fill.indeterminate { width: 40%; animation: model-progress 1.1s ease-in-out infinite; }",
|
||||
"@keyframes model-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }",
|
||||
".model-viewer-hint { position: absolute; top: 8px; left: 10px; font-size: 0.75em; color: #a89984; z-index: 2; pointer-events: none; }",
|
||||
".model-viewer-caption { font-size: 0.85em; font-style: italic; color: #a89984; text-align: center; padding: 4px 12px; background: #1d2021; border-top: 1px solid #504945; }",
|
||||
".model-viewer canvas { display: block; width: 100%; height: 100%; }"
|
||||
].join("\n");
|
||||
document.head.appendChild(st);
|
||||
}
|
||||
|
||||
const cleaners = new Map();
|
||||
|
||||
function makeViewer(name) {
|
||||
var box = document.createElement("div");
|
||||
box.className = "model-viewer";
|
||||
var wrap = document.createElement("div");
|
||||
wrap.className = "model-viewer-canvas";
|
||||
var status = document.createElement("div");
|
||||
status.className = "model-viewer-status";
|
||||
status.textContent = "Loading 3D model\u2026";
|
||||
var progress = document.createElement("div");
|
||||
progress.className = "model-viewer-progress";
|
||||
var fill = document.createElement("div");
|
||||
fill.className = "model-viewer-progress-fill";
|
||||
progress.appendChild(fill);
|
||||
var data = document.createElement("div");
|
||||
data.className = "model-viewer-data";
|
||||
wrap.appendChild(status);
|
||||
wrap.appendChild(progress);
|
||||
box.appendChild(data);
|
||||
box.appendChild(wrap);
|
||||
var cap = document.createElement("div");
|
||||
cap.className = "model-viewer-caption";
|
||||
cap.textContent = name;
|
||||
box.appendChild(cap);
|
||||
return box;
|
||||
}
|
||||
|
||||
function initViewer(el, url, ext) {
|
||||
var isStep = /\.(step|stp)$/i.test(ext);
|
||||
var fileSize = null;
|
||||
var raf = 0;
|
||||
var renderer = null;
|
||||
var resizeObs = null;
|
||||
|
||||
function setStatus(text) {
|
||||
var s = el.querySelector(".model-viewer-status");
|
||||
if (s) s.textContent = text;
|
||||
}
|
||||
function setProgress(percent) {
|
||||
var bar = el.querySelector(".model-viewer-progress-fill");
|
||||
if (!bar) return;
|
||||
if (typeof percent === "number") {
|
||||
bar.classList.remove("indeterminate");
|
||||
bar.style.width = Math.round(percent * 100) + "%";
|
||||
} else {
|
||||
bar.classList.add("indeterminate");
|
||||
bar.style.width = "";
|
||||
}
|
||||
}
|
||||
function onError(msg) {
|
||||
var s = el.querySelector(".model-viewer-status");
|
||||
if (s) { s.textContent = msg || "Could not load 3D model."; s.classList.add("error"); }
|
||||
setProgress(0);
|
||||
}
|
||||
function showData(extra) {
|
||||
var d = el.querySelector(".model-viewer-data");
|
||||
if (d) {
|
||||
var parts = [];
|
||||
if (fileSize) parts.push(formatBytes(fileSize));
|
||||
if (extra) parts.push(extra);
|
||||
if (parts.length) { d.textContent = parts.join(" \u00b7 "); d.style.display = "block"; }
|
||||
}
|
||||
var cap = el.querySelector(".model-viewer-caption");
|
||||
if (cap && extra) {
|
||||
var stats = [];
|
||||
if (fileSize) stats.push(formatBytes(fileSize));
|
||||
stats.push(extra);
|
||||
var name = cap.getAttribute("data-model-name");
|
||||
if (!name) { name = (cap.textContent || "").trim(); cap.setAttribute("data-model-name", name); }
|
||||
cap.textContent = (name ? name + " \u00b7 " : "") + stats.join(" \u00b7 ");
|
||||
}
|
||||
}
|
||||
|
||||
function loadThree(cb) {
|
||||
if (window.THREE && window.THREE.OrbitControls) { cb(); return; }
|
||||
loadScript(THREE_JS, function () {
|
||||
loadScript(ORBIT_JS, function () {
|
||||
if (isStep) { cb(); return; }
|
||||
if (window.THREE.STLLoader) { cb(); return; }
|
||||
loadScript(STL_JS, cb);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setProgress(null);
|
||||
setStatus("Loading 3D libraries\u2026");
|
||||
|
||||
loadThree(function () {
|
||||
var wrap = el.querySelector(".model-viewer-canvas") || el;
|
||||
function canvasSize() {
|
||||
return { w: wrap.clientWidth || el.clientWidth || 400, h: wrap.clientHeight || 420 };
|
||||
}
|
||||
var initSize = canvasSize();
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(initSize.w, initSize.h);
|
||||
renderer.setClearColor(0x1d2021, 1);
|
||||
var scene = new THREE.Scene();
|
||||
var camera = new THREE.PerspectiveCamera(45, initSize.w / initSize.h, 0.1, 1000000);
|
||||
camera.position.set(300, 220, 320);
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.55));
|
||||
var dir = new THREE.DirectionalLight(0xffffff, 1.0); dir.position.set(1, 1.5, 1); scene.add(dir);
|
||||
var back = new THREE.DirectionalLight(0xffffff, 0.35); back.position.set(-1, -0.5, -1); scene.add(back);
|
||||
var controls = new THREE.OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
var group = new THREE.Group();
|
||||
scene.add(group);
|
||||
resizeObs = new ResizeObserver(function () {
|
||||
var s = canvasSize();
|
||||
if (!s.w || !s.h) return;
|
||||
renderer.setSize(s.w, s.h);
|
||||
camera.aspect = s.w / s.h;
|
||||
camera.updateProjectionMatrix();
|
||||
});
|
||||
resizeObs.observe(wrap);
|
||||
function animate() { raf = requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }
|
||||
animate();
|
||||
function fit() {
|
||||
var box = new THREE.Box3().setFromObject(group);
|
||||
if (box.isEmpty()) return;
|
||||
var size = box.getSize(new THREE.Vector3()).length() || 1;
|
||||
var center = box.getCenter(new THREE.Vector3());
|
||||
var d = size * 2.4;
|
||||
camera.position.set(center.x + d * 0.9, center.y + d * 0.6, center.z + d);
|
||||
controls.target.copy(center);
|
||||
controls.update();
|
||||
}
|
||||
function showCanvas() {
|
||||
wrap.innerHTML = "";
|
||||
wrap.appendChild(renderer.domElement);
|
||||
var hint = document.createElement("div");
|
||||
hint.className = "model-viewer-hint";
|
||||
hint.textContent = "Drag to rotate \u00b7 scroll to zoom";
|
||||
wrap.appendChild(hint);
|
||||
}
|
||||
|
||||
setStatus("Downloading model\u2026");
|
||||
fetchProgress(url, function (p) { setProgress(p); }).then(function (buf) {
|
||||
fileSize = buf.byteLength;
|
||||
showData();
|
||||
var data = new Uint8Array(buf);
|
||||
if (isStep) {
|
||||
setStatus("Downloading STEP parser\u2026");
|
||||
setProgress(null);
|
||||
fetchProgress(OCCT_WASM_ABS, function () {}).then(function (wasmBuf) {
|
||||
setStatus("Parsing STEP\u2026");
|
||||
setProgress(null);
|
||||
var t0 = Date.now();
|
||||
var parseTimer = setInterval(function () { setStatus("Parsing STEP\u2026 (" + Math.round((Date.now() - t0) / 1000) + "s)"); }, 1000);
|
||||
var worker = new Worker(WORKER_ABS);
|
||||
var settled = false;
|
||||
worker.onmessage = function (e) {
|
||||
if (e.data.type === "ready") {
|
||||
worker.postMessage({ type: "parse", data: data, params: STEP_PARAMS }, [data.buffer]);
|
||||
} else if (e.data.type === "done") {
|
||||
settled = true; worker.terminate(); clearInterval(parseTimer);
|
||||
if (!e.data.success) { onError("Could not parse STEP file."); return; }
|
||||
var tris = 0;
|
||||
(e.data.meshes || []).forEach(function (m) {
|
||||
var geo = new THREE.BufferGeometry();
|
||||
geo.setAttribute("position", new THREE.Float32BufferAttribute(m.position, 3));
|
||||
if (m.index) geo.setIndex(m.index);
|
||||
geo.computeVertexNormals();
|
||||
var color = m.color && m.color.length === 3 ? new THREE.Color(m.color[0], m.color[1], m.color[2]) : null;
|
||||
var mat = new THREE.MeshStandardMaterial({ color: color || 0xb8bb26, metalness: 0.2, roughness: 0.6, side: THREE.DoubleSide, flatShading: true });
|
||||
group.add(new THREE.Mesh(geo, mat));
|
||||
tris += geo.index ? geo.index.count / 3 : geo.attributes.position.count / 3;
|
||||
});
|
||||
fit();
|
||||
showCanvas();
|
||||
showData(formatCount(tris) + " triangles");
|
||||
} else if (e.data.type === "error") {
|
||||
settled = true; worker.terminate(); clearInterval(parseTimer);
|
||||
onError(e.data.message || "Could not parse STEP file.");
|
||||
}
|
||||
};
|
||||
worker.onerror = function (e) {
|
||||
if (!settled) { settled = true; worker.terminate(); clearInterval(parseTimer); onError("STEP worker error: " + (e && e.message || "unknown")); }
|
||||
};
|
||||
worker.postMessage({ type: "loadLib", libUrl: OCCT_JS_ABS, wasm: new Uint8Array(wasmBuf) }, [wasmBuf]);
|
||||
}).catch(function () { onError("Could not download STEP parser."); });
|
||||
} else {
|
||||
var geo = new THREE.STLLoader().parse(data.buffer);
|
||||
geo.computeVertexNormals();
|
||||
var mat = new THREE.MeshStandardMaterial({ color: 0xb8bb26, metalness: 0.25, roughness: 0.55, flatShading: true });
|
||||
group.add(new THREE.Mesh(geo, mat));
|
||||
fit();
|
||||
showCanvas();
|
||||
showData(formatCount(geo.index ? geo.index.count / 3 : geo.attributes.position.count / 3) + " triangles");
|
||||
}
|
||||
}).catch(function () { onError("Could not load 3D model."); });
|
||||
});
|
||||
|
||||
return function cleanup() {
|
||||
cancelAnimationFrame(raf);
|
||||
try { if (resizeObs) resizeObs.disconnect(); } catch (e) {}
|
||||
try { if (renderer) renderer.dispose(); } catch (e) {}
|
||||
};
|
||||
}
|
||||
|
||||
function ModelViewer({ note }) {
|
||||
const ref = useRef(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
injectStyle();
|
||||
if (cleaners.has(el)) { cleaners.get(el)(); cleaners.delete(el); }
|
||||
el.innerHTML = "";
|
||||
const m = (note.title || "").match(/\.(stl|step|stp)$/i);
|
||||
if (!m) return;
|
||||
const box = makeViewer(note.title.trim());
|
||||
el.appendChild(box);
|
||||
cleaners.set(el, initViewer(box, "api/notes/" + note.noteId + "/download", m[0]));
|
||||
}, [note.noteId]);
|
||||
return <div ref={ref} />;
|
||||
}
|
||||
|
||||
export default defineWidget({
|
||||
parent: "note-detail-pane",
|
||||
position: 10,
|
||||
render: () => {
|
||||
const { note } = useNoteContext();
|
||||
const title = note ? note.title : null;
|
||||
if (!note || note.type !== "file" || !title || !/\.(stl|step|stp)$/i.test(title)) return null;
|
||||
return <ModelViewer note={note} />;
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user