rdkcentral / lightning Goto Github PK
View Code? Open in Web Editor NEWLightning - The WPE UI Framework for developing Apps and UX
License: Apache License 2.0
Lightning - The WPE UI Framework for developing Apps and UX
License: Apache License 2.0
Per documentation, .fireAncestors
is a way to send a signal to a parent component.
However, if a method with the same name exists on the component that is emitting the fireAncestors, that one is called instead (and the method on the parent is not called).
Example to reproduce:
export default class Foo extends lng.Component {
static _template() {
return {
w: 1920,
h: 1080,
rect: true,
}
}
_init() {
this.fireAncestors('$bar')
}
$bar() {
console.log('I get called, but I would expect $bar on my (distant) **parent** component to be called')
}
}
Hello Team, could you tell me, does your internal Player component supports Secure Smooth/Dash Streaming using PlayReady/Widevine DRM?
@thiblahute @Ms2ger @basvanmeurs @clopez
thanks
Hi,
I've experienced some issues with the mount
property:
export default class App extends ux.App {
static _template() {
return {
Header: {
rect: true,
w: 1920,
h: 50,
color: 0xff005500,
Title: {
x: w => w - 50,
y: 30,
mountX: 1,
mountY: 0.5, text: { text: 'Header' }
}
}
}
}
}
If I have this code, it renders like this:
If I add the same code to the live demo (or in a component within a project), it renders as expected (please notice window.innerWidth
, since the demo panel is smaller than 1920!):
class LiveDemo extends lng.Application {
static _template() {
return {
Header: {
rect: true,
w: window.innerWidth,
h: 50,
color: 0xff005500,
Title: {
x: w => w - 50,
y: 30,
mountX: 1,
mountY: 0.5, text: { text: 'Header' }
}
}
}
};
}
Thanks!
Hello!
To implement carousel i have used List Component.
And now I want to implement pagination on List Component.
For instance, when user is focused on last carousel item, next items should be loaded and added to List Component.
Is such functionality is present on List Component ?
If yes, could you provide an example ?
When I rollup the project - the folliong circular dependencies are called out -
(!) Circular dependency: node_modules/wpe-lightning/src/tree/Element.mjs -> node_modules/wpe-lightning/src/animation/Transition.mjs -> node_modules/wpe-lightning/src/tree/Element.mjs
(!) Circular dependency: node_modules/wpe-lightning/src/renderer/webgl/shaders/GrayscaleShader.mjs -> node_modules/wpe-lightning/src/renderer/c2d/shaders/GrayscaleShader.mjs -> node_modules/wpe-lightning/src/renderer/webgl/shaders/GrayscaleShader.mjs
Would it be possible to get these cleaned up?
Ran across this comment inside of StateMachine.mjs:
static _getStateName(state) {
const name = state.name;
const index = name.indexOf('$');
if (index > 0) {
// Strip off rollup name suffix.
return name.substr(0, index);
}
return name;
}
Also does this prevent using minification tools that change method/class names? - if so can you provide documentation on some of these constraints around consuming library?
I am rendering a list component that is image intensive - I noticed that the image textures do not force a download until the image is very close to on screen.
Example - if I have 21 image textures created in the list, with 7 on screen and the 11th item in the center of the list - leaving 14 offscreen. only 9 images will be retrieved.
This is ok for single item page, but multiple item pages causes lag in image download and render and overall poor ux. is it possible to force offscreen image texture to load to see if this ux can be improved?
In NodePlatform, line 69, this.parseImage(buf, cb);
=> this
does not refers to the right context as the function is executed into an anonymous callback.
BugFix
Index: src/platforms/node/NodePlatform.mjs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/platforms/node/NodePlatform.mjs (revision 3b8d35609b32aed8022d2c8f3acb8370822dd46d)
+++ src/platforms/node/NodePlatform.mjs (revision )
@@ -55,7 +55,7 @@
mod = http;
}
- mod.get(src, function(res) {
+ mod.get(src, (res) => {
if (res.statusCode !== 200) {
return cb(new Error("Status code " + res.statusCode + " for " + src));
}
Hello,
The following code illustrates the problem, which looks like as a regression since lightning.
const lng = require('../../../dist/lightning-node');
let titles = ["Batman", "Inception"];
class TextOpacity extends lng.Application {
static _template() {
return {
Title: {
text: {text: titles[0], fontSize: 100}
}
}
}
}
const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000}};
options.stage.window = {title: "Text Opacity", fullscreen: false};
const app = new TextOpacity(options);
let i = 0;
setInterval(() => {
let k = i++ % titles.length;
let title = titles[k];
let titleView = app.tag("Title");
titleView.text = { text: title };
titleView.alpha = k; // when alpha is equal to 0, the text is not changed
if (k > 0) {
console.log(title);
}
}, 250);
The displayed text should be "Batman" then "Inception", while it stays as "Batman".
Hello Team!
Could you explain how can I use external libraries inside App (ex. import redux from 'redux' will give an error)?
And how can I minify and uglify code using 'npm run release-web'?
Because if I use webpack, it creates build, adding: lightning-web.js, and ux.js (like in init.js inside dist/web) and after that, this._setState doesn't work.
Please, share an example.
@thiblahute @Ms2ger @basvanmeurs @clopez @kuscsik
I found that when adding a child using the add()
method with an object literal, the ref
key seems to be ignored / not updated. When overwriting the childrens
array directly, the ref
is honoured.
Example to reproduce:
let view = {
ref: 'Home',
type: Home,
}
this.tag('Content').add(view)
console.log('get by ref', this.getByRef(view.ref)) // returns undefined
console.log('tag', this.tag(view.ref)) // returns StateMachineRouter
Expected behaviour: this.getByRef(view.ref)
to return the StateMachineRouter as well
@basvanmeurs @thiblahute @Ms2ger @clopez @kuscsik
CORS error while loading images from S3 bucket.
Access to XMLHttpRequest at 'https://s3-eu-west-1.amazonaws.com/xxxxxx.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
texture load error Image load error https://s3-eu-west-1.amazonaws.com/xxxxxx.jpg onError @ lightning-web.js:3077 (anonymous) @ lightning-web.js:2957 image.onError @ lightning-web.js:13425 error @ lightning-web.js:13153 error @ lightning-web.js:13104 _worker.onmessage @ lightning-web.js:13083
Since change 701b5f8, the following example is broken with the following error:
return window.FontFace && (fontFace instanceof window.FontFace) && (!isLoaded || (fontFace.status === "loaded"));
^
ReferenceError: window is not defined
at Function._isFontFace (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3678:9)
at TextTextureRenderer._load (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3682:33)
at TextTextureRenderer.draw (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3691:34)
at TextureSource.loader (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:4416:32)
at TextureSource.load (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:633:35)
at TextureSource.becomesUsed (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:587:14)
at TextureSource.incActiveTextureCount (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:535:18)
at TextTexture.becomesUsed (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3268:25)
at TextTexture.incWithinBoundsCount (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3254:18)
at View._enableWithinBoundsMargin (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:6496:32)
`const lng = require('../../../dist/lightning-node');
let titles = ["Batman", "Inception"];
class TextOpacity extends lng.Application {
static _template() {
return {
Title: {
text: {text: titles[0], fontSize: 100}
}
}
}
}
const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000}};
options.stage.window = {title: "Text Opacity", fullscreen: false};
const app = new TextOpacity(options);`
There were a couple issues we had while trying to run Lightning on a couple of different platforms that are on older browser engines, like LG WebOS 2 and Playstation 4.
WebGLTexture
and createImageBitmap
is undefined for PS4. We've had to polyfill createImageBitmap
using something like:
if (!('createImageBitmap' in window)) {
window.createImageBitmap = async function(blob) {
return new Promise((resolve, reject) => {
const img = document.createElement('img');
img.addEventListener('load', function() {
resolve(this);
});
img.src = window.URL.createObjectURL(blob);
});
};
}
and we also changed _isNativeTexture
to something like:
_isNativeTexture(source) {
if (Utils.isNode) {
return source.constructor.name === "WebGLTexture";
}
if ('WebGLTexture' in window) {
return source instanceof WebGLTexture;
}
return false;
}
to prevent an exception from occurring.
ImageData
was also missing, and we've polyfilled it using this gist that we found.
Note: Web Workers also will not have the polyfills. So the createImageBitmap
polyfill above will not work! We also lose things like Map
support for older browsers
I'm getting the following error. I tried installing the missing packages and still same issue.
/Lightning$ npm i https://github.com/WebPlatformForEmbedded/Lightning-node.git --save
[email protected] install /repos/Lightning/node_modules/canvas
node-gyp rebuild
Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing pixman-1.pc' to the PKG_CONFIG_PATH environment variable No package 'pixman-1' found gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error:
gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (events.js:196:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Linux 4.15.0-48-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /repos/Lightning/node_modules/canvas
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] license should be a valid SPDX license expression
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/lab/.npm/_logs/2019-05-06T22_01_18_937Z-debug.log
Cool project!
Consider using https://github.com/facebook/yoga for layout. By taking measurements from node-canvas (Cairo), such as measureText
, you can let Yoga figure out a flexbox layout using its fast C library.
Hello team,
could you tell me, if there is any deep-link support (in "deep-link" I mean, open specific element inside the application :
1)Application is closed;
2)Open application via some "link" that contain Series/Show id;
3) Open specific element in application e.g :Films -> Show name -> Specific series)?
It means that you don't see the start screen and application open instantly from a specific element.
Or you have some ideas about how to do it with the Lightning framework?
Hi Team,
We have tried using Lightning with Typescript framework. It would be great if the library supports it by default
As of today WPEUIFramework supports fontStyle but it does not have support for fontWeight. We can pass different font weight values for font styles and that works, but the problem arises when we need to use both font style and font weight. Can we add fontWeight support in the framework ?
Hi,
On the docs, you state that:
In terms of performance, it runs awesome on WebOS and (modern) Tizen
What do you mean by modern Tizen?
I'm trying the demo on a Samsung Smart TV 2015 (Tizen 2.3) and I get only a black screen.
I get a warning on the console:
Can't use image worker because browser does not have createImageBitmap and Web Worker support
I tried to disable image worker and the warning stopped showing, but the result is the same.
Working fine on my computer browser.
What are the minimum requirements? Or is there some settings I could disable to support older browsers?
After updating Lightning to the newest version, it starts to show this error:
WebPlatform.mjs:58 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. at WebPlatform.uploadGlTexture (http://localhost:8080/build/bundle.js:46301:16) at WebGLRenderer.uploadTextureSource (http://localhost:8080/build/bundle.js:47787:29) at TextureManager._nativeUploadTextureSource (http://localhost:8080/build/bundle.js:57290:36) at TextureManager.uploadTextureSource (http://localhost:8080/build/bundle.js:57200:36) at TextureSource.setSource (http://localhost:8080/build/bundle.js:57575:26) at TextureSource.processLoadedSource (http://localhost:8080/build/bundle.js:57546:14) at TextureThrottler._processItem (http://localhost:8080/build/bundle.js:57723:20) at TextureThrottler.processSome (http://localhost:8080/build/bundle.js:57714:22) at Stage.drawFrame (http://localhost:8080/build/bundle.js:56065:31) at lp (http://localhost:8080/build/bundle.js:46290:28)
It seems like lightning is caching the resized image texture and not the original so if the same image is loaded again the resizeMode calculation is off. You can recreate the issue here:
https://webplatformforembedded.github.io/Lightning/docs/renderEngine/textures/clipping
class TextureDemo extends lng.Application {
static _template() {
return {
MyTexture: {
x: 200,
y: 250,
texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png'},
transitions: {
'texture.x': {duration: 4}
}
},
Wrapper: {
rect: true, w: 200, h: 200, color: 0xFFAAAAAA,
Contain: {
x: w=>w/2, y: h=>h/2, mount: 0.5,
texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'contain', w: 200, h: 200}}
}
},
Cover: {
x: 200, y: 0,
texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
}
}
};
_init() {
const myTexture = this.tag("MyTexture");
myTexture.transition('texture.x').on('finish', () => {
const current = myTexture.getSmooth('texture.x');
myTexture.setSmooth('texture.x', current ? 0 : 50);
})
myTexture.setSmooth('texture.x', 50);
// This keeps the image the same as the template
this.patch({
Cover: {
x: 200, y: 0,
texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
}
});
// This does not appear as the same even though the following patch shouldn't change the image's appearance
setTimeout(() => {
this.patch({
Cover: {
x: 200, y: 0,
texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
}
});
}, 1000);
}
}
const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new TextureDemo(options);
document.body.appendChild(app.stage.getCanvas());
Hello, how can I get the width of the text element? I can get the correct value only after the text is rendered on the page.
Hi Team,
I would like to know if z-axis property can be brought in to a lightning component, without using any external library such as three.js .
> [email protected] install /Users/cesalmon/workspace/wtv-lightning/node_modules/canvas
> node-pre-gyp install --fallback-to-build
node-pre-gyp WARN Using needle for node-pre-gyp https download
node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.0.0-alpha.18/canvas-prebuilt-v2.0.0-alpha.18-node-v57-darwin-unknown-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI, unknown) (falling back to source compile with node-gyp)
SOLINK_MODULE(target) Release/canvas-postbuild.node
CXX(target) Release/obj.target/canvas/src/backend/Backend.o
CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
CXX(target) Release/obj.target/canvas/src/backend/SvgBackend.o
CXX(target) Release/obj.target/canvas/src/Backends.o
CXX(target) Release/obj.target/canvas/src/Canvas.o
CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
CXX(target) Release/obj.target/canvas/src/CanvasRenderingContext2d.o
CXX(target) Release/obj.target/canvas/src/closure.o
CXX(target) Release/obj.target/canvas/src/color.o
CXX(target) Release/obj.target/canvas/src/Image.o
../src/Image.cc:203:80: error: expected ';' at end of declaration
unsigned int nBytes = cairo_image_surface_get_stride(surface) * img->height
BugFix
In node-canvas/src/image.cc line 203, add a ';' to the end of the line
I have the fix in hand but I can not create a pull request on node-canvas, dont understand why.
Hello,
I would like to write tests that generate some components using lighting, and to compare the generated component with the expected one.
So I need the ability to take a screen shot of what is rendered, maybe by using glReadPixels
?
If you have any clues would be great !
Thanks
we are using flex layout in our project and the requirement is to focus each item if I click on down arrow.
To focus we are using setIndex()
For list we are using flex :{ direction: 'column }
Expected Behaviour: focus should move to the end of the list
Current Behaviour: list is moving to the focus
Due to this some space is creating at the end of the scroll
Please let me know if there is any solution to fix this issue.
Thanks in advance 👍
Currently when I import Lightning as follow in my modules:
import lng from "wpe-lightning";
export default class MyComponent extends lng.Component {";
...
I end up having to include the entire Lightning library in my final bundle due to the way the index.js and src/lightning.mjs modules come together to export the library as a single object.
It would be helpful if I could specify the imports as follows
import Component from "wpe-lightning";
export default class MyComponent extends Component {";
...
which will allow build tools like rollup and WebPack to treeshake unused parts of the framework out of the final bundle.
Additionally the src/lightning.mjs has side effects occurring, exposing modules individually will allow me to bypass the creation of the global reference
if (Utils.isWeb) {
window.lng = lightning;
}
Hello Team!
Is there a way to know when the image texture has been loaded and pass a callback function ?
Hi
I am trying to setup lightning sdk to run the examples available in the package.
Also , I created a file src/MyApp.js , index.html, generated a package.json inside src folder(without configuring any parameter) and also index.mjs , as mentioned in the documentation available in github.(Code part remains same as given in documentation https://webplatformforembedded.github.io/Lightning/docs/gettingStarted).
I tried running the command "node --experimental-modules index.mjs" in terminal and i got below error:
$ node --experimental-modules index.mjs
(node:16862) ExperimentalWarning: The ESM module loader is experimental.
Error: Module did not self-register.
at Object.Module._extensions..node (internal/modules/cjs/loader.js:717:18)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/home/test/rinee/Lightning/trial/src/node_modules/wpe-webgl/gles2.js:1:75)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
Then I tried removing --experimental-modules and that also failed:
$ node index.mjs
/home/test/rinee/Lightning/trial/src/index.mjs:1
(function (exports, require, module, __filename, __dirname) { import lng from "wpe-lightning-node"; ^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
at startup (internal/bootstrap/node.js:285:19)
Kindly help on this.
I am using node version v10.13.0.
get text() {
if (this.texture && (this.texture instanceof TextTexture)) {
return this.texture.text; // proposed fixed
// return this.texture;
} else {
return undefined;
}
}
I would like to extract state classes into their own file, but the examples all show the state class being declared on the fly and extending this
. Is this a required pattern?
Hi Team,
Is there a support for mouse/magic remote available here? I did not find any reference in the documentation.
Quoted from: https://webplatformforembedded.github.io/Lightning/docs/renderEngine/flexbox
Lightning does not contain the bloated HTML CSS toolbox.
Instead, it only contains the useful Flexbox layout methodology.
The Lightning layout engine has some smart performance optimizations.
However, it is still rather CPU-intensive so it is best used for situations in which the flex items do not often change dimensions.
Q: Is there some performance issues if we have a carousel card if it has resized on focus/unfocus?
The point is that the flex is not used on the card itself but rather on the text items included.
Example:
static _template() {
return {
clipping: true,
mount: 0.5,
BackgroundImage: {
mount: 0.5,
x: (w)=> w / 2,
y: (h) => h / 2
},
Overlay: {
mount: 0.5,
x: (w)=> w / 2,
y: (h) => h / 2,
rect: true,
color: color.overlay.overlay_200
},
TextContainer: {
mount: 0.5,
flex: {
direction: 'column',
alignContent: 'center',
justifyContent: 'center',
paddingTop: 20
},
Title: {
flexItem: {
alignSelf: 'center'
},
text: {
fontSize: 32,
fontFace: 'Medium',
textColor: color.button.text,
textAlign: 'center'
}
},
Underline: {
alpha: 0,
flexItem: {
alignSelf: 'center'
},
rect: true,
w: 120,
h: 4
}
}
};
}
Thank you.
class FlexExample extends lng.Application {
static _template() {
return {
x: 10,
w: 750,
y: 10,
Sample_Wrong:{
w:(w=>w),
h:200,
text:{
text:"STRECHED"
}
},
Sample_Expected:{
y: 50,
w:750,
h:200,
text:{
text:"EXPECTED"
}
}
}
}
}
const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new FlexExample(options);
document.body.appendChild(app.stage.getCanvas());
@thiblahute @Ms2ger @basvanmeurs @clopez @kuscsik
Otherwise running examples with node v8 --experimental-modules will breaks:
$ node --experimental-modules basic-usage.mjs
(node:11793) ExperimentalWarning: The ESM module loader is experimental.
/Users/cesalmon/workspace/wtv-lightning/src/renderer/c2d/C2dTextureTintManager.js:1
(function (exports, require, module, __filename, __dirname) { export default class C2dTextureTintManager {
SyntaxError: Unexpected token export
Here is the patch to fix the problem:
Index: src/renderer/c2d/C2dTextureTintManager.js
===================================================================
--- src/renderer/c2d/C2dTextureTintManager.js (revision 7fdb6962e0c250d478b7219f8dbc4ad73c7b641d)
+++ src/renderer/c2d/C2dTextureTintManager.mjs (revision )
@@ -1,0 +1,0 @@
Index: src/renderer/c2d/C2dRenderer.mjs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/renderer/c2d/C2dRenderer.mjs (revision 7fdb6962e0c250d478b7219f8dbc4ad73c7b641d)
+++ src/renderer/c2d/C2dRenderer.mjs (revision )
@@ -5,7 +5,7 @@
import DefaultShader from "./shaders/DefaultShader.mjs";
import C2dShader from "./C2dShader.mjs";
import Renderer from "../Renderer.mjs";
-import TextureTintManager from "./C2dTextureTintManager.js";
+import TextureTintManager from "./C2dTextureTintManager.mjs";
export default class C2dRenderer extends Renderer {
Source:
View.prototype.removeTag = function(tag) {
oRemoveTag.apply(this, arguments);
if (tag) {
this.view.dhtml().classList.remove(tag); >>> this.view is undefined <<<
}
};
Type Error at runtime:
Uncaught (in promise) TypeError: Cannot read property 'dhtml' of undefined
at View.removeTag (inspect.js:307)
at View.setTags (wpe_u.js:3898)
at View.set (wpe_u.js:4722)
at View.set (wpe_u.js:3991)
at defaultSetter (wpe_u.js:380)
at Function.patchObjectProperty (wpe_u.js:402)
at View.patch (wpe_u.js:4997)
When the View is clipped, it works: Text and Background are clipped.
As soon as I rotate my View, it looks like the clipping does not work anymore: I see the Text and Background rotated but not clipped.
//$ node --experimental-modules rotate.mjs
import lng from "../../lightning.mjs"
let width = 120;
let height = 120;
class Rotation extends lng.Application {
static _template() {
return {
Screen: {
w: 800,
h: 600,
x: 200,
y: 200,
Border: {
w: width, h: height, type: lng.components.BorderComponent, colorBorder: 0xFF0000FF
},
View: {
w: width, h: height,
Background: {
rect : true,
w: width + 100, h: height + 100,
x: 30,y: 30,
color: 0xFFFF0000
},
Title: {
text: {text: "Hello", fontSize: 100}
},
rotation: Math.PI,
clipping: true
}
}
}
}
}
import NodePlatform from "../../src/platforms/node/NodePlatform.mjs";
const options = {stage: {w: 800, h: 600, clearColor: 0xFFFFFFFF, platform: NodePlatform}};
options.stage.window = {title: "Image is not stretched, translated in x and y into the view", fullscreen: false};
const app = new Rotation(options);
Hi Team,
How do we anchor for Component to the sibling component?
Eg:
return {
w: 1280,
h: 720,
Canvas_1: {
text:{
text: "Sample 1"
}
},
Canvas_2:{
text:{
text: "Sample 2"
}
}
};
How do anchor Canvas_2 to Canvas_1?
Is there any method to access sibling properties?
Did'n find anything about longpress native events in the docs. Maybe you can recommend some best practices?
Now I having issues, when doing my own event listeners, and I have multiple nested views with _handleEnter method, it worked not very well for now - both enter and long-enter work and I'm still looking for some better options.
Thanks! #
For the index.html file (is missing the dist directory):
<script src="./dist/lightning-web.js"></script>NOTE:
If you don't have a web server installed you could run instant-server from the directory:sudo npm install -g instant-server
instant -p 8081 ./
The basic-usage does not work on node.js since commit 41a1c2e
$ node basic-usage.js
initializing GLEW
/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10045
throw new Error('Unknown pixelstorei: ' + pname);
^
Error: Unknown pixelstorei: 37445
at Function._getPixelStoreiIndex (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10045:23)
at WebGLState.setPixelStorei (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:9756:30)
at WebGLRenderingContext.$pixelStorei [as pixelStorei] (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10152:25)
at WebGLRenderer.uploadTextureSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:8928:16)
at TextureManager._nativeUploadTextureSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10563:36)
at TextureManager.uploadTextureSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10476:36)
at TextureSource.setSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:688:26)
at _cancelCb.loader (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:658:26)
at TextureSource.loader (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:11924:13)
at TextureSource.load (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:644:35)
Hi all
I'm trying to create a horizontal menu of tabs which contain text fields with variable length text. I need to position each tab next to each other but to do that I need to know the width of the rendered text once set. Is there a way to retrieve that? I've tried using flex which I believe also requires specifying a width for each flex item.
Cheers
Michael
Is it possible to provide a pre-built and tested version of the lightning-web.js
rather requiring it be built as part of the npm ci on the consumer side?
Some benefits would include:
possibly publishing to npm as part of a build would resolve.
Hello!
I found an issue, when you have a container with some text at layout with flexItem prop,
and container with that text changes state for the first time (page refreshed) and then you enter that state, text is not rendered at all. And it's reproduced 100% every time.
Also I can say that there is no such issue if you remove flexItem prop.
For the text component,
we have the option of wrapping it by providing wordWrapWidth. But if a single long word is given then, it becomes empty
Eg:
Bigsampleword
Expected
Bigsam...
Actual
Empty
It would much help if we have an option to wrap with letters rather than omitting the complete word
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.