mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Issue #305 : Add 1x icon, redesign popup icon

Browse Source
This commit is contained in:
jdescottes 2015-09-13 19:16:08 +02:00
parent cffb68c88c
commit 84e26b28da
11 changed files with 131 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/css/toolbox-animated-preview.css
View File

@ -34,11 +34,11 @@
overflow:hidden;
}
.tiled-frame-container {
.preview-container .background-image-frame-container {
height: 100%;
width: 100%;
position: relative;
background-repeat : repeat;
background-position: center;
}
.display-fps {
@ -80,26 +80,58 @@
color : gold;
}
.open-popup-preview-button {
.preview-contextual-actions {
position : absolute;
z-index: 500;
right : 10px;
top : 10px;
width : 24px;
height: 18px;
border : 2px solid white;
background : rgba(0,0,0,0.3);
cursor : pointer;
opacity: 0;
transition: 0.3s opacity, 0.3s border-color;
}
.minimap-container:hover .open-popup-preview-button {
.minimap-container:hover .preview-contextual-actions {
opacity: 1;
}
.open-popup-preview-button:hover {
.real-size-preview-button {
width : 18px;
height: 18px;
line-height: 18px;
margin: 0px 5px;
border: 2px solid white;
background: rgba(0, 0, 0, 0.3);
color: #FFF;
font-size: 10px;
font-weight: bold;
font-family: Tahoma;
}
.real-size-preview-button-enabled {
color: gold;
border-color: gold;
}
.preview-contextual-action {
float: left;
}
.open-popup-preview-button {
width : 18px;
height: 18px;
border : 2px solid white;
background-image: url(../img/popup-preview-arrow-white.png);
background-color : rgba(0,0,0,0.3);
}
.open-popup-preview-button:hover {
border-color: gold;
background-image: url(../img/popup-preview-arrow-gold.png);
}

BIN
src/img/popup-preview-arrow-gold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 B

BIN
src/img/popup-preview-arrow-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 B

2
src/js/controller/preview/PopupPreviewController.js
View File

@ -33,7 +33,7 @@
pskl.utils.Event.addEventListener(this.popup, 'resize', this.onWindowResize_, this);
pskl.utils.Event.addEventListener(this.popup, 'unload', this.onPopupClosed_, this);
var container = this.popup.document.querySelector('.preview-container');
this.renderer = new pskl.rendering.frame.TiledFrameRenderer($(container));
this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer($(container));
this.updateZoom_();
this.renderFlag = true;
};

38
src/js/controller/preview/PreviewController.js
View File

@ -15,12 +15,14 @@
this.fpsRangeInput = document.querySelector('#preview-fps');
this.fpsCounterDisplay = document.querySelector('#display-fps');
this.openPopupPreview = document.querySelector('.open-popup-preview-button');
this.realSizePreview = document.querySelector('.real-size-preview-button');
this.setFPS(Constants.DEFAULT.FPS);
var frame = this.piskelController.getCurrentFrame();
this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(this.container);
this.popupPreviewController = new ns.PopupPreviewController(piskelController);
};
@ -33,7 +35,8 @@
this.toggleOnionSkinEl = document.querySelector('.preview-toggle-onion-skin');
this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
pskl.utils.Event.addEventListener('.open-popup-preview-button', 'click', this.onOpenPopupPreviewClick_, this);
pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
pskl.utils.Event.addEventListener(this.realSizePreview, 'click', this.onRealSizePreviewClick_, this);
pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
@ -47,6 +50,7 @@
this.updateZoom_();
this.updateOnionSkinPreview_();
this.updateRealSizePreviewButton_();
this.updateMaxFPS_();
this.updateContainerDimensions_();
};
@ -55,6 +59,11 @@
this.popupPreviewController.open();
};
ns.PreviewController.prototype.onRealSizePreviewClick_ = function () {
var realSizeEnabled = pskl.UserSettings.get(pskl.UserSettings.REAL_SIZE_PREVIEW);
pskl.UserSettings.set(pskl.UserSettings.REAL_SIZE_PREVIEW, !realSizeEnabled);
};
ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
if (name == pskl.UserSettings.ONION_SKIN) {
this.updateOnionSkinPreview_();
@ -62,17 +71,21 @@
this.updateMaxFPS_();
} else {
this.updateZoom_();
this.updateRealSizePreviewButton_();
this.updateContainerDimensions_();
}
};
ns.PreviewController.prototype.updateOnionSkinPreview_ = function () {
var enabledClassname = 'preview-toggle-onion-skin-enabled';
if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
this.toggleOnionSkinEl.classList.add(enabledClassname);
} else {
this.toggleOnionSkinEl.classList.remove(enabledClassname);
}
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
this.toggleOnionSkinEl.classList.toggle(enabledClassname, isEnabled);
};
ns.PreviewController.prototype.updateRealSizePreviewButton_ = function () {
var enabledClassname = 'real-size-preview-button-enabled';
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.REAL_SIZE_PREVIEW);
this.realSizePreview.classList.toggle(enabledClassname, isEnabled);
};
ns.PreviewController.prototype.updateMaxFPS_ = function () {
@ -82,8 +95,11 @@
};
ns.PreviewController.prototype.updateZoom_ = function () {
var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
var zoom = isTiled ? 1 : this.calculateZoom_();
var realSizeEnabled = pskl.UserSettings.get(pskl.UserSettings.REAL_SIZE_PREVIEW);
var tiledPreviewEnabled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
var useRealSize = realSizeEnabled || tiledPreviewEnabled;
var zoom = useRealSize ? 1 : this.calculateZoom_();
this.renderer.setZoom(zoom);
this.setRenderFlag_(true);
};
@ -172,8 +188,9 @@
};
ns.PreviewController.prototype.updateContainerDimensions_ = function () {
var containerEl = this.container.get(0);
var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
this.renderer.setRepeated(isTiled);
var height, width;
if (isTiled) {
@ -186,6 +203,7 @@
width = frame.getWidth() * zoom;
}
var containerEl = this.container.get(0);
containerEl.style.height = height + 'px';
containerEl.style.width = width + 'px';

51
src/js/rendering/frame/BackgroundImageFrameRenderer.js Normal file
View File

@ -0,0 +1,51 @@
(function () {
var ns = $.namespace('pskl.rendering.frame');
ns.BackgroundImageFrameRenderer = function (container, zoom) {
this.container = container;
this.setZoom(zoom);
var containerEl = container.get(0);
var containerDocument = containerEl.ownerDocument;
this.frameContainer = containerDocument.createElement('div');
this.frameContainer.classList.add('background-image-frame-container');
container.get(0).appendChild(this.frameContainer);
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));
};
ns.BackgroundImageFrameRenderer.prototype.frameToDataUrl_ = function (frame) {
var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
return canvas.toDataURL('image/png');
};
ns.BackgroundImageFrameRenderer.prototype.render = function (frame) {
var imageSrc = this.cachedFrameProcessor.get(frame, this.zoom);
this.frameContainer.style.backgroundImage = 'url(' + imageSrc + ')';
};
ns.BackgroundImageFrameRenderer.prototype.show = function () {
if (this.frameContainer) {
this.frameContainer.style.display = 'block';
}
};
ns.BackgroundImageFrameRenderer.prototype.setZoom = function (zoom) {
this.zoom = zoom;
};
ns.BackgroundImageFrameRenderer.prototype.getZoom = function () {
return this.zoom;
};
ns.BackgroundImageFrameRenderer.prototype.setRepeated = function (repeat) {
var repeatValue;
if (repeat) {
repeatValue = 'repeat';
} else {
repeatValue = 'no-repeat';
}
this.frameContainer.style.backgroundRepeat = repeatValue;
};
})();

41
src/js/rendering/frame/TiledFrameRenderer.js
View File

@ -1,41 +0,0 @@
(function () {
var ns = $.namespace('pskl.rendering.frame');
ns.TiledFrameRenderer = function (container, zoom) {
this.container = container;
this.setZoom(zoom);
var containerEl = container.get(0);
var containerDocument = containerEl.ownerDocument;
this.displayContainer = containerDocument.createElement('div');
this.displayContainer.classList.add('tiled-frame-container');
container.get(0).appendChild(this.displayContainer);
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.frameToDataUrl_.bind(this));
};
ns.TiledFrameRenderer.prototype.frameToDataUrl_ = function (frame) {
var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
return canvas.toDataURL('image/png');
};
ns.TiledFrameRenderer.prototype.render = function (frame) {
var imageSrc = this.cachedFrameProcessor.get(frame, this.zoom);
this.displayContainer.style.backgroundImage = 'url(' + imageSrc + ')';
};
ns.TiledFrameRenderer.prototype.show = function () {
if (this.displayContainer) {
this.displayContainer.style.display = 'block';
}
};
ns.TiledFrameRenderer.prototype.setZoom = function (zoom) {
this.zoom = zoom;
};
ns.TiledFrameRenderer.prototype.getZoom = function () {
return this.zoom;
};
})();

2
src/js/utils/UserSettings.js
View File

@ -8,6 +8,7 @@
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
SELECTED_PALETTE : 'SELECTED_PALETTE',
TILED_PREVIEW : 'TILED_PREVIEW',
REAL_SIZE_PREVIEW : 'REAL_SIZE_PREVIEW',
ONION_SKIN : 'ONION_SKIN',
LAYER_PREVIEW : 'LAYER_PREVIEW',
LAYER_OPACITY : 'LAYER_OPACITY',
@ -22,6 +23,7 @@
'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
'TILED_PREVIEW' : false,
'REAL_SIZE_PREVIEW' : false,
'ONION_SKIN' : false,
'LAYER_OPACITY' : 0.2,
'LAYER_PREVIEW' : true

2
src/piskel-script-list.js
View File

@ -81,7 +81,7 @@
"js/rendering/layer/LayersRenderer.js",
"js/rendering/frame/FrameRenderer.js",
"js/rendering/OnionSkinRenderer.js",
"js/rendering/frame/TiledFrameRenderer.js",
"js/rendering/frame/BackgroundImageFrameRenderer.js",
"js/rendering/frame/CachedFrameRenderer.js",
"js/rendering/CanvasRenderer.js",
"js/rendering/FramesheetRenderer.js",

4
src/templates/popup-preview.html
View File

@ -4,7 +4,7 @@
body,
.popup-container ,
.preview-container,
.tiled-frame-container {
.background-image-frame-container {
width : 100%;
height : 100%;
}
@ -22,7 +22,7 @@
position: relative;
}
.tiled-frame-container {
.background-image-frame-container {
position: relative;
background-repeat : no-repeat;
}

6
src/templates/preview.html
View File

@ -1,6 +1,10 @@
<div id="animated-preview-container" class="preview-container">
<div class="canvas-container-wrapper minimap-container">
<div class="open-popup-preview-button" title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
<div class="preview-contextual-actions">
<div class="preview-contextual-action real-size-preview-button" title="Display preview in real size (1x)" rel="tooltip" data-placement="bottom">1x</div>
<div class="preview-contextual-action open-popup-preview-button" title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
</div>
<div id="animated-preview-canvas-container" class="canvas-container">
<div class="canvas-background"></div>
</div>