mjpic 1.0.0

package/src/store/useImageStore.ts

@@ -0,0 +1,316 @@
+import { create } from 'zustand';
+
+export interface ImageConfig {
+  rotation: number;
+  scale: number;
+  brightness: number;
+  contrast: number;
+  saturation: number;
+  sharpness: number;
+  enhancements: {
+    autoEnhance: boolean;
+    fillLight: boolean;
+    autoWhiteBalance: boolean;
+  };
+  resize?: {
+    width: number;
+    height?: number;
+    maintainAspectRatio: boolean;
+  };
+  crop?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    aspectRatio?: string;
+  };
+  border?: BorderConfig;
+  straighten?: {
+    angle: number;
+    line?: {
+      x1: number;
+      y1: number;
+      x2: number;
+      y2: number;
+    };
+  };
+}
+
+export interface BorderConfig {
+  color: string;
+  size: number; // 0-300 percentage
+  applyHorizontal: boolean; // Left/Right
+  applyVertical: boolean; // Top/Bottom
+}
+
+interface HistoryItem {
+  config: ImageConfig;
+  sourceImage: string; // The underlying image data (base64 or URL)
+  width: number;
+  height: number;
+}
+
+interface ImageState {
+  originalImage: string | null; // The very first original image loaded (for absolute reset)
+  previewImage: string | null; // Current working image (source for Konva)
+  fileName: string | null;
+  imagePath: string | null;
+  originalWidth: number;
+  originalHeight: number;
+  config: ImageConfig;
+  history: HistoryItem[];
+  historyIndex: number;
+  cropRect: { x: number; y: number; width: number; height: number };
+  
+  // Actions
+  loadImage: (url: string, fileName?: string, imagePath?: string) => void;
+  setOriginalSize: (width: number, height: number) => void;
+  updateConfig: (partialConfig: Partial<ImageConfig>) => void;
+  setCropRect: (rect: { x: number; y: number; width: number; height: number }) => void;
+  applyCrop: () => void;
+  undo: () => void;
+  redo: () => void;
+  reset: () => void;
+}
+
+const defaultConfig: ImageConfig = {
+  rotation: 0,
+  scale: 1,
+  brightness: 0,
+  contrast: 0,
+  saturation: 0,
+  sharpness: 0,
+  enhancements: {
+    autoEnhance: false,
+    fillLight: false,
+    autoWhiteBalance: false,
+  },
+  border: {
+    color: '#ffffff',
+    size: 0,
+    applyHorizontal: true,
+    applyVertical: false
+  }
+};
+
+export const useImageStore = create<ImageState>((set, get) => ({
+  originalImage: null,
+  previewImage: null,
+  fileName: null,
+  imagePath: null,
+  originalWidth: 0,
+  originalHeight: 0,
+  config: defaultConfig,
+  history: [], // Initialize empty, will be populated in loadImage
+  historyIndex: -1,
+  cropRect: { x: 0, y: 0, width: 0, height: 0 },
+
+  loadImage: (url, fileName, imagePath) => set({ 
+    originalImage: url, 
+    previewImage: url,
+    fileName: fileName || null,
+    imagePath: imagePath || null,
+    originalWidth: 0,
+    originalHeight: 0,
+    config: defaultConfig,
+    history: [{ 
+        config: defaultConfig, 
+        sourceImage: url, 
+        width: 0, 
+        height: 0 
+    }],
+    historyIndex: 0,
+    cropRect: { x: 0, y: 0, width: 0, height: 0 }
+  }),
+
+  setOriginalSize: (width, height) => {
+      const { history, historyIndex } = get();
+      // Update the current history item with dimensions if they are 0
+      if (history[historyIndex] && history[historyIndex].width === 0) {
+          const newHistory = [...history];
+          newHistory[historyIndex] = { ...newHistory[historyIndex], width, height };
+          set({ 
+            originalWidth: width, 
+            originalHeight: height,
+            history: newHistory
+          });
+      } else {
+          set({ originalWidth: width, originalHeight: height });
+      }
+  },
+
+  updateConfig: (partialConfig) => {
+    const { config, history, historyIndex, previewImage, originalWidth, originalHeight } = get();
+    
+    const newConfig = { ...config, ...partialConfig };
+    if (partialConfig.enhancements) {
+        newConfig.enhancements = { ...config.enhancements, ...partialConfig.enhancements };
+    }
+    
+    // Create new history item
+    const newHistoryItem: HistoryItem = {
+        config: newConfig,
+        sourceImage: previewImage || '',
+        width: originalWidth,
+        height: originalHeight
+    };
+    
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(newHistoryItem);
+    
+    set({
+      config: newConfig,
+      history: newHistory,
+      historyIndex: newHistory.length - 1
+    });
+  },
+
+  setCropRect: (rect) => set({ cropRect: rect }),
+
+  applyCrop: () => {
+    const { previewImage, cropRect, config, originalWidth, originalHeight } = get();
+    if (!previewImage || cropRect.width === 0 || cropRect.height === 0) return;
+    
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = cropRect.width;
+      canvas.height = cropRect.height;
+      const ctx = canvas.getContext('2d');
+      
+      if (ctx) {
+        // High quality smoothing
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+
+        // 1. Determine actual draw size (handle resize config)
+        let drawWidth = originalWidth;
+        let drawHeight = originalHeight;
+        if (config.resize && config.resize.width > 0 && config.resize.height > 0) {
+            drawWidth = config.resize.width;
+            drawHeight = config.resize.height;
+        }
+
+        // 2. Calculate border
+        const { size = 0, applyHorizontal = true, applyVertical = false, color = '#ffffff' } = config.border || {};
+        let borderW = 0;
+        let borderH = 0;
+        if (size > 0) {
+            if (applyHorizontal) borderW = drawWidth * (size / 100);
+            if (applyVertical) borderH = drawHeight * (size / 100);
+        }
+        
+        const totalWidth = drawWidth + borderW * 2;
+        const totalHeight = drawHeight + borderH * 2;
+
+        // 3. Setup centers
+        const contentCx = totalWidth / 2;
+        const contentCy = totalHeight / 2;
+        
+        // Crop center (relative to Total Content top-left)
+        const cropCx = cropRect.x + cropRect.width / 2;
+        const cropCy = cropRect.y + cropRect.height / 2;
+        
+        // Offset
+        const dx = cropCx - contentCx;
+        const dy = cropCy - contentCy;
+        
+        // 4. Draw
+        ctx.translate(canvas.width / 2, canvas.height / 2);
+        ctx.translate(-dx, -dy);
+        ctx.rotate((config.rotation * Math.PI) / 180);
+        
+        // Draw Border Background
+        if (borderW > 0 || borderH > 0) {
+            ctx.fillStyle = color;
+            ctx.fillRect(-totalWidth/2, -totalHeight/2, totalWidth, totalHeight);
+        }
+        
+        // Draw Image (Centered)
+        ctx.drawImage(img, -drawWidth/2, -drawHeight/2, drawWidth, drawHeight);
+        
+        const croppedImage = canvas.toDataURL('image/png');
+        
+        // Reset config related to crop AND rotation AND border
+        const newConfig = { 
+            ...config, 
+            crop: undefined, 
+            resize: undefined,
+            rotation: 0,
+            border: { ...config.border, size: 0 } // Reset border size to 0 as it's baked in
+        };
+        
+        const { history, historyIndex } = get();
+        
+        const newHistoryItem: HistoryItem = {
+            config: newConfig,
+            sourceImage: croppedImage,
+            width: cropRect.width,
+            height: cropRect.height
+        };
+
+        const newHistory = history.slice(0, historyIndex + 1);
+        newHistory.push(newHistoryItem);
+        
+        set({
+          previewImage: croppedImage,
+          originalWidth: cropRect.width,
+          originalHeight: cropRect.height,
+          config: newConfig,
+          cropRect: { x: 0, y: 0, width: 0, height: 0 },
+          history: newHistory,
+          historyIndex: newHistory.length - 1
+        });
+      }
+    };
+    img.src = previewImage;
+  },
+
+  undo: () => {
+    const { historyIndex, history } = get();
+    if (historyIndex > 0) {
+      const prevItem = history[historyIndex - 1];
+      set({
+        historyIndex: historyIndex - 1,
+        config: prevItem.config,
+        previewImage: prevItem.sourceImage,
+        originalWidth: prevItem.width,
+        originalHeight: prevItem.height
+      });
+    }
+  },
+
+  redo: () => {
+    const { historyIndex, history } = get();
+    if (historyIndex < history.length - 1) {
+      const nextItem = history[historyIndex + 1];
+      set({
+        historyIndex: historyIndex + 1,
+        config: nextItem.config,
+        previewImage: nextItem.sourceImage,
+        originalWidth: nextItem.width,
+        originalHeight: nextItem.height
+      });
+    }
+  },
+  
+  reset: () => {
+    const { originalImage } = get();
+    // Reset to the very first state
+    if (originalImage) {
+        set({
+            previewImage: originalImage,
+            config: defaultConfig,
+            history: [{ 
+                config: defaultConfig, 
+                sourceImage: originalImage, 
+                width: 0, // Will be updated by setOriginalSize
+                height: 0 
+            }],
+            historyIndex: 0,
+            cropRect: { x: 0, y: 0, width: 0, height: 0 }
+        });
+    }
+  }
+}));

package/src/store/usePresetStore.ts

@@ -0,0 +1,65 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface AspectRatioPreset {
+  id: string;
+  label: string;
+  value: string; // "w:h" or "Free"
+  isDefault?: boolean; // If true, cannot be deleted/edited
+}
+
+interface PresetState {
+  aspectRatios: AspectRatioPreset[];
+  
+  // Actions
+  addAspectRatio: (preset: Omit<AspectRatioPreset, 'id' | 'isDefault'>) => void;
+  removeAspectRatio: (id: string) => void;
+  updateAspectRatio: (id: string, preset: Partial<Omit<AspectRatioPreset, 'id' | 'isDefault'>>) => void;
+  reorderAspectRatios: (newOrder: AspectRatioPreset[]) => void;
+  resetToDefaults: () => void;
+}
+
+const defaultAspectRatios: AspectRatioPreset[] = [
+  { id: 'free', label: 'Free', value: 'Free', isDefault: true },
+  { id: '1:1', label: '1:1', value: '1:1', isDefault: false },
+  { id: '4:3', label: '4:3', value: '4:3', isDefault: false },
+  { id: '3:4', label: '3:4', value: '3:4', isDefault: false },
+  { id: '16:9', label: '16:9', value: '16:9', isDefault: false },
+  { id: '9:16', label: '9:16', value: '9:16', isDefault: false },
+  { id: '3:2', label: '3:2', value: '3:2', isDefault: false },
+  { id: '2:3', label: '2:3', value: '2:3', isDefault: false },
+];
+
+export const usePresetStore = create<PresetState>()(
+  persist(
+    (set) => ({
+      aspectRatios: defaultAspectRatios,
+
+      addAspectRatio: (preset) => set((state) => ({
+        aspectRatios: [
+          ...state.aspectRatios,
+          { ...preset, id: crypto.randomUUID(), isDefault: false }
+        ]
+      })),
+
+      removeAspectRatio: (id) => set((state) => ({
+        aspectRatios: state.aspectRatios.filter(
+          (p) => p.id !== id || p.isDefault
+        )
+      })),
+      
+      updateAspectRatio: (id, preset) => set((state) => ({
+        aspectRatios: state.aspectRatios.map((p) => 
+            (p.id === id && !p.isDefault) ? { ...p, ...preset } : p
+        )
+      })),
+
+      reorderAspectRatios: (newOrder) => set({ aspectRatios: newOrder }),
+
+      resetToDefaults: () => set({ aspectRatios: defaultAspectRatios }),
+    }),
+    {
+      name: 'mjpic-presets-v2', // Increment version to force reset defaults
+    }
+  )
+);

package/src/store/useUIStore.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+export type ToolType = 'enhance' | 'adjust' | 'resize' | 'crop' | 'rotate' | 'border' | null;
+
+interface UIState {
+  activeTool: ToolType;
+  isStraightenToolActive: boolean;
+  setActiveTool: (tool: ToolType) => void;
+  setStraightenToolActive: (active: boolean) => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  activeTool: 'enhance', // Default to enhance or null
+  isStraightenToolActive: false,
+  setActiveTool: (tool) => set({ activeTool: tool, isStraightenToolActive: false }),
+  setStraightenToolActive: (active) => set({ isStraightenToolActive: active }),
+}));

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedSideEffectImports": false,
+    "forceConsistentCasingInFileNames": false,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": [
+      "node",
+      "express"
+    ]
+  },
+  "include": [
+    "src",
+    "api"
+  ]
+}

package/tsconfig.server.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist/cli",
+    "rootDir": "api",
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": false,
+    "jsx": "react"
+  },
+  "include": ["api/**/*"],
+  "exclude": ["src", "node_modules", "dist"]
+}

package/vercel.json

@@ -0,0 +1,12 @@
+{
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "/api/index"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from "vite-tsconfig-paths";
+import { traeBadgePlugin } from 'vite-plugin-trae-solo-badge';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          'react-dev-locator',
+        ],
+      },
+    }),
+    traeBadgePlugin({
+      variant: 'dark',
+      position: 'bottom-right',
+      prodOnly: true,
+      clickable: true,
+      clickUrl: 'https://www.trae.ai/solo?showJoin=1',
+      autoTheme: true,
+      autoThemeTarget: '#root'
+    }), 
+    tsconfigPaths(),
+  ],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3002',
+        changeOrigin: true,
+        secure: false,
+        configure: (proxy, _options) => {
+          proxy.on('error', (err, _req, _res) => {
+            console.log('proxy error', err);
+          });
+          proxy.on('proxyReq', (proxyReq, req, _res) => {
+            console.log('Sending Request to the Target:', req.method, req.url);
+          });
+          proxy.on('proxyRes', (proxyRes, req, _res) => {
+            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
+          });
+        },
+      }
+    }
+  },
+  build: {
+    outDir: 'dist/client',
+  }
+})