// ==UserScript==
// @name         图片移动缩放旋转
// @version      1.0.1
// @description  shift+alt+z/x放大/缩小，+q/e左/右旋转，wasd移动，+r恢复,+c重新读取图片。
// @author       dianclar
// @match        *://*/*
// @license      GPL
// @grant        none
// @namespace https://greasyfork.org/users/1538433
// @downloadURL none
// ==/UserScript==

;(function () {
  'use strict'

  //可以修改缩放程度
  const stylevalue = 10
  //可以修改移动程度
  const locationvalue = 10
  //可以修改旋转程度
  const rotationvalue = 90
  let stylei = 0
  let rotation = 0
  let xi = 0
  let yi = 0

  let imglist = []
  let imgs = document.querySelectorAll('img')
  document.addEventListener('keydown', function (event) {
    if (event.shiftKey && event.altKey && event.code === 'KeyC') {
      imgs = document.querySelectorAll('img')
      imgpaly()
    }
  })
  function imgpaly() {
    if (!imgs.length == 0) {
      imgs.forEach((img) => {
        img.style.objectFit = 'contain'
        const rect = img.getBoundingClientRect()
        imglist.push({
          width: rect.width,
          height: rect.height,
          x: rect.x,
          y: rect.y
        })
      })
      console.log(imglist)
      document.addEventListener('keydown', function (event) {
        if (event.shiftKey && event.altKey && event.code === 'KeyZ') {
          stylei--
          imgs.forEach((img, i) => {
            img.style.height = imglist[i].height * (stylevalue * stylei + 100) * 0.01 + 'px'
            img.style.width = imglist[i].width * (stylevalue * stylei + 100) * 0.01 + 'px'
          })
        }
        if (event.shiftKey && event.altKey && event.code === 'KeyX') {
          stylei++
          imgs.forEach((img, i) => {
            img.style.height = imglist[i].height * (stylevalue * stylei + 100) * 0.01 + 'px'
            img.style.width = imglist[i].width * (stylevalue * stylei + 100) * 0.01 + 'px'
          })
        }

        if (event.shiftKey && event.altKey && event.code === 'KeyE') {
          rotation += rotationvalue
          imgs.forEach((img) => {
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }
        if (event.shiftKey && event.altKey && event.code === 'KeyQ') {
          rotation -= rotationvalue
          imgs.forEach((img) => {
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }

        if (event.shiftKey && event.altKey && event.code === 'KeyW') {
          yi--
          imgs.forEach((img) => {
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }
        if (event.shiftKey && event.altKey && event.code === 'KeyS') {
          yi++
          imgs.forEach((img) => {
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }
        if (event.shiftKey && event.altKey && event.code === 'KeyA') {
          xi--
          imgs.forEach((img) => {
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }
        if (event.shiftKey && event.altKey && event.code === 'KeyD') {
          xi++
          imgs.forEach((img) => {
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }

        if (event.shiftKey && event.altKey && event.code === 'KeyR') {
          stylei = 0
          rotation = 0
          xi = 0
          yi = 0
          imgs.forEach((img,i) => {
            img.style.height = imglist[i].height * (stylevalue * stylei + 100) * 0.01 + 'px'
            img.style.width = imglist[i].width * (stylevalue * stylei + 100) * 0.01 + 'px'
            img.style.transform = `translateX(${xi * locationvalue}px) translateY(${yi * locationvalue}px) rotate(${rotation}deg)`
          })
        }
      })
    }
  }
  imgpaly()
})()