@egjs/grid/declaration/grids/PackingGrid.d.ts

A component that can arrange items according to the type of grids

/**
 * egjs-grid
 * Copyright (c) 2021-present NAVER Corp.
 * MIT license
 */
import Grid from "../Grid";
import { PROPERTY_TYPE } from "../consts";
import { GridOptions, Properties, GridOutlines } from "../types";
import { GridItem } from "../GridItem";
/**
 * @typedef
 * @memberof Grid.PackingGrid
 * @extends Grid.GridOptions
 */
export interface PackingGridOptions extends GridOptions {
    /**
     * The aspect ratio (inlineSize / contentSize) of the container with items.
     * <ko>아이템들을 가진 컨테이너의 종횡비(inlineSize / contentSize).</ko>
     * @default 1
     */
    aspectRatio?: number;
    /**
     * The size weight when placing items.
     * <ko>아이템들을 배치하는데 사이즈 가중치.</ko>
     * @default 1
     */
    sizeWeight?: number;
    /**
     * The weight to keep ratio when placing items.
     * <ko>아이템들을 배치하는데 비율을 유지하는 가중치.</ko>
     * @default 1
     */
    ratioWeight?: number;
    /**
     * The priority that determines the weight of the item. "size" = (sizeWieght: 100, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 100), "custom" = (set sizeWeight, ratioWeight)
     * item's weight = item's ratio(inlineSize / contentSize) change * `ratioWeight` + size(inlineSize * contentSize) change * `sizeWeight`.
     * <ko> 아이템의 가중치를 결정하는 우선수치. "size" = (sizeWieght: 100, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 100), "custom" = (set sizeWeight, ratioWeight). 아이템의 가중치 = ratio(inlineSize / contentSize)의 변화량 * `ratioWeight` + size(inlineSize * contentSize)의 변화량 * `sizeWeight`.</ko>
     * @default "custom"
     */
    weightPriority?: "size" | "ratio" | "custom";
}
/**
 * The PackingGrid is a grid that shows the important items bigger without sacrificing the weight of the items.
 * Rows and columns are separated so that items are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.
 * If `sizeWeight` is higher than `ratioWeight`, the size of items is preserved as much as possible.
 * Conversely, if `ratioWeight` is higher than `sizeWeight`, the ratio of items is preserved as much as possible.
 * @ko PackingGrid는 아이템의 본래 크기에 따른 비중을 해치지 않으면서 중요한 카드는 더 크게 보여 주는 레이아웃이다.
 * 행과 열이 구분돼 아이템을 정돈되게 배치하는 대신 가로세로 일정 공간 내에서 동적으로 아이템을 배치한다.
 * `sizeWeight`가 `ratioWeight`보다 높으면 아이템들의 size가 최대한 보존이 된다.
 * 반대로 `ratioWeight`가 `sizeWeight`보다 높으면 아이템들의 비율이 최대한 보존이 된다.
 * @memberof Grid
 * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
 * @param {Grid.PackingGrid.PackingGridOptions} options - The option object of the PackingGrid module <ko>PackingGrid 모듈의 옵션 객체</ko>
 */
export declare class PackingGrid extends Grid<PackingGridOptions> {
    static propertyTypes: {
        aspectRatio: PROPERTY_TYPE;
        sizeWeight: PROPERTY_TYPE;
        ratioWeight: PROPERTY_TYPE;
        weightPriority: PROPERTY_TYPE;
        gap: PROPERTY_TYPE;
        defaultDirection: PROPERTY_TYPE;
        renderOnPropertyChange: PROPERTY_TYPE;
        preserveUIOnDestroy: PROPERTY_TYPE;
        useFit: PROPERTY_TYPE;
        outlineSize: PROPERTY_TYPE;
        outlineLength: PROPERTY_TYPE;
    };
    static defaultOptions: Required<PackingGridOptions>;
    applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]): GridOutlines;
    private _findBestFitArea;
    getComputedOutlineLength(): number;
    getComputedOutlineSize(): number;
    private _getWeight;
}
export interface PackingGrid extends Properties<typeof PackingGrid> {
}
/**
 * The aspect ratio (inlineSize / contentSize) of the container with items.
 * @ko 아이템들을 가진 컨테이너의 종횡비(inlineSize / contentSize).
 * @name Grid.PackingGrid#aspectRatio
 * @type {$ts:Grid.PackingGrid.PackingGridOptions["aspectRatio"]}
 * @default 1
 * @example
 * ```js
 * import { PackingGrid } from "@egjs/grid";
 *
 * const grid = new PackingGrid(container, {
 *   aspectRatio: 1,
 * });
 *
 * grid.aspectRatio = 1.5;
 * ```
 */
/**
 * The priority that determines the weight of the item. "size" = (sizeWieght: 2, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 2), "custom" = (set sizeWeight, ratioWeight)
 * item's weight = item's ratio(inlineSize / contentSize) change * `ratioWeight` + size(inlineSize * contentSize) change * `sizeWeight`.
 * @ko 아이템의 가중치를 결정하는 우선수치. "size" = (sizeWieght: 2, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 2), "custom" = (set sizeWeight, ratioWeight). 아이템의 가중치 = ratio(inlineSize / contentSize)의 변화량 * `ratioWeight` + size(inlineSize * contentSize)의 변화량 * `sizeWeight`.
 * @name Grid.PackingGrid#weightPriority
 * @type {$ts:Grid.PackingGrid.PackingGridOptions["weightPriority"]}
 * @default "custom"
 * @example
 * ```js
 * import { PackingGrid } from "@egjs/grid";
 *
 * const grid = new PackingGrid(container, {
 *   weightPriority: "custom",
 *   sizeWeight: 1,
 *   ratioWeight: 1,
 * });
 *
 * grid.weightPriority = "size";
 * // or
 * grid.weightPriority = "ratio";
 * ```
 */
/**
 * The size weight when placing items.
 * @ko 아이템들을 배치하는데 사이즈 가중치.
 * @name Grid.PackingGrid#sizeWeight
 * @type {$ts:Grid.PackingGrid.PackingGridOptions["sizeWeight"]}
 * @default 1
 * @example
 * ```js
 * import { PackingGrid } from "@egjs/grid";
 *
 * const grid = new PackingGrid(container, {
 *   sizeWeight: 1,
 * });
 *
 * grid.sizeWeight = 10;
 * ```
 */
/**
 * The weight to keep ratio when placing items.
 * @ko 아이템들을 배치하는데 비율을 유지하는 가중치.
 * @name Grid.PackingGrid#ratioWeight
 * @type {$ts:Grid.PackingGrid.PackingGridOptions["ratioWeight"]}
 * @default 1
 * @example
 * ```js
 * import { PackingGrid } from "@egjs/grid";
 *
 * const grid = new PackingGrid(container, {
 *   ratioWeight: 1,
 * });
 *
 * grid.ratioWeight = 10;
 * ```
 */