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

scene = new THREE.Scene();
        cube = new THREE.Mesh(
            new THREE.BoxGeometry(200, 200, 200),
            new THREE.MeshBasicMaterial({ map: renderTarget.texture })
        );
        scene.add(cube);

        // Init TextCanvas
        textRenderStyle = new TextRenderStyle({
            fontSize: { unit: FontUnit.Pixel, size: 64.0, backgroundSize: 8.0 },
            color: new THREE.Color(0xff0000),
            backgroundColor: new THREE.Color(0x000000),
            backgroundOpacity: 1.0
        });
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center,
            verticalAlignment: VerticalAlignment.Below,
            lineWidth: 1024.0,
            wrappingMode: WrappingMode.Character
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 2048)
            .then((loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount
                });
                loadedFontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            })
            .catch(error => {

onKeyUp(event);
        });

        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 textLayoutManager
        textLayoutStyle = new TextLayoutStyle({
            horizontalAlignment: HorizontalAlignment.Center,
            verticalAlignment: VerticalAlignment.Below,
            lineWidth: window.innerWidth
        });
        textRenderStyle = new TextRenderStyle({
            fontSize: {
                unit: FontUnit.Pixel,
                size: 8.0,
                backgroundSize: 0.0
            }
        });
        FontCatalog.load("resources/fonts/Default_FontCatalog.json", 2048).then(
            (loadedFontCatalog: FontCatalog) => {
                textCanvas = new TextCanvas({
                    renderer: webglRenderer,
                    fontCatalog: loadedFontCatalog,
                    maxGlyphCount: characterCount

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
                });
                materialB.uniforms.time = new THREE.Uniform(0.0);

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;
                });
            }
        );

textRenderStyle.fontVariant = Number(value);
                assetsLoaded = false;
                textCanvas.fontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            });

        const textLayoutGui = gui.addFolder("TextLayout");
        textLayoutGui.add(textLayoutStyle, "lineWidth", 1.0, window.innerWidth, 1.0);
        textLayoutGui.add(textLayoutStyle, "maxLines", 0.0, 128, 1.0);
        textLayoutGui.add(textLayoutStyle, "tracking", -3.0, 3.0, 0.1);
        textLayoutGui.add(textLayoutStyle, "leading", -3.0, 3.0, 0.1);
        textLayoutGui
            .add(textLayoutStyle, "horizontalAlignment", {
                Left: HorizontalAlignment.Left,
                Center: HorizontalAlignment.Center,
                Right: HorizontalAlignment.Right
            })
            .onChange((value: string) => {
                textLayoutStyle.horizontalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "verticalAlignment", {
                Above: VerticalAlignment.Above,
                Center: VerticalAlignment.Center,
                Below: VerticalAlignment.Below
            })
            .onChange((value: string) => {
                textLayoutStyle.verticalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "wrappingMode", {

textRenderStyle.fontVariant = Number(value);
                assetsLoaded = false;
                textCanvas.fontCatalog.loadCharset(applicationCharset, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            });

        const textLayoutGui = gui.addFolder("TextLayout");
        textLayoutGui.add(textLayoutStyle, "lineWidth", 1.0, window.innerWidth, 1.0);
        textLayoutGui.add(textLayoutStyle, "maxLines", 0.0, 128, 1.0);
        textLayoutGui.add(textLayoutStyle, "tracking", -3.0, 3.0, 0.1);
        textLayoutGui.add(textLayoutStyle, "leading", -3.0, 3.0, 0.1);
        textLayoutGui
            .add(textLayoutStyle, "horizontalAlignment", {
                Left: HorizontalAlignment.Left,
                Center: HorizontalAlignment.Center,
                Right: HorizontalAlignment.Right
            })
            .onChange((value: string) => {
                textLayoutStyle.horizontalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "verticalAlignment", {
                Above: VerticalAlignment.Above,
                Center: VerticalAlignment.Center,
                Below: VerticalAlignment.Below
            })
            .onChange((value: string) => {
                textLayoutStyle.verticalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "wrappingMode", {

style.wrappingMode === "Character" ||
                    style.wrappingMode === "Word"
                        ? WrappingMode[style.wrappingMode]
                        : WrappingMode.Word,
                verticalAlignment:
                    style.vAlignment === "Above" ||
                    style.vAlignment === "Center" ||
                    style.vAlignment === "Below"
                        ? VerticalAlignment[style.vAlignment]
                        : VerticalAlignment.Center,
                horizontalAlignment:
                    style.hAlignment === "Left" ||
                    style.hAlignment === "Center" ||
                    style.hAlignment === "Right"
                        ? HorizontalAlignment[style.hAlignment]
                        : HorizontalAlignment.Center
            }
        };
    }
}

textRenderStyle.fontVariant = Number(value);
                assetsLoaded = false;
                textCanvas.fontCatalog.loadCharset(textSample, textRenderStyle).then(() => {
                    assetsLoaded = true;
                });
            });

        const textLayoutGui = gui.addFolder("TextLayout");
        textLayoutGui.add(textLayoutStyle, "lineWidth", 1.0, window.innerWidth, 1.0);
        textLayoutGui.add(textLayoutStyle, "maxLines", 0.0, 128, 1.0);
        textLayoutGui.add(textLayoutStyle, "tracking", -3.0, 3.0, 0.1);
        textLayoutGui.add(textLayoutStyle, "leading", -3.0, 3.0, 0.1);
        textLayoutGui
            .add(textLayoutStyle, "horizontalAlignment", {
                Left: HorizontalAlignment.Left,
                Center: HorizontalAlignment.Center,
                Right: HorizontalAlignment.Right
            })
            .onChange((value: string) => {
                textLayoutStyle.horizontalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "verticalAlignment", {
                Above: VerticalAlignment.Above,
                Center: VerticalAlignment.Center,
                Below: VerticalAlignment.Below
            })
            .onChange((value: string) => {
                textLayoutStyle.verticalAlignment = Number(value);
            });
        textLayoutGui
            .add(textLayoutStyle, "wrappingMode", {