Add IndoPak Mushaf demo

DigitalKhatt · Dec 23, 2024 · ad9f3d7 · ad9f3d7
1 parent 2ff824c
commit ad9f3d7
Show file tree

Hide file tree

Showing 21 changed files with 10,726 additions and 179 deletions.
diff --git a/ClientApp/src/app/app.module.ts b/ClientApp/src/app/app.module.ts
@@ -73,6 +73,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { HBMedinaComponent } from './components/hbmedina/hbmedina.component';
 import { OldMedinaComponent } from './components/oldmedina/oldmedina.component';
 import { LayoutService } from './services/layoutservice/layoutservice.service';
+import { PageNotFoundComponent } from './components/pagenotfound/pagenotfound.component';
 //import { DragDropModule } from '@angular/cdk/drag-drop';
 
 
@@ -174,7 +175,8 @@ const routerOptions: ExtraOptions = {
     QuranOTFComponent,
     QuranPagesComponent,
     OldMedinaComponent,
-    HBMedinaComponent
+    HBMedinaComponent,
+    PageNotFoundComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -196,12 +198,20 @@ const routerOptions: ExtraOptions = {
       },
       {
         path: '',
-        component: QuranComponent,
-        children: [
+        children: [         
           {
             path: 'digitalmushaf',
-            component: EmptyComponent
-          },
+            component: HBMedinaComponent,
+            data: {
+              type: 'newmedina'
+            },
+          }
+        ]
+      },
+      {
+        path: '',
+        component: QuranComponent,
+        children: [          
           {
             path: 'about',
             component: AboutComponent
@@ -237,13 +247,20 @@ const routerOptions: ExtraOptions = {
             data: {
               type: 'newmedina'
             },
+          },
+          {
+            path: 'indopak15',
+            component: HBMedinaComponent,
+            data: {
+              type: 'indopak15'
+            },
           }
         ]
       },
       {
-        path: '**',
-        redirectTo: 'digitalmushaf'
-      }
+        path: '**', 
+        component: PageNotFoundComponent
+      },
     ], routerOptions),
     BrowserAnimationsModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

diff --git a/ClientApp/src/app/components/about/about.component.html b/ClientApp/src/app/components/about/about.component.html
@@ -21,7 +21,7 @@
 <div class="quran-toolbar">
   <div class="quran-toolbar-row">
     <div class="leftnav">
-      <button mat-button class="toolbarbutton backbutton" title="Quran" routerLink="/holyquran">
+      <button mat-button class="toolbarbutton backbutton" title="Quran" routerLink="/digitalmushaf">
         <mat-icon style="color:darkblue;">arrow_back</mat-icon>Mushaf
       </button>
     </div>

diff --git a/ClientApp/src/app/components/hbmedina/hbmedina.component.ts b/ClientApp/src/app/components/hbmedina/hbmedina.component.ts
@@ -39,7 +39,7 @@ import { AboutComponent } from '../about/about.component';
 import { RenderingStates } from './rendering_states';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { loadAndCacheFont, loadHarfbuzz, harfbuzzFonts, HarfBuzzFont } from "./harfbuzz"
-import { NewMadinahQuranTextService, OldMadinahQuranTextService, QuranTextService } from '../../services/qurantext.service';
+import { MushafLayoutType, NewMadinahQuranTextService, OldMadinahQuranTextService, QuranTextIndopak15Service, QuranTextService } from '../../services/qurantext.service';
 import { TajweedService } from '../../services/tajweed.service';
 
 
@@ -117,14 +117,17 @@ const DEFAULT_CACHE_SIZE = 10;
   templateUrl: './hbmedina.component.ts.html',
   styleUrls: ['./hbmedina.component.ts.scss'],
   host: {
-    '[class.oldmadina]': 'isOldMadina',
-    '[class.newmadina]': '!isOldMadina'
+    '[class.oldmadina]': 'mushafType == MushafLayoutTypeEnum.OldMadinah',
+    '[class.newmadina]': 'mushafType == MushafLayoutTypeEnum.NewMadinah',
+    '[class.indopak]': 'mushafType == MushafLayoutTypeEnum.IndoPak15Lines'
   },
 })
 export class HBMedinaComponent implements OnInit, AfterViewInit, OnDestroy {
 
+  MushafLayoutTypeEnum = MushafLayoutType;
+
   private sideBySideWidth = 992;
-  isOldMadina = false
+  mushafType: MushafLayoutType = MushafLayoutType.NewMadinah;
 
 
   fontsize;
@@ -213,14 +216,22 @@ export class HBMedinaComponent implements OnInit, AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
   ) {
 
-    this.isOldMadina = route.snapshot.data.type === "oldmedina";
-
-    if (this.isOldMadina) {
-      this.quranTextService = OldMadinahQuranTextService
-    } else {
-      this.quranTextService = NewMadinahQuranTextService
+    switch (route.snapshot.data.type) {
+      case "oldmedina":
+        this.mushafType = MushafLayoutType.OldMadinah;
+        this.quranTextService = OldMadinahQuranTextService;
+        break;
+      case "indopak15":
+        this.mushafType = MushafLayoutType.IndoPak15Lines;
+        this.quranTextService = QuranTextIndopak15Service;
+        break;
+      default:
+        this.mushafType = MushafLayoutType.NewMadinah;
+        this.quranTextService = NewMadinahQuranTextService;
+        break;
     }
 
+
     let nbav = window as any;
 
     this.router.events.subscribe((event) => {
@@ -326,12 +337,11 @@ export class HBMedinaComponent implements OnInit, AfterViewInit, OnDestroy {
       const tajweedResult = this.tajweedService.applyTajweedByPage(this.quranTextService, pageNumber - 1)
       result[pageNumber] = tajweedResult
     }
-    
+
     for (let pageNumber = 434; pageNumber <= 440; pageNumber++) {
       const tajweedResult = this.tajweedService.applyTajweedByPage(this.quranTextService, pageNumber - 1)
       result[pageNumber] = tajweedResult
     }
-    console.log(JSON.stringify(result, this.replacer, 2))
   }
 
   ngAfterViewInit() {
@@ -345,10 +355,12 @@ export class HBMedinaComponent implements OnInit, AfterViewInit, OnDestroy {
 
         await loadHarfbuzz("assets/hb.wasm")
 
-        if (this.isOldMadina) {
+        if (this.mushafType === MushafLayoutType.OldMadinah) {
           await loadAndCacheFont("oldmadina", "assets/fonts/hb/oldmadina.otf")
-        } else {
+        } else if (this.mushafType === MushafLayoutType.NewMadinah) {
           await loadAndCacheFont("oldmadina", "assets/fonts/hb/digitalkhatt.otf")
+        } else {
+          await loadAndCacheFont("oldmadina", "assets/fonts/indopak.otf")
         }
 
         document.fonts.load("12px oldmadina").then(() => {
@@ -462,7 +474,7 @@ export class HBMedinaComponent implements OnInit, AfterViewInit, OnDestroy {
       var box = this.pageNumberBoxRef.element.nativeElement;
 
       var pos: any = this.pageNumberBoxRef.getFreeDragPosition();
-      console.log("Pos=", pos);
+
 
       var toolbarHeight = 48;
 

diff --git a/ClientApp/src/app/components/hbmedina/hbmedina.component.ts.html b/ClientApp/src/app/components/hbmedina/hbmedina.component.ts.html
@@ -1,4 +1,4 @@
-<svg *ngIf="!isOldMadina" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="869.470000" height="1135.781000" viewBox="0 0 869.470000 1135.781000" id="ayaGlyph" style="display:none">
+<svg *ngIf="mushafType === MushafLayoutTypeEnum.NewMadinah" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="869.470000" height="1135.781000" viewBox="0 0 869.470000 1135.781000" id="ayaGlyph" style="display:none">
   <!-- Original BoundingBox: 0.000000 -250.000000 869.470000 885.781000 -->
   <g>
     <path d="M431.910000 -0.435000C441.568181 -0.435000,446.781077 3.940602,456.409000 11.069000C475.399141 25.129071,476.996880 48.689137,484.737000 54.068000C498.394535 63.559068,511.771069 58.570386,532.399000 66.713000C551.903073 74.411986,559.042395 108.396481,576.706000 121.302000C587.790887 129.400926,610.370874 137.102712,617.859000 154.163000C627.878561 176.990687,632.262943 206.855000,617.072000 206.855000C609.768290 206.855000,606.052000 201.433967,606.052000 190.489000C606.052000 156.932455,572.677195 130.954000,542.910000 130.954000C522.561017 130.954000,495.361935 148.610000,486.747000 148.610000C481.450960 148.610000,476.276000 145.994585,476.276000 141.235000C476.276000 116.341241,539.266000 113.923049,539.266000 107.958000C539.266000 87.593161,514.414898 80.891000,490.866000 80.891000C469.539969 80.891000,452.795089 102.014000,441.768000 102.014000C437.486428 102.014000,434.696000 97.733889,434.696000 93.121000C434.696000 78.056635,457.606000 73.675365,457.606000 58.611000C457.606000 38.041141,439.969911 16.982000,431.910000 16.982000C427.360978 16.982000,425.357736 -0.435000,431.910000 -0.435000Z" style="fill: rgb(0.000000%,0.000000%,0.000000%);stroke: none;"></path>
@@ -44,7 +44,7 @@
     <path d="M651.570750 1254.515200C651.570750 1271.865332,644.678438 1288.504847,632.410042 1300.773242C620.141646 1313.041638,603.502131 1319.933950,586.152000 1319.933950C568.801869 1319.933950,552.162354 1313.041638,539.893958 1300.773242C527.625562 1288.504847,520.733250 1271.865332,520.733250 1254.515200C520.733250 1237.165069,527.625562 1220.525554,539.893958 1208.257158C552.162354 1195.988763,568.801869 1189.096450,586.152000 1189.096450C603.502131 1189.096450,620.141646 1195.988763,632.410042 1208.257158C644.678438 1220.525554,651.570750 1237.165069,651.570750 1254.515200Z" style="fill: rgb(0.000000%,0.000000%,0.000000%);stroke: none;"></path>
   </g>
 </svg>
-<svg *ngIf="isOldMadina" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1172.304000" height="1507.248000" viewBox="0 0 1172.304000 1507.248000" id="ayaGlyph" style="display:none">
+<svg *ngIf="mushafType === MushafLayoutTypeEnum.OldMadinah" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1172.304000" height="1507.248000" viewBox="0 0 1172.304000 1507.248000" id="ayaGlyph" style="display:none">
   <g>
     <!-- Original BoundingBox: 0.000000 -460.548000 1172.304000 1046.700000 -->
     <path d="M586.150000 138.350000C594.419836 138.350000,602.580164 140.250000,610.850000 140.250000C593.822354 126.076689,585.200000 104.494914,585.200000 82.300000C585.200000 36.126355,623.988991 -0.350000,670.700000 -0.350000C718.491824 -0.350000,759.050000 35.580442,759.050000 82.300000C759.050000 98.005525,754.692439 113.718299,743.850000 125.050000C809.288469 138.680525,860.418856 159.893756,908.200000 197.250000C917.516046 160.054954,944.715128 125.380727,975.650000 120.300000C973.901797 159.445178,990.224831 210.932973,1019.350000 246.650000C1044.980481 278.081392,1090.136724 308.446620,1104.850000 332.150000C1130.474483 314.374193,1152.615171 316.352134,1172.300000 314.100000C1151.468625 355.251628,1144.750000 394.205613,1144.750000 436.650000C1144.750000 486.549024,1185.662388 539.879487,1151.400000 580.100000C1143.498782 589.375215,1132.216254 595.300000,1120.050000 595.300000C1109.519444 595.300000,1102.529427 592.659116,1091.550000 583.900000C1091.550000 862.672912,865.102176 1088.350000,586.150000 1088.350000L586.150000 1088.350000C307.197824 1088.350000,80.750000 862.672912,80.750000 583.900000C69.770573 592.659116,62.780556 595.300000,52.250000 595.300000C40.083746 595.300000,28.801218 589.375215,20.900000 580.100000C-13.362388 539.879487,27.550000 486.549024,27.550000 436.650000C27.550000 394.205613,20.831375 355.251628,0.000000 314.100000C19.684829 316.352134,41.825517 314.374193,67.450000 332.150000C82.163276 308.446620,127.319519 278.081392,152.950000 246.650000C182.075169 210.932973,198.398203 159.445178,196.650000 120.300000C227.584872 125.380727,254.783954 160.054954,264.100000 197.250000C311.881144 159.893756,363.011531 138.680525,428.450000 125.050000C417.607561 113.718299,413.250000 98.005525,413.250000 82.300000C413.250000 35.580442,453.808176 -0.350000,501.600000 -0.350000C548.311009 -0.350000,587.100000 36.126355,587.100000 82.300000C587.100000 104.494914,578.477646 126.076689,561.450000 140.250000C569.719836 140.250000,577.880164 138.350000,586.150000 138.350000Z" style="fill: rgb(0.000000%,0.000000%,0.000000%);stroke: none;"></path>

diff --git a/ClientApp/src/app/components/hbmedina/hbmedina.component.ts.scss b/ClientApp/src/app/components/hbmedina/hbmedina.component.ts.scss
@@ -29,6 +29,10 @@ $padding: 0.2em;
   font-family: digitalkhatt;
 }
 
+:host.indopak {
+  font-family: indopak;
+}
+
 :host {
   display: flex;
   flex-direction: column;

diff --git a/ClientApp/src/app/components/hbmedina/just.service.ts b/ClientApp/src/app/components/hbmedina/just.service.ts
@@ -1,5 +1,3 @@
-//import { quranTextService, PAGE_WIDTH, FONTSIZE, MARGIN, INTERLINE, TOP, SPACEWIDTH, SpaceType, LineTextInfo, WordInfo } from './qurantext.service'
-
 import { QuranTextService } from "../../services/qurantext.service";
 import { HarfBuzzFont, HarfBuzzBuffer, hb as HarfBuzz, getWidth, HBFeature } from "./harfbuzz"
 import { compress, decompress } from 'lz-string';
@@ -11,7 +9,6 @@ export const INTERLINE = 1800
 export const TOP = 200
 export const MARGIN = 400
 export const FONTSIZE = 1000
-export const SPACEWIDTH = 100
 
 export const enum SpaceType {
   Simple = 1,
@@ -228,11 +225,9 @@ function tryApplyFeatures(wordIndex: number, lineTextInfo: LineTextInfo, justInf
   }
   return false
 }
-export function justifyLine(lineTextInfo: LineTextInfo, font: HarfBuzzFont, fontSizeLineWidthRatio: number): JustResultByLine {
-
-  const desiredWidth = FONTSIZE / fontSizeLineWidthRatio
+export function justifyLine(lineTextInfo: LineTextInfo, font: HarfBuzzFont, fontSizeLineWidthRatio: number, spaceWidth: number): JustResultByLine {
 
-  const defaultSpaceWidth = SPACEWIDTH
+  const desiredWidth = FONTSIZE / fontSizeLineWidthRatio  
 
   const lineText = lineTextInfo.lineText
 
@@ -266,14 +261,14 @@ export function justifyLine(lineTextInfo: LineTextInfo, font: HarfBuzzFont, font
   let diff = desiredWidth - currentLineWidth
 
   let fontSizeRatio = 1
-  let simpleSpacing = SPACEWIDTH
-  let ayaSpacing = SPACEWIDTH
+  let simpleSpacing = spaceWidth
+  let ayaSpacing = spaceWidth
 
   if (diff > 0) {
     // stretch   
 
-    let maxStretchBySpace = defaultSpaceWidth * 1;
-    let maxStretchByAyaSpace = defaultSpaceWidth * 2;
+    let maxStretchBySpace = Math.min(100, spaceWidth * 1);
+    let maxStretchByAyaSpace = Math.min(200, spaceWidth * 2);
 
     let maxStretch = maxStretchBySpace * lineTextInfo.simpleSpaceIndexes.length + maxStretchByAyaSpace * lineTextInfo.ayaSpaceIndexes.length;
 
@@ -282,8 +277,8 @@ export function justifyLine(lineTextInfo: LineTextInfo, font: HarfBuzzFont, font
     let stretchBySpace = spaceRatio * maxStretchBySpace;
     let stretchByByAyaSpace = spaceRatio * maxStretchByAyaSpace;
 
-    simpleSpaceWidth = defaultSpaceWidth + stretchBySpace
-    ayaSpaceWidth = defaultSpaceWidth + stretchByByAyaSpace
+    simpleSpaceWidth = spaceWidth + stretchBySpace
+    ayaSpaceWidth = spaceWidth + stretchByByAyaSpace
 
     currentLineWidth += stretch
 
@@ -325,12 +320,12 @@ function stretchLine(lineTextInfo: LineTextInfo, justInfo: JustInfo): JustInfo {
 
   const wordInfos = lineTextInfo.wordInfos;
 
-  applyKashidasSubWords(lineTextInfo, justInfo, StretchType.Beh, 2)
+  applyKashidasSubWords(lineTextInfo, justInfo, StretchType.Beh, 2);
   applyAlternatesSubWords(lineTextInfo, justInfo, "بتثكن", 2)
   applyKashidasSubWords(lineTextInfo, justInfo, StretchType.FinaAscendant, 3)
   applyKashidasSubWords(lineTextInfo, justInfo, StretchType.OtherKashidas, 2)
   applyAlternatesSubWords(lineTextInfo, justInfo, "ىصضسشفقيئ", 2)
-  applyKashidasSubWords(lineTextInfo, justInfo, StretchType.Kaf, 1)  
+  applyKashidasSubWords(lineTextInfo, justInfo, StretchType.Kaf, 1)
   applyKashidasSubWords(lineTextInfo, justInfo, StretchType.Beh, 1)
   applyAlternatesSubWords(lineTextInfo, justInfo, "بتثكن", 1)
   applyKashidasSubWords(lineTextInfo, justInfo, StretchType.FinaAscendant, 1)
@@ -492,7 +487,7 @@ function applyKashidasSubWords(lineTextInfo: LineTextInfo, justInfo: JustInfo, t
               }*/
             ]
 
-            
+
 
             tempResult.set(firstIndexInLine, mergeFeatures(firstPrevFeatures, firstAppliedFeatures)!!)
 
@@ -676,21 +671,21 @@ function applyAlternatesSubWords(lineTextInfo: LineTextInfo, justInfo: JustInfo,
 }
 
 
-async function saveLayout(quranTextService: QuranTextService, fontSizeLineWidthRatio: number, font: HarfBuzzFont) {
+async function saveLayout(quranTextService: QuranTextService, fontSizeLineWidthRatio: number, font: HarfBuzzFont, spaceWidth: number) {
 
   const result: JustResultByLine[][] = []
 
   for (let pageIndex = 0; pageIndex < quranTextService.quranText.length; pageIndex++) {
     //for (let pageIndex = 0; pageIndex < 10; pageIndex++) {      
 
-    result.push(await getPageLayout(quranTextService, pageIndex, fontSizeLineWidthRatio, font))
+    result.push(await getPageLayout(quranTextService, pageIndex, fontSizeLineWidthRatio, font, spaceWidth))
     console.log(`pageIndex=${pageIndex} saved`)
   }
 
   saveLayoutToStorage(fontSizeLineWidthRatio, result)
 }
 
-async function getPageLayout(quranTextService: QuranTextService, pageIndex: number, fontSizeLineWidthRatio: number, font: HarfBuzzFont) {
+async function getPageLayout(quranTextService: QuranTextService, pageIndex: number, fontSizeLineWidthRatio: number, font: HarfBuzzFont, spaceWidth: number) {
 
   const result: JustResultByLine[] = []
 
@@ -699,7 +694,7 @@ async function getPageLayout(quranTextService: QuranTextService, pageIndex: numb
     const lineTextInfo = analyzeLineForJust(quranTextService, pageIndex, lineIndex)
     let justResult: JustResultByLine
     if (lineInfo.lineType === 1 || (lineInfo.lineType === 2 && pageIndex != 0 && pageIndex != 1)) {
-      justResult = { fontFeatures: new Map(), simpleSpacing: SPACEWIDTH, ayaSpacing: SPACEWIDTH, fontSizeRatio: 1 }
+      justResult = { fontFeatures: new Map(), simpleSpacing: spaceWidth, ayaSpacing: spaceWidth, fontSizeRatio: 1 }
       result.push(justResult)
 
     } else {
@@ -713,7 +708,7 @@ async function getPageLayout(quranTextService: QuranTextService, pageIndex: numb
 
       }
 
-      justResult = justifyLine(lineTextInfo, font, fontSizeLineWidthRatio / lineWidthRatio)
+      justResult = justifyLine(lineTextInfo, font, fontSizeLineWidthRatio / lineWidthRatio, spaceWidth)
       result.push(justResult)
 
     }