Started creating the classes for the photoview

src/photoview.js

@@ -1,3 +1,69 @@
+class PhotoViewAPP{
+    constructor(){
+        this.context = new PhotoViewContext()
+        this.canvas = this.setCanvasFromID()
+        this.canvasContext =this.setCanvasContext()
+        this.canvasCRect = this.setCanvasCRect()
+        console.log(this.context.getstate())
+    }
+    setCanvasFromID() {
+        return document.querySelector('#PhotoView')    
+    }
+    setCanvasContext(){
+         this.canvasContext = this.canvas.getContext('2d')
+    }
+    setCanvasCRect(){
+        this.canvasCRect = this.canvas.getBoundingClientRect()
+    
+    }
+    setCanvasClickEvent(){
+        this.canvas.addEventListener('click',(e)=>{this.context.clickEvent(e)})
+    }
+    initalizePhotoViewApp(){
+        this.setCanvasClickEvent()
+    }
+}
+
+class PhotoViewContext{
+    #state = null
+    #stateList = {}
+    constructor(state){
+        this.#state = state
+        
+
+    }
+    addToStateList(state,statename){
+        this.#stateList[statename] = new state();
+    }
+    getStateByName(statename){
+        return this.#stateList[statename]
+    }
+
+    getstate(){
+        return this.#state
+    }
+    
+}
+
+
+class abstractStateClass{
+    #parentClass = null
+    constructor(){
+        if (this.constructor == abstractStateClass){
+            throw new Error("Abstract Class  not should not be instatiated")
+        }
+    }
+    setParentClass(parentclass){
+        this.#parentClass = parentclass
+    }
+}
+
+class thumbnailView extends abstractStateClass{
+    constructor(){
+
+    }
+}
+
 function contextGetter(){
     var c = document.querySelector("#PhotoView")
     
@@ -17,7 +83,6 @@ async function GetImages(){
         imgArray.push(img)
     });
     return imgArray
-        
 
     
 }
@@ -66,18 +131,79 @@ async function LoadImages(Context,ListOfImages){
     }));
 
     
-console.log(ImgObjList)    
+ 
+}
+ 
+function PositionImages(ListOfImages){
+    var  ImgObjList = []
+    var CurrentRow = 0
+    var CurrentCol = 0
+    var MaxCols = 3
+    var MaxRows = 3
+    var CurrentX = 672
+    var CurrentY = 378
+    var ImgWidth = ListOfImages[0].width
+    var ImgHeight = ListOfImages[0].height
+    ListOfImages.map((element)=>{
+        ImgObjList.push({
+            "img":element,
+            "pos":{
+                "x":{
+                    "start":CurrentX,
+                    "end":CurrentX + 192
+                },
+                "y":{
+                    "start":CurrentY,
+                    "end":CurrentY + 108
+                }
+            }
+        })
+        if (CurrentRow == MaxRows - 1){
+            CurrentCol++
+            CurrentY += 110
+            CurrentRow = 0
+            CurrentX = 672
+        }
+        else{
+            CurrentX += 194
+            CurrentRow++
+        }
+
+    })
+    return ImgObjList
+}    
+
+
+function CanvasClickEvent(e,canvasSize,ListOfImages) {
+    var mouseX = (e.clientX - canvasSize.left)
+    var mouseY = (e.clientY - canvasSize.top)
+    //console.log(Math.floor((mouseX-672)/194))
+    //console.log(Math.floor((mouseY-378)/110))
+    
+    if (( mouseX >= 672) && (mouseX <= ((194 * 3)+672)) && (( mouseY >= 378 ) && (mouseY <= ((110 * 3) + 378) ) )){
+        ListOfImages.forEach(element=>{
+            if ((mouseX >= element.pos.x.start) && (mouseX <= element.pos.x.end)){
+                console.log(element)
+            }
+        })
+        alert( mouseX + "\n" + mouseY)
+    }
+    
 }
 
-    
-
-
 export  async function InitializePhotoViewApp(){
+    
+    var APP = new PhotoViewAPP();
+    APP.initalizePhotoViewApp();
+
     var context = contextGetter();
     var arrayOfImages = await GetImages()
     LoadImages(context,arrayOfImages)
+    var PositionedImages = PositionImages(arrayOfImages)
+    var canvas = document.querySelector('#PhotoView')
+    var cRect = canvas.getBoundingClientRect()
 
-
+    canvas.addEventListener('click',(e)=>{CanvasClickEvent(e,cRect,PositionedImages)})