@pie-players/pie-tool-protractor 0.1.6 → 0.1.9

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@pie-players/pie-tool-protractor",
-	"version": "0.1.6",
+	"version": "0.1.9",
 	"type": "module",
 	"description": "Draggable and rotatable protractor tool for PIE assessment player",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/pie-framework/pie-players.git"
+		"url": "git+https://github.com/pie-framework/pie-players.git",
+		"directory": "packages/tool-protractor"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -41,9 +42,9 @@
 	"unpkg": "./dist/tool-protractor.js",
 	"jsdelivr": "./dist/tool-protractor.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.2.5",
-		"@pie-players/pie-players-shared": "0.2.2",
-		"@sveltejs/kit": "^2.52.0",
+		"@pie-players/pie-assessment-toolkit": "0.2.9",
+		"@pie-players/pie-context": "0.1.1",
+		"@pie-players/pie-players-shared": "0.2.5",
 		"daisyui": "^5.5.18",
 		"moveable": "^0.53.0"
 	},
@@ -61,5 +62,13 @@
 		"typescript": "^5.7.0",
 		"vite": "^7.0.8",
 		"vite-plugin-dts": "^4.5.3"
-	}
+	},
+	"homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/tool-protractor#readme",
+	"bugs": {
+		"url": "https://github.com/pie-framework/pie-players/issues"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"sideEffects": true
 }

package/tool-protractor.svelte

@@ -1,30 +1,39 @@
 <svelte:options
 	customElement={{
 		tag: 'pie-tool-protractor',
-		shadow: 'none',
+		shadow: 'open',
 		props: {
 			visible: { type: 'Boolean', attribute: 'visible' },
-			toolId: { type: 'String', attribute: 'tool-id' },
-			coordinator: { type: 'Object' }
+			toolId: { type: 'String', attribute: 'tool-id' }
 		}
 	}}
 />
 
 <script lang="ts">
-	import type { IToolCoordinator } from '@pie-players/pie-assessment-toolkit';
-	import { ZIndexLayer } from '@pie-players/pie-assessment-toolkit';
+	import {
+		connectToolRuntimeContext,
+		ZIndexLayer,
+	} from '@pie-players/pie-assessment-toolkit';
+	import type {
+		AssessmentToolkitRuntimeContext,
+		IToolCoordinator,
+	} from '@pie-players/pie-assessment-toolkit';
 	import Moveable from 'moveable';
 	import { onMount } from 'svelte';
 	import protractorSvg from './protractor.svg';
 
 	// Props
-	let { visible = false, toolId = 'protractor', coordinator }: { visible?: boolean; toolId?: string; coordinator?: IToolCoordinator } = $props();
+	let { visible = false, toolId = 'protractor' }: { visible?: boolean; toolId?: string } = $props();
 
 	// Check if running in browser
 	const isBrowser = typeof window !== 'undefined';
 
 	// State
 	let containerEl = $state<HTMLDivElement | undefined>();
+	let runtimeContext = $state<AssessmentToolkitRuntimeContext | null>(null);
+	const coordinator = $derived(
+		runtimeContext?.toolCoordinator as IToolCoordinator | undefined,
+	);
 	let announceText = $state('');
 	let moveable: Moveable | null = null;
 
@@ -36,6 +45,13 @@
 	const ROTATE_STEP = 5; // degrees
 	const FINE_ROTATE_STEP = 1; // degrees
 
+	$effect(() => {
+		if (!containerEl) return;
+		return connectToolRuntimeContext(containerEl, (value: AssessmentToolkitRuntimeContext) => {
+			runtimeContext = value;
+		});
+	});
+
 	function announce(message: string) {
 		announceText = message;
 		setTimeout(() => announceText = '', 1000);
@@ -235,7 +251,7 @@
 
 {#if visible && isBrowser}
 	<!-- Screen reader announcements -->
-	<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+	<div class="pie-sr-only" role="status" aria-live="polite" aria-atomic="true">
 		{announceText}
 	</div>
 
@@ -243,7 +259,7 @@
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		bind:this={containerEl}
-		class="protractor-frame"
+		class="pie-tool-protractor"
 		data-moveablejs-tool-id={toolId}
 		onpointerdown={() => coordinator?.bringToFront(containerEl)}
 		onkeydown={handleKeyDown}
@@ -252,9 +268,9 @@
 		aria-label="Protractor tool. Use arrow keys to move, Shift+arrows to rotate, PageUp/PageDown for fine rotation. Current rotation displayed via Moveable.js"
 		aria-roledescription="Draggable and rotatable protractor measurement tool"
 	>
-		<div class="protractor-container">
+		<div class="pie-tool-protractor__container">
 			<img
-				class="protractor"
+				class="pie-tool-protractor__image"
 				src={protractorSvg}
 				alt="Protractor with 180-degree semicircular scale marked from 0 to 180 degrees in both directions, with degree markings every 10 degrees"
 				draggable="false"
@@ -264,7 +280,7 @@
 {/if}
 
 <style>
-	.sr-only {
+	.pie-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -276,7 +292,7 @@
 		border-width: 0;
 	}
 
-	.protractor-frame {
+	.pie-tool-protractor {
 		border: 0;
 		cursor: move;
 		left: 50%;
@@ -289,17 +305,17 @@
 		touch-action: none;
 	}
 
-	.protractor-frame:focus {
+	.pie-tool-protractor:focus {
 		outline: 3px solid #4A90E2;
 		outline-offset: 2px;
 	}
 
-	.protractor-frame:focus-visible {
+	.pie-tool-protractor:focus-visible {
 		outline: 3px solid #4A90E2;
 		outline-offset: 2px;
 	}
 
-	.protractor-container {
+	.pie-tool-protractor__container {
 		border: 0;
 		position: relative;
 		width: 400px;
@@ -307,7 +323,7 @@
 	}
 
 	/* Semi-transparent white overlay for visibility (matching production implementation) */
-	.protractor-container::after {
+	.pie-tool-protractor__container::after {
 		background-color: #fff;
 		border-radius: 283px 283px 0 0;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Matching production implementation shadow */
@@ -322,7 +338,7 @@
 		pointer-events: none;
 	}
 
-	.protractor {
+	.pie-tool-protractor__image {
 		width: 400px;
 		height: 210px;
 		position: relative;