@egjs/flicking 4.12.1-beta.5 → 4.13.0

package/panel-visual.md

@@ -1,328 +0,0 @@
-# Panel 시각적 속성과 계산 로직
-
-## 1. 핵심 시각적 속성
-
-### 1.1 크기 속성
-```typescript
-protected _size: number;      // 기본 패널 크기 (가로/세로)
-protected _height: number;    // 패널 높이
-protected _margin: { 
-  prev: number;  // 이전 마진 (왼쪽/위)
-  next: number;  // 다음 마진 (오른쪽/아래)
-};
-```
-
-```mermaid
-graph TD
-    A[패널 크기 구성] --> B[기본 크기 _size]
-    A --> C[마진]
-    C --> D[이전 마진 prev]
-    C --> E[다음 마진 next]
-    A --> F[높이 _height]
-```
-
-### 1.2 위치 속성
-```typescript
-protected _pos: number;       // 기본 위치
-protected _alignPos: number;  // 정렬 오프셋
-protected _togglePosition: number;  // 순환 모드 토글 위치
-```
-
-```mermaid
-graph LR
-    A[패널 위치 구성] --> B[기본 위치 _pos]
-    A --> C[정렬 오프셋 _alignPos]
-    A --> D[토글 위치 _togglePosition]
-    E[총 위치] --> B
-    E --> C
-```
-
-## 2. 크기 계산
-
-### 2.1 기본 크기 계산
-패널의 크기는 `resize()` 메소드에서 계산됩니다:
-
-```typescript
-public resize(cached?: {
-  size: number;
-  height?: number;
-  margin: { prev: number; next: number };
-}): this {
-  const el = this.element;
-  const { horizontal, useFractionalSize } = this._flicking;
-
-  // 캐시된 값이 있으면 사용
-  if (cached) {
-    this._size = cached.size;
-    this._margin = { ...cached.margin };
-    this._height = cached.height ?? getElementSize({
-      el,
-      horizontal: false,
-      useFractionalSize,
-      useOffset: true,
-      style: getStyle(el)
-    });
-  } else {
-    // 새로운 값 계산
-    const elStyle = getStyle(el);
-    
-    // 주요 크기 (가로/세로)
-    this._size = getElementSize({
-      el,
-      horizontal,
-      useFractionalSize,
-      useOffset: true,
-      style: elStyle
-    });
-
-    // 마진
-    this._margin = horizontal
-      ? {
-          prev: parseFloat(elStyle.marginLeft || "0"),
-          next: parseFloat(elStyle.marginRight || "0")
-        }
-      : {
-          prev: parseFloat(elStyle.marginTop || "0"),
-          next: parseFloat(elStyle.marginBottom || "0")
-        };
-
-    // 높이
-    this._height = horizontal
-      ? getElementSize({
-          el,
-          horizontal: false,
-          useFractionalSize,
-          useOffset: true,
-          style: elStyle
-        })
-      : this._size;
-  }
-}
-```
-
-```mermaid
-graph TD
-    A[크기 계산 프로세스] --> B{캐시 존재?}
-    B -->|Yes| C[캐시된 값 사용]
-    B -->|No| D[새로운 값 계산]
-    D --> E[기본 크기 계산]
-    D --> F[마진 계산]
-    D --> G[높이 계산]
-    C --> H[최종 크기 설정]
-    E --> H
-    F --> H
-    G --> H
-```
-
-### 2.2 마진 포함 크기
-```typescript
-public get sizeIncludingMargin(): number {
-  return this._size + this._margin.prev + this._margin.next;
-}
-```
-
-```mermaid
-graph LR
-    A[총 크기] --> B[기본 크기]
-    A --> C[이전 마진]
-    A --> D[다음 마진]
-```
-
-## 3. 위치 계산
-
-### 3.1 기본 위치
-기본 위치는 이전 패널을 기준으로 계산됩니다:
-
-```typescript
-public updatePosition(): this {
-  const prevPanel = this._flicking.renderer.panels[this._index - 1];
-
-  this._pos = prevPanel
-    ? prevPanel.range.max + prevPanel.margin.next + this._margin.prev
-    : this._margin.prev;
-
-  return this;
-}
-```
-
-```mermaid
-graph LR
-    A[패널 위치 계산] --> B{이전 패널 존재?}
-    B -->|Yes| C[이전 패널 끝 + 마진]
-    B -->|No| D[첫 번째 마진]
-    C --> E[최종 위치]
-    D --> E
-```
-
-### 3.2 정렬 위치
-정렬 위치는 align 옵션에 따라 계산됩니다:
-
-```typescript
-private _updateAlignPos() {
-  this._alignPos = parseAlign(this._align, this._size);
-}
-```
-
-```mermaid
-graph TD
-    A[정렬 위치 계산] --> B{정렬 옵션}
-    B -->|prev| C[시작점]
-    B -->|center| D[중앙]
-    B -->|next| E[끝점]
-    B -->|custom| F[사용자 정의]
-```
-
-### 3.3 총 위치
-총 위치는 기본 위치와 정렬 오프셋을 포함합니다:
-
-```typescript
-public get position(): number {
-  return this._pos + this._alignPos;
-}
-```
-
-## 4. 범위와 가시성
-
-### 4.1 패널 범위
-```typescript
-public get range() {
-  return { 
-    min: this._pos, 
-    max: this._pos + this._size 
-  };
-}
-```
-
-```mermaid
-graph LR
-    A[패널 범위] --> B[시작점 min]
-    A --> C[끝점 max]
-    B --> D[기본 위치]
-    C --> E[기본 위치 + 크기]
-```
-
-### 4.2 가시성 계산
-```typescript
-public get visibleRatio(): number {
-  const range = this.range;
-  const size = this._size;
-  const offset = this.offset;
-  const visibleRange = this._flicking.camera.visibleRange;
-
-  const checkingRange = {
-    min: range.min + offset,
-    max: range.max + offset
-  };
-
-  // 완전히 보이지 않음
-  if (checkingRange.max <= visibleRange.min || checkingRange.min >= visibleRange.max) {
-    return 0;
-  }
-
-  let visibleSize = size;
-
-  // 보이는 부분 계산
-  if (visibleRange.min > checkingRange.min) {
-    visibleSize -= visibleRange.min - checkingRange.min;
-  }
-  if (visibleRange.max < checkingRange.max) {
-    visibleSize -= checkingRange.max - visibleRange.max;
-  }
-
-  return visibleSize / size;
-}
-```
-
-```mermaid
-graph TD
-    A[가시성 계산] --> B{뷰포트 범위 확인}
-    B -->|완전히 보이지 않음| C[0 반환]
-    B -->|부분적으로 보임| D[보이는 부분 계산]
-    D --> E[가시성 비율 계산]
-```
-
-## 5. 순환 모드 위치 처리
-
-### 5.1 토글 방향과 위치
-```typescript
-public updateCircularToggleDirection(): this {
-  const flicking = this._flicking;
-  if (!flicking.circularEnabled) {
-    this._toggleDirection = DIRECTION.NONE;
-    this._togglePosition = 0;
-    this._toggled = false;
-    return this;
-  }
-
-  const camera = flicking.camera;
-  const camRange = camera.range;
-  const camAlignPosition = camera.alignPosition;
-  const camVisibleRange = camera.visibleRange;
-  const camVisibleSize = camVisibleRange.max - camVisibleRange.min;
-
-  // Calculate visibility boundaries
-  const minimumVisible = camRange.min - camAlignPosition;
-  const maximumVisible = camRange.max - camAlignPosition + camVisibleSize;
-
-  // Check if panel should be visible at boundaries
-  const shouldBeVisibleAtMin = this.includeRange(
-    maximumVisible - camVisibleSize, 
-    maximumVisible, 
-    false
-  );
-  const shouldBeVisibleAtMax = this.includeRange(
-    minimumVisible, 
-    minimumVisible + camVisibleSize, 
-    false
-  );
-
-  // Set toggle direction and position
-  this._toggled = false;
-  if (shouldBeVisibleAtMin) {
-    this._toggleDirection = DIRECTION.PREV;
-    this._togglePosition = this.range.max + camRange.min - camRange.max + camAlignPosition;
-    this.toggle(Infinity, camera.position);
-  } else if (shouldBeVisibleAtMax) {
-    this._toggleDirection = DIRECTION.NEXT;
-    this._togglePosition = this.range.min + camRange.max - camVisibleSize + camAlignPosition;
-    this.toggle(-Infinity, camera.position);
-  } else {
-    this._toggleDirection = DIRECTION.NONE;
-    this._togglePosition = 0;
-  }
-
-  return this;
-}
-```
-
-```mermaid
-graph TD
-    A[순환 모드 위치 처리] --> B{순환 모드 활성화?}
-    B -->|No| C[토글 비활성화]
-    B -->|Yes| D[가시성 경계 계산]
-    D --> E{경계에서 보여야 함?}
-    E -->|Yes| F[토글 방향 설정]
-    E -->|No| G[토글 비활성화]
-```
-
-## 6. 주요 기능
-
-1. **소수점 크기 지원**
-   - `useFractionalSize` 옵션으로 서브픽셀 크기 처리
-   - 1px 오프셋 이슈 방지
-
-2. **마진 처리**
-   - 콘텐츠 크기와 마진을 포함한 총 크기 분리
-   - 가로/세로 모드에 따른 마진 방향 처리
-
-3. **순환 모드**
-   - 위치 토글을 통한 무한 스크롤 지원
-   - 부드러운 전환을 위한 최적의 토글 위치 계산
-
-4. **가시성 감지**
-   - 정확한 가시 영역 계산
-   - 뷰포트 경계에서의 부분 가시성 처리
-
-5. **정렬 시스템**
-   - 유연한 정렬 옵션 (prev, center, next, custom)
-   - 패널과 카메라 모두에 대한 정렬 지원 

package/scratch/dist/flicking.css

@@ -1,11 +0,0 @@
-.flicking-viewport {
-  position: relative;
-  overflow: hidden;
-}
-.flicking-viewport .flicking-camera {
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-}