src/photoview.js

@@ -1,69 +1,3 @@
-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")
     
@@ -83,6 +17,7 @@ async function GetImages(){
         imgArray.push(img)
     });
     return imgArray
+        
 
     
 }
@@ -131,79 +66,18 @@ 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)})
+