Merge pull request #57 from viliusle/master

3.3.0.3 version

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:
+
+ <iframe style="width:100%; height:35vw;" src="https://viliusle.github.io/miniPaint/"></iframe>
+
 ### License
 
  Copyright (C) 2013-2016 ViliusL

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
@@ -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, 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} },

index.html

@@ -11,18 +11,18 @@
 <!-- Google -->
 <meta itemprop="name" content="miniPaint" />
 <meta itemprop="description" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />
-<meta itemprop="image" content="http:https://viliusle.github.io/miniPaint/img/preview.jpg" />
+<meta itemprop="image" content="http:https://viliusle.github.io/miniPaint/img/preview.gif" />
 <!-- Twitter -->
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content="miniPaint" />
 <meta name="twitter:description" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />
-<meta name="twitter:image" content="http:https://viliusle.github.io/miniPaint/img/preview.jpg" />
+<meta name="twitter:image" content="http:https://viliusle.github.io/miniPaint/img/preview.gif" />
 <meta name="twitter:image:alt" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />
 <!-- Facebook, Pinterest -->
 <meta property="og:title" content="miniPaint" />
 <meta property="og:type" content="article" />
 <meta property="og:url" content="http:https://viliusle.github.io/miniPaint/" />
-<meta property="og:image" content="http:https://viliusle.github.io/miniPaint/img/preview.jpg" />
+<meta property="og:image" content="http:https://viliusle.github.io/miniPaint/img/preview.gif" />
 <meta property="og:description" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />
 <meta property="og:site_name" content="miniPaint" />
 </head>

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;
@@ -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)
@@ -784,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);
@@ -822,13 +825,19 @@ 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;
- 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();

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
  * 
@@ -196,6 +201,7 @@ function EVENTS_CLASS() {
  //undo
  if (EVENTS.ctrl_pressed == true){
  EDIT.undo();
+ event.preventDefault();
  }
  }
  //t - trim

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

libs/popup.js

@@ -120,7 +120,7 @@ function popup() {
 
  //preview area
  if (this.preview !== false && this.preview_in_main == false) {
- html += '<div style="margin-top:15px;margin-bottom:15px;">';
+ html += '<div style="margin-top:10px;margin-bottom:15px;">';
  html += '<canvas style="position:relative;float:left;margin:0 5px 5px 0;border:1px solid #393939;" width="' + POP.width_mini + '" height="' + POP.height_mini + '" id="pop_pre"></canvas>';
  html += '<div id="canvas_preview_container">';
  html += ' <canvas style="position:absolute;border:1px solid #393939;background-color:#ffffff;" width="' + POP.width_mini + '" height="' + POP.height_mini + '" id="pop_post_back"></canvas>';

styles/styles.css

@@ -67,9 +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);
-}
 input[type="range"]{
  margin-left:0px;
  width:100%;
@@ -82,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 ===================================================== */
@@ -655,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{
@@ -694,6 +704,7 @@ label{
 }
 #popup h2{
  margin-top:0px;
+ margin-bottom: 10px;
  cursor:move;
 }
 #popup td, #popup th{