mirror of
https://github.com/scratchfoundation/scratchjr.git
synced 2024-11-25 08:38:30 -05:00
PaintUndo.js module
This commit is contained in:
Tim Mickel
parent
4361198487
commit
eae6c944f0
1 changed files with 140 additions and 133 deletions
|
|
@ -1,149 +1,156 @@
|
||||||
|
import ScratchJr from '../editor/ScratchJr';
|
||||||
|
import Path from './Path';
|
||||||
|
import Paint from './Paint';
|
||||||
|
import Camera from './Camera';
|
||||||
|
import SVGTools from './SVGTools';
|
||||||
|
import {newHTML, gn, isTablet} from '../utils/lib';
|
||||||
|
import ScratchAudio from '../utils/ScratchAudio';
|
||||||
//////////////////////////////////
|
//////////////////////////////////
|
||||||
// Undo / Redo Functions
|
// Undo / Redo Functions
|
||||||
//////////////////////////////////
|
//////////////////////////////////
|
||||||
var PaintUndo = function () {};
|
|
||||||
|
|
||||||
PaintUndo.buffer = [];
|
export let buffer = [];
|
||||||
PaintUndo.index = 0;
|
export let index = 0;
|
||||||
|
|
||||||
////////////////////////////////////////
|
export default class PaintUndo {
|
||||||
// Undo Controls Setup
|
////////////////////////////////////////
|
||||||
///////////////////////////////////////
|
// Undo Controls Setup
|
||||||
|
///////////////////////////////////////
|
||||||
PaintUndo.setup = function (p) {
|
static setup (p) {
|
||||||
var div = newHTML('div', 'paintundo', p);
|
var div = newHTML('div', 'paintundo', p);
|
||||||
div.setAttribute('id', 'paintundocontrols');
|
div.setAttribute('id', 'paintundocontrols');
|
||||||
var lib = [['undo', PaintUndo.undo], ['redo', PaintUndo.redo]];
|
var lib = [['undo', PaintUndo.undo], ['redo', PaintUndo.redo]];
|
||||||
var dx = 20;
|
var dx = 20;
|
||||||
for (var i = 0; i < lib.length; i++) {
|
for (var i = 0; i < lib.length; i++) {
|
||||||
var bt = PaintUndo.newToggleClicky(div, 'id_p', lib[i][0], lib[i][1]);
|
var bt = PaintUndo.newToggleClicky(div, 'id_p', lib[i][0], lib[i][1]);
|
||||||
dx += bt.offsetWidth;
|
dx += bt.offsetWidth;
|
||||||
dx += 20;
|
dx += 20;
|
||||||
}
|
|
||||||
PaintUndo.updateActiveUndo();
|
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.newToggleClicky = function (p, prefix, key, fcn) {
|
|
||||||
var button = newHTML('div', 'undocircle', p);
|
|
||||||
newHTML('div', key + ' off', button);
|
|
||||||
button.setAttribute('type', 'toggleclicky');
|
|
||||||
button.setAttribute('id', prefix + key);
|
|
||||||
if (fcn) {
|
|
||||||
if (isTablet) {
|
|
||||||
button.ontouchstart = function (evt) {
|
|
||||||
fcn(evt);
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
button.onmousedown = function (evt) {
|
|
||||||
fcn(evt);
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
return button;
|
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.runUndo = function () {
|
|
||||||
Path.quitEditMode();
|
|
||||||
Paint.root.removeChild(gn('layer1'));
|
|
||||||
Paint.root.appendChild(SVGTools.toObject(PaintUndo.buffer[PaintUndo.index]));
|
|
||||||
Paint.root.appendChild(gn('draglayer'));
|
|
||||||
Paint.root.appendChild(gn('paintgrid'));
|
|
||||||
Paint.setZoomTo(Paint.currentZoom);
|
|
||||||
};
|
|
||||||
|
|
||||||
// you record before introducing a change
|
|
||||||
PaintUndo.record = function (dontStartStories) {
|
|
||||||
if ((PaintUndo.index + 1) <= PaintUndo.buffer.length) {
|
|
||||||
PaintUndo.buffer.splice(PaintUndo.index + 1, PaintUndo.buffer.length);
|
|
||||||
}
|
|
||||||
PaintUndo.buffer.push(PaintUndo.getCanvas());
|
|
||||||
PaintUndo.index++;
|
|
||||||
if (gn('id_pundo')) {
|
|
||||||
PaintUndo.updateActiveUndo();
|
PaintUndo.updateActiveUndo();
|
||||||
}
|
}
|
||||||
if (!dontStartStories) {
|
|
||||||
ScratchJr.storyStart('PaintUndo.record'); // Record a change for sample projects in story-starter mode
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.getCanvas = function () {
|
static newToggleClicky (p, prefix, key, fcn) {
|
||||||
return SVGTools.svg2string(gn('layer1'));
|
var button = newHTML('div', 'undocircle', p);
|
||||||
};
|
newHTML('div', key + ' off', button);
|
||||||
|
button.setAttribute('type', 'toggleclicky');
|
||||||
//////////////////////////////////
|
button.setAttribute('id', prefix + key);
|
||||||
// Control buttons callbacks
|
if (fcn) {
|
||||||
//////////////////////////////////
|
if (isTablet) {
|
||||||
|
button.ontouchstart = function (evt) {
|
||||||
PaintUndo.undo = function (e) {
|
fcn(evt);
|
||||||
if (e.touches && (e.touches.length > 1)) {
|
};
|
||||||
return;
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (Camera.active) {
|
|
||||||
Camera.doAction('undo');
|
|
||||||
}
|
|
||||||
while (PaintUndo.index >= PaintUndo.buffer.length) {
|
|
||||||
PaintUndo.index--;
|
|
||||||
}
|
|
||||||
PaintUndo.index--;
|
|
||||||
var snd = (PaintUndo.index < 0) ? 'boing.wav' : 'tap.wav';
|
|
||||||
ScratchAudio.sndFX(snd);
|
|
||||||
if (PaintUndo.index < 0) {
|
|
||||||
PaintUndo.index = 0;
|
|
||||||
} else {
|
|
||||||
PaintUndo.runUndo();
|
|
||||||
}
|
|
||||||
PaintUndo.updateActiveUndo();
|
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.redo = function (e) {
|
|
||||||
if (e.touches && (e.touches.length > 1)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (Camera.active) {
|
|
||||||
Camera.doAction('undo');
|
|
||||||
}
|
|
||||||
PaintUndo.index++;
|
|
||||||
var snd = (PaintUndo.index > PaintUndo.buffer.length - 1) ? 'boing.wav' : 'tap.wav';
|
|
||||||
ScratchAudio.sndFX(snd);
|
|
||||||
if (PaintUndo.index > PaintUndo.buffer.length - 1) {
|
|
||||||
PaintUndo.index = PaintUndo.buffer.length - 1;
|
|
||||||
} else {
|
|
||||||
PaintUndo.runUndo();
|
|
||||||
}
|
|
||||||
PaintUndo.updateActiveUndo();
|
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.updateActiveUndo = function () {
|
|
||||||
if (gn('id_pundo')) {
|
|
||||||
if (PaintUndo.buffer.length == 1) {
|
|
||||||
PaintUndo.tunOffButton(gn('id_pundo'));
|
|
||||||
} else {
|
|
||||||
if (PaintUndo.index < 1) {
|
|
||||||
PaintUndo.tunOffButton(gn('id_pundo'));
|
|
||||||
} else {
|
} else {
|
||||||
PaintUndo.tunOnButton(gn('id_pundo'));
|
button.onmousedown = function (evt) {
|
||||||
|
fcn(evt);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (PaintUndo.index >= PaintUndo.buffer.length - 1) {
|
return button;
|
||||||
PaintUndo.tunOffButton(gn('id_predo'));
|
}
|
||||||
} else {
|
|
||||||
PaintUndo.tunOnButton(gn('id_predo'));
|
static runUndo () {
|
||||||
|
Path.quitEditMode();
|
||||||
|
Paint.root.removeChild(gn('layer1'));
|
||||||
|
Paint.root.appendChild(SVGTools.toObject(buffer[index]));
|
||||||
|
Paint.root.appendChild(gn('draglayer'));
|
||||||
|
Paint.root.appendChild(gn('paintgrid'));
|
||||||
|
Paint.setZoomTo(Paint.currentZoom);
|
||||||
|
}
|
||||||
|
|
||||||
|
// you record before introducing a change
|
||||||
|
static record (dontStartStories) {
|
||||||
|
if ((index + 1) <= buffer.length) {
|
||||||
|
buffer.splice(index + 1, buffer.length);
|
||||||
|
}
|
||||||
|
buffer.push(PaintUndo.getCanvas());
|
||||||
|
index++;
|
||||||
|
if (gn('id_pundo')) {
|
||||||
|
PaintUndo.updateActiveUndo();
|
||||||
|
}
|
||||||
|
if (!dontStartStories) {
|
||||||
|
ScratchJr.storyStart('PaintUndo.record'); // Record a change for sample projects in story-starter mode
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.tunOnButton = function (p) {
|
static getCanvas () {
|
||||||
var kid = p.childNodes[0];
|
return SVGTools.svg2string(gn('layer1'));
|
||||||
var kclass = kid.getAttribute('class').split(' ')[0];
|
}
|
||||||
kid.setAttribute('class', kclass + ' on');
|
|
||||||
};
|
|
||||||
|
|
||||||
PaintUndo.tunOffButton = function (p) {
|
//////////////////////////////////
|
||||||
var kid = p.childNodes[0];
|
// Control buttons callbacks
|
||||||
var kclass = kid.getAttribute('class').split(' ')[0];
|
//////////////////////////////////
|
||||||
kid.setAttribute('class', kclass + ' off');
|
|
||||||
};
|
static undo (e) {
|
||||||
|
if (e.touches && (e.touches.length > 1)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (Camera.active) {
|
||||||
|
Camera.doAction('undo');
|
||||||
|
}
|
||||||
|
while (index >= buffer.length) {
|
||||||
|
index--;
|
||||||
|
}
|
||||||
|
index--;
|
||||||
|
var snd = (index < 0) ? 'boing.wav' : 'tap.wav';
|
||||||
|
ScratchAudio.sndFX(snd);
|
||||||
|
if (index < 0) {
|
||||||
|
index = 0;
|
||||||
|
} else {
|
||||||
|
PaintUndo.runUndo();
|
||||||
|
}
|
||||||
|
PaintUndo.updateActiveUndo();
|
||||||
|
}
|
||||||
|
|
||||||
|
static redo (e) {
|
||||||
|
if (e.touches && (e.touches.length > 1)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (Camera.active) {
|
||||||
|
Camera.doAction('undo');
|
||||||
|
}
|
||||||
|
index++;
|
||||||
|
var snd = (index > buffer.length - 1) ? 'boing.wav' : 'tap.wav';
|
||||||
|
ScratchAudio.sndFX(snd);
|
||||||
|
if (index > buffer.length - 1) {
|
||||||
|
index = buffer.length - 1;
|
||||||
|
} else {
|
||||||
|
PaintUndo.runUndo();
|
||||||
|
}
|
||||||
|
PaintUndo.updateActiveUndo();
|
||||||
|
}
|
||||||
|
|
||||||
|
static updateActiveUndo () {
|
||||||
|
if (gn('id_pundo')) {
|
||||||
|
if (buffer.length == 1) {
|
||||||
|
PaintUndo.tunOffButton(gn('id_pundo'));
|
||||||
|
} else {
|
||||||
|
if (index < 1) {
|
||||||
|
PaintUndo.tunOffButton(gn('id_pundo'));
|
||||||
|
} else {
|
||||||
|
PaintUndo.tunOnButton(gn('id_pundo'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (index >= buffer.length - 1) {
|
||||||
|
PaintUndo.tunOffButton(gn('id_predo'));
|
||||||
|
} else {
|
||||||
|
PaintUndo.tunOnButton(gn('id_predo'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static tunOnButton (p) {
|
||||||
|
var kid = p.childNodes[0];
|
||||||
|
var kclass = kid.getAttribute('class').split(' ')[0];
|
||||||
|
kid.setAttribute('class', kclass + ' on');
|
||||||
|
}
|
||||||
|
|
||||||
|
static tunOffButton (p) {
|
||||||
|
var kid = p.childNodes[0];
|
||||||
|
var kclass = kid.getAttribute('class').split(' ')[0];
|
||||||
|
kid.setAttribute('class', kclass + ' off');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue