Upload folder using huggingface_hub

README.md

@@ -1,19 +1,3 @@
----
-tags:
-- gradio-custom-component
-- gradio-template-Image
-- bounding box
-- annotator
-- annotate
-- boxes
-title: gradio_image_annotation V0.3.0
-colorFrom: yellow
-colorTo: green
-sdk: docker
-pinned: false
-license: apache-2.0
-short_description: A Gradio component for image annotation
----
 
 # `gradio_image_annotation`
 <a href="https://pypi.org/project/gradio_image_annotation/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_image_annotation"></a>  

src/frontend/shared/Canvas.svelte

@@ -68,6 +68,7 @@
 		y: 0,
 		distance: 0,
 	}
+	const touchScaleDeadzone = 100;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -138,16 +139,19 @@
 	}
 
 	const getDistance = (touch1: PointerEvent, touch2: PointerEvent) => {
-		return Math.sqrt(
+		const distance = Math.sqrt(
 			Math.pow(touch1.clientX - touch2.clientX, 2) +
 			Math.pow(touch1.clientY - touch2.clientY, 2)
 		);
+		return distance < touchScaleDeadzone ? touchScaleDeadzone : distance;
 	};
 
 	function handlePointerDown(event: PointerEvent) {
 		if (!interactive) {
 			return;
 		}
+
+		event.preventDefault();
 		canvas.setPointerCapture(event.pointerId);
 		pointersCache.set(event.pointerId, event);
 
@@ -168,8 +172,9 @@
 			const touch1 = pointerArray[0];
 			const touch2 = pointerArray[1];
 			const distance = getDistance(touch1, touch2);
-			const centerX = (touch1.clientX + touch2.clientX) / 2;
-			const centerY = (touch1.clientY + touch2.clientY) / 2;
+			const rect = canvas.getBoundingClientRect();
+			const centerX = (touch1.clientX + touch2.clientX) / 2 - rect.left;
+			const centerY = (touch1.clientY + touch2.clientY) / 2 - rect.top;
 
 			touchScaleValues.distance = distance;
 			touchScaleValues.x = centerX;
@@ -237,6 +242,7 @@
 			return;
 		}
 
+		event.preventDefault();
 		if (event.pointerType === "mouse") {
 			if (!handlesCursor) {
 				return;
@@ -275,8 +281,9 @@
 				const touch1 = pointerArray[0];
 				const touch2 = pointerArray[1];
 				const distance = getDistance(touch1, touch2);
-				const centerX = (touch1.clientX + touch2.clientX) / 2;
-				const centerY = (touch1.clientY + touch2.clientY) / 2;
+				const rect = canvas.getBoundingClientRect();
+				const centerX = (touch1.clientX + touch2.clientX) / 2 - rect.left;
+				const centerY = (touch1.clientY + touch2.clientY) / 2 - rect.top;
 
 				const newScaleTmp = parseFloat(
 					(canvasWindow.scale * (distance / touchScaleValues.distance)).toFixed(2)
@@ -288,7 +295,7 @@
 				canvasWindow.offsetY = touchScaleValues.y - (touchScaleValues.y - canvasWindow.offsetY) * scaleDelta;
 
 				const dx = centerX - touchScaleValues.x;
-                const dy = centerY - touchScaleValues.y;
+				const dy = centerY - touchScaleValues.y;
 				canvasWindow.offsetX += dx;
 				canvasWindow.offsetY += dy;
 				canvasWindow.scale = newScale;

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_image_annotation"
-version = "0.3.0"
+version = "0.3.1"
 description = "A Gradio component that can be used to annotate images with bounding boxes."
 readme = "README.md"
 license = "MIT"