InfiniteGrid

Source: src/layouts/FrameLayout.ts

  1. import { DUMMY_POSITION } from "../consts";
  2. import { getStyleNames, assignOptions, fill, cloneItems } from "../utils";
  3. import { ILayout, IRectlProperties, ISize, IInfiniteGridGroup, IInfiniteGridItem } from "../types";
  5. export type FrameType = number[][];
  6. export interface IFrameShape {
  7. 	left?: number;
  8. 	top?: number;
  9. 	type: any;
  10. 	width: number;
  11. 	height: number;
  12. 	index?: number;
  13. }
  14. export interface IFrameLayoutInterface {
  15. 	horizontal: boolean;
  16. 	margin: number;
  17. 	frame: FrameType;
  18. 	frameFill: boolean;
  19. 	itemSize: number | ISize;
  20. 	[key: string]: any;
  21. }
  22. /*
  23. Frame
  24. [
  25. [1, 1, 1, 1, 1],
  26. [0, 0, 2, 2, 2],
  27. [0, 0, 2, 2, 2],
  28. [3, 4, 5, 5, 5],
  29. ]
  30. */
  31. function disableFrame(
  32. 	frame: FrameType,
  33. 	type: number,
  34. 	top: number,
  35. 	left: number,
  36. 	width: number,
  37. 	height: number,
  38. ) {
  39. 	for (let i = top; i < top + height; ++i) {
  40. 		for (let j = left; j < left + width; ++j) {
  41. 			if (type !== frame[i][j]) {
  42. 				continue;
  43. 			}
  44. 			frame[i][j] = 0;
  45. 		}
  46. 	}
  47. }
  48. function searchShapeInFrame(
  49. 	frame: FrameType,
  50. 	type: number,
  51. 	top: number,
  52. 	left: number,
  53. 	width: number,
  54. 	height: number,
  55. ) {
  56. 	const size: IFrameShape = {
  57. 		left,
  58. 		top,
  59. 		type,
  60. 		width: 1,
  61. 		height: 1,
  62. 	};
  64. 	for (let i = left; i < width; ++i) {
  65. 		if (frame[top][i] === type) {
  66. 			size.width = i - left + 1;
  67. 			continue;
  68. 		}
  69. 		break;
  70. 	}
  71. 	for (let i = top; i < height; ++i) {
  72. 		if (frame[i][left] === type) {
  73. 			size.height = i - top + 1;
  74. 			continue;
  75. 		}
  76. 		break;
  77. 	}
  78. 	// After finding the shape, it will not find again.
  79. 	disableFrame(frame, type, top, left, size.width, size.height);
  80. 	return size;
  81. }
  82. function getShapes(frame: FrameType) {
  83. 	const height = frame.length;
  84. 	const width = height ? frame[0].length : 0;
  85. 	const shapes: IFrameShape[] = [];
  87. 	for (let i = 0; i < height; ++i) {
  88. 		for (let j = 0; j < width; ++j) {
  89. 			const type = frame[i][j];
  91. 			if (!type) {
  92. 				continue;
  93. 			}
  94. 			// Separate shapes with other numbers.
  95. 			shapes.push(searchShapeInFrame(frame, type, i, j, width, height));
  96. 		}
  97. 	}
  98. 	shapes.sort((a, b) => (a.type < b.type ? -1 : 1));
  99. 	return {
  100. 		shapes,
  101. 		width,
  102. 		height,
  103. 	};
  104. }
  105. /**
  106.  * @classdesc FrameLayout is a layout that allows you to place cards in a given frame. It is a layout that corresponds to a level intermediate between the placement of the image directly by the designer and the layout using the algorithm.
  107.  * @ko FrameLayout은 주어진 프레임에 맞춰 카드를 배치하는 레이아웃입니다. 디자이너가 직접 이미지를 배치하는 것과 알고리즘을 사용한 배치의 중간 정도 수준에 해당하는 레이아웃이다.
  108.  * @class eg.InfiniteGrid.FrameLayout
  109.  * @param {Object} [options] The option object of eg.InfiniteGrid.FrameLayout module <ko>eg.InfiniteGrid.FrameLayout 모듈의 옵션 객체</ko>
  110.  * @param {String} [options.margin=0] Margin used to create space around items <ko>아이템들 사이의 공간</ko>
  111.  * @param {Boolean} [options.horizontal=false] Direction of the scroll movement (false: vertical, true: horizontal) <ko>스크롤 이동 방향 (false: 세로방향, true: 가로방향)</ko>
  112.  * @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>
  113.  * @param {Boolean} [options.frame=[]] The size of the items. If it is 0, it is calculated as the size of the first item in items. <ko> 아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. </ko>
  114.  * @param {Boolean} [options.frameFill=true] Make sure that the frame can be attached after the previous frame. <ko> 다음 프레임이 전 프레임에 이어 붙일 수 있는지 있는지 확인한다. </ko>
  115.  * @example
  116. ```
  117. <script>
  118. var ig = new eg.InfiniteGrid("#grid". {
  119.   horizontal: true,
  120. });
  122. ig.setLayout(eg.InfiniteGrid.FrameLayout, {
  123.   margin: 10,
  124.   itemSize: 200,
  125.   frame: [
  126.     [1, 1, 1, 1, 1],
  127.     [0, 0, 2, 2, 2],
  128.     [0, 0, 2, 2, 2],
  129.     [3, 4, 5, 5, 5],
  130.   ],
  131. });
  133. // or
  135. var layout = new eg.InfiniteGrid.FrameLayout({
  136.   margin: 10,
  137.   itemSize: 200,
  138.   horizontal: true,
  139.   frame: [
  140.     [1, 1, 1, 1, 1],
  141.     [0, 0, 2, 2, 2],
  142.     [0, 0, 2, 2, 2],
  143.     [3, 4, 5, 5, 5],
  144.   ],
  145. });
  147. </script>
  148. ```
  149.  **/
  150. class FrameLayout implements ILayout {
  151. 	public options: IFrameLayoutInterface;
  152. 	protected _itemSize: number | ISize;
  153. 	protected _shapes: {
  154. 		shapes: IFrameShape[],
  155. 		width?: number,
  156. 		height?: number,
  157. 	};
  158. 	protected _size: number;
  159. 	protected _style: IRectlProperties;
  161. 	constructor(options: Partial<IFrameLayoutInterface> = {}) {
  162. 		this.options = assignOptions({
  163. 			margin: 0,
  164. 			horizontal: false,
  165. 			itemSize: 0,
  166. 			frame: [],
  167. 			frameFill: true,
  168. 		}, options);
  169. 		const frame = this.options.frame.map(row => row.slice());
  171. 		this._itemSize = this.options.itemSize || 0;
  172. 		// divide frame into shapes.
  173. 		this._shapes = getShapes(frame);
  174. 		this._size = 0;
  175. 		this._style = getStyleNames(this.options.horizontal);
  176. 	}
  177. 	/**
  178. 	 * Adds items of groups at the bottom of a outline.
  179. 	 * @ko 그룹들의 아이템들을 아웃라인 아래에 추가한다.
  180. 	 * @method eg.InfiniteGrid.FrameLayout#layout
  181. 	 * @param {Array} groups Array of groups to be layouted <ko>레이아웃할 그룹들의 배열</ko>
  182. 	 * @param {Array} outline Array of outline points to be reference points <ko>기준점이 되는 아웃라인 점들의 배열</ko>
  183. 	 * @return {eg.InfiniteGrid.FrameLayout} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  184. 	 * @example
  185. 	 * layout.layout(groups, [100, 200, 300, 400]);
  186. 	 */
  187. 	public layout(groups: IInfiniteGridGroup[] = [], outline: number[] = []) {
  188. 		const length = groups.length;
  189. 		let point = outline;
  191. 		for (let i = 0; i < length; ++i) {
  192. 			const group = groups[i];
  193. 			const outlines = this._layout(group.items, point, true);
  195. 			group.outlines = outlines;
  196. 			point = outlines.end;
  197. 		}
  198. 		return this;
  199. 	}
  200. 	/**
  201. 	 * Set the viewport size of the layout.
  202. 	 * @ko 레이아웃의 가시 사이즈를 설정한다.
  203. 	 * @method eg.InfiniteGrid.FrameLayout#setSize
  204. 	 * @param {Number} size The viewport size of container area where items are added to a layout <ko>레이아웃에 아이템을 추가하는 컨테이너 영역의 가시 사이즈</ko>
  205. 	 * @return {eg.InfiniteGrid.FrameLayout} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  206. 	 * @example
  207. 	 * layout.setSize(800);
  208. 	 */
  209. 	public setSize(size: number) {
  210. 		this._size = size;
  211. 		return this;
  212. 	}
  213. 	/**
  214. 	 * Adds items at the bottom of a outline.
  215. 	 * @ko 아이템들을 아웃라인 아래에 추가한다.
  216. 	 * @method eg.InfiniteGrid.FrameLayout#append
  217. 	 * @param {Array} items Array of items to be layouted <ko>레이아웃할 아이템들의 배열</ko>
  218. 	 * @param {Array} [outline=[]] Array of outline points to be reference points <ko>기준점이 되는 아웃라인 점들의 배열</ko>
  219. 	 * @return {Object} Layouted items and outline of start and end <ko> 레이아웃이 된 아이템과 시작과 끝의 아웃라인이 담긴 정보</ko>
  220. 	 * @example
  221. 	 * layout.prepend(items, [100]);
  222. 	 */
  223. 	public append(items: IInfiniteGridItem[], outline?: number[], cache?: boolean) {
  224. 		return this._insert(items, outline, true, cache);
  225. 	}
  226. 	/**
  227. 	 * Adds items at the top of a outline.
  228. 	 * @ko 아이템을 아웃라인 위에 추가한다.
  229. 	 * @method eg.InfiniteGrid.FrameLayout#prepend
  230. 	 * @param {Array} items Array of items to be layouted <ko>레이아웃할 아이템들의 배열</ko>
  231. 	 * @param {Array} [outline=[]] Array of outline points to be reference points <ko>기준점이 되는 아웃라인 점들의 배열</ko>
  232. 	 * @return {Object} Layouted items and outline of start and end <ko> 레이아웃이 된 아이템과 시작과 끝의 아웃라인이 담긴 정보</ko>
  233. 	 * @example
  234. 	 * layout.prepend(items, [100]);
  235. 	 */
  236. 	public prepend(items: IInfiniteGridItem[], outline?: number[], cache?: boolean) {
  237. 		return this._insert(items, outline, false, cache);
  238. 	}
  239. 	protected _getItemSize() {
  240. 		this._checkItemSize();
  242. 		return this._itemSize;
  243. 	}
  244. 	protected _checkItemSize() {
  245. 		if (this.options.itemSize) {
  246. 			this._itemSize = this.options.itemSize;
  247. 			return;
  248. 		}
  249. 		const style = this._style;
  250. 		const size = style.size2;
  251. 		const margin = this.options.margin;
  253. 		// if itemSize is not in options, caculate itemSize from size.
  254. 		this._itemSize = (this._size + margin) / this._shapes[size]! - margin;
  255. 	}
  256. 	protected _layout(items: IInfiniteGridItem[], outline: number[] = [], isAppend?: boolean) {
  257. 		const length = items.length;
  258. 		const style = this._style;
  259. 		const { margin, frameFill } = this.options;
  260. 		const size1Name = style.size1;
  261. 		const size2Name = style.size2;
  262. 		const pos1Name = style.startPos1;
  263. 		const pos2Name = style.startPos2;
  264. 		const itemSize = this._getItemSize();
  265. 		const isItemObject = typeof itemSize === "object";
  266. 		const itemSize2 = isItemObject ? (itemSize as ISize)[size2Name] : itemSize as number;
  267. 		const itemSize1 = isItemObject ? (itemSize as ISize)[size1Name] : itemSize as number;
  268. 		const shapesSize = this._shapes[size2Name]!;
  269. 		const shapes = this._shapes.shapes;
  270. 		const shapesLength = shapes.length;
  271. 		const startOutline = fill(new Array(shapesSize), DUMMY_POSITION);
  272. 		const endOutline = fill(new Array(shapesSize), DUMMY_POSITION);
  273. 		let dist = 0;
  274. 		let end = 0;
  276. 		if (!shapesLength) {
  277. 			return { start: outline, end: outline };
  278. 		}
  279. 		for (let i = 0; i < length; i += shapesLength) {
  280. 			for (let j = 0; j < shapesLength && i + j < length; ++j) {
  281. 				const item = items[i + j];
  282. 				const shape = shapes[j];
  283. 				const shapePos1 = shape[pos1Name]!;
  284. 				const shapePos2 = shape[pos2Name]!;
  285. 				const shapeSize1 = shape[size1Name]!;
  286. 				const shapeSize2 = shape[size2Name]!;
  287. 				const pos1 = end - dist + shapePos1 * (itemSize1 + margin);
  288. 				const pos2 = shapePos2 * (itemSize2 + margin);
  289. 				const size1 = shapeSize1 * (itemSize1 + margin) - margin;
  290. 				const size2 = shapeSize2 * (itemSize2 + margin) - margin;
  292. 				for (let k = shapePos2; k < shapePos2 + shapeSize2 && k < shapesSize; ++k) {
  293. 					if (startOutline[k] === DUMMY_POSITION) {
  294. 						startOutline[k] = pos1;
  295. 					}
  296. 					startOutline[k] = Math.min(startOutline[k], pos1);
  297. 					endOutline[k] = Math.max(endOutline[k], pos1 + size1 + margin);
  298. 				}
  299. 				item.rect = {
  300. 					[pos1Name]: pos1,
  301. 					[pos2Name]: pos2,
  302. 					[size1Name]: size1,
  303. 					[size2Name]: size2,
  304. 				} as any;
  305. 			}
  306. 			end = Math.max(...endOutline);
  307. 			// check dist once
  308. 			if (i !== 0) {
  309. 				continue;
  310. 			}
  311. 			// find & fill empty block
  312. 			if (!frameFill) {
  313. 				dist = 0;
  314. 				continue;
  315. 			}
  316. 			dist = end;
  318. 			for (let j = 0; j < shapesSize; ++j) {
  319. 				if (startOutline[j] === DUMMY_POSITION) {
  320. 					continue;
  321. 				}
  322. 				// the dist between frame's end outline and next frame's start outline
  323. 				// expect that next frame's start outline is startOutline[j] + end
  324. 				dist = Math.min(startOutline[j] + end - endOutline[j], dist);
  325. 			}
  326. 		}
  327. 		for (let i = 0; i < shapesSize; ++i) {
  328. 			if (startOutline[i] !== DUMMY_POSITION) {
  329. 				continue;
  330. 			}
  331. 			startOutline[i] = Math.max(...startOutline);
  332. 			endOutline[i] = startOutline[i];
  333. 		}
  334. 		// The target outline is start outline when type is appending
  335. 		const targetOutline = isAppend ? startOutline : endOutline;
  336. 		const prevOutlineEnd = outline.length === 0 ? 0 : Math[isAppend ? "max" : "min"](...outline);
  337. 		let prevOutlineDist = isAppend ? 0 : end;
  339. 		if (frameFill && outline.length === shapesSize) {
  340. 			prevOutlineDist = -DUMMY_POSITION;
  341. 			for (let i = 0; i < shapesSize; ++i) {
  342. 				if (startOutline[i] === endOutline[i]) {
  343. 					continue;
  344. 				}
  345. 				// if appending type is prepend(false), subtract dist from appending group's height.
  347. 				prevOutlineDist = Math.min(targetOutline[i] + prevOutlineEnd - outline[i], prevOutlineDist);
  348. 			}
  349. 		}
  350. 		for (let i = 0; i < shapesSize; ++i) {
  351. 			startOutline[i] += prevOutlineEnd - prevOutlineDist;
  352. 			endOutline[i] += prevOutlineEnd - prevOutlineDist;
  353. 		}
  354. 		items.forEach(item => {
  355. 			item.rect[pos1Name] += prevOutlineEnd - prevOutlineDist;
  356. 		});
  357. 		return {
  358. 			start: startOutline.map(point => parseInt(point, 10)),
  359. 			end: endOutline.map(point => parseInt(point, 10)),
  360. 		};
  361. 	}
  362. 	private _insert(items: IInfiniteGridItem[] = [], outline: number[] = [], isAppend?: boolean, cache?: boolean) {
  363. 		// this only needs the size of the item.
  364. 		const clone = cache ? items : cloneItems(items);
  366. 		return {
  367. 			items: clone,
  368. 			outlines: this._layout(clone, outline, isAppend),
  369. 		};
  370. 	}
  371. }
  373. export default FrameLayout;
comments powered by Disqus