import FrameLayout, { IFrameLayoutInterface, IFrameShape } from "./FrameLayout";
import { fill } from "../utils";
import { IInfiniteGridItem } from "../types";
function makeShapeOutline(
outline: number[],
itemSize: number,
columnLength: number,
isAppend?: boolean,
) {
const point = Math[isAppend ? "min" : "max"](...outline) || 0;
if (outline.length !== columnLength) {
return fill(new Array(columnLength), 0);
}
return outline.map(l => Math.floor((l - point) / itemSize));
}
function getColumn(item: IInfiniteGridItem) {
if (item.column) {
return item.column;
}
let column = 1;
if (item.el) {
column = parseInt(item.el.getAttribute("data-column")!, 10) || 1;
}
item.column = column;
return column;
}
export interface ISquareLayoutOptions extends IFrameLayoutInterface {
column: number;
}
/**
* @classdesc SquareLayout is a layout that places all cards like squares on a checkerboard, and important cards are n times larger. The main card can be enlarged, and then a small card can be placed to naturally show the relationship of the card.
* @ko SquareLayout은 바둑판처럼 모든 카드를 정사각형으로 배치하고 중요한 카드는 크기를 N배로 키워서 보여주는 레이아웃이다. 주요 카드를 크게 표시하고, 그 다음에 작은 카드를 배치해 자연스럽게 카드의 관계를 나타낼 수 있습니다.
* @class eg.InfiniteGrid.SquareLayout
* @extends eg.InfiniteGrid.FrameLayout
* @param {Object} [options] The option object of eg.InfiniteGrid.SquareLayout module <ko>eg.InfiniteGrid.SquareLayout 모듈의 옵션 객체</ko>
* @param {String} [options.margin=0] Margin used to create space around items <ko>아이템들 사이의 공간</ko>
* @param {Boolean} [options.horizontal=false] Direction of the scroll movement (false: vertical, true: horizontal) <ko>스크롤 이동 방향 (false: 세로방향, true: 가로방향)</ko>
* @param {Boolean} [options.itemSize=0] The size of the items. If it is 0, it is calculated as the size of the first item in items. (priority: `column` > `itemSize` > element's size)<ko> 아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. (우선순위: `column` > `itemSize` > 엘리먼트의 사이즈) </ko>
* @param {Boolean} [options.column=0] The number of columns in the layout. If it is 0, the column is returned by `itemSize`. (priority: `column` > `itemSize` > element's size)<ko> 레이아웃의 열의 개수. 만약 column이 0이면, `itemSize`로 열을 구합니다. (우선순위: `column` > `itemSize` > 엘리먼트의 사이즈) </ko>
* @example
```
<script>
var ig = new eg.InfiniteGrid("#grid". {
horizontal: true,
});
ig.setLayout(eg.InfiniteGrid.SquareLayout, {
margin: 10,
itemSize: 200,
});
// or
var layout = new eg.InfiniteGrid.SquareLayout({
margin: 10,
itemSize: 200,
horizontal: true,
});
var item1 = '<div data-column="2"></div>';
var item2 = "<div></div>"
layout.append([item1, item2]);
</script>
```
**/
export default class SquareLayout extends FrameLayout {
public options: ISquareLayoutOptions;
constructor(options: Partial<ISquareLayoutOptions> = {}) {
super(options);
}
protected _layout(
items: IInfiniteGridItem[],
outline: number[] = [],
isAppend: boolean = false,
) {
const itemSize = this._getSquareSize(items[0]) as number;
const margin = this.options.margin;
const columnLength = this.options.column ||
Math.floor((this._size + margin) / (itemSize + margin)) || 1;
const length = items.length;
const endOutline = makeShapeOutline(outline, Math.floor(itemSize), columnLength, isAppend);
const pointCaculateName = isAppend ? "min" : "max";
const shapes: IFrameShape[] = [];
const sign = isAppend ? 1 : -1;
const style = this._style;
const pos1Name = style.startPos1;
const pos2Name = style.startPos2;
for (let i = 0; i < length; ++i) {
const point = Math[pointCaculateName](...endOutline);
let index = endOutline[isAppend ? "indexOf" : "lastIndexOf"](point);
const item = items[i];
const columnWidth = item.columnWidth;
const column = (columnWidth && columnWidth[0] === columnLength &&
columnWidth[1]) || getColumn(item);
let columnCount = 1;
if (column > 1) {
for (let j = 1; j < column &&
((isAppend && index + j < columnLength) || (!isAppend && index - j >= 0)); ++j) {
if ((isAppend && endOutline[index + sign * j] <= point) ||
(!isAppend && endOutline[index + sign * j] >= point)) {
++columnCount;
continue;
}
break;
}
if (!isAppend) {
index -= columnCount - 1;
}
}
item.columnWidth = [columnLength, columnCount];
shapes.push({
width: columnCount,
height: columnCount,
[pos1Name]: point - (!isAppend ? columnCount : 0),
[pos2Name]: index,
type: i + 1,
index: i,
});
for (let j = 0; j < columnCount; ++j) {
endOutline[index + j] = point + sign * columnCount;
}
}
this._shapes = {
shapes,
[style.size2]: columnLength,
};
const result = super._layout(items, outline, isAppend);
if (!isAppend) {
shapes.sort((shape1, shape2) => {
const item1pos1 = shape1[pos1Name]!;
const item1pos2 = shape1[pos2Name]!;
const item2pos1 = shape2[pos1Name]!;
const item2pos2 = shape2[pos2Name]!;
if (item1pos1 - item2pos1) {
return item1pos1 - item2pos1;
}
return item1pos2 - item2pos2;
});
items.sort((a, b) => {
const item1pos1 = a.rect[pos1Name];
const item1pos2 = a.rect[pos2Name];
const item2pos1 = b.rect[pos1Name];
const item2pos2 = b.rect[pos2Name];
if (item1pos1 - item2pos1) {
return item1pos1 - item2pos1;
}
return item1pos2 - item2pos2;
});
}
return result;
}
private _getSquareSize(item: IInfiniteGridItem) {
const { column, margin, itemSize } = this.options;
if (column) {
// if column is in options, caculate itemSize from column.
this._itemSize = (this._size + margin) / column - margin;
} else if (itemSize) {
this._itemSize = this.options.itemSize;
} else {
const sizeName = this._style.size2;
// if frameSize is 0, caculate frameSize from item.size.
const frameSize
= this._shapes[sizeName]
|| Math.floor((this._size + margin) / (item.size![sizeName]! + margin) / getColumn(item));
this._itemSize = (this._size + margin) / frameSize - margin;
}
return this._itemSize;
}
}
InfiniteGrid