Colouring-book-tmp NPM

`<colouring-book>`

This webcomponent follows the open-wc recommendations.

With special thanks to https://github.com/collinph/jl-coloringbook for the original concept and <canvas> code

Installation

npm i colouring-book

API

Properties/Attributes

Name	Type	Default	Description
`identity`	`String`	`annonymous`	a string containing a unique ID for each user (used for local caching of coluring in).
`images`	`Array`	`''`	An array of URLs for each page to be coloured in - defaults to first image in array.
`colourPalette`	`Array`	see example	An array of colours (in html/css format) that can be selected by the user - defaults to first colour.
`noPrint`	`Boolean`	`false`	Restricts the user from printing pages with their colouring in.
`noSave`	`Boolean`	`false`	Restricts the user from saving pages locally as `.png` files.
`noThumbnails`	`Boolean`	`false`	Applies the colouring in to the thumbnail images of each page.
`preview`	`String`	`''`	When set to `right` the thumbnails will appear on the right of the `image`, default is above images.

Events

Event Name	Target	Detail	Description
`image-selected`	`colouring-book`	`image`	Fired when a new `image` is selectd.
`add-path`	`colouring-book`	`image`, `path`	Fired when the a new coluring `path` is added to an `image`.
`remove-path`	`colouring-book`	`image`, `path`	Fired when a `path` is removed from an `image`.
`clear`	`colouring-book`	`image`	Fired when all `path`'s are removed from an `image`.

Example

    const img = ['images/L0_P_U1_IW2.pdf-1.png','images/L0_P_U1_IW2.pdf-2.png'];
    const cols=[
            'rgba(87, 87, 87,0.8)',
            'rgba(220, 35, 35,0.8)',
            'rgba(42, 75, 215,0.8)',
            'rgba(29, 105, 20,0.8)',
            'rgba(129, 74, 25,0.8)',
            'rgba(129, 38, 192,0.8)',
            'rgba(160, 160, 160,0.8)',
            'rgba(129, 197, 122,0.8)',
            'rgba(157, 175, 255,0.8)',
            'rgba(41, 208, 208,0.8)',
            'rgba(255, 146, 51,0.8)',
            'rgba(255, 238, 51,0.8)',
            'rgba(233, 222, 187,0.8)',
            'rgba(255, 205, 243,0.8)',
            'white'];
    render(
      html`
        <colouring-book noPrint noSave .images=${img} .colourPalette=${cols} onThumbnails @add-path=${(e) => _addPath(e)}> 
        </colouring-book>
        `
    );

Usage

<script type="module">
  import 'colouring-book/colouring-book.js';
</script>

<colouring-book></colouring-book>

Local Demo with `es-dev-server`

npm start

To run a local development server that serves the basic demo located in demo/index.html

@material/mwc-icon-button lit-element lit-html

@infinitebrahmanuniverse/nolb-colou @everything-registry/sub-chunk-1356

0.0.17

4 years ago

<colouring-book>