Skip to content

Commit 87e3d5c

Browse files
therewasaguytherewasaguy
committed
Merge pull request #89 from processing/soundfile-opt
soundfile memory and dispose fixes
2 parents 59cb8e8 + d771729 commit 87e3d5c

File tree

17 files changed

+375
-219
lines changed

17 files changed

+375
-219
lines changed

‎lib/addons/p5.dom.js‎

Lines changed: 62 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! p5.dom.js v0.2.6 November 24, 2015 */
1+
/*! p5.dom.js v0.2.7 January 4, 2016 */
22
/**
33
* <p>The web is much more than just canvas and p5.dom makes it easy to interact
44
* with other HTML5 objects, including text, hyperlink, image, input, video,
@@ -809,7 +809,7 @@
809809
* paths to different formats of the same audio. This is useful for ensuring
810810
* that your audio can play across different browsers, as each supports
811811
* different formats. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">this
812-
* page for further information about supported formats.
812+
* page for further information about supported formats</a>.
813813
*
814814
* @method createAudio
815815
* @param {String|Array} src path to an audio file, or array of paths for
@@ -1180,29 +1180,25 @@
11801180
* </code></div>
11811181
*/
11821182
p5.Element.prototype.translate = function(){
1183+
this.elt.style.position = 'absolute';
1184+
// save out initial non-translate transform styling
1185+
var transform = '';
11831186
if (this.elt.style.transform) {
1184-
this.elt.style.position = 'absolute';
1185-
if (arguments.length === 2){
1186-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1187-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1188-
this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
1189-
this.elt.style.transform += style;
1190-
}else if (arguments.length === 3){
1191-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1192-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1193-
this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1194-
this.elt.style.transform += style;
1187+
transform = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1188+
transform = transform.replace(/translate[X-Z]?\(.*\)/g, '');
1189+
}
1190+
if (arguments.length === 2) {
1191+
this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
1192+
} else if (arguments.length > 2) {
1193+
this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1194+
if (arguments.length === 3) {
11951195
this.elt.parentElement.style.perspective = '1000px';
1196-
}else if (arguments.length === 4){
1197-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1198-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1199-
this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1200-
this.elt.style.transform += style;
1196+
} else {
12011197
this.elt.parentElement.style.perspective = arguments[3]+'px';
12021198
}
1203-
} else {
1204-
console.log('Your browser does not support element translate function.');
12051199
}
1200+
// add any extra transform styling back on end
1201+
this.elt.style.transform += transform;
12061202
return this;
12071203
};
12081204

@@ -1230,28 +1226,24 @@
12301226
* </code></div>
12311227
*/
12321228
p5.Element.prototype.rotate = function(){
1229+
// save out initial non-rotate transform styling
1230+
var transform = '';
12331231
if (this.elt.style.transform) {
1234-
if (arguments.length === 1){
1235-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1236-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1237-
this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
1238-
this.elt.style.transform += style;
1239-
}else if (arguments.length === 2){
1240-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1241-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1242-
this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
1243-
this.elt.style.transform += style;
1244-
}else if (arguments.length === 3){
1245-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1246-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1247-
this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
1248-
this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
1249-
this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
1250-
this.elt.style.transform += style;
1251-
}
1252-
} else {
1253-
console.log('Your browser does not support element rotate function.');
1232+
var transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1233+
transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
12541234
}
1235+
1236+
if (arguments.length === 1){
1237+
this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
1238+
}else if (arguments.length === 2){
1239+
this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
1240+
}else if (arguments.length === 3){
1241+
this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
1242+
this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
1243+
this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
1244+
}
1245+
// add remaining transform back on
1246+
this.elt.style.transform += transform;
12551247
return this;
12561248
};
12571249

@@ -1277,15 +1269,37 @@
12771269
* var myDiv = createDiv("I like pandas.");
12781270
* myDiv.style("font-size", "18px");
12791271
* myDiv.style("color", "#ff0000");
1272+
* </code></div>
1273+
* <div><code class="norender">
12801274
* var col = color(25,23,200,50);
1281-
* createButton('button').style("background-color", col);
1275+
* var button = createButton("button");
1276+
* button.style("background-color", col);
1277+
* button.position(10, 10);
1278+
* </code></div>
1279+
* <div><code class="norender">
1280+
* var myDiv = createDiv("I like lizards.");
1281+
* myDiv.style("position", 20, 20);
1282+
* myDiv.style("rotate", 45);
1283+
* </code></div>
1284+
* <div><code class="norender">
1285+
* var myDiv;
1286+
* function setup() {
1287+
* background(200);
1288+
* myDiv = createDiv("I like gray.");
1289+
* myDiv.position(20, 20);
1290+
* }
1291+
*
1292+
* function draw() {
1293+
* myDiv.style("font-size", mouseX+"px");
1294+
* }
12821295
* </code></div>
12831296
*/
12841297
p5.Element.prototype.style = function(prop, val) {
12851298
var self = this;
12861299

1287-
if (val instanceof p5.Color)
1300+
if (val instanceof p5.Color) {
12881301
val = 'rgba(' + val.levels[0] + ',' + val.levels[1] + ',' + val.levels[2] + ',' + val.levels[3]/255 + ')'
1302+
}
12891303

12901304
if (typeof val === 'undefined') {
12911305
if (prop.indexOf(':') === -1) {
@@ -1302,58 +1316,14 @@
13021316
}
13031317
}
13041318
} else {
1305-
if (prop === 'rotate'){
1306-
if (this.elt.style.transform) {
1307-
if (arguments.length === 2) {
1308-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1309-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1310-
this.elt.style.transform = 'rotate(' + arguments[0] + 'deg)';
1311-
this.elt.style.transform += style;
1312-
} else if (arguments.length === 3) {
1313-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1314-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1315-
this.elt.style.transform = 'rotate(' + arguments[0] + 'deg, ' + arguments[1] + 'deg)';
1316-
this.elt.style.transform += style;
1317-
} else if (arguments.length === 4) {
1318-
var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1319-
style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
1320-
this.elt.style.transform = 'rotateX(' + arguments[0] + 'deg)';
1321-
this.elt.style.transform += 'rotateY(' + arguments[1] + 'deg)';
1322-
this.elt.style.transform += 'rotateZ(' + arguments[2] + 'deg)';
1323-
this.elt.style.transform += style;
1324-
}
1325-
} else if (prop === 'translate') {
1326-
if (arguments.length === 3) {
1327-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1328-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1329-
this.elt.style.transform = 'translate(' + arguments[0] + 'px, ' + arguments[1] + 'px)';
1330-
this.elt.style.transform += style;
1331-
} else if (arguments.length === 4) {
1332-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1333-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1334-
this.elt.style.transform = 'translate3d(' + arguments[0] + 'px,' + arguments[1] + 'px,' + arguments[2] + 'px)';
1335-
this.elt.style.transform += style;
1336-
this.elt.parentElement.style.perspective = '1000px';
1337-
} else if (arguments.length === 5) {
1338-
var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1339-
style = style.replace(/translate[X-Z]?\(.*\)/g, '');
1340-
this.elt.style.transform = 'translate3d(' + arguments[0] + 'px,' + arguments[1] + 'px,' + arguments[2] + 'px)';
1341-
this.elt.style.transform += style;
1342-
this.elt.parentElement.style.perspective = arguments[3] + 'px';
1343-
}
1344-
} else {
1345-
console.log('Your browser does not support element rotate or translate.');
1346-
}
1347-
} else if (prop === 'position') {
1348-
this.elt.style.left = arguments[1] + 'px';
1349-
this.elt.style.top = arguments[2] + 'px';
1350-
this.x = arguments[1];
1351-
this.y = arguments[2];
1319+
if (prop === 'rotate' || prop === 'translate' || prop === 'position'){
1320+
var trans = Array.prototype.shift.apply(arguments);
1321+
this[trans].apply(this, arguments);
13521322
} else {
13531323
this.elt.style[prop] = val;
13541324
if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top') {
13551325
var numVal = val.replace(/\D+/g, '');
1356-
this[prop] = parseInt(numVal, 10);
1326+
this[prop] = parseInt(numVal, 10); // pend: is this necessary?
13571327
}
13581328
}
13591329
}
@@ -1706,8 +1676,8 @@
17061676
this.drawingContext = this.canvas.getContext('2d');
17071677
}
17081678
if (this.canvas.width !== this.elt.width) {
1709-
this.canvas.width = this.elt.videoWidth;
1710-
this.canvas.height = this.elt.videoHeight;
1679+
this.canvas.width = this.elt.width;
1680+
this.canvas.height = this.elt.height;
17111681
this.width = this.canvas.width;
17121682
this.height = this.canvas.height;
17131683
}

0 commit comments

Comments
 (0)