Editor Support

Co-authored-by: Copilot <copilot@github.com>
2026-05-05 15:42:30 -05:00
parent 9f7c078ccc
commit 29154bd651
32 changed files with 3698 additions and 17 deletions
@@ -0,0 +1,105 @@
+# Testing Layer Transforms - Product 404R
+
+## Quick Test Guide
+
+I've created **product 404R** as a demonstration of the layer transform feature. It uses the same images as product 404 but flips the door and hardware layers horizontally to show a right-hinge configuration.
+
+## Test URLs
+
+**Left-Hinge (Original):**
+```
+http://localhost:8080/quiz/product/404
+```
+
+**Right-Hinge (Flipped):**
+```
+http://localhost:8080/quiz/product/404R
+```
+
+## What to Look For
+
+When you compare both products:
+
+1. **Base layer** - Should be identical (house/background doesn't flip)
+2. **Door layer** - Should be mirrored left-to-right
+3. **Hardware layer** - Should be mirrored to match door position
+4. **Foreground layer** - Should be identical (plants don't flip)
+
+## Image Files Used
+
+Both products use the same image files from:
+```
+/static/images/window/storm-window/404/
+  ├── door-white.png
+  ├── door-black.png
+  └── (other color variants)
+
+/static/images/window/storm-window/layers/
+  ├── base.jpg
+  ├── hardware.png
+  └── foreground.png
+```
+
+**Zero additional images needed!** The flip is pure CSS.
+
+## Configuration Difference
+
+### Product 404 (Left-Hinge)
+```json
+"imageConfig": {
+  "useCanvasAPI": true
+}
+```
+
+### Product 404R (Right-Hinge)
+```json
+"imageConfig": {
+  "useCanvasAPI": true,
+  "layerTransforms": {
+    "door": "flip-horizontal",
+    "hardware": "flip-horizontal"
+  }
+}
+```
+
+## Color Variations
+
+Both products support all color options:
+- Black
+- White
+- Bronze
+- Sandstone
+
+Select different colors in the dropdown to see the door layer change while maintaining the flip.
+
+## Technical Notes
+
+- **Performance**: Instant rendering, GPU-accelerated CSS transform
+- **Storage**: No duplicate images required
+- **Bandwidth**: Same image files downloaded once and reused
+- **Compatibility**: Works in all modern browsers
+
+## Use Cases
+
+This same technique can be applied to:
+- Storm doors with different hinge sides
+- Windows with operable panels on left vs right
+- Sliding doors/windows that open from different sides
+- Any product where a mirror variant is needed
+
+## Next Steps
+
+1. Restart your Flask server to load the new product data
+2. Visit both URLs to compare
+3. Try different color selections
+4. Open browser DevTools to see the CSS classes applied:
+   - `.layer-flip-horizontal` on door and hardware layers for 404R
+   - No transform classes on 404
+
+## Production Usage
+
+When ready for production:
+1. Design all "left-hinge" (or default orientation) images
+2. Add product entries for "right-hinge" variants with `layerTransforms`
+3. No need to create separate images!
+4. Consider naming convention: 404, 404R, 404L, etc.