From e4c14e234e421fdb84d73a2cbea75a8aee905ca4 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 5 Dec 2013 22:12:48 +0100 Subject: [PATCH] ok this one is chaos --- css/settings.css | 2 + css/spectrum/spectrum-overrides.css | 3 +- js/Constants.js | 7 +- js/Events.js | 3 +- js/app.js | 3 +- js/controller/AnimatedPreviewController.js | 7 +- js/controller/DrawingController.js | 107 ++++++++++--------- js/controller/MinimapController.js | 4 +- js/controller/PiskelController.js | 2 +- js/drawingtools/BaseTool.js | 8 +- js/drawingtools/Circle.js | 6 +- js/drawingtools/ColorPicker.js | 6 +- js/drawingtools/Eraser.js | 4 +- js/drawingtools/Move.js | 6 +- js/drawingtools/PaintBucket.js | 2 +- js/drawingtools/Rectangle.js | 6 +- js/drawingtools/SimplePen.js | 6 +- js/drawingtools/Stroke.js | 6 +- js/drawingtools/VerticalMirrorPen.js | 2 +- js/drawingtools/selectiontools/BaseSelect.js | 8 +- js/lib/gif/gif.js | 4 +- js/rendering/PiskelRenderer.js | 2 +- js/rendering/frame/FrameRenderer.js | 21 ++-- piskel-boot.js | 2 +- piskel-script-list.js | 3 +- 25 files changed, 122 insertions(+), 108 deletions(-) diff --git a/css/settings.css b/css/settings.css index a56bbeb..9d14717 100644 --- a/css/settings.css +++ b/css/settings.css @@ -28,6 +28,7 @@ width: 280px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; + box-shadow: 0 0 5px 0 black; } .right-sticky-section.expanded .tool-icon { @@ -39,6 +40,7 @@ background-color: #444; margin-right: 0; padding-right: 2px; + border-left : 3px solid gold; } .settings-section { diff --git a/css/spectrum/spectrum-overrides.css b/css/spectrum/spectrum-overrides.css index 9186ad8..1bd874e 100644 --- a/css/spectrum/spectrum-overrides.css +++ b/css/spectrum/spectrum-overrides.css @@ -29,6 +29,7 @@ height: 100%; border-width: 0; box-sizing: border-box; + -moz-box-sizing:border-box; background-color: #444; } /* Hide the triangle */ @@ -39,7 +40,6 @@ /* */ .sp-preview { margin-right: 0; - border-color: 0; height: 100%; width: 39px; border-width: 0; @@ -83,6 +83,7 @@ border: 2px solid white; background: none; box-sizing:border-box; + -moz-box-sizing:border-box; box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); } diff --git a/js/Constants.js b/js/Constants.js index 3ee2fc6..71a12bc 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -11,6 +11,8 @@ var Constants = { MAX_HEIGHT : 1024, MAX_WIDTH : 1024, + MINIMUM_ZOOM : 1, + PREVIEW_FILM_SIZE : 120, DEFAULT_PEN_COLOR : '#000000', @@ -48,8 +50,9 @@ var Constants = { GRID_STROKE_WIDTH: 1, ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0', - LEFT_BUTTON : 'left_button_1', - RIGHT_BUTTON : 'right_button_2', + LEFT_BUTTON : 0, + MIDDLE_BUTTON : 1, + RIGHT_BUTTON : 2, MOUSEMOVE_THROTTLING : 10, ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';} diff --git a/js/Events.js b/js/Events.js index 28e1107..aebb030 100644 --- a/js/Events.js +++ b/js/Events.js @@ -38,6 +38,5 @@ var Events = { SHOW_NOTIFICATION: "SHOW_NOTIFICATION", HIDE_NOTIFICATION: "HIDE_NOTIFICATION", - // Events triggered by keyboard - SELECT_TOOL : "SELECT_TOOL" + ZOOM_CHANGED : "ZOOM_CHANGED" }; \ No newline at end of file diff --git a/js/app.js b/js/app.js index ca11988..6ddccc2 100644 --- a/js/app.js +++ b/js/app.js @@ -169,6 +169,7 @@ pskl.utils.serialization.Deserializer.deserialize(res.framesheet, function (piskel) { pskl.app.piskelController.setPiskel(piskel); pskl.app.animationController.setFPS(res.fps); + $.publish(Events.HIDE_NOTIFICATION); }); }; @@ -245,7 +246,7 @@ var firstFrame = this.piskelController.getFrameAt(0); var canvasRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1); canvasRenderer.drawTransparentAs('rgba(0,0,0,0)'); - var firstFrameCanvas = canvasRenderer.render().canvas; + var firstFrameCanvas = canvasRenderer.render(); return firstFrameCanvas.toDataURL("image/png"); }, diff --git a/js/controller/AnimatedPreviewController.js b/js/controller/AnimatedPreviewController.js index 4fec557..d392881 100644 --- a/js/controller/AnimatedPreviewController.js +++ b/js/controller/AnimatedPreviewController.js @@ -18,7 +18,7 @@ }; this.renderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions); - $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateZoom_.bind(this)); + $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this)); }; ns.AnimatedPreviewController.prototype.init = function () { @@ -67,10 +67,11 @@ return Math.min(hZoom, wZoom); }; - ns.AnimatedPreviewController.prototype.updateZoom_ = function () { + ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () { var frame = this.piskelController.getCurrentFrame(); var zoom = this.calculateZoom_(); - this.renderer.setZoom(zoom); this.renderer.setDisplaySize(frame.getWidth() * zoom, frame.getHeight() * zoom); + this.renderer.setZoom(zoom); + this.renderer.setOffset(0, 0); }; })(); \ No newline at end of file diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index 53f7521..71a7ce3 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -1,6 +1,6 @@ (function () { var ns = $.namespace("pskl.controller"); - ns.DrawingController = function (piskelController, paletteController,container) { + ns.DrawingController = function (piskelController, paletteController, container) { /** * @public */ @@ -40,7 +40,6 @@ // State of drawing controller: this.isClicked = false; - this.isRightClicked = false; this.previousMousemoveTime = 0; this.currentToolBehavior = null; }; @@ -52,7 +51,7 @@ this.currentToolBehavior = toolBehavior; this.overlayFrame.clear(); }, this)); - + $(window).resize($.proxy(this.startResizeTimer_, this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); @@ -86,7 +85,14 @@ }, ns.DrawingController.prototype.afterWindowResize_ = function () { + var initialWidth = this.compositeRenderer.getDisplaySize().width; this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_()); + this.centerColumnWrapperHorizontally_(); + var ratio = this.compositeRenderer.getDisplaySize().width / initialWidth; + var newZoom = ratio * this.compositeRenderer.getZoom(); + this.compositeRenderer.setZoom(newZoom); + + $.publish(Events.ZOOM_CHANGED); }, /** @@ -99,32 +105,37 @@ }, ns.DrawingController.prototype.onFrameSizeChanged_ = function () { - this.compositeRenderer.setZoom(this.calculateZoom_()); this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_()); + this.compositeRenderer.setZoom(this.calculateZoom_()); + this.compositeRenderer.setOffset(0, 0); + $.publish(Events.ZOOM_CHANGED); }; /** * @private */ ns.DrawingController.prototype.onMousedown_ = function (event) { - this.isClicked = true; - - if(event.button == 2) { // right click - this.isRightClicked = true; - } - + var frame = this.piskelController.getCurrentFrame(); var coords = this.renderer.getCoordinates(event.clientX, event.clientY); - this.currentToolBehavior.applyToolAt( - coords.x, - coords.y, - this.getCurrentColor_(), - this.piskelController.getCurrentFrame(), - this.overlayFrame, - this.wrapEvtInfo_(event) - ); + if (event.button === Constants.MIDDLE_BUTTON) { + if (frame.containsPixel(coords.x, coords.y)) { + $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]); + } + } else { + this.isClicked = true; - $.publish(Events.LOCALSTORAGE_REQUEST); + this.currentToolBehavior.applyToolAt( + coords.x, + coords.y, + this.getCurrentColor_(event), + frame, + this.overlayFrame, + event + ); + + $.publish(Events.LOCALSTORAGE_REQUEST); + } }; /** @@ -133,6 +144,7 @@ ns.DrawingController.prototype.onMousemove_ = function (event) { var currentTime = new Date().getTime(); // Throttling of the mousemove event: + if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) { var coords = this.renderer.getCoordinates(event.clientX, event.clientY); @@ -141,10 +153,10 @@ this.currentToolBehavior.moveToolAt( coords.x, coords.y, - this.getCurrentColor_(), + this.getCurrentColor_(event), this.piskelController.getCurrentFrame(), this.overlayFrame, - this.wrapEvtInfo_(event) + event ); // TODO(vincz): Find a way to move that to the model instead of being at the interaction level. @@ -156,10 +168,10 @@ this.currentToolBehavior.moveUnactiveToolAt( coords.x, coords.y, - this.getCurrentColor_(), + this.getCurrentColor_(event), this.piskelController.getCurrentFrame(), this.overlayFrame, - this.wrapEvtInfo_(event) + event ); } this.previousMousemoveTime = currentTime; @@ -170,56 +182,44 @@ var event = jQueryEvent.originalEvent; var delta = event.wheelDeltaY || (-2 * event.deltaY); var currentZoom = this.renderer.getZoom(); + + var perfectZoom = this.calculateZoom_(); + var step = perfectZoom / 10; + if (delta > 0) { - this.compositeRenderer.setZoom(currentZoom + 1); + this.compositeRenderer.setZoom(currentZoom + step); } else if (delta < 0) { - this.compositeRenderer.setZoom(currentZoom - 1); + this.compositeRenderer.setZoom(currentZoom - step); } - pskl.app.minimapController.onDrawingControllerMove_(); + $.publish(Events.ZOOM_CHANGED); }; /** * @private */ ns.DrawingController.prototype.onMouseup_ = function (event) { - if(this.isClicked || this.isRightClicked) { + if(this.isClicked) { // A mouse button was clicked on the drawing canvas before this mouseup event, // the user was probably drawing on the canvas. // Note: The mousemove movement (and the mouseup) may end up outside // of the drawing canvas. this.isClicked = false; - this.isRightClicked = false; var coords = this.renderer.getCoordinates(event.clientX, event.clientY); - //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row); this.currentToolBehavior.releaseToolAt( coords.x, coords.y, - this.getCurrentColor_(), + this.getCurrentColor_(event), this.piskelController.getCurrentFrame(), this.overlayFrame, - this.wrapEvtInfo_(event) + event ); $.publish(Events.TOOL_RELEASED); } }; - /** - * @private - */ - ns.DrawingController.prototype.wrapEvtInfo_ = function (event) { - var evtInfo = {}; - if (event.button === 0) { - evtInfo.button = Constants.LEFT_BUTTON; - } else if (event.button == 2) { - evtInfo.button = Constants.RIGHT_BUTTON; - } - return evtInfo; - }; - - /** * @private */ @@ -230,11 +230,13 @@ /** * @private */ - ns.DrawingController.prototype.getCurrentColor_ = function () { - if(this.isRightClicked) { + ns.DrawingController.prototype.getCurrentColor_ = function (event) { + if(event.button == Constants.RIGHT_BUTTON) { return this.paletteController.getSecondaryColor(); - } else { + } else if(event.button == Constants.LEFT_BUTTON) { return this.paletteController.getPrimaryColor(); + } else { + return Constants.DEFAULT_PEN_COLOR; } }; @@ -279,8 +281,11 @@ ns.DrawingController.prototype.getAvailableWidth_ = function () { var leftSectionWidth = $('.left-column').outerWidth(true), rightSectionWidth = $('.right-column').outerWidth(true), - availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth; - return availableWidth; + toolsContainerWidth = $('#tool-section').outerWidth(true), + settingsContainerWidth = $('#application-action-section').outerWidth(true), + availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth - toolsContainerWidth - settingsContainerWidth; + + return availableWidth-50; }; ns.DrawingController.prototype.getContainerHeight_ = function () { @@ -308,6 +313,6 @@ ns.DrawingController.prototype.setOffset = function (x, y) { this.compositeRenderer.setOffset(x, y); - pskl.app.minimapController.onDrawingControllerMove_(); + $.publish(Events.ZOOM_CHANGED); }; })(); \ No newline at end of file diff --git a/js/controller/MinimapController.js b/js/controller/MinimapController.js index 6b1fc89..5208cec 100644 --- a/js/controller/MinimapController.js +++ b/js/controller/MinimapController.js @@ -21,9 +21,11 @@ $(this.container).mousedown(this.onMinimapMousedown_.bind(this)); $('body').mousemove(this.onMinimapMousemove_.bind(this)); $('body').mouseup(this.onMinimapMouseup_.bind(this)); + + $.subscribe(Events.ZOOM_CHANGED, $.proxy(this.renderMinimap_, this)); }; - ns.MinimapController.prototype.onDrawingControllerMove_ = function () { + ns.MinimapController.prototype.renderMinimap_ = function () { var zoomRatio = this.getDrawingAreaZoomRatio_(); if (zoomRatio > 1) { this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset()); diff --git a/js/controller/PiskelController.js b/js/controller/PiskelController.js index 12c570a..25028ce 100644 --- a/js/controller/PiskelController.js +++ b/js/controller/PiskelController.js @@ -16,8 +16,8 @@ this.layerIdCounter = 1; - $.publish(Events.PISKEL_RESET); $.publish(Events.FRAME_SIZE_CHANGED); + $.publish(Events.PISKEL_RESET); }; ns.PiskelController.prototype.init = function () { diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index 8b482df..b3e33e3 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -8,11 +8,11 @@ ns.BaseTool = function() {}; - ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {}; + ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {}; - ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {}; + ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {}; - ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) { + ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) { if (overlay.containsPixel(col, row)) { if (!isNaN(this.highlightedPixelCol) && !isNaN(this.highlightedPixelRow) && @@ -31,7 +31,7 @@ } }; - ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {}; + ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {}; /** * Bresenham line algorihtm: Get an array of pixels from diff --git a/js/drawingtools/Circle.js b/js/drawingtools/Circle.js index c05f6f4..ff5e434 100644 --- a/js/drawingtools/Circle.js +++ b/js/drawingtools/Circle.js @@ -20,7 +20,7 @@ /** * @override */ - ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -28,7 +28,7 @@ overlay.setPixel(col, row, color); }; - ns.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay) { + ns.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { overlay.clear(); if(color == Constants.TRANSPARENT_COLOR) { color = Constants.SELECTION_TRANSPARENT_COLOR; @@ -41,7 +41,7 @@ /** * @override */ - ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) { + ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { overlay.clear(); if(frame.containsPixel(col, row)) { // cancel if outside of canvas // draw in frame to finalize diff --git a/js/drawingtools/ColorPicker.js b/js/drawingtools/ColorPicker.js index fba7d5a..bdfd259 100644 --- a/js/drawingtools/ColorPicker.js +++ b/js/drawingtools/ColorPicker.js @@ -16,12 +16,12 @@ /** * @override */ - ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, context) { + ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { if (frame.containsPixel(col, row)) { var sampledColor = frame.getPixel(col, row); - if (context.button == Constants.LEFT_BUTTON) { + if (event.button == Constants.LEFT_BUTTON) { $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]); - } else if (context.button == Constants.RIGHT_BUTTON) { + } else if (event.button == Constants.RIGHT_BUTTON) { $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]); } } diff --git a/js/drawingtools/Eraser.js b/js/drawingtools/Eraser.js index c66a422..57570fe 100644 --- a/js/drawingtools/Eraser.js +++ b/js/drawingtools/Eraser.js @@ -17,7 +17,7 @@ /** * @override */ - ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay) { - this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay); + ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { + this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event); }; })(); \ No newline at end of file diff --git a/js/drawingtools/Move.js b/js/drawingtools/Move.js index 1155db2..1635e0c 100644 --- a/js/drawingtools/Move.js +++ b/js/drawingtools/Move.js @@ -20,13 +20,13 @@ /** * @override */ - ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { this.startCol = col; this.startRow = row; this.frameClone = frame.clone(); }; - ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) { + ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { var colDiff = col - this.startCol, rowDiff = row - this.startRow; this.shiftFrame(colDiff, rowDiff, frame, this.frameClone); }; @@ -48,7 +48,7 @@ /** * @override */ - ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) { + ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { this.moveToolAt(col, row, color, frame, overlay); }; })(); diff --git a/js/drawingtools/PaintBucket.js b/js/drawingtools/PaintBucket.js index cb0ffa6..34fc471 100644 --- a/js/drawingtools/PaintBucket.js +++ b/js/drawingtools/PaintBucket.js @@ -16,7 +16,7 @@ /** * @override */ - ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color); }; diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js index dd2a57e..504d3ef 100644 --- a/js/drawingtools/Rectangle.js +++ b/js/drawingtools/Rectangle.js @@ -20,7 +20,7 @@ /** * @override */ - ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -28,7 +28,7 @@ overlay.setPixel(col, row, color); }; - ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) { + ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { overlay.clear(); if(color == Constants.TRANSPARENT_COLOR) { color = Constants.SELECTION_TRANSPARENT_COLOR; @@ -41,7 +41,7 @@ /** * @override */ - ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) { + ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { overlay.clear(); if(frame.containsPixel(col, row)) { // cancel if outside of canvas // draw in frame to finalize diff --git a/js/drawingtools/SimplePen.js b/js/drawingtools/SimplePen.js index a5dbbb0..7ec9840 100644 --- a/js/drawingtools/SimplePen.js +++ b/js/drawingtools/SimplePen.js @@ -16,11 +16,11 @@ }; pskl.utils.inherit(ns.SimplePen, ns.BaseTool); - + /** * @override */ - ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { if (frame.containsPixel(col, row)) { frame.setPixel(col, row, color); } @@ -28,7 +28,7 @@ this.previousRow = row; }; - ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay) { + ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { 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 // current point and the previously drawn one. diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js index 93173d8..6462e1c 100644 --- a/js/drawingtools/Stroke.js +++ b/js/drawingtools/Stroke.js @@ -20,7 +20,7 @@ /** * @override */ - ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -36,7 +36,7 @@ overlay.setPixel(col, row, color); }; - ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) { + ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { overlay.clear(); // When the user moussemove (before releasing), we dynamically compute the @@ -62,7 +62,7 @@ /** * @override */ - ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay) { + ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { // If the stroke tool is released outside of the canvas, we cancel the stroke: // TODO: Mutualize this check in common method if(frame.containsPixel(col, row)) { diff --git a/js/drawingtools/VerticalMirrorPen.js b/js/drawingtools/VerticalMirrorPen.js index 4b1d9d6..435805e 100644 --- a/js/drawingtools/VerticalMirrorPen.js +++ b/js/drawingtools/VerticalMirrorPen.js @@ -26,7 +26,7 @@ /** * @override */ - ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { this.superclass.applyToolAt.call(this, col, row, color, frame, overlay); var mirroredCol = this.getSymmetricCol_(col, frame); diff --git a/js/drawingtools/selectiontools/BaseSelect.js b/js/drawingtools/selectiontools/BaseSelect.js index 7d069cc..1997239 100644 --- a/js/drawingtools/selectiontools/BaseSelect.js +++ b/js/drawingtools/selectiontools/BaseSelect.js @@ -20,7 +20,7 @@ /** * @override */ - ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) { + ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay, event) { this.startCol = col; this.startRow = row; @@ -47,7 +47,7 @@ /** * @override */ - ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) { + ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) { if(this.mode == "select") { this.onSelect_(col, row, color, frame, overlay); @@ -61,7 +61,7 @@ /** * @override */ - ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) { + ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) { if(this.mode == "select") { this.onSelectEnd_(col, row, color, frame, overlay); } else if(this.mode == "moveSelection") { @@ -76,7 +76,7 @@ * instead of the 'select' one. It indicates that we can move the selection by dragndroping it. * @override */ - ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) { + ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) { if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) { // We're hovering the selection, show the move tool: diff --git a/js/lib/gif/gif.js b/js/lib/gif/gif.js index ffdc3b5..4bc0bd6 100644 --- a/js/lib/gif/gif.js +++ b/js/lib/gif/gif.js @@ -1,3 +1 @@ -(function(c){function a(b,d){if({}.hasOwnProperty.call(a.cache,b))return a.cache[b];var e=a.resolve(b);if(!e)throw new Error('Failed to resolve module '+b);var c={id:b,require:a,filename:b,exports:{},loaded:!1,parent:d,children:[]};d&&d.children.push(c);var f=b.slice(0,b.lastIndexOf('/')+1);return a.cache[b]=c.exports,e.call(c.exports,c,c.exports,f,b),c.loaded=!0,a.cache[b]=c.exports}a.modules={},a.cache={},a.resolve=function(b){return{}.hasOwnProperty.call(a.modules,b)?a.modules[b]:void 0},a.define=function(b,c){a.modules[b]=c};var b=function(a){return a='/',{title:'browser',version:'v0.10.5',browser:!0,env:{},argv:[],nextTick:c.setImmediate||function(a){setTimeout(a,0)},cwd:function(){return a},chdir:function(b){a=b}}}();a.define('/gif.coffee',function(b,k,j,i){function c(a,b){return{}.hasOwnProperty.call(a,b)}function g(d,b){for(var a=0,c=b.length;athis.frames.length;0<=this.frames.length?++a:--a)b.push(a);return b}.apply(this,arguments).length;athis.frames.length;0<=this.frames.length?++a:--a)b.push(a);return b}.apply(this,arguments)[a],b.push(null);return b}.call(this,[]),a=this.spawnWorkers();for(var b=0,c=function(){var c,c;c=[];for(var b=0;0<=a?ba;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments).length;ba;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments)[b],this.renderNextFrame();return this.emit('start'),this.emit('progress',0)},a.prototype.abort=function(){var a;while(!0){if(a=this.activeWorkers.shift(),!(null!=a))break;console.log('killing active worker'),a.terminate()}return this.running=!1,this.emit('abort')},a.prototype.spawnWorkers=function(){var a,b;return a=Math.min(this.options.workers,this.frames.length),function(){var c;c=[];for(var b=this.freeWorkers.length;this.freeWorkers.length<=a?ba;this.freeWorkers.length<=a?++b:--b)c.push(b);return c}.apply(this,arguments).forEach((b=this,function(d){var a,c;return console.log('spawning worker '+d),c=new Worker(b.options.workerScript),a=b,c.onmessage=function(b){return a.activeWorkers.splice(a.activeWorkers.indexOf(c),1),a.freeWorkers.push(c),a.frameFinished(b.data)},b.freeWorkers.push(c)})),a},a.prototype.frameFinished=function(a){return console.log('frame '+a.index+' finished - '+this.activeWorkers.length+' active'),this.finishedFrames++,this.emit('progress',this.finishedFrames/this.frames.length),this.imageParts[a.index]=a,g(null,this.imageParts)?this.renderNextFrame():this.finishRendering()},a.prototype.finishRendering=function(){var e,a,k,m,b,d,h;b=0;for(var f=0,j=this.imageParts.length;f=this.frames.length?void 0:(c=this.frames[this.nextFrame++],b=this.freeWorkers.shift(),a=this.getTask(c),console.log('starting frame '+(a.index+1)+' of '+this.frames.length),this.activeWorkers.push(b),b.postMessage(a))},a.prototype.getContextData=function(a){return a.getImageData(0,0,this.options.width,this.options.height).data},a.prototype.getImageData=function(b){var a;return null!=this._canvas||(this._canvas=document.createElement('canvas'),this._canvas.width=this.options.width,this._canvas.height=this.options.height),a=this._canvas.getContext('2d'),a.setFill=this.options.background,a.fillRect(0,0,this.options.width,this.options.height),a.drawImage(b,0,0),this.getContextData(a)},a.prototype.getTask=function(a){var c,b;if(c=this.frames.indexOf(a),b={index:c,last:c===this.frames.length-1,delay:a.delay,width:this.options.width,height:this.options.height,quality:this.options.quality,repeat:this.options.repeat,canTransfer:e.name==='chrome'},null!=a.data)b.data=a.data;else if(null!=a.context)b.data=this.getContextData(a.context);else if(null!=a.image)b.data=this.getImageData(a.image);else throw new Error('Invalid frame');return b},a}(d),b.exports=f}),a.define('/browser.coffee',function(f,g,h,i){var a,d,e,c,b;c=navigator.userAgent.toLowerCase(),e=navigator.platform.toLowerCase(),b=c.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,'unknown',0],d=b[1]==='ie'&&document.documentMode,a={name:b[1]==='version'?b[3]:b[1],version:d||parseFloat(b[1]==='opera'&&b[4]?b[4]:b[2]),platform:{name:c.match(/ip(?:ad|od|hone)/)?'ios':(c.match(/(?:webos|android)/)||e.match(/mac|win|linux/)||['other'])[0]}},a[a.name]=!0,a[a.name+parseInt(a.version,10)]=!0,a.platform[a.platform.name]=!0,f.exports=a}),a.define('events',function(f,e,g,h){b.EventEmitter||(b.EventEmitter=function(){});var a=e.EventEmitter=b.EventEmitter,c=typeof Array.isArray==='function'?Array.isArray:function(a){return Object.prototype.toString.call(a)==='[object Array]'},d=10;a.prototype.setMaxListeners=function(a){this._events||(this._events={}),this._events.maxListeners=a},a.prototype.emit=function(f){if(f==='error'&&(!(this._events&&this._events.error)||c(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:new Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var a=this._events[f];if(!a)return!1;if(!(typeof a=='function'))if(c(a)){var b=Array.prototype.slice.call(arguments,1),e=a.slice();for(var d=0,g=e.length;d0&&this._events[a].length>e&&(this._events[a].warned=!0,console.error('(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.',this._events[a].length),console.trace())}this._events[a].push(b)}else this._events[a]=[this._events[a],b];return this},a.prototype.on=a.prototype.addListener,a.prototype.once=function(b,c){var a=this;return a.on(b,function d(){a.removeListener(b,d),c.apply(this,arguments)}),this},a.prototype.removeListener=function(a,d){if('function'!==typeof d)throw new Error('removeListener only takes instances of Function');if(!(this._events&&this._events[a]))return this;var b=this._events[a];if(c(b)){var e=b.indexOf(d);if(e<0)return this;b.splice(e,1),b.length==0&&delete this._events[a]}else this._events[a]===d&&delete this._events[a];return this},a.prototype.removeAllListeners=function(a){return a&&this._events&&this._events[a]&&(this._events[a]=null),this},a.prototype.listeners=function(a){return this._events||(this._events={}),this._events[a]||(this._events[a]=[]),c(this._events[a])||(this._events[a]=[this._events[a]]),this._events[a]}}),c.GIF=a('/gif.coffee')}.call(this,this)) -//# sourceMappingURL=gif.js.map -// gif.js 0.1.4 - https://github.com/jnordberg/gif.js \ No newline at end of file +(function(c){function a(b,d){if({}.hasOwnProperty.call(a.cache,b))return a.cache[b];var e=a.resolve(b);if(!e)throw new Error('Failed to resolve module '+b);var c={id:b,require:a,filename:b,exports:{},loaded:!1,parent:d,children:[]};d&&d.children.push(c);var f=b.slice(0,b.lastIndexOf('/')+1);return a.cache[b]=c.exports,e.call(c.exports,c,c.exports,f,b),c.loaded=!0,a.cache[b]=c.exports}a.modules={},a.cache={},a.resolve=function(b){return{}.hasOwnProperty.call(a.modules,b)?a.modules[b]:void 0},a.define=function(b,c){a.modules[b]=c};var b=function(a){return a='/',{title:'browser',version:'v0.10.5',browser:!0,env:{},argv:[],nextTick:c.setImmediate||function(a){setTimeout(a,0)},cwd:function(){return a},chdir:function(b){a=b}}}();a.define('/gif.coffee',function(b,k,j,i){function c(a,b){return{}.hasOwnProperty.call(a,b)}function g(d,b){for(var a=0,c=b.length;athis.frames.length;0<=this.frames.length?++a:--a)b.push(a);return b}.apply(this,arguments).length;athis.frames.length;0<=this.frames.length?++a:--a)b.push(a);return b}.apply(this,arguments)[a],b.push(null);return b}.call(this,[]),a=this.spawnWorkers();for(var b=0,c=function(){var c,c;c=[];for(var b=0;0<=a?ba;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments).length;ba;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments)[b],this.renderNextFrame();return this.emit('start'),this.emit('progress',0)},a.prototype.abort=function(){var a;while(!0){if(a=this.activeWorkers.shift(),!(null!=a))break;console.log('killing active worker'),a.terminate()}return this.running=!1,this.emit('abort')},a.prototype.spawnWorkers=function(){var a,b;return a=Math.min(this.options.workers,this.frames.length),function(){var c;c=[];for(var b=this.freeWorkers.length;this.freeWorkers.length<=a?ba;this.freeWorkers.length<=a?++b:--b)c.push(b);return c}.apply(this,arguments).forEach((b=this,function(d){var a,c;return console.log('spawning worker '+d),c=new Worker(b.options.workerScript),a=b,c.onmessage=function(b){return a.activeWorkers.splice(a.activeWorkers.indexOf(c),1),a.freeWorkers.push(c),a.frameFinished(b.data)},b.freeWorkers.push(c)})),a},a.prototype.frameFinished=function(a){return console.log('frame '+a.index+' finished - '+this.activeWorkers.length+' active'),this.finishedFrames++,this.emit('progress',this.finishedFrames/this.frames.length),this.imageParts[a.index]=a,g(null,this.imageParts)?this.renderNextFrame():this.finishRendering()},a.prototype.finishRendering=function(){var e,a,k,m,b,d,h;b=0;for(var f=0,j=this.imageParts.length;f=this.frames.length?void 0:(c=this.frames[this.nextFrame++],b=this.freeWorkers.shift(),a=this.getTask(c),console.log('starting frame '+(a.index+1)+' of '+this.frames.length),this.activeWorkers.push(b),b.postMessage(a))},a.prototype.getContextData=function(a){return a.getImageData(0,0,this.options.width,this.options.height).data},a.prototype.getImageData=function(b){var a;return null!=this._canvas||(this._canvas=document.createElement('canvas'),this._canvas.width=this.options.width,this._canvas.height=this.options.height),a=this._canvas.getContext('2d'),a.setFill=this.options.background,a.fillRect(0,0,this.options.width,this.options.height),a.drawImage(b,0,0),this.getContextData(a)},a.prototype.getTask=function(a){var c,b;if(c=this.frames.indexOf(a),b={index:c,last:c===this.frames.length-1,delay:a.delay,width:this.options.width,height:this.options.height,quality:this.options.quality,repeat:this.options.repeat,canTransfer:e.name==='chrome'},null!=a.data)b.data=a.data;else if(null!=a.context)b.data=this.getContextData(a.context);else if(null!=a.image)b.data=this.getImageData(a.image);else throw new Error('Invalid frame');return b},a}(d),b.exports=f}),a.define('/browser.coffee',function(f,g,h,i){var a,d,e,c,b;c=navigator.userAgent.toLowerCase(),e=navigator.platform.toLowerCase(),b=c.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,'unknown',0],d=b[1]==='ie'&&document.documentMode,a={name:b[1]==='version'?b[3]:b[1],version:d||parseFloat(b[1]==='opera'&&b[4]?b[4]:b[2]),platform:{name:c.match(/ip(?:ad|od|hone)/)?'ios':(c.match(/(?:webos|android)/)||e.match(/mac|win|linux/)||['other'])[0]}},a[a.name]=!0,a[a.name+parseInt(a.version,10)]=!0,a.platform[a.platform.name]=!0,f.exports=a}),a.define('events',function(f,e,g,h){b.EventEmitter||(b.EventEmitter=function(){});var a=e.EventEmitter=b.EventEmitter,c=typeof Array.isArray==='function'?Array.isArray:function(a){return Object.prototype.toString.call(a)==='[object Array]'},d=10;a.prototype.setMaxListeners=function(a){this._events||(this._events={}),this._events.maxListeners=a},a.prototype.emit=function(f){if(f==='error'&&(!(this._events&&this._events.error)||c(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:new Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var a=this._events[f];if(!a)return!1;if(!(typeof a=='function'))if(c(a)){var b=Array.prototype.slice.call(arguments,1),e=a.slice();for(var d=0,g=e.length;d0&&this._events[a].length>e&&(this._events[a].warned=!0,console.error('(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.',this._events[a].length),console.trace())}this._events[a].push(b)}else this._events[a]=[this._events[a],b];return this},a.prototype.on=a.prototype.addListener,a.prototype.once=function(b,c){var a=this;return a.on(b,function d(){a.removeListener(b,d),c.apply(this,arguments)}),this},a.prototype.removeListener=function(a,d){if('function'!==typeof d)throw new Error('removeListener only takes instances of Function');if(!(this._events&&this._events[a]))return this;var b=this._events[a];if(c(b)){var e=b.indexOf(d);if(e<0)return this;b.splice(e,1),b.length==0&&delete this._events[a]}else this._events[a]===d&&delete this._events[a];return this},a.prototype.removeAllListeners=function(a){return a&&this._events&&this._events[a]&&(this._events[a]=null),this},a.prototype.listeners=function(a){return this._events||(this._events={}),this._events[a]||(this._events[a]=[]),c(this._events[a])||(this._events[a]=[this._events[a]]),this._events[a]}}),c.GIF=a('/gif.coffee')}.call(this,this)); diff --git a/js/rendering/PiskelRenderer.js b/js/rendering/PiskelRenderer.js index 33a0f2f..72872a6 100644 --- a/js/rendering/PiskelRenderer.js +++ b/js/rendering/PiskelRenderer.js @@ -5,7 +5,7 @@ ns.PiskelRenderer = function (piskelController) { var frames = []; for (var i = 0 ; i < piskelController.getFrameCount() ; i++) { - frames.push(this.piskelController.getFrameAt(i)); + frames.push(piskelController.getFrameAt(i)); } ns.FramesheetRenderer.call(this, frames); }; diff --git a/js/rendering/frame/FrameRenderer.js b/js/rendering/frame/FrameRenderer.js index 09476e5..7fe53e4 100644 --- a/js/rendering/frame/FrameRenderer.js +++ b/js/rendering/frame/FrameRenderer.js @@ -77,17 +77,18 @@ }; ns.FrameRenderer.prototype.setZoom = function (zoom) { - // back up center coordinates - var centerX = this.offset.x + (this.displayWidth/(2*this.zoom)); - var centerY = this.offset.y + (this.displayHeight/(2*this.zoom)); + if (zoom > Constants.MINIMUM_ZOOM) { + // back up center coordinates + var centerX = this.offset.x + (this.displayWidth/(2*this.zoom)); + var centerY = this.offset.y + (this.displayHeight/(2*this.zoom)); - this.zoom = Math.max(1, zoom); - - // recenter - this.setOffset( - centerX - (this.displayWidth/(2*this.zoom)), - centerY - (this.displayHeight/(2*this.zoom)) - ); + this.zoom = zoom; + // recenter + this.setOffset( + centerX - (this.displayWidth/(2*this.zoom)), + centerY - (this.displayHeight/(2*this.zoom)) + ); + } }; ns.FrameRenderer.prototype.getZoom = function () { diff --git a/piskel-boot.js b/piskel-boot.js index 1c8da00..204eb7a 100644 --- a/piskel-boot.js +++ b/piskel-boot.js @@ -31,7 +31,7 @@ script = "build/piskel-packaged-min.js"; } var loaderInterval = window.setInterval(function () { - if (document.querySelectorAll("._ctl").length === 0) { + if (document.querySelectorAll("[data-iframe-loader]").length === 0) { window.clearInterval(loaderInterval); loadScript(script, "pskl.app.init()"); } else { diff --git a/piskel-script-list.js b/piskel-script-list.js index 38012a5..b4e54c1 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -6,12 +6,14 @@ exports.scripts = [ // GIF Encoding libraries "js/lib/gif/gif.worker.js", "js/lib/gif/gif.js", + // Spectrum color-picker library "js/lib/spectrum/spectrum.js", // Application wide configuration "js/Constants.js", "js/Events.js", + // Libraries "js/utils/core.js", "js/utils/UserAgent.js", @@ -93,7 +95,6 @@ exports.scripts = [ "js/drawingtools/selectiontools/RectangleSelect.js", "js/drawingtools/selectiontools/ShapeSelect.js", "js/drawingtools/ColorPicker.js", - // Application controller and initialization "js/app.js" ]; \ No newline at end of file