fix: sync camera anchors (#935)

* fix: sync camera for reordered panels

* fix: fix `renderOnlyVIsible` issue with #931

Author: daybrush

packages/react-flicking/src/react-flicking/Flicking.tsx

@@ -312,12 +312,12 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       : {};
 
     return renderingIndexes.map(idx => {
-      return <div
-        key={idx}
-        data-element-index={idx}
-        ref={this._panels[idx] as React.RefObject<HTMLDivElement>}
-        className={panelClass}
-        style={size} />
+      return <StrictPanel key={idx} ref={this._panels[idx] as any}>
+          <div
+          data-element-index={idx}
+          className={panelClass}
+          style={size} />
+        </StrictPanel>;
     });
   }
 

packages/react-flicking/src/react-flicking/ReactElementProvider.ts

@@ -5,27 +5,24 @@
 import { ElementProvider } from "@egjs/flicking";
 import StrictPanel from "./StrictPanel";
 import NonStrictPanel from "./NonStrictPanel";
+import React from "react";
 
 class ReactElementProvider implements ElementProvider {
-  private _elRef: React.RefObject<HTMLElement>;
+  private _el: StrictPanel;
 
-  public get element() { return this._elRef.current!; }
-  public get rendered() { return this._elRef.current != null; }
+  public get element() { return this._el?.nativeElement }
+  public get rendered() { return this._el?.rendered; }
 
-  public constructor(el: StrictPanel | NonStrictPanel | HTMLDivElement) {
-    this._elRef = el instanceof Element ? { current: el } : el.elRef;
+  public constructor(el: StrictPanel) {
+    this._el = el;
   }
 
   public show() {
-    if (this._elRef.current) {
-      this._elRef.current.style.display = "";
-    }
+    this._el?.show();
   }
 
   public hide() {
-    if (this._elRef.current) {
-      this._elRef.current.style.display = "none";
-    }
+    this._el?.hide();
   }
 }
 

packages/react-flicking/src/react-flicking/ReactRenderer.ts

@@ -74,15 +74,13 @@ class ReactRenderer extends ExternalRenderer {
   protected _collectPanels() {
     const flicking = getFlickingAttached(this._flicking);
     const reactFlicking = this._reactFlicking;
-    const reactPanels = reactFlicking.reactPanels.map(panel => panel instanceof HTMLDivElement ? panel : panel.nativeElement);
+    const reactPanels = reactFlicking.reactPanels;
 
     this._panels = this._strategy.collectPanels(flicking, reactPanels);
   }
 
-  protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) {
-    const el = externalComponent instanceof HTMLDivElement ? externalComponent : externalComponent.nativeElement;
-
-    return this._strategy.createPanel(el, options);
+  protected _createPanel(externalComponent: StrictPanel, options: PanelOptions) {
+    return this._strategy.createPanel(externalComponent, options);
   }
 }
 

src/cfc/sync.ts

@@ -87,6 +87,16 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
 
   if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
     renderer.updateAfterPanelChange(added, removed);
+  } else if (diffResult.ordered.length > 0) {
+    const camera = flicking.camera;
+    // 순서 변경으로 인한 index 변경 및 range 값 변경
+    camera.updateRange();
+    // index 변경으로 인한 카메라 위치 즉시 변경
+    camera.updateOffset();
+    // 순서 변경으로 인한 anchors 전부 업데이트
+    camera.updateAnchors();
+    // need panel 여부 재확인 필요
+    camera.resetNeedPanelHistory();
   }
 };