diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..19738719 --- /dev/null +++ b/css/reset.css @@ -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; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 1566a0b1..8814529f 100644 --- a/css/style.css +++ b/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; @@ -145,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; } @@ -267,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; diff --git a/css/tools.css b/css/tools.css new file mode 100644 index 00000000..fed74a34 --- /dev/null +++ b/css/tools.css @@ -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% + ); +} diff --git a/img/tools/cursors/eraser.png b/img/tools/cursors/eraser.png old mode 100644 new mode 100755 index b9b7522e..d8944e6e Binary files a/img/tools/cursors/eraser.png and b/img/tools/cursors/eraser.png differ diff --git a/img/tools/cursors/paint-bucket.png b/img/tools/cursors/paint-bucket.png old mode 100644 new mode 100755 index 4d3e6901..f82a8865 Binary files a/img/tools/cursors/paint-bucket.png and b/img/tools/cursors/paint-bucket.png differ diff --git a/img/tools/cursors/pen.png b/img/tools/cursors/pen.png old mode 100644 new mode 100755 index c6768e89..0bfecd50 Binary files a/img/tools/cursors/pen.png and b/img/tools/cursors/pen.png differ diff --git a/img/tools/cursors/rectangle.png b/img/tools/cursors/rectangle.png old mode 100644 new mode 100755 index 712daccf..d28dc6b1 Binary files a/img/tools/cursors/rectangle.png and b/img/tools/cursors/rectangle.png differ diff --git a/img/tools/icons/add-frame.png b/img/tools/icons/add-frame.png new file mode 100755 index 00000000..6332fefe Binary files /dev/null and b/img/tools/icons/add-frame.png differ diff --git a/img/tools/icons/color-palette.png b/img/tools/icons/color-palette.png new file mode 100755 index 00000000..6e6e8521 Binary files /dev/null and b/img/tools/icons/color-palette.png differ diff --git a/img/tools/icons/eraser.png b/img/tools/icons/eraser.png old mode 100644 new mode 100755 index b9b7522e..d8944e6e Binary files a/img/tools/icons/eraser.png and b/img/tools/icons/eraser.png differ diff --git a/img/tools/icons/paint-bucket.png b/img/tools/icons/paint-bucket.png old mode 100644 new mode 100755 index 4d3e6901..f82a8865 Binary files a/img/tools/icons/paint-bucket.png and b/img/tools/icons/paint-bucket.png differ diff --git a/img/tools/icons/pen.png b/img/tools/icons/pen.png old mode 100644 new mode 100755 index 7d01627d..0bfecd50 Binary files a/img/tools/icons/pen.png and b/img/tools/icons/pen.png differ diff --git a/img/tools/icons/rectangle.png b/img/tools/icons/rectangle.png old mode 100644 new mode 100755 index 8a148f6d..d28dc6b1 Binary files a/img/tools/icons/rectangle.png and b/img/tools/icons/rectangle.png differ diff --git a/img/tools/icons/save.png b/img/tools/icons/save.png new file mode 100755 index 00000000..99d532e8 Binary files /dev/null and b/img/tools/icons/save.png differ diff --git a/img/tools/icons/stroke.png b/img/tools/icons/stroke.png old mode 100644 new mode 100755 index 327b4479..0bfecd50 Binary files a/img/tools/icons/stroke.png and b/img/tools/icons/stroke.png differ diff --git a/index.html b/index.html index 256c5709..c9148848 100644 --- a/index.html +++ b/index.html @@ -9,42 +9,58 @@ + + -
- - - + +
+ - - -
-
- - -
-
-
- - -
-
-
-
-
-
- -
- - +
    +
  • +
  • +
  • +
  • +
  • +
+ +
    +
    -
+ +
  • + +
    • + + +
      +
    • + + 12 fps +
      • +
    + +
    + +
    + +
      +
      + +
      + +
      +
      @@ -52,10 +68,6 @@
      -
      - - 12 fps -
      @@ -94,3 +106,4 @@ + diff --git a/js/controller/AnimatedPreviewController.js b/js/controller/AnimatedPreviewController.js index 1a1462bf..fd99578b 100644 --- a/js/controller/AnimatedPreviewController.js +++ b/js/controller/AnimatedPreviewController.js @@ -51,12 +51,13 @@ }; ns.AnimatedPreviewController.prototype.refreshAnimatedPreview = function () { - this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex), this.previewCanvas, this.dpi); - this.animIndex++; - if (this.animIndex == this.framesheet.getFrameCount()) { - this.animIndex = 0; - } - this.startAnimationTimer(); + 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(); }; })(); \ No newline at end of file diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js index bb66a547..852fa0fd 100644 --- a/js/model/FrameSheet.js +++ b/js/model/FrameSheet.js @@ -65,12 +65,17 @@ } }; + + 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 (index < 0 || index > this.getFrameCount()) { + if (!this.hasFrameAtIndex(index)) { throw "Out of bound index for frameSheet object."; } @@ -78,10 +83,10 @@ }; ns.FrameSheet.prototype.removeFrameByIndex = function(index) { - if(index < 0 || index > this.getFrameCount()) { + if(!this.hasFrameAtIndex(index)) { throw "Out of bound index for frameSheet object."; } - frames.splice(index, 1); + this.frames.splice(index, 1); }; ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) { diff --git a/js/piskel.js b/js/piskel.js index f2777ce1..19baa0be 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -296,8 +296,10 @@ $.namespace("pskl"); xhr.send(formData); - event.stopPropagation(); - event.preventDefault(); + if(event) { + event.stopPropagation(); + event.preventDefault(); + } return false; } };