[UPDATE] additional work

Author: Judimax

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one/wml-carousel-one.component.html

@@ -7,7 +7,7 @@
   [ngStyle]="props.slideContainer.style"
   [class]="props.slideContainer.class">
     <div
-    #slideContainer
+    #controller
     [ngStyle]="props.controller.style"
     (transitionend)="props.controller.transitionEnd($event)"
     [class]="props.controller.class">

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one/wml-carousel-one.component.scss

@@ -15,17 +15,13 @@
 
       &0{}
       &1{
-
         &Item {
           &0 {
-            border:calc(1/10.6 * 1em) solid red;
-            height: calc(200/10.6 * 1em);
             position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
             transform-style: preserve-3d;
-            transform:"rotate3D(60deg)";
           }
           &1{
 

projects/wml-carousel/src/lib/wml-carousel-one/wml-carousel-one/wml-carousel-one.component.ts

@@ -26,7 +26,7 @@ export class WMLCarouselOneComponent {
   @Input('props') props: WMLCarouselOneProps = new WMLCarouselOneProps()
   @HostBinding('class') myClass: string = this.classPrefix(`View`);
   @HostBinding('attr.id') myId?:string
-  @ViewChild("slideContainer",{read:ViewContainerRef,static:true}) slideContainer! :ViewContainerRef
+  @ViewChild("controller",{read:ViewContainerRef,static:true}) controller! :ViewContainerRef
   ngUnsub = new Subject<void>()
 
   listenForUpdate = () => {
@@ -47,7 +47,7 @@ export class WMLCarouselOneComponent {
     if (this.props.id) {
       this.myId = this.props.id
     }
-    this.props.slideContainerVCF = this.slideContainer
+    this.props.controllerVCF = this.controller
     this.props.ngUnsub = this.ngUnsub
     this.props.cdref = this.cdref
     this.listenForUpdate().subscribe()
@@ -66,7 +66,7 @@ export class WMLCarouselOneProps {
   constructor(props: Partial<WMLCarouselOneProps> = {}) { }
 
   // component proeprties
-  slideContainerVCF!:ViewContainerRef
+  controllerVCF!:ViewContainerRef
   ngUnsub = new Subject<void>();
   cdref!:ChangeDetectorRef
   //
@@ -79,8 +79,8 @@ export class WMLCarouselOneProps {
 
   slideWidth  = "23%"
   slideHeight = "33%"
-  distanceFromCenter= "300px"
-  distanceFromTop='63px'
+  slideDistanceFromCenter= "300px"
+  slideDistanceFromTop='-53px'
   classPrefix = generateClassPrefix('WMLCarouselOne')
 
   slideContainer = new WMLUIProperty({
@@ -94,7 +94,7 @@ export class WMLCarouselOneProps {
     type:"transition",
     class:this.classPrefix('Pod1Item0'),
     style:{
-      height:"300px",
+      height:"250px",
       border:"calc(1/10.6 * 1em) solid red"
     },
     keyFrameStyles: {
@@ -120,7 +120,7 @@ export class WMLCarouselOneProps {
 
   init= ()=>{
 
-
+    window.resizeTo(1520,364)
     this.listenForSlideContainerResize().subscribe()
   }
 
@@ -130,18 +130,37 @@ export class WMLCarouselOneProps {
       takeUntil(this.ngUnsub),
       startWith(null),
       tap(()=>{
-        const parentElement = this.slideContainerVCF.element.nativeElement;
+        const parentElement = this.controllerVCF.element.nativeElement;
         const parentWidth =  parseFloat(getComputedStyle(parentElement).width.split("px")[0]);
         const parentHeight = parseFloat(getComputedStyle(parentElement).height.split("px")[0]);
 
-        console.log(parentWidth)
-        console.log(parentHeight)
-        this.slideWidth = `${(parentWidth * 0.3)}px`;
-        this.slideHeight = `${( parentHeight * 0.35)}px`;
-        this.distanceFromCenter = `${parentWidth * .42}px`;
 
-        this.slideContainer.style.perspective = `${parentWidth}px`;
-        this.slideContainer.style.perspectiveOrigin = `50% ${-25}%`;
+        this.slideWidth = `${parentWidth * 0.315}px`;
+        this.slideHeight = `${ parentHeight * 0.52}px`;
+        this.slideDistanceFromCenter = `${parentWidth * .42}px`;
+
+
+        this.slideContainer.style.perspectiveOrigin = `50% ${-5}%`;
+        // this.controller.style.transform =`rotateY(60deg)`
+
+        this.slideHeight =this.calculateSlideHeight(parentWidth, parentHeight)+"px"
+        this.slideDistanceFromCenter = this.calculateSlideDistanceFromCenter(parentWidth, parentHeight)+"px"
+        this.slideDistanceFromTop = this.calculateSlideDistanceFromTop(parentWidth, parentHeight)+"px"
+
+        // this.slideHeight ="204px"
+        // this.slideDistanceFromCenter ="153.82446px"
+        // this.slideDistanceFromTop ='-20.226021999999997px'
+        // TODO pass 1536px you must increase the perspective to preserve the shape
+        this.slideContainer.style.perspective = `1000px`;
+
+        console.log(`Slide Height ${this.slideHeight}`)
+        // console.log(`Slide Width ${this.slideWidth}`)
+        console.log(`Slide Distance from Center ${this.slideDistanceFromCenter}`)
+        console.log(`Distance from top ${this.slideDistanceFromTop}`)
+        console.warn(`Parent Width ${parentWidth}`)
+        console.warn(`Parent Height ${parentHeight}`)
+
+
         this.updateSlides();
       }),
       tap(()=>{
@@ -155,10 +174,37 @@ export class WMLCarouselOneProps {
     return 360 / this.slides.length;
   }
 
+  calculateSlideHeight = (parentWidth, parentHeight)=> {
+    // Slope and intercept calculated based on the provided data points
+    const slope = -0.1121;
+    const intercept = 241.548;
+
+    // Calculate result based on the linear relationship
+    const result = (parentWidth * slope) + intercept;
+
+    return result;
+  }
+
+  calculateSlideDistanceFromCenter = (parentWidth, parentHeight)=> {
+    const slope = 0.3887;      // Updated slope based on linear regression
+    const intercept = 32.88;   // Updated intercept based on linear regression
+    const result = (parentWidth * slope) + intercept;
+    return result;
+  }
+
+  calculateSlideDistanceFromTop = (parentWidth, parentHeight)=> {
+    const slopeWidth = -0.0489;      // Coefficient for parentWidth
+    const slopeHeight = -0.0173;     // Coefficient for parentHeight
+    const result = (parentWidth * slopeWidth) + (parentHeight * slopeHeight);
+    return result;
+  }
+
+
+
   updateSlides = ()=> {
     this.slides = this.slides.map((slide, index0) => {
       let angle = this.getAngle();
-      slide.view.style.transform = `rotateY(${index0 * angle}deg) translateZ(${this.distanceFromCenter }) translateY(-${this.distanceFromTop})`;
+      slide.view.style.transform = `rotateY(${index0 * angle}deg) translateZ(${this.slideDistanceFromCenter }) translateY(${this.slideDistanceFromTop})`;
       slide.view.style.height = this.slideHeight;
       slide.view.style.width = this.slideWidth;
       return slide;