\n * ```\n * ## Javascript\n * ```js\n * import ImReady from \"@egjs/imready\";\n *\n * const im = new ImReady(); // umd: eg.ImReady\n * im.check(document.querySelectorAll(\"img\")).on({\n * preReadyElement: e => {\n * // 1, 3\n * // 2, 3\n * // 3, 3\n * console.log(e.preReadyCount, e.totalCount),\n * },\n * });\n * ```\n */\n public check(elements: ArrayFormat): this {\n const { prefix } = this.options;\n\n this.clear();\n this.elementInfos = toArray(elements).map((element, index) => {\n const loader = this.getLoader(element, { prefix });\n\n loader.check();\n loader.on(\"error\", e => {\n this.onError(index, e.target);\n }).on(\"preReady\", e => {\n const info = this.elementInfos[index];\n\n info.hasLoading = e.hasLoading;\n info.isSkip = e.isSkip;\n const isPreReady = this.checkPreReady(index);\n\n this.onPreReadyElement(index);\n\n isPreReady && this.onPreReady();\n }).on(\"ready\", ({ withPreReady, hasLoading, isSkip }) => {\n const info = this.elementInfos[index];\n\n info.hasLoading = hasLoading;\n info.isSkip = isSkip;\n\n const isPreReady = withPreReady && this.checkPreReady(index);\n const isReady = this.checkReady(index);\n\n // Pre-ready and ready occur simultaneously\n withPreReady && this.onPreReadyElement(index);\n this.onReadyElement(index);\n\n isPreReady && this.onPreReady();\n isReady && this.onReady();\n });\n\n return {\n loader,\n element,\n hasLoading: false,\n hasError: false,\n isPreReady: false,\n isReady: false,\n isSkip: false,\n };\n });\n\n const length = this.elementInfos.length;\n\n this.totalCount = length;\n if (!length) {\n setTimeout(() => {\n this.onPreReady();\n this.onReady();\n });\n }\n return this;\n }\n /**\n * Gets the total count of elements to be checked.\n * @ko 체크하는 element의 총 개수를 가져온다.\n */\n public getTotalCount() {\n return this.totalCount;\n }\n /**\n * Whether the elements are all pre-ready. (all sizes are known)\n * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.\n */\n public isPreReady() {\n return this.elementInfos.every(info => info.isPreReady);\n }\n /**\n * Whether the elements are all ready.\n * @ko 엘리먼트들이 모두 준비가 됐는지 여부.\n */\n public isReady() {\n return this.elementInfos.every(info => info.isReady);\n }\n /**\n * Whether an error has occurred in the elements in the current state.\n * @ko 현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.\n */\n public hasError() {\n return this.totalErrorCount > 0;\n }\n /**\n * Clears events of elements being checked.\n * @ko 체크 중인 엘리먼트들의 이벤트를 해제 한다.\n */\n public clear() {\n this.isPreReadyOver = false;\n this.totalCount = 0;\n this.preReadyCount = 0;\n this.readyCount = 0;\n this.totalErrorCount = 0;\n this.elementInfos.forEach(info => {\n if (info.loader) {\n info.loader.destroy();\n }\n });\n this.elementInfos = [];\n }\n /**\n * Destory all events.\n * @ko 모든 이벤트를 해제 한다.\n */\n public destroy() {\n this.clear();\n this.off();\n }\n private getLoader(element: HTMLElement, options: ImReadyLoaderOptions) {\n const tagName = element.tagName.toLowerCase();\n const loaders = this.options.loaders;\n const prefix = options.prefix;\n const tags = Object.keys(loaders);\n\n if (loaders[tagName]) {\n return new loaders[tagName](element, options);\n }\n const loader = new ElementLoader(element, options);\n const children = toArray(element.querySelectorAll(tags.join(\", \")));\n\n loader.setHasLoading(children.some(el => hasLoadingAttribute(el, prefix)));\n let withPreReady = false;\n\n const childrenImReady = this.clone().on(\"error\", e => {\n loader.onError(e.target);\n }).on(\"ready\", () => {\n loader.onReady(withPreReady);\n });\n\n loader.on(\"requestChildren\", () => {\n // has not data size\n const contentElements = getContentElements(element, tags, this.options.prefix);\n\n childrenImReady.check(contentElements).on(\"preReady\", e => {\n withPreReady = e.isReady;\n if (!withPreReady) {\n loader.onPreReady();\n }\n });\n }).on(\"reqeustReadyChildren\", () => {\n // has data size\n // loader call preReady\n // check only video, image elements\n childrenImReady.check(children);\n }).on(\"requestDestroy\", () => {\n childrenImReady.destroy();\n });\n\n return loader;\n }\n private clone() {\n return new ImReadyManager({ ...this.options });\n }\n private checkPreReady(index: number) {\n this.elementInfos[index].isPreReady = true;\n ++this.preReadyCount;\n\n\n if (this.preReadyCount < this.totalCount) {\n return false;\n }\n return true;\n }\n private checkReady(index: number) {\n this.elementInfos[index].isReady = true;\n ++this.readyCount;\n\n if (this.readyCount < this.totalCount) {\n return false;\n }\n return true;\n }\n\n\n private onError(index: number, target: HTMLElement) {\n const info = this.elementInfos[index];\n\n info.hasError = true;\n /**\n * An event occurs if the image, video fails to load.\n * @ko 이미지, 비디오가 로딩에 실패하면 이벤트가 발생한다.\n * @event eg.ImReady#error\n * @param {eg.ImReady.OnError} e - The object of data to be sent to an event 이벤트에 전달되는 데이터 객체\n * @example\n * ```html\n *
\n * \n * \n * \n *
\n * ```\n * ## Javascript\n * ```js\n * import ImReady from \"@egjs/imready\";\n *\n * const im = new ImReady(); // umd: eg.ImReady\n * im.check([document.querySelector(\"div\")]).on({\n * error: e => {\n * //
...
, 0, \n * console.log(e.element, e.index, e.target),\n * },\n * });\n * ```\n */\n this.trigger(new ComponentEvent(\"error\", {\n element: info.element,\n index,\n target,\n errorCount: this.getErrorCount(),\n totalErrorCount: ++this.totalErrorCount,\n }));\n }\n private onPreReadyElement(index: number) {\n const info = this.elementInfos[index];\n /**\n * An event occurs when the element is pre-ready (when the loading attribute is applied or the size is known)\n * @ko 해당 엘리먼트가 사전 준비되었을 때(loading 속성이 적용되었거나 사이즈를 알 수 있을 때) 이벤트가 발생한다.\n * @event eg.ImReady#preReadyElement\n * @param {eg.ImReady.OnPreReadyElement} e - The object of data to be sent to an event 이벤트에 전달되는 데이터 객체\n * @example\n * ```html\n *
\n * \n * \n * \n *
\n * ```\n * ## Javascript\n * ```js\n * import ImReady from \"@egjs/imready\";\n *\n * const im = new ImReady(); // umd: eg.ImReady\n * im.check(document.querySelectorAll(\"img\")).on({\n * preReadyElement: e => {\n * // 1, 3\n * // 2, 3\n * // 3, 3\n * console.log(e.preReadyCount, e.totalCount),\n * },\n * });\n * ```\n */\n this.trigger(new ComponentEvent(\"preReadyElement\", {\n element: info.element,\n index,\n\n preReadyCount: this.preReadyCount,\n readyCount: this.readyCount,\n totalCount: this.totalCount,\n\n isPreReady: this.isPreReady(),\n isReady: this.isReady(),\n hasLoading: info.hasLoading,\n isSkip: info.isSkip,\n }));\n }\n private onPreReady() {\n this.isPreReadyOver = true;\n /**\n * An event occurs when all element are pre-ready (When all elements have the loading attribute applied or the size is known)\n * @ko 모든 엘리먼트들이 사전 준비된 경우 (모든 엘리먼트들이 loading 속성이 적용되었거나 사이즈를 알 수 있는 경우) 이벤트가 발생한다.\n * @event eg.ImReady#preReady\n * @param {eg.ImReady.OnPreReady} e - The object of data to be sent to an event 이벤트에 전달되는 데이터 객체\n * @example\n * ```html\n *
\n * \n * \n * \n *
\n * ```\n * ## Javascript\n * ```js\n * import ImReady from \"@egjs/imready\";\n *\n * const im = new ImReady(); // umd: eg.ImReady\n * im.check(document.querySelectorAll(\"img\")).on({\n * preReady: e => {\n * // 0, 3\n * console.log(e.readyCount, e.totalCount),\n * },\n * });\n * ```\n */\n this.trigger(new ComponentEvent(\"preReady\", {\n readyCount: this.readyCount,\n totalCount: this.totalCount,\n isReady: this.isReady(),\n hasLoading: this.hasLoading(),\n }));\n }\n private onReadyElement(index: number) {\n const info = this.elementInfos[index];\n /**\n * An event occurs when the element is ready\n * @ko 해당 엘리먼트가 준비가 되었을 때 이벤트가 발생한다.\n * @event eg.ImReady#readyElement\n * @param {eg.ImReady.OnReadyElement} e - The object of data to be sent to an event 이벤트에 전달되는 데이터 객체\n * @example\n * ```html\n *
\n * \n * \n * \n *
\n * ```\n * ## Javascript\n * ```js\n * import ImReady from \"@egjs/imready\";\n *\n * const im = new ImReady(); // umd: eg.ImReady\n * im.check(document.querySelectorAll(\"img\")).on({\n * readyElement: e => {\n * // 1, 0, false, 3\n * // 2, 1, false, 3\n * // 3, 2, true, 3\n * console.log(e.readyCount, e.index, e.hasError, e.totalCount),\n * },\n * });\n * ```\n */\n this.trigger(new ComponentEvent(\"readyElement\", {\n index,\n element: info.element,\n\n hasError: info.hasError,\n errorCount: this.getErrorCount(),\n totalErrorCount: this.totalErrorCount,\n\n preReadyCount: this.preReadyCount,\n readyCount: this.readyCount,\n totalCount: this.totalCount,\n\n isPreReady: this.isPreReady(),\n isReady: this.isReady(),\n\n hasLoading: info.hasLoading,\n isPreReadyOver: this.isPreReadyOver,\n isSkip: info.isSkip,\n }));\n }\n private onReady() {\n /**\n * An event occurs when all element are ready\n * @ko 모든 엘리먼트들이 준비된 경우 이벤트가 발생한다.\n * @event eg.ImReady#ready\n * @param {eg.ImReady.OnReady} e - The object of data to be sent to an event 이벤트에 전달되는 데이터 객체\n * @example\n * ```html\n *
\n * \n * \n * \n *
\n * ```\n * ## Javascript\n * ```js\n * import ImReady from \"@egjs/imready\";\n *\n * const im = new ImReady(); // umd: eg.ImReady\n * im.check(document.querySelectorAll(\"img\")).on({\n * preReady: e => {\n * // 0, 3\n * console.log(e.readyCount, e.totalCount),\n * },\n * ready: e => {\n * // 1, 3\n * console.log(e.errorCount, e.totalCount),\n * },\n * });\n * ```\n */\n this.trigger(new ComponentEvent(\"ready\", {\n errorCount: this.getErrorCount(),\n totalErrorCount: this.totalErrorCount,\n totalCount: this.totalCount,\n }));\n }\n private getErrorCount() {\n return this.elementInfos.filter(info => info.hasError).length;\n }\n private hasLoading() {\n return this.elementInfos.some(info => info.hasLoading);\n }\n}\n\nexport default ImReadyManager;\n","/*\negjs-imready\nCopyright (c) 2020-present NAVER Corp.\nMIT license\n*/\nimport { IS_IE } from \"../consts\";\nimport Loader from \"./Loader\";\n\nexport default class ImageLoader extends Loader {\n public static EVENTS = [\"load\", \"error\"];\n public checkElement() {\n const element = this.element;\n const src = element.getAttribute(\"src\");\n\n if (element.complete) {\n if (src) {\n // complete\n if (!element.naturalWidth) {\n this.onAlreadyError(element);\n }\n return false;\n } else {\n // Using an external lazy loading module\n this.onAlreadyPreReady();\n }\n }\n this.addEvents();\n IS_IE && element.setAttribute(\"src\", src!);\n return true;\n }\n}\n","/*\negjs-imready\nCopyright (c) 2020-present NAVER Corp.\nMIT license\n*/\nimport Loader from \"./Loader\";\n\nexport default class VideoLoader extends Loader {\n public static EVENTS = [\"loadedmetadata\", \"error\"];\n public checkElement() {\n const element = this.element;\n // HAVE_NOTHING: 0, no information whether or not the audio/video is ready\n // HAVE_METADATA: 1, HAVE_METADATA - metadata for the audio/video is ready\n // HAVE_CURRENT_DATA: 2, data for the current playback position is available, but not enough data to play next frame/millisecond\n // HAVE_FUTURE_DATA: 3, data for the current and at least the next frame is available\n // HAVE_ENOUGH_DATA: 4, enough data available to start playing\n if (element.readyState >= 1) {\n return false;\n }\n if (element.error) {\n this.onAlreadyError(element);\n return false;\n }\n this.addEvents();\n return true;\n }\n}\n","/*\negjs-imready\nCopyright (c) 2020-present NAVER Corp.\nMIT license\n*/\nimport ImReadyManager from \"./ImReadyManager\";\nimport ImageLoader from \"./loaders/ImageLoader\";\nimport VideoLoader from \"./loaders/VideoLoader\";\nimport { ImReadyOptions } from \"./types\";\n\nclass ImReady extends ImReadyManager {\n constructor(options: Partial = {}) {\n super({\n loaders: {\n img: ImageLoader,\n video: VideoLoader,\n },\n ...options,\n });\n }\n}\n\nexport default ImReady;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\n/* eslint-disable @typescript-eslint/restrict-template-expressions */\n\n/**\n * Error codes of {@link FlickingError}. Below are the conditions where each error code occurs.\n * @ko {@link FlickingError}의 에러 코드. 아래는 각각의 에러 코드가 발생하는 조건입니다.\n * @name ERROR_CODE\n * @constant\n * @type object\n * @property {number} WRONG_TYPE Parameter type is wrong패러미터의 타입이 잘못되었을 경우\n * @property {number} ELEMENT_NOT_FOUND Element is not found inside page with the given CSS selector주어진 CSS selector로 페이지 내에서 해당 엘리먼트를 찾지 못했을 경우\n * @property {number} VAL_MUST_NOT_NULL Expected non-null value, but given `null` or `undefined`값을 기대했으나, `null`이나 `undefined`를 받은 경우\n * @property {number} NOT_ATTACHED_TO_FLICKING When Flicking's component is not initialized (i.e. {@link Flicking#init} is not called)Flicking 내부 컴포넌트가 초기화되지 않은 경우 ({@link Flicking#init}이 호출되지 않은 경우)\n * @property {number} WRONG_OPTION One of the options is wrong옵션들 중 잘못된 값이 있을 때\n * @property {number} INDEX_OUT_OF_RANGE When the given index is out of possible range인덱스가 주어진 범위를 벗어난 경우\n * @property {number} POSITION_NOT_REACHABLE When {@link Control#moveToPosition}'s position parameter is out of possible range.{@link Control#moveToPosition}의 `position` 패러미터가 도달 가능한 범위를 벗어난 경우\n * @property {number} TRANSFORM_NOT_SUPPORTED CSS `transform` property is not available(<=IE8) CSS `transform` 속성을 사용할 수 없는 경우(<=IE8)\n * @property {number} STOP_CALLED_BY_USER When the event's `stop()` is called by user.사용자에 의해 이벤트의 `stop()`이 호출된 경우\n * @property {number} ANIMATION_INTERRUPTED When the animation is interrupted by user.사용자에 의해 애니메이션이 중단된 경우\n * @property {number} ANIMATION_ALREADY_PLAYING When the animation is already playing.현재 애니메이션이 이미 진행중인 경우\n * @property {number} NOT_ALLOWED_IN_FRAMEWORK When the non-allowed method is called from frameworks (React, Angular, Vue...)\n * 프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우\n * @property {number} NOT_INITIALIZED When the {@link Flicking#init} is not called before but is needed{@link Flicking#init}의 호출이 필요하나, 아직 호출되지 않았을 경우\n * @property {number} NO_ACTIVE When there're no active panel that flicking has selected. This may be due to the absence of any panels현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다\n * @property {number} NOT_ALLOWED_IN_VIRTUAL When the non-allowed method is called while the virtual option is enabledvirtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우\n */\nexport const CODE = {\n WRONG_TYPE: 0,\n ELEMENT_NOT_FOUND: 1,\n VAL_MUST_NOT_NULL: 2,\n NOT_ATTACHED_TO_FLICKING: 3,\n WRONG_OPTION: 4,\n INDEX_OUT_OF_RANGE: 5,\n POSITION_NOT_REACHABLE: 6,\n TRANSFORM_NOT_SUPPORTED: 7,\n STOP_CALLED_BY_USER: 8,\n ANIMATION_INTERRUPTED: 9,\n ANIMATION_ALREADY_PLAYING: 10,\n NOT_ALLOWED_IN_FRAMEWORK: 11,\n NOT_INITIALIZED: 12,\n NO_ACTIVE: 13,\n NOT_ALLOWED_IN_VIRTUAL: 14\n} as const;\n\nexport const MESSAGE = {\n WRONG_TYPE: (wrongVal: any, correctTypes: string[]) => `${wrongVal}(${typeof wrongVal}) is not a ${correctTypes.map(type => `\"${type}\"`).join(\" or \")}.`,\n ELEMENT_NOT_FOUND: (selector: string) => `Element with selector \"${selector}\" not found.`,\n VAL_MUST_NOT_NULL: (val: any, name: string) => `${name} should be provided. Given: ${val}`,\n NOT_ATTACHED_TO_FLICKING: \"This module is not attached to the Flicking instance. \\\"init()\\\" should be called first.\",\n WRONG_OPTION: (optionName: string, val: any) => `Option \"${optionName}\" is not in correct format, given: ${val}`,\n INDEX_OUT_OF_RANGE: (val: number, min: number, max: number) => `Index \"${val}\" is out of range: should be between ${min} and ${max}.`,\n POSITION_NOT_REACHABLE: (position: number) => `Position \"${position}\" is not reachable.`,\n TRANSFORM_NOT_SUPPORTED: \"Browser does not support CSS transform.\",\n STOP_CALLED_BY_USER: \"Event stop() is called by user.\",\n ANIMATION_INTERRUPTED: \"Animation is interrupted by user input.\",\n ANIMATION_ALREADY_PLAYING: \"Animation is already playing.\",\n NOT_ALLOWED_IN_FRAMEWORK: \"This behavior is not allowed in the frameworks like React, Vue, or Angular.\",\n NOT_INITIALIZED: \"Flicking is not initialized yet, call init() first.\",\n NO_ACTIVE: \"There's no active panel that Flicking has selected. This may be due to the absence of any panels.\",\n NOT_ALLOWED_IN_VIRTUAL: \"This behavior is not allowed when the virtual option is enabled\"\n} as const;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { OnAnimationEnd, OnChange, OnFinish, OnHold, OnRelease } from \"@egjs/axes\";\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport Flicking from \"../../Flicking\";\nimport Panel from \"../../core/panel/Panel\";\nimport { EVENTS } from \"../../const/external\";\nimport * as AXES from \"../../const/axes\";\nimport { circulatePosition, getDirection } from \"../../utils\";\n\nexport enum STATE_TYPE {\n IDLE,\n HOLDING,\n DRAGGING,\n ANIMATING,\n DISABLED\n}\n\n/**\n * A component that shows the current status of the user input or the animation\n * @ko 현재 사용자 입력 또는 애니메이션 상태를 나타내는 컴포넌트\n * @internal\n */\nabstract class State {\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {boolean}\n * @readonly\n */\n public abstract readonly holding: boolean;\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {boolean}\n * @readonly\n */\n public abstract readonly animating: boolean;\n\n protected _delta: number = 0;\n protected _targetPanel: Panel | null = null;\n\n /**\n * A sum of delta values of change events from the last hold event of Axes\n * @ko 이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산\n * @type {number}\n * @readonly\n */\n public get delta() { return this._delta; }\n\n /**\n * A panel to set as {@link Control#activePanel} after the animation is finished\n * @ko 애니메이션 종료시 {@link Control#activePanel}로 설정할 패널\n * @type {number}\n * @readonly\n */\n public get targetPanel() { return this._targetPanel; }\n\n public set targetPanel(val: Panel | null) { this._targetPanel = val; }\n\n /**\n * An callback which is called when state has changed to this state\n * @ko 현재 상태로 돌입했을때 호출되는 콜백 함수\n * @param {State} prevState An previous state이전 상태값\n * @return {void}\n */\n public onEnter(prevState: State): void {\n this._delta = prevState._delta;\n this._targetPanel = prevState._targetPanel;\n }\n\n /**\n * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event\n * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트 핸들러\n * @param {object} [ctx] Event context이벤트 콘텍스트\n * @param {Flicking} [ctx.flicking] An instance of FlickingFlicking 인스턴스\n * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event of Axes\n * Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트\n * @param {function} [ctx.transitTo] A function for changing current state to other state다른 상태로 변경하기 위한 함수\n * @return {void}\n */\n public onHold(ctx: {\n flicking: Flicking;\n axesEvent: OnHold;\n transitTo: (nextState: STATE_TYPE) => State;\n }): void {\n // DO NOTHING\n }\n\n /**\n * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event\n * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트 핸들러\n * @param {object} [ctx] Event context이벤트 콘텍스트\n * @param {Flicking} [ctx.flicking] An instance of FlickingFlicking 인스턴스\n * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event of Axes\n * Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트\n * @param {function} [ctx.transitTo] A function for changing current state to other state다른 상태로 변경하기 위한 함수\n * @return {void}\n */\n public onChange(ctx: {\n flicking: Flicking;\n axesEvent: OnChange;\n transitTo: (nextState: STATE_TYPE) => State;\n }): void {\n // DO NOTHING\n }\n\n /**\n * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event\n * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트 핸들러\n * @param {object} [ctx] Event context이벤트 콘텍스트\n * @param {Flicking} [ctx.flicking] An instance of FlickingFlicking 인스턴스\n * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of Axes\n * Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트\n * @param {function} [ctx.transitTo] A function for changing current state to other state다른 상태로 변경하기 위한 함수\n * @return {void}\n */\n public onRelease(ctx: {\n flicking: Flicking;\n axesEvent: OnRelease;\n transitTo: (nextState: STATE_TYPE) => State;\n }): void {\n // DO NOTHING\n }\n\n /**\n * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} event\n * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} 이벤트 핸들러\n * @param {object} [ctx] Event context이벤트 콘텍스트\n * @param {Flicking} [ctx.flicking] An instance of FlickingFlicking 인스턴스\n * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} event of Axes\n * Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} 이벤트\n * @param {function} [ctx.transitTo] A function for changing current state to other state다른 상태로 변경하기 위한 함수\n * @return {void}\n */\n public onAnimationEnd(ctx: {\n flicking: Flicking;\n axesEvent: OnAnimationEnd;\n transitTo: (nextState: STATE_TYPE) => State;\n }): void {\n // DO NOTHING\n }\n\n /**\n * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event\n * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트 핸들러\n * @param {object} [ctx] Event context이벤트 콘텍스트\n * @param {Flicking} [ctx.flicking] An instance of FlickingFlicking 인스턴스\n * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event of AxesAxes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트\n * @param {function} [ctx.transitTo] A function for changing current state to other state다른 상태로 변경하기 위한 함수\n * @return {void}\n */\n public onFinish(ctx: {\n flicking: Flicking;\n axesEvent: OnFinish;\n transitTo: (nextState: STATE_TYPE) => State;\n }): void {\n // DO NOTHING\n }\n\n protected _moveToChangedPosition(ctx: Parameters[0]): void {\n const { flicking, axesEvent, transitTo } = ctx;\n const delta = axesEvent.delta[AXES.POSITION_KEY];\n\n if (!delta) {\n return;\n }\n\n this._delta += delta;\n\n const camera = flicking.camera;\n const prevPosition = camera.position;\n const position = axesEvent.pos[AXES.POSITION_KEY];\n const newPosition = flicking.circularEnabled\n ? circulatePosition(position, camera.range.min, camera.range.max)\n : position;\n\n camera.lookAt(newPosition);\n\n const moveEvent = new ComponentEvent(EVENTS.MOVE, {\n isTrusted: axesEvent.isTrusted,\n holding: this.holding,\n direction: getDirection(0, axesEvent.delta[AXES.POSITION_KEY]),\n axesEvent\n });\n\n flicking.trigger(moveEvent);\n\n if (moveEvent.isCanceled()) {\n // Return to previous position\n camera.lookAt(prevPosition);\n transitTo(STATE_TYPE.DISABLED);\n }\n }\n}\n\nexport default State;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nexport { CODE as ERROR_CODE } from \"./error\";\n\n/**\n * Event type object with event name strings of {@link Flicking}\n * @ko {@link Flicking}의 이벤트 이름 문자열들을 담은 객체\n * @type {object}\n * @property {\"holdStart\"} HOLD_START holdStart eventholdStart 이벤트\n * @property {\"holdEnd\"} HOLD_END holdEnd eventholdEnd 이벤트\n * @property {\"moveStart\"} MOVE_START moveStart eventmoveStart 이벤트\n * @property {\"move\"} MOVE move eventmove 이벤트\n * @property {\"moveEnd\"} MOVE_END moveEnd eventmoveEnd 이벤트\n * @property {\"willChange\"} WILL_CHANGE willChange eventwillChange 이벤트\n * @property {\"changed\"} CHANGED changed eventchanged 이벤트\n * @property {\"willRestore\"} WILL_RESTORE willRestore eventwillRestore 이벤트\n * @property {\"restored\"} RESTORED restored eventrestored 이벤트\n * @property {\"select\"} SELECT select eventselect 이벤트\n * @property {\"needPanel\"} NEED_PANEL needPanel eventneedPanel 이벤트\n * @property {\"panelChange\"} PANEL_CHANGE panelChange eventpanelChange 이벤트\n * @example\n * ```ts\n * import { EVENTS } from \"@egjs/flicking\";\n * EVENTS.MOVE_START; // \"moveStart\"\n * ```\n */\nexport const EVENTS = {\n READY: \"ready\",\n BEFORE_RESIZE: \"beforeResize\",\n AFTER_RESIZE: \"afterResize\",\n HOLD_START: \"holdStart\",\n HOLD_END: \"holdEnd\",\n MOVE_START: \"moveStart\",\n MOVE: \"move\",\n MOVE_END: \"moveEnd\",\n WILL_CHANGE: \"willChange\",\n CHANGED: \"changed\",\n WILL_RESTORE: \"willRestore\",\n RESTORED: \"restored\",\n SELECT: \"select\",\n NEED_PANEL: \"needPanel\",\n VISIBLE_CHANGE: \"visibleChange\",\n REACH_EDGE: \"reachEdge\",\n PANEL_CHANGE: \"panelChange\"\n} as const;\n\n/**\n * An object with all possible predefined literal string for the {@link Flicking#align align} option\n * @ko {@link Flicking#align align} 옵션에 사용되는 미리 정의된 리터럴 상수들을 담고 있는 객체\n * @type {object}\n * @property {\"prev\"} PREV left/top align좌/상 정렬\n * @property {\"center\"} CENTER center align중앙 정렬\n * @property {\"next\"} NEXT right/bottom align우/하 정렬\n */\nexport const ALIGN = {\n PREV: \"prev\",\n CENTER: \"center\",\n NEXT: \"next\"\n} as const;\n\n/**\n * An object of directions\n * @ko 방향을 나타내는 값들을 담고 있는 객체\n * @type {object}\n * @property {\"PREV\"} PREV \"left\" when {@link Flicking#horizontal horizontal} is true, and \"top\" when {@link Flicking#horizontal horizontal} is false\n * {@link Flicking#horizontal horizontal}가 `true`일 경우 왼쪽, {@link Flicking#horizontal horizontal}가 `false`일 경우 위쪽을 의미합니다\n * @property {\"NEXT\"} NEXT \"right\" when {@link Flicking#horizontal horizontal} is true, and \"bottom\" when {@link Flicking#horizontal horizontal} is false\n * {@link Flicking#horizontal horizontal}가 `true`일 경우 오른쪽, {@link Flicking#horizontal horizontal}가 `false`일 경우 아래쪽을 의미합니다\n * @property {null} NONE This value usually means it's the same position주로 제자리인 경우를 의미합니다\n */\nexport const DIRECTION = {\n PREV: \"PREV\",\n NEXT: \"NEXT\",\n NONE: null\n} as const;\n\n/**\n * An object with all possible {@link Flicking#moveType moveType}s\n * @ko Flicking이 제공하는 {@link Flicking#moveType moveType}들을 담고 있는 객체\n * @type {object}\n * @property {\"snap\"} SNAP Flicking's {@link Flicking#moveType moveType} that enables {@link SnapControl} as a Flicking's {@link Flicking#control control}\n * Flicking의 {@link Flicking#control control}을 {@link SnapControl}로 설정하게 하는 {@link Flicking#moveType moveType}\n * @property {\"freeScroll\"} FREE_SCROLL Flicking's {@link Flicking#moveType moveType} that enables {@link FreeControl} as a Flicking's {@link Flicking#control control}\n * Flicking의 {@link Flicking#control control}을 {@link FreeControl}로 설정하게 하는 {@link Flicking#moveType moveType}\n * @property {\"strict\"} STRICT Flicking's {@link Flicking#moveType moveType} that enables {@link StrictControl} as a Flicking's {@link Flicking#control control}\n * Flicking의 {@link Flicking#control control}을 {@link StrictControl}로 설정하게 하는 {@link Flicking#moveType moveType}\n */\nexport const MOVE_TYPE = {\n SNAP: \"snap\",\n FREE_SCROLL: \"freeScroll\",\n STRICT: \"strict\"\n} as const;\n\nexport const CLASS = {\n VERTICAL: \"vertical\",\n HIDDEN: \"flicking-hidden\",\n DEFAULT_VIRTUAL: \"flicking-panel\"\n};\n\n/**\n * An object with all possible {@link Flicking#circularFallback circularFallback}s\n * @ko Flicking의 {@link Flicking#circularFallback circularFallback}에 설정 가능한 값들을 담고 있는 객체\n * @type {object}\n * @property {string} LINEAR \"linear\"\n * @property {string} BOUND \"bound\"\n */\nexport const CIRCULAR_FALLBACK = {\n LINEAR: \"linear\",\n BOUND: \"bound\"\n} as const;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\n\nimport { setPrototypeOf } from \"../utils\";\n\n/**\n * Special type of known error that {@link Flicking} throws.\n * @ko Flicking 내부에서 알려진 오류 발생시 throw되는 에러\n * @property {number} code Error code에러 코드\n * @property {string} message Error message에러 메시지\n * @see {@link ERROR_CODE ERROR_CODE}\n * @example\n * ```ts\n * import Flicking, { FlickingError, ERROR_CODES } from \"@egjs/flicking\";\n * try {\n * const flicking = new Flicking(\".flicking-viewport\")\n * } catch (e) {\n * if (e instanceof FlickingError && e.code === ERROR_CODES.ELEMENT_NOT_FOUND) {\n * console.error(\"Element not found\")\n * }\n * }\n * ```\n */\nclass FlickingError extends Error {\n public code: number;\n\n /**\n * @param message Error message에러 메시지\n * @param code Error code에러 코드\n */\n public constructor(message: string, code: number) {\n super(message);\n\n setPrototypeOf(this, FlickingError.prototype);\n this.name = \"FlickingError\";\n this.code = code;\n }\n}\n\nexport default FlickingError;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"../Flicking\";\nimport { getElementSize, getStyle, isString } from \"../utils\";\n\n/**\n * A component that manages viewport size\n * @ko 뷰포트 크기 정보를 담당하는 컴포넌트\n */\nclass Viewport {\n private _flicking: Flicking;\n private _el: HTMLElement;\n private _width: number;\n private _height: number;\n private _isBorderBoxSizing: boolean;\n private _padding: {\n left: number;\n right: number;\n top: number;\n bottom: number;\n };\n\n /**\n * A viewport(root) element\n * @ko 뷰포트(root) 엘리먼트\n * @type {HTMLElement}\n * @readonly\n */\n public get element() { return this._el; }\n\n /**\n * Viewport width, without paddings\n * @ko 뷰포트 너비\n * @type {number}\n * @readonly\n */\n public get width() { return this._width - this._padding.left - this._padding.right; }\n /**\n * Viewport height, without paddings\n * @ko 뷰포트 높이\n * @type {number}\n * @readonly\n */\n public get height() { return this._height - this._padding.top - this._padding.bottom; }\n /**\n * Viewport paddings\n * @ko 뷰포트 CSS padding 값\n * @type {object}\n * @property {number} left CSS `padding-left`\n * @property {number} right CSS `padding-right`\n * @property {number} top CSS `padding-top`\n * @property {number} bottom CSS `padding-bottom`\n * @readonly\n */\n public get padding() { return this._padding; }\n\n /**\n * @param el A viewport element뷰포트 엘리먼트\n */\n public constructor(flicking: Flicking, el: HTMLElement) {\n this._flicking = flicking;\n this._el = el;\n this._width = 0;\n this._height = 0;\n this._padding = {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0\n };\n this._isBorderBoxSizing = false;\n }\n\n /**\n * Change viewport's size.\n * This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property\n * @ko 뷰포트 크기를 변경합니다.\n * `.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다\n * @param {object} [size] New viewport size새 뷰포트 크기\n * @param {number|string} [size.width] CSS string or number(in px)CSS 문자열 또는 숫자(px)\n * @param {number|string} [size.height] CSS string or number(in px)CSS 문자열 또는 숫자(px)\n */\n public setSize({\n width,\n height\n }: Partial<{\n width: number | string;\n height: number | string;\n }>) {\n const el = this._el;\n const padding = this._padding;\n const isBorderBoxSizing = this._isBorderBoxSizing;\n\n if (width != null) {\n if (isString(width)) {\n el.style.width = width;\n } else {\n const newWidth = isBorderBoxSizing\n ? width + padding.left + padding.right\n : width;\n el.style.width = `${newWidth}px`;\n }\n }\n if (height != null) {\n if (isString(height)) {\n el.style.height = height;\n } else {\n const newHeight = isBorderBoxSizing\n ? height + padding.top + padding.bottom\n : height;\n el.style.height = `${newHeight}px`;\n }\n }\n this.resize();\n }\n\n /**\n * Update width/height to the current viewport element's size\n * @ko 현재 뷰포트 엘리먼트의 크기로 너비/높이를 업데이트합니다\n */\n public resize() {\n const el = this._el;\n const elStyle = getStyle(el);\n const {\n useFractionalSize\n } = this._flicking;\n\n this._width = getElementSize({\n el,\n horizontal: true,\n useFractionalSize,\n useOffset: false,\n style: elStyle\n });\n this._height = getElementSize({\n el,\n horizontal: false,\n useFractionalSize,\n useOffset: false,\n style: elStyle\n });\n\n this._padding = {\n left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,\n right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,\n top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,\n bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0\n };\n this._isBorderBoxSizing = elStyle.boxSizing === \"border-box\";\n }\n}\n\nexport default Viewport;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"../Flicking\";\n\nclass AutoResizer {\n private _flicking: Flicking;\n private _enabled: boolean;\n private _resizeObserver: ResizeObserver | null;\n private _resizeTimer: number;\n private _maxResizeDebounceTimer: number;\n\n public get enabled() { return this._enabled; }\n\n public constructor(flicking: Flicking) {\n this._flicking = flicking;\n this._enabled = false;\n this._resizeObserver = null;\n this._resizeTimer = -1;\n this._maxResizeDebounceTimer = -1;\n }\n\n public enable(): this {\n const flicking = this._flicking;\n const viewport = flicking.viewport;\n\n if (this._enabled) {\n this.disable();\n }\n\n if (flicking.useResizeObserver && !!window.ResizeObserver) {\n const viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;\n\n const resizeObserver = viewportSizeNot0\n ? new ResizeObserver(this._skipFirstResize)\n : new ResizeObserver(this._onResize);\n\n resizeObserver.observe(flicking.viewport.element);\n\n this._resizeObserver = resizeObserver;\n } else {\n window.addEventListener(\"resize\", this._onResize);\n }\n\n this._enabled = true;\n\n return this;\n }\n\n public disable(): this {\n if (!this._enabled) return this;\n\n const resizeObserver = this._resizeObserver;\n if (resizeObserver) {\n resizeObserver.disconnect();\n this._resizeObserver = null;\n } else {\n window.removeEventListener(\"resize\", this._onResize);\n }\n\n this._enabled = false;\n\n return this;\n }\n\n private _onResize = () => {\n const flicking = this._flicking;\n const resizeDebounce = flicking.resizeDebounce;\n const maxResizeDebounce = flicking.maxResizeDebounce;\n\n if (resizeDebounce <= 0) {\n void flicking.resize();\n } else {\n if (this._maxResizeDebounceTimer <= 0) {\n if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {\n this._maxResizeDebounceTimer = window.setTimeout(this._doScheduledResize, maxResizeDebounce);\n }\n }\n\n if (this._resizeTimer > 0) {\n clearTimeout(this._resizeTimer);\n this._resizeTimer = 0;\n }\n\n this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);\n }\n };\n\n private _doScheduledResize = () => {\n clearTimeout(this._resizeTimer);\n clearTimeout(this._maxResizeDebounceTimer);\n\n this._maxResizeDebounceTimer = -1;\n this._resizeTimer = -1;\n\n void this._flicking.resize();\n };\n\n // eslint-disable-next-line @typescript-eslint/member-ordering\n private _skipFirstResize = (() => {\n let isFirstResize = true;\n\n return (() => {\n if (isFirstResize) {\n isFirstResize = false;\n return;\n }\n this._onResize();\n });\n })();\n}\n\nexport default AutoResizer;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"../../../Flicking\";\n\nimport ElementProvider from \"./ElementProvider\";\n\n/**\n * @internal\n */\nclass VanillaElementProvider implements ElementProvider {\n private _element: HTMLElement;\n private _rendered: boolean;\n\n public get element() { return this._element; }\n public get rendered() { return this._rendered; }\n\n public constructor(element: HTMLElement) {\n this._element = element;\n this._rendered = true;\n }\n\n public show(flicking: Flicking): void {\n const el = this.element;\n const cameraEl = flicking.camera.element;\n\n if (el.parentElement !== cameraEl) {\n cameraEl.appendChild(el);\n this._rendered = true;\n }\n }\n\n public hide(flicking: Flicking): void {\n const el = this.element;\n const cameraEl = flicking.camera.element;\n\n if (el.parentElement === cameraEl) {\n cameraEl.removeChild(el);\n this._rendered = false;\n }\n }\n}\n\nexport default VanillaElementProvider;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\n\nimport Flicking from \"../../../Flicking\";\nimport VirtualPanel from \"../VirtualPanel\";\n\nimport ElementProvider from \"./ElementProvider\";\n\n/**\n * @internal\n */\nclass VirtualElementProvider implements ElementProvider {\n private _flicking: Flicking;\n private _panel: VirtualPanel;\n\n public get element() { return this._virtualElement.nativeElement; }\n public get rendered() { return this._virtualElement.visible; }\n\n private get _virtualElement() {\n const flicking = this._flicking;\n const elIndex = this._panel.elementIndex;\n const virtualElements = flicking.virtual.elements;\n\n return virtualElements[elIndex];\n }\n\n public constructor(flicking: Flicking) {\n this._flicking = flicking;\n }\n\n public init(panel: VirtualPanel) {\n this._panel = panel;\n }\n\n public show(): void {\n // DO_NOTHING\n // Actual element visibility is controlled by VirtualManager\n }\n\n public hide(): void {\n // DO_NOTHING\n // Actual element visibility is controlled by VirtualManager\n }\n}\n\nexport default VirtualElementProvider;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"../Flicking\";\nimport { range } from \"../utils\";\nimport { CLASS } from \"../const/external\";\n\nimport VirtualPanel from \"./panel/VirtualPanel\";\n\nexport interface VirtualOptions {\n renderPanel: (panel: VirtualPanel, index: number) => string;\n initialPanelCount: number;\n cache?: boolean;\n panelClass?: string;\n}\n\n/**\n * A manager class to add / remove virtual panels\n */\nclass VirtualManager {\n private _flicking: Flicking;\n\n private _renderPanel: (panel: VirtualPanel, index: number) => string;\n private _initialPanelCount: number;\n private _cache: boolean;\n private _panelClass: string;\n\n private _elements: Array<{ nativeElement: HTMLElement; visible: boolean }>;\n\n public get elements() { return this._elements; }\n\n // Options\n /**\n * A rendering function for the panel element's innerHTML\n * @ko 패널 엘리먼트의 innerHTML을 렌더링하는 함수\n * @type {function}\n * @param {VirtualPanel} panel Instance of the panel패널 인스턴스\n * @param {number} index Index of the panel패널 인덱스\n * @default \"() => {}\"\n */\n public get renderPanel() { return this._renderPanel; }\n /**\n * Initial panel count to render\n * @ko 최초로 렌더링할 패널의 개수\n * @readonly\n * @type {number}\n * @default -1\n */\n public get initialPanelCount() { return this._initialPanelCount; }\n /**\n * Whether to cache rendered panel's innerHTML\n * @ko 렌더링된 패널의 innerHTML 정보를 캐시할지 여부\n * @type {boolean}\n * @default false\n */\n public get cache() { return this._cache; }\n /**\n * The class name that will be applied to rendered panel elements\n * @ko 렌더링되는 패널 엘리먼트에 적용될 클래스 이름\n * @type {string}\n * @default \"flicking-panel\"\n */\n public get panelClass() { return this._panelClass; }\n\n public set renderPanel(val: VirtualOptions[\"renderPanel\"]) {\n this._renderPanel = val;\n this._flicking.renderer.panels.forEach((panel: VirtualPanel) => panel.uncacheRenderResult());\n }\n\n public set cache(val: NonNullable) { this._cache = val; }\n public set panelClass(val: NonNullable) { this._panelClass = val; }\n\n public constructor(flicking: Flicking, options: VirtualOptions | null) {\n this._flicking = flicking;\n\n this._renderPanel = options?.renderPanel ?? (() => \"\");\n this._initialPanelCount = options?.initialPanelCount ?? -1;\n this._cache = options?.cache ?? false;\n this._panelClass = options?.panelClass ?? CLASS.DEFAULT_VIRTUAL;\n\n this._elements = [];\n }\n\n public init() {\n const flicking = this._flicking;\n\n if (!flicking.virtualEnabled) return;\n\n if (!flicking.externalRenderer && !flicking.renderExternal) {\n this._initVirtualElements();\n }\n\n const virtualElements = flicking.camera.children;\n this._elements = virtualElements.map(el => ({ nativeElement: el, visible: true }));\n }\n\n public show(index: number) {\n const el = this._elements[index];\n const nativeEl = el.nativeElement;\n\n el.visible = true;\n\n if (nativeEl.style.display) {\n nativeEl.style.display = \"\";\n }\n }\n\n public hide(index: number) {\n const el = this._elements[index];\n const nativeEl = el.nativeElement;\n\n el.visible = false;\n nativeEl.style.display = \"none\";\n }\n\n /**\n * Add new virtual panels at the end of the list\n * @ko 새로운 가상 패널들을 리스트의 끝에 추가합니다\n * @param {number} count The number of panels to add추가할 패널의 개수\n * @returns {Array} The new panels added새롭게 추가된 패널들\n */\n public append(count: number = 1): VirtualPanel[] {\n const flicking = this._flicking;\n\n return this.insert(flicking.panels.length, count);\n }\n\n /**\n * Add new virtual panels at the start of the list\n * @ko 새로운 가상 패널들을 리스트의 시작에 추가합니다\n * @param {number} count The number of panels to add추가할 패널의 개수\n * @returns {Array} The new panels added새롭게 추가된 패널들\n */\n public prepend(count: number = 1): VirtualPanel[] {\n return this.insert(0, count);\n }\n\n /**\n * Add new virtual panels at the given index\n * @ko 새로운 가상 패널들을 주어진 인덱스에 추가합니다\n * @param {number} count The number of panels to add추가할 패널의 개수\n * @returns {Array} The new panels added새롭게 추가된 패널들\n */\n public insert(index: number, count: number = 1): VirtualPanel[] {\n if (count <= 0) return [];\n\n const flicking = this._flicking;\n\n return flicking.renderer.batchInsert({ index, elements: range(count), hasDOMInElements: false }) as VirtualPanel[];\n }\n\n /**\n * Remove panels at the given index\n * @ko 주어진 인덱스에서 패널들을 삭제합니다\n * @param {number} count The number of panels to remove삭제할 패널의 개수\n * @returns {Array} The panels removed삭제된 패널들\n */\n public remove(index: number, count: number): VirtualPanel[] {\n if (count <= 0) return [];\n\n const flicking = this._flicking;\n\n return flicking.renderer.batchRemove({ index, deleteCount: count, hasDOMInElements: false }) as VirtualPanel[];\n }\n\n private _initVirtualElements() {\n const flicking = this._flicking;\n const cameraElement = flicking.camera.element;\n const panelsPerView = flicking.panelsPerView;\n const fragment = document.createDocumentFragment();\n\n const newElements = range(panelsPerView + 1).map(idx => {\n const panelEl = document.createElement(\"div\");\n panelEl.className = this._panelClass;\n panelEl.dataset.elementIndex = idx.toString();\n return panelEl;\n });\n\n newElements.forEach(el => {\n fragment.appendChild(el);\n });\n\n cameraElement.appendChild(fragment);\n }\n}\n\nexport default VirtualManager;\n","/**\n * All possible @egjs/axes event keys\n * @internal\n */\nexport const EVENT = {\n HOLD: \"hold\",\n CHANGE: \"change\",\n RELEASE: \"release\",\n ANIMATION_END: \"animationEnd\",\n FINISH: \"finish\"\n} as const;\n\n/**\n * An Axis key that Flicking uses\n * @internal\n */\nexport const POSITION_KEY = \"flick\";\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport { EVENTS } from \"../../const/external\";\nimport { getDirection } from \"../../utils\";\n\nimport State, { STATE_TYPE } from \"./State\";\n\n/**\n * A default state when there's no user input and no animation's playing\n * @ko 사용자의 입력이 없고, 애니메이션이 동작하고있지 않은 기본 상태\n * @internal\n */\nclass IdleState extends State {\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {false}\n * @readonly\n */\n public readonly holding = false;\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {false}\n * @readonly\n */\n public readonly animating = false;\n\n public onEnter() {\n this._delta = 0;\n this._targetPanel = null;\n }\n\n public onHold(ctx: Parameters[0]): void {\n // Shouldn't do any action until any panels on flicking area\n const { flicking, axesEvent, transitTo } = ctx;\n\n if (flicking.renderer.panelCount <= 0) {\n transitTo(STATE_TYPE.DISABLED);\n return;\n }\n\n const holdStartEvent = new ComponentEvent(EVENTS.HOLD_START, {\n axesEvent\n });\n\n flicking.trigger(holdStartEvent);\n\n if (holdStartEvent.isCanceled()) {\n transitTo(STATE_TYPE.DISABLED);\n } else {\n transitTo(STATE_TYPE.HOLDING);\n }\n }\n\n // By methods call\n public onChange(ctx: Parameters[0]): void {\n const { flicking, axesEvent, transitTo } = ctx;\n const controller = flicking.control.controller;\n const animatingContext = controller.animatingContext;\n\n const moveStartEvent = new ComponentEvent(EVENTS.MOVE_START, {\n isTrusted: axesEvent.isTrusted,\n holding: this.holding,\n direction: getDirection(animatingContext.start, animatingContext.end),\n axesEvent\n });\n flicking.trigger(moveStartEvent);\n\n if (moveStartEvent.isCanceled()) {\n transitTo(STATE_TYPE.DISABLED);\n } else {\n // Trigger AnimatingState's onChange, to trigger \"move\" event immediately\n transitTo(STATE_TYPE.ANIMATING).onChange(ctx);\n }\n }\n}\n\nexport default IdleState;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { OnRelease } from \"@egjs/axes\";\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport Panel from \"../../core/panel/Panel\";\nimport { EVENTS } from \"../../const/external\";\nimport { getDirection } from \"../../utils\";\n\nimport State, { STATE_TYPE } from \"./State\";\n\n/**\n * A state that activates when user's holding the Flicking area, but not moved a single pixel yet\n * @ko 사용자의 입력이 시작되었으나, 아직 움직이지는 않은 상태\n * @internal\n */\nclass HoldingState extends State {\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {true}\n * @readonly\n */\n public readonly holding = true;\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {false}\n * @readonly\n */\n public readonly animating = false;\n\n private _releaseEvent: OnRelease | null = null;\n\n public onChange(ctx: Parameters[0]): void {\n const { flicking, axesEvent, transitTo } = ctx;\n\n const inputEvent = axesEvent.inputEvent as { offsetX: number; offsetY: number };\n\n const offset = flicking.horizontal\n ? inputEvent.offsetX\n : inputEvent.offsetY;\n\n const moveStartEvent = new ComponentEvent(EVENTS.MOVE_START, {\n isTrusted: axesEvent.isTrusted,\n holding: this.holding,\n direction: getDirection(0, -offset),\n axesEvent\n });\n flicking.trigger(moveStartEvent);\n\n if (moveStartEvent.isCanceled()) {\n transitTo(STATE_TYPE.DISABLED);\n } else {\n // Trigger DraggingState's onChange, to trigger \"move\" event immediately\n transitTo(STATE_TYPE.DRAGGING).onChange(ctx);\n }\n }\n\n public onRelease(ctx: Parameters[0]): void {\n const { flicking, axesEvent, transitTo } = ctx;\n\n flicking.trigger(new ComponentEvent(EVENTS.HOLD_END, { axesEvent }));\n\n if (axesEvent.delta.flick !== 0) {\n // Sometimes \"release\" event on axes triggered before \"change\" event\n // Especially if user flicked panel fast in really short amount of time\n // if delta is not zero, that means above case happened.\n\n // Event flow should be HOLD_START -> MOVE_START -> MOVE -> HOLD_END\n // At least one move event should be included between holdStart and holdEnd\n axesEvent.setTo({ flick: flicking.camera.position }, 0);\n transitTo(STATE_TYPE.IDLE);\n return;\n }\n\n // Can't handle select event here,\n // As \"finish\" axes event happens\n this._releaseEvent = axesEvent;\n }\n\n public onFinish(ctx: Parameters[0]): void {\n const { flicking, transitTo } = ctx;\n\n // Should transite to IDLE state before select event\n // As user expects hold is already finished\n transitTo(STATE_TYPE.IDLE);\n\n if (!this._releaseEvent) {\n return;\n }\n\n // Handle release event here\n // To prevent finish event called twice\n const releaseEvent = this._releaseEvent;\n\n // Static click\n /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */\n const srcEvent = releaseEvent.inputEvent.srcEvent;\n\n let clickedElement: HTMLElement;\n if (srcEvent.type === \"touchend\") {\n const touchEvent = srcEvent as TouchEvent;\n const touch = touchEvent.changedTouches[0];\n clickedElement = document.elementFromPoint(touch.clientX, touch.clientY) as HTMLElement;\n } else {\n clickedElement = srcEvent.target;\n }\n /* eslint-enable */\n\n const panels = flicking.renderer.panels;\n let clickedPanel: Panel | null = null;\n\n for (const panel of panels) {\n if (panel.contains(clickedElement)) {\n clickedPanel = panel;\n break;\n }\n }\n\n if (clickedPanel) {\n const cameraPosition = flicking.camera.position;\n const clickedPanelPosition = clickedPanel.position;\n\n flicking.trigger(new ComponentEvent(EVENTS.SELECT, {\n index: clickedPanel.index,\n panel: clickedPanel,\n // Direction to the clicked panel\n direction: getDirection(cameraPosition, clickedPanelPosition)\n }));\n }\n }\n}\n\nexport default HoldingState;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport { EVENTS } from \"../../const/external\";\nimport * as AXES from \"../../const/axes\";\n\nimport State, { STATE_TYPE } from \"./State\";\n\n/**\n * A state that activates when user's dragging the Flicking area\n * @ko 사용자가 드래깅중인 상태\n * @internal\n */\nclass DraggingState extends State {\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {true}\n * @readonly\n */\n public readonly holding = true;\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {true}\n * @readonly\n */\n public readonly animating = true;\n\n public onChange(ctx: Parameters[0]): void {\n this._moveToChangedPosition(ctx);\n }\n\n public onRelease(ctx: Parameters[0]) {\n const { flicking, axesEvent, transitTo } = ctx;\n\n // Update last position to cope with Axes's animating behavior\n // Axes uses start position when animation start\n flicking.trigger(new ComponentEvent(EVENTS.HOLD_END, {\n axesEvent\n }));\n\n if (flicking.renderer.panelCount <= 0) {\n // There're no panels\n transitTo(STATE_TYPE.IDLE);\n return;\n }\n\n transitTo(STATE_TYPE.ANIMATING);\n\n const control = flicking.control;\n const position = axesEvent.destPos[AXES.POSITION_KEY];\n const duration = Math.max(axesEvent.duration, flicking.duration);\n\n try {\n void control.moveToPosition(position, duration, axesEvent);\n } catch (err) {\n transitTo(STATE_TYPE.IDLE);\n axesEvent.setTo({ [AXES.POSITION_KEY]: flicking.camera.position }, 0);\n }\n }\n}\n\nexport default DraggingState;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport { EVENTS } from \"../../const/external\";\nimport { getDirection } from \"../../utils\";\n\nimport State, { STATE_TYPE } from \"./State\";\n\n/**\n * A state that activates when Flicking's animating by user input or method call\n * @ko 사용자 입력이나 메소드 호출에 의해 Flicking의 애니메이션이 동작중인 상태\n * @internal\n */\nclass AnimatingState extends State {\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {false}\n * @readonly\n */\n public readonly holding = false;\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {true}\n * @readonly\n */\n public readonly animating = true;\n\n public onHold(ctx: Parameters[0]): void {\n const { flicking, axesEvent, transitTo } = ctx;\n const targetPanel = this._targetPanel;\n const control = flicking.control;\n\n this._delta = 0;\n flicking.control.updateInput();\n\n if (flicking.changeOnHold && targetPanel) {\n control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);\n }\n\n const holdStartEvent = new ComponentEvent(EVENTS.HOLD_START, { axesEvent });\n flicking.trigger(holdStartEvent);\n\n if (holdStartEvent.isCanceled()) {\n transitTo(STATE_TYPE.DISABLED);\n } else {\n transitTo(STATE_TYPE.DRAGGING);\n }\n }\n\n public onChange(ctx: Parameters[0]): void {\n this._moveToChangedPosition(ctx);\n }\n\n public onFinish(ctx: Parameters[0]) {\n const { flicking, axesEvent, transitTo } = ctx;\n\n const control = flicking.control;\n const controller = control.controller;\n const animatingContext = controller.animatingContext;\n\n transitTo(STATE_TYPE.IDLE);\n\n flicking.trigger(new ComponentEvent(EVENTS.MOVE_END, {\n isTrusted: axesEvent.isTrusted,\n direction: getDirection(animatingContext.start, animatingContext.end),\n axesEvent\n }));\n\n const targetPanel = this._targetPanel;\n if (targetPanel) {\n control.setActive(targetPanel, control.activePanel, axesEvent.isTrusted);\n }\n }\n}\n\nexport default AnimatingState;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport State, { STATE_TYPE } from \"./State\";\n\n/**\n * A state that activates when Flicking is stopped by event's `stop` method\n * @ko 이벤트의 `stop`호출에 의해 Flicking이 정지된 상태\n * @internal\n */\nclass DisabledState extends State {\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {false}\n * @readonly\n */\n public readonly holding = false;\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {true}\n * @readonly\n */\n public readonly animating = true;\n\n public onAnimationEnd(ctx: Parameters[0]): void {\n const { transitTo } = ctx;\n\n transitTo(STATE_TYPE.IDLE);\n }\n\n public onChange(ctx: Parameters[0]): void {\n const { axesEvent, transitTo } = ctx;\n\n // Can stop Axes's change event\n axesEvent.stop();\n\n transitTo(STATE_TYPE.IDLE);\n }\n\n public onRelease(ctx: Parameters[0]): void {\n const { axesEvent, transitTo } = ctx;\n\n // This is needed when stopped hold start event\n if (axesEvent.delta.flick === 0) {\n transitTo(STATE_TYPE.IDLE);\n }\n }\n}\n\nexport default DisabledState;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { AxesEvents } from \"@egjs/axes\";\n\nimport Flicking from \"../Flicking\";\nimport * as AXES from \"../const/axes\";\n\nimport IdleState from \"./states/IdleState\";\nimport HoldingState from \"./states/HoldingState\";\nimport DraggingState from \"./states/DraggingState\";\nimport AnimatingState from \"./states/AnimatingState\";\nimport DisabledState from \"./states/DisabledState\";\nimport State, { STATE_TYPE } from \"./states/State\";\n\n/**\n * @internal\n */\nclass StateMachine {\n private _state: State;\n\n public get state(): State { return this._state; }\n\n public constructor() {\n this._state = new IdleState();\n }\n\n public fire(eventType: keyof AxesEvents, externalCtx: {\n flicking: Flicking;\n axesEvent: any;\n }) {\n const currentState = this._state;\n const ctx = { ...externalCtx, transitTo: this.transitTo };\n\n switch (eventType) {\n case AXES.EVENT.HOLD:\n currentState.onHold(ctx);\n break;\n case AXES.EVENT.CHANGE:\n currentState.onChange(ctx);\n break;\n case AXES.EVENT.RELEASE:\n currentState.onRelease(ctx);\n break;\n case AXES.EVENT.ANIMATION_END:\n currentState.onAnimationEnd(ctx);\n break;\n case AXES.EVENT.FINISH:\n currentState.onFinish(ctx);\n break;\n }\n }\n\n public transitTo = (nextStateType: STATE_TYPE): State => {\n let nextState: State;\n\n switch (nextStateType) {\n case STATE_TYPE.IDLE:\n nextState = new IdleState();\n break;\n case STATE_TYPE.HOLDING:\n nextState = new HoldingState();\n break;\n case STATE_TYPE.DRAGGING:\n nextState = new DraggingState();\n break;\n case STATE_TYPE.ANIMATING:\n nextState = new AnimatingState();\n break;\n case STATE_TYPE.DISABLED:\n nextState = new DisabledState();\n break;\n }\n\n nextState.onEnter(this._state);\n\n this._state = nextState;\n\n return this._state;\n };\n}\n\nexport default StateMachine;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Axes, { PanInput, AxesEvents, OnRelease } from \"@egjs/axes\";\n\nimport Flicking from \"../Flicking\";\nimport FlickingError from \"../core/FlickingError\";\nimport * as AXES from \"../const/axes\";\nimport * as ERROR from \"../const/error\";\nimport { circulatePosition, getFlickingAttached, parseBounce } from \"../utils\";\nimport { ControlParams } from \"../type/external\";\n\nimport StateMachine from \"./StateMachine\";\n\n/**\n * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events\n * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트\n * @internal\n */\nclass AxesController {\n private _flicking: Flicking | null;\n private _axes: Axes | null;\n private _panInput: PanInput | null;\n private _stateMachine: StateMachine;\n\n private _animatingContext: { start: number; end: number; offset: number };\n private _dragged: boolean;\n\n /**\n * An {@link https://naver.github.io/egjs-axes/docs/api/Axes Axes} instance\n * @ko {@link https://naver.github.io/egjs-axes/docs/api/Axes Axes}의 인스턴스\n * @type {Axes | null}\n * @see https://naver.github.io/egjs-axes/docs/api/Axes\n * @readonly\n */\n public get axes() { return this._axes; }\n /**\n * An {@link https://naver.github.io/egjs-axes/docs/api/PanInput PanInput} instance\n * @ko {@link https://naver.github.io/egjs-axes/docs/api/PanInput PanInput}의 인스턴스\n * @type {PanInput | null}\n * @see https://naver.github.io/egjs-axes/docs/api/PanInput\n * @readonly\n */\n public get panInput() { return this._panInput; }\n /**\n * @internal\n */\n public get stateMachine() { return this._stateMachine; }\n /**\n * A activated {@link State} that shows the current status of the user input or the animation\n * @ko 현재 활성화된 {@link State} 인스턴스로 사용자 입력 또는 애니메이션 상태를 나타냅니다\n * @type {State}\n */\n public get state() { return this._stateMachine.state; }\n /**\n * A context of the current animation playing\n * @ko 현재 재생중인 애니메이션 정보\n * @type {object}\n * @property {number} start A start position of the animation애니메이션 시작 지점\n * @property {number} end A end position of the animation애니메이션 끝 지점\n * @property {number} offset camera offset카메라 오프셋\n * @readonly\n */\n public get animatingContext() { return this._animatingContext; }\n /**\n * A current control parameters of the Axes instance\n * @ko 활성화된 현재 Axes 패러미터들\n * @type {ControlParams}\n */\n public get controlParams(): ControlParams {\n const axes = this._axes;\n\n if (!axes) {\n return {\n range: { min: 0, max: 0 },\n position: 0,\n circular: false\n };\n }\n\n const axis = axes.axis[AXES.POSITION_KEY];\n\n return {\n range: { min: axis.range![0], max: axis.range![1] },\n circular: (axis.circular as boolean[])[0],\n position: this.position\n };\n }\n\n /**\n * A Boolean indicating whether the user input is enabled\n * @ko 현재 사용자 입력이 활성화되었는지를 나타내는 값\n * @type {boolean}\n * @readonly\n */\n public get enabled() { return this._panInput?.isEnabled() ?? false; }\n /**\n * Current position value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance\n * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 좌표 값\n * @type {number}\n * @readonly\n */\n public get position() { return this._axes?.get([AXES.POSITION_KEY])[AXES.POSITION_KEY] ?? 0; }\n /**\n * Current range value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance\n * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 이동 범위 값\n * @type {number[]}\n * @readonly\n */\n public get range() { return this._axes?.axis[AXES.POSITION_KEY].range ?? [0, 0]; }\n /**\n * Actual bounce size(px)\n * @ko 적용된 bounce 크기(px 단위)\n * @type {number[]}\n * @readonly\n */\n public get bounce() { return this._axes?.axis[AXES.POSITION_KEY].bounce as number[] | undefined; }\n\n /** */\n public constructor() {\n this._resetInternalValues();\n this._stateMachine = new StateMachine();\n }\n\n /**\n * Initialize AxesController\n * @ko AxesController를 초기화합니다\n * @param {Flicking} flicking An instance of Flicking\n * @chainable\n * @return {this}\n */\n public init(flicking: Flicking): this {\n this._flicking = flicking;\n\n this._axes = new Axes({\n [AXES.POSITION_KEY]: {\n range: [0, 0],\n circular: false,\n bounce: [0, 0]\n }\n }, {\n deceleration: flicking.deceleration,\n interruptable: flicking.interruptable,\n nested: flicking.nested,\n easing: flicking.easing\n });\n this._panInput = new PanInput(flicking.viewport.element, {\n inputType: flicking.inputType,\n threshold: 1,\n iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,\n scale: flicking.horizontal ? [-1, 0] : [0, -1],\n releaseOnScroll: true\n });\n\n const axes = this._axes;\n\n axes.connect(flicking.horizontal ? [AXES.POSITION_KEY, \"\"] : [\"\", AXES.POSITION_KEY], this._panInput);\n\n for (const key in AXES.EVENT) {\n const eventType = AXES.EVENT[key] as keyof AxesEvents;\n\n axes.on(eventType, (e: AxesEvents[typeof eventType]) => {\n this._stateMachine.fire(eventType, {\n flicking,\n axesEvent: e\n });\n });\n }\n\n return this;\n }\n\n /**\n * Destroy AxesController and return to initial state\n * @ko AxesController를 초기 상태로 되돌립니다\n * @return {void}\n */\n public destroy(): void {\n if (this._axes) {\n this.removePreventClickHandler();\n this._axes.destroy();\n }\n\n this._panInput?.destroy();\n\n this._resetInternalValues();\n }\n\n /**\n * Enable input from the user (mouse/touch)\n * @ko 사용자의 입력(마우스/터치)를 활성화합니다\n * @chainable\n * @return {this}\n */\n public enable(): this {\n this._panInput?.enable();\n\n return this;\n }\n\n /**\n * Disable input from the user (mouse/touch)\n * @ko 사용자의 입력(마우스/터치)를 막습니다\n * @chainable\n * @return {this}\n */\n public disable(): this {\n this._panInput?.disable();\n\n return this;\n }\n\n /**\n * Releases ongoing user input (mouse/touch)\n * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다\n * @chainable\n * @return {this}\n */\n public release(): this {\n this._panInput?.release();\n\n return this;\n }\n\n /**\n * Change the destination and duration of the animation currently playing\n * @ko 재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다\n * @param {number} position A position to move이동할 좌표\n * @param {number} duration Duration of the animation (unit: ms)애니메이션 진행 시간 (단위: ms)\n * @chainable\n * @return {this}\n */\n public updateAnimation(position: number, duration?: number): this {\n this._animatingContext = {\n ...this._animatingContext,\n end: position\n };\n this._axes?.updateAnimation({\n destPos: { [AXES.POSITION_KEY]: position },\n duration\n });\n\n return this;\n }\n\n /**\n * Stops the animation currently playing\n * @ko 재생 중인 애니메이션을 중단시킵니다\n * @chainable\n * @return {this}\n */\n public stopAnimation(): this {\n this._axes?.stopAnimation();\n\n return this;\n }\n\n /**\n * Update {@link https://naver.github.io/egjs-axes/ @egjs/axes}'s state\n * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 상태를 갱신합니다\n * @chainable\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link AxesController#init init} is not called before\n * {@link AxesController#init init}이 이전에 호출되지 않은 경우\n * @return {this}\n */\n public update(controlParams: ControlParams): this {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const axes = this._axes!;\n const axis = axes.axis[AXES.POSITION_KEY];\n\n axis.circular = [controlParams.circular, controlParams.circular];\n axis.range = [controlParams.range.min, controlParams.range.max];\n axis.bounce = parseBounce(flicking.bounce, camera.size);\n\n axes.axisManager.set({ [AXES.POSITION_KEY]: controlParams.position });\n\n return this;\n }\n\n /**\n * Attach a handler to the camera element to prevent click events during animation\n * @ko 카메라 엘리먼트에 애니메이션 도중에 클릭 이벤트를 방지하는 핸들러를 부착합니다\n * @return {this}\n */\n public addPreventClickHandler(): this {\n const flicking = getFlickingAttached(this._flicking);\n const axes = this._axes!;\n const cameraEl = flicking.camera.element;\n\n axes.on(AXES.EVENT.HOLD, this._onAxesHold);\n axes.on(AXES.EVENT.CHANGE, this._onAxesChange);\n cameraEl.addEventListener(\"click\", this._preventClickWhenDragged, true);\n\n return this;\n }\n\n /**\n * Detach a handler to the camera element to prevent click events during animation\n * @ko 카메라 엘리먼트에 애니메이션 도중에 클릭 이벤트를 방지하는 핸들러를 탈착합니다\n * @return {this}\n */\n public removePreventClickHandler(): this {\n const flicking = getFlickingAttached(this._flicking);\n const axes = this._axes!;\n const cameraEl = flicking.camera.element;\n\n axes.off(AXES.EVENT.HOLD, this._onAxesHold);\n axes.off(AXES.EVENT.CHANGE, this._onAxesChange);\n cameraEl.removeEventListener(\"click\", this._preventClickWhenDragged, true);\n\n return this;\n }\n\n /**\n * Run Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#setTo setTo} using the given position\n * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#setTo setTo} 메소드를 주어진 좌표를 이용하여 수행합니다\n * @param {number} position A position to move이동할 좌표\n * @param {number} duration Duration of the animation (unit: ms)애니메이션 진행 시간 (단위: ms)\n * @param {number} [axesEvent] If provided, it'll use its {@link https://naver#github#io/egjs-axes/release/latest/doc/eg#Axes#html#setTo setTo} method instead이 값이 주어졌을 경우, 해당 이벤트의 {@link https://naver#github#io/egjs-axes/release/latest/doc/eg#Axes#html#setTo setTo} 메소드를 대신해서 사용합니다.\n * @throws {FlickingError}\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|\n * \n *\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|\n *\n * \n * @return {Promise} A Promise which will be resolved after reaching the target position해당 좌표 도달시에 resolve되는 Promise\n */\n public animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise {\n const axes = this._axes;\n const state = this._stateMachine.state;\n\n if (!axes) {\n return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING));\n }\n\n const startPos = axes.get([AXES.POSITION_KEY])[AXES.POSITION_KEY];\n\n if (startPos === position) {\n const flicking = getFlickingAttached(this._flicking);\n\n flicking.camera.lookAt(position);\n\n if (state.targetPanel) {\n flicking.control.setActive(state.targetPanel, flicking.control.activePanel, axesEvent?.isTrusted ?? false);\n }\n return Promise.resolve();\n }\n\n this._animatingContext = {\n start: startPos,\n end: position,\n offset: 0\n };\n\n const animate = () => {\n const resetContext = () => {\n this._animatingContext = { start: 0, end: 0, offset: 0 };\n };\n\n axes.once(AXES.EVENT.FINISH, resetContext);\n\n if (axesEvent) {\n axesEvent.setTo({ [AXES.POSITION_KEY]: position }, duration);\n } else {\n axes.setTo({ [AXES.POSITION_KEY]: position }, duration);\n }\n };\n\n if (duration === 0) {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n\n animate();\n\n const newPos = flicking.circularEnabled\n ? circulatePosition(position, camera.range.min, camera.range.max)\n : position;\n\n axes.axisManager.set({ [AXES.POSITION_KEY]: newPos });\n\n return Promise.resolve();\n } else {\n return new Promise((resolve, reject) => {\n const animationFinishHandler = () => {\n axes.off(AXES.EVENT.HOLD, interruptionHandler);\n resolve();\n };\n\n const interruptionHandler = () => {\n axes.off(AXES.EVENT.FINISH, animationFinishHandler);\n reject(new FlickingError(ERROR.MESSAGE.ANIMATION_INTERRUPTED, ERROR.CODE.ANIMATION_INTERRUPTED));\n };\n\n axes.once(AXES.EVENT.FINISH, animationFinishHandler);\n axes.once(AXES.EVENT.HOLD, interruptionHandler);\n\n animate();\n });\n }\n }\n\n public updateDirection() {\n const flicking = getFlickingAttached(this._flicking);\n const axes = this._axes!;\n const panInput = this._panInput!;\n\n axes.disconnect(panInput);\n axes.connect(flicking.horizontal ? [AXES.POSITION_KEY, \"\"] : [\"\", AXES.POSITION_KEY], panInput);\n\n panInput.options.scale = flicking.horizontal ? [-1, 0] : [0, -1];\n }\n\n private _resetInternalValues() {\n this._flicking = null;\n this._axes = null;\n this._panInput = null;\n this._animatingContext = { start: 0, end: 0, offset: 0 };\n this._dragged = false;\n }\n\n private _onAxesHold = () => {\n this._dragged = false;\n };\n\n private _onAxesChange = () => {\n this._dragged = !!this._panInput?.isEnabled();\n };\n\n private _preventClickWhenDragged = (e: MouseEvent) => {\n if (this._dragged) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n this._dragged = false;\n };\n}\n\nexport default AxesController;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { OnRelease } from \"@egjs/axes\";\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport Flicking from \"../Flicking\";\nimport FlickingError from \"../core/FlickingError\";\nimport Panel from \"../core/panel/Panel\";\nimport AxesController from \"../control/AxesController\";\nimport { DIRECTION, EVENTS } from \"../const/external\";\nimport * as ERROR from \"../const/error\";\nimport { getDirection, getFlickingAttached } from \"../utils\";\nimport { ValueOf } from \"../type/internal\";\n\n/**\n * A component that manages inputs and animation of Flicking\n * @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트\n */\nabstract class Control {\n // Internal States\n protected _flicking: Flicking | null;\n protected _controller: AxesController;\n protected _activePanel: Panel | null;\n\n /**\n * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events\n * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트\n * @type {AxesController}\n * @readonly\n */\n public get controller() { return this._controller; }\n /**\n * Index number of the {@link Flicking#currentPanel currentPanel}\n * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호\n * @type {number}\n * @default 0\n * @readonly\n */\n public get activeIndex() { return this._activePanel?.index ?? -1; }\n /**\n * An active panel\n * @ko 현재 선택된 패널\n * @type {Panel | null}\n * @readonly\n */\n public get activePanel() { return this._activePanel; }\n /**\n * Whether Flicking's animating\n * @ko 현재 애니메이션 동작 여부\n * @type {boolean}\n * @readonly\n */\n public get animating() { return this._controller.state.animating; }\n /**\n * Whether user is clicking or touching\n * @ko 현재 사용자가 클릭/터치중인지 여부\n * @type {boolean}\n * @readonly\n */\n public get holding() { return this._controller.state.holding; }\n\n /** */\n public constructor() {\n this._flicking = null;\n this._controller = new AxesController();\n this._activePanel = null;\n }\n\n /**\n * Move {@link Camera} to the given position\n * @ko {@link Camera}를 주어진 좌표로 이동합니다\n * @method\n * @abstract\n * @memberof Control\n * @instance\n * @name moveToPosition\n * @param {number} position The target position to move이동할 좌표\n * @param {number} duration Duration of the panel movement animation (unit: ms).패널 이동 애니메이션 진행 시간 (단위: ms)\n * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}\n * {@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트\n * @fires Flicking#moveStart\n * @fires Flicking#move\n * @fires Flicking#moveEnd\n * @fires Flicking#willChange\n * @fires Flicking#changed\n * @fires Flicking#willRestore\n * @fires Flicking#restored\n * @fires Flicking#needPanel\n * @fires Flicking#visibleChange\n * @fires Flicking#reachEdge\n * @throws {FlickingError}\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|\n * \n *\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|\n *\n * \n * @return {Promise} A Promise which will be resolved after reaching the target position해당 좌표 도달시에 resolve되는 Promise\n */\n public abstract moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise;\n\n /**\n * Initialize Control\n * @ko Control을 초기화합니다\n * @param {Flicking} flicking An instance of {@link Flicking}Flicking의 인스턴스\n * @chainable\n * @return {this}\n */\n public init(flicking: Flicking): this {\n this._flicking = flicking;\n this._controller.init(flicking);\n\n return this;\n }\n\n /**\n * Destroy Control and return to initial state\n * @ko Control을 초기 상태로 되돌립니다\n * @return {void}\n */\n public destroy(): void {\n this._controller.destroy();\n\n this._flicking = null;\n this._activePanel = null;\n }\n\n /**\n * Enable input from the user (mouse/touch)\n * @ko 사용자의 입력(마우스/터치)를 활성화합니다\n * @chainable\n * @return {this}\n */\n public enable(): this {\n this._controller.enable();\n\n return this;\n }\n\n /**\n * Disable input from the user (mouse/touch)\n * @ko 사용자의 입력(마우스/터치)를 막습니다\n * @chainable\n * @return {this}\n */\n public disable(): this {\n this._controller.disable();\n\n return this;\n }\n\n /**\n * Releases ongoing user input (mouse/touch)\n * @ko 사용자의 현재 입력(마우스/터치)를 중단시킵니다\n * @chainable\n * @return {this}\n */\n public release(): this {\n this._controller.release();\n\n return this;\n }\n\n /**\n * Change the destination and duration of the animation currently playing\n * @ko 재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다\n * @param {Panel} panel The target panel to move이동할 패널\n * @param {number} duration Duration of the animation (unit: ms)애니메이션 진행 시간 (단위: ms)\n * @param {DIRECTION} direction Direction to move, only available in the {@link Flicking#circular circular} mode이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다\n * @chainable\n * @throws {FlickingError}\n * {@link ERROR_CODE POSITION_NOT_REACHABLE} When the given panel is already removed or not in the Camera's {@link Camera#range range}\n * {@link ERROR_CODE POSITION_NOT_REACHABLE} 주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우\n * @return {this}\n */\n public updateAnimation(panel: Panel, duration?: number, direction?: ValueOf): this {\n const state = this._controller.state;\n const position = this._getPosition(panel, direction ?? DIRECTION.NONE);\n\n state.targetPanel = panel;\n this._controller.updateAnimation(position, duration);\n\n return this;\n }\n\n /**\n * Stops the animation currently playing\n * @ko 재생 중인 애니메이션을 중단시킵니다\n * @chainable\n * @return {this}\n */\n public stopAnimation(): this {\n const state = this._controller.state;\n\n state.targetPanel = null;\n this._controller.stopAnimation();\n\n return this;\n }\n\n /**\n * Update position after resizing\n * @ko resize 이후에 position을 업데이트합니다\n * @param {number} progressInPanel Previous camera's progress in active panel before resizeResize 이전 현재 선택된 패널 내에서의 카메라 progress 값\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우\n * @chainable\n * @return {Promise}\n */\n public updatePosition(progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const activePanel = this._activePanel;\n\n if (activePanel) {\n camera.lookAt(camera.clampToReachablePosition(activePanel.position));\n }\n }\n\n /**\n * Update {@link Control#controller controller}'s state\n * @ko {@link Control#controller controller}의 내부 상태를 갱신합니다\n * @chainable\n * @return {this}\n */\n public updateInput(): this {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n\n this._controller.update(camera.controlParams);\n\n return this;\n }\n\n /**\n * Reset {@link Control#activePanel activePanel} to `null`\n * @ko {@link Control#activePanel activePanel}을 `null`로 초기화합니다\n * @chainable\n * @return {this}\n */\n public resetActive(): this {\n this._activePanel = null;\n\n return this;\n }\n\n /**\n * Move {@link Camera} to the given panel\n * @ko {@link Camera}를 해당 패널 위로 이동합니다\n * @param {Panel} panel The target panel to move이동할 패널\n * @param {object} options An options object옵션 오브젝트\n * @param {number} duration Duration of the animation (unit: ms)애니메이션 진행 시간 (단위: ms)\n * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}\n * {@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트\n * @param {DIRECTION} [direction=DIRECTION.NONE] Direction to move, only available in the {@link Flicking#circular circular} mode이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다\n * @fires Flicking#moveStart\n * @fires Flicking#move\n * @fires Flicking#moveEnd\n * @fires Flicking#willChange\n * @fires Flicking#changed\n * @fires Flicking#willRestore\n * @fires Flicking#restored\n * @fires Flicking#needPanel\n * @fires Flicking#visibleChange\n * @fires Flicking#reachEdge\n * @throws {FlickingError}\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|\n * \n *\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|\n *\n * \n * @return {Promise} A Promise which will be resolved after reaching the target panel해당 패널 도달시에 resolve되는 Promise\n */\n public async moveToPanel(panel: Panel, {\n duration,\n direction = DIRECTION.NONE,\n axesEvent\n }: {\n duration: number;\n direction?: ValueOf;\n axesEvent?: OnRelease;\n }) {\n const position = this._getPosition(panel, direction);\n this._triggerIndexChangeEvent(panel, panel.position, axesEvent);\n\n return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });\n }\n\n /**\n * @internal\n */\n public setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {\n const flicking = getFlickingAttached(this._flicking);\n\n this._activePanel = newActivePanel;\n\n flicking.camera.updateAdaptiveHeight();\n\n if (newActivePanel !== prevActivePanel) {\n flicking.trigger(new ComponentEvent(EVENTS.CHANGED, {\n index: newActivePanel.index,\n panel: newActivePanel,\n prevIndex: prevActivePanel?.index ?? -1,\n prevPanel: prevActivePanel,\n isTrusted,\n direction: prevActivePanel ? getDirection(prevActivePanel.position, newActivePanel.position) : DIRECTION.NONE\n }));\n } else {\n flicking.trigger(new ComponentEvent(EVENTS.RESTORED, {\n isTrusted\n }));\n }\n }\n\n /**\n * @internal\n */\n public copy(control: Control) {\n this._flicking = control._flicking;\n this._activePanel = control._activePanel;\n this._controller = control._controller;\n }\n\n protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease) {\n const flicking = getFlickingAttached(this._flicking);\n const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;\n const camera = flicking.camera;\n const activePanel = this._activePanel;\n\n const event = new ComponentEvent(triggeringEvent, {\n index: panel.index,\n panel,\n isTrusted: axesEvent?.isTrusted || false,\n direction: getDirection(activePanel?.position ?? camera.position, position)\n });\n flicking.trigger(event);\n\n if (event.isCanceled()) {\n throw new FlickingError(ERROR.MESSAGE.STOP_CALLED_BY_USER, ERROR.CODE.STOP_CALLED_BY_USER);\n }\n }\n\n protected async _animateToPosition({\n position,\n duration,\n newActivePanel,\n axesEvent\n }: {\n position: number;\n duration: number;\n newActivePanel: Panel;\n axesEvent?: OnRelease;\n }) {\n const flicking = getFlickingAttached(this._flicking);\n const animate = () => this._controller.animateTo(position, duration, axesEvent);\n const state = this._controller.state;\n\n state.targetPanel = newActivePanel;\n\n if (duration <= 0) {\n return animate();\n } else {\n return animate().then(async () => {\n await flicking.renderer.render();\n }).catch(err => {\n if (axesEvent && err instanceof FlickingError && err.code === ERROR.CODE.ANIMATION_INTERRUPTED) return;\n throw err;\n });\n }\n }\n\n private _getPosition(panel: Panel, direction: ValueOf = DIRECTION.NONE) {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n\n let position = panel.position;\n const nearestAnchor = camera.findNearestAnchor(position);\n\n if (panel.removed || !nearestAnchor) {\n throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(panel.position), ERROR.CODE.POSITION_NOT_REACHABLE);\n }\n if (!camera.canReach(panel)) {\n // Override position & panel if that panel is not reachable\n position = nearestAnchor.position;\n panel = nearestAnchor.panel;\n } else if (flicking.circularEnabled) {\n // Circular mode is enabled, find nearest distance to panel\n const camPos = this._controller.position; // Actual position of the Axes\n const camRangeDiff = camera.rangeDiff;\n const possiblePositions = [position, position + camRangeDiff, position - camRangeDiff]\n .filter(pos => {\n if (direction === DIRECTION.NONE) return true;\n\n return direction === DIRECTION.PREV\n ? pos <= camPos\n : pos >= camPos;\n });\n\n position = possiblePositions.reduce((nearestPosition, pos) => {\n if (Math.abs(camPos - pos) < Math.abs(camPos - nearestPosition)) {\n return pos;\n } else {\n return nearestPosition;\n }\n }, Infinity);\n }\n\n return position;\n }\n}\n\nexport default Control;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Panel from \"./panel/Panel\";\n\n/**\n * A data component that has actual position where the camera should be stopped at\n * @ko 카메라가 정지해야하는 실제 위치를 담고 있는 데이터 컴포넌트\n */\nclass AnchorPoint {\n private _index: number;\n private _pos: number;\n private _panel: Panel;\n\n /**\n * Index of AnchorPoint\n * @ko AnchorPoint의 인덱스\n * @type {number}\n * @readonly\n */\n public get index() { return this._index; }\n /**\n * Position of AnchorPoint\n * @ko AnchorPoint의 좌표\n * @type {number}\n * @readonly\n */\n public get position() { return this._pos; }\n /**\n * A {@link Panel} instance AnchorPoint is referencing to\n * @ko AnchorPoint가 참조하고 있는 {@link Panel}\n * @type {Panel}\n * @readonly\n */\n public get panel() { return this._panel; }\n\n /**\n * @param {object} options An options object옵션 객체\n * @param {number} [options.index] Index of AnchorPointAnchorPoint의 인덱스\n * @param {number} [options.position] Position of AnchorPointAnchorPoint의 좌표\n * @param {Panel} [options.panel] A {@link Panel} instance AnchorPoint is referencing toAnchorPoint가 참조하고 있는 {@link Panel}\n */\n public constructor({\n index,\n position,\n panel\n }: {\n index: number;\n position: number;\n panel: Panel;\n }) {\n this._index = index;\n this._pos = position;\n this._panel = panel;\n }\n}\n\nexport default AnchorPoint;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { OnRelease } from \"@egjs/axes\";\n\nimport FlickingError from \"../core/FlickingError\";\nimport AnchorPoint from \"../core/AnchorPoint\";\nimport { circulateIndex, clamp, getFlickingAttached } from \"../utils\";\nimport * as AXES from \"../const/axes\";\nimport * as ERROR from \"../const/error\";\n\nimport Control from \"./Control\";\n\n/**\n * An options for the {@link SnapControl}\n * @ko {@link SnapControl} 생성시 사용되는 옵션\n * @interface\n * @property {number} count Maximum number of panels can go after release입력 중단 이후 통과하여 이동할 수 있는 패널의 최대 갯수\n */\nexport interface SnapControlOptions {\n count: number;\n}\n\n/**\n * A {@link Control} that uses a release momentum to choose destination panel\n * @ko 입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식을 사용하는 {@link Control}\n */\nclass SnapControl extends Control {\n private _count: SnapControlOptions[\"count\"];\n\n /**\n * Maximum number of panels can go after release\n * @ko 입력 중단 이후 통과하여 이동할 수 있는 패널의 최대 갯수\n * @type {number}\n * @default Infinity\n */\n public get count() { return this._count; }\n\n public set count(val: SnapControlOptions[\"count\"]) { this._count = val; }\n\n /** */\n public constructor({\n count = Infinity\n }: Partial = {}) {\n super();\n\n this._count = count;\n }\n\n /**\n * Move {@link Camera} to the given position\n * @ko {@link Camera}를 주어진 좌표로 이동합니다\n * @param {number} position The target position to move이동할 좌표\n * @param {number} duration Duration of the panel movement animation (unit: ms).패널 이동 애니메이션 진행 시간 (단위: ms)\n * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}\n * {@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트\n * @fires Flicking#moveStart\n * @fires Flicking#move\n * @fires Flicking#moveEnd\n * @fires Flicking#willChange\n * @fires Flicking#changed\n * @fires Flicking#willRestore\n * @fires Flicking#restored\n * @fires Flicking#needPanel\n * @fires Flicking#visibleChange\n * @fires Flicking#reachEdge\n * @throws {FlickingError}\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|\n * \n *\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|\n *\n * \n * @return {Promise} A Promise which will be resolved after reaching the target position해당 좌표 도달시에 resolve되는 Promise\n */\n public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const activeAnchor = camera.findActiveAnchor();\n const anchorAtCamera = camera.findNearestAnchor(camera.position);\n const state = this._controller.state;\n\n if (!activeAnchor || !anchorAtCamera) {\n return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));\n }\n\n const snapThreshold = this._calcSnapThreshold(position, activeAnchor);\n\n const posDelta = flicking.animating\n ? state.delta\n : position - camera.position;\n const absPosDelta = Math.abs(posDelta);\n const snapDelta = axesEvent && axesEvent.delta[AXES.POSITION_KEY] !== 0\n ? Math.abs(axesEvent.delta[AXES.POSITION_KEY])\n : absPosDelta;\n let targetAnchor: AnchorPoint;\n\n if (snapDelta >= snapThreshold && snapDelta > 0) {\n // Move to anchor at position\n targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);\n } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {\n // Move to the adjacent panel\n targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);\n } else {\n // Restore to active panel\n return this.moveToPanel(activeAnchor.panel, {\n duration,\n axesEvent\n });\n }\n\n this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);\n\n return this._animateToPosition({\n position: camera.clampToReachablePosition(targetAnchor.position),\n duration,\n newActivePanel: targetAnchor.panel,\n axesEvent\n });\n }\n\n private _findSnappedAnchor(position: number, anchorAtCamera: AnchorPoint): AnchorPoint {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const count = this._count;\n\n const currentPos = camera.position;\n\n const clampedPosition = camera.clampToReachablePosition(position);\n const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);\n\n if (!anchorAtCamera || !anchorAtPosition) {\n throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE);\n }\n\n if (!isFinite(count)) {\n return anchorAtPosition;\n }\n\n const panelCount = flicking.panelCount;\n const anchors = camera.anchorPoints;\n\n let loopCount = Math.sign(position - currentPos) * Math.floor(Math.abs(position - currentPos) / camera.rangeDiff);\n if ((position > currentPos && anchorAtPosition.index < anchorAtCamera.index)\n || (anchorAtPosition.position > anchorAtCamera.position && anchorAtPosition.index === anchorAtCamera.index)) {\n loopCount += 1;\n } else if ((position < currentPos && anchorAtPosition.index > anchorAtCamera.index)\n || (anchorAtPosition.position < anchorAtCamera.position && anchorAtPosition.index === anchorAtCamera.index)) {\n loopCount -= 1;\n }\n\n const circularIndexOffset = loopCount * panelCount;\n const anchorAtPositionIndex = anchorAtPosition.index + circularIndexOffset;\n\n if (Math.abs(anchorAtPositionIndex - anchorAtCamera.index) <= count) {\n const anchor = anchors[anchorAtPosition.index];\n\n return new AnchorPoint({\n index: anchor.index,\n position: anchor.position + loopCount * camera.rangeDiff,\n panel: anchor.panel\n });\n }\n\n if (flicking.circularEnabled) {\n const targetAnchor = anchors[circulateIndex(anchorAtCamera.index + Math.sign(position - currentPos) * count, panelCount)];\n let loop = Math.floor(count / panelCount);\n\n if (position > currentPos && targetAnchor.index < anchorAtCamera.index) {\n loop += 1;\n } else if (position < currentPos && targetAnchor.index > anchorAtCamera.index) {\n loop -= 1;\n }\n\n return new AnchorPoint({\n index: targetAnchor.index,\n position: targetAnchor.position + loop * camera.rangeDiff,\n panel: targetAnchor.panel\n });\n } else {\n return anchors[clamp(anchorAtCamera.index + Math.sign(position - currentPos) * count, 0, anchors.length - 1)];\n }\n }\n\n private _findAdjacentAnchor(position: number, posDelta: number, anchorAtCamera: AnchorPoint): AnchorPoint {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n\n if (camera.circularEnabled) {\n const anchorIncludePosition = camera.findAnchorIncludePosition(position);\n\n if (anchorIncludePosition && anchorIncludePosition.position !== anchorAtCamera.position) {\n return anchorIncludePosition;\n }\n }\n\n const adjacentAnchor = (posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) ?? anchorAtCamera;\n\n return adjacentAnchor;\n }\n\n private _calcSnapThreshold(position: number, activeAnchor: AnchorPoint): number {\n const isNextDirection = position > activeAnchor.position;\n const panel = activeAnchor.panel;\n const panelSize = panel.size;\n const alignPos = panel.alignPosition;\n\n // Minimum distance needed to decide prev/next panel as nearest\n /*\n * | Prev | Next |\n * |<------>|<------------>|\n * [ |<-Anchor ]\n */\n return isNextDirection\n ? panelSize - alignPos + panel.margin.next\n : alignPos + panel.margin.prev;\n }\n}\n\nexport default SnapControl;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { OnRelease } from \"@egjs/axes\";\n\nimport FlickingError from \"../core/FlickingError\";\nimport * as ERROR from \"../const/error\";\nimport { getFlickingAttached } from \"../utils\";\n\nimport Control from \"./Control\";\n\n/**\n * An options for the {@link FreeControl}\n * @ko {@link FreeControl} 생성시 사용되는 옵션\n * @interface\n * @property {boolean} stopAtEdge Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area\n * 스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다\n */\nexport interface FreeControlOptions {\n stopAtEdge: boolean;\n}\n\n/**\n * A {@link Control} that can be scrolled freely without alignment\n * @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 {@link Control}\n */\nclass FreeControl extends Control {\n private _stopAtEdge: FreeControlOptions[\"stopAtEdge\"];\n\n /**\n * Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area\n * @ko 스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다\n * @type {boolean}\n * @default true\n */\n public get stopAtEdge() { return this._stopAtEdge; }\n\n public set stopAtEdge(val: FreeControlOptions[\"stopAtEdge\"]) { this._stopAtEdge = val; }\n\n /** */\n public constructor({\n stopAtEdge = true\n }: Partial = {}) {\n super();\n\n this._stopAtEdge = stopAtEdge;\n }\n\n /**\n * Update position after resizing\n * @ko resize 이후에 position을 업데이트합니다\n * @param {number} progressInPanel Previous camera's progress in active panel before resizeResize 이전 현재 선택된 패널 내에서의 카메라 progress 값\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우\n * @chainable\n * @return {Promise}\n */\n public updatePosition(progressInPanel: number): void {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const activePanel = this._activePanel;\n\n if (activePanel) {\n const panelRange = activePanel.range;\n const newPosition = panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;\n\n camera.lookAt(camera.clampToReachablePosition(newPosition));\n }\n }\n\n /**\n * Move {@link Camera} to the given position\n * @ko {@link Camera}를 주어진 좌표로 이동합니다\n * @param {number} position The target position to move이동할 좌표\n * @param {number} duration Duration of the panel movement animation (unit: ms).패널 이동 애니메이션 진행 시간 (단위: ms)\n * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}\n * {@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트\n * @fires Flicking#moveStart\n * @fires Flicking#move\n * @fires Flicking#moveEnd\n * @fires Flicking#willChange\n * @fires Flicking#changed\n * @fires Flicking#willRestore\n * @fires Flicking#restored\n * @fires Flicking#needPanel\n * @fires Flicking#visibleChange\n * @fires Flicking#reachEdge\n * @throws {FlickingError}\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|\n * \n *\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|\n *\n * \n * @return {Promise} A Promise which will be resolved after reaching the target position해당 좌표 도달시에 resolve되는 Promise\n */\n public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {\n const flicking = getFlickingAttached(this._flicking);\n\n const camera = flicking.camera;\n const targetPos = camera.clampToReachablePosition(position);\n\n const anchorAtPosition = camera.findAnchorIncludePosition(targetPos);\n\n if (!anchorAtPosition) {\n return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));\n }\n\n const targetPanel = anchorAtPosition.panel;\n\n // Trigger only change event\n if (targetPanel !== this._activePanel) {\n this._triggerIndexChangeEvent(targetPanel, position, axesEvent);\n }\n\n return this._animateToPosition({ position: this._stopAtEdge ? targetPos : position, duration, newActivePanel: targetPanel, axesEvent });\n }\n}\n\nexport default FreeControl;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { OnRelease } from \"@egjs/axes\";\n\nimport Panel from \"../core/panel/Panel\";\nimport FlickingError from \"../core/FlickingError\";\nimport { clamp, getFlickingAttached, getMinusCompensatedIndex, isBetween } from \"../utils\";\nimport * as ERROR from \"../const/error\";\n\nimport Control from \"./Control\";\n/**\n * An options for the {@link StrictControl}\n * @ko {@link StrictControl} 생성시 사용되는 옵션\n * @interface\n * @property {number} count Maximum number of panels that can be moved at a time최대로 움직일 수 있는 패널의 개수\n */\nexport interface StrictControlOptions {\n count: number;\n}\n\n/**\n * A {@link Control} that allow you to select the maximum number of panels to move at a time\n * @ko 한번에 최대로 이동할 패널의 개수를 선택 가능한 {@link Control}\n */\nclass StrictControl extends Control {\n private _count: number;\n private _indexRange: { min: number; max: number };\n\n /**\n * Maximum number of panels that can be moved at a time\n * @ko 최대로 움직일 수 있는 패널의 개수\n * @type {number}\n * @default 1\n */\n public get count() { return this._count; }\n\n public set count(val: StrictControlOptions[\"count\"]) { this._count = val; }\n\n /** */\n public constructor({\n count = 1\n }: Partial = {}) {\n super();\n\n this._count = count;\n this._resetIndexRange();\n }\n\n /**\n * Destroy Control and return to initial state\n * @ko Control을 초기 상태로 되돌립니다\n * @return {void}\n */\n public destroy() {\n super.destroy();\n\n this._resetIndexRange();\n }\n\n /**\n * Update {@link Control#controller controller}'s state\n * @ko {@link Control#controller controller}의 내부 상태를 갱신합니다\n * @chainable\n * @return {this}\n */\n public updateInput(): this {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const renderer = flicking.renderer;\n const controller = this._controller;\n const controlParams = camera.controlParams;\n const count = this._count;\n\n const activePanel = controller.state.animating\n ? camera.findNearestAnchor(camera.position)?.panel\n : this._activePanel;\n\n if (!activePanel) {\n controller.update(controlParams);\n this._resetIndexRange();\n return this;\n }\n\n const cameraRange = controlParams.range;\n const currentPos = activePanel.position;\n const currentIndex = activePanel.index;\n const panelCount = renderer.panelCount;\n\n let prevPanelIndex = currentIndex - count;\n let nextPanelIndex = currentIndex + count;\n\n if (prevPanelIndex < 0) {\n prevPanelIndex = flicking.circularEnabled\n ? getMinusCompensatedIndex((prevPanelIndex + 1) % panelCount - 1, panelCount)\n : clamp(prevPanelIndex, 0, panelCount - 1);\n }\n if (nextPanelIndex >= panelCount) {\n nextPanelIndex = flicking.circularEnabled\n ? nextPanelIndex % panelCount\n : clamp(nextPanelIndex, 0, panelCount - 1);\n }\n\n const prevPanel = renderer.panels[prevPanelIndex];\n const nextPanel = renderer.panels[nextPanelIndex];\n\n let prevPos = Math.max(prevPanel.position, cameraRange.min);\n let nextPos = Math.min(nextPanel.position, cameraRange.max);\n\n if (prevPos > currentPos) {\n prevPos -= camera.rangeDiff;\n }\n if (nextPos < currentPos) {\n nextPos += camera.rangeDiff;\n }\n\n controlParams.range = {\n min: prevPos,\n max: nextPos\n };\n\n if (controlParams.circular) {\n if (controlParams.position < prevPos) {\n controlParams.position += camera.rangeDiff;\n }\n\n if (controlParams.position > nextPos) {\n controlParams.position -= camera.rangeDiff;\n }\n }\n\n controlParams.circular = false;\n controller.update(controlParams);\n\n this._indexRange = {\n min: prevPanel.index,\n max: nextPanel.index\n };\n\n return this;\n }\n\n public async moveToPanel(panel: Panel, options: Parameters[1]): Promise {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const controller = this._controller;\n\n controller.update(camera.controlParams);\n\n return super.moveToPanel(panel, options);\n }\n\n /**\n * Move {@link Camera} to the given position\n * @ko {@link Camera}를 주어진 좌표로 이동합니다\n * @param {number} position The target position to move이동할 좌표\n * @param {number} duration Duration of the panel movement animation (unit: ms).패널 이동 애니메이션 진행 시간 (단위: ms)\n * @param {object} [axesEvent] {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of {@link https://naver.github.io/egjs-axes/ Axes}\n * {@link https://naver.github.io/egjs-axes/ Axes}의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트\n * @fires Flicking#moveStart\n * @fires Flicking#move\n * @fires Flicking#moveEnd\n * @fires Flicking#willChange\n * @fires Flicking#changed\n * @fires Flicking#willRestore\n * @fires Flicking#restored\n * @fires Flicking#needPanel\n * @fires Flicking#visibleChange\n * @fires Flicking#reachEdge\n * @throws {FlickingError}\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|When the given panel is already removed or not in the Camera's {@link Camera#range range}|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|When {@link Control#init init} is not called before|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the animation is interrupted by user input|\n * \n *\n * |code|condition|\n * |---|---|\n * |{@link ERROR_CODE POSITION_NOT_REACHABLE}|주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우|\n * |{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING}|{@link Control#init init}이 이전에 호출되지 않은 경우|\n * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|\n * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|\n *\n * \n * @return {Promise} A Promise which will be resolved after reaching the target position해당 좌표 도달시에 resolve되는 Promise\n */\n public moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {\n const flicking = getFlickingAttached(this._flicking);\n const camera = flicking.camera;\n const activePanel = this._activePanel;\n const axesRange = this._controller.range;\n const indexRange = this._indexRange;\n const cameraRange = camera.range;\n const state = this._controller.state;\n\n const clampedPosition = clamp(camera.clampToReachablePosition(position), axesRange[0], axesRange[1]);\n const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);\n\n if (!anchorAtPosition || !activePanel) {\n return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));\n }\n\n const prevPos = activePanel.position;\n const posDelta = flicking.animating\n ? state.delta\n : position - camera.position;\n\n const isOverThreshold = Math.abs(posDelta) >= flicking.threshold;\n const adjacentAnchor = (position > prevPos)\n ? camera.getNextAnchor(anchorAtPosition)\n : camera.getPrevAnchor(anchorAtPosition);\n\n let targetPos: number;\n let targetPanel: Panel;\n\n const anchors = camera.anchorPoints;\n const firstAnchor = anchors[0];\n const lastAnchor = anchors[anchors.length - 1];\n\n const shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);\n const shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);\n\n const isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max\n ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)\n : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);\n\n if (shouldBounceToFirst || shouldBounceToLast) {\n // In bounce area\n const targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;\n\n targetPanel = targetAnchor.panel;\n targetPos = targetAnchor.position;\n } else if (isOverThreshold && anchorAtPosition.position !== activePanel.position) {\n // Move to anchor at position\n targetPanel = anchorAtPosition.panel;\n targetPos = anchorAtPosition.position;\n } else if (isOverThreshold && isAdjacent) {\n // Move to adjacent anchor\n targetPanel = adjacentAnchor!.panel;\n targetPos = adjacentAnchor!.position;\n } else {\n // Restore to active panel\n targetPos = camera.clampToReachablePosition(activePanel.position);\n targetPanel = activePanel;\n }\n\n this._triggerIndexChangeEvent(targetPanel, position, axesEvent);\n\n return this._animateToPosition({\n position: targetPos,\n duration,\n newActivePanel: targetPanel,\n axesEvent\n });\n }\n\n public setActive = (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => {\n super.setActive(newActivePanel, prevActivePanel, isTrusted);\n this.updateInput();\n };\n\n private _resetIndexRange() {\n this._indexRange = { min: 0, max: 0 };\n }\n}\n\nexport default StrictControl;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"../../Flicking\";\nimport Panel from \"../../core/panel/Panel\";\nimport AnchorPoint from \"../../core/AnchorPoint\";\nimport { clamp } from \"../../utils\";\n\n/**\n * A mode of camera\n */\nabstract class CameraMode {\n protected _flicking: Flicking;\n\n /** */\n public constructor(flicking: Flicking) {\n this._flicking = flicking;\n }\n\n public abstract checkAvailability(): boolean;\n public abstract getRange(): { min: number; max: number };\n\n public getAnchors(): AnchorPoint[] {\n const panels = this._flicking.renderer.panels;\n\n return panels.map((panel, index) => new AnchorPoint({\n index,\n position: panel.position,\n panel\n }));\n }\n\n public findAnchorIncludePosition(position: number): AnchorPoint | null {\n const anchors = this._flicking.camera.anchorPoints;\n const anchorsIncludingPosition = anchors.filter(anchor => anchor.panel.includePosition(position, true));\n\n return anchorsIncludingPosition.reduce((nearest: AnchorPoint | null, anchor) => {\n if (!nearest) return anchor;\n\n return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)\n ? nearest\n : anchor;\n }, null);\n }\n\n public findNearestAnchor(position: number): AnchorPoint | null {\n const anchors = this._flicking.camera.anchorPoints;\n\n if (anchors.length <= 0) return null;\n\n let prevDist = Infinity;\n for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {\n const anchor = anchors[anchorIdx];\n const dist = Math.abs(anchor.position - position);\n\n if (dist > prevDist) {\n // Return previous anchor\n return anchors[anchorIdx - 1];\n }\n\n prevDist = dist;\n }\n\n // Return last anchor\n return anchors[anchors.length - 1];\n }\n\n public clampToReachablePosition(position: number): number {\n const camera = this._flicking.camera;\n const range = camera.range;\n\n return clamp(position, range.min, range.max);\n }\n\n public getCircularOffset(): number {\n return 0;\n }\n\n public canReach(panel: Panel): boolean {\n const camera = this._flicking.camera;\n const range = camera.range;\n\n if (panel.removed) return false;\n\n const panelPos = panel.position;\n\n return panelPos >= range.min && panelPos <= range.max;\n }\n\n public canSee(panel: Panel): boolean {\n const camera = this._flicking.camera;\n const visibleRange = camera.visibleRange;\n // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.\n return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);\n }\n}\n\nexport default CameraMode;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport CameraMode from \"./CameraMode\";\n\nclass LinearCameraMode extends CameraMode {\n public checkAvailability(): boolean {\n // It's always available\n return true;\n }\n\n public getRange(): { min: number; max: number } {\n const renderer = this._flicking.renderer;\n\n const firstPanel = renderer.getPanel(0);\n const lastPanel = renderer.getPanel(renderer.panelCount - 1);\n\n return { min: firstPanel?.position ?? 0, max: lastPanel?.position ?? 0 };\n }\n}\n\nexport default LinearCameraMode;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Panel from \"../../core/panel/Panel\";\nimport AnchorPoint from \"../../core/AnchorPoint\";\nimport { DIRECTION } from \"../../const/external\";\nimport { circulatePosition } from \"../../utils\";\n\nimport CameraMode from \"./CameraMode\";\n\n/**\n * A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop\n * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드\n */\nclass CircularCameraMode extends CameraMode {\n public checkAvailability(): boolean {\n const flicking = this._flicking;\n const renderer = flicking.renderer;\n const panels = renderer.panels;\n\n if (panels.length <= 0) {\n return false;\n }\n\n const firstPanel = panels[0];\n const lastPanel = panels[panels.length - 1];\n const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;\n const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;\n\n const visibleSize = flicking.camera.size;\n const panelSizeSum = lastPanelNext - firstPanelPrev;\n\n const canSetCircularMode = panels\n .every(panel => panelSizeSum - panel.size >= visibleSize);\n\n return canSetCircularMode;\n }\n\n public getRange(): { min: number; max: number } {\n const flicking = this._flicking;\n const panels = flicking.renderer.panels;\n\n if (panels.length <= 0) {\n return { min: 0, max: 0 };\n }\n\n const firstPanel = panels[0];\n const lastPanel = panels[panels.length - 1];\n const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;\n const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;\n\n return { min: firstPanelPrev, max: lastPanelNext };\n }\n\n public getAnchors(): AnchorPoint[] {\n const flicking = this._flicking;\n const panels = flicking.renderer.panels;\n\n return panels.map((panel, index) => new AnchorPoint({\n index,\n position: panel.position,\n panel\n }));\n }\n\n public findNearestAnchor(position: number): AnchorPoint | null {\n const camera = this._flicking.camera;\n const anchors = camera.anchorPoints;\n\n if (anchors.length <= 0) return null;\n\n const camRange = camera.range;\n let minDist = Infinity;\n let minDistIndex = -1;\n for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {\n const anchor = anchors[anchorIdx];\n const dist = Math.min(\n Math.abs(anchor.position - position),\n Math.abs(anchor.position - camRange.min + camRange.max - position),\n Math.abs(position - camRange.min + camRange.max - anchor.position)\n );\n\n if (dist < minDist) {\n minDist = dist;\n minDistIndex = anchorIdx;\n }\n }\n\n // Return last anchor\n return anchors[minDistIndex];\n }\n\n public findAnchorIncludePosition(position: number): AnchorPoint | null {\n const camera = this._flicking.camera;\n const range = camera.range;\n const anchors = camera.anchorPoints;\n const rangeDiff = camera.rangeDiff;\n const anchorCount = anchors.length;\n const positionInRange = circulatePosition(position, range.min, range.max);\n\n let anchorInRange: AnchorPoint | null = super.findAnchorIncludePosition(positionInRange);\n\n if (anchorCount > 0 && (position === range.min || position === range.max)) {\n const possibleAnchors = [\n anchorInRange,\n new AnchorPoint({\n index: 0,\n position: anchors[0].position + rangeDiff,\n panel: anchors[0].panel\n }),\n new AnchorPoint({\n index: anchorCount - 1,\n position: anchors[anchorCount - 1].position - rangeDiff,\n panel: anchors[anchorCount - 1].panel\n })\n ].filter(anchor => !!anchor) as AnchorPoint[];\n\n anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint | null, anchor) => {\n if (!nearest) return anchor;\n\n return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)\n ? nearest\n : anchor;\n }, null);\n }\n\n if (!anchorInRange) return null;\n\n if (position < range.min) {\n const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;\n\n return new AnchorPoint({\n index: anchorInRange.index,\n position: anchorInRange.position + rangeDiff * loopCount,\n panel: anchorInRange.panel\n });\n } else if (position > range.max) {\n const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;\n\n return new AnchorPoint({\n index: anchorInRange.index,\n position: anchorInRange.position + rangeDiff * loopCount,\n panel: anchorInRange.panel\n });\n }\n\n return anchorInRange;\n }\n\n public getCircularOffset(): number {\n const flicking = this._flicking;\n const camera = flicking.camera;\n\n if (!camera.circularEnabled) return 0;\n\n const toggled = flicking.panels.filter(panel => panel.toggled);\n const toggledPrev = toggled.filter(panel => panel.toggleDirection === DIRECTION.PREV);\n const toggledNext = toggled.filter(panel => panel.toggleDirection === DIRECTION.NEXT);\n\n return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);\n }\n\n public clampToReachablePosition(position: number): number {\n // Basically all position is reachable for circular camera\n return position;\n }\n\n public canReach(panel: Panel): boolean {\n if (panel.removed) return false;\n\n // Always reachable on circular mode\n return true;\n }\n\n public canSee(panel: Panel): boolean {\n const camera = this._flicking.camera;\n const range = camera.range;\n const rangeDiff = camera.rangeDiff;\n const visibleRange = camera.visibleRange;\n const visibleInCurrentRange = super.canSee(panel);\n\n // Check looped visible area for circular case\n if (visibleRange.min < range.min) {\n return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);\n } else if (visibleRange.max > range.max) {\n return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);\n }\n\n return visibleInCurrentRange;\n }\n\n private _calcPanelAreaSum(panels: Panel[]) {\n return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);\n }\n}\n\nexport default CircularCameraMode;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport AnchorPoint from \"../../core/AnchorPoint\";\nimport Panel from \"../../core/panel/Panel\";\nimport { parseAlign } from \"../../utils\";\n\nimport CameraMode from \"./CameraMode\";\n\nclass BoundCameraMode extends CameraMode {\n public checkAvailability(): boolean {\n const flicking = this._flicking;\n const renderer = flicking.renderer;\n\n const firstPanel = renderer.getPanel(0);\n const lastPanel = renderer.getPanel(renderer.panelCount - 1);\n\n if (!firstPanel || !lastPanel) {\n return false;\n }\n\n const viewportSize = flicking.camera.size;\n const firstPanelPrev = firstPanel.range.min;\n const lastPanelNext = lastPanel.range.max;\n const panelAreaSize = lastPanelNext - firstPanelPrev;\n const isBiggerThanViewport = viewportSize < panelAreaSize;\n\n return isBiggerThanViewport;\n }\n\n public getRange(): { min: number; max: number } {\n const flicking = this._flicking;\n const renderer = flicking.renderer;\n const alignPos = flicking.camera.alignPosition;\n\n const firstPanel = renderer.getPanel(0);\n const lastPanel = renderer.getPanel(renderer.panelCount - 1);\n\n if (!firstPanel || !lastPanel) {\n return { min: 0, max: 0 };\n }\n\n const viewportSize = flicking.camera.size;\n const firstPanelPrev = firstPanel.range.min;\n const lastPanelNext = lastPanel.range.max;\n const panelAreaSize = lastPanelNext - firstPanelPrev;\n const isBiggerThanViewport = viewportSize < panelAreaSize;\n\n const firstPos = firstPanelPrev + alignPos;\n const lastPos = lastPanelNext - viewportSize + alignPos;\n\n if (isBiggerThanViewport) {\n return { min: firstPos, max: lastPos };\n } else {\n const align = flicking.camera.align;\n const alignVal = typeof align === \"object\"\n ? (align as { camera: string | number }).camera\n : align;\n\n const pos = firstPos + parseAlign(alignVal, lastPos - firstPos);\n\n return { min: pos, max: pos };\n }\n }\n\n public getAnchors(): AnchorPoint[] {\n const flicking = this._flicking;\n const camera = flicking.camera;\n const panels = flicking.renderer.panels;\n\n if (panels.length <= 0) {\n return [];\n }\n\n const range = flicking.camera.range;\n const reachablePanels = panels.filter(panel => camera.canReach(panel));\n\n if (reachablePanels.length > 0) {\n const shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;\n const shouldAppendBoundAnchor = reachablePanels[reachablePanels.length - 1].position !== range.max;\n const indexOffset = shouldPrependBoundAnchor ? 1 : 0;\n\n const newAnchors = reachablePanels.map((panel, idx) => new AnchorPoint({\n index: idx + indexOffset,\n position: panel.position,\n panel\n }));\n\n if (shouldPrependBoundAnchor) {\n newAnchors.splice(0, 0, new AnchorPoint({\n index: 0,\n position: range.min,\n panel: panels[reachablePanels[0].index - 1]\n }));\n }\n\n if (shouldAppendBoundAnchor) {\n newAnchors.push(new AnchorPoint({\n index: newAnchors.length,\n position: range.max,\n panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]\n }));\n }\n\n return newAnchors;\n } else if (range.min !== range.max) {\n // There're more than 2 panels\n const nearestPanelAtMin = this._findNearestPanel(range.min, panels);\n const panelAtMin = nearestPanelAtMin.index === panels.length - 1\n ? nearestPanelAtMin.prev()!\n : nearestPanelAtMin;\n const panelAtMax = panelAtMin.next()!;\n\n return [\n new AnchorPoint({\n index: 0,\n position: range.min,\n panel: panelAtMin\n }),\n new AnchorPoint({\n index: 1,\n position: range.max,\n panel: panelAtMax\n })\n ];\n } else {\n return [new AnchorPoint({\n index: 0,\n position: range.min,\n panel: this._findNearestPanel(range.min, panels)\n })];\n }\n }\n\n public findAnchorIncludePosition(position: number): AnchorPoint | null {\n const camera = this._flicking.camera;\n const range = camera.range;\n const anchors = camera.anchorPoints;\n\n if (anchors.length <= 0) return null;\n\n if (position <= range.min) {\n return anchors[0];\n } else if (position >= range.max) {\n return anchors[anchors.length - 1];\n } else {\n return super.findAnchorIncludePosition(position);\n }\n }\n\n private _findNearestPanel(pos: number, panels: Panel[]): Panel {\n let prevDist = Infinity;\n for (let panelIdx = 0; panelIdx < panels.length; panelIdx++) {\n const panel = panels[panelIdx];\n const dist = Math.abs(panel.position - pos);\n\n if (dist > prevDist) {\n // Return previous anchor\n return panels[panelIdx - 1];\n }\n\n prevDist = dist;\n }\n\n // Return last anchor\n return panels[panels.length - 1];\n }\n}\n\nexport default BoundCameraMode;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ComponentEvent } from \"@egjs/component\";\n\nimport Flicking, { FlickingOptions } from \"../Flicking\";\nimport FlickingError from \"../core/FlickingError\";\nimport Panel from \"../core/panel/Panel\";\nimport AnchorPoint from \"../core/AnchorPoint\";\nimport * as ERROR from \"../const/error\";\nimport { ALIGN, CIRCULAR_FALLBACK, DIRECTION, EVENTS } from \"../const/external\";\nimport { checkExistence, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from \"../utils\";\n\nimport { CameraMode, BoundCameraMode, CircularCameraMode, LinearCameraMode } from \"./mode\";\n\nexport interface CameraOptions {\n align: FlickingOptions[\"align\"];\n}\n\n/**\n * A component that manages actual movement inside the viewport\n * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트\n */\nclass Camera {\n // Options\n private _align: FlickingOptions[\"align\"];\n\n // Internal states\n private _flicking: Flicking;\n private _mode: CameraMode;\n private _el: HTMLElement;\n private _transform: string;\n private _position: number;\n private _alignPos: number;\n private _offset: number;\n private _circularOffset: number;\n private _circularEnabled: boolean;\n private _range: { min: number; max: number };\n private _visiblePanels: Panel[];\n private _anchors: AnchorPoint[];\n private _needPanelTriggered: { prev: boolean; next: boolean };\n\n // Internal states getter\n /**\n * The camera element(`.flicking-camera`)\n * @ko 카메라 엘리먼트(`.flicking-camera`)\n * @type {HTMLElement}\n * @readonly\n */\n public get element() { return this._el; }\n /**\n * An array of the child elements of the camera element(`.flicking-camera`)\n * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열\n * @type {HTMLElement[]}\n * @readonly\n */\n public get children() { return toArray(this._el.children) as HTMLElement[]; }\n /**\n * Current position of the camera\n * @ko Camera의 현재 좌표\n * @type {number}\n * @readonly\n */\n public get position() { return this._position; }\n /**\n * Align position inside the viewport where {@link Panel}'s {@link Panel#alignPosition alignPosition} should be located at\n * @ko 패널의 정렬 기준 위치. 뷰포트 내에서 {@link Panel}의 {@link Panel#alignPosition alignPosition}이 위치해야 하는 곳입니다\n * @type {number}\n * @readonly\n */\n public get alignPosition() { return this._alignPos; }\n /**\n * Position offset, used for the {@link Flicking#renderOnlyVisible renderOnlyVisible} option\n * @ko Camera의 좌표 오프셋. {@link Flicking#renderOnlyVisible renderOnlyVisible} 옵션을 위해 사용됩니다.\n * @type {number}\n * @default 0\n * @readonly\n */\n public get offset() { return this._offset - this._circularOffset; }\n /**\n * Whether the `circular` option is enabled.\n * The {@link Flicking#circular circular} option can't be enabled when sum of the panel sizes are too small.\n * @ko {@link Flicking#circular circular} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.\n * {@link Flicking#circular circular} 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.\n * @type {boolean}\n * @default false\n * @readonly\n */\n public get circularEnabled() { return this._circularEnabled; }\n /**\n * A current camera mode\n * @type {CameraMode}\n * @readonly\n */\n public get mode() { return this._mode; }\n /**\n * A range that Camera's {@link Camera#position position} can reach\n * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위\n * @type {object}\n * @property {number} min A minimum position최소 위치\n * @property {number} max A maximum position최대 위치\n * @readonly\n */\n public get range() { return this._range; }\n /**\n * A difference between Camera's minimum and maximum position that can reach\n * @ko Camera가 도달 가능한 최소/최대 좌표의 차이\n * @type {number}\n * @readonly\n */\n public get rangeDiff() { return this._range.max - this._range.min; }\n /**\n * An array of visible panels from the current position\n * @ko 현재 보이는 패널들의 배열\n * @type {Panel[]}\n * @readonly\n */\n public get visiblePanels() { return this._visiblePanels; }\n /**\n * A range of the visible area from the current position\n * @ko 현재 위치에서 보이는 범위\n * @type {object}\n * @property {number} min A minimum position최소 위치\n * @property {number} min A maximum position최대 위치\n * @readonly\n */\n public get visibleRange() { return { min: this._position - this._alignPos, max: this._position - this._alignPos + this.size }; }\n /**\n * An array of {@link AnchorPoint}s that Camera can be stopped at\n * @ko 카메라가 도달 가능한 {@link AnchorPoint}의 목록\n * @type {AnchorPoint[]}\n * @readonly\n */\n public get anchorPoints() { return this._anchors; }\n /**\n * A current parameters of the Camera for updating {@link AxesController}\n * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들\n * @type {ControlParams}\n * @readonly\n */\n public get controlParams() { return { range: this._range, position: this._position, circular: this._circularEnabled }; }\n /**\n * A Boolean value indicating whether Camera's over the minimum or maximum position reachable\n * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다\n * @type {boolean}\n * @readonly\n */\n public get atEdge() { return this._position <= this._range.min || this._position >= this._range.max; }\n /**\n * Return the size of the viewport\n * @ko 뷰포트 크기를 반환합니다\n * @type {number}\n * @readonly\n */\n public get size() {\n const flicking = this._flicking;\n return flicking\n ? flicking.horizontal\n ? flicking.viewport.width\n : flicking.viewport.height\n : 0;\n }\n\n /**\n * Return the camera's position progress from the first panel to last panel\n * Range is from 0 to last panel's index\n * @ko 첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다\n * 범위는 0부터 마지막 패널의 인덱스까지입니다\n * @type {number}\n * @readonly\n */\n public get progress() {\n const flicking = this._flicking;\n const position = this._position + this._offset;\n const nearestAnchor = this.findNearestAnchor(this._position);\n\n if (!flicking || !nearestAnchor) {\n return NaN;\n }\n\n const nearestPanel = nearestAnchor.panel;\n const panelPos = nearestPanel.position + nearestPanel.offset;\n const bounceSize = flicking.control.controller.bounce!;\n\n const { min: prevRange, max: nextRange } = this.range;\n const rangeDiff = this.rangeDiff;\n\n if (position === panelPos) {\n return nearestPanel.index;\n }\n\n if (position < panelPos) {\n const prevPanel = nearestPanel.prev();\n let prevPosition = prevPanel\n ? prevPanel.position + prevPanel.offset\n : prevRange - bounceSize[0];\n\n // Looped\n if (prevPosition > panelPos) {\n prevPosition -= rangeDiff;\n }\n\n return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);\n } else {\n const nextPanel = nearestPanel.next();\n let nextPosition = nextPanel\n ? nextPanel.position + nextPanel.offset\n : nextRange + bounceSize[1];\n\n // Looped\n if (nextPosition < panelPos) {\n nextPosition += rangeDiff;\n }\n\n return nearestPanel.index + getProgress(position, panelPos, nextPosition);\n }\n }\n\n // Options Getter\n /**\n * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element\n * @ko {@link Camera#alignPosition alignPosition}이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값\n * @type {ALIGN | string | number}\n */\n public get align() { return this._align; }\n\n // Options Setter\n public set align(val: FlickingOptions[\"align\"]) {\n this._align = val;\n }\n\n /** */\n public constructor(flicking: Flicking, {\n align = ALIGN.CENTER\n }: Partial = {}) {\n this._flicking = flicking;\n this._resetInternalValues();\n\n // Options\n this._align = align;\n }\n\n /**\n * Initialize Camera\n * @ko Camera를 초기화합니다\n * @throws {FlickingError}\n * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element\n * {@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우\n * @return {this}\n */\n public init(): this {\n const viewportEl = this._flicking.viewport.element;\n\n checkExistence(viewportEl.firstElementChild, \"First element child of the viewport element\");\n this._el = viewportEl.firstElementChild as HTMLElement;\n this._checkTranslateSupport();\n\n this._updateMode();\n\n return this;\n }\n\n /**\n * Destroy Camera and return to initial state\n * @ko Camera를 초기 상태로 되돌립니다\n * @return {void}\n */\n public destroy(): this {\n this._resetInternalValues();\n return this;\n }\n\n /**\n * Move to the given position and apply CSS transform\n * @ko 해당 좌표로 이동하고, CSS transform을 적용합니다\n * @param {number} pos A new position움직일 위치\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우\n * @return {this}\n */\n public lookAt(pos: number): void {\n const flicking = getFlickingAttached(this._flicking);\n const prevPos = this._position;\n\n this._position = pos;\n const toggled = this._togglePanels(prevPos, pos);\n this._refreshVisiblePanels();\n this._checkNeedPanel();\n this._checkReachEnd(prevPos, pos);\n\n if (toggled) {\n void flicking.renderer.render().then(() => {\n this.updateOffset();\n });\n } else {\n this.applyTransform();\n }\n }\n\n /**\n * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}\n * If it does not exist, return `null` instead\n * @ko 주어진 {@link AnchorPoint}의 이전 {@link AnchorPoint}를 반환합니다\n * 존재하지 않을 경우 `null`을 반환합니다\n * @param {AnchorPoint} anchor A reference {@link AnchorPoint}기준 {@link AnchorPoint}\n * @return {AnchorPoint | null} The previous {@link AnchorPoint}이전 {@link AnchorPoint}\n */\n public getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null {\n if (!this._circularEnabled || anchor.index !== 0) {\n return this._anchors[anchor.index - 1] || null;\n } else {\n const anchors = this._anchors;\n const rangeDiff = this.rangeDiff;\n const lastAnchor = anchors[anchors.length - 1];\n\n return new AnchorPoint({\n index: lastAnchor.index,\n position: lastAnchor.position - rangeDiff,\n panel: lastAnchor.panel\n });\n }\n }\n\n /**\n * Return a next {@link AnchorPoint} of given {@link AnchorPoint}\n * If it does not exist, return `null` instead\n * @ko 주어진 {@link AnchorPoint}의 다음 {@link AnchorPoint}를 반환합니다\n * 존재하지 않을 경우 `null`을 반환합니다\n * @param {AnchorPoint} anchor A reference {@link AnchorPoint}기준 {@link AnchorPoint}\n * @return {AnchorPoint | null} The next {@link AnchorPoint}다음 {@link AnchorPoint}\n */\n public getNextAnchor(anchor: AnchorPoint): AnchorPoint | null {\n const anchors = this._anchors;\n\n if (!this._circularEnabled || anchor.index !== anchors.length - 1) {\n return anchors[anchor.index + 1] || null;\n } else {\n const rangeDiff = this.rangeDiff;\n const firstAnchor = anchors[0];\n\n return new AnchorPoint({\n index: firstAnchor.index,\n position: firstAnchor.position + rangeDiff,\n panel: firstAnchor.panel\n });\n }\n }\n\n /**\n * Return the camera's position progress in the panel below\n * Value is from 0 to 1 when the camera's inside panel\n * Value can be lower than 0 or bigger than 1 when it's in the margin area\n * @ko 현재 카메라 아래 패널에서의 위치 진행도를 반환합니다\n * 반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다\n * 패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다\n */\n public getProgressInPanel(panel: Panel) {\n const panelRange = panel.range;\n\n return (this._position - panelRange.min) / (panelRange.max - panelRange.min);\n }\n\n /**\n * Return {@link AnchorPoint} that includes given position\n * If there's no {@link AnchorPoint} that includes the given position, return `null` instead\n * @ko 주어진 좌표를 포함하는 {@link AnchorPoint}를 반환합니다\n * 주어진 좌표를 포함하는 {@link AnchorPoint}가 없을 경우 `null`을 반환합니다\n * @param {number} position A position to check확인할 좌표\n * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position해당 좌표를 포함하는 {@link AnchorPoint}\n */\n public findAnchorIncludePosition(position: number): AnchorPoint | null {\n return this._mode.findAnchorIncludePosition(position);\n }\n\n /**\n * Return {@link AnchorPoint} nearest to given position\n * If there're no {@link AnchorPoint}s, return `null` instead\n * @ko 해당 좌표에서 가장 가까운 {@link AnchorPoint}를 반환합니다\n * {@link AnchorPoint}가 하나도 없을 경우 `null`을 반환합니다\n * @param {number} position A position to check확인할 좌표\n * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position해당 좌표에 가장 인접한 {@link AnchorPoint}\n */\n public findNearestAnchor(position: number): AnchorPoint | null {\n return this._mode.findNearestAnchor(position);\n }\n\n /**\n * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}\n * @ko 현재 {@link Flicking#currentPanel}에 해당하는 {@link AnchorPoint}를 반환합니다\n * @return {AnchorPoint | null}\n */\n public findActiveAnchor(): AnchorPoint | null {\n const flicking = getFlickingAttached(this._flicking);\n const activeIndex = flicking.control.activeIndex;\n\n return find(this._anchors, anchor => anchor.panel.index === activeIndex);\n }\n\n /**\n * Clamp the given position between camera's range\n * @ko 주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다\n * @param {number} position A position to clamp범위를 제한할 좌표\n * @return {number} A clamped position범위 제한된 좌표\n */\n public clampToReachablePosition(position: number): number {\n return this._mode.clampToReachablePosition(position);\n }\n\n /**\n * Check whether the given panel is inside of the Camera's range\n * @ko 해당 {@link Panel}이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다\n * @param panel An instance of {@link Panel} to check확인할 {@link Panel}의 인스턴스\n * @return {boolean} Whether the panel's inside Camera's range도달 가능한 범위 내에 해당 패널이 존재하는지 여부\n */\n public canReach(panel: Panel): boolean {\n return this._mode.canReach(panel);\n }\n\n /**\n * Check whether the given panel element is visible at the current position\n * @ko 현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다\n * @param panel An instance of {@link Panel} to check확인할 {@link Panel}의 인스턴스\n * @return Whether the panel element is visible at the current position현재 위치에서 해당 패널 엘리먼트가 보이는지 여부\n */\n public canSee(panel: Panel): boolean {\n return this._mode.canSee(panel);\n }\n\n /**\n * Update {@link Camera#range range} of Camera\n * @ko Camera의 {@link Camera#range range}를 업데이트합니다\n * @method\n * @abstract\n * @memberof Camera\n * @instance\n * @name updateRange\n * @chainable\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우\n * @return {this}\n */\n public updateRange() {\n const flicking = getFlickingAttached(this._flicking);\n const renderer = flicking.renderer;\n const panels = renderer.panels;\n\n this._updateMode();\n this._range = this._mode.getRange();\n\n panels.forEach(panel => panel.updateCircularToggleDirection());\n\n return this;\n }\n\n /**\n * Update Camera's {@link Camera#alignPosition alignPosition}\n * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다\n * @chainable\n * @return {this}\n */\n public updateAlignPos(): this {\n const align = this._align;\n\n const alignVal = typeof align === \"object\"\n ? (align as { camera: string | number }).camera\n : align;\n\n this._alignPos = parseAlign(alignVal, this.size);\n\n return this;\n }\n\n /**\n * Update Camera's {@link Camera#anchorPoints anchorPoints}\n * @ko Camera의 {@link Camera#anchorPoints anchorPoints}를 업데이트합니다\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우\n * @chainable\n * @return {this}\n */\n public updateAnchors(): this {\n this._anchors = this._mode.getAnchors();\n\n return this;\n }\n\n /**\n * Update Viewport's height to active panel's height\n * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다\n * @throws {FlickingError}\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before\n * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우\n * @chainable\n * @return {this}\n */\n public updateAdaptiveHeight() {\n const flicking = getFlickingAttached(this._flicking);\n const activePanel = flicking.control.activePanel;\n\n if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;\n\n flicking.viewport.setSize({\n height: activePanel.height\n });\n }\n\n /**\n * Update current offset of the camera\n * @ko 현재 카메라의 오프셋을 업데이트합니다\n * @chainable\n * @return {this}\n */\n public updateOffset(): this {\n const flicking = getFlickingAttached(this._flicking);\n const position = this._position;\n const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);\n\n this._offset = unRenderedPanels\n .filter(panel => panel.position + panel.offset < position)\n .reduce((offset, panel) => offset + panel.sizeIncludingMargin, 0);\n\n this._circularOffset = this._mode.getCircularOffset();\n\n this.applyTransform();\n\n return this;\n }\n\n /**\n * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again\n * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다\n * @chainable\n * @return {this}\n */\n public resetNeedPanelHistory(): this {\n this._needPanelTriggered = { prev: false, next: false };\n return this;\n }\n\n /**\n * Apply \"transform\" style with the current position to camera element\n * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.\n * @return {this}\n */\n public applyTransform(): this {\n const el = this._el;\n const flicking = getFlickingAttached(this._flicking);\n const renderer = flicking.renderer;\n\n if (renderer.rendering) return this;\n\n const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;\n\n el.style[this._transform] = flicking.horizontal\n ? `translate(${-actualPosition}px)`\n : `translate(0, ${-actualPosition}px)`;\n\n return this;\n }\n\n private _resetInternalValues() {\n this._position = 0;\n this._alignPos = 0;\n this._offset = 0;\n this._circularOffset = 0;\n this._circularEnabled = false;\n this._range = { min: 0, max: 0 };\n this._visiblePanels = [];\n this._anchors = [];\n this._needPanelTriggered = { prev: false, next: false };\n }\n\n private _refreshVisiblePanels() {\n const flicking = getFlickingAttached(this._flicking);\n const panels = flicking.renderer.panels;\n\n const newVisiblePanels = panels.filter(panel => this.canSee(panel));\n const prevVisiblePanels = this._visiblePanels;\n this._visiblePanels = newVisiblePanels;\n\n const added: Panel[] = newVisiblePanels.filter(panel => !includes(prevVisiblePanels, panel));\n const removed: Panel[] = prevVisiblePanels.filter(panel => !includes(newVisiblePanels, panel));\n\n if (added.length > 0 || removed.length > 0) {\n void flicking.renderer.render().then(() => {\n flicking.trigger(new ComponentEvent(EVENTS.VISIBLE_CHANGE, {\n added,\n removed,\n visiblePanels: newVisiblePanels\n }));\n });\n }\n }\n\n private _checkNeedPanel(): void {\n const needPanelTriggered = this._needPanelTriggered;\n\n if (needPanelTriggered.prev && needPanelTriggered.next) return;\n\n const flicking = getFlickingAttached(this._flicking);\n const panels = flicking.renderer.panels;\n\n if (panels.length <= 0) {\n if (!needPanelTriggered.prev) {\n flicking.trigger(new ComponentEvent(EVENTS.NEED_PANEL, { direction: DIRECTION.PREV }));\n needPanelTriggered.prev = true;\n }\n if (!needPanelTriggered.next) {\n flicking.trigger(new ComponentEvent(EVENTS.NEED_PANEL, { direction: DIRECTION.NEXT }));\n needPanelTriggered.next = true;\n }\n\n return;\n }\n\n const cameraPosition = this._position;\n const cameraSize = this.size;\n const cameraRange = this._range;\n const needPanelThreshold = flicking.needPanelThreshold;\n\n const cameraPrev = cameraPosition - this._alignPos;\n const cameraNext = cameraPrev + cameraSize;\n\n const firstPanel = panels[0];\n const lastPanel = panels[panels.length - 1];\n\n if (!needPanelTriggered.prev) {\n const firstPanelPrev = firstPanel.range.min;\n\n if (cameraPrev <= (firstPanelPrev + needPanelThreshold) || cameraPosition <= (cameraRange.min + needPanelThreshold)) {\n flicking.trigger(new ComponentEvent(EVENTS.NEED_PANEL, { direction: DIRECTION.PREV }));\n needPanelTriggered.prev = true;\n }\n }\n\n if (!needPanelTriggered.next) {\n const lastPanelNext = lastPanel.range.max;\n\n if (cameraNext >= (lastPanelNext - needPanelThreshold) || cameraPosition >= (cameraRange.max - needPanelThreshold)) {\n flicking.trigger(new ComponentEvent(EVENTS.NEED_PANEL, { direction: DIRECTION.NEXT }));\n needPanelTriggered.next = true;\n }\n }\n }\n\n private _checkReachEnd(prevPos: number, newPos: number): void {\n const flicking = getFlickingAttached(this._flicking);\n const range = this._range;\n\n const wasBetweenRange = prevPos > range.min && prevPos < range.max;\n const isBetweenRange = newPos > range.min && newPos < range.max;\n\n if (!wasBetweenRange || isBetweenRange) return;\n\n const direction = newPos <= range.min ? DIRECTION.PREV : DIRECTION.NEXT;\n\n flicking.trigger(new ComponentEvent(EVENTS.REACH_EDGE, {\n direction\n }));\n }\n\n private _checkTranslateSupport = () => {\n const transforms = [\"webkitTransform\", \"msTransform\", \"MozTransform\", \"OTransform\", \"transform\"];\n\n const supportedStyle = document.documentElement.style;\n let transformName = \"\";\n for (const prefixedTransform of transforms) {\n if (prefixedTransform in supportedStyle) {\n transformName = prefixedTransform;\n }\n }\n\n if (!transformName) {\n throw new FlickingError(ERROR.MESSAGE.TRANSFORM_NOT_SUPPORTED, ERROR.CODE.TRANSFORM_NOT_SUPPORTED);\n }\n\n this._transform = transformName;\n };\n\n private _updateMode() {\n const flicking = getFlickingAttached(this._flicking);\n\n if (flicking.circular) {\n const circularMode = new CircularCameraMode(flicking);\n const canSetCircularMode = circularMode.checkAvailability();\n\n if (canSetCircularMode) {\n this._mode = circularMode;\n } else {\n const fallbackMode = flicking.circularFallback;\n\n this._mode = fallbackMode === CIRCULAR_FALLBACK.BOUND\n ? new BoundCameraMode(flicking)\n : new LinearCameraMode(flicking);\n }\n\n this._circularEnabled = canSetCircularMode;\n } else {\n this._mode = flicking.bound\n ? new BoundCameraMode(flicking)\n : new LinearCameraMode(flicking);\n this._circularEnabled = false;\n }\n }\n\n private _togglePanels(prevPos: number, pos: number): boolean {\n if (pos === prevPos) return false;\n\n const flicking = getFlickingAttached(this._flicking);\n const panels = flicking.renderer.panels;\n const toggled = panels.map(panel => panel.toggle(prevPos, pos));\n\n return toggled.some(isToggled => isToggled);\n }\n}\n\nexport default Camera;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ComponentEvent } from \"@egjs/component\";\nimport ImReady from \"@egjs/imready\";\n\nimport Flicking, { FlickingOptions } from \"../Flicking\";\nimport Panel, { PanelOptions } from \"../core/panel/Panel\";\nimport FlickingError from \"../core/FlickingError\";\nimport { ALIGN, EVENTS } from \"../const/external\";\nimport * as ERROR from \"../const/error\";\nimport { getFlickingAttached, getMinusCompensatedIndex, includes, parsePanelAlign } from \"../utils\";\n\nimport RenderingStrategy from \"./strategy/RenderingStrategy\";\n\nexport interface RendererOptions {\n align?: FlickingOptions[\"align\"];\n strategy: RenderingStrategy;\n}\n\n/**\n * A component that manages {@link Panel} and its elements\n * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트\n */\nabstract class Renderer {\n // Internal States\n protected _flicking: Flicking | null;\n protected _panels: Panel[];\n protected _rendering: boolean;\n\n // Options\n protected _align: NonNullable;\n protected _strategy: RendererOptions[\"strategy\"];\n\n // Internal states Getter\n /**\n * Array of panels\n * @ko 전체 패널들의 배열\n * @type {Panel[]}\n * @readonly\n * @see Panel\n */\n public get panels() { return this._panels; }\n /**\n * A boolean value indicating whether rendering is in progress\n * @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부\n * @type {boolean}\n * @readonly\n * @internal\n */\n public get rendering() { return this._rendering; }\n /**\n * Count of panels\n * @ko 전체 패널의 개수\n * @type {number}\n * @readonly\n */\n public get panelCount() { return this._panels.length; }\n /**\n * @internal\n */\n public get strategy() { return this._strategy; }\n\n // Options Getter\n /**\n * A {@link Panel}'s {@link Panel#align align} value that applied to all panels\n * @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값\n * @type {Constants.ALIGN | string | number}\n */\n public get align() { return this._align; }\n\n // Options Setter\n public set align(val: NonNullable) {\n this._align = val;\n\n const panelAlign = parsePanelAlign(val);\n this._panels.forEach(panel => { panel.align = panelAlign; });\n }\n\n /**\n * @param {object} options An options object옵션 오브젝트\n * @param {Constants.ALIGN | string | number} [options.align=\"center\"] An {@link Flicking#align align} value that will be applied to all panels전체 패널에 적용될 {@link Flicking#align align} 값\n * @param {object} [options.strategy] An instance of RenderingStrategy(internal module)RenderingStrategy의 인스턴스(내부 모듈)\n */\n public constructor({\n align = ALIGN.CENTER,\n strategy\n }: RendererOptions) {\n this._flicking = null;\n this._panels = [];\n this._rendering = false;\n\n // Bind options\n this._align = align;\n this._strategy = strategy;\n }\n\n /**\n * Render panel elements inside the camera element\n * @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다\n * @method\n * @abstract\n * @memberof Renderer\n * @instance\n * @name render\n * @chainable\n * @return {this}\n */\n public abstract render(): Promise;\n\n protected abstract _collectPanels(): void;\n protected abstract _createPanel(el: any, options: Omit): Panel;\n\n /**\n * Initialize Renderer\n * @ko Renderer를 초기화합니다\n * @param {Flicking} flicking An instance of {@link Flicking}Flicking의 인스턴스\n * @chainable\n * @return {this}\n */\n public init(flicking: Flicking): this {\n this._flicking = flicking;\n this._collectPanels();\n\n return this;\n }\n\n /**\n * Destroy Renderer and return to initial state\n * @ko Renderer를 초기 상태로 되돌립니다\n * @return {void}\n */\n public destroy(): void {\n this._flicking = null;\n this._panels = [];\n }\n\n /**\n * Return the {@link Panel} at the given index. `null` if it doesn't exists.\n * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.\n * @return {Panel | null} Panel at the given index주어진 인덱스에 해당하는 패널\n * @see Panel\n */\n public getPanel(index: number): Panel | null {\n return this._panels[index] || null;\n }\n\n public forceRenderAllPanels(): Promise {\n this._panels.forEach(panel => panel.markForShow());\n\n return Promise.resolve();\n }\n\n /**\n * Update all panel sizes\n * @ko 모든 패널의 크기를 업데이트합니다\n * @chainable\n * @return {this}\n */\n public updatePanelSize(): this {\n const flicking = getFlickingAttached(this._flicking);\n const panels = this._panels;\n\n if (panels.length <= 0) return this;\n\n if (flicking.panelsPerView > 0) {\n const firstPanel = panels[0];\n firstPanel.resize();\n\n this._updatePanelSizeByGrid(firstPanel, panels);\n } else {\n flicking.panels.forEach(panel => panel.resize());\n }\n\n return this;\n }\n\n /**\n * Insert new panels at given index\n * This will increase index of panels after by the number of panels added\n * @ko 주어진 인덱스에 새로운 패널들을 추가합니다\n * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.\n * @param {Array