polotno.types.d.ts

export interface PolonoElement {
  type: string;
  x: number;
  y: number;
  rotation: number;
  locked: boolean;

  // effects
  blurEnabled: boolean;
  blurRadius: number;
  brightnessEnabled: boolean;
  brightness: number;
  shadowEnabled: boolean;
  shadowBlur: number;

  // can user select element?
  // if boolean, element will be "invisible" for user clicks
  selectable: boolean;
  // use for absolute positing of element
  alwaysOnTop: boolean;
  // also we can hide some elements from the export
  showInExport: boolean;
  // can element be moved and resized
  draggable: boolean;
  // can we change content of element?
  contentEditable: boolean;
}

export interface PolonoTextElement extends PolonoElement {
  type: "text";
  // deprecated

  text: string;
  // placeholder is working similar to input placeholder
  // it will be rendered if no text is defined
  // and we will use it in input element too
  // useful for template canvas, where users will need to replace text elements
  // important (!) placeholders are removed from export result
  placeholder: string;
  fontSize: number;
  fontFamily: string;
  fontStyle: string; // can be normal or italic
  fontWeight: string; // can be normal or bold or some oth
  textDecoration: string;
  fill: string;
  align: string;
  width: number;
  strokeWidth: number;
  stroke: string;
  lineHeight: number;
  letterSpacing: number; // % from font size,

  // can we change style of element?
  styleEditable: boolean;

  // Blisster Custom
  custom: {
    palette_color: string | number | undefined;
  };
}

export interface PolonoSVGElement extends PolonoElement {
  type: "svg";
  src: string;
  maskSrc: string; // should we draw mask image over svg element?
  keepRatio: boolean; // can we change aspect ration of svg?

  width: number;
  height: number;
  flipX: boolean;
  flipY: boolean;
  cornerRadius: number;

  colorsReplace: { [x: string]: any };

  // Blisster Custom
  custom: {
    palette_colors: { [x: string]: any };
  };
}

export interface PolonoImageElement extends PolonoElement {
  type: "image";

  // url path to image
  src: string;

  // url path to svg or image that will be used to clip image
  // cab be used for image framing
  clipSrc: string;
  width: number;
  height: number;
  cropX: number; // 0-1 : % from original image width
  cropY: number; // 0-1 : % from original image height
  cropWidth: number; // 0-1 : % from original image width
  cropHeight: number; // 0-1 : % from original image height
  cornerRadius: number;
  borderColor: string;
  borderSize: number;
  flipX: boolean;
  flipY: boolean;
}