@djangocfg/ui-nextjs 2.1.64 → 2.1.66

package/src/tools/ImageViewer/ImageViewer.tsx

@@ -0,0 +1,416 @@
+'use client';
+
+/**
+ * ImageViewer - Image viewer with zoom, pan, rotate, flip
+ *
+ * Features:
+ * - Zoom with mouse wheel and presets
+ * - Pan with drag
+ * - Rotate 90°
+ * - Flip horizontal/vertical
+ * - Fullscreen dialog
+ * - Keyboard shortcuts (+/-, 0, r)
+ */
+
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { ImageIcon, ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
+import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
+import { Button, cn, Dialog, DialogContent } from '@djangocfg/ui-core';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../components/dropdown-menu';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface ImageFile {
+  name: string;
+  path: string;
+  mimeType?: string;
+}
+
+// Preset zoom levels
+const ZOOM_PRESETS = [
+  { label: 'Fit', value: 'fit' },
+  { label: '25%', value: 0.25 },
+  { label: '50%', value: 0.5 },
+  { label: '100%', value: 1 },
+  { label: '200%', value: 2 },
+  { label: '400%', value: 4 },
+] as const;
+
+export interface ImageViewerProps {
+  /** File info (name, path, mimeType) */
+  file: ImageFile;
+  /** Image content as string (data URL or base64) or ArrayBuffer */
+  content: string | ArrayBuffer;
+  /** Hide expand button when already in dialog */
+  inDialog?: boolean;
+}
+
+interface ImageTransform {
+  rotation: number;
+  flipH: boolean;
+  flipV: boolean;
+}
+
+// Toolbar component
+function ImageToolbar({
+  scale,
+  transform,
+  onRotate,
+  onFlipH,
+  onFlipV,
+  onZoomPreset,
+  onExpand,
+}: {
+  scale: number;
+  transform: ImageTransform;
+  onRotate: () => void;
+  onFlipH: () => void;
+  onFlipV: () => void;
+  onZoomPreset: (value: number | 'fit') => void;
+  onExpand?: () => void;
+}) {
+  const { zoomIn, zoomOut, resetTransform, centerView } = useControls();
+
+  const zoomLabel = useMemo(() => {
+    const percent = Math.round(scale * 100);
+    return `${percent}%`;
+  }, [scale]);
+
+  return (
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg">
+      {/* Zoom controls */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={() => zoomOut()}
+      >
+        <ZoomOut className="h-3.5 w-3.5" />
+      </Button>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="h-7 px-2 min-w-[52px] font-mono text-xs">
+            {zoomLabel}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="center" className="min-w-[80px]">
+          {ZOOM_PRESETS.map((preset) => (
+            <DropdownMenuItem
+              key={preset.label}
+              onClick={() => onZoomPreset(preset.value)}
+              className="text-xs justify-center"
+            >
+              {preset.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={() => zoomIn()}
+      >
+        <ZoomIn className="h-3.5 w-3.5" />
+      </Button>
+
+      <div className="w-px h-4 bg-border mx-1" />
+
+      {/* Fit to view */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={() => resetTransform()}
+        title="Fit to view"
+      >
+        <Maximize2 className="h-3.5 w-3.5" />
+      </Button>
+
+      <div className="w-px h-4 bg-border mx-1" />
+
+      {/* Transform controls */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className={cn("h-7 w-7", transform.flipH && "bg-accent")}
+        onClick={onFlipH}
+        title="Flip horizontal"
+      >
+        <FlipHorizontal className="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className={cn("h-7 w-7", transform.flipV && "bg-accent")}
+        onClick={onFlipV}
+        title="Flip vertical"
+      >
+        <FlipVertical className="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7"
+        onClick={onRotate}
+        title="Rotate 90°"
+      >
+        <RotateCw className="h-3.5 w-3.5" />
+      </Button>
+
+      {transform.rotation !== 0 && (
+        <span className="text-[10px] text-muted-foreground font-mono pl-1">
+          {transform.rotation}°
+        </span>
+      )}
+
+      {onExpand && (
+        <>
+          <div className="w-px h-4 bg-border mx-1" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onExpand}
+            title="Open in fullscreen"
+          >
+            <Expand className="h-3.5 w-3.5" />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
+
+// Image dimensions badge
+function ImageInfo({ src }: { src: string }) {
+  const [dimensions, setDimensions] = useState<{ w: number; h: number } | null>(null);
+
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => setDimensions({ w: img.naturalWidth, h: img.naturalHeight });
+    img.src = src;
+  }, [src]);
+
+  if (!dimensions) return null;
+
+  return (
+    <div className="absolute top-3 right-3 z-10 px-2 py-1 bg-background/80 backdrop-blur-sm border rounded text-[10px] text-muted-foreground font-mono">
+      {dimensions.w} × {dimensions.h}
+    </div>
+  );
+}
+
+export function ImageViewer({ file, content, inDialog = false }: ImageViewerProps) {
+  const contentSize = content ? (typeof content === 'string' ? content.length : content.byteLength) : 0;
+  const hasContent = contentSize > 0;
+
+  const [transform, setTransform] = useState<ImageTransform>({
+    rotation: 0,
+    flipH: false,
+    flipV: false,
+  });
+  const [scale, setScale] = useState(1);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const blobUrlRef = useRef<string | null>(null);
+  const [src, setSrc] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const controlsRef = useRef<ReturnType<typeof useControls> | null>(null);
+
+  // Create blob URL
+  useEffect(() => {
+    if (!hasContent) {
+      setSrc(null);
+      return;
+    }
+
+    if (typeof content === 'string') {
+      const url = content.startsWith('data:') ? content : `data:${file.mimeType};base64,${btoa(content)}`;
+      setSrc(url);
+      return;
+    }
+
+    const blob = new Blob([content], { type: file.mimeType || 'image/png' });
+    const url = URL.createObjectURL(blob);
+    blobUrlRef.current = url;
+    setSrc(url);
+
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+    };
+  }, [content, file.mimeType, hasContent]);
+
+  // Reset transform when file changes
+  useEffect(() => {
+    setTransform({ rotation: 0, flipH: false, flipV: false });
+  }, [file.path]);
+
+  const handleRotate = useCallback(() => {
+    setTransform((prev) => ({ ...prev, rotation: (prev.rotation + 90) % 360 }));
+  }, []);
+
+  const handleFlipH = useCallback(() => {
+    setTransform((prev) => ({ ...prev, flipH: !prev.flipH }));
+  }, []);
+
+  const handleFlipV = useCallback(() => {
+    setTransform((prev) => ({ ...prev, flipV: !prev.flipV }));
+  }, []);
+
+  const handleZoomPreset = useCallback((value: number | 'fit') => {
+    if (!controlsRef.current) return;
+    if (value === 'fit') {
+      controlsRef.current.resetTransform();
+    } else {
+      controlsRef.current.setTransform(0, 0, value);
+    }
+  }, []);
+
+  const handleExpand = useCallback(() => {
+    setDialogOpen(true);
+  }, []);
+
+  // CSS transform for rotation and flip
+  const imageTransform = useMemo(() => {
+    const transforms: string[] = [];
+    if (transform.rotation) transforms.push(`rotate(${transform.rotation}deg)`);
+    if (transform.flipH) transforms.push('scaleX(-1)');
+    if (transform.flipV) transforms.push('scaleY(-1)');
+    return transforms.join(' ') || 'none';
+  }, [transform]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!containerRef.current?.contains(document.activeElement) &&
+          document.activeElement !== containerRef.current) {
+        return;
+      }
+
+      const controls = controlsRef.current;
+      if (!controls) return;
+
+      switch (e.key) {
+        case '+':
+        case '=':
+          e.preventDefault();
+          controls.zoomIn();
+          break;
+        case '-':
+          e.preventDefault();
+          controls.zoomOut();
+          break;
+        case '0':
+          e.preventDefault();
+          controls.resetTransform();
+          break;
+        case 'r':
+          if (!e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            handleRotate();
+          }
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleRotate]);
+
+  if (!hasContent) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-2 bg-muted/30">
+        <ImageIcon className="w-12 h-12 text-muted-foreground/50" />
+        <p className="text-sm text-muted-foreground">Failed to load image</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      tabIndex={0}
+      className={cn(
+        "flex-1 h-full relative overflow-hidden outline-none",
+        "bg-[length:16px_16px]",
+        "[background-color:hsl(var(--muted)/0.2)]",
+        "[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]",
+        "[background-position:0_0,0_8px,8px_-8px,-8px_0px]"
+      )}
+    >
+      {src && <ImageInfo src={src} />}
+
+      <TransformWrapper
+        initialScale={1}
+        minScale={0.1}
+        maxScale={8}
+        centerOnInit
+        onTransformed={(ref, state) => {
+          setScale(state.scale);
+          controlsRef.current = ref;
+        }}
+        onInit={(ref) => {
+          controlsRef.current = ref;
+        }}
+        wheel={{ step: 0.1 }}
+        doubleClick={{ mode: 'toggle', step: 2 }}
+        panning={{ velocityDisabled: false }}
+      >
+        <ImageToolbar
+          scale={scale}
+          transform={transform}
+          onRotate={handleRotate}
+          onFlipH={handleFlipH}
+          onFlipV={handleFlipV}
+          onZoomPreset={handleZoomPreset}
+          onExpand={!inDialog ? handleExpand : undefined}
+        />
+
+        <TransformComponent
+          wrapperClass="!w-full !h-full cursor-grab active:cursor-grabbing"
+          contentClass="!w-full !h-full flex items-center justify-center"
+        >
+          <img
+            src={src!}
+            alt={file.name}
+            className="max-w-full max-h-full object-contain select-none"
+            style={{ transform: imageTransform, transition: 'transform 0.15s ease-out' }}
+            draggable={false}
+          />
+        </TransformComponent>
+      </TransformWrapper>
+
+      {/* Fullscreen dialog */}
+      {!inDialog && (
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent className="max-w-[95vw] max-h-[95vh] w-[95vw] h-[95vh] p-0 overflow-hidden [&>button]:hidden">
+            <div className="h-full flex flex-col">
+              <div className="flex items-center justify-between px-4 py-2 border-b shrink-0">
+                <span className="text-sm font-medium truncate">{file.name}</span>
+              </div>
+              <div className="flex-1 min-h-0 relative">
+                <div className="absolute inset-0">
+                  <ImageViewer file={file} content={content} inDialog />
+                </div>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}

package/src/tools/ImageViewer/README.md

@@ -0,0 +1,161 @@
+# ImageViewer
+
+Image viewer with zoom, pan, rotate, and flip functionality.
+
+## Features
+
+- Mouse wheel zoom
+- Drag to pan
+- Zoom presets (25%, 50%, 100%, 200%, 400%)
+- Rotate 90°
+- Flip horizontal/vertical
+- Fullscreen dialog mode
+- Keyboard shortcuts
+- Checkerboard background for transparency
+- Image dimensions display
+
+## Installation
+
+```tsx
+import { ImageViewer } from '@djangocfg/ui-nextjs';
+```
+
+## Basic Usage
+
+```tsx
+<ImageViewer
+  file={{
+    name: 'photo.jpg',
+    path: '/images/photo.jpg',
+    mimeType: 'image/jpeg',
+  }}
+  content={imageArrayBuffer}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `file` | `ImageFile` | required | File info (name, path, mimeType) |
+| `content` | `string \| ArrayBuffer` | required | Image data |
+| `inDialog` | `boolean` | `false` | Hide expand button (for nested usage) |
+
+## ImageFile Type
+
+```typescript
+interface ImageFile {
+  name: string;       // Display name
+  path: string;       // File path (for state tracking)
+  mimeType?: string;  // MIME type (e.g., 'image/png')
+}
+```
+
+## Content Formats
+
+The `content` prop accepts:
+
+- **ArrayBuffer**: Binary image data (creates blob URL)
+- **Data URL**: Base64 encoded string starting with `data:`
+- **Base64 string**: Raw base64 (auto-prefixed with data URL)
+
+```tsx
+// ArrayBuffer (from fetch or file read)
+const response = await fetch('/image.png');
+const buffer = await response.arrayBuffer();
+<ImageViewer file={file} content={buffer} />
+
+// Data URL
+<ImageViewer file={file} content="data:image/png;base64,iVBORw0KGgo..." />
+
+// Base64 string (auto-converted to data URL)
+<ImageViewer file={file} content="iVBORw0KGgo..." />
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `+` / `=` | Zoom in |
+| `-` | Zoom out |
+| `0` | Reset to fit |
+| `R` | Rotate 90° |
+
+## Toolbar Controls
+
+The floating toolbar at the bottom provides:
+
+- **Zoom out** button
+- **Zoom level** dropdown with presets
+- **Zoom in** button
+- **Fit to view** button
+- **Flip horizontal** toggle
+- **Flip vertical** toggle
+- **Rotate 90°** button
+- **Expand** fullscreen button
+
+## Fullscreen Mode
+
+Click the expand button to open the image in a fullscreen dialog. The dialog includes the same toolbar and supports all interactions.
+
+```tsx
+// Fullscreen is automatically available unless inDialog is true
+<ImageViewer file={file} content={content} />
+
+// When embedding in your own dialog, disable the expand button
+<Dialog>
+  <ImageViewer file={file} content={content} inDialog />
+</Dialog>
+```
+
+## Styling
+
+The component fills its container and displays a checkerboard pattern behind transparent images.
+
+```tsx
+<div className="w-full h-[500px]">
+  <ImageViewer file={file} content={content} />
+</div>
+```
+
+## Error State
+
+When content is empty or invalid, displays an error placeholder:
+
+```tsx
+// Shows "Failed to load image" with icon
+<ImageViewer file={file} content="" />
+```
+
+## Example: File Browser Integration
+
+```tsx
+function FilePreview({ file, content }: { file: OpenFile; content: ArrayBuffer }) {
+  const imageFile: ImageFile = {
+    name: file.name,
+    path: file.path,
+    mimeType: file.mimeType,
+  };
+
+  return (
+    <div className="h-full">
+      <ImageViewer file={imageFile} content={content} />
+    </div>
+  );
+}
+```
+
+## Architecture
+
+```
+ImageViewer/
+├── index.ts           # Exports
+├── ImageViewer.tsx    # Main component with all functionality
+└── README.md          # This file
+```
+
+## Dependencies
+
+- `react-zoom-pan-pinch` - Zoom and pan functionality
+- `lucide-react` - Icons
+- `@djangocfg/ui-core` - UI components (Button, Dialog, etc.)

package/src/tools/ImageViewer/index.ts

@@ -0,0 +1,16 @@
+/**
+ * ImageViewer - Image viewer with zoom, pan, rotate, flip
+ *
+ * Features:
+ * - Zoom with mouse wheel and presets (25%, 50%, 100%, 200%, 400%)
+ * - Pan with drag
+ * - Rotate 90°
+ * - Flip horizontal/vertical
+ * - Fullscreen dialog mode
+ * - Keyboard shortcuts (+/-, 0 for reset, r for rotate)
+ * - Checkerboard background for transparency
+ * - Image dimensions display
+ */
+
+export { ImageViewer } from './ImageViewer';
+export type { ImageViewerProps, ImageFile } from './ImageViewer';