javascriptpixi.js

How to create an input field at PixiJS Canvas (implicit: Import/export between PixiJS UI and typed-signals)


My target is to use PixiJS UI (version 2.1.2) to place an input field at a canvas that is drawn by PixiJS (version 8.2.0).

The part with just PixiJS works fine, but I don't get the import for @pixi/ui to run. The Firefox says this: "Uncaught SyntaxError: ambiguous indirect export: Signal" and the Chromium says this: SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal' (at pixi-ui.mjs:9:209) with this line highlighted: import {Signal as v} from "typed-signals";.

For the library "typed-signals" (version 2.5.0) there is only a file index.js and index.d.ts, but no index.mjs with explicit export statements.

As far as I understand the import/export topic in JavaScript, a workaround could be to write an index.mjs with re-export statements on my own. But I guess that it's not the intended way of getting this to work.

This is my JavaScript code:

import { Application as Application, Text as Text } from 'pixi.js';
import { Input as Input } from '@pixi/ui';

(async () => {
// Draw a green canvas
const app = new Application();
await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 })
document.body.appendChild(app.canvas);

// Create an input field
const input = new Input({/*some options*/});
// [...] Place the input and do some other stuff
})();

And this is my HTML code with the importmap:

<!doctype html>
<html>
<head>
<script type="importmap">
{"imports": {
    "pixi.js": "http://127.0.0.1:8080/public/node_modules/pixi.js/dist/pixi.mjs",
    "eventemitter3": "http://127.0.0.1:8080/public/node_modules/eventemitter3/dist/eventemitter3.esm.js",
    "earcut": "http://127.0.0.1:8080/public/node_modules/earcut/dist/earcut.min.js",
    "@pixi/colord": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/index.mjs",
    "@pixi/colord/plugins/names": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/plugins/names.mjs",
    "@xmldom/xmldom": "http://127.0.0.1:8080/public/node_modules/@xmldom/xmldom/lib/index.js",
    "parse-svg-path": "http://127.0.0.1:8080/public/node_modules/parse-svg-path/index.js",
    "ismobilejs": "http://127.0.0.1:8080/public/node_modules/ismobilejs/esm/index.js",
    "tweedle.js": "http://127.0.0.1:8080/public/node_modules/tweedle.js/dist/tweedle.es.js",
    "typed-signals": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/node_modules/typed-signals/dist/index.js",
    "@pixi/ui": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/dist/pixi-ui.mjs"
}}
</script>
</head>
<body>
<script src="myCanvasApp.js" type="module"></script>
</body>
</html>

The JavaScript libraries I got via npm install [library name]. It seems that @pixi/ui brings its own "typed-signals" (within a subfolder) so that "typed-signals" is not in the latest version 3.0.0 but in version 2.5.0. My importmap regards this.

Any idea how I can get the import/export between PixiJS UI and typed-signals set up (... and thereby PixiJS UI to run)?


Solution

  • One approach for an input field at the canvas without PixiJS UI, just with HTML, JavaScript and CSS is this:

    1. Define an HTML container with relative position. Place an input element with absolute position in it: <div id="container" style="position:relative;border-style:solid;border-color:red;"><input id="myinput" style="position:absolute;left:100px;top:200px;z-index:1000;"></input></div>

    2. Place the position of the input field by setting left and top with JavaScript. To demonstrate this, the following snippet changes the position every second: import { Application as Application } from 'pixi.js'; (async () => { const app = new Application(); await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 }); let canvas = app.canvas; document.getElementById('container').appendChild(canvas);setInterval(() => {let i1 = document.getElementById('myinput'); i1.style.left=Math.round(Math.random()*canvas.clientWidth)+"px"; i1.style.top=Math.round(Math.random()*canvas.clientHeight)+"px"; }, 1000); })();


    As another approach (or more a workaround to get an input field at the canvas with PixiJS UI while not finding the import/export failure), I ...

    1. copied Input.js to MyInput.js,

    2. modified the following three head lines in MyInput.js:

      import { Container as Container, Graphics as Graphics, isMobile as isMobile, Ticker as Ticker, Text as Text, Sprite as Sprite, Texture as Texture, NineSliceSprite as NineSliceSprite } from 'pixi.js'; // var typedSignals = require('typed-signals'); import { getView as getView } from 'view.mjs';

    3. removed the previous variables that were defined in the head (pixi_js, typedSignals and view) from the whole MyInput.js file.

    4. added this import in my application code: import { MyInput as MyInput } from './MyInput.js';