more functionality

This commit is contained in:
slweeb 2023-07-11 15:24:12 -04:00
parent 444d8c1823
commit 214d093869
4 changed files with 98 additions and 42 deletions

View File

@ -113,6 +113,7 @@
<li>+ Place it on the canvas at any scale</li>
<li>+ Choose its element or disable smoothing in Settings</li>
<li>+ Burn it, blow it up, or make it a powder!</li></ul></li>
<li>+ Paste or Drag-and-Drop images!</li></ul></li>
<li>[Stay tuned for bigger updates in the coming months!]</li>
<li>[Bug Fixes]</li>
<li>~ Fixed: Old browsers that don't support ECMAScript 2016 crash</li>

View File

@ -14,6 +14,7 @@ A fancier version of this changelog can be found here: https://sandboxels.r74n.c
+ Place it on the canvas at any scale
+ Choose its element or disable smoothing in Settings
+ Burn it, blow it up, or make it a powder!
+ Paste or Drag-and-Drop images!
[Bug Fixes]
~ Fixed: Old browsers that don't support ECMAScript 2016 crash
Stay tuned for bigger updates in the coming months!

View File

@ -101,6 +101,7 @@
<tr><td>Smooth view (Low performance)</td> <td><kbd>4</kbd></td></tr>
<tr><td>Toggle GUI</td> <td><kbd>F1</kbd></td></tr>
<tr><td>Capture screenshot</td> <td><kbd>C</kbd> or <kbd>F2</kbd></td></tr>
<tr><td>Paste Image</td> <td><kbd>Ctrl</kbd> + <kbd>V</kbd> or Drag and Drop</td></tr>
</table>
<h2>Button Info</h2>

View File

@ -10692,6 +10692,18 @@
}
if ((e.button === 0 || e.touches) && placingImage) {
if (e.touches) { mouseMove(e); }
placeImage();
return false;
}
else if (shiftDown && e.button !== 1 && !((elements[currentElement].tool || elements[currentElement].category==="tools") && mouseType==="left")) {
shaping = 1;
shapeStart = mousePos;
}
mouseMove(e);
return false;
}
function placeImage(placementX,placementY,scale) {
if (!scale) { scale = mouseSize }
// downscale the <img to mouseSize x mouseSize and draw it
var canvas = document.createElement("canvas");
// set width or height proportional to mouseSize
@ -10723,8 +10735,8 @@
var a = newImage.data[i+3];
if (a > 0.33) {
// mousePos is the center of the image
var pixelX = mousePos.x - Math.round(newWidth/2) + x+1;
var pixelY = mousePos.y - Math.round(newHeight/2) + y+1;
var pixelX = (placementX||mousePos.x) - Math.round(newWidth/2) + x+1;
var pixelY = (placementY||mousePos.y) - Math.round(newHeight/2) + y+1;
if (isEmpty(pixelX,pixelY)) {
var elem = (settings.imageelem || "wood");
if (!elements[elem]) { elem = "wood";}
@ -10734,14 +10746,6 @@
}
}
}
return false;
}
else if (shiftDown && e.button !== 1 && !((elements[currentElement].tool || elements[currentElement].category==="tools") && mouseType==="left")) {
shaping = 1;
shapeStart = mousePos;
}
mouseMove(e);
return false;
}
function mouseUp(e) {
mouseIsDown = false;
@ -12627,6 +12631,55 @@ for (var k = 0; k < b0.split(" AND ").length; k++) {
if (e.touches) e = e.touches[0];
return false;
}
gameCanvas.addEventListener("dragenter", function(e){e.stopPropagation(); e.preventDefault();})
gameCanvas.addEventListener("dragover", function(e){e.stopPropagation(); e.preventDefault();})
gameCanvas.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
var url = e.dataTransfer.getData('text/plain');
if (url) {
var img = new Image();
img.onload = function(){placingImage = img; placeImage(); placingImage = null;}
img.src = url;
// for img file(s), read the file & draw to canvas
} else {
console.log(e.dataTransfer.files)
if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) { return; }
var file = e.dataTransfer.files[0];
if (file.type.indexOf('image/') === -1) { return; }
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e) {
aImg.onload=function(){
placingImage = aImg;
placeImage();
placingImage = null;
}
// e.target.result is a dataURL for the image
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}, false);
// if pasted image, draw to canvas
window.addEventListener("paste", function(e){
if (e.clipboardData) {
var items = e.clipboardData.items;
if (!items) { return; }
var item = items[items.length-1];
if (item.type.indexOf('image/') === -1) { return; }
var blob = item.getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
var img = new Image();
img.onload = function(){placingImage = img; placeImage(); placingImage = null;}
img.src = source;
}
}, false);
window.onbeforeunload = function(){ // Confirm leaving page if there are pixels on-screen
if (currentPixels.length > 0){
return 'Are you sure you want to leave?';