Browser: Project is null, _currentStyle not being set #110

manchuwook · 2024-03-21T14:56:47Z

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)

manchuwook · 2024-03-21T16:15:49Z

Even by being more faithful to what is in storybook, still not getting the project:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
    <title>Chat Bubbles</title>
</head>

<body>
    <div id="chat-bubble">

    </div>
    <script type="module">
        import { Comical, Bubble } from 'https://cdn.skypack.dev/comicaljs';
        paper.install(window);

        const wrapDiv = document.createElement("div");
        wrapDiv.style.position = "relative";
        wrapDiv.style.height = "600px";
        const canvas = document.createElement("canvas");
        canvas.height = 500;
        canvas.width = 500;
        wrapDiv.appendChild(canvas);
        paper.setup(canvas);

        const textDiv2 = document.createElement("div");
        textDiv2.innerText =
            "This is a text block meant to represent shouting. It is 200px wide. It has a bit more text to make it squarer.";
        textDiv2.style.width = "200px";
        textDiv2.style.textAlign = "center";
        //textDiv2.style.backgroundColor = "pink";
        textDiv2.style.position = "absolute";
        textDiv2.style.top = "250px";
        textDiv2.style.left = "120px";
        wrapDiv.appendChild(textDiv2);

        const bubble = new Bubble(textDiv2);
        bubble.setBubbleSpec({
            version: "1.0",
            style: "shout",
            tails: [{ tipX: 420, tipY: 400, midpointX: 320, midpointY: 375 }],
            level: 1
        });
        setTimeout(() => {
            bubble.initialize();
        }, 200);

        document.getElementById("chat-bubble").appendChild(wrapDiv);
    </script>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser: Project is null, _currentStyle not being set #110

Browser: Project is null, _currentStyle not being set #110

manchuwook commented Mar 21, 2024 •

edited

Loading

manchuwook commented Mar 21, 2024

Browser: Project is null, _currentStyle not being set #110

Browser: Project is null, _currentStyle not being set #110

Comments

manchuwook commented Mar 21, 2024 • edited Loading

manchuwook commented Mar 21, 2024

manchuwook commented Mar 21, 2024 •

edited

Loading