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) {