frame.js in appscms-tools-theme-2.2.1

- old
+ new

@@ -33,18 +33,19 @@
     console.log(featureData)
   })
 const fileOnChange = (e) => {
   index = Number(e.dataset.index)
   let reader = new FileReader()
-  reader.readAsDataURL(e.files[0])
   reader.onload = (event) => {
+    cropModal.style.display = 'flex'
     if (cropper === null) {
       cropImage(event.target.result, e.id)
     } else {
       updateCropper(event.target.result, e.id)
     }
   }
+  reader.readAsDataURL(e.files[0])
 }
 const closeModal = () => {
   cropModal.style.display = 'none'
 }
 form.addEventListener('submit', (e) => {
@@ -57,17 +58,21 @@
     let image = document.createElement('img')
     image.src = files[indexValue]
     image.onload = () => {
       image.width = Number(item.width)
       image.height = Number(item.height)
+      if (item.filter) {
+        ctx.filter = item.filter
+      }
       ctx.drawImage(
         image,
         Number(item.x),
         Number(item.y),
         image.width,
         image.height
       )
+
       if (item.rotate) {
         drawRotated(item.rotate, ctx, canvas, image)
       }
       resolve()
     }
@@ -80,11 +85,11 @@
   // 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(canvas.width / 2, canvas.height / 2)
+  // ctx.translate(canvas.width / 2, canvas.height / 2)
 
   // rotate the canvas to the specified degrees
   ctx.rotate((degrees * Math.PI) / 180)
 
   // draw the image
@@ -111,18 +116,22 @@
             })
           })
         }
       })
     ).then(() => {
+      ctx.filter = 'none'
       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) {
             document.fonts.add(font)
-            ctx.font = `${item.fontSize}px ${item.fontWeight} ${item.font}`
+            ctx.font = `${item.fontSize}px ${item.font}`
             if (item.shadowColor) {
               ctx.shadowColor = `${item.shadowColor}`
+            }
+            if (item.rotate) {
+              ctx.rotate((item.rotate * Math.PI) / 180)
             }
             if (item.shadowOffsetX) {
               ctx.shadowOffsetX = 3
             }
             if (item.shadowOffsetY) {