feat(Layout): add index to group's outline

naver · Oct 24, 2017 · be738d8 · be738d8
1 parent c4b8663
commit be738d8
Show file tree

Hide file tree

Showing 9 changed files with 275 additions and 7 deletions.
diff --git a/src/layouts/FrameLayout.js b/src/layouts/FrameLayout.js
@@ -117,9 +117,13 @@ class FrameLayout {
 		const endOutline = new Array(shapesSize).fill(0);
 		let dist = 0;
 		let end = 0;
+		let startIndex = -1;
+		let endIndex = -1;
+		let minPos = -1;
+		let maxPos = -1;
 
 		if (!shapesLength) {
-			return {start: outline, end: outline};
+			return {start: outline, end: outline, startIndex, endIndex};
 		}
 		for (let i = 0; i < length; i += shapesLength) {
 			for (let j = 0; j < shapesLength && i + j < length; ++j) {
@@ -138,6 +142,20 @@ class FrameLayout {
 					if (startOutline[k] === -1) {
 						startOutline[k] = pos1;
 					}
+					if (startIndex === -1) {
+						minPos = pos1;
+						startIndex = i + j;
+						maxPos = pos1 + size1 + margin;
+						endIndex = i + j;
+					}
+					if (minPos > pos1) {
+						minPos = pos1;
+						startIndex = i + j;
+					}
+					if (maxPos < pos1 + size1 + margin) {
+						maxPos = pos1 + size1 + margin;
+						endIndex = i + j;
+					}
 					startOutline[k] = Math.min(startOutline[k], pos1);
 					endOutline[k] = Math.max(endOutline[k], pos1 + size1 + margin);
 				}
@@ -194,6 +212,8 @@ class FrameLayout {
 		return {
 			start: startOutline,
 			end: endOutline,
+			startIndex,
+			endIndex,
 		};
 	}
 	_insert(items, outline, type) {

diff --git a/src/layouts/GridLayout.js b/src/layouts/GridLayout.js
@@ -57,6 +57,9 @@ class GridLayout {
 		const pointCaculateName = isAppend ? "min" : "max";
 		const startOutline = outline.slice();
 		const endOutline = outline.slice();
+		const startIndex = 0;
+		let endIndex = -1;
+		let endPos = -1;
 
 		for (let i = 0; i < length; ++i) {
 			const point = Math[pointCaculateName](...endOutline) || 0;
@@ -66,7 +69,6 @@ class GridLayout {
 			const size2 = item.size[size2Name];
 			const pos1 = isAppend ? point : point - margin - size1;
 			const endPos1 = pos1 + size1 + margin;
-
 			if (index === -1) {
 				index = 0;
 			}
@@ -87,6 +89,13 @@ class GridLayout {
 			};
 			item.column = index;
 			endOutline[index] = isAppend ? endPos1 : pos1;
+			if (endIndex === -1) {
+				endIndex = i;
+				endPos = endPos1;
+			} else if (endPos < endPos1) {
+				endIndex = i;
+				endPos = endPos1;
+			}
 		}
 		if (!isAppend) {
 			items.sort((a, b) => {
@@ -100,12 +109,15 @@ class GridLayout {
 				}
 				return item1pos2 - item2pos2;
 			});
+			endIndex = length - 1;
 		}
 		// if append items, startOutline is low, endOutline is high
 		// if prepend items, startOutline is high, endOutline is low
 		return {
 			start: isAppend ? startOutline : endOutline,
 			end: isAppend ? endOutline : startOutline,
+			startIndex,
+			endIndex,
 		};
 	}
 	_insert(items = [], outline = [], type) {

diff --git a/src/layouts/JustifiedLayout.js b/src/layouts/JustifiedLayout.js
@@ -122,12 +122,16 @@ class JustifiedLayout {
 			height += margin + size1;
 			endPoint = startPoint + height;
 		}
+		const startIndex = length ? 0 : -1;
+		const endIndex = length ? length - 1 : -1;
 
 		if (isAppend) {
 			// previous group's end outline is current group's start outline
 			return {
 				start: [startPoint],
 				end: [endPoint],
+				startIndex,
+				endIndex,
 			};
 		}
 		// for prepend, only substract height from position.
@@ -143,6 +147,8 @@ class JustifiedLayout {
 		return {
 			start: [startPoint - height],
 			end: [startPoint], // endPoint - height = startPoint
+			startIndex,
+			endIndex,
 		};
 	}
 	_insert(items, outline, type) {

diff --git a/src/layouts/PackingLayout.js b/src/layouts/PackingLayout.js
@@ -115,6 +115,7 @@ class PackingLayout {
 		const aspectRatio = this.options.aspectRatio;
 		const margin = this.options.margin;
 		const pos1Name = style.pos1;
+		const size1Name = style.size1;
 		const containerWidth = this._size * (isHorizontal ? aspectRatio : 1);
 		const containerHeight = this._size / (isHorizontal ? 1 : aspectRatio);
 		const containerSize1 = isHorizontal ? containerWidth : containerHeight;
@@ -124,6 +125,11 @@ class PackingLayout {
 		const end = start + containerSize1 + margin;
 		const container = new BoxModel({});
 
+		let startIndex = -1;
+		let endIndex = -1;
+		let startPos = -1;
+		let endPos = -1;
+
 		items.forEach(item => {
 			const model = new BoxModel({
 				originWidth: item.size.width,
@@ -141,11 +147,28 @@ class PackingLayout {
 
 			item.rect = {top, left, width: width - margin, height: height - margin};
 			item.rect[pos1Name] += start;
+
+			if (startIndex === -1) {
+				startIndex = i;
+				endIndex = i;
+				startPos = item.rect[pos1Name];
+				endPos = startPos;
+			}
+			if (startPos > item.rect[pos1Name]) {
+				startPos = item.rect[pos1Name];
+				startIndex = i;
+			}
+			if (endPos < item.rect[pos1Name] + item.rect[size1Name] + margin) {
+				endPos = item.rect[pos1Name] + item.rect[size1Name] + margin;
+				endIndex = i;
+			}
 		});
 
 		return {
 			start: [start],
 			end: [end],
+			startIndex,
+			endIndex,
 		};
 	}
 	_insert(items, outline, type) {

diff --git a/test/manual/layouts/GridLayout.html b/test/manual/layouts/GridLayout.html
@@ -82,8 +82,8 @@
 	}
 
 	append(undefined, 9);
-	// append(undefined, 12);
-	// append(undefined, 7);
+	append(undefined, 12);
+	append(undefined, 7);
 </script>
 </body>
 </html>
diff --git a/test/unit/layouts/FrameLayout.spec.js b/test/unit/layouts/FrameLayout.spec.js
@@ -1,6 +1,6 @@
 /* global describe, beforeEach, afterEach, it, expect */
 import {makeItems, VIEWPORT} from "./data";
-import { checkMargin, checkDirection, expectConnectItems, expectConnectGroups, expectNoOutline, expectSameAppendPrepend, expectAppend} from "./common";
+import { checkMargin, checkDirection, expectConnectItems, expectConnectGroups, expectNoOutline, expectSameAppendPrepend, expectAppend, expectOutlineIndex} from "./common";
 import Layout from "../../../src/layouts/FrameLayout";
 
 
@@ -69,6 +69,25 @@ describe("FrameLayout Test", function () {
 			// Then
 			expectAppend(layout, items, [100, 100, 100, 100, 100]);
 		});
+		it("test outline indicies", function () {
+			// Given
+			const frame = [
+				["A", "A", "B", "C", "D"],
+				["A", "A", "E", "F", "G"],
+				["H", "I", "J", "K", "L"],
+			];
+			const layout = new Layout({
+				frame,
+			});
+
+			layout.setSize(VIEWPORT.width);
+			const items = makeItems(24);			
+			const group = layout.append(items, []);
+			const group2 = layout.append(items, [0, 0, 0, 0, 100]);
+			// Then
+			expectOutlineIndex(layout, group);
+			expectOutlineIndex(layout, group2);
+		});
 		it("test prepend from end outline and append from start outline are the same", function() {
 			// Given
 			const frame = [

diff --git a/test/unit/layouts/GridLayout.spec.js b/test/unit/layouts/GridLayout.spec.js
@@ -1,14 +1,14 @@
 /* global describe, beforeEach, afterEach, it, expect */
 import { makeItems, VIEWPORT } from "./data";
-import { checkMargin, checkDirection, expectConnectItems, expectConnectGroups, expectNoOutline, expectSameAppendPrepend, expectAppend } from "./common";
+import { checkMargin, checkDirection, expectConnectItems, expectOutlineIndex, expectNoOutline, expectSameAppendPrepend, expectAppend } from "./common";
 import Layout from "../../../src/layouts/GridLayout";
 import {ALIGN} from "../../../src/layouts/Constants";
 import {getStyleNames} from "../../../src/layouts/utils";
 
 // ALIGN
 const {START, CENTER, END, JUSTIFY} = ALIGN;
 
-describe("GirdLayout Test", function () {
+describe("GridLayout Test", function () {
 	const items = makeItems(20);
 	const width = 100;
 
@@ -46,6 +46,19 @@ describe("GirdLayout Test", function () {
 			layout.setSize(VIEWPORT.width);
 			// Then
 			expectAppend(layout, items, [100, 100, 100, 100]);
+
+		});
+		it("test outline indicies", function () {
+			// Given
+			const layout = new Layout({
+				itemSize: 200,
+			});
+			layout.setSize(VIEWPORT.width);
+			const group = layout.append(items, []);
+			const group2 = layout.append(items, [-1, 1, 2, -2]);
+			// Then
+			expectOutlineIndex(layout, group);
+			expectOutlineIndex(layout, group2);
 		});
 		it("test prepend from end outline and append from start outline are the same", function () {
 			// Given