diff --git a/src/photoview.js b/src/photoview.js index 4cefb7e..890a07a 100644 --- a/src/photoview.js +++ b/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)})