make margin generation efficient

Author: kirjavascript

app/components/mappings/rotate.js

@@ -1,34 +1,32 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 import { exportSprite } from '#formats/image';
-import rotSprite, { Pixels } from '#util/rotsprite';
-import { Input, Slider, Item } from '#ui';
+import rotSprite, { Pixels, addMarginToImageData, getRotateDiagonal } from '#util/rotsprite';
+import { Input, Slider, Item, SelectBase, Button } from '#ui';
 import { mappingState } from './state';
 
 export const Rotate = observer(() => {
     const canvasRef = useRef();
 
+    const [value, setValue] = useState(0);
+
     useEffect(() => {
         const spriteCanv = exportSprite(environment.currentSprite);
         const spriteCtx = spriteCanv.getContext('2d');
 
         const { width, height } = spriteCanv;
-        spriteCtx.scale(2, 2)
 
         const imageData = spriteCtx.getImageData(0, 0, width, height);
 
-        const diagonal =
-            1 + (0 | (2 * Math.sqrt(width ** 2 / 4 + height ** 2 / 4)));
-
-        const xMargin = (diagonal - width) / 2;
-        const yMargin = (diagonal - height) / 2;
+        const { diagonal, xMargin, yMargin } = getRotateDiagonal(width, height);
 
-        spriteCanv.width = diagonal;
-        spriteCanv.height = diagonal;
-        spriteCtx.putImageData(imageData, xMargin, yMargin);
-
-        const spriteData = spriteCtx.getImageData(0, 0, diagonal, diagonal);
+        const spriteData = addMarginToImageData(
+            spriteCtx,
+            imageData,
+            xMargin,
+            yMargin,
+        );
 
         const data = new Uint32Array(diagonal ** 2);
 
@@ -64,9 +62,6 @@ export const Rotate = observer(() => {
         canvas.width = diagonal;
         canvas.height = diagonal;
         ctx.putImageData(rotatedData, 0, 0);
-        canvas.style.width = '400px';
-        canvas.style.imageRendering = 'pixelated';
-        canvas.style.backgroundColor = 'red';
     }, [environment.currentSprite, mappingState.rotateAngle]);
 
     const assertInput = (num) => {
@@ -79,6 +74,11 @@ export const Rotate = observer(() => {
         <div className="rotsprite">
             <Item>Rotate Sprite</Item>
             <canvas ref={canvasRef} />
+            <SelectBase
+                options={[...Array(7).keys()].map(d => String(d*90))}
+                value={value}
+                onChange={e => setValue(e.value)}
+            />
             <Input
                 store={mappingState}
                 assert={assertInput}
@@ -92,6 +92,8 @@ export const Rotate = observer(() => {
                 store={mappingState}
                 accessor="rotateAngle"
             />
+            <Button color="red">Reimport</Button>
+            <Button color="magenta">close</Button>
         </div>
     );
 });

app/components/ui/index.js

@@ -2,6 +2,6 @@ export { Button } from './button';
 export { Item } from './item';
 export { Input } from './input';
 export { File } from './file';
-export { Select } from './select';
+export { Select, SelectBase } from './select';
 export { Slider } from './slider';
 export { Checkbox } from './checkbox';

app/components/ui/select/index.js

@@ -69,3 +69,15 @@ export const Select = observer(class Select extends Component {
     }
 
 });
+
+export function SelectBase({ label, ...props }) {
+    return <div className="row select">
+        {label && <span>
+            {label}
+            &emsp;
+    </span>}
+        <Dropdown
+            {...props}
+        />
+    </div>;
+}

app/util/rotsprite.js

@@ -1,6 +1,6 @@
 // original algorithm Xenowhirl
 // stole code from ChaseMor/pxt-arcade-rotsprite
-// generated the rest with chatGPT
+// some generated with chatGPT
 
 export default function rotSprite(image, angle) {
     image = scale2xImage(image);
@@ -19,6 +19,7 @@ function scale2xImage(original) {
             const b = original.getPixel(x + 1, y);
             const c = original.getPixel(x - 1, y);
             const d = original.getPixel(x, y + 1);
+
             if (c == a && c != d && a != b) {
                 scaled.setPixel(x << 1, y << 1, a);
             } else {
@@ -43,6 +44,7 @@ function scale2xImage(original) {
     }
     return scaled;
 }
+
 function rotateAndReduceImage(original, angle) {
     let rotated = Pixels.create(original.width >> 3, original.height >> 3);
 
@@ -112,4 +114,67 @@ export class Pixels {
         }
         return clonedImage;
     };
+
+    scale = (factor) => {
+        // Calculate the new dimensions of the scaled image
+        const scaledWidth = this.width * factor;
+        const scaledHeight = this.height * factor;
+
+        // Create a new Image object with the new dimensions
+        const scaledImage = new Pixels(scaledWidth, scaledHeight);
+
+        // Loop through the pixels of the scaled image
+        for (let y = 0; y < scaledHeight; y++) {
+            for (let x = 0; x < scaledWidth; x++) {
+                // Calculate the coordinates of the corresponding pixel in the original image
+                const originalX = Math.floor(x / factor);
+                const originalY = Math.floor(y / factor);
+
+                // Set the pixel in the scaled image to the nearest pixel in the original image
+                scaledImage.setPixel(x, y, this.getPixel(originalX, originalY));
+            }
+        }
+
+        return scaledImage;
+    };
+}
+
+
+export function addMarginToImageData(ctx, imageData, xMargin, yMargin) {
+  // Create a new ImageData object with the new dimensions, including the margin.
+  const newImageData = ctx.createImageData(
+    imageData.width + xMargin * 2,
+    imageData.height + yMargin * 2
+  );
+
+  // Loop through the original image data and copy the pixel values to the new
+  // ImageData object, taking the margin into account.
+  for (let row = 0; row < imageData.height; row++) {
+    for (let col = 0; col < imageData.width; col++) {
+      const sourcePixel = [        imageData.data[(row * imageData.width + col) * 4 + 0],
+        imageData.data[(row * imageData.width + col) * 4 + 1],
+        imageData.data[(row * imageData.width + col) * 4 + 2],
+        imageData.data[(row * imageData.width + col) * 4 + 3]
+      ];
+
+      const destRow = row + yMargin;
+      const destCol = col + xMargin;
+      for (let i = 0; i < 4; i++) {
+        newImageData.data[(destRow * newImageData.width + destCol) * 4 + i] =
+          sourcePixel[i];
+      }
+    }
+  }
+
+  return newImageData;
+}
+
+export function getRotateDiagonal(width, height) {
+    const diagonal =
+        1 + (0 | (2 * Math.sqrt(width ** 2 / 4 + height ** 2 / 4)));
+
+    const xMargin = Math.round((diagonal - width) / 2);
+    const yMargin = Math.round((diagonal - height) / 2);
+
+    return { diagonal: xMargin * 2 + width, xMargin, yMargin };
 }

styles/components/import.scss

@@ -60,7 +60,6 @@
 
         canvas {
             z-index: 1;
-            image-rendering: pixelated;
         }
 
         .import-canvas {

styles/components/rotsprite.scss

@@ -6,11 +6,18 @@
     }
     box-sizing: content-box;
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     background-color: $black;
     left: 15px;
     right: 15px;
     box-shadow: 2px 2px 4px $black;
     padding: 15px;
     margin-top: 100px;
+
+    canvas {
+        background-image: url(../images/t.png);
+        border: 3px solid $grey;
+        width: 400px;
+        height: 400px;
+    }
 }

styles/main.scss

@@ -52,12 +52,15 @@ a {
     z-index: -1;
 }
 
+canvas {
+    image-rendering: pixelated;
+}
+
 .canvas-debug {
     position: absolute;
     z-index: 10;
     bottom: 20px;
     left: 20px;
-    image-rendering: pixelated;
     background-color: rgba(255,0,0,0.5);
 }