@ninesstudios/whiteboard 0.0.1

package/README.md

@@ -0,0 +1,148 @@
+# Whiteboard
+
+A tailored React Whiteboard component that supports drawing, shapes, text, images, and more. It comes with built-in state management and a customizable toolbar.
+
+## Features
+
+- **Drawing Tools**: Pencil, Text, Rectangle, Circle, Triangle, Diamond, Star, Heart, Hexagon, Octagon, Arrow.
+- **Image Support**: Insert and manipulate images on the canvas.
+- **Canvas Controls**: Pan and Zoom functionality.
+- **Grid System**: Toggleable background grid.
+- **Selection**: Select, move, and modify elements.
+- **Export**: Export the whiteboard content as a PNG image.
+- **Locking Mechanism**: Set the whiteboard to read-only mode with custom messages.
+- **Action Handling**: Hook into internal actions for external syncing or logging.
+
+## Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install whiteboard react react-dom
+```
+
+> **Note**: If this package is not yet published to npm, you can install it locally or link it.
+
+## Usage
+
+### Basic Usage
+
+Import the `Whiteboard` component and the stylesheet. The component takes up 100% of the parent container's width and height.
+
+```jsx
+import React from 'react';
+import Whiteboard from 'whiteboard';
+import 'whiteboard/style.css'; // Import styles
+
+function App() {
+  return (
+    <div style={{ width: '100vw', height: '100vh', border: '1px solid #ccc' }}>
+      <Whiteboard />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Advanced Usage
+
+You can control the whiteboard state and handle events using props and a ref.
+
+```jsx
+import React, { useRef } from 'react';
+import Whiteboard from 'whiteboard';
+import 'whiteboard/style.css';
+
+function App() {
+  const whiteboardRef = useRef(null);
+
+  const handleAction = (action) => {
+    console.log('Action occurred:', action);
+    // Send action to server for real-time collaboration
+  };
+
+  const handleLockChange = (isLocked) => {
+    console.log('Lock state changed:', isLocked);
+  };
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Whiteboard
+        ref={whiteboardRef}
+        onAction={handleAction}
+        isLocked={false}
+        lockText="This board is currently locked"
+        onLockChange={handleLockChange}
+      />
+    </div>
+  );
+}
+```
+
+### Programmatic Updates (applyAction)
+
+You can programmatically apply actions to the whiteboard using the `applyAction` method exposed via the ref. This is essential for implementing real-time collaboration where you need to apply actions received from a server.
+
+```jsx
+import React, { useEffect, useRef } from 'react';
+import Whiteboard from 'whiteboard';
+
+function App() {
+  const whiteboardRef = useRef(null);
+
+  useEffect(() => {
+    // Example: mimicking receiving an action from a websocket
+    const mockIncomingAction = {
+      type: 'whiteboard/addElement',
+      payload: {
+        id: 'remote-1',
+        type: 'rectangle',
+        x: 200,
+        y: 200,
+        width: 100,
+        height: 100,
+        fillColor: '#FF0000'
+      }
+    };
+
+    // Apply the action to the whiteboard
+    if (whiteboardRef.current) {
+        // In a real app, this would be inside a socket event listener
+        setTimeout(() => {
+            whiteboardRef.current.applyAction(mockIncomingAction);
+        }, 1000);
+    }
+  }, []);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Whiteboard ref={whiteboardRef} />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onAction` | `(action: object) => void` | `undefined` | Callback fired whenever a state-changing action occurs (e.g., drawing, moving). |
+| `isLocked` | `boolean` | `false` | When `true`, disables all editing tools and shows a lock indicator. |
+| `lockText` | `string` | `undefined` | Custom text to display on the lock indicator when `isLocked` is true. |
+| `onLockChange` | `(isLocked: boolean) => void` | `undefined` | Callback fired when the lock state changes. |
+
+### Ref Methods
+
+You can access these methods by passing a `ref` to the `Whiteboard` component.
+
+| Method | Arguments | Description |
+|--------|-----------|-------------|
+| `applyAction` | `(action: object)` | Dispatches an action to the internal Redux store. Useful for applying remote updates. |
+| `canvas` | - | Returns the underlying HTMLCanvasElement. |
+
+## License
+
+MIT

package/dist/whiteboard.css

@@ -0,0 +1 @@
+.watermark{position:absolute;bottom:0;right:0;padding:8px 12px;background-color:#fffc;border-top-left-radius:8px;font-family:sans-serif;font-size:14px;color:#666;pointer-events:none;z-index:1000;-webkit-user-select:none;user-select:none;text-decoration:none}.toolbar{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:44px;padding:1px;margin:10px auto;z-index:1000;border:1px solid #ccc;background:#fff;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000001a}.toolbar>button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.toolbar>button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.toolbar>.language-container:last-child button{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.ellipsis-container{position:relative}.shapes-popup{position:absolute;left:50px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;min-width:160px;z-index:1001}.shapes-popup-header{font-size:12px;font-weight:600;color:#666;padding:4px 8px 8px;border-bottom:1px solid #eee;margin-bottom:8px}.shapes-popup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.shapes-popup-grid button{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;font-size:16px}.shapes-popup-grid button:hover{background:#e9e9e9}.shapes-popup-grid button.active{background:#d0e8ff;color:#06c}.language-container{position:relative}.language-popup{position:absolute;left:50px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;min-width:140px;z-index:1001}.language-popup-header{font-size:12px;font-weight:600;color:#666;padding:4px 8px 8px;border-bottom:1px solid #eee;margin-bottom:8px}.language-options{display:flex;flex-direction:column;gap:4px}.language-options button{width:100%;height:32px;padding:0 8px;display:flex;align-items:center;justify-content:flex-start;font-size:14px;gap:8px;border-radius:4px}.language-options button:hover{background:#e9e9e9}.language-options button.active{background:#d0e8ff;color:#06c}.prop-tools{position:absolute;bottom:10px;left:10px;padding:1px;margin:10px auto;z-index:1000;border:1px solid #ccc;background:#fff;border-radius:8px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000001a}.prop-tools>button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.prop-tools>button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}button{width:40px;height:40px;border:none;border-radius:4px;background-color:#fff;cursor:pointer;transition:background .3s;text-align:center;line-height:40px;display:flex;justify-content:center;align-items:center}button:hover{background:#e9e9e9}button.active{background:#d0e8ff;color:#06c}select{width:36px;height:36px;border:none;border-radius:4px;background-color:#fff;cursor:pointer;text-align:center;line-height:36px;display:flex;justify-content:center;align-items:center;font-size:14px}.prop-tool-item{min-width:80px;margin:2px 4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.prop-tool-item>*{text-align:center;flex:auto;min-height:30px;width:100%;box-sizing:border-box;padding-left:4px;padding-right:4px}.prop-tool-item>span{font-size:12px;color:#555;margin-bottom:4px;display:flex;justify-content:center;align-items:center;text-align:center;white-space:nowrap}.layer-buttons{display:flex;flex-direction:row;gap:4px;justify-content:center}.layer-buttons button{width:36px;height:36px;padding:0;display:flex;justify-content:center;align-items:center}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;background:#f5f5f5}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}#root{width:100%;height:100%}