@xeplr/ui-canvas 1.0.1 → 1.0.2

package/README.md

@@ -90,6 +90,7 @@ Edges follow their node **while** it is being dragged, not only after the drop.
 | `items` | `Array<{ id, x, y, w, h, z?, groupId? }>` | required | `z` sets paint order |
 | `renderItem` | `(item, { selected }) => ReactNode` | required | the item's content; the canvas positions it |
 | `units` | `'px' \| 'fraction'` | `'px'` | see above |
+| `pageAspect` | number | — | fraction units only: one page is `width × pageAspect` tall instead of the visible height, so a layout keeps the same proportions at any size |
 | `features` | `{ drag, resize, snap, grid, marquee }` | `{ drag: true, resize: false, snap: true, grid: 10, marquee: false }` | merged over the defaults |
 | `onItemChange` | `(id, patch) => void` | — | once per item, on drop, in the item's own units |
 | `onItemClick` | `(id, event) => void` | — | a press that moved less than 4px |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-canvas",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "One free-placement canvas for every xeplr builder: drag, resize, alignment guides, snapping, marquee select and edges — React controller hooks, pure geometry and a ready-made <XeplrCanvas>",
   "type": "module",
   "main": "src/index.js",

package/src/pages.jsx

@@ -26,6 +26,9 @@ import { CanvasSample } from './designs/index.js'
  * @prop edgeMinOffset    minimum sideways reach of an edge's curve, px (default 60)
  * @prop padding          room beyond the furthest item: number or { x, y }
  * @prop minWidth, minHeight  the smallest the inner canvas gets
+ * @prop pageAspect       fraction units only: a page is width × pageAspect tall,
+ *                        instead of the visible height — proportions then hold
+ *                        at any size
  * @prop underlay, overlay    extra layers under the edges / over everything
  * @prop className, style     on the scrolling wrapper
  */

package/src/useCanvasController.js

@@ -27,7 +27,7 @@ export function useCanvasController(props) {
   const {
     items, units = 'px', features, edges, selection,
     onItemClick, onRaise, minSizeFor,
-    padding, minWidth = 0, minHeight = 0
+    padding, minWidth = 0, minHeight = 0, pageAspect
   } = props
   // onItemChange and onSelectionChange are read through propsRef below, so a
   // new inline handler from the caller never rebuilds the gestures.
@@ -35,9 +35,16 @@ export function useCanvasController(props) {
   const f = useMemo(() => ({ ...DEFAULT_FEATURES, ...features }), [features])
   const fraction = units === 'fraction'
 
-  // Measured only for a fractional canvas, where a page IS the visible size.
+  // Measured only for a fractional canvas. A page is the visible size — or,
+  // with pageAspect, the WIDTH times pageAspect, so a layout keeps its
+  // proportions wherever it is shown instead of depending on how tall the
+  // wrapper happens to be.
   const [measured, measureRef] = useCanvasSize()
-  const canvas = fraction ? measured : null
+  const canvas = useMemo(() => {
+    if (!fraction || !measured) return null
+    if (!(pageAspect > 0)) return measured
+    return { width: measured.width, height: measured.width * pageAspect }
+  }, [fraction, measured, pageAspect])
   const canvasRef = useRef(canvas); canvasRef.current = canvas
   const rootRef = useRef(null)