artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 11:21:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

shapes, optimized tools events

Browse Source
This commit is contained in:
viliusle 2021-01-03 21:05:23 +02:00
parent 459e0e8b86
commit a15464d431
45 changed files with 3132 additions and 1298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
images/icons/circle.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M435.204,126.967C387.398,94.1,324.11,76,257,76c-67.206,0-130.824,18.084-179.138,50.922C27.652,161.048,0,206.889,0,256
c0,49.111,27.652,94.952,77.862,129.078C126.176,417.916,189.794,436,257,436c67.11,0,130.398-18.1,178.204-50.967
C484.727,350.986,512,305.161,512,256S484.727,161.014,435.204,126.967z M418.208,360.312C375.354,389.774,318.103,406,257,406
c-61.254,0-118.884-16.242-162.273-45.733C52.986,331.898,30,294.868,30,256s22.986-75.898,64.727-104.267
C138.116,122.242,195.746,106,257,106c61.103,0,118.354,16.226,161.208,45.688C459.345,179.97,482,217.015,482,256
S459.345,332.03,418.208,360.312z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1008 B

9
images/icons/line.svg
View File

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<path d="M506.143,5.859c-7.811-7.811-20.475-7.811-28.285,0l-472,472c-7.811,7.811-7.811,20.474,0,28.284
c3.905,3.906,9.024,5.858,14.142,5.858s10.237-1.953,14.143-5.858l472-472C513.954,26.333,513.954,13.67,506.143,5.859z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 610 B

13
images/icons/rectangle.svg
View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="409.042px" height="409.043px" viewBox="0 0 409.042 409.043" style="enable-background:new 0 0 409.042 409.043;"
xml:space="preserve">
<g>
<path d="M389.433,72.762H19.611C8.797,72.762,0,81.558,0,92.374V316.67c0,10.818,8.797,19.611,19.611,19.611h369.822
c10.812,0,19.609-8.793,19.609-19.611V92.374C409.042,81.558,400.246,72.762,389.433,72.762z M392.234,316.67
c0,1.555-1.26,2.802-2.801,2.802H19.611c-1.546,0-2.802-1.247-2.802-2.802V92.374c0-1.546,1.256-2.802,2.802-2.802h369.822
c1.541,0,2.801,1.255,2.801,2.802V316.67z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 913 B

6
images/icons/shape.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 2 31 27" x="0px" y="0px">
<title>shapes</title>
<g>
<path d="M30.87,16.33l-7.5-13a1,1,0,0,0-1.73,0l-5,8.69a8.15,8.15,0,0,0-1.61,0V7a1,1,0,0,0-1-1H2A1,1,0,0,0,1,7V19a1,1,0,0,0,1,1H8a8,8,0,1,0,15.69-2.17H30a1,1,0,0,0,.87-1.5ZM3,18V8H13v4.58l0,0A8,8,0,0,0,8.28,18H3Zm13,8a6,6,0,0,1-6-6,4.62,4.62,0,0,1,.07-.86,6,6,0,0,1,4.22-4.89A5.92,5.92,0,0,1,16,14a5.29,5.29,0,0,1,1,.09A6,6,0,0,1,16,26Zm6.83-10.17h0a8,8,0,0,0-4.12-3.34l0,0L22.5,5.84l5.77,10Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

1681
images/test-collection.json
View File

File diff suppressed because it is too large Load Diff

4
src/css/layout.css
View File

@ -286,10 +286,8 @@ body .sp-preview{
.sidebar_left .erase:after{ background-image: url('images/icons/erase.svg'); }
.sidebar_left .magic_erase:after{ background-image: url('images/icons/magic_erase.svg'); }
.sidebar_left .fill:after{ background-image: url('images/icons/fill.svg'); }
.sidebar_left .line:after{ background-image: url('images/icons/line.svg'); }
.sidebar_left .rectangle:after{ background-image: url('images/icons/rectangle.svg'); }
.sidebar_left .circle:after{ background-image: url('images/icons/circle.svg'); }
.sidebar_left .media:after{ background-image: url('images/icons/media.svg'); }
.sidebar_left .shape:after{ background-image: url('../../images/icons/shape.svg'); }
.sidebar_left .text:after{
background-image: url('images/icons/text.svg');
background-size: 16px auto;

7
src/js/actions/activate-tool.js
View File

@ -24,14 +24,13 @@ export class Activate_tool_action extends Base_action {
if (this.key !== this.old_key || this.ignore_same_tool) {
//reset last
document.querySelector('#tools_container .' + this.old_key)
.classList.remove("active");
document.querySelector('#tools_container .' + this.old_key).classList.remove("active");
//send exit event to old previous tool
if (config.TOOL.on_leave != undefined) {
var moduleKey = config.TOOL.name;
var functionName = config.TOOL.on_leave;
this.tool_leave_actions = app.GUI.GUI_tools.tools_modules[moduleKey][functionName]();
this.tool_leave_actions = app.GUI.GUI_tools.tools_modules[moduleKey].object[functionName]();
if (this.tool_leave_actions) {
for (let action of this.tool_leave_actions) {
await action.do();
@ -70,7 +69,7 @@ export class Activate_tool_action extends Base_action {
if (config.TOOL.on_activate != undefined) {
var moduleKey = config.TOOL.name;
var functionName = config.TOOL.on_activate;
this.tool_activate_actions = app.GUI.GUI_tools.tools_modules[moduleKey][functionName]();
this.tool_activate_actions = app.GUI.GUI_tools.tools_modules[moduleKey].object[functionName]();
if (this.tool_activate_actions) {
for (let action of this.tool_activate_actions) {
await action.do();

4
src/js/actions/stop-animation.js
View File

@ -13,7 +13,7 @@ export class Stop_animation_action extends Base_action {
async do() {
super.do();
const animation_tool = app.GUI.GUI_tools.tools_modules.animation;
const animation_tool = app.GUI.GUI_tools.tools_modules.animation.object;
var params = animation_tool.getParams();
if (animation_tool.intervalID == null)
return;
@ -36,7 +36,7 @@ export class Stop_animation_action extends Base_action {
async undo() {
super.undo();
const animation_tool = app.GUI.GUI_tools.tools_modules.animation;
const animation_tool = app.GUI.GUI_tools.tools_modules.animation.object;
var params = animation_tool.getParams();
if (animation_tool.intervalID == null)
return;

201
src/js/config.js
View File

@ -81,13 +81,11 @@ config.TOOLS = [
},
{
name: 'selection',
title: 'Selection',
attributes: {},
on_leave: 'on_leave',
},
{
name: 'brush',
title: 'Brush',
attributes: {
size: 4,
pressure: false,
@ -95,7 +93,6 @@ config.TOOLS = [
},
{
name: 'pencil',
title: 'Pencil',
on_update: 'on_params_update',
attributes: {
antialiasing: true,
@ -104,14 +101,12 @@ config.TOOLS = [
},
{
name: 'pick_color',
title: 'Pick Color',
attributes: {
global: false,
},
},
{
name: 'erase',
title: 'Erase',
on_update: 'on_params_update',
attributes: {
size: 30,
@ -130,7 +125,6 @@ config.TOOLS = [
},
{
name: 'fill',
title: 'Fill',
attributes: {
power: 5,
anti_aliasing: false,
@ -138,35 +132,52 @@ config.TOOLS = [
},
},
{
name: 'line',
title: 'Line',
name: 'shape',
on_activate: 'on_activate',
attributes: {
size: 1,
type: {
value: 'Simple',
values: ['Simple', 'Arrow'],
},
size: 3,
stroke: '#00aa00',
},
},
{
name: 'line',
visible: false,
attributes: {
size: 4,
},
},
{
name: 'arrow',
visible: false,
attributes: {
size: 4,
},
},
{
name: 'rectangle',
title: 'Rectangle',
visible: false,
attributes: {
size: 1,
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
radius: {
value: 0,
min: 0,
},
fill: true,
square: false,
},
},
{
name: 'circle',
title: 'Circle',
name: 'ellipse',
visible: false,
attributes: {
size: 1,
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
circle: false,
},
},
@ -178,9 +189,152 @@ config.TOOLS = [
size: 30,
},
},
{
name: 'triangle',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'right_triangle',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'romb',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'parallelogram',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'trapezoid',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'plus',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'pentagon',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'hexagon',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'star',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'star24',
title: '24-Points star',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'heart',
visible: false,
attributes: {
border_size: 4,
border: false,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'cylinder',
visible: false,
attributes: {
border_size: 4,
border: true,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'human',
visible: false,
attributes: {
border_size: 4,
border: true,
fill: true,
border_color: '#555555',
fill_color: '#aaaaaa',
},
},
{
name: 'text',
title: 'Text',
on_update: 'on_params_update',
attributes: {
font: {
@ -227,7 +381,6 @@ config.TOOLS = [
},
{
name: 'gradient',
title: 'Gradient',
attributes: {
color_1: '#008000',
color_2: '#ffffff',
@ -238,7 +391,6 @@ config.TOOLS = [
},
{
name: 'clone',
title: 'Clone tool',
attributes: {
size: 30,
anti_aliasing: true,
@ -250,7 +402,6 @@ config.TOOLS = [
},
{
name: 'crop',
title: 'Crop',
on_update: 'on_params_update',
on_leave: 'on_leave',
attributes: {
@ -259,7 +410,6 @@ config.TOOLS = [
},
{
name: 'blur',
title: 'Blur tool',
attributes: {
size: 30,
strength: 1,
@ -267,14 +417,12 @@ config.TOOLS = [
},
{
name: 'sharpen',
title: 'Sharpen tool',
attributes: {
size: 30,
},
},
{
name: 'desaturate',
title: 'Desaturate',
attributes: {
size: 50,
anti_aliasing: true,
@ -291,7 +439,6 @@ config.TOOLS = [
},
{
name: 'animation',
title: 'Play animation',
on_activate: 'on_activate',
on_update: 'on_params_update',
on_leave: 'on_leave',

6
src/js/core/base-layers.js
View File

@ -197,8 +197,8 @@ class Base_layers_class {
var render_class = config.TOOL.name;
var render_function = 'render_overlay';
if(typeof this.Base_gui.GUI_tools.tools_modules[render_class][render_function] != "undefined") {
this.Base_gui.GUI_tools.tools_modules[render_class][render_function](this.ctx);
if(typeof this.Base_gui.GUI_tools.tools_modules[render_class].object[render_function] != "undefined") {
this.Base_gui.GUI_tools.tools_modules[render_class].object[render_function](this.ctx);
}
}
@ -307,7 +307,7 @@ class Base_layers_class {
var render_function = object.render_function[1];
if(typeof this.Base_gui.GUI_tools.tools_modules[render_class] != "undefined") {
this.Base_gui.GUI_tools.tools_modules[render_class][render_function](ctx, object, is_preview);
this.Base_gui.GUI_tools.tools_modules[render_class].object[render_function](ctx, object, is_preview);
}
else{
this.render_success = false;

2
src/js/core/base-selection.js
View File

@ -78,7 +78,7 @@ class Base_selection_class {
document.addEventListener('touchstart', (event) => {
this.is_drag = false;
this.is_touch = true;
if (!e.target.closest('#main_wrapper'))
if (!event.target.closest('#main_wrapper'))
return;
this.is_drag = true;
this.selected_object_actions(event);

197
src/js/core/base-tools.js
View File

@ -6,6 +6,8 @@
import config from './../config.js';
import Base_layers_class from './base-layers.js';
import Base_gui_class from './base-gui.js';
import app from "../app";
import Helper_class from "../libs/helpers";
/**
* Base tools class, can be used for extending on tools like brush, provides various helping methods.
@ -15,6 +17,7 @@ class Base_tools_class {
constructor(save_mouse) {
this.Base_layers = new Base_layers_class();
this.Base_gui = new Base_gui_class();
this.Helper = new Helper_class();
this.is_drag = false;
this.mouse_last_click_pos = [false, false];
this.mouse_click_pos = [false, false];
@ -307,5 +310,199 @@ class Base_tools_class {
return response;
}
draw_shape(ctx, x, y, width, height, coords, is_demo) {
if(is_demo !== false) {
ctx.fillStyle = '#aaa';
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
}
ctx.lineJoin = "round";
ctx.beginPath();
for(var i in coords){
if(coords[i] === null){
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
continue;
}
//coords in 100x100 box
var pos_x = x + coords[i][0] * width / 100;
var pos_y = y + coords[i][1] * height / 100;
if(i == '0')
ctx.moveTo(pos_x, pos_y);
else
ctx.lineTo(pos_x, pos_y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
default_events(){
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.default_dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.default_dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.default_dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.default_dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.default_dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.default_dragEnd(event);
});
}
default_dragStart(event) {
if (config.TOOL.name != this.name)
return;
this.mousedown(event);
}
default_dragMove(event) {
if (config.TOOL.name != this.name)
return;
this.mousemove(event);
}
default_dragEnd(event) {
if (config.TOOL.name != this.name)
return;
this.mouseup(event);
}
shape_mousedown(e) {
var mouse = this.get_mouse_info(e);
if (mouse.valid == false || mouse.click_valid == false)
return;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
status: 'draft',
render_function: [this.name, 'render'],
x: Math.round(mouse.x),
y: Math.round(mouse.y),
color: null,
is_vector: true
};
app.State.do_action(
new app.Actions.Bundle_action('new_'+this.name+'_layer', 'New '+this.Helper.ucfirst(this.name)+' Layer', [
new app.Actions.Insert_layer_action(this.layer)
])
);
}
shape_mousemove(e) {
var mouse = this.get_mouse_info(e);
var params = this.getParams();
if (mouse.is_drag == false)
return;
if (mouse.valid == false || mouse.click_valid == false) {
return;
}
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var x = Math.min(mouse_x, click_x);
var y = Math.min(mouse_y, click_y);
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
if (e.ctrlKey == true || e.metaKey) {
if (width < height * this.best_ratio) {
width = height * this.best_ratio;
}
else {
height = width / this.best_ratio;
}
if (mouse_x < click_x) {
x = click_x - width;
}
if (mouse_y < click_y) {
y = click_y - height;
}
}
//more data
config.layer.x = x;
config.layer.y = y;
config.layer.width = width;
config.layer.height = height;
this.Base_layers.render();
}
shape_mouseup(e) {
var mouse = this.get_mouse_info(e);
var params = this.getParams();
if (mouse.valid == false || mouse.click_valid == false) {
config.layer.status = null;
return;
}
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var x = Math.min(mouse_x, click_x);
var y = Math.min(mouse_y, click_y);
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
if (e.ctrlKey == true || e.metaKey) {
if (width < height * this.best_ratio) {
width = height * this.best_ratio;
}
else {
height = width / this.best_ratio;
}
if (mouse_x < click_x) {
x = click_x - width;
}
if (mouse_y < click_y) {
y = click_y - height;
}
}
if (width == 0 && height == 0) {
//same coordinates - cancel
app.State.scrap_last_action();
return;
}
//more data
app.State.do_action(
new app.Actions.Update_layer_action(config.layer.id, {
x,
y,
width,
height,
status: null
}),
{ merge_with_history: 'new_'+this.name+'_layer' }
);
}
}
export default Base_tools_class;

4
src/js/core/gui/gui-details.js
View File

@ -137,6 +137,10 @@ class GUI_details_class {
document.getElementById('text_detail_params').style.display = 'block';
document.getElementById('detail_color').closest('.row').style.display = 'none';
}
else if (config.layer != undefined && (config.layer.color === null || config.layer.type == 'image')) {
//hide color
document.getElementById('detail_color').closest('.row').style.display = 'none';
}
else {
document.getElementById('text_detail_params').style.display = 'none';
document.getElementById('detail_color').closest('.row').style.display = 'block';

44
src/js/core/gui/gui-tools.js
View File

@ -40,11 +40,30 @@ class GUI_tools_class {
plugins_context.keys().forEach(function (key) {
if (key.indexOf('Base' + '/') < 0) {
var moduleKey = key.replace('./', '').replace('.js', '');
var full_key = moduleKey;
if (moduleKey.indexOf('/') > -1) {
var parts = moduleKey.split("/");
moduleKey = parts[parts.length - 1];
}
var classObj = plugins_context(key);
_this.tools_modules[moduleKey] = new classObj.default(ctx);
var object = new classObj.default(ctx);
var title = _this.Helper.ucfirst(object.name);
title = title.replace(/_/, ' ');
_this.tools_modules[moduleKey] = {
key: moduleKey,
full_key: full_key,
name: object.name,
title: title,
object: object,
};
//init events once
_this.tools_modules[moduleKey].load();
if(typeof object.load != "undefined") {
object.load();
}
}
});
}
@ -59,8 +78,8 @@ class GUI_tools_class {
var target_id = "tools_container";
var _this = this;
var saved_tool = this.Helper.getCookie('active_tool');
if(saved_tool == 'media') {
//bringing this backby default gives bad UX
if(saved_tool == 'media' || saved_tool == 'shape') {
//bringing this back by default gives bad UX
saved_tool = null
}
if (saved_tool != null) {
@ -70,16 +89,23 @@ class GUI_tools_class {
//left menu
for (var i in config.TOOLS) {
var item = config.TOOLS[i];
if(item.title)
var title = item.title;
else
var title = this.Helper.ucfirst(item.name).replace(/_/, ' ');
var itemDom = document.createElement('span');
itemDom.id = item.name;
itemDom.title = item.title;
itemDom.title = title;
if (item.name == this.active_tool) {
itemDom.className = 'item trn active ' + item.name;
}
else {
itemDom.className = 'item trn ' + item.name;
}
if(item.visible === false){
itemDom.style.display = 'none';
}
//event
itemDom.addEventListener('click', function (event) {
@ -195,7 +221,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
this.tools_modules[moduleKey][functionName]({ key: id, value: new_value });
this.tools_modules[moduleKey].object[functionName]({ key: id, value: new_value });
}
});
@ -255,7 +281,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
this.tools_modules[moduleKey][functionName]({ key: id, value: value });
this.tools_modules[moduleKey].object[functionName]({ key: id, value: value });
}
});
@ -292,7 +318,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
this.tools_modules[moduleKey][functionName]({ key: event.target.id, value: event.target.value });
this.tools_modules[moduleKey].object[functionName]({ key: event.target.id, value: event.target.value });
}
});
@ -322,7 +348,7 @@ class GUI_tools_class {
//send event
var moduleKey = actionData.name;
var functionName = actionData.on_update;
this.tools_modules[moduleKey][functionName]({ key: id, value: value });
this.tools_modules[moduleKey].object[functionName]({ key: id, value: value });
}
});

3
src/js/modules/effects/browser.js
View File

@ -33,6 +33,9 @@ class Effects_browser_class extends Base_tools_class {
html += '<div class="center">' + title + '</div>';
html += '</div>';
}
for (var i = 0; i < 4; i++) {
html += '<div class="item"></div>';
}
var settings = {
title: 'Effects browser',

36
src/js/modules/file/open.js
View File

@ -413,6 +413,8 @@ class File_open_class {
if (json.info.version == undefined) {
json.info.version = "3";
}
//migration
if (json.info.version < "4") {
//convert from v3 to v4
for (var i in json.layers) {
@ -444,6 +446,40 @@ class File_open_class {
);
}
}
if(json.info.version < "4.5.0"){
//migrate "rectangle", "circle" and "line" types to "shape"
for (var i in json.layers) {
var old_type = json.layers[i].type;
if(old_type == 'line' && json.layers[i].params.type.value == "Arrow"){
//migrate line (type=arrow) to arrow.
json.layers[i].type = 'arrow';
delete json.layers[i].params.type;
json.layers[i].render_function = ["arrow", "render"];
}
if(old_type == 'rectangle' || old_type == 'circle'){
//migrate params
json.layers[i].params.border_size = json.layers[i].params.size;
delete json.layers[i].params.size;
if(json.layers[i].params.fill == true){
json.layers[i].params.border = false;
}
else{
json.layers[i].params.border = true;
}
json.layers[i].params.border_color = json.layers[i].color;
json.layers[i].params.fill_color = json.layers[i].color;
json.layers[i].color = null;
}
if(old_type == 'circle'){
//rename circle to ellipse
json.layers[i].type = 'ellipse';
json.layers[i].render_function = ["ellipse", "render"];
}
}
}
const actions = [];

53
src/js/tools/blur.js
View File

@ -19,56 +19,19 @@ class Blur_class extends Base_tools_class {
this.started = false;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
load() {
this.default_events();
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
default_dragMove(event) {
if (config.TOOL.name != this.name)
return;
_this.mousemove(event);
this.mousemove(event);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
var mouse = this.get_mouse_info(event);
var params = this.getParams();
this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
mousedown(e) {

51
src/js/tools/bulge_pinch.js
View File

@ -20,55 +20,18 @@ class BulgePinch_class extends Base_tools_class {
this.started = false;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
load() {
this.default_events();
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
default_dragMove(event) {
if (config.TOOL.name != this.name)
return;
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
_this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
var mouse = this.get_mouse_info(event);
var params = this.getParams();
this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
}
mousedown(e) {

76
src/js/tools/clone.js
View File

@ -20,44 +20,6 @@ class Clone_class extends Base_tools_class {
this.pressTimer = null;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
var mouse = this.get_mouse_info(event);
if (mouse.valid == true) {
this.pressTimer = window.setTimeout(function() {
//long press success
_this.mouseLongClick();
}, 2000);
}
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
clearTimeout(this.pressTimer);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
clearTimeout(this.pressTimer);
}
load() {
var _this = this;
var is_touch = false;
@ -96,6 +58,44 @@ class Clone_class extends Base_tools_class {
});
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
var mouse = this.get_mouse_info(event);
if (mouse.valid == true) {
this.pressTimer = window.setTimeout(function() {
//long press success
_this.mouseLongClick();
}, 2000);
}
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
clearTimeout(this.pressTimer);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
clearTimeout(this.pressTimer);
}
on_params_update() {
var params = this.getParams();
var strict_element = document.getElementById('strict');

45
src/js/tools/crop.js
View File

@ -36,54 +36,21 @@ class Crop_class extends Base_tools_class {
this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
}
dragStart(event) {
load() {
this.default_events();
}
default_dragStart(event) {
this.is_mousedown_canvas = false;
if (config.TOOL.name != this.name)
return;
if (!event.target.closest('#main_wrapper'))
return;
this.is_mousedown_canvas = true;
this.mousedown(event);
}
dragMove(event) {
if (config.TOOL.name != this.name)
return;
this.mousemove(event);
}
dragEnd(event) {
if (config.TOOL.name != this.name)
return;
this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
}
mousedown(e) {
var mouse = this.get_mouse_info(e);
if (this.Base_selection.is_drag == false || mouse.valid == false || mouse.click_valid == false)

53
src/js/tools/desaturate.js
View File

@ -19,56 +19,19 @@ class Desaturate_class extends Base_tools_class {
this.started = false;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
load() {
this.default_events();
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
default_dragMove(event) {
if (config.TOOL.name != this.name)
return;
_this.mousemove(event);
this.mousemove(event);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
var mouse = this.get_mouse_info(event);
var params = this.getParams();
this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
mousedown(e) {

55
src/js/tools/erase.js
View File

@ -16,59 +16,22 @@ class Erase_class extends Base_tools_class {
this.started = false;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
load() {
this.default_events();
}
dragMove(event, is_touch) {
var _this = this;
if (config.TOOL.name != _this.name)
default_dragMove(event, is_touch) {
if (config.TOOL.name != this.name)
return;
_this.mousemove(event, is_touch);
this.mousemove(event, is_touch);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
var mouse = this.get_mouse_info(event);
var params = this.getParams();
if (params.circle == true)
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
else
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event, false);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event, true);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
}
on_params_update() {

45
src/js/tools/gradient.js
View File

@ -15,51 +15,8 @@ class Gradient_class extends Base_tools_class {
this.layer = {};
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
this.default_events();
}
mousedown(e) {

51
src/js/tools/pencil.js
View File

@ -13,57 +13,20 @@ class Pencil_class extends Base_tools_class {
this.params_hash = false;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
load() {
this.default_events();
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
if (config.TOOL.name != this.name)
return;
_this.mousemove(event);
this.mousemove(event);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
var mouse = this.get_mouse_info(event);
var params = this.getParams();
if (params.antialiasing == true)
_this.show_mouse_cursor(mouse.x, mouse.y, params.size || 1, 'circle');
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
this.show_mouse_cursor(mouse.x, mouse.y, params.size || 1, 'circle');
}
mousedown(e) {

38
src/js/tools/select.js
View File

@ -43,25 +43,6 @@ class Select_tool_class extends Base_tools_class {
}
}
dragStart(event) {
if (config.TOOL.name != this.name)
return;
this.mousedown(event);
}
dragMove(event) {
if (config.TOOL.name != this.name)
return;
this.mousemove(event);
}
dragEnd(event) {
if (config.TOOL.name != this.name)
return;
this.mouseup(event);
this.Base_layers.render();
}
load() {
var _this = this;
@ -140,6 +121,25 @@ class Select_tool_class extends Base_tools_class {
});
}
dragStart(event) {
if (config.TOOL.name != this.name)
return;
this.mousedown(event);
}
dragMove(event) {
if (config.TOOL.name != this.name)
return;
this.mousemove(event);
}
dragEnd(event) {
if (config.TOOL.name != this.name)
return;
this.mouseup(event);
this.Base_layers.render();
}
async mousedown(e) {
var mouse = this.get_mouse_info(e);
if (mouse.valid == false || mouse.click_valid == false)

42
src/js/tools/selection.js
View File

@ -50,27 +50,6 @@ class Selection_class extends Base_tools_class {
this.GUI_tools = new GUI_tools_class();
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
@ -119,6 +98,27 @@ class Selection_class extends Base_tools_class {
}, false);
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
mousedown(e) {
var mouse = this.get_mouse_info(e);
var layer = config.layer;

113
src/js/tools/shape.js Normal file
View File

@ -0,0 +1,113 @@
import app from './../app.js';
import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import Base_layers_class from './../core/base-layers.js';
import Dialog_class from './../libs/popup.js';
import GUI_tools_class from './../core/gui/gui-tools.js';
class Shape_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.GUI_tools = new GUI_tools_class();
this.POP = new Dialog_class();
this.ctx = ctx;
this.name = 'shape';
this.layer = {};
this.preview_width = 150;
this.preview_height = 120;
}
load() {
}
on_activate() {
this.show_shapes();
}
async show_shapes(){
var _this = this;
var html = '';
var data = this.get_shapes();
for (var i in data) {
html += '<div class="item">';
html += ' <canvas id="c_' + data[i].key + '" width="' + this.preview_width + '" height="'
+ this.preview_height + '" class="effectsPreview" data-key="'
+ data[i].key + '"></canvas>';
html += '<div class="center">' + data[i].title + '</div>';
html += '</div>';
}
for (var i = 0; i < 4; i++) {
html += '<div class="item"></div>';
}
var settings = {
title: 'Shapes',
className: 'wide',
on_load: function (params) {
var node = document.createElement("div");
node.classList.add('flex-container');
node.innerHTML = html;
document.querySelector('#popup #dialog_content').appendChild(node);
//events
var targets = document.querySelectorAll('#popup .item canvas');
for (var i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (event) {
//we have click
_this.GUI_tools.activate_tool(this.dataset.key);
_this.POP.hide();
});
}
},
};
this.POP.show(settings);
//sleep, lets wait till DOM is finished
await new Promise(r => setTimeout(r, 10));
//draw demo thumbs
for (var i in data) {
var function_name = 'demo';
var canvas = document.getElementById('c_'+data[i].key);
var ctx = canvas.getContext("2d");
if(typeof data[i].object[function_name] == "undefined")
continue;
data[i].object[function_name](ctx, 20, 20, this.preview_width - 40, this.preview_height - 40, null);
}
}
render(ctx, layer) {
}
get_shapes(){
var list = [];
for (var i in this.Base_gui.GUI_tools.tools_modules) {
var object = this.Base_gui.GUI_tools.tools_modules[i];
if (object.full_key.indexOf("shapes/") == -1 )
continue;
list.push(object);
}
list.sort(function(a, b) {
var nameA = a.title.toUpperCase();
var nameB = b.title.toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
return list;
}
}
export default Shape_class;

96
src/js/tools/line.js → src/js/tools/shapes/arrow.js
View File

@ -1,63 +1,20 @@
import app from './../app.js';
import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import Base_layers_class from './../core/base-layers.js';
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Line_class extends Base_tools_class {
class Arrow_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'line';
this.name = 'arrow';
this.layer = {};
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
this.default_events();
}
mousedown(e) {
@ -143,12 +100,19 @@ class Line_class extends Base_tools_class {
);
}
demo(ctx, x, y, width, height) {
ctx.fillStyle = '#aaa';
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
this.arrow(ctx, x, y, x + width, y + height, 15);
}
render(ctx, layer) {
if (layer.width == 0 && layer.height == 0)
return;
var params = layer.params;
var type = params.type.value;
//set styles
ctx.fillStyle = layer.color;
@ -159,30 +123,16 @@ class Line_class extends Base_tools_class {
var width = layer.x + layer.width;
var height = layer.y + layer.height;
if (type == 'Simple') {
//draw line
ctx.beginPath();
ctx.moveTo(layer.x, layer.y);
ctx.lineTo(width, height);
ctx.stroke();
}
else if (type == 'Arrow') {
var headlen = params.size * 5;
if (headlen < 15)
headlen = 15;
this.arrow(ctx,
layer.x, layer.y,
width, height,
headlen);
}
else if (type == 'Curve') {
//not supported
}
var headlen = params.size * 7;
if (headlen < 15)
headlen = 15;
this.arrow(ctx,
layer.x, layer.y,
width, height,
headlen);
}
arrow(ctx, fromx, fromy, tox, toy, headlen) {
if (headlen == undefined)
headlen = 10; // length of head in pixels
var dx = tox - fromx;
var dy = toy - fromy;
var angle = Math.atan2(dy, dx);
@ -199,4 +149,4 @@ class Line_class extends Base_tools_class {
}
export default Line_class;
export default Arrow_class;

94
src/js/tools/shapes/cylinder.js Normal file
View File

@ -0,0 +1,94 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Cylinder_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'cylinder';
this.layer = {};
this.best_ratio = 0.7;
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
ctx.fillStyle = '#aaa';
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
var width_all = width + x * 2;
width = height * this.best_ratio;
x = (width_all - width) / 2;
ctx.save();
ctx.translate(x + width / 2, y + height / 2);
this.draw_shape(ctx, -width / 2, -height / 2, width, height);
ctx.restore();
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height);
ctx.restore();
}
draw_shape(ctx, x, y, width, height, coords) {
ctx.lineJoin = "round";
ctx.beginPath();
ctx.scale(1, 1.20);
ctx.translate(-width / 2, -height / 2);
var dh = height/3;
ctx.moveTo(0, dh);
ctx.bezierCurveTo(0,dh+dh, width,dh+dh, width,dh);
ctx.bezierCurveTo(width,dh-dh, 0,dh-dh, 0,dh);
ctx.lineTo(0, height-dh);
ctx.bezierCurveTo(0,height-dh+dh, width,height-dh+dh, width,height-dh);
ctx.lineTo(width, dh);
ctx.fill();
ctx.stroke();
}
}
export default Cylinder_class;

138
src/js/tools/circle.js → src/js/tools/shapes/ellipse.js
View File

@ -1,63 +1,20 @@
import app from './../app.js';
import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import Base_layers_class from './../core/base-layers.js';
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Circle_class extends Base_tools_class {
class Ellipse_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'circle';
this.name = 'ellipse';
this.layer = {};
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
this.default_events();
}
mousedown(e) {
@ -75,18 +32,18 @@ class Circle_class extends Base_tools_class {
x: mouse.x,
y: mouse.y,
is_vector: true,
color: null,
data: {
center_x: mouse.x,
center_y: mouse.y,
},
color: config.COLOR
}
};
if (params.circle == true) {
//disable rotate
this.layer.rotate = null;
}
app.State.do_action(
new app.Actions.Bundle_action('new_circle_layer', 'New Circle Layer', [
new app.Actions.Bundle_action('new_ellipse_layer', 'New Ellipse Layer', [
new app.Actions.Insert_layer_action(this.layer)
])
);
@ -102,9 +59,14 @@ class Circle_class extends Base_tools_class {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
if (params.circle == true) {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
if (params.circle == true || e.ctrlKey == true || e.metaKey) {
width = Math.round(Math.sqrt(width * width + height * height));
height = width;
}
@ -126,9 +88,14 @@ class Circle_class extends Base_tools_class {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
if (params.circle == true) {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
if (params.circle == true || e.ctrlKey == true || e.metaKey) {
width = Math.round(Math.sqrt(width * width + height * height));
height = width;
}
@ -148,7 +115,28 @@ class Circle_class extends Base_tools_class {
height: height * 2,
status: null
}),
{ merge_with_history: 'new_circle_layer' }
{ merge_with_history: 'new_ellipse_layer' }
);
}
demo(ctx, x, y, width, height) {
x = parseInt(x);
y = parseInt(y);
width = parseInt(width);
height = parseInt(height);
ctx.fillStyle = '#aaa';
ctx.strokeStyle = '#555';
ctx.lineWidth = 3;
this.ellipse(
ctx,
x,
y,
width,
height,
true,
true
);
}
@ -159,9 +147,13 @@ class Circle_class extends Base_tools_class {
ctx.save();
//set styles
ctx.fillStyle = layer.color;
ctx.strokeStyle = layer.color;
ctx.lineWidth = params.size;
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
var dist_x = layer.width;
var dist_y = layer.height;
@ -173,8 +165,9 @@ class Circle_class extends Base_tools_class {
layer.y + Math.round(layer.height / 2),
dist_x,
dist_y,
params.border,
params.fill
);
);
}
else {
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
@ -185,18 +178,19 @@ class Circle_class extends Base_tools_class {
-layer.height / 2 + Math.round(layer.height / 2),
dist_x,
dist_y,
params.border,
params.fill
);
);
}
ctx.restore();
}
ellipse_by_center(ctx, cx, cy, w, h, fill) {
this.ellipse(ctx, cx - w / 2.0, cy - h / 2.0, w, h, fill);
ellipse_by_center(ctx, cx, cy, w, h, stroke, fill) {
this.ellipse(ctx, cx - w / 2.0, cy - h / 2.0, w, h, stroke, fill);
}
ellipse(ctx, x, y, w, h, fill) {
ellipse(ctx, x, y, w, h, stroke, fill) {
var kappa = .5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
@ -212,12 +206,12 @@ class Circle_class extends Base_tools_class {
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
if (fill == undefined || fill == false)
if ( stroke == true)
ctx.stroke();
else
if (fill == true)
ctx.fill();
}
}
;
export default Circle_class;
export default Ellipse_class;

100
src/js/tools/shapes/heart.js Normal file
View File

@ -0,0 +1,100 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Heart_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'heart';
this.layer = {};
this.best_ratio = 1.2;
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
ctx.fillStyle = '#aaa';
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
ctx.save();
ctx.translate(x + width / 2, y + height / 2);
this.draw_shape(ctx, -width / 2, -height / 2, width, height);
ctx.restore();
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height);
ctx.restore();
}
draw_shape(ctx, x, y, width, height, coords) {
ctx.lineJoin = "round";
ctx.beginPath();
ctx.scale(1.071, 1.1);
ctx.translate(-width / 2, -height / 1.85);
ctx.moveTo(width/2, height/5);
ctx.bezierCurveTo(5 * width / 14, 0,
0, height / 15,
width / 28, 2 * height / 5);
ctx.bezierCurveTo(width / 14, 2 * height / 3,
3 * width / 7, 5 * height / 6,
width / 2, height);
ctx.bezierCurveTo(4 * width / 7, 5 * height / 6,
13 * width / 14, 2 * height / 3,
27 * width / 28, 2 * height / 5);
ctx.bezierCurveTo(width, height / 15,
9 * width / 14, 0,
width / 2, height / 5);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
export default Heart_class;

76
src/js/tools/shapes/hexagon.js Normal file
View File

@ -0,0 +1,76 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Hexagon_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'hexagon';
this.layer = {};
this.best_ratio = 1;
this.coords = [
[75, 6.698729810778069],
[100, 50],
[75, 93.30127018922192],
[24.99999999999999, 93.30127018922192],
[0, 50.00000000000001],
[24.99999999999998, 6.698729810778076],
[75, 6.698729810778069],
[75, 6.698729810778069],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
var width_all = width + x * 2;
width = height;
x = (width_all - width) / 2;
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Hexagon_class;

105
src/js/tools/shapes/human.js Normal file
View File

@ -0,0 +1,105 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Human_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'human';
this.layer = {};
this.best_ratio = 0.35;
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
ctx.fillStyle = '#aaa';
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
var width_all = width + x * 2;
width = height * this.best_ratio;
x = (width_all - width) / 2;
ctx.save();
ctx.translate(x + width / 2, y + height / 2);
this.draw_shape(ctx, -width / 2, -height / 2, width, height);
ctx.restore();
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height);
ctx.restore();
}
draw_shape(ctx, x, y, width, height) {
ctx.lineJoin = "round";
ctx.beginPath();
ctx.translate(-width / 2, -height / 2);
var radius = Math.sqrt(width * height) * 0.28;
var neck_height = height * 0.07;
var leg_height = height * 0.3;
if(radius * 2 + neck_height + leg_height > height){
radius = (height - leg_height - neck_height) / 2;
}
ctx.arc(width / 2, radius, radius, 0, 2 * Math.PI);
//body
ctx.moveTo(width / 2, radius * 2);
ctx.lineTo(width / 2, height - leg_height);
//arm
ctx.moveTo(0, radius*2 + neck_height);
ctx.lineTo(width, radius*2 + neck_height);
//left leg
ctx.moveTo(width / 2, height - leg_height);
ctx.lineTo(0, height);
//right leg
ctx.moveTo(width / 2, height - leg_height);
ctx.lineTo(width, height);
ctx.fill();
ctx.stroke();
}
}
export default Human_class;

135
src/js/tools/shapes/line.js Normal file
View File

@ -0,0 +1,135 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Line_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'line';
this.layer = {};
}
load() {
this.default_events();
}
mousedown(e) {
var mouse = this.get_mouse_info(e);
if (mouse.valid == false || mouse.click_valid == false)
return;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
status: 'draft',
render_function: [this.name, 'render'],
x: mouse.x,
y: mouse.y,
rotate: null,
is_vector: true,
color: config.COLOR
};
app.State.do_action(
new app.Actions.Bundle_action('new_line_layer', 'New Line Layer', [
new app.Actions.Insert_layer_action(this.layer)
])
);
}
mousemove(e) {
var mouse = this.get_mouse_info(e);
if (mouse.is_drag == false)
return;
if (mouse.valid == false || mouse.click_valid == false) {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
if (e.ctrlKey == true || e.metaKey) {
//one direction only
if (Math.abs(width) < Math.abs(height))
width = 0;
else
height = 0;
}
//more data
config.layer.width = width;
config.layer.height = height;
this.Base_layers.render();
}
mouseup(e) {
var mouse = this.get_mouse_info(e);
if (mouse.valid == false || mouse.click_valid == false) {
config.layer.status = null;
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
if (width == 0 && height == 0) {
//same coordinates - cancel
app.State.scrap_last_action();
return;
}
if (e.ctrlKey == true || e.metaKey) {
//one direction only
if (Math.abs(width) < Math.abs(height))
width = 0;
else
height = 0;
}
//more data
app.State.do_action(
new app.Actions.Update_layer_action(config.layer.id, {
width,
height,
status: null
}),
{ merge_with_history: 'new_line_layer' }
);
}
demo(ctx, x, y, width, height) {
var coords = [
[0, 0],
[100, 100],
];
this.draw_shape(ctx, x, y, width, height, coords);
}
render(ctx, layer) {
if (layer.width == 0 && layer.height == 0)
return;
var params = layer.params;
//set styles
ctx.fillStyle = layer.color;
ctx.strokeStyle = layer.color;
ctx.lineWidth = params.size;
ctx.lineCap = 'round';
var width = layer.x + layer.width;
var height = layer.y + layer.height;
//draw line
ctx.beginPath();
ctx.moveTo(layer.x, layer.y);
ctx.lineTo(width, height);
ctx.stroke();
}
}
export default Line_class;

69
src/js/tools/shapes/parallelogram.js Normal file
View File

@ -0,0 +1,69 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Parallelogram_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'parallelogram';
this.layer = {};
this.best_ratio = 2;
this.coords = [
[25, 0],
[100, 0],
[75, 100],
[0, 100],
[25, 0],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Parallelogram_class;

75
src/js/tools/shapes/pentagon.js Normal file
View File

@ -0,0 +1,75 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Pentagon_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'pentagon';
this.layer = {};
this.best_ratio = 1;
this.coords = [
[100.40599536364314, 38.90073974812779],
[81.15261837150108, 98.1565411518722],
[18.84738162849893, 98.1565411518722],
[-0.40599536364314304, 38.90073974812779],
[49.99999999999999, 2.2786404499999975],
[100.40599536364314, 38.900739748127776],
[100.40599536364314, 38.90073974812779],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
var width_all = width + x * 2;
width = height;
x = (width_all - width) / 2;
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Pentagon_class;

79
src/js/tools/shapes/plus.js Normal file
View File

@ -0,0 +1,79 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
import Helper_class from './../../libs/helpers.js';
class Plus_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.Helper = new Helper_class();
this.ctx = ctx;
this.name = 'plus';
this.layer = {};
this.best_ratio = 1;
this.coords = [
[38, 13],
[62, 13],
[62, 38],
[87, 38],
[87, 62],
[62, 62],
[62, 87],
[38, 87],
[38, 62],
[13, 62],
[13, 38],
[38, 38],
[38, 13],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Plus_class;

91
src/js/tools/rectangle.js → src/js/tools/shapes/rectangle.js
View File

@ -1,7 +1,7 @@
import app from './../app.js';
import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import Base_layers_class from './../core/base-layers.js';
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Rectangle_class extends Base_tools_class {
@ -13,51 +13,8 @@ class Rectangle_class extends Base_tools_class {
this.layer = {};
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousemove(event);
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
this.default_events();
}
mousedown(e) {
@ -73,8 +30,8 @@ class Rectangle_class extends Base_tools_class {
render_function: [this.name, 'render'],
x: Math.round(mouse.x),
y: Math.round(mouse.y),
is_vector: true,
color: config.COLOR
color: null,
is_vector: true
};
app.State.do_action(
new app.Actions.Bundle_action('new_rectangle_layer', 'New Rectangle Layer', [
@ -102,7 +59,7 @@ class Rectangle_class extends Base_tools_class {
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
if (params.square == true) {
if (params.square == true || e.ctrlKey == true || e.metaKey) {
if (width < height) {
width = height;
} else {
@ -142,7 +99,7 @@ class Rectangle_class extends Base_tools_class {
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
if (params.square == true) {
if (params.square == true || e.ctrlKey == true || e.metaKey) {
if (width < height) {
width = height;
} else {
@ -175,9 +132,21 @@ class Rectangle_class extends Base_tools_class {
);
}
demo(ctx, x, y, width, height) {
var coords = [
[0, 0],
[100, 0],
[100, 100],
[0, 100],
[0, 0],
];
this.draw_shape(ctx, x, y, width, height, coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
var stroke = params.border;
var rotateSupport = true;
var radius = params.radius;
if(radius == undefined)
@ -186,18 +155,22 @@ class Rectangle_class extends Base_tools_class {
ctx.save();
//set styles
ctx.fillStyle = layer.color;
ctx.strokeStyle = layer.color;
ctx.lineWidth = params.size;
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
if (rotateSupport == false) {
this.roundRect(ctx, layer.x, layer.y, layer.width, layer.height, radius, fill);
this.roundRect(ctx, layer.x, layer.y, layer.width, layer.height, radius, fill, stroke);
}
else {
//rotate
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.roundRect(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, radius, fill);
this.roundRect(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, radius, fill, stroke);
}
ctx.restore();
@ -214,7 +187,7 @@ class Rectangle_class extends Base_tools_class {
* @param {Number} radius
* @param {Boolean} fill
*/
roundRect(ctx, x, y, width, height, radius, fill) {
roundRect(ctx, x, y, width, height, radius, fill, stroke) {
x = parseInt(x);
y = parseInt(y);
width = parseInt(width);
@ -266,7 +239,7 @@ class Rectangle_class extends Base_tools_class {
if (fill) {
ctx.fill();
}
else {
if (stroke) {
ctx.stroke();
}
}

68
src/js/tools/shapes/right_triangle.js Normal file
View File

@ -0,0 +1,68 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Right_Triangle_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'right_triangle';
this.layer = {};
this.best_ratio = 1;
this.coords = [
[0, 0],
[100, 100],
[0, 100],
[0, 0],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Right_Triangle_class;

76
src/js/tools/shapes/romb.js Normal file
View File

@ -0,0 +1,76 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Romb_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'romb';
this.layer = {};
this.best_ratio = 0.8;
this.coords_demo = [
[50, 0],
[80, 50],
[50, 100],
[20, 50],
[50, 0],
];
this.coords = [
[50, 0],
[100, 50],
[50, 100],
[0, 50],
[50, 0],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords_demo);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Romb_class;

92
src/js/tools/shapes/star.js Normal file
View File

@ -0,0 +1,92 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Star_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'star';
this.layer = {};
this.best_ratio = 1;
this.coords = [];
}
load() {
this.default_events();
this.generate_coords();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
generate_coords() {
//settings
var spikes = 5;
var outerRadius = 53;
var innerRadius = 20;
var cx = 50;
var cy = 55;
var rot = Math.PI / 2 * 3;
var x = cx;
var y = cy;
var step = Math.PI / spikes;
this.coords = [];
this.coords.push([cx, cy - outerRadius]);
for (var i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
this.coords.push([x, y]);
rot += step;
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
this.coords.push([x, y]);
rot += step;
}
this.coords.push([cx, cy - outerRadius]);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Star_class;

92
src/js/tools/shapes/star24.js Normal file
View File

@ -0,0 +1,92 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Star24_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'star24';
this.layer = {};
this.best_ratio = 1;
this.coords = [];
}
load() {
this.default_events();
this.generate_coords();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
generate_coords() {
//settings
var spikes = 24;
var outerRadius = 50;
var innerRadius = 40;
var cx = 50;
var cy = 50;
var rot = Math.PI / 2 * 3;
var x = cx;
var y = cy;
var step = Math.PI / spikes;
this.coords = [];
this.coords.push([cx, cy - outerRadius]);
for (var i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
this.coords.push([x, y]);
rot += step;
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
this.coords.push([x, y]);
rot += step;
}
this.coords.push([cx, cy - outerRadius]);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Star24_class;

69
src/js/tools/shapes/trapezoid.js Normal file
View File

@ -0,0 +1,69 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Trapezoid_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'trapezoid';
this.layer = {};
this.best_ratio = 2;
this.coords = [
[20, 0],
[80, 0],
[100, 100],
[0, 100],
[20, 0],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Trapezoid_class;

68
src/js/tools/shapes/triangle.js Normal file
View File

@ -0,0 +1,68 @@
import app from './../../app.js';
import config from './../../config.js';
import Base_tools_class from './../../core/base-tools.js';
import Base_layers_class from './../../core/base-layers.js';
class Triangle_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.ctx = ctx;
this.name = 'triangle';
this.layer = {};
this.best_ratio = 2 / Math.sqrt(3);
this.coords = [
[50, 0],
[100, 100],
[0, 100],
[50, 0],
];
}
load() {
this.default_events();
}
mousedown(e) {
this.shape_mousedown(e);
}
mousemove(e) {
this.shape_mousemove(e);
}
mouseup(e) {
this.shape_mouseup(e);
}
demo(ctx, x, y, width, height) {
this.draw_shape(ctx, x, y, width, height, this.coords);
}
render(ctx, layer) {
var params = layer.params;
var fill = params.fill;
ctx.save();
//set styles
ctx.strokeStyle = 'transparent';
ctx.fillStyle = 'transparent';
if(params.border)
ctx.strokeStyle = params.border_color;
if(params.fill)
ctx.fillStyle = params.fill_color;
ctx.lineWidth = params.border_size;
//draw with rotation support
ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
ctx.rotate(layer.rotate * Math.PI / 180);
this.draw_shape(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, this.coords, false);
ctx.restore();
}
}
export default Triangle_class;

53
src/js/tools/sharpen.js
View File

@ -19,56 +19,19 @@ class Sharpen_class extends Base_tools_class {
this.started = false;
}
dragStart(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mousedown(event);
load() {
this.default_events();
}
dragMove(event) {
var _this = this;
if (config.TOOL.name != _this.name)
default_dragMove(event) {
if (config.TOOL.name != this.name)
return;
_this.mousemove(event);
this.mousemove(event);
//mouse cursor
var mouse = _this.get_mouse_info(event);
var params = _this.getParams();
_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
dragEnd(event) {
var _this = this;
if (config.TOOL.name != _this.name)
return;
_this.mouseup(event);
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (event) {
_this.dragStart(event);
});
document.addEventListener('mousemove', function (event) {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
_this.dragEnd(event);
});
// collect touch events
document.addEventListener('touchstart', function (event) {
_this.dragStart(event);
});
document.addEventListener('touchmove', function (event) {
_this.dragMove(event);
});
document.addEventListener('touchend', function (event) {
_this.dragEnd(event);
});
var mouse = this.get_mouse_info(event);
var params = this.getParams();
this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
}
mousedown(e) {