From bc5657c88dafb56d521976d2ab91784bf55ebe3a Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 29 Dec 2017 18:14:16 +0200 Subject: [PATCH] documentation, added wiki - https://github.com/viliusle/miniPaint/wiki --- README.md | 27 +++++++++++---------------- src/js/core/base-gui.js | 3 +++ src/js/core/base-layers.js | 27 +++++++++++++++++++++------ src/js/core/base-selection.js | 3 +++ src/js/core/base-state.js | 2 +- src/js/core/base-tools.js | 3 +++ src/js/core/gui/gui-colors.js | 3 +++ src/js/core/gui/gui-details.js | 3 +++ src/js/core/gui/gui-information.js | 3 +++ src/js/core/gui/gui-layers.js | 3 +++ src/js/core/gui/gui-menu.js | 3 +++ src/js/core/gui/gui-preview.js | 3 +++ src/js/core/gui/gui-tools.js | 3 +++ 13 files changed, 63 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 58c7331..8bb261b 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,10 @@ Online graphics editing tool lets create, edit images using HTML5 technologies. No need to buy, download, install or have obsolete flash. -Key features: layers, drag & drop, transparency, filters, no-flash, open source. +Key features: layers, drag & drop, transparency, filters, no-flash, no ads, open source. -miniPaint operates directly in the browser. You can create images, paste from clipboard (ctrl+v) or upload from computer (using menu or drag & drop). Nothing will be sent to any server. Everything stays in your browser. +miniPaint operates directly in the browser. You can create images, paste from clipboard (ctrl+v) +or upload from computer (using menu or drag & drop). Nothing will be sent to any server. Everything stays in your browser. ## URL: **http://viliusle.github.io/miniPaint/** @@ -16,12 +17,12 @@ miniPaint operates directly in the browser. You can create images, paste from cl **Change log:** [/miniPaint/releases](https://github.com/viliusle/miniPaint/releases) ## Browser Support -- Firefox - Chrome +- Firefox - Opera - Edge - Safari -- IE 11 (?) +- IE 11 (only basic support) ## Features @@ -33,25 +34,19 @@ miniPaint operates directly in the browser. You can create images, paste from cl - **Tools**: pencil, brush, magic wand, erase, fill, color picker, letters, crop, blur, sharpen, desaturate, clone, borders, sprites, key-points, color to alpha, color zoom, replace color, restore alpha, content fill. - **Help**: keyboard shortcuts, translations. -### Embed - +## Embed To embed this app in other page, use this HTML code: - + ## Build instructions +See [Wiki > Build instructions](https://github.com/viliusle/miniPaint/wiki/Build-instructions) -- git clone https://github.com/viliusle/miniPaint.git -- cd miniPaint -- npm install -- webpack-dev-server (using http://localhost:8080/ with live reload, require: npm install -g webpack-dev-server) -- edit files... -- webpack -p (build for production) - -### License +## Wiki +See [Wiki](https://github.com/viliusle/miniPaint/wiki) +## License MIT License ## Support - Please use the GitHub issues for support, features, issues or use mail www.viliusl@gmail.com for contacts. diff --git a/src/js/core/base-gui.js b/src/js/core/base-gui.js index 0d792e1..c7a9ce6 100644 --- a/src/js/core/base-gui.js +++ b/src/js/core/base-gui.js @@ -17,6 +17,9 @@ import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js'; var instance = null; +/** + * Main GUI class + */ class Base_gui_class { constructor() { diff --git a/src/js/core/base-layers.js b/src/js/core/base-layers.js index ffd025d..dc72953 100644 --- a/src/js/core/base-layers.js +++ b/src/js/core/base-layers.js @@ -657,7 +657,13 @@ class Base_layers_class { return false; } - + + /** + * find next layer + * + * @param {int} id layer id + * @returns {layer|null} + */ find_next(id) { id = parseInt(id); var link = this.get_layer(id); @@ -675,7 +681,13 @@ class Base_layers_class { return null; } - + + /** + * find previous layer + * + * @param {int} id layer id + * @returns {layer|null} + */ find_previous(id) { id = parseInt(id); var link = this.get_layer(id); @@ -694,14 +706,17 @@ class Base_layers_class { return null; } + /** + * returns global position, for example if canvas is zoomed, it will convert relative mouse position to absolute at 100% zoom. + * + * @param {int} x + * @param {int} y + * @returns {object} keys: x, y + */ get_world_coords(x, y) { return zoomView.toWorld(x, y); } - getCurrentPos() { - return zoomView.getCurrentPos(); - } - /** * register new live filter * diff --git a/src/js/core/base-selection.js b/src/js/core/base-selection.js index 95e2973..1945b64 100644 --- a/src/js/core/base-selection.js +++ b/src/js/core/base-selection.js @@ -8,6 +8,9 @@ import config from './../config.js'; var instance = null; var settings_all = []; +/** + * Selection class - draws rectangular selection on canvas, can be resized. + */ class Base_selection_class { /** diff --git a/src/js/core/base-state.js b/src/js/core/base-state.js index e47feb7..c027d4f 100644 --- a/src/js/core/base-state.js +++ b/src/js/core/base-state.js @@ -11,7 +11,7 @@ import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js'; var instance = null; /** - * Undo system + * Undo state class. Supports multiple levels undo. */ class Base_state_class { diff --git a/src/js/core/base-tools.js b/src/js/core/base-tools.js index 0c8a251..068bd2c 100644 --- a/src/js/core/base-tools.js +++ b/src/js/core/base-tools.js @@ -6,6 +6,9 @@ import config from './../config.js'; import Base_layers_class from './base-layers.js'; +/** + * Base tools class, can be used for extending on tools like brush, provides various helping methods. + */ class Base_tools_class { constructor(save_mouse) { diff --git a/src/js/core/gui/gui-colors.js b/src/js/core/gui/gui-colors.js index a5f882a..2ce6a70 100644 --- a/src/js/core/gui/gui-colors.js +++ b/src/js/core/gui/gui-colors.js @@ -39,6 +39,9 @@ var template = ` `; +/** + * GUI class responsible for rendering colos block on right sidebar + */ class GUI_colors_class { render_main_colors() { diff --git a/src/js/core/gui/gui-details.js b/src/js/core/gui/gui-details.js index f9f7786..82cee72 100644 --- a/src/js/core/gui/gui-details.js +++ b/src/js/core/gui/gui-details.js @@ -78,6 +78,9 @@ var template = `
`; +/** + * GUI class responsible for rendering selected layer details block on right sidebar + */ class GUI_details_class { constructor() { diff --git a/src/js/core/gui/gui-information.js b/src/js/core/gui/gui-information.js index 174c0b2..f907558 100644 --- a/src/js/core/gui/gui-information.js +++ b/src/js/core/gui/gui-information.js @@ -14,6 +14,9 @@ var template = ` - `; +/** + * GUI class responsible for rendering information block on right sidebar + */ class GUI_information_class { constructor(ctx) { diff --git a/src/js/core/gui/gui-layers.js b/src/js/core/gui/gui-layers.js index 397c0fa..33bc30b 100644 --- a/src/js/core/gui/gui-layers.js +++ b/src/js/core/gui/gui-layers.js @@ -18,6 +18,9 @@ var template = `
`; +/** + * GUI class responsible for rendering layers on right sidebar + */ class GUI_layers_class { constructor(ctx) { diff --git a/src/js/core/gui/gui-menu.js b/src/js/core/gui/gui-menu.js index 38a2da8..f11a73c 100644 --- a/src/js/core/gui/gui-menu.js +++ b/src/js/core/gui/gui-menu.js @@ -7,6 +7,9 @@ import config from './../../config.js'; import menu_template from './../../config-menu.js'; import ddsmoothmenu from './../../libs/menu.js'; +/** + * class responsible for rendering main menu + */ class GUI_menu_class { render_main() { diff --git a/src/js/core/gui/gui-preview.js b/src/js/core/gui/gui-preview.js index 44f76a4..e4cc830 100644 --- a/src/js/core/gui/gui-preview.js +++ b/src/js/core/gui/gui-preview.js @@ -22,6 +22,9 @@ var template = ` `; +/** + * GUI class responsible for rendering preview on right sidebar + */ class GUI_preview_class { constructor(GUI_class) { diff --git a/src/js/core/gui/gui-tools.js b/src/js/core/gui/gui-tools.js index 6e6ec61..36722f7 100644 --- a/src/js/core/gui/gui-tools.js +++ b/src/js/core/gui/gui-tools.js @@ -10,6 +10,9 @@ import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.j var instance = null; +/** + * GUI class responsible for rendering left sidebar tools + */ class GUI_tools_class { constructor(GUI_class) {