Eslaf-paint (Command Line Tool)

Usage

eslaf-paint [textfile (.js|.json)] [Style file (.css)] [Picture files (.*)]

More than 1 picture is okay(not as module way)

Output Pattern in the textfile

Output dir, the $ symbol will be replaced by the input file Name

'$/$-output' + 'input.png' => 'input/input-output.png'

Eslaf-paint (JavaScript Module)

Only first type-of argument required will be accepted

Signature

type CSSArg = string | {type: 'css', data: string} | undefined
type ImageArg = string | {type: 'image', data: Buffer} | undefined
function EslafPaint(
    argv: {
        _: [ProfileArg, CSSArg, ImageArg], // in any order is okay
        [anyArg: string]: any
    },
    stepCallback?: (name: string, image: Buffer) => void
): Promise<{
    [name: string]: Buffer
}>{}

if CSSArg is not provided, eslaf-paint will use {type: 'css', data: 'canvas {}'} as default value

if ImageArg is not provided, eslaf-paint will use the width and height property in the canvas Selector to create a new canvas, like canvas {width: 400, height: 300}

Notice

We assume string ends with .js or .json is a ProfileArg and .css is a CSSArg

Any other type of strings is ImageArg

Profile

To TypeScript user: module-function.d.ts is provided

Format

type ProfileArg =
    string | 
    {type: 'profile', data: Profile} |
    {type: 'profile', data: Promise<Profile>} |
    {type: 'profile', data: (args: any) => Profile} |
    {type: 'profile', data: (args: any) => Promise<Profile>}
// string is path to profile

type Paint = PaintText | PaintImage
type Profile = {
    [name: string]: Paint[] | Promise<Paint[]>
}

Paint Types

use means the CSS class to use

Text

type PaintText = {
    type: 'text',
    text: string | Promise<string>,
    use?: string | Promise<string>,
    styles?: CSSObject | Promise<CSSObject>
}

Image

type ImageSrc = string | Buffer
type PaintImage = {
    type: 'img',
    src: ImageSrc | Promise<ImageSrc>,
    use?: string | Promise<string>,
    styles?: CSSObject | Promise<CSSObject>
}
// string is path to the image

Style file, the CSS-like part

Supported Selector

• *
• .[Name]
• [Selector], [Selector]

Css of Types

The first value of a property is the default value

Each type listed in Paint support some of the attrs

If the valid value is not listed, it is same with CSS

canvas

canvas {
    x: <int>
    y: <int>
}

img

.className {
    x: <pos-x>
    y: <pos-y>
    width: <length>
    height: <length>
}

text

.className {
    text-overflow: break-line | clip
    /* If you want to this attr work,
    you need to set `width` to text */
    
    x: <pos-x>
    y: <pos-y>

    font-size
    font-family
    font-weight
    font-style
    line-height: <px>
    /* use in text-overflow: break-line */
    color
    text-shadow
    text-align
    width

    stroke-color: none | <color>
    stroke-weight: 0 | <length>
}

Notice

<pos-x> and <pos-y>: can be negative

Plugin System

Document later

Load a plugin

// module way
require('eslaf-paint').lib.loadPlugin(plugin)
// config file way
module.exports = argvs => {
    argvs.lib.loadPlugin(plugin)
}

Write a plugin

module.exports = Plugins => {
    // Inject your function here
}

Change log

• Dec 12, 2016: Fix some bugs
• Nov 30, 2016: Fix some bugs, and support text-align
• Nov 26, 2016: Plugin now can apply on the image type
• Nov 18, 2016: Support Plugin and font-style
• Nov 11, 2016: 0.4.0 release
• Nov 7, 2016: 0.3.0 release