ok this one is chaos
This commit is contained in:
parent
0109eb81dd
commit
e4c14e234e
25 changed files with 122 additions and 108 deletions
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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';}
|
||||
|
|
|
@ -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"
|
||||
};
|
|
@ -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");
|
||||
},
|
||||
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
})();
|
|
@ -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);
|
||||
};
|
||||
})();
|
|
@ -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());
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
})();
|
|
@ -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);
|
||||
};
|
||||
})();
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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)) {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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:
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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);
|
||||
};
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"
|
||||
];
|
Loading…
Reference in a new issue