How to use the @here/harp-text-canvas.TextLayoutStyle function in @here/harp-text-canvas

color.a *= getOpacity(vec2(0.0), vWeight + b * 0.25);
            if (color.a < 0.05) {
                discard;
            }
            gl_FragColor = color;
        }`;

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Percent,
                size: 300.0,
                backgroundSize: 0.0
            }
        });
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 16).then(
            (loadedFontCatalog: FontCatalog) => {
                // snippet:textcanvas_material_0.ts
                materialA = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceA
                });
                materialA.uniforms.time = new THREE.Uniform(0.0);
                materialB = createSdfTextMaterial({
                    fontCatalog: loadedFontCatalog,
                    vertexSource: materialVertexSource,
                    fragmentSource: materialFragmentSourceB
                });

document.body.appendChild(webglRenderer.domElement);
        document.body.appendChild(stats.dom);
        window.addEventListener("resize", onWindowResize);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init TextCanvas
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center,
            verticalAlignment: VerticalAlignment.Below,
            lineWidth: window.innerWidth
        });
        textRenderStyle = new TextRenderStyle();
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 128).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }

const textPosition = new THREE.Vector3();

        if (this.projection.type === ProjectionType.Planar) {
            // place the text position at north/west for planar projections.
            textPosition.copy(this.geometry.vertices[3]);
            textPosition.multiplyScalar(0.95);

            this.m_textLayoutStyle = new TextLayoutStyle({
                verticalAlignment: VerticalAlignment.Below,
                horizontalAlignment: HorizontalAlignment.Left
            });
        } else {
            textPosition.copy(middlePoint);

            this.m_textLayoutStyle = new TextLayoutStyle({
                verticalAlignment: VerticalAlignment.Center,
                horizontalAlignment: HorizontalAlignment.Center
            });
        }

        const text = `${tileKey.mortonCode()} (${tileKey.row}, ${tileKey.column}, ${
            tileKey.level
        })`;

        textPosition.add(this.center);
        const textElement = new TextElement(
            text,
            textPosition,
            this.m_textRenderStyle,
            this.m_textLayoutStyle,
            PRIORITY_ALWAYS,

window.addEventListener("mousemove", onMouseMove);
        window.addEventListener("mouseup", onMouseClick);
        window.addEventListener("keyup", onKeyUp);

        camera = new THREE.OrthographicCamera(
            -window.innerWidth / 2.0,
            window.innerWidth / 2.0,
            window.innerHeight / 2.0,
            -window.innerHeight / 2.0
        );
        camera.position.z = 1.0;
        camera.near = 0.0;
        camera.updateProjectionMatrix();

        // Init textCanvas
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Left,
            verticalAlignment: VerticalAlignment.Center
        });
        textRenderStyle = new TextRenderStyle();
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 1024).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(applicationCharset, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            }
        );

continue;
            }
            const layer = textCanvas.getLayer(textElement.renderOrder || DEFAULT_TEXT_CANVAS_LAYER);

            // Trigger the glyph load if needed.
            if (textElement.loadingState === undefined) {
                textElement.loadingState = LoadingState.Requested;

                if (textElement.renderStyle === undefined) {
                    textElement.renderStyle = new TextRenderStyle({
                        ...textElementStyle.renderParams,
                        ...textElement.renderParams
                    });
                }
                if (textElement.layoutStyle === undefined) {
                    textElement.layoutStyle = new TextLayoutStyle({
                        ...textElementStyle.layoutParams,
                        ...textElement.layoutParams
                    });
                }

                if (textElement.text === "") {
                    textElement.loadingState = LoadingState.Loaded;
                } else {
                    textCanvas.fontCatalog
                        .loadCharset(textElement.text, textElement.renderStyle)
                        .then(() => {
                            textElement.loadingState = LoadingState.Loaded;
                            this.m_viewUpdateCallback();
                        });
                }
            }

lineRotation: getOptionValue(
                    technique.lineRotation,
                    defaultLayoutParams.lineRotation
                ),
                wrappingMode:
                    technique.wrappingMode === "None" ||
                    technique.wrappingMode === "Character" ||
                    technique.wrappingMode === "Word"
                        ? WrappingMode[technique.wrappingMode]
                        : defaultLayoutParams.wrappingMode,
                horizontalAlignment,
                verticalAlignment
            };

            const themeLayoutParams = this.getTextElementStyle(technique.style);
            layoutStyle = new TextLayoutStyle({
                ...themeLayoutParams,
                ...layoutParams
            });
            this.m_textLayoutStyleCache.set(cacheId, layoutStyle);
        }

        return layoutStyle;
    }

constructor() {
        this.m_map.set(
            DEFAULT_TEXT_STYLE_CACHE_ID,
            new TextLayoutStyle({
                verticalAlignment: VerticalAlignment.Center,
                horizontalAlignment: HorizontalAlignment.Center
            })
        );
    }