Implemented cropping.

src/pgs.ts

@@ -188,8 +188,7 @@ export class Pgs {
             // Builds the subtitle.
             const pixelData = this.getPixelDataFromComposition(compositionObject, palette, ctxObjects);
             if (pixelData) {
-                compositionData.push(new SubtitleCompositionData(
-                  compositionObject.horizontalPosition, compositionObject.verticalPosition, window, pixelData));
+                compositionData.push(new SubtitleCompositionData(compositionObject, window, pixelData));
             }
         }
 

src/pgs/presentationCompositionSegment.ts

@@ -11,7 +11,7 @@ export class CompositionObject {
     public croppingHorizontalPosition: number = 0;
     public croppingVerticalPosition: number = 0;
     public croppingWidth: number = 0;
-    public croppingHeightPosition: number = 0;
+    public croppingHeight: number = 0;
     public get hasCropping(): boolean {
         return (this.croppedFlag & 0x80) != 0
     }
@@ -53,7 +53,7 @@ export class PresentationCompositionSegment implements Segment {
                 compositionObject.croppingHorizontalPosition = reader.readUInt16();
                 compositionObject.croppingVerticalPosition = reader.readUInt16();
                 compositionObject.croppingWidth = reader.readUInt16();
-                compositionObject.croppingHeightPosition = reader.readUInt16();
+                compositionObject.croppingHeight = reader.readUInt16();
             }
 
             this.compositionObjects.push(compositionObject);

src/renderer.ts

@@ -37,8 +37,7 @@ export class Renderer {
             return;
 
         // Resize the canvas if needed.
-        if (this.canvas.width != subtitleData.width ||
-          this.canvas.height != subtitleData.height) {
+        if (this.canvas.width != subtitleData.width || this.canvas.height != subtitleData.height) {
             this.canvas.width = subtitleData.width;
             this.canvas.height = subtitleData.height;
         }
@@ -63,10 +62,19 @@ export class Renderer {
      * @param dirtyArea If given, it will extend the dirty rect to include the affected subtitle area.
      */
     private drawSubtitleCompositionData(compositionData: SubtitleCompositionData, dirtyArea?: Rect): void {
-        this.context?.putImageData(compositionData.pixelData, compositionData.x, compositionData.y);
+        const compositionObject = compositionData.compositionObject;
+        if (compositionObject.hasCropping) {
+            this.context?.putImageData(compositionData.pixelData,
+                compositionObject.horizontalPosition, compositionObject.verticalPosition,
+                compositionObject.croppingHorizontalPosition, compositionObject.croppingVerticalPosition,
+                compositionObject.croppingWidth, compositionObject.croppingHeight);
+        } else {
+            this.context?.putImageData(compositionData.pixelData,
+                compositionObject.horizontalPosition, compositionObject.verticalPosition);
+        }
 
         // Mark this area as dirty.
         dirtyArea?.union(compositionData.window.horizontalPosition, compositionData.window.verticalPosition,
-          compositionData.pixelData.width, compositionData.pixelData.height);
+            compositionData.pixelData.width, compositionData.pixelData.height);
     }
 }

src/subtitleData.ts

@@ -1,4 +1,5 @@
 import {WindowDefinition} from "./pgs/windowDefinitionSegment";
+import {CompositionObject} from "./pgs/presentationCompositionSegment";
 
 /**
  * This class contains the compiled subtitle data for a whole frame.
@@ -31,14 +32,9 @@ export class SubtitleData {
  */
 export class SubtitleCompositionData {
     /**
-     * The x position of the image in pixels from the left edge of the canvas.
+     * The original composition object of the subtile data.
      */
-    public readonly x: number;
-
-    /**
-     * The y position of the image in pixels from the top edge of the canvas.
-     */
-    public readonly y: number;
+    public readonly compositionObject: CompositionObject;
 
     /**
      * The pgs window to draw on (the on-screen position).
@@ -50,9 +46,8 @@ export class SubtitleCompositionData {
      */
     public readonly pixelData: ImageData;
 
-    public constructor(x: number, y: number, window: WindowDefinition, pixelData: ImageData) {
-        this.x = x;
-        this.y = y;
+    public constructor(compositionObject: CompositionObject, window: WindowDefinition, pixelData: ImageData) {
+        this.compositionObject = compositionObject;
         this.window = window;
         this.pixelData = pixelData;
     }