Placement of snips using pen too sensitive see #89

.gitlab/packages.yml

@@ -119,6 +119,9 @@ build:packages:render:
         <<: *pnpm_cache
     before_script:
         # Install corepack and pnpm
+        - apk add --no-cache curl build-base
+        - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+        - source $HOME/.cargo/env
         - corepack enable
         - corepack prepare pnpm@latest-9 --activate
         - pnpm config set store-dir .pnpm-store
@@ -126,7 +129,7 @@ build:packages:render:
     script:
         # Build the package
         - echo "Building @snip/render"
-        - pnpm --filter render build
+        - pnpm --filter render... build
         # TODO: publish to local registry
     tags:
         - docker

CHANGELOG.md

@@ -17,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     - Permissions where not resolved correctly, the first found set is used
 - A minor SSO issue when the user is behind a reverse proxy
     - The redirect url was not correctly set to the server url (without the proxy)
-
+- Placement of snips using pen too sensitive as the pen dpi was not correctly detected
 ## [1.9.2]
 
 ### Added

apps/fullstack/components/editor/tools/common/drag.tsx

@@ -3,8 +3,8 @@ import { HTMLAttributes, useCallback, useEffect, useRef } from "react";
 export interface DragMoveProps extends HTMLAttributes<HTMLDivElement> {
     onDragMove: (
         e: PointerEvent,
-        offset?: [number, number],
-        movement?: [number, number],
+        offset: [number, number],
+        movement: [number, number],
     ) => void;
 }
 
@@ -48,7 +48,7 @@ function useDrag({
 }) {
     const offset = useRef<[number, number]>([0, 0]);
     const isDragging = useRef(false);
-    const screenPos = useRef<[number, number]>([0, 0]);
+    const screenPos = useRef<[number, number] | null>(null);
     const handlePointerMove = useCallback(
         (e: PointerEvent) => {
             e.preventDefault();
@@ -60,13 +60,13 @@ function useDrag({
                 return;
             e.preventDefault();
 
-            if (isDragging.current) {
+            if (isDragging.current && screenPos.current) {
                 const movement: [number, number] = [
-                    e.screenX - screenPos.current[0],
-                    e.screenY - screenPos.current[1],
+                    e.clientX - screenPos.current[0],
+                    e.clientY - screenPos.current[1],
                 ];
                 onDragMove(e, offset.current, movement);
-                screenPos.current = [e.screenX, e.screenY];
+                screenPos.current = [e.clientX, e.clientY];
             }
         },
         [onDragMove, pointerTypes],

apps/fullstack/components/editor/tools/placement/index.tsx

@@ -110,10 +110,10 @@ function PlacementOverlay() {
             <OverlayContent>
                 <DragMove
                     className="w-100 h-100 position-absolute"
-                    onDragMove={(e) => {
+                    onDragMove={(_e, _o, m) => {
                         move(
-                            e.movementX * window.devicePixelRatio,
-                            e.movementY * window.devicePixelRatio,
+                            m[0] * window.devicePixelRatio,
+                            m[1] * window.devicePixelRatio,
                         );
                     }}
                 ></DragMove>