Skip to content

Commit

Permalink
Merge branch 'master' into fix/child-list-set-at
Browse files Browse the repository at this point in the history
  • Loading branch information
erikhaandrikman authored Aug 25, 2021
2 parents 3d4bef3 + 0bed496 commit 8f7bf13
Show file tree
Hide file tree
Showing 5 changed files with 1,081 additions and 295 deletions.
55 changes: 55 additions & 0 deletions examples/text/advanced-renderer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!--
If not stated otherwise in this file or this component's LICENSE file the
following copyright and licenses apply:
Copyright 2020 Metrological
Licensed under the Apache License, Version 2.0 (the License);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<script src="../../devtools/lightning-inspect.js"></script>
</head>
<body>
<script type="module">
//attachInspector(lng)
import lng from '../../src/lightning.mjs';
const TEXT = "This text is normal.\nThis text is <b>bold</b>.\nThis text is <i>italic</i>.\nThis text is <color=0xffcc2222>red</color>.\nThis text is brokennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn up.\n"

window.onload = function() {
class BasicUsageExample extends lng.Application {
static _template() {
return {
text: {
w: 500,
wordBreak: true,
advancedRenderer: true,
text: TEXT
}
}
}
}

const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false}, debug: true}

const app = new BasicUsageExample(options);

document.body.appendChild(app.stage.getCanvas());
}
</script>
</body>
</html>
47 changes: 44 additions & 3 deletions src/textures/TextTexture.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,11 @@ export default class TextTexture extends Texture {
}

static renderer(stage, canvas, settings) {
return new TextTextureRenderer(stage, canvas, settings);
if (this.advancedRenderer) {
return new TextTextureRendererAdvanced(stage, canvas, settings);
} else {
return new TextTextureRenderer(stage, canvas, settings);
}
}

get text() {
Expand Down Expand Up @@ -120,6 +124,17 @@ export default class TextTexture extends Texture {
}
}

get wordBreak() {
return this._wordBreak;
}

set wordBreak(v) {
if (this._wordBreak !== v) {
this._wordBreak = v;
this._changed();
}
}

get textOverflow() {
return this._textOverflow;
}
Expand Down Expand Up @@ -406,6 +421,17 @@ export default class TextTexture extends Texture {
}
}

get advancedRenderer() {
return this._advancedRenderer;
}

set advancedRenderer(v) {
if (this._advancedRenderer !== v) {
this._advancedRenderer = v;
this._changed();
}
}

set letterSpacing(v) {
if (this._letterSpacing !== v) {
this._letterSpacing = v;
Expand Down Expand Up @@ -454,6 +480,7 @@ export default class TextTexture extends Texture {
if (this.fontFace !== null) parts.push("ff" + (Array.isArray(this.fontFace) ? this.fontFace.join(",") : this.fontFace));
if (this.wordWrap !== true) parts.push("wr" + (this.wordWrap ? 1 : 0));
if (this.wordWrapWidth !== 0) parts.push("ww" + this.wordWrapWidth);
if (this.wordBreak !== false) parts.push("wb" + this.wordBreak ? 1 : 0);
if (this.textOverflow != "") parts.push("to" + this.textOverflow);
if (this.lineHeight !== null) parts.push("lh" + this.lineHeight);
if (this.textBaseline !== "alphabetic") parts.push("tb" + this.textBaseline);
Expand Down Expand Up @@ -485,6 +512,8 @@ export default class TextTexture extends Texture {
if (this.cutSy) parts.push("csy" + this.cutSy);
if (this.cutEy) parts.push("cey" + this.cutEy);

if (this.advancedRenderer) parts.push("aR" + this.advancedRenderer ? 1 : 0);

let id = "TX$" + parts.join("|") + ":" + this.text;
return id;
}
Expand All @@ -501,13 +530,17 @@ export default class TextTexture extends Texture {

return function (cb) {
const canvas = this.stage.platform.getDrawingCanvas();
const renderer = new TextTextureRenderer(this.stage, canvas, args);
const renderer = (args.advancedRenderer)
? new TextTextureRendererAdvanced(this.stage, canvas, args)
: new TextTextureRenderer(this.stage, canvas, args);

const p = renderer.draw();

const texParams = {};

// Prevent text blur when text texture is downscaled
if (gl) {
const sharpen = this.stage.getRenderPrecision() < this.stage.getOption('textRenderSharpPrecision') && args.fontSize < this.stage.getOption('textRenderSharpFontSize')
if (gl && sharpen) {
texParams[gl.TEXTURE_MAG_FILTER] = gl.NEAREST;
}

Expand Down Expand Up @@ -543,6 +576,7 @@ export default class TextTexture extends Texture {
if (this.fontFace !== null) nonDefaults["fontFace"] = this.fontFace;
if (this.wordWrap !== true) nonDefaults["wordWrap"] = this.wordWrap;
if (this.wordWrapWidth !== 0) nonDefaults["wordWrapWidth"] = this.wordWrapWidth;
if (this.wordBreak !== false) nonDefaults["wordBreak"] = this.wordBreak;
if (this.textOverflow != "") nonDefaults["textOverflow"] = this.textOverflow;
if (this.lineHeight !== null) nonDefaults["lineHeight"] = this.lineHeight;
if (this.textBaseline !== "alphabetic") nonDefaults["textBaseline"] = this.textBaseline;
Expand Down Expand Up @@ -573,6 +607,8 @@ export default class TextTexture extends Texture {
if (this.cutEx) nonDefaults["cutEx"] = this.cutEx;
if (this.cutSy) nonDefaults["cutSy"] = this.cutSy;
if (this.cutEy) nonDefaults["cutEy"] = this.cutEy;

if (this.advancedRenderer) nonDefaults["renderer"] = this.advancedRenderer;
return nonDefaults;
}

Expand All @@ -586,6 +622,7 @@ export default class TextTexture extends Texture {
obj.fontFace = this._fontFace;
obj.wordWrap = this._wordWrap;
obj.wordWrapWidth = this._wordWrapWidth;
obj.wordBreak = this._wordBreak;
obj.textOverflow = this._textOverflow;
obj.lineHeight = this._lineHeight;
obj.textBaseline = this._textBaseline;
Expand Down Expand Up @@ -615,6 +652,7 @@ export default class TextTexture extends Texture {
obj.cutEx = this._cutEx;
obj.cutSy = this._cutSy;
obj.cutEy = this._cutEy;
obj.advancedRenderer = this._advancedRenderer;
return obj;
}

Expand All @@ -632,6 +670,7 @@ proto._fontSize = 40;
proto._fontFace = null;
proto._wordWrap = true;
proto._wordWrapWidth = 0;
proto._wordBreak = false;
proto._textOverflow = "";
proto._lineHeight = null;
proto._textBaseline = "alphabetic";
Expand Down Expand Up @@ -660,6 +699,8 @@ proto._cutSx = 0;
proto._cutEx = 0;
proto._cutSy = 0;
proto._cutEy = 0;
proto._advancedRenderer = false;


import TextTextureRenderer from "./TextTextureRenderer.mjs";
import TextTextureRendererAdvanced from "./TextTextureRendererAdvanced.mjs";
Loading

0 comments on commit 8f7bf13

Please sign in to comment.