mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Started tool tutorials
This commit is contained in:
Nicola
parent
33f362ef09
commit
2e360dcf51
6
build.js
6
build.js
@ -21,10 +21,12 @@ function copy_images(){
|
||||
gulp.src('./images/*.ico').pipe(gulp.dest(BUILDDIR));
|
||||
// Splash images
|
||||
gulp.src('./images/Splash images/*.png').pipe(gulp.dest(BUILDDIR));
|
||||
// Logs images
|
||||
// Logs gifs
|
||||
gulp.src('./images/Logs/*.gif').pipe(gulp.dest(BUILDDIR));
|
||||
// Logs images
|
||||
// Logs pngs
|
||||
gulp.src('./images/Logs/*.png').pipe(gulp.dest(BUILDDIR));
|
||||
// Tool tutorials
|
||||
gulp.src('./images/ToolTutorials/*.gif').pipe(gulp.dest(BUILDDIR));
|
||||
}
|
||||
|
||||
function copy_logs() {
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
|
||||
|
||||
/*app title*/
|
||||
/* app title */
|
||||
|
||||
.logo {
|
||||
color: lighten($basecolor, 20%);
|
||||
@ -83,3 +83,46 @@
|
||||
#main-menu li.open, #main-menu li button:hover {
|
||||
background: $basehover;
|
||||
}
|
||||
|
||||
/* Editor info */
|
||||
li#editor-info {
|
||||
float:right;
|
||||
height:100%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
background-color: $basecolor;
|
||||
color:$basetext;
|
||||
|
||||
ul {
|
||||
background-color: $basecolor;
|
||||
display:block;
|
||||
position:relative;
|
||||
top:0px;
|
||||
padding-top:0px;
|
||||
box-shadow: none;
|
||||
padding-bottom: 0px;
|
||||
|
||||
li {
|
||||
top:0px;
|
||||
padding-top:0px;
|
||||
display:inline;
|
||||
padding-right:20px;
|
||||
}
|
||||
input {
|
||||
margin-left:10px;
|
||||
background-color:$basehovertext;
|
||||
box-shadow:none;
|
||||
border:none;
|
||||
vertical-align: middle;
|
||||
border-radius:5px;
|
||||
}
|
||||
input[type=text] {
|
||||
width:20px;
|
||||
height:15px;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
width:15px;
|
||||
height:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
#splash {
|
||||
width:100% !important;
|
||||
height:100%!important;
|
||||
position:absolute;
|
||||
|
||||
background-color: #232125 !important;
|
||||
opacity: 1 !important;
|
||||
|
||||
@ -109,3 +109,28 @@
|
||||
#tools-menu li:hover {
|
||||
background: $basehover;
|
||||
}
|
||||
|
||||
/* Tool tutorial */
|
||||
#tool-tutorial {
|
||||
display:inline-block;
|
||||
position:absolute;
|
||||
z-index:4000;
|
||||
margin-left:48px;
|
||||
margin-top:48px;
|
||||
background-color: $basehover;
|
||||
color:$basetext;
|
||||
font-size:14px;
|
||||
width:20%;
|
||||
border-radius:0 5px 5px 5px;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
#tool-tutorial:after {
|
||||
border-left: 11px solid #222;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
BIN
images/ToolTutorials/brush-tutorial.gif
Normal file
BIN
images/ToolTutorials/brush-tutorial.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
17
js/Tool.js
17
js/Tool.js
@ -24,6 +24,7 @@ class Tool {
|
||||
biggerButton = undefined;
|
||||
smallerButton = undefined;
|
||||
brushPreview = document.getElementById("brush-preview");
|
||||
toolTutorial = document.getElementById("tool-tutorial");
|
||||
|
||||
constructor (name, options) {
|
||||
this.name = name;
|
||||
@ -34,6 +35,22 @@ class Tool {
|
||||
this.smallerButton = document.getElementById(name + "-smaller-button");
|
||||
}
|
||||
|
||||
resetTutorial() {
|
||||
this.toolTutorial.innerHTML = "<ul></ul>";
|
||||
}
|
||||
addTutorialKey(key, text) {
|
||||
this.toolTutorial.children[0].append(
|
||||
'<li><span class="keyboard-key">' + key + '</span> ' + text + '</li>');
|
||||
}
|
||||
addTutorialText(key, text) {
|
||||
this.toolTutorial.children[0].append(
|
||||
'<li>' + key + ': ' + text + '</li>');
|
||||
}
|
||||
addTutorialImg(imgPath) {
|
||||
this.toolTutorial.children[0].append(
|
||||
'<img src="' + imgPath + '"/>');
|
||||
}
|
||||
|
||||
onSelect() {
|
||||
if (this.mainButton != undefined)
|
||||
this.mainButton.parentElement.classList.add("selected");
|
||||
|
||||
@ -5,8 +5,9 @@ const TopMenuModule = (() => {
|
||||
initMenu();
|
||||
|
||||
function initMenu() {
|
||||
//for each button in main menu (starting at 1 to avoid logo)
|
||||
for (let i = 1; i < mainMenuItems.length; i++) {
|
||||
// for each button in main menu (starting at 1 to avoid logo), ending at length-1 to avoid
|
||||
// editor info
|
||||
for (let i = 1; i < mainMenuItems.length-1; i++) {
|
||||
|
||||
//get the button that's in the list item
|
||||
const menuItem = mainMenuItems[i];
|
||||
|
||||
@ -19,7 +19,7 @@ class MagicWandTool extends SelectionTool {
|
||||
getSelection() {
|
||||
let coords = [Math.floor(this.endMousePos[0]), Math.floor(this.endMousePos[1])];
|
||||
let data = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
|
||||
let index = (coords[1] * currFile.canvasSize[1] + coords[0]) * 4;
|
||||
let index = (coords[1] * currFile.canvasSize[0] + coords[0]) * 4;
|
||||
let color = [data[index], data[index+1], data[index+2], data[index+3]];
|
||||
let selectedData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
|
||||
|
||||
@ -28,7 +28,7 @@ class MagicWandTool extends SelectionTool {
|
||||
|
||||
for (const pixel in this.currSelection) {
|
||||
let coords = [parseInt(pixel.split(",")[0]), parseInt(pixel.split(",")[1])];
|
||||
let index = (currFile.canvasSize[1] * coords[1] + coords[0]) * 4;
|
||||
let index = (currFile.canvasSize[0] * coords[1] + coords[0]) * 4;
|
||||
|
||||
selectedData[index] = color[0];
|
||||
selectedData[index+1] = color[1];
|
||||
|
||||
@ -94,7 +94,7 @@ class SelectionTool extends Tool {
|
||||
for (const key in this.currSelection) {
|
||||
let x = parseInt(key.split(",")[0]);
|
||||
let y = parseInt(key.split(",")[1]);
|
||||
let index = (y * currFile.canvasSize[1] + x) * 4;
|
||||
let index = (y * currFile.canvasSize[0] + x) * 4;
|
||||
|
||||
for (let i=0; i<4; i++) {
|
||||
// Save the pixel
|
||||
|
||||
@ -65,4 +65,11 @@
|
||||
<li><button>Changelog</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li id="editor-info">
|
||||
<ul>
|
||||
<li><label><span>Tool size: </span><input type="text" width="10px"/></label></li>
|
||||
<li><label><span>Continuous: </span><input type="checkbox"/></label></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1,6 +1,6 @@
|
||||
<ul id="tools-menu">
|
||||
<li class="selected expanded">
|
||||
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
|
||||
<button id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
@ -8,7 +8,7 @@
|
||||
</li>
|
||||
|
||||
<li class = "expanded">
|
||||
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
|
||||
<button id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
@ -16,7 +16,7 @@
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
|
||||
<button id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
@ -25,7 +25,7 @@
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Ellipse Tool (S)" id="ellipse-button">
|
||||
<button id="ellipse-button">
|
||||
{{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
|
||||
</button>
|
||||
@ -36,23 +36,32 @@
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
|
||||
<button id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
|
||||
<li><button id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
|
||||
|
||||
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
|
||||
<li><button id = "rectselect-button">{{svg "rectselect.svg" width = "24" height = "24"}}</button><li>
|
||||
|
||||
<li><button title = "Lasso Selection Tool (Q)" id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
|
||||
<li><button id = "lassoselect-button">{{svg "lasso.svg" width = "26" height = "26"}}</button></li>
|
||||
|
||||
<li><button title = "Magic Wand Tool (W)" id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
|
||||
<li><button id = "magicwand-button">{{svg "magicwand.svg" width = "26" height = "26"}}</button></li>
|
||||
|
||||
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
|
||||
|
||||
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
|
||||
<li><button id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
|
||||
|
||||
<li><button id="pan-button">{{svg "pan.svg" width="24" height="24"}}</button></li>
|
||||
</ul>
|
||||
|
||||
<div id="tool-tutorial">
|
||||
<ul>
|
||||
<li><span class="keyboard-key">B</span> to select the tool</li>
|
||||
<li><span class="keyboard-key">Left drag</span> to use the tool</li>
|
||||
<li><span class="keyboard-key">Right drag</span> to change tool size</li>
|
||||
<li><span class="keyboard-key">+</span> or <span class="keyboard-key">-</span> to change tool size</li>
|
||||
</ul>
|
||||
<img src="brush-tutorial.gif"/>
|
||||
</div>"
|
||||
Loading…
Reference in New Issue
Block a user