1 line
21 KiB
Plaintext
1 line
21 KiB
Plaintext
|
{"version":3,"file":"HTMLMesh.cjs","sources":["../../src/interactive/HTMLMesh.js"],"sourcesContent":["import { CanvasTexture, LinearFilter, Mesh, MeshBasicMaterial, PlaneGeometry, Color } from 'three'\n\nclass HTMLMesh extends Mesh {\n constructor(dom) {\n const texture = new HTMLTexture(dom)\n\n const geometry = new PlaneGeometry(texture.image.width * 0.001, texture.image.height * 0.001)\n const material = new MeshBasicMaterial({ map: texture, toneMapped: false, transparent: true })\n\n super(geometry, material)\n\n function onEvent(event) {\n material.map.dispatchDOMEvent(event)\n }\n\n this.addEventListener('mousedown', onEvent)\n this.addEventListener('mousemove', onEvent)\n this.addEventListener('mouseup', onEvent)\n this.addEventListener('click', onEvent)\n\n this.dispose = function () {\n geometry.dispose()\n material.dispose()\n\n material.map.dispose()\n\n canvases.delete(dom)\n\n this.removeEventListener('mousedown', onEvent)\n this.removeEventListener('mousemove', onEvent)\n this.removeEventListener('mouseup', onEvent)\n this.removeEventListener('click', onEvent)\n }\n }\n}\n\nclass HTMLTexture extends CanvasTexture {\n constructor(dom) {\n super(html2canvas(dom))\n\n this.dom = dom\n\n this.anisotropy = 16\n if ('colorSpace' in this) this.colorSpace = 'srgb'\n else this.encoding = 3001 // sRGBEncoding\n this.minFilter = LinearFilter\n this.magFilter = LinearFilter\n\n // Create an observer on the DOM, and run html2canvas update in the next loop\n const observer = new MutationObserver(() => {\n if (!this.scheduleUpdate) {\n // ideally should use xr.requestAnimationFrame, here setTimeout to avoid passing the renderer\n this.scheduleUpdate = setTimeout(() => this.update(), 16)\n }\n })\n\n const config = { attributes: true, childList: true, subtree: true, characterData: true }\n observer.observe(dom, config)\n\n this.observer = observer\n }\n\n dispatchDOMEvent(event) {\n if (event.data) {\n htmlevent(this.dom, event.type, event.data.x, event.data.y)\n }\n }\n\n update() {\n this.image = html2canvas(this.dom)\n this.needsUpdate = true\n\n this.scheduleUpdate = null\n }\n\n dispose() {\n if (this.observer) {\n this.observer.disconnect()\n }\n\n this.scheduleUpdate = clearTimeout(this.scheduleUpdate)\n\n super.dispose()\n }\n}\n\n//\n\nconst canvases = new WeakMap()\n\nfunction html2canvas(element) {\n const range = document.createRange()\n const color = new Color()\n\n function Clipper(context) {\n const clips = []\n let isClipping = false\n\n function doClip() {\n if (isClipping) {\n isClipping = false\n context.restore()\n }\n\n if (clips.length === 0) return\n\n let minX = -Infinity,\n minY = -Infinity\n let maxX = Infinity,\n maxY = Infinity\n\n for (let i = 0; i < clips.length; i++) {\n const clip = clips[i]\n\n minX = Math.max(minX, clip.x)\n minY = Math.max(minY, clip.y)\n maxX = Math.min(maxX, clip.x + clip.width)\n maxY = Math.min(maxY, clip.y + clip.height)\n }\n\n context.save()\n context.beginPath()\n context.rect(minX, minY, maxX - minX, maxY - minY)\n context.clip()\n\n isClipping = true\n }\n\n return {\n add: function (clip) {\n clips.push(clip)\n doClip()\n },\n\n remove: function () {\n clips.pop()\n doClip()\n },\n }\n }\n\n function drawText(style, x, y, string) {\n if (string !== '') {\n if (style.textTransform === 'uppercase') {\n string = string.toUpperCase()\n }\n\n context.font = style.fontWeight + ' ' + style.fontSize + ' ' + style.fontFamily\n context.textBaseline = 'top'\n context.fillStyle = style.color\n context.fillText(string, x, y + parseFloat(style.fontSize) * 0.1)\n }\n }\n\n function buildRectPath(x, y, w, h, r) {\n if (w < 2 * r) r = w / 2\n if (h
|