Motive Renderer

Library which allows you to render motives into product with any type of active zone

Install

npm install --save motive-renderer

or

yarn add motive-renderer

Demo

The actual usage can be seen in the storybook. To start the storybook, fetch this repository and run the command:

yarn storybook

or

npm run storybook

Documentation

The library exports two components: MotiveRenderer, DifferentZoneMotiveRenderer and a function getDesignAdjustments.

MotiveRenderer component

MotiveRenderer component renders the design into image with specified active zones. Allowed props, with deafult values are:

<MotiveRenderer
  productImage={}
  productImgWidth ={515}
  productImgHeight={515}
  activeZones={}
  strokeColor="red"
  renderActiveZone={false}
  designImage={}
  designMeta={}
/>

• productImage: Image that you want to render in the background, can be url or base64 encoded
• productImgWidth (optional): Width of the productImage, default value is 515
• productImgHeight (optional): Height of the productImage, default value is 515
• activeZones: Array containing active zones of the product,
• strokeColor (optional): Color of the stroke of active zone, only has effect if renderActiveZone is true
• renderActiveZone (optional): Boolean that specifies if the active zone should be visible or not
• designImage: Image of design that you want to render into the active zone
• designMeta: Meta information about the design

DifferentZoneMotiveRenderer component

DifferentZoneMotiveRenderer is a component, that allows you effectively render design, that was originally desinged in different active zone. Allowed props, with deafult values are:

<DifferentZoneMotiveRenderer
  originalActiveZones={[]}
  currentActiveZones={[]}
  designMeta={{}}
  productImage=""
  designImage=""
  renderActiveZone={true}
  productImgWidth={515},  
  productImgHeight={515},
  debug={false}
/>

• originalActiveZones: Active zones on which was the design originally designed
• currentActiveZones (optional): Current active zones, where you want the design to be rendered
• designMeta: Original meta information about the design
• productImage: Image that you want to render in the background, can be url or base64 encoded
• designImage: Image of design that you want to render into the active zone
• renderActiveZone (optional): Boolean that specifies if the active zone should be visible or not
• productImgWidth (optional): Width of the product image, default is 515
• productImgHeight (optional): Height of the product image, default is 515
• debug (optional): Switch, that allows you to see how was the originalActiveZone scaled, default is false

getDesignAdjustments

getDesignAdjustments is a function, which will calculate how is the design moved and scaled when being renderd into different zone. The semantics of the parameters is the same as in DifferentZoneMotiveRenderer component.

function getDesignAdjustments(
 originalActiveZones: ActiveZone[],
 currentActiveZones: ActiveZone[],
 designMeta: DesignMeta,
 productImageSize = 515)

Type of the return value type is following:

{
    moveXPercent: number,
    moveYPercent: number,
    scalePercent: number
  };

Active zones

This section will explain all the possible types of active zones that can be used within this library. When an array of active zones is required as a parameter, they do not have to be of the same type.

Rectangle active zone

type Rectangle = {
  percentXTopLeftCorner: number;
  percentYTopLeftCorner: number;
  percentWidth: number;
  percentHeight: number;
};

PercentXTopLeftCorner and percentYTopLeftCorner reference point is the top left corner of the productImage. Reference for width is width of the image and similliary reference for height is the height of a product image.

Polygon active zone

type Polygon = Point[];
type Point = {
  xPercentage: number;
  yPercentage: number;
};

Reference point for the xPercentage and yPercentage parameters of Point is the top left corner of the product image

Ellipse active zone

type Ellipse = {
  radiusXPercentage: number;
  radiusYPercentage: number;
  percentXCenter: number;
  percentYCenter: number;
};

Reference point for the percentXCenter and percentYCenter is the top left corner of the productImage, radiusXPercentage specifies percentage of width and radiusYPercentage is referring to width.

Design meta

The design meta specifies the meta information about the design, especially its position, and size.

 type DesignMeta = {
  xPercentage: number;
  yPercentage: number;
  percentWidth: number;
  percentHeight: number;
};

Author

Adam Laurenčík