mirror
/
piskel
mirror of https://github.com/piskelapp/piskel.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement Import and Merge wizard dialog

This commit is contained in:
juliandescottes 2017-01-16 00:52:48 +01:00 committed by Julian Descottes
parent b5a8eb9f96
commit 78bbc71e6c
51 changed files with 2063 additions and 814 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/css/dialogs-browse-local.css
View File

@ -3,6 +3,19 @@
/* Browse local piskels panel */
/************************************************************************************************/
#dialog-container.browse-local {
width: 700px;
height: 500px;
top : 50%;
left : 50%;
position : absolute;
margin-left: -350px;
}
.show #dialog-container.browse-local {
margin-top: -250px;
}
.local-piskel-list {
width: 100%;
}

101
src/css/dialogs-import-image.css
View File

@ -1,101 +0,0 @@
/************************************************************************************************/
/* Import dialog */
/************************************************************************************************/
#dialog-container.import-image {
width: 550px;
height: 360px;
top : 50%;
left : 50%;
position : absolute;
margin-left: -250px;
}
.show #dialog-container.import-image {
margin-top: -150px;
}
.import-subsection {
margin-left: 25px;
}
.import-section:not(.import-subsection) > .dialog-section-title {
width: 50px;
}
.import-section-preview-title {
position: absolute;
margin-left: 50%;
margin-top: -28px;
}
.import-section-preview {
position: absolute;
display: inline-block;
border: 1px dashed #999;
border-radius: 3px;
margin-left: 50%;
}
.import-section-preview img {
max-width: 220px;
max-height: 220px;
display: block;
}
.import-section-preview.no-border {
border-color: transparent;
}
.import-section-preview canvas {
position: absolute;
left: 0;
top: 0;
}
.dialog-section-title {
display : inline-block;
width: 80px;
}
.dialog-section-radio {
margin-top: 15px;
vertical-align: sub;
}
.import-size-field:nth-of-type(2) {
margin-left: 5px;
}
.import-image-file-name {
display: inline-block;
overflow: hidden;
width: 200px;
vertical-align: middle;
word-break : break-all;
white-space: nowrap;
text-overflow: ellipsis;
font-style: italic;
font-weight: normal;
text-shadow: none;
color: var(--highlight-color);
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
}
.dialog-import-body {
padding: 10px 20px;
font-size:1.3em
}
.import-button {
font-size: 1em;
height: 28px;
padding: 0px 10px;
margin-top: 15px;
}

263
src/css/dialogs-import.css vendored Normal file
View File

@ -0,0 +1,263 @@
#dialog-container.import {
width: 500px;
height: 350px;
top : 50%;
left : 50%;
position : absolute;
margin-left: -250px;
margin-top: -175px;
}
.import .dialog-content {
font-size: 1.3em;
}
.import-step-container {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
background: #444;
}
.import-step-buttons {
position: absolute;
bottom: 10px;
right: 10px;
text-align: right;
}
.import-first-step .import-back-button {
display: none;
}
/**
* IMAGE IMPORT STEP
*/
.import-image-loading {
opacity: 0.3;
pointer-events: none;
}
.import-image-loading::after {
content: 'loading image';
position: absolute;
width: 100%;
top: 0;
left: 0;
margin-top: 110px;
text-align: center;
font-size: 3em;
color: white;
text-shadow: 0 0 60px black;
}
.import-subsection {
margin-left: 25px;
}
.import-section:not(.import-subsection) > .dialog-section-title {
width: 50px;
}
.import-section-preview-title {
position: absolute;
margin-left: 50%;
margin-top: -28px;
}
.import-section-preview {
position: absolute;
display: inline-block;
border: 1px dashed #999;
border-radius: 3px;
margin-left: 50%;
top: 10px;
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.import-section-preview img {
max-width: 100%;
max-height: 100%;
display: block;
}
.import-section-preview canvas {
position: absolute;
}
.dialog-section-title {
display : inline-block;
width: 80px;
}
.dialog-section-radio {
margin-top: 15px;
vertical-align: sub;
}
.import-size-field:nth-of-type(2) {
margin-left: 5px;
}
.import-image-file-name {
display: inline-block;
overflow: hidden;
width: 200px;
vertical-align: middle;
word-break : break-all;
white-space: nowrap;
text-overflow: ellipsis;
font-style: italic;
font-weight: normal;
text-shadow: none;
color: var(--highlight-color);
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
}
.dialog-import-body {
padding: 10px 20px;
font-size:1.3em
}
.import-button {
font-size: 1em;
height: 28px;
padding: 0px 10px;
margin-top: 15px;
}
/**
* SELECT MODE
*/
.import-info {
display: flex;
}
.import-preview canvas {
max-width: 100%;
max-height: 100%;
}
.import-meta {
width: 50%;
padding-left: 10px;
box-sizing: border-box;
/*center meta information horizontally*/
display: flex;
flex-direction: column;
justify-content: center;
}
.import-meta > div {
height: 22px;
display: flex;
margin-bottom: 5px;
}
.import-meta-value,
.import-meta-label {
padding: 2px 4px;
border: 1px solid gold;
}
.import-meta-label {
border-radius: 2px 0 0 2px;
color: var(--highlight-color);
border-right-width: 0;
}
.import-meta-title .import-meta-label {
border-right-width: 1px;
border-radius: 2px;
}
.import-meta-value {
border-radius: 0 2px 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.import-missing {
text-align: center;
line-height: 70px;
font-style: italic;
color: #aaa;
}
.import-mode {
margin: 15px 0 20px 0;
}
.import-mode-title {
margin-bottom: 10px
}
.import-mode-option,
.import-resize-option,
.insert-mode-option {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.import-mode-option :checked + span,
.import-resize-option :checked + span,
.insert-mode-option :checked + span {
color: var(--highlight-color);
}
/**
* ADJUST SIZE
*/
.import-resize-info {
margin: 10px 0 20px 0;
}
.import-resize-anchor-info,
.import-resize-option-label,
.insert-mode-option-label {
margin-bottom: 10px;
}
.import-resize-section {
margin-bottom: 10px;
}
.import-resize-option :checked + span {
color: var(--highlight-color);
}
.import-resize-warning {
color: var(--highlight-color);
}
/**
* INSERT LOCATION
*/
.insert-mode-container {
margin-bottom: 10px;
}
.insert-frame-container {
margin: 10px 0;
}

13
src/css/dialogs.css
View File

@ -48,19 +48,6 @@
margin-top: 0;
}
#dialog-container.browse-local {
width: 700px;
height: 500px;
top : 50%;
left : 50%;
position : absolute;
margin-left: -350px;
}
.show #dialog-container.browse-local {
margin-top: -250px;
}
.dialog-wrapper {
height: 100%;
position : relative;

4
src/css/frames-list.css
View File

@ -54,6 +54,9 @@
}
.add-frame-action {
display: flex;
align-items: center;
margin-top: 8px;
padding: 6px 0;
overflow: hidden;
@ -71,6 +74,7 @@
.add-frame-action-icon {
margin: 3px;
float: left;
flex-shrink: 0;
}
.add-frame-action .label {

1
src/css/reset.css
View File

@ -5,6 +5,7 @@ html, body {
cursor : default;
font-family: Arial;
font-size: 11px;
line-height: 1.1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;

97
src/css/settings-resize.css
View File

@ -5,103 +5,8 @@
width: 25%;
}
/*****************/
/* ANCHOR WIDGET */
/*****************/
.resize-origin-container {
overflow: hidden;
.resize-anchor-container {
position: relative;
width: 70px;
margin-top: 5px;
display: inline-block;
}
.transition .resize-origin-option,
.transition .resize-origin-option:before {
transition: background-color 0.2s, border-color 0.2s;
}
.resize-origin-option {
float: left;
position: relative;
box-sizing: border-box;
margin: 0 1px 1px 0;
width: 20px;
height: 20px;
background : #888;
font-size: 8px;
text-align: center;
cursor: pointer;
}
.disabled .resize-origin-option {
cursor: default;
background : #555;
border-color: #555 !important;
}
.resize-origin-option:hover {
border : 3px solid white;
}
.resize-origin-option.selected {
border : 3px solid var(--highlight-color);
}
.resize-origin-option:before {
content: '';
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -2px;
}
.resize-origin-option.selected:before {
content: '';
width: 4px;
height: 4px;
background: var(--highlight-color);
}
.disabled .resize-origin-option.selected:before {
background: #555;
}
.disabled .resize-origin-option[data-neighbor]:before {
border-color: #555 !important;
}
.resize-origin-option[data-neighbor]:before {
width: 0;
height: 0;
border-width: 4px;
border-style: solid;
border-color: transparent;
}
.resize-origin-option[data-neighbor="bottom"]:before {
border-top-color: var(--highlight-color);
margin-left: -4px;
}
.resize-origin-option[data-neighbor="left"]:before {
border-right-color: var(--highlight-color);
margin-top: -4px;
margin-left: -6px;
}
.resize-origin-option[data-neighbor="top"]:before {
border-bottom-color: var(--highlight-color);
margin-top: -6px;
margin-left: -4px;
}
.resize-origin-option[data-neighbor="right"]:before {
border-left-color: var(--highlight-color);
margin-top: -4px;
}

113
src/css/sprites.css
View File

@ -1,113 +0,0 @@
/*
Icon classes can be used entirely standalone. They are named after their original file names.
```html
<!-- `display: block` sprite -->
<div class="icon-home"></div>
<!-- `display: inline-block` sprite -->
<img class="icon-home" />
```
*/
.icon-cloud_export {
background-image: url(../img/spritesheet.png);
background-position: -512px -276px;
width: 50px;
height: 47px;
}
.icon-dragndrop {
background-image: url(../img/spritesheet.png);
background-position: -564px -173px;
width: 48px;
height: 48px;
}
.icon-duplicate {
background-image: url(../img/spritesheet.png);
background-position: -512px -369px;
width: 16px;
height: 16px;
}
.icon-export {
background-image: url(../img/spritesheet.png);
background-position: -564px -225px;
width: 43px;
height: 42px;
}
.icon-favicon {
background-image: url(../img/spritesheet.png);
background-position: -582px -151px;
width: 16px;
height: 16px;
}
.icon-gallery {
background-image: url(../img/spritesheet.png);
background-position: -512px -225px;
width: 52px;
height: 51px;
}
.icon-garbage {
background-image: url(../img/spritesheet.png);
background-position: 0px 0px;
width: 512px;
height: 512px;
}
.icon-gear {
background-image: url(../img/spritesheet.png);
background-position: -563px -323px;
width: 38px;
height: 37px;
}
.icon-import-icon {
background-image: url(../img/spritesheet.png);
background-position: -576px -69px;
width: 28px;
height: 36px;
}
.icon-keyboard {
background-image: url(../img/spritesheet.png);
background-position: -512px -133px;
width: 70px;
height: 40px;
}
.icon-local-storage-icon {
background-image: url(../img/spritesheet.png);
background-position: -512px 0px;
width: 100px;
height: 69px;
}
.icon-merge-icon {
background-image: url(../img/spritesheet.png);
background-position: -512px -69px;
width: 64px;
height: 64px;
}
.icon-plus {
background-image: url(../img/spritesheet.png);
background-position: -512px -323px;
width: 51px;
height: 46px;
}
.icon-popup-preview-arrow-gold {
background-image: url(../img/spritesheet.png);
background-position: -576px -105px;
width: 24px;
height: 18px;
}
.icon-popup-preview-arrow-white {
background-image: url(../img/spritesheet.png);
background-position: -582px -133px;
width: 24px;
height: 18px;
}
.icon-resize-icon {
background-image: url(../img/spritesheet.png);
background-position: -512px -173px;
width: 52px;
height: 52px;
}
.icon-save {
background-image: url(../img/spritesheet.png);
background-position: -562px -276px;
width: 43px;
height: 42px;
}

98
src/css/widgets-anchor.css Normal file
View File

@ -0,0 +1,98 @@
/*****************/
/* ANCHOR WIDGET */
/*****************/
.anchor-wrapper {
overflow: hidden;
width: 70px;
}
/* When transitioning between enabled and disabled states */
.transition .anchor-option,
.transition .anchor-option:before {
transition: background-color 0.2s, border-color 0.2s;
}
.anchor-option {
float: left;
position: relative;
box-sizing: border-box;
margin: 0 1px 1px 0;
width: 20px;
height: 20px;
background : #888;
font-size: 8px;
text-align: center;
cursor: pointer;
}
.disabled .anchor-option {
cursor: default;
background : #555;
border-color: #555 !important;
}
.anchor-option:hover {
border : 3px solid white;
}
.anchor-option.selected {
border : 3px solid var(--highlight-color);
}
.anchor-option:before {
content: '';
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -2px;
}
.anchor-option.selected:before {
content: '';
width: 4px;
height: 4px;
background: var(--highlight-color);
}
.disabled .anchor-option.selected:before {
background: #555;
}
.disabled .anchor-option[data-neighbor]:before {
border-color: #555 !important;
}
.anchor-option[data-neighbor]:before {
width: 0;
height: 0;
border-width: 4px;
border-style: solid;
border-color: transparent;
}
.anchor-option[data-neighbor="bottom"]:before {
border-top-color: var(--highlight-color);
margin-left: -4px;
}
.anchor-option[data-neighbor="left"]:before {
border-right-color: var(--highlight-color);
margin-top: -4px;
margin-left: -6px;
}
.anchor-option[data-neighbor="top"]:before {
border-bottom-color: var(--highlight-color);
margin-top: -6px;
margin-left: -4px;
}
.anchor-option[data-neighbor="right"]:before {
border-left-color: var(--highlight-color);
margin-top: -4px;
}

55
src/css/widgets-frame-picker.css Normal file
View File

@ -0,0 +1,55 @@
/***********************/
/* FRAME PICKER WIDGET */
/***********************/
.frame-picker-wrapper {
width: 150px;
height: 150px;
border: 3px solid #666;
border-radius: 3px;
}
.frame-viewer {
width: 100%;
height: calc(100% - 25px);
display: flex;
align-items: center;
justify-content: center;
}
.frame-viewer > canvas,
.frame-viewer > img {
max-width: 100%;
max-height: 100%;
}
.frame-nav {
display: flex;
width: 100%;
height: 24px;
border-top: 1px solid #666;
}
.frame-nav .button {
flex-shrink: 0;
border-radius: 0;
height: 24px;
background-color: #3f3f3f;
}
.frame-nav .button[disabled],
.frame-nav .button[disabled]:hover {
background-color: #aaa;
}
.frame-nav .button + .button {
border-left: 1px solid #333;
}
.frame-nav-input {
min-width: 1px;
border-style: none;
height: 24px;
text-align: center;
}

32
src/css/widgets-wizard.css Normal file
View File

@ -0,0 +1,32 @@
.wizard-wrapper {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wizard-step {
z-index: -1;
margin-left: calc(100% + 5px);
position: absolute;
}
.current-step {
z-index: 1;
margin-left: 0;
}
.current-step-in,
.current-step-out {
z-index: 10;
transition: margin-left 200ms;
}
.current-step-in {
margin-left: 0;
}
.current-step-out {
margin-left: 100%;
}

2
src/index.html
View File

@ -78,9 +78,9 @@
<!-- dialogs partials -->
@@include('templates/dialogs/create-palette.html', {})
@@include('templates/dialogs/import-image.html', {})
@@include('templates/dialogs/browse-local.html', {})
@@include('templates/dialogs/cheatsheet.html', {})
@@include('templates/dialogs/import.html', {})
@@include('templates/dialogs/performance-info.html', {})
@@include('templates/dialogs/unsupported-browser.html', {})

2
src/js/Events.js
View File

@ -15,7 +15,7 @@ var Events = {
DRAG_START : 'DRAG_START',
DRAG_END : 'DRAG_END',
DIALOG_DISPLAY : 'DIALOG_DISPLAY',
DIALOG_SHOW : 'DIALOG_SHOW',
DIALOG_HIDE : 'DIALOG_HIDE',
PALETTE_LIST_UPDATED : 'PALETTE_LIST_UPDATED',

2
src/js/app.js
View File

@ -188,7 +188,7 @@
}
if (pskl.utils.UserAgent.isUnsupported()) {
$.publish(Events.DIALOG_DISPLAY, {
$.publish(Events.DIALOG_SHOW, {
dialogId : 'unsupported-browser'
});
}

4
src/js/controller/PalettesListController.js
View File

@ -139,14 +139,14 @@
};
ns.PalettesListController.prototype.onCreatePaletteClick_ = function (evt) {
$.publish(Events.DIALOG_DISPLAY, {
$.publish(Events.DIALOG_SHOW, {
dialogId : 'create-palette'
});
};
ns.PalettesListController.prototype.onEditPaletteClick_ = function (evt) {
var paletteId = this.colorPaletteSelect_.value;
$.publish(Events.DIALOG_DISPLAY, {
$.publish(Events.DIALOG_SHOW, {
dialogId : 'create-palette',
initArgs : paletteId
});

2
src/js/controller/UserWarningController.js
View File

@ -9,7 +9,7 @@
// This method is not attached to the prototype because we want to trigger it
// from markup generated for a notification message.
ns.UserWarningController.showPerformanceInfoDialog = function () {
$.publish(Events.DIALOG_DISPLAY, {
$.publish(Events.DIALOG_SHOW, {
dialogId: 'performance-info'
});
};

13
src/js/controller/dialogs/AbstractDialogController.js
View File

@ -4,14 +4,19 @@
ns.AbstractDialogController = function () {};
ns.AbstractDialogController.prototype.init = function () {
this.closeButton = document.querySelector('.dialog-close');
this.closeButton.addEventListener('click', this.closeDialog.bind(this));
var closeButton = document.querySelector('.dialog-close');
this.addEventListener(closeButton, 'click', this.closeDialog);
};
ns.AbstractDialogController.prototype.destroy = function () {};
ns.AbstractDialogController.prototype.addEventListener = function (el, type, cb) {
pskl.utils.Event.addEventListener(el, type, cb, this);
};
ns.AbstractDialogController.prototype.destroy = function () {
pskl.utils.Event.removeAllEventListeners(this);
};
ns.AbstractDialogController.prototype.closeDialog = function () {
this.destroy();
$.publish(Events.DIALOG_HIDE);
};

3
src/js/controller/dialogs/BrowseLocalController.js
View File

@ -1,8 +1,7 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs');
ns.BrowseLocalController = function (piskelController) {
};
ns.BrowseLocalController = function (piskelController) {};
pskl.utils.inherit(ns.BrowseLocalController, ns.AbstractDialogController);

14
src/js/controller/dialogs/CheatsheetController.js
View File

@ -13,11 +13,12 @@
this.cheatsheetEl = document.getElementById('cheatsheetContainer');
this.eventTrapInput = document.getElementById('cheatsheetEventTrap');
pskl.utils.Event.addEventListener('.cheatsheet-restore-defaults', 'click', this.onRestoreDefaultsClick_, this);
pskl.utils.Event.addEventListener(this.cheatsheetEl, 'click', this.onCheatsheetClick_, this);
pskl.utils.Event.addEventListener(this.eventTrapInput, 'keydown', this.onEventTrapKeydown_, this);
this.addEventListener('.cheatsheet-restore-defaults', 'click', this.onRestoreDefaultsClick_);
this.addEventListener(this.cheatsheetEl, 'click', this.onCheatsheetClick_);
this.addEventListener(this.eventTrapInput, 'keydown', this.onEventTrapKeydown_);
$.subscribe(Events.SHORTCUTS_CHANGED, this.onShortcutsChanged_.bind(this));
this.onShortcutsChanged_ = this.onShortcutsChanged_.bind(this);
$.subscribe(Events.SHORTCUTS_CHANGED, this.onShortcutsChanged_);
this.initMarkup_();
document.querySelector('.cheatsheet-helptext').setAttribute('title', this.getHelptextTitle_());
@ -25,8 +26,11 @@
ns.CheatsheetController.prototype.destroy = function () {
this.eventTrapInput.blur();
pskl.utils.Event.removeAllEventListeners();
$.unsubscribe(Events.SHORTCUTS_CHANGED, this.onShortcutsChanged_);
this.cheatsheetEl = null;
this.superclass.destroy.call(this);
};
ns.CheatsheetController.prototype.onRestoreDefaultsClick_ = function () {

13
src/js/controller/dialogs/CreatePaletteController.js
View File

@ -19,12 +19,12 @@
var downloadButton = document.querySelector('.create-palette-download-button');
var importFileButton = document.querySelector('.create-palette-import-button');
this.nameInput.addEventListener('input', this.onNameInputChange_.bind(this));
this.hiddenFileInput.addEventListener('change', this.onFileInputChange_.bind(this));
this.addEventListener(this.nameInput, 'input', this.onNameInputChange_);
this.addEventListener(this.hiddenFileInput, 'change', this.onFileInputChange_);
buttonsContainer.addEventListener('click', this.onButtonClick_.bind(this));
downloadButton.addEventListener('click', this.onDownloadButtonClick_.bind(this));
importFileButton.addEventListener('click', this.onImportFileButtonClick_.bind(this));
this.addEventListener(buttonsContainer, 'click', this.onButtonClick_);
this.addEventListener(downloadButton, 'click', this.onDownloadButtonClick_);
this.addEventListener(importFileButton, 'click', this.onImportFileButtonClick_);
var colorsListContainer = document.querySelector('.colors-container');
this.colorsListWidget = new pskl.widgets.ColorsList(colorsListContainer);
@ -66,7 +66,10 @@
ns.CreatePaletteController.prototype.destroy = function () {
this.colorsListWidget.destroy();
this.superclass.destroy.call(this);
this.nameInput = null;
this.hiddenFileInput = null;
};
ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {

9
src/js/controller/dialogs/DialogsController.js
View File

@ -14,9 +14,9 @@
template : 'templates/dialogs/browse-local.html',
controller : ns.BrowseLocalController
},
'import-image' : {
template : 'templates/dialogs/import-image.html',
controller : ns.ImportImageController
'import' : {
template : 'templates/dialogs/import.html',
controller : ns.importwizard.ImportWizard
},
'performance-info' : {
template : 'templates/dialogs/performance-info.html',
@ -38,7 +38,7 @@
this.dialogContainer_ = document.getElementById('dialog-container');
this.dialogWrapper_ = document.getElementById('dialog-container-wrapper');
$.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
$.subscribe(Events.DIALOG_SHOW, this.onDialogDisplayEvent_.bind(this));
$.subscribe(Events.DIALOG_HIDE, this.hideDialog.bind(this));
var createPaletteShortcut = pskl.service.keyboard.Shortcuts.COLOR.CREATE_PALETTE;
@ -51,7 +51,6 @@
// adding the .animated class here instead of in the markup to avoid an animation during app startup
this.dialogWrapper_.classList.add('animated');
pskl.utils.Event.addEventListener(this.dialogWrapper_, 'click', this.onWrapperClicked_, this);
};
ns.DialogsController.prototype.onCreatePaletteShortcut_ = function () {

261
src/js/controller/dialogs/ImportImageController.js
View File

@ -1,261 +0,0 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs');
ns.ImportImageController = function (piskelController) {
this.importedImage_ = null;
this.file_ = null;
};
pskl.utils.inherit(ns.ImportImageController, ns.AbstractDialogController);
ns.ImportImageController.prototype.init = function (file) {
this.superclass.init.call(this);
this.file_ = file;
this.importPreview = $('.import-section-preview');
this.fileNameContainer = $('.import-image-file-name');
this.importType = $('[name=import-type]');
this.resizeWidth = $('[name=resize-width]');
this.resizeHeight = $('[name=resize-height]');
this.smoothResize = $('[name=smooth-resize-checkbox]');
this.frameSizeX = $('[name=frame-size-x]');
this.frameSizeY = $('[name=frame-size-y]');
this.frameOffsetX = $('[name=frame-offset-x]');
this.frameOffsetY = $('[name=frame-offset-y]');
this.importType.change(this.onImportTypeChange_.bind(this));
this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
this.frameSizeX.keyup(this.onFrameInputKeyUp_.bind(this, 'frameSizeX'));
this.frameSizeY.keyup(this.onFrameInputKeyUp_.bind(this, 'frameSizeY'));
this.frameOffsetX.keyup(this.onFrameInputKeyUp_.bind(this, 'frameOffsetX'));
this.frameOffsetY.keyup(this.onFrameInputKeyUp_.bind(this, 'frameOffsetY'));
this.importImageForm = $('[name=import-image-form]');
this.importImageForm.submit(this.onImportFormSubmit_.bind(this));
pskl.utils.FileUtils.readImageFile(this.file_, this.onImageLoaded_.bind(this));
};
ns.ImportImageController.prototype.onImportTypeChange_ = function (evt) {
if (this.getImportType_() === 'single') {
// Using single image, so remove the frame grid
this.hideFrameGrid_();
} else {
// Using spritesheet import, so draw the frame grid in the preview
var x = this.sanitizeInputValue_(this.frameOffsetX, 0);
var y = this.sanitizeInputValue_(this.frameOffsetY, 0);
var w = this.sanitizeInputValue_(this.frameSizeX, 1);
var h = this.sanitizeInputValue_(this.frameSizeY, 1);
this.drawFrameGrid_(x, y, w, h);
}
};
ns.ImportImageController.prototype.onImportFormSubmit_ = function (evt) {
evt.originalEvent.preventDefault();
this.importImageToPiskel_();
};
ns.ImportImageController.prototype.onResizeInputKeyUp_ = function (from, evt) {
if (this.importedImage_) {
this.synchronizeResizeFields_(evt.target.value, from);
}
};
ns.ImportImageController.prototype.onFrameInputKeyUp_ = function (from, evt) {
if (this.importedImage_) {
this.synchronizeFrameFields_(evt.target.value, from);
}
};
ns.ImportImageController.prototype.synchronizeResizeFields_ = function (value, from) {
value = parseInt(value, 10);
if (isNaN(value)) {
value = 0;
}
var height = this.importedImage_.height;
var width = this.importedImage_.width;
// Select single image import type since the user changed a value here
this.importType.filter('[value="single"]').attr('checked', 'checked');
if (from === 'width') {
this.resizeHeight.val(Math.round(value * height / width));
} else {
this.resizeWidth.val(Math.round(value * width / height));
}
};
ns.ImportImageController.prototype.synchronizeFrameFields_ = function (value, from) {
value = parseInt(value, 10);
if (isNaN(value)) {
value = 0;
}
// Parse the frame input values
var frameSizeX = this.sanitizeInputValue_(this.frameSizeX, 1);
var frameSizeY = this.sanitizeInputValue_(this.frameSizeY, 1);
var frameOffsetX = this.sanitizeInputValue_(this.frameOffsetX, 0);
var frameOffsetY = this.sanitizeInputValue_(this.frameOffsetY, 0);
// Select spritesheet import type since the user changed a value here
this.importType.filter('[value="sheet"]').attr('checked', 'checked');
// Draw the grid
this.drawFrameGrid_(frameOffsetX, frameOffsetY, frameSizeX, frameSizeY);
};
ns.ImportImageController.prototype.sanitizeInputValue_ = function(input, minValue) {
var value = parseInt(input.val(), 10);
if (value <= minValue || isNaN(value)) {
input.val(minValue);
value = minValue;
}
return value;
};
ns.ImportImageController.prototype.getImportType_ = function () {
return this.importType.filter(':checked').val();
};
ns.ImportImageController.prototype.onImageLoaded_ = function (image) {
this.importedImage_ = image;
var w = this.importedImage_.width;
var h = this.importedImage_.height;
// FIXME : We remove the onload callback here because JsGif will insert
// the image again and we want to avoid retriggering the image onload
this.importedImage_.onload = function () {};
var fileName = this.extractFileNameFromPath_(this.file_.name);
this.fileNameContainer.text(fileName);
this.fileNameContainer.attr('title', fileName);
this.resizeWidth.val(w);
this.resizeHeight.val(h);
this.frameSizeX.val(w);
this.frameSizeY.val(h);
this.frameOffsetX.val(0);
this.frameOffsetY.val(0);
this.importPreview.width('auto');
this.importPreview.height('auto');
this.importPreview.html('');
this.importPreview.append(this.createImagePreview_());
};
ns.ImportImageController.prototype.createImagePreview_ = function () {
var image = document.createElement('IMG');
image.src = this.importedImage_.src;
return image;
};
ns.ImportImageController.prototype.extractFileNameFromPath_ = function (path) {
var parts = [];
if (path.indexOf('/') !== -1) {
parts = path.split('/');
} else if (path.indexOf('\\') !== -1) {
parts = path.split('\\');
} else {
parts = [path];
}
return parts[parts.length - 1];
};
ns.ImportImageController.prototype.importImageToPiskel_ = function () {
if (this.importedImage_) {
if (window.confirm('You are about to create a new Piskel, unsaved changes will be lost.')) {
pskl.app.importService.newPiskelFromImage(
this.importedImage_,
{
importType: this.getImportType_(),
frameSizeX: this.getImportType_() === 'single' ?
this.resizeWidth.val() : this.sanitizeInputValue_(this.frameSizeX, 1),
frameSizeY: this.getImportType_() === 'single' ?
this.resizeHeight.val() : this.sanitizeInputValue_(this.frameSizeY, 1),
frameOffsetX: this.sanitizeInputValue_(this.frameOffsetX, 0),
frameOffsetY: this.sanitizeInputValue_(this.frameOffsetY, 0),
smoothing: !!this.smoothResize.prop('checked')
},
this.closeDialog.bind(this)
);
}
}
};
ns.ImportImageController.prototype.drawFrameGrid_ = function (frameX, frameY, frameW, frameH) {
if (!this.importedImage_) {
return;
}
// Grab the sizes of the source and preview images
var width = this.importedImage_.width;
var height = this.importedImage_.height;
var previewWidth = this.importPreview.width();
var previewHeight = this.importPreview.height();
var canvasWrapper = this.importPreview.children('canvas');
var canvas = canvasWrapper.get(0);
if (!canvasWrapper.length) {
// Create a new canvas for the grid
canvas = pskl.utils.CanvasUtils.createCanvas(
previewWidth + 1,
previewHeight + 1);
this.importPreview.append(canvas);
canvasWrapper = $(canvas);
}
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// Calculate the number of whole frames
var countX = Math.floor((width - frameX) / frameW);
var countY = Math.floor((height - frameY) / frameH);
if (countX > 0 && countY > 0) {
var scaleX = previewWidth / width;
var scaleY = previewHeight / height;
var maxWidth = countX * frameW + frameX;
var maxHeight = countY * frameH + frameY;
// Draw the vertical lines
for (var x = frameX + 0.5; x < maxWidth + 1 && x < width + 1; x += frameW) {
context.moveTo(x * scaleX, frameY * scaleY);
context.lineTo(x * scaleX, maxHeight * scaleY);
}
// Draw the horizontal lines
for (var y = frameY + 0.5; y < maxHeight + 1 && y < height + 1; y += frameH) {
context.moveTo(frameX * scaleX, y * scaleY);
context.lineTo(maxWidth * scaleX, y * scaleY);
}
// Set the line style to dashed
context.lineWidth = 1;
context.setLineDash([2, 1]);
context.strokeStyle = '#000000';
context.stroke();
// Show the canvas
canvasWrapper.show();
this.importPreview.addClass('no-border');
} else {
this.hideFrameGrid_();
}
};
ns.ImportImageController.prototype.hideFrameGrid_ = function() {
this.importPreview.children('canvas').hide();
this.importPreview.removeClass('no-border');
};
})();

195
src/js/controller/dialogs/importwizard/ImportWizard.js Normal file
View File

@ -0,0 +1,195 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs.importwizard');
var stepDefinitions = {
'IMAGE_IMPORT' : {
controller : ns.steps.ImageImport,
template : 'import-image-import'
},
'ADJUST_SIZE' : {
controller : ns.steps.AdjustSize,
template : 'import-adjust-size'
},
'INSERT_LOCATION' : {
controller : ns.steps.InsertLocation,
template : 'import-insert-location'
},
'SELECT_MODE' : {
controller : ns.steps.SelectMode,
template : 'import-select-mode'
}
};
ns.ImportWizard = function (piskelController, args) {
this.piskelController = piskelController;
// Merge data object used by steps to communicate and share their
// results.
this.mergeData = {
rawFiles : [],
mergePiskel: null,
origin: null,
resize: null,
insertIndex: null,
insertMode: null
};
};
pskl.utils.inherit(ns.ImportWizard, pskl.controller.dialogs.AbstractDialogController);
ns.ImportWizard.prototype.init = function (initArgs) {
this.superclass.init.call(this);
// Prepare mergeData object and wizard steps.
this.mergeData.rawFiles = initArgs.rawFiles;
this.steps = this.createSteps_();
// Start wizard widget.
var wizardContainer = document.querySelector('.import-wizard-container');
this.wizard = new pskl.widgets.Wizard(this.steps, wizardContainer);
this.wizard.init();
if (this.hasSingleImage_()) {
this.wizard.goTo('IMAGE_IMPORT');
} else if (this.hasSinglePiskelFile_()) {
pskl.utils.PiskelFileUtils.loadFromFile(this.mergeData.rawFiles[0],
// onSuccess
function (piskel) {
this.mergeData.mergePiskel = piskel;
this.wizard.goTo('SELECT_MODE');
}.bind(this),
// onError
function (reason) {
this.closeDialog();
$.publish(Events.PISKEL_FILE_IMPORT_FAILED, [reason]);
}.bind(this)
);
} else {
console.error('Unsupported import. Only single piskel or single image are supported at the moment.');
this.closeDialog();
}
};
ns.ImportWizard.prototype.back = function (stepInstance) {
this.wizard.back();
this.wizard.getCurrentStep().instance.onShow();
};
ns.ImportWizard.prototype.next = function (stepInstance) {
var step = this.wizard.getCurrentStep();
if (step.name === 'IMAGE_IMPORT') {
this.wizard.goTo('SELECT_MODE');
} else if (step.name === 'SELECT_MODE') {
if (this.mergeData.importMode === ns.steps.SelectMode.MODES.REPLACE) {
this.finalizeImport_();
} else if (this.hasSameSize_()) {
this.wizard.goTo('INSERT_LOCATION');
} else {
this.wizard.goTo('ADJUST_SIZE');
}
} else if (step.name === 'ADJUST_SIZE') {
this.wizard.goTo('INSERT_LOCATION');
} else if (step.name === 'INSERT_LOCATION') {
this.finalizeImport_();
}
};
ns.ImportWizard.prototype.destroy = function (file) {
Object.keys(this.steps).forEach(function (stepName) {
var step = this.steps[stepName];
step.instance.destroy();
step.instance = null;
step.el = null;
}.bind(this));
this.superclass.destroy.call(this);
};
ns.ImportWizard.prototype.createSteps_ = function () {
// The IMAGE_IMPORT step is used only if there is a single image file
// being imported.
var hasSingleImage = this.hasSingleImage_();
var steps = {};
Object.keys(stepDefinitions).forEach(function (stepName) {
if (stepName === 'IMAGE_IMPORT' && !hasSingleImage) {
return;
}
var definition = stepDefinitions[stepName];
var el = pskl.utils.Template.getAsHTML(definition.template);
var instance = new definition.controller(this.piskelController, this, el);
instance.init();
steps[stepName] = {
name: stepName,
el: el,
instance: instance
};
}.bind(this));
if (hasSingleImage) {
steps.IMAGE_IMPORT.el.classList.add('import-first-step');
} else {
steps.SELECT_MODE.el.classList.add('import-first-step');
}
return steps;
};
ns.ImportWizard.prototype.finalizeImport_ = function () {
var piskel = this.mergeData.mergePiskel;
var mode = this.mergeData.importMode;
if (mode === ns.steps.SelectMode.MODES.REPLACE) {
// Replace the current piskel and close the dialog.
var message = 'This will replace your current animation,' +
' are you sure you want to continue?';
if (window.confirm(message)) {
this.piskelController.setPiskel(piskel);
this.closeDialog();
}
} else if (mode === ns.steps.SelectMode.MODES.NEW) {
console.log('import as new: not implemented yet');
} else if (mode === ns.steps.SelectMode.MODES.MERGE) {
// Need to also fetch resize options
// and insert location option
var merge = pskl.utils.MergeUtils.merge(this.piskelController.getPiskel(), piskel, {
insertIndex: this.mergeData.insertIndex,
insertMode: this.mergeData.insertMode,
origin: this.mergeData.origin,
resize: this.mergeData.resize
});
this.piskelController.setPiskel(merge);
this.closeDialog();
}
};
ns.ImportWizard.prototype.hasSameSize_ = function () {
var piskel = this.mergeData.mergePiskel;
if (!piskel) {
return false;
}
return piskel.width === this.piskelController.getWidth() &&
piskel.height === this.piskelController.getHeight();
};
ns.ImportWizard.prototype.hasSingleImage_ = function () {
if (this.mergeData.rawFiles.length !== 1) {
return false;
}
var file = this.mergeData.rawFiles[0];
return file.type.indexOf('image') === 0;
};
ns.ImportWizard.prototype.hasSinglePiskelFile_ = function () {
if (this.mergeData.rawFiles.length !== 1) {
return false;
}
var file = this.mergeData.rawFiles[0];
return (/\.piskel$/).test(file.name);
};
})();

43
src/js/controller/dialogs/importwizard/steps/AbstractImportStep.js Normal file
View File

@ -0,0 +1,43 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs.importwizard.steps');
ns.AbstractImportStep = function (piskelController, importController, container) {
this.piskelController = piskelController;
this.container = container;
this.importController = importController;
this.mergeData = this.importController.mergeData;
};
ns.AbstractImportStep.prototype.init = function () {
this.nextButton = this.container.querySelector('.import-next-button');
this.backButton = this.container.querySelector('.import-back-button');
this.cancelButton = this.container.querySelector('.import-cancel-button');
this.addEventListener(this.nextButton, 'click', this.onNextClick);
this.addEventListener(this.cancelButton, 'click', this.onCancelClick);
this.addEventListener(this.backButton, 'click', this.onBackClick);
};
ns.AbstractImportStep.prototype.addEventListener = function (el, type, cb) {
pskl.utils.Event.addEventListener(el, type, cb, this);
};
ns.AbstractImportStep.prototype.destroy = function () {
pskl.utils.Event.removeAllEventListeners(this);
};
ns.AbstractImportStep.prototype.onCancelClick = function () {
this.importController.closeDialog();
};
ns.AbstractImportStep.prototype.onNextClick = function () {
this.importController.next(this);
};
ns.AbstractImportStep.prototype.onBackClick = function () {
this.importController.back(this);
};
ns.AbstractImportStep.prototype.onShow = Constants.EMPTY_FUNCTION;
})();

109
src/js/controller/dialogs/importwizard/steps/AdjustSize.js Normal file
View File

@ -0,0 +1,109 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs.importwizard.steps');
ns.AdjustSize = function (piskelController, importController, container) {
this.superclass.constructor.apply(this, arguments);
};
ns.AdjustSize.OPTIONS = {
KEEP: 'keep',
EXPAND: 'expand'
};
pskl.utils.inherit(ns.AdjustSize, ns.AbstractImportStep);
ns.AdjustSize.prototype.init = function () {
this.superclass.init.call(this);
// Create anchor widget
var anchorContainer = this.container.querySelector('.import-resize-anchor-container');
this.anchorWidget = new pskl.widgets.AnchorWidget(anchorContainer, this.onAnchorChange_.bind(this));
this.anchorWidget.setOrigin('TOPLEFT');
this.resizeInfoContainer = this.container.querySelector('.import-resize-info');
this.addEventListener(this.resizeInfoContainer, 'change', this.onResizeOptionChange_);
// By default, set the mode to expand to avoid losing any image content.
this.mergeData.resize = ns.AdjustSize.OPTIONS.EXPAND;
};
ns.AdjustSize.prototype.destroy = function () {
this.anchorWidget.destroy();
this.superclass.destroy.call(this);
};
ns.AdjustSize.prototype.onShow = function () {
this.refresh_();
};
ns.AdjustSize.prototype.refresh_ = function () {
var isBigger = this.isImportedPiskelBigger_();
var keep = this.mergeData.resize === ns.AdjustSize.OPTIONS.KEEP;
// Refresh resize partial
var size = this.formatPiskelSize_(this.piskelController.getPiskel());
var newSize = this.formatPiskelSize_(this.mergeData.mergePiskel);
var markup;
if (isBigger) {
markup = pskl.utils.Template.getAndReplace('import-resize-bigger-partial', {
size : size,
newSize : newSize,
keepChecked : keep ? 'checked="checked"' : '',
expandChecked : keep ? '' : 'checked="checked"'
});
} else {
markup = pskl.utils.Template.getAndReplace('import-resize-smaller-partial', {
size : size,
newSize : newSize
});
}
this.resizeInfoContainer.innerHTML = markup;
// Update anchor widget
if (this.mergeData.origin) {
this.anchorWidget.setOrigin(this.mergeData.origin);
}
// Update anchor widget info
var anchorInfo = this.container.querySelector('.import-resize-anchor-info');
if (isBigger && keep) {
anchorInfo.innerHTML = [
'<span class="import-resize-warning">',
'Imported content will be cropped!',
'</span>',
' ',
'Select crop origin'
].join('');
} else if (isBigger) {
anchorInfo.innerHTML = 'Select the anchor for resizing the canvas';
} else {
anchorInfo.innerHTML = 'Select where the import should be positioned';
}
};
ns.AdjustSize.prototype.onAnchorChange_ = function (origin) {
this.mergeData.origin = origin;
};
ns.AdjustSize.prototype.onResizeOptionChange_ = function () {
var value = this.resizeInfoContainer.querySelector(':checked').value;
if (this.mergeData.resize != value) {
this.mergeData.resize = value;
this.refresh_();
}
};
ns.AdjustSize.prototype.isImportedPiskelBigger_ = function () {
var piskel = this.mergeData.mergePiskel;
if (!piskel) {
return false;
}
return piskel.width > this.piskelController.getWidth() ||
piskel.height > this.piskelController.getHeight();
};
ns.AdjustSize.prototype.formatPiskelSize_ = function (piskel) {
return pskl.utils.StringUtils.formatSize(piskel.width, piskel.height);
};
})();

272
src/js/controller/dialogs/importwizard/steps/ImageImport.js Normal file
View File

@ -0,0 +1,272 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs.importwizard.steps');
ns.ImageImport = function (piskelController, importController, container) {
this.superclass.constructor.apply(this, arguments);
this.importedImage_ = null;
this.file_ = null;
};
pskl.utils.inherit(ns.ImageImport, ns.AbstractImportStep);
ns.ImageImport.prototype.init = function (file) {
this.superclass.init.call(this);
// This step is only used if rawFiles contains a single image.
this.file_ = this.mergeData.rawFiles[0];
this.importPreview = this.container.querySelector('.import-section-preview');
this.fileNameContainer = this.container.querySelector('.import-image-file-name');
this.singleImportType = this.container.querySelector('[name=import-type][value=single]');
this.sheetImportType = this.container.querySelector('[name=import-type][value=sheet]');
this.resizeWidth = this.container.querySelector('[name=resize-width]');
this.resizeHeight = this.container.querySelector('[name=resize-height]');
this.smoothResize = this.container.querySelector('[name=smooth-resize-checkbox]');
this.frameSizeX = this.container.querySelector('[name=frame-size-x]');
this.frameSizeY = this.container.querySelector('[name=frame-size-y]');
this.frameOffsetX = this.container.querySelector('[name=frame-offset-x]');
this.frameOffsetY = this.container.querySelector('[name=frame-offset-y]');
this.addEventListener(this.singleImportType, 'change', this.onImportTypeChange_);
this.addEventListener(this.sheetImportType, 'change', this.onImportTypeChange_);
this.addEventListener(this.resizeWidth, 'keyup', this.onResizeInputKeyUp_);
this.addEventListener(this.resizeHeight, 'keyup', this.onResizeInputKeyUp_);
this.addEventListener(this.frameSizeX, 'keyup', this.onFrameInputKeyUp_);
this.addEventListener(this.frameSizeY, 'keyup', this.onFrameInputKeyUp_);
this.addEventListener(this.frameOffsetX, 'keyup', this.onFrameInputKeyUp_);
this.addEventListener(this.frameOffsetY, 'keyup', this.onFrameInputKeyUp_);
pskl.utils.FileUtils.readImageFile(this.file_, this.onImageLoaded_.bind(this));
};
ns.ImageImport.prototype.onNextClick = function () {
this.container.classList.add('import-image-loading');
this.createPiskelFromImage().then(function (piskel) {
this.mergeData.mergePiskel = piskel;
this.superclass.onNextClick.call(this);
}.bind(this));
};
ns.ImageImport.prototype.onShow = function () {
this.container.classList.remove('import-image-loading');
};
ns.ImageImport.prototype.createPiskelFromImage = function () {
return new Promise(function (resolve, reject) {
pskl.app.importService.newPiskelFromImage(
this.importedImage_,
{
importType: this.getImportType_(),
frameSizeX: this.getImportType_() === 'single' ?
this.resizeWidth.value : this.sanitizeInputValue_(this.frameSizeX, 1),
frameSizeY: this.getImportType_() === 'single' ?
this.resizeHeight.value : this.sanitizeInputValue_(this.frameSizeY, 1),
frameOffsetX: this.sanitizeInputValue_(this.frameOffsetX, 0),
frameOffsetY: this.sanitizeInputValue_(this.frameOffsetY, 0),
smoothing: !!this.smoothResize.checked
},
resolve
);
}.bind(this));
};
ns.ImageImport.prototype.onImportTypeChange_ = function (evt) {
if (this.getImportType_() === 'single') {
// Using single image, so remove the frame grid
this.hideFrameGrid_();
} else {
// Using spritesheet import, so draw the frame grid in the preview
var x = this.sanitizeInputValue_(this.frameOffsetX, 0);
var y = this.sanitizeInputValue_(this.frameOffsetY, 0);
var w = this.sanitizeInputValue_(this.frameSizeX, 1);
var h = this.sanitizeInputValue_(this.frameSizeY, 1);
this.drawFrameGrid_(x, y, w, h);
}
};
ns.ImageImport.prototype.onResizeInputKeyUp_ = function (evt) {
var from = evt.target.getAttribute('name');
if (this.importedImage_) {
this.synchronizeResizeFields_(evt.target.value, from);
}
};
ns.ImageImport.prototype.onFrameInputKeyUp_ = function (evt) {
if (this.importedImage_) {
this.synchronizeFrameFields_(evt.target.value);
}
};
ns.ImageImport.prototype.synchronizeResizeFields_ = function (value, from) {
value = parseInt(value, 10);
if (isNaN(value)) {
value = 0;
}
var height = this.importedImage_.height;
var width = this.importedImage_.width;
// Select single image import type since the user changed a value here
this.singleImportType.checked = true;
if (from === 'resize-width') {
this.resizeHeight.value = Math.round(value * height / width);
} else {
this.resizeWidth.value = Math.round(value * width / height);
}
};
ns.ImageImport.prototype.synchronizeFrameFields_ = function (value) {
value = parseInt(value, 10);
if (isNaN(value)) {
value = 0;
}
// Parse the frame input values
var frameSizeX = this.sanitizeInputValue_(this.frameSizeX, 1);
var frameSizeY = this.sanitizeInputValue_(this.frameSizeY, 1);
var frameOffsetX = this.sanitizeInputValue_(this.frameOffsetX, 0);
var frameOffsetY = this.sanitizeInputValue_(this.frameOffsetY, 0);
// Select spritesheet import type since the user changed a value here
this.sheetImportType.checked = true;
// Draw the grid
this.drawFrameGrid_(frameOffsetX, frameOffsetY, frameSizeX, frameSizeY);
};
ns.ImageImport.prototype.sanitizeInputValue_ = function(input, minValue) {
var value = parseInt(input.value, 10);
if (value <= minValue || isNaN(value)) {
input.value = minValue;
value = minValue;
}
return value;
};
ns.ImageImport.prototype.getImportType_ = function () {
if (this.singleImportType.checked) {
return this.singleImportType.value;
} else if (this.sheetImportType.checked) {
return this.sheetImportType.value;
} else {
throw 'Could not find the currently selected import type';
}
};
ns.ImageImport.prototype.onImageLoaded_ = function (image) {
this.importedImage_ = image;
var w = this.importedImage_.width;
var h = this.importedImage_.height;
// FIXME : We remove the onload callback here because JsGif will insert
// the image again and we want to avoid retriggering the image onload
this.importedImage_.onload = function () {};
var fileName = this.extractFileNameFromPath_(this.file_.name);
this.fileNameContainer.textContent = fileName;
this.fileNameContainer.setAttribute('title', fileName);
this.resizeWidth.value = w;
this.resizeHeight.value = h;
this.frameSizeX.value = w;
this.frameSizeY.value = h;
this.frameOffsetX.value = 0;
this.frameOffsetY.value = 0;
this.importPreview.innerHTML = '';
this.importPreview.appendChild(this.createImagePreview_());
};
ns.ImageImport.prototype.createImagePreview_ = function () {
var image = document.createElement('IMG');
image.src = this.importedImage_.src;
return image;
};
ns.ImageImport.prototype.extractFileNameFromPath_ = function (path) {
var parts = [];
if (path.indexOf('/') !== -1) {
parts = path.split('/');
} else if (path.indexOf('\\') !== -1) {
parts = path.split('\\');
} else {
parts = [path];
}
return parts[parts.length - 1];
};
ns.ImageImport.prototype.drawFrameGrid_ = function (frameX, frameY, frameW, frameH) {
if (!this.importedImage_) {
return;
}
// Grab the sizes of the source and preview images
var width = this.importedImage_.width;
var height = this.importedImage_.height;
var image = this.importPreview.querySelector('img');
var previewWidth = image.offsetWidth;
var previewHeight = image.offsetHeight;
var canvas = this.importPreview.querySelector('canvas');
if (!canvas) {
// Create a new canvas for the grid
canvas = pskl.utils.CanvasUtils.createCanvas(
previewWidth + 1,
previewHeight + 1);
this.importPreview.appendChild(canvas);
}
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// Calculate the number of whole frames
var countX = Math.floor((width - frameX) / frameW);
var countY = Math.floor((height - frameY) / frameH);
if (countX > 0 && countY > 0) {
var scaleX = previewWidth / width;
var scaleY = previewHeight / height;
var maxWidth = countX * frameW + frameX;
var maxHeight = countY * frameH + frameY;
// Draw the vertical lines
for (var x = frameX + 0.5; x < maxWidth + 1 && x < width + 1; x += frameW) {
context.moveTo(x * scaleX, frameY * scaleY);
context.lineTo(x * scaleX, maxHeight * scaleY);
}
// Draw the horizontal lines
for (var y = frameY + 0.5; y < maxHeight + 1 && y < height + 1; y += frameH) {
context.moveTo(frameX * scaleX, y * scaleY);
context.lineTo(maxWidth * scaleX, y * scaleY);
}
// Set the line style to dashed
context.lineWidth = 1;
// context.setLineDash([2, 1]);
context.strokeStyle = 'gold';
context.stroke();
// Show the canvas
canvas.style.display = 'block';
} else {
this.hideFrameGrid_();
}
};
ns.ImageImport.prototype.hideFrameGrid_ = function() {
var canvas = this.importPreview.querySelector('canvas');
if (canvas) {
canvas.style.display = 'none';
}
};
})();

57
src/js/controller/dialogs/importwizard/steps/InsertLocation.js Normal file
View File

@ -0,0 +1,57 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs.importwizard.steps');
ns.InsertLocation = function () {
this.superclass.constructor.apply(this, arguments);
};
ns.InsertLocation.MODES = {
ADD : 'add',
INSERT : 'insert'
};
pskl.utils.inherit(ns.InsertLocation, ns.AbstractImportStep);
ns.InsertLocation.prototype.init = function () {
this.superclass.init.call(this);
this.framePreview = this.container.querySelector('.insert-frame-preview');
this.framePickerWidget = new pskl.widgets.FramePicker(
this.piskelController.getPiskel(), this.framePreview);
this.framePickerWidget.init();
var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
this.framePickerWidget.setFrameIndex(currentFrameIndex + 1);
this.framePickerWidget.setFirstFrameIndex(0);
this.insertModeContainer = this.container.querySelector('.insert-mode-container');
this.addEventListener(this.insertModeContainer, 'change', this.onInsertModeChange_);
this.mergeData.insertMode = ns.InsertLocation.MODES.ADD;
};
ns.InsertLocation.prototype.onInsertModeChange_ = function () {
var value = this.insertModeContainer.querySelector(':checked').value;
this.mergeData.insertMode = value;
if (this.mergeData.insertMode === ns.InsertLocation.MODES.ADD) {
this.framePickerWidget.setFirstFrameIndex(0);
} else {
this.framePickerWidget.setFirstFrameIndex(1);
}
};
ns.InsertLocation.prototype.onShow = function () {
var count = this.mergeData.mergePiskel.getFrameCount();
this.container.querySelector('.insert-frames-count').innerText = count;
};
ns.InsertLocation.prototype.onNextClick = function () {
var insertIndex = this.framePickerWidget.getFrameIndex();
this.mergeData.insertIndex = insertIndex;
this.superclass.onNextClick.call(this);
};
ns.InsertLocation.prototype.destroy = function () {
this.framePickerWidget.destroy();
this.superclass.destroy.call(this);
};
})();

89
src/js/controller/dialogs/importwizard/steps/SelectMode.js Normal file
View File

@ -0,0 +1,89 @@
(function () {
var ns = $.namespace('pskl.controller.dialogs.importwizard.steps');
ns.SelectMode = function (piskelController, importController, container) {
this.superclass.constructor.apply(this, arguments);
};
ns.SelectMode.MODES = {
NEW : 'new',
REPLACE : 'replace',
MERGE : 'merge'
};
pskl.utils.inherit(ns.SelectMode, ns.AbstractImportStep);
ns.SelectMode.prototype.init = function () {
this.superclass.init.call(this);
this.importMode = this.container.querySelector('.import-mode');
this.addEventListener(this.importMode, 'change', this.onImportModeChange_);
// Set the initial importMode value in the merge data.
this.mergeData.importMode = this.getSelectedMode_();
};
ns.SelectMode.prototype.onShow = function () {
this.refresh_();
};
ns.SelectMode.prototype.destroy = function () {
if (this.framePickerWidget) {
this.framePickerWidget.destroy();
}
this.superclass.destroy.call(this);
};
ns.SelectMode.prototype.refresh_ = function () {
var mergePiskel = this.mergeData.mergePiskel;
if (mergePiskel) {
this.updateMergeFilePreview_();
this.nextButton.removeAttribute('disabled');
} else {
this.nextButton.setAttribute('disabled', true);
}
if (this.mergeData.importMode === ns.SelectMode.MODES.MERGE) {
// If the user wants to merge with the existing content, there are more steps ahead.
this.nextButton.textContent = 'next';
} else {
// Otherwise this is the last step, update the button text.
this.nextButton.textContent = 'import';
}
};
ns.SelectMode.prototype.updateMergeFilePreview_ = function () {
var mergePiskel = this.mergeData.mergePiskel;
var previewFrame = pskl.utils.LayerUtils.mergeFrameAt(mergePiskel.getLayers(), 0);
var image = pskl.utils.FrameUtils.toImage(previewFrame);
if (!this.framePickerWidget) {
var framePickerContainer = this.container.querySelector('.import-preview');
this.framePickerWidget = new pskl.widgets.FramePicker(mergePiskel, framePickerContainer);
this.framePickerWidget.init();
} else if (this.framePickerWidget.piskel != mergePiskel) {
// If the piskel displayed by the frame picker is different from the previous one,
// refresh the widget.
this.framePickerWidget.piskel = mergePiskel;
this.framePickerWidget.setFrameIndex(1);
}
var metaHtml = pskl.utils.Template.getAndReplace('import-meta-content', {
name : mergePiskel.getDescriptor().name,
dimensions : pskl.utils.StringUtils.formatSize(mergePiskel.getWidth(), mergePiskel.getHeight()),
frames : mergePiskel.getFrameCount(),
layers : mergePiskel.getLayers().length
});
this.container.querySelector('.import-meta').innerHTML = metaHtml;
};
ns.SelectMode.prototype.onImportModeChange_ = function () {
this.mergeData.importMode = this.getSelectedMode_();
this.refresh_();
};
ns.SelectMode.prototype.getSelectedMode_ = function () {
return this.importMode.querySelector(':checked').value;
};
})();

3
src/js/controller/piskel/PiskelController.js
View File

@ -155,8 +155,7 @@
};
ns.PiskelController.prototype.getFrameCount = function () {
var layer = this.piskel.getLayerAt(0);
return layer.size();
return this.piskel.getFrameCount();
};
ns.PiskelController.prototype.setCurrentFrameIndex = function (index) {

51
src/js/controller/settings/ImportController.js
View File

@ -71,7 +71,7 @@
};
ns.ImportController.prototype.onBrowseLocalClick_ = function (evt) {
$.publish(Events.DIALOG_DISPLAY, {
$.publish(Events.DIALOG_SHOW, {
dialogId : 'browse-local'
});
this.closeDrawer_();
@ -79,40 +79,39 @@
ns.ImportController.prototype.openPiskelFile_ = function (file) {
if (this.isPiskel_(file)) {
pskl.utils.PiskelFileUtils.loadFromFile(file,
// onSuccess
function (piskel) {
pskl.app.piskelController.setPiskel(piskel);
},
// onError
function (reason) {
$.publish(Events.PISKEL_FILE_IMPORT_FAILED, [reason]);
});
$.publish(Events.DIALOG_SHOW, {
dialogId : 'import',
initArgs : {
rawFiles: [file]
}
});
this.closeDrawer_();
} else {
this.closeDrawer_();
console.error('The selected file is not a piskel file');
}
};
ns.ImportController.prototype.importPictureFromFile_ = function () {
var files = this.hiddenFileInput.files;
if (files.length == 1) {
var file = files[0];
if (this.isImage_(file)) {
$.publish(Events.DIALOG_DISPLAY, {
dialogId : 'import-image',
initArgs : file
});
this.closeDrawer_();
} else {
this.closeDrawer_();
console.error('File is not an image : ' + file.type);
}
// TODO : Simply filter and remove stuff
var areImages = Array.prototype.every.call(files, function (file) {
return file.type.indexOf('image') === 0;
});
if (areImages) {
$.publish(Events.DIALOG_SHOW, {
dialogId : 'import',
initArgs : {
rawFiles: files
}
});
this.closeDrawer_();
} else {
this.closeDrawer_();
console.error('Some files are not images');
}
};
ns.ImportController.prototype.isImage_ = function (file) {
return file.type.indexOf('image') === 0;
};
ns.ImportController.prototype.isPiskel_ = function (file) {
return (/\.piskel$/).test(file.name);
};

77
src/js/controller/settings/resize/ResizeController.js
View File

@ -6,8 +6,8 @@
this.container = document.querySelector('.resize-canvas');
var anchorWidgetContainer = this.container.querySelector('.resize-origin-container');
this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer);
var anchorWidgetContainer = this.container.querySelector('.resize-anchor-container');
this.anchorWidget = new pskl.widgets.AnchorWidget(anchorWidgetContainer);
this.defaultSizeController = new ns.DefaultSizeController(piskelController);
};
@ -28,7 +28,7 @@
});
var settings = pskl.UserSettings.get('RESIZE_SETTINGS');
var origin = ns.AnchorWidget.ORIGIN[settings.origin] || ns.AnchorWidget.ORIGIN.TOPLEFT;
var origin = pskl.widgets.AnchorWidget.ORIGIN[settings.origin] || 'TOPLEFT';
this.anchorWidget.setOrigin(origin);
if (settings.resizeContent) {
@ -61,27 +61,19 @@
ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
evt.preventDefault();
var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this));
var currentPiskel = this.piskelController.getPiskel();
var fps = this.piskelController.getFPS();
var piskel = pskl.model.Piskel.fromLayers(resizedLayers, fps, currentPiskel.getDescriptor());
// propagate savepath to new Piskel
piskel.savePath = currentPiskel.savePath;
var piskel = pskl.utils.ResizeUtils.resizePiskel(currentPiskel, {
width : parseInt(this.widthInput.value, 10),
height : parseInt(this.heightInput.value, 10),
origin: this.anchorWidget.getOrigin(),
resizeContent: this.resizeContentCheckbox.checked
});
pskl.app.piskelController.setPiskel(piskel, true);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
ns.ResizeController.prototype.resizeLayer_ = function (layer) {
var opacity = layer.getOpacity();
var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
var resizedLayer = pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
resizedLayer.setOpacity(opacity);
return resizedLayer;
};
ns.ResizeController.prototype.onResizeContentChange_ = function (evt) {
var target = evt.target;
if (target.checked) {
@ -107,55 +99,4 @@
maintainRatio : !!this.maintainRatioCheckbox.checked
});
};
/***********************/
/* RESIZE LOGIC */
/***********************/
ns.ResizeController.prototype.resizeFrame_ = function (frame) {
var width = parseInt(this.widthInput.value, 10);
var height = parseInt(this.heightInput.value, 10);
if (this.resizeContentCheckbox.checked) {
return pskl.utils.FrameUtils.resize(frame, width, height, false);
} else {
var resizedFrame = new pskl.model.Frame(width, height);
frame.forEachPixel(function (color, x, y) {
var translated = this.translateCoordinates_(x, y, frame, resizedFrame);
if (resizedFrame.containsPixel(translated.x, translated.y)) {
resizedFrame.setPixel(translated.x, translated.y, color);
}
}.bind(this));
return resizedFrame;
}
};
ns.ResizeController.prototype.translateCoordinates_ = function (x, y, frame, resizedFrame) {
return {
x : this.translateX_(x, frame.width, resizedFrame.width),
y : this.translateY_(y, frame.height, resizedFrame.height)
};
};
ns.ResizeController.prototype.translateX_ = function (x, width, resizedWidth) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('LEFT') != -1) {
return x;
} else if (origin.indexOf('RIGHT') != -1) {
return x - (width - resizedWidth);
} else {
return x - Math.round((width - resizedWidth) / 2);
}
};
ns.ResizeController.prototype.translateY_ = function (y, height, resizedHeight) {
var origin = this.anchorWidget.getOrigin();
if (origin.indexOf('TOP') != -1) {
return y;
} else if (origin.indexOf('BOTTOM') != -1) {
return y - (height - resizedHeight);
} else {
return y - Math.round((height - resizedHeight) / 2);
}
};
})();

4
src/js/model/Piskel.js
View File

@ -70,6 +70,10 @@
});
};
ns.Piskel.prototype.getFrameCount = function () {
return this.getLayerAt(0).size();
};
ns.Piskel.prototype.addLayer = function (layer) {
this.layers.push(layer);
};

18
src/js/service/FileDropperService.js
View File

@ -35,7 +35,13 @@
var isPiskel = /\.piskel$/i.test(file.name);
var isPalette = /\.(gpl|txt|pal)$/i.test(file.name);
if (isImage) {
this.readImageFile_(file);
$.publish(Events.DIALOG_SHOW, {
dialogId : 'import',
initArgs : {
rawFiles: [file]
}
});
// pskl.utils.FileUtils.readImageFile(file, this.onImageLoaded_.bind(this));
} else if (isPiskel) {
pskl.utils.PiskelFileUtils.loadFromFile(file, this.onPiskelFileLoaded_, this.onPiskelFileError_);
} else if (isPalette) {
@ -44,10 +50,6 @@
}
};
ns.FileDropperService.prototype.readImageFile_ = function (imageFile) {
pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
};
ns.FileDropperService.prototype.onPaletteLoaded_ = function (palette) {
pskl.app.paletteService.savePalette(palette);
pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, palette.id);
@ -63,12 +65,6 @@
$.publish(Events.PISKEL_FILE_IMPORT_FAILED, [reason]);
};
ns.FileDropperService.prototype.processImageSource_ = function (imageSource) {
var importedImage = new Image();
importedImage.onload = this.onImageLoaded_.bind(this, importedImage);
importedImage.src = imageSource;
};
ns.FileDropperService.prototype.onImageLoaded_ = function (importedImage) {
if (this.isMultipleFiles_) {
this.piskelController.addFrameAtCurrentIndex();

19
src/js/service/ImportService.js
View File

@ -45,6 +45,7 @@
var frameSizeY = options.frameSizeY;
var frameOffsetX = options.frameOffsetX;
var frameOffsetY = options.frameOffsetY;
var smoothing = options.smoothing;
var gifLoader = new window.SuperGif({
gif: image
@ -56,26 +57,28 @@
return pskl.utils.CanvasUtils.createFromImageData(frame.data);
});
var piskel;
if (importType === 'single' || images.length > 1) {
// Single image import or animated gif
this.createPiskelFromImages_(images, frameSizeX, frameSizeY, options.smoothing);
piskel = this.createPiskelFromImages_(images, frameSizeX, frameSizeY, smoothing);
} else {
// Spritesheet
var frameImages = this.createImagesFromSheet_(images[0], frameSizeX, frameSizeY, frameOffsetX, frameOffsetY);
this.createPiskelFromImages_(frameImages, frameSizeX, frameSizeY, options.smoothing);
piskel = this.createPiskelFromImages_(frameImages, frameSizeX, frameSizeY, smoothing);
}
onComplete();
onComplete(piskel);
}.bind(this),
error: function () {
var piskel;
if (importType === 'single') {
// Single image
this.createPiskelFromImages_([image], frameSizeX, frameSizeY, options.smoothing);
piskel = this.createPiskelFromImages_([image], frameSizeX, frameSizeY, smoothing);
} else {
// Spritesheet
var frameImages = this.createImagesFromSheet_(image, frameSizeX, frameSizeY, frameOffsetX, frameOffsetY);
this.createPiskelFromImages_(frameImages, frameSizeX, frameSizeY, options.smoothing);
piskel = this.createPiskelFromImages_(frameImages, frameSizeX, frameSizeY, smoothing);
}
onComplete();
onComplete(piskel);
}.bind(this)
});
};
@ -113,9 +116,7 @@
var frames = this.createFramesFromImages_(images, frameSizeX, frameSizeY, smoothing);
var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
var piskel = pskl.model.Piskel.fromLayers([layer], Constants.DEFAULT.FPS, descriptor);
this.piskelController_.setPiskel(piskel);
return pskl.model.Piskel.fromLayers([layer], Constants.DEFAULT.FPS, descriptor);
};
/**

1
src/js/service/keyboard/Shortcuts.js
View File

@ -60,6 +60,7 @@
FULL_PREVIEW : createShortcut('full-preview', 'Select full size preview', 'alt+3'),
ONION_SKIN : createShortcut('onion-skin', 'Toggle onion skin', 'alt+O'),
LAYER_PREVIEW : createShortcut('layer-preview', 'Toggle layer preview', 'alt+L'),
MERGE_ANIMATION : createShortcut('import-animation', 'Open merge animation popup', 'ctrl+shift+M'),
CLOSE_POPUP : createShortcut('close-popup', 'Close an opened popup', 'ESC')
},

85
src/js/utils/MergeUtils.js Normal file
View File

@ -0,0 +1,85 @@
(function () {
var ns = $.namespace('pskl.utils');
ns.MergeUtils = {
/**
* Merge two piskel instances in a new piskel instance
* @param {Piskel} piskel
* The original piskel (name and description will be preserved)
* @param {Piskel} importedPiskel
* The imported piskel
* @param {Object} options
* - index: {Number} index where the new frames should be appended
* - resize: {String} either "expand" or "keep"
* - origin: {String} can be any of the existing AnchorWidget origins.
* - addFrames: {Boolean} true if all the imported frames should be added as new frames.
*
* @return {Piskel} The new Piskel instance created
*/
merge : function (piskel, importedPiskel, options) {
// First make sure both the piskel and the imported piskel use the target dimensions.
if (options.resize === 'expand') {
piskel = pskl.utils.ResizeUtils.resizePiskel(piskel, {
width : importedPiskel.getWidth(),
height : importedPiskel.getHeight(),
origin : options.origin,
resizeContent: false
});
} else {
importedPiskel = pskl.utils.ResizeUtils.resizePiskel(importedPiskel, {
width : piskel.getWidth(),
height : piskel.getHeight(),
origin : options.origin,
resizeContent: false
});
}
var insertIndex = options.insertIndex;
if (options.insertMode === 'insert') {
// The index provided by the frame picker is 1-based.
// When adding new frames, this works out fine, but if we want to
// insert the new content in existing frames, we need to get the real
// 0-based index of the selected frame.
insertIndex = insertIndex - 1;
}
// Add necessary frames in the original piskel.
var importedFrameCount = importedPiskel.getFrameCount();
for (var i = 0 ; i < importedFrameCount ; i++) {
var index = i + insertIndex;
// For a given index, a new frame should be added either if we are using "add" insert mode
// or if the current index is not supported by the original piskel.
if (options.insertMode === 'add' || index >= piskel.getFrameCount()) {
ns.MergeUtils.addFrameToLayers_(piskel, index);
}
}
// Import the layers in the original piskel.
importedPiskel.getLayers().forEach(function (layer) {
var name = layer.getName() + ' (imported)';
var importedLayer = new pskl.model.Layer(name);
for (var i = 0 ; i < piskel.getFrameCount() ; i++) {
var importedIndex = i - insertIndex;
var frame = layer.getFrameAt(importedIndex);
if (!frame) {
frame = ns.MergeUtils.createEmptyFrame_(piskel);
}
importedLayer.addFrame(frame);
}
piskel.addLayer(importedLayer);
});
return piskel;
},
createEmptyFrame_ : function (piskel) {
return new pskl.model.Frame(piskel.getWidth(), piskel.getHeight());
},
addFrameToLayers_ : function (piskel, index) {
piskel.getLayers().forEach(function (l) {
l.addFrameAt(ns.MergeUtils.createEmptyFrame_(piskel), index);
});
}
};
})();

85
src/js/utils/ResizeUtils.js Normal file
View File

@ -0,0 +1,85 @@
(function () {
var ns = $.namespace('pskl.utils');
ns.ResizeUtils = {
/**
* Resize the provided piskel instance and return a new instance using the provided resize options
* @param {Piskel} piskel [description]
* @param {Object} options
* - width {Number} target width after the resize
* - height {Number} target height after the resize
* - resizeContent {Booleam} true of the sprite content should be resized
* - origin {String} should be a valid AnchorWidget origin
* @return {Piskel} The resized piskel
*/
resizePiskel : function (piskel, options) {
var fps = piskel.getFPS();
var resizedLayers = piskel.getLayers().map(function (layer) {
return ns.ResizeUtils.resizeLayer(layer, options);
});
var resizedPiskel = pskl.model.Piskel.fromLayers(resizedLayers, fps, piskel.getDescriptor());
// propagate savepath to new Piskel
resizedPiskel.savePath = piskel.savePath;
return resizedPiskel;
},
resizeLayer : function (layer, options) {
var opacity = layer.getOpacity();
var resizedFrames = layer.getFrames().map(function (frame) {
return ns.ResizeUtils.resizeFrame(frame, options);
});
var resizedLayer = pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
resizedLayer.setOpacity(opacity);
return resizedLayer;
},
resizeFrame : function (frame, options) {
var width = options.width;
var height = options.height;
var origin = options.origin;
if (options.resizeContent) {
return pskl.utils.FrameUtils.resize(frame, width, height, false);
} else {
var resizedFrame = new pskl.model.Frame(width, height);
frame.forEachPixel(function (color, x, y) {
var translated = ns.ResizeUtils.translateCoordinates(x, y, frame, resizedFrame, origin);
if (resizedFrame.containsPixel(translated.x, translated.y)) {
resizedFrame.setPixel(translated.x, translated.y, color);
}
});
return resizedFrame;
}
},
translateCoordinates : function (x, y, frame, resizedFrame, origin) {
return {
x : ns.ResizeUtils.translateX(x, frame.width, resizedFrame.width, origin),
y : ns.ResizeUtils.translateY(y, frame.height, resizedFrame.height, origin)
};
},
translateX : function (x, width, resizedWidth, origin) {
if (origin.indexOf('LEFT') != -1) {
return x;
} else if (origin.indexOf('RIGHT') != -1) {
return x - (width - resizedWidth);
} else {
return x - Math.round((width - resizedWidth) / 2);
}
},
translateY : function (y, height, resizedHeight, origin) {
if (origin.indexOf('TOP') != -1) {
return y;
} else if (origin.indexOf('BOTTOM') != -1) {
return y - (height - resizedHeight);
} else {
return y - Math.round((height - resizedHeight) / 2);
}
}
};
})();

4
src/js/utils/StringUtils.js
View File

@ -6,5 +6,9 @@
var padding = new Array(length).join(pad);
return (padding + input).slice(-length);
},
formatSize : function (width, height) {
return width + '\u00D7' + height;
}
};
})();

18
src/js/utils/Template.js
View File

@ -15,6 +15,15 @@
return templates[templateId];
},
getAsHTML : function (templateId) {
var template = ns.Template.get(templateId);
if (!template) {
return;
}
return ns.Template.createFromHTML(template);
},
createFromHTML : function (html) {
var dummyEl = ns.Template._getDummyEl();
dummyEl.innerHTML = html;
@ -50,6 +59,15 @@
return template;
},
getAndReplace : function (templateId, dict) {
var result = '';
var tpl = pskl.utils.Template.get(templateId);
if (tpl) {
result = pskl.utils.Template.replace(tpl, dict);
}
return result;
},
/**
* Sanitize the provided string to make it safer for using in templates.
*/

49
src/js/controller/settings/resize/AnchorWidget.js → src/js/widgets/AnchorWidget.js
View File

@ -1,12 +1,31 @@
(function () {
var ns = $.namespace('pskl.controller.settings.resize');
var ns = $.namespace('pskl.widgets');
var OPTION_CLASSNAME = 'resize-origin-option';
var OPTION_CLASSNAME = 'anchor-option';
// Maybe move to HTML ...
var WIDGET_TEMPLATE =
'<div class="anchor-option" title="top left" data-origin="TOPLEFT"></div>' +
'<div class="anchor-option" title="top" data-origin="TOP"></div>' +
'<div class="anchor-option" title="top right" data-origin="TOPRIGHT"></div>' +
'<div class="anchor-option" title="middle left" data-origin="MIDDLELEFT"></div>' +
'<div class="anchor-option" title="middle" data-origin="MIDDLE"></div>' +
'<div class="anchor-option" title="middle right" data-origin="MIDDLERIGHT"></div>' +
'<div class="anchor-option" title="bottom left" data-origin="BOTTOMLEFT"></div>' +
'<div class="anchor-option" title="bottom" data-origin="BOTTOM"></div>' +
'<div class="anchor-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>';
ns.AnchorWidget = function (container, onChangeCallback) {
this.onChangeCallback = onChangeCallback;
this.wrapper = document.createElement('div');
this.wrapper.classList.add('anchor-wrapper');
this.wrapper.innerHTML = WIDGET_TEMPLATE;
container.innerHTML = '';
container.appendChild(this.wrapper);
ns.AnchorWidget = function (container) {
this.container = container;
this.disabled = false;
pskl.utils.Event.addEventListener(this.container, 'click', this.onResizeOriginClick_, this);
pskl.utils.Event.addEventListener(this.wrapper, 'click', this.onResizeOriginClick_, this);
};
ns.AnchorWidget.ORIGIN = {
@ -23,7 +42,7 @@
ns.AnchorWidget.prototype.destroy = function (evt) {
pskl.utils.Event.removeAllEventListeners(this);
this.container = null;
this.wrapper = null;
};
ns.AnchorWidget.prototype.onResizeOriginClick_ = function (evt) {
@ -35,16 +54,20 @@
ns.AnchorWidget.prototype.setOrigin = function (origin) {
this.origin = origin;
var previous = document.querySelector('.' + OPTION_CLASSNAME + '.selected');
var previous = this.wrapper.querySelector('.' + OPTION_CLASSNAME + '.selected');
if (previous) {
previous.classList.remove('selected');
}
var selected = document.querySelector('.' + OPTION_CLASSNAME + '[data-origin="' + origin + '"]');
var selected = this.wrapper.querySelector('.' + OPTION_CLASSNAME + '[data-origin="' + origin + '"]');
if (selected) {
selected.classList.add('selected');
this.refreshNeighbors_(selected);
}
if (typeof this.onChangeCallback === 'function') {
this.onChangeCallback(origin);
}
};
ns.AnchorWidget.prototype.getOrigin = function () {
@ -53,18 +76,18 @@
ns.AnchorWidget.prototype.disable = function () {
this.disabled = true;
this.container.classList.add('transition');
this.container.classList.add('disabled');
this.wrapper.classList.add('transition');
this.wrapper.classList.add('disabled');
};
ns.AnchorWidget.prototype.enable = function () {
this.disabled = false;
this.container.classList.remove('disabled');
window.setTimeout(this.container.classList.remove.bind(this.container.classList, 'transition'), 250);
this.wrapper.classList.remove('disabled');
window.setTimeout(this.wrapper.classList.remove.bind(this.wrapper.classList, 'transition'), 250);
};
ns.AnchorWidget.prototype.refreshNeighbors_ = function (selected) {
var options = document.querySelectorAll('.' + OPTION_CLASSNAME);
var options = this.wrapper.querySelectorAll('.' + OPTION_CLASSNAME);
for (var i = 0 ; i < options.length ; i++) {
options[i].removeAttribute('data-neighbor');
}

6
src/js/widgets/ColorsList.js
View File

@ -17,7 +17,7 @@
items: '.create-palette-color'
});
this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
pskl.utils.Event.addEventListener(this.colorsList, 'click', this.onColorContainerClick_, this);
var colorPickerContainer = container.querySelector('.color-picker-container');
this.hslRgbColorPicker = new pskl.widgets.HslRgbColorPicker(colorPickerContainer, this.onColorUpdated_.bind(this));
@ -40,6 +40,10 @@
};
ns.ColorsList.prototype.destroy = function () {
pskl.utils.Event.removeAllEventListeners(this);
$(this.container).sortable('destroy');
this.hslRgbColorPicker.destroy();
this.container = null;
this.colorsList = null;

165
src/js/widgets/FramePicker.js Normal file
View File

@ -0,0 +1,165 @@
(function () {
var ns = $.namespace('pskl.widgets');
var WIDGET_MARKUP =
'<div class="frame-viewer"></div>' +
'<div class="frame-nav">' +
'<button class="button frame-nav-first">&lt;&lt;</button>' +
'<button class="button frame-nav-previous">&lt;</button>' +
'<input class="textfield frame-nav-input" type="text">' +
'<button class="button frame-nav-next">&gt;</button>' +
'<button class="button frame-nav-last">&gt;&gt;</button>' +
'</div>';
/**
* The frame picker widget displays a a simple UI to view the frames of a piskel.
* UI controls allow the user to browser through the frames
* @param {Piskel} piskel
* The piskel instance for which we want to preview frames.
* @param {Node} container
* Node in which the widget should be inserted.
*/
ns.FramePicker = function (piskel, container) {
this.piskel = piskel;
this.container = container;
this.firstFrameIndex = 1;
// Create internal wrapper that will contain the widget.
this.wrapper = document.createElement('div');
this.wrapper.innerHTML = WIDGET_MARKUP;
this.wrapper.classList.add('frame-picker-wrapper');
this.frameViewer = this.wrapper.querySelector('.frame-viewer');
this.firstButton = this.wrapper.querySelector('.frame-nav-first');
this.previousButton = this.wrapper.querySelector('.frame-nav-previous');
this.nextButton = this.wrapper.querySelector('.frame-nav-next');
this.lastButton = this.wrapper.querySelector('.frame-nav-last');
this.input = this.wrapper.querySelector('.frame-nav-input');
};
ns.FramePicker.prototype.init = function () {
// Add widget to its container
this.container.appendChild(this.wrapper);
// Attach event listeners
this.addEventListener(this.firstButton, 'click', this.onFirstClicked_);
this.addEventListener(this.previousButton, 'click', this.onPreviousClicked_);
this.addEventListener(this.nextButton, 'click', this.onNextClicked_);
this.addEventListener(this.lastButton, 'click', this.onLastClicked_);
this.addEventListener(this.input, 'change', this.onInputChange_);
// Select the first frame
this.setFrameIndex(1);
};
ns.FramePicker.prototype.setFirstFrameIndex = function (index) {
this.firstFrameIndex = index;
// Set the current frame index once again to normalize and update the UI if needed.
this.setFrameIndex(this.currentFrameIndex);
};
ns.FramePicker.prototype.destroy = function () {
this.container.removeChild(this.wrapper);
pskl.utils.Event.removeAllEventListeners(this);
};
ns.FramePicker.prototype.onFirstClicked_ = function () {
this.setFrameIndex(this.firstFrameIndex);
};
ns.FramePicker.prototype.onPreviousClicked_ = function () {
this.setFrameIndex(this.currentFrameIndex - 1);
};
ns.FramePicker.prototype.onNextClicked_ = function () {
this.setFrameIndex(this.currentFrameIndex + 1);
};
ns.FramePicker.prototype.onLastClicked_ = function () {
this.setFrameIndex(this.piskel.getFrameCount());
};
ns.FramePicker.prototype.onInputChange_ = function () {
var index = parseInt(this.input.value, 10);
if (isNaN(index)) {
this.input.value = 1;
return;
}
index = Math.max(this.firstFrameIndex, index);
index = Math.min(this.getFrameCount_(), index);
if (index !== this.currentFrameIndex) {
this.setFrameIndex(index);
}
};
ns.FramePicker.prototype.getFrameCount_ = function () {
return this.piskel.getLayerAt(0).getFrames().length;
};
ns.FramePicker.prototype.addEventListener = function (el, type, callback) {
pskl.utils.Event.addEventListener(el, type, callback, this);
};
ns.FramePicker.prototype.getFrameIndex = function () {
return this.currentFrameIndex;
};
ns.FramePicker.prototype.setFrameIndex = function (frameIndex) {
frameIndex = Math.max(this.firstFrameIndex, frameIndex);
frameIndex = Math.min(this.getFrameCount_(), frameIndex);
this.currentFrameIndex = frameIndex;
this.input.value = frameIndex;
var image = this.getFrameAsImage_(frameIndex);
image.classList.add('canvas-background');
this.frameViewer.innerHTML = '';
this.frameViewer.appendChild(image);
var frameCount = this.getFrameCount_();
this.setEnabled_(this.firstButton, frameIndex !== this.firstFrameIndex);
this.setEnabled_(this.previousButton, frameIndex !== this.firstFrameIndex);
this.setEnabled_(this.nextButton, frameIndex !== frameCount);
this.setEnabled_(this.lastButton, frameIndex !== frameCount);
if (frameIndex === 0) {
this.previousButton.setAttribute('disabled', true);
this.firstButton.setAttribute('disabled', true);
}
};
ns.FramePicker.prototype.getFrameAsImage_ = function (frameIndex) {
if (frameIndex === 0) {
return new Image();
}
var frame = pskl.utils.LayerUtils.mergeFrameAt(this.piskel.getLayers(), frameIndex - 1);
var zoom = this.getZoomLevel_();
return pskl.utils.FrameUtils.toImage(frame, zoom);
};
ns.FramePicker.prototype.getZoomLevel_ = function () {
var viewerWidth = this.frameViewer.offsetWidth;
var viewerHeight = this.frameViewer.offsetHeight;
var wZoom = viewerWidth / this.piskel.width;
var hZoom = viewerHeight / this.piskel.height;
return Math.min(hZoom, wZoom);
};
/**
* DOM helper to enable / disable as DOM element.
* @param {Node} el
* The element to enable / disable.
* @param {Boolean} enabled
* Should the element be disabled or enabled.
*/
ns.FramePicker.prototype.setEnabled_ = function (el, enabled) {
if (enabled) {
el.removeAttribute('disabled');
} else {
el.setAttribute('disabled', true);
}
};
})();

16
src/js/widgets/HslRgbColorPicker.js
View File

@ -17,9 +17,12 @@
var isChrome = pskl.utils.UserAgent.isChrome;
var changeEvent = (isChrome || isFirefox) ? 'input' : 'change';
this.container.addEventListener(changeEvent, this.onPickerChange_.bind(this));
this.container.addEventListener('keydown', this.onKeydown_.bind(this));
this.container.addEventListener('blur', this.onBlur_.bind(this), true);
pskl.utils.Event.addEventListener(this.container, changeEvent, this.onPickerChange_, this);
pskl.utils.Event.addEventListener(this.container, 'keydown', this.onPickerChange_, this);
// Cannot use pskl.utils.Event with useCapture for now ...
this.onBlur_ = this.onBlur_.bind(this);
this.container.addEventListener('blur', this.onBlur_, true);
this.spectrumEl = this.container.querySelector('.color-picker-spectrum');
@ -34,6 +37,13 @@
};
ns.HslRgbColorPicker.prototype.destroy = function () {
// Remove event listeners.
pskl.utils.Event.removeAllEventListeners(this);
this.container.removeEventListener('blur', this.onBlur_, true);
// Destroy spectrum widget.
$(this.spectrumEl).spectrum('destroy');
this.container = null;
this.spectrumEl = null;
};

107
src/js/widgets/Wizard.js Normal file
View File

@ -0,0 +1,107 @@
(function () {
var ns = $.namespace('pskl.widgets');
var TRANSITION_DURATION = 200;
/**
* Simple layout widget to display one step element (DOM Element) at a time.
* When switching to another step, the new step element will slide over the
* current step element. When going back to the previous step, the current
* step element will slide out from the container to reveal the previous one.
*
* @param {Object} steps map of step descriptions with the step name as the key.
* Each step description contains:
* - el {Element} the DOM Element corresponding to this step
* - name {String} the name of the step (redundant with the key)
* @param {Element} container the DOM Element in which the wizard should be
* displayed.
*/
ns.Wizard = function (steps, container) {
this.steps = steps;
this.container = container;
// Create internal wrapper that will contain the wizard steps.
this.wrapper = document.createElement('div');
this.wrapper.classList.add('wizard-wrapper');
this.currentStep = null;
this.previousSteps = [];
};
ns.Wizard.prototype.init = function () {
// Prepare all steps and add them in the wrapper.
Object.keys(this.steps).forEach(function (stepName) {
var step = this.steps[stepName];
step.el.classList.add('wizard-step');
this.wrapper.appendChild(step.el);
}.bind(this));
this.container.appendChild(this.wrapper);
};
ns.Wizard.prototype.getStep = function (stepName) {
return this.steps[stepName];
};
ns.Wizard.prototype.getCurrentStep = function () {
return this.currentStep;
};
/**
* Transition to the step cirresponding to the provided step name.
* Animation will be skipped if no current step is displayed.
*/
ns.Wizard.prototype.goTo = function (stepName) {
var step = this.steps[stepName];
if (!step) {
console.error('Wizard could not go to unknown step: ' + stepName);
return;
}
var previousStep = this.currentStep;
this.currentStep = step;
this.currentStep.instance.onShow();
if (previousStep) {
this.previousSteps.push(previousStep);
// Update classes to trigger animation.
this.currentStep.el.classList.add('current-step-in');
window.setTimeout(function () {
// Cleanup transition classes after animation.
this.currentStep.el.classList.remove('current-step-in');
previousStep.el.classList.remove('current-step');
this.currentStep.el.classList.add('current-step');
}.bind(this), TRANSITION_DURATION);
} else {
this.currentStep.el.classList.add('current-step');
}
};
/**
* Go back to the previous step displayed, if available.
*/
ns.Wizard.prototype.back = function () {
var previousStep = this.previousSteps.pop();
if (!previousStep) {
console.error('Wizard has no previous step to go to.');
return;
}
var backedStep = this.currentStep;
if (!backedStep) {
console.error('Wizard is in an invalid state');
}
this.currentStep = previousStep;
// Update classes to trigger animation.
backedStep.el.classList.add('current-step-out');
backedStep.el.classList.remove('current-step');
this.currentStep.el.classList.add('current-step');
window.setTimeout(function () {
// Cleanup transition classes after animation.
backedStep.el.classList.remove('current-step-out');
}.bind(this), TRANSITION_DURATION);
};
})();

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

@ -30,8 +30,10 @@
"js/utils/FrameUtils.js",
"js/utils/ImageResizer.js",
"js/utils/LayerUtils.js",
"js/utils/MergeUtils.js",
"js/utils/PixelUtils.js",
"js/utils/PiskelFileUtils.js",
"js/utils/ResizeUtils.js",
"js/utils/StringUtils.js",
"js/utils/Template.js",
"js/utils/TooltipFormatter.js",
@ -126,7 +128,6 @@
"js/controller/settings/exportimage/ZipExportController.js",
"js/controller/settings/exportimage/MiscExportController.js",
"js/controller/settings/exportimage/ExportController.js",
"js/controller/settings/resize/AnchorWidget.js",
"js/controller/settings/resize/ResizeController.js",
"js/controller/settings/resize/DefaultSizeController.js",
"js/controller/settings/SaveController.js",
@ -138,9 +139,14 @@
// Dialogs sub-controllers
"js/controller/dialogs/AbstractDialogController.js",
"js/controller/dialogs/CreatePaletteController.js",
"js/controller/dialogs/ImportImageController.js",
"js/controller/dialogs/BrowseLocalController.js",
"js/controller/dialogs/CheatsheetController.js",
"js/controller/dialogs/importwizard/steps/AbstractImportStep.js",
"js/controller/dialogs/importwizard/steps/AdjustSize.js",
"js/controller/dialogs/importwizard/steps/ImageImport.js",
"js/controller/dialogs/importwizard/steps/InsertLocation.js",
"js/controller/dialogs/importwizard/steps/SelectMode.js",
"js/controller/dialogs/importwizard/ImportWizard.js",
"js/controller/dialogs/PerformanceInfoController.js",
"js/controller/dialogs/UnsupportedBrowserController.js",
@ -148,10 +154,13 @@
"js/controller/dialogs/DialogsController.js",
// Widgets
"js/widgets/AnchorWidget.js",
"js/widgets/ColorsList.js",
"js/widgets/FramePicker.js",
"js/widgets/HslRgbColorPicker.js",
"js/widgets/SizeInput.js",
"js/widgets/SynchronizedInputs.js",
"js/widgets/Wizard.js",
// Services
"js/service/storage/StorageService.js",

7
src/piskel-style-list.js
View File

@ -22,7 +22,7 @@
"css/dialogs-browse-local.css",
"css/dialogs-cheatsheet.css",
"css/dialogs-create-palette.css",
"css/dialogs-import-image.css",
"css/dialogs-import.css",
"css/dialogs-performance-info.css",
"css/dialogs-unsupported-browser.css",
"css/notifications.css",
@ -36,5 +36,8 @@
"css/bootstrap/bootstrap.css",
"css/bootstrap/bootstrap-tooltip-custom.css",
"css/frames-list.css",
"css/minimap.css"
"css/minimap.css",
"css/widgets-anchor.css",
"css/widgets-frame-picker.css",
"css/widgets-wizard.css"
];

51
src/templates/dialogs/import-image.html
View File

@ -1,51 +0,0 @@
<script type="text/template" id="templates/dialogs/import-image.html">
<div class="dialog-wrapper">
<h3 class="dialog-head">
Import Image
<span class="dialog-close">X</span>
</h3>
<div class="dialog-import-body">
<form action="" method="POST" name="import-image-form">
<div class="import-section">
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
</div>
<div class="import-section">
<div class="import-section-preview-title">Preview :</div>
<div class="import-section-preview"></div>
</div>
<div class="import-section">
<label class="dialog-section-radio-label">
<input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
Import as single image
</label>
</div>
<div class="import-section import-subsection">
<span class="dialog-section-title">Resize to</span>
<input type="text" class="textfield import-size-field" name="resize-width"/>x
<input type="text" class="textfield import-size-field" name="resize-height"/>
</div>
<div class="import-section import-subsection">
<span class="import-section-title">Smooth resize</span>
<input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
</div>
<div class="import-section">
<label class="dialog-section-radio-label">
<input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
Import as spritesheet
</label>
</div>
<div class="import-section import-subsection">
<span class="dialog-section-title">Frame size</span>
<input type="text" class="textfield import-size-field" name="frame-size-x"/>x
<input type="text" class="textfield import-size-field" name="frame-size-y"/>
</div>
<div class="import-section import-subsection">
<span class="dialog-section-title">Offset</span>
<input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
<input type="text" class="textfield import-size-field" name="frame-offset-y"/>
</div>
<input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
</form>
</div>
</div>
</script>

198
src/templates/dialogs/import.html Normal file
View File

@ -0,0 +1,198 @@
<script type="text/template" id="templates/dialogs/import.html">
<div class="dialog-wrapper">
<h3 class="dialog-head">
Import and Merge
<span class="dialog-close">X</span>
</h3>
<div class="dialog-content import-wizard-container"></div>
</div>
</script>
<script type="text/template" id="import-image-import">
<div class="import-step-container">
<div>
<form action="" method="POST" name="import-image-form">
<div class="import-section">
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
</div>
<div class="import-section">
<div class="import-section-preview"></div>
</div>
<div class="import-section">
<label class="dialog-section-radio-label">
<input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
Import as single image
</label>
</div>
<div class="import-section import-subsection">
<span class="dialog-section-title">Resize to</span>
<input type="text" class="textfield import-size-field" name="resize-width"/>x
<input type="text" class="textfield import-size-field" name="resize-height"/>
</div>
<div class="import-section import-subsection">
<span class="import-section-title">Smooth resize</span>
<input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
</div>
<div class="import-section">
<label class="dialog-section-radio-label">
<input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
Import as spritesheet
</label>
</div>
<div class="import-section import-subsection">
<span class="dialog-section-title">Frame size</span>
<input type="text" class="textfield import-size-field" name="frame-size-x"/>x
<input type="text" class="textfield import-size-field" name="frame-size-y"/>
</div>
<div class="import-section import-subsection">
<span class="dialog-section-title">Offset</span>
<input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
<input type="text" class="textfield import-size-field" name="frame-offset-y"/>
</div>
</form>
</div>
<div class="import-step-buttons">
<button class="import-cancel-button button">cancel</button>
<button class="import-back-button button">back</button>
<button class="import-next-button button button-primary">next</button>
</div>
</div>
</script>
<script type="text/template" id="import-select-mode">
<div class="import-step-container">
<div class="import-mode-title">Preview the imported image</div>
<div class="import-info">
<div class="import-preview"></div>
<div class="import-meta"></div>
</div>
<div class="import-mode">
<div class="import-mode-title">How do you want to import the new content?</div>
<label class="import-mode-option">
<input type="radio" checked="checked" name="import-mode" id="select-mode-replace" value="replace"/>
<span>Replace your current sprite</span>
</label>
<!-- label class="import-mode-option">
<input type="radio" name="import-mode" id="select-mode-new" value="new"/>
<span>Create a new sprite</span>
</label -->
<label class="import-mode-option">
<input type="radio" name="import-mode" id="select-mode-import" value="merge"/>
<span>Merge with your existing sprite</span>
</label>
</div>
<div class="import-step-buttons">
<button class="import-cancel-button button">cancel</button>
<button class="import-back-button button">back</button>
<button class="import-next-button button button-primary">next</button>
</div>
</div>
</script>
<script type="text/template" id="import-meta-content">
<div class="import-meta-title">
<span class="import-meta-label">Imported content details</span>
</div>
<div class="import-name">
<span class="import-meta-label">Name</span>
<span class="import-meta-value" title={{name}}>{{name}}</span>
</div>
<div class="import-dimensions">
<span class="import-meta-label">Dimensions</span>
<span class="import-meta-value">{{dimensions}}</span>
</div>
<div class="import-frames">
<span class="import-meta-label">Frames</span>
<span class="import-meta-value">{{frames}}</span>
</div>
<div class="import-layers">
<span class="import-meta-label">Layers</span>
<span class="import-meta-value">{{layers}}</span>
</div>
</script>
<script type="text/template" id="import-adjust-size">
<div class="import-step-container">
<div class="import-resize-info"></div>
<div class="import-resize-anchor import-resize-section">
<div class="import-resize-anchor-info"></div>
<div class="import-resize-anchor-container"></div>
</div>
<div class="import-step-buttons">
<button class="import-cancel-button button">cancel</button>
<button class="import-back-button button">back</button>
<button class="import-next-button button button-primary">next</button>
</div>
</div>
</script>
<script type="text/template" id="import-resize-bigger-partial">
<div class="import-resize-bigger">
<div class="import-resize-section">
The imported image is bigger than the current sprite.
</div>
<div class="import-resize-section">
<div class="import-resize-option-label">
How do you want to proceed?
</div>
<label class="import-resize-option">
<input type="radio" name="resize-mode" id="resize-option-expand" value="expand" {{expandChecked}}/>
<span>Expand canvas to {{newSize}}</span>
</label>
<label class="import-resize-option">
<input type="radio" name="resize-mode" id="resize-option-keep" value="keep" {{keepChecked}}/>
<span>Keep canvas size at {{size}}</span>
</label>
</div>
</div>
</script>
<script type="text/template" id="import-resize-smaller-partial">
<div class="import-resize-smaller">
<div class="import-resize-section">
The image being imported is smaller ({{newSize}}) than the canvas size ({{size}}).
</div>
</div>
</script>
<script type="text/template" id="import-insert-location">
<div class="import-step-container">
<div class="insert-mode-container">
<div class="insert-mode-option-label">
The imported animation contains <span class="insert-frames-count">X</span> frames.
Select how the new frames should be inserted:
</div>
<label class="insert-mode-option">
<input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/>
<span>Add new frames</span>
</label>
<label class="insert-mode-option">
<input type="radio" name="insert-mode" id="insert-mode-insert" value="insert"/>
<span>Insert in existing frames</span>
</label>
</div>
<div>Select the frame from which the new content will be added</div>
<div class="insert-frame-container">
<div class="insert-frame-preview"></div>
<div class="insert-frame-meta"></div>
</div>
<div class="import-step-buttons">
<button class="import-cancel-button button">cancel</button>
<button class="import-back-button button">back</button>
<button class="import-next-button button button-primary">import</button>
</div>
</div>
</script>
<script type="text/template" id="import-invalid-file">
<div class="import-step-container">
<div>THIS IS AN INVALID FILEZ</div>
<div class="import-step-buttons">
<button class="import-cancel-button button">cancel</button>
<button class="import-back-button button">back</button>
<button class="import-next-button button button-primary">next</button>
</div>
</div>
</script>

12
src/templates/settings/resize.html
View File

@ -30,17 +30,7 @@
</div>
<div class="resize-section">
<span class="resize-section-title">Anchor</span>
<div class="resize-origin-container">
<div class="resize-origin-option" title="top left" data-origin="TOPLEFT"></div>
<div class="resize-origin-option" title="top" data-origin="TOP"></div>
<div class="resize-origin-option" title="top right" data-origin="TOPRIGHT"></div>
<div class="resize-origin-option" title="middle left" data-origin="MIDDLELEFT"></div>
<div class="resize-origin-option" title="middle" data-origin="MIDDLE"></div>
<div class="resize-origin-option" title="middle right" data-origin="MIDDLERIGHT"></div>
<div class="resize-origin-option" title="bottom left" data-origin="BOTTOMLEFT"></div>
<div class="resize-origin-option" title="bottom" data-origin="BOTTOM"></div>
<div class="resize-origin-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>
</div>
<div class="resize-anchor-container"></div>
</div>
<input type="submit" class="button button-primary resize-button" value="Resize" />
</form>

6
test/casperjs/integration/settings/test-resize-content-complete.js
View File

@ -38,11 +38,11 @@ casper.test.begin('Test resize content works, and check the output', 18, functio
test.assertExists('.resize-content-checkbox', 'Check if resize ratio checkbox is available');
test.assert(!isChecked('.resize-content-checkbox'), 'Keep content checkbox is unchecked');
test.assertExists('.resize-origin-container:not(.disabled)', 'Check the resize origin widget is currently disabled');
test.assertExists('.anchor-wrapper:not(.disabled)', 'Check the resize anchor widget is currently disabled');
casper.click('.resize-content-checkbox');
// Enabling "Resize content" will disabled the resize origin widget.
casper.waitForSelector('.resize-origin-container.disabled', onResizeOriginDisabled, test.timeout, 10000);
// Enabling "Resize content" will disabled the resize anchor widget.
casper.waitForSelector('.anchor-wrapper.disabled', onResizeOriginDisabled, test.timeout, 10000);
}
function onResizeOriginDisabled() {

2
test/casperjs/integration/settings/test-resize-origin.js
View File

@ -46,7 +46,7 @@ casper.test.begin('Test resize feature works, and check the output', 20, functio
test.assert(!isChecked('.resize-content-checkbox'), 'Keep content checkbox is unchecked');
// Check that the default origin selected is top left.
var selectedOrigin = evalLine('document.querySelector(".resize-origin-option.selected").getAttribute("data-origin")');
var selectedOrigin = evalLine('document.querySelector(".anchor-option.selected").getAttribute("data-origin")');
test.assertEquals(selectedOrigin, 'TOPLEFT');
// Change the origin to bottom right.