aabounegm / vue-pixel-board Goto Github PK

View Code? Open in Web Editor NEW

1.0 3.0 0.0 4.2 MB

Pixel drawing board for Vue

License: MIT License

JavaScript 8.40% HTML 8.75% Vue 80.65% TypeScript 2.21%

vue vuejs2 pixel-art

vue-pixel-board's Introduction

vue-pixel-board

Pixel drawing board SFC for Vue

⚠️ Warning! This library is under heavy reconstruction. Please visit later.

Installation
Usage

Installation

npm install vue-pixel-board

Usage

Register component

To register globally:

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:

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:

<template>
    <div class="wrapper">
        <pixel-board
            :rows="rowCount"
            :cols="colCount"
            :color="color"
            :clear="deletingState"
        />
    </div>
    <input type="color" v-model="color"/>
    <input type="checkbox" v-model="deletingState"/>🗑️
</template>

<script lang="ts">
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,
    },
});
</script>

<style scoped>
.wrapper {
    height: 800px;
    width: 800px;
}
</style>

For a more detailed example, check this

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

vue-pixel-board's People

Contributors

Stargazers

Watchers

vue-pixel-board's Issues

Canvas Downloading

Check if the proposed implementation of downloading the canvas as an image in #24 works on all browsers.

TypeScript typings

Generate proper TypeScript typings for the component

Setup CI/CD

Setup GitHub Actions to:

Build the "demo" and deploy it to Pages on push to master
Build the package and deploy it to NPM on release
Lint on PR

Bring back `highlightOnHover` prop

Before Canvas API, there was a prop (highlightOnHover) that, when true, would highlight the pixel the mouse is currently hovering on. It was a simple div:hover styling, but it is more complicated with the canvas. It should be implemented again.

Bring back the `checkered` prop

The checkered prop used to add a checkerboard-like background to the pixel board. It was removed after moving to the Canvas API. We should find a way to bring it back without being in the final exported image (perhaps with a second underlaying canvas).
The pattern itself can be added in a way like this SO answer

Right-click to delete

Previously, an event listener for contextmenu was registered to handle right clicks. In normal mode, a right click would clear the selected pixel. In delete mode, it would draw it.
This has been removed to make use of the Canvas's default "save as image" option available in the context menu. It should be brought back after implementing an alternative for saving as image (perhaps under a right-click-deletes prop to not prevent default context menu otherwise)

Undo & Redo Functionality

Save an ordered history of the actions performed to be able to undo and redo operations.

Touch friendliness

Bring back the event listeners (with appropriate guard clauses & checks) that promoted touch friendliness

Setting/Getting individual pixel values

Implement methods to get and to set pixel colors

Image operations

Loading pixels from an image file
Saving the canvas as an image

Bring back the `grid` prop

Before transitioning to Canvas API, there used to be a grid prop that would add a grid (border) between the individual pixels. It can be implemented via another overlaying canvas (or any other more appropriate method)

Add a wrapper to auto-install in browser

According to the Vue cookbook on packaging SFCs for NPM, there should be a wrapper script that exports a function allowing to register the library with Vue.use while also automatically registering if it is included directly in a <script> tag