mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Made the color picker an IIFE
This commit is contained in:
unsettledgames
parent
07ed24cc6b
commit
71bfe543a5
@ -43,7 +43,7 @@ const Dialogue = (() => {
|
||||
|
||||
// If I'm opening the palette window, I initialize the colour picker
|
||||
if (dialogueName == 'palette-block' && Startup.documentCreated()) {
|
||||
cpInit();
|
||||
ColorPicker.init();
|
||||
pbInit();
|
||||
}
|
||||
|
||||
|
||||
1424
js/_colorPicker.js
1424
js/_colorPicker.js
File diff suppressed because it is too large
Load Diff
@ -1,34 +0,0 @@
|
||||
//draws a line between two points on canvas
|
||||
function line(x0,y0,x1,y1, brushSize) {
|
||||
var dx = Math.abs(x1-x0);
|
||||
var dy = Math.abs(y1-y0);
|
||||
var sx = (x0 < x1 ? 1 : -1);
|
||||
var sy = (y0 < y1 ? 1 : -1);
|
||||
var err = dx-dy;
|
||||
|
||||
while (true) {
|
||||
//set pixel
|
||||
// If the current tool is the brush
|
||||
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
|
||||
// I fill the rect
|
||||
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||
} else if (ToolManager.currentTool().name == 'eraser') {
|
||||
// In case I'm using the eraser I must clear the rect
|
||||
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||
}
|
||||
|
||||
//if we've reached the end goal, exit the loop
|
||||
if ((x0==x1) && (y0==y1)) break;
|
||||
var e2 = 2*err;
|
||||
|
||||
if (e2 >-dy) {
|
||||
err -=dy;
|
||||
x0+=sx;
|
||||
}
|
||||
|
||||
if (e2 < dx) {
|
||||
err +=dx;
|
||||
y0+=sy;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -84,10 +84,10 @@ function endEllipseDrawing(mouseEvent) {
|
||||
currentLayer.context.lineWidth = tool.ellipse.brushSize;
|
||||
|
||||
// Drawing the ellipse using 4 lines
|
||||
line(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
|
||||
line(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
|
||||
line(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
|
||||
line(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
|
||||
currentLayer.drawLine(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
|
||||
currentLayer.drawLine(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
|
||||
currentLayer.drawLine(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
|
||||
currentLayer.drawLine(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
|
||||
|
||||
// If I have to fill it, I do so
|
||||
if (ellipseDrawMode == 'fill') {
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
function closeCompatibilityWarning() {
|
||||
document.getElementById("compatibility-warning").style.visibility = "hidden";
|
||||
}
|
||||
|
||||
//check browser/version
|
||||
if (
|
||||
(bowser.firefox && bowser.version >= 28) ||
|
||||
(bowser.chrome && bowser.version >= 29) ||
|
||||
(!bowser.mobile && !bowser.tablet)
|
||||
)
|
||||
console.log("compatibility check passed");
|
||||
//show warning
|
||||
else document.getElementById("compatibility-warning").style.visibility = "visible";
|
||||
@ -278,4 +278,38 @@ class Layer {
|
||||
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
|
||||
previewWidth, previewHeight);
|
||||
}
|
||||
|
||||
drawLine(x0,y0,x1,y1, brushSize) {
|
||||
var dx = Math.abs(x1-x0);
|
||||
var dy = Math.abs(y1-y0);
|
||||
var sx = (x0 < x1 ? 1 : -1);
|
||||
var sy = (y0 < y1 ? 1 : -1);
|
||||
var err = dx-dy;
|
||||
|
||||
while (true) {
|
||||
//set pixel
|
||||
// If the current tool is the brush
|
||||
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
|
||||
// I fill the rect
|
||||
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||
} else if (ToolManager.currentTool().name == 'eraser') {
|
||||
// In case I'm using the eraser I must clear the rect
|
||||
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
|
||||
}
|
||||
|
||||
//if we've reached the end goal, exit the loop
|
||||
if ((x0==x1) && (y0==y1)) break;
|
||||
var e2 = 2*err;
|
||||
|
||||
if (e2 >-dy) {
|
||||
err -=dy;
|
||||
x0+=sx;
|
||||
}
|
||||
|
||||
if (e2 < dx) {
|
||||
err +=dx;
|
||||
y0+=sy;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,6 @@
|
||||
//=include History.js
|
||||
|
||||
//=include ColorModule.js
|
||||
//=include _drawLine.js
|
||||
|
||||
//=include Tool.js
|
||||
|
||||
@ -37,7 +36,6 @@
|
||||
//=include layers/PixelGrid.js
|
||||
|
||||
//=include Startup.js
|
||||
//=include _pixelGrid.js
|
||||
//=include EditorState.js
|
||||
//=include ToolManager.js
|
||||
|
||||
@ -46,7 +44,6 @@
|
||||
//=include data/palettes.js
|
||||
|
||||
/**functions**/
|
||||
//=include _checkerboard.js
|
||||
//=include _resizeCanvas.js
|
||||
//=include _resizeSprite.js
|
||||
//=include _colorPicker.js
|
||||
@ -124,4 +121,19 @@ window.onbeforeunload = function() {
|
||||
return 'You will lose your pixel if it\'s not saved!';
|
||||
|
||||
else return;
|
||||
};
|
||||
};
|
||||
|
||||
// Compatibility functions
|
||||
function closeCompatibilityWarning() {
|
||||
document.getElementById("compatibility-warning").style.visibility = "hidden";
|
||||
}
|
||||
|
||||
//check browser/version
|
||||
if (
|
||||
(bowser.firefox && bowser.version >= 28) ||
|
||||
(bowser.chrome && bowser.version >= 29) ||
|
||||
(!bowser.mobile && !bowser.tablet)
|
||||
)
|
||||
console.log("compatibility check passed");
|
||||
//show warning
|
||||
else document.getElementById("compatibility-warning").style.visibility = "visible";
|
||||
|
||||
@ -19,7 +19,7 @@ class BrushTool extends ResizableTool {
|
||||
return;
|
||||
//draw line to current pixel
|
||||
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
|
||||
line(Math.floor(this.prevMousePos[0]/zoom),
|
||||
currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom),
|
||||
Math.floor(this.prevMousePos[1]/zoom),
|
||||
Math.floor(this.currMousePos[0]/zoom),
|
||||
Math.floor(this.currMousePos[1]/zoom),
|
||||
|
||||
@ -19,7 +19,7 @@ class EraserTool extends ResizableTool {
|
||||
return;
|
||||
//draw line to current pixel
|
||||
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
|
||||
line(Math.floor(this.prevMousePos[0]/zoom),
|
||||
currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom),
|
||||
Math.floor(this.prevMousePos[1]/zoom),
|
||||
Math.floor(this.currMousePos[0]/zoom),
|
||||
Math.floor(this.currMousePos[1]/zoom),
|
||||
|
||||
@ -92,10 +92,10 @@ class RectangleTool extends ResizableTool {
|
||||
currentLayer.context.lineWidth = this.currSize;
|
||||
|
||||
// Drawing the rect using 4 lines
|
||||
line(startRectX, startRectY, endRectX, startRectY, this.currSize);
|
||||
line(endRectX, startRectY, endRectX, endRectY, this.currSize);
|
||||
line(endRectX, endRectY, startRectX, endRectY, this.currSize);
|
||||
line(startRectX, endRectY, startRectX, startRectY, this.currSize);
|
||||
currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
|
||||
currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
|
||||
currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
|
||||
currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
|
||||
|
||||
// If I have to fill it, I do so
|
||||
if (this.currFillMode == 'fill') {
|
||||
|
||||
@ -6,37 +6,37 @@
|
||||
|
||||
<div id = "colour-picker">
|
||||
<div id = "cp-modes">
|
||||
<button id="cp-rgb" class="cp-selected-mode" onclick="changePickerMode(this, 'rgb')">RGB</button>
|
||||
<button id="cp-hsv" onclick="changePickerMode(this, 'hsv')">HSV</button>
|
||||
<button id="cp-hsl" onclick="changePickerMode(this, 'hsl')">HSL</button>
|
||||
<button id="cp-rgb" class="cp-selected-mode">RGB</button>
|
||||
<button id="cp-hsv">HSV</button>
|
||||
<button id="cp-hsl">HSL</button>
|
||||
|
||||
<div id="cp-colour-preview" class="cp-colour-preview"></div>
|
||||
<input id="cp-hex" type="text" value="#123456" onchange="hexUpdated()"/>
|
||||
<input id="cp-hex" type="text" value="#123456"/>
|
||||
</div>
|
||||
|
||||
<div id = "sliders-container">
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "first-slider">R</label>
|
||||
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider" onmousemove="updateSliderValue(1)" onclick="updateSliderValue(1)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,1)"/>
|
||||
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider"/>
|
||||
<input type = "text" value = "128" id="cp-sliderText1"/>
|
||||
</div>
|
||||
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "second-slider">G</label>
|
||||
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider" onmousemove="updateSliderValue(2)" onclick="updateSliderValue(2)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,2)"/>
|
||||
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider"/>
|
||||
<input type = "text" value = "128" id="cp-sliderText2"/>
|
||||
</div>
|
||||
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "third-slider">B</label>
|
||||
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider" onmousemove="updateSliderValue(3)" onclick="updateSliderValue(3)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,3)"/>
|
||||
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider"/>
|
||||
<input type = "text" value = "128" id="cp-sliderText3"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-minipicker">
|
||||
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider" onmousemove="miniSliderInput(event)" onclick="miniSliderInput(event)"/>
|
||||
<div id="cp-canvas-container" onmousemove="movePickerIcon(event)">
|
||||
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider"/>
|
||||
<div id="cp-canvas-container">
|
||||
<canvas id = "cp-spectrum"></canvas>
|
||||
<div id="cp-active-icon" class="cp-picker-icon"></div>
|
||||
</div>
|
||||
@ -48,12 +48,12 @@
|
||||
</div>
|
||||
|
||||
<div id = "cp-colour-picking-modes">
|
||||
<button class="cp-selected-mode" onclick="changePickingMode(event,'mono')">Mono</button>
|
||||
<button onclick="changePickingMode(event,'analog')">Nlgs</button>
|
||||
<button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
|
||||
<button onclick="changePickingMode(event,'tri')">Tri</button>
|
||||
<button onclick="changePickingMode(event,'scmpt')">Scm</button>
|
||||
<button onclick="changePickingMode(event,'tetra')">Tetra</button>
|
||||
<button id="cp-mono" class="cp-selected-mode">Mono</button>
|
||||
<button id="cp-analog">Nlgs</button>
|
||||
<button id="cp-cmpt">Cmpt</button>
|
||||
<button id="cp-tri">Tri</button>
|
||||
<button id="cp-scmpt">Scm</button>
|
||||
<button id="cp-tetra">Tetra</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user