Browser: Project is null, _currentStyle not being set #110
Description
EDIT: The goal here is to have dynamic word bubbles near a character on the lower right side of an OBS scene to broadcast messages to the viewer. The tail will always be to the right and point to a specific region (the head). I'll want the bubble to appear for variable amounts of time, with successive messages in the same topic appending below it. After a while, I want them to disappear.
I'm using the SkyPack CDN to get the library. It isn't able to get the _currentStyle property from the project object, which I had assumed was being set with the paper.setup call. The exports are coming in, they just don't seem to be working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Bubbles</title>
</head>
<body>
<div id="bubble-container" style="position: relative; height: 600px">
<canvas height="500" width="500"></canvas>
<div class="word-bubble" style="width: 200px; text-align:center; position: absolute; top: 10px; left: 20px;">Hi
there!</div>
</div>
<script type="module">
import paper from 'https://cdn.skypack.dev/paper';
import { Comical, Bubble } from 'https://cdn.skypack.dev/comicaljs';
document.addEventListener("DOMContentLoaded", function () {
// Fetch references to elements
const wrapDiv = document.querySelector('#bubble-container');
const canvas = document.querySelector('canvas');
const bubbleContent = document.querySelector('.word-bubble');
// Initialize Paper.js
paper.setup(canvas);
// Create a new Comical instance
const b = new Bubble(bubbleContent);
// Set the bubble spec
b.setBubbleSpec({
version: "1.0",
style: "speech",
tails: [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }],
level: 1
});
// Initialize the bubble tails
b.tails = [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }];
setTimeout(() => {
// Need a timeout because these functions may need to know the width of the content box
b.initialize();
}, 1000);
});
</script>
</body>
</html>Uncaught TypeError TypeError: Cannot read properties of null (reading '_currentStyle')
at _initialize (cdn.skypack.dev/-/comicaljs@v0.3.95-F7cuAn6396dL6XbR3Pra/dist=es2019,mode=imports/optimized/comicaljs.js:6884:47)
at Group2 (cdn.skypack.dev/-/comicaljs@v0.3.95-F7cuAn6396dL6XbR3Pra/dist=es2019,mode=imports/optimized/comicaljs.js:8191:25)
at Layer2 (cdn.skypack.dev/-/comicaljs@v0.3.95-F7cuAn6396dL6XbR3Pra/dist=es2019,mode=imports/optimized/comicaljs.js:8251:21)
at Bubble3.initializeLayers (cdn.skypack.dev/-/comicaljs@v0.3.95-F7cuAn6396dL6XbR3Pra/dist=es2019,mode=imports/optimized/comicaljs.js:18172:33)
at Bubble3.initialize (cdn.skypack.dev/-/comicaljs@v0.3.95-F7cuAn6396dL6XbR3Pra/dist=es2019,mode=imports/optimized/comicaljs.js:18183:18)
at <anonymous> (c:\dev\obs\public\chat.html:36:19)
--- setTimeout ---
at <anonymous> (c:\dev\obs\public\chat.html:34:13)