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 {
|
.tools-container {
|
||||||
height : 100%;
|
position: absolute;
|
||||||
margin : 0;
|
top: 0; left: 0;
|
||||||
cursor : default;
|
width: 100%; height: 30px;
|
||||||
-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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-nav {
|
.left-nav {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top : 0;
|
top : 30px; bottom : 0;
|
||||||
bottom : 0;
|
|
||||||
width : 200px;
|
width : 200px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
background : #000;
|
background : #000;
|
||||||
@ -31,17 +15,13 @@ ul, li {
|
|||||||
|
|
||||||
.main-panel {
|
.main-panel {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top : 0;
|
top : 30px; bottom : 0; left : 220px; right : 0;
|
||||||
bottom : 0;
|
|
||||||
left : 220px;
|
|
||||||
right : 0;
|
|
||||||
background : #ccc;
|
background : #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-container {
|
.preview-container {
|
||||||
position : absolute;
|
position : absolute;
|
||||||
top : 30px;
|
bottom : 0; right : 0;
|
||||||
right : 0;
|
|
||||||
height : 256px;
|
height : 256px;
|
||||||
width : 256px;
|
width : 256px;
|
||||||
background : white;
|
background : white;
|
||||||
@ -127,6 +107,13 @@ ul, li {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.drawing-canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.canvas-overlay {
|
.canvas-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -138,120 +125,6 @@ ul, li {
|
|||||||
float: left;
|
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 {
|
#preview-fps {
|
||||||
width : 200px;
|
width : 200px;
|
||||||
}
|
}
|
||||||
@ -260,27 +133,26 @@ ul, li {
|
|||||||
* User messages
|
* User messages
|
||||||
*/
|
*/
|
||||||
.user-message {
|
.user-message {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
bottom: 0;
|
top: 2px;
|
||||||
left: 40%;
|
right: 0;
|
||||||
background-color: #F9EDBE;
|
background-color: #F9EDBE;
|
||||||
padding: 7px 22px;
|
padding: 4px 12px;
|
||||||
padding-right: 42px;
|
padding-right: 20px;
|
||||||
border-top-left-radius: 7px;
|
border-top-left-radius: 7px;
|
||||||
border-top-right-radius: 7px;
|
border-bottom-left-radius: 7px;
|
||||||
font-family: ‘Arial Black’, Gadget, sans-serif;
|
border-right: 0;
|
||||||
color: #222;
|
color: #222;
|
||||||
border: #F0C36D 1px solid;
|
border: #F0C36D 1px solid;
|
||||||
border-bottom: 0;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-message .close {
|
.user-message .close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 0px;
|
||||||
right: 6px;
|
right: 5px;
|
||||||
color: gray;
|
color: gray;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
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="author" content="Julian Descottes">
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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/style.css">
|
||||||
|
<link rel="stylesheet" href="css/tools.css">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class='debug left-nav'>
|
|
||||||
|
|
||||||
<!-- Frame actions: -->
|
<!-- Tool section: -->
|
||||||
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
|
<div id="tools-container" class="tools-container">
|
||||||
<button id='add-frame-button' class="action-button">
|
<ul class="tools-group">
|
||||||
Add a Frame
|
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
|
||||||
</button>
|
<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 class="tools-group">
|
||||||
<ul id="preview-list"></ul>
|
<li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
|
||||||
</div>
|
<li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
|
||||||
<div class='main-panel'>
|
<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>
|
||||||
<!-- Drawing area: -->
|
<li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
|
||||||
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
</ul>
|
||||||
<div class="canvas-background"></div>
|
|
||||||
</div>
|
<ul class="tools-group">
|
||||||
|
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">
|
||||||
<!-- 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 id="palette" class="palette">
|
<ul id="palette" class="palette">
|
||||||
<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
|
<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
|
||||||
</ul>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Animation preview: -->
|
<!-- Animation preview: -->
|
||||||
@ -54,10 +68,6 @@
|
|||||||
<div id='preview-canvas-container' class="canvas-container">
|
<div id='preview-canvas-container' class="canvas-container">
|
||||||
<div class="canvas-background"></div>
|
<div class="canvas-background"></div>
|
||||||
</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>
|
</div>
|
||||||
<div id="cursorInfo"></div>
|
<div id="cursorInfo"></div>
|
||||||
@ -75,7 +85,12 @@
|
|||||||
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
|
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
|
||||||
|
|
||||||
<!-- Application libraries-->
|
<!-- 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/LocalStorageService.js"></script>
|
||||||
<script src="js/Palette.js"></script>
|
<script src="js/Palette.js"></script>
|
||||||
<script src="js/Notification.js"></script>
|
<script src="js/Notification.js"></script>
|
||||||
@ -91,3 +106,4 @@
|
|||||||
<script src="js/piskel.js"></script>
|
<script src="js/piskel.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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 = 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) {};
|
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame) {};
|
||||||
|
|
||||||
// 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();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Bresenham line algorihtm: Get an array of pixels from
|
* Bresenham line algorihtm: Get an array of pixels from
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
ns.Eraser.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||||
this.superclass.applyToolAt.call(this, col, row, frame, Constants.TRANSPARENT_COLOR, canvas, dpi);
|
this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, drawer);
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
@ -15,16 +15,16 @@
|
|||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
ns.PaintBucket.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||||
|
|
||||||
// Change model:
|
// 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.recursiveFloodFill_(frame, col, row, targetColor, color);
|
||||||
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
|
this.queueLinearFloodFill_(drawer.frame, col, row, targetColor, color);
|
||||||
|
|
||||||
// Draw in canvas:
|
// Draw in canvas:
|
||||||
// TODO: Remove that when we have the centralized redraw loop
|
// 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];
|
var dx = [0, 1, 0, -1];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if(frame[col][row] == replacementColor) {
|
if(frame.getPixel(col, row) == replacementColor) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
// Frame out of bound exception.
|
// 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});
|
queue.push({"col": col, "row": row});
|
||||||
var loopCount = 0;
|
var loopCount = 0;
|
||||||
var cellCount = frame.length * frame[0].length;
|
var cellCount = frame.getWidth() * frame.getHeight();
|
||||||
while(queue.length > 0) {
|
while(queue.length > 0) {
|
||||||
loopCount ++;
|
loopCount ++;
|
||||||
|
|
||||||
var currentItem = queue.pop();
|
var currentItem = queue.pop();
|
||||||
frame[currentItem.col][currentItem.row] = replacementColor;
|
frame.setPixel(currentItem.col, currentItem.row, replacementColor);
|
||||||
|
|
||||||
for (var i = 0; i < 4; i++) {
|
for (var i = 0; i < 4; i++) {
|
||||||
var nextCol = currentItem.col + dx[i]
|
var nextCol = currentItem.col + dx[i]
|
||||||
var nextRow = currentItem.row + dy[i]
|
var nextRow = currentItem.row + dy[i]
|
||||||
try {
|
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 });
|
queue.push({"col": nextCol, "row": nextRow });
|
||||||
}
|
}
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
|
|||||||
@ -12,11 +12,6 @@
|
|||||||
// Rectangle's first point coordinates (set in applyToolAt)
|
// Rectangle's first point coordinates (set in applyToolAt)
|
||||||
this.startCol = null;
|
this.startCol = null;
|
||||||
this.startRow = 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);
|
pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
|
||||||
@ -24,26 +19,22 @@
|
|||||||
/**
|
/**
|
||||||
* @override
|
* @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.startCol = col;
|
||||||
this.startRow = row;
|
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:
|
// 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) {
|
ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
|
||||||
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);
|
|
||||||
|
|
||||||
// Clean overlay canvas:
|
// Clean overlay canvas:
|
||||||
this.canvasOverlay.getContext("2d").clearRect(
|
drawer.clearOverlay();
|
||||||
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
|
|
||||||
|
// 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:
|
// Drawing current stroke:
|
||||||
for(var i = 0; i< strokePoints.length; i++) {
|
for(var i = 0; i< strokePoints.length; i++) {
|
||||||
@ -51,39 +42,29 @@
|
|||||||
if(color == Constants.TRANSPARENT_COLOR) {
|
if(color == Constants.TRANSPARENT_COLOR) {
|
||||||
color = Constants.SELECTION_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
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.Rectangle.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
|
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {
|
||||||
this.endCol = col;
|
|
||||||
this.endRow = row;
|
|
||||||
|
|
||||||
// If the stroke tool is released outside of the canvas, we cancel the stroke:
|
// If the stroke tool is released outside of the canvas, we cancel the stroke:
|
||||||
// TODO: Mutualize this check in common method
|
if(drawer.frame.containsPixel(col, row)) {
|
||||||
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
|
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
|
||||||
this.removeCanvasOverlays();
|
for(var i = 0; i< strokePoints.length; i++) {
|
||||||
return;
|
// 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 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)
|
// 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;
|
|
||||||
|
|
||||||
// Draw in canvas:
|
// Draw in canvas:
|
||||||
// TODO: Remove that when we have the centralized redraw loop
|
// TODO: Remove that when we have the centralized redraw loop
|
||||||
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
|
drawer.renderFrame();
|
||||||
}
|
}
|
||||||
|
drawer.clearOverlay();
|
||||||
// For now, we are done with the stroke tool and don't need an overlay anymore:
|
|
||||||
this.removeCanvasOverlays();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
var ns = $.namespace("pskl.drawingtools");
|
var ns = $.namespace("pskl.drawingtools");
|
||||||
|
|
||||||
ns.SimplePen = function() {
|
ns.SimplePen = function() {
|
||||||
this.toolId = "tool-pen"
|
this.toolId = "tool-pen";
|
||||||
};
|
};
|
||||||
|
|
||||||
this.previousCol = null;
|
this.previousCol = null;
|
||||||
@ -18,23 +18,19 @@
|
|||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
|
ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
|
||||||
|
if (drawer.frame.containsPixel(col, row)) {
|
||||||
this.previousCol = col;
|
this.previousCol = col;
|
||||||
this.previousRow = row;
|
this.previousRow = row;
|
||||||
|
drawer.frame.setPixel(col, row, color);
|
||||||
|
|
||||||
// Change model:
|
// Draw on canvas:
|
||||||
var color = pskl.utils.normalizeColor(color);
|
// TODO: Remove that when we have the centralized redraw loop
|
||||||
if (color != frame[col][row]) {
|
drawer.renderFramePixel(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);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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)) {
|
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
|
// 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.
|
// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
|
||||||
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
|
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
|
||||||
for(var i=0, l=interpolatedPixels.length; i<l; i++) {
|
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 {
|
else {
|
||||||
this.applyToolAt(col, row, frame, color, canvas, dpi);
|
this.applyToolAt(col, row, color, drawer);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.previousCol = col;
|
this.previousCol = col;
|
||||||
|
|||||||
@ -12,9 +12,6 @@
|
|||||||
// Stroke's first point coordinates (set in applyToolAt)
|
// Stroke's first point coordinates (set in applyToolAt)
|
||||||
this.startCol = null;
|
this.startCol = null;
|
||||||
this.startRow = null;
|
this.startRow = null;
|
||||||
// Stroke's second point coordinates (changing dynamically in moveToolAt)
|
|
||||||
this.endCol = null;
|
|
||||||
this.endRow = null;
|
|
||||||
|
|
||||||
this.canvasOverlay = null;
|
this.canvasOverlay = null;
|
||||||
};
|
};
|
||||||
@ -24,7 +21,7 @@
|
|||||||
/**
|
/**
|
||||||
* @override
|
* @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.startCol = col;
|
||||||
this.startRow = row;
|
this.startRow = row;
|
||||||
|
|
||||||
@ -36,17 +33,15 @@
|
|||||||
// frame model and canvas rendering.
|
// frame model and canvas rendering.
|
||||||
|
|
||||||
// The fake canvas where we will draw the preview of the stroke:
|
// 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:
|
// 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) {
|
ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
|
||||||
this.endCol = col;
|
|
||||||
this.endRow = row;
|
|
||||||
// When the user moussemove (before releasing), we dynamically compute the
|
// When the user moussemove (before releasing), we dynamically compute the
|
||||||
// pixel to draw the line and draw this line in the overlay canvas:
|
// 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:
|
// Clean overlay canvas:
|
||||||
this.canvasOverlay.getContext("2d").clearRect(
|
this.canvasOverlay.getContext("2d").clearRect(
|
||||||
@ -64,39 +59,29 @@
|
|||||||
// eg deleting the equivalent of a stroke.
|
// eg deleting the equivalent of a stroke.
|
||||||
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
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
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.Stroke.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
|
ns.Stroke.prototype.releaseToolAt = function(col, row, color, drawer) {
|
||||||
this.endCol = col;
|
|
||||||
this.endRow = row;
|
|
||||||
|
|
||||||
// If the stroke tool is released outside of the canvas, we cancel the stroke:
|
// If the stroke tool is released outside of the canvas, we cancel the stroke:
|
||||||
// TODO: Mutualize this check in common method
|
// TODO: Mutualize this check in common method
|
||||||
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
|
if(drawer.frame.containsPixel(col, row)) {
|
||||||
this.removeCanvasOverlays();
|
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
|
||||||
return;
|
// 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++) {
|
||||||
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
|
// Change model:
|
||||||
// the model and draw them in the drawing canvas (not the fake overlay anymore)
|
drawer.updateFrame(strokePoints[i].col, strokePoints[i].row, color);
|
||||||
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;
|
|
||||||
|
|
||||||
// Draw in canvas:
|
// Draw in canvas:
|
||||||
// TODO: Remove that when we have the centralized redraw loop
|
// 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:
|
// 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,
|
penColor = Constants.DEFAULT_PEN_COLOR,
|
||||||
currentFrame = null;
|
currentFrame = null;
|
||||||
currentToolBehavior = null,
|
currentToolBehavior = null,
|
||||||
previousMousemoveTime = 0,
|
previousMousemoveTime = 0;
|
||||||
|
|
||||||
//utility
|
|
||||||
_normalizeColor = function (color) {
|
|
||||||
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
|
|
||||||
return color;
|
|
||||||
} else {
|
|
||||||
return "#" + color;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Main application controller
|
* Main application controller
|
||||||
@ -59,9 +50,34 @@ $.namespace("pskl");
|
|||||||
var piskel = {
|
var piskel = {
|
||||||
|
|
||||||
init : function () {
|
init : function () {
|
||||||
frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
|
var emptyFrame = pskl.model.Frame.createEmpty(framePixelWidth, framePixelHeight);
|
||||||
frameSheet.addEmptyFrame();
|
|
||||||
|
frameSheet = new pskl.model.FrameSheet();
|
||||||
|
frameSheet.addFrame(emptyFrame);
|
||||||
|
|
||||||
|
this.drawingController = new pskl.controller.DrawingController(
|
||||||
|
emptyFrame,
|
||||||
|
$('#drawing-canvas-container')[0],
|
||||||
|
drawingCanvasDpi
|
||||||
|
);
|
||||||
|
|
||||||
this.setActiveFrame(0);
|
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.NotificationService.init();
|
||||||
pskl.LocalStorageService.init(frameSheet);
|
pskl.LocalStorageService.init(frameSheet);
|
||||||
@ -95,9 +111,6 @@ $.namespace("pskl");
|
|||||||
|
|
||||||
// TODO: Move this into their service or behavior files:
|
// TODO: Move this into their service or behavior files:
|
||||||
this.initDrawingArea();
|
this.initDrawingArea();
|
||||||
this.initPreviewSlideshow();
|
|
||||||
this.initAnimationPreview();
|
|
||||||
this.startAnimation();
|
|
||||||
|
|
||||||
pskl.ToolSelector.init();
|
pskl.ToolSelector.init();
|
||||||
pskl.Palette.init(frameSheet);
|
pskl.Palette.init(frameSheet);
|
||||||
@ -136,189 +149,50 @@ $.namespace("pskl");
|
|||||||
|
|
||||||
setActiveFrame: function(index) {
|
setActiveFrame: function(index) {
|
||||||
activeFrameIndex = index;
|
activeFrameIndex = index;
|
||||||
currentFrame = frameSheet.getFrameByIndex(activeFrameIndex)
|
this.drawingController.frame = frameSheet.getFrameByIndex(index);
|
||||||
},
|
},
|
||||||
|
|
||||||
setActiveFrameAndRedraw: function(index) {
|
setActiveFrameAndRedraw: function(index) {
|
||||||
this.setActiveFrame(index);
|
this.setActiveFrame(index);
|
||||||
|
this.redraw();
|
||||||
// When redraw engine is refactored, remove the following crap and
|
},
|
||||||
// trigger an event instead:
|
|
||||||
|
|
||||||
|
redraw : function () {
|
||||||
// Update drawing canvas:
|
// Update drawing canvas:
|
||||||
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
|
this.drawingController.renderFrame();
|
||||||
// Update slideshow:
|
// Update slideshow:
|
||||||
this.createPreviews();
|
this.previewsController.createPreviews();
|
||||||
// Update animation preview:
|
|
||||||
animIndex = 0;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getActiveFrameIndex: function() {
|
getActiveFrameIndex: function() {
|
||||||
if(-1 == activeFrameIndex) {
|
if(-1 == activeFrameIndex) {
|
||||||
throw "Bad active frane initialization."
|
throw "Bad active frame initialization."
|
||||||
}
|
}
|
||||||
return activeFrameIndex;
|
return activeFrameIndex;
|
||||||
},
|
},
|
||||||
|
|
||||||
initDrawingArea : function() {
|
initDrawingArea : function() {
|
||||||
drawingAreaContainer = $('#drawing-canvas-container')[0];
|
drawingAreaContainer = $('#drawing-canvas-container')[0];
|
||||||
|
document.body.addEventListener('mouseup', this.onMouseup.bind(this));
|
||||||
drawingAreaCanvas = document.createElement("canvas");
|
drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
|
||||||
drawingAreaCanvas.className = 'canvas';
|
drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
|
||||||
drawingAreaCanvas.setAttribute('width', '' + framePixelWidth * drawingCanvasDpi);
|
drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px";
|
||||||
drawingAreaCanvas.setAttribute('height', '' + framePixelHeight * drawingCanvasDpi);
|
drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px";
|
||||||
|
drawingAreaContainer.addEventListener('contextmenu', this.onCanvasContextMenu);
|
||||||
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;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
removeFrame: function(frameIndex) {
|
removeFrame: function(frameIndex) {
|
||||||
frameSheet.removeFrameByIndex(frameIndex);
|
frameSheet.removeFrameByIndex(frameIndex);
|
||||||
|
var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
|
||||||
this.setActiveFrameAndRedraw(frameIndex - 1);
|
this.setActiveFrameAndRedraw(activeFrameIndex);
|
||||||
},
|
},
|
||||||
|
|
||||||
duplicateFrame: function(frameIndex) {
|
duplicateFrame: function(frameIndex) {
|
||||||
frameSheet.duplicateFrameByIndex(frameIndex);
|
frameSheet.duplicateFrameByIndex(frameIndex);
|
||||||
|
|
||||||
this.setActiveFrameAndRedraw(frameIndex + 1);
|
this.setActiveFrameAndRedraw(frameIndex + 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
updateCursorInfo : function (event) {
|
onMousedown : 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) {
|
|
||||||
isClicked = true;
|
isClicked = true;
|
||||||
|
|
||||||
if(event.button == 2) { // right click
|
if(event.button == 2) { // right click
|
||||||
@ -327,31 +201,27 @@ $.namespace("pskl");
|
|||||||
}
|
}
|
||||||
var spriteCoordinate = this.getSpriteCoordinate(event);
|
var spriteCoordinate = this.getSpriteCoordinate(event);
|
||||||
currentToolBehavior.applyToolAt(
|
currentToolBehavior.applyToolAt(
|
||||||
spriteCoordinate.col,
|
spriteCoordinate.col,
|
||||||
spriteCoordinate.row,
|
spriteCoordinate.row,
|
||||||
currentFrame,
|
penColor,
|
||||||
penColor,
|
this.drawingController
|
||||||
drawingAreaCanvas,
|
);
|
||||||
drawingCanvasDpi);
|
|
||||||
|
|
||||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||||
},
|
},
|
||||||
|
|
||||||
onCanvasMousemove : function (event) {
|
onMousemove : function (event) {
|
||||||
|
|
||||||
//this.updateCursorInfo(event);
|
|
||||||
var currentTime = new Date().getTime();
|
var currentTime = new Date().getTime();
|
||||||
// Throttling of the mousemove event:
|
// Throttling of the mousemove event:
|
||||||
if ((currentTime - previousMousemoveTime) > 40 ) {
|
if ((currentTime - previousMousemoveTime) > 40 ) {
|
||||||
if (isClicked) {
|
if (isClicked) {
|
||||||
var spriteCoordinate = this.getSpriteCoordinate(event);
|
var spriteCoordinate = this.getSpriteCoordinate(event);
|
||||||
currentToolBehavior.moveToolAt(
|
currentToolBehavior.moveToolAt(
|
||||||
spriteCoordinate.col,
|
spriteCoordinate.col,
|
||||||
spriteCoordinate.row,
|
spriteCoordinate.row,
|
||||||
currentFrame,
|
penColor,
|
||||||
penColor,
|
this.drawingController
|
||||||
drawingAreaCanvas,
|
);
|
||||||
drawingCanvasDpi);
|
|
||||||
|
|
||||||
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
|
// 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,
|
// 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) {
|
if(isClicked || isRightClicked) {
|
||||||
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
||||||
// the user was probably drawing on the canvas.
|
// the user was probably drawing on the canvas.
|
||||||
// Note: The mousemove movement (and the mouseup) may end up outside
|
// Note: The mousemove movement (and the mouseup) may end up outside
|
||||||
// of the drawing canvas.
|
// of the drawing canvas.
|
||||||
// TODO: Remove that when we have the centralized redraw loop
|
// TODO: Remove that when we have the centralized redraw loop
|
||||||
this.createPreviews();
|
this.previewsController.createPreviews();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(isRightClicked) {
|
if(isRightClicked) {
|
||||||
@ -381,32 +251,9 @@ $.namespace("pskl");
|
|||||||
currentToolBehavior.releaseToolAt(
|
currentToolBehavior.releaseToolAt(
|
||||||
spriteCoordinate.col,
|
spriteCoordinate.col,
|
||||||
spriteCoordinate.row,
|
spriteCoordinate.row,
|
||||||
currentFrame,
|
|
||||||
penColor,
|
penColor,
|
||||||
drawingAreaCanvas,
|
this.drawer
|
||||||
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);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onCanvasContextMenu : function (event) {
|
onCanvasContextMenu : function (event) {
|
||||||
@ -417,7 +264,7 @@ $.namespace("pskl");
|
|||||||
},
|
},
|
||||||
|
|
||||||
getRelativeCoordinates : function (x, y) {
|
getRelativeCoordinates : function (x, y) {
|
||||||
var canvasRect = drawingAreaCanvas.getBoundingClientRect();
|
var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
|
||||||
return {
|
return {
|
||||||
x : x - canvasRect.left,
|
x : x - canvasRect.left,
|
||||||
y : y - canvasRect.top
|
y : y - canvasRect.top
|
||||||
@ -450,8 +297,10 @@ $.namespace("pskl");
|
|||||||
|
|
||||||
xhr.send(formData);
|
xhr.send(formData);
|
||||||
|
|
||||||
event.stopPropagation();
|
if(event) {
|
||||||
event.preventDefault();
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
return false;
|
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);
|
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) {
|
ns.inherit = function(extendedObject, inheritFrom) {
|
||||||
extendedObject.prototype = Object.create(inheritFrom.prototype);
|
extendedObject.prototype = Object.create(inheritFrom.prototype);
|
||||||
extendedObject.prototype.constructor = extendedObject;
|
extendedObject.prototype.constructor = extendedObject;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user