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
|
||||
//////////////////////////////////
|
||||
var PaintUndo = function () {};
|
||||
|
||||
PaintUndo.buffer = [];
|
||||
PaintUndo.index = 0;
|
||||
export let buffer = [];
|
||||
export let index = 0;
|
||||
|
||||
////////////////////////////////////////
|
||||
// Undo Controls Setup
|
||||
///////////////////////////////////////
|
||||
|
||||
PaintUndo.setup = function (p) {
|
||||
var div = newHTML('div', 'paintundo', p);
|
||||
div.setAttribute('id', 'paintundocontrols');
|
||||
var lib = [['undo', PaintUndo.undo], ['redo', PaintUndo.redo]];
|
||||
var dx = 20;
|
||||
for (var i = 0; i < lib.length; i++) {
|
||||
var bt = PaintUndo.newToggleClicky(div, 'id_p', lib[i][0], lib[i][1]);
|
||||
dx += bt.offsetWidth;
|
||||
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);
|
||||
};
|
||||
export default class PaintUndo {
|
||||
////////////////////////////////////////
|
||||
// Undo Controls Setup
|
||||
///////////////////////////////////////
|
||||
static setup (p) {
|
||||
var div = newHTML('div', 'paintundo', p);
|
||||
div.setAttribute('id', 'paintundocontrols');
|
||||
var lib = [['undo', PaintUndo.undo], ['redo', PaintUndo.redo]];
|
||||
var dx = 20;
|
||||
for (var i = 0; i < lib.length; i++) {
|
||||
var bt = PaintUndo.newToggleClicky(div, 'id_p', lib[i][0], lib[i][1]);
|
||||
dx += bt.offsetWidth;
|
||||
dx += 20;
|
||||
}
|
||||
}
|
||||
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();
|
||||
}
|
||||
if (!dontStartStories) {
|
||||
ScratchJr.storyStart('PaintUndo.record'); // Record a change for sample projects in story-starter mode
|
||||
}
|
||||
};
|
||||
|
||||
PaintUndo.getCanvas = function () {
|
||||
return SVGTools.svg2string(gn('layer1'));
|
||||
};
|
||||
|
||||
//////////////////////////////////
|
||||
// Control buttons callbacks
|
||||
//////////////////////////////////
|
||||
|
||||
PaintUndo.undo = function (e) {
|
||||
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'));
|
||||
static newToggleClicky (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 {
|
||||
PaintUndo.tunOnButton(gn('id_pundo'));
|
||||
button.onmousedown = function (evt) {
|
||||
fcn(evt);
|
||||
};
|
||||
}
|
||||
}
|
||||
if (PaintUndo.index >= PaintUndo.buffer.length - 1) {
|
||||
PaintUndo.tunOffButton(gn('id_predo'));
|
||||
} else {
|
||||
PaintUndo.tunOnButton(gn('id_predo'));
|
||||
return button;
|
||||
}
|
||||
|
||||
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) {
|
||||
var kid = p.childNodes[0];
|
||||
var kclass = kid.getAttribute('class').split(' ')[0];
|
||||
kid.setAttribute('class', kclass + ' on');
|
||||
};
|
||||
static getCanvas () {
|
||||
return SVGTools.svg2string(gn('layer1'));
|
||||
}
|
||||
|
||||
PaintUndo.tunOffButton = function (p) {
|
||||
var kid = p.childNodes[0];
|
||||
var kclass = kid.getAttribute('class').split(' ')[0];
|
||||
kid.setAttribute('class', kclass + ' off');
|
||||
};
|
||||
//////////////////////////////////
|
||||
// Control buttons callbacks
|
||||
//////////////////////////////////
|
||||
|
||||
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