From ba8ecafe291b6adace776fa65ddaccd3fafa50cc Mon Sep 17 00:00:00 2001
From: kylehue <apeuda69@gmail.com>
Date: Fri, 29 Mar 2024 00:02:46 +0800
Subject: [PATCH] fix: disable all image smoothing

---
 src/components/material-manager-item.vue  | 10 +++++++++-
 src/designer/Designer.ts                  |  1 +
 src/panes/material-area/material-item.vue |  1 +
 src/utils/MaterialTexture.ts              |  2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/material-manager-item.vue b/src/components/material-manager-item.vue
index b66e403..1bd4327 100644
--- a/src/components/material-manager-item.vue
+++ b/src/components/material-manager-item.vue
@@ -208,7 +208,9 @@ const isVerticallyFlipped = ref(
 );
 
 async function handleDuplicateMaterial() {
-   const duplicatedMaterial = await projectStore.duplicateMaterial(props.material);
+   const duplicatedMaterial = await projectStore.duplicateMaterial(
+      props.material
+   );
    if (!duplicatedMaterial) return;
    projectStore.saveState(
       "material-duplicate",
@@ -422,3 +424,9 @@ watch(isVerticallyFlipped, () => {
    handleMaterialChangeVerticallyFlipped();
 });
 </script>
+
+<style scoped lang="scss">
+img {
+   image-rendering: pixelated;
+}
+</style>
diff --git a/src/designer/Designer.ts b/src/designer/Designer.ts
index 2df946c..dfc547c 100644
--- a/src/designer/Designer.ts
+++ b/src/designer/Designer.ts
@@ -246,6 +246,7 @@ export class Designer {
                      x: tx,
                      y: ty,
                   } = this.getTransformedImageInfo(material);
+                  ctx.imageSmoothingEnabled = false;
                   ctx.drawImage(image, x + tx, y + ty);
                }
                if (this.settingsStore.designerArea.showMatrixId) {
diff --git a/src/panes/material-area/material-item.vue b/src/panes/material-area/material-item.vue
index 683903f..05c8320 100644
--- a/src/panes/material-area/material-item.vue
+++ b/src/panes/material-area/material-item.vue
@@ -140,6 +140,7 @@ function handleRightClick(e: MouseEvent) {
 
    img {
       user-select: none !important;
+      image-rendering: pixelated;
    }
 }
 </style>
diff --git a/src/utils/MaterialTexture.ts b/src/utils/MaterialTexture.ts
index b3f5d2e..4b3a877 100644
--- a/src/utils/MaterialTexture.ts
+++ b/src/utils/MaterialTexture.ts
@@ -57,7 +57,6 @@ export class MaterialTexture {
       this.imageCanvas.width = rotatedWidth;
       this.imageCanvas.height = rotatedHeight;
 
-      this.ctx.imageSmoothingEnabled = false;
       this.ctx.save();
       this.ctx.translate(rotatedWidth / 2, rotatedHeight / 2);
       this.ctx.rotate(angle);
@@ -65,6 +64,7 @@ export class MaterialTexture {
          this.isHorizontallyFlipped ? -1 : 1,
          this.isVerticallyFlipped ? -1 : 1
       );
+      this.ctx.imageSmoothingEnabled = false;
       this.ctx.drawImage(
          this.origImageCanvas,
          -origWidth / 2,