@egjs/flicking 4.13.2-beta.0 → 4.13.2-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/core-packages-link.js +38 -0
  2. package/debug/example/index.html +82 -0
  3. package/declaration/Flicking.d.ts +12 -1
  4. package/declaration/control/Control.d.ts +1 -1
  5. package/declaration/core/AutoResizer.d.ts +5 -0
  6. package/dist/flicking.cjs.js +202 -25
  7. package/dist/flicking.cjs.js.map +1 -1
  8. package/dist/flicking.esm.js +202 -25
  9. package/dist/flicking.esm.js.map +1 -1
  10. package/dist/flicking.js +202 -25
  11. package/dist/flicking.js.map +1 -1
  12. package/dist/flicking.min.js +2 -2
  13. package/dist/flicking.min.js.map +1 -1
  14. package/dist/flicking.pkgd.js +202 -25
  15. package/dist/flicking.pkgd.js.map +1 -1
  16. package/dist/flicking.pkgd.min.js +2 -2
  17. package/dist/flicking.pkgd.min.js.map +1 -1
  18. package/package.json +1 -1
  19. package/src/Flicking.ts +522 -153
  20. package/src/camera/mode/CameraMode.ts +2 -1
  21. package/src/control/Control.ts +1 -1
  22. package/src/control/SnapControl.ts +1 -8
  23. package/src/core/AutoResizer.ts +110 -11
  24. package/src/renderer/Renderer.ts +13 -0
  25. package/src/utils.ts +6 -1
package/core-packages-link.js ADDED
@@ -0,0 +1,38 @@
1
+ /* eslint-disable */
2
+
3
+ /**
4
+ * 프레임워크 컴포넌트를 디버깅할 때 코어 바닐라 로직을 수정하면서 확인할 필요가 있을 때,
5
+ * 이 스크립트를 이용하면 바닐라 로직 수정사항이 프레임워크 컴포넌트 로컬 데모환경에도 반영된다.
6
+ *
7
+ * 인자로 프레임워크 컴포넌트 패키지의 루트 디렉토리를 제공하면 된다.
8
+ *
9
+ * 사용 예시: node core-package-link.js react-flicking
10
+ */
11
+
12
+ const { execSync } = require("child_process");
13
+ const path = require("path");
14
+ const fs = require("fs");
15
+
16
+ const args = process.argv.slice(2);
17
+ const targetDir = args[0];
18
+
19
+ if (!targetDir) {
20
+ console.error("❌ 디렉토리명을 인자로 입력하세요.");
21
+ process.exit(1);
22
+ }
23
+
24
+ const fullPath = path.resolve(process.cwd(), 'packages', targetDir);
25
+ if (!fs.existsSync(fullPath)) {
26
+ console.error(`❌ 디렉토리 없음: ${fullPath}`);
27
+ process.exit(1);
28
+ }
29
+
30
+ function run(cmd, cwd = process.cwd()) {
31
+ console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
32
+ execSync(cmd, { stdio: "inherit", cwd });
33
+ }
34
+
35
+ run("npm run build");
36
+ run("npm link");
37
+ run(`npm link '@egjs/flicking'`, fullPath);
38
+ run("npm run build", fullPath);
package/debug/example/index.html ADDED
@@ -0,0 +1,82 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Flicking Basic Demo</title>
7
+ <link rel="stylesheet" href="../../dist/flicking.css" />
8
+ <style>
9
+ .flicking-viewport {
10
+ width: 500px;
11
+ height: 300px;
12
+ margin: 0 auto;
13
+ }
14
+ .panel {
15
+ width: 200px;
16
+ height: 300px;
17
+ margin-right: 10px;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ font-size: 24px;
22
+ color: white;
23
+ }
24
+ .navigation {
25
+ text-align: center;
26
+ margin-top: 20px;
27
+ }
28
+ .navigation button {
29
+ margin: 0 5px;
30
+ padding: 5px 10px;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <div class="flicking-viewport">
36
+ <div class="flicking-camera">
37
+ <div class="panel" style="background-color: #f44336">Panel 1</div>
38
+ <div class="panel" style="background-color: #2196f3">Panel 2</div>
39
+ <div class="panel" style="background-color: #4caf50">Panel 3</div>
40
+ <div class="panel" style="background-color: #ffc107">Panel 4</div>
41
+ <div class="panel" style="background-color: #9c27b0">Panel 5</div>
42
+ </div>
43
+ </div>
44
+ <div class="navigation">
45
+ <button id="prev">Previous</button>
46
+ <button id="next">Next</button>
47
+ </div>
48
+
49
+ <script src="../../dist/flicking.pkgd.js"></script>
50
+ <script>
51
+ document.addEventListener("DOMContentLoaded", () => {
52
+ const flicking = new Flicking(".flicking-viewport", {
53
+ circular: false,
54
+ moveType: "snap",
55
+ align: "center",
56
+ defaultIndex: 0,
57
+ });
58
+
59
+ // Navigation buttons
60
+ const prevButton = document.getElementById("prev");
61
+ const nextButton = document.getElementById("next");
62
+
63
+ prevButton.addEventListener("click", () => {
64
+ flicking.prev();
65
+ });
66
+
67
+ nextButton.addEventListener("click", () => {
68
+ flicking.next();
69
+ });
70
+
71
+ // Update button states based on current index
72
+ flicking.on("moveEnd", () => {
73
+ prevButton.disabled = flicking.index === 0;
74
+ nextButton.disabled = flicking.index === flicking.panels.length - 1;
75
+ });
76
+
77
+ // Initial button state
78
+ prevButton.disabled = true;
79
+ });
80
+ </script>
81
+ </body>
82
+ </html>
package/declaration/Flicking.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import Component from "@egjs/component";
2
2
  import Viewport from "./core/Viewport";
3
+ import AutoResizer from "./core/AutoResizer";
3
4
  import { Panel } from "./core/panel";
4
5
  import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
5
6
  import { Control } from "./control";
@@ -65,9 +66,11 @@ export interface FlickingOptions {
65
66
  autoResize: boolean;
66
67
  useResizeObserver: boolean;
67
68
  resizeDebounce: number;
69
+ observePanelResize: boolean;
68
70
  maxResizeDebounce: number;
69
71
  useFractionalSize: boolean;
70
72
  externalRenderer: ExternalRenderer | null;
73
+ optimizeSizeUpdate: boolean;
71
74
  renderExternal: {
72
75
  renderer: new (options: RendererOptions) => ExternalRenderer;
73
76
  rendererOptions: RendererOptions;
@@ -114,16 +117,20 @@ declare class Flicking extends Component<FlickingEvents> {
114
117
  private _autoResize;
115
118
  private _useResizeObserver;
116
119
  private _resizeDebounce;
120
+ private _observePanelResize;
117
121
  private _maxResizeDebounce;
118
122
  private _useFractionalSize;
119
123
  private _externalRenderer;
120
124
  private _renderExternal;
125
+ private _optimizeSizeUpdate;
121
126
  private _initialized;
122
127
  private _plugins;
128
+ private _isResizing;
123
129
  get control(): Control;
124
130
  get camera(): Camera;
125
131
  get renderer(): Renderer;
126
132
  get viewport(): Viewport;
133
+ get autoResizer(): AutoResizer;
127
134
  get initialized(): boolean;
128
135
  get circularEnabled(): boolean;
129
136
  get virtualEnabled(): boolean;
@@ -171,6 +178,7 @@ declare class Flicking extends Component<FlickingEvents> {
171
178
  get autoInit(): boolean;
172
179
  get autoResize(): FlickingOptions["autoResize"];
173
180
  get useResizeObserver(): FlickingOptions["useResizeObserver"];
181
+ get observePanelResize(): FlickingOptions["observePanelResize"];
174
182
  get resizeDebounce(): number;
175
183
  get maxResizeDebounce(): number;
176
184
  get useFractionalSize(): boolean;
@@ -179,6 +187,7 @@ declare class Flicking extends Component<FlickingEvents> {
179
187
  renderer: new (options: RendererOptions) => ExternalRenderer;
180
188
  rendererOptions: RendererOptions;
181
189
  };
190
+ get optimizeSizeUpdate(): FlickingOptions["optimizeSizeUpdate"];
182
191
  set align(val: FlickingOptions["align"]);
183
192
  set defaultIndex(val: FlickingOptions["defaultIndex"]);
184
193
  set horizontal(val: FlickingOptions["horizontal"]);
@@ -208,7 +217,9 @@ declare class Flicking extends Component<FlickingEvents> {
208
217
  set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
209
218
  set autoResize(val: FlickingOptions["autoResize"]);
210
219
  set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
211
- constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
220
+ set observePanelResize(val: FlickingOptions["observePanelResize"]);
221
+ set optimizeSizeUpdate(val: FlickingOptions["optimizeSizeUpdate"]);
222
+ constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, observePanelResize, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, optimizeSizeUpdate }?: Partial<FlickingOptions>);
212
223
  init(): Promise<void>;
213
224
  destroy(): void;
214
225
  prev(duration?: number): Promise<void>;
package/declaration/control/Control.d.ts CHANGED
@@ -40,6 +40,6 @@ declare abstract class Control {
40
40
  newActivePanel: Panel;
41
41
  axesEvent?: OnRelease;
42
42
  }): Promise<void>;
43
- protected _getPosition(panel: Panel, direction?: ValueOf<typeof DIRECTION>): number;
43
+ private _getPosition;
44
44
  }
45
45
  export default Control;
package/declaration/core/AutoResizer.d.ts CHANGED
@@ -8,7 +8,12 @@ declare class AutoResizer {
8
8
  get enabled(): boolean;
9
9
  constructor(flicking: Flicking);
10
10
  enable(): this;
11
+ observePanels(): this;
12
+ unobservePanels(): this;
13
+ observe(element: HTMLElement): this;
14
+ unobserve(element: HTMLElement): this;
11
15
  disable(): this;
16
+ private _onResizeWrapper;
12
17
  private _onResize;
13
18
  private _doScheduledResize;
14
19
  private _skipFirstResize;
package/dist/flicking.cjs.js CHANGED
@@ -4,7 +4,7 @@ name: @egjs/flicking
4
4
  license: MIT
5
5
  author: NAVER Corp.
6
6
  repository: https://github.com/naver/egjs-flicking
7
- version: 4.13.2-beta.0
7
+ version: 4.13.2-beta.1
8
8
  */
9
9
  'use strict';
10
10
 
@@ -674,6 +674,9 @@ var getProgress = function (pos, prev, next) {
674
674
  };
675
675
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
676
676
  var getStyle = function (el) {
677
+ if (!el) {
678
+ return {};
679
+ }
677
680
  return window.getComputedStyle(el) || el.currentStyle;
678
681
  };
679
682
  var setSize = function (el, _a) {
@@ -946,13 +949,59 @@ var Viewport = /*#__PURE__*/function () {
946
949
  return Viewport;
947
950
  }();
948
951
 
952
+ /*
953
+ * Copyright (c) 2015 NAVER Corp.
954
+ * egjs projects are licensed under the MIT license
955
+ */
956
+ /**
957
+ * A component that detects size change and trigger resize method when the autoResize option is used
958
+ * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
959
+ */
949
960
  var AutoResizer = /*#__PURE__*/function () {
950
961
  function AutoResizer(flicking) {
951
962
  var _this = this;
952
- this._onResize = function () {
963
+ this._onResizeWrapper = function () {
964
+ _this._onResize([]);
965
+ };
966
+ this._onResize = function (entries) {
953
967
  var flicking = _this._flicking;
954
968
  var resizeDebounce = flicking.resizeDebounce;
955
969
  var maxResizeDebounce = flicking.maxResizeDebounce;
970
+ var resizedViewportElement = flicking.element;
971
+ // 현재 구현에서 리사이즈 옵저빙 대상은 패널과 뷰포트 2개만 존재.
972
+ // 아래는 뷰포트만 변경되었을 때 동작해야하는 로직이 있으므로 아래와 같이 조건문을 건다.
973
+ // 패널 쪽에서는 리사이즈 감지에 resizeObserver를 사용하지 않는 경우가 없으므로 이 조건은 곧 뷰포트만 리사이즈가 된 경우를 의미한다.
974
+ var isResizedViewportOnly = entries.find(function (e) {
975
+ return e.target === flicking.element;
976
+ }) && entries.length === 1;
977
+ // 참고: resizeObserver를 사용하지 않은 경우에는 entries.length가 0으로 오는데 이 경우에는 그냥 항상 리사이즈가 진행되도록 한다.
978
+ // (vw, vh 등을 사용하는 경우 이상 동작이 발생할 여지가 있기 때문이다)
979
+ if (isResizedViewportOnly) {
980
+ // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
981
+ var beforeSize = {
982
+ width: flicking.viewport.width,
983
+ height: flicking.viewport.height
984
+ };
985
+ var afterSize = {
986
+ width: getElementSize({
987
+ el: resizedViewportElement,
988
+ horizontal: true,
989
+ useFractionalSize: _this._flicking.useFractionalSize,
990
+ useOffset: false,
991
+ style: getStyle(resizedViewportElement)
992
+ }),
993
+ height: getElementSize({
994
+ el: resizedViewportElement,
995
+ horizontal: false,
996
+ useFractionalSize: _this._flicking.useFractionalSize,
997
+ useOffset: false,
998
+ style: getStyle(resizedViewportElement)
999
+ })
1000
+ };
1001
+ if (beforeSize.height === afterSize.height && beforeSize.width === afterSize.width) {
1002
+ return;
1003
+ }
1004
+ }
956
1005
  if (resizeDebounce <= 0) {
957
1006
  void flicking.resize();
958
1007
  } else {
@@ -978,12 +1027,12 @@ var AutoResizer = /*#__PURE__*/function () {
978
1027
  // eslint-disable-next-line @typescript-eslint/member-ordering
979
1028
  this._skipFirstResize = function () {
980
1029
  var isFirstResize = true;
981
- return function () {
1030
+ return function (entries) {
982
1031
  if (isFirstResize) {
983
1032
  isFirstResize = false;
984
1033
  return;
985
1034
  }
986
- _this._onResize();
1035
+ _this._onResize(entries);
987
1036
  };
988
1037
  }();
989
1038
  this._flicking = flicking;
@@ -1009,14 +1058,46 @@ var AutoResizer = /*#__PURE__*/function () {
1009
1058
  if (flicking.useResizeObserver && !!window.ResizeObserver) {
1010
1059
  var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
1011
1060
  var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
1012
- resizeObserver.observe(flicking.viewport.element);
1013
1061
  this._resizeObserver = resizeObserver;
1062
+ this.observe(flicking.viewport.element);
1063
+ if (flicking.observePanelResize) {
1064
+ this.observePanels();
1065
+ }
1014
1066
  } else {
1015
- window.addEventListener("resize", this._onResize);
1067
+ window.addEventListener("resize", this._onResizeWrapper);
1016
1068
  }
1017
1069
  this._enabled = true;
1018
1070
  return this;
1019
1071
  };
1072
+ __proto.observePanels = function () {
1073
+ var _this = this;
1074
+ this._flicking.panels.forEach(function (panel) {
1075
+ _this.observe(panel.element);
1076
+ });
1077
+ return this;
1078
+ };
1079
+ __proto.unobservePanels = function () {
1080
+ var _this = this;
1081
+ this._flicking.panels.forEach(function (panel) {
1082
+ _this.unobserve(panel.element);
1083
+ });
1084
+ return this;
1085
+ };
1086
+ __proto.observe = function (element) {
1087
+ var resizeObserver = this._resizeObserver;
1088
+ if (!resizeObserver) return this;
1089
+ resizeObserver.observe(element);
1090
+ return this;
1091
+ };
1092
+ __proto.unobserve = function (element) {
1093
+ var resizeObserver = this._resizeObserver;
1094
+ if (!resizeObserver) return this;
1095
+ resizeObserver.unobserve(element);
1096
+ if (this._flicking.observePanelResize) {
1097
+ this.unobservePanels();
1098
+ }
1099
+ return this;
1100
+ };
1020
1101
  __proto.disable = function () {
1021
1102
  if (!this._enabled) return this;
1022
1103
  var resizeObserver = this._resizeObserver;
@@ -1024,7 +1105,7 @@ var AutoResizer = /*#__PURE__*/function () {
1024
1105
  resizeObserver.disconnect();
1025
1106
  this._resizeObserver = null;
1026
1107
  } else {
1027
- window.removeEventListener("resize", this._onResize);
1108
+ window.removeEventListener("resize", this._onResizeWrapper);
1028
1109
  }
1029
1110
  this._enabled = false;
1030
1111
  return this;
@@ -2915,11 +2996,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
2915
2996
  if (snapDelta >= snapThreshold && snapDelta > 0) {
2916
2997
  // Move to anchor at position
2917
2998
  targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
2918
- // const targetPanel = targetAnchor.panel;
2919
- // const nextPosition = this._getPosition(targetPanel, DIRECTION.NEXT);
2920
- // const prevPosition = this._getPosition(targetPanel, DIRECTION.PREV);
2921
- // targetPosition = Math.abs(camera.position - nextPosition) < Math.abs(camera.position - prevPosition) ? nextPosition : prevPosition;
2922
- } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
2999
+ } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
2923
3000
  // Move to the adjacent panel
2924
3001
  targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
2925
3002
  } else {
@@ -2947,7 +3024,6 @@ var SnapControl = /*#__PURE__*/function (_super) {
2947
3024
  if (!anchorAtCamera || !anchorAtPosition) {
2948
3025
  throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE);
2949
3026
  }
2950
- // console.log("_findSnappedAnchor", anchorAtPosition);
2951
3027
  if (!isFinite(count)) {
2952
3028
  return anchorAtPosition;
2953
3029
  }
@@ -3368,7 +3444,10 @@ var CameraMode = /*#__PURE__*/function () {
3368
3444
  };
3369
3445
  __proto.findAnchorIncludePosition = function (position) {
3370
3446
  var anchors = this._flicking.camera.anchorPoints;
3371
- return anchors.reduce(function (nearest, anchor) {
3447
+ var anchorsIncludingPosition = anchors.filter(function (anchor) {
3448
+ return anchor.panel.includePosition(position, true);
3449
+ });
3450
+ return anchorsIncludingPosition.reduce(function (nearest, anchor) {
3372
3451
  if (!nearest) return anchor;
3373
3452
  return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
3374
3453
  }, null);
@@ -4824,6 +4903,18 @@ var Renderer = /*#__PURE__*/function () {
4824
4903
  var activePanel = control.activePanel;
4825
4904
  // Update camera & control
4826
4905
  this._updateCameraAndControl();
4906
+ if (flicking.autoResize && flicking.useResizeObserver) {
4907
+ panelsAdded.forEach(function (panel) {
4908
+ if (panel.element) {
4909
+ flicking.autoResizer.observe(panel.element);
4910
+ }
4911
+ });
4912
+ panelsRemoved.forEach(function (panel) {
4913
+ if (panel.element) {
4914
+ flicking.autoResizer.unobserve(panel.element);
4915
+ }
4916
+ });
4917
+ }
4827
4918
  void this.render();
4828
4919
  if (!flicking.animating) {
4829
4920
  if (!activePanel || activePanel.removed) {
@@ -6101,18 +6192,23 @@ var Flicking = /*#__PURE__*/function (_super) {
6101
6192
  useResizeObserver = _9 === void 0 ? true : _9,
6102
6193
  _10 = _b.resizeDebounce,
6103
6194
  resizeDebounce = _10 === void 0 ? 0 : _10,
6104
- _11 = _b.maxResizeDebounce,
6105
- maxResizeDebounce = _11 === void 0 ? 100 : _11,
6106
- _12 = _b.useFractionalSize,
6107
- useFractionalSize = _12 === void 0 ? false : _12,
6108
- _13 = _b.externalRenderer,
6109
- externalRenderer = _13 === void 0 ? null : _13,
6110
- _14 = _b.renderExternal,
6111
- renderExternal = _14 === void 0 ? null : _14;
6195
+ _11 = _b.observePanelResize,
6196
+ observePanelResize = _11 === void 0 ? false : _11,
6197
+ _12 = _b.maxResizeDebounce,
6198
+ maxResizeDebounce = _12 === void 0 ? 100 : _12,
6199
+ _13 = _b.useFractionalSize,
6200
+ useFractionalSize = _13 === void 0 ? false : _13,
6201
+ _14 = _b.externalRenderer,
6202
+ externalRenderer = _14 === void 0 ? null : _14,
6203
+ _15 = _b.renderExternal,
6204
+ renderExternal = _15 === void 0 ? null : _15,
6205
+ _16 = _b.optimizeSizeUpdate,
6206
+ optimizeSizeUpdate = _16 === void 0 ? false : _16;
6112
6207
  var _this = _super.call(this) || this;
6113
6208
  // Internal states
6114
6209
  _this._initialized = false;
6115
6210
  _this._plugins = [];
6211
+ _this._isResizing = false;
6116
6212
  // Bind options
6117
6213
  _this._align = align;
6118
6214
  _this._defaultIndex = defaultIndex;
@@ -6148,9 +6244,11 @@ var Flicking = /*#__PURE__*/function (_super) {
6148
6244
  _this._useResizeObserver = useResizeObserver;
6149
6245
  _this._resizeDebounce = resizeDebounce;
6150
6246
  _this._maxResizeDebounce = maxResizeDebounce;
6247
+ _this._observePanelResize = observePanelResize;
6151
6248
  _this._useFractionalSize = useFractionalSize;
6152
6249
  _this._externalRenderer = externalRenderer;
6153
6250
  _this._renderExternal = renderExternal;
6251
+ _this._optimizeSizeUpdate = optimizeSizeUpdate;
6154
6252
  // Create core components
6155
6253
  _this._viewport = new Viewport(_this, getElement(root));
6156
6254
  _this._autoResizer = new AutoResizer(_this);
@@ -6231,6 +6329,19 @@ var Flicking = /*#__PURE__*/function (_super) {
6231
6329
  enumerable: false,
6232
6330
  configurable: true
6233
6331
  });
6332
+ Object.defineProperty(__proto, "autoResizer", {
6333
+ /**
6334
+ * {@link AutoResizer} instance of the Flicking
6335
+ * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
6336
+ * @internal
6337
+ * @readonly
6338
+ */
6339
+ get: function () {
6340
+ return this._autoResizer;
6341
+ },
6342
+ enumerable: false,
6343
+ configurable: true
6344
+ });
6234
6345
  Object.defineProperty(__proto, "initialized", {
6235
6346
  // Internal States
6236
6347
  /**
@@ -7104,6 +7215,9 @@ var Flicking = /*#__PURE__*/function (_super) {
7104
7215
  // OTHERS
7105
7216
  set: function (val) {
7106
7217
  this._autoResize = val;
7218
+ if (!this._initialized) {
7219
+ return;
7220
+ }
7107
7221
  if (val) {
7108
7222
  this._autoResizer.enable();
7109
7223
  } else {
@@ -7126,13 +7240,38 @@ var Flicking = /*#__PURE__*/function (_super) {
7126
7240
  },
7127
7241
  set: function (val) {
7128
7242
  this._useResizeObserver = val;
7129
- if (this._autoResize) {
7243
+ if (this._initialized && this._autoResize) {
7130
7244
  this._autoResizer.enable();
7131
7245
  }
7132
7246
  },
7133
7247
  enumerable: false,
7134
7248
  configurable: true
7135
7249
  });
7250
+ Object.defineProperty(__proto, "observePanelResize", {
7251
+ /**
7252
+ * Whether to use {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver} to observe the size of the panel element
7253
+ * This is only available when `useResizeObserver` is enabled.
7254
+ * This option garantees that the resize event is triggered when the size of the panel element is changed.
7255
+ * @ko 이 옵션을 활성화할 경우, {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}를 사용하여 패널 엘리먼트의 크기를 추적합니다.
7256
+ * 이 옵션은 `useResizeObserver` 옵션이 활성화된 경우에만 사용할 수 있습니다.
7257
+ * 이 옵션은 패널 엘리먼트의 크기가 변경될 경우 resize 이벤트가 발생하도록 보장합니다.
7258
+ */
7259
+ get: function () {
7260
+ return this._observePanelResize;
7261
+ },
7262
+ set: function (val) {
7263
+ this._observePanelResize = val;
7264
+ if (this._initialized && this._autoResize) {
7265
+ if (val) {
7266
+ this._autoResizer.observePanels();
7267
+ } else {
7268
+ this._autoResizer.unobservePanels();
7269
+ }
7270
+ }
7271
+ },
7272
+ enumerable: false,
7273
+ configurable: true
7274
+ });
7136
7275
  Object.defineProperty(__proto, "resizeDebounce", {
7137
7276
  /**
7138
7277
  * Delays size recalculation from `autoResize` by the given time in milisecond.
@@ -7214,6 +7353,30 @@ var Flicking = /*#__PURE__*/function (_super) {
7214
7353
  enumerable: false,
7215
7354
  configurable: true
7216
7355
  });
7356
+ Object.defineProperty(__proto, "optimizeSizeUpdate", {
7357
+ /**
7358
+ * This option works only when autoResize is set to true.
7359
+ * By default, autoResize listens to changes in both the viewport's width and height, updating all panel sizes accordingly.
7360
+ * When optimizeSizeUpdate is enabled, the update behavior is optimized based on the flicking direction:
7361
+ * If direction is "horizontal", only changes in width will trigger panel size updates.
7362
+ * If direction is "vertical", only changes in height will do so.
7363
+ * This option is useful when panel heights vary and unwanted flickering occurs due to frequent size recalculations during flicking. Enabling optimizeSizeUpdate prevents unnecessary updates and helps maintain visual stability.
7364
+ * @ko optimizeSizeUpdate는 autoResize가 true일 때만 동작합니다.
7365
+ * 기본적으로 autoResize는 뷰포트의 width와 height 변화를 모두 감지하여 패널들의 사이즈를 업데이트합니다.
7366
+ * 이 옵션을 활성화하면 플리킹 방향에 따라 필요한 차원(horizontal → width, vertical → height)에 대해서만 사이즈를 업데이트합니다.
7367
+ * 내부 패널의 높이가 서로 다를 때, 플리킹 중 과도한 리사이징으로 인한 깜빡임 현상을 줄이는 데 유용합니다.
7368
+ * @type {boolean}
7369
+ * @default false
7370
+ */
7371
+ get: function () {
7372
+ return this._optimizeSizeUpdate;
7373
+ },
7374
+ set: function (val) {
7375
+ this._optimizeSizeUpdate = val;
7376
+ },
7377
+ enumerable: false,
7378
+ configurable: true
7379
+ });
7217
7380
  /**
7218
7381
  * Initialize Flicking and move to the default index
7219
7382
  * This is automatically called on Flicking's constructor when `autoInit` is true(default)
@@ -7652,6 +7815,8 @@ var Flicking = /*#__PURE__*/function (_super) {
7652
7815
  return __generator(this, function (_a) {
7653
7816
  switch (_a.label) {
7654
7817
  case 0:
7818
+ if (this._isResizing) return [2 /*return*/];
7819
+ this._isResizing = true;
7655
7820
  viewport = this._viewport;
7656
7821
  renderer = this._renderer;
7657
7822
  camera = this._camera;
@@ -7666,9 +7831,20 @@ var Flicking = /*#__PURE__*/function (_super) {
7666
7831
  element: viewport.element
7667
7832
  }));
7668
7833
  viewport.resize();
7834
+ if (!this._optimizeSizeUpdate) return [3 /*break*/, 3];
7835
+ if (!(this.horizontal && viewport.width !== prevWidth || !this.horizontal && viewport.height !== prevHeight)) return [3 /*break*/, 2];
7669
7836
  return [4 /*yield*/, renderer.forceRenderAllPanels()];
7670
7837
  case 1:
7838
+ _a.sent();
7839
+ _a.label = 2;
7840
+ case 2:
7841
+ return [3 /*break*/, 5];
7842
+ case 3:
7843
+ return [4 /*yield*/, renderer.forceRenderAllPanels()];
7844
+ case 4:
7671
7845
  _a.sent(); // Render all panel elements, to update sizes
7846
+ _a.label = 5;
7847
+ case 5:
7672
7848
  if (!this._initialized) {
7673
7849
  return [2 /*return*/];
7674
7850
  }
@@ -7681,7 +7857,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7681
7857
  camera.updatePanelOrder();
7682
7858
  camera.updateOffset();
7683
7859
  return [4 /*yield*/, renderer.render()];
7684
- case 2:
7860
+ case 6:
7685
7861
  _a.sent();
7686
7862
  if (!this._initialized) {
7687
7863
  return [2 /*return*/];
@@ -7704,6 +7880,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7704
7880
  sizeChanged: sizeChanged,
7705
7881
  element: viewport.element
7706
7882
  }));
7883
+ this._isResizing = false;
7707
7884
  return [2 /*return*/];
7708
7885
  }
7709
7886
  });
@@ -7923,7 +8100,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7923
8100
  * Flicking.VERSION; // ex) 4.0.0
7924
8101
  * ```
7925
8102
  */
7926
- Flicking.VERSION = "4.13.2-beta.0";
8103
+ Flicking.VERSION = "4.13.2-beta.1";
7927
8104
  return Flicking;
7928
8105
  }(Component);
7929
8106