https://github.com/aabounegm/vue-pixel-board

Pixel drawing board for Vue
https://github.com/aabounegm/vue-pixel-board

pixel-art vue vuejs2

Last synced: 17 days ago
JSON representation

Pixel drawing board for Vue

• Host: GitHub
• URL: https://github.com/aabounegm/vue-pixel-board
• Owner: aabounegm
• License: mit
• Archived: true
• Created: 2019-05-26T18:12:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-08-17T14:39:23.000Z (over 3 years ago)
• Last Synced: 2024-09-28T18:01:29.262Z (4 months ago)
• Topics: pixel-art, vue, vuejs2
• Language: Vue
• Homepage:
• Size: 4.1 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-pixel-board

Pixel drawing board SFC for Vue

> :warning: Warning!

> This library is under heavy reconstruction. Please visit later. 

[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/aabounegm/vue-pixel-board/Release)](https://github.com/aabounegm/vue-pixel-board/actions?query=workflow%3ARelease%20to%20NPM)

[![npm](https://img.shields.io/npm/v/vue-pixel-board)](https://www.npmjs.com/package/vue-pixel-board)

[![npm bundle size](https://img.shields.io/bundlephobia/min/vue-pixel-board)](https://bundlephobia.com/result?p=vue-pixel-board)

[![npm bundle zipped size](https://img.shields.io/bundlephobia/minzip/vue-pixel-board)](https://bundlephobia.com/result?p=vue-pixel-board)

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

## Installation

```sh

npm install vue-pixel-board

```

## Usage

### Register component

To register globally:

```javascript

import Vue from 'vue';

import PixelBoard from 'vue-pixel-board';

Vue.component('pixel-board', PixelBoard);

```

Or to use in your component without global registration, just add it to the `components` option:

```javascript

export default Vue.extend({

    name: 'your-component',

    components: {

        PixelBoard,    // Using ES6 shorthand notation

    },

});

```

### Using the component

Available props:

| Prop  | Type       | Default value | Description |

|-------|------------|---------------|-------------|

| rows* | `number` | | Specifies the number of rows in the board |

| cols* | `number` | | Specifies the number of columns in the board |

| color | `string` | `"#000000"` | Any valid CSS color propertty value. The color to use for newly colored pixels |

| clear | `boolean`| `false` | Specifies whether new clicks will color a pixel or remove the color |

| readonly | `boolean` | `false` | Makes the board uneditable |

_\* Marks required props_

Emitted events:

- `input`: Fired when any pixel's value gets updated. Contains the information `{ x: number, y: number, color: string }`.

Example usage:

```vue

    


        

    

    

    🗑️


import Vue from 'vue';

import PixelBoard from 'vue-pixel-board';

export default Vue.extend({

    data() {

        rowCount: 80,

        colCount: 80,

        color: '#000000',

        deletingState: false,

    },

    components: {

        PixelBoard,

    },

});

.wrapper {

    height: 800px;

    width: 800px;

}

```

_For a more detailed example, check [this](./src/App.vue)_

### Notes:

- The board will take up the entire space of its container

- The aspect ratio of the pixels is not preserved. Make sure to size the container with respect to the number of rows/cols to make them squares (or whatever rectangle size)

## License

[MIT License](./LICENSE)