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)?
One approach for an input field at the canvas without PixiJS UI, just with HTML, JavaScript and CSS is this:
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>
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 ...
copied Input.js to MyInput.js,
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';
removed the previous variables that were defined in the head (pixi_js, typedSignals and view) from the whole MyInput.js file.
added this import in my application code: import { MyInput as MyInput } from './MyInput.js';