frame.js in appscms-tools-theme-2.2.2

- old
+ new

@@ -51,11 +51,10 @@
 form.addEventListener('submit', (e) => {
   e.preventDefault()
   drawImage()
 })
 const drawInputImage = (ctx, item, indexValue, canvas, image) => {
-  console.log(ctx)
   return new Promise((resolve, reject) => {
     let image = document.createElement('img')
     image.src = files[indexValue]
     image.onload = () => {
       image.width = Number(item.width)
@@ -70,26 +69,26 @@
         image.width,
         image.height
       )
 
       if (item.rotate) {
-        drawRotated(item.rotate, ctx, canvas, image)
+        drawRotated(item.rotate, ctx, canvas, image, item)
       }
       resolve()
     }
   })
 }
-const drawRotated = (degrees, ctx, canvas, image) => {
+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(canvas.width / 2, canvas.height / 2)
+  ctx.translate(item.x, item.y)
 
   // rotate the canvas to the specified degrees
   ctx.rotate((degrees * Math.PI) / 180)
 
   // draw the image
@@ -127,10 +126,12 @@
             document.fonts.add(font)
             ctx.font = `${item.fontSize}px ${item.font}`
             if (item.shadowColor) {
               ctx.shadowColor = `${item.shadowColor}`
             }
+            console.log(item)
+            console.log((item.rotate * Math.PI) / 180)
             if (item.rotate) {
               ctx.rotate((item.rotate * Math.PI) / 180)
             }
             if (item.shadowOffsetX) {
               ctx.shadowOffsetX = 3
@@ -139,16 +140,19 @@
               ctx.shadowOffsetY = 3
             }
             if (item.shadowBlur) {
               ctx.shadowBlur = 2
             }
+            ctx.textAlign = 'center'
             ctx.fillStyle = `${item.color}`
+            ctx.save()
             ctx.fillText(
               document.querySelector(`#${item.id}`).value,
               item.x,
               item.y
             )
+            ctx.restore()
           })
         }
         if (item.type === 'rectangle') {
         }
       })
@@ -233,5 +237,15 @@
     window.location.href = `/download?tool=${pageTool}`
   } else {
     window.location.href = `/${lang}/download?tool=${pageTool}`
   }
 })
+
+//
+// fonts
+// font rotation
+// font position
+// font transform
+
+//images
+//image rotation
+// image rectangle with text