@nice2dev/ui-graphics 1.2.2 → 1.3.1

package/dist/esm/vector/useVectorEditor.js

@@ -92,8 +92,12 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         if (!r) {
             return { x: 0, y: 0 };
         }
-        let x = (cx - r.left - r.width / 2 - px) / zoom + artW / 2;
-        let y = (cy - r.top - r.height / 2 - py) / zoom + artH / 2;
+        // The <svg> fills the box and its viewBox fits the artboard into it (xMidYMid meet), so one
+        // art unit is `fit` screen px before the zoom. Dividing by the zoom alone put every shape
+        // closer to the centre than the pointer — off by half in the 900×520 showcase demo.
+        const fit = Math.min(r.width / artW, r.height / artH) || 1;
+        let x = (cx - r.left - r.width / 2 - px) / (zoom * fit) + artW / 2;
+        let y = (cy - r.top - r.height / 2 - py) / (zoom * fit) + artH / 2;
         if (snapGrid) {
             x = snapToGrid(x, gridSize);
             y = snapToGrid(y, gridSize);
@@ -331,32 +335,37 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             }));
             return;
         }
-        if (!pendingShape.current) {
+        const pending = pendingShape.current;
+        if (!pending) {
             return;
         }
-        const t = pendingShape.current.type;
+        // The pending shape's ref follows the drag as well. onUp sizes the result from the ref,
+        // which kept the 0×0 shape of the press — so every dragged rectangle, ellipse, line and
+        // arrow counted as "tiny" and was deleted on release: nothing appeared on the canvas.
+        const resize = (patch) => {
+            pendingShape.current = { ...pending, ...patch };
+            setShapes((prev) => prev.map((s) => (s.id === pending.id ? { ...s, ...patch } : s)));
+        };
+        const t = pending.type;
         if (t === 'polygon' || t === 'star') {
             const cx = startPt.current.x;
             const cy = startPt.current.y;
             const dx = p.x - cx;
             const dy = p.y - cy;
             const r2 = Math.sqrt(dx * dx + dy * dy);
-            setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id
-                ? { ...s, x: cx - r2, y: cy - r2, w: r2 * 2, h: r2 * 2 }
-                : s));
+            resize({ x: cx - r2, y: cy - r2, w: r2 * 2, h: r2 * 2 });
             return;
         }
         if (t === 'rect' || t === 'roundrect' || t === 'ellipse') {
-            const x1 = Math.min(startPt.current.x, p.x);
-            const y1 = Math.min(startPt.current.y, p.y);
-            const w2 = Math.abs(p.x - startPt.current.x);
-            const h2 = Math.abs(p.y - startPt.current.y);
-            setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id ? { ...s, x: x1, y: y1, w: w2, h: h2 } : s));
+            resize({
+                x: Math.min(startPt.current.x, p.x),
+                y: Math.min(startPt.current.y, p.y),
+                w: Math.abs(p.x - startPt.current.x),
+                h: Math.abs(p.y - startPt.current.y),
+            });
         }
         else if (t === 'line' || t === 'arrow') {
-            setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id
-                ? { ...s, w: Math.abs(p.x - s.x), h: Math.abs(p.y - s.y), x2: p.x, y2: p.y }
-                : s));
+            resize({ w: Math.abs(p.x - pending.x), h: Math.abs(p.y - pending.y), x2: p.x, y2: p.y });
         }
     }, [tool, scr2art, selId]);
     const onUp = useCallback(() => {
@@ -406,7 +415,8 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
                     dragStarted.current = false;
                     return;
                 }
-                snap(shapesRef.current);
+                // the ref holds the final geometry even when the last move has not rendered yet
+                snap(shapesRef.current.map((s) => (s.id === ps.id ? ps : s)));
                 setSelId(ps.id);
                 pendingShape.current = null;
                 dragStarted.current = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-graphics",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -64,15 +64,15 @@
     "nicetodev"
   ],
   "peerDependencies": {
-    "@nice2dev/ui-core": "^1.2.0",
+    "@nice2dev/ui-core": "^1.3.0",
     "@nice2dev/ui": "^1.2.0",
     "framer-motion": ">=10.0.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.2.2",
-    "@nice2dev/ui-core": "^1.2.2",
+    "@nice2dev/ui": "^1.3.1",
+    "@nice2dev/ui-core": "^1.3.1",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",