mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
persist preview UI during import wizard
This commit is contained in:
juliandescottes
Julian Descottes
parent
78bbc71e6c
commit
a68dccfce0
40
src/css/dialogs-import.css
vendored
40
src/css/dialogs-import.css
vendored
|
|
@ -13,14 +13,18 @@
|
|||
}
|
||||
|
||||
.import-step-container {
|
||||
display: flex;
|
||||
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-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.import-step-buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
|
@ -36,6 +40,10 @@
|
|||
* IMAGE IMPORT STEP
|
||||
*/
|
||||
|
||||
.import-image-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.import-image-loading {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
|
|
@ -148,6 +156,14 @@
|
|||
|
||||
.import-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
max-width: 178px;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 10px;
|
||||
border-right: 3px solid gold;
|
||||
}
|
||||
|
||||
.import-preview canvas {
|
||||
|
|
@ -156,8 +172,7 @@
|
|||
}
|
||||
|
||||
.import-meta {
|
||||
width: 50%;
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
/*center meta information horizontally*/
|
||||
|
|
@ -203,10 +218,6 @@
|
|||
color: #aaa;
|
||||
}
|
||||
|
||||
.import-mode {
|
||||
margin: 15px 0 20px 0;
|
||||
}
|
||||
|
||||
.import-mode-title {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
|
@ -228,10 +239,6 @@
|
|||
/**
|
||||
* ADJUST SIZE
|
||||
*/
|
||||
.import-resize-info {
|
||||
margin: 10px 0 20px 0;
|
||||
}
|
||||
|
||||
.import-resize-anchor-info,
|
||||
.import-resize-option-label,
|
||||
.insert-mode-option-label {
|
||||
|
|
@ -242,6 +249,10 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.import-resize-anchor {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.import-resize-option :checked + span {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
|
@ -255,9 +266,14 @@
|
|||
*/
|
||||
|
||||
.insert-mode-container {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.insert-frame-container {
|
||||
.insert-frame-preview {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.insert-frame-preview .frame-picker-wrapper {
|
||||
height: 120px;
|
||||
}
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
if (this.hasSingleImage_()) {
|
||||
this.wizard.goTo('IMAGE_IMPORT');
|
||||
} else if (this.hasSinglePiskelFile_()) {
|
||||
// If a piskel file was provided we can directly go to
|
||||
pskl.utils.PiskelFileUtils.loadFromFile(this.mergeData.rawFiles[0],
|
||||
// onSuccess
|
||||
function (piskel) {
|
||||
|
|
@ -70,12 +71,12 @@
|
|||
}
|
||||
};
|
||||
|
||||
ns.ImportWizard.prototype.back = function (stepInstance) {
|
||||
ns.ImportWizard.prototype.back = function () {
|
||||
this.wizard.back();
|
||||
this.wizard.getCurrentStep().instance.onShow();
|
||||
};
|
||||
|
||||
ns.ImportWizard.prototype.next = function (stepInstance) {
|
||||
ns.ImportWizard.prototype.next = function () {
|
||||
var step = this.wizard.getCurrentStep();
|
||||
|
||||
if (step.name === 'IMAGE_IMPORT') {
|
||||
|
|
@ -149,11 +150,7 @@
|
|||
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,
|
||||
|
|
|
|||
|
|
@ -38,6 +38,30 @@
|
|||
this.importController.back(this);
|
||||
};
|
||||
|
||||
ns.AbstractImportStep.prototype.onShow = Constants.EMPTY_FUNCTION;
|
||||
ns.AbstractImportStep.prototype.onShow = function () {
|
||||
var mergePiskel = this.mergeData.mergePiskel;
|
||||
if (!mergePiskel) {
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
|
||||
ns.AdjustSize.prototype.onShow = function () {
|
||||
this.refresh_();
|
||||
this.superclass.onShow.call(this);
|
||||
};
|
||||
|
||||
ns.AdjustSize.prototype.refresh_ = function () {
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
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.currentPiskelFramePickerWidget = new pskl.widgets.FramePicker(
|
||||
this.piskelController.getPiskel(), this.framePreview);
|
||||
this.framePickerWidget.init();
|
||||
this.currentPiskelFramePickerWidget.init();
|
||||
|
||||
var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
|
||||
this.framePickerWidget.setFrameIndex(currentFrameIndex + 1);
|
||||
this.framePickerWidget.setFirstFrameIndex(0);
|
||||
this.currentPiskelFramePickerWidget.setFrameIndex(currentFrameIndex + 1);
|
||||
this.currentPiskelFramePickerWidget.setFirstFrameIndex(0);
|
||||
|
||||
this.insertModeContainer = this.container.querySelector('.insert-mode-container');
|
||||
this.addEventListener(this.insertModeContainer, 'change', this.onInsertModeChange_);
|
||||
|
|
@ -33,25 +33,25 @@
|
|||
this.mergeData.insertMode = value;
|
||||
|
||||
if (this.mergeData.insertMode === ns.InsertLocation.MODES.ADD) {
|
||||
this.framePickerWidget.setFirstFrameIndex(0);
|
||||
this.currentPiskelFramePickerWidget.setFirstFrameIndex(0);
|
||||
} else {
|
||||
this.framePickerWidget.setFirstFrameIndex(1);
|
||||
this.currentPiskelFramePickerWidget.setFirstFrameIndex(1);
|
||||
}
|
||||
};
|
||||
|
||||
ns.InsertLocation.prototype.onShow = function () {
|
||||
var count = this.mergeData.mergePiskel.getFrameCount();
|
||||
this.container.querySelector('.insert-frames-count').innerText = count;
|
||||
// Nothing to do here!
|
||||
this.superclass.onShow.call(this);
|
||||
};
|
||||
|
||||
ns.InsertLocation.prototype.onNextClick = function () {
|
||||
var insertIndex = this.framePickerWidget.getFrameIndex();
|
||||
var insertIndex = this.currentPiskelFramePickerWidget.getFrameIndex();
|
||||
this.mergeData.insertIndex = insertIndex;
|
||||
this.superclass.onNextClick.call(this);
|
||||
};
|
||||
|
||||
ns.InsertLocation.prototype.destroy = function () {
|
||||
this.framePickerWidget.destroy();
|
||||
this.currentPiskelFramePickerWidget.destroy();
|
||||
this.superclass.destroy.call(this);
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
};
|
||||
|
||||
ns.SelectMode.MODES = {
|
||||
NEW : 'new',
|
||||
REPLACE : 'replace',
|
||||
MERGE : 'merge'
|
||||
};
|
||||
|
|
@ -25,6 +24,7 @@
|
|||
|
||||
ns.SelectMode.prototype.onShow = function () {
|
||||
this.refresh_();
|
||||
this.superclass.onShow.call(this);
|
||||
};
|
||||
|
||||
ns.SelectMode.prototype.destroy = function () {
|
||||
|
|
@ -37,7 +37,6 @@
|
|||
ns.SelectMode.prototype.refresh_ = function () {
|
||||
var mergePiskel = this.mergeData.mergePiskel;
|
||||
if (mergePiskel) {
|
||||
this.updateMergeFilePreview_();
|
||||
this.nextButton.removeAttribute('disabled');
|
||||
} else {
|
||||
this.nextButton.setAttribute('disabled', true);
|
||||
|
|
@ -52,32 +51,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
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_();
|
||||
|
|
|
|||
|
|
@ -9,48 +9,46 @@
|
|||
</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-container import-image-container">
|
||||
<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 class="import-step-buttons">
|
||||
<button class="import-cancel-button button">cancel</button>
|
||||
<button class="import-back-button button">back</button>
|
||||
|
|
@ -61,40 +59,34 @@
|
|||
|
||||
<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-content">
|
||||
<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-import" value="merge"/>
|
||||
<span>Merge with your current 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 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>
|
||||
</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>
|
||||
|
|
@ -115,15 +107,23 @@
|
|||
|
||||
<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 class="import-info">
|
||||
<div class="import-preview"></div>
|
||||
<div class="import-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">next</button>
|
||||
|
||||
<div class="import-step-content">
|
||||
<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>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -159,29 +159,32 @@
|
|||
|
||||
<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 class="import-info">
|
||||
<div class="import-preview"></div>
|
||||
<div class="import-meta"></div>
|
||||
</div>
|
||||
<div>Select the frame from which the new content will be added</div>
|
||||
<div class="insert-frame-container">
|
||||
|
||||
<div class="import-step-content">
|
||||
<div>Select a frame in your current sprite:</div>
|
||||
<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 class="insert-mode-container">
|
||||
<div class="insert-mode-option-label">
|
||||
How should the imported frames 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 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>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user