How to use pro-layouts - 10 common examples

scroll: this.scroll,
            container: this.container,
            styleParams: this.styleParams,
            actions: this.actions,
            itemsLoveData: {},
          };
        }

        const layoutParams = {
          items: galleryViewProps.items,
          container: galleryViewProps.container,
          styleParams: galleryViewProps.styleParams,
        };

        const galleryStructure = ItemsHelper.convertToGalleryItems(
          new Layouter(layoutParams),
        );

        return {
          totalItemsCount: galleryViewProps.totalItemsCount || 100,
          renderedItemsCount: galleryViewProps.renderedItemsCount || 20,
          items: galleryViewProps.items,
          galleryStructure,
          scroll: galleryViewProps.scroll,
          container: galleryViewProps.container,
          styleParams: galleryViewProps.styleParams,
          actions: galleryViewProps.actions,
          itemsLoveData: galleryViewProps.itemsLoveData,
          convertToGalleryItems: ItemsHelper.convertToGalleryItems,
          convertDtoToLayoutItem: ItemsHelper.convertDtoToLayoutItem,
        };
      },

if (
    Math.abs(windowHeight - window.innerHeight) < 100 &&
    Math.abs(windowWidth - window.innerWidth) < 100
  ) {
    console.log('Not re-rendering, change is too small');
    return;
  }

  const layoutParams = {
    items,
    styleParams,
    container: calcContainer()
  };

  layout = new Layouter(layoutParams);

  createDom();
}

const createLayouts = layouts => {
    createLayout(layouts[0].layoutParams); //warmup
    console.time(
      `Created ${numberOfRuns} Layouts with ${numberOfImages} images. It took: `
    );
    const startTime = Date.now();
    for (let i = 0; i < numberOfRuns; i++) {
      createLayout(layouts[i].layoutParams);
    }
    const duration = Date.now() - startTime;
    console.timeEnd(
      `Created ${numberOfRuns} Layouts with ${numberOfImages} images. It took: `
    );
    return duration;
  };

this.resizeMediaUrl = config.resizeMediaUrl;

    if (config.dto && config.dto.dto) {
      config.dto = config.dto.dto; //defence patch due to mis-use of item-core
      if (utils.isDev()) {
        console.warn('Item core is created with already existing item core');
      }
    }
    this.dto = {...config.dto};

    if (config.scheme) {
      this.processScheme(config.scheme);
    } else {
      const dto = {};
      Object.assign(dto, this.dto, this.metadata);
      this.processScheme(new Item({ dto }).scheme);
    }

    if (this.dto) {
      const itemMetadata = this.dto.metaData || this.dto.metadata;
      if (itemMetadata) {
        //metadata is encoded encoded, parsed if needed
        this.dto.metaData = utils.parseStringObject(itemMetadata);
      }
    }

    this.sharpParams = {...config.sharpParams};
    if (!this.sharpParams.quality) {
      this.sharpParams.quality = 90;
    }
    if (!this.sharpParams.usm) {
      this.sharpParams.usm = {};

constructor(config) {
    this.uniqueId = utils.generateUUID();
    this.isGalleryGroup = true;

    if (config.dto && config.dto.dto) {
      config.dto = config.dto.dto; //defence patch due to mis-use of item-core
      if (utils.isDev()) {
        console.warn('Item core is created with already existing item core');
      }
    }
    this.dto = Object.assign({}, config.dto);

    if (config.scheme) {
      this.processScheme(config.scheme);
    } else {
      this.processScheme(new Group({ dto: config.dto }).scheme);
    }

    if (config.items) {
      this.items = config.items;
    } else {
      console.warn('Pro Gallery created Gallery Group without items', config);
    }
  }

items: this.items,
        container: _container,
        styleParams: _styles,
        gotScrollEvent: true,
        options: {
          showAllItems: true,
          skipVisibilitiesCalc: true,
          useLayoutStore: false,
        },
      };

      if (this.layouter && isNew.addedItems) {
        layoutParams.options.useExistingLayout = true;
      } else {
        layoutParams.options.createLayoutOnInit = false;
        this.layouter = new Layouter(layoutParams);
      }

      this.layout = this.layouter.createLayout(layoutParams);
      const itemConfig = {
        watermark: watermarkData,
        sharpParams: _styles.sharpParams,
        lastVisibleItemIdx: this.lastVisibleItemIdx,
        resizeMediaUrl: this.props.resizeMediaUrl,
      };
      const existingLayout = this.galleryStructure || this.layout;
      if (isNew.addedItems) {
        this.galleryStructure = ItemsHelper.convertExistingStructureToGalleryItems(
          existingLayout,
          this.layout,
          itemConfig,
        );

//update this.items
    this.items = items.map(item => ItemsHelper.convertDtoToLayoutItem(item));
    const layoutParams = {
      items: this.items,
      container,
      styleParams: styles,
      gotScrollEvent: true,
      options: {
        showAllItems: true,
        skipVisibilitiesCalc: true,
        useLayoutStore: false,
        createLayoutOnInit: false,
      },
    };

    this.layouter = new Layouter(layoutParams);
    this.layout = this.layouter.createLayout(layoutParams);
    this.galleryStructure = ItemsHelper.convertToGalleryItems(this.layout, {
      thumbnailSize: styles.thumbnailSize,
      sharpParams: styles.sharpParams,
      resizeMediaUrl: this.props.resizeMediaUrl,
    });
    this.videoScrollHelper.updateGalleryStructure({
      galleryStructure: this.galleryStructure,
      scrollBase: container.scrollBase,
      videoPlay: styles.videoPlay,
      oneRow: styles.oneRow,
    });
    const allowPreloading = isEditMode() || gotFirstScrollEvent;
    this.scrollCss = this.getScrollCssIfNeeded({
      galleryDomId: this.props.domId,
      items: this.galleryStructure.galleryItems,

items: this.items,
        container: _container,
        styleParams: _styles,
        gotScrollEvent: true,
        options: {
          showAllItems: true,
          skipVisibilitiesCalc: true,
          useLayoutStore: false,
        },
      };

      if (this.layouter && isNew.addedItems) {
        layoutParams.options.useExistingLayout = true;
      } else {
        layoutParams.options.createLayoutOnInit = false;
        this.layouter = new Layouter(layoutParams);
      }

      this.layout = this.layouter.createLayout(layoutParams);
      const itemConfig = {
        watermark: watermarkData,
        sharpParams: _styles.sharpParams,
        thumbnailSize: styles.thumbnailSize,
        resizeMediaUrl: this.props.resizeMediaUrl,
        lastVisibleItemIdx: this.lastVisibleItemIdx,
      };
      const existingLayout = this.galleryStructure || this.layout;
      if (isNew.addedItems) {
        this.galleryStructure = ItemsHelper.convertExistingStructureToGalleryItems(
          existingLayout,
          this.layout,
          itemConfig,

//update this.items
    this.items = items.map(item => ItemsHelper.convertDtoToLayoutItem(item));
    const layoutParams = {
      items: this.items,
      container,
      styleParams: styles,
      gotScrollEvent: true,
      options: {
        showAllItems: true,
        skipVisibilitiesCalc: true,
        useLayoutStore: false,
        createLayoutOnInit: false,
      },
    };

    this.layouter = new Layouter(layoutParams);
    this.layout = this.layouter.createLayout(layoutParams);
    this.galleryStructure = ItemsHelper.convertToGalleryItems(this.layout, {
      sharpParams: styles.sharpParams,
      resizeMediaUrl: this.props.resizeMediaUrl,
    });
    this.videoScrollHelper.updateGalleryStructure({
      galleryStructure: this.galleryStructure,
      scrollBase: container.scrollBase,
      videoPlay: styles.videoPlay,
      oneRow: styles.oneRow,
    });
    const allowPreloading = isEditMode() || gotFirstScrollEvent;
    this.scrollCss = this.getScrollCssIfNeeded({
      galleryDomId: this.props.domId,
      items: this.galleryStructure.galleryItems,
      styleParams: styles,

itemSpacing: 20,
  allowedGroupTypes: ['1', '2v', '3v']
  //add more style params here
};
const container = {
  width: window.innerWidth,
  height: window.innerHeight
};

const layoutParams = {
  items,
  styleParams,
  container
};

const layout = createLayout(layoutParams);
const parent = document.createElement('div');
parent.id = 'root';
document.body.prepend(parent);

for (let i = 0; i < layout.items.length; i++) {
  const item = layout.items[i].scheme;
  const iDom = document.createElement('div');
  iDom.innerHTML = i;
  iDom.style.width = item.width + 'px';
  iDom.style.height = item.height + 'px';
  iDom.style.position = 'absolute';
  iDom.style.top = item.offset.top + 'px';
  iDom.style.left = item.offset.left + 'px';
  iDom.style.backgroundColor = items[i].bgColor;
  parent.prepend(iDom);
}