mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge branch 'master' into gh-pages
This commit is contained in:
juliandescottes
commit
7f90caf1fc
20
css/reset.css
Normal file
20
css/reset.css
Normal file
@ -0,0 +1,20 @@
|
||||
html, body {
|
||||
height : 100%; width: 100%;
|
||||
margin : 0;
|
||||
overflow: hidden;
|
||||
cursor : default;
|
||||
font-family: arial;
|
||||
font-size: 11px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
176
css/style.css
176
css/style.css
@ -1,28 +1,12 @@
|
||||
html, body {
|
||||
height : 100%;
|
||||
margin : 0;
|
||||
cursor : default;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
.debug {
|
||||
border : 1px Solid black;
|
||||
.tools-container {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 30px;
|
||||
}
|
||||
|
||||
.left-nav {
|
||||
position:absolute;
|
||||
top : 0;
|
||||
bottom : 0;
|
||||
top : 30px; bottom : 0;
|
||||
width : 200px;
|
||||
overflow-y: scroll;
|
||||
background : #000;
|
||||
@ -31,17 +15,13 @@ ul, li {
|
||||
|
||||
.main-panel {
|
||||
position:absolute;
|
||||
top : 0;
|
||||
bottom : 0;
|
||||
left : 220px;
|
||||
right : 0;
|
||||
top : 30px; bottom : 0; left : 220px; right : 0;
|
||||
background : #ccc;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
position : absolute;
|
||||
top : 30px;
|
||||
right : 0;
|
||||
bottom : 0; right : 0;
|
||||
height : 256px;
|
||||
width : 256px;
|
||||
background : white;
|
||||
@ -127,6 +107,13 @@ ul, li {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.drawing-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.canvas-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -138,120 +125,6 @@ ul, li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tool-paint-bucket .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
|
||||
}
|
||||
|
||||
.tool-pen .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
|
||||
}
|
||||
|
||||
.tool-eraser .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
|
||||
}
|
||||
|
||||
.tool-stroke .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
|
||||
}
|
||||
|
||||
.tool-rectangle .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tool section:
|
||||
*/
|
||||
|
||||
.color-tool {
|
||||
|
||||
}
|
||||
|
||||
.palette .palette-color {
|
||||
cursor: pointer;
|
||||
display : inline-block;
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.palette .palette-color.transparent-color {
|
||||
background-color: white;
|
||||
height : 16px;
|
||||
width : 16px;
|
||||
border: 2px solid #000;
|
||||
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right bottom,
|
||||
color-stop(0, #fff),
|
||||
color-stop(0.45, #fff),
|
||||
color-stop(0.5, #ff0000),
|
||||
color-stop(0.55, #fff),
|
||||
color-stop(1, #fff)
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
left top,
|
||||
#fff 0%,
|
||||
#fff 45%,
|
||||
#f00 50%,
|
||||
#fff 55%,
|
||||
#fff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.tools-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tools-container .tool-icon {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 5px solid #fff;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.tool-icon:hover {
|
||||
border-color: #;
|
||||
}
|
||||
|
||||
.tool-icon:hover {
|
||||
cursor: pointer;
|
||||
border: 5px solid #eee;
|
||||
}
|
||||
|
||||
.tool-icon.selected {
|
||||
cursor: auto;
|
||||
border: 5px solid #ddd;
|
||||
}
|
||||
|
||||
.tool-icon.tool-pen {
|
||||
background: #fff url(../img/tools/icons/pen.png) 3px 3px no-repeat;
|
||||
}
|
||||
|
||||
.tool-icon.tool-paint-bucket {
|
||||
background: #fff url(../img/tools/icons/paint-bucket.png) 3px 3px no-repeat;
|
||||
}
|
||||
|
||||
.tool-icon.tool-eraser {
|
||||
background: #fff url(../img/tools/icons/eraser.png) 3px 3px no-repeat;
|
||||
}
|
||||
|
||||
.tool-icon.tool-stroke {
|
||||
background: #fff url(../img/tools/icons/stroke.png) 3px 3px no-repeat;
|
||||
}
|
||||
|
||||
.tool-icon.tool-rectangle {
|
||||
background: #fff url(../img/tools/icons/rectangle.png) 3px 3px no-repeat;
|
||||
}
|
||||
|
||||
#preview-fps {
|
||||
width : 200px;
|
||||
}
|
||||
@ -260,27 +133,26 @@ ul, li {
|
||||
* User messages
|
||||
*/
|
||||
.user-message {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 40%;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
background-color: #F9EDBE;
|
||||
padding: 7px 22px;
|
||||
padding-right: 42px;
|
||||
padding: 4px 12px;
|
||||
padding-right: 20px;
|
||||
border-top-left-radius: 7px;
|
||||
border-top-right-radius: 7px;
|
||||
font-family: ‘Arial Black’, Gadget, sans-serif;
|
||||
border-bottom-left-radius: 7px;
|
||||
border-right: 0;
|
||||
color: #222;
|
||||
border: #F0C36D 1px solid;
|
||||
border-bottom: 0;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.user-message .close {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 6px;
|
||||
top: 0px;
|
||||
right: 5px;
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
129
css/tools.css
Normal file
129
css/tools.css
Normal file
@ -0,0 +1,129 @@
|
||||
.tools-container {}
|
||||
|
||||
.tools-group {
|
||||
float: left;
|
||||
height: 30px;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 7px 7px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-save {
|
||||
background-image: url(../img/tools/icons/save.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-add-frame {
|
||||
background-image: url(../img/tools/icons/add-frame.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-pen {
|
||||
background-image: url(../img/tools/icons/pen.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-paint-bucket {
|
||||
background-image: url(../img/tools/icons/paint-bucket.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-eraser {
|
||||
background-image: url(../img/tools/icons/eraser.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-stroke {
|
||||
background-image: url(../img/tools/icons/stroke.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-rectangle {
|
||||
background-image: url(../img/tools/icons/rectangle.png);
|
||||
}
|
||||
|
||||
/*.tool-icon.tool-palette {
|
||||
background-image: url(../img/tools/icons/color-palette.png);
|
||||
}*/
|
||||
|
||||
.tool-paint-bucket .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
|
||||
}
|
||||
|
||||
.tool-pen .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
|
||||
}
|
||||
|
||||
.tool-eraser .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
|
||||
}
|
||||
|
||||
.tool-stroke .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
|
||||
}
|
||||
|
||||
.tool-rectangle .drawing-canvas-container:hover {
|
||||
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
|
||||
}
|
||||
|
||||
.tool-icon.selected {
|
||||
cursor: auto;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tool-icon:hover {
|
||||
cursor: pointer;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tool-color-picker input {
|
||||
width: 12px; height: 12px;
|
||||
border: 1px solid black;
|
||||
padding: 1px;
|
||||
background: white;
|
||||
margin: 7px 0 0 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tool-palette {
|
||||
width: auto;
|
||||
}
|
||||
.tool-palette .palette li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.palette .palette-color {
|
||||
cursor: pointer;
|
||||
display : inline-block;
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.palette .palette-color.transparent-color {
|
||||
background-color: white;
|
||||
height : 16px;
|
||||
width : 16px;
|
||||
border: 2px solid #000;
|
||||
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right bottom,
|
||||
color-stop(0, #fff),
|
||||
color-stop(0.45, #fff),
|
||||
color-stop(0.5, #ff0000),
|
||||
color-stop(0.55, #fff),
|
||||
color-stop(1, #fff)
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
left top,
|
||||
#fff 0%,
|
||||
#fff 45%,
|
||||
#f00 50%,
|
||||
#fff 55%,
|
||||
#fff 100%
|
||||
);
|
||||
}
|
||||
BIN
img/tools/cursors/eraser.png
Normal file → Executable file
BIN
img/tools/cursors/eraser.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 774 B After Width: | Height: | Size: 603 B |
BIN
img/tools/cursors/paint-bucket.png
Normal file → Executable file
BIN
img/tools/cursors/paint-bucket.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 707 B |
BIN
img/tools/cursors/pen.png
Normal file → Executable file
BIN
img/tools/cursors/pen.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 450 B |
BIN
img/tools/cursors/rectangle.png
Normal file → Executable file
BIN
img/tools/cursors/rectangle.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 532 B After Width: | Height: | Size: 660 B |
BIN
img/tools/icons/add-frame.png
Executable file
BIN
img/tools/icons/add-frame.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
img/tools/icons/color-palette.png
Executable file
BIN
img/tools/icons/color-palette.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 209 B |
BIN
img/tools/icons/eraser.png
Normal file → Executable file
BIN
img/tools/icons/eraser.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 774 B After Width: | Height: | Size: 603 B |
BIN
img/tools/icons/paint-bucket.png
Normal file → Executable file
BIN
img/tools/icons/paint-bucket.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 707 B |
BIN
img/tools/icons/pen.png
Normal file → Executable file
BIN
img/tools/icons/pen.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 450 B |
BIN
img/tools/icons/rectangle.png
Normal file → Executable file
BIN
img/tools/icons/rectangle.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 660 B |
BIN
img/tools/icons/save.png
Executable file
BIN
img/tools/icons/save.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 620 B |
BIN
img/tools/icons/stroke.png
Normal file → Executable file
BIN
img/tools/icons/stroke.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 450 B |
82
index.html
82
index.html
@ -9,44 +9,58 @@
|
||||
<meta name="author" content="Julian Descottes">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/tools.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class='debug left-nav'>
|
||||
|
||||
<!-- Frame actions: -->
|
||||
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
|
||||
<button id='add-frame-button' class="action-button">
|
||||
Add a Frame
|
||||
</button>
|
||||
<!-- Tool section: -->
|
||||
<div id="tools-container" class="tools-container">
|
||||
<ul class="tools-group">
|
||||
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
|
||||
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
|
||||
</ul>
|
||||
|
||||
<!-- List of frames: -->
|
||||
<ul id="preview-list"></ul>
|
||||
</div>
|
||||
<div class='main-panel'>
|
||||
|
||||
<!-- Drawing area: -->
|
||||
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
||||
<div class="canvas-background"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tool section: -->
|
||||
<div id="tools-container" class="tools-container">
|
||||
<div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
|
||||
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
|
||||
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
|
||||
<div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
|
||||
<div class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></div>
|
||||
|
||||
<div class="color-tool">
|
||||
<input id="color-picker" class="color {hash:true}" type="text" value=""/>
|
||||
|
||||
<ul class="tools-group">
|
||||
<li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
|
||||
<li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
|
||||
<li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
|
||||
<li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
|
||||
<li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
|
||||
</ul>
|
||||
|
||||
<ul class="tools-group">
|
||||
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">
|
||||
<ul id="palette" class="palette">
|
||||
<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tool-icon tool-color-picker">
|
||||
<input id="color-picker" class="color {hash:true}" type="text" value="" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tools-group">
|
||||
<li class="tool-preview-fps">
|
||||
<input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
|
||||
<span id="display-fps">12 fps</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='left-nav'>
|
||||
<!-- List of frames: -->
|
||||
<ul id="preview-list"></ul>
|
||||
</div>
|
||||
|
||||
<div class='main-panel'>
|
||||
<!-- Drawing area: -->
|
||||
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
||||
<div class="canvas-background"></div>
|
||||
</div>
|
||||
|
||||
<!-- Animation preview: -->
|
||||
@ -54,10 +68,6 @@
|
||||
<div id='preview-canvas-container' class="canvas-container">
|
||||
<div class="canvas-background"></div>
|
||||
</div>
|
||||
<div>
|
||||
<input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
|
||||
<span id="display-fps">12 fps</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cursorInfo"></div>
|
||||
@ -75,7 +85,12 @@
|
||||
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
|
||||
|
||||
<!-- Application libraries-->
|
||||
<script src="js/FrameSheetModel.js"></script>
|
||||
<script src="js/model/Frame.js"></script>
|
||||
<script src="js/model/FrameSheet.js"></script>
|
||||
<script src="js/controller/DrawingController.js"></script>
|
||||
<script src="js/controller/PreviewFilmController.js"></script>
|
||||
<script src="js/controller/AnimatedPreviewController.js"></script>
|
||||
<script src="js/rendering/FrameRenderer.js"></script>
|
||||
<script src="js/LocalStorageService.js"></script>
|
||||
<script src="js/Palette.js"></script>
|
||||
<script src="js/Notification.js"></script>
|
||||
@ -91,3 +106,4 @@
|
||||
<script src="js/piskel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,142 +0,0 @@
|
||||
|
||||
$.namespace("pskl");
|
||||
|
||||
pskl.FrameSheetModel = (function() {
|
||||
|
||||
var inst;
|
||||
var frames = [];
|
||||
var width;
|
||||
var height;
|
||||
|
||||
/**
|
||||
* Create empty frame of dimension [width * height] with Constants.TRANSPARENT_COLOR
|
||||
* as a default value.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
var createEmptyFrame_ = function() {
|
||||
var emptyFrame = []; //new Array(width);
|
||||
for (var columnIndex=0; columnIndex < width; columnIndex++) {
|
||||
var columnArray = [];
|
||||
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
|
||||
columnArray.push(Constants.TRANSPARENT_COLOR);
|
||||
}
|
||||
emptyFrame[columnIndex] = columnArray;
|
||||
}
|
||||
return emptyFrame;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
var requestLocalStorageSave_ = function() {
|
||||
|
||||
};
|
||||
|
||||
return {
|
||||
validate: function() {
|
||||
return true; // I'm always right dude
|
||||
},
|
||||
|
||||
getAllPixels : function () {
|
||||
var pixels = [];
|
||||
for (var i = 0 ; i < frames.length ; i++) {
|
||||
pixels = pixels.concat(this._getFramePixels(frames[i]));
|
||||
}
|
||||
return pixels;
|
||||
},
|
||||
|
||||
_getFramePixels : function (frame) {
|
||||
var pixels = [];
|
||||
for (var i = 0 ; i < frame.length ; i++) {
|
||||
var line = frame[i];
|
||||
for (var j = 0 ; j < line.length ; j++) {
|
||||
pixels.push(line[j]);
|
||||
}
|
||||
}
|
||||
return pixels;
|
||||
},
|
||||
|
||||
getUsedColors: function() {
|
||||
var colors = {};
|
||||
for (var frameIndex=0; frameIndex < frames.length; frameIndex++) {
|
||||
var currentFrame = frames[frameIndex];
|
||||
for (var i = 0 ; i < currentFrame.length ; i++) {
|
||||
var line = currentFrame[i];
|
||||
for (var j = 0 ; j < line.length ; j++) {
|
||||
colors[line[j]] = line[j];
|
||||
}
|
||||
}
|
||||
}
|
||||
return colors;
|
||||
},
|
||||
|
||||
// Could be used to pass around model using long GET param (good enough for simple models) and
|
||||
// do some temporary locastorage
|
||||
serialize: function() {
|
||||
return JSON.stringify(frames);
|
||||
},
|
||||
|
||||
/**
|
||||
* Load a framesheet from a string that might have been persisted in db / localstorage
|
||||
* Overrides existing frames.
|
||||
* @param {String} serialized
|
||||
*/
|
||||
deserialize : function (serialized) {
|
||||
try {
|
||||
frames = JSON.parse(serialized);
|
||||
$.publish(Events.FRAMESHEET_RESET);
|
||||
} catch (e) {
|
||||
throw "Could not load serialized framesheet." + e.message
|
||||
}
|
||||
},
|
||||
|
||||
addEmptyFrame: function() {
|
||||
frames.push(createEmptyFrame_());
|
||||
},
|
||||
|
||||
getFrameCount: function() {
|
||||
return frames.length;
|
||||
},
|
||||
|
||||
getFrameByIndex: function(index) {
|
||||
if (isNaN(index)) {
|
||||
throw "Bad argument value for getFrameByIndex method: <" + index + ">"
|
||||
} else if (index < 0 || index > frames.length) {
|
||||
throw "Out of bound index for frameSheet object."
|
||||
}
|
||||
|
||||
return frames[index];
|
||||
},
|
||||
|
||||
removeFrameByIndex: function(index) {
|
||||
if(index < 0 || index > inst.getFrameCount()) {
|
||||
throw "Bad index value for removeFrameByIndex.";
|
||||
}
|
||||
frames.splice(index, 1);
|
||||
},
|
||||
|
||||
duplicateFrameByIndex: function(frameToDuplicateIndex) {
|
||||
var frame = inst.getFrameByIndex(frameToDuplicateIndex);
|
||||
var clonedFrame = [];
|
||||
for(var i=0, l=frame.length; i<l; i++) {
|
||||
clonedFrame.push(frame[i].slice(0));
|
||||
}
|
||||
frames.splice(frameToDuplicateIndex + 1, 0, clonedFrame);
|
||||
},
|
||||
|
||||
getInstance: function(width_, height_) {
|
||||
|
||||
if (isNaN(width_) || isNaN(height_)) {
|
||||
throw "Bad FrameSheetModel initialization in getInstance method.";
|
||||
}
|
||||
|
||||
inst = this;
|
||||
|
||||
width = width_;
|
||||
height = height_;
|
||||
|
||||
return inst;
|
||||
}
|
||||
}
|
||||
})();
|
||||
63
js/controller/AnimatedPreviewController.js
Normal file
63
js/controller/AnimatedPreviewController.js
Normal file
@ -0,0 +1,63 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.AnimatedPreviewController = function (framesheet, container, dpi) {
|
||||
this.dpi = dpi;
|
||||
this.framesheet = framesheet;
|
||||
this.container = container;
|
||||
this.animIndex = 0;
|
||||
|
||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
||||
|
||||
this.renderer = new pskl.rendering.FrameRenderer();
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.init = function () {
|
||||
this.initDom();
|
||||
this.startAnimationTimer();
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.initDom = function () {
|
||||
var frame = this.framesheet.getFrameByIndex(0);
|
||||
var height = frame.getHeight() * this.dpi,
|
||||
width = frame.getWidth() * this.dpi;
|
||||
|
||||
previewCanvas = document.createElement('canvas');
|
||||
previewCanvas.className = 'canvas';
|
||||
|
||||
this.container.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
|
||||
previewCanvas.setAttribute('width', width);
|
||||
previewCanvas.setAttribute('height', height);
|
||||
|
||||
this.container.appendChild(previewCanvas);
|
||||
this.previewCanvas = previewCanvas;
|
||||
|
||||
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.startAnimationTimer = function () {
|
||||
this.stopAnimationTimer();
|
||||
this.animationTimer = window.setTimeout(this.refreshAnimatedPreview.bind(this), 1000/this.fps);
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.stopAnimationTimer = function () {
|
||||
if (this.animationTimer) {
|
||||
window.clearInterval(this.animationTimer);
|
||||
this.animationTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
|
||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.refreshAnimatedPreview = function () {
|
||||
if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
|
||||
this.animIndex = 0;
|
||||
}
|
||||
|
||||
this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex), this.previewCanvas, this.dpi);
|
||||
this.animIndex++;
|
||||
this.startAnimationTimer();
|
||||
};
|
||||
|
||||
})();
|
||||
64
js/controller/DrawingController.js
Normal file
64
js/controller/DrawingController.js
Normal file
@ -0,0 +1,64 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.DrawingController = function (frame, container, dpi) {
|
||||
this.dpi = dpi;
|
||||
|
||||
// Public
|
||||
this.frame = frame;
|
||||
this.overlay = pskl.model.Frame.createEmptyFromFrame(frame);
|
||||
|
||||
// Private
|
||||
this.container = container;
|
||||
this.mainCanvas = this.createMainCanvas();
|
||||
this.overlayCanvas = this.createOverlayCanvas();
|
||||
this.renderer = new pskl.rendering.FrameRenderer();
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.renderFrame = function () {
|
||||
this.renderer.render(this.frame, this.mainCanvas, this.dpi);
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.renderFramePixel = function (col, row) {
|
||||
this.renderer.drawPixel(col, row, this.frame, this.mainCanvas, this.dpi);
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.renderOverlay = function () {
|
||||
this.renderer.render(this.overlay, this.overlayCanvas, this.dpi);
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.clearOverlay = function () {
|
||||
this.overlay = pskl.model.Frame.createEmptyFromFrame(this.frame);
|
||||
this.overlayCanvas.getContext("2d").clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.createMainCanvas = function () {
|
||||
var mainCanvas = this.createCanvas();
|
||||
mainCanvas.className = "drawing-canvas";
|
||||
this.container.appendChild(mainCanvas);
|
||||
return mainCanvas;
|
||||
};
|
||||
|
||||
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
||||
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
||||
// will help to visualize the tool interaction (without modifying the canvas).
|
||||
ns.DrawingController.prototype.createOverlayCanvas = function () {
|
||||
var overlayCanvas = this.createCanvas();
|
||||
overlayCanvas.className = "canvas-overlay";
|
||||
this.container.appendChild(overlayCanvas);
|
||||
return overlayCanvas;
|
||||
};
|
||||
|
||||
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
||||
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
||||
// will help to visualize the tool interaction (without modifying the canvas).
|
||||
ns.DrawingController.prototype.createCanvas = function () {
|
||||
var width = this.frame.getWidth(),
|
||||
height = this.frame.getHeight();
|
||||
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.setAttribute("width", width * this.dpi);
|
||||
canvas.setAttribute("height", height * this.dpi);
|
||||
|
||||
return canvas;
|
||||
};
|
||||
})();
|
||||
89
js/controller/PreviewFilmController.js
Normal file
89
js/controller/PreviewFilmController.js
Normal file
@ -0,0 +1,89 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.PreviewFilmController = function (framesheet, container, dpi) {
|
||||
|
||||
this.dpi = dpi;
|
||||
this.framesheet = framesheet;
|
||||
this.container = container;
|
||||
|
||||
this.renderer = new pskl.rendering.FrameRenderer();
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.init = function() {
|
||||
var addFrameButton = $('#add-frame-button')[0];
|
||||
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
|
||||
this.createPreviews();
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.addFrame = function () {
|
||||
this.framesheet.addEmptyFrame();
|
||||
piskel.setActiveFrameAndRedraw(this.framesheet.getFrameCount() - 1);
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.createPreviews = function () {
|
||||
this.container.innerHTML = "";
|
||||
for (var i = 0, l = this.framesheet.getFrameCount(); i < l ; i++) {
|
||||
this.container.appendChild(this.createPreviewTile(i));
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.createPreviewTile = function(tileNumber) {
|
||||
var frame = this.framesheet.getFrameByIndex(tileNumber);
|
||||
var width = frame.getWidth() * this.dpi,
|
||||
height = frame.getHeight() * this.dpi;
|
||||
|
||||
var previewTileRoot = document.createElement("li");
|
||||
var classname = "preview-tile";
|
||||
|
||||
if (piskel.getActiveFrameIndex() == tileNumber) {
|
||||
classname += " selected";
|
||||
}
|
||||
previewTileRoot.className = classname;
|
||||
|
||||
var canvasContainer = document.createElement("div");
|
||||
canvasContainer.className = "canvas-container";
|
||||
canvasContainer.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
|
||||
|
||||
var canvasBackground = document.createElement("div");
|
||||
canvasBackground.className = "canvas-background";
|
||||
canvasContainer.appendChild(canvasBackground);
|
||||
|
||||
var canvasPreview = document.createElement("canvas");
|
||||
canvasPreview.className = "canvas tile-view"
|
||||
|
||||
canvasPreview.setAttribute('width', width);
|
||||
canvasPreview.setAttribute('height', height);
|
||||
|
||||
previewTileRoot.addEventListener('click', function(evt) {
|
||||
// has not class tile-action:
|
||||
if(!evt.target.classList.contains('tile-action')) {
|
||||
piskel.setActiveFrameAndRedraw(tileNumber);
|
||||
}
|
||||
});
|
||||
|
||||
var canvasPreviewDuplicateAction = document.createElement("button");
|
||||
canvasPreviewDuplicateAction.className = "tile-action"
|
||||
canvasPreviewDuplicateAction.innerHTML = "dup"
|
||||
|
||||
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
|
||||
piskel.duplicateFrame(tileNumber);
|
||||
});
|
||||
|
||||
this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview, this.dpi);
|
||||
canvasContainer.appendChild(canvasPreview);
|
||||
previewTileRoot.appendChild(canvasContainer);
|
||||
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
||||
|
||||
if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
|
||||
var canvasPreviewDeleteAction = document.createElement("button");
|
||||
canvasPreviewDeleteAction.className = "tile-action"
|
||||
canvasPreviewDeleteAction.innerHTML = "del"
|
||||
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
|
||||
piskel.removeFrame(tileNumber);
|
||||
});
|
||||
previewTileRoot.appendChild(canvasPreviewDeleteAction);
|
||||
}
|
||||
|
||||
return previewTileRoot;
|
||||
};
|
||||
})();
|
||||
@ -8,55 +8,11 @@
|
||||
|
||||
ns.BaseTool = function() {};
|
||||
|
||||
ns.BaseTool.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {};
|
||||
ns.BaseTool.prototype.applyToolAt = function(col, row, frame) {};
|
||||
|
||||
ns.BaseTool.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {};
|
||||
ns.BaseTool.prototype.moveToolAt = function(col, row, frame) {};
|
||||
|
||||
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {};
|
||||
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
ns.BaseTool.prototype.drawPixelInCanvas = function (col, row, canvas, color, dpi) {
|
||||
var context = canvas.getContext('2d');
|
||||
if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
|
||||
context.clearRect(col * dpi, row * dpi, dpi, dpi);
|
||||
}
|
||||
else {
|
||||
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
|
||||
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
|
||||
$.publish(Events.COLOR_USED, [color]);
|
||||
}
|
||||
context.fillStyle = color;
|
||||
context.fillRect(col * dpi, row * dpi, dpi, dpi);
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
ns.BaseTool.prototype.drawFrameInCanvas = function (frame, canvas, dpi) {
|
||||
var color;
|
||||
for(var col = 0, num_col = frame.length; col < num_col; col++) {
|
||||
for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
|
||||
color = pskl.utils.normalizeColor(frame[col][row]);
|
||||
this.drawPixelInCanvas(col, row,canvas, color, dpi);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
|
||||
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
|
||||
// will help to visualize the tool interaction (without modifying the canvas).
|
||||
ns.BaseTool.prototype.createCanvasOverlay = function (canvas) {
|
||||
var overlayCanvas = document.createElement("canvas");
|
||||
overlayCanvas.className = "canvas-overlay";
|
||||
overlayCanvas.setAttribute("width", canvas.width);
|
||||
overlayCanvas.setAttribute("height", canvas.height);
|
||||
|
||||
canvas.parentNode.appendChild(overlayCanvas);
|
||||
return overlayCanvas;
|
||||
};
|
||||
|
||||
ns.BaseTool.prototype.removeCanvasOverlays = function () {
|
||||
$(".canvas-overlay").remove();
|
||||
};
|
||||
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame) {};
|
||||
|
||||
/**
|
||||
* Bresenham line algorihtm: Get an array of pixels from
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
this.superclass.applyToolAt.call(this, col, row, frame, Constants.TRANSPARENT_COLOR, canvas, dpi);
|
||||
ns.Eraser.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||
this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, drawer);
|
||||
};
|
||||
})();
|
||||
@ -15,16 +15,16 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
ns.PaintBucket.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||
|
||||
// Change model:
|
||||
var targetColor = pskl.utils.normalizeColor(frame[col][row]);
|
||||
var targetColor = drawer.frame.getPixel(col, row);
|
||||
//this.recursiveFloodFill_(frame, col, row, targetColor, color);
|
||||
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
|
||||
this.queueLinearFloodFill_(drawer.frame, col, row, targetColor, color);
|
||||
|
||||
// Draw in canvas:
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
this.drawFrameInCanvas(frame, canvas, dpi);
|
||||
drawer.renderFrame();
|
||||
};
|
||||
|
||||
/**
|
||||
@ -53,37 +53,27 @@
|
||||
var dx = [0, 1, 0, -1];
|
||||
|
||||
try {
|
||||
if(frame[col][row] == replacementColor) {
|
||||
if(frame.getPixel(col, row) == replacementColor) {
|
||||
return;
|
||||
}
|
||||
} catch(e) {
|
||||
// Frame out of bound exception.
|
||||
}
|
||||
|
||||
var isInFrameBound = function(frame_, col_, row_) {
|
||||
if( col_ < 0 ||
|
||||
col_ >= frame_.length ||
|
||||
row_ < 0 ||
|
||||
row_ >= frame_[0].length) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
queue.push({"col": col, "row": row});
|
||||
var loopCount = 0;
|
||||
var cellCount = frame.length * frame[0].length;
|
||||
var cellCount = frame.getWidth() * frame.getHeight();
|
||||
while(queue.length > 0) {
|
||||
loopCount ++;
|
||||
|
||||
var currentItem = queue.pop();
|
||||
frame[currentItem.col][currentItem.row] = replacementColor;
|
||||
frame.setPixel(currentItem.col, currentItem.row, replacementColor);
|
||||
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var nextCol = currentItem.col + dx[i]
|
||||
var nextRow = currentItem.row + dy[i]
|
||||
try {
|
||||
if (isInFrameBound(frame, nextCol, nextRow) && frame[nextCol][nextRow] == targetColor) {
|
||||
if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
|
||||
queue.push({"col": nextCol, "row": nextRow });
|
||||
}
|
||||
} catch(e) {
|
||||
|
||||
@ -12,11 +12,6 @@
|
||||
// Rectangle's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
// Rectangle's second point coordinates (changing dynamically in moveToolAt)
|
||||
this.endCol = null;
|
||||
this.endRow = null;
|
||||
|
||||
this.canvasOverlay = null;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
|
||||
@ -24,26 +19,22 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Rectangle.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
ns.Rectangle.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||
this.startCol = col;
|
||||
this.startRow = row;
|
||||
|
||||
// The fake canvas where we will draw the preview of the rectangle:
|
||||
this.canvasOverlay = this.createCanvasOverlay(canvas);
|
||||
// Drawing the first point of the rectangle in the fake overlay canvas:
|
||||
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
|
||||
drawer.overlay.setPixel(col, row, color);
|
||||
drawer.renderOverlay();
|
||||
};
|
||||
|
||||
ns.Rectangle.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
this.endCol = col;
|
||||
this.endRow = row;
|
||||
// When the user moussemove (before releasing), we dynamically compute the
|
||||
// pixel to draw the line and draw this line in the overlay canvas:
|
||||
var strokePoints = this.getRectanglePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
|
||||
|
||||
ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
|
||||
// Clean overlay canvas:
|
||||
this.canvasOverlay.getContext("2d").clearRect(
|
||||
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
|
||||
drawer.clearOverlay();
|
||||
|
||||
// When the user moussemove (before releasing), we dynamically compute the
|
||||
// pixel to draw the line and draw this line in the overlay :
|
||||
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
|
||||
|
||||
// Drawing current stroke:
|
||||
for(var i = 0; i< strokePoints.length; i++) {
|
||||
@ -51,39 +42,29 @@
|
||||
if(color == Constants.TRANSPARENT_COLOR) {
|
||||
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
||||
}
|
||||
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
|
||||
drawer.overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
|
||||
}
|
||||
drawer.renderOverlay();
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Rectangle.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
this.endCol = col;
|
||||
this.endRow = row;
|
||||
|
||||
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {
|
||||
// If the stroke tool is released outside of the canvas, we cancel the stroke:
|
||||
// TODO: Mutualize this check in common method
|
||||
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
|
||||
this.removeCanvasOverlays();
|
||||
return;
|
||||
}
|
||||
|
||||
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
|
||||
// the model and draw them in the drawing canvas (not the fake overlay anymore)
|
||||
var strokePoints = this.getRectanglePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
|
||||
|
||||
for(var i = 0; i< strokePoints.length; i++) {
|
||||
// Change model:
|
||||
frame[strokePoints[i].col][strokePoints[i].row] = color;
|
||||
|
||||
if(drawer.frame.containsPixel(col, row)) {
|
||||
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
|
||||
for(var i = 0; i< strokePoints.length; i++) {
|
||||
// Change model:
|
||||
drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
|
||||
}
|
||||
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
|
||||
// the model and draw them in the drawing canvas (not the fake overlay anymore)
|
||||
// Draw in canvas:
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
|
||||
drawer.renderFrame();
|
||||
}
|
||||
|
||||
// For now, we are done with the stroke tool and don't need an overlay anymore:
|
||||
this.removeCanvasOverlays();
|
||||
drawer.clearOverlay();
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.SimplePen = function() {
|
||||
this.toolId = "tool-pen"
|
||||
this.toolId = "tool-pen";
|
||||
};
|
||||
|
||||
this.previousCol = null;
|
||||
@ -18,23 +18,19 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
|
||||
this.previousCol = col;
|
||||
this.previousRow = row;
|
||||
ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||
if (drawer.frame.containsPixel(col, row)) {
|
||||
this.previousCol = col;
|
||||
this.previousRow = row;
|
||||
drawer.frame.setPixel(col, row, color);
|
||||
|
||||
// Change model:
|
||||
var color = pskl.utils.normalizeColor(color);
|
||||
if (color != frame[col][row]) {
|
||||
frame[col][row] = color;
|
||||
}
|
||||
|
||||
// Draw on canvas:
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
this.drawPixelInCanvas(col, row, canvas, color, dpi);
|
||||
// Draw on canvas:
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
drawer.renderFramePixel(col, row);
|
||||
}
|
||||
};
|
||||
|
||||
ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
ns.SimplePen.prototype.moveToolAt = function(col, row, color, drawer) {
|
||||
|
||||
if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
|
||||
// The pen movement is too fast for the mousemove frequency, there is a gap between the
|
||||
@ -42,11 +38,11 @@
|
||||
// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
|
||||
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
|
||||
for(var i=0, l=interpolatedPixels.length; i<l; i++) {
|
||||
this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, frame, color, canvas, dpi);
|
||||
this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, color, drawer);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.applyToolAt(col, row, frame, color, canvas, dpi);
|
||||
this.applyToolAt(col, row, color, drawer);
|
||||
}
|
||||
|
||||
this.previousCol = col;
|
||||
|
||||
@ -12,9 +12,6 @@
|
||||
// Stroke's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
// Stroke's second point coordinates (changing dynamically in moveToolAt)
|
||||
this.endCol = null;
|
||||
this.endRow = null;
|
||||
|
||||
this.canvasOverlay = null;
|
||||
};
|
||||
@ -24,7 +21,7 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Stroke.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
ns.Stroke.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||
this.startCol = col;
|
||||
this.startRow = row;
|
||||
|
||||
@ -36,17 +33,15 @@
|
||||
// frame model and canvas rendering.
|
||||
|
||||
// The fake canvas where we will draw the preview of the stroke:
|
||||
this.canvasOverlay = this.createCanvasOverlay(canvas);
|
||||
// Drawing the first point of the stroke in the fake overlay canvas:
|
||||
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
|
||||
drawer.updateOverlay(col, row, color);
|
||||
drawer.renderOverlay();
|
||||
};
|
||||
|
||||
ns.Stroke.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
this.endCol = col;
|
||||
this.endRow = row;
|
||||
ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
|
||||
// When the user moussemove (before releasing), we dynamically compute the
|
||||
// pixel to draw the line and draw this line in the overlay canvas:
|
||||
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
|
||||
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
||||
|
||||
// Clean overlay canvas:
|
||||
this.canvasOverlay.getContext("2d").clearRect(
|
||||
@ -64,39 +59,29 @@
|
||||
// eg deleting the equivalent of a stroke.
|
||||
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
||||
}
|
||||
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
|
||||
drawer.updateOverlay(strokePoints[i].col, strokePoints[i].row, color);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Stroke.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
|
||||
this.endCol = col;
|
||||
this.endRow = row;
|
||||
|
||||
ns.Stroke.prototype.releaseToolAt = function(col, row, color, drawer) {
|
||||
// If the stroke tool is released outside of the canvas, we cancel the stroke:
|
||||
// TODO: Mutualize this check in common method
|
||||
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
|
||||
this.removeCanvasOverlays();
|
||||
return;
|
||||
}
|
||||
|
||||
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
|
||||
// the model and draw them in the drawing canvas (not the fake overlay anymore)
|
||||
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
|
||||
|
||||
for(var i = 0; i< strokePoints.length; i++) {
|
||||
// Change model:
|
||||
frame[strokePoints[i].col][strokePoints[i].row] = color;
|
||||
|
||||
if(drawer.frame.containsPixel(col, row)) {
|
||||
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
|
||||
// the model and draw them in the drawing canvas (not the fake overlay anymore)
|
||||
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
||||
for(var i = 0; i< strokePoints.length; i++) {
|
||||
// Change model:
|
||||
drawer.updateFrame(strokePoints[i].col, strokePoints[i].row, color);
|
||||
}
|
||||
// Draw in canvas:
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
|
||||
}
|
||||
|
||||
drawer.renderFrame();
|
||||
}
|
||||
// For now, we are done with the stroke tool and don't need an overlay anymore:
|
||||
this.removeCanvasOverlays();
|
||||
drawer.clearOverlay();
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
58
js/model/Frame.js
Normal file
58
js/model/Frame.js
Normal file
@ -0,0 +1,58 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.model");
|
||||
|
||||
ns.Frame = function (pixels) {
|
||||
this.pixels = pixels;
|
||||
};
|
||||
|
||||
ns.Frame.createEmpty = function (width, height) {
|
||||
var pixels = []; //new Array(width);
|
||||
for (var columnIndex=0; columnIndex < width; columnIndex++) {
|
||||
var columnArray = [];
|
||||
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
|
||||
columnArray.push(Constants.TRANSPARENT_COLOR);
|
||||
}
|
||||
pixels[columnIndex] = columnArray;
|
||||
}
|
||||
return new ns.Frame(pixels);
|
||||
};
|
||||
|
||||
ns.Frame.createEmptyFromFrame = function (frame) {
|
||||
return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
|
||||
};
|
||||
|
||||
ns.Frame.prototype.clone = function () {
|
||||
var clone = ns.Frame.createEmptyFromFrame(this);
|
||||
for (var col = 0 ; col < clone.getWidth() ; col++) {
|
||||
for (var row = 0 ; row < clone.getHeight() ; row++) {
|
||||
clone.setPixel(col, row, this.getPixel(col, row));
|
||||
}
|
||||
}
|
||||
return clone;
|
||||
};
|
||||
|
||||
ns.Frame.prototype.serialize = function () {
|
||||
return JSON.stringify(this.pixels);
|
||||
};
|
||||
|
||||
ns.Frame.prototype.setPixel = function (col, row, color) {
|
||||
this.pixels[col][row] = color;
|
||||
};
|
||||
|
||||
ns.Frame.prototype.getPixel = function (col, row) {
|
||||
return this.pixels[col][row];
|
||||
};
|
||||
|
||||
ns.Frame.prototype.getWidth = function () {
|
||||
return this.pixels.length;
|
||||
};
|
||||
|
||||
ns.Frame.prototype.getHeight = function () {
|
||||
return this.pixels[0].length;
|
||||
};
|
||||
|
||||
ns.Frame.prototype.containsPixel = function (col, row) {
|
||||
return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
|
||||
};
|
||||
|
||||
})();
|
||||
96
js/model/FrameSheet.js
Normal file
96
js/model/FrameSheet.js
Normal file
@ -0,0 +1,96 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.model");
|
||||
ns.FrameSheet = function () {
|
||||
this.frames = [];
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.validate = function () {
|
||||
throw "FrameSheet.prototype.validate not implemented"
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.addEmptyFrame = function () {
|
||||
this.addFrame(ns.Frame.createEmpty(width, height));
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.addFrame = function (frame) {
|
||||
this.frames.push(frame);
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.getFrameCount = function () {
|
||||
return this.frames.length;
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.getUsedColors = function() {
|
||||
var colors = {};
|
||||
for (var frameIndex=0; frameIndex < this.frames.length; frameIndex++) {
|
||||
var frame = this.frames[frameIndex];
|
||||
for (var i = 0, width = frame.getWidth(); i < width ; i++) {
|
||||
var line = frame[i];
|
||||
for (var j = 0, height = frame.getHeight() ; j < height ; j++) {
|
||||
var pixel = frame.getPixel(i, j);
|
||||
colors[pixel] = pixel;
|
||||
}
|
||||
}
|
||||
}
|
||||
return colors;
|
||||
};
|
||||
|
||||
// Could be used to pass around model using long GET param (good enough for simple models) and
|
||||
// do some temporary locastorage
|
||||
ns.FrameSheet.prototype.serialize = function() {
|
||||
var serializedFrames = [];
|
||||
for (var i = 0 ; i < this.frames.length ; i++) {
|
||||
serializedFrames.push(this.frames[i].serialize());
|
||||
}
|
||||
return '[' + serializedFrames.join(",") + ']';
|
||||
//return JSON.stringify(frames);
|
||||
};
|
||||
|
||||
/**
|
||||
* Load a framesheet from a string that might have been persisted in db / localstorage
|
||||
* Overrides existing frames.
|
||||
* @param {String} serialized
|
||||
*/
|
||||
ns.FrameSheet.prototype.deserialize = function (serialized) {
|
||||
try {
|
||||
var frameConfigurations = JSON.parse(serialized);
|
||||
this.frames = [];
|
||||
for (var i = 0 ; i < frameConfigurations.length ; i++) {
|
||||
var frameCfg = frameConfigurations[i];
|
||||
this.addFrame(new ns.Frame(frameCfg));
|
||||
}
|
||||
$.publish(Events.FRAMESHEET_RESET);
|
||||
} catch (e) {
|
||||
throw "Could not load serialized framesheet : " + e.message
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
|
||||
return (index >= 0 && index < this.getFrameCount());
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.getFrameByIndex = function(index) {
|
||||
if (isNaN(index)) {
|
||||
throw "Bad argument value for getFrameByIndex method: <" + index + ">";
|
||||
}
|
||||
|
||||
if (!this.hasFrameAtIndex(index)) {
|
||||
throw "Out of bound index for frameSheet object.";
|
||||
}
|
||||
|
||||
return this.frames[index];
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.removeFrameByIndex = function(index) {
|
||||
if(!this.hasFrameAtIndex(index)) {
|
||||
throw "Out of bound index for frameSheet object.";
|
||||
}
|
||||
this.frames.splice(index, 1);
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) {
|
||||
var frame = this.getFrameByIndex(index);
|
||||
this.frames.splice(index + 1, 0, frame.clone());
|
||||
};
|
||||
})();
|
||||
279
js/piskel.js
279
js/piskel.js
@ -42,16 +42,7 @@ $.namespace("pskl");
|
||||
penColor = Constants.DEFAULT_PEN_COLOR,
|
||||
currentFrame = null;
|
||||
currentToolBehavior = null,
|
||||
previousMousemoveTime = 0,
|
||||
|
||||
//utility
|
||||
_normalizeColor = function (color) {
|
||||
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
|
||||
return color;
|
||||
} else {
|
||||
return "#" + color;
|
||||
}
|
||||
};
|
||||
previousMousemoveTime = 0;
|
||||
|
||||
/**
|
||||
* Main application controller
|
||||
@ -59,9 +50,34 @@ $.namespace("pskl");
|
||||
var piskel = {
|
||||
|
||||
init : function () {
|
||||
frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
|
||||
frameSheet.addEmptyFrame();
|
||||
var emptyFrame = pskl.model.Frame.createEmpty(framePixelWidth, framePixelHeight);
|
||||
|
||||
frameSheet = new pskl.model.FrameSheet();
|
||||
frameSheet.addFrame(emptyFrame);
|
||||
|
||||
this.drawingController = new pskl.controller.DrawingController(
|
||||
emptyFrame,
|
||||
$('#drawing-canvas-container')[0],
|
||||
drawingCanvasDpi
|
||||
);
|
||||
|
||||
this.setActiveFrame(0);
|
||||
|
||||
this.animationController = new pskl.controller.AnimatedPreviewController(
|
||||
frameSheet,
|
||||
$('#preview-canvas-container')[0],
|
||||
previewAnimationCanvasDpi
|
||||
);
|
||||
|
||||
|
||||
this.previewsController = new pskl.controller.PreviewFilmController(
|
||||
frameSheet,
|
||||
$('#preview-list')[0],
|
||||
previewTileCanvasDpi
|
||||
);
|
||||
|
||||
this.animationController.init();
|
||||
this.previewsController.init();
|
||||
|
||||
pskl.NotificationService.init();
|
||||
pskl.LocalStorageService.init(frameSheet);
|
||||
@ -95,9 +111,6 @@ $.namespace("pskl");
|
||||
|
||||
// TODO: Move this into their service or behavior files:
|
||||
this.initDrawingArea();
|
||||
this.initPreviewSlideshow();
|
||||
this.initAnimationPreview();
|
||||
this.startAnimation();
|
||||
|
||||
pskl.ToolSelector.init();
|
||||
pskl.Palette.init(frameSheet);
|
||||
@ -136,189 +149,50 @@ $.namespace("pskl");
|
||||
|
||||
setActiveFrame: function(index) {
|
||||
activeFrameIndex = index;
|
||||
currentFrame = frameSheet.getFrameByIndex(activeFrameIndex)
|
||||
this.drawingController.frame = frameSheet.getFrameByIndex(index);
|
||||
},
|
||||
|
||||
setActiveFrameAndRedraw: function(index) {
|
||||
this.setActiveFrame(index);
|
||||
|
||||
// When redraw engine is refactored, remove the following crap and
|
||||
// trigger an event instead:
|
||||
this.redraw();
|
||||
},
|
||||
|
||||
redraw : function () {
|
||||
// Update drawing canvas:
|
||||
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
|
||||
this.drawingController.renderFrame();
|
||||
// Update slideshow:
|
||||
this.createPreviews();
|
||||
// Update animation preview:
|
||||
animIndex = 0;
|
||||
this.previewsController.createPreviews();
|
||||
},
|
||||
|
||||
getActiveFrameIndex: function() {
|
||||
if(-1 == activeFrameIndex) {
|
||||
throw "Bad active frane initialization."
|
||||
throw "Bad active frame initialization."
|
||||
}
|
||||
return activeFrameIndex;
|
||||
},
|
||||
|
||||
initDrawingArea : function() {
|
||||
drawingAreaContainer = $('#drawing-canvas-container')[0];
|
||||
|
||||
drawingAreaCanvas = document.createElement("canvas");
|
||||
drawingAreaCanvas.className = 'canvas';
|
||||
drawingAreaCanvas.setAttribute('width', '' + framePixelWidth * drawingCanvasDpi);
|
||||
drawingAreaCanvas.setAttribute('height', '' + framePixelHeight * drawingCanvasDpi);
|
||||
|
||||
drawingAreaContainer.setAttribute('style',
|
||||
'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
|
||||
|
||||
drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
|
||||
drawingAreaContainer.appendChild(drawingAreaCanvas);
|
||||
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
body.setAttribute('onmouseup', 'piskel.onDocumentBodyMouseup(event)');
|
||||
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
|
||||
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
|
||||
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
|
||||
},
|
||||
|
||||
initPreviewSlideshow: function() {
|
||||
var addFrameButton = $('#add-frame-button')[0];
|
||||
addFrameButton.addEventListener('mousedown', function() {
|
||||
frameSheet.addEmptyFrame();
|
||||
piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
|
||||
});
|
||||
this.createPreviews();
|
||||
},
|
||||
|
||||
initAnimationPreview : function() {
|
||||
|
||||
var previewAnimationContainer = $('#preview-canvas-container')[0];
|
||||
previewCanvas = document.createElement('canvas');
|
||||
previewCanvas.className = 'canvas';
|
||||
previewAnimationContainer.setAttribute('style',
|
||||
'width:' + framePixelWidth * previewAnimationCanvasDpi + 'px; height:' + framePixelHeight * previewAnimationCanvasDpi + 'px;');
|
||||
previewAnimationContainer.appendChild(previewCanvas);
|
||||
previewCanvas.setAttribute('width', framePixelWidth * previewAnimationCanvasDpi);
|
||||
previewCanvas.setAttribute('height', framePixelHeight * previewAnimationCanvasDpi);
|
||||
},
|
||||
|
||||
startAnimation : function () {
|
||||
var scope = this;
|
||||
var animFPSTuner = $("#preview-fps")[0];
|
||||
var animPreviewFPS = parseInt(animFPSTuner.value, 10);
|
||||
var startPreviewRefresh = function() {
|
||||
return setInterval(scope.refreshAnimatedPreview, 1000/animPreviewFPS);
|
||||
};
|
||||
var refreshUpdater = startPreviewRefresh();
|
||||
|
||||
animFPSTuner.addEventListener('change', function(evt) {
|
||||
window.clearInterval(refreshUpdater);
|
||||
animPreviewFPS = parseInt(animFPSTuner.value, 10);
|
||||
$("#display-fps").html(animPreviewFPS + " fps");
|
||||
refreshUpdater = startPreviewRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
createPreviews : function () {
|
||||
var container = $('#preview-list')[0], previewTile;
|
||||
container.innerHTML = "";
|
||||
for (var i = 0, l = frameSheet.getFrameCount(); i < l ; i++) {
|
||||
previewTile = this.createPreviewTile(i);
|
||||
container.appendChild(previewTile);
|
||||
}
|
||||
},
|
||||
|
||||
createPreviewTile: function(tileNumber) {
|
||||
var previewTileRoot = document.createElement("li");
|
||||
var classname = "preview-tile";
|
||||
|
||||
if (this.getActiveFrameIndex() == tileNumber) {
|
||||
classname += " selected";
|
||||
}
|
||||
previewTileRoot.className = classname;
|
||||
|
||||
var canvasContainer = document.createElement("div");
|
||||
canvasContainer.className = "canvas-container";
|
||||
canvasContainer.setAttribute('style',
|
||||
'width:' + framePixelWidth * previewTileCanvasDpi + 'px; height:' + framePixelHeight * previewTileCanvasDpi + 'px;');
|
||||
|
||||
var canvasBackground = document.createElement("div");
|
||||
canvasBackground.className = "canvas-background";
|
||||
canvasContainer.appendChild(canvasBackground);
|
||||
|
||||
var canvasPreview = document.createElement("canvas");
|
||||
canvasPreview.className = "canvas tile-view"
|
||||
|
||||
canvasPreview.setAttribute('width', framePixelWidth * previewTileCanvasDpi);
|
||||
canvasPreview.setAttribute('height', framePixelHeight * previewTileCanvasDpi);
|
||||
|
||||
previewTileRoot.addEventListener('click', function(evt) {
|
||||
// has not class tile-action:
|
||||
// TODO: let me know when you want to start using a framework :)
|
||||
if(!evt.target.className.match(new RegExp('(\\s|^)'+ 'tile-action' +'(\\s|$)'))) {
|
||||
piskel.setActiveFrameAndRedraw(tileNumber);
|
||||
}
|
||||
});
|
||||
|
||||
var canvasPreviewDuplicateAction = document.createElement("button");
|
||||
canvasPreviewDuplicateAction.className = "tile-action"
|
||||
canvasPreviewDuplicateAction.innerHTML = "dup"
|
||||
|
||||
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
|
||||
piskel.duplicateFrame(tileNumber);
|
||||
});
|
||||
|
||||
this.drawFrameToCanvas(frameSheet.getFrameByIndex(tileNumber), canvasPreview, previewTileCanvasDpi);
|
||||
canvasContainer.appendChild(canvasPreview);
|
||||
previewTileRoot.appendChild(canvasContainer);
|
||||
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
||||
|
||||
if(tileNumber > 0 || frameSheet.getFrameCount() > 1) {
|
||||
var canvasPreviewDeleteAction = document.createElement("button");
|
||||
canvasPreviewDeleteAction.className = "tile-action"
|
||||
canvasPreviewDeleteAction.innerHTML = "del"
|
||||
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
|
||||
piskel.removeFrame(tileNumber);
|
||||
});
|
||||
previewTileRoot.appendChild(canvasPreviewDeleteAction);
|
||||
}
|
||||
|
||||
return previewTileRoot;
|
||||
},
|
||||
|
||||
refreshAnimatedPreview : function () {
|
||||
piskel.drawFrameToCanvas(frameSheet.getFrameByIndex(animIndex), previewCanvas, previewAnimationCanvasDpi);
|
||||
animIndex++;
|
||||
if (animIndex == frameSheet.getFrameCount()) {
|
||||
animIndex = 0;
|
||||
}
|
||||
document.body.addEventListener('mouseup', this.onMouseup.bind(this));
|
||||
drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
|
||||
drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
|
||||
drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px";
|
||||
drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px";
|
||||
drawingAreaContainer.addEventListener('contextmenu', this.onCanvasContextMenu);
|
||||
},
|
||||
|
||||
removeFrame: function(frameIndex) {
|
||||
frameSheet.removeFrameByIndex(frameIndex);
|
||||
|
||||
this.setActiveFrameAndRedraw(frameIndex - 1);
|
||||
var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
|
||||
this.setActiveFrameAndRedraw(activeFrameIndex);
|
||||
},
|
||||
|
||||
duplicateFrame: function(frameIndex) {
|
||||
frameSheet.duplicateFrameByIndex(frameIndex);
|
||||
|
||||
this.setActiveFrameAndRedraw(frameIndex + 1);
|
||||
},
|
||||
|
||||
updateCursorInfo : function (event) {
|
||||
var cursor = $('cursorInfo');
|
||||
cursor.style.top = event.clientY + 10 + "px";
|
||||
cursor.style.left = event.clientX + 10 + "px";
|
||||
|
||||
var coordinates = this.getRelativeCoordinates(event.clientX, event.clientY)
|
||||
cursor.innerHTML = [
|
||||
"X : " + coordinates.x,
|
||||
"Y : " + coordinates.y
|
||||
].join(", ");
|
||||
},
|
||||
|
||||
onCanvasMousedown : function (event) {
|
||||
onMousedown : function (event) {
|
||||
isClicked = true;
|
||||
|
||||
if(event.button == 2) { // right click
|
||||
@ -327,31 +201,27 @@ $.namespace("pskl");
|
||||
}
|
||||
var spriteCoordinate = this.getSpriteCoordinate(event);
|
||||
currentToolBehavior.applyToolAt(
|
||||
spriteCoordinate.col,
|
||||
spriteCoordinate.row,
|
||||
currentFrame,
|
||||
penColor,
|
||||
drawingAreaCanvas,
|
||||
drawingCanvasDpi);
|
||||
spriteCoordinate.col,
|
||||
spriteCoordinate.row,
|
||||
penColor,
|
||||
this.drawingController
|
||||
);
|
||||
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||
},
|
||||
|
||||
onCanvasMousemove : function (event) {
|
||||
|
||||
//this.updateCursorInfo(event);
|
||||
onMousemove : function (event) {
|
||||
var currentTime = new Date().getTime();
|
||||
// Throttling of the mousemove event:
|
||||
if ((currentTime - previousMousemoveTime) > 40 ) {
|
||||
if (isClicked) {
|
||||
var spriteCoordinate = this.getSpriteCoordinate(event);
|
||||
currentToolBehavior.moveToolAt(
|
||||
spriteCoordinate.col,
|
||||
spriteCoordinate.row,
|
||||
currentFrame,
|
||||
penColor,
|
||||
drawingAreaCanvas,
|
||||
drawingCanvasDpi);
|
||||
spriteCoordinate.col,
|
||||
spriteCoordinate.row,
|
||||
penColor,
|
||||
this.drawingController
|
||||
);
|
||||
|
||||
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
|
||||
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
|
||||
@ -362,14 +232,14 @@ $.namespace("pskl");
|
||||
}
|
||||
},
|
||||
|
||||
onDocumentBodyMouseup : function (event) {
|
||||
onMouseup : function (event) {
|
||||
if(isClicked || isRightClicked) {
|
||||
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
||||
// the user was probably drawing on the canvas.
|
||||
// Note: The mousemove movement (and the mouseup) may end up outside
|
||||
// of the drawing canvas.
|
||||
// TODO: Remove that when we have the centralized redraw loop
|
||||
this.createPreviews();
|
||||
this.previewsController.createPreviews();
|
||||
}
|
||||
|
||||
if(isRightClicked) {
|
||||
@ -381,32 +251,9 @@ $.namespace("pskl");
|
||||
currentToolBehavior.releaseToolAt(
|
||||
spriteCoordinate.col,
|
||||
spriteCoordinate.row,
|
||||
currentFrame,
|
||||
penColor,
|
||||
drawingAreaCanvas,
|
||||
drawingCanvasDpi);
|
||||
},
|
||||
|
||||
// TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop
|
||||
drawFrameToCanvas: function(frame, canvasElement, dpi) {
|
||||
var color;
|
||||
for(var col = 0, num_col = frame.length; col < num_col; col++) {
|
||||
for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
|
||||
color = _normalizeColor(frame[col][row]);
|
||||
this.drawPixelInCanvas(row, col, color, canvasElement, dpi);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop
|
||||
drawPixelInCanvas : function (row, col, color, canvas, dpi) {
|
||||
var context = canvas.getContext('2d');
|
||||
if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
|
||||
context.clearRect(col * dpi, row * dpi, dpi, dpi);
|
||||
} else {
|
||||
context.fillStyle = color;
|
||||
context.fillRect(col * dpi, row * dpi, dpi, dpi);
|
||||
}
|
||||
this.drawer
|
||||
);
|
||||
},
|
||||
|
||||
onCanvasContextMenu : function (event) {
|
||||
@ -417,7 +264,7 @@ $.namespace("pskl");
|
||||
},
|
||||
|
||||
getRelativeCoordinates : function (x, y) {
|
||||
var canvasRect = drawingAreaCanvas.getBoundingClientRect();
|
||||
var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
|
||||
return {
|
||||
x : x - canvasRect.left,
|
||||
y : y - canvasRect.top
|
||||
@ -450,8 +297,10 @@ $.namespace("pskl");
|
||||
|
||||
xhr.send(formData);
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
if(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
28
js/rendering/FrameRenderer.js
Normal file
28
js/rendering/FrameRenderer.js
Normal file
@ -0,0 +1,28 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.rendering");
|
||||
ns.FrameRenderer = function () {};
|
||||
|
||||
ns.FrameRenderer.prototype.render = function (frame, canvas, dpi) {
|
||||
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
||||
for(var row = 0, height = frame.getHeight(); row < height; row++) {
|
||||
this.drawPixel(col, row, frame, canvas, dpi);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame, canvas, dpi) {
|
||||
var context = canvas.getContext('2d');
|
||||
var color = frame.getPixel(col, row);
|
||||
if(color == Constants.TRANSPARENT_COLOR) {
|
||||
context.clearRect(col * dpi, row * dpi, dpi, dpi);
|
||||
}
|
||||
else {
|
||||
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
|
||||
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
|
||||
$.publish(Events.COLOR_USED, [color]);
|
||||
}
|
||||
context.fillStyle = color;
|
||||
context.fillRect(col * dpi, row * dpi, dpi, dpi);
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -26,14 +26,6 @@ jQuery.namespace = function() {
|
||||
return ((r << 16) | (g << 8) | b).toString(16);
|
||||
};
|
||||
|
||||
ns.normalizeColor = function (color) {
|
||||
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
|
||||
return color;
|
||||
} else {
|
||||
return "#" + color;
|
||||
}
|
||||
};
|
||||
|
||||
ns.inherit = function(extendedObject, inheritFrom) {
|
||||
extendedObject.prototype = Object.create(inheritFrom.prototype);
|
||||
extendedObject.prototype.constructor = extendedObject;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user