From c652a37562e6e218b4674db027f690e26055b1ef Mon Sep 17 00:00:00 2001
From: Slipn3r <61992469+Slipn3r@users.noreply.github.com>
Date: Sun, 29 Oct 2023 14:23:48 +0300
Subject: [PATCH] Feature/refactor paint page (#41)

* refactor: Refactor Paint page

* refactor: Refactor PixelEditor
---
 frontend/src/components/PixelEditor.vue | 350 +++++++++++-------------
 frontend/src/pages/Paint.vue            | 248 ++++++++---------
 2 files changed, 277 insertions(+), 321 deletions(-)

diff --git a/frontend/src/components/PixelEditor.vue b/frontend/src/components/PixelEditor.vue
index 3906c0c..00947fd 100644
--- a/frontend/src/components/PixelEditor.vue
+++ b/frontend/src/components/PixelEditor.vue
@@ -83,209 +83,189 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref } from 'vue'
+<script setup>
+import { ref, defineEmits, defineExpose, computed, watch, onMounted } from 'vue'
 import PixelEditor from '../util/pixeleditor/pixeleditor'
 import DitherDialog from 'src/components/DitherDialog.vue'
 import { exportFile } from 'quasar'
 
-export default defineComponent({
-  name: 'PixelEditor',
+const emit = defineEmits(['showNotif'])
 
-  components: {
-    DitherDialog
-  },
-
-  setup () {
-    return {
-      flags: ref({
-        checkerboard: false,
-        imageFileLoading: false,
-        ditherDialog: false
-      }),
-      zoomModel: ref(4),
-      toolModel: ref('pencil'),
-      pe: ref(null),
-      uploadedImage: ref(null)
-    }
-  },
-
-  watch: {
-    zoomModel (newValue, oldValue) {
-      if (!/^[0-9]*$/.test(newValue)) {
-        return
-      }
-      this.pe.resize({ zoom: newValue })
-    },
-    toolModel (newValue, oldValue) {
-      switch (newValue) {
-        case 'pencil':
-          this.pe.currentColor = 1
-          this.pe.mode = 'draw'
-          break
-        case 'eraser':
-          this.pe.currentColor = 0
-          this.pe.mode = 'draw'
-          break
-        case 'line':
-          this.pe.currentColor = 1
-          this.pe.mode = 'line'
-          break
-        case 'rectangle':
-          this.pe.currentColor = 1
-          this.pe.mode = 'rect'
-          break
-        case 'fill':
-          this.pe.currentColor = 1
-          this.pe.mode = 'fill'
-          break
-      }
-    }
-  },
-
-  computed: {
-    zoomLimit () {
-      /* const containerWidth = document.querySelector('.paint').clientWidth
+const flags = ref({
+  checkerboard: false,
+  imageFileLoading: false,
+  ditherDialog: false
+})
+const zoomModel = ref(4)
+const toolModel = ref('pencil')
+const pe = ref(null)
+defineExpose({ pe })
+const uploadedImage = ref(null)
+
+const zoomLimit = computed(() => {
+  /* const containerWidth = document.querySelector('.paint').clientWidth
       const containerHeight = document.querySelector('.paint').clientHeight
       let max = 10
       if (containerWidth) {
         max = Math.round(Math.min(containerWidth / 128, containerHeight / 64))
       } */
-      return {
-        min: 1,
-        max: 8
-      }
-    }
-  },
-
-  methods: {
-    zoom ({ mul, val, offset }) {
-      let result
-      if (mul) {
-        result = this.zoomModel * mul
-      } else if (val) {
-        result = val
-      } else if (offset) {
-        result = this.zoomModel + offset
-      }
-      if (result < this.zoomLimit.min) {
-        this.zoomModel = this.zoomLimit.min
-      } else if (result > this.zoomLimit.max) {
-        this.zoomModel = this.zoomLimit.max
-      } else {
-        this.zoomModel = result
-      }
-    },
-
-    undo () {
-      this.pe.undo()
-    },
-    redo () {
-      this.pe.redo()
-    },
-    clear () {
-      this.pe.clear()
-      this.updateMirror()
-    },
+  return {
+    min: 1,
+    max: 8
+  }
+})
 
-    mouseUp () {
-      if (!this.pe) {
-        return
-      }
-      if (this.pe.drawing) {
-        if (this.pe.mode === 'line') {
-          this.pe.save()
-          this.pe.plotLine(this.pe.p0, this.pe.p1)
-          this.pe.draw()
-          this.pe.updated()
-        } else if (this.pe.mode === 'rect') {
-          this.pe.save()
-          this.pe.plotRect(this.pe.p0, this.pe.p1)
-          this.pe.draw()
-          this.pe.updated()
-        }
-        this.pe.drawing = false
-      }
-    },
+watch(zoomModel, (newValue) => {
+  if (!/^[0-9]*$/.test(newValue)) {
+    return
+  }
+  pe.value.resize({ zoom: newValue })
+})
+watch(toolModel, (newValue) => {
+  switch (newValue) {
+    case 'pencil':
+      pe.value.currentColor = 1
+      pe.value.mode = 'draw'
+      break
+    case 'eraser':
+      pe.value.currentColor = 0
+      pe.value.mode = 'draw'
+      break
+    case 'line':
+      pe.value.currentColor = 1
+      pe.value.mode = 'line'
+      break
+    case 'rectangle':
+      pe.value.currentColor = 1
+      pe.value.mode = 'rect'
+      break
+    case 'fill':
+      pe.value.currentColor = 1
+      pe.value.mode = 'fill'
+      break
+  }
+})
 
-    triggerUpload () {
-      document.querySelector('.file-upload').click()
-    },
-    upload (event) {
-      this.flags.imageFileLoading = true
-      try {
-        const file = event.target.files[0]
-        if (file) {
-          const reader = new FileReader()
-          reader.readAsDataURL(file)
+const zoom = ({ mul, val, offset }) => {
+  let result
+  if (mul) {
+    result = zoomModel.value * mul
+  } else if (val) {
+    result = val
+  } else if (offset) {
+    result = zoomModel.value + offset
+  }
+  if (result < zoomLimit.value.min) {
+    zoomModel.value = zoomLimit.value.min
+  } else if (result > zoomLimit.value.max) {
+    zoomModel.value = zoomLimit.value.max
+  } else {
+    zoomModel.value = result
+  }
+}
+const undo = () => {
+  pe.value.undo()
+}
+const redo = () => {
+  pe.value.redo()
+}
+const clear = () => {
+  pe.value.clear()
+  updateMirror()
+}
+const drawImage = (imageData) => {
+  flags.value.ditherDialog = false
+  const pixelData = []
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    if (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2] === 0) {
+      pixelData.push(1)
+    } else {
+      pixelData.push(0)
+    }
+  }
+  pe.value.setData(pixelData)
+  updateMirror()
+}
 
-          const img = new Image()
-          reader.onload = event => {
-            if (event.target.readyState !== FileReader.DONE) {
-              return
-            }
-            img.onload = () => {
-              document.querySelector('.file-upload').value = null
-              this.flags.imageFileLoading = false
-              this.uploadedImage = img
-              this.flags.ditherDialog = true
-            }
-            img.src = event.target.result
-          }
+const mouseUp = () => {
+  if (!pe.value) {
+    return
+  }
+  if (pe.value.drawing) {
+    if (pe.value.mode === 'line') {
+      pe.value.save()
+      pe.value.plotLine(pe.value.p0, pe.value.p1)
+      pe.value.draw()
+      pe.value.updated()
+    } else if (pe.value.mode === 'rect') {
+      pe.value.save()
+      pe.value.plotRect(pe.value.p0, pe.value.p1)
+      pe.value.draw()
+      pe.value.updated()
+    }
+    pe.value.drawing = false
+  }
+}
+
+const triggerUpload = () => {
+  document.querySelector('.file-upload').click()
+}
+const upload = (event) => {
+  flags.value.imageFileLoading = true
+  try {
+    const file = event.target.files[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+
+      const img = new Image()
+      reader.onload = event => {
+        if (event.target.readyState !== FileReader.DONE) {
+          return
         }
-      } catch (error) {
-        this.flags.imageFileLoading = false
-        console.error(error)
-      }
-    },
-
-    drawImage (imageData) {
-      // console.log(imageData)
-      this.flags.ditherDialog = false
-      const pixelData = []
-      for (let i = 0; i < imageData.data.length; i += 4) {
-        if (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2] === 0) {
-          pixelData.push(1)
-        } else {
-          pixelData.push(0)
+        img.onload = () => {
+          document.querySelector('.file-upload').value = null
+          flags.value.imageFileLoading = false
+          uploadedImage.value = img
+          flags.value.ditherDialog = true
         }
+        img.src = event.target.result
       }
-      this.pe.setData(pixelData)
-      this.updateMirror()
-      // console.log(this.pe)
-    },
-
-    async download () {
-      const blob = await this.pe.toBlob()
-      const status = exportFile(`Paint_${new Date().toISOString()}.png`, blob)
-      if (!status) {
-        console.error('Failed to download image: permission denied')
-        this.$emit('showNotif', {
-          message: 'Failed to download image: permission denied',
-          color: 'negative'
-        })
-      }
-    },
-
-    updateMirror () {
-      const mirror = document.querySelector('.mirror')
-      const imageData = this.pe.toImageData()
-      mirror.getContext('2d').putImageData(imageData, 0, 0)
-    },
-
-    createEditor () {
-      this.pe = new PixelEditor({
-        width: 128,
-        height: 64,
-        container: document.querySelector('.pe-container'),
-        onUpdate: this.updateMirror
-      })
     }
-  },
-
-  mounted () {
-    this.createEditor()
+  } catch (error) {
+    flags.value.imageFileLoading = false
+    console.error(error)
+  }
+}
+const download = async () => {
+  const blob = await pe.value.toBlob()
+  const status = exportFile(`Paint_${new Date().toISOString()}.png`, blob)
+  if (!status) {
+    console.error('Failed to download image: permission denied')
+    emit('showNotif', {
+      message: 'Failed to download image: permission denied',
+      color: 'negative'
+    })
   }
+}
+
+const updateMirror = () => {
+  const mirror = document.querySelector('.mirror')
+  const imageData = pe.value.toImageData()
+  mirror.getContext('2d').putImageData(imageData, 0, 0)
+}
+
+const createEditor = () => {
+  pe.value = new PixelEditor({
+    width: 128,
+    height: 64,
+    container: document.querySelector('.pe-container'),
+    onUpdate: updateMirror
+  })
+}
+
+onMounted(() => {
+  createEditor()
 })
 </script>
 
diff --git a/frontend/src/pages/Paint.vue b/frontend/src/pages/Paint.vue
index 42fd6a7..e970232 100644
--- a/frontend/src/pages/Paint.vue
+++ b/frontend/src/pages/Paint.vue
@@ -4,155 +4,131 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, ref } from 'vue'
+<script setup>
+import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount } from 'vue'
 import PixelEditor from 'src/components/PixelEditor.vue'
 import { imageDataToXBM } from '../util/pixeleditor/xbm'
 
-export default defineComponent({
-  name: 'Paint',
-
-  props: {
-    flipper: Object,
-    connected: Boolean,
-    rpcActive: Boolean,
-    info: Object
-  },
-
-  components: {
-    PixelEditor
-  },
-
-  setup () {
-    return {
-      componentName: 'Paint',
-
-      flags: ref({
-        restarting: false,
-        rpcActive: false,
-        rpcToggling: false,
-        pixelGrid: false
-      }),
-      autoStreaming: ref({
-        enabled: true,
-        interval: null,
-        delay: 500
-      }),
-      backlightInterval: null
-    }
-  },
+const props = defineProps({
+  flipper: Object,
+  connected: Boolean,
+  rpcActive: Boolean,
+  info: Object
+})
 
-  methods: {
-    async startRpc () {
-      this.flags.rpcToggling = true
-      await this.flipper.startRPCSession()
-        .catch(error => {
-          console.error(error)
-          this.$emit('log', {
-            level: 'error',
-            message: `${this.componentName}: Error while starting RPC: ${error.toString()}`
-          })
-        })
-      this.flags.rpcActive = true
-      this.$emit('setRpcStatus', true)
-      this.flags.rpcToggling = false
-      this.$emit('log', {
-        level: 'info',
-        message: `${this.componentName}: RPC started`
-      })
-    },
+const emit = defineEmits(['setRpcStatus', 'log', 'showNotif'])
 
-    async stopRpc () {
-      this.flags.rpcToggling = true
-      await this.flipper.setReadingMode('text', 'promptBreak')
-      this.flags.rpcActive = false
-      this.$emit('setRpcStatus', false)
-      this.flags.rpcToggling = false
-      this.$emit('log', {
-        level: 'info',
-        message: `${this.componentName}: RPC stopped`
+const componentName = 'Paint'
+const flags = ref({
+  restarting: false,
+  rpcActive: false,
+  rpcToggling: false,
+  pixelGrid: false
+})
+const autoStreaming = ref({
+  enabled: true,
+  interval: null,
+  delay: 500
+})
+let backlightInterval = null
+const editor = ref(null)
+
+const startRpc = async () => {
+  flags.value.rpcToggling = true
+  await props.flipper.startRPCSession()
+    .catch(error => {
+      console.error(error)
+      emit('log', {
+        level: 'error',
+        message: `${componentName}: Error while starting RPC: ${error.toString()}`
       })
-    },
-
-    async startVirtualDisplay () {
-      await this.flipper.RPC('guiStartVirtualDisplay')
-        .catch(error => {
-          this.rpcErrorHandler(error, 'guiStartVirtualDisplay')
-          this.$emit('showNotif', {
-            message: 'Couldn\'t start virtual display session',
-            color: 'negative'
-          })
-        })
-
-      await this.enableBacklight()
-      this.backlightInterval = setInterval(this.enableBacklight, 15000)
-
-      if (this.autoStreaming.enabled) {
-        this.autoStream()
-      }
-    },
-    async stopVirtualDisplay () {
-      await this.flipper.RPC('guiStopVirtualDisplay')
-        .catch(error => this.rpcErrorHandler(error, 'guiStopVirtualDisplay'))
-    },
-    async enableBacklight () {
-      await this.flipper.RPC('guiSendInputEvent', { key: 'OK', type: 'PRESS' })
-        .catch(error => this.rpcErrorHandler(error, 'guiSendInputEvent'))
-      await this.flipper.RPC('guiSendInputEvent', { key: 'OK', type: 'SHORT' })
-        .catch(error => this.rpcErrorHandler(error, 'guiSendInputEvent'))
-      await this.flipper.RPC('guiSendInputEvent', { key: 'OK', type: 'RELEASE' })
-        .catch(error => this.rpcErrorHandler(error, 'guiSendInputEvent'))
-    },
-    async sendFrame () {
-      const imageData = this.$refs.editor.pe.toImageData()
-      const xbmBytes = imageDataToXBM(imageData)
-      await this.flipper.RPC('guiScreenFrame', { data: new Uint8Array(xbmBytes) })
-    },
-    autoStream () {
-      if (this.autoStreaming.enabled) {
-        if (this.autoStreaming.interval) {
-          clearInterval(this.autoStreaming.interval)
-        }
-        this.autoStreaming.interval = setInterval(this.sendFrame, this.autoStreaming.delay)
-      } else {
-        clearInterval(this.autoStreaming.interval)
-      }
-    },
-
-    rpcErrorHandler (error, command) {
-      error = error.toString()
-      this.$emit('showNotif', {
-        message: `RPC error in command '${command}': ${error}`,
+    })
+  flags.value.rpcActive = true
+  emit('setRpcStatus', true)
+  flags.value.rpcToggling = false
+  emit('log', {
+    level: 'info',
+    message: `${componentName}: RPC started`
+  })
+}
+
+const startVirtualDisplay = async () => {
+  await props.flipper.RPC('guiStartVirtualDisplay')
+    .catch(error => {
+      rpcErrorHandler(error, 'guiStartVirtualDisplay')
+      emit('showNotif', {
+        message: 'Couldn\'t start virtual display session',
         color: 'negative'
       })
-      this.$emit('log', {
-        level: 'error',
-        message: `${this.componentName}: RPC error in command '${command}': ${error}`
-      })
-    },
+    })
 
-    async start () {
-      this.flags.rpcActive = this.rpcActive
-      if (!this.rpcActive) {
-        await this.startRpc()
-      }
-    }
-  },
+  await enableBacklight()
+  backlightInterval = setInterval(enableBacklight, 15000)
 
-  async mounted () {
-    if (this.connected && this.info !== null && this.info.doneReading) {
-      await this.start()
+  if (autoStreaming.value.enabled) {
+    autoStream()
+  }
+}
+const stopVirtualDisplay = async () => {
+  await props.flipper.RPC('guiStopVirtualDisplay')
+    .catch(error => rpcErrorHandler(error, 'guiStopVirtualDisplay'))
+}
+const enableBacklight = async () => {
+  await props.flipper.RPC('guiSendInputEvent', { key: 'OK', type: 'PRESS' })
+    .catch(error => rpcErrorHandler(error, 'guiSendInputEvent'))
+  await props.flipper.RPC('guiSendInputEvent', { key: 'OK', type: 'SHORT' })
+    .catch(error => rpcErrorHandler(error, 'guiSendInputEvent'))
+  await props.flipper.RPC('guiSendInputEvent', { key: 'OK', type: 'RELEASE' })
+    .catch(error => rpcErrorHandler(error, 'guiSendInputEvent'))
+}
+const sendFrame = async () => {
+  const imageData = editor.value.pe.toImageData()
+  const xbmBytes = imageDataToXBM(imageData)
+  await props.flipper.RPC('guiScreenFrame', { data: new Uint8Array(xbmBytes) })
+}
+const autoStream = () => {
+  if (autoStreaming.value.enabled) {
+    if (autoStreaming.value.interval) {
+      clearInterval(autoStreaming.value.interval)
     }
+    autoStreaming.value.interval = setInterval(sendFrame, autoStreaming.value.delay)
+  } else {
+    clearInterval(autoStreaming.value.interval)
+  }
+}
+
+const rpcErrorHandler = (error, command) => {
+  error = error.toString()
+  emit('showNotif', {
+    message: `RPC error in command '${command}': ${error}`,
+    color: 'negative'
+  })
+  emit('log', {
+    level: 'error',
+    message: `${componentName}: RPC error in command '${command}': ${error}`
+  })
+}
+
+const start = () => {
+  flags.value.rpcActive = props.rpcActive
+  if (!props.rpcActive) {
+    startRpc()
+  }
+}
+
+onMounted(() => {
+  if (props.connected && props.info !== null && props.info.doneReading) {
+    start()
+  }
 
-    this.startVirtualDisplay()
-  },
+  startVirtualDisplay()
+})
 
-  beforeUnmount () {
-    if (this.autoStreaming.interval) {
-      clearInterval(this.autoStreaming.interval)
-    }
-    clearInterval(this.backlightInterval)
-    this.stopVirtualDisplay()
+onBeforeUnmount(() => {
+  if (autoStreaming.value.interval) {
+    clearInterval(autoStreaming.value.interval)
   }
+  clearInterval(backlightInterval)
+  stopVirtualDisplay()
 })
 </script>