frame.js in appscms-tools-theme-2.2.7

- old
+ new

@@ -2,10 +2,11 @@
 const pageTool = getScript.dataset.tool
 const lang = getScript.dataset.lang
 const inputBox = document.querySelector('#Inputbox')
 const fileDropBox = document.querySelector('.custom-box')
 const cropModal = document.querySelector('.crop-image-modal-container')
+const exampleModal = document.querySelector('.example-images-modal-container')
 const workspace = document.getElementById('workspace')
 const canvasPanel = document.getElementById('canvas-panel')
 const download = document.querySelector('#download-button')
 const form = document.querySelector('#effect-form')
 let files = []
@@ -46,10 +47,13 @@
   reader.readAsDataURL(e.files[0])
 }
 const closeModal = () => {
   cropModal.style.display = 'none'
 }
+const closeExamplesModal = () => {
+  exampleModal.style.display = 'none'
+}
 form.addEventListener('submit', (e) => {
   e.preventDefault()
   drawImage()
 })
 const drawInputImage = (ctx, item, indexValue) => {
@@ -84,31 +88,10 @@
       resolve()
     }
   })
 }
 
-const drawRotated = (degrees, ctx, canvas, image, item) => {
-  // console.log(image)
-  // ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  // save the unrotatedctx of the canvas so we can restore it later
-  // the alternative is to untranslate & unrotate after drawing
-  ctx.save()
-
-  // move to the center of the canvas
-  // ctx.translate(item.x, item.y)
-
-  // rotate the canvas to the specified degrees
-  ctx.rotate((50 * Math.PI) / 180)
-
-  // draw the image
-  // since thectx is rotated, the image will be rotated also
-  // ctx.drawImage(image, -image.width / 2, -image.width / 2)
-
-  // we’re done with the rotating so restore the unrotatedctx
-  ctx.restore()
-}
 const drawImage = () => {
   let img = new Image()
   img.src = featureData.effectImagePath
   var canvas = document.createElement('canvas')
   var ctx = canvas.getContext('2d')
@@ -125,11 +108,11 @@
           })
         }
       })
     ).then(() => {
       ctx.filter = 'none'
-      // ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
       featureData.elements.map((item, indexValue) => {
         if (item.type === 'text') {
           let myFont = new FontFace(item.font, `url(${item.fontPath})`)
           myFont.load().then(function (font) {
             ctx.save()
@@ -208,9 +191,12 @@
     })
     .toDataURL()
   files[index - 1] = cropperImg
   cropModal.style.display = 'none'
 })
+const openExamplesModal = () => {
+  exampleModal.style.display = 'flex'
+}
 let inputFile = ''
 const handleFile = (file) => {
   cropModal.style.display = 'flex'
   document.querySelector('#file-loader').style.display = 'flex'
   document.querySelector('.file-input').style.display = 'none'