@lightningjs/renderer 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",

package/src/core/CoreNode.ts

@@ -17,7 +17,11 @@
  * limitations under the License.
  */
 
-import { assertTruthy, mergeColorAlphaPremultiplied } from '../utils.js';
+import {
+  assertTruthy,
+  mergeColorAlphaPremultiplied,
+  getImageAspectRatio,
+} from '../utils.js';
 import type { ShaderMap } from './CoreShaderManager.js';
 import type {
   ExtractProps,
@@ -34,6 +38,7 @@ import type {
   TextureLoadedEventHandler,
 } from './textures/Texture.js';
 import type {
+  Dimensions,
   NodeTextureFailedPayload,
   NodeTextureFreedPayload,
   NodeTextureLoadedPayload,
@@ -72,6 +77,7 @@ export interface CoreNodeProps {
   width: number;
   height: number;
   alpha: number;
+  autosize: boolean;
   clipping: boolean;
   color: number;
   colorTop: number;
@@ -306,7 +312,15 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.setUpdateType(UpdateType.IsRenderable);
   }
 
+  autosizeNode(dimensions: Dimensions) {
+    if (this.autosize) {
+      this.width = dimensions.width;
+      this.height = dimensions.height;
+    }
+  }
+
   private onTextureLoaded: TextureLoadedEventHandler = (target, dimensions) => {
+    this.autosizeNode(dimensions);
     // Texture was loaded. In case the RAF loop has already stopped, we request
     // a render to ensure the texture is rendered.
     this.stage.requestRender();
@@ -437,7 +451,11 @@ export class CoreNode extends EventEmitter implements ICoreNode {
       } else {
         this.worldAlpha = this.props.alpha;
       }
-      this.setUpdateType(UpdateType.Children | UpdateType.PremultipliedColors);
+      this.setUpdateType(
+        UpdateType.Children |
+          UpdateType.PremultipliedColors |
+          UpdateType.IsRenderable,
+      );
       childUpdateType |= UpdateType.WorldAlpha;
     }
 
@@ -608,7 +626,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
   updateRenderState(parentClippingRect: RectWithValid) {
     const renderState = this.checkRenderBounds(parentClippingRect);
     if (renderState !== this.renderState) {
-      const previous = this.renderState;
+      let previous = this.renderState;
       this.renderState = renderState;
       if (previous === CoreNodeRenderState.InViewport) {
         this.emit('outOfViewport', {
@@ -616,6 +634,25 @@ export class CoreNode extends EventEmitter implements ICoreNode {
           current: renderState,
         });
       }
+      if (
+        previous < CoreNodeRenderState.InBounds &&
+        renderState === CoreNodeRenderState.InViewport
+      ) {
+        this.emit(CoreNodeRenderStateMap.get(CoreNodeRenderState.InBounds)!, {
+          previous,
+          current: renderState,
+        });
+        previous = CoreNodeRenderState.InBounds;
+      } else if (
+        previous > CoreNodeRenderState.InBounds &&
+        renderState === CoreNodeRenderState.OutOfBounds
+      ) {
+        this.emit(CoreNodeRenderStateMap.get(CoreNodeRenderState.InBounds)!, {
+          previous,
+          current: renderState,
+        });
+        previous = CoreNodeRenderState.InBounds;
+      }
       const event = CoreNodeRenderStateMap.get(renderState);
       assertTruthy(event);
       this.emit(event, {
@@ -639,7 +676,7 @@ export class CoreNode extends EventEmitter implements ICoreNode {
    */
   updateIsRenderable() {
     let newIsRenderable;
-    if (!this.checkRenderProps()) {
+    if (this.worldAlpha === 0 || !this.checkRenderProps()) {
       newIsRenderable = false;
     } else {
       newIsRenderable = this.renderState > CoreNodeRenderState.OutOfBounds;
@@ -1017,6 +1054,14 @@ export class CoreNode extends EventEmitter implements ICoreNode {
     this.setUpdateType(UpdateType.PremultipliedColors | UpdateType.WorldAlpha);
   }
 
+  get autosize(): boolean {
+    return this.props.autosize;
+  }
+
+  set autosize(value: boolean) {
+    this.props.autosize = value;
+  }
+
   get clipping(): boolean {
     return this.props.clipping;
   }

package/src/core/CoreShaderManager.ts

@@ -61,6 +61,8 @@ import {
   type RadialProgressEffectProps,
 } from './renderers/webgl/shaders/effects/RadialProgressEffect.js';
 import { HolePunchEffect } from './renderers/webgl/shaders/effects/HolePunchEffect.js';
+import { WebGlCoreShader } from './renderers/webgl/WebGlCoreShader.js';
+import { UnsupportedShader } from './renderers/canvas/shaders/UnsupportedShader.js';
 
 export type { FadeOutEffectProps };
 export type { LinearGradientEffectProps };
@@ -75,6 +77,7 @@ export interface ShaderMap {
   RoundedRectangle: typeof RoundedRectangle;
   DynamicShader: typeof DynamicShader;
   SdfShader: typeof SdfShader;
+  UnsupportedShader: typeof UnsupportedShader;
 }
 
 export type ShaderNode<Type extends keyof ShaderMap> = {
@@ -170,6 +173,13 @@ export class CoreShaderManager {
       throw new Error(`Shader type "${shType as string}" is not registered`);
     }
 
+    if (this.renderer.mode === 'canvas' && ShaderClass.prototype instanceof WebGlCoreShader) {
+      return {
+        shader: new UnsupportedShader(shType) as InstanceType<ShaderMap[Type]>,
+        props: props as Record<string, unknown>
+      }
+    }
+
     if (shType === 'DynamicShader') {
       return this.loadDynamicShader(props!);
     }

package/src/core/Stage.ts

@@ -18,7 +18,7 @@
  */
 import { startLoop, getTimeStamp } from './platform.js';
 import { WebGlCoreRenderer } from './renderers/webgl/WebGlCoreRenderer.js';
-import { assertTruthy } from '../utils.js';
+import { assertTruthy, setPremultiplyMode } from '../utils.js';
 import { AnimationManager } from './animations/AnimationManager.js';
 import { CoreNode } from './CoreNode.js';
 import { CoreTextureManager } from './CoreTextureManager.js';
@@ -38,6 +38,8 @@ import type {
   FrameTickPayload,
 } from '../common/CommonTypes.js';
 import { TextureMemoryManager } from './TextureMemoryManager.js';
+import type { CoreRenderer, CoreRendererOptions } from './renderers/CoreRenderer.js';
+import { CanvasCoreRenderer } from './renderers/canvas/CanvasCoreRenderer.js';
 
 export interface StageOptions {
   rootId: number;
@@ -52,6 +54,7 @@ export interface StageOptions {
   fpsUpdateInterval: number;
   enableContextSpy: boolean;
   numImageWorkers: number;
+  renderMode: 'webgl' | 'canvas';
 
   debug?: {
     monitorTextureCache?: boolean;
@@ -79,7 +82,7 @@ export class Stage extends EventEmitter {
   public readonly fontManager: TrFontManager;
   public readonly textRenderers: Partial<TextRendererMap>;
   public readonly shManager: CoreShaderManager;
-  public readonly renderer: WebGlCoreRenderer;
+  public readonly renderer: CoreRenderer;
   public readonly root: CoreNode;
   public readonly boundsMargin: [number, number, number, number];
 
@@ -110,6 +113,7 @@ export class Stage extends EventEmitter {
       enableContextSpy,
       numImageWorkers,
       txMemByteThreshold,
+      renderMode
     } = options;
 
     this.txManager = new CoreTextureManager(numImageWorkers);
@@ -135,7 +139,7 @@ export class Stage extends EventEmitter {
       }, 1000);
     }
 
-    this.renderer = new WebGlCoreRenderer({
+    const rendererOptions: CoreRendererOptions = {
       stage: this,
       canvas,
       pixelRatio:
@@ -146,14 +150,23 @@ export class Stage extends EventEmitter {
       txMemManager: this.txMemManager,
       shManager: this.shManager,
       contextSpy: this.contextSpy,
-    });
+    }
+
+    if (renderMode === 'canvas') {
+      this.renderer = new CanvasCoreRenderer(rendererOptions);
+    } else {
+      this.renderer = new WebGlCoreRenderer(rendererOptions);
+    }
+    setPremultiplyMode(renderMode);
 
     // Must do this after renderer is created
     this.txManager.renderer = this.renderer;
 
-    this.textRenderers = {
+    this.textRenderers = renderMode === 'webgl' ? {
       canvas: new CanvasTextRenderer(this),
       sdf: new SdfTextRenderer(this),
+    } : {
+      canvas: new CanvasTextRenderer(this),
     };
     this.fontManager = new TrFontManager(this.textRenderers);
 
@@ -165,6 +178,7 @@ export class Stage extends EventEmitter {
       width: appWidth,
       height: appHeight,
       alpha: 1,
+      autosize: false,
       clipping: false,
       color: 0x00000000,
       colorTop: 0x00000000,

package/src/core/lib/ImageWorker.ts

@@ -58,7 +58,7 @@ export class ImageWorkerManager {
           return (mimeType.indexOf("image/png") !== -1);
       }
 
-      async function getImage(src, premultiplyAlpha) {
+      function getImage(src, premultiplyAlpha) {
         return new Promise(function(resolve, reject) {
           var xhr = new XMLHttpRequest();
           xhr.open('GET', src, true);
@@ -91,7 +91,7 @@ export class ImageWorkerManager {
         });
       }
 
-      self.onmessage = async (event) => {
+      self.onmessage = (event) => {
         var src = event.data.src;
         var premultiplyAlpha = event.data.premultiplyAlpha;
 

package/src/core/renderers/CoreRenderer.ts

@@ -18,12 +18,14 @@
  */
 
 import type { CoreShaderManager } from '../CoreShaderManager.js';
-import type { TextureOptions } from '../CoreTextureManager.js';
+import type { CoreTextureManager, TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
-import type { Rect, RectWithValid } from '../lib/utils.js';
+import type { TextureMemoryManager } from '../TextureMemoryManager.js';
+import type { ContextSpy } from '../lib/ContextSpy.js';
+import type { RectWithValid } from '../lib/utils.js';
+import { ColorTexture } from '../textures/ColorTexture.js';
 import type { Texture } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
-import type { CoreRenderOp } from './CoreRenderOp.js';
 import type { CoreShader } from './CoreShader.js';
 
 export interface QuadOptions {
@@ -48,15 +50,39 @@ export interface QuadOptions {
   td: number;
 }
 
+export interface CoreRendererOptions {
+  stage: Stage;
+  canvas: HTMLCanvasElement | OffscreenCanvas;
+  pixelRatio: number;
+  txManager: CoreTextureManager;
+  txMemManager: TextureMemoryManager;
+  shManager: CoreShaderManager;
+  clearColor: number;
+  bufferMemory: number;
+  contextSpy: ContextSpy | null;
+}
+
 export abstract class CoreRenderer {
+  public options: CoreRendererOptions;
+  public mode: 'webgl' | 'canvas' | undefined;
+
   protected stage: Stage;
 
-  constructor(stage: Stage) {
-    this.stage = stage;
+  //// Core Managers
+  txManager: CoreTextureManager;
+  txMemManager: TextureMemoryManager;
+  shManager: CoreShaderManager;
+
+  constructor(options: CoreRendererOptions) {
+    this.options = options;
+    this.stage = options.stage;
+    this.txManager = options.txManager;
+    this.txMemManager = options.txMemManager;
+    this.shManager = options.shManager;
   }
 
   abstract reset(): void;
-  abstract render(surface: 'screen' | CoreContextTexture): void;
+  abstract render(surface?: 'screen' | CoreContextTexture): void;
   abstract addQuad(quad: QuadOptions): void;
   abstract createCtxTexture(textureSource: Texture): CoreContextTexture;
   abstract getShaderManager(): CoreShaderManager;

package/src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -0,0 +1,178 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * 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.
+ */
+
+import type { CoreShaderManager } from "../../CoreShaderManager.js";
+import { getRgbaComponents, type RGBA } from "../../lib/utils.js";
+import { SubTexture } from "../../textures/SubTexture.js";
+import type { Texture } from "../../textures/Texture.js";
+import type { CoreContextTexture } from "../CoreContextTexture.js";
+import { CoreRenderer, type CoreRendererOptions, type QuadOptions } from "../CoreRenderer.js";
+import { CanvasCoreTexture } from "./CanvasCoreTexture.js";
+import { getRadius } from "./internal/C2DShaderUtils.js";
+import { formatRgba, parseColor, type IParsedColor } from "./internal/ColorUtils.js";
+
+export class CanvasCoreRenderer extends CoreRenderer {
+
+  private context: CanvasRenderingContext2D;
+  private canvas: HTMLCanvasElement;
+  private pixelRatio: number;
+  private clearColor: RGBA | undefined;
+
+  constructor(options: CoreRendererOptions) {
+    super(options);
+
+    this.mode = 'canvas';
+    this.shManager.renderer = this;
+
+    const { canvas, pixelRatio, clearColor } = options;
+    this.canvas = canvas as HTMLCanvasElement;
+    this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
+    this.pixelRatio = pixelRatio;
+    this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
+  }
+
+  reset(): void {
+    // eslint-disable-next-line no-self-assign
+    this.canvas.width = this.canvas.width; // quick reset canvas
+
+    const ctx = this.context;
+
+    if (this.clearColor) {
+      const [r, g, b, a] = this.clearColor;
+      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    ctx.scale(this.pixelRatio, this.pixelRatio);
+  }
+
+  render(): void {
+    // noop
+  }
+
+  addQuad(quad: QuadOptions): void {
+    const ctx = this.context;
+    const {
+      tx, ty, width, height, alpha, colorTl, colorTr, colorBr, ta, tb, tc, td, clippingRect
+    } = quad;
+    let texture = quad.texture;
+    let ctxTexture: CanvasCoreTexture | undefined = undefined;
+    let frame: { x: number, y: number, width: number, height: number } | undefined;
+
+    if (texture) {
+      if (texture instanceof SubTexture) {
+        frame = texture.props;
+        texture = texture.parentTexture;
+      }
+
+      ctxTexture = this.txManager.getCtxTexture(texture) as CanvasCoreTexture;
+      if (texture.state === 'freed') {
+        ctxTexture.load();
+        return;
+      }
+      if (texture.state !== 'loaded' || !ctxTexture.hasImage()) {
+        return;
+      }
+    }
+
+    const color = parseColor(colorTl);
+    const hasTransform = ta !== 1;
+    const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+    const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
+    const radius = quad.shader ? getRadius(quad) : 0;
+
+    if (hasTransform || hasClipping || radius) {
+      ctx.save();
+    }
+
+    if (hasClipping) {
+      const path = new Path2D();
+      const { x, y, width, height } = clippingRect;
+      path.rect(x, y, width, height);
+      ctx.clip(path);
+    }
+
+    if (hasTransform) {
+      // Quad transform:
+      // | ta tb tx |
+      // | tc td ty |
+      // | 0  0  1  |
+      // C2D transform:
+      // | a  c  e  |
+      // | b  d  f  |
+      // | 0  0  1  |
+      const scale = this.pixelRatio;
+      ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
+      ctx.scale(scale, scale);
+      ctx.translate(-tx, -ty);
+    }
+
+    if (radius) {
+      const path = new Path2D();
+      path.roundRect(tx, ty, width, height, radius);
+      ctx.clip(path);
+    }
+
+    if (ctxTexture) {
+      const image = ctxTexture.getImage(color);
+      ctx.globalAlpha = alpha;
+      if (frame) {
+        ctx.drawImage(image, frame.x, frame.y, frame.width, frame.height, tx, ty, width, height);
+      } else {
+        ctx.drawImage(image, tx, ty, width, height);
+      }
+      ctx.globalAlpha = 1;
+    } else if (hasGradient) {
+      let endX: number = tx;
+      let endY: number = ty;
+      let endColor: IParsedColor;
+      if (colorTl === colorTr) {
+        // vertical
+        endX = tx;
+        endY = ty + height;
+        endColor = parseColor(colorBr);
+      } else {
+        // horizontal
+        endX = tx + width;
+        endY = ty;
+        endColor = parseColor(colorTr);
+      }
+      const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
+      gradient.addColorStop(0, formatRgba(color));
+      gradient.addColorStop(1, formatRgba(endColor));
+      ctx.fillStyle = gradient;
+      ctx.fillRect(tx, ty, width, height);
+    } else {
+      ctx.fillStyle = formatRgba(color);
+      ctx.fillRect(tx, ty, width, height);
+    }
+
+    if (hasTransform || hasClipping || radius) {
+      ctx.restore();
+    }
+  }
+
+  createCtxTexture(textureSource: Texture): CoreContextTexture {
+    return new CanvasCoreTexture(this.txMemManager, textureSource);
+  }
+
+  getShaderManager(): CoreShaderManager {
+    return this.shManager;
+  }
+}

package/src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -0,0 +1,138 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * 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.
+ */
+
+import type { Dimensions } from "../../../common/CommonTypes.js";
+import { assertTruthy } from "../../../utils.js";
+import { CoreContextTexture } from "../CoreContextTexture.js";
+import { formatRgba, type IParsedColor } from "./internal/ColorUtils.js";
+
+export class CanvasCoreTexture extends CoreContextTexture {
+
+  protected image: ImageBitmap | HTMLCanvasElement | undefined;
+  protected tintCache: {
+    key: string;
+    image: HTMLCanvasElement
+  } | undefined;
+
+  load(): void {
+    if (this.textureSource.state !== 'freed') {
+      return;
+    }
+    this.textureSource.setState('loading');
+    this.onLoadRequest().then((size) => {
+      this.textureSource.setState('loaded', size);
+      this.updateMemSize();
+    }).catch((err) => {
+      this.textureSource.setState('failed', err as Error);
+    });
+  }
+
+  free(): void {
+    this.image = undefined;
+    this.tintCache = undefined;
+    this.textureSource.setState('freed');
+    this.memManager.setTextureMemUse(this, 0);
+  }
+
+  updateMemSize(): void {
+    // Counting memory usage for:
+    // - main image
+    // - tinted image
+    const mult = this.tintCache ? 8 : 4;
+    if (this.textureSource.dimensions) {
+      const { width, height } = this.textureSource.dimensions;
+      this.memManager.setTextureMemUse(this, width * height * mult);
+    }
+  }
+
+  hasImage(): boolean {
+    return this.image !== undefined;
+  }
+
+  getImage(color: IParsedColor): ImageBitmap | HTMLCanvasElement {
+    const image = this.image;
+    assertTruthy(image, 'Attempt to get unloaded image texture');
+
+    if (color.isWhite) {
+      if (this.tintCache) {
+        this.tintCache = undefined;
+        this.updateMemSize();
+      }
+      return image;
+    }
+    const key = formatRgba(color);
+    if (this.tintCache?.key === key) {
+      return this.tintCache.image;
+    }
+
+    const tintedImage = this.tintTexture(image, key);
+    this.tintCache = {
+      key,
+      image: tintedImage
+    }
+    this.updateMemSize();
+    return tintedImage;
+  }
+
+  protected tintTexture(source: ImageBitmap | HTMLCanvasElement, color: string) {
+    const { width, height } = source;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      // fill with target color
+      ctx.fillStyle = color;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.fillRect(0, 0, width, height);
+
+      // multiply with image, resulting in non-transparent tinted image
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+
+      // apply original image alpha
+      ctx.globalCompositeOperation = 'destination-in';
+      ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+    }
+    return canvas;
+  }
+
+  get renderable(): boolean {
+    return this.textureSource.renderable;
+  }
+
+  private async onLoadRequest(): Promise<Dimensions> {
+    const { data } = await this.textureSource.getTextureData();
+    // TODO: canvas from text renderer should be able to provide the canvas directly
+    // instead of having to re-draw it into a new canvas...
+    if (data instanceof ImageData) {
+      const canvas = document.createElement('canvas');
+      canvas.width = data.width;
+      canvas.height = data.height;
+      const ctx = canvas.getContext('2d');
+      if (ctx) ctx.putImageData(data, 0, 0);
+      this.image = canvas;
+      return { width: data.width, height: data.height };
+    } else if (data instanceof ImageBitmap) {
+      this.image = data;
+      return { width: data.width, height: data.height };
+    }
+    return { width: 0, height: 0 };
+  }
+}

package/src/core/renderers/canvas/internal/C2DShaderUtils.ts

@@ -0,0 +1,34 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * 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.
+ */
+
+import type { QuadOptions } from "../../CoreRenderer.js";
+import { ROUNDED_RECTANGLE_SHADER_TYPE, UnsupportedShader } from "../shaders/UnsupportedShader.js";
+
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping
+ */
+export function getRadius(quad: QuadOptions): number {
+  if (quad.shader instanceof UnsupportedShader) {
+    const shType = quad.shader.shType;
+    if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
+      return quad.shaderProps?.radius as number ?? 0;
+    }
+  }
+  return 0;
+}