#2 modify variable name.

metastellar-io · Jun 14, 2024 · e89ca90 · e89ca90
1 parent 6043a60
commit e89ca90
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/lib/card/Card.svelte b/src/lib/card/Card.svelte
@@ -12,6 +12,7 @@
   export let size: SizeType | 'none' = 'sm';
   export let horizontal: boolean = false;
   export let reverse: boolean = false;
+  export let isMouseEntered:boolean = false;
 	
 	interface $$Props extends ComponentProps<Frame> {
     img?: string;
@@ -23,15 +24,15 @@
 
 	let innerPadding: string;
   $: innerPadding = paddings[padding];
-
   let cardClass: string;
   $: cardClass = twMerge('flex w-full', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse' : 'md:flex-row'), $$restProps.href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
 
   let imgCls: string;
   $: imgCls = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-e-lg' : 'md:rounded-s-lg'), imgClass);
 
 </script>
-<Frame tag={href ? 'a' : 'div'} {...$$restProps} border shadow class={cardClass}>
+<Frame tag={href ? 'a' : 'div'} {...$$restProps} border shadow class={cardClass} bind:isMouseEntered >
+
   {#if img}
     <img class={imgCls} src={img} alt="" />
     <div class={innerPadding}>

diff --git a/src/lib/frame/frame.svelte b/src/lib/frame/frame.svelte
@@ -7,7 +7,7 @@
 	export let isMouseTrackRecord: boolean = false;
 	export let intervalData: number | undefined = undefined;
 	export let dataURL: string | undefined = undefined;
-	export let isTransform: boolean | undefined = undefined;
+	export let isHoverTransform: boolean | undefined = undefined;
 	export let isMouseEntered:boolean = false;
 	export let distanceThreshold: number = 10; 
 	export let timeThreshold:number = 500;
@@ -16,7 +16,7 @@
     isMouseTrackRecord?: boolean;
 		dataURL?: string;
 		intervalData?: number;
-		isTransform?:boolean;
+		isHoverTransform?:boolean;
 		isMouseEntered?:boolean,
 		distanceThreshold?:number, 
 		timeThreshold?:number
@@ -30,7 +30,7 @@
 	$: if (isMouseTrackRecord && intervalData != undefined && countTime != 0 && (countTime % intervalData == 0)) {
 		sendMouseTrackData();
 	}
-
+	
 	function clearMouseTrackData() {
 		mouseTrackData = [];
 	};
@@ -44,7 +44,7 @@
 		if (dataURL == undefined || mouseTrackData.length == 0) return;
 
 		try {
-			console.log('mouse movement track data', mouseTrackData);
+			// console.log('mouse movement track data', mouseTrackData);
 			const body = {data: JSON.stringify(mouseTrackData)};
 			const res = await fetch(dataURL, {
 				method:'post',
@@ -109,17 +109,15 @@
 		 if (event instanceof MouseEvent ) {
         const mouseEvent = event as MouseEvent;
 				if (isMouseTrackRecord) {
-					console.log('distanceThreshold', distanceThreshold);
-					console.log('timeThreshold', timeThreshold);
 					const temp = recordMouseTrack(oldData, mouseEvent, distanceThreshold, timeThreshold, true);
 					oldData = { point: temp.point, timestamp: temp.timestamp };
 				}
 			
-				if (isTransform) {
-					if (!containerRef || !isTransform) return;
+				if (isHoverTransform) {
+					if (!containerRef || !isHoverTransform) return;
 					const { left, top, width, height } = containerRef.getBoundingClientRect();
-					const x = (-1*(event.clientX - left - width / 2)) / 100;
-					const y = (event.clientY - top - height / 2) / 10;
+					const x = (-1*(event.clientX - left - width / 2)) / 25;
+					const y = (event.clientY - top - height / 2) / 25;
 					containerRef.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;    
 				}
     }
@@ -146,7 +144,8 @@
 
 	function handleMouseLeave () {
 		console.log('stop recording of mouse movement track when is out of card.');
-		_clearInterval()
+		_clearInterval();
+		isMouseEntered = false;
 		if (!containerRef) return;
 		containerRef.style.transform = `rotateY(0deg) rotateX(0deg)`;
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -16,13 +16,13 @@
       <Card 
         img="/images/test.png"
         bind:isMouseEntered
-        isTransform
+        isHoverTransform
         isMouseTrackRecord={recordMouseMoveTrack} 
         dataURL="http://localhost/api" 
         intervalData={intervalData}
         >
-        <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card</h5>
-        <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
+          <h5 class="mb-2 text-xl  tracking-tight text-gray-900 ">Meta stellar card</h5>
+          <p class="mb-3 font-normal text-gray-700 leading-tight">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores.</p>
       </Card>
       <h3 class="mt-5">Metastellar basic card</h3>
     </div>
@@ -52,7 +52,7 @@
         intervalData={intervalData} 
         padding="none"
         bind:isMouseEntered
-        isTransform></ImagePoster>
+        isHoverTransform></ImagePoster>
       <h3  class="mt-5">Image poster component</h3>
      </div>
     <div class="">