lcms-pdf-annotation 0.0.0-stage → 1.0.3

package/README.md

@@ -1,3 +1,456 @@
-# Temporary Holding Version
+# crystal-draw
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A multi-board drawing and whiteboard React component with PDF import and export functionality.
+
+[![npm version](https://img.shields.io/npm/v/crystal-draw)](https://www.npmjs.com/package/crystal-draw)
+[![license](https://img.shields.io/npm/l/crystal-draw)](https://www.npmjs.com/package/crystal-draw)
+
+---
+
+## Features
+
+- 🖊️ **Drawing tools** — Pen, Highlighter, Eraser, and Text
+- 📐 **Shape tools** — Lines, Arrows, Rectangles, Circles, Triangles, Polygons, 2D/3D Graphs, Cones, Cylinders, Cuboids
+- 🗂️ **Multi-board** — Add, remove, and navigate between multiple boards
+- ↩️ **Undo / Redo** — Full history with keyboard shortcuts (`Ctrl+Z` / `Ctrl+Y` / `Ctrl+Shift+Z`)
+- 📄 **PDF import** — Upload a PDF and each page becomes a board background
+- 📤 **PDF export** — Export all boards as a single PDF file
+- 📱 **Touch support** — Works on touch devices
+- 🎨 **Customisable** — Accepts `className` and `style` props for easy layout integration
+
+---
+
+## Installation
+
+```bash
+npm install crystal-draw
+```
+
+> **Peer dependencies** — React 16 or higher is required and must be installed in your project.
+
+---
+
+## Quick Start
+
+```tsx
+import CrystalDraw from 'crystal-draw';
+import 'crystal-draw/style.css';
+
+export default function App() {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <CrystalDraw />
+    </div>
+  );
+}
+```
+
+> **Important:** Always import `crystal-draw/style.css` so that cursor and tool styles are applied correctly.
+
+---
+
+## Component Props
+
+| Prop        | Type                    | Default     | Description                                      |
+|-------------|-------------------------|-------------|--------------------------------------------------|
+| `className` | `string`                | `undefined` | CSS class(es) applied to the root container div  |
+| `style`     | `React.CSSProperties`   | `undefined` | Inline styles applied to the root container div  |
+
+The component fills its parent container. Give the parent a defined width and height to control the canvas size.
+
+```tsx
+<CrystalDraw
+  className="my-whiteboard"
+  style={{ border: '1px solid #ccc', borderRadius: '8px' }}
+/>
+```
+
+---
+
+## API — Imperative Controls
+
+All state is managed by an internal [Zustand](https://github.com/pmndrs/zustand) store. You can control the whiteboard programmatically using the exported helper functions — ideal for building your own toolbar.
+
+### Tool Selection
+
+```tsx
+import { setTool } from 'crystal-draw';
+
+// Switch the active drawing tool
+setTool('pen');          // freehand pen
+setTool('highlighter'); // semi-transparent highlighter
+setTool('eraser');      // erase drawn strokes
+setTool('text');        // click on canvas to place text
+setTool('laser');       // laser pointer (no persistent marks)
+setTool('select');      // selection mode
+
+// Shape tools (2D)
+setTool('line');
+setTool('arrowline');
+setTool('rectangle');
+setTool('circle');
+setTool('triangle');
+setTool('pentagon');
+setTool('hexagon');
+setTool('octagon');
+setTool('parabola');
+setTool('twoDgraph');
+setTool('threeDgraph');
+
+// Shape tools (3D)
+setTool('cuboid');
+setTool('cone');
+setTool('cylinder');
+```
+
+### Color & Line Width
+
+```tsx
+import { setColor, setHighlighterColor, setLineWidth } from 'crystal-draw';
+
+// Set pen / shape color (any valid CSS color string)
+setColor('#ff0000');
+setColor('rgb(0, 128, 255)');
+
+// Set highlighter color (use rgba for transparency)
+setHighlighterColor('rgba(255, 255, 0, 0.5)');
+
+// Set line width for a specific tool type
+setLineWidth(2,  'PEN');         // thin pen stroke
+setLineWidth(16, 'HIGHLIGHTER'); // default highlighter width
+setLineWidth(60, 'ERASER');      // large eraser
+```
+
+### Undo & Redo
+
+```tsx
+import { undo, redo } from 'crystal-draw';
+
+undo(); // remove last drawn stroke
+redo(); // re-apply last undone stroke
+```
+
+Keyboard shortcuts are enabled automatically when the canvas is mounted:
+- **Undo:** `Ctrl+Z` (Windows/Linux) or `⌘+Z` (macOS)
+- **Redo:** `Ctrl+Y` or `Ctrl+Shift+Z` (Windows/Linux) / `⌘+Shift+Z` (macOS)
+
+### Board Management
+
+```tsx
+import { addBoard, removeBoard, clearBoard, setCurrentBoardIndex } from 'crystal-draw';
+
+addBoard();                  // append a new blank board
+removeBoard(2);              // remove board at index 2
+clearBoard(0);               // erase all strokes on board at index 0
+setCurrentBoardIndex(1);     // navigate to board at index 1
+```
+
+### Board Rotation
+
+Rotate the active board (or any specific board by index) in 90° increments. Supports rotation in both clockwise and anti-clockwise directions:
+
+```tsx
+import {
+  rotateClockwise,
+  rotateAntiClockwise,
+  rotateBoard,
+  getBoardRotation
+} from 'crystal-draw';
+
+// Rotate the current board by 90 degrees
+await rotateClockwise();     // rotates 90° clockwise (e.g. 0° -> 90° -> 180° -> 270° -> 0°)
+await rotateAntiClockwise(); // rotates 90° anti-clockwise
+
+// Rotate a specific board by board index
+await rotateClockwise(0);     // rotate board 0 clockwise by 90°
+await rotateAntiClockwise(2); // rotate board 2 anti-clockwise by 90°
+
+// Or use the generic rotateBoard function
+await rotateBoard('clockwise');
+await rotateBoard('anti-clockwise');
+
+// Get the current rotation angle (0, 90, 180, or 270)
+const rotation = getBoardRotation(); // e.g. 90
+```
+
+### PDF Import
+
+```tsx
+import { uploadPDF } from 'crystal-draw';
+
+async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+  const file = event.target.files?.[0];
+  if (file) {
+    await uploadPDF(file); // each page becomes a new board background
+  }
+}
+
+// Usage in JSX
+<input type="file" accept="application/pdf" onChange={handleFileChange} />
+```
+
+If the whiteboard currently has only one empty board, `uploadPDF` replaces it with the PDF pages. Otherwise the pages are appended as additional boards.
+
+### PDF Export
+
+```tsx
+import { exportPDF } from 'crystal-draw';
+import { useRef } from 'react';
+
+function App() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  async function handleExport() {
+    const boardsContainer = document.getElementById('crystal--draw-container') as HTMLDivElement;
+    if (!boardsContainer) return;
+
+    const file = await exportPDF(boardsContainer);
+    if (file) {
+      const url = URL.createObjectURL(file);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'whiteboard.pdf';
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  return (
+    <>
+      <button onClick={handleExport}>Export PDF</button>
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <CrystalDraw />
+      </div>
+    </>
+  );
+}
+```
+
+> The root element rendered by `<CrystalDraw />` always has the id `crystal--draw-container`.
+
+---
+
+## Advanced — Zustand Store
+
+For reactive access to the internal state (e.g. building a live toolbar that reflects the current tool), use the exported `useBoundStore` hook directly:
+
+```tsx
+import { useBoundStore } from 'crystal-draw';
+
+function Toolbar() {
+  const tool   = useBoundStore((state) => state.tool);
+  const boards = useBoundStore((state) => state.boards);
+
+  return (
+    <div>
+      <p>Active tool: {tool}</p>
+      <p>Total boards: {boards.length}</p>
+    </div>
+  );
+}
+```
+
+### Store State Shape
+
+| Field               | Type                                         | Description                                  |
+|---------------------|----------------------------------------------|----------------------------------------------|
+| `tool`              | `ToolTypes`                                  | Currently active tool                        |
+| `color`             | `string`                                     | Current pen / shape color                    |
+| `highlighterColor`  | `string`                                     | Current highlighter color                    |
+| `lineWidths`        | `{ PEN: number, HIGHLIGHTER: number, ERASER: number }` | Line widths per tool type        |
+| `boards`            | `Array<{ id, shapes, page, rotation, zoom }>` | All board data (zoom defaults to 1)        |
+| `currentBoardIndex` | `number`                                     | Index of the currently active board          |
+| `history`           | `historyItem[]`                              | Undo/redo history stack                      |
+| `undoIndex`         | `number`                                     | Current position in the history stack        |
+
+---
+
+### Zoom (Page Scale)
+
+Each board has an independent zoom level (default `1.0`, range `0.1–5`).
+
+```tsx
+import {
+  zoomIn,
+  zoomOut,
+  setZoom,
+  resetZoom,
+  getZoom,
+  getBoardZoom,
+} from 'crystal-draw';
+
+// Zoom in/out by a step (default step = 0.1). Returns the new zoom level.
+const z1 = zoomIn();          // 1.0 → 1.1
+const z2 = zoomOut(0.25);    // 1.1 → 0.85
+
+// Set an exact zoom level (clamped to [0.1, 5])
+setZoom(1.5);    // 150 %
+setZoom(0.5);    // 50 %
+
+// Reset zoom to 100 %
+resetZoom();
+
+// Read the current zoom level
+const zoom = getZoom();          // e.g. 1.5
+const zoom2 = getBoardZoom(2);  // zoom of board at index 2
+
+// All functions accept an optional boardIndex (defaults to currentBoardIndex)
+zoomIn(0.1, 0);    // zoom board 0 in by 0.1
+zoomOut(0.2, 1);   // zoom board 1 out by 0.2
+setZoom(2, 0);     // set board 0 to 200 %
+resetZoom(1);      // reset board 1
+```
+
+#### Via `ref` (imperative API)
+
+```tsx
+import CrystalDraw, { CrystalDrawRef } from 'crystal-draw';
+import { useRef, useState } from 'react';
+
+function App() {
+  const boardRef = useRef<CrystalDrawRef>(null);
+  const [zoom, setCurrentZoom] = useState(1);
+
+  return (
+    <>
+      <button onClick={() => { const z = boardRef.current?.zoomIn(); if (z != null) setCurrentZoom(z); }}>
+        Zoom In
+      </button>
+      <button onClick={() => { const z = boardRef.current?.zoomOut(); if (z != null) setCurrentZoom(z); }}>
+        Zoom Out
+      </button>
+      <button onClick={() => { boardRef.current?.resetZoom(); setCurrentZoom(1); }}>
+        Reset
+      </button>
+      <span>{Math.round(zoom * 100)}%</span>
+
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <CrystalDraw ref={boardRef} onZoomChange={(z) => setCurrentZoom(z)} />
+      </div>
+    </>
+  );
+}
+```
+
+#### Via `getZoomCallbacks` prop
+
+```tsx
+import CrystalDraw, { ZoomCallbacks } from 'crystal-draw';
+
+function App() {
+  let controls: ZoomCallbacks | null = null;
+
+  return (
+    <>
+      <button onClick={() => controls?.zoomIn()}>+</button>
+      <button onClick={() => controls?.zoomOut()}>-</button>
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <CrystalDraw
+          onZoomChange={(zoom, boardIndex) =>
+            console.log(`Board ${boardIndex} zoom: ${zoom}`)
+          }
+          getZoomCallbacks={(cb) => { controls = cb; }}
+        />
+      </div>
+    </>
+  );
+}
+```
+
+---
+
+## Full Example — Custom Toolbar
+
+```tsx
+import CrystalDraw, {
+  setTool,
+  setColor,
+  setLineWidth,
+  undo,
+  redo,
+  addBoard,
+  clearBoard,
+  uploadPDF,
+  exportPDF,
+  useBoundStore,
+} from 'crystal-draw';
+import 'crystal-draw/style.css';
+
+export default function Whiteboard() {
+  const tool   = useBoundStore((state) => state.tool);
+  const boards = useBoundStore((state) => state.boards);
+
+  async function handleExport() {
+    const el = document.getElementById('crystal--draw-container') as HTMLDivElement;
+    const file = await exportPDF(el);
+    if (file) {
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(file);
+      a.download = 'drawing.pdf';
+      a.click();
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      {/* Toolbar */}
+      <div style={{ display: 'flex', gap: 8, padding: 8, background: '#1e1e2e' }}>
+        <button onClick={() => setTool('pen')}         style={{ fontWeight: tool === 'pen' ? 'bold' : 'normal' }}>Pen</button>
+        <button onClick={() => setTool('highlighter')} style={{ fontWeight: tool === 'highlighter' ? 'bold' : 'normal' }}>Highlight</button>
+        <button onClick={() => setTool('eraser')}      style={{ fontWeight: tool === 'eraser' ? 'bold' : 'normal' }}>Eraser</button>
+        <button onClick={() => setTool('text')}>Text</button>
+        <button onClick={() => setColor('#ff0000')}>Red</button>
+        <button onClick={() => setColor('#0000ff')}>Blue</button>
+        <button onClick={() => setLineWidth(2, 'PEN')}>Thin</button>
+        <button onClick={() => setLineWidth(6, 'PEN')}>Thick</button>
+        <button onClick={undo}>Undo</button>
+        <button onClick={redo}>Redo</button>
+        <button onClick={addBoard}>+ Board</button>
+        <button onClick={() => clearBoard(boards.length - 1)}>Clear</button>
+        <label style={{ cursor: 'pointer', color: 'white' }}>
+          Import PDF
+          <input
+            type="file"
+            accept="application/pdf"
+            style={{ display: 'none' }}
+            onChange={(e) => e.target.files?.[0] && uploadPDF(e.target.files[0])}
+          />
+        </label>
+        <button onClick={handleExport}>Export PDF</button>
+      </div>
+
+      {/* Canvas */}
+      <div style={{ flex: 1 }}>
+        <CrystalDraw />
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Built-in Color Palette
+
+The package exports sensible defaults you can reference:
+
+**Pen colors:** `#f8f8f8` (default), `#262626` (black), `#ff0000` (red), `#00ff00` (lime), `#0000ff` (blue), `#ffff00` (yellow), and more standard web colors.
+
+**Highlighter colors:** Yellow `rgba(225,203,5,0.7)`, Blue `rgba(39,152,177,0.7)`, Purple `rgba(234,151,255,0.7)`, Green `rgba(100,255,75,0.7)`, Orange `rgba(255,172,75,0.7)`.
+
+You can use any valid CSS color string with `setColor` / `setHighlighterColor`.
+
+---
+
+## Browser / Environment Requirements
+
+- **React** 16+
+- **Modern browser** with Canvas 2D API support
+- **PDF.js** is used internally for PDF import (lazy-loaded, no extra setup needed)
+- **jsPDF** and **html2canvas-pro** are used internally for PDF export (lazy-loaded)
+
+---
+
+## License
+
+ISC — © Nakul Soral ([nakulsoral@aesl.in](mailto:nakulsoral@aesl.in))

package/dist/TwoDshapes.d.ts

@@ -0,0 +1,20 @@
+import { LineElement, Point } from "./interface";
+export declare const rotatePoint: (x: number, y: number, cx: number, cy: number, angle: number) => Point;
+export declare function calculateBoundingBox(shape: LineElement, canvas: HTMLCanvasElement): {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+};
+export declare const isShapeSelected: (shape: LineElement, point: Point, canvas: HTMLCanvasElement) => boolean;
+export declare function normalizeCoordinates(start: Point, current: Point): {
+    topLeft: {
+        x: number;
+        y: number;
+    };
+    dimensions: {
+        width: number;
+        height: number;
+    };
+};
+export declare function getHandleUnderCursor(position: Point, shape: LineElement, canvas: HTMLCanvasElement): "top-left" | "top-right" | "bottom-left" | "bottom-right" | null;

package/dist/TwoDshapes.js

@@ -0,0 +1,148 @@
+const padding = 5;
+export const rotatePoint = (x, y, cx, cy, angle) => {
+    return {
+        x: (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
+        y: (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy
+    };
+};
+export function calculateBoundingBox(shape, canvas) {
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    if (shape.type === 'text' && shape.text) {
+        const startPoint = shape.points[0];
+        const fontSizematch = shape.font?.match(/(\d+)px/);
+        const fontSize = fontSizematch ? parseInt(fontSizematch[1], 10) : 20;
+        let widthInPixels = 0;
+        let heightInPixels = 0;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.save();
+            if (shape.font)
+                ctx.font = shape.font;
+            const maxWidth = 400;
+            const rawLines = shape.text.split('\n');
+            const wrappedLines = [];
+            rawLines.forEach((line) => {
+                if (ctx.measureText(line).width <= maxWidth) {
+                    wrappedLines.push(line);
+                }
+                else {
+                    const words = line.split(/(\s+)/);
+                    let currentLine = '';
+                    words.forEach((word) => {
+                        const testLine = currentLine + word;
+                        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+                            wrappedLines.push(currentLine);
+                            currentLine = word;
+                        }
+                        else {
+                            currentLine = testLine;
+                        }
+                    });
+                    if (currentLine)
+                        wrappedLines.push(currentLine);
+                }
+            });
+            const maxLineWidth = wrappedLines.length > 0
+                ? Math.max(...wrappedLines.map(l => ctx.measureText(l).width))
+                : 0;
+            widthInPixels = maxLineWidth;
+            heightInPixels = wrappedLines.length * (fontSize * 1.2);
+            ctx.restore();
+        }
+        else {
+            const lines = shape.text.split('\n');
+            const maxLineLength = Math.max(...lines.map(l => l.length));
+            widthInPixels = maxLineLength * fontSize * 0.6;
+            heightInPixels = lines.length * fontSize * 1.2;
+        }
+        return {
+            minX: startPoint.x + (4 / canvas.width),
+            maxX: startPoint.x + (4 + widthInPixels) / canvas.width,
+            minY: startPoint.y + (2 / canvas.height),
+            maxY: startPoint.y + (2 + heightInPixels) / canvas.height
+        };
+    }
+    shape.points.forEach((point) => {
+        if (point.x < minX)
+            minX = point.x;
+        if (point.x > maxX)
+            maxX = point.x;
+        if (point.y < minY)
+            minY = point.y;
+        if (point.y > maxY)
+            maxY = point.y;
+    });
+    return {
+        minX,
+        maxX,
+        minY,
+        maxY
+    };
+}
+export const isShapeSelected = (shape, point, canvas) => {
+    const boundingBox = calculateBoundingBox(shape, canvas);
+    const width = boundingBox.maxX - boundingBox.minX;
+    const height = boundingBox.maxY - boundingBox.minY;
+    const centerX = (boundingBox.minX + width / 2) * canvas.width;
+    const centerY = (boundingBox.minY + height / 2) * canvas.height;
+    // Rotate the point in the opposite direction of the shape's rotation
+    const rotatedPoint = rotatePoint(point.x * canvas.width, point.y * canvas.height, centerX, centerY, 0);
+    return (rotatedPoint.x >= boundingBox.minX * canvas.width - padding &&
+        rotatedPoint.x <= boundingBox.maxX * canvas.width + padding &&
+        rotatedPoint.y >= boundingBox.minY * canvas.height - padding &&
+        rotatedPoint.y <= boundingBox.maxY * canvas.height + padding);
+};
+export function normalizeCoordinates(start, current) {
+    return {
+        topLeft: {
+            x: Math.min(start.x, current.x),
+            y: Math.min(start.y, current.y)
+        },
+        dimensions: {
+            width: current.x - start.x,
+            height: current.y - start.y
+        }
+    };
+}
+export function getHandleUnderCursor(position, shape, canvas) {
+    position = { x: position.x * canvas.width, y: position.y * canvas.height };
+    const startPoint = shape.points[0];
+    const endPoint = shape.points[shape.points.length - 1];
+    const { dimensions } = normalizeCoordinates(startPoint, endPoint);
+    const centerX = (startPoint.x + dimensions.width / 2) * canvas.width;
+    const centerY = (startPoint.y + dimensions.height / 2) * canvas.height;
+    const handleSize = 8;
+    const topLeft = rotatePoint(startPoint.x * canvas.width, startPoint.y * canvas.height, centerX, centerY, 0);
+    const topRight = rotatePoint((startPoint.x + dimensions.width) * canvas.width, startPoint.y * canvas.height, centerX, centerY, 0);
+    const bottomLeft = rotatePoint(startPoint.x * canvas.width, (startPoint.y + dimensions.height) * canvas.height, centerX, centerY, 0);
+    const bottomRight = rotatePoint((startPoint.x + dimensions.width) * canvas.width, (startPoint.y + dimensions.height) * canvas.height, centerX, centerY, 0);
+    if (position.x >= topLeft.x - handleSize &&
+        position.x <= topLeft.x + handleSize &&
+        position.y >= topLeft.y - handleSize &&
+        position.y <= topLeft.y + handleSize) {
+        return 'top-left';
+    }
+    if (position.x >= topRight.x - handleSize &&
+        position.x <= topRight.x + handleSize &&
+        position.y >= topRight.y - handleSize &&
+        position.y <= topRight.y + handleSize) {
+        return 'top-right';
+    }
+    if (position.x >= bottomLeft.x - handleSize &&
+        position.x <= bottomLeft.x + handleSize &&
+        position.y >= bottomLeft.y - handleSize &&
+        position.y <= bottomLeft.y + handleSize) {
+        return 'bottom-left';
+    }
+    if (position.x >= bottomRight.x - handleSize &&
+        position.x <= bottomRight.x + handleSize &&
+        position.y >= bottomRight.y - handleSize &&
+        position.y <= bottomRight.y + handleSize) {
+        return 'bottom-right';
+    }
+    return null;
+}
+//# sourceMappingURL=TwoDshapes.js.map

package/dist/TwoDshapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoDshapes.js","sourceRoot":"","sources":["../src/TwoDshapes.ts"],"names":[],"mappings":"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"}

package/dist/assets/cursor-highlighter.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#000" stroke="#fff"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m9 11-6 6v3h9l3-3" />
+    <path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" />
+</svg>

package/dist/assets/cursor-pencil.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#000" stroke="#fff"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path
+        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+    <path d="m15 5 4 4" />
+</svg>