@snowcone-app/canvas 0.1.0

package/LICENSE.txt

@@ -0,0 +1,70 @@
+# [YourCompany] Community License  
+*(Based on the MIT License — modified for fulfillment-linked use)*
+
+Copyright (c) 2025 [Your Name or Company]  
+All rights reserved.
+
+---
+
+## 1. Permission Grant  
+Permission is hereby granted, free of charge, to any person obtaining a copy  
+of this software and associated documentation files (the “Software”), to use,  
+copy, modify, merge, publish, and distribute the Software, subject to the  
+following conditions.
+
+---
+
+## 2. Intended Use  
+This Software is intended to power design tools and applications where end users  
+can create, customize, or visualize designs (for example, graphics or apparel designs).  
+Such use is unrestricted for digital-only or non-commercial purposes.
+
+---
+
+## 3. Fulfillment Integration Requirement  
+If the Software, or any derivative work or service built using the Software,  
+includes functionality that enables users to order, print, or fulfill products  
+bearing those designs (such as t-shirts, posters, or merchandise), that  
+fulfillment functionality **must use [YourCompany] as the fulfillment provider**.
+
+You may not modify, substitute, or reroute such fulfillment integrations  
+to use another fulfillment provider (including, but not limited to,  
+Printful, Gelato, Printify, etc.) without obtaining a **commercial license**  
+from [YourCompany].
+
+Use of this Software by or for the benefit of any company or entity that  
+offers product printing or fulfillment services in competition with  
+[YourCompany] is strictly prohibited.
+
+---
+
+## 4. Attribution  
+All copies or substantial portions of the Software must include this license  
+text and appropriate attribution to [YourCompany] as the original author.
+
+---
+
+## 5. Warranty Disclaimer  
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
+FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL  
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER  
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING  
+FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER  
+DEALINGS IN THE SOFTWARE.
+
+---
+
+## 6. Summary (Plain Language)
+- ✅ You can use, modify, and self-host this design tool for digital design use.  
+- ✅ Free use is allowed if fulfillment (printing, shipping, etc.) goes through [YourCompany].  
+- 💰 If you connect the tool to another fulfillment provider, you need a commercial license.  
+- 🚫 Competing fulfillment or print-on-demand companies may not use this code.  
+
+---
+
+## 🧩 Usage Tip
+Include this note in your `README.md`:
+> This project is licensed under the [YourCompany] Community License.  
+> It’s free to use and customize for digital design or with [YourCompany] fulfillment.  
+> Integrations with other fulfillment services require a commercial license — contact [your-email@example.com].

package/README.md

@@ -0,0 +1,357 @@
+# Custom Canvas Text Transformation System
+
+A professional text transformation and image manipulation system for creating apparel/merchandise designs using HTML Canvas API. Features a clean, maintainable, and extensible architecture.
+
+## Key Features
+
+- ✅ **Direct Canvas Control** - Precise rendering with full control over transformations
+- ✅ **Multiple Transform Types** - 8+ text effects (straight, circle, arch, wave, etc.)
+- ✅ **Advanced Layer Effects** - Strokes, masks, distress, knockout compositing
+- ✅ **Multi-Artboard Workflow** - Manage multiple designs in one session
+- ✅ **Professional Export** - Transparent PNG export with Web Worker performance
+- ✅ **Maintainable** - Clear separation of concerns, modular architecture
+- ✅ **Extensible** - Adding new transforms and effects is straightforward
+
+## Development Workflow
+
+This repo uses a **hybrid worktree workflow** for parallel feature development:
+
+### Hybrid Approach
+- **Generic directory names**: `worktree-1`, `worktree-2`, `worktree-3`, `worktree-4`
+- **Descriptive git branches**: `feature/shadows`, `bug/export-crash`, etc.
+- **Auto-sync on commit**: Every commit automatically rebases on main to prevent drift
+- **Fast context switching**: Reuse the same worktree for multiple features
+
+### Quick Start
+
+```bash
+# 1. Initial setup (once) - creates 4 worktrees
+/worktree-setup 4
+
+# 2. Navigate to any worktree and start a feature
+cd ../snowcone-canvas-worktree-1
+/feature-start shadows
+
+# 3. Work and commit (auto-syncs with main after every commit!)
+/commit Add shadow rendering to text elements
+
+# 4. Merge to main when stable
+/feature-merge
+
+# 5. Start next feature (same worktree, new branch)
+/feature-start export-formats
+```
+
+### Available Commands
+
+#### Core Workflow Commands
+
+| Command | Description |
+|---------|-------------|
+| `/worktree-setup <count>` | Create N generic worktrees for parallel work |
+| `/feature-start <name>` | Start new feature/bug branch in current worktree |
+| `/commit <message>` | Commit all changes and auto-sync with main |
+| `/feature-merge` | Merge current feature to main and push |
+| `/feature-sync` | Manually sync with main (rarely needed) |
+| `/worktree-list` | List all worktrees with branch mapping |
+
+#### Additional Worktree Commands
+
+| Command | Description |
+|---------|-------------|
+| `/worktree-create <feature-name>` | Create dedicated worktree for a feature (alt. to reusing) |
+| `/worktree-goto <feature-name>` | Get the path to a worktree directory |
+| `/worktree-remove <feature-name>` | Remove a specific worktree and optionally delete branch |
+| `/worktree-cleanup` | Clean up all worktrees for merged branches |
+
+### Key Benefits
+
+- ✅ **Merge early, merge often** - Auto-sync on every commit prevents conflicts
+- ✅ **Parallel development** - 4 worktrees = 4 features in progress
+- ✅ **Fast switching** - Reuse worktrees instead of creating new ones
+- ✅ **Clean git history** - Descriptive branch names, generic directories
+- ✅ **Conflict prevention** - Handle conflicts immediately, not at merge time
+
+## Architecture
+
+```
+custom-canvas/
+├── src/
+│   ├── core/
+│   │   ├── TextShape.js          - Base class for all text shapes
+│   │   ├── TransformHandles.js   - Resize & rotation handle system
+│   │   └── GeometryUtils.js      - Transform math (rotation matrices, etc.)
+│   │
+│   ├── transforms/
+│   │   ├── CustomTransform.js    - ✅ Straight text
+│   │   ├── CircleTransform.js    - ✅ Circular text path
+│   │   ├── ArchTransform.js      - ✅ Curved arch text
+│   │   ├── WaveTransform.js      - 🚧 TODO
+│   │   ├── RiseTransform.js      - 🚧 TODO
+│   │   ├── FlagTransform.js      - 🚧 TODO
+│   │   ├── AngleTransform.js     - 🚧 TODO
+│   │   └── DistortTransform.js   - 🚧 TODO
+│   │
+│   ├── components/
+│   │   └── CanvasEditor.jsx      - Main canvas component
+│   │
+│   ├── App.jsx                   - Demo app with transform picker
+│   └── main.jsx                  - Entry point
+│
+└── DESIGN.md                     - Detailed architecture documentation
+```
+
+## Core Design Principles
+
+### 1. Fixed-Corner Resize
+
+When dragging a corner handle, the **diagonally opposite corner stays fixed** in world space:
+
+- Drag top-left → bottom-right stays put
+- Drag top-right → bottom-left stays put
+- Works correctly even when rotated
+
+**Implementation:** `GeometryUtils.js:calculateFixedCornerPosition()`
+
+- Uses rotation matrix math to keep opposite corner stationary
+- Transform pipeline: local coords → rotate → translate to world coords
+
+### 2. Rotation Handle Position
+
+- **Distance**: 50px below the bottom edge (world coordinates)
+- **Alignment**: Centered horizontally on bounding box
+- **Visual consistency**: Distance compensated for scale
+
+**Implementation:** `GeometryUtils.js:calculateRotationHandlePosition()`
+
+### 3. Uniform Scaling
+
+- Corner handles apply uniform scale (no skewing)
+- Side handles (only on straight text) change width only
+- Scale immediately baked into dimensions (no accumulated transforms)
+
+## Transform Types
+
+### Implemented ✅
+
+1. **CustomTransform** (`CustomTransform.js`)
+
+   - Straight text in a rectangular container
+   - Supports both corner handles (uniform scale) and side handles (width only)
+   - Word wrapping
+
+2. **CircleTransform** (`CircleTransform.js`)
+
+   - Text follows a circular path
+   - Characters positioned along the circle arc
+   - Centered at top of circle
+   - Ported from existing `EditableTextPath.jsx` circle mode
+
+3. **ArchTransform** (`ArchTransform.js`)
+   - Text curves upward in an arc
+   - Parabolic curve shape
+   - Uniform scaling
+
+### To Be Implemented 🚧
+
+4. **WaveTransform** - Sine wave pattern
+5. **RiseTransform** - Rising curve effect
+6. **FlagTransform** - Wavy flag effect
+7. **AngleTransform** - Diagonal/angled text
+8. **DistortTransform** - Perspective distortion
+
+## Getting Started
+
+### Installation
+
+```bash
+cd custom-canvas
+npm install
+```
+
+### Development
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+### Build
+
+```bash
+npm run build
+```
+
+## Usage Example
+
+```javascript
+import { CustomTransform, CircleTransform } from "./transforms";
+
+// Create a straight text shape
+const straightText = new CustomTransform({
+  text: "Hello World",
+  x: 100,
+  y: 100,
+  fontSize: 24,
+  color: "#333",
+  transformData: { width: 200 },
+});
+
+// Create a circular text shape
+const circularText = new CircleTransform({
+  text: "Circular Text",
+  x: 300,
+  y: 200,
+  fontSize: 20,
+  color: "#0066cc",
+  transformData: { radius: 80, scale: 1 },
+});
+
+// Render on canvas
+const ctx = canvas.getContext("2d");
+straightText.render(ctx);
+circularText.render(ctx);
+```
+
+## Creating a New Transform Type
+
+1. Create a new file in `src/transforms/` (e.g., `WaveTransform.js`)
+
+2. Extend `TextShape` base class:
+
+```javascript
+import { TextShape } from "../core/TextShape.js";
+
+export class WaveTransform extends TextShape {
+  constructor(config = {}) {
+    super(config);
+    this.transformType = "wave";
+
+    // Transform-specific data
+    this.transformData.amplitude = config.transformData?.amplitude || 20;
+    this.transformData.frequency = config.transformData?.frequency || 2;
+  }
+
+  getBoundingBox() {
+    // Return {x, y, width, height} in world coordinates
+  }
+
+  render(ctx, isSelected = false) {
+    // Draw the transformed text on canvas
+  }
+
+  resize(anchor, newWidth, newHeight, startData) {
+    // Handle resize transformation
+  }
+
+  getEnabledAnchors() {
+    // Return array of enabled anchor names
+    return ["top-left", "top-right", "bottom-left", "bottom-right"];
+  }
+}
+```
+
+3. Export from `src/transforms/index.js`
+4. Add to `TRANSFORM_TYPES` array in `App.jsx`
+
+## Key Components
+
+### TextShape (Base Class)
+
+- Common interface for all text shapes
+- Properties: text, position, rotation, fontSize, color
+- Methods: getBoundingBox(), hitTest(), render(), resize()
+
+### TransformHandles
+
+- Manages 8 resize handles (4 corners + 4 sides)
+- Manages rotation handle
+- Hit detection
+- Rendering with consistent style
+
+### CanvasEditor
+
+- Main React component
+- Canvas rendering loop
+- Mouse interaction (drag, resize, rotate)
+- Selection management
+
+### GeometryUtils
+
+- `calculateFixedCornerPosition()` - Keep opposite corner fixed during resize
+- `calculateRotationHandlePosition()` - Position rotation handle
+- `calculateResizeHandles()` - Calculate all 8 handle positions
+- `hitTestRect()` - Hit test for rotated rectangles
+- `hitTestCircle()` - Hit test for circles
+- `measureTextWidth()` - Measure text using canvas API
+
+## Transform Handle Behavior
+
+### Corner Handles
+
+- **What they do**: Uniform scale (fontSize and dimensions both change)
+- **Fixed point**: Diagonally opposite corner stays in place
+- **Enabled on**: All transform types
+
+### Side Handles
+
+- **What they do**: Width only (fontSize stays constant)
+- **Fixed point**: Opposite side edge
+- **Enabled on**: Straight text only (CustomTransform)
+
+### Rotation Handle
+
+- **What it does**: Rotates around center of bounding box
+- **Position**: 50px below bottom edge, centered
+- **Visual feedback**: Shows angle tooltip while rotating
+
+## Architecture Highlights
+
+| Aspect                | Implementation                                      |
+| --------------------- | --------------------------------------------------- |
+| **Code Organization** | ~200 lines per file, modular components             |
+| **Transform System**  | Direct Canvas API control with rotation matrix math |
+| **Maintainability**   | Clean separation of concerns, type-safe             |
+| **Extensibility**     | Easy to add transforms (extend base class)          |
+| **Performance**       | Direct canvas API + Web Worker exports              |
+| **Effects Pipeline**  | Strokes, masks, distress, knockout compositing      |
+
+## Next Steps
+
+1. **Implement Remaining Transforms**
+
+   - WaveTransform (sine wave pattern)
+   - RiseTransform (rising curve)
+   - FlagTransform (wavy flag)
+   - AngleTransform (diagonal)
+   - DistortTransform (perspective)
+
+2. **Add Text Editing**
+
+   - Double-click to edit text
+   - Text editor overlay
+   - Support for font family selection
+
+3. **Keyboard Shortcuts**
+
+   - Delete selected shape
+   - Duplicate shape
+   - Undo/redo
+
+4. **Export/Import**
+   - Save shapes to JSON
+   - Load shapes from JSON
+   - Export as image
+
+## Contributing
+
+To add a new transform type:
+
+1. See "Creating a New Transform Type" section above
+2. Follow the existing patterns in `CustomTransform.js` and `CircleTransform.js`
+3. Test resize and rotation behavior match existing transforms
+
+## License
+
+MIT