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

ruler

Browse Source
This commit is contained in:
viliusle 2021-01-31 18:50:34 +02:00
parent bee177d4aa
commit 6867e4edca
7 changed files with 236 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -39,16 +39,23 @@
</div>
<div class="sidebar_left" id="tools_container"></div>
<div class="main_wrapper" id="main_wrapper">
<div class="canvas_wrapper" id="canvas_wrapper">
<div id="mouse"></div>
<div class="transparent-grid" id="canvas_minipaint_background"></div>
<canvas id="canvas_minipaint">
<div class="trn error">
Your browser does not support canvas or JavaScript is not enabled.
</div>
</canvas>
<div class="middle_area" id="middle_area">
<canvas class="ruler_left" id="ruler_left"></canvas>
<canvas class="ruler_top" id="ruler_top"></canvas>
<div class="main_wrapper" id="main_wrapper">
<div class="canvas_wrapper" id="canvas_wrapper">
<div id="mouse"></div>
<div class="transparent-grid" id="canvas_minipaint_background"></div>
<canvas id="canvas_minipaint">
<div class="trn error">
Your browser does not support canvas or JavaScript is not enabled.
</div>
</canvas>
</div>
</div>
</div>

28
src/css/layout.css
View File

@ -527,15 +527,41 @@ body .sp-preview{
/* ========== content ======================================================= */
.main_wrapper{
.ruler_left{
display: none;
position: absolute;
left:0;
top: 20px;
background-color: #ccc;
}
.ruler_top{
display: none;
position: absolute;
left: 20px;
top:0;
background-color: #ccc;
}
.middle_area{
position: relative;
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: main;
}
.main_wrapper{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.middle_area.has-ruler .main_wrapper{
top: 20px;
left: 20px;
}
.canvas_wrapper{
position:relative;
}

4
src/js/config-menu.js
View File

@ -183,6 +183,10 @@ const menuDefinition = [
}
]
},
{
name: 'Ruler',
target: 'view/ruler.ruler'
},
{
divider: true
},

1
src/js/config.js
View File

@ -24,6 +24,7 @@ config.swatches = {
};
config.guides_enabled = true;
config.guides = [];
config.ruler_active = false;
//requires styles in reset.css
config.themes = [

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

@ -8,6 +8,7 @@ import config from './../config.js';
import Base_gui_class from './base-gui.js';
import Base_selection_class from './base-selection.js';
import Image_trim_class from './../modules/image/trim.js';
import View_ruler_class from './../modules/view/ruler.js';
import zoomView from './../libs/zoomView.js';
import Helper_class from './../libs/helpers.js';
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
@ -53,6 +54,7 @@ class Base_layers_class {
this.Base_gui = new Base_gui_class();
this.Helper = new Helper_class();
this.Image_trim = new Image_trim_class();
this.View_ruler = new View_ruler_class();
this.canvas = document.getElementById('canvas_minipaint');
this.ctx = document.getElementById('canvas_minipaint').getContext("2d");
@ -185,6 +187,7 @@ class Base_layers_class {
this.last_zoom = config.ZOOM;
this.Base_gui.GUI_details.render_details();
this.View_ruler.render_ruler();
if(this.render_success === false){
alertify.error('Rendered with errors.');

1
src/js/modules/help/shortcuts.js
View File

@ -22,6 +22,7 @@ class Help_shortcuts_class {
{title: "N", value: 'New layer'},
{title: "R", value: 'Resize'},
{title: "I", value: 'Information'},
{title: "U", value: 'Ruler'},
{title: "Scroll up", value: 'Zoom in'},
{title: "Scroll down", value: 'Zoom out'},
{title: "CTRL + Z", value: 'Undo'},

183
src/js/modules/view/ruler.js Normal file
View File

@ -0,0 +1,183 @@
import config from './../../config.js';
import Helper_class from './../../libs/helpers.js';
import Base_gui_class from './../../core/base-gui.js';
import Base_layers_class from './../../core/base-layers.js';
var instance = null;
class View_ruler_class {
constructor() {
//singleton
if (instance) {
return instance;
}
instance = this;
this.GUI = new Base_gui_class();
this.Base_layers = new Base_layers_class();
this.Helper = new Helper_class();
this.set_events();
}
set_events() {
var _this = this;
window.addEventListener('resize', function (event) {
//resize
_this.prepare_ruler();
_this.render_ruler();
}, false);
document.addEventListener('keydown', (event) => {
var code = event.code;
if (this.Helper.is_input(event.target))
return;
if (event.code == "KeyU" && event.ctrlKey != true && event.metaKey != true) {
//G - grid
_this.ruler();
event.preventDefault();
}
}, false);
}
ruler() {
var ruler_left = document.getElementById('ruler_left');
var ruler_top = document.getElementById('ruler_top');
var middle_area = document.getElementById('middle_area');
if(config.ruler_active == false){
//activate
config.ruler_active = true;
document.getElementById('middle_area').classList.add('has-ruler');
ruler_left.style.display = 'block';
ruler_top.style.display = 'block';
this.prepare_ruler();
this.render_ruler();
}
else{
//deactivate
config.ruler_active = false;
document.getElementById('middle_area').classList.remove('has-ruler');
ruler_left.style.display = 'none';
ruler_top.style.display = 'none';
}
this.GUI.prepare_canvas();
config.need_render = true;
}
prepare_ruler(){
if(config.ruler_active == false)
return;
var ruler_left = document.getElementById('ruler_left');
var ruler_top = document.getElementById('ruler_top');
var middle_area = document.getElementById('middle_area');
var middle_area_width = middle_area.clientWidth;
var middle_area_height = middle_area.clientHeight;
ruler_left.width = 15;
ruler_left.height = middle_area_height - 20;
ruler_top.width = middle_area_width - 20;
ruler_top.height = 15;
}
render_ruler(){
if(config.ruler_active == false)
return;
var ruler_left = document.getElementById('ruler_left');
var ruler_top = document.getElementById('ruler_top');
var ctx_left = ruler_left.getContext("2d");
var ctx_top = ruler_top.getContext("2d");
var color = '#111';
var size = 15;
//calc step
var step = Math.ceil(10 * config.ZOOM);
while (step < 5) {
step = step * 2;
}
while (step > 10) {
step = Math.ceil(step / 2);
}
var step_big = step * 10;
//calc begin/end point
var begin_x = Math.max(0, ruler_top.width / 2 - config.WIDTH * config.ZOOM / 2);
var begin_y = Math.max(0, ruler_left.height / 2 - config.HEIGHT * config.ZOOM / 2);
var end_x = Math.min(ruler_top.width, ruler_top.width / 2 + config.WIDTH * config.ZOOM / 2);
var end_y = Math.min(ruler_left.height, ruler_left.height / 2 + config.HEIGHT * config.ZOOM / 2);
//left
ctx_left.strokeStyle = color;
ctx_left.lineWidth = 1;
ctx_left.font = "11px Arial";
ctx_left.clearRect(0, 0, ruler_left.width, ruler_left.height);
ctx_left.beginPath();
for (var i = begin_y; i < end_y; i += step) {
ctx_left.moveTo(10, i + 0.5);
ctx_left.lineTo(size, i + 0.5);
}
ctx_left.stroke();
ctx_left.beginPath();
for (var i = begin_y; i <= end_y; i += step_big) {
ctx_left.moveTo(0, i + 0.5);
ctx_left.lineTo(size, i + 0.5);
var global_pos = this.Base_layers.get_world_coords(0, i - begin_y);
var text = Math.ceil(global_pos.y).toString();
//text
for (var j = 0; j < text.length; j++) {
var letter = text.charAt(j);
var line_height = 10;
ctx_left.fillText(letter, 1, i + 11 + j * line_height);
}
}
ctx_left.stroke();
//top
ctx_top.strokeStyle = color;
ctx_top.lineWidth = 1;
ctx_top.font = "11px Arial";
ctx_top.clearRect(0, 0, ruler_top.width, ruler_top.height);
ctx_top.beginPath();
for (var i = begin_x; i < end_x; i += step) {
var y = (i / step_big == parseInt(i / step_big)) ? 0 : step;
ctx_top.moveTo(i + 0.5, 10);
ctx_top.lineTo(i + 0.5, size);
}
ctx_top.stroke();
ctx_top.beginPath();
for (var i = begin_x; i <= end_x; i += step_big) {
ctx_top.moveTo(i + 0.5, 0);
ctx_top.lineTo(i + 0.5, size);
var global_pos = this.Base_layers.get_world_coords(i - begin_x, 0);
var text = Math.ceil(global_pos.x).toString();
//text
ctx_top.fillText(text, i + 3, 9);
}
ctx_top.stroke();
}
}
export default View_ruler_class;