startDrag(e, "nw")} style={{ ...handleStyleBase, top: -handleSize / 2, left: -handleSize / 2, cursor: "nwse-resize" }} />
+
startDrag(e, "ne")} style={{ ...handleStyleBase, top: -handleSize / 2, right: -handleSize / 2, cursor: "nesw-resize" }} />
+
startDrag(e, "sw")} style={{ ...handleStyleBase, bottom: -handleSize / 2, left: -handleSize / 2, cursor: "nesw-resize" }} />
+
startDrag(e, "se")} style={{ ...handleStyleBase, bottom: -handleSize / 2, right: -handleSize / 2, cursor: "nwse-resize" }} />
+
+ {isDragging && (
+
+ {cropPxW} × {cropPxH}
+
+ )}
+
+
+
e.stopPropagation()}
+ >
+ {CROP_RATIOS.map((r) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/components/image-generator/ImageGenerator.tsx b/components/image-generator/ImageGenerator.tsx
index 5399fa4..55bcbdf 100644
--- a/components/image-generator/ImageGenerator.tsx
+++ b/components/image-generator/ImageGenerator.tsx
@@ -3,9 +3,9 @@ import React, { useState, useRef, useCallback, useEffect } from "react";
import { Controls, PRESET_BACKGROUNDS } from "./Controls";
import { ImagePreview } from "./ImagePreview";
import { generateRandomGradient, gradientToString } from "./utils/gradient";
-import type { AspectRatio, Gradient, ImageSettings, BackgroundEffects, TextEffects, TextObject, Selection, UploadedImage, DrawingMode, ArrowObject, CounterObject, RedactObject, ShapeObject, CanvasObject } from "./types";
+import type { AspectRatio, Gradient, ImageSettings, BackgroundEffects, TextEffects, TextObject, Selection, UploadedImage, DrawingMode, ArrowObject, ArrowDefaults, ArrowLineStyle, ArrowHeadStyle, CounterObject, CounterDefaults, CounterFormat, RedactObject, ShapeObject, CanvasObject, BrushObject, BrushDefaults } from "./types";
import { FONTS } from "./templates";
-import { Type, Undo, Trash2, ZoomIn, ZoomOut, Wand2, ArrowUpRight, Hash, EyeOff, Square, Circle, Triangle, Paintbrush, CounterIcon, Move } from "./icons";
+import { Type, Undo, Redo, Trash2, ZoomIn, ZoomOut, Wand2, ArrowUpRight, Hash, EyeOff, Square, Circle, Triangle, Paintbrush, CounterIcon, Move, Upload, Pencil, Crop } from "./icons";
import * as htmlToImage from "html-to-image";
import JSZip from "jszip";
import { Slider } from "./ui/Slider";
@@ -20,6 +20,7 @@ const DEFAULT_BACKGROUND_EFFECTS: BackgroundEffects = {
watercolor: 0,
pattern: "none",
patternOpacity: 0.1,
+ canvasCornerRadius: 16,
};
const DEFAULT_TEXT_EFFECTS: TextEffects = {
@@ -36,7 +37,7 @@ const DEFAULT_IMAGE_SETTINGS: ImageSettings = {
scale: 1,
shadow: 20,
corners: 6,
- alignment: "bottom-center",
+ alignment: "middle-center",
glassmorphicBorder: {
enabled: true,
opacity: 0.83,
@@ -52,7 +53,7 @@ const createInitialText = (): TextObject => ({
xPosition: 50,
fontFamily: FONTS[0].family,
fontColor: "#ffffff",
- fontSizeScale: 1,
+ fontSizeScale: 0.4,
});
const createInitialCounter = (count: number = 1): CounterObject => ({
@@ -100,6 +101,8 @@ interface HistoryState {
counters: Record
;
redactions: Record;
shapes: Record;
+ brushes: Record;
+ uploadedImages: UploadedImage[];
}
const SliderControl: React.FC<{
@@ -126,7 +129,7 @@ const SliderControl: React.FC<{
const StylePopover: React.FC<{
selectedObject: CanvasObject;
- selectionType: "text" | "arrow" | "counter" | "redact" | "shape";
+ selectionType: "text" | "arrow" | "counter" | "redact" | "shape" | "brush";
textEffects: TextEffects;
onUpdateText: (props: Partial>) => void;
onUpdateArrow: (props: Partial>) => void;
@@ -399,21 +402,270 @@ const StylePopover: React.FC<{
);
};
+const ArrowOptionsPopover: React.FC<{
+ arrowDefaults: ArrowDefaults;
+ setArrowDefaults: React.Dispatch>;
+}> = ({ arrowDefaults, setArrowDefaults }) => {
+ const update = (key: K, value: ArrowDefaults[K]) =>
+ setArrowDefaults((prev) => ({ ...prev, [key]: value }));
+
+ const renderLinePreview = (style: ArrowLineStyle) => {
+ const dash = style === "dashed" ? "5 3" : style === "dotted" ? "1 3" : undefined;
+ return (
+
+ );
+ };
+
+ const renderHeadPreview = (head: ArrowHeadStyle) => (
+
+ );
+
+ return (
+ e.stopPropagation()}
+ onPointerDown={(e) => e.stopPropagation()}
+ >
+
+
Arrow Defaults
+
+
+
+ update("color", c)} className="h-7 w-12" />
+
+
+
+
+
+ {arrowDefaults.strokeWidth}px
+
+
update("strokeWidth", vals[0])} min={1} max={20} step={1} className="py-1" />
+
+
+
+
+
+ {(["solid", "dashed", "dotted"] as ArrowLineStyle[]).map((style) => (
+
+ ))}
+
+
+
+
+
+
+ {(["filled", "hollow", "none"] as ArrowHeadStyle[]).map((head) => (
+
+ ))}
+
+
+
+
e.stopPropagation()}
+ onPointerDown={(e) => e.stopPropagation()}
+ >
+
+
Brush
+
+
+
+
+ {(["blur", "highlighter", "pencil"] as const).map((mode) => (
+
+ ))}
+
+
+
+ {brushDefaults.mode !== "blur" && (
+
+
+ update("color", c)} className="h-7 w-12" />
+
+ )}
+
+
+
+
+ {brushDefaults.size}px
+
+
update("size", vals[0])} min={4} max={80} step={1} className="py-1" />
+
+
+
e.stopPropagation()}
+ onPointerDown={(e) => e.stopPropagation()}
+ >
+
+
+
Counter
+
+ {previewLabel}
+
+
+
+
+
+ update("color", c)} className="h-7 w-12" />
+
+
+
+
+
+ {counterDefaults.scale.toFixed(2)}×
+
+
update("scale", vals[0])} min={0.5} max={3} step={0.1} className="py-1" />
+
+
+
+
+
+ {(["number", "roman", "alpha"] as CounterFormat[]).map((fmt) => (
+
+ ))}
+
+
+
+
+
+ update("startAt", Math.max(1, parseInt(e.target.value) || 1))}
+ className="w-20 bg-neutral-700 text-white text-xs rounded-md p-1.5 border border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 text-right tabular-nums"
+ min={1}
+ />
+
+
+
+
+ setDrawingMode(drawingMode === "counter" ? null : "counter")} isActive={drawingMode === "counter"} title="Add Counter">
+
+
+
setDrawingMode(drawingMode === "move" ? null : "move")} isActive={drawingMode === "move"} title="Move Image (Hand Mode)">
- setDrawingMode(drawingMode === "arrow" ? null : "arrow")} isActive={drawingMode === "arrow"} title="Draw Arrow">
-
+
+
+
setDrawingMode(drawingMode === "arrow" ? null : "arrow")} isActive={drawingMode === "arrow"} title="Draw Arrow">
+
+
+
+
+
setDrawingMode(drawingMode === "brush" ? null : "brush")} isActive={drawingMode === "brush"} title="Brush (blur / highlight / pencil)">
+
+
+
+
+
+
Drop images to add
+
PNG, JPEG, WebP
+
+
1 ? 'cursor-grab' : ''}`}
onClick={() => {
setSelection(null);
setIsStylePopoverOpen(false);
}}
+ onPointerDown={(e) => {
+ // Hold-and-drag with primary button on empty space to pan.
+ // Only activate when the press lands on the scroll container itself or its
+ // immediate spacer (not on an image / annotation, which has stopPropagation).
+ const target = e.target as HTMLElement;
+ if (e.button !== 0) return;
+ if (!scrollContainerRef.current) return;
+ // Don't intercept if user is in a drawing mode or pressing on an interactive element.
+ if (drawingMode) return;
+ // Only pan when zoomed in beyond fit.
+ if (canvasZoom <= 1) return;
+ // Don't start panning if click is on an image / annotation that handles its own drag.
+ if (target.closest('[data-canvas-content]') && target !== scrollContainerRef.current) return;
+ const startX = e.clientX;
+ const startY = e.clientY;
+ const startScrollLeft = scrollContainerRef.current.scrollLeft;
+ const startScrollTop = scrollContainerRef.current.scrollTop;
+ let didMove = false;
+ setIsPanning(true);
+ const onMove = (ev: PointerEvent) => {
+ const dx = ev.clientX - startX;
+ const dy = ev.clientY - startY;
+ if (!didMove && Math.hypot(dx, dy) > 3) didMove = true;
+ if (didMove && scrollContainerRef.current) {
+ scrollContainerRef.current.scrollLeft = startScrollLeft - dx;
+ scrollContainerRef.current.scrollTop = startScrollTop - dy;
+ }
+ };
+ const onUp = () => {
+ document.removeEventListener('pointermove', onMove);
+ document.removeEventListener('pointerup', onUp);
+ setIsPanning(false);
+ };
+ document.addEventListener('pointermove', onMove);
+ document.addEventListener('pointerup', onUp);
+ }}
>
-
+
+
{(() => {
- const getChunkSize = () => {
- if (!imageSettings.mockup) return 1;
- if (imageSettings.mockupLayout === 'grid-3') return 3;
- if (imageSettings.mockupLayout === 'grid-2') return 2;
- return 1;
- };
const chunkSize = getChunkSize();
const chunks = [];
for (let i = 0; i < uploadedImages.length; i += chunkSize) {
@@ -1412,7 +2032,7 @@ export default function ImageGenerator() {
if (chunks.length > 0) {
return (
-
1 ? "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 p-4 w-[90vw]" : "p-4 w-[min(80vh,90vw,1200px)]"}>
+
1 ? "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4 w-full" : "p-4 mx-auto w-[min(80vh,90%,1200px)]"}>
{chunks.map((chunk, index) => (
e.stopPropagation()}>
>) => handleArrowUpdate(index, id, props)}
onArrowUpdateWithHistory={(id: string, props: Partial>) => handleArrowUpdateWithHistory(index, id, props)}
onArrowDelete={(id: string) => handleArrowDelete(index, id)}
- onCounterAdd={handleCounterAdd}
+ onCounterAdd={(coords) => handleCounterAdd(index, coords)}
onCounterUpdate={(id, props) => handleCounterUpdate(index, id, props)}
onCounterUpdateWithHistory={(id, props) => handleCounterUpdateWithHistory(index, id, props)}
onCounterDelete={(id) => handleCounterDelete(index, id)}
@@ -1457,6 +2078,18 @@ export default function ImageGenerator() {
onShapeUpdate={(id, props) => handleShapeUpdate(index, id, props)}
onShapeUpdateWithHistory={(id, props) => handleShapeUpdateWithHistory(index, id, props)}
onShapeDelete={(id) => handleShapeDelete(index, id)}
+ brushes={allBrushes[index] || []}
+ brushDefaults={brushDefaults}
+ onBrushAdd={(brush) => handleBrushAdd(index, brush)}
+ onBrushDelete={(id) => handleBrushDelete(index, id)}
+ onBeginInteractionHistory={pushToHistory}
+ cropImageId={cropImageId}
+ onCropApply={(crop) => {
+ pushToHistory();
+ setUploadedImages((prev) => prev.map((i) => i.id === cropImageId ? { ...i, crop } : i));
+ setCropImageId(null);
+ }}
+ onCropCancel={() => setCropImageId(null)}
selection={selection}
onSelectObject={(canvasKey: number, itemId: string | null, type: any) => (itemId ? setSelection({ canvasKey, itemId, type }) : setSelection(null))}
editing={editing}
@@ -1492,6 +2125,7 @@ export default function ImageGenerator() {
drawingMode={drawingMode}
texts={allTexts[activeImageIndex ?? -1] || []}
arrows={allArrows[-1] || []}
+ arrowDefaults={arrowDefaults}
counters={allCounters[-1] || []}
redactions={allRedactions[-1] || []}
shapes={allShapes[-1] || []}
@@ -1502,7 +2136,7 @@ export default function ImageGenerator() {
onArrowUpdate={(id: string, props: Partial>) => handleArrowUpdate(-1, id, props)}
onArrowUpdateWithHistory={(id: string, props: Partial>) => handleArrowUpdateWithHistory(-1, id, props)}
onArrowDelete={(id: string) => handleArrowDelete(-1, id)}
- onCounterAdd={handleCounterAdd}
+ onCounterAdd={(coords) => handleCounterAdd(-1, coords)}
onCounterUpdate={(id, props) => handleCounterUpdate(-1, id, props)}
onCounterUpdateWithHistory={(id, props) => handleCounterUpdateWithHistory(-1, id, props)}
onCounterDelete={(id) => handleCounterDelete(-1, id)}
@@ -1514,6 +2148,18 @@ export default function ImageGenerator() {
onShapeUpdate={(id, props) => handleShapeUpdate(-1, id, props)}
onShapeUpdateWithHistory={(id, props) => handleShapeUpdateWithHistory(-1, id, props)}
onShapeDelete={(id) => handleShapeDelete(-1, id)}
+ brushes={allBrushes[-1] || []}
+ brushDefaults={brushDefaults}
+ onBrushAdd={(brush) => handleBrushAdd(-1, brush)}
+ onBrushDelete={(id) => handleBrushDelete(-1, id)}
+ onBeginInteractionHistory={pushToHistory}
+ cropImageId={cropImageId}
+ onCropApply={(crop) => {
+ pushToHistory();
+ setUploadedImages((prev) => prev.map((i) => i.id === cropImageId ? { ...i, crop } : i));
+ setCropImageId(null);
+ }}
+ onCropCancel={() => setCropImageId(null)}
selection={selection}
onSelectObject={(canvasKey: number, itemId: string | null, type: any) => (itemId ? setSelection({ canvasKey, itemId, type }) : setSelection(null))}
editing={editing}
@@ -1525,22 +2171,38 @@ export default function ImageGenerator() {
);
})()}
+
- {displayImages.map((src, index) => (
+ {displayImages.map((image, index) => {
+ const crop = image.crop;
+ const bgPosX = crop && crop.width < 100 ? (crop.x / (100 - crop.width)) * 100 : 0;
+ const bgPosY = crop && crop.height < 100 ? (crop.y / (100 - crop.height)) * 100 : 0;
+ return (
{/* Spacer image using frameUrl to naturally bound the size of this block */}
@@ -140,7 +146,19 @@ const DeviceMockupFrame: React.FC<{
height: `${height}%`,
}}
>
-
+ {crop ? (
+
+ ) : (
+
+ )}
{/* Frame overlay - sits above the screen area for inner shadows/bezels */}
@@ -153,7 +171,8 @@ const DeviceMockupFrame: React.FC<{
- ))}
+ );
+ })}
);
@@ -172,12 +191,13 @@ const alignmentClasses = {
'bottom-right': 'items-end justify-end',
};
-const TextElement: React.FC
& { text: TextObject, isSelected: boolean, isEditing: boolean, previewRef: React.RefObject }> =
- ({ canvasKey, text, isSelected, isEditing, onSetEditing, onSelectObject, onTextUpdate, onTextUpdateWithHistory, textEffects, aspectRatio, previewRef }) => {
+const TextElement: React.FC & { text: TextObject, isSelected: boolean, isEditing: boolean, previewRef: React.RefObject }> =
+ ({ canvasKey, text, isSelected, isEditing, onSetEditing, onSelectObject, onTextUpdate, onTextUpdateWithHistory, onBeginInteractionHistory, textEffects, aspectRatio, previewRef }) => {
const textareaRef = useRef(null);
const elementRef = useRef(null);
const dragInfo = useRef({ hasMoved: false });
const lastClickTime = useRef(0);
+ const editHistoryStarted = useRef(false);
const handlePointerDown = (e: React.PointerEvent) => {
if (e.button !== 0) return;
@@ -197,6 +217,7 @@ const TextElement: React.FC {
const dx = moveEvent.clientX - startX;
@@ -204,6 +225,7 @@ const TextElement: React.FC 5) {
dragInfo.current.hasMoved = true;
+ onBeginInteractionHistory();
target.setPointerCapture(e.pointerId);
document.body.style.cursor = 'grabbing';
}
@@ -226,7 +248,7 @@ const TextElement: React.FC {
const currentDistance = Math.hypot(moveEvent.clientX - centerX, moveEvent.clientY - centerY);
@@ -307,7 +330,7 @@ const TextElement: React.FC) => {
+ if (!editHistoryStarted.current) {
+ onBeginInteractionHistory();
+ editHistoryStarted.current = true;
+ }
+ onTextUpdate(text.id, { content: e.target.value });
+ };
+
const handleBlur = (e: React.FocusEvent) => {
- onTextUpdateWithHistory(text.id, { content: e.target.value });
+ onTextUpdate(text.id, { content: e.target.value });
onSetEditing(canvasKey, null);
};
- const baseFontSize = aspectRatio === '1:1' ? '6vw' : '5vw';
- const maxFontSize = aspectRatio === '1:1' ? 72 : 96;
+ const isPortrait = aspectRatio === '1:1' || aspectRatio === '9:16' || aspectRatio === '4:5';
+ const baseFontSize = isPortrait ? '6vw' : '5vw';
+ const maxFontSize = isPortrait ? 72 : 96;
let fontSize = `clamp(1.5rem, ${baseFontSize}, ${maxFontSize}px)`;
- if (text.content.length > 15) fontSize = `clamp(1.25rem, ${aspectRatio === '1:1' ? '4vw' : '3vw'}, ${maxFontSize}px)`;
- if (text.content.length > 25) fontSize = `clamp(1rem, ${aspectRatio === '1:1' ? '3vw' : '2vw'}, ${maxFontSize}px)`;
+ if (text.content.length > 15) fontSize = `clamp(1.25rem, ${isPortrait ? '4vw' : '3vw'}, ${maxFontSize}px)`;
+ if (text.content.length > 25) fontSize = `clamp(1rem, ${isPortrait ? '3vw' : '2vw'}, ${maxFontSize}px)`;
const glassmorphicStyle: React.CSSProperties = textEffects.isGlassmorphic ? {
backgroundColor: hexToRgba(textEffects.glassColor, textEffects.glassOpacity),
@@ -423,7 +456,7 @@ const TextElement: React.FC onTextUpdate(text.id, { content: e.target.value })}
+ onChange={handleTextareaChange}
onBlur={handleBlur}
onKeyDown={handleTextareaKeyDown}
className="w-full p-4 bg-transparent border-0 resize-none overflow-hidden text-center font-bold focus:outline-none ring-2 ring-white/50 rounded-lg"
@@ -438,8 +471,8 @@ const TextElement: React.FC & { arrow: ArrowObject, isSelected: boolean, previewRef: React.RefObject }> =
- ({ canvasKey, arrow, isSelected, onSelectObject, onArrowUpdate, onArrowUpdateWithHistory, previewRef }) => {
+const ArrowElement: React.FC & { arrow: ArrowObject, isSelected: boolean, previewRef: React.RefObject }> =
+ ({ canvasKey, arrow, isSelected, onSelectObject, onArrowUpdate, onArrowUpdateWithHistory, onBeginInteractionHistory, previewRef }) => {
const lineRef = useRef(null);
const dragInfo = useRef({ hasMoved: false });
// Fix: Use unique ID for each arrow's marker to prevent color conflicts
@@ -458,6 +491,7 @@ const ArrowElement: React.FC {
const dx = moveEvent.clientX - startX;
@@ -465,6 +499,7 @@ const ArrowElement: React.FC 3) {
dragInfo.current.hasMoved = true;
+ onBeginInteractionHistory();
document.body.style.cursor = 'grabbing';
}
@@ -485,9 +520,7 @@ const ArrowElement: React.FC
{isSelected && (
<>
@@ -593,8 +632,33 @@ const ArrowElement: React.FC & { counter: CounterObject, isSelected: boolean, previewRef: React.RefObject }> =
- ({ canvasKey, counter, isSelected, onSelectObject, onCounterUpdate, onCounterUpdateWithHistory, previewRef }) => {
+const formatCounterLabel = (n: number, format: CounterObject['format']): string => {
+ if (format === 'roman') {
+ const map: [number, string][] = [
+ [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
+ [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
+ [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+ ];
+ let num = n, out = '';
+ for (const [v, s] of map) {
+ while (num >= v) { out += s; num -= v; }
+ }
+ return out || String(n);
+ }
+ if (format === 'alpha') {
+ let num = n, out = '';
+ while (num > 0) {
+ const rem = (num - 1) % 26;
+ out = String.fromCharCode(65 + rem) + out;
+ num = Math.floor((num - 1) / 26);
+ }
+ return out || 'A';
+ }
+ return String(n);
+};
+
+const CounterElement: React.FC & { counter: CounterObject, isSelected: boolean, previewRef: React.RefObject }> =
+ ({ canvasKey, counter, isSelected, onSelectObject, onCounterUpdate, onCounterUpdateWithHistory, onBeginInteractionHistory, previewRef }) => {
const dragInfo = useRef({ hasMoved: false });
const handlePointerDown = (e: React.PointerEvent) => {
@@ -618,6 +682,7 @@ const CounterElement: React.FC 3) {
dragInfo.current.hasMoved = true;
+ onBeginInteractionHistory();
document.body.style.cursor = 'grabbing';
}
@@ -632,9 +697,7 @@ const CounterElement: React.FC e.stopPropagation()}
>
- {counter.count}
+ {formatCounterLabel(counter.count, counter.format)}
${
+ [...blurBrushes, ...(drawingIsBlur ? [drawingBrush!] : [])]
+ .map((b) => `
`)
+ .join('')
+ }`
+ )}")`,
+ maskImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(
+ `
`
+ )}")`,
+ WebkitMaskSize: '100% 100%',
+ maskSize: '100% 100%',
+ }}
+ />
+ )}
+ {(inkBrushes.length > 0 || drawingIsInk) && (
+
+ )}
+
+ );
+};
+
+const RedactElement: React.FC
& { redact: RedactObject, isSelected: boolean, previewRef: React.RefObject }> =
+ ({ canvasKey, redact, isSelected, onSelectObject, onRedactUpdate, onRedactUpdateWithHistory, onBeginInteractionHistory, previewRef }) => {
const elementRef = useRef(null);
const dragInfo = useRef({ hasMoved: false });
@@ -689,6 +939,7 @@ const RedactElement: React.FC 3) {
dragInfo.current.hasMoved = true;
+ onBeginInteractionHistory();
document.body.style.cursor = 'grabbing';
}
@@ -703,9 +954,7 @@ const RedactElement: React.FC {
const dx = moveEvent.clientX - startX;
@@ -742,13 +992,22 @@ const RedactElement: React.FC {
+ if (redact.mode === 'blur') return 'blur(16px)';
+ if (redact.mode === 'pixelate') return 'blur(4px) contrast(1.4) saturate(1.2)';
+ return 'none';
+ })();
+ const backgroundImage = redact.mode === 'pixelate'
+ ? 'linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)'
+ : undefined;
+ const backgroundColor = redact.mode === 'solid' ? 'black' : 'transparent';
+
return (
& { shape: ShapeObject, isSelected: boolean, previewRef: React.RefObject
}> =
- ({ canvasKey, shape, isSelected, onSelectObject, onShapeUpdate, onShapeUpdateWithHistory, previewRef }) => {
+const ShapeElement: React.FC & { shape: ShapeObject, isSelected: boolean, previewRef: React.RefObject }> =
+ ({ canvasKey, shape, isSelected, onSelectObject, onShapeUpdate, onShapeUpdateWithHistory, onBeginInteractionHistory, previewRef }) => {
const dragInfo = useRef({ hasMoved: false });
const handlePointerDown = (e: React.PointerEvent) => {
@@ -800,6 +1062,7 @@ const ShapeElement: React.FC 3) {
dragInfo.current.hasMoved = true;
+ onBeginInteractionHistory();
document.body.style.cursor = 'grabbing';
}
@@ -814,9 +1077,7 @@ const ShapeElement: React.FC(
backgroundEffects, textEffects, onUpdateImage,
imageSettings,
drawingMode,
- texts, arrows, counters, redactions, shapes,
+ texts, arrows, arrowDefaults, counters, redactions, shapes, brushes, brushDefaults,
onTextUpdate, onTextUpdateWithHistory, onTextDelete,
onArrowAdd, onArrowUpdate, onArrowUpdateWithHistory,
onCounterAdd, onCounterUpdate, onCounterUpdateWithHistory, onCounterDelete,
onRedactAdd, onRedactUpdate, onRedactUpdateWithHistory, onRedactDelete,
onShapeAdd, onShapeUpdate, onShapeUpdateWithHistory, onShapeDelete,
+ onBrushAdd, onBrushDelete, onBeginInteractionHistory,
+ cropImageId, onCropApply, onCropCancel,
selection, onSelectObject, editing, onSetEditing, onActivate, isActive,
setDrawingMode, onImageSettingsChange,
uploadedImageObj, uploadedImage, uploadedImages
@@ -876,8 +1139,10 @@ export const ImagePreview = forwardRef(
const localPreviewRef = useRef(null);
const [drawingArrow, setDrawingArrow] = useState | null>(null);
+ const [drawingBrush, setDrawingBrush] = useState | null>(null);
const drawingArrowRef = useRef | null>(null);
+ const drawingBrushRef = useRef | null>(null);
const setRefs = useCallback((node: HTMLDivElement | null) => {
localPreviewRef.current = node;
@@ -886,15 +1151,64 @@ export const ImagePreview = forwardRef(
}, [fwdRef]);
const handlePointerDown = (e: React.PointerEvent) => {
- if (drawingMode !== 'arrow' || !localPreviewRef.current) return;
+ if (!localPreviewRef.current) return;
+
+ if (drawingMode === 'brush') {
+ onSelectObject(canvasKey, null, 'text');
+ const previewRect = localPreviewRef.current.getBoundingClientRect();
+ const x = ((e.clientX - previewRect.left) / previewRect.width) * 100;
+ const y = ((e.clientY - previewRect.top) / previewRect.height) * 100;
+
+ const newBrush: Omit = {
+ mode: brushDefaults.mode,
+ color: brushDefaults.color,
+ size: brushDefaults.size,
+ points: [{ x, y }],
+ };
+ drawingBrushRef.current = newBrush;
+ setDrawingBrush(newBrush);
+
+ const onMove = (moveEvent: PointerEvent) => {
+ if (!drawingBrushRef.current) return;
+ const cx = ((moveEvent.clientX - previewRect.left) / previewRect.width) * 100;
+ const cy = ((moveEvent.clientY - previewRect.top) / previewRect.height) * 100;
+ const last = drawingBrushRef.current.points[drawingBrushRef.current.points.length - 1];
+ // Throttle: only add if moved >0.3% to keep paths smooth but small
+ if (Math.hypot(cx - last.x, cy - last.y) < 0.3) return;
+ drawingBrushRef.current = {
+ ...drawingBrushRef.current,
+ points: [...drawingBrushRef.current.points, { x: cx, y: cy }],
+ };
+ setDrawingBrush({ ...drawingBrushRef.current });
+ };
+ const onUp = () => {
+ document.removeEventListener('pointermove', onMove);
+ document.removeEventListener('pointerup', onUp);
+ if (drawingBrushRef.current && drawingBrushRef.current.points.length > 1) {
+ onBrushAdd(drawingBrushRef.current);
+ }
+ drawingBrushRef.current = null;
+ setDrawingBrush(null);
+ };
+ document.addEventListener('pointermove', onMove);
+ document.addEventListener('pointerup', onUp);
+ return;
+ }
+
+ if (drawingMode !== 'arrow') return;
onSelectObject(canvasKey, null, 'text'); // Deselect all
const previewRect = localPreviewRef.current.getBoundingClientRect();
const x = ((e.clientX - previewRect.left) / previewRect.width) * 100;
const y = ((e.clientY - previewRect.top) / previewRect.height) * 100;
- // Default drawing color red, more visible than white
- const newArrow = { x1: x, y1: y, x2: x, y2: y, color: '#ef4444', strokeWidth: 4 };
+ const newArrow: Omit = {
+ x1: x, y1: y, x2: x, y2: y,
+ color: arrowDefaults.color,
+ strokeWidth: arrowDefaults.strokeWidth,
+ lineStyle: arrowDefaults.lineStyle,
+ headStyle: arrowDefaults.headStyle,
+ };
drawingArrowRef.current = newArrow;
setDrawingArrow(newArrow);
@@ -928,10 +1242,31 @@ export const ImagePreview = forwardRef(
document.addEventListener('pointerup', onPointerUp);
};
- const aspectClass = aspectRatio === '1:1' ? 'aspect-square' : 'aspect-video';
+ const aspectClass = (() => {
+ switch (aspectRatio) {
+ case '1:1': return 'aspect-square';
+ case '16:9': return 'aspect-video';
+ case '9:16': return '';
+ case '4:5': return '';
+ case '4:3': return '';
+ case '3:2': return '';
+ case '1.91:1': return '';
+ default: return 'aspect-video';
+ }
+ })();
+ const aspectStyle: React.CSSProperties = (() => {
+ switch (aspectRatio) {
+ case '9:16': return { aspectRatio: '9 / 16' };
+ case '4:5': return { aspectRatio: '4 / 5' };
+ case '4:3': return { aspectRatio: '4 / 3' };
+ case '3:2': return { aspectRatio: '3 / 2' };
+ case '1.91:1': return { aspectRatio: '1.91 / 1' };
+ default: return {};
+ }
+ })();
const alignmentClass = alignmentClasses[imageSettings.alignment];
const imageStyle: React.CSSProperties = {
- // transform: `scale(${imageSettings.scale})`, // Moved to wrapper div
+ // transform: `scale(${foregroundScale})`, // Moved to wrapper div
boxShadow: `0 25px 50px -12px rgba(0, 0, 0, ${imageSettings.shadow / 100 * 0.5})`,
borderRadius: (() => {
const r = imageSettings.corners;
@@ -964,6 +1299,7 @@ export const ImagePreview = forwardRef(
};
const imageContainerStyle = getImageContainerStyle();
+ const foregroundScale = uploadedImageObj?.scale ?? imageSettings.scale;
const activeClass = isActive ? 'ring-4 ring-offset-4 ring-offset-neutral-950 ring-blue-500' : 'ring-0';
@@ -980,6 +1316,7 @@ export const ImagePreview = forwardRef(
const container = localPreviewRef.current;
if (!container || !uploadedImageObj) return; // Ensure container and uploadedImageObj are available
+ onBeginInteractionHistory();
const containerRect = container.getBoundingClientRect();
const startX = e.clientX;
@@ -996,7 +1333,7 @@ export const ImagePreview = forwardRef(
// Calculate current width in % of container, compensating for the scale transform
// rect.width includes the scale, so we divide by scale to get the "unscaled" base size
- const currentWidth = ((rect.width / imageSettings.scale) / containerRect.width) * 100;
+ const currentWidth = ((rect.width / foregroundScale) / containerRect.width) * 100;
// const currentHeight = ((rect.height / imageSettings.scale) / containerRect.height) * 100; // Removed to fix stretching
// Initial set to lock position AND dimensions to prevent auto-scaling "jump"
@@ -1077,8 +1414,21 @@ export const ImagePreview = forwardRef(
const proxiedBackgroundImage = getProxiedUrl(backgroundImage);
const proxiedUploadedImage = getProxiedUrl(uploadedImage);
+ // Match the ring's corner radius to the canvas radius. The ring sits OUTSIDE the canvas
+ // (via ring-offset-4), so its radius should equal canvas radius + offset (~8px) to look
+ // visually concentric. Cap below at 0 to keep sharp corners working.
+ const canvasRadius = backgroundEffects.canvasCornerRadius ?? 16;
+ const ringRadius = isActive ? Math.max(0, canvasRadius + 8) : canvasRadius;
+
return (
- }>
+
}
+ >
diff --git a/components/image-generator/icons.tsx b/components/image-generator/icons.tsx
index d8cf023..9134888 100644
--- a/components/image-generator/icons.tsx
+++ b/components/image-generator/icons.tsx
@@ -111,6 +111,13 @@ export const Undo = (props: React.SVGProps
) => (
);
+export const Redo = (props: React.SVGProps) => (
+
+);
+
export const Move = (props: React.SVGProps) => (
);
+
+export const Crop = (props: React.SVGProps) => (
+
+);
+
+export const Image = (props: React.SVGProps) => (
+
+);
+
+export const Layers = (props: React.SVGProps) => (
+
+);
+
+export const Sparkles = (props: React.SVGProps) => (
+
+);
+
+export const Smartphone = (props: React.SVGProps) => (
+
+);
+
+export const ChevronRight = (props: React.SVGProps) => (
+
+);
+
+export const Plus = (props: React.SVGProps) => (
+
+);
diff --git a/components/image-generator/types.ts b/components/image-generator/types.ts
index 7a7ec98..01e4893 100644
--- a/components/image-generator/types.ts
+++ b/components/image-generator/types.ts
@@ -1,6 +1,24 @@
import React from 'react';
-export type AspectRatio = '1:1' | '16:9';
+export type AspectRatio = '1:1' | '16:9' | '9:16' | '4:5' | '4:3' | '3:2' | '1.91:1';
+
+export interface AspectRatioPreset {
+ id: AspectRatio;
+ label: string;
+ description: string;
+ width: number;
+ height: number;
+}
+
+export const ASPECT_RATIO_PRESETS: AspectRatioPreset[] = [
+ { id: '1:1', label: 'Square', description: 'Instagram post', width: 1080, height: 1080 },
+ { id: '16:9', label: 'Wide', description: 'YouTube / Twitter', width: 1920, height: 1080 },
+ { id: '9:16', label: 'Story', description: 'Instagram / TikTok story', width: 1080, height: 1920 },
+ { id: '4:5', label: 'Portrait', description: 'Instagram portrait', width: 1080, height: 1350 },
+ { id: '4:3', label: 'Classic', description: 'Standard', width: 1600, height: 1200 },
+ { id: '3:2', label: 'Photo', description: 'Photography', width: 1500, height: 1000 },
+ { id: '1.91:1', label: 'OG / LinkedIn', description: 'Open Graph / LinkedIn', width: 1200, height: 627 },
+];
export type Alignment =
'top-left' | 'top-center' | 'top-right' |
@@ -39,6 +57,7 @@ export interface BackgroundEffects {
watercolor: number;
pattern: 'none' | 'dots' | 'grid' | 'lines' | 'waves' | 'zigzag' | 'hexagons' | 'diagonal-stripes' | 'crosshatch' | 'plus';
patternOpacity: number;
+ canvasCornerRadius?: number;
}
export interface TextShadow {
@@ -74,6 +93,9 @@ export interface TextObject {
width?: number;
}
+export type ArrowLineStyle = 'solid' | 'dashed' | 'dotted';
+export type ArrowHeadStyle = 'filled' | 'hollow' | 'none';
+
export interface ArrowObject {
id: string;
type: 'arrow';
@@ -83,17 +105,35 @@ export interface ArrowObject {
y2: number;
color: string;
strokeWidth: number;
+ lineStyle?: ArrowLineStyle;
+ headStyle?: ArrowHeadStyle;
+}
+
+export interface ArrowDefaults {
+ color: string;
+ strokeWidth: number;
+ lineStyle: ArrowLineStyle;
+ headStyle: ArrowHeadStyle;
}
+export type CounterFormat = 'number' | 'roman' | 'alpha';
+
export interface CounterObject {
id: string;
type: 'counter';
x: number;
y: number;
count: number;
- format: 'number' | 'roman' | 'alpha';
+ format: CounterFormat;
+ color: string;
+ scale: number;
+}
+
+export interface CounterDefaults {
color: string;
scale: number;
+ format: CounterFormat;
+ startAt: number;
}
export interface RedactObject {
@@ -119,13 +159,35 @@ export interface ShapeObject {
strokeWidth: number;
}
-export type CanvasObject = TextObject | ArrowObject | CounterObject | RedactObject | ShapeObject;
+export type BrushMode = 'pencil' | 'highlighter' | 'blur';
+
+export interface BrushPoint {
+ x: number;
+ y: number;
+}
+
+export interface BrushObject {
+ id: string;
+ type: 'brush';
+ mode: BrushMode;
+ points: BrushPoint[];
+ color: string;
+ size: number;
+}
+
+export interface BrushDefaults {
+ mode: BrushMode;
+ color: string;
+ size: number;
+}
+
+export type CanvasObject = TextObject | ArrowObject | CounterObject | RedactObject | ShapeObject | BrushObject;
export interface Selection {
canvasKey: number;
itemId: string;
- type: 'text' | 'arrow' | 'counter' | 'redact' | 'shape';
+ type: 'text' | 'arrow' | 'counter' | 'redact' | 'shape' | 'brush';
}
export interface UploadedImage {
@@ -136,9 +198,13 @@ export interface UploadedImage {
y?: number;
width?: number;
height?: number;
+ scale?: number;
+ crop?: { x: number; y: number; width: number; height: number };
}
-export type DrawingMode = 'arrow' | 'redact' | 'shape' | 'counter' | 'move' | null;
+export type CropAspectRatio = 'free' | '1:1' | '16:9' | '9:16' | '4:3' | '3:2';
+
+export type DrawingMode = 'arrow' | 'redact' | 'shape' | 'counter' | 'move' | 'brush' | 'crop' | null;
export interface ControlsProps {
aspectRatio: AspectRatio;
@@ -166,6 +232,12 @@ export interface ControlsProps {
generateNewGradient: () => void;
onDownloadSingle: () => void;
onDownloadZip: () => void;
+ onCopyToClipboard: () => void;
+ copyStatus: 'idle' | 'copying' | 'copied' | 'error';
+ exportFormat: 'png' | 'jpeg' | 'webp';
+ setExportFormat: React.Dispatch>;
+ exportQuality: number;
+ setExportQuality: React.Dispatch>;
isDownloading: boolean;
isDevMode: boolean;
setIsDevMode: React.Dispatch>;
@@ -193,6 +265,7 @@ export interface ImagePreviewProps {
texts: TextObject[];
arrows: ArrowObject[];
+ arrowDefaults: ArrowDefaults;
onTextUpdate: (id: string, props: Partial>) => void;
onTextUpdateWithHistory: (id: string, props: Partial>) => void;
onTextDelete: (id: string) => void;
@@ -215,9 +288,17 @@ export interface ImagePreviewProps {
onShapeUpdate: (id: string, props: Partial>) => void;
onShapeUpdateWithHistory: (id: string, props: Partial>) => void;
onShapeDelete: (id: string) => void;
+ brushes: BrushObject[];
+ brushDefaults: BrushDefaults;
+ onBrushAdd: (brush: Omit) => void;
+ onBrushDelete: (id: string) => void;
+ onBeginInteractionHistory: () => void;
+ cropImageId: string | null;
+ onCropApply: (crop: { x: number; y: number; width: number; height: number } | undefined) => void;
+ onCropCancel: () => void;
onImageSettingsChange: (key: K, value: ImageSettings[K]) => void;
selection: Selection | null;
- onSelectObject: (canvasKey: number, id: string | null, type: 'text' | 'arrow' | 'counter' | 'redact' | 'shape') => void;
+ onSelectObject: (canvasKey: number, id: string | null, type: 'text' | 'arrow' | 'counter' | 'redact' | 'shape' | 'brush') => void;
editing: Selection | null;
onSetEditing: (canvasKey: number, id: string | null) => void;
onActivate: () => void;
diff --git a/package-lock.json b/package-lock.json
index af43682..92a9f08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3173,7 +3173,7 @@
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
- "dev": true,
+ "devOptional": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
@@ -3183,7 +3183,7 @@
"version": "19.1.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
- "dev": true,
+ "devOptional": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.0.0"
@@ -4359,7 +4359,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
- "dev": true,
+ "devOptional": true,
"license": "MIT"
},
"node_modules/damerau-levenshtein": {
@@ -8205,7 +8205,6 @@
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
- "dev": true,
"license": "MIT"
},
"node_modules/tapable": {
diff --git a/package.json b/package.json
index 7d9b419..d28f845 100644
--- a/package.json
+++ b/package.json
@@ -54,4 +54,4 @@
"tw-animate-css": "^1.3.6",
"typescript": "^5"
}
-}
+}
\ No newline at end of file
diff --git a/public/sitemap.xml b/public/sitemap.xml
index f42fdfe..cf4ee8c 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,14 +1,14 @@
-https://delta4.io/tools/readme-today2025-12-16T06:26:41.974Zmonthly0.7
-https://delta4.io/tools2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/find-and-replace2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/uri-encode-decode2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/code-comparator2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/js-object-to-json2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/linkedin-text-formatter2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/base64-encoder-and-decoder2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/jwt-token-encoder-and-decoder2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/bg-studio2025-12-16T06:26:41.976Zmonthly0.7
-https://delta4.io/tools/json-code-formatter2025-12-16T06:26:41.976Zmonthly0.7
+https://delta4.io/tools/jwt-token-encoder-and-decoder2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/readme-today2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/find-and-replace2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/linkedin-text-formatter2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/json-code-formatter2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/js-object-to-json2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/uri-encode-decode2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/base64-encoder-and-decoder2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/code-comparator2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools2026-05-28T13:08:10.818Zmonthly0.7
+https://delta4.io/tools/bg-studio2026-05-28T13:08:10.818Zmonthly0.7
\ No newline at end of file