chore: refactor interface

Author: cjw783

debug/state-api/index.html

@@ -93,7 +93,7 @@
         <button class="navigation-btn" id="prev">Previous</button>
         <div class="flicking-viewport">
           <div class="flicking-camera">
-            <div class="flicking-panel" style="width: 500px;">x0</div>
+            <div class="flicking-panel" style="width: 500px">x0</div>
             <div class="flicking-panel">x1</div>
             <div class="flicking-panel">x2</div>
             <div class="flicking-panel">x3</div>
@@ -125,7 +125,10 @@
     <script src="../../dist/flicking.pkgd.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        const flicking = new Flicking(".flicking-viewport", {renderOnlyVisible: true});
+        const flicking = new Flicking(".flicking-viewport", {
+          renderOnlyVisible: true,
+          // circular: true
+        });
         const { connectFlickingStateApi } = Flicking;
         const reactiveObj = connectFlickingStateApi(flicking);
         const {
@@ -237,13 +240,10 @@
           });
         });
 
-        reactiveObj.subscribe("indexProgress", (nextValue) => {
-          progressFillElement.style.width = `${nextValue}%`;
-        });
-
-
-        const scrollProgressFillElement = document.getElementById("scroll-progress-fill");
-        reactiveObj.subscribe("scrollProgress", (nextValue) => {
+        const scrollProgressFillElement = document.getElementById(
+          "scroll-progress-fill"
+        );
+        reactiveObj.subscribe("progress", (nextValue) => {
           scrollProgressFillElement.style.width = `${nextValue}%`;
         });
       });

packages/react-flicking/src/demo/StatePage.tsx

@@ -13,7 +13,7 @@ import LinearProgress from "@mui/material/LinearProgress";
 const DebugPage: React.FC = () => {
   const flickingRef = useRef<Flicking>(null);
 
-  const {isReachStart, isReachEnd, indexProgress, currentPanelIndex, totalPanelCount, moveTo} = useFlickingStateApi(flickingRef);
+  const {isReachStart, isReachEnd, progress, currentPanelIndex, totalPanelCount, moveTo} = useFlickingStateApi(flickingRef);
 
   const onClickPrev = () => {
     flickingRef.current?.prev();
@@ -90,7 +90,7 @@ const DebugPage: React.FC = () => {
         <Pagination count={totalPanelCount} page={currentPanelIndex+1} onChange={(e, v) => {
           moveTo(v-1);
         }}/>
-        <LinearProgress variant="determinate" value={indexProgress}/>
+        <LinearProgress variant="determinate" value={progress}/>
         {/* <LinearProgress variant="determinate" value={scrollProgress}/> */}
       </Stack>
     </div>

src/state-api/index.ts

@@ -7,21 +7,17 @@ import {
 
 import Flicking from "../Flicking";
 
-const getIsReachStart = (flicking: Flicking) => flicking.index === 0;
-const getIsReachEnd = (flicking: Flicking) =>
-  flicking.index === flicking.panelCount - 1;
+const getIsReachStart = (flicking: Flicking) => !flicking.circular && flicking.index === 0;
+
+const getIsReachEnd = (flicking: Flicking) => !flicking.circular && flicking.index === flicking.panelCount - 1;
+
 
 const getTotalPanelCount = (flicking: Flicking) => flicking.panelCount;
 const getCurrentPanelIndex = (flicking: Flicking) => flicking.index;
 
-// Returns the progress percentage based on the current panel index.
-const getProgressByPanelIndex = (flicking: Flicking) =>
-  flicking.panelCount > 1
-    ? (flicking.index / (flicking.panelCount - 1)) * 100
-    : 100;
 
 // Returns the progress percentage based on the current scroll position.
-const getProgressByScrollPos = (flicking: Flicking) => {
+const getProgress = (flicking: Flicking) => {
   const cam = flicking.camera;
 
   const progressRatio = (cam.position - cam.range.min) / (cam.range.max - cam.range.min);
@@ -31,37 +27,33 @@ const getProgressByScrollPos = (flicking: Flicking) => {
   return percent;
 };
 
-export type FlickingStateApi = ReactiveObject<{
-  isReachStart: boolean;
-  isReachEnd: boolean;
-  totalPanelCount: number;
-  currentPanelIndex: number;
-  indexProgress: number;
-  scrollProgress: number;
-  moveTo: (i: number) => Promise<void> | undefined;
-}>;
+export type FlickingReactiveStateApi = ReactiveObject<FlickingReactiveState  & FlickingReactiveMethod>;
 
 export interface FlickingReactiveState {
   isReachStart: boolean;
   isReachEnd: boolean;
   totalPanelCount: number;
   currentPanelIndex: number;
-  indexProgress: number;
-  scrollProgress: number;
+  progress: number;
+}
+
+export interface FlickingReactiveMethod {
+  moveTo: (i: number) => Promise<void>;
 }
 
-const flickingStateApiAdapter: ReactiveSetupAdapter<FlickingStateApi, FlickingReactiveState, "moveTo"> = ({ onInit, onDestroy }) => {
+const flickingStateApiAdapter: ReactiveSetupAdapter<FlickingReactiveStateApi, FlickingReactiveState, "moveTo"> = ({ onInit, onDestroy }) => {
   let flicking: Flicking | null = null;
 
-  const moveTo = (i: number) => flicking?.moveTo(i);
+  const moveTo = (i: number) => {
+    return flicking ? flicking.moveTo(i) : Promise.reject(new Error("Flicking instance is not available"));
+  };
 
   const reactiveObj = reactive({
     isReachStart: false,
     isReachEnd: false,
     totalPanelCount: 0,
     currentPanelIndex: 0,
-    indexProgress: 0,
-    scrollProgress: 0,
+    progress: 0,
     moveTo
   });
 
@@ -71,7 +63,6 @@ const flickingStateApiAdapter: ReactiveSetupAdapter<FlickingStateApi, FlickingRe
     reactiveObj.isReachStart = getIsReachStart(flicking);
     reactiveObj.isReachEnd = getIsReachEnd(flicking);
     reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
-    reactiveObj.indexProgress = getProgressByPanelIndex(flicking);
   };
 
   const onPanelChange = () => {
@@ -84,7 +75,7 @@ const flickingStateApiAdapter: ReactiveSetupAdapter<FlickingStateApi, FlickingRe
   const onMove = () => {
     if (flicking === null) return;
 
-    reactiveObj.scrollProgress = getProgressByScrollPos(flicking);
+    reactiveObj.progress = getProgress(flicking);
   };
 
   onInit((inst, data) => {
@@ -94,8 +85,7 @@ const flickingStateApiAdapter: ReactiveSetupAdapter<FlickingStateApi, FlickingRe
     reactiveObj.isReachStart = getIsReachStart(flicking);
     reactiveObj.isReachEnd = getIsReachEnd(flicking);
     reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
-    reactiveObj.indexProgress = getProgressByPanelIndex(flicking);
-    reactiveObj.scrollProgress = getProgressByScrollPos(flicking);
+    reactiveObj.progress = getProgress(flicking);
 
     reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
 

test/unit/state-api/state-api.spec.ts

@@ -31,8 +31,7 @@ describe("State API", () => {
       expect(stateApi.isReachEnd).to.be.false;
       expect(stateApi.totalPanelCount).to.equal(3);
       expect(stateApi.currentPanelIndex).to.equal(0);
-      expect(stateApi.indexProgress).to.equal(0);
-      expect(stateApi.scrollProgress).to.equal(0);
+      expect(stateApi.progress).to.equal(0);
     });
   });
 
@@ -45,8 +44,7 @@ describe("State API", () => {
       expect(stateApi.isReachStart).to.be.false;
       expect(stateApi.isReachEnd).to.be.false;
       expect(stateApi.currentPanelIndex).to.equal(1);
-      expect(stateApi.indexProgress).to.equal(50);
-      expect(stateApi.scrollProgress).to.equal(50);
+      expect(stateApi.progress).to.equal(50);
     });
 
     it("should update state when moving to last panel", async () => {
@@ -57,8 +55,7 @@ describe("State API", () => {
       expect(stateApi.isReachStart).to.be.false;
       expect(stateApi.isReachEnd).to.be.true;
       expect(stateApi.currentPanelIndex).to.equal(2);
-      expect(stateApi.indexProgress).to.equal(100);
-      expect(stateApi.scrollProgress).to.equal(100);
+      expect(stateApi.progress).to.equal(100);
     });
 
     it("should update state when adding panels", async () => {
@@ -83,38 +80,7 @@ describe("State API", () => {
       await promise;
 
       expect(stateApi.currentPanelIndex).to.equal(1);
-      expect(stateApi.indexProgress).to.equal(50);
-      expect(stateApi.scrollProgress).to.equal(50);
-    });
-  });
-
-  describe("Progress", () => {
-    it("should show difference between indexProgress and scrollProgress with different panel sizes", async () => {
-      // Create flicking with panels of different sizes
-      const customFlicking = await createFlicking(
-        El.viewport("1000px", "400px").add(
-          El.camera().add(
-            El.panel("200px", "100%"), // 200px wide
-            El.panel("400px", "100%"), // 400px wide
-            El.panel("600px", "100%") // 600px wide
-          )
-        )
-      );
-      const customStateApi = connectFlickingStateApi(customFlicking);
-
-      // Move to second panel
-      const promise = customFlicking.moveTo(1);
-      tick(1000);
-      await promise;
-
-      // indexProgress is based on panel index
-      // scrollProgress is based on actual scroll position
-      // They should be different when panels have different sizes
-      expect(customStateApi.indexProgress).to.not.equal(
-        customStateApi.scrollProgress
-      );
-
-      await customStateApi.unsubscribe();
+      expect(stateApi.progress).to.equal(50);
     });
   });
 });