Skip to content

Instantly share code, notes, and snippets.

@G3z
Created October 27, 2022 13:41
Show Gist options
  • Save G3z/d68f7462fc695c40a61c96e738b92c50 to your computer and use it in GitHub Desktop.
Save G3z/d68f7462fc695c40a61c96e738b92c50 to your computer and use it in GitHub Desktop.
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment