From 98ebe4ce1a696ed81664ef5d67133c5ee6dfa11a Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 16 Jun 2017 20:45:39 +0300 Subject: [PATCH 1/6] radiobox styles --- styles/styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 5f2177a8..5c62a88a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -68,7 +68,10 @@ select{ padding: 2px 4px; } input[type="radio"]{ - transform: scale(1.3, 1.3); + /*transform: scale(1.3, 1.3); - looks ugly on mac */ + width: 15px; + height: 15px; + transform: translate(0, 2px); } input[type="range"]{ margin-left:0px; From 067a061e35b126f0d37edd15673162a5f00afece Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 16 Jun 2017 20:49:37 +0300 Subject: [PATCH 2/6] update to file size calc. --- js/file.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/js/file.js b/js/file.js index fb59d088..6aa45efa 100644 --- a/js/file.js +++ b/js/file.js @@ -226,8 +226,11 @@ function FILE_CLASS() { save_default = this.SAVE_TYPES[1]; //jpg calc_size_value = 'No'; - if(WIDTH * HEIGHT < 1000000) + calc_size = false; + if(WIDTH * HEIGHT < 1000000){ calc_size_value = 'Yes'; + calc_size = true; + } POP.add({name: "name", title: "File name:", value: this.SAVE_NAME}); POP.add({name: "type", title: "Save as type:", values: this.SAVE_TYPES, value: save_default, onchange: "FILE.save_dialog_onchange(this)"}); @@ -240,6 +243,11 @@ function FILE_CLASS() { document.getElementById("pop_data_name").select(); if (e != undefined) e.preventDefault(); + + if(calc_size == true){ + //calc size once + this.save_dialog_onchange(); + } }; //activated on save dialog parameters change From bcc88d167f321fa76ae3ee7aeead1571d2bd08f3 Mon Sep 17 00:00:00 2001 From: Vilius Date: Thu, 22 Jun 2017 20:48:52 +0300 Subject: [PATCH 3/6] brush settings update --- config.js | 2 +- js/draw_tools.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/config.js b/config.js index 1790f350..b73ceb1f 100644 --- a/config.js +++ b/config.js @@ -30,7 +30,7 @@ var DRAW_TOOLS_CONFIG = [ {name: 'letters', title: 'Draw letters', icon: ['sprites.png', -350+3, 4], attributes: {} }, {name: 'draw_square', title: 'Draw rectangle', icon: ['sprites.png', -400+3, 5], attributes: {fill: false, square: false} }, {name: 'draw_circle', title: 'Draw circle', icon: ['sprites.png', -450+3, 5], attributes: {fill: false, circle: false} }, - {name: 'brush', title: 'Brush', icon: ['sprites.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 10, anti_aliasing: false }, on_update: 'update_brush', }, + {name: 'brush', title: 'Brush', icon: ['sprites.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_aliasing: false }, on_update: 'update_brush', }, {name: 'blur_tool', title: 'Blur tool', icon: ['sprites.png', -250+5, -50+2], attributes: {size: 30, power: 1} }, {name: 'sharpen_tool', title: 'Sharpen tool', icon: ['sprites.png', -300+5, -50+2], attributes: {size: 30 } }, {name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['sprites.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} }, diff --git a/js/draw_tools.js b/js/draw_tools.js index 23f1438b..97fb9fa0 100644 --- a/js/draw_tools.js +++ b/js/draw_tools.js @@ -822,9 +822,9 @@ function DRAW_TOOLS_CLASS() { //detect line size var max_speed = 20; - var power = 0.7; //max 1, how much speed reduce size, 1 means reduce to 0 + var power = 2; //how speed affects size - var new_size = size - size / max_speed * mouse.speed_average * power; + var new_size = size + size / max_speed * mouse.speed_average * power; new_size = Math.max(new_size, size/4); new_size = Math.round(new_size); canvas_front.lineWidth = new_size; From 60bab468c4812aa80eaa9aee60822a37bf6e17ac Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 23 Jun 2017 21:54:54 +0300 Subject: [PATCH 4/6] input style (radio, checkbox) changes, readme update --- README.md | 6 ++++++ index.html | 6 +++--- js/events.js | 5 +++++ libs/popup.js | 2 +- styles/styles.css | 26 +++++++++++++++++--------- 5 files changed, 32 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 8fbd02e1..7194f7f7 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,12 @@ miniPaint operates directly in the browser. You can create images, paste from cl - **Effects**: Black and White, Blur (box, Gaussian, stack, zoom), Bulge/Pinch, Colorize, Denoise, Desaturate, Dither, Dot Screen, Edge, Emboss, Enrich, Gamma, Grains, GrayScale, Heatmap, JPG Compression, Mosaic, Oil, Perspective, Sepia, Sharpen, Solarize, Tilt Shift, Vignette, Vibrance, Vintage, - Print support. +### Embed + +To embed this app in other page, use this HTML code: + + + ### License Copyright (C) 2013-2016 ViliusL diff --git a/index.html b/index.html index 37656ef2..bf8ded12 100644 --- a/index.html +++ b/index.html @@ -11,18 +11,18 @@ - + - + - + diff --git a/js/events.js b/js/events.js index 40da363d..9c789504 100644 --- a/js/events.js +++ b/js/events.js @@ -29,6 +29,11 @@ document.addEventListener("touchend", EVENTS.mouse_release, false); document.addEventListener("touchmove", EVENTS.mouse_move, false); //document.addEventListener("touchcancel", handleCancel, false); +document.getElementById('canvas_front').oncontextmenu = function (e) { + //disable right click on canvas - save does not work anyway + e.preventDefault(); +}; + /** * all events handling * diff --git a/libs/popup.js b/libs/popup.js index fdf43209..6a2dc68b 100644 --- a/libs/popup.js +++ b/libs/popup.js @@ -120,7 +120,7 @@ function popup() { //preview area if (this.preview !== false && this.preview_in_main == false) { - html += '
'; + html += '
'; html += ''; html += '
'; html += ' '; diff --git a/styles/styles.css b/styles/styles.css index 5c62a88a..f10feb72 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -67,12 +67,6 @@ input[type="text"], input[type="button"], select, input[type="number"]{ select{ padding: 2px 4px; } -input[type="radio"]{ - /*transform: scale(1.3, 1.3); - looks ugly on mac */ - width: 15px; - height: 15px; - transform: translate(0, 2px); -} input[type="range"]{ margin-left:0px; width:100%; @@ -85,6 +79,20 @@ input[type="button"]{ } label{ font-size:13px; + display: inline-block; + vertical-align: top; + margin-top: 7px; +} +@supports (zoom:2) { + input[type="radio"], input[type=checkbox]{ + zoom: 1.5; + } +} +@supports not (zoom:2) { + input[type="radio"], input[type=checkbox]{ + transform: scale(1.5); + margin: 8px; + } } /* ========== 2. Header ===================================================== */ @@ -658,9 +666,8 @@ label{ } .group{ border:1px solid #888888; - margin:5px 0px 5px 0px; - padding:5px; - line-height: 1.5; + margin: 5px 0px 5px 0px; + padding:5px 8px; } @media screen and (max-width:700px){ body{ @@ -697,6 +704,7 @@ label{ } #popup h2{ margin-top:0px; + margin-bottom: 10px; cursor:move; } #popup td, #popup th{ From 252190644e563ebfddf3bae6c9353f7313e9b815 Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 23 Jun 2017 22:00:40 +0300 Subject: [PATCH 5/6] brush update - ability to change type --- config.js | 2 +- js/draw_tools.js | 21 +++++++++++++++------ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/config.js b/config.js index b73ceb1f..c565041c 100644 --- a/config.js +++ b/config.js @@ -30,7 +30,7 @@ var DRAW_TOOLS_CONFIG = [ {name: 'letters', title: 'Draw letters', icon: ['sprites.png', -350+3, 4], attributes: {} }, {name: 'draw_square', title: 'Draw rectangle', icon: ['sprites.png', -400+3, 5], attributes: {fill: false, square: false} }, {name: 'draw_circle', title: 'Draw circle', icon: ['sprites.png', -450+3, 5], attributes: {fill: false, circle: false} }, - {name: 'brush', title: 'Brush', icon: ['sprites.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_aliasing: false }, on_update: 'update_brush', }, + {name: 'brush', title: 'Brush', icon: ['sprites.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_aliasing: false, smart_brush: true }, on_update: 'update_brush', }, {name: 'blur_tool', title: 'Blur tool', icon: ['sprites.png', -250+5, -50+2], attributes: {size: 30, power: 1} }, {name: 'sharpen_tool', title: 'Sharpen tool', icon: ['sprites.png', -300+5, -50+2], attributes: {size: 30 } }, {name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['sprites.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} }, diff --git a/js/draw_tools.js b/js/draw_tools.js index 97fb9fa0..f61ae9a5 100644 --- a/js/draw_tools.js +++ b/js/draw_tools.js @@ -752,8 +752,11 @@ function DRAW_TOOLS_CLASS() { }; this.update_brush = function () { document.getElementById('anti_aliasing').style.display = ''; - if (GUI.action_data().attributes.type != 'Brush') + document.getElementById('smart_brush').style.display = ''; + if (GUI.action_data().attributes.type != 'Brush'){ document.getElementById('anti_aliasing').style.display = 'none'; + document.getElementById('smart_brush').style.display = 'none'; + } }; this.desaturate_tool = function (type, mouse, event) { if (mouse.valid == false) @@ -824,11 +827,17 @@ function DRAW_TOOLS_CLASS() { var max_speed = 20; var power = 2; //how speed affects size - var new_size = size + size / max_speed * mouse.speed_average * power; - new_size = Math.max(new_size, size/4); - new_size = Math.round(new_size); - canvas_front.lineWidth = new_size; - canvas_active().lineWidth = new_size; + if (GUI.action_data().attributes.smart_brush == true) { + var new_size = size + size / max_speed * mouse.speed_average * power; + new_size = Math.max(new_size, size/4); + new_size = Math.round(new_size); + canvas_front.lineWidth = new_size; + canvas_active().lineWidth = new_size; + } + else{ + canvas_front.lineWidth = size; + canvas_active().lineWidth = size; + } if (ALPHA == 255) canvas_active().beginPath(); From 7de806aba017266454f3b5502e698e5f57036bd4 Mon Sep 17 00:00:00 2001 From: Vilius Date: Fri, 23 Jun 2017 22:13:28 +0300 Subject: [PATCH 6/6] fix for missing mouse hover helper for some tools, version update --- config.js | 2 +- js/draw_tools.js | 4 ++-- js/events.js | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/config.js b/config.js index c565041c..bbfc87c0 100644 --- a/config.js +++ b/config.js @@ -11,7 +11,7 @@ var canvas_grid = document.getElementById("canvas_grid").getContext("2d"); //gr var canvas_preview = document.getElementById("canvas_preview").getContext("2d"); //mini preview //global settings -var VERSION = '3.3.0.2'; +var VERSION = '3.3.0.3'; var WIDTH; //canvas midth var HEIGHT; //canvas height var COLOR = '#0000ff'; //active color diff --git a/js/draw_tools.js b/js/draw_tools.js index f61ae9a5..fdd58380 100644 --- a/js/draw_tools.js +++ b/js/draw_tools.js @@ -245,7 +245,7 @@ function DRAW_TOOLS_CLASS() { } }; this.erase = function (type, mouse, event) { - if (mouse.valid == false || mouse.click_valid == false) + if (mouse.valid == false || (mouse.click_valid == false && type != 'move')) return true; var strict = GUI.action_data().attributes.strict; var size = GUI.action_data().attributes.size; @@ -787,7 +787,7 @@ function DRAW_TOOLS_CLASS() { } }; this.brush = function (type, mouse, event) { - if (mouse.valid == false || mouse.click_valid == false) + if (mouse.valid == false || (mouse.click_valid == false && type != 'move')) return true; var brush_type = GUI.action_data().attributes.type; var color_rgb = HELPER.hex2rgb(COLOR); diff --git a/js/events.js b/js/events.js index 9c789504..bccfda17 100644 --- a/js/events.js +++ b/js/events.js @@ -201,6 +201,7 @@ function EVENTS_CLASS() { //undo if (EVENTS.ctrl_pressed == true){ EDIT.undo(); + event.preventDefault(); } } //t - trim