Rescue operation

.prettierrc.json

@@ -0,0 +1 @@
+{}

CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## [v0.5.0] - 2023-08-20
+### Added
+- History system with undo/redo
+- Pencil, eraser, line, and bucket tools
+- Renewed structure of the project andd add `#` imports
+
+### Changed
+- Optimized action cancellation (5x faster) and reduced memory usage in pixel layer by 30%
+
+## [Unreleased]
+### Added
+
+- Tool management (WIP)
+- Layer support (WIP)

README.md

@@ -7,6 +7,7 @@ A simple pixel editor web application that allows users to create and edit pixel
 - [Overview](#overview)
 - [Current Status](#current-status)
 - [Planned Features](#planned-features)
+- [Recent Improvements](#recent-improvements)
 - [Installation](#installation)
 - [Running Tests](#running-tests)
 - [License](#license)
@@ -35,6 +36,16 @@ The `HistorySystem` module is implemented to manage the undo and redo actions.
 - Editiable color palletes
 - Responsive design
 
+## Recent Improvements
+
+### Performance Optimizations (v0.5)
+- 🚀 Undo/redo system now handles 1000-step actions 5x faster (384ms → 65ms)
+- 🧹 Reduced memory usage by 30% in history operations
+
+### Core Enhancements
+- Refactored to modular architecture (CanvasManager, ToolManager, etc.)
+- Implemented robust history system with merge optimization
+
 ## Installation
 
 To run the pixel editor locally, follow these steps:

dist/core/algorithms/graphic-algorithms.js

@@ -0,0 +1,110 @@
+export function drawPixel({ x, y, diameter = 5, isSquare = false, setPixel }) {
+    diameter = Math.floor(diameter);
+    const radius = Math.floor(0.5 * diameter); // Pre-calculate radius
+    const radiusSquared = radius * radius; // Pre-calculate radius squared for performance
+    const startX = x - radius;
+    const startY = y - radius;
+    const endX = Math.max(x + 1, x + radius);
+    const endY = Math.max(y + 1, y + radius);
+    if (isSquare)
+        // For squared area
+        for (let currentY = startY; currentY < endY; currentY++)
+            for (let currentX = startX; currentX < endX; currentX++) {
+                setPixel(currentX, currentY);
+            }
+    else
+        // For circular area
+        for (let currentY = startY; currentY < endY; currentY++)
+            for (let currentX = startX; currentX < endX; currentX++) {
+                const dx = x - currentX - 0.5;
+                const dy = y - currentY - 0.5;
+                if (dx * dx + dy * dy <= radiusSquared) {
+                    setPixel(currentX, currentY);
+                }
+            }
+}
+export function drawLine({ x0, y0, x1, y1, setPixel }) {
+    // Standard Bresenham's algorithm
+    const dx = Math.abs(x1 - x0);
+    const dy = Math.abs(y1 - y0);
+    const sx = x0 < x1 ? 1 : -1;
+    const sy = y0 < y1 ? 1 : -1;
+    let err = dx - dy;
+    while (true) {
+        setPixel(x0, y0);
+        if (x0 === x1 && y0 === y1)
+            break;
+        const e2 = 2 * err;
+        if (e2 > -dy) {
+            err -= dy;
+            x0 += sx;
+        }
+        if (e2 < dx) {
+            err += dx;
+            y0 += sy;
+        }
+    }
+}
+export function drawVaryingThicknessLine({ x0, y0, x1, y1, thicknessFunction, setPixel }) {
+    const drawPrepLine = (x0, y0, dx, dy, width, initError, initWidth, direction) => {
+        const stepX = dx > 0 ? 1 : -1;
+        const stepY = dy > 0 ? 1 : -1;
+        dx *= stepX;
+        dy *= stepY;
+        const threshold = dx - 2 * dy;
+        const diagonalError = -2 * dx;
+        const stepError = 2 * dy;
+        const widthThreshold = 2 * width * Math.sqrt(dx * dx + dy * dy);
+        let error = direction * initError;
+        let y = y0;
+        let x = x0;
+        let thickness = dx + dy - direction * initWidth;
+        while (thickness <= widthThreshold) {
+            setPixel(x, y);
+            if (error > threshold) {
+                x -= stepX * direction;
+                error += diagonalError;
+                thickness += stepError;
+            }
+            error += stepError;
+            thickness -= diagonalError;
+            y += stepY * direction;
+        }
+    };
+    const drawLineRightLeftOctents = (x0, y0, x1, y1, thicknessFunction) => {
+        const stepX = x1 - x0 > 0 ? 1 : -1;
+        const stepY = y1 - y0 > 0 ? 1 : -1;
+        const dx = (x1 - x0) * stepX;
+        const dy = (y1 - y0) * stepY;
+        const threshold = dx - 2 * dy;
+        const diagonalError = -2 * dx;
+        const stepError = 2 * dy;
+        let error = 0;
+        let prepError = 0;
+        let y = y0;
+        let x = x0;
+        for (let i = 0; i < dx; i++) {
+            [1, -1].forEach((dir) => {
+                drawPrepLine(x, y, dx * stepX, dy * stepY, thicknessFunction(i) / 2, prepError, error, dir);
+            });
+            if (error > threshold) {
+                y += stepY;
+                error += diagonalError;
+                if (prepError > threshold) {
+                    [1, -1].forEach((dir) => {
+                        drawPrepLine(x, y, dx * stepX, dy * stepY, thicknessFunction(i) / 2, prepError + diagonalError + stepError, error, dir);
+                    });
+                    prepError += diagonalError;
+                }
+                prepError += stepError;
+            }
+            error += stepError;
+            x += stepX;
+        }
+    };
+    if (Math.abs(x1 - x0) < Math.abs(y1 - y0))
+        // if line is steep, flip along x = y axis, then do the function then flip the pixels again then draw
+        drawLineRightLeftOctents(y0, x0, y1, x1, thicknessFunction);
+    else
+        drawLineRightLeftOctents(x0, y0, x1, y1, thicknessFunction);
+}

dist/core/drawing-algorithms.js

@@ -0,0 +1,110 @@
+export function drawPixel({ x, y, diameter = 5, isSquare = false, setPixel }) {
+    diameter = Math.floor(diameter);
+    const radius = Math.floor(0.5 * diameter); // Pre-calculate radius
+    const radiusSquared = radius * radius; // Pre-calculate radius squared for performance
+    const startX = x - radius;
+    const startY = y - radius;
+    const endX = Math.max(x + 1, x + radius);
+    const endY = Math.max(y + 1, y + radius);
+    if (isSquare)
+        // For squared area
+        for (let currentY = startY; currentY < endY; currentY++)
+            for (let currentX = startX; currentX < endX; currentX++) {
+                setPixel(currentX, currentY);
+            }
+    else
+        // For circular area
+        for (let currentY = startY; currentY < endY; currentY++)
+            for (let currentX = startX; currentX < endX; currentX++) {
+                const dx = x - currentX - 0.5;
+                const dy = y - currentY - 0.5;
+                if (dx * dx + dy * dy <= radiusSquared) {
+                    setPixel(currentX, currentY);
+                }
+            }
+}
+export function drawLine({ x0, y0, x1, y1, setPixel }) {
+    // Standard Bresenham's algorithm
+    const dx = Math.abs(x1 - x0);
+    const dy = Math.abs(y1 - y0);
+    const sx = x0 < x1 ? 1 : -1;
+    const sy = y0 < y1 ? 1 : -1;
+    let err = dx - dy;
+    while (true) {
+        setPixel(x0, y0);
+        if (x0 === x1 && y0 === y1)
+            break;
+        const e2 = 2 * err;
+        if (e2 > -dy) {
+            err -= dy;
+            x0 += sx;
+        }
+        if (e2 < dx) {
+            err += dx;
+            y0 += sy;
+        }
+    }
+}
+export function drawVaryingThicknessLine({ x0, y0, x1, y1, thicknessFunction, setPixel }) {
+    const drawPrepLine = (x0, y0, dx, dy, width, initError, initWidth, direction) => {
+        const stepX = dx > 0 ? 1 : -1;
+        const stepY = dy > 0 ? 1 : -1;
+        dx *= stepX;
+        dy *= stepY;
+        const threshold = dx - 2 * dy;
+        const diagonalError = -2 * dx;
+        const stepError = 2 * dy;
+        const widthThreshold = 2 * width * Math.sqrt(dx * dx + dy * dy);
+        let error = direction * initError;
+        let y = y0;
+        let x = x0;
+        let thickness = dx + dy - direction * initWidth;
+        while (thickness <= widthThreshold) {
+            setPixel(x, y);
+            if (error > threshold) {
+                x -= stepX * direction;
+                error += diagonalError;
+                thickness += stepError;
+            }
+            error += stepError;
+            thickness -= diagonalError;
+            y += stepY * direction;
+        }
+    };
+    const drawLineRightLeftOctents = (x0, y0, x1, y1, thicknessFunction) => {
+        const stepX = x1 - x0 > 0 ? 1 : -1;
+        const stepY = y1 - y0 > 0 ? 1 : -1;
+        const dx = (x1 - x0) * stepX;
+        const dy = (y1 - y0) * stepY;
+        const threshold = dx - 2 * dy;
+        const diagonalError = -2 * dx;
+        const stepError = 2 * dy;
+        let error = 0;
+        let prepError = 0;
+        let y = y0;
+        let x = x0;
+        for (let i = 0; i < dx; i++) {
+            [1, -1].forEach((dir) => {
+                drawPrepLine(x, y, dx * stepX, dy * stepY, thicknessFunction(i) / 2, prepError, error, dir);
+            });
+            if (error > threshold) {
+                y += stepY;
+                error += diagonalError;
+                if (prepError > threshold) {
+                    [1, -1].forEach((dir) => {
+                        drawPrepLine(x, y, dx * stepX, dy * stepY, thicknessFunction(i) / 2, prepError + diagonalError + stepError, error, dir);
+                    });
+                    prepError += diagonalError;
+                }
+                prepError += stepError;
+            }
+            error += stepError;
+            x += stepX;
+        }
+    };
+    if (Math.abs(x1 - x0) < Math.abs(y1 - y0))
+        // if line is steep, flip along x = y axis, then do the function then flip the pixels again then draw
+        drawLineRightLeftOctents(y0, x0, y1, x1, thicknessFunction);
+    else
+        drawLineRightLeftOctents(x0, y0, x1, y1, thicknessFunction);
+}

dist/core/drawing-context.js

@@ -0,0 +1 @@
+export {};

dist/core/events.js

@@ -0,0 +1,8 @@
+export {};
+//
+// // Extension pattern
+// declare module "./events" {
+//   interface EventTypes {
+//     "CUSTOM_TOOL_EVENT": { customData: any };
+//   }
+// }

dist/core/interfaces/drawing-context.js

@@ -0,0 +1 @@
+export {};