Skip to content

Commit

Permalink
fix: caculate itemSize for no column, no itemSize (#311)
Browse files Browse the repository at this point in the history 
* fix: caculate itemSize for no column, no itemSize
  • Loading branch information
@daybrush
daybrush authored Jan 16, 2020
1 parent bee5b3d commit 5564e97
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 24 deletions.
35 changes: 21 additions & 14 deletions src/layouts/SquareLayout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ export interface ISquareLayoutOptions extends IFrameLayoutInterface {
* @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. <ko> 아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. </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>
Expand Down Expand Up @@ -71,24 +72,12 @@ export default class SquareLayout extends FrameLayout {
constructor(options: Partial<ISquareLayoutOptions> = {}) {
super(options);
}
protected _checkItemSize() {
const column = this.options.column;

if (!column) {
super._checkItemSize();
return;
}
const margin = this.options.margin;

// if itemSize is not in options, caculate itemSize from size.
this._itemSize = (this._size + margin) / column - margin;
}
protected _layout(
items: IInfiniteGridItem[],
outline: number[] = [],
isAppend: boolean = false,
) {
const itemSize = this._getItemSize() as number;
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;
Expand Down Expand Up @@ -170,4 +159,22 @@ export default class SquareLayout extends FrameLayout {
}
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;
}
}
17 changes: 9 additions & 8 deletions test/unit/helper/common.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {getStyleNames} from "../../../src/utils";
import { getStyleNames } from "../../../src/utils";

/* global expect */
function approximate(obj) {
Expand All @@ -16,10 +16,11 @@ export function checkDirection(callback, callback2 = callback) {
callback(false);
callback2(true);
}

export function expectOutlineIndex(layout, group) {
const {start, end} = group.outlines;
const {margin, direction} = layout.options;
const {startPos1, size1} = getStyleNames(direction);
const { start, end } = group.outlines;
const { margin, direction } = layout.options;
const { startPos1, size1 } = getStyleNames(direction);
const minPos = Math.min(...group.items.map(item => item.rect[startPos1]));
const maxPos = Math.min(...group.items.map(item => (item.rect[size1] || item.size[size1]) + item.rect[startPos1]));

Expand Down Expand Up @@ -63,7 +64,7 @@ export function expectNoOutline(layout, items) {
expect(group4.outlines.end).to.deep.equal(group5.outlines.end);
expect(group6.outlines.end).to.deep.equal(group6.outlines.end);
}
export function expectConnectItems({item1, item2, margin = 0, horizontal = false}) {
export function expectConnectItems({ item1, item2, margin = 0, horizontal = false }) {
if (horizontal === false) {
expect(item1.rect.top + (item1.rect.height || item1.size.height) + margin).to.be.equal(item2.rect.top);
} else {
Expand All @@ -74,7 +75,7 @@ export function expectConnectGroupsOutline(group1, group2) {
expect(group1.outlines.end.length).to.be.equal(group2.outlines.start.length);
expect(group1.outlines.end).to.deep.equal(group2.outlines.start);
}
export function expectConnectGroups({group1, items1, group2, items2, margin = 0, isConnect = true, horizontal = false}) {
export function expectConnectGroups({ group1, items1, group2, items2, margin = 0, isConnect = true, horizontal = false }) {
const end = group1.outlines.end;
const start = group2.outlines.start;
const length = end.length;
Expand All @@ -95,6 +96,6 @@ export function expectConnectGroups({group1, items1, group2, items2, margin = 0,
expect(end[i]).to.be.equal(start[i]);
} else {
expect(start[i]).to.be.at.least(end[i]);
}
}
}
}
}
140 changes: 138 additions & 2 deletions test/unit/layouts/SqaureLayout.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,25 @@
/* eslint-disable */
/* global describe, beforeEach, afterEach, it, expect */
import { makeItems, VIEWPORT } from "../helper/data";
import { checkMargin, checkDirection, expectConnectItems, expectConnectGroups, expectNoOutline, expectSameAppendPrepend, expectAppend, expectOutlineIndex, expectConnectGroupsOutline} from "../helper/common";
import { checkMargin, checkDirection, expectConnectItems, expectNoOutline, expectSameAppendPrepend, expectAppend, expectOutlineIndex, expectConnectGroupsOutline } from "../helper/common";
import Layout from "../../../src/layouts/SquareLayout";
import { getStyleNames } from "../../../src/utils";

function getMockItems(column) {
return [
{
size: { width: 100, height: 100 },
el: {
getAttribute: () => column,
},
},
{
size: { width: 100, height: 100 },
el: {
getAttribute: () => 1,
},
},
];
}

describe("SquareLayout Test", function () {
const items = makeItems(20);
Expand Down Expand Up @@ -49,6 +64,127 @@ describe("SquareLayout Test", function () {
expectSameAppendPrepend(layout, items);
});
});
describe("check itemSize in SquareLayout", function () {
[
{
column: 1,
dataColumn: 1,
expectSize1: 800,
expectSize2: 800,
},
{
column: 1,
dataColumn: 2,
expectSize1: 800,
expectSize2: 800,
},
{
column: 2,
dataColumn: 1,
// (800 - 5) / 2
expectSize1: 397.5,
expectSize2: 397.5,
},
{
column: 2,
dataColumn: 2,
expectSize1: 800,
expectSize2: 397.5,
},
].forEach(({ column, dataColumn, expectSize1, expectSize2 }) => {
it(`test itemSize when column is ${column} and data-column is ${dataColumn}`, function () {
// Given
// VIEWPORT.width = 800
const layout = new Layout({
column: column,
margin: 5,
}).setSize(VIEWPORT.width);

// When
const { items } = layout.append(getMockItems(dataColumn), []);

// Then
expect(items[0].rect.width).to.be.equals(expectSize1);
expect(items[1].rect.width).to.be.equals(expectSize2);
});
});
[
{
// column 7
itemSize: 100,
dataColumn: 1,
expectSize1: 100,
expectSize2: 100,
},
{
// column 3
itemSize: 200,
dataColumn: 2,
expectSize1: 405,
expectSize2: 200,
},
{
// column 3
itemSize: 200,
dataColumn: 1,
expectSize1: 200,
expectSize2: 200,
},
{
// column 7
itemSize: 100,
dataColumn: 2,
expectSize1: 205,
expectSize2: 100,
},
].forEach(({ itemSize, dataColumn, expectSize1, expectSize2 }) => {
it(`test itemSize when itemSize is ${itemSize} and data-column is ${dataColumn}`, function () {
// Given
// VIEWPORT.width = 800
const layout = new Layout({
itemSize,
margin: 5,
}).setSize(VIEWPORT.width);

// When
const { items } = layout.append(getMockItems(dataColumn), []);

// Then
expect(items[0].rect.width).to.be.equals(expectSize1);
expect(items[1].rect.width).to.be.equals(expectSize2);
});
});
[
{
// column 7
dataColumn: 1,
expectSize1: 110,
expectSize2: 110,
},
{
// column 3
dataColumn: 2,
expectSize1: (800 + 5) / 3 * 2 - 5,
expectSize2: (800 + 5) / 3 - 5,
},
].forEach(({ itemSize, dataColumn, expectSize1, expectSize2 }) => {
it(`test itemSize when only data-column is ${dataColumn}`, function () {
// Given
// VIEWPORT.width = 800
const layout = new Layout({
itemSize,
margin: 5,
}).setSize(VIEWPORT.width);

// When
const { items } = layout.append(getMockItems(dataColumn), []);

// Then
expect(items[0].rect.width).to.be.equals(expectSize1);
expect(items[1].rect.width).to.be.equals(expectSize2);
});
});
});
describe("append test", function () {
checkMargin([0, 10, 20], margin => {
it(`append items (margin = ${margin})`, () => {
Expand Down

0 comments on commit 5564e97

Please sign in to comment.