feat: add stretch option (#107)

* feat: add stretchRange option in JustifiedGrid

* feat: add passUnstretchRow

* fix: fix stretch cost

* feat: add index property in GridItem

* feat: add stretch, stretchRange, passUnstretchRow

* demo: add stretch demo

* test: test `stretch` options

* fix: fix FrameGrid useless code

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egjs/grid",
- "version": "1.15.0",
+ "version": "1.16.0-beta.7",
  "description": "A component that can arrange items according to the type of grids",
  "main": "dist/grid.cjs.js",
  "module": "dist/grid.esm.js",

packages/ngx-grid/projects/ngx-grid/src/lib/grids/ngx-justified-grid.component.ts

@@ -21,4 +21,7 @@ export class NgxJustifiedGridComponent
  @Input() sizeRange!: Required<JustifiedGrid>['sizeRange'];
  @Input() isCroppedSize!: Required<JustifiedGrid>['isCroppedSize'];
  @Input() displayedRow!: Required<JustifiedGrid>['displayedRow'];
+ @Input() stretch!: Required<JustifiedGrid>['stretch'];
+ @Input() stretchRange!: Required<JustifiedGrid>['stretchRange'];
+ @Input() passUnstretchRow!: Required<JustifiedGrid>['passUnstretchRow'];
 }

packages/ngx-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.ts

@@ -15,3 +15,4 @@ export * from "./1-JustifiedGrid.stories";
 export * from "./2-CroppedJustifiedGrid.stories";
 export * from "./3-KeepRatioWithOffset.stories";
 export * from "./4-KeepRatioWithMaintainedTarget.stories";
+export * from "./5-StretchedJustifiedGrid.stories";

packages/ngx-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts

@@ -0,0 +1,52 @@
+import { AppComponent } from './apps/NgxKeepRatioWithMaintainedTargetApp/app.component';
+import { JUSTIFIED_GRID_CONTROLS } from '../../../../stories/templates/controls';
+import { convertPath, convertAngularTemplate, makeArgs } from '../../../../stories/utils';
+import HTML_TEMPLATE from '!!raw-loader!./apps/NgxKeepRatioWithMaintainedTargetApp/app.component.html';
+import CSS_TEMPLATE from '!!raw-loader!../../../../stories/templates/default.css';
+import RawApp from '!!raw-loader!./apps/NgxKeepRatioWithMaintainedTargetApp/app.component.ts';
+import MODULE_TEMPLATE from '!!raw-loader!../apps/default/app.module.ts';
+
+export const StretchedJustifiedGridTemplate = (props: any) => ({
+ component: AppComponent,
+ props: {
+ ...props,
+ key: JSON.stringify(props),
+ },
+});
+StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid";
+
+
+StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS;
+StretchedJustifiedGridTemplate.args = {
+ ...makeArgs(StretchedJustifiedGridTemplate.argTypes),
+ stretch: true,
+ sizeRange: [200, 300],
+};
+
+StretchedJustifiedGridTemplate.parameters = {
+ preview: [
+ {
+ tab: "CSS",
+ template: CSS_TEMPLATE,
+ language: "css",
+ },
+ {
+ tab: "Angular",
+ template: HTML_TEMPLATE,
+ language: "html",
+ description: "app.component.html",
+ },
+ {
+ tab: "Angular",
+ template: convertAngularTemplate(convertPath(RawApp, "projects", "@egjs/ngx-grid")),
+ language: "ts",
+ description: "app.component.ts",
+ },
+ {
+ tab: "Angular",
+ template: convertPath(MODULE_TEMPLATE, "projects", "@egjs/ngx-grid"),
+ language: "ts",
+ description: "app.module.ts",
+ },
+ ],
+};

packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxJustifiedGridApp/app.component.html

@@ -6,6 +6,10 @@
  [sizeRange]="sizeRange"
  [isCroppedSize]="isCroppedSize"
  [displayedRow]="displayedRow"
+ [stretch]="stretch"
+ [stretchRange]="stretchRange"
+ [passUnstretchRow]="passUnstretchRow"
+
  *ngFor="let item of [0]; trackBy: trackBy;"
  >
  <div class="item">1</div>

packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxJustifiedGridApp/app.component.ts

@@ -13,6 +13,9 @@ export class AppComponent {
  @Input() sizeRange: any;
  @Input() isCroppedSize: any;
  @Input() displayedRow: any;
+ @Input() stretch!: any;
+ @Input() stretchRange!: any;
+ @Input() passUnstretchRow!: any;
  @Input() key: any;
  trackBy = () => this.key;
 }

packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxKeepRatioWithMaintainedTargetApp/app.component.html

@@ -7,6 +7,9 @@
  [sizeRange]="sizeRange"
  [isCroppedSize]="isCroppedSize"
  [displayedRow]="displayedRow"
+ [stretch]="stretch"
+ [stretchRange]="stretchRange"
+ [passUnstretchRow]="passUnstretchRow"
  *ngFor="let item of [0]; trackBy: trackBy;"
 >
  <div class="image">

packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxKeepRatioWithMaintainedTargetApp/app.component.ts

@@ -13,6 +13,9 @@ export class AppComponent {
  @Input() sizeRange: any;
  @Input() isCroppedSize: any;
  @Input() displayedRow: any;
+ @Input() stretch!: any;
+ @Input() stretchRange!: any;
+ @Input() passUnstretchRow!: any;
  @Input() key: any;
  trackBy = () => this.key;
 }

packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxKeepRatioWithOffsetApp/app.component.html

@@ -7,6 +7,9 @@
  [sizeRange]="sizeRange"
  [isCroppedSize]="isCroppedSize"
  [displayedRow]="displayedRow"
+ [stretch]="stretch"
+ [stretchRange]="stretchRange"
+ [passUnstretchRow]="passUnstretchRow"
  *ngFor="let item of [0]; trackBy: trackBy;"
 >
  <div class="image" data-grid-content-offset="40">

packages/ngx-grid/stories/2-JustifiedGrid/apps/NgxKeepRatioWithOffsetApp/app.component.ts

@@ -13,6 +13,9 @@ export class AppComponent {
  @Input() sizeRange: any;
  @Input() isCroppedSize: any;
  @Input() displayedRow: any;
+ @Input() stretch!: any;
+ @Input() stretchRange!: any;
+ @Input() passUnstretchRow!: any;
  @Input() key: any;
  trackBy = () => this.key;
 }

packages/react-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx

@@ -7,3 +7,4 @@ export * from "./1-JustifiedGrid.stories";
 export * from "./2-CroppedJustifiedGrid.stories";
 export * from "./3-KeepRatioWithOffset.stories";
 export * from "./4-KeepRatioWithMaintainedTarget.stories";
+export * from "./5-StretchedJustifiedGrid.stories";

packages/react-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts

@@ -0,0 +1,26 @@
+import App from "./apps/ReactKeepRatioWithMaintainedTargetApp";
+import RawApp from "!!raw-loader!./apps/ReactKeepRatioWithMaintainedTargetApp";
+import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls";
+import { makeArgs, convertReactTemplate, convertPath } from "../../../../stories/utils";
+import "../../../../stories/templates/default.css";
+
+export const StretchedJustifiedGridTemplate = App.bind({}) as any;
+
+
+StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid";
+StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS;
+StretchedJustifiedGridTemplate.args = {
+ ...makeArgs(StretchedJustifiedGridTemplate.argTypes),
+ stretch: true,
+ sizeRange: [200, 300],
+};
+
+StretchedJustifiedGridTemplate.parameters = {
+ preview: [
+ {
+ tab: "React",
+ template: convertReactTemplate(convertPath(RawApp, "react-grid", "@egjs/react-grid")),
+ language: "tsx",
+ },
+ ],
+};

packages/react-grid/stories/2-JustifiedGrid/apps/ReactJustifiedGridApp.tsx

@@ -12,6 +12,9 @@ export default function App(props: Record<string, any>) {
  sizeRange={props.sizeRange}
  isCroppedSize={props.isCroppedSize}
  displayedRow={props.displayedRow}
+ stretch={props.stretch}
+ stretchRange={props.stretchRange}
+ passUnstretchRow={props.passUnstretchRow}
  >
  <div className={"item"}>1</div>
  <div className={"item"}>2</div>

packages/react-grid/stories/2-JustifiedGrid/apps/ReactKeepRatioWithMaintainedTargetApp.tsx

@@ -12,6 +12,9 @@ export default function App(props: Record<string, any>) {
  sizeRange={props.sizeRange}
  isCroppedSize={props.isCroppedSize}
  displayedRow={props.displayedRow}
+ stretch={props.stretch}
+ stretchRange={props.stretchRange}
+ passUnstretchRow={props.passUnstretchRow}
  >
  <div className="image">
  <img src="https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg"

packages/react-grid/stories/2-JustifiedGrid/apps/ReactKeepRatioWithOffsetApp.tsx

@@ -12,6 +12,9 @@ export default function App(props: Record<string, any>) {
  sizeRange={props.sizeRange}
  isCroppedSize={props.isCroppedSize}
  displayedRow={props.displayedRow}
+ stretch={props.stretch}
+ stretchRange={props.stretchRange}
+ passUnstretchRow={props.passUnstretchRow}
  >
  <div className="image" data-grid-content-offset="40">
  <img src="https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg" alt="image1" />

packages/svelte-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx

@@ -5,3 +5,4 @@ export * from "./1-JustifiedGrid.stories";
 export * from "./2-CroppedJustifiedGrid.stories";
 export * from "./3-KeepRatioWithOffset.stories";
 export * from "./4-KeepRatioWithMaintainedTarget.stories";
+export * from "./5-StretchedJustifiedGrid.stories";

packages/svelte-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts

@@ -0,0 +1,28 @@
+import JustifiedGridApp from "./apps/SvelteKeepRatioWithMaintainedTargetApp.svelte";
+import RawJustifiedGridApp from "!!raw-loader!./apps/SvelteKeepRatioWithMaintainedTargetApp.svelte";
+import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls";
+import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils";
+import "../../../../stories/templates/default.css";
+
+export const StretchedJustifiedGridTemplate = (props) => ({
+ Component: JustifiedGridApp,
+ props,
+});
+
+StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid";
+StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS;
+StretchedJustifiedGridTemplate.args = {
+ ...makeArgs(StretchedJustifiedGridTemplate.argTypes),
+ stretch: true,
+ sizeRange: [200, 300],
+};
+
+StretchedJustifiedGridTemplate.parameters = {
+ preview: [
+ {
+ tab: "Svelte",
+ template: convertSvelteTemplate(convertPath(RawJustifiedGridApp, "src", "@egjs/svelte-grid")),
+ language: "html",
+ },
+ ],
+};

packages/svelte-grid/stories/2-JustifiedGrid/apps/SvelteJustifiedGridApp.svelte

@@ -8,6 +8,9 @@
  export let sizeRange;
  export let isCroppedSize;
  export let displayedRow;
+ export let stretch;
+ export let stretchRange;
+ export let passUnstretchRow;
 </script>
 
 <JustifiedGrid
@@ -19,6 +22,9 @@
  {sizeRange}
  {isCroppedSize}
  {displayedRow}
+ {stretch}
+ {stretchRange}
+ {passUnstretchRow}
 >
  <div class="item">1</div>
  <div class="item">2</div>

packages/svelte-grid/stories/2-JustifiedGrid/apps/SvelteKeepRatioWithMaintainedTargetApp.svelte

@@ -8,6 +8,9 @@
  export let sizeRange;
  export let isCroppedSize;
  export let displayedRow;
+ export let stretch;
+ export let stretchRange;
+ export let passUnstretchRow;
 </script>
 
 <JustifiedGrid
@@ -19,6 +22,9 @@
  {sizeRange}
  {isCroppedSize}
  {displayedRow}
+ {stretch}
+ {stretchRange}
+ {passUnstretchRow}
 >
  <div class="image">
  <img src="https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg" data-grid-maintained-target="" alt="image1" />

packages/svelte-grid/stories/2-JustifiedGrid/apps/SvelteKeepRatioWithOffsetApp.svelte

@@ -8,6 +8,9 @@
  export let sizeRange;
  export let isCroppedSize;
  export let displayedRow;
+ export let stretch;
+ export let stretchRange;
+ export let passUnstretchRow;
 </script>
 
 <JustifiedGrid
@@ -19,6 +22,9 @@
  {sizeRange}
  {isCroppedSize}
  {displayedRow}
+ {stretch}
+ {stretchRange}
+ {passUnstretchRow}
 >
  <div class="image" data-grid-content-offset="40">
  <img src="https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg" alt="image1" />

packages/vue-grid/stories/2-JustifiedGrid/0-JustifiedGrid.stories.tsx

@@ -6,3 +6,4 @@ export * from "./1-JustifiedGrid.stories";
 export * from "./2-CroppedJustifiedGrid.stories";
 export * from "./3-KeepRatioWithOffset.stories";
 export * from "./4-KeepRatioWithMaintainedTarget.stories";
+export * from "./5-StretchedJustifiedGrid.stories";

packages/vue-grid/stories/2-JustifiedGrid/5-StretchedJustifiedGrid.stories.ts

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import App from "./apps/VueKeepRatioWithMaintainedTargetApp.vue";
+import RawApp from "!!raw-loader!./apps/VueKeepRatioWithMaintainedTargetApp.vue";
+import { JUSTIFIED_GRID_CONTROLS } from "../../../../stories/templates/controls";
+import { convertPath, convertVueTemplate, makeArgs } from "../../../../stories/utils";
+import "../../../../stories/templates/default.css";
+import { makeVueApp } from "../utils";
+
+export const StretchedJustifiedGridTemplate = makeVueApp(App);
+
+
+StretchedJustifiedGridTemplate.storyName = "Stretched Items with JustifiedGrid";
+StretchedJustifiedGridTemplate.argTypes = JUSTIFIED_GRID_CONTROLS;
+StretchedJustifiedGridTemplate.args = {
+ ...makeArgs(StretchedJustifiedGridTemplate.argTypes),
+ stretch: true,
+ sizeRange: [200, 300],
+};
+
+StretchedJustifiedGridTemplate.parameters = {
+ preview: [
+ {
+ tab: "Vue",
+ template: convertVueTemplate(convertPath(RawApp, "src", "@egjs/vue-grid")),
+ language: "html",
+ },
+ ],
+};

packages/vue-grid/stories/2-JustifiedGrid/apps/VueJustifiedGridApp.vue

@@ -8,6 +8,9 @@
  v-bind:sizeRange="sizeRange"
  v-bind:isCroppedSize="isCroppedSize"
  v-bind:displayedRow="displayedRow"
+ v-bind:stretch="stretch"
+ v-bind:stretchRange="stretchRange"
+ v-bind:passUnstretchRow="passUnstretchRow"
  >
  <div class="item">1</div>
  <div class="item">2</div>

packages/vue-grid/stories/2-JustifiedGrid/apps/VueKeepRatioWithMaintainedTargetApp.vue

@@ -8,6 +8,9 @@
  v-bind:sizeRange="sizeRange"
  v-bind:isCroppedSize="isCroppedSize"
  v-bind:displayedRow="displayedRow"
+ v-bind:stretch="stretch"
+ v-bind:stretchRange="stretchRange"
+ v-bind:passUnstretchRow="passUnstretchRow"
  >
  <div class="image">
  <img src="https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg" data-grid-maintained-target="" alt="image1" />
@@ -124,6 +127,9 @@ body {
 }
 .image img {
  width: 100%;
+ object-fit: contain;
+ height: calc(100% - 40px);
+ background: #ddd;
 }
 
 .title {

packages/vue-grid/stories/2-JustifiedGrid/apps/VueKeepRatioWithOffsetApp.vue

@@ -8,6 +8,9 @@
  v-bind:sizeRange="sizeRange"
  v-bind:isCroppedSize="isCroppedSize"
  v-bind:displayedRow="displayedRow"
+ v-bind:stretch="stretch"
+ v-bind:stretchRange="stretchRange"
+ v-bind:passUnstretchRow="passUnstretchRow"
  >
  <div class="image" data-grid-content-offset="40">
  <img src="https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg" alt="image1" />
@@ -124,6 +127,9 @@ body {
 }
 .image img {
  width: 100%;
+ object-fit: contain;
+ height: calc(100% - 40px);
+ background: #ddd;
 }
 
 .title {

src/Grid.ts

@@ -126,6 +126,9 @@ abstract class Grid<Options extends GridOptions = GridOptions> extends Component
  * @param items - The items to set. <ko>설정할 아이템들</ko>
  */
  public setItems(items: GridItem[]): this {
+ items.forEach((item, i) => {
+ item.index = i;
+ });
  const options = this.options;
 
  if (options.useResizeObserver && options.observeChildren) {