appscms-tools-theme 2.2.5 → 2.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 453710446bc4e201a7b5e2df1de53122a01e9fa2aaa19050a271ec2169759646
-  data.tar.gz: dba6831293fca990e81216e8c653ff34e288b780dc280c8cf863803666134357
+  metadata.gz: 57fe8e11e3e005629d832b648a76d1f6cec1aa1b7986a130927bca4759db705d
+  data.tar.gz: c96a0e45465037b82000a455acd3b5b8f767da64575769b6d2044348c3b9d179
 SHA512:
-  metadata.gz: '01628b3a082ffaf783bb7038fa49f973510388143d427ff730656a637cd3ae9c264c884eb260ab61ac17cdd91c40281311e1228327b20b292b7e38069feed044'
-  data.tar.gz: da1d00b2138166f94355700089c046889a6d25da6ad67f8b7b2d2425d808f1618fa25952747831692ddd49d47ec70793ef2c596663e7e0f496a6b35960496aea
+  metadata.gz: b78f545a979e8f4f0776e197b025dcefe89ad64497c3bac8bb2c1847af557121cc8e3de450a85876f654bfd02eaca0a13d30833f693a43ae17f1bcb89c6cb3bb
+  data.tar.gz: 946616197aa6a3131e2dac36eda434e22fb410f7c131ffa12e49f03e4ed31c68704423ab2b306ac4ce5015b13d6f6e2e58d8a98e47672cb968f9b07a49edcab6

data/_data/feature/en/theframe.json

@@ -46,20 +46,6 @@
         {
             "type": "image",
             "label": "1."
-        },
-        {
-            "label": "label",
-            "type": "text",
-            "id": "text-1"
-        },
-        {
-            "type": "image",
-            "label": "1."
-        },
-        {
-            "label": "label",
-            "type": "text",
-            "id": "text-2"
         }
     ]
 }

data/assets/js/frame.js

@@ -52,16 +52,21 @@ form.addEventListener('submit', (e) => {
   e.preventDefault()
   drawImage()
 })
-const drawInputImage = (ctx, item, indexValue, canvas, image) => {
+const drawInputImage = (ctx, item, indexValue) => {
   return new Promise((resolve, reject) => {
     let image = document.createElement('img')
     image.src = files[indexValue]
     image.onload = () => {
+      ctx.save()
       image.width = Number(item.width)
       image.height = Number(item.height)
       if (item.filter) {
         ctx.filter = item.filter
       }
+      if (item.rotate) {
+        ctx.rotate((item.rotate * Math.PI) / 180)
+      }
+
       ctx.drawImage(
         image,
         Number(item.x),
@@ -69,31 +74,35 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
         image.width,
         image.height
       )
-      if (item.rotate) {
-        drawRotated(item.rotate, ctx, canvas, image, item)
+      if (item.translate) {
+        ctx.translate(item.translate.x, item.translate.y)
+      }
+      if (item.skew) {
+        ctx.setTransform(1, item.skew.x, item.skew.y, 1, 0, 0)
       }
+      ctx.restore()
       resolve()
     }
   })
 }
 
 const drawRotated = (degrees, ctx, canvas, image, item) => {
-  console.log(image)
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  // 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)
+  // ctx.translate(item.x, item.y)
 
   // rotate the canvas to the specified degrees
-  ctx.rotate((degrees * Math.PI) / 180)
+  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)
+  // ctx.drawImage(image, -image.width / 2, -image.width / 2)
 
   // we’re done with the rotating so restore the unrotatedctx
   ctx.restore()
@@ -118,7 +127,7 @@ const drawImage = () => {
       })
     ).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})`)

data/assets/js/photo-effects.json

@@ -9,46 +9,13 @@
                 "perspective": "",
                 "height": 300,
                 "width": 300,
-                "x": 200,
-                "y": 200,
+                "translate": {
+                    "x": -5,
+                    "y": -10
+                },
+                "x": 100,
+                "y": 100,
                 "id": "file-1"
-            },
-            {
-                "label": "",
-                "id": "text-1",
-                "type": "text",
-                "x": "100",
-                "y": "100",
-                "color": "red",
-                "rotate": 10,
-                "fontFamily": "Calligraphy",
-                "fontPath": "/assets/fonts/Calligraphy.ttf",
-                "fontWeight": "bold",
-                "fontSize": 50
-            },
-            {
-                "type": "image",
-                "imagePath": "",
-                "filter": "grayscale(100%)",
-                "perspective": "",
-                "height": 300,
-                "width": 300,
-                "rotate": 1,
-                "x": 0,
-                "y": 0,
-                "id": "file-3"
-            },
-            {
-                "label": "",
-                "id": "text-2",
-                "type": "text",
-                "x": "200",
-                "y": "200",
-                "color": "red",
-                "fontFamily": "Calligraphy",
-                "fontPath": "/assets/fonts/Calligraphy.ttf",
-                "fontWeight": "bold",
-                "fontSize": 50
             }
         ]
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 2.2.5
+  version: 2.2.6
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-23 00:00:00.000000000 Z
+date: 2022-08-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll