added loading over + fixed bug with highlighted pixel removal
This commit is contained in:
parent
4056142b97
commit
fbdf1aaf9a
5 changed files with 36 additions and 14 deletions
13
index.html
13
index.html
|
@ -9,6 +9,19 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div
|
||||||
|
id="loading-mask"
|
||||||
|
style="
|
||||||
|
position:fixed;
|
||||||
|
top:0;right:0;bottom:0;left:0;
|
||||||
|
background:black;
|
||||||
|
opacity:1;
|
||||||
|
text-align:center;
|
||||||
|
z-index : 20000;
|
||||||
|
transition:opacity 0.5s;
|
||||||
|
color:white;">
|
||||||
|
<span style="top:45%">Loading pixels ...</span>
|
||||||
|
</div>
|
||||||
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
||||||
<div class="piskel-name-container">
|
<div class="piskel-name-container">
|
||||||
<input readonly id="piskel-name" type="text" value=""/>
|
<input readonly id="piskel-name" type="text" value=""/>
|
||||||
|
|
|
@ -32,9 +32,11 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
|
ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
|
||||||
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
|
if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
|
||||||
this.highlightedPixelRow = null;
|
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
|
||||||
this.highlightedPixelCol = null;
|
this.highlightedPixelRow = null;
|
||||||
|
this.highlightedPixelCol = null;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -70,6 +70,9 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.BaseSelect.prototype.hideHighlightedPixel = function () {
|
||||||
|
// not implemented for selection tools
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
|
* If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
this.isRunning = false;
|
this.isRunning = false;
|
||||||
this.previousTime = 0;
|
this.previousTime = 0;
|
||||||
this.callbacks = [];
|
this.callbacks = [];
|
||||||
this.i = 0;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
|
ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
|
||||||
|
@ -34,10 +33,7 @@
|
||||||
ns.DrawingLoop.prototype.loop_ = function () {
|
ns.DrawingLoop.prototype.loop_ = function () {
|
||||||
var currentTime = Date.now();
|
var currentTime = Date.now();
|
||||||
var delta = currentTime - this.previousTime;
|
var delta = currentTime - this.previousTime;
|
||||||
this.i++;
|
this.executeCallbacks_(delta);
|
||||||
if(this.i%2 === 0) {
|
|
||||||
this.executeCallbacks_(delta);
|
|
||||||
}
|
|
||||||
this.previousTime = currentTime;
|
this.previousTime = currentTime;
|
||||||
this.requestAnimationFrame.call(window, this.loop_.bind(this));
|
this.requestAnimationFrame.call(window, this.loop_.bind(this));
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,4 +1,16 @@
|
||||||
(function () {
|
(function () {
|
||||||
|
|
||||||
|
window.onPiskelReady = function () {
|
||||||
|
var loadingMask = document.getElementById('loading-mask');
|
||||||
|
loadingMask.style.opacity = 0;
|
||||||
|
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600)
|
||||||
|
pskl.app.init();
|
||||||
|
// cleanup
|
||||||
|
delete window.exports;
|
||||||
|
delete window.loadDebugScripts;
|
||||||
|
delete window.done;
|
||||||
|
};
|
||||||
|
|
||||||
var prefixPath = function (path) {
|
var prefixPath = function (path) {
|
||||||
if (window.pskl && window.pskl.appEngineToken_) {
|
if (window.pskl && window.pskl.appEngineToken_) {
|
||||||
return '../' + path;
|
return '../' + path;
|
||||||
|
@ -29,11 +41,7 @@
|
||||||
var scriptIndex = 0;
|
var scriptIndex = 0;
|
||||||
window.loadNextScript = function () {
|
window.loadNextScript = function () {
|
||||||
if (scriptIndex == window.exports.scripts.length) {
|
if (scriptIndex == window.exports.scripts.length) {
|
||||||
pskl.app.init();
|
window.onPiskelReady();
|
||||||
// cleanup
|
|
||||||
delete window.exports;
|
|
||||||
delete window.loadDebugScripts;
|
|
||||||
delete window.done;
|
|
||||||
} else {
|
} else {
|
||||||
loadScript(window.exports.scripts[scriptIndex], "loadNextScript()");
|
loadScript(window.exports.scripts[scriptIndex], "loadNextScript()");
|
||||||
scriptIndex ++;
|
scriptIndex ++;
|
||||||
|
@ -60,7 +68,7 @@
|
||||||
var loaderInterval = window.setInterval(function () {
|
var loaderInterval = window.setInterval(function () {
|
||||||
if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
|
if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
|
||||||
window.clearInterval(loaderInterval);
|
window.clearInterval(loaderInterval);
|
||||||
loadScript(script, "pskl.app.init()");
|
loadScript(script, "onPiskelReady()");
|
||||||
} else {
|
} else {
|
||||||
console.log("waiting for templates to load ....");
|
console.log("waiting for templates to load ....");
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue