@markup-canvas/react 1.0.0 → 1.0.3

package/README.md

@@ -1,6 +1,8 @@
 # @markup-canvas/react
 
-React component and hook for `@markup-canvas/core`.
+React wrapper for `@markup-canvas/core`.
+
+A lightweight, canvas-like container with smooth pan and zoom capabilities for HTML and React content.
 
 ## ✨ Live Demo
 
@@ -18,7 +20,7 @@ yarn add @markup-canvas/react @markup-canvas/core
 
 ## Usage
 
-### Component API
+### MarkupCanvas Component
 
 ```tsx
 import { useRef } from 'react';
@@ -52,7 +54,126 @@ function App() {
 }
 ```
 
-### Hook API
+#### Props
+
+The `MarkupCanvas` component accepts the following props:
+
+**Canvas Dimensions**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number` | - | Canvas width in pixels |
+| `height` | `number` | - | Canvas height in pixels |
+| `enableAcceleration` | `boolean` | `true` | Enable hardware acceleration |
+
+**Interaction Controls**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableZoom` | `boolean` | `true` | Enable zoom functionality |
+| `enablePan` | `boolean` | `true` | Enable pan functionality |
+| `enableTouch` | `boolean` | `true` | Enable touch gestures |
+| `enableKeyboard` | `boolean` | `true` | Enable keyboard controls |
+| `limitKeyboardEventsToCanvas` | `boolean` | `true` | Limit keyboard events to when canvas is focused |
+
+**Zoom Behavior**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `zoomSpeed` | `number` | `1.2` | Zoom speed factor |
+| `minZoom` | `number` | `0.1` | Minimum zoom level |
+| `maxZoom` | `number` | `10` | Maximum zoom level |
+| `enableTransition` | `boolean` | `false` | Enable smooth transitions |
+| `transitionDuration` | `number` | `300` | Transition duration in ms |
+| `enableAdaptiveSpeed` | `boolean` | `true` | Enable adaptive zoom speed |
+
+**Pan Behavior**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableLeftDrag` | `boolean` | `true` | Enable left mouse button drag |
+| `enableMiddleDrag` | `boolean` | `true` | Enable middle mouse button drag |
+| `requireSpaceForMouseDrag` | `boolean` | `false` | Require space key for mouse drag |
+| `keyboardPanStep` | `number` | `50` | Keyboard pan step size in pixels |
+| `keyboardFastMultiplier` | `number` | `3` | Fast pan multiplier (with shift key) |
+| `keyboardZoomStep` | `number` | `0.2` | Keyboard zoom step size |
+
+**Click-to-Zoom**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableClickToZoom` | `boolean` | `false` | Enable click to zoom |
+| `clickZoomLevel` | `number` | `2` | Target zoom level for click-to-zoom |
+| `requireOptionForClickZoom` | `boolean` | `false` | Require Option/Alt key for click-to-zoom |
+
+**Visual Elements**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableRulers` | `boolean` | `true` | Show rulers on top and left |
+| `enableGrid` | `boolean` | `false` | Show background grid |
+| `gridColor` | `string` | `"#e0e0e0"` | Grid line color |
+
+**Ruler Styling**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `rulerBackgroundColor` | `string` | `"#f5f5f5"` | Ruler background color |
+| `rulerBorderColor` | `string` | `"#d0d0d0"` | Ruler border color |
+| `rulerTextColor` | `string` | `"#666666"` | Ruler text color |
+| `rulerMajorTickColor` | `string` | `"#666666"` | Major tick mark color |
+| `rulerMinorTickColor` | `string` | `"#999999"` | Minor tick mark color |
+| `rulerFontSize` | `number` | `12` | Ruler font size in pixels |
+| `rulerFontFamily` | `string` | `"monospace"` | Ruler font family |
+| `rulerUnits` | `string` | `"px"` | Ruler units label |
+
+**React-Specific Props**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Content to render inside the canvas |
+| `className` | `string` | - | CSS class name |
+| `style` | `CSSProperties` | - | Inline styles |
+
+**Callbacks**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `onTransformUpdate` | `(transform: Transform) => void` | Called continuously during transform updates |
+| `onTransformChange` | `(transform: Transform) => void` | Called when transform change completes |
+| `onZoomChange` | `(zoom: number) => void` | Called when zoom level changes |
+| `onPanChange` | `(pan: { x: number; y: number }) => void` | Called when pan position changes |
+| `onReady` | `(canvas: MarkupCanvas) => void` | Called when canvas is ready |
+
+**Example with Multiple Props**
+
+```tsx
+<MarkupCanvas
+  ref={canvasRef}
+  width={20000}
+  height={15000}
+  enableZoom={true}
+  enablePan={true}
+  enableKeyboard={true}
+  enableRulers={true}
+  enableGrid={true}
+  zoomSpeed={1.2}
+  minZoom={0.1}
+  maxZoom={10}
+  gridColor="#e8e8e8"
+  rulerBackgroundColor="#fafafa"
+  enableClickToZoom={true}
+  clickZoomLevel={2}
+  onZoomChange={(zoom) => console.log('Zoom:', zoom)}
+  onPanChange={(pan) => console.log('Pan:', pan)}
+  onReady={(canvas) => console.log('Canvas ready:', canvas)}
+  className="custom-canvas"
+>
+  {/* Canvas content */}
+</MarkupCanvas>
+```
+
+### useMarkupCanvas Hook
 
 The `useMarkupCanvas` hook provides convenient access to canvas methods.
 **Important:** You must pass `initCanvasUtils` to the `onReady` prop for the hook to work properly.
@@ -90,70 +211,6 @@ function App() {
 }
 ```
 
-## API
-
-### Component Props
-
-#### Canvas Dimensions
-- `width?: number` - Canvas width in pixels
-- `height?: number` - Canvas height in pixels
-- `enableAcceleration?: boolean` - Enable hardware acceleration
-
-#### Interaction Controls
-- `enableZoom?: boolean` - Enable zoom functionality
-- `enablePan?: boolean` - Enable pan functionality
-- `enableTouch?: boolean` - Enable touch gestures
-- `enableKeyboard?: boolean` - Enable keyboard controls
-- `limitKeyboardEventsToCanvas?: boolean` - Limit keyboard events to when canvas is focused
-
-#### Zoom Behavior
-- `zoomSpeed?: number` - Zoom speed factor
-- `minZoom?: number` - Minimum zoom level
-- `maxZoom?: number` - Maximum zoom level
-- `enableTransition?: boolean` - Enable smooth transitions
-- `transitionDuration?: number` - Transition duration in ms
-- `enableAdaptiveSpeed?: boolean` - Enable adaptive zoom speed
-
-#### Pan Behavior
-- `enableLeftDrag?: boolean` - Enable left mouse button drag
-- `enableMiddleDrag?: boolean` - Enable middle mouse button drag
-- `requireSpaceForMouseDrag?: boolean` - Require space key for mouse drag
-- `keyboardPanStep?: number` - Keyboard pan step size
-- `keyboardFastMultiplier?: number` - Fast pan multiplier (with shift)
-- `keyboardZoomStep?: number` - Keyboard zoom step size
-
-#### Click-to-Zoom
-- `enableClickToZoom?: boolean` - Enable click to zoom
-- `clickZoomLevel?: number` - Target zoom level for click-to-zoom
-- `requireOptionForClickZoom?: boolean` - Require Option/Alt key for click-to-zoom
-
-#### Visual Elements
-- `enableRulers?: boolean` - Show rulers
-- `enableGrid?: boolean` - Show background grid
-- `gridColor?: string` - Grid line color
-
-#### Ruler Styling
-- `rulerBackgroundColor?: string` - Ruler background color
-- `rulerBorderColor?: string` - Ruler border color
-- `rulerTextColor?: string` - Ruler text color
-- `rulerMajorTickColor?: string` - Major tick mark color
-- `rulerMinorTickColor?: string` - Minor tick mark color
-- `rulerFontSize?: number` - Ruler font size
-- `rulerFontFamily?: string` - Ruler font family
-- `rulerUnits?: string` - Ruler units label
-
-#### React-Specific Props
-- `children?: ReactNode` - Content to render inside the canvas
-- `className?: string` - CSS class name
-- `style?: CSSProperties` - Inline styles
-
-#### Callbacks
-- `onTransformUpdate?: (transform: Transform) => void` - Called on transform update
-- `onTransformChange?: (transform: Transform) => void` - Called on transform change
-- `onZoomChange?: (zoom: number) => void` - Called on zoom change
-- `onPanChange?: (pan: { x: number; y: number }) => void` - Called on pan change
-- `onReady?: (canvas: MarkupCanvas) => void` - Called when canvas is ready
-
 ## License
 
 **CC BY-NC 4.0** - Creative Commons Attribution-NonCommercial 4.0 International

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas React
  * React components and hooks for markup-canvas
- * @version 1.0.0
+ * @version 1.0.3
  */
 'use strict';
 

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas React
  * React components and hooks for markup-canvas
- * @version 1.0.0
+ * @version 1.0.3
  */
 import { jsx } from 'react/jsx-runtime';
 import { MarkupCanvas as MarkupCanvas$1 } from '@markup-canvas/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markup-canvas/react",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "React components and hooks for markup-canvas",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -8,7 +8,8 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/",
-    "src/"
+    "src/",
+    "README.md"
   ],
   "scripts": {
     "build": "rollup -c",
@@ -25,6 +26,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.6",
+    "@markup-canvas/core": "workspace:*",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/react": "^19.2.2",
@@ -53,5 +55,5 @@
   "bugs": {
     "url": "https://github.com/fritzbenning/markup-canvas/issues"
   },
-  "homepage": "https://github.com/fritzbenning/markup-canvas#readme"
+  "homepage": "https://markup-canvas.vercel.app/"
 }